/* ===================================================================
   BUNDELKHAND ENTERPRISES - 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:#1E3A8A; --brand-600:#2B4FB0; --brand-700:#172E6E; --brand-900:#0A1738;
  --accent:#C98A16; --accent-600:#A9730F;
  --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:#1E3A8A22}

/* 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:#0A1738;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:#E0A93C;border-radius:0 2px 2px 0}
.rail-dot{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:#C98A16;
  border:1.5px solid #0A1738}

/* ---- 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:#C98A16;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 #1E3A8A12}
.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,#1E3A8A,#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}
.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,#1E3A8A,#2B4FB0);color:#fff;border-color:transparent;
  box-shadow:0 4px 14px rgba(30,58,138,.28)}
.btn-primary:hover{color:#fff;filter:brightness(1.07);box-shadow:0 6px 20px rgba(30,58,138,.34)}
.btn-accent{background:linear-gradient(135deg,#C98A16,#A9730F);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 #1E3A8A1f}
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,#1E3A8A,#E0A93C)}
.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,#1E3A8A,#E0A93C);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(30,58,138,.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),#2B4FB0);box-shadow:0 8px 22px rgba(30,58,138,.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 POLISH
   A field told to span two columns (grid-column:span 2) inside a grid that has
   become one column makes the browser invent a second column, squeezing every
   field beside it. On a phone every field simply takes the full row. */
@media (max-width:860px){
  .fgrid>*,.grid.g2>*,.grid.g3>*{grid-column:1/-1!important}
}
@media (max-width:680px){
  /* tables that did not become cards (no header row) keep their sideways scroll */
  .table-wrap:has(> table.data:not(.rowcards)){overflow-x:auto}
  /* a cell holding buttons lets them wrap onto a second line instead of overlapping */
  table.data.rowcards td:has(.btn){flex-wrap:wrap;white-space:normal}
  table.data.rowcards td:has(.btn) form{display:inline-flex!important}
  /* 16px stops iPhones zooming the page when a field is tapped */
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}
}
@media (max-width:680px){
  /* card rows: the column name sits in a fixed left gutter and the value flows
     normally beside it, so a name with a phone number under it wraps instead of
     being squeezed side by side */
  table.data.rowcards td{display:block;position:relative;padding-left:calc(38% + 20px);min-height:30px;overflow-wrap:anywhere}
  table.data.rowcards td::before{position:absolute;left:14px;top:7px;width:calc(38% - 6px);max-width:none}
  table.data.rowcards td > *{max-width:100%}
  table.data.rowcards td > .muted,table.data.rowcards td > .small,table.data.rowcards td > div{margin-top:2px}
  table.data.rowcards td.cell-lead,table.data.rowcards td.no-label,table.data.rowcards td[data-label=""]{padding-left:14px}
  table.data.rowcards td.cell-acts{display:flex;padding-left:14px}
  table.data.rowcards td .pill{white-space:nowrap}
}

/* small figure tiles (product stock panel) */
.stat-mini{flex:1 1 80px;display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft,rgba(0,0,0,.02))}
.stat-mini b{font-size:20px;line-height:1.2}