:root{
  --bg:#0b1220;
  --bg-2:#0e1726;
  --panel:#121a2b;
  --panel-2:#16213a;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.12);
  --text:#e7ecf3;
  --muted:#8a94a6;
  --gold:#d4af37;
  --gold-2:#b8932f;                 /* darker stop of the accent gradient (buttons) */
  --gold-soft:rgba(212,175,55,.14);
  --accent-ink:#1a1408;             /* text drawn on top of an accent-filled button */
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

/* ============================================================
   THEME — "Clair Exécutif" (light, navy text + refined gold)
   ============================================================ */
:root[data-theme="clair"]{
  --bg:#e9edf3;
  --bg-2:#f2f5f9;
  --panel:#ffffff;
  --panel-2:#f5f7fb;
  --line:rgba(16,26,45,.10);
  --line-2:rgba(16,26,45,.17);
  --text:#1b2433;
  --muted:#5c6779;
  --gold:#b0862a;
  --gold-2:#8f6c1e;
  --gold-soft:rgba(176,134,42,.16);
  --accent-ink:#fff;
  --shadow:0 10px 26px rgba(16,26,45,.12);
}
:root[data-theme="clair"] body{
  background:radial-gradient(1200px 600px at 80% -10%, #ffffff 0%, var(--bg) 55%) fixed;
}
/* light theme needs the white-alpha hovers/text flipped to dark-alpha */
:root[data-theme="clair"] .nav a{color:#3d4757}
:root[data-theme="clair"] .nav a:hover{background:rgba(16,26,45,.05);color:var(--text)}
:root[data-theme="clair"] .fleet-item:hover{background:rgba(16,26,45,.05)}
:root[data-theme="clair"] .fleet-item.active{background:rgba(16,26,45,.07)}
:root[data-theme="clair"] .tbl tbody tr:hover{background:rgba(16,26,45,.03)}
:root[data-theme="clair"] code{background:rgba(16,26,45,.07)}
:root[data-theme="clair"] .role-pill{background:rgba(16,26,45,.06)}
/* Light theme: the dark-theme pastels wash out on white — go darker + saturated */
:root[data-theme="clair"] .role-pill.admin{color:#8a6d0f;background:rgba(212,175,55,.20)}
:root[data-theme="clair"] .role-pill.office{color:#2f6bd6;background:rgba(47,107,214,.13)}
:root[data-theme="clair"] .role-pill.vto{color:#6d3fc4;background:rgba(109,63,196,.13)}
:root[data-theme="clair"] .role-pill.crew{color:#1a7d3a;background:rgba(26,125,58,.13)}
:root[data-theme="clair"] .role-pill.owner{color:#0d7d76;background:rgba(13,125,118,.13)}
/* Aircraft tails + Leon codes were washing out too */
:root[data-theme="clair"] .tail-chip{color:#8a6d0f;background:rgba(212,175,55,.18);
  border-color:rgba(138,109,15,.35)}
:root[data-theme="clair"] .tail-chip:hover{background:rgba(212,175,55,.34);color:#5c480a}
:root[data-theme="clair"] .tail-chip.assigned{color:#1a7d3a;background:rgba(26,125,58,.12);
  border-color:rgba(26,125,58,.50)}
:root[data-theme="clair"] .tail-chip.assigned:hover{background:rgba(26,125,58,.24);color:#12662f}
:root[data-theme="clair"] .crew-tg{background:rgba(16,26,45,.09);color:#3d4757}
:root[data-theme="clair"] .crew-tg.cpt{background:rgba(212,175,55,.22);color:#8a6d0f}
:root[data-theme="clair"] .crew-tg.fo{background:rgba(47,107,214,.16);color:#2f6bd6}
:root[data-theme="clair"] .purpose{background:rgba(16,26,45,.05)}
:root[data-theme="clair"] .brand{border:1px solid var(--line);box-shadow:0 2px 10px rgba(16,26,45,.10)}
/* washed-out on white → darker, more saturated variants */
:root[data-theme="clair"] .nav a{color:#2b3446;font-weight:600}
:root[data-theme="clair"] .ic-dash{color:#2f6bd6}
:root[data-theme="clair"] .ic-exp{color:#1a9152}
:root[data-theme="clair"] .ic-fly{color:#2b7fc4}
:root[data-theme="clair"] .ic-track{color:#cf4a37}
:root[data-theme="clair"] .ic-stmt{color:#7d43c2}
:root[data-theme="clair"] .ic-receipt{color:#a86f14}
:root[data-theme="clair"] .ic-bill{color:#178679}
:root[data-theme="clair"] .ic-revolut{color:#6a4fd0}
:root[data-theme="clair"] .ic-val{color:#1f9350}
:root[data-theme="clair"] .ic-admin{color:#5c6779}
:root[data-theme="clair"] .purpose.positioning{color:#5c6779}
:root[data-theme="clair"] .demo-box ul{color:#3d4757}
/* badges/pills/buttons: darken the dark-theme colours so they read on white */
:root[data-theme="clair"] .purpose.owner{color:#2f6bd6;background:rgba(47,107,214,.12)}
:root[data-theme="clair"] .purpose.owner-charter{color:#137567;background:rgba(19,117,103,.12)}
:root[data-theme="clair"] .purpose.charter{color:#8a6d1a;background:rgba(176,134,42,.16)}
:root[data-theme="clair"] .purpose.training{color:#7d43c2;background:rgba(125,67,194,.12)}
:root[data-theme="clair"] .purpose.technical{color:#b5561f;background:rgba(181,86,31,.12)}
:root[data-theme="clair"] .status.paid{color:#1f8f43}
:root[data-theme="clair"] .status.invoiced{color:#2f6bd6}
:root[data-theme="clair"] .status.pending{color:#b5561f}
:root[data-theme="clair"] .crew-tg{color:#3d4757}
:root[data-theme="clair"] .crew-tg.cpt{color:#8a6d1a;background:rgba(176,134,42,.20)}
:root[data-theme="clair"] .crew-tg.fo{color:#2f6bd6;background:rgba(47,107,214,.16)}
:root[data-theme="clair"] .crew-tg.fa{color:#b03a6a;background:rgba(200,60,110,.16)}
:root[data-theme="clair"] .btn-sm.edit{color:#2f6bd6;border-color:rgba(47,107,214,.55)}
:root[data-theme="clair"] .btn-sm.arch{color:#a5701c;border-color:rgba(165,112,28,.55)}
:root[data-theme="clair"] .claim-st.pending{color:#b5561f}
:root[data-theme="clair"] .claim-st.approved{color:#1f8f43}
:root[data-theme="clair"] .claim-st.rejected{color:#b23b34}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:radial-gradient(1200px 600px at 80% -10%, #16223b 0%, var(--bg) 55%) fixed;
  color:var(--text);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1{font-size:22px;font-weight:600;margin:0}
h2{font-size:15px;font-weight:600;margin:0}
h3{font-size:14px;font-weight:600}
.muted{color:var(--muted)}
.b{font-weight:600}
.r{text-align:right}
.center{text-align:center}
.gold{color:var(--gold)}
code{background:rgba(255,255,255,.08);padding:1px 6px;border-radius:6px;font-size:12px}

/* ---------- Layout ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{
  width:248px;flex:none;background:linear-gradient(180deg,var(--bg-2),var(--bg));
  border-right:1px solid var(--line);display:flex;flex-direction:column;
  padding:22px 16px;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.content{flex:1;padding:28px 34px;max-width:1180px;margin:0 auto;width:100%}

/* ---------- Brand ---------- */
.brand{display:block;margin-bottom:24px;background:#fff;border-radius:12px;
  padding:10px 14px;box-shadow:0 4px 16px rgba(0,0,0,.35)}
.brand-logo{display:block;width:100%;height:auto;max-height:56px;object-fit:contain}

/* ---------- Theme switch ---------- */
.theme-switch{display:flex;align-items:center;justify-content:center;gap:10px;padding:6px 0 2px}
.theme-switch button{background:none;border:none;padding:0;cursor:pointer;line-height:0;border-radius:50%}
.theme-switch .sw{display:block;width:20px;height:20px;border-radius:50%;
  border:2px solid var(--line-2);box-shadow:0 1px 4px rgba(0,0,0,.35);transition:.15s}
.theme-switch button:hover .sw{transform:scale(1.12)}
.theme-switch button.active .sw{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-soft)}
.sw-or{background:linear-gradient(135deg,#0e1726 50%,#d4af37 50%)}
.sw-clair{background:linear-gradient(135deg,#ffffff 50%,#b0862a 50%)}

/* ---------- Language switch ---------- */
.lang-switch{display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 0 4px;font-size:12px;font-weight:600}
.lang-switch a{color:var(--muted);padding:3px 9px;border-radius:7px}
.lang-switch a:hover{color:var(--text)}
.lang-switch a.active{color:var(--gold);background:var(--gold-soft)}
.lang-switch .sep{color:var(--line-2)}
.manual-link{text-align:center;padding:2px 0 8px;font-size:12px}
.manual-link a{color:var(--muted);padding:3px 9px;border-radius:7px}
.manual-link a:hover{color:var(--gold)}

/* ---------- Nav ---------- */
.nav{display:flex;flex-direction:column;gap:3px;margin-bottom:22px}
.nav a{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;
  color:#c2cad8;font-weight:500;font-size:13.5px;transition:.15s;
  border-left:3px solid transparent;
}
.nav a .ic{width:18px;text-align:center;font-size:15px;opacity:1}
/* per-item icon colors give the menu life */
.ic-dash{color:#5b8def}
.ic-exp{color:#5cc98a}
.ic-fly{color:#5aa9e6}
.ic-track{color:#e0715f}
.ic-stmt{color:#c99bf0}
.ic-receipt{color:#e6b34a}
.ic-bill{color:#48b3a6}
.ic-revolut{color:#8f7bf0}
.ic-recon{color:#e0a24a}
.ic-bank{color:#5aa9e6}
.ic-val{color:#7ec46b}
.ic-admin{color:#9aa6ba}
.nav a:hover{background:rgba(255,255,255,.05);color:var(--text);border-left-color:rgba(255,255,255,.25)}
.nav a.active{background:var(--gold-soft);color:var(--gold);border-left-color:var(--gold)}
.nav a.active .ic{color:var(--gold)}

/* ---------- Fleet switch ---------- */
.fleet-switch{border-top:1px solid var(--line);padding-top:16px;flex:1}
.fleet-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:8px;padding:0 4px}
.fleet-item{display:block;padding:8px 12px;border-radius:9px;margin-bottom:2px}
.fleet-item:hover{background:rgba(255,255,255,.04)}
.fleet-item.active{background:rgba(255,255,255,.06)}
.fleet-item .reg{font-weight:600;display:block;font-size:13px}
.fleet-item .type{font-size:11px;color:var(--muted)}

.sidebar-foot{border-top:1px solid var(--line);padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.who-name{font-weight:600;font-size:12.5px}
.who-role{font-size:11px;color:var(--muted)}
.logout{font-size:11.5px;color:var(--muted);border:1px solid var(--line-2);padding:5px 9px;border-radius:8px}
.logout:hover{color:var(--text);border-color:var(--muted)}

/* ---------- Page head ---------- */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:22px;gap:16px}
.page-head .muted{margin-top:4px}
.head-actions{display:flex;gap:10px;align-items:center}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.kpi-label{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.kpi-value{font-size:25px;font-weight:600;margin-top:8px}

/* ---------- Cards ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:20px;box-shadow:var(--shadow)}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.grid-2{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}
.donut-wrap{position:relative;height:300px;display:flex;justify-content:center}
/* donut + wrapping HTML legend on the right */
.donut-row{display:flex;gap:14px;align-items:center}
.donut-row .donut-wrap{flex:none;width:150px;height:150px}
.chart-legend{list-style:none;margin:0;padding:0;flex:1;min-width:0;
  display:flex;flex-direction:column;gap:7px;font-size:11px}
.cl-item{display:flex;gap:8px;align-items:flex-start;cursor:pointer;line-height:1.3}
.cl-item.cl-off{opacity:.4;text-decoration:line-through}
.cl-box{width:11px;height:11px;border-radius:3px;flex:none;margin-top:2px}
.cl-txt{color:var(--text)}
.link{color:var(--gold);font-size:12.5px;font-weight:500}
.link:hover{text-decoration:underline}

/* ---------- Tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
/* Wide tables scroll inside their card instead of squeezing columns */
.tbl-scroll{overflow-x:auto}
.tbl td.nowrap{white-space:nowrap}

/* ---- Xero-like bill editor (office/admin claim review) ---- */
.bill-editor{max-width:980px}
.bill-status{display:flex;align-items:center;gap:10px;margin-bottom:16px;color:var(--muted);font-size:13px}
.bill-head{display:grid;grid-template-columns:1.6fr 1fr 1.3fr 1fr;gap:14px;margin-bottom:14px}
@media(max-width:760px){.bill-head{grid-template-columns:1fr 1fr}}
.bill-head label{display:flex;flex-direction:column;gap:5px;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);font-weight:600}
.bill-head input,.bill-head select{font-size:14px}
.bill-total-box{text-align:right;align-self:end}
.bill-total-box .lbl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.bill-total-box .val{font-size:22px;font-weight:700;color:var(--gold,#d4af37);font-variant-numeric:tabular-nums}
.bill-meta{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:4px 0 14px;color:var(--muted);font-size:13px}
.bill-table{width:100%;border-collapse:collapse;margin:6px 0 4px}
.bill-table th{text-align:left;font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;
  color:var(--muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line-2)}
.bill-table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.bill-table input,.bill-table select{width:100%;min-width:110px}
.bill-table th.r,.bill-table td.r{text-align:right}
.bill-sums{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin:14px 0 6px;
  font-variant-numeric:tabular-nums}
.bill-sums .row{display:flex;gap:26px;font-size:14px;color:var(--muted)}
.bill-sums .row.total{font-size:19px;font-weight:700;color:var(--text);
  border-top:2px solid var(--line-2);padding-top:8px}
.bill-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.bill-actions .grp{display:flex;gap:10px;align-items:center}
/* supplier invoice number not provided yet — office must fill it */
.ref-missing{border-color:#d98077!important}
.ref-missing::placeholder{color:#d98077;font-weight:700;letter-spacing:.06em}
.tbl th{text-align:left;font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line-2)}
.tbl th.r{text-align:right}   /* right-aligned headers must match their right-aligned column data */
.tbl td{padding:10px;border-bottom:1px solid var(--line)}
.tbl tbody tr:hover{background:rgba(255,255,255,.025)}
.tbl tfoot td{padding:11px 10px;border-top:2px solid var(--line-2);font-size:13px}
.tbl.small td,.tbl.small th{padding:6px 9px;font-size:12px}

.chip{display:inline-block;font-size:11.5px;font-weight:500;padding:3px 10px;border-radius:20px;
  color:var(--c);background:color-mix(in srgb, var(--c) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--c) 35%, transparent)}
.status{font-size:11px;padding:2px 9px;border-radius:20px;text-transform:capitalize}
.status.paid{color:#7ec46b;background:rgba(126,196,107,.12)}
.status.invoiced{color:#5b8def;background:rgba(91,141,239,.12)}
.status.pending{color:#e08a4b;background:rgba(224,138,75,.12)}
.purpose{font-size:11px;padding:2px 9px;border-radius:20px;color:var(--muted);background:rgba(255,255,255,.05)}
.purpose.owner{color:#5aa9e6;background:rgba(90,169,230,.14)}
.purpose.owner-charter{color:#3fb8a6;background:rgba(63,184,166,.15)}
.purpose.charter{color:var(--gold);background:var(--gold-soft)}
.purpose.positioning{color:#8a94a6}
.purpose.training{color:#9d7ff0;background:rgba(157,127,240,.15)}
.purpose.technical{color:#e0885a;background:rgba(224,136,90,.15)}
.arrow{color:var(--muted);margin:0 2px}

/* ---------- Forms / buttons ---------- */
.filters{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.filter-amounts{display:flex;gap:12px;align-items:flex-end}
.filter-amounts input{width:110px}
.filter-dates{display:flex;gap:12px;align-items:flex-end}
/* custom date picker (filter dates) */
.dp-wrap{display:inline-flex;align-items:center;gap:6px;min-width:150px;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:9px;padding:0 8px 0 11px}
.dp-wrap:focus-within{border-color:var(--gold)}
.dp-field{flex:1;min-width:0;background:none;border:none;color:var(--text);padding:9px 0;
  font-size:13px;font-family:inherit;outline:none}
.dp-cal{background:none;border:none;cursor:pointer;opacity:.75;font-size:13px;line-height:1;padding:4px}
.dp-cal:hover{opacity:1}
.dp-pop{position:absolute;top:100%;left:0;z-index:60;margin-top:5px;width:256px;padding:10px;
  background:var(--panel);border:1px solid var(--line-2);border-radius:11px;box-shadow:var(--shadow)}
.dp-head{display:flex;gap:6px;align-items:center;margin-bottom:8px}
.dp-head select{flex:1;padding:5px 6px;font-size:12px;text-transform:capitalize}
.dp-nav{background:none;border:1px solid var(--line-2);color:var(--text);border-radius:7px;
  width:28px;height:30px;cursor:pointer;font-size:16px;line-height:1;flex:none}
.dp-nav:hover{border-color:var(--muted)}
.dp-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;font-size:10px;color:var(--muted);
  text-align:center;margin-bottom:3px;text-transform:capitalize}
.dp-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-day{height:30px;border:none;border-radius:6px;background:none;color:var(--text);cursor:pointer;font-size:12px}
.dp-day:hover{background:var(--gold-soft)}
.dp-day.today{outline:1px solid var(--line-2)}
.dp-day.sel{background:var(--gold);color:var(--accent-ink);font-weight:700}
.dp-empty{height:30px}
.dp-foot{display:flex;justify-content:space-between;margin-top:9px}
.dp-foot button{background:none;border:1px solid var(--line-2);color:var(--muted);border-radius:7px;
  padding:5px 11px;font-size:11px;cursor:pointer}
.dp-foot button:hover{color:var(--text);border-color:var(--muted)}
label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}
input,select{
  background:var(--bg-2);border:1px solid var(--line-2);color:var(--text);
  padding:9px 11px;border-radius:9px;font-size:13px;font-family:inherit;
}
input:focus,select:focus{outline:none;border-color:var(--gold)}
button[type=submit],.btn{
  background:linear-gradient(145deg,var(--gold),var(--gold-2));color:var(--accent-ink);border:none;
  padding:10px 18px;border-radius:9px;font-weight:600;cursor:pointer;font-size:13px;font-family:inherit;
}
button[type=submit]:hover,.btn:hover{filter:brightness(1.07)}
.btn-ghost{border:1px solid var(--line-2);background:transparent;color:var(--text);
  padding:9px 16px;border-radius:9px;cursor:pointer;font-size:13px;font-family:inherit}
.btn-ghost:hover{border-color:var(--muted)}
.inline{display:inline}

/* ---------- Flash ---------- */
.flash{padding:11px 16px;border-radius:10px;margin-bottom:16px;font-size:13px}
.flash.error{background:rgba(194,85,77,.15);border:1px solid rgba(194,85,77,.4);color:#f0a7a1}
.flash.success{background:rgba(126,196,107,.14);border:1px solid rgba(126,196,107,.4);color:#a9dd97}

/* ---------- Admin console ---------- */
/* One colour per role — each must be tellable apart at a glance */
.role-pill{font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;
  background:rgba(255,255,255,.06);color:var(--muted)}
.role-pill.admin{color:var(--gold);background:var(--gold-soft)}              /* or    */
.role-pill.office{color:#9bb7f3;background:rgba(91,141,239,.18)}             /* bleu  */
.role-pill.vto{color:#c4a5f7;background:rgba(167,139,250,.18)}               /* violet*/
.role-pill.crew{color:#9fd68c;background:rgba(126,196,107,.18)}              /* vert  */
.role-pill.owner{color:#6fd6c9;background:rgba(94,234,212,.16)}              /* turquoise */
.row-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.row-actions form{margin:0}
.btn-sm{font-size:12px;padding:5px 11px;border-radius:8px;border:1px solid var(--line-2);
  background:transparent;color:var(--text);cursor:pointer;font-family:inherit}
.btn-sm:hover{border-color:var(--muted)}
/* neutralize the global gold submit style for small in-row buttons
   (kept BEFORE the colored variants below so they still override it) */
.btn-sm[type=submit]{background:transparent;color:var(--text);border:1px solid var(--line-2);
  padding:5px 11px;border-radius:8px;font-weight:400;font-size:12px}
.btn-sm[type=submit]:hover{filter:none;border-color:var(--muted)}
.btn-sm.danger{background:#b3453d;border-color:#c2554d;color:#fff;font-weight:600}
.btn-sm.danger:hover{background:#c9564d;border-color:#d9675e}
.btn-sm.warn{background:#a3641f;border-color:#b57224;color:#fff;font-weight:600}
.btn-sm.warn:hover{background:#bb7526;border-color:#cc852f}
.btn-sm.approve{background:#2e7d4f;border-color:#37905c;color:#fff;font-weight:600}
.btn-sm.approve:hover{background:#37905c;border-color:#41a369}
/* admin row actions: Edit (blue) vs Archive (amber) — visually distinct */
.btn-sm.edit{color:#6db2ee;border-color:rgba(90,169,230,.45)}
.btn-sm.edit:hover{background:rgba(90,169,230,.15);border-color:#5aa9e6}
.btn-sm.arch{color:#e0a44b;border-color:rgba(224,164,75,.45)}
.btn-sm.arch:hover{background:rgba(224,164,75,.15);border-color:#e0a44b}
.admin-form{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;
  margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.admin-form label{flex:1;min-width:130px}
.admin-form label.full{flex:1 1 100%}
.admin-form input,.admin-form select{width:100%}
.admin-form.stacked{flex-direction:column;align-items:stretch;border-top:none;margin-top:0;padding-top:0}
.admin-form.stacked label{min-width:0}
.form-actions{display:flex;gap:10px;margin-top:8px}

/* ---------- Flight statistics + airframe ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat-cell{background:var(--bg-2);border:1px solid var(--line);border-radius:11px;padding:14px 16px}
.stat-lbl{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.stat-num{font-size:22px;font-weight:600;margin-top:4px}
.stat-sub{font-size:12px;color:var(--muted);margin-top:2px}
.airframe{display:flex;gap:34px;align-items:center;flex-wrap:wrap}
.af-metrics{display:flex;gap:30px}
.af-num{font-size:23px;font-weight:600}
.af-lbl{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.af-mx{flex:1;min-width:240px}
.af-mx-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:10px}
.af-due{font-weight:600;font-size:13px}
.af-due.ok{color:#7ec46b}.af-due.soon{color:#e0a44b}.af-due.urgent{color:#e0726b}
.af-bar{height:8px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.af-fill{height:100%;border-radius:6px;background:#5b8def}
.af-fill.soon{background:#e0a44b}.af-fill.urgent{background:#e0726b}
.eye{color:var(--muted);font-size:15px;text-decoration:none}
.eye:hover{color:var(--gold)}
.tbl.sortable th{cursor:pointer;user-select:none}
.tbl.sortable th:hover{color:var(--text)}
@media(max-width:880px){.stat-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- Login ---------- */
.login-wrap{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
.login-lang{position:absolute;top:22px;right:26px;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600}
.login-lang a{color:var(--muted);padding:3px 9px;border-radius:7px}
.login-lang a:hover{color:var(--text)}
.login-lang a.active{color:var(--gold);background:var(--gold-soft)}
.login-lang .sep{color:var(--line-2)}
.logo-plate{background:#fff;border-radius:14px;padding:16px 22px;margin-bottom:6px;
  box-shadow:0 6px 22px rgba(0,0,0,.28);display:flex;justify-content:center}
.logo-plate img{max-width:100%;height:auto;max-height:86px;display:block}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:34px 34px;width:100%;max-width:430px;box-shadow:var(--shadow)}
.login-card h1{font-size:20px;margin-top:20px;text-align:center}
.login-card .muted{text-align:center;margin:6px 0 22px}
.login-form{display:flex;flex-direction:column;gap:14px}
.login-form label{color:var(--muted)}
.login-form input{width:100%}
.login-form button{margin-top:6px;width:100%;padding:12px}
.demo-box{margin-top:24px;padding:16px;border:1px dashed var(--line-2);border-radius:12px;font-size:12px}
.demo-title{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.demo-box ul{margin:0 0 8px;padding-left:18px;color:#c7cedb}
.demo-box li{margin:3px 0}
.login-foot{margin-top:18px;font-size:11px;color:var(--muted);letter-spacing:1px;text-transform:uppercase}

/* ---------- Statement ---------- */
.statement-doc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
.stmt-head{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line-2)}
.stmt-brand{display:flex;flex-direction:column;gap:10px}
.stmt-brand img{height:40px;width:auto;background:#fff;padding:7px 13px;border-radius:9px;
  align-self:flex-start;box-shadow:0 3px 12px rgba(0,0,0,.2)}
.detail-title{margin:26px 0 10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-size:11px}
.stmt-foot{margin-top:22px;font-size:11px;text-align:center}

/* ---------- Responsive ---------- */
@media(max-width:880px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
  .sidebar{width:200px}
}

/* ---------- Print ---------- */
.print-only{display:none}
@media print{
  body{background:#fff;color:#111}
  .sidebar,.page-head .head-actions,.nav,.btn-ghost,.filters,.sarr,.fx-note{display:none!important}
  .print-only{display:block!important}
  .layout{display:block}
  .content{max-width:none;padding:0}
  h1,h2,h3,.b{color:#111!important}
  .muted{color:#555!important}
  .gold{color:#8a6d1a!important}
  .card{background:#fff!important;border:1px solid #ddd;box-shadow:none;break-inside:avoid;margin-bottom:14px}
  /* keep category colours on paper (coloured text + border, no printed background) */
  .chip{color:var(--c)!important;background:#fff!important;border:1px solid var(--c)!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .status{background:none!important;color:#333!important;border:1px solid #ccc}
  .tbl td,.tbl th{border-color:#ddd;color:#111}
  .tbl tbody tr:hover{background:none!important}
}

/* ---------- Multi-currency note + empty state ---------- */
.fx-note{margin:10px 2px 0;font-size:11.5px;color:var(--muted);font-style:italic}
.notice{display:flex;gap:16px;align-items:flex-start;
  border-left:3px solid var(--gold);background:linear-gradient(90deg,rgba(212,175,55,.07),transparent)}
.notice .notice-ico{font-size:22px;color:var(--gold);line-height:1.2}
.notice h2{margin:0 0 4px;font-size:15px}
.notice p{margin:0;max-width:70ch}

/* ---------- Receipt pages (multi-page capture) ---------- */
.page-list{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 4px}
.page-item{position:relative;width:96px;border:1px solid var(--line,#333);border-radius:8px;
  overflow:hidden;background:rgba(255,255,255,.03)}
.page-item img{display:block;width:96px;height:96px;object-fit:cover}
.page-item .page-pdf{display:flex;align-items:center;justify-content:center;width:96px;height:96px;
  font-size:13px;font-weight:600;color:var(--gold);letter-spacing:1px}
.page-item .page-cap{display:block;text-align:center;font-size:11px;color:var(--muted);padding:3px 0}
.page-actions{position:absolute;top:4px;right:4px;display:flex;gap:4px}
.page-btn{width:22px;height:22px;line-height:1;padding:0;border:none;border-radius:50%;
  background:rgba(0,0,0,.6);color:#fff;font-size:13px;cursor:pointer}
.page-btn:hover{background:rgba(0,0,0,.85)}
.page-del{background:rgba(150,30,30,.75)}
.page-del:hover{background:rgba(190,40,40,.95)}

.exported-summary{cursor:pointer;font-weight:600;font-size:15px;color:var(--gold);
  list-style:none;user-select:none;padding:2px 0}
.exported-summary::-webkit-details-marker{display:none}
details[open] .exported-summary{margin-bottom:4px}

/* ---------- Collapsible list cards (My Expenses) ---------- */
details.card.fold{padding:0}
.fold-head{cursor:pointer;user-select:none;list-style:none;
  display:flex;align-items:center;gap:8px;padding:16px 20px}
.fold-head::-webkit-details-marker{display:none}
.fold-head h2{margin:0}
.fold-head .chev{margin-left:auto;transition:transform .15s ease;color:var(--muted);font-size:13px}
details.fold[open] .fold-head .chev{transform:rotate(90deg)}
details.fold[open] .fold-head{border-bottom:1px solid var(--line)}
details.fold > :not(.fold-head){padding:0 20px 18px}
details.fold > table.tbl,details.fold > .tbl-scroll{padding:12px 20px 18px}
/* per-status colour: left accent + faint header tint */
details.card.fold{overflow:hidden;border-left:3px solid var(--fold,var(--line-2))}
.fold-draft{--fold:#9aa7bd}
.fold-draft > .fold-head{background:rgba(154,167,189,.08)}
/* Archives: muted slate, visually "put away" (distinct from the grey-blue Drafts) */
.fold-archived{--fold:#6b7280}
.fold-archived > .fold-head{background:rgba(107,114,128,.07)}
.fold-archived > .fold-head h2{opacity:.75}
.folder-dot.archived{background:#6b7280}
.fold-pending{--fold:#e0a04b}
.fold-rejected{--fold:#d98077}
.fold-approved{--fold:#7ec46b}
.fold-txns{--fold:#5b8def}
.fold-pending > .fold-head{background:rgba(224,160,75,.08)}
.fold-rejected > .fold-head{background:rgba(217,128,119,.08)}
.fold-approved > .fold-head{background:rgba(126,196,107,.08)}
.fold-txns > .fold-head{background:rgba(91,141,239,.08)}
.folder-dot.info{background:#5b8def}

/* ---------- Crew trigrams ---------- */
.crew-cell{white-space:nowrap}
.crew-tg{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.4px;
  padding:2px 6px;margin:1px;border-radius:5px;background:var(--line-2);color:#c7cedb;cursor:default}
/* Manually assigned crew: EXACTLY the footprint of a flown pill (dashed border is
   the only cue). The × is an overlay badge — zero width — shown on hover. */
button.crew-tg.manual{position:relative;cursor:pointer;font-family:inherit;
  font-size:10px;font-weight:700;letter-spacing:.4px;padding:1px 4px;margin:1px;
  border:1px dashed currentColor;border-radius:5px;line-height:inherit}
button.crew-tg.manual .x{position:absolute;top:-5px;right:-5px;width:12px;height:12px;
  line-height:12px;text-align:center;font-size:9px;font-weight:700;border-radius:50%;
  background:#d98077;color:#fff;opacity:0;transition:opacity .12s}
button.crew-tg.manual:hover{background:rgba(194,85,77,.20)!important;color:#d98077!important}
button.crew-tg.manual:hover .x{opacity:1}
/* function label (aircraft Edit page: one line per CPT / FO / other) */
.crew-role{display:inline-block;min-width:34px;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
/* read-only manual pill (Admin table): dashed border only, no × and not clickable */
span.crew-tg.manual{border:1px dashed currentColor;padding:1px 4px}

/* ---------- Note for the accountant (written by the submitter) ----------
   Amber/gold on purpose: NOT red (that's rejection) and NOT green (approval). */
.acct-note{margin-top:4px;font-size:11.5px;line-height:1.35;color:#e0a04b;
  background:rgba(224,160,75,.10);border-left:3px solid #e0a04b;
  border-radius:0 5px 5px 0;padding:4px 8px;max-width:340px}
.acct-note b{font-weight:700}
/* The same note, made unmissable at the top of the office/admin bill editor */
.acct-note-box{background:rgba(224,160,75,.10);border:1px solid rgba(224,160,75,.45);
  border-left:4px solid #e0a04b;border-radius:8px;padding:10px 14px;margin-bottom:16px}
.acct-note-head{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#e0a04b;margin-bottom:3px}
.acct-note-box p{margin:0;color:var(--text);white-space:pre-wrap}
/* The crew field itself, so it reads as "this goes to the accountant" */
.acct-note-field textarea{width:100%;resize:vertical;font-family:inherit;font-size:13px}
.acct-note-field textarea:focus{border-color:#e0a04b;outline:none}

/* ---------- Owner's fleet (Admin > Owners): the tails, not just a count ---------- */
.fleet-cell{white-space:normal;line-height:1.9}
.tail-chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.03em;
  padding:2px 7px;margin:1px 3px 1px 0;border-radius:5px;
  background:rgba(212,175,55,.14);color:var(--gold);border:1px solid rgba(212,175,55,.28)}
.tail-chip:hover{background:rgba(212,175,55,.28);color:#fff}
/* manually assigned (not flown): dashed outline, muted — same footprint */
.tail-chip.assigned{background:rgba(126,196,107,.12);color:#9fd68c;
  border:1px dashed rgba(126,196,107,.55)}
.tail-chip.assigned:hover{background:rgba(126,196,107,.26);color:#fff}

/* ---------- One section per card (a holder can have several) ---------- */
.card-fold{border-top:1px solid var(--line)}
.card-head-row{cursor:pointer;user-select:none;list-style:none;display:flex;align-items:center;
  gap:10px;padding:11px 20px;flex-wrap:wrap}
.card-head-row::-webkit-details-marker{display:none}
.card-head-row:hover{background:rgba(255,255,255,.03)}
.card-chip{font-weight:700;font-size:13px;letter-spacing:.02em;color:var(--text)}
.card-chip::before{content:'▸';display:inline-block;margin-right:7px;color:var(--muted);
  font-size:11px;transition:transform .15s ease}
details.card-fold[open] .card-chip::before{transform:rotate(90deg)}
details.card-fold > table.tbl,details.card-fold > p,details.card-fold > details{
  padding-left:20px;padding-right:20px}

/* ---------- History grouped by year (My Expenses) ---------- */
.year-fold{border-top:1px solid var(--line)}
.year-head{cursor:pointer;user-select:none;list-style:none;display:flex;align-items:center;
  gap:8px;padding:9px 20px}
.year-head::-webkit-details-marker{display:none}
.year-head:hover{background:rgba(255,255,255,.03)}
.year-label{font-weight:700;font-size:14px;letter-spacing:.04em}
.year-label::before{content:'▸';display:inline-block;margin-right:6px;color:var(--muted);
  font-size:11px;transition:transform .15s ease}
details.year-fold[open] .year-label::before{transform:rotate(90deg)}
.year-total{margin-left:auto;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}
details.year-fold > table.tbl{padding:0 20px 14px}
.crew-tg.cpt{background:rgba(212,175,55,.22);color:#e8cf72}
.crew-tg.fo{background:rgba(91,141,239,.22);color:#9bb7f3}
.crew-tg.fa{background:rgba(224,108,159,.22);color:#eaa1c2}

/* ---------- Expense claims (Phase 2) ---------- */
.nav-badge{display:inline-block;min-width:16px;text-align:center;font-size:10px;font-weight:700;
  padding:1px 5px;border-radius:9px;background:var(--gold);color:#1a1a1a;margin-left:4px}
.claim-st{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px}
.claim-st.draft{background:rgba(154,167,189,.18);color:#9aa7bd}
.claim-st.pending{background:rgba(224,138,75,.18);color:#e0a04b}
.claim-st.approved{background:rgba(126,196,107,.18);color:#7ec46b}
.claim-st.rejected{background:rgba(194,85,77,.20);color:#d98077}
.xero-note{font-size:10.5px;color:#e0a04b;margin-top:3px;font-weight:600;max-width:150px;line-height:1.3}
.recon-note{font-size:10.5px;color:var(--muted);margin-top:3px;line-height:1.3}
.folder-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:middle}
.folder-dot.draft{background:#9aa7bd}
.folder-dot.pending{background:#e0a04b}
.folder-dot.approved{background:#7ec46b}
.folder-dot.rejected{background:#d98077}

/* ---------- Admin table toolbar (search + filter) ---------- */
.admin-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 12px}
.admin-toolbar input,.admin-toolbar select{padding:7px 10px;border:1px solid var(--line-2);
  border-radius:8px;background:var(--bg);color:var(--text);font-size:13px}
.admin-toolbar input{min-width:220px}
.admin-toolbar input[type=date],.admin-toolbar input[type=search]:not(#fSearch){min-width:auto}
.admin-toolbar .fdate{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--muted)}
#fSearch{min-width:200px}

/* ---------- Flights: view toggle + calendar ---------- */
.view-toggle{display:inline-flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.vt-btn{padding:6px 12px;border:none;background:transparent;color:var(--muted);font-size:13px;cursor:pointer}
.vt-btn.active{background:var(--gold);color:#1a1a1a;font-weight:600}
.cal-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin:4px 0 12px}
.cal-nav{display:flex;align-items:center;gap:8px}
.cal-nav h2{margin:0;font-size:17px;text-transform:capitalize;min-width:160px;text-align:center}
.cal-legend{display:flex;gap:8px;flex-wrap:wrap}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-dow{font-size:11px;color:var(--muted);text-align:center;padding:2px 0;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.cal-day{min-height:120px;border:1px solid var(--line-2);border-radius:8px;padding:4px 5px;background:rgba(255,255,255,.02);overflow:hidden}
.cal-day.other{opacity:.35}
.cal-day.today{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.cal-daynum{font-size:11px;color:var(--muted);font-weight:600;margin-bottom:2px}
.cal-flight{display:block;font-size:10px;line-height:1.35;margin-top:3px;padding:3px 6px;border-radius:5px;
  border-left:3px solid #8a94a6;background:rgba(255,255,255,.05);overflow:hidden;
  color:var(--text);text-decoration:none}
.cal-flight:hover{background:var(--gold-soft)}
.cal-flight.owner{border-left-color:#5aa9e6}
.cal-flight.owner-charter{border-left-color:#3fb8a6}
.cal-flight.charter{border-left-color:var(--gold)}
.cal-flight.positioning{border-left-color:#8a94a6}
.cal-flight.training{border-left-color:#9d7ff0}
.cal-flight.technical{border-left-color:#e0885a}
.cf-top{display:flex;gap:6px;align-items:baseline}
.cf-route{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.cf-reg{font-size:9px;color:var(--muted);font-weight:600;flex:none}
.cf-meta{display:block;font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-more{font-size:10px;color:var(--muted);margin-top:2px;padding-left:5px}
@media (max-width:640px){
  .cal-day{min-height:78px;padding:3px}
  .cal-flight{font-size:8.5px;padding:2px 3px}
  .cf-meta{font-size:8px}
  .cal-nav h2{min-width:120px;font-size:15px}
}