/* P5 App System — shared design tokens + components for the admin, driver
   and partner portals. Loaded for /admin, /driver and /partner paths only
   (see inc/head.php) — the marketing site keeps its own main.css/components.css
   untouched, so these generic class names (.btn, .card, .table, …) never
   collide with the public-site skin.

   This is the base layer: assets/css/admin-v2.css loads AFTER this file on
   /admin pages and can override/extend anything here. */

:root{
  /* ---- Status colors — canonical vocabulary shared by dispatch board,
     status chips/badges, and anywhere a job/booking status needs a color.
     Names match the semantic slots used across the app: grey (idle/pending),
     blue (dispatched/info), amber (in-progress/warn), green (good/onboard),
     green-dark (completed), red (cancelled/danger).
     status-blue is deliberately desaturated (58%, was 82%) — the only cool
     hue in an otherwise warm gold/espresso system; kept recognizably blue
     for the "info" semantic but restrained to match the rest of the palette. */
  --status-grey:#71717A;      --status-grey-bg:rgba(113,113,122,.12);      --status-grey-border:rgba(113,113,122,.35);
  --status-blue:#6F93D9;      --status-blue-bg:rgba(111,147,217,.12);      --status-blue-border:rgba(111,147,217,.35);
  --status-amber:#C9A227;     --status-amber-bg:rgba(201,162,39,.12);      --status-amber-border:rgba(201,162,39,.35);
  --status-green:#22C55E;     --status-green-bg:rgba(34,197,94,.12);       --status-green-border:rgba(34,197,94,.35);
  --status-green-dark:#1F7A4C;--status-green-dark-bg:rgba(31,122,76,.14);  --status-green-dark-border:rgba(31,122,76,.35);
  --status-red:#B5533F;       --status-red-bg:rgba(181,83,63,.12);         --status-red-border:rgba(181,83,63,.35);

  /* ---- Base palette — reuses the marketing site's actual espresso/graphite
     scale (main.css) rather than a separate neutral grey, so the driver and
     partner portals are literally the same warm dark ground as the public
     site, not a generic charcoal-dashboard look. Extended two steps warmer
     for the two border tiers, following the same ratio as --slate. */
  --app-bg:#17130f; --app-bg2:#211d18; --app-card:#2a251f; --app-card2:#35302a;
  --app-border:#3f3a34; --app-border2:#4a453f;
  --app-text:#D4CFC4; --app-text2:#9E9689; --app-text3:#7A7265;
  --app-accent:#C9A96E; --app-accent-hover:#D4B87A; --app-accent-bg:rgba(201,169,110,.1);

  /* ---- Spacing scale ---- */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-7:2.5rem; --space-8:3rem;

  /* ---- Type scale ---- */
  --text-xs:.68rem; --text-sm:.75rem; --text-base:.8125rem; --text-lg:.95rem;
  --text-xl:1.15rem; --text-2xl:1.5rem;

  /* ---- Radius scale — matches main.css's sharp-editorial scale exactly
     (was 4/8/12, silently different from the public site's 2/4/8 despite
     using the same token names). ---- */
  --radius-sm:2px; --radius-md:4px; --radius-lg:8px; --radius-full:999px;

  /* ---- Shadow scale — warm-tinted rgba(10,7,4,α), matching main.css's
     "never harsh black" elevation principle (was flat rgba(0,0,0,α)). ---- */
  --shadow-sm:0 1px 2px rgba(10,7,4,.18);
  --shadow-md:0 4px 14px -6px rgba(10,7,4,.32);
  --shadow-lg:0 12px 40px rgba(10,7,4,.42);
}

:focus-visible { outline:2px solid var(--app-accent); outline-offset:2px; border-radius:1px; }

/* ==== Buttons ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  padding:.5rem .9rem;border:1px solid transparent;border-radius:var(--radius-md);
  font:600 var(--text-sm)/1 'DM Sans',sans-serif;letter-spacing:.02em;cursor:pointer;
  text-decoration:none;white-space:nowrap;transition:background .15s ease,border-color .15s ease,color .15s ease,opacity .15s ease}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--app-accent);color:#1C1C1C;border-color:var(--app-accent)}
.btn-primary:hover{background:var(--app-accent-hover);border-color:var(--app-accent-hover)}
.btn-secondary{background:var(--app-card);color:var(--app-text);border-color:var(--app-border2)}
.btn-secondary:hover{background:var(--app-card2);border-color:var(--app-text3)}
.btn-danger{background:transparent;color:var(--status-red);border-color:var(--status-red-border)}
.btn-danger:hover{background:var(--status-red-bg)}
.btn-ghost{background:transparent;color:var(--app-text2);border-color:var(--app-border)}
.btn-ghost:hover{background:var(--app-card);color:var(--app-text)}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn-sm{padding:.28rem .55rem;font-size:var(--text-xs)}
.btn-lg{padding:.7rem 1.2rem;font-size:var(--text-lg)}

/* ==== Cards ============================================================== */
.card{background:var(--app-card);border:1px solid var(--app-border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:var(--space-4)}
.card-header{padding:var(--space-3) var(--space-4);display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--app-border);background:var(--app-bg2)}
.card-header h2,.card-header h3{font-size:var(--text-sm);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--app-text2)}
.card-body{padding:var(--space-4)}
.card-footer{padding:var(--space-3) var(--space-4);border-top:1px solid var(--app-border);background:var(--app-bg2)}

/* ==== Tables ============================================================= */
.table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.table th{text-align:left;font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;
  color:var(--app-text3);font-weight:600;padding:.5rem .7rem;border-bottom:1px solid var(--app-border)}
.table td{padding:.5rem .7rem;border-bottom:1px solid var(--app-border);color:var(--app-text)}
.table tbody tr:hover{background:var(--app-card2)}
.table.table-zebra tbody tr:nth-child(even){background:var(--app-bg2)}
.table tbody tr:last-child td{border-bottom:none}

/* ==== Forms =============================================================== */
.form-group{margin-bottom:var(--space-3)}
.form-label{display:block;font-size:var(--text-xs);letter-spacing:.04em;text-transform:uppercase;
  color:var(--app-text2);font-weight:600;margin-bottom:.2rem}
.form-input,.form-select,.form-textarea{width:100%;background:var(--app-bg2);border:1px solid var(--app-border);
  border-radius:var(--radius-md);color:var(--app-text);padding:.5rem .65rem;font-size:var(--text-base);
  font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--app-accent);box-shadow:0 0 0 2px var(--app-accent-bg)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--app-text3)}
.form-textarea{resize:vertical;min-height:5rem}
.form-hint{font-size:var(--text-xs);color:var(--app-text3);margin-top:.15rem}

/* ==== Nav / sidebar items ================================================= */
.nav-item{display:flex;align-items:center;gap:.5rem;padding:.45rem .55rem;border-radius:var(--radius-sm);
  color:var(--app-text2);text-decoration:none;font-size:var(--text-sm);transition:background .1s ease,color .1s ease}
.nav-item:hover{background:var(--app-card);color:var(--app-text)}
.nav-item.active{background:var(--app-accent-bg);color:var(--app-accent);font-weight:600}

/* ==== Status chips / badges =============================================== */
.status-chip,.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.15rem .55rem;
  border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;line-height:1.5;white-space:nowrap}
.status-chip--grey,.badge--grey{background:var(--status-grey-bg);color:var(--status-grey)}
.status-chip--blue,.badge--blue{background:var(--status-blue-bg);color:var(--status-blue)}
.status-chip--amber,.badge--amber{background:var(--status-amber-bg);color:var(--status-amber)}
.status-chip--green,.badge--green{background:var(--status-green-bg);color:var(--status-green)}
.status-chip--green-dark,.badge--green-dark{background:var(--status-green-dark-bg);color:var(--status-green-dark)}
.status-chip--red,.badge--red{background:var(--status-red-bg);color:var(--status-red)}

/* ==== Alerts / flash messages ============================================= */
.alert{display:flex;align-items:center;gap:.5rem;padding:.6rem .85rem;border-radius:var(--radius-md);
  font-size:var(--text-sm);border:1px solid transparent;margin-bottom:var(--space-3)}
.alert-success{background:var(--status-green-bg);color:var(--status-green);border-color:var(--status-green-border)}
.alert-error{background:var(--status-red-bg);color:var(--status-red);border-color:var(--status-red-border)}
.alert-warning{background:var(--status-amber-bg);color:var(--status-amber);border-color:var(--status-amber-border)}
.alert-info{background:var(--status-blue-bg);color:var(--status-blue);border-color:var(--status-blue-border)}

/* ==== Small spacing/layout utilities used by the inline-style migration === */
.u-flex{display:flex}
.u-flex-center{display:flex;align-items:center}
.u-flex-between{display:flex;align-items:center;justify-content:space-between}
.u-flex-wrap{flex-wrap:wrap}
.u-gap-1{gap:var(--space-1)} .u-gap-2{gap:var(--space-2)} .u-gap-3{gap:var(--space-3)} .u-gap-4{gap:var(--space-4)}
.u-mt-1{margin-top:var(--space-1)} .u-mt-2{margin-top:var(--space-2)} .u-mt-3{margin-top:var(--space-3)} .u-mt-4{margin-top:var(--space-4)}
.u-mb-1{margin-bottom:var(--space-1)} .u-mb-2{margin-bottom:var(--space-2)} .u-mb-3{margin-bottom:var(--space-3)} .u-mb-4{margin-bottom:var(--space-4)}
.u-text-center{text-align:center} .u-text-right{text-align:right}
.u-w-full{width:100%}
.u-ml-auto{margin-left:auto}
.u-hidden{display:none}
.u-inline{display:inline}
.u-cursor-pointer{cursor:pointer}
.u-nowrap{white-space:nowrap}