/* =========================================================================
   Afghan Gateway — theme layer
   Adds the dark palette on top of app.css (which is fully token based), the
   three-way switcher, and a small set of motion primitives shared by every
   page. Loaded after app.css on both the public site and the app.
   ========================================================================= */

/* ---------------- dark palette ---------------- */
:root[data-theme="dark"]{
  --bg:#070B14;
  --bg-soft:#0A1120;
  --card:#0E1626;
  --ink:#EFF2F8;
  --ink-2:#D5DCEA;
  --muted:#9AA6BC;
  --muted-2:#78859C;
  --line:#1D2940;
  --line-2:#28364F;

  --brand-50:#2A1409;
  --brand-100:#3C1C0C;
  --brand-700:#FFB794;

  --amber-50:#2A1F0A;
  --emerald-50:#0B2A20;
  --rose-50:#2C1219;
  --sky-50:#0B2333;

  --shadow-xs:0 1px 2px rgba(0,0,0,.5);
  --shadow-sm:0 2px 10px -2px rgba(0,0,0,.55);
  --shadow:0 18px 40px -18px rgba(0,0,0,.75), 0 2px 8px -4px rgba(0,0,0,.5);
  --shadow-lg:0 50px 90px -40px rgba(0,0,0,.85);
}

:root[data-theme="dark"] body{background:var(--bg);color:var(--ink)}

/* surfaces that hard-code white in app.css */
:root[data-theme="dark"] :where(
  .btn-outline,.chip,.input,select.input,textarea.input,.lang-btn,.lang-menu,
  .console,.float-card,.tracker,.tk-card,.stat-strip,.svc-card,.step,.plan,
  .auth-wrap,.upload-card .u-icon,.top-search,.kpi,.seg button.active,
  .drawer-head,.drawer-foot,.modal,.palette,.notif-panel,.bid,.load-card,
  .quick button,.drawer,.req-row,.detail li,.mini,.cmp,.demo-code,.card,
  .tbl th,.table th,.dropdown,.sheet,.popover
){background:var(--card);border-color:var(--line);color:var(--ink)}

:root[data-theme="dark"] :where(.tbl tbody tr:hover,.table tbody tr:hover){background:#131E33}
:root[data-theme="dark"] :where(.input,select.input,textarea.input){background:#0B1322;border-color:var(--line-2);color:var(--ink)}
:root[data-theme="dark"] :where(.input,textarea.input)::placeholder{color:var(--muted-2)}
:root[data-theme="dark"] .btn-outline:hover{background:#152139;border-color:var(--line-2)}
:root[data-theme="dark"] .site-nav{
  background:rgba(7,11,20,.78);
  border-bottom-color:rgba(29,41,64,.9);
  box-shadow:0 10px 30px -24px rgba(0,0,0,.9)
}
:root[data-theme="dark"] :where(.hero,.dl-hero,.page-head,.foot){
  background-color:var(--bg)
}
:root[data-theme="dark"] :where(.foot,.site-footer){border-top-color:var(--line)}
:root[data-theme="dark"] .navbar .btn-outline,
:root[data-theme="dark"] .nav-links a[style]{background:rgba(255,255,255,.06)!important;color:var(--ink)!important}
:root[data-theme="dark"] .agw-theme{background:rgba(255,255,255,.06);border-color:var(--line-2)}
:root[data-theme="dark"] img[src$=".svg"]{filter:none}

/* ---- surfaces that still carried a light fill from app.css ----
   Each of these was hard-coded to white or an off-white, so in dark mode it
   glowed against the page and the text on it lost its contrast. */
:root[data-theme="dark"] .topbar{
  background:rgba(10,17,32,.86);border-bottom-color:var(--line)
}
:root[data-theme="dark"] .dl-nav{
  background:rgba(10,17,32,.9);border-bottom-color:var(--line)
}
:root[data-theme="dark"] :where(.top-search .kbd,.kbd){
  background:#0B1322;color:var(--muted-2);border-color:var(--line-2)
}
:root[data-theme="dark"] .live-pill{
  background:var(--emerald-50);color:#6EE7B7
}
:root[data-theme="dark"] .live-pill.off{
  background:var(--amber-50);color:#FCD34D
}
:root[data-theme="dark"] :where(.as-body,.as-foot){
  background:#0B1322;border-top-color:var(--line);color:var(--ink)
}
:root[data-theme="dark"] .as-foot{border-top-color:var(--line)}
:root[data-theme="dark"] :where(.ct-form-head,.tk-right){
  background:var(--card);color:var(--ink)
}
:root[data-theme="dark"] .ct-form-head{border-bottom-color:var(--line)}
:root[data-theme="dark"] :where(.sv-cmp,.sv-step,.sv-step .v,.sv-steps,.sheet){
  background:var(--card);color:var(--ink)
}
:root[data-theme="dark"] :where(.sv-cmp thead th,.cmp thead th,.tbl thead th,.table thead th){
  background:#131E33;color:var(--muted)
}
:root[data-theme="dark"] .ax-chip.off{
  background:#16203A;color:var(--muted-2);text-decoration-line-color:var(--muted-2)
}
:root[data-theme="dark"] .ax-chip.on{background:var(--emerald-50);color:#6EE7B7}
:root[data-theme="dark"] .ax-chip.read{background:var(--sky-50);color:#7DD3FC}
:root[data-theme="dark"] .ct-status{
  background:var(--card);color:var(--ink-2);border-color:var(--line-2)
}
:root[data-theme="dark"] .ct-status.open{background:var(--emerald-50);color:#6EE7B7;border-color:#1F6B4F}
:root[data-theme="dark"] :where(.tk-map-age,.tk-map-tag,.st){
  background:rgba(11,19,34,.82);color:var(--ink-2);border-color:var(--line-2)
}
:root[data-theme="dark"] :where(.tk,.tk-map){background:var(--bg-soft)}
:root[data-theme="dark"] .tl-dot{background:var(--bg-soft);border-color:var(--line-2);color:var(--muted-2)}
:root[data-theme="dark"] .tl-item.done .tl-dot{background:var(--emerald);border-color:var(--emerald);color:#fff}
:root[data-theme="dark"] :where(.vg-step,.vg-steps .v,.tk-card .v){background:var(--card);color:var(--ink)}
:root[data-theme="dark"] .chart .axis{fill:var(--muted-2)}
:root[data-theme="dark"] .skeleton-line{
  background:linear-gradient(90deg,#131E33,#1B2740,#131E33);background-size:200% 100%
}

/* avatars and brand tiles keep their own colour, but the initials inside
   must stay readable on the lighter brand gradients */
:root[data-theme="dark"] .av{text-shadow:0 1px 2px rgba(0,0,0,.45)}
:root[data-theme="dark"] :where(.oa,.ct-hero .oa){
  background:linear-gradient(140deg,#0F766E,#7C2D12)
}

/* ---------------- public page surfaces ----------------
   Several public pages carry their own inline styles, so they are named
   here rather than edited one by one in every page. Anything that was a
   white card in light mode becomes a dark card here. */
:root[data-theme="dark"] :where(
  .sv-panel,.sv-step-detail,.sv-tab,.ab-stat,.facts,.node,.val,.faq,
  .dept,.dept-btn,.ct-form,.ct-role,.ct-panel,.ct-fab,
  .ps-kpi,.ps-list,.ps-tabbar,.ps-tab,.pick,.pick-install,.pick-ios,
  .os-card,.nw-chip,.nw-card,.pr-card,.pr-feat,.tr-card,.sv-card
){background:var(--card);border-color:var(--line);color:var(--ink)}

/* the download page keeps an accent on the Android button, but the light
   gradient has to become a dark one */
:root[data-theme="dark"] .pick-android{
  background:linear-gradient(150deg,#2A1409,#121C2E);border-color:var(--brand)
}

/* province pills on the network page are inline-styled white */
:root[data-theme="dark"] span[style*="background:#fff"],
:root[data-theme="dark"] div[style*="background:#fff"],
:root[data-theme="dark"] section[style*="background:#fff"]{
  background:var(--card)!important;color:var(--ink)!important
}

/* status pills keep their tint but need a dark-mode ink */
:root[data-theme="dark"] :where(.st,.ps-kpi .st){color:#6EE7B7}
:root[data-theme="dark"] .st.warn{background:var(--amber-50);color:#FCD34D}

/* the WhatsApp button is a fixed brand colour — keep the white label */
:root[data-theme="dark"] .ct-fab{background:#128C4A;color:#fff}

/* ---------------- remaining page-level rules ----------------
   These live in the pages' own <style> blocks, so they are overridden by
   name here. Every one of them was a white or near-white panel. */
:root[data-theme="dark"] :where(.flow .node,.contact-line .ci,.auth-points .dot){
  background:var(--card);color:var(--ink);border-color:var(--line)
}
:root[data-theme="dark"] .contact-line .ci{background:var(--bg-soft)}
:root[data-theme="dark"] .auth-points .dot{background:var(--line-2)}
:root[data-theme="dark"] .dl-nav{background:rgba(10,17,32,.9);border-bottom-color:var(--line)}
:root[data-theme="dark"] .ps-map i{background:var(--line-2)}
:root[data-theme="dark"] .flow .node b{color:var(--ink)}
:root[data-theme="dark"] .flow .node span{color:var(--muted-2)}
:root[data-theme="dark"] :where(details,summary){background:var(--card);color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] .faq details[open]{background:var(--bg-soft)}

/* generic list pills and accordion items that default to white */
:root[data-theme="dark"] :where(
  .feat-list span,.strip span,.hero-pills span,.pill-row span,
  .services-strip span,.sv-tags span,.ps-tags span,details,summary,
  .sv-chips span,.tl2 .row2,.contact-line .ci,.ps-map i
){background:var(--card);color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] :where(
  .strip span,.feat-list span,.sv-tags span,.ps-tags span,.sv-chips span,
  .tl2 .row2,.ps-map i
){background:var(--bg-soft)}
:root[data-theme="dark"] :where(.plat-card,.plat-note){
  background:var(--card);color:var(--ink);border-color:var(--line)
}
:root[data-theme="dark"] :where(.plat-note,.plat-card p){color:var(--muted)}

/* the download page's status chips keep a tint but need dark-mode ink */
:root[data-theme="dark"] .ps-list :where(.st){color:#6EE7B7}
:root[data-theme="dark"] .ps-list :where(.st.hold){background:var(--amber-50);color:#FCD34D}

/* a light inline button on a dark page */
:root[data-theme="dark"] a.btn[style*="background:#fff"]{
  background:var(--card)!important;color:var(--ink)!important;border-color:var(--line-2)
}

/* the printable documents are white paper on purpose — they are printed,
   not read on screen, so they keep their light background */
@media screen{
  :root[data-theme="dark"] :where(.sheet,.sheet.customer,body:has(.sheet)){
    background:#0B1220;color:var(--ink)
  }
  :root[data-theme="dark"] .sheet{
    background:#F7F8FB!important;color:#0B1020!important;border-color:#D7DCE8!important
  }
  :root[data-theme="dark"] .sheet.customer{background:#FFFCFA!important}
  :root[data-theme="dark"] .sheet .k,:root[data-theme="dark"] .sheet .muted{
    color:#667085!important
  }
  :root[data-theme="dark"] .sheet .v{color:#0B1020!important}
}

/* ---------------- switcher ---------------- */
.agw-theme{
  display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;
  border:1px solid var(--line);background:color-mix(in srgb,var(--card) 78%,transparent);
  backdrop-filter:blur(10px);flex:none
}
.agw-theme button{
  width:30px;height:30px;border:0;border-radius:999px;background:transparent;color:var(--muted);
  display:grid;place-items:center;cursor:pointer;transition:background .18s,color .18s,transform .18s
}
.agw-theme button svg{width:15px;height:15px}
.agw-theme button:hover{color:var(--ink);transform:translateY(-1px)}
.agw-theme button.on{background:var(--brand);color:#fff;box-shadow:0 8px 18px -10px rgba(232,85,28,.9)}
.topbar .agw-theme{margin-inline-start:6px}
@media (max-width:560px){ .agw-theme button{width:27px;height:27px} }

/* the hidden attribute must beat .field{display:flex} — sign-in shows only
   phone and password, nothing else */
[hidden]{display:none!important}

/* ---------------- shared motion ---------------- */
@media (prefers-reduced-motion:no-preference){
  .reveal-up{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
  .reveal-up.in{opacity:1;transform:none}
  .lift{transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,border-color .28s}
  .lift:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* scroll progress */
.agw-progress{position:fixed;top:0;inset-inline-start:0;height:2px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--brand),#F59E0B);box-shadow:0 0 12px rgba(232,85,28,.6);pointer-events:none}

/* ---------------- three-phase parcel wizard + driver scan ---------------- */
.wiz-steps{display:flex;gap:6px;padding:12px 18px 0;flex-wrap:wrap}
.wiz-step{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;color:var(--muted);
  padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:var(--bg-soft);transition:.2s}
.wiz-step .wiz-num{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;
  background:var(--line-2);color:var(--ink);font-size:10px;font-weight:800}
.wiz-step.on{color:var(--ink);border-color:var(--brand);background:var(--brand-50)}
.wiz-step.on .wiz-num{background:var(--brand);color:#fff}
.wiz-pane{padding-top:4px}
.wiz-lead{margin-bottom:14px}
.wiz-lead h4{margin:0 0 4px;font-size:14px;letter-spacing:-.01em}
.wiz-lead p{margin:0}
.dispatch-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.dispatch-grid{grid-template-columns:1fr}}
.dispatch-card{display:flex;gap:11px;align-items:flex-start;cursor:pointer;padding:14px;
  border:1.5px solid var(--line);border-radius:14px;background:var(--card);transition:.18s}
.dispatch-card:hover{border-color:var(--brand);transform:translateY(-1px)}
.dispatch-card.on{border-color:var(--brand);background:var(--brand-50);box-shadow:0 0 0 3px var(--brand-50)}
.dispatch-card input[type=radio]{margin-top:2px;flex:0 0 auto;width:18px;height:18px}
.dispatch-card .muted{color:var(--muted);line-height:1.45;margin-top:4px}
:root[data-theme="dark"] .wiz-step.on{background:var(--brand-50);color:var(--ink)}
:root[data-theme="dark"] .dispatch-card{background:var(--card)}
:root[data-theme="dark"] .dispatch-card.on{background:var(--brand-50)}