:root{
  --bg:#f5f4f0;--surface:#ffffff;--surface2:#faf9f6;
  --sidebar:#1a1a2e;--sidebar2:#16213e;
  --border:#e8e4dc;--border2:#d4cfc4;
  --ink:#1a1714;--ink2:#4a4540;--muted:#9a9087;
  --gold:#c9933a;--gold-lt:#f0ddb8;--gold-glow:rgba(201,147,58,.12);
  --emerald:#2a7d5c;--emerald-lt:#d4ede3;
  --ruby:#c0392b;--ruby-lt:#fde8e6;
  --sapphire:#2563b7;--sapphire-lt:#dbeafe;
  --amber:#d97706;--amber-lt:#fef3c7;
  --violet:#6d28d9;--violet-lt:#ede9fe;
  --font:'Noto Sans Thai',sans-serif;
  --serif:'Playfair Display',serif;
  --mono:'JetBrains Mono',monospace;
  --sidebar-w:240px;--radius:14px;
  --shadow:0 2px 16px rgba(0,0,0,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;margin:0;padding:0;overflow:hidden}
body{font-family:var(--font);background:var(--bg);color:var(--ink);display:flex;height:100vh;width:100vw}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}

/* SIDEBAR */
.sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--sidebar);display:flex;flex-direction:column;height:100vh;overflow:hidden;position:relative;flex-shrink:0}
.sidebar::after{content:'';position:absolute;bottom:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(201,147,58,.15) 0%,transparent 70%);pointer-events:none}
.brand{padding:18px 16px 16px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;align-items:flex-start}
.brand-name{font-family:var(--serif);font-size:1.1rem;color:#fff;display:flex;align-items:center;gap:8px}
.brand-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px rgba(201,147,58,.7);flex-shrink:0;animation:glow 2.5s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 6px rgba(201,147,58,.5)}50%{box-shadow:0 0 14px rgba(201,147,58,.9)}}
.brand-sub{font-size:.65rem;color:rgba(255,255,255,.3);letter-spacing:.14em;text-transform:uppercase;margin-top:4px;padding-left:16px}
.nav{flex:1;padding:14px 10px;overflow-y:auto}
.nav-section{font-size:.6rem;color:rgba(255,255,255,.22);letter-spacing:.15em;text-transform:uppercase;padding:14px 10px 6px}
.nav-btn{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:9px;background:none;border:none;color:rgba(255,255,255,.52);font-family:var(--font);font-size:.84rem;cursor:pointer;transition:all .18s;margin-bottom:1px;text-align:left}
.nav-btn:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.82)}
.nav-btn.active{background:linear-gradient(135deg,var(--gold),#e8b56a);color:#fff;font-weight:600;box-shadow:0 3px 14px rgba(201,147,58,.3)}
.nav-btn .ni{font-size:.95rem;width:18px;text-align:center;flex-shrink:0}
.nav-btn .nc{margin-left:auto;background:rgba(255,255,255,.13);border-radius:8px;padding:1px 7px;font-size:.68rem;font-family:var(--mono)}
.nav-btn.active .nc{background:rgba(0,0,0,.15)}
.nav-group-header{display:flex;align-items:center;justify-content:space-between;padding:10px 10px 4px;cursor:pointer;user-select:none;border-radius:8px;transition:background .15s}
.nav-group-header:hover{background:rgba(255,255,255,.05)}
.nav-group-label{font-size:.6rem;color:rgba(255,255,255,.35);letter-spacing:.15em;text-transform:uppercase;font-weight:600}
.nav-group-arrow{font-size:.55rem;color:rgba(255,255,255,.25);transition:transform .2s}
.nav-group-arrow.open{transform:rotate(90deg)}
.nav-children{overflow:hidden;transition:max-height .25s ease,opacity .2s;max-height:600px;opacity:1}
.nav-children.collapsed{max-height:0;opacity:0}
.nav-sub{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px 7px 26px;border-radius:8px;background:none;border:none;color:rgba(255,255,255,.45);font-family:var(--font);font-size:.79rem;cursor:pointer;transition:all .15s;margin-bottom:1px;text-align:left}
.nav-sub:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.75)}
.nav-sub.active{background:linear-gradient(135deg,var(--gold),#e8b56a);color:#fff;font-weight:600;box-shadow:0 2px 10px rgba(201,147,58,.25)}
.nav-sub .ni{font-size:.82rem;width:16px;text-align:center;flex-shrink:0}
.nav-sub .nc{margin-left:auto;background:rgba(255,255,255,.13);border-radius:8px;padding:1px 6px;font-size:.65rem;font-family:var(--mono)}
.nav-sub.active .nc{background:rgba(0,0,0,.15)}
.nav-badge-group{margin-left:auto;background:rgba(255,255,255,.1);border-radius:8px;padding:1px 7px;font-size:.65rem;font-family:var(--mono);color:rgba(255,255,255,.6)}

.vp-row{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:7px;cursor:pointer;color:rgba(255,255,255,.6);font-size:.78rem;transition:all .14s}
.vp-row:hover{background:rgba(255,255,255,.07);color:#fff}
.vp-row.active{color:var(--gold);font-weight:600}
.vp-del{opacity:0;padding:2px 7px;border-radius:5px;font-size:.78rem;transition:all .14s}
.vp-row:hover .vp-del{opacity:.7}
.vp-del:hover{background:var(--ruby)!important;color:#fff;opacity:1!important}
.vp-meta{font-size:.62rem;color:rgba(255,255,255,.22);margin-top:1px}

/* MAIN */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;height:100vh}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 22px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;gap:12px}
.pg-title{font-family:var(--serif);font-size:1.35rem;color:var(--ink)}
.pg-sub{font-size:.72rem;color:var(--muted);margin-top:2px}
.topbar-r{display:flex;align-items:center;gap:6px;flex-shrink:0}
.content{flex:1;overflow-y:auto;overflow-x:hidden;padding:22px 26px;height:0;box-sizing:border-box}
.restricted-user .sidebar{display:none}
.restricted-user #notif-wrapper,
.restricted-user #topbar-import-btn,
.restricted-user #btn-export-xl,
.restricted-user #btn-export-pdf{display:none!important}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;font-family:var(--font);font-size:.81rem;font-weight:600;cursor:pointer;transition:all .17s;border:none;white-space:nowrap}
.btn-gold{background:var(--gold);color:#fff;box-shadow:0 2px 10px rgba(201,147,58,.25)}
.btn-gold:hover{background:#b5822c;box-shadow:0 4px 16px rgba(201,147,58,.4);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink2);border:1px solid var(--border2)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-glow)}
.btn-danger{background:var(--ruby);color:#fff}
.btn-danger:hover{background:#a93226}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}
.btn-sm{padding:6px 12px;font-size:.74rem;border-radius:7px}

/* CARDS */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.ctitle{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:13px;font-family:var(--mono)}
.chead{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.chead .ctitle{margin-bottom:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.gap{margin-bottom:18px}

/* KPI */
.kpi{border-radius:12px;padding:16px 18px;position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--border)}
.kpi-gold{border-top-color:#c9933a}.kpi-emerald{border-top-color:#2a7d5c}.kpi-ruby{border-top-color:#c0392b}
.kpi-sapphire{border-top-color:#2563b7}.kpi-violet{border-top-color:#6d28d9}.kpi-amber{border-top-color:#d97706}
.kpi-flat{border-top-color:var(--border2)}
.kpi-label{font-size:.67rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;font-weight:600}
.kpi-val{font-family:var(--mono);font-size:1.4rem;font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.kpi-gold .kpi-val{color:#c9933a}.kpi-emerald .kpi-val{color:#2a7d5c}.kpi-ruby .kpi-val{color:#c0392b}
.kpi-sapphire .kpi-val{color:#2563b7}.kpi-violet .kpi-val{color:#6d28d9}.kpi-amber .kpi-val{color:#d97706}
.kpi-flat .kpi-val{color:var(--ink)}
.kpi-sub{font-size:.72rem;color:var(--muted);margin-top:5px}
.kpi-ico{position:absolute;top:14px;right:16px;font-size:1.1rem;opacity:.2}

/* TABLE */
.tbl-wrap{overflow-x:auto;overflow-y:auto;border-radius:10px;border:1px solid var(--border)}
table{width:100%;border-collapse:collapse;font-size:.8rem}
thead th{background:var(--surface2);color:var(--muted);font-size:.64rem;text-transform:uppercase;letter-spacing:.1em;padding:10px 13px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;font-family:var(--mono);position:sticky;top:0;z-index:2}
tbody tr{border-bottom:1px solid var(--border);transition:background .1s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:var(--gold-glow)}
tbody td{padding:10px 13px;vertical-align:middle}
tfoot tr{background:var(--surface2)}
tfoot td{padding:10px 13px;font-weight:700;font-family:var(--mono);font-size:.78rem}
.num{font-family:var(--mono);text-align:right;font-size:.77rem}
.muted-sm{font-family:var(--mono);font-size:.73rem;color:var(--muted)}

/* BADGE */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:.67rem;font-weight:600;white-space:nowrap}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0}
.bg-green{background:var(--emerald-lt);color:var(--emerald)}.bg-green::before{background:var(--emerald)}
.bg-gold{background:var(--gold-lt);color:#8a5c10}.bg-gold::before{background:var(--gold)}
.bg-red{background:var(--ruby-lt);color:var(--ruby)}.bg-red::before{background:var(--ruby)}
.bg-blue{background:var(--sapphire-lt);color:var(--sapphire)}.bg-blue::before{background:var(--sapphire)}
.bg-amber{background:var(--amber-lt);color:var(--amber)}.bg-amber::before{background:var(--amber)}
.bg-gray{background:#f0ede8;color:var(--muted)}.bg-gray::before{background:var(--muted)}
.bg-violet{background:var(--violet-lt);color:var(--violet)}.bg-violet::before{background:var(--violet)}

/* DETAIL ROW */
.dtl-row{background:var(--surface2)!important}
.dtl-row td{padding:0!important}
.dtl-inner{padding:14px 16px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;font-size:.78rem}
.dtl-blk{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px}
.dtl-blk-t{font-size:.63rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:8px;font-family:var(--mono)}
.dtl-kv{display:flex;justify-content:space-between;margin-bottom:4px;gap:8px}
.dtl-k{color:var(--muted);flex-shrink:0}
.dtl-v{font-weight:600;text-align:right}
.sum-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border);font-size:.78rem}
.sum-row:last-child{border-bottom:none;font-weight:700;color:var(--gold);padding-top:9px}

/* UPLOAD */
.up-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:18px}
.up-slot{border:2px dashed var(--border2);border-radius:11px;padding:0 14px;text-align:center;cursor:pointer;transition:all .2s;position:relative;background:var(--surface2);height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.up-slot input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.up-slot:hover,.up-slot.drag-over{border-color:var(--gold);background:var(--gold-glow)}
.up-slot.valid{border-color:var(--emerald);border-style:solid;background:var(--emerald-lt)}
.up-slot.error{border-color:var(--ruby);border-style:solid;background:var(--ruby-lt)}
.up-icon{font-size:1.5rem;margin-bottom:5px;flex-shrink:0}
.up-lbl{font-size:.72rem;font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}
.up-stat{font-size:.67rem;margin-top:3px;color:var(--muted);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.up-slot.valid .up-stat{color:var(--emerald);font-weight:600}
.up-slot.error .up-stat{color:var(--ruby);font-weight:600}
.proc-row{display:flex;align-items:center;gap:10px;padding:13px 16px;background:var(--surface2);border-radius:9px;border:1px solid var(--border)}
.proc-row input{flex:1;border:none;background:transparent;font-family:var(--font);font-size:.88rem;color:var(--ink);outline:none}
.proc-row input::placeholder{color:var(--muted)}

/* PAGE */
.page{display:none;animation:fin .2s ease;padding-bottom:40px;min-height:0;max-width:100%;overflow-x:hidden}
.page.active{display:block}
/* Prevent grid children from overflowing */
.page *{min-width:0;}
#pcc-dept-budget-grid>div,#dept-budget-grid>div{overflow:hidden;width:100%;box-sizing:border-box}
#pcc-dept-budget-grid input,#dept-budget-grid input{width:100%;box-sizing:border-box;min-width:0}
@keyframes fin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* CHART */
.chart-wrap{position:relative}

/* CHIP */
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:6px;font-size:.72rem;font-family:var(--mono);background:var(--surface2);border:1px solid var(--border);color:var(--ink2)}

/* EMPTY */
.empty{text-align:center;padding:52px 20px;color:var(--muted)}
.empty-ico{font-size:2.8rem;margin-bottom:10px}
.empty h3{font-size:.95rem;color:var(--ink);margin-bottom:5px;font-family:var(--serif)}

/* TOAST */
#toast{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:7px;pointer-events:none}
.ti{padding:11px 16px;border-radius:9px;font-size:.8rem;font-weight:600;box-shadow:0 4px 18px rgba(0,0,0,.13);animation:ti-in .25s ease;pointer-events:auto}
.ti.ok{background:var(--emerald);color:#fff}
.ti.err{background:var(--ruby);color:#fff}
.ti.info{background:var(--ink);color:#fff}
@keyframes ti-in{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}

/* SEARCH */
.srch{padding:7px 12px;border:1px solid var(--border2);border-radius:8px;font-family:var(--font);font-size:.8rem;background:var(--surface2);color:var(--ink);outline:none;transition:border .15s;min-width:0;width:100%;box-sizing:border-box}
.srch:focus{border-color:var(--gold)}
.srch::placeholder{color:var(--muted)}
select.srch{cursor:pointer}

/* EXPENSE SUB-TABS */
.etab{padding:7px 16px;border-radius:7px;background:none;border:none;font-family:var(--font);font-size:.8rem;font-weight:500;color:var(--muted);cursor:pointer;transition:all .15s}
.etab:hover{color:var(--ink);background:var(--gold-glow)}
.etab.etab-active{background:var(--gold);color:#fff;font-weight:700;box-shadow:0 2px 10px rgba(201,147,58,.25)}

.pl-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);font-size:.85rem}
.pl-row:last-child{border-bottom:none}
.pl-row.pl-total{font-weight:700;font-size:.95rem;padding-top:12px;border-top:2px solid var(--border2);border-bottom:none;margin-top:4px}
.pl-row.pl-section{font-size:.68rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding-top:14px;padding-bottom:4px;border-bottom:none}
.pl-row.pl-sub{padding-left:16px;font-size:.82rem;color:var(--ink2)}
.pl-pos{color:var(--emerald);font-family:var(--mono);font-weight:600}
.pl-neg{color:var(--ruby);font-family:var(--mono);font-weight:600}
.pl-neu{font-family:var(--mono);font-weight:600}
.ag-badge-0{background:#d4ede3;color:#1a6a46;padding:2px 9px;border-radius:10px;font-size:.7rem;font-weight:700}
.ag-badge-31{background:#fef9c3;color:#854d0e;padding:2px 9px;border-radius:10px;font-size:.7rem;font-weight:700}
.ag-badge-61{background:#fee2e2;color:#991b1b;padding:2px 9px;border-radius:10px;font-size:.7rem;font-weight:700}
.ag-badge-91{background:#1a1a2e;color:#fff;padding:2px 9px;border-radius:10px;font-size:.7rem;font-weight:700}
@media(max-width:960px){
  .grid4{grid-template-columns:1fr 1fr}.grid5{grid-template-columns:1fr 1fr}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .up-grid{grid-template-columns:1fr 1fr}
  .dtl-inner{grid-template-columns:1fr}
}

.drp-preset{padding:6px 12px;border:1px solid var(--border2);border-radius:20px;background:var(--surface2);font-family:var(--font);font-size:.76rem;cursor:pointer;transition:all .15s;color:var(--ink2)}
.drp-preset:hover,.drp-preset.active{background:var(--gold);color:#fff;border-color:var(--gold)}
.inp-label{font-size:.72rem;color:var(--muted);font-weight:600;margin-bottom:5px;text-transform:uppercase;letter-spacing:.08em;display:block}
.pcc-type-btn{padding:10px 12px;border:1.5px solid var(--border2);border-radius:10px;background:var(--surface2);font-family:var(--font);font-size:.78rem;cursor:pointer;text-align:center;transition:all .15s;color:var(--ink2);line-height:1.4}
.pcc-type-btn:hover{border-color:var(--gold);color:var(--gold)}
.pcc-type-btn.active{border-color:var(--gold);background:rgba(201,147,58,.08);color:var(--gold);font-weight:700}
@keyframes spin{to{transform:rotate(360deg)}}
.drp-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--border2);border-radius:8px;background:var(--surface2);font-family:var(--font);font-size:.76rem;cursor:pointer;color:var(--ink2);transition:all .15s;white-space:nowrap}
.drp-btn:hover{border-color:var(--gold);color:var(--gold)}
.drp-btn.active{border-color:var(--gold);color:var(--gold);background:var(--gold-glow)}

.iv-overdue{background:rgba(192,57,43,.04)!important}
.iv-warn{background:rgba(245,158,11,.04)!important}
/* Notification tabs */
.ntab{padding:8px 14px;background:none;border:none;font-family:var(--font);font-size:.78rem;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s}
.ntab:hover{color:var(--ink)}
.ntab.ntab-active{color:var(--gold);border-bottom-color:var(--gold);font-weight:600}
/* Notification items */
.nitem{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:flex-start;transition:background .12s;cursor:default}
.nitem:hover{background:var(--surface2)}
.nitem:last-child{border-bottom:none}
.nitem-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px}
.nitem-dot.unread{background:var(--ruby)}
.nitem-dot.read{background:var(--border2)}
.nitem-title{font-size:.82rem;font-weight:600;color:var(--ink);margin-bottom:3px}
.nitem-sub{font-size:.74rem;color:var(--muted);line-height:1.5}
.nitem-tag{display:inline-flex;align-items:center;padding:1px 7px;border-radius:8px;font-size:.67rem;font-weight:600;margin-top:4px}
.nitem-tag.overdue{background:var(--ruby-lt);color:var(--ruby)}
.nitem-tag.warn{background:var(--amber-lt);color:var(--amber)}