/* 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 */
}