/*
 | Arkansas Reading Vine — Filament panel brand overlay.
 |
 | Loaded via PanelsRenderHook::HEAD_END (see AdminPanelProvider). Plain CSS,
 | layered on top of Filament's precompiled stylesheet, because Laravel 13 ships
 | Tailwind v4 while Filament v3 themes expect Tailwind v3 — see the note in
 | AdminPanelProvider for why there is no ->viteTheme() here.
 |
 | Palette mirrors config/brand.php / CLAUDE.md.
 */

:root {
  --rv-primary: #3b755f;
  --rv-primary-dark: #2f5d4c;
  --rv-gold: #d3b574;
  --rv-amber: #d9a441;
  --rv-leaf: #6bbf59;
  --rv-ink: #16163f;
  --rv-muted: #5b6b63;
  --rv-bg: #f3f6f3;
}

/* ---------------------------------------------------------------- shell -- */

.fi-body {
  background-color: var(--rv-bg);
  font-family: 'Roboto', ui-sans-serif, system-ui, sans-serif;
}

.fi-topbar > nav {
  background-color: var(--rv-primary);
  border-bottom: 1px solid var(--rv-primary-dark);
  box-shadow: 0 1px 2px rgba(22, 22, 63, .12);
}

/* Topbar sits on green, so its text/icons go light. */
.fi-topbar .fi-icon-btn,
.fi-topbar .fi-dropdown-trigger button,
.fi-topbar .fi-topbar-item-label,
.fi-topbar .fi-breadcrumbs a,
.fi-topbar .fi-breadcrumbs-item-separator {
  color: rgba(255, 255, 255, .92) !important;
}

.fi-topbar .fi-icon-btn:hover {
  background-color: rgba(255, 255, 255, .14) !important;
}

.fi-topbar .fi-global-search-field input {
  background-color: rgba(255, 255, 255, .14);
  color: #fff;
}

.fi-topbar .fi-global-search-field input::placeholder {
  color: rgba(255, 255, 255, .7);
}

/* --------------------------------------------------------------- sidebar -- */

.fi-sidebar,
.fi-sidebar-header {
  background-color: #fff;
  border-right: 1px solid #dfe7e1;
}

.fi-sidebar-header {
  box-shadow: none;
  border-bottom: 1px solid #dfe7e1;
}

.fi-sidebar-group-label {
  color: var(--rv-muted);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.fi-sidebar-item-button {
  border-radius: .5rem;
  border-left: 3px solid transparent;
  font-weight: 500;
}

.fi-sidebar-item-button:hover {
  background-color: var(--rv-bg);
}

/* Active nav item: tinted green with the gold rail from the prototype. */
.fi-sidebar-item-active .fi-sidebar-item-button {
  background-color: rgba(59, 117, 95, .10);
  border-left-color: var(--rv-gold);
}

.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item-active .fi-sidebar-item-icon {
  color: var(--rv-primary-dark) !important;
  font-weight: 700;
}

/* ------------------------------------------------------- gold CTA accent -- */

/* Primary action buttons read as the gold CTA, not another green block. */
.fi-btn.fi-color-primary,
.fi-ac-btn-action.fi-color-primary > button {
  background-color: var(--rv-gold);
  color: #3a2f12;
  font-weight: 700;
}

.fi-btn.fi-color-primary:hover,
.fi-ac-btn-action.fi-color-primary > button:hover {
  background-color: var(--rv-amber);
}

.fi-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--rv-leaf);
  outline-offset: 2px;
}

/* ------------------------------------------------------- type + surfaces -- */

.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading {
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--rv-ink);
}

.fi-section,
.fi-wi-stats-overview-stat {
  border-radius: 14px;
}

/* ----------------------------------------------------------------- login -- */

.fi-simple-layout {
  background:
    radial-gradient(1100px 500px at 50% -10%, rgba(59, 117, 95, .16), transparent 60%),
    var(--rv-bg);
}

.fi-simple-main {
  border-radius: 16px;
  border-top: 4px solid var(--rv-gold);
  box-shadow: 0 1px 2px rgba(22, 22, 63, .06), 0 18px 44px rgba(22, 22, 63, .10);
}

/* The panel brand logo renders above the login card. */
.fi-simple-layout .fi-logo img,
.fi-simple-layout img.fi-logo {
  margin-inline: auto;
}

/* ==========================================================================
   APPROVED DASHBOARD (signed-off prototype)
   --------------------------------------------------------------------------
   Reproduces the approved design: full-width green topbar carrying the brand
   and tagline, white sidebar with a solid-green active item and gold count
   badges, and the dashboard body itself (six tiles, six-month chart, three
   panels).

   Selector names below mirror the prototype's, prefixed .rv-dash where they
   are body markup so they cannot collide with Filament's own components.
   ========================================================================== */

:root {
  --rv-line: #e3ebe6;
  --rv-surface: #ffffff;
  --rv-surface-2: #f8faf8;
  --rv-good: #2e8b57;
  --rv-warn: #c98a1a;
  --rv-crit: #b3453b;
  --rv-shadow: 0 1px 2px rgba(22,22,63,.06), 0 6px 20px rgba(22,22,63,.06);
  --rv-topbar-h: 60px;
}

/* ---- Full-width topbar, sidebar below it (the prototype's grid) --------- */

.fi-topbar {
  position: fixed !important;
  inset-inline: 0;
  top: 0;
  z-index: 40 !important;
  height: var(--rv-topbar-h);
}

.fi-topbar > nav {
  height: var(--rv-topbar-h);
  padding-inline: 18px;
}

/* The brand moves into the topbar, so the sidebar's own header goes. */
.fi-sidebar-header { display: none !important; }

.fi-sidebar {
  top: var(--rv-topbar-h) !important;
  height: calc(100vh - var(--rv-topbar-h)) !important;
  background-color: var(--rv-surface) !important;
  border-right: 1px solid var(--rv-line);
}

.fi-main-ctn { padding-top: var(--rv-topbar-h); }

.fi-sidebar-nav { padding: 12px 10px; gap: 0; }

/* ---- Brand block in the topbar ----------------------------------------- */

.rv-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rv-brand__logo {
  width: 40px; height: 40px; border-radius: 9px; background: #fff; flex: none;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.rv-brand__logo img { width: 100%; height: 100%; object-fit: contain; }
.rv-brand__name {
  font-weight: 900; letter-spacing: .3px; font-size: 15px; line-height: 1.05; color: #fff;
}
.rv-brand__name small {
  display: block; font-weight: 400; font-size: 10.5px; color: #d7e6df; letter-spacing: .4px;
}

.rv-role-badge {
  background: var(--rv-amber); color: #3a2c05; font-size: 10.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: .4px;
  white-space: nowrap;
}

/* ---- Sidebar items, per the prototype ---------------------------------- */

.fi-sidebar-group-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--rv-muted); font-weight: 600; margin: 14px 10px 6px;
}

.fi-sidebar-item-button {
  gap: 11px; padding: 9px 11px; border-radius: 10px; border-left: 0;
  color: #2b3a33; font-weight: 500; margin: 1px 0;
}

.fi-sidebar-item-button:hover { background-color: var(--rv-surface-2); }

/* Solid green with white text — not a tint. */
.fi-sidebar-item-active .fi-sidebar-item-button,
.fi-sidebar-item.fi-active .fi-sidebar-item-button {
  background-color: var(--rv-primary) !important;
  border-left-color: transparent;
}

.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
  color: #fff !important;
  font-weight: 600;
}

/* Gold count badges. */
.fi-sidebar-item-badge-ctn .fi-badge,
.fi-sidebar-item .fi-badge {
  background-color: var(--rv-gold) !important;
  color: var(--rv-primary-dark) !important;
  font-size: 11px; font-weight: 700; border-radius: 20px; padding: 1px 8px;
}
.fi-sidebar-item-active .fi-badge { background-color: #fff !important; }

/* ---- Dashboard body ----------------------------------------------------- */

.rv-dash { font-size: 14.5px; color: var(--rv-ink); }
.rv-dash h1, .rv-dash h3 { font-weight: 700; margin: 0; }

.rv-dash__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
}
.rv-dash__head h1 { font-size: 23px; }
.rv-dash__head .sub { color: var(--rv-muted); margin-top: 3px; font-size: 13.5px; }
.rv-dash .actions { display: flex; gap: 9px; }
.rv-dash .btn {
  background: var(--rv-primary); color: #fff; border: none; padding: 9px 16px;
  border-radius: 9px; font-weight: 600; font-size: 13.5px; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 40px;
}
.rv-dash .btn:hover { background: var(--rv-primary-dark); }
.rv-dash .btn.gold { background: var(--rv-gold); color: #3a2c05; }
.rv-dash .btn.gold:hover { background: var(--rv-amber); }
.rv-dash .btn.ghost { background: transparent; color: var(--rv-primary); border: 1px solid var(--rv-line); }
.rv-dash .btn.ghost:hover { background: var(--rv-surface-2); }

.rv-dash .tiles {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 22px;
}
.rv-dash .tile {
  background: var(--rv-surface); border: 1px solid var(--rv-line); border-radius: 14px;
  padding: 15px 16px; box-shadow: var(--rv-shadow); min-width: 0;
}
.rv-dash .tile .k {
  font-size: 11px; color: var(--rv-muted); text-transform: uppercase;
  letter-spacing: .5px; font-weight: 600;
}
.rv-dash .tile .v { font-size: 27px; font-weight: 900; margin-top: 6px; line-height: 1; color: var(--rv-ink); }
.rv-dash .tile .d { font-size: 11.5px; margin-top: 7px; font-weight: 600; }
.rv-dash .d.up { color: var(--rv-good); }
.rv-dash .d.warn { color: var(--rv-warn); }
.rv-dash .d.crit { color: var(--rv-crit); }
.rv-dash .d.mut { color: var(--rv-muted); }
.rv-dash .tile .bar {
  height: 4px; border-radius: 4px; background: var(--rv-line); margin-top: 10px; overflow: hidden;
}
.rv-dash .tile .bar > span { display: block; height: 100%; border-radius: 4px; background: var(--rv-primary); }

.rv-dash .grid2 { display: grid; grid-template-columns: 1.45fr 1fr; gap: 16px; }
.rv-dash .grid2 > * { min-width: 0; }
.rv-dash .card {
  background: var(--rv-surface); border: 1px solid var(--rv-line); border-radius: 14px;
  box-shadow: var(--rv-shadow); margin-bottom: 16px;
}
.rv-dash .card .hd {
  padding: 14px 18px; border-bottom: 1px solid var(--rv-line);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.rv-dash .card .hd h3 { font-size: 15px; }
.rv-dash .card .hd a { font-size: 12.5px; color: var(--rv-primary); font-weight: 600; text-decoration: none; }
.rv-dash .card .bd { padding: 6px 18px 12px; }

.rv-dash .chart { width: 100%; height: 210px; }
.rv-dash .chart .axis { stroke: #dfe7e2; stroke-width: 1; }
.rv-dash .chart text { fill: var(--rv-muted); font-size: 11px; font-family: inherit; }
.rv-dash .chart .val { fill: var(--rv-primary-dark); font-weight: 700; font-size: 11px; }
.rv-dash .bar-rect { fill: var(--rv-primary); }
.rv-dash .bar-rect:hover { fill: var(--rv-primary-dark); }

.rv-dash .lrow {
  display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rv-line);
}
.rv-dash .lrow:last-child { border-bottom: none; }
.rv-dash .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.rv-dash .lrow .grow { flex: 1; min-width: 0; }
.rv-dash .lrow .t { font-weight: 600; }
.rv-dash .lrow .t a { color: inherit; text-decoration: none; }
.rv-dash .lrow .t a:hover { color: var(--rv-primary); }
.rv-dash .lrow .s { font-size: 12px; color: var(--rv-muted); }
.rv-dash .pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.rv-dash .pill.green { background: #e7f2ec; color: var(--rv-primary-dark); }
.rv-dash .pill.gold  { background: #faf0d8; color: #8a6412; }
.rv-dash .pill.grey  { background: #eef1ef; color: #5b6b63; }
.rv-dash .pill.red   { background: #f7e4e2; color: #9a382f; }
.rv-dash .avatar-sm {
  width: 28px; height: 28px; border-radius: 50%; background: var(--rv-leaf); color: #123;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex: none;
}

/* The page wrapper adds its own padding; the prototype's body owns it. */
.fi-page > .fi-page-header { display: none; }

/* ---- Responsive --------------------------------------------------------- */

/* The prototype's own breakpoint. */
@media (max-width: 1100px) {
  .rv-dash .tiles { grid-template-columns: repeat(3, 1fr); }
  .rv-dash .grid2 { grid-template-columns: 1fr; }
}

/* Phone and small tablet: the prototype stops at 1100px, but CLAUDE.md
   requires this to work at ~390px, where three tiles across are unreadable. */
@media (max-width: 640px) {
  .rv-dash .tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .rv-dash .tile { padding: 12px 13px; }
  .rv-dash .tile .v { font-size: 22px; }
  .rv-dash__head { align-items: flex-start; }
  .rv-dash__head h1 { font-size: 20px; }
  .rv-dash .actions { width: 100%; }
  .rv-dash .actions .btn { flex: 1; justify-content: center; }
  .rv-brand__name { font-size: 13px; }
  .rv-brand__name small { display: none; }
}

@media (max-width: 420px) {
  .rv-dash .tiles { grid-template-columns: 1fr; }
}

/* ---- Fit and finish against the approved design ------------------------- */

/*
 | Two-line room for the label so every tile's NUMBER sits on the same
 | baseline. "Unmatched Learners" wraps at six-across where the others do not,
 | and a row of figures at different heights is the first thing the eye
 | notices.
 */
.rv-dash .tile .k { min-height: 3em; display: flex; align-items: flex-start; }

/* The prototype's group labels are plain text; Filament makes them collapse
   toggles, which adds a chevron the design does not have. */
.fi-sidebar-group-collapse-button { display: none !important; }

/* Translucent search, as in the prototype — Filament's own rule is more
   specific than the earlier one here, so this restates it with the field. */
.fi-topbar .fi-global-search-field .fi-input-wrp,
.fi-topbar .fi-global-search-field .fi-input-wrp input {
  background-color: rgba(255, 255, 255, .15) !important;
  border-color: rgba(255, 255, 255, .22) !important;
  color: #eaf3ef !important;
  box-shadow: none !important;
}
.fi-topbar .fi-global-search-field .fi-input-wrp input::placeholder { color: #cfe0d8 !important; }
.fi-topbar .fi-global-search-field .fi-input-wrp-icon { color: #cfe0d8 !important; }

/* Keep the wordmark to two tidy lines on a phone rather than three ragged
   ones; the tagline is already hidden at this width. */
@media (max-width: 640px) {
  .rv-brand__name { font-size: 12px; line-height: 1.1; max-width: 9.5em; }
  .rv-brand__logo { width: 34px; height: 34px; }
}

/* ---- One fixed appearance -----------------------------------------------
   The panel is locked to light in AdminPanelProvider (->darkMode(false)), so
   there are no dark variants below and no OS-driven switching. These rules are
   stated explicitly and with !important because Filament's own utilities are
   applied inline on the same elements, and the topbar in particular must be
   the brand's forest green rather than any framework default.
   ------------------------------------------------------------------------ */

.fi-body,
.fi-body.fi-panel-admin {
  background-color: #f3f6f3 !important;
  color: #16163f !important;
}

.fi-topbar,
.fi-topbar > nav {
  background-color: #3b755f !important;
  color: #ffffff !important;
}

.fi-topbar *,
.fi-topbar > nav * {
  border-color: rgba(255, 255, 255, .18);
}

/* Cards and page surfaces stay white; body copy stays ink, muted stays muted. */
.rv-dash .card,
.rv-dash .tile,
.fi-section {
  background-color: #ffffff !important;
}

.rv-dash h1,
.rv-dash h3,
.rv-dash .lrow .t,
.rv-dash .tile .v {
  color: #16163f !important;
}

.rv-dash .lrow .s,
.rv-dash .tile .k,
.rv-dash__head .sub {
  color: #5b6b63 !important;
}