@font-face {
    font-family:'Noto Sans Thai';
    font-style:normal;
    font-weight:100 900;
    font-display:swap;
    src:url('../fonts/NotoSansThai.ttf') format('truetype');
}
:root {
    --bg:#f5f7fb;
    --ink:#18273d;
    --muted:#78869a;
    --line:#e7edf4;
    --blue:#315ce8;
    --navy:#13233b;
    --green:#168466;
    --radius:16px
}
* {
    box-sizing:border-box
}
body {
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font:14px/1.6 'Noto Sans Thai',system-ui,sans-serif
}
a {
    color:inherit;
    text-decoration:none
}
button,input,select {
    font:inherit
}
button,a,input,select {
    outline-offset:4px
}
button {
    cursor:pointer
}
h1,h2,p {
    margin:0
}
h1 {
    font-size:28px;
    line-height:1.4;
    letter-spacing:-.6px
}
h2 {
    font-size:17px;
    font-weight:600
}
small {
    font-size:12px
}
table td small {
    display:block;
    color:var(--muted);
    margin-top:3px
}
strong {
    font-weight:600
}
.sidebar {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    width:245px;
    background:var(--navy);
    color:#b7c4d8;
    padding:34px 22px;
    z-index:30;
    display:flex;
    flex-direction:column
}
.brand {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:23px;
    font-weight:700;
    color:var(--ink)
}
.sidebar .brand {
    color:#fff;
    margin-bottom:44px
}
.brand-icon {
    display:grid;
    place-items:center;
    background:var(--blue);
    color:#fff;
    border-radius:12px;
    width:43px;
    height:43px;
    font-size:25px;
    flex-shrink:0
}
.brand small {
    display:block;
    font-size:11px;
    font-weight:400;
    color:var(--muted);
    letter-spacing:.5px
}
.sidebar .brand small {
    color:#9cadc5
}
.nav-caption {
    font-size:10px;
    letter-spacing:2px;
    color:#7b8fae;
    margin:0 14px 12px
}
.sidebar nav a {
    display:flex;
    gap:13px;
    padding:13px 16px;
    margin:5px 0;
    border-radius:10px
}
.sidebar nav a span {
    font-size:20px;
    line-height:1
}
.sidebar nav a:hover {
    background:#223653;
    color:#fff
}
.sidebar nav a.active {
    background:#315ce8;
    color:#fff;
    box-shadow:0 8px 24px #0a142244
}
.sidebar-bottom {
    margin-top:auto;
    font-size:12px;
    padding:15px 7px;
    border-top:1px solid #2a3d58
}
.sidebar-bottom small {
    display:block;
    color:#7f93ad;
    margin:8px 0 0 14px
}
.online-dot {
    display:inline-block;
    width:7px;
    height:7px;
    background:#55d7af;
    border-radius:50%;
    margin-right:8px
}
.app-shell {
    margin-left:245px
}
.topbar {
    height:78px;
    background:#fff;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 36px;
    gap:15px
}
.top-left {
    font-size:12px;
    color:var(--muted);
    display:flex;
    align-items:center;
    gap:12px
}
.top-left strong {
    color:var(--ink);
    font-weight:500
}
.separator {
    margin:0 12px;
    color:#bdc5d1
}
.user-panel {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12px
}
.user-panel small {
    display:block;
    color:var(--muted);
    font-size:10px
}
.avatar {
    background:#edf1ff;
    color:var(--blue);
    width:35px;
    height:35px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-weight:700
}
.logout {
    border:0;
    background:transparent;
    color:var(--muted);
    font-size:11px;
    margin-left:8px
}
.content {
    padding:26px 36px 12px;
    max-width:1700px;
    margin:auto
}
.page-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:27px
}
.page-heading p {
    color:var(--muted);
    margin-top:7px;
    font-size:13px
}
.eyebrow {
    font-size:10px;
    font-weight:700;
    letter-spacing:1.9px;
    color:var(--blue);
    display:block;
    margin-bottom:7px
}
.actions {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap
}
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid transparent;
    padding:10px 17px;
    border-radius:9px;
    font-size:12px;
    font-weight:600;
    min-height:41px;
    white-space:nowrap;
    transition:background .15s
}
.btn.primary {
    color:#fff;
    background:var(--blue);
    box-shadow:0 5px 12px #315ce818
}
.btn.primary:hover {
    background:#2048cd
}
.btn.secondary {
    background:#fff;
    border-color:#dce4ef;
    color:#506078
}
.btn.secondary:hover {
    background:#f2f5fc
}
.btn.danger {
    background:#fff;
    border-color:#f0cdd0;
    color:#bf454f
}
.btn.small {
    font-size:11px;
    padding:6px 11px;
    min-height:30px
}
.full {
    width:100%
}
.stats-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
    margin-bottom:25px
}
.stats-grid.three {
    grid-template-columns:repeat(3,minmax(0,1fr))
}
.stat-card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:20px 22px;
    box-shadow:0 3px 12px #16284903
}
.stat-label {
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#718097;
    font-size:12px;
    margin-bottom:9px;
    min-height:28px
}
.stat-icon {
    width:30px;
    height:30px;
    border-radius:8px;
    color:var(--blue);
    background:#eef2ff;
    display:grid;
    place-items:center;
    font-size:17px
}
.stat-icon.green {
    color:var(--green);
    background:#eaf8f3
}
.stat-icon.amber {
    color:#bd8b28;
    background:#fff5e4
}
.stat-card>strong {
    display:block;
    font-size:28px;
    font-weight:600;
    letter-spacing:-.7px
}
.stat-card small {
    display:block;
    color:var(--muted);
    font-size:11px;
    margin-top:5px
}
.stat-card em {
    font-size:13px;
    font-style:normal;
    color:var(--muted);
    margin-left:4px
}
.panel {
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:0 3px 12px #16284903;
    overflow:hidden;
    margin-bottom:24px
}
.panel-heading {
    padding:23px 25px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px
}
.panel-heading p {
    font-size:11px;
    color:var(--muted);
    margin-top:4px
}
.panel-heading.compact {
    padding-top:18px;
    padding-bottom:18px
}
.overview-grid {
    display:grid;
    grid-template-columns:1.7fr 1fr;
    gap:24px
}
.badge {
    display:inline-block;
    font-size:10px;
    font-weight:500;
    border-radius:6px;
    padding:5px 9px;
    white-space:nowrap
}
.badge.blue {
    background:#edf2ff;
    color:#3b61d3
}
.badge.green {
    background:#eaf7f1;
    color:#188360
}
.badge.gray {
    background:#edf0f4;
    color:#8390a2
}
.count-pill {
    display:inline-block;
    color:#607492;
    background:#f1f4f9;
    padding:1px 9px;
    margin-left:8px;
    border-radius:6px;
    font-size:11px
}
.bar-chart {
    height:223px;
    display:flex;
    gap:15px;
    padding:10px 28px 25px;
    align-items:end
}
.bar-item {
    flex:1;
    text-align:center;
    min-width:0
}
.bar-item>span {
    font-size:10px;
    color:#637594;
    display:block;
    margin-bottom:8px
}
.bar-track {
    height:130px;
    display:flex;
    align-items:end;
    border-bottom:1px solid #dfe6f1;
    background:repeating-linear-gradient(to top,transparent 0 42px,#f4f6fa 42px 43px)
}
.bar-fill {
    width:55%;
    min-height:2px;
    max-height:100%;
    margin:auto auto 0;
    background:linear-gradient(#6186ff,#315ce8);
    border-radius:5px 5px 0 0
}
.bar-item small {
    display:block;
    margin-top:9px;
    font-size:11px;
    color:var(--muted)
}
.status-summary {
    padding:0 25px 25px
}
.status-number {
    font-size:44px;
    font-weight:600;
    margin:4px 0 19px
}
.status-number small {
    font-size:11px;
    color:var(--muted);
    display:block;
    font-weight:400
}
.status-row {
    display:flex;
    justify-content:space-between;
    font-size:12px;
    margin-bottom:16px
}
.legend-dot {
    display:inline-block;
    border-radius:50%;
    width:7px;
    height:7px;
    margin-right:6px
}
.blue-dot {
    background:var(--blue)
}
.green-dot {
    background:var(--green)
}
.table-scroll {
    overflow-x:auto
}
table {
    width:100%;
    border-collapse:collapse;
    white-space:nowrap;
    text-align:left
}
th {
    font-size:11px;
    font-weight:500;
    color:#7a889f;
    background:#f9fbfd;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:12px 20px
}
td {
    padding:16px 20px;
    border-bottom:1px solid var(--line);
    font-size:12px
}
tbody tr:last-child td {
    border-bottom:0
}
tbody tr:hover {
    background:#fcfdff
}
.number {
    text-align:right;
    font-variant-numeric:tabular-nums
}
.strong {
    font-weight:600
}
.record-id {
    font-weight:600;
    color:var(--blue);
    font-size:11px
}
.record-code {
    font-size:11px!important;
    overflow-wrap:anywhere;
    white-space:normal;
    letter-spacing:.3px
}
.text-link {
    color:var(--blue);
    font-size:11px
}
.empty {
    text-align:center;
    padding:55px 20px;
    color:var(--muted)
}
.filter-bar {
    display:flex;
    align-items:end;
    gap:12px;
    padding:22px 25px;
    background:#fcfdff;
    border-bottom:1px solid var(--line)
}
.field {
    display:flex;
    flex-direction:column;
    gap:7px;
    margin-bottom:19px;
    min-width:0
}
.field label {
    font-size:12px;
    font-weight:500;
    color:#506078
}
.field input,.field select {
    width:100%;
    border:1px solid #dce3ed;
    border-radius:8px;
    background:#fff;
    color:var(--ink);
    padding:10px 12px;
    min-height:43px;
    transition:border-color .15s
}
.field input:focus,.field select:focus {
    outline:2px solid #315ce823;
    border-color:var(--blue)
}
.field input::placeholder {
    color:#a7b0be
}
.field small {
    font-size:10px;
    color:var(--muted)
}
.filter-bar .field {
    margin-bottom:0;
    flex:0 1 160px
}
.filter-bar .search-field {
    flex:1
}
.filter-bar .btn {
    height:43px
}
.pagination {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 25px;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:11px
}
.form-layout {
    display:grid;
    grid-template-columns:minmax(0,1.8fr) minmax(270px,1fr);
    gap:24px;
    align-items:start
}
.form-panel {
    padding:28px
}
.form-panel>p {
    font-size:12px;
    margin-top:4px;
    margin-bottom:25px
}
.form-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 22px;
    margin-top:23px
}
.span-2 {
    grid-column:span 2
}
.info-note {
    padding:14px 17px;
    background:#f3f6fc;
    border-radius:9px;
    font-size:11px;
    color:#71829a;
    margin-top:10px;
    line-height:1.8
}
.calculation {
    padding:27px
}
.summary-row {
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:15px 0;
    color:#6c7d94;
    font-size:12px;
    border-bottom:1px solid var(--line)
}
.summary-row strong {
    color:var(--ink);
    font-size:13px
}
.summary-total {
    padding:25px 0;
    border-bottom:1px solid var(--line)
}
.summary-total span {
    display:block;
    color:#647894;
    font-size:12px
}
.summary-total strong {
    display:block;
    color:var(--blue);
    font-size:34px;
    line-height:1.4;
    margin:8px 0
}
.summary-total small {
    color:var(--muted)
}
.calculation>small {
    display:block;
    margin-top:18px;
    font-size:10px
}
.form-actions {
    display:flex;
    justify-content:end;
    gap:10px;
    margin:12px 0 25px
}
.back-link {
    font-size:11px;
    color:var(--muted);
    display:inline-block;
    margin-bottom:13px
}
.detail-title {
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap
}
.balance-card {
    background:#315ce8;
    color:#fff;
    border-color:#315ce8
}
.balance-card .stat-label,.balance-card small {
    color:#d8e1ff
}
.green-text {
    color:var(--green)
}
.agreement .panel-heading>span {
    font-size:11px;
    color:var(--muted)
}
.progress {
    height:5px;
    margin:0 25px;
    background:#edf1f9;
    border-radius:5px;
    overflow:hidden
}
.progress span {
    display:block;
    background:var(--blue);
    height:100%
}
.detail-grid {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    padding:20px 25px;
    gap:15px;
    margin:0
}
.detail-grid dt {
    font-size:10px;
    color:var(--muted);
    margin-bottom:8px
}
.detail-grid dd {
    margin:0;
    font-size:12px;
    font-weight:500;
    overflow-wrap:anywhere
}
.row-actions {
    display:flex;
    align-items:center;
    gap:11px
}
.link-button {
    background:none;
    border:0;
    font-size:11px;
    padding:0;
    color:var(--blue)
}
.amber-text {
    color:#b08224
}
.danger-text {
    color:#c84f58
}
.cancelled-row {
    color:#929baa;
    background:#fafbfc
}
.danger-zone {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 24px;
    border:1px dashed #e3c4c8;
    border-radius:12px;
    margin-bottom:25px;
    font-size:12px
}
.danger-zone small {
    display:block;
    color:var(--muted);
    margin-top:3px
}
.alert {
    padding:12px 16px;
    border-radius:9px;
    margin-bottom:20px;
    font-size:12px
}
.alert.success {
    background:#eaf7f0;
    color:#187354;
    border:1px solid #ceefdf
}
.alert.error,.validation:not(:empty) {
    background:#fff0f1;
    color:#b34750;
    border:1px solid #f4d9dc
}
.validation {
    border-radius:9px;
    margin-bottom:20px;
    font-size:12px
}
.validation ul {
    padding:12px 30px;
    margin:0
}
.validation-summary-valid {
    display:none
}
.field-validation-error {
    font-size:11px;
    color:#b34750
}
.input-validation-error {
    border-color:#d16670!important
}
.page-footer {
    padding:22px 0 10px;
    display:flex;
    justify-content:space-between;
    font-size:10px;
    color:#a4aebb
}
.muted {
    color:var(--muted)
}
.menu-toggle {
    display:none;
    background:none;
    border:0;
    font-size:22px;
    color:var(--ink)
}
.receipt {
    max-width:950px;
    margin:0 auto 25px;
    padding:40px
}
.receipt-header {
    display:flex;
    justify-content:space-between;
    gap:25px;
    padding-bottom:25px;
    border-bottom:1px solid var(--line)
}
.receipt-header>div:last-child {
    text-align:right
}
.receipt-header p {
    margin:6px 0
}
.receipt-info {
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:28px 0
}
.receipt-totals {
    max-width:360px;
    margin:15px 0 20px auto
}
.receipt-note {
    font-size:10px;
    margin-top:40px
}
.signatures {
    display:flex;
    justify-content:space-around;
    gap:40px;
    margin-top:55px;
    text-align:center;
    font-size:12px
}
.signatures span {
    display:block;
    margin-top:35px;
    color:#8491a4
}
.login-page {
    min-height:100vh;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    max-width:1200px;
    margin:auto;
    padding:50px;
    gap:90px
}
.login-intro .brand {
    margin-bottom:70px
}
.login-intro h1 {
    font-size:46px;
    line-height:1.5;
    margin:16px 0
}
.login-intro>p {
    color:var(--muted);
    line-height:2
}
.intro-decoration {
    display:flex;
    align-items:center;
    gap:20px;
    background:#edf2fc;
    padding:25px;
    border-radius:16px;
    margin-top:45px
}
.intro-decoration>span {
    font-size:36px;
    color:var(--blue)
}
.intro-decoration small {
    display:block;
    color:var(--muted);
    margin-bottom:4px
}
.intro-decoration strong {
    font-size:12px
}
.login-card {
    padding:40px;
    border:1px solid var(--line);
    border-radius:22px;
    background:#fff;
    box-shadow:0 20px 80px #17305a0a
}
.login-card h2 {
    font-size:28px
}
.login-card>p {
    font-size:12px;
    margin-top:8px
}
.login-card form {
    margin:30px 0 22px
}
.login-card>small {
    font-size:10px;
    display:block;
    text-align:center
}
@media(min-width:1800px) {
    .content {
        padding-top:35px
    }
}
@media(max-width:1200px) {
    .sidebar {
        width:215px;
        padding:30px 16px
    }
    .app-shell {
        margin-left:215px
    }
    .content {
        padding:23px
    }
    .topbar {
        padding:0 23px
    }
    .stats-grid {
        gap:12px
    }
    .stat-card {
        padding:18px 16px
    }
    .stat-card>strong {
        font-size:23px
    }
    .detail-grid {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
    .overview-grid {
        gap:18px
    }
    .filter-bar {
        flex-wrap:wrap
    }
    .filter-bar .search-field {
        min-width:230px
    }
    .form-layout {
        grid-template-columns:minmax(0,1.5fr) minmax(245px,1fr)
    }
}
@media(max-width:900px) {
    .sidebar {
        transform:translateX(-100%);
        transition:transform .2s;
        width:245px;
        box-shadow:12px 0 35px #18273d33
    }
    .sidebar.open {
        transform:translateX(0)
    }
    .app-shell {
        margin-left:0
    }
    .menu-toggle {
        display:block
    }
    .stats-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .stats-grid.three {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
    .overview-grid {
        grid-template-columns:1.4fr 1fr
    }
    .page-heading {
        align-items:start
    }
    .topbar {
        height:68px
    }
    .login-page {
        gap:35px;
        padding:35px
    }
    .login-intro h1 {
        font-size:35px
    }
    .login-card {
        padding:30px
    }
    .form-layout {
        grid-template-columns:1fr
    }
    .calculation {
        max-width:none
    }
    .receipt {
        padding:25px
    }
}
@media(max-width:600px) {
    .content {
        padding:16px
    }
    .topbar {
        padding:0 16px
    }
    .top-left>span {
        display:none
    }
    .logout {
        font-size:10px
    }
    .page-heading {
        flex-direction:column;
        gap:15px;
        margin-bottom:22px
    }
    h1 {
        font-size:24px
    }
    .page-heading>.actions,.page-heading>.btn {
        align-self:stretch
    }
    .page-heading .actions .btn {
        flex:1
    }
    .stats-grid,.stats-grid.three {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px
    }
    .stats-grid.three .balance-card {
        grid-column:span 2
    }
    .stat-card {
        padding:16px 14px
    }
    .stat-card>strong {
        font-size:22px
    }
    .stat-label {
        font-size:10px
    }
    .stat-card small {
        font-size:9px
    }
    .overview-grid {
        grid-template-columns:1fr;
        gap:0
    }
    .panel-heading {
        padding:20px
    }
    .panel-heading h2 {
        font-size:15px
    }
    .table-scroll th,.table-scroll td {
        padding-left:16px;
        padding-right:16px
    }
    .filter-bar {
        padding:18px;
        gap:10px
    }
    .filter-bar .field {
        flex:1;
        min-width:120px
    }
    .filter-bar .search-field {
        flex-basis:100%
    }
    .filter-bar .btn {
        flex:1
    }
    .pagination {
        padding:16px;
        gap:12px;
        align-items:start;
        flex-direction:column
    }
    .form-panel {
        padding:21px
    }
    .form-grid {
        grid-template-columns:1fr;
        gap:0
    }
    .span-2 {
        grid-column:span 1
    }
    .detail-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        padding:20px
    }
    .form-actions .btn {
        flex:1
    }
    .danger-zone {
        gap:15px;
        padding:17px
    }
    .page-footer span {
        display:none
    }
    .login-page {
        display:block;
        padding:30px 20px;
        max-width:480px
    }
    .login-intro .brand {
        margin-bottom:24px
    }
    .login-intro>h1,.login-intro>p,.login-intro>.eyebrow,.intro-decoration {
        display:none
    }
    .login-card {
        padding:27px
    }
    .receipt-header {
        flex-direction:column
    }
    .receipt-header>div:last-child {
        text-align:left
    }
    .receipt-info {
        padding:22px 0
    }
    .receipt {
        padding:20px
    }
    .record-code {
        font-size:10px!important
    }
    .signatures {
        gap:20px;
        font-size:11px
    }
}
@media print {
    body {
        background:#fff;
        color:#111;
        font-size:12px
    }
    .sidebar,.topbar,.page-heading,.page-footer,.no-print {
        display:none!important
    }
    .app-shell {
        margin:0
    }
    .content {
        padding:0
    }
    .receipt {
        margin:0;
        border:0;
        box-shadow:none;
        max-width:100%;
        padding:0
    }
    .panel {
        break-inside:avoid
    }
    .receipt table {
        white-space:normal
    }
    .badge {
        border:1px solid #bbb
    }
    .receipt-info {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .receipt .brand-icon {
        background:#fff;
        color:#111;
        border:1px solid #111
    }
    a {
        color:#111
    }
    @page {
        size:A4;
        margin:18mm
    }
}