/*
 * The light theme as glass. The same recipe as glass-dark.css, and the reasons are written there: the
 * tokens turn translucent inside the page box, what covers other content stays solid, and the page box
 * has no backdrop-filter so that `position: fixed` keeps working.
 *
 * What is different from the dark one: white over a pale background has little room, so the depth
 * comes from the colour field being more saturated and from darker secondary text, which a pale
 * translucent surface would otherwise wash out.
 */

:root[data-theme="light"]:not([data-solid]) {
  --app-bg:
    radial-gradient(60% 70% at 10% 6%, rgba(96, 165, 250, .62), rgba(96, 165, 250, 0) 68%),
    radial-gradient(55% 62% at 90% 14%, rgba(45, 212, 191, .46), rgba(45, 212, 191, 0) 64%),
    radial-gradient(62% 66% at 74% 98%, rgba(167, 139, 250, .46), rgba(167, 139, 250, 0) 68%),
    radial-gradient(48% 52% at 16% 92%, rgba(56, 189, 248, .36), rgba(56, 189, 248, 0) 66%),
    linear-gradient(150deg, #E8F1FE 0%, #EDF6F7 52%, #F1EEFB 100%);

  --glass-top-clear: rgba(255, 255, 255, .58);
  --glass-bottom-clear: rgba(255, 255, 255, .34);
  --glass-edge: rgba(255, 255, 255, .70);
  --glass-hover: rgba(15, 33, 64, .06);
  --glass-shadow: 0 10px 32px rgba(30, 58, 110, .16), 0 1px 3px rgba(30, 58, 110, .10);
  --glass-shine: inset 0 1px rgba(255, 255, 255, .85), inset 0 -1px rgba(15, 33, 64, .04);
}

/* ---- The window ------------------------------------------------------------------------------ */

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

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

/* ---- The page -------------------------------------------------------------------------------- */

:root[data-theme="light"]:not([data-solid]) .main-content:not(.is-full-bleed) {
  --bg: transparent;
  --surface: rgba(255, 255, 255, .58);
  /* Less white than the surface, not more: in the light theme these two read as a step darker. */
  --surface-2: rgba(255, 255, 255, .36);
  --surface-3: rgba(15, 33, 64, .07);

  --border: rgba(15, 33, 64, .13);
  --border-strong: rgba(15, 33, 64, .42);

  --fg: #141A23;
  --fg-muted: #434E5B;
  --fg-subtle: #5B6776;

  --accent: #0A55B8;
  --accent-hover: #084796;
  --accent-subtle: rgba(11, 95, 204, .13);
  --accent-border: rgba(11, 95, 204, .36);
  --success: #12692F;
  --success-subtle: rgba(23, 128, 61, .14);
  --success-border: rgba(23, 128, 61, .38);
  --warning: #855005;
  --warning-subtle: rgba(161, 98, 7, .14);
  --warning-border: rgba(161, 98, 7, .38);
  --danger: #A9202B;
  --danger-subtle: rgba(194, 43, 54, .12);
  --danger-border: rgba(194, 43, 54, .36);
}

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

/* Fields a screen only gives a size to come out in the browser's plain white with a sunken border. */
:root[data-theme="light"]:not([data-solid]) .main-content:not(.is-full-bleed) .ax-datetime-combo-text,
:root[data-theme="light"]:not([data-solid]) .main-content:not(.is-full-bleed) .ax-search,
:root[data-theme="light"]:not([data-solid]) .main-content:not(.is-full-bleed) textarea,
:root[data-theme="light"]:not([data-solid]) .main-content:not(.is-full-bleed) input[type="search"] {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

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

:root[data-theme="light"]:not([data-solid]) .main-content:not(.is-full-bleed) .ax-datetime-combo-text,
:root[data-theme="light"]:not([data-solid]) .main-content:not(.is-full-bleed) .ax-search,
:root[data-theme="light"]:not([data-solid]) .main-content:not(.is-full-bleed) textarea,
:root[data-theme="light"]:not([data-solid]) .main-content:not(.is-full-bleed) input[type="search"],
:root[data-theme="light"]:not([data-solid]) .main-content:not(.is-full-bleed) input[type="text"] {
  background-color: var(--surface);
  color: var(--fg);
}

/* ---- What must stay solid --------------------------------------------------------------------- */

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

:root[data-theme="light"]:not([data-solid]) select option,
:root[data-theme="light"]:not([data-solid]) select optgroup {
  background-color: #FFFFFF;
  color: #141A23;
}

/* ---- Dialogs ---------------------------------------------------------------------------------- */

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

:root[data-theme="light"]:not([data-solid]) .ax-modal {
  --surface: rgba(255, 255, 255, .62);
  --surface-2: rgba(241, 245, 251, .85);
  --surface-3: rgba(15, 33, 64, .07);
  background: rgba(250, 252, 255, .86);
  border-color: var(--glass-edge);
  box-shadow: 0 24px 64px rgba(30, 58, 110, .28), var(--glass-shine);
}

:root[data-theme="light"]:not([data-solid]) .ax-modal .ax-lookup-panel,
:root[data-theme="light"]:not([data-solid]) .ax-modal .ax-partner-panel,
:root[data-theme="light"]:not([data-solid]) .ax-modal .ax-mp-panel,
:root[data-theme="light"]:not([data-solid]) .ax-modal .ax-datetime-combo-panel,
:root[data-theme="light"]:not([data-solid]) .ax-modal .ax-more-list,
:root[data-theme="light"]:not([data-solid]) .ax-modal .ax-grid th {
  --surface: #FFFFFF;
  --surface-2: #EFF3F9;
  --surface-3: #E4EAF3;
}

:root[data-theme="light"]:not([data-solid]) .swal2-popup {
  background: rgba(250, 252, 255, .92);
  border: 1px solid var(--glass-edge);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(30, 58, 110, .28), var(--glass-shine);
}

/* ---- The frame -------------------------------------------------------------------------------- */

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root[data-theme="light"]:not([data-solid]) .axis-sidebar {
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
  }
}

:root[data-theme="light"]:not([data-solid]) .axis-sb-fly {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, .92), rgba(244, 248, 254, .88));
}

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

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

/* ---- The login -------------------------------------------------------------------------------- */

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

:root[data-theme="light"]:not([data-solid]) .login-card {
  --fg: #141A23;
  --fg-muted: #434E5B;
  --fg-subtle: #5B6776;
  --accent-subtle: rgba(11, 95, 204, .22);

  background-color: rgba(255, 255, 255, .50);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 24px 64px rgba(30, 58, 110, .26), var(--glass-shine);
}

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

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

:root[data-theme="light"]:not([data-solid]) .login-card .form-control:focus {
  background-color: rgba(255, 255, 255, .85);
}

:root[data-theme="light"]: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='%23434E5B' 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="light"]:not([data-solid]) .login-card .form-control:-webkit-autofill,
:root[data-theme="light"]:not([data-solid]) .login-card .form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: #141A23;
  -webkit-box-shadow: 0 0 0 1000px #F4F8FE inset;
  caret-color: #141A23;
}

:root[data-theme="light"]: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="light"]: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="light"]: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: #F6F8FC;
}

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