/* ===================================================================
   PRAGATI POWER 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{
  /* Pragati Power - the blue of the panel in the logo carries the panel,
     the orange of its sun marks what needs attention. */
  --brand:#0A86A8; --brand-600:#0B95BA; --brand-700:#07708D; --brand-900:#064A5E;
  --brand-50:#E8F6FA; --brand-100:#CFEDF5;
  --accent:#EE7D14; --accent-600:#C9620A; --accent-50:#FFF3E7;
  --ink:#16202A; --ink-2:#3A4651; --ink-3:#6B7783; --ink-4:#9AA5AF;
  --line:#E5E9ED; --line-2:#F0F3F5;
  --bg:#F6F8F9; --card:#FFFFFF;
  --ok:#0F9D6B; --ok-bg:#E8F7F1; --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:10px; --radius-lg:12px;
  --shadow-sm:0 1px 2px rgba(22,32,42,.04);
  --shadow:0 4px 14px rgba(22,32,42,.06),0 1px 3px rgba(22,32,42,.04);
  --shadow-lg:0 18px 48px rgba(22,32,42,.14);
  --sidebar-w:244px; --sidebar-mini:68px;
  --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:#0A86A826}

/* 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. Class rules below win. */
svg{width:18px;height:18px;flex:0 0 auto;vertical-align:-.2em}

/* ------------------------------------------------------------ layout */
.layout{display:flex;min-height:100vh}

/* One clean white column: logo, search, the groups, and you. */
.sidebar{width:var(--sidebar-w);position:fixed;inset:0 auto 0 0;z-index:40;background:#fff;
  border-right:1px solid var(--line);display:flex;flex-direction:column;transition:width .2s ease,transform .25s ease}
.sb-brand{display:flex;align-items:center;gap:8px;padding:14px 12px 10px 16px;min-height:64px}
.sb-logo{display:flex;align-items:center;min-width:0;flex:1}
.sb-logo-full{height:36px;width:auto;max-width:176px;object-fit:contain;object-position:left center}
strong.sb-logo-full{height:auto;font-size:15px;color:var(--ink)}
.sb-logo-mark{display:none;width:34px;height:34px;object-fit:contain}
.sb-collapse{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink-3);
  display:grid;place-items:center;cursor:pointer;flex:0 0 28px;padding:0}
.sb-collapse svg{width:15px;height:15px;transform:rotate(90deg);transition:transform .2s}
.sb-collapse:hover{color:var(--brand);border-color:var(--brand)}
.sb-search{display:flex;align-items:center;gap:8px;margin:2px 12px 8px;padding:8px 10px;border:1px solid var(--line);
  border-radius:999px;background:#F8FAFB;color:var(--ink-3);font:inherit;font-size:13px;cursor:pointer;text-align:left}
.sb-search svg{width:16px;height:16px}
.sb-search span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-search kbd,.pal-input kbd{font:600 10.5px var(--font);color:var(--ink-3);background:#fff;border:1px solid var(--line);
  border-radius:6px;padding:2px 6px;white-space:nowrap}
.sb-search:hover{border-color:var(--brand);color:var(--brand)}

.sb-nav{flex:1;overflow-y:auto;padding:4px 10px 12px;scrollbar-width:thin;scrollbar-color:#DCE2E7 transparent}
.sb-group{margin-bottom:2px}
.sb-group-title{display:flex;align-items:center;width:100%;border:0;background:none;cursor:pointer;
  padding:12px 10px 6px;font:700 10.5px var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.sb-group-title span{flex:1;text-align:left}
.sb-group-title svg{width:13px;height:13px;transition:transform .18s;opacity:.7}
.sb-group.open .sb-group-title svg{transform:rotate(90deg)}
.sb-group-title:hover{color:var(--ink-2)}
.sb-items{display:none}
.sb-group.open .sb-items,.sb-group[data-group="home"] .sb-items{display:block}

.nav-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;color:var(--ink-2);
  font-weight:500;font-size:13.4px;margin:1px 0;transition:background .12s,color .12s;position:relative;white-space:nowrap}
.nav-item svg{width:17px;height:17px;flex:0 0 17px;color:var(--brand);opacity:.9}
.nav-item:hover{background:var(--brand-50);color:var(--brand-700)}
.nav-item.active{background:var(--brand);color:#fff;font-weight:600;box-shadow:0 4px 12px -4px rgba(10,134,168,.55)}
.nav-item.active svg{color:#fff;opacity:1}
.nav-label{overflow:hidden;text-overflow:ellipsis}
.nav-badge{margin-left:auto;background:var(--accent);color:#fff;font-size:10.5px;font-weight:700;
  border-radius:999px;padding:1px 7px;min-width:20px;text-align:center;line-height:1.6}
.nav-badge.grey{background:var(--line-2);color:var(--ink-3)}
.nav-item.active .nav-badge{background:#fff;color:var(--brand-700)}

.sb-foot{border-top:1px solid var(--line);padding:8px 10px 10px}
.sb-me{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;min-width:0;color:var(--ink)}
.sb-me:hover{background:var(--line-2);color:var(--ink)}
.me-av{width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;
  font-size:11.5px;font-weight:700;flex:0 0 32px}
.me-txt{min-width:0;overflow:hidden}
.me-txt b{display:block;font-size:13px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-txt small{display:block;font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* the collapsed (icon-only) sidebar */
.nav-mini .sidebar{width:var(--sidebar-mini)}
.nav-mini .main{margin-left:var(--sidebar-mini)}
.nav-mini .sb-brand{flex-direction:column;padding:12px 8px;gap:8px}
.nav-mini .sb-logo{justify-content:center;flex:0}
.nav-mini .sb-logo-full{display:none}
.nav-mini .sb-logo-mark{display:block}
.nav-mini .sb-collapse svg{transform:rotate(-90deg)}
.nav-mini .sb-search{justify-content:center;margin:2px 10px 8px;padding:9px}
.nav-mini .sb-search span,.nav-mini .sb-search kbd{display:none}
.nav-mini .sb-group-title{justify-content:center;padding:8px 0 4px;font-size:0}
.nav-mini .sb-group-title::before{content:"";display:block;width:20px;height:1px;background:var(--line)}
.nav-mini .sb-group-title svg{display:none}
.nav-mini .sb-items{display:block}
.nav-mini .nav-item{justify-content:center;padding:9px 0}
.nav-mini .nav-label,.nav-mini .me-txt{display:none}
.nav-mini .nav-badge{position:absolute;top:2px;right:6px;min-width:16px;padding:0 4px;font-size:9.5px}
.nav-mini .sb-me{justify-content:center;padding:6px 0}
.nav-mini .nav-item:hover::after{content:attr(data-tip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
  background:var(--ink);color:#fff;font-size:12px;font-weight:500;padding:5px 9px;border-radius:7px;white-space:nowrap;z-index:60;pointer-events:none}

.main{flex:1;margin-left:var(--sidebar-w);min-width:0;display:flex;flex-direction:column;transition:margin-left .2s ease}
.topbar{height:64px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding:0 24px;position:sticky;top:0;z-index:30}
.tb-title{min-width:0}
.topbar h1{font-size:18px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .sub{font-size:12px;color:var(--ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;color:var(--ink-2);cursor:pointer;position:relative;transition:.15s;padding:0}
.icon-btn svg{width:17px;height:17px}
.icon-btn:hover{border-color:var(--brand);color:var(--brand)}
.icon-btn .dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 2px #fff}
.avatar-btn{border:0;background:none;padding:0;cursor:pointer;border-radius:50%}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.avatar-btn:hover .avatar{box-shadow:0 0 0 3px var(--brand-100)}
.userchip{display:flex;align-items:center;gap:9px;padding:5px 11px 5px 6px;border:1px solid var(--line);border-radius:999px;background:#fff}
.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}
.btn-new{border-radius:999px!important;padding:8px 16px!important}

/* dropdown menus (New, account) */
.dropdown{position:relative}
.dropdown-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:200px;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;z-index:70}
.dropdown-menu.right{left:auto;right:0}
.dropdown.open .dropdown-menu{display:block}
.dropdown-menu a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--ink-2);font-size:13.4px;font-weight:500}
.dropdown-menu a svg{width:16px;height:16px;color:var(--brand)}
.dropdown-menu a:hover{background:var(--brand-50);color:var(--brand-700)}
.dropdown-menu .dd-head{padding:8px 10px 10px;border-bottom:1px solid var(--line-2);margin-bottom:4px}
.dropdown-menu .dd-head b{display:block;font-size:13.5px}
.dropdown-menu .dd-head small{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.dropdown-menu a.dd-danger,.dropdown-menu a.dd-danger svg{color:var(--bad)}
.dropdown-menu a.dd-danger:hover{background:var(--bad-bg)}

/* the search / jump palette */
.palette{position:fixed;inset:0;z-index:200;background:rgba(22,32,42,.42);display:flex;align-items:flex-start;justify-content:center;padding:10vh 16px 16px}
.palette[hidden]{display:none}
.pal-box{width:100%;max-width:640px;background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden}
.pal-input{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.pal-input svg{color:var(--brand)}
.pal-input input{flex:1;border:0!important;outline:0;font:inherit;font-size:15px;padding:4px 0!important;box-shadow:none!important;background:transparent}
.pal-list{max-height:60vh;overflow-y:auto;padding:6px}
.pal-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;color:var(--ink)}
.pal-item.on,.pal-item:hover{background:var(--brand-50);color:var(--ink)}
.pal-type{flex:0 0 86px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--brand-700)}
.pal-main{min-width:0}
.pal-main b{display:block;font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-main small{display:block;color:var(--ink-3);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-empty{padding:26px 12px;text-align:center;color:var(--ink-3)}
body.pal-open{overflow:hidden}

/* ------------------------------------------- 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:1480px;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:#FAFBFC;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,#0A86A8,#0B95BA);color:#fff;border-color:transparent;
  box-shadow:0 4px 14px rgba(10,134,168,.28)}
.btn-primary:hover{color:#fff;filter:brightness(1.07);box-shadow:0 6px 20px rgba(10,134,168,.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:#FAFBFC;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,#0A86A8,#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,#0A86A8,#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:#FAFBFC;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(10,134,168,.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),#0B95BA);box-shadow:0 8px 22px rgba(10,134,168,.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,.nav-mini .sidebar{transform:translateX(-100%);width:var(--sidebar-w)}
  body.nav-open .sidebar{transform:none;box-shadow:var(--shadow-lg)}
  .main,.nav-mini .main{margin-left:0}
  .sb-collapse{display:none}
  .nav-mini .sb-logo-full{display:block}.nav-mini .sb-logo-mark{display:none}
  .nav-mini .nav-label,.nav-mini .me-txt,.nav-mini .sb-search span{display:inline}
  .nav-mini .nav-item{justify-content:flex-start;padding:8px 12px}
  .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)}

/* =====================================================================
   PRAGATI POWER - the working look
   Flat white surfaces, hairline borders, pill-shaped controls and one blue
   for every action. Placed last so it settles every screen at once.
   ===================================================================== */
.card,.stat{border-radius:var(--radius-lg);box-shadow:none;border-color:var(--line)}
.stat:hover{transform:none;box-shadow:var(--shadow)}
.card-head{padding:14px 18px}
.card-head h3{font-size:14.5px;font-weight:650}
.page-head{align-items:center;margin-bottom:18px}
.page-head h2{font-size:21px;font-weight:700}
.page-head .right{gap:8px}

.btn{height:36px;border-radius:999px;padding:0 15px;font-weight:600;font-size:13px;border-color:var(--line);color:var(--ink-2)}
.btn:hover{border-color:var(--brand);color:var(--brand);background:#fff}
.btn-primary,.btn-primary:focus{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:none}
.btn-primary:hover{background:var(--brand-700);border-color:var(--brand-700);color:#fff;filter:none;box-shadow:0 6px 16px -6px rgba(10,134,168,.6)}
.btn-accent{background:var(--accent);border-color:var(--accent);box-shadow:none}
.btn-accent:hover{background:var(--accent-600);border-color:var(--accent-600);color:#fff}
.btn-dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-dark:hover{background:#000;color:#fff;border-color:#000}
.btn-sm{height:30px;padding:0 11px;font-size:12px}
.btn-icon{width:32px;padding:0}
.btn-sm.btn-icon{width:30px}

input[type=text],input[type=number],input[type=date],input[type=email],input[type=tel],input[type=password],
input[type=file],input[type=search],input[type=datetime-local],input[type=time],input[type=month],select,textarea{border-color:#DCE2E7;border-radius:10px}
input:focus,select:focus,textarea:focus{border-color:var(--brand)!important;box-shadow:0 0 0 3px rgba(10,134,168,.14)!important}

table.data th{background:#FAFBFC;color:var(--ink-3);font-size:11.5px;letter-spacing:.04em;text-transform:none;font-weight:600;padding:11px 14px}
table.data td{padding:11px 14px;border-bottom-color:var(--line-2)}
table.data tbody tr:hover{background:#F7FBFC}
table.data tfoot th{background:#FAFBFC}
.card-foot{background:#FCFDFD}
.note{background:#F8FBFC}

.tabs{gap:2px}
.tabs a.on{color:var(--brand);border-bottom-color:var(--brand)}
.chipbar a.on{background:var(--brand);border-color:var(--brand);color:#fff}
.pill{font-weight:600}
.tag{border-radius:999px;background:var(--line-2)}

/* segmented control - the view switch (Board / Table) */
.seg{display:inline-flex;background:var(--line-2);border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px}
.seg a,.seg button{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9px;font:600 12.8px var(--font);
  color:var(--ink-3);border:0;background:none;cursor:pointer;white-space:nowrap}
.seg a svg,.seg button svg{width:15px;height:15px}
.seg a:hover,.seg button:hover{color:var(--ink)}
.seg a.on,.seg button.on{background:var(--brand);color:#fff;box-shadow:0 2px 6px -2px rgba(10,134,168,.6)}

/* a toolbar row above a list */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.toolbar .spacer{flex:1}
.switch{display:inline-flex;align-items:center;gap:8px;font-size:12.8px;font-weight:500;color:var(--ink-2);cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch i{width:32px;height:18px;border-radius:999px;background:#D5DCE2;position:relative;transition:.15s;flex:0 0 32px}
.switch i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.switch input:checked + i{background:var(--brand)}
.switch input:checked + i::after{left:16px}
.switch input:focus-visible + i{outline:2px solid var(--brand);outline-offset:2px}

/* ---------------------------------------------------------- lead board */
.board{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;align-items:flex-start;min-height:60vh;
  scroll-snap-type:x proximity}
.lane{flex:0 0 272px;background:#F1F4F6;border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;
  max-height:calc(100vh - 230px);scroll-snap-align:start}
.lane-head{display:flex;align-items:center;gap:8px;padding:11px 12px 9px;border-bottom:1px solid var(--line)}
.lane-head b{font-size:13px;font-weight:650}
.lane-head .cnt{font-size:11.5px;font-weight:700;color:var(--ink-3);background:#fff;border:1px solid var(--line);border-radius:999px;padding:0 8px}
.lane-head .sum{margin-left:auto;font-size:11.5px;color:var(--ink-3);font-weight:600}
.lane-head .lane-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.lane-body{padding:9px;overflow-y:auto;flex:1;min-height:80px;display:flex;flex-direction:column;gap:8px}
.lane.drop-on{border-color:var(--brand);background:var(--brand-50)}
.lane-empty{font-size:12px;color:var(--ink-4);text-align:center;padding:16px 6px;border:1.5px dashed #D5DCE2;border-radius:10px}
.lcard{display:block;background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 11px;color:var(--ink);
  cursor:grab;transition:box-shadow .12s,border-color .12s;position:relative}
.lcard:hover{border-color:#C9D6DE;box-shadow:var(--shadow);color:var(--ink)}
.lcard.dragging{opacity:.45}
.lcard .lc-top{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-3);margin-bottom:3px}
.lcard .lc-top .id{font-weight:600}
.lcard .lc-top .pri{margin-left:auto;font-weight:700;color:var(--bad);text-transform:uppercase;letter-spacing:.05em;font-size:10px}
.lcard b{display:block;font-size:13.4px;font-weight:600;line-height:1.3;margin-bottom:2px}
.lcard .lc-meta{font-size:12px;color:var(--ink-3);line-height:1.45}
.lcard .lc-foot{display:flex;align-items:center;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line-2);font-size:11.5px;color:var(--ink-3)}
.lcard .lc-foot .due{font-weight:600}
.lcard .lc-foot .due.late{color:var(--bad)}
.lcard .lc-foot .due.today{color:var(--warn)}
.lcard .lc-foot .owner{margin-left:auto;width:22px;height:22px;border-radius:50%;background:var(--brand-50);color:var(--brand-700);
  font-size:9.5px;font-weight:700;display:grid;place-items:center}
.lcard .lc-acts{position:absolute;top:8px;right:8px;display:none;gap:4px}
.lcard:hover .lc-acts{display:flex}
.lcard .lc-acts a{width:24px;height:24px;border-radius:7px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--ink-3)}
.lcard .lc-acts a svg{width:13px;height:13px}
.lcard .lc-acts a:hover{color:var(--brand);border-color:var(--brand)}
.lcard:hover .lc-top .pri{visibility:hidden}

/* filter drawer */
.fpanel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:14px}
.fpanel[hidden]{display:none}
.fpanel .filters .field{min-width:160px}
.bulkbar{display:none;align-items:center;gap:10px;flex-wrap:wrap;background:var(--ink);color:#fff;border-radius:12px;padding:8px 12px;margin-bottom:12px}
.bulkbar.on{display:flex}
.bulkbar select{height:32px;width:auto;min-width:150px;color:var(--ink)}
.bulkbar .btn{height:32px}
.bulkbar b{font-weight:650}
table.data td.ck,table.data th.ck{width:36px;padding-right:0}
.ck input{width:16px;height:16px;accent-color:var(--brand)}

/* a small modal used by the board (reason for a lost lead) */
.modal{position:fixed;inset:0;z-index:150;background:rgba(22,32,42,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.modal[hidden]{display:none}
.modal-box{background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);width:100%;max-width:440px;padding:20px}
.modal-box h3{font-size:16px;margin-bottom:4px}
.modal-box p{color:var(--ink-3);font-size:13px;margin:0 0 12px}
.modal-box .row{justify-content:flex-end;margin-top:14px}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;
  font-size:13px;font-weight:500;z-index:300;box-shadow:var(--shadow-lg);max-width:calc(100vw - 32px)}
.toast.bad{background:var(--bad)}

@media (max-width:860px){
  .lane{flex-basis:84vw;max-height:none}
  .board{min-height:0}
  .btn-new span{display:none}
  .btn-new{width:38px;padding:0!important}
  .tb-search{display:none}
}

/* =====================================================================
   INSIDE THE ANDROID APP
   The sidebar becomes a drawer behind "More", the top bar becomes an app bar
   and the five places people use most sit in a tab bar at the bottom.
   ===================================================================== */
body.in-app{background:#F3F6F8;padding-bottom:calc(64px + env(safe-area-inset-bottom))}
body.in-app .sidebar{transform:translateX(-100%);width:min(84vw,300px)}
body.in-app.nav-open .sidebar{transform:none;box-shadow:var(--shadow-lg)}
body.in-app.nav-open::after{content:"";position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:35}
body.in-app .main{margin-left:0}
body.in-app .sb-collapse{display:none}
body.in-app .hamburger{display:none}
body.in-app .topbar{height:58px;padding:0 12px;background:#fff;gap:8px;padding-top:env(safe-area-inset-top);box-shadow:0 1px 0 var(--line)}
body.in-app .topbar h1{font-size:17px}
body.in-app .topbar .sub{display:none}
body.in-app .top-actions .branch-pick,body.in-app .top-actions .branch-tag{display:none}
body.in-app .content{padding:14px 12px 20px}
body.in-app .app-back{border:0;width:36px;height:36px}
body.in-app .card,body.in-app .stat{border-radius:16px}
body.in-app .page-head h2{font-size:18px}
.app-tabs{display:none}
body.in-app .app-tabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;background:#fff;border-top:1px solid var(--line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(22,32,42,.06)}
.app-tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 0;color:var(--ink-3);font-size:11px;font-weight:600;position:relative;
  -webkit-tap-highlight-color:transparent}
.app-tabs a svg{width:22px;height:22px}
.app-tabs a.on{color:var(--brand)}
.app-tabs a.on svg{background:var(--brand-50);border-radius:999px;padding:3px 14px;width:52px;height:28px}
.app-tabs .tab-dot{position:absolute;top:2px;left:calc(50% + 8px);width:8px;height:8px;border-radius:50%;background:var(--accent);border:2px solid #fff}

/* stat tiles: icon on the left, figure beside it - more of them fit in one glance */
.stat{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:13px;align-items:center;padding:15px 16px}
.stat>.ico{grid-row:1 / span 3;margin:0;width:42px;height:42px;border-radius:12px}
.stat>.ico svg{width:20px;height:20px}
.stat>*:not(.ico){grid-column:2}
.stat .label{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:500;color:var(--ink-3)}
.stat .value{font-size:22px;margin:1px 0 1px}
.stat .foot{font-size:11.5px}
@media (min-width:1280px){ .gfit{grid-template-columns:repeat(5,minmax(0,1fr))} }
table.data.wide td{white-space:nowrap}
table.data.wide td .branch-cell{display:inline-block}
body.in-app .sidebar{z-index:60}
body.in-app.nav-open::after{z-index:55}
@media (max-width:1024px){ .sb-search kbd{display:none} }
@media (max-width:680px){ .lead-stats{display:none} .toolbar{gap:8px} }

/* ---------------------------------------------------- load calculator */
.lc-group+.lc-group{border-top:1px solid var(--line)}
.lc-group-head{padding:12px 18px 8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-700);background:#FAFBFC}
.lc-table td{padding:8px 10px}
.lc-table td.num input[type=number]{width:100%;min-width:62px;height:34px;padding:0 8px;text-align:right;font-variant-numeric:tabular-nums}
.lc-table td input[type=text]{height:34px}
.lc-table input[type=number]::-webkit-inner-spin-button,.lc-table input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.lc-table input[type=number]{-moz-appearance:textfield;appearance:textfield}
.lc-table input[type=checkbox]{width:17px;height:17px;accent-color:var(--brand)}
.lc-table tr.lc-on{background:var(--brand-50)}
.lc-table tr.lc-on td b{color:var(--brand-700)}
.lc-table .lc-kwh{font-weight:600;white-space:nowrap}

/* ------------------------------------------- inputs inside table rows
   Line-item editors (invoice, purchase, costing, proposal) sit in narrow
   columns: tighter padding so a number like 14200.00 is never cut off. */
table.data td input[type=text],table.data td input[type=number],table.data td input[type=date],table.data td select{
  height:34px;padding:0 8px;font-size:13px;border-radius:8px}
table.data td select{padding-right:24px;background-position:right 6px center;min-width:96px}
table.data td input[type=number]{text-align:right;font-variant-numeric:tabular-nums;min-width:64px;
  -moz-appearance:textfield;appearance:textfield}
table.data td input[type=number]::-webkit-inner-spin-button,table.data td input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.itable td{padding:6px 6px}

/* file pickers look like the rest of the form */
input[type=file]{padding:6px;height:auto;background:#FAFBFC;cursor:pointer;font-size:12.8px;color:var(--ink-3)}
input[type=file]::file-selector-button{border:1px solid var(--line);background:#fff;color:var(--ink-2);border-radius:999px;
  padding:6px 14px;margin-right:10px;font:600 12.5px var(--font);cursor:pointer;transition:.15s}
input[type=file]::file-selector-button:hover{border-color:var(--brand);color:var(--brand)}
input[type=checkbox],input[type=radio]{accent-color:var(--brand)}
.check{cursor:pointer}

/* a document number never breaks over two lines */
table.data td:first-child a[href*="-view.php"]{white-space:nowrap}
table.data td input[name*="hsn"]{min-width:90px}

/* =====================================================================
   NATIVE FEEL INSIDE THE ANDROID APP
   No website furniture: the app bar already names the screen, so list
   screens drop their big heading and blurb, detail screens drop the
   breadcrumb, and "Back" buttons give way to the app bar's back arrow.
   Pages swap with a quick fade while the app bar and tab bar stay put.
   ===================================================================== */
body.in-app{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:contain;-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;touch-action:manipulation}
body.in-app input,body.in-app textarea,body.in-app select,body.in-app [contenteditable],
body.in-app td,body.in-app p,body.in-app .copyable{-webkit-user-select:text;user-select:text}
body.in-app .crumb,
body.in-app .page-head .back-btn{display:none}
body.in-app .page-head > div:first-child:not(:has(.crumb)) > h2,
body.in-app .page-head > div:first-child:not(:has(.crumb)) > p{display:none}
body.in-app .page-head > div:first-child:not(:has(.crumb)):not(:has(> :not(h2):not(p))){display:none}
body.in-app .page-head .right:empty{display:none}
body.in-app .page-head:has(> div:first-child:not(:has(.crumb))):not(:has(.right > *)){display:none}
body.in-app .btn,body.in-app .app-tabs a,body.in-app .nav-item,body.in-app .icon-btn{transition:transform .12s ease,background .12s}
body.in-app .btn:active,body.in-app .icon-btn:active,body.in-app .nav-item:active{transform:scale(.97)}
body.in-app .app-tabs a:active svg{transform:scale(.92)}
body.in-app .card:active{transform:none}
body.in-app .topbar{position:sticky;top:0;z-index:30;view-transition-name:appbar}
body.in-app .app-tabs{view-transition-name:apptabs}
body.in-app .sidebar{transition:transform .26s cubic-bezier(.2,.8,.2,1);will-change:transform;touch-action:pan-y}
body.in-app.nav-dragging .sidebar{transition:none}
body.in-app.nav-open::after,body.in-app.nav-dragging::after{content:"";position:fixed;inset:0;background:rgba(15,23,42,.45);
  z-index:55;opacity:var(--scrim,1);transition:opacity .2s}
body.in-app.nav-dragging:not(.nav-open)::after{opacity:var(--scrim,0)}
@view-transition{navigation:auto}
::view-transition-old(root){animation:pp-fade-out .12s ease both}
::view-transition-new(root){animation:pp-fade-in .16s ease both}
@keyframes pp-fade-out{to{opacity:0}}
@keyframes pp-fade-in{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* pull down at the top of a screen to refresh it */
.ptr{position:fixed;left:50%;top:calc(58px + env(safe-area-inset-top));z-index:29;width:38px;height:38px;margin-left:-19px;
  border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(22,32,42,.18);display:grid;place-items:center;
  transform:translateY(-60px) scale(.6);opacity:0;pointer-events:none;color:var(--brand)}
.ptr svg{width:20px;height:20px}
.ptr.spin svg{animation:pp-spin .7s linear infinite}
@keyframes pp-spin{to{transform:rotate(360deg)}}
/* a form screen: the app bar already says "Edit invoice" */
body.in-app.pg-form .page-head > div:first-child > h2,
body.in-app.pg-form .page-head > div:first-child > p{display:none}
body.in-app.pg-form .page-head:not(:has(.right > :not(.back-btn))){display:none}

/* =====================================================================
   HR & PAYROLL
   ===================================================================== */
.g-side{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start}
@media (max-width:1024px){ .g-side{grid-template-columns:1fr} }

/* the punch card */
.punch-card{padding:18px 20px;display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(135deg,#fff 0%,#fff 55%,var(--brand-50) 100%)}
.punch-main{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.punch-clock b{font-size:38px;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.punch-clock span{font-size:15px;font-weight:700;color:var(--ink-3);margin-left:4px}
.punch-clock small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:4px}
.punch-state{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.punch-times{display:flex;gap:14px;flex-wrap:wrap;font-size:12.8px;color:var(--ink-3)}
.punch-times b{color:var(--ink);font-weight:650}
.punch-form{display:flex;flex-direction:column;gap:8px}
.punch-btn{height:52px;font-size:16px;border-radius:14px;width:100%;max-width:420px}
.punch-btn svg{width:22px;height:22px}
.punch-photo{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--ink-2);max-width:420px}
.punch-photo svg{width:18px;height:18px}
.punch-photo input{flex:1;min-width:0}
.punch-note{display:flex;align-items:center;gap:6px}
.punch-note svg{width:14px;height:14px}
.punch-trip{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:var(--info-bg);color:#1E40AF;font-size:13px;font-weight:600}
.punch-trip svg{width:18px;height:18px}
.geo-status{font-size:12.8px;padding:8px 11px;border-radius:10px;background:var(--info-bg);color:#1E40AF;max-width:520px}
.geo-status.bad{background:var(--bad-bg);color:#991B1B}
.dash-hr{display:block}
.dash-hr.has-wait{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:900px){ .dash-hr{grid-template-columns:1fr} }
.hr-wait .card-body{display:flex;flex-direction:column;gap:6px}
.hr-wait-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:13.5px}
.hr-wait-row:hover{border-color:var(--brand);background:var(--brand-50)}
.hr-wait-row svg{width:18px;height:18px;color:var(--brand)}
.hr-wait-row b{margin-left:auto;background:var(--accent);color:#fff;border-radius:999px;padding:1px 9px;font-size:12px}

/* month summary and calendar */
.month-nav{display:inline-flex;gap:6px;align-items:center}
.year-pill{font-size:16px;padding:0 8px}
.att-sum{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-bottom:16px}
.att-sum>div{background:#F6F8FA;border-radius:12px;padding:10px 8px;text-align:center}
.att-sum b{display:block;font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.att-sum span{font-size:11.5px;color:var(--ink-3)}
.att-sum .hl{background:var(--brand-50)}
.att-sum .hl b{color:var(--brand-700)}
@media (max-width:680px){ .att-sum{grid-template-columns:repeat(4,minmax(0,1fr))} .att-sum b{font-size:17px} }
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.cal-h{font-size:11px;font-weight:700;color:var(--ink-3);text-align:center;padding:2px 0 4px;text-transform:uppercase;letter-spacing:.05em}
.cal-d{position:relative;min-height:64px;border-radius:10px;border:1px solid var(--line);padding:6px 7px;display:flex;flex-direction:column;gap:1px;background:#fff}
.cal-d.blank{border:0;background:transparent}
.cal-d .n{font-size:12px;font-weight:700;color:var(--ink-2)}
.cal-d .c{font-size:15px;font-weight:700}
.cal-d .t{font-size:10px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-d.is-today{box-shadow:0 0 0 2px var(--brand)}
.cal-d .late,.cal-key .late{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.cal-key .late{position:static;display:inline-block;vertical-align:middle;margin-right:3px}
@media (max-width:680px){ .cal{gap:3px} .cal-d{min-height:50px;padding:4px 5px;border-radius:8px} .cal-d .t{display:none} .cal-d .c{font-size:13px} }
.st-present,.st-working{background:#ECFDF5!important;border-color:#A7F3D0!important}.st-present .c,.st-working .c,td.st-present,td.st-working{color:#047857}
.st-half,.st-half_leave{background:#FFFBEB!important;border-color:#FDE68A!important}.st-half .c,.st-half_leave .c,td.st-half,td.st-half_leave{color:#B45309}
.st-absent,.st-leave_unpaid{background:#FEF2F2!important;border-color:#FECACA!important}.st-absent .c,.st-leave_unpaid .c,td.st-absent,td.st-leave_unpaid{color:#DC2626}
.st-leave{background:#EFF6FF!important;border-color:#BFDBFE!important}.st-leave .c,td.st-leave{color:#1D4ED8}
.st-weekoff{background:#F3F4F6!important}.st-weekoff .c,td.st-weekoff{color:#6B7280}
.st-holiday{background:#F5F3FF!important;border-color:#DDD6FE!important}.st-holiday .c,td.st-holiday{color:#6D28D9}
.st-na,.st-upcoming{opacity:.55}
.pill.st-pill{border:1px solid transparent}
.cal-key{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:12px;font-size:11.5px;color:var(--ink-3);align-items:center}
.cal-key .k{padding:2px 8px;border-radius:7px;border:1px solid var(--line)}

/* month register */
.reg-wrap{overflow-x:auto}
table.reg{border-collapse:collapse;font-size:11.5px;min-width:100%}
.reg th,.reg td{border:1px solid var(--line-2,#EEF1F4);padding:5px 4px;text-align:center;min-width:26px;font-weight:700}
.reg th{background:#F8FAFB;color:var(--ink-3);font-size:11px}
.reg th small{display:block;font-weight:500;font-size:9.5px}
.reg th.sun{color:var(--bad)}
.reg .who{text-align:left;min-width:150px;position:sticky;left:0;background:#fff;z-index:1;font-weight:600}
.reg th.who{background:#F8FAFB}

/* holidays */
.hol-month{padding:12px 18px 6px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--brand-700);background:#FAFBFC;border-top:1px solid var(--line)}
.hol-month:first-child{border-top:0}
.hol-row{display:flex;align-items:center;gap:14px;padding:10px 18px;border-top:1px solid var(--line-2,#EEF1F4)}
.hol-row.past{opacity:.6}
.hol-date{width:46px;flex:0 0 46px;text-align:center;border-radius:10px;background:var(--brand-50);padding:5px 0}
.hol-date b{display:block;font-size:17px;color:var(--brand-700);line-height:1.1}
.hol-date span{font-size:10.5px;color:var(--ink-3);text-transform:uppercase}
.hol-name{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hol-name b{margin-right:4px}
.hol-act{display:flex;gap:6px}

/* employee form */
.wk-pick{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px}
.checks{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px}
.checks .check,.card-body>.check{display:flex;align-items:center;gap:7px;font-size:13px;margin-top:8px}

/* payslip view */
.slip-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.slip-cols h4,.card-body>h4{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);margin:0 0 4px}
@media (max-width:680px){ .slip-cols{grid-template-columns:1fr;gap:12px} }
.payroll-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.payroll-actions form{display:flex;gap:8px;flex-wrap:wrap}
.inline-ref input{height:38px;min-width:200px}

/* trips */
.trip-live{border:1.5px solid var(--brand-100);background:linear-gradient(135deg,#fff,var(--brand-50))}
.trip-live-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:6px}
.trip-live-top h3{font-size:18px;margin:8px 0 2px}
.trip-km{text-align:right}
.trip-km b{display:block;font-size:40px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--brand-700);font-variant-numeric:tabular-nums}
.trip-km span{font-size:12px;color:var(--ink-3)}
.trip-end{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.route-svg{width:100%;max-width:420px;height:auto;display:block;margin:0 auto}

/* inside the app: the punch button is the first thing on the home screen */
body.in-app .punch-card{border-radius:18px}
body.in-app .punch-btn{max-width:none}
.cell-stack{min-width:0}
.cell-stack>.pill+.pill{margin-left:4px}

/* =====================================================================
   TWO-LEVEL MENU
   A slim rail of sections (always there) and a panel with the pages of the
   chosen section. Hiding the panel leaves the rail; a section then slides
   its pages out over the screen.
   ===================================================================== */
:root{--rail-w:78px;--panel-w:228px;--sidebar-w:calc(var(--rail-w) + var(--panel-w));--sidebar-mini:var(--rail-w)}
.sidebar.two-level{flex-direction:row;background:transparent;border-right:0}
.sb-rail{width:var(--rail-w);flex:0 0 var(--rail-w);background:linear-gradient(180deg,#0B3A4C 0%,#0A2F3E 100%);
  display:flex;flex-direction:column;align-items:center;padding:12px 0 10px;gap:4px;overflow-y:auto;scrollbar-width:none;position:relative;z-index:2}
.sb-rail::-webkit-scrollbar{display:none}
.rail-mark{width:46px;height:46px;border-radius:14px;background:#fff;display:grid;place-items:center;margin-bottom:10px;flex:0 0 46px}
.rail-mark img{width:34px;height:34px;object-fit:contain}
.rail-mark b{color:var(--brand);font-size:15px}
.rail-item{position:relative;width:64px;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 2px 7px;
  border:0;border-radius:14px;background:transparent;color:#A9C4CF;cursor:pointer;font:600 10.5px var(--font);letter-spacing:.01em;
  transition:background .15s,color .15s;-webkit-tap-highlight-color:transparent}
.rail-item svg{width:21px;height:21px}
.rail-item span{max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-item:hover{background:rgba(255,255,255,.08);color:#fff}
.rail-item.on{background:#fff;color:var(--brand-700);box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}
.rail-item.on svg{color:var(--brand)}
.rail-dot{position:absolute;top:4px;right:8px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--accent);
  color:#fff;font:700 9.5px/17px var(--font);font-style:normal;text-align:center;box-shadow:0 0 0 2px #0B3A4C}
.rail-item.on .rail-dot{box-shadow:0 0 0 2px #fff}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:10px}
.rail-me{width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;margin-top:6px}
.rail-me:hover{color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.25)}

.sb-panel{width:var(--panel-w);flex:0 0 var(--panel-w);background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.two-level .sb-brand{padding:14px 10px 8px 16px;min-height:60px}
.two-level .sb-logo-full{max-width:158px;height:34px}
.two-level .sb-search{margin:2px 12px 6px}
.two-level .sb-nav{padding:4px 10px 12px}
.two-level .sb-group{display:none;margin:0}
.two-level .sb-group.open{display:block;animation:sbIn .18s ease}
@keyframes sbIn{from{opacity:0;transform:translateX(-6px)}}
.sb-group-head{display:flex;align-items:center;gap:8px;padding:10px 10px 10px;font:700 15px var(--font);color:var(--ink);letter-spacing:-.01em}
.sb-group-head svg{width:18px;height:18px;color:var(--brand)}
.two-level .sb-items{display:block}
.two-level .nav-item{border-radius:12px;padding:9px 12px}
.two-level .sb-foot{display:none}

/* page list hidden: only the rail; a section peeks out over the page */
.nav-mini .sidebar.two-level{width:var(--rail-w)}
.nav-mini .main{margin-left:var(--rail-w)}
.nav-mini .two-level .sb-panel{position:absolute;left:var(--rail-w);top:0;bottom:0;transform:translateX(-110%);
  transition:transform .22s ease;box-shadow:var(--shadow-lg);z-index:1}
.nav-mini.sb-peek .two-level .sb-panel{transform:none}
/* undo the old single-column "mini" look inside the panel */
.nav-mini .two-level .sb-brand{flex-direction:row;padding:14px 10px 8px 16px}
.nav-mini .two-level .sb-logo-full{display:block}
.nav-mini .two-level .sb-search{justify-content:flex-start;margin:2px 12px 6px;padding:8px 10px}
.nav-mini .two-level .sb-search span{display:inline}
.nav-mini .two-level .nav-item{justify-content:flex-start;padding:9px 12px}
.nav-mini .two-level .nav-label{display:inline}
.nav-mini .two-level .nav-badge{position:static;min-width:20px;padding:1px 7px;font-size:10.5px}
.nav-mini .two-level .nav-item:hover::after{display:none}
.two-level .sb-collapse svg{transform:rotate(180deg)}
.nav-mini .two-level .sb-collapse svg{transform:none}
.nav-mini .rail-item.on{background:rgba(255,255,255,.14);color:#fff}
.nav-mini.sb-peek .rail-item.on{background:#fff;color:var(--brand-700)}

/* phones and the app: the whole two-level menu is the drawer */
@media (max-width:1024px){
  .sidebar.two-level,.nav-mini .sidebar.two-level{width:min(92vw,var(--sidebar-w))}
  .nav-mini .two-level .sb-panel{position:static;transform:none;box-shadow:none}
  .two-level .sb-panel{flex:1 1 auto;width:auto}
  .two-level .sb-collapse{display:none}
}
body.in-app .sidebar.two-level{width:min(92vw,var(--sidebar-w))}
body.in-app .two-level .sb-panel{position:static;transform:none;box-shadow:none;flex:1 1 auto;width:auto}
body.in-app .two-level .sb-collapse{display:none}
body.in-app .sb-rail{padding-top:calc(12px + env(safe-area-inset-top))}
.nav-mini .two-level .sb-logo{justify-content:flex-start;flex:1}
.two-level .sb-group.open .nav-item{animation:none}
.switch-list{display:flex;flex-direction:column}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px dashed var(--line);cursor:pointer}
.switch-row:last-child{border-bottom:0}
.switch-row b{display:block;font-size:13.4px;font-weight:600}
.switch-row small{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
.switch-row .switch{flex:0 0 auto}
.page-sub-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.page-sub-head h3{font-size:17px;margin:0}
.inline-filter select{height:34px}
.emp-links{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.bell-menu{min-width:290px;max-width:330px}
.bell-menu a{align-items:flex-start}
.bell-menu a svg{margin-top:2px}
.bell-menu a span b{display:block;font-weight:600;font-size:13px;color:var(--ink)}
.bell-menu a span small{display:block;font-size:11.5px;color:var(--ink-3)}
.bell-empty{display:flex;gap:8px;align-items:center;padding:10px;color:var(--ink-3);font-size:13px}
.bell-empty svg{width:16px;height:16px;color:var(--ok)}
.hr-mini{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px}
.hr-mini a{background:#F6F8FA;border-radius:12px;padding:10px 6px;text-align:center;color:var(--ink-3);font-size:11.5px}
.hr-mini a:hover{background:var(--brand-50)}
.hr-mini b{display:block;font-size:20px;color:var(--ink);letter-spacing:-.02em}
.hr-mini b small{font-size:12px;color:var(--ink-3);font-weight:600}
.hr-mini b.warn{color:var(--warn)} .hr-mini b.bad{color:var(--bad)}
.hr-quick{display:flex;flex-wrap:wrap;gap:6px}
.hr-wait .card-body>.muted svg{width:14px;height:14px;color:var(--ok);vertical-align:-2px}