/* ==========================================================================
   uz-dash-manza.css: "Manza look" for the admin + client DASHBOARDS only.
   Spec: SPEC-UZAILY-DASHBOARD-MANZA-LOOK.md (palette decided 2026-10-20).
   Near-white page, white cards (1px light border + soft shadow, ~8px radius),
   slate ink, one brand-teal primary, pastel status pills, light (non-bold) headings.
   Loaded LAST, after uz-ui.css, by admin/layouts/master and templates/basic/layouts/user_app.
   Every rule is scoped to body.uz-admin or body.uz-client, so the marketing
   site (cream / ink / teal) is untouched. Rollback = remove the two <link> tags.
   2026-10-21: primary switched from the coral stand-in to brand teal #006D77
   (decision 21 Oct 2026 19:43 SAST). Red is reserved for fail / error states.
   ========================================================================== */

.uz-admin, .uz-client {
    /* Uzaily dashboard tokens (R&D style spec 2026-10-21). Primary = brand teal #006D77.
       Red is reserved for fail / error states only. All text pairs pass WCAG AA. */
    /* surface + ink */
    --uz-c-page:#FAFAFC; --uz-c-card:#FFFFFF; --uz-c-sunken:#F1F5F9;
    --uz-c-line:#E5E7EB; --uz-c-line-strong:#CBD5E1;
    --uz-c-ink:#0B1220; --uz-c-ink-2:#374151; --uz-c-muted:#6B7280;
    /* brand */
    --uz-c-primary:#006D77; --uz-c-primary-hover:#005A63; --uz-c-primary-soft:#E8F2F3; --uz-c-on-primary:#FFFFFF; --uz-c-teal:#006D77; --uz-c-on-teal:#FFFFFF; --uz-c-on-bad:#FFFFFF;
    /* status: fg / bg (pill) / dot */
    --uz-c-ok:#047857;     --uz-c-ok-bg:#E7F6EF;     --uz-c-ok-dot:#0E9F6E;
    --uz-c-warn:#92400E;   --uz-c-warn-bg:#FFFBEB;   --uz-c-warn-dot:#F59E0B;
    --uz-c-bad:#B91C1C;    --uz-c-bad-bg:#FEF2F2;    --uz-c-bad-dot:#DC2626;
    --uz-c-info:#1D4ED8;   --uz-c-info-bg:#EFF6FF;   --uz-c-info-dot:#3B82F6;
    --uz-c-pending:#9D174D;--uz-c-pending-bg:#FCE7F3;
    --uz-c-neutral:#334155;--uz-c-neutral-bg:#F1F5F9;
    /* chart (fills/lines, not text) */
    --uz-chart-1:#006D77; --uz-chart-2:#3B82F6; --uz-chart-3:#B45309; --uz-chart-4:#9D174D; --uz-chart-5:#64748B;
    /* type */
    --uz-font:"Inter",system-ui,sans-serif; --uz-font-mono:ui-monospace,"JetBrains Mono",monospace;
    --uz-fs-xs:12px; --uz-fs-sm:13px; --uz-fs-md:14px; --uz-fs-lg:16px; --uz-fs-xl:20px; --uz-fs-2xl:28px; --uz-fs-3xl:34px;
    --uz-lh-tight:1.2; --uz-lh-body:1.5; --uz-fw-regular:400; --uz-fw-medium:500; --uz-fw-semibold:600;
    /* space (4px base) */
    --uz-s-1:4px; --uz-s-2:8px; --uz-s-3:12px; --uz-s-4:16px; --uz-s-5:20px; --uz-s-6:24px; --uz-s-8:32px; --uz-s-12:48px;
    /* shape */
    --uz-radius-sm:6px; --uz-radius:8px; --uz-radius-lg:12px; --uz-radius-pill:999px;
    --uz-shadow-1:0 1px 2px rgba(15,23,42,.04),0 2px 8px rgba(15,23,42,.04);
    --uz-shadow-2:0 4px 16px rgba(15,23,42,.08);
    --uz-focus:0 0 0 3px rgba(0,109,119,.35);
    --uz-skeleton:linear-gradient(90deg,#F1F5F9,#E5E7EB,#F1F5F9);
    /* sizes (layout constants) */
    --uz-size-chart:180px; --uz-size-table-min:480px; --uz-size-touch:32px; --uz-size-chip:36px; --uz-size-row:44px; --uz-size-fab:52px;
    /* inverse panel (dark hero blocks, same in both themes) */
    --uz-c-inverse:#030712; --uz-c-inverse-ink-2:#CBD5E1;

    /* Manza aliases re-pointed to the tokens (views unchanged) */
    --mz-page: var(--uz-c-page); --mz-card: var(--uz-c-card);
    --mz-line: var(--uz-c-line); --mz-line-soft: var(--uz-c-sunken);
    --mz-ink: var(--uz-c-ink); --mz-ink-2: var(--uz-c-ink-2); --mz-muted: var(--uz-c-muted);
    --mz-primary: var(--uz-c-primary); --mz-primary-dark: var(--uz-c-primary-hover); --mz-primary-soft: var(--uz-c-primary-soft);
    --mz-active: var(--uz-c-sunken);
    --mz-shadow: var(--uz-shadow-1); --mz-radius: var(--uz-radius);
    --mz-pill-draft-fg: var(--uz-c-pending); --mz-pill-draft-bg: var(--uz-c-pending-bg);
    --mz-pill-ok-fg: var(--uz-c-ok);         --mz-pill-ok-bg: var(--uz-c-ok-bg);
    --mz-pill-bad-fg: var(--uz-c-bad);       --mz-pill-bad-bg: var(--uz-c-bad-bg);
    --mz-pill-warn-fg: var(--uz-c-warn);     --mz-pill-warn-bg: var(--uz-c-warn-bg);
    --mz-pill-info-fg: var(--uz-c-info);     --mz-pill-info-bg: var(--uz-c-info-bg);
    --mz-pill-mute-fg: var(--uz-c-neutral);  --mz-pill-mute-bg: var(--uz-c-neutral-bg);
    --mz-in: var(--uz-c-ok);                 /* money in */
    --mz-out: var(--uz-c-bad);               /* money out */

    /* Re-point existing uz-ui tokens */
    --uz-ink: var(--mz-ink); --uz-ink-2: var(--mz-ink-2); --uz-muted: var(--mz-muted);
    --uz-canvas: var(--mz-page); --uz-surface: var(--mz-card); --uz-tint: var(--mz-active);
    --uz-line: var(--mz-line); --uz-line-soft: var(--mz-line-soft);
    --uz-accent: var(--uz-c-primary); --uz-accent-soft: var(--uz-c-primary-soft);
    --uz-ok: var(--mz-in); --uz-bad: var(--mz-out);
    --uz-r-lg: var(--mz-radius); --uz-r-md: var(--mz-radius);
    --uz-shadow: var(--mz-shadow);
    --uz-font-sans: var(--uz-font);
    --uz-faint: var(--uz-c-muted);   /* was #9CA3AF (2.5:1); text uses must pass AA */
    --uz-font-serif: var(--uz-font-sans);
}
.uz-admin[data-theme=dark], .uz-client[data-theme=dark] {
    --uz-c-page:#0B1220; --uz-c-card:#111827; --uz-c-sunken:#1E293B;
    --uz-c-line:#1F2937; --uz-c-line-strong:#334155;
    --uz-c-ink:#F1F5F9; --uz-c-ink-2:#CBD5E1; --uz-c-muted:#94A3B8;
    --uz-c-primary:#5EC8D1; --uz-c-primary-hover:#7DD6DD; --uz-c-primary-soft:#123A3E; --uz-c-on-primary:#0B1220; --uz-c-teal:#006D77; --uz-c-on-teal:#FFFFFF;
    --uz-c-ok:#4ADE80;  --uz-c-ok-bg:#14532D;
    --uz-c-warn:#FCD34D;--uz-c-warn-bg:#451A03;
    --uz-c-bad:#FCA5A5; --uz-c-bad-bg:#450A0A; --uz-c-on-bad:#0B1220;
    --uz-c-info:#93C5FD;--uz-c-info-bg:#172554;
    /* additions beyond spec: dark pending/neutral pills + chart fills >= 3:1 on dark card (WCAG 1.4.11) */
    --uz-c-pending:#F9A8D4; --uz-c-pending-bg:#500724; --uz-c-neutral:#CBD5E1; --uz-c-neutral-bg:#1E293B;
    --uz-chart-1:#5EC8D1; --uz-chart-3:#F59E0B; --uz-chart-4:#F472B6; --uz-chart-5:#94A3B8;
    --uz-shadow-1:none; --uz-skeleton:linear-gradient(90deg,#1E293B,#273449,#1E293B); --uz-focus:0 0 0 3px rgba(94,200,209,.45);
}
@media (prefers-color-scheme: dark) {
    .uz-admin[data-theme=auto], .uz-client[data-theme=auto] {
    --uz-c-page:#0B1220; --uz-c-card:#111827; --uz-c-sunken:#1E293B;
    --uz-c-line:#1F2937; --uz-c-line-strong:#334155;
    --uz-c-ink:#F1F5F9; --uz-c-ink-2:#CBD5E1; --uz-c-muted:#94A3B8;
    --uz-c-primary:#5EC8D1; --uz-c-primary-hover:#7DD6DD; --uz-c-primary-soft:#123A3E; --uz-c-on-primary:#0B1220;
    --uz-c-ok:#4ADE80;  --uz-c-ok-bg:#14532D;
    --uz-c-warn:#FCD34D;--uz-c-warn-bg:#451A03;
    --uz-c-bad:#FCA5A5; --uz-c-bad-bg:#450A0A; --uz-c-on-bad:#0B1220;
    --uz-c-info:#93C5FD;--uz-c-info-bg:#172554;
    /* additions beyond spec: dark pending/neutral pills + chart fills >= 3:1 on dark card (WCAG 1.4.11) */
    --uz-c-pending:#F9A8D4; --uz-c-pending-bg:#500724; --uz-c-neutral:#CBD5E1; --uz-c-neutral-bg:#1E293B;
    --uz-chart-1:#5EC8D1; --uz-chart-3:#F59E0B; --uz-chart-4:#F472B6; --uz-chart-5:#94A3B8;
    --uz-shadow-1:none; --uz-skeleton:linear-gradient(90deg,#1E293B,#273449,#1E293B); --uz-focus:0 0 0 3px rgba(94,200,209,.45);
}
}

/* admin legacy tokens */
.uz-admin {
    --uz-paper: var(--mz-page); --uz-paper-2: var(--mz-active); --uz-card: var(--mz-card); --uz-rule: var(--mz-line);
    --uz-teal: var(--uz-c-primary); --uz-teal-dark: var(--uz-c-primary-hover); --uz-teal-soft: var(--uz-c-primary-soft);
    --uz-green: var(--mz-in); --uz-green-soft: var(--mz-pill-ok-bg); --uz-red: var(--mz-out); --uz-red-soft: var(--mz-pill-bad-bg);
    --uz-amber: var(--mz-pill-warn-fg); --uz-amber-soft: var(--mz-pill-warn-bg);
    --uz-serif: var(--uz-sans);
    --base: 185 100% 23%; --base-h: 185; --base-s: 100%; --base-l: 23%; --base-400: 185 100% 23%; --base-600: 185 100% 19%;
    --primary: 185 100% 23%; --dark: 217 33% 17%;
}

/* ---- Page + type ---- */
body.uz-admin, body.uz-client { background-color: var(--mz-page) !important; color: var(--mz-ink) !important; }
.uz-admin .body-wrapper, .uz-admin .bodywrapper__inner { background-color: var(--mz-page) !important; }
.uz-admin h1, .uz-admin h2, .uz-admin h3, .uz-admin h4, .uz-admin h5, .uz-admin .page-title, .uz-admin .card-title,
.uz-client h1, .uz-client h2, .uz-client h3, .uz-client .font-display,
.uz-ui .uz-page-header__title, .uz-ui .uz-section__title, .uz-ui .uz-card__title, .uz-ui .uz-stat__value, .uz-ui .uz-empty__title {
    font-family: var(--uz-font); font-weight: var(--uz-fw-medium); line-height: var(--uz-lh-tight); letter-spacing: -0.015em; color: var(--mz-ink);
}
.uz-admin a:not(.btn):not([class*="sidebar"]), .uz-client .uz-link { color: var(--uz-c-primary-hover); }

/* ---- Cards ---- */
.uz-admin .card, .uz-ui .uz-card, .uz-ui .uz-stats, .uz-ui .uz-stat--card, .uz-ui .uz-table-wrap, .uz-ui .uz-kpi-card, .uz-ui .uz-notice {
    background: var(--mz-card) !important; border: 1px solid var(--mz-line) !important;
    border-radius: var(--mz-radius) !important; box-shadow: var(--mz-shadow) !important;
}
.uz-admin .card-header { background: var(--mz-card) !important; border-bottom: 1px solid var(--mz-line-soft) !important; }
.uz-ui .uz-card { padding: var(--uz-s-6); }
.uz-ui .uz-card.uz-card--flush { padding: 0; overflow: hidden; }
.uz-client main .rounded-3xl:not(.uz-badge):not(.uz-btn), .uz-client main .rounded-2xl.border { border-radius: var(--mz-radius) !important; }
.uz-client main .shadow-sm, .uz-client main .shadow, .uz-client main .shadow-md { box-shadow: var(--mz-shadow) !important; }

/* ---- Buttons: one brand-teal primary, white outlined secondary ---- */
.uz-ui .uz-btn-primary, .uz-ui .uz-btn--primary,
.uz-admin .btn--primary, .uz-admin .btn--base, .uz-admin .btn-primary {
    background: var(--uz-c-primary) !important; border-color: var(--uz-c-primary) !important; color: var(--uz-c-on-primary) !important; background-image: none !important;
}
.uz-ui .uz-btn-primary:hover, .uz-ui .uz-btn--primary:hover,
.uz-admin .btn--primary:hover, .uz-admin .btn--base:hover, .uz-admin .btn-primary:hover {
    background: var(--uz-c-primary-hover) !important; border-color: var(--uz-c-primary-hover) !important; color: var(--uz-c-on-primary) !important;
}
.uz-ui .uz-btn-secondary, .uz-ui .uz-btn--secondary, .uz-admin .btn-outline--primary, .uz-admin .btn-outline--base, .uz-admin .btn-outline--dark {
    background: var(--uz-c-card) !important; color: var(--mz-ink) !important; border: 1px solid var(--mz-line) !important;
}
.uz-ui .uz-btn-secondary:hover, .uz-ui .uz-btn--secondary:hover, .uz-admin .btn-outline--primary:hover, .uz-admin .btn-outline--base:hover, .uz-admin .btn-outline--dark:hover {
    background: var(--mz-active) !important; color: var(--mz-ink) !important; border-color: var(--uz-c-line-strong) !important;
}
.uz-admin .btn--dark { background: var(--mz-ink) !important; border-color: var(--mz-ink) !important; color: var(--uz-c-card) !important; }
.uz-ui .uz-btn:focus-visible, .uz-admin .btn:focus-visible { outline: 2px solid var(--uz-c-primary); outline-offset: 2px; }

/* ---- Pastel status pills ---- */
.uz-ui .uz-badge, .uz-ui .badge {
    border: 0 !important; border-radius: var(--uz-radius-pill) !important; font-weight: var(--uz-fw-medium);
    background: var(--mz-pill-mute-bg) !important; color: var(--mz-pill-mute-fg) !important;
}
.uz-ui .uz-badge__dot, .uz-client .badge::before { display: none !important; }
.uz-ui .uz-badge--ok, .uz-ui .badge--success, .uz-client .bg--success { background: var(--mz-pill-ok-bg) !important; color: var(--mz-pill-ok-fg) !important; }
.uz-ui .uz-badge--bad, .uz-ui .badge--danger, .uz-client .bg--danger { background: var(--mz-pill-bad-bg) !important; color: var(--mz-pill-bad-fg) !important; }
.uz-ui .uz-badge--warn, .uz-ui .badge--warning, .uz-client .bg--warning { background: var(--mz-pill-draft-bg) !important; color: var(--mz-pill-draft-fg) !important; }
.uz-ui .uz-badge--accent, .uz-ui .badge--primary, .uz-ui .badge--info, .uz-ui .badge--base { background: var(--mz-pill-info-bg) !important; color: var(--mz-pill-info-fg) !important; }
.uz-ui .badge--dark, .uz-ui .badge--secondary, .uz-ui .uz-badge--muted { background: var(--mz-pill-mute-bg) !important; color: var(--mz-pill-mute-fg) !important; }

/* ---- Tables: light uppercase grey headers, row dividers, scroll on mobile ---- */
.uz-ui .uz-table thead th, .uz-admin .table thead th, .uz-admin table thead th {
    background: var(--mz-card) !important; color: var(--mz-muted) !important; font-weight: var(--uz-fw-medium) !important;
    font-size: var(--uz-fs-xs) !important; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--mz-line) !important;
}
.uz-ui .uz-table tbody td, .uz-admin .table tbody td { border-bottom: 1px solid var(--mz-line-soft) !important; color: var(--mz-ink); }
.uz-ui .uz-table tbody tr:hover td, .uz-admin .table tbody tr:hover td { background: var(--uz-c-sunken) !important; }
@media (max-width: 767px) { .uz-ui .uz-table-wrap, .uz-admin .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } }

/* ---- Money: green = in, red = out ---- */
.uz-ui .uz-text-ok, .uz-ui .text--success { color: var(--mz-in) !important; }
.uz-ui .uz-text-bad, .uz-ui .text--danger { color: var(--mz-out) !important; }
.uz-ui .text--primary, .uz-ui .text--base { color: var(--uz-c-primary-hover) !important; }
.uz-ui .uz-meter > span { background: var(--uz-c-primary); }

/* ---- Inputs ---- */
.uz-ui .uz-input:focus, .uz-admin .form-control:focus { border-color: var(--uz-c-primary) !important; box-shadow: var(--uz-focus) !important; }

/* ---- Admin nav: white sidebar, grey active row ---- */
.uz-admin .sidebar, .uz-admin .sidebar__inner { background: var(--mz-card) !important; border-right: 1px solid var(--mz-line); }
.uz-admin .sidebar .sidebar-menu-item > a, .uz-admin .sidebar .menu-title, .uz-admin .sidebar .menu-icon { color: var(--mz-ink-2) !important; }
.uz-admin .sidebar .sidebar-menu-item.active > a, .uz-admin .sidebar .sidebar-menu-item > a:hover { background: var(--mz-active) !important; color: var(--mz-ink) !important; }
/* Solid teal tiles: uz-ui.css forces .bg-primary to var(--uz-teal) !important (Bootstrap's bg-opacity-10 tint is lost; in dark
   --uz-teal follows primary #5EC8D1), while .text-primary stays Bootstrap #0d6efd (1.35:1). Pin these tiles to fixed brand
   teal and put --uz-c-on-teal (#FFF) on them in both themes: 6.08:1. */
.uz-admin .bg-primary.text-primary { background-color: var(--uz-c-teal, #006D77) !important; }
.uz-admin .bg-primary.text-primary, .uz-admin .bg-primary .text-primary,
.uz-admin .bg-primary.text-primary i, .uz-admin .bg-primary.text-primary .las, .uz-admin .bg-primary.text-primary svg { color: var(--uz-c-on-teal, #FFFFFF) !important; fill: currentColor; }
/* Dashboard card text in dark theme: Bootstrap .text-body (#212529) and the inline .uz-stat-label grey (#6b7280) sit on #111827. */
.uz-admin[data-theme=dark] .uz-kpi .text-body, .uz-admin[data-theme=dark] .uz-kpi .uz-stat-value { color: var(--uz-c-ink) !important; }
.uz-admin[data-theme=dark] .uz-kpi .bg-dark.text-dark { background-color: var(--uz-c-sunken) !important; color: var(--uz-c-ink-2) !important; }
.uz-admin[data-theme=dark] .uz-kpi .uz-stat-label, .uz-admin[data-theme=dark] .uz-kpi .text-muted { color: var(--uz-c-muted) !important; }
/* Active row and expanded parent (.side-menu--open): teal tint + teal text (spec: primary on soft, 5.34:1).
   Overrides app.css `.sidebar-menu-item .side-menu--open { background:#0b1220 !important }`. */
/* v8: app.css also has `.sidebar[class*="bg--"] .sidebar__menu .sidebar-menu-item .side-menu--open` (0,5,0, !important) and
   uz-ui.css greys `.sidebar[class*="bg--"] .sidebar__menu ... > a .menu-title`, so these selectors carry the same chain plus the open/active class. */
.uz-admin .sidebar[class*="bg--"] .sidebar__menu .sidebar-menu-item > a.side-menu--open,
.uz-admin .sidebar[class*="bg--"] .sidebar__menu .sidebar-menu-item > a.side-menu--open:hover,
.uz-admin .sidebar[class*="bg--"] .sidebar__menu .sidebar-menu-item.active > a,
.uz-admin .sidebar[class*="bg--"] .sidebar__menu .sidebar-menu-item.active > a:hover,
.uz-admin .sidebar .sidebar__menu .sidebar-menu-item > a.side-menu--open,
.uz-admin .sidebar .sidebar__menu .sidebar-menu-item.active > a { background: var(--uz-c-primary-soft) !important; background-color: var(--uz-c-primary-soft) !important; color: var(--uz-c-primary) !important; box-shadow: inset 3px 0 0 var(--uz-c-primary); }
.uz-admin .sidebar[class*="bg--"] .sidebar__menu .sidebar-menu-item > a.side-menu--open .menu-title,
.uz-admin .sidebar[class*="bg--"] .sidebar__menu .sidebar-menu-item > a.side-menu--open .menu-icon,
.uz-admin .sidebar[class*="bg--"] .sidebar__menu .sidebar-menu-item.active > a .menu-title,
.uz-admin .sidebar[class*="bg--"] .sidebar__menu .sidebar-menu-item.active > a .menu-icon,
.uz-admin .sidebar .sidebar__menu .sidebar-menu-item > a.side-menu--open .menu-title,
.uz-admin .sidebar .sidebar__menu .sidebar-menu-item > a.side-menu--open .menu-icon { color: var(--uz-c-primary) !important; text-shadow: none !important; }
.uz-admin .navbar-wrapper { background: var(--mz-card) !important; border-bottom: 1px solid var(--mz-line); }
.uz-client #uz-launcher { background: var(--uz-c-primary) !important; }

/* ==========================================================================
   PR 2 "pages": greeting, onboarding card, stat cards, open tasks, invoices.
   Markup: resources/views/partials/uz_dash/*.blade.php. Mobile-first.
   ========================================================================== */
.uz-dash { margin-bottom: var(--uz-s-12); }
.uz-dash-greeting { font-weight: var(--uz-fw-medium); font-size: var(--uz-fs-2xl); }
.uz-money { font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: baseline; }
.uz-dash-onboarding { text-align: left; display: flex; flex-direction: column; gap: var(--uz-s-4); margin-bottom: var(--uz-s-4); }
.uz-dash-onboarding[hidden] { display: none !important; }
.uz-dash-onboarding__steps { justify-content: flex-start; list-style: none; margin: var(--uz-s-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--uz-s-2) var(--uz-s-5); font-size: var(--uz-fs-md); color: var(--mz-ink-2); }
.uz-dash-onboarding__steps li { display: inline-flex; align-items: center; gap: var(--uz-s-2); }
.uz-dash-onboarding__steps li.is-done { color: var(--mz-muted); text-decoration: line-through; }
.uz-dash-onboarding__steps li.is-done i { color: var(--mz-in); }
.uz-dash-onboarding__actions { display: flex; gap: var(--uz-s-2); flex-wrap: wrap; }
.uz-dash-stats { display: grid; gap: var(--uz-s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--uz-s-4); }
.uz-dash-stats .uz-stat { padding: var(--uz-s-4); }
.uz-dash-stats .uz-stat__value { font-size: var(--uz-fs-2xl); }
.uz-dash-stats .uz-stat.is-bad { border-color: var(--uz-c-bad-dot) !important; }
.uz-dash-grid { display: grid; gap: var(--uz-s-4); grid-template-columns: minmax(0, 1fr); }
.uz-dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--uz-s-3); margin-bottom: var(--uz-s-2); }
.uz-dash-card-head--pad { padding: var(--uz-s-5) var(--uz-s-6) var(--uz-s-2); margin: 0; }
.uz-dash-task { display: flex; align-items: center; gap: var(--uz-s-3); padding: var(--uz-s-3) 0; border-top: 1px solid var(--mz-line-soft); color: var(--mz-ink) !important; text-decoration: none; min-height: var(--uz-size-row); }
.uz-dash-task:first-of-type { border-top: 0; }
.uz-dash-task:hover .uz-dash-task__title { text-decoration: underline; text-underline-offset: 3px; }
.uz-dash-task:focus-visible { outline: 2px solid var(--uz-c-primary); outline-offset: 2px; border-radius: var(--uz-s-1); }
.uz-dash-task__icon { flex: none; width: var(--uz-size-chip); height: var(--uz-size-chip); border-radius: var(--uz-radius); display: inline-flex; align-items: center; justify-content: center; background: var(--mz-active); color: var(--mz-ink-2); }
.uz-dash-task.is-urgent .uz-dash-task__icon { background: var(--mz-pill-bad-bg); color: var(--mz-pill-bad-fg); }
.uz-dash-task__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.uz-dash-task__title { font-size: var(--uz-fs-md); font-weight: var(--uz-fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uz-dash-task__sub { font-size: var(--uz-fs-sm); color: var(--mz-muted); }
.uz-dash-task.is-urgent .uz-dash-task__sub { color: var(--mz-pill-bad-fg); }
.uz-dash-task__amount { font-size: var(--uz-fs-md); font-weight: var(--uz-fw-medium); white-space: nowrap; }
.uz-dash-task__chev { color: var(--mz-muted); font-size: var(--uz-fs-xs); }
.uz-ui .uz-dash-table-wrap { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow-x: auto !important; }
.uz-dash-table-wrap .uz-table { min-width: var(--uz-size-table-min); }
.uz-dash-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.uz-dash-empty { font-size: var(--uz-fs-md); padding: var(--uz-s-2) 0; }
.uz-dash .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 768px) {
    .uz-dash-onboarding { flex-direction: row; align-items: center; justify-content: space-between; }
    .uz-dash-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--uz-s-4); }
    .uz-dash-stats .uz-stat { padding: var(--uz-s-5) var(--uz-s-6); }
    .uz-dash-stats .uz-stat__value { font-size: var(--uz-fs-3xl); }
}
@media (min-width: 1100px) { .uz-dash-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* ==========================================================================
   Admin dashboard tidy (admin/grokload.blade.php): .uz-adm-*
   ========================================================================== */
.uz-adm { display: flex; flex-direction: column; gap: var(--uz-s-4); }
/* Key numbers: one card per metric. 2 cols on phones; 20-col grid from 768px so the 4 headline
   cards share one row and the 5 smaller ones share the next. Wraps instead of overflowing. */
.uz-adm-kpis { display: grid; gap: var(--uz-s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.uz-adm-kpi { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; background: var(--mz-card); border: 1px solid var(--mz-line); border-radius: var(--mz-radius); box-shadow: var(--mz-shadow); padding: var(--uz-s-4) var(--uz-s-5); min-height: 104px; color: var(--mz-ink) !important; text-decoration: none; }
a.uz-adm-kpi:hover { border-color: var(--uz-c-line-strong); }
a.uz-adm-kpi:focus-visible { outline: 2px solid var(--uz-c-primary); outline-offset: 2px; }
.uz-adm-kpi.is-bad { border-color: var(--uz-c-bad-dot); }
.uz-adm-kpi__value { margin-top: var(--uz-s-2); font-size: var(--uz-fs-2xl); line-height: 1.1; font-weight: 400; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.uz-adm-kpi--sm { min-height: 0; padding: var(--uz-s-3) var(--uz-s-4); box-shadow: none; }
.uz-adm-kpi--sm .uz-adm-kpi__value { font-size: var(--uz-fs-xl); }
.uz-adm-kpi--sm:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Health: one small status card per check, side by side. */
.uz-adm-health { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--uz-s-3); }
.uz-adm-health__item { display: flex; align-items: center; gap: var(--uz-s-2); min-width: 0; background: var(--mz-card); border: 1px solid var(--mz-line); border-radius: var(--mz-radius); padding: var(--uz-s-3) var(--uz-s-4); font-size: var(--uz-fs-md); color: var(--mz-ink); }
.uz-adm-health__item .uz-adm-dot { margin-right: 0; }
.uz-adm-health__name { flex: 1; min-width: 0; font-weight: var(--uz-fw-medium); }
.uz-adm-health__state { font-size: var(--uz-fs-sm); color: var(--mz-muted); }
.uz-adm-health__item.is-bad { border-color: var(--uz-c-bad-dot); }
.uz-adm-health__item.is-bad .uz-adm-health__state { color: var(--uz-c-bad); }
/* Open alerts card (only rendered when an alert is open). */
.uz-adm-alerts-card .uz-adm-card__head { padding-bottom: var(--uz-s-3); }
.uz-adm-alerts-card .uz-adm-card__head .uz-card__title { margin: 0; }
.uz-adm-alerts { list-style: none; margin: 0; padding: 0; }
.uz-adm-alerts li { display: flex; flex-wrap: wrap; gap: var(--uz-s-2) var(--uz-s-3); align-items: baseline; padding: var(--uz-s-3) var(--uz-s-5); border-top: 1px solid var(--mz-line-soft); font-size: var(--uz-fs-sm); }
.uz-adm-alerts li:first-child { border-top: 0; }
.uz-adm-alerts__text { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: var(--uz-s-1); }
.uz-adm-alerts__body { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.uz-adm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--uz-s-2); background: var(--uz-c-neutral); flex: none; vertical-align: middle; }
.uz-adm-dot.is-ok { background: var(--mz-in); }
.uz-adm-dot.is-warn { background: var(--uz-c-warn-dot); }
.uz-adm-dot.is-bad { background: var(--mz-out); }
.uz-adm-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--uz-s-2) var(--uz-s-4); padding: var(--uz-s-4) var(--uz-s-5) 0; border-bottom: 1px solid var(--mz-line); }
.uz-adm-card__head .uz-card__title { margin: 0 0 var(--uz-s-3); }
.uz-adm-tabs { gap: var(--uz-s-1); flex-wrap: nowrap; overflow-x: auto; margin: 0; padding: 0; list-style: none; display: flex; }
.uz-adm-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--mz-muted) !important; font-size: var(--uz-fs-md); font-weight: 500; padding: var(--uz-s-2) var(--uz-s-3) var(--uz-s-3); white-space: nowrap; }
.uz-adm-tabs .nav-link.active { color: var(--mz-ink) !important; border-bottom-color: var(--mz-primary); background: none !important; }
.uz-adm-tabs .nav-link .uz-num { color: var(--mz-muted); margin-left: var(--uz-s-1); }
.uz-adm-table td { vertical-align: middle; }
.uz-adm-sub { font-size: var(--uz-fs-xs); margin-top: var(--uz-s-1); }
.uz-adm-nowrap { white-space: nowrap; }
.uz-adm-empty, .uz-adm-pad { padding: var(--uz-s-4) var(--uz-s-5); margin: 0; }
.uz-adm-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--uz-s-3) var(--uz-s-6); margin: 0 0 var(--uz-s-4); }
.uz-adm-figs dt { font-size: var(--uz-fs-xs); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--mz-muted); }
.uz-adm-figs dd { margin: var(--uz-s-1) 0 0; font-size: var(--uz-fs-xl); font-variant-numeric: tabular-nums; }
.uz-adm-h3 { margin: var(--uz-s-4) 0 var(--uz-s-1); }
.uz-adm-list { list-style: none; margin: 0; padding: 0; }
.uz-adm-list li { display: flex; justify-content: space-between; gap: var(--uz-s-3); padding: var(--uz-s-2) 0; border-top: 1px solid var(--mz-line-soft); font-size: var(--uz-fs-md); }
.uz-adm-list li:first-child { border-top: 0; }
.uz-adm .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 768px) {
    .uz-adm-kpis { grid-template-columns: repeat(20, minmax(0, 1fr)); gap: var(--uz-s-4); }
    .uz-adm-kpi:not(.uz-adm-kpi--sm) { grid-column: span 10; }
    .uz-adm-kpi--sm { grid-column: span 4; }
    .uz-adm-kpi--sm:last-child:nth-child(odd) { grid-column: span 4; }
    .uz-adm-health { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--uz-s-4); }
    .uz-adm-kpi__value { font-size: var(--uz-fs-3xl); }
    .uz-adm-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) { .uz-adm-kpi:not(.uz-adm-kpi--sm) { grid-column: span 5; } }

/* ==========================================================================
   Style pass (R&D spec 2026-10-21): text + surfaces follow tokens in dark,
   designed empty states, loading skeletons, focus ring.
   ========================================================================== */
.uz-admin, .uz-client { font-family: var(--uz-font); font-size: var(--uz-fs-md); line-height: var(--uz-lh-body); }
.uz-ui .uz-label, .uz-ui .uz-muted, .uz-ui .uz-stat__note:not(.uz-text-bad) { color: var(--mz-muted); }
.uz-ui .uz-label { font-size: var(--uz-fs-xs); }
.uz-ui .uz-card__title { font-size: var(--uz-fs-lg); }
.uz-ui .uz-link, .uz-admin a:not(.btn):not([class*="sidebar"]) { color: var(--uz-c-primary); }
.uz-ui .uz-link:hover { color: var(--uz-c-primary-hover); }
.uz-ui .uz-input, .uz-admin .form-control { background: var(--uz-c-card); color: var(--uz-c-ink); border: 1px solid var(--uz-c-line-strong); border-radius: var(--uz-radius-sm); padding: var(--uz-s-2) var(--uz-s-3); font-size: var(--uz-fs-md); }
.uz-ui .uz-input::placeholder, .uz-admin .form-control::placeholder { color: var(--uz-c-muted); opacity: 1; }
.uz-ui .uz-btn:focus-visible, .uz-admin .btn:focus-visible, .uz-ui .uz-link:focus-visible { outline: none; box-shadow: var(--uz-focus) !important; }
.uz-ui .uz-badge--ok, .uz-ui .uz-badge--bad, .uz-ui .uz-badge--warn, .uz-ui .uz-badge--accent { font-size: var(--uz-fs-xs); padding: var(--uz-s-1) var(--uz-s-2); }

/* Designed empty state: icon chip + title + one line + optional action */
.uz-ui .uz-dash-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--uz-s-2); padding: var(--uz-s-6) 0; font-size: var(--uz-fs-md); color: var(--uz-c-muted); }
.uz-ui .uz-card--flush .uz-dash-empty { padding: var(--uz-s-6); }
.uz-ui .uz-dash-empty__icon { width: var(--uz-s-12); height: var(--uz-s-12); border-radius: var(--uz-radius-lg); display: inline-flex; align-items: center; justify-content: center; background: var(--uz-c-primary-soft); color: var(--uz-c-primary); font-size: var(--uz-fs-xl); }
.uz-ui .uz-dash-empty__title { font-size: var(--uz-fs-lg); font-weight: var(--uz-fw-medium); color: var(--uz-c-ink); }
.uz-ui .uz-dash-empty__text { margin: 0; color: var(--uz-c-muted); }

/* Loading skeleton */
.uz-ui .uz-skeleton { display: block; border-radius: var(--uz-radius-sm); background: var(--uz-skeleton); background-size: 200% 100%; animation: uz-shimmer 1.4s ease-in-out infinite; min-height: var(--uz-s-3); }
.uz-ui .uz-skeleton--text { height: var(--uz-s-3); margin: var(--uz-s-2) 0; }
.uz-ui .uz-skeleton--title { height: var(--uz-s-5); width: 40%; }
.uz-ui .uz-skeleton--chart { height: var(--uz-size-chart); }
@keyframes uz-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .uz-ui .uz-skeleton { animation: none; } }

/* Skeleton rows for the tasks + invoices cards (summary partial, data-uz-loading) */
.uz-ui .uz-skeleton-row { display: flex; align-items: center; gap: var(--uz-s-3); padding: var(--uz-s-3) 0; }
.uz-ui .uz-skeleton-row .uz-skeleton--icon { flex: 0 0 var(--uz-size-touch); height: var(--uz-size-touch); border-radius: var(--uz-radius); }
.uz-ui .uz-skeleton-row .uz-skeleton--text { flex: 1 1 auto; margin: 0; }
.uz-ui .uz-skeleton-row .uz-skeleton--short { flex: 0 0 20%; }
.uz-ui .uz-dash-invoices .uz-skeleton-list { padding: 0 var(--uz-s-6) var(--uz-s-6); }
.uz-ui [aria-busy="false"] > .uz-skeleton, .uz-ui [aria-busy="false"] > .uz-skeleton-list { display: none; }

/* Action rows: buttons + search never touch */
.uz-ui .uz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uz-s-2); }
.uz-ui .uz-btn + .uz-input, .uz-ui .uz-btn + .uz-btn, .uz-ui .uz-btn + input[type="search"] { margin-left: var(--uz-s-2); }
.uz-ui .uz-actions > .uz-btn + .uz-input, .uz-ui .uz-actions > .uz-btn + .uz-btn { margin-left: 0; }

/* Light / dark / system switch */
.uz-ui .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.uz-ui .uz-theme-switch { display: inline-flex; align-items: center; gap: var(--uz-s-1); padding: var(--uz-s-1); border: 1px solid var(--uz-c-line-strong); border-radius: var(--uz-radius-pill); background: var(--uz-c-card); }
.uz-ui .uz-theme-switch__opt { display: inline-flex; align-items: center; justify-content: center; width: var(--uz-size-touch); height: var(--uz-size-touch); padding: 0; border: 0; border-radius: var(--uz-radius-pill); background: transparent; color: var(--uz-c-muted); font-size: var(--uz-fs-sm); cursor: pointer; }
.uz-ui .uz-theme-switch__opt:hover { color: var(--uz-c-ink); background: var(--uz-c-sunken); }
.uz-ui .uz-theme-switch__opt[aria-checked="true"] { background: var(--uz-c-primary); color: var(--uz-c-on-primary); }
.uz-ui .uz-theme-switch__opt:focus-visible { outline: none; box-shadow: var(--uz-focus); }
.uz-admin .navbar__action-list .uz-theme-switch-item { display: flex; align-items: center; }

/* Token utilities (client dashboard) */
.uz-ui .uz-tx-ink { color: var(--uz-c-ink) !important; }
.uz-ui .uz-tx-ink-2 { color: var(--uz-c-ink-2) !important; }
.uz-ui .uz-tx-muted { color: var(--uz-c-muted) !important; }
.uz-ui .uz-tx-faint { color: var(--uz-c-line-strong) !important; }
.uz-ui .uz-tx-bad { color: var(--uz-c-bad) !important; }
.uz-ui .uz-bg-card { background-color: var(--uz-c-card) !important; }
.uz-ui .uz-bd-line { border-color: var(--uz-c-line) !important; }
.uz-ui .uz-hover-tx-bad:hover { color: var(--uz-c-bad) !important; }
.uz-ui .uz-hover-tx-ink:hover { color: var(--uz-c-ink) !important; }
.uz-ui .uz-hover-tx-primary:hover { color: var(--uz-c-primary-hover) !important; }
.uz-ui .uz-hover-bd-ink:hover { border-color: var(--uz-c-ink) !important; }

/* Hard-coded Tailwind light colours on other client views -> tokens (both themes). */
body.uz-client .bg-white, body.uz-client .bg-white\/90 { background-color: var(--uz-c-card) !important; }
body.uz-client .bg-gray-50 { background-color: var(--uz-c-page) !important; }
body.uz-client .bg-gray-100, body.uz-client .hover\:bg-gray-50:hover, body.uz-client .hover\:bg-gray-100:hover { background-color: var(--uz-c-sunken) !important; }
body.uz-client .text-gray-900, body.uz-client .text-gray-800 { color: var(--uz-c-ink) !important; }
body.uz-client .text-gray-700, body.uz-client .text-gray-600 { color: var(--uz-c-ink-2) !important; }
body.uz-client .text-gray-500, body.uz-client .text-gray-400 { color: var(--uz-c-muted) !important; }
body.uz-client .border-gray-100, body.uz-client .border-gray-200, body.uz-client .border-gray-300 { border-color: var(--uz-c-line) !important; }
body.uz-client .uz-input, body.uz-client .form-control, body.uz-client .form--control { background: var(--uz-c-card) !important; border-color: var(--uz-c-line-strong) !important; color: var(--uz-c-ink) !important; }
body.uz-client .uz-table thead th { background: var(--uz-c-sunken) !important; color: var(--uz-c-ink-2) !important; border-bottom-color: var(--uz-c-line) !important; }
body.uz-client .uz-table tbody td { color: var(--uz-c-ink) !important; border-bottom-color: var(--uz-c-line) !important; }
body.uz-client .uz-nav-avatar { background: var(--uz-c-sunken); border-color: var(--uz-c-line); color: var(--uz-c-ink); }

/* Task rows keep ink text in every state (admin Bootstrap a:hover/focus would turn them #007bff, 3.97:1). */
.uz-ui .uz-dash-task:hover, .uz-ui .uz-dash-task:focus, .uz-ui .uz-dash-task:focus-visible,
.uz-ui .uz-dash-task .uz-dash-task__title, .uz-ui .uz-dash-task .uz-dash-task__amount { color: var(--uz-c-ink) !important; }

/* Money always inherits its context colour (Bootstrap link colours / faint notes were leaking in). */
.uz-ui .uz-money { color: inherit !important; }

/* uz-ui "breathing" layer hard-codes white cards + cream lines; route them through the tokens (all breakpoints). */
html body.uz-ui .uz-card, html body.uz-ui .uz-stat--card, html body.uz-ui .uz-stats > .uz-stat { background: var(--uz-c-card) !important; border-color: var(--uz-c-line) !important; }
html body.uz-ui .uz-card .uz-card__foot { border-top-color: var(--uz-c-line); }
html body.uz-ui .uz-stats > .uz-stat .uz-stat__note:not(.uz-text-bad) { color: var(--uz-c-muted); }

/* Client tables: header text on sunken needs ink-2 (muted on sunken is 4.41:1). */
body.uz-client .uz-table thead th { color: var(--uz-c-ink-2) !important; }

/* Client top nav -> tokens */
body.uz-client .uz-nav { background: var(--uz-c-card); border-bottom-color: var(--uz-c-line); }
body.uz-client .uz-nav__link { color: var(--uz-c-ink-2); }
body.uz-client .uz-nav__link:hover, body.uz-client .uz-nav__link.is-active { color: var(--uz-c-ink); }
body.uz-client .uz-nav__link.is-active::after { background: var(--uz-c-ink); }
body.uz-client .uz-nav__icon-btn { background: var(--uz-c-card); border-color: var(--uz-c-line); color: var(--uz-c-ink-2); }
body.uz-client .uz-nav__icon-btn:hover { background: var(--uz-c-sunken); }
body.uz-client .uz-brand { color: var(--uz-c-ink); }
body.uz-client .uz-brand__word span { color: var(--uz-c-primary); }

/* Order statistics header: admin app.css paints these #5b6e88 (3.4:1 on dark card). */
.uz-admin .uz-label .time_text { color: inherit !important; }
.uz-admin .total_orders, .uz-admin .exit-btn { color: var(--uz-c-ink) !important; }

/* Admin navbar button styles must not resize / repaint the theme switch. */
.uz-admin .navbar__action-list .uz-theme-switch__opt { font-size: var(--uz-fs-sm) !important; color: var(--uz-c-muted) !important; background: transparent !important; width: var(--uz-size-touch) !important; height: var(--uz-size-touch) !important; padding: 0 !important; }
.uz-admin .navbar__action-list .uz-theme-switch__opt i { font-size: var(--uz-fs-sm) !important; width: auto !important; height: auto !important; line-height: 1 !important; color: inherit !important; }
.uz-admin .navbar__action-list .uz-theme-switch__opt[aria-checked="true"], .uz-admin .navbar__action-list .uz-theme-switch__opt[aria-checked="true"] i { background: var(--uz-c-primary) !important; color: var(--uz-c-on-primary) !important; }
.uz-admin .navbar__action-list .uz-theme-switch__opt[aria-checked="true"] i { background: transparent !important; }

/* v2: leftover Tailwind light colours on server-details + client nav -> tokens (both themes) */
body.uz-client .bg-gray-200, body.uz-client .hover\:bg-gray-200:hover { background-color: var(--uz-c-sunken) !important; }
body.uz-client .gap-px.bg-gray-200 { background-color: var(--uz-c-line) !important; }
body.uz-client .text-gray-300 { color: var(--uz-c-muted) !important; }
body.uz-client .bg-gray-950 { background-color: var(--uz-c-inverse) !important; }
body.uz-client .bg-gray-950 .text-gray-300 { color: var(--uz-c-inverse-ink-2) !important; }
body.uz-client .bg-emerald-100 { background-color: var(--uz-c-ok-bg) !important; }
body.uz-client .text-emerald-700 { color: var(--uz-c-ok) !important; }
body.uz-client .bg-yellow-100, body.uz-client .bg-amber-50 { background-color: var(--uz-c-warn-bg) !important; }
body.uz-client .text-yellow-700, body.uz-client .text-amber-700, body.uz-client .text-amber-800 { color: var(--uz-c-warn) !important; }
body.uz-client .border-amber-200, body.uz-client .border-amber-300 { border-color: var(--uz-c-warn-dot) !important; }

/* v2: invoice table headers never wrap mid-word; FAB clearance so it never covers the last column */
.uz-ui .uz-dash-invoices .uz-table thead th { white-space: nowrap; }
.uz-ui .uz-dash { padding-bottom: var(--uz-s-12); }
.uz-ui .uz-dash-invoices .uz-table td:last-child, .uz-ui .uz-dash-invoices .uz-table th:last-child { padding-right: var(--uz-s-6) !important; }

/* Danger buttons: text token flips with the bad fill (dark #FCA5A5 needs dark text). */
.uz-ui .uz-btn-danger, .uz-ui .uz-btn-danger:hover { color: var(--uz-c-on-bad) !important; }
/* Onboarding steps: admin app.css paints spans #5b6e88; keep token colours. */
.uz-ui .uz-dash-onboarding__steps li, .uz-ui .uz-dash-onboarding__steps li > span { color: var(--uz-c-ink-2) !important; }
.uz-ui .uz-dash-onboarding__steps li.is-done, .uz-ui .uz-dash-onboarding__steps li.is-done > span { color: var(--uz-c-muted) !important; }

/* Inverse "ink" fills (bg-gray-900) follow the primary so their white/ink text pairs in both themes. */
body.uz-client .bg-gray-900:not(.srv-range) { background-color: var(--uz-c-primary) !important; color: var(--uz-c-on-primary) !important; }
body.uz-client .bg-gray-900 .text-white, body.uz-client .bg-gray-900.text-white { color: var(--uz-c-on-primary) !important; }

/* Scrollable table regions are keyboard-focusable (WCAG 2.1.1); show the ring only for keyboard focus. */
.uz-ui .uz-dash-table-wrap:focus { outline: none; }
.uz-ui .uz-dash-table-wrap:focus-visible { outline: none; box-shadow: var(--uz-focus) !important; }

/* v3: keep page content clear of the fixed corner button (--uz-size-fab) on wide screens. */
@media (min-width:1024px){
  .uz-ui main, .uz-ui.uz-admin .bodywrapper__inner { padding-right: calc(var(--uz-size-fab) + var(--uz-s-4)) !important; }
}
/* v3: state pills and team-role colours. */
.uz-ui .uz-pill-ok{background:var(--uz-c-ok-bg) !important;color:var(--uz-c-ok) !important}
.uz-ui .uz-pill-warn{background:var(--uz-c-warn-bg) !important;color:var(--uz-c-warn) !important}
.uz-ui .uz-pill-info{background:var(--uz-c-info-bg) !important;color:var(--uz-c-info) !important}
.uz-ui .uz-pill-pending{background:var(--uz-c-pending-bg) !important;color:var(--uz-c-pending) !important}
.uz-ui .uz-pill-neutral{background:var(--uz-c-neutral-bg) !important;color:var(--uz-c-neutral) !important}
.uz-ui .uz-role-owner{color:var(--uz-c-warn)}
.uz-ui .uz-role-admin{color:var(--uz-c-info)}
.uz-ui .uz-role-manager{color:var(--uz-c-pending)}
.uz-ui .uz-role-viewer{color:var(--uz-c-muted)}
/* v3: footer wordmark text follows ink (inline SVG). */
.uz-ui .uz-logo-word{fill:var(--uz-c-ink)}
.uz-ui .uz-dash-loading-text{color:var(--uz-c-muted)}
.uz-ui .uz-stat__value:has(.uz-dash-loading-text) .uz-cur{display:none}
/* v4: latest-invoices cells never break per character; the wrap scrolls horizontally instead. */
.uz-ui .uz-dash-invoices .uz-table td { white-space: nowrap; }
.uz-ui .uz-dash-invoices .uz-dash-table-wrap { overflow-x: auto !important; }
/* v4: server-details billing grid - an odd last item spans both columns in the 2-column (md) layout. */
@media (min-width:768px) and (max-width:1279.98px){
  .uz-ui .uz-billing-grid > :last-child:nth-child(odd) { grid-column: span 2 / span 2; }
}
/* v4: client top nav below 1280px - tighter link gap, no wrapping, room either side; name collapses into the avatar menu below 1152px. */
@media (min-width:768px) and (max-width:1279.98px){
  .uz-ui .uz-nav__links { column-gap: var(--uz-s-4) !important; margin-inline: var(--uz-s-6); }
  .uz-ui .uz-nav__links a { white-space: nowrap; }
}
@media (max-width:1151.98px){ .uz-ui .uz-nav__who { display: none !important; } }
/* v5: below 1024px the fixed corner button (assistant launcher / admin configure card) sits lower and the page ends clear of it. */
@media (max-width:1023.98px){
  .uz-ui main, .uz-ui.uz-admin .bodywrapper__inner { padding-bottom: calc(var(--uz-size-fab) + var(--uz-s-6)) !important; }
  .uz-ui #uz-launcher, .uz-ui .configure-card-wrapper { bottom: var(--uz-s-4) !important; }
}
/* v5: latest-invoices inner cell gutters use --uz-s-3 so all five columns fit the 1280 card; outer edges keep --uz-s-6. */
.uz-ui .uz-dash-invoices .uz-table th:not(:first-child), .uz-ui .uz-dash-invoices .uz-table td:not(:first-child) { padding-left: var(--uz-s-3) !important; }
.uz-ui .uz-dash-invoices .uz-table th:not(:last-child), .uz-ui .uz-dash-invoices .uz-table td:not(:last-child) { padding-right: var(--uz-s-3) !important; }

/* ==========================================================================
   v8: admin-wide token pass (R&D sweep 5605937890). Every value is a theme token, so light and dark both follow.
   ========================================================================== */
/* Bootstrap / ViserLab greys (#6C757D .text-muted, btn--secondary; #5B6E88 p/li/span, td, select, .bg--transparent in app.css) -> muted token. */
.uz-admin .text-muted, .uz-admin td.text-muted, .uz-admin .text--secondary, .uz-admin .text-secondary { color: var(--uz-c-muted) !important; }
:where(.uz-admin) :is(p, li, span, select), :where(.uz-admin) .table td .fw-bold, :where(.uz-admin) .bg--transparent { color: var(--uz-c-muted); }
.uz-admin .table td .fw-bold, .uz-admin .table td > span.fw-bold { color: var(--uz-c-ink-2) !important; }
.uz-admin .btn--secondary { --color: var(--uz-c-muted); }
.uz-admin select:not(.form-select):not(.form-control) { color: var(--uz-c-ink-2); }
/* Primary / dark buttons: uz-ui.css painted them --uz-ink with white text, which is #F1F5F9 + white in dark (1.09:1). */
.uz-admin .btn--primary, .uz-admin .btn.btn--primary, .uz-admin .btn--base, .uz-admin .btn-primary { background: var(--uz-c-primary) !important; border-color: var(--uz-c-primary) !important; color: var(--uz-c-on-primary) !important; }
.uz-admin .btn--primary:hover, .uz-admin .btn.btn--primary:hover, .uz-admin .btn--base:hover, .uz-admin .btn-primary:hover { background: var(--uz-c-primary-hover) !important; border-color: var(--uz-c-primary-hover) !important; color: var(--uz-c-on-primary) !important; }
.uz-admin .btn--dark, .uz-admin .btn.btn--dark { background: var(--uz-c-ink) !important; border-color: var(--uz-c-ink) !important; color: var(--uz-c-page) !important; }
/* White blocks -> card / sunken / line tokens. */
.uz-admin .list-group-item { background-color: var(--uz-c-card) !important; border-color: var(--uz-c-line) !important; color: var(--uz-c-ink-2); }
.uz-admin .card-footer, .uz-admin .card-footer.bg-white { background-color: var(--uz-c-card) !important; border-top-color: var(--uz-c-line) !important; }
.uz-admin .bodywrapper__inner .bg-white, .uz-admin .bodywrapper__inner .bg--white, .uz-admin .modal-content { background-color: var(--uz-c-card) !important; color: var(--uz-c-ink-2); border-color: var(--uz-c-line) !important; }
.uz-admin .form-control.bg--white, .uz-admin input.bg--white { background-color: var(--uz-c-card) !important; color: var(--uz-c-ink) !important; border-color: var(--uz-c-line-strong) !important; }
.uz-admin .table--light, .uz-admin .table--light > :not(caption) > * > * { background-color: var(--uz-c-card) !important; color: var(--uz-c-ink-2); border-color: var(--uz-c-line) !important; }
.uz-admin .table--light thead th { background-color: var(--uz-c-sunken) !important; color: var(--uz-c-ink) !important; }
.uz-admin .nav-tabs { background-color: var(--uz-c-card) !important; border-color: var(--uz-c-line) !important; }
.uz-admin .nav-tabs .nav-link { color: var(--uz-c-ink-2) !important; background-color: transparent !important; border-color: transparent !important; }
.uz-admin .nav-tabs .nav-link.active { background-color: var(--uz-c-primary-soft) !important; color: var(--uz-c-primary) !important; border-color: var(--uz-c-line) !important; }
.uz-admin .frontend-section-card, .uz-admin .permission-item { background-color: var(--uz-c-card) !important; border-color: var(--uz-c-line) !important; color: var(--uz-c-ink-2); }
.uz-admin .alert-warning { background-color: var(--uz-c-warn-bg) !important; color: var(--uz-c-warn) !important; border-color: var(--uz-c-warn-dot, var(--uz-c-line)) !important; }
.uz-admin .alert-warning * { color: inherit; }
.uz-admin .nicEdit-panelContain, .uz-admin .nicEdit-panel, .uz-admin .nicEdit-selectContain, .uz-admin .nicEdit-selectTxt, .uz-admin .nicEdit-buttonContain div { background-color: var(--uz-c-sunken) !important; color: var(--uz-c-ink) !important; border-color: var(--uz-c-line) !important; }
.uz-admin .nicEdit-main, .uz-admin .nicEdit-main + div, .uz-admin div[contenteditable="true"] { background-color: var(--uz-c-card) !important; color: var(--uz-c-ink) !important; }
.uz-admin .select2-selection, .uz-admin .select2-dropdown { background-color: var(--uz-c-card) !important; border-color: var(--uz-c-line-strong) !important; color: var(--uz-c-ink) !important; }
.uz-admin .iziToast { background-color: var(--uz-c-card) !important; border-color: var(--uz-c-line) !important; }
.uz-admin .iziToast .iziToast-title, .uz-admin .iziToast .iziToast-message { color: var(--uz-c-ink) !important; }
/* Responsive table cards (app.css #e2e2e233 odd rows) turn grey over the dark card. */
.uz-admin[data-theme=dark] [class*="table-responsive--"] tbody tr:nth-child(odd) { background-color: var(--uz-c-sunken) !important; }
@media (prefers-color-scheme: dark) { .uz-admin[data-theme=auto] [class*="table-responsive--"] tbody tr:nth-child(odd) { background-color: var(--uz-c-sunken) !important; } }

/* v8 client: account cards, inputs, team pills. */
.uz-client .uzd-card { background-color: var(--uz-c-card) !important; border-color: var(--uz-c-line) !important; color: var(--uz-c-ink-2); }
.uz-client .uzd-card h3, .uz-client .uzd-card strong { color: var(--uz-c-ink) !important; }
.uz-client .uzd-meta { color: var(--uz-c-ink-2) !important; }
.uz-client .uzd-card .uz-input, .uz-client .uzd-card input:not([type=checkbox]):not([type=radio]), .uz-client .uzd-card select, .uz-client .uzd-card textarea, .uz-client .uz-input { background-color: var(--uz-c-card) !important; color: var(--uz-c-ink) !important; border-color: var(--uz-c-line-strong) !important; }
.uz-client .uzd-card .text-xs, .uz-client .uz-text-2 { color: var(--uz-c-ink-2) !important; }
.uz-ui .uz-pill { display: inline-flex; align-items: center; border: 1px solid transparent !important; }
.uz-client .uz-text-2 { color: var(--uz-c-ink-2) !important; }
.uz-client .uz-team-role { background-color: var(--uz-c-card) !important; border-color: var(--uz-c-line) !important; }
.uz-client .uzd-btn:not(.uzd-btn--ghost) { background-color: var(--uz-c-primary) !important; border-color: var(--uz-c-primary) !important; color: var(--uz-c-on-primary) !important; }
.uz-client .uzd-btn:not(.uzd-btn--ghost):hover { background-color: var(--uz-c-primary-hover) !important; }
.uz-client .uzd-btn--ghost { background-color: var(--uz-c-card) !important; color: var(--uz-c-ink) !important; border-color: var(--uz-c-line-strong) !important; }
.uz-client .uzd-btn--ghost:hover { background-color: var(--uz-c-sunken) !important; }
/* v8 admin: text on primary fills, state buttons/toggles, section-card headings, outline secondary. */
.uz-admin .bg--primary .text--white, .uz-admin .bg--primary.text--white, .uz-admin .bg--primary h6, .uz-admin .bg--primary span { color: var(--uz-c-on-primary) !important; }
.uz-admin .btn--success, .uz-admin .btn.btn--success { background-color: var(--uz-c-ok-bg) !important; color: var(--uz-c-ok) !important; border-color: var(--uz-c-ok) !important; }
.uz-admin .toggle-on.btn, .uz-admin .toggle-on { background-color: var(--uz-c-ok-bg) !important; color: var(--uz-c-ok) !important; }
.uz-admin .toggle-off.btn, .uz-admin .toggle-off { background-color: var(--uz-c-bad-bg) !important; color: var(--uz-c-bad) !important; }
.uz-admin .frontend-section-card h6, .uz-admin .frontend-section-card .title { color: var(--uz-c-ink) !important; }
.uz-admin .btn-outline--secondary { color: var(--uz-c-muted) !important; border-color: var(--uz-c-line-strong) !important; }
.uz-admin .btn-outline--secondary:hover { background-color: var(--uz-c-sunken) !important; color: var(--uz-c-ink) !important; }
.uz-admin .btn--danger, .uz-admin .btn.btn--danger { background-color: var(--uz-c-bad-bg) !important; color: var(--uz-c-bad) !important; border-color: var(--uz-c-bad) !important; }
.uz-admin h6 { color: var(--uz-c-ink); }
.uz-admin code { color: var(--uz-c-bad); }
.uz-admin .btn-outline-light { color: var(--uz-c-ink-2) !important; border-color: var(--uz-c-line-strong) !important; background-color: transparent !important; }
.uz-admin .btn-outline-light:hover { background-color: var(--uz-c-sunken) !important; color: var(--uz-c-ink) !important; }
.uz-admin .select2-container--default .select2-selection--single .select2-selection__rendered, .uz-admin .select2-results__option { color: var(--uz-c-ink) !important; }
/* Monokai editor (custom CSS, sitemap): comment and keyword/tag hues lifted to AA on #272822 (5.6:1 / 5.5:1). */
.uz-admin .cm-s-monokai span.cm-comment { color: #A59F85 !important; }
.uz-admin .cm-s-monokai span.cm-keyword, .uz-admin .cm-s-monokai span.cm-tag { color: #FF6B9A !important; }
/* v9: admin configure gear (app.css .configure-card-btn: 64px blue gradient) -> primary fill, FAB size token. */
.uz-admin .configure-card-btn { background: var(--uz-c-primary) !important; color: var(--uz-c-on-primary) !important; width: var(--uz-size-fab) !important; height: var(--uz-size-fab) !important; }
.uz-admin .configure-card-btn svg, .uz-admin .configure-card-btn i { color: var(--uz-c-on-primary) !important; fill: currentColor; }
/* v9: text inside primary-filled .bg--dark cards (system setup checklist) and its header follow on-primary. */
.uz-admin .card.bg--dark > .card-header { background: transparent !important; border-bottom-color: color-mix(in srgb, var(--uz-c-on-primary) 25%, transparent) !important; }
.uz-admin .bg--dark:not(.sidebar):not(.navbar-wrapper) :is(li, a, small, span, p, h1, h2, h3, h4, h5, h6, i, .text--white, .text--success, .text--danger) { color: var(--uz-c-on-primary) !important; }
/* v9: outline state buttons, notification channel cards, section sorter, notification list, inline help icons. */
.uz-admin .btn-outline-danger, .uz-admin .btn-outline--danger { color: var(--uz-c-bad) !important; border-color: var(--uz-c-bad) !important; background-color: transparent !important; }
.uz-admin .btn-outline-danger:hover, .uz-admin .btn-outline--danger:hover { background-color: var(--uz-c-bad-bg) !important; }
.uz-admin .btn-outline-warning, .uz-admin .btn-outline--warning { color: var(--uz-c-warn) !important; border-color: var(--uz-c-warn-dot) !important; background-color: transparent !important; }
.uz-admin .btn-outline-warning:hover, .uz-admin .btn-outline--warning:hover { background-color: var(--uz-c-warn-bg) !important; }
.uz-admin .notification-via { background-color: var(--uz-c-sunken) !important; color: var(--uz-c-ink) !important; border: 1px solid var(--uz-c-line) !important; }
.uz-admin .notification-via * { color: inherit !important; }
.uz-admin .notification-via.active { background-color: var(--uz-c-primary-soft) !important; color: var(--uz-c-primary) !important; border-color: var(--uz-c-primary) !important; }
.uz-admin li.highlight, .uz-admin .highlight.icon-move { background-color: var(--uz-c-card) !important; border-color: var(--uz-c-line) !important; color: var(--uz-c-ink-2) !important; }
.uz-admin li.highlight * { color: inherit; }
.uz-admin .notify__item { background-color: var(--uz-c-card) !important; border-color: var(--uz-c-line) !important; }
.uz-admin .notify__item:hover { background-color: var(--uz-c-sunken) !important; }
.uz-admin .notify__item .title { color: var(--uz-c-ink) !important; }
.uz-admin .notify__item .date, .uz-admin .notify__item .date * { color: var(--uz-c-primary) !important; }
.uz-admin .form-group small > i, .uz-admin .text-primary:not(.bg-primary) { color: var(--uz-c-primary) !important; }
/* v10: vendor gradient fills (.btn--gradi, app.css L2962) and coloured glows (.btn--shadow) override the token fills; flat buttons only. */
.uz-admin .btn--gradi, .uz-admin .btn--gradi:hover { background-image: none !important; }
.uz-admin .btn--shadow, .uz-admin .btn--shadow:hover, .uz-admin .btn--shadow:focus { box-shadow: none !important; }
/* v11: interaction states. Secondary / outline buttons keep token text on token tints for hover, focus and active (app.css paints white text on hover). */
.uz-admin .btn--secondary:hover, .uz-admin .btn--secondary:focus, .uz-admin .btn--secondary:active,
.uz-admin .btn-outline--secondary:hover, .uz-admin .btn-outline--secondary:focus, .uz-admin .btn-outline--secondary:active,
.uz-admin .btn-outline--dark:hover, .uz-admin .btn-outline--dark:focus, .uz-admin .btn-outline--dark:active,
.uz-admin .btn-outline-light:hover, .uz-admin .btn-outline-light:focus, .uz-admin .btn-outline-light:active { background-color: var(--uz-c-sunken) !important; color: var(--uz-c-ink) !important; border-color: var(--uz-c-line-strong) !important; }
.uz-admin :is(.btn-outline--primary, .btn-outline-primary, .btn-outline--info, .btn-outline-info, .btn-outline--base):is(:hover, :focus, :active) { background-color: var(--uz-c-primary-soft) !important; color: var(--uz-c-primary) !important; border-color: var(--uz-c-primary) !important; }
.uz-admin :is(.btn-outline--success, .btn-outline-success):is(:hover, :focus, :active) { background-color: var(--uz-c-ok-bg) !important; color: var(--uz-c-ok) !important; border-color: var(--uz-c-ok) !important; }
.uz-admin :is(.btn-outline--danger, .btn-outline-danger):is(:hover, :focus, :active) { background-color: var(--uz-c-bad-bg) !important; color: var(--uz-c-bad) !important; border-color: var(--uz-c-bad) !important; }
.uz-admin :is(.btn-outline--warning, .btn-outline-warning):is(:hover, :focus, :active) { background-color: var(--uz-c-warn-bg) !important; color: var(--uz-c-warn) !important; border-color: var(--uz-c-warn-dot) !important; }
.uz-admin [class*="btn-outline"]:is(:hover, :focus, :active) i { color: inherit !important; }
/* Admin theme switch: muted label on the sunken hover tint was 4.41:1. */
.uz-admin .navbar__action-list .uz-theme-switch__opt:not([aria-checked="true"]):hover { color: var(--uz-c-ink) !important; background: var(--uz-c-sunken) !important; }
/* One visible keyboard focus ring for every interactive control (vendor CSS and the v10 glow removal left none). */
body.uz-ui :is(a, button, .btn, [role="button"], input[type="submit"], input[type="button"], .nav-link, .page-link, .dropdown-item, .uz-theme-switch__opt):focus-visible { outline: 2px solid var(--uz-c-primary) !important; outline-offset: 2px !important; }
/* app.css `.btn.btn-outline-light:hover:hover { color:#000 !important }` (0,4,0) needs a matching chain. */
.uz-admin .btn.btn-outline-light:is(:hover, :focus, :active):hover, .uz-admin .btn.btn-outline-light:is(:hover, :focus, :active) { color: var(--uz-c-ink) !important; background-color: var(--uz-c-sunken) !important; }
/* v12: the focus ring also covers form fields, select2 selections and keyboard-scrollable regions ([tabindex]).
   Fields drop their old focus glow so they are not double-ringed. Sidebar links sit in an overflow:hidden column, so the ring goes inside. */
body.uz-ui :is(input:not([type="hidden"]), select, textarea, .select2-selection, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--uz-c-primary) !important; outline-offset: 2px !important; }
body.uz-ui :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea, .select2-selection):focus-visible { box-shadow: none !important; outline-offset: 0 !important; }
body.uz-ui .select2-container--focus .select2-selection, body.uz-ui .select2-container--open .select2-selection { outline: 2px solid var(--uz-c-primary) !important; outline-offset: 0 !important; }
body.uz-ui.uz-admin .sidebar :is(a, button):focus-visible, body.uz-ui.uz-admin .sidebar__menu :is(a, button):focus-visible { outline-offset: -2px !important; }
/* v12: Tailwind dark-grey hover text (legal bar, nav, history pages, cost guardian) is near-black on the dark page; follow the ink token. */
body.uz-client :is(.hover\:text-gray-900, .hover\:text-gray-800, .hover\:text-gray-700, .hover\:text-black):is(:hover, :active, :focus-visible) { color: var(--uz-c-ink) !important; }
/* v13: focus rings inside clipping (overflow) containers are drawn inset so no side is cut off:
   admin table action buttons, grok tabs, setup-checklist links and widget cards, client overflow-x tables, the code editors,
   and scrollable regions that sit flush in an overflow:hidden card. */
body.uz-ui.uz-admin :is([class*="table-responsive"], .uz-adm-tabs, .widget-two, .text-dot, .ul-border) :is(a, button, .btn, .nav-link, input, select, textarea, [tabindex]):focus-visible,
body.uz-ui :is(.overflow-x-auto, .overflow-auto, .overflow-hidden, .CodeMirror) :is(a, button, .btn, .uz-btn, input, select, textarea):focus-visible,
body.uz-ui.uz-ui :is(.uz-dash-table-wrap, .uz-table-wrap, [class*="table-responsive"]):focus-visible { outline-offset: -2px !important; }
/* v13: phone field. The wrapper clips, so the ring moves to the wrapper (:focus-within, token ring) and the inner input draws none.
   The country-code chip uses sunken / ink-2 / line tokens in both themes. */
.uz-ui .uz-field-group { border-color: var(--uz-c-line-strong) !important; background-color: var(--uz-c-card); }
.uz-ui .uz-field-group:focus-within { outline: 2px solid var(--uz-c-primary); outline-offset: 2px; border-color: var(--uz-c-primary) !important; }
body.uz-ui.uz-ui.uz-ui .uz-field-group :is(input, select):focus-visible { outline: none !important; box-shadow: none !important; }
.uz-ui .uz-field-group__chip { background-color: var(--uz-c-sunken) !important; color: var(--uz-c-ink-2) !important; border-color: var(--uz-c-line) !important; }
/* v13: setup-checklist items truncated long link text inside overflow:hidden rows; let them wrap so text and ring both show. */
.uz-admin .ul-border .text-dot, .uz-admin .ul-border .text-dot a { overflow: visible !important; white-space: normal !important; text-overflow: clip !important; }
/* v13: code editors. CodeMirror focuses a 3px hidden textarea; ring the editor box instead. */
body.uz-ui.uz-ui.uz-ui .CodeMirror textarea:focus-visible { outline: none !important; }
.uz-ui .CodeMirror.CodeMirror-focused, .uz-ui .CodeMirror:focus-within { outline: 2px solid var(--uz-c-primary); outline-offset: -2px; }
/* v13: page body clips (overflow hidden); header actions sit flush with its edge, so inset their ring. */
body.uz-ui.uz-ui.uz-admin .uz-page-header__actions :is(a, button, .btn):focus-visible { outline-offset: -2px !important; }