/*
 * 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.
 *
 * Dark mode is its own block at the end. Every light rule here wins over
 * Filament's dark variant, so each one needs a dark twin; a new light rule
 * that paints a surface or an ink needs one too.
 */
@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);
}

/* ---- Dark mode -----------------------------------------------------------
   Everything above paints the shell white and the ink navy, and every one of
   those rules beats Filament's own dark variant, because this sheet loads
   after the panel's. So until this block existed, turning on dark mode gave
   dark cards on a white page, a white title on that white page, and navy
   labels in a sidebar Filament had meant to be dark. Each rule here puts one
   of them back, one class deeper so it wins over its light twin.

   The ground is the brand's own navy taken down to night, not Filament's
   neutral grey: the grey ramp is redrawn with a blue cast, so every surface
   Filament paints in dark mode (cards, menus, inputs, hovers) sits in the same
   hue family as the logo. Light mode keeps its warm cream ramp untouched.

   The two rules of the light theme hold here too. Yellow still marks only the
   nav item you are on and the primary button, and it is still a fill with navy
   on it, never text, apart from the active nav icon, where it is the mark. */
html.dark {
  color-scheme: dark;

  --gray-50: #f6f7fb;
  --gray-100: #eceef5;
  --gray-200: #dde1ec;
  --gray-300: #c3c9da;
  --gray-400: #9ea7c0;
  --gray-500: #737d9a;
  --gray-600: #4f5877;
  --gray-700: #353e5d;
  --gray-800: #232b47;
  --gray-900: #141b34;
  --gray-950: #0a0f22;

  --do-hover: rgb(255 255 255 / 0.05);
  /* Not a yellow wash: yellow thinned over navy turns olive. The rule down
     the edge and the icon carry the yellow; the row is just lit. */
  --do-yellow-tint: rgb(255 255 255 / 0.07);
}

.dark .fi-body,
.dark .fi-sidebar,
.dark .fi-topbar,
.dark .fi-main-ctn {
  background-color: var(--gray-950);
}

/* The topbar keeps a hairline under it, so the page scrolls beneath an edge
   rather than into the same colour with nothing between them. */
.dark .fi-topbar {
  --tw-ring-color: rgb(255 255 255 / 0.06);
  /* What the counters' number bubbles ring themselves with (admin.css). */
  --de-topbar-ground: var(--gray-950);
}

.dark .fi-logo {
  color: #fff;
}

.dark .fi-sidebar-item-btn > .fi-icon {
  color: var(--gray-400);
}

.dark .fi-sidebar-item-label {
  color: var(--gray-200);
}

.dark .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);
}

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

.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label {
  color: #fff;
}

/* Navy on a navy night would vanish; the brand blue a step lighter does not. */
.dark .fi-avatar {
  background-color: var(--primary-500);
}

/* Table headers sit on the card like the light ones do, with the rule under
   them redrawn as a light line rather than the cream one. */
.dark .fi-ta-table > thead > tr,
.dark .fi-ta-table > thead > tr.fi-ta-table-head-groups-row,
.dark .fi-ta-table > tfoot,
.dark .fi-ta-table-stacked-header-row .fi-ta-table-stacked-header-cell,
.dark .fi-ta-content-ctn .fi-ta-content-header,
.dark .fi-ta-content-ctn .fi-ta-content .fi-ta-group-header {
  background-color: transparent;
}

.dark .fi-ta-table > thead > tr > .fi-ta-header-cell {
  border-bottom-color: rgb(255 255 255 / 0.08);
}