/* ==========================================================================
   The Feyi Agbaje — Filament admin brand layer
   Loaded via FilamentAsset (see AppServiceProvider). No build step required.
   Ports the site's language 1:1 from apps/web/src/app/globals.css: Noto Serif
   display type, Tenor Sans headings, Barlow UI, ink palette, editorial
   spacing, the same card/panel radii as the public site.
   ========================================================================== */

@import url('https://fonts.bunny.net/css?family=barlow:400,500,600,700|barlow-condensed:500,600|tenor-sans:400|noto-serif:400,600');

:root {
  --tfa-ink-950: #0a0a0a;
  --tfa-ink-900: #0f0f0f;
  --tfa-ink-600: #666666;
  --tfa-line-200: #e0e0e0;
  --tfa-line-300: #d6d6d6;
  --tfa-paper: #f5f5f5;

  /* Same two radii as the public site's --radius-card / --radius-panel */
  --tfa-radius-card: 0.75rem;
  --tfa-radius-panel: 1rem;
}

/* Brand typography ---------------------------------------------------------- */
.fi-body,
.fi-simple-layout {
  font-family: 'Barlow', system-ui, sans-serif;
}

/* Editorial serif for headings + page titles */
.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading,
.fi-ta-empty-state-heading,
.fi-wi-stats-overview-stat-value {
  font-family: 'Tenor Sans', Georgia, serif !important;
  letter-spacing: 0.01em;
  font-weight: 400 !important;
}

/* Uppercase tracked labels — the site's signature micro-type */
.fi-wi-stats-overview-stat-label,
.fi-ta-header-cell-label,
.fi-fo-field-wrp-label {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  letter-spacing: 0.06em;
}

/* Sidebar — a solid ink rail, always dark regardless of light/dark mode, so it
   reads as permanent "navigation chrome" against the light "workspace" (the
   same ink/paper split the public site uses for its dark footer/utility bar
   against the light page). This is the fix for "sidebar and content look
   alike" — previously .fi-sidebar had no background override at all, so it
   inherited Filament's default white, identical to the page behind it.

   Note: the active-state rule below targets .fi-sidebar-item-btn. An earlier
   version of this file targeted .fi-sidebar-item-button (doesn't exist in
   Filament's markup — verified against the compiled CSS and the vendor Blade
   template), so that styling silently never applied. Fixed here. ---------- */
.fi-sidebar,
.fi-sidebar-header {
  background-color: var(--tfa-ink-950) !important;
}

/* Nav items: soft on rest, brighten on hover, solid + left accent when active */
.fi-sidebar-item-label {
  color: rgba(255, 255, 255, 0.66) !important;
  transition: color 100ms ease;
}
.fi-sidebar .fi-icon {
  color: rgba(255, 255, 255, 0.5);
}
.fi-sidebar-item-btn:hover,
.fi-sidebar-item-btn:focus-visible,
.fi-sidebar-group-dropdown-trigger-btn:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
}
.fi-sidebar-item-btn:hover .fi-sidebar-item-label {
  color: rgba(255, 255, 255, 0.9) !important;
}
.fi-sidebar-item-btn:hover .fi-icon {
  color: rgba(255, 255, 255, 0.8);
}
.fi-sidebar-item.fi-active {
  background-color: transparent !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-btn {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-inline-start: 3px solid #fff;
  padding-inline-start: calc(var(--spacing, 0.25rem) * 2 - 3px);
}
.fi-sidebar-item.fi-active .fi-sidebar-item-label {
  color: #fff !important;
  font-weight: 600;
}
.fi-sidebar-item.fi-active .fi-icon {
  color: #fff;
}
.fi-sidebar-group-label {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.32) !important;
}
.fi-sidebar-item-grouped-border-part-not-first,
.fi-sidebar-item-grouped-border-part-not-last {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

/* Brand wordmark under the logo in the sidebar */
.fi-sidebar .fi-logo {
  font-family: 'Tenor Sans', serif;
  letter-spacing: 0.02em;
  color: #fff !important;
}

/* User menu (bottom of sidebar): visible on ink, quiet hover */
.fi-sidebar .fi-user-menu-trigger {
  color: rgba(255, 255, 255, 0.75);
}
.fi-sidebar .fi-user-menu-trigger:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: #fff;
}

/* Page workspace — warm paper behind the sidebar's ink, matching the site's
   own ink/paper split. Cards get real elevation so they read as objects
   sitting ON the page, not flat rectangles the same weight as the page itself
   (the other half of "sidebar and content look alike"). ------------------- */
.fi-body {
  background-color: var(--tfa-paper) !important;
}
.fi-topbar {
  border-bottom: 1px solid var(--tfa-line-200);
  box-shadow: none !important;
}

.fi-wi-stats-overview-stat,
.fi-section,
.fi-modal-window,
.fi-ta-ctn {
  border-radius: var(--tfa-radius-panel);
  border: 1px solid var(--tfa-line-200);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04), 0 8px 24px -12px rgba(10, 10, 10, 0.08);
}
.fi-wi-stats-overview-stat {
  border-top: 2px solid var(--tfa-ink-950);
}
.fi-wi-stats-overview-stat-value {
  font-size: 2rem;
  line-height: 1.1;
}

/* Tables — quiet hairlines and a soft hover, matching the site's line tokens */
.fi-ta-table {
  --tfa-row-hover: rgba(10, 10, 10, 0.03);
}
.dark .fi-ta-table {
  --tfa-row-hover: rgba(255, 255, 255, 0.04);
}
.fi-ta-row:hover {
  background-color: var(--tfa-row-hover);
}
.fi-ta-header-cell {
  font-weight: 600;
}

/* Buttons — full pill radius, matching the public site's CTAs (.fi-icon-btn,
   the icon-only variant used for compact table actions, is a separate class
   and is untouched here). ---------------------------------------------------- */
.fi-btn {
  letter-spacing: 0.02em;
  border-radius: 9999px !important;
}

/* ==========================================================================
   Login — split-screen editorial panel.
   The right side is the untouched Filament auth form; the left side is a
   full-bleed photograph injected via a SIMPLE_LAYOUT_START render hook
   (scoped to the Login page only — see AdminPanelProvider), so this rule
   only ever activates when that panel is actually present in the DOM.
   ========================================================================== */
.fi-simple-layout:has(.tfa-auth-split) {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .fi-simple-layout:has(.tfa-auth-split) {
    grid-template-columns: 1fr 1fr;
  }
}

.tfa-auth-split {
  display: none;
  position: relative;
  min-height: 100dvh;
  background-size: cover;
  background-position: center;
}

@media (min-width: 1024px) {
  .tfa-auth-split {
    display: block;
  }
}

.tfa-auth-split-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(10 10 10 / 0.92) 0%,
    rgb(10 10 10 / 0.55) 45%,
    rgb(10 10 10 / 0.15) 100%
  );
}

.tfa-auth-split-content {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tfa-auth-eyebrow {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
}

.tfa-auth-wordmark {
  font-family: 'Noto Serif', Georgia, serif;
  font-size: clamp(2rem, 1.2rem + 2.5vw, 3.25rem);
  line-height: 1.05;
}

.tfa-auth-tagline {
  font-family: 'Barlow', sans-serif;
  font-size: 0.85rem;
  max-width: 26rem;
  opacity: 0.85;
}

.fi-simple-layout:has(.tfa-auth-split) .fi-simple-main-ctn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  background: var(--tfa-paper);
  padding: 2rem 1.5rem;
}

.fi-simple-layout:has(.tfa-auth-split) .fi-simple-main {
  border-radius: var(--tfa-radius-panel);
  box-shadow: none;
  border: 1px solid var(--tfa-line-200);
}

.fi-simple-header-heading {
  font-family: 'Tenor Sans', serif !important;
  font-weight: 400 !important;
}

/* Topbar polish */
.fi-topbar {
  backdrop-filter: saturate(1.1);
}

.tfa-page-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.tfa-save-bar {
  position: sticky;
  bottom: 1rem;
  z-index: 10;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--tfa-line-200);
  border-radius: var(--tfa-radius-panel);
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px) saturate(1.1);
  box-shadow:
    0 1px 2px rgba(10, 10, 10, 0.04),
    0 12px 32px -14px rgba(10, 10, 10, 0.22);
}

.dark .tfa-save-bar {
  border-color: rgba(255, 255, 255, 0.1);
  background-color: rgba(17, 17, 17, 0.92);
}

/* "Saving…" hint, revealed by Livewire only while the save is in flight. */
.tfa-save-hint {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tfa-ink-600);
}

.dark .tfa-save-hint {
  color: rgba(255, 255, 255, 0.6);
}

/* Any button mid-request: hold it visibly inert so a second click reads as
   "already working", not "nothing happened". Filament adds the spinner and
   the disabled attribute itself; this is just the affordance. -------------- */
.fi-btn:disabled,
.fi-btn[aria-disabled='true'] {
  cursor: progress;
  opacity: 0.75;
}

/* Dashboard greeting header (see Dashboard page override) ------------------- */
.tfa-dashboard-greeting {
  font-family: 'Noto Serif', Georgia, serif;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  color: var(--tfa-ink-950);
  margin-bottom: 0.25rem;
}
.tfa-dashboard-subheading {
  font-family: 'Barlow', sans-serif;
  color: var(--tfa-ink-600);
  font-size: 0.875rem;
}