/* ============================================================================
   Strong8K Admin — "Midnight Glass" premium skin over react-admin (MUI v5).
   Deep-indigo glassmorphism with violet→cyan accents and vibrant glows.
   Pure CSS layer: remove the <link> in index.html to revert instantly.
   Pairs with admin-enhance.css (responsive/cross-browser layer).
   (Variable NAMES kept as --s8k-gold* for backward compat; values are violet.)
   ========================================================================== */

/* ---- Self-hosted variable fonts (offline-capable, no external requests) --- */
@font-face {
  font-family: 'InterVar';
  src: url('/assets/fonts/inter.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SpaceGroteskVar';
  src: url('/assets/fonts/space-grotesk.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}

:root {
  /* Brand — violet + cyan (names kept for compat with enhance layer) */
  --s8k-gold: #a78bfa;          /* primary accent (violet) */
  --s8k-gold-bright: #c4b5fd;   /* light violet */
  --s8k-gold-deep: #7c5cfc;     /* deep violet */
  --s8k-cyan: #22d3ee;          /* secondary accent (cyan) */
  --s8k-violet-rgb: 167, 139, 250;
  --s8k-cyan-rgb: 34, 211, 238;

  /* Surfaces (deep indigo, cool) */
  --s8k-ink: #0b0a1f;
  --s8k-ink-2: #0a0917;
  --s8k-surface: rgba(30, 26, 58, 0.52);
  --s8k-surface-solid: #16132b;
  --s8k-elev: rgba(38, 33, 74, 0.92);
  --s8k-text: #f5f3ff;
  --s8k-muted: #a7a1c9;
  --s8k-faint: #726c93;

  /* Lines & glows */
  --s8k-hairline: rgba(255, 255, 255, 0.08);
  --s8k-hairline-strong: rgba(255, 255, 255, 0.16);
  --s8k-accent-soft: rgba(167, 139, 250, 0.16);
  --s8k-glow: 0 0 0 1px rgba(167, 139, 250, 0.20), 0 10px 34px rgba(124, 92, 252, 0.20);
  --s8k-grad: linear-gradient(135deg, #a78bfa 0%, #7c5cfc 55%, #22d3ee 140%);

  /* Shadows (layered, soft) */
  --s8k-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 34px -14px rgba(0,0,0,.72), 0 34px 70px -34px rgba(20,10,50,.6);
  --s8k-radius: 18px;
  --s8k-radius-sm: 12px;

  --s8k-font: 'InterVar', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --s8k-display: 'SpaceGroteskVar', 'InterVar', system-ui, sans-serif;

  color-scheme: dark;
}

/* ---- Midnight canvas ------------------------------------------------------ */
body, .RaLayout-root, .RaLayout-appFrame, .RaLayout-contentWithSidebar {
  background:
    radial-gradient(1200px 760px at 4% -14%, rgba(124,92,252,.30), transparent 55%),
    radial-gradient(1050px 720px at 104% 2%, rgba(34,211,238,.16), transparent 52%),
    radial-gradient(1100px 800px at 60% 122%, rgba(167,139,250,.20), transparent 55%),
    radial-gradient(820px 560px at 88% 92%, rgba(236,72,153,.10), transparent 55%),
    var(--s8k-ink) !important;
  background-attachment: fixed !important;
  color: var(--s8k-text) !important;
  font-family: var(--s8k-font) !important;
  letter-spacing: .1px;
}
.RaLayout-content { background: transparent !important; }
body { font-feature-settings: 'cv05' 1, 'ss01' 1, 'cv01' 1; }

h1,h2,h3,h4,h5,h6,
.RaAppBar-title, .MuiDialogTitle-root, .RaLogin-root h1, .MuiCardHeader-title {
  font-family: var(--s8k-display) !important;
  letter-spacing: .2px;
}

/* ---- App bar: sticky frosted glass --------------------------------------- */
.MuiAppBar-root {
  background: linear-gradient(90deg, rgba(18,15,40,.82), rgba(26,20,58,.82)) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  color: var(--s8k-text) !important;
  border-bottom: 1px solid var(--s8k-hairline) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 12px 34px -18px rgba(0,0,0,.9) !important;
}
.MuiAppBar-root .RaAppBar-title { font-weight: 600; letter-spacing: .3px; }

/* ---- Sidebar / navigation ------------------------------------------------- */
.RaSidebar-fixed, .RaSidebar-paper,
.MuiDrawer-root .MuiDrawer-paper {
  background: linear-gradient(180deg, rgba(24,20,50,.88), rgba(12,11,26,.9)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-right: 1px solid var(--s8k-hairline) !important;
}
.RaMenuItemLink-root, a.RaMenuItemLink-root, .MuiMenuItem-root {
  color: var(--s8k-muted) !important;
  border-radius: var(--s8k-radius-sm) !important;
  margin: 3px 10px !important;
  font-weight: 500 !important;
  transition: background .18s ease, color .18s ease, transform .18s ease !important;
}
.RaMenuItemLink-root .MuiListItemIcon-root, .MuiMenuItem-root .MuiListItemIcon-root {
  color: var(--s8k-faint) !important; min-width: 40px !important; transition: color .18s ease;
}
.RaMenuItemLink-root:hover { background: rgba(255,255,255,.05) !important; color: var(--s8k-text) !important; }
.RaMenuItemLink-root:hover .MuiListItemIcon-root { color: var(--s8k-gold) !important; }
.RaMenuItemLink-active, a.RaMenuItemLink-active {
  position: relative;
  background: linear-gradient(90deg, rgba(167,139,250,.20), rgba(34,211,238,.05)) !important;
  color: var(--s8k-gold-bright) !important;
  box-shadow: inset 0 0 0 1px rgba(167,139,250,.28);
}
.RaMenuItemLink-active::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px;
  border-radius: 3px; background: linear-gradient(180deg, var(--s8k-gold-bright), var(--s8k-cyan));
  box-shadow: 0 0 14px rgba(167,139,250,.7);
}
.RaMenuItemLink-active .MuiListItemIcon-root { color: var(--s8k-gold) !important; }

/* ---- Cards / panels / surfaces: frosted glass with depth ------------------ */
.MuiPaper-root {
  background: var(--s8k-surface) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  color: var(--s8k-text) !important;
  border: 1px solid var(--s8k-hairline) !important;
  border-radius: var(--s8k-radius) !important;
  box-shadow: var(--s8k-shadow) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) !important;
}
/* Menus/popovers should read as solid, not washed out. */
.MuiMenu-paper, .MuiPopover-paper, .MuiAutocomplete-paper {
  background: var(--s8k-elev) !important;
}
/* Interactive lift on primary content cards. */
.RaList-content, .MuiCard-root, .RaCreate-main .MuiCard-root, .RaEdit-main .MuiCard-root {
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .25s ease !important;
}
.RaList-content:hover, .MuiCard-root:hover {
  border-color: var(--s8k-hairline-strong) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 20px 54px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(167,139,250,.10) !important;
}

/* ---- Data grid / tables --------------------------------------------------- */
.MuiTableCell-root {
  color: var(--s8k-text) !important;
  border-bottom: 1px solid var(--s8k-hairline) !important;
  font-variant-numeric: tabular-nums;
}
.MuiTableCell-head, .RaDatagrid-headerCell {
  color: var(--s8k-gold-bright) !important;
  font-family: var(--s8k-font) !important;
  font-weight: 700 !important;
  font-size: .72rem !important;
  letter-spacing: .8px !important;
  text-transform: uppercase !important;
  background: rgba(10,8,26,.42) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(167,139,250,.32) !important;
}
.MuiTableSortLabel-root, .MuiTableSortLabel-root.Mui-active, .MuiTableSortLabel-icon { color: var(--s8k-gold) !important; }
.RaDatagrid-row { transition: background .15s ease; }
.MuiTableRow-root:hover .MuiTableCell-root { background: rgba(167,139,250,.08) !important; }
.RaDatagrid-rowCell a { color: var(--s8k-gold-bright) !important; }

/* ---- Buttons -------------------------------------------------------------- */
.MuiButton-root { transition: transform .15s ease, box-shadow .2s ease, filter .2s ease !important; }
.MuiButton-containedPrimary, .MuiButton-contained {
  background: linear-gradient(135deg, var(--s8k-gold-bright) 0%, var(--s8k-gold-deep) 70%, #6d4bf0 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: var(--s8k-radius-sm) !important;
  text-transform: none !important;
  letter-spacing: .2px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 8px 24px -8px rgba(124,92,252,.7) !important;
}
.MuiButton-contained:hover { transform: translateY(-1px); filter: brightness(1.06);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 14px 32px -8px rgba(124,92,252,.85) !important; }
.MuiButton-contained:active { transform: translateY(0); filter: brightness(.98); }
.MuiButton-root:not(.MuiButton-contained) {
  color: var(--s8k-gold-bright) !important; text-transform: none !important; font-weight: 600 !important;
  border-radius: var(--s8k-radius-sm) !important;
}
.MuiButton-outlined { border-color: var(--s8k-hairline-strong) !important; }
.MuiButton-outlined:hover { border-color: var(--s8k-gold) !important; background: var(--s8k-accent-soft) !important; }
.MuiIconButton-root { color: var(--s8k-muted) !important; transition: color .15s ease, background .15s ease; border-radius: 10px !important; }
.MuiIconButton-root:hover { color: var(--s8k-gold-bright) !important; background: rgba(255,255,255,.06) !important; }
.MuiFab-root { background: var(--s8k-grad) !important; color: #fff !important;
  box-shadow: 0 12px 30px -8px rgba(124,92,252,.7) !important; }

/* ---- Inputs --------------------------------------------------------------- */
.MuiFilledInput-root, .MuiOutlinedInput-root {
  background: rgba(255,255,255,.04) !important;
  color: var(--s8k-text) !important;
  border-radius: var(--s8k-radius-sm) !important;
  transition: box-shadow .2s ease, background .2s ease !important;
}
.MuiOutlinedInput-root:hover { background: rgba(255,255,255,.06) !important; }
.MuiInputBase-input { color: var(--s8k-text) !important; }
.MuiInputBase-input::placeholder { color: var(--s8k-faint) !important; }
.MuiInputLabel-root { color: var(--s8k-muted) !important; }
.MuiInputLabel-root.Mui-focused { color: var(--s8k-gold-bright) !important; }
.MuiOutlinedInput-notchedOutline { border-color: var(--s8k-hairline-strong) !important; transition: border-color .2s ease; }
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--s8k-gold) !important; }
.MuiOutlinedInput-root.Mui-focused { box-shadow: 0 0 0 4px rgba(167,139,250,.18) !important; }
.MuiFilledInput-underline:after, .MuiInput-underline:after { border-color: var(--s8k-gold) !important; }
.MuiFormHelperText-root { color: var(--s8k-muted) !important; }

/* ---- Chips / badges / toggles / progress ---------------------------------- */
.MuiChip-root {
  background: rgba(167,139,250,.14) !important; color: var(--s8k-gold-bright) !important;
  font-weight: 600 !important; border: 1px solid rgba(167,139,250,.26) !important; border-radius: 999px !important;
}
.MuiChip-root.MuiChip-colorSuccess, .MuiChip-filledSuccess { background: rgba(52,211,153,.14) !important; color:#7ff0c4 !important; border-color: rgba(52,211,153,.3) !important; }
.MuiChip-root.MuiChip-colorError, .MuiChip-filledError { background: rgba(255,99,120,.14) !important; color:#ff9aab !important; border-color: rgba(255,99,120,.3) !important; }
.MuiCheckbox-root { color: var(--s8k-faint) !important; }
.MuiCheckbox-root.Mui-checked { color: var(--s8k-gold) !important; }
.MuiSwitch-track { background: #3a3556 !important; opacity: 1 !important; }
.Mui-checked + .MuiSwitch-track { background: linear-gradient(90deg, var(--s8k-gold-deep), var(--s8k-cyan)) !important; }
.MuiSwitch-thumb { background: #f2f0f5 !important; }
.MuiCircularProgress-root, .MuiLinearProgress-bar { color: var(--s8k-gold) !important; }
.MuiLinearProgress-root { background: rgba(255,255,255,.06) !important; }
.MuiLinearProgress-bar { background: linear-gradient(90deg, var(--s8k-gold), var(--s8k-cyan)) !important; }
.MuiTabs-indicator { background: linear-gradient(90deg, var(--s8k-gold-bright), var(--s8k-cyan)) !important; height: 3px !important; border-radius: 3px; }
.MuiTab-root.Mui-selected { color: var(--s8k-gold-bright) !important; }
.MuiDivider-root { border-color: var(--s8k-hairline) !important; }

/* ---- Misc chrome ---------------------------------------------------------- */
.MuiDialogTitle-root { color: var(--s8k-gold-bright) !important; font-weight: 600 !important; }
.MuiTablePagination-root, .MuiTablePagination-selectLabel, .MuiTablePagination-displayedRows { color: var(--s8k-muted) !important; }
.RaBulkActionsToolbar-toolbar { background: rgba(167,139,250,.14) !important; border-radius: var(--s8k-radius-sm) !important; }
.MuiTooltip-tooltip { background: #100e22 !important; border: 1px solid var(--s8k-hairline) !important; border-radius: 10px !important; }
.MuiSnackbarContent-root, .RaNotification-multiLine { border-radius: var(--s8k-radius-sm) !important; }
a { color: var(--s8k-gold-bright); text-underline-offset: 3px; }
.MuiTypography-root { color: inherit; }

/* ---- Login: centered glass card over midnight ----------------------------- */
.RaLogin-root {
  background:
    radial-gradient(900px 560px at 28% -10%, rgba(124,92,252,.26), transparent 60%),
    radial-gradient(820px 620px at 86% 22%, rgba(34,211,238,.14), transparent 55%),
    var(--s8k-ink) !important;
}
.RaLogin-card {
  min-width: 350px;
  background: var(--s8k-elev) !important;
  -webkit-backdrop-filter: blur(26px) saturate(160%); backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid var(--s8k-hairline-strong) !important;
  border-radius: 22px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 40px 90px -30px rgba(10,6,40,.9) !important;
  overflow: hidden;
}
.RaLogin-avatar .MuiAvatar-root {
  background: var(--s8k-grad) !important;
  color: #fff !important;
  box-shadow: 0 0 0 6px rgba(167,139,250,.14), 0 10px 30px -8px rgba(124,92,252,.6) !important;
}

/* ---- Slim gradient scrollbars --------------------------------------------- */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(167,139,250,.6), rgba(34,211,238,.3));
  border-radius: 999px; border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(167,139,250,.9), rgba(34,211,238,.5)); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }