/* /Layout/LoginDisplay.razor.rz.scp.css */
/* ============================================================
   LoginDisplay — user chip in the topbar
   ============================================================ */

.user-chip[b-jkacn6ohit] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-inline: var(--space-3);
}

.user-avatar[b-jkacn6ohit] {
    inline-size: 32px;
    block-size: 32px;
    border-radius: 50%;
    background: var(--color-brand-subtle);
    color: var(--color-brand-active);
    display: grid;
    place-items: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    flex: 0 0 32px;
}

.user-meta[b-jkacn6ohit] {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}

.user-name[b-jkacn6ohit] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-inline-size: 200px;
}

.user-role[b-jkacn6ohit] {
    margin-block-start: 2px;
    color: var(--color-ink-muted);
}

.user-logout[b-jkacn6ohit] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-inline-start: var(--space-4);
    padding-inline: var(--space-4);
}

.user-logout svg[b-jkacn6ohit] {
    flex-shrink: 0;
}

[dir="rtl"] .user-logout svg[b-jkacn6ohit] {
    transform: scaleX(-1);
}

/* Mobile: collapse the role line and show just the name + avatar */
@media (max-width: 640px) {
    .user-meta[b-jkacn6ohit] { display: none; }
    .user-logout span[b-jkacn6ohit] { display: none; }
    .user-logout[b-jkacn6ohit] {
        padding-inline: var(--space-3);
        margin-inline-start: var(--space-3);
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* ============================================================
   MainLayout — app shell
   Desktop: persistent sidebar inline-start
   Mobile (<768px): slide-in drawer behind a hamburger
   ============================================================ */

.page[b-t64ii49725] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--color-canvas);
}

.sidebar[b-t64ii49725] {
    background: var(--color-surface);
    border-block-end: 1px solid var(--color-border);
}

.page-shell[b-t64ii49725] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.topbar[b-t64ii49725] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--topbar-height);
    padding-inline: var(--space-6);
    background: var(--color-surface);
    border-block-end: 1px solid var(--color-border);
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    backdrop-filter: saturate(180%) blur(8px);
    gap: var(--space-4);
}

.topbar-trail[b-t64ii49725] {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    min-width: 0;
}

.hamburger[b-t64ii49725] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 40px;
    block-size: 40px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-ink);
    cursor: pointer;
    flex: 0 0 40px;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.hamburger:hover[b-t64ii49725] {
    background: var(--color-surface-sunken);
    border-color: var(--color-border-strong);
}

.hamburger:focus-visible[b-t64ii49725] {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.content[b-t64ii49725] {
    flex: 1;
    padding-inline: var(--page-padding-inline);
    padding-block: var(--page-padding-block);
    max-width: var(--max-content-width);
    inline-size: 100%;
    margin-inline: auto;
}

.drawer-scrim[b-t64ii49725] {
    display: none;
}

/* ---------- Wide screens: sidebar persistent ---------- */
@media (min-width: 768px) {
    .page[b-t64ii49725] {
        flex-direction: row;
        align-items: stretch;
    }

    .sidebar[b-t64ii49725] {
        inline-size: var(--sidebar-width);
        flex: 0 0 var(--sidebar-width);
        block-size: 100vh;
        position: sticky;
        inset-block-start: 0;
        border-block-end: none;
        border-inline-end: 1px solid var(--color-border);
        overflow-y: auto;
        transform: none !important; /* always shown on desktop */
    }

    .hamburger[b-t64ii49725] {
        display: none;
    }

    .topbar[b-t64ii49725] {
        padding-inline: var(--space-10);
    }

    /* Desktop: keep the user chip / logout on the visual left in both LTR and RTL */
    [dir="rtl"] .topbar[b-t64ii49725] {
        justify-content: flex-end;
    }
}

/* ---------- Mobile: sidebar becomes a slide-in drawer + bottom tab bar ---------- */
@media (max-width: 767.98px) {
    .sidebar[b-t64ii49725] {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        inline-size: min(82vw, 320px);
        z-index: 30;
        transform: translateX(-100%);
        transition: transform var(--duration-med) var(--ease-out);
        box-shadow: var(--shadow-lg);
        border-block-end: none;
        border-inline-end: 1px solid var(--color-border);
        overflow-y: auto;
    }

    [dir="rtl"] .sidebar[b-t64ii49725] {
        transform: translateX(100%);
    }

    .drawer-open .sidebar[b-t64ii49725] {
        transform: translateX(0);
    }

    .drawer-open .drawer-scrim[b-t64ii49725] {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(10, 10, 10, 0.4);
        backdrop-filter: blur(2px);
        z-index: 20;
        animation: fade-in-b-t64ii49725 var(--duration-fast) var(--ease-out);
    }

    /* Hamburger moves into the bottom tab bar; topbar only shows the user chip + page title. */
    .hamburger[b-t64ii49725] { display: none; }

    .content[b-t64ii49725] {
        padding-inline: var(--space-6);
        padding-block: var(--space-6);
        /* Reserve space for the bottom tab bar so content isn't hidden behind it. */
        padding-block-end: calc(76px + env(safe-area-inset-bottom, 0px) + var(--space-4));
    }
}

@keyframes fade-in-b-t64ii49725 {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* /Layout/MobileTabBar.razor.rz.scp.css */
/* ============================================================
   MobileTabBar — bottom navigation, app-style.
   Only visible on phones (<768px). Sticks to the inset-block-end.
   ============================================================ */

.mobtab[b-86zcky1yd8] {
    display: none;
}

@media (max-width: 767.98px) {
    .mobtab[b-86zcky1yd8] {
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: 25;
        block-size: 68px;
        padding-block: var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom, 0));
        background: var(--color-surface);
        border-block-start: 1px solid var(--color-border);
        box-shadow: 0 -4px 16px -8px rgba(10, 10, 10, 0.10);
        backdrop-filter: saturate(180%) blur(8px);
    }

    [b-86zcky1yd8] .mobtab-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        background: transparent;
        border: 0;
        color: var(--color-ink-muted);
        text-decoration: none;
        font-family: var(--font-sans);
        font-size: var(--font-size-2xs);
        font-weight: var(--font-weight-medium);
        cursor: pointer;
        padding: 0 var(--space-2);
        position: relative;
        transition: color var(--duration-fast) var(--ease-out);
    }

    [b-86zcky1yd8] .mobtab-item:hover { color: var(--color-ink); }

    [b-86zcky1yd8] .mobtab-item.active {
        color: var(--color-brand);
    }

    [b-86zcky1yd8] .mobtab-item.active::before {
        content: "";
        position: absolute;
        inset-block-start: -1px;
        inset-inline-start: 25%;
        inset-inline-end: 25%;
        block-size: 3px;
        background: var(--color-brand);
        border-radius: 0 0 var(--radius-pill) var(--radius-pill);
    }

    [b-86zcky1yd8] .mobtab-icon {
        display: grid;
        place-items: center;
        inline-size: 24px;
        block-size: 24px;
    }

    [b-86zcky1yd8] .mobtab-label {
        font-size: 10px;
        line-height: 1;
    }

    /* Center FAB-style "+" button */
    [b-86zcky1yd8] .mobtab-fab {
        align-self: center;
    }

    [b-86zcky1yd8] .mobtab-fab-circle {
        display: grid;
        place-items: center;
        inline-size: 52px;
        block-size: 52px;
        border-radius: 50%;
        background: var(--color-brand);
        color: white;
        box-shadow: 0 8px 20px -4px rgba(15, 107, 71, 0.5);
        transform: translateY(-18px);
        transition: transform var(--duration-fast) var(--ease-out),
                    box-shadow var(--duration-fast) var(--ease-out);
    }

    [b-86zcky1yd8] .mobtab-fab.active .mobtab-fab-circle {
        background: var(--color-brand-active);
    }

    [b-86zcky1yd8] .mobtab-fab:active .mobtab-fab-circle {
        transform: translateY(-14px) scale(0.96);
        box-shadow: 0 4px 10px -4px rgba(15, 107, 71, 0.5);
    }

    [b-86zcky1yd8] .mobtab-fab-label {
        margin-block-start: -10px;
    }

    /* No underline indicator on the FAB or menu button */
    [b-86zcky1yd8] .mobtab-fab::before,
    [b-86zcky1yd8] .mobtab-menu::before {
        display: none;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* ============================================================
   NavMenu — sidebar navigation
   ============================================================ */

.nav-shell[b-x0nqv3trmb] {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    padding: var(--space-8) var(--space-5) var(--space-6);
}

/* ---------- Brand block ---------- */
.brand[b-x0nqv3trmb] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-inline: var(--space-3);
    padding-block-end: var(--space-8);
    border-block-end: 1px solid var(--color-border);
    margin-block-end: var(--space-6);
}

.brand-mark[b-x0nqv3trmb] {
    inline-size: 36px;
    block-size: 36px;
    border-radius: var(--radius-md);
    background: var(--color-brand);
    color: var(--color-brand-ink);
    display: grid;
    place-items: center;
    flex: 0 0 36px;
}

.brand-text[b-x0nqv3trmb] {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}

.brand-title[b-x0nqv3trmb] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink);
    letter-spacing: var(--letter-spacing-tight);
}

.brand-subtitle[b-x0nqv3trmb] {
    margin-block-start: var(--space-2);
    color: var(--color-ink-muted);
}

/* ---------- Nav items ---------- */
.nav-items[b-x0nqv3trmb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
}

.nav-section[b-x0nqv3trmb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-block-start: var(--space-6);
}

.nav-section-title[b-x0nqv3trmb] {
    padding-inline: var(--space-3);
    padding-block: var(--space-2) var(--space-3);
    color: var(--color-ink-muted);
}

[b-x0nqv3trmb] .nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-ink-soft);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
    position: relative;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

[b-x0nqv3trmb] .nav-item:hover {
    background: var(--color-surface-sunken);
    color: var(--color-ink);
}

[b-x0nqv3trmb] .nav-item.active {
    background: var(--color-brand-subtle);
    color: var(--color-brand-active);
}

[b-x0nqv3trmb] .nav-item.active::before {
    content: "";
    position: absolute;
    inset-inline-start: -5px;
    inset-block: 8px;
    inline-size: 3px;
    border-radius: var(--radius-pill);
    background: var(--color-brand);
}

[b-x0nqv3trmb] .nav-icon {
    inline-size: 22px;
    block-size: 22px;
    display: grid;
    place-items: center;
    color: currentColor;
    opacity: 0.85;
    flex: 0 0 22px;
}

[b-x0nqv3trmb] .nav-item.active .nav-icon {
    opacity: 1;
}

[b-x0nqv3trmb] .nav-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Footer (language switch) ---------- */
.nav-footer[b-x0nqv3trmb] {
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-border);
}

.lang-chip[b-x0nqv3trmb] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    inline-size: 100%;
    padding: var(--space-4) var(--space-3);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-ink-soft);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.lang-chip:hover[b-x0nqv3trmb] {
    background: var(--color-surface-sunken);
    border-color: var(--color-border-strong);
    color: var(--color-ink);
}

.lang-chip:focus-visible[b-x0nqv3trmb] {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-color: var(--color-brand);
}

.lang-chip-current[b-x0nqv3trmb] {
    flex: 1;
    text-align: start;
    font-weight: var(--font-weight-medium);
}

.lang-chip-toggle[b-x0nqv3trmb] {
    font-family: var(--font-mono);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-ink-muted);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-sunken);
    border-radius: var(--radius-xs);
}

/* ---------- Mobile (drawer): keep vertical, comfortable touch targets ---------- */
@media (max-width: 767.98px) {
    .nav-shell[b-x0nqv3trmb] {
        padding: var(--space-6) var(--space-5);
        block-size: 100%;
    }

    /* All sections remain stacked; bigger items for finger tap. */
    [b-x0nqv3trmb] .nav-item {
        padding-block: var(--space-5);
    }
}
/* /Models/Pages/Admin/Roles.razor.rz.scp.css */
/* ============================================================
   Roles — split-pane permission matrix
   ============================================================ */

.page-header[b-dnqcvehv6j] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    padding-block-end: var(--space-6);
    border-block-end: 1px solid var(--color-border);
    margin-block-end: var(--space-8);
}

.roles-layout[b-dnqcvehv6j] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}

@media (min-width: 880px) {
    .roles-layout[b-dnqcvehv6j] {
        grid-template-columns: minmax(280px, 1fr) 2fr;
    }
}

.roles-aside[b-dnqcvehv6j] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ---------- Card section heading ---------- */
.card-section-head[b-dnqcvehv6j] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-7) var(--space-8);
    border-block-end: 1px solid var(--color-border);
}

.card-section-title[b-dnqcvehv6j] {
    margin-block-start: var(--space-2);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-ink);
}

.card-section-help[b-dnqcvehv6j] {
    margin-block-start: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-ink-soft);
}

/* ---------- Inline row input ---------- */
.input-row[b-dnqcvehv6j] {
    display: flex;
    gap: var(--space-3);
}

.input-row[b-dnqcvehv6j]  .form-control {
    flex: 1;
}

/* ---------- Role list ---------- */
.role-list[b-dnqcvehv6j] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.role-list-label[b-dnqcvehv6j] {
    padding-inline-start: var(--space-4);
    margin-block-end: var(--space-3);
    color: var(--color-ink-muted);
}

.role-list-item[b-dnqcvehv6j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-align: start;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.role-list-item:hover[b-dnqcvehv6j] {
    background: var(--color-surface-sunken);
    border-color: var(--color-border-strong);
}

.role-list-item.is-active[b-dnqcvehv6j] {
    background: var(--color-brand-subtle);
    border-color: var(--color-brand);
    color: var(--color-brand-active);
}

.role-list-name[b-dnqcvehv6j] {
    font-family: var(--font-mono);
}

[dir="rtl"] .role-list-item svg[b-dnqcvehv6j] {
    transform: scaleX(-1);
}

/* ---------- Permissions grid ---------- */
.perm-grid[b-dnqcvehv6j] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

@media (min-width: 720px) {
    .perm-grid[b-dnqcvehv6j] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.perm-row[b-dnqcvehv6j] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.perm-row:hover[b-dnqcvehv6j] {
    background: var(--color-surface-sunken);
    border-color: var(--color-border-strong);
}

.perm-row:has(.perm-check:checked)[b-dnqcvehv6j] {
    background: var(--color-brand-subtle);
    border-color: rgba(15, 107, 71, 0.25);
}

.perm-check[b-dnqcvehv6j] {
    inline-size: 16px;
    block-size: 16px;
    accent-color: var(--color-brand);
    cursor: pointer;
}

.perm-text[b-dnqcvehv6j] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    flex: 1;
}

.perm-name[b-dnqcvehv6j] {
    font-size: var(--font-size-xs);
    color: var(--color-ink);
    word-break: break-all;
}

/* ---------- Empty state ---------- */
.empty-state[b-dnqcvehv6j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    padding: var(--space-16);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--color-ink-muted);
}

.empty-icon[b-dnqcvehv6j] {
    inline-size: 56px;
    block-size: 56px;
    border-radius: var(--radius-lg);
    background: var(--color-brand-subtle);
    color: var(--color-brand-active);
    display: grid;
    place-items: center;
}

.empty-title[b-dnqcvehv6j] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink);
    letter-spacing: var(--letter-spacing-tight);
}

.empty-help[b-dnqcvehv6j] {
    font-size: var(--font-size-sm);
    color: var(--color-ink-soft);
    max-inline-size: 40ch;
}

.assign-row[b-dnqcvehv6j] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.assign-row[b-dnqcvehv6j]  .form-select {
    flex: 1;
    min-width: 0;
}
/* /Models/Pages/Admin/Sectors.razor.rz.scp.css */
/* ============================================================
   Sectors — grid of municipal zones
   ============================================================ */

.page-header[b-tjs5z19wu3] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    padding-block-end: var(--space-6);
    border-block-end: 1px solid var(--color-border);
    margin-block-end: var(--space-8);
}

.page-actions[b-tjs5z19wu3]  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

/* ---------- Grid ---------- */
.sector-grid[b-tjs5z19wu3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-6);
}

.sector-card[b-tjs5z19wu3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-7);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.sector-card:hover[b-tjs5z19wu3] {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}

.sector-card.is-inactive[b-tjs5z19wu3] {
    background: var(--color-surface-sunken);
    opacity: 0.85;
}

.sector-card-head[b-tjs5z19wu3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sector-mark[b-tjs5z19wu3] {
    inline-size: 36px;
    block-size: 36px;
    border-radius: var(--radius-md);
    background: var(--color-brand-subtle);
    color: var(--color-brand-active);
    display: grid;
    place-items: center;
}

.sector-body[b-tjs5z19wu3] {
    flex: 1;
    min-height: 80px;
}

.sector-name[b-tjs5z19wu3] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-ink);
    margin-block-end: var(--space-3);
}

.sector-boundaries[b-tjs5z19wu3] {
    font-size: var(--font-size-sm);
    color: var(--color-ink-soft);
    line-height: var(--line-height-snug);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sector-foot[b-tjs5z19wu3] {
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-border);
}

/* ---------- Toggle switch ---------- */
.toggle[b-tjs5z19wu3] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    cursor: pointer;
    user-select: none;
}

.toggle-input[b-tjs5z19wu3] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}

.toggle-track[b-tjs5z19wu3] {
    position: relative;
    inline-size: 36px;
    block-size: 20px;
    border-radius: var(--radius-pill);
    background: var(--color-border-strong);
    transition: background-color var(--duration-fast) var(--ease-out);
}

.toggle-thumb[b-tjs5z19wu3] {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-start: 2px;
    inline-size: 16px;
    block-size: 16px;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: inset-inline-start var(--duration-fast) var(--ease-out);
}

.toggle-input:checked + .toggle-track[b-tjs5z19wu3] {
    background: var(--color-brand);
}

.toggle-input:checked + .toggle-track .toggle-thumb[b-tjs5z19wu3] {
    inset-inline-start: 18px;
}

.toggle-input:focus-visible + .toggle-track[b-tjs5z19wu3] {
    box-shadow: var(--shadow-focus);
}

.toggle-label[b-tjs5z19wu3] {
    font-size: var(--font-size-sm);
    color: var(--color-ink-soft);
    font-weight: var(--font-weight-medium);
}

/* ---------- Empty / loading state ---------- */
.sectors-empty[b-tjs5z19wu3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    padding: var(--space-16);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
}

.empty-icon[b-tjs5z19wu3] {
    inline-size: 56px;
    block-size: 56px;
    border-radius: var(--radius-lg);
    background: var(--color-brand-subtle);
    color: var(--color-brand-active);
    display: grid;
    place-items: center;
}

.empty-title[b-tjs5z19wu3] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink);
    letter-spacing: var(--letter-spacing-tight);
}

.empty-help[b-tjs5z19wu3] {
    font-size: var(--font-size-sm);
    color: var(--color-ink-soft);
    max-inline-size: 40ch;
}
/* /Models/Pages/Admin/Triage.razor.rz.scp.css */
/* Triage queue — inherits page-header / data-table from the shared design system.
   Local styles: the inspector's-sector cell pill + a tighter violation chip row. */

.sector-cell[b-j1e1my7ybl] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-brand-subtle);
    color: var(--color-brand-active);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.violations-cell[b-j1e1my7ybl] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.violation-pill[b-j1e1my7ybl] {
    display: inline-flex;
    align-items: center;
    background: var(--color-surface-sunken);
    border-radius: var(--radius-pill);
    padding: 2px 8px;
}

.violation-pill-code[b-j1e1my7ybl] {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink);
}
/* /Models/Pages/Admin/Users.razor.rz.scp.css */
/* ============================================================
   Users — directory + onboarding (redesigned)
   ============================================================ */

.page-header[b-adx06i4nxa] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    padding-block-end: var(--space-6);
    border-block-end: 1px solid var(--color-border);
    margin-block-end: var(--space-8);
}

.page-actions[b-adx06i4nxa] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.page-actions[b-adx06i4nxa]  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

/* ---------- Stats strip (flat colored) ---------- */
.stats-row[b-adx06i4nxa] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-5);
    margin-block-end: var(--space-7);
}

.stat-card[b-adx06i4nxa] {
    position: relative;
    border-radius: var(--radius-lg);
    padding: var(--space-7);
    border: 0;
    overflow: hidden;
    color: white;
}

.stat-card:nth-child(1)[b-adx06i4nxa] { background: linear-gradient(135deg, #0F6B47 0%, #073B26 100%); }
.stat-card:nth-child(2)[b-adx06i4nxa] { background: linear-gradient(135deg, #047857 0%, #064E3B 100%); }
.stat-card:nth-child(3)[b-adx06i4nxa] { background: linear-gradient(135deg, #D97706 0%, #92400E 100%); }
.stat-card:nth-child(4)[b-adx06i4nxa] { background: linear-gradient(135deg, #BE123C 0%, #831843 100%); }

.stat-card[b-adx06i4nxa]::after {
    content: "";
    position: absolute;
    inset-block-start: -40px;
    inset-inline-end: -40px;
    inline-size: 140px;
    block-size: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.stat-label[b-adx06i4nxa] {
    color: rgba(255, 255, 255, 0.85);
    position: relative;
    z-index: 1;
}

.stat-value[b-adx06i4nxa] {
    margin-block-start: var(--space-4);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: white;
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1;
    position: relative;
    z-index: 1;
}

/* keep the modifier classes but neutralize their old colors (the cards are colored by nth-child) */
.stat-active[b-adx06i4nxa], .stat-pending[b-adx06i4nxa], .stat-suspended[b-adx06i4nxa] { color: white; }

/* ---------- Pending callout banner ---------- */
.callout[b-adx06i4nxa] {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-6);
    background: var(--color-status-reported-bg);
    border: 1px solid rgba(180, 83, 9, 0.2);
    border-radius: var(--radius-md);
    margin-block-end: var(--space-6);
}

.callout-icon[b-adx06i4nxa] {
    inline-size: 40px;
    block-size: 40px;
    border-radius: var(--radius-md);
    background: rgba(180, 83, 9, 0.15);
    color: var(--color-status-reported-fg);
    display: grid;
    place-items: center;
    flex: 0 0 40px;
}

.callout-body[b-adx06i4nxa] {
    flex: 1;
    min-width: 0;
}

.callout-title[b-adx06i4nxa] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-status-reported-fg);
    letter-spacing: var(--letter-spacing-tight);
}

.callout-help[b-adx06i4nxa] {
    margin-block-start: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-ink-soft);
}

/* ---------- Directory card head ---------- */
.directory-card[b-adx06i4nxa] {
    overflow: hidden;
}

.card-section-head[b-adx06i4nxa] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-7) var(--space-8);
    border-block-end: 1px solid var(--color-border);
}

.card-section-title[b-adx06i4nxa] {
    margin-block-start: var(--space-2);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-ink);
}

.search-input[b-adx06i4nxa] {
    position: relative;
    display: flex;
    align-items: center;
    min-inline-size: 240px;
}

.search-input svg[b-adx06i4nxa] {
    position: absolute;
    inset-inline-start: var(--space-4);
    color: var(--color-ink-muted);
    pointer-events: none;
}

[b-adx06i4nxa] .search-input .form-control {
    padding-inline-start: calc(var(--space-4) + 14px + var(--space-3));
}

/* ---------- Filter bar (segmented + role dropdown) ---------- */
.filter-bar[b-adx06i4nxa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-8);
    background: var(--color-surface-sunken);
    border-block-end: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.filter-segmented[b-adx06i4nxa] {
    display: inline-flex;
    padding: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    gap: var(--space-2);
}

.filter-tab[b-adx06i4nxa] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-ink-soft);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.filter-tab:hover[b-adx06i4nxa] { color: var(--color-ink); }

.filter-tab.is-active[b-adx06i4nxa] {
    background: var(--color-brand);
    color: white;
    box-shadow: var(--shadow-sm);
}

.filter-tab.is-active .status-dot[b-adx06i4nxa] {
    background: white !important;
}

.status-dot[b-adx06i4nxa] {
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
}

.status-dot[data-status="reported"][b-adx06i4nxa] { background: var(--color-status-reported-fg); }
.status-dot[data-status="resolved"][b-adx06i4nxa] { background: var(--color-status-resolved-fg); }
.status-dot[data-status="rejected"][b-adx06i4nxa] { background: var(--color-status-rejected-fg); }

.filter-count[b-adx06i4nxa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 22px;
    padding: 0 var(--space-3);
    block-size: 18px;
    border-radius: var(--radius-pill);
    background: var(--color-surface-sunken);
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
}

.filter-tab.is-active .filter-count[b-adx06i4nxa] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.role-filter[b-adx06i4nxa] {
    min-inline-size: 180px;
}

/* ---------- Table ---------- */
.table-wrap[b-adx06i4nxa] {
    overflow-x: auto;
}

.table-wrap[b-adx06i4nxa]  table {
    margin-block-end: 0;
}

.table-empty[b-adx06i4nxa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    padding: var(--space-14) var(--space-8);
    text-align: center;
    color: var(--color-ink-muted);
}

.empty-icon[b-adx06i4nxa] {
    inline-size: 56px;
    block-size: 56px;
    border-radius: var(--radius-lg);
    background: var(--color-surface-sunken);
    color: var(--color-ink-muted);
    display: grid;
    place-items: center;
}

.empty-title[b-adx06i4nxa] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink);
}

.empty-help[b-adx06i4nxa] {
    font-size: var(--font-size-sm);
    color: var(--color-ink-soft);
    max-inline-size: 40ch;
}

/* ---------- User cell (avatar + name+email) ---------- */
.user-cell[b-adx06i4nxa] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
}

.user-cell-avatar[b-adx06i4nxa] {
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    background: var(--color-brand-subtle);
    color: var(--color-brand-active);
    display: grid;
    place-items: center;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    flex: 0 0 36px;
}

.user-cell-meta[b-adx06i4nxa] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.user-cell-name[b-adx06i4nxa] {
    font-weight: var(--font-weight-medium);
    color: var(--color-ink);
}

.user-cell-email[b-adx06i4nxa] {
    margin-block-start: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
}

/* ---------- Role picker (custom dropdown with per-role colors) ---------- */
.role-picker[b-adx06i4nxa] {
    position: relative;
    display: inline-block;
    /* Per-role color tokens — default to brand. Overridden below per [data-role]. */
    --rp-fg: #0F6B47;
    --rp-bg: #ECF5F1;
    --rp-bg-strong: #D6EBE0;
}

.role-picker[data-role="ProgramManager"][b-adx06i4nxa]    { --rp-fg: #0F6B47; --rp-bg: #ECF5F1; --rp-bg-strong: #D6EBE0; }
.role-picker[data-role="FieldInspector"][b-adx06i4nxa]    { --rp-fg: #1E40AF; --rp-bg: #DBEAFE; --rp-bg-strong: #BFDBFE; }
.role-picker[data-role="SectorManager"][b-adx06i4nxa]     { --rp-fg: #7E22CE; --rp-bg: #F3E8FF; --rp-bg-strong: #E9D5FF; }
.role-picker[data-role="FollowUpInspector"][b-adx06i4nxa] { --rp-fg: #C2410C; --rp-bg: #FFEDD5; --rp-bg-strong: #FED7AA; }
.role-picker[data-role="CompanyAdmin"][b-adx06i4nxa]      { --rp-fg: #475569; --rp-bg: #E2E8F0; --rp-bg-strong: #CBD5E1; }

.role-trigger[b-adx06i4nxa] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
    background: var(--rp-bg);
    border: 1.5px solid transparent;
    border-radius: var(--radius-pill);
    color: var(--rp-fg);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.role-trigger:hover[b-adx06i4nxa] {
    background: var(--rp-bg-strong);
    border-color: var(--rp-bg-strong);
    transform: translateY(-1px);
}

.role-picker.is-open .role-trigger[b-adx06i4nxa] {
    background: var(--rp-fg);
    color: white;
    border-color: var(--rp-fg);
    box-shadow: 0 6px 18px -6px var(--rp-fg);
}

.role-icon[b-adx06i4nxa] {
    display: inline-grid;
    place-items: center;
    inline-size: 20px;
    block-size: 20px;
    flex: 0 0 20px;
    color: currentColor;
}

.role-label[b-adx06i4nxa] {
    white-space: nowrap;
}

.role-caret[b-adx06i4nxa] {
    transition: transform var(--duration-fast) var(--ease-out);
    color: currentColor;
    opacity: 0.7;
}

.role-picker.is-open .role-caret[b-adx06i4nxa] {
    transform: rotate(180deg);
    opacity: 1;
}

/* ---------- Role menu ---------- */
.role-menu[b-adx06i4nxa] {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline-start: 0;
    min-inline-size: 280px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-3);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    animation: menu-in-b-adx06i4nxa var(--duration-fast) var(--ease-out);
}

[dir="rtl"] .role-menu[b-adx06i4nxa] {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

@keyframes menu-in-b-adx06i4nxa {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.role-option[b-adx06i4nxa] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    inline-size: 100%;
    padding: var(--space-4);
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    text-align: start;
    cursor: pointer;
    color: var(--color-ink);
    transition: background-color var(--duration-fast) var(--ease-out);
}

.role-option:hover[b-adx06i4nxa] {
    background: var(--color-surface-sunken);
}

.role-option.is-selected[b-adx06i4nxa] {
    background: var(--rp-bg);
}

.role-option-icon[b-adx06i4nxa] {
    display: inline-grid;
    place-items: center;
    inline-size: 32px;
    block-size: 32px;
    flex: 0 0 32px;
    border-radius: var(--radius-md);
    background: white;
    color: var(--color-ink-soft);
    box-shadow: var(--shadow-xs);
}

.role-option[data-role="ProgramManager"]    .role-option-icon[b-adx06i4nxa] { color: #0F6B47; }
.role-option[data-role="FieldInspector"]    .role-option-icon[b-adx06i4nxa] { color: #1E40AF; }
.role-option[data-role="SectorManager"]     .role-option-icon[b-adx06i4nxa] { color: #7E22CE; }
.role-option[data-role="FollowUpInspector"] .role-option-icon[b-adx06i4nxa] { color: #C2410C; }
.role-option[data-role="CompanyAdmin"]      .role-option-icon[b-adx06i4nxa] { color: #475569; }

.role-option-body[b-adx06i4nxa] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.role-option-name[b-adx06i4nxa] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink);
    line-height: 1.2;
}

.role-option-desc[b-adx06i4nxa] {
    font-size: var(--font-size-xs);
    color: var(--color-ink-muted);
    line-height: var(--line-height-snug);
}

.role-option-check[b-adx06i4nxa] {
    color: var(--rp-fg);
    flex-shrink: 0;
}

/* Click-outside scrim — transparent, captures clicks. */
.role-picker-scrim[b-adx06i4nxa] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

/* ---------- Status toggle ---------- */
.status-toggle[b-adx06i4nxa] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
}

.status-toggle-track[b-adx06i4nxa] {
    position: relative;
    inline-size: 40px;
    block-size: 22px;
    border-radius: var(--radius-pill);
    background: var(--color-status-rejected-fg);
    transition: background-color var(--duration-fast) var(--ease-out);
    flex: 0 0 40px;
}

.status-toggle-thumb[b-adx06i4nxa] {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-start: 2px;
    inline-size: 18px;
    block-size: 18px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
    transition: inset-inline-start var(--duration-fast) var(--ease-out);
}

.status-toggle.is-on .status-toggle-track[b-adx06i4nxa] {
    background: var(--color-status-resolved-fg);
}

.status-toggle.is-on .status-toggle-thumb[b-adx06i4nxa] {
    inset-inline-start: 20px;
}

.status-toggle-label[b-adx06i4nxa] {
    font-weight: var(--font-weight-medium);
    color: var(--color-ink);
}

.status-toggle.is-off .status-toggle-label[b-adx06i4nxa] {
    color: var(--color-ink-muted);
}

.status-toggle:focus-visible .status-toggle-track[b-adx06i4nxa] {
    box-shadow: var(--shadow-focus);
}

/* ---------- Legacy native .role-select (still used in Roles page) ---------- */
[b-adx06i4nxa] .role-select {
    min-inline-size: 170px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: var(--space-3) var(--space-9) var(--space-3) var(--space-5);
    background-color: var(--color-brand-subtle);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230F6B47' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--color-brand-active);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

[b-adx06i4nxa] .role-select:hover {
    background-color: rgba(15, 107, 71, 0.18);
}

[b-adx06i4nxa] .role-select:focus {
    outline: none;
    box-shadow: var(--shadow-focus);
    background-color: rgba(15, 107, 71, 0.18);
}

[dir="rtl"][b-adx06i4nxa]  .role-select {
    padding: var(--space-3) var(--space-5) var(--space-3) var(--space-9);
    background-position: left var(--space-4) center;
}

.row-actions[b-adx06i4nxa] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    justify-content: flex-end;
}

/* ---------- Modal (matches Sectors modal style) ---------- */
.modal-overlay[b-adx06i4nxa] {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.4);
    backdrop-filter: blur(4px);
    display: grid;
    place-items: center;
    padding: var(--space-6);
    z-index: 100;
    animation: fade-in-b-adx06i4nxa var(--duration-med) var(--ease-out);
}

.modal-panel[b-adx06i4nxa] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    max-inline-size: 640px;
    inline-size: 100%;
    max-block-size: 90vh;
    overflow-y: auto;
    animation: panel-in-b-adx06i4nxa var(--duration-med) var(--ease-out);
}

.modal-panel.modal-sm[b-adx06i4nxa] {
    max-inline-size: 420px;
}

.modal-help[b-adx06i4nxa] {
    margin: 0 0 var(--space-5) 0;
    color: var(--color-ink-muted);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.sector-cell[b-adx06i4nxa] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-brand-subtle);
    color: var(--color-brand-active);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.sector-cell-missing[b-adx06i4nxa] {
    background: var(--color-surface-sunken);
    color: var(--color-ink-muted);
    font-weight: var(--font-weight-regular);
    font-style: italic;
}

.modal-head[b-adx06i4nxa] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-7) var(--space-8);
    border-block-end: 1px solid var(--color-border);
}

.modal-title[b-adx06i4nxa] {
    margin-block-start: var(--space-2);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
}

.modal-close[b-adx06i4nxa] {
    display: inline-flex;
    inline-size: 32px;
    block-size: 32px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: var(--radius-md);
}

.modal-body[b-adx06i4nxa] {
    padding: var(--space-8);
}

.form-grid[b-adx06i4nxa] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-6);
}

.modal-foot[b-adx06i4nxa] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-8);
    border-block-start: 1px solid var(--color-border);
    background: var(--color-surface-sunken);
    border-end-start-radius: var(--radius-xl);
    border-end-end-radius: var(--radius-xl);
}

.field[b-adx06i4nxa] { display: flex; flex-direction: column; }

@keyframes fade-in-b-adx06i4nxa {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes panel-in-b-adx06i4nxa {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
    .page-header[b-adx06i4nxa] { flex-direction: column; align-items: stretch; }
    .card-section-head[b-adx06i4nxa] { flex-direction: column; gap: var(--space-4); }
    .filter-bar[b-adx06i4nxa] { flex-direction: column; align-items: stretch; gap: var(--space-4); }
    .filter-segmented[b-adx06i4nxa] { overflow-x: auto; white-space: nowrap; }
    .search-input[b-adx06i4nxa] { inline-size: 100%; min-inline-size: auto; }
    .role-filter[b-adx06i4nxa] { inline-size: 100%; }
}
/* /Models/Pages/Admin/ViolationTypes.razor.rz.scp.css */
/* ============================================================
   Violation Types admin
   ============================================================ */

.page-header[b-g94rr5njuw] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    padding-block-end: var(--space-6);
    border-block-end: 1px solid var(--color-border);
    margin-block-end: var(--space-8);
}

.page-actions[b-g94rr5njuw]  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

.vt-grid[b-g94rr5njuw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-5);
}

.vt-card[b-g94rr5njuw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
    border-inline-start: 4px solid var(--color-brand);
}

.vt-card[data-category="Commercial"][b-g94rr5njuw] {
    border-inline-start-color: #C2410C;
}

.vt-card:hover[b-g94rr5njuw] {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}

.vt-card.is-inactive[b-g94rr5njuw] {
    background: var(--color-surface-sunken);
    opacity: 0.7;
}

.vt-head[b-g94rr5njuw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.vt-code[b-g94rr5njuw] {
    font-family: var(--font-mono);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-active);
    letter-spacing: var(--letter-spacing-wide);
}

.vt-card[data-category="Commercial"] .vt-code[b-g94rr5njuw] {
    color: #C2410C;
}

.vt-category[b-g94rr5njuw] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-brand-subtle);
    color: var(--color-brand-active);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.vt-category[data-category="Commercial"][b-g94rr5njuw] {
    background: #FFEDD5;
    color: #C2410C;
}

.vt-body[b-g94rr5njuw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.vt-desc-ar[b-g94rr5njuw] {
    font-size: var(--font-size-base);
    color: var(--color-ink);
    line-height: var(--line-height-snug);
    margin: 0;
}

.vt-desc-en[b-g94rr5njuw] {
    font-size: var(--font-size-xs);
    color: var(--color-ink-muted);
    line-height: var(--line-height-snug);
    margin: 0;
}

.vt-foot[b-g94rr5njuw] {
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.vt-edit[b-g94rr5njuw] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

/* ---------- Toggle switch (matches sectors) ---------- */
.toggle[b-g94rr5njuw] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
}

.toggle-input[b-g94rr5njuw] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}

.toggle-track[b-g94rr5njuw] {
    position: relative;
    inline-size: 36px;
    block-size: 20px;
    border-radius: var(--radius-pill);
    background: var(--color-border-strong);
    transition: background-color var(--duration-fast) var(--ease-out);
}

.toggle-thumb[b-g94rr5njuw] {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-start: 2px;
    inline-size: 16px;
    block-size: 16px;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: inset-inline-start var(--duration-fast) var(--ease-out);
}

.toggle-input:checked + .toggle-track[b-g94rr5njuw] {
    background: var(--color-brand);
}

.toggle-input:checked + .toggle-track .toggle-thumb[b-g94rr5njuw] {
    inset-inline-start: 18px;
}

.toggle-label[b-g94rr5njuw] {
    font-size: var(--font-size-sm);
    color: var(--color-ink-soft);
}

.vt-empty[b-g94rr5njuw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-16);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
}

.empty-title[b-g94rr5njuw] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink);
}

.empty-help[b-g94rr5njuw] {
    font-size: var(--font-size-sm);
    color: var(--color-ink-soft);
    max-inline-size: 40ch;
}

/* ---------- Modal ---------- */
.modal-overlay[b-g94rr5njuw] {
    position: fixed; inset: 0;
    background: rgba(10, 10, 10, 0.4);
    backdrop-filter: blur(4px);
    display: grid; place-items: center;
    padding: var(--space-6);
    z-index: 100;
}

.modal-panel[b-g94rr5njuw] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    max-inline-size: 600px;
    inline-size: 100%;
    max-block-size: 90vh;
    overflow-y: auto;
}

.modal-head[b-g94rr5njuw] {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5);
    padding: var(--space-7) var(--space-8);
    border-block-end: 1px solid var(--color-border);
}

.modal-title[b-g94rr5njuw] {
    margin-block-start: var(--space-2);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-mono);
}

.modal-close[b-g94rr5njuw] {
    inline-size: 32px; block-size: 32px;
    padding: 0;
    border-radius: var(--radius-md);
    display: inline-flex; align-items: center; justify-content: center;
}

.modal-body[b-g94rr5njuw] { padding: var(--space-8); }

.form-grid[b-g94rr5njuw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-6);
}

.modal-foot[b-g94rr5njuw] {
    display: flex; align-items: center; justify-content: flex-end;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-8);
    border-block-start: 1px solid var(--color-border);
    background: var(--color-surface-sunken);
    border-end-start-radius: var(--radius-xl);
    border-end-end-radius: var(--radius-xl);
}

.field[b-g94rr5njuw] { display: flex; flex-direction: column; }
/* /Models/Pages/Company/CompanyDashboard.razor.rz.scp.css */
/* ============================================================
   CompanyDashboard — assigned incidents queue + detail modal
   ============================================================ */

.page-header[b-mehyhk7git] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    padding-block-end: var(--space-6);
    border-block-end: 1px solid var(--color-border);
    margin-block-end: var(--space-8);
}

/* ---------- Filter segmented ---------- */
.filter-bar[b-mehyhk7git] {
    margin-block-end: var(--space-6);
}

.filter-segmented[b-mehyhk7git] {
    display: inline-flex;
    padding: var(--space-2);
    background: var(--color-surface-sunken);
    border-radius: var(--radius-md);
    gap: var(--space-2);
}

.filter-tab[b-mehyhk7git] {
    padding: var(--space-4) var(--space-6);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-ink-soft);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.filter-tab:hover[b-mehyhk7git] {
    color: var(--color-ink);
}

.filter-tab.is-active[b-mehyhk7git] {
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: var(--shadow-sm);
}

/* ---------- Table ---------- */
.table-wrap[b-mehyhk7git] {
    overflow-x: auto;
}

.table-wrap[b-mehyhk7git]  table {
    margin-block-end: 0;
}

.table-empty[b-mehyhk7git] {
    text-align: center;
    padding-block: var(--space-10);
}

.text-muted-soft[b-mehyhk7git] {
    color: var(--color-ink-soft);
    font-size: var(--font-size-sm);
}

/* ---------- Modal ---------- */
.modal-overlay[b-mehyhk7git] {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.4);
    backdrop-filter: blur(4px);
    display: grid;
    place-items: center;
    padding: var(--space-6);
    z-index: 100;
    animation: fade-in-b-mehyhk7git var(--duration-med) var(--ease-out);
}

.modal-panel[b-mehyhk7git] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    max-inline-size: 720px;
    inline-size: 100%;
    max-block-size: 90vh;
    overflow-y: auto;
    animation: panel-in-b-mehyhk7git var(--duration-med) var(--ease-out);
}

.modal-head[b-mehyhk7git] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-7) var(--space-8);
    border-block-end: 1px solid var(--color-border);
}

.modal-title[b-mehyhk7git] {
    margin-block-start: var(--space-2);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
}

.modal-close[b-mehyhk7git] {
    display: inline-flex;
    inline-size: 32px;
    block-size: 32px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: var(--radius-md);
}

.modal-body[b-mehyhk7git] {
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
}

.detail-grid[b-mehyhk7git] {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    column-gap: var(--space-7);
    row-gap: var(--space-5);
    margin: 0;
}

.detail-grid dt[b-mehyhk7git] {
    color: var(--color-ink-muted);
    align-self: center;
}

.detail-grid dd[b-mehyhk7git] {
    margin: 0;
    color: var(--color-ink);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-snug);
}

.modal-photo-grid[b-mehyhk7git] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-4);
}

.photo-thumb[b-mehyhk7git] {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface-sunken);
}

.photo-thumb img[b-mehyhk7git] {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

.modal-action-card[b-mehyhk7git] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-6);
    background: var(--color-brand-subtle);
    border: 1px solid rgba(15, 107, 71, 0.18);
    border-radius: var(--radius-md);
}

.modal-action-card > button[b-mehyhk7git] {
    align-self: flex-end;
}

.modal-action-title[b-mehyhk7git] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-brand-active);
}

.modal-action-help[b-mehyhk7git] {
    margin-block-start: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-ink-soft);
}

@keyframes fade-in-b-mehyhk7git {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes panel-in-b-mehyhk7git {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
    .filter-segmented[b-mehyhk7git] { width: 100%; }
    .filter-tab[b-mehyhk7git] { flex: 1; }
    .modal-head[b-mehyhk7git] { padding: var(--space-6); }
    .modal-body[b-mehyhk7git] { padding: var(--space-6); }
    .detail-grid[b-mehyhk7git] { grid-template-columns: 1fr; row-gap: var(--space-3); }
}
/* /Models/Pages/ForgotPassword.razor.rz.scp.css */
/* Forgot/Reset password — centered card layout.
   Shared shape between ForgotPassword.razor and ResetPassword.razor. */

.reset-screen[b-mjvtpqec1t] {
    min-block-size: 100vh;
    display: grid;
    place-items: center;
    padding: var(--space-6);
    background: var(--color-canvas);
}

.reset-card[b-mjvtpqec1t] {
    inline-size: 100%;
    max-inline-size: 440px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-10) var(--space-9);
    box-shadow: var(--shadow-md);
}

.reset-card-mark[b-mjvtpqec1t] {
    inline-size: 44px;
    block-size: 44px;
    border-radius: var(--radius-md);
    background: var(--color-brand);
    color: var(--color-brand-ink);
    display: grid;
    place-items: center;
    margin-block-end: var(--space-6);
}

.reset-eyebrow[b-mjvtpqec1t] {
    color: var(--color-ink-muted);
    margin-block-end: var(--space-2);
}

.reset-title[b-mjvtpqec1t] {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--color-ink);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.2;
}

.reset-subtitle[b-mjvtpqec1t] {
    color: var(--color-ink-muted);
    margin-block-end: var(--space-7);
    line-height: 1.55;
}

.reset-form .field[b-mjvtpqec1t] {
    margin-block-end: var(--space-5);
}

.reset-submit[b-mjvtpqec1t] {
    inline-size: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-block-end: var(--space-5);
}

.reset-back-link[b-mjvtpqec1t] {
    display: block;
    text-align: center;
    color: var(--color-ink-muted);
    font-size: var(--font-size-sm);
    text-decoration: none;
}

.reset-back-link:hover[b-mjvtpqec1t] {
    color: var(--color-brand);
    text-decoration: underline;
}

/* ---------- Success state ---------- */
.reset-success[b-mjvtpqec1t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    color: var(--color-ink);
}

.reset-success svg[b-mjvtpqec1t] {
    color: var(--color-success);
    margin-block-end: var(--space-2);
}

.reset-success-line[b-mjvtpqec1t] {
    font-weight: 600;
    color: var(--color-ink);
    margin: 0;
}

.reset-hint[b-mjvtpqec1t] {
    color: var(--color-ink-muted);
    font-size: var(--font-size-sm);
    margin: 0 0 var(--space-4) 0;
}

.reset-back[b-mjvtpqec1t] {
    inline-size: 100%;
    margin-block-start: var(--space-2);
}
/* /Models/Pages/Home.razor.rz.scp.css */
/* ============================================================
   Home — role-aware dashboard landing
   ============================================================ */

.home-hero[b-ds4vgb37hl] {
    margin-block-end: var(--space-10);
}

.home-title[b-ds4vgb37hl] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
    margin-block-start: var(--space-4);
    color: var(--color-ink);
}

.home-subtitle[b-ds4vgb37hl] {
    font-size: var(--font-size-md);
    color: var(--color-ink-soft);
    line-height: var(--line-height-snug);
    margin-block-start: var(--space-4);
    max-inline-size: 60ch;
}

/* ---------- Stat row ---------- */
.home-stats[b-ds4vgb37hl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-5);
    margin-block-end: var(--space-12);
}

.stat-card[b-ds4vgb37hl] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-7);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.stat-card:hover[b-ds4vgb37hl] {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}

.stat-label[b-ds4vgb37hl] {
    color: var(--color-ink-muted);
}

.stat-value[b-ds4vgb37hl] {
    margin-block: var(--space-3) var(--space-2);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink);
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1;
}

.stat-delta[b-ds4vgb37hl] {
    font-size: var(--font-size-xs);
    color: var(--color-ink-muted);
}

/* ---------- Section head ---------- */
.section-head[b-ds4vgb37hl] {
    margin-block-end: var(--space-6);
    padding-block-end: var(--space-5);
    border-block-end: 1px solid var(--color-border);
}

.section-title[b-ds4vgb37hl] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-ink);
}

/* ---------- Action grid ---------- */
.action-grid[b-ds4vgb37hl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-5);
}

.action-card[b-ds4vgb37hl] {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-ink);
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.action-card:hover[b-ds4vgb37hl] {
    border-color: var(--color-brand);
    box-shadow: var(--shadow-md);
    color: var(--color-ink);
    transform: translateY(-1px);
}

.action-card:focus-visible[b-ds4vgb37hl] {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-color: var(--color-brand);
}

.action-icon[b-ds4vgb37hl] {
    inline-size: 40px;
    block-size: 40px;
    border-radius: var(--radius-md);
    background: var(--color-brand-subtle);
    color: var(--color-brand-active);
    display: grid;
    place-items: center;
    flex: 0 0 40px;
}

.action-body[b-ds4vgb37hl] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.action-title[b-ds4vgb37hl] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-ink);
    line-height: 1.2;
}

.action-desc[b-ds4vgb37hl] {
    font-size: var(--font-size-sm);
    color: var(--color-ink-soft);
    line-height: var(--line-height-snug);
}

.action-arrow[b-ds4vgb37hl] {
    color: var(--color-ink-muted);
    transition: color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.action-card:hover .action-arrow[b-ds4vgb37hl] {
    color: var(--color-brand);
    transform: translateX(2px);
}

[dir="rtl"] .action-arrow svg[b-ds4vgb37hl] {
    transform: scaleX(-1);
}

[dir="rtl"] .action-card:hover .action-arrow[b-ds4vgb37hl] {
    transform: translateX(-2px);
}

/* ---------- Anonymous fallback ---------- */
.home-anon[b-ds4vgb37hl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    align-items: flex-start;
    padding: var(--space-10);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
/* /Models/Pages/Incidents/AllIncidents.razor.rz.scp.css */
/* ============================================================
   AllIncidents — Program Manager incident inbox
   ============================================================ */

.page-header[b-xrzibynn03] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    padding-block-end: var(--space-6);
    border-block-end: 1px solid var(--color-border);
    margin-block-end: var(--space-8);
}

.page-actions[b-xrzibynn03] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.page-actions[b-xrzibynn03]  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

/* ---------- Filter bar with counts ---------- */
.filter-bar[b-xrzibynn03] {
    margin-block-end: var(--space-6);
    overflow-x: auto;
}

.filter-segmented[b-xrzibynn03] {
    display: inline-flex;
    padding: var(--space-2);
    background: var(--color-surface-sunken);
    border-radius: var(--radius-md);
    gap: var(--space-2);
    white-space: nowrap;
}

.filter-tab[b-xrzibynn03] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-ink-soft);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.filter-tab:hover[b-xrzibynn03] {
    color: var(--color-ink);
}

.filter-tab.is-active[b-xrzibynn03] {
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: var(--shadow-sm);
}

.filter-count[b-xrzibynn03] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 22px;
    padding: 0 var(--space-3);
    block-size: 18px;
    border-radius: var(--radius-pill);
    background: var(--color-surface-sunken);
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
}

.filter-tab.is-active .filter-count[b-xrzibynn03] {
    background: var(--color-brand-subtle);
    color: var(--color-brand-active);
}

.status-dot[b-xrzibynn03] {
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
}

.status-dot[data-status="reported"][b-xrzibynn03]            { background: var(--color-status-reported-fg); }
.status-dot[data-status="assigned-to-sector"][b-xrzibynn03]  { background: var(--color-status-assigned-fg); }
.status-dot[data-status="assigned-to-company"][b-xrzibynn03] { background: var(--color-status-assigned-fg); }
.status-dot[data-status="in-progress"][b-xrzibynn03]         { background: var(--color-status-in-progress-fg); }
.status-dot[data-status="pending-verification"][b-xrzibynn03]{ background: var(--color-status-pending-fg); }
.status-dot[data-status="resolved"][b-xrzibynn03]            { background: var(--color-status-resolved-fg); }
.status-dot[data-status="rejected"][b-xrzibynn03]            { background: var(--color-status-rejected-fg); }

/* ---------- Table ---------- */
.table-wrap[b-xrzibynn03] {
    overflow-x: auto;
}

.table-wrap[b-xrzibynn03]  table {
    margin-block-end: 0;
}

.table-empty[b-xrzibynn03] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    padding: var(--space-16);
    text-align: center;
    color: var(--color-ink-muted);
}

.empty-icon[b-xrzibynn03] {
    inline-size: 56px;
    block-size: 56px;
    border-radius: var(--radius-lg);
    background: var(--color-brand-subtle);
    color: var(--color-brand-active);
    display: grid;
    place-items: center;
}

.empty-title[b-xrzibynn03] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink);
    letter-spacing: var(--letter-spacing-tight);
}

.empty-help[b-xrzibynn03] {
    font-size: var(--font-size-sm);
    color: var(--color-ink-soft);
    max-inline-size: 40ch;
}

.text-muted-soft[b-xrzibynn03] {
    color: var(--color-ink-soft);
    font-size: var(--font-size-sm);
}

.ref-cell[b-xrzibynn03] {
    font-weight: var(--font-weight-medium);
    color: var(--color-ink);
}

.violation-cell[b-xrzibynn03] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.violation-code[b-xrzibynn03] {
    color: var(--color-ink-muted);
    font-size: var(--font-size-xs);
}

.violation-desc[b-xrzibynn03] {
    color: var(--color-ink);
    line-height: var(--line-height-snug);
}
/* /Models/Pages/Incidents/IncidentDetail.razor.rz.scp.css */
/* ============================================================
   IncidentDetail — single-incident page
   ============================================================ */

.back-link[b-7hpp71r628] {
    margin-block-end: var(--space-5);
}

[b-7hpp71r628] .back-link .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

[dir="rtl"][b-7hpp71r628]  .back-link svg {
    transform: scaleX(-1);
}

/* ---------- Header ---------- */
.detail-header[b-7hpp71r628] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-8);
    padding-block-end: var(--space-8);
    margin-block-end: var(--space-8);
    border-block-end: 1px solid var(--color-border);
}

.detail-header-meta[b-7hpp71r628] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.detail-ref[b-7hpp71r628] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1.1;
    color: var(--color-ink);
}

.detail-violations[b-7hpp71r628] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-start: var(--space-4);
}

.detail-violation[b-7hpp71r628] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-brand-subtle);
    border: 1px solid var(--color-border);
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

[dir="rtl"] .detail-violation[b-7hpp71r628] {
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
}

.detail-violation:hover[b-7hpp71r628] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.detail-violation .violation-code[b-7hpp71r628] {
    display: inline-flex;
    align-items: center;
    background: var(--color-brand);
    color: white;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    line-height: 1.4;
    flex-shrink: 0;
}

.detail-violation .violation-desc[b-7hpp71r628] {
    color: var(--color-ink);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
}

.detail-header-status[b-7hpp71r628] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-3);
}

.detail-header-time[b-7hpp71r628] {
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
}

.download-btn[b-7hpp71r628] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-block-start: var(--space-3);
    text-decoration: none;
}

[dir="rtl"] .detail-header-status[b-7hpp71r628] {
    align-items: flex-start;
}

/* ---------- Grid layout ---------- */
.detail-grid[b-7hpp71r628] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}

@media (min-width: 960px) {
    .detail-grid[b-7hpp71r628] {
        grid-template-columns: 1fr 320px;
        align-items: start;
    }

    .detail-aside[b-7hpp71r628] {
        position: sticky;
        inset-block-start: calc(var(--topbar-height) + var(--space-6));
    }
}

.detail-main[b-7hpp71r628],
.detail-aside[b-7hpp71r628] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ---------- Card section heading (shared with other admin pages) ---------- */
.card-section-head[b-7hpp71r628] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-7) var(--space-8);
    border-block-end: 1px solid var(--color-border);
}

.card-section-title[b-7hpp71r628] {
    margin-block-start: var(--space-2);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-ink);
}

.prose[b-7hpp71r628] {
    color: var(--color-ink);
    font-size: var(--font-size-md);
    line-height: var(--line-height-loose);
    white-space: pre-wrap;
}

/* ---------- Timeline ---------- */
.timeline[b-7hpp71r628] {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.timeline[b-7hpp71r628]::before {
    content: "";
    position: absolute;
    inset-block: 6px;
    inset-inline-start: 7px;
    inline-size: 2px;
    background: var(--color-border);
}

.timeline-step[b-7hpp71r628] {
    position: relative;
    padding-inline-start: var(--space-8);
    min-height: 32px;
}

.timeline-marker[b-7hpp71r628] {
    position: absolute;
    inset-block-start: 4px;
    inset-inline-start: 0;
    inline-size: 16px;
    block-size: 16px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 2px solid var(--color-border-strong);
    z-index: 1;
}

.timeline-step.done .timeline-marker[b-7hpp71r628] {
    background: var(--color-brand);
    border-color: var(--color-brand);
}

.timeline-step.current .timeline-marker[b-7hpp71r628] {
    background: var(--color-surface);
    border-color: var(--color-brand);
    box-shadow: 0 0 0 4px rgba(15, 107, 71, 0.18);
}

.timeline-step.future .timeline-marker[b-7hpp71r628] {
    background: var(--color-surface);
    border-color: var(--color-border-strong);
}

.timeline-content[b-7hpp71r628] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.timeline-label[b-7hpp71r628] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-ink-soft);
    line-height: 1.4;
}

.timeline-step.done .timeline-label[b-7hpp71r628],
.timeline-step.current .timeline-label[b-7hpp71r628] {
    color: var(--color-ink);
}

.timeline-step.current .timeline-label[b-7hpp71r628] {
    font-weight: var(--font-weight-semibold);
}

.timeline-meta[b-7hpp71r628] {
    font-size: var(--font-size-sm);
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
}

/* ---------- Photos ---------- */
.photo-grid[b-7hpp71r628] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-4);
}

.photo-thumb[b-7hpp71r628] {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface-sunken);
    padding: 0;
    cursor: zoom-in;
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.photo-thumb:hover[b-7hpp71r628],
.photo-thumb:focus-visible[b-7hpp71r628] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    outline: none;
}

.photo-thumb img[b-7hpp71r628] {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- Inline photo gallery (preview + nav + thumbnails) ---------- */
.photo-gallery[b-7hpp71r628] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    outline: none;
}

.photo-gallery-main[b-7hpp71r628] {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--color-surface-sunken);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.photo-gallery-preview[b-7hpp71r628] {
    inline-size: 100%;
    block-size: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
    display: block;
}

.photo-gallery-preview img[b-7hpp71r628] {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    background: var(--color-surface-sunken);
    display: block;
}

.photo-gallery-nav[b-7hpp71r628] {
    position: absolute;
    inset-block-start: 50%;
    transform: translateY(-50%);
    inline-size: 40px;
    block-size: 40px;
    border-radius: 50%;
    background: rgba(10, 10, 10, 0.55);
    color: white;
    border: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 2;
    transition: background var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.photo-gallery-nav:hover[b-7hpp71r628] {
    background: rgba(10, 10, 10, 0.8);
}

.photo-gallery-nav:active[b-7hpp71r628] {
    transform: translateY(-50%) scale(0.94);
}

.photo-gallery-prev[b-7hpp71r628] {
    inset-inline-start: var(--space-3);
}

.photo-gallery-next[b-7hpp71r628] {
    inset-inline-end: var(--space-3);
}

[dir="rtl"] .photo-gallery-nav svg[b-7hpp71r628] {
    transform: scaleX(-1);
}

.photo-gallery-counter[b-7hpp71r628] {
    text-align: center;
    color: var(--color-ink-muted);
    font-size: var(--font-size-sm);
}

.photo-gallery-thumbs[b-7hpp71r628] {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    padding-block-end: var(--space-2);
    scrollbar-width: thin;
}

.photo-gallery-thumb[b-7hpp71r628] {
    flex: 0 0 64px;
    inline-size: 64px;
    block-size: 64px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.photo-gallery-thumb:hover[b-7hpp71r628] {
    transform: translateY(-1px);
}

.photo-gallery-thumb.is-active[b-7hpp71r628] {
    border-color: var(--color-brand);
}

.photo-gallery-thumb img[b-7hpp71r628] {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- Lightbox / click-to-preview ---------- */
.photo-lightbox[b-7hpp71r628] {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(10, 10, 10, 0.85);
    display: grid;
    place-items: center;
    padding: var(--space-6);
    cursor: zoom-out;
    animation: photo-lightbox-fade-b-7hpp71r628 var(--duration-fast) var(--ease-out);
}

@keyframes photo-lightbox-fade-b-7hpp71r628 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.photo-lightbox-img[b-7hpp71r628] {
    max-inline-size: 95vw;
    max-block-size: 90vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl, 0 24px 48px -16px rgba(0,0,0,0.6));
    cursor: default;
}

.photo-lightbox-close[b-7hpp71r628] {
    position: absolute;
    inset-block-start: var(--space-5);
    inset-inline-end: var(--space-5);
    inline-size: 40px;
    block-size: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 0;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background var(--duration-fast) var(--ease-out);
}

.photo-lightbox-close:hover[b-7hpp71r628] {
    background: rgba(255, 255, 255, 0.2);
}

/* ---------- Facts (definition list) ---------- */
.facts[b-7hpp71r628] {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: var(--space-6);
    row-gap: var(--space-4);
    margin: 0;
}

.facts dt[b-7hpp71r628] {
    color: var(--color-ink-muted);
    align-self: center;
}

.facts dd[b-7hpp71r628] {
    margin: 0;
    color: var(--color-ink);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-snug);
    word-break: break-word;
}

/* ---------- Action card (in aside) ---------- */
.action-card[b-7hpp71r628] {
    border-color: rgba(15, 107, 71, 0.2);
    background: var(--color-brand-subtle);
}

.action-card .card-body[b-7hpp71r628] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.action-meta[b-7hpp71r628] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.action-title[b-7hpp71r628] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-brand-active);
    letter-spacing: var(--letter-spacing-tight);
}

.action-help[b-7hpp71r628] {
    font-size: var(--font-size-sm);
    color: var(--color-ink-soft);
    line-height: var(--line-height-snug);
}

.verify-buttons[b-7hpp71r628] {
    display: flex;
    gap: var(--space-3);
}

.verify-buttons .btn[b-7hpp71r628] {
    flex: 1;
}

/* ---------- Rejection card ---------- */
.detail-rejection[b-7hpp71r628] {
    border-color: rgba(190, 18, 60, 0.2);
}

/* ---------- Empty state ---------- */
.page-empty[b-7hpp71r628] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    padding: var(--space-20) var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
}

.empty-icon[b-7hpp71r628] {
    inline-size: 64px;
    block-size: 64px;
    border-radius: var(--radius-lg);
    background: var(--color-surface-sunken);
    color: var(--color-ink-muted);
    display: grid;
    place-items: center;
}

.empty-title[b-7hpp71r628] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink);
    letter-spacing: var(--letter-spacing-tight);
}

.empty-help[b-7hpp71r628] {
    font-size: var(--font-size-sm);
    color: var(--color-ink-soft);
    max-inline-size: 40ch;
}

@media (max-width: 640px) {
    .detail-header[b-7hpp71r628] {
        flex-direction: column;
        align-items: stretch;
    }
    .detail-header-status[b-7hpp71r628] {
        align-items: flex-start;
    }
    .card-section-head[b-7hpp71r628] {
        padding: var(--space-5) var(--space-6);
    }
}
/* /Models/Pages/Inspector/InspectorIncidentForm.razor.rz.scp.css */
/* ============================================================
   InspectorIncidentForm — multi-step report flow.
   Desktop: all sections visible at once (single scroll).
   Mobile (<768px): step wizard with stepper + sticky Back/Next.
   ============================================================ */

.inspector-form[b-0tmmudkanc] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
    max-inline-size: 720px;
    margin-inline: auto;
}

@media (min-width: 1080px) {
    .inspector-form[b-0tmmudkanc] {
        grid-template-columns: 1fr 280px;
        max-inline-size: 1000px;
    }

    .form-section[b-0tmmudkanc] { grid-column: 1; }
    .location-card[b-0tmmudkanc] { grid-column: 2; grid-row: 1 / span 4; position: sticky; inset-block-start: calc(var(--topbar-height) + var(--space-6)); align-self: start; }
    .form-actions-desktop[b-0tmmudkanc] { grid-column: 1 / -1; }
}

/* ---------- Stepper (mobile only) ---------- */
.stepper[b-0tmmudkanc] {
    display: none;
}

@media (max-width: 767.98px) {
    .stepper[b-0tmmudkanc] {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0;
        padding: var(--space-5) var(--space-4);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        margin-block-end: var(--space-5);
        position: relative;
    }

    /* The rail — horizontal line connecting all dots, sits behind them. */
    .stepper[b-0tmmudkanc]::before {
        content: "";
        position: absolute;
        inset-block-start: calc(var(--space-5) + 14px);
        inset-inline-start: calc(12.5% + 8px);
        inset-inline-end: calc(12.5% + 8px);
        block-size: 2px;
        background: var(--color-border-strong);
        border-radius: var(--radius-pill);
        z-index: 0;
    }

    .stepper-dot[b-0tmmudkanc] {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
        padding: 0 var(--space-2);
        background: transparent;
        border: 0;
        color: var(--color-ink-muted);
        cursor: pointer;
        font-family: var(--font-sans);
        font-size: 10px;
        font-weight: var(--font-weight-medium);
        position: relative;
        z-index: 1;
        transition: color var(--duration-fast) var(--ease-out);
    }

    .stepper-num[b-0tmmudkanc] {
        display: grid;
        place-items: center;
        inline-size: 30px;
        block-size: 30px;
        border-radius: 50%;
        background: var(--color-surface);
        border: 2px solid var(--color-border-strong);
        color: var(--color-ink-muted);
        font-weight: var(--font-weight-semibold);
        font-family: var(--font-mono);
        font-size: var(--font-size-sm);
        transition: background-color var(--duration-med) var(--ease-out),
                    border-color var(--duration-med) var(--ease-out),
                    color var(--duration-med) var(--ease-out),
                    transform var(--duration-med) var(--ease-out);
    }

    .stepper-label[b-0tmmudkanc] {
        white-space: nowrap;
        text-align: center;
    }

    /* Completed step: filled emerald with subtle scale */
    .stepper-dot.is-done .stepper-num[b-0tmmudkanc] {
        background: var(--color-brand);
        border-color: var(--color-brand);
        color: white;
    }
    .stepper-dot.is-done[b-0tmmudkanc] {
        color: var(--color-brand-active);
    }

    /* Connecting rail fills with emerald up to the current step.
       Each step adds 25% of the rail's length. */
    .inspector-form[data-step="2"] ~ .stepper[b-0tmmudkanc]::before,
    .stepper:has(.stepper-dot.is-done)[b-0tmmudkanc] {
        /* fallback handled below */
    }

    /* Fill the rail with a brand-colored gradient based on current step */
    .stepper[b-0tmmudkanc]::after {
        content: "";
        position: absolute;
        inset-block-start: calc(var(--space-5) + 14px);
        inset-inline-start: calc(12.5% + 8px);
        block-size: 2px;
        background: var(--color-brand);
        border-radius: var(--radius-pill);
        z-index: 0;
        transition: inline-size var(--duration-slow) var(--ease-out);
        inline-size: 0;
    }

    /* For step 1: 0%, step 2: ~33%, step 3: ~66%, step 4: 100% of the rail (rail is 75% of stepper width) */
    .stepper[data-step="2"][b-0tmmudkanc]::after { inline-size: calc(25% - 0px); }
    .stepper[data-step="3"][b-0tmmudkanc]::after { inline-size: calc(50% - 0px); }
    .stepper[data-step="4"][b-0tmmudkanc]::after { inline-size: calc(75% - 16px); }

    /* Active (current) step: pulsing brand-color ring */
    .stepper-dot.is-current .stepper-num[b-0tmmudkanc] {
        background: var(--color-surface);
        border-color: var(--color-brand);
        color: var(--color-brand-active);
        transform: scale(1.1);
        box-shadow: 0 0 0 4px rgba(15, 107, 71, 0.18);
        animation: pulse-ring-b-0tmmudkanc 2s ease-in-out infinite;
    }

    .stepper-dot.is-current[b-0tmmudkanc] {
        color: var(--color-brand-active);
        font-weight: var(--font-weight-semibold);
    }

    @keyframes pulse-ring-b-0tmmudkanc {
        0%, 100% { box-shadow: 0 0 0 4px rgba(15, 107, 71, 0.18); }
        50%      { box-shadow: 0 0 0 8px rgba(15, 107, 71, 0.05); }
    }

    /* Slide animation when transitioning between steps */
    .form-section[b-0tmmudkanc] {
        animation: step-slide-b-0tmmudkanc var(--duration-med) var(--ease-out);
    }

    @keyframes step-slide-b-0tmmudkanc {
        from { opacity: 0; transform: translateX(20px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    [dir="rtl"] .form-section[b-0tmmudkanc] {
        animation: step-slide-rtl-b-0tmmudkanc var(--duration-med) var(--ease-out);
    }

    @keyframes step-slide-rtl-b-0tmmudkanc {
        from { opacity: 0; transform: translateX(-20px); }
        to   { opacity: 1; transform: translateX(0); }
    }
}

/* ---------- Form section card ---------- */
.form-section[b-0tmmudkanc] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: var(--shadow-xs);
}

.form-section-head[b-0tmmudkanc] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    margin-block-end: var(--space-6);
    padding-block-end: var(--space-5);
    border-block-end: 1px solid var(--color-border);
}

.form-section-step[b-0tmmudkanc] {
    inline-size: 28px;
    block-size: 28px;
    border-radius: 50%;
    background: var(--color-brand-subtle);
    color: var(--color-brand-active);
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    flex: 0 0 28px;
}

.form-section-title[b-0tmmudkanc] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink);
    line-height: 1.2;
}

.form-section-help[b-0tmmudkanc] {
    margin-block-start: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-ink-soft);
    line-height: var(--line-height-snug);
}

.field[b-0tmmudkanc] {
    display: flex;
    flex-direction: column;
}

.form-help[b-0tmmudkanc] {
    margin-block-start: var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--color-ink-muted);
}

/* ---------- Polished form-select ---------- */
[b-0tmmudkanc] .form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230F6B47' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right var(--space-5) center;
    padding-inline-end: calc(var(--space-5) + 16px + var(--space-3));
    background-color: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-ink);
    font-weight: var(--font-weight-medium);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

[b-0tmmudkanc] .form-select:hover {
    border-color: var(--color-brand);
}

[b-0tmmudkanc] .form-select:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: var(--shadow-focus);
}

[dir="rtl"][b-0tmmudkanc]  .form-select {
    background-position: left var(--space-5) center;
    padding-inline-end: var(--space-5);
    padding-inline-start: calc(var(--space-5) + 16px + var(--space-3));
}

/* ---------- Violation chip multi-select ---------- */
.violation-head[b-0tmmudkanc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-block-end: var(--space-3);
}

.violation-count[b-0tmmudkanc] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    background: var(--color-brand);
    color: white;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.violation-loading[b-0tmmudkanc] {
    display: grid;
    place-items: center;
    padding: var(--space-10);
    color: var(--color-ink-muted);
}

.violation-grid[b-0tmmudkanc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-3);
}

.violation-chip[b-0tmmudkanc] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    text-align: start;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
    font-family: var(--font-sans);
}

.violation-chip:hover[b-0tmmudkanc] {
    border-color: var(--color-brand);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.violation-chip.is-selected[b-0tmmudkanc] {
    background: var(--color-brand-subtle);
    border-color: var(--color-brand);
    box-shadow: 0 4px 12px -4px rgba(15, 107, 71, 0.25);
}

.violation-check[b-0tmmudkanc] {
    display: grid;
    place-items: center;
    inline-size: 20px;
    block-size: 20px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--color-border-strong);
    background: var(--color-surface);
    color: white;
    flex: 0 0 20px;
    margin-block-start: 2px;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.violation-chip.is-selected .violation-check[b-0tmmudkanc] {
    background: var(--color-brand);
    border-color: var(--color-brand);
}

.violation-body[b-0tmmudkanc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    flex: 1;
}

.violation-code[b-0tmmudkanc] {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-muted);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.violation-chip.is-selected .violation-code[b-0tmmudkanc] {
    color: var(--color-brand-active);
}

.violation-desc[b-0tmmudkanc] {
    font-size: var(--font-size-sm);
    color: var(--color-ink);
    line-height: var(--line-height-snug);
}

@media (max-width: 480px) {
    .violation-grid[b-0tmmudkanc] { grid-template-columns: 1fr; }
}

/* ---------- Segmented control ---------- */
.segmented[b-0tmmudkanc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    padding: var(--space-2);
    background: var(--color-surface-sunken);
    border-radius: var(--radius-md);
}

.segmented-item[b-0tmmudkanc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-ink-soft);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.segmented-item:hover[b-0tmmudkanc] { color: var(--color-ink); }

.segmented-item.is-active[b-0tmmudkanc] {
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: var(--shadow-sm);
}

.segmented-item.is-disabled[b-0tmmudkanc],
.segmented-item:disabled[b-0tmmudkanc] {
    cursor: not-allowed;
    color: var(--color-ink-muted);
    opacity: 0.55;
    position: relative;
}

.segmented-item.is-disabled:hover[b-0tmmudkanc] { color: var(--color-ink-muted); }

.segmented-badge[b-0tmmudkanc] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    background: var(--color-surface);
    color: var(--color-ink-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    margin-inline-start: var(--space-2);
}

/* ---------- Capture buttons (camera + gallery) ---------- */
.capture-buttons[b-0tmmudkanc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.capture-btn[b-0tmmudkanc] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-7) var(--space-5);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
}

.capture-btn-camera[b-0tmmudkanc] {
    background: var(--color-brand);
    color: white;
    box-shadow: 0 4px 12px -4px var(--color-brand);
}

.capture-btn-camera:hover[b-0tmmudkanc] {
    background: var(--color-brand-hover);
    transform: translateY(-1px);
}

.capture-btn-gallery[b-0tmmudkanc] {
    background: var(--color-brand-subtle);
    color: var(--color-brand-active);
    border: 1.5px dashed var(--color-brand);
}

.capture-btn-gallery:hover[b-0tmmudkanc] {
    background: rgba(15, 107, 71, 0.12);
}

[b-0tmmudkanc] .capture-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* ---------- Photo grid ---------- */
.photo-grid[b-0tmmudkanc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--space-4);
    margin-block-start: var(--space-6);
}

.photo-thumb[b-0tmmudkanc] {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
}

.photo-thumb img[b-0tmmudkanc],
.photo-thumb video[b-0tmmudkanc] {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

.photo-video-badge[b-0tmmudkanc] {
    position: absolute;
    inset-block-end: var(--space-3);
    inset-inline-start: var(--space-3);
    inline-size: 28px;
    block-size: 28px;
    border-radius: 50%;
    background: rgba(10, 10, 10, 0.65);
    color: white;
    display: grid;
    place-items: center;
}

.photo-remove[b-0tmmudkanc] {
    position: absolute;
    inset-block-start: var(--space-3);
    inset-inline-end: var(--space-3);
    inline-size: 24px;
    block-size: 24px;
    border: 0;
    border-radius: 50%;
    background: rgba(10, 10, 10, 0.7);
    color: white;
    cursor: pointer;
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
}

.photo-thumb:hover .photo-remove[b-0tmmudkanc],
.photo-remove:focus-visible[b-0tmmudkanc] {
    opacity: 1;
}

.photo-remove:hover[b-0tmmudkanc] {
    background: var(--color-danger);
}

/* On touch devices, always show the remove button (no hover) */
@media (hover: none) {
    .photo-remove[b-0tmmudkanc] { opacity: 1; }
}

.photo-loading[b-0tmmudkanc] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-block-start: var(--space-4);
    padding: var(--space-3) var(--space-5);
    background: var(--color-brand-subtle);
    border-radius: var(--radius-pill);
    color: var(--color-brand-active);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* ---------- Location card (sticky aside on desktop) ---------- */
.location-card[b-0tmmudkanc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-7);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

.location-icon[b-0tmmudkanc] {
    inline-size: 36px;
    block-size: 36px;
    border-radius: var(--radius-md);
    background: var(--color-brand-subtle);
    color: var(--color-brand-active);
    display: grid;
    place-items: center;
}

.location-meta[b-0tmmudkanc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.location-value[b-0tmmudkanc] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-ink);
    letter-spacing: 0;
}

.location-value.text-muted[b-0tmmudkanc] { color: var(--color-ink-muted); }

.location-state[b-0tmmudkanc] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* ---------- Desktop form actions ---------- */
.form-actions-desktop[b-0tmmudkanc] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
    padding-block-start: var(--space-4);
}

.submit-btn[b-0tmmudkanc] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
}

[dir="rtl"] .submit-btn svg[b-0tmmudkanc],
[dir="rtl"][b-0tmmudkanc]  .form-actions-mobile svg { transform: scaleX(-1); }

/* ---------- Mobile sticky actions ---------- */
.form-actions-mobile[b-0tmmudkanc] {
    display: none;
}

/* ---------- Mobile wizard ---------- */
@media (max-width: 767.98px) {
    .inspector-form[b-0tmmudkanc] {
        gap: var(--space-5);
        /* room for our action bar (~72px) stacked above the MobileTabBar (~68px) */
        padding-block-end: calc(72px + 68px + env(safe-area-inset-bottom, 0));
    }

    /* Hide non-current step sections */
    .form-section[b-0tmmudkanc] { display: none; }
    .inspector-form[data-step="1"] .form-section[data-step-content="1"][b-0tmmudkanc] { display: block; }
    .inspector-form[data-step="2"] .form-section[data-step-content="2"][b-0tmmudkanc] { display: block; }
    .inspector-form[data-step="3"] .form-section[data-step-content="3"][b-0tmmudkanc] { display: block; }
    .inspector-form[data-step="4"] .form-section[data-step-content="4"][b-0tmmudkanc] { display: block; }

    /* Location card stays visible across all steps as a small footer card */
    .location-card[b-0tmmudkanc] { padding: var(--space-5); }

    .form-section[b-0tmmudkanc] { padding: var(--space-6); }
    .form-actions-desktop[b-0tmmudkanc] { display: none; }

    .form-actions-mobile[b-0tmmudkanc] {
        display: flex;
        position: fixed;
        inset-inline: 0;
        /* Sit directly above the MobileTabBar (68px tall + iOS home indicator) */
        inset-block-end: calc(68px + env(safe-area-inset-bottom, 0));
        z-index: 26; /* one above .mobtab (25) so a sliver-overlap can't hide us */
        padding: var(--space-5) var(--space-6);
        background: var(--color-surface);
        border-block-start: 1px solid var(--color-border);
        box-shadow: 0 -4px 12px -4px rgba(10, 10, 10, 0.08);
        gap: var(--space-4);
    }

    .form-actions-mobile .btn[b-0tmmudkanc] {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-3);
    }

    .capture-buttons[b-0tmmudkanc] {
        grid-template-columns: 1fr;
    }
}
/* /Models/Pages/Login.razor.rz.scp.css */
/* ============================================================
   Login — distinctive two-panel auth screen.
   Brand panel (inline-start) uses a deep ink surface with a
   subtle dot grid that hints at city blocks; form panel
   (inline-end) is clean white. Mirrors in RTL via logical props.
   ============================================================ */

.auth-screen[b-vtsylxvsl3] {
    display: grid;
    grid-template-columns: 1fr;
    min-block-size: 100vh;
    background: var(--color-canvas);
}

@media (min-width: 960px) {
    .auth-screen[b-vtsylxvsl3] {
        grid-template-columns: minmax(420px, 1fr) minmax(520px, 1.05fr);
    }
}

/* ---------- Brand pane (inline-start) ---------- */
.auth-brand[b-vtsylxvsl3] {
    position: relative;
    background: var(--color-surface-inverse);
    color: var(--color-ink-inverse);
    overflow: hidden;
    display: none;
}

@media (min-width: 960px) {
    .auth-brand[b-vtsylxvsl3] { display: flex; }
}

.auth-brand-inner[b-vtsylxvsl3] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
    padding: var(--space-14) var(--space-12);
    align-self: center;
    inline-size: 100%;
    max-inline-size: 460px;
    margin-inline: auto;
}

.auth-brand-mark[b-vtsylxvsl3] {
    inline-size: 48px;
    block-size: 48px;
    border-radius: var(--radius-md);
    background: var(--color-brand);
    color: var(--color-brand-ink);
    display: grid;
    place-items: center;
    margin-block-end: var(--space-8);
}

.auth-brand-eyebrow[b-vtsylxvsl3] {
    color: rgba(250, 250, 247, 0.55);
}

.auth-brand-title[b-vtsylxvsl3] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-ink-inverse);
}

.auth-brand-tagline[b-vtsylxvsl3] {
    font-size: var(--font-size-md);
    color: rgba(250, 250, 247, 0.7);
    line-height: var(--line-height-snug);
    max-inline-size: 38ch;
}

.auth-brand-meta[b-vtsylxvsl3] {
    margin-block-start: var(--space-7);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.auth-meta-row[b-vtsylxvsl3] {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    color: rgba(250, 250, 247, 0.85);
    font-size: var(--font-size-sm);
}

.auth-meta-dot[b-vtsylxvsl3] {
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--color-brand);
    flex: 0 0 6px;
    box-shadow: 0 0 0 4px rgba(15, 107, 71, 0.18);
}

/* Dotted city-grid background — subtle texture, hints at municipal blocks */
.auth-grid-bg[b-vtsylxvsl3] {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(250, 250, 247, 0.05) 1px, transparent 1.5px);
    background-size: 24px 24px;
    mask-image: radial-gradient(ellipse 70% 60% at 30% 50%, black 30%, transparent 80%);
    z-index: 1;
    pointer-events: none;
}

[dir="rtl"] .auth-grid-bg[b-vtsylxvsl3] {
    mask-image: radial-gradient(ellipse 70% 60% at 70% 50%, black 30%, transparent 80%);
}

/* ---------- Form pane (inline-end) ---------- */
.auth-form-pane[b-vtsylxvsl3] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-inline: var(--space-10);
    padding-block: var(--space-10);
    background: var(--color-canvas);
}

@media (min-width: 960px) {
    .auth-form-pane[b-vtsylxvsl3] {
        padding-inline: var(--space-16);
        padding-block: var(--space-14);
    }
}

.auth-form-wrap[b-vtsylxvsl3] {
    inline-size: 100%;
    max-inline-size: 420px;
    margin-block: auto;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
}

.auth-form-header[b-vtsylxvsl3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.auth-form-title[b-vtsylxvsl3] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
}

.auth-form-subtitle[b-vtsylxvsl3] {
    font-size: var(--font-size-sm);
    color: var(--color-ink-soft);
}

.auth-form[b-vtsylxvsl3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.field[b-vtsylxvsl3] {
    display: flex;
    flex-direction: column;
}

.password-field[b-vtsylxvsl3] {
    position: relative;
    display: flex;
    align-items: stretch;
}

.password-input[b-vtsylxvsl3] {
    padding-inline-end: 42px; /* room for the eye icon */
}

.password-toggle[b-vtsylxvsl3] {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 42px;
    border: 0;
    background: transparent;
    color: var(--color-ink-muted);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: color var(--duration-fast) var(--ease-out);
}

.password-toggle:hover[b-vtsylxvsl3],
.password-toggle:focus-visible[b-vtsylxvsl3] {
    color: var(--color-ink);
}

.password-toggle:focus-visible[b-vtsylxvsl3] {
    outline: 2px solid var(--color-brand);
    outline-offset: -2px;
}

.remember-me[b-vtsylxvsl3] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    user-select: none;
    margin-block-start: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-ink-soft);
}

[b-vtsylxvsl3] .remember-me-input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}

.remember-me-check[b-vtsylxvsl3] {
    inline-size: 18px;
    block-size: 18px;
    border-radius: var(--radius-xs);
    border: 1.5px solid var(--color-border-strong);
    background: var(--color-surface);
    display: grid;
    place-items: center;
    color: white;
    flex: 0 0 18px;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.remember-me-check svg[b-vtsylxvsl3] { opacity: 0; transition: opacity var(--duration-fast) var(--ease-out); }

.remember-me:has(.remember-me-input:checked) .remember-me-check[b-vtsylxvsl3] {
    background: var(--color-brand);
    border-color: var(--color-brand);
}

.remember-me:has(.remember-me-input:checked) .remember-me-check svg[b-vtsylxvsl3] { opacity: 1; }

.remember-me:has(.remember-me-input:focus-visible) .remember-me-check[b-vtsylxvsl3] {
    box-shadow: var(--shadow-focus);
}

.remember-me-text[b-vtsylxvsl3] { color: var(--color-ink); }

/* Remember-me + Forgot-password live on the same row */
.auth-row[b-vtsylxvsl3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-block-end: var(--space-2);
}

.auth-forgot-link[b-vtsylxvsl3] {
    color: var(--color-brand);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-decoration: none;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.auth-forgot-link:hover[b-vtsylxvsl3] {
    opacity: 0.75;
    text-decoration: underline;
}

.auth-submit[b-vtsylxvsl3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-block-start: var(--space-3);
    inline-size: 100%;
}

.auth-submit-arrow[b-vtsylxvsl3] {
    transition: transform var(--duration-fast) var(--ease-out);
}

.auth-submit:hover .auth-submit-arrow[b-vtsylxvsl3] {
    transform: translateX(2px);
}

[dir="rtl"] .auth-submit-arrow[b-vtsylxvsl3] {
    transform: scaleX(-1);
}

[dir="rtl"] .auth-submit:hover .auth-submit-arrow[b-vtsylxvsl3] {
    transform: scaleX(-1) translateX(2px);
}

.auth-helper[b-vtsylxvsl3] {
    font-size: var(--font-size-xs);
    color: var(--color-ink-muted);
    text-align: center;
    margin-block-start: var(--space-3);
}

.auth-foot[b-vtsylxvsl3] {
    text-align: center;
    color: var(--color-ink-muted);
    padding-block-start: var(--space-8);
}
/* /Models/Pages/ResetPassword.razor.rz.scp.css */
/* ResetPassword shares its layout shape with ForgotPassword. Styles duplicated
   intentionally because Blazor CSS isolation is per-component; the visual result
   matches exactly. */

.reset-screen[b-99zirmufbo] {
    min-block-size: 100vh;
    display: grid;
    place-items: center;
    padding: var(--space-6);
    background: var(--color-canvas);
}

.reset-card[b-99zirmufbo] {
    inline-size: 100%;
    max-inline-size: 440px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-10) var(--space-9);
    box-shadow: var(--shadow-md);
}

.reset-card-mark[b-99zirmufbo] {
    inline-size: 44px;
    block-size: 44px;
    border-radius: var(--radius-md);
    background: var(--color-brand);
    color: var(--color-brand-ink);
    display: grid;
    place-items: center;
    margin-block-end: var(--space-6);
}

.reset-eyebrow[b-99zirmufbo] {
    color: var(--color-ink-muted);
    margin-block-end: var(--space-2);
}

.reset-title[b-99zirmufbo] {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--color-ink);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.2;
}

.reset-subtitle[b-99zirmufbo] {
    color: var(--color-ink-muted);
    margin-block-end: var(--space-7);
    line-height: 1.55;
}

.reset-form .field[b-99zirmufbo] {
    margin-block-end: var(--space-5);
}

.reset-submit[b-99zirmufbo] {
    inline-size: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-block-end: var(--space-5);
}

.reset-back-link[b-99zirmufbo] {
    display: block;
    text-align: center;
    color: var(--color-ink-muted);
    font-size: var(--font-size-sm);
    text-decoration: none;
}

.reset-back-link:hover[b-99zirmufbo] {
    color: var(--color-brand);
    text-decoration: underline;
}

.reset-success[b-99zirmufbo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    color: var(--color-ink);
}

.reset-success svg[b-99zirmufbo] {
    color: var(--color-success);
    margin-block-end: var(--space-2);
}

.reset-success-line[b-99zirmufbo] {
    font-weight: 600;
    color: var(--color-ink);
    margin: 0;
}

.reset-hint[b-99zirmufbo] {
    color: var(--color-ink-muted);
    font-size: var(--font-size-sm);
    margin: 0 0 var(--space-4) 0;
}

.reset-back[b-99zirmufbo] {
    inline-size: 100%;
    margin-block-start: var(--space-2);
}