/*
 * Nautical admin theme — Jazzmin-like chrome on top of django-unfold.
 *
 * Scope: Unfold has no setting for "dark sidebar + navy header on light content",
 * so that chrome is supplied here. Everything expressible through Unfold's own
 * API (primary/base/font palettes, border radius, branding) lives in
 * UNFOLD["COLORS"] in nautical/settings.py — do NOT duplicate it here.
 *
 * IMPORTANT — selector policy:
 * Target Unfold's stable DOM hooks (ids and semantic classes it documents),
 * never its Tailwind utility classes. Utility classes such as `bg-base-50`,
 * `lg:bg-white/80`, `.grow.min-w-0` or `h-[38px]` are internal implementation
 * details; they move between releases and silently land on the wrong element.
 *
 * Stable hooks used below (unfold 0.102, templates/unfold/layouts + helpers):
 *   #page                          layouts/base_simple.html
 *   #main                          layouts/base_simple.html   content column
 *   #content                       layouts/base_simple.html   inner container
 *   #header-inner                  helpers/header.html        top bar contents
 *   #nav-sidebar                   admin/nav_sidebar.html     sidebar panel
 *   #nav-sidebar-inner             helpers/navigation.html    sidebar <nav>
 *   #nav-sidebar-apps              helpers/app_list.html      scrolling nav list
 *   a.active                       helpers/app_list.html      active nav item
 *   #result_list / .result-list    changelist results table
 */

:root {
  --nautical-navy: #0b1f36;
  --nautical-navy-deep: #071525;
  --nautical-sidebar: #343a40;
  --nautical-sidebar-hover: #3f464d;
  --nautical-sidebar-border: #2b3035;
  --nautical-search-bg: #3d444b;
  --nautical-search-border: #4b535c;
  --nautical-purple: #6f42c1;
  --nautical-fuchsia: #c2185b;
  --nautical-fuchsia-hover: #99124a;
  --nautical-cerulean: #7fd0ff;
  --nautical-content-bg: #f4f6f9;
  --nautical-border: #dee2e6;
  --nautical-nav-text: #c2c7d0;
  --nautical-nav-heading: #aeb4bd;
  --nautical-on-dark: #e8eef5;
}

/* =========================================================================
   1. Sidebar shell — dark slate
   The panel (#nav-sidebar), its <nav> (#nav-sidebar-inner) and the wrapper
   that sits between them all default to bg-base-50; darken all three so no
   light seam shows through at any width.
   ========================================================================= */
#nav-sidebar,
#nav-sidebar-inner,
div:has(> #nav-sidebar) {
  background-color: var(--nautical-sidebar);
  border-color: var(--nautical-sidebar-border);
  color: var(--nautical-nav-text);
}

/* Default text + icon tone inside the sidebar. Deliberately NOT applied to
   `span`/`a` wholesale — that previously beat the active-item rule on
   specificity and left the active label grey on purple. */
#nav-sidebar-inner {
  color: var(--nautical-nav-text);
}

#nav-sidebar-inner hr,
#nav-sidebar-inner .border-base-200 {
  border-color: var(--nautical-sidebar-border);
}

/* -------- Brand strip (first child of the nav) — navy -------- */
#nav-sidebar-inner > div:first-child {
  background-color: var(--nautical-navy);
  border-color: var(--nautical-navy-deep);
}

#nav-sidebar-inner > div:first-child,
#nav-sidebar-inner > div:first-child a,
#nav-sidebar-inner > div:first-child .text-important,
#nav-sidebar-inner > div:first-child .material-symbols-outlined {
  color: #ffffff;
}

/* Sub-header line under the brand ("… (PTY) Ltd") */
#nav-sidebar-inner > div:first-child .text-subtle {
  color: #9fb3c8;
}

/* Logo sits on navy: give it room and keep it from being cropped. */
#nav-sidebar-inner > div:first-child img {
  height: 34px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* -------- "Search apps and models…" field --------
   The white search box would glare against the dark sidebar.
   Anchored on the command-palette dispatcher in helpers/search.html rather
   than on `.bg-white.border`, which also matches the account pop-over and
   would drag that light surface into the dark treatment. */
#nav-sidebar-inner [x-on\:click*="opencommand"] > div {
  background-color: var(--nautical-search-bg);
  border-color: var(--nautical-search-border);
}

/* Label + icon inside the box. `:not(kbd)` so the shortcut chip below keeps
   its own fill — a bare `> *` here outranks `#nav-sidebar-inner kbd`. */
#nav-sidebar-inner [x-on\:click*="opencommand"] > div,
#nav-sidebar-inner [x-on\:click*="opencommand"] > div > *:not(kbd) {
  /* 7.4:1 on --nautical-search-bg */
  color: #e3e9f0;
}

#nav-sidebar-inner [x-on\:click*="opencommand"] > div > *:not(kbd) {
  background-color: transparent;
}

/* The ⌘K / ^K hint chip (helpers/shortcut.html renders a <kbd>) */
#nav-sidebar-inner kbd {
  background-color: #4b535c;
  border-color: #5b636d;
  color: #e3e9f0;
}

/* -------- Group headings (Client, Policy, Reports …) -------- */
#nav-sidebar-apps h2,
#nav-sidebar-apps h2 .material-symbols-outlined {
  /* 6.0:1 on --nautical-sidebar (was 4.36:1 and failing AA) */
  color: var(--nautical-nav-heading);
}

/* -------- Nav items -------- */
#nav-sidebar-apps ol a,
#nav-sidebar-apps ol a .material-symbols-outlined {
  color: var(--nautical-nav-text);
}

#nav-sidebar-apps ol a:hover {
  background-color: var(--nautical-sidebar-hover);
}

#nav-sidebar-apps ol a:hover,
#nav-sidebar-apps ol a:hover .material-symbols-outlined {
  color: #ffffff;
}

/* Active item — solid purple. Descendant selector included so the inner
   <span> label inherits white instead of the sidebar's default grey. */
#nav-sidebar-apps ol a.active,
#nav-sidebar-apps ol a.active:hover {
  background-color: var(--nautical-purple);
}

#nav-sidebar-apps ol a.active,
#nav-sidebar-apps ol a.active *,
#nav-sidebar-apps ol a.active .material-symbols-outlined {
  /* 8.6:1 on --nautical-purple */
  color: #ffffff;
}

/* -------- Account row at the bottom of the sidebar -------- */
#nav-sidebar-inner > div:last-child {
  border-color: var(--nautical-sidebar-border);
}

#nav-sidebar-inner > div:last-child .text-important {
  color: #ffffff;
}

#nav-sidebar-inner > div:last-child .text-subtle {
  color: var(--nautical-nav-heading);
}

#nav-sidebar-inner > div:last-child > div:hover {
  background-color: var(--nautical-sidebar-hover);
}

/* The expand chevron is `text-font-default-light` (near-black) — invisible at
   1.02:1 once the rail is dark. */
#nav-sidebar-inner > div:last-child > div .material-symbols-outlined {
  color: var(--nautical-nav-text);
}

/* Avatar chip. Unfold's default is a light `bg-base-200` square with white
   initials, which drops to 1.3:1 against a dark sidebar. Use the brand purple
   so the initials clear AA (8.6:1). Only applies to the generated initials
   chip — a real avatar <img> keeps its own pixels. */
#nav-sidebar-inner > div:last-child > div > :first-child:not(img) {
  background-color: var(--nautical-purple);
  color: #ffffff;
}

/* The account pop-over is a light surface floating above the dark rail.
   Only the elements that would otherwise inherit the sidebar's light-on-dark
   text are re-colored — NOT a blanket `*`, which would also strip Unfold's
   semantic colours (e.g. the red `text-red-700` on the Log out button). */
#nav-sidebar-inner > div:last-child > nav {
  background-color: #ffffff;
  border-color: var(--nautical-border);
  color: var(--color-font-default-light, #374151);
}

#nav-sidebar-inner > div:last-child > nav a,
#nav-sidebar-inner > div:last-child > nav label,
#nav-sidebar-inner > div:last-child > nav > div > span {
  color: var(--color-font-default-light, #374151);
}

#nav-sidebar-inner > div:last-child > nav a:hover,
#nav-sidebar-inner > div:last-child > nav button:hover {
  background-color: #f1f3f5;
}

/* =========================================================================
   2. Content column
   ========================================================================= */
#main {
  background-color: var(--nautical-content-bg);
}

/* -------- Top header bar — navy --------
   NOTE: this is the header from helpers/header.html, identified by the
   #header-inner it wraps. A previous revision aimed at `.lg:sticky
   .lg:bg-white/80`, which in Unfold 0.102 is the changelist *pagination
   footer* (helpers/pagination.html) — so the navy landed at the bottom of
   the page and the real header stayed white. */
#main > div:has(#header-inner) {
  background-color: var(--nautical-navy);
  border-color: var(--nautical-navy-deep);
  color: var(--nautical-on-dark);
}

#main > div:has(#header-inner) a,
#main > div:has(#header-inner) button,
#main > div:has(#header-inner) span,
#main > div:has(#header-inner) .text-important,
#main > div:has(#header-inner) .material-symbols-outlined {
  color: var(--nautical-on-dark);
}

/* Breadcrumb / page title on navy — light cerulean keeps the Jazzmin accent
   while clearing AA (8.9:1). The old #2c9fdb sat at 2.74:1 on light grey. */
#main > div:has(#header-inner) h1,
#main > div:has(#header-inner) h1 a,
#main > div:has(#header-inner) h1 span {
  color: var(--nautical-cerulean);
}

#main > div:has(#header-inner) h1 a:hover {
  color: #ffffff;
}

/* Header buttons (History, Refund, Add …) keep their own fills; just make
   sure a plain/white button stays readable against navy. */
#main > div:has(#header-inner) .bg-white {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}

#main > div:has(#header-inner) .bg-white:hover {
  background-color: rgba(255, 255, 255, 0.18);
}

/* =========================================================================
   3. Changelist results table
   Scoped to #result_list so it cannot bleed into inline formsets, dashboard
   app lists, filter panels or widget tables (the previous bare `table tbody a`
   / `table thead th` rules hit every one of those).
   ========================================================================= */
#result_list thead th a {
  color: var(--nautical-fuchsia);
  font-weight: 600;
}

#result_list tbody th a,
#result_list tbody td a {
  color: var(--nautical-fuchsia);
}

#result_list thead th a:hover,
#result_list tbody th a:hover,
#result_list tbody td a:hover {
  color: var(--nautical-fuchsia-hover);
  text-decoration: underline;
}

/* Zebra striping.
   NOTE: Unfold emits ONE <tbody> per record (not one tbody with many rows), so
   `tbody tr:nth-child(even)` never matches — every <tr> is the first child of
   its own <tbody>. Stripe on the tbody instead. No !important, so Unfold's
   hover and row-selection states still win. */
#result_list > tbody:nth-of-type(even) > tr > * {
  background-color: #f8f9fa;
}

/* Action checkboxes and inline widgets inside the table must not inherit the
   record-link colour. */
#result_list a.related-widget-wrapper-link,
#result_list .material-symbols-outlined {
  color: inherit;
}

/* =========================================================================
   4. Metric tile — policy benefit (policy/policy_benefit_tile.html)

   Own hook: `.nautical-tile` is handed to unfold/components/card.html through
   its `class` param, so the shell (surface, border, radius, padding, dark
   variants) stays Unfold's and only the contents are styled here.

   PRECEDENCE — why the children carry no utility classes:
   UNFOLD["STYLES"] sheets are linked BEFORE unfold/css/styles.css
   (layouts/skeleton.html lines 25 and 33), so at equal specificity Unfold's
   utilities win on source order. Rather than fight that with !important, the
   children below are plain semantic elements with nothing for a utility to
   collide with. Selectors are still two-class (0,2,0) so django admin's
   base.css element rules (`p { margin: .2em 0 .8em }`) cannot reach them.
   ========================================================================= */
.nautical-tile {
  --tile-accent: var(--color-primary-600, var(--nautical-purple));
}

/* Brand rule on the leading edge. This is the only place the primary colour
   appears in the content column — it marks the card as the page's figure
   rather than one more white panel above a stack of white form rows.
   Relies on `relative` + `overflow-hidden`, both already on the card root. */
.nautical-tile::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background-color: var(--tile-accent);
}

.nautical-tile .nautical-tile__label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-base-500);
}

/* Baseline alignment (not flex-start) so the small currency mark sits on the
   digits' baseline — the financial-statement setting rather than the raised
   price-tag one. */
.nautical-tile .nautical-tile__figure {
  display: flex;
  align-items: baseline;
  gap: 0.2em;
  margin: 0.375rem 0 0;
  line-height: 1;
  color: var(--color-font-important-light);
}

.nautical-tile .nautical-tile__currency {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-base-400);
}

.nautical-tile .nautical-tile__amount {
  /* clamp: the tile sits at a quarter of the content column on lg, so a
     seven-figure benefit would otherwise overflow its own card. */
  font-size: clamp(1.75rem, 1.25rem + 1.1vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  /* Tabular figures so amounts line up digit-for-digit down a column of
     tiles. Not available as a utility — unfold's bundle is compiled against
     its own templates and ships no `tabular-nums`. */
  font-variant-numeric: tabular-nums;
}

/* An em dash at the full figure size in a pale grey reads as a stray rule, so
   the empty state is set smaller and darker than the figure it replaces. */
.nautical-tile .nautical-tile__amount--empty {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-base-400);
}

/* Product name and option are stored upper-case. Left at full size they out-
   shout the figure by sheer area, so they are set small and tracked: caps at
   this size read as a label instead of a headline. */
.nautical-tile .nautical-tile__product {
  margin: 0.875rem 0 0;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-base-700);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The option is either a restatement of the name plus a vehicle-value bracket
   or a genuine tier ("48 MONTHS", "EXECUTIVE PLUS"). Boxing it subordinates
   the first kind without hiding the second — which joining the two strings
   with a separator could not do.

   Deliberately wraps rather than clipping: the bracket sits at the END of the
   restated names, so a single clipped line showed only the half already
   printed above it. */
.nautical-tile .nautical-tile__option {
  display: inline-block;
  max-width: 100%;
  margin: 0.5rem 0 0;
  padding: 0.1875rem 0.5rem;
  border: 1px solid var(--color-base-200);
  border-radius: var(--border-radius, 6px);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--color-base-500);
}

/* THEME is pinned to "light" in settings, so skeleton.html always stamps
   class="light" and these never fire today. Kept so the tile is not the one
   broken panel if that pin is ever lifted. */
.dark .nautical-tile .nautical-tile__label,
.dark .nautical-tile .nautical-tile__option {
  color: var(--color-base-400);
}

.dark .nautical-tile .nautical-tile__figure {
  color: var(--color-font-important-dark);
}

.dark .nautical-tile .nautical-tile__product {
  color: var(--color-base-200);
}

.dark .nautical-tile .nautical-tile__option {
  border-color: var(--color-base-800);
}

/* =========================================================================
   5. Responsive
   Below Unfold's xl breakpoint the sidebar becomes a fixed overlay; keep the
   dark fill and make sure the navy header doesn't collide with the toggle.
   ========================================================================= */
@media (max-width: 1279px) {
  #nav-sidebar,
  #nav-sidebar-inner {
    background-color: var(--nautical-sidebar);
  }

  #main > div:has(#header-inner) {
    background-color: var(--nautical-navy);
  }
}