/**
 * SafeNode design overrides for Filament admin panel.
 * Loaded after Filament styles when panel is admin.
 */
:root {
  --ord-bg: #192127;
  --ord-primary: #AFFC41;
  --ord-text: #E8FFEC;
  --ord-text-muted: rgba(232, 255, 236, 0.7);
  --ord-border: rgba(232, 255, 236, 0.15);
  --ord-font-mono: "JetBrains Mono", "IBM Plex Mono", "Fira Code", "Consolas", "Monaco", monospace;
  --ord-font-size-base: 0.875rem;

  /* Radius & spacing – match safenode.css; halved on mobile */
  --ord-radius: 2px;
  --ord-radius-sm: 2px;
  --ord-space: 0.25rem;
  --ord-gap: 0.5rem;
  --ord-gap-md: 1rem;
  --ord-gap-lg: 1.5rem;

  /* Reusable tint colors – RGB triplets for rgba(..., opacity). Use with .ord-bg-tint-* */
  --ord-color-primary: 175, 252, 65;
  --ord-color-success: 34, 197, 94;
  --ord-color-danger: 239, 68, 68;
  --ord-color-info: 14, 165, 233;
  --ord-color-gray: 148, 163, 184;
  --ord-tint-opacity: 0.1;
  --ord-tint-opacity-dark: 0.08;
}

@media (max-width: 767px) {
  :root {
    --ord-gap: 0.25rem;
    --ord-gap-md: 0.5rem;
    --ord-gap-lg: 0.75rem;
  }
}

/* Reusable utility classes – radius & gap (use in panel or with .fi-panel-admin) */
.fi-panel-admin .ord-radius { border-radius: var(--ord-radius); }
.fi-panel-admin .ord-radius-sm { border-radius: var(--ord-radius-sm); }
.fi-panel-admin .ord-gap { gap: var(--ord-gap); }
.fi-panel-admin .ord-gap-md { gap: var(--ord-gap-md); }
.fi-panel-admin .ord-gap-lg { gap: var(--ord-gap-lg); }

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

/* Vibrant/solid buttons: black text for readability */
.fi-panel-admin .fi-btn-primary,
.dark .fi-panel-admin .fi-btn-primary,
.fi-panel-admin .fi-btn-success,
.dark .fi-panel-admin .fi-btn-success,
.fi-panel-admin .fi-btn-danger,
.dark .fi-panel-admin .fi-btn-danger,
.fi-panel-admin .fi-btn-warning,
.dark .fi-panel-admin .fi-btn-warning {
  color: #0d1117 !important;
}

.fi-panel-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.fi-panel-admin.fi-body,
.dark .fi-panel-admin.fi-body {
  background-color: var(--ord-bg, #192127) !important;
  color: var(--ord-text, #E8FFEC) !important;
}

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

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

.dark .fi-panel-admin .fi-sidebar-header,
.dark.fi-panel-admin .fi-sidebar .fi-sidebar-header {
  background-color: var(--ord-bg, #192127) !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 */
.dark .fi-panel-admin .fi-ta-header-ctn,
.dark .fi-panel-admin .fi-section,
.dark .fi-panel-admin [class^="fi-"].bg-white:not([class*="ord-bg-tint-"]) {
  background-color: rgba(0, 0, 0, 0.2) !important;
  border-color: var(--ord-border, rgba(232, 255, 236, 0.15)) !important;
}

.dark .fi-panel-admin .fi-sidebar-item a,
.dark .fi-panel-admin .fi-sidebar .fi-sidebar-item {
  color: var(--ord-text-muted, rgba(232, 255, 236, 0.7)) !important;
}

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

/* Sidebar active item: flush left to edge, rounded right only, diagonal texture on right */
.fi-panel-admin .fi-sidebar-item.fi-active > a,
.dark .fi-panel-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(175, 252, 65, 0.08) !important;
  background-image: repeating-linear-gradient(
    -55deg,
    transparent,
    transparent 4px,
    rgba(175, 252, 65, 0.04) 4px,
    rgba(175, 252, 65, 0.04) 8px
  ) !important;
  background-size: 200% 100%;
  background-position: 100% 0;
  border-left: none !important;
  box-shadow: inset -6px 0 12px -8px rgba(175, 252, 65, 0.2);
}
.dark .fi-panel-admin .fi-sidebar-item.fi-active > a {
  background-color: rgba(175, 252, 65, 0.06) !important;
  background-image: repeating-linear-gradient(
    -55deg,
    transparent,
    transparent 4px,
    rgba(175, 252, 65, 0.06) 4px,
    rgba(175, 252, 65, 0.06) 8px
  ) !important;
  box-shadow: inset -6px 0 12px -8px rgba(175, 252, 65, 0.25);
}

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

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

/* ---------------------------------------------------------------------------
   Dropdowns & overlays – fully opaque panel (no transparency), glitchy shadow
   Target both in-panel and teleported dropdowns (body.fi-panel-admin when panel is admin).
   --------------------------------------------------------------------------- */
.fi-panel-admin .fi-dropdown-panel,
body.fi-panel-admin .fi-dropdown-panel {
  /* Force fully opaque: solid hex, no image, no blending so nothing shows through */
  background: #1a2329 !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;
  isolation: isolate !important;
  mix-blend-mode: normal !important;
  /* Glitchy neon shadow */
  box-shadow:
    0 0 0 1px rgba(232, 255, 236, 0.08),
    2px 0 14px -4px rgba(175, 252, 65, 0.22),
    -2px 0 14px -4px rgba(177, 15, 189, 0.18),
    0 12px 28px -8px rgba(0, 0, 0, 0.55) !important;
}
.dark .fi-panel-admin .fi-dropdown-panel,
.dark body.fi-panel-admin .fi-dropdown-panel {
  background: #192127 !important;
  background-image: none !important;
  box-shadow:
    0 0 0 1px rgba(232, 255, 236, 0.1),
    3px 0 16px -4px rgba(175, 252, 65, 0.28),
    -2px 0 16px -4px rgba(177, 15, 189, 0.22),
    0 14px 32px -10px rgba(0, 0, 0, 0.6) !important;
}
.fi-panel-admin .fi-dropdown-panel .divide-gray-100,
.fi-panel-admin .fi-dropdown-panel [class*="divide-"],
body.fi-panel-admin .fi-dropdown-panel .divide-gray-100,
body.fi-panel-admin .fi-dropdown-panel [class*="divide-"] {
  border-color: var(--ord-border, rgba(232, 255, 236, 0.15)) !important;
}
.fi-panel-admin .fi-dropdown-list-item,
body.fi-panel-admin .fi-dropdown-list-item {
  color: var(--ord-text-muted, rgba(232, 255, 236, 0.7)) !important;
}
.fi-panel-admin .fi-dropdown-list-item:hover,
.fi-panel-admin .fi-dropdown-list-item:focus-visible,
body.fi-panel-admin .fi-dropdown-list-item:hover,
body.fi-panel-admin .fi-dropdown-list-item:focus-visible {
  background-color: rgba(175, 252, 65, 0.08) !important;
  color: var(--ord-text, #E8FFEC) !important;
}
.fi-panel-admin .fi-dropdown-header,
body.fi-panel-admin .fi-dropdown-header {
  color: var(--ord-text-muted, rgba(232, 255, 236, 0.7)) !important;
  border-color: var(--ord-border, rgba(232, 255, 236, 0.15)) !important;
}
.fi-panel-admin .fi-dropdown-panel,
.dark .fi-panel-admin .fi-dropdown-panel,
body.fi-panel-admin .fi-dropdown-panel,
.dark body.fi-panel-admin .fi-dropdown-panel {
  color: var(--ord-text, #E8FFEC) !important;
}
.fi-panel-admin .fi-dropdown-panel a,
body.fi-panel-admin .fi-dropdown-panel a {
  color: var(--ord-primary, #AFFC41) !important;
}
.fi-panel-admin .fi-dropdown-panel a:hover,
body.fi-panel-admin .fi-dropdown-panel a:hover {
  color: var(--ord-text, #E8FFEC) !important;
}

/* Sidebar close overlay (mobile): opaque + subtle glitch tint */
.fi-panel-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);
}
.fi-panel-admin .fi-sidebar-close-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(175, 252, 65, 0.03) 0%,
    transparent 50%,
    rgba(177, 15, 189, 0.03) 100%
  );
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Content area footer: light diagonal texture, border-top, inset shadow */
.fi-panel-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(175, 252, 65, 0.03) 8px,
    rgba(175, 252, 65, 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;
}
.fi-panel-admin .ord-admin-footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--ord-gap) var(--ord-gap-md);
}
.fi-panel-admin .ord-admin-footer a {
  color: var(--ord-text-muted, rgba(232, 255, 236, 0.6));
}
.fi-panel-admin .ord-admin-footer a:hover {
  color: var(--ord-primary, #AFFC41);
}
.fi-panel-admin .ord-admin-footer-sep {
  color: var(--ord-border, rgba(232, 255, 236, 0.2));
  user-select: none;
}

/* Dashboard stats overview: mobile single row, clickable cards */
.fi-panel-admin .fi-wi-stats-overview-stat--clickable {
  cursor: pointer;
}
.fi-panel-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 .fi-panel-admin .fi-wi-stats-overview-stat {
  border-color: var(--ord-border, rgba(232, 255, 236, 0.15)) !important;
}

/* Stats overview: force ONE row, 4 columns – never stack; use design tokens */
.fi-panel-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);
}
.fi-panel-admin .fi-wi-stats-overview-stat {
  border-radius: var(--ord-radius) !important;
}
.fi-panel-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) {
  .fi-panel-admin .fi-wi {
    gap: var(--ord-gap-lg) !important;
  }
}
.fi-panel-admin .fi-wi-stats-overview-stat-chart canvas {
  height: 1.25rem !important;
}
.fi-panel-admin .fi-wi-stats-overview-stat-chart {
  min-height: 1.25rem;
  border-radius: 0 0 var(--ord-radius) var(--ord-radius) !important;
}