/*
 * Daylight — light chrome, navy ink, yellow accent.
 * Loaded as a plain stylesheet — no build step, so the panel needs no npm.
 * Colour ramps live in config/admin-theme.php; this file carries type and shape.
 *
 * The rule this theme is built on: yellow marks exactly two things — the nav
 * item you are on, and the primary button on the screen. Everything else is
 * navy ink on white. If yellow starts appearing anywhere else it stops meaning
 * "this one", which is the only job it has.
 *
 * The whole shell is white — body, sidebar, topbar and content column. See
 * "Page ground" below for why each one has to be said out loud.
 */
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap");

:root {
  /* The two brand hexes. Every colour below is mixed from these, so a brand
     change is a two-line edit here plus the matching ramp in the config. */
  --do-navy: #042083;
  --do-yellow: #fff456;

  /* The pale wash behind the selected nav item. Mixed rather than pasted, so it
     tracks the yellow above. Kept low: at full saturation the row competes with
     the primary button, and the two are meant to read as different weights of
     the same signal. */
  --do-yellow-tint: color-mix(in srgb, var(--do-yellow) 20%, #fff);
  /* Pressed/hover state for a yellow button — a step down, still unmistakably
     the same colour. */
  --do-yellow-deep: color-mix(in srgb, var(--do-yellow) 88%, #000);

  /* Hover on a nav item is deliberately neutral. Sharing the yellow tint with
     the active state would make hovering look like navigating. */
  --do-hover: #f0eee7;

  --do-font-headline: -apple-system, "SF Pro Display", BlinkMacSystemFont,
    "Hanken Grotesk", "Segoe UI", sans-serif;
  --do-font-body: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
}

.fi-body,
.fi-sidebar,
.fi-topbar,
.fi-modal {
  font-family: var(--do-font-body);
}

/* ---- Page ground ---------------------------------------------------------
   The shell is pure white, so a card has no ground to stand out from and page,
   sidebar and card read as one surface.

   Each of the four is stated, and for a different reason:

   `.fi-body` is where Filament paints the page ground, as `--gray-50` — the
   cream in this theme's ramp. That is the tint you actually see. The ramp keeps
   its cream, because `--gray-50` is still what a row hover and a disabled input
   are filled with, and those two do want a tint — a disabled control should
   look inert. Table headers used it too until they were painted white below.

   `.fi-sidebar` is the one that surprises. Filament paints it white, then turns
   it *transparent* again above 1024px (`background-color: #0000`) and lets the
   body show through — so on any desktop screen the sidebar wears whatever
   `.fi-body` is wearing. Painting the body alone would be enough today; naming
   the sidebar as well means it stays white if the body ground is ever tinted
   on purpose.

   `.fi-main-ctn` and not `.fi-main`: the inner element is width-capped and
   centred, so painting that one would leave gutters down both sides on a wide
   screen. The container is the full width to the right of the sidebar.

   `.fi-topbar` Filament already paints white; it is here so the four surfaces
   that make up the shell are declared in one place rather than three of them
   here and one inherited on trust.

   Every one of these is a single-class selector that ties with Filament's own,
   so they only win because this stylesheet is loaded *after* the panel's — see
   the STYLES_AFTER note in AppServiceProvider. Move it back above and the cream
   returns with no other change. */
.fi-body,
.fi-sidebar,
.fi-topbar,
.fi-main-ctn {
  background-color: #fff;
}

.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading {
  font-family: var(--do-font-headline);
  letter-spacing: -0.02em;
}

/* The wordmark is navy, not ink. The logo SVG paints with currentColor. */
.fi-logo {
  font-family: var(--do-font-headline);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--do-navy);
}

/* ---- Sidebar -------------------------------------------------------------
   Icons are navy at rest. Filament's own rule only colours the *active* icon
   (`--primary-700`) and leaves the rest gray, so the resting state is what
   needs saying here. */

.fi-sidebar-item-btn > .fi-icon {
  color: var(--do-navy);
}

.fi-sidebar-item-label {
  color: var(--do-navy);
}

/* Hover: neutral, and only on rows that are not already selected. */
.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover {
  background-color: var(--do-hover);
}

/* Active: pale yellow wash, yellow rule down the leading edge, navy label a
   weight heavier. Filament's default here is a flat `--gray-100`, which this
   replaces.

   The rule is an inset shadow rather than a border-inline-start. A real border
   would add 3px to the box and shift every label in the list the moment you
   navigated; an inset shadow paints in the same place and moves nothing. It
   also follows the button's own border-radius, which a border would square off
   against. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
  background-color: var(--do-yellow-tint);
  box-shadow: inset 3px 0 0 0 var(--do-yellow);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label {
  color: var(--do-navy);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label {
  font-weight: 600;
}

/* ---- Primary buttons -----------------------------------------------------
   Yellow fill, navy label, no ring. Filament builds a solid button from
   `--color-600` with white text; on this yellow that would be white-on-yellow,
   so both the fill and the text are stated outright.

   `.fi-color-primary` is the class Filament puts on a primary action, so the
   first selector covers save and create everywhere without naming a single
   screen. Outlined and link buttons are left alone — they are secondary by
   definition and should not be wearing the accent.

   The sign-out button is named separately because Filament hardcodes
   `color="gray"` on it in account-widget.blade.php, so it arrives with no
   colour class at all. It is the only action on the dashboard, and the brief
   calls it primary, so it is listed here rather than reached by loosening the
   rule above to every uncoloured button — which would put the accent on every
   cancel and filter control in the panel. */
.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link),
.fi-account-widget-logout-form .fi-btn {
  background-color: var(--do-yellow);
  color: var(--do-navy);
  font-weight: 600;
  --tw-ring-shadow: 0 0 #0000;
  box-shadow: none;
}

.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link) > .fi-icon,
.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link) > .fi-btn-label,
.fi-account-widget-logout-form .fi-btn > .fi-icon,
.fi-account-widget-logout-form .fi-btn > .fi-btn-label {
  color: var(--do-navy);
}

.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link):not(.fi-disabled):not(
    [disabled]
  ):hover,
.fi-account-widget-logout-form .fi-btn:not(.fi-disabled):not([disabled]):hover {
  background-color: var(--do-yellow-deep);
}

/* Keyboard focus has to survive on a yellow fill, where the default navy ring
   sits too close to the label to read. Navy ring, offset off the fill. */
.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link):focus-visible,
.fi-account-widget-logout-form .fi-btn:focus-visible {
  outline: 2px solid var(--do-navy);
  outline-offset: 2px;
}

/* ---- Avatars -------------------------------------------------------------
   The circle itself is drawn by ui-avatars.com, and BrandAvatarProvider asks it
   for a navy ground with white initials. This is the fallback for the moment
   before that SVG lands, and for an avatar that fails to load at all. */
.fi-avatar {
  background-color: var(--do-navy);
  color: #fff;
}

/* ---- Shape ---------------------------------------------------------------
   Carried over from the house theme so the two read as the same product. */
.fi-btn,
.fi-badge {
  border-radius: 9999px;
  font-weight: 500;
}

/* Search stays a pill, but white like every other field. Filament already gives
   `.fi-input-wrp` a white ground, a 1px ring and a small shadow, so dropping the
   fill here costs nothing in legibility — the ring is what draws the box, and it
   is the same ring the rest of the form controls wear. A tinted search box was
   the last warm surface left once the shell went white, and on white it read as
   a leftover rather than a decision. */
.fi-input-wrp:has(input[type="search"]),
.fi-ta-search-field .fi-input-wrp {
  border-radius: 9999px;
}

/* ---- Table header --------------------------------------------------------
   Filament fills `thead` with `--gray-50` — this theme's cream — and the same
   shade again on the group-header and footer rows. White instead, so the table
   sits on the page as one surface like everything else.

   Losing the fill loses the only thing separating the header from the first
   record, so the rule is put back explicitly as a 1px line in `--gray-200`, the
   same tone Filament divides its own table rows with. The header still reads as
   a header: semibold label, sort icons, and now an edge instead of a wash. */
.fi-ta-table > thead > tr,
.fi-ta-table > thead > tr.fi-ta-table-head-groups-row,
.fi-ta-table > tfoot,
.fi-ta-table-stacked-header-row .fi-ta-table-stacked-header-cell,
.fi-ta-content-ctn .fi-ta-content-header,
.fi-ta-content-ctn .fi-ta-content .fi-ta-group-header {
  background-color: #fff;
}

.fi-ta-table > thead > tr > .fi-ta-header-cell {
  border-bottom: 1px solid var(--gray-200);
}

/* Yellow is a fill, never a text colour — it fails contrast on white. */
.fi-badge.do-highlight {
  background-color: var(--do-yellow);
  color: var(--do-navy);
}