/* Driver Management System — light theme: white rail, #EEF2FA ground, royal blue #2140D9.
   (Was:
   navy #2c3e50 sidebar, red #c0392b accent, Nunito, #f2f4f7 ground. */
:root{
  /* Light theme (Oct 2026): soft blue-grey ground, white cards, one royal blue.
     The old names are kept so every rule below follows: --red is now the accent
     (royal blue), --navy the deep blue for solid fills. */
  --navy:#1730A8; --navy-soft:#5B6B86; --red:#2140D9; --red-dark:#1730A8;
  --accent-soft:#E7ECFF;
  --bg:#EEF2FA; --card:#ffffff; --line:#DCE3F1; --line-soft:#EDF1F8;
  --ink:#0F172A; --ink-2:#33415C; --ink-3:#5B6B86; --ink-4:#8A97AE;
  --danger:#b91c1c; --danger-bg:#fdeaea; --danger-line:#f3c9c9; --danger-tint:#fef4f4;
  --warn:#b45309; --warn-bg:#fdf3e2; --warn-line:#f0e2cc; --warn-tint:#fffaf2;
  --good:#15803d; --good-bg:#e7f6ec; --good-line:#cfe3d3; --good-tint:#f9fdfa;
  --blue-bg:#e8f0fb; --blue-ink:#1e3a8a;
  /* Nunito for words, Roboto for figures: its digits are even-width, so a
     column of numbers lines up and a long figure in a bar takes less room.
     tabular-nums keeps 1 as wide as 8. */
  --num:Roboto,Nunito,"Segoe UI",Tahoma,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:Nunito,"Segoe UI",Tahoma,sans-serif;background:var(--bg);color:var(--ink);font-size:14px}
a{color:var(--red);text-decoration:none}
a:hover{color:var(--red-dark);text-decoration:underline}

/* shell */
.shell{display:flex;min-height:100vh}
.side{width:214px;flex:none;background:var(--navy);padding:12px 9px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto}
.side .group{font-size:10px;font-weight:800;color:var(--navy-soft);letter-spacing:1px;padding:10px 10px 4px}
.side a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;color:#ecf0f1;font-size:13px;text-decoration:none}
.side a:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.side a.on{background:var(--red);color:#fff;font-weight:700}
.side svg{flex:none}

/* --- the folded rail ------------------------------------------------
   A heading is a button, and only the section holding the current page
   is open. Nothing is hidden — it is folded, and one click opens it. */
.side .pin{font-weight:700;margin-bottom:1px}
.side .sect{display:flex;flex-direction:column}
.side .grp{display:flex;align-items:center;gap:9px;width:100%;margin-top:5px;
  padding:8px 10px;border:0;border-radius:8px;background:transparent;cursor:pointer;
  font-family:inherit;font-size:11.5px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:var(--navy-soft);text-align:left}
.side .grp:hover{background:rgba(255,255,255,.06);color:#fff}
.side .grp .grow{flex:1}
.side .grp .chev{font-size:9px;opacity:.7;transition:transform .16s ease}
/* Open: the heading brightens and its arrow turns down, so the eye can
   tell an open section from a closed one without counting the rows. */
.side .sect.open .grp{color:#fff}
.side .sect.open .grp .chev{transform:rotate(90deg)}
/* Closed by height rather than display:none, so the fold has a motion
   the eye can follow instead of the list jumping. */
.side .grp-body{display:flex;flex-direction:column;gap:2px;overflow:hidden;
  max-height:0;opacity:0;transition:max-height .18s ease,opacity .12s ease}
.side .sect.open .grp-body{max-height:420px;opacity:1}
.side .grp-body a{padding-left:24px;font-size:12.5px;position:relative}
/* A hairline down the left of an open section, so its rows read as one
   thing rather than as a fresh list. */
.side .sect.open .grp-body{border-left:1px solid rgba(255,255,255,.1);margin-left:16px}
.side .sect.open .grp-body a{padding-left:11px}
/* A section that is shut but holds the page you are on still says so. */
.side .sect.here .grp{color:#fff}
.side .sect.here:not(.open) .grp::after{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--red);flex:none;margin-left:2px}
.side .jumphint{margin-top:auto;padding:12px 10px 4px;font-size:10.5px;color:var(--navy-soft)}
.side .jumphint kbd{display:inline-block;padding:1px 5px;margin:0 1px;border-radius:4px;
  background:rgba(255,255,255,.12);font-family:inherit;font-size:10px;font-weight:700}

/* --- Ctrl+K, for people who know where they are going ---------------
   Built from the rail's own links, so a page added to the menu is in
   the jump box the same day and cannot drift out of date. */
.jump{position:fixed;inset:0;z-index:200;background:rgba(17,24,39,.45);
  display:flex;align-items:flex-start;justify-content:center;padding-top:12vh}
.jump[hidden]{display:none}
.jump .box{width:min(520px,92vw);background:var(--card);border-radius:14px;
  box-shadow:0 24px 70px rgba(17,24,39,.35);overflow:hidden}
.jump input{width:100%;height:52px;border:0;border-bottom:1px solid var(--line);
  border-radius:0;font-size:15px;padding:0 16px}
.jump input:focus{outline:none}
.jump .hits{max-height:52vh;overflow-y:auto}
.jump .hit{display:flex;align-items:center;gap:9px;padding:10px 16px;font-size:13px;
  color:var(--ink);text-decoration:none}
.jump .hit .sec{margin-left:auto;font-size:10.5px;font-weight:800;color:var(--ink-4);
  letter-spacing:.5px;text-transform:uppercase}
.jump .hit:hover,.jump .hit.on{background:var(--bg);text-decoration:none}
.jump .hit.on{box-shadow:inset 3px 0 0 var(--red)}
.jump .none{padding:18px 16px;font-size:13px;color:var(--ink-3);text-align:center}
.main{flex-grow:1;min-width:0;display:flex;flex-direction:column}
.top{height:62px;flex:none;background:#fff;border-bottom:1px solid #DCE3F1;display:flex;align-items:center;gap:12px;padding:0 20px}
.brand{width:30px;height:30px;border-radius:8px;background:var(--navy);display:flex;align-items:center;justify-content:center}
.body{padding:18px 22px;display:flex;flex-direction:column;gap:12px}

/* headings */
.crumb{font-size:12px;color:var(--ink-3);margin-bottom:3px}
h1{font-size:24px;font-weight:900;letter-spacing:-.4px;margin:0}
.lede{font-size:13px;color:var(--ink-3);margin-top:2px}
.head{display:flex;align-items:flex-end;gap:10px}
.head .grow{flex-grow:1}

/* controls */
input,select,textarea{font-family:inherit;font-size:13px;color:var(--ink);background:#fff;border:1px solid #d7dbe0;border-radius:7px;padding:0 10px;height:38px}
textarea{padding:8px 10px;height:auto;line-height:1.5}
input::placeholder{color:var(--ink-4)}
label{display:block;font-size:11px;font-weight:800;color:var(--ink-2);margin-bottom:4px;letter-spacing:.2px}
.btn{height:40px;padding:0 15px;border-radius:9px;border:1px solid #d7dbe0;background:#fff;color:var(--ink-2);font-family:inherit;font-size:13px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.btn:hover{text-decoration:none;border-color:var(--navy);color:var(--navy)}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff}
.btn.primary:hover{background:var(--red-dark);border-color:var(--red-dark);color:#fff}
.btn.outline{border-color:var(--navy);color:var(--navy)}
.btn.danger{border-color:var(--danger);color:var(--danger)}
.btn.sm{height:30px;padding:0 12px;font-size:12px;border-radius:7px}
/* Three buttons sit together on a driver's profile and each does a
   different kind of thing, so each looks like a different kind of thing.
   Letters stays a plain white button: it prints paper. Driver File is
   the colour of a manila folder, because that is what it opens. Edit is
   filled navy — it is the one that changes the record, and the only one
   of the three you would not press by accident twice.
   The colours are not the only signal: the folder carries a folder mark
   and Edit is the only filled one, so the row still reads in grey. */
.btn.folder{background:#fdf3e2;border-color:#e2c894;color:#8a5304}
.btn.folder:hover{background:#fbeacd;border-color:#cbab6a;color:#6f4103}
.btn.folder svg{color:#b45309}
.btn.edit{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.edit:hover{background:#22303e;border-color:#22303e;color:#fff}
/* Copy, beside a number somebody is about to retype into a bank form.
   Quiet until the pointer is on it, because it sits inside a field and
   the field's value is what the eye should land on first. */
.cp{margin-inline-start:7px;vertical-align:middle;min-height:21px;padding:0 6px;
    border:1px solid var(--line);background:#fff;border-radius:6px;color:var(--ink-4);
    font-family:inherit;font-size:10px;font-weight:800;cursor:pointer;
    display:inline-flex;align-items:center;gap:4px}
.cp:hover{border-color:var(--navy);color:var(--navy)}
.cp:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
.cp.done{border-color:var(--good-line);background:var(--good-bg);color:#0f5c2e}
.cp.failed{border-color:var(--warn-line);background:var(--warn-bg);color:#7c4a09}

/* A closed file, drained of colour.
   grayscale() keeps every lightness exactly as it was, so nothing gets
   harder to read — a dark word on a pale tile stays a dark word on a
   pale tile. What goes is the meaning colour was carrying: the red that
   says "act on this", the green that says "fine", the orange of the
   folder. None of it applies to a man who has left, and all of it was
   pulling the eye to a record nobody should be working on.
   The photograph greys with the rest, deliberately: a face in colour in
   a grey page is exactly the thing the eye goes to first.
   It sits on .body, so the top bar and the side menu keep their colours
   — they belong to the application, not to him. */
.body.gone{filter:grayscale(1)}
/* Colour is not the only signal: the head carries a grey bar as well,
   for a printed page, a greyscale screen, and anyone who does not see
   colour the way the next person does.
   A line through the man's name was tried here and is not used: a
   closed file is an ordinary administrative fact, and striking out
   somebody's name reads as something else entirely. */
.body.gone .head{border-left:4px solid #9aa3ae;padding-left:13px}
.filters{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.filters .grow{flex-grow:1}

/* cards and tiles */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px}
.card.pad{padding:14px 16px}
.tiles{display:grid;gap:11px}
.tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 14px}
.tl{font-size:10px;color:var(--ink-3);font-weight:700;letter-spacing:.4px}
.tv{font-size:21px;font-weight:900}
.tv .sub{font-size:12px;font-weight:700;color:var(--ink-3)}
.tile.bad{border-color:var(--danger-line);background:#fffafa}
.tile.bad .tl{color:#8f1d1d}
.tile.warn{border-color:var(--warn-line);background:var(--warn-tint)}
.tile.warn .tl{color:#7c4a09}

/* banners */
.note{border-radius:12px;padding:11px 14px;display:flex;align-items:center;gap:10px;font-size:12px}
.note.ok{background:var(--good-bg);border:1px solid var(--good-line);color:#14532d}
.note.bad{background:var(--danger-bg);border:1px solid var(--danger-line);color:#7f1d1d}
.note.warn{background:var(--warn-tint);border:1px solid var(--warn-line);color:#7c4a09}
.note.blue{background:var(--blue-bg);border:1px solid #cfe0f7;color:var(--blue-ink)}
.note .grow{flex-grow:1}

/* tables */
table{width:100%;border-collapse:collapse}
thead th{font-size:10px;font-weight:900;color:var(--ink-2);letter-spacing:.5px;text-align:left;padding:11px 9px;background:#F5F7FC;border-bottom:1px solid var(--line);white-space:nowrap}
tbody td{font-size:13px;padding:11px 9px;border-bottom:1px solid var(--line-soft)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#fbfcfd}
.num{text-align:right;white-space:nowrap}
tfoot td{font-size:13px;font-weight:900;padding:12px 9px;border-top:1px solid var(--line);background:#fbfcfd}
tr.bad{background:var(--danger-tint)}
tr.warn{background:var(--warn-tint)}
tr.good{background:var(--good-tint)}
.band td{font-size:11px;font-weight:800;letter-spacing:.3px;padding:7px 12px}
.band.bad td{background:var(--danger-bg);color:#8f1d1d;border-bottom:1px solid var(--danger-line)}
.band.warn td{background:var(--warn-tint);color:#7c4a09;border-bottom:1px solid var(--warn-line)}
.band.plain td{background:#F5F7FC;color:var(--ink-3);border-bottom:1px solid #eceff2}
/* The grand-total bar under a statement — a footer, not a row. */
.band.navy{background:var(--navy);color:#fff;font-size:13px}
.band.navy .small{color:#c3cfeb}
.scroll{overflow:auto}

/* pills */
.pill{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;border-radius:999px;padding:3px 8px;white-space:nowrap}
.pill.ok{background:var(--good-bg);color:#14532d}
.pill.bad{background:var(--danger-bg);color:#8f1d1d}
.pill.warn{background:var(--warn-bg);color:#7c4a09}
.pill.grey{background:#f0f1f3;color:var(--ink-2)}
.pill.blue{background:var(--blue-bg);color:var(--blue-ink)}
.pill.purple{background:#f3e8fb;color:#6b21a8}
.wa{display:inline-flex;align-items:center;gap:5px;background:#25d366;color:#fff;border-radius:7px;padding:5px 11px;font-size:11px;font-weight:800;text-decoration:none}
.wa:hover{color:#fff;text-decoration:none;background:#1faa52}

/* month strip */
/* A licence run can reach forty months. Squeezing forty chips into the
   width cut every label to "OC" and "MA" — the strip scrolls instead, and
   each chip keeps a width its month name fits in. */
.months{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.mo{flex:1 0 62px;border:1px solid #e0e3e7;background:#fff;border-radius:10px;
  padding:8px 6px 7px;text-align:center;text-decoration:none;color:inherit;display:block}
.mo:hover{border-color:var(--navy);text-decoration:none;color:inherit}
.mo.on{border-color:var(--navy);background:var(--navy)}
.mo.on .mon{color:#c6d2dd}.mo.on .moc{color:#fff}
.mo.past{border-color:var(--danger-line);background:#fffafa}
.mo.past .mon{color:#8f1d1d}.mo.past .moc{color:var(--danger)}
.mon{font-size:11px;font-weight:800;color:var(--ink-2);letter-spacing:.3px}
.moc{font-size:19px;font-weight:900;margin-top:1px}

/* misc */
.k{font-size:10px;color:var(--ink-3);font-weight:700;letter-spacing:.3px}
.v{font-size:13px;font-weight:800;margin-top:1px}
.kv{display:grid;gap:10px}
.muted{color:var(--ink-4)}
/* A CPR and a Talabat ID are both nine-ish digits and sit side by side in
   every search result, so they are told apart by colour rather than by
   counting characters. Blue is the man himself (the government's number),
   amber is Talabat's number for him — the same pair everywhere. */
.n-cpr{color:#1d4ed8;font-weight:700;font-family:var(--num);font-variant-numeric:tabular-nums}
.n-tid{color:#c2410c;font-weight:700;font-family:var(--num);font-variant-numeric:tabular-nums}
.small{font-size:11px;color:var(--ink-3)}
.danger{color:var(--danger)}.warnc{color:var(--warn)}.good{color:var(--good)}
.b{font-weight:800}.b9{font-weight:900}
.messages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tabs{display:flex;align-items:flex-end;gap:4px;border-bottom:1px solid var(--line)}
.tab{font-size:13px;font-weight:800;padding:9px 14px;border-radius:9px 9px 0 0;color:var(--ink-3);text-decoration:none}
.tab.on{background:#fff;border:1px solid var(--line);border-bottom-color:#fff;color:var(--ink);margin-bottom:-1px}
.tab:hover{text-decoration:none}
/* Payroll / Salary History and Maintenance tabs: the profile's underline look. */
.pay-tabs .tab,.mt-tabs .tab{border:0;border-radius:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none}
.pay-tabs .tab.on,.mt-tabs .tab.on{background:none;border:0;border-bottom:2px solid #2563eb;color:#2563eb}
.pay-tabs .tab:hover,.mt-tabs .tab:hover{color:#2563eb}
.bar{height:6px;border-radius:999px;background:#eceff2;overflow:hidden;margin-top:4px}
.bar>span{display:block;height:6px;border-radius:999px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.form-grid input,.form-grid select{width:100%}
.col-form{max-width:520px;display:flex;flex-direction:column;gap:12px}

/* A name in a table is not an action: keep red for the things that do
   something, so a red word on the page always means "click me". */
tbody td a{color:var(--ink);font-weight:600}
tbody td a:hover{color:var(--red)}
tbody td a.b{color:var(--red);font-weight:800}
.tile{display:block;text-decoration:none;color:inherit}
a.tile:hover{border-color:var(--navy);text-decoration:none}

/* ---- driver profile -------------------------------------------------
   The old app's profile card, carried over: a face, four coloured
   figures, and the month-by-month bars with the number written down the
   bar so it is readable without a tooltip. */
.pcard{display:flex;gap:16px;align-items:stretch}
/* The face, with its button underneath — an overlay across the bottom of
   the photo covered the chin, which is how you recognise a man. */
.pphoto{width:104px;flex:none;display:flex;flex-direction:column;gap:6px}
.pphoto .pframe{width:104px;height:140px;border-radius:12px;background:var(--bg);
  border:2px solid var(--line);overflow:hidden;display:flex;align-items:center;
  justify-content:center}
.pphoto img{width:100%;height:100%;object-fit:cover;display:block}
.pphoto .none{font-size:34px;color:var(--ink-4)}
.pphoto form{margin:0;position:relative}
.pphoto .pick{display:block;text-align:center;font-size:12px;font-weight:800;
  padding:10px 0;background:var(--navy);color:#fff;cursor:pointer;letter-spacing:.3px;
  border-radius:8px}
.pphoto .pick:hover{background:var(--red)}
.pphoto input[type=file]{position:absolute;width:1px;height:1px;opacity:0;padding:0;border:0}

/* The face moved into the side rail, above the dates. It costs the rail
   nothing — the rail was always taller than its own rows — and hands a
   whole column back to the figures beside it, which is what lets them
   sit in one line instead of wrapping onto a second.

   The two columns settle their own height between them: the dates set
   what the rail needs, the fields set what the column beside it needs,
   and the face takes whatever is left over rather than a fixed number
   that leaves a patch of empty card under one side or the other. */
.pside{display:flex;flex-direction:column}
.pside .pphoto{width:100%;gap:8px;margin-bottom:11px;flex:none}
/* The frame is a FIXED portrait, the shape the old app used: its
   image_service.py stored every driver photo at 85x115 and both the
   desktop profile card and the web one drew it in a frame of exactly
   that ratio, filled by cover.

   Letting the frame follow the picture instead — height:auto, contain —
   is what spread this card out. Every driver arrived with a different
   shape of photograph, so every profile had a different rail height, the
   fields below stretched apart to meet it, and no two pages looked
   alike.

   The size is the office's call, and it has come down twice: 303px
   tall, then 216, now 135. The ratio is the fixed part, not the
   number — a face at 100x135 is still a face, and the rail it sits in
   is short enough that the fields beside it keep their own spacing
   instead of being stretched to meet it. Cover fills the frame and
   crops the sides, which on a portrait is background, not face. */
.pside .pphoto .pframe{width:100px;height:135px;flex:none;padding:0;margin:0 auto;
  overflow:hidden;display:flex;align-items:center;justify-content:center}
/* object-position:top — when a tall photograph has to lose something, it
   loses it from the feet, never from the head. */
.pside .pphoto .pframe img{display:block;width:100%;height:100%;
  object-fit:cover;object-position:50% 20%}
.pside .pphoto .none{font-size:48px}
.pside .pphoto + .row{border-top:1px solid var(--line);padding-top:9px}

/* Whether the Visa Renewal Risk page lists him, said on his own page.
   Red is the one that needs acting on, so red is the one that shouts. */
.vrisk{display:block;text-align:center;text-decoration:none;font-size:11.5px;
  font-weight:900;letter-spacing:.3px;padding:7px 8px;border-radius:9px;margin-bottom:11px}
.vrisk.bad{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-line)}
.vrisk.ok{background:var(--good-bg);color:var(--good);border:1px solid var(--good-line)}
.vrisk.bad:hover{background:var(--danger-line)}
.vrisk .also{display:block;font-size:11px;font-weight:900;margin-top:1px}
.vrisk .why{display:block;font-size:9.5px;font-weight:700;opacity:.85;
  margin-top:2px;letter-spacing:0}
.pside .vrisk + .row{border-top:1px solid var(--line);padding-top:9px}
/* The fields spread down their column to meet the rail instead of
   stacking at the top with the rest of the card left blank. */
.pcard>div:first-child{display:flex;flex-direction:column}
/* The fields keep their own spacing. They used to stretch to whatever
   height the rail happened to be, which pushed every row apart from its
   neighbour — a tall photograph on the right and the man's details on
   the left drifted into a sparse grid with a line of white between each
   one. Now the slack collects in one place instead of five: the month's
   six figures sit on the bottom edge and the gap, if there is one, is
   the single seam above them. */
/* start, not space-between. Spreading the slack between the rows is
   what put a line of white between every pair of fields whenever the
   rail happened to be taller than the details — the card looked
   different on every driver, and a sparse grid is slower to read than a
   tight one. The slack now sits under the last row, in one piece, where
   nobody has to look at it. */
.pcard .pfields{flex:1;align-content:start}

.kpis{display:grid;gap:10px}
.kpi{border-radius:11px;padding:10px 13px;color:#fff}
.kpi .kl{font-size:11px;font-weight:800;opacity:.9;display:flex;gap:5px;align-items:center}
.kpi .kv{font-size:18px;font-weight:900;margin-top:3px;line-height:1.2}
.kpi .ks{font-size:10px;font-weight:700;opacity:.85}
.kpi.blue{background:#2b6cb0}.kpi.red{background:#c0392b}.kpi.navy{background:#2c3e50}
.kpi.green{background:#15803d}.kpi.purple{background:#6d28d9}.kpi.orange{background:#c2570c}

/* The month's six figures, pressed flat and brought inside the card
   under the fields. They were a full-height strip of their own below it,
   which cost a band of page for six numbers; at this size they fit in
   the room the card already had. Smaller than the five above them on
   purpose — those are what a man owes, these are how he worked. */
.kpis.mini{gap:8px;margin-top:11px}
.kpis.mini .kpi{padding:6px 10px;border-radius:9px}
.kpis.mini .kl{font-size:9.5px;letter-spacing:.2px}
.kpis.mini .kv{font-size:14px;margin-top:1px}

.pside{width:250px;flex:none;background:var(--bg);border-radius:12px;padding:13px}
.pside .row{display:flex;justify-content:space-between;gap:10px;font-size:12px;
  color:var(--ink-3);margin-bottom:7px}
/* The values carry the colour, not the labels. Navy was the first try
   and it was invisible — #2c3e50 beside #1f2937 is the same colour to the
   eye. Blue reads as coloured at a glance; a value with a state of its own
   (an expiry, cash owed) overrides it below. */
.pside .row span{color:var(--ink-3)}
.pside .row b{color:var(--blue-ink);font-weight:800;white-space:nowrap}
.pside .row b.danger{color:var(--danger)}
.pside .row b.warnc{color:var(--warn)}
.pside .row b.good{color:var(--good)}

.pfields{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 18px;margin-top:12px}
.pfields .f .k{font-size:11px;color:var(--ink-3);font-weight:700}
.pfields .f .v{font-size:13px;font-weight:800;color:var(--ink);word-break:break-word}

/* A bar's height is a percentage of the chart box, so a full-height bar
   used up the whole box and pushed the month name out of the card — which
   is what clipped "Oct Nov Dec" along the bottom edge. The box now keeps
   a strip at the foot for the labels, the bars measure against what is
   left, and the label is placed into that strip. */
.bars{display:flex;gap:6px;align-items:flex-end;height:168px;padding-bottom:20px}
.bars .b1{flex:1;height:100%;position:relative;display:flex;flex-direction:column;
  justify-content:flex-end;text-align:center}
.bars .fill{border-radius:4px 4px 0 0;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:6px;min-height:22px}
/* The figure is the point of the chart, so it is set as large as the
   column is wide — the bar is only there to compare them by. The text runs
   up the bar, so what limits it is the COLUMN WIDTH, not the height: cqi
   is that width, and the clamp keeps it readable on a narrow screen and
   stops it bursting the column on a wide one. */
/* --barfont is set per chart by the script in base.html, which measures
   the column width and the bar height. 20px is what a browser with the
   script off gets. */
.bars .fill span{writing-mode:vertical-rl;transform:rotate(180deg);color:#fff;
  font-size:var(--barfont, 20px);font-weight:900;letter-spacing:.5px;line-height:1}
.bars .lab{position:absolute;left:0;right:0;top:100%;margin-top:4px;
  font-size:11px;font-weight:700;color:var(--ink-3)}
.bars .out{font-size:14px;font-weight:900;color:var(--ink);margin-bottom:3px;line-height:1}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:13px}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:8px 15px;
  font-family:inherit;font-size:12px;font-weight:700;color:var(--ink-3);cursor:pointer;height:auto}
.tabs button.on{color:var(--red);border-bottom-color:var(--red)}
.panel[hidden]{display:none}

/* ---- dashboard charts ----------------------------------------------
   A sparkline of rates, a two-colour split bar, and labelled rows —
   drawn in CSS so the page carries no chart library and renders the
   same offline as online. */
.spark{display:flex;gap:4px;height:56px;align-items:flex-end;margin-top:6px;
  border-bottom:1px solid var(--line)}
.spark .s1{flex:1;position:relative;height:100%}
.spark .dot{position:absolute;left:50%;transform:translateX(-50%);width:7px;height:7px;
  border-radius:50%;background:var(--navy)}
.spark .v{position:absolute;bottom:-1px;left:0;right:0;text-align:center;font-size:9px;
  color:var(--ink-3)}

.split{display:flex;height:30px;border-radius:9px;overflow:hidden;background:var(--bg)}
.split .half{display:flex;align-items:center;justify-content:center;color:#fff;
  font-size:12px;font-weight:800;min-width:fit-content;padding:0 8px}

.rowbar{display:flex;align-items:center;gap:9px;margin-top:6px}
.rowbar .lbl{width:110px;font-size:12px;color:var(--ink-2);flex:none}
.rowbar .track{flex:1;height:9px;border-radius:5px;background:var(--bg);overflow:hidden}
.rowbar .fillb{display:block;height:100%;background:var(--navy);border-radius:5px}
.rowbar .val{width:34px;text-align:right;font-size:12px;font-weight:800}

/* the top bar's suggestions — the list under the search box, on every page */
.suggest{position:absolute;top:calc(100% + 5px);left:0;width:340px;z-index:60;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 10px 28px rgba(31,41,55,.15);overflow:hidden;max-height:340px;overflow-y:auto}
.suggest .s-row{display:flex;flex-direction:column;gap:1px;padding:8px 11px;
  border-bottom:1px solid var(--line-soft);color:var(--ink);text-decoration:none}
.suggest .s-row:last-child{border-bottom:0}
.suggest .s-row:hover,.suggest .s-row.on{background:var(--bg);text-decoration:none}
.suggest .s-name{font-size:13px;font-weight:700}
.suggest .s-meta{font-size:11px;color:var(--ink-3)}
.suggest .s-meta .n-cpr{color:#1d4ed8;font-weight:700}
.suggest .s-meta .n-tid{color:#c2410c;font-weight:700}
.suggest .s-empty{padding:12px;font-size:12px;color:var(--ink-3);text-align:center}
/* The picker's rows are real <button>s, not links: choosing a man fills
   a hidden field and stays on the page, and a thing that goes nowhere
   must not be an <a>. These four lines undo what a browser does to a
   button so it sits in the same panel as the top box's links. */
.suggest button.s-row{width:100%;text-align:left;border:0;border-bottom:1px solid var(--line-soft);
                      background:none;font-family:inherit;cursor:pointer}
.suggest button.s-row:last-child{border-bottom:0}

/* Reports — the monthly Profit & Loss, laid out as the signed report is */
.rsum{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rsum .rl{font-size:12px;color:var(--ink-3);font-weight:700}
.rsum .rv{font-size:26px;font-weight:900;margin-top:2px}
.rsum .rv.good{color:var(--good)}.rsum .rv.danger{color:var(--danger)}
.rhead{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;margin-bottom:11px}
.rhead .rt{font-size:15px;color:var(--ink);margin-left:5px}
.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-grid .readv{font-size:17px;font-weight:900;padding:7px 0}
@media (max-width:900px){.form-grid.three{grid-template-columns:1fr}
  .rsum{grid-template-columns:1fr}}


/* Every figure on the app is set in the --num face — the charts, the
   coloured KPI boxes, the tiles, the report's headline numbers, the side
   rail and every numeric table column. The words stay in Nunito. */
.bars .fill span,.bars .out,
.kpi .kv,.tile .tv,.rsum .rv,
.pside .row b,.pfields .f .v,
td.num,th.num,.moc,.spark .v,.rhead .rt,.form-grid .readv{
  font-family:var(--num);font-variant-numeric:tabular-nums}

/* The day-by-day cash strip — the daily columns of Sheet1, which the old
   importer dropped. Collected on top, deposited underneath. */
.days{display:flex;flex-wrap:wrap;gap:4px}
.day{min-width:52px;border:1px solid var(--line);border-radius:7px;background:#fff;
  padding:4px 5px;text-align:center}
.day .dn{font-size:9px;font-weight:800;color:var(--ink-4)}
.day .dc{font-size:12px;font-weight:800;font-family:var(--num);font-variant-numeric:tabular-nums}
.day .dd{font-size:11px;font-family:var(--num);font-variant-numeric:tabular-nums;color:var(--ink-3)}
.day.owed{border-color:var(--warn-line);background:var(--warn-tint)}
.day.owed .dc{color:var(--warn)}
.day.paid{border-color:var(--good-line);background:var(--good-tint)}
.day.paid .dd{color:var(--good);font-weight:800}

/* --- Insights: thirty days, a line per figure ----------------------
   Named .trend, not .spark: the Dashboard already has a .spark and its
   fixed 56px height was silently cropping every card here.
   One series per card, so colour carries no identity and every line is
   the same blue — the title says which figure it is. The only coloured
   thing that means anything is the change, and that ships with an arrow
   and a word beside it so it never depends on the colour alone. */
.trends{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.trend{display:flex;flex-direction:column;gap:2px}
.tr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.tr-title{font-weight:900;font-size:13px}
.tr-note{font-size:10px;color:var(--ink-4);font-weight:700;margin-top:1px}
.tr-delta{font-family:var(--num);font-size:11px;font-weight:800;white-space:nowrap;
  display:flex;align-items:center;gap:3px}
.tr-delta.good{color:var(--good)}
.tr-delta.bad{color:var(--danger)}
.tr-word{font-family:Nunito,sans-serif;font-size:9.5px;font-weight:800;opacity:.85}
/* Proportional figures on the headline number: equal-width digits make a
   large figure look loose. tabular-nums stays in the table below. */
.tr-value{font-family:var(--num);font-variant-numeric:normal;font-size:23px;
  font-weight:900;line-height:1.15;margin:4px 0 2px}
.tr-unit{font-family:Nunito,sans-serif;font-size:10.5px;font-weight:800;color:var(--ink-3)}
/* The container holds the plot AND the band under it, so nothing ends up
   in a nested scrollbar. */
.tr-plot{position:relative;height:58px;margin-top:2px}
.tr-plot svg{width:100%;height:100%;display:block;overflow:visible}
.tr-tip{position:absolute;top:-6px;background:var(--navy);color:#fff;font-size:10px;
  font-weight:800;padding:3px 7px;border-radius:7px;white-space:nowrap;pointer-events:none;
  width:104px;text-align:center}
.tr-band{display:flex;justify-content:space-between;gap:6px;margin-top:7px;
  font-size:9.5px;font-weight:700;color:var(--ink-4)}
.tr-range{font-family:var(--num);font-variant-numeric:tabular-nums;color:var(--ink-3)}
.tr-empty{font-size:11px;color:var(--ink-4);font-weight:700;padding:18px 0 22px}

/* --- the Scorecard, at the top of the Dashboard --------------------
   One card per figure. The shapes inside are SVG from core/charts.py;
   these rules only lay the card out and set the type. */
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:11px;align-items:start}
.sc{padding:11px 12px 12px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.sc.wide{grid-column:span 2}
.sct{font-weight:900;font-size:12.5px;text-align:center;padding-bottom:8px;
  margin-bottom:9px;border-bottom:1px solid var(--line)}
.scg{display:grid;grid-template-columns:repeat(2,1fr);gap:7px 9px;align-items:center}
.scg.tight{margin-top:8px}
.sc.wide .scg{grid-template-columns:repeat(3,1fr)}
.scl{font-size:9px;font-weight:800;color:var(--ink-4);letter-spacing:.35px;
  text-align:center;margin-bottom:3px;text-transform:uppercase}
.scv{font-family:var(--num);font-size:20px;font-weight:900;color:var(--blue-ink);
  background:var(--blue-bg);border:1px solid #cfe0f7;border-radius:9px;
  padding:5px 8px;text-align:center;line-height:1.15}
.scv.t{font-size:16px;background:#f4f6f8;border-color:var(--line);color:var(--ink)}
.scb{text-align:center;font-size:21px;line-height:1}
/* Saturated on purpose: these are read across a desk, not in a table. */
.ar.g{color:#22a745}.ar.r{color:#e8402a}.ar.y{color:#f5c400}
.scf{font-size:9.5px;color:var(--ink-4);font-weight:700;text-align:center;
  margin-top:9px;line-height:1.4}

/* The shapes themselves. Named .signal and .vbar, not .tl and .bar:
   both of those already existed — .tl is the little label on every tile
   in the app, and .bar is the thin progress rail. Reusing either would
   have resized them everywhere. */
.dial{width:100%;height:auto;display:block;margin:-2px 0 2px}
.dval{text-anchor:middle;font-family:Roboto,sans-serif;font-size:27px;font-weight:900;
  fill:#1f2937}
.dsub{text-anchor:middle;font-size:9.5px;font-weight:800;fill:#9aa3ae;
  font-family:Nunito,sans-serif;letter-spacing:.3px}
.signal{width:58px;height:auto;display:block;margin:8px auto 2px}
.donut{width:118px;height:auto;display:block;margin:0 auto}
.nval{text-anchor:middle;font-family:Roboto,sans-serif;font-size:22px;font-weight:900;
  fill:#1f2937}
.nsub{text-anchor:middle;font-size:9px;font-weight:800;fill:#9aa3ae;
  font-family:Nunito,sans-serif}
.scat{width:100%;height:auto;display:block}
.axl{font-size:8.5px;font-weight:800;fill:#9aa3ae;font-family:Nunito,sans-serif}
.bul{width:100%;height:auto;display:block;margin:9px 0 2px}
.bl{font-size:8.5px;font-weight:800;fill:#9aa3ae;font-family:Nunito,sans-serif}
.vbar{width:100%;height:auto;display:block;margin:0 0 3px}
/* Small on purpose: the figure is a check on the bar, not the headline.
   The office asked for it smaller again after seeing it at chart size. */
.bnum{text-anchor:middle;font-family:Roboto,sans-serif;font-size:7.5px;font-weight:900;
  fill:#5b6775}
.blab{text-anchor:middle;font-size:8px;font-weight:800;fill:#9aa3ae;
  font-family:Nunito,sans-serif}
.btar{font-size:8px;font-weight:900;fill:#1730A8;font-family:Nunito,sans-serif}

/* Months on file — small tiles rather than a run-on line of links. The
   cross sits inside the tile and only Admin is served it, so a month
   uploaded by mistake can be taken off the page without a database. */
.mtiles{display:flex;flex-wrap:wrap;gap:7px}
.mtile{display:flex;align-items:center;gap:5px;padding:5px 7px 5px 10px;
  border:1px solid var(--line);border-radius:7px;background:var(--bg);line-height:1}
.mtile a{color:var(--ink-2);font-weight:700;font-size:12.5px;letter-spacing:.2px}
.mtile:hover{border-color:var(--navy-soft)}
.mtile a:hover{color:var(--navy);text-decoration:none}
.mtile.on{background:var(--navy);border-color:var(--navy)}
.mtile.on a{color:#fff}
.mtile form{display:inline;margin:0}
.mdel{border:0;background:none;cursor:pointer;padding:0 2px;line-height:1;
  font-size:15px;color:var(--ink-4);font-family:inherit}
.mdel:hover{color:var(--red)}
.mtile.on .mdel{color:#9fb0c0}
.mtile.on .mdel:hover{color:#fff}

/* A checkbox is not a text box: the shared input rule gives every field a
   38px height and side padding, which on a checkbox showed up as a gap
   between the box and its words. */
input[type=checkbox],input[type=radio]{
  width:14px;height:14px;padding:0;margin:0;border-radius:3px;flex:none;
  accent-color:var(--navy);vertical-align:middle}

/* Users — the owner's panel. A row of small controls inside table cells,
   so a role or a password is changed where you are reading, not on a
   second page. */
.inline-form{display:inline-flex;align-items:center;gap:5px;margin:0}
.inline-form select{height:30px;font-size:12px;padding:0 6px}
.pill.owner{background:var(--blue-bg);color:var(--blue-ink)}
.pill:not(.ok):not(.good):not(.bad):not(.warn):not(.grey):not(.blue):not(.purple):not(.owner){
  background:#f0f1f3;color:var(--ink-2)}
tbody tr.off td{opacity:.55}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--ink-4);margin-inline-end:5px;vertical-align:middle}
.dot.on{background:var(--good);box-shadow:0 0 0 3px var(--good-bg)}

/* An editable figure inside a table. Small, right-aligned and quiet
   until it is used — a row of full-height form boxes turns a ledger
   into a form, and this page is read far more often than it is
   corrected. */
.cell{height:28px;padding:0 7px;font-size:12px;width:92px;text-align:right;
  border-color:#e3e6ea;background:#fcfcfd;font-family:var(--num)}
.cell:focus{background:#fff;border-color:var(--navy)}
.cell.wide{width:100%;min-width:120px;text-align:left;font-family:inherit}

/* ======================================================================
   Review of October 2026 — one set of rules for the whole application.
   Everything below overrides what is above it; the reasons are in short.
   ====================================================================== */
:root{
  /* Darker muted ink: the old #9aa3ae was 2.5:1 on white, too faint to read. */
  --ink-4:#737d89;
  /* Actions and links are navy-blue; red is kept for danger and errors. */
  --action:#1e3a8a; --action-dark:#172c6b; --action-tint:rgba(30,58,138,.14);
}
a{color:var(--action)}
a:hover{color:var(--action-dark)}
tbody td a:hover{color:var(--action)}
tbody td a.b{color:var(--action)}

/* buttons: primary (navy), secondary (white), danger (red) */
.btn{white-space:nowrap;line-height:1.1}
.btn.primary{background:var(--action);border-color:var(--action);color:#fff}
.btn.primary:hover{background:var(--action-dark);border-color:var(--action-dark);color:#fff}
.btn.outline{border-color:var(--action);color:var(--action)}
.btn.danger{border-color:var(--danger-line);color:var(--danger);background:#fff}
.btn.danger:hover{border-color:var(--danger);background:var(--danger-tint);color:var(--danger)}
.btn.danger.fill{background:var(--danger);border-color:var(--danger);color:#fff}
.btn:disabled,.btn[disabled],.btn.is-off{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn.on,.seg .on{background:var(--action);border-color:var(--action);color:#fff}
.head .btn,.head form{flex:none}

/* fields: same height as buttons, a visible focus ring */
input,select{height:40px}
input[type=checkbox],input[type=radio]{height:auto}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--action);box-shadow:0 0 0 3px var(--action-tint)}
input:disabled,select:disabled,textarea:disabled{background:#f4f5f7;color:var(--ink-3)}
input[readonly]{background:#F5F7FC}
input[type=file]{height:40px;padding:4px 8px;background:#fff}
input[type=file]::file-selector-button{font-family:inherit;font-weight:800;font-size:12px;border:1px solid #d7dbe0;
  background:#fff;color:var(--ink-2);border-radius:7px;padding:5px 12px;margin-right:10px;cursor:pointer}
input[type=file]::file-selector-button:hover{border-color:var(--action);color:var(--action)}
/* Required fields carry a red star; an empty required field is pink,
   an empty recommended one is a light amber — on every form. */
.req{color:var(--danger);margin-left:3px;font-weight:900}
.is-empty,.is-empty + .flatpickr-input,input.is-empty.flatpickr-input{background:#fde8e8 !important;border-color:#f3a5a5 !important}
.is-thin{background:#fff8e6 !important;border-color:#f1d18b !important}
.is-blank{border-style:dashed !important;border-color:#c3cad6 !important;background:#fbfcfd !important}
.legend-req{font-size:11px;color:var(--ink-3)}
.legend-req i{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin:0 3px 0 8px;font-style:normal}

/* tiles: the colour of a tile is only for a figure that is not zero */
.tl{font-size:10.5px;text-transform:uppercase}
.tile.zero{border-color:var(--line) !important;background:#fff !important}
.tile.zero .tl{color:var(--ink-3) !important}
.tile.zero .tv{color:var(--ink) !important}
.tile.good{border-color:var(--good-line);background:var(--good-tint)}
.tile.good .tl{color:#14532d}
.goodc{color:var(--good)}
.pill.good{background:var(--good-bg);color:#14532d}
.ok{color:var(--good)}

/* tables: zebra, a hover you can see, row colours that survive the hover */
thead th{font-size:10.5px;text-transform:uppercase}
tbody tr:nth-child(even){background:#fbfcfd}
tbody tr:hover{background:#f1f4f8}
tbody tr.bad,tbody tr.bad:hover{background:var(--danger-tint)}
tbody tr.warn,tbody tr.warn:hover{background:var(--warn-tint)}
tbody tr.good,tbody tr.good:hover{background:var(--good-tint)}
tr.total td,tbody tr.total{font-weight:900;background:#F5F7FC}
.scroll td[colspan]:only-child{position:sticky;left:0}
.empty{padding:22px;text-align:center;color:var(--ink-3)}
td.empty,.empty td{padding:22px !important;text-align:center;color:var(--ink-3)}
/* A link inside an empty message still looks like a link (the table rule above paints cell links black). */
.empty a:not(.btn),tbody td.empty a:not(.btn),tbody td[colspan].muted a:not(.btn){color:var(--action);font-weight:inherit;text-decoration:underline}
.num,.mono-num{font-family:var(--num);font-variant-numeric:tabular-nums}

/* page header wraps instead of squeezing the buttons */
.head{flex-wrap:wrap;row-gap:10px}
.head > div:first-child{min-width:260px}
.lede{max-width:900px;line-height:1.5}
.note .btn{flex:none}
details.how{font-size:12px;color:var(--ink-3)}
details.how summary{cursor:pointer;font-weight:800;color:var(--ink-2)}

/* copy buttons are always visible on touch screens (no hover there) */
@media (hover:none){.cp{color:var(--ink-2);min-height:30px;padding:0 10px}}

/* date / time pickers (flatpickr) in the app's look */
.flatpickr-input[readonly],input.flatpickr-input + input[readonly]{background:#fff;cursor:pointer}
.flatpickr-calendar{font-family:inherit;border-radius:12px;box-shadow:0 18px 40px rgba(17,24,39,.18)}
.flatpickr-day.selected,.flatpickr-day.selected:hover{background:var(--action);border-color:var(--action)}
.flatpickr-monthSelect-month.selected{background:var(--action) !important;color:#fff !important}

/* the menu button, shown on phones only */
.menu-btn{display:none;width:40px;height:40px;border:1px solid #d7dbe0;border-radius:9px;background:#fff;
  align-items:center;justify-content:center;flex:none;cursor:pointer;color:var(--ink-2)}
.side-backdrop{display:none}
.side .side-acct{display:none}

/* ---------------------------------------------------------------- phone */
@media (max-width:860px){
  body{font-size:14px}
  .shell{display:block}
  .side{position:fixed;inset:0 auto 0 0;width:260px;height:100dvh;z-index:300;transform:translateX(-100%);
    transition:transform .2s ease,visibility .2s;visibility:hidden}
  .side.open{transform:none;visibility:visible;box-shadow:0 0 40px rgba(0,0,0,.3)}
  .side .jumphint{display:none}
  .side a,.side .grp{min-height:42px}
  .side-backdrop.open{display:block;position:fixed;inset:0;background:rgba(17,24,39,.45);z-index:290}
  .menu-btn{display:inline-flex}
  /* One sticky row: menu, mark and search. Admin Panel and Sign Out are in the slide-out menu. */
  .top{height:auto;flex-wrap:nowrap;padding:8px 12px;gap:8px;position:sticky;top:0;z-index:100}
  .top .brand-sub,.top .who,.top .top-acct{display:none}
  .top .brand-txt{display:none}
  .top > div[style*="flex-grow"]{display:none}
  .top #topsearch{flex:1 1 auto;min-width:0}
  .top #topq{width:100% !important;height:40px !important}
  .top #topq::placeholder{font-size:13.5px}
  .side .side-acct{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding:12px 8px 4px;border-top:1px solid var(--line)}
  .side .side-acct .btn{width:100%;justify-content:center;min-height:40px;padding:0 12px;border:1px solid #d7dbe0;background:#fff;color:var(--ink-2);font-weight:800}
  .body{padding:12px;gap:10px}
  h1{font-size:20px;line-height:1.25}
  .lede{font-size:12.5px}
  .head{flex-direction:column;align-items:stretch}
  .head .btn{justify-content:center}
  /* one column for every grid, two for the figure tiles */
  .grid2,.grid3,.form-grid,.form-grid.three,.pfields,.cards,.trends{grid-template-columns:1fr !important}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  [style*="grid-template-columns"]:not(.tiles){grid-template-columns:1fr !important}
  .sc.wide{grid-column:auto !important}
  .col-form{max-width:none}
  input,select,textarea{font-size:16px;max-width:100%}
  .filters > *{flex:1 1 100%}
  .filters input,.filters select,input[style*="width:2"],input[style*="width:3"],select[style*="width:2"],select[style*="width:3"]{width:100% !important}
  .card.pad{padding:12px}
  .tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab,.tabs button{white-space:nowrap;flex:none}
  table{font-size:12.5px}
  tbody td{padding:10px 8px}
  .scroll{-webkit-overflow-scrolling:touch}
  .scroll table td:first-child,.scroll table th:first-child{position:sticky;left:0;background:#fff;z-index:1;box-shadow:1px 0 0 var(--line)}
  .scroll table th:first-child{background:#F5F7FC;z-index:2}
  /* The sticky first cell takes its row's colour, so a striped, total or coloured row is one piece. */
  .scroll table tbody tr:nth-child(even) td:first-child{background:#fbfcfd}
  .scroll table tbody tr.total td:first-child,.scroll table tr.total td:first-child{background:#F5F7FC}
  .scroll table tfoot td:first-child{background:#fbfcfd}
  .scroll table tbody tr.good td:first-child{background:var(--good-tint)}
  .scroll table tbody tr.bad td:first-child{background:var(--danger-tint)}
  .scroll table tbody tr.warn td:first-child{background:var(--warn-tint)}
  .scroll table tr.band.bad td:first-child{background:var(--danger-bg)}
  .scroll table tr.band.warn td:first-child{background:var(--warn-tint)}
  .scroll table tr.band.plain td:first-child{background:#F5F7FC}
  /* An odd last tile takes the whole row instead of leaving half of it empty. */
  .tiles > :last-child:nth-child(odd){grid-column:1/-1}
  .pcard{flex-direction:column-reverse}
  .pside{width:auto !important}
  .months{scroll-snap-type:x mandatory}
}
@media (pointer:coarse){
  .btn.sm{min-height:40px}
  .pphoto .pick{min-height:40px;display:flex;align-items:center;justify-content:center}
  input[type=checkbox],input[type=radio]{width:20px;height:20px}
}
.yr-pick{display:flex;gap:8px;align-items:center}
.nowrap{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Download buttons (Residence Permit, Vehicle Insurance):
   grey until the boxes it needs are filled → navy when it can run →
   green and switched off once downloaded → amber when it failed (try again). */
.btn.dl{background:var(--action);border-color:var(--action);color:#fff}
.btn.dl:hover{background:var(--action-dark);border-color:var(--action-dark);color:#fff}
.btn.dl:disabled,.btn.dl[disabled]{background:#eceef1;border-color:#d7dbe0;color:#8a939e;opacity:1}
.btn.dl.busy,.btn.dl.busy:disabled{background:var(--action);border-color:var(--action);color:#fff;opacity:.75;cursor:progress}
.btn.dl.done,.btn.dl.done:disabled{background:var(--good);border-color:var(--good);color:#fff;opacity:1}
.btn.dl.failed{background:#f59e0b;border-color:#d97706;color:#1f2937}
.btn.dl.failed:hover{background:#d97706;color:#1f2937}
.dl-say{font-size:12px}
.dl-say.failed{color:#92400e;font-weight:700}
.dl-say.done{color:var(--good);font-weight:700}
/* WhatsApp button that carries the number itself (Salary Slips). */
.wa.wa-num{min-width:158px;justify-content:center;height:32px;padding:0 12px;border-radius:8px;font-size:12.5px;font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:.2px}
.wa.wa-off{background:#c9d3cc;color:#fff;cursor:default}
.wa.wa-off:hover{background:#c9d3cc}
tr.good,tr.bad,tr.warn{color:inherit}
tr.good,tr.bad,tr.warn{color:inherit}
/* Driver profile fields: the label on a light grey strip, the value on white. */
.pfields{gap:10px 12px}
.pfields .f{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
.pfields .f .k{background:#EEF2FA;padding:5px 10px;border-bottom:1px solid var(--line)}
.pfields .f .v{background:#fff;padding:7px 10px;min-height:34px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pfields .f .v .cp{margin-inline-start:auto}
.pfields{gap:8px 10px}
.pfields .f .k{padding:3px 9px;font-size:10.5px}
.pfields .f .v{padding:4px 9px;min-height:30px}
.pfields .f .v .cp{min-height:19px;padding:0 5px}
.pcard .pfields{flex:0 0 auto}
/* Driver profile fields, final: no box, no grey — white, with a thin line between label and value. */
.pfields .f{border:0;border-radius:0;background:transparent;overflow:visible}
.pfields .f .k{background:transparent;padding:2px 2px 3px;border-bottom:1px solid #e3e7ec}
.pfields .f .v{background:transparent;padding:5px 2px 2px}
.pfields .f .k{color:#8a939e;font-weight:500}
.pfields .f .v,.pfields .f .v a{color:#1e3a8a}
.tabs button.on{color:#2563eb;border-bottom-color:#2563eb}
.tabs button:hover{color:#2563eb}
/* IBAN helpers on the driver form: Camera blue (as Working Hours), Barcode near-black. */
.btn.ibtn-cam{background:#2563eb;border-color:#2563eb;color:#fff}
.btn.ibtn-cam:hover{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
.btn.ibtn-code{background:#111827;border-color:#111827;color:#fff}
.btn.ibtn-code:hover{background:#000;border-color:#000;color:#fff}
/* "Check Email Now" everywhere: Google's look — white, Gmail mark, the four Google colours. */
.btn.gmail{background:#fff;border:1px solid #dadce0;color:#3c4043;font-weight:700;border-radius:20px;padding:0 16px;
  box-shadow:0 1px 2px rgba(60,64,67,.15);position:relative;overflow:hidden}
.btn.gmail:hover{background:#f8faff;border-color:#c6dafc;color:#202124;box-shadow:0 1px 3px rgba(60,64,67,.3)}
.btn.gmail::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,#4285F4 0 25%,#EA4335 25% 50%,#FBBC04 50% 75%,#34A853 75%)}

/* New Driver: Read ID Card dark red, Offer Letter bright yellow, Application Form dark green. */
.btn.btn-card{background:#991b1b;border-color:#991b1b;color:#fff}
.btn.btn-card:hover{background:#7f1d1d;border-color:#7f1d1d;color:#fff}
.btn.btn-offer{background:#facc15;border-color:#eab308;color:#111827}
.btn.btn-offer:hover{background:#eab308;border-color:#ca8a04;color:#111827}
.btn.btn-appl{background:#166534;border-color:#166534;color:#fff}
.btn.btn-appl:hover{background:#14532d;border-color:#14532d;color:#fff}
/* "Choose File" buttons: dark text always; bright yellow only while the pointer is on them. */
input[type=file]::file-selector-button{color:#111827;font-weight:800}
input[type=file]::file-selector-button:hover,input[type=file]:hover::file-selector-button{background:#facc15;border-color:#eab308;color:#111827}
/* "Choose File" buttons: dark text always; bright yellow only while the pointer is on them. */
input[type=file]::file-selector-button{color:#111827;font-weight:800}
input[type=file]::file-selector-button:hover,input[type=file]:hover::file-selector-button{background:#facc15;border-color:#eab308;color:#111827}
/* Driver form section titles (Passport and Visa, Vehicle, …) in dark ink. */
.fsec{color:#111827 !important}
/* Talabat ID in dark red everywhere it is coloured (CPR stays blue). */
.n-tid,.suggest .s-meta .n-tid{color:#334155}
/* Bike / car icons: very dark, everywhere. */
.vicon{color:#0b0f19 !important}
/* A section's total sits at the foot of its card, larger and darker than the lines above it. */
.rfoot{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:14px;padding-top:10px;
  border-top:2px solid #0f172a;font-size:16px;font-weight:800;color:#020617}
.rfoot b{font-size:17px;font-weight:900;color:#020617;font-variant-numeric:tabular-nums}


/* ===== Light theme: the side rail ===================================
   White rail, dark-slate text, the open page on a pale-blue pill —
   the order of the menu is untouched, only its colours. */
.side{background:#FFFFFF;border-right:1px solid var(--line)}
.side a{color:var(--ink-2);font-weight:600}
.side a:hover{background:#F2F5FC;color:var(--ink)}
.side a.on{background:var(--accent-soft);color:var(--navy);font-weight:800}
.side .grp{color:var(--ink-3)}
.side .grp:hover{background:#F2F5FC;color:var(--ink)}
.side .sect.open .grp,.side .sect.here .grp{color:var(--ink)}
.side .sect.open .grp-body{border-left-color:var(--line)}
.side .jumphint{color:var(--ink-3)}
.side .jumphint kbd{background:#F2F5FC;border:1px solid var(--line);color:var(--ink-2)}
.side svg{color:currentColor}

/* Cards float on the ground with a soft blue shadow instead of a grey edge. */
.card{border-color:transparent;box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(33,64,217,.06)}
.tile{border-color:transparent;box-shadow:0 1px 2px rgba(15,23,42,.04),0 6px 18px rgba(33,64,217,.05)}
.top{background:#FFFFFF;border-bottom-color:var(--line)}
.btn.primary:hover{background:var(--navy);border-color:var(--navy);color:#fff}
thead th{color:var(--ink-3)}
.form-grid[hidden],#rent_box[hidden]{display:none !important}

/* ===== Rail extras: counts, favorites, narrow mode, Ctrl+K lines ===== */
.side .ln{display:flex;align-items:center;gap:4px;position:relative}
.side .ln a{flex:1;min-width:0}
.side .nb{min-width:20px;height:20px;padding:0 6px;border-radius:10px;font-size:11px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;flex:none;font-family:var(--num)}
.side .nb-blue{background:#E3ECFF;color:#1238B5}
.side .nb-red{background:#FDE2E1;color:#A3241D}
.side .nb-amber{background:#FDECD3;color:#8A4B05}
.side .nb-sum{background:#EEF2FA;color:var(--ink-2);margin-left:auto}
.side .sect.open .nb-sum{display:none}
.side .star{border:0;background:transparent;cursor:pointer;color:var(--ink-4);font-size:14px;width:24px;height:24px;
  border-radius:6px;flex:none;opacity:0;padding:0;line-height:1}
.side .ln:hover .star,.side .star.on,.side .star:focus-visible{opacity:1}
.side .star.on{color:#D97706}
.side .star:hover{background:#F2F5FC;color:#D97706}
.side .fav .grp-static{display:flex;align-items:center;gap:9px;padding:8px 10px;margin-top:5px;font-size:11.5px;
  font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--ink)}
.side .fav .grp-body{max-height:none;opacity:1;border-left:1px solid var(--line);margin-left:16px}
.side .fav .grp-body a{padding-left:11px}
.side .mini-btn{align-self:flex-end;border:1px solid var(--line);background:#fff;color:var(--ink-2);width:26px;height:26px;
  border-radius:8px;cursor:pointer;font-size:16px;line-height:1;margin-bottom:4px}
.side .mini-btn:hover{background:#F2F5FC;color:var(--ink)}
.jump .hit .hn{display:flex;flex-direction:column;gap:1px}
.jump .hit .hd{font-size:11.5px;color:var(--ink-3);font-weight:600}
@media (min-width:861px){
  body.rail-mini .side{width:62px;padding:12px 8px}
  body.rail-mini .side .lbl,body.rail-mini .side .chev,body.rail-mini .side .grp-body,
  body.rail-mini .side .jumphint,body.rail-mini .side .nb-sum,body.rail-mini .side .fav{display:none !important}
  body.rail-mini .side .pin,body.rail-mini .side .grp{justify-content:center;padding:10px 0}
  body.rail-mini .side .mini-btn{align-self:center}
}
@media (max-width:860px){.side .star{opacity:.6}.side .mini-btn{display:none}}

.wa-n{font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:.2px;white-space:nowrap;direction:ltr;unicode-bidi:isolate}
.wa-ico{flex:none;vertical-align:-3px;margin-right:6px;background:transparent}
button:has(.wa-ico),a:has(.wa-ico){display:inline-flex;align-items:center}
/* Main rail headings in near-black; a link or heading grows a little under the mouse. */
.side .grp,.side .pin:not(.on),.side .sect.open .grp,.side .sect.here .grp,.side .grp:hover{color:#0A0A0F}
.side .grp .lbl,.side .pin .lbl{display:inline-block;transform-origin:left center;transition:transform .15s ease}
.side .grp:hover .lbl,.side .pin:hover .lbl{transform:scale(1.1)}
.side .grp-body a{transition:font-size .15s ease,background .15s ease}
.side .grp-body a:hover{font-size:14px;font-weight:700}
@media (prefers-reduced-motion:reduce){.side .grp .lbl,.side .pin .lbl,.side .grp-body a{transition:none}}
body.rail-mini .side .grp:hover .lbl,body.rail-mini .side .pin:hover .lbl{transform:none}
/* ===== The rail as tiles: each section its own colour, icon on a tinted square ===== */
.side [data-k="home"]{--sc:#F2541B;--sc2:#FFA10A;--st:#FFE9DD}
.side [data-k="insights"]{--sc:#4F14C9;--st:#EEE5FF}
.side [data-k="fav"]{--sc:#E0174F;--st:#FFE3EA}
.side [data-k="drivers"]{--sc:#1557F0;--st:#E3ECFF}
.side [data-k="ops"]{--sc:#0B7A4B;--st:#DCF7E9}
.side [data-k="talabat"]{--sc:#E8590C;--st:#FFE8D9}
.side .ico.ico-tal{background:transparent !important;box-shadow:none !important}
.side .ico.ico-tal img{width:34px;height:auto;display:block}
.side [data-k="reports"]{--sc:#0A0A0F;--st:#E6E7EB}
.side [data-k="expiry"]{--sc:#E10600;--st:#FFE1DE}
.side [data-k="payroll"]{--sc:#1557F0;--st:#E3ECFF}
.side [data-k="accounts"]{--sc:#0F766E;--st:#D8F4EF}
.side [data-k="management"]{--sc:#1238B5;--st:#E1E9FF}
.side [data-k="paper"]{--sc:#B7791F;--st:#FFF4C2}
.side [data-k="access"]{--sc:#2E3A55;--st:#E3E6EE}
.side [data-k="finance"]{--sc:#0369A1;--st:#DFF1FC}
.side{width:240px;padding:14px 10px}
.side .pin[data-k],.side .sect[data-k] .grp{position:relative;display:flex;align-items:center;gap:12px;width:100%;
  margin-top:6px;padding:6px 8px;border-radius:14px;font-size:14px;font-weight:800;letter-spacing:.3px;
  color:var(--sc);background:transparent}
.side .pin[data-k]{font-size:15px;letter-spacing:0;margin-top:2px}
.side .pin[data-k]:hover,.side .sect[data-k] .grp:hover{background:color-mix(in srgb,var(--st) 45%,#fff);color:var(--sc)}
.side .pin[data-k].on,.side .sect[data-k] .grp,.side .sect[data-k].open .grp,.side .sect[data-k].here .grp{color:var(--sc)}
.side .ico{width:34px;height:34px;border-radius:10px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  background:var(--st);color:var(--sc)}
.side .ico svg{width:19px;height:19px}
.side .chev{flex:none;margin-left:auto;color:#5B6478;opacity:.9;transition:transform .16s ease}
.side .sect.open .grp .chev{transform:rotate(90deg)}
.side .nb-sum{background:var(--st) !important;color:var(--sc) !important;min-width:26px;padding:0 7px;height:24px;border-radius:12px;font-size:12.5px;margin-left:auto}
.side .sect[data-k] .grp{gap:10px}
/* Long section names wrap onto a second line instead of being cut; the word itself must always show. */
.side .sect[data-k] .grp,.side .pin[data-k]{gap:8px;letter-spacing:0;text-align:left}
.side .grp .lbl{min-width:0;white-space:normal;line-height:1.15;overflow-wrap:normal;word-break:normal}
.side .sect[data-k] .nb-sum{min-width:22px;padding:0 6px;flex:none}
.side .nb-sum + .chev{margin-left:4px}
/* The page you are on: a warm wash, a bar on the left, the tile filled. */
.side .pin[data-k].on{background:linear-gradient(90deg,var(--st),color-mix(in srgb,var(--st) 55%,#fff));font-weight:800}
.side .pin[data-k].on::before{content:"";position:absolute;left:-6px;top:8px;bottom:8px;width:4px;border-radius:3px;background:var(--sc)}
.side .pin[data-k].on .ico{background:linear-gradient(135deg,var(--sc2,var(--sc)),var(--sc));color:#fff;box-shadow:0 4px 10px color-mix(in srgb,var(--sc) 30%,transparent)}
.side .sect[data-k].open .grp-body{border-left-color:color-mix(in srgb,var(--sc) 35%,#fff);margin-left:24px}
.side .sect[data-k].here:not(.open) .grp::after{background:var(--sc)}
.side .fav .grp-static{gap:12px;padding:6px 8px;font-size:14px;letter-spacing:.3px;color:var(--sc)}
@media (min-width:861px){body.rail-mini .side{width:66px}
  body.rail-mini .side .pin[data-k],body.rail-mini .side .sect[data-k] .grp{justify-content:center;padding:6px 0}}
.side .fav .grp .chev{transform:none}
/* Pages inside a section speak in its colour; the open page sits on its tint. */
.side .sect[data-k] .grp-body a{color:var(--sc)}
.side .sect[data-k] .grp-body a:hover{background:color-mix(in srgb,var(--st) 45%,#fff);color:var(--sc)}
.side .sect[data-k] .grp-body a.on{background:var(--st);color:var(--sc);font-weight:800}
.side .sect[data-k] .grp-body .ln:has(> a.on){background:var(--st);border-radius:8px}
.side .sect[data-k] .grp-body .ln:has(> a.on) > a.on{background:transparent}

/* Passport custody pill beside the Passport No on the profile */
.pp-pill{font-size:11.5px;font-weight:800;padding:3px 10px;border-radius:999px;margin-left:8px;white-space:nowrap;text-decoration:none;font-family:inherit}
.pp-pill.pp-in{background:#DDF4EA;color:#0B5E43}.pp-pill.pp-out{background:#FDE2E1;color:#A3241D}
.pp-pill:hover{filter:brightness(.96);text-decoration:none}
.pfields .f .k{font-size:11.5px;color:#6b7480}
.pp-slotno{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 6px;border-radius:999px;
  background:#0B5E43;color:#fff;font-size:12px;font-weight:800;font-family:var(--num);margin-left:4px;box-sizing:border-box}

.pfields .f .v.fitv{flex-wrap:nowrap;min-width:0}
.pfields .f .v.fitv .fit{white-space:nowrap;overflow:hidden;text-overflow:clip;min-width:0}
.pfields .f.f-wide{grid-column:1/-1}
.pside .row b.dt{display:grid;grid-template-columns:auto 46px;justify-items:end;align-items:center;column-gap:5px;text-align:right}
.pside .row b.dt>.pill{justify-self:end;text-align:right}
.pside .row:has(b.dt)>span{white-space:nowrap}
.pside .row b.dt>.pill{padding-left:3px;padding-right:3px;font-size:10px}
.pfields .f .v .xp{font-size:inherit;font-weight:inherit;color:inherit;display:flex;align-items:center;gap:5px;white-space:nowrap}
.pfields .f .v .xp .xk{color:#9aa3ad}
.pfields .f .v .xp .pill{font-size:10px;padding:0 5px}
.pfields .f .v>.xp:first-child{flex-basis:auto;order:0;font-size:inherit;font-weight:inherit;color:inherit}
.pfields .f .v .xp{order:1}
.pfields .f .v .pp-pill,.pfields .f .v .pp-slotno{order:2}
.pfields .f .v .cp{order:5}
.pfields .f .v>.small{order:6;flex-basis:100%}
.pfields .f .v .xp .xd{font-weight:inherit}
.pfields .f .v.fitv .fit{font-weight:400}
/* WhatsApp buttons: one green across the whole app. */
:root{--wa:#1fa855;--wa-d:#178a45}
button:has(.wa-ico),a:has(.wa-ico),.btn.wa-btn,.wa.wa-num{background:var(--wa) !important;border-color:var(--wa) !important;color:#fff !important}
button:has(.wa-ico):hover,a:has(.wa-ico):hover,.btn.wa-btn:hover,.wa.wa-num:hover{background:var(--wa-d) !important;border-color:var(--wa-d) !important}
button:has(.wa-ico) *,a:has(.wa-ico) *,.btn.wa-btn *{color:#fff !important}
/* Profile: the status beside the name — Active in the WhatsApp green, On Vacation yellow, Terminated black. */
.dd-name .pill.ok{background:var(--wa);color:#fff;border-color:var(--wa)}
.dd-name .pill.blue{background:#FFD400;color:#0a0a0f;border-color:#FFD400}
.dd-name .pill.grey{background:#0a0a0f;color:#fff;border-color:#0a0a0f}
.pfields .f .v .pill:not(.bad),.pfields .f .v .pp-pill{background:#dbeafe !important;color:#1e3a8a !important;border-color:#dbeafe !important}
.btn.letters-btn{background:#FFD400;border-color:#FFD400;color:#0a0a0f}
.btn.letters-btn:hover{background:#f2c900;border-color:#f2c900}
.lmra-txt{text-align:center;font-weight:400;color:#0a0a0f;font-size:13px;margin:6px 0 2px;letter-spacing:.2px}
.ws-b{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border-radius:12px;font-weight:800;font-size:12.5px;color:#fff;background:#0a0a0f}
.ws-b1,.ws-b2{background:#15803d}.ws-b3{background:#1e3a8a}.ws-b4{background:#facc15;color:#0a0a0f}

/* Vacations — next 12 months */
.vp{margin-bottom:14px}
.vp-hd{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.vp-tot{font-size:13px;color:#5b6680;font-weight:700}.vp-tot b{color:#0f1d45}
.vp-lg{display:flex;gap:14px;margin-left:auto;font-size:12.5px;font-weight:700;color:#5b6680;flex-wrap:wrap}
.vp-lg i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.vp-lg i.o{background:#111827}.vp-lg i.r{background:#16a34a}.vp-lg i.d{background:#eef2fb;border:1px solid #cfd6e6}
.vp-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px}
.vp-mo{all:unset;box-sizing:border-box;border:1px solid #e3e8f4;border-radius:12px;padding:10px 6px 8px;text-align:center;cursor:pointer;background:#fff}
.vp-mo:hover{border-color:#9fb1e0}.vp-mo.cur{background:#f3f6fe;border-color:#1e3a8a}
.vp-mo.on{box-shadow:inset 0 0 0 2px #1e3a8a}
.vp-ml{font-weight:900;font-size:14.5px;color:#0f1d45}.vp-ml span{color:#8a94ab;font-weight:700;font-size:11.5px;margin-left:3px}
.vp-bars{height:58px;display:flex;align-items:flex-end;justify-content:center;gap:6px;margin:8px 0 6px;border-bottom:1px solid #e3e8f4}
.vp-bar{width:16px;border-radius:5px 5px 0 0}.vp-bar.o{background:#111827}.vp-bar.r{background:#16a34a}
.vp-nums{display:flex;justify-content:space-around}
.vp-nums b{display:block;font-size:19px;font-weight:900;line-height:1.1}.vp-nums .o b{color:#111827}.vp-nums .r b{color:#15803d}
.vp-nums small{font-size:10px;font-weight:800;color:#8a94ab;text-transform:uppercase;letter-spacing:.03em}
.vp-due{margin-top:7px;font-size:11.5px;font-weight:700;color:#5b6680;background:#eef2fb;border-radius:6px;padding:2px 0}
.vp-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vp-h{font-weight:900;font-size:13px;margin-bottom:6px;color:#5b6680}.vp-h.o{color:#111827}.vp-h.r{color:#15803d}
.vp-it{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px solid #eef1f7;font-size:13.5px}
.vp-it span{color:#8a94ab;white-space:nowrap}
@media (max-width:900px){.vp-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.vp-cols{grid-template-columns:1fr}.vp-lg{margin-left:0}}
@media (max-width:520px){.vp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Driver profile: three groups, read top to bottom, each in a light grey frame */
.pfields.pcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pcol{border:1px solid #dfe3ea;border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:8px;background:#fbfcfe}
@media (max-width:900px){.pfields.pcols{grid-template-columns:1fr}}
.vc-dot{display:inline-block;width:15px;height:15px;border-radius:50%;border:1.5px solid #cfd4dc;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);flex:none}
.cal-ic{display:inline-block;vertical-align:-2px;margin-left:2px}
/* Days left as a little calendar page: coloured band on top, two rings, the number in black on white */
.dcal{--c:#3cae3a;position:relative;display:inline-block;min-width:28px;margin:5px 0 0 5px;border-radius:5px;background:#fff;border:1px solid #d9dde3;box-shadow:0 1px 2px rgba(15,23,42,.18);text-align:center;vertical-align:middle;line-height:1;overflow:visible}
.dcal::before{content:"";display:block;height:7px;margin:-1px -1px 0;background:var(--c);border-radius:5px 5px 0 0}
.dcal b{display:block;padding:2px 5px 3px;color:#111;font-size:12.5px;font-weight:900;letter-spacing:-.2px}
.dcal::after{content:"";position:absolute;left:0;right:0;top:-4px;height:7px;background:linear-gradient(#4b5563,#4b5563) left 6px top/3px 100% no-repeat,linear-gradient(#4b5563,#4b5563) right 6px top/3px 100% no-repeat}
.dcal.bad b{font-size:9.5px;padding:3px 4px}
.dcal.warn{--c:#e8a200}.dcal.bad{--c:#E10600}
.lmra-tick{display:inline-block;white-space:nowrap;margin-left:4px;padding:0 6px;border-radius:999px;background:#dcfce7;color:#15803d;font-size:10px;font-weight:900;letter-spacing:.2px}
.pfields .f .v .pp-pill.pp-out{background:#fde2e1 !important;color:#a3241d !important;border-color:#fde2e1 !important}

/* Terminate (On Vacation → Terminated) on the profile */
.btn.term-btn{background:#fff;color:#b91c1c;border:1.5px solid #b91c1c}
.btn.term-go,.btn.term-do{background:#b91c1c;color:#fff;border:0}
.term-dlg{border:0;border-radius:14px;width:min(560px,92vw);padding:22px 24px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.term-dlg::backdrop{background:rgba(15,23,42,.45)}
.term-dlg h3{margin:0 0 4px}
.term-dlg label{display:block;font-size:12px;font-weight:700;margin:14px 0 5px}
.term-dlg select,.term-dlg input{width:100%;box-sizing:border-box}
.term-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.term-sum{background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:10px 14px;margin-top:14px;font-size:13.5px;line-height:1.7}
.term-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}

/* Talabat Cash: the wallet now */
.wn{color:#1d4ed8}.wn-th{background:#dbeafe;color:#1d4ed8}.wn-td{background:#eff6ff}
.wn-at{display:block;font-size:10.5px;color:#64748b;font-weight:400}
.wn-tile{border:2px solid #2563eb;background:#eff6ff}
.wn-line{font-size:11px;font-weight:700;color:#1d4ed8;margin-top:2px}
.kpi .ks.wn-line{color:#1d4ed8;font-weight:700}

/* Shifts tab (profile) and the team by time of day (Weekly Shifts) */
.sh-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:stretch}
.sh-big{font-size:22px;font-weight:900;margin:2px 0}
.sh-peak{background:#fff7ed;border:2px solid #f97316;border-radius:12px;padding:10px 12px}
.sh-pl{font-size:11px;font-weight:800;color:#c2410c}.sh-pv{font-size:22px;font-weight:900;color:#c2410c}.sh-pv span{font-size:13px}
.sh-hrs{display:flex;align-items:flex-end;gap:3px;height:80px;margin-top:14px}
.sh-h{flex:1;border-radius:3px 3px 0 0;background:#cbd5e1}
.sh-hl{display:flex;justify-content:space-between;font-size:10.5px;color:#64748b;margin-top:3px}
.sh-bands{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}.sh-b{flex:1;text-align:center;font-size:11px;font-weight:800;border-radius:6px;padding:4px;min-width:110px}
.sh-morning{background:#fef3c7;color:#92400e}.sh-peak1,.sh-peak2{background:#f97316;color:#fff}
.sh-afternoon{background:#e0f2fe;color:#075985}.sh-night{background:#1e293b;color:#fff}
.sh-key{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:11px;font-weight:700;color:#334155}.sh-key span{display:inline-flex;align-items:center;gap:5px}.sh-key .muted{font-weight:500}.sh-key i{width:11px;height:11px;border-radius:3px;display:inline-block}.sh-k-normal{background:#cbd5e1}.sh-k-peak{background:#f97316}.sh-k-night{background:#1e293b}
.sh-h.sh-morning,.sh-h.sh-afternoon{background:#cbd5e1}.sh-h.sh-peak1,.sh-h.sh-peak2{background:#f97316}.sh-h.sh-night{background:#1e293b}
.sh-tiles{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.sh-t{border:1px solid #e2e8f0;border-radius:10px;padding:9px 11px}.sh-t .l{font-size:11px;font-weight:800;color:#64748b;text-transform:uppercase}.sh-t .v{font-size:19px;font-weight:900;margin-top:3px}
.sh-note input{width:220px;max-width:100%;font-size:12px}
.sh-team{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:start}
.sh-tb{border-radius:12px;padding:12px}.sh-tb summary{list-style:none;cursor:pointer}.sh-tb summary::-webkit-details-marker{display:none}
.sh-tb .l{font-weight:800;font-size:13px}.sh-tb .v{font-size:26px;font-weight:900}.sh-tb .s{font-size:11.5px;opacity:.85}
.sh-names{margin-top:8px;max-height:260px;overflow:auto;font-size:12px;background:rgba(255,255,255,.85);color:#0f172a;border-radius:8px;padding:6px 8px}
.sh-names div{display:flex;justify-content:space-between;gap:8px;padding:2px 0}.sh-names a{color:#1e3a8a}
@media (max-width:900px){.sh-head,.sh-team{grid-template-columns:minmax(0,1fr)}.sh-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Talabat Requests: the button that opens Talabat's Fleet MGT sheet */
.btn.fleet-btn{background:#ADEBB3;border-color:#ADEBB3;color:#0a0a0f}
.btn.fleet-btn:hover{background:#97e09f;border-color:#97e09f;color:#0a0a0f}

/* Phone: an empty table's message stays on screen instead of running off with the table (18 Oct 2026). */
@media (max-width:700px){
  td.empty, tbody td[colspan].muted, tbody td[colspan].empty{white-space:normal;text-align:center;position:sticky;left:0}
  /* A table with nothing in it: no header row running off the card, and the message fits the screen. */
  table:has(> tbody > tr:only-child > td[colspan]:only-child) > thead{display:none}
  table:has(> tbody > tr:only-child > td[colspan]:only-child){min-width:0 !important}
  .note{flex-wrap:wrap}
  .note .btn{flex:1 1 100%}
}

/* Phone: a table marked .stack-m becomes one card per row, every cell labelled by its column —
   so the action buttons and the key figures are never off to the right (18 Oct 2026). */
@media (max-width:700px){
  table.stack-m{min-width:0!important;width:100%}
  table.stack-m thead{display:none}
  table.stack-m tbody tr{display:block;border:1px solid var(--line);border-radius:12px;margin:0 0 10px;padding:8px 12px;background:#fff}
  table.stack-m tbody tr[hidden]{display:none!important}
  /* A card keeps its row's colour: expired red, due soon amber, done green. */
  table.stack-m tbody tr.bad{background:var(--danger-tint);border-color:var(--danger-line)}
  table.stack-m tbody tr.warn{background:var(--warn-tint);border-color:var(--warn-line)}
  table.stack-m tbody tr.good{background:var(--good-tint);border-color:var(--good-line)}
  /* The label on the left; everything else in the cell packed together on the right. */
  table.stack-m tbody td,table.stack-m tfoot td{display:flex;justify-content:flex-end;flex-wrap:wrap;align-items:center;gap:4px 12px;border:0!important;padding:5px 0!important;
    text-align:right;white-space:normal;position:static!important;box-shadow:none!important;background:transparent!important}
  table.stack-m tbody td::before,table.stack-m tfoot td::before{content:attr(data-l);flex:none;max-width:45%;margin-right:auto;text-align:left;font-size:11px;font-weight:800;
    color:var(--ink-3);text-transform:uppercase;letter-spacing:.02em}
  table.stack-m tbody td[data-l=""]::before,table.stack-m tbody td:not([data-l])::before,
  table.stack-m tfoot td[data-l=""]::before,table.stack-m tfoot td:not([data-l])::before{content:none}
  table.stack-m tbody td:first-child,table.stack-m tfoot td:first-child{font-weight:800;font-size:15px;border-bottom:1px solid var(--line)!important;padding-bottom:7px!important;margin-bottom:3px}
  /* A cell across the columns is a message or a heading, not a card title. */
  table.stack-m tbody td[colspan]{display:block;text-align:left;font-weight:400;font-size:13px;border-bottom:0!important;margin:0}
  table.stack-m tbody td[colspan].empty,table.stack-m tbody td[colspan].muted,table.stack-m tbody tr:only-child > td[colspan]:only-child{
    padding:14px 0!important;text-align:center;color:var(--ink-3)}
  /* A list with nothing in it shows the message plainly in its card, not as a card inside a card. */
  table.stack-m tbody tr:only-child:has(> td[colspan]:only-child){border:0;margin:0;padding:0 12px;background:transparent;border-radius:0}
  table.stack-m tbody tr.band{background:transparent;border:0;padding:2px 2px;margin:12px 0 6px}
  table.stack-m tbody tr.band td{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:4px 0!important;color:var(--ink-3)}
  table.stack-m tbody tr.band.bad td{color:#8f1d1d}
  table.stack-m tbody tr.band.warn td{color:#7c4a09}
  table.stack-m tbody td.m-blank,table.stack-m tfoot td.m-blank{display:none}
  table.stack-m tbody td form,table.stack-m tbody td .btn{margin-left:auto}
  table.stack-m td.m-stack{display:block;text-align:left}
  table.stack-m td.m-stack::before{display:block;max-width:none;margin-bottom:2px}
  /* The totals row is one more card, each total under its column's name. */
  table.stack-m tfoot{display:block}
  table.stack-m tfoot tr{display:block;border:1px solid var(--line);border-radius:12px;margin:0 0 10px;padding:8px 12px;background:#F5F7FC}
  table.stack-m tfoot td{font-weight:900;font-size:13px}
  table.stack-m tfoot td:first-child{justify-content:flex-start;text-align:left}
  .scroll:has(> table.stack-m){overflow:visible}
  /* A tall card does not cap a card list: the rows would spill over what comes after. */
  .card.tall:has(table.stack-m){max-height:none}
  /* The driver card's Edit is a full-width button, not a small word. */
  .dl-table td:last-child:not([colspan]) a{display:block;width:100%;text-align:center;padding:10px;border:1px solid var(--line);border-radius:9px;font-size:13px;font-weight:700;color:var(--action)}
}
/* Full-width buttons on a phone read centred. */
@media (max-width:700px){ .btn{justify-content:center;text-align:center} }
/* The side rail reads one way: Dashboard and Insights in capitals like the sections under them. */
.side .pin[data-k] .lbl{text-transform:uppercase;font-size:14px;letter-spacing:.3px}

/* Map button: opens an address (or an area) on the map in a new tab (19 Oct 2026). */
.mapbtn{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 9px;border:1px solid #c7d7fe;border-radius:8px;background:#eef4ff;
  color:#1d4ed8;font-size:12px;font-weight:800;text-decoration:none;white-space:nowrap;flex:none;box-sizing:border-box}
.mapbtn:hover{background:#dfe9ff;text-decoration:none}
.mapbtn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;flex:none}
.pfields .f .v .mapbtn{order:6;height:24px;padding:0 8px;font-size:11.5px}
@media (hover:none){.pfields .f .v .mapbtn{height:30px;padding:0 10px}}

/* Fines by Driver: an arrow opens his fines under his line, pressed again it closes them */
.fbd-tg{border:0;background:#eef2f7;color:#1e3a8a;width:26px;height:26px;border-radius:7px;cursor:pointer;display:inline-grid;place-items:center;padding:0}
.fbd-tg:hover{background:#dbe4f3}.fbd-tg svg{transition:transform .15s}.fbd-tg[aria-expanded="true"] svg{transform:rotate(90deg)}
.fbd-more>td{background:#f8fafc;padding-top:4px;padding-bottom:12px}
.fbd-in{width:100%;border:1px solid #e2e8f0;border-radius:8px;background:#fff}.fbd-in th{font-size:10.5px}.fbd-in td,.fbd-in th{padding:7px 10px}
.fl-head{display:flex;align-items:center;gap:10px;padding:12px 14px}
.lh-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.lh-sum>div{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:12px 14px}
.lh-sum span{display:block;font-size:11px;font-weight:800;color:#64748b;text-transform:uppercase}.lh-sum b{display:block;font-size:22px;font-weight:900;margin:3px 0}.lh-sum small{color:#64748b}
@media (max-width:700px){.lh-sum{grid-template-columns:1fr}}
.bars .lastday{line-height:1;margin-bottom:4px}.bars .lastday .dcal{margin:4px 0 0}.dcal.ld{--c:#0b2a6f}