/* ============================================================================
   IMPAL — India Motor Parts & Accessories Limited
   Light design system (Just-Klaimz style). Plain CSS, no build step.
   ========================================================================== */
:root{
  --navy:#1e2d4d; --navy-2:#16233d;
  --blue:#2563eb; --blue-600:#1d4ed8; --blue-050:#eef4ff; --blue-100:#dbe7ff;
  --bg:#f3f6fb; --panel:#ffffff; --line:#e6eaf2; --line-2:#eef1f7;
  --text:#1e293b; --muted:#64748b; --muted-2:#94a3b8;
  --good:#16a34a; --good-bg:#e9f7ef; --warn:#dc2626; --warn-bg:#fdecec;
  --amber:#d97706; --amber-bg:#fdf3e3;
  --radius:12px; --shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
  --shadow-lg:0 20px 45px rgba(16,24,40,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter','Segoe UI Variable','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  color:var(--text);background:var(--bg);min-height:100vh;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;letter-spacing:-.006em}
button,input,select{font-family:inherit}
.ico{display:block}
[data-icon]{display:inline-flex;align-items:center;justify-content:center}
/* tabular figures for all numbers */
table.grid td.num,table.grid th.num,.grid-foot .rec,.stat .s-v,.val-pill,
table.mini td.num,.chart-axis,.cell-pill{font-variant-numeric:tabular-nums}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#94a3b8;background-clip:content-box}

/* ── Login (split screen) ─────────────────────────────────────────────── */
#loginWrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;background:radial-gradient(1200px 600px at 20% -10%,#25406e 0%,#152238 40%,#0e1930 100%),#0e1930}
#loginWrap.hide{display:none}
/* No card background: each half paints its own rounded corners. A white card clipped by
   overflow:hidden bled a hairline of white round the dark half's anti-aliased corners. */
.login-card{display:flex;width:100%;max-width:1000px;min-height:560px;
  border-radius:20px;box-shadow:var(--shadow-lg)}
.login-left{flex:1;background:linear-gradient(160deg,#1b2c4d 0%,#16233d 100%);color:#fff;
  border-radius:20px 0 0 20px;padding:48px 44px;display:flex;flex-direction:column}
.login-left .brand-k{width:64px;height:64px;border-radius:16px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:900;letter-spacing:-1px;color:#fff}
.login-left h2{font-size:30px;font-weight:800;line-height:1.2;margin-top:auto}
.login-left h2 span{color:#7cb0ff}
.login-left p.sub{color:rgba(255,255,255,.6);font-size:14px;margin-top:14px;max-width:340px}
.login-features{margin-top:28px;display:flex;flex-direction:column;gap:14px}
.login-features .lf{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600}
.login-features .lf .lf-ic{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-size:17px}
.login-left .copy{margin-top:28px;color:rgba(255,255,255,.4);font-size:12px}
.login-right{flex:1;background:var(--panel);border-radius:0 20px 20px 0;padding:56px 52px;display:flex;flex-direction:column;justify-content:center}
.login-right .wordmark{font-size:26px;font-weight:800;color:var(--navy);letter-spacing:.5px}
.login-right .wordmark small{display:block;font-size:11px;font-weight:600;color:var(--muted-2);
  letter-spacing:.4px;margin-top:3px;text-transform:none}
.login-right h1{font-size:26px;font-weight:800;margin-top:26px}
.login-right .welcome-sub{color:var(--muted);font-size:14px;margin-top:6px;margin-bottom:26px}
.form-label{display:block;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.6px;margin-bottom:8px}
.form-field{margin-bottom:18px;position:relative}
.input-icon{position:absolute;left:14px;top:38px;color:var(--muted-2);font-size:15px}
.form-field input{width:100%;padding:13px 14px 13px 40px;background:#f1f5fb;border:1px solid #e2e8f2;
  border-radius:10px;font-size:15px;color:var(--text);outline:none;transition:.15s}
.form-field input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px var(--blue-050)}
.pw-toggle{position:absolute;right:14px;top:36px;background:none;border:none;color:var(--blue);
  font-size:12px;font-weight:700;cursor:pointer}
.btn-primary{width:100%;padding:14px;background:linear-gradient(135deg,#3b82f6,#2563eb);border:none;
  border-radius:10px;color:#fff;font-size:15px;font-weight:700;cursor:pointer;display:flex;
  align-items:center;justify-content:center;gap:8px;transition:.15s;box-shadow:0 6px 16px rgba(37,99,235,.28)}
.btn-primary:hover{filter:brightness(1.05)}.btn-primary:active{transform:translateY(1px)}
.btn-primary:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}
#otpField[hidden]{display:none}
.login-foot{text-align:center;color:var(--muted-2);font-size:12px;margin-top:20px}
/* environment switch on login */
.env-switch{display:inline-flex;background:#eef2f8;border-radius:10px;padding:3px;margin-bottom:20px}
.env-switch button{border:none;background:none;padding:8px 20px;font-size:13px;font-weight:700;
  color:var(--muted);border-radius:8px;cursor:pointer;transition:.15s}
.env-switch button.active{background:#fff;color:var(--blue-600);box-shadow:var(--shadow)}
/* an environment whose credentials are not configured on this server yet */
.env-switch button:disabled{opacity:.4;cursor:not-allowed}
.env-switch button[hidden]{display:none}
/* read-only session (Production without NETSUITE_ALLOW_PRODUCTION_WRITES):
   the write buttons stay visible so the screen still demos, but read as inert */
body.read-only:not(.order-writes) #estSend,body.read-only #crSubmit{opacity:.5;cursor:not-allowed}
/* environment badge in the topbar */
.env-badge{display:none;font-size:10px;font-weight:800;letter-spacing:.7px;padding:3px 10px;border-radius:20px;
  text-transform:uppercase}
.env-badge.show{display:inline-block}
.env-badge.sandbox{background:var(--amber-bg);color:var(--amber);border:1px solid #f5d9a8}
.env-badge.production{background:var(--good-bg);color:var(--good);border:1px solid #b7e4c7}
.alert-err{background:var(--warn-bg);border:1px solid #f6cfcf;color:#b42318;border-radius:9px;
  padding:11px 14px;font-size:13px;margin-bottom:16px;display:none}
.alert-err.show{display:block}
.spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:50%;animation:spin .7s linear infinite;display:none}
.loading .spin{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── App shell ────────────────────────────────────────────────────────── */
#appShell{display:none;min-height:100vh}
#appShell.show{display:grid;grid-template-columns:248px 1fr;grid-template-rows:64px 1fr;
  grid-template-areas:"side top" "side main";height:100vh}
.sidebar{grid-area:side;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden}
.side-brand{display:flex;align-items:center;gap:10px;padding:18px 20px;border-bottom:1px solid var(--line-2)}
.side-brand .logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#2563eb,#1d4ed8);
  color:#fff;font-weight:900;font-size:14px;display:flex;align-items:center;justify-content:center}
.side-brand .bt{font-size:16px;font-weight:800;color:var(--navy);letter-spacing:.5px}
.side-brand .bt small{display:block;font-size:9px;color:var(--muted-2);font-weight:600;letter-spacing:.2px}
.side-nav{padding:12px 12px 24px;flex:1;overflow-y:auto;min-height:0}
.side-group{font-size:10px;font-weight:800;color:var(--muted-2);text-transform:uppercase;
  letter-spacing:.7px;padding:16px 12px 8px}
.grp-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;transition:.12s}
.grp-toggle:hover{color:#475569}
.grp-caret{display:inline-flex;color:var(--muted-2);transition:transform .2s}
.grp-toggle.collapsed .grp-caret{transform:rotate(-90deg)}
.side-group-body{overflow:hidden;max-height:1000px;transition:max-height .25s ease}
.side-group-body.collapsed{max-height:0}
.side-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;color:#475569;
  font-size:14px;font-weight:600;cursor:pointer;margin-bottom:2px;transition:.12s}
.side-item:hover{background:var(--blue-050);color:var(--blue-600)}
.side-item.active{background:var(--blue-050);color:var(--blue-600)}
.side-item.active .si-ic{color:var(--blue)}
.side-item .si-ic{width:20px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted-2)}
.side-item.active .si-ic{color:var(--blue)}
.side-brand{height:64px;padding:0 20px;justify-content:flex-start;align-items:center;flex:0 0 64px}
.side-logo{height:26px;width:auto;display:block}
.side-mark{height:34px;width:34px;display:block;flex:none}
/* The Desk wordmark is navy: on the dark sandbox sidebar it sits on a white tab. */
body.env-sandbox .side-logo{background:#fff;border-radius:6px;padding:3px 6px;box-sizing:content-box}
.icon-btn{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);border-radius:9px;color:#475569;cursor:pointer;flex:0 0 auto}
.icon-btn:hover{border-color:var(--blue);color:var(--blue-600)}
.logout-btn{display:inline-flex;align-items:center;gap:7px}
.lb-ic{display:inline-flex}
/* Login logo lockups */
.brand-chip{background:#fff;border-radius:14px;padding:10px 16px;width:fit-content;
  box-shadow:0 8px 20px rgba(0,0,0,.22)}
.brand-chip img{height:40px;display:block}
/* Sign-in's dark panel: the square IMPAL Desk mark, no chip — its blue frame carries on the navy. */
/* Fills the open space above the headline, centred both ways; shrinks on short screens. */
.login-left .brand-mark{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding-bottom:24px}
.brand-mark img{width:clamp(96px,22vh,150px);height:auto;aspect-ratio:1;display:block;filter:drop-shadow(0 10px 24px rgba(0,0,0,.35))}
.login-left .brand-mark + h2{margin-top:0}
.wordmark-logo{display:flex;align-items:center;gap:10px}
.wordmark-logo img{height:40px;display:block}
.wordmark-logo .wm-mark{height:48px;width:48px}
.wordmark-sub{font-size:11px;font-weight:600;color:var(--muted-2);letter-spacing:.3px;margin-top:6px}
.login-left .lf-ic{color:#fff}
.input-icon{display:inline-flex;align-items:center}
.side-foot{padding:14px 20px;border-top:1px solid var(--line-2);font-size:11px;color:var(--muted-2)}
.side-foot b{color:var(--navy)}

/* Minimized (icon-only) sidebar — toggled by the menu button on wider screens.
   Shrinks the grid column and hides all text, leaving the icons (hover shows the
   label via each item's title). Only on wide screens; narrow screens use the
   drawer instead. */
@media(min-width:821px){
  /* Grid column stays narrow; the sidebar shows only icons. On hover it expands
     to full width as an OVERLAY (position:fixed) so content doesn't shift, and
     every label reappears so you can read and click it. */
  body.sidebar-mini #appShell.show{grid-template-columns:72px 1fr}
  body.sidebar-mini .side-group-body{max-height:none!important}   /* show all items */
  body.sidebar-mini .sidebar{transition:width .12s ease}

  /* Collapsed (icons only) while NOT hovered. */
  body.sidebar-mini .sidebar:not(:hover) .side-nav{padding:12px 8px 24px}
  body.sidebar-mini .sidebar:not(:hover) .side-group,
  body.sidebar-mini .sidebar:not(:hover) .grp-caret,
  body.sidebar-mini .sidebar:not(:hover) .side-foot,
  body.sidebar-mini .sidebar:not(:hover) .side-logo{display:none}
  body.sidebar-mini .sidebar:not(:hover) .side-brand{justify-content:center;padding:0}
  body.sidebar-mini .sidebar:not(:hover) .side-brand::after{content:none}
  body.sidebar-mini .sidebar:not(:hover) .side-item{justify-content:center;gap:0;font-size:0;padding:11px 0}
  body.sidebar-mini .sidebar:not(:hover) .side-item .si-ic{margin:0}

  /* Hover → expand over the content, labels restored to their normal look. */
  body.sidebar-mini .sidebar:hover{position:fixed;top:0;bottom:0;left:0;width:248px;z-index:60;box-shadow:var(--shadow-lg)}
}

.topbar{grid-area:top;background:var(--panel);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:0 24px}
.topbar .page-title{font-size:19px;font-weight:800;color:var(--blue-600)}
.topbar .spacer{margin-left:auto}
.user-chip{display:flex;align-items:center;gap:10px}
.user-chip .uc-meta{text-align:right}
.user-chip .uc-name{font-size:13px;font-weight:700;line-height:1.1}
.user-chip .uc-role{font-size:11px;color:var(--muted)}
.user-chip .uc-avatar{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.logout-btn{background:#fff;border:1px solid var(--line);color:#475569;border-radius:9px;padding:8px 14px;
  font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.logout-btn:hover{border-color:#f6cfcf;color:var(--warn);background:var(--warn-bg)}
.logout-btn:disabled{opacity:.6;cursor:not-allowed}

.main{grid-area:main;overflow:hidden;padding:0;display:flex;flex-direction:column}
.view{display:none}
.view.active{display:flex;flex-direction:column;flex:1;min-height:0}
/* Scrolling form pages. (Create Estimate and Customer Update are tabs inside
   Customer Detail now, so their old ids are gone; SLB Update is a page.) */
#view-dashboard.active,#view-createcust.active,#view-slbupdate.active{display:block;overflow:auto;padding:24px 28px}
.cc-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.cc-head h2{font-size:20px;font-weight:800;color:var(--navy)}
.cc-h{font-size:15px;font-weight:800;color:var(--navy);margin-bottom:14px}
#view-createcust .panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
/* Fit-to-viewport: the view itself no longer scrolls — each tab fills what is
   left below the header and scrolls inside. The About tab used to run to twice
   the screen height. */
#view-customerdetail.active{display:flex;flex-direction:column;overflow:hidden;padding:14px 24px 14px}
#cdBody{flex:1;min-height:0;flex-direction:column}
#view-customerdetail .cd-top,#view-customerdetail .cd-tabs{flex:0 0 auto}
#view-customerdetail .cd-pane.active{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px}
/* Orders / Outstanding / Collection: the grid is the pane's own filler, exactly
   as on the full-page grids (Billed / UnBilled Customers), which have never had
   a fit problem. It used to sit inside a .panel, whose 20px padding and border
   were height the grid could not see when it counted rows. */
#view-customerdetail .cd-pane.active > .panel{flex:1;min-height:0;display:flex;flex-direction:column}
#view-customerdetail .cd-pane.active > .grid-card{flex:1;min-height:0}
#view-customerdetail .cd-pane.active > .xl-grid{flex:0 0 auto}
#cdOrdGrid,#cdOutGrid,#cdCollGrid{flex:1;min-height:0;display:flex;flex-direction:column}
/* The cards below fill the leftover height when the screen is tall enough.
   On a short screen they keep a minimum height (the sales chart is a fixed
   210px SVG and the gauge needs its room) and the pane scrolls instead of
   crushing them; the customer card stays pinned so the identity stays in view. */
#cdpane-about{gap:12px;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
#cdpane-about > .cd-profile{position:sticky;top:0;z-index:2}
/* Fulfilment: the chart card keeps its full height (the shared rule above lets
   panels shrink, which cut the month labels off); the part table fills what is
   left, and on a short screen the pane scrolls instead of crushing either. */
#cdpane-fulfil{overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
#view-customerdetail #cdpane-fulfil.active > .panel:first-child{flex:0 0 auto}
#view-customerdetail #cdpane-fulfil.active > .panel:last-child{min-height:380px}
#cdFulGrid{flex:1;min-height:0;display:flex;flex-direction:column}
#cdpane-about > .cd-profile,
#cdpane-about > .xl-grid{flex:0 0 auto}
#view-mgrdaystock.active{padding:20px 28px}
#view-mgrdaystock .cd-tabs{margin-top:6px}
#view-mgrdaystock #dss-sales:not([hidden]),#view-mgrdaystock #dss-stock:not([hidden]){flex:1;min-height:0;display:flex;flex-direction:column}
#view-mgrdaystock #dssSalesGrid,#view-mgrdaystock #dssStockGrid{flex:1;min-height:0;display:flex;flex-direction:column}
#view-sales.active{padding:20px 28px}
#view-sales .cd-tabs{margin-top:6px}
#view-sales #ss-sales:not([hidden]),#view-sales #ss-newprod:not([hidden]){flex:1;min-height:0;display:flex;flex-direction:column}
#view-sales #salesGrid,#view-sales #newprodGrid{flex:1;min-height:0;display:flex;flex-direction:column}
#view-reqstatus.active{padding:20px 28px}
#view-reqstatus #rsGrid{flex:1;min-height:0;display:flex;flex-direction:column}
/* Stock & Warehouse + In Transit — tabbed, each pane has its own search */
#view-stock.active,#view-intransit.active{padding:20px 28px}
#view-stock .cd-tabs,#view-intransit .cd-tabs{margin-top:6px}
.stk-pane:not([hidden]){display:flex;flex-direction:column;flex:1;min-height:0}
.stk-pane .rpt-bar{margin:0 0 14px}
.stk-pane [id$="Grid"]{flex:1;min-height:0;display:flex;flex-direction:column}
.stk-chk{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--navy);white-space:nowrap;padding-bottom:9px;cursor:pointer}
.stk-chk input{width:16px;height:16px;accent-color:var(--blue)}
.cd-top{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:10px}
.cd-meta{font-size:14px;color:var(--muted);font-weight:600;padding-bottom:11px}
/* Name left, picker right, one line. */
.cd-name{font-size:19px;font-weight:800;color:var(--navy);margin:0}
.cd-name:empty{display:none}
.cd-picker{flex:0 0 340px;max-width:100%;margin:0 0 0 auto}
/* No label above it: the placeholder ("Search customer…") says what it is. */
.cd-picker > label{display:none}
.cd-meta b{color:var(--navy);font-weight:800}
.cd-meta .cd-code{background:var(--blue-050);color:var(--blue-600);border-radius:6px;padding:2px 9px;font-size:12px;font-weight:800;margin-right:8px}
/* Excel-style cell grid (shared 1px gridlines via gap) */
.xl-cap{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:0 0 8px}
.xl-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;
  overflow:hidden;margin-bottom:10px}
#cdKpis{margin-bottom:8px}
.xl-4{grid-template-columns:repeat(4,1fr)}
.xl-5{grid-template-columns:repeat(5,1fr)}
.xl-cell{background:var(--panel);padding:11px 14px}
.xl-cell .xl-l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.xl-cell .xl-v{font-size:17px;font-weight:800;color:var(--navy);margin-top:4px;font-variant-numeric:tabular-nums}
.xl-cell.hot .xl-v{color:var(--warn)}
/* Customer Detail: Orders / Outstanding main tabs */
.cd-tabs{display:flex;gap:4px;margin:18px 0 14px;border-bottom:1px solid var(--line)}
/* On Customer Detail the header row above already carries its own spacing —
   the tabs' 18px sat on top of it and left a visible band of dead space. */
#view-customerdetail .cd-tabs{margin:2px 0 10px}
.cd-tab{appearance:none;background:none;border:none;cursor:pointer;font-size:14px;font-weight:700;
  color:var(--muted);padding:9px 16px;border-bottom:2px solid transparent;margin-bottom:-1px}
.cd-tab:hover{color:var(--navy)}
.cd-tab.active{color:var(--blue);border-bottom-color:var(--blue)}
.cd-pane{display:none}
.cd-pane.active{display:block}
/* Aging tiles double as sub-tabs inside the Outstanding pane */
.cd-aging-tabs{margin-bottom:14px}
.cd-aging-tabs .xl-cell{cursor:pointer;transition:background .12s}
.cd-aging-tabs .xl-cell:hover{background:var(--blue-050)}
/* Selected bucket: solid fill (not an outline) with white text for contrast. */
.cd-aging-tabs .xl-cell.sel{background:var(--blue)}
.cd-aging-tabs .xl-cell.sel .xl-l{color:rgba(255,255,255,.8)}
.cd-aging-tabs .xl-cell.sel .xl-v,
.cd-aging-tabs .xl-cell.sel.hot .xl-v{color:#fff}
@media(max-width:820px){.xl-4,.xl-5{grid-template-columns:repeat(2,1fr)}}
.cd-header{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.cd-header h2{font-size:22px;font-weight:800;color:var(--navy)}
.cd-header .cd-sub{color:var(--muted);font-size:13px;margin-top:3px}
.cd-header .code-card{margin-left:auto}
/* aging shown as compact buckets, no card */
.aging-block{margin-bottom:22px}
.aging-cap{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.aging-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.ag-tile{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--panel)}
.ag-tile .ag-l{font-size:11px;color:var(--muted);font-weight:600}
.ag-tile .ag-v{font-size:18px;font-weight:800;color:var(--navy);margin-top:4px;font-variant-numeric:tabular-nums}
.ag-tile.hot .ag-v{color:var(--warn)}
@media(max-width:820px){.aging-row{grid-template-columns:repeat(2,1fr)}}
#view-billeddetails.active{display:flex;flex-direction:column;flex:1;min-height:0}
#view-billeddetails .est-card{margin:24px 28px 0;flex:0 0 auto}
.bd-period{text-align:center;color:var(--muted);font-size:13px;font-weight:600;margin:14px 0 0}
/* report filter-form pages */
#view-visit.active,#view-tempreceipt.active,#view-soa.active{display:flex;flex-direction:column;flex:1;min-height:0}
#view-temprpt.active{display:block;overflow:auto;padding:0 28px 28px}
#view-temprpt .tabs{margin:0 -28px 20px;padding:0 28px;position:sticky;top:0;background:var(--bg);z-index:5}
.rpt-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;margin:20px 24px 0}
.rpt-bar .est-field{margin:0}
.rpt-grid{flex:1;min-height:0;margin-top:12px}
#view-billeddetails #bdGrid{flex:1;min-height:0;margin-top:10px}

/* ── Create Estimate form (flush, compact) ────────────────────────────── */
.est-card{background:transparent;border:none;box-shadow:none;padding:0;max-width:none;margin:0}
.est-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 16px}
.est-alert{display:flex;align-items:flex-start;gap:12px;background:#ef4444;color:#fff;border-radius:12px;
  padding:14px 18px;margin-bottom:18px;font-size:13px;box-shadow:0 8px 20px rgba(239,68,68,.28)}
.est-alert .ea-ic{margin-top:1px}
.est-alert b{font-size:14px;display:block;margin-bottom:2px}
.ss.disabled{opacity:.5;pointer-events:none}
.date-inp{padding:8px 12px;border:1px solid var(--line);border-radius:9px;font-size:13px;color:var(--text);
  background:#fff;font-family:inherit;outline:none}
.date-inp:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
.est-grid5{grid-template-columns:repeat(5,1fr);margin-top:14px}
.est-grid6{grid-template-columns:repeat(6,1fr);margin-top:14px}
@media(max-width:960px){.est-grid6{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.est-grid6{grid-template-columns:1fr}}
.est-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.est-field label{font-size:12px;font-weight:700;color:var(--navy)}
.est-field select,.est-field input,.est-field textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;font-size:13px;
  color:var(--text);background:#fff;outline:none;font-family:inherit;transition:.15s}
.est-field select:focus,.est-field input:focus,.est-field textarea:focus{
  border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
.est-field input[readonly],.est-field textarea[readonly]{background:#f4f6fb;color:var(--muted);cursor:default}
.est-field textarea{resize:vertical;min-height:56px;line-height:1.35;overflow:hidden}
.est-actions{display:flex;justify-content:flex-end;margin-top:14px}
.est-btn{width:auto;padding:11px 22px;font-size:14px;gap:7px}
.est-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
/* Cart shown in its own light panel so it's clearly visible */
.est-cart{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px 20px;margin-top:18px}
.est-cart-title{font-size:15px;font-weight:800;color:var(--navy);text-align:center;margin-bottom:10px}
#estCartWrap .empty-illus{min-height:120px;padding:14px 0;gap:8px}
#estCartWrap .empty-illus .ei-ic{font-size:34px}
.est-row-del{background:none;border:none;color:var(--warn);cursor:pointer;display:inline-flex;padding:4px}
.est-row-del:hover{color:#b42318}
@media(max-width:960px){.est-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.est-grid{grid-template-columns:1fr}}

/* ── Searchable select ────────────────────────────────────────────────── */
.ss{position:relative;display:inline-block;min-width:150px;vertical-align:middle}
.ss > select{display:none}
.ss-btn{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border:1px solid var(--line);
  border-radius:9px;background:#fff;font-size:13px;color:var(--text);cursor:pointer;font-family:inherit}
.ss-btn .ss-val{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-btn .ss-val.placeholder{color:var(--muted-2)}
.ss-btn .ss-caret{color:var(--muted-2);font-size:9px}
.ss.open .ss-btn{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
.ss-menu{position:absolute;top:calc(100% + 5px);left:0;right:0;min-width:200px;background:#fff;
  border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow-lg);z-index:55;display:none;overflow:hidden}
.ss.open .ss-menu{display:block}
.ss-search{padding:8px;border-bottom:1px solid var(--line-2)}
.ss-search input{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;
  outline:none;font-family:inherit}
.ss-search input:focus{border-color:var(--blue)}
.ss-list{max-height:240px;overflow:auto;padding:5px}
.ss-opt{padding:9px 10px;border-radius:7px;font-size:13px;color:var(--text);cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-opt:hover{background:var(--blue-050)}
.ss-opt.sel{background:var(--blue-050);color:var(--blue-600);font-weight:700}
.ss-opt.disabled{color:var(--muted-2);opacity:.5;cursor:not-allowed;background:none}
.ss-opt.disabled:hover{background:none}
.ss-empty{padding:16px;text-align:center;color:var(--muted-2);font-size:13px}
/* full-width inside form fields */
.est-field .ss{display:block;width:100%;min-width:0}
.est-field .ss-btn{padding:10px 12px}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);z-index:95;
  background:#0f1b33;color:#fff;font-size:13px;font-weight:600;padding:11px 18px;border-radius:10px;
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:.2s;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.page-head{margin-bottom:18px}
.page-head h2{font-size:22px;font-weight:800;color:var(--navy)}
.page-head p{color:var(--muted);font-size:13px;margin-top:2px}

/* report/feature tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;max-width:940px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px 20px;text-align:center;
  cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s;display:flex;flex-direction:column;
  align-items:center;gap:12px;box-shadow:var(--shadow)}
.tile:hover{transform:translateY(-3px);border-color:var(--blue-100);box-shadow:0 12px 28px rgba(16,24,40,.12)}
.tile.soon{opacity:.6;cursor:default}
.tile.soon:hover{transform:none;box-shadow:var(--shadow);border-color:var(--line)}
.tile .t-ic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--blue-050);color:var(--blue)}
.tile .t-name{font-size:15px;font-weight:700;color:var(--navy)}
.tile .t-tag{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}

/* ── KPI cards ──────────────────────────────────────────────────────────────
   Icon chip LEFT, text right. The icon used to be absolutely positioned with a
   70px right gutter reserved for it, which left ~110px for the value — enough
   for "₹ 21,14,429" to break after the ₹ and then overflow once a branch-wide
   figure pushed it to 8 digits. In flow, the text simply takes the width that
   is left, and the value never wraps (headline is compact — ₹1.23 Cr — with the
   exact rupees on the sub-line).
   Column counts are explicit per breakpoint rather than auto-fit, so the 5-card
   sales row degrades 5 → 3 → 2 → 1 instead of stranding one card on its own. */
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:18px}
.kpi-grid.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.kpi-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Collection: seven tiles on ONE line (spec 2.1 order). No icon — at this
   width it only squeezed the label — so the tile's colour is a strip along its
   top edge instead, and the label has the full width (two lines at most for
   the longest names). The label row has one fixed height so values line up
   across the row; the % sits under its meter rather than beside it. */
.kpi-grid.seven{grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.kpi-grid.seven .kpi,.kpi-grid.compact .kpi{display:block;padding:11px 12px 12px;border-top:3px solid var(--kpi-accent)}
.kpi-grid.seven .kpi .k-ic,.kpi-grid.compact .kpi .k-ic{display:none}
.kpi-grid.seven .kpi .k-label,.kpi-grid.compact .kpi .k-label{font-size:11.5px;font-weight:700;text-transform:none;letter-spacing:0;
  line-height:1.3;height:2.6em;color:var(--muted);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.kpi-grid.seven .kpi .k-value,.kpi-grid.compact .kpi .k-value{font-size:clamp(15px,.55vw + 10px,20px);margin-top:4px}
.kpi-grid.seven .k-sub,.kpi-grid.compact .k-sub{font-size:11px}
.kpi-grid.seven .k-meter.has-pct,.kpi-grid.compact .k-meter.has-pct{flex-wrap:wrap;gap:3px 6px}
.kpi-grid.seven .k-meter.has-pct .k-meter-track,.kpi-grid.compact .k-meter.has-pct .k-meter-track{flex:1 0 100%}
.kpi-grid.seven .k-meter-pct,.kpi-grid.compact .k-meter-pct{font-size:11.5px}
@media(max-width:1000px){.kpi-grid.seven{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* compact: the Collection row's icon-free tile (accent strip on top) for other rows; six across keeps a larger figure. */
.kpi-grid.six.compact{gap:10px}
.kpi-grid.six.compact .kpi .k-value{font-size:clamp(18px,.6vw + 12px,24px)}
/* Names the Sales / New Product Sales tile rows — they carry the same five labels. */
.kpi-sec{color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px 2px}
.kpi-sec-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.kpi-sec-row .seg button{text-transform:none;letter-spacing:0}
.kpi-grid[hidden]{display:none}
.ef-head{text-transform:none;letter-spacing:0;font-weight:600;margin-left:6px}
.ef-head b{font-weight:800}
.ef-head .good{color:var(--good)}
.ef-head .bad{color:#c2410c}
.kpi-grid.six{grid-template-columns:repeat(6,minmax(0,1fr))}
/* Each row keeps its full count on one line while the cards stay readable
   (~195px), then halves into even rows — 3+3 / 3+2 — rather than stranding one. */
@media(max-width:1240px){.kpi-grid.six{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1120px){.kpi-grid.five{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1000px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.kpi-grid,.kpi-grid.three,.kpi-grid.five,.kpi-grid.six,.kpi-grid.seven{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.kpi-grid,.kpi-grid.three,.kpi-grid.five,.kpi-grid.six,.kpi-grid.seven{grid-template-columns:1fr}}

.kpi{--kpi-accent:var(--blue);--kpi-tint:var(--blue-050);--kpi-track:var(--blue-100);--kpi-ink:var(--blue-600);
  display:flex;align-items:center;gap:11px;min-width:0;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:15px 14px 14px;
  box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.kpi:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(16,24,40,.10)}
/* Tinted variant — the sales row reads as one band, the way the reference does.
   Keeps the same lift as the white row, with a border one step deeper than its
   own tint so each card still has a defined edge. */
.kpi.tint{background:var(--kpi-tint);border-color:var(--kpi-track);box-shadow:var(--shadow)}
/* Trend behind the figures (Estimate Fulfilment row): a faint area in the
   tile's own accent across its lower half; the content sits above it. */
.kpi.has-spark{position:relative;overflow:hidden}
.kpi.has-spark > :not(.k-spark){position:relative;z-index:1}
.kpi .k-spark{position:absolute;left:0;right:0;bottom:0;width:100%;height:58%;pointer-events:none}
.kpi .k-spark-fill{fill:var(--kpi-accent);opacity:.10}
.kpi .k-spark-line{fill:none;stroke:var(--kpi-accent);stroke-width:1.5;opacity:.35;vector-effect:non-scaling-stroke}
.kpi .k-body{flex:1;min-width:0}
.kpi .k-label{color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;line-height:1.35;min-height:30px}   /* 2 lines: values stay aligned
  across the row whether a label wraps ("Monthly Target") or not ("Cumulative") */
.kpi.tint .k-label{color:var(--kpi-ink)}
.kpi .k-value{font-size:clamp(18px,.75vw + 12px,24px);font-weight:800;margin-top:5px;color:var(--navy);
  letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .k-value.badge{display:inline-block;font-size:13px;padding:5px 12px;border-radius:20px;
  background:var(--blue-050);color:var(--blue-600);margin-top:8px}

/* Tones. Each is accent + a light step of the same ramp for tint/track, so a
   meter reads as one colour family rather than two unrelated hues. */
.kpi.t-blue  {--kpi-accent:#2563eb;--kpi-tint:#eef4ff;--kpi-track:#d8e6ff;--kpi-ink:#1d4ed8}
.kpi.t-cyan  {--kpi-accent:#0891b2;--kpi-tint:#e7f7fb;--kpi-track:#c9ecf4;--kpi-ink:#0e7490}
.kpi.t-violet{--kpi-accent:#7c3aed;--kpi-tint:#f2ecfe;--kpi-track:#e2d5fb;--kpi-ink:#6d28d9}
.kpi.t-green {--kpi-accent:#16a34a;--kpi-tint:#e9f7ef;--kpi-track:#cdeedb;--kpi-ink:#15803d}
.kpi.t-amber {--kpi-accent:#d97706;--kpi-tint:#fdf3e3;--kpi-track:#f8e3c1;--kpi-ink:#b45309}
.kpi.t-red   {--kpi-accent:#dc2626;--kpi-tint:#fdecec;--kpi-track:#f8d3d3;--kpi-ink:#b91c1c}

/* Meter: only on tiles where a real ratio exists (achievement vs target, the
   180+ share of outstanding). Fill carries severity; the track is the lighter
   step of the tile's own ramp. No caption — the tile carries no text below the
   value, so the bar is the whole of it. */
.k-meter{margin-top:8px}
/* A second fact under the value, e.g. average collection days. */
.k-sub{margin-top:5px;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-sub b{color:var(--navy);font-weight:800}
.k-sub .sk-note{width:110px}
.k-meter-track{height:6px;border-radius:99px;background:var(--kpi-track);overflow:hidden}
.k-meter-fill{height:100%;border-radius:99px;background:var(--kpi-accent);transition:width .45s ease}
.k-meter-fill.sev-good{background:var(--good)}
.k-meter-fill.sev-warn{background:var(--amber)}
.k-meter-fill.sev-bad{background:var(--warn)}
/* Percentage beside the bar (Collection MTD, Overdue 180+). */
.k-meter.has-pct{display:flex;align-items:center;gap:8px}
.k-meter.has-pct .k-meter-track{flex:1;min-width:0}
.k-meter-pct{font-size:13px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.k-meter-pct.sev-good{color:var(--good)}
.k-meter-pct.sev-warn{color:#b45309}
.k-meter-pct.sev-bad{color:var(--warn)}

/* ── Dashboard ────────────────────────────────────────────────────────── */
.dash-top{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px}
.dash-report{margin-left:auto;min-width:210px;align-self:center}
/* Manager "viewing as <rep>" banner — only shown while the dashboard is scoped
   to one rep, so the manager can never mistake it for his own branch figures. */
.viewing-as{display:flex;align-items:center;gap:8px;margin-top:10px;padding:7px 12px;
  background:var(--blue-050);border:1px solid var(--blue-100);border-radius:20px;
  font-size:13px;color:var(--blue-600);width:fit-content}
.viewing-as[hidden]{display:none}
.viewing-as .va-ic{display:flex;color:var(--blue-600)}
.viewing-as strong{color:var(--navy)}
.viewing-as button{margin-left:4px;border:0;background:none;padding:0 2px;cursor:pointer;
  font:inherit;color:var(--muted);text-decoration:underline}
.viewing-as button:hover{color:var(--warn)}
/* Team summary: wide table, scrolls sideways on a phone rather than the page. */
#teamPanel[hidden]{display:none}
.team-scroll{overflow-x:auto}
.team-scroll table.mini th,.team-scroll table.mini td{white-space:nowrap}
.team-scroll table.mini tfoot td{font-weight:700;border-top:2px solid var(--line, #e5e7eb)}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:6px}
.dash-grid .span2{grid-column:1 / -1}
@media(max-width:900px){.dash-grid{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px 22px}
.panel-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
/* Header controls (date range + Load): stay on the title's line when they fit,
   drop to a second line as a group when they don't, instead of overflowing. */
.ph-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.panel-head h3{font-size:15px;font-weight:800;color:var(--navy)}
.panel-head .ph-ic{width:26px;height:26px;border-radius:7px;background:var(--blue-050);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:14px}
.panel-head .spacer{margin-left:auto}
.seg{display:inline-flex;background:#eef2f8;border-radius:9px;padding:3px}
.seg button{border:none;background:none;padding:6px 14px;font-size:12px;font-weight:700;color:var(--muted);
  border-radius:7px;cursor:pointer}
.seg button.active{background:#fff;color:var(--blue-600);box-shadow:var(--shadow)}
.panel-note{color:var(--muted);font-size:12px;margin-top:10px}
.panel-empty{color:var(--warn);font-size:13px;text-align:center;padding:26px 0;font-weight:600}
.dash-grid .panel{display:flex;flex-direction:column}
.empty-illus{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:30px 0;min-height:200px}
.empty-illus .ei-ic{font-size:44px;filter:grayscale(1);opacity:.55}
.empty-illus .ei-txt{color:var(--muted);font-size:14px}
.report-note{color:var(--warn);font-size:14px;font-weight:600;text-align:center;padding:34px 0}
/* A summary line under a chart is information, not a warning. */
.report-note.note-muted{color:var(--muted);font-weight:600;font-size:12.5px;padding:10px 0 2px}
/* Testing-environment notice on the sign-in card — sandbox only. */
.env-warn{display:flex;align-items:center;gap:9px;margin:2px 0 14px;padding:10px 13px;
  border-radius:10px;font-size:13px;line-height:1.35;
  color:#92400e;background:#fef3c7;border:1px solid #fcd34d}
/* display:flex above would otherwise beat the UA [hidden] rule, so the banner
   never hides for Production — make the hidden state explicit and specific. */
.env-warn[hidden]{display:none}
.env-warn .ew-ic{flex:0 0 auto;color:#d97706;display:inline-flex}
.env-warn strong{font-weight:800}
/* Skeleton placeholders — a tile shows these while its own RESTlet is still in flight,
   so the dashboard paints instantly and each card fills in as its data arrives. */
@keyframes sk-shimmer{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}
.sk{display:inline-block;border-radius:6px;background:var(--line);
  background-image:linear-gradient(90deg,var(--line) 0,rgba(255,255,255,.55) 40px,var(--line) 80px);
  background-size:200px 100%;background-repeat:no-repeat;animation:sk-shimmer 1.1s ease-in-out infinite}
.kpi.loading{opacity:.85}
.sk-val{height:22px;width:96px;margin-top:8px}
.sk-note{height:12px;width:180px}

/* Solid accent icon chip, left of the text and in the flow (see KPI cards). */
.kpi .k-ic{flex:0 0 auto;width:38px;height:38px;border-radius:12px;display:flex;
  align-items:center;justify-content:center;background:var(--kpi-accent);color:#fff}
.kpi .k-ic svg{width:20px;height:20px}
/* icon-top: a small icon on the label's line, top left; the figure with its
   sub-line beside it, then the meter, below at full width — the same height as
   the compact rows. k-body steps aside (display:contents) so its children wrap
   as lines of the tile itself. */
.kpi-grid.icon-top .kpi{flex-wrap:wrap;align-items:center;align-content:flex-start;gap:0 8px;padding:11px 12px 12px}
.kpi-grid.icon-top .kpi .k-body{display:contents}
.kpi-grid.icon-top .kpi .k-ic{width:26px;height:26px;border-radius:8px}
.kpi-grid.icon-top .kpi .k-ic svg{width:15px;height:15px}
.kpi-grid.icon-top .kpi .k-label{flex:1 1 calc(100% - 34px);min-height:0;min-width:0}
.kpi-grid.icon-top .kpi .k-value{margin-top:13px;align-self:baseline}
.kpi-grid.icon-top .kpi .k-sub{flex:1 1 0;min-width:0;margin-top:0;align-self:baseline}
.kpi-grid.icon-top .kpi .k-meter{flex:1 0 100%;margin-top:13px}
.kpi-grid.icon-top .kpi .sk-val{flex:1 0 100%}
.kpi-grid.icon-top .kpi.has-spark .k-body > *{position:relative;z-index:1}

/* Chart */
.chart-wrap{position:relative;width:100%}
.chart-svg{display:block;width:100%}
.chart-bar{transition:opacity .12s;cursor:pointer}
.chart-bar:hover{opacity:.82}
.chart-axis{font-size:11px;fill:var(--muted-2)}
.chart-tip{position:absolute;display:none;background:#0f1b33;color:#fff;border-radius:9px;padding:9px 11px;
  font-size:12px;pointer-events:none;z-index:5;box-shadow:var(--shadow-lg);white-space:nowrap}
.chart-tip .ct-title{font-weight:700;margin-bottom:5px}
.chart-tip .ct-row{display:flex;align-items:center;gap:6px;margin-top:2px;color:rgba(255,255,255,.85)}
.chart-tip .ct-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.chart-legend{display:flex;gap:16px;justify-content:flex-end;margin-bottom:6px}
.chart-legend .cl{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-weight:600}
.chart-legend .cl .dot{width:10px;height:10px;border-radius:3px}
.chart-legend .cl .dot-line{width:16px;height:3px;border-radius:2px}
.chart-val{font-size:10.5px;font-weight:700;fill:var(--navy);font-variant-numeric:tabular-nums;
  paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.chart-hit{cursor:pointer}
.chart-hit:hover{fill:rgba(37,99,235,.05)}

/* Leaderboard */
table.board{width:100%;border-collapse:collapse;font-size:13px}
table.board th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.4px;
  padding:8px 10px;border-bottom:1px solid var(--line)}
table.board th.num,table.board td.num{text-align:right}
table.board td{padding:10px;border-bottom:1px solid var(--line-2);white-space:nowrap}
table.board .rank{width:24px;height:24px;border-radius:50%;background:var(--blue-050);color:var(--blue-600);
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:11px}
table.board .val-pill{background:var(--blue-050);color:var(--blue-600);border-radius:20px;padding:3px 10px;font-weight:700;font-size:12px}
.share{width:150px;height:8px;background:#eef2f8;border-radius:6px;overflow:hidden}
.share > i{display:block;height:100%;background:linear-gradient(90deg,#60a5fa,#2563eb);border-radius:6px}

/* ── DataGrid (flush, fills the content area; footer sticks to bottom) ─── */
.grid-card{background:var(--panel);display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.grid-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:13px 22px;
  border-bottom:1px solid var(--line);background:var(--panel)}
.grid-toolbar .spacer{margin-left:auto}
.grid-search{position:relative;min-width:240px;flex:1;max-width:360px}
.grid-search input{width:100%;padding:9px 12px 9px 34px;border:1px solid var(--line);border-radius:9px;
  font-size:13px;outline:none;background:#fff;color:var(--text)}
.grid-search input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
.grid-search .gs-ic{position:absolute;left:11px;top:9px;color:var(--muted-2);font-size:13px}

/* dropdown / multiselect */
.dd{position:relative}
.dd-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--line);
  border-radius:9px;background:#fff;font-size:13px;font-weight:600;color:#475569;cursor:pointer;white-space:nowrap}
.dd-btn:hover{border-color:#cdd6e6}
.dd-btn .caret{color:var(--muted-2);font-size:10px}
.dd-btn .cnt{background:var(--blue);color:#fff;border-radius:10px;font-size:10px;font-weight:700;padding:1px 7px}
.dd-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:220px;max-width:min(320px,80vw);
  background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow-lg);
  padding:8px;z-index:40;display:none;max-height:320px;overflow:auto}
.dd-menu.right{left:auto;right:0}
.dd-menu.show{display:block}
.dd-menu .dd-title{font-size:10px;font-weight:800;color:var(--muted-2);text-transform:uppercase;
  letter-spacing:.6px;padding:6px 8px}
.dd-opt{display:flex;align-items:center;gap:9px;padding:0 8px;min-height:36px;border-radius:7px;font-size:13px;
  color:var(--text);cursor:pointer}
.dd-opt:hover{background:var(--blue-050)}
.dd-opt input{width:15px;height:15px;accent-color:var(--blue);cursor:pointer}
.col-opt{cursor:default}
.col-opt .drag-h{color:var(--muted-2);cursor:grab;font-size:13px;user-select:none}
.col-opt.dragging{opacity:.45}
.col-opt.drag-over{box-shadow:inset 0 2px 0 var(--blue)}
.col-opt .col-lbl{flex:1}
.dd-actions{display:flex;gap:8px;padding:8px 6px 4px;border-top:1px solid var(--line-2);margin-top:6px}
.dd-actions button{flex:1;font-size:12px;font-weight:600;padding:6px;border-radius:7px;border:1px solid var(--line);
  background:#fff;color:#475569;cursor:pointer}
.dd-actions button.primary{background:var(--blue);color:#fff;border-color:var(--blue)}

/* The page size is fitted to the viewport, so paging is the ONLY way through a
   list — a vertical scrollbar here would be a second one, and is disallowed
   outright rather than merely avoided by arithmetic. Sideways still scrolls:
   a nine-column table on a narrow screen has nowhere else to go. */
.grid-scroll{overflow-x:auto;overflow-y:hidden;flex:1;min-height:0}
table.grid{width:100%;border-collapse:collapse;font-size:13px}
table.grid thead th{position:sticky;top:0;background:#f8fafc;color:var(--muted);font-weight:700;font-size:11px;
  text-transform:uppercase;letter-spacing:.5px;text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);
  white-space:nowrap;cursor:default;user-select:none}
table.grid thead th.sortable{cursor:pointer}
table.grid thead th.sortable:hover{color:var(--blue-600)}
table.grid thead th .sort-ar{color:var(--blue);margin-left:4px;font-size:10px}
table.grid thead th.num,table.grid tbody td.num{text-align:right}
table.grid tbody td{padding:11px 14px;border-bottom:1px solid var(--line-2);color:#334155;white-space:nowrap}
table.grid tbody tr{transition:.1s}
table.grid tbody tr:hover{background:#f6f9ff}
table.grid tbody tr.clickable{cursor:pointer}
table.grid tbody td .link{color:var(--blue-600);font-weight:700}
.cell-pill{display:inline-block;padding:2px 9px;border-radius:6px;font-size:11px;font-weight:700;
  background:var(--blue-050);color:var(--blue-600)}
/* One-line cell with the full value on hover — keeps a long free-text column
   (addresses) from widening the table into a horizontal scroll. */
/* Create Estimate and Credit Limit are forms, not fitted dashboards: inside a
   Customer Detail tab they keep their natural height and scroll. Left as flex
   children they were squeezed until the address boxes overlapped the row below. */
#view-customerdetail #cdpane-estimate.active,
#view-customerdetail #cdpane-custupdate.active{display:block;overflow-y:auto;
  overscroll-behavior:contain;padding-right:4px}
#cdpane-estimate .est-grid,#cdpane-custupdate .est-grid{align-items:start}
#cdpane-estimate .est-field textarea{min-height:76px;max-height:200px;resize:vertical;
  line-height:1.45;overflow-y:auto}

/* Section headings inside those forms, so the fields read as groups. */
.form-sec{display:flex;align-items:center;gap:10px;margin:4px 0 12px;
  font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.form-sec::after{content:'';flex:1;height:1px;background:var(--line)}
.form-sec + .est-grid{margin-bottom:18px}

/* New Customer: list | request status. */
#view-newcust #newcustGrid,#view-requests #rsGrid{flex:1;min-height:0;display:flex;flex-direction:column}
#view-requests .cd-tabs{margin-top:0;flex:0 0 auto}
#view-requests .rs-scope{flex:0 0 auto}

/* Sales Orders: two tabs over one date window. */
#view-salesorders .cd-pane{display:none}
#view-salesorders .cd-pane.active{display:flex;flex-direction:column;flex:1;min-height:0}
#view-salesorders #csoGrid,#view-salesorders #shGrid{flex:1;min-height:0;display:flex;flex-direction:column}
.so-window{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--muted)}
.so-window select{padding:6px 10px;border:1px solid var(--line);border-radius:8px;font-size:12px;
  font-weight:700;color:var(--text);background:#fff}

/* ── GRN Upload ───────────────────────────────────────────────────────── */
#view-grnupload.active{display:block;overflow:auto;padding:24px 28px}
/* One height for the whole row — the file capsule, the supplier select and the
   Check file button. It is what .est-field input computes to (13px text +
   10px padding each side + the border), named once so the three cannot drift. */
#view-grnupload{--fld-h:38px}
#view-grnupload .cd-tabs{margin-top:0}
#view-grnupload .cd-pane{display:none}
#view-grnupload .cd-pane.active{display:block}
#view-grnupload #grnHistGrid,#view-grnupload #grnBatchGrid{min-height:340px}
#view-grnupload #grnBackToBatches{flex:0 0 auto}
/* In GRN 1 / still waiting / held for a reason — readable at a glance. */
.grn-state{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700}
.grn-state.gsx-in{background:var(--good-bg);color:var(--good)}
.grn-state.gsx-wait{background:var(--blue-050);color:var(--blue-600)}
.grn-state.gsx-hold{background:var(--amber-bg);color:var(--amber)}
.grn-state.gsx-bad{background:var(--warn-bg);color:var(--warn)}
#view-grnupload .est-field select,#view-grnupload .est-field input{height:var(--fld-h)}
/* The supplier picker is a searchable-select, so the native control is hidden
   and .ss-btn is what is actually on screen — it needs the height, not <select>. */
#view-grnupload .ss-btn{height:var(--fld-h);padding-top:0;padding-bottom:0}
#view-grnupload #grnCheck{height:var(--fld-h);width:100%;border-radius:9px;padding:0 18px;
  font-size:13px;display:inline-flex;align-items:center;justify-content:center}
/* A file field built like the grid search box: one rounded field, the button
   inside it on the left, the chosen name filling the rest. The browser's own
   control cannot be styled and looked foreign next to everything else. */
.file-pick{display:flex;align-items:stretch;width:100%;overflow:hidden;
  border:1px solid var(--line);border-radius:9px;background:#fff;
  height:var(--fld-h,38px)}
.file-pick:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
/* The head of the capsule: flush to the field's edge, its full height, rounded
   on the left only — one control, not a button sitting inside a box. */
.file-pick .fp-btn{display:flex;align-items:center;flex:0 0 auto;cursor:pointer;
  background:var(--navy);border:0;border-radius:0;
  padding:0 15px;font-size:12.5px;font-weight:700;color:#fff;white-space:nowrap;
  letter-spacing:.2px;transition:background .12s}
.file-pick .fp-btn:hover{background:var(--navy-2)}
.file-pick:focus-within .fp-btn{background:var(--blue)}
.file-pick .fp-name{flex:1;min-width:0;display:flex;align-items:center;padding:0 12px;
  font-size:13px;color:var(--muted-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-pick .fp-name.has-file{color:var(--text);font-weight:600}
.grn-note{margin:14px 0 4px;padding:10px 14px;border-radius:9px;border:1px solid var(--line);
  border-left:3px solid var(--blue);background:#f8fafc;font-size:12.5px;color:var(--muted)}
.grn-note.gn-ok{border-left-color:var(--good);background:var(--good-bg);color:var(--text)}
.grn-note.gn-bad{border-left-color:var(--warn);background:var(--warn-bg);color:#b42318}
/* The verdict, before anything is written. */
.grn-summary{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0 6px}
.grn-summary .gs-cell{flex:0 0 auto;min-width:120px;background:var(--panel);border:1px solid var(--line);
  border-radius:11px;padding:10px 16px;box-shadow:var(--shadow)}
.grn-summary .gs-l{font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted-2)}
.grn-summary .gs-v{font-size:20px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
.grn-summary .gs-good .gs-v{color:var(--good)}
.grn-summary .gs-warn .gs-v{color:var(--amber)}
.grn-summary .gs-bad .gs-v{color:var(--warn)}
.grn-summary .gs-act{margin-left:auto}
#view-grnupload #grnResultPanel{margin-top:6px}
#view-grnupload #grnIssuesGrid{min-height:220px}

/* The FIFO note on Create Estimate: what the SO will actually charge. */
.fifo-note{border:1px solid var(--line);border-radius:9px;
  background:#f8fafc;padding:7px 10px;margin:2px 0 12px;font-size:12.5px}
.fifo-note[hidden]{display:none}
/* One chip per item — the cart lines plus the one being typed. The full
   breakdown belongs to whichever chip is selected, so a five-line order stays
   one box instead of five stacked blocks. */
.fifo-chips{display:flex;flex-wrap:wrap;gap:6px}
.fifo-chip{display:inline-flex;align-items:center;gap:6px;cursor:default;
  border:1px solid var(--line);border-radius:999px;background:#fff;padding:3px 10px 3px 4px;
  font-size:11.5px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.fifo-chip:hover{border-color:var(--blue)}
/* The rate the SLB field displays, where FIFO will not charge it. */
.fifo-chip .fc-was{color:var(--muted-2);font-weight:600;text-decoration:line-through}
.fifo-chip .fc-flag{color:var(--warn);font-weight:800}
/* The line number, so a chip and its row in the cart are obviously the same
   item. The item being typed has no line yet and shows a "+". */
.fifo-chip .fc-no{display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;border-radius:50%;background:var(--blue-050);color:var(--blue-600);
  font-size:10.5px;font-weight:800}
.fifo-chip .fc-part{color:var(--navy)}
.fifo-chip .fc-qty{color:var(--muted-2);font-weight:600}
.fifo-chip .fc-rate{font-weight:800;color:var(--navy)}
/* Short forms so a chip stays a chip: "avl 13" = still available at that rate. */
.fifo-chip .fc-grn{color:var(--muted-2);font-weight:600}
.fifo-chip .fc-avl{color:var(--good);font-weight:700}
.fifo-chip.ch-differs{border-color:var(--amber);background:var(--amber-bg)}
.fifo-chip.ch-differs .fc-no{background:#fff;color:var(--amber)}
.fifo-chip.ch-short{border-color:var(--warn);background:var(--warn-bg)}
.fifo-chip.ch-short .fc-no{background:#fff;color:var(--warn)}
/* The lot the NEXT order would draw from, once these are exhausted. */
.fifo-chip.ch-next{border-style:dashed;opacity:.8}
.fifo-chip.ch-next .fc-part{color:var(--blue-600)}
.fifo-caveat{margin-top:6px;font-size:10.5px;color:var(--muted-2)}
/* The quantity split by rate for the item being typed — "6 @ ₹482 + 4 @ ₹513". */
.fifo-split{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14px;color:var(--text);
  padding:2px 2px 8px;margin-bottom:8px;border-bottom:1px dashed var(--line)}
.fifo-split .fs-l{font-weight:700;color:var(--muted)}
.fifo-split .fs-part{display:inline-flex;align-items:center;gap:5px}
.fifo-split .fs-part b{color:var(--navy);font-weight:800}
.fifo-split .fs-plus{color:var(--muted-2);font-weight:800;margin-right:4px}
.fifo-split .fs-tag{font-size:10.5px;font-weight:700;color:var(--muted-2);background:var(--line-2);border-radius:99px;padding:1px 7px}
.fifo-split .fs-eq{font-weight:800;color:var(--blue-600)}
.fifo-split .fs-avg{font-size:12px;color:var(--muted)}
.cart-split{font-size:11px;color:var(--muted);font-weight:600;white-space:nowrap}
.cart-split-row td{background:var(--blue-050)}

/* ── SLB Update ───────────────────────────────────────────────────────────
   The page is two tabs: raise a request, and the history of every request. */
#view-slbupdate .cd-pane{display:none}
#view-slbupdate .cd-pane.active{display:block}
#view-slbupdate .cd-tabs{margin-top:0}
.slb-lots{border:1px solid var(--line);border-radius:10px;overflow:auto;max-height:230px;margin-bottom:16px}
.slb-lots table.mini{margin:0}
.slb-lots thead th{position:sticky;top:0;background:#f8fafc;z-index:1}
.slb-lot{cursor:pointer}
.slb-lot:hover{background:#f6f9ff}
/* The chosen lot is the one whose rate will change — make that unmistakable. */
.slb-lot.sel{background:var(--blue-050)}
.slb-lot.sel td{font-weight:700;color:var(--navy)}
.fs-note{font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted-2);margin-left:8px}
.slb-ok,.slb-no{padding:4px 10px;font-size:11.5px;margin-right:4px}
.slb-ok{background:var(--good);border-color:var(--good);color:#fff}
.slb-no{background:var(--warn-bg);border-color:var(--warn-bg);color:var(--warn)}

/* Customer Update lives inside Customer Detail now: its own picker stays in the
   DOM for the flow that reads it, but is not shown. */
.cu-hidden{display:none}
.cu-status{min-height:18px;font-size:12px;margin-bottom:10px}
table.grid tbody td .cell-clip{display:block;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* red lock badge before locked customer names */
.lock-badge{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;
  border-radius:5px;background:var(--warn-bg);color:var(--warn);margin-right:7px;vertical-align:middle;flex:0 0 auto}
.lock-badge svg{width:12px;height:12px}
/* code card in the customer modal header */
.code-card{display:flex;flex-direction:column;align-items:flex-end;gap:1px;background:var(--blue-050);
  border:1px solid var(--blue-100);border-radius:10px;padding:6px 14px}
.code-card .cc-l{font-size:9px;font-weight:800;color:var(--blue);letter-spacing:.7px}
.code-card .cc-v{font-size:15px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
.cell-muted{color:var(--muted-2)}
.grid-empty{padding:44px 16px;text-align:center;color:var(--muted);font-size:14px}
.grid-empty.err{color:var(--warn)}

.grid-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 22px;
  border-top:1px solid var(--line);background:var(--panel)}
.grid-foot .rec{color:var(--muted);font-size:12px}
.grid-foot .rec b{color:var(--navy)}
.pager{display:flex;align-items:center;gap:4px;margin-left:auto}
.pager button{min-width:32px;height:32px;padding:0 9px;border:1px solid var(--line);background:#fff;color:#475569;
  border-radius:8px;font-size:13px;font-weight:600;cursor:pointer}
.pager button:hover:not(:disabled){border-color:var(--blue);color:var(--blue-600)}
.pager button.active{background:var(--blue);border-color:var(--blue);color:#fff}
.pager button:disabled{opacity:.45;cursor:not-allowed}
.pager .ell{color:var(--muted-2);padding:0 4px}

.btn-sm{padding:6px 14px;border:1px solid var(--blue);background:#fff;color:var(--blue-600);border-radius:8px;
  font-size:12px;font-weight:700;cursor:pointer;transition:.12s}
.btn-sm:hover{background:var(--blue);color:#fff}

/* ── Modal ────────────────────────────────────────────────────────────── */
.modal-back{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(2px);
  display:none;align-items:center;justify-content:center;z-index:60;padding:20px}
.modal-back.show{display:flex}
.modal{background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);width:100%;max-width:760px;
  max-height:88vh;overflow:auto;padding:24px}
.modal-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.modal-head h3{font-size:19px;font-weight:800;color:var(--navy)}
.modal-head .m-sub{color:var(--muted);font-size:13px;margin-top:3px}
.modal-close{margin-left:auto;background:none;border:none;color:var(--muted-2);font-size:24px;cursor:pointer;line-height:1}
.modal-close:hover{color:var(--warn)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px}
.tab{padding:10px 16px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--text)}
.tab.active{color:var(--blue-600);border-bottom-color:var(--blue)}
/* Dormant toggle in the customer-list toolbar — off is a plain button, on is
   filled, so the filtered state is obvious at a glance. */

/* ── Trading & payment strips ───────────────────────────────────────────────
   Same cell look as the money row above it, so the two read as one system
   rather than "big tiles" and "little tiles". Labelled per group. */
/* One row each: Billing, then Payments — full width, so five cells sit on a
   line instead of one wrapping alone onto a second row. */
.fact-strips{display:flex;flex-direction:column;gap:10px;flex:0 0 auto}
.fact-strip{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:stretch;gap:0;
  border:1px solid var(--line);border-radius:9px;overflow:hidden}
.fact-strip .xl-grid{border:0;border-radius:0;margin:0;align-content:stretch;background:var(--line)}
/* The cells fill the strip top to bottom. The grid's own margin-bottom (meant
   for the stand-alone money row) left a band of page background under them. */
.fact-strip{background:var(--panel)}
.fact-strip .xl-cell{height:100%}
/* The group label rides on the left edge in its own colour — three stacked
   headings were costing three lines of height on a page that has to fit. */
.fact-strip .fact-sec{display:flex;align-items:center;margin:0;padding:0 12px;
  font-size:10px;letter-spacing:.7px;color:#fff;background:var(--muted)}
.fs-blue{background:var(--blue)}
.fs-green{background:var(--good)}
.fs-violet{background:#7c3aed}
@media(max-width:700px){.fact-strip{grid-template-columns:1fr}
  .fact-strip .fact-sec{padding:5px 12px}}
.xl-auto{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
/* A value carrying a date AND an amount gets the room for both on one line. */
.xl-wide{grid-column:span 2}
.xl-cell .xl-v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xl-sep{color:var(--muted-2);margin:0 5px;font-weight:600}
.xl-v2{color:var(--blue-600)}
.xl-good .xl-v{color:var(--good)}
.xl-bad .xl-v{color:var(--warn)}

/* ── Fact tiles ─────────────────────────────────────────────────────────────
   Tiles are sized by what they hold: a bare count needs a narrow box, a date
   AND an amount needs a wide one. Forcing both to the same width is what made
   "31/08/2026 · ₹7,552" wrap onto two lines. Grouped under a section label so
   billing facts and payment facts read as different things. */
.fact-sec{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--muted-2);margin:2px 0 7px}
.fact-sec + .fact-grid{margin-bottom:12px}
.fact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px}
.fact{background:#f8fafc;border:1px solid var(--line-2);border-radius:10px;padding:8px 10px;min-width:0}
.fact-wide{grid-column:span 2}
.fact-l{font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted-2)}
.fact-row{display:flex;align-items:baseline;gap:6px;margin-top:3px;white-space:nowrap}
.fact-v{font-size:14px;font-weight:800;color:var(--navy)}
.fact-sep{color:var(--muted-2);font-size:12px}
.fact-v2{font-size:13px;font-weight:800;color:var(--blue-600)}
.fact-good .fact-v{color:var(--good)}
.fact-bad .fact-v{color:var(--warn)}

/* The score card carries the number alone; the reasons live in their own card. */
.score-summary{display:flex;justify-content:center;gap:14px;margin-top:6px;font-size:11.5px;font-weight:700}
.ss-good{color:var(--good)}
.ss-bad{color:var(--warn)}

/* ── Credit limit history (About) ──────────────────────────────────────── */
#cdpane-about .stat-grid{grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:9px;margin-bottom:0}
#cdpane-about .stat{padding:9px 11px;border-radius:9px}
#cdpane-about .stat .s-v{font-size:15px;margin-top:2px}
#cdpane-about .xl-grid{flex:0 0 auto}
.panel-pills .pill-warn{background:var(--amber-bg)}
.panel-pills .pill-warn b{color:var(--amber)}
.panel-pills .pill-bad{background:var(--warn-bg)}
.panel-pills .pill-bad b{color:var(--warn)}
.enh-sub{font-size:11px;color:var(--muted-2);font-weight:700;margin-bottom:10px}
.enh-list{display:flex;flex-direction:column}
/* A rail down the left so repeated increases read as a run, not a list. */
.enh{display:grid;grid-template-columns:82px minmax(0,1fr);gap:2px 10px;padding:8px 0 8px 14px;
  position:relative;border-left:2px solid var(--line)}
.enh::before{content:'';position:absolute;left:-5px;top:15px;width:8px;height:8px;border-radius:50%;
  background:var(--blue);border:2px solid var(--panel)}
.enh:first-child::before{background:var(--amber)}
.enh-date{font-size:12px;color:var(--muted);font-weight:700}
.enh-move{font-size:13px;font-weight:700;color:var(--navy);display:flex;gap:6px;align-items:baseline;
  white-space:nowrap}
.enh-old{color:var(--muted-2);text-decoration:line-through;font-weight:600}
.enh-arrow{color:var(--muted-2)}
.enh-new{color:var(--good)}
.enh-by{grid-column:2;font-size:10.5px;color:var(--muted-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Score card: gauge and factors as two tabs in one card. */
.tabs-sm{margin-left:auto;margin-bottom:0;border-bottom:0;gap:0}
.tabs-sm .tab{padding:3px 10px;font-size:11.5px;border-bottom-width:2px}
.score-pane{display:none;min-height:0}
.score-pane.active{display:flex;flex-direction:column;flex:1;min-height:0}
.sales-chart{flex:1;min-height:0}

/* ── About tab: credit score + profile ──────────────────────────────────── */
/* Row 1: the score beside its reasons. Row 2: the two histories. Row 1 gets a
   little more of the leftover height because the factor list is the long one. */
.about-rows{display:grid;grid-template-rows:minmax(330px,1.1fr) minmax(220px,.9fr);gap:12px;
  flex:1 0 auto}
.about-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-height:0}
.about-row-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.about-rows .panel{display:flex;flex-direction:column;min-height:0;padding:14px 16px}
.about-rows .panel-head{margin-bottom:10px}
/* Each card keeps its header fixed and scrolls its own body. */
.panel-scroll{overflow-y:auto;min-height:0;overscroll-behavior:contain;padding-right:2px}
/* The gauge sits in the middle of its card rather than clinging to the top. */
.score-panel #cdScore.active{justify-content:center}
/* The long tabs (Criteria, What moves it) scroll inside the card instead of
   growing it — the Criteria list is ~50 rows and stretched the whole row, the
   sales chart beside it included. Capped at every width (the narrow-screen
   rule that lets .panel-scroll grow must not apply to these). */
.about-rows .score-panel #cdScoreCriteria,
.about-rows .score-panel #cdScoreFactors{max-height:clamp(300px,42vh,440px);overflow-y:auto;
  overscroll-behavior:contain;padding-right:6px}
@media(max-width:1150px){
  .about-rows .score-panel #cdScoreCriteria,
  .about-rows .score-panel #cdScoreFactors{overflow-y:auto;min-height:0}
}
/* Factors flow into two columns when there is width for it. */
.score-factors{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:7px 20px;align-content:start}

@media(max-width:1150px){
  .about-rows{grid-template-rows:auto auto;flex:0 0 auto;min-height:auto}
  .about-row{min-height:auto}
  .about-rows .panel{min-height:auto}
  .panel-scroll{overflow:visible;min-height:auto}
}
@media(max-width:760px){
  .about-row,.about-row-2{grid-template-columns:1fr}
  #cdpane-about .xl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* History panel: small tab buttons in a column on the left, the chosen history
   filling the rest. Replaces two half-width cards that were mostly empty. */
.about-rows .panel.hist-panel{flex-direction:row;padding:0;overflow:hidden}
.hist-tabs{flex:0 0 176px;display:flex;flex-direction:column;gap:4px;padding:12px 10px;
  border-right:1px solid var(--line);background:var(--bg,#f7f9fc)}
.hist-tab{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;
  padding:7px 10px;border:0;border-radius:8px;background:transparent;cursor:pointer;
  font:inherit;font-size:12px;font-weight:700;color:var(--muted);text-align:left}
.hist-tab:hover{background:rgba(37,99,235,.06);color:var(--navy)}
.hist-tab.active{background:var(--panel,#fff);color:var(--blue-600);box-shadow:0 1px 3px rgba(15,27,51,.08)}
.hist-tab .ht-l{white-space:nowrap}
.hist-tab .pill{font-size:10.5px;padding:1px 7px;white-space:nowrap;min-width:20px;text-align:center}
.hist-tab .pill:empty{display:none}
.hist-tab .pill-warn{background:var(--amber-bg)}.hist-tab .pill-warn b{color:var(--amber)}
.hist-tab .pill-bad{background:var(--warn-bg)}.hist-tab .pill-bad b{color:var(--warn)}
.hist-body{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0;padding:14px 18px}
.hist-pane{display:none}
.hist-pane.active{display:block;flex:1}
.unl-state{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;margin-bottom:10px}
.unl-act{font-size:12px;font-weight:800}
.unl-act.unl-u{color:var(--good)}.unl-act.unl-l{color:var(--warn)}
@media(max-width:760px){
  .about-rows .panel.hist-panel{flex-direction:column}
  .hist-tabs{flex:0 0 auto;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}
  .hist-tab{width:auto;white-space:nowrap}
}
.score-arc{width:100%;max-width:200px;display:block;margin:0 auto}
.score-num{font-size:38px;font-weight:800;font-family:inherit}
.score-band{font-size:12px;font-weight:700;fill:var(--muted)}
.score-scale{display:flex;justify-content:space-between;width:100%;max-width:200px;margin:0 auto 10px;
  font-size:10.5px;color:var(--muted-2);font-weight:700}
.score-factors{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.sf{display:grid;grid-template-columns:44px 1fr;gap:9px;align-items:baseline}
.sf-imp{font-size:12px;font-weight:800;text-align:right;color:var(--muted-2);font-variant-numeric:tabular-nums}
.sf-imp.bad{color:var(--warn)}.sf-imp.good{color:var(--good)}
.sf-l{font-size:12.5px;font-weight:700;color:var(--text)}
.sf-d{grid-column:2;font-size:11px;color:var(--muted-2);margin-top:-4px}
/* Score criteria tab — the rules, one compact section per factor. */
.crit{padding:2px 2px 8px}
.crit-intro{font-size:12px;color:var(--muted);line-height:1.5;margin:0 0 10px}
.crit-sec{padding:8px 0;border-top:1px solid var(--line)}
.crit-h{font-size:12.5px;font-weight:800;color:var(--navy);margin-bottom:3px}
.crit-note{font-size:11px;color:var(--muted-2);margin-bottom:4px;line-height:1.4}
.crit-r{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--text);padding:2px 0}
.crit-r b{font-weight:700;color:var(--navy)}
.score-unrated{text-align:center;padding:22px 8px 8px}
.su-dash{font-size:44px;font-weight:800;color:var(--muted-2);line-height:1}
.su-band{font-size:13px;font-weight:800;color:var(--muted);margin-top:6px}
.su-why{font-size:11.5px;color:var(--muted-2);margin-top:8px;line-height:1.5}
.score-note{margin-top:10px;padding-top:9px;border-top:1px solid var(--line-2);
  font-size:10.5px;color:var(--muted-2);text-align:center}

/* ── Customer profile card (Customer Detail) ────────────────────────────────
   Who the customer is, above the money tiles: name, trading status, and the
   facts a rep asks for on a call — salesman, phone, town, last bill/payment. */
.cd-profile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:12px 16px;flex:0 0 auto}
.cd-profile:empty{display:none}
.cdp-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
/* The name rides on the selector's line (.cd-name); the profile card on the
   About tab carries the status tag and the identity facts. */
.cdp-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px 16px}
.cdp-l{font-size:10.5px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.4px;font-weight:700}
.cdp-v{font-size:13.5px;color:var(--text);font-weight:600;margin-top:3px;overflow-wrap:anywhere}
/* The address is long — it gets the width of two fact columns. */
.cdp-wide{grid-column:span 2}
.cdp-good .cdp-v{color:var(--good);font-weight:700}
.cdp-warn .cdp-v{color:var(--warn);font-weight:700}
.cdp-wide .cdp-v{font-weight:500;line-height:1.45}

/* Status tags. Always carry their own words — never colour alone. */
.tag{display:inline-flex;align-items:center;padding:4px 11px;border-radius:20px;
  font-size:11.5px;font-weight:700;line-height:1.5}
.tag-good{background:var(--good-bg);color:var(--good)}
.tag-bad{background:var(--warn-bg);color:var(--warn)}
.tag-warn{background:var(--amber-bg);color:var(--amber)}
.tag-muted{background:var(--line-2);color:var(--muted)}

/* Count pills in a panel head — small facts that belong beside the list they
   describe rather than taking a KPI tile of their own. */
.panel-pills{display:flex;flex-wrap:wrap;gap:7px;margin-left:auto}
.panel-pills .pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:20px;
  background:var(--blue-050);color:var(--muted);font-size:11.5px;line-height:1;white-space:nowrap}
.panel-pills .pill b{color:var(--navy);font-weight:800}
.panel-pills .pill-ic{display:flex;color:var(--blue)}

.tab-pane{display:none}.tab-pane.active{display:block}
/* A pane whose content can grow keeps the panel's height fixed and scrolls
   inside it, so one long list can't push the dashboard row out of alignment.
   Height matches the chart panel beside it. */
.tab-pane.scroll{max-height:280px;overflow-y:auto;overscroll-behavior:contain}
.tab-pane.scroll table.mini thead th{position:sticky;top:0;z-index:1;background:var(--panel);
  box-shadow:inset 0 -1px 0 var(--line-2)}
.tab-pane.scroll table.mini tbody tr:last-child td{border-bottom:0}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.stat{background:#f8fafc;border:1px solid var(--line);border-radius:11px;padding:14px}
.stat .s-l{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.4px}
.stat .s-v{font-size:18px;font-weight:800;margin-top:4px;color:var(--navy)}
.stat .s-v.good{color:var(--good)}.stat .s-v.warn{color:var(--warn)}
.sec-title{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-weight:700}
.ord-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.ord-toolbar input[type=date]{padding:8px 12px;border:1px solid var(--line);border-radius:8px;font-size:13px;color:var(--text)}
.ord-toolbar .dash{color:var(--muted-2)}
table.mini{width:100%;border-collapse:collapse;font-size:13px}
table.mini th,table.mini td{padding:9px 10px;border-bottom:1px solid var(--line-2);text-align:left}
table.mini th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.4px}
table.mini td.num,table.mini th.num{text-align:right}
.mini-msg{color:var(--muted);font-size:13px;text-align:center;padding:20px 0}
.mini-msg.err{color:var(--warn)}

/* ── Branded loader (IMPAL letter-by-letter) ──────────────────────────── */
.app-loader{position:fixed;inset:0;z-index:90;display:none;flex-direction:column;gap:10px;
  align-items:center;justify-content:center;background:rgba(243,246,251,.82);backdrop-filter:blur(3px)}
.app-loader.show{display:flex}
.al-word{display:flex;gap:4px;font-size:44px;font-weight:900;letter-spacing:3px}
.al-word span{color:var(--navy);opacity:.18;transform:translateY(0);animation:alPulse 1.15s infinite ease-in-out}
.al-word span:nth-child(1){animation-delay:0s}
.al-word span:nth-child(2){animation-delay:.13s}
.al-word span:nth-child(3){animation-delay:.26s}
.al-word span:nth-child(4){animation-delay:.39s}
.al-word span:nth-child(5){animation-delay:.52s}
@keyframes alPulse{0%,55%,100%{opacity:.18;transform:translateY(0);color:var(--navy)}
  28%{opacity:1;transform:translateY(-9px);color:var(--blue)}}
.al-sub{font-size:12px;font-weight:700;letter-spacing:2px;color:var(--muted-2);text-transform:uppercase}

/* ── Sandbox theme (calm teal accent — clearly not production, not harsh) ─ */
body.env-sandbox{
  --blue:#0d9488; --blue-600:#0f766e; --blue-050:#f0fdfa; --blue-100:#cbf3ec;
}
body.env-sandbox .btn-primary{background:linear-gradient(135deg,#14b8a6,#0d9488);box-shadow:0 6px 16px rgba(13,148,136,.28)}
body.env-sandbox .side-item.active,body.env-sandbox .side-item:hover{background:var(--blue-050);color:var(--blue-600)}
body.env-sandbox .env-switch button.active{color:#0f766e}
body.env-sandbox #loginWrap{background:radial-gradient(1200px 600px at 20% -10%,#1c3b3a 0%,#122726 40%,#0d1c1b 100%),#0d1c1b}
body.env-sandbox .login-left{background:linear-gradient(160deg,#14302e 0%,#0f2523 100%)}
/* Sandbox: only the side menu goes dark (clear cue, content stays light) */
body.env-sandbox .sidebar{background:#12302c;border-right-color:#1c3f3a}
body.env-sandbox .side-brand{border-bottom-color:#1c3f3a}
body.env-sandbox .side-brand img{background:#fff;border-radius:8px;padding:5px 9px}
body.env-sandbox .side-group{color:#6f938c}
body.env-sandbox .side-item{color:#c7d6d2}
body.env-sandbox .side-item:hover,body.env-sandbox .side-item.active{background:rgba(20,184,166,.16);color:#5eead4}
body.env-sandbox .side-item .si-ic{color:#7fa9a2}
body.env-sandbox .side-item.active .si-ic,body.env-sandbox .side-item:hover .si-ic{color:#5eead4}
body.env-sandbox .side-foot{color:#6f938c;border-top-color:#1c3f3a}
body.env-sandbox .side-foot b{color:#a7f3d0}

@media(max-width:860px){
  .login-left{display:none}
  .login-right{border-radius:20px}
  #appShell.show{grid-template-columns:0 1fr}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:248px;z-index:70;transform:translateX(-100%);transition:.2s}
  .sidebar.open{transform:none;box-shadow:var(--shadow-lg)}
}

/* Request Status pills */
.status-pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700}
.status-pill.good{background:var(--good-bg);color:var(--good)}
.status-pill.err{background:var(--warn-bg);color:var(--warn)}
.status-pill.warn{background:var(--amber-bg);color:var(--amber)}

/* SOA — inline PDF statement viewer */
#view-soa.active{display:flex;flex-direction:column;flex:1;min-height:0}
.soa-viewer{flex:1;min-height:0;margin:14px 24px 20px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#f8fafc;display:flex}
.soa-frame{width:100%;height:100%;border:none}
.soa-empty{margin:auto;color:var(--muted);font-size:14px;padding:40px}

/* Stock — one tabbed page */
#view-stock.active{padding:20px 28px}
#view-stock #stk-own:not([hidden]),#view-stock #stk-all:not([hidden]),
#view-stock #stk-surplus:not([hidden]),#view-stock #stk-inward:not([hidden]){flex:1;min-height:0;display:flex;flex-direction:column}
#view-stock #stockownGrid,#view-stock #stockallGrid,#view-stock #stocksurplusGrid,#view-stock #stockinwardGrid{flex:1;min-height:0;display:flex;flex-direction:column}

/* Grid loading spinner */
.grid-empty.loading{color:var(--muted);display:flex;align-items:center;justify-content:center;gap:10px}
.grid-spin{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--blue);border-radius:50%;display:inline-block;animation:grid-spin .7s linear infinite}
@keyframes grid-spin{to{transform:rotate(360deg)}}
/* Create SO button — sandbox write only; hidden in read-only (Production) sessions */
body.read-only .atc-so-btn{display:none!important}
/* Create Sales Order page */
/* Create Sales Order + SO History are one page now (#view-salesorders). */
#view-salesorders.active{padding:20px 28px}
#view-salesorders .rpt-bar{margin:0 0 14px;align-items:center}
#view-salesorders .cso-hint{flex:0 0 auto;align-self:flex-start;margin-bottom:10px}
.cso-hint{font-size:13px;color:var(--muted);font-weight:600;flex:1;align-self:center}
.cso-go{background:var(--blue);color:#fff;border:none;border-radius:7px;padding:6px 12px;font-weight:700;cursor:pointer}
.cso-go:hover{background:var(--blue-600)}
/* Production keeps the open list for "Check (no posting)"; Create SO only with the order switch. */
body.read-only:not(.order-writes) .cso-go{display:none}
.cso-acts{display:flex;gap:6px;justify-content:flex-end}
.cso-chk{background:#fff;color:var(--blue-600);border:1px solid var(--blue-100);border-radius:7px;padding:5px 10px;font-weight:700;cursor:pointer}
.cso-chk:hover{background:var(--blue-050)}
.cso-chk[disabled]{opacity:.6;cursor:progress}
#csoCheckBody{padding:4px 22px 20px;font-size:13.5px}
.cc-sec{margin-top:14px}
.cc-sec h4{margin:0 0 7px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.cc-chips{display:flex;flex-wrap:wrap;gap:8px}
.cc-chip{border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-weight:700;font-size:12.5px}
.cc-chip.ok{color:#15803d;border-color:#bbf7d0;background:#f0fdf4}
.cc-chip.bad{color:#b91c1c;border-color:#fecaca;background:#fef2f2}
.cc-tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.cc-tbl th,.cc-tbl td{padding:6px 8px;border-bottom:1px solid var(--line-2);text-align:left}
.cc-tbl th{font-size:12px;color:var(--muted);font-weight:700}
.cc-tbl td.n,.cc-tbl th.n{text-align:right}
.cc-note{margin-top:10px;color:var(--muted);font-size:12.5px}
/* Top progress ribbon for long background ops (Create SO -> Invoice -> PDF) */
.proc-ribbon{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:9999;display:none;
  align-items:center;gap:10px;background:var(--navy);color:#fff;padding:11px 22px;
  border-radius:0 0 14px 14px;box-shadow:0 6px 20px rgba(0,0,0,.22);font-size:14px;font-weight:700;
  max-width:92vw}
.proc-ribbon.show{display:flex}
/* Create SO step panel: one row per NetSuite call, live timer on the running one */
.proc-steps{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:9999;display:none;
  flex-direction:column;gap:6px;background:var(--navy);color:#fff;padding:12px 20px 14px;
  border-radius:0 0 14px 14px;box-shadow:0 6px 20px rgba(0,0,0,.22);font-size:13.5px;
  width:min(520px,92vw)}
.proc-steps.show{display:flex}
.ps-title{display:flex;align-items:center;gap:10px;font-weight:800;font-size:14px;margin-bottom:2px}
.ps-title .ps-total{margin-left:auto;font-variant-numeric:tabular-nums}
.ps-row{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:8px;align-items:center;opacity:.6}
.ps-row .ps-t{font-variant-numeric:tabular-nums;font-size:12.5px;white-space:nowrap}
.ps-row.run{opacity:1;font-weight:700}
.ps-row.ok{opacity:.95}.ps-row.ok .ps-ic{color:#4ade80}
.ps-row.bad{opacity:1}.ps-row.bad .ps-ic,.ps-row.bad .ps-t{color:#fca5a5}
.ps-row.skip{opacity:.5}
/* Create Estimate when the customer cannot be billed: the form is greyed and
   inert, and the reason sits on top of it. No dismiss — the block is NetSuite's,
   not a note the user can wave away. */
#cdpane-estimate{position:relative}
#cdpane-estimate.blocked > *:not(.pane-block){opacity:.38;filter:grayscale(1);pointer-events:none;
  user-select:none}
.pane-block{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-start;justify-content:center;
  padding-top:46px;background:rgba(243,246,251,.5)}
.pb-card{display:flex;align-items:flex-start;gap:13px;max-width:560px;background:#fff;
  border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:12px;
  box-shadow:0 10px 28px rgba(15,23,42,.13);padding:15px 20px}
.pb-ic{display:flex;color:var(--warn);flex:0 0 auto;margin-top:1px}
.pb-t{font-size:14.5px;font-weight:800;color:var(--navy)}
.pb-m{margin-top:3px;font-size:13px;font-weight:700;color:var(--warn)}
.pb-n{margin-top:7px;font-size:12px;color:var(--muted)}
.proc-spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%;display:inline-block;animation:grid-spin .7s linear infinite;flex:0 0 auto}
.cso-go.cso-working{opacity:.85;cursor:progress}
.cso-go.cso-working .proc-spin{border-color:rgba(255,255,255,.5);border-top-color:#fff}
/* Styled confirm dialog */
.cbox-ov{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;
  background:rgba(15,23,42,.45);backdrop-filter:blur(2px);padding:20px}
.cbox-ov.show{display:flex}
.cbox{background:var(--panel,#fff);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.28);
  max-width:420px;width:100%;padding:24px;text-align:center}
.cbox-ic{width:48px;height:48px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--blue-050,#eef4ff);color:var(--blue,#2563eb)}
.cbox-ic-warn{background:var(--warn-050,#fff7ed);color:var(--warn,#e0812a)}
.cbox-ic-info{background:var(--blue-050,#eef4ff);color:var(--blue,#2563eb)}
.cbox-title{font-size:18px;font-weight:800;color:var(--navy,#0f172a);margin-bottom:8px}
.cbox-msg{font-size:14px;color:var(--muted,#64748b);line-height:1.5;margin-bottom:22px}
.cbox-actions{display:flex;gap:10px;justify-content:center}
.cbox-actions button{padding:10px 22px;border-radius:9px;font-size:14px;font-weight:700;cursor:pointer;border:none}
.cbox-cancel{background:var(--line,#e2e8f0);color:var(--navy,#0f172a)}
.cbox-cancel:hover{background:#d7dee8}
.cbox .btn-primary{min-width:120px}

/* Average collection days — the working. */
.xl-click{cursor:pointer}
.xl-click:hover{background:var(--blue-050)}
.k-sub-link{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.k-sub-link:hover{color:var(--blue-600);text-decoration:underline}
.cdays-modal{max-width:880px}
/* SOA month-wise totals, above the statement */
.soa-months{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px 12px;margin-bottom:12px;overflow-x:auto}
.soa-months table{width:100%}
.soa-months tfoot td{font-weight:800;border-top:2px solid var(--line)}
.soa-months-note{color:var(--muted);font-size:12.5px;margin-bottom:10px}
/* Sales detail (dashboard Sales tiles) */
.sd-modal{max-width:1100px}
.sd-filters{grid-template-columns:repeat(6,minmax(0,1fr));margin-bottom:14px}
@media(max-width:960px){.sd-filters{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.sd-filters{grid-template-columns:1fr}}
.sd-summary{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
#sdBack{margin-bottom:10px}
.pc-filters{margin-bottom:14px}
.cdays-formula{background:var(--blue-050);border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.6;color:var(--text);margin-bottom:12px}
.cdays-note{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5}
.cdays-calc{border:1px solid var(--line);border-radius:10px;padding:6px 14px;margin-bottom:12px}
.cc-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:13px;border-bottom:1px dashed var(--line)}
.cc-row:last-child{border-bottom:0}
.cc-row b{font-variant-numeric:tabular-nums;color:var(--navy)}
.cc-res b{color:var(--blue-600);font-size:15px}
.cdays-spread{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.cdays-pill{background:var(--blue-050);color:var(--muted);border-radius:99px;padding:3px 10px;font-size:12px}
.cdays-pill b{color:var(--navy)}
.cdays-table{max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:10px}
.cdays-table table{width:100%}
.cdays-table thead th{position:sticky;top:0;background:#fff}
.cdays-table tfoot td{font-weight:800;border-top:2px solid var(--line)}

/* Customer List category filter + clickable KPI tiles */
.cust-cat{display:inline-flex;align-items:center;gap:8px}
.cust-cat-lbl{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.cust-cat select{min-width:230px;cursor:pointer}
.kpi-link{cursor:pointer}
.kpi-link:hover{box-shadow:0 0 0 2px var(--blue-050)}
.kpi-link:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Credit Limit tab: sandbox banner + credit picture */
.cu-sandbox-banner{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;padding:12px 14px;
  border:1px solid #f5d38a;background:#fff8e6;color:#7a4b00;border-radius:10px;font-size:13px;line-height:1.45}
.cu-sandbox-banner strong{color:#5c3800}
.cu-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.cu-fact{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;min-width:0}
.cu-fact-l{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.cu-fact-v{margin-top:4px;font-size:15px;font-weight:700;color:var(--text);overflow-wrap:anywhere}
.cu-fact-v .cell-muted{font-size:12px;font-weight:500}
.cu-fact.tone-good .cu-fact-v{color:#16a34a}
.cu-fact.tone-bad .cu-fact-v{color:#dc2626}
.cu-fact.tone-warn .cu-fact-v{color:#b45309}
/* Request Status: source picker on the tab row (right), scope note under it,
   and an approver's own requests made unmistakable. */
#rsTabs{align-items:center;flex-wrap:wrap}
.rs-source{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:4px 16px 6px}
.rs-source > span{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.rs-source select{min-width:220px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:#fff;color:var(--text)}
.rs-scope{padding:0 16px 10px;font-size:12.5px;color:var(--muted)}
.rs-count{display:inline-block;min-width:20px;margin-left:6px;padding:1px 7px;border-radius:999px;
  background:var(--line);color:var(--muted);font-size:11px;font-weight:700;text-align:center}
.cd-tab.active .rs-count{background:var(--blue-050);color:var(--blue)}
.cd-tab.rs-mine{color:#b45309}
.cd-tab.rs-mine .rs-count{background:#d97706;color:#fff}
.cd-tab.rs-mine.active{color:#b45309;border-bottom-color:#d97706}
tr.rs-row-mine td{background:#fff8e6}
tr.rs-row-mine td:first-child{box-shadow:inset 4px 0 0 #d97706;font-weight:700}
.status-pill.info{background:#d97706;color:#fff}
@media(max-width:720px){.rs-source{margin-left:0;width:100%}.rs-source select{flex:1;min-width:0}}
.rs-type{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11.5px;font-weight:700;white-space:nowrap}
.rs-type-newcustomer{background:#e9f7ef;color:#15803d}
.rs-type-credit{background:#e8eeff;color:#2f54eb}
.rs-type-slb{background:#f3e8ff;color:#7c3aed}
.rs-source[hidden]{display:none}

/* Request review modal */
.req-modal{max-width:880px;max-height:calc(100vh - 48px);overflow:auto}
.req-sec{padding:14px 0;border-top:1px solid var(--line)}
.req-sec:first-child{border-top:0;padding-top:0}
.req-status{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.req-ask{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:14px 16px;border-radius:12px;background:#f7f9fc;margin-bottom:14px}
.req-big{font-size:22px;font-weight:800;color:var(--navy)}
.req-big-new{color:var(--blue)}
.req-big .cell-muted{font-size:13px;font-weight:600}
.req-arrow{font-size:22px;color:var(--muted-2)}
.req-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 18px}
.req-k{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.req-v{margin-top:3px;font-size:14px;font-weight:600;color:var(--text);overflow-wrap:anywhere}
.req-h{font-size:14px;font-weight:800;color:var(--navy);margin:0 0 10px}
.req-h .cell-muted{font-weight:500;font-size:12px}
.req-foot{padding-top:12px;border-top:1px solid var(--line);font-size:12.5px}
@media(max-width:600px){.req-big{font-size:18px}}
.req-decide{padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.req-decide textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:13.5px;resize:vertical}
.req-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;
  background:#f7f9fc;border:1px solid transparent;transition:background .15s,border-color .15s}
.req-note{margin-right:auto;font-size:12px;color:var(--muted)}
.req-confirm{margin-right:auto;font-size:13.5px;color:var(--text)}
.req-actions.confirming.approve{background:#ecfdf3;border-color:#bbe5c9}
.req-actions.confirming.reject{background:#fdecec;border-color:#f3c7c7}
.req-btn{appearance:none;border-radius:9px;padding:9px 16px;font:inherit;font-size:13.5px;font-weight:700;
  cursor:pointer;border:1px solid transparent;white-space:nowrap}
.req-btn:disabled{opacity:.6;cursor:progress}
.req-btn-approve{background:#16a34a;color:#fff}
.req-btn-approve:hover{background:#15803d}
.req-btn-reject{background:#fff;color:#dc2626;border-color:#f3c7c7}
.req-btn-reject:hover{background:#fdecec}
.req-btn-reject-solid{background:#dc2626;color:#fff}
.req-btn-reject-solid:hover{background:#b91c1c}
.req-btn-ghost{background:#fff;color:var(--text);border-color:var(--line)}
@media(max-width:600px){.req-note,.req-confirm{flex-basis:100%}.req-btn{flex:1}}
/* confirmInPlace() on an ordinary action bar */
.est-actions.cip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:12px}
.est-actions.cip.approve{background:#ecfdf3;border:1px solid #bbe5c9}
.est-actions.cip.reject{background:#fdecec;border:1px solid #f3c7c7}
.rs-scope-warn{color:#b45309}
.rs-scope .rs-retry{font-weight:700;color:var(--blue)}
.req-big-rej{color:#dc2626;text-decoration:line-through;text-decoration-thickness:2px}
.req-result{margin:0 0 12px;padding:10px 12px;border-radius:10px;font-size:13.5px}
.req-result.approved{background:#ecfdf3;color:#166534;border:1px solid #bbe5c9}
.req-result.rejected{background:#fdecec;color:#991b1b;border:1px solid #f3c7c7}
.req-decide .req-result{margin:0}
/* Enhancement request history in the request review — a compact sheet */
.eh-table{width:100%;border-collapse:collapse;font-size:13px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.eh-table th{background:#f7f9fc;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  text-align:left;padding:6px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.eh-table td{padding:6px 12px;border-bottom:1px solid #f1f2f5;white-space:nowrap;line-height:1.3}
.eh-table tr:last-child td{border-bottom:0}
.eh-table .num{text-align:right;font-variant-numeric:tabular-nums}
.eh-table td.num{font-weight:700;color:var(--navy)}
.eh-table td:nth-child(3){color:var(--muted)}
.eh-table .eh-tag{width:1%;text-align:right;font-size:11px;font-weight:700;color:#b45309}
.eh-table tr.eh-this td{background:#fff8e6}
.cu-sandbox-banner[hidden]{display:none}
/* Back order notice in Create Estimate */
.bo-note{margin:4px 0 12px;padding:10px 12px;border:1px solid #f5d38a;background:#fff8e6;border-radius:10px}
.bo-note[hidden]{display:none}
.bo-head{font-size:13px;color:#7a4b00;margin-bottom:8px}
.bo-table{background:#fff}
/* Background Send Order status */
.est-job{margin:10px 0 0;padding:10px 12px;border-radius:10px;font-size:13.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.est-job[hidden]{display:none}
.est-job.running{background:#eef3ff;border:1px solid #cfdcff;color:#1e3a8a}
.est-job.done{background:#ecfdf3;border:1px solid #bbe5c9;color:#166534}
.est-job.failed{background:#fdecec;border:1px solid #f3c7c7;color:#991b1b}
.est-job-spin{width:14px;height:14px;border-radius:50%;border:2px solid #9db4f5;border-top-color:#2f54eb;animation:estspin .8s linear infinite;flex:0 0 auto}
@keyframes estspin{to{transform:rotate(360deg)}}

/* ── Dashboard layout switch (A / B / C) beside the branch picker ───────────── */
.dash-layout{margin-left:auto;align-self:center}
.dash-layout[hidden]{display:none}
.dash-layout:not([hidden]) + .dash-report{margin-left:0}
.dash-layout button{white-space:nowrap}

/* ── Layouts B (topic panels) and C (headlines + lists), drawn by paintDashAlt() ─ */
#dashAlt{--dl-g:#16a34a;--dl-w:#d97706;--dl-r:#dc2626;--dl-v:#7c3aed;--dl-n:#cbd5e1;margin-bottom:18px}
#dashAlt[hidden]{display:none}
.dl-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
.dl-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.dl-pn{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:16px 18px;min-width:0}
.dl-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.dl-head h3{margin:0;font-size:13.5px;font-weight:800;color:var(--navy);letter-spacing:.03em;text-transform:uppercase}
.dl-ic{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto}
.dl-ic svg{width:16px;height:16px}
.dl-ic.t-blue,.dl-hl.t-blue{--dl-acc:#2563eb}.dl-ic.t-cyan,.dl-hl.t-cyan{--dl-acc:#0891b2}.dl-ic.t-violet,.dl-hl.t-violet{--dl-acc:#7c3aed}
.dl-ic.t-green,.dl-hl.t-green{--dl-acc:#16a34a}.dl-ic.t-amber,.dl-hl.t-amber{--dl-acc:#d97706}.dl-ic.t-red,.dl-hl.t-red{--dl-acc:#dc2626}
.dl-ic{background:var(--dl-acc)}
.dl-seg{margin-left:auto}.dl-seg button{padding:4px 10px;font-size:11.5px}
.dl-lbl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.dl-big{font-size:clamp(22px,1vw + 12px,30px);font-weight:800;color:var(--navy);letter-spacing:-.4px;line-height:1.15;white-space:nowrap}
.dl-big.sm{font-size:clamp(17px,.6vw + 10px,22px)}
.dl-note{font-size:12.5px;color:var(--muted)}.dl-note b{color:var(--navy)}
#dashAlt .w{color:#b45309}#dashAlt .g{color:var(--good)}#dashAlt .r{color:var(--warn)}
i.dl-g{background:var(--dl-g)}i.dl-w,.dl-dot.dl-w{background:var(--dl-w)}i.dl-r,.dl-dot.dl-r{background:var(--dl-r)}
i.dl-v,.dl-dot.dl-v{background:var(--dl-v)}i.dl-n,.dl-dot.dl-n{background:var(--dl-n)}.dl-dot.dl-g{background:var(--dl-g)}
.dl-bar{height:8px;border-radius:99px;background:#eef1f6;overflow:hidden}
.dl-bar i{display:block;height:100%;border-radius:99px}
.dl-stack{display:flex;height:14px;border-radius:99px;overflow:hidden;gap:2px;margin:10px 0 12px;background:#eef1f6}
.dl-stack i{display:block;height:100%}
.dl-legend{display:grid;gap:4px}
.dl-legend > div{display:grid;grid-template-columns:12px 1fr auto 56px;gap:10px;align-items:center;font-size:13.5px;padding:3px 4px;border-radius:8px}
.dl-legend b{color:var(--navy);text-align:right;font-variant-numeric:tabular-nums}
.dl-dot{width:10px;height:10px;border-radius:3px}
.dl-p{font-size:12px;font-weight:700;color:var(--muted);text-align:right;white-space:nowrap}
.dl-p.g{color:var(--good)}.dl-p.w{color:#b45309}.dl-p.r{color:var(--warn)}
.dl-rows{display:grid}
.dl-row{display:grid;grid-template-columns:minmax(0,1fr) auto 64px;gap:12px;align-items:center;padding:8px 4px;border-top:1px solid var(--line-2);font-size:13.5px;border-radius:6px}
.dl-row:first-child{border-top:0}
.dl-row > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-row b{color:var(--navy);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.dl-row .sk-val{height:14px;width:70px;margin:0}
.dl-sales{display:grid;grid-template-columns:110px minmax(0,1fr);gap:20px;align-items:center}
.dl-ring{width:110px;height:110px}
.dl-ring circle{fill:none;stroke-width:12}.dl-ring-bg{stroke:#eef1f6}.dl-ring-fg{stroke-linecap:round}
.dl-ring-fg.dl-g{stroke:var(--dl-g)}.dl-ring-fg.dl-w{stroke:var(--dl-w)}.dl-ring-fg.dl-r{stroke:var(--dl-r)}
.dl-ring text{font-size:17px;font-weight:800;fill:var(--navy)}
.dl-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
.dl-stat{min-width:0;border-radius:8px}
.dl-stat .dl-note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-mini{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2);border-radius:8px}
.dl-coll{display:flex;gap:28px;align-items:flex-end;margin-bottom:10px}
.dl-prog{flex:1;min-width:0;border-radius:8px}
.dl-spread{display:flex;justify-content:space-between;gap:8px;margin-bottom:4px}
.dl-ful{display:flex;gap:28px;align-items:flex-end;border-radius:8px}
.dl-foot{margin-top:10px}
.dl-loading{padding:20px 0}
.dl-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:16px}
.dl-hl{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--dl-acc);border-radius:16px;box-shadow:var(--shadow);padding:13px 15px;min-width:0}
.dl-hl .dl-big{margin:4px 0 2px}
.dl-hl .dl-note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-hl .dl-bar{margin-top:10px;height:6px}
#dashAlt [data-go]{cursor:pointer;transition:background .12s}
#dashAlt .dl-row[data-go]:hover,#dashAlt .dl-legend [data-go]:hover,#dashAlt .dl-stat[data-go]:hover,#dashAlt .dl-mini[data-go]:hover{background:var(--blue-050)}
#dashAlt .dl-hl[data-go]:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(16,24,40,.10)}
@media(max-width:1700px){.dl-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1240px){.dl-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1000px){.dl-grid2{grid-template-columns:1fr}}
@media(max-width:560px){.dl-strip,.dl-grid4{grid-template-columns:1fr}.dl-sales{grid-template-columns:1fr}.dl-mini{grid-template-columns:repeat(2,1fr)}}

/* Pages and actions the person's IMPAL Keyz role does not include (app.js Perms; the server refuses them too). */
.side-nav .perm-off{display:none!important}
body.no-send_order #estSend,
body.no-create_so .cso-go, body.no-create_so .atc-so-btn,
body.no-credit_request #cuSubmit,
body.no-approve_requests .req-decide,
body.no-slb_request #slbSend,
body.no-slb_approve .slb-ok, body.no-slb_approve .slb-no,
body.no-grn_commit #grnLoad,
body.no-visit_create #crSubmit, body.no-visit_create #vsAddReport{display:none!important}