/* ===================================================================
   ECOSUN ENERGY SOLUTIONS - Admin panel
   Deep green sidebar, light workspace - the same green and orange the
   website and every printed proposal use. No framework, no build step.
   =================================================================== */
/* --------------------------------------------------------------- typefaces
   The two faces this document is designed in travel with the project rather
   than being fetched from Google. A proposal is printed from a laptop in an
   office with patchy internet, saved as a PDF, and opened by a customer who
   may be offline - and a web font that fails to arrive falls back to Arial and
   Times, which is exactly what made the document look like a form letter. The
   files below are variable-weight subsets (Latin plus the rupee sign), so one
   file covers every weight the design asks for. */
@font-face{
  font-family:'Inter var';
  src:url('../fonts/inter-var.woff2') format('woff2');
  font-weight:100 900;                /* one file, the whole range */
  font-style:normal;
  font-display:block;                 /* never print a page in the fallback */
}
@font-face{
  font-family:'Source Serif var';
  src:url('../fonts/sourceserif-var.woff2') format('woff2');
  font-weight:200 900;
  font-style:normal;
  font-display:block;
}

:root{
  --brand:#0F6B38; --brand-600:#14843F; --brand-700:#0A4426; --brand-900:#06301C;
  --accent:#F47B20; --accent-600:#C9560A;
  --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:#FFF5EC;
  --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 var','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:#01296722}

/* 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:#06301C;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:#8FBF9C;
  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:#FF9A3D;border-radius:0 2px 2px 0}
.rail-dot{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:#F47B20;
  border:1.5px solid #06301C}

/* ---- part two: the panel ---- */
.sidepanel{flex:1;min-width:0;background:#0B4A28;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:#8FBF9C;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:#FBC489}
.nav-badge{margin-left:auto;background:#F47B20;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:#8FBF9C;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 #01296712}
.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,#0F6B38,#3B63C7);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}
/* ------------------------------------------- the branch being worked in
   Only drawn once a company has a second office. It sits in the top bar beside
   the user, because it changes what every list on the screen contains and that
   is too important to hide in a menu. Staff posted to one branch get the name as
   a plain tag rather than a control: there is nothing for them to choose. */
.branch-pick{position:relative;display:flex;align-items:center}
.branch-pick select{appearance:none;-webkit-appearance:none;border:1px solid var(--line);background:#fff;
  border-radius:999px;padding:8px 32px 8px 14px;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);
  cursor:pointer;max-width:210px;text-overflow:ellipsis}
.branch-pick select:hover{border-color:var(--brand);color:var(--brand)}
.branch-pick select:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.branch-pick::after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;margin-top:-5px;
  border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);transform:rotate(45deg);
  pointer-events:none}
.branch-tag{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#F7F9FC;
  border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.branch-tag svg{width:15px;height:15px;color:var(--ink-3)}
/* The branch on a row. It is a chip rather than loose text so that a short code
   under a customer's name reads as a label and not as part of their address. */
.branch-cell{display:inline-block;margin-top:4px;padding:1px 7px;border:1px solid var(--line);
  border-radius:999px;background:#F7F9FC;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;line-height:1.7}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* It stays on a phone - which office you are looking at is never a detail
   worth hiding - it just gets narrower. */
@media (max-width:860px){.branch-pick select{max-width:132px;padding:7px 28px 7px 11px}
  .branch-tag{padding:6px 11px}}
@media (max-width:480px){.branch-pick select{max-width:96px}.branch-tag span{display:none}}

.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}
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:#F9FCF9;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,#0F6B38,#14843F);color:#fff;border-color:transparent;
  box-shadow:0 4px 14px rgba(15,107,56,.28)}
.btn-primary:hover{color:#fff;filter:brightness(1.07);box-shadow:0 6px 20px rgba(15,107,56,.34)}
.btn-accent{background:linear-gradient(135deg,#F47B20,#C9560A);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 #0129671f}
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:#F9FCF9;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}
.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:#FCD9B0}
.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,#0F6B38,#FF9A3D)}
.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,#0F6B38,#FF9A3D);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:#F9FCF9;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%,#FCD9B0 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(15,107,56,.10),transparent 65%),
             radial-gradient(700px 500px at 85% 110%,rgba(244,123,32,.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),#14843F);box-shadow:0 8px 22px rgba(15,107,56,.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}
  /* a field told inline to span two columns would otherwise bring a second,
     squeezed column back into a one-column form */
  .fgrid>[style*="grid-column"],.g2>[style*="grid-column"],.g3>[style*="grid-column"]{grid-column:1/-1!important}
  .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.rowcards{display:block;width:100%;font-size:13.6px}
  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}
}

/* ---------------------------------------------------------- inventory
   A totals row that reads as a total rather than as a second heading, and
   a footer strip for the actions that belong to a whole card. */
table.data tfoot th{text-transform:none;letter-spacing:0;font-size:13.2px;font-weight:700;color:var(--ink);
  background:#F8FAFE;border-top:1.5px solid var(--line);border-bottom:0;padding:12px 14px}
.card-foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:14px 18px;
  border-top:1px solid var(--line-2);background:#FCFDFF;border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.rail-brand:has(img){background:#fff}