/*
 * The dark theme is translucent "glass", like the newer macOS interfaces. This sheet restyles what
 * tokens.css and glass.css set; glass-light.css is its counterpart.
 *
 * `data-solid` is the one way out, and it is not a setting: the first script of `_Layout.cshtml` sets
 * it for whoever asked the system for less transparency, who then gets the plain opaque tokens.
 *
 * How the page stays translucent without breaking anything:
 *
 * - The tokens are redefined inside the page box, so every screen that paints with `--surface`
 *   turns to glass without being touched.
 * - What floats over the rows or scrolls under something (sticky headers, dialogs, menus) puts the
 *   solid tokens back: a translucent header lets the rows show through and cannot be read.
 * - The page box itself has NO backdrop-filter. It would make the box the containing block of every
 *   `position: fixed` inside it, so dialogs and floating panels would be placed against the box and
 *   not the window. It would also add nothing: behind the box there is only a smooth gradient, and
 *   a blurred gradient looks the same. Blur is kept for the sidebar and for what sits over a dialog.
 * - Full-bleed screens (the Store, the stations) keep their own chassis, and legacy views pinned to
 *   the light theme keep their opaque page.
 */

:root[data-theme="dark"]:not([data-solid]) {
  --app-bg:
    radial-gradient(60% 70% at 10% 6%, rgba(32, 111, 235, .60), rgba(32, 111, 235, 0) 68%),
    radial-gradient(55% 62% at 90% 14%, rgba(20, 184, 166, .42), rgba(20, 184, 166, 0) 64%),
    radial-gradient(62% 66% at 74% 98%, rgba(124, 58, 237, .34), rgba(124, 58, 237, 0) 68%),
    radial-gradient(48% 52% at 16% 92%, rgba(14, 116, 144, .36), rgba(14, 116, 144, 0) 66%),
    linear-gradient(150deg, #0A1430 0%, #0C1D33 52%, #111A2E 100%);

  --glass-top-clear: rgba(255, 255, 255, .11);
  --glass-bottom-clear: rgba(255, 255, 255, .04);
  --glass-edge: rgba(255, 255, 255, .16);
  --glass-hover: rgba(255, 255, 255, .09);
  --glass-shadow: 0 10px 32px rgba(3, 8, 20, .45), 0 1px 3px rgba(3, 8, 20, .35);
  --glass-shine: inset 0 1px rgba(255, 255, 255, .18), inset 0 -1px rgba(0, 0, 0, .18);
}

/* ---- The window: one colour field behind everything ----------------------------------------- */

:root[data-theme="dark"]:not([data-solid]) body:not(.full-bleed-page) {
  background: var(--app-bg) no-repeat fixed;
}

:root[data-theme="dark"]:not([data-solid]) body:not(.full-bleed-page) #app-container {
  background: transparent;
}

/* ---- The page: the box is a tinted sheet, and everything in it paints with translucent tokens - */

:root[data-theme="dark"]:not([data-solid]) .main-content:not(.is-full-bleed):not([data-theme="light"]) {
  --bg: transparent;
  --surface: rgba(255, 255, 255, .06);
  --surface-2: rgba(255, 255, 255, .09);
  --surface-3: rgba(255, 255, 255, .14);

  --border: rgba(255, 255, 255, .13);
  --border-strong: rgba(255, 255, 255, .40);

  /* A notch up from the dark theme: these sit on a brighter, moving background. */
  --fg: #F1F4F9;
  --fg-muted: #B9C3D0;
  --fg-subtle: #97A3B2;

  --accent: #7DB5F8;
  --accent-hover: #9AC7FA;
  --accent-subtle: rgba(90, 160, 245, .18);
  --accent-border: rgba(90, 160, 245, .45);
  --success-subtle: rgba(70, 179, 107, .18);
  --success-border: rgba(70, 179, 107, .45);
  --warning-subtle: rgba(217, 164, 65, .18);
  --warning-border: rgba(217, 164, 65, .45);
  --danger-subtle: rgba(240, 112, 124, .18);
  --danger-border: rgba(240, 112, 124, .45);
}

:root[data-theme="dark"]:not([data-solid]) .app-container.menu-sidebar > .main-content:not(.is-full-bleed):not([data-theme="light"]),
:root[data-theme="dark"]:not([data-solid]) body:not(.kiosk-page) #app-container > .main-content:not(.is-full-bleed):not([data-theme="light"]) {
  background-color: rgba(10, 16, 28, .36);
  box-shadow: var(--glass-shadow), var(--glass-shine);
}

/* ---- What must stay solid: it covers other content, so nothing may show through --------------- */

:root[data-theme="dark"]:not([data-solid]) .ax-lookup-panel,
:root[data-theme="dark"]:not([data-solid]) .ax-partner-panel,
:root[data-theme="dark"]:not([data-solid]) .ax-more-list,
:root[data-theme="dark"]:not([data-solid]) .ax-mp-panel,
:root[data-theme="dark"]:not([data-solid]) .ax-datetime-combo-panel,
:root[data-theme="dark"]:not([data-solid]) .ax-op-panel,
:root[data-theme="dark"]:not([data-solid]) .dk-side.dk-side-open,
:root[data-theme="dark"]:not([data-solid]) .cr-matches,
:root[data-theme="dark"]:not([data-solid]) .iqm-dialog,
:root[data-theme="dark"]:not([data-solid]) .assistant-panel,
:root[data-theme="dark"]:not([data-solid]) .dropdown-menu,
:root[data-theme="dark"]:not([data-solid]) .ax-grid th,
:root[data-theme="dark"]:not([data-solid]) .acc-table th,
:root[data-theme="dark"]:not([data-solid]) .cfg-load thead th,
:root[data-theme="dark"]:not([data-solid]) .report-page thead th,
:root[data-theme="dark"]:not([data-solid]) .report-totals td,
:root[data-theme="dark"]:not([data-solid]) .hr-sheet tfoot td,
:root[data-theme="dark"]:not([data-solid]) .rk-corner,
:root[data-theme="dark"]:not([data-solid]) .rk-day,
:root[data-theme="dark"]:not([data-solid]) .bdg-acc,
:root[data-theme="dark"]:not([data-solid]) .ga-corner,
:root[data-theme="dark"]:not([data-solid]) .ga-head,
:root[data-theme="dark"]:not([data-solid]) .ga-hours,
:root[data-theme="dark"]:not([data-solid]) .rt-savebar,
:root[data-theme="dark"]:not([data-solid]) .it-card-actions {
  --bg: #121927;
  --surface: #182130;
  --surface-2: #1F2A3B;
  --surface-3: #293548;
  --border: #33415A;
}

/* Painted by the browser in the screens that give it no colour: a grey block on the glass. */
:root[data-theme="dark"]:not([data-solid]) .main-content:not([data-theme="light"]) .ax-datetime-combo-text,
:root[data-theme="dark"]:not([data-solid]) .main-content:not([data-theme="light"]) .ax-search {
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--fg);
}

:root[data-theme="dark"]:not([data-solid]) .main-content:not([data-theme="light"]) .ax-search {
  padding-inline: var(--space-3);
}

/* The same for the fields a screen only gives a size to: without this they are near-black holes. */
:root[data-theme="dark"]:not([data-solid]) .main-content:not([data-theme="light"]) textarea,
:root[data-theme="dark"]:not([data-solid]) .main-content:not([data-theme="light"]) input[type="search"],
:root[data-theme="dark"]:not([data-solid]) .main-content:not([data-theme="light"]) input[type="text"] {
  background-color: var(--surface);
  color: var(--fg);
}

:root[data-theme="dark"]:not([data-solid]) .main-content:not([data-theme="light"]) textarea,
:root[data-theme="dark"]:not([data-solid]) .main-content:not([data-theme="light"]) input[type="search"] {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

/* A native list is painted by the browser from the option's own colours; a translucent one comes
   out as a light list with light text. */
:root[data-theme="dark"]:not([data-solid]) select option,
:root[data-theme="dark"]:not([data-solid]) select optgroup {
  background-color: #182130;
  color: #F1F4F9;
}

/* ---- Dialogs: the page behind goes out of focus, and the dialog is frosted over it ------------ */

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root[data-theme="dark"]:not([data-solid]) .ax-backdrop {
    background: rgba(4, 9, 20, .38);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
}

:root[data-theme="dark"]:not([data-solid]) .ax-modal {
  --surface: rgba(255, 255, 255, .05);
  --surface-2: rgba(255, 255, 255, .08);
  --surface-3: rgba(255, 255, 255, .13);
  background: rgba(22, 30, 45, .86);
  border-color: var(--glass-edge);
  box-shadow: 0 24px 64px rgba(3, 8, 20, .55), var(--glass-shine);
}

/* Inside a dialog the table header has to be solid against the dialog, not the page. */
:root[data-theme="dark"]:not([data-solid]) .ax-modal .ax-lookup-panel,
:root[data-theme="dark"]:not([data-solid]) .ax-modal .ax-partner-panel,
:root[data-theme="dark"]:not([data-solid]) .ax-modal .ax-mp-panel,
:root[data-theme="dark"]:not([data-solid]) .ax-modal .ax-datetime-combo-panel,
:root[data-theme="dark"]:not([data-solid]) .ax-modal .ax-more-list,
:root[data-theme="dark"]:not([data-solid]) .ax-modal .ax-grid th {
  --surface: #182130;
  --surface-2: #1F2A3B;
  --surface-3: #293548;
}

/* SweetAlert hangs from the body and ships its own white popup. */
:root[data-theme="dark"]:not([data-solid]) .swal2-popup {
  background: rgba(22, 30, 45, .92);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 24px 64px rgba(3, 8, 20, .55), var(--glass-shine);
  border-radius: 16px;
  color: #F1F4F9;
}

:root[data-theme="dark"]:not([data-solid]) .swal2-title,
:root[data-theme="dark"]:not([data-solid]) .swal2-html-container {
  color: #F1F4F9;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root[data-theme="dark"]:not([data-solid]) .swal2-container.swal2-backdrop-show:not(:has(.swal2-loading)) {
    background: rgba(4, 9, 20, .38);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
}

/* ---- The frame: more glass, less tint --------------------------------------------------------- */

/* glass.css saturates at 180 %, which over this colour field turns the sidebar into a blue slab. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root[data-theme="dark"]:not([data-solid]) .axis-sidebar {
    -webkit-backdrop-filter: blur(24px) saturate(125%);
    backdrop-filter: blur(24px) saturate(125%);
  }
}

/* The section flyout opens over the page, whose text would otherwise run through its own. */
:root[data-theme="dark"]:not([data-solid]) .axis-sb-fly {
  background-image: linear-gradient(to bottom, rgba(30, 40, 58, .86), rgba(20, 28, 42, .86));
}

:root[data-theme="dark"]:not([data-solid]) .axis-topbar-search {
  background: rgba(255, 255, 255, .08);
}

:root[data-theme="dark"]:not([data-solid]) .axis-topbar-search kbd {
  background: rgba(255, 255, 255, .12);
}

/* ---- The login: the same colour field, and the card is the one sheet of glass over it ---------- */

:root[data-theme="dark"]:not([data-solid]) .login-page {
  background: var(--app-bg) no-repeat fixed;
}

:root[data-theme="dark"]:not([data-solid]) .login-card {
  --fg: #F1F4F9;
  --fg-muted: #C3CCD8;
  --fg-subtle: #9FABBA;
  --accent: #7DB5F8;
  --accent-subtle: rgba(90, 160, 245, .28);
  --danger: #FF9AA3;

  background-color: rgba(16, 24, 40, .42);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 24px 64px rgba(3, 8, 20, .50), var(--glass-shine);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root[data-theme="dark"]:not([data-solid]) .login-card {
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    backdrop-filter: blur(28px) saturate(150%);
  }
}

:root[data-theme="dark"]:not([data-solid]) .login-card .form-control {
  border-color: rgba(255, 255, 255, .22);
  /* !important answers the square corners site.css forces on every field and button. */
  border-radius: 10px !important;
  background-color: rgba(255, 255, 255, .07);
}

/* The global select has no arrow, and on a login a field with a list has to look like one. */
:root[data-theme="dark"]:not([data-solid]) .login-card select.form-control {
  padding-right: 36px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C3CCD8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
}

:root[data-theme="dark"]:not([data-solid]) .login-remember input[type="checkbox"]:not(:checked) {
  border-color: rgba(255, 255, 255, .40);
  background-color: rgba(255, 255, 255, .07);
}

:root[data-theme="dark"]:not([data-solid]) .login-card .form-control:focus {
  border-color: var(--accent);
  background-color: rgba(255, 255, 255, .11);
}

/* A browser-filled field would otherwise come out as a pale block: the autofill colour cannot be
   overridden, only painted over from the inside. */
:root[data-theme="dark"]:not([data-solid]) .login-card .form-control:-webkit-autofill,
:root[data-theme="dark"]:not([data-solid]) .login-card .form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: #F1F4F9;
  -webkit-box-shadow: 0 0 0 1000px #1F2A3B inset;
  caret-color: #F1F4F9;
}

/* The pill of the sidebar: white on the «pay» blue, not dark text on the lightened accent. */
:root[data-theme="dark"]:not([data-solid]) .login-submit {
  border: 0;
  border-radius: 12px !important;
  background-color: var(--pill-bottom);
  background-image: linear-gradient(to bottom, var(--pill-top), var(--pill-bottom));
  box-shadow: var(--pill-shadow);
  color: #FFFFFF;
}

:root[data-theme="dark"]:not([data-solid]) .login-submit:hover:not(:disabled) {
  filter: brightness(1.08);
}

/* ---- The item card's save bar ------------------------------------------------------------------ */

/* It has to cover what scrolls under it: the table headers (sticky at z-index 1) and the dialog's
   bottom padding, where the rows kept showing below the bar. */
:root[data-theme="dark"]:not([data-solid]) .ax-modal .it-card-actions {
  z-index: 2;
  bottom: calc(-1 * var(--space-5));
  margin: var(--space-5) calc(-1 * var(--space-5)) calc(-1 * var(--space-5));
  padding: var(--space-3) var(--space-5) var(--space-5);
  background: #182130;
}

/* A loose date field has no padding of its own. */
:root[data-theme="dark"]:not([data-solid]) .main-content .ax-datetime-combo-text {
  padding-inline: var(--space-2);
}