/**
 * Round 105 — utility classes replacing inline style="" attributes.
 *
 * WHY: CSP's style-src-attr cannot be covered by nonces (they apply to <style>
 * elements only), so the enforcing policy could not drop 'unsafe-inline' for
 * styles while ~761 inline style attributes existed across the blades. These
 * utilities are their like-for-like replacement.
 *
 * WHY !important: an inline style attribute has specificity (1,0,0,0) and beats
 * essentially every rule in a stylesheet. A plain class is (0,0,1,0), so moving
 * a declaration out of the attribute can silently hand the win to a page rule
 * that previously lost — the exact regression this refactor must not cause.
 * `!important` restores inline-equivalent precedence, which is what makes the
 * conversion mechanical and safe. This is the one place in the codebase where
 * !important is correct by design; do NOT copy the pattern into component CSS
 * (see the specificity note in CLAUDE.md).
 *
 * Values are preserved EXACTLY as they appeared inline — this file is a
 * refactor, not a restyle. Colours reference the same custom properties the
 * inline declarations did, so admin/public theming is unchanged.
 */

/* ── display: intentionally ABSENT ────────────────────────────────────────
 * `display` is the most JS-toggled property in the app (19 `element.style
 * .display = …` assignments across public/js). A utility carrying
 * `display: … !important` cannot be overridden by element.style, so converting
 * `style="display:none"` silently breaks every show/hide — the events-search
 * Required box (.filter-name / .DRP_BREED) reproduced exactly that. Those
 * attributes stay inline on purpose; do not "finish the job" by adding
 * .u-hidden here.
 */

/* ── text alignment ────────────────────────────────────────────────────── */
.u-ta-center { text-align: center !important; }
.u-ta-right  { text-align: right !important; }
.u-ta-left   { text-align: left !important; }

/* ── font size ─────────────────────────────────────────────────────────── */
.u-fs-10 { font-size: 10px !important; }
.u-fs-11 { font-size: 11px !important; }
.u-fs-12 { font-size: 12px !important; }
.u-fs-13 { font-size: 13px !important; }
.u-fs-14 { font-size: 14px !important; }
.u-fs-15 { font-size: 15px !important; }
.u-fs-18 { font-size: 18px !important; }
/* ── font weight ───────────────────────────────────────────────────────── */
.u-fw-600 { font-weight: 600 !important; }
.u-fw-700 { font-weight: 700 !important; }
/* ── colour (same custom properties the inline styles referenced) ──────── */
.u-c-gray-400 { color: var(--gray-400) !important; }
.u-c-gray-500 { color: var(--gray-500) !important; }
.u-c-dark     { color: var(--dark) !important; }
.u-c-orange   { color: var(--orange) !important; }
.u-c-red      { color: var(--red) !important; }
.u-c-green    { color: var(--green) !important; }
/* ── status pills (background + colour pairs used across admin tables) ─── */
.u-pill-red   { background: var(--red-light) !important;   color: var(--red) !important; }
.u-pill-green { background: var(--green-light) !important; color: var(--green) !important; }
/* ── margin ────────────────────────────────────────────────────────────── */
.u-m-0     { margin: 0 !important; }
.u-mt-4    { margin-top: 4px !important; }
.u-mt-6    { margin-top: 6px !important; }
.u-mt-8    { margin-top: 8px !important; }
.u-mt-12   { margin-top: 12px !important; }
.u-mt-14   { margin-top: 14px !important; }
.u-mt-16   { margin-top: 16px !important; }
.u-mt-20   { margin-top: 20px !important; }
.u-mb-0    { margin-bottom: 0 !important; }
.u-mb-4    { margin-bottom: 4px !important; }
.u-mb-6    { margin-bottom: 6px !important; }
.u-mb-8    { margin-bottom: 8px !important; }
.u-mb-10   { margin-bottom: 10px !important; }
.u-mb-12   { margin-bottom: 12px !important; }
.u-mb-16   { margin-bottom: 16px !important; }
.u-mb-20   { margin-bottom: 20px !important; }
/* ── whitespace / overflow ─────────────────────────────────────────────── */
.u-nowrap      { white-space: nowrap !important; }
.u-break-word  { word-break: break-word !important; }
.u-cursor-ptr  { cursor: pointer !important; }

/* ── composites: exact repeats that appeared many times inline ─────────── */

/* Small muted meta text under a heading or in a table cell. */
.u-meta {
    font-size: 11px !important;
    color: var(--gray-400) !important;
}

/* Slightly larger muted secondary line. */
.u-meta-13 {
    font-size: 13px !important;
    color: var(--gray-500) !important;
}

.u-meta-12 {
    font-size: 12px !important;
    color: var(--gray-500) !important;
}

.u-meta-12-400 {
    font-size: 12px !important;
    color: var(--gray-400) !important;
}

/* Uppercase micro-label above a value. */
.u-label-caps {
    font-size: 11px !important;
    color: var(--gray-400) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
}

/* Big number in a stat card. */
.u-stat-value {
    font-size: 20px !important;
    font-weight: 700 !important;
}

/* Centred empty-state cell inside a table. */
.u-empty-cell {
    padding: 40px !important;
    color: var(--gray-400) !important;
}

/* Responsive image sizing used by the tutorial screenshots. */
.u-img-90 { width: 90% !important; height: auto !important; }
.u-img-80 { width: 80% !important; height: auto !important; }
.u-img-70 { width: 70% !important; height: auto !important; }
.u-img-60 { width: 60% !important; height: auto !important; }
/* ── round-2: remaining declarations that appeared 2+ times inline ─────── */
.u-pill-purple { background: var(--purple-light) !important; color: var(--purple) !important; }
.u-pill-orange { background: var(--orange-light) !important; color: var(--orange) !important; }
.u-pill-gray   { background: var(--gray-100) !important;     color: var(--gray-500) !important; }

.u-c-purple   { color: var(--purple) !important; }
.u-c-gray-300 { color: var(--gray-300) !important; }
.u-c-gold     { color: #fcc200 !important; }
.u-c-dir-gold { color: var(--dir-gold) !important; }

.u-fs-9 { font-size: 9px !important; }

.u-p-16    { padding: 16px !important; }
.u-p-12-16 { padding: 12px 16px !important; }
.u-maxw-520 { max-width: 520px !important; }
.u-w-40 { width: 40px !important; }
.u-w-50 { width: 50px !important; }
.u-h-auto { height: auto !important; }
.u-mt-1rem { margin-top: 1rem !important; }
/* Table/list row separated by a top rule. */
.u-row-divided {
    padding: 12px 16px !important;
    border-top: 1px solid var(--border) !important;
}

/* Horizontal rule above a following block. */
.u-section-rule {
    border-top: 1px solid #e5e7eb !important;
    padding-top: 12px !important;
    margin-bottom: 8px !important;
}

/* Anchors that must not look like links (card/row wrappers). */
.u-link-plain       { text-decoration: none !important; color: inherit !important; }
/* Smaller centred empty state. */
.u-empty-cell-sm {
    padding: 24px !important;
    text-align: center !important;
    color: var(--gray-400) !important;
    font-size: 13px !important;
}

/* Right-aligned faint metadata (timestamps in list rows). */
.u-meta-right-300 {
    text-align: right !important;
    font-size: 11px !important;
    color: var(--gray-300) !important;
}
.u-meta-300 { font-size: 11px !important; color: var(--gray-300) !important; }

/* Clickable "show more" affordance. */
.u-toggle-link {
    cursor: pointer !important;
    font-size: 12px !important;
    color: var(--purple) !important;
    user-select: none !important;
}

/* Definition-style key/value cells in detail panes. */
.u-cell-label { color: var(--gray-500) !important; font-weight: 600 !important; white-space: nowrap !important; }
.u-cell-value { margin: 0 !important; color: var(--gray-800) !important; word-break: break-word !important; }


/* ── initial-hidden marker for data-style elements ─────────────────────────
 * Paired with data-style="display:none". Hides at parse time (no flash), and
 * public/js/style-bindings.js REMOVES this class right after applying the
 * inline style — so the end state is a genuine inline `display:none`,
 * byte-identical to the old attribute, and every later `style.display = ''`
 * / jQuery .show() behaves exactly as it always did. Deliberately NOT
 * !important, and deliberately removed rather than left in place.
 */
.u-init-hidden { display: none; }

/* ── Round 105: final singletons pulled out of layout/marketing templates ──
 * Each replaces exactly one inline attribute; declarations copied verbatim.
 */
.u-app-shell { --app-nav-h: 84px !important; }
.u-svg-defs { position: absolute !important; }
.u-crawler-trap { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.u-toolbar-row { display: flex !important; align-items: center !important; gap: 1rem !important; flex-wrap: wrap !important; width: 100% !important; }
.u-c-sp-entered { color: var(--sp-entered) !important; }
.u-section-pt-8 { padding-top: 8px !important; }
.u-section-pt-24 { padding-top: 24px !important; }
.u-dir-btn-inline { display: inline-flex !important; width: auto !important; padding: 9px 18px !important; }
.u-logo-img { width: 50% !important; height: 90% !important; }
.u-form-inline { display: inline !important; }