/* App layer on top of the approved v6 design (base.css + v6.css untouched).
   Same language: glass cards, gold pills, navy art sidebar, Noto Sans Thai. */
[hidden]{display:none!important}
.view{display:none}.view.on{display:block}
.ov-only,.pj-only{display:none}
.view.on.is-overview .ov-only{display:block}
.view.on.is-projects .pj-only{display:block}
.nav-item{cursor:pointer}

/* ---------- login ---------- */
.login-shell{min-height:100vh;display:grid;place-items:center;position:relative;overflow:hidden;background:#0b2242}
.login-art{position:absolute;inset:0;background:#0b2242 url('/assets/sidebar-art.png') center/cover no-repeat;filter:saturate(1.05)}
.login-card{position:relative;z-index:1;width:min(400px,90vw);padding:34px 32px 26px;text-align:center;display:flex;flex-direction:column;gap:12px}
.wordmark.dark{color:#0a1a36;text-shadow:none;font-family:'Cormorant Garamond',Georgia,serif;font-size:52px;line-height:1;letter-spacing:2px}
.tag-line{font-family:'Prompt',sans-serif;color:#40506a;margin-top:-6px}
.login-card h2{font-size:22px;margin:6px 0 2px}
.field{display:block;text-align:left;font-size:14px;color:#4b5a72;margin:4px 0}
.field input,.field select,.field textarea{display:block;width:100%;margin-top:4px;padding:10px 13px;border-radius:13px;border:.8px solid #fff;background:linear-gradient(130deg,#fffc,#f6f8fdd9);box-shadow:var(--shadow);font:inherit;color:var(--ink);outline:none}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 2px #d9af6c88,var(--shadow)}
.glass-button.wide{width:100%;height:50px;font-size:17px;font-weight:600}
.err{color:#c0392b;font-size:14px;margin:0;min-height:20px}

/* ---------- hero actions + small kpis ---------- */
.hero-actions .glass-button{text-decoration:none;color:inherit}
.kpis.kpis4{grid-template-columns:repeat(4,1fr)!important}
.kpis4 .kpi{height:150px}
.kpi-value.small{font-size:22px!important}
.kpi.warn .kpi-value{color:#a5650c}
.kpi-note.neg{color:#c0392b;font-weight:600}

/* ---------- generic table in v6 language ---------- */
.xtable{overflow-x:auto;padding:0 2px 4px}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;letter-spacing:-.3px}
.tbl thead th{background:linear-gradient(110deg,#e8edf4,#e9eaf4);font-weight:500;font-size:14.5px;padding:10px 10px;text-align:left;white-space:nowrap}
.tbl thead th:first-child{border-radius:11px 0 0 11px}.tbl thead th:last-child{border-radius:0 11px 11px 0}
.tbl td{padding:12px 10px;border-bottom:.8px solid #e3e8f0;vertical-align:top}
.tbl tbody tr{cursor:pointer;transition:background .15s}.tbl tbody tr:hover td{background:#ffffff8c}
.tbl .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .c{text-align:center}
.tbl b{font-weight:700}
.tbl .sub{display:block;font-size:12.5px;color:#5c6b80;margin-top:2px;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl .mono{font-variant-numeric:tabular-nums;font-size:13.5px}
.tbl .empty{text-align:center;color:#6a7890;padding:30px;cursor:default}
.tbl tr.in td{background:#f1fbf3}
.tbl td.acts{white-space:nowrap}
.lnk{display:inline-block;color:#1d4fb8;text-decoration:none;font-weight:600;font-size:13.5px;margin:0 0 4px 0;padding:3px 9px;border-radius:9px;background:#ffffffa8;border:.8px solid #fff;box-shadow:0 1px 3px #1f2f4c1a}
.lnk:hover{background:#fff}
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:17px;padding:3px 11px;font-size:13px;font-weight:500;white-space:nowrap;box-shadow:inset 0 .8px 3px #fff8}
.pill.ok{background:linear-gradient(120deg,#effbed,#d5f1da);color:#216b24}
.pill.blue{background:linear-gradient(120deg,#f3f8ff,#d5e2f5);color:#16283f}
.pill.warn{background:linear-gradient(120deg,#fff2d8,#f8dfb9);color:#5d3a10}
.pill.grey{background:linear-gradient(120deg,#f6f7fa,#e3e7ee);color:#3d4a5e}
.pill.bad{background:linear-gradient(120deg,#fff0ee,#f7d3cf);color:#9b2419}
.owe{color:#a5650c;font-weight:700}

/* ---------- projects table (dynamic rows reuse v6 classes) ---------- */
.project-row{cursor:default}
.status.done:before{content:'✓'}
.money.none{color:#8a96a8;font-weight:400;font-size:14px}
.booth{align-items:center}
.booth .cat-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.chip{font-size:12.5px;padding:2px 9px;border-radius:10px;background:#ffffffb8;border:.8px solid #fff;box-shadow:0 1px 2px #1f2f4c14;white-space:nowrap}
.chip i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:0}
.edit-proj{margin-left:6px;font-size:12.5px;color:#1d4fb8;background:none;padding:2px 4px;border-radius:6px}
.edit-proj:hover{background:#ffffffb0}

/* ---------- overview todo grid ---------- */
.todo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:4px 6px 6px}
.todo{border-radius:17px;padding:15px 17px;background:linear-gradient(128deg,#ffffffb8,#f7f8ff80 40%,#fdfdffc0);border:.8px solid #fff;box-shadow:var(--shadow);cursor:pointer;transition:transform .2s}
.todo:hover{transform:translateY(-2px)}
.todo .t-h{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15.5px}
.todo .t-h .icon{width:22px;height:22px}
.todo .t-n{font-size:30px;font-weight:700;letter-spacing:-.8px;margin-top:4px}
.todo .t-s{font-size:13px;color:#56657c}
.todo.hot .t-n{color:#a5650c}.todo.ok .t-n{color:#216b24}

/* ---------- upload ---------- */
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:38px 24px;margin-top:20px;cursor:pointer;text-align:center;border:1.6px dashed #c9d5ea!important;transition:.2s}
.drop.over{border-color:#d9af6c!important;background:linear-gradient(130deg,#fffaf0,#fff3dc)}
.drop input{display:none}
.drop-ico{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(116deg,#fff4d6,#f1d49b 46%,#d9af6c 75%,#f6e7cb);box-shadow:inset 0 1.6px 4px #fff,0 4px 12px #6a523833}
.drop-ico .icon{width:28px;height:28px;color:#3b2a10}
.drop b{font-size:18px}.drop>span:last-child{font-size:14px;color:#56657c;max-width:640px}
.queue{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:16px}
.qcard{padding:15px 17px}
.qh{display:flex;justify-content:space-between;gap:10px;align-items:center}
.qh b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.qgrid{display:grid;grid-template-columns:100px 1fr;gap:3px 10px;margin-top:10px;font-size:14px}
.qgrid span{color:#5c6b80}
.qf{margin-top:10px;display:flex;justify-content:flex-end;gap:8px}
.qf .glass-button{min-height:38px;padding:6px 14px;font-size:14px}
.warns{margin:10px 0 0;padding:9px 12px 9px 28px;background:linear-gradient(120deg,#fff7e6,#fdebcc);border-radius:12px;color:#6a430e;font-size:13px}
.spin{display:inline-block;width:14px;height:14px;border:2px solid #d9af6c;border-top-color:transparent;border-radius:50%;animation:sp 0.8s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- category matrix ---------- */
.cat-matrix{padding:4px 6px}
.cm-row{display:grid;grid-template-columns:190px 1fr 110px;gap:12px;align-items:center;padding:12px 4px;border-bottom:.8px solid #e3e8f0}
.cm-name b{display:block;font-size:16px}.cm-name small{color:#5c6b80}
.cm-bar{display:flex;height:16px;border-radius:8px;overflow:hidden;box-shadow:0 1.6px 2.4px #00142e24;border:.8px solid #ffffffd9;background:#eef2f8}
.cm-bar span{height:100%;position:relative}
.cm-bar span:after{content:'';position:absolute;inset:0;background:linear-gradient(#ffffff85,transparent 50%,#061b3240)}
.cm-total{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.cm-legend{display:flex;flex-wrap:wrap;gap:14px;padding:12px 6px 4px;font-size:13.5px}
.cm-legend i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:6px}

/* ---------- settings ---------- */
.set-card{max-width:620px}
.set-form{display:grid;gap:10px;padding:0 7px 20px;max-width:420px}

/* ---------- drawer ---------- */
.drawer{position:fixed;inset:0;z-index:150}
.drawer-bg{position:absolute;inset:0;background:#06142a50;backdrop-filter:blur(4px)}
.drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(640px,100%);display:flex;flex-direction:column;background:linear-gradient(180deg,#f8faff,#eef2f9);border-left:1px solid #fff;box-shadow:-20px 0 60px #00112640;border-radius:22px 0 0 22px}
.drawer-panel header{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:.8px solid #dde4ef}
.drawer-panel h2{font-size:21px}
.x{background:none;font-size:28px;color:#5c6b80;line-height:1}
.ed-body{padding:8px 22px 10px;overflow:auto;flex:1}
.ed-body h3{font-size:15px;margin:16px 0 2px;color:#0a1a36}.ed-body h3 small{font-weight:400;color:#5c6b80;font-size:12.5px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.msg{display:block;color:#c0392b;font-size:12.5px}
.ed-preview{padding:0 22px 8px;max-height:230px;overflow:auto;text-align:center}
.ed-preview img{max-width:100%;max-height:220px;border-radius:12px;border:1px solid #fff;box-shadow:var(--shadow)}
.drawer-panel footer{display:flex;gap:8px;align-items:center;padding:14px 22px;border-top:.8px solid #dde4ef}
.drawer-panel footer .glass-button{min-height:42px;padding:7px 15px;font-size:15px;text-decoration:none;color:inherit}
.glass-button.danger{color:#a3261c}
.sp{flex:1}

@media(min-width:761px){
  .page-shell{min-height:1368px}
}
@media(max-width:760px){
  .kpis.kpis4{grid-template-columns:1fr 1fr!important}
  .todo-grid,.queue{grid-template-columns:1fr}
  .cm-row{grid-template-columns:1fr;gap:6px}.cm-total{text-align:left}
  .g3{grid-template-columns:1fr 1fr}
  .drawer-panel{border-radius:0}
  .tbl{font-size:14px;min-width:760px}
  .booth .cat-chips{justify-content:flex-start}
}

.edit-proj.warnlink{margin:0;padding:0;font-size:inherit;color:#a5650c;font-weight:600;white-space:nowrap}
.kpi .kpi-note .edit-proj{position:relative;z-index:2}
.tbl.compact{font-size:14.5px}.tbl.compact td{padding:11px 8px}.tbl.compact thead th{padding:10px 8px;font-size:14px}
.tbl .nw{white-space:nowrap}
.tbl td.who b{display:block;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl td.acts .lnk{margin-right:4px}
/* fit tables inside the 1150px design canvas (no horizontal clipping) */
@media(min-width:761px){
.tbl.compact{table-layout:fixed}
#tblPay .tbl th:nth-child(1){width:108px}#tblPay .tbl th:nth-child(3){width:118px}#tblPay .tbl th:nth-child(4){width:92px}
#tblPay .tbl th:nth-child(5){width:66px}#tblPay .tbl th:nth-child(6){width:128px}#tblPay .tbl th:nth-child(7){width:100px}
#tblBill .tbl th:nth-child(1){width:128px}#tblBill .tbl th:nth-child(3){width:118px}#tblBill .tbl th:nth-child(4){width:92px}
#tblBill .tbl th:nth-child(5){width:78px}#tblBill .tbl th:nth-child(6){width:92px}#tblBill .tbl th:nth-child(7){width:96px}#tblBill .tbl th:nth-child(8){width:58px}
.tbl.compact td{overflow:hidden}
.tbl.compact td.nw{white-space:normal}.tbl.compact td.nw .pill{margin:0 0 4px}
.tbl.compact td.acts{white-space:normal}.tbl.compact td.acts .lnk{display:block;width:max-content;margin:0 0 5px}
.tbl.compact td.who b{max-width:none}
.tbl.compact .sub{max-width:100%}
}