/* =========================================================
   ContainerBooking — dark theme + the moon / sun toggle.

   Loaded after every page's own stylesheets. Light mode is the
   production look and stays untouched: apart from the toggle
   itself, every rule here is scoped to html[data-theme="dark"].
   Most of the site is built on the tokens in styles.css, so the
   dark theme is mainly new token values; the rest covers the
   few places that use fixed colours.
   ========================================================= */

/* ---------- translucency tokens (both themes) ---------- */
:root {
  --paper-rgb: 248, 246, 240;
  --paper-2-rgb: 255, 253, 249;
  --ink-rgb: 22, 33, 31;
  --shadow-rgb: 20, 42, 46;
}

/* ---------- the toggle (top right of the header) ---------- */
.theme-toggle {
  flex: 0 0 auto; position: relative;
  display: inline-grid; place-items: center;
  width: 42px; height: 42px; padding: 0;
  border-radius: 8px; border: 1.5px solid var(--line);
  background: transparent; color: var(--ink);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color .18s, background-color .18s, color .18s, transform .18s var(--ease, ease);
}
.theme-toggle:hover { border-color: var(--ink); }
.theme-toggle:active { transform: translateY(1px); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.theme-toggle__icon {
  grid-area: 1 / 1; display: block;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .3s ease;
}
.theme-toggle__sun { opacity: 0; transform: rotate(-90deg) scale(.4); }
html[data-theme="dark"] .theme-toggle__moon { opacity: 0; transform: rotate(90deg) scale(.4); }
html[data-theme="dark"] .theme-toggle__sun { opacity: 1; transform: none; }
/* pages without the site header */
.theme-toggle--floating { position: fixed; top: 14px; right: 14px; z-index: 70; background: var(--paper-2); }
@media (prefers-reduced-motion: reduce) { .theme-toggle__icon { transition: none; } }

/* ---------- phones: everything fits the screen ----------
   On a phone the header holds the brand, one Log in / Log out button and the toggle. With the desktop gaps (34 px) and
   the buttons' 128 px minimum width they no longer fit a 390 px iPhone once the toggle joined them, and one element
   wider than the screen widens the whole page: iOS then shows every page zoomed in and sliding sideways. Here the
   header packs tight, the button takes its own width, the brand name gives way on the smallest screens, and the page
   itself can never scroll sideways. */
@media (max-width: 760px) {
  .header__inner { gap: 10px; }
  .header .brand { flex: 0 1 auto; min-width: 0; }
  .header .brand__type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #nav-login-btn, #nav-logout-btn, .header .btn--solid { min-width: 0; }
  .theme-toggle { width: 36px; height: 36px; border-radius: 7px; }
  html, body { overflow-x: clip; }
  /* iOS zooms into any field whose text is under 16 px when it is tapped, and stays zoomed in: fields are 16 px */
  :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) { font-size: 16px !important; }
}
@media (max-width: 359px) {
  .header .brand__type { display: none; }
}

/* ---------- dark tokens ---------- */
html[data-theme="dark"] {
  --paper:    #0e1416;
  --paper-2:  #151d20;
  --line:     #263236;
  --ink:      #ece8df;
  --ink-soft: #9fa9a6;
  --accent:   #e2552b;
  --accent-d: #c8451f;
  --deep:     #142a2e;

  --paper-rgb: 14, 20, 22;
  --paper-2-rgb: 21, 29, 32;
  --ink-rgb: 236, 232, 223;
  --shadow-rgb: 0, 0, 0;

  /* status colours lifted for a dark background */
  --ok-ink: #6fcf9a;
  --due-ink: #ff8576;
  --pending-ink: #f07a52;
}

/* colours cross-fade only while switching (theme.js sets the class for ~300 ms) */
html.theme-switching body,
html.theme-switching body *:not(.theme-toggle__icon):not(canvas) {
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, fill .3s ease, stroke .3s ease !important;
}

/* ---------- production shell (styles.css) ---------- */
html[data-theme="dark"] .header { background: rgba(14, 20, 22, .86); border-bottom-color: var(--line); }
html[data-theme="dark"] .brand__icon { filter: brightness(0) invert(.93); }
html[data-theme="dark"] .btn--light { background: #f4f1ea; color: var(--deep); }
html[data-theme="dark"] .btn--light:hover { background: #ffffff; }

html[data-theme="dark"] .auth-modal__backdrop,
html[data-theme="dark"] .bk-login__backdrop { background: rgba(0, 0, 0, .62); }
html[data-theme="dark"] .auth-modal__card { box-shadow: 0 24px 60px rgba(0, 0, 0, .6); border: 1px solid var(--line); }
html[data-theme="dark"] .auth-modal__btn,
html[data-theme="dark"] .bk-login__btn { background: var(--paper); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .auth-modal__btn:hover,
html[data-theme="dark"] .bk-login__btn:hover { background: #1b2629; border-color: var(--ink-soft); }

html[data-theme="dark"] .hero__quote { box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .9); }
html[data-theme="dark"] .tick-logo,
html[data-theme="dark"] .tick-rate .r-lane { color: #7f8b88; }
html[data-theme="dark"] .tick-rate .r-down,
html[data-theme="dark"] .delta--down { color: #4fc48f; }
html[data-theme="dark"] .card:hover { box-shadow: 0 24px 50px -26px rgba(0, 0, 0, .8); }
html[data-theme="dark"] .drop:hover,
html[data-theme="dark"] .drop.is-over { background: rgba(226, 85, 43, .08); }
html[data-theme="dark"] .drop__icon { color: #7f8b88; }
html[data-theme="dark"] .pl-ac__list { box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8); }
html[data-theme="dark"] .field select option { background: var(--paper-2); color: var(--ink); }
html[data-theme="dark"] .cta { background: #142a2e; }

/* ---------- app shell (app-shell.css) ---------- */
html[data-theme="dark"] .appnav { background: rgba(14, 20, 22, .95); }
@supports (backdrop-filter: blur(10px)) {
  html[data-theme="dark"] .appnav { background: rgba(14, 20, 22, .84); }
}
html[data-theme="dark"] .appnav__tab.is-current { color: var(--pending-ink); }

/* ---------- booking pages (book.css, book-full.css, cargo-picker.css) ---------- */
html[data-theme="dark"] .bk-map { background: #10181a; border-color: var(--line); }
/* the route chart is a light nautical chart texture: invert it to a dark chart, hues kept */
html[data-theme="dark"] .bk-map__stage canvas { filter: invert(.9) hue-rotate(180deg) saturate(1.15) brightness(1.05); }

/* ---------- account / manage pages (manage.css, manage-*.css) ---------- */
html[data-theme="dark"] .pill--ok { background: rgba(80, 180, 125, .14); color: var(--ok-ink); }
html[data-theme="dark"] .pill--pending { background: rgba(226, 85, 43, .16); color: var(--pending-ink); }
html[data-theme="dark"] .pill--due { background: rgba(230, 90, 75, .16); color: var(--due-ink); }
html[data-theme="dark"] .skel::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent); }

html[data-theme="dark"] .hz-step__line.is-filled { background: #3f9a6c; }
html[data-theme="dark"] .hz-step.is-completed .hz-step__dot { background: #3f9a6c; border-color: #3f9a6c; }
html[data-theme="dark"] .hz-step.is-current .hz-step__dot { box-shadow: 0 0 0 4px rgba(226, 85, 43, .25); }
html[data-theme="dark"] .hz-step.is-exception .hz-step__dot { background: #e2574a; border-color: #e2574a; }
html[data-theme="dark"] .sd-documents .sd-doc-status.is-received,
html[data-theme="dark"] .sd-documents .sd-doc-status.is-approved,
html[data-theme="dark"] .sd-upl .sd-doc-status.is-received { background: rgba(80, 180, 125, .14); color: var(--ok-ink); }
html[data-theme="dark"] .sd-doc-status.is-uploaded,
html[data-theme="dark"] .sd-doc-status.is-checking { background: rgba(226, 85, 43, .16); color: var(--pending-ink); }
html[data-theme="dark"] .sd-doc-status.is-rejected { background: rgba(230, 90, 75, .16); color: var(--due-ink); }
html[data-theme="dark"] .sd-documents .sd-doc-note,
html[data-theme="dark"] .sd-upl__note,
html[data-theme="dark"] .sd-upq__err,
html[data-theme="dark"] .sd-upload__msg.is-error { color: var(--due-ink); }
html[data-theme="dark"] .sd-upq.is-done .sd-upq__bar > span { background: #3f9a6c; }
html[data-theme="dark"] .account-card,
html[data-theme="dark"] .mgmt__row { box-shadow: none; }

/* ---------- printing (invoices) is always light ---------- */
@media print {
  html[data-theme="dark"] {
    --paper: #f8f6f0; --paper-2: #fffdf9; --line: #e5e0d4; --ink: #16211f; --ink-soft: #566360; --deep: #142a2e;
    color-scheme: light;
  }
  .theme-toggle { display: none !important; }
}