/* Private Tunisia — back office
   Palette inherited from 3a-rentcar index.php (navy / cyan). */

:root{
  --navy:#0f172a; --brand:#1e3a5f; --brand-ink:#0f1a2e;
  --accent:#06b6d4; --accent-dark:#0891b2; --accent-light:#67e8f9;
  --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; --line-soft:#f1f5f9;
  --bg-soft:#f8fafc; --white:#fff;
  --ok:#059669; --warn:#d97706; --danger:#dc2626;
  --radius:10px; --shadow:0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
}

*{box-sizing:border-box}
body{margin:0;font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg-soft)}
a{color:var(--accent-dark);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .5rem;line-height:1.25;color:var(--brand-ink)}
h1{font-size:1.5rem}h2{font-size:1.15rem}h3{font-size:1rem}

/* ── Chrome ─────────────────────────────────────── */
.topbar{display:flex;align-items:center;gap:1.25rem;background:var(--brand);color:#fff;padding:0 1.25rem;height:56px;position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:.55rem;color:#fff;font-weight:700;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--accent);color:var(--brand-ink);font-size:.8rem;font-weight:800}
.mainnav{display:flex;gap:.15rem;flex:1;overflow-x:auto}
.mainnav a{color:#cbd5e1;padding:.45rem .7rem;border-radius:7px;font-size:.9rem;white-space:nowrap}
.mainnav a:hover{background:rgba(255,255,255,.09);color:#fff;text-decoration:none}
.mainnav a.on{background:var(--accent);color:var(--brand-ink);font-weight:600}
.userbox{display:flex;align-items:center;gap:.6rem}

/* Menu button — mobile only (see the ≤760px block). */
.navtoggle{display:none;background:rgba(255,255,255,.12);border:0;border-radius:8px;
           width:44px;height:44px;cursor:pointer;padding:0;place-items:center}
.navtoggle-bars,.navtoggle-bars::before,.navtoggle-bars::after{
  display:block;width:18px;height:2px;background:#fff;border-radius:2px;content:'';position:relative}
.navtoggle-bars::before{top:-6px}
.navtoggle-bars::after{top:4px}
.navextra{display:none}
.uname{display:flex;flex-direction:column;line-height:1.15;font-size:.82rem;color:#e2e8f0;text-align:right}
.uname em{font-style:normal;font-size:.7rem;color:var(--accent-light);text-transform:uppercase;letter-spacing:.03em}
.wrap{max-width:1280px;margin:0 auto;padding:1.4rem 1.25rem 3rem}
.botfoot{text-align:center;color:var(--muted);font-size:.78rem;padding:1.25rem}

.pagehead{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.pageactions{display:flex;gap:.5rem;flex-wrap:wrap}

/* ── Cards & stats ──────────────────────────────── */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.1rem;margin-bottom:1.1rem}
.card>h2{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:1rem;margin-bottom:.85rem;padding-bottom:.6rem;border-bottom:1px solid var(--line-soft)}
.grid{display:grid;gap:1.1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

.stat{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius);padding:.9rem 1rem;box-shadow:var(--shadow)}
.stat .k{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
.stat .v{font-size:1.65rem;font-weight:700;color:var(--brand-ink);line-height:1.2;margin-top:.15rem}
.stat .s{font-size:.78rem;color:var(--muted)}
.stat.alert{border-left-color:var(--danger)}
.stat.warn{border-left-color:var(--warn)}

/* ── Tables ─────────────────────────────────────── */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;padding:.5rem .6rem;border-bottom:2px solid var(--line)}
td{padding:.6rem;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tbody tr:hover{background:var(--bg-soft)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.ref{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-weight:600;font-size:.84rem}
.sub{display:block;font-size:.76rem;color:var(--muted)}
.empty{text-align:center;color:var(--muted);padding:2rem 1rem}

/* ── Badges ─────────────────────────────────────── */
.badge{display:inline-block;padding:.2rem .5rem;border-radius:999px;font-size:.72rem;font-weight:600;white-space:nowrap}
.st-new{background:#e0f2fe;color:#0369a1}
.st-quoted{background:#ede9fe;color:#6d28d9}
.st-confirmed{background:#dcfce7;color:#15803d}
.st-assigned{background:#cffafe;color:#0e7490}
.st-progress{background:#fef3c7;color:#b45309}
.st-done{background:var(--line-soft);color:var(--muted)}
.st-cancelled{background:#fee2e2;color:#b91c1c}
.pay-unpaid{background:#fee2e2;color:#b91c1c}
.pay-deposit{background:#fef3c7;color:#b45309}
.pay-paid{background:#dcfce7;color:#15803d}
.pay-refunded{background:var(--line-soft);color:var(--muted)}
.tag{display:inline-block;padding:.15rem .45rem;border-radius:5px;background:var(--line-soft);color:var(--muted);font-size:.72rem;font-weight:600}

/* ── Forms & buttons ────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .9rem;border-radius:8px;border:1px solid transparent;background:var(--accent);color:var(--brand-ink);font-weight:600;font-size:.86rem;cursor:pointer;line-height:1.2}
.btn:hover{background:var(--accent-dark);color:#fff;text-decoration:none}
.btn-sm{padding:.32rem .6rem;font-size:.78rem}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-line{background:var(--white);border-color:var(--line);color:var(--brand)}
.btn-line:hover{background:var(--bg-soft);border-color:var(--accent);color:var(--brand)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#b91c1c;color:#fff}

label{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:.25rem}
input,select,textarea{width:100%;padding:.5rem .6rem;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:.88rem;background:var(--white);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-light);outline-offset:-1px;border-color:var(--accent)}
textarea{min-height:80px;resize:vertical}
.field{margin-bottom:.85rem}
.formgrid{display:grid;gap:0 .9rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.filters{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:1rem}
.filters .field{margin-bottom:0;min-width:140px}
fieldset{border:0;padding:0;margin:0 0 1rem}
legend{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-dark);padding:0 0 .5rem}

/* ── Flash ──────────────────────────────────────── */
.flash{padding:.7rem 1rem;border-radius:8px;margin-bottom:1.1rem;font-size:.88rem;font-weight:500}
.flash-ok{background:#dcfce7;color:#15803d;border:1px solid #86efac}
.flash-err{background:#fee2e2;color:#b91c1c;border:1px solid #fca5a5}
.flash-warn{background:#fef3c7;color:#b45309;border:1px solid #fcd34d}

/* ── Login ──────────────────────────────────────── */
.loginpage{display:grid;place-items:center;min-height:100vh;background:linear-gradient(160deg,var(--brand-ink),var(--brand))}
.loginbox{background:var(--white);border-radius:14px;padding:2rem;width:min(380px,92vw);box-shadow:0 20px 45px rgba(0,0,0,.3)}
.loginbox .brand-mark{width:46px;height:46px;font-size:1.15rem;margin:0 auto .75rem}
.loginbox h1{text-align:center;font-size:1.2rem;margin-bottom:1.35rem}
.loginbox .btn{width:100%;justify-content:center;margin-top:.35rem}

/* ── Dispatch ───────────────────────────────────── */
.daynav{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;flex-wrap:wrap}
.daynav .today{font-weight:700;color:var(--brand-ink)}
.conflict{background:#fee2e2;border-left:3px solid var(--danger);padding:.5rem .7rem;border-radius:6px;font-size:.82rem;color:#b91c1c;margin-top:.4rem}

/* ══════════════════════════════════════════════════
   MOBILE  (≤760px)
   A phone cannot show an 8-column table — the catalogue is 680px wide in a
   313px window. Below this breakpoint every row becomes a labelled card.
   ══════════════════════════════════════════════════ */
@media (max-width:760px){

  /* ── Chrome ─────────────────────────────────── */
  /* Not sticky on a phone: the bar needs two rows here, and surrendering
     ~150px of an 812px screen permanently costs more than scrolling up. */
  .topbar{position:static;height:auto;flex-wrap:wrap;padding:.55rem .8rem;gap:.5rem}
  .brand{font-size:.95rem}
  /* flex:0 0 100% — not width:100%. The desktop rule sets flex:1, whose 0%
     basis wins over width in a flex container, leaving the nav squeezed to
     ~40px on the first line instead of wrapping onto its own.
     Wrapping beats horizontal scrolling: all eight destinations stay visible
     instead of five hiding off the right edge. */
  /* Collapsed by default. Eight items wrap to three rows — 211px of header on
     every page — so the nav hides behind the menu button and opens on demand.
     Header drops to ~64px; the full menu is one tap away. */
  .navtoggle{display:grid}
  .mainnav{order:3;flex:0 0 100%;width:100%;flex-wrap:wrap;overflow:visible;gap:.3rem;display:none}
  .mainnav.open{display:flex}
  .mainnav a{flex:1 1 45%;justify-content:center;padding:.55rem .7rem;
             font-size:.84rem;min-height:44px;display:flex;align-items:center;
             background:rgba(255,255,255,.08)}
  /* Name + role + Quitter push the bar onto a second row. Both live in the
     menu instead, so the collapsed header stays a single ~64px row. */
  .userbox{display:none}
  .mainnav .navextra{display:flex;flex:1 1 45%;justify-content:center;
                     padding:.55rem .7rem;min-height:44px;align-items:center;
                     font-size:.84rem;background:rgba(255,255,255,.05);
                     border:1px solid rgba(255,255,255,.18)}
  .mainnav .navextra-out{color:#fecaca;border-color:rgba(254,202,202,.3)}
  .wrap{padding:.9rem .7rem 2.5rem}
  .pagehead{gap:.6rem}
  h1{font-size:1.25rem}
  .card{padding:.85rem .8rem}

  /* Two stats per row beats four stacked screens of scrolling. */
  .g4{grid-template-columns:1fr 1fr;gap:.6rem}
  .g2{grid-template-columns:1fr}
  .stat{padding:.7rem .75rem}
  .stat .v{font-size:1.35rem}
  .stat .k{font-size:.66rem}

  /* ── Tables become cards ────────────────────── */
  .tablewrap{overflow-x:visible}
  table{display:block;font-size:.9rem}
  thead{display:none}
  tbody{display:block}

  tbody tr{
    display:block;
    border:1px solid var(--line);
    border-left:3px solid var(--accent);
    border-radius:9px;
    padding:.5rem .7rem;
    margin-bottom:.6rem;
    background:var(--white);
  }
  tbody tr:hover{background:var(--white)}

  tbody td{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:.9rem;
    padding:.28rem 0;
    border:0;
    border-bottom:1px solid var(--line-soft);
  }
  tbody td:last-child{border-bottom:0}

  tbody td::before{
    content:attr(data-label);
    flex:0 0 auto;
    max-width:45%;
    font-size:.68rem;
    text-transform:uppercase;
    letter-spacing:.04em;
    font-weight:600;
    color:var(--muted);
  }

  .cv{text-align:right;min-width:0;overflow-wrap:anywhere}
  .cv .sub{display:block}

  /* Action columns have no header: buttons share the width side by side
     rather than stacking, which keeps the card noticeably shorter. */
  tbody td:not([data-label]){padding-top:.5rem}
  tbody td:not([data-label])::before{display:none}
  tbody td:not([data-label]) .cv{display:flex;gap:.4rem;width:100%}
  tbody td:not([data-label]) .cv > *{flex:1 1 0;min-width:0}
  tbody td:not([data-label]) .cv .btn{width:100%;justify-content:center}
  tbody td:not([data-label]) .cv form{display:flex}

  /* An empty cell would otherwise render as a stray label. */
  tbody td:has(.cv:empty){display:none}

  /* ── Touch targets & iOS zoom ───────────────── */
  /* Anything under 16px makes iOS Safari zoom the page on focus, which then
     leaves the user panning around a magnified form. */
  input,select,textarea{font-size:16px;padding:.6rem .65rem;min-height:44px}
  textarea{min-height:88px}
  input[type=checkbox]{min-height:0;width:20px;height:20px}
  /* 44px is the accessible minimum for a touch target; the desktop .btn-sm
     is 40px, which is a miss on a phone. */
  .btn{padding:.65rem 1rem;min-height:44px}
  .btn-sm{padding:.5rem .7rem;font-size:.82rem;min-height:44px}

  /* ── Forms & filters ────────────────────────── */
  .filters{flex-direction:column;align-items:stretch;gap:.5rem}
  .filters .field{min-width:0;width:100%}
  .filters .btn{width:100%;justify-content:center}
  .formgrid{grid-template-columns:1fr;gap:0}
  .daynav{gap:.4rem}
  .daynav .btn{flex:1;justify-content:center}

  .loginbox{padding:1.5rem 1.25rem}
}

/* Very narrow phones only (SE-class, <360px): side-by-side gets too cramped,
   so labels move above their values. Kept below 375 deliberately — on a normal
   iPhone, side-by-side halves the card height and stays readable. */
@media (max-width:359px){
  .g4{grid-template-columns:1fr}
  tbody td{flex-direction:column;align-items:stretch;gap:.1rem}
  tbody td::before{max-width:100%}
  .cv{text-align:left}
}