/*
 * Utility classes — eliminate inline style= from templates.
 *
 * Pattern:
 *   1) STATIC values → Tailwind classes via base.html config:
 *        style="color: var(--md-sys-color-on-surface-variant)"
 *          → class="text-md-on-surface-variant"
 *        style="border-color: var(--md-sys-color-outline-variant)"
 *          → class="border-md-outline-variant"
 *        style="background: var(--md-sys-color-surface-container-lowest); border-radius: ..."
 *          → class="bg-md-surface-container-lowest rounded-md-md"
 *
 *   2) DATA-DRIVEN values (Jinja2 interpolation) → CSS custom property on element:
 *        style="color: {{ chg_color }}"
 *          → class="u-c" style="--c: {{ chg_color }}"
 *        style="width: {{ pct }}%; background: {{ color }}"
 *          → class="u-bar" style="--bar-w: {{ pct }}%; --bar-bg: {{ color }}"
 *        style="height: {{ h }}px"
 *          → class="u-h" style="--h: {{ h }}px"
 *
 *   3) RULE (CLAUDE.md): inline style= is allowed ONLY for setting CSS variables
 *      (--name: value). Any other inline style is a code-review block.
 */

/* =================================================================
   Data-driven CSS custom property classes
   ================================================================= */

/* Color */
.u-c   { color: var(--c); }
.u-bg  { background: var(--bg); }
.u-bc  { border-color: var(--bc); }

/* Dimensions */
.u-h   { height: var(--h); }
.u-w   { width: var(--w); }
.u-mh  { min-height: var(--mh); }
.u-mw  { min-width: var(--mw); }
.u-size { width: var(--w); height: var(--h); }

/* Progress / pacing bar (width + background) */
.u-bar { width: var(--bar-w); background: var(--bar-bg, currentColor); }

/* Composite color + background (badges with dynamic theme) */
.u-cb  { color: var(--c); background: var(--bg); }

/* Border accent (e.g. left rule with dynamic color) */
.u-border-l { border-left: var(--bl-w, 3px) solid var(--bl-c, currentColor); }

/* =================================================================
   Static helper utilities — used widely across templates
   ================================================================= */

/* Horizontal rule line — replaces inline:
     style="height: 1px; background: var(--md-sys-color-outline-variant);" */
.u-rule {
    height: 1px;
    background: var(--md-sys-color-outline-variant);
    border: 0;
}

.u-rule-2 {
    height: 2px;
    background: var(--md-sys-color-outline-variant);
    border: 0;
}

/* Section divider (border-top) */
.u-divider-t { border-top: 1px solid var(--md-sys-color-outline-variant); }
.u-divider-b { border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.u-divider-b-2 { border-bottom: 2px solid var(--md-sys-color-outline-variant); }

/* Subtle surface card combinations (background + radius) */
.u-surface-card {
    background: var(--md-sys-color-surface-container-lowest, #fff);
    border-radius: var(--md-sys-shape-corner-medium, 12px);
}

.u-surface-card-outlined {
    background: var(--md-sys-color-surface-container-lowest, #fff);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium, 12px);
}

/* Tiny rounded dot (used as bullet markers next to MD3 colors) */
.u-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--md-sys-color-outline-variant);
    vertical-align: middle;
}

/* Collapse table border-spacing for compact data grids */
.u-table-collapse { border-collapse: collapse; }

/* Common font-size overrides previously inlined (limited set, semantic intent) */
.u-fs-10 { font-size: 10px; }
.u-fs-16 { font-size: 16px; }
.u-fs-18 { font-size: 18px; }
.u-fs-20 { font-size: 20px; }
.u-fs-22 { font-size: 22px; }
.u-fs-24 { font-size: 24px; }

/* Sidebar / drawer offset width */
.u-h-64 { height: 64px; }

/* Common opacity steps (previously inlined) */
.u-op-30 { opacity: 0.3; }
.u-op-60 { opacity: 0.6; }