/* ===== PSC CMS - admin panel theme =====
   Registered through FilamentAsset (see AppServiceProvider), so it needs no Vite build:
   `php artisan filament:assets` publishes it, and the Docker entrypoint runs that on boot.
   The palette mirrors the public website - deep purple, gold accent, Manrope headings. */

:root {
  --psc-purple: #362B68;
  --psc-purple-deep: #241C4A;
  --psc-purple-mid: #5B4AA6;
  --psc-gold: #C8A348;
  --psc-gold-soft: rgba(200, 163, 72, 0.14);
  --psc-ink: #251F3F;
  --psc-muted: #6A6386;
  --psc-line: #E9E7F2;
  --psc-canvas: #F7F6FB;
  --psc-ease: cubic-bezier(.2, .7, .2, 1);
}

/* Manrope for anything that carries weight; Inter (the panel default) for body copy. */
.fi-header-heading,
.fi-simple-header-heading,
.fi-section-header-heading,
.fi-wi-stats-overview-stat-value,
.fi-modal-heading,
.fi-sidebar-group-label {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.01em;
}

.fi-body { background-color: var(--psc-canvas); }
.dark .fi-body { background-color: #17132C; }

/* ---------- Sidebar: the one strongly branded surface ---------- */
.fi-sidebar,
.fi-sidebar-header {
  background: linear-gradient(180deg, var(--psc-purple) 0%, var(--psc-purple-deep) 100%);
  border-right: 0;
}
.fi-sidebar-header { box-shadow: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

/* The nav scrolls, and the platform's default scrollbar cuts a bright grey stripe — arrow
   buttons and all — down the purple. Both syntaxes are here on purpose: Chrome 121+ and
   Firefox honour `scrollbar-*`, older Chrome and Safari only the -webkit- pseudo-elements. */
.fi-sidebar .fi-sidebar-nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.26) rgba(255, 255, 255, 0.06);
}
.fi-sidebar .fi-sidebar-nav::-webkit-scrollbar { width: 8px; }
.fi-sidebar .fi-sidebar-nav::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 99px;
}
.fi-sidebar .fi-sidebar-nav::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.26);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background-color .3s var(--psc-ease);
}
.fi-sidebar .fi-sidebar-nav::-webkit-scrollbar-thumb:hover {
  background-color: rgba(200, 163, 72, 0.75);
}
/* Chrome on Windows draws stepper arrows unless they are asked to go away. */
.fi-sidebar .fi-sidebar-nav::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
.fi-sidebar .fi-sidebar-nav::-webkit-scrollbar-corner { background: transparent; }

/* Every rule below is scoped to `.fi-sidebar` on purpose: Filament colours the label,
   the icon and the group rail with their own selectors, so a colour set on the row
   alone never reaches them. The extra class also outweighs Filament's own specificity. */
.fi-sidebar .fi-sidebar-group-label {
  color: rgba(255, 255, 255, 0.46);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.fi-sidebar .fi-sidebar-group-btn:hover .fi-sidebar-group-label { color: #FFFFFF; }
.fi-sidebar .fi-sidebar-group-btn .fi-icon,
.fi-sidebar .fi-sidebar-group-collapse-btn { color: rgba(255, 255, 255, 0.4); }
.fi-sidebar .fi-sidebar-group-btn { cursor: pointer; }

/* ---------- Group open/close animation ----------
   Filament's markup asks for `x-collapse`, but its JS bundle never registers that Alpine
   directive (it ships float, load-css, load-js, sortable, tooltip and mousetrap only), so
   groups snapped open and shut. The height and fade are done here instead, keyed off the
   `fi-collapsed` class Filament already toggles on the group.

   `display` is forced only while the sidebar is expanded, so the icon-only sidebar keeps
   using its dropdown. Each group's open height arrives as --psc-group-h from the accordion
   script; the fallback keeps every item reachable if that script never runs. */
.fi-sidebar.fi-sidebar-open .fi-sidebar-group-items {
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  max-height: var(--psc-group-h, 100rem);
  opacity: 1;
  transition: max-height .42s var(--psc-ease), opacity .3s var(--psc-ease);
}
/* The `:not` guard keeps the unlabelled group (Dashboard) visible whatever happens —
   Filament renders it as a collapsible group too. */
.fi-sidebar.fi-sidebar-open .fi-sidebar-group.fi-collapsed:not([data-group-label=""]) .fi-sidebar-group-items {
  max-height: 0;
  opacity: 0;
}
.fi-sidebar .fi-sidebar-group-collapse-btn {
  transition: rotate .42s var(--psc-ease), color .3s var(--psc-ease);
}

.fi-sidebar .fi-sidebar-item-btn {
  border-radius: 10px;
  transition: background-color .4s var(--psc-ease);
}
.fi-sidebar .fi-sidebar-item-label {
  color: rgba(255, 255, 255, 0.78);
  transition: color .3s var(--psc-ease);
}
.fi-sidebar .fi-sidebar-item-btn .fi-icon {
  color: rgba(255, 255, 255, 0.52);
  transition: color .3s var(--psc-ease);
}
/* The dot-and-line rail drawn beside items that sit inside a group. */
.fi-sidebar .fi-sidebar-item-grouped-border-part { background-color: rgba(255, 255, 255, 0.3); }
.fi-sidebar .fi-sidebar-item-grouped-border-part-not-first,
.fi-sidebar .fi-sidebar-item-grouped-border-part-not-last { background-color: rgba(255, 255, 255, 0.16); }

.fi-sidebar .fi-sidebar-item-btn:hover { background-color: rgba(255, 255, 255, 0.08); }
.fi-sidebar .fi-sidebar-item-btn:hover .fi-sidebar-item-label { color: #FFFFFF; }
.fi-sidebar .fi-sidebar-item-btn:hover .fi-icon { color: var(--psc-gold); }
.fi-sidebar .fi-sidebar-item-btn:hover .fi-sidebar-item-grouped-border-part { background-color: var(--psc-gold); }
.fi-sidebar .fi-sidebar-item-btn:focus-visible {
  outline: 2px solid var(--psc-gold);
  outline-offset: -2px;
}

/* Active item: gold wash plus the hairline rule the website uses for its section nav.
   Filament marks the active row with `fi-active`, not `fi-sidebar-item-active`. */
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
  background-color: var(--psc-gold-soft);
  box-shadow: inset 3px 0 0 var(--psc-gold);
}
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
  color: #FFFFFF;
  font-weight: 700;
}
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon { color: var(--psc-gold); }
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-grouped-border > .fi-sidebar-item-grouped-border-part {
  background-color: var(--psc-gold);
}

/* The collapse handle sits on the same dark field as the brand block. */
.fi-topbar-close-collapse-sidebar-btn,
.fi-topbar-open-collapse-sidebar-btn { color: rgba(255, 255, 255, 0.6); }
.fi-topbar-close-collapse-sidebar-btn:hover,
.fi-topbar-open-collapse-sidebar-btn:hover { color: var(--psc-gold); }

/* ---------- Topbar ---------- */
.fi-topbar > nav {
  background-color: #FFFFFF;
  border-bottom: 1px solid var(--psc-line);
  box-shadow: none;
}
.dark .fi-topbar > nav { background-color: #201A3D; border-bottom-color: rgba(255, 255, 255, 0.08); }

/* ---------- Page headings ---------- */
.fi-header-heading { font-weight: 800; color: var(--psc-ink); }
.dark .fi-header-heading { color: #F4F2FA; }
.fi-header-subheading { color: var(--psc-muted); }

/* ---------- Cards, sections, widgets ---------- */
.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn {
  border: 1px solid var(--psc-line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(54, 43, 104, 0.04);
}
.dark .fi-section,
.dark .fi-wi-stats-overview-stat,
.dark .fi-ta-ctn { border-color: rgba(255, 255, 255, 0.09); }

/* ---------- Stat cards: the numeral does the talking ---------- */
.fi-wi-stats-overview-stat {
  position: relative;
  overflow: hidden;
  transition: transform .5s var(--psc-ease), box-shadow .5s var(--psc-ease);
}
.fi-wi-stats-overview-stat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--psc-gold);
  opacity: 0;
  transition: opacity .4s var(--psc-ease);
}
.fi-wi-stats-overview-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(54, 43, 104, 0.12);
}
.fi-wi-stats-overview-stat:hover::before { opacity: 1; }

/* The icon sits in a tinted badge beside the label. Filament renders it with no colour of
   its own there, so the tint is the panel purple rather than the stat's status colour. */
.fi-wi-stats-overview-stat-label-ctn { align-items: center; gap: 10px; }
.fi-wi-stats-overview-stat-label-ctn > .fi-icon {
  flex: none;
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: 9px;
  background: rgba(91, 74, 166, 0.11);
  color: var(--psc-purple-mid);
}
.dark .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
  background: rgba(255, 255, 255, 0.09);
  color: #C0B4EC;
}
.fi-wi-stats-overview-stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--psc-muted);
}
.fi-wi-stats-overview-stat-value {
  font-weight: 800;
  font-size: 2.15rem;
  line-height: 1.05;
  color: var(--psc-purple);
}
.dark .fi-wi-stats-overview-stat-value { color: #FFFFFF; }
.fi-wi-stats-overview-stat-description { font-size: 12.5px; }

/* ---------- Card headers ----------
   Charts and table widgets render through Filament's section component, which is plainer
   than the two hand-built panels. Matching them up makes the dashboard read as one piece. */
.fi-section-header-heading {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--psc-ink);
}
.dark .fi-section-header-heading { color: #F4F2FA; }
.fi-section-header-description { font-size: 12.5px; color: var(--psc-muted); }

/* ---------- Dashboard entrance ----------
   Widgets ease in once on load, in reading order, rather than all snapping in together. */
@keyframes psc-widget-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
/* `backwards`, not `both`: once it ends the wrapper drops its transform, so it stops being
   a containing block that would trap dropdowns and modals inside the card. */
.fi-wi-widget {
  animation: psc-widget-in .55s cubic-bezier(.22, .61, .21, 1) backwards;
}
.fi-wi-widget:nth-child(2) { animation-delay: .05s; }
.fi-wi-widget:nth-child(3) { animation-delay: .1s; }
.fi-wi-widget:nth-child(4) { animation-delay: .15s; }
.fi-wi-widget:nth-child(5) { animation-delay: .2s; }
.fi-wi-widget:nth-child(n + 6) { animation-delay: .25s; }

/* ---------- Tables ---------- */
.fi-ta-header-cell {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--psc-muted);
}
.fi-ta-row { transition: background-color .3s var(--psc-ease); }
.fi-ta-row:hover { background-color: rgba(200, 163, 72, 0.05); }

/* ---------- Buttons ---------- */
.fi-btn { border-radius: 10px; font-weight: 700; }

/* ---------- Login ---------- */
.fi-simple-layout { background: var(--psc-canvas); }
.dark .fi-simple-layout { background: #17132C; }
.fi-simple-main {
  border: 1px solid var(--psc-line);
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(54, 43, 104, 0.12);
}
.dark .fi-simple-main { border-color: rgba(255, 255, 255, 0.09); }
.fi-simple-header-heading { font-weight: 800; color: var(--psc-purple); }
.dark .fi-simple-header-heading { color: #FFFFFF; }

/* Crest + wordmark above the login card, injected by a render hook. */
.psc-login-brand { text-align: center; margin-bottom: 26px; }
.psc-login-brand img { height: 62px; width: auto; margin: 0 auto 14px; display: block; }
.psc-login-brand-name {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: var(--psc-purple);
  letter-spacing: -0.01em;
}
.dark .psc-login-brand-name { color: #FFFFFF; }
.psc-login-brand-tag {
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--psc-gold);
}

/* Sign-off pinned under the sidebar navigation. */
.psc-sidebar-foot {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  line-height: 1.7;
}
.psc-sidebar-foot strong { color: var(--psc-gold); font-weight: 700; }

/* ---------- Dashboard greeting band ---------- */
.psc-dash-band {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 30px 32px;
  background: linear-gradient(100deg, var(--psc-purple-deep) 0%, var(--psc-purple) 62%, #43357F 100%);
}
.psc-dash-band-ring {
  position: absolute;
  right: 4%;
  top: -120%;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  border: 1px solid rgba(200, 163, 72, 0.18);
  pointer-events: none;
}
.psc-dash-band-kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--psc-gold);
}
.psc-dash-band-title {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  margin: 12px 0 0;
}
.psc-dash-band-sub {
  margin: 10px 0 0;
  max-width: 560px;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}
.psc-dash-band-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.psc-dash-band-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  margin: 0;
}
.psc-dash-band-meta > div { min-width: 96px; }
.psc-dash-band-meta dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.psc-dash-band-meta dd {
  margin: 5px 0 0;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 19px;
  color: var(--psc-gold);
  line-height: 1;
}

/* Shortcuts into the work that usually follows opening the dashboard. */
.psc-dash-band-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.psc-dash-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.07);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .4s var(--psc-ease), border-color .4s var(--psc-ease), transform .4s var(--psc-ease);
}
.psc-dash-action svg { width: 15px; height: 15px; color: var(--psc-gold); }
.psc-dash-action:hover {
  background: rgba(200, 163, 72, 0.2);
  border-color: rgba(200, 163, 72, 0.55);
  color: #FFFFFF;
  transform: translateY(-2px);
}
.psc-dash-action:focus-visible { outline: 2px solid var(--psc-gold); outline-offset: 2px; }
.psc-dash-action-badge {
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  border-radius: 99px;
  background: #DC2626;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Total visitors panel ---------- */
.psc-vis { padding: 0; overflow: hidden; }
.psc-vis-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--psc-line);
}
.dark .psc-vis-head { border-bottom-color: rgba(255, 255, 255, 0.09); }
.psc-vis-head-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 163, 74, 0.12);
  color: #16A34A;
}
.psc-vis-head-icon svg { width: 20px; height: 20px; }
.psc-vis-head-text { flex: 1; min-width: 0; }
.psc-vis-head-text h3 {
  margin: 0;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--psc-ink);
}
.dark .psc-vis-head-text h3 { color: #F4F2FA; }
.psc-vis-head-text p { margin: 3px 0 0; font-size: 12.5px; color: var(--psc-muted); }

.psc-vis-period {
  flex: none;
  border: 1px solid var(--psc-line);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--psc-ink);
  background: #FFFFFF;
  cursor: pointer;
}
.dark .psc-vis-period {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: #F4F2FA;
}
.psc-vis-period:focus-visible { outline: 2px solid var(--psc-gold); outline-offset: 1px; }

.psc-vis-body { padding: 22px; }

.psc-vis-gauge { position: relative; max-width: 300px; margin: 0 auto 6px; }
.psc-vis-gauge svg { display: block; width: 100%; height: auto; overflow: visible; }
.psc-vis-track { stroke: #EFEDF6; }
.dark .psc-vis-track { stroke: rgba(255, 255, 255, 0.1); }
.psc-vis-gauge-centre {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  text-align: center;
}
.psc-vis-gauge-percent {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--psc-ink);
}
.dark .psc-vis-gauge-percent { color: #FFFFFF; }
.psc-vis-gauge-total { margin-top: 6px; font-size: 12.5px; color: var(--psc-muted); }
.psc-vis-gauge-sub { margin-top: 2px; font-size: 11.5px; color: #9490A9; }

.psc-vis-list { list-style: none; margin: 18px 0 0; padding: 0; }
.psc-vis-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  border-top: 1px solid var(--psc-line);
  font-size: 14px;
}
.dark .psc-vis-list li { border-top-color: rgba(255, 255, 255, 0.08); }
.psc-vis-list li:first-child { border-top: 0; }
.psc-vis-swatch { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.psc-vis-label { flex: 1; min-width: 0; color: var(--psc-ink); }
.dark .psc-vis-label { color: #F4F2FA; }
.psc-vis-count {
  font-variant-numeric: tabular-nums;
  color: var(--psc-muted);
}
.psc-vis-percent {
  width: 46px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--psc-ink);
}
.dark .psc-vis-percent { color: #F4F2FA; }

.psc-vis-empty { text-align: center; padding: 30px 20px 34px; }
.psc-vis-empty svg { width: 26px; height: 26px; color: var(--psc-purple-mid); }
.psc-vis-empty-title {
  margin-top: 12px;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--psc-ink);
}
.dark .psc-vis-empty-title { color: #F4F2FA; }
.psc-vis-empty p {
  margin: 8px auto 0;
  max-width: 420px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--psc-muted);
}

/* ---------- Server performance panel ---------- */
.psc-perf { padding: 0; overflow: hidden; }
.psc-perf-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--psc-line);
}
.dark .psc-perf-head { border-bottom-color: rgba(255, 255, 255, 0.09); }
.psc-perf-head-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(91, 74, 166, 0.12);
  color: var(--psc-purple-mid);
}
.psc-perf-head-icon svg { width: 20px; height: 20px; }
.psc-perf-head-text { flex: 1; min-width: 0; }
.psc-perf-head-text h3 {
  margin: 0;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--psc-ink);
}
.dark .psc-perf-head-text h3 { color: #F4F2FA; }
.psc-perf-head-text p { margin: 3px 0 0; font-size: 12.5px; color: var(--psc-muted); }

.psc-perf-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(22, 163, 74, 0.12);
  color: #15803D;
}
.psc-perf-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.psc-perf-badge-warn { background: rgba(200, 163, 72, 0.16); color: #96701F; }
.dark .psc-perf-badge { color: #4ADE80; }
.dark .psc-perf-badge-warn { color: var(--psc-gold); }

.psc-perf-body { padding: 20px 22px 22px; }
.psc-perf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 14px;
}
.psc-perf-metric {
  border: 1px solid var(--psc-line);
  border-radius: 14px;
  padding: 14px 16px 15px;
}
.dark .psc-perf-metric { border-color: rgba(255, 255, 255, 0.09); }
.psc-perf-metric-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.psc-perf-metric-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--psc-muted);
}
.psc-perf-metric-value {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 19px;
  color: var(--psc-ink);
  letter-spacing: -0.01em;
}
.dark .psc-perf-metric-value { color: #FFFFFF; }
.psc-perf-value-ok { color: #15803D; }
.psc-perf-value-bad { color: #B91C1C; }
.dark .psc-perf-value-ok { color: #4ADE80; }
.dark .psc-perf-value-bad { color: #FCA5A5; }

.psc-perf-bar {
  margin-top: 11px;
  height: 5px;
  border-radius: 99px;
  background: #EFEDF6;
  overflow: hidden;
}
.dark .psc-perf-bar { background: rgba(255, 255, 255, 0.1); }
.psc-perf-bar-fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  transition: width .6s var(--psc-ease);
}
.psc-perf-bar-ok { background: #16A34A; }
.psc-perf-bar-warn { background: var(--psc-gold); }
.psc-perf-bar-critical { background: #DC2626; }

.psc-perf-metric-detail {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--psc-muted);
  line-height: 1.5;
}
.psc-perf-dot-line { display: flex; align-items: center; gap: 7px; }
.psc-perf-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16A34A;
  flex: none;
}
.psc-perf-dot-bad { background: #DC2626; }

.psc-perf-errors-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 0 10px;
}
.psc-perf-clear,
.psc-perf-note,
.psc-perf-error {
  border-radius: 12px;
  padding: 13px 15px;
  font-size: 13px;
  line-height: 1.55;
}
.psc-perf-clear {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(22, 163, 74, 0.08);
  color: #15803D;
}
.psc-perf-clear svg { width: 17px; height: 17px; flex: none; }
.dark .psc-perf-clear { color: #4ADE80; }
.psc-perf-note { background: #F4F3F9; color: var(--psc-muted); }
.dark .psc-perf-note { background: rgba(255, 255, 255, 0.05); }
.psc-perf-error { background: rgba(220, 38, 38, 0.07); }
.psc-perf-error-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}
.psc-perf-error-level {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #B91C1C;
}
.psc-perf-error-ago { font-size: 11.5px; color: var(--psc-muted); }
.psc-perf-error p {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--psc-ink);
  word-break: break-word;
}
.dark .psc-perf-error p { color: #F4F2FA; }

@media (prefers-reduced-motion: reduce) {
  .fi-wi-stats-overview-stat,
  .fi-sidebar-item-btn,
  .fi-ta-row,
  .fi-sidebar .fi-sidebar-group-collapse-btn,
  .fi-sidebar.fi-sidebar-open .fi-sidebar-group-items,
  .psc-perf-bar-fill,
  .psc-dash-action { transition: none; }
  .fi-wi-stats-overview-stat:hover,
  .psc-dash-action:hover { transform: none; }
  .fi-wi-widget { animation: none; }
}

/* ===================================================================================
   Depth pass
   -----------------------------------------------------------------------------------
   The panel was correct but flat: a square sidebar welded to the edge, cards marked out
   by hairline rings, and a canvas close enough to white that nothing sat on top of
   anything. This section gives the layout a z-axis — the sidebar floats, the topbar gets
   out of the way, and cards are defined by shadow rather than by outline.

   It is appended rather than folded into the rules above so the two concerns stay
   separable: everything before this point is colour, type and the sidebar accordion;
   everything here is elevation.
   =================================================================================== */

:root {
    /* A touch more pigment than before. White cards need something to lift off. */
    --psc-canvas: #F1EFF8;

    --psc-shadow-card:
        0 1px 2px rgba(36, 28, 74, 0.04),
        0 14px 30px -14px rgba(36, 28, 74, 0.16);
    --psc-shadow-card-hover:
        0 1px 2px rgba(36, 28, 74, 0.05),
        0 22px 44px -18px rgba(36, 28, 74, 0.26);
    --psc-radius-card: 20px;
}

.fi-body {
    /*
     * The canvas, held in two custom properties rather than written inline, because the
     * sticky topbar has to reproduce it exactly. See .fi-body .fi-topbar.
     */
    --psc-bar: var(--psc-canvas);
    /* Barely-there warmth in the top corner, so a full screen of cards is not uniform grey. */
    --psc-glow: radial-gradient(90% 60% at 100% 0%, rgba(200, 163, 72, 0.07), transparent 62%);
    background-color: var(--psc-canvas);
    background-image: var(--psc-glow);
    background-attachment: fixed;
}

.dark .fi-body {
    --psc-bar: #15112A;
    --psc-glow: radial-gradient(90% 60% at 100% 0%, rgba(140, 123, 216, 0.1), transparent 62%);
    background-color: #15112A;
    background-image: var(--psc-glow);
}

/* ---------------------------------------------------------------- the floating sidebar */

/*
 * Filament pins the sidebar to the viewport edges. Pulling it in on all four sides and
 * rounding it turns it from a wall into a panel, which is the single biggest change here.
 * Desktop only: on small screens it slides in as a full-height overlay, where an inset
 * rail would read as a mistake.
 */
@media (min-width: 1024px) {
    .fi-body .fi-sidebar {
        /* Margin, not inset. The desktop sidebar is `position: sticky`, where top/left set
           the threshold at which it sticks rather than where it sits — setting them rounded
           the corners but moved nothing. As a flex item its margin also pushes the content
           across, so the gap costs no other adjustment. */
        margin: 14px;
        /* Below the topbar, not under it. At 14px the rail stuck to the top of the
           viewport, so scrolling slid it beneath the bar and the crest came to rest on
           its rounded shoulder. 4rem + 14px is exactly where the rail already starts, so
           now it simply stays put. */
        top: calc(4rem + 14px);
        /* 4rem for the topbar the rail starts beneath, 28px for its own margins. Sized to
           the viewport alone it began at y=78 and ran ~80px off the bottom of the window. */
        height: calc(100dvh - 4rem - 28px);
        /* The layout is a flex row, which would otherwise stretch the rail to the height of
           the whole scrolling page. */
        align-self: flex-start;
        border-radius: 24px;
        overflow: hidden;
        box-shadow:
            0 2px 6px rgba(36, 28, 74, 0.18),
            0 24px 56px -22px rgba(36, 28, 74, 0.55);
    }
}

/* ---------------------------------------------------------------- topbar */

/*
 * Dropping the bar's own surface lets the page start at the top of the window instead of
 * under a white band. The search field and avatar keep their own shapes, so nothing is lost
 * by taking the slab away.
 */
.fi-body .fi-topbar {
    /*
     * The bar is sticky, and transparent it let the crest, the bell and the avatar sit
     * directly on whatever scrolled underneath them.
     *
     * So it carries the canvas instead — not an approximation of it, but the same colour
     * and the same gradient, and the gradient is attached to the viewport on both, so the
     * two line up to the pixel. While the page is at the top the bar cannot be found; once
     * anything scrolls beneath it, it is simply opaque.
     *
     * A translucent wash and a blur were tried first. They read well, but diluting the
     * gradient left a seam along the bar's edge that was measurable at the right-hand
     * corner where the glow is strongest.
     */
    background-color: var(--psc-bar, transparent);
    background-image: var(--psc-glow, none);
    background-attachment: fixed;
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}

.fi-body .fi-topbar > * {
    /* Sits level with the page heading below it rather than crowding the top edge. */
    padding-block: 6px;
}

/* ---------------------------------------------------------------- cards */

.fi-body .fi-section-content-ctn,
.fi-body .fi-wi-stats-overview-stat,
.fi-body .fi-wi-chart,
.fi-body .fi-ta-ctn,
.fi-body .fi-fo-component-ctn > .fi-section {
    border-radius: var(--psc-radius-card);
    box-shadow: var(--psc-shadow-card);
    /* Filament outlines cards with a 1px ring. Shadow already separates them; the ring on
       top of it reads as a border drawn twice. */
    --tw-ring-shadow: 0 0 #0000;
}

.dark .fi-body .fi-section-content-ctn,
.dark .fi-body .fi-wi-stats-overview-stat,
.dark .fi-body .fi-wi-chart,
.dark .fi-body .fi-ta-ctn {
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.7);
}

/* ---------------------------------------------------------------- stat cards */

.fi-body .fi-wi-stats-overview-stat {
    position: relative;
    overflow: hidden;
    padding: 22px 24px;
    background-image: linear-gradient(135deg, rgba(91, 74, 166, 0.055) 0%, transparent 46%);
    transition: transform .22s var(--psc-ease), box-shadow .22s var(--psc-ease);
}

/* A thin gold edge along the top, revealed on hover — the panel's accent used sparingly. */
.fi-body .fi-wi-stats-overview-stat::after {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--psc-gold), rgba(200, 163, 72, 0));
    opacity: 0;
    transition: opacity .22s var(--psc-ease);
}

.fi-body .fi-wi-stats-overview-stat:hover {
    transform: translateY(-3px);
    box-shadow: var(--psc-shadow-card-hover);
}

.fi-body .fi-wi-stats-overview-stat:hover::after {
    opacity: 1;
}

/* The small icon beside a stat label, given a tinted chip to sit in. */
.fi-body .fi-wi-stats-overview-stat-label-ctn .fi-icon {
    padding: 7px;
    border-radius: 11px;
    background: rgba(91, 74, 166, 0.1);
    color: var(--psc-purple-mid);
}

.dark .fi-body .fi-wi-stats-overview-stat {
    background-image: linear-gradient(135deg, rgba(140, 123, 216, 0.09) 0%, transparent 46%);
}

@media (prefers-reduced-motion: reduce) {
    .fi-body .fi-wi-stats-overview-stat {
        transition: none;
    }

    .fi-body .fi-wi-stats-overview-stat:hover {
        transform: none;
    }
}

/* ---------------------------------------------------------------- breathing room */

@media (min-width: 1024px) {
    .fi-body .fi-main {
        padding-inline: clamp(20px, 2.2vw, 36px);
    }

    .fi-body .fi-page {
        padding-block-end: 36px;
    }
}

/* ---------------------------------------------------------------- primary actions */

/*
 * Filament paints primary buttons with its 400 shade. On this purple that lands as a pale
 * lavender which reads as disabled — the same thing that had to be fixed on the sign-in
 * screen, and the panel should not contradict it.
 */
.fi-body .fi-btn.fi-color-primary:not(.fi-btn-outlined):not(.fi-link) {
    background: linear-gradient(135deg, var(--psc-purple) 0%, var(--psc-purple-mid) 100%);
    color: #FFFFFF;
    box-shadow: 0 8px 18px -8px rgba(54, 43, 104, 0.55);
    transition: filter .18s var(--psc-ease), box-shadow .18s var(--psc-ease);
}

.fi-body .fi-btn.fi-color-primary:not(.fi-btn-outlined):not(.fi-link):hover {
    filter: brightness(1.1);
    box-shadow: 0 12px 24px -10px rgba(54, 43, 104, 0.65);
}

.fi-body .fi-btn.fi-color-primary .fi-icon {
    color: currentColor;
}

/* ---------------------------------------------------------------- the collapsed rail */

/*
 * Collapsed, the rail kept its full width — 227px of purple holding five icons — because
 * Filament declares --collapsed-sidebar-width in the layout and nothing in the prebuilt
 * app.css consumes it. That rule belongs to the Tailwind layer a compiled theme would
 * generate, and this image has no npm step by design.
 *
 * An earlier attempt at this hid the submenus. Worth writing down why, because the markup
 * does not read the way it looks: collapsed, Filament hides the whole group header
 * (x-show="$store.sidebar.isOpen") and renders a .fi-dropdown in its place — a trigger
 * button, and a panel that Floating UI places beside the rail. The five icons are that
 * trigger, not the group header, and the way in is the dropdown. The first attempt styled
 * .fi-sidebar-group-items, which is a different element entirely, and left the real panel
 * transparent over the page.
 */
@media (min-width: 1024px) {
    .fi-panel-admin .fi-sidebar:not(.fi-sidebar-open) {
        width: 74px;
        /* The panel is positioned, not floated out of the DOM, so an ancestor that clips
           its own rounded corners clips the panel too — which is what made it a sliver. */
        overflow: visible;
    }

    .fi-panel-admin .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
        overflow: visible;
        padding-inline: 0;
        gap: 8px;
    }

    /* A square target with the icon centred, for items and group triggers alike. */
    .fi-panel-admin .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn,
    .fi-panel-admin .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-dropdown-trigger-btn {
        width: 46px;
        height: 46px;
        padding: 0;
        margin-inline: auto;
        justify-content: center;
        border-radius: 14px;
    }

    .fi-panel-admin .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-dropdown-trigger-btn:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .fi-panel-admin .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-dropdown-trigger-btn .fi-icon {
        color: rgba(255, 255, 255, 0.72);
    }

    /* The sign-off is three words of small capitals; in a 74px column it broke into six
       lines. The crest in the topbar says the same thing. */
    .fi-panel-admin .fi-sidebar:not(.fi-sidebar-open) .psc-sidebar-foot {
        display: none;
    }
}

/*
 * The submenu panel, dressed like the rail it comes out of rather than left as Filament's
 * light default. Scoped inside .fi-sidebar: the same class is the user menu in the topbar,
 * which sits on a pale page and should stay pale.
 */
.fi-panel-admin .fi-sidebar .fi-dropdown-panel {
    min-width: 224px;
    padding: 8px;
    border-radius: 18px;
    background: linear-gradient(180deg, #3B2F72 0%, var(--psc-purple-deep) 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.09),
        0 26px 50px -22px rgba(13, 9, 32, 0.85);
}

/*
 * The group's name above its items. Same trap as the labels: the text is in an unclassed
 * <span> that Filament colours itself, so setting the colour on .fi-dropdown-header alone
 * left "CONTENT" in near-black on dark purple.
 *
 * A lighter gold than the rail's --psc-gold, too. At 11px, uppercase and letter-spaced,
 * #C8A348 clears only about 4.5:1 here; this clears 6.3:1.
 */
.fi-panel-admin .fi-sidebar .fi-dropdown-header,
.fi-panel-admin .fi-sidebar .fi-dropdown-header span {
    padding: 0;
    color: #E2C06E;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.fi-panel-admin .fi-sidebar .fi-dropdown-header {
    padding: 6px 12px 8px;
}

.fi-panel-admin .fi-sidebar .fi-dropdown-list {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fi-panel-admin .fi-sidebar .fi-dropdown-list-item {
    gap: 10px;
    padding: 8px 12px;
    border-radius: 11px;
    font-size: 13.5px;
    font-weight: 500;
}

/*
 * The label, not the link around it. Filament colours .fi-dropdown-list-item-label on its
 * own — a near-black meant for a white panel — and a colour set on the anchor is inherited
 * by nothing, so every item was dark grey on dark purple and could not be read.
 */
.fi-panel-admin .fi-sidebar .fi-dropdown-list-item-label {
    color: rgba(255, 255, 255, 0.86);
}

.fi-panel-admin .fi-sidebar .fi-dropdown-list-item:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

.fi-panel-admin .fi-sidebar .fi-dropdown-list-item:hover .fi-dropdown-list-item-label {
    color: #FFFFFF;
}

.fi-panel-admin .fi-sidebar .fi-dropdown-list-item .fi-icon {
    color: rgba(255, 255, 255, 0.55);
}

.fi-panel-admin .fi-sidebar .fi-dropdown-list-item:hover .fi-icon {
    color: var(--psc-gold);
}

/* ---------------------------------------------------------------- the rail's own toggle */

/* Filament's expand control lives in the topbar; on this panel the rail carries it, so the
   topbar pair goes. Only the desktop pair — on a phone the rail is an off-screen overlay
   and the topbar button is the only way in. */
.fi-panel-admin .fi-topbar-collapse-sidebar-btn-ctn {
    display: none;
}

.psc-admin-rail-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 46px;
    min-height: 38px;
    margin: 0 auto 10px;
    padding: 0;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    justify-content: center;
    transition: background-color .18s var(--psc-ease), color .18s var(--psc-ease);
}

.psc-admin-rail-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
}

.psc-admin-rail-toggle:focus-visible {
    outline: 2px solid var(--psc-gold);
    outline-offset: 2px;
}

/* Open, it becomes a labelled row like the items below it. */
.fi-sidebar.fi-sidebar-open .psc-admin-rail-toggle {
    width: auto;
    margin-inline: 4px;
    padding: 0 12px;
    justify-content: flex-start;
}

/* ---------------------------------------------------------------- the masthead name */

/*
 * Set in Jost rather than the panel's Manrope: a name beside a crest wants to be thinner
 * than the interface it labels, and the staff panel's wordmark is the same face, which
 * ties the two mastheads together without the panels otherwise resembling each other.
 */
.fi-panel-admin .psc-admin-wordmark {
    margin-inline-start: 12px;
    font-family: "Jost", "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: 21px;
    font-weight: 300;
    letter-spacing: 0.045em;
    white-space: nowrap;
    color: var(--psc-ink);
}

.dark .fi-panel-admin .psc-admin-wordmark {
    color: rgba(255, 255, 255, 0.92);
}

/* Below the rail's own breakpoint it is an overlay rather than a column of labels, so the
   name stays off and the crest carries the topbar alone. */
@media (max-width: 1023px) {
    .fi-panel-admin .psc-admin-wordmark {
        display: none !important;
    }
}

/* The label sat in a flex row that was one pixel short of it, so "Collapse" clipped. */
.psc-admin-rail-toggle-label {
    flex: none;
    white-space: nowrap;
}