/* ════════════════════════════════════════════════════════════════
   LexCase Pro — Stylesheet
   ────────────────────────────────────────────────────────────────
   Design System: warm cream + indigo accent
   Fonts: Sarabun, Spectral, JetBrains Mono
   Extracted from index.html (Refactor B)
   ════════════════════════════════════════════════════════════════ */

:root{
  /* ── Warm cream surfaces ── */
  --bg:#F6F3EC;
  --bg2:#FFFFFF;
  --bg3:#FBF9F4;
  --bg4:#F2EEE3;

  /* ── Borders ── */
  --border:#E8E2D2;
  --border2:#DDD5C0;

  /* ── Text ── */
  --text:#1B1A16;
  --text2:#4A463D;
  --text3:#7E796D;
  --text4:#A8A294;

  /* ── Indigo brand ── */
  --accent:#2B3FB3;
  --accent2:#1F2F94;
  --accent-bg:#E8EAF8;
  --accent-ink:#1A2480;

  /* ── Status colors ── */
  --green:#3F9560;--green-bg:#E3F1E8;
  --amber:#C18327;--amber-bg:#FAEEDA;
  --red:#C7484C;--red-bg:#F8E3E4;
  --purple:#7A5BC7;--purple-bg:#EEE7F8;
  --teal:#2E8A86;--teal-bg:#DDF0EE;

  /* ── Shape ── */
  --r:10px;--rlg:14px;--rxl:18px;
  --shadow-sm:0 1px 0 rgba(27,26,22,.04), 0 1px 2px rgba(27,26,22,.04);
  --shadow:0 1px 0 rgba(27,26,22,.04), 0 8px 24px -10px rgba(27,26,22,.10);
  --shadow-lg:0 20px 50px -20px rgba(27,26,22,.20), 0 4px 12px rgba(27,26,22,.06);

  /* ── Typography ── */
  --font:'Sarabun','-apple-system',BlinkMacSystemFont,sans-serif;
  --font-serif:'Spectral',Georgia,serif;
  --mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:var(--font);background:var(--bg);color:var(--text);font-size:17.5px;line-height:1.5;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:10px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#C9C0A5}
::-webkit-scrollbar-track{background:transparent}
::selection{background:var(--accent-bg);color:var(--accent-ink)}
input,select,textarea,button{font-family:inherit;color:inherit}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;border:1px solid var(--border);background:var(--bg2);color:var(--text);font-size:13.5px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.btn:hover{background:var(--bg4);border-color:var(--border2)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn i{font-size:16px}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover:not(:disabled){background:var(--accent2);border-color:var(--accent2)}
.btn-sm{padding:5px 10px;font-size:12.5px;border-radius:8px}
.btn-sm i{font-size:14px}
.btn-icon{padding:7px;border-radius:8px;background:var(--bg2);border:1px solid var(--border)}
.btn-icon:hover{background:var(--bg4);border-color:var(--border2)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text2)}
.btn-ghost:hover{background:var(--bg4);color:var(--text);border-color:transparent}
.btn-danger{background:var(--red-bg);border-color:rgba(199,72,76,.2);color:var(--red)}
.btn-green{background:var(--green-bg);border-color:rgba(63,149,96,.2);color:var(--green)}

/* ── BADGES (tags) ── */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:600;font-family:var(--font);letter-spacing:.02em;white-space:nowrap}
.b-blue{background:var(--accent-bg);color:var(--accent-ink)}
.b-green{background:var(--green-bg);color:var(--green)}
.b-amber{background:var(--amber-bg);color:var(--amber)}
.b-red{background:var(--red-bg);color:var(--red)}
.b-purple{background:var(--purple-bg);color:var(--purple)}
.b-teal{background:var(--teal-bg);color:var(--teal)}
.b-gray{background:var(--bg4);color:var(--text2)}

/* ── FORMS ── */
.fg{margin-bottom:14px}
.fl{display:block;font-size:13px;color:var(--text2);margin-bottom:6px;font-weight:600}
.fi{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-size:13.5px;color:var(--text);font-family:var(--font);outline:none;transition:border-color .15s, box-shadow .15s}
.fi:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.fi::placeholder{color:var(--text4)}
textarea.fi{resize:vertical;min-height:80px}
select.fi option{background:var(--bg2)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ── SCREENS ── */
#setup-screen,#login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
#app{display:none;height:100vh;flex-direction:column;background:var(--bg)}
#app.active{display:flex}
.app-body{display:flex;flex:1;overflow:hidden}

/* ── SIDEBAR ── */
.sidebar{width:248px;min-width:248px;background:var(--bg3);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;transition:transform .25s;flex-shrink:0}
.logo-row{padding:20px 20px 18px;display:flex;align-items:center;gap:11px;flex-shrink:0}
.logo-icon{width:34px;height:34px;background:var(--text);border-radius:9px;display:grid;place-items:center;color:#fff;font-family:var(--font-serif);font-weight:600;font-size:18px;letter-spacing:-.02em;flex-shrink:0}
.logo-txt{font-family:var(--font-serif);font-weight:600;font-size:20px;letter-spacing:-.01em;line-height:1.1}
.logo-sub{font-size:10.5px;color:var(--text3);font-family:var(--font);margin-top:1px;letter-spacing:.04em;text-transform:uppercase;font-weight:500}
.nav-sect{padding:14px 18px 6px;font-size:11px;color:var(--text4);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.ni{display:flex;align-items:center;gap:10px;padding:8px 12px;margin:1px 10px;cursor:pointer;border-radius:9px;font-size:13.5px;color:var(--text2);transition:background .12s, color .12s;width:calc(100% - 20px);text-align:left;border:none;background:transparent}
.ni:hover{background:var(--bg4);color:var(--text)}
.ni:hover i{color:var(--text2)}
.ni.on{background:var(--bg2);color:var(--text);box-shadow:var(--shadow-sm);font-weight:600}
.ni.on i{color:var(--accent)}
.ni i{font-size:18px;flex-shrink:0;color:var(--text3)}
.ni .cnt{margin-left:auto;background:var(--bg4);color:var(--text3);font-size:11px;font-weight:500;font-family:var(--mono);padding:1px 7px;border-radius:9px}
.ni.on .cnt{background:var(--accent-bg);color:var(--accent-ink)}
.sidebar-bottom{margin-top:auto;padding:12px;border-top:1px solid var(--border);flex-shrink:0}
.av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;color:#fff;flex-shrink:0;background:var(--text3);letter-spacing:.02em}
.av-lg{width:40px;height:40px;font-size:14px}
.user-card{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r);background:var(--bg2);border:1px solid var(--border);cursor:pointer;transition:background .15s}
.user-card:hover{background:var(--bg4)}

/* ── MAIN ── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;background:var(--bg)}
.topbar{padding:0 24px;height:60px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:rgba(246,243,236,.85);backdrop-filter:blur(10px);gap:16px;flex-shrink:0}
.page-content{flex:1;overflow-y:auto;padding:24px 28px 60px}
.search-box{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:7px 12px;transition:border-color .15s}
.search-box:focus-within{border-color:var(--accent)}
.search-box i{font-size:17px;color:var(--text3)}
.search-box input{background:transparent;border:none;outline:none;font-size:13.5px;color:var(--text);width:160px;font-family:var(--font)}
.search-box input::placeholder{color:var(--text3)}

/* ── CARDS ── */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rlg);padding:18px;box-shadow:var(--shadow-sm)}
.card-title{font-size:14.5px;font-weight:600;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;letter-spacing:-.005em}
.mc{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rlg);padding:16px 18px;box-shadow:var(--shadow-sm)}
.mc-lbl{font-size:12.5px;color:var(--text3);margin-bottom:6px;font-weight:500}
.mc-val{font-size:30px;font-weight:500;font-family:var(--font-serif);line-height:1.1;letter-spacing:-.02em;color:var(--text)}
.mc-sub{font-size:11.5px;color:var(--text4);margin-top:4px}
.metrics-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:18px}
.two-col{display:grid;grid-template-columns:1fr 280px;gap:18px}

/* ── TABLES ── */
.tbl-wrap{border:1px solid var(--border);border-radius:var(--rlg);overflow:hidden;overflow-x:auto;background:var(--bg2);box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;min-width:560px}
th{background:var(--bg3);padding:11px 14px;text-align:left;font-size:11.5px;font-weight:500;color:var(--text3);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:13px 14px;border-bottom:1px solid var(--border);vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
tr:last-child td{border-bottom:none}
tr.row-click{cursor:pointer;transition:background .12s}
tr.row-click:hover td{background:var(--bg3)}

/* ── PIPELINE (Kanban + Drag & Drop) ── */
.pipe-grid{display:grid;grid-template-columns:repeat(6,minmax(220px,1fr));gap:12px;overflow-x:auto;padding-bottom:4px}
.pipe-col{background:transparent;display:flex;flex-direction:column;min-width:0}
.pipe-col-hd{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rlg);padding:12px 14px;margin-bottom:10px;box-shadow:var(--shadow-sm)}
.pipe-col-name{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:6px;color:var(--text);letter-spacing:-.005em}
.pipe-col-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.pipe-col-desc{font-size:11px;color:var(--text3);margin-top:2px}
.pipe-col-cnt{font-size:11.5px;color:var(--text3);font-family:var(--mono);font-weight:500;background:var(--bg4);padding:1px 8px;border-radius:99px}
.pipe-col-list{display:flex;flex-direction:column;gap:8px;min-height:80px;padding:4px;border-radius:var(--r);transition:background .15s, outline .15s}
.pipe-col-list.drag-over{background:var(--accent-bg);outline:2px dashed var(--accent);outline-offset:-2px}
.pipe-add-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;background:transparent;border:1px dashed var(--border2);border-radius:var(--r);color:var(--text3);font-size:12.5px;cursor:pointer;transition:all .15s;width:100%}
.pipe-add-btn:hover{background:var(--bg3);color:var(--text2);border-color:var(--text4)}
.pipe-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:12px;cursor:grab;transition:all .15s;box-shadow:var(--shadow-sm);user-select:none}
.pipe-card:hover{border-color:var(--border2);box-shadow:var(--shadow);transform:translateY(-1px)}
.pipe-card:active{cursor:grabbing}
.pipe-card-no{font-size:10.5px;font-family:var(--mono);color:var(--text3);margin-bottom:6px;display:flex;align-items:center;justify-content:space-between}
.pipe-card-name{font-size:13.5px;font-weight:600;margin-bottom:4px;line-height:1.35;color:var(--text);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pipe-card-client{font-size:11.5px;color:var(--text3);margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pipe-card-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:11px;color:var(--text3);font-family:var(--mono);padding-top:8px;border-top:1px solid var(--border)}
.pipe-card-date{display:flex;align-items:center;gap:4px}
.pipe-card-avs{display:flex}
.pipe-card-avs .av{width:22px;height:22px;font-size:10px;border:2px solid var(--bg2);margin-left:-6px}
.pipe-card-avs .av:first-child{margin-left:0}

/* ── DETAIL PANEL (drawer overlay) ── */
.drawer-mask{display:none;position:fixed;inset:0;background:rgba(27,26,22,.32);backdrop-filter:blur(2px);z-index:50}
.drawer-mask.open{display:block;animation:fade .2s ease}
.detail-panel{display:none;position:fixed;top:0;right:0;bottom:0;z-index:51;width:min(680px,94vw);background:var(--bg2);box-shadow:var(--shadow-lg);flex-direction:column;overflow:hidden}
.detail-panel.open{display:flex;animation:slidein .25s cubic-bezier(.25,.8,.3,1)}
@keyframes slidein{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.dp-top{padding:18px 24px 0;flex-shrink:0;background:var(--bg2);border-bottom:1px solid var(--border)}
.dp-top-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
.dp-no{font-size:11.5px;font-family:var(--mono);color:var(--text3);display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-weight:500}
.dp-no-sep{color:var(--text4)}
.dp-actions{display:flex;gap:4px}
.dp-actions .btn-icon{padding:6px;width:32px;height:32px;background:transparent;border:none;color:var(--text3)}
.dp-actions .btn-icon:hover{background:var(--bg4);color:var(--text2)}
.dp-name{font-family:var(--font-serif);font-size:24px;font-weight:600;letter-spacing:-.015em;line-height:1.3;color:var(--text);margin-bottom:12px}
.dp-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.dp-tabs{display:flex;gap:0;margin:0 -24px;padding:0 24px;border-bottom:1px solid var(--border);overflow-x:auto}
.dp-tab{background:transparent;border:none;padding:11px 14px;font-size:13px;font-weight:500;color:var(--text3);cursor:pointer;display:flex;align-items:center;gap:5px;border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap}
.dp-tab i{font-size:15px}
.dp-tab:hover{color:var(--text)}
.dp-tab.on{color:var(--text);border-bottom-color:var(--accent);font-weight:600}
.dp-tab.on i{color:var(--accent)}
.dp-body{flex:1;overflow-y:auto;padding:20px 24px}
.dp-bottom{flex-shrink:0;padding:12px 24px;border-top:1px solid var(--border);background:var(--bg3);display:flex;align-items:center;justify-content:space-between;gap:8px}
.dp-bottom-actions{display:flex;gap:6px;flex-wrap:wrap}
.dp-sect{margin-bottom:20px}
.dp-sect-title{font-size:11.5px;color:var(--text4);font-weight:600;letter-spacing:.08em;margin-bottom:10px;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}
.dp-row{display:flex;justify-content:space-between;align-items:flex-start;padding:7px 0;font-size:13.5px;border-bottom:1px solid var(--border);gap:8px}
.dp-row:last-child{border-bottom:none}
.dp-lbl{color:var(--text3);flex-shrink:0;font-weight:500}
.dp-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.dp-field{padding:10px 0;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;gap:12px;font-size:13.5px}
.dp-field:last-child{border-bottom:none}
.dp-field-lbl{color:var(--text3);font-weight:500;flex-shrink:0;min-width:80px}
.dp-field-val{text-align:right;color:var(--text);font-weight:500;word-break:break-word}
.dp-progress{margin-bottom:20px}
.dp-progress-bar{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}
.dp-progress-track{height:6px;background:var(--bg4);border-radius:99px;overflow:hidden}
.dp-progress-fill{height:100%;background:var(--accent);border-radius:99px;transition:width .3s}
.dp-next-appt{background:var(--accent-bg);border:1px solid rgba(43,63,179,.2);border-radius:var(--rlg);padding:14px 16px;margin-top:14px}
.dp-next-appt-hd{font-size:12px;color:var(--accent-ink);font-weight:600;display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.dp-next-appt-title{font-size:14.5px;font-weight:600;color:var(--accent-ink);margin-bottom:4px}
.dp-next-appt-meta{font-size:12px;color:var(--accent-ink);opacity:.85}

/* ── PINNED NOTES (in overview) ── */
.pinned-card{background:#FFF8E5;border:1px solid #F4D682;border-radius:var(--rlg);padding:12px 14px;margin-bottom:8px;position:relative;display:flex;gap:10px;align-items:flex-start}
.pinned-card .pin-ico{color:#C18327;flex-shrink:0;font-size:14px;margin-top:2px}
.pinned-body{flex:1;min-width:0}
.pinned-text{font-size:13px;color:var(--text);line-height:1.55;word-break:break-word}
.pinned-meta{font-size:11px;color:var(--text3);margin-top:4px}
.pinned-card .pin-del{flex-shrink:0;background:transparent;border:none;padding:4px;color:var(--text3);cursor:pointer;border-radius:6px}
.pinned-card .pin-del:hover{background:rgba(199,72,76,.1);color:var(--red)}

/* ── Timeline (drawer) ── */
.tl-step{display:flex;gap:14px;padding:10px 0;position:relative;cursor:default}
.tl-step:not(:last-child)::after{content:'';position:absolute;left:21px;top:46px;bottom:-2px;width:1px;background:var(--border2)}
.tl-step-icon{width:42px;height:42px;border-radius:10px;background:var(--bg3);border:1px solid var(--border);display:grid;place-items:center;color:var(--text3);flex-shrink:0;z-index:1}
.tl-step-icon i{font-size:18px}
.tl-step-icon.done{background:var(--accent-bg);border-color:rgba(43,63,179,.2);color:var(--accent)}
.tl-step-icon.active{background:var(--red-bg);border-color:rgba(199,72,76,.25);color:var(--red);border-style:dashed}
.tl-step-body{flex:1;min-width:0;padding-top:4px}
.tl-step-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:2px}
.tl-step-meta{font-size:12px;color:var(--text3)}
.tl-step-date{font-size:11.5px;font-family:var(--mono);color:var(--text3);font-weight:500;padding-top:6px}
.tl-step.selectable{cursor:pointer;border-radius:var(--r);padding:10px 8px;margin:0 -8px;transition:background .12s}
.tl-step.selectable:hover{background:var(--bg3)}
.tl-step.selected{background:var(--red-bg)}
.tl-checkbox{display:none;width:18px;height:18px;border:2px solid var(--border2);border-radius:5px;flex-shrink:0;align-self:center;background:var(--bg2);position:relative;margin-right:-4px}
.tl-step.selectable .tl-checkbox{display:block}
.tl-step.selected .tl-checkbox{background:var(--red);border-color:var(--red)}
.tl-step.selected .tl-checkbox::after{content:'';position:absolute;left:4px;top:1px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ── Case-scoped court orders / deadlines rows ── */
.cd-row{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);margin-bottom:6px;box-shadow:var(--shadow-sm)}
.cd-row:hover{border-color:var(--border2)}
.cd-ico{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;font-size:15px}
.cd-info{flex:1;min-width:0}
.cd-title{font-size:13.5px;font-weight:600;color:var(--text);margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cd-meta{font-size:11.5px;color:var(--text3);font-family:var(--mono)}
.cd-status{font-size:10.5px;flex-shrink:0}
.cd-empty{font-size:12.5px;color:var(--text3);text-align:center;padding:14px;background:var(--bg3);border:1px dashed var(--border);border-radius:var(--r)}

/* ── Doc list (drawer) ── */
.dz{border:2px dashed var(--border2);border-radius:var(--rlg);padding:24px;text-align:center;cursor:pointer;color:var(--text3);font-size:13.5px;font-weight:500;background:var(--bg3);transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:16px}
.dz:hover{border-color:var(--accent);background:var(--accent-bg);color:var(--accent-ink)}
.dz i{font-size:18px}
.doc-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.doc-row:last-child{border-bottom:none}
.doc-ico{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;flex-shrink:0}
.doc-ico i{font-size:18px}
.doc-info{flex:1;min-width:0}
.doc-name{font-size:13.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px}
.doc-meta{font-size:11.5px;color:var(--text3)}
.doc-actions{display:flex;gap:4px;flex-shrink:0}

/* ── Finance (drawer) ── */
.fin-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--rlg);padding:18px;margin-bottom:18px}
.fin-bar-row{margin-bottom:14px}
.fin-bar-label{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:6px;color:var(--text2)}
.fin-bar-track{height:8px;background:var(--bg4);border-radius:99px;overflow:hidden}
.fin-bar-fill{height:100%;background:var(--green);border-radius:99px}
.fin-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.fin-sum-lbl{font-size:12px;color:var(--text3);margin-bottom:4px}
.fin-sum-val{font-family:var(--font-serif);font-size:20px;font-weight:600;letter-spacing:-.01em}
.inv-row{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--rlg);margin-bottom:8px;box-shadow:var(--shadow-sm)}
.inv-no{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--text)}
.inv-date{font-size:11.5px;color:var(--text3);margin-top:2px;font-family:var(--mono)}
.inv-amt{font-family:var(--font-serif);font-size:17px;font-weight:600;text-align:right}

/* ── drawer Finance: fee_installments + documents rows ── */
.dp-fi-list{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.dp-fi-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:background .12s}
.dp-fi-row:hover{background:var(--bg3)}
.dp-fi-row .dp-fi-check{margin:0;cursor:pointer;width:16px;height:16px;accent-color:var(--accent);flex-shrink:0}
.dp-fi-desc{font-size:13px;font-weight:500;color:var(--text);line-height:1.3}
.dp-fi-sub{font-size:11px;color:var(--text3);margin-top:2px}
.dp-fi-amt{font-family:var(--mono);font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap}
.dp-doc-list{display:flex;flex-direction:column;gap:6px}
.dp-doc-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:background .12s}
.dp-doc-row:hover{background:var(--bg3);border-color:var(--accent)}

/* ── Notes (drawer) ── */
.note-input-box{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rlg);padding:12px;margin-bottom:16px}
.note-input-box textarea{width:100%;border:none;outline:none;background:transparent;font-family:var(--font);font-size:13.5px;resize:none;min-height:60px;color:var(--text)}
.note-input-box textarea::placeholder{color:var(--text4)}
.note-input-foot{display:flex;justify-content:flex-end;margin-top:8px}
.note-item{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid var(--border)}
.note-item:last-child{border-bottom:none}
.note-av{flex-shrink:0}
.note-body{flex:1;min-width:0}
.note-hd{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap}
.note-who{font-size:13px;font-weight:600;color:var(--text)}
.note-when{font-size:11.5px;color:var(--text3)}
.note-text{font-size:13.5px;color:var(--text2);line-height:1.6;word-break:break-word}
.note-actions{display:flex;gap:8px;margin-top:6px;align-items:center}
.note-action-btn{background:transparent;border:none;padding:2px 8px;font-size:11.5px;cursor:pointer;border-radius:6px;display:inline-flex;align-items:center;gap:4px;transition:background .12s}
.note-action-btn:hover{background:var(--bg4)}
.note-action-btn.pin{color:var(--amber)}
.note-action-btn.pinned{color:var(--amber);background:var(--amber-bg);font-weight:600}
.note-action-btn.edit{color:var(--accent)}
.note-action-btn.del{color:var(--red)}

/* ── TIMELINE ── */
.tl-item{display:flex;gap:12px;padding:9px 0;position:relative}
.tl-item:not(:last-child)::after{content:'';position:absolute;left:7px;top:22px;bottom:0;width:1px;background:var(--border)}
.tl-dot{width:15px;height:15px;border-radius:50%;flex-shrink:0;margin-top:3px;border:2px solid var(--bg2);z-index:1;box-shadow:0 0 0 1px var(--border)}
.tl-title{font-size:13.5px;font-weight:500}
.tl-date{font-size:11.5px;color:var(--text3);font-family:var(--mono)}

/* ── EVENTS ── */
.evt{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.evt:last-child{border-bottom:none}
.evt-date{min-width:42px;text-align:center;background:var(--accent-bg);border-radius:var(--r);padding:6px 4px;color:var(--accent-ink);flex-shrink:0}
.evt-d{font-size:18px;font-weight:600;font-family:var(--font-serif);line-height:1;letter-spacing:-.02em}
.evt-m{font-size:10.5px;opacity:.85;margin-top:2px}
.evt-title{font-size:13.5px;font-weight:500;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;color:var(--text)}
.evt-meta{font-size:11.5px;color:var(--text3)}

/* ── MODALS ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(27,26,22,.32);backdrop-filter:blur(2px);z-index:100;align-items:center;justify-content:center;padding:16px}
.modal-overlay.open{display:flex;animation:fade .2s ease}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rxl);padding:24px;width:100%;max-width:480px;max-height:92vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:popin .25s cubic-bezier(.25,.8,.3,1)}
.modal-title{font-size:17px;font-weight:600;margin-bottom:18px;display:flex;justify-content:space-between;align-items:center;letter-spacing:-.005em}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes popin{from{transform:scale(.96);opacity:0}to{transform:none;opacity:1}}

/* ── SETUP / LOGIN ── */
.auth-box{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rxl);padding:32px;width:100%;max-width:420px;box-shadow:var(--shadow-lg)}
.auth-logo{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:24px}
.auth-icon{width:48px;height:48px;background:var(--text);border-radius:12px;display:grid;place-items:center;font-size:28px;color:#fff}
.auth-brand{font-size:25px;font-weight:600;font-family:var(--font-serif);letter-spacing:-.01em}
.auth-sub{font-size:13px;font-family:var(--mono);color:var(--text3)}
.alert{border-radius:var(--r);padding:10px 14px;font-size:13.5px;margin-bottom:14px;display:none}
.alert.show{display:block}
.alert-error{background:var(--red-bg);border:1px solid rgba(199,72,76,.18);color:var(--red)}
.alert-success{background:var(--green-bg);border:1px solid rgba(63,149,96,.18);color:var(--green)}
.alert-info{background:var(--accent-bg);border:1px solid rgba(43,63,179,.15);color:var(--accent-ink)}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--accent-bg);color:var(--accent-ink);font-size:12px;font-weight:700;margin-right:8px;flex-shrink:0;font-family:var(--mono)}
.step-row{display:flex;align-items:flex-start;gap:4px;margin-bottom:10px;font-size:13.5px}
.code-block{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:12px;font-family:var(--mono);font-size:12.5px;color:var(--accent-ink);margin:8px 0;white-space:pre;overflow-x:auto;line-height:1.7}

/* ── MISC ── */
.pbar-bg{background:var(--bg4);border-radius:4px;height:5px;overflow:hidden;margin-top:4px}
.pbar{height:100%;border-radius:4px}
.fi-bar{display:flex;align-items:center;gap:10px;font-size:13px;margin-bottom:8px}
.fi-lbl{min-width:80px;color:var(--text3)}
.stage-bar{display:flex;border-radius:var(--r);overflow:hidden;border:1px solid var(--border);margin-bottom:14px;background:var(--bg3)}
.stage-step{flex:1;text-align:center;padding:8px 2px;font-size:10.5px;font-weight:600;color:var(--text4);border-right:1px solid var(--border);transition:background .15s, color .15s}
.stage-step:last-child{border-right:none}
.stage-step.done{color:var(--accent-ink);background:var(--accent-bg)}
.stage-step.active{color:#fff;background:var(--accent)}
.stage-step .sn{font-size:16px;font-weight:500;display:block;font-family:var(--font-serif)}
.mob-top{display:none;padding:0 12px;height:54px;background:var(--bg2);border-bottom:1px solid var(--border);align-items:center;justify-content:space-between;flex-shrink:0}
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(27,26,22,.32);backdrop-filter:blur(2px);z-index:29}
#toast{position:fixed;bottom:24px;right:24px;background:var(--text);border:1px solid var(--text);border-radius:var(--r);padding:11px 18px;font-size:13.5px;color:var(--bg);z-index:999;transform:translateY(80px);opacity:0;transition:all .3s;pointer-events:none;max-width:320px;box-shadow:var(--shadow-lg)}
#toast.show{transform:translateY(0);opacity:1}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.online-dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;margin-right:5px;box-shadow:0 0 6px rgba(63,149,96,.4)}
.sync-indicator{font-size:11.5px;color:var(--green);display:flex;align-items:center;gap:4px;font-family:var(--mono);font-weight:500}

/* ── Numeral (Spectral serif for big numbers) ── */
.numeral{font-family:var(--font-serif);font-weight:500;letter-spacing:-.02em}

@media(max-width:900px){
  .sidebar{position:fixed;inset:0 auto 0 0;z-index:30;transform:translateX(-100%);box-shadow:var(--shadow-lg)}
  .sidebar.open{transform:translateX(0)}
  .sb-overlay.open{display:block}
  .topbar{display:none}
  .mob-top{display:flex}
  .metrics-grid{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr}
  .pipe-grid{grid-template-columns:repeat(3,1fr)}
  .detail-panel{width:100%}
  .dp-grid{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
  .page-content{padding:18px 16px 60px}
}
@media(max-width:480px){
  .metrics-grid{grid-template-columns:1fr 1fr}
  .pipe-grid{grid-template-columns:repeat(2,1fr)}
}

/* ═══════════════════════════════════════════════════════════
   FOUNDATION UTILITIES — Refactor v2 (รอบ 0)
   ═══════════════════════════════════════════════════════════ */

/* ── Page header (title + subtitle inline) ───────────────── */
.page-head{display:flex;align-items:baseline;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.page-head-title{font-family:var(--font-serif);font-size:22px;font-weight:600;letter-spacing:-.015em;color:var(--text);line-height:1.2}
.page-head-sub{font-size:13px;color:var(--text3);font-weight:400}

/* ── Toolbar row (chips + search + primary btn) ──────────── */
.page-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.page-toolbar-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.page-toolbar-right{display:flex;gap:8px;align-items:center;margin-left:auto;flex-wrap:wrap}

/* ── Chip filter (pill with count) ───────────────────────── */
.chip-filter{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-size:12.5px;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap;line-height:1.4}
.chip-filter:hover{background:var(--bg4);border-color:var(--border2);color:var(--text)}
.chip-filter.on{background:var(--text);border-color:var(--text);color:#fff}
.chip-filter .chip-count{background:var(--bg4);color:var(--text3);font-family:var(--mono);font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:999px;line-height:1.4}
.chip-filter.on .chip-count{background:rgba(255,255,255,.18);color:#fff}

/* ── Search input with icon ──────────────────────────────── */
.search-wrap{position:relative;width:240px;max-width:100%}
.search-wrap .ti-search{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--text4);pointer-events:none}
.search-wrap input{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:999px;padding:7px 13px 7px 32px;font-size:13px;color:var(--text);font-family:var(--font);outline:none;transition:border-color .15s, box-shadow .15s}
.search-wrap input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.search-wrap input::placeholder{color:var(--text4)}

/* ── Modern table (taller rows, 2-line cells, no zebra) ──── */
.tbl-modern{width:100%;border-collapse:separate;border-spacing:0;background:var(--bg2)}
.tbl-modern thead th{font-size:12px;font-weight:500;color:var(--text3);text-align:left;padding:12px 14px;background:var(--bg3);border-bottom:1px solid var(--border);white-space:nowrap;letter-spacing:.01em}
.tbl-modern tbody td{padding:14px;border-bottom:1px solid var(--border);font-size:13.5px;color:var(--text);vertical-align:middle}
.tbl-modern tbody tr:last-child td{border-bottom:none}
.tbl-modern tbody tr.row-click{cursor:pointer;transition:background .12s}
.tbl-modern tbody tr.row-click:hover{background:var(--bg3)}
.tbl-modern .cell-main{font-size:13.5px;font-weight:500;color:var(--text);line-height:1.35;margin-bottom:3px}
.tbl-modern .cell-sub{font-size:11.5px;color:var(--text3);line-height:1.35;display:flex;align-items:center;gap:4px}
.tbl-modern .cell-sub .ti{font-size:13px;color:var(--text4)}
.tbl-modern .case-no-cell{font-family:var(--mono);font-size:12.5px;color:var(--text);font-weight:600;line-height:1.35}
.tbl-modern .case-no-cell .case-no-sub{font-family:var(--mono);font-size:10.5px;color:var(--text3);font-weight:400;margin-top:2px;display:block}
.tbl-modern .next-date{font-size:12.5px;color:var(--text);font-weight:500;line-height:1.35;margin-bottom:2px}
.tbl-modern .next-date.due-soon{color:var(--red)}
.tbl-modern .next-date.due-week{color:var(--amber)}
.tbl-modern .next-date-sub{font-size:11.5px;color:var(--text3);line-height:1.35}

/* ── Avatar dot + stack ──────────────────────────────────── */
.av-dot{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff;font-family:var(--font);flex-shrink:0;border:2px solid var(--bg2)}
.av-stack{display:inline-flex;align-items:center}
.av-stack .av-dot{margin-left:-8px}
.av-stack .av-dot:first-child{margin-left:0}
.av-stack .av-more{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:600;color:var(--text2);background:var(--bg4);border:2px solid var(--bg2);margin-left:-8px;font-family:var(--mono)}

/* ── Mini progress bar (in-row) ──────────────────────────── */
.progress-mini{display:flex;align-items:center;gap:8px;min-width:120px}
.progress-mini-track{flex:1;height:5px;background:var(--bg4);border-radius:999px;overflow:hidden;min-width:64px}
.progress-mini-fill{height:100%;background:var(--accent);border-radius:999px;transition:width .3s}
.progress-mini-pct{font-family:var(--mono);font-size:11.5px;color:var(--text2);font-weight:600;min-width:32px;text-align:right}

/* ── Row action menu button (⋯) ──────────────────────────── */
.row-actions{display:flex;gap:2px;justify-content:flex-end;white-space:nowrap}
.row-action-btn{background:transparent;border:none;padding:6px;border-radius:6px;color:var(--text3);cursor:pointer;font-size:16px;transition:all .12s;display:inline-flex;align-items:center;justify-content:center}
.row-action-btn:hover{background:var(--bg4);color:var(--text)}
.row-action-btn.danger:hover{background:var(--red-bg);color:var(--red)}

/* ── Pagination ──────────────────────────────────────────── */
.page-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;flex-wrap:wrap;gap:10px}
.page-foot-info{font-size:12.5px;color:var(--text3)}
.page-foot-info strong{color:var(--text);font-weight:600}
.pagination{display:inline-flex;align-items:center;gap:4px}
.pagination button{min-width:32px;height:32px;border-radius:8px;background:var(--bg2);border:1px solid var(--border);color:var(--text2);font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .12s;padding:0 8px}
.pagination button:hover:not(:disabled){background:var(--bg4);border-color:var(--border2);color:var(--text)}
.pagination button:disabled{opacity:.4;cursor:not-allowed}
.pagination button.on{background:var(--text);border-color:var(--text);color:#fff}

/* ── Empty state for pages ───────────────────────────────── */
.empty-page{text-align:center;padding:48px 20px;color:var(--text3)}
.empty-page .ti{font-size:40px;display:block;margin-bottom:10px;color:var(--text4)}
.empty-page-title{font-size:14.5px;color:var(--text2);font-weight:500;margin-bottom:4px}
.empty-page-sub{font-size:12.5px;color:var(--text3);margin-bottom:16px}

/* ── Table wrapper for modern table (no extra padding) ───── */
.tbl-modern-wrap{border:1px solid var(--border);border-radius:var(--rlg);overflow:hidden;overflow-x:auto;background:var(--bg2);box-shadow:var(--shadow-sm)}

/* ── Calendar (Month / Week / Day / List) ────────────────── */
.cal-header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.cal-nav{display:inline-flex;align-items:center;gap:6px}
.cal-nav-btn{width:32px;height:32px;border-radius:8px;background:var(--bg2);border:1px solid var(--border);color:var(--text2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:16px;transition:all .12s}
.cal-nav-btn:hover{background:var(--bg4);border-color:var(--border2);color:var(--text)}
.cal-title{font-family:var(--font-serif);font-size:22px;font-weight:600;letter-spacing:-.015em;color:var(--text);margin:0 4px}
.cal-title-year{font-family:var(--mono);font-size:18px;color:var(--text2);font-weight:500;margin-left:2px}
.cal-today-btn{padding:6px 13px;border-radius:999px;border:1px solid var(--border);background:var(--bg2);color:var(--text);font-size:12.5px;font-weight:500;cursor:pointer;transition:all .12s}
.cal-today-btn:hover{background:var(--bg4)}
.cal-view-switcher{display:inline-flex;gap:4px;background:var(--bg3);padding:3px;border-radius:999px;border:1px solid var(--border);margin-left:auto}
.cal-view-btn{padding:6px 14px;border-radius:999px;background:transparent;border:none;color:var(--text2);font-size:12.5px;font-weight:500;cursor:pointer;transition:all .12s}
.cal-view-btn:hover{color:var(--text)}
.cal-view-btn.on{background:var(--text);color:#fff}

/* Month view — grid 7 col x 6 row */
.cal-month-grid{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rlg);overflow:hidden;box-shadow:var(--shadow-sm)}
.cal-month-header{display:grid;grid-template-columns:repeat(7,1fr);background:var(--bg3);border-bottom:1px solid var(--border)}
.cal-month-header-cell{padding:10px 12px;font-size:12px;color:var(--text3);font-weight:500;text-align:left}
.cal-month-body{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:minmax(110px,1fr)}
.cal-month-cell{border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:8px;position:relative;display:flex;flex-direction:column;gap:3px;overflow:hidden;cursor:pointer;transition:background .12s}
.cal-month-cell:hover{background:var(--bg3)}
.cal-month-cell:nth-child(7n){border-right:none}
.cal-month-cell.other-month{background:var(--bg3);color:var(--text4)}
.cal-month-cell.other-month .cal-month-day{color:var(--text4)}
.cal-month-day{font-size:13.5px;font-weight:500;color:var(--text2);line-height:1.2;margin-bottom:2px;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%}
.cal-month-cell.is-today .cal-month-day{background:var(--accent);color:#fff;font-weight:600}
.cal-month-cell.is-selected{background:var(--accent-bg)}
.cal-evt{font-size:11px;padding:2px 7px;border-radius:4px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;display:flex;align-items:center;gap:4px}
.cal-evt::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0;background:currentColor;opacity:.7}
.cal-evt-more{font-size:10.5px;color:var(--text3);padding:1px 5px;font-weight:500;cursor:pointer}
.cal-evt-more:hover{color:var(--text)}

/* Type colors for cal-evt — สีตามประเภทนัด */
.cal-evt.t-นัดศาล,.cal-evt.t-นัดสืบพยาน{background:#FAEEDA;color:#854F0B}
.cal-evt.t-นัดสืบพยาน{background:#FAEEDA;color:#854F0B}
.cal-evt.t-ไต่สวน{background:#EEE7F8;color:#3C3489}
.cal-evt.t-ฟังคำพิพากษา{background:#E3F1E8;color:#27500A}
.cal-evt.t-ไกล่เกลี่ย{background:#DDF0EE;color:#085041}
.cal-evt.t-นัดพบลูกความ{background:#E8EAF8;color:#1A2480}
.cal-evt.t-default{background:var(--bg4);color:var(--text2)}

/* Week view */
.cal-week-grid{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rlg);overflow:hidden;box-shadow:var(--shadow-sm)}
.cal-week-head{display:grid;grid-template-columns:60px repeat(7,1fr);background:var(--bg3);border-bottom:1px solid var(--border)}
.cal-week-head-cell{padding:10px 8px;font-size:12px;color:var(--text3);font-weight:500;text-align:center;border-left:1px solid var(--border)}
.cal-week-head-cell:first-child{border-left:none}
.cal-week-head-cell .day-num{font-family:var(--mono);font-size:18px;color:var(--text);font-weight:600;display:block;line-height:1.1;margin-top:2px}
.cal-week-head-cell.is-today .day-num{color:#fff;background:var(--accent);width:28px;height:28px;border-radius:50%;line-height:28px;margin:2px auto 0;display:block}
.cal-week-body{display:grid;grid-template-columns:60px repeat(7,1fr);position:relative}
.cal-week-hour-label{padding:4px 6px 0;font-size:10.5px;font-family:var(--mono);color:var(--text3);text-align:right;border-top:1px solid var(--border);height:50px}
.cal-week-hour-label:first-child{border-top:none}
.cal-week-cell{border-left:1px solid var(--border);border-top:1px solid var(--border);min-height:50px;padding:2px;position:relative;cursor:pointer;transition:background .12s}
.cal-week-cell:hover{background:var(--bg3)}
.cal-week-cell.is-today{background:rgba(43,63,179,.025)}
.cal-week-evt{font-size:11px;padding:3px 6px;border-radius:4px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;margin-bottom:1px}

/* Day view */
.cal-day-grid{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rlg);overflow:hidden;box-shadow:var(--shadow-sm)}
.cal-day-head{padding:14px 18px;background:var(--bg3);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px}
.cal-day-head-d{font-family:var(--font-serif);font-size:36px;font-weight:600;letter-spacing:-.02em;color:var(--text);line-height:1}
.cal-day-head-info{display:flex;flex-direction:column;gap:2px}
.cal-day-head-dayname{font-size:14px;color:var(--text2);font-weight:500}
.cal-day-head-mo{font-size:13px;color:var(--text3)}
.cal-day-body{display:grid;grid-template-columns:60px 1fr}
.cal-day-hour-label{padding:6px 8px 0;font-size:11px;font-family:var(--mono);color:var(--text3);text-align:right;border-top:1px solid var(--border);height:60px}
.cal-day-hour-label:first-child{border-top:none}
.cal-day-cell{border-left:1px solid var(--border);border-top:1px solid var(--border);min-height:60px;padding:4px 8px;cursor:pointer;transition:background .12s}
.cal-day-cell:hover{background:var(--bg3)}
.cal-day-evt{padding:8px 10px;background:var(--accent-bg);color:var(--accent-ink);border-radius:8px;font-size:12.5px;margin-bottom:4px;cursor:pointer;border-left:3px solid var(--accent)}
.cal-day-evt-title{font-weight:500;line-height:1.3;margin-bottom:2px}
.cal-day-evt-meta{font-size:11px;color:var(--text3)}

/* Legend cards under calendar */
.cal-legend-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:14px}
.cal-legend-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rlg);padding:14px 16px;cursor:pointer;transition:all .12s;box-shadow:var(--shadow-sm)}
.cal-legend-card:hover{border-color:var(--border2);transform:translateY(-1px)}
.cal-legend-card.on{border-color:var(--accent);background:var(--accent-bg)}
.cal-legend-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.cal-legend-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.cal-legend-name{font-size:13px;font-weight:500;color:var(--text)}
.cal-legend-count{font-size:11px;color:var(--text3);font-family:var(--mono);margin-left:auto}
.cal-legend-sub{font-size:11.5px;color:var(--text3);line-height:1.4}

/* ── AP Pipeline (Appeals Kanban — แสดงผลอย่างเดียว ไม่ drag) ── */
.ap-pipe-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.ap-pipe-col{display:flex;flex-direction:column;min-width:0}
.ap-pipe-head{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 11px;border-radius:var(--r);margin-bottom:8px;font-size:12px;font-weight:600;letter-spacing:.005em}
.ap-pipe-head-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ap-pipe-head-cnt{background:rgba(255,255,255,.55);font-family:var(--mono);font-size:11px;padding:1px 7px;border-radius:999px;flex-shrink:0}
.ap-pipe-list{display:flex;flex-direction:column;gap:6px;min-height:60px}
.ap-pipe-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:9px 11px;cursor:pointer;transition:all .12s;box-shadow:var(--shadow-sm)}
.ap-pipe-card:hover{border-color:var(--border2);transform:translateY(-1px);box-shadow:var(--shadow)}
.ap-pipe-no{font-family:var(--mono);font-size:11.5px;color:var(--accent);font-weight:600;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-pipe-client{font-size:11.5px;color:var(--text2);margin-bottom:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35}
.ap-pipe-tags{display:flex;gap:4px;flex-wrap:wrap}
.ap-pipe-empty{text-align:center;font-size:11.5px;color:var(--text4);padding:14px 8px;border:1px dashed var(--border);border-radius:var(--r);background:var(--bg3)}

/* ── Info card grid (for clients, etc.) ──────────────────── */
.info-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.info-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rlg);padding:18px;box-shadow:var(--shadow-sm);cursor:pointer;transition:all .15s;display:flex;flex-direction:column}
.info-card:hover{border-color:var(--border2);box-shadow:var(--shadow);transform:translateY(-1px)}
.info-card-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.info-card-head .av{width:40px;height:40px;font-size:14px;flex-shrink:0}
.info-card-head-text{min-width:0;flex:1}
.info-card-name{font-size:14.5px;font-weight:600;color:var(--text);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px}
.info-card-sub{font-size:11.5px;color:var(--text3);font-family:var(--mono)}
.info-card-sub-dot{margin:0 4px;color:var(--text4)}
.info-card-sub-type{font-family:var(--font);color:var(--text3)}
.info-card-body{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.info-card-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text2);min-width:0}
.info-card-row .ti{font-size:14px;color:var(--text3);flex-shrink:0}
.info-card-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.info-card-foot{display:flex;justify-content:space-between;align-items:flex-end;padding-top:12px;border-top:1px solid var(--border);margin-top:auto}
.info-card-stat-lbl{font-size:11px;color:var(--text3);margin-bottom:2px;font-weight:500}
.info-card-stat-val{font-size:22px;font-weight:500;font-family:var(--font-serif);line-height:1;letter-spacing:-.015em;color:var(--text)}
.info-card-stat-val.right{text-align:right}
.info-card-stat-val.accent{color:var(--accent)}

/* ══════════════════════════════════════════
   DOC BUILDER (Feature B: Quotation/Invoice/Receipt)
   ══════════════════════════════════════════ */
.db-wrap{display:grid;grid-template-columns:340px 1fr;gap:14px;align-items:flex-start;margin:-2px}
.db-form{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rlg);padding:14px 16px;box-shadow:var(--shadow-sm);position:sticky;top:8px;max-height:calc(100vh - 100px);overflow-y:auto}
.db-form-head{display:flex;align-items:center;gap:10px;padding-bottom:12px;margin-bottom:10px;border-bottom:1px solid var(--border)}
.db-form-head .db-logo{width:34px;height:34px;border-radius:10px;background:var(--text);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-weight:600;font-size:17px;flex-shrink:0}
.db-form-head-title{font-size:15px;font-weight:600;color:var(--text);line-height:1.25}
.db-form-head-sub{font-size:11px;color:var(--text3);margin-top:2px}
.db-section-title{font-size:11.5px;font-weight:600;color:var(--text2);margin:14px 0 8px;letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.db-section-title:before{content:'';display:block;height:1px;flex:1;background:var(--border)}
.db-section-title:after{content:'';display:block;height:1px;flex:1;background:var(--border)}
.db-section-title:first-of-type{margin-top:4px}
.db-chip-group{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.db-chip{flex:1;min-width:80px;padding:9px 10px;border-radius:9px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;text-align:center;line-height:1.3}
.db-chip:hover{background:var(--bg4);color:var(--text)}
.db-chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.db-frow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.db-fg{margin-bottom:10px}
.db-fl{display:block;font-size:11.5px;color:var(--text2);margin-bottom:5px;font-weight:600}
.db-fi{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:7px 10px;font-size:12.5px;color:var(--text);font-family:var(--font);outline:none;transition:border-color .15s, box-shadow .15s}
.db-fi:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.db-fi::placeholder{color:var(--text4)}
textarea.db-fi{resize:vertical;min-height:60px;line-height:1.5}
select.db-fi{cursor:pointer}
.db-form-foot{position:sticky;bottom:0;background:var(--bg2);padding:12px 0 4px;margin-top:14px;border-top:1px solid var(--border);display:flex;gap:8px}
.db-form-foot .btn{flex:1;justify-content:center;padding:10px 14px;font-size:13px}

/* Preview pane wrapper */
.db-preview-wrap{background:transparent;display:flex;flex-direction:column;gap:12px;min-height:600px}
.db-preview-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--rlg);box-shadow:var(--shadow-sm)}
.db-preview-bar-meta{font-size:12px;color:var(--text3);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.db-preview-bar-meta .db-bar-no{font-family:var(--mono);font-weight:600;color:var(--text)}
.db-preview-bar-meta .db-bar-customer{color:var(--text);font-weight:500}
.db-preview-bar-actions{display:flex;gap:4px}
.db-preview-bar-actions .btn-icon{padding:6px;background:transparent;border-color:transparent;color:var(--text3)}
.db-preview-bar-actions .btn-icon:hover{background:var(--bg4);color:var(--text)}

/* A4 document */
.db-doc{background:#fff;border:1px solid var(--border);border-radius:var(--rlg);box-shadow:var(--shadow);padding:36px 40px;color:var(--text);font-size:13px;line-height:1.55;max-width:820px;margin:0 auto;width:100%}
.db-doc-placeholder{padding:60px 20px;text-align:center;color:var(--text3);font-size:13px}
.db-doc-placeholder i{font-size:36px;display:block;margin-bottom:10px;opacity:.5}

/* — DD = Document Display (preview) — */
.dd-header{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:flex-start;margin-bottom:18px}
.dd-firm{display:flex;gap:14px;align-items:flex-start}
.dd-logo{width:54px;height:54px;border-radius:12px;background:var(--text);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-weight:600;font-size:26px;flex-shrink:0;letter-spacing:-.02em;overflow:hidden}
.dd-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.dd-firm-name{font-family:var(--font-serif);font-size:22px;font-weight:600;line-height:1.15;color:var(--text);letter-spacing:-.015em}
.dd-firm-name-en{font-size:11px;color:var(--text3);font-weight:500;letter-spacing:.04em;margin-top:2px}
.dd-firm-detail{margin-top:10px;font-size:11.5px;color:var(--text2);line-height:1.65;display:grid;grid-template-columns:60px 1fr;gap:1px 8px}
.dd-firm-detail .lbl{color:var(--text3);font-size:11px}
.dd-firm-detail .val{color:var(--text2)}
.dd-doc-right{text-align:right;min-width:230px}
.dd-doc-title{font-size:20px;font-weight:700;color:var(--text);line-height:1.15;letter-spacing:0}
.dd-doc-title-en{font-size:11px;color:var(--text3);font-weight:500;margin-top:2px}
.dd-doc-meta{margin-top:10px;font-size:11.5px;color:var(--text2);line-height:1.65;display:grid;grid-template-columns:1fr auto;gap:1px 10px}
.dd-doc-meta .lbl{color:var(--text3);font-size:11px;text-align:right}
.dd-doc-meta .val{color:var(--text);font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.dd-status-badge{display:inline-flex;align-items:center;gap:5px;margin-top:10px;padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.dd-status-badge.issued{background:var(--green-bg);color:var(--green)}
.dd-status-badge.draft{background:var(--amber-bg);color:var(--amber)}
.dd-status-badge.paid{background:var(--accent-bg);color:var(--accent-ink)}
.dd-status-badge.void{background:var(--bg4);color:var(--text3)}

.dd-hr{border:none;height:1px;background:var(--text);margin:14px 0 16px;opacity:.85}

.dd-parties{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.dd-party-box{border:1.5px dashed var(--border2);border-radius:10px;padding:11px 14px;background:transparent}
.dd-party-label{font-size:10.5px;color:var(--text3);font-weight:600;letter-spacing:.04em;margin-bottom:4px;text-transform:uppercase}
.dd-party-name{font-size:14px;font-weight:600;color:var(--text);margin-bottom:6px;line-height:1.3}
.dd-party-detail{font-size:11px;color:var(--text2);line-height:1.6;display:grid;grid-template-columns:auto 1fr;gap:1px 7px}
.dd-party-detail .lbl{color:var(--text3)}

.dd-lines-tbl{width:100%;border-collapse:collapse;margin-bottom:14px}
.dd-lines-tbl thead th{background:#1A2480;color:#fff;font-size:11px;font-weight:600;padding:9px 10px;text-align:left;letter-spacing:.03em;text-transform:uppercase;line-height:1.3}
.dd-lines-tbl thead th:first-child{border-top-left-radius:7px;width:34px;text-align:center}
.dd-lines-tbl thead th:last-child{border-top-right-radius:7px;text-align:right}
.dd-lines-tbl thead th.num{text-align:right;width:80px}
.dd-lines-tbl tbody td{padding:11px 10px;border-bottom:1px solid var(--border);vertical-align:top;font-size:12.5px;color:var(--text)}
.dd-lines-tbl tbody td.idx{color:var(--text3);font-size:11px;text-align:center;width:34px;font-weight:600;font-variant-numeric:tabular-nums}
.dd-lines-tbl tbody td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.dd-lines-tbl tbody td.total{text-align:right;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.dd-lines-tbl tbody tr:last-child td{border-bottom-color:var(--text)}
.dd-line-desc{font-weight:500;line-height:1.4;color:var(--text)}
.dd-line-sub{font-size:11px;color:var(--text3);margin-top:3px;line-height:1.4}

.dd-bottom{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.dd-info-box{border:1.5px dashed var(--border2);border-radius:10px;padding:11px 14px;margin-bottom:10px}
.dd-info-box-title{font-size:11px;color:var(--text2);font-weight:600;letter-spacing:.03em;margin-bottom:6px;display:flex;align-items:center;gap:5px}
.dd-info-box-title i{font-size:12px;color:var(--text3)}
.dd-info-box-detail{font-size:11.5px;color:var(--text);line-height:1.65;display:grid;grid-template-columns:84px 1fr;gap:1px 6px}
.dd-info-box-detail .lbl{color:var(--text3)}
.dd-info-box-detail .val{color:var(--text)}
.dd-info-box-detail .val.mono{font-weight:500;font-variant-numeric:tabular-nums}
.dd-notes-text{font-size:11.5px;color:var(--text2);line-height:1.6;white-space:pre-wrap}

.dd-totals{display:flex;flex-direction:column;gap:4px;font-size:12.5px}
.dd-tot-row{display:grid;grid-template-columns:1fr auto;gap:14px;padding:3px 2px;align-items:baseline}
.dd-tot-lbl{color:var(--text2);font-size:12px}
.dd-tot-val{text-align:right;color:var(--text);min-width:120px;font-size:12.5px;font-variant-numeric:tabular-nums}
.dd-tot-hr{height:1px;background:var(--border);margin:3px 0}
.dd-tot-grand{background:#1A2480;color:#fff;padding:11px 14px;border-radius:8px;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:baseline;margin-top:4px}
.dd-tot-grand .gl{font-size:13px;font-weight:600}
.dd-tot-grand .gl-en{font-size:9.5px;letter-spacing:.06em;opacity:.75;margin-top:1px;font-weight:500}
.dd-tot-grand .gv{font-size:22px;font-weight:700;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.dd-tot-net{display:grid;grid-template-columns:1fr auto;gap:14px;padding:6px 2px;align-items:baseline}
.dd-tot-net .nv{font-size:14px;color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.dd-tot-net .nl{font-weight:600;color:var(--text)}
.dd-tot-bahttext{background:var(--accent-bg);color:var(--accent-ink);padding:8px 12px;border-radius:8px;font-size:11.5px;line-height:1.5;margin-top:6px}
.dd-tot-bahttext .lbl{font-weight:600;margin-right:6px}

.dd-sig{margin-top:22px;padding-top:14px;border-top:1px dashed var(--border2);display:grid;grid-template-columns:1fr 1fr;gap:30px;font-size:11px;color:var(--text2);text-align:center;line-height:1.7}
.dd-sig-title{font-weight:600;color:var(--text)}
.dd-sig-image{margin-top:6px;display:flex;justify-content:center;height:50px;align-items:center}
.dd-sig-image img{max-height:50px;max-width:200px;object-fit:contain}
.dd-sig-name{color:var(--text3);margin-top:2px}
.dd-sig-date{margin-top:18px;color:var(--text3);font-size:10.5px;letter-spacing:.02em}

/* Print-only footer (เลขหน้า) — ซ่อนในจอ */
.dd-print-footer{display:none}

/* — Doc type / status badges + Dropdown for "ออกเอกสารใหม่" — */
.doc-type-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.doc-type-badge.quotation{background:var(--purple-bg);color:var(--purple)}
.doc-type-badge.invoice{background:var(--accent-bg);color:var(--accent-ink)}
.doc-type-badge.receipt{background:var(--green-bg);color:var(--green)}
.doc-status-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:500;white-space:nowrap}
.doc-status-badge.draft{background:var(--amber-bg);color:var(--amber)}
.doc-status-badge.issued{background:var(--bg4);color:var(--text2)}
.doc-status-badge.paid{background:var(--green-bg);color:var(--green)}
.doc-status-badge.void{background:var(--red-bg);color:var(--red);text-decoration:line-through}

.newdoc-wrap{position:relative;display:inline-block}
.newdoc-menu{position:absolute;top:100%;right:0;margin-top:4px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);min-width:200px;z-index:200;padding:5px;display:none}
.newdoc-wrap.open .newdoc-menu{display:block}
.newdoc-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:7px;cursor:pointer;font-size:13px;color:var(--text);transition:background .12s}
.newdoc-item:hover{background:var(--bg4)}
.newdoc-item i{font-size:16px;color:var(--text3)}
.newdoc-item .nd-title{font-weight:500;font-size:13px;color:var(--text);line-height:1.2}
.newdoc-item .nd-sub{font-size:10.5px;color:var(--text3);margin-top:1px}
.newdoc-item.quotation i{color:var(--purple)}
.newdoc-item.invoice i{color:var(--accent)}
.newdoc-item.receipt i{color:var(--green)}

/* Line items in form */
.db-lines{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--bg3);margin-bottom:6px}
.db-line{padding:10px;border-bottom:1px solid var(--border);background:var(--bg2)}
.db-line:last-child{border-bottom:none}
.db-line-head{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.db-line-no{font-family:var(--mono);font-size:10.5px;color:var(--text3);font-weight:600;min-width:22px}
.db-line-cat{flex:1;font-size:11px;padding:3px 7px;border-radius:6px;border:1px solid var(--border);background:var(--bg3);color:var(--text);outline:none;cursor:pointer}
.db-line-del{padding:4px;border:none;background:transparent;color:var(--text3);cursor:pointer;border-radius:5px;display:inline-flex}
.db-line-del:hover{background:var(--red-bg);color:var(--red)}
.db-line-desc{width:100%;border:1px solid var(--border);background:var(--bg2);border-radius:6px;padding:6px 8px;font-size:12px;color:var(--text);font-family:var(--font);outline:none;margin-bottom:5px}
.db-line-desc:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg)}
.db-line-sub{width:100%;border:1px solid var(--border);background:var(--bg2);border-radius:6px;padding:5px 8px;font-size:11px;color:var(--text2);font-family:var(--font);outline:none;margin-bottom:5px}
.db-line-amounts{display:grid;grid-template-columns:1fr 1.4fr 1.4fr;gap:5px}
.db-line-amounts input{border:1px solid var(--border);background:var(--bg2);border-radius:6px;padding:5px 7px;font-size:11.5px;font-family:var(--mono);text-align:right;color:var(--text);outline:none;width:100%}
.db-line-amounts input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg)}
.db-line-amounts .db-line-total{background:var(--bg3);color:var(--text);font-weight:600;cursor:default}
.db-line-amlbls{display:grid;grid-template-columns:1fr 1.4fr 1.4fr;gap:5px;font-size:9.5px;color:var(--text3);font-weight:600;margin-bottom:3px;text-transform:uppercase;letter-spacing:.04em;text-align:right;padding:0 2px}
.db-line-add{width:100%;padding:8px;border:1px dashed var(--border2);background:transparent;color:var(--text3);font-size:12px;font-weight:600;border-radius:8px;cursor:pointer;transition:all .15s}
.db-line-add:hover{border-color:var(--accent);background:var(--accent-bg);color:var(--accent)}

@media(max-width:1100px){
  .db-wrap{grid-template-columns:1fr}
  .db-form{position:static;max-height:none}
}

@media(max-width:780px){
  .page-head-title{font-size:19px}
  .page-toolbar-right{margin-left:0;width:100%}
  .search-wrap{width:100%}
  .info-card-grid{grid-template-columns:1fr}
  .ap-pipe-grid{grid-template-columns:repeat(2,1fr)}
  .cal-view-switcher{margin-left:0;width:100%;justify-content:space-between}
  .cal-view-btn{flex:1;padding:6px 8px}
  .cal-month-body{grid-auto-rows:minmax(80px,1fr)}
  .cal-month-cell{padding:5px 4px}
  .cal-evt{font-size:10px;padding:1px 5px}
  .cal-week-head{grid-template-columns:40px repeat(7,1fr)}
  .cal-week-body{grid-template-columns:40px repeat(7,1fr)}
  .cal-week-hour-label{font-size:9px;padding:3px 4px 0}
  .cal-day-head-d{font-size:28px}
}

/* ══════════════════════════════════════════
   PRINT / PDF — เฉพาะ doc preview เท่านั้น
   ══════════════════════════════════════════ */
@page{ size: A4; margin: 14mm 12mm; }

@media print {
  /* ซ่อนทุกอย่างยกเว้น preview */
  body { background: #fff !important; }
  .sidebar, .topbar, .mob-top, .mob-nav, #toast,
  .drawer-mask, .detail-panel, .modal-overlay,
  .db-form, .db-preview-bar, .page-head, #setup-screen,
  .pagination, .page-foot, .pipe-add-btn,
  #user-menu, .row-actions { display: none !important; }

  /* layout: เต็มหน้า */
  .app, .main, #page-content, .db-wrap, .db-preview-wrap {
    display: block !important; margin:0 !important; padding:0 !important;
    background:#fff !important; box-shadow:none !important; border:none !important;
  }
  .db-wrap { grid-template-columns: 1fr !important; gap:0 !important; }

  /* doc กลายเป็นเอกสารเต็มหน้า — ไม่มี border/shadow/padding/margin extra */
  .db-doc {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 11.5pt;
    line-height: 1.45;
    /* flex column → ดัน signature footer ติดล่างหน้า A4 (Mini 6C Issue 4) */
    display: flex !important;
    flex-direction: column !important;
    min-height: calc(297mm - 28mm); /* A4 height - top+bottom margins */
  }

  /* Signature ติดล่างหน้าและ 2 ช่องสูงเท่ากัน (Mini 6C Issue 4) */
  .dd-sig { margin-top: auto !important; min-height: 90px; }
  .dd-sig > div { display: flex !important; flex-direction: column !important; justify-content: flex-end !important; min-height: 90px; }

  /* ป้องกัน page break กลางตาราง / กล่อง */
  .dd-header, .dd-parties, .dd-bottom, .dd-sig { page-break-inside: avoid; break-inside: avoid; }
  .dd-lines-tbl tbody tr { page-break-inside: avoid; break-inside: avoid; }
  .dd-tot-grand { page-break-inside: avoid; break-inside: avoid; }

  /* รักษาสีพื้น navy ใน Grand Total + table header — บาง browser ตัด ต้องบังคับ */
  .dd-lines-tbl thead th, .dd-tot-grand {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  .dd-status-badge, .dd-tot-bahttext, .dd-party-box, .dd-info-box {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  /* รูป logo + signature ต้องคงสีไว้ตอนพิมพ์ */
  .dd-logo img, .dd-sig-image img {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* ขนาด font + spacing สำหรับพิมพ์ A4 */
  .dd-firm-name, .dd-doc-title { font-size: 18pt !important; }
  .dd-tot-grand .gv { font-size: 18pt !important; }
  .dd-firm-detail, .dd-doc-meta, .dd-party-detail, .dd-info-box-detail,
  .dd-tot-row, .dd-tot-net, .dd-tot-bahttext, .dd-notes-text { font-size: 10pt !important; }
  .dd-lines-tbl thead th { font-size: 9.5pt !important; padding: 7px 9px !important; }
  .dd-lines-tbl tbody td { font-size: 10pt !important; padding: 8px 9px !important; }

  /* ไม่ต้องแสดง browser default header/footer ที่อาจชนกัน */
  a[href]:after { content: none !important; }

  /* Print-only footer: เลขหน้าใน document */
  .dd-print-footer {
    display: block !important;
    text-align: center;
    font-size: 9.5pt;
    color: #888;
    margin-top: 18mm;
    padding-top: 6pt;
    border-top: 1px solid #ddd;
  }

  /* ══════ Mini C7 — Case Doc Index Print Rules ══════ */
  /* ซ่อน action bar ตอนพิมพ์ */
  .cdi-actions, .cdi-back-link { display: none !important; }

  /* page เต็มจอ ไม่มี border/shadow */
  .cdi-page {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    background: #fff !important;
    color: #000 !important;
  }

  /* ป้องกัน page break ตำแหน่งที่ไม่ควรขาด */
  .cdi-firm-block, .cdi-doc-title-block, .cdi-meta-row { page-break-inside: avoid; break-inside: avoid; }
  .cdi-cat-section { page-break-inside: avoid; break-inside: avoid; }
  .cdi-table tbody tr { page-break-inside: avoid; break-inside: avoid; }
  .cdi-table thead { display: table-header-group; }  /* repeat header on each page */

  /* รักษาสีพื้น category row */
  .cdi-cat-row, .cdi-table thead th {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* logo image คงสี */
  .cdi-logo-img {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* font sizes A4 */
  .cdi-firm-name { font-size: 16pt !important; }
  .cdi-doc-title { font-size: 18pt !important; }
  .cdi-firm-detail, .cdi-meta-row { font-size: 9.5pt !important; }
  .cdi-table thead th { font-size: 9.5pt !important; padding: 6pt 7pt !important; }
  .cdi-table tbody td { font-size: 9.5pt !important; padding: 5pt 7pt !important; }
  .cdi-cat-row td { font-size: 10pt !important; padding: 6pt 7pt !important; }

  /* hide sidebar/topbar/etc — ใช้ rule เดิมจากบล็อกข้างบนครอบคลุมอยู่แล้ว */
}

/* ══════════════════════════════════════════════════════════
   Mini C7 — Case Doc Index (screen + print)
   ══════════════════════════════════════════════════════════ */
.cdi-wrap {
  max-width: 210mm;
  margin: 0 auto;
  background: var(--bg2);
  padding: 14mm 12mm;
  border-radius: var(--rlg);
  box-shadow: var(--shadow-sm);
}
.cdi-page { font-family: var(--font); color: var(--text); }
.cdi-firm-block {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--text);
}
.cdi-logo-img {
  width: 56px; height: 56px; object-fit: contain;
}
.cdi-logo-letter {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--text); color: #fff;
  font-family: var(--font-serif); font-size: 28px;
  border-radius: 6px;
}
.cdi-firm-name {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.cdi-firm-detail {
  font-size: 11.5px;
  color: var(--text2);
  line-height: 1.55;
}
.cdi-doc-title-block {
  text-align: center;
  margin: 6px 0 18px;
}
.cdi-doc-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .5px;
}
.cdi-meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
  font-size: 12px;
  color: var(--text2);
  margin-bottom: 18px;
  padding: 8px 12px;
  background: var(--bg3);
  border-radius: 6px;
}
.cdi-meta-row strong { color: var(--text); font-weight: 600; margin-right: 6px; }
.cdi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.cdi-table thead th {
  text-align: left;
  padding: 8px 9px;
  background: var(--text);
  color: #fff;
  font-weight: 500;
  font-size: 11.5px;
  border: 1px solid var(--text);
}
.cdi-table thead th.cdi-num { width: 38px; text-align: center; }
.cdi-table thead th.cdi-date { width: 80px; }
.cdi-table thead th.cdi-ref { width: 110px; }
.cdi-table tbody td {
  padding: 7px 9px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.5;
}
.cdi-table tbody td.cdi-num { text-align: center; font-family: var(--mono); color: var(--text3); }
.cdi-table tbody td.cdi-date { font-family: var(--mono); white-space: nowrap; color: var(--text2); }
.cdi-table tbody td.cdi-ref { font-family: var(--mono); color: var(--text2); }
.cdi-cat-row td {
  padding: 8px 10px;
  background: var(--bg4);
  font-weight: 600;
  color: var(--text);
  border-top: 1px solid var(--border2);
  border-bottom: 1px solid var(--border2);
}
.cdi-cat-count {
  font-size: 11px;
  color: var(--text3);
  font-weight: 400;
  margin-left: 6px;
}
.cdi-doc-title-row {
  font-weight: 500;
  color: var(--text);
}
.cdi-doc-fname {
  font-size: 10.5px;
  color: var(--text3);
  font-family: var(--mono);
  margin-top: 2px;
}
.cdi-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.cdi-empty {
  text-align: center;
  padding: 32px;
  color: var(--text3);
  font-size: 12.5px;
}

/* ══════════════════════════════════════════════════════════
   Feature C — AI Document Management
   ══════════════════════════════════════════════════════════ */

/* Category badge */
.cdoc-cat-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.4;
  white-space: nowrap;
}

/* Status badge */
.cdoc-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.4;
  white-space: nowrap;
}

/* Pulse animation สำหรับ status processing */
.cdoc-pulse {
  animation: cdoc-pulse-kf 1.4s ease-in-out infinite;
}
@keyframes cdoc-pulse-kf {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* Document card — เลียนแบบ pattern .card แต่ tweak สำหรับ Feature C */
.cdoc-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  transition: all .15s;
  cursor: pointer;
}
.cdoc-card:hover {
  border-color: var(--border2);
  background: var(--bg3);
}
.cdoc-card.cdoc-processing {
  background: linear-gradient(90deg, var(--bg2) 0%, var(--accent-bg) 50%, var(--bg2) 100%);
  background-size: 200% 100%;
  animation: cdoc-shimmer 2s linear infinite;
}
@keyframes cdoc-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* C8a — Stuck processing (เกิน 5 นาที) */
.cdoc-card.cdoc-stuck {
  border-color: rgba(193,131,39,.3);
  background: linear-gradient(0deg, var(--amber-bg) 0%, var(--bg2) 60%);
}
.cdoc-card.cdoc-stuck:hover {
  border-color: var(--amber);
}

/* C8a — Skeleton loaders */
.skel {
  display: inline-block;
  background: linear-gradient(90deg, var(--bg4) 0%, var(--bg3) 50%, var(--bg4) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
  vertical-align: middle;
}
@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skel-line { height: 11px; display: block; margin: 4px 0; }
.skel-w90  { width: 90%; }
.skel-w70  { width: 70%; }
.skel-w50  { width: 50%; }
.skel-w30  { width: 30%; }
.skel-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
}
/* skeleton-card uses cdoc-card layout but with skeleton bones */
.cdoc-card.skeleton-card {
  pointer-events: none;
  opacity: .85;
}
.cdoc-card.skeleton-card .cdoc-icon { background: transparent; }
.skel-row td .skel-line { margin: 2px 0; }

/* C8b — Bulk mode */
.cdoc-card.cdoc-selected {
  border-color: var(--accent);
  background: var(--accent-bg);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.cdoc-card.cdoc-selected:hover {
  border-color: var(--accent2);
}
.cdoc-bulk-check {
  flex-shrink: 0;
  width: 28px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}
.cdoc-bulk-check:hover i { color: var(--accent) !important; }
.cdoc-bulk-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  margin: 10px 0;
  background: var(--accent-bg);
  border: 1px solid rgba(43,63,179,.2);
  border-radius: var(--r);
  flex-wrap: wrap;
}

.cdoc-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg3);
}
.cdoc-icon i { font-size: 18px; color: var(--text2); }

.cdoc-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cdoc-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.cdoc-file-name {
  font-size: 11px;
  color: var(--text3);
  font-family: var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cdoc-summary {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.45;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cdoc-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text3);
}

.cdoc-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.cdoc-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--bg4);
  color: var(--text3);
  font-size: 10.5px;
  font-weight: 400;
}

.cdoc-actions {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
  align-self: flex-start;
}

/* Section header สำหรับแบ่ง classified vs raw drive */
.cdoc-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.cdoc-section-head::before,
.cdoc-section-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ════════════════════════════════════════════════════════════════
   Feature D — Settings page (Mini D3)
   ──────────────────────────────────────────────────────────────── */

/* สถานะ LINE binding (active card) */
.line-status-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: 14px;
}
.line-status-card.connected {
  background: linear-gradient(135deg, rgba(44, 140, 90, .04) 0%, var(--bg2) 100%);
  border-color: rgba(44, 140, 90, .2);
}
.line-status-card .ls-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.line-status-card.connected .ls-icon {
  background: rgba(44, 140, 90, .12);
  color: #2C8C5A;
}
.line-status-card .ls-text { flex: 1; min-width: 0 }
.line-status-card .ls-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 2px;
}
.line-status-card .ls-sub {
  font-size: 11.5px;
  color: var(--text3);
}

/* QR section ใน modal bind */
.line-bind-qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px;
  background: var(--bg2);
  border-radius: var(--r);
  margin-bottom: 14px;
}
.line-bind-qr-wrap svg,
.line-bind-qr-wrap img {
  width: 200px;
  height: 200px;
  background: #fff;
  padding: 8px;
  border-radius: 8px;
  display: block;
}

/* Code display (6 digits) */
.line-bind-code {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--accent);
  background: var(--bg3);
  padding: 10px 16px;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  user-select: all;
  transition: background .15s;
}
.line-bind-code:hover {
  background: var(--bg);
}

/* Countdown timer */
.line-bind-countdown {
  font-size: 11.5px;
  color: var(--text3);
  text-align: center;
  margin-top: 6px;
}
.line-bind-countdown.warning { color: #E08C2E }
.line-bind-countdown.urgent { color: #D14545 }

/* Step list ใน modal */
.line-bind-steps {
  background: var(--bg2);
  border-radius: var(--r);
  padding: 14px;
  margin-bottom: 12px;
}
.line-bind-steps ol {
  margin: 0;
  padding-left: 20px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text2);
}
.line-bind-steps ol li { margin-bottom: 4px }
.line-bind-steps strong { color: var(--text) }

/* Polling indicator */
.line-bind-polling {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text3);
  padding: 8px;
}
.line-bind-polling .spinner {
  width: 12px;
  height: 12px;
  border: 2px solid var(--bg3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: line-spin 0.8s linear infinite;
}
@keyframes line-spin {
  to { transform: rotate(360deg) }
}

/* Pref toggle row */
.line-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.line-pref-row:last-child { border-bottom: none }
.line-pref-row .pref-label {
  display: flex;
  align-items: center;
  gap: 10px;
}
.line-pref-row .pref-label i {
  font-size: 18px;
  color: var(--text3);
  width: 24px;
  text-align: center;
}
.line-pref-row .pref-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.line-pref-row .pref-desc {
  font-size: 11px;
  color: var(--text3);
  margin-top: 1px;
}

/* Toggle switch (สำหรับ prefs) */
.line-toggle {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
}
.line-toggle input { opacity: 0; width: 0; height: 0 }
.line-toggle .slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--text3);
  transition: .25s;
  border-radius: 22px;
}
.line-toggle .slider::before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  transition: .25s;
  border-radius: 50%;
}
.line-toggle input:checked + .slider {
  background: var(--accent);
}
.line-toggle input:checked + .slider::before {
  transform: translateX(16px);
}
.line-toggle input:disabled + .slider {
  opacity: .5;
  cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════════
   🆕 D5.4 — Quota Dashboard (Admin only)
   ════════════════════════════════════════════════════════════════ */

/* Stats Grid (4 cards) */
.quota-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.quota-stat-card {
  background: var(--bg3);
  border-radius: var(--r);
  padding: 10px 12px;
}
.quota-stat-label {
  font-size: 11px;
  color: var(--text3);
  margin-bottom: 4px;
}
.quota-stat-value {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
}
.quota-stat-value.success { color: var(--green); }
.quota-stat-value.danger  { color: var(--red); }
.quota-stat-value.warn    { color: var(--amber); }
.quota-stat-value.muted   { color: var(--text3); }

/* Progress Bar */
.quota-bar-section {
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.quota-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.quota-bar-title {
  font-size: 12.5px;
  color: var(--text2);
}
.quota-bar-count {
  font-size: 12.5px;
  color: var(--text2);
}
.quota-progress {
  background: var(--bg3);
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
}
.quota-progress-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.3s ease, background-color 0.3s ease;
}
.quota-progress-fill.safe   { background: var(--green); }
.quota-progress-fill.warn   { background: var(--amber); }
.quota-progress-fill.danger { background: var(--red); }
.quota-bar-footer {
  font-size: 11px;
  color: var(--text3);
  margin-top: 6px;
}

/* Breakdown by event_type */
.quota-breakdown {
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
.quota-breakdown-title {
  font-size: 11.5px;
  color: var(--text3);
  margin-bottom: 8px;
}
.quota-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 16px;
  font-size: 12.5px;
}
.qb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text2);
}
.qb-row i {
  font-size: 13px;
  vertical-align: -2px;
  margin-right: 4px;
  color: var(--text3);
}
.qb-num {
  font-weight: 500;
  color: var(--text);
}

/* Loading spinner reuse */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Mobile: 2 columns */
@media (max-width: 640px) {
  .quota-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .quota-breakdown-grid {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════
   🆕 D5.4b — Quota Edit Button + Modal
   ⚠️ ใช้ prefix `qmodal-` เพื่อไม่ชนกับ .modal-overlay เดิม
   ════════════════════════════════════════════════════════════════ */

.quota-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  color: var(--text3);
  margin-left: 6px;
  vertical-align: -4px;
  transition: all 0.15s ease;
  padding: 0;
}
.quota-edit-btn:hover {
  background: var(--bg3);
  color: var(--accent);
  border-color: var(--accent);
}
.quota-edit-btn i { font-size: 12px; }

.quota-disclaimer {
  font-size: 11px;
  color: var(--text3);
  margin-top: 6px;
  padding: 6px 8px;
  background: var(--bg3);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  gap: 4px;
}
.quota-disclaimer i { font-size: 12px; }

/* ── Quota Modal Overlay (separate from system .modal-overlay) ── */
.qmodal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}
.qmodal-content {
  background: var(--bg2);
  border-radius: var(--rlg);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.qmodal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.qmodal-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.qmodal-header h3 i { color: var(--accent); }
.qmodal-close {
  background: transparent;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.qmodal-close:hover { background: var(--bg3); color: var(--text); }
.qmodal-body { padding: 18px; }
.qmodal-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Quota Preset Items ── */
.quota-modal-intro {
  font-size: 12.5px;
  color: var(--text2);
  margin: 0 0 12px;
}
.quota-preset-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.quota-preset-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  cursor: pointer;
  transition: all 0.15s ease;
}
.quota-preset-item:hover {
  background: var(--bg3);
  border-color: var(--text3);
}
.quota-preset-item.selected {
  background: rgba(99, 102, 241, 0.05);
  border-color: var(--accent);
}
.quota-preset-item input[type="radio"] {
  margin-top: 2px;
  cursor: pointer;
  flex-shrink: 0;
}
.quota-preset-text { flex: 1; }
.quota-preset-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.quota-preset-desc {
  font-size: 11.5px;
  color: var(--text3);
  margin-top: 2px;
  display: flex;
  align-items: center;
}
.quota-preset-desc input[type="number"] {
  width: 110px;
  padding: 4px 8px;
  font-size: 11.5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg2);
  color: var(--text);
}
.quota-modal-help {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--bg3);
  border-radius: var(--r);
  font-size: 11.5px;
  color: var(--text3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.quota-modal-help a {
  color: var(--accent);
  text-decoration: none;
}
.quota-modal-help a:hover { text-decoration: underline; }