/*
 * PROTOTYPE: a translucent "glass" variant of the dark theme, like the newer macOS interfaces.
 *
 * Everything hangs from `html[data-theme="dark"][data-glass="on"]`, so the normal themes do not
 * change. The switch is in the first script of `_Layout.cshtml`: `?glass=1` turns it on for this
 * browser, `?glass=0` turns it off.
 *
 * 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.
 */

html[data-theme="dark"][data-glass="on"] {
  --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 ----------------------------------------- */

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

html[data-theme="dark"][data-glass="on"] 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 - */

html[data-theme="dark"][data-glass="on"] .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);
}

html[data-theme="dark"][data-glass="on"] .app-container.menu-sidebar > .main-content:not(.is-full-bleed):not([data-theme="light"]),
html[data-theme="dark"][data-glass="on"] 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 --------------- */

html[data-theme="dark"][data-glass="on"] .ax-lookup-panel,
html[data-theme="dark"][data-glass="on"] .ax-partner-panel,
html[data-theme="dark"][data-glass="on"] .ax-more-list,
html[data-theme="dark"][data-glass="on"] .ax-mp-panel,
html[data-theme="dark"][data-glass="on"] .ax-datetime-combo-panel,
html[data-theme="dark"][data-glass="on"] .ax-op-panel,
html[data-theme="dark"][data-glass="on"] .dk-side.dk-side-open,
html[data-theme="dark"][data-glass="on"] .cr-matches,
html[data-theme="dark"][data-glass="on"] .iqm-dialog,
html[data-theme="dark"][data-glass="on"] .assistant-panel,
html[data-theme="dark"][data-glass="on"] .dropdown-menu,
html[data-theme="dark"][data-glass="on"] .ax-grid th,
html[data-theme="dark"][data-glass="on"] .acc-table th,
html[data-theme="dark"][data-glass="on"] .cfg-load thead th,
html[data-theme="dark"][data-glass="on"] .report-page thead th,
html[data-theme="dark"][data-glass="on"] .report-totals td,
html[data-theme="dark"][data-glass="on"] .hr-sheet tfoot td,
html[data-theme="dark"][data-glass="on"] .rk-corner,
html[data-theme="dark"][data-glass="on"] .rk-day,
html[data-theme="dark"][data-glass="on"] .bdg-acc,
html[data-theme="dark"][data-glass="on"] .ga-corner,
html[data-theme="dark"][data-glass="on"] .ga-head,
html[data-theme="dark"][data-glass="on"] .ga-hours,
html[data-theme="dark"][data-glass="on"] .rt-savebar,
html[data-theme="dark"][data-glass="on"] .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. */
html[data-theme="dark"][data-glass="on"] .main-content:not([data-theme="light"]) .ax-datetime-combo-text,
html[data-theme="dark"][data-glass="on"] .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);
}

html[data-theme="dark"][data-glass="on"] .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. */
html[data-theme="dark"][data-glass="on"] .main-content:not([data-theme="light"]) textarea,
html[data-theme="dark"][data-glass="on"] .main-content:not([data-theme="light"]) input[type="search"],
html[data-theme="dark"][data-glass="on"] .main-content:not([data-theme="light"]) input[type="text"] {
  background-color: var(--surface);
  color: var(--fg);
}

html[data-theme="dark"][data-glass="on"] .main-content:not([data-theme="light"]) textarea,
html[data-theme="dark"][data-glass="on"] .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. */
html[data-theme="dark"][data-glass="on"] select option,
html[data-theme="dark"][data-glass="on"] 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))) {
  html[data-theme="dark"][data-glass="on"] .ax-backdrop {
    background: rgba(4, 9, 20, .38);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
}

html[data-theme="dark"][data-glass="on"] .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. */
html[data-theme="dark"][data-glass="on"] .ax-modal .ax-lookup-panel,
html[data-theme="dark"][data-glass="on"] .ax-modal .ax-partner-panel,
html[data-theme="dark"][data-glass="on"] .ax-modal .ax-mp-panel,
html[data-theme="dark"][data-glass="on"] .ax-modal .ax-datetime-combo-panel,
html[data-theme="dark"][data-glass="on"] .ax-modal .ax-more-list,
html[data-theme="dark"][data-glass="on"] .ax-modal .ax-grid th {
  --surface: #182130;
  --surface-2: #1F2A3B;
  --surface-3: #293548;
}

/* SweetAlert hangs from the body and ships its own white popup. */
html[data-theme="dark"][data-glass="on"] .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;
}

html[data-theme="dark"][data-glass="on"] .swal2-title,
html[data-theme="dark"][data-glass="on"] .swal2-html-container {
  color: #F1F4F9;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html[data-theme="dark"][data-glass="on"] .swal2-container.swal2-backdrop-show {
    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))) {
  html[data-theme="dark"][data-glass="on"] .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. */
html[data-theme="dark"][data-glass="on"] .axis-sb-fly {
  background-image: linear-gradient(to bottom, rgba(30, 40, 58, .86), rgba(20, 28, 42, .86));
}

html[data-theme="dark"][data-glass="on"] .axis-topbar-search {
  background: rgba(255, 255, 255, .08);
}

html[data-theme="dark"][data-glass="on"] .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 ---------- */

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

html[data-theme="dark"][data-glass="on"] .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))) {
  html[data-theme="dark"][data-glass="on"] .login-card {
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    backdrop-filter: blur(28px) saturate(150%);
  }
}

html[data-theme="dark"][data-glass="on"] .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. */
html[data-theme="dark"][data-glass="on"] .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;
}

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

html[data-theme="dark"][data-glass="on"] .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. */
html[data-theme="dark"][data-glass="on"] .login-card .form-control:-webkit-autofill,
html[data-theme="dark"][data-glass="on"] .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. */
html[data-theme="dark"][data-glass="on"] .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;
}

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