/* ═══════════════════════════════════════════════════════════════════════════
   ui.css — shared UI vocabulary
   ---------------------------------------------------------------------------
   Canonical classes for the patterns that were previously copy-pasted as
   inline style="..." attributes across cards, tables and pages.

   Loaded globally from assets/header_footer/header_js_css.php, right after
   fa.css / controls.css / badges.css.

   RULES
   -----
   • Everything here is built on the design tokens in fa.css. No raw hex.
   • Per fa.css convention, do NOT set font-size here in absolute px —
     use relative sizes so the central font control keeps working.
   • Naming: `u-` = single-purpose utility, everything else = component.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────────
   1. LAYOUT UTILITIES
   ─────────────────────────────────────────────────────────────────────────── */

/* Span every column of the parent grid.
   Replaces 36x  style="grid-column: 1 / -1" */
.u-span-all { grid-column: 1 / -1; }

.u-hidden   { display: none; }
.u-nowrap   { white-space: nowrap; }

/* Horizontal rule matching the card borders.
   Replaces  style="border:0;border-top:1px solid var(--border-color);margin:1.5rem 0" */
.u-rule {
    border: 0;
    border-top: 1px solid var(--border-color);
    margin: 1.5rem 0;
}

/* Inline row of chips / badges.
   Replaces  style="display:flex;gap:0.25rem;flex-wrap:wrap" */
.u-chips {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

/* A list row separated by a hairline.
   Replaces  style="padding:0.5rem 0;border-bottom:1px solid var(--border-color)" */
.u-row {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}
.u-row:last-child { border-bottom: 0; }


/* ───────────────────────────────────────────────────────────────────────────
   2. STATE MESSAGES  (empty / loading / error)

   These three replace the most-duplicated inline blocks in the codebase.
   Use inside a grid parent together with .u-span-all:

       <div class="ui-state ui-state--empty u-span-all">No data yet.</div>
   ─────────────────────────────────────────────────────────────────────────── */

/* Base: the bare inline message. Matches the most common original —
   padding:1rem; color:var(--text-muted); font-style:italic; text-align:center */
.ui-state {
    padding: 1rem;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

/* Boxed on the PAGE background — dashed outline, italic, 1rem.
   Matches the original: padding:1rem; background:var(--bg-body);
   border:1px dashed var(--border-color); border-radius:8px; font-style:italic */
.ui-state--boxed {
    background: var(--bg-body);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
}

/* Boxed on a CARD surface — roomier, and NOT italic.
   Matches the original: padding:3rem; background:var(--bg-card);
   border:1px dashed var(--border-color); border-radius:8px  (no font-style) */
.ui-state--boxed-card {
    padding: 3rem;
    background: var(--bg-card);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    font-style: normal;
}

.ui-state--error {
    color: var(--accent-danger);
    font-style: normal;
    padding: 2rem;
}


/* ───────────────────────────────────────────────────────────────────────────
   3. SECTIONS & TITLES

   Consolidates the per-page section headings that each page was re-inventing.
   `.card` / `.card-header` / `.card-title` already live in fa.css — these are
   the *sub*-levels used inside a card.
   ─────────────────────────────────────────────────────────────────────────── */

/* A bordered sub-section inside a card.
   Replaces  style="margin-top:1.5rem;padding:1.5rem;background:var(--bg-card);
                    border-radius:8px;border:1px solid var(--border-color)" */
.ui-section {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

/* Small uppercase label above a block of content (STRUCTURE, BASIC INFO, IDS…).
   This is the pattern seen all over the fa_info cards. */
.ui-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin: 0 0 0.5rem;
}

/* Label row with a "see more →" link pushed to the right. */
.ui-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
}
.ui-label-row .ui-label { margin: 0; }

/* Sub-heading inside a card, below .card-title. */
.ui-subtitle {
    font-weight: 600;
    margin: 0 0 0.4rem;
}

/* Secondary/annotation text that trails a title. */
.ui-title-note {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-muted);
}


/* ───────────────────────────────────────────────────────────────────────────
   4. LINKS

   fa.css resets `a` to `color: inherit`, so every "real" link had to restate
   its colour inline. These are the canonical link styles.
   ─────────────────────────────────────────────────────────────────────────── */

.ui-link {
    color: var(--primary-color);
    cursor: pointer;
}
.ui-link:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* Muted "see more →" / "browse all ›" affordance. */
.ui-link-more {
    color: var(--primary-color);
    font-size: 0.85em;
    white-space: nowrap;
}
.ui-link-more:hover { text-decoration: underline; }

/* External link — pairs with a trailing icon. */
.ui-link-ext {
    color: var(--primary-color);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
}
.ui-link-ext:hover { text-decoration: underline; }


/* ───────────────────────────────────────────────────────────────────────────
   5. TABLES

   `.data-table` (fa.css) stays the base. These are modifiers so pages stop
   setting cell padding / widths / alignment inline.
   ─────────────────────────────────────────────────────────────────────────── */

/* Compact cells — replaces the many style="padding:0.5rem" cells. */
.data-table--compact th,
.data-table--compact td { padding: 0.5rem; }

/* Let the header column size itself instead of the fa.css default of 40%. */
.data-table--auto th { width: auto; }

/* Top-align cells in tables whose rows wrap. */
.data-table--top th,
.data-table--top td { vertical-align: top; }

/* Numeric / right-aligned column. */
.data-table .num,
.u-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Column-width helpers, so widths stop being inline. */
.u-w-15 { width: 15%; }
.u-w-20 { width: 20%; }
.u-w-25 { width: 25%; }
.u-w-30 { width: 30%; }
.u-w-35 { width: 35%; }
.u-w-40 { width: 40%; }
.u-w-50 { width: 50%; }