/* ===================================================================
   BRIGHT SOLARTECH SOLUTION - Admin panel
   Deep royal-blue sidebar, light workspace - the same blue and gold the
   website and every printed proposal use. No framework, no build step.
   =================================================================== */
:root{
  --brand:#13307A; --brand-600:#2450A8; --brand-700:#0E2560; --brand-900:#0A1A45;
  --accent:#F28C00; --accent-600:#D87400;
  --ink:#0F172A; --ink-2:#334155; --ink-3:#64748B; --ink-4:#94A3B8;
  --line:#E7EBF0; --line-2:#F1F5F9;
  --bg:#F6F8FA; --card:#FFFFFF;
  --ok:#059669; --ok-bg:#ECFDF5; --warn:#B45309; --warn-bg:#FFFBEB;
  --bad:#DC2626; --bad-bg:#FEF2F2; --info:#2563EB; --info-bg:#EFF6FF;
  --violet:#7C3AED; --violet-bg:#F5F3FF; --cyan:#0891B2; --cyan-bg:#ECFEFF;
  --indigo:#4F46E5; --indigo-bg:#EEF2FF;
  --radius:14px; --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.05);
  --shadow:0 4px 16px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.04);
  --shadow-lg:0 18px 48px rgba(15,23,42,.12);
  --sidebar-w:264px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-700)}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.015em;color:var(--ink)}
img{max-width:100%;display:block}
::selection{background:#13307A22}

/* An inline icon never sizes itself from its container. Every icon has a size
   rule for the place it sits in; this is the floor so a new one can never blow
   up to 300px because somebody forgot. Class rules below always win. */
svg{width:18px;height:18px;flex:0 0 auto;vertical-align:-.2em}

/* ------------------------------------------------------------ layout */
.layout{display:flex;min-height:100vh}
/* The menu is two parts: a narrow rail of areas, and a panel listing the
   screens inside the chosen area. Nothing scrolls and nothing is buried. */
.sidebar{width:var(--sidebar-w);flex:0 0 var(--sidebar-w);position:fixed;inset:0 auto 0 0;z-index:40;
  display:flex;overflow:hidden}

/* ---- part one: the rail ---- */
.rail{width:60px;flex:0 0 60px;background:#0A1A45;display:flex;flex-direction:column;align-items:center;
  padding:10px 0 12px;border-right:1px solid rgba(255,255,255,.07)}
.rail-brand{width:36px;height:36px;border-radius:9px;background:var(--brand);display:grid;place-items:center;
  color:#fff;margin-bottom:14px;flex:0 0 36px}
.rail-brand svg{width:19px;height:19px}
.rail-items{display:flex;flex-direction:column;gap:4px;align-items:center;flex:1;width:100%;padding:0 10px}
.rail-foot{display:flex;flex-direction:column;gap:4px;align-items:center;width:100%;padding:10px 10px 0;
  border-top:1px solid rgba(255,255,255,.07)}
.rail-btn{width:40px;height:38px;border-radius:8px;border:0;background:transparent;color:#93A6D4;
  display:grid;place-items:center;cursor:pointer;position:relative;transition:background .12s,color .12s;padding:0}
.rail-btn svg{width:20px;height:20px}
.rail-btn:hover{background:rgba(255,255,255,.08);color:#E2EAFA}
.rail-btn.on{background:rgba(255,255,255,.12);color:#fff}
.rail-btn.on::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:2px;
  background:#F5A623;border-radius:0 2px 2px 0}
.rail-dot{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:#F28C00;
  border:1.5px solid #0A1A45}

/* ---- part two: the panel ---- */
.sidepanel{flex:1;min-width:0;background:#142653;display:flex;flex-direction:column;
  border-right:1px solid rgba(0,0,0,.2)}
.panel-brand{padding:15px 16px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.panel-brand strong{display:block;color:#fff;font-size:14.5px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.panel-brand span{display:block;font-size:11px;color:#93A6D4;margin-top:2px}

.sidenav{flex:1;overflow-y:auto;padding:12px 10px;scrollbar-width:none;-ms-overflow-style:none}
.sidenav::-webkit-scrollbar{width:0;height:0;display:none}
.area[hidden]{display:none}
.area-title{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#8095C8;
  padding:2px 10px 10px;font-weight:700}

.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;color:#BFCDEC;
  font-weight:450;font-size:13.4px;margin-bottom:2px;transition:background .12s,color .12s;position:relative}
.nav-item svg{width:17px;height:17px;flex:0 0 17px;opacity:.72}
.nav-item:hover{background:rgba(255,255,255,.06);color:#EDF2FC}
.nav-item.active{background:rgba(255,255,255,.11);color:#fff;font-weight:600}
.nav-item.active svg{opacity:1;color:#E7C77A}
.nav-badge{margin-left:auto;background:#F28C00;color:#3B2405;font-size:10.5px;font-weight:700;
  border-radius:4px;padding:1px 6px;min-width:19px;text-align:center}
.nav-badge.grey{background:rgba(255,255,255,.14);color:#D7E1F7}

.panel-foot{border-top:1px solid rgba(255,255,255,.08);padding:9px 10px}
.panel-foot .me{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:7px;min-width:0}
.panel-foot .me:hover{background:rgba(255,255,255,.07)}
.panel-foot .me-av{width:28px;height:28px;border-radius:7px;background:rgba(255,255,255,.12);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:700;flex:0 0 28px}
.panel-foot .me-txt{min-width:0;overflow:hidden}
.panel-foot .me-txt b{display:block;font-size:13px;font-weight:600;color:#fff;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel-foot .me-txt small{display:block;font-size:10.2px;font-weight:500;color:#93A6D4;text-transform:uppercase;
  letter-spacing:.07em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.main{flex:1;margin-left:var(--sidebar-w);min-width:0;display:flex;flex-direction:column}
.topbar{height:64px;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:0 24px;position:sticky;top:0;z-index:30}
.topbar h1{font-size:17px;font-weight:650}
.topbar .sub{font-size:12px;color:var(--ink-3);margin-top:1px}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.icon-btn{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;color:var(--ink-2);cursor:pointer;position:relative;transition:.15s}
.icon-btn:hover{border-color:var(--brand);color:var(--brand);box-shadow:0 0 0 3px #13307A12}
.icon-btn .dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:#EF4444;
  box-shadow:0 0 0 2px #fff}
.userchip{display:flex;align-items:center;gap:9px;padding:5px 11px 5px 6px;border:1px solid var(--line);
  border-radius:999px;background:#fff}
.avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(140deg,#13307A,#3462C4);color:#fff;
  display:grid;place-items:center;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.userchip .who{font-size:12.5px;font-weight:600;line-height:1.15}
.userchip .who small{display:block;font-weight:500;color:var(--ink-3);font-size:10.5px;text-transform:uppercase;letter-spacing:.07em}
.hamburger{display:none}
.content{padding:24px;max-width:1440px;width:100%}

/* ------------------------------------------------------------- cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.card-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line-2);flex-wrap:wrap;min-width:0}
.card-head h3{font-size:14.5px}
.card-head .muted{font-size:12px;color:var(--ink-3);font-weight:450}
.card-head .right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.card-body{padding:18px}
.card-body.tight{padding:0}
.grid{display:grid;gap:16px}
.grid>*{min-width:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.span2{grid-column:span 2}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row>*{min-width:0}
.card,.card-body{min-width:0}
.spacer{flex:1}

/* --------------------------------------------------------- stat tiles */
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px 17px;
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.stat .ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;margin-bottom:12px}
.stat .ico svg{width:19px;height:19px}
.stat .label{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);font-weight:600}
.stat .value{font-size:25px;font-weight:700;letter-spacing:-.025em;margin:3px 0 2px;line-height:1.15}
.stat .value small{font-size:14px;font-weight:600;color:var(--ink-3)}
.stat .foot{font-size:11.5px;color:var(--ink-3)}
.stat .foot b{color:var(--ok)}
.stat .foot.warn b{color:var(--warn)}
.stat .foot.bad b{color:var(--bad)}
.i-green{background:var(--ok-bg);color:var(--ok)}
.i-amber{background:var(--warn-bg);color:var(--warn)}
.i-blue{background:var(--info-bg);color:var(--info)}
.i-violet{background:var(--violet-bg);color:var(--violet)}
.i-cyan{background:var(--cyan-bg);color:var(--cyan)}
.i-red{background:var(--bad-bg);color:var(--bad)}
.i-indigo{background:var(--indigo-bg);color:var(--indigo)}

/* ------------------------------------------------------------ tables */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.data{width:100%;border-collapse:separate;border-spacing:0;font-size:13.2px;min-width:520px}
/* Why the minimum width.
   A table has no say in how much room it gets: put six columns in half of a
   split layout and the browser does not scroll, it squeezes, until a product
   name is breaking down the middle one letter at a time and a date reads
   vertically. Giving every data table a floor to stand on turns that squeeze
   back into the sideways scroll that .table-wrap above is there to provide.
   .wide is for the heavier registers - eight columns and a button. Below 680px
   the table becomes a list of cards instead, so the floor is lifted there. */
table.data.wide{min-width:820px}

/* Things that must never be broken across lines: a figure, a date, a short
   status word, the buttons at the end of a row. */
table.data td.num,table.data th.num{white-space:nowrap}
table.data td .tag,table.data td .pill{white-space:nowrap}
table.data td.nowrap,table.data th.nowrap{white-space:nowrap}
table.data td.cell-acts{white-space:nowrap}
/* A reference number is one word and must stay one word: SE-INV0007 split
   over two lines is not a reference number any more. Leaving the default
   wrapping in place is what does it - the column then never shrinks below the
   longest code it has to carry. */
table.data td b,table.data td a{overflow-wrap:normal;word-break:normal}
/* .ref is the document number itself - SE-INV0007, SE-P0001, a panel serial.
   Browsers break a word after a hyphen by default, which turned every one of
   them into two half numbers stacked on top of each other. Only white-space
   stops a hyphen break; overflow-wrap and word-break do not touch it. */
.ref{white-space:nowrap}
table.data th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);
  font-weight:650;padding:11px 14px;background:#FBFCFD;border-bottom:1px solid var(--line);white-space:nowrap}
table.data td{padding:12px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.data tbody tr:hover{background:#FAFBFE}
table.data tbody tr:last-child td{border-bottom:0}
table.data td.num,table.data th.num{text-align:right;font-variant-numeric:tabular-nums}
table.data .who{display:flex;align-items:center;gap:10px}
table.data .who .avatar{width:32px;height:32px;font-size:11px;flex:0 0 32px}
table.data .who b{font-weight:600;display:block;line-height:1.25}
table.data .who small{color:var(--ink-3);font-size:11.5px}
.t-compact td{padding:9px 12px}
.empty{padding:46px 24px;text-align:center;color:var(--ink-3)}
.empty svg{width:42px;height:42px;opacity:.35;margin-bottom:12px}
.empty b{display:block;color:var(--ink-2);font-size:14.5px;margin-bottom:4px}

/* ------------------------------------------------------------- pills */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.2px;font-weight:650;padding:3.5px 9px;
  border-radius:999px;letter-spacing:.01em;white-space:nowrap}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.75}
.pill-green{background:var(--ok-bg);color:#047857}
.pill-amber{background:var(--warn-bg);color:#B45309}
.pill-red{background:var(--bad-bg);color:#B91C1C}
.pill-blue{background:var(--info-bg);color:#1D4ED8}
.pill-violet{background:var(--violet-bg);color:#6D28D9}
.pill-cyan{background:var(--cyan-bg);color:#0E7490}
.pill-indigo{background:var(--indigo-bg);color:#4338CA}
.pill-grey{background:#F1F5F9;color:#475569}
.tag{display:inline-block;font-size:11px;padding:2.5px 8px;border-radius:7px;background:#F1F5F9;color:var(--ink-2);font-weight:600}

/* ------------------------------------------------------------ buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 15px;
  border-radius:10px;border:1px solid transparent;font-family:inherit;font-size:13.2px;font-weight:600;
  cursor:pointer;transition:.16s;white-space:nowrap;background:#fff;color:var(--ink-2);border-color:var(--line)}
.btn svg{width:16px;height:16px}
.btn:hover{border-color:#CBD5E1;color:var(--ink);box-shadow:var(--shadow-sm)}
.btn-primary{background:linear-gradient(135deg,#13307A,#2450A8);color:#fff;border-color:transparent;
  box-shadow:0 4px 14px rgba(19,48,122,.28)}
.btn-primary:hover{color:#fff;filter:brightness(1.07);box-shadow:0 6px 20px rgba(19,48,122,.34)}
.btn-accent{background:linear-gradient(135deg,#F28C00,#D87400);color:#fff;border-color:transparent;
  box-shadow:0 4px 14px rgba(217,119,6,.26)}
.btn-accent:hover{color:#fff;filter:brightness(1.06)}
.btn-dark{background:var(--ink);color:#fff;border-color:transparent}
.btn-dark:hover{color:#fff;background:#1E293B}
.btn-danger{background:#fff;color:var(--bad);border-color:#FECACA}
.btn-danger:hover{background:var(--bad-bg);color:#B91C1C;border-color:#FCA5A5}
.btn-sm{height:32px;padding:0 11px;font-size:12.4px;border-radius:9px}
.btn-sm svg{width:14px;height:14px}
.btn-icon{width:34px;padding:0;flex:0 0 34px}
.btn-block{width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-wa{background:#25D366;color:#fff;border-color:transparent}
.btn-wa:hover{color:#fff;filter:brightness(1.05)}

/* -------------------------------------------------------------- forms */
.field{margin-bottom:15px}
.field label{display:block;font-size:12.2px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.field label .req{color:#DC2626;margin-left:2px}
.field .hint{font-size:11.5px;color:var(--ink-3);margin-top:5px}
input[type=text],input[type=number],input[type=date],input[type=email],input[type=tel],input[type=password],
input[type=file],select,textarea{width:100%;height:40px;padding:0 12px;border:1px solid #D9E1E8;border-radius:10px;
  font-family:inherit;font-size:13.4px;color:var(--ink);background:#fff;transition:.15s;outline:none}
textarea{height:auto;padding:10px 12px;min-height:88px;resize:vertical;line-height:1.6}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;background-size:15px;padding-right:34px}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3.5px #13307A1f}
input[type=file]{padding:7px 10px;height:auto}
.fgrid{display:grid;gap:0 16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.fgrid.f3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fgrid.f4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fgrid .full{grid-column:1/-1}
.form-foot{display:flex;gap:10px;align-items:center;padding:16px 18px;border-top:1px solid var(--line-2);
  background:#FBFCFD;border-radius:0 0 var(--radius-lg) var(--radius-lg)}
fieldset{border:0;padding:0;margin:0 0 6px;min-width:0}
.fgrid>*{min-width:0}
legend{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--brand);font-weight:700;
  padding:0;margin-bottom:12px}
.check{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);font-weight:500}
.check input{width:16px;height:16px;accent-color:var(--brand);margin:0}
/* The line explaining a tick box, indented to sit under the label rather than
   under the box, so it reads as the note it is and not as a second option. */
.check-note{margin:3px 0 14px 25px}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.filters .field{margin:0;min-width:150px}
.filters input,.filters select{height:38px}
.search-box{position:relative;flex:1;min-width:220px}
.search-box svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-4)}
.search-box input{padding-left:36px;height:38px}

/* ------------------------------------------------------------- alerts */
.alert{display:flex;gap:11px;padding:12px 15px;border-radius:12px;font-size:13.2px;margin-bottom:16px;
  border:1px solid transparent;line-height:1.5}
.alert svg{width:18px;height:18px;flex:0 0 18px;margin-top:1px}
.alert-success{background:var(--ok-bg);color:#065F46;border-color:#A7F3D0}
.alert-error{background:var(--bad-bg);color:#991B1B;border-color:#FECACA}
.alert-warn{background:var(--warn-bg);color:#92400E;border-color:#FDE68A}
.alert-info{background:var(--info-bg);color:#1E40AF;border-color:#BFDBFE}

/* ----------------------------------------------------------- sections */
.page-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.page-head h2{font-size:20px;letter-spacing:-.02em}
.page-head p{margin:3px 0 0;color:var(--ink-3);font-size:13px}
.page-head .right{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}
.crumb{font-size:12px;color:var(--ink-3);margin-bottom:5px}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--brand)}

/* --------------------------------------------------------- data lists */
.dl{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:13.2px}
.dl dt{color:var(--ink-3);font-weight:500}
.dl dd{margin:0;font-weight:600;color:var(--ink)}
.kv{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13.2px}
.kv:last-child{border-bottom:0}
.kv span{color:var(--ink-3)}
.kv b{font-variant-numeric:tabular-nums}
.kv.total{border-top:2px solid var(--ink);border-bottom:0;margin-top:5px;padding-top:11px;font-size:15px}
.kv.total b{color:var(--brand);font-size:17px}

/* -------------------------------------------------------- timeline */
.timeline{position:relative;padding-left:26px}
.timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-item{position:relative;padding:0 0 18px}
.tl-item::before{content:"";position:absolute;left:-22px;top:4px;width:11px;height:11px;border-radius:50%;
  background:#fff;border:2.5px solid var(--brand-600)}
.tl-item.grey::before{border-color:#CBD5E1}
.tl-item .when{font-size:11.5px;color:var(--ink-4);font-weight:500}
.tl-item .what{font-size:13.3px;font-weight:600;margin:1px 0 2px}
.tl-item .who{font-size:12px;color:var(--ink-3)}
.tl-item p{margin:4px 0 0;font-size:13px;color:var(--ink-2);line-height:1.55}

/* ----------------------------------------------------------- charts */
.chart{width:100%;height:auto;overflow:visible}
.chart .grid-line{stroke:var(--line);stroke-width:1}
.chart .axis{fill:var(--ink-4);font-size:10.5px;font-family:var(--font)}
.legend{display:flex;gap:16px;font-size:12px;color:var(--ink-3);margin-top:10px;flex-wrap:wrap}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:6px}
.bar-row{display:flex;align-items:center;gap:12px;margin-bottom:11px;font-size:13px}
.bar-row .nm{flex:0 0 120px;color:var(--ink-2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-row .track{flex:1;height:9px;background:var(--line-2);border-radius:99px;overflow:hidden}
.bar-row .fill{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#13307A,#F5A623)}
.bar-row .vl{flex:0 0 58px;text-align:right;font-weight:650;font-variant-numeric:tabular-nums}
.progress{height:7px;border-radius:99px;background:var(--line-2);overflow:hidden}
.progress i{display:block;height:100%;background:linear-gradient(90deg,#13307A,#F5A623);border-radius:99px}

/* ------------------------------------------------------------ paging */
.pager{display:flex;gap:6px;align-items:center;justify-content:center;padding:16px;flex-wrap:wrap}
.pager a,.pager span{min-width:34px;height:34px;padding:0 10px;border-radius:9px;border:1px solid var(--line);
  display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--ink-2);background:#fff}
.pager a:hover{border-color:var(--brand);color:var(--brand)}
.pager .on{background:var(--brand);color:#fff;border-color:var(--brand)}
.pager .gap{border:0;background:transparent}

/* ------------------------------------------------------------- misc */
.muted{color:var(--ink-3)}
.small{font-size:12px}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.nowrap{white-space:nowrap}
.right{text-align:right}
.center{text-align:center}
.mt0{margin-top:0}.mb0{margin-bottom:0}.mt16{margin-top:16px}.mb16{margin-bottom:16px}
.divider{height:1px;background:var(--line);margin:16px 0}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tabs a{padding:10px 14px;font-size:13.2px;font-weight:600;color:var(--ink-3);border-bottom:2.5px solid transparent;
  white-space:nowrap}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--brand);border-bottom-color:var(--brand)}
.chipbar{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.chipbar a{padding:6px 13px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:12.5px;
  font-weight:600;color:var(--ink-2)}
.chipbar a:hover{border-color:var(--brand);color:var(--brand)}
.chipbar a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chipbar a.on b{color:#fff}
.chipbar a b{color:var(--ink-3);font-weight:600;margin-left:4px}
.note{background:#FBFCFD;border:1px dashed var(--line);border-radius:12px;padding:13px 15px;font-size:12.8px;
  color:var(--ink-2);line-height:1.6}
.hl{background:linear-gradient(180deg,transparent 62%,#FDE68A 62%)}
.copybar{display:flex;align-items:center;gap:8px;background:#F8FAFC;border:1px solid var(--line);
  border-radius:10px;padding:7px 11px;font-size:12.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--ink-2);word-break:break-all}
.itable input,.itable select{height:36px;font-size:13px}
.itable td{padding:7px 8px}
.itable th{padding:9px 8px}
.link-row{display:flex;gap:9px;flex-wrap:wrap}
.hidden{display:none!important}

/* ------------------------------------------------------------ login
   One centred card on a quiet background. Nothing to read past, nothing to
   scroll - the person is here to sign in and get to work. */
.auth{min-height:100vh;display:grid;place-items:center;padding:32px 20px;
  background:radial-gradient(900px 600px at 50% -10%,rgba(19,48,122,.10),transparent 65%),
             radial-gradient(700px 500px at 85% 110%,rgba(245,158,11,.09),transparent 60%),
             var(--bg)}
.auth-box{width:100%;max-width:400px}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:22px;text-align:center}
.auth-brand .brand-mark{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--brand),#2450A8);box-shadow:0 8px 22px rgba(19,48,122,.28)}
.auth-brand .brand-mark svg{width:24px;height:24px;color:#fff}
.auth-brand strong{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.auth-brand span.sub{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.auth-box .card{padding:28px 26px}
.auth-box h2{font-size:20px;letter-spacing:-.02em}
.auth-foot{margin-top:18px;text-align:center;font-size:12.5px;color:var(--ink-3);line-height:1.7}
.auth-foot a{color:var(--brand);font-weight:500}
@media (max-width:480px){.auth{padding:24px 16px}.auth-box .card{padding:24px 20px}}

@media (max-width:1180px){.g5{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1024px){
  .sidebar{transform:translateX(-100%);transition:transform .25s ease}
  body.nav-open .sidebar{transform:none;box-shadow:var(--shadow-lg)}
  .main{margin-left:0}
  .hamburger{display:grid}
  body.nav-open::after{content:"";position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:35}
}
@media (max-width:860px){
  .g3,.g2,.span2{grid-column:auto;grid-template-columns:1fr}
  .fgrid,.fgrid.f3,.fgrid.f4{grid-template-columns:1fr}
  .content{padding:16px}
  .topbar{padding:0 15px}
  .topbar .sub{display:none}
  .userchip .who{display:none}
}
@media (max-width:560px){
  .g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat .value{font-size:21px}
  .page-head .right{width:100%}
}
@media print{
  .sidebar,.topbar,.no-print{display:none!important}
  .main{margin:0}.content{padding:0;max-width:none}
  body{background:#fff}
}

/* Two-column page layouts are written inline (they differ per screen); on a
   phone every one of them becomes a single column. */
@media (max-width:860px){
  .grid[style]{grid-template-columns:1fr!important}
}

/* Dashboard rows that vary by role: as many equal columns as fit, never a hole. */
.gfit{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.gfit-wide{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
@media (max-width:640px){.gfit-wide{grid-template-columns:1fr}
  /* two number tiles per row: a phone screen of ten stacked tiles is a lot of
     thumb, and these labels are short enough to sit side by side */
  .gfit{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
@media (max-width:420px){
  .gfit .stat{grid-template-columns:1fr;gap:0}
  .gfit .stat .ico{display:none}
}

/* ---------------------------------------------- record fact strip
   The header facts of one record - lead, customer, project - laid out so the
   eye finds a number without reading a form. */
.factstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  background:var(--card);border:1px solid var(--line);border-radius:10px;margin-bottom:14px;overflow:hidden}
.factstrip>div{padding:10px 14px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);min-width:0}
.factstrip>div span{display:block;font-size:11px;color:var(--ink-3);letter-spacing:.02em;margin-bottom:3px}
.factstrip>div b{font-size:13.4px;font-weight:600;color:var(--ink);word-break:break-word}
.factstrip>div b a{color:var(--ink)}
.factnote{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:11px 14px;margin-bottom:14px;font-size:13px;color:var(--ink-2);line-height:1.6}
.factnote b{color:var(--ink-3);font-weight:600;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.04em;margin-right:6px}
.factnote>div+div{margin-top:5px}

/* ------------------------------------------------ tables on a phone
   A wide table sideways-scrolling on a 390px screen is unreadable, so below
   680px every data table becomes a list of cards: one card per row, each cell
   on its own line beside the column name. The labels are copied from the
   table's own headers at load, so this works for every table without any
   markup being repeated. */
@media (max-width:680px){
  .table-wrap{overflow-x:visible}
  table.data{min-width:0}
  table.data.rowcards{display:block;width:100%;font-size:13.6px}
  table.data.rowcards td.num,table.data.rowcards td.cell-acts{white-space:normal}
  table.data.rowcards tbody{display:block;width:100%}
  table.data.rowcards tbody tr+tr{margin-top:10px}
  table.data.rowcards thead{display:none}
  table.data.rowcards tbody tr{display:block;border:1px solid var(--line);border-radius:10px;background:#fff;
    padding:4px 0;box-shadow:var(--shadow-sm)}
  table.data.rowcards tbody tr:hover{background:#fff}
  table.data.rowcards td{display:flex;align-items:flex-start;gap:12px;padding:7px 14px;border:0;
    text-align:left!important}
  table.data.rowcards td::before{content:attr(data-label);flex:0 0 38%;max-width:38%;font-size:10.6px;
    text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);font-weight:650;padding-top:2px}
  table.data.rowcards td[data-label=""]::before,
  table.data.rowcards td.no-label::before{display:none}
  /* the row's headline cell reads as the card title */
  table.data.rowcards td.cell-lead{display:block;padding:10px 14px 8px;border-bottom:1px solid var(--line-2);
    margin-bottom:4px;font-size:14.6px}
  table.data.rowcards td.cell-lead::before{display:none}
  /* buttons at the end of a row get their own strip */
  table.data.rowcards td.cell-acts{justify-content:flex-start;flex-wrap:wrap;gap:6px;
    border-top:1px solid var(--line-2);margin-top:4px;padding:9px 14px 4px}
  table.data.rowcards td.cell-acts::before{display:none}
  table.data.rowcards td.cell-acts,table.data.rowcards td{min-width:0}
  table.data.rowcards td > *{max-width:100%;min-width:0}
  table.data.rowcards td.num{justify-content:flex-start}
  table.data.rowcards tbody tr:last-child td{border-bottom:0}
  table.data.rowcards tbody tr:last-child td.cell-lead{border-bottom:1px solid var(--line-2)}
  .t-compact td{padding:7px 14px}
}

/* ------------------------------------------------ the rest, on a phone
   Screens are read one-handed here, so the numbers get compact, the icon sits
   beside the label instead of above it, and nothing needs a sideways swipe. */
@media (max-width:680px){
  .stat{padding:13px 14px;display:grid;grid-template-columns:34px 1fr;gap:0 11px;align-items:center}
  .stat .ico{width:34px;height:34px;border-radius:9px;margin:0;grid-row:1/3}
  .stat .ico svg{width:17px;height:17px}
  .stat .label{grid-column:2;font-size:10.6px;letter-spacing:.07em}
  .stat .value{grid-column:2;font-size:21px;margin:1px 0 0}
  .stat .foot{grid-column:2;font-size:11px;margin-top:2px}
  .stat:hover{transform:none}

  .page-head{flex-direction:column;align-items:flex-start;gap:12px}
  .page-head h2{font-size:21px}
  .page-head .right{width:100%;flex-wrap:wrap}
  .page-head .right .btn{flex:1 1 auto}

  .card-head{padding:14px 15px}
  .card-head h3{font-size:15px}
  .card-body{padding:15px}
  .card-body.tight{padding:0}

  /* filter chips and tab strips swipe sideways instead of stacking */
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tabs a{white-space:nowrap}
  .chips{flex-wrap:wrap}

  /* forms: full width fields, buttons that fill the row */
  .form-foot{flex-wrap:wrap;gap:8px}
  .form-foot .btn{flex:1 1 auto}
  .row{flex-wrap:wrap}

  /* a modal-less side-by-side layout is a stack here */
  .stack{gap:12px}
}

/* ---------------------------------------------- picture slots (settings)
   A photograph the office swaps out, shown at the size it will print. */
.pic-slot{border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--card)}
.pic-shot{aspect-ratio:16/9;border-radius:7px;overflow:hidden;background:var(--bg);border:1px solid var(--line-2);
  display:grid;place-items:center;margin-bottom:10px}
.pic-shot img{width:100%;height:100%;object-fit:cover;display:block}
/* A signature is not a photograph - show the whole of it on white, uncropped,
   so the office can see exactly what will print. */
.pic-shot.sign-shot{background:#fff;aspect-ratio:16/7}
.pic-shot.sign-shot img{object-fit:contain;padding:8px}
.pic-empty{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink-4);font-size:12px}
.pic-empty svg{width:22px;height:22px}
.pic-slot>b{display:block;font-size:13.6px;margin-bottom:2px}
.pic-slot>.small{display:block;line-height:1.5;margin-bottom:10px}
.pic-slot input[type=file]{width:100%;font-size:12.4px;border:1px solid var(--line);border-radius:7px;
  padding:7px 9px;background:var(--bg)}
.pic-slot .check{margin-top:9px;font-size:12.6px}

/* ------------------------------------------------ field level errors
   The message sits under the field that is wrong, not in a list at the top of
   the page, so nobody has to hunt for which box to fix. */
.field input.bad,.field select.bad,.field textarea.bad,
input.bad,select.bad,textarea.bad{border-color:#DC2626;background:#FEF6F6}
.field input.bad:focus,input.bad:focus,select.bad:focus,textarea.bad:focus{
  border-color:#DC2626;box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.fmsg{font-size:12.2px;color:#B91C1C;margin-top:5px;display:flex;gap:5px;align-items:flex-start;line-height:1.45}
.fmsg::before{content:"!";flex:0 0 14px;width:14px;height:14px;border-radius:50%;background:#DC2626;color:#fff;
  font-size:10px;font-weight:700;display:grid;place-items:center;margin-top:1px}
.field input.good,input.good{border-color:#BCE5D1}

/* -------------------------------------------- quotation working panels
   The cost column and the margin line exist only when the quotation is being
   written up for a bank; otherwise they are the same number said twice. */
.cost-col{display:none}
body.show-cost .cost-col{display:table-cell}
.margin-box{display:none;margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:9px;
  background:var(--bg)}
body.show-cost .margin-box{display:block}
.margin-box .kv b{color:var(--brand)}
.margin-box.bad-margin{border-color:#F3CDCD;background:#FEF4F4}
.margin-box.bad-margin .kv b{color:#B91C1C}
.margin-box .hint{margin-top:6px}
.calcout{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:11px 13px;
  font-size:13.4px;color:var(--ink-2);margin-bottom:12px;line-height:1.6}
.calcout b{color:var(--ink);font-size:15px}
@media (max-width:680px){body.show-cost .cost-col{display:flex}}

/* ------------------------------------------------- what to do now
   The first thing on a record: the instruction, the reason behind it, and the
   button that carries it out. Amber when somebody has to act, quiet when the
   wait is on a customer or a bank, green when nothing is pending. */
.next-action{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-radius:11px;
  border:1px solid var(--line);background:var(--card);margin-bottom:16px;position:relative;
  box-shadow:var(--shadow-sm)}
.next-action .na-mark{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:0 0 34px}
.next-action .na-mark svg{width:18px;height:18px}
.next-action .na-body{flex:1;min-width:0}
.next-action .na-body b{display:block;font-size:15.5px;letter-spacing:-.015em;line-height:1.3}
.next-action .na-body span{display:block;font-size:13.4px;color:var(--ink-2);margin-top:3px;line-height:1.55}
.next-action .na-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;flex:0 0 auto;
  flex-direction:column;align-items:stretch}
.next-action .na-acts .btn{justify-content:center}
.next-action .na-who{order:-1;font-size:10.2px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-4);align-self:flex-start;flex:0 0 auto;padding-top:3px}

.next-action.do{border-color:#F0D9A8;background:linear-gradient(0deg,#FFFDF8,#FFFDF8)}
.next-action.do .na-mark{background:#FEF3D9;color:#B36E00}
.next-action.do::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;
  background:var(--warn);border-radius:0 3px 3px 0}
.next-action.wait .na-mark{background:var(--bg);color:var(--ink-3)}
.next-action.done{border-color:#BCE5D1;background:#F8FDFA}
.next-action.done .na-mark{background:#E6F6EE;color:#116343}

@media (max-width:820px){
  .next-action{flex-wrap:wrap}
  .next-action .na-acts{width:100%;padding-left:48px;flex-direction:row}
  .next-action .na-who{width:100%;padding-left:48px;order:99}
}
@media (max-width:520px){
  .next-action .na-acts,.next-action .na-who{padding-left:0}
  .next-action .na-acts .btn{flex:1 1 auto}
}

/* ------------------------------------------- project stage guidance
   Why a paper is needed, where to register, what the bank wants. Said on the
   screen where the work happens, so nobody has to ask the office. */
.doc-why{font-size:12.2px;color:var(--ink-3);margin-top:4px;line-height:1.5;max-width:52em}
.doc-legend{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:12px 14px;
  font-size:13.2px;line-height:1.6;margin-bottom:14px}
.doc-legend div+div{margin-top:6px}
.doc-legend b{color:var(--ink)}
.doc-legend .ok{display:flex;gap:8px;align-items:center;color:var(--ok);font-weight:600}
.doc-legend .ok svg{width:16px;height:16px}

/* The survey's own paper list. Two small forms share a cell - upload the paper,
   or say the customer promised it - so they sit one above the other on a phone
   and side by side on a desk. */
.doc-take{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin-top:6px}
.doc-take input[type=file]{max-width:190px;font-size:12px;border:1px solid var(--line);
  border-radius:8px;padding:5px 7px;background:#fff}
.doc-take input[type=date]{width:140px;font-size:12.5px;padding:5px 8px;border:1px solid var(--line);
  border-radius:8px;background:#fff}
@media (max-width:760px){
  /* A file input carries a wide intrinsic size - the browser's own "Choose file"
     button plus the file name - which would push the whole row sideways. The
     min-width:0 is what lets it shrink inside the flex row instead. */
  .doc-take{justify-content:flex-start;flex-wrap:wrap;width:100%;min-width:0}
  .doc-take input[type=file]{flex:1 1 100%;width:100%;min-width:0;max-width:none}
  .doc-take input[type=date]{flex:1 1 auto;width:auto;min-width:0}
  .doc-take .btn{flex:0 0 auto}
}
/* stacked into a card, the two little forms each take their own line */
@media (max-width:680px){
  table.data.rowcards td.cell-take{flex-wrap:wrap}
  table.data.rowcards td.cell-take .doc-take{flex:1 1 100%}
}

.howto{border:1px solid var(--line);border-radius:10px;background:var(--bg);padding:14px 16px;margin-bottom:16px}
.howto h4{font-size:13.6px;margin:0 0 8px;display:flex;gap:8px;align-items:center}
.howto h4 svg{width:16px;height:16px;color:var(--brand)}
.howto ol{margin:0;padding-left:20px;font-size:13.2px;color:var(--ink-2);line-height:1.75}
.howto ol li{margin-bottom:4px}
.howto a{font-weight:600}
.howto .need{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2);font-size:12.6px;color:var(--ink-3)}

/* ---- recording a supplier payment, inline under its bill
   The form opens in the row itself rather than on another screen: the person
   is looking at the bill, and moving them away to a payment page is how a
   payment ends up recorded against the wrong one. */
.pay-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;padding:12px 4px}
.pay-row .field{margin:0;min-width:0}
.pay-row .field:nth-child(2){width:140px}
.pay-row .field:nth-child(3){width:150px}
.pay-row .field:nth-child(4){width:150px}
.pay-row .field:nth-child(5){flex:1 1 180px}
.pay-list{padding:8px 4px;display:flex;flex-direction:column;gap:6px}
.pay-line{display:flex;align-items:center;gap:14px;padding:7px 12px;background:#fff;
  border:1px solid var(--line);border-radius:9px;font-size:13px}
.pay-line b{min-width:110px}
.pay-line .muted{margin-left:auto}
@media (max-width:760px){
  .pay-row{flex-direction:column;align-items:stretch}
  .pay-row .field{width:auto!important}
  .pay-line{flex-wrap:wrap;gap:6px 12px}
  .pay-line .muted{margin-left:0}
}

/* ------------------------------------------------ phone fixes
   A field written to span two columns inline would, in a one-column form,
   create a second, narrow column and squeeze every field beside it. */
@media (max-width:860px){
  .fgrid>[style*="grid-column"]{grid-column:1/-1!important}
}
/* Cards made from table rows: a cell holding buttons wraps them onto new
   lines instead of letting them overlap. */
@media (max-width:680px){
  table.data.rowcards td:has(> .btn, > form, > a.btn){flex-wrap:wrap;white-space:normal}
  table.data.rowcards td > .btn, table.data.rowcards td > form{flex:0 0 auto;max-width:none}
}
/* iPhone zooms the page into any field whose text is under 16 px. */
@media (max-width:1024px) and (hover:none),(max-width:760px){
  input[type=text],input[type=number],input[type=date],input[type=email],input[type=tel],input[type=password],
  input[type=search],input[type=url],input:not([type]),select,textarea{font-size:16px!important}
}

/* ------------------------------------------------ Website > Gallery */
.gal-filters{margin-bottom:18px}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.gal-item{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.gal-item.off .gal-ph img{opacity:.45;filter:grayscale(.6)}
.gal-ph{position:relative;display:block;aspect-ratio:4/3;background:#EEF1F5}
.gal-ph img{width:100%;height:100%;object-fit:cover;display:block}
.gal-tag{position:absolute;left:8px;top:8px;background:#0F172A;color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px}
.gal-tag.cover{left:auto;right:8px;background:#E4610F}
.gal-bd{padding:10px 12px 6px;flex:1;min-width:0}
.gal-bd b{display:block;font-size:13.4px;line-height:1.35;color:var(--ink)}
.gal-bd span{display:block;font-size:12px;color:var(--ink-3);margin-top:3px}
.gal-bd .gal-proj{display:flex;align-items:center;gap:5px;color:var(--brand)}
.gal-bd .gal-proj svg{width:13px;height:13px;flex:0 0 auto}
.gal-acts{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px 12px}
.gal-acts form{display:inline}
.note-box{background:#FFF8E6;border:1px solid #F6E0A8;color:#6B4E00;border-radius:10px;padding:10px 12px;font-size:12.6px;margin:4px 0 14px}
@media (max-width:560px){.gal-grid{grid-template-columns:1fr 1fr;gap:10px}.gal-acts .btn{padding-left:9px;padding-right:9px}}

/* ------------------------------------------- PM Surya Ghar stage checklist */
.stage-strip{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.ss-step{flex:1;min-width:92px;border:1px solid var(--line);border-radius:12px;padding:9px 10px;background:#fff;color:var(--ink-3)}
.ss-step .ss-no{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;
  background:var(--line-2);color:var(--ink-3);margin-bottom:6px}
.ss-step .ss-no svg{width:13px;height:13px}
.ss-step .ss-name{font-size:12.4px;font-weight:650;line-height:1.25;color:var(--ink-2)}
.ss-step .ss-date{font-size:10.8px;margin-top:2px}
.ss-done{background:#F2FBF6;border-color:#BFE8D0}
.ss-done .ss-no{background:var(--ok);color:#fff}
.ss-done .ss-date{color:var(--ok)}
.ss-now{background:linear-gradient(135deg,#13307A,#2450A8);border-color:transparent;color:#fff}
.ss-now .ss-name,.ss-now .ss-date{color:#fff}
.ss-now .ss-no{background:#F28C00;color:#fff}
.stage-table td{vertical-align:middle}
.stage-table .st-dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:700;
  background:var(--line-2);color:var(--ink-3)}
.stage-table .st-dot svg{width:14px;height:14px}
.stage-table tr.st-done .st-dot{background:var(--ok);color:#fff}
.stage-table tr.st-now{background:#FFF8EE}
.stage-table tr.st-now .st-dot{background:#F28C00;color:#fff}
.stage-form{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.stage-form input[type=date]{height:32px;width:140px;padding:0 8px;font-size:12.5px}
.stage-form .check{margin:0}
.tag-stage{background:#EAF6EF;color:#0B7A43;border-color:#C9EBD6;margin:1px 2px 1px 0}
.pipe-row{display:flex;gap:6px;overflow-x:auto}
.pipe-cell{flex:1;min-width:92px;border:1px solid var(--line);border-radius:12px;padding:10px 11px;background:#fff;color:var(--ink)}
.pipe-cell.has{background:#FFF8EE;border-color:#FAD9A8}
.pipe-cell.fin{background:#F2FBF6;border-color:#BFE8D0}
.pipe-cell .n{font-size:21px;font-weight:700;letter-spacing:-.02em}
.pipe-cell .l{font-size:11.5px;color:var(--ink-3);line-height:1.3}
.pipe-cell:hover{border-color:var(--brand);color:var(--ink)}
.drop-zone{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;border:2px dashed #C9D3E6;
  border-radius:16px;padding:30px 18px;background:#F8FAFE;cursor:pointer;transition:border-color .15s,background .15s}
.drop-zone:hover{border-color:var(--brand);background:#F2F6FF}
.drop-zone svg{width:38px;height:38px;color:#0B7A43}
.drop-zone input[type=file]{margin-top:8px;max-width:100%}
.howto-list{margin:0;padding-left:18px}
.howto-list li{margin-bottom:8px;color:var(--ink-2)}
.serial-list{margin:0;padding-left:22px;columns:2;column-gap:18px;font-size:12.5px}
.serial-list li{margin-bottom:3px}
.kv-table th{font-weight:600;color:var(--ink-3);text-align:left;background:transparent}
@media (max-width:1100px){.import-stats{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.import-stats{grid-template-columns:repeat(2,1fr)}.serial-list{columns:1}}
.bulk-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line-2);background:#FAFBFD}
.bulk-bar select{height:34px;max-width:230px}
.bulk-bar input[type=date]{height:34px;width:150px}
.bulk-bar .right{margin-left:auto}
.mini-stages{display:flex;gap:3px}
.mini-stages i{flex:1;height:7px;border-radius:3px;background:#E5E9F1;min-width:9px}
.mini-stages i.on{background:linear-gradient(90deg,#13307A,#2450A8)}
.pager .gap{padding:0 6px;color:var(--ink-4)}
.fgrid.f5{grid-template-columns:repeat(5,minmax(0,1fr))}
.itable textarea{width:100%;margin-top:6px;font-size:12.5px;line-height:1.45;padding:6px 8px;min-height:40px;resize:vertical}
.split-card .row input{min-width:0}
@media (max-width:1100px){.fgrid.f5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.fgrid.f5{grid-template-columns:1fr}}
.rail-brand img{width:30px;height:30px;object-fit:contain}
.rail-brand:has(img){background:#fff}
#items{min-width:1180px}
.tag-redate{background:#FFF4E5;color:#9A5200;border-color:#FFD9A3;margin:1px 2px 1px 0}
/* statement of accounts */
.stmt-grid{grid-template-columns:minmax(0,1fr) 340px}
.stmt-table td,.stmt-table th{white-space:nowrap}
.stmt-table td:nth-child(3){white-space:normal;min-width:180px}
.stmt-table tr.stmt-ob td{background:#F6F8FC}
.stmt-table tfoot th{background:#EEF2F9;font-weight:700;color:var(--ink)}
@media (max-width:1180px){.stmt-grid{grid-template-columns:1fr}}

/* ====================================================== project screen */
.mb8{margin-bottom:8px}
.pv-head .card-body{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.pv-id{display:flex;gap:16px;align-items:flex-start;flex:1 1 520px;min-width:0}
.pv-av{width:52px;height:52px;flex:0 0 52px;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:18px;color:#fff;
  background:linear-gradient(135deg,#13307A,#2450A8)}
.pv-who{min-width:0;flex:1}
.pv-who h2{font-size:21px;line-height:1.25;margin:2px 0 8px}
.pv-chips{display:flex;flex-wrap:wrap;gap:6px 8px}
.pv-chips span{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:var(--line-2);
  border:1px solid var(--line);font-size:12.4px;color:var(--ink-2);white-space:nowrap}
.pv-chips svg{width:13px;height:13px;color:var(--ink-3)}
.pv-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.pv-status{display:flex;align-items:center;gap:14px;flex:0 0 auto;padding:12px 16px;border-radius:14px;background:#F7F9FD;border:1px solid var(--line)}
.pv-ring{width:64px;height:64px;transform:rotate(-90deg)}
.pv-ring circle{fill:none;stroke-width:5}
.pv-ring .bg{stroke:#E3E8F2}
.pv-ring .fg{stroke:#F28C00;stroke-linecap:round}
.pv-pct{display:flex;flex-direction:column;margin-left:-4px;min-width:70px}
.pv-pct b{font-size:22px;line-height:1;color:var(--ink)}
.pv-pct span{font-size:11.5px;color:var(--ink-3);margin-top:4px}
.pv-now{display:flex;flex-direction:column;gap:8px;border-left:1px solid var(--line);padding-left:14px}
.pv-now .pill{align-self:flex-start}
.pv-now dl{display:flex;gap:16px;margin:0}
.pv-now dt{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);font-weight:700}
.pv-now dd{margin:2px 0 0;font-weight:700;font-size:13.5px;white-space:nowrap}
.pv-now dd.wait.ok{color:var(--ok)}.pv-now dd.wait.slow{color:var(--warn)}.pv-now dd.wait.late{color:var(--bad)}

/* tracker: one row of equal steps joined by a line; wraps to a vertical list on a phone */
.trk-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.trk-head h3{font-size:15px}
.trk{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));position:relative}
.trk li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 4px;min-width:0}
.trk li::before{content:"";position:absolute;top:15px;left:-50%;width:100%;height:3px;background:#E3E8F2;z-index:0}
.trk li:first-child::before{display:none}
.trk li.trk-done::before,.trk li.trk-now::before{background:#16A06A}
.trk-dot{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:800;
  background:#fff;border:2px solid #CFD7E6;color:var(--ink-3)}
.trk-dot svg{width:16px;height:16px}
.trk-done .trk-dot{background:#16A06A;border-color:#16A06A;color:#fff}
.trk-now .trk-dot{background:#F28C00;border-color:#F28C00;color:#fff;box-shadow:0 0 0 5px rgba(242,140,0,.18)}
.trk li b{font-size:12.3px;line-height:1.25;margin-top:8px;color:var(--ink);font-weight:650}
.trk-todo b{color:var(--ink-3)!important;font-weight:600!important}
.trk-date{font-size:11.4px;color:var(--ink-3);margin-top:2px;white-space:nowrap}
.trk-done .trk-date{color:#0B7A4E;font-weight:600}
.trk-now .trk-date{color:#C46500;font-weight:700}
.trk-took{font-size:10.5px;color:var(--ink-4);margin-top:1px;white-space:nowrap}

/* stage checklist */
.pv-grid{grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);align-items:start}
.stage-table td{vertical-align:middle}
.stage-table td:nth-child(2){min-width:220px}
.stage-table .btn-ghost-sm{background:transparent;border-color:transparent;color:var(--ink-3)}
.stage-table .btn-ghost-sm:hover{border-color:var(--line);color:var(--ink)}
.stage-table tr.st-form-row td{background:#FFF8EE;border-top:0}
.st-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:4px 0}
.st-form label{display:inline-flex;align-items:center;gap:8px;font-size:12.6px;color:var(--ink-2);margin:0}
.st-form input[type=date]{height:34px;width:150px}
.st-form input[type=text]{height:34px;flex:1 1 180px;min-width:140px}
.st-form-btns{display:inline-flex;gap:6px;margin-left:auto}
.pv-dl dt{white-space:nowrap}

@media (max-width:1180px){
  .pv-grid{grid-template-columns:1fr}
  .pv-status{width:100%;justify-content:flex-start}
}
@media (max-width:860px){
  .trk{grid-template-columns:1fr;gap:0}
  .trk li{flex-direction:row;align-items:center;gap:10px;text-align:left;padding:7px 0 7px 0}
  .trk li::before{left:15px;top:-50%;width:3px;height:100%}
  .trk li b{margin:0;flex:1}
  .pv-now{border-left:0;padding-left:0}
  .pv-status{flex-wrap:wrap}
}
/* projects list */
.proj-table td{vertical-align:middle}
.pj-cust{min-width:260px}
.pj-name{font-weight:700;color:var(--ink);font-size:13.8px}
.pj-name:hover{color:var(--brand)}
.pj-meta{display:flex;flex-wrap:wrap;gap:2px 0;margin-top:3px;font-size:12px;color:var(--ink-3)}
.pj-meta span{white-space:nowrap}
.pj-meta span+span::before{content:"\00B7";margin:0 6px;color:var(--ink-4)}
.pj-meta .ref{color:var(--brand);font-weight:600}
.pj-portal{min-width:130px}
.mini-stages i.now{background:#F28C00}
b.wait.ok{color:var(--ok)}b.wait.slow{color:var(--warn)}b.wait.late{color:var(--bad)}
.data th.right,.data th.num{text-align:right}
.v-grid{align-items:end}
.party-edit{margin-top:16px}
.party-edit>summary{cursor:pointer;list-style:none;display:flex;gap:12px;align-items:baseline}
.party-edit>summary::-webkit-details-marker{display:none}
.party-edit>summary h3::before{content:"\25B8";display:inline-block;margin-right:8px;transition:transform .15s}
.party-edit[open]>summary h3::before{transform:rotate(90deg)}
.stmt-table td:nth-child(3){white-space:nowrap}
.st-m-date{display:none;font-size:12px;font-weight:600;color:var(--ink-2);margin-top:3px}
@media (max-width:640px){
  .stage-table th:nth-child(3),.stage-table td:nth-child(3),.stage-table th:nth-child(4),.stage-table td:nth-child(4){display:none}
  .stage-table td:nth-child(2){min-width:0}
  .stage-table .st-m-date{display:block}
  .stage-table tr.st-done .st-m-date{color:#0B7A4E}
  .stage-table .btn{padding:6px 9px}
  .st-form-btns{margin-left:0}
}