@import url('gastek-tokens.css?v=20261014.5');
/* ════════════════════════════════════════════════════════════════════════
   GASTEK Notion Workspace — central design system
   ------------------------------------------------------------------------
   Loaded LAST in <head> on every application page (after the page's own
   inline <style>), so for equal specificity these rules win. Presentation
   only: no rule here changes what data is shown, which controls exist, or
   how anything behaves.

   Sections
     0. Design tokens (light / dark) + legacy-token mapping
     1. Print isolation (documents keep their original look)
     2. Base
     3. Shell — sidebar, collapsed sidebar, topbar, content
     4. Buttons
     5. Forms — inputs, labels, form grids, section headers
     6. Toolbars — filter bars, search, stage chips, summary chips, tabs
     7. Tables
     8. Badges / pills
     9. Sections, cards, KPI blocks
    10. Modals + maximize workspace
    11. Module-specific layout (SO/Quotation editor, Project Execution, …)
    12. Dashboard / Reports (gastek-ui.css components)
    13. Login / Pending / 404
    14. Responsive
    15. Print
   ════════════════════════════════════════════════════════════════════════ */

/* ── 0. TOKENS ─────────────────────────────────────────────────────────── */
:root{
  /* ── legacy tokens used by every page's inline CSS, remapped ── */
  --navy:var(--text); --navy2:var(--text); --navy3:var(--text);
  --navy-bg:var(--strong);
  --gold:var(--primary); --gold2:#4ADE80; --gold-bg:var(--primary);
  --cream:var(--surface-2); --white:var(--surface);
  --gray:var(--text-muted); --text2:var(--text-secondary);
  --green:var(--primary-600); --green-bg:var(--primary-soft);
  --red:var(--danger); --red-bg:var(--danger-soft);
  --blue:var(--info); --blue-bg:var(--info-soft);
  --amber:var(--warning); --amber-bg:var(--warning-soft);
  --purple:var(--violet); --purple-bg:var(--violet-soft);
}
html.sb-collapsed{--sidebar-w:var(--sidebar-w-collapsed);}

html[data-theme="dark"]{--gold2:#86EFAC;}

/* ── 1. PRINT ISOLATION ───────────────────────────────────────────────────
   Printed documents (#printSO — SO & customer quotation, #printInvoice) are
   rendered inside the app page. Restore the original palette & fonts inside
   them so the documents stay byte-for-byte in their original style, in
   either theme, on screen or on paper. */
#printSO,#printInvoice,.pe-page{ /* .pe-page: the Print layout editor's page preview */
  color-scheme:light;
  --navy:#0f1e3c; --navy2:#1a3260; --navy3:#162b52; --navy-bg:#0f1e3c;
  --gold:#c9a84c; --gold2:#e8c76a; --gold-bg:linear-gradient(135deg,#c9a84c,#e8c76a);
  --cream:#ffffff; --white:#ffffff; /* documents are plain white — no cream tint */ --gray:#8a8f9e; --border:#e8e4db;
  --text:#1a1f2e; --text2:#555c6e;
  --green:#2ecc8a; --green-bg:#e8faf3; --red:#e05252; --red-bg:#ffeaea;
  --blue:#3a7bd5; --blue-bg:#e8f0fc; --amber:#e09a2e; --amber-bg:#fff4e0;
  --purple:#7c5cbf; --purple-bg:#f0ebff; --row-hover:#faf9f5;
  --font-display:'Playfair Display',serif; --font-ui:'DM Sans',sans-serif; --font-mono:'DM Mono',monospace;
  color:#1a1f2e;
  /* undo the app's base typography so the documents inherit exactly what they did before */
  font-size:medium; line-height:normal; font-feature-settings:normal;
  -webkit-font-smoothing:auto; -moz-osx-font-smoothing:auto;
}

/* ── 2. BASE ───────────────────────────────────────────────────────────── */
html,body{font-family:var(--font-ui);background:var(--bg);color:var(--text);
  font-size:var(--fs-md);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:'cv11','ss01';}
body{line-height:1.45;}
::selection{background:var(--primary-soft);}
a{color:inherit;}
.main a:not(.btn):not(.nav-item):not([class*="chip"]){text-underline-offset:2px;}
*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px;border:2px solid transparent;background-clip:padding-box;}
::-webkit-scrollbar-track{background:transparent;}
.tm,.td-mono,.so-id,.s-chip-val,[class*="-num"],.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.right,td.right,th.right,.num,.amt,[class*="-amt"]{font-variant-numeric:tabular-nums;}
input[type=checkbox],input[type=radio]{accent-color:var(--primary);}

/* ── 3. SHELL ──────────────────────────────────────────────────────────── */
.layout{min-height:100vh;background:var(--bg);}

/* Sidebar */
.sidebar{width:var(--sidebar-w)!important;background:var(--sidebar-bg)!important;
  border-right:1px solid var(--border);box-shadow:none;transition:width var(--ease);}
.sidebar::after,.sidebar::before,.sidebar-deco{display:none!important;}
.sidebar-logo{padding:10px 12px!important;min-height:var(--topbar-h);gap:8px!important;
  border-bottom:1px solid var(--border)!important;align-items:center;overflow:hidden;flex-shrink:0;}
.sidebar-logo img{height:24px!important;width:auto!important;max-width:34px;object-fit:contain;flex-shrink:0;}
.sidebar-logo .brand-icon{width:26px;height:26px;border-radius:6px;font-family:var(--font-ui);font-size:13px;
  background:var(--primary);color:var(--on-primary);box-shadow:none;}
.sidebar .brand-name{font-family:var(--font-ui)!important;font-size:14px!important;font-weight:700!important;
  letter-spacing:.06em!important;color:var(--text)!important;white-space:nowrap;}
.sidebar .brand-name span{color:var(--primary)!important;}
.page .brand-name{font-family:var(--font-ui)!important;letter-spacing:.06em!important;}
.page .brand-name span{color:#4ADE80!important;}
.sidebar-nav{padding:6px 8px 8px;overflow-y:auto;overflow-x:hidden;}
.sidebar-nav::-webkit-scrollbar-thumb{background:var(--border-strong)!important;}
.nav-section{padding:8px 0 2px!important;}
.nav-section:first-child{padding-top:4px!important;}
.nav-section-label{font-size:10px!important;font-weight:600!important;letter-spacing:.08em!important;
  color:var(--text-muted)!important;padding:0 8px!important;margin-bottom:2px!important;white-space:nowrap;overflow:hidden;}
.nav-item{height:32px;padding:0 8px!important;margin:1px 0!important;gap:9px!important;border-radius:6px!important;
  font-size:12.5px!important;font-weight:500!important;color:var(--text-secondary)!important;
  transition:background var(--ease),color var(--ease)!important;white-space:nowrap;overflow:hidden;}
.nav-item:hover{background:var(--surface-3)!important;color:var(--text)!important;}
.nav-item.active{background:var(--primary-soft)!important;color:var(--primary-hover)!important;font-weight:600!important;}
html[data-theme="dark"] .nav-item.active{color:#BBF7D0!important;}
.nav-item.active::before{left:-8px!important;width:3px!important;height:16px!important;background:var(--primary)!important;border-radius:0 3px 3px 0!important;}
.nav-icon{width:16px!important;min-width:16px;font-size:13.5px!important;opacity:.9!important;filter:grayscale(1);text-align:center;line-height:1;}
.nav-item.active .nav-icon{filter:none;opacity:1!important;}
.nav-item .open-accts-badge,.nav-item [class*="badge"],.nav-item .nb{margin-left:auto;font-size:10px!important;padding:1px 6px!important;
  border-radius:999px!important;line-height:1.4;}
.sidebar-footer{padding:8px!important;border-top:1px solid var(--border)!important;background:transparent;flex-shrink:0;}
.user-card{padding:4px 4px!important;margin-bottom:6px!important;background:transparent!important;border-radius:6px!important;gap:8px!important;overflow:hidden;}
.user-avatar{width:26px!important;height:26px!important;min-width:26px;font-size:11px!important;background:var(--primary-soft)!important;
  color:var(--primary-hover)!important;border:none!important;}
html[data-theme="dark"] .user-avatar{color:#BBF7D0!important;}
.user-name{font-size:12px!important;color:var(--text)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-role{font-size:10px!important;color:var(--text-muted)!important;letter-spacing:.04em!important;}
.user-info-text{min-width:0;}
.btn-logout{height:28px;padding:0 8px!important;background:transparent!important;color:var(--text-secondary)!important;
  border:1px solid var(--border)!important;border-radius:6px!important;font-family:var(--font-ui)!important;font-size:11.5px!important;
  white-space:nowrap;overflow:hidden;}
.btn-logout:hover{color:var(--danger)!important;border-color:var(--danger)!important;background:var(--danger-soft)!important;}

/* theme switch + collapse (injected by gastek-theme.js) */
.gt-foot-row{display:flex;align-items:center;gap:6px;margin-bottom:6px;}
.gt-theme{display:flex;flex:1;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:2px;gap:2px;}
.gt-theme button{flex:1;height:22px;border:0;background:transparent;color:var(--text-muted);border-radius:4px;cursor:pointer;
  font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background var(--ease),color var(--ease);}
.gt-theme button:hover{color:var(--text);}
.gt-theme button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);}
.gt-collapse{width:28px;height:28px;flex-shrink:0;border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);
  border-radius:6px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;}
.gt-collapse:hover{color:var(--text);background:var(--surface-3);}

/* Collapsed sidebar (56px, icons only, tooltips) */
html.sb-collapsed .sidebar .brand-name,
html.sb-collapsed .sidebar .nav-section-label,
html.sb-collapsed .sidebar .user-info-text,
html.sb-collapsed .sidebar .gt-theme{display:none!important;}
html.sb-collapsed .sidebar-logo{justify-content:center;padding:10px 6px!important;}
html.sb-collapsed .sidebar-nav{padding:6px 6px;}
html.sb-collapsed .nav-section{padding:6px 0 0!important;border-top:1px solid var(--border);margin-top:4px;}
html.sb-collapsed .nav-section:first-child{border-top:0;margin-top:0;}
html.sb-collapsed .nav-item{justify-content:center;padding:0!important;font-size:0!important;gap:0!important;}
html.sb-collapsed .nav-item .nav-icon{font-size:15px!important;width:auto!important;}
html.sb-collapsed .nav-item > :not(.nav-icon){display:none!important;}
html.sb-collapsed .nav-item.active::before{left:-6px!important;}
html.sb-collapsed .user-card{justify-content:center;}
html.sb-collapsed .gt-foot-row{flex-direction:column;}
html.sb-collapsed .btn-logout{font-size:0!important;padding:0!important;}
html.sb-collapsed .btn-logout::before{content:'⏻';font-size:13px;}
html.sb-collapsed #btnChangePw::before{content:'🔑';font-size:13px;}
.gt-tip{position:fixed;z-index:1000;pointer-events:none;background:var(--strong);color:var(--on-strong);font-size:11.5px;font-weight:500;
  padding:4px 8px;border-radius:5px;white-space:nowrap;box-shadow:var(--shadow-md);transform:translateY(-50%);opacity:0;transition:opacity 100ms;}
.gt-tip.show{opacity:1;}

/* Main + topbar */
.main{margin-left:var(--sidebar-w)!important;width:calc(100% - var(--sidebar-w))!important;background:var(--bg);
  transition:margin-left var(--ease),width var(--ease);}
.topbar{height:var(--topbar-h)!important;min-height:var(--topbar-h);padding:0 var(--content-px)!important;background:var(--surface)!important;
  border-bottom:1px solid var(--border)!important;box-shadow:none!important;gap:10px!important;flex-wrap:nowrap!important;}
.topbar-left{display:flex;align-items:baseline;gap:10px;min-width:0;flex:1 1 auto;overflow:hidden;}
.topbar-left h1{font-family:var(--font-ui)!important;font-size:15px!important;font-weight:650!important;color:var(--text)!important;
  letter-spacing:-.005em;white-space:nowrap;display:flex;align-items:center;gap:6px;line-height:1.2;}
.topbar-left h1 > span[title]{background:var(--surface-3)!important;color:var(--text-muted)!important;width:15px!important;height:15px!important;font-size:10px!important;}
.topbar-left p{font-size:11.5px!important;color:var(--text-muted)!important;margin:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.gt-crumb{font-size:12.5px;color:var(--text-muted);white-space:nowrap;font-weight:500;}
.gt-crumb::after{content:'/';margin-left:8px;color:var(--border-strong);}
.topbar-right{gap:6px!important;flex-wrap:nowrap!important;flex-shrink:0;align-items:center;}
.topbar-right .btn{white-space:nowrap;}
#notifBell{width:30px;padding:0!important;justify-content:center;}
#notifPanel{background:var(--surface)!important;border-color:var(--border)!important;box-shadow:var(--shadow-md)!important;}
#notifPanel a:hover{background:var(--surface-2)!important;}

/* Content area: 100% of the available workspace */
.content{padding:var(--content-py) var(--content-px) 24px!important;max-width:none!important;width:100%;}
.content > *{max-width:none;}

/* ── 4. BUTTONS ────────────────────────────────────────────────────────── */
.btn{min-height:var(--btn-h);padding:0 12px!important;border-radius:var(--r-btn)!important;font-family:var(--font-ui)!important;
  font-size:12.5px!important;font-weight:550!important;gap:6px!important;line-height:1.2;box-shadow:none!important;transform:none!important;
  transition:background var(--ease),border-color var(--ease),color var(--ease),opacity var(--ease)!important;}
.btn-sm{min-height:var(--btn-h-sm);padding:0 10px!important;font-size:12px!important;}
.btn-xs{min-height:24px;padding:0 8px!important;font-size:11px!important;border-radius:5px!important;}
.btn-lg{min-height:var(--btn-h-lg);padding:0 16px!important;font-size:13px!important;}
select.btn{padding:0 8px!important;}
.btn-primary,.btn-gold.primary{background:var(--primary)!important;color:var(--on-primary)!important;border:1px solid var(--primary)!important;}
.btn-primary:hover{background:var(--primary-hover)!important;border-color:var(--primary-hover)!important;}
.btn-gold{background:var(--primary-soft)!important;color:var(--primary-hover)!important;border:1px solid transparent!important;font-weight:600!important;}
.btn-gold:hover{background:var(--primary)!important;color:var(--on-primary)!important;}
html[data-theme="dark"] .btn-gold{color:#BBF7D0!important;}
html[data-theme="dark"] .btn-gold:hover{color:var(--on-primary)!important;}
.btn-outline,.btn-light,.btn-secondary{background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--border-strong)!important;}
.btn-outline:hover,.btn-light:hover,.btn-secondary:hover{background:var(--surface-2)!important;border-color:var(--text-muted)!important;}
.btn-outline.on,.chips .btn.on{background:var(--primary-soft)!important;color:var(--primary-hover)!important;border-color:var(--primary)!important;}
html[data-theme="dark"] .btn-outline.on{color:#BBF7D0!important;}
.btn-danger{background:var(--surface)!important;color:var(--danger)!important;border:1px solid color-mix(in srgb,var(--danger) 45%,transparent)!important;}
.btn-danger:hover{background:var(--danger-soft)!important;color:var(--danger-text)!important;}
.btn-warning{background:var(--warning-soft)!important;color:var(--warning-text)!important;border:1px solid transparent!important;}
.btn-google{border-radius:var(--r-btn)!important;}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;}
.mc,.modal-close,.max-toggle{width:28px;height:28px;display:inline-flex!important;align-items:center;justify-content:center;border-radius:6px!important;
  font-size:16px!important;line-height:1!important;color:var(--text-muted)!important;background:transparent!important;border:0!important;
  cursor:pointer;transition:background var(--ease),color var(--ease);flex-shrink:0;margin:0!important;}
.mc:hover,.modal-close:hover,.max-toggle:hover{background:var(--surface-3)!important;color:var(--text)!important;}

/* ── 5. FORMS ──────────────────────────────────────────────────────────── */
:is(.main,.overlay,.modal-ov,.modal) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select,textarea){
  border-width:1px;border-color:var(--border-strong);color:var(--text);font-family:var(--font-ui);}
:is(.main,.overlay,.modal-ov,.modal) :is(input,select,textarea):focus{border-color:var(--primary)!important;box-shadow:0 0 0 3px var(--focus-ring)!important;outline:none;}
:is(.main,.overlay,.modal-ov,.modal) :is(input,textarea)::placeholder{color:var(--text-muted);opacity:1;}
:is(.main,.overlay,.modal-ov,.modal) :is(input,select,textarea):disabled,
:is(.main,.overlay,.modal-ov,.modal) :is(input,textarea)[readonly]{background:var(--surface-2);color:var(--text-secondary);}
select{background-color:var(--surface);}

/* standard field wrappers used across modules */
.fl,.f-group,.field-item,.setup-row{gap:4px!important;min-width:0;}
.fl label,.f-group label,.field-item label,.setup-row label,.fsec-label{font-size:10.5px!important;font-weight:600!important;letter-spacing:.03em!important;
  color:var(--text-secondary)!important;text-transform:uppercase;margin-bottom:0;}
:is(.fl,.f-group,.setup-row,.at-row) :is(input:not([type=checkbox]):not([type=radio]),select),
.filter-select,.fb-select,.list-input input,.lm-input{
  min-height:var(--input-h);height:auto;padding:5px 9px!important;border-radius:var(--r-input)!important;font-size:12.5px!important;
  background-color:var(--surface)!important;border:1px solid var(--border-strong)!important;color:var(--text)!important;}
:is(.fl,.f-group) textarea,.note-composer textarea,.sc-paste textarea,.sc-legacy textarea{
  padding:6px 9px!important;border-radius:var(--r-input)!important;font-size:12.5px!important;line-height:1.45;
  background-color:var(--surface)!important;border:1px solid var(--border-strong)!important;min-height:56px;}
.fl input.readonly-mono{background:var(--surface-2)!important;color:var(--text)!important;font-family:var(--font-mono)!important;}
.fl .ht,.ht,.hint,.help-note{font-size:11px!important;color:var(--text-muted)!important;line-height:1.4;}
.fg{gap:10px 12px!important;}
.fg + .fg,.fg + .fl,.fl + .fg{margin-top:10px;}
/* reusable grids */
.form-grid,.form-grid-2,.form-grid-3,.form-grid-4{display:grid;gap:10px 12px;}
.form-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.form-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.form-grid-4,.form-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.form-grid .full,.form-grid-2 .full,.form-grid-3 .full,.form-grid-4 .full{grid-column:1/-1;}

/* numbered form sections → subtle separators instead of heavy headers */
.fsec{margin-bottom:16px!important;}
.fsh{gap:8px!important;margin-bottom:10px!important;padding-bottom:6px!important;border-bottom:1px solid var(--border)!important;}
.fsn{width:20px!important;height:20px!important;min-width:20px;font-size:10.5px!important;font-weight:700!important;
  background:var(--primary-soft)!important;color:var(--primary-hover)!important;border-radius:5px!important;}
html[data-theme="dark"] .fsn{color:#BBF7D0!important;}
.fsn.on{background:var(--primary)!important;color:var(--on-primary)!important;}
.fst{font-size:11px!important;font-weight:700!important;letter-spacing:.06em!important;color:var(--text)!important;}
.fdiv{border-color:var(--border)!important;}

/* wizard */
.wiz-dot{width:20px!important;height:20px!important;font-size:10.5px!important;}
.wiz-dot.active{background:var(--primary)!important;color:var(--on-primary)!important;}
.wiz-dot.done{background:var(--primary-soft)!important;color:var(--primary-hover)!important;}
.wiz-label{margin-bottom:10px!important;font-size:10.5px!important;}

/* inline alerts */
.fa,.form-alert,.alert{border-radius:6px!important;font-size:12px!important;padding:7px 10px!important;}
.fa.err,.alert.err,.alert-error,.form-alert.err{background:var(--danger-soft)!important;color:var(--danger-text)!important;border:1px solid color-mix(in srgb,var(--danger) 30%,transparent)!important;}
.fa.ok,.alert.ok,.alert-success,.form-alert.ok{background:var(--primary-softer)!important;color:var(--success-text)!important;border:1px solid color-mix(in srgb,var(--primary) 30%,transparent)!important;}
.fa.info,.alert.info{background:var(--info-soft)!important;color:var(--info-text)!important;border:1px solid color-mix(in srgb,var(--info) 25%,transparent)!important;}
.alert.warn,.alert-warn,.fa.warn{background:var(--warning-soft)!important;color:var(--warning-text)!important;border:1px solid color-mix(in srgb,var(--warning) 30%,transparent)!important;}

/* ── 6. TOOLBARS ───────────────────────────────────────────────────────── */
.flow-indicator{background:transparent!important;color:var(--text-secondary)!important;border:0!important;border-radius:0!important;
  padding:0 0 8px!important;margin-bottom:8px!important;border-bottom:1px solid var(--border)!important;font-size:11.5px!important;gap:6px!important;}
.flow-step{background:var(--surface-2)!important;color:var(--text-secondary)!important;padding:2px 9px!important;font-size:11px!important;border:1px solid var(--border);}
.flow-step.current{background:var(--primary-soft)!important;color:var(--primary-hover)!important;border-color:transparent;}
html[data-theme="dark"] .flow-step.current{color:#BBF7D0!important;}
.flow-arrow{opacity:.5!important;color:var(--text-muted);}
.flow-policy{background:var(--surface-2)!important;color:var(--text-secondary)!important;border:1px solid var(--border)!important;}

.stage-strip{gap:4px!important;margin-bottom:10px!important;align-items:center;}
.stage-strip-label{font-size:10px!important;margin-right:4px;}
.stage-chip,.bucket,.tab,.dtab,.lc-chip,.chip{min-height:28px;padding:0 10px!important;border-radius:6px!important;font-size:12px!important;font-weight:500!important;
  background:var(--surface)!important;border:1px solid var(--border)!important;color:var(--text-secondary)!important;box-shadow:none!important;transform:none!important;
  transition:background var(--ease),border-color var(--ease),color var(--ease);display:inline-flex;align-items:center;gap:6px;}
.stage-chip:hover,.bucket:hover,.tab:hover,.dtab:hover,.lc-chip:hover{background:var(--surface-2)!important;color:var(--text)!important;}
.stage-chip.active,.stage-chip.active.s-all,.bucket.active,.tab.active,.dtab.active,.lc-chip.on,.chip.on{
  background:var(--primary-soft)!important;color:var(--primary-hover)!important;border-color:color-mix(in srgb,var(--primary) 40%,transparent)!important;font-weight:600!important;}
html[data-theme="dark"] :is(.stage-chip.active,.bucket.active,.tab.active,.dtab.active,.lc-chip.on){color:#BBF7D0!important;}
.chip-count,.b-count{background:var(--surface-3)!important;color:var(--text-secondary)!important;font-size:10.5px!important;padding:0 6px!important;border-radius:999px!important;font-weight:600!important;}
.stage-chip.active .chip-count,.bucket.active .b-count{background:var(--primary)!important;color:var(--on-primary)!important;}

.filter-bar,.search-row,.stats-bar{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;margin-bottom:10px!important;
  gap:6px!important;box-shadow:none!important;}
.filter-divider{background:var(--border)!important;height:20px!important;}
.search-wrap{min-width:200px;max-width:420px;}
.search-wrap input{min-height:30px!important;padding:4px 10px 4px 30px!important;border-radius:6px!important;font-size:12.5px!important;
  background:var(--surface)!important;border:1px solid var(--border-strong)!important;color:var(--text)!important;}
.search-wrap .si,.search-wrap .search-icon{left:10px!important;font-size:12px!important;color:var(--text-muted)!important;filter:grayscale(1);opacity:.8;}
.search-wrap.gt-has-kbd input{padding-right:52px!important;}
.search-wrap.gt-has-kbd::after{content:attr(data-kbd);position:absolute;right:7px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--text-muted);
  border:1px solid var(--border);border-radius:4px;padding:0 4px;line-height:16px;background:var(--surface-2);pointer-events:none;font-family:var(--font-ui);}
.search-drop{background:var(--surface)!important;border:1px solid var(--border)!important;box-shadow:var(--shadow-md)!important;border-radius:8px!important;}

.summary-chips{display:flex!important;flex-wrap:wrap;gap:1px!important;margin-bottom:10px!important;border:1px solid var(--border);
  border-radius:var(--r-section);background:var(--border)!important;overflow:hidden;}
.s-chip{flex:1 1 auto;background:var(--surface)!important;border:0!important;border-radius:0!important;padding:6px 12px!important;font-size:12px!important;
  color:var(--text-secondary);min-height:34px;white-space:nowrap;}
.s-chip-val{color:var(--text)!important;font-weight:600!important;font-size:12.5px;}
.tabs{gap:4px!important;border-bottom:1px solid var(--border);padding-bottom:6px;margin-bottom:10px!important;}
.cols-popover{background:var(--surface)!important;border:1px solid var(--border)!important;box-shadow:var(--shadow-md)!important;border-radius:8px!important;}

/* ── 7. TABLES ─────────────────────────────────────────────────────────── */
.table-card,.panel-card,.ledger{background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:var(--r-section)!important;box-shadow:none!important;}
.thr,.table-head-row,.panel-head{padding:8px 12px!important;border-bottom:1px solid var(--border)!important;min-height:40px;gap:10px;}
.tt,.table-title,.panel-title,.card-title,.section-title,.rp-title,.sc-title{font-family:var(--font-ui)!important;font-size:13px!important;font-weight:650!important;color:var(--text)!important;letter-spacing:0;}
.tc,.table-count,.card-sub{font-size:11px!important;color:var(--text-muted)!important;margin-top:1px!important;}
.tw,.table-wrap,.dtw{overflow-x:auto;}
:is(.main,.overlay,.modal-ov) table:not(.pi-table){width:100%;table-layout:auto;border-collapse:collapse;font-size:12.5px!important;}
:is(.main,.overlay,.modal-ov) table:not(.pi-table) > thead > tr > th{height:var(--th-h);padding:5px 8px!important;background:var(--surface-2)!important;color:var(--text-secondary)!important;
  font-size:10.5px!important;font-weight:600!important;letter-spacing:.04em!important;border-bottom:1px solid var(--border)!important;white-space:nowrap;vertical-align:middle;}
:is(.main,.overlay,.modal-ov) table:not(.pi-table) > thead > tr > th:first-child,
:is(.main,.overlay,.modal-ov) table:not(.pi-table) > tbody > tr > td:first-child{padding-left:12px!important;}
:is(.main,.overlay,.modal-ov) table:not(.pi-table) > thead > tr > th:last-child,
:is(.main,.overlay,.modal-ov) table:not(.pi-table) > tbody > tr > td:last-child{padding-right:12px!important;}
:is(.main,.overlay,.modal-ov) table:not(.pi-table) > tbody > tr{border-bottom:1px solid var(--border)!important;transition:background var(--ease);}
:is(.main,.overlay,.modal-ov) table:not(.pi-table) > tbody > tr:last-child{border-bottom:0!important;}
:is(.main,.overlay,.modal-ov) table:not(.pi-table) > tbody > tr:hover{background:var(--row-hover)!important;}
:is(.main,.overlay,.modal-ov) table:not(.pi-table) > tbody > tr > td{padding:6px 8px!important;height:var(--row-h);vertical-align:middle;
  overflow-wrap:break-word;word-break:normal;}
:is(.main,.overlay,.modal-ov) table:not(.pi-table) > tfoot td{padding:7px 8px!important;background:var(--surface-2)!important;color:var(--text)!important;
  border-top:1px solid var(--border-strong)!important;font-size:12.5px!important;}
/* numbers never wrap; long free text clamps to two lines (full value on hover) */
:is(.main,.overlay,.modal-ov) table td.right,:is(.main,.overlay,.modal-ov) table th.right,
:is(.main,.overlay,.modal-ov) table td.tm,:is(.main,.overlay,.modal-ov) table td.td{white-space:nowrap;overflow-wrap:normal;}
td.right,th.right{font-variant-numeric:tabular-nums;}
.gt-clamp,:is(.main,.overlay) td .pe-trunc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.td,.td-dim{color:var(--text-muted)!important;font-size:12px!important;}
.tm,.td-mono{font-size:12px!important;}
.empty-box,.empty-state,.empty{padding:28px 16px!important;color:var(--text-muted)!important;font-size:12.5px;}
.empty-icon{font-size:26px!important;margin-bottom:6px!important;opacity:.35!important;filter:grayscale(1);}
.row-actions{gap:4px!important;}
table.grid th{background:var(--surface-2)!important;color:var(--text-secondary)!important;}
table.grid td{border-color:var(--border)!important;}
table.grid input:focus,table.grid select:focus{background:var(--primary-softer)!important;box-shadow:inset 0 0 0 2px var(--primary)!important;}
.mini-table,.rate-table,.access-table,.al-table{font-size:12px!important;}

/* ── 8. BADGES ─────────────────────────────────────────────────────────── */
.b,.sb,.badge,.pill,.pe-pill,.ov-pill,.rate-pill,.det-cover-pill,
[class^="bs-"],[class*=" bs-"],[class^="ds-"],[class*=" ds-"],[class^="ps-"],[class*=" ps-"],[class^="st-"],[class*=" st-"],
[class^="paySt-"],[class*=" paySt-"]{
  font-size:10.5px!important;font-weight:600!important;letter-spacing:.02em!important;padding:1px 7px!important;border-radius:999px!important;
  line-height:1.55!important;text-transform:none!important;white-space:nowrap;}
.b,.sb,.badge,.pill{display:inline-flex;align-items:center;gap:4px;}
/* semantic palette */
.b-primary{background:var(--primary-soft)!important;color:var(--primary-hover)!important;}
.b-green,.bs-paid,.ds-approved,.ps-done,.st-paid,.st-completed,.st-closed,.paySt-paid,.is-paid,.badge-active,.bs-fullybilled,.acc-yes,.sb.s-paid{
  background:var(--primary-soft)!important;color:var(--success-text)!important;border:0!important;}
.b-amber,.bs-draft,.ds-pending,.ps-on_hold,.st-partial,.paySt-partial,.is-partial,.bs-partial,.sb.s-pending,.badge-pending,.ps-for_schedule,.acc-ro{
  background:var(--warning-soft)!important;color:var(--warning-text)!important;border:0!important;}
.bs-billed,.ds-submitted,.ps-in_schedule,.ps-ongoing,.st-initial,.is-issued,.bs-invoiced{background:var(--info-soft)!important;color:var(--info-text)!important;border:0!important;}
.bs-cancelled,.ds-rejected,.ps-cancelled,.st-cancelled,.paySt-cancelled,.is-cancelled,.is-overdue,.paySt-unpaid,.badge-inactive,.acc-no{
  background:var(--danger-soft)!important;color:var(--danger-text)!important;border:0!important;}
.ds-draft,.bs-notbilled,.is-draft,.st-adjusted{background:var(--surface-3)!important;color:var(--text-secondary)!important;border:0!important;}
.bs-invoiced{background:var(--violet-soft)!important;color:var(--violet)!important;}
html[data-theme="dark"] .b-primary{color:#BBF7D0!important;}
.badge-superadmin,.badge-admin{background:var(--strong)!important;color:var(--on-strong)!important;}
.badge-sales,.badge-finance,.badge-billing,.badge-user{background:var(--surface-3)!important;color:var(--text-secondary)!important;}

/* ── 9. SECTIONS, CARDS, KPI ───────────────────────────────────────────── */
.card,.panel,.setup-box,.policy-card,.pe-link-card,.so-pick-card,.pw-change-box{background:var(--surface)!important;border:1px solid var(--border)!important;
  border-radius:var(--r-card)!important;box-shadow:none!important;}
.card-head,.ch{padding:8px 12px!important;border-bottom:1px solid var(--border)!important;min-height:40px;}
.card-body,.cb,.panel-body,.panel-content{padding:10px 12px!important;}
.section{margin-bottom:14px!important;}
.section-head{margin-bottom:8px!important;align-items:center!important;}
.section-sub{font-size:11.5px!important;color:var(--text-muted)!important;margin-top:1px!important;line-height:1.4!important;max-width:none!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.section-head > div:first-child{min-width:0;flex:1;}
.note{background:var(--surface-2)!important;border:1px solid var(--border)!important;border-radius:6px!important;padding:8px 10px!important;font-size:12px!important;}
.note b{color:var(--text)!important;}
.grid-2{gap:12px!important;}

/* KPI / stat blocks → compact joined strip */
.kpi-grid,.stats-grid,.stat-grid{gap:0!important;border:1px solid var(--border);border-radius:var(--r-section);background:var(--surface);overflow:hidden;}
.kpi,.stat-card{background:var(--surface)!important;border:0!important;border-right:1px solid var(--border)!important;border-radius:0!important;box-shadow:none!important;
  padding:10px 14px!important;min-height:72px;transform:none!important;}
.kpi:last-child,.stat-card:last-child{border-right:0!important;}
.stat-card::before,.stat-card::after{display:none!important;}
.kpi.accent{background:var(--primary-softer)!important;}
.kpi.accent *{color:inherit;}
.kpi-label,.stat-lbl,.stat-label{font-size:10.5px!important;font-weight:600!important;letter-spacing:.05em!important;text-transform:uppercase;color:var(--text-muted)!important;}
.kpi-value,.stat-val,.stat-value,.counter-val{font-family:var(--font-ui)!important;font-size:19px!important;font-weight:650!important;color:var(--text)!important;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.25!important;}
.kpi-sub{font-size:11px!important;color:var(--text-muted)!important;}
.kpi-icon,.stat-icon{width:26px!important;height:26px!important;font-size:13px!important;border-radius:6px!important;filter:grayscale(.3);}
.counter-val{background:var(--surface-2)!important;color:var(--text)!important;}

/* amount strip (formerly navy) */
.astrip{background:var(--surface-2)!important;border:1px solid var(--border);border-radius:var(--r-section)!important;padding:8px 12px!important;gap:18px!important;margin-top:8px!important;}
.ait .al{color:var(--text-muted)!important;font-size:10px!important;margin-bottom:2px!important;}
.ait .av{color:var(--text)!important;font-size:14px!important;font-family:var(--font-mono)!important;font-variant-numeric:tabular-nums;}
.ait .av.gold{color:var(--primary)!important;}

/* detail grids */
.dgrid,.detail-grid{gap:0 16px!important;margin-bottom:10px!important;}
.di,.detail-item{padding:6px 0!important;border-bottom:1px solid var(--border)!important;min-width:0;}
.dil,.detail-label{font-size:10px!important;margin-bottom:1px!important;color:var(--text-muted)!important;}
.div-val,.detail-val{font-size:12.5px!important;color:var(--text)!important;overflow-wrap:anywhere;}
.detail-section-title,.field-group-label{font-size:11px!important;font-weight:700!important;letter-spacing:.06em!important;color:var(--text)!important;
  border-bottom:1px solid var(--border)!important;padding-bottom:4px!important;margin:12px 0 8px!important;}

/* SO pick lists */
.so-list{border-color:var(--border)!important;border-radius:var(--r-section)!important;}
.so-row{padding:7px 10px!important;border-color:var(--border)!important;}
.so-row:hover{background:var(--row-hover)!important;}
.so-pick-card{padding:8px 10px!important;}
.so-pick-card.selected{background:var(--primary-softer)!important;border-color:var(--primary)!important;}
.so-pick-num,.so-pick-amt{font-size:13px!important;color:var(--text)!important;}

/* notes thread / audit */
.note-item{border-color:var(--border)!important;}
.toast{background:var(--strong)!important;color:var(--on-strong)!important;border-radius:8px!important;box-shadow:var(--shadow-md)!important;font-size:12.5px!important;}

/* detail header blocks (clients / users) */
.client-detail-header,.user-detail-header{background:var(--surface-2)!important;color:var(--text)!important;border:1px solid var(--border);
  border-radius:var(--r-section)!important;padding:10px 12px!important;}
.client-detail-header *,.user-detail-header *{color:inherit;}
.cdh-name{font-family:var(--font-ui)!important;font-size:15px!important;font-weight:650!important;}
.cdh-sub{color:var(--text-muted)!important;font-size:11.5px!important;}
.udh-avatar,.uc-avatar{background:var(--primary-soft)!important;color:var(--primary-hover)!important;border:0!important;}
[class^="ava-"],[class*=" ava-"]{border:0!important;}

/* settings left nav */
.settings-nav{background:transparent!important;border:0!important;padding:0!important;gap:1px!important;}
.snav-item{height:30px;padding:0 10px!important;border-radius:6px!important;font-size:12.5px!important;color:var(--text-secondary)!important;background:transparent!important;
  border:0!important;display:flex;align-items:center;gap:8px;}
.snav-item:hover{background:var(--surface-3)!important;color:var(--text)!important;}
.snav-item.active{background:var(--primary-soft)!important;color:var(--primary-hover)!important;font-weight:600!important;}
html[data-theme="dark"] .snav-item.active{color:#BBF7D0!important;}

/* ── 10. MODALS ────────────────────────────────────────────────────────── */
.overlay,.modal-ov,.modal-overlay{background:rgba(10,16,12,.45)!important;backdrop-filter:blur(2px)!important;padding:2vh 1.5vw!important;}
html[data-theme="dark"] :is(.overlay,.modal-ov,.modal-overlay){background:rgba(0,0,0,.6)!important;}
.overlay .modal,.modal-ov .modal,.modal-overlay .modal{
  background:var(--surface)!important;border:1px solid var(--border);border-radius:var(--r-workspace)!important;box-shadow:var(--shadow-lg)!important;
  max-height:96vh;overflow:auto;overscroll-behavior:contain;animation:gtModalIn .15s ease!important;
  /* standard modal */ max-width:min(860px,96vw);}
@keyframes gtModalIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
/* header / body / footer: sticky header & footer, body scrolls with the modal */
.mh,.modal-head,.modal-header{position:sticky!important;top:0;z-index:20;background:var(--surface)!important;
  padding:10px 16px!important;border-bottom:1px solid var(--border)!important;border-radius:var(--r-workspace) var(--r-workspace) 0 0!important;
  align-items:center!important;gap:8px;min-height:48px;}
.mh h2,.modal-head h2,.modal-header h2,.mh h3,.modal-head h3{font-family:var(--font-ui)!important;font-size:15px!important;font-weight:650!important;color:var(--text)!important;letter-spacing:-.005em;}
.mh .ms,.modal-head .modal-sub,.modal-sub{font-size:11.5px!important;color:var(--text-muted)!important;margin-top:1px!important;}
.mb,.modal-body{padding:14px 16px!important;}
.mf,.modal-footer{position:sticky!important;bottom:0;z-index:20;background:var(--surface)!important;padding:8px 16px!important;gap:8px!important;
  border-top:1px solid var(--border)!important;border-radius:0 0 var(--r-workspace) var(--r-workspace)!important;align-items:center;}
.mh > div:last-child,.modal-head > div:last-child{display:flex;align-items:center;gap:2px;}

/* complex modals (detail views & editors) */
.overlay .modal.wide,.overlay .modal.lg,#detOv .modal,#peOv .modal,#peFmOv .modal{max-width:min(1200px,96vw)!important;}
/* Workspace — the ⤢ maximized state: a deliberate full workspace (96vw × 92vh) */
.overlay .modal.max,.modal-ov .modal.max{width:96vw!important;max-width:96vw!important;min-height:92vh;max-height:96vh;}
.modal.max .fg{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))!important;}
.modal.max .fg.c3{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))!important;}
.modal.max .dgrid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important;}
.modal.max .mb{padding:14px 18px!important;}

/* ── 11. MODULE LAYOUT ─────────────────────────────────────────────────── */
/* Sales Order / Quotation editor: opens as a complex workspace modal even
   before ⤢; maximized it becomes the two-pane 96vw × 92vh workspace
   (record context left, Scope → Price → Terms right). */
#fmOv .modal{max-width:min(1280px,96vw)!important;}
#fmOv .modal.max,#detOv .modal.max{width:96vw!important;max-width:96vw!important;}
.modal.max .det-cols,.modal.max .form-cols{grid-template-columns:minmax(280px,340px) minmax(0,1fr)!important;gap:18px!important;}
.modal.max .form-left,.modal.max .det-left{position:sticky;top:58px;align-self:start;max-height:calc(92vh - 120px);overflow:auto;padding-right:6px;}
.modal.max .form-right,.modal.max .det-right{min-width:0;border-left:1px solid var(--border);padding-left:18px;}

/* Scope-of-Work builder (block-editor feel) */
.sc-sec{border:1px solid var(--border)!important;border-radius:var(--r-section)!important;background:var(--surface)!important;margin-bottom:8px!important;box-shadow:none!important;}
.sc-head{padding:6px 8px!important;gap:6px!important;background:var(--surface-2)!important;border-bottom:1px solid var(--border)!important;border-radius:var(--r-section) var(--r-section) 0 0;}
.sc-head input{min-height:28px!important;padding:3px 8px!important;border-radius:5px!important;font-weight:600;background:var(--surface)!important;}
.sc-num{font-family:var(--font-mono)!important;font-weight:600!important;color:var(--text-secondary)!important;font-size:12px!important;}
.sc-body{padding:6px 8px 8px!important;}
.sc-item{gap:6px!important;padding:1px 0!important;}
.sc-item input{min-height:28px!important;padding:3px 8px!important;border-radius:5px!important;font-size:12.5px!important;border-color:transparent!important;background:transparent!important;}
.sc-item input:hover{border-color:var(--border)!important;background:var(--surface)!important;}
.sc-item input:focus{border-color:var(--primary)!important;background:var(--surface)!important;}
.sc-ib,.sc-add,.lm-btn{border-radius:5px!important;font-size:11.5px!important;}
.sc-item .sc-ib,.sc-head .sc-ib{opacity:.35;transition:opacity var(--ease);}
.sc-item:hover .sc-ib,.sc-head:hover .sc-ib,.sc-ib:focus{opacity:1;}
.sc-toolbar{gap:6px!important;margin-bottom:8px!important;}
.sc-amt-in{min-height:28px!important;font-family:var(--font-mono)!important;text-align:right;font-variant-numeric:tabular-nums;}
.sc-mode{min-height:28px;border-radius:5px!important;border-width:1px!important;background:var(--surface)!important;}
.sc-legacy,.sc-paste{background:var(--surface-2)!important;border:1px dashed var(--border-strong)!important;border-radius:6px!important;}
.sc-price-h,.sc-pr-note{font-size:11px!important;color:var(--text-muted)!important;}
.sc-pr-row input{min-height:28px!important;padding:3px 7px!important;border-radius:5px!important;border-width:1px!important;}
.li-mode-toggle,.li-cover{font-size:11px!important;}
.det-scope-sec{border-color:var(--border)!important;border-radius:6px!important;}

/* Price table in the editor — spreadsheet-like */
.dt th{background:var(--surface-2)!important;}
.dt td{padding:3px 5px!important;}
.dt input,.dt select{min-height:28px!important;padding:3px 7px!important;border-radius:4px!important;font-size:12.5px!important;border-width:1px!important;}
.dt input[type=number],.no-spin{font-variant-numeric:tabular-nums;text-align:right;}

/* Project Execution workspace */
.pe-cols{gap:16px!important;}
.pe-link-card{padding:8px 10px!important;}
.pe-pill.dark{background:var(--strong)!important;color:var(--on-strong)!important;}
.prog{border-radius:999px!important;background:var(--surface-3)!important;}
.statusbar{background:var(--surface-2)!important;color:var(--text)!important;border:1px solid var(--border)!important;border-radius:var(--r-section)!important;}
.statusbar *{color:inherit;}

/* SO Import grid (spreadsheet) */
.gridwrap{border:1px solid var(--border)!important;border-radius:var(--r-section)!important;background:var(--surface)!important;}

/* Users/permissions */
.role-row,.at-row{border-color:var(--border)!important;}
.rp-perm{background:var(--surface-2)!important;color:var(--text)!important;}
.perm-cb{accent-color:var(--primary);}
.ov-allow{color:var(--success-text)!important;} .ov-deny{color:var(--danger-text)!important;}

/* ── 12. DASHBOARD / REPORTS ───────────────────────────────────────────── */
.flow{gap:0!important;border:1px solid var(--border);border-radius:var(--r-section);background:var(--surface);overflow:hidden;}
.flow-stage{border:0!important;border-right:1px solid var(--border)!important;border-radius:0!important;padding:10px 14px!important;background:var(--surface)!important;}
.flow-stage:last-child{border-right:0!important;}
.fs-step{color:var(--primary)!important;font-size:10px!important;letter-spacing:.06em!important;margin-bottom:1px!important;}
.fs-label{font-family:var(--font-ui)!important;font-size:12px!important;font-weight:600!important;color:var(--text-secondary)!important;margin-bottom:4px!important;}
.fs-value{font-family:var(--font-ui)!important;font-size:19px!important;font-weight:650!important;color:var(--text);font-variant-numeric:tabular-nums;}
.fs-track,.age-track{background:var(--surface-3)!important;height:5px!important;margin:6px 0 5px!important;}
.fs-meta,.fs-explain,.age-note,.stage-note,.unapp-meta{font-size:10.5px!important;color:var(--text-muted)!important;}
.fs-explain{margin-top:5px!important;padding-top:5px!important;line-height:1.4!important;}
.fs-gap{margin-top:4px!important;font-size:11px!important;}
.att,.unapp-row,.age-row{padding:6px 0!important;gap:10px!important;border-color:var(--border)!important;}
.att-txt,.unapp-txt{font-size:12px!important;line-height:1.4!important;}
.att-amt,.unapp-amt,.age-val{font-family:var(--font-mono)!important;font-size:12px!important;color:var(--text)!important;font-variant-numeric:tabular-nums;}
.age-lbl{color:var(--text)!important;font-size:12px!important;}
.unapp-days{background:var(--warning-soft)!important;color:var(--warning-text)!important;}
.unapp-days.old{background:var(--danger-soft)!important;color:var(--danger-text)!important;}
.dot{width:8px!important;height:8px!important;background:var(--border-strong);}
.dot.done{background:var(--primary)!important;} .dot.partial{background:var(--warning)!important;} .dot.stuck{background:var(--danger)!important;}
.so-id{color:var(--text)!important;font-size:12px!important;}

/* ── 13. LOGIN / PENDING / 404 ─────────────────────────────────────────── */
body .page .left-panel{background:#12301E!important;}
body .page .left-panel::before{background:radial-gradient(ellipse 70% 50% at 20% 80%,rgba(34,197,94,.14) 0%,transparent 60%)!important;}
.deco-ring{border-color:rgba(134,239,172,.14)!important;}
.deco-dots span{background:#86EFAC!important;}
.right-panel{background:var(--surface)!important;}
.hero-text,.hero-text *{font-family:var(--font-ui)!important;letter-spacing:-.01em;}
.feature-pills span,.feature-pills .pill{background:rgba(255,255,255,.08)!important;color:#DCFCE7!important;border-color:rgba(255,255,255,.14)!important;}
.form-header h2,.form-container h2{font-family:var(--font-ui)!important;color:var(--text)!important;letter-spacing:-.01em;}
.form-container .f-group input,.form-container .f-group select{min-height:38px;}
.form-container .btn,.form-container button[type=submit]{min-height:38px;}
.boot-card{background:var(--surface)!important;border:1px solid var(--border)!important;box-shadow:var(--shadow-md)!important;border-radius:10px!important;}
.version-tag{color:var(--text-muted)!important;}

/* ── 14. RESPONSIVE ────────────────────────────────────────────────────── */
@media (min-width:1400px){
  .form-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (max-width:1399px){
  .form-grid,.form-grid-4{grid-template-columns:repeat(3,minmax(0,1fr));}
  .topbar-left p{display:none;}
}
@media (max-width:1099px){
  .form-grid,.form-grid-4,.form-grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .gt-crumb{display:none;}
  .topbar-right .btn .gt-lbl{display:none;}
  .modal.max .det-cols,.modal.max .form-cols{display:block!important;}
  .modal.max .form-left,.modal.max .det-left{position:static;max-height:none;overflow:visible;}
  .modal.max .form-right,.modal.max .det-right{border-left:0;padding-left:0;}
  .flow{grid-template-columns:repeat(2,1fr)!important;}
  .flow-stage:nth-child(2){border-right:0!important;}
  .flow-stage:nth-child(-n+2){border-bottom:1px solid var(--border)!important;}
}
@media (max-width:799px){
  :root{--sidebar-w:var(--sidebar-w-collapsed);--content-px:10px;}
  .sidebar .brand-name,.sidebar .nav-section-label,.sidebar .user-info-text,.sidebar .gt-theme,.gt-collapse{display:none!important;}
  .sidebar-logo{justify-content:center;padding:10px 6px!important;}
  .sidebar-nav{padding:6px;}
  .nav-item{justify-content:center;padding:0!important;font-size:0!important;gap:0!important;}
  .nav-item .nav-icon{font-size:15px!important;}
  .nav-item > :not(.nav-icon){display:none!important;}
  .btn-logout{font-size:0!important;padding:0!important;}
  .btn-logout::before{content:'⏻';font-size:13px;}
  .form-grid,.form-grid-2,.form-grid-3,.form-grid-4,.fg,.fg.c3{grid-template-columns:1fr!important;}
  .topbar{overflow-x:auto;}
  .topbar-right .btn-outline:not(#notifBell){padding:0 8px!important;}
  .overlay .modal,.overlay .modal.max{width:100%!important;max-width:100%!important;}
}

/* ── 15. PRINT ─────────────────────────────────────────────────────────── */
@media print{
  html,html[data-theme="dark"]{
    color-scheme:light;
    --bg:#fff; --surface:#fff; --surface-2:#f5f6f5; --surface-3:#eeeeee; --row-hover:transparent;
    --border:#dddddd; --border-strong:#cccccc; --text:#111111; --text-secondary:#444444; --text-muted:#666666;
    --primary:#15803D; --primary-soft:#e7f6ec; --danger-soft:#fdeaea; --warning-soft:#fff5dc; --info-soft:#e8effd;
    --strong:#222; --on-strong:#fff;
  }
  html,body{background:#fff!important;} /* printouts on plain white (client request) */
  #printSO,#printInvoice,#printSO .pi-doc-page,#printInvoice .pi-doc-page{background:#fff!important;}
  /* Reported: a quotation printed only its first page. On screen html/body
     are a fixed-height scroll area (viewport height, overflow-y:auto); in
     print that clipped everything after the first screenful. Let the page
     grow to its full length. */
  html,body{height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;}
  .main{margin-left:0!important;width:100%!important;}
  .sidebar,.gt-tip,.gt-collapse{display:none!important;}
}

/* ── 11b. Dense flowing form sections (SO / Quotation editor) ──────────────
   Each numbered section becomes one grid; its row-groups (.fg) dissolve
   (display:contents) so fields flow into as many columns as the width
   allows instead of leaving half-empty rows. Purely visual — same fields,
   same DOM order, same ids. Full-width fields keep .full. */
#fmOv .fsec{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px 12px;align-items:start;}
#fmOv .fsec > *{grid-column:1/-1;}
#fmOv .fsec > .fg{display:contents;}
#fmOv .fsec > .fg > .fl,#fmOv .fsec > .fl{grid-column:auto;}
#fmOv .fsec > .fg > .fl.full,#fmOv .fsec > .fl.full,#fmOv .fsec .fl.full{grid-column:1/-1;}
#fmOv .fsec > .fsh{margin-bottom:0!important;}
#fmOv .fsec > details{margin-top:0!important;}
#fmOv .fsec > details > .fg{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))!important;}
/* maximized: narrow left context pane → two compact columns */
#fmOv .modal.max .form-left .fsec{grid-template-columns:repeat(2,minmax(0,1fr));}
#fmOv .modal.max .form-left details > .fg{grid-template-columns:1fr 1fr!important;}
/* price table: spreadsheet-like */
#liTable > thead > tr > th{font-size:10.5px!important;}
#liTable td{padding:3px 5px!important;height:auto!important;}
#liTable input,#liTable select,#liTable textarea{min-height:28px;padding:3px 7px!important;border-radius:4px!important;font-size:12.5px!important;border:1px solid var(--border)!important;background:var(--surface)!important;}
#liTable input:hover{border-color:var(--border-strong)!important;}
#fmOv .fl > div[style*="display:flex"] > input{min-width:0;}
#fmOv .fsec .fl:has(#fQN){grid-column:span 2;}
#fmOv .fsec .fl.full:has(#fCustDisplay){grid-column:span 3;}
#fmOv .fsec .fl.full:has(#fEmail){grid-column:span 2;}
#fmOv .modal.max .form-left .fsec .fl:has(#fQN),
#fmOv .modal.max .form-left .fsec .fl.full:has(#fCustDisplay),
#fmOv .modal.max .form-left .fsec .fl.full:has(#fEmail){grid-column:1/-1;}
@media (max-width:1099px){#fmOv .fsec .fl:has(#fQN),#fmOv .fsec .fl.full:has(#fCustDisplay),#fmOv .fsec .fl.full:has(#fEmail){grid-column:1/-1;}}
/* Project Execution (#fmOv there too) — maximized two-pane workspace */
.modal.max .pe-cols{grid-template-columns:minmax(290px,360px) minmax(0,1fr)!important;gap:18px!important;}
.modal.max .pe-left{position:sticky;top:58px;align-self:start;max-height:calc(92vh - 120px);overflow:auto;padding-right:6px;}
.modal.max .pe-right{min-width:0;border-left:1px solid var(--border);padding-left:18px;}
#fmOv .modal.max .pe-left .fsec{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:1099px){.modal.max .pe-left{position:static;max-height:none;overflow:visible;}.modal.max .pe-right{border-left:0;padding-left:0;}}
/* In modal footers the gold button is the primary commit action (Submit, Save Project…) */
:is(.mf,.modal-footer) .btn-gold{background:var(--primary)!important;color:var(--on-primary)!important;border-color:var(--primary)!important;}
:is(.mf,.modal-footer) .btn-gold:hover{background:var(--primary-hover)!important;}
/* IDs, references and row actions never wrap mid-token */
:is(.main,.overlay) table td :is(.tm,.so-id,a[onclick],a[href*="html"]),
:is(.main,.overlay) table td.tm,
:is(.main,.overlay) table td[class*="num"]{white-space:nowrap;}
:is(.main,.overlay) table > tbody > tr > td:last-child:has(> .btn, > button, > .row-actions, > div > .btn){white-space:nowrap;}
:is(.main,.overlay) table > tbody > tr > td:last-child > :is(.btn,button){margin:1px 0;}
.search-wrap.gt-has-kbd{position:relative;}

/* ── Dark mode: hard-coded pastel colours inside page scripts' inline styles.
   Mapped to semantic tokens (only on screen, never inside print containers). ── */
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background:#fff"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background: #fff"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background:#ffffff"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background: #ffffff"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background:#eceff3"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background: #eceff3"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background:#f2f0ea"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background: #f2f0ea"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background:#f0ede5"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background: #f0ede5"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background:#f5f3ee"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background: #f5f3ee"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background:#dbe2ec"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background: #dbe2ec"]{background:var(--surface-2)!important;color:var(--text)!important;}
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background:#fff3cd"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background: #fff3cd"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background:#fff4e0"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background: #fff4e0"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background:#fff3e0"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background: #fff3e0"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background:#ffe08a"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background: #ffe08a"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background:#fbf7e9"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background: #fbf7e9"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background:#fff0e6"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background: #fff0e6"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background:#ffe0a3"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background: #ffe0a3"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background:#f0d98a"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background: #f0d98a"]{background:var(--warning-soft)!important;color:var(--warning-text)!important;border-color:transparent!important;}
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background:#ffebee"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background: #ffebee"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background:#ffeaea"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background: #ffeaea"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background:#ffcdd2"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background: #ffcdd2"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background:#f3c2c2"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background: #f3c2c2"]{background:var(--danger-soft)!important;color:var(--danger-text)!important;border-color:transparent!important;}
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background:#e8f0fc"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background: #e8f0fc"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background:#b9cdf0"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background: #b9cdf0"]{background:var(--info-soft)!important;color:var(--info-text)!important;border-color:transparent!important;}
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background:#e8faf3"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="background: #e8faf3"]{background:var(--primary-soft)!important;color:var(--success-text)!important;border-color:transparent!important;}
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="color:#8a6100"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="color:#a86a00"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="color:#7a4000"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="color:#7a5a00"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="color:#b8791f"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="color:#a07300"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="color:#8a7a4a"]{color:var(--warning-text)!important;}
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="color:#b71c1c"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="color:#b23a3a"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="color:#c0392b"]{color:var(--danger-text)!important;}
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="color:#0a47a0"]{color:var(--info-text)!important;}
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="color:#1a7a4c"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="color:#1a7a3d"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="color:#1a9c68"]{color:var(--success-text)!important;}
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="color:#5b6272"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="color:#555c6e"]{color:var(--text-secondary)!important;}
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="color:#0f1e3c"],
html[data-theme="dark"] :is(.layout,.overlay,.modal-ov) [style*="color:#1a1f2e"]{color:var(--text)!important;}
/* short tokens (dates, amounts) flagged by gastek-theme.js never wrap */
td.gt-nowrap{white-space:nowrap!important;}
@media (max-width:1279px){
  .topbar{height:auto!important;min-height:var(--topbar-h);flex-wrap:wrap!important;padding-top:6px!important;padding-bottom:6px!important;row-gap:6px!important;}
  .topbar-left{flex:1 1 220px;}
  .topbar-right{flex-wrap:wrap!important;flex-shrink:1;justify-content:flex-end;}
}
.pe-pill.muted{background:var(--surface-3)!important;color:var(--text-secondary)!important;border:0!important;}
/* keep customer / client names readable on narrow screens (table scrolls instead) */
/* free-text cells (client, project, description — flagged by gastek-theme.js)
   keep a readable width; the table scrolls inside its box instead */
:is(.main,.overlay) table > tbody > tr > td.gt-text{min-width:170px;}

/* ── 11c. Source preview side panel (New/Edit Invoice & Payment) ──────────
   The form stays on the left; a read-only summary of the linked Billing /
   Invoice / Sales Order sits on the right and scrolls with the modal. */
#fmOv .modal:has(.src-layout){max-width:min(1240px,96vw)!important;}
.src-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start;}
.src-main{min-width:0;}
.src-preview{position:sticky;top:62px;align-self:start;max-height:calc(96vh - 150px);overflow:auto;
  border:1px solid var(--border);border-radius:var(--r-section);background:var(--surface-2);font-size:12px;}
.sp-top{position:sticky;top:0;z-index:1;background:var(--surface-2);padding:8px 12px;border-bottom:1px solid var(--border);
  font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);display:flex;align-items:center;gap:6px;}
.sp-top .sp-count{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:500;}
.sp-card{padding:10px 12px;border-bottom:1px solid var(--border);}
.sp-card:last-child{border-bottom:0;}
.sp-kicker{font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);margin-bottom:2px;}
.sp-title{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px;}
.sp-num{font-family:var(--font-mono);font-weight:600;font-size:13px;color:var(--text);}
.sp-st{font-size:10px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--surface-3);color:var(--text-secondary);text-transform:capitalize;}
.sp-st.ok{background:var(--primary-soft);color:var(--success-text);} .sp-st.warn{background:var(--warning-soft);color:var(--warning-text);}
.sp-st.info{background:var(--info-soft);color:var(--info-text);} .sp-st.bad{background:var(--danger-soft);color:var(--danger-text);}
.sp-cust{font-weight:600;color:var(--text);font-size:12.5px;line-height:1.35;}
.sp-sub{color:var(--text-muted);font-size:11.5px;line-height:1.4;margin-top:1px;}
.sp-kv{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin-top:8px;}
.sp-kv dt{color:var(--text-muted);white-space:nowrap;}
.sp-kv dd{margin:0;color:var(--text);text-align:right;overflow-wrap:anywhere;}
.sp-kv dd.m{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap;}
.sp-kv .sp-sep{grid-column:1/-1;border-top:1px dashed var(--border-strong);margin:3px 0;}
.sp-kv .sp-strong{font-weight:700;color:var(--text);}
.sp-kv dd.hi{color:var(--warning-text);font-weight:700;} .sp-kv dd.ok{color:var(--success-text);font-weight:700;}
.sp-part{margin-top:8px;color:var(--text-secondary);line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.sp-lines{margin-top:8px;border-top:1px solid var(--border);padding-top:6px;}
.sp-lines-h{font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);margin-bottom:3px;}
.sp-line{display:flex;gap:8px;justify-content:space-between;padding:3px 0;line-height:1.35;}
.sp-line span:first-child{color:var(--text-secondary);min-width:0;}
.sp-line span:last-child{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text);}
.sp-more{color:var(--text-muted);font-size:11px;padding-top:2px;}
.sp-empty{padding:28px 16px;text-align:center;color:var(--text-muted);line-height:1.5;}
.sp-empty b{display:block;color:var(--text-secondary);font-size:12.5px;margin-bottom:4px;}
.sp-empty .ico{font-size:22px;opacity:.45;filter:grayscale(1);margin-bottom:6px;}
.modal.max .src-layout{grid-template-columns:minmax(0,1fr) 340px;}
@media (max-width:1099px){
  .src-layout{grid-template-columns:1fr;}
  .src-preview{position:static;max-height:none;order:-1;}
}

/* ── 11d. Sales Orders / Quotations list — always fits the screen ─────────
   Fixed layout: flexible columns (Customer, Subject) share the space that's
   left, fixed-size ones get a proportional width, and every cell clips with
   an ellipsis (full value on hover) instead of pushing the table — and the
   expanded per-line ledger under a row — past the right edge. Hidden columns
   (Columns ▸) simply give their space back. */
.content table:has(> tbody#soBody){table-layout:fixed;width:100%!important;min-width:0!important;}
table:has(> tbody#soBody) > thead > tr > th{white-space:normal!important;overflow:hidden;line-height:1.25;vertical-align:middle;overflow-wrap:normal;}
table:has(> tbody#soBody) > thead > tr > th[data-col="ledgerToggle"]{width:26px!important;padding:0!important;}
table:has(> tbody#soBody) > thead > tr > th[data-col="soNumber"]{width:106px;}
table:has(> tbody#soBody) > thead > tr > th[data-col="quoteNumber"]{width:98px;}
table:has(> tbody#soBody) > thead > tr > th[data-col="date"],
table:has(> tbody#soBody) > thead > tr > th[data-col="soDate"]{width:66px;}
table:has(> tbody#soBody) > thead > tr > th[data-col="category"]{width:84px;}
table:has(> tbody#soBody) > thead > tr > th[data-col="salesAcct"]{width:64px;}
table:has(> tbody#soBody) > thead > tr > th[data-col="contractAmt"]{width:106px;}
table:has(> tbody#soBody) > thead > tr > th[data-col="schedule"]{width:88px;}
table:has(> tbody#soBody) > thead > tr > th[data-col="paymentStatus"]{width:76px;}
table:has(> tbody#soBody) > thead > tr > th[data-col="stage"]{width:88px;}
table:has(> tbody#soBody) > thead > tr > th[data-col="actions"]{width:100px;}
/* pills: tighter cell padding so "Submitted" / "Installation" aren't clipped */
#soBody > tr:not(.ledger-row) > td:is([data-col="category"],[data-col="paymentStatus"],[data-col="stage"]){padding-left:5px!important;padding-right:5px!important;}
/* customer & subject take what's left (no width set) */
#soBody > tr:not(.ledger-row) > td{overflow:hidden;text-overflow:ellipsis;min-width:0!important;}
#soBody > tr:not(.ledger-row) > td[data-col="ledgerToggle"]{padding:0!important;text-align:center;}
#soBody > tr:not(.ledger-row) > td[data-col="customer"] > *{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#soBody > tr:not(.ledger-row) > td[data-col="particulars"]{max-width:none!important;}
#soBody > tr:not(.ledger-row) > td[data-col="salesAcct"],
#soBody > tr:not(.ledger-row) > td[data-col="soNumber"],
#soBody > tr:not(.ledger-row) > td[data-col="quoteNumber"],
#soBody > tr:not(.ledger-row) > td[data-col="contractAmt"]{white-space:nowrap!important;}
/* dates & the schedule range may wrap onto two lines rather than clip */
#soBody > tr:not(.ledger-row) > td:is([data-col="date"],[data-col="soDate"],[data-col="schedule"]){white-space:normal!important;line-height:1.3;}
#soBody > tr:not(.ledger-row) > td :is(.sb,.b,.badge,.pill){max-width:100%;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:middle;}
#soBody .ra{gap:2px!important;flex-wrap:wrap;}
#soBody .ra .btn{min-height:24px;min-width:24px;padding:0 4px!important;font-size:11.5px!important;}
#soBody > tr:not(.ledger-row) > td:is([data-col="soNumber"],[data-col="quoteNumber"]){font-size:11.5px!important;}
/* the expanded ledger lives inside the table's width, never widens it */
#soBody > tr.ledger-row > td{white-space:normal!important;padding-left:14px!important;padding-right:14px!important;}
#soBody > tr.ledger-row > td > *{max-width:100%;min-width:0;}
#soBody > tr.ledger-row [style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
@media (max-width:1399px){
  table:has(> tbody#soBody) > thead > tr > th[data-col="soNumber"]{width:98px;}
  table:has(> tbody#soBody) > thead > tr > th[data-col="quoteNumber"]{width:90px;}
  table:has(> tbody#soBody) > thead > tr > th:is([data-col="date"],[data-col="soDate"]){width:58px;}
  table:has(> tbody#soBody) > thead > tr > th[data-col="category"]{width:76px;}
  table:has(> tbody#soBody) > thead > tr > th[data-col="salesAcct"]{width:56px;}
  table:has(> tbody#soBody) > thead > tr > th[data-col="contractAmt"]{width:98px;}
  #soBody > tr:not(.ledger-row) > td[data-col="contractAmt"]{font-size:11.5px!important;}
  table:has(> tbody#soBody) > thead > tr > th[data-col="schedule"]{width:72px;}
  table:has(> tbody#soBody) > thead > tr > th[data-col="paymentStatus"]{width:66px;}
  table:has(> tbody#soBody) > thead > tr > th[data-col="stage"]{width:86px;}
  table:has(> tbody#soBody) > thead > tr > th[data-col="actions"]{width:84px;}
  #soBody > tr:not(.ledger-row) > td{padding-left:5px!important;padding-right:5px!important;}
  table:has(> tbody#soBody) > thead > tr > th{padding-left:5px!important;padding-right:5px!important;font-size:10px!important;}
  #soBody > tr:not(.ledger-row) > td:is([data-col="soNumber"],[data-col="quoteNumber"],[data-col="date"],[data-col="soDate"],[data-col="schedule"]){font-size:11px!important;}
  #soBody .ra .btn{min-height:22px;min-width:22px;padding:0 3px!important;}
}
/* SO list: customer name uses up to two lines before "…" (subject stays one line) */
#soBody > tr:not(.ledger-row) > td[data-col="customer"] > strong:first-child{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  white-space:normal!important;overflow:hidden;line-height:1.3;font-size:12.5px!important;overflow-wrap:break-word;}
@media (min-width:1600px){
  table:has(> tbody#soBody) > thead > tr > th[data-col="category"]{width:104px;}
  table:has(> tbody#soBody) > thead > tr > th[data-col="salesAcct"]{width:90px;}
  table:has(> tbody#soBody) > thead > tr > th[data-col="schedule"]{width:110px;}
}

/* ── 11e. "Deduct from commission" option on write-offs ─────────────────── */
.ci-opt{margin-top:12px;border:1px solid var(--border);border-radius:var(--r-section);background:var(--surface-2);padding:10px 12px;}
.ci-opt > label{display:flex!important;align-items:flex-start;gap:8px;font-size:12.5px!important;font-weight:600!important;color:var(--text)!important;
  text-transform:none!important;letter-spacing:0!important;cursor:pointer;margin:0!important;}
.ci-opt > label input{margin-top:2px;}
.ci-opt .ci-help{font-size:11.5px;color:var(--text-muted);margin:2px 0 0 24px;line-height:1.4;}
.ci-box{margin:8px 0 0 24px;font-size:12px;border-top:1px dashed var(--border-strong);padding-top:6px;}
.ci-row{display:flex;justify-content:space-between;gap:12px;padding:2px 0;color:var(--text-secondary);}
.ci-row span:last-child{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text);}
.ci-row.ci-strong span{color:var(--text);font-weight:600;}
.ci-muted{color:var(--text-muted);font-family:var(--font-ui);}
.ci-note{font-size:11px;color:var(--text-muted);margin-top:4px;line-height:1.4;}
.ci-warn{color:var(--warning-text);}
.ci-box.on .ci-row.ci-strong:last-of-type span:last-child b{color:var(--primary);}

/* ── 11f. Line progress / origin badges (Scope billable, patch 51) ─────── */
.lp{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:999px;white-space:nowrap;vertical-align:middle;cursor:default;border:1px solid transparent;}
.lp-none{background:var(--surface-2);color:var(--text-muted);border-color:var(--border);}
.lp-billed{background:var(--info-soft);color:var(--info-text);}
.lp-inv{background:var(--violet-soft);color:var(--violet);}
.lp-part{background:var(--warning-soft);color:var(--warning-text);}
.lp-paid{background:var(--primary-soft);color:var(--primary);}
.lp-wo{background:var(--surface-2);color:var(--text-secondary);border-color:var(--border-strong);border-style:dashed;}
.lp-origin{background:var(--surface-2);color:var(--text-secondary);border-color:var(--border);font-weight:500;}

/* ── 11g. "From past sections / Price items" library dropdown ───────────── */
.lib-menu{position:fixed;z-index:4000;background:var(--surface);border:1px solid var(--border-strong);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.18);display:flex;flex-direction:column;max-height:min(420px,70vh);overflow:hidden;}
.lib-head{display:flex;flex-direction:column;gap:6px;padding:8px;border-bottom:1px solid var(--border);background:var(--surface-2);}
.lib-head input#libQ{width:100%;padding:7px 9px;border:1px solid var(--border);border-radius:6px;font-size:12.5px;background:var(--surface);color:var(--text);}
.lib-subs{display:flex!important;align-items:center;gap:6px;font-size:12px!important;font-weight:500!important;text-transform:none!important;letter-spacing:0!important;color:var(--text-secondary)!important;margin:0!important;cursor:pointer;}
.lib-list{overflow:auto;padding:4px;}
.lib-item{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;padding:7px 9px;border:0;border-radius:6px;background:transparent;cursor:pointer;color:var(--text);}
.lib-item:hover,.lib-item:focus{background:var(--primary-soft);outline:none;}
.lib-t{font-size:12.5px;font-weight:600;}
.lib-m{font-size:11px;color:var(--text-muted);}
.lib-s{font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.lib-empty{padding:14px;font-size:12px;color:var(--text-muted);text-align:center;}

/* ── 11h. Project Execution table at ≤1440 px / collapsed sidebar (UAT 11.4) ─
   19 columns don't fit at 1280 px: status pills were cut ("Pendi", "For …")
   and the COC "Pending" pill was dark-brown on brown in dark mode. Pills
   never wrap or truncate now, and the lower-priority columns step aside at
   narrower widths (all still available via ⚙ Columns / wider screens). */
table.pe-wide .pe-pill,table.pe-wide .sb{white-space:nowrap!important;max-width:none!important;overflow:visible!important;text-overflow:clip!important;}
.pe-pill.ok{background:var(--success-soft,var(--primary-soft))!important;color:var(--success-text,var(--primary))!important;}
.pe-pill.warn{background:var(--warning-soft)!important;color:var(--warning-text)!important;}
.pe-pill.info{background:var(--info-soft)!important;color:var(--info-text)!important;}
/* Columns are no longer hidden at narrow widths — the table keeps readable
   widths and scrolls sideways; resize by dragging a header edge, and pick
   columns under ⚙ Columns (gastek-table.js enableColumnResize). SO # stays
   pinned while scrolling. */
table.pe-wide{min-width:0;}
table.pe-wide [data-col="soNumber"]{position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:1px 0 0 var(--border);}
table.pe-wide thead [data-col="soNumber"]{z-index:3;background:var(--surface-2,var(--surface));}
table.pe-wide tbody tr:hover [data-col="soNumber"]{background:var(--surface-hover,var(--surface-2));}