/* ─────────────────────────────────────────────────────────────────────────
   Cascade layers — read this before adding a rule.

   legacy     every stylesheet the admin had before 2026-10-01 (this file's
              original rules, the page files like schedule.css, and the blocks
              that used to sit in <style> tags inside views).
   utilities  the classes that replaced inline style="" attributes: `ui-*`
              components, then one-property `u-*` utilities.

   A later layer beats an earlier one regardless of selector specificity, so
   a `u-*` class wins over any legacy rule exactly the way the inline style it
   replaced did. Inline styles that JavaScript sets at runtime still beat both.
   New feature styles belong in `legacy` (i.e. ordinary rules); reach for a
   `u-*` utility only where you would otherwise write style="".
   ─────────────────────────────────────────────────────────────────────── */
@layer legacy, utilities;

@layer legacy {
    /* ─────────────────────────────────────────────────────────────────────────
       CareScheduler360 — Global stylesheet
       Design tokens taken from Figma "IDEAL CARE — ADMIN UI"
       ─────────────────────────────────────────────────────────────────────── */
    :root {
        /* Brand defaults (Tenant::BRAND_DEFAULTS — the first client's website
           palette, 2026-10-07). The tenant layout overrides all of these per
           agency, the four tints via App\Support\BrandTints; these values
           only show on pages outside an agency (sign-in, platform console). */
        --c-primary:        #0E2E46;
        --c-primary-dark:   #071824;
        --c-primary-light:  #E7F1F8;
        --c-primary-border: #C2D9EB;
        --c-primary-text:   #0E2E46;

        --c-brand-blue:     #6A8598;
        --c-brand-blue-dk:  #4F6B80;
        --c-primary-rgb:    14, 46, 70;
        --c-hover:          #8DB1CB;
        --c-hover-rgb:      141, 177, 203;
        --c-hover-text:     #0E2E46;
        --c-selected:       #6A8598;
        --c-selected-rgb:   106, 133, 152;
        --c-selected-text:  #FFFFFF;

        /* "It worked" stays green whatever the agency's brand colour is —
           and so does every STATUS that means on / active / in progress
           (2026-10-13). Statuses used to borrow --c-primary back when the
           default brand was green; under a navy brand "Active" read navy.
           The brand colour is for selection and navigation, never status. */
        --c-success:        #16A34A;
        --c-success-rgb:    22, 163, 74;
        --c-success-bg:     #DCFCE7;
        --c-success-text:   #166534;

        --c-text:           #0E2E46;
        --c-text-soft:      #374151;
        --c-muted:          #6B7280;
        --c-muted-light:    #9CA3AF;
        --c-border:         #E5E7EB;
        --c-border-soft:    #F3F4F6;
        --c-bg:             #F9FAFB;
        --c-card:           #FFFFFF;

        --c-danger:         #DC2626;
        --c-danger-bg:      #FEE2E2;
        --c-warning:        #F59E0B;
        --c-warning-bg:     #FEF3C7;
        --c-info:           #3B82F6;
        --c-info-bg:        #DBEAFE;

        --radius-sm: 6px;
        --radius:    8px;
        --radius-lg: 12px;
        --radius-xl: 16px;

        --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
        --shadow:    0 4px 12px rgba(15,23,42,.06);
        --shadow-lg: 0 12px 28px rgba(15,23,42,.10);

        --sidebar-w:   240px;
        --topbar-h:    64px;
        --container:   1440px;

        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    *, *::before, *::after { box-sizing: border-box; }

    /* Form controls do not inherit the page font — browsers give them their own
       UI font. It shows up worst on input[type="date"], which Chrome renders in a
       near-monospace face, so a date field looks nothing like the Inter text
       beside it. Most components already opt in with `font-family: inherit`
       one by one; making it the default means a new control cannot forget.
       Kept at the lowest possible specificity so anything deliberately different
       (e.g. the monospace hex field in .color-input) still wins, and `button` is
       left out because .btn already sets `font: inherit`. */
    input, select, textarea, optgroup { font-family: inherit; }

    html, body {
        margin: 0;
        padding: 0;
        font-family: inherit;
        font-size: 14px;
        line-height: 1.5;
        color: var(--c-text);
        background: var(--c-bg);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    h1, h2, h3, h4, h5, h6 {
        margin: 0;
        font-weight: 700;
        color: var(--c-text);
        line-height: 1.25;
    }

    a { color: var(--c-primary); text-decoration: none; }
    a:hover { color: var(--c-primary-dark); }

    /* ──────────────────────────────────────────────────────────────────
       LOGIN PAGE (Figma node 5:62)
       ────────────────────────────────────────────────────────────────── */
    .auth-page {
        min-height: 100vh;
        width: 100%;
        background:
            linear-gradient(135deg, rgba(30,58,138,.78) 0%, rgba(30,64,175,.72) 100%),
            url('../images/auth/login-bg.png') center / cover no-repeat;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        overflow: hidden;
    }

    /* Decorative icons over background (matching Figma) */
    .auth-page::before,
    .auth-page::after {
        content: '';
        position: absolute;
        top: 0; right: 0;
        width: 50%; height: 100%;
        pointer-events: none;
        background-repeat: no-repeat;
        opacity: .12;
    }
    .auth-page::before {
        background-image:
            /* dots pattern top right */
            radial-gradient(circle at 10px 10px, #ffffff 1.5px, transparent 1.6px);
        background-size: 20px 20px;
        background-position: 90% 6%;
        background-repeat: repeat;
        width: 220px; height: 140px;
        top: 50px; right: 80px;
    }
    .auth-deco {
        position: absolute;
        pointer-events: none;
        color: rgba(255,255,255,.18);
    }
    .auth-deco-calendar { top: 80px;  right: 290px; }
    .auth-deco-clock    { top: 200px; right: 130px; }
    .auth-deco-clip     { top: 310px; right: 240px; }
    .auth-deco-people   { top: 430px; right: 110px; }
    .auth-deco-wave     { position: absolute; left: 0; bottom: 0; width: 100%; }

    .auth-card {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 384px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 20px 50px rgba(0,0,0,.25);
        padding: 33px;
    }

    .auth-logo {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-bottom: 26px;
    }
    .auth-logo .logo-circle {
        width: 64px; height: 64px;
        border-radius: 50%;
        background: #DBEAFE;
        display: flex; align-items: center; justify-content: center;
        color: var(--c-brand-blue);
    }
    .auth-logo h1 {
        font-size: 20px;
        font-weight: 700;
        color: var(--c-text);
    }
    .auth-subtitle {
        font-size: 14px;
        color: var(--c-muted);
        text-align: center;
        margin: 0;
    }

    .auth-form .form-group { margin-bottom: 16px; }
    .auth-form label {
        display: block;
        font-size: 14px;
        font-weight: 500;
        color: var(--c-text);
        margin-bottom: 6px;
    }

    .input-wrap { position: relative; }
    .form-control {
        width: 100%;
        height: 42px;
        padding: 0 13px;
        border: 1px solid var(--c-border);
        border-radius: var(--radius);
        font: inherit;
        font-size: 14px;
        color: var(--c-text);
        background: #fff;
        transition: border-color .15s, box-shadow .15s;
        outline: none;
    }
    .form-control::placeholder { color: var(--c-muted-light); }
    .form-control:focus {
        border-color: var(--c-primary);
        box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), .12);
    }
    .form-control.has-trailing { padding-right: 38px; }

    .toggle-pwd {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: 0;
        color: var(--c-muted);
        cursor: pointer;
        padding: 2px;
        display: flex;
        align-items: center;
    }
    .toggle-pwd:hover { color: var(--c-text); }
    .toggle-pwd:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: 4px; }

    .form-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 4px 0 20px;
        font-size: 14px;
    }
    .form-row .remember {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--c-text-soft);
        cursor: pointer;
    }
    .form-row .remember input {
        width: 16px; height: 16px;
        accent-color: var(--c-primary);
        margin: 0;
    }
    .form-row .link {
        color: var(--c-primary);
        font-weight: 500;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 0;
        border-radius: var(--radius);
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        padding: 0 18px;
        height: 40px;
        cursor: pointer;
        transition: background .15s, transform .05s;
        text-decoration: none;
        white-space: nowrap;
    }
    .btn-primary {
        background: var(--c-primary);
        color: #fff;
        width: 100%;
        transition: background .2s ease;
    }
    .btn-primary:hover  {
        background: var(--c-hover);
        color: var(--c-hover-text);
    }
    .btn-primary:active {
        background: var(--c-selected);
        color: var(--c-selected-text);
        transform: translateY(1px);
    }
    .btn-secondary {
        background: #fff;
        color: var(--c-text);
        border: 1px solid var(--c-border);
    }
    .btn-secondary:hover { background: var(--c-border-soft); }
    .btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }

    .alert {
        padding: 10px 14px;
        border-radius: var(--radius);
        font-size: 13px;
        margin-bottom: 14px;
    }
    .alert-danger { background: var(--c-danger-bg); color: var(--c-danger); }
    .alert-success { background: var(--c-success-bg); color: var(--c-success-text); }
    .alert-info { background: var(--c-info-bg); color: var(--c-info); }

    /* ──────────────────────────────────────────────────────────────────
       APP SHELL — Sidebar + Topbar (Figma node 6:114)
       ────────────────────────────────────────────────────────────────── */
    .app {
        min-height: 100vh;
        display: flex;
        background: var(--c-bg);
    }

    .sidebar {
        width: var(--sidebar-w);
        background: #fff;
        border-right: 1px solid var(--c-border);
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0; left: 0; bottom: 0;
        z-index: 30;
        transition: transform .2s;
    }
    .sidebar-brand {
        height: var(--topbar-h);
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 20px;
        border-bottom: 1px solid var(--c-border);
    }
    .sidebar-brand .brand-mark {
        width: 32px; height: 32px;
        border-radius: 50%;
        background: #DBEAFE;
        display: flex; align-items: center; justify-content: center;
        color: var(--c-brand-blue);
        flex-shrink: 0;
    }
    .sidebar-brand .brand-text {
        font-size: 15px;
        font-weight: 700;
        color: var(--c-brand-blue);
        line-height: 1.2;
    }
    .sidebar-brand .sidebar-logo {
        max-width: 150px;
        max-height: 44px;
        width: auto;
        height: auto;
        object-fit: contain;
        object-position: left center;
    }
    .sidebar-brand .sidebar-logo-text {
        font-size: 14px;
        font-weight: 700;
        color: var(--c-brand-blue);
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-word;
    }

    @media (max-width: 768px) {
        .sidebar-brand .sidebar-logo {
            max-width: 120px;
            max-height: 40px;
        }
        .sidebar-brand .sidebar-logo-text {
            font-size: 13px;
        }
    }

    @media (max-width: 480px) {
        .sidebar-brand .sidebar-logo {
            max-width: 100px;
            max-height: 36px;
        }
        .sidebar-brand .sidebar-logo-text {
            font-size: 12px;
        }
    }

    .sidebar-nav {
        padding: 18px 12px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        overflow-y: auto;
        flex: 1;
    }
    .nav-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: var(--radius);
        color: var(--c-text-soft);
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        transition: background .12s, color .12s;
    }
    .nav-item:hover {
        background: #f3f4f6;
        color: var(--c-text);
    }
    .nav-item:hover svg { color: var(--c-text); }
    .nav-item.active {
        background: rgba(var(--c-primary-rgb), .12);
        color: var(--c-primary);
        font-weight: 600;
    }
    .nav-item.active svg { color: var(--c-primary); }
    .nav-item svg {
        width: 18px; height: 18px;
        color: var(--c-muted);
        flex-shrink: 0;
    }

    .main {
        flex: 1;
        margin-left: var(--sidebar-w);
        min-width: 0;
    }

    .topbar {
        height: var(--topbar-h);
        background: #fff;
        border-bottom: 1px solid var(--c-border);
        padding: 0 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 20;
    }
    .topbar h1 {
        font-size: 18px;
        font-weight: 700;
        color: var(--c-text);
    }
    .topbar-actions {
        display: flex;
        align-items: center;
        gap: 18px;
    }
    .icon-btn {
        width: 36px; height: 36px;
        border-radius: 50%;
        background: transparent;
        border: 0;
        color: var(--c-muted);
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        position: relative;
        transition: background .12s;
    }
    .icon-btn:hover { background: var(--c-border-soft); color: var(--c-text); }
    .icon-btn .dot {
        position: absolute;
        top: 8px; right: 8px;
        width: 8px; height: 8px;
        background: var(--c-danger);
        border: 2px solid #fff;
        border-radius: 50%;
    }

    .user-menu {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 4px 12px 4px 4px;
        border-radius: 50px;
        cursor: pointer;
        background: transparent;
        border: 0;
        color: var(--c-text);
        font: inherit;
    }
    .user-menu:hover { background: var(--c-border-soft); }
    .user-menu .avatar {
        width: 36px; height: 36px;
        border-radius: 50%;
        background: rgba(var(--c-primary-rgb), 0.12);
        color: var(--c-primary);
        display: flex; align-items: center; justify-content: center;
        font-weight: 700;
        font-size: 13px;
        overflow: hidden;
        flex-shrink: 0;
    }
    .user-menu .avatar img { width: 100%; height: 100%; object-fit: cover; }
    .user-menu .user-meta { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
    .user-menu .user-name { font-size: 14px; font-weight: 600; }
    .user-menu .user-franchise { font-size: 11px; font-weight: 500; color: var(--c-muted); }
    .user-menu .caret { color: var(--c-muted); }

    .dropdown-location {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 6px 12px 8px;
        font-size: 12px;
        font-weight: 600;
        color: var(--c-muted);
        text-transform: uppercase;
        letter-spacing: .3px;
    }
    .dropdown-location svg { flex-shrink: 0; color: var(--c-primary); }

    .dropdown {
        position: absolute;
        top: 100%;
        right: 0;
        margin-top: 8px;
        background: #fff;
        border: 1px solid var(--c-border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-lg);
        min-width: 180px;
        padding: 6px;
        display: none;
        z-index: 100;
    }
    .dropdown.open { display: block; }
    .dropdown a, .dropdown button {
        display: block;
        width: 100%;
        text-align: left;
        padding: 8px 12px;
        border-radius: var(--radius-sm);
        color: var(--c-text);
        font-size: 14px;
        text-decoration: none;
        background: none;
        border: 0;
        cursor: pointer;
        font: inherit;
    }
    .dropdown a:hover, .dropdown button:hover { background: var(--c-border-soft); }
    .dropdown hr { border: 0; border-top: 1px solid var(--c-border); margin: 4px 0; }

    .content {
        padding: 28px 32px 40px;
        max-width: 100%;
    }

    .page-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
    }
    .page-head h2 {
        font-size: 22px;
        font-weight: 700;
    }

    /* ──────────────────────────────────────────────────────────────────
       DASHBOARD CARDS  (KPI / panels)
       ────────────────────────────────────────────────────────────────── */
    .kpi-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
        margin-bottom: 24px;
    }

    /* Chart.js needs a constrained, position:relative parent — without a
       fixed height the canvas + parent feed each other and grow forever. */
    .chart-box {
        position: relative;
        width: 100%;
        height: 220px;
    }
    .chart-box > canvas { max-width: 100%; }
    .kpi-card {
        display: block;
        background: #fff;
        border: 1px solid var(--c-border);
        border-radius: var(--radius-lg);
        padding: 20px 22px;
        text-decoration: none;
        color: inherit;
        transition: transform .15s, box-shadow .15s;
    }
    /* Only cards that link somewhere show the hover affordance — a static card
       (Hours Today) hovering like a button would be misleading. */
    a.kpi-card:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow);
    }
    .kpi-label {
        font-size: 13px;
        color: var(--c-muted);
        margin-bottom: 10px;
        font-weight: 500;
    }
    .kpi-value-row {
        display: flex;
        align-items: baseline;
        gap: 10px;
    }
    .kpi-value {
        font-size: 30px;
        font-weight: 800;
        color: var(--c-text);
        letter-spacing: -.5px;
        line-height: 1;
    }
    .kpi-delta {
        font-size: 13px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 2px;
    }
    .kpi-delta.up   { color: var(--c-primary); }
    .kpi-delta.down { color: var(--c-danger); }

    /* ──────────────────────────────────────────────────────────────────
       COUNTER TILES  ("Timesheets style", used app-wide)
       Icon badge on the right, colored per status (not grey), label above
       value on the left. Every page supplies its own accent/icon colors via
       the --ctr-accent / --ctr-icon-bg / --ctr-icon-fg custom properties
       (inline style="--ctr-accent:#16A34A;..."), since the palette differs
       per tile/status — this block is layout only. Column count is a
       modifier class (not inline grid-template-columns) so the responsive
       breakpoints below can actually override it.
       ────────────────────────────────────────────────────────────────── */
    .ctr-tiles {
        display: grid;
        gap: 16px;
        margin-bottom: 22px;
    }
    .ctr-tiles-3 { grid-template-columns: repeat(3, 1fr); }
    .ctr-tiles-4 { grid-template-columns: repeat(4, 1fr); }
    .ctr-tiles-5 { grid-template-columns: repeat(5, 1fr); }
    .ctr-tiles-6 { grid-template-columns: repeat(6, 1fr); }
    .ctr-tile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        background: #fff;
        border: 1px solid var(--c-border);
        border-left-width: 4px;
        border-left-color: var(--ctr-accent, var(--c-border));
        border-radius: 12px;
        padding: 16px 18px;
        text-decoration: none;
        color: inherit;
        transition: box-shadow .12s, transform .12s;
    }
    a.ctr-tile { cursor: pointer; }
    a.ctr-tile:hover { box-shadow: 0 4px 12px rgba(0,0,0,.06); transform: translateY(-1px); }
    a.ctr-tile.active, a.ctr-tile.is-active { box-shadow: 0 0 0 2px var(--c-primary); }
    .ctr-tile-label {
        font-size: 13px;
        color: var(--c-muted);
        margin-bottom: 6px;
    }
    .ctr-tile-value {
        font-size: 26px;
        font-weight: 700;
        line-height: 1;
        color: var(--c-text);
    }
    .ctr-tile-delta { font-size: 12px; font-weight: 600; margin-left: 6px; }
    .ctr-tile-delta.up   { color: var(--c-primary); }
    .ctr-tile-delta.down { color: var(--c-danger); }
    .ctr-tile-icon {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: var(--ctr-icon-bg, #F3F4F6);
        color: var(--ctr-icon-fg, #6B7280);
    }
    .ctr-tile-icon svg { width: 21px; height: 21px; }
    @media (max-width: 900px) {
        .ctr-tiles-3, .ctr-tiles-4, .ctr-tiles-5, .ctr-tiles-6 { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 560px) {
        .ctr-tiles-3, .ctr-tiles-4, .ctr-tiles-5, .ctr-tiles-6 { grid-template-columns: 1fr; }
    }

    .grid-2-1 {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 18px;
        margin-bottom: 24px;
    }

    .card {
        background: #fff;
        border: 1px solid var(--c-border);
        border-radius: var(--radius-lg);
        padding: 22px;
    }
    .card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }
    .card-head h3 {
        font-size: 15px;
        font-weight: 700;
    }
    .card-head .link {
        font-size: 13px;
        font-weight: 600;
    }

    /* Standalone text link — used in dashboard and other tenant pages */
    .link {
        color: var(--c-primary);
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        transition: opacity .12s;
    }
    .link:hover { opacity: .75; }

    /* Tenant tile (Who's Working / Recent Tenants etc.) */
    .tile-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px;
        margin-bottom: 24px;
    }
    .tile {
        background: #fff;
        border: 1px solid var(--c-border);
        border-radius: var(--radius-lg);
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        transition: box-shadow .15s, transform .15s;
    }
    .tile:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
    .tile-head { display: flex; align-items: center; gap: 10px; }
    .tile-head .avatar {
        width: 38px; height: 38px;
        border-radius: 50%;
        background: rgba(var(--c-primary-rgb), 0.12);
        color: var(--c-primary);
        display: flex; align-items: center; justify-content: center;
        font-weight: 700;
        font-size: 13px;
        flex-shrink: 0;
    }
    .tile-name {
        font-size: 13px;
        font-weight: 600;
        color: var(--c-text);
        line-height: 1.25;
    }
    .tile-sub {
        font-size: 12px;
        color: var(--c-muted);
    }
    .tile-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        color: var(--c-muted);
    }

    /* Tables */
    .table-wrap { overflow-x: auto; }
    table.data {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }
    table.data th {
        text-align: left;
        padding: 12px 14px;
        color: var(--c-muted);
        font-weight: 600;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .03em;
        border-bottom: 1px solid var(--c-border);
        background: #fff;
    }
    table.data td {
        padding: 14px;
        border-bottom: 1px solid var(--c-border-soft);
        color: var(--c-text);
        vertical-align: middle;
    }
    table.data tr:last-child td { border-bottom: 0; }
    table.data tr:hover td { background: var(--c-border-soft); }

    /* Badges */
    .badge {
        display: inline-flex;
        align-items: center;
        padding: 3px 10px;
        border-radius: 50px;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
    }
    .badge-success { background: var(--c-success-bg); color: var(--c-success-text); }
    .badge-warning { background: var(--c-warning-bg);    color: #92400E; }
    .badge-danger  { background: var(--c-danger-bg);     color: #991B1B; }
    .badge-info    { background: var(--c-info-bg);       color: #1E40AF; }
    .badge-muted   { background: var(--c-border-soft);   color: var(--c-muted); }

    .badge.plan-trial      { background: var(--c-info-bg);       color: #1E40AF; }
    .badge.plan-basic      { background: rgba(var(--c-primary-rgb), 0.1); color: var(--c-primary); }
    .badge.plan-pro        { background: #FCE7F3;                color: #9D174D; }
    .badge.plan-enterprise { background: var(--c-warning-bg);    color: #92400E; }

    /* Status dot */
    .dot-status {
        width: 8px; height: 8px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 6px;
        vertical-align: middle;
    }
    .dot-status.green  { background: var(--c-success); }
    .dot-status.amber  { background: var(--c-warning); }
    .dot-status.red    { background: var(--c-danger); }
    .dot-status.blue   { background: var(--c-info); }

    /* Activity / alert items */
    .activity { display: flex; flex-direction: column; gap: 14px; }
    .activity-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }
    .activity-item .pill {
        width: 28px; height: 28px;
        border-radius: 50%;
        background: rgba(var(--c-primary-rgb), 0.1);
        color: var(--c-primary);
        display: flex; align-items: center; justify-content: center;
        font-size: 12px;
        flex-shrink: 0;
    }
    .activity-item .body { font-size: 13px; color: var(--c-text); line-height: 1.4; }
    .activity-item .body strong { font-weight: 600; }
    .activity-item .body small { display: block; color: var(--c-muted); margin-top: 2px; font-size: 11px; }

    .alerts { display: flex; flex-direction: column; gap: 10px; }
    .alert-tile {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 14px;
        border-radius: var(--radius);
        font-size: 13px;
    }
    .alert-tile.danger  { background: var(--c-danger-bg);  color: #991B1B; }
    .alert-tile.warning { background: var(--c-warning-bg); color: #92400E; }
    .alert-tile.info    { background: var(--c-info-bg);    color: #1E40AF; }
    .alert-tile .meta {
        margin-top: 2px;
        font-size: 11px;
        opacity: .75;
    }

    /* Mobile hamburger */
    .menu-btn {
        display: none;
        background: transparent;
        border: 0;
        cursor: pointer;
        color: var(--c-text);
        margin-right: 12px;
    }

    /* ──────────────────────────────────────────────────────────────────
       THEME-AWARE INTERACTIVE STATES
       ────────────────────────────────────────────────────────────────── */
    /* Table rows and interactive containers use theme colors */
    table tbody tr {
        transition: background .2s ease;
    }
    table tbody tr:hover {
        background: rgba(var(--c-primary), .05);
    }

    /* Form controls use theme colors */
    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    input[type="number"]:focus,
    textarea:focus,
    select:focus {
        border-color: var(--c-primary);
        box-shadow: 0 0 0 3px rgba(var(--c-primary), .1);
    }

    /* Toggle switches (checkboxes/radio) */
    input[type="checkbox"]:checked,
    input[type="radio"]:checked {
        background: var(--c-primary);
        border-color: var(--c-primary);
    }

    /* Filter tab active state */
    .filter-tabs a.active,
    .filter-tabs button.active {
        color: var(--c-primary);
        border-bottom-color: var(--c-primary);
    }

    /* Modal and dialog elements */
    .modal-overlay {
        background: rgba(0, 0, 0, .35);
    }

    /* Rate pin hover states (already theme-aware) */
    .rate-pin:hover .rate-pin-dot {
        box-shadow: 0 0 0 4px rgba(var(--c-primary), .15);
    }

    .rate-pin.is-on .rate-pin-dot {
        background: var(--c-primary);
    }

    /* ──────────────────────────────────────────────────────────────────
       RESPONSIVE
       ────────────────────────────────────────────────────────────────── */
    @media (max-width: 1100px) {
        .kpi-grid { grid-template-columns: repeat(2, 1fr); }
        .grid-2-1 { grid-template-columns: 1fr; }
    }
    @media (max-width: 800px) {
        .sidebar { transform: translateX(-100%); }
        .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
        .main { margin-left: 0; }
        .menu-btn { display: inline-flex; }
        .content { padding: 18px; }
        .topbar { padding: 0 18px; }
        .user-menu .user-meta { display: none; }
    }
    @media (max-width: 480px) {
        .kpi-grid { grid-template-columns: 1fr; }
        .auth-card { padding: 24px; }
    }

    .sidebar-backdrop {
        display: none;
        position: fixed; inset: 0;
        background: rgba(0,0,0,.4);
        z-index: 25;
    }
    .sidebar-backdrop.open { display: block; }

    /* ──────────────────────────────────────────────────────────────────
       FORMS  (create/edit pages)
       ────────────────────────────────────────────────────────────────── */
    .form-section {
        background: #fff;
        border: 1px solid var(--c-border);
        border-radius: var(--radius-lg);
        padding: 24px;
        margin-bottom: 18px;
    }
    .form-section h3 {
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 4px;
    }
    .form-section .section-desc {
        font-size: 13px;
        color: var(--c-muted);
        margin-bottom: 18px;
    }
    .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .form-grid .full { grid-column: 1 / -1; }
    .req { color: var(--c-danger); margin-left: 2px; }
    .form-help {
        margin-top: 4px;
        font-size: 12px;
        color: var(--c-muted);
    }
    .invalid-feedback {
        color: var(--c-danger);
        font-size: 12px;
        margin-top: 4px;
    }
    .form-control.is-invalid {
        border-color: var(--c-danger);
        background: #FEF2F2;
    }

    .form-control[type="select"],
    select.form-control {
        appearance: none;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round'><polyline points='2,2 6,6 10,2'/></svg>");
        background-repeat: no-repeat;
        background-position: right 14px center;
        padding-right: 36px;
    }
    textarea.form-control {
        height: auto;
        min-height: 80px;
        padding: 10px 13px;
        resize: vertical;
    }

    .form-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        padding-top: 8px;
    }
    .btn[disabled] { opacity: .55; cursor: not-allowed; }
    .btn-danger {
        background: var(--c-danger);
        color: #fff;
        border: 0;
    }
    .btn-danger:hover { background: #B91C1C; color: #fff; }
    .btn-ghost-danger {
        background: transparent;
        color: var(--c-danger);
        border: 1px solid #FECACA;
    }
    .btn-ghost-danger:hover { background: var(--c-danger-bg); }

    /* Radio-style segmented control for "access mode" */
    .segmented {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .segmented label {
        display: block;
        cursor: pointer;
        border: 1px solid var(--c-border);
        border-radius: var(--radius);
        padding: 12px 14px;
        transition: all .15s;
        background: #fff;
    }
    .segmented label:hover { border-color: var(--c-primary); }
    .segmented input { position: absolute; opacity: 0; pointer-events: none; }
    .segmented label:has(input:checked) {
        border-color: var(--c-primary);
        background: var(--c-primary-light);
        box-shadow: 0 0 0 3px rgba(22,163,74,.10);
    }
    .segmented .seg-label { font-weight: 600; font-size: 13px; color: var(--c-text); display: block; }
    .segmented .seg-desc  { font-size: 12px; color: var(--c-muted); display: block; margin-top: 2px; }

    /* ──────────────────────────────────────────────────────────────────
       FILTER TABS  (Tenants index header)
       ────────────────────────────────────────────────────────────────── */
    .filter-tabs {
        display: flex;
        gap: 4px;
        border-bottom: 1px solid var(--c-border);
        margin-bottom: 16px;
        flex-wrap: wrap;
    }
    .filter-tab {
        padding: 10px 16px;
        border: 0;
        background: none;
        color: var(--c-muted);
        font: inherit;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .filter-tab:hover { color: var(--c-text); }
    .filter-tab.active {
        color: var(--c-primary);
        border-bottom-color: var(--c-primary);
        font-weight: 600;
    }
    .filter-tab .count {
        background: var(--c-border-soft);
        color: var(--c-muted);
        border-radius: 50px;
        padding: 1px 8px;
        font-size: 11px;
        font-weight: 600;
    }
    .filter-tab.active .count {
        background: var(--c-primary-light);
        color: var(--c-primary-text);
    }

    .toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 18px;
        flex-wrap: wrap;
    }
    .toolbar .search {
        flex: 1;
        min-width: 220px;
        position: relative;
    }
    .toolbar .search input {
        width: 100%;
        height: 38px;
        padding: 0 14px 0 38px;
        border: 1px solid var(--c-border);
        border-radius: 50px;
        background: #fff;
        font: inherit;
        font-size: 14px;
        outline: none;
    }
    .toolbar .search input:focus {
        border-color: var(--c-primary);
        box-shadow: 0 0 0 3px rgba(22,163,74,.12);
    }
    .toolbar .search svg {
        position: absolute;
        left: 12px; top: 50%;
        transform: translateY(-50%);
        color: var(--c-muted);
    }
    .toolbar select {
        height: 38px;
        padding: 0 32px 0 14px;
        border: 1px solid var(--c-border);
        border-radius: 50px;
        background-color: #fff;
        font: inherit;
        font-size: 14px;
    }

    /* Pagination */
    .pagination {
        display: flex;
        gap: 4px;
        padding: 12px 16px;
        list-style: none;
        justify-content: flex-end;
        margin: 0;
    }
    .pagination li span,
    .pagination li a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        height: 32px;
        padding: 0 10px;
        border-radius: 6px;
        border: 1px solid var(--c-border);
        color: var(--c-text);
        font-size: 13px;
        text-decoration: none;
        background: #fff;
    }
    .pagination li.active span,
    .pagination li a:hover {
        background: var(--c-primary);
        color: #fff;
        border-color: var(--c-primary);
    }
    .pagination li.disabled span {
        color: var(--c-muted-light);
        background: var(--c-border-soft);
    }

    /* List footer: results summary + "Show items" per-page selector + page links */
    .list-controls {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
        padding: 12px 16px;
        border-top: 1px solid var(--c-border);
    }
    .list-controls .list-summary {
        margin: 0;
        font-size: 13px;
        color: var(--c-muted);
    }
    .list-controls .list-summary strong {
        color: var(--c-text);
        font-weight: 600;
    }
    .list-controls-right {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }
    .per-page-form {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 0;
    }
    .per-page-form label {
        font-size: 13px;
        color: var(--c-muted);
        margin: 0;
    }
    .per-page-select {
        height: 32px;
        padding: 0 28px 0 10px;
        border: 1px solid var(--c-border);
        border-radius: 6px;
        background: #fff;
        color: var(--c-text);
        font-size: 13px;
        cursor: pointer;
    }
    .list-controls-right .pagination {
        padding: 0;
    }


    /* Stat row inside tenant show page */
    .stat-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
        margin-bottom: 22px;
    }
    .stat-tile {
        background: #fff;
        border: 1px solid var(--c-border);
        border-radius: var(--radius-lg);
        padding: 16px 18px;
    }
    .stat-tile .label { font-size: 12px; color: var(--c-muted); font-weight: 500; margin-bottom: 6px; }
    .stat-tile .value { font-size: 22px; font-weight: 800; color: var(--c-text); letter-spacing: -.4px; }

    /* Reveal box for new password */
    .reveal-box {
        background: #FFFBEB;
        border: 1px solid #FCD34D;
        border-radius: var(--radius);
        padding: 14px 16px;
        margin-bottom: 18px;
    }
    .reveal-box h4 { font-size: 14px; margin-bottom: 8px; }
    .reveal-box code {
        display: inline-block;
        padding: 6px 12px;
        background: #fff;
        border: 1px dashed #FCD34D;
        border-radius: 6px;
        font-family: 'SFMono-Regular', Menlo, monospace;
        font-size: 13px;
        color: #92400E;
        user-select: all;
    }

    /* ──────────────────────────────────────────────────────────────────
       PLAN CARDS  (Plans & Billing index)
       ────────────────────────────────────────────────────────────────── */
    .plan-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 18px;
        margin-top: 4px;
    }
    .plan-card {
        background: #fff;
        border: 1px solid var(--c-border);
        border-radius: var(--radius-lg);
        padding: 22px 22px 18px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        transition: transform .15s, box-shadow .15s, border-color .15s;
    }
    .plan-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(0,0,0,.06);
        border-color: #C7D2FE;
    }
    .plan-card.plan-inactive { opacity: .65; }
    .plan-card .plan-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
    }
    .plan-card .plan-name {
        font-size: 18px;
        font-weight: 700;
        color: var(--c-text);
    }
    .plan-card .plan-tagline {
        font-size: 12.5px;
        color: var(--c-muted);
        margin-top: 2px;
    }
    .plan-card .plan-price {
        display: flex;
        align-items: baseline;
        gap: 4px;
        margin-top: 4px;
    }
    .plan-card .plan-price .amt {
        font-size: 28px;
        font-weight: 800;
        color: var(--c-text);
        line-height: 1;
    }
    .plan-card .plan-price .per {
        font-size: 13px;
        color: var(--c-muted);
    }
    .plan-card .plan-price-yearly {
        font-size: 12.5px;
        color: var(--c-muted);
    }
    .plan-card .plan-price-yearly .save-tag {
        display: inline-block;
        margin-left: 6px;
        background: var(--c-primary-light);
        color: var(--c-primary-text);
        border-radius: 999px;
        padding: 1px 8px;
        font-size: 11px;
        font-weight: 600;
    }
    .plan-card .plan-features {
        list-style: none;
        padding: 0;
        margin: 6px 0 4px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        flex: 1;
    }
    .plan-card .plan-features li {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 13px;
        color: var(--c-text);
        line-height: 1.4;
    }
    .plan-card .plan-features li svg {
        color: var(--c-primary);
        flex: none;
        margin-top: 3px;
    }
    .plan-card .plan-usage {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding-top: 4px;
        border-top: 1px solid var(--c-border-soft);
    }
    .plan-card .usage-pill {
        background: var(--c-primary-light);
        color: var(--c-primary-text);
        font-size: 12px;
        padding: 3px 10px;
        border-radius: 999px;
    }
    .plan-card .usage-pill.muted { background: var(--c-border-soft); color: var(--c-muted); }
    .plan-card .usage-pill.warn  { background: var(--c-warning-bg);  color: #92400E; }
    .plan-card .plan-actions {
        display: flex;
        gap: 6px;
        justify-content: flex-end;
    }

    /* Inline checkbox label inside form rows */
    .check-line {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: var(--c-text);
        cursor: pointer;
    }
    .check-line input { margin: 0; }

    @media (max-width: 800px) {
        .form-grid { grid-template-columns: 1fr; }
        .segmented { grid-template-columns: 1fr; }
        .stat-grid { grid-template-columns: 1fr 1fr; }
    }

    /* ──────────────────────────────────────────────────────────────────
       SETTINGS  (tabbed layout)
       ────────────────────────────────────────────────────────────────── */
    .settings-shell {
        display: grid;
        grid-template-columns: 220px 1fr;
        gap: 18px;
        align-items: start;
    }
    .settings-tabs {
        background: #fff;
        border: 1px solid var(--c-border);
        border-radius: var(--radius-lg);
        padding: 8px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        position: sticky;
        top: 80px;
    }
    .settings-tab {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: var(--radius);
        font-size: 13.5px;
        font-weight: 500;
        color: var(--c-text-soft);
        cursor: pointer;
        transition: background .15s, color .15s;
    }
    .settings-tab:hover { background: var(--c-border-soft); color: var(--c-text); }
    .settings-tab.active {
        background: var(--c-primary-light);
        color: var(--c-primary-text);
        font-weight: 600;
    }
    .settings-tab svg { flex-shrink: 0; }

    .settings-panel { min-width: 0; }

    /* Hex color picker pair */
    .color-input {
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .color-input input[type="color"] {
        width: 44px;
        height: 40px;
        padding: 2px;
        border: 1px solid var(--c-border);
        border-radius: var(--radius);
        cursor: pointer;
        background: #fff;
        flex-shrink: 0;
    }
    .color-input input[type="text"] {
        flex: 1;
        font-family: 'SF Mono', Menlo, monospace;
        text-transform: uppercase;
    }

    /* Asset upload preview */
    .asset-preview {
        background: var(--c-border-soft);
        border: 1px dashed var(--c-border);
        border-radius: var(--radius);
        padding: 16px;
        height: 96px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
    }
    .asset-preview img { max-width: 100%; max-height: 64px; object-fit: contain; }
    .asset-preview .favicon-img { max-width: 48px; max-height: 48px; }
    .asset-empty {
        color: var(--c-muted);
        font-size: 12px;
        font-style: italic;
    }

    @media (max-width: 900px) {
        .settings-shell { grid-template-columns: 1fr; }
        .settings-tabs {
            flex-direction: row;
            overflow-x: auto;
            position: static;
        }
        .settings-tab { white-space: nowrap; }
    }

    /* ──────────────────────────────────────────────────────────────────
       TOGGLE SWITCH + PREFERENCE ROWS  (Settings — Figma 37:44683)
       ────────────────────────────────────────────────────────────────── */
    .pref-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 24px;
        padding: 18px 0;
        border-bottom: 1px solid var(--c-border-soft);
    }
    .pref-row:first-of-type { padding-top: 4px; }
    .pref-row:last-of-type  { border-bottom: 0; padding-bottom: 4px; }
    .pref-text { min-width: 0; }
    .pref-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--c-text);
    }
    .pref-desc {
        font-size: 13px;
        color: var(--c-muted);
        margin-top: 2px;
        line-height: 1.45;
    }

    .switch {
        position: relative;
        display: inline-block;
        width: 44px;
        height: 24px;
        flex-shrink: 0;
        cursor: pointer;
    }
    .switch input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }
    .switch .switch-track {
        position: absolute;
        inset: 0;
        background: var(--c-border);
        border-radius: 999px;
        transition: background .18s;
    }
    .switch .switch-track::before {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 20px;
        height: 20px;
        background: #fff;
        border-radius: 50%;
        box-shadow: var(--shadow-sm);
        transition: transform .18s;
    }
    .switch input:checked + .switch-track {
        background: var(--c-primary);
    }
    .switch input:checked + .switch-track::before {
        transform: translateX(20px);
    }
    .switch input:focus-visible + .switch-track {
        box-shadow: 0 0 0 3px rgba(22,163,74,.20);
    }

    /* Upcoming (not-yet-built) sidebar nav items */
    .nav-item.is-upcoming {
        opacity: .55;
        cursor: default;
    }
    .nav-item.is-upcoming:hover {
        background: transparent;
        color: var(--c-text-soft);
    }

    /* ───────────────────────── Settings: shared building blocks ───────────────────────── */
    .section-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        margin-top: 20px;
    }
    .section-count {
        color: var(--c-muted);
        font-weight: 500;
        font-size: 13px;
    }
    .field-hint {
        margin: 6px 0 0;
        font-size: 12px;
        color: var(--c-muted);
    }
    .check-inline {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 8px;
        font-size: 13px;
        color: var(--c-text-soft);
        cursor: pointer;
    }
    .inline-form { display: inline; }
    .table-empty {
        text-align: center;
        color: var(--c-muted);
        padding: 28px !important;
    }
    .kpi-grid-3 { grid-template-columns: repeat(3, 1fr); }

    /* Ghost button */
    .btn-ghost {
        background: #fff;
        border: 1px solid var(--c-border);
        color: var(--c-text);
    }
    .btn-ghost:hover { background: var(--c-border-soft); }

    /* Leading cell (icon + title + subtitle) */
    .cell-lead { display: flex; align-items: center; gap: 12px; }
    .cell-icon {
        width: 34px; height: 34px;
        flex-shrink: 0;
        border-radius: 9px;
        background: rgba(var(--c-primary-rgb), 0.1);
        color: var(--c-primary);
        display: flex; align-items: center; justify-content: center;
    }
    .cell-title { font-weight: 600; color: var(--c-text); }
    .cell-sub { font-size: 12px; color: var(--c-muted); margin-top: 2px; }

    /* Status pill (active / inactive) — theme-aware */
    .status-pill {
        display: inline-flex; align-items: center; gap: 7px;
        padding: 4px 11px;
        border-radius: 999px;
        font-size: 12px; font-weight: 600;
    }
    .status-pill .dot { width: 6px; height: 6px; border-radius: 50%; }
    .status-pill.is-on  { background: var(--c-success-bg); color: var(--c-success-text); }
    .status-pill.is-on .dot  { background: var(--c-success); }
    .status-pill.is-off { background: var(--c-border-soft); color: var(--c-muted); }
    .status-pill.is-off .dot { background: var(--c-muted); }

    /* Row action icon buttons */
    .row-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
    .icon-action {
        width: 32px; height: 32px;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid var(--c-border);
        background: #fff;
        border-radius: 8px;
        color: var(--c-text-soft);
        cursor: pointer;
        transition: all .15s;
    }
    .icon-action:hover { background: var(--c-border-soft); color: var(--c-text); }
    .icon-action-danger:hover { background: #fef3f2; color: #d92d20; border-color: #fecdca; }

    /* ───────────────────────── Modal ───────────────────────── */
    .modal-overlay {
        position: fixed; inset: 0;
        background: rgba(16, 24, 40, .55);
        display: none;
        align-items: flex-start;
        justify-content: center;
        padding: 7vh 16px 16px;
        z-index: 100;
    }
    .modal-overlay.open { display: flex; }
    .modal {
        background: #fff;
        border-radius: 14px;
        width: 100%;
        max-width: 520px;
        max-height: 86vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: 0 20px 48px rgba(16, 24, 40, .28);
        animation: modal-in .16s ease-out;
    }
    .modal > form {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }
    @keyframes modal-in {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .modal-head {
        display: flex; align-items: center; justify-content: space-between;
        padding: 18px 22px;
        border-bottom: 1px solid var(--c-border);
        flex-shrink: 0;
    }
    .modal-head h3 { margin: 0; font-size: 17px; }
    .modal-close {
        background: none; border: none;
        font-size: 24px; line-height: 1;
        color: var(--c-muted); cursor: pointer;
    }
    .modal-close:hover { color: var(--c-text); }
    .modal-body {
        padding: 20px 22px;
        overflow-y: auto;
        flex: 1 1 auto;
        min-height: 0;
    }
    .modal-body .form-group { margin-bottom: 14px; }
    .modal-foot {
        display: flex; justify-content: flex-end; gap: 10px;
        padding: 16px 22px;
        border-top: 1px solid var(--c-border);
        flex-shrink: 0;
    }
    .modal-foot .btn {
        width: auto !important;
    }

    /* ───────────────────────── Branding preview ───────────────────────── */
    .brand-preview {
        border: 1px solid var(--c-border);
        border-radius: 12px;
        overflow: hidden;
        max-width: 460px;
    }
    .brand-preview-bar {
        display: flex; align-items: center; gap: 10px;
        padding: 14px 18px;
        color: #fff; font-weight: 700;
    }
    .brand-preview-dot { width: 18px; height: 18px; border-radius: 6px; background: #fff; }
    .brand-preview-body { padding: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
    .brand-preview-body p { width: 100%; margin: 0 0 4px; font-size: 14px; }
    .brand-preview-btn {
        border: none; color: #fff;
        padding: 9px 16px; border-radius: 8px;
        font-weight: 600; font-size: 13px; cursor: pointer;
    }
    .brand-preview-badge {
        color: #fff; padding: 5px 12px;
        border-radius: 999px; font-size: 12px; font-weight: 600;
    }

    @media (max-width: 720px) {
        .kpi-grid-3 { grid-template-columns: 1fr; }
        .section-head { flex-direction: column; }
    }

    /* ───────────────────────── Dark action button ───────────────────────── */
    .btn-dark {
        background: #111827;
        color: #fff;
    }
    .btn-dark:hover { background: #1f2937; color: #fff; }
    .btn-dark:active { transform: translateY(1px); }

    /* KPI-with-corner-icon tiles now use the shared .ctr-tile component. */

    /* ───────────────────────── Rate distribution map ───────────────────────── */
    .rate-map {
        position: relative;
        margin-top: 16px;
        height: 300px;
        border: 1px solid var(--c-border);
        border-radius: 12px;
        background-color: #fbfdfc;
        background-image:
            linear-gradient(to right, #e5e7eb 1px, transparent 1px),
            linear-gradient(to bottom, #e5e7eb 1px, transparent 1px);
        background-size: 16.666% 25%;
        overflow: hidden;
    }
    .rate-map-blob {
        position: absolute;
        background: rgba(148,163,184,.16);
        border-radius: 999px;
        filter: blur(2px);
        transform: translate(-50%, -50%);
    }
    .rate-pin {
        position: absolute;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        z-index: 2;
    }
    .rate-pin-dot {
        width: 30px; height: 30px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 0 0 4px rgba(var(--c-primary-rgb), .15);
        transition: transform .12s, box-shadow .12s;
    }
    .rate-pin.is-on  .rate-pin-dot { background: var(--c-primary); color: #fff; box-shadow: 0 0 0 4px rgba(var(--c-primary-rgb), .15); }
    .rate-pin.is-off .rate-pin-dot { background: var(--c-border); color: #fff; box-shadow: 0 0 0 4px rgba(var(--c-border-rgb, 203, 213, 225), .18); }
    .rate-pin:hover .rate-pin-dot { transform: scale(1.12); }
    .rate-pin-label {
        font-size: 10px;
        font-weight: 600;
        color: var(--c-text);
        background: rgba(255,255,255,.92);
        padding: 2px 8px;
        border-radius: 4px;
        white-space: nowrap;
        box-shadow: 0 1px 2px rgba(0,0,0,.1);
    }
    /* Tooltip on hover */
    .rate-pin::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: -36px;
        left: 50%;
        transform: translateX(-50%);
        background: #111827;
        color: #fff;
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity .15s;
        z-index: 10;
    }
    .rate-pin:hover::after {
        opacity: 1;
    }
    .rate-map-hint {
        text-align: center;
        margin: 12px 0 0;
        font-size: 12px;
        color: var(--c-muted);
    }

    /* ───────────────────────── Table toolbar (search + filter + add) ───────────────────────── */
    .table-toolbar {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }
    .toolbar-search {
        position: relative;
        min-width: 200px;
    }
    .toolbar-search input {
        width: 100%;
        height: 36px;
        padding: 0 12px 0 34px;
        border: 1px solid var(--c-border);
        border-radius: 8px;
        background: #fff;
        font: inherit;
        font-size: 13px;
        outline: none;
    }
    .toolbar-search input:focus {
        border-color: var(--c-primary);
        box-shadow: 0 0 0 3px rgba(22,163,74,.12);
    }
    .toolbar-search svg {
        position: absolute;
        left: 11px; top: 50%;
        transform: translateY(-50%);
        color: var(--c-muted);
    }
    .toolbar-select {
        height: 36px;
        padding: 0 30px 0 12px;
        border: 1px solid var(--c-border);
        border-radius: 8px;
        background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
        font: inherit;
        font-size: 13px;
        color: var(--c-text);
        cursor: pointer;
        outline: none;
        appearance: none;
        -webkit-appearance: none;
    }
    .toolbar-select:focus { border-color: var(--c-primary); }

    /* ───────────────────────── Status text (dot + label, no pill bg) ───────────────────────── */
    .status-text {
        display: inline-flex; align-items: center; gap: 7px;
        font-size: 13px; font-weight: 600;
    }
    .status-text .dot { width: 7px; height: 7px; border-radius: 50%; }
    .status-text.is-on  { color: var(--c-success); }
    .status-text.is-on .dot  { background: var(--c-success); }
    .status-text.is-off { color: var(--c-muted); }
    .status-text.is-off .dot { background: var(--c-border); }

    /* ───────────────────────── Plain-text row action link ───────────────────────── */
    .link-action {
        background: none;
        border: none;
        padding: 0;
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        color: var(--c-primary);
        cursor: pointer;
        transition: color .2s ease;
    }
    .link-action:hover {
        /* Darker, not the hover colour: that one is a BACKGROUND (a pale
           steel blue in the default palette would fade a link to 2.3:1). */
        color: var(--c-primary-dark);
        text-decoration: underline;
    }
    .link-action:active {
        color: var(--c-selected);
    }
    .link-action-danger { color: #98a2b3; }
    .link-action-danger:hover { color: #d92d20; }

    /* ──────────────────────────────────────────────────────────────────
       WHO'S WORKING SECTION  (Dashboard — Figma 6:200–6:340)
       Horizontal provider cards: avatar + name/client, time + Active,
       location row. Matches the Figma layout exactly.
       ────────────────────────────────────────────────────────────────── */

    /* Responsive row of equal-width cards (6 across on wide screens). */
    .who-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 16px;
        margin-bottom: 28px;
    }

    /* Individual provider card */
    .who-card {
        background: #fff;
        border: 1px solid #E5E7EB;
        border-radius: 12px;
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        transition: box-shadow .15s, border-color .15s;
    }
    .who-card:hover {
        border-color: #BBF7D0;
        box-shadow: 0 2px 8px rgba(22, 163, 74, .10);
    }

    /* Top row: avatar + name/client */
    .who-top {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* Avatar circle — 38px */
    .who-avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(var(--c-primary-rgb), 0.12);
        color: var(--c-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 13px;
        flex-shrink: 0;
        overflow: hidden;
    }
    .who-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .who-id {
        min-width: 0;
        flex: 1;
    }

    /* Provider name */
    .who-name {
        font-size: 14px;
        font-weight: 600;
        color: #111827;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Client name */
    .who-client {
        font-size: 12px;
        color: #6B7280;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Middle row: time (left) + Active status (right) */
    .who-mid {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }
    .who-time {
        font-size: 12px;
        color: #6B7280;
    }
    .who-status {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        font-weight: 500;
        color: var(--c-success);
        white-space: nowrap;
    }
    .who-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--c-success);
        flex-shrink: 0;
    }

    /* Location row */
    .who-loc {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        color: #9CA3AF;
        min-width: 0;
    }
    .who-loc svg {
        width: 13px;
        height: 13px;
        flex-shrink: 0;
    }
    .who-loc span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    @media (max-width: 1024px) {
        .who-grid {
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 14px;
        }
    }
    @media (max-width: 640px) {
        .who-grid {
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 12px;
        }
    }

    /* ──────────────────────────────────────────────────────────────────
       CURRENTLY WORKING SECTION  (Schedule — collapsible with live map)
       ────────────────────────────────────────────────────────────────── */

    /* Container */
    .cw-section {
        background: #F0FDF4;
        border: 1px solid #BBF7D0;
        border-radius: var(--radius-xl);
        padding: 20px 22px;
        margin-bottom: 24px;
    }

    /* Header row */
    .cw-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }
    .cw-title {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 15px;
        font-weight: 700;
        color: #166534;
    }
    /* Pulsing green live-dot */
    .cw-live-dot {
        width: 10px; height: 10px;
        border-radius: 50%;
        background: #16A34A;
        flex-shrink: 0;
        position: relative;
    }
    .cw-live-dot::after {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        background: rgba(22,163,74,.25);
        animation: cwPulse 1.8s ease-in-out infinite;
    }
    @keyframes cwPulse {
        0%, 100% { transform: scale(1); opacity: .8; }
        50%       { transform: scale(1.55); opacity: 0; }
    }

    /* Collapse toggle button */
    .cw-toggle {
        background: none;
        border: 0;
        cursor: pointer;
        color: #6B7280;
        padding: 4px;
        border-radius: var(--radius-sm);
        display: flex; align-items: center;
        transition: color .15s, background .15s;
        line-height: 1;
    }
    .cw-toggle:hover { color: #166534; background: rgba(22,163,74,.08); }
    .cw-toggle svg { transition: transform .25s ease; }
    .cw-toggle.is-collapsed svg { transform: rotate(180deg); }

    /* Collapsible body */
    .cw-body {
        display: flex;
        gap: 16px;
        align-items: stretch;
        flex-wrap: nowrap;
    }
    .cw-body.is-hidden { display: none; }

    /* Left: 2-column cards grid.
       align-content:start keeps the rows at their natural height — without it the
       grid stretches its rows to fill the map's height and the cards balloon into
       tall empty boxes, which is the main way this drifted from the design. */
    .cw-cards {
        flex: 1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: min-content;
        align-content: start;
        gap: 10px;
        min-width: 0;
    }

    /* Individual provider card */
    .cw-card {
        display: flex;
        align-items: center;
        gap: 12px;
        background: #fff;
        border: 1px solid #E5E7EB;
        border-radius: 12px;
        padding: 13px 14px;
        text-decoration: none;
        color: inherit;
        transition: box-shadow .15s, border-color .15s, transform .12s;
        cursor: pointer;
        min-width: 0;
    }
    .cw-card:hover {
        border-color: #BBF7D0;
        box-shadow: 0 2px 10px rgba(22,163,74,.10);
        transform: translateY(-1px);
        color: inherit;
    }

    /* Avatar with green status dot */
    .cw-avatar-wrap {
        position: relative;
        flex-shrink: 0;
        width: 48px; height: 48px;
    }
    .cw-avatar {
        width: 48px; height: 48px;
        border-radius: 50%;
        background: rgba(var(--c-primary-rgb), 0.12);
        color: var(--c-primary);
        display: flex; align-items: center; justify-content: center;
        font-weight: 700;
        font-size: 15px;
        overflow: hidden;
        object-fit: cover;
    }
    .cw-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .cw-online-dot {
        position: absolute;
        bottom: 1px; right: 1px;
        width: 13px; height: 13px;
        background: #22C55E;
        border: 2.5px solid #fff;
        border-radius: 50%;
    }

    /* Card info (name + time·client) */
    .cw-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    .cw-name {
        font-size: 14px;
        font-weight: 600;
        color: #111827;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
    }
    .cw-sub {
        font-size: 12px;
        color: #6B7280;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
    }

    /* Right chevron */
    .cw-arrow {
        flex-shrink: 0;
        color: #9CA3AF;
        transition: color .15s, transform .15s;
    }
    .cw-card:hover .cw-arrow {
        color: #16A34A;
        transform: translateX(2px);
    }

    /* Right: Map panel.
       `isolation: isolate` is load-bearing, not decoration. Leaflet stacks its own
       panes and controls at z-index 400–1000; `position: relative` alone does NOT
       open a stacking context, so those numbers used to compete at the root level
       and beat every modal on the page (.modal-overlay is 100). The map then
       painted over open dialogs and stayed clickable through the backdrop.
       Isolating collapses the whole map into a single z-index:auto box in the root
       stack, so ordinary modals sit above it again. */
    .cw-map-wrap {
        position: relative;
        isolation: isolate;
        width: 380px;
        flex-shrink: 0;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #BBF7D0;
        min-height: 240px;
        align-self: stretch;
    }
    .cw-map {
        width: 100%;
        height: 100%;
        min-height: 240px;
    }

    /* Expand-to-full-view control, floated over the inline map.
       Leaflet's own panes and controls run up to z-index 1000, so this has to sit
       above that band or the map paints straight over it. */
    .cw-map-expand {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1001;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        border: 1px solid var(--c-border);
        border-radius: 8px;
        color: #374151;
        cursor: pointer;
        box-shadow: 0 1px 4px rgba(0,0,0,.18);
        transition: background .12s, color .12s;
    }
    .cw-map-expand:hover { background: #F0FDF4; color: #16A34A; }
    .cw-map-expand svg { width: 15px; height: 15px; }

    /* Full-view map modal */
    .cw-modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .55);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        z-index: 1000;
    }
    .cw-modal-backdrop[hidden] { display: none; }
    .cw-modal {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 1100px;
        height: min(80vh, 760px);
        background: #fff;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 20px 50px rgba(0,0,0,.28);
    }
    .cw-modal-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 18px;
        border-bottom: 1px solid var(--c-border);
        background: #F0FDF4;
    }
    .cw-modal-title {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 15px;
        font-weight: 700;
        color: #166534;
    }
    .cw-modal-close {
        background: none;
        border: 0;
        font-size: 24px;
        line-height: 1;
        color: #6B7280;
        cursor: pointer;
        padding: 2px 6px;
        border-radius: 6px;
    }
    .cw-modal-close:hover { color: #111827; background: rgba(0,0,0,.05); }
    /* The map fills the rest of the dialog — it needs a real height, not auto. */
    .cw-modal-map { flex: 1; min-height: 0; }

    /* Leaflet provider pin */
    /* Map pin — a circular provider avatar ringed in green, as in the design.
       Falls back to initials on the brand colour when the provider has no photo. */
    .cw-pin {
        width: 44px; height: 44px;
        border-radius: 50%;
        border: 3px solid #16A34A;
        box-shadow: 0 2px 8px rgba(0,0,0,.22);
        display: flex; align-items: center; justify-content: center;
        color: #fff;
        font-weight: 700;
        font-size: 13px;
        font-family: 'Inter', -apple-system, sans-serif;
        background: var(--cw-pin-bg, #16A34A);
        cursor: pointer;
        overflow: hidden;
        transition: box-shadow .15s, transform .12s;
    }
    .cw-pin img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        display: block;
    }
    /* Leaflet's divIcon carries a white box + border by default, which would
       frame the round pin in a square. */
    .cw-pin-wrap { background: transparent; border: 0; }
    .cw-pin:hover {
        box-shadow: 0 4px 14px rgba(0,0,0,.28);
    }

    /* Empty state */
    .cw-empty {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 28px 0;
        color: #6B7280;
        font-size: 13px;
        gap: 8px;
    }

    @media (max-width: 900px) {
        .cw-body { flex-direction: column; }
        .cw-map-wrap { width: 100%; height: 240px; align-self: auto; }
        .cw-map { height: 240px; min-height: 240px; }
    }
    @media (max-width: 640px) {
        .cw-cards { grid-template-columns: 1fr; }
    }


    /* ── Live-sync toast ──────────────────────────────────────────────────────
       Shown when another admin, or a provider on the mobile app, changed
       something this page is displaying. See public/js/sync.js.

       Bottom-left on purpose: the confirm dialog owns the centre, and the
       right-hand side is where sidebars and detail panes open. This corner is the
       one place a notice can sit without covering something the admin is using.
       ──────────────────────────────────────────────────────────────────────── */
    .sync-toast {
        position: fixed;
        left: 20px;
        bottom: 20px;
        z-index: 1400;               /* under the confirm modal, over page chrome */
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px 10px 14px;
        border-radius: 10px;
        background: #111827;
        color: #f9fafb;
        font-size: 13px;
        font-weight: 500;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
        /* Animated in by a class the script adds on the next frame, so the
           transition actually runs instead of being skipped on insert. */
        opacity: 0;
        transform: translateY(8px);
        transition: opacity .18s ease, transform .18s ease;
        pointer-events: none;
    }

    .sync-toast.open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .sync-toast-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--c-success);
        flex: none;
    }

    .sync-toast-btn {
        border: 0;
        background: rgba(255, 255, 255, .14);
        color: inherit;
        font: inherit;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 6px;
        cursor: pointer;
    }

    .sync-toast-btn:hover { background: rgba(255, 255, 255, .24); }

    .sync-toast-close {
        border: 0;
        background: none;
        color: inherit;
        font-size: 18px;
        line-height: 1;
        padding: 0 2px;
        cursor: pointer;
        opacity: .6;
    }

    .sync-toast-close:hover { opacity: 1; }

    @media (max-width: 640px) {
        .sync-toast { left: 12px; right: 12px; bottom: 12px; }
    }

    @media (prefers-reduced-motion: reduce) {
        .sync-toast { transition: none; }
    }

    /* ── Email-not-verified flag ───────────────────────────────────────────────
       A hover tooltip that actually appears. The browser's own `title` was tried
       first and read as broken: it waits ~1s, draws in OS chrome that a scrolling
       card can clip, and never shows on touch at all.

       `position: relative` is on the flag, not the card, so the tip is positioned
       by something small; `z-index` lifts it over neighbouring cards in the grid.
       Shown on focus as well as hover, so it is reachable from the keyboard. */
    .ev-flag {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        cursor: help;
        outline: none;
    }

    .ev-flag-dot {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #FFFBEB;
        border: 1px solid #FDE68A;
        color: #B45309;
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
    }

    .ev-flag-tip {
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        z-index: 60;
        width: max-content;
        max-width: 240px;
        padding: 8px 10px;
        border-radius: 8px;
        background: #1F2937;
        color: #F9FAFB;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.4;
        text-align: left;
        white-space: normal;
        /* Hidden with opacity rather than display:none so it can fade, and
           pointer-events:none stops the tip itself from eating the hover. */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .12s ease, visibility .12s ease;
    }

    .ev-flag-tip::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: #1F2937;
    }

    .ev-flag:hover .ev-flag-tip,
    .ev-flag:focus .ev-flag-tip,
    .ev-flag:focus-visible .ev-flag-tip {
        opacity: 1;
        visibility: visible;
    }

    /* ── Phone field: country picker + number ──────────────────────────────────
       One control in two parts. The picker is a button standing in for a real
       <select> (public/js/phone-field.js); without JavaScript the select itself
       shows, which is why both are styled to the same height. */
    .phone-field { display: block; }
    .phone-field-row { position: relative; display: flex; align-items: stretch; gap: 8px; }
    .phone-field-row .phone-field-number { flex: 1 1 auto; min-width: 0; }

    /* The native select: the fallback, and the value that submits. */
    .phone-field-country {
        flex: 0 0 auto; max-width: 190px; height: 42px; padding: 0 10px;
        border: 1px solid var(--c-border, #E2E8F0); border-radius: 8px;
        background: var(--c-card, #fff); color: var(--c-title, #0F172A); font-size: 14px;
    }
    .phone-field-country.phone-field-native {
        position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; overflow: hidden;
    }

    .phone-field-trigger {
        flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
        height: 42px; padding: 0 10px; cursor: pointer;
        border: 1px solid var(--c-border, #E2E8F0); border-radius: 8px;
        background: var(--c-card, #fff); color: var(--c-title, #0F172A);
        font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap;
        transition: border-color .15s ease, box-shadow .15s ease;
    }
    .phone-field-trigger:hover { border-color: #CBD5E1; }
    .phone-field-trigger:focus-visible { outline: none; border-color: #16A34A; box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
    .phone-field-trigger .pf-flag { font-size: 17px; line-height: 1; }
    .phone-field-trigger .pf-caret { font-size: 10px; color: #94A3B8; }

    .phone-field-panel {
        position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
        width: min(340px, 100%); background: #fff; border: 1px solid #E2E8F0;
        border-radius: 12px; box-shadow: 0 16px 40px rgba(15,23,42,.16); overflow: hidden;
    }
    .phone-field-panel.is-above { top: auto; bottom: calc(100% + 6px); }
    .phone-field-search { padding: 10px; border-bottom: 1px solid #F1F5F9; }
    .phone-field-search input {
        width: 100%; height: 36px; padding: 0 10px; font-size: 13.5px;
        border: 1px solid #E2E8F0; border-radius: 8px; background: #F8FAFC;
    }
    .phone-field-search input:focus { outline: none; border-color: #16A34A; background: #fff; }
    .phone-field-list { max-height: 260px; overflow-y: auto; padding: 6px; }
    .phone-field-list .phone-field-option {
        display: flex; align-items: center; gap: 10px; width: 100%;
        padding: 8px 10px; border: 0; border-radius: 8px; background: transparent;
        font-size: 13.5px; text-align: left; cursor: pointer; color: #0F172A;
    }
    .phone-field-list .phone-field-option:hover,
    .phone-field-list .phone-field-option:focus-visible { background: #F1F5F9; outline: none; }
    .phone-field-list .phone-field-option.is-selected { background: #F0FDF4; font-weight: 600; }
    .phone-field-list .pf-flag { font-size: 17px; }
    .phone-field-list .pf-name { flex: 1 1 auto; }
    .phone-field-list .pf-dial { color: #64748B; font-variant-numeric: tabular-nums; }
    .phone-field-empty { padding: 14px 12px; font-size: 13px; color: #64748B; text-align: center; }
    .phone-field-error { display: block; margin-top: 4px; color: #dc2626; font-size: 12px; }

    /* Organization clock (top bar) — see public/js/org-clock.js */
    .org-clock { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; margin-right:6px;
                 border:1px solid var(--c-border, #e5e7eb); border-radius:999px; font-size:12.5px;
                 color:var(--c-text, #111827); white-space:nowrap; cursor:help; }
    .org-clock svg { color:var(--c-muted, #6b7280); flex-shrink:0; }
    .org-clock-zone { color:var(--c-muted, #6b7280); font-weight:600; }
    .tz-hint { display:block; margin-top:4px; font-size:11.5px; color:var(--c-muted, #6b7280); }
    @media (max-width: 640px) { .org-clock-zone { display:none; } .org-clock { padding:4px 8px; } }

    /* ─────────────────────────────────────────────────────────────────────────
       Page styles that used to live in <style> blocks inside views.
       Two rules only ever applied on one page; they are scoped with
       :where([data-page="route.name"]) (zero specificity) so they still do.
       ─────────────────────────────────────────────────────────────────────── */
    /* ── from tenant/partials/archive-modal ── */
    /* Two classes on purpose: this used to be a <style> block that came AFTER
       confirm-modal.css and beat its `.ac-modal { max-width: 440px }` by
       order. Inside main.css it comes first, so it wins by specificity. */
    .ac-modal.ar-modal { max-width: 520px; }
    .ar-shifts {
        margin: 4px 20px 0; border: 1px solid var(--c-border); border-radius: 10px;
        background: #f9fafb; overflow: hidden;
    }
    .ar-shifts-head {
        padding: 8px 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .4px;
        text-transform: uppercase; color: #6b7280; border-bottom: 1px solid var(--c-border);
    }
    .ar-list { list-style: none; margin: 0; padding: 0; max-height: 168px; overflow-y: auto; }
    .ar-list li {
        display: flex; align-items: baseline; gap: 10px;
        padding: 8px 12px; font-size: 13px; border-bottom: 1px solid #f1f2f4;
    }
    .ar-list li:last-child { border-bottom: 0; }
    .ar-when { font-weight: 700; color: var(--c-text); white-space: nowrap; }
    .ar-who  { color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ar-more { padding: 7px 12px; font-size: 12px; color: var(--c-muted); border-top: 1px solid var(--c-border); }

    .ar-options { margin: 14px 20px 0; display: flex; flex-direction: column; gap: 8px; }
    .ar-opt {
        display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px;
        border: 1px solid var(--c-border); border-radius: 9px; cursor: pointer;
    }
    .ar-opt:hover { background: #f9fafb; }
    .ar-opt input { margin-top: 2px; flex-shrink: 0; }
    .ar-opt-t { font-size: 13.5px; font-weight: 700; color: var(--c-text); }
    .ar-opt-d { display: block; font-size: 12.5px; color: var(--c-muted); margin-top: 2px; }
    .ar-target { margin-top: 10px; }
    .ar-target select { width: 100%; }
    .ar-error {
        margin: 12px 20px 0; padding: 10px 12px; border-radius: 8px;
        background: #FEE2E2; color: #991B1B; font-size: 13px;
    }

    /* ── from tenant/partials/care-plan-assets ── */
    /* ── Builder ─────────────────────────────────────────────── */
    .cpb { display:flex; flex-direction:column; gap:14px; }
    .cpb-cat { border:1px solid #e5e7eb; border-radius:12px; padding:14px; background:#fafafa; }
    .cpb-cat-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
    .cpb-cat-title { flex:1; font-weight:600; font-size:14px; border:1px solid #e5e7eb; border-radius:8px; padding:8px 10px; background:#fff; }
    .cpb-cat-title:focus, .cpb-item-input:focus { outline:none; border-color:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.12); }
    .cpb-items { display:flex; flex-direction:column; gap:8px; }
    .cpb-item { display:flex; align-items:center; gap:8px; }
    .cpb-dot { width:7px; height:7px; border-radius:50%; background:#16a34a; flex:none; }
    .cpb-item-input { flex:1; border:1px solid #e5e7eb; border-radius:8px; padding:7px 10px; font-size:13px; background:#fff; }
    .cpb-del { border:0; background:transparent; color:#9ca3af; font-size:18px; line-height:1; cursor:pointer; width:26px; height:26px; border-radius:6px; flex:none; }
    .cpb-del:hover { background:#fee2e2; color:#dc2626; }
    .cpb-add-item { align-self:flex-start; margin-top:8px; border:0; background:transparent; color:#16a34a; font-weight:600; font-size:12px; cursor:pointer; padding:2px 0; }
    .cpb-add-cat { align-self:flex-start; border:1px dashed #16a34a; color:#16a34a; background:#f0fdf4; border-radius:10px; padding:9px 14px; font-weight:600; font-size:13px; cursor:pointer; }
    .cpb-add-cat:hover { background:#dcfce7; }

    /* ── Read-only view (matches design) ─────────────────────── */
    .cp-view { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
    @media (max-width:640px){ .cp-view { grid-template-columns:1fr; } }
    .cp-cat-card { border:1px solid #e5e7eb; border-radius:14px; padding:16px; background:#fff; }
    .cp-cat-card h4 { margin:0 0 12px; font-size:14px; font-weight:700; color:#111827; }
    .cp-cat-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
    .cp-cat-list li { display:flex; gap:9px; font-size:13px; color:#374151; line-height:1.45; }
    .cp-cat-list li::before { content:''; width:7px; height:7px; border-radius:50%; background:#16a34a; margin-top:6px; flex:none; }
    .cp-empty { padding:28px; text-align:center; color:#9ca3af; font-size:13px; border:1px dashed #e5e7eb; border-radius:12px; }

    /* ── from tenant/audit/index ── */
    .al-pills { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
    .al-pill {
        display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:20px;
        border:1px solid #e5e7eb; background:#fff; color:#374151; font-size:13px; font-weight:600;
        text-decoration:none; transition:all .12s;
    }
    .al-pill:hover { border-color:#d1d5db; background:#f9fafb; }
    .al-pill.active { background:var(--c-primary); border-color:var(--c-primary); color:#fff; }
    .al-pill .n { font-size:12px; opacity:.75; }
    .al-mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; color:#6b7280; }
    .al-row { cursor:pointer; }
    .al-row:hover { background:#fafafa; }
    .al-chip {
        display:inline-block; background:#f3f4f6; border:1px solid #e5e7eb; border-radius:4px;
        padding:1px 6px; font-size:11px; color:#374151; margin:1px 2px 1px 0;
    }
    /* The detail view is long (identity + diff table + snapshot + hashes), so
       its body scrolls while the header and footer stay put. */
    #al-detail-modal .modal { display:flex; flex-direction:column; max-height:88vh; }
    #al-detail-body { display:flex; flex-direction:column; min-height:0; }
    #al-detail-body .modal-body { overflow-y:auto; min-height:0; }

    /* ── from tenant/providers/index ── */
    :where([data-page="tenant.providers.index"]) .form-label{display:block;font-size:13px;font-weight:600;color:var(--c-text);margin-bottom:6px;}
    .group-picker .gp-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
    .group-picker .gp-pill{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1px solid var(--c-border);background:#fff;color:var(--c-text);font-size:13px;font-weight:500;cursor:pointer;transition:all .12s;}
    .group-picker .gp-pill:hover{border-color:var(--c-primary);background:rgba(var(--c-primary-rgb),.04);}
    .group-picker .gp-pill.on{background:rgba(var(--c-primary-rgb),.1);border-color:var(--c-primary);color:var(--c-primary);font-weight:600;}
    .group-picker .gp-pill.custom{cursor:default;}
    .group-picker .gp-check{font-size:11px;}
    .group-picker .gp-x{background:none;border:none;color:var(--c-primary);cursor:pointer;font-size:15px;line-height:1;padding:0 0 0 2px;}
    .group-picker .gp-custom{display:flex;gap:8px;}
    .group-picker .gp-custom-input{flex:1;}

    /* Availability window builder */
    .aw-row{border:1px solid var(--c-border);border-radius:10px;padding:14px;margin-bottom:12px;background:#f9fafb;}
    .aw-days{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
    .aw-day-btn{border:1px solid var(--c-border);border-radius:8px;padding:6px 11px;font-size:12.5px;font-weight:600;background:#fff;color:var(--c-text);cursor:pointer;transition:all .12s;}
    .aw-day-btn:hover{border-color:var(--c-primary);}
    .aw-day-btn.on{background:rgba(var(--c-primary-rgb),.1);border-color:var(--c-primary);color:var(--c-primary);}
    .aw-time-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
    .aw-allday{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--c-text);cursor:pointer;white-space:nowrap;}
    .aw-time-row input[type="time"]{width:auto;}
    .aw-to{color:var(--c-muted);font-size:13px;}
    .aw-remove-btn{margin-left:auto;background:none;border:none;color:#9ca3af;cursor:pointer;font-size:13px;font-weight:600;}
    .aw-remove-btn:hover{color:#dc2626;}
    @media(max-width:1100px){:where([data-page="tenant.providers.index"]) .content .cg-stats-grid{grid-template-columns:repeat(2,1fr)!important;}:where([data-page="tenant.providers.index"]) .content [style*="repeat(5, 1fr)"]{grid-template-columns:repeat(3,1fr)!important;}}
    @media(max-width:680px){:where([data-page="tenant.providers.index"]) .content .cg-stats-grid{grid-template-columns:1fr!important;}:where([data-page="tenant.providers.index"]) .content [style*="repeat(5, 1fr)"]{grid-template-columns:repeat(2,1fr)!important;}}

    /* ── from tenant/clients/index ── */
    :where([data-page="tenant.clients.index"]) .form-label{display:block;font-size:13px;font-weight:600;color:var(--c-text);margin-bottom:6px;}
    .cl-section-title{font-size:13px;font-weight:700;color:var(--c-text);text-transform:uppercase;letter-spacing:.4px;margin:4px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--c-border);display:flex;align-items:center;gap:8px;}
    .cl-badge{background:rgba(var(--c-primary-rgb),.1);color:var(--c-primary);font-size:10px;font-weight:600;padding:2px 8px;border-radius:12px;text-transform:none;letter-spacing:0;}
    .cl-seg{flex:1;padding:9px 12px;border:1px solid var(--c-border);background:#fff;color:var(--c-text);border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;transition:all .12s;}
    .cl-seg:hover{border-color:var(--c-primary);}
    .cl-seg.on{background:rgba(var(--c-primary-rgb),.1);border-color:var(--c-primary);color:var(--c-primary);font-weight:600;}

    /* ── from tenant/clients/show ── */
    .cl-h{font-size:13px;font-weight:600;color:var(--c-text);margin-bottom:12px;}
    .cl-cell{background:#f9fafb;border:1px solid var(--c-border);border-radius:8px;padding:12px 14px;}
    .cl-k{font-size:11px;color:var(--c-muted);margin-bottom:4px;}
    .cl-v{font-size:13px;color:var(--c-text);word-break:break-word;}

    /* Overview tab — Figma styled cards */
    .ov-card{background:#fff;border:1px solid #eef0f2;border-radius:12px;padding:18px 20px;margin-bottom:14px;box-shadow:0 1px 2px rgba(16,24,40,.04);}
    .ov-h{font-size:14px;font-weight:700;color:#111827;margin-bottom:14px;}
    .ov-line{display:flex;align-items:center;gap:10px;font-size:13px;color:#374151;}
    .ov-ico{width:16px;height:16px;flex-shrink:0;color:#9ca3af;}
    .ov-label{font-size:12px;color:#9ca3af;margin-bottom:7px;}
    .ov-text{font-size:13px;color:#374151;line-height:1.5;}
    .ov-pills{display:flex;flex-wrap:wrap;gap:8px;}
    .ov-pill{display:inline-flex;align-items:center;padding:4px 11px;border-radius:14px;font-size:12px;font-weight:500;line-height:1.4;}
    .ov-pill-blue{background:#eff6ff;border:1px solid #bfdbfe;color:#2563eb;}
    .ov-pill-red{background:#fee2e2;border:1px solid #fecaca;color:#dc2626;}
    .ov-pill-gray{background:#f3f4f6;border:1px solid #e5e7eb;color:#374151;}
    .ov-switch{position:relative;display:inline-block;width:38px;height:22px;border-radius:22px;background:#d1d5db;flex-shrink:0;transition:background .15s;}
    .ov-switch.on{background:var(--c-primary);}
    .ov-switch-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s;}
    .ov-switch.on .ov-switch-knob{left:18px;}

    /* Care Plan tab — Figma styled cards (single column, gray header strip) */
    .clcp-card{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;margin-bottom:14px;background:#fff;}
    .clcp-card-head{background:#f9fafb;padding:13px 18px;border-bottom:1px solid #eef0f2;font-size:14px;font-weight:700;color:#111827;}
    .clcp-list{list-style:none;margin:0;padding:15px 18px;display:flex;flex-direction:column;gap:11px;}
    .clcp-list li{display:flex;gap:11px;font-size:13px;color:#374151;line-height:1.45;}
    .clcp-list li::before{content:'';width:7px;height:7px;border-radius:50%;background:#16a34a;margin-top:5px;flex:none;}

    /* Care Plan document card */
    .clcp-doc{border:1px solid #e5e7eb;border-radius:12px;background:#fff;padding:16px 18px;margin-bottom:22px;}
    .clcp-doc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;}
    .clcp-doc-file{display:flex;align-items:center;gap:13px;margin-top:13px;padding:12px 14px;border:1px solid #e5e7eb;border-radius:10px;background:#f9fafb;flex-wrap:wrap;}
    .clcp-doc-icon{width:40px;height:40px;border-radius:8px;background:rgba(var(--c-primary-rgb),.1);color:var(--c-primary);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:none;letter-spacing:.3px;}

    /* ── from tenant/leaves/types ── */
    .lt-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid #f3f4f6; }
    .lt-row:last-child { border-bottom:0; }
    .lt-quota { font-weight:700; color:var(--c-text); white-space:nowrap; font-size:13.5px; }
    .lt-tag {
        display:inline-flex; align-items:center; padding:2px 9px; border-radius:12px;
        font-size:11px; font-weight:700; white-space:nowrap; margin-left:8px;
    }
    .lt-tag-unlimited { background:#EDE9FE; color:#5B21B6; border:1px solid #DDD6FE; }
    .lt-tag-unpaid    { background:#F3F4F6; color:#4B5563; border:1px solid #E5E7EB; }

    /* ── from tenant/notifications/index ── */
    .notif-page { max-width: 980px; }

    .notif-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
    .notif-head-left { display: flex; align-items: center; gap: 10px; }
    .notif-head-left h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--c-text); }
    .notif-unread-badge { background: #EF4444; color: #fff; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; line-height: 1.3; }
    .notif-mark-all { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-size: 13px; color: #6B7280; font-weight: 500; padding: 4px 6px; border-radius: 6px; }
    .notif-mark-all:hover { color: var(--c-text); background: #F3F4F6; }

    .notif-filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
    .notif-pill { display: inline-block; padding: 6px 15px; border-radius: 999px; font-size: 13px; font-weight: 500; color: #374151; background: #fff; border: 1px solid #E5E7EB; text-decoration: none; transition: all .12s ease; }
    .notif-pill:hover { border-color: #D1D5DB; background: #F9FAFB; }
    .notif-pill.is-active { background: #111827; border-color: #111827; color: #fff; }

    .notif-card { background: #fff; border: 1px solid var(--c-border, #E5E7EB); border-radius: 12px; overflow: hidden; }
    .notif-row { display: flex; align-items: flex-start; gap: 14px; padding: 15px 20px; border-bottom: 1px solid #F3F4F6; cursor: default; }
    .notif-row:last-child { border-bottom: none; }
    .notif-row.is-unread { background: #FFFBEB; cursor: pointer; }
    .notif-row.is-unread:hover { background: #FEF7DE; }

    .notif-icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }

    .notif-content { flex: 1 1 auto; min-width: 0; }
    .notif-title { font-size: 13px; font-weight: 600; color: #111827; line-height: 1.4; }
    .notif-body { font-size: 13px; color: #4B5563; line-height: 1.5; margin-top: 2px; }
    .notif-actor { font-size: 12px; color: #9CA3AF; margin-top: 5px; }

    .notif-meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-top: 2px; }
    .notif-time { font-size: 12px; color: #9CA3AF; white-space: nowrap; }
    .notif-dot { width: 8px; height: 8px; border-radius: 50%; background: #EF4444; }

    .notif-empty { padding: 56px 20px; text-align: center; color: #9CA3AF; }
    .notif-empty p { margin: 12px 0 0; font-size: 13px; }

    .notif-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; font-size: 12px; color: #9CA3AF; }
    .notif-foot a { color: #9CA3AF; text-decoration: none; }
    .notif-foot a:hover { color: var(--c-text); text-decoration: underline; }

    /* ── from tenant/settings ── */
        .st-swatches { display:flex; flex-wrap:wrap; gap:10px; }
        .st-swatch {
            position:relative; width:64px; height:40px; border-radius:8px; cursor:pointer;
            display:flex; align-items:center; justify-content:center;
            border:2px solid transparent; transition:transform .1s;
        }
        .st-swatch:hover { transform:translateY(-1px); }
        .st-swatch.selected { border-color:#111827; }
        .st-swatch .st-check { display:none; color:#fff; filter:drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
        .st-swatch.selected .st-check { display:block; }
        .st-swatch-label { text-align:center; font-size:11px; color:var(--c-muted); margin-top:4px; width:64px; }
        .st-swatch-wrap { display:flex; flex-direction:column; align-items:center; }
        .st-row { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid #f3f4f6; gap:12px; }
        .st-row:last-child { border-bottom:0; }
        .st-rate { font-weight:700; color:var(--c-text); white-space:nowrap; }
        .st-modal-sub { font-size:15px; font-weight:700; color:var(--c-text); margin:22px 0 2px; }

        /* Branding → Mobile App Theme */
        .mt-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:16px; }
        .mt-card {
            display:flex; gap:18px; align-items:flex-start; justify-content:space-between;
            border:1px solid var(--c-border); border-radius:12px; padding:16px; background:#fff;
        }
        .mt-text { flex:1; min-width:0; }
        .mt-text .color-input.is-off { opacity:.5; }
        .mt-warn { color:#B45309; }
        .mt-phone {
            --mt: #0E2E46;
            width:132px; flex-shrink:0; border-radius:18px; border:5px solid #111827; overflow:hidden;
            background:#F3F4F6; display:flex; flex-direction:column; height:236px;
        }
        .mt-phone-head { background:var(--mt); color:#fff; font-size:11px; font-weight:700; padding:16px 10px 10px; }
        .mt-phone-body { flex:1; padding:8px; display:flex; flex-direction:column; gap:8px; }
        .mt-phone-card { background:#fff; border-radius:8px; padding:8px; display:flex; flex-direction:column; gap:5px; }
        .mt-phone-card--tint { background:color-mix(in srgb, var(--mt) 12%, #fff); }
        .mt-phone-line { height:5px; border-radius:3px; background:#D1D5DB; }
        .mt-phone-line--short { width:60%; }
        .mt-phone-btn {
            margin-top:4px; text-align:center; font-size:9.5px; font-weight:700; color:#fff;
            background:var(--mt); border-radius:6px; padding:5px 0;
        }
        .mt-phone-tabs { display:flex; justify-content:space-around; padding:8px 6px 10px; background:#fff; border-top:1px solid #E5E7EB; }
        .mt-phone-tabs span { width:14px; height:4px; border-radius:2px; background:#D1D5DB; }
        .mt-phone-tabs span.is-on { background:var(--mt); }
        @media (max-width: 520px) { .mt-card { flex-direction:column; } .mt-phone { align-self:center; } }

        /* Stat/Bank/Federal Holidays tab */
        .hol-rate { display:block; }
        .hol-rate-input { display:flex; align-items:center; gap:8px; }
        .hol-rate-input .form-control { width:110px; }
        .hol-rate-x { font-size:18px; font-weight:700; color:var(--c-muted); }
        .hol-note {
            margin-top:12px; padding:10px 12px; border-radius:8px; font-size:12.5px;
            background:var(--c-info-bg); color:#1E3A8A;
        }
        .hol-year { display:flex; align-items:center; gap:6px; }
        .hol-year .btn { min-width:34px; justify-content:center; font-size:16px; line-height:1; }
        .hol-date {
            width:44px; flex-shrink:0; border-radius:8px; overflow:hidden; text-align:center;
            border:1px solid var(--c-primary-border); background:var(--c-primary-light);
        }
        .hol-date-m { display:block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
            color:#fff; background:var(--c-primary); padding:2px 0; }
        .hol-date-d { display:block; font-size:16px; font-weight:700; color:var(--c-primary-text); padding:3px 0 4px; }
        .hol-suggest { border:1px solid var(--c-border); border-radius:10px; overflow:hidden; }
        .hol-suggest-row {
            display:flex; align-items:center; gap:10px; padding:10px 12px; margin:0; cursor:pointer;
            border-bottom:1px solid var(--c-border-soft); font-weight:500;
        }
        .hol-suggest-row:last-child { border-bottom:0; }
        .hol-suggest-row.is-added { cursor:default; color:var(--c-muted); background:#FAFAFA; }
        .hol-suggest-name { flex:1; min-width:0; font-size:13.5px; color:var(--c-text); }
        .hol-suggest-row.is-added .hol-suggest-name { color:var(--c-muted); }
        .hol-suggest-date { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--c-muted); white-space:nowrap; }
        @media (max-width: 640px) {
            .hol-suggest-row { flex-wrap:wrap; }
            .hol-suggest-date { width:100%; padding-left:24px; }
        }

    /* ── from tenant/settings ── */
    .mx-nav { display:flex; gap:8px; flex-wrap:wrap; }
    .mx-nav-item {
        display:flex; align-items:center; gap:10px; cursor:pointer;
        border:1px solid var(--c-border); background:#fff; color:var(--c-muted);
        border-radius:10px; padding:10px 16px; text-align:left; font:inherit;
        transition:border-color .12s, box-shadow .12s, color .12s;
    }
    .mx-nav-item:hover { border-color:#c7cdd6; }
    .mx-nav-item.is-active {
        border-color:var(--c-primary); color:var(--c-text);
        box-shadow:0 0 0 3px rgba(var(--c-primary-rgb), .12);
    }
    .mx-nav-item.is-active svg { color:var(--c-primary); }
    .mx-nav-label { display:block; font-size:13.5px; font-weight:700; color:var(--c-text); }
    .mx-nav-hint  { display:block; font-size:11.5px; color:var(--c-muted); margin-top:1px; }
    @media (max-width: 640px) { .mx-nav-item { flex:1 1 100%; } }

    /* ── from tenant/settings ── */
    .tz-picker { position: relative; }
    .tz-list {
        position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
        max-height: 288px; overflow-y: auto;
        background: #fff; border: 1px solid var(--c-border); border-radius: 10px;
        box-shadow: 0 12px 28px rgba(16,24,40,.14);
    }
    .tz-list[hidden] { display: none; }
    .tz-group {
        padding: 7px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .5px;
        text-transform: uppercase; color: #9ca3af; background: #f9fafb;
        position: sticky; top: 0;
    }
    .tz-opt {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 9px 12px; cursor: pointer; font-size: 13.5px; border: 0; width: 100%;
        background: none; text-align: left;
    }
    .tz-opt:hover, .tz-opt.is-active { background: #f3f4f6; }
    .tz-opt[aria-selected="true"] { font-weight: 700; }
    .tz-opt .tz-off { color: var(--c-muted); font-size: 12px; white-space: nowrap; }
    .tz-empty { padding: 16px 12px; font-size: 13px; color: var(--c-muted); text-align: center; }
    .tz-now { margin-top: 6px; font-size: 12.5px; color: var(--c-muted); }

    /* ── from tenant/settings/support ── */
    .sx-block { border:1px solid var(--c-border); border-radius:12px; padding:16px 18px; margin-bottom:18px; background:#fff; }
    .sx-block-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
    .sx-block-title { font-size:14px; font-weight:700; color:var(--c-text); }
    .sx-block-sub { font-size:12.5px; color:var(--c-muted); margin-top:2px; max-width:62ch; }
    .sx-add { width:auto; flex-shrink:0; display:inline-flex; align-items:center; gap:6px; }
    .sx-row, .sx-new { padding:12px 0; border-top:1px solid var(--c-border); }
    .sx-row:first-of-type { border-top:0; }
    .sx-grid { display:grid; gap:10px; align-items:start; }
    .sx-actions { display:flex; align-items:center; gap:6px; }
    .sx-empty { border:1px dashed var(--c-border); border-radius:10px; }
    .sx-meta { font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--c-muted); margin-top:6px; }
    .sx-thumb { width:64px; height:44px; border-radius:8px; overflow:hidden; background:#f3f4f6; color:var(--c-muted); display:flex; align-items:center; justify-content:center; }
    .sx-thumb img { width:100%; height:100%; object-fit:cover; }
    .sx-off { opacity:.55; }
    @media (max-width: 900px) {
      .sx-grid { grid-template-columns:1fr !important; }
      .sx-block-head { flex-direction:column; }
    }

    /* ── email / phone: a saved address is changed only through the Change
       dialog (public/js/email-verify.js); the field beside it is read-only ── */
    .form-control.ev-locked, .phone-field-trigger.ev-locked { background:#f9fafb; color:var(--c-muted); cursor:default; }
    .phone-field-trigger.ev-locked { opacity:1; }
    .ev-change .ac-modal { max-width: 460px; }
    .ev-change .evc-step { display:none; }
    .ev-change .evc-lead { margin:0 0 14px; font-size:13.5px; line-height:1.5; color:var(--c-muted); }
    .ev-change .form-group { margin-bottom:12px; }
    .ev-change .form-group label { display:block; font-size:12.5px; font-weight:600; color:var(--c-text); margin-bottom:6px; }
    .ev-change .evc-row { display:flex; gap:8px; align-items:stretch; }
    .ev-change .evc-iso { flex:0 0 150px; min-width:0; }
    .ev-change .evc-row .form-control:not(.evc-iso) { flex:1 1 auto; min-width:0; }
    .ev-change .evc-code-row { display:flex; gap:10px; align-items:center; margin:0 0 6px; }
    .ev-change .evc-code { width:150px; letter-spacing:6px; text-align:center; font-size:18px; font-weight:700; }
    .ev-change .evc-resend { padding:8px 12px; font-size:13px; }
    .ev-change .evc-error { display:none; margin-top:10px; font-size:12.5px; color:#B91C1C; }
    .ev-change .evc-done { display:flex; align-items:center; gap:12px; font-size:14px; color:var(--c-text); }
    .ev-change .evc-done p { margin:0; }
    .ev-change .evc-tick { flex:none; width:36px; height:36px; border-radius:50%; background:#DCFCE7; color:#166534; display:inline-flex; align-items:center; justify-content:center; font-weight:800; }

    /* ── provider profile: Assigned Pay Rates (tenant/providers/show) ── */
    .ppr-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px; margin-bottom:12px; }
    .ppr-assign-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:8px; border:1.5px solid var(--c-primary); background:#fff; color:var(--c-primary); font-size:13px; font-weight:600; cursor:pointer; }
    .ppr-assign-btn:hover { background:var(--c-primary); color:#fff; }
    .ppr-assign { border:1px solid var(--c-border); border-radius:10px; background:#f9fafb; padding:12px 14px; margin-bottom:12px; display:flex; flex-direction:column; gap:8px; }
    .ppr-assign-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
    .ppr-assign-row select { flex:1 1 260px; min-width:0; }
    .ppr-assign-actions { display:flex; gap:8px; }
    .ppr-err { font-size:12.5px; color:#b91c1c; }
    .ppr-table { border:1px solid var(--c-border); border-radius:10px; overflow-x:auto; }
    .ppr-row { display:grid; grid-template-columns:1.6fr 1.1fr 0.9fr 0.9fr 0.6fr; min-width:540px; gap:10px; align-items:center; padding:12px 16px; font-size:13px; border-top:1px solid var(--c-border); }
    .ppr-row-head { border-top:0; background:#f9fafb; font-size:11.5px; font-weight:600; letter-spacing:.3px; color:var(--c-muted); padding:10px 16px; }
    .ppr-name { display:flex; align-items:center; gap:10px; min-width:0; }
    .ppr-name > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .ppr-icon { width:30px; height:30px; flex-shrink:0; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; background:var(--c-primary-light); color:var(--c-primary); }
    .ppr-chips { display:flex; flex-wrap:wrap; gap:4px; }
    .ppr-chip { display:inline-block; padding:3px 9px; border-radius:6px; background:#f3f4f6; color:#374151; font-size:12px; font-weight:500; white-space:nowrap; }
    .ppr-amount { font-weight:700; color:var(--c-text); font-size:14px; line-height:1.25; }
    .ppr-amount > span { display:block; font-weight:400; font-size:11.5px; color:var(--c-muted); }
    .ppr-status { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; white-space:nowrap; }
    .ppr-status-on { background:#f0fdf4; color:#16a34a; }
    .ppr-status-off { background:#f3f4f6; color:#6b7280; }
    .ppr-dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
    .ppr-remove { width:28px; height:28px; border:0; border-radius:6px; background:none; color:#9ca3af; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
    .ppr-remove:hover { background:#fef2f2; color:#dc2626; }
    .ppr-remove:disabled { opacity:.5; cursor:default; }
    .ppr-empty { padding:14px 16px; font-size:13px; color:var(--c-muted); border-top:1px solid var(--c-border); }

}

@layer utilities {
    /* components -- reusable groups that used to be PHP style strings.
       Defined before the single-property utilities so a utility on the
       same element still wins, as the later inline declaration did. */
    .ui-pill { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 14px; font-size: 12px; font-weight: 700; white-space: nowrap; }
    .ui-field-label { font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; color: #9ca3af; font-weight: 600; }
    .ui-field-value { font-size: 14px; font-weight: 600; color: var(--c-text); margin-top: 2px; }
    .ui-th { text-align: left; padding: 10px 12px; font-weight: 600; color: #6b7280; font-size: 12.5px; }
    .ui-td { padding: 10px 12px; border-bottom: 1px solid #f3f4f6; font-size: 13px; vertical-align: middle; }
    .ui-note-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; white-space: nowrap; line-height: 1.3; }
    .ui-note-btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; text-decoration: none; }
    .ui-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ui-note-chip-lg { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 8px; font-size: 13px; font-weight: 700; white-space: nowrap; line-height: 1.3; }
    /* a provider document row, by expiry state */
    .ui-doc-expired { border: 1px solid #fecaca; border-left: 4px solid #dc2626; background: #fef2f2; }
    .ui-doc-expiring { border: 1px solid #fde68a; border-left: 4px solid #eab308; background: #fefce8; }
    .ui-doc-ok { border: 1px solid var(--c-border); border-left: 4px solid transparent; background: #fff; }
    /* hover states that used to be onmouseover/onmouseout style swaps */
    .ui-hover-primary:hover { background: rgba(var(--c-primary-rgb), .85); }
    .ui-hover-lift:hover { box-shadow: 0 4px 14px rgba(0,0,0,.09); }
    .ui-hover-row:hover { background: #fafafa; }

    /* --ctr-accent */
    .u-var-ctr-accent-16a34a { --ctr-accent: #16a34a; }
    .u-var-ctr-accent-2563eb { --ctr-accent: #2563eb; }
    .u-var-ctr-accent-6b7280 { --ctr-accent: #6b7280; }
    .u-var-ctr-accent-7c3aed { --ctr-accent: #7c3aed; }
    .u-var-ctr-accent-d97706 { --ctr-accent: #d97706; }
    .u-var-ctr-accent-dc2626 { --ctr-accent: #dc2626; }

    /* --ctr-icon-bg */
    .u-var-ctr-icon-bg-dbeafe { --ctr-icon-bg: #dbeafe; }
    .u-var-ctr-icon-bg-dcfce7 { --ctr-icon-bg: #dcfce7; }
    .u-var-ctr-icon-bg-ede9fe { --ctr-icon-bg: #ede9fe; }
    .u-var-ctr-icon-bg-f3f4f6 { --ctr-icon-bg: #f3f4f6; }
    .u-var-ctr-icon-bg-fee2e2 { --ctr-icon-bg: #fee2e2; }
    .u-var-ctr-icon-bg-fef3c7 { --ctr-icon-bg: #fef3c7; }

    /* --ctr-icon-fg */
    .u-var-ctr-icon-fg-166534 { --ctr-icon-fg: #166534; }
    .u-var-ctr-icon-fg-1d4ed8 { --ctr-icon-fg: #1d4ed8; }
    .u-var-ctr-icon-fg-374151 { --ctr-icon-fg: #374151; }
    .u-var-ctr-icon-fg-5b21b6 { --ctr-icon-fg: #5b21b6; }
    .u-var-ctr-icon-fg-6d28d9 { --ctr-icon-fg: #6d28d9; }
    .u-var-ctr-icon-fg-b45309 { --ctr-icon-fg: #b45309; }
    .u-var-ctr-icon-fg-dc2626 { --ctr-icon-fg: #dc2626; }

    /* align-items */
    .u-items-baseline { align-items: baseline; }
    .u-items-center { align-items: center; }
    .u-items-end { align-items: end; }
    .u-items-flex-end { align-items: flex-end; }
    .u-items-flex-start { align-items: flex-start; }
    .u-items-start { align-items: start; }
    .u-items-stretch { align-items: stretch; }

    /* background */
    .u-bg-111827 { background: #111827; }
    .u-bg-16a34a { background: #16a34a; }
    .u-bg-3b82f6 { background: #3b82f6; }
    .u-bg-9ca3af { background: #9ca3af; }
    .u-bg-border-soft { background: var(--c-border-soft); }
    .u-bg-dc2626 { background: #dc2626; }
    .u-bg-dcfce7 { background: #dcfce7; }
    .u-bg-e5e7eb { background: #e5e7eb; }
    .u-bg-ec4899 { background: #ec4899; }
    .u-bg-ecfdf5 { background: #ecfdf5; }
    .u-bg-eef0f2 { background: #eef0f2; }
    .u-bg-eef2ff { background: #eef2ff; }
    .u-bg-eff6ff { background: #eff6ff; }
    .u-bg-f0fdf4 { background: #f0fdf4; }
    .u-bg-f3f4f6 { background: #f3f4f6; }
    .u-bg-f8fafc { background: #f8fafc; }
    .u-bg-f9fafb { background: #f9fafb; }
    .u-bg-fee2e2 { background: #fee2e2; }
    .u-bg-fef2f2 { background: #fef2f2; }
    .u-bg-fef3c7 { background: #fef3c7; }
    .u-bg-fff { background: #fff; }
    .u-bg-fff5f5 { background: #fff5f5; }
    .u-bg-fff7ed { background: #fff7ed; }
    .u-bg-fffbeb { background: #fffbeb; }
    .u-bg-linear-gradient-to-bc766 { background: linear-gradient(to bottom, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); }
    .u-bg-none { background: none; }
    .u-bg-primary { background: var(--c-primary); }
    .u-bg-primary-light { background: var(--c-primary-light); }
    .u-bg-rgba-0-0-0-0_45 { background: rgba(0, 0, 0, 0.45); }
    .u-bg-rgba-15-23-42-0_55 { background: rgba(15, 23, 42, 0.55); }
    .u-bg-rgba-17-24-39-0_82 { background: rgba(17, 24, 39, 0.82); }
    .u-bg-rgba-primary-rgb-0_1 { background: rgba(var(--c-primary-rgb), 0.1); }
    .u-bg-rgba-primary-rgb-0_12 { background: rgba(var(--c-primary-rgb), 0.12); }
    .u-bg-transparent { background: transparent; }

    /* border */
    .u-b-0 { border: 0; }
    .u-b-1-dashed-border { border: 1px dashed var(--c-border); }
    .u-b-1-solid-bbf7d0 { border: 1px solid #bbf7d0; }
    .u-b-1-solid-bfdbfe { border: 1px solid #bfdbfe; }
    .u-b-1-solid-border { border: 1px solid var(--c-border); }
    .u-b-1-solid-cbd5e1 { border: 1px solid #cbd5e1; }
    .u-b-1-solid-d1d5db { border: 1px solid #d1d5db; }
    .u-b-1-solid-e2e8f0 { border: 1px solid #e2e8f0; }
    .u-b-1-solid-e5e7eb { border: 1px solid #e5e7eb; }
    .u-b-1-solid-eef0f2 { border: 1px solid #eef0f2; }
    .u-b-1-solid-fde68a { border: 1px solid #fde68a; }
    .u-b-1-solid-fecaca { border: 1px solid #fecaca; }
    .u-b-1-solid-fed7aa { border: 1px solid #fed7aa; }
    .u-b-1-solid-rgba-0-0-0-0_3 { border: 1px solid rgba(0, 0, 0, 0.3); }
    .u-b-1-solid-var-c-border-eee { border: 1px solid var(--c-border, #eee); }
    .u-b-2-dashed-16a34a { border: 2px dashed #16a34a; }
    .u-b-2-dashed-d1d5db { border: 2px dashed #d1d5db; }
    .u-b-2-solid-fff { border: 2px solid #fff; }
    .u-b-none { border: none; }

    /* border-collapse */
    .u-bcol-collapse { border-collapse: collapse; }

    /* border-radius */
    .u-r-10 { border-radius: 10px; }
    .u-r-12 { border-radius: 12px; }
    .u-r-14 { border-radius: 14px; }
    .u-r-16 { border-radius: 16px; }
    .u-r-20 { border-radius: 20px; }
    .u-r-3 { border-radius: 3px; }
    .u-r-4 { border-radius: 4px; }
    .u-r-5 { border-radius: 5px; }
    .u-r-50pct { border-radius: 50%; }
    .u-r-6 { border-radius: 6px; }
    .u-r-7 { border-radius: 7px; }
    .u-r-8 { border-radius: 8px; }
    .u-r-9 { border-radius: 9px; }
    .u-r-99 { border-radius: 99px; }
    .u-r-999 { border-radius: 999px; }
    .u-r-radius { border-radius: var(--radius); }

    /* box-shadow */
    .u-shadow-0-0-0-1-rgba-0-0-0-0_35 { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); }
    .u-shadow-0-1-2-rgba-16-24-40-0_04 { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
    .u-shadow-0-1-2-rgba-16-24-40-0_08 { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); }
    .u-shadow-0-1-3-rgba-0-0-0-0_04 { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); }
    .u-shadow-0-1-4-rgba-0-0-0-0_05 { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); }
    .u-shadow-0-20-48-rgba-16-24-40-0_28 { box-shadow: 0 20px 48px rgba(16, 24, 40, 0.28); }
    .u-shadow-0-20-50-rgba-0-0-0-0_2 { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2); }
    .u-shadow-shadow-lg { box-shadow: var(--shadow-lg); }
    .u-shadow-0-8-24-rgba-0-0-0-0_12 { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }

    /* color */
    .u-c-111827 { color: #111827; }
    .u-c-15803d { color: #15803d; }
    .u-c-166534 { color: #166534; }
    .u-c-16a34a { color: #16a34a; }
    .u-c-1d4ed8 { color: #1d4ed8; }
    .u-c-374151 { color: #374151; }
    .u-c-3b82f6 { color: #3b82f6; }
    .u-c-4338ca { color: #4338ca; }
    .u-c-475569 { color: #475569; }
    .u-c-4b5563 { color: #4b5563; }
    .u-c-5b21b6 { color: #5b21b6; }
    .u-c-64748b { color: #64748b; }
    .u-c-6b7280 { color: #6b7280; }
    .u-c-7f1d1d { color: #7f1d1d; }
    .u-c-92400e { color: #92400e; }
    .u-c-94a3b8 { color: #94a3b8; }
    .u-c-991b1b { color: #991b1b; }
    .u-c-9a3412 { color: #9a3412; }
    .u-c-9ca3af { color: #9ca3af; }
    .u-c-b45309 { color: #b45309; }
    .u-c-b91c1c { color: #b91c1c; }
    .u-c-c2410c { color: #c2410c; }
    .u-c-c3c9d1 { color: #c3c9d1; }
    .u-c-cbd5e1 { color: #cbd5e1; }
    .u-c-d1d5db { color: #d1d5db; }
    .u-c-danger { color: var(--c-danger); }
    .u-c-dc2626 { color: #dc2626; }
    .u-c-fff { color: #fff; }
    .u-c-inherit { color: inherit; }
    .u-c-muted { color: var(--c-muted); }
    .u-c-primary { color: var(--c-primary); }
    .u-c-primary-text { color: var(--c-primary-text); }
    .u-c-success { color: var(--c-success); }
    .u-c-text { color: var(--c-text); }
    .u-c-text-soft { color: var(--c-text-soft); }
    .u-c-var-c-primary-16a34a { color: var(--c-primary, #16a34a); }

    /* cursor */
    .u-cursor-crosshair { cursor: crosshair; }
    .u-cursor-not-allowed { cursor: not-allowed; }
    .u-cursor-pointer { cursor: pointer; }

    /* display */
    .u-d-block { display: block; }
    .u-d-flex { display: flex; }
    .u-d-grid { display: grid; }
    .u-d-inline { display: inline; }
    .u-d-inline-block { display: inline-block; }
    .u-d-inline-flex { display: inline-flex; }
    .u-d-none { display: none; }

    /* flex */
    .u-flex-1 { flex: 1; }
    .u-flex-1-1-0pct { flex: 1 1 0%; }

    /* gap */
    .u-gap-0 { gap: 0; }
    .u-gap-10 { gap: 10px; }
    .u-gap-11 { gap: 11px; }
    .u-gap-12 { gap: 12px; }
    .u-gap-13 { gap: 13px; }
    .u-gap-14 { gap: 14px; }
    .u-gap-16 { gap: 16px; }
    .u-gap-16-24 { gap: 16px 24px; }
    .u-gap-18 { gap: 18px; }
    .u-gap-20 { gap: 20px; }
    .u-gap-22 { gap: 22px; }
    .u-gap-24 { gap: 24px; }
    .u-gap-4 { gap: 4px; }
    .u-gap-5 { gap: 5px; }
    .u-gap-6 { gap: 6px; }
    .u-gap-6-18 { gap: 6px 18px; }
    .u-gap-7 { gap: 7px; }
    .u-gap-8 { gap: 8px; }
    .u-gap-9 { gap: 9px; }

    /* grid-column */
    .u-gcol-1-n1 { grid-column: 1/-1; }
    .u-gcol-1-n1-2 { grid-column: 1 / -1; }

    /* grid-template-columns */
    .u-cols-120-1fr-1fr-auto { grid-template-columns: 120px 1fr 1fr auto; }
    .u-cols-1_4fr-1fr-1fr-0_8fr { grid-template-columns: 1.4fr 1fr 1fr 0.8fr; }
    .u-cols-1fr-1fr { grid-template-columns: 1fr 1fr; }
    .u-cols-1fr-1fr-1fr { grid-template-columns: 1fr 1fr 1fr; }
    .u-cols-1fr-1fr-1fr-auto { grid-template-columns: 1fr 1fr 1fr auto; }
    .u-cols-1fr-1fr-90-auto { grid-template-columns: 1fr 1fr 90px auto; }
    .u-cols-1fr-auto { grid-template-columns: 1fr auto; }
    .u-cols-64-1fr-1fr-90-auto { grid-template-columns: 64px 1fr 1fr 90px auto; }
    .u-cols-auto-1fr { grid-template-columns: auto 1fr; }
    .u-cols-minmax-0-1fr-272 { grid-template-columns: minmax(0, 1fr) 272px; }
    .u-cols-minmax-0-1fr-280 { grid-template-columns: minmax(0, 1fr) 280px; }
    .u-cols-minmax-0-1fr-320 { grid-template-columns: minmax(0, 1fr) 320px; }
    .u-cols-repeat-3-1fr { grid-template-columns: repeat(3, 1fr); }
    .u-cols-repeat-3-minmax-0-1fr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .u-cols-repeat-7-1fr { grid-template-columns: repeat(7, 1fr); }
    .u-cols-repeat-auto-fit-mi-5b03d { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .u-cols-repeat-auto-fit-mi-d4900 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

    /* height */
    .u-h-10 { height: 10px; }
    .u-h-100pct { height: 100%; }
    .u-h-11 { height: 11px; }
    .u-h-12 { height: 12px; }
    .u-h-13 { height: 13px; }
    .u-h-14 { height: 14px; }
    .u-h-15 { height: 15px; }
    .u-h-150 { height: 150px; }
    .u-h-16 { height: 16px; }
    .u-h-19 { height: 19px; }
    .u-h-20 { height: 20px; }
    .u-h-26 { height: 26px; }
    .u-h-28 { height: 28px; }
    .u-h-30 { height: 30px; }
    .u-h-32 { height: 32px; }
    .u-h-34 { height: 34px; }
    .u-h-36 { height: 36px; }
    .u-h-38 { height: 38px; }
    .u-h-40 { height: 40px; }
    .u-h-42 { height: 42px; }
    .u-h-420 { height: 420px; }
    .u-h-46 { height: 46px; }
    .u-h-48 { height: 48px; }
    .u-h-5 { height: 5px; }
    .u-h-52 { height: 52px; }
    .u-h-56 { height: 56px; }
    .u-h-6 { height: 6px; }
    .u-h-72 { height: 72px; }
    .u-h-8 { height: 8px; }
    .u-h-88 { height: 88px; }
    .u-h-auto { height: auto; }

    /* inset */
    .u-inset-0 { inset: 0; }

    /* justify-content */
    .u-justify-center { justify-content: center; }
    .u-justify-flex-end { justify-content: flex-end; }
    .u-justify-space-between { justify-content: space-between; }

    /* letter-spacing */
    .u-ls-0_03em { letter-spacing: 0.03em; }
    .u-ls-0_04em { letter-spacing: 0.04em; }
    .u-ls-0_3 { letter-spacing: 0.3px; }
    .u-ls-0_5 { letter-spacing: 0.5px; }
    .u-ls-0_6 { letter-spacing: 0.6px; }
    .u-ls-4 { letter-spacing: 4px; }

    /* list-style */
    .u-list-none { list-style: none; }

    /* margin */
    .u-m-0 { margin: 0; }
    .u-m-0-0-10 { margin: 0 0 10px; }
    .u-m-0-0-12 { margin: 0 0 12px; }
    .u-m-0-0-14 { margin: 0 0 14px; }
    .u-m-0-0-16 { margin: 0 0 16px; }
    .u-m-0-0-18 { margin: 0 0 18px; }
    .u-m-0-0-20 { margin: 0 0 20px; }
    .u-m-0-0-3 { margin: 0 0 3px; }
    .u-m-0-0-4 { margin: 0 0 4px; }
    .u-m-0-0-6 { margin: 0 0 6px; }
    .u-m-0-0-8 { margin: 0 0 8px; }
    .u-m-0-6 { margin: 0 6px; }
    .u-m-0-auto { margin: 0 auto; }
    .u-m-0-auto-12 { margin: 0 auto 12px; }
    .u-m-10-0-18 { margin: 10px 0 18px; }
    .u-m-13-0-11 { margin: 13px 0 11px; }
    .u-m-14-0-0 { margin: 14px 0 0; }
    .u-m-14-0-8 { margin: 14px 0 8px; }
    .u-m-16-0 { margin: 16px 0; }
    .u-m-16-0-0 { margin: 16px 0 0; }
    .u-m-18-0-0 { margin: 18px 0 0; }
    .u-m-18-0-12 { margin: 18px 0 12px; }
    .u-m-18-0-6 { margin: 18px 0 6px; }
    .u-m-18-0-8 { margin: 18px 0 8px; }
    .u-m-2-4-2-0 { margin: 2px 4px 2px 0; }
    .u-m-20-0-12 { margin: 20px 0 12px; }
    .u-m-24-0-6 { margin: 24px 0 6px; }
    .u-m-3-0-14 { margin: 3px 0 14px; }
    .u-m-4-0-0 { margin: 4px 0 0; }
    .u-m-4-0-0-24 { margin: 4px 0 0 24px; }
    .u-m-4-0-3 { margin: 4px 0 3px; }
    .u-m-6-0-0 { margin: 6px 0 0; }
    .u-m-6-0-0-18 { margin: 6px 0 0 18px; }
    .u-m-6-0-8 { margin: 6px 0 8px; }
    .u-m-8-0-0 { margin: 8px 0 0; }
    .u-m-8-0-10 { margin: 8px 0 10px; }
    .u-m-auto { margin: auto; }
    .u-m-n4-0-12 { margin: -4px 0 12px; }
    .u-m-n4-0-14 { margin: -4px 0 14px; }
    .u-m-n8-0-18 { margin: -8px 0 18px; }

    /* max-height */
    .u-maxh-220 { max-height: 220px; }
    .u-maxh-320 { max-height: 320px; }
    .u-maxh-64vh { max-height: 64vh; }
    .u-maxh-74vh { max-height: 74vh; }
    .u-maxh-80 { max-height: 80px; }
    .u-maxh-240 { max-height: 240px; }

    /* max-width */
    .u-maxw-100pct { max-width: 100%; }
    .u-maxw-104 { max-width: 104px; }
    .u-maxw-110 { max-width: 110px; }
    .u-maxw-112 { max-width: 112px; }
    .u-maxw-150 { max-width: 150px; }
    .u-maxw-200 { max-width: 200px; }
    .u-maxw-220 { max-width: 220px; }
    .u-maxw-230 { max-width: 230px; }
    .u-maxw-390 { max-width: 390px; }
    .u-maxw-420 { max-width: 420px; }
    .u-maxw-440 { max-width: 440px; }
    .u-maxw-460 { max-width: 460px; }
    .u-maxw-470 { max-width: 470px; }
    .u-maxw-480 { max-width: 480px; }
    .u-maxw-560 { max-width: 560px; }
    .u-maxw-640 { max-width: 640px; }
    .u-maxw-680 { max-width: 680px; }
    .u-maxw-700 { max-width: 700px; }
    .u-maxw-760 { max-width: 760px; }
    .u-maxw-780 { max-width: 780px; }
    .u-maxw-80 { max-width: 80px; }
    .u-maxw-820 { max-width: 820px; }
    .u-maxw-860 { max-width: 860px; }
    .u-maxw-900 { max-width: 900px; }

    /* min-height */
    .u-minh-200 { min-height: 200px; }
    .u-minh-24 { min-height: 24px; }
    .u-minh-36 { min-height: 36px; }
    .u-minh-86 { min-height: 86px; }

    /* min-width */
    .u-minw-0 { min-width: 0; }
    .u-minw-1015 { min-width: 1015px; }
    .u-minw-110 { min-width: 110px; }
    .u-minw-132 { min-width: 132px; }
    .u-minw-140 { min-width: 140px; }
    .u-minw-150 { min-width: 150px; }
    .u-minw-160 { min-width: 160px; }
    .u-minw-180 { min-width: 180px; }
    .u-minw-19 { min-width: 19px; }
    .u-minw-220 { min-width: 220px; }
    .u-minw-240 { min-width: 240px; }
    .u-minw-260 { min-width: 260px; }
    .u-minw-280 { min-width: 280px; }
    .u-minw-320 { min-width: 320px; }

    /* object-fit */
    .u-fit-contain { object-fit: contain; }
    .u-fit-cover { object-fit: cover; }

    /* opacity */
    .u-op-0_4 { opacity: 0.4; }
    .u-op-0_5 { opacity: 0.5; }
    .u-op-0_55 { opacity: 0.55; }
    .u-op-1 { opacity: 1; }
    .u-op-0_45 { opacity: 0.45; }

    /* overflow */
    .u-ov-auto { overflow: auto; }
    .u-ov-hidden { overflow: hidden; }

    /* padding */
    .u-p-0 { padding: 0; }
    .u-p-0-0-16 { padding: 0 0 16px; }
    .u-p-0-0-18 { padding: 0 0 18px; }
    .u-p-0-10 { padding: 0 10px; }
    .u-p-0-14 { padding: 0 14px; }
    .u-p-0-16 { padding: 0 16px; }
    .u-p-0-18 { padding: 0 18px; }
    .u-p-0-22-20 { padding: 0 22px 20px; }
    .u-p-0-24 { padding: 0 24px; }
    .u-p-0-24-22 { padding: 0 24px 22px; }
    .u-p-0-6 { padding: 0 6px; }
    .u-p-1-7 { padding: 1px 7px; }
    .u-p-10-10 { padding: 10px 10px; }
    .u-p-10-12 { padding: 10px 12px; }
    .u-p-10-14 { padding: 10px 14px; }
    .u-p-10-16 { padding: 10px 16px; }
    .u-p-10-20 { padding: 10px 20px; }
    .u-p-10-22 { padding: 10px 22px; }
    .u-p-10-7 { padding: 10px 7px; }
    .u-p-10-8 { padding: 10px 8px; }
    .u-p-11-10 { padding: 11px 10px; }
    .u-p-11-12 { padding: 11px 12px; }
    .u-p-11-14 { padding: 11px 14px; }
    .u-p-11-28 { padding: 11px 28px; }
    .u-p-11-7 { padding: 11px 7px; }
    .u-p-11-8 { padding: 11px 8px; }
    .u-p-12-0 { padding: 12px 0; }
    .u-p-12-0-0 { padding: 12px 0 0; }
    .u-p-12-14 { padding: 12px 14px; }
    .u-p-12-16 { padding: 12px 16px; }
    .u-p-12-18 { padding: 12px 18px; }
    .u-p-12-20 { padding: 12px 20px; }
    .u-p-13-16 { padding: 13px 16px; }
    .u-p-13-15 { padding: 13px 15px; }
    .u-p-14 { padding: 14px; }
    .u-p-14-0 { padding: 14px 0; }
    .u-p-14-0-0 { padding: 14px 0 0; }
    .u-p-14-0-4 { padding: 14px 0 4px; }
    .u-p-14-16 { padding: 14px 16px; }
    .u-p-14-20-0 { padding: 14px 20px 0; }
    .u-p-16 { padding: 16px; }
    .u-p-16-18 { padding: 16px 18px; }
    .u-p-16-24 { padding: 16px 24px; }
    .u-p-18 { padding: 18px; }
    .u-p-18-0 { padding: 18px 0; }
    .u-p-18-20 { padding: 18px 20px; }
    .u-p-18-22 { padding: 18px 22px; }
    .u-p-18-24 { padding: 18px 24px; }
    .u-p-18-4 { padding: 18px 4px; }
    .u-p-2-10 { padding: 2px 10px; }
    .u-p-2-7 { padding: 2px 7px; }
    .u-p-2-8 { padding: 2px 8px; }
    .u-p-2-9 { padding: 2px 9px; }
    .u-p-20 { padding: 20px; }
    .u-p-20-22-0 { padding: 20px 22px 0; }
    .u-p-20-24 { padding: 20px 24px; }
    .u-p-20-24-0 { padding: 20px 24px 0; }
    .u-p-20-24-24 { padding: 20px 24px 24px; }
    .u-p-22 { padding: 22px; }
    .u-p-22-24 { padding: 22px 24px; }
    .u-p-22-24-18 { padding: 22px 24px 18px; }
    .u-p-22-26 { padding: 22px 26px; }
    .u-p-22-26-14 { padding: 22px 26px 14px; }
    .u-p-24 { padding: 24px; }
    .u-p-26-18 { padding: 26px 18px; }
    .u-p-26-28 { padding: 26px 28px; }
    .u-p-3 { padding: 3px; }
    .u-p-3-10 { padding: 3px 10px; }
    .u-p-3-11 { padding: 3px 11px; }
    .u-p-3-12 { padding: 3px 12px; }
    .u-p-3-9 { padding: 3px 9px; }
    .u-p-32 { padding: 32px; }
    .u-p-32-16 { padding: 32px 16px; }
    .u-p-34-18 { padding: 34px 18px; }
    .u-p-4-10 { padding: 4px 10px; }
    .u-p-4-12 { padding: 4px 12px; }
    .u-p-40 { padding: 40px; }
    .u-p-40-12 { padding: 40px 12px; }
    .u-p-40-16 { padding: 40px 16px; }
    .u-p-40-20 { padding: 40px 20px; }
    .u-p-40-24 { padding: 40px 24px; }
    .u-p-48 { padding: 48px; }
    .u-p-48-16 { padding: 48px 16px; }
    .u-p-5-12 { padding: 5px 12px; }
    .u-p-56-16 { padding: 56px 16px; }
    .u-p-56-24 { padding: 56px 24px; }
    .u-p-6-10 { padding: 6px 10px; }
    .u-p-6-11 { padding: 6px 11px; }
    .u-p-6-12 { padding: 6px 12px; }
    .u-p-6-14 { padding: 6px 14px; }
    .u-p-6-16 { padding: 6px 16px; }
    .u-p-6-18 { padding: 6px 18px; }
    .u-p-6-7 { padding: 6px 7px; }
    .u-p-6-8 { padding: 6px 8px; }
    .u-p-6-9 { padding: 6px 9px; }
    .u-p-60-22 { padding: 60px 22px; }
    .u-p-7-14 { padding: 7px 14px; }
    .u-p-8-0 { padding: 8px 0; }
    .u-p-8-12 { padding: 8px 12px; }
    .u-p-8-13 { padding: 8px 13px; }
    .u-p-8-18 { padding: 8px 18px; }
    .u-p-9-10 { padding: 9px 10px; }
    .u-p-9-12 { padding: 9px 12px; }
    .u-p-9-14 { padding: 9px 14px; }
    .u-p-9-16 { padding: 9px 16px; }
    .u-p-9-18 { padding: 9px 18px; }
    .u-p-9-20 { padding: 9px 20px; }

    /* pointer-events */
    .u-pe-none { pointer-events: none; }

    /* position */
    .u-pos-absolute { position: absolute; }
    .u-pos-fixed { position: fixed; }
    .u-pos-relative { position: relative; }
    .u-pos-sticky { position: sticky; }

    /* resize */
    .u-resize-vertical { resize: vertical; }

    /* table-layout */
    .u-table-layout-fixed { table-layout: fixed; }

    /* text-align */
    .u-ta-center { text-align: center; }
    .u-ta-left { text-align: left; }
    .u-ta-right { text-align: right; }

    /* text-decoration */
    .u-td-none { text-decoration: none; }
    .u-td-underline { text-decoration: underline; }

    /* text-overflow */
    .u-tov-ellipsis { text-overflow: ellipsis; }

    /* text-transform */
    .u-tt-uppercase { text-transform: uppercase; }

    /* transform */
    .u-tf-translate-n50pct-n50pct { transform: translate(-50%, -50%); }
    .u-tf-translatey-n50pct { transform: translateY(-50%); }

    /* transition */
    .u-transition-background-0_15s { transition: background 0.15s; }
    .u-transition-box-shadow-0_15s { transition: box-shadow 0.15s; }

    /* vertical-align */
    .u-va-middle { vertical-align: middle; }
    .u-va-n2 { vertical-align: -2px; }

    /* visibility */
    .u-visibility-hidden { visibility: hidden; }

    /* white-space */
    .u-ws-nowrap { white-space: nowrap; }
    .u-ws-pre-wrap { white-space: pre-wrap; }

    /* width */
    .u-w-10 { width: 10px; }
    .u-w-100pct { width: 100%; }
    .u-w-105 { width: 105px; }
    .u-w-11 { width: 11px; }
    .u-w-110 { width: 110px; }
    .u-w-12 { width: 12px; }
    .u-w-13 { width: 13px; }
    .u-w-130 { width: 130px; }
    .u-w-14 { width: 14px; }
    .u-w-140 { width: 140px; }
    .u-w-145 { width: 145px; }
    .u-w-148 { width: 148px; }
    .u-w-15 { width: 15px; }
    .u-w-150 { width: 150px; }
    .u-w-158 { width: 158px; }
    .u-w-16 { width: 16px; }
    .u-w-160 { width: 160px; }
    .u-w-170 { width: 170px; }
    .u-w-180 { width: 180px; }
    .u-w-190 { width: 190px; }
    .u-w-2 { width: 2px; }
    .u-w-20 { width: 20px; }
    .u-w-200 { width: 200px; }
    .u-w-230 { width: 230px; }
    .u-w-24 { width: 24px; }
    .u-w-26 { width: 26px; }
    .u-w-28 { width: 28px; }
    .u-w-30 { width: 30px; }
    .u-w-32 { width: 32px; }
    .u-w-34 { width: 34px; }
    .u-w-36 { width: 36px; }
    .u-w-38 { width: 38px; }
    .u-w-4 { width: 4px; }
    .u-w-40 { width: 40px; }
    .u-w-40pct { width: 40%; }
    .u-w-42 { width: 42px; }
    .u-w-46 { width: 46px; }
    .u-w-48 { width: 48px; }
    .u-w-5 { width: 5px; }
    .u-w-52 { width: 52px; }
    .u-w-56 { width: 56px; }
    .u-w-6 { width: 6px; }
    .u-w-72 { width: 72px; }
    .u-w-8 { width: 8px; }
    .u-w-88 { width: 88px; }
    .u-w-96 { width: 96px; }
    .u-w-auto { width: auto; }
    .u-w-max-content { width: max-content; }

    /* word-break */
    .u-wb-break-all { word-break: break-all; }

    /* z-index */
    .u-z-1 { z-index: 1; }
    .u-z-100 { z-index: 100; }
    .u-z-2 { z-index: 2; }
    .u-z-60 { z-index: 60; }
    .u-z-90 { z-index: 90; }
    .u-z-95 { z-index: 95; }
    .u-z-99999 { z-index: 99999; }

    /* border-bottom */
    .u-bb-1-solid-border { border-bottom: 1px solid var(--c-border); }
    .u-bb-1-solid-border-soft { border-bottom: 1px solid var(--c-border-soft); }
    .u-bb-1-solid-e5e7eb { border-bottom: 1px solid #e5e7eb; }
    .u-bb-1-solid-eef0f2 { border-bottom: 1px solid #eef0f2; }
    .u-bb-1-solid-f3f4f6 { border-bottom: 1px solid #f3f4f6; }
    .u-bb-2-solid-primary { border-bottom: 2px solid var(--c-primary); }
    .u-bb-2-solid-transparent { border-bottom: 2px solid transparent; }

    /* border-color */
    .u-bc-e5e7eb { border-color: #e5e7eb; }
    .u-bc-fecaca { border-color: #fecaca; }

    /* border-left */
    .u-bl-1-solid-d1d5db { border-left: 1px solid #d1d5db; }
    .u-bl-3-solid-fecaca { border-left: 3px solid #fecaca; }

    /* border-right */
    .u-br-1-solid-f3f4f6 { border-right: 1px solid #f3f4f6; }

    /* border-top */
    .u-bt-1-solid-border { border-top: 1px solid var(--c-border); }
    .u-bt-1-solid-e2e8f0 { border-top: 1px solid #e2e8f0; }
    .u-bt-1-solid-f0f2f4 { border-top: 1px solid #f0f2f4; }
    .u-bt-1-solid-f1f5f9 { border-top: 1px solid #f1f5f9; }
    .u-bt-1-solid-f3f4f6 { border-top: 1px solid #f3f4f6; }
    .u-bt-1-solid-fde68a { border-top: 1px solid #fde68a; }

    /* bottom */
    .u-bottom-0 { bottom: 0; }
    .u-bottom-6 { bottom: 6px; }

    /* flex-direction */
    .u-fd-column { flex-direction: column; }

    /* flex-shrink */
    .u-shrink-0 { flex-shrink: 0; }

    /* flex-wrap */
    .u-wrap-nowrap { flex-wrap: nowrap; }
    .u-wrap-wrap { flex-wrap: wrap; }

    /* font-family */
    .u-ff-sf-mono-menlo-monospace { font-family: 'SF Mono', Menlo, monospace; }
    .u-ff-ui-monospace-monospace { font-family: ui-monospace, monospace; }
    .u-ff-inter-sans-serif { font-family: Inter, sans-serif; }

    /* font-size */
    .u-fs-10 { font-size: 10px; }
    .u-fs-10_5 { font-size: 10.5px; }
    .u-fs-11 { font-size: 11px; }
    .u-fs-11_5 { font-size: 11.5px; }
    .u-fs-12 { font-size: 12px; }
    .u-fs-12_5 { font-size: 12.5px; }
    .u-fs-13 { font-size: 13px; }
    .u-fs-13_5 { font-size: 13.5px; }
    .u-fs-14 { font-size: 14px; }
    .u-fs-15 { font-size: 15px; }
    .u-fs-16 { font-size: 16px; }
    .u-fs-17 { font-size: 17px; }
    .u-fs-18 { font-size: 18px; }
    .u-fs-20 { font-size: 20px; }
    .u-fs-22 { font-size: 22px; }
    .u-fs-24 { font-size: 24px; }
    .u-fs-26 { font-size: 26px; }
    .u-fs-46 { font-size: 46px; }
    .u-fs-9 { font-size: 9px; }

    /* font-weight */
    .u-fw-400 { font-weight: 400; }
    .u-fw-500 { font-weight: 500; }
    .u-fw-600 { font-weight: 600; }
    .u-fw-700 { font-weight: 700; }
    .u-fw-800 { font-weight: 800; }

    /* left */
    .u-left-0 { left: 0; }
    .u-left-11 { left: 11px; }
    .u-left-12 { left: 12px; }
    .u-left-12pct { left: 12%; }
    .u-left-15 { left: 15px; }
    .u-left-20pct { left: 20%; }
    .u-left-46pct { left: 46%; }
    .u-left-5 { left: 5px; }
    .u-left-50pct { left: 50%; }
    .u-left-60pct { left: 60%; }
    .u-left-n18 { left: -18px; }

    /* line-height */
    .u-lh-1 { line-height: 1; }
    .u-lh-1_25 { line-height: 1.25; }
    .u-lh-1_45 { line-height: 1.45; }
    .u-lh-1_5 { line-height: 1.5; }
    .u-lh-1_55 { line-height: 1.55; }
    .u-lh-1_6 { line-height: 1.6; }
    .u-lh-1_7 { line-height: 1.7; }
    .u-lh-24 { line-height: 24px; }

    /* margin-bottom */
    .u-mb-0 { margin-bottom: 0; }
    .u-mb-10 { margin-bottom: 10px; }
    .u-mb-12 { margin-bottom: 12px; }
    .u-mb-13 { margin-bottom: 13px; }
    .u-mb-14 { margin-bottom: 14px; }
    .u-mb-16 { margin-bottom: 16px; }
    .u-mb-18 { margin-bottom: 18px; }
    .u-mb-2 { margin-bottom: 2px; }
    .u-mb-20 { margin-bottom: 20px; }
    .u-mb-22 { margin-bottom: 22px; }
    .u-mb-24 { margin-bottom: 24px; }
    .u-mb-28 { margin-bottom: 28px; }
    .u-mb-3 { margin-bottom: 3px; }
    .u-mb-4 { margin-bottom: 4px; }
    .u-mb-5 { margin-bottom: 5px; }
    .u-mb-6 { margin-bottom: 6px; }
    .u-mb-8 { margin-bottom: 8px; }
    .u-mb-9 { margin-bottom: 9px; }

    /* margin-left */
    .u-ml-5 { margin-left: 5px; }
    .u-ml-6 { margin-left: 6px; }
    .u-ml-8 { margin-left: 8px; }
    .u-ml-auto { margin-left: auto; }
    .u-ml-n8 { margin-left: -8px; }

    /* margin-right */
    .u-mr-4 { margin-right: 4px; }
    .u-mr-5 { margin-right: 5px; }
    .u-mr-6 { margin-right: 6px; }

    /* margin-top */
    .u-mt-0 { margin-top: 0; }
    .u-mt-1 { margin-top: 1px; }
    .u-mt-10 { margin-top: 10px; }
    .u-mt-12 { margin-top: 12px; }
    .u-mt-14 { margin-top: 14px; }
    .u-mt-16 { margin-top: 16px; }
    .u-mt-18 { margin-top: 18px; }
    .u-mt-2 { margin-top: 2px; }
    .u-mt-20 { margin-top: 20px; }
    .u-mt-22 { margin-top: 22px; }
    .u-mt-24 { margin-top: 24px; }
    .u-mt-3 { margin-top: 3px; }
    .u-mt-34 { margin-top: 34px; }
    .u-mt-4 { margin-top: 4px; }
    .u-mt-5 { margin-top: 5px; }
    .u-mt-6 { margin-top: 6px; }
    .u-mt-7 { margin-top: 7px; }
    .u-mt-8 { margin-top: 8px; }

    /* overflow-x */
    .u-ovx-auto { overflow-x: auto; }

    /* padding-bottom */
    .u-pb-0 { padding-bottom: 0; }
    .u-pb-18 { padding-bottom: 18px; }
    .u-pb-20 { padding-bottom: 20px; }
    .u-pb-8 { padding-bottom: 8px; }

    /* padding-left */
    .u-pl-18 { padding-left: 18px; }
    .u-pl-34 { padding-left: 34px; }
    .u-pl-38 { padding-left: 38px; }

    /* padding-top */
    .u-pt-1 { padding-top: 1px; }
    .u-pt-10 { padding-top: 10px; }
    .u-pt-12 { padding-top: 12px; }
    .u-pt-14 { padding-top: 14px; }
    .u-pt-16 { padding-top: 16px; }
    .u-pt-18 { padding-top: 18px; }
    .u-pt-20 { padding-top: 20px; }
    .u-pt-26 { padding-top: 26px; }
    .u-pt-5 { padding-top: 5px; }
    .u-pt-6 { padding-top: 6px; }

    /* right */
    .u-right-0 { right: 0; }
    .u-right-8 { right: 8px; }

    /* top */
    .u-top-18pct { top: 18%; }
    .u-top-32 { top: 32px; }
    .u-top-34pct { top: 34%; }
    .u-top-4 { top: 4px; }
    .u-top-50pct { top: 50%; }
    .u-top-6 { top: 6px; }
    .u-top-64pct { top: 64%; }
    .u-top-70pct { top: 70%; }
    .u-top-8 { top: 8px; }
}