/* Meezy Ops, django-unfold admin overrides. Loaded via UNFOLD["STYLES"]. */

/*
 * Icon-font FOUT fix: Unfold draws its admin icons as Material Symbols ligatures via
 * CSS `content: 'keyboard_arrow_down'` (etc.). Unfold's own @font-face for that family
 * ships WITHOUT a font-display descriptor, so it defaults to `auto` (block-ish): on the
 * first uncached load the ligature words ("search", "warning", "keyboard_arrow_down")
 * render in a FALLBACK font as literal text, which is wide and tall and inflates every
 * row and the whole dashboard layout. Once the icon font finishes loading (or a browser
 * zoom forces a reflow) the ligatures collapse to single glyphs and the rows snap back to
 * normal. That mismatch is the "rows are huge until I zoom" bug.
 *
 * Re-declare the same face with `font-display: block`: during the (short) block period the
 * pseudo-element text stays invisible instead of showing the literal word, so there is no
 * oversized first paint and no reflow when the font arrives. This rule is loaded after
 * Unfold's styles, so it wins for this face. Filenames are stable (CompressedStaticFiles,
 * not hashed), so the absolute /static path is safe.
 */
@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/static/unfold/fonts/material-symbols/Material-Symbols-Outlined.3d7864cf3b00.woff2") format("woff2");
}

/*
 * Dashboard app cards: keep each app group's title clear of its first model row.
 * Unfold renders the group title in a table <caption> on a table that uses
 * overflow:hidden + border-separate. In some browsers that combination clips the
 * caption or collapses it onto the first row, so the header text overlaps the card
 * content. Fix: move the rounded clip to the gray wrapper, let the table (and its
 * caption) lay out freely, and reserve explicit space under the caption with a
 * navy-tint hairline so header and content can never collide, regardless of which
 * base CSS is served.
 */
.module > .bg-base-50:has(> table > caption) {
  overflow: hidden;            /* rounding/clip lives on the wrapper, not the table */
}
.module table:has(> caption) {
  overflow: visible;
}
.module table > caption {
  caption-side: top;
  display: table-caption;
  text-align: left;
  font-weight: 600;
  padding: 0.4rem 0.25rem 0.7rem;
  margin-bottom: 0.55rem;
  border-bottom: 1px solid rgb(222 232 255);   /* brand navy-tint #dee8ff */
}

/*
 * Dark mode is the app's dark theme (ADR 0602). Unfold draws every neutral from --color-base-* and
 * the accent from --color-primary-*, so in dark those ramps point at the values static/v2/src.css
 * gives :root[data-theme="dark"]. `html.dark` outranks unfold's inline :root ramp. Which theme is on
 * is the app's choice too: meezy/admin-theme.js copies it across.
 */
html.dark {
  --color-base-950: oklch(0.155 0.004 260); /* --canvas */
  --color-base-900: oklch(0.18 0.004 260);  /* --background: the page and its cards */
  --color-base-800: oklch(0.235 0.004 260); /* --popover: raised rows, edges */
  --color-base-700: oklch(0.3 0.004 260);   /* --accent */
  --color-base-600: oklch(0.42 0.006 260);
  --color-base-500: oklch(0.58 0.008 260);
  --color-base-400: oklch(0.74 0.008 260);  /* --muted-foreground */
  --color-base-300: oklch(0.86 0.004 260);
  --color-base-200: oklch(0.93 0.002 260);
  --color-base-100: oklch(0.965 0 0);       /* --foreground */
  --color-base-50: oklch(0.985 0 0);
  --color-primary-300: #9cc2ff;             /* --primary-active */
  --color-primary-400: #7cafff;             /* --primary-hover */
  --color-primary-500: #5e9dff;             /* --primary */
  --color-primary-600: #5e9dff;
  --color-primary-700: #7cafff;
}
/* The app sets dark ink on its lifted blue (--primary-foreground); white on it is under 3:1. */
html.dark .bg-primary-600 {
  color: #0b1220;
}
html.dark .module table > caption {
  border-bottom-color: var(--color-base-800);
}