/* PLNA — the bridge onto the HAF brand.
 *
 * PLNA is the biggest rescue of the five. It was built dark-first: the dark
 * palette sat in :root as the default and a [data-theme="light"] block painted
 * over it. The network is the other way round — day is what everyone gets
 * unless they ask for night — so this file makes day the base and night the
 * exception, without touching a single line of the app's own stylesheet.
 *
 * PLNA spelled its two themes "light" and "dark"; the network says day and
 * night. Both spellings are honoured, so an old bookmark or a saved setting
 * still lands somewhere sensible.
 *
 * Loaded AFTER the page's own <style>, so these win.
 */

/* ---- day: the base, whatever the page was built expecting --------------- */
:root,
:root[data-theme="light"],
:root[data-theme="day"] {
  --orange:      var(--haf-orange);
  /* orange as small text needs the readable tone, not the fill tone */
  --orange-text: var(--haf-orange-ink);
  --orange-2:    var(--haf-orange);

  --bg:          var(--haf-bg);
  --panel:       var(--haf-surface-2);
  --panel-2:     var(--haf-surface-3);
  --text:        var(--haf-ink);
  --muted:       var(--haf-ink-muted);

  --line:        var(--haf-line);
  --line-strong: var(--haf-line-strong);

  --shadow:      var(--haf-shadow);
  --soft-shadow: var(--haf-shadow-soft);
  /* the button glow was a third orange in disguise — same hue, held back */
  --btn-shadow:  0 10px 28px rgba(241, 142, 0, .22);

  --font:        var(--haf-font);
  --display:     var(--haf-font-display);
}

/* ---- night ------------------------------------------------------------- */
:root[data-theme="night"],
:root[data-theme="dark"] {
  --orange-text: var(--haf-orange-ink);
  --bg:          var(--haf-bg);
  --panel:       var(--haf-surface);
  --panel-2:     var(--haf-surface-2);
  --text:        var(--haf-ink);
  --muted:       var(--haf-ink-muted);
  --line:        var(--haf-line);
  --line-strong: var(--haf-line-strong);
}

/* PLNA still writes "dark" in a couple of places. Tell the brand kit that
   "dark" means night, so the whole palette flips rather than half of it. */
:root[data-theme="dark"] {
  --haf-orange-ink:    #f9a63a;
  --haf-bg:            #0e1113;
  --haf-surface:       #171a1d;
  --haf-surface-2:     #202428;
  --haf-surface-3:     #262b30;
  --haf-ink:           #f4f1eb;
  --haf-ink-muted:     #a9b0b4;
  --haf-ink-faint:     #6b747b;
  --haf-line:          rgba(244, 241, 235, .14);
  --haf-line-strong:   rgba(244, 241, 235, .24);
  --haf-line-xstrong:  rgba(244, 241, 235, .32);
  --haf-bar:           rgba(14, 17, 19, .92);
  --haf-positive:      #6fa87a;
  --haf-caution:       #d8a34d;
  --haf-negative:      #d9695f;
  --haf-positive-wash: rgba(111, 168, 122, .14);
  --haf-caution-wash:  rgba(216, 163, 77, .14);
  --haf-negative-wash: rgba(217, 105, 95, .14);
  --haf-badge-fill:    #f4f1eb;
  --haf-badge-mark:    #2f373e;
  --haf-shadow:        0 28px 80px rgba(0, 0, 0, .45);
  --haf-shadow-soft:   0 14px 36px rgba(0, 0, 0, .32);
  color-scheme: dark;
}

body { font-family: var(--haf-font); }

/* ---- the bar across the top -------------------------------------------- */
/* The app painted the bar a fixed near-black and then repainted it for its
   own light theme. Both are gone: it now takes the theme's own glass. */
:root .topbar,
:root[data-theme] .topbar,
:root .page-head,
:root[data-theme] .page-head {
  background: var(--haf-bar);
  border-bottom: 1px solid var(--haf-line);
}

/* ---- the logo ---------------------------------------------------------- */
/* Every PLNA screen drew an orange rounded square with "PL" set inside it.
   That was never the logo. The badge goes in its place, at the size the
   square used to be, and takes the theme with it. */
.brand .haf-logo        { height: 48px; flex-shrink: 0; }
.topbar-logo .haf-logo  { height: 34px; flex-shrink: 0; }
.brand .haf-logo svg,
.topbar-logo .haf-logo svg { height: 100%; width: auto; display: block; }
@media (max-width: 480px) {
  .brand .haf-logo { height: 40px; }
}

.brand-name, .topbar-logo-text, .driver-name {
  font-family: var(--haf-font-display);
  color: var(--haf-ink);
}
.brand-name span, .topbar-logo-text span { color: var(--haf-orange-ink); }

/* ---- anything sitting on the orange ------------------------------------ */
/* The app set its near-black on top of orange, which reads as a fourth brand
   colour and fails contrast at small sizes. White, per the brand sheet. */
.btn-primary, .avatar, .driver-avatar { color: #ffffff; }

/* ---- status colours ---------------------------------------------------- */
/* Six hand-picked colours across the app — two greens, two ambers, a red and
   a blue — none of them from any guideline. They become the one status set
   the whole network uses, and the blue becomes the HAF grey, because there
   is no blue in the brand. */
.chip-ok, .chip-delivered, .success-banner {
  background: var(--haf-positive-wash);
  border-color: var(--haf-positive);
  color: var(--haf-positive);
}
.chip-ok::before, .chip-delivered::before { background: var(--haf-positive); }

.chip-pending, .chip-orange, .chip-assigned {
  background: var(--haf-caution-wash);
  border-color: var(--haf-caution);
  color: var(--haf-caution);
}
.chip-pending::before { background: var(--haf-caution); }
.chip-assigned::before, .chip-orange::before { background: var(--haf-orange); }

.error-banner {
  background: var(--haf-negative-wash);
  border-color: var(--haf-negative);
  color: var(--haf-negative);
}

.chip-info, .chip-transit {
  background: rgba(47, 55, 62, .10);
  border-color: var(--haf-line-strong);
  color: var(--haf-ink-muted);
}
.chip-info::before, .chip-transit::before { background: var(--haf-ink-muted); }
:root[data-theme="night"] .chip-info,
:root[data-theme="dark"] .chip-info,
:root[data-theme="night"] .chip-transit,
:root[data-theme="dark"] .chip-transit { background: rgba(244, 241, 235, .10); }

/* ---- the wash behind the sign-in screen -------------------------------- */
/* A soft orange glow, built for a near-black page. On cream it turned the top
   of the sign-in screen a dirty peach, so it is held right back in day. */
.page::before { opacity: .45; }
:root[data-theme="night"] .page::before,
:root[data-theme="dark"] .page::before { opacity: 1; }

/* ---- the switch -------------------------------------------------------- */
.icon-btn[data-haf-theme-toggle], #themeBtn { cursor: pointer; }