/* ============================================================================
   Strong8K Admin — "Aurora" premium skin over react-admin (MUI v5).
   Pure CSS layer: remove the <link> in index.html to revert instantly.
   Pairs with admin-enhance.css (responsive/cross-browser layer).
   ========================================================================== */

/* ---- 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 */
  --s8k-gold: #efbf4a;
  --s8k-gold-bright: #f8dd8a;
  --s8k-gold-deep: #cf9b2e;
  --s8k-cyan: #47bfff;

  /* Surfaces (near-black, cool) */
  --s8k-ink: #08070b;
  --s8k-surface: rgba(24, 21, 30, 0.72);
  --s8k-surface-solid: #16131c;
  --s8k-elev: rgba(31, 27, 38, 0.82);
  --s8k-text: #f4f2f8;
  --s8k-muted: #a19cae;
  --s8k-faint: #6f6a7c;

  /* Lines & glows */
  --s8k-hairline: rgba(255, 255, 255, 0.08);
  --s8k-hairline-strong: rgba(255, 255, 255, 0.14);
  --s8k-accent-soft: rgba(239, 191, 74, 0.14);
  --s8k-glow: 0 0 0 1px rgba(239, 191, 74, 0.16), 0 8px 30px rgba(239, 191, 74, 0.10);

  /* Shadows (layered, soft) */
  --s8k-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 10px 30px -12px rgba(0,0,0,.7), 0 30px 60px -30px rgba(0,0,0,.55);
  --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;
}

/* ---- Aurora canvas -------------------------------------------------------- */
body, .RaLayout-root, .RaLayout-appFrame, .RaLayout-contentWithSidebar {
  background:
    radial-gradient(1200px 720px at 6% -12%, rgba(139,92,246,.22), transparent 55%),
    radial-gradient(1000px 680px at 102% 4%, rgba(34,211,238,.12), transparent 50%),
    radial-gradient(1050px 760px at 58% 118%, rgba(236,72,153,.14), transparent 55%),
    radial-gradient(900px 560px at 88% 90%, rgba(239,191,74,.07), 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(20,17,26,.82), rgba(28,22,16,.82)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  color: var(--s8k-text) !important;
  border-bottom: 1px solid var(--s8k-hairline) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px -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(22,19,28,.86), rgba(14,12,18,.86)) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  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,.045) !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, var(--s8k-accent-soft), rgba(239,191,74,.03)) !important;
  color: var(--s8k-gold-bright) !important;
  box-shadow: inset 0 0 0 1px rgba(239,191,74,.18);
}
.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-gold-deep));
  box-shadow: 0 0 12px rgba(239,191,74,.6);
}
.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(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  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,.02), 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,.06) inset, 0 18px 50px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(239,191,74,.06) !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) !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(0,0,0,.28) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(239,191,74,.28) !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(239,191,74,.06) !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(180deg, var(--s8k-gold-bright) 0%, var(--s8k-gold-deep) 100%) !important;
  color: #1a1206 !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,.4) inset, 0 8px 22px -8px rgba(239,191,74,.6) !important;
}
.MuiButton-contained:hover { transform: translateY(-1px); filter: brightness(1.05);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 12px 28px -8px rgba(239,191,74,.7) !important; }
.MuiButton-contained:active { transform: translateY(0); filter: brightness(.98); }
.MuiButton-root:not(.MuiButton-contained) {
  color: var(--s8k-gold) !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) !important; background: rgba(255,255,255,.05) !important; }
.MuiFab-root { background: linear-gradient(180deg, var(--s8k-gold-bright), var(--s8k-gold-deep)) !important; color: #1a1206 !important;
  box-shadow: 0 10px 28px -8px rgba(239,191,74,.6) !important; }

/* ---- Inputs --------------------------------------------------------------- */
.MuiFilledInput-root, .MuiOutlinedInput-root {
  background: rgba(255,255,255,.035) !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,.05) !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) !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(239,191,74,.14) !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(239,191,74,.12) !important; color: var(--s8k-gold-bright) !important;
  font-weight: 600 !important; border: 1px solid rgba(239,191,74,.22) !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: #4a4655 !important; opacity: 1 !important; }
.Mui-checked + .MuiSwitch-track { background: linear-gradient(90deg, var(--s8k-gold-deep), var(--s8k-gold)) !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-gold-deep)) !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(239,191,74,.12) !important; border-radius: var(--s8k-radius-sm) !important; }
.MuiTooltip-tooltip { background: #0c0a11 !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 aurora ------------------------------- */
.RaLogin-root {
  background:
    radial-gradient(900px 520px at 30% -10%, rgba(239,191,74,.14), transparent 60%),
    radial-gradient(800px 600px at 85% 20%, rgba(71,191,255,.10), transparent 55%),
    var(--s8k-ink) !important;
}
.RaLogin-card {
  min-width: 350px;
  background: var(--s8k-elev) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid var(--s8k-hairline-strong) !important;
  border-radius: 22px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 40px 90px -30px rgba(0,0,0,.85) !important;
  overflow: hidden;
}
.RaLogin-avatar .MuiAvatar-root {
  background: linear-gradient(160deg, var(--s8k-gold-bright), var(--s8k-gold-deep)) !important;
  color: #1a1206 !important;
  box-shadow: 0 0 0 6px rgba(239,191,74,.12), 0 10px 30px -8px rgba(239,191,74,.5) !important;
}

/* ---- Slim gradient scrollbars --------------------------------------------- */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(239,191,74,.5), rgba(239,191,74,.2));
  border-radius: 999px; border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(239,191,74,.8), rgba(239,191,74,.4)); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }