/**
 * Filament panel skin — theme-agnostic structural overrides.
 * Tokens come from public/css/themes/*.css (loaded first).
 * Applies to admin + super-admin panels.
 */
/* Reusable utility classes – radius & gap (use in panel or with :is(.fi-panel-dashboard, .fi-panel-super-admin)) */
:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-radius { border-radius: var(--ord-radius); }
:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-radius-sm { border-radius: var(--ord-radius-sm); }
:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-gap { gap: var(--ord-gap); }
:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-gap-md { gap: var(--ord-gap-md); }
:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-gap-lg { gap: var(--ord-gap-lg); }

/* Reusable tint utility classes – light background tint matching chart/semantic color */
:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-bg-tint-primary { background-color: rgba(var(--ord-color-primary), var(--ord-tint-opacity)) !important; }
:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-bg-tint-success { background-color: rgba(var(--ord-color-success), var(--ord-tint-opacity)) !important; }
:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-bg-tint-danger { background-color: rgba(var(--ord-color-danger), var(--ord-tint-opacity)) !important; }
:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-bg-tint-info { background-color: rgba(var(--ord-color-info), var(--ord-tint-opacity)) !important; }
:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-bg-tint-gray { background-color: rgba(var(--ord-color-gray), 0.08) !important; }
.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-bg-tint-primary { background-color: rgba(var(--ord-color-primary), var(--ord-tint-opacity-dark)) !important; }
.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-bg-tint-success { background-color: rgba(var(--ord-color-success), var(--ord-tint-opacity-dark)) !important; }
.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-bg-tint-danger { background-color: rgba(var(--ord-color-danger), var(--ord-tint-opacity-dark)) !important; }
.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-bg-tint-info { background-color: rgba(var(--ord-color-info), var(--ord-tint-opacity-dark)) !important; }
.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-bg-tint-gray { background-color: rgba(0, 0, 0, 0.3) !important; }

/* Vibrant/solid buttons: black text for readability */
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-btn-primary,
.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-btn-primary,
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-btn-success,
.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-btn-success,
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-btn-danger,
.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-btn-danger,
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-btn-warning,
.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-btn-warning {
  color: var(--ord-btn-on-solid) !important;
}

/* Password reveal (and other Filament icon actions): not solid CTAs */
:is(.fi-panel-dashboard, .fi-panel-super-admin) button.fi-icon-btn,
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-icon-btn {
  padding: 0 !important;
  margin: 0 !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  color: var(--ord-text-muted) !important;
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) button.fi-icon-btn:hover,
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-icon-btn:hover {
  background: transparent !important;
  color: var(--ord-primary) !important;
  box-shadow: none !important;
  filter: none !important;
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-icon-btn .fi-icon-btn-icon,
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-icon-btn svg {
  width: 1.5rem !important;
  height: 1.5rem !important;
  max-width: none !important;
  flex-shrink: 0 !important;
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-input-wrp-suffix:has(.fi-icon-btn) {
  padding-inline: 0.35rem !important;
  gap: 0 !important;
  border-inline-start-width: 0 !important;
}

:is(.fi-panel-dashboard, .fi-panel-super-admin).fi-body {
  font-family: var(--ord-font-mono, "JetBrains Mono", "IBM Plex Mono", "Fira Code", "Consolas", "Monaco", monospace) !important;
  font-size: var(--ord-font-size-base, 0.875rem) !important;
}

.dark:is(.fi-panel-dashboard, .fi-panel-super-admin).fi-body,
.dark :is(.fi-panel-dashboard, .fi-panel-super-admin).fi-body {
  background-color: var(--ord-bg) !important;
  color: var(--ord-text) !important;
}

.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-sidebar,
.dark:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-sidebar {
  background-color: var(--ord-bg) !important;
  border-color: var(--ord-border, rgba(232, 255, 236, 0.15)) !important;
}

.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-main,
.dark:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-main {
  background-color: var(--ord-bg) !important;
}

.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-sidebar-header,
.dark:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-sidebar .fi-sidebar-header {
  background-color: var(--ord-bg) !important;
  border-color: var(--ord-border, rgba(232, 255, 236, 0.15)) !important;
}

/* Don’t apply to stat cards – they use .ord-bg-tint-* for chart-colored backgrounds.
   Also skip form controls: Filament checkboxes use .fi-checkbox-input.bg-white and were
   getting stretched panel chrome (wide box / muted fill) from this rule.
   CRITICAL: skip .fi-dropdown-panel — it also has Tailwind bg-white / dark:bg-gray-900,
   and this glass fill (rgba 0.2) made the user menu see-through over page content. */
.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-ta-header-ctn,
.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-section,
.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) [class^="fi-"].bg-white:not([class*="ord-bg-tint-"]):not(input):not(button):not(.fi-checkbox-input):not(.fi-radio-input):not(.fi-dropdown-panel) {
  background-color: rgba(0, 0, 0, 0.2) !important;
  border-color: var(--ord-border, rgba(232, 255, 236, 0.15)) !important;
}

.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-sidebar-item a,
.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-sidebar .fi-sidebar-item {
  color: var(--ord-text-muted) !important;
}

.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-sidebar-item.fi-active a,
.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-sidebar .fi-sidebar-item.fi-active {
  color: var(--ord-primary) !important;
}

/* Sidebar active item: flush left to edge, rounded right only, diagonal texture on right */
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-sidebar-item.fi-active > a,
.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-sidebar-item.fi-active > a {
  margin-left: -0.75rem;
  padding-left: 0.75rem;
  border-radius: 0 var(--ord-radius) var(--ord-radius) 0 !important;
  background-color: rgba(var(--ord-color-primary), 0.08) !important;
  background-image: repeating-linear-gradient(
    -55deg,
    transparent,
    transparent 4px,
    rgba(var(--ord-color-primary), 0.04) 4px,
    rgba(var(--ord-color-primary), 0.04) 8px
  ) !important;
  background-size: 200% 100%;
  background-position: 100% 0;
  border-left: none !important;
  box-shadow: inset -6px 0 12px -8px rgba(var(--ord-color-primary), 0.2);
}
.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-sidebar-item.fi-active > a {
  background-color: rgba(var(--ord-color-primary), 0.06) !important;
  background-image: repeating-linear-gradient(
    -55deg,
    transparent,
    transparent 4px,
    rgba(var(--ord-color-primary), 0.06) 4px,
    rgba(var(--ord-color-primary), 0.06) 8px
  ) !important;
  box-shadow: inset -6px 0 12px -8px rgba(var(--ord-color-primary), 0.25);
}

.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) a:not(.fi-btn) {
  color: var(--ord-primary) !important;
}

.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-sidebar-help a {
  color: var(--ord-primary) !important;
}

/* ---------------------------------------------------------------------------
   Topbar / user-menu stacking
   Alpine x-float "teleport" only sets position:fixed — the panel stays inside
   .fi-topbar. Filament's overflow-x-clip on the topbar (and .fi-layout) makes
   that fixed panel paint UNDER main content (filamentphp/filament#8215).
   z-index alone cannot beat that; overflow must be visible.
   --------------------------------------------------------------------------- */
.fi-body.fi-panel-dashboard .fi-topbar,
.fi-body.fi-panel-super-admin .fi-topbar {
  z-index: 200 !important;
  overflow: visible !important;
}

.fi-body.fi-panel-dashboard .fi-layout,
.fi-body.fi-panel-super-admin .fi-layout {
  overflow-x: visible !important;
}

/* ---------------------------------------------------------------------------
   Dropdowns & overlays – fully opaque panel (no transparency), glitchy shadow
   Target both in-panel and teleported dropdowns (body:is(.fi-panel-dashboard, .fi-panel-super-admin) when panel is admin).
   --------------------------------------------------------------------------- */
.fi-body.fi-panel-dashboard .fi-dropdown-panel,
.fi-body.fi-panel-super-admin .fi-dropdown-panel,
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-dropdown-panel,
body:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-dropdown-panel,
.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-dropdown-panel.bg-white,
.dark body:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-dropdown-panel.bg-white,
body > .fi-dropdown-panel {
  /* Solid hex only — beat the glass rule that targets fi-*.bg-white */
  background: #141824 !important;
  background-color: #141824 !important;
  background-image: none !important;
  border: 1px solid var(--ord-border, rgba(232, 255, 236, 0.15)) !important;
  border-radius: var(--ord-radius) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  /* Class still says z-10; force above page chrome */
  z-index: 9999 !important;
  /* Glitchy neon shadow */
  box-shadow:
    0 0 0 1px rgba(232, 255, 236, 0.08),
    2px 0 14px -4px rgba(var(--ord-color-primary), 0.22),
    -2px 0 14px -4px rgba(var(--ord-color-primary), 0.18),
    0 12px 28px -8px rgba(0, 0, 0, 0.55) !important;
}

/* Tooltips / Tippy – solid float above tables (appendTo body; still needs high z + opaque fill) */
body:is(.fi-panel-dashboard, .fi-panel-super-admin) [data-tippy-root],
:is(.fi-panel-dashboard, .fi-panel-super-admin) [data-tippy-root] {
  z-index: 10050 !important;
}

body:is(.fi-panel-dashboard, .fi-panel-super-admin) .tippy-box,
:is(.fi-panel-dashboard, .fi-panel-super-admin) .tippy-box {
  background-color: var(--ord-bg-elevated) !important;
  background-image: none !important;
  color: var(--ord-text) !important;
  border: 1px solid rgba(232, 255, 236, 0.22) !important;
  border-radius: var(--ord-radius, 2px) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 10px 28px -6px rgba(0, 0, 0, 0.65) !important;
}

body:is(.fi-panel-dashboard, .fi-panel-super-admin) .tippy-box .tippy-content,
:is(.fi-panel-dashboard, .fi-panel-super-admin) .tippy-box .tippy-content {
  opacity: 1 !important;
  color: var(--ord-text) !important;
}

body:is(.fi-panel-dashboard, .fi-panel-super-admin) .tippy-box .tippy-arrow,
:is(.fi-panel-dashboard, .fi-panel-super-admin) .tippy-box .tippy-arrow {
  color: var(--ord-btn-on-solid) !important;
}

body:is(.fi-panel-dashboard, .fi-panel-super-admin) .tippy-box[data-theme~='light'],
:is(.fi-panel-dashboard, .fi-panel-super-admin) .tippy-box[data-theme~='light'] {
  background-color: var(--ord-bg-elevated) !important;
  color: var(--ord-text) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 10px 28px -6px rgba(0, 0, 0, 0.65) !important;
}

/* Modals / slide-overs / select popovers above table chrome */
body:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-modal-close-overlay,
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-modal-close-overlay {
  z-index: 40 !important;
  background-color: rgba(0, 0, 0, 0.72) !important;
}

body:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-modal-window,
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-modal-window,
body:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-modal,
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-modal {
  z-index: 50 !important;
}

body:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-fo-select-panel,
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-fo-select-panel {
  background: var(--ord-bg-elevated) !important;
  opacity: 1 !important;
  z-index: 80 !important;
}
.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-dropdown-panel,
.dark body:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-dropdown-panel {
  background: #141824 !important;
  background-color: #141824 !important;
  background-image: none !important;
  box-shadow:
    0 0 0 1px rgba(232, 255, 236, 0.1),
    3px 0 16px -4px rgba(var(--ord-color-primary), 0.28),
    -2px 0 16px -4px rgba(var(--ord-color-primary), 0.22),
    0 14px 32px -10px rgba(0, 0, 0, 0.6) !important;
}
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-dropdown-panel .divide-gray-100,
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-dropdown-panel [class*="divide-"],
body:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-dropdown-panel .divide-gray-100,
body:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-dropdown-panel [class*="divide-"] {
  border-color: var(--ord-border, rgba(232, 255, 236, 0.15)) !important;
}
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-dropdown-list-item,
body:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-dropdown-list-item {
  color: var(--ord-text-muted) !important;
}
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-dropdown-list-item:hover,
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-dropdown-list-item:focus-visible,
body:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-dropdown-list-item:hover,
body:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-dropdown-list-item:focus-visible {
  background-color: rgba(var(--ord-color-primary), 0.08) !important;
  color: var(--ord-text) !important;
}
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-dropdown-header,
body:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-dropdown-header {
  color: var(--ord-text-muted) !important;
  border-color: var(--ord-border, rgba(232, 255, 236, 0.15)) !important;
}
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-dropdown-panel,
.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-dropdown-panel,
body:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-dropdown-panel,
.dark body:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-dropdown-panel {
  color: var(--ord-text) !important;
}
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-dropdown-panel a,
body:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-dropdown-panel a {
  color: var(--ord-primary) !important;
}
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-dropdown-panel a:hover,
body:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-dropdown-panel a:hover {
  color: var(--ord-text) !important;
}

/* Sidebar close overlay (mobile): opaque + subtle glitch tint */
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-sidebar-close-overlay {
  background-color: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: saturate(1.2) contrast(1.05);
  -webkit-backdrop-filter: saturate(1.2) contrast(1.05);
}
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-sidebar-close-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(var(--ord-color-primary), 0.03) 0%,
    transparent 50%,
    rgba(var(--ord-color-primary), 0.03) 100%
  );
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Content area footer: light diagonal texture, border-top, inset shadow */
:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-admin-footer {
  margin-top: auto;
  padding: var(--ord-gap-md) var(--ord-gap-lg);
  border-top: 1px solid var(--ord-border, rgba(232, 255, 236, 0.15));
  border-radius: var(--ord-radius);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 8px,
    rgba(var(--ord-color-primary), 0.03) 8px,
    rgba(var(--ord-color-primary), 0.03) 9px
  );
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.15);
  color: var(--ord-text-muted, rgba(232, 255, 236, 0.6));
  font-size: 0.75rem;
}
:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-admin-footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--ord-gap) var(--ord-gap-md);
}
:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-admin-footer a {
  color: var(--ord-text-muted, rgba(232, 255, 236, 0.6));
}
:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-admin-footer a:hover {
  color: var(--ord-primary);
}
:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-admin-footer-sep {
  color: var(--ord-border, rgba(232, 255, 236, 0.2));
  user-select: none;
}

/* Callouts — solid, high-contrast (how policies / agents work) */
:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-callout {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--ord-radius, 2px);
  border: 1px solid rgba(var(--ord-color-primary), 0.35);
  background: var(--ord-bg-elevated);
  color: var(--ord-text);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-callout__title {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ord-primary);
}
:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-callout__body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: rgba(232, 255, 236, 0.88);
}
:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-callout__emphasis {
  display: inline-block;
  margin-top: 0.35rem;
  font-weight: 600;
  color: var(--ord-primary);
}

/* Dashboard stats overview: mobile single row, clickable cards */
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-wi-stats-overview-stat--clickable {
  cursor: pointer;
}
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-wi-stats-overview-stat--clickable:active {
  opacity: 0.9;
}
/* Stat cards use .ord-bg-tint-* (panel overrides exclude them via :not([class*="ord-bg-tint-"]) above) */
.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-wi-stats-overview-stat {
  border-color: var(--ord-border, rgba(232, 255, 236, 0.15)) !important;
}

/* Plan & usage: compact single-row metrics beside Account widget */
:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-plan-usage-compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-plan-usage-compact__metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.25rem;
  min-width: 0;
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-plan-usage-compact__item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  white-space: nowrap;
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-plan-usage-compact__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ord-text-muted, rgba(232, 255, 236, 0.7));
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-plan-usage-compact__value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ord-text);
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-plan-usage-compact__warn {
  margin-left: 0.25rem;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ord-error);
}

/* Plans & billing hero */
:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-billing-hero {
  overflow: hidden;
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-billing-hero__top {
  margin-bottom: 1.25rem;
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-billing-hero__eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ord-text-muted, rgba(232, 255, 236, 0.65));
  margin-bottom: 0.5rem;
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-billing-hero__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-billing-plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: 0.35rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  border: 1px solid rgba(232, 255, 236, 0.18);
  background: linear-gradient(135deg, rgba(232, 255, 236, 0.1), rgba(232, 255, 236, 0.03));
  color: var(--ord-text);
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-billing-plan-badge--pro {
  border-color: rgba(56, 189, 248, 0.45);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(14, 116, 144, 0.12));
  color: var(--ord-chip-info-bg);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.08), 0 8px 24px rgba(14, 116, 144, 0.15);
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-billing-plan-badge--team {
  border-color: rgba(251, 191, 36, 0.5);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.24), rgba(180, 83, 9, 0.12));
  color: var(--ord-chip-warn-bg);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.1), 0 8px 24px rgba(180, 83, 9, 0.12);
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-billing-plan-badge--free {
  border-color: rgba(232, 255, 236, 0.16);
  background: rgba(232, 255, 236, 0.06);
  color: rgba(232, 255, 236, 0.85);
  font-size: 1.15rem;
  font-weight: 600;
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-billing-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid rgba(232, 255, 236, 0.16);
  color: rgba(232, 255, 236, 0.8);
  background: rgba(232, 255, 236, 0.06);
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-billing-chip--ok {
  border-color: rgba(74, 222, 128, 0.4);
  color: var(--ord-chip-ok-bg);
  background: rgba(22, 163, 74, 0.15);
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-billing-chip--warn {
  border-color: rgba(251, 191, 36, 0.45);
  color: var(--ord-chip-warn-bg);
  background: rgba(180, 83, 9, 0.18);
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-billing-chip--danger {
  border-color: rgba(248, 113, 113, 0.45);
  color: var(--ord-chip-danger-bg);
  background: rgba(185, 28, 28, 0.18);
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-billing-hero__meta {
  margin-top: 0.65rem;
  font-size: 0.875rem;
  color: var(--ord-text-muted, rgba(232, 255, 236, 0.7));
  line-height: 1.45;
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-billing-usage-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(232, 255, 236, 0.1);
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-billing-usage-row__item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-billing-usage-row__label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ord-text-muted, rgba(232, 255, 236, 0.6));
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-billing-usage-row__value {
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--ord-text);
  white-space: nowrap;
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-billing-usage-row__hint {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(232, 255, 236, 0.55);
}

@media (max-width: 640px) {
  :is(.fi-panel-dashboard, .fi-panel-super-admin) .ord-billing-usage-row {
    grid-template-columns: 1fr;
  }
}

/* Stats overview: force ONE row, 4 columns – never stack; use design tokens */
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-wi-stats-overview .fi-wi-stats-overview-stats-ctn {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--ord-gap);
}
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-wi-stats-overview-stat {
  border-radius: var(--ord-radius) !important;
}
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-wi-stats-overview .fi-wi-stats-overview-stats-ctn > * {
  min-width: 0;
}

/* Dashboard/widgets grid: smaller gap on mobile */
@media (max-width: 767px) {
  :is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-wi {
    gap: var(--ord-gap-lg) !important;
  }
}
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-wi-stats-overview-stat-chart canvas {
  height: 1.25rem !important;
}
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-wi-stats-overview-stat-chart {
  min-height: 1.25rem;
  border-radius: 0 0 var(--ord-radius) var(--ord-radius) !important;
}

/* ---------------------------------------------------------------------------
   Checkboxes — fixed-size angular controls (global input { width:100% } broke these)
   --------------------------------------------------------------------------- */
:is(.fi-panel-dashboard, .fi-panel-super-admin) input[type="checkbox"],
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-checkbox-input,
body:is(.fi-panel-dashboard, .fi-panel-super-admin) input[type="checkbox"],
body:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-checkbox-input {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  max-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-height: 1.125rem !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 1.125rem !important;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.4) !important;
  background-image: none !important;
  background-size: 0.72rem 0.72rem !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: 1px solid rgba(232, 255, 236, 0.4) !important;
  border-radius: var(--ord-radius, 2px) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25) !important;
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) input[type="checkbox"]:hover,
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-checkbox-input:hover,
body:is(.fi-panel-dashboard, .fi-panel-super-admin) input[type="checkbox"]:hover,
body:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-checkbox-input:hover {
  border-color: var(--ord-primary) !important;
  background-color: rgba(var(--ord-color-primary), 0.1) !important;
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) input[type="checkbox"]:focus,
:is(.fi-panel-dashboard, .fi-panel-super-admin) input[type="checkbox"]:focus-visible,
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-checkbox-input:focus,
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-checkbox-input:focus-visible,
body:is(.fi-panel-dashboard, .fi-panel-super-admin) input[type="checkbox"]:focus,
body:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-checkbox-input:focus {
  border-color: var(--ord-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(var(--ord-color-primary), 0.3) !important;
}

html.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) input[type="checkbox"]:checked,
html.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-checkbox-input:checked,
html.dark body:is(.fi-panel-dashboard, .fi-panel-super-admin) input[type="checkbox"]:checked,
html.dark body:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-checkbox-input:checked,
:is(.fi-panel-dashboard, .fi-panel-super-admin) input[type="checkbox"]:checked,
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-checkbox-input:checked,
body:is(.fi-panel-dashboard, .fi-panel-super-admin) input[type="checkbox"]:checked,
body:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-checkbox-input:checked {
  background: var(--ord-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230d1117' stroke-width='2.4' stroke-linecap='square' stroke-linejoin='miter' d='M2.5 8.2L6.2 12 13.5 3.8'/%3E%3C/svg%3E") center / 0.72rem 0.72rem no-repeat !important;
  border: 1px solid var(--ord-primary) !important;
  box-shadow: 0 0 10px rgba(var(--ord-color-primary), 0.35) !important;
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-fo-field-wrp:has(.fi-checkbox-input),
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-fo-checkbox,
body:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-fo-field-wrp:has(.fi-checkbox-input) {
  width: fit-content !important;
  max-width: 100%;
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-fo-field-wrp-label:has(.fi-checkbox-input),
body:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-fo-field-wrp-label:has(.fi-checkbox-input) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  width: auto !important;
  white-space: nowrap;
  color: var(--ord-text-muted) !important;
}

/* =============================================================================
   S.M.A.S.H. Co. brand identity — bring the public site's signature devices
   (hazard stripe, display type, gold-topped panels, stamp badges) into the
   logged-in area. Public site reference: public/css/makeway-site.css.
   Scoped the same way as the rest of this file: .fi-panel-dashboard (now the
   player-facing /dashboard panel) + .fi-panel-super-admin.
   ============================================================================= */

/* Hazard stripe — same device as the public site's page-top ribbon, here
   run along the top edge of the sidebar so it reads on every screen. */
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-sidebar-header {
  position: relative;
}
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-sidebar-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: repeating-linear-gradient(
    -45deg,
    var(--ord-primary) 0 10px,
    #14161f 10px 20px
  );
}

/* Page + section titles: the same industrial display face as the public site. */
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-header-heading {
  font-family: var(--mw-font-display, var(--ord-font-sans)) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-section-header-heading,
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-modal-heading {
  font-family: var(--mw-font-display, var(--ord-font-sans)) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
}

/* Cards / sections get the .mw-panel gold-top-rule treatment instead of a
   plain border on every edge. Inset box-shadow rather than border-top: the
   Tailwind ring utility already owns border/ring on .fi-section, and an
   inset shadow layers on top of it without a specificity fight. */
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-section {
  box-shadow: inset 0 2px 0 0 var(--ord-primary) !important;
}

/* Widget titles (stat labels, small section eyebrows) — mono, tracked,
   uppercase, same voice as .mw-eyebrow on the public site. */
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-wi-stats-overview-stat-label {
  font-family: var(--ord-font-mono) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-wi-stats-overview-stat-value {
  font-family: var(--mw-font-display, var(--ord-font-sans)) !important;
  font-weight: 800 !important;
}

/* Primary buttons: bold + tracked, matching .ord-btn on the public site
   instead of Filament's default normal-weight label. */
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-btn {
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

/* Nav group labels — mono/tracked, echoing the public site's mw-eyebrow. */
:is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-sidebar-group-label {
  font-family: var(--ord-font-mono) !important;
  letter-spacing: 0.1em !important;
}

/* Faint blueprint grid on the main content area — same texture as the
   public site body, at low enough opacity to stay out of the way of tables. */
.dark :is(.fi-panel-dashboard, .fi-panel-super-admin) .fi-main {
  background-image:
    linear-gradient(var(--mw-line, rgba(232, 236, 244, 0.06)) 1px, transparent 1px),
    linear-gradient(90deg, var(--mw-line, rgba(232, 236, 244, 0.06)) 1px, transparent 1px) !important;
  background-size: 44px 44px !important;
}

/* =============================================================================
   License card — the dashboard's "Operator License" header widget.
   resources/views/filament/widgets/license-card.blade.php
   ============================================================================= */

.mw-license-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--ord-radius-lg, 8px);
  background:
    linear-gradient(155deg, rgba(242, 180, 29, 0.07) 0%, transparent 45%),
    var(--mw-panel, #10131d);
  border: 1px solid var(--ord-border);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
}

.mw-license-hazard {
  height: 6px;
  background: repeating-linear-gradient(
    -45deg,
    var(--ord-primary) 0 12px,
    #14161f 12px 24px
  );
}

/* Faint diagonal watermark, same device as the public marketplace detail page */
.mw-license-card::after {
  content: "LICENSED";
  position: absolute;
  right: -0.75rem;
  bottom: -1.6rem;
  font-family: var(--mw-font-display, var(--ord-font-sans));
  font-weight: 900;
  font-size: 4.5rem;
  letter-spacing: 0.03em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 180, 29, 0.07);
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

.mw-license-body {
  position: relative;
  z-index: 1;
  padding: 1.4rem 1.6rem 1.2rem;
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
}

/* Photo badge — initials stand-in for an avatar upload system that doesn't exist yet */
.mw-license-photo-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.mw-license-photo {
  width: 92px;
  height: 92px;
  border-radius: 6px;
  border: 2px solid var(--ord-primary);
  background:
    repeating-linear-gradient(-45deg, rgba(242, 180, 29, 0.06) 0 6px, transparent 6px 12px),
    linear-gradient(155deg, rgba(242, 180, 29, 0.18), rgba(242, 180, 29, 0.02));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mw-font-display, var(--ord-font-sans));
  font-weight: 800;
  font-size: 2.1rem;
  color: var(--ord-primary);
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.35);
}

.mw-license-photo-label {
  font-family: var(--ord-font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ord-text-muted);
}

.mw-license-main {
  flex: 1;
  min-width: 240px;
}

.mw-license-topline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.mw-license-eyebrow {
  font-family: var(--ord-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ord-text-muted);
  margin: 0;
}

.mw-license-no {
  color: var(--ord-primary);
  font-weight: 600;
}

.mw-license-stamp {
  font-family: var(--mw-font-display, var(--ord-font-sans));
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ord-success, #7dff5e);
  border: 2px solid currentColor;
  border-radius: 3px;
  padding: 0.18em 0.6em 0.14em;
  transform: rotate(-3deg);
  flex-shrink: 0;
}

.mw-license-stamp--staff {
  color: var(--ord-primary);
}

.mw-license-name {
  font-family: var(--mw-font-display, var(--ord-font-sans));
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.05;
  margin: 0 0 0.3rem;
  color: var(--ord-text);
}

.mw-license-rank {
  font-family: var(--ord-font-mono);
  font-size: 0.8rem;
  color: var(--ord-text-muted);
  margin: 0 0 0.55rem;
}

.mw-license-rank b {
  color: var(--ord-primary);
  font-weight: 700;
}

.mw-license-progress-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  max-width: 26rem;
}

.mw-license-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ord-primary), #ffcf52);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.mw-license-progress-caption {
  font-family: var(--ord-font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  color: var(--ord-text-muted);
  margin: 0.35rem 0 0;
}

/* Perforated divider — ticket-stub device */
.mw-license-perf {
  position: relative;
  height: 1px;
  margin: 0 1.6rem;
  border-top: 1px dashed var(--ord-border);
}
.mw-license-perf::before,
.mw-license-perf::after {
  content: "";
  position: absolute;
  top: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ord-bg, #0b0d14);
  border: 1px solid var(--ord-border);
}
.mw-license-perf::before { left: -1.7rem; }
.mw-license-perf::after { right: -1.7rem; }

.mw-license-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 1rem 1.6rem 0.9rem;
}

.mw-license-stat-label {
  font-family: var(--ord-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ord-text-muted);
  margin: 0 0 0.2rem;
}

.mw-license-stat-value {
  font-family: var(--mw-font-display, var(--ord-font-sans));
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--ord-text);
  margin: 0;
}

.mw-license-stat-value--accent { color: var(--ord-primary); }

.mw-license-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.8rem 1.6rem 1.1rem;
  border-top: 1px solid var(--ord-border);
  margin-top: 0.8rem;
}

.mw-license-footer-text {
  font-family: var(--ord-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ord-text-muted);
  margin: 0;
}

.mw-license-seal {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(125, 255, 94, 0.55);
  color: rgba(125, 255, 94, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ord-font-mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  transform: rotate(-8deg);
  flex-shrink: 0;
  position: relative;
}
.mw-license-seal::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px dashed rgba(125, 255, 94, 0.4);
}

@media (max-width: 640px) {
  .mw-license-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mw-license-perf { display: none; }
}