:root{
  --bg:#0b1220; --panel:#fff; --ink:#2b2f36; --muted:#7a766f; --line:#e6e3df;
  --accent:#e2603f; --accent-d:#c24a2c; --gold:#e2603f; --danger:#e0524d; --ok:#16a34a;
  --radius:16px; --shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.06);
  font-family:'Cairo',system-ui,"Segoe UI",Tahoma,"Noto Naskh Arabic",sans-serif;
}
*{box-sizing:border-box}
input,select,button,textarea{font-family:inherit}
body{margin:0;background:#f5f7fa;color:var(--ink);line-height:1.5}
h1,h2,h3{margin:0 0 .4rem;letter-spacing:-.01em}
a{color:var(--accent-d);text-decoration:none}
.wrap{max-width:1040px;margin:0 auto;padding:1rem}
.muted{color:var(--muted)} .center{text-align:center} .num{text-align:end}
.row{display:flex;flex-wrap:wrap} .gap{gap:.6rem} .wrap{flex-wrap:wrap}
.between{justify-content:space-between} .center-v{align-items:center} .end{align-items:flex-end}
.mt{margin-top:.8rem} .block{width:100%} .hide-sm{} .small{font-size:.8rem}
@media(max-width:680px){.hide-sm{display:none}}
.ico{display:inline-block;vertical-align:middle;flex:none}

/* topbar */
.topbar{background:rgba(255,255,255,.85);backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.topbar .wrap{padding:.6rem 1rem}
.brand{color:var(--ink);font-weight:800;font-size:1.1rem;display:flex;align-items:center;gap:.5rem}
.brand-dot{width:18px;height:18px;border-radius:6px;background:linear-gradient(135deg,var(--accent),#0ea5a3);
  box-shadow:0 2px 8px rgba(20,184,182,.5)}
.greet{color:var(--muted);font-size:.95rem}.greet b{color:var(--ink)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;
  color:var(--ink);background:#f1f4f8;border:1px solid var(--line);transition:.15s}
.icon-btn:hover{background:#e7ecf3}
.icon-btn.danger{color:var(--danger)}.icon-btn.danger:hover{background:#fdecec}
.back{display:inline-flex;align-items:center;gap:.3rem;margin:.6rem 0 .2rem;color:var(--accent-d);font-weight:600}

/* hero + tiles */
.hero{padding:.8rem 0 .2rem}
.hero h1{font-size:1.7rem;display:flex;align-items:center;gap:.5rem}
.hero.sm h1{font-size:1.4rem}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin:1.2rem 0}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:1.4rem;display:block;color:var(--ink);transition:.18s}
.tile:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(15,23,42,.12);border-color:#dfe6ee}
.tile-ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  margin-bottom:.7rem;color:#fff;background:linear-gradient(135deg,var(--accent),#0ea5a3)}
.tile-ico.ti-pt{background:linear-gradient(135deg,#f97362,#ef4444)}
.tile-ico.ti-topo{background:linear-gradient(135deg,#34d399,#0d9488)}
.tile-ico.ti-cars{background:linear-gradient(135deg,#60a5fa,#4f46e5)}
.tile-ico.ti-set{background:linear-gradient(135deg,#94a3b8,#475569)}
.tile h3{font-size:1.18rem}
.tile-go{display:inline-block;margin-top:.7rem;color:var(--accent-d);font-weight:700}
.empty-wide{grid-column:1/-1;padding:2rem;text-align:center;background:#fff;border:1px dashed var(--line);border-radius:var(--radius)}

/* settings hub */
.set-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin:1rem 0}
.set-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.3rem}
.set-card.wide{grid-column:1/-1}
.set-ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:#eef9f9;color:var(--accent-d);margin-bottom:.6rem}
.set-card h3{font-size:1.1rem}
.u-name{font-weight:700}

/* cards / grid */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.3rem;margin:1rem 0}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}
@media(max-width:760px){.grid{grid-template-columns:1fr}}

/* auth */
.auth-bg{display:flex;min-height:100vh;align-items:center;justify-content:center;background:linear-gradient(160deg,#0b1220,#c24a2c)}
.card.narrow{max-width:400px;width:92%;margin:1rem}
.card.narrow .brand{font-size:1.5rem;justify-content:center;color:var(--ink)}

/* forms */
label{display:block;font-weight:600;margin:.6rem 0 .25rem;font-size:.92rem}
/* width:100% is for a TEXT-LIKE control only.
   This rule used to say plain `input`, which caught checkboxes and radios too:
   a checkbox got a text field's width, padding, border and background, so it
   rendered as a big empty rounded box that expanded to its label's width and
   pushed the colour swatch and the calendar's name out of the box beside it.
   That is what the Calendars row on rotation/schedule.php was showing.
   Excluded by type rather than by adding a class to every checkbox in the
   project — there is no markup to change this way, and a checkbox added later
   is correct without anyone remembering a class. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]),
select{width:100%;padding:.7rem .8rem;border:1px solid var(--line);border-radius:11px;font-size:1rem;background:#fbfcfe}
/* flex:none so a tick sitting inside a .row or an inline-flex label keeps its
   own size instead of being stretched by the container. */
input[type=checkbox],input[type=radio]{width:auto;flex:none;margin:0}
input:focus,select:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.field{margin-bottom:.6rem}
.seg{display:flex;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.seg-opt{flex:1;margin:0}.seg-opt input{position:absolute;opacity:0}
.seg-opt span{display:block;text-align:center;padding:.7rem;cursor:pointer;font-weight:600;background:#fbfcfe}
.seg-opt input:checked + span{background:var(--accent);color:#fff}
.time-in{flex:1;text-align:center}.time-in small{display:block;color:var(--muted);margin-top:.2rem}
.colon{align-self:center;font-size:1.4rem;font-weight:700;color:var(--muted);padding-top:.4rem}
.checks{display:flex;flex-wrap:wrap;gap:.5rem}
.chk{display:inline-flex;align-items:center;gap:.35rem;font-weight:500;background:#f6f8fb;border:1px solid var(--line);padding:.4rem .7rem;border-radius:999px;margin:0}
.chk input{width:auto}
.editrow{background:#f6f8fb;border-radius:10px;padding:.8rem}

/* buttons */
.btn{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:10px;padding:.75rem 1.2rem;font-size:1rem;font-weight:700;cursor:pointer;text-align:center}
.btn:hover{background:var(--accent-d)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:#f4f6f9}

/* tables / results */
.pill{background:#eef7f7;color:var(--accent-d);padding:.3rem .7rem;border-radius:999px;font-size:.85rem;font-weight:700}
table{width:100%;border-collapse:collapse}
.scores th,.scores td,.kv th,.kv td{padding:.6rem .4rem;border-bottom:1px solid var(--line);text-align:start}
.kv th{width:38%;color:var(--muted);font-weight:600}
.scores .num{text-align:end}.big{font-size:1.25rem;font-weight:800;color:var(--accent-d)}
.totals{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:1rem}
.tot{background:#f6f8fb;border-radius:12px;padding:.8rem;text-align:center}
.tot span{display:block;font-size:.78rem;color:var(--muted);margin-bottom:.25rem}
.tot strong{font-size:1.5rem}.tot small{font-size:.7rem;color:var(--muted);margin-inline-start:2px}
.tot.accent{background:var(--bg);color:#fff}.tot.accent span,.tot.accent small{color:#9aa7b8}
@media(max-width:420px){.totals{grid-template-columns:1fr}}
.table-scroll{overflow-x:auto}
.hist th,.hist td{padding:.5rem;border-bottom:1px solid var(--line);text-align:start;white-space:nowrap;font-size:.9rem}
.hist b{color:var(--accent-d)}
.result-card .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:240px;text-align:center}
.empty-ico{font-size:3rem;margin-bottom:.5rem;opacity:.6}

/* badges */
.badge{padding:.25rem .65rem;border-radius:999px;font-size:.8rem;font-weight:700}
.badge.valid{background:#e7f6ee;color:var(--ok)}
.badge.expired{background:#fff4e2;color:#9a6f12}
.badge.revoked{background:#fdeaea;color:var(--danger)}

/* banners */
.banner{padding:.7rem 1rem;border-radius:10px;margin:1rem 0;font-weight:600}
.banner.ok{background:#e7f6ee;color:var(--ok)}
.banner.err{background:#fdeaea;color:var(--danger)}
.ok{color:var(--ok)}.err{color:var(--danger)}

/* vehicle multi-field form grid */
.formgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.5rem 1rem}
.formgrid .field{margin-bottom:.2rem}
.formgrid input{padding:.55rem .7rem;font-size:.95rem}

/* clear action buttons */
.actions{display:flex;gap:.4rem;flex-wrap:wrap}
.btn-sm{display:inline-block;background:#fff;color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:.4rem .8rem;font-size:.85rem;
  font-weight:700;cursor:pointer;text-decoration:none;line-height:1.2}
.btn-sm:hover{background:#f4f6f9;border-color:#d9d5cf}
.btn-sm[disabled],.btn-sm:disabled{opacity:.5;cursor:default}
/* Colour variants keep white text — they set their own solid background. */
.btn-sm.edit{background:#2b6cb0;border-color:#2b6cb0;color:#fff}.btn-sm.edit:hover{background:#245a93;border-color:#245a93}
.btn-sm.del{background:#b53e3e;border-color:#b53e3e;color:#fff}.btn-sm.del:hover{background:#a83232;border-color:#a83232}
.btn-sm.warn{background:#8f6100;border-color:#8f6100;color:#fff}.btn-sm.warn:hover{background:#7d5500;border-color:#7d5500}
.btn-sm.ok{background:#157a49;border-color:#157a49;color:#fff}.btn-sm.ok:hover{background:#0f6b3f;border-color:#0f6b3f}
/* admin toolbar (vehicle lookup) */
.toolbar{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;background:#f6f8fb;
  border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;margin-top:.8rem}
.toolbar .lbl{font-weight:700;color:var(--muted);font-size:.85rem}
.toolbar a.btn-sm{background:var(--accent);border-color:var(--accent);color:#fff}.toolbar a.btn-sm:hover{background:var(--accent-d);border-color:var(--accent-d)}

/* ===== Vehicle solution theme ===== */
.veh{max-width:720px;margin:0 auto}
.veh-search{text-align:center}
.veh-hero{width:64px;height:64px;border-radius:18px;margin:.2rem auto .5rem;display:flex;align-items:center;justify-content:center;
  color:#fff;background:linear-gradient(135deg,#60a5fa,#4f46e5);box-shadow:0 10px 24px rgba(79,70,229,.35)}
.veh-search h2{font-size:1.5rem}
.veh-form{display:flex;gap:.5rem;max-width:480px;margin:1rem auto 0}
.veh-form input{flex:1;text-align:center;font-size:1.15rem;letter-spacing:.5px;padding:.8rem}
.veh-search .toolbar{justify-content:center;margin-top:1.2rem}
.small{font-size:.8rem}
/* results as clickable rows */
.result-list{display:flex;flex-direction:column;gap:.55rem;margin-top:.6rem}
.result-row{display:flex;align-items:center;gap:.6rem;background:#fff;border:1px solid var(--line);
  border-inline-start:4px solid var(--accent);border-radius:12px;padding:.8rem 1rem;color:var(--ink);transition:.15s}
.result-row:hover{box-shadow:0 8px 22px rgba(20,30,50,.10);transform:translateY(-2px);border-inline-start-color:var(--accent-d)}
.rr-fields{flex:1;display:flex;flex-wrap:wrap;gap:.3rem .9rem}
.rr-f{font-size:.95rem;font-weight:600;color:var(--ink)}
.rr-f i{font-style:normal;font-weight:600;color:#8a98a8;font-size:.72rem;display:block;margin-bottom:1px}
.rr-go{font-size:1.6rem;color:var(--accent);font-weight:700}
/* detail */
.veh-detail .detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  border-bottom:1px solid var(--line);padding-bottom:1rem;margin-bottom:.4rem}
.bignum{font-size:2.2rem;font-weight:900;margin:.1rem 0;color:var(--ink);letter-spacing:.5px}
.detail-actions{display:flex;flex-direction:column;gap:.4rem}
.veh-detail .kv th{width:42%}
@media(max-width:520px){.detail-head{flex-direction:column}.detail-actions{flex-direction:row}}

/* advanced vehicle search */
.adv{margin-top:.9rem;border:1px solid var(--line);border-radius:12px;background:#fbfcfe}
.adv>summary{cursor:pointer;list-style:none;padding:.7rem 1rem;font-weight:700;color:var(--accent-d);
  display:flex;align-items:center;gap:.4rem}
.adv>summary::-webkit-details-marker{display:none}
.adv[open]>summary{border-bottom:1px solid var(--line)}
.adv-form{padding:1rem}
.adv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem}
.adv-foot{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.8rem}
.seg.match{max-width:240px}

/* ===== Manager.io dashboard module ===== */
.tile-ico.ti-manager{background:linear-gradient(135deg,#e2603f,#e0a800)}
.mgr-biz h3{display:flex;align-items:center;gap:.5rem;font-size:1.12rem}
.acc-row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.55rem .1rem;border-bottom:1px solid var(--line)}
.acc-row:last-child{border-bottom:0}
.acc-name{font-weight:600}
.acc-bal{font-weight:800;color:var(--accent-d);white-space:nowrap}
.acc-bal.muted2{color:var(--muted);font-weight:600}
.cur-tot{display:flex;justify-content:space-between;font-weight:800;padding:.5rem .1rem;border-top:2px solid var(--line);margin-top:.2rem}
.cur-tot .big{font-size:1.3rem}
/* cash counter */
.cc-grid{width:100%}
.cc-grid th,.cc-grid td{padding:.55rem .5rem;border-bottom:1px solid var(--line);text-align:start}
.cc-grid input{width:120px;text-align:center}
.cc-foot td{font-size:1.2rem;font-weight:900;color:var(--accent-d);border-bottom:0;border-top:2px solid var(--line)}

/* ============================================================================
   EGF Accounting theme — overrides (navy #2b2f36 / gray #7a766f, warm cream)
   Inspired by the Relief Center look: serif display headings, soft cards.
   ============================================================================ */
:root{
  --bg:#2b2f36;             /* deep espresso (dark accent surfaces) */
  --ink:#2b2f36;            /* warm near-black */
  --muted:#7a766f;          /* warm taupe */
  --line:#e6e3df;           /* warm hairline */
  --accent:#2b2f36;         /* espresso brown (primary) */
  --accent-d:#1c1f24;       /* darker brown (hover) */
  --gold:#e2603f;           /* terracotta accent */
  --danger:#c0453f; --ok:#2f7d4f; --red:#c0453f;   /* --red was referenced but never defined */
  --shadow:0 1px 2px rgba(43,47,54,.05),0 10px 28px rgba(43,47,54,.07);
}
body{background:#f6f5f3;color:var(--ink)}

/* serif display headings; Arabic gracefully falls back to Cairo */
h1,h2,h3,.brand,.hero h1,.tile h3,.set-card h3{
  font-family:'Playfair Display','Cairo',Georgia,serif;letter-spacing:-.01em;
}

/* brand: EGF logo in the top bar */
.brand-dot{display:none}
.brand-logo{height:36px;width:auto;display:block;border-radius:6px}
.brand{gap:.6rem;color:var(--ink);font-weight:800}

/* warm chrome + cards */
.topbar{background:rgba(255,255,255,.92);border-bottom:1px solid var(--line)}
.tile,.set-card,.card{border:1px solid var(--line)}
.tile:hover{border-color:#d8d2c4}
.icon-btn{background:#f1efe8;border:1px solid var(--line)}
.icon-btn:hover{background:#e9e6dc}
.pill{background:#ecebf3;color:var(--accent)}

/* auth screen: navy gradient + centered logo */
.auth-bg{background:linear-gradient(160deg,#1c1f24,#2b2f36)}
.auth-logo{display:block;width:200px;max-width:70%;margin:0 auto .8rem}

/* EGF-branded tiles for the accounting + settings cards */
.tile-ico{box-shadow:0 8px 20px rgba(43,47,54,.18)}
.tile-ico.ti-manager{background:linear-gradient(135deg,#3a3c93,#2b2f36)}
.tile-ico.ti-set{background:linear-gradient(135deg,#6f7076,#7a766f)}

/* ===== Manager.io settings — clean cards + modern icon actions ===== */
.ghost-sm{background:#fff;color:var(--ink);border:1px solid var(--line)}
.ghost-sm:hover{background:#f4f2ec}
.btn-sm .ico,.btn .ico{vertical-align:-3px;margin-inline-end:.25rem}

.biz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;margin:.4rem 0 1rem}
.biz-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.1rem 1.2rem}
.biz-head{display:flex;align-items:center;gap:.7rem}
.biz-ico{width:44px;height:44px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;
  color:#fff;background:linear-gradient(135deg,#3a3c93,#2b2f36)}
.biz-id{min-width:0}
.biz-nm{display:block;font-weight:800;font-size:1.08rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.biz-host{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.biz-stats{display:flex;align-items:center;gap:.5rem;margin:.7rem 0;color:var(--muted);font-size:.9rem}
.biz-stats b{color:var(--ink)} .biz-stats .dot{opacity:.5}
.biz-actions{display:flex;gap:.4rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:.8rem}
.biz-actions form{margin:0}
.ico-act{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;
  background:#f3f1ea;border:1px solid var(--line);color:var(--ink);cursor:pointer;transition:.15s}
.ico-act:hover{background:#e9e6dc}
.ico-act.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.ico-act.primary:hover{background:var(--accent-d)}
.ico-act.danger{color:var(--danger)} .ico-act.danger:hover{background:#fdecec}

/* search field with leading icon */
.search-wrap{display:flex;align-items:center;gap:.5rem;background:#fbfaf6;border:1px solid var(--line);
  border-radius:11px;padding:.1rem .8rem;margin:.6rem 0 1rem}
.search-wrap .ico{color:var(--muted);flex:none}
.search-wrap input{border:0;background:transparent;padding:.65rem 0}
.search-wrap input:focus{outline:none}

/* account toggle list */
.acc-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.acc-item{display:flex;align-items:center;gap:.8rem;padding:.7rem .9rem;margin:0;border-bottom:1px solid var(--line);
  cursor:pointer;font-weight:500;transition:.12s}
.acc-item:last-child{border-bottom:0}
.acc-item:hover{background:#f7f5f2}
.acc-item input{position:absolute;opacity:0;width:0;height:0}
.acc-tick{width:24px;height:24px;flex:none;border-radius:7px;border:1.5px solid #cfc9bb;background:#fff;
  display:flex;align-items:center;justify-content:center;color:#fff;transition:.12s}
.acc-tick .ico{opacity:0}
.acc-item input:checked + .acc-tick{background:var(--accent);border-color:var(--accent)}
.acc-item input:checked + .acc-tick .ico{opacity:1}
.acc-meta{flex:1;min-width:0}
.acc-nm{display:block;font-weight:700;color:var(--ink)}
.acc-sub{display:flex;gap:.35rem;margin-top:.15rem}
.acc-amt{font-weight:800;color:var(--accent);white-space:nowrap}
.tag{font-size:.72rem;font-weight:700;padding:.12rem .5rem;border-radius:999px;background:#eee9dd;color:#7a766f}
.tag-cash{background:#e7f1ec;color:#2f7d4f} .tag-bank{background:#ecebf3;color:#3a3c93}

.empty-mini{text-align:center;padding:1.6rem;color:var(--muted)}
.empty-mini .ico{color:#cfc9bb;margin-bottom:.4rem}
.empty-mini form{margin-top:.8rem}

/* ===== Manager dashboard — collapsible business cards + comparison ===== */
.toolbar2{display:flex;gap:.5rem;margin:.9rem 0 .2rem}
details.mgr-biz{padding:0;overflow:hidden}
details.mgr-biz > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.6rem;
  padding:1rem 1.2rem;font-weight:800;font-size:1.1rem}
details.mgr-biz > summary::-webkit-details-marker{display:none}
.biz-sum-name{display:flex;align-items:center;gap:.45rem;font-family:'Playfair Display','Cairo',serif}
.biz-sum-name .ico{color:var(--accent)}
.chev{display:inline-flex;color:var(--muted);transition:transform .18s}
details[open] .chev{transform:rotate(180deg)}
.biz-sum-tot{margin-inline-start:auto;display:flex;gap:.7rem;flex-wrap:wrap;justify-content:flex-end}
.mini-tot{font-size:.95rem;font-weight:800;color:var(--accent)}
.mini-tot small{font-weight:600;color:var(--muted)}
.biz-body{padding:0 1.2rem 1.1rem;border-top:1px solid var(--line)}
.biz-body .acc-row:first-child{padding-top:.8rem}

/* comparison panel */
.cmp-pick{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin:.4rem 0 1rem}
.cmp-pick select{flex:1;min-width:140px}
.cmp-vs{color:var(--muted);font-weight:700}
.cmp-tbl{width:100%;border-collapse:collapse}
.cmp-tbl th,.cmp-tbl td{padding:.6rem .5rem;border-bottom:1px solid var(--line);text-align:start}
.cmp-tbl thead th{font-size:.82rem;color:var(--muted);font-weight:700}
.cmp-tbl thead th:nth-child(n+2){text-align:end}
.cmp-tbl .num{text-align:end;font-weight:700;white-space:nowrap}
.cmp-cur{font-weight:800}
.cmp-d.pos{color:var(--ok)} .cmp-d.neg{color:var(--danger)}

/* ==========================================================================
   PHONE — v1.75
   ==========================================================================
   Everything below lives inside a media query, so desktop rendering is
   byte-identical to what it was (PROJECT_RULES #42).

   WHY !important, which is otherwise banned on sight:
   several hundred inputs across this project carry an INLINE
   style="width:120px". An inline style beats every selector there is, so a
   stylesheet cannot make those fields shrink. On a phone they therefore
   refuse to wrap, overflow their flex row, and land on top of the control
   next to them — which is exactly how the START TIME label ended up printed
   over the DATE field on the session page. The alternative is editing
   several hundred markup attributes by hand, which is a far larger change
   with far more ways to go wrong. Scoped to toolbars and form grids only,
   never to a table.

   WHY 16px, which looks too big on a desktop:
   iOS Safari zooms the whole page in whenever a focused input has a font
   smaller than 16px, and it does not zoom back out afterwards. It is a
   threshold, not a preference — 15px zooms, 16px does not.

   TABLES ARE DELIBERATELY LEFT ALONE. Dense data belongs in a table that
   scrolls sideways, not in one squeezed to 320px; and a scroll wrapper
   clips any dropdown panel inside it, which is why the rotation Schedules
   table lost its scroller in the first place. Table inputs keep their sizes.
   ========================================================================== */
@media (max-width:560px){
  /* a flex child will not shrink below its own content without this */
  .row.gap > *{min-width:0}
  .grid{grid-template-columns:minmax(0,1fr)}
  .field input,.field select,.field textarea{font-size:16px}
  .card{padding:1rem;margin:.8rem 0}
  .card.narrow{width:100%;margin:.6rem}

  /* LABELS SIT ABOVE THEIR CONTROL, ALWAYS, WITH ONE GAP.
     A label is already display:block; the part that went wrong on a phone was
     a label being allowed to sit on one line while its control wrapped to the
     next column, which is how START TIME ended up printed over DATE. The
     toolbars are grids now, so each label/control pair owns a cell; this just
     makes the gap and the wrapping consistent between them. */
  label{margin:.45rem 0 .3rem;line-height:1.3}
  .tr-bar label,.ac-bar label,.pl-bar label{white-space:normal;overflow-wrap:anywhere}

  /* A DROPDOWN MUST SHOW ITS OWN VALUE.
     select inherits width:100% from the base rule; inside a narrow table cell
     that truncated the text to nothing useful — the plan table's status column
     rendered "completed" as "cc". A select sizes itself to its longest option
     under width:auto, which is what makes it readable, and the table scrolls
     sideways to accommodate it. Inputs are deliberately NOT included: width
     auto on an input means the browser's default 20-character box, not
     shrink-to-fit, so it would make every numeric cell wider, not better. */
  table select{width:auto!important;min-width:7em;font-size:16px!important;
    padding:6px 9px!important}
  select{font-size:16px}
  /* 3.93 (operator: egf phone pass): EVERY box is 16px on a phone — filter bars and boxes inside
     tables were 13–15px, and iOS zooms in on those (see WHY 16px above). The combobox's own box too. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select,.cbx input{font-size:16px!important}
  /* 3.93: a table wider than the phone scrolls inside its own frame (lib/footer.php wraps it), so the
     PAGE never moves sideways. Only tables with no box or dropdown in them are wrapped — a scroller
     clips the combobox list (the rotation Schedules lesson above). */
  .egf-tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .egf-tscroll>table{margin:0}
}

/* ── Quick form (v2.91): a page opened by the shell's + menu shows ONLY its form,
   on a see-through background, over whatever page is underneath. ── */
html.egf-quick,html.egf-quick body{background:transparent!important}
html.egf-quick body *{visibility:hidden}
html.egf-quick :is(.ac-modal-bg,.fm-bg,.st-modal-bg,.tr-modal-bg),
html.egf-quick :is(.ac-modal-bg,.fm-bg,.st-modal-bg,.tr-modal-bg) *{visibility:visible}

/* ── Floating form (v2.87) — THE create/edit container for every page ──────────
   Markup:  <div class="fm-bg" id="X"><div class="fm"><div class="fm-h"><h3>…</h3>
            <button type="button" class="fm-x" data-fm-close>×</button></div>
            <div class="fm-b"> fields </div><div class="fm-f"> buttons </div></div></div>
   Open with fmOpen('X'), close with fmClose('X') or anything carrying data-fm-close.
   The backdrop scrolls and the panel centres with margin:auto (rules 20/22); Esc and
   a click on the backdrop close it; lib/footer.php hides the shell's + while open. */
.fm-bg{position:fixed;inset:0;background:rgba(16,37,40,.5);display:none;align-items:flex-start;justify-content:center;
  z-index:1000;padding:24px 14px;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.fm-bg.open{display:flex}
.fm{background:var(--surface,#fff);border-radius:20px;width:100%;max-width:560px;margin:auto;
  box-shadow:0 24px 48px rgba(16,37,40,.18)}
.fm.wide{max-width:780px}
.fm-h{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line,#e6e2dc)}
.fm-h h3{margin:0;font-size:16px}
.fm-x{margin-inline-start:auto;background:none;border:none;font-size:22px;line-height:1;cursor:pointer;color:var(--muted,#7a766f);padding:2px 6px}
.fm-b{padding:16px 20px}
.fm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.fm-grid .full{grid-column:1/-1}
.fm-grid label{display:block;font-size:12.5px;font-weight:600;margin:0 0 4px}
.fm-grid input:not([type=checkbox]):not([type=radio]),.fm-grid select,.fm-grid textarea{width:100%;box-sizing:border-box}
.fm-f{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end;padding:12px 20px;border-top:1px solid var(--line,#e6e2dc)}
.fm-f .start{margin-inline-end:auto}
@media(max-width:560px){.fm-grid{grid-template-columns:minmax(0,1fr)}}

/* 3.99 (operator: "work like a phone app") — a page change slides / fades instead of flashing white.
   Cross-document View Transitions: Safari 18.2+, Chrome 126+; older browsers keep the plain page load.
   A swipe tells the next page which way it went (swipe-tabs.js: vt-l / vt-r); any other link = a quick fade. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
html.vt-l::view-transition-old(root){animation:egf-vt-out-l .22s ease-out both}
html.vt-l::view-transition-new(root){animation:egf-vt-in-r .22s ease-out both}
html.vt-r::view-transition-old(root){animation:egf-vt-out-r .22s ease-out both}
html.vt-r::view-transition-new(root){animation:egf-vt-in-l .22s ease-out both}
@keyframes egf-vt-out-l{to{transform:translateX(-25%);opacity:0}}
@keyframes egf-vt-in-r{from{transform:translateX(25%);opacity:0}}
@keyframes egf-vt-out-r{to{transform:translateX(25%);opacity:0}}
@keyframes egf-vt-in-l{from{transform:translateX(-25%);opacity:0}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* 3.124 (operator: Money tabs froze on the iPhone): no page-change animation on touch screens — while it plays the
   page takes no taps, and iOS can stall it inside the app frame. PC keeps it. */
@media (hover:none) and (pointer:coarse){@view-transition{navigation:none}}