/* ===================================================================
   SOLARNIX - 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}

/* The `hidden` attribute must survive a class that sets its own display.
   The browser's own [hidden]{display:none} loses to any class rule with a
   display in it, which is how the Ctrl+K palette ended up welded open on every
   screen: .kbar sets display:flex, and flex beat hidden. Put back once, here,
   for every element, so no future panel can be caught by the same thing. */
[hidden]{display:none !important}
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}
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}
/* A column's heading lines up the way its cells do, or the eye has to guess
   which number belongs to which word. `.right` alone loses to `table.data th`
   on specificity, which is why an Action header sat left of its own button. */
table.data td.num,table.data th.num{text-align:right;font-variant-numeric:tabular-nums}
table.data td.right,table.data th.right{text-align:right}
table.data td.center,table.data th.center{text-align:center}

/* Buttons in a cell sit on one line and stay on the side their header is on. */
table.data td.right > .btn,
table.data td.right > form{vertical-align:middle}
table.data td.right{white-space:nowrap}
table.data td.right .btn + .btn,
table.data td.right form + .btn,
table.data td.right .btn + form{margin-left:6px}
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:not([type]) is in this list deliberately.
   An <input> with no type attribute behaves exactly like a text box, but an
   attribute selector cannot match an attribute that is not there — so every
   bare <input> in the panel was falling back to the browser's own narrow
   default while the fields beside it were full width. That is how the "Add a
   stage" form ended up with a box too small to show its own placeholder. */
input:not([type]),
input[type=text],input[type=number],input[type=date],input[type=email],input[type=tel],input[type=password],
input[type=search],input[type=url],input[type=time],input[type=datetime-local],input[type=month],
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}
/* A block inside a form that belongs to somebody else's process - the Jan
   Samarth portal inside a bank loan file, say. Boxed rather than merely
   headed, because the point is that these fields track a queue the office
   does not control, and mixing them into the bank's own fields is how one of
   the two silently stops being updated. */
.js-block{border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:0 10px 10px 0;
  padding:14px 16px 4px;margin:0 0 18px;background:var(--bg)}
.js-block legend{margin:0 0 4px;display:flex;align-items:center;gap:8px}
.js-block legend .pill{text-transform:none;letter-spacing:0}

/* The strip of actions at the bottom of a card.
   Nineteen screens used this class and the stylesheet had never defined it, so
   the buttons sat flush against the card's edge with no separation from the
   form above them. */
.card-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 18px;border-top:1px solid var(--line-2);background:var(--bg)}
.card-foot .right,.card-foot .spacer{margin-left:auto}
.card-foot .muted{font-size:12px}

/* A tick box and the sentence beside it.
   align-items:flex-start, because a label that wraps to two lines would
   otherwise centre the box against the middle of the paragraph. The margin is
   what keeps a stack of three options from reading as one block of text. */
.check{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;
  color:var(--ink-2);font-weight:500;cursor:pointer}
.check + .check{margin-top:10px}
.check input{width:16px;height:16px;accent-color:var(--brand);margin:2px 0 0;flex:0 0 auto}
.check b{font-weight:650;color:var(--ink)}
.check .sub{display:block;font-weight:400;color:var(--ink-3);font-size:12.3px;margin-top:2px}

/* Picking one of a handful of things — a mail service, say — where each option
   carries a line of detail. A plain <select> hides that detail behind a click,
   and the detail is the whole reason the choice is easy: seeing "smtp.hostinger.com
   · port 465 · SSL" is what tells somebody they have picked the right one. */
.radio-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:10px}
.radio-card{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;cursor:pointer;
  border:1px solid var(--line);border-radius:12px;background:var(--card);
  font-size:13px;line-height:1.5;color:var(--ink-2);font-weight:500;transition:border-color .12s,box-shadow .12s}
.radio-card:hover{border-color:var(--brand-600)}
.radio-card.on{border-color:var(--brand);box-shadow:0 0 0 3px rgba(30,58,138,.09)}
.radio-card input{width:16px;height:16px;accent-color:var(--brand);margin:2px 0 0;flex:0 0 auto}
.radio-card b{font-weight:650;color:var(--ink)}
.radio-card .sub{display:block;font-weight:400;color:var(--ink-3);font-size:12px;margin-top:3px;
  word-break:break-word}

/* A row of small figures under a heading — a dealer's totals, say. */
.stat-row{display:flex;flex-wrap:wrap;gap:22px;padding:14px 18px;border-bottom:1px solid var(--line-2)}
.stat-row > div{min-width:96px}
.stat-row .k{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.stat-row .v{display:block;font-size:17px;font-weight:650;color:var(--ink);
  font-variant-numeric:tabular-nums}
.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.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}
}

/* ===========================================================================
   What the ERP adds: tags and the board they build, the attendance punch,
   and the little label that says which partner a record came through.
   =========================================================================== */

/* --- tags ---------------------------------------------------------------- */
.tag-row{display:inline-flex;flex-wrap:wrap;gap:5px;align-items:center;vertical-align:middle}
.tag-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 8px;border-radius:20px;
  font-size:12px;font-weight:600;line-height:1.35;white-space:nowrap;
  background:var(--tag-bg);color:var(--tag);border:1px solid transparent}
.tag-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tag);flex:0 0 auto}
.tag-chip.sm{padding:2px 8px 2px 7px;font-size:11px}

/* choosing them on a record */
.tag-pick{display:flex;flex-wrap:wrap;gap:7px}
.tag-pick label{cursor:pointer}
.tag-pick input{position:absolute;opacity:0;width:0;height:0}
.tag-pick .tag-chip{border-color:var(--line);background:transparent;color:var(--ink-3);transition:all .12s}
.tag-pick .tag-chip::before{background:var(--tag);opacity:.45}
.tag-pick input:checked + .tag-chip{background:var(--tag-bg);color:var(--tag);border-color:transparent}
.tag-pick input:checked + .tag-chip::before{opacity:1}
.tag-pick input:focus-visible + .tag-chip{outline:2px solid var(--brand);outline-offset:2px}

/* the colours a tag may take */
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatches label{cursor:pointer;position:relative}
.swatches input{position:absolute;opacity:0;width:0;height:0}
.swatches .sw{display:block;width:30px;height:30px;border-radius:9px;border:2px solid transparent;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.1)}
.swatches input:checked + .sw{border-color:var(--ink);transform:scale(1.06)}
.swatches input:focus-visible + .sw{outline:2px solid var(--brand);outline-offset:2px}

/* a board whose columns are tags rather than stages */
/* align-items:flex-start so a column is as tall as what is in it. Stretching
   them all to the tallest turns three empty tags into three empty walls. */
.tag-board{display:flex;align-items:flex-start;gap:14px;overflow-x:auto;
  padding-bottom:10px;scroll-snap-type:x proximity}
.tag-col{flex:0 0 278px;scroll-snap-align:start;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);display:flex;flex-direction:column;min-height:150px;max-height:70vh}
.tag-col-head{padding:11px 13px;border-bottom:1px solid var(--line);display:flex;align-items:center;
  gap:8px;position:sticky;top:0;background:var(--bg);border-radius:var(--radius) var(--radius) 0 0;z-index:1}
.tag-col-head .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.tag-col-head b{font-size:13px;font-weight:650;flex:1 1 auto}
.tag-col-head .n{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tag-col-body{padding:9px;display:flex;flex-direction:column;gap:8px;overflow-y:auto}
.tag-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 11px;
  border-left:3px solid var(--tag,var(--line));text-decoration:none;transition:box-shadow .12s}
.tag-card:hover{box-shadow:var(--shadow-sm)}
.tag-card .t{font-size:13px;font-weight:600;color:var(--ink);display:block}
.tag-card .s{font-size:11.5px;color:var(--ink-3);margin-top:3px;display:block}
.tag-col-empty{padding:20px 12px;text-align:center;font-size:12px;color:var(--ink-4)}

/* --- marking yourself in and out ---------------------------------------- */
.punch-row{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start;margin-top:14px}
.btn.big{padding:12px 22px;font-size:15px;border-radius:12px}
.punch-facts{display:flex;gap:26px;flex-wrap:wrap;padding-top:4px}
.punch-facts > div{font-size:13px}
.punch-facts span{display:block;color:var(--ink-3);font-size:11.5px;margin-bottom:2px}
.punch-facts b{font-size:15px;font-weight:650;display:block}
.punch-facts i{font-style:normal;font-size:11.5px;color:var(--ink-3)}
/* a punch further from the branch than expected — flagged, never blocked */
.far{color:var(--warn);font-weight:650}

/* the monthly register */
table.data.compact td,table.data.compact th{padding:6px 5px;font-size:12px}
td.att{font-weight:700;font-size:11px;text-align:center}
td.att.ok{background:var(--ok-bg);color:var(--ok)}
td.att.bad{background:var(--bad-bg);color:var(--bad)}
td.att.warn{background:var(--warn-bg);color:var(--warn)}
td.att.info{background:var(--info-bg);color:var(--info)}
td.att.flagged{box-shadow:inset 0 0 0 2px var(--warn-bg)}
.inline-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.inline-form input{padding:5px 8px;font-size:12px}

/* --- whose record it is -------------------------------------------------- */
.chan{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:20px;
  font-size:11px;font-weight:600;background:var(--indigo-bg);color:var(--indigo);white-space:nowrap}
.chan i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 auto}
.chan-franchise{background:var(--cyan-bg);color:var(--cyan)}

.checkrow{display:flex;gap:16px;flex-wrap:wrap}
.sec{margin:20px 0 10px;font-size:13px;font-weight:650;color:var(--ink-2);
  padding-top:14px;border-top:1px solid var(--line-2)}
@media (max-width:640px){
  .punch-row{gap:16px}
  .btn.big{width:100%;justify-content:center}
  .punch-facts{width:100%;gap:18px}
}

/* ===========================================================================
   The loan book
   ---------------------------------------------------------------------------
   A register that is chased from, not just read. The row that needs a call is
   tinted rather than badged, because on a screen of thirty rows a tint is the
   thing the eye finds first; and the follow-up box sits inside the row so the
   note can be written without opening anything.
   =========================================================================== */
tr.warn-row > td{background:var(--warn-bg,#FFFBEB)}
tr.warn-row:hover > td{background:#FEF3C7}

.small.bad,.bad{color:var(--bad)}
.small.ok,td .ok{color:var(--ok)}

.chase-form{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chase-form input[type=text]{flex:1 1 130px;min-width:110px;font-size:12px;padding:6px 8px;
  border:1px solid var(--line);border-radius:7px}
.chase-form input[type=date]{flex:0 0 122px;font-size:12px;padding:6px 8px;
  border:1px solid var(--line);border-radius:7px}
.chase-form input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ghost,rgba(15,118,110,.12))}
.chase-form .btn{padding:6px 11px}

@media (max-width:860px){
  .chase-form{flex-direction:column}
  .chase-form input[type=date]{flex:1 1 auto}
}

/* ===========================================================================
   The bell, and the list behind it
   ---------------------------------------------------------------------------
   Deliberately plain. A notification panel that animates, badges and colours
   everything teaches people to close it without reading; this one is a short
   list of sentences with a coloured edge for the ones that are urgent.
   =========================================================================== */
.bellwrap{position:relative}
.bell-panel{position:absolute;right:0;top:calc(100% + 8px);width:340px;max-width:calc(100vw - 24px);
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 44px rgba(15,23,42,.16);z-index:60;overflow:hidden}
.bell-head{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:11px 14px;border-bottom:1px solid var(--line-2);font-size:13px}
.bell-body{max-height:min(60vh,420px);overflow:auto}
.bell-empty{padding:18px 14px;color:var(--muted);font-size:12.5px;line-height:1.6}
.bell-item{display:block;padding:11px 14px;border-bottom:1px solid var(--line-2);
  border-left:3px solid transparent;text-decoration:none;color:inherit}
.bell-item:hover{background:var(--bg-soft,#F8FAFC)}
.bell-item b{display:block;font-size:13px;font-weight:600}
.bell-item span{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin-top:2px}
.bell-item small{display:block;color:var(--muted);font-size:11px;margin-top:4px}
.bell-item.t-warn{border-left-color:var(--warn)}
.bell-item.t-bad{border-left-color:var(--bad)}
.bell-item.t-good{border-left-color:var(--ok)}
.bell-foot{display:block;padding:10px 14px;font-size:12px;text-align:center;
  background:var(--bg-soft,#F8FAFC);text-decoration:none;color:var(--brand)}
.linklike{background:none;border:0;padding:0;color:var(--brand);font:inherit;font-size:12px;cursor:pointer}

.notelist{display:flex;flex-direction:column}
.noterow{display:flex;gap:12px;align-items:flex-start;padding:13px 18px;
  border-bottom:1px solid var(--line-2);text-decoration:none;color:inherit}
.noterow:hover{background:var(--bg-soft,#F8FAFC)}
.noterow .nb{flex:0 0 8px;width:8px;height:8px;border-radius:50%;margin-top:6px;background:var(--brand)}
.noterow.t-warn .nb{background:var(--warn)}
.noterow.t-bad .nb{background:var(--bad)}
.noterow.t-good .nb{background:var(--ok)}
.noterow.read{opacity:.55}
.noterow.read .nb{background:var(--line)}
.noterow .nt{flex:1}
.noterow .nt b{display:block;font-size:13.5px;font-weight:600}
.noterow .nt span{display:block;color:var(--muted);font-size:12.5px;line-height:1.55;margin-top:3px}
.noterow small{color:var(--muted);font-size:11.5px;white-space:nowrap}

.tlist{display:flex;flex-direction:column}
.titem{display:block;padding:11px 16px;border-bottom:1px solid var(--line-2);
  border-left:3px solid transparent;text-decoration:none;color:inherit}
.titem:hover{background:var(--bg-soft,#F8FAFC)}
.titem.on{border-left-color:var(--brand);background:var(--brand-ghost,rgba(15,118,110,.06))}
.titem b{display:block;font-size:13px;font-weight:600}
.titem span{display:block;color:var(--muted);font-size:12px;margin-top:3px}

/* ===========================================================================
   The gallery manager
   ---------------------------------------------------------------------------
   Tiles, not a table. The office is choosing between photographs, and a row of
   filenames is no help at all for that — they need to see the pictures. Each
   tile carries its own order box so the whole page's order is set in one pass
   and saved with one button.
   =========================================================================== */
.gal-grid{display:grid;gap:14px;padding:14px 16px;
  grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}
.gal-item{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);
  display:flex;flex-direction:column}
.gal-item.off{opacity:.55}
.gal-pic{position:relative;aspect-ratio:4/3;background:var(--bg-soft,#F1F5F9)}
.gal-pic img{width:100%;height:100%;object-fit:cover;display:block}
.gal-hidden{position:absolute;left:8px;top:8px;background:rgba(15,23,42,.82);color:#fff;
  font-size:10.5px;font-weight:600;padding:3px 7px;border-radius:5px;letter-spacing:.02em}
.gal-gone{display:flex;align-items:center;justify-content:center;height:100%;
  color:var(--bad);font-size:12px;font-weight:600;background:var(--bad-bg,#FEF2F2)}
.gal-meta{padding:9px 11px;flex:1;min-height:0}
.gal-meta b{display:block;font-size:12.6px;font-weight:600;line-height:1.35}
.gal-meta span{display:block;font-size:11.6px;color:var(--muted);line-height:1.45;margin-top:2px}
.gal-act{display:flex;gap:6px;align-items:center;padding:8px 11px;border-top:1px solid var(--line-2)}
.gal-act input[type=number]{width:62px;font-size:12px;padding:5px 7px;
  border:1px solid var(--line);border-radius:6px}
.gal-act .btn{margin-left:auto}

@media (max-width:640px){
  .gal-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:12px}
}

/* A number typed into a cell belongs under the heading that names it, so the
   input reads right the way the figures around it do. */
table.data td.num input[type=number],
table.data td.num input[type=text].mono{text-align:right;font-variant-numeric:tabular-nums}

/* ===========================================================================
   One colour per area of the business
   ---------------------------------------------------------------------------
   Nine areas, nine hues. The point is not decoration: the panel is used all
   day by people who are not reading the headings, and a colour learned once
   tells them at a glance whether they are in Sales or in Money — which matters
   most on the screens that look alike, a list of rows with a filter bar.

   The hues are spaced around the wheel so no two neighbours in the rail are
   the same family, and every one of them clears 4.5:1 on the dark rail and on
   white. The two configuration areas are deliberately the quietest: Settings
   should not shout.

   Each rail button carries its own colour all the time, not only when active.
   A colour you only see once you have already arrived teaches you nothing.
   =========================================================================== */
.rail-btn[data-area="overview"]{--area:#60A5FA}
.rail-btn[data-area="sales"]   {--area:#34D399}
.rail-btn[data-area="delivery"]{--area:#FB923C}
.rail-btn[data-area="partners"]{--area:#A78BFA}
.rail-btn[data-area="team"]    {--area:#F472B6}
.rail-btn[data-area="money"]   {--area:#E0A93C}
.rail-btn[data-area="business"]{--area:#22D3EE}
.rail-btn[data-area="website"] {--area:#A3E635}
.rail-btn[data-area="system"]  {--area:#94A3B8}

.rail-btn{color:color-mix(in srgb, var(--area, #93A6D4) 62%, #7E8BA8)}
.rail-btn:hover{background:rgba(255,255,255,.08);
  color:color-mix(in srgb, var(--area, #E2EAFA) 88%, white)}
.rail-btn.on{background:color-mix(in srgb, var(--area) 18%, transparent);color:var(--area)}
.rail-btn.on::before{background:var(--area)}
.rail-dot{background:var(--area, #C98A16)}

/* The workspace takes the colour of the area it is showing. One variable set
   on <body>, so every rule below follows without knowing which page it is. */
body[data-area="overview"]{--area:#3B82F6; --area-soft:#EFF6FF; --area-ink:#1D4ED8}
body[data-area="sales"]   {--area:#059669; --area-soft:#ECFDF5; --area-ink:#047857}
body[data-area="delivery"]{--area:#EA580C; --area-soft:#FFF7ED; --area-ink:#C2410C}
body[data-area="partners"]{--area:#7C3AED; --area-soft:#F5F3FF; --area-ink:#6D28D9}
body[data-area="team"]    {--area:#DB2777; --area-soft:#FDF2F8; --area-ink:#BE185D}
body[data-area="money"]   {--area:#B45309; --area-soft:#FFFBEB; --area-ink:#92400E}
body[data-area="business"]{--area:#0891B2; --area-soft:#ECFEFF; --area-ink:#0E7490}
body[data-area="website"] {--area:#4D7C0F; --area-soft:#F7FEE7; --area-ink:#3F6212}
body[data-area="system"]  {--area:#475569; --area-soft:#F8FAFC; --area-ink:#334155}
body{--area:#1E3A8A; --area-soft:#EFF4FF; --area-ink:#172E6E}   /* before an area is known */

/* the panel: its title and the item you are on */
.area-title{color:color-mix(in srgb, var(--area) 55%, #B9C6E4)}
.nav-item.active{background:color-mix(in srgb, var(--area) 22%, rgba(255,255,255,.06))}
.nav-item.active svg{color:color-mix(in srgb, var(--area) 70%, white)}
.nav-item.active::before{content:"";position:absolute;left:-10px;top:6px;bottom:6px;width:3px;
  border-radius:0 3px 3px 0;background:var(--area)}

/* the page: a rule under the heading, and the crumb above it */
.page-head h2{position:relative}
.page-head > div:first-child > h2::after{content:"";display:block;width:34px;height:3px;border-radius:2px;
  background:var(--area);margin-top:9px;opacity:.9}
.crumb a{color:var(--area-ink)}

/* the tab bar a few screens use */
.tabs .tab.on{color:var(--area-ink);border-bottom-color:var(--area)}
.chipbar a.on{background:var(--area);border-color:var(--area)}

@media (prefers-reduced-motion:no-preference){
  .rail-btn{transition:background .14s ease,color .14s ease}
}

/* ------------------------------------------------------- pipeline board
   The same column shell as the tag board, with a card that carries the two
   things a sales desk decides from: how long it has been sitting here, and
   whether the call is overdue. Moving is two buttons rather than a drag —
   a drag on a phone, on a roof, with one hand, is not a feature. */
.stage-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.4px;font-weight:600;
  padding:3px 10px;border-radius:999px;color:var(--st);background:color-mix(in srgb,var(--st) 12%,white);
  border:1px solid color-mix(in srgb,var(--st) 26%,white)}

.pl-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 11px;
  border-left:3px solid var(--tag,var(--line));display:flex;flex-direction:column;gap:7px}
.pl-card.stale{border-color:#FDE68A;background:#FFFDF5}
.pl-name{display:block;text-decoration:none;color:inherit}
.pl-name b{display:block;font-size:13.2px;font-weight:600;line-height:1.3}
.pl-name span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.pl-meta{display:flex;flex-wrap:wrap;gap:4px 9px;font-size:11.4px;color:var(--ink-3)}
.pl-meta .bad{color:var(--bad);font-weight:600}
.pl-move{display:flex;gap:5px;align-items:center}
.pl-move form{display:inline}
.pl-move .btn{padding:4px 9px;font-size:12px;line-height:1.2}
.pl-move > a{margin-inline:auto}

/* ---------------------------------------------------------------- follow-ups
 * The strip of people across the top of the follow-up board. It is a tally,
 * not a menu - the number of late calls against each name is the whole point,
 * so that is what carries the colour and the name does not.
 */
.fu-people{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.fu-person{display:block;padding:9px 13px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);text-decoration:none;min-width:152px;
  transition:border-color .12s,box-shadow .12s}
.fu-person:hover{border-color:var(--area,var(--brand))}
.fu-person.on{border-color:var(--area,var(--brand));box-shadow:inset 0 0 0 1px var(--area,var(--brand))}
.fu-person b{display:block;font-size:13px;color:var(--ink);margin-bottom:2px}
.fu-nums{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.fu-nums i{font-style:normal;font-weight:650}
.fu-nums i.late{color:var(--bad)}
.fu-nums i.due{color:var(--warn)}
.fu-nums i.none{color:var(--ink-4)}
.fu-late{color:var(--bad);font-weight:600}

/* ------------------------------------------------------------- Ctrl+K search
 * The palette sits above everything, is dismissed by Esc or a click outside,
 * and is the width of a sentence rather than the width of the window — a
 * result list you have to sweep your eyes across is slower to read.
 */
.kbar-btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 10px 0 9px;
  border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink-3);
  font-size:12.5px;text-decoration:none;transition:border-color .12s,color .12s}
.kbar-btn:hover{border-color:var(--area,var(--brand));color:var(--ink)}
.kbar-btn svg{width:15px;height:15px}
.kbar-btn kbd{font:inherit;font-size:10.5px;padding:1px 5px;border:1px solid var(--line);
  border-radius:5px;background:var(--card);color:var(--ink-4)}
@media (max-width:820px){.kbar-btn span,.kbar-btn kbd{display:none}.kbar-btn{padding:0 9px}}

.kbar{position:fixed;inset:0;z-index:300;background:rgba(15,23,42,.42);
  backdrop-filter:blur(2px);display:flex;align-items:flex-start;justify-content:center;
  padding:9vh 16px 16px}
body.kbar-on{overflow:hidden}
.kbar-box{width:100%;max-width:620px;background:var(--card);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column;max-height:76vh}
.kbar-top{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.kbar-top svg{width:19px;height:19px;color:var(--ink-4)}
.kbar-top input{flex:1;border:0;outline:0;font:inherit;font-size:16px;background:transparent;color:var(--ink)}
.kbar-top kbd{font:inherit;font-size:11px;padding:2px 6px;border:1px solid var(--line);
  border-radius:6px;color:var(--ink-4)}
.kbar-hint{padding:8px 16px;font-size:12px;color:var(--ink-4);border-bottom:1px solid var(--line-2)}
.kbar-list{overflow:auto;padding:6px 0 8px}
.kbar-group{padding:9px 16px 4px;font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-4)}
.kbar-hit{display:block;padding:8px 16px;text-decoration:none;border-left:3px solid transparent}
.kbar-hit .t{display:block;font-size:13.5px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kbar-hit .s{display:block;font-size:11.5px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kbar-hit.on{background:var(--area-soft,var(--info-bg));border-left-color:var(--area,var(--brand))}
.kbar-hit.on .t{color:var(--area-ink,var(--brand-700))}

/* The same hit, on the full search page. */
.sr-hit{display:block;padding:10px 18px;border-bottom:1px solid var(--line-2);text-decoration:none}
.sr-hit:last-child{border-bottom:0}
.sr-hit:hover{background:var(--area-soft,var(--info-bg))}
.sr-hit .t{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.sr-hit .s{display:block;font-size:11.5px;color:var(--ink-3)}

/* ------------------------------------------------ reordering by dragging
 * The pipeline's columns are put in order by dragging a row rather than by
 * typing sort numbers into a box. The handle is the only part that starts a
 * drag, so selecting the text of a row still works normally.
 */
.grip-cell{width:34px;padding-right:0}
.grip{display:grid;place-items:center;width:28px;height:28px;padding:0;
  border:0;border-radius:7px;background:transparent;color:var(--ink-4);cursor:grab;
  transition:background .12s,color .12s;
  /* A finger on the handle drags the row instead of scrolling the page. */
  touch-action:none;-webkit-user-select:none;user-select:none}
.grip:hover{background:var(--line-2);color:var(--ink-2)}
.grip:focus-visible{outline:2px solid var(--area,var(--brand));outline-offset:1px;color:var(--ink-2)}
.grip:active{cursor:grabbing}
.grip svg{width:16px;height:16px}

tr.drag-row.is-dragging td{background:var(--area-soft,var(--info-bg));
  box-shadow:inset 0 0 0 1px var(--area,var(--brand))}
tr.drag-row.is-dragging .grip{cursor:grabbing;color:var(--area,var(--brand))}
/* While a row is being carried, nothing on the page should be selectable —
   otherwise dragging highlights half the table as it goes. */
body.is-reordering{cursor:grabbing;-webkit-user-select:none;user-select:none}

.order-state{font-size:12px;color:var(--ink-3)}
.order-state.ok{color:var(--ok);font-weight:600}
.order-state.bad{color:var(--bad);font-weight:600}

/* Two or three related tick boxes that belong together — the "does this column
   mean anything" pair, for instance. Boxed so they read as one question with
   several answers rather than as three unrelated switches in a row. */
.opt-group{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--bg)}
.opt-group .check + .check{margin-top:11px;padding-top:11px;border-top:1px solid var(--line-2)}

/* ------------------------------------------------ what the team has been doing
 * One line per entry: when, what kind, which lead and what was said, and who
 * did it. The name sits at the end on purpose — the question is almost always
 * "what happened to this customer", and only sometimes "what has she been up
 * to", so the lead leads and the person follows.
 */
.act{display:grid;grid-template-columns:62px 104px 1fr auto;gap:12px;align-items:baseline;
  padding:10px 18px;border-bottom:1px solid var(--line-2)}
.act:last-child{border-bottom:0}
.act-when{font-size:11.5px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.act-kind{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);padding:2px 7px;border-radius:6px;background:var(--line-2);
  justify-self:start;white-space:nowrap}
.act-kind.k-call,.act-kind.k-whatsapp{background:#ECFDF5;color:#047857}
.act-kind.k-stage{background:#F5F3FF;color:#6D28D9}
.act-kind.k-status{background:#EFF6FF;color:#1D4ED8}
.act-kind.k-system{background:var(--line-2);color:var(--ink-4)}
.act-body{font-size:13px;color:var(--ink-2);min-width:0}
.act-body a{color:var(--ink)}
.act-what{margin-left:6px;color:var(--ink-2)}
.act-note{display:block;font-size:11.8px;color:var(--ink-3);margin-top:2px;
  border-left:2px solid var(--line);padding-left:8px}
.act-who{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
@media (max-width:760px){
  .act{grid-template-columns:1fr auto;gap:4px 10px}
  .act-when{grid-column:1}
  .act-who{grid-column:2;grid-row:1}
  .act-kind,.act-body{grid-column:1 / -1}
}

/* The delivery rules on the stages screen — read as sentences, not as data. */
.rule-list{margin:0;padding:0;list-style:none}
.rule-list li{padding:7px 0 7px 18px;position:relative;font-size:13px;line-height:1.5;
  border-bottom:1px solid var(--line)}
.rule-list li:last-child{border-bottom:0;padding-bottom:0}
.rule-list li::before{content:'';position:absolute;left:0;top:14px;width:6px;height:6px;
  border-radius:50%;background:var(--brand)}

/* The follow-up board's action cell — ONE line, so the same three controls sit
   at the same place in every row down the column. It used to hold three loose
   elements (two icon links, a block-level form, another link), which the
   browser broke across two or three lines wherever it liked; nothing lined up
   with the row above it. The two ways to ring somebody moved next to their
   number, where they read better anyway. */
.fu-do{display:flex;align-items:center;justify-content:flex-end;gap:6px;
  flex-wrap:nowrap;margin-top:0}
.fu-do .btn{white-space:nowrap;min-width:64px;justify-content:center}
.fu-do input[type=date]{flex:0 0 138px}

/* The person, their number and the two ways to reach them. */
.fu-who{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:3px}
.fu-who .btn-icon{padding:3px 6px;min-width:0}

/* On a narrow screen a table scrolls sideways rather than folding the actions
   into a stack nobody can aim at. */
@media (max-width:900px){
  .fu-do{justify-content:flex-start}
  .fu-do input[type=date]{flex:1 1 120px}
}

/* Dragging a lead across the pipeline board.
   The card stays in its column, faded, while a copy follows the pointer — so
   the columns do not reflow under the cursor and the card has somewhere to go
   back to if the move is refused. */
.pl-card{cursor:grab;touch-action:none}
.pl-card:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.pl-card.is-lifted{opacity:.35;cursor:grabbing}
.pl-ghost{position:fixed;z-index:60;pointer-events:none;margin:0;
  box-shadow:0 14px 34px rgba(15,23,42,.22);transform:rotate(-1.4deg);opacity:.97;
  border-color:var(--brand)}
.tag-col-body.is-over{background:var(--brand-ghost,rgba(30,58,138,.07));
  outline:2px dashed var(--brand);outline-offset:-4px;border-radius:8px}
body.is-dragging-card{user-select:none}
/* A control inside a card is still a control — the drag starts on the card. */
.pl-card a,.pl-card button,.pl-card input,.pl-card select{cursor:pointer;touch-action:auto}

/* What the board says back: a refusal, or the question before a drop that
   turns a lead into a customer. Sits above the columns so it is read. */
.board-say{position:sticky;bottom:14px;z-index:20;margin-top:14px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 15px;border-radius:12px;font-size:13px;font-weight:550;
  background:var(--card);border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(15,23,42,.14)}
.board-say.ok{border-color:#A7F3D0;background:var(--ok-bg);color:#047857}
.board-say.bad{border-color:#FECACA;background:var(--bad-bg);color:#B91C1C}
.board-say.warn{border-color:#FDE68A;background:var(--warn-bg);color:#B45309}
.board-say-text{flex:1 1 auto;min-width:0}
.board-say-acts{display:flex;gap:7px;flex:0 0 auto}

/* The band across the top while an administrator is inside a partner's
   account. Deliberately loud: somebody who forgets they are looking at a
   franchise's numbers will read them as the company's. */
.acting-band{position:sticky;top:0;z-index:80;display:flex;align-items:center;gap:12px;
  padding:9px 18px;background:#7C2D12;color:#FFEDD5;
  font-size:13px;box-shadow:0 2px 12px rgba(124,45,18,.3)}
.acting-band b{color:#fff}
.acting-dot{width:9px;height:9px;border-radius:50%;background:#FB923C;flex:0 0 auto;
  box-shadow:0 0 0 4px rgba(251,146,60,.25)}
.acting-text{flex:1 1 auto;min-width:0;line-height:1.35}
.acting-text span{display:block;font-size:11.6px;color:#FDBA74}
.acting-band form{flex:0 0 auto;margin:0}
.acting-band .btn{background:#FFF7ED;border-color:#FDBA74;color:#7C2D12}
.acting-band .btn:hover{background:#fff}
@media (max-width:700px){
  .acting-band{flex-wrap:wrap}
  .acting-text{flex:1 1 100%;order:2}
}