/* ===================================================================
   企业运营动态管理系统 — Unified workspace theme
   北京飞云志科技有限公司
   支持：亮色/深色双主题，交互画布，粒子，安全增强
   =================================================================== */

:root {
  --bg-body: #f4f7fb;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --bg-header: #f7f9fc;
  --bg-soft: #eef4ff;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #eaf1ff;
  --primary-glow: rgba(37,99,235,0.15);
  --accent: #0891b2;
  --accent2: #0f766e;
  --success: #059669;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
  --text-primary: #172033;
  --text-secondary: #526078;
  --text-muted: #8793a8;
  --border-light: #e3e9f2;
  --border-accent: #cbd6e5;
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.04);
  --shadow: 0 8px 24px rgba(15,23,42,0.055);
  --shadow-md: 0 12px 32px rgba(15,23,42,0.08);
  --shadow-lg: 0 24px 64px rgba(15,23,42,0.13);
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --transition: 0.22s cubic-bezier(0.4,0,0.2,1);
  --motion-fast: .18s;
  --motion-menu: .24s;
  --motion-page: .32s;
  --motion-card: .34s;
  --motion-modal: .36s;
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
}

[data-bs-theme="dark"] {
  --bg-body: #0d1424;
  --bg-card: #172033;
  --bg-input: #111a2b;
  --bg-header: #121c2e;
  --bg-soft: #172554;
  --primary: #60a5fa;
  --primary-dark: #3b82f6;
  --primary-light: #172554;
  --primary-glow: rgba(96,165,250,0.18);
  --accent: #22d3ee;
  --accent2: #2dd4bf;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #8290a8;
  --border-light: #2b3850;
  --border-accent: #40506b;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow: 0 2px 12px rgba(0,0,0,0.35);
  --shadow-md: 0 6px 24px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.45);
  --bs-body-bg: #0d1424;
  --bs-body-color: #f1f5f9;
  --bs-border-color: #334155;
  --bs-heading-color: #f1f5f9;
  --bs-link-color: #a78bfa;
  --bs-link-hover-color: #c4b5fd;
  --bs-modal-bg: #172033;
  --bs-modal-border-color: #2b3850;
  --bs-white: #172033;
  --bs-gray-100: #172033;
  --bs-gray-200: #2b3850;
  --bs-gray-300: #40506b;
  --bs-light: #172033;
  --bs-dark: #f1f5f9;
  color-scheme: dark;
  background-color: #0d1424;
  color: #f1f5f9;
}

* { box-sizing: border-box; }
body {
  background-color: var(--bg-body);
  background-image: radial-gradient(circle at 8% 2%, rgba(37,99,235,.07), transparent 25rem), radial-gradient(circle at 92% 8%, rgba(8,145,178,.055), transparent 24rem), linear-gradient(rgba(37,99,235,.016) 1px, transparent 1px), linear-gradient(90deg, rgba(37,99,235,.016) 1px, transparent 1px);
  background-size: auto, auto, 64px 64px, 64px 64px;
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: .875rem; line-height: 1.6;
  padding-top: 62px; min-height: 100vh;
}
a { color: var(--primary); transition: color var(--transition); text-decoration: none; }
a:hover { color: var(--accent); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.container.mt-3 { flex: 1; }
.app-main { padding-top: .55rem; }
body:not(.login-page) {
  display: flex;
  flex-direction: column;
}
body:not(.login-page) > .app-main {
  flex: 0 0 auto;
  width: 100%;
  min-height: calc(100dvh - 62px);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ===== Navbar ===== */
.navbar {
  background: rgba(255,255,255,0.97) !important;
  box-shadow: 0 1px 0 rgba(15,23,42,0.05), 0 8px 26px rgba(15,23,42,0.045);
  padding: .48rem 1rem; min-height: 60px;
  border-bottom: 1px solid var(--border-light);
}
.navbar::after { content: ''; position: absolute; inset: auto 0 -1px; height: 1px; background: linear-gradient(90deg, transparent 4%, rgba(37,99,235,.28) 50%, transparent 96%); pointer-events: none; }
.navbar-brand { font-weight: 760; color: var(--text-primary) !important; display: flex; align-items: center; gap: 10px; font-size: 1rem; letter-spacing: .1px; }
.navbar-brand .brand-icon {
  width: 32px; height: 32px;
  background: linear-gradient(145deg, var(--primary), var(--accent));
  border-radius: 9px; display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; color: #fff;
  box-shadow: 0 4px 14px var(--primary-glow), 0 0 0 3px rgba(37,99,235,0.06);
  transition: transform .2s ease;
}
.navbar-brand .brand-copy { display: flex; min-width: 0; flex-direction: column; line-height: 1.05; }
.navbar-brand .brand-copy > span { white-space: nowrap; }
.navbar-brand .brand-copy small { margin-top: 3px; color: var(--text-muted); font-size: .62rem; font-weight: 540; letter-spacing: .02em; }
.navbar-brand:hover .brand-icon { transform: scale(1.05); }
.navbar .nav-link {
  color: var(--text-secondary) !important; padding: .45rem .72rem !important;
  border-radius: var(--radius); margin: 0 2px; transition: all var(--transition);
  font-size: .82rem; font-weight: 530;
}
.navbar .nav-link:hover { background: var(--primary-light); color: var(--primary) !important; }
.navbar .nav-link.active { background: var(--primary-light); color: var(--primary) !important; font-weight: 650; box-shadow: inset 0 0 0 1px rgba(37,99,235,.06); }
.navbar .nav-link i { margin-right: 5px; font-size: .92rem; }
.navbar .navbar-text { color: var(--text-muted) !important; font-size: .8rem; white-space: nowrap; flex-shrink: 0; }
.navbar-user-name { display: inline-block; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.business-unit-picker { flex: 0 1 170px; min-width: 132px; max-width: 190px; }
.business-unit-trigger {
  width: 100%; min-height: 36px; display: flex; align-items: center; gap: .5rem;
  padding: .38rem .58rem; color: var(--text-secondary);
  background: rgb(var(--surface-rgb) / var(--glass-control-alpha));
  border: 1px solid rgb(var(--glass-border-rgb) / var(--glass-border-alpha));
  border-radius: var(--radius); box-shadow: inset 0 .5px 0 rgb(255 255 255 / var(--glass-specular-alpha));
  text-align: left;
}
.business-unit-trigger:hover, .business-unit-trigger[aria-expanded="true"] {
  color: var(--text-primary); border-color: color-mix(in srgb, var(--primary) 48%, var(--border-light));
  background: rgb(var(--surface-alt-rgb) / var(--glass-control-alpha));
}
.business-unit-dot, .business-unit-option-dot {
  width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 0 4px var(--primary-glow);
}
.business-unit-label { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.business-unit-chevron { flex: 0 0 auto; color: var(--text-muted); font-size: .7rem; transition: transform .18s ease; }
.business-unit-trigger[aria-expanded="true"] .business-unit-chevron { transform: rotate(180deg); }
.business-unit-menu { min-width: 230px; padding: .42rem; border-radius: var(--radius); }
.business-unit-option {
  min-height: 40px; display: grid; grid-template-columns: 10px minmax(0, 1fr) 18px;
  align-items: center; gap: .58rem; border-radius: calc(var(--radius) - 4px);
}
.business-unit-option-dot { background: var(--unit-color, var(--primary)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--unit-color, var(--primary)) 12%, transparent); }
.business-unit-option-dot-all { background: linear-gradient(135deg, var(--primary), var(--accent)); }
.business-unit-check { color: var(--primary); opacity: 0; }
.business-unit-option.is-active { color: var(--primary); background: var(--primary-light); }
.business-unit-option.is-active .business-unit-check { opacity: 1; }
@media (min-width: 1400px) {
  .navbar .navbar-text { gap: .125rem !important; }
  .navbar .navbar-text > * { flex-shrink: 0; }
  .navbar-user-name { max-width: 3rem; }
  .business-unit-picker { max-width: 145px; }
}
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(145deg, var(--primary), var(--accent));
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; color: #fff; font-weight: 700;
  box-shadow: 0 2px 8px var(--primary-glow);
  flex-shrink: 0; min-width: 30px; min-height: 30px;
}
.theme-toggle { flex: 0 0 auto; width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.theme-toggle i { margin: 0; line-height: 1; }
#nightBanner { text-align: center; padding: 7px 12px; font-size: .73rem; letter-spacing: .2px; }
#nightBanner.night-banner-fixed { position: fixed; right: 18px; bottom: 18px; z-index: 1040; margin: 0; border-radius: 999px; pointer-events: none; box-shadow: var(--shadow-md); border: 1px solid var(--border-light); }
#nightBanner.night-banner-dark { background: rgb(var(--surface-rgb) / .92); color: var(--text-secondary); }
#nightBanner.night-banner-light { background: rgba(255,255,255,.96); color: var(--text-secondary); }
.brand-subtitle { font-size: .6rem; opacity: .45; display: block; line-height: 1; margin-top: -2px; letter-spacing: 1.2px; color: var(--text-muted); font-weight: 500; }
.dropdown-menu { z-index: 1045; background: #fff; border: 1px solid var(--border-light); box-shadow: var(--shadow-lg); border-radius: var(--radius); padding: .48rem; }
.dropdown-item { border-radius: calc(var(--radius) - 4px); padding: .5rem .82rem; font-size: .82rem; color: var(--text-secondary); transition: color .15s ease, background-color .15s ease; }
.dropdown-item:hover { background: var(--primary-light); color: var(--primary); }
.dropdown-item i { margin-right: 7px; width: 18px; text-align: center; }
.dropdown-divider { border-color: var(--border-light); }

/* ===== Footer ===== */
.footer { background: rgba(255,255,255,0.6); color: var(--text-muted); font-size: .73rem; padding: 12px 0; margin-top: 3rem !important; text-align: center; border-top: 1px solid var(--border-light); }
.footer-main { margin-bottom: 2px; }
.footer-beian { margin-top: 4px; display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem .75rem; }
.footer-beian a { color: var(--text-muted); text-decoration: none; font-size: .72rem; }
.footer-beian a:hover { color: var(--primary); text-decoration: underline; }

/*
 * Smart-light interpolation overrides the discrete scene backgrounds while
 * keeping all glass/material settings independent. The palette itself is
 * calculated locally in 30-second browser-time steps.
 */
@property --bg-body {
  syntax: "<color>";
  inherits: true;
  initial-value: #edf3fa;
}
@property --bg-card {
  syntax: "<color>";
  inherits: true;
  initial-value: #fff;
}
@property --bg-input {
  syntax: "<color>";
  inherits: true;
  initial-value: #fff;
}
@property --bg-header {
  syntax: "<color>";
  inherits: true;
  initial-value: #f4f7fb;
}
@property --bg-soft {
  syntax: "<color>";
  inherits: true;
  initial-value: #e8f0fc;
}
@property --primary {
  syntax: "<color>";
  inherits: true;
  initial-value: #315ecf;
}
@property --accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #3a75da;
}
@property --accent2 {
  syntax: "<color>";
  inherits: true;
  initial-value: #6095e8;
}
@property --surface-rgb {
  syntax: "<number>+";
  inherits: true;
  initial-value: 255 255 255;
}
@property --surface-alt-rgb {
  syntax: "<number>+";
  inherits: true;
  initial-value: 244 247 251;
}
@property --surface-soft-rgb {
  syntax: "<number>+";
  inherits: true;
  initial-value: 232 240 252;
}
@property --nav-rgb {
  syntax: "<number>+";
  inherits: true;
  initial-value: 244 247 251;
}
@property --ambient-rgb {
  syntax: "<number>+";
  inherits: true;
  initial-value: 88 125 207;
}
@property --ambient-alt-rgb {
  syntax: "<number>+";
  inherits: true;
  initial-value: 94 153 213;
}
html[data-auto-theme-gradient] {
  transition:
    --bg-body 18s cubic-bezier(.37, 0, .63, 1),
    --bg-card 18s cubic-bezier(.37, 0, .63, 1),
    --bg-input 18s cubic-bezier(.37, 0, .63, 1),
    --bg-header 18s cubic-bezier(.37, 0, .63, 1),
    --bg-soft 18s cubic-bezier(.37, 0, .63, 1),
    --primary 18s cubic-bezier(.37, 0, .63, 1),
    --accent 18s cubic-bezier(.37, 0, .63, 1),
    --accent2 18s cubic-bezier(.37, 0, .63, 1),
    --surface-rgb 18s cubic-bezier(.37, 0, .63, 1),
    --surface-alt-rgb 18s cubic-bezier(.37, 0, .63, 1),
    --surface-soft-rgb 18s cubic-bezier(.37, 0, .63, 1),
    --nav-rgb 18s cubic-bezier(.37, 0, .63, 1),
    --ambient-rgb 18s cubic-bezier(.37, 0, .63, 1),
    --ambient-alt-rgb 18s cubic-bezier(.37, 0, .63, 1);
}
html[data-auto-theme-gradient] body {
  background-color: var(--bg-body) !important;
  background-image:
    radial-gradient(circle at 10% 4%, rgb(var(--ambient-rgb) / .11), transparent 27rem),
    radial-gradient(circle at 90% 8%, rgb(var(--ambient-alt-rgb) / .065), transparent 26rem),
    linear-gradient(145deg, var(--bg-body), var(--bg-soft)) !important;
}
html[data-auto-theme-gradient] body.login-page {
  background-color: var(--bg-body) !important;
  background-image:
    radial-gradient(circle at 18% 22%, rgb(var(--ambient-rgb) / .24), transparent 29rem),
    radial-gradient(circle at 82% 18%, rgb(var(--ambient-alt-rgb) / .14), transparent 27rem),
    radial-gradient(circle at 58% 88%, rgb(var(--ambient-rgb) / .08), transparent 31rem),
    linear-gradient(145deg, var(--bg-body), var(--bg-soft) 58%, var(--bg-body)) !important;
}
/*
 * Bootstrap's discrete dark/light theme assigns fixed heading colours. During
 * a solar gradient the calculated palette is the source of truth, otherwise a
 * light intermediate surface can inherit a white dark-theme heading. Keep the
 * semantic text ramp and action contrast aligned with every generated frame.
 */
html[data-auto-theme-gradient] h1,
html[data-auto-theme-gradient] h2,
html[data-auto-theme-gradient] h3,
html[data-auto-theme-gradient] h4,
html[data-auto-theme-gradient] h5,
html[data-auto-theme-gradient] h6,
html[data-auto-theme-gradient] strong,
html[data-auto-theme-gradient] .fw-bold,
html[data-auto-theme-gradient] .fw-semibold,
html[data-auto-theme-gradient] .page-title {
  color: var(--text-primary);
}
html[data-auto-theme-gradient] .text-body-secondary,
html[data-auto-theme-gradient] .form-text {
  color: var(--text-secondary) !important;
}
html[data-auto-theme-gradient] .text-muted {
  color: var(--text-muted) !important;
}
html[data-auto-theme-gradient] .btn-primary {
  color: var(--auto-action-text);
  border-color: color-mix(in srgb, var(--primary) 38%, transparent);
  background: linear-gradient(135deg, var(--primary), var(--accent));
}
html[data-auto-theme-gradient] .pagination .active .page-link,
html[data-auto-theme-gradient] .step.active .step-dot {
  color: var(--auto-action-text);
}
html[data-auto-theme-gradient] :is(
  body, .navbar, .card, .tab-content-card, .filter-bar, .dropdown-menu,
  .modal-content, .footer, .form-control, .form-select, .btn
) {
  transition:
    color 0s linear,
    background-color 0s linear,
    border-color 18s cubic-bezier(.37, 0, .63, 1),
    box-shadow 12s cubic-bezier(.37, 0, .63, 1);
}
/*
 * The standalone solar lab can compress a whole day into 60 seconds. Disable
 * the ordinary 12–18 second easing only for its accelerated frames, otherwise
 * the preview would trail far behind its simulated clock. The later exposure
 * selectors deliberately override this at the two 1.4 second cutovers.
 */
html[data-auto-theme-gradient][data-solar-lab-fast-forward="true"] {
  transition: none;
}
html[data-solar-lab-fast-forward="true"] :is(
  body, .navbar, .card, .tab-content-card, .filter-bar, .dropdown-menu,
  .modal-content, .footer, .form-control, .form-select, .btn
) {
  transition:
    color 0s linear,
    background-color 0s linear,
    border-color 0s linear,
    box-shadow 0s linear;
}
html[data-auto-theme-gradient] .card-header {
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--primary) 72%, transparent);
}
html[data-auto-theme-gradient] .navbar::after {
  background: linear-gradient(
    90deg,
    transparent 4%,
    rgb(var(--ambient-rgb) / .14) 50%,
    transparent 96%
  );
}
html[data-auto-theme-gradient] .page-title > i,
html[data-auto-theme-gradient] .nav-pills .nav-link.active {
  background: linear-gradient(
    135deg,
    rgb(var(--ambient-rgb) / .19),
    rgb(var(--ambient-alt-rgb) / .16)
  );
}
html[data-auto-exposure-switch="true"] :is(
  body, .navbar, .card, .tab-content-card, .filter-bar, .dropdown-menu,
  .modal-content, .footer, .form-control, .form-select, .btn
) {
  transition:
    color 0s linear,
    background-color 0s linear,
    border-color 1.4s cubic-bezier(.65, 0, .35, 1),
    box-shadow 1.1s cubic-bezier(.65, 0, .35, 1);
}
html[data-auto-theme-gradient][data-auto-exposure-switch="true"] {
  transition:
    --bg-body 1.4s cubic-bezier(.65, 0, .35, 1),
    --bg-card 1.4s cubic-bezier(.65, 0, .35, 1),
    --bg-input 1.4s cubic-bezier(.65, 0, .35, 1),
    --bg-header 1.4s cubic-bezier(.65, 0, .35, 1),
    --bg-soft 1.4s cubic-bezier(.65, 0, .35, 1),
    --primary 1.4s cubic-bezier(.65, 0, .35, 1),
    --accent 1.4s cubic-bezier(.65, 0, .35, 1),
    --accent2 1.4s cubic-bezier(.65, 0, .35, 1),
    --surface-rgb 1.4s cubic-bezier(.65, 0, .35, 1),
    --surface-alt-rgb 1.4s cubic-bezier(.65, 0, .35, 1),
    --surface-soft-rgb 1.4s cubic-bezier(.65, 0, .35, 1),
    --nav-rgb 1.4s cubic-bezier(.65, 0, .35, 1),
    --ambient-rgb 1.4s cubic-bezier(.65, 0, .35, 1),
    --ambient-alt-rgb 1.4s cubic-bezier(.65, 0, .35, 1);
}
.beian-item { display: inline-flex; align-items: center; vertical-align: middle; }
.beian-icon { margin-right: 3px; vertical-align: middle; flex-shrink: 0; }

/* ===== Cards ===== */
.card {
  background: var(--bg-card); border: 1px solid var(--border-light);
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: box-shadow var(--transition), border-color var(--transition); margin-bottom: 16px;
  position: relative;
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--border-accent); }
.card-header { background: linear-gradient(105deg, var(--bg-card), var(--bg-header) 72%, var(--primary-light)); border-bottom: 1px solid var(--border-light); box-shadow: inset 3px 0 0 rgba(37,99,235,.62); font-weight: 680; padding: .82rem 1.1rem; font-size: .87rem; color: var(--text-primary); letter-spacing: .1px; border-radius: var(--radius) var(--radius) 0 0 !important; }
.card-header > span > i, .card-header > i { color: var(--primary); margin-right: .25rem; }
.card-body { padding: 1.15rem; }
.card-footer { background: #fafbfc; border-top: 1px solid var(--border-light); padding: .65rem 1.1rem; color: var(--text-secondary); }
.card-hover { transition: box-shadow .22s ease, border-color .22s ease, translate .22s ease; }
.card-hover:hover { translate: 0 -2px; box-shadow: var(--shadow-md); }

/* ===== Tables ===== */
.table { font-size: .83rem; margin-bottom: 0; color: var(--text-primary); }
.table thead th { border-top: none; border-bottom: 2px solid var(--border-light); color: var(--text-muted); font-weight: 650; font-size: .73rem; text-transform: uppercase; letter-spacing: .5px; padding: .65rem .75rem; white-space: nowrap; background: var(--bg-header); }
.table td { padding: .55rem .75rem; vertical-align: middle; border-bottom: 1px solid var(--border-light); }
.table tbody tr { transition: background-color .15s ease; }
.table-hover tbody tr:hover { background: rgba(37,99,235,.045); }
.table-striped tbody tr:nth-of-type(odd) { background: #f9fafb; }
.standard-list-pagination:not(:empty) {
  padding: .72rem 1rem;
  border-top: 1px solid var(--border-light);
}
.standard-list-pagination .pagination { margin-top: 0 !important; }
.standard-pagination-shell {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem 1.1rem;
}
.standard-pagination-status {
  flex: 0 1 auto;
  color: var(--text-muted);
  font-size: .78rem;
  white-space: nowrap;
}
.standard-pagination-status strong {
  color: var(--text-primary);
  font-weight: 700;
}
.standard-pagination-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
}
.standard-pagination-shell .pagination { flex: 0 0 auto; gap: 4px; }
.standard-pagination-shell .page-link {
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .65rem;
  border-radius: 10px !important;
  line-height: 1;
}
.standard-pagination-shell .page-item.disabled .page-link,
.standard-pagination-shell .page-link:disabled {
  opacity: .42;
  cursor: not-allowed;
  pointer-events: none;
}
.standard-pagination-shell .page-item.active .page-link {
  box-shadow: 0 8px 20px var(--primary-glow);
}
.standard-pagination-jump {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--text-muted);
  font-size: .78rem;
  white-space: nowrap;
}
.standard-pagination-input {
  width: 68px;
  height: 40px;
  padding: 0 .5rem;
  color: var(--text-primary);
  text-align: center;
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  outline: none;
  appearance: textfield;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.standard-pagination-input::-webkit-inner-spin-button,
.standard-pagination-input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.standard-pagination-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}
.standard-pagination-go {
  min-width: 52px;
  height: 40px;
  padding: 0 .7rem;
  color: var(--primary);
  background: var(--primary-light);
  border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--border-light));
  border-radius: 10px;
  font-weight: 650;
}
.standard-pagination-go:hover,
.standard-pagination-go:focus {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}
@media (max-width: 767.98px) {
  .standard-pagination-shell {
    justify-content: center;
    flex-wrap: wrap;
  }
  .standard-pagination-status {
    width: 100%;
    text-align: center;
  }
  .standard-pagination-actions {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* ===== Tabs ===== */
.nav-tabs { border: 1px solid var(--border-light); border-radius: 12px; gap: 3px; padding: .3rem; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; background: rgba(226,232,240,.42); box-shadow: inset 0 1px 2px rgba(15,23,42,.025); }
.nav-tabs .nav-link { border: 1px solid transparent; color: var(--text-muted); font-weight: 550; padding: .5rem .9rem; margin: 0; border-radius: 8px; transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition); font-size: .81rem; }
.nav-tabs .nav-link:hover { color: var(--primary); background: rgba(255,255,255,.52); }
.nav-tabs .nav-link.active { color: var(--primary); background: var(--bg-card); border-color: var(--border-light); box-shadow: 0 3px 10px rgba(15,23,42,.07), inset 0 -2px 0 var(--primary); font-weight: 650; }
.nav-tabs .nav-link i { margin-right: 5px; }
.nav-tabs .nav-link { white-space: nowrap; }
.tab-content-card { margin-top: .55rem; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 1.2rem; box-shadow: var(--shadow); }

/* ===== Forms ===== */
.form-control, .form-select { background: #fff; border: 1.5px solid var(--border-light); border-radius: var(--radius-sm); font-size: .85rem; color: var(--text-primary); padding: .5rem .75rem; transition: all var(--transition); }
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-glow); outline: none; }
.unified-select { position: relative; width: 100%; }
.unified-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.unified-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  min-height: 38px;
  padding-right: 2.35rem;
  text-align: left;
  border-radius: var(--radius) !important;
}
.unified-select-trigger.form-select-sm { min-height: 34px; }
.unified-select-trigger-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.unified-select-menu {
  width: 100%;
  min-width: max(100%, 12rem);
  max-height: min(19rem, 48vh);
  overflow: hidden;
  border-radius: var(--radius) !important;
}
.unified-select-search-wrap {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: .45rem;
  background: rgb(var(--surface-rgb) / .88);
  border-bottom: 1px solid var(--border-light);
}
.unified-select-search { min-height: 34px; }
.unified-select-options {
  max-height: min(15.5rem, 40vh);
  overflow-y: auto;
  padding: .25rem;
}
.unified-select-state {
  padding: .75rem;
  color: var(--text-muted);
  text-align: center;
  font-size: .78rem;
}
/*
 * Enhanced-select menus are portalled to <body> while open. This lets them
 * escape cards and dialogs without changing a glass ancestor's overflow,
 * z-index, filter or transform (all of which would rebuild the sampled
 * backdrop and break the dialog's highlight/radius).
 */
.unified-select-menu.unified-select-menu-portaled {
  width: max(var(--unified-select-trigger-width, 12rem), 12rem);
  min-width: 0;
  max-width: calc(100vw - 1rem);
  z-index: 1090;
}
.unified-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 38px;
  border-radius: 10px !important;
}
.unified-select-option.is-selected {
  color: var(--primary);
  background: var(--primary-light);
  font-weight: 650;
}
.unified-select-option-check { flex: 0 0 auto; margin: 0 !important; opacity: 0; }
.unified-select-option.is-selected .unified-select-option-check { opacity: 1; }
.unified-select-option:disabled { color: var(--text-muted); opacity: .55; }
.unified-select-group {
  padding: .55rem .72rem .3rem;
  color: var(--text-muted);
  font-size: .7rem;
  font-weight: 700;
}
.filter-bar .unified-select { width: auto; min-width: 140px; }
.form-label { font-size: .79rem; font-weight: 550; color: var(--text-secondary); margin-bottom: .3rem; }
.form-text { font-size: .73rem; color: var(--text-muted); }
.is-invalid { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important; }
.invalid-feedback { font-size: .75rem; color: var(--danger); }

/* ===== Buttons ===== */
.btn { border-radius: var(--radius-sm); font-weight: 600; font-size: .83rem; padding: .45rem 1rem; transition: box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, translate var(--motion-fast) ease; }
.btn:hover { translate: 0 -1px; }
.btn:active { translate: 0 0 !important; }
.btn-sm { border-radius: 6px; padding: .28rem .6rem; font-size: .77rem; }
.btn-lg { padding: .6rem 1.4rem; font-size: .9rem; border-radius: var(--radius); }
.btn-primary { background: linear-gradient(135deg, var(--primary), #3b82f6); border: none; color: #fff; box-shadow: 0 4px 12px var(--primary-glow); }
.btn-primary:hover { box-shadow: 0 8px 20px rgba(37,99,235,0.24); }
.btn-outline-primary { color: var(--primary); border: 1.5px solid var(--primary); background: transparent; }
.btn-outline-primary:hover { background: var(--primary-light); }
.btn-success { background: linear-gradient(135deg, #10b860, #22c96e); border: none; color: #fff; }
.btn-danger { background: linear-gradient(135deg, var(--danger), #f87171); border: none; color: #fff; }
.btn-danger:hover { background: linear-gradient(135deg, #dc2626, #ef4444); }
.btn-warning { background: linear-gradient(135deg, var(--warning), #fbbf24); border: none; color: #1a1a1a; }
.btn-info { background: linear-gradient(135deg, var(--info), #60a5fa); border: none; color: #fff; }
.btn-outline-danger { color: var(--danger); border: 1.5px solid var(--danger); }
.btn-outline-danger:hover { background: #fde8e8; }
.btn-outline-success { color: var(--success); border: 1.5px solid var(--success); }
.btn-outline-success:hover { background: #dafbe8; }
.btn-outline-info { color: var(--info); border: 1.5px solid var(--info); }
.btn-outline-info:hover { background: #e3f1fb; }
.btn-outline-warning { color: var(--warning); border: 1.5px solid var(--warning); }
.btn-outline-warning:hover { background: #fef4e3; }

/* ===== Badges ===== */
.badge { font-weight: 550; padding: .28em .6em; font-size: .71rem; border-radius: 6px; letter-spacing: .2px; }

/* ===== Progress ===== */
.progress { border-radius: 20px; background: #e8edf5; height: 8px; overflow: hidden; }
.progress-bar { border-radius: 20px; font-size: .65rem; font-weight: 650; background: linear-gradient(90deg, var(--primary), var(--accent2)); position: relative; }
.progress-bar::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation: shimmer 2.5s infinite; }
@keyframes shimmer { 0% { left: -100%; } 100% { left: 100%; } }
.progress-bar.bg-success { background: linear-gradient(90deg, #10b860, #22c96e); }
.progress-bar.bg-warning { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.progress-bar.bg-danger  { background: linear-gradient(90deg, #ef4444, #f87171); }
.progress-bar.bg-info    { background: linear-gradient(90deg, #3b82f6, #60a5fa); }

/* ===== Alerts ===== */
.alert { border-radius: var(--radius); border: 1.5px solid transparent; padding: .75rem 1.1rem; font-size: .83rem; }
.alert-warning { background: #fef4e3; color: #92400e; border-color: #fde68a; }
.alert-success { background: #dafbe8; color: #166534; border-color: #bbf7d0; }
.alert-danger  { background: #fde8e8; color: #991b1b; border-color: #fecaca; }
.alert-info    { background: #e3f1fb; color: #075985; border-color: #bae6fd; }

/* ===== Toast ===== */
.toast-container { z-index: 9999; }
.toast { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius); box-shadow: var(--shadow-lg); min-width: 280px; animation: toastIn .3s ease-out; }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }

/* ===== Page title ===== */
.page-title {
  min-height: 74px; padding: 1rem 1.15rem; margin-bottom: 1.1rem;
  display: flex; align-items: center; gap: 10px; position: relative; isolation: isolate; overflow: hidden;
  color: var(--text-primary); font-size: 1.15rem; font-weight: 760;
  background: radial-gradient(circle at 92% 20%, var(--primary-glow), transparent 13rem), linear-gradient(120deg, var(--bg-card), var(--bg-soft));
  border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.45);
}
.page-title::after { content: ''; position: absolute; z-index: -1; width: 110px; height: 110px; right: -34px; top: -62px; border: 1px solid rgba(37,99,235,.13); border-radius: 50%; box-shadow: 0 0 0 18px rgba(37,99,235,.025), 0 0 0 36px rgba(37,99,235,.015); }
.page-title > * { position: relative; z-index: 1; }
.page-title > i { color: var(--primary); font-size: 1.12rem; background: rgba(37,99,235,.09); padding: 8px 10px; border-radius: 10px; }
.page-title-has-select {
  overflow: visible;
  z-index: 30;
}
.page-title-has-select::after {
  width: 74px;
  height: 74px;
  right: 0;
  top: 0;
  opacity: .72;
  box-shadow: inset 0 0 0 18px rgb(var(--ambient-rgb) / .025);
}
.page-title-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.page-title-label { display: flex; align-items: center; gap: 8px; }
.page-title-copy small { color: var(--text-muted); font-size: .76rem; font-weight: 500; line-height: 1.45; }
.page-fade-in { animation: pageFadeIn .32s ease-out; }
@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Opacity-only entrance keeps modal ancestors out of transformed stacking contexts. */
.page-fade-in .card { animation: cardIn .34s ease-out both; }
@keyframes cardIn { from { opacity: .35; } to { opacity: 1; } }
/* Stat card color accents */
.stat-card { text-align: center; border-radius: var(--radius); padding: 1.1rem .6rem; transition: all .28s ease; border: 1px solid var(--border-light); }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.stat-card:nth-child(1) { border-top: 3px solid var(--primary); }
.stat-card:nth-child(2) { border-top: 3px solid var(--success); }
.stat-card:nth-child(3) { border-top: 3px solid var(--warning); }
.stat-card:nth-child(4) { border-top: 3px solid var(--info); }

/* ===== KPI cards ===== */
.kpi-card { position: relative; overflow: hidden; transition: box-shadow .22s ease, border-color .22s ease, translate .22s ease; border-radius: var(--radius); border: 1px solid var(--border-light) !important; border-left: 4px solid var(--primary) !important; cursor: default; }
.kpi-card:hover { translate: 0 -3px; box-shadow: var(--shadow-lg); border-color: var(--border-accent) !important; }
.kpi-card .kpi-icon { font-size: 2.4rem; opacity: .06; position: absolute; right: 14px; top: 12px; transition: all .3s ease; }
.kpi-card:hover .kpi-icon { opacity: .1; transform: scale(1.08); }
.kpi-card .kpi-value { font-size: 1.85rem; font-weight: 750; line-height: 1.2; }
.kpi-card .kpi-label { font-size: .73rem; text-transform: uppercase; letter-spacing: .6px; opacity: .55; margin-top: 3px; font-weight: 600; }

/* ===== Charts ===== */
.chart-container { width: 100%; height: 290px; }
.chart-container-sm { width: 100%; height: 250px; }
.chart-container-lg { width: 100%; height: 340px; }

/* ===== Login ===== */
.login-page {
  min-height: 100vh; min-height: 100dvh; padding: 24px !important;
  display: grid; place-items: center; position: relative; overflow-x: hidden;
  background-color: #020617;
  background-image: radial-gradient(circle at 28% 48%, rgba(14,165,233,.15), transparent 28rem), radial-gradient(circle at 88% 10%, rgba(37,99,235,.12), transparent 30rem), linear-gradient(145deg, #020617, #061225 58%, #030712);
}
.login-shell {
  width: min(720px, 100%); min-height: min(720px, calc(100dvh - 48px));
  display: grid; grid-template-columns: 1fr;
  position: relative; z-index: 2;
  animation: loginReveal .28s ease-out both;
}
@keyframes loginReveal { from { opacity: .35; } to { opacity: 1; } }
.login-brand-panel {
  display: flex; flex-direction: column; position: fixed; z-index: -1; isolation: isolate; overflow: hidden;
  inset: 0; padding: clamp(1.5rem, 3vw, 2.8rem); color: #fff;
  background-image: radial-gradient(circle at 28% 48%, rgba(14,165,233,.08), transparent 21rem);
}
.login-brand-panel::before { content: ''; position: absolute; z-index: -1; width: 90vw; height: 1px; left: -15vw; top: 51%; background: linear-gradient(90deg, transparent, rgb(var(--ambient-rgb) / .42), transparent); box-shadow: 0 0 26px rgb(var(--ambient-rgb) / .24); transform: rotate(-16deg); animation: geoSweep 9s ease-in-out infinite; }
.login-brand-panel::after { content: ''; position: absolute; z-index: -2; inset: -12%; opacity: .72; background: radial-gradient(circle at 24% 42%, rgb(var(--ambient-rgb) / .17), transparent 27%), radial-gradient(circle at 76% 18%, rgb(var(--ambient-alt-rgb) / .13), transparent 24%), radial-gradient(circle at 62% 78%, rgb(var(--ambient-rgb) / .09), transparent 28%); filter: blur(32px); animation: loginAurora 16s ease-in-out infinite alternate; }
@keyframes geoSweep { 0%,100% { opacity: .35; transform: translateX(-4%) rotate(-24deg); } 50% { opacity: 1; transform: translateX(12%) rotate(-24deg); } }
@keyframes loginAurora { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.08); } }
.login-brand-mark { position: relative; z-index: 3; display: flex; align-items: center; gap: .85rem; }
.login-brand-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 12px; color: #e0f2fe; font-size: 1.12rem; background: rgba(255,255,255,.055); border: 1px solid rgba(186,230,253,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 32px rgba(2,132,199,.12); }
.login-brand-mark strong { display: block; color: rgba(248,250,252,.92); font-size: .88rem; letter-spacing: .08em; font-weight: 600; }
.login-geometry { width: min(72vw, 760px); aspect-ratio: 1; position: absolute; left: 50%; top: 50%; animation: geoFloat 7s ease-in-out infinite; will-change: transform, translate; }
.geo-grid { position: absolute; inset: 18%; border-radius: 50%; opacity: .42; background: radial-gradient(circle at 50% 50%, rgb(var(--ambient-rgb) / .18), transparent 34%), conic-gradient(from 36deg, transparent, rgb(var(--ambient-alt-rgb) / .13), transparent 28%, rgb(var(--ambient-rgb) / .08), transparent 62%); filter: blur(5px); mask-image: radial-gradient(circle, #000 8%, transparent 70%); }
.geo-orbit { position: absolute; inset: 11%; border: 1px solid rgb(var(--ambient-rgb) / .22); border-radius: 50%; box-shadow: inset 0 0 36px rgb(var(--ambient-rgb) / .035), 0 0 36px rgb(var(--ambient-rgb) / .035); will-change: transform, translate; }
.geo-orbit::before { content: ''; position: absolute; width: 8px; height: 8px; left: 50%; top: -4px; border-radius: 50%; background: rgb(var(--ambient-rgb)); box-shadow: 0 0 5px rgb(255 255 255 / .72), 0 0 20px rgb(var(--ambient-rgb) / .68); }
.geo-orbit-one { animation: orbitSpin 18s linear infinite; }
.geo-orbit-two { inset: 23%; border-style: dashed; border-color: rgb(var(--ambient-alt-rgb) / .20); animation: orbitSpinReverse 24s linear infinite; }
.geo-orbit-two::before { width: 6px; height: 6px; top: auto; bottom: -3px; background: rgb(var(--ambient-alt-rgb)); }
.geo-core { position: absolute; left: 50%; top: 50%; width: 82px; height: 82px; display: grid; place-items: center; color: var(--text-primary); font-size: 1.45rem; border: 1px solid rgb(var(--glass-border-rgb) / .24); border-radius: 24px; background: linear-gradient(145deg, rgb(var(--ambient-rgb) / .22), rgb(var(--surface-rgb) / .46)); box-shadow: inset 0 .5px 0 rgb(255 255 255 / .09), 0 0 42px rgb(var(--ambient-rgb) / .18), 0 18px 50px rgba(0,0,0,.28); transform: translate(-50%,-50%) rotate(45deg); }
.geo-core i { transform: rotate(-45deg); filter: drop-shadow(0 0 10px rgb(var(--ambient-rgb) / .42)); }
.geo-node { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--ambient-rgb)); box-shadow: 0 0 0 7px rgb(var(--ambient-rgb) / .055), 0 0 25px rgb(var(--ambient-rgb) / .46); animation: nodePulse 3.6s ease-in-out infinite; }
.geo-node-one { left: 7%; top: 36%; }
.geo-node-two { right: 8%; top: 62%; animation-delay: -1.2s; }
.geo-node-three { left: 42%; bottom: 3%; animation-delay: -2.4s; }
.geo-glass { position: absolute; display: block; border: 1px solid rgba(186,230,253,.18); background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(14,165,233,.015)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 30px rgba(0,0,0,.16); }
.geo-glass-one { width: 54px; height: 54px; right: 4%; top: 13%; border-radius: 16px; transform: rotate(17deg); animation: glassDrift 7.5s ease-in-out infinite; }
.geo-glass-two { width: 34px; height: 34px; left: 12%; bottom: 13%; border-radius: 50%; animation: glassDrift 6s ease-in-out -2s infinite reverse; }
.geo-glass-three { width: 64px; height: 18px; left: 2%; top: 20%; border-radius: 999px; transform: rotate(-18deg); animation: glassDrift 8s ease-in-out -4s infinite; }
.login-geometry-dots { display: flex; gap: 8px; position: absolute; z-index: 3; left: clamp(1.5rem, 3vw, 2.8rem); bottom: clamp(1.5rem, 3vw, 2.8rem); }
.login-geometry-dots span { width: 4px; height: 4px; border-radius: 50%; background: rgba(186,230,253,.24); box-shadow: 0 0 9px rgba(56,189,248,.18); }
.login-geometry-dots span:nth-child(3) { width: 28px; border-radius: 999px; background: rgba(125,211,252,.52); }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes orbitSpinReverse { to { transform: rotate(-360deg); } }
@keyframes geoFloat { 0%,100% { transform: translate(-50%,-50%); } 50% { transform: translate(-50%,calc(-50% - 9px)); } }
@keyframes glassDrift { 0%,100% { translate: 0 0; opacity: .65; } 50% { translate: 5px -8px; opacity: 1; } }
@keyframes nodePulse { 0%,100% { opacity: .42; scale: .82; } 50% { opacity: 1; scale: 1; } }
.login-form-panel { grid-column: 1; display: flex; align-items: center; justify-content: center; position: relative; padding: clamp(2rem, 4vw, 4rem); background: transparent; }
.login-card { width: 100%; max-width: 430px; position: relative; z-index: 1; padding: clamp(2rem, 3.4vw, 3rem); border: 1px solid rgba(125,211,252,.15); border-radius: 24px; background: rgba(7,18,34,.91); box-shadow: 0 32px 90px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.055); }
.login-header { margin-bottom: 1.8rem; text-align: left; }
.login-mobile-brand { display: none; }
.login-header h2 { margin-bottom: .5rem; color: #f8fafc; font-size: 1.8rem; font-weight: 760; letter-spacing: -.025em; }
.login-body { padding: 0; }
.login-body .form-label { margin-bottom: .45rem; color: #94a3b8; font-size: .78rem; font-weight: 650; }
.login-input-group { border: 1px solid rgba(148,163,184,.18); border-radius: 11px; background: rgba(255,255,255,.045); transition: border-color .18s ease, box-shadow .18s ease; overflow: hidden; }
.login-input-group:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-glow); }
.login-input-group .input-group-text { padding-left: .9rem; padding-right: .65rem; color: #64748b; background: transparent; border: 0; }
.login-input-group .form-control { min-height: 49px; padding-left: .25rem; border: 0; box-shadow: none !important; background: transparent; color: #f8fafc; font-size: .9rem; }
.login-input-group .form-control::placeholder { color: #64748b; }
/* Keep one password visibility control: browsers such as Edge may add their own reveal button. */
#loginPassword::-ms-reveal,
#loginPassword::-ms-clear,
#loginPassword::-webkit-credentials-auto-fill-button {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}
.login-input-group .login-password-toggle { min-width: 46px; min-height: 46px; padding: 0; color: #64748b; background: transparent; border: 0; border-radius: 0; translate: none; }
.login-input-group .login-password-toggle:hover { color: #7dd3fc; background: rgba(56,189,248,.08); }
.login-page input:-webkit-autofill, .login-page input:-webkit-autofill:hover, .login-page input:-webkit-autofill:focus { color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; background-color: rgb(var(--surface-alt-rgb)) !important; box-shadow: 0 0 0 1000px rgb(var(--surface-alt-rgb)) inset !important; -webkit-box-shadow: 0 0 0 1000px rgb(var(--surface-alt-rgb)) inset !important; caret-color: var(--text-primary); }
.login-submit { min-height: 49px; border-radius: 11px; font-size: .9rem; letter-spacing: .02em; }
.login-footer { margin-top: 2rem; padding-top: 1.15rem; text-align: center; font-size: .7rem; color: #64748b; border-top: 1px solid rgba(148,163,184,.12); }
.login-card .text-muted { color: #64748b !important; }
.login-appearance { position: fixed; z-index: 30; top: 24px; right: 24px; }
.login-appearance-trigger {
  width: 42px; height: 42px; padding: 0; display: inline-grid; place-items: center;
  color: var(--text-secondary); background: rgb(var(--surface-rgb) / .42);
  border: 1px solid rgb(var(--glass-border-rgb) / .16); border-radius: 50%;
  box-shadow: 0 12px 30px rgb(2 8 18 / .16);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  backdrop-filter: blur(20px) saturate(125%);
}
.login-appearance-trigger:hover, .login-appearance-trigger:focus-visible {
  color: var(--primary); background: rgb(var(--surface-rgb) / .56);
}
body.login-page .login-appearance-menu {
  margin-top: .55rem !important;
  /* Bootstrap positions this menu below the fixed 42px trigger. Account for
     that top offset instead of sizing it as if it started at the viewport. */
  max-height: calc(100dvh - 92px);
  overscroll-behavior: contain;
}

/* The login scene follows the selected light/dark theme without changing its geometry. */
[data-bs-theme="light"] .login-page {
  background-color: #edf5ff;
  background-image: radial-gradient(circle at 50% 47%, rgba(14,165,233,.15), transparent 31rem), radial-gradient(circle at 88% 8%, rgba(37,99,235,.11), transparent 27rem), linear-gradient(145deg, #f8fbff, #eaf3ff 58%, #f7fbff);
}
[data-bs-theme="light"] .login-brand-panel { background-image: radial-gradient(circle at 50% 48%, rgba(14,165,233,.08), transparent 25rem); }
[data-bs-theme="light"] .login-brand-panel::after { opacity: .6; background: radial-gradient(circle at 24% 42%, rgb(var(--ambient-rgb) / .16), transparent 27%), radial-gradient(circle at 76% 18%, rgb(var(--ambient-alt-rgb) / .12), transparent 24%), radial-gradient(circle at 62% 78%, rgb(var(--ambient-rgb) / .08), transparent 28%); }
[data-bs-theme="light"] .login-brand-mark strong { color: #172033; }
[data-bs-theme="light"] .login-brand-icon { color: #2563eb; background: rgba(255,255,255,.58); border-color: rgba(37,99,235,.17); box-shadow: inset 0 1px 0 #fff, 0 12px 34px rgba(37,99,235,.10); }
[data-bs-theme="light"] .geo-grid { opacity: .44; background: radial-gradient(circle at 50% 50%, rgb(var(--ambient-rgb) / .16), transparent 34%), conic-gradient(from 36deg, transparent, rgb(var(--ambient-alt-rgb) / .12), transparent 28%, rgb(var(--ambient-rgb) / .07), transparent 62%); }
[data-bs-theme="light"] .geo-orbit { border-color: rgba(37,99,235,.22); box-shadow: inset 0 0 40px rgba(14,165,233,.035), 0 0 38px rgba(37,99,235,.045); }
[data-bs-theme="light"] .geo-orbit-two { border-color: rgba(37,99,235,.18); }
[data-bs-theme="light"] .geo-core { color: #2563eb; border-color: rgba(37,99,235,.24); background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(219,234,254,.68)); box-shadow: inset 0 1px 0 #fff, 0 0 46px rgba(14,165,233,.18), 0 18px 50px rgba(30,64,175,.12); }
[data-bs-theme="light"] .geo-node { background: #2563eb; box-shadow: 0 0 0 7px rgba(37,99,235,.06), 0 0 24px rgba(14,165,233,.45); }
[data-bs-theme="light"] .geo-glass { border-color: rgba(37,99,235,.18); background: linear-gradient(145deg, rgba(255,255,255,.64), rgba(14,165,233,.03)); box-shadow: inset 0 1px 0 #fff, 0 12px 30px rgba(30,64,175,.09); }
[data-bs-theme="light"] .login-geometry-dots span { background: rgba(37,99,235,.24); }
[data-bs-theme="light"] .login-geometry-dots span:nth-child(3) { background: rgba(37,99,235,.52); }
[data-bs-theme="light"] .login-card { border-color: rgba(255,255,255,.78); background: rgba(255,255,255,.88); box-shadow: 0 32px 90px rgba(45,75,120,.18), inset 0 1px 0 #fff; }
[data-bs-theme="light"] .login-header h2 { color: #172033; }
[data-bs-theme="light"] .login-body .form-label { color: #526078; }
[data-bs-theme="light"] .login-input-group { border-color: rgba(71,85,105,.16); background: rgba(255,255,255,.62); }
[data-bs-theme="light"] .login-input-group .input-group-text, [data-bs-theme="light"] .login-input-group .login-password-toggle { color: #8793a8; }
[data-bs-theme="light"] .login-input-group .form-control { color: #172033; }
[data-bs-theme="light"] .login-input-group .form-control::placeholder { color: #94a3b8; }
[data-bs-theme="light"] .login-footer { color: #8793a8; border-top-color: rgba(71,85,105,.10); }
[data-bs-theme="light"] .login-card .text-muted { color: #8793a8 !important; }
[data-bs-theme="light"] .login-page input:-webkit-autofill, [data-bs-theme="light"] .login-page input:-webkit-autofill:hover, [data-bs-theme="light"] .login-page input:-webkit-autofill:focus { color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; background-color: rgb(var(--surface-alt-rgb)) !important; box-shadow: 0 0 0 1000px rgb(var(--surface-alt-rgb)) inset !important; -webkit-box-shadow: 0 0 0 1000px rgb(var(--surface-alt-rgb)) inset !important; caret-color: var(--text-primary); }
#bgCanvas { position: fixed; top:0; left:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.bg-particles { position: fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:hidden; }
.particle { position: absolute; border-radius: 50%; pointer-events: none; }
.particle.dot { background: rgb(var(--ambient-rgb)); opacity: 0; filter: blur(.2px); animation: floatDrift linear infinite; }
.particle.orb { background: radial-gradient(circle, rgb(var(--ambient-alt-rgb) / .2) 0%, rgb(var(--ambient-rgb) / .06) 42%, transparent 72%); opacity: 0; filter: blur(2px); animation: floatSlow linear infinite; }
.particle.spark { background: rgb(var(--ambient-rgb)); opacity: 0; box-shadow: 0 0 8px 2px rgb(var(--ambient-rgb) / .34); animation: twinkle ease-in-out infinite; }
.ambient-paused .particle { animation-play-state: paused !important; }
@keyframes floatDrift { 0% { transform: translateY(105vh) translateX(0) scale(0.3) rotate(0deg); opacity: 0; } 7% { opacity: 0.085; } 86% { opacity: 0.06; } 100% { transform: translateY(-12vh) translateX(60px) scale(1) rotate(180deg); opacity: 0; } }
@keyframes floatSlow { 0% { transform: translateY(105vh) translateX(0) scale(0.5); opacity: 0; } 9% { opacity: 0.12; } 89% { opacity: 0.08; } 100% { transform: translateY(-15vh) translateX(-40px) scale(1.3); opacity: 0; } }
@keyframes twinkle { 0%, 100% { opacity: 0.025; transform: scale(0.8); } 50% { opacity: 0.16; transform: scale(1.4); } }
.app-pointer-glow {
  position: fixed; z-index: 0; left: 0; top: 0; width: 260px; height: 260px;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgb(var(--ambient-rgb) / .13), rgb(var(--ambient-alt-rgb) / .055) 34%, transparent 70%);
  filter: blur(10px); transition: opacity .16s ease; will-change: transform;
}
.app-pointer-glow.is-visible { opacity: 1; }

#toastContainer { z-index: 9999 !important; }

/* ===== Filter ===== */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-bottom: 1rem; padding: .9rem 1rem; background: linear-gradient(110deg, var(--bg-card), var(--bg-header)); border: 1px solid var(--border-light); border-radius: var(--radius); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.42); }
.filter-bar .form-control, .filter-bar .form-select { width: auto; min-width: 140px; }
.sales-filter-search { flex: 1 1 520px; min-width: 0; }
.sales-filter-action { flex: 0 0 auto; margin-left: auto; }

/* ===== Misc ===== */
.action-btns .btn { padding: .32rem .6rem; font-size: .8rem; margin: 0 2px; min-width: 38px; min-height: 38px; border-radius: var(--radius-sm); }
.empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--text-muted); }
.empty-state .empty-icon { font-size: 3.5rem; opacity: .18; margin-bottom: .8rem; }
.empty-state .empty-text { font-size: .92rem; font-weight: 550; margin-bottom: .3rem; }
.empty-state .empty-hint { font-size: .78rem; opacity: .5; }
.permission-denied-card {
  max-width: 680px;
  margin: clamp(2.5rem, 10vh, 7rem) auto 0;
  overflow: hidden;
}
.permission-denied-card .card-body { padding: clamp(2.2rem, 6vw, 4.5rem) 1.5rem; }
.permission-denied-card h1 { color: var(--text-primary); }
.permission-denied-card .text-muted { color: var(--text-muted) !important; opacity: 1; }
.permission-denied-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 1.25rem;
  display: grid;
  place-items: center;
  border-radius: 24px;
  color: var(--primary);
  font-size: 2rem;
  background: rgba(37, 99, 235, .09);
  border: 1px solid rgba(37, 99, 235, .18);
  box-shadow: 0 18px 48px rgba(37, 99, 235, .12);
}
[data-bs-theme="dark"] .permission-denied-card h1 { color: #f8fafc; }
[data-bs-theme="dark"] .permission-denied-card .text-muted { color: #aebed4 !important; }
.status-badge { display: inline-block; padding: .18em .55em; border-radius: 10px; font-size: .73rem; font-weight: 550; }
.status-badge-active   { background: #dafbe8; color: #166534; }
.status-badge-pending  { background: #fef4e3; color: #92400e; }
.status-badge-done     { background: #eef2ff; color: #1e40af; }
.status-badge-danger   { background: #fde8e8; color: #991b1b; }
.steps { display: flex; align-items: center; flex-wrap: wrap; }
.step { display: flex; align-items: center; font-size: .78rem; color: var(--text-muted); }
.step.active { color: var(--primary); font-weight: 650; }
.step.done { color: var(--success); }
.step .step-dot { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 700; margin-right: 4px; background: var(--border-light); color: var(--text-muted); transition: all var(--transition); }
.step.active .step-dot { background: var(--primary); color: #fff; box-shadow: 0 2px 8px var(--primary-glow); }
.step.done .step-dot   { background: var(--success); color: #fff; }
.stat-card .stat-value { font-size: 1.6rem; font-weight: 750; line-height: 1.2; }
.stat-card .stat-label { font-size: .73rem; color: var(--text-muted); margin-top: 3px; font-weight: 500; }

/* Dashboard overview cards use semantic accents without large color blocks. */
#kpiRow .card {
  --metric-color: var(--primary); --metric-soft: rgba(37,99,235,.10);
  min-height: 112px; color: var(--text-primary) !important; background: var(--bg-card) !important;
  border: 1px solid var(--border-light); overflow: hidden;
}
#kpiRow .card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--metric-color); }
#kpiRow .card-body { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-content: center; column-gap: .7rem; text-align: left !important; padding: .85rem .9rem !important; }
#kpiRow .card-body > i { grid-row: 1 / span 2; align-self: center; width: 34px; height: 34px; display: inline-flex !important; align-items: center; justify-content: center; margin: 0 !important; color: var(--metric-color); font-size: 1rem !important; opacity: 1 !important; border-radius: 10px; background: var(--metric-soft); }
#kpiRow h6 { margin: 0; align-self: end; color: var(--text-muted); font-size: .72rem; font-weight: 600; }
#kpiRow h3 { margin: 1px 0 0; align-self: start; color: var(--text-primary); font-size: 1.45rem; font-weight: 760; line-height: 1.15; }
#kpiRow .bg-info { --metric-color: #0891b2; --metric-soft: rgba(8,145,178,.11); }
#kpiRow .bg-success { --metric-color: #059669; --metric-soft: rgba(5,150,105,.11); }
#kpiRow .bg-warning { --metric-color: #d97706; --metric-soft: rgba(217,119,6,.11); }
#kpiRow .bg-secondary { --metric-color: #64748b; --metric-soft: rgba(100,116,139,.12); }
#kpiRow .bg-dark { --metric-color: #334155; --metric-soft: rgba(51,65,85,.11); }
.modal-backdrop { z-index: 1050 !important; }
.modal-content { border: 1px solid var(--border-light); border-top: 3px solid var(--primary); border-radius: var(--radius-lg); box-shadow: 0 28px 80px rgba(15,23,42,.26); overflow: hidden; }
.modal-header { padding: 1rem 1.15rem; background: var(--bg-header); border-bottom-color: var(--border-light); }
.modal-title { font-size: 1rem; font-weight: 700; }
.modal-body { padding: 1.15rem; }
.modal-footer { padding: .85rem 1.15rem; background: var(--bg-header); border-top-color: var(--border-light); }
.perm-toolbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .55rem;
}
.perm-scroll-guide {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  color: var(--text-muted);
  font-size: .72rem;
}
.perm-matrix-shell {
  --perm-module-width: 188px;
  --perm-action-width: 68px;
  position: relative;
  margin: 0 -1rem;
  width: calc(100% + 2rem);
}
.perm-scrollbar-top {
  display: none;
  height: 18px;
  margin-bottom: .32rem;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border-light);
  border-radius: 9px;
  background: rgb(var(--surface-alt-rgb) / var(--glass-control-alpha));
  scrollbar-color: var(--primary) rgb(var(--surface-alt-rgb) / .65);
  scrollbar-width: auto;
}
.perm-matrix-shell.has-horizontal-overflow .perm-scrollbar-top {
  display: block;
}
.perm-scrollbar-track { height: 1px; }
.perm-scroll,
.perm-scrollbar-top {
  scrollbar-color: var(--primary) rgb(var(--surface-alt-rgb) / .65);
}
.perm-scroll {
  overflow: auto;
  max-height: 72vh;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.perm-scroll:focus-visible,
.perm-scrollbar-top:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 62%, transparent);
  outline-offset: 2px;
}
.perm-scroll::-webkit-scrollbar,
.perm-scrollbar-top::-webkit-scrollbar { width: 12px; height: 12px; }
.perm-scroll::-webkit-scrollbar-track,
.perm-scrollbar-top::-webkit-scrollbar-track {
  background: rgb(var(--surface-alt-rgb) / .65);
  border-radius: 10px;
}
.perm-scroll::-webkit-scrollbar-thumb,
.perm-scrollbar-top::-webkit-scrollbar-thumb {
  min-width: 48px;
  background: color-mix(in srgb, var(--primary) 76%, #94a3b8);
  border: 2px solid rgb(var(--surface-alt-rgb) / .72);
  border-radius: 10px;
}
.perm-scroll::-webkit-scrollbar-thumb:hover,
.perm-scrollbar-top::-webkit-scrollbar-thumb:hover { background: var(--primary); }
#permTable {
  min-width: max-content;
  border-collapse: separate;
  border-spacing: 0;
}
#permTable thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  color: var(--text-secondary);
  background: rgb(var(--surface-alt-rgb) / .98) !important;
  box-shadow: inset 0 -1px var(--border-light);
  white-space: nowrap;
}
.perm-module-column {
  left: 0;
  width: var(--perm-module-width);
  min-width: var(--perm-module-width);
  max-width: var(--perm-module-width);
  white-space: normal;
}
.perm-action-column {
  left: var(--perm-module-width);
  width: var(--perm-action-width);
  min-width: var(--perm-action-width);
  border-right: 2px solid color-mix(in srgb, var(--primary) 20%, var(--border-light)) !important;
}
.perm-role-column { min-width: 96px; }
.perm-sticky { position: sticky; z-index: 1; }
#permTable thead th.perm-sticky { z-index: 4; color: var(--text-muted); font-weight: 650; }
.perm-cb:focus { outline: none; box-shadow: none; }
.perm-cb:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 70%, white);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
.perm-cb { cursor: pointer; }
#permTable td { transition: background-color .6s ease; }
.pagination { gap: 2px; }
.pagination .page-link { border-radius: 6px !important; border: 1px solid var(--border-light); color: var(--text-secondary); padding: .35rem .7rem; font-size: .82rem; transition: all .15s ease; }
.pagination .page-link:hover { background: var(--primary-light); color: var(--primary); }
.pagination .active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ===== Dark mode override helpers ===== */
html[data-bs-theme="dark"] body { background-color: #0d1424 !important; color: #f1f5f9 !important; }
[data-bs-theme="dark"] body .container,
[data-bs-theme="dark"] body .container-fluid { color: #f1f5f9; }
[data-bs-theme="dark"] .bg-white { background-color: #1e293b !important; }
[data-bs-theme="dark"] .btn-outline-secondary { color: #cbd5e1; border-color: #475569; }
[data-bs-theme="dark"] .btn-outline-secondary:hover { background: #334155; color: #f1f5f9; }
[data-bs-theme="dark"] .btn-outline-danger { color: #f87171; border-color: #f87171; }
[data-bs-theme="dark"] h1,[data-bs-theme="dark"] h2,[data-bs-theme="dark"] h3,[data-bs-theme="dark"] h4,[data-bs-theme="dark"] h5,[data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .h1,[data-bs-theme="dark"] .h2,[data-bs-theme="dark"] .h3,[data-bs-theme="dark"] .h4,[data-bs-theme="dark"] .h5,[data-bs-theme="dark"] .h6,
[data-bs-theme="dark"] strong,[data-bs-theme="dark"] .fw-bold,[data-bs-theme="dark"] .fw-semibold,[data-bs-theme="dark"] .page-title { color: #f1f5f9; }
[data-bs-theme="dark"] .text-dark { color: #f1f5f9 !important; }
[data-bs-theme="dark"] .text-primary { color: #a78bfa !important; }
[data-bs-theme="dark"] .text-secondary { color: #cbd5e1 !important; }
[data-bs-theme="dark"] .text-muted { color: var(--text-muted) !important; }
[data-bs-theme="dark"] .navbar.bg-white { background: rgba(13,20,36,0.97) !important; }
[data-bs-theme="dark"] .navbar { border-bottom-color: var(--border-light) !important; }
[data-bs-theme="dark"] .navbar .nav-link { color: var(--text-secondary) !important; }
[data-bs-theme="dark"] .navbar .nav-link:hover { color: var(--primary) !important; }
[data-bs-theme="dark"] .navbar-brand { color: var(--text-primary) !important; }
[data-bs-theme="dark"] .dropdown-menu { background: #172033; border-color: var(--border-light); }
[data-bs-theme="dark"] .dropdown-item { color: var(--text-secondary); }
[data-bs-theme="dark"] .dropdown-item:hover { background: var(--primary-light); color: var(--primary); }
[data-bs-theme="dark"] .card { background: var(--bg-card); border-color: var(--border-light); }
[data-bs-theme="dark"] .card-header { border-bottom-color: var(--border-light); color: var(--text-primary); }
[data-bs-theme="dark"] .card-footer { border-top-color: var(--border-light); background: rgba(0,0,0,0.2); }
[data-bs-theme="dark"] .table { color: var(--text-primary); }
[data-bs-theme="dark"] .table thead th { background: var(--bg-header); border-bottom-color: var(--border-light); }
[data-bs-theme="dark"] .table td { border-bottom-color: var(--border-light); }
[data-bs-theme="dark"] .table-hover tbody tr:hover { background: rgba(167,139,250,0.08); }
[data-bs-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,0.02); }
[data-bs-theme="dark"] .form-control,[data-bs-theme="dark"] .form-select { background: var(--bg-input); border-color: var(--border-light); color: var(--text-primary); }
[data-bs-theme="dark"] .form-control:focus,[data-bs-theme="dark"] .form-select:focus { border-color: var(--primary); }
[data-bs-theme="dark"] .modal-content { background: #172033; border-color: var(--border-light); }
[data-bs-theme="dark"] .modal-header { border-bottom-color: var(--border-light); }
[data-bs-theme="dark"] .modal-footer { border-top-color: var(--border-light); }
[data-bs-theme="dark"] .nav-tabs { border-bottom-color: var(--border-light); }
[data-bs-theme="dark"] .nav-tabs { background: rgba(2,6,23,.28); }
[data-bs-theme="dark"] .nav-tabs .nav-link:hover { background: rgba(96,165,250,.07); }
[data-bs-theme="dark"] .nav-tabs .nav-link.active { color: var(--primary); }
[data-bs-theme="dark"] .tab-content-card { background: var(--bg-card); border-color: var(--border-light); }
[data-bs-theme="dark"] .filter-bar { background: var(--bg-card); border-color: var(--border-light); }
[data-bs-theme="dark"] .footer { background: rgba(0,0,0,0.3); border-top-color: var(--border-light); }
[data-bs-theme="dark"] .login-page { background-color: #020617; background-image: radial-gradient(circle at 28% 48%, rgba(14,165,233,.16), transparent 28rem), radial-gradient(circle at 88% 10%, rgba(37,99,235,.12), transparent 30rem), linear-gradient(145deg, #020617, #061225 58%, #030712); }
[data-bs-theme="dark"] .login-form-panel { background: transparent; }
[data-bs-theme="dark"] .login-card { border-color: rgba(125,211,252,.14); background: rgba(10,20,37,.90); box-shadow: 0 32px 90px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.05); }
[data-bs-theme="dark"] .login-footer { border-top-color: var(--border-light); }
[data-bs-theme="dark"] .navbar-collapse { background: #0d1424; }
[data-bs-theme="dark"] .bg-light { background: #172033 !important; }
[data-bs-theme="dark"] .border { border-color: var(--border-light) !important; }
[data-bs-theme="dark"] .toast,[data-bs-theme="dark"] .toast .toast-header { background: #172033; border-color: var(--border-light); color: var(--text-primary); }
[data-bs-theme="dark"] .toast-body { color: var(--text-primary); }
[data-bs-theme="dark"] .badge { color: #fff !important; }
[data-bs-theme="dark"] .alert-warning { background: #2d2010; color: #fbbf24; border-color: #5c4518; }
[data-bs-theme="dark"] .alert-success { background: #0d2820; color: #4ade80; border-color: #1a4a30; }
[data-bs-theme="dark"] .alert-danger  { background: #2d1010; color: #f87171; border-color: #5c2828; }
[data-bs-theme="dark"] .alert-info    { background: #0d1a30; color: #60a5fa; border-color: #1e3a5c; }
[data-bs-theme="dark"] .btn-close { filter: invert(1); }
[data-bs-theme="dark"] .pagination .page-link { background: var(--bg-input); border-color: var(--border-light); color: var(--text-secondary); }
[data-bs-theme="dark"] .pagination .page-link:hover { background: var(--primary-light); }
[data-bs-theme="dark"] .pagination .active .page-link { background: var(--primary); border-color: var(--primary); }
[data-bs-theme="dark"] .progress { background: #334155; }
[data-bs-theme="dark"] small,[data-bs-theme="dark"] .small { color: #cbd5e1; }
[data-bs-theme="dark"] td,[data-bs-theme="dark"] th { color: #f1f5f9; }
[data-bs-theme="dark"] .order-card { color: #f1f5f9; }
[data-bs-theme="dark"] .order-card .text-muted { color: #7b8faa !important; }

/* ===== Dashboard: weekly plans ===== */
.weekly-plan-header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.weekly-plan-title { min-width: 0; overflow-wrap: anywhere; }
.weekly-plan-subitems { list-style: none; padding-left: 1.35rem; display: grid; gap: .32rem; }
.weekly-plan-subitem { display: flex; align-items: flex-start; gap: .5rem; min-width: 0; line-height: 1.45; }
.weekly-plan-toggle { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: .08rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color .12s ease, transform .12s ease; }
.weekly-plan-toggle:hover { color: var(--primary); transform: scale(1.12); }
.weekly-plan-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.weekly-plan-toggle.is-done { color: var(--success); }
.weekly-plan-toggle:disabled { cursor: wait; opacity: .65; transform: none; }
.weekly-plan-toggle > i { font-size: .82rem; line-height: 1; }
.weekly-plan-subitem-text { min-width: 0; overflow-wrap: anywhere; }
.weekly-plan-item { transition: opacity .16s ease, transform .16s ease; }
.weekly-plan-item.is-removing { opacity: 0; transform: translateX(8px); }
.task-progress-input { width: 88px; }
.task-progress-input .form-control { min-width: 0; text-align: center; padding-inline: .35rem; }
.task-progress-input .input-group-text { padding-inline: .45rem; font-weight: 700; color: var(--text-secondary); }
.dashboard-recent-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(5rem, .7fr) minmax(7rem, 1fr);
  align-items: center;
  column-gap: 1rem;
}
.dashboard-recent-status { text-align: center; white-space: nowrap; }
.dashboard-recent-value { min-width: 0; text-align: right; white-space: nowrap; }
@media (max-width: 575.98px) {
  .dashboard-recent-row {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: .75rem;
  }
  .dashboard-recent-status { display: none; }
}
.alert-target-row { cursor: pointer; }
.alert-target-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.alert-target-row:hover > td {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.record-focus-highlight {
  scroll-margin-top: 128px;
  animation: record-focus-pulse 1.2s ease-in-out 2;
}
tr.record-focus-highlight > td,
.record-focus-highlight.card,
.record-focus-highlight > .card {
  background: color-mix(in srgb, var(--primary) 14%, var(--bg-card)) !important;
  box-shadow: inset 4px 0 0 var(--primary);
}
@keyframes record-focus-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}
.responsibility-total-badge {
  color: #1d4ed8;
  background: rgba(37,99,235,.11);
  border-color: rgba(37,99,235,.28) !important;
}
[data-bs-theme="dark"] .responsibility-total-badge {
  color: #e9d5ff;
  background: rgba(167,139,250,.22);
  border-color: rgba(196,181,253,.46) !important;
}

/* ===== Responsive ===== */
@media (max-width: 1399.98px) {
  body { padding-top: 60px; }
  .navbar-collapse { max-height: calc(100vh - 60px); overflow-y: auto; background: var(--bg-card); padding: .6rem 1rem 1.1rem; border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-md); }
  .navbar .nav-link { padding: .6rem .75rem !important; font-size: .9rem; border-radius: var(--radius); }
  .navbar .nav-link i { font-size: 1rem; margin-right: 10px; }
  .navbar-nav .dropdown-menu:not(.appearance-menu) {
    position: static;
    margin: .2rem 0 .45rem;
    padding: .38rem;
    background: rgb(var(--surface-rgb) / var(--glass-menu-alpha));
    border: 1px solid rgb(var(--glass-border-rgb) / var(--glass-border-alpha));
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    transition: none;
  }
  .navbar .dropdown-item { padding: .55rem .75rem; font-size: .86rem; border-radius: calc(var(--radius) - 4px); transition: background-color .05s; }
  .navbar-text { flex-wrap: wrap; gap: .5rem; padding: .55rem 0 0; }
  .navbar-text .btn { padding: .4rem .8rem; font-size: .82rem; }
  .navbar-toggler { border-color: var(--border-accent); padding: .3rem .55rem; }
  .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(37,99,235,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
  [data-bs-theme="dark"] .navbar-collapse { background: var(--bg-card) !important; }
  [data-bs-theme="dark"] .navbar-nav .dropdown-menu:not(.appearance-menu) {
    background: rgb(var(--surface-rgb) / var(--glass-menu-alpha)) !important;
    border-color: var(--border-light) !important;
  }
  [data-bs-theme="dark"] .navbar .dropdown-item { color: var(--text-secondary) !important; }
  [data-bs-theme="dark"] .navbar .dropdown-item:hover { background: var(--primary-light) !important; color: var(--primary) !important; }
  [data-bs-theme="dark"] .navbar .nav-link { color: var(--text-secondary) !important; }
  [data-bs-theme="dark"] .navbar .dropdown-header { color: var(--text-muted) !important; }
  /*
   * Keep the sampled scene present in standard mode. A transparent material
   * cannot visibly frost or refract a flat, hidden backdrop. Lite mode still
   * disables both layers below for low-performance devices.
   */
}

@media (max-width: 991px) {
  .kpi-card .kpi-value { font-size: 1.35rem; }
  .table { font-size: .76rem; }
  .card-body { padding: .8rem; }
  .login-page { padding: 16px !important; overflow-y: auto; }
  .login-shell { min-height: calc(100dvh - 32px); grid-template-columns: 1fr; }
  .login-brand-panel { display: flex; padding: 1.25rem; }
  .login-brand-mark strong { display: none; }
  .login-geometry { width: min(96vw, 620px); left: 50%; top: 50%; opacity: .56; }
  .login-geometry-dots { left: 1.25rem; bottom: 1.25rem; }
  .login-form-panel { grid-column: 1; padding: clamp(1.5rem, 7vw, 3rem); }
  .login-card { max-width: 430px; }
  .login-mobile-brand { display: none; }
  .chart-container, .chart-container-sm, .chart-container-lg { height: 220px; }
  .filter-bar .form-control, .filter-bar .form-select { width: 100%; min-width: 0; }
  .sales-filter-search, .sales-filter-action { flex-basis: 100%; width: 100%; }
  .sales-filter-action .btn { width: 100%; }
  .modal-dialog { margin: .5rem; max-width: none; }
  .btn { min-height: 40px; transition: all .08s; }
  .btn-sm { min-height: 34px; }
  .form-control, .form-select { font-size: 16px; }
  .dropdown-item { min-height: 40px; }
  .action-btns .btn { min-width: 42px; min-height: 42px; }
  .perm-toolbar { align-items: flex-start; }
  .perm-scroll-guide { line-height: 1.35; }
  .perm-matrix-shell { margin: 0; width: 100%; }
  .perm-scroll { max-height: 60vh; }
  .col-6.col-sm-4.col-md-2 { padding: 4px; }
}
@media (max-width: 768px) {
  body { padding-top: 56px; }
  .kpi-card .kpi-value { font-size: 1.3rem; }
  .table { font-size: .75rem; }
  .card-body { padding: .75rem; }
  .chart-container, .chart-container-sm, .chart-container-lg { height: 200px; }
  .brand-subtitle { display: none; }
  .page-title { min-height: 64px; padding: .8rem .9rem; font-size: 1rem; }
  .page-title-copy small { font-size: .7rem; }
  .nav-tabs .nav-link { padding: .4rem .7rem; font-size: .78rem; }
  .tab-content-card { padding: .75rem; }
}

@media (max-width: 575.98px) {
  .navbar { padding-inline: .35rem; }
  .navbar > .container-fluid { padding-inline: .5rem !important; }
  .navbar-brand {
    min-width: 0;
    margin-right: .35rem;
    gap: .5rem;
    font-size: .9rem;
    white-space: nowrap;
  }
  .navbar-brand .brand-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
  }
  .navbar-brand .brand-copy small { display: none; }
  .navbar-toggler { flex: 0 0 auto; }
  .login-page { padding: 0 !important; }
  .login-shell { min-height: 100dvh; }
  .login-form-panel { align-items: center; padding: 4.25rem 1rem 2rem; }
  .login-card { max-width: 430px; padding: 1.7rem 1.25rem; border-radius: 20px; }
  .login-brand-icon { width: 38px; height: 38px; }
  .login-geometry { width: 150vw; left: 50%; top: 50%; opacity: .34; }
  .login-geometry-dots { display: none; }
  .login-header h2 { font-size: 1.55rem; }
  #nightBanner.night-banner-fixed { right: 12px; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  #bgCanvas, .bg-particles { display: none !important; }
}
/* End-to-end operations value stream */
.operations-unit-filter { min-width: 150px; }
.operations-flow { display:flex; align-items:stretch; gap:.55rem; overflow-x:auto; padding:.25rem 0 .9rem; }
.operations-stage { min-width:118px; flex:0 0 calc((100% - 12.6rem) / 7); border:1px solid var(--border-light); border-top:2px solid rgba(37,99,235,.5); border-radius:13px; padding:.85rem; background:linear-gradient(145deg, var(--bg-card), var(--bg-header)); box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.45); display:grid; grid-template-columns:auto 1fr; gap:.2rem .5rem; align-items:center; transition:border-color .2s ease, box-shadow .2s ease, translate .2s ease; }
.operations-stage:hover { border-color:rgba(37,99,235,.34); box-shadow:var(--shadow); translate:0 -2px; }
.operations-stage-number { width:1.7rem; height:1.7rem; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(145deg, var(--primary, #3b82f6), var(--accent)); box-shadow:0 5px 14px var(--primary-glow); color:#fff; font-size:.8rem; grid-row:span 2; }
.operations-stage-count { font-size:1.5rem; font-weight:700; color:var(--primary, #3b82f6); }
.operations-stage small { grid-column:2; }
.operations-flow-arrow { align-self:center; flex:0 0 1rem; color:var(--text-muted, #94a3b8); }
.page-title label { white-space:nowrap; }
@media (max-width: 767.98px) { .operations-flow-arrow { display:none; } .operations-stage { min-width:145px; } }

/* ===================================================================
   V2.2 appearance system
   Three palettes, two navigation layouts and adjustable Liquid Glass.
   This layer changes presentation only; page modules keep their DOM order.
   =================================================================== */
:root {
  --app-sidebar-width: 252px;
  --glass-blur: 7.4px;
  --glass-saturation: 154%;
  --glass-surface-alpha: .255;
  --glass-header-alpha: .297;
  --glass-control-alpha: .357;
  --glass-nav-alpha: .283;
  --glass-menu-alpha: .542;
  --glass-select-menu-alpha: .615;
  --glass-modal-alpha: .551;
  --glass-modal-header-alpha: .593;
  --glass-backdrop-alpha: .179;
  --glass-border-alpha: .138;
  --glass-specular-alpha: .029;
  --glass-shadow-alpha: .071;
  --glass-edge-blur: 1.7px;
  --glass-lens-opacity: .590;
  --glass-scatter-opacity: .461;
  --glass-dispersion-alpha: .132;
  --glass-highlight-alpha: .066;
  --glass-panel-rim-opacity: .222;
  --internal-glass-blur: 1.5px;
  --login-frost-extra: .7px;
  --appearance-menu-blur: 3px;
  --appearance-menu-alpha: .498;
  --internal-glass-surface-alpha: .240;
  --internal-glass-header-alpha: .275;
  --internal-glass-control-alpha: .337;
  --internal-glass-nav-alpha: .264;
  --internal-glass-menu-alpha: .498;
  --internal-glass-modal-alpha: .510;
  --internal-glass-modal-header-alpha: .551;
  --surface-rgb: 255 255 255;
  --surface-alt-rgb: 247 249 252;
  --surface-soft-rgb: 238 244 255;
  --nav-rgb: 255 255 255;
  --glass-border-rgb: 255 255 255;
  --ambient-rgb: 49 94 207;
  --ambient-alt-rgb: 22 136 167;
}

:root[data-ui-theme="day"] {
  --bg-body: #edf3fa;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --bg-header: #f4f7fb;
  --bg-soft: #e8f0fc;
  --primary: #315ecf;
  --primary-dark: #2349ad;
  --primary-light: #e8efff;
  --primary-glow: rgba(49,94,207,.16);
  --accent: #1688a7;
  --accent2: #188873;
  --text-primary: #172033;
  --text-secondary: #506078;
  --text-muted: #7d8ba0;
  --border-light: #dce5f0;
  --border-accent: #bac9dc;
  --surface-rgb: 255 255 255;
  --surface-alt-rgb: 244 247 251;
  --surface-soft-rgb: 232 240 252;
  --nav-rgb: 250 252 255;
  --glass-border-rgb: 255 255 255;
  --ambient-rgb: 49 94 207;
  --ambient-alt-rgb: 22 136 167;
}

:root[data-ui-theme="night"] {
  --bg-body: #0d1016;
  --bg-card: #171b23;
  --bg-input: #11151c;
  --bg-header: #141820;
  --bg-soft: #1c263d;
  --primary: #7b9cff;
  --primary-dark: #5f7fe5;
  --primary-light: #202a45;
  --primary-glow: rgba(98,129,232,.22);
  --accent: #67cbe2;
  --accent2: #64c4ad;
  --text-primary: #f1f4f9;
  --text-secondary: #c3cbd8;
  --text-muted: #8894a7;
  --border-light: #2c3442;
  --border-accent: #465166;
  --surface-rgb: 23 27 35;
  --surface-alt-rgb: 20 24 32;
  --surface-soft-rgb: 29 37 54;
  --nav-rgb: 17 20 27;
  --glass-border-rgb: 153 177 220;
  --ambient-rgb: 123 156 255;
  --ambient-alt-rgb: 103 203 226;
  --bs-link-color: #9bb3ff;
  --bs-link-hover-color: #bdcaff;
}

:root[data-ui-theme="twilight"] {
  --bg-body: #0b0d10;
  --bg-card: #191b1e;
  --bg-input: #121417;
  --bg-header: #17191c;
  --bg-soft: #302219;
  --primary: #f28a45;
  --primary-dark: #d66b28;
  --primary-light: #352319;
  --primary-glow: rgba(242,138,69,.2);
  --accent: #e4b463;
  --accent2: #c98d68;
  --success: #55bb7d;
  --warning: #f0ae4e;
  --danger: #ea625f;
  --info: #73a8d9;
  --text-primary: #f3f1ed;
  --text-secondary: #cbc5bc;
  --text-muted: #918a81;
  --border-light: #39342f;
  --border-accent: #5a4b40;
  --surface-rgb: 25 27 30;
  --surface-alt-rgb: 22 24 27;
  --surface-soft-rgb: 48 34 25;
  --nav-rgb: 31 24 20;
  --glass-border-rgb: 219 164 120;
  --ambient-rgb: 242 138 69;
  --ambient-alt-rgb: 228 180 99;
  --bs-link-color: #f4a46b;
  --bs-link-hover-color: #ffc194;
}

:root[data-ui-theme="dark"] {
  --bg-body: #101010;
  --bg-card: #1d1d1f;
  --bg-input: #171719;
  --bg-header: #222224;
  --bg-soft: #29292c;
  --primary: #e3e3e5;
  --primary-dark: #b8b8bd;
  --primary-light: #2d2d30;
  --primary-glow: rgba(220,220,225,.10);
  --accent: #b7b7bc;
  --accent2: #8f9096;
  --text-primary: #f0f0f2;
  --text-secondary: #c8c8cc;
  --text-muted: #85858c;
  --border-light: #303034;
  --border-accent: #46464c;
  --surface-rgb: 29 29 31;
  --surface-alt-rgb: 34 34 36;
  --surface-soft-rgb: 41 41 44;
  --nav-rgb: 20 20 21;
  --glass-border-rgb: 196 196 202;
  --ambient-rgb: 176 176 184;
  --ambient-alt-rgb: 112 112 120;
  --bs-link-color: #dddddf;
  --bs-link-hover-color: #ffffff;
}

:root[data-ui-theme="liquid"] {
  --bg-body: #09111c;
  --bg-card: #1e3043;
  --bg-input: #182838;
  --bg-header: #243b52;
  --bg-soft: #2b4863;
  --primary: #8cc9ff;
  --primary-dark: #5ea7ef;
  --primary-light: #173453;
  --primary-glow: rgba(112,190,255,.20);
  --accent: #85e0d1;
  --accent2: #b6a9ff;
  --text-primary: #f3f8ff;
  --text-secondary: #ced9e8;
  --text-muted: #92a4b9;
  --border-light: #31475e;
  --border-accent: #5b7895;
  --surface-rgb: 30 48 67;
  --surface-alt-rgb: 25 42 59;
  --surface-soft-rgb: 36 62 82;
  --nav-rgb: 20 37 53;
  --glass-border-rgb: 206 232 255;
  --ambient-rgb: 112 190 255;
  --ambient-alt-rgb: 133 224 209;
  --bs-link-color: #a9d8ff;
  --bs-link-hover-color: #d9efff;
}

/* Informational guidance follows the active palette instead of retaining
   Bootstrap's fixed blue treatment across every theme. */
html[data-ui-theme] .alert-info {
  color: color-mix(in srgb, var(--primary) 74%, var(--text-primary)) !important;
  background:
    linear-gradient(
      115deg,
      color-mix(in srgb, var(--primary) 13%, rgb(var(--surface-rgb) / .72)),
      color-mix(in srgb, var(--accent) 6%, rgb(var(--surface-rgb) / .62))
    ) !important;
  border-color: color-mix(in srgb, var(--primary) 38%, transparent) !important;
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--primary) 68%, transparent),
    inset 0 1px rgb(var(--glass-border-rgb) / var(--glass-specular-alpha));
}

html[data-ui-theme="night"] body,
html[data-ui-theme="twilight"] body,
html[data-ui-theme="dark"] body,
html[data-ui-theme="liquid"] body {
  background-color: var(--bg-body) !important;
  color: var(--text-primary) !important;
}

/* Theme scenes use continuous gradients. Reset the base 64px grid sizing so
   translucent surfaces never reveal a tiled square array. */
html[data-ui-theme] body {
  background-size: auto !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed;
}

html[data-ui-theme="twilight"] body {
  background-image:
    radial-gradient(circle at 8% 3%, rgba(242,138,69,.09), transparent 26rem),
    radial-gradient(circle at 92% 7%, rgba(228,180,99,.045), transparent 25rem),
    linear-gradient(145deg, var(--bg-body), color-mix(in srgb, var(--bg-body) 90%, #56321f));
}

html[data-ui-theme="dark"] body {
  background-image:
    radial-gradient(circle at 9% 3%, rgba(255,255,255,.035), transparent 25rem),
    radial-gradient(circle at 90% 8%, rgba(150,150,160,.025), transparent 24rem);
}

html[data-ui-theme="liquid"] body {
  background-image:
    radial-gradient(circle at 10% 6%, rgba(55,108,174,.16), transparent 28rem),
    radial-gradient(circle at 88% 9%, rgba(68,144,139,.10), transparent 30rem),
    radial-gradient(circle at 32% 54%, rgba(50,82,138,.075), transparent 32rem),
    radial-gradient(circle at 76% 68%, rgba(61,134,128,.065), transparent 34rem),
    radial-gradient(circle at 54% 94%, rgba(91,70,145,.08), transparent 34rem),
    linear-gradient(145deg, #050b13, #0a1826 56%, #070e17);
  background-attachment: fixed;
}

html[data-ui-theme="liquid"] .bg-particles::before,
html[data-ui-theme="liquid"] .bg-particles::after {
  content: "";
  position: absolute;
  width: min(58vw, 920px);
  aspect-ratio: 1;
  border-radius: 46% 54% 58% 42%;
  pointer-events: none;
  filter: blur(72px);
  opacity: .085;
  will-change: transform;
}
html[data-ui-theme="liquid"] .bg-particles::before {
  left: -14vw;
  top: 16vh;
  background:
    radial-gradient(circle at 66% 34%, rgb(73 119 168 / .46), transparent 44%),
    radial-gradient(circle at 38% 72%, rgb(65 139 134 / .34), transparent 48%);
  animation: liquidFieldDrift 20s ease-in-out infinite alternate;
}
html[data-ui-theme="liquid"] .bg-particles::after {
  right: -16vw;
  top: 42vh;
  background:
    radial-gradient(circle at 36% 38%, rgb(65 139 134 / .38), transparent 42%),
    radial-gradient(circle at 65% 68%, rgb(98 78 145 / .30), transparent 50%);
  animation: liquidFieldDrift 24s ease-in-out -8s infinite alternate-reverse;
}
@keyframes liquidFieldDrift {
  from { transform: translate3d(-2%, -3%, 0) rotate(-4deg) scale(.96); }
  to { transform: translate3d(5%, 4%, 0) rotate(6deg) scale(1.08); }
}

html[data-ui-theme="day"] body.login-page {
  background-color: #edf5ff !important;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(93,159,255,.24), transparent 28rem),
    radial-gradient(circle at 80% 20%, rgba(94,220,211,.16), transparent 26rem),
    radial-gradient(circle at 54% 86%, rgba(144,120,255,.10), transparent 30rem),
    linear-gradient(145deg, #f8fbff, #eaf3ff 58%, #f7fbff) !important;
}

html[data-ui-theme="night"] body.login-page {
  background-color: #050a13 !important;
  background-image:
    radial-gradient(circle at 20% 25%, rgba(72,123,232,.22), transparent 30rem),
    radial-gradient(circle at 82% 16%, rgba(50,190,210,.12), transparent 27rem),
    linear-gradient(145deg, #040812, #0a1422 58%, #050913) !important;
}

html[data-ui-theme="twilight"] body.login-page {
  background-color: #100b08 !important;
  background-image:
    radial-gradient(circle at 18% 24%, rgba(242,138,69,.24), transparent 29rem),
    radial-gradient(circle at 80% 18%, rgba(228,180,99,.14), transparent 27rem),
    radial-gradient(circle at 62% 88%, rgba(156,72,58,.10), transparent 30rem),
    linear-gradient(145deg, #0e0a08, #1b120d 58%, #0d0a09) !important;
}

html[data-ui-theme="dark"] body.login-page {
  background-color: #0b0b0c !important;
  background-image:
    radial-gradient(circle at 22% 25%, rgba(255,255,255,.075), transparent 29rem),
    radial-gradient(circle at 82% 18%, rgba(148,148,155,.055), transparent 27rem),
    linear-gradient(145deg, #09090a, #151516 58%, #0b0b0c) !important;
}

html[data-ui-theme="liquid"] body.login-page {
  background-color: #07101b !important;
  background-image:
    radial-gradient(circle at 14% 18%, rgba(64,153,255,.34), transparent 29rem),
    radial-gradient(circle at 86% 16%, rgba(87,224,197,.22), transparent 28rem),
    radial-gradient(circle at 56% 88%, rgba(146,106,255,.18), transparent 32rem),
    linear-gradient(145deg, #06101b, #10283c 56%, #09131f) !important;
}

[data-ui-theme="night"] .text-primary,
[data-ui-theme="twilight"] .text-primary,
[data-ui-theme="dark"] .text-primary,
[data-ui-theme="liquid"] .text-primary {
  color: var(--primary) !important;
}
[data-ui-theme="night"] .navbar .nav-link:hover,
[data-ui-theme="night"] .navbar .nav-link.active,
[data-ui-theme="twilight"] .navbar .nav-link:hover,
[data-ui-theme="twilight"] .navbar .nav-link.active,
[data-ui-theme="dark"] .navbar .nav-link:hover,
[data-ui-theme="dark"] .navbar .nav-link.active,
[data-ui-theme="liquid"] .navbar .nav-link:hover,
[data-ui-theme="liquid"] .navbar .nav-link.active {
  color: var(--primary) !important;
}
[data-ui-theme="twilight"] .card-header {
  box-shadow: inset 3px 0 0 rgba(242,138,69,.72);
}
[data-ui-theme="twilight"] .navbar::after {
  background: linear-gradient(90deg, transparent 4%, rgba(242,138,69,.18) 50%, transparent 96%);
}
[data-ui-theme="twilight"] .btn-primary {
  color: #fff;
  border-color: rgb(247 172 112 / .34);
  background: linear-gradient(105deg, #df925f 0%, #b99bb7 48%, #6488e8 100%);
  box-shadow: 0 10px 24px rgb(137 83 72 / .20);
}
[data-ui-theme="twilight"] .btn-primary:hover,
[data-ui-theme="twilight"] .btn-primary:focus {
  color: #fff;
  border-color: rgb(255 201 151 / .46);
  background: linear-gradient(105deg, #e9a06a 0%, #c5a5c1 48%, #7295f1 100%);
  box-shadow: 0 12px 30px rgb(137 83 72 / .25);
}
[data-ui-theme="twilight"] .page-title > i,
[data-ui-theme="twilight"] .nav-pills .nav-link.active {
  background: linear-gradient(135deg, rgb(226 139 84 / .22), rgb(100 136 232 / .18));
}
[data-ui-theme="dark"] .btn-primary {
  color: #171719;
  background: linear-gradient(135deg, #eeeeef, #aaaab0);
  box-shadow: 0 5px 15px rgba(255,255,255,.07);
}

/*
 * Login retains the approved optical material. Internal pages inherit a
 * clearer transmission profile and an independently adjustable blur value.
 */
html[data-glass-level] body:not(.login-page) {
  --glass-blur: var(--internal-glass-blur);
  --glass-surface-alpha: var(--internal-glass-surface-alpha);
  --glass-header-alpha: var(--internal-glass-header-alpha);
  --glass-control-alpha: var(--internal-glass-control-alpha);
  --glass-nav-alpha: var(--internal-glass-nav-alpha);
  --glass-menu-alpha: var(--internal-glass-menu-alpha);
  --glass-modal-alpha: var(--internal-glass-modal-alpha);
  --glass-modal-header-alpha: var(--internal-glass-modal-header-alpha);
}

/* Liquid Glass is limited to leaf surfaces so Bootstrap modal stacking remains intact. */
html[data-glass-level] .card,
html[data-glass-level] .dropdown-menu,
html[data-glass-level] .toast,
html[data-glass-level] .filter-bar,
html[data-glass-level] .tab-content-card,
html[data-glass-level] .page-title,
html[data-glass-level] .footer,
html[data-glass-level] .modal-content,
html[data-glass-level] .login-card {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(1.035);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(1.035);
}

html[data-glass-level] body.login-page .login-card {
  -webkit-backdrop-filter:
    blur(calc(var(--glass-blur) + var(--login-frost-extra)))
    saturate(var(--glass-saturation))
    contrast(1.035);
  backdrop-filter:
    blur(calc(var(--glass-blur) + var(--login-frost-extra)))
    saturate(var(--glass-saturation))
    contrast(1.035);
}

/*
 * Do not put backdrop-filter on the navbar element itself: it becomes the
 * backdrop root for descendant dropdowns, so their blur can no longer sample
 * the business cards beneath the navigation shell. Blur this sibling-like
 * paint layer instead and keep navbar contents above it.
 */
html[data-glass-level] body > .navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(1.035);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(1.035);
}
html[data-glass-level] body > .navbar > * {
  position: relative;
  z-index: 1;
}

/* SVG filter definitions stay measurable so fragment references resolve, but
   never participate in document layout or accessibility. */
.glass-filter-definitions {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

html[data-ui-theme][data-glass-level] body > .navbar.bg-white {
  background: rgb(var(--nav-rgb) / var(--glass-nav-alpha)) !important;
  border-color: rgb(var(--glass-border-rgb) / var(--glass-border-alpha));
  box-shadow:
    0 1px 0 rgb(var(--glass-border-rgb) / calc(var(--glass-border-alpha) * .32)),
    0 16px 40px rgb(5 12 24 / var(--glass-shadow-alpha));
}

html[data-ui-theme][data-glass-level] .navbar-collapse {
  background: transparent !important;
}

html[data-ui-theme="liquid"][data-glass-level] body > .navbar.bg-white {
  background:
    linear-gradient(
      105deg,
      rgb(7 15 25 / var(--glass-nav-alpha)),
      rgb(13 28 36 / calc(var(--glass-nav-alpha) * .82))
    ) !important;
}
html[data-ui-theme="liquid"] .navbar .nav-link.active,
html[data-ui-theme="liquid"] .navbar .nav-link:hover {
  background: linear-gradient(115deg, rgb(255 255 255 / .035), rgb(72 119 162 / .045));
  box-shadow:
    inset 0 0 0 1px rgb(var(--glass-border-rgb) / .075),
    inset 0 .5px 0 rgb(255 255 255 / .055);
}
html[data-ui-theme="liquid"] .business-unit-trigger,
html[data-ui-theme="liquid"] .theme-toggle {
  background: rgb(255 255 255 / .045);
}

html[data-glass-level] .card,
html[data-glass-level] .tab-content-card,
html[data-glass-level] .modal-content {
  background: rgb(var(--surface-rgb) / var(--glass-surface-alpha));
  border-color: rgb(var(--glass-border-rgb) / var(--glass-border-alpha));
  /*
   * Baseline material for iOS / embedded WebKit. Those engines support
   * -webkit-backdrop-filter blur but commonly reject an SVG url() in the
   * backdrop chain. The richer @supports block below replaces this pass on
   * capable browsers without leaving mobile cards as opaque flat panels.
   */
  -webkit-backdrop-filter:
    blur(var(--glass-blur))
    saturate(var(--glass-saturation))
    contrast(1.035);
  backdrop-filter:
    blur(var(--glass-blur))
    saturate(var(--glass-saturation))
    contrast(1.035);
  box-shadow:
    0 16px 42px rgb(5 12 24 / var(--glass-shadow-alpha)),
    inset 0 .5px 0 rgb(255 255 255 / var(--glass-specular-alpha));
}

html[data-glass-level] body:not(.login-page) .filter-bar,
html[data-glass-level] body:not(.login-page) .page-title,
html[data-glass-level] body:not(.login-page) .footer {
  -webkit-backdrop-filter:
    blur(var(--glass-blur))
    saturate(var(--glass-saturation))
    contrast(1.035);
  backdrop-filter:
    blur(var(--glass-blur))
    saturate(var(--glass-saturation))
    contrast(1.035);
}

/* System notices share the same optical material as dialogs. They remain
   denser than content cards so stacked notices never expose competing text. */
html[data-glass-level] .toast {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--text-primary);
  background: rgb(var(--surface-rgb) / var(--glass-modal-alpha)) !important;
  border-color: rgb(var(--glass-border-rgb) / var(--glass-border-alpha));
  -webkit-backdrop-filter:
    blur(calc(var(--glass-blur) * 1.04))
    saturate(145%)
    contrast(.96)
    brightness(1.035);
  backdrop-filter:
    blur(calc(var(--glass-blur) * 1.04))
    saturate(145%)
    contrast(.96)
    brightness(1.035);
  box-shadow:
    0 20px 54px rgb(2 8 18 / calc(var(--glass-shadow-alpha) + .10)),
    inset 0 .5px 0 rgb(255 255 255 / .10);
}
html[data-glass-level] .toast-header {
  color: var(--text-primary);
  background:
    linear-gradient(
      112deg,
      rgb(var(--surface-rgb) / var(--glass-modal-header-alpha)),
      rgb(var(--surface-alt-rgb) / calc(var(--glass-modal-header-alpha) - .03))
    ) !important;
  border-color: rgb(var(--glass-border-rgb) / var(--glass-border-alpha));
}
html[data-glass-level] .toast::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 1.5px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 18% -4%,
      rgb(255 255 255 / calc(var(--glass-dispersion-alpha) * .48)),
      transparent 34%
    ),
    linear-gradient(
      128deg,
      rgb(255 255 255 / .07),
      transparent 46%,
      rgb(var(--ambient-alt-rgb) / var(--glass-dispersion-alpha))
    );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-backdrop-filter: blur(var(--glass-edge-blur)) saturate(220%);
  backdrop-filter: blur(var(--glass-edge-blur)) saturate(220%);
  opacity: calc(var(--glass-lens-opacity) * .42);
}
html[data-glass-level] .toast > * {
  position: relative;
  z-index: 1;
}

/* Dialogs are interaction surfaces, not background cards. Keep a clean,
   readable optical medium at high glass values instead of exposing several
   darkened page layers through a near-transparent modal. */
html[data-glass-level] .modal-content {
  background: rgb(var(--surface-rgb) / var(--glass-modal-alpha));
  -webkit-backdrop-filter:
    blur(calc(var(--glass-blur) * 1.04))
    saturate(138%)
    contrast(.97)
    brightness(1.01);
  backdrop-filter:
    blur(calc(var(--glass-blur) * 1.04))
    saturate(138%)
    contrast(.97)
    brightness(1.01);
  box-shadow:
    0 26px 72px rgb(2 8 18 / calc(var(--glass-shadow-alpha) + .12)),
    inset 0 .5px 0 rgb(255 255 255 / .065);
}

html[data-glass-level] #kpiRow .card {
  background: rgb(var(--surface-rgb) / var(--glass-surface-alpha)) !important;
}

html[data-glass-level] .card,
html[data-glass-level] .tab-content-card,
html[data-glass-level] .modal-content,
html[data-glass-level] .login-card,
html[data-glass-level] .filter-bar {
  position: relative;
  isolation: isolate;
}

/* Dropdowns must retain Bootstrap/Popper's absolute positioning. Isolation is
   enough for the edge-refraction layer and does not add the menu to nav flow. */
html[data-glass-level] .dropdown-menu {
  isolation: isolate;
}

/* A narrow, masked backdrop layer marks the fixed optical edge. Strength may
   change its opacity, but never its thickness, size or pointer-relative
   origin. Real curvature is produced in the surface SVG filter below. */
html[data-glass-level] .card::after,
html[data-glass-level] .login-card::after,
html[data-glass-level] .tab-content-card::after,
html[data-glass-level] .modal-content::after,
html[data-glass-level] .dropdown-menu::before,
html[data-glass-level] .filter-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 18% -4%,
      rgb(255 255 255 / var(--glass-highlight-alpha)),
      transparent 22%
    ),
    /*
     * Backdrop RGB separation is naturally subtle when a business card sits
     * over a nearly uniform page. Preserve the physical SVG displacement, but
     * give ordinary surfaces a restrained red/cyan optical rim so dispersion
     * remains legible without requiring the high-contrast QA grid.
     */
    linear-gradient(
      90deg,
      rgb(255 82 126 / calc(var(--glass-dispersion-alpha) * .68)),
      transparent 22%,
      transparent 78%,
      rgb(68 190 255 / calc(var(--glass-dispersion-alpha) * .72))
    ),
    linear-gradient(
      180deg,
      rgb(76 202 255 / calc(var(--glass-dispersion-alpha) * .32)),
      transparent 28%,
      transparent 72%,
      rgb(255 92 154 / calc(var(--glass-dispersion-alpha) * .36))
    ),
    linear-gradient(
      128deg,
      rgb(255 255 255 / .045),
      rgb(var(--ambient-rgb) / var(--glass-dispersion-alpha)) 28%,
      transparent 49%,
      rgb(var(--ambient-alt-rgb) / var(--glass-dispersion-alpha))
    );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-backdrop-filter: blur(var(--glass-edge-blur)) saturate(285%) contrast(1.24) brightness(1.01);
  backdrop-filter: blur(var(--glass-edge-blur)) saturate(285%) contrast(1.24) brightness(1.01);
  box-shadow:
    inset 1px 0 0 rgb(255 72 118 / calc(var(--glass-dispersion-alpha) * .54)),
    inset -1px 0 0 rgb(62 196 255 / calc(var(--glass-dispersion-alpha) * .60)),
    inset 0 1px 0 rgb(72 205 255 / calc(var(--glass-dispersion-alpha) * .22)),
    inset 0 -1px 0 rgb(255 84 148 / calc(var(--glass-dispersion-alpha) * .26));
  opacity: var(--glass-panel-rim-opacity);
  transform: none;
  transform-origin: center;
  transition: opacity .2s ease;
}

/* Keep the optical frame geometrically stationary. Pointer movement still
   drives the independent page glow, but never a card/menu/dialog border. */
html[data-performance="standard"][data-glass-level]
body:not(.login-page) .card::after,
html[data-performance="standard"][data-glass-level]
body:not(.login-page) .tab-content-card::after,
html[data-performance="standard"][data-glass-level]
body:not(.login-page) .modal-content::after,
html[data-performance="standard"][data-glass-level]
body:not(.login-page) .dropdown-menu::before,
html[data-performance="standard"][data-glass-level]
body:not(.login-page) .filter-bar::after,
html[data-performance="standard"][data-glass-level]
body:not(.login-page) .toast::after {
  transform: none;
  transform-origin: center;
  will-change: opacity;
}

html[data-glass-level] .card > *,
html[data-glass-level] .login-card > *,
html[data-glass-level] .tab-content-card > *,
html[data-glass-level] .modal-content > *,
html[data-glass-level] .dropdown-menu > *,
html[data-glass-level] .filter-bar > * {
  position: relative;
  z-index: 1;
}

html[data-glass-level] .card-header,
html[data-glass-level] .card-footer,
html[data-glass-level] .modal-header,
html[data-glass-level] .modal-footer {
  background:
    linear-gradient(
      112deg,
      rgb(var(--surface-rgb) / var(--glass-header-alpha)),
      rgb(var(--surface-alt-rgb) / calc(var(--glass-header-alpha) - .025)) 72%,
      rgb(var(--surface-soft-rgb) / calc(var(--glass-header-alpha) - .05))
    );
}

html[data-glass-level] .modal-header,
html[data-glass-level] .modal-footer {
  background:
    linear-gradient(
      112deg,
      rgb(var(--surface-rgb) / var(--glass-modal-header-alpha)),
      rgb(var(--surface-alt-rgb) / calc(var(--glass-modal-header-alpha) - .03))
    );
}

html[data-glass-level] .dropdown-menu {
  background: rgb(var(--surface-rgb) / var(--glass-menu-alpha)) !important;
  border-color: rgb(var(--glass-border-rgb) / var(--glass-border-alpha));
  overflow: hidden;
  -webkit-backdrop-filter:
    blur(calc((var(--glass-blur) * 2.5) + 1px))
    saturate(158%)
    contrast(1.055)
    brightness(.965);
  backdrop-filter:
    blur(calc((var(--glass-blur) * 2.5) + 1px))
    saturate(158%)
    contrast(1.055)
    brightness(.965);
  box-shadow:
    0 20px 56px rgb(2 8 18 / calc(var(--glass-shadow-alpha) + .09)),
    inset 0 0 0 .5px rgb(255 255 255 / .10),
    inset 0 8px 20px rgb(255 255 255 / .02);
}

/* Long enhanced selects must keep their options reachable on narrow screens.
   Horizontal clipping still contains the optical rim. */
html[data-glass-level] .unified-select-menu {
  overflow-x: hidden;
  overflow-y: auto;
  /*
   * Custom selects carry denser information than navigation menus. Keep a
   * stable optical medium behind their labels while retaining refraction.
   */
  background-color:
    rgb(var(--surface-rgb) / var(--glass-select-menu-alpha)) !important;
}

html[data-glass-level] .dropdown-menu.show {
  transform-origin: var(--bs-position, top) center;
  animation: glassMenuReveal .24s cubic-bezier(.2, .82, .24, 1.08);
}
html[data-performance="standard"][data-glass-level]
.modal.show.glass-optics-entering .modal-dialog {
  animation: glassDialogOpticsEnter .36s cubic-bezier(.16, .78, .22, 1) both;
}
@keyframes glassMenuReveal {
  /*
   * Popper owns transform for placement. Animating that property temporarily
   * overwrites its coordinates and makes a newly opened menu jump.
   */
  from { opacity: 0; filter: blur(2px); }
  to { opacity: 1; filter: blur(0); }
}
@keyframes glassDialogOpticsEnter {
  0% { opacity: 0; transform: translateY(18px) scale(.975); }
  22% { opacity: .20; transform: translateY(13px) scale(.982); }
  68% { opacity: .88; transform: translateY(3px) scale(.997); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Hidden premeasurement supplies the correct size-adaptive optical filter
   before Bootstrap reveals a dialog. It exists for one synchronous event
   turn and must never flash or accept input. */
.modal.glass-optics-premeasure {
  display: block !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.modal.glass-optics-premeasure .modal-dialog {
  animation: none !important;
  transition: none !important;
}

/* Hidden menu premeasurement gives every generated and page-specific
   Bootstrap dropdown its sized frost/refraction field before first paint. */
.dropdown-menu.glass-optics-premeasure {
  display: block !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
  transition: none !important;
}

/* The sized optical filter is compositor-backed. The first two frames remain
   transparent while the dialog is at the low-opacity start of its 360ms
   travel. The following 320ms material fade reaches full opacity at the same
   time as the dialog reaches its final position. */
html[data-performance="standard"][data-glass-level]
.modal.glass-optics-reveal-pending .modal-content {
  opacity: 0 !important;
}
html[data-performance="standard"][data-glass-level]
.modal.glass-optics-reveal-active .modal-content {
  animation: glassModalOpticsReveal .32s cubic-bezier(.18, .72, .2, 1) both;
}
@keyframes glassModalOpticsReveal {
  from { opacity: .16; }
  to { opacity: 1; }
}

html[data-glass-level] .filter-bar,
html[data-glass-level] .page-title,
html[data-glass-level] .footer {
  background: rgb(var(--surface-rgb) / var(--glass-header-alpha)) !important;
  border-color: rgb(var(--glass-border-rgb) / var(--glass-border-alpha));
}

html[data-glass-level="100"] .dropdown-menu,
html[data-glass-level="100"] .business-unit-menu {
  background-image:
    radial-gradient(circle at 12% -8%, rgb(255 255 255 / .07), transparent 38%),
    linear-gradient(145deg, rgb(var(--ambient-rgb) / .025), transparent 45%, rgb(var(--ambient-alt-rgb) / .03));
  box-shadow:
    0 22px 62px rgb(2 8 18 / .18),
    inset 1px 0 rgb(var(--ambient-rgb) / .085),
    inset -1px 0 rgb(var(--ambient-alt-rgb) / .075),
    inset 0 1px rgb(255 255 255 / .10);
}

html[data-glass-level] .dropdown-menu::after {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 0;
  border-radius: calc(var(--radius) - 4px);
  pointer-events: none;
  background:
    linear-gradient(rgb(var(--surface-rgb) / .10), rgb(var(--surface-rgb) / .10)),
    radial-gradient(ellipse at 8% -12%, rgb(255 255 255 / .025), transparent 36%),
    radial-gradient(ellipse at 104% 18%, rgb(var(--ambient-alt-rgb) / .055), transparent 32%),
    radial-gradient(ellipse at 54% 112%, rgb(var(--ambient-rgb) / .050), transparent 38%);
  -webkit-backdrop-filter:
    blur(calc(var(--glass-blur) * .75))
    saturate(154%)
    contrast(1.04)
    brightness(.97);
  backdrop-filter:
    blur(calc(var(--glass-blur) * .75))
    saturate(154%)
    contrast(1.04)
    brightness(.97);
  mix-blend-mode: normal;
  opacity: calc(var(--glass-scatter-opacity) * .24);
  animation: none;
}

/* A broad, low-opacity light-scattering field belongs to every authenticated
   glass surface. It changes only the material background, never the content
   plane, hit areas or the fixed 2px optical rim. */
html[data-performance="standard"][data-glass-level]
body:not(.login-page) .card,
html[data-performance="standard"][data-glass-level]
body:not(.login-page) .tab-content-card,
html[data-performance="standard"][data-glass-level]
body:not(.login-page) .filter-bar,
html[data-performance="standard"][data-glass-level]
body:not(.login-page) .page-title,
html[data-performance="standard"][data-glass-level]
body:not(.login-page) .footer,
html[data-performance="standard"][data-glass-level]
body:not(.login-page) .dropdown-menu,
html[data-performance="standard"][data-glass-level]
body:not(.login-page) .modal-content,
html[data-performance="standard"][data-glass-level]
body:not(.login-page) .toast {
  background-image:
    radial-gradient(
      ellipse at 12% -10%,
      rgb(255 255 255 / calc(var(--glass-scatter-opacity) * .07)),
      transparent 42%
    ),
    radial-gradient(
      ellipse at 106% 92%,
      rgb(var(--ambient-rgb) / calc(var(--glass-scatter-opacity) * .10)),
      transparent 46%
    ),
    linear-gradient(
      126deg,
      transparent 24%,
      rgb(var(--ambient-alt-rgb) / calc(var(--glass-scatter-opacity) * .08)) 52%,
      transparent 76%
    ) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-blend-mode: normal;
}

/* The login card and its appearance menu use the same optical intensity as
   authenticated surfaces. Theme changes only recolour these gradients. */
html[data-performance="standard"][data-glass-level]
body.login-page .login-card,
html[data-performance="standard"][data-glass-level]
body.login-page .login-appearance-menu {
  background-image:
    radial-gradient(
      ellipse at 12% -10%,
      rgb(255 255 255 / calc(var(--glass-scatter-opacity) * .07)),
      transparent 42%
    ),
    radial-gradient(
      ellipse at 106% 92%,
      rgb(var(--ambient-rgb) / calc(var(--glass-scatter-opacity) * .10)),
      transparent 46%
    ),
    linear-gradient(
      126deg,
      transparent 24%,
      rgb(var(--ambient-alt-rgb) / calc(var(--glass-scatter-opacity) * .08)) 52%,
      transparent 76%
    ) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-blend-mode: normal;
}

/* Login and authenticated appearance panels share one material recipe. The
   panel location changes, but its transmission, frost and optical order do
   not. */
html[data-glass-level] body .appearance-menu {
  -webkit-backdrop-filter:
    blur(var(--appearance-menu-blur))
    saturate(158%)
    contrast(1.055)
    brightness(.965);
  backdrop-filter:
    blur(var(--appearance-menu-blur))
    saturate(158%)
    contrast(1.055)
    brightness(.965);
}

/*
 * Floating menus use RGB separation across the sampled backdrop. Their fixed
 * edge stays quieter than ordinary cards, avoiding a red/cyan neon outline.
 */
html[data-performance="standard"][data-glass-level]
body .dropdown-menu::before,
html[data-performance="standard"][data-glass-level]
body .appearance-menu::before {
  background:
    linear-gradient(
      90deg,
      rgb(255 74 124 / calc(var(--glass-dispersion-alpha) * .06)),
      transparent 24%,
      transparent 76%,
      rgb(62 196 255 / calc(var(--glass-dispersion-alpha) * .07))
    ),
    linear-gradient(
      180deg,
      rgb(72 205 255 / calc(var(--glass-dispersion-alpha) * .03)),
      transparent 30%,
      transparent 70%,
      rgb(255 82 146 / calc(var(--glass-dispersion-alpha) * .035))
    );
  -webkit-backdrop-filter:
    blur(var(--glass-edge-blur))
    saturate(150%)
    contrast(1.08)
    brightness(.96);
  backdrop-filter:
    blur(var(--glass-edge-blur))
    saturate(150%)
    contrast(1.08)
    brightness(.96);
  box-shadow:
    inset 1px 0 0 rgb(255 72 118 / calc(var(--glass-dispersion-alpha) * .05)),
    inset -1px 0 0 rgb(62 196 255 / calc(var(--glass-dispersion-alpha) * .06));
  opacity: calc(var(--glass-lens-opacity) * .22);
}

/*
 * Apply real displacement to each leaf surface's existing backdrop pass.
 * Putting the SVG filter on a child pseudo-element would make the surface
 * itself a Backdrop Root and can prevent the child from sampling the business
 * page behind it. URL first means refraction / dispersion is calculated before
 * the existing frost blur softens the result. Content is never filtered.
 */
@supports ((backdrop-filter: url("#glass-optical-soft")) or
           (-webkit-backdrop-filter: url("#glass-optical-soft"))) {
  html[data-performance="standard"][data-glass-level]
  body:not(.login-page) .card,
  html[data-performance="standard"][data-glass-level]
  body:not(.login-page) .tab-content-card,
  html[data-performance="standard"][data-glass-level]
  body:not(.login-page) .filter-bar,
  html[data-performance="standard"][data-glass-level]
  body:not(.login-page) .page-title,
  html[data-performance="standard"][data-glass-level]
  body:not(.login-page) .footer {
    -webkit-backdrop-filter:
      var(--glass-optical-filter, url("#glass-optical-soft"))
      blur(var(--glass-blur))
      saturate(var(--glass-saturation))
      contrast(1.035);
    backdrop-filter:
      var(--glass-optical-filter, url("#glass-optical-soft"))
      blur(var(--glass-blur))
      saturate(var(--glass-saturation))
      contrast(1.035);
  }

  html[data-performance="standard"][data-glass-level]
  body:not(.login-page) .dropdown-menu {
    -webkit-backdrop-filter:
      var(--glass-optical-filter, url("#glass-optical-soft"))
      blur(calc((var(--glass-blur) * 2.5) + 1px))
      saturate(158%)
      contrast(1.055)
      brightness(.965);
    backdrop-filter:
      var(--glass-optical-filter, url("#glass-optical-soft"))
      blur(calc((var(--glass-blur) * 2.5) + 1px))
      saturate(158%)
      contrast(1.055)
      brightness(.965);
  }

  html[data-performance="standard"][data-glass-level]
  body:not(.login-page) .modal-content {
    -webkit-backdrop-filter:
      var(--glass-optical-filter, url("#glass-optical-edge"))
      blur(calc(var(--glass-blur) * 1.04))
      saturate(138%)
      contrast(.97)
      brightness(1.01);
    backdrop-filter:
      var(--glass-optical-filter, url("#glass-optical-edge"))
      blur(calc(var(--glass-blur) * 1.04))
      saturate(138%)
      contrast(.97)
      brightness(1.01);
  }

  html[data-performance="standard"][data-glass-level]
  body:not(.login-page) .toast {
    -webkit-backdrop-filter:
      var(--glass-optical-filter, url("#glass-optical-edge"))
      blur(calc(var(--glass-blur) * 1.04))
      saturate(145%)
      contrast(.96)
      brightness(1.035);
    backdrop-filter:
      var(--glass-optical-filter, url("#glass-optical-edge"))
      blur(calc(var(--glass-blur) * 1.04))
      saturate(145%)
      contrast(.96)
      brightness(1.035);
  }

  html[data-performance="standard"][data-glass-level]
  body.login-page .login-card {
    -webkit-backdrop-filter:
      var(--glass-optical-filter, url("#glass-optical-soft"))
      blur(calc(var(--glass-blur) + var(--login-frost-extra)))
      saturate(var(--glass-saturation))
      contrast(1.035);
    backdrop-filter:
      var(--glass-optical-filter, url("#glass-optical-soft"))
      blur(calc(var(--glass-blur) + var(--login-frost-extra)))
      saturate(var(--glass-saturation))
      contrast(1.035);
  }

  html[data-performance="standard"][data-glass-level]
  body .appearance-menu {
    -webkit-backdrop-filter:
      var(--glass-optical-filter, url("#glass-optical-soft"))
      blur(var(--appearance-menu-blur))
      saturate(158%)
      contrast(1.055)
      brightness(.965);
    backdrop-filter:
      var(--glass-optical-filter, url("#glass-optical-soft"))
      blur(var(--appearance-menu-blur))
      saturate(158%)
      contrast(1.055)
      brightness(.965);
  }
}

/*
 * The mobile navigation collapse contains nested dropdowns, so applying
 * backdrop-filter to the collapse itself would turn it into their Backdrop
 * Root. Render its glass through a sibling-like ::before layer instead. The
 * collapse receives a size-adaptive menu filter from appearance.js while its
 * descendants stay on a clean content plane and can still sample the page.
 */
@media (max-width: 1399.98px) {
  html[data-performance="standard"][data-glass-level]
  body:not(.login-page) > .navbar .navbar-collapse {
    position: relative;
    isolation: isolate;
    background:
      rgb(var(--nav-rgb) / calc(var(--glass-nav-alpha) * .72)) !important;
  }

  html[data-performance="standard"][data-glass-level]
  body:not(.login-page) > .navbar .navbar-collapse::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
      radial-gradient(
        ellipse at 12% -8%,
        rgb(255 255 255 / .025),
        transparent 42%
      ),
      linear-gradient(
        125deg,
        transparent 28%,
        rgb(var(--ambient-alt-rgb) / .045) 54%,
        transparent 78%
      );
    -webkit-backdrop-filter:
      var(--glass-optical-filter, url("#glass-optical-soft"))
      blur(calc(var(--glass-blur) * 1.15))
      saturate(158%)
      contrast(1.055)
      brightness(.965);
    backdrop-filter:
      var(--glass-optical-filter, url("#glass-optical-soft"))
      blur(calc(var(--glass-blur) * 1.15))
      saturate(158%)
      contrast(1.055)
      brightness(.965);
  }

  html[data-performance="standard"][data-glass-level]
  body:not(.login-page) > .navbar .navbar-collapse > * {
    position: relative;
    z-index: 1;
  }
}

/* The compact navbar makes normal navigation submenus transparent. Keep the
   appearance panel as a real floating material so controls behind it cannot
   bleed through. */
html[data-ui-theme][data-glass-level] body .appearance-menu {
  background: rgb(var(--surface-rgb) / var(--appearance-menu-alpha)) !important;
  border: 1px solid rgb(var(--glass-border-rgb) / var(--glass-border-alpha)) !important;
  box-shadow:
    0 20px 54px rgb(2 8 18 / calc(var(--glass-shadow-alpha) + .10)),
    inset 0 0 0 .5px rgb(255 255 255 / .10),
    inset 0 8px 20px rgb(255 255 255 / .02) !important;
}

html[data-glass-level] .modal-content::after {
  opacity: calc(var(--glass-lens-opacity) * .32);
}

html[data-glass-level="100"] .modal-content::after {
  opacity: calc(var(--glass-lens-opacity) * .32);
}

@media (prefers-reduced-motion: reduce) {
  html[data-performance="standard"][data-glass-level]
  .modal.glass-optics-reveal-active .modal-content,
  html[data-performance="standard"][data-glass-level]
  .modal.show.glass-optics-entering .modal-dialog {
    animation-duration: .01ms;
  }
}

html[data-glass-level] .modal-backdrop.show { opacity: var(--glass-backdrop-alpha); }
html[data-bs-theme="dark"][data-glass-level] .modal-backdrop.show {
  opacity: calc(var(--glass-backdrop-alpha) + .10);
}

html[data-ui-theme="liquid"][data-glass-level] .dropdown-menu {
  background: rgb(9 22 34 / var(--glass-menu-alpha)) !important;
}
html[data-ui-theme="liquid"][data-glass-level] .unified-select-menu {
  background-color: rgb(9 22 34 / var(--glass-select-menu-alpha)) !important;
}
html[data-ui-theme="liquid"][data-glass-level] body .appearance-menu {
  background: rgb(9 22 34 / var(--appearance-menu-alpha)) !important;
}

html[data-glass-level] .form-control,
html[data-glass-level] .form-select,
html[data-glass-level] .input-group-text,
html[data-glass-level] .list-group-item {
  background-color: rgb(var(--surface-rgb) / var(--glass-control-alpha));
}

/*
 * Dialog controls are small optical surfaces, not opaque holes cut into the
 * modal. Each receives a pre-sized, deliberately restrained RGB sample so the
 * input material appears in the first dialog frame and remains readable.
 */
@supports ((backdrop-filter: url("#glass-optical-soft")) or
           (-webkit-backdrop-filter: url("#glass-optical-soft"))) {
  html[data-performance="standard"][data-glass-level]
  body:not(.login-page) .modal .form-control,
  html[data-performance="standard"][data-glass-level]
  body:not(.login-page) .modal .form-select:not(.unified-select-native),
  html[data-performance="standard"][data-glass-level]
  body:not(.login-page) .modal .input-group-text {
    -webkit-backdrop-filter:
      var(--glass-optical-filter, url("#glass-optical-soft"))
      blur(calc(var(--glass-blur) * .62))
      saturate(152%)
      contrast(1.035);
    backdrop-filter:
      var(--glass-optical-filter, url("#glass-optical-soft"))
      blur(calc(var(--glass-blur) * .62))
      saturate(152%)
      contrast(1.035);
    box-shadow:
      inset 1px 0 0 rgb(255 78 126 / calc(var(--glass-dispersion-alpha) * .32)),
      inset -1px 0 0 rgb(64 194 255 / calc(var(--glass-dispersion-alpha) * .36)),
      inset 0 .5px 0 rgb(255 255 255 / calc(var(--glass-highlight-alpha) * .34));
  }
}

html[data-glass-level] .login-card {
  background: rgb(var(--surface-rgb) / var(--glass-surface-alpha));
  border-color: rgb(var(--glass-border-rgb) / var(--glass-border-alpha));
  box-shadow: 0 28px 80px rgb(2 8 18 / calc(var(--glass-shadow-alpha) + .12));
}

html[data-ui-theme="twilight"][data-glass-level] body > .navbar.bg-white {
  background: rgb(48 35 27 / var(--glass-header-alpha)) !important;
}
html[data-auto-theme-gradient][data-glass-level] body > .navbar.bg-white {
  background: rgb(var(--nav-rgb) / var(--glass-header-alpha)) !important;
}

html[data-ui-theme="liquid"][data-glass-level] .card,
html[data-ui-theme="liquid"][data-glass-level] .tab-content-card,
html[data-ui-theme="liquid"][data-glass-level] .modal-content,
html[data-ui-theme="liquid"][data-glass-level] .page-title,
html[data-ui-theme="liquid"][data-glass-level] .filter-bar {
  background-image: linear-gradient(135deg, rgb(255 255 255 / .035), transparent 36%, rgb(var(--ambient-alt-rgb) / .025));
}

/* Bootstrap tables and list rows inherit the active palette instead of
   carrying fixed light/dark fills from individual pages. */
html[data-ui-theme] .table {
  color: var(--text-primary);
  --bs-table-color: var(--text-primary);
  --bs-table-bg: rgb(var(--surface-rgb) / var(--glass-control-alpha));
  --bs-table-border-color: var(--border-light);
  --bs-table-striped-color: var(--text-primary);
  --bs-table-striped-bg: rgb(var(--surface-alt-rgb) / calc(var(--glass-control-alpha) - .06));
  --bs-table-hover-color: var(--text-primary);
  --bs-table-hover-bg: rgb(var(--ambient-rgb) / .085);
  --bs-table-active-color: var(--text-primary);
  --bs-table-active-bg: rgb(var(--ambient-rgb) / .12);
}
html[data-ui-theme] .table > :not(caption) > * > * {
  color: inherit;
  border-color: var(--border-light);
}
html[data-ui-theme] .table > thead > tr > th,
html[data-ui-theme] .table-dark > thead > tr > th {
  color: var(--text-muted);
  background: rgb(var(--surface-alt-rgb) / var(--glass-header-alpha)) !important;
  border-color: var(--border-light);
}
html[data-ui-theme] .table-dark,
html[data-ui-theme] .table-secondary {
  --bs-table-color: var(--text-primary);
  --bs-table-bg: rgb(var(--surface-rgb) / var(--glass-control-alpha));
  --bs-table-border-color: var(--border-light);
  --bs-table-striped-color: var(--text-primary);
  --bs-table-striped-bg: rgb(var(--surface-alt-rgb) / calc(var(--glass-control-alpha) - .06));
  --bs-table-hover-color: var(--text-primary);
  --bs-table-hover-bg: rgb(var(--ambient-rgb) / .085);
}
html[data-ui-theme] .table-striped tbody tr:nth-of-type(odd) {
  background: rgb(var(--surface-alt-rgb) / calc(var(--glass-control-alpha) - .06));
}
html[data-ui-theme] .table-hover tbody tr:hover {
  background: rgb(var(--ambient-rgb) / .085);
}
html[data-ui-theme] .list-group-item {
  color: var(--text-secondary);
  background-color: rgb(var(--surface-rgb) / var(--glass-control-alpha));
  border-color: var(--border-light);
}
html[data-ui-theme] .dropdown-item {
  color: var(--text-secondary);
  background-color: transparent;
}
html[data-ui-theme] .list-group-item:hover,
html[data-ui-theme] .list-group-item:focus,
html[data-ui-theme] .dropdown-item:hover,
html[data-ui-theme] .dropdown-item:focus {
  color: var(--text-primary);
  background-color: rgb(var(--ambient-rgb) / .10);
}
html[data-ui-theme] .list-group-item.active,
html[data-ui-theme] .dropdown-item.active {
  color: var(--text-primary);
  background: linear-gradient(110deg, rgb(var(--ambient-rgb) / .20), rgb(var(--ambient-alt-rgb) / .10));
  border-color: rgb(var(--ambient-rgb) / .28);
}
html[data-ui-theme] .nav-tabs {
  background: rgb(var(--surface-alt-rgb) / calc(var(--glass-header-alpha) - .08));
  border-color: var(--border-light);
}
html[data-ui-theme] .nav-tabs .nav-link:hover,
html[data-ui-theme] .nav-tabs .nav-link.active {
  color: var(--primary);
  background: rgb(var(--surface-rgb) / var(--glass-control-alpha));
  border-color: var(--border-light);
}

#permTable .perm-group-row > td {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--primary) 8%, rgb(var(--surface-alt-rgb) / .94)) !important;
  border-block-color: rgb(var(--ambient-rgb) / .16);
}
#permTable .perm-module-row > td {
  background: rgb(var(--surface-rgb) / var(--glass-control-alpha)) !important;
}
#permTable .perm-module-row > td.perm-sticky,
#permTable thead th.perm-sticky {
  /*
   * Sticky cells must mask role columns moving underneath them. Reusing the
   * translucent glass alpha here makes two headings readable at once.
   */
  background: rgb(var(--surface-alt-rgb)) !important;
}
#permTable td.perm-change-allowed {
  background: color-mix(in srgb, var(--success) 18%, rgb(var(--surface-rgb) / var(--glass-control-alpha))) !important;
}
#permTable td.perm-change-denied {
  background: color-mix(in srgb, var(--danger) 18%, rgb(var(--surface-rgb) / var(--glass-control-alpha))) !important;
}

/* Appearance selector */
.appearance-control { z-index: 1040; line-height: 1; }
.appearance-trigger::after { display: none; }
.appearance-menu {
  z-index: 1045;
  width: min(392px, calc(100vw - 24px));
  max-height: min(760px, calc(100vh - 24px));
  overflow-y: auto;
  padding: .56rem .62rem;
  border-radius: 18px;
  line-height: 1.35;
}
html[data-glass-level] body .appearance-menu {
  overflow-x: hidden;
  overflow-y: auto;
}
.appearance-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  padding: .12rem .22rem .5rem;
  color: var(--text-primary);
  font-size: .86rem;
  font-weight: 700;
}
.appearance-menu-header > span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.appearance-menu-header-actions {
  justify-content: flex-end;
}
.appearance-menu-close {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  padding: 0;
  color: var(--text-muted);
  background: rgb(var(--surface-alt-rgb) / var(--glass-control-alpha));
  border: 1px solid var(--border-light);
  border-radius: calc(var(--radius) - 4px);
}
.appearance-menu-close:hover,
.appearance-menu-close:focus-visible {
  color: var(--primary);
  border-color: var(--border-accent);
}
.appearance-menu-close i {
  margin: 0;
  line-height: 1;
}
.appearance-menu-header small,
.appearance-hint {
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 500;
}
.appearance-section {
  padding: .36rem .22rem;
  border-top: 1px solid var(--border-light);
}
.appearance-label,
.appearance-range-label {
  margin-bottom: .34rem;
  color: var(--text-secondary);
  font-size: .72rem;
  font-weight: 650;
}
.appearance-range-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.appearance-range-label output {
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.appearance-choice-grid {
  display: grid;
  gap: .34rem;
}
.appearance-theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.appearance-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.appearance-performance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.appearance-choice {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .4rem;
  padding: .4rem .5rem;
  color: var(--text-secondary);
  background: rgb(var(--surface-alt-rgb) / var(--glass-control-alpha));
  border: 1px solid var(--border-light);
  border-radius: 10px;
  font-size: .74rem;
  font-weight: 620;
  text-align: left;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.appearance-choice i {
  width: 1rem;
  color: var(--text-muted);
  font-size: .9rem;
  line-height: 1;
  text-align: center;
}
.appearance-choice:hover {
  color: var(--primary);
  border-color: var(--border-accent);
}
.appearance-choice.is-active {
  color: var(--primary);
  background: color-mix(
    in srgb,
    var(--primary) 12%,
    rgb(var(--surface-rgb) / var(--glass-control-alpha))
  );
  border-color: color-mix(in srgb, var(--primary) 48%, var(--border-light));
  box-shadow: inset 0 .5px 0 color-mix(in srgb, var(--primary) 8%, transparent);
}
.appearance-choice.is-active i { color: var(--primary); }
.appearance-choice:focus-visible { outline-width: 1px; outline-offset: 1px; }
.appearance-hint { display: block; margin-top: .3rem; line-height: 1.35; }
.appearance-solar-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .45rem;
  margin-top: .4rem;
}
.appearance-solar-button {
  min-height: 34px;
  justify-self: start;
  border-radius: 9px;
  font-size: .7rem;
}
.appearance-solar-button i {
  margin-right: .3rem;
}
.appearance-solar-button[aria-busy="true"] {
  cursor: wait;
  opacity: .66;
}
.appearance-solar-control .appearance-hint {
  margin-top: 0;
}
.appearance-range-shell {
  position: relative;
  min-height: 1rem;
}
.appearance-range { position: relative; z-index: 1; margin: 0; accent-color: var(--primary); }
.appearance-range-detents {
  position: absolute;
  inset: 50% 8px auto;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  transform: translateY(-50%);
}
.appearance-range-detents i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgb(148 156 170 / .78);
  box-shadow: 0 0 0 1px rgb(7 12 20 / .26);
}
.appearance-range:disabled {
  cursor: not-allowed;
  opacity: .45;
}
.appearance-section.is-disabled .appearance-range-label,
.appearance-section.is-disabled .appearance-range-scale {
  opacity: .62;
}
.appearance-range::-webkit-slider-thumb {
  background: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-glow);
}

/* Low-performance profile: preserve hierarchy and contrast while removing the
   expensive decorative sampling and continuous motion. */
html[data-performance="lite"] {
  --glass-blur: 5px !important;
  --glass-saturation: 112% !important;
  --glass-edge-blur: 0px !important;
  --glass-lens-opacity: 0 !important;
  --glass-scatter-opacity: 0 !important;
  --glass-shadow-alpha: .025 !important;
}
html[data-performance="lite"] .bg-particles,
html[data-performance="lite"] .app-pointer-glow,
html[data-performance="lite"] #bgCanvas {
  display: none !important;
}
html[data-performance="lite"] .particle,
html[data-performance="lite"] .geo-orbit,
html[data-performance="lite"] .geo-node,
html[data-performance="lite"] .geo-glass,
html[data-performance="lite"] .login-geometry-dots,
html[data-performance="lite"] .page-fade-in,
html[data-performance="lite"] .page-fade-in .card,
html[data-performance="lite"] .dropdown-menu.show,
html[data-performance="lite"] .modal.show .modal-dialog,
html[data-performance="lite"] .progress-bar::after {
  animation: none !important;
}
html[data-performance="lite"] body:not(.login-page) .card,
html[data-performance="lite"] body:not(.login-page) .tab-content-card,
html[data-performance="lite"] body:not(.login-page) .modal-content,
html[data-performance="lite"] body:not(.login-page) .toast,
html[data-performance="lite"] body:not(.login-page) .dropdown-menu,
html[data-performance="lite"] body:not(.login-page) .filter-bar,
html[data-performance="lite"] body:not(.login-page) .page-title {
  -webkit-backdrop-filter: blur(var(--internal-glass-blur)) saturate(112%) !important;
  backdrop-filter: blur(var(--internal-glass-blur)) saturate(112%) !important;
}
html[data-performance="lite"] body.login-page .login-card {
  -webkit-backdrop-filter: blur(var(--internal-glass-blur)) saturate(112%) !important;
  backdrop-filter: blur(var(--internal-glass-blur)) saturate(112%) !important;
}
html[data-performance="lite"] body > .navbar::before {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(112%) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(112%) !important;
}
/* Floating menus sit above text-heavy dashboards. Even in the lightweight
   profile they need a little more diffusion than ordinary cards; this only
   runs while the small menu surface is visible. */
html[data-performance="lite"] body:not(.login-page) .dropdown-menu {
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 2)) saturate(112%) !important;
  backdrop-filter: blur(calc(var(--glass-blur) * 2)) saturate(112%) !important;
}
html[data-performance="lite"] body.login-page .dropdown-menu {
  -webkit-backdrop-filter: blur(8px) saturate(112%) !important;
  backdrop-filter: blur(8px) saturate(112%) !important;
}
html[data-performance="lite"] .card:hover,
html[data-performance="lite"] .operations-stage:hover {
  transform: none !important;
  translate: none !important;
}
/* Low-performance means the optical pass is genuinely off, not merely
   invisible: no SVG displacement, chromatic split, edge sampling or lens
   transform is left for the compositor to calculate. */
html[data-performance="lite"] body:not(.login-page) .card::after,
html[data-performance="lite"] body:not(.login-page) .tab-content-card::after,
html[data-performance="lite"] body:not(.login-page) .modal-content::after,
html[data-performance="lite"] body:not(.login-page) .dropdown-menu::before,
html[data-performance="lite"] body:not(.login-page) .dropdown-menu::after,
html[data-performance="lite"] body:not(.login-page) .filter-bar::after,
html[data-performance="lite"] body:not(.login-page) .toast::after,
html[data-performance="lite"] body.login-page .login-card::after,
html[data-performance="lite"] body.login-page .login-appearance-menu::before,
html[data-performance="lite"] body.login-page .login-appearance-menu::after {
  content: none !important;
  display: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
  opacity: 0 !important;
}
.appearance-range-scale {
  display: flex;
  justify-content: space-between;
  margin-top: .2rem;
  color: var(--text-muted);
  font-size: .64rem;
}

/* Icon and text baselines shared by every page. */
.card-header > span,
.page-title,
.navbar .nav-link,
.dropdown-item {
  align-items: center;
}
.card-header > span { display: inline-flex; line-height: 1.35; }
.btn > i,
.card-header i,
.page-title > i,
.navbar .nav-link > i,
.dropdown-item > i {
  flex: 0 0 auto;
  line-height: 1;
  vertical-align: -.08em;
}
.btn {
  align-items: center;
  justify-content: center;
}

/* Demo-style left navigation. Top navigation remains the compatibility default. */
@media (min-width: 1200px) {
  html[data-app-layout="side"] body:not(.login-page) {
    padding-top: 0;
    padding-left: var(--app-sidebar-width);
  }
  html[data-app-layout="side"] body:not(.login-page) > .navbar {
    inset: 0 auto 0 0;
    width: var(--app-sidebar-width);
    height: 100dvh;
    min-height: 0;
    padding: 0;
    border-right: 1px solid rgb(var(--glass-border-rgb) / var(--glass-border-alpha));
    border-bottom: 0;
  }
  html[data-app-layout="side"] .navbar::after {
    inset: 5% -1px 5% auto;
    width: 1px;
    height: auto;
    background: linear-gradient(transparent, color-mix(in srgb, var(--primary) 44%, transparent), transparent);
  }
  html[data-app-layout="side"] .navbar > .container-fluid {
    width: 100%;
    height: 100%;
    flex-flow: column nowrap;
    align-items: stretch;
    padding: 18px 14px !important;
  }
  html[data-app-layout="side"] .navbar-brand {
    width: 100%;
    min-height: 54px;
    margin: 0 0 14px;
    padding: 4px 5px 14px;
    border-bottom: 1px solid var(--border-light);
  }
  html[data-app-layout="side"] .navbar-toggler { display: none; }
  html[data-app-layout="side"] #navbarNav {
    min-height: 0;
    display: flex !important;
    flex: 1 1 auto;
    flex-basis: auto;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden auto;
    padding: 0 2px 2px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  html[data-app-layout="side"] .navbar-nav {
    width: 100%;
    flex-direction: column;
    gap: 3px;
    margin: 0 0 auto !important;
  }
  html[data-app-layout="side"] .navbar .nav-link {
    min-height: 40px;
    display: flex;
    width: 100%;
    margin: 0;
    padding: .58rem .68rem !important;
    border-radius: var(--radius);
    font-size: .82rem;
  }
  html[data-app-layout="side"] .navbar .nav-link > i {
    width: 1.2rem;
    margin-right: .62rem;
    text-align: center;
  }
  html[data-app-layout="side"] .navbar .dropdown-menu:not(.appearance-menu) {
    position: static !important;
    width: 100%;
    margin: 3px 0 5px;
    padding: .42rem;
    transform: none !important;
    background: rgb(var(--surface-rgb) / var(--glass-menu-alpha)) !important;
    border: 1px solid rgb(var(--glass-border-rgb) / var(--glass-border-alpha));
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
  }
  html[data-app-layout="side"] .navbar .dropdown-item {
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: .45rem .62rem;
    font-size: .77rem;
    border-radius: calc(var(--radius) - 4px);
  }
  html[data-app-layout="side"] .navbar-text {
    width: 100%;
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    grid-template-rows: auto auto auto auto auto;
    gap: 6px 8px !important;
    margin-top: 12px;
    padding: 13px 4px 1px;
    border-top: 1px solid var(--border-light);
  }
  html[data-app-layout="side"] .business-unit-picker {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    max-width: none;
    position: relative;
  }
  html[data-app-layout="side"] .navbar .business-unit-picker .business-unit-menu {
    position: absolute !important;
    inset: auto 0 calc(100% + 8px) 0 !important;
    width: 100%;
    min-width: 100%;
    margin: 0;
    padding: .42rem;
    transform: none !important;
    background: rgb(var(--surface-rgb) / var(--glass-menu-alpha)) !important;
    border: 1px solid rgb(var(--glass-border-rgb) / var(--glass-border-alpha));
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 1045;
  }
  html[data-app-layout="side"] .appearance-control {
    grid-column: 3;
    grid-row: 2;
  }
  html[data-app-layout="side"] .archive-mode-control {
    grid-column: 1 / -1;
    grid-row: 4;
    width: 100%;
    justify-content: space-between;
  }
  html[data-app-layout="side"] .user-avatar {
    grid-column: 1;
    grid-row: 2;
  }
  html[data-app-layout="side"] .navbar-user-name {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    max-width: none;
  }
  html[data-app-layout="side"] .navbar-text > .badge {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html[data-app-layout="side"] .navbar-text > .logout-form {
    grid-column: 1 / -1;
    grid-row: 5;
    width: 100%;
    margin-top: 3px;
  }
  html[data-app-layout="side"] .navbar-text > .logout-form > .btn-outline-danger {
    width: 100%;
  }
  html[data-app-layout="side"] body:not(.login-page) .appearance-menu {
    position: fixed !important;
    inset: auto auto 18px calc(var(--app-sidebar-width) + 12px) !important;
    transform: none !important;
  }
  html[data-app-layout="side"] .app-main {
    width: auto;
    max-width: none;
    margin: 0 !important;
    padding: 22px clamp(18px, 2.4vw, 38px) 0;
    min-height: 100dvh;
  }
  html[data-app-layout="side"] .footer {
    margin-top: 2rem !important;
  }
  html[data-app-layout="side"] .footer > .container {
    max-width: none;
  }
}

@media (max-width: 1399.98px) {
  html[data-app-layout="top"] .appearance-menu {
    position: fixed !important;
    inset: 70px 12px auto auto !important;
    max-height: calc(100dvh - 82px);
    overflow-y: auto;
    transform: none !important;
  }
}

@media (max-width: 1199.98px) {
  html[data-app-layout="side"] body:not(.login-page) .appearance-menu {
    position: fixed !important;
    inset: 70px 12px auto auto !important;
    max-height: calc(100dvh - 82px);
    overflow-y: auto;
    transform: none !important;
  }
}

@media (max-width: 767.98px) {
  .filter-bar .unified-select { width: 100%; min-width: 0; }
}

/*
 * A filtered parent becomes a Backdrop Root, which prevents a dropdown inside
 * the filter bar from sampling the business cards behind it. Paint the filter
 * bar material on a child layer instead; the controls keep the same appearance
 * while their floating menus retain real frost/refraction.
 */
html[data-glass-level] body:not(.login-page) .filter-bar {
  background: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-glass-level] body:not(.login-page) .filter-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-color: rgb(var(--surface-rgb) / var(--glass-header-alpha));
  background-image:
    radial-gradient(
      ellipse at 12% -10%,
      rgb(255 255 255 / calc(var(--glass-scatter-opacity) * .07)),
      transparent 42%
    ),
    radial-gradient(
      ellipse at 106% 92%,
      rgb(var(--ambient-rgb) / calc(var(--glass-scatter-opacity) * .10)),
      transparent 46%
    ),
    linear-gradient(
      126deg,
      transparent 24%,
      rgb(var(--ambient-alt-rgb) / calc(var(--glass-scatter-opacity) * .08)) 52%,
      transparent 76%
    );
  -webkit-backdrop-filter:
    var(--glass-optical-filter, url("#glass-optical-soft"))
    blur(var(--glass-blur))
    saturate(var(--glass-saturation))
    contrast(1.035);
  backdrop-filter:
    var(--glass-optical-filter, url("#glass-optical-soft"))
    blur(var(--glass-blur))
    saturate(var(--glass-saturation))
    contrast(1.035);
}
html[data-performance="lite"][data-glass-level]
body:not(.login-page) .filter-bar::before {
  background-image: none;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(112%) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(112%) !important;
}

/* Central operational alerts use a distinct urgent material.  This is kept
   separate from normal Bootstrap danger badges so an infrastructure incident
   is recognizable by color, icon and shape rather than color alone. */
.alert-urgent-badge {
  color: #fff;
  background: linear-gradient(118deg, #6d28d9 0%, #db2777 48%, #dc2626 100%) !important;
  border: 1px solid rgb(255 255 255 / .42);
  box-shadow: 0 0 0 2px rgb(219 39 119 / .13), 0 4px 14px rgb(190 24 93 / .28);
  letter-spacing: .04em;
}

.alert-urgent-summary {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  color: var(--text-primary);
  background:
    linear-gradient(105deg, rgb(109 40 217 / .14), rgb(219 39 119 / .12), rgb(220 38 38 / .09));
  border: 1px solid rgb(219 39 119 / .38);
  border-left: 4px solid #db2777;
}

.alert-urgent-summary > .bi {
  color: #db2777;
  font-size: 1.35rem;
}

.alert-row-urgent > * {
  background: linear-gradient(90deg, rgb(109 40 217 / .10), rgb(219 39 119 / .08)) !important;
  border-color: rgb(219 39 119 / .20);
}

.alert-row-urgent > :first-child {
  box-shadow: inset 4px 0 0 #db2777;
}

.alert-row-urgent .alert-description {
  color: var(--text-secondary);
  margin-top: .2rem;
}

.alert-occurrence {
  display: inline-block;
  color: #be185d;
  font-size: .72rem;
  font-weight: 700;
  border: 1px solid rgb(190 24 93 / .28);
  border-radius: 999px;
  padding: .05rem .38rem;
}

#alertBadge.alert-badge-urgent {
  background: linear-gradient(118deg, #6d28d9, #db2777 55%, #dc2626) !important;
  box-shadow: 0 0 0 2px rgb(219 39 119 / .22);
  animation: urgent-alert-pulse 1.7s ease-in-out infinite;
}

@keyframes urgent-alert-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 2px rgb(219 39 119 / .20); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 5px rgb(219 39 119 / .08); }
}

@media (prefers-reduced-motion: reduce) {
  #alertBadge.alert-badge-urgent { animation: none; }
}

/* Internal appearance controls are portalled to body while open so Safari
   cannot crop the standard optical pass at the navbar's scrolling boundary. */
body:not(.login-page) > .appearance-menu.appearance-menu-portaled {
  z-index: 1090;
}

/* The portalled menu no longer has the navbar as its positioning container.
   Keep it anchored below the top navigation at every desktop width; limiting
   this rule to the collapsed-navbar breakpoint sends the menu below the
   viewport on wide top-layout screens. */
html[data-app-layout="top"]
body:not(.login-page) > .appearance-menu.appearance-menu-portaled {
  position: fixed !important;
  inset:
    max(70px, calc(env(safe-area-inset-top) + 58px))
    12px
    auto
    auto !important;
  max-height: calc(100dvh - max(82px, calc(env(safe-area-inset-top) + 70px)));
  overflow-y: auto;
  transform: none !important;
}

@media (max-width: 575.98px) {
  body:not(.login-page) > .appearance-menu.appearance-menu-portaled {
    width: calc(100vw - 24px);
    inset:
      max(64px, calc(env(safe-area-inset-top) + 56px))
      12px
      max(12px, env(safe-area-inset-bottom))
      auto !important;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Mobile WebKit does not consistently execute SVG URL filters in
     backdrop-filter. Preserve visible chromatic separation with a restrained
     two-axis material fringe while keeping text on an unfiltered plane. */
  html[data-performance="standard"][data-glass-level]
  body:not(.login-page) > .appearance-menu.appearance-menu-portaled::before,
  html[data-performance="standard"][data-glass-level]
  body:not(.login-page) .navbar-nav .dropdown-menu::before {
    opacity: calc(var(--glass-lens-opacity) * .36);
    box-shadow:
      inset 1px 0 0 rgb(255 72 118 / calc(var(--glass-dispersion-alpha) * .11)),
      inset -1px 0 0 rgb(62 196 255 / calc(var(--glass-dispersion-alpha) * .13)),
      inset 0 1px 0 rgb(72 205 255 / calc(var(--glass-dispersion-alpha) * .07)),
      inset 0 -1px 0 rgb(255 84 148 / calc(var(--glass-dispersion-alpha) * .08));
  }
}
/* Organization governance views */
.organization-card .card-body {
  padding: clamp(.9rem, 2vw, 1.35rem);
}

.organization-chart-intro,
.user-management-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.organization-chart-intro {
  margin-bottom: .85rem;
}

.organization-chart-intro strong {
  display: block;
  color: var(--text-primary);
  font-size: 1rem;
}

.organization-chart-intro p,
.user-management-toolbar p {
  margin: .2rem 0 0;
  color: var(--text-muted);
  font-size: .78rem;
}

.organization-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .4rem .8rem;
}

.organization-legend span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--text-secondary);
  font-size: .72rem;
  white-space: nowrap;
}

.organization-legend i {
  width: .62rem;
  height: .62rem;
  flex: 0 0 .62rem;
  border-radius: 50%;
  background: var(--legend-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--legend-color) 14%, transparent);
}

.organization-chart-stage {
  position: relative;
  min-height: 600px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: 18px;
  background:
    linear-gradient(rgb(var(--surface-rgb) / .84), rgb(var(--surface-rgb) / .84)),
    radial-gradient(circle at 12% 10%, rgb(var(--ambient-rgb) / .17), transparent 33rem),
    radial-gradient(circle at 88% 85%, rgb(var(--ambient-alt-rgb) / .14), transparent 30rem);
}

.organization-chart-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .32;
  background-image:
    linear-gradient(var(--border-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-light) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 88%);
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

.organization-chart-canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 600px;
  transition: height .25s ease;
}

.organization-chart-hint {
  position: absolute;
  right: .75rem;
  bottom: .65rem;
  z-index: 2;
  padding: .32rem .6rem;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  color: var(--text-muted);
  background: rgb(var(--surface-rgb) / .82);
  font-size: .68rem;
  pointer-events: none;
}

.organization-chart-error {
  height: 100%;
  min-height: 540px;
  display: grid;
  place-content: center;
  gap: .5rem;
  text-align: center;
  color: var(--danger);
}

.organization-chart-error i {
  font-size: 1.8rem;
}

.user-management-toolbar {
  margin-bottom: 1rem;
  padding: .7rem .85rem;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: rgb(var(--surface-alt-rgb) / .42);
}

.user-management-toolbar p {
  margin: 0;
}

.user-management-toolbar p i {
  margin-right: .35rem;
  color: var(--primary);
}

.user-management-toolbar .form-check {
  flex: 0 0 auto;
  margin: 0;
}

.user-row-inactive > * {
  color: var(--text-muted) !important;
  background: rgb(var(--surface-alt-rgb) / .55) !important;
}

.user-row-inactive td:first-child {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

@media (max-width: 720px) {
  .organization-card .card-header,
  .organization-chart-intro,
  .user-management-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .organization-card .card-header .btn-group {
    width: 100%;
  }

  .organization-card .card-header .btn {
    flex: 1 1 50%;
  }

  .organization-legend {
    justify-content: flex-start;
  }

  .organization-chart-stage,
  .organization-chart-canvas {
    min-height: 620px;
  }

  .organization-chart-hint {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    white-space: nowrap;
  }
}
.archive-mode-control {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  min-height: 2rem;
  padding: .2rem .5rem;
  border: 1px solid var(--glass-border, rgba(99, 112, 139, .2));
  border-radius: 999px;
  background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), .18);
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.archive-mode-control:has(.form-check-input:checked) {
  border-color: rgba(245, 158, 11, .55);
  background: rgba(245, 158, 11, .14);
  color: var(--bs-warning-text-emphasis, #664d03);
}

.archive-mode-control .form-switch {
  min-height: 0;
  padding-left: 2.15em;
}

.archive-mode-control .form-check-input {
  margin-top: 0;
  margin-left: -2.15em;
}

.user-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .45rem;
  max-height: 11rem;
  margin-top: .25rem;
  padding: .55rem;
  overflow: auto;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), .18);
}

.user-checkbox-option {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  padding: .4rem .5rem;
  border: 1px solid transparent;
  border-radius: .5rem;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.user-checkbox-option:hover,
.user-checkbox-option:has(.form-check-input:checked) {
  border-color: rgba(var(--bs-primary-rgb), .38);
  background: rgba(var(--bs-primary-rgb), .09);
}

.user-checkbox-option.is-primary-selection {
  opacity: .52;
  cursor: default;
}

.user-checkbox-option .form-check-input {
  flex: 0 0 auto;
  margin: 0;
}

.bom-entry-table-shell {
  overflow: auto;
  border: 1px solid var(--bs-border-color);
  border-radius: .7rem;
  background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), .12);
}

.bom-entry-table {
  min-width: 900px;
}

.bom-entry-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: .6rem .45rem;
  background: rgb(var(--surface-rgb) / .86);
  white-space: nowrap;
}

.bom-entry-table td {
  padding: .42rem .32rem;
}

.bom-entry-table .bom-col-index {
  width: 3.4rem;
}

.bom-entry-table .bom-col-quantity {
  width: 8.5rem;
}

.bom-entry-table .bom-col-unit {
  width: 6.5rem;
}

.bom-entry-table .bom-col-action {
  width: 4.5rem;
}

.bom-material-row .form-control,
.bom-material-row .form-select {
  min-height: 2.15rem;
}

.modal-header {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.modal-header :is(button, a, input, select, textarea, label) {
  cursor: auto;
}

.modal-dialog.is-dragging .modal-header {
  cursor: grabbing;
}

.modal-dialog.is-repositioning {
  transition: left var(--motion-fast) ease, top var(--motion-fast) ease;
}

.archived-record {
  opacity: .72;
}

.archived-record::before {
  content: "已归档";
  display: inline-block;
  margin: 0 .35rem .2rem 0;
  padding: .08rem .38rem;
  border-radius: 999px;
  color: #fff;
  background: #64748b;
  font-size: .7rem;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .archive-mode-label {
    display: none;
  }

  .archive-mode-control {
    padding-inline: .42rem;
  }

  .modal-header {
    cursor: default;
    touch-action: auto;
  }
}