/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ========================================
   ATSK TRANSPORT - MAIN LAYOUT
   Premium Enterprise Dashboard | 2026

   Architecture: Sidebar + Main Content Area
   Design Language: Clean surfaces, precise spacing,
   system font stack, minimal depth hierarchy.
   Inspired by Stripe, Linear, Vercel dashboards.
   ======================================== */


/* ========================================
   1. AUTH LOADING STATE
   Full-viewport centered spinner shown
   while authentication initializes.
   ======================================== */

.auth-loading-layout[b-0hc7x4mz63] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--color-bg-secondary, #F8FAFC);
}

[data-theme="dark"] .auth-loading-layout[b-0hc7x4mz63] {
    background: var(--color-bg-page, #0B1120);
}

.auth-loading-spinner[b-0hc7x4mz63] {
    width: 36px;
    height: 36px;
    border: 2.5px solid var(--color-border-primary, #E2E8F0);
    border-top-color: var(--color-primary, #1A7CCA);
    border-radius: 50%;
    animation: atsk-layout-spin-b-0hc7x4mz63 0.65s linear infinite;
}

@keyframes atsk-layout-spin-b-0hc7x4mz63 {
    to {
        transform: rotate(360deg);
    }
}


/* ========================================
   2. PAGE SHELL
   Outer wrapper for the authenticated layout.
   Column layout: topbar on top, page-body below.
   ======================================== */

.page[b-0hc7x4mz63] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
}

/* ========================================
   2b. PAGE BODY
   Contains sidebar + main content side by side.
   Fills remaining space below the topbar.
   ======================================== */

.page-body[b-0hc7x4mz63] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

@media (min-width: 769px) {
    .page-body[b-0hc7x4mz63] {
        flex-direction: row;
    }
}


/* ========================================
   3. SIDEBAR
   Fixed-height sidebar component wrapper.
   Collapsed = 72px, Expanded = 272px.
   Dark surface (#0F172A) pinned to viewport.
   ======================================== */

.sidebarComponent[b-0hc7x4mz63] {
    display: none;
}

@media (min-width: 769px) {
    .sidebarComponent[b-0hc7x4mz63] {
        display: block;
        flex: 0 0 272px;
        width: 272px;
        height: calc(100vh - 60px);
        height: calc(100dvh - 60px);
        position: sticky;
        top: 0;
        z-index: calc(var(--z-sticky, 200) + 1);
        background: linear-gradient(180deg, #1A4270 0%, #0E2847 100%);
        transition: flex-basis var(--transition-normal, 0.2s cubic-bezier(0.25, 0.1, 0.25, 1)),
                    width var(--transition-normal, 0.2s cubic-bezier(0.25, 0.1, 0.25, 1));
        will-change: width, flex-basis;
    }

    /* Collapsed sidebar state
       Detected via child element class presence */
    .sidebarComponent:has(.sidebar-nav-container-small:not(.collapse))[b-0hc7x4mz63] {
        flex-basis: 72px;
        width: 72px;
    }
}


/* ========================================
   4. MAIN CONTENT AREA
   Fills remaining horizontal space.
   Contains topbar + scrollable body.
   ======================================== */

.main-ui[b-0hc7x4mz63] {
    flex: 1 1 0%;
    min-width: 0;
    min-height: calc(100vh - 60px);
    min-height: calc(100dvh - 60px);
    background: var(--color-bg-secondary, #F8FAFC);
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

[data-theme="dark"] .main-ui[b-0hc7x4mz63] {
    background: var(--color-bg-page, #0B1120);
}

/* Ensure Bootstrap containers don't cap width */
.main-ui[b-0hc7x4mz63]  .container {
    max-width: 100% !important;
}


/* ========================================
   5. TOP HEADER BAR
   60px sticky header with left (breadcrumbs)
   and right (actions) sections.
   Solid white surface, 1px bottom border.
   ======================================== */

.layout-topbar[b-0hc7x4mz63] {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky, 200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 var(--space-8, 2rem) 0 16px;
    background: var(--color-bg-primary, #FFFFFF);
    border-bottom: 1px solid var(--color-border-primary, #E5E7EB);
    transition: background var(--transition-fast, 0.15s cubic-bezier(0.25, 0.1, 0.25, 1)),
                border-color var(--transition-fast, 0.15s cubic-bezier(0.25, 0.1, 0.25, 1));
    flex-shrink: 0;
}

[data-theme="dark"] .layout-topbar[b-0hc7x4mz63] {
    background: var(--color-bg-primary, #0F172A);
    border-bottom-color: var(--color-border-primary, rgba(255, 255, 255, 0.08));
}


/* ----------------------------------------
   5a. TOPBAR LEFT (breadcrumb / page title)
   ---------------------------------------- */

.topbar-left[b-0hc7x4mz63] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 0;
}


/* ----------------------------------------
   5b. TOPBAR ACTIONS (right-aligned controls)
   Theme toggle, language, user component.
   ---------------------------------------- */

.topbar-actions[b-0hc7x4mz63] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    height: 100%;
    flex-shrink: 0;
}


/* ----------------------------------------
   5c. TOPBAR DIVIDER
   Vertical separator between action groups.
   ---------------------------------------- */

.topbar-divider[b-0hc7x4mz63] {
    width: 1px;
    height: 24px;
    background: var(--color-border-primary, #E5E7EB);
    flex-shrink: 0;
    align-self: center;
}

[data-theme="dark"] .topbar-divider[b-0hc7x4mz63] {
    background: var(--color-border-primary, rgba(255, 255, 255, 0.08));
}


/* ----------------------------------------
   5d. TOPBAR BREADCRUMB
   ---------------------------------------- */

.topbar-logo[b-0hc7x4mz63] {
    height: 22px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.topbar-breadcrumb-app[b-0hc7x4mz63] {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary, #1A2B42);
    letter-spacing: -0.01em;
}

[data-theme="dark"] .topbar-breadcrumb-app[b-0hc7x4mz63] {
    color: var(--color-text-primary, #F1F5F9);
}


/* ----------------------------------------
   5e. TOPBAR SEARCH (center)
   ---------------------------------------- */

.topbar-center[b-0hc7x4mz63] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
}

.topbar-search[b-0hc7x4mz63] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid var(--color-border-primary, #E2E8F0);
    border-radius: 8px;
    background: var(--color-bg-secondary, #F8FAFC);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    min-width: 220px;
}

.topbar-search:hover[b-0hc7x4mz63] {
    border-color: var(--color-border-secondary, #CBD5E1);
    background: var(--color-bg-primary, #FFFFFF);
}

[data-theme="dark"] .topbar-search[b-0hc7x4mz63] {
    background: var(--color-bg-secondary, #1E293B);
    border-color: var(--color-border-primary, rgba(255, 255, 255, 0.08));
}

[data-theme="dark"] .topbar-search:hover[b-0hc7x4mz63] {
    background: var(--color-bg-tertiary, #334155);
    border-color: rgba(255, 255, 255, 0.14);
}

.topbar-search-icon[b-0hc7x4mz63] {
    color: var(--color-text-muted, #94A3B8);
    flex-shrink: 0;
}

.topbar-search-text[b-0hc7x4mz63] {
    font-size: 13px;
    color: var(--color-text-muted, #94A3B8);
    white-space: nowrap;
}

.topbar-search-kbd[b-0hc7x4mz63] {
    font-family: var(--font-family-mono, monospace);
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-muted, #94A3B8);
    background: var(--color-bg-primary, #FFFFFF);
    border: 1px solid var(--color-border-primary, #E2E8F0);
    border-radius: 4px;
    padding: 1px 6px;
    line-height: 1.4;
    margin-left: auto;
}

[data-theme="dark"] .topbar-search-kbd[b-0hc7x4mz63] {
    background: var(--color-bg-secondary, #1E293B);
    border-color: rgba(255, 255, 255, 0.10);
}


/* ----------------------------------------
   5f. TOPBAR ACTION BUTTON (notifications, settings)
   ---------------------------------------- */

.topbar-action-btn[b-0hc7x4mz63] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: var(--color-text-secondary, #64748B);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.topbar-action-btn:hover[b-0hc7x4mz63] {
    background: var(--color-bg-tertiary, #F1F5F9);
    color: var(--color-text-primary, #0F172A);
}

[data-theme="dark"] .topbar-action-btn:hover[b-0hc7x4mz63] {
    background: var(--color-bg-tertiary, #334155);
    color: var(--color-text-primary, #F1F5F9);
}


/* ========================================
   6. APP BODY / CONTENT AREAS
   ======================================== */

/* ----------------------------------------
   6a. Authenticated content wrapper
   Generous padding, fills remaining space.
   ---------------------------------------- */

.app-body[b-0hc7x4mz63] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.app-body--content[b-0hc7x4mz63] {
    flex: 1 1 auto;
    padding: var(--space-8, 2rem);
    animation: atsk-content-enter-b-0hc7x4mz63 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes atsk-content-enter-b-0hc7x4mz63 {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ----------------------------------------
   6b. Unauthenticated layout (login page)
   Full viewport, centered, subtle gradient.
   ---------------------------------------- */

.app-body--auth[b-0hc7x4mz63] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    background: linear-gradient(
        165deg,
        #F8FAFC 0%,
        #EFF6FF 35%,
        #F0F9FF 60%,
        #F8FAFC 100%
    );
}

[data-theme="dark"] .app-body--auth[b-0hc7x4mz63] {
    background: linear-gradient(
        165deg,
        #0B1120 0%,
        #0F172A 35%,
        #111827 60%,
        #0B1120 100%
    );
}


/* ========================================
   7. TOOLTIP CONTAINER
   Absolutely positioned tooltip layer.
   ======================================== */

#tooltip-container[b-0hc7x4mz63],
.tooltip-container[b-0hc7x4mz63] {
    position: absolute;
    display: none;
    z-index: var(--z-tooltip, 700);
    pointer-events: none;
}

.tooltip-content[b-0hc7x4mz63] {
    padding: var(--space-1, 4px) var(--space-2, 8px);
    font-size: var(--font-size-xs, 0.6875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-inverse, #FFFFFF);
    background: var(--color-dark, #0F172A);
    border-radius: var(--radius-sm, 8px);
    box-shadow: var(--shadow-lg, 0 8px 24px -6px rgba(0, 0, 0, 0.08));
    white-space: nowrap;
    line-height: var(--line-height-normal, 1.5);
}


/* ========================================
   8. BLAZOR ERROR UI
   Toast notification at bottom center.
   Solid surface with red accent, slide-up.
   ======================================== */

#blazor-error-ui[b-0hc7x4mz63] {
    display: none;
    position: fixed;
    z-index: var(--z-toast, 800);
    left: 50%;
    transform: translateX(-50%);
    bottom: var(--space-8, 2rem);
    width: 480px;
    max-width: calc(100vw - var(--space-8, 2rem) * 2);
    background: var(--color-bg-primary, #FFFFFF);
    border: 1px solid var(--color-border-primary, #E2E8F0);
    border-left: 3px solid var(--color-error, #DC2626);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-xl, 0 16px 40px -8px rgba(0, 0, 0, 0.10)),
                0 0 0 1px rgba(0, 0, 0, 0.03);
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    font-family: var(--font-family-base);
    animation: beu-slide-up-b-0hc7x4mz63 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] #blazor-error-ui[b-0hc7x4mz63] {
    background: var(--color-bg-secondary, #1E293B);
    border-color: var(--color-border-primary, rgba(255, 255, 255, 0.08));
    border-left-color: var(--color-error, #DC2626);
    box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.40),
                0 0 0 1px rgba(255, 255, 255, 0.04);
}

.beu-inner[b-0hc7x4mz63] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
}

.beu-icon[b-0hc7x4mz63] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm, 8px);
    background: var(--color-error-light, #FEF2F2);
    color: var(--color-error, #DC2626);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[data-theme="dark"] .beu-icon[b-0hc7x4mz63] {
    background: rgba(220, 38, 38, 0.12);
}

.beu-message[b-0hc7x4mz63] {
    flex: 1 1 auto;
    font-size: var(--font-size-sm, 0.8125rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-primary, #0F172A);
    line-height: var(--line-height-normal, 1.5);
}

.beu-actions[b-0hc7x4mz63] {
    display: flex;
    align-items: center;
    gap: var(--space-1, 4px);
    flex-shrink: 0;
}

.beu-btn[b-0hc7x4mz63] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm, 8px);
    border: none;
    background: transparent;
    color: var(--color-text-secondary, #64748B);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition-fast, 0.15s cubic-bezier(0.25, 0.1, 0.25, 1)),
                color var(--transition-fast, 0.15s cubic-bezier(0.25, 0.1, 0.25, 1));
    text-decoration: none;
}

.beu-btn:hover[b-0hc7x4mz63] {
    background: var(--color-bg-tertiary, #F1F5F9);
    color: var(--color-text-primary, #0F172A);
}

[data-theme="dark"] .beu-btn:hover[b-0hc7x4mz63] {
    background: var(--color-bg-tertiary, #334155);
    color: var(--color-text-primary, #F1F5F9);
}

.dismiss[b-0hc7x4mz63] {
    /* Inherits .beu-btn styles; no extra overrides needed */
}

@keyframes beu-slide-up-b-0hc7x4mz63 {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}


/* ========================================
   9. RESPONSIVE BREAKPOINTS
   ======================================== */

/* ----------------------------------------
   9a. MOBILE (up to 768px)
   Sidebar hidden, topbar hidden (mobile
   header managed by Sidebar component).
   Content uses compact padding.
   ---------------------------------------- */

@media (max-width: 768px) {
    .page[b-0hc7x4mz63] {
        flex-direction: column;
    }

    .sidebarComponent[b-0hc7x4mz63] {
        display: none;
    }

    .main-ui[b-0hc7x4mz63] {
        margin-top: 0;
        width: 100%;
    }

    .layout-topbar[b-0hc7x4mz63] {
        display: none !important;
    }

    .app-body--content[b-0hc7x4mz63] {
        padding: var(--space-4, 1rem);
        padding-bottom: calc(var(--space-4, 1rem) + env(safe-area-inset-bottom));
    }

    #blazor-error-ui[b-0hc7x4mz63] {
        bottom: var(--space-4, 1rem);
        width: calc(100vw - var(--space-4, 1rem) * 2);
        max-width: none;
    }
}


/* ----------------------------------------
   9b. TABLET (769px - 1199px)
   Sidebar visible but compact spacing.
   ---------------------------------------- */

@media (min-width: 769px) and (max-width: 1199.98px) {
    .layout-topbar[b-0hc7x4mz63] {
        padding: 0 var(--space-5, 1.25rem) 0 16px;
    }

    .app-body--content[b-0hc7x4mz63] {
        padding: var(--space-6, 1.5rem);
    }

    .topbar-actions[b-0hc7x4mz63] {
        gap: var(--space-2, 8px);
    }
}


/* ----------------------------------------
   9c. WIDE DESKTOP (1200px+)
   Full spacing, maximum comfort.
   ---------------------------------------- */

@media (min-width: 1200px) {
    .layout-topbar[b-0hc7x4mz63] {
        padding: 0 var(--space-8, 2rem) 0 16px;
    }

    .app-body--content[b-0hc7x4mz63] {
        padding: var(--space-8, 2rem);
    }
}


/* ========================================
   10. ACCESSIBILITY: REDUCED MOTION
   Disable all animations and transitions
   for users who prefer reduced motion.
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .auth-loading-spinner[b-0hc7x4mz63] {
        animation-duration: 1.5s;
    }

    .layout-topbar[b-0hc7x4mz63],
    .sidebarComponent[b-0hc7x4mz63],
    .beu-btn[b-0hc7x4mz63] {
        transition: none;
    }

    #blazor-error-ui[b-0hc7x4mz63] {
        animation: none;
    }

    .app-body--content[b-0hc7x4mz63] {
        animation: none;
    }
}


/* ========================================
   11. PRINT STYLES
   Hide chrome, show content only.
   ======================================== */

@media print {
    .sidebarComponent[b-0hc7x4mz63],
    .layout-topbar[b-0hc7x4mz63],
    #blazor-error-ui[b-0hc7x4mz63],
    #tooltip-container[b-0hc7x4mz63] {
        display: none !important;
    }

    .page[b-0hc7x4mz63] {
        flex-direction: column;
    }

    .main-ui[b-0hc7x4mz63] {
        min-height: auto;
        background: #FFFFFF;
    }

    .app-body--content[b-0hc7x4mz63] {
        padding: 0;
        animation: none;
    }
}
/* /Components/Layout/MobileHeader.razor.rz.scp.css */
/* ========================================
   UNIFIED MOBILE HEADER
   Light theme - enterprise design
   ======================================== */

/* ----------------------------------------
   MOBILE HEADER CONTAINER
   ---------------------------------------- */
.mobile-header[b-wqwlk1wm69] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 64px;
    background: #EDF2F8;
    padding: 0 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(26, 60, 100, 0.08);
}

/* ----------------------------------------
   HEADER CONTENT LAYOUT
   ---------------------------------------- */
.mobile-header-content[b-wqwlk1wm69] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    position: relative;
    z-index: 1;
}

/* ----------------------------------------
   MENU BUTTON (Authenticated only)
   ---------------------------------------- */
.mobile-menu-btn[b-wqwlk1wm69] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(26, 60, 100, 0.06);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.18s cubic-bezier(0.25, 0.1, 0.25, 1);
    padding: 0;
    flex-shrink: 0;
}

.mobile-menu-btn:hover[b-wqwlk1wm69] {
    background: rgba(26, 60, 100, 0.10);
}

.mobile-menu-btn:active[b-wqwlk1wm69] {
    background: rgba(26, 60, 100, 0.14);
}

.mobile-menu-btn:focus-visible[b-wqwlk1wm69] {
    outline: 2px solid rgba(26, 124, 202, 0.4);
    outline-offset: 1px;
}

.mobile-menu-icon[b-wqwlk1wm69] {
    width: 20px;
    height: 20px;
    color: #3B4D63;
    stroke-width: 2.5;
}

/* ----------------------------------------
   LOGO (Center)
   ---------------------------------------- */
.mobile-header-logo-container[b-wqwlk1wm69] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.mobile-header-guest .mobile-header-logo-container[b-wqwlk1wm69] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.mobile-header-logo[b-wqwlk1wm69] {
    height: 30px;
    width: auto;
    filter: none;
    transition: opacity 0.18s cubic-bezier(0.25, 0.1, 0.25, 1);
    pointer-events: auto;
    cursor: pointer;
}

.mobile-header-logo:hover[b-wqwlk1wm69] {
    opacity: 0.85;
}

/* ----------------------------------------
   ACTIONS SECTION (Right)
   ---------------------------------------- */
.mobile-header-actions[b-wqwlk1wm69] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    position: relative;
    z-index: 1001;
}

/* Language Selector Styling */
.mobile-header-actions[b-wqwlk1wm69]  .language-selector-container {
    margin: 0;
    position: relative;
}

.mobile-header-actions[b-wqwlk1wm69]  .language-selector-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: rgba(26, 60, 100, 0.06);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.18s cubic-bezier(0.25, 0.1, 0.25, 1);
    color: #3B4D63;
    border: none;
    height: 36px;
}

.mobile-header-actions[b-wqwlk1wm69]  .language-selector-trigger:hover {
    background: rgba(26, 60, 100, 0.10);
}

.mobile-header-actions[b-wqwlk1wm69]  .language-icon {
    width: 16px;
    height: 16px;
    color: #3B4D63 !important;
    stroke: currentColor !important;
}

.mobile-header-actions[b-wqwlk1wm69]  .language-selector-text {
    font-size: 12px;
    font-weight: 500;
    color: #3B4D63 !important;
}

.mobile-header-actions[b-wqwlk1wm69]  .language-arrow {
    width: 9px;
    height: 9px;
    color: #3B4D63 !important;
    fill: currentColor !important;
}

/* Language Dropdown */
.mobile-header-actions[b-wqwlk1wm69]  .language-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    z-index: 1002;
}

/* User Component Styling */
.mobile-header-actions[b-wqwlk1wm69]  .logged-user-container {
    margin: 0;
    position: relative;
}

.mobile-header-actions[b-wqwlk1wm69]  .user-trigger,
.mobile-header-actions[b-wqwlk1wm69]  .logged-user-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(26, 60, 100, 0.06);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.18s cubic-bezier(0.25, 0.1, 0.25, 1);
    border: none;
    padding: 0;
}

.mobile-header-actions[b-wqwlk1wm69]  .user-trigger:hover,
.mobile-header-actions[b-wqwlk1wm69]  .logged-user-trigger:hover {
    background: rgba(26, 60, 100, 0.10);
}

.mobile-header-actions[b-wqwlk1wm69]  .user-avatar,
.mobile-header-actions[b-wqwlk1wm69]  .logged-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.mobile-header-actions[b-wqwlk1wm69]  .user-icon,
.mobile-header-actions[b-wqwlk1wm69]  .logged-user-icon {
    width: 22px;
    height: 22px;
    color: #3B4D63;
}

/* User Dropdown Menu */
.mobile-header-actions[b-wqwlk1wm69]  .logged-user-dropdown-container-open {
    position: fixed !important;
    top: 68px !important;
    right: 16px !important;
    left: auto !important;
    width: calc(100vw - 32px) !important;
    max-width: 320px !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.06) !important;
    z-index: 1002 !important;
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
}

.mobile-header-actions[b-wqwlk1wm69]  .logged-user-dropdown-content {
    width: 100%;
}

/* Ensure mobile icon is visible */
.mobile-header-actions[b-wqwlk1wm69]  .logged-user-mobile {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(26, 60, 100, 0.06);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.18s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.mobile-header-actions[b-wqwlk1wm69]  .logged-user-mobile:hover {
    background: rgba(26, 60, 100, 0.10);
}

.mobile-header-actions[b-wqwlk1wm69]  .logged-user-mobile-icon {
    width: 19px;
    height: 19px;
    color: #3B4D63 !important;
    stroke: #3B4D63 !important;
}

/* Hide desktop version on mobile */
.mobile-header-actions[b-wqwlk1wm69]  .logged-user-desktop {
    display: none !important;
}

/* Ensure combobox wrapper doesn't interfere */
.mobile-header-actions[b-wqwlk1wm69]  .logged-user-combobox-input {
    position: relative;
}

/* ----------------------------------------
   RESPONSIVE BEHAVIOR
   ---------------------------------------- */

/* Show on tablet and mobile */
@media (max-width: 768px) {
    .mobile-header[b-wqwlk1wm69] {
        display: block;
    }

    /* Dark icon colors for light header */
    .mobile-header-actions[b-wqwlk1wm69]  svg {
        color: #3B4D63 !important;
    }

    .mobile-header-actions[b-wqwlk1wm69]  svg path,
    .mobile-header-actions[b-wqwlk1wm69]  svg circle,
    .mobile-header-actions[b-wqwlk1wm69]  svg polyline {
        stroke: currentColor;
    }
}

/* Adjustments for very small screens */
@media (max-width: 400px) {
    .mobile-header[b-wqwlk1wm69] {
        padding: 0 0.75rem;
    }

    .mobile-menu-btn[b-wqwlk1wm69] {
        width: 34px;
        height: 34px;
    }

    .mobile-menu-icon[b-wqwlk1wm69] {
        width: 18px;
        height: 18px;
    }

    .mobile-header-logo[b-wqwlk1wm69] {
        height: 24px;
    }

    .mobile-header-actions[b-wqwlk1wm69] {
        gap: 6px;
    }

    .mobile-header-actions[b-wqwlk1wm69]  .logged-user-mobile {
        width: 32px;
        height: 32px;
    }

    .mobile-header-actions[b-wqwlk1wm69]  .logged-user-mobile-icon {
        width: 17px;
        height: 17px;
    }

    .mobile-header-actions[b-wqwlk1wm69]  .language-selector-trigger {
        padding: 5px 8px;
        height: 32px;
    }
}

/* ----------------------------------------
   SAFE AREA INSETS (iOS)
   ---------------------------------------- */
@supports (padding: env(safe-area-inset-top)) {
    .mobile-header[b-wqwlk1wm69] {
        padding-top: env(safe-area-inset-top);
        height: calc(64px + env(safe-area-inset-top));
    }
}

/* ----------------------------------------
   ACCESSIBILITY
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .mobile-header[b-wqwlk1wm69],
    .mobile-menu-btn[b-wqwlk1wm69],
    .mobile-header-logo[b-wqwlk1wm69] {
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .mobile-header[b-wqwlk1wm69] {
        border-bottom: 2px solid currentColor;
    }

    .mobile-menu-btn[b-wqwlk1wm69] {
        border: 1px solid rgba(26, 60, 100, 0.3);
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* ========================================
   RECONNECT MODAL - Premium 2026 Design
   ========================================
   Uses native <dialog> element with Blazor's
   state classes to show/hide content per state.
   ======================================== */

/* ── Default: hide all state blocks ── */
.rcm-state[b-yfz94hlxhj] {
    display: none;
}

/* ── Blazor state class → show correct block ── */
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-yfz94hlxhj],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-yfz94hlxhj],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-yfz94hlxhj],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-yfz94hlxhj],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-yfz94hlxhj] {
    display: flex;
}

/* ── Auto-recover: hide everything, show only auto block ── */
#components-reconnect-modal.components-reconnect-auto .rcm-state[b-yfz94hlxhj] {
    display: none;
}

#components-reconnect-modal.components-reconnect-auto .components-reconnect-auto-visible[b-yfz94hlxhj] {
    display: flex;
}

/* ========================================
   DIALOG BASE
   ======================================== */
#components-reconnect-modal[b-yfz94hlxhj] {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal, 500);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#components-reconnect-modal[open][b-yfz94hlxhj] {
    opacity: 1;
    pointer-events: auto;
}

#components-reconnect-modal[b-yfz94hlxhj]::backdrop {
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: rcm-fade-in-b-yfz94hlxhj 0.3s ease;
}

/* ========================================
   CARD
   ======================================== */
.rcm-card[b-yfz94hlxhj] {
    background: var(--color-bg-primary, #fff);
    border-radius: var(--radius-xl, 1.25rem);
    padding: var(--space-8, 2rem) var(--space-8, 2rem) var(--space-6, 1.5rem);
    width: 420px;
    max-width: calc(100vw - var(--space-8, 2rem));
    box-shadow: var(--shadow-2xl, 0 24px 56px -12px rgba(0, 0, 0, 0.14));
    animation: rcm-slide-up-b-yfz94hlxhj 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ========================================
   STATE LAYOUT
   ======================================== */
.rcm-state[b-yfz94hlxhj] {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4, 1rem);
}

/* ========================================
   ICON
   ======================================== */
.rcm-icon[b-yfz94hlxhj] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg, 1rem);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rcm-icon svg[b-yfz94hlxhj] {
    width: 26px;
    height: 26px;
}

.rcm-icon--connecting[b-yfz94hlxhj] {
    background: var(--color-primary-light, #EBF5FF);
    color: var(--color-primary, #1A7CCA);
    animation: rcm-pulse-b-yfz94hlxhj 2s ease-in-out infinite;
}

.rcm-icon--retrying[b-yfz94hlxhj] {
    background: var(--color-amber-light, #FEF3C7);
    color: var(--color-amber-dark, #D97706);
    animation: rcm-spin-icon-b-yfz94hlxhj 1.5s linear infinite;
}

.rcm-icon--expired[b-yfz94hlxhj] {
    background: var(--color-slate-light, #F1F5F9);
    color: var(--color-slate, #64748B);
}

.rcm-icon--failed[b-yfz94hlxhj] {
    background: linear-gradient(135deg, #FEF2F2, #FEE2E2);
    color: var(--color-error, #DC2626);
}

.rcm-icon--paused[b-yfz94hlxhj] {
    background: var(--color-amber-light, #FEF3C7);
    color: var(--color-amber, #F59E0B);
}

/* ========================================
   TEXT
   ======================================== */
.rcm-text[b-yfz94hlxhj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 0.25rem);
}

.rcm-text h3[b-yfz94hlxhj] {
    margin: 0;
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: 600;
    color: var(--color-text-primary, #0F172A);
    line-height: var(--line-height-tight, 1.3);
}

.rcm-text p[b-yfz94hlxhj] {
    margin: 0;
    font-size: var(--font-size-sm, 0.8125rem);
    color: var(--color-text-secondary, #64748B);
    line-height: var(--line-height-normal, 1.5);
}

.rcm-countdown[b-yfz94hlxhj] {
    font-weight: 700;
    color: var(--color-amber-dark, #D97706);
    font-variant-numeric: tabular-nums;
}

/* ========================================
   PROGRESS BAR
   ======================================== */
.rcm-progress[b-yfz94hlxhj] {
    width: 100%;
    height: 3px;
    background: var(--color-border-primary, #E2E8F0);
    border-radius: var(--radius-full, 9999px);
    overflow: hidden;
    margin-top: var(--space-2, 0.5rem);
}

.rcm-progress-bar[b-yfz94hlxhj] {
    width: 40%;
    height: 100%;
    background: var(--color-primary, #1A7CCA);
    border-radius: var(--radius-full, 9999px);
    animation: rcm-indeterminate-b-yfz94hlxhj 1.5s ease-in-out infinite;
}

.rcm-progress-bar--slow[b-yfz94hlxhj] {
    animation-duration: 3s;
    background: var(--color-amber, #F59E0B);
}

/* ========================================
   ACTIONS
   ======================================== */
.rcm-actions[b-yfz94hlxhj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
    width: 100%;
    margin-top: var(--space-2, 0.5rem);
}

.rcm-btn[b-yfz94hlxhj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
    border-radius: var(--radius-md, 0.75rem);
    font-size: var(--font-size-sm, 0.8125rem);
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    line-height: 1;
}

.rcm-btn svg[b-yfz94hlxhj] {
    flex-shrink: 0;
}

.rcm-btn--primary[b-yfz94hlxhj] {
    background: var(--color-primary, #1A7CCA);
    color: #fff;
    box-shadow: var(--shadow-primary, 0 2px 10px rgba(26, 124, 202, 0.15));
}

.rcm-btn--primary:hover[b-yfz94hlxhj] {
    background: var(--color-primary-hover, #1568A8);
    box-shadow: var(--shadow-primary-lg, 0 4px 16px rgba(26, 124, 202, 0.20));
    transform: translateY(-1px);
}

.rcm-btn--primary:active[b-yfz94hlxhj] {
    background: var(--color-primary-active, #0F4F7F);
    transform: translateY(0);
}

.rcm-btn--ghost[b-yfz94hlxhj] {
    background: transparent;
    color: var(--color-text-secondary, #64748B);
}

.rcm-btn--ghost:hover[b-yfz94hlxhj] {
    background: var(--color-slate-light, #F1F5F9);
    color: var(--color-text-primary, #0F172A);
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes rcm-fade-in-b-yfz94hlxhj {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes rcm-slide-up-b-yfz94hlxhj {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes rcm-pulse-b-yfz94hlxhj {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes rcm-spin-icon-b-yfz94hlxhj {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes rcm-indeterminate-b-yfz94hlxhj {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(150%); }
    100% { transform: translateX(300%); }
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 480px) {
    .rcm-card[b-yfz94hlxhj] {
        padding: var(--space-6, 1.5rem) var(--space-5, 1.25rem) var(--space-5, 1.25rem);
        border-radius: var(--radius-lg, 1rem);
    }

    .rcm-icon[b-yfz94hlxhj] {
        width: 48px;
        height: 48px;
    }

    .rcm-icon svg[b-yfz94hlxhj] {
        width: 22px;
        height: 22px;
    }

    .rcm-text h3[b-yfz94hlxhj] {
        font-size: var(--font-size-base, 0.9375rem);
    }
}

/* ========================================
   DARK MODE
   ======================================== */
@media (prefers-color-scheme: dark) {
    .rcm-card[b-yfz94hlxhj] {
        background: var(--color-bg-primary, #1E1E22);
    }
}
/* /Components/Pages/Admin/AdminActivityLogs.razor.rz.scp.css */
/* ========================================
   ADMIN ACTIVITY LOGS — 2026 Design System
   Solid surfaces, design tokens, rise animation
   Matches: AdminValidationLogs / AdminQrTokenUses patterns
   ======================================== */

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes rise-b-so2bxxqzpp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-shimmer-b-so2bxxqzpp {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   FILTER LAYOUT — 5 filters on one row (desktop)
   ========================================================================== */
@media (min-width: 992px) {
    [b-so2bxxqzpp] .admin-page-header.activity-logs-header .aph-filters-content {
        grid-template-columns:
            minmax(120px, 160px)
            minmax(120px, 160px)
            minmax(180px, 220px)
            minmax(160px, 200px)
            minmax(160px, 200px);
        gap: var(--space-4);
        align-items: end;
        min-width: 0;
    }

    .admin-page.admin-standard .filter-field[b-so2bxxqzpp] {
        min-width: 0 !important;
    }

    .admin-page.admin-standard .filter-input-wrapper[b-so2bxxqzpp] {
        min-width: 0;
    }

    .admin-page.admin-standard .filter-field[b-so2bxxqzpp]  .app-datepicker {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ==========================================================================
   FILTER FIELD ENHANCEMENTS
   ========================================================================== */
[b-so2bxxqzpp] .filter-field {
    display: flex;
    flex-direction: column;
    gap: var(--radius-sm);
}

[b-so2bxxqzpp] .filter-input-wrapper {
    position: relative;
    width: 100%;
}

[b-so2bxxqzpp] .filter-input-icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    pointer-events: none;
}

[b-so2bxxqzpp] .filter-input,
[b-so2bxxqzpp] input[type="text"].filter-input,
[b-so2bxxqzpp] input[type="number"].filter-input,
[b-so2bxxqzpp] .filter-input-wrapper input {
    height: 40px !important;
    box-sizing: border-box;
}

[b-so2bxxqzpp] .filter-field-label {
    min-height: var(--space-5);
    line-height: var(--space-5);
    display: block;
}

/* ==========================================================================
   TABLE CARD — Solid surface, bordered, no glassmorphism
   ========================================================================== */
.admin-table-card[b-so2bxxqzpp] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    margin-top: var(--space-5);
    box-shadow: var(--shadow-sm);
    animation: rise-b-so2bxxqzpp 0.45s cubic-bezier(.4, 0, .2, 1) both;
    overflow: hidden;
}

[b-so2bxxqzpp] .admin-table-container {
    margin-top: 0;
}

[b-so2bxxqzpp] .admin-table-header {
    background: var(--color-bg-secondary);
    margin-bottom: 0;
    padding: var(--space-4) 0;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border-primary);
}

[b-so2bxxqzpp] .admin-table-rows {
    gap: 0;
}

[b-so2bxxqzpp] .admin-table-row {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    padding: 0 var(--space-3) 0 0;
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

[b-so2bxxqzpp] .admin-table-row:hover {
    background: var(--color-bg-secondary);
    box-shadow: none;
    transform: none;
}

[b-so2bxxqzpp] .admin-table-row:focus-visible {
    box-shadow: var(--shadow-focus);
    outline: none;
    z-index: 1;
    position: relative;
}

[b-so2bxxqzpp] .admin-table-row:not(:last-child) {
    box-shadow: inset 0 -1px 0 var(--color-border-primary);
}

/* Alerts */
.admin-container[b-so2bxxqzpp] >  .app-alert {
    margin-bottom: var(--space-5);
}

/* ==========================================================================
   GRID — 7 columns: ID, User, Actor, EventType, Description, Created, IP
   ========================================================================== */
[b-so2bxxqzpp] .al-grid {
    grid-template-columns:
        72px                  /* ID */
        minmax(130px, 1.3fr)  /* User */
        minmax(130px, 1.3fr)  /* Actor */
        minmax(140px, 1.2fr)  /* Event Type */
        minmax(200px, 2.2fr)  /* Description */
        minmax(140px, 1fr)    /* Created */
        minmax(120px, 1fr);   /* IP */
}

/* ==========================================================================
   ID Badge
   ========================================================================== */
.al-id-badge[b-so2bxxqzpp] {
    display: inline-flex;
    align-items: center;
    font-family: 'SF Mono', 'Cascadia Code', 'Courier New', monospace;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    letter-spacing: 0.3px;
}

/* ==========================================================================
   User & Actor Badges
   ========================================================================== */
.al-user-badge[b-so2bxxqzpp],
.al-actor-badge[b-so2bxxqzpp] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    padding: 2px var(--space-2);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   Event Type Badges — Semantic color coding
   ========================================================================== */
.al-event-badge[b-so2bxxqzpp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1) 10px;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.al-event--info[b-so2bxxqzpp] {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

.al-event--warning[b-so2bxxqzpp] {
    background: rgba(245, 158, 11, 0.1);
    color: #b45309;
}

.al-event--error[b-so2bxxqzpp] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.al-event--success[b-so2bxxqzpp] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.al-event--neutral[b-so2bxxqzpp] {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

/* ==========================================================================
   Description — truncated in table
   ========================================================================== */
.al-description[b-so2bxxqzpp] {
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

/* ==========================================================================
   Timestamp
   ========================================================================== */
.al-timestamp[b-so2bxxqzpp] {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* ==========================================================================
   Code Badge (IP address)
   ========================================================================== */
.al-code-badge[b-so2bxxqzpp] {
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Courier New', monospace;
    font-size: 12px;
    font-weight: 500;
    padding: var(--space-1) var(--space-2);
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    letter-spacing: 0.3px;
}

/* Dash placeholder */
.al-dash[b-so2bxxqzpp] {
    color: var(--color-text-muted);
}

/* ==========================================================================
   DETAIL MODAL — Structured sections
   ========================================================================== */
.al-detail-modal[b-so2bxxqzpp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Detail Section — Solid bordered card */
.al-detail-section[b-so2bxxqzpp] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-md);
    overflow: hidden;
    animation: rise-b-so2bxxqzpp 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

.al-detail-section-title[b-so2bxxqzpp] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
}

.al-detail-section-title svg[b-so2bxxqzpp] {
    width: 18px;
    height: 18px;
    color: var(--color-primary);
    flex-shrink: 0;
}

/* Detail Grid — 2-column layout for key-value pairs */
.al-detail-grid[b-so2bxxqzpp] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.al-detail-field[b-so2bxxqzpp] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-primary);
}

.al-detail-field:nth-child(odd)[b-so2bxxqzpp] {
    border-right: 1px solid var(--color-border-primary);
}

.al-detail-grid .al-detail-field:nth-last-child(1)[b-so2bxxqzpp],
.al-detail-grid .al-detail-field:nth-last-child(2)[b-so2bxxqzpp] {
    border-bottom: none;
}

.al-detail-grid .al-detail-field:last-child:nth-child(odd)[b-so2bxxqzpp] {
    border-right: none;
}

.al-detail-field-label[b-so2bxxqzpp] {
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.al-detail-field-value[b-so2bxxqzpp] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    word-break: break-word;
}

/* Email subtext in detail modal */
.al-detail-email[b-so2bxxqzpp] {
    display: block;
    font-size: 12px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    margin-top: 2px;
    word-break: break-all;
}

/* Description / UserAgent block in detail modal */
.al-detail-message[b-so2bxxqzpp] {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border-primary);
}

.al-detail-message-text[b-so2bxxqzpp] {
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    margin: var(--space-2) 0 0 0;
    line-height: 1.5;
    word-break: break-word;
}

/* UserAgent — monospace */
.al-detail-ua[b-so2bxxqzpp] {
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Courier New', monospace;
    font-size: 12px;
    color: var(--color-text-secondary);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    word-break: break-all;
}

/* ==========================================================================
   SKELETON LOADING STATE
   ========================================================================== */
.al-loading-state[b-so2bxxqzpp] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.al-skeleton-row[b-so2bxxqzpp] {
    display: grid;
    grid-template-columns: 72px 1fr 120px;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-primary);
}

.al-skeleton-row:first-child[b-so2bxxqzpp] {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.al-skeleton-row:last-child[b-so2bxxqzpp] {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.al-skeleton[b-so2bxxqzpp] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 37%, var(--color-bg-tertiary) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer-b-so2bxxqzpp 1.8s ease infinite;
    border-radius: var(--radius-sm);
}

.al-skeleton-badge[b-so2bxxqzpp] {
    width: 52px;
    height: 28px;
    border-radius: var(--radius-sm);
}

.al-skeleton-text[b-so2bxxqzpp] {
    width: 100%;
    max-width: 180px;
    height: 16px;
}

.al-skeleton-text-sm[b-so2bxxqzpp] {
    width: 72px;
    height: 12px;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.al-empty-state[b-so2bxxqzpp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    text-align: center;
}

.al-empty-state-icon[b-so2bxxqzpp] {
    width: 40px;
    height: 40px;
    color: var(--color-text-muted);
    opacity: 0.4;
    margin-bottom: var(--space-3);
}

.al-empty-state-title[b-so2bxxqzpp] {
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
}

.al-empty-state-text[b-so2bxxqzpp] {
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4) 0;
}

.al-link-btn[b-so2bxxqzpp] {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
    text-underline-offset: 2px;
}

.al-link-btn:hover[b-so2bxxqzpp] {
    color: var(--color-primary-hover);
    text-decoration-thickness: 2px;
}

/* ==========================================================================
   PAGINATION — 2026 Design System
   ========================================================================== */
.al-pagination[b-so2bxxqzpp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-top: 1px solid var(--color-border-primary);
}

.al-pagination-info[b-so2bxxqzpp] {
    font-family: var(--font-family-base);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-muted);
    white-space: nowrap;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}

.al-pagination-controls[b-so2bxxqzpp] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.al-page-nav[b-so2bxxqzpp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1);
    flex-shrink: 0;
}

.al-page-nav svg[b-so2bxxqzpp] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.al-page-nav:hover:not(:disabled)[b-so2bxxqzpp] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.al-page-nav:disabled[b-so2bxxqzpp] {
    opacity: 0.25;
    cursor: default;
}

.al-page-numbers[b-so2bxxqzpp] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.al-page-num[b-so2bxxqzpp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 2px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-2xl);
    cursor: pointer;
    font-family: var(--font-family-base);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    color: var(--color-text-secondary);
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1);
    font-variant-numeric: tabular-nums;
}

.al-page-num:hover:not(.active)[b-so2bxxqzpp] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary);
}

.al-page-num.active[b-so2bxxqzpp] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: 600;
    border-color: var(--color-primary);
}

.al-page-ellipsis[b-so2bxxqzpp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 34px;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    user-select: none;
}

.al-page-size[b-so2bxxqzpp] {
    height: 34px;
    padding: 0 30px 0 12px;
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    font-family: var(--font-family-base);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 3.75L5 6.25L7.5 3.75' stroke='%2394A3B8' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1);
    font-variant-numeric: tabular-nums;
}

.al-page-size:hover[b-so2bxxqzpp] {
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.al-page-size:focus[b-so2bxxqzpp] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* ==========================================================================
   MOBILE — Card Layout (991.98px)
   ========================================================================== */
@media (max-width: 991.98px) {
    .admin-table-card[b-so2bxxqzpp] {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        margin-top: var(--space-4);
        box-shadow: none !important;
        overflow: visible !important;
    }

    [b-so2bxxqzpp] .admin-table-header,
    [b-so2bxxqzpp] .admin-table-header.admin-auto-grid {
        display: none !important;
    }

    [b-so2bxxqzpp] .admin-table-rows {
        gap: var(--space-3) !important;
    }

    [b-so2bxxqzpp] .admin-table-row,
    [b-so2bxxqzpp] .admin-table-container .admin-table-row {
        border-radius: var(--radius-lg) !important;
        margin-bottom: 0 !important;
        padding: var(--space-4) !important;
        background: var(--color-bg-primary) !important;
        border: 1px solid var(--color-border-primary) !important;
        box-shadow: var(--shadow-sm) !important;
        flex-direction: column !important;
    }

    [b-so2bxxqzpp] .admin-table-row:not(:last-child) {
        box-shadow: var(--shadow-sm) !important;
    }

    [b-so2bxxqzpp] .admin-table-row:hover {
        transform: none !important;
    }

    [b-so2bxxqzpp] .admin-table-row-content,
    [b-so2bxxqzpp] .admin-table-row-content.admin-auto-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-2) !important;
        padding: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    [b-so2bxxqzpp] .admin-auto-grid .admin-table-cell,
    [b-so2bxxqzpp] .admin-auto-grid .admin-table-cell-primary,
    [b-so2bxxqzpp] .admin-auto-grid .admin-table-cell-secondary {
        display: grid !important;
        grid-template-columns: 100px 1fr;
        align-items: baseline;
        gap: var(--space-3);
        padding: var(--space-1) 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        font-size: 13px;
        width: 100% !important;
        min-width: 0 !important;
    }

    [b-so2bxxqzpp] .admin-auto-grid .admin-table-cell-primary {
        font-size: 14px;
        font-weight: 600;
    }

    [b-so2bxxqzpp] .admin-auto-grid .admin-table-cell::before,
    [b-so2bxxqzpp] .admin-auto-grid .admin-table-cell-primary::before,
    [b-so2bxxqzpp] .admin-auto-grid .admin-table-cell-secondary::before {
        content: attr(data-label) !important;
        font-size: 11px;
        font-weight: 700;
        color: var(--color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }

    .al-user-badge[b-so2bxxqzpp],
    .al-actor-badge[b-so2bxxqzpp] {
        width: fit-content;
    }

    .al-code-badge[b-so2bxxqzpp] {
        white-space: normal;
        word-break: break-all;
    }

    .al-description[b-so2bxxqzpp] {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }

    .al-skeleton-row[b-so2bxxqzpp] {
        grid-template-columns: 60px 1fr 96px;
    }

    .al-skeleton-text-sm[b-so2bxxqzpp] {
        display: none;
    }

    /* Pagination — own card on mobile */
    .al-pagination[b-so2bxxqzpp] {
        background: var(--color-bg-primary);
        border: 1px solid var(--color-border-primary);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        margin-top: var(--space-3);
        padding: var(--space-3) var(--space-4);
        border-top: none;
    }
}

/* ==========================================================================
   SMALL SCREENS (767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {
    [b-so2bxxqzpp] .filter-field {
        width: 100%;
    }

    .al-skeleton-row[b-so2bxxqzpp] {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .al-skeleton-badge[b-so2bxxqzpp] {
        width: 100%;
        max-width: none;
    }

    /* Hide page numbers, show compact nav */
    .al-page-numbers[b-so2bxxqzpp] {
        display: none;
    }

    .al-pagination-controls[b-so2bxxqzpp] {
        gap: var(--space-2);
    }

    .al-pagination[b-so2bxxqzpp] {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-3);
    }

    .al-pagination-info[b-so2bxxqzpp] {
        width: 100%;
        text-align: center;
        order: -1;
    }

    .al-page-size[b-so2bxxqzpp] {
        order: 3;
    }
}

@media (max-width: 575.98px) {
    .al-pagination[b-so2bxxqzpp] {
        padding: var(--space-3);
    }

    /* Modal detail grid — single column on small screens */
    .al-detail-grid[b-so2bxxqzpp] {
        grid-template-columns: 1fr;
    }

    .al-detail-field:nth-child(odd)[b-so2bxxqzpp] {
        border-right: none;
    }

    .al-detail-field[b-so2bxxqzpp] {
        border-bottom: 1px solid var(--color-border-primary);
    }

    .al-detail-grid .al-detail-field:nth-last-child(2)[b-so2bxxqzpp] {
        border-bottom: 1px solid var(--color-border-primary);
    }

    .al-detail-grid .al-detail-field:last-child[b-so2bxxqzpp] {
        border-bottom: none;
    }

    .al-detail-section-title[b-so2bxxqzpp] {
        padding: 10px var(--space-3);
    }
}

/* ==========================================================================
   FOCUS STATES
   ========================================================================== */
.al-link-btn:focus-visible[b-so2bxxqzpp],
.al-page-nav:focus-visible[b-so2bxxqzpp],
.al-page-num:focus-visible[b-so2bxxqzpp] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.al-page-size:focus-visible[b-so2bxxqzpp] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .admin-table-card[b-so2bxxqzpp],
    .al-detail-section[b-so2bxxqzpp] {
        animation: none;
    }

    .al-skeleton[b-so2bxxqzpp] {
        animation: none;
    }

    .al-id-badge[b-so2bxxqzpp],
    .al-user-badge[b-so2bxxqzpp],
    .al-actor-badge[b-so2bxxqzpp],
    .al-event-badge[b-so2bxxqzpp],
    .al-timestamp[b-so2bxxqzpp],
    .al-code-badge[b-so2bxxqzpp],
    .al-link-btn[b-so2bxxqzpp],
    .al-page-nav[b-so2bxxqzpp],
    .al-page-num[b-so2bxxqzpp],
    .al-page-size[b-so2bxxqzpp],
    [b-so2bxxqzpp] .admin-table-row {
        transition: none;
    }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .al-pagination[b-so2bxxqzpp] {
        display: none !important;
    }

    .admin-table-card[b-so2bxxqzpp] {
        border: 1px solid #ddd;
        box-shadow: none;
        background: var(--color-bg-primary);
    }
}
/* /Components/Pages/Admin/AdminBlacklist.razor.rz.scp.css */
/* ========================================
   ADMIN BLACKLIST — 2026 Design System
   Solid surfaces, design tokens, rise animation
   Matches: AdminQrTokenUses, AdminNotifications patterns
   ======================================== */

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes rise-b-flma9j3zwr {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-shimmer-b-flma9j3zwr {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   FILTER LAYOUT — 4 filters on one row (desktop)
   ========================================================================== */
@media (min-width: 992px) {
    [b-flma9j3zwr] .admin-page-header.bl-header .aph-filters-content {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-4);
        align-items: end;
        min-width: 0;
    }

    .admin-page.admin-standard .filter-field[b-flma9j3zwr] {
        min-width: 0 !important;
    }

    .admin-page.admin-standard .filter-input-wrapper[b-flma9j3zwr] {
        min-width: 0;
    }
}

/* ==========================================================================
   FILTER FIELD ENHANCEMENTS
   ========================================================================== */
[b-flma9j3zwr] .filter-field {
    display: flex;
    flex-direction: column;
    gap: var(--radius-sm);
}

[b-flma9j3zwr] .filter-input-wrapper {
    position: relative;
    width: 100%;
}

[b-flma9j3zwr] .filter-input,
[b-flma9j3zwr] input[type="text"].filter-input,
[b-flma9j3zwr] .filter-input-wrapper input {
    height: 40px !important;
    box-sizing: border-box;
}

[b-flma9j3zwr] .filter-field-label {
    min-height: var(--space-5);
    line-height: var(--space-5);
    display: block;
}

.filter-field[b-flma9j3zwr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.filter-field-label[b-flma9j3zwr] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: -0.01em;
    line-height: 1.35;
}

.filter-input-wrapper[b-flma9j3zwr] {
    position: relative;
    width: 100%;
    height: 40px;
}

.filter-input[b-flma9j3zwr] {
    width: 100%;
    height: 40px;
    padding: 0 14px;
    font-size: 14px;
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1), box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
    appearance: none;
    box-sizing: border-box;
    font-family: var(--font-family-base);
}

.filter-input:focus[b-flma9j3zwr] {
    outline: none;
    border: 1px solid var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.filter-input:hover[b-flma9j3zwr] {
    background: var(--color-bg-primary);
}

.filter-input[b-flma9j3zwr]::placeholder {
    color: var(--color-text-muted);
}

/* ==========================================================================
   ALERTS
   ========================================================================== */
.admin-container[b-flma9j3zwr] >  .app-alert {
    margin-bottom: var(--space-5);
}

/* ==========================================================================
   ADD ENTRY CARD
   ========================================================================== */
.bl-add-card[b-flma9j3zwr] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-2xl);
    margin-bottom: var(--space-5);
    overflow: hidden;
    animation: rise-b-flma9j3zwr 0.35s cubic-bezier(.4, 0, .2, 1) both;
}

.bl-add-header[b-flma9j3zwr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-5);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-primary);
}

.bl-add-title[b-flma9j3zwr] {
    margin: 0;
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.bl-add-close[b-flma9j3zwr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background-color 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1);
}

.bl-add-close:hover[b-flma9j3zwr] {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

.bl-add-close:focus-visible[b-flma9j3zwr] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.bl-add-body[b-flma9j3zwr] {
    padding: var(--space-5);
}

.bl-add-description[b-flma9j3zwr] {
    margin: 0 0 var(--space-5) 0;
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.bl-add-form-grid[b-flma9j3zwr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

/* Style form inputs inside add form */
.bl-add-form-grid input[b-flma9j3zwr],
.bl-add-form-grid input[type="text"][b-flma9j3zwr],
.bl-add-form-grid input[type="number"][b-flma9j3zwr],
.bl-input[b-flma9j3zwr],
input.bl-input[b-flma9j3zwr] {
    width: 100% !important;
    height: 40px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    color: var(--color-text-primary) !important;
    background: var(--color-bg-primary) !important;
    border: 1px solid var(--color-border-primary) !important;
    border-radius: var(--radius-md) !important;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1), box-shadow 200ms cubic-bezier(.4, 0, .2, 1) !important;
    appearance: none !important;
    box-sizing: border-box !important;
    font-family: var(--font-family-base) !important;
}

.bl-add-form-grid input:focus[b-flma9j3zwr],
.bl-input:focus[b-flma9j3zwr],
input.bl-input:focus[b-flma9j3zwr] {
    outline: none !important;
    border: 1px solid var(--color-primary) !important;
    box-shadow: var(--shadow-focus) !important;
}

.bl-add-form-grid input[b-flma9j3zwr]::placeholder,
.bl-input[b-flma9j3zwr]::placeholder,
input.bl-input[b-flma9j3zwr]::placeholder {
    color: var(--color-text-muted) !important;
}

.bl-add-actions[b-flma9j3zwr] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-primary);
}

.bl-add-cancel-btn[b-flma9j3zwr] {
    min-width: 100px;
}

.bl-add-submit-btn[b-flma9j3zwr] {
    min-width: 160px;
}

/* ==========================================================================
   STATS GRID
   ========================================================================== */
.bl-stats-grid[b-flma9j3zwr] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.bl-stat[b-flma9j3zwr] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1);
    animation: rise-b-flma9j3zwr 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

.bl-stat:hover[b-flma9j3zwr] {
    background: var(--color-bg-secondary);
}

.bl-stat-icon[b-flma9j3zwr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.bl-stat-icon svg[b-flma9j3zwr] {
    width: 22px;
    height: 22px;
}

.bl-stat--danger .bl-stat-icon[b-flma9j3zwr] {
    background: var(--color-error-light);
    color: var(--color-error);
}

.bl-stat--warning .bl-stat-icon[b-flma9j3zwr] {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.bl-stat--info .bl-stat-icon[b-flma9j3zwr] {
    background: var(--color-info-light);
    color: var(--color-info);
}

.bl-stat--purple .bl-stat-icon[b-flma9j3zwr] {
    background: var(--color-purple-light);
    color: var(--color-purple);
}

.bl-stat-content[b-flma9j3zwr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bl-stat-value[b-flma9j3zwr] {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.bl-stat-label[b-flma9j3zwr] {
    font-size: 13px;
    color: var(--color-text-secondary);
}

/* ==========================================================================
   TABLE CARD — Solid surface, bordered
   ========================================================================== */
.admin-table-card[b-flma9j3zwr] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    animation: rise-b-flma9j3zwr 0.45s cubic-bezier(.4, 0, .2, 1) both;
    overflow: hidden;
}

[b-flma9j3zwr] .admin-table-container {
    margin-top: 0;
}

[b-flma9j3zwr] .admin-table-header {
    background: var(--color-bg-secondary);
    margin-bottom: 0;
    padding: var(--space-4) 0;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border-primary);
}

[b-flma9j3zwr] .admin-table-rows {
    gap: 0;
}

[b-flma9j3zwr] .admin-table-row {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    padding: 0 var(--space-3) 0 0;
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

[b-flma9j3zwr] .admin-table-row:hover {
    background: var(--color-bg-secondary);
    box-shadow: none;
    transform: none;
}

[b-flma9j3zwr] .admin-table-row:focus-visible {
    box-shadow: var(--shadow-focus);
    outline: none;
    z-index: 1;
    position: relative;
}

[b-flma9j3zwr] .admin-table-row:not(:last-child) {
    box-shadow: inset 0 -1px 0 var(--color-border-primary);
}

/* ==========================================================================
   TABLE GRID — 4 columns
   ========================================================================== */
.bl-grid[b-flma9j3zwr] {
    grid-template-columns:
        minmax(100px, 0.8fr)   /* User ID */
        minmax(100px, 0.8fr)   /* Ticket ID */
        minmax(160px, 1.4fr)   /* Device ID */
        minmax(220px, 2.5fr);  /* Reason */
    align-items: center;
}

/* ==========================================================================
   ENTITY BADGES
   ========================================================================== */
.bl-entity[b-flma9j3zwr] {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bl-entity--user[b-flma9j3zwr] {
    background: rgba(26, 124, 202, 0.08);
    color: var(--color-info);
    border: 1px solid rgba(26, 124, 202, 0.15);
}

.bl-entity--ticket[b-flma9j3zwr] {
    background: rgba(5, 150, 105, 0.08);
    color: var(--color-success);
    border: 1px solid rgba(5, 150, 105, 0.15);
}

/* ==========================================================================
   DEVICE CODE BADGE
   ========================================================================== */
.bl-device-code[b-flma9j3zwr] {
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Courier New', monospace;
    font-size: 12px;
    font-weight: 500;
    padding: var(--space-1) var(--space-2);
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    letter-spacing: 0.3px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bl-device-code-full[b-flma9j3zwr] {
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Courier New', monospace;
    font-size: 12px;
    padding: var(--space-1) var(--space-2);
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    letter-spacing: 0.3px;
    word-break: break-all;
}

/* ==========================================================================
   REASON + DASH
   ========================================================================== */
.bl-reason[b-flma9j3zwr] {
    font-size: 14px;
    color: var(--color-text-primary);
    line-height: 1.4;
}

.bl-dash[b-flma9j3zwr] {
    color: var(--color-text-muted);
}

/* ==========================================================================
   ID BADGE (for detail modal)
   ========================================================================== */
.bl-id-badge[b-flma9j3zwr] {
    display: inline-flex;
    align-items: center;
    font-family: 'SF Mono', 'Cascadia Code', 'Courier New', monospace;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    letter-spacing: 0.3px;
}

/* ==========================================================================
   DETAIL MODAL — Structured sections
   ========================================================================== */
.bl-detail-modal[b-flma9j3zwr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.bl-detail-section[b-flma9j3zwr] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-md);
    overflow: hidden;
    animation: rise-b-flma9j3zwr 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

.bl-detail-section-title[b-flma9j3zwr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
}

.bl-detail-section-title svg[b-flma9j3zwr] {
    width: 18px;
    height: 18px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.bl-detail-grid[b-flma9j3zwr] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.bl-detail-field[b-flma9j3zwr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-primary);
}

.bl-detail-field:nth-child(odd)[b-flma9j3zwr] {
    border-right: 1px solid var(--color-border-primary);
}

.bl-detail-grid .bl-detail-field:nth-last-child(1)[b-flma9j3zwr],
.bl-detail-grid .bl-detail-field:nth-last-child(2)[b-flma9j3zwr] {
    border-bottom: none;
}

.bl-detail-grid .bl-detail-field:last-child:nth-child(odd)[b-flma9j3zwr] {
    border-right: none;
}

/* Full-width field spanning both columns */
.bl-detail-field-full[b-flma9j3zwr] {
    grid-column: 1 / -1;
    border-right: none !important;
}

.bl-detail-field-label[b-flma9j3zwr] {
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bl-detail-field-value[b-flma9j3zwr] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    word-break: break-word;
}

/* Detail actions — delete button */
.bl-detail-actions[b-flma9j3zwr] {
    display: flex;
    justify-content: flex-start;
}

.bl-delete-btn[b-flma9j3zwr] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: transparent;
    color: var(--color-error);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1);
}

.bl-delete-btn:hover[b-flma9j3zwr] {
    background: var(--color-error);
    color: var(--color-text-inverse);
}

.bl-delete-btn:focus-visible[b-flma9j3zwr] {
    outline: 2px solid var(--color-error);
    outline-offset: 2px;
}

.bl-delete-btn svg[b-flma9j3zwr] {
    flex-shrink: 0;
}

/* ==========================================================================
   SKELETON LOADING STATE
   ========================================================================== */
.bl-loading-state[b-flma9j3zwr] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.bl-skeleton-row[b-flma9j3zwr] {
    display: grid;
    grid-template-columns: 72px 1fr 120px;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-primary);
}

.bl-skeleton-row:first-child[b-flma9j3zwr] {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.bl-skeleton-row:last-child[b-flma9j3zwr] {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.bl-skeleton[b-flma9j3zwr] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 37%, var(--color-bg-tertiary) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer-b-flma9j3zwr 1.8s ease infinite;
    border-radius: var(--radius-sm);
}

.bl-skeleton-badge[b-flma9j3zwr] {
    width: 52px;
    height: 28px;
    border-radius: var(--radius-sm);
}

.bl-skeleton-text[b-flma9j3zwr] {
    width: 100%;
    max-width: 180px;
    height: 16px;
}

.bl-skeleton-text-sm[b-flma9j3zwr] {
    width: 72px;
    height: 12px;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.bl-empty-state[b-flma9j3zwr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    text-align: center;
}

.bl-empty-state-icon[b-flma9j3zwr] {
    width: 40px;
    height: 40px;
    color: var(--color-text-muted);
    opacity: 0.4;
    margin-bottom: var(--space-3);
}

.bl-empty-state-title[b-flma9j3zwr] {
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
}

.bl-empty-state-text[b-flma9j3zwr] {
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4) 0;
}

.bl-link-btn[b-flma9j3zwr] {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
    text-underline-offset: 2px;
}

.bl-link-btn:hover[b-flma9j3zwr] {
    color: var(--color-primary-hover);
    text-decoration-thickness: 2px;
}

/* ==========================================================================
   PAGINATION — 2026 Design System
   ========================================================================== */
.bl-pagination[b-flma9j3zwr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-top: 1px solid var(--color-border-primary);
}

.bl-pagination-info[b-flma9j3zwr] {
    font-family: var(--font-family-base);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-muted);
    white-space: nowrap;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}

.bl-pagination-controls[b-flma9j3zwr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.bl-page-nav[b-flma9j3zwr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1);
    flex-shrink: 0;
}

.bl-page-nav svg[b-flma9j3zwr] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.bl-page-nav:hover:not(:disabled)[b-flma9j3zwr] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.bl-page-nav:disabled[b-flma9j3zwr] {
    opacity: 0.25;
    cursor: default;
}

.bl-page-numbers[b-flma9j3zwr] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.bl-page-num[b-flma9j3zwr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 2px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-2xl);
    cursor: pointer;
    font-family: var(--font-family-base);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    color: var(--color-text-secondary);
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1);
    font-variant-numeric: tabular-nums;
}

.bl-page-num:hover:not(.active)[b-flma9j3zwr] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary);
}

.bl-page-num.active[b-flma9j3zwr] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: 600;
    border-color: var(--color-primary);
}

.bl-page-ellipsis[b-flma9j3zwr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 34px;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    user-select: none;
}

.bl-page-size[b-flma9j3zwr] {
    height: 34px;
    padding: 0 30px 0 12px;
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    font-family: var(--font-family-base);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 3.75L5 6.25L7.5 3.75' stroke='%2394A3B8' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1);
    font-variant-numeric: tabular-nums;
}

.bl-page-size:hover[b-flma9j3zwr] {
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.bl-page-size:focus[b-flma9j3zwr] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* ==========================================================================
   MOBILE — Card Layout (991.98px)
   ========================================================================== */
@media (max-width: 991.98px) {
    .bl-stats-grid[b-flma9j3zwr] {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-table-card[b-flma9j3zwr] {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        margin-top: var(--space-4);
        box-shadow: none !important;
        overflow: visible !important;
    }

    [b-flma9j3zwr] .admin-table-header,
    [b-flma9j3zwr] .admin-table-header.admin-auto-grid {
        display: none !important;
    }

    [b-flma9j3zwr] .admin-table-rows {
        gap: var(--space-3) !important;
    }

    [b-flma9j3zwr] .admin-table-row,
    [b-flma9j3zwr] .admin-table-container .admin-table-row {
        border-radius: var(--radius-lg) !important;
        margin-bottom: 0 !important;
        padding: var(--space-4) !important;
        background: var(--color-bg-primary) !important;
        border: 1px solid var(--color-border-primary) !important;
        box-shadow: var(--shadow-sm) !important;
        flex-direction: column !important;
    }

    [b-flma9j3zwr] .admin-table-row:not(:last-child) {
        box-shadow: var(--shadow-sm) !important;
    }

    [b-flma9j3zwr] .admin-table-row:hover {
        transform: none !important;
    }

    [b-flma9j3zwr] .admin-table-row-content,
    [b-flma9j3zwr] .admin-table-row-content.admin-auto-grid,
    [b-flma9j3zwr] .admin-table-row-content.admin-auto-grid.bl-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-2) !important;
        padding: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    [b-flma9j3zwr] .admin-auto-grid .admin-table-cell,
    [b-flma9j3zwr] .admin-auto-grid .admin-table-cell-primary {
        display: grid !important;
        grid-template-columns: 100px 1fr;
        align-items: baseline;
        gap: var(--space-3);
        padding: var(--space-1) 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        font-size: 13px;
        width: 100% !important;
        min-width: 0 !important;
    }

    [b-flma9j3zwr] .admin-auto-grid .admin-table-cell::before,
    [b-flma9j3zwr] .admin-auto-grid .admin-table-cell-primary::before {
        content: attr(data-label) !important;
        font-size: 11px;
        font-weight: 700;
        color: var(--color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }

    .bl-device-code[b-flma9j3zwr] {
        max-width: 150px;
        white-space: normal;
        word-break: break-all;
    }

    .bl-add-form-grid[b-flma9j3zwr] {
        grid-template-columns: repeat(2, 1fr);
    }

    .bl-skeleton-row[b-flma9j3zwr] {
        grid-template-columns: 60px 1fr 96px;
    }

    .bl-skeleton-text-sm[b-flma9j3zwr] {
        display: none;
    }

    /* Pagination — own card on mobile */
    .bl-pagination[b-flma9j3zwr] {
        background: var(--color-bg-primary);
        border: 1px solid var(--color-border-primary);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        margin-top: var(--space-3);
        padding: var(--space-3) var(--space-4);
        border-top: none;
    }
}

/* ==========================================================================
   SMALL SCREENS (767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {
    .bl-stats-grid[b-flma9j3zwr] {
        grid-template-columns: 1fr;
    }

    .bl-add-form-grid[b-flma9j3zwr] {
        grid-template-columns: 1fr;
    }

    .bl-add-actions[b-flma9j3zwr] {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .bl-add-cancel-btn[b-flma9j3zwr],
    .bl-add-submit-btn[b-flma9j3zwr] {
        width: 100%;
    }

    [b-flma9j3zwr] .filter-field {
        width: 100%;
    }

    .bl-skeleton-row[b-flma9j3zwr] {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .bl-skeleton-badge[b-flma9j3zwr] {
        width: 100%;
        max-width: none;
    }

    /* Hide page numbers, show compact nav */
    .bl-page-numbers[b-flma9j3zwr] {
        display: none;
    }

    .bl-pagination-controls[b-flma9j3zwr] {
        gap: var(--space-2);
    }

    .bl-pagination[b-flma9j3zwr] {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-3);
    }

    .bl-pagination-info[b-flma9j3zwr] {
        width: 100%;
        text-align: center;
        order: -1;
    }

    .bl-page-size[b-flma9j3zwr] {
        order: 3;
    }
}

@media (max-width: 575.98px) {
    .bl-pagination[b-flma9j3zwr] {
        padding: var(--space-3);
    }

    .bl-add-header[b-flma9j3zwr] {
        padding: var(--space-3) var(--space-4);
    }

    .bl-add-body[b-flma9j3zwr] {
        padding: var(--space-4);
    }

    /* Modal detail grid — single column on small screens */
    .bl-detail-grid[b-flma9j3zwr] {
        grid-template-columns: 1fr;
    }

    .bl-detail-field:nth-child(odd)[b-flma9j3zwr] {
        border-right: none;
    }

    .bl-detail-field[b-flma9j3zwr] {
        border-bottom: 1px solid var(--color-border-primary);
    }

    .bl-detail-grid .bl-detail-field:nth-last-child(2)[b-flma9j3zwr] {
        border-bottom: 1px solid var(--color-border-primary);
    }

    .bl-detail-grid .bl-detail-field:last-child[b-flma9j3zwr] {
        border-bottom: none;
    }

    .bl-detail-section-title[b-flma9j3zwr] {
        padding: 10px var(--space-3);
    }
}

/* ==========================================================================
   FOCUS STATES
   ========================================================================== */
.bl-link-btn:focus-visible[b-flma9j3zwr],
.bl-page-nav:focus-visible[b-flma9j3zwr],
.bl-page-num:focus-visible[b-flma9j3zwr] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.bl-page-size:focus-visible[b-flma9j3zwr] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .admin-table-card[b-flma9j3zwr],
    .bl-detail-section[b-flma9j3zwr],
    .bl-add-card[b-flma9j3zwr],
    .bl-stat[b-flma9j3zwr] {
        animation: none;
    }

    .bl-skeleton[b-flma9j3zwr] {
        animation: none;
    }

    .bl-entity[b-flma9j3zwr],
    .bl-device-code[b-flma9j3zwr],
    .bl-reason[b-flma9j3zwr],
    .bl-dash[b-flma9j3zwr],
    .bl-link-btn[b-flma9j3zwr],
    .bl-page-nav[b-flma9j3zwr],
    .bl-page-num[b-flma9j3zwr],
    .bl-page-size[b-flma9j3zwr],
    .bl-delete-btn[b-flma9j3zwr],
    .bl-add-close[b-flma9j3zwr],
    .bl-stat[b-flma9j3zwr],
    [b-flma9j3zwr] .admin-table-row {
        transition: none;
    }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .bl-pagination[b-flma9j3zwr],
    .bl-stats-grid[b-flma9j3zwr],
    .bl-add-card[b-flma9j3zwr],
    .bl-delete-btn[b-flma9j3zwr] {
        display: none !important;
    }

    .admin-table-card[b-flma9j3zwr] {
        border: 1px solid #ddd;
        box-shadow: none;
        background: var(--color-bg-primary);
    }
}
/* /Components/Pages/Admin/AdminDashboard.razor.rz.scp.css */
/* ========================================
   ADMIN DASHBOARD — 2026 Premium Design
   Scoped styles for /admin dashboard.
   db-* prefix for CSS isolation.
   Design tokens from _design-tokens.css.
   ======================================== */

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes dbRise-b-19ikyp3t3l {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0);    }
}

@keyframes dbShimmer-b-19ikyp3t3l {
    0%   { background-position: 200% 0;  }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   ALERTS
   ========================================================================== */
.admin-container[b-19ikyp3t3l] >  .app-alert {
    margin-bottom: var(--space-5);
}

/* ==========================================================================
   SECTION 1 — HERO KPI ROW  (4 cards)
   ========================================================================== */
.db-kpi-row[b-19ikyp3t3l] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

.db-kpi-card[b-19ikyp3t3l] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    padding: var(--space-5) var(--space-5);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-apple);
    animation: dbRise-b-19ikyp3t3l 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.db-kpi-card:nth-child(1)[b-19ikyp3t3l] { animation-delay: 0s;    }
.db-kpi-card:nth-child(2)[b-19ikyp3t3l] { animation-delay: 0.06s; }
.db-kpi-card:nth-child(3)[b-19ikyp3t3l] { animation-delay: 0.12s; }
.db-kpi-card:nth-child(4)[b-19ikyp3t3l] { animation-delay: 0.18s; }

.db-kpi-card:hover[b-19ikyp3t3l] {
    box-shadow: var(--shadow-float);
    transform: translateY(-1px);
}

/* KPI Icon Circle */
.db-kpi-icon[b-19ikyp3t3l] {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--transition-apple-fast);
}

.db-kpi-card:hover .db-kpi-icon[b-19ikyp3t3l] {
    transform: scale(1.05);
}

.db-kpi-icon svg[b-19ikyp3t3l] {
    color: var(--color-bg-primary);
}

.db-kpi-icon--blue[b-19ikyp3t3l] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    box-shadow: 0 3px 10px rgba(26, 124, 202, 0.25);
}

.db-kpi-icon--amber[b-19ikyp3t3l] {
    background: linear-gradient(135deg, var(--color-amber) 0%, var(--color-warning) 100%);
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.25);
}

.db-kpi-icon--violet[b-19ikyp3t3l] {
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-violet-dark) 100%);
    box-shadow: 0 3px 10px rgba(139, 92, 246, 0.25);
}

.db-kpi-icon--emerald[b-19ikyp3t3l] {
    background: linear-gradient(135deg, var(--color-emerald) 0%, var(--color-success) 100%);
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.25);
}

/* KPI Content */
.db-kpi-content[b-19ikyp3t3l] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.db-kpi-value[b-19ikyp3t3l] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
}

.db-kpi-label[b-19ikyp3t3l] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
}

.db-kpi-detail[b-19ikyp3t3l] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: 2px;
}

/* KPI Badges */
.db-kpi-badge[b-19ikyp3t3l] {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.5;
    white-space: nowrap;
}

.db-kpi-badge--warning[b-19ikyp3t3l] {
    background: var(--color-warning-light);
    color: var(--color-amber-darker);
}

.db-kpi-badge--error[b-19ikyp3t3l] {
    background: var(--color-error-light);
    color: var(--color-error-dark);
}

.db-kpi-badge--success[b-19ikyp3t3l] {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.db-kpi-badge--info[b-19ikyp3t3l] {
    background: var(--color-info-light);
    color: var(--color-info-dark);
}

.db-kpi-badge--neutral[b-19ikyp3t3l] {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

/* ==========================================================================
   SECTION 2 — MAIN GRID  (two columns)
   ========================================================================== */
.db-grid[b-19ikyp3t3l] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: start;
}

.db-column[b-19ikyp3t3l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ==========================================================================
   CARD BASE
   ========================================================================== */
.db-card[b-19ikyp3t3l] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-apple);
    animation: dbRise-b-19ikyp3t3l 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
    animation-delay: 0.22s;
}

.db-card:hover[b-19ikyp3t3l] {
    box-shadow: var(--shadow-float);
    transform: translateY(-1px);
}

/* Card Header */
.db-card-header[b-19ikyp3t3l] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6) 0 var(--space-6);
}

.db-card-icon[b-19ikyp3t3l] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.db-card-icon svg[b-19ikyp3t3l] {
    color: var(--color-bg-primary);
}

/* Card icon variants */
.db-icon-fleet[b-19ikyp3t3l] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    box-shadow: 0 2px 8px rgba(26, 124, 202, 0.2);
}

.db-icon-revenue[b-19ikyp3t3l] {
    background: linear-gradient(135deg, var(--color-amber) 0%, var(--color-warning) 100%);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.db-icon-disruptions[b-19ikyp3t3l] {
    background: linear-gradient(135deg, var(--color-error-bright) 0%, var(--color-error) 100%);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);
}

.db-icon-activity[b-19ikyp3t3l] {
    background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-teal-dark) 100%);
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.2);
}

.db-icon-links[b-19ikyp3t3l] {
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-violet-dark) 100%);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2);
}

.db-card-header-text[b-19ikyp3t3l] {
    flex: 1;
    min-width: 0;
}

.db-card-title[b-19ikyp3t3l] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-normal);
}

.db-card-subtitle[b-19ikyp3t3l] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin: 2px 0 0 0;
    line-height: var(--line-height-normal);
}

/* Card header link */
.db-card-link[b-19ikyp3t3l] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-apple-fast);
    margin-top: 2px;
}

.db-card-link:hover[b-19ikyp3t3l] {
    background: var(--color-primary-light);
    color: var(--color-primary-hover);
    text-decoration: none;
}

/* Card Body */
.db-card-body[b-19ikyp3t3l] {
    padding: var(--space-5) var(--space-6) var(--space-6) var(--space-6);
}

/* Empty state */
.db-empty[b-19ikyp3t3l] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   FLEET STATUS — Mini Table
   ========================================================================== */
.db-mini-table-wrap[b-19ikyp3t3l] {
    overflow-x: auto;
    margin: 0 calc(var(--space-6) * -1);
    padding: 0 var(--space-6);
    -webkit-overflow-scrolling: touch;
}

.db-mini-table[b-19ikyp3t3l] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--table-body-font-size);
    line-height: var(--table-line-height);
    letter-spacing: var(--table-letter-spacing);
}

.db-mini-table thead th[b-19ikyp3t3l] {
    font-size: var(--table-header-font-size);
    font-weight: var(--table-header-font-weight);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    padding: 0 var(--space-3) var(--space-3) var(--space-3);
    text-align: left;
    border-bottom: 1px solid var(--color-border-primary);
    white-space: nowrap;
}

.db-mini-table tbody tr[b-19ikyp3t3l] {
    transition: background var(--transition-fast);
}

.db-mini-table tbody tr:hover[b-19ikyp3t3l] {
    background: var(--color-bg-secondary);
}

.db-mini-table tbody td[b-19ikyp3t3l] {
    padding: var(--space-3);
    color: var(--color-text-primary);
    font-weight: var(--table-body-font-weight);
    white-space: nowrap;
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: middle;
}

.db-mini-table tbody tr:last-child td[b-19ikyp3t3l] {
    border-bottom: none;
}

/* Driver cell — truncate */
.db-cell-driver[b-19ikyp3t3l] {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--font-weight-semibold) !important;
}

/* Line badge */
.db-line-badge[b-19ikyp3t3l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: 1.5;
}

/* Battery indicator */
.db-battery-wrap[b-19ikyp3t3l] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.db-battery[b-19ikyp3t3l] {
    width: 40px;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--color-bg-tertiary);
    overflow: hidden;
    border: 1px solid var(--color-border-primary);
}

.db-battery-fill[b-19ikyp3t3l] {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width var(--transition-normal);
}

.db-battery-fill.battery-good[b-19ikyp3t3l] {
    background: var(--color-success);
}

.db-battery-fill.battery-low[b-19ikyp3t3l] {
    background: var(--color-warning);
}

.db-battery-fill.battery-critical[b-19ikyp3t3l] {
    background: var(--color-error);
}

.db-battery-text[b-19ikyp3t3l] {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    min-width: 28px;
}

/* Time badge */
.db-time[b-19ikyp3t3l] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.5;
}

.db-time--recent[b-19ikyp3t3l] {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.db-time--stale[b-19ikyp3t3l] {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.db-time--offline[b-19ikyp3t3l] {
    background: var(--color-error-light);
    color: var(--color-error-dark);
}

/* ==========================================================================
   REVENUE — Summary + CSS Bar Chart
   ========================================================================== */
.db-revenue-summary[b-19ikyp3t3l] {
    display: flex;
    gap: var(--space-6);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
}

.db-revenue-stat[b-19ikyp3t3l] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.db-revenue-stat-label[b-19ikyp3t3l] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.db-revenue-stat-value[b-19ikyp3t3l] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-tight);
}

/* Bar chart */
.db-chart[b-19ikyp3t3l] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    height: 140px;
    padding-top: var(--space-3);
}

.db-chart-col[b-19ikyp3t3l] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    gap: var(--space-2);
    cursor: default;
}

.db-chart-bar[b-19ikyp3t3l] {
    width: 100%;
    max-width: 48px;
    min-height: 4px;
    border-radius: var(--radius-sm) var(--radius-sm) 2px 2px;
    background: var(--color-primary-light);
    transition: all var(--transition-normal);
    position: relative;
}

.db-chart-bar:hover[b-19ikyp3t3l] {
    background: var(--color-primary);
    opacity: 0.85;
}

.db-chart-bar--today[b-19ikyp3t3l] {
    background: var(--color-primary);
    box-shadow: 0 2px 8px rgba(26, 124, 202, 0.25);
}

.db-chart-bar--today:hover[b-19ikyp3t3l] {
    background: var(--color-primary-hover);
    opacity: 1;
}

.db-chart-label[b-19ikyp3t3l] {
    font-size: 0.625rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1;
}

/* ==========================================================================
   DISRUPTIONS — 2x2 Stat Grid
   ========================================================================== */
.db-stat-grid[b-19ikyp3t3l] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.db-stat-card[b-19ikyp3t3l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--color-bg-tertiary);
    transition: background var(--transition-fast);
    text-align: center;
}

.db-stat-card:hover[b-19ikyp3t3l] {
    background: var(--color-bg-secondary);
}

.db-stat-card--danger[b-19ikyp3t3l] {
    background: var(--color-error-light);
}

.db-stat-card--danger:hover[b-19ikyp3t3l] {
    background: #FEE2E2;
}

.db-stat-card--warning[b-19ikyp3t3l] {
    background: var(--color-warning-light);
}

.db-stat-card--warning:hover[b-19ikyp3t3l] {
    background: var(--color-amber-light);
}

.db-stat-card--muted[b-19ikyp3t3l] {
    background: var(--color-bg-secondary);
}

.db-stat-value[b-19ikyp3t3l] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
}

.db-stat-card--danger .db-stat-value[b-19ikyp3t3l] {
    color: var(--color-error);
}

.db-stat-card--warning .db-stat-value[b-19ikyp3t3l] {
    color: var(--color-warning-dark);
}

.db-stat-label[b-19ikyp3t3l] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-top: 2px;
}

/* ==========================================================================
   ACTIVITY FEED
   ========================================================================== */
.db-activity-list[b-19ikyp3t3l] {
    display: flex;
    flex-direction: column;
}

.db-activity-item[b-19ikyp3t3l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-light);
    transition: background var(--transition-fast);
}

.db-activity-item:last-child[b-19ikyp3t3l] {
    border-bottom: none;
}

.db-activity-type[b-19ikyp3t3l] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.db-activity-count[b-19ikyp3t3l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    background: var(--color-bg-tertiary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
}

/* ==========================================================================
   QUICK LINKS — 2x4 Grid
   ========================================================================== */
.db-links-grid[b-19ikyp3t3l] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

.db-quick-link[b-19ikyp3t3l] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    transition: all var(--transition-apple-fast);
}

.db-quick-link:hover[b-19ikyp3t3l] {
    background: var(--color-bg-tertiary);
    color: var(--color-primary);
    text-decoration: none;
}

.db-quick-link svg[b-19ikyp3t3l] {
    flex-shrink: 0;
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

.db-quick-link:hover svg[b-19ikyp3t3l] {
    color: var(--color-primary);
}

/* ==========================================================================
   SKELETON LOADING STATE
   ========================================================================== */
.db-skeleton[b-19ikyp3t3l] {
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg,
        var(--color-bg-tertiary) 25%,
        var(--color-border-light) 50%,
        var(--color-bg-tertiary) 75%);
    background-size: 400% 100%;
    animation: dbShimmer-b-19ikyp3t3l 1.6s ease infinite;
}

.db-skeleton-kpi[b-19ikyp3t3l] {
    flex-direction: row;
    gap: var(--space-4);
}

.db-skeleton-kpi .db-skeleton-icon-sm[b-19ikyp3t3l] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.db-skeleton-kpi-content[b-19ikyp3t3l] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.db-skeleton-value[b-19ikyp3t3l] {
    height: 28px;
    width: 60%;
    border-radius: var(--radius-sm);
}

.db-skeleton-label[b-19ikyp3t3l] {
    height: 14px;
    width: 80%;
    border-radius: var(--radius-sm);
}

.db-skeleton-card[b-19ikyp3t3l] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    overflow: hidden;
}

.db-skeleton-block[b-19ikyp3t3l] {
    height: 200px;
    width: 100%;
    border-radius: var(--radius-lg);
}

.db-skeleton-block-sm[b-19ikyp3t3l] {
    height: 130px;
    width: 100%;
    border-radius: var(--radius-lg);
}

/* ==========================================================================
   RESPONSIVE — Tablets
   ========================================================================== */
@media (max-width: 1199.98px) {
    .db-kpi-row[b-19ikyp3t3l] {
        grid-template-columns: repeat(2, 1fr);
    }

    .db-cell-driver[b-19ikyp3t3l] {
        max-width: 110px;
    }
}

/* ==========================================================================
   RESPONSIVE — Small tablets / large phones
   ========================================================================== */
@media (max-width: 991.98px) {
    .db-grid[b-19ikyp3t3l] {
        grid-template-columns: 1fr;
    }

    .db-kpi-row[b-19ikyp3t3l] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .db-kpi-card[b-19ikyp3t3l] {
        padding: var(--space-4);
    }

    .db-kpi-value[b-19ikyp3t3l] {
        font-size: var(--font-size-xl);
    }
}

/* ==========================================================================
   RESPONSIVE — Phones
   ========================================================================== */
@media (max-width: 575.98px) {
    .db-kpi-row[b-19ikyp3t3l] {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .db-kpi-card[b-19ikyp3t3l] {
        padding: var(--space-4);
        border-radius: var(--radius-xl);
    }

    .db-kpi-value[b-19ikyp3t3l] {
        font-size: var(--font-size-xl);
    }

    .db-card[b-19ikyp3t3l] {
        border-radius: var(--radius-xl);
    }

    .db-card-header[b-19ikyp3t3l] {
        padding: var(--space-4) var(--space-4) 0 var(--space-4);
        gap: var(--space-3);
    }

    .db-card-body[b-19ikyp3t3l] {
        padding: var(--space-4);
    }

    .db-card-icon[b-19ikyp3t3l] {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    .db-card-title[b-19ikyp3t3l] {
        font-size: var(--font-size-base);
    }

    .db-mini-table-wrap[b-19ikyp3t3l] {
        margin: 0 calc(var(--space-4) * -1);
        padding: 0 var(--space-4);
    }

    .db-chart[b-19ikyp3t3l] {
        height: 110px;
    }

    .db-revenue-summary[b-19ikyp3t3l] {
        gap: var(--space-4);
    }

    .db-revenue-stat-value[b-19ikyp3t3l] {
        font-size: var(--font-size-md);
    }

    .db-stat-grid[b-19ikyp3t3l] {
        gap: var(--space-2);
    }

    .db-stat-card[b-19ikyp3t3l] {
        padding: var(--space-3) var(--space-2);
    }

    .db-stat-value[b-19ikyp3t3l] {
        font-size: var(--font-size-lg);
    }

    .db-links-grid[b-19ikyp3t3l] {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   ACCESSIBILITY — Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .db-kpi-card[b-19ikyp3t3l],
    .db-card[b-19ikyp3t3l],
    .db-kpi-icon[b-19ikyp3t3l],
    .db-chart-bar[b-19ikyp3t3l],
    .db-quick-link[b-19ikyp3t3l],
    .db-stat-card[b-19ikyp3t3l] {
        transition: none;
    }

    .db-kpi-card[b-19ikyp3t3l],
    .db-card[b-19ikyp3t3l] {
        animation: none;
    }

    .db-kpi-card:hover[b-19ikyp3t3l],
    .db-card:hover[b-19ikyp3t3l] {
        transform: none;
    }

    .db-kpi-card:hover .db-kpi-icon[b-19ikyp3t3l] {
        transform: none;
    }

    .db-skeleton[b-19ikyp3t3l] {
        animation: none;
        background: var(--color-bg-tertiary);
    }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .db-kpi-card[b-19ikyp3t3l],
    .db-card[b-19ikyp3t3l] {
        box-shadow: none;
        border: 1px solid #ddd;
        break-inside: avoid;
        animation: none;
    }

    .db-kpi-card:hover[b-19ikyp3t3l],
    .db-card:hover[b-19ikyp3t3l] {
        transform: none;
        box-shadow: none;
    }

    .db-card-link[b-19ikyp3t3l] {
        display: none;
    }

    .db-quick-link[b-19ikyp3t3l] {
        color: #333;
    }
}
/* /Components/Pages/Admin/AdminDisruptions.razor.rz.scp.css */
/* ========================================
   ADMIN DISRUPTIONS — 2026 Design System
   Solid surfaces · bordered cards · no glass
   ======================================== */

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes rise-b-n4de7p9n33 {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes skeleton-shimmer-b-n4de7p9n33 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   TABLE CARD
   ========================================================================== */
.admin-table-card[b-n4de7p9n33] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    margin-top: var(--space-5);
    box-shadow: var(--shadow-sm);
    animation: rise-b-n4de7p9n33 0.45s cubic-bezier(.4, 0, .2, 1) both;
    overflow: hidden;
}

[b-n4de7p9n33] .admin-table-container {
    margin-top: 0;
}

[b-n4de7p9n33] .admin-table-header {
    background: var(--color-bg-secondary);
    margin-bottom: 0;
    padding: var(--space-4) 0;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border-primary);
}

[b-n4de7p9n33] .admin-table-rows {
    gap: 0;
}

[b-n4de7p9n33] .admin-table-row {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    padding: 0 var(--space-3) 0 0;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

[b-n4de7p9n33] .admin-table-row:hover {
    background: var(--color-bg-secondary);
    box-shadow: none;
    transform: none;
}

[b-n4de7p9n33] .admin-table-row:focus-visible {
    box-shadow: var(--shadow-focus);
    outline: none;
    z-index: 1;
    position: relative;
}

[b-n4de7p9n33] .admin-table-row:not(:last-child) {
    box-shadow: inset 0 -1px 0 var(--color-border-primary);
}

/* Override grid columns for 5-column disruptions layout */
[b-n4de7p9n33] .admin-grid-cols-5 {
    --admin-grid-cols: 5;
}

/* ==========================================================================
   PAGE HEADER OVERRIDES
   ========================================================================== */
.admin-header-content[b-n4de7p9n33] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.admin-header-actions[b-n4de7p9n33] {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* ==========================================================================
   ALERT ENHANCEMENTS
   ========================================================================== */
.alert-icon[b-n4de7p9n33] {
    width: var(--space-5);
    height: var(--space-5);
    flex-shrink: 0;
}

.alert-close[b-n4de7p9n33] {
    position: absolute;
    top: 50%;
    right: var(--space-3);
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: var(--space-1);
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    transition: opacity 200ms cubic-bezier(.4, 0, .2, 1);
}

.alert-close:hover[b-n4de7p9n33] {
    opacity: 1;
}

.alert-close svg[b-n4de7p9n33] {
    width: var(--space-4);
    height: var(--space-4);
}

[b-n4de7p9n33] .admin-alert {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    position: relative;
    padding-right: 40px;
}

/* ==========================================================================
   FORM CARD (inline add/edit)
   ========================================================================== */
.disruption-form-card[b-n4de7p9n33] {
    margin-bottom: var(--space-6);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-2xl);
    animation: rise-b-n4de7p9n33 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

.card-header-content[b-n4de7p9n33] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.card-icon[b-n4de7p9n33] {
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-icon svg[b-n4de7p9n33] {
    width: var(--space-5);
    height: var(--space-5);
}

.card-icon--add[b-n4de7p9n33] {
    background: rgba(26, 124, 202, 0.1);
    color: var(--color-primary);
}

.card-icon--edit[b-n4de7p9n33] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--color-warning);
}

/* ==========================================================================
   FORM STRUCTURE
   ========================================================================== */
.disruption-form[b-n4de7p9n33] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.form-section[b-n4de7p9n33] {
    padding: var(--space-5);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    animation: rise-b-n4de7p9n33 0.45s cubic-bezier(.4, 0, .2, 1) both;
    transition: box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
}

.form-section:hover[b-n4de7p9n33] {
    box-shadow: var(--shadow-md);
    transform: none;
}

.form-section-title[b-n4de7p9n33] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-base, 15px);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-5) 0;
    font-family: var(--font-family-base, 'Inter', sans-serif);
}

.section-number[b-n4de7p9n33] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--color-primary);
    color: var(--color-bg-primary);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
    transition: box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
}

.section-number:hover[b-n4de7p9n33] {
    box-shadow: var(--shadow-focus);
}

.form-grid[b-n4de7p9n33] {
    display: grid;
    gap: var(--space-5);
}

.form-grid--2col[b-n4de7p9n33] {
    grid-template-columns: repeat(2, 1fr);
}

.form-grid-span-2[b-n4de7p9n33] {
    grid-column: span 2;
}

.form-actions[b-n4de7p9n33] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-6);
    margin-top: var(--space-6);
}

.form-actions-left[b-n4de7p9n33] {
    margin-right: auto;
}

/* ==========================================================================
   SCOPED INPUT OVERRIDES
   ========================================================================== */
[b-n4de7p9n33] .admin-input-simple {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1),
                box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
}

[b-n4de7p9n33] .admin-input-simple:focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
    outline: none;
}

[b-n4de7p9n33] .admin-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1),
                border-color 200ms cubic-bezier(.4, 0, .2, 1),
                box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
}

[b-n4de7p9n33] .admin-btn:focus-visible {
    box-shadow: var(--shadow-focus);
    outline: none;
}

[b-n4de7p9n33] .admin-btn svg {
    width: var(--space-4);
    height: var(--space-4);
    flex-shrink: 0;
}

/* Danger Button — flat, no gradient */
[b-n4de7p9n33] .admin-btn-danger {
    background: var(--color-error);
    color: var(--color-bg-primary);
    border: 1px solid var(--color-error);
    transition: background 200ms cubic-bezier(.4, 0, .2, 1),
                box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
}

[b-n4de7p9n33] .admin-btn-danger:hover {
    background: var(--color-error-dark, #B91C1C);
    border-color: var(--color-error-dark, #B91C1C);
}

[b-n4de7p9n33] .admin-btn-danger:focus-visible {
    box-shadow: var(--shadow-focus);
    outline: none;
}

[b-n4de7p9n33] .admin-btn-danger svg {
    width: var(--space-4);
    height: var(--space-4);
}

/* ==========================================================================
   APPSELECT INTEGRATION IN FORMS
   ========================================================================== */
[b-n4de7p9n33] .severity-select .app-select-wrapper {
    width: 100%;
}

[b-n4de7p9n33] .severity-select .app-select {
    min-height: 56px;
    border-radius: var(--radius-lg);
}

[b-n4de7p9n33] .severity-select .app-select-trigger {
    padding: 0 var(--space-4);
    min-height: 56px;
}

[b-n4de7p9n33] .severity-select .app-select-menu {
    border-radius: var(--radius-lg);
    margin-top: var(--space-1);
    z-index: 1000;
}

[b-n4de7p9n33] .severity-select .app-select-option {
    padding: var(--space-3) var(--space-4);
}

/* ==========================================================================
   MULTI-SELECT COMPONENT
   ========================================================================== */
.multi-select-box[b-n4de7p9n33] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
}

.multi-select-box:hover[b-n4de7p9n33] {
    box-shadow: var(--shadow-sm);
}

.multi-select-header[b-n4de7p9n33] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) 14px;
    min-height: 56px;
    box-sizing: border-box;
}

.multi-select-count[b-n4de7p9n33] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
}

.count-badge[b-n4de7p9n33] {
    background: rgba(26, 124, 202, 0.1);
    color: var(--color-primary);
    padding: var(--space-1) 10px;
    border: 1px solid rgba(26, 124, 202, 0.2);
    border-radius: var(--radius-2xl);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
}

.count-placeholder[b-n4de7p9n33] {
    color: var(--color-text-secondary);
}

.count-disabled[b-n4de7p9n33] {
    color: var(--color-text-muted);
    font-style: italic;
}

.multi-select-toggle[b-n4de7p9n33] {
    width: var(--space-8);
    height: var(--space-8);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-primary);
    background: var(--color-bg-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1),
                border-color 200ms cubic-bezier(.4, 0, .2, 1);
    color: var(--color-text-secondary);
}

.multi-select-toggle:hover:not(:disabled)[b-n4de7p9n33] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
}

.multi-select-toggle:focus-visible[b-n4de7p9n33] {
    box-shadow: var(--shadow-focus);
    outline: none;
}

.multi-select-toggle:disabled[b-n4de7p9n33] {
    opacity: 0.5;
    cursor: not-allowed;
}

.multi-select-toggle svg[b-n4de7p9n33] {
    width: var(--space-4);
    height: var(--space-4);
    transition: transform 200ms cubic-bezier(.4, 0, .2, 1);
}

.multi-select-toggle svg.rotated[b-n4de7p9n33] {
    transform: rotate(180deg);
}

.multi-select-options[b-n4de7p9n33] {
    padding: var(--space-3);
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border-primary);
}

.multi-select-actions[b-n4de7p9n33] {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.select-action-btn[b-n4de7p9n33] {
    padding: var(--space-1) var(--space-3);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1),
                color 200ms cubic-bezier(.4, 0, .2, 1);
}

.select-action-btn:hover[b-n4de7p9n33] {
    background: var(--color-primary);
    color: var(--color-bg-primary);
}

.select-action-btn:focus-visible[b-n4de7p9n33] {
    box-shadow: var(--shadow-focus);
    outline: none;
}

.multi-select-list[b-n4de7p9n33] {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.multi-select-item:hover[b-n4de7p9n33] {
    background: unset;
}

.multi-select-label[b-n4de7p9n33] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.line-number[b-n4de7p9n33] {
    background: var(--color-bg-tertiary);
    padding: 2px var(--space-2);
    border-radius: var(--space-1);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
}

.line-name[b-n4de7p9n33] {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
}

.multi-select-empty[b-n4de7p9n33] {
    padding: var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
}

/* ==========================================================================
   TABLE CONTENT STYLES
   ========================================================================== */
.results-count[b-n4de7p9n33] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-left: var(--space-2);
}

.disruption-message-text[b-n4de7p9n33] {
    font-weight: var(--font-weight-medium);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Date range display */
.date-range[b-n4de7p9n33] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
}

.date-start[b-n4de7p9n33],
.date-end[b-n4de7p9n33] {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

.date-separator[b-n4de7p9n33] {
    color: var(--color-text-muted);
    font-size: 11px;
}

.date-ongoing[b-n4de7p9n33] {
    color: var(--color-success);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
}

/* Affected badges */
.affected-badges[b-n4de7p9n33] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.more-badge[b-n4de7p9n33] {
    background: var(--color-bg-tertiary) !important;
}

.no-data[b-n4de7p9n33] {
    color: var(--color-text-muted);
}

.stations-count[b-n4de7p9n33] {
    display: inline-flex;
    align-items: center;
    gap: var(--radius-sm);
    font-size: 13px;
    color: var(--color-text-secondary);
}

.stations-count svg[b-n4de7p9n33] {
    width: 14px;
    height: 14px;
}

.all-stations[b-n4de7p9n33] {
    color: var(--color-text-muted);
    font-size: 13px;
    font-style: italic;
}

/* Badge with icon */
[b-n4de7p9n33] .admin-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.badge-icon[b-n4de7p9n33] {
    width: var(--space-3);
    height: var(--space-3);
    flex-shrink: 0;
}

/* ==========================================================================
   ACTION BUTTONS
   ========================================================================== */
.desktop-actions[b-n4de7p9n33] {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
}

@media (max-width: 767px) {
    .desktop-actions[b-n4de7p9n33] {
        display: none;
    }
}

@media (min-width: 768px) {
    [b-n4de7p9n33] .mobile-action-menu {
        display: none;
    }
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.table-empty-state[b-n4de7p9n33] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12, 48px) var(--space-6);
    text-align: center;
    animation: rise-b-n4de7p9n33 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

.empty-icon[b-n4de7p9n33] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
    opacity: 0.4;
    transition: opacity 200ms cubic-bezier(.4, 0, .2, 1);
}

.table-empty-state:hover .empty-icon[b-n4de7p9n33] {
    opacity: 0.6;
}

.empty-icon svg[b-n4de7p9n33] {
    width: 100%;
    height: 100%;
}

.empty-title[b-n4de7p9n33] {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-text-muted);
    margin: 0;
    letter-spacing: -0.01em;
}

.empty-state[b-n4de7p9n33] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12, 48px) var(--space-6);
    text-align: center;
    animation: rise-b-n4de7p9n33 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

.empty-state-icon[b-n4de7p9n33] {
    width: 64px;
    height: 64px;
    margin-bottom: var(--space-4);
    color: var(--color-text-muted);
    opacity: 0.6;
    transition: opacity 200ms cubic-bezier(.4, 0, .2, 1);
}

.empty-state:hover .empty-state-icon[b-n4de7p9n33] {
    opacity: 0.8;
}

.empty-state-icon svg[b-n4de7p9n33] {
    width: 100%;
    height: 100%;
}

.empty-state-title[b-n4de7p9n33] {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--text-lg, 1.125rem);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.empty-state-text[b-n4de7p9n33] {
    margin: 0 0 var(--space-6) 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary);
    max-width: 320px;
}

/* ==========================================================================
   SKELETON LOADING
   ========================================================================== */
.skeleton-card[b-n4de7p9n33] {
    padding: var(--space-6);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-2xl);
}

.skeleton-header[b-n4de7p9n33] {
    height: 28px;
    width: 200px;
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 50%, var(--color-bg-tertiary) 75%);
    background-size: 200% 100%;
    border-radius: var(--radius-md);
    animation: skeleton-shimmer-b-n4de7p9n33 1.5s ease-in-out infinite;
    margin-bottom: var(--space-6);
}

.skeleton-table[b-n4de7p9n33] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.skeleton-row[b-n4de7p9n33] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 80px;
    gap: var(--space-4);
    padding: var(--space-3) 0;
}

.skeleton-cell[b-n4de7p9n33] {
    height: var(--space-5);
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 50%, var(--color-bg-tertiary) 75%);
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
    animation: skeleton-shimmer-b-n4de7p9n33 1.5s ease-in-out infinite;
}

.skeleton-cell--wide[b-n4de7p9n33] {
    height: var(--space-10);
}

/* ==========================================================================
   MODAL STYLES (Delete confirmation)
   ========================================================================== */
.delete-modal-content[b-n4de7p9n33] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.modal-icon[b-n4de7p9n33] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-icon svg[b-n4de7p9n33] {
    width: 28px;
    height: 28px;
}

.modal-icon--danger[b-n4de7p9n33] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-error);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.modal-text[b-n4de7p9n33] {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
    text-align: center;
}

.disruption-details[b-n4de7p9n33] {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
}

.disruption-detail[b-n4de7p9n33] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.detail-label[b-n4de7p9n33] {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-value[b-n4de7p9n33] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.modal-actions[b-n4de7p9n33] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-4);
    width: 100%;
}

/* ==========================================================================
   PAGINATION — 2026 Design System
   ========================================================================== */
.an-pagination[b-n4de7p9n33] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-top: 1px solid var(--color-border-primary);
}

.an-pagination-info[b-n4de7p9n33] {
    font-family: var(--font-family-base);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-muted);
    white-space: nowrap;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}

.an-pagination-controls[b-n4de7p9n33] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.an-page-nav[b-n4de7p9n33] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background 200ms cubic-bezier(.4, 0, .2, 1),
                border-color 200ms cubic-bezier(.4, 0, .2, 1),
                color 200ms cubic-bezier(.4, 0, .2, 1);
    flex-shrink: 0;
}

.an-page-nav svg[b-n4de7p9n33] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.an-page-nav:hover:not(:disabled)[b-n4de7p9n33] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.an-page-nav:disabled[b-n4de7p9n33] {
    opacity: 0.25;
    cursor: default;
}

.an-page-nav:focus-visible[b-n4de7p9n33] {
    box-shadow: var(--shadow-focus);
    outline: none;
}

.an-page-numbers[b-n4de7p9n33] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.an-page-num[b-n4de7p9n33] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 2px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    cursor: pointer;
    font-family: var(--font-family-base);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    color: var(--color-text-secondary);
    transition: background 200ms cubic-bezier(.4, 0, .2, 1),
                border-color 200ms cubic-bezier(.4, 0, .2, 1),
                color 200ms cubic-bezier(.4, 0, .2, 1);
    font-variant-numeric: tabular-nums;
}

.an-page-num:hover:not(.active)[b-n4de7p9n33] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary);
}

.an-page-num.active[b-n4de7p9n33] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: 600;
    border-color: var(--color-primary);
}

.an-page-num:focus-visible[b-n4de7p9n33] {
    box-shadow: var(--shadow-focus);
    outline: none;
}

.an-page-ellipsis[b-n4de7p9n33] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 34px;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    user-select: none;
}

.an-page-size[b-n4de7p9n33] {
    height: 34px;
    padding: 0 30px 0 12px;
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    font-family: var(--font-family-base);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 3.75L5 6.25L7.5 3.75' stroke='%2394A3B8' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1),
                color 200ms cubic-bezier(.4, 0, .2, 1);
    font-variant-numeric: tabular-nums;
}

.an-page-size:hover[b-n4de7p9n33] {
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.an-page-size:focus[b-n4de7p9n33] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.an-page-size:focus-visible[b-n4de7p9n33] {
    box-shadow: var(--shadow-focus);
    outline: none;
}

/* ==========================================================================
   RESPONSIVE — Large desktop
   ========================================================================== */
@media (max-width: 1023px) {
    .admin-header-content[b-n4de7p9n33] {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-header-actions[b-n4de7p9n33] {
        width: 100%;
    }
}

/* ==========================================================================
   TABLET & MOBILE — Card layout
   ========================================================================== */
@media (max-width: 991.98px) {
    .admin-table-card[b-n4de7p9n33] {
        background: transparent;
        border: none;
        border-radius: 0;
        margin-top: var(--space-4);
        box-shadow: none;
        overflow: visible;
    }

    [b-n4de7p9n33] .admin-table-header,
    [b-n4de7p9n33] .admin-table-header.admin-auto-grid {
        display: none !important;
    }

    [b-n4de7p9n33] .admin-table-rows {
        gap: var(--space-3) !important;
    }

    [b-n4de7p9n33] .admin-table-row,
    [b-n4de7p9n33] .admin-table-container .admin-table-row {
        border-radius: var(--radius-lg) !important;
        margin-bottom: 0 !important;
        padding: var(--space-4) !important;
        background: var(--color-bg-primary) !important;
        border: 1px solid var(--color-border-primary) !important;
        box-shadow: var(--shadow-sm) !important;
        flex-direction: column !important;
    }

    [b-n4de7p9n33] .admin-table-row:not(:last-child) {
        box-shadow: var(--shadow-sm) !important;
    }

    [b-n4de7p9n33] .admin-table-row:hover {
        transform: none !important;
    }

    [b-n4de7p9n33] .admin-grid-cols-5 {
        min-width: 0 !important;
    }

    [b-n4de7p9n33] .admin-table-row-content,
    [b-n4de7p9n33] .admin-table-row-content.admin-auto-grid,
    [b-n4de7p9n33] .admin-table-row-content.admin-auto-grid.admin-grid-cols-5 {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-2) !important;
        padding: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    [b-n4de7p9n33] .admin-auto-grid .admin-table-cell,
    [b-n4de7p9n33] .admin-auto-grid .admin-table-cell-primary,
    [b-n4de7p9n33] .admin-auto-grid .admin-table-cell-secondary {
        display: grid !important;
        grid-template-columns: 90px 1fr;
        align-items: baseline;
        gap: var(--space-3);
        padding: var(--space-1) 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        font-size: 13px;
        width: 100% !important;
        min-width: 0 !important;
    }

    [b-n4de7p9n33] .admin-auto-grid .admin-table-cell-primary {
        font-size: 14px;
        font-weight: 600;
    }

    [b-n4de7p9n33] .admin-auto-grid .admin-table-cell::before,
    [b-n4de7p9n33] .admin-auto-grid .admin-table-cell-primary::before,
    [b-n4de7p9n33] .admin-auto-grid .admin-table-cell-secondary::before {
        content: attr(data-label) !important;
        font-size: 11px;
        font-weight: 700;
        color: var(--color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }

    /* Actions cell — full width with top separator */
    [b-n4de7p9n33] .admin-auto-grid .admin-table-cell.admin-grid-actions {
        grid-template-columns: 1fr;
        padding-top: var(--space-3) !important;
        margin-top: var(--space-1);
        border-top: 1px solid var(--color-border-primary);
    }

    [b-n4de7p9n33] .admin-auto-grid .admin-table-cell.admin-grid-actions::before {
        display: none !important;
    }

    /* Badges */
    [b-n4de7p9n33] .admin-badge {
        width: fit-content;
    }

    .disruption-message-text[b-n4de7p9n33] {
        -webkit-line-clamp: unset;
    }

    /* Pagination as own bordered card */
    .an-pagination[b-n4de7p9n33] {
        background: var(--color-bg-primary);
        border: 1px solid var(--color-border-primary);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        margin-top: var(--space-3);
        padding: var(--space-3) var(--space-4);
        border-top: none;
    }

    /* Form card keeps its bordered appearance */
    .disruption-form-card[b-n4de7p9n33] {
        border-radius: var(--radius-2xl) !important;
        overflow: hidden !important;
    }
}

@media (max-width: 767.98px) {
    .skeleton-row[b-n4de7p9n33] {
        grid-template-columns: 1fr;
    }

    .modal-actions[b-n4de7p9n33] {
        flex-direction: column;
    }

    .modal-actions[b-n4de7p9n33]  .admin-btn,
    .modal-actions[b-n4de7p9n33]  .admin-btn-danger {
        width: 100%;
        justify-content: center;
    }

    .form-grid--2col[b-n4de7p9n33] {
        grid-template-columns: 1fr;
    }

    .form-grid-span-2[b-n4de7p9n33] {
        grid-column: span 1;
    }

    .form-section[b-n4de7p9n33] {
        margin-bottom: var(--space-5);
        padding: var(--space-4);
    }

    .form-actions[b-n4de7p9n33] {
        flex-direction: column;
    }

    .form-actions[b-n4de7p9n33]  .app-button {
        width: 100%;
    }

    .an-page-numbers[b-n4de7p9n33] {
        display: none;
    }

    .an-pagination-controls[b-n4de7p9n33] {
        gap: var(--space-2);
    }

    .an-pagination[b-n4de7p9n33] {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-3);
    }

    .an-pagination-info[b-n4de7p9n33] {
        width: 100%;
        text-align: center;
        order: -1;
    }

    .an-page-size[b-n4de7p9n33] {
        order: 3;
    }
}

@media (max-width: 575.98px) {
    .an-pagination[b-n4de7p9n33] {
        padding: var(--space-3);
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */
@media print {
    .admin-table-card[b-n4de7p9n33] {
        border: 1px solid #ddd;
        box-shadow: none;
        animation: none;
    }

    .disruption-form-card[b-n4de7p9n33] {
        border: 1px solid #ddd;
        box-shadow: none;
        animation: none;
    }

    .form-section[b-n4de7p9n33] {
        border: 1px solid #ddd;
        box-shadow: none;
        animation: none;
    }

    [b-n4de7p9n33] .admin-table-row:hover {
        background: transparent;
    }

    .an-pagination[b-n4de7p9n33] {
        display: none !important;
    }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .admin-table-card[b-n4de7p9n33],
    .disruption-form-card[b-n4de7p9n33],
    .form-section[b-n4de7p9n33],
    .table-empty-state[b-n4de7p9n33],
    .empty-state[b-n4de7p9n33],
    .disruption-details[b-n4de7p9n33] {
        animation: none;
    }

    .skeleton-header[b-n4de7p9n33],
    .skeleton-cell[b-n4de7p9n33] {
        animation: none;
    }

    .form-section[b-n4de7p9n33],
    .section-number[b-n4de7p9n33],
    .multi-select-box[b-n4de7p9n33],
    .multi-select-toggle[b-n4de7p9n33],
    .multi-select-toggle svg[b-n4de7p9n33],
    .select-action-btn[b-n4de7p9n33],
    .alert-close[b-n4de7p9n33],
    .empty-state-icon[b-n4de7p9n33],
    .empty-icon[b-n4de7p9n33],
    [b-n4de7p9n33] .admin-table-row,
    [b-n4de7p9n33] .admin-input-simple,
    [b-n4de7p9n33] .admin-btn,
    [b-n4de7p9n33] .admin-btn-danger,
    .an-page-nav[b-n4de7p9n33],
    .an-page-num[b-n4de7p9n33],
    .an-page-size[b-n4de7p9n33] {
        transition: none;
    }
}
/* /Components/Pages/Admin/AdminFaq.razor.rz.scp.css */
/* ========================================
   ADMIN FAQ — 2026 Design System
   Scoped styles for /admin/faq
   Solid surfaces, bordered inputs, rise animation
   Matches AdminTrackingEmulator reference design
   ======================================== */

/* ----------------------------------------
   RISE ANIMATION (standard entrance)
   ---------------------------------------- */
@keyframes rise-b-yx6crku2ek {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shimmer-b-yx6crku2ek {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ----------------------------------------
   FILTER FIELDS
   ---------------------------------------- */
.fq-filter-field[b-yx6crku2ek] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.fq-filter-label[b-yx6crku2ek] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 16px;
    height: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0;
    display: block;
}

.fq-filter-input-wrap[b-yx6crku2ek] {
    position: relative;
    display: flex;
    align-items: center;
}

.fq-filter-input-icon[b-yx6crku2ek] {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    pointer-events: none;
    z-index: 1;
}

.fq-filter-input[b-yx6crku2ek] {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-4) 0 38px;
    font-size: 15px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    appearance: none;
    box-sizing: border-box;
}

.fq-filter-input:hover[b-yx6crku2ek] {
    border-color: var(--color-border-secondary);
}

.fq-filter-input:focus[b-yx6crku2ek] {
    outline: none;
    border: 1px solid var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.fq-filter-input[b-yx6crku2ek]::placeholder {
    color: var(--color-text-muted);
}

/* Select filter (no search icon padding) */
.fq-filter-select[b-yx6crku2ek] {
    padding: 0 36px 0 var(--space-4);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='%2364748B' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 16px;
    cursor: pointer;
}

/* ----------------------------------------
   TABLE CARD — Solid Surface
   ---------------------------------------- */
.fq-table-card[b-yx6crku2ek] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    animation: rise-b-yx6crku2ek .45s cubic-bezier(.4, 0, .2, 1) both;
    animation-delay: 0.06s;
    transition: box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
}

.fq-table-container[b-yx6crku2ek] {
    width: 100%;
}

/* Table Header */
.fq-table-head[b-yx6crku2ek] {
    display: grid;
    grid-template-columns:
        minmax(280px, 2.5fr)
        minmax(140px, 1.1fr)
        96px
        120px;
    gap: 0;
    padding: 0 var(--space-5);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-primary);
}

.fq-th[b-yx6crku2ek] {
    padding: var(--space-3);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.fq-th-left[b-yx6crku2ek] { text-align: left; }
.fq-th-right[b-yx6crku2ek] { text-align: right; }

/* Table Body */
.fq-table-body[b-yx6crku2ek] {
    /* Rows stack vertically */
}

/* Table Row */
.fq-row[b-yx6crku2ek] {
    display: grid;
    grid-template-columns:
        minmax(280px, 2.5fr)
        minmax(140px, 1.1fr)
        96px
        120px;
    gap: 0;
    padding: 0 var(--space-5);
    align-items: center;
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
    border-bottom: 1px solid var(--color-border-primary);
}

.fq-row:last-child[b-yx6crku2ek] {
    border-bottom: none;
}

.fq-row:hover[b-yx6crku2ek] {
    background: var(--color-bg-secondary);
}

.fq-row:focus-visible[b-yx6crku2ek] {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    border-radius: var(--radius-md);
}

/* Table Cells */
.fq-cell[b-yx6crku2ek] {
    padding: var(--space-4) var(--space-3);
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fq-cell-primary[b-yx6crku2ek] {
    padding: var(--space-4) var(--space-3);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    white-space: normal;
}

.fq-cell-left[b-yx6crku2ek] { text-align: left; }
.fq-cell-right[b-yx6crku2ek] { text-align: right; }

/* Question + preview */
.fq-question[b-yx6crku2ek] {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.fq-answer-preview[b-yx6crku2ek] {
    margin-top: 4px;
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Category badge */
.fq-category-badge[b-yx6crku2ek] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) 10px;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Order badge */
.fq-order-badge[b-yx6crku2ek] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: var(--space-1) 10px;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    font-family: var(--font-mono, 'SF Mono', 'Monaco', 'Consolas', monospace);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

/* Status badges */
.fq-status-badge[b-yx6crku2ek] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.fq-status-badge--success[b-yx6crku2ek] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.fq-status-badge--neutral[b-yx6crku2ek] {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

/* ----------------------------------------
   EMPTY STATE
   ---------------------------------------- */
.fq-empty[b-yx6crku2ek] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-6);
    text-align: center;
    animation: rise-b-yx6crku2ek .45s cubic-bezier(.4, 0, .2, 1) both;
}

.fq-empty-icon[b-yx6crku2ek] {
    width: 56px;
    height: 56px;
    margin-bottom: var(--space-4);
    color: var(--color-border-primary);
}

.fq-empty-icon svg[b-yx6crku2ek] {
    width: 100%;
    height: 100%;
}

.fq-empty-title[b-yx6crku2ek] {
    margin: 0 0 var(--space-2) 0;
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}

.fq-empty-text[b-yx6crku2ek] {
    margin: 0 0 var(--space-6) 0;
    font-size: 14px;
    color: var(--color-text-secondary);
    max-width: 360px;
}

/* ----------------------------------------
   SKELETON LOADING
   ---------------------------------------- */
.fq-skeleton[b-yx6crku2ek] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-bg-secondary) 50%, var(--color-bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-yx6crku2ek 1.5s infinite;
    border-radius: var(--radius-md);
}

.fq-skeleton-card[b-yx6crku2ek] {
    padding: 0;
    background: var(--color-bg-primary);
    overflow: hidden;
}

.fq-skeleton-head[b-yx6crku2ek] {
    display: grid;
    grid-template-columns: 2.5fr 1.1fr 96px 120px;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-primary);
}

.fq-skeleton-hcell[b-yx6crku2ek] {
    height: 12px;
    border-radius: var(--radius-sm);
}

.fq-skeleton-row[b-yx6crku2ek] {
    display: grid;
    grid-template-columns: 2.5fr 1.1fr 96px 120px;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border-primary);
}

.fq-skeleton-row:last-child[b-yx6crku2ek] {
    border-bottom: none;
}

.fq-skeleton-cell-lg[b-yx6crku2ek] {
    height: 36px;
    border-radius: var(--radius-sm);
}

.fq-skeleton-cell[b-yx6crku2ek] {
    height: 20px;
    border-radius: var(--radius-sm);
}

.fq-skeleton-cell-sm[b-yx6crku2ek] {
    height: 20px;
    width: 60%;
    border-radius: var(--radius-sm);
}

/* ----------------------------------------
   MODAL — Form Styles
   ---------------------------------------- */
.fq-modal-error[b-yx6crku2ek] {
    padding: var(--space-3) var(--space-4);
    margin: 0 var(--space-6) var(--space-4) var(--space-6);
    background: var(--color-error-light);
    border: 1px solid var(--color-error-bright, var(--color-error));
    border-radius: var(--radius-lg);
    color: var(--color-error);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
}

.fq-modal-scroll[b-yx6crku2ek] {
    padding: var(--space-5) var(--space-6);
    max-height: 65vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-secondary) transparent;
}

/* Section Title */
.fq-section-title[b-yx6crku2ek] {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4) 0;
    padding-bottom: var(--space-2);
}

.fq-section-title--spaced[b-yx6crku2ek] {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-primary);
}

/* Form Group */
.fq-form-group[b-yx6crku2ek] {
    margin-bottom: var(--space-4);
}

.fq-form-group:last-child[b-yx6crku2ek] {
    margin-bottom: 0;
}

/* Form Label — Fixed 16px height, 11px uppercase */
.fq-form-label[b-yx6crku2ek] {
    display: block;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 16px;
    height: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-2) 0;
}

/* Form Input — 48px height, bordered */
.fq-form-input[b-yx6crku2ek] {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-4);
    font-size: 15px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

.fq-form-input[b-yx6crku2ek]::placeholder {
    color: var(--color-text-muted);
}

.fq-form-input:hover[b-yx6crku2ek] {
    border-color: var(--color-border-secondary);
}

.fq-form-input:focus[b-yx6crku2ek] {
    outline: none;
    border: 1px solid var(--color-primary);
    background: var(--color-bg-primary);
    box-shadow: var(--shadow-focus);
}

/* Textarea override */
.fq-form-textarea[b-yx6crku2ek] {
    height: auto;
    padding: var(--space-3) var(--space-4);
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

/* Form Row (2-column) */
.fq-form-row[b-yx6crku2ek] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

/* ----------------------------------------
   TOGGLE SWITCH (Published)
   ---------------------------------------- */
.fq-toggle-row[b-yx6crku2ek] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    cursor: pointer;
}

.fq-toggle-info[b-yx6crku2ek] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fq-toggle-label[b-yx6crku2ek] {
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}

.fq-toggle-hint[b-yx6crku2ek] {
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
}

.fq-toggle-switch[b-yx6crku2ek] {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.fq-toggle-switch :deep(input)[b-yx6crku2ek] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.fq-toggle-slider[b-yx6crku2ek] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-text-light);
    border-radius: 26px;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

.fq-toggle-slider[b-yx6crku2ek]::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: var(--color-bg-primary);
    border-radius: 50%;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.fq-toggle-switch :deep(input:checked) + .fq-toggle-slider[b-yx6crku2ek] {
    background: var(--color-success);
}

.fq-toggle-switch :deep(input:checked) + .fq-toggle-slider[b-yx6crku2ek]::before {
    transform: translateX(22px);
}

.fq-toggle-switch :deep(input:focus-visible) + .fq-toggle-slider[b-yx6crku2ek] {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

/* ----------------------------------------
   MODAL FOOTER
   ---------------------------------------- */
.fq-modal-footer[b-yx6crku2ek] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.fq-modal-footer-left[b-yx6crku2ek] {
    display: flex;
    gap: var(--space-2);
}

.fq-modal-footer-right[b-yx6crku2ek] {
    display: flex;
    gap: var(--space-2);
    margin-left: auto;
}

/* Modal Buttons */
.fq-btn[b-yx6crku2ek] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 40px;
    padding: 0 var(--space-5);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

.fq-btn:disabled[b-yx6crku2ek] {
    opacity: 0.5;
    cursor: not-allowed;
}

.fq-btn--primary[b-yx6crku2ek] {
    background: var(--color-primary);
    color: white;
}

.fq-btn--primary:hover:not(:disabled)[b-yx6crku2ek] {
    background: var(--color-primary-hover, var(--color-primary));
    box-shadow: var(--shadow-sm);
}

.fq-btn--outline[b-yx6crku2ek] {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-primary);
}

.fq-btn--outline:hover:not(:disabled)[b-yx6crku2ek] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
}

.fq-btn--danger[b-yx6crku2ek] {
    background: var(--color-error-light);
    color: var(--color-error);
    border: 1px solid transparent;
}

.fq-btn--danger:hover:not(:disabled)[b-yx6crku2ek] {
    background: var(--color-error);
    color: white;
}

/* ----------------------------------------
   RESPONSIVE — Mobile Table Card Layout
   ---------------------------------------- */
@media (max-width: 991.98px) {
    /* Table card becomes transparent, rows are cards */
    .fq-table-card[b-yx6crku2ek] {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    /* Hide header row */
    .fq-table-head[b-yx6crku2ek] {
        display: none !important;
    }

    /* Table body gaps */
    .fq-table-body[b-yx6crku2ek] {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    /* Rows become stacked cards */
    .fq-row[b-yx6crku2ek] {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-4) !important;
        background: var(--color-bg-primary);
        border: 1px solid var(--color-border-primary);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
    }

    .fq-row:last-child[b-yx6crku2ek] {
        border-bottom: 1px solid var(--color-border-primary);
    }

    .fq-row:hover[b-yx6crku2ek] {
        transform: none;
    }

    /* Each cell: label | value */
    .fq-cell[b-yx6crku2ek],
    .fq-cell-primary[b-yx6crku2ek] {
        display: grid !important;
        grid-template-columns: 85px 1fr;
        align-items: baseline;
        gap: var(--space-2);
        padding: 2px 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        font-size: 13px;
        width: 100% !important;
        text-align: left !important;
    }

    .fq-cell-primary[b-yx6crku2ek] {
        font-size: 14px;
        font-weight: 500;
    }

    /* data-label pseudo-elements */
    .fq-cell[b-yx6crku2ek]::before,
    .fq-cell-primary[b-yx6crku2ek]::before {
        content: attr(data-label) !important;
        font-size: 11px;
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-muted);
        text-transform: none;
        letter-spacing: -0.01em;
        white-space: nowrap;
    }
}

/* ----------------------------------------
   RESPONSIVE — Tablet
   ---------------------------------------- */
@media (max-width: 1023.98px) {
    .fq-filter-field[b-yx6crku2ek] {
        min-width: 150px;
    }

    .fq-form-row[b-yx6crku2ek] {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------
   RESPONSIVE — Mobile
   ---------------------------------------- */
@media (max-width: 767.98px) {
    .fq-filter-field[b-yx6crku2ek] {
        min-width: 100%;
    }

    .fq-modal-scroll[b-yx6crku2ek] {
        padding: var(--space-4);
    }

    .fq-modal-error[b-yx6crku2ek] {
        margin: 0 var(--space-4) var(--space-4) var(--space-4);
    }

    .fq-form-row[b-yx6crku2ek] {
        grid-template-columns: 1fr;
    }

    .fq-empty[b-yx6crku2ek] {
        padding: var(--space-8) var(--space-4);
    }

    .fq-empty-icon[b-yx6crku2ek] {
        width: 48px;
        height: 48px;
    }

    /* Skeleton hidden on mobile */
    .fq-skeleton-head[b-yx6crku2ek],
    .fq-skeleton-row[b-yx6crku2ek] {
        display: none;
    }
}

/* ----------------------------------------
   RESPONSIVE — Small mobile
   ---------------------------------------- */
@media (max-width: 575.98px) {
    .fq-modal-footer[b-yx6crku2ek] {
        flex-direction: column;
        align-items: stretch;
    }

    .fq-modal-footer-left[b-yx6crku2ek],
    .fq-modal-footer-right[b-yx6crku2ek] {
        width: 100%;
    }

    .fq-modal-footer-left .fq-btn[b-yx6crku2ek],
    .fq-modal-footer-right .fq-btn[b-yx6crku2ek] {
        flex: 1;
    }

    .fq-row[b-yx6crku2ek] {
        border-radius: var(--radius-lg) !important;
    }
}

/* ----------------------------------------
   FOCUS STATES & ACCESSIBILITY
   ---------------------------------------- */
.fq-btn:focus-visible[b-yx6crku2ek] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ----------------------------------------
   REDUCED MOTION
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .fq-table-card[b-yx6crku2ek],
    .fq-empty[b-yx6crku2ek],
    .fq-skeleton[b-yx6crku2ek] {
        animation: none;
    }

    .fq-row[b-yx6crku2ek],
    .fq-btn[b-yx6crku2ek],
    .fq-filter-input[b-yx6crku2ek],
    .fq-form-input[b-yx6crku2ek],
    .fq-toggle-slider[b-yx6crku2ek],
    .fq-toggle-slider[b-yx6crku2ek]::before {
        transition: none;
    }
}

/* ----------------------------------------
   PRINT
   ---------------------------------------- */
@media print {
    .fq-empty[b-yx6crku2ek],
    .fq-skeleton-card[b-yx6crku2ek] {
        display: none;
    }

    .fq-table-card[b-yx6crku2ek] {
        border: 1px solid #000;
        box-shadow: none;
    }

    .fq-row[b-yx6crku2ek] {
        break-inside: avoid;
    }
}
/* /Components/Pages/Admin/AdminInvoiceConfig.razor.rz.scp.css */
/* ========================================
   ADMIN INVOICE CONFIG — 2026 Design System
   Matches AdminTrackingEmulator card style:
   Icon circles, title+subtitle headers, 48px inputs,
   card hover elevation, staggered rise animation
   ======================================== */

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes rise-b-9qthl9sy2c {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-shimmer-b-9qthl9sy2c {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   ALERTS
   ========================================================================== */
.admin-container[b-9qthl9sy2c] >  .app-alert {
    margin-bottom: var(--space-5);
}

/* ==========================================================================
   HEADER SAVE BUTTON
   ========================================================================== */
[b-9qthl9sy2c] .ic-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-width: 140px;
}

[b-9qthl9sy2c] .ic-save-btn .loading-spinner-container {
    display: inline-flex;
    margin-right: var(--space-1);
}

.ic-save-label[b-9qthl9sy2c] {
    display: inline;
    font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   SKELETON LOADING STATE — Matches card header icon + text pattern
   ========================================================================== */
.ic-skeleton-card[b-9qthl9sy2c] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.ic-skeleton-header[b-9qthl9sy2c] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) 0 var(--space-6);
}

.ic-skeleton-header-text[b-9qthl9sy2c] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ic-skeleton-icon[b-9qthl9sy2c] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.ic-skeleton-title[b-9qthl9sy2c] {
    height: 22px;
    width: 60%;
    border-radius: var(--radius-sm);
}

.ic-skeleton-subtitle[b-9qthl9sy2c] {
    height: 16px;
    width: 80%;
    border-radius: var(--radius-sm);
}

.ic-skeleton-body[b-9qthl9sy2c] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    padding: var(--space-6);
}

.ic-skeleton[b-9qthl9sy2c] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 37%, var(--color-bg-tertiary) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer-b-9qthl9sy2c 1.8s ease infinite;
    border-radius: var(--radius-sm);
}

.ic-skeleton-field[b-9qthl9sy2c] {
    height: 64px;
    border-radius: var(--radius-md);
}

/* ==========================================================================
   GRID LAYOUT — Two columns on desktop
   ========================================================================== */
.ic-grid[b-9qthl9sy2c] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: start;
}

.ic-column[b-9qthl9sy2c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ==========================================================================
   CARD — Solid surface with hover elevation (tracking emulator style)
   ========================================================================== */
.ic-card[b-9qthl9sy2c] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: visible;
    box-shadow: var(--shadow-sm);
    position: relative;
    animation: rise-b-9qthl9sy2c .45s cubic-bezier(.4, 0, .2, 1) both;
    transition: box-shadow 200ms cubic-bezier(.4, 0, .2, 1), transform 200ms cubic-bezier(.4, 0, .2, 1);
}

/* Staggered animation delays */
.ic-column:first-child .ic-card:nth-child(1)[b-9qthl9sy2c] { animation-delay: 0s; }
.ic-column:first-child .ic-card:nth-child(2)[b-9qthl9sy2c] { animation-delay: 0.06s; }
.ic-column:last-child .ic-card:nth-child(1)[b-9qthl9sy2c] { animation-delay: 0.12s; }
.ic-column:last-child .ic-card:nth-child(2)[b-9qthl9sy2c] { animation-delay: 0.18s; }

.ic-card:hover[b-9qthl9sy2c] {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* ==========================================================================
   CARD HEADER — Icon circle + title + subtitle
   ========================================================================== */
.ic-card-header[b-9qthl9sy2c] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) 0 var(--space-6);
}

.ic-card-icon[b-9qthl9sy2c] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.ic-card-header-text[b-9qthl9sy2c] {
    flex: 1;
    min-width: 0;
}

.ic-card-title[b-9qthl9sy2c] {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1) 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.ic-card-subtitle[b-9qthl9sy2c] {
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* ==========================================================================
   CARD BODY
   ========================================================================== */
.ic-card-body[b-9qthl9sy2c] {
    padding: var(--space-6);
}

/* ==========================================================================
   FORM GRID — 2 columns of fields inside each card
   ========================================================================== */
.ic-form-grid[b-9qthl9sy2c] {
    display: grid;
    gap: var(--space-4);
}

.ic-form-grid-2[b-9qthl9sy2c] {
    grid-template-columns: repeat(2, 1fr);
}

.ic-field[b-9qthl9sy2c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ic-field-full[b-9qthl9sy2c] {
    grid-column: 1 / -1;
}

.ic-field-toggle-align[b-9qthl9sy2c] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* ==========================================================================
   FIELD LABELS — 11px uppercase semibold, fixed 16px height
   ========================================================================== */
.ic-field-label[b-9qthl9sy2c] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 16px;
    height: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0;
    display: block;
}

/* ==========================================================================
   INPUT FIELDS — 48px height, 15px font (tracking emulator style)
   ========================================================================== */
[b-9qthl9sy2c] .ic-field-input,
.ic-field-input[b-9qthl9sy2c] {
    height: 48px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    padding: 0 var(--space-4);
    font-size: 15px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    font-family: var(--font-family-base);
    width: 100%;
    box-sizing: border-box;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

[b-9qthl9sy2c] .ic-field-input::placeholder,
.ic-field-input[b-9qthl9sy2c]::placeholder {
    color: var(--color-text-muted);
}

[b-9qthl9sy2c] .ic-field-input:hover,
.ic-field-input:hover[b-9qthl9sy2c] {
    border-color: var(--color-border-secondary);
}

[b-9qthl9sy2c] .ic-field-input:focus,
.ic-field-input:focus[b-9qthl9sy2c] {
    outline: none;
    border: 1px solid var(--color-primary);
    background: var(--color-bg-primary);
    box-shadow: var(--shadow-focus);
}

/* Input with unit suffix (e.g., %) */
.ic-input-with-unit[b-9qthl9sy2c] {
    position: relative;
    display: flex;
    align-items: center;
}

.ic-input-with-unit .ic-field-input[b-9qthl9sy2c],
.ic-input-with-unit[b-9qthl9sy2c]  .ic-field-input {
    padding-right: 50px;
}

.ic-input-unit[b-9qthl9sy2c] {
    position: absolute;
    right: var(--space-4);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    pointer-events: none;
}

/* ==========================================================================
   TEXTAREA
   ========================================================================== */
[b-9qthl9sy2c] .ic-textarea,
.ic-textarea[b-9qthl9sy2c] {
    width: 100%;
    min-height: 120px;
    padding: var(--space-4);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    font-family: var(--font-family-base);
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    box-sizing: border-box;
    resize: vertical;
    line-height: 1.6;
}

[b-9qthl9sy2c] .ic-textarea:hover,
.ic-textarea:hover[b-9qthl9sy2c] {
    border-color: var(--color-border-secondary);
}

[b-9qthl9sy2c] .ic-textarea:focus,
.ic-textarea:focus[b-9qthl9sy2c] {
    outline: none;
    border: 1px solid var(--color-primary);
    box-shadow: var(--shadow-focus);
}

[b-9qthl9sy2c] .ic-textarea::placeholder,
.ic-textarea[b-9qthl9sy2c]::placeholder {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-normal);
}

/* ==========================================================================
   TOGGLE SWITCH — 48x26px, success-colored checked (tracking emulator style)
   ========================================================================== */
.ic-toggle-switch[b-9qthl9sy2c] {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.ic-toggle-switch input[b-9qthl9sy2c] {
    opacity: 0;
    width: 0;
    height: 0;
}

.ic-toggle-slider[b-9qthl9sy2c] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-text-light);
    border-radius: 26px;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

.ic-toggle-slider[b-9qthl9sy2c]::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: var(--color-bg-primary);
    border-radius: 50%;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.ic-toggle-switch input:checked + .ic-toggle-slider[b-9qthl9sy2c] {
    background: var(--color-success);
}

.ic-toggle-switch input:checked + .ic-toggle-slider[b-9qthl9sy2c]::before {
    transform: translateX(22px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.ic-toggle-switch input:focus + .ic-toggle-slider[b-9qthl9sy2c] {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.ic-toggle-switch-lg[b-9qthl9sy2c] {
    width: 52px;
    height: 28px;
}

.ic-toggle-switch-lg .ic-toggle-slider[b-9qthl9sy2c] {
    border-radius: 28px;
}

.ic-toggle-switch-lg .ic-toggle-slider[b-9qthl9sy2c]::before {
    width: 22px;
    height: 22px;
}

.ic-toggle-switch-lg input:checked + .ic-toggle-slider[b-9qthl9sy2c]::before {
    transform: translateX(24px);
}

/* Toggle label row (inline toggle + text) */
.ic-toggle-label[b-9qthl9sy2c] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    user-select: none;
    height: 48px;
}

.ic-toggle-text[b-9qthl9sy2c] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

/* ==========================================================================
   FISCALIZATION CALLOUT — Bordered callout with icon + toggle
   ========================================================================== */
.ic-fiscal-callout[b-9qthl9sy2c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.ic-fiscal-callout:hover[b-9qthl9sy2c] {
    border-color: var(--color-border-secondary);
}

.ic-fiscal-info[b-9qthl9sy2c] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
}

.ic-fiscal-icon-wrap[b-9qthl9sy2c] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--color-primary-light);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ic-fiscal-text[b-9qthl9sy2c] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ic-fiscal-title[b-9qthl9sy2c] {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.3;
}

.ic-fiscal-desc[b-9qthl9sy2c] {
    font-size: 12px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* ==========================================================================
   MOBILE SAVE ACTION
   ========================================================================== */
.ic-mobile-save[b-9qthl9sy2c] {
    display: none;
    margin-top: var(--space-6);
}

[b-9qthl9sy2c] .ic-mobile-save-btn {
    width: 100%;
    height: 48px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

/* ==========================================================================
   RESPONSIVE — Tablet (1023.98px)
   ========================================================================== */
@media (max-width: 1023.98px) {
    .ic-grid[b-9qthl9sy2c] {
        grid-template-columns: 1fr;
    }

    .ic-save-label[b-9qthl9sy2c] {
        display: none;
    }

    [b-9qthl9sy2c] .ic-save-btn {
        min-width: 44px;
    }
}

/* ==========================================================================
   RESPONSIVE — Mobile (767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {
    .ic-form-grid-2[b-9qthl9sy2c] {
        grid-template-columns: 1fr;
    }

    .ic-card[b-9qthl9sy2c] {
        border-radius: var(--radius-xl);
    }

    .ic-card-header[b-9qthl9sy2c] {
        padding: var(--space-5) var(--space-5) 0 var(--space-5);
    }

    .ic-card-body[b-9qthl9sy2c] {
        padding: var(--space-5);
    }

    .ic-card-icon[b-9qthl9sy2c] {
        width: 40px;
        height: 40px;
    }

    .ic-card-title[b-9qthl9sy2c] {
        font-size: 16px;
    }

    .ic-fiscal-callout[b-9qthl9sy2c] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .ic-toggle-switch-lg[b-9qthl9sy2c] {
        align-self: flex-end;
    }

    /* Show mobile save, hide header save */
    .ic-mobile-save[b-9qthl9sy2c] {
        display: block;
    }

    [b-9qthl9sy2c] .ic-save-btn {
        display: none !important;
    }

    .ic-skeleton-body[b-9qthl9sy2c] {
        grid-template-columns: 1fr;
    }

    .ic-skeleton-header[b-9qthl9sy2c] {
        padding: var(--space-5) var(--space-5) 0 var(--space-5);
    }

    .ic-skeleton-body[b-9qthl9sy2c] {
        padding: var(--space-5);
    }
}

/* ==========================================================================
   RESPONSIVE — Small Mobile (479.98px)
   ========================================================================== */
@media (max-width: 479.98px) {
    .ic-grid[b-9qthl9sy2c] {
        gap: var(--space-5);
    }

    .ic-column[b-9qthl9sy2c] {
        gap: var(--space-5);
    }

    .ic-card[b-9qthl9sy2c] {
        border-radius: var(--radius-lg);
    }

    .ic-card-header[b-9qthl9sy2c] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-4) 0 var(--space-4);
    }

    .ic-card-body[b-9qthl9sy2c] {
        padding: var(--space-4);
    }

    .ic-card-icon[b-9qthl9sy2c] {
        width: 38px;
        height: 38px;
        border-radius: var(--radius-md);
    }

    .ic-card-title[b-9qthl9sy2c] {
        font-size: 15px;
    }

    .ic-fiscal-callout[b-9qthl9sy2c] {
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-md);
    }

    .ic-fiscal-icon-wrap[b-9qthl9sy2c] {
        width: 32px;
        height: 32px;
    }
}

/* ==========================================================================
   FOCUS & ACCESSIBILITY
   ========================================================================== */
[b-9qthl9sy2c] .ic-field-input:focus-visible,
.ic-field-input:focus-visible[b-9qthl9sy2c] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

[b-9qthl9sy2c] .ic-textarea:focus-visible,
.ic-textarea:focus-visible[b-9qthl9sy2c] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .ic-card[b-9qthl9sy2c] {
        animation: none;
    }

    .ic-skeleton[b-9qthl9sy2c] {
        animation: none;
    }

    .ic-card[b-9qthl9sy2c],
    [b-9qthl9sy2c] .ic-field-input,
    .ic-field-input[b-9qthl9sy2c],
    [b-9qthl9sy2c] .ic-textarea,
    .ic-textarea[b-9qthl9sy2c],
    .ic-toggle-slider[b-9qthl9sy2c],
    .ic-toggle-slider[b-9qthl9sy2c]::before,
    .ic-fiscal-callout[b-9qthl9sy2c] {
        transition: none;
    }

    .ic-card:hover[b-9qthl9sy2c] {
        transform: none;
    }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .ic-mobile-save[b-9qthl9sy2c],
    [b-9qthl9sy2c] .ic-save-btn {
        display: none !important;
    }

    .ic-card[b-9qthl9sy2c] {
        break-inside: avoid;
        box-shadow: none;
        background: var(--color-bg-primary);
        border: 1px solid #ddd;
    }
}
/* /Components/Pages/Admin/AdminInvoices.razor.rz.scp.css */
/* ========================================
   AdminInvoices — 2026 Design System
   Solid surfaces · Design tokens · rise animation
   ======================================== */

/* ----------------------------------------
   RISE ANIMATION
   ---------------------------------------- */
@keyframes rise-b-faz2emydug {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------
   PAGE LAYOUT
   ---------------------------------------- */
.invoices-page[b-faz2emydug] {
    position: relative;
}

/* UI KIT INTEGRATION - PageHeader Actions */
.header-action-link[b-faz2emydug] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1);
}

.header-action-link:hover[b-faz2emydug] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
    text-decoration: none;
}

.header-action-link svg[b-faz2emydug] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.65;
}

.btn-text-desktop[b-faz2emydug] {
    display: inline;
}

/* UI KIT INTEGRATION - AppAlert */
.admin-container[b-faz2emydug] >  .app-alert {
    margin-bottom: var(--space-5);
}

.alert-content-with-action[b-faz2emydug] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
}

[b-faz2emydug] .error-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--radius-sm);
    white-space: nowrap;
}

[b-faz2emydug] .error-retry-btn .loading-spinner-container {
    display: inline-flex;
}

/* Ensure dropdown menus are visible outside containers */
[b-faz2emydug] .admin-search-card {
    overflow: visible;
}

/* ----------------------------------------
   FILTER FIELD LAYOUT
   ---------------------------------------- */
.filter-field[b-faz2emydug] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.filter-field-label[b-faz2emydug] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: -0.01em;
    line-height: 1.35;
    min-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Filter input wrapper with icon */
.filter-input-wrapper[b-faz2emydug] {
    position: relative;
    width: 100%;
    height: 44px;
}

.filter-input-icon[b-faz2emydug] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--color-text-muted);
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
}

[b-faz2emydug] .filter-input,
.filter-input[b-faz2emydug] {
    width: 100%;
    height: 44px !important;
    padding: 0 14px 0 36px;
    background: var(--color-bg-primary) !important;
    border: 1px solid var(--color-border-primary) !important;
    border-radius: var(--radius-md) !important;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1), box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
    box-sizing: border-box;
}

/* Override global Inputs.css 52px for ALL input types in filter fields */
.filter-input-wrapper input[b-faz2emydug],
.filter-input-wrapper[b-faz2emydug]  input,
.filter-field input[b-faz2emydug],
.filter-field[b-faz2emydug]  input,
.filter-field input[type="date"][b-faz2emydug],
.filter-field[b-faz2emydug]  input[type="date"],
.filter-field input[type="number"][b-faz2emydug],
.filter-field[b-faz2emydug]  input[type="number"],
.filter-field input[type="text"][b-faz2emydug],
.filter-field[b-faz2emydug]  input[type="text"] {
    height: 44px !important;
    box-sizing: border-box;
}

[b-faz2emydug] .filter-input:hover,
.filter-input:hover[b-faz2emydug] {
}

[b-faz2emydug] .filter-input:focus,
.filter-input:focus[b-faz2emydug] {
    outline: none;
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-focus);
    background: var(--color-bg-primary) !important;
}

[b-faz2emydug] .filter-input::placeholder,
.filter-input[b-faz2emydug]::placeholder {
    color: var(--color-text-muted);
    font-weight: 400;
}

/* Date input specific adjustments */
[b-faz2emydug] .filter-input-date {
    padding-right: 14px;
}

/* ----------------------------------------
   SPINNERS
   ---------------------------------------- */
.btn-spinner-small[b-faz2emydug] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(26, 124, 202, 0.3);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-faz2emydug 0.8s linear infinite;
}

@keyframes spin-b-faz2emydug {
    to { transform: rotate(360deg); }
}

/* ========================================
   Modern Dropdown Combobox
   ======================================== */

.modern-dropdown[b-faz2emydug] {
    position: relative;
    width: 100%;
    height: 44px;
    flex-shrink: 0;
    outline: none;
    background: transparent !important;
    background-color: transparent !important;
}

.dropdown-trigger[b-faz2emydug] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    height: 44px;
    padding: 0 14px;
    background: var(--color-bg-primary) !important;
    background-color: var(--color-bg-primary) !important;
    border: 1px solid var(--color-border-primary) !important;
    border-radius: var(--radius-md) !important;
    cursor: pointer;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1), box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
    box-shadow: none;
}

.dropdown-trigger:hover[b-faz2emydug] {
    background: var(--color-bg-primary) !important;
    background-color: var(--color-bg-primary) !important;
    box-shadow: none;
}

.modern-dropdown.open .dropdown-trigger[b-faz2emydug] {
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-focus);
    background: var(--color-bg-primary) !important;
    background-color: var(--color-bg-primary) !important;
}

.dropdown-selected[b-faz2emydug] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.dropdown-value[b-faz2emydug] {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-placeholder[b-faz2emydug] {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-muted);
}

.dropdown-arrow[b-faz2emydug] {
    width: 14px;
    height: 14px;
    color: var(--color-text-muted);
    flex-shrink: 0;
    transition: transform 200ms cubic-bezier(.4, 0, .2, 1);
}

.dropdown-arrow.rotated[b-faz2emydug] {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.dropdown-menu[b-faz2emydug] {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    width: 100%;
    min-width: 180px;
    max-height: 320px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    z-index: 1001;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: dropdownSlideIn-b-faz2emydug 160ms cubic-bezier(.4, 0, .2, 1);
}

@keyframes dropdownSlideIn-b-faz2emydug {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown Options */
.dropdown-options[b-faz2emydug] {
    overflow-y: auto;
    max-height: 260px;
    padding: var(--space-2);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-secondary) transparent;
}

.dropdown-options[b-faz2emydug]::-webkit-scrollbar {
    width: 6px;
}

.dropdown-options[b-faz2emydug]::-webkit-scrollbar-track {
    background: transparent;
}

.dropdown-options[b-faz2emydug]::-webkit-scrollbar-thumb {
    background: var(--color-border-secondary);
    border-radius: 3px;
}

.dropdown-option[b-faz2emydug] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 10px var(--space-3);
    border-radius: 10px;
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.dropdown-option:hover[b-faz2emydug] {
    background: var(--color-bg-secondary);
}

.dropdown-option.selected[b-faz2emydug] {
    background: var(--color-info-light, rgba(26, 124, 202, 0.08));
    color: var(--color-text-primary);
}

.dropdown-option.selected:hover[b-faz2emydug] {
    background: var(--color-info-light, rgba(26, 124, 202, 0.10));
}

.dropdown-option-content[b-faz2emydug] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.check-icon[b-faz2emydug] {
    color: var(--color-primary);
    flex-shrink: 0;
}

/* Status indicators for dropdown */
.status-indicator[b-faz2emydug] {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: 50%;
    flex-shrink: 0;
}

.status-indicator-success[b-faz2emydug] {
    background: var(--color-emerald);
}

.status-indicator-warning[b-faz2emydug] {
    background: var(--color-amber);
}

.status-indicator-error[b-faz2emydug] {
    background: var(--color-error-bright);
}

.status-indicator-neutral[b-faz2emydug] {
    background: var(--color-text-muted);
}

.method-icon[b-faz2emydug] {
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

/* ----------------------------------------
   TABLE CARD WRAPPER
   ---------------------------------------- */
.admin-table-card[b-faz2emydug] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    animation: rise-b-faz2emydug 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

.admin-table-card:hover[b-faz2emydug] {
    box-shadow: var(--shadow-sm);
}

.invoices-table-card .admin-table-container[b-faz2emydug] {
    overflow-x: auto;
    width: 100%;
    margin-top: 0;
}

/* Ensure table content has minimum width for horizontal scroll */
.invoices-table-card .invoices-table-header[b-faz2emydug],
.invoices-table-card .invoices-row-content[b-faz2emydug] {
    min-width: 950px;
}

.invoices-table-card .admin-table-rows[b-faz2emydug] {
    width: 100%;
}

/* Remove borders from individual rows */
[b-faz2emydug] .admin-table-row {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
}

/* Hover effect */
[b-faz2emydug] .admin-table-row:hover {
    background: var(--color-bg-secondary);
    box-shadow: none;
    border-color: transparent;
}

/* Cancelled row dimming */
[b-faz2emydug] .admin-table-row.row-cancelled {
    opacity: 0.6;
}

/* Table rows container */
[b-faz2emydug] .admin-table-rows {
    gap: 0;
}

/* Header styling */
[b-faz2emydug] .admin-table-header {
    background: var(--color-bg-secondary);
    margin-bottom: 0;
    padding: var(--space-4) 0;
}

/* Table container */
[b-faz2emydug] .admin-table-container {
    margin-top: 0;
}

/* ----------------------------------------
   INVOICES GRID LAYOUT (7 columns)
   ---------------------------------------- */
.invoices-table-header[b-faz2emydug] {
    display: grid;
    grid-template-columns: 140px 1fr 130px 120px 120px 120px 1fr;
    gap: 0;
    align-items: center;
    width: 100%;
}

.invoices-table-header .admin-table-header-cell[b-faz2emydug] {
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    padding: 0 var(--space-2);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

/* First cell padding */
.invoices-table-header .col-invoice[b-faz2emydug] { padding-left: var(--space-5); }
.invoices-table-header .col-amount[b-faz2emydug] { text-align: right; }

/* Table row */
.invoices-table-row[b-faz2emydug] {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    display: block;
    padding: 0;
}

.invoices-table-row:hover[b-faz2emydug] {
    background: var(--color-bg-secondary);
}

.invoices-table-row.row-cancelled[b-faz2emydug] {
    opacity: 0.6;
}

.invoices-row-content[b-faz2emydug] {
    display: grid;
    grid-template-columns: 140px 1fr 130px 120px 120px 120px 1fr;
    gap: 0;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

/* Cell Styles */
.invoices-row-content .admin-table-cell[b-faz2emydug] {
    padding: 14px var(--space-2);
    overflow: hidden;
}

/* First cell padding */
.invoices-row-content .col-invoice[b-faz2emydug] { padding-left: var(--space-5); }

/* Column alignment */
.col-amount[b-faz2emydug] {
    text-align: right;
}

.invoices-row-content .col-amount[b-faz2emydug] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

[b-faz2emydug] .invoices-table-row {
    cursor: pointer;
}

/* ----------------------------------------
   SKELETON LOADING STATE
   ---------------------------------------- */
.table-loading-state[b-faz2emydug] {
    position: relative;
    min-height: 400px;
}

.skeleton-table[b-faz2emydug] {
    padding: var(--space-4);
}

.skeleton-header[b-faz2emydug] {
    display: grid;
    grid-template-columns: 140px 1fr 130px 120px 120px 120px 1fr;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-secondary);
    border-radius: 10px;
    margin-bottom: var(--space-3);
}

.skeleton-header-cell[b-faz2emydug] {
    height: 14px;
    background: var(--color-bg-tertiary);
    background-size: 200% 100%;
    animation: shimmer-b-faz2emydug 1.5s infinite;
    border-radius: var(--radius-sm);
}

.skeleton-row[b-faz2emydug] {
    display: grid;
    grid-template-columns: 140px 1fr 130px 120px 120px 120px 1fr;
    gap: var(--space-4);
    padding: var(--space-5);
}

.skeleton-cell[b-faz2emydug] {
    height: 20px;
    background: var(--color-bg-tertiary);
    background-size: 200% 100%;
    animation: shimmer-b-faz2emydug 1.5s infinite;
    border-radius: var(--radius-sm);
}

.skeleton-cell-invoice[b-faz2emydug] { width: 80%; }
.skeleton-cell-user[b-faz2emydug] { width: 90%; }
.skeleton-cell-badge[b-faz2emydug] { width: 80px; height: 28px; border-radius: 100px; }
.skeleton-cell-amount[b-faz2emydug] { width: 70px; margin-left: auto; }
.skeleton-cell-date[b-faz2emydug] { width: 90px; }
.skeleton-cell-refs[b-faz2emydug] { width: 60%; }

@keyframes shimmer-b-faz2emydug {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.loading-overlay[b-faz2emydug] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    background: rgba(255, 255, 255, 0.85);
    color: var(--color-text-secondary);
}

.loading-overlay[b-faz2emydug]  .loading-spinner-container {
    flex-direction: column;
    gap: var(--space-4);
}

/* ----------------------------------------
   EMPTY STATE
   ---------------------------------------- */
.table-empty-state[b-faz2emydug] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-8);
    text-align: center;
}

.empty-illustration[b-faz2emydug] {
    width: 120px;
    height: 120px;
    margin-bottom: var(--space-6);
}

.empty-illustration svg[b-faz2emydug] {
    width: 100%;
    height: 100%;
}

.empty-title[b-faz2emydug] {
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
}

.empty-text[b-faz2emydug] {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-2) 0;
}

.empty-hint[b-faz2emydug] {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0;
}

/* ----------------------------------------
   INVOICE NUMBER CELL
   ---------------------------------------- */
.invoice-number-cell[b-faz2emydug] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.invoice-number-group[b-faz2emydug] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.invoice-number[b-faz2emydug] {
    font-weight: var(--font-weight-semibold);
    font-size: 14px;
    color: var(--color-text-primary);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace;
}

.copy-btn[b-faz2emydug] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-6);
    height: var(--space-6);
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    opacity: 0;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

.invoice-number-cell:hover .copy-btn[b-faz2emydug],
.admin-table-row:hover .copy-btn[b-faz2emydug] {
    opacity: 1;
}

.copy-btn:hover[b-faz2emydug] {
    background: var(--color-bg-secondary);
    color: var(--color-primary);
}

.copy-btn svg[b-faz2emydug] {
    flex-shrink: 0;
}

.invoice-id[b-faz2emydug] {
    font-size: 11px;
    color: var(--color-text-muted);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace;
}

/* ----------------------------------------
   USER CELL
   ---------------------------------------- */
.user-cell[b-faz2emydug] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar[b-faz2emydug] {
    width: var(--space-8);
    height: var(--space-8);
    border-radius: 10px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.user-info[b-faz2emydug] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.user-id[b-faz2emydug] {
    font-weight: var(--font-weight-semibold);
    font-size: 13px;
    color: var(--color-text-primary);
}

.user-email[b-faz2emydug] {
    font-size: 12px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

/* ----------------------------------------
   STATUS BADGES
   ---------------------------------------- */
.status-badge[b-faz2emydug] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px var(--space-3);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    text-transform: capitalize;
    white-space: nowrap;
}

.status-dot[b-faz2emydug] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-badge-success[b-faz2emydug] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.status-badge-success .status-dot[b-faz2emydug] {
    background: var(--color-emerald);
}

.status-badge-warning[b-faz2emydug] {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.status-badge-warning .status-dot[b-faz2emydug] {
    background: var(--color-amber);
}

.status-badge-error[b-faz2emydug] {
    background: var(--color-error-light);
    color: var(--color-error);
}

.status-badge-error .status-dot[b-faz2emydug] {
    background: var(--color-error-bright);
}

.status-badge-neutral[b-faz2emydug] {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

.status-badge-neutral .status-dot[b-faz2emydug] {
    background: var(--color-text-muted);
}

/* ----------------------------------------
   PAYMENT METHOD BADGE
   ---------------------------------------- */
.payment-method-badge[b-faz2emydug] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.method-badge-card[b-faz2emydug] {
    background: var(--color-info-light, rgba(26, 124, 202, 0.08));
    color: var(--color-info);
}

.method-badge-wallet[b-faz2emydug] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.method-badge-other[b-faz2emydug] {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

/* ----------------------------------------
   AMOUNT VALUE - Right aligned
   ---------------------------------------- */
.amount-value[b-faz2emydug] {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--space-1);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace;
}

.amount-number[b-faz2emydug] {
    font-weight: var(--font-weight-semibold);
    font-size: 14px;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.currency[b-faz2emydug] {
    font-weight: var(--font-weight-medium);
    font-size: 11px;
    color: var(--color-text-secondary);
}

/* ----------------------------------------
   DATE CELL
   ---------------------------------------- */
.date-cell[b-faz2emydug] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.date-value[b-faz2emydug] {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.time-value[b-faz2emydug] {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* ----------------------------------------
   REFERENCES CELL
   ---------------------------------------- */
.references-cell[b-faz2emydug] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ref-badge[b-faz2emydug] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-2);
    border-radius: var(--radius-md);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace;
}

.ref-badge-ticket[b-faz2emydug] {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.ref-badge-payment[b-faz2emydug] {
    background: var(--color-info-light, rgba(26, 124, 202, 0.08));
    color: var(--color-primary);
}

.no-refs[b-faz2emydug] {
    color: var(--color-text-muted);
    font-size: 16px;
}

/* ----------------------------------------
   ACTION BUTTONS
   ---------------------------------------- */
.action-buttons[b-faz2emydug] {
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    position: static;
}

.admin-action-btn[b-faz2emydug] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--color-border-primary);
    background: transparent;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1);
    flex-shrink: 0;
}

.admin-action-btn:hover:not(:disabled)[b-faz2emydug] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.admin-action-btn:disabled[b-faz2emydug] {
    opacity: 0.6;
    cursor: not-allowed;
}

.admin-action-btn--pdf[b-faz2emydug] {
    color: var(--color-error);
}

.admin-action-btn--pdf:hover:not(:disabled)[b-faz2emydug] {
    background: var(--color-error-light);
    border-color: var(--color-error);
    color: var(--color-error);
    box-shadow: none;
    transform: none;
}

/* ----------------------------------------
   MODAL FIELD VALUE (replaces inline styles)
   ---------------------------------------- */
.modal-field-value[b-faz2emydug] {
    display: flex;
    align-items: center;
}

.modal-field-value-gap[b-faz2emydug] {
    gap: 10px;
}

.modal-invoice-id[b-faz2emydug] {
    opacity: 0.65;
    margin-left: 8px;
}

.modal-user-email[b-faz2emydug] {
    color: var(--color-text-secondary);
}

/* ----------------------------------------
   MODAL FOOTER ACTIONS (replaces d-flex Bootstrap)
   ---------------------------------------- */
.modal-footer-actions[b-faz2emydug] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.modal-download-btn[b-faz2emydug] {
    margin-right: auto;
}

/* ----------------------------------------
   PAGINATION
   ---------------------------------------- */
.admin-pagination[b-faz2emydug] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-5);
    padding: var(--space-4);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    animation: rise-b-faz2emydug 0.45s cubic-bezier(.4, 0, .2, 1) 0.05s both;
}

.admin-pagination-info[b-faz2emydug] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.admin-pagination-controls[b-faz2emydug] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.admin-pagination-btn[b-faz2emydug] {
    min-width: 36px;
    height: 36px;
    padding: 0 var(--space-2);
    background: transparent;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-pagination-btn:hover:not(:disabled)[b-faz2emydug] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    transform: none;
    box-shadow: none;
}

.admin-pagination-btn:disabled[b-faz2emydug] {
    opacity: 0.4;
    cursor: not-allowed;
}

.admin-pagination-btn.active[b-faz2emydug] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg-primary);
    box-shadow: none;
}

.admin-pagination-ellipsis[b-faz2emydug] {
    padding: 0 var(--space-2);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
}

.admin-page-size-select[b-faz2emydug] {
    height: 36px;
    padding: 0 var(--space-3);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1), box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
}

.admin-page-size-select:hover[b-faz2emydug] {
}

.admin-page-size-select:focus[b-faz2emydug] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* ----------------------------------------
   ADVANCED FILTERS SECTION
   ---------------------------------------- */
.advanced-filters-section[b-faz2emydug] {
    width: 100%;
}

.advanced-filters-toggle[b-faz2emydug] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 14px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1);
}

.advanced-filters-toggle:hover[b-faz2emydug] {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

.advanced-filters-toggle svg.expand-icon[b-faz2emydug] {
    transition: transform 200ms cubic-bezier(.4, 0, .2, 1);
}

.advanced-filters-toggle svg.expand-icon.rotated[b-faz2emydug] {
    transform: rotate(180deg);
}

.advanced-filters-content[b-faz2emydug] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
}

/* Override input heights inside advanced filters too */
.advanced-filters-content .filter-input-wrapper input[b-faz2emydug],
.advanced-filters-content .filter-input-wrapper[b-faz2emydug]  input,
.advanced-filters-content .filter-field input[b-faz2emydug],
.advanced-filters-content .filter-field[b-faz2emydug]  input,
.advanced-filters-content .filter-field input[type="number"][b-faz2emydug],
.advanced-filters-content .filter-field[b-faz2emydug]  input[type="number"] {
    height: 44px !important;
    box-sizing: border-box;
}

/* ----------------------------------------
   RESPONSIVE DESIGN
   ---------------------------------------- */

/* Tablet */
@media (max-width: 991.98px) {
    .btn-text-desktop[b-faz2emydug] {
        display: none;
    }

    /* Table: horizontal scroll */
    .admin-table-container[b-faz2emydug] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .invoices-table-header[b-faz2emydug],
    .invoices-row-content[b-faz2emydug] {
        min-width: 900px;
    }

    .user-email[b-faz2emydug] {
        max-width: 120px;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .dropdown-menu[b-faz2emydug] {
        position: fixed;
        left: var(--space-4);
        right: var(--space-4);
        width: auto;
        min-width: auto;
        max-height: 50vh;
        z-index: 1100;
    }

    /* Pagination */
    .admin-pagination[b-faz2emydug] {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-pagination-info[b-faz2emydug] {
        text-align: center;
    }

    .admin-pagination-controls[b-faz2emydug] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .admin-page-size-select[b-faz2emydug] {
        width: 100%;
    }

    /* Table: card layout */
    .invoices-table-header[b-faz2emydug] {
        display: none;
    }

    .admin-table-container[b-faz2emydug] {
        overflow-x: visible;
    }

    .invoices-table-header[b-faz2emydug],
    .invoices-row-content[b-faz2emydug] {
        min-width: 0;
    }

    .invoices-row-content[b-faz2emydug] {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-4);
    }

    [b-faz2emydug] .admin-table-row {
        border-radius: var(--radius-lg);
        border: none;
        margin-bottom: var(--space-3);
    }

    .invoices-row-content .admin-table-cell[b-faz2emydug] {
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: var(--space-3);
        align-items: center;
        padding: var(--space-2) 0;
        text-align: left;
    }

    .invoices-row-content .admin-table-cell[b-faz2emydug]::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: var(--font-weight-bold);
        color: var(--color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .invoices-row-content .col-amount[b-faz2emydug] {
        text-align: left;
    }

    .amount-value[b-faz2emydug] {
        justify-content: flex-start;
    }

    .col-actions[b-faz2emydug] {
        grid-template-columns: 1fr;
        padding-top: var(--space-3);
        margin-top: var(--space-2);
    }

    .col-actions[b-faz2emydug]::before {
        display: none;
    }

    .action-buttons[b-faz2emydug] {
        justify-content: flex-start;
    }

    .user-avatar[b-faz2emydug] {
        width: 28px;
        height: 28px;
        border-radius: var(--radius-md);
    }

    .user-avatar svg[b-faz2emydug] {
        width: 12px;
        height: 12px;
    }

    .user-email[b-faz2emydug] {
        max-width: 150px;
    }

    .status-badge[b-faz2emydug] {
        padding: var(--space-1) 10px;
        font-size: 11px;
    }

    /* Error state - AppAlert integration */
    .alert-content-with-action[b-faz2emydug] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    [b-faz2emydug] .error-retry-btn {
        width: 100%;
        justify-content: center;
    }

    .skeleton-header[b-faz2emydug],
    .skeleton-row[b-faz2emydug] {
        grid-template-columns: 1fr;
    }
}

/* Small mobile */
@media (max-width: 575.98px) {
    .admin-table-card[b-faz2emydug] {
        border-radius: var(--radius-lg);
    }

    .table-empty-state[b-faz2emydug] {
        padding: var(--space-10) var(--space-4);
    }

    .empty-illustration[b-faz2emydug] {
        width: 80px;
        height: 80px;
    }

    .invoices-row-content .admin-table-cell[b-faz2emydug] {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }

    .invoices-row-content .admin-table-cell[b-faz2emydug]::before {
        font-size: 10px;
    }
}

/* ----------------------------------------
   FOCUS STATES
   ---------------------------------------- */
[b-faz2emydug] .filter-input:focus-visible,
.filter-input:focus-visible[b-faz2emydug] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.modern-dropdown:focus-visible .dropdown-trigger[b-faz2emydug] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-focus);
}

.copy-btn:focus-visible[b-faz2emydug],
.admin-action-btn:focus-visible[b-faz2emydug] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.admin-pagination-btn:focus-visible[b-faz2emydug] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.admin-page-size-select:focus-visible[b-faz2emydug] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ----------------------------------------
   REDUCED MOTION
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    [b-faz2emydug] .loading-spinner-container .spinner,
    .btn-spinner-small[b-faz2emydug],
    .skeleton-header-cell[b-faz2emydug],
    .skeleton-cell[b-faz2emydug] {
        animation: none;
    }

    .dropdown-trigger[b-faz2emydug],
    .dropdown-arrow[b-faz2emydug],
    .dropdown-option[b-faz2emydug],
    .dropdown-menu[b-faz2emydug],
    .copy-btn[b-faz2emydug],
    .admin-action-btn[b-faz2emydug],
    .advanced-filters-toggle[b-faz2emydug],
    .advanced-filters-toggle svg.expand-icon[b-faz2emydug],
    .admin-pagination-btn[b-faz2emydug],
    .admin-page-size-select[b-faz2emydug],
    .admin-table-card[b-faz2emydug] {
        transition: none;
    }

    .dropdown-menu[b-faz2emydug],
    .admin-table-card[b-faz2emydug],
    .admin-pagination[b-faz2emydug] {
        animation: none;
    }
}

/* ----------------------------------------
   PRINT STYLES
   ---------------------------------------- */
@media print {
    .admin-search-card[b-faz2emydug],
    .admin-pagination[b-faz2emydug],
    .col-actions[b-faz2emydug],
    .copy-btn[b-faz2emydug],
    .advanced-filters-section[b-faz2emydug] {
        display: none !important;
    }

    .admin-table-card[b-faz2emydug] {
        border: 1px solid #ddd;
        box-shadow: none;
    }

    .invoices-table-row[b-faz2emydug] {
        break-inside: avoid;
    }
}
/* /Components/Pages/Admin/AdminLegalEditor.razor.rz.scp.css */
/* ========================================
   ADMIN LEGAL EDITOR — 2026 Premium Design
   Solid surfaces, bordered cards, rise animation
   Matches AdminLegalPages reference design
   ======================================== */

/* ----------------------------------------
   ANIMATIONS
   ---------------------------------------- */
@keyframes rise-b-lorj21eat7 {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shimmer-b-lorj21eat7 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ----------------------------------------
   CARD — Main content container
   ---------------------------------------- */
.le-card[b-lorj21eat7] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
    margin-bottom: var(--space-4);
    animation: rise-b-lorj21eat7 .45s cubic-bezier(.4, 0, .2, 1) both;
    animation-delay: calc(var(--card-index, 0) * 0.08s);
}

.le-card--editor[b-lorj21eat7] {
    padding-bottom: var(--space-5);
}

/* ----------------------------------------
   SECTION TITLE
   ---------------------------------------- */
.le-section-title[b-lorj21eat7] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-5) 0;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-primary);
}

.le-section-title svg[b-lorj21eat7] {
    width: 16px;
    height: 16px;
    color: var(--color-primary);
    opacity: 0.7;
}

/* ----------------------------------------
   FORM CONTROLS
   ---------------------------------------- */
.le-form-group[b-lorj21eat7] {
    margin-bottom: var(--space-4);
}

.le-form-group:last-child[b-lorj21eat7] {
    margin-bottom: 0;
}

.le-form-label[b-lorj21eat7] {
    display: block;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 16px;
    height: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-2) 0;
}

.le-form-input[b-lorj21eat7] {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-4);
    font-size: 15px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

.le-form-input[b-lorj21eat7]::placeholder {
    color: var(--color-text-muted);
}

.le-form-input:hover[b-lorj21eat7] {
    border-color: var(--color-border-secondary);
}

.le-form-input:focus[b-lorj21eat7] {
    outline: none;
    border: 1px solid var(--color-primary);
    background: var(--color-bg-primary);
    box-shadow: var(--shadow-focus);
}

.le-form-input:disabled[b-lorj21eat7] {
    background: var(--color-bg-secondary);
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

.le-form-input--mono[b-lorj21eat7] {
    font-family: var(--font-mono, 'SF Mono', 'Monaco', 'Consolas', monospace);
    font-size: 14px;
    letter-spacing: 0.02em;
}

/* Form Row Layouts */
.le-form-row[b-lorj21eat7] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}


/* ----------------------------------------
   TOGGLE SWITCH (Published)
   ---------------------------------------- */
.le-toggle-row[b-lorj21eat7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    cursor: pointer;
    height: 100%;
    box-sizing: border-box;
}

.le-toggle-info[b-lorj21eat7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.le-toggle-label[b-lorj21eat7] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}

.le-toggle-hint[b-lorj21eat7] {
    font-size: 12px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
}

.le-toggle-switch[b-lorj21eat7] {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.le-toggle-switch :deep(input)[b-lorj21eat7] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.le-toggle-slider[b-lorj21eat7] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-text-light);
    border-radius: 26px;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

.le-toggle-slider[b-lorj21eat7]::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: var(--color-bg-primary);
    border-radius: 50%;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.le-toggle-switch :deep(input:checked + .le-toggle-slider)[b-lorj21eat7] {
    background: var(--color-success);
}

.le-toggle-switch :deep(input:checked + .le-toggle-slider)[b-lorj21eat7]::before {
    transform: translateX(22px);
}

.le-toggle-switch :deep(input:focus-visible + .le-toggle-slider)[b-lorj21eat7] {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

/* ----------------------------------------
   ACTION BUTTONS
   ---------------------------------------- */
.le-actions[b-lorj21eat7] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-primary);
}

.le-btn[b-lorj21eat7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 44px;
    padding: 0 var(--space-5);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

.le-btn:disabled[b-lorj21eat7] {
    opacity: 0.6;
    cursor: not-allowed;
}

.le-btn--primary[b-lorj21eat7] {
    background: var(--color-primary);
    color: white;
    padding: 0 var(--space-6);
}

.le-btn--primary:hover:not(:disabled)[b-lorj21eat7] {
    background: var(--color-primary-hover, var(--color-primary));
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.le-btn--primary:active:not(:disabled)[b-lorj21eat7] {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.le-btn--ghost[b-lorj21eat7] {
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-primary);
    margin-right: auto;
}

.le-btn--ghost:hover:not(:disabled)[b-lorj21eat7] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

/* ----------------------------------------
   SKELETON LOADING
   ---------------------------------------- */
.le-skeleton-wrapper[b-lorj21eat7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    animation: rise-b-lorj21eat7 .45s cubic-bezier(.4, 0, .2, 1) both;
}

.le-skeleton-card[b-lorj21eat7] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.le-skeleton-card--tall[b-lorj21eat7] {
    min-height: 400px;
}

.le-skeleton-section-title[b-lorj21eat7],
.le-skeleton-input[b-lorj21eat7],
.le-skeleton-input-sm[b-lorj21eat7],
.le-skeleton-input--wide[b-lorj21eat7],
.le-skeleton-editor[b-lorj21eat7] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-bg-secondary) 50%, var(--color-bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-lorj21eat7 1.5s infinite;
    border-radius: var(--radius-md);
}

.le-skeleton-section-title[b-lorj21eat7] {
    height: 14px;
    width: 40%;
    margin-bottom: var(--space-2);
}

.le-skeleton-input[b-lorj21eat7] {
    height: 48px;
    width: 100%;
}

.le-skeleton-input-sm[b-lorj21eat7] {
    height: 48px;
    width: 100%;
}

.le-skeleton-input--wide[b-lorj21eat7] {
    height: 48px;
}

.le-skeleton-row[b-lorj21eat7] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.le-skeleton-row:has(.le-skeleton-input-sm)[b-lorj21eat7] {
    grid-template-columns: 1fr 1fr 1fr;
}

.le-skeleton-editor[b-lorj21eat7] {
    flex: 1;
    min-height: 300px;
    border-radius: var(--radius-lg);
}

/* ----------------------------------------
   RESPONSIVE — Tablet
   ---------------------------------------- */
@media (max-width: 1023.98px) {
    .le-card[b-lorj21eat7] {
        padding: var(--space-5);
    }

    .le-form-row[b-lorj21eat7] {
        grid-template-columns: 1fr;
    }

}

/* ----------------------------------------
   RESPONSIVE — Mobile
   ---------------------------------------- */
@media (max-width: 767.98px) {
    .le-card[b-lorj21eat7] {
        padding: var(--space-4);
        border-radius: var(--radius-xl);
    }

    .le-form-row[b-lorj21eat7] {
        grid-template-columns: 1fr;
    }

    .le-skeleton-row[b-lorj21eat7],
    .le-skeleton-row:has(.le-skeleton-input-sm)[b-lorj21eat7] {
        grid-template-columns: 1fr;
    }

    .le-actions[b-lorj21eat7] {
        flex-direction: column-reverse;
        gap: var(--space-3);
    }

    .le-actions .le-btn[b-lorj21eat7] {
        width: 100%;
    }

    .le-btn--ghost[b-lorj21eat7] {
        margin-right: 0;
    }
}

/* ----------------------------------------
   RESPONSIVE — Small mobile
   ---------------------------------------- */
@media (max-width: 575.98px) {
    .le-section-title[b-lorj21eat7] {
        font-size: 11px;
    }
}

/* ----------------------------------------
   FOCUS STATES
   ---------------------------------------- */
.le-btn:focus-visible[b-lorj21eat7] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ----------------------------------------
   REDUCED MOTION
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .le-card[b-lorj21eat7],
    .le-skeleton-wrapper[b-lorj21eat7],
    .le-skeleton-card[b-lorj21eat7],
    .le-skeleton-section-title[b-lorj21eat7],
    .le-skeleton-input[b-lorj21eat7],
    .le-skeleton-input-sm[b-lorj21eat7],
    .le-skeleton-input--wide[b-lorj21eat7],
    .le-skeleton-editor[b-lorj21eat7] {
        animation: none;
    }

    .le-btn[b-lorj21eat7],
    .le-form-input[b-lorj21eat7],
    .le-toggle-slider[b-lorj21eat7],
    .le-toggle-slider[b-lorj21eat7]::before {
        transition: none;
    }
}

/* ----------------------------------------
   PRINT
   ---------------------------------------- */
@media print {
    .le-actions[b-lorj21eat7],
    .le-skeleton-wrapper[b-lorj21eat7] {
        display: none;
    }

    .le-card[b-lorj21eat7] {
        border: 1px solid #000;
        box-shadow: none;
        break-inside: avoid;
        animation: none;
    }
}
/* /Components/Pages/Admin/AdminLegalPages.razor.rz.scp.css */
/* ========================================
   ADMIN LEGAL PAGES — 2026 Design System
   Scoped styles for /admin/legal
   Solid surfaces, bordered cards, rise animation
   Matches AdminTrackingEmulator reference design
   ======================================== */

/* ----------------------------------------
   RISE ANIMATION (standard entrance)
   ---------------------------------------- */
@keyframes rise-b-kid563q1g3 {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shimmer-b-kid563q1g3 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ----------------------------------------
   CARD LIST
   ---------------------------------------- */
.lp-cards-list[b-kid563q1g3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ----------------------------------------
   LEGAL PAGE CARD
   ---------------------------------------- */
.lp-card[b-kid563q1g3] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5) var(--space-6);
    cursor: pointer;
    animation: rise-b-kid563q1g3 .45s cubic-bezier(.4, 0, .2, 1) both;
    animation-delay: calc(var(--card-index, 0) * 0.06s);
    transition: box-shadow 200ms cubic-bezier(.4, 0, .2, 1),
                border-color 200ms cubic-bezier(.4, 0, .2, 1),
                transform 200ms cubic-bezier(.4, 0, .2, 1);
}

.lp-card:hover[b-kid563q1g3] {
    border-color: var(--color-border-secondary);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.lp-card:focus-visible[b-kid563q1g3] {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    border-radius: var(--radius-2xl);
}

.lp-card--core[b-kid563q1g3] {
    background: var(--color-primary-light);
    border-color: var(--color-primary-border, rgba(26, 124, 202, 0.18));
}

.lp-card--core:hover[b-kid563q1g3] {
    border-color: rgba(26, 124, 202, 0.30);
}

/* ----------------------------------------
   CARD ICON (44px circle)
   ---------------------------------------- */
.lp-card-icon[b-kid563q1g3] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-xl);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lp-card-icon svg[b-kid563q1g3] {
    width: 22px;
    height: 22px;
}

.lp-card-icon--core[b-kid563q1g3] {
    background: var(--color-primary-light);
    border: 1px solid var(--color-primary-border, rgba(26, 124, 202, 0.18));
    color: var(--color-primary);
}

.lp-card-icon--custom[b-kid563q1g3] {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    color: var(--color-text-secondary);
}

/* ----------------------------------------
   CARD BODY (text content)
   ---------------------------------------- */
.lp-card-body[b-kid563q1g3] {
    flex: 1;
    min-width: 0;
}

.lp-card-title-row[b-kid563q1g3] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.lp-card-title[b-kid563q1g3] {
    font-weight: var(--font-weight-bold);
    font-size: 16px;
    color: var(--color-text-primary);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.lp-core-badge[b-kid563q1g3] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--color-primary-light);
    border: 1px solid var(--color-primary-border, rgba(26, 124, 202, 0.18));
    color: var(--color-primary);
    white-space: nowrap;
}

.lp-card-description[b-kid563q1g3] {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.45;
    margin-bottom: var(--space-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lp-card-meta[b-kid563q1g3] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.lp-slug-badge[b-kid563q1g3] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) 10px;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    font-family: var(--font-mono, 'SF Mono', 'Monaco', 'Consolas', monospace);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.lp-version-badge[b-kid563q1g3] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) 10px;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

/* ----------------------------------------
   UPDATED TIMESTAMP BADGE
   ---------------------------------------- */
.lp-updated-badge[b-kid563q1g3] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) 10px;
    background: transparent;
    border-radius: var(--radius-md);
    font-size: 11px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
}

/* ----------------------------------------
   CARD ACTIONS (status + editor link)
   ---------------------------------------- */
.lp-card-actions[b-kid563q1g3] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
    flex-shrink: 0;
}

.lp-editor-link[b-kid563q1g3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    border: 1px solid transparent;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    text-decoration: none;
}

.lp-editor-link:hover[b-kid563q1g3] {
    color: var(--color-primary);
    background: var(--color-primary-light);
    border-color: var(--color-primary-border, rgba(26, 124, 202, 0.18));
}

/* ----------------------------------------
   CARD STATUS BADGE
   ---------------------------------------- */
.lp-card-status[b-kid563q1g3] {
    flex-shrink: 0;
}

.lp-status-badge[b-kid563q1g3] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.lp-status-badge--success[b-kid563q1g3] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.lp-status-badge--neutral[b-kid563q1g3] {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

/* ----------------------------------------
   SKELETON LOADING
   ---------------------------------------- */
.lp-skeleton[b-kid563q1g3] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-bg-secondary) 50%, var(--color-bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-kid563q1g3 1.5s infinite;
    border-radius: var(--radius-md);
}

.lp-skeleton-list[b-kid563q1g3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.lp-skeleton-card[b-kid563q1g3] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    animation: rise-b-kid563q1g3 .45s cubic-bezier(.4, 0, .2, 1) both;
    animation-delay: calc(var(--card-index, 0) * 0.06s);
}

.lp-skeleton-icon[b-kid563q1g3] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-xl);
    flex-shrink: 0;
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-bg-secondary) 50%, var(--color-bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-kid563q1g3 1.5s infinite;
}

.lp-skeleton-body[b-kid563q1g3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.lp-skeleton-title[b-kid563q1g3] {
    height: 16px;
    width: 55%;
    border-radius: var(--radius-sm);
}

.lp-skeleton-desc[b-kid563q1g3] {
    height: 12px;
    width: 80%;
    border-radius: var(--radius-sm);
}

.lp-skeleton-meta-row[b-kid563q1g3] {
    display: flex;
    gap: var(--space-2);
    margin-top: 2px;
}

.lp-skeleton-badge[b-kid563q1g3] {
    height: 20px;
    width: 80px;
    border-radius: var(--radius-md);
}

.lp-skeleton-badge-sm[b-kid563q1g3] {
    height: 20px;
    width: 48px;
    border-radius: var(--radius-md);
}

.lp-skeleton-status[b-kid563q1g3] {
    height: 24px;
    width: 72px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}

/* ----------------------------------------
   MODAL — Form Styles
   ---------------------------------------- */
.lp-modal-error[b-kid563q1g3] {
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    background: var(--color-error-light);
    border: 1px solid var(--color-error-bright, var(--color-error));
    border-radius: var(--radius-lg);
    color: var(--color-error);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
}

/* Section Title */
.lp-section-title[b-kid563q1g3] {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4) 0;
    padding-bottom: var(--space-2);
}

.lp-section-title--spaced[b-kid563q1g3] {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-primary);
}

/* Form Group */
.lp-form-group[b-kid563q1g3] {
    margin-bottom: var(--space-4);
}

.lp-form-group:last-child[b-kid563q1g3] {
    margin-bottom: 0;
}

/* Form Label — Fixed 16px height, 11px uppercase */
.lp-form-label[b-kid563q1g3] {
    display: block;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 16px;
    height: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-2) 0;
}

/* Form Input — 48px height, bordered */
.lp-form-input[b-kid563q1g3] {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-4);
    font-size: 15px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

.lp-form-input[b-kid563q1g3]::placeholder {
    color: var(--color-text-muted);
}

.lp-form-input:hover[b-kid563q1g3] {
    border-color: var(--color-border-secondary);
}

.lp-form-input:focus[b-kid563q1g3] {
    outline: none;
    border: 1px solid var(--color-primary);
    background: var(--color-bg-primary);
    box-shadow: var(--shadow-focus);
}

.lp-form-input:disabled[b-kid563q1g3] {
    background: var(--color-bg-secondary);
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Form Row (2-column) */
.lp-form-row[b-kid563q1g3] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

/* ----------------------------------------
   TOGGLE SWITCH (Published)
   ---------------------------------------- */
.lp-toggle-row[b-kid563q1g3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    cursor: pointer;
}

.lp-toggle-info[b-kid563q1g3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lp-toggle-label[b-kid563q1g3] {
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}

.lp-toggle-hint[b-kid563q1g3] {
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
}

.lp-toggle-switch[b-kid563q1g3] {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.lp-toggle-switch :deep(input)[b-kid563q1g3] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.lp-toggle-slider[b-kid563q1g3] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-text-light);
    border-radius: 26px;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

.lp-toggle-slider[b-kid563q1g3]::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: var(--color-bg-primary);
    border-radius: 50%;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.lp-toggle-switch :deep(input:checked + .lp-toggle-slider)[b-kid563q1g3] {
    background: var(--color-success);
}

.lp-toggle-switch :deep(input:checked + .lp-toggle-slider)[b-kid563q1g3]::before {
    transform: translateX(22px);
}

.lp-toggle-switch :deep(input:focus-visible + .lp-toggle-slider)[b-kid563q1g3] {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

/* ----------------------------------------
   MODAL FOOTER ACTIONS (matches Invoices reference)
   ---------------------------------------- */
.lp-modal-footer-actions[b-kid563q1g3] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.lp-modal-action-left[b-kid563q1g3] {
    margin-right: auto;
}

/* Modal Buttons */
.lp-btn[b-kid563q1g3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 40px;
    padding: 0 var(--space-5);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

.lp-btn:disabled[b-kid563q1g3] {
    opacity: 0.5;
    cursor: not-allowed;
}

.lp-btn--primary[b-kid563q1g3] {
    background: var(--color-primary);
    color: white;
}

.lp-btn--primary:hover:not(:disabled)[b-kid563q1g3] {
    background: var(--color-primary-hover, var(--color-primary));
    box-shadow: var(--shadow-sm);
}

.lp-btn--outline[b-kid563q1g3] {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-primary);
}

.lp-btn--outline:hover:not(:disabled)[b-kid563q1g3] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
}

.lp-btn--danger[b-kid563q1g3] {
    background: var(--color-error-light);
    color: var(--color-error);
    border: 1px solid transparent;
}

.lp-btn--danger:hover:not(:disabled)[b-kid563q1g3] {
    background: var(--color-error);
    color: white;
}

/* ----------------------------------------
   RESPONSIVE — Tablet
   ---------------------------------------- */
@media (max-width: 1023.98px) {
    .lp-card[b-kid563q1g3] {
        padding: var(--space-4) var(--space-5);
    }

    .lp-form-row[b-kid563q1g3] {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------
   RESPONSIVE — Mobile
   ---------------------------------------- */
@media (max-width: 767.98px) {
    .lp-card[b-kid563q1g3] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
        padding: var(--space-4);
    }

    .lp-card-icon[b-kid563q1g3] {
        /* On mobile, keep icon + body on the same line using a sub-row */
    }

    .lp-card-status[b-kid563q1g3] {
        align-self: flex-start;
    }

    .lp-form-row[b-kid563q1g3] {
        grid-template-columns: 1fr;
    }

    .lp-modal-footer-actions[b-kid563q1g3] {
        flex-wrap: wrap;
    }

    .lp-skeleton-card[b-kid563q1g3] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
        padding: var(--space-4);
    }

    .lp-skeleton-icon[b-kid563q1g3] {
        width: 36px;
        height: 36px;
    }
}

/* ----------------------------------------
   RESPONSIVE — Small mobile
   ---------------------------------------- */
@media (max-width: 575.98px) {
    .lp-card[b-kid563q1g3] {
        border-radius: var(--radius-xl);
    }

    .lp-card-title[b-kid563q1g3] {
        font-size: 15px;
    }

    .lp-modal-footer-actions[b-kid563q1g3] {
        flex-direction: column;
        gap: var(--space-3);
    }

    .lp-modal-footer-actions .lp-btn[b-kid563q1g3] {
        width: 100%;
    }

    .lp-modal-action-left[b-kid563q1g3] {
        margin-right: 0;
    }
}

/* ----------------------------------------
   FOCUS STATES & ACCESSIBILITY
   ---------------------------------------- */
.lp-btn:focus-visible[b-kid563q1g3] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ----------------------------------------
   REDUCED MOTION
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .lp-card[b-kid563q1g3],
    .lp-skeleton-card[b-kid563q1g3],
    .lp-skeleton[b-kid563q1g3],
    .lp-skeleton-icon[b-kid563q1g3] {
        animation: none;
    }

    .lp-card[b-kid563q1g3],
    .lp-btn[b-kid563q1g3],
    .lp-form-input[b-kid563q1g3],
    .lp-toggle-slider[b-kid563q1g3],
    .lp-toggle-slider[b-kid563q1g3]::before {
        transition: none;
    }
}

/* ----------------------------------------
   PRINT
   ---------------------------------------- */
@media print {
    .lp-skeleton-list[b-kid563q1g3] {
        display: none;
    }

    .lp-card[b-kid563q1g3] {
        border: 1px solid #000;
        box-shadow: none;
        break-inside: avoid;
        animation: none;
    }

    .lp-status-badge--success[b-kid563q1g3] {
        border: 1px solid currentColor;
    }
}
/* /Components/Pages/Admin/AdminLineCategories.razor.rz.scp.css */
/* ========================================
   LINE CATEGORIES — Premium 2026 Redesign
   Solid surfaces, design tokens, rise animation
   ======================================== */

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes rise-b-ddoa7i0ry6 {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-shimmer-b-ddoa7i0ry6 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes spin-b-ddoa7i0ry6 {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Grid Column Definition
   ========================================================================== */
[b-ddoa7i0ry6] .admin-grid-cols-1 {
    --admin-grid-cols: 1;
}

/* ==========================================================================
   TABLE CARD — Solid surface
   ========================================================================== */
.admin-table-card[b-ddoa7i0ry6] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    margin-top: var(--space-5);
    box-shadow: var(--shadow-sm);
    animation: rise-b-ddoa7i0ry6 0.45s cubic-bezier(.4, 0, .2, 1) both;
    overflow: hidden;
}

[b-ddoa7i0ry6] .admin-table-container {
    margin-top: 0;
}

[b-ddoa7i0ry6] .admin-table-header {
    background: var(--color-bg-secondary);
    margin-bottom: 0;
    padding: var(--space-4) 0;
    border-radius: 0;
}

[b-ddoa7i0ry6] .admin-table-rows {
    gap: 0;
}

[b-ddoa7i0ry6] .admin-table-row {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    padding: 0 var(--space-4) 0 0;
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
    display: flex;
    align-items: center;
}

[b-ddoa7i0ry6] .admin-table-row:hover {
    background: var(--color-bg-secondary);
    box-shadow: none;
    transform: none;
}

[b-ddoa7i0ry6] .admin-table-row:not(:last-child) {
    border-bottom: 1px solid var(--color-border-primary);
}

/* ==========================================================================
   CATEGORY ROW — Avatar + Name + Chevron
   ========================================================================== */
.lc-name-cell[b-ddoa7i0ry6] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.lc-avatar[b-ddoa7i0ry6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    border-radius: var(--radius-lg);
    color: var(--color-text-inverse);
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(26, 124, 202, 0.18);
}

.lc-avatar svg[b-ddoa7i0ry6] {
    width: 16px;
    height: 16px;
}

[b-ddoa7i0ry6] .admin-table-row:hover .lc-avatar {
    transform: scale(1.06);
    box-shadow: 0 4px 12px rgba(26, 124, 202, 0.28);
}

.lc-name[b-ddoa7i0ry6] {
    font-weight: var(--font-weight-semibold);
    font-size: 14px;
    color: var(--color-text-primary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lc-row-chevron[b-ddoa7i0ry6] {
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    margin-left: auto;
    flex-shrink: 0;
}

[b-ddoa7i0ry6] .admin-table-row:hover .lc-row-chevron {
    opacity: 0.5;
    transform: translateX(2px);
}

/* ==========================================================================
   Alert Enhancements
   ========================================================================== */
.admin-alert[b-ddoa7i0ry6] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.admin-alert-icon[b-ddoa7i0ry6] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.admin-alert-dismiss[b-ddoa7i0ry6] {
    margin-left: auto;
    background: transparent;
    border: none;
    padding: var(--space-1);
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: inherit;
    opacity: 0.6;
    transition: opacity 200ms;
}

.admin-alert-dismiss:hover[b-ddoa7i0ry6] {
    opacity: 1;
}

.admin-alert-dismiss svg[b-ddoa7i0ry6] {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   Loading Skeleton
   ========================================================================== */
.lc-loading-state[b-ddoa7i0ry6] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.lc-skeleton-row[b-ddoa7i0ry6] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
}

.lc-skeleton-row:not(:last-child)[b-ddoa7i0ry6] {
    border-bottom: 1px solid var(--color-border-primary);
}

.lc-skeleton[b-ddoa7i0ry6] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 37%, var(--color-bg-tertiary) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer-b-ddoa7i0ry6 1.8s ease infinite;
    border-radius: var(--radius-sm);
}

.lc-skeleton-avatar[b-ddoa7i0ry6] {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: var(--radius-lg);
}

.lc-skeleton-text[b-ddoa7i0ry6] {
    width: 200px;
    max-width: 50%;
    height: 16px;
}

/* ==========================================================================
   Empty State
   ========================================================================== */
.admin-empty-state[b-ddoa7i0ry6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-16) var(--space-8);
    animation: rise-b-ddoa7i0ry6 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

.lc-empty-icon[b-ddoa7i0ry6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: 50%;
    margin-bottom: var(--space-5);
}

.lc-empty-icon svg[b-ddoa7i0ry6] {
    width: 28px;
    height: 28px;
    color: var(--color-text-muted);
}

.admin-empty-state-title[b-ddoa7i0ry6] {
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
}

.admin-empty-state-text[b-ddoa7i0ry6] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-6) 0;
    max-width: 400px;
}

.lc-empty-btn[b-ddoa7i0ry6] {
    height: 38px;
    padding: 0 var(--space-5);
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-inverse);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: background 200ms, border-color 200ms;
    font-family: inherit;
}

.lc-empty-btn:hover[b-ddoa7i0ry6] {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.lc-empty-btn svg[b-ddoa7i0ry6] {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   MODAL FORM — Flat layout
   ========================================================================== */
.lc-form[b-ddoa7i0ry6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.lc-form-field[b-ddoa7i0ry6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lc-form-label[b-ddoa7i0ry6] {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.lc-form-req[b-ddoa7i0ry6] {
    color: var(--color-error);
    font-weight: var(--font-weight-bold);
}

.lc-form-input[b-ddoa7i0ry6] {
    width: 100%;
    height: 40px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    transition: border-color 200ms, box-shadow 200ms;
    box-sizing: border-box;
    font-family: inherit;
}

.lc-form-input:hover[b-ddoa7i0ry6] {
    border-color: var(--color-border-secondary);
}

.lc-form-input:focus[b-ddoa7i0ry6] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.lc-form-input[b-ddoa7i0ry6]::placeholder {
    color: var(--color-text-muted);
}

[b-ddoa7i0ry6] .lc-form-input {
    width: 100%;
    height: 40px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    transition: border-color 200ms, box-shadow 200ms;
    box-sizing: border-box;
    font-family: inherit;
}

[b-ddoa7i0ry6] .lc-form-input:hover {
    border-color: var(--color-border-secondary);
}

[b-ddoa7i0ry6] .lc-form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

[b-ddoa7i0ry6] .lc-form-input::placeholder {
    color: var(--color-text-muted);
}

.lc-form-error[b-ddoa7i0ry6] {
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-error);
}

/* Modal error */
.lc-modal-error[b-ddoa7i0ry6] {
    padding: var(--space-3) var(--space-4);
    background: var(--color-error-light);
    border: 1px solid var(--color-error-bright);
    border-radius: var(--radius-md);
    color: var(--color-error);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-4);
    animation: rise-b-ddoa7i0ry6 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

/* ==========================================================================
   FORM ACTIONS — Delete left, Cancel+Save right
   ========================================================================== */
.lc-form-actions[b-ddoa7i0ry6] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-primary);
    margin-top: var(--space-5);
}

.lc-form-actions-right[b-ddoa7i0ry6] {
    display: flex;
    gap: var(--space-3);
    margin-left: auto;
}

.lc-delete-btn[b-ddoa7i0ry6] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-error);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background 200ms, color 200ms;
    font-family: inherit;
}

.lc-delete-btn:hover[b-ddoa7i0ry6] {
    background: var(--color-error-light);
}

.lc-delete-btn svg[b-ddoa7i0ry6] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.lc-cancel-btn[b-ddoa7i0ry6] {
    height: 38px;
    padding: 0 var(--space-5);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 200ms, border-color 200ms, color 200ms;
    font-family: inherit;
}

.lc-cancel-btn:hover[b-ddoa7i0ry6] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.lc-save-btn[b-ddoa7i0ry6] {
    height: 38px;
    padding: 0 var(--space-5);
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-inverse);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: background 200ms, border-color 200ms;
    font-family: inherit;
}

.lc-save-btn:hover[b-ddoa7i0ry6] {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.lc-save-btn:disabled[b-ddoa7i0ry6] {
    opacity: 0.7;
    cursor: not-allowed;
}

.lc-save-btn svg[b-ddoa7i0ry6] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.lc-spinner[b-ddoa7i0ry6] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-ddoa7i0ry6 0.6s linear infinite;
}

/* ==========================================================================
   MOBILE — Card Layout (991.98px)
   ========================================================================== */
@media (max-width: 991.98px) {
    .admin-table-card[b-ddoa7i0ry6] {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        margin-top: var(--space-4);
        box-shadow: none !important;
        overflow: visible !important;
    }

    [b-ddoa7i0ry6] .admin-table-header,
    [b-ddoa7i0ry6] .admin-table-header.admin-auto-grid {
        display: none !important;
    }

    [b-ddoa7i0ry6] .admin-table-rows {
        gap: var(--space-3) !important;
    }

    [b-ddoa7i0ry6] .admin-table-row,
    [b-ddoa7i0ry6] .admin-table-container .admin-table-row {
        border-radius: var(--radius-lg) !important;
        padding: var(--space-4) !important;
        background: var(--color-bg-primary) !important;
        border: 1px solid var(--color-border-primary) !important;
        box-shadow: var(--shadow-sm) !important;
    }

    [b-ddoa7i0ry6] .admin-table-row:hover {
        transform: none !important;
    }

    [b-ddoa7i0ry6] .admin-table-row-content,
    [b-ddoa7i0ry6] .admin-table-row-content.admin-auto-grid,
    [b-ddoa7i0ry6] .admin-table-row-content.admin-auto-grid.admin-grid-cols-1 {
        display: flex !important;
        padding: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    [b-ddoa7i0ry6] .admin-auto-grid .admin-table-cell,
    [b-ddoa7i0ry6] .admin-auto-grid .admin-table-cell-primary {
        display: flex !important;
        padding: 0 !important;
        width: 100% !important;
    }

    [b-ddoa7i0ry6] .admin-auto-grid .admin-table-cell::before,
    [b-ddoa7i0ry6] .admin-auto-grid .admin-table-cell-primary::before {
        display: none !important;
    }

    .lc-row-chevron[b-ddoa7i0ry6] {
        display: none;
    }
}

/* ==========================================================================
   SMALL SCREENS (767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {
    .lc-form-actions[b-ddoa7i0ry6] {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .lc-form-actions-right[b-ddoa7i0ry6] {
        flex-direction: column-reverse;
        margin-left: 0;
    }

    .lc-cancel-btn[b-ddoa7i0ry6],
    .lc-save-btn[b-ddoa7i0ry6],
    .lc-delete-btn[b-ddoa7i0ry6] {
        width: 100%;
        justify-content: center;
    }

    .admin-empty-state[b-ddoa7i0ry6] {
        padding: var(--space-12) var(--space-5);
    }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .lc-skeleton[b-ddoa7i0ry6],
    [b-ddoa7i0ry6] .admin-table-row,
    .lc-avatar[b-ddoa7i0ry6],
    .lc-row-chevron[b-ddoa7i0ry6],
    .lc-form-input[b-ddoa7i0ry6],
    .lc-cancel-btn[b-ddoa7i0ry6],
    .lc-save-btn[b-ddoa7i0ry6],
    .lc-delete-btn[b-ddoa7i0ry6],
    .lc-empty-btn[b-ddoa7i0ry6],
    .admin-alert-dismiss[b-ddoa7i0ry6] {
        transition: none;
        animation: none;
    }

    .admin-table-card[b-ddoa7i0ry6],
    .admin-empty-state[b-ddoa7i0ry6],
    .lc-modal-error[b-ddoa7i0ry6] {
        animation: none;
    }

    .lc-spinner[b-ddoa7i0ry6] {
        animation: none;
    }
}

/* ==========================================================================
   FOCUS STATES
   ========================================================================== */
.lc-cancel-btn:focus-visible[b-ddoa7i0ry6],
.lc-save-btn:focus-visible[b-ddoa7i0ry6],
.lc-delete-btn:focus-visible[b-ddoa7i0ry6],
.lc-empty-btn:focus-visible[b-ddoa7i0ry6],
.admin-alert-dismiss:focus-visible[b-ddoa7i0ry6] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

[b-ddoa7i0ry6] .lc-form-input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .admin-table-card[b-ddoa7i0ry6] {
        border: 1px solid #ddd;
        box-shadow: none;
        background: var(--color-bg-primary);
    }
}
/* /Components/Pages/Admin/AdminLines.razor.rz.scp.css */
/* ========================================
   ADMIN LINES PAGE — Premium 2026 Redesign
   Solid surfaces, design tokens, rise animation
   ======================================== */

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes rise-b-ro0svhsnqi {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-shimmer-b-ro0svhsnqi {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   Grid Column Definition
   ========================================================================== */
[b-ro0svhsnqi] .admin-grid-cols-3 {
    --admin-grid-cols: 3;
}

/* ==========================================================================
   TABLE CARD — Solid surface
   ========================================================================== */
.admin-table-card[b-ro0svhsnqi] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    margin-top: var(--space-5);
    box-shadow: var(--shadow-sm);
    animation: rise-b-ro0svhsnqi 0.45s cubic-bezier(.4, 0, .2, 1) both;
    overflow: hidden;
}

[b-ro0svhsnqi] .admin-table-container {
    margin-top: 0;
}

[b-ro0svhsnqi] .admin-table-header {
    background: var(--color-bg-secondary);
    margin-bottom: 0;
    padding: var(--space-4) 0;
    border-radius: 0;
}

[b-ro0svhsnqi] .admin-table-rows {
    gap: 0;
}

[b-ro0svhsnqi] .admin-table-row {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    padding: 0 var(--space-3) 0 0;
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

[b-ro0svhsnqi] .admin-table-row:hover {
    background: var(--color-bg-secondary);
    box-shadow: none;
    transform: none;
}

[b-ro0svhsnqi] .admin-table-row:not(:last-child) {
    border-bottom: 1px solid var(--color-border-primary);
}

/* ==========================================================================
   LINE ROW — Avatar + Name + Meta
   ========================================================================== */
.line-name-cell[b-ro0svhsnqi] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.line-avatar[b-ro0svhsnqi] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    border-radius: var(--radius-lg);
    color: var(--color-text-inverse);
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(26, 124, 202, 0.18);
}

[b-ro0svhsnqi] .admin-table-row:hover .line-avatar {
    transform: scale(1.06);
    box-shadow: 0 4px 12px rgba(26, 124, 202, 0.28);
}

.line-avatar-number[b-ro0svhsnqi] {
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
    line-height: 1;
}

.line-name-group[b-ro0svhsnqi] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.line-name[b-ro0svhsnqi] {
    font-weight: var(--font-weight-semibold);
    font-size: 14px;
    color: var(--color-text-primary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.line-meta[b-ro0svhsnqi] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
}

.line-meta svg[b-ro0svhsnqi] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    opacity: 0.6;
}

.line-category-chip[b-ro0svhsnqi] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.line-row-chevron[b-ro0svhsnqi] {
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    margin-left: auto;
}

[b-ro0svhsnqi] .admin-table-row:hover .line-row-chevron {
    opacity: 0.5;
    transform: translateX(2px);
}

/* ==========================================================================
   Filter Field Layout
   ========================================================================== */
[b-ro0svhsnqi] .filter-field {
    display: flex;
    flex-direction: column;
    gap: var(--radius-sm);
}

[b-ro0svhsnqi] .filter-field > svg:not(.filter-input-icon) {
    display: none;
}

[b-ro0svhsnqi] .filter-input-wrapper {
    position: relative;
    width: 100%;
}

[b-ro0svhsnqi] .filter-input-icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    pointer-events: none;
}

[b-ro0svhsnqi] .filter-input,
[b-ro0svhsnqi] input[type="text"].filter-input,
[b-ro0svhsnqi] .filter-input-wrapper input {
    height: 40px !important;
    box-sizing: border-box;
}

/* ==========================================================================
   MODERN DROPDOWN — Custom select replacement
   ========================================================================== */
[b-ro0svhsnqi] .modern-dropdown {
    position: relative;
    width: 100%;
}

[b-ro0svhsnqi] .modern-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0 var(--space-3);
    height: 44px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.2s cubic-bezier(.4, 0, .2, 1),
                box-shadow 0.2s cubic-bezier(.4, 0, .2, 1),
                background 0.2s cubic-bezier(.4, 0, .2, 1);
    box-sizing: border-box;
}

[b-ro0svhsnqi] .modern-dropdown-trigger:hover {
    border-color: var(--color-border-secondary);
    background: var(--color-bg-secondary);
}

[b-ro0svhsnqi] .modern-dropdown.open .modern-dropdown-trigger {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
    background: var(--color-bg-primary);
}

[b-ro0svhsnqi] .modern-dropdown-icon {
    width: var(--space-4);
    height: var(--space-4);
    color: var(--color-text-secondary);
    flex-shrink: 0;
    transition: color 0.2s;
}

[b-ro0svhsnqi] .modern-dropdown.open .modern-dropdown-icon {
    color: var(--color-primary);
}

[b-ro0svhsnqi] .modern-dropdown-text {
    flex: 1;
    font-size: 14px;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-ro0svhsnqi] .modern-dropdown-chevron {
    width: 14px;
    height: 14px;
    color: var(--color-text-muted);
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.2s;
}

[b-ro0svhsnqi] .modern-dropdown.open .modern-dropdown-chevron {
    transform: rotate(180deg);
    color: var(--color-primary);
}

[b-ro0svhsnqi] .modern-dropdown-menu {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    max-height: 280px;
    overflow-y: auto;
    animation: rise-b-ro0svhsnqi 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
    padding: var(--space-1) 0;
}

[b-ro0svhsnqi] .modern-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 0.15s cubic-bezier(.4, 0, .2, 1);
    border-radius: var(--radius-sm);
    margin: 1px var(--space-1);
}

[b-ro0svhsnqi] .modern-dropdown-item:hover {
    background-color: var(--color-bg-secondary);
}

[b-ro0svhsnqi] .modern-dropdown-item.selected {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

[b-ro0svhsnqi] .modern-dropdown-check {
    width: 14px;
    height: 14px;
    color: var(--color-primary);
    flex-shrink: 0;
}

/* ==========================================================================
   Alert Enhancements
   ========================================================================== */
.admin-alert[b-ro0svhsnqi] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.admin-alert-icon[b-ro0svhsnqi] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.admin-alert-dismiss[b-ro0svhsnqi] {
    margin-left: auto;
    background: transparent;
    border: none;
    padding: var(--space-1);
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: inherit;
    opacity: 0.6;
    transition: opacity 200ms;
}

.admin-alert-dismiss:hover[b-ro0svhsnqi] {
    opacity: 1;
}

.admin-alert-dismiss svg[b-ro0svhsnqi] {
    width: 16px;
    height: 16px;
}

.admin-alert-link[b-ro0svhsnqi] {
    color: inherit;
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-left: var(--space-2);
}

.admin-alert-link:hover[b-ro0svhsnqi] {
    text-decoration-thickness: 2px;
}

/* ==========================================================================
   Loading Skeleton
   ========================================================================== */
.admin-loading-state[b-ro0svhsnqi] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.admin-skeleton-row[b-ro0svhsnqi] {
    display: grid;
    grid-template-columns: 40px 1fr 96px;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-primary);
}

.admin-skeleton-row:first-child[b-ro0svhsnqi] {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.admin-skeleton-row:last-child[b-ro0svhsnqi] {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.admin-skeleton[b-ro0svhsnqi] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 37%, var(--color-bg-tertiary) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer-b-ro0svhsnqi 1.8s ease infinite;
    border-radius: var(--radius-sm);
}

.admin-skeleton-badge[b-ro0svhsnqi] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
}

.admin-skeleton-text[b-ro0svhsnqi] {
    width: 100%;
    max-width: 220px;
    height: 16px;
}

.admin-skeleton-text-sm[b-ro0svhsnqi] {
    width: 80px;
    height: 24px;
    border-radius: var(--radius-full);
}

/* Link button */
.admin-link-btn[b-ro0svhsnqi] {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
    text-underline-offset: 2px;
}

.admin-link-btn:hover[b-ro0svhsnqi] {
    color: var(--color-primary-hover);
    text-decoration-thickness: 2px;
}

/* ==========================================================================
   PAGINATION — 2026 Design
   ========================================================================== */
.al2-pagination[b-ro0svhsnqi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border-primary);
    background: var(--color-bg-secondary);
}

.al2-pagination-info[b-ro0svhsnqi] {
    font-family: var(--font-family-base);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-muted);
    white-space: nowrap;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}

.al2-pagination-controls[b-ro0svhsnqi] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.al2-page-nav[b-ro0svhsnqi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all 0.2s cubic-bezier(.4, 0, .2, 1);
    flex-shrink: 0;
}

.al2-page-nav svg[b-ro0svhsnqi] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.al2-page-nav:hover:not(:disabled)[b-ro0svhsnqi] {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.al2-page-nav:active:not(:disabled)[b-ro0svhsnqi] {
    transform: translateY(0);
    box-shadow: none;
}

.al2-page-nav:disabled[b-ro0svhsnqi] {
    opacity: 0.25;
    cursor: default;
}

.al2-page-numbers[b-ro0svhsnqi] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.al2-page-num[b-ro0svhsnqi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 4px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-family: var(--font-family-base);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    color: var(--color-text-secondary);
    transition: all 0.2s cubic-bezier(.4, 0, .2, 1);
    font-variant-numeric: tabular-nums;
}

.al2-page-num:hover:not(.active)[b-ro0svhsnqi] {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary);
}

.al2-page-num.active[b-ro0svhsnqi] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: 600;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-primary);
}

.al2-page-ellipsis[b-ro0svhsnqi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 36px;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    user-select: none;
}

.al2-page-size[b-ro0svhsnqi] {
    height: 36px;
    padding: 0 30px 0 12px;
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    font-family: var(--font-family-base);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 3.75L5 6.25L7.5 3.75' stroke='%2394A3B8' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: all 0.2s cubic-bezier(.4, 0, .2, 1);
    font-variant-numeric: tabular-nums;
}

.al2-page-size:hover[b-ro0svhsnqi] {
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
    background-color: var(--color-bg-secondary);
}

.al2-page-size:focus[b-ro0svhsnqi] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
    background-color: var(--color-bg-primary);
}

/* ==========================================================================
   MODAL FORM — Flat layout, no card-in-modal
   ========================================================================== */
.admin-line-form[b-ro0svhsnqi] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Form fields section */
.line-form-fields[b-ro0svhsnqi] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding-bottom: var(--space-5);
}

.line-form-field[b-ro0svhsnqi] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.line-form-label[b-ro0svhsnqi] {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.line-form-req[b-ro0svhsnqi] {
    color: var(--color-error);
    font-weight: var(--font-weight-bold);
}

.line-form-input[b-ro0svhsnqi] {
    width: 100%;
    height: 40px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    transition: border-color 200ms, box-shadow 200ms;
    box-sizing: border-box;
    font-family: inherit;
}

.line-form-input:hover[b-ro0svhsnqi] {
    border-color: var(--color-border-secondary);
}

.line-form-input:focus[b-ro0svhsnqi] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.line-form-input[b-ro0svhsnqi]::placeholder {
    color: var(--color-text-muted);
}

[b-ro0svhsnqi] .line-form-input {
    width: 100%;
    height: 40px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    transition: border-color 200ms, box-shadow 200ms;
    box-sizing: border-box;
    font-family: inherit;
}

[b-ro0svhsnqi] .line-form-input:hover {
    border-color: var(--color-border-secondary);
}

[b-ro0svhsnqi] .line-form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

[b-ro0svhsnqi] .line-form-input::placeholder {
    color: var(--color-text-muted);
}

.line-form-grid[b-ro0svhsnqi] {
    display: grid;
    gap: var(--space-5);
}

.line-form-grid-2[b-ro0svhsnqi] {
    grid-template-columns: repeat(2, 1fr);
}

.line-form-hint[b-ro0svhsnqi] {
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Toggle — Apple-style */
.line-form-toggle-row[b-ro0svhsnqi] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[b-ro0svhsnqi] .line-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    user-select: none;
}

[b-ro0svhsnqi] .line-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.line-toggle-track[b-ro0svhsnqi] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 40px;
    height: 22px;
    background: var(--color-border-secondary);
    border-radius: var(--radius-full);
    transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.line-toggle-thumb[b-ro0svhsnqi] {
    position: absolute;
    left: 3px;
    width: 16px;
    height: 16px;
    background: var(--color-bg-primary);
    border-radius: var(--radius-full);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

[b-ro0svhsnqi] .line-toggle-input:checked ~ .line-toggle-track {
    background: var(--color-primary);
    box-shadow: 0 2px 8px rgba(26, 124, 202, 0.25);
}

[b-ro0svhsnqi] .line-toggle-input:checked ~ .line-toggle-track .line-toggle-thumb {
    transform: translateX(18px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

[b-ro0svhsnqi] .line-toggle-input:focus-visible ~ .line-toggle-track {
    box-shadow: var(--shadow-focus);
}

.line-toggle-label[b-ro0svhsnqi] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

/* ==========================================================================
   DIRECTION SECTIONS — Clean headers
   ========================================================================== */
.line-direction-section[b-ro0svhsnqi] {
    border-top: 1px solid var(--color-border-primary);
    padding-top: var(--space-5);
    animation: rise-b-ro0svhsnqi 0.35s cubic-bezier(.4, 0, .2, 1) both;
}

.line-direction-header[b-ro0svhsnqi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.line-direction-header-left[b-ro0svhsnqi] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.line-direction-icon[b-ro0svhsnqi] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.line-direction-icon-a[b-ro0svhsnqi] {
    color: var(--color-primary);
}

.line-direction-icon-b[b-ro0svhsnqi] {
    color: var(--color-warning);
}

.line-direction-title[b-ro0svhsnqi] {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.line-direction-count[b-ro0svhsnqi] {
    margin-left: var(--space-1);
    padding: 2px 8px;
    background: var(--color-info-light);
    color: var(--color-primary);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
}

/* ==========================================================================
   STATIONS EDITOR — Timeline Visual
   ========================================================================== */
.admin-stations-editor[b-ro0svhsnqi] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.admin-stations-list[b-ro0svhsnqi] {
    max-height: 260px;
    min-height: 72px;
    overflow-y: auto;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    padding: 6px;
}

.admin-stations-list[b-ro0svhsnqi]::-webkit-scrollbar {
    width: 5px;
}

.admin-stations-list[b-ro0svhsnqi]::-webkit-scrollbar-track {
    background: transparent;
}

.admin-stations-list[b-ro0svhsnqi]::-webkit-scrollbar-thumb {
    background: var(--color-border-secondary);
    border-radius: 3px;
}

.admin-stations-list[b-ro0svhsnqi]::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

.admin-stations-empty[b-ro0svhsnqi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--space-6) var(--space-4);
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
}

.admin-stations-empty svg[b-ro0svhsnqi] {
    width: 24px;
    height: 24px;
    opacity: 0.35;
}

.admin-station-item[b-ro0svhsnqi] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px var(--space-3);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    margin-bottom: 2px;
    transition: background 200ms;
    position: relative;
}

.admin-station-item:last-child[b-ro0svhsnqi] {
    margin-bottom: 0;
}

.admin-station-item:hover[b-ro0svhsnqi] {
    background: var(--color-bg-secondary);
}

.admin-station-item:not(:last-child)[b-ro0svhsnqi]::after {
    content: '';
    position: absolute;
    left: 25px;
    top: calc(50% + 14px);
    bottom: -3px;
    width: 2px;
    background: var(--color-border-primary);
}

.admin-station-order[b-ro0svhsnqi] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-radius: 50%;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    z-index: 1;
    box-shadow: 0 0 0 3px var(--color-bg-primary);
}

.admin-station-name[b-ro0svhsnqi] {
    flex: 1;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-station-actions[b-ro0svhsnqi] {
    display: flex;
    gap: 2px;
    align-items: center;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 200ms;
}

.admin-station-item:hover .admin-station-actions[b-ro0svhsnqi] {
    opacity: 1;
}

.admin-station-btn[b-ro0svhsnqi] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-text-muted);
    transition: background 200ms, border-color 200ms, color 200ms;
}

.admin-station-btn:hover[b-ro0svhsnqi] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.admin-station-btn svg[b-ro0svhsnqi] {
    width: 13px;
    height: 13px;
}

.admin-station-btn-remove[b-ro0svhsnqi] {
    color: var(--color-error);
    opacity: 0.6;
}

.admin-station-btn-remove:hover[b-ro0svhsnqi] {
    background: var(--color-error-light);
    border-color: var(--color-error);
    color: var(--color-error);
    opacity: 1;
}

/* ==========================================================================
   STATION SEARCH DROPDOWN
   ========================================================================== */
.admin-station-search[b-ro0svhsnqi] {
    position: relative;
}

.admin-station-search-input[b-ro0svhsnqi] {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
}

.admin-station-search-input .admin-input-simple[b-ro0svhsnqi],
.admin-station-search-input .line-form-input[b-ro0svhsnqi] {
    flex: 1;
}

.admin-station-search-toggle[b-ro0svhsnqi] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    min-width: 48px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background 200ms, border-color 200ms, color 200ms;
}

.admin-station-search-toggle:hover[b-ro0svhsnqi] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.admin-station-search-toggle svg[b-ro0svhsnqi] {
    width: 14px;
    height: 14px;
}

.admin-station-dropdown[b-ro0svhsnqi] {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    right: 0;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-height: 260px;
    overflow-y: auto;
    z-index: var(--z-dropdown);
    animation: rise-b-ro0svhsnqi 0.2s cubic-bezier(.4, 0, .2, 1) both;
}

.admin-station-dropdown-item[b-ro0svhsnqi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 200ms;
    font-family: inherit;
}

.admin-station-dropdown-item:hover[b-ro0svhsnqi],
.admin-station-dropdown-item.highlighted[b-ro0svhsnqi] {
    background: var(--color-bg-secondary);
}

.admin-station-dropdown-name[b-ro0svhsnqi] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.admin-station-dropdown-zone[b-ro0svhsnqi] {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    padding: 2px var(--space-2);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
}

.admin-station-dropdown-more[b-ro0svhsnqi] {
    padding: 10px 14px;
    text-align: center;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    background: var(--color-bg-secondary);
}

/* ==========================================================================
   INFO BOX
   ========================================================================== */
.admin-info-box[b-ro0svhsnqi] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-info-light);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    color: var(--color-info);
}

.admin-info-box svg[b-ro0svhsnqi] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

.admin-info-box span[b-ro0svhsnqi] {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
}

/* ==========================================================================
   MODAL ERROR
   ========================================================================== */
.admin-modal-error[b-ro0svhsnqi] {
    padding: var(--space-3) var(--space-4);
    background: var(--color-error-light);
    border: 1px solid var(--color-error-bright);
    border-radius: var(--radius-md);
    color: var(--color-error);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-4);
    animation: rise-b-ro0svhsnqi 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

/* ==========================================================================
   FORM ACTIONS — Delete left, Cancel+Save right
   ========================================================================== */
.line-form-actions[b-ro0svhsnqi] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-primary);
    margin-top: var(--space-5);
}

.line-form-actions-right[b-ro0svhsnqi] {
    display: flex;
    gap: var(--space-3);
    margin-left: auto;
}

.line-delete-btn[b-ro0svhsnqi] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-error);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background 200ms, color 200ms;
    font-family: inherit;
}

.line-delete-btn:hover[b-ro0svhsnqi] {
    background: var(--color-error-light);
}

.line-delete-btn svg[b-ro0svhsnqi] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.line-cancel-btn[b-ro0svhsnqi] {
    height: 38px;
    padding: 0 var(--space-5);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 200ms, border-color 200ms, color 200ms;
    font-family: inherit;
}

.line-cancel-btn:hover[b-ro0svhsnqi] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.line-save-btn[b-ro0svhsnqi] {
    height: 38px;
    padding: 0 var(--space-5);
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-inverse);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: background 200ms, border-color 200ms;
    font-family: inherit;
}

.line-save-btn:hover[b-ro0svhsnqi] {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.line-save-btn svg[b-ro0svhsnqi] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Keep old input styles for station search which still uses admin-input-simple */
[b-ro0svhsnqi] .admin-input-simple {
    width: 100%;
    height: 40px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    transition: border-color 200ms, box-shadow 200ms;
    box-sizing: border-box;
}

[b-ro0svhsnqi] .admin-input-simple:hover {
    border-color: var(--color-border-secondary);
}

[b-ro0svhsnqi] .admin-input-simple:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

[b-ro0svhsnqi] .admin-input-simple::placeholder {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-normal);
}

/* Old label styles kept for station search */
.admin-form-field-label[b-ro0svhsnqi] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 20px;
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

/* ==========================================================================
   MOBILE — Card Layout (991.98px)
   ========================================================================== */
@media (max-width: 991.98px) {
    .admin-table-card[b-ro0svhsnqi] {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        margin-top: var(--space-4);
        box-shadow: none !important;
        overflow: visible !important;
    }

    [b-ro0svhsnqi] .admin-table-header,
    [b-ro0svhsnqi] .admin-table-header.admin-auto-grid {
        display: none !important;
    }

    [b-ro0svhsnqi] .admin-table-rows {
        gap: var(--space-3) !important;
    }

    [b-ro0svhsnqi] .admin-table-row,
    [b-ro0svhsnqi] .admin-table-container .admin-table-row {
        border-radius: var(--radius-lg) !important;
        padding: var(--space-4) !important;
        background: var(--color-bg-primary) !important;
        border: 1px solid var(--color-border-primary) !important;
        box-shadow: var(--shadow-sm) !important;
    }

    [b-ro0svhsnqi] .admin-table-row:hover {
        transform: none !important;
    }

    [b-ro0svhsnqi] .admin-grid-cols-3 {
        min-width: 0 !important;
    }

    [b-ro0svhsnqi] .admin-table-row-content,
    [b-ro0svhsnqi] .admin-table-row-content.admin-auto-grid,
    [b-ro0svhsnqi] .admin-table-row-content.admin-auto-grid.admin-grid-cols-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-3) !important;
        padding: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    [b-ro0svhsnqi] .admin-auto-grid .admin-table-cell,
    [b-ro0svhsnqi] .admin-auto-grid .admin-table-cell-primary {
        display: flex !important;
        padding: 0 !important;
        width: 100% !important;
    }

    [b-ro0svhsnqi] .admin-auto-grid .admin-table-cell::before,
    [b-ro0svhsnqi] .admin-auto-grid .admin-table-cell-primary::before {
        display: none !important;
    }

    .line-row-chevron[b-ro0svhsnqi] {
        display: none;
    }

    .admin-station-actions[b-ro0svhsnqi] {
        opacity: 1;
    }

    .al2-pagination[b-ro0svhsnqi] {
        background: var(--color-bg-primary);
        border: 1px solid var(--color-border-primary);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        margin-top: var(--space-3);
        padding: var(--space-3) var(--space-4);
        border-top: none;
    }
}

/* ==========================================================================
   SMALL SCREENS (767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {
    .admin-skeleton-row[b-ro0svhsnqi] {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .admin-skeleton-badge[b-ro0svhsnqi] {
        width: 100%;
        max-width: none;
    }

    .line-form-actions[b-ro0svhsnqi] {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .line-form-actions-right[b-ro0svhsnqi] {
        flex-direction: column-reverse;
        margin-left: 0;
    }

    .line-cancel-btn[b-ro0svhsnqi],
    .line-save-btn[b-ro0svhsnqi],
    .line-delete-btn[b-ro0svhsnqi] {
        width: 100%;
        justify-content: center;
    }

    .line-form-grid-2[b-ro0svhsnqi] {
        grid-template-columns: 1fr;
    }

    .admin-station-item[b-ro0svhsnqi] {
        flex-wrap: wrap;
    }

    .admin-station-item:not(:last-child)[b-ro0svhsnqi]::after {
        display: none;
    }

    .admin-station-name[b-ro0svhsnqi] {
        flex-basis: calc(100% - 100px);
    }

    .admin-station-actions[b-ro0svhsnqi] {
        width: 100%;
        justify-content: flex-end;
        margin-top: var(--space-2);
        padding-top: var(--space-2);
        opacity: 1;
    }

    .al2-page-numbers[b-ro0svhsnqi] {
        display: none;
    }

    .al2-pagination[b-ro0svhsnqi] {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-3);
    }

    .al2-pagination-info[b-ro0svhsnqi] {
        width: 100%;
        text-align: center;
        order: -1;
    }

    .al2-page-size[b-ro0svhsnqi] {
        order: 3;
    }

    [b-ro0svhsnqi] .filter-field {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .al2-pagination[b-ro0svhsnqi] {
        padding: var(--space-3);
    }

    .admin-station-search-input[b-ro0svhsnqi] {
        flex-direction: column;
    }

    .admin-station-search-toggle[b-ro0svhsnqi] {
        width: 100%;
        height: 40px;
    }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .admin-skeleton[b-ro0svhsnqi],
    [b-ro0svhsnqi] .admin-table-row,
    .admin-station-item[b-ro0svhsnqi],
    .admin-station-actions[b-ro0svhsnqi],
    .admin-station-btn[b-ro0svhsnqi],
    .admin-station-dropdown-item[b-ro0svhsnqi],
    .admin-station-search-toggle[b-ro0svhsnqi],
    .admin-alert-dismiss[b-ro0svhsnqi],
    .al2-page-nav[b-ro0svhsnqi],
    .al2-page-num[b-ro0svhsnqi],
    .al2-page-size[b-ro0svhsnqi],
    .line-avatar[b-ro0svhsnqi],
    .line-row-chevron[b-ro0svhsnqi],
    .line-form-input[b-ro0svhsnqi],
    .line-cancel-btn[b-ro0svhsnqi],
    .line-save-btn[b-ro0svhsnqi],
    .line-delete-btn[b-ro0svhsnqi],
    .line-toggle-track[b-ro0svhsnqi],
    .line-toggle-thumb[b-ro0svhsnqi] {
        transition: none;
        animation: none;
    }

    [b-ro0svhsnqi] .modern-dropdown-trigger,
    [b-ro0svhsnqi] .modern-dropdown-icon,
    [b-ro0svhsnqi] .modern-dropdown-chevron,
    [b-ro0svhsnqi] .modern-dropdown-item {
        transition: none;
    }

    [b-ro0svhsnqi] .modern-dropdown-menu {
        animation: none;
    }

    .admin-table-card[b-ro0svhsnqi],
    .line-direction-section[b-ro0svhsnqi],
    .admin-station-dropdown[b-ro0svhsnqi],
    .admin-modal-error[b-ro0svhsnqi] {
        animation: none;
    }
}

/* ==========================================================================
   FOCUS STATES
   ========================================================================== */
.admin-station-btn:focus-visible[b-ro0svhsnqi],
.admin-station-dropdown-item:focus-visible[b-ro0svhsnqi],
.admin-station-search-toggle:focus-visible[b-ro0svhsnqi],
.admin-link-btn:focus-visible[b-ro0svhsnqi],
.admin-alert-dismiss:focus-visible[b-ro0svhsnqi],
.al2-page-nav:focus-visible[b-ro0svhsnqi],
.al2-page-num:focus-visible[b-ro0svhsnqi],
.al2-page-size:focus-visible[b-ro0svhsnqi],
.line-cancel-btn:focus-visible[b-ro0svhsnqi],
.line-save-btn:focus-visible[b-ro0svhsnqi],
.line-delete-btn:focus-visible[b-ro0svhsnqi] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

[b-ro0svhsnqi] .line-form-input:focus-visible,
[b-ro0svhsnqi] .admin-input-simple:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

[b-ro0svhsnqi] .modern-dropdown:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-md);
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .al2-pagination[b-ro0svhsnqi] {
        display: none !important;
    }

    .admin-table-card[b-ro0svhsnqi] {
        border: 1px solid #ddd;
        box-shadow: none;
        background: var(--color-bg-primary);
    }
}
/* /Components/Pages/Admin/AdminNotifications.razor.rz.scp.css */
/* ========================================
   ADMIN NOTIFICATIONS — 2026 Design System
   Solid surfaces, design tokens, rise animation
   Matches: AdminValidationLogs / AdminQrTokenUses / AdminActivityLogs patterns
   ======================================== */

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes rise-b-a0qabgpzni {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-shimmer-b-a0qabgpzni {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   FILTER LAYOUT — 4 filters on one row (desktop)
   ========================================================================== */
@media (min-width: 992px) {
    [b-a0qabgpzni] .admin-page-header.notifications-header .aph-filters-content {
        grid-template-columns:
            minmax(180px, 1.5fr)
            minmax(160px, 1fr)
            minmax(160px, 1fr)
            minmax(160px, 1fr);
        gap: var(--space-4);
        align-items: end;
        min-width: 0;
    }

    .admin-page.admin-standard .filter-field[b-a0qabgpzni] {
        min-width: 0 !important;
    }

    .admin-page.admin-standard .filter-input-wrapper[b-a0qabgpzni] {
        min-width: 0;
    }

    .admin-page.admin-standard .filter-field[b-a0qabgpzni]  .app-datepicker {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ==========================================================================
   FILTER FIELD ENHANCEMENTS
   ========================================================================== */
[b-a0qabgpzni] .filter-field {
    display: flex;
    flex-direction: column;
    gap: var(--radius-sm);
}

[b-a0qabgpzni] .filter-input-wrapper {
    position: relative;
    width: 100%;
}

[b-a0qabgpzni] .filter-input-icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    pointer-events: none;
}

[b-a0qabgpzni] .filter-input,
[b-a0qabgpzni] input[type="text"].filter-input,
[b-a0qabgpzni] input[type="number"].filter-input,
[b-a0qabgpzni] .filter-input-wrapper input {
    height: 40px !important;
    box-sizing: border-box;
}

[b-a0qabgpzni] .filter-field-label {
    min-height: var(--space-5);
    line-height: var(--space-5);
    display: block;
}

/* ==========================================================================
   TABLE CARD — Solid surface, bordered, no glassmorphism
   ========================================================================== */
.admin-table-card[b-a0qabgpzni] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    margin-top: var(--space-5);
    box-shadow: var(--shadow-sm);
    animation: rise-b-a0qabgpzni 0.45s cubic-bezier(.4, 0, .2, 1) both;
    overflow: hidden;
}

[b-a0qabgpzni] .admin-table-container {
    margin-top: 0;
}

[b-a0qabgpzni] .admin-table-header {
    background: var(--color-bg-secondary);
    margin-bottom: 0;
    padding: var(--space-4) 0;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border-primary);
}

[b-a0qabgpzni] .admin-table-rows {
    gap: 0;
}

[b-a0qabgpzni] .admin-table-row {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    padding: 0 var(--space-3) 0 0;
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

[b-a0qabgpzni] .admin-table-row:hover {
    background: var(--color-bg-secondary);
    box-shadow: none;
    transform: none;
}

[b-a0qabgpzni] .admin-table-row:focus-visible {
    box-shadow: var(--shadow-focus);
    outline: none;
    z-index: 1;
    position: relative;
}

[b-a0qabgpzni] .admin-table-row:not(:last-child) {
    box-shadow: inset 0 -1px 0 var(--color-border-primary);
}

/* Alerts */
.admin-container[b-a0qabgpzni] >  .app-alert {
    margin-bottom: var(--space-5);
}

/* ==========================================================================
   GRID — 8 columns: ID, Title, Category, Sender, Created, Recipients, Read, Deleted
   ========================================================================== */
[b-a0qabgpzni] .nt-grid {
    grid-template-columns:
        72px                  /* ID */
        minmax(160px, 2.2fr)  /* Title */
        minmax(120px, 1.2fr)  /* Category */
        minmax(120px, 1.2fr)  /* Sender */
        minmax(130px, 1fr)    /* Created */
        80px                  /* Recipients */
        80px                  /* Read */
        80px;                 /* Deleted */
}

/* ==========================================================================
   ID Badge
   ========================================================================== */
.nt-id-badge[b-a0qabgpzni] {
    display: inline-flex;
    align-items: center;
    font-family: 'SF Mono', 'Cascadia Code', 'Courier New', monospace;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    letter-spacing: 0.3px;
}

/* ==========================================================================
   Title — truncated in table
   ========================================================================== */
.nt-title[b-a0qabgpzni] {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

/* ==========================================================================
   Category Badges — Semantic color coding
   ========================================================================== */
.nt-category-badge[b-a0qabgpzni] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.nt-cat--general[b-a0qabgpzni]      { background: rgba(26, 124, 202, 0.1);  color: #2563eb; }
.nt-cat--alert[b-a0qabgpzni]        { background: rgba(245, 158, 11, 0.1);  color: #b45309; }
.nt-cat--ticket[b-a0qabgpzni]       { background: rgba(16, 185, 129, 0.1);  color: #16a34a; }
.nt-cat--wallet[b-a0qabgpzni]       { background: rgba(59, 130, 246, 0.1);  color: #2563eb; }
.nt-cat--announce[b-a0qabgpzni]     { background: rgba(139, 92, 246, 0.1);  color: #7c3aed; }
.nt-cat--promo[b-a0qabgpzni]        { background: rgba(236, 72, 153, 0.1);  color: #db2777; }
.nt-cat--system[b-a0qabgpzni]       { background: rgba(100, 116, 139, 0.1); color: #64748b; }
.nt-cat--schedule[b-a0qabgpzni]     { background: rgba(13, 148, 136, 0.1);  color: #0d9488; }
.nt-cat--maintenance[b-a0qabgpzni]  { background: rgba(180, 83, 9, 0.1);    color: #b45309; }
.nt-cat--safety[b-a0qabgpzni]       { background: rgba(220, 38, 38, 0.1);   color: #dc2626; }
.nt-cat--accessibility[b-a0qabgpzni] { background: rgba(99, 102, 241, 0.1); color: #6366f1; }
.nt-cat--crowding[b-a0qabgpzni]     { background: rgba(245, 158, 11, 0.1);  color: #d97706; }
.nt-cat--trip[b-a0qabgpzni]         { background: rgba(16, 185, 129, 0.1);  color: #059669; }
.nt-cat--security[b-a0qabgpzni]     { background: rgba(75, 85, 99, 0.1);    color: #4b5563; }

/* ==========================================================================
   Sender — truncated
   ========================================================================== */
.nt-sender[b-a0qabgpzni] {
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

/* ==========================================================================
   Timestamp
   ========================================================================== */
.nt-timestamp[b-a0qabgpzni] {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* ==========================================================================
   Count badges (Recipients, Read, Deleted)
   ========================================================================== */
.nt-count[b-a0qabgpzni] {
    font-family: var(--font-family-base);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.nt-count--success[b-a0qabgpzni] {
    color: #16a34a;
}

.nt-count--error[b-a0qabgpzni] {
    color: #dc2626;
}

/* ==========================================================================
   DETAIL MODAL — Structured sections
   ========================================================================== */
.nt-detail-modal[b-a0qabgpzni] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Detail Section — Solid bordered card */
.nt-detail-section[b-a0qabgpzni] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-md);
    overflow: hidden;
    animation: rise-b-a0qabgpzni 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

.nt-detail-section-title[b-a0qabgpzni] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
}

.nt-detail-section-title svg[b-a0qabgpzni] {
    width: 18px;
    height: 18px;
    color: var(--color-primary);
    flex-shrink: 0;
}

/* Detail Grid — 2-column layout for key-value pairs */
.nt-detail-grid[b-a0qabgpzni] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.nt-detail-field[b-a0qabgpzni] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-primary);
}

.nt-detail-field:nth-child(odd)[b-a0qabgpzni] {
    border-right: 1px solid var(--color-border-primary);
}

.nt-detail-grid .nt-detail-field:nth-last-child(1)[b-a0qabgpzni],
.nt-detail-grid .nt-detail-field:nth-last-child(2)[b-a0qabgpzni] {
    border-bottom: none;
}

.nt-detail-grid .nt-detail-field:last-child:nth-child(odd)[b-a0qabgpzni] {
    border-right: none;
}

.nt-detail-field-label[b-a0qabgpzni] {
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nt-detail-field-value[b-a0qabgpzni] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    word-break: break-word;
}

/* Email subtext in detail modal */
.nt-detail-email[b-a0qabgpzni] {
    display: block;
    font-size: 12px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    margin-top: 2px;
    word-break: break-all;
}

/* Message blocks (Title, Body, LinkUrl in detail) */
.nt-detail-message[b-a0qabgpzni] {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border-primary);
}

.nt-detail-message-text[b-a0qabgpzni] {
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    margin: var(--space-2) 0 0 0;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}

.nt-detail-title-text[b-a0qabgpzni] {
    font-weight: var(--font-weight-semibold);
}

.nt-detail-link[b-a0qabgpzni] {
    display: block;
    font-size: 13px;
    color: var(--color-primary);
    text-decoration: none;
    margin-top: var(--space-2);
    word-break: break-all;
}

.nt-detail-link:hover[b-a0qabgpzni] {
    text-decoration: underline;
}

/* ==========================================================================
   RECIPIENTS LIST (in detail modal)
   ========================================================================== */
.nt-recipients-list[b-a0qabgpzni] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.nt-recipient-row[b-a0qabgpzni] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

.nt-recipient-row:not(:last-child)[b-a0qabgpzni] {
    border-bottom: 1px solid var(--color-border-primary);
}

.nt-recipient-row:hover[b-a0qabgpzni] {
    background: var(--color-bg-secondary);
}

.nt-recipient-info[b-a0qabgpzni] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nt-recipient-email[b-a0qabgpzni] {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nt-recipient-meta[b-a0qabgpzni] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.nt-recipient-id[b-a0qabgpzni] {
    font-size: 11px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.nt-recipient-status[b-a0qabgpzni] {
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
}

.nt-status--success[b-a0qabgpzni] { color: #16a34a; }
.nt-status--error[b-a0qabgpzni] { color: #dc2626; }

.nt-recipient-delete-btn[b-a0qabgpzni] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    background: transparent;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-text-muted);
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1);
    flex-shrink: 0;
}

.nt-recipient-delete-btn svg[b-a0qabgpzni] {
    width: 14px;
    height: 14px;
}

.nt-recipient-delete-btn:hover:not(:disabled)[b-a0qabgpzni] {
    background: rgba(220, 38, 38, 0.06);
    border-color: rgba(220, 38, 38, 0.2);
    color: #dc2626;
}

.nt-recipient-delete-btn:disabled[b-a0qabgpzni] {
    opacity: 0.4;
    cursor: default;
}

/* Delete all button in section title */
.nt-delete-all-btn[b-a0qabgpzni] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-text-muted);
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1);
    flex-shrink: 0;
}

.nt-delete-all-btn svg[b-a0qabgpzni] {
    width: 14px;
    height: 14px;
}

.nt-delete-all-btn:hover:not(:disabled)[b-a0qabgpzni] {
    background: rgba(220, 38, 38, 0.06);
    border-color: rgba(220, 38, 38, 0.2);
    color: #dc2626;
}

.nt-delete-all-btn:disabled[b-a0qabgpzni] {
    opacity: 0.4;
    cursor: default;
}

.nt-recipients-empty[b-a0qabgpzni] {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0;
    padding: var(--space-5) var(--space-4);
    text-align: center;
}

/* ==========================================================================
   SEND FORM — INLINE TOAST ALERTS
   ========================================================================== */
.nt-toast[b-a0qabgpzni] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-lg, 10px);
    font-size: 13px;
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.4;
    animation: ntToastIn-b-a0qabgpzni 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes ntToastIn-b-a0qabgpzni {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nt-toast-success[b-a0qabgpzni] {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #047857;
}

.nt-toast-error[b-a0qabgpzni] {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #b91c1c;
}

.nt-toast-icon[b-a0qabgpzni] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md, 8px);
}

.nt-toast-success .nt-toast-icon[b-a0qabgpzni] {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.nt-toast-error .nt-toast-icon[b-a0qabgpzni] {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.nt-toast-text[b-a0qabgpzni] {
    flex: 1;
    min-width: 0;
}

.nt-toast-dismiss[b-a0qabgpzni] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.2s;
}

.nt-toast-dismiss:hover[b-a0qabgpzni] {
    opacity: 1;
}

.nt-toast-success .nt-toast-dismiss[b-a0qabgpzni] {
    color: #047857;
}

.nt-toast-success .nt-toast-dismiss:hover[b-a0qabgpzni] {
    background: rgba(16, 185, 129, 0.12);
}

.nt-toast-error .nt-toast-dismiss[b-a0qabgpzni] {
    color: #b91c1c;
}

.nt-toast-error .nt-toast-dismiss:hover[b-a0qabgpzni] {
    background: rgba(239, 68, 68, 0.12);
}

/* ==========================================================================
   SEND FORM (inside modal)
   ========================================================================== */
.nt-form[b-a0qabgpzni] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.nt-field[b-a0qabgpzni] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nt-label[b-a0qabgpzni] {
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nt-input[b-a0qabgpzni] {
    height: 40px;
    padding: 0 14px;
    font-family: var(--font-family-base);
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1), box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
    outline: none;
    box-sizing: border-box;
    line-height: 1.4;
    width: 100%;
}

.nt-input:focus[b-a0qabgpzni] {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.nt-input[b-a0qabgpzni]::placeholder {
    color: var(--color-text-muted);
    font-weight: 400;
}

/* Textarea variants */
.nt-textarea[b-a0qabgpzni] {
    height: auto;
    min-height: 96px;
    padding: 10px 14px;
    resize: vertical;
    line-height: 1.5;
}

.nt-textarea-sm[b-a0qabgpzni] {
    height: auto;
    min-height: 56px;
    padding: 10px 14px;
    resize: vertical;
    line-height: 1.5;
}

/* AppSelect overrides inside send modal */
.nt-field[b-a0qabgpzni]  .app-select-trigger,
.nt-form-grid[b-a0qabgpzni]  .app-select-trigger {
    height: 40px !important;
    padding: 0 14px !important;
    background: var(--color-bg-primary) !important;
    border: 1px solid var(--color-border-primary) !important;
    border-radius: var(--radius-md) !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
}

.nt-field[b-a0qabgpzni]  .app-select-inner-label,
.nt-form-grid[b-a0qabgpzni]  .app-select-inner-label {
    display: none !important;
}

/* Form grid — 2 columns */
.nt-form-grid[b-a0qabgpzni] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}

.nt-form-grid .nt-field[b-a0qabgpzni] {
    min-width: 0;
}

/* Form actions */
.nt-form-actions[b-a0qabgpzni] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-2);
}

.nt-form-actions .admin-btn[b-a0qabgpzni] {
    height: 40px;
    min-height: 40px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
}

.nt-form-actions .admin-btn-primary[b-a0qabgpzni] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: none;
}

.nt-form-actions .admin-btn-primary:hover:not(:disabled)[b-a0qabgpzni] {
    background: var(--color-primary-hover);
}

.nt-form-actions .admin-btn-secondary[b-a0qabgpzni] {
    background: transparent;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-primary);
}

.nt-form-actions .admin-btn-secondary:hover:not(:disabled)[b-a0qabgpzni] {
    background: var(--color-bg-secondary);
}

.nt-form-actions .admin-btn svg[b-a0qabgpzni] {
    width: 14px;
    height: 14px;
}

/* ==========================================================================
   SKELETON LOADING STATE
   ========================================================================== */
.nt-loading-state[b-a0qabgpzni] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.nt-skeleton-row[b-a0qabgpzni] {
    display: grid;
    grid-template-columns: 72px 1fr 120px;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-primary);
}

.nt-skeleton-row:first-child[b-a0qabgpzni] {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.nt-skeleton-row:last-child[b-a0qabgpzni] {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.nt-skeleton[b-a0qabgpzni] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 37%, var(--color-bg-tertiary) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer-b-a0qabgpzni 1.8s ease infinite;
    border-radius: var(--radius-sm);
}

.nt-skeleton-badge[b-a0qabgpzni] {
    width: 52px;
    height: 28px;
    border-radius: var(--radius-sm);
}

.nt-skeleton-text[b-a0qabgpzni] {
    width: 100%;
    max-width: 180px;
    height: 16px;
}

.nt-skeleton-text-sm[b-a0qabgpzni] {
    width: 72px;
    height: 12px;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.nt-empty-state[b-a0qabgpzni] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    text-align: center;
}

.nt-empty-state-icon[b-a0qabgpzni] {
    width: 40px;
    height: 40px;
    color: var(--color-text-muted);
    opacity: 0.4;
    margin-bottom: var(--space-3);
}

.nt-empty-state-title[b-a0qabgpzni] {
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
}

.nt-empty-state-text[b-a0qabgpzni] {
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4) 0;
}

.nt-link-btn[b-a0qabgpzni] {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
    text-underline-offset: 2px;
}

.nt-link-btn:hover[b-a0qabgpzni] {
    color: var(--color-primary-hover);
    text-decoration-thickness: 2px;
}

/* ==========================================================================
   PAGINATION — 2026 Design System
   ========================================================================== */
.nt-pagination[b-a0qabgpzni] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-top: 1px solid var(--color-border-primary);
}

.nt-pagination-info[b-a0qabgpzni] {
    font-family: var(--font-family-base);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-muted);
    white-space: nowrap;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}

.nt-pagination-controls[b-a0qabgpzni] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.nt-page-nav[b-a0qabgpzni] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1);
    flex-shrink: 0;
}

.nt-page-nav svg[b-a0qabgpzni] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.nt-page-nav:hover:not(:disabled)[b-a0qabgpzni] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.nt-page-nav:disabled[b-a0qabgpzni] {
    opacity: 0.25;
    cursor: default;
}

.nt-page-numbers[b-a0qabgpzni] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.nt-page-num[b-a0qabgpzni] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 2px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-2xl);
    cursor: pointer;
    font-family: var(--font-family-base);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    color: var(--color-text-secondary);
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1);
    font-variant-numeric: tabular-nums;
}

.nt-page-num:hover:not(.active)[b-a0qabgpzni] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary);
}

.nt-page-num.active[b-a0qabgpzni] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: 600;
    border-color: var(--color-primary);
}

.nt-page-ellipsis[b-a0qabgpzni] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 34px;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    user-select: none;
}

.nt-page-size[b-a0qabgpzni] {
    height: 34px;
    padding: 0 30px 0 12px;
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    font-family: var(--font-family-base);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 3.75L5 6.25L7.5 3.75' stroke='%2394A3B8' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1);
    font-variant-numeric: tabular-nums;
}

.nt-page-size:hover[b-a0qabgpzni] {
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.nt-page-size:focus[b-a0qabgpzni] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* ==========================================================================
   MOBILE — Card Layout (991.98px)
   ========================================================================== */
@media (max-width: 991.98px) {
    .admin-table-card[b-a0qabgpzni] {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        margin-top: var(--space-4);
        box-shadow: none !important;
        overflow: visible !important;
    }

    [b-a0qabgpzni] .admin-table-header,
    [b-a0qabgpzni] .admin-table-header.admin-auto-grid {
        display: none !important;
    }

    [b-a0qabgpzni] .admin-table-rows {
        gap: var(--space-3) !important;
    }

    [b-a0qabgpzni] .admin-table-row,
    [b-a0qabgpzni] .admin-table-container .admin-table-row {
        border-radius: var(--radius-lg) !important;
        margin-bottom: 0 !important;
        padding: var(--space-4) !important;
        background: var(--color-bg-primary) !important;
        border: 1px solid var(--color-border-primary) !important;
        box-shadow: var(--shadow-sm) !important;
        flex-direction: column !important;
    }

    [b-a0qabgpzni] .admin-table-row:not(:last-child) {
        box-shadow: var(--shadow-sm) !important;
    }

    [b-a0qabgpzni] .admin-table-row:hover {
        transform: none !important;
    }

    [b-a0qabgpzni] .admin-table-row-content,
    [b-a0qabgpzni] .admin-table-row-content.admin-auto-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-2) !important;
        padding: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    [b-a0qabgpzni] .admin-auto-grid .admin-table-cell,
    [b-a0qabgpzni] .admin-auto-grid .admin-table-cell-primary,
    [b-a0qabgpzni] .admin-auto-grid .admin-table-cell-secondary {
        display: grid !important;
        grid-template-columns: 90px 1fr;
        align-items: baseline;
        gap: var(--space-3);
        padding: var(--space-1) 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        font-size: 13px;
        width: 100% !important;
        min-width: 0 !important;
    }

    [b-a0qabgpzni] .admin-auto-grid .admin-table-cell-primary {
        font-size: 14px;
        font-weight: 600;
    }

    [b-a0qabgpzni] .admin-auto-grid .admin-table-cell::before,
    [b-a0qabgpzni] .admin-auto-grid .admin-table-cell-primary::before,
    [b-a0qabgpzni] .admin-auto-grid .admin-table-cell-secondary::before {
        content: attr(data-label) !important;
        font-size: 11px;
        font-weight: 700;
        color: var(--color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }

    .nt-title[b-a0qabgpzni] {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }

    .nt-sender[b-a0qabgpzni] {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }

    .nt-category-badge[b-a0qabgpzni] {
        width: fit-content;
    }

    .nt-skeleton-row[b-a0qabgpzni] {
        grid-template-columns: 60px 1fr 96px;
    }

    .nt-skeleton-text-sm[b-a0qabgpzni] {
        display: none;
    }

    /* Pagination — own card on mobile */
    .nt-pagination[b-a0qabgpzni] {
        background: var(--color-bg-primary);
        border: 1px solid var(--color-border-primary);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        margin-top: var(--space-3);
        padding: var(--space-3) var(--space-4);
        border-top: none;
    }
}

/* ==========================================================================
   SMALL SCREENS (767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {
    [b-a0qabgpzni] .filter-field {
        width: 100%;
    }

    .nt-skeleton-row[b-a0qabgpzni] {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .nt-skeleton-badge[b-a0qabgpzni] {
        width: 100%;
        max-width: none;
    }

    /* Hide page numbers, show compact nav */
    .nt-page-numbers[b-a0qabgpzni] {
        display: none;
    }

    .nt-pagination-controls[b-a0qabgpzni] {
        gap: var(--space-2);
    }

    .nt-pagination[b-a0qabgpzni] {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-3);
    }

    .nt-pagination-info[b-a0qabgpzni] {
        width: 100%;
        text-align: center;
        order: -1;
    }

    .nt-page-size[b-a0qabgpzni] {
        order: 3;
    }

    .nt-form-grid[b-a0qabgpzni] {
        grid-template-columns: 1fr;
    }

    .nt-recipient-row[b-a0qabgpzni] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }

    .nt-recipient-delete-btn[b-a0qabgpzni] {
        align-self: flex-end;
    }
}

@media (max-width: 575.98px) {
    .nt-pagination[b-a0qabgpzni] {
        padding: var(--space-3);
    }

    /* Modal detail grid — single column on small screens */
    .nt-detail-grid[b-a0qabgpzni] {
        grid-template-columns: 1fr;
    }

    .nt-detail-field:nth-child(odd)[b-a0qabgpzni] {
        border-right: none;
    }

    .nt-detail-field[b-a0qabgpzni] {
        border-bottom: 1px solid var(--color-border-primary);
    }

    .nt-detail-grid .nt-detail-field:nth-last-child(2)[b-a0qabgpzni] {
        border-bottom: 1px solid var(--color-border-primary);
    }

    .nt-detail-grid .nt-detail-field:last-child[b-a0qabgpzni] {
        border-bottom: none;
    }

    .nt-detail-section-title[b-a0qabgpzni] {
        padding: 10px var(--space-3);
    }
}

/* ==========================================================================
   FOCUS STATES
   ========================================================================== */
.nt-link-btn:focus-visible[b-a0qabgpzni],
.nt-page-nav:focus-visible[b-a0qabgpzni],
.nt-page-num:focus-visible[b-a0qabgpzni] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.nt-page-size:focus-visible[b-a0qabgpzni] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.nt-recipient-delete-btn:focus-visible[b-a0qabgpzni],
.nt-delete-all-btn:focus-visible[b-a0qabgpzni] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .admin-table-card[b-a0qabgpzni],
    .nt-detail-section[b-a0qabgpzni] {
        animation: none;
    }

    .nt-skeleton[b-a0qabgpzni] {
        animation: none;
    }

    .nt-id-badge[b-a0qabgpzni],
    .nt-title[b-a0qabgpzni],
    .nt-category-badge[b-a0qabgpzni],
    .nt-sender[b-a0qabgpzni],
    .nt-timestamp[b-a0qabgpzni],
    .nt-count[b-a0qabgpzni],
    .nt-link-btn[b-a0qabgpzni],
    .nt-page-nav[b-a0qabgpzni],
    .nt-page-num[b-a0qabgpzni],
    .nt-page-size[b-a0qabgpzni],
    .nt-recipient-row[b-a0qabgpzni],
    .nt-recipient-delete-btn[b-a0qabgpzni],
    .nt-delete-all-btn[b-a0qabgpzni],
    [b-a0qabgpzni] .admin-table-row {
        transition: none;
    }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .nt-pagination[b-a0qabgpzni] {
        display: none !important;
    }

    .admin-table-card[b-a0qabgpzni] {
        border: 1px solid #ddd;
        box-shadow: none;
        background: var(--color-bg-primary);
    }
}
/* /Components/Pages/Admin/AdminPayments.razor.rz.scp.css */
/* ========================================
   AdminPayments — 2026 Design System
   Solid surfaces · Design tokens · rise animation
   ======================================== */

/* ----------------------------------------
   RISE ANIMATION
   ---------------------------------------- */
@keyframes rise-b-tvsilmivig {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------
   UI KIT INTEGRATION - AppAlert
   ---------------------------------------- */
.admin-container[b-tvsilmivig] >  .app-alert {
    margin-bottom: var(--space-5);
}

/* Ensure dropdown menus are visible outside containers */
[b-tvsilmivig] .admin-search-card {
    overflow: visible;
}

/* ----------------------------------------
   FILTER FIELD LAYOUT
   ---------------------------------------- */
.filter-field[b-tvsilmivig] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.filter-field-wide[b-tvsilmivig] {
    grid-column: span 2;
}

.filter-field-label[b-tvsilmivig] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: -0.01em;
    line-height: 1.35;
    min-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Filter input wrapper with icon */
.filter-input-wrapper[b-tvsilmivig] {
    position: relative;
    width: 100%;
    height: 44px;
}

.filter-input-icon[b-tvsilmivig] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--color-text-muted);
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
}

[b-tvsilmivig] .filter-input,
.filter-input[b-tvsilmivig] {
    width: 100%;
    height: 44px !important;
    padding: 0 14px 0 36px;
    background: var(--color-bg-primary) !important;
    border: 1px solid var(--color-border-primary) !important;
    border-radius: var(--radius-md) !important;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1), box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
    box-sizing: border-box;
}

/* Override global Inputs.css 52px for ALL input types in filter fields */
.filter-input-wrapper input[b-tvsilmivig],
.filter-input-wrapper[b-tvsilmivig]  input,
.filter-field input[b-tvsilmivig],
.filter-field[b-tvsilmivig]  input,
.filter-field input[type="date"][b-tvsilmivig],
.filter-field[b-tvsilmivig]  input[type="date"],
.filter-field input[type="number"][b-tvsilmivig],
.filter-field[b-tvsilmivig]  input[type="number"],
.filter-field input[type="text"][b-tvsilmivig],
.filter-field[b-tvsilmivig]  input[type="text"] {
    height: 44px !important;
    box-sizing: border-box;
}

[b-tvsilmivig] .filter-input:hover,
.filter-input:hover[b-tvsilmivig] {
}

[b-tvsilmivig] .filter-input:focus,
.filter-input:focus[b-tvsilmivig] {
    outline: none;
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-focus);
    background: var(--color-bg-primary) !important;
}

[b-tvsilmivig] .filter-input::placeholder,
.filter-input[b-tvsilmivig]::placeholder {
    color: var(--color-text-muted);
    font-weight: 400;
}

/* Date input specific adjustments */
[b-tvsilmivig] .filter-input-date {
    padding-right: 14px;
}

/* ----------------------------------------
   SPINNERS
   ---------------------------------------- */
.btn-spinner-small[b-tvsilmivig] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(26, 124, 202, 0.3);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-tvsilmivig 0.8s linear infinite;
}

@keyframes spin-b-tvsilmivig {
    to { transform: rotate(360deg); }
}

/* ========================================
   Modern Dropdown Combobox
   ======================================== */

.modern-dropdown[b-tvsilmivig] {
    position: relative;
    width: 100%;
    height: 44px;
    flex-shrink: 0;
    outline: none;
    background: transparent !important;
    background-color: transparent !important;
}

.dropdown-trigger[b-tvsilmivig] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    height: 44px;
    padding: 0 14px;
    background: var(--color-bg-primary) !important;
    background-color: var(--color-bg-primary) !important;
    border: 1px solid var(--color-border-primary) !important;
    border-radius: var(--radius-md) !important;
    cursor: pointer;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1), box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
    box-shadow: none;
}

.dropdown-trigger:hover[b-tvsilmivig] {
    background: var(--color-bg-primary) !important;
    background-color: var(--color-bg-primary) !important;
    box-shadow: none;
}

.modern-dropdown.open .dropdown-trigger[b-tvsilmivig] {
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-focus);
    background: var(--color-bg-primary) !important;
    background-color: var(--color-bg-primary) !important;
}

.dropdown-selected[b-tvsilmivig] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.dropdown-value[b-tvsilmivig] {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-placeholder[b-tvsilmivig] {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-muted);
}

.dropdown-arrow[b-tvsilmivig] {
    width: 14px;
    height: 14px;
    color: var(--color-text-muted);
    flex-shrink: 0;
    transition: transform 200ms cubic-bezier(.4, 0, .2, 1);
}

.dropdown-arrow.rotated[b-tvsilmivig] {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.dropdown-menu[b-tvsilmivig] {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    width: 100%;
    min-width: 180px;
    max-height: 320px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    z-index: 1001;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: dropdownSlideIn-b-tvsilmivig 160ms cubic-bezier(.4, 0, .2, 1);
}

@keyframes dropdownSlideIn-b-tvsilmivig {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown Options */
.dropdown-options[b-tvsilmivig] {
    overflow-y: auto;
    max-height: 260px;
    padding: var(--space-2);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-secondary) transparent;
}

.dropdown-options[b-tvsilmivig]::-webkit-scrollbar {
    width: var(--radius-sm);
}

.dropdown-options[b-tvsilmivig]::-webkit-scrollbar-track {
    background: transparent;
}

.dropdown-options[b-tvsilmivig]::-webkit-scrollbar-thumb {
    background: var(--color-border-secondary);
    border-radius: 3px;
}

.dropdown-option[b-tvsilmivig] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 10px var(--space-3);
    border-radius: 10px;
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.dropdown-option:hover[b-tvsilmivig] {
    background: var(--color-bg-secondary);
}

.dropdown-option.selected[b-tvsilmivig] {
    background: var(--color-info-light, rgba(26, 124, 202, 0.08));
    color: var(--color-text-primary);
}

.dropdown-option.selected:hover[b-tvsilmivig] {
    background: var(--color-info-light, rgba(26, 124, 202, 0.10));
}

.dropdown-option-content[b-tvsilmivig] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.check-icon[b-tvsilmivig] {
    color: var(--color-primary);
    flex-shrink: 0;
}

/* Status indicators for dropdown */
.status-indicator[b-tvsilmivig] {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: 50%;
    flex-shrink: 0;
}

.status-indicator-success[b-tvsilmivig] {
    background: var(--color-emerald);
}

.status-indicator-warning[b-tvsilmivig] {
    background: var(--color-amber);
}

.status-indicator-error[b-tvsilmivig] {
    background: var(--color-error-bright);
}

.status-indicator-neutral[b-tvsilmivig] {
    background: var(--color-text-muted);
}

/* ----------------------------------------
   TABLE CARD WRAPPER
   ---------------------------------------- */
.admin-table-card[b-tvsilmivig] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    animation: rise-b-tvsilmivig 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

.admin-table-card:hover[b-tvsilmivig] {
    box-shadow: var(--shadow-sm);
}

/* Remove borders from individual rows */
[b-tvsilmivig] .admin-table-row {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

/* Hover effect */
[b-tvsilmivig] .admin-table-row:hover {
    background: var(--color-bg-secondary);
    box-shadow: none;
    border-color: transparent;
}

/* Error row highlight */
[b-tvsilmivig] .admin-table-row.row-error {
    background: var(--color-error-light, rgba(239, 68, 68, 0.06));
}

[b-tvsilmivig] .admin-table-row.row-error:hover {
    background: var(--color-error-light, rgba(239, 68, 68, 0.09));
}

/* Table rows container */
[b-tvsilmivig] .admin-table-rows {
    gap: 0;
}

/* Header styling */
[b-tvsilmivig] .admin-table-header {
    background: var(--color-bg-secondary);
    margin-bottom: 0;
    padding: var(--space-4) 0;
}

/* Table container */
[b-tvsilmivig] .admin-table-container {
    margin-top: 0;
}

/* ----------------------------------------
   PAYMENTS GRID LAYOUT
   ---------------------------------------- */
.payments-grid[b-tvsilmivig] {
    display: grid;
    grid-template-columns: 100px 1fr 140px 120px 140px 1fr;
    align-items: center;
    gap: 0;
    width: 100%;
}

/* Cell type styling */
.cell-id[b-tvsilmivig] { padding-left: var(--space-5); }
.cell-status[b-tvsilmivig] { }
.cell-amount[b-tvsilmivig] { text-align: right; padding-right: var(--space-4); }
.cell-date[b-tvsilmivig] { }
.cell-product[b-tvsilmivig] { }
.cell-actions[b-tvsilmivig] {
    justify-self: center;
    padding-right: var(--space-5);
}

/* ----------------------------------------
   SKELETON LOADING STATE
   ---------------------------------------- */
.table-skeleton[b-tvsilmivig] {
    padding: var(--space-4);
}

.skeleton-header[b-tvsilmivig] {
    display: grid;
    grid-template-columns: 100px 1fr 140px 120px 140px 1fr;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-secondary);
    border-radius: 10px;
    margin-bottom: var(--space-3);
}

.skeleton-header-cell[b-tvsilmivig] {
    height: 14px;
    background: var(--color-bg-tertiary);
    background-size: 200% 100%;
    animation: shimmer-b-tvsilmivig 1.5s infinite;
    border-radius: var(--radius-sm);
}

.skeleton-row[b-tvsilmivig] {
    display: grid;
    grid-template-columns: 100px 1fr 140px 120px 140px 1fr;
    gap: var(--space-4);
    padding: var(--space-5);
}

.skeleton-cell[b-tvsilmivig] {
    height: var(--space-5);
    background: var(--color-bg-tertiary);
    background-size: 200% 100%;
    animation: shimmer-b-tvsilmivig 1.5s infinite;
    border-radius: var(--radius-sm);
}

.skeleton-id[b-tvsilmivig] { width: 60px; }
.skeleton-user[b-tvsilmivig] { width: 80%; }
.skeleton-status[b-tvsilmivig] { width: 80px; }
.skeleton-amount[b-tvsilmivig] { width: 70px; margin-left: auto; }
.skeleton-date[b-tvsilmivig] { width: 90px; }
.skeleton-product[b-tvsilmivig] { width: 70%; }
.skeleton-action[b-tvsilmivig] { width: 36px; margin: 0 auto; }

@keyframes shimmer-b-tvsilmivig {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ----------------------------------------
   EMPTY STATE
   ---------------------------------------- */
.table-empty-state[b-tvsilmivig] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-8);
    text-align: center;
}

.empty-icon-wrapper[b-tvsilmivig] {
    margin-bottom: var(--space-5);
}

.empty-icon-bg[b-tvsilmivig] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-icon-bg svg[b-tvsilmivig] {
    width: 40px;
    height: 40px;
    color: var(--color-border-primary);
}

.empty-title[b-tvsilmivig] {
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
}

.empty-text[b-tvsilmivig] {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-2) 0;
}

.empty-hint[b-tvsilmivig] {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-5) 0;
}

[b-tvsilmivig] .empty-action-btn {
    margin-top: var(--space-2);
}

/* ----------------------------------------
   ID CELL WITH COPY
   ---------------------------------------- */
.id-cell[b-tvsilmivig] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.id-badge[b-tvsilmivig] {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace;
}

.copy-btn[b-tvsilmivig] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-6);
    height: var(--space-6);
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    opacity: 0;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

.admin-table-row:hover .copy-btn[b-tvsilmivig] {
    opacity: 1;
}

.copy-btn:hover[b-tvsilmivig] {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

.copy-btn svg[b-tvsilmivig] {
    flex-shrink: 0;
}

/* ----------------------------------------
   USER CELL
   ---------------------------------------- */
.user-cell[b-tvsilmivig] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar[b-tvsilmivig] {
    width: var(--space-8);
    height: var(--space-8);
    border-radius: 10px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.user-info[b-tvsilmivig] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.user-id[b-tvsilmivig] {
    font-weight: var(--font-weight-semibold);
    font-size: 13px;
    color: var(--color-text-primary);
}

.user-email[b-tvsilmivig] {
    font-size: 12px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

/* ----------------------------------------
   STATUS BADGES
   ---------------------------------------- */
.status-badge[b-tvsilmivig] {
    display: inline-flex;
    align-items: center;
    gap: var(--radius-sm);
    padding: 5px var(--space-3);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    text-transform: capitalize;
}

.status-dot[b-tvsilmivig] {
    width: var(--radius-sm);
    height: var(--radius-sm);
    border-radius: 50%;
    flex-shrink: 0;
}

.status-badge-success[b-tvsilmivig] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.status-badge-success .status-dot[b-tvsilmivig] {
    background: var(--color-emerald);
}

.status-badge-warning[b-tvsilmivig] {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.status-badge-warning .status-dot[b-tvsilmivig] {
    background: var(--color-amber);
}

.status-badge-error[b-tvsilmivig] {
    background: var(--color-error-light);
    color: var(--color-error);
}

.status-badge-error .status-dot[b-tvsilmivig] {
    background: var(--color-error-bright);
}

.status-badge-neutral[b-tvsilmivig] {
    background: var(--color-bg-tertiary);
    color: var(--color-text-muted);
}

.status-badge-neutral .status-dot[b-tvsilmivig] {
    background: var(--color-text-muted);
}

/* Failure reason indicator */
.failure-reason[b-tvsilmivig] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: var(--space-1);
    color: var(--color-error);
    cursor: help;
}

/* ----------------------------------------
   AMOUNT VALUE - Right aligned
   ---------------------------------------- */
.col-amount[b-tvsilmivig] {
    text-align: right !important;
}

.amount-value[b-tvsilmivig] {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--space-1);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace;
}

.amount-number[b-tvsilmivig] {
    font-weight: var(--font-weight-semibold);
    font-size: 14px;
    color: var(--color-text-primary);
}

.currency[b-tvsilmivig] {
    font-weight: var(--font-weight-medium);
    font-size: 11px;
    color: var(--color-text-secondary);
}

/* ----------------------------------------
   DATE CELL
   ---------------------------------------- */
.date-cell[b-tvsilmivig] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.date-value[b-tvsilmivig] {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.time-value[b-tvsilmivig] {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* ----------------------------------------
   PRODUCT BADGE
   ---------------------------------------- */
.product-badge[b-tvsilmivig] {
    display: inline-flex;
    align-items: center;
    gap: var(--radius-sm);
    padding: 5px var(--space-3);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

.product-badge:hover[b-tvsilmivig] {
    background: var(--color-bg-tertiary);
}

.product-badge svg[b-tvsilmivig] {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

/* No product/invoice placeholder */
.no-product[b-tvsilmivig],
.no-invoice[b-tvsilmivig] {
    color: var(--color-text-muted);
    font-size: 16px;
}

/* ----------------------------------------
   ACTION BUTTONS
   ---------------------------------------- */
.admin-action-btn[b-tvsilmivig] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--color-border-primary);
    background: transparent;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1);
}

.admin-action-btn:hover:not(:disabled)[b-tvsilmivig] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.admin-action-btn:disabled[b-tvsilmivig] {
    opacity: 0.6;
    cursor: not-allowed;
}

.admin-action-btn--pdf[b-tvsilmivig] {
    color: var(--color-error);
}

.admin-action-btn--pdf:hover:not(:disabled)[b-tvsilmivig] {
    background: var(--color-error-light);
    border-color: var(--color-error);
    color: var(--color-error);
    box-shadow: none;
    transform: none;
}

/* ----------------------------------------
   MODAL FIELD VALUE (replaces inline styles)
   ---------------------------------------- */
.modal-field-value[b-tvsilmivig] {
    display: flex;
    align-items: center;
}

/* ----------------------------------------
   MODAL FOOTER ACTIONS (replaces d-flex Bootstrap)
   ---------------------------------------- */
.modal-footer-actions[b-tvsilmivig] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.modal-invoice-btn[b-tvsilmivig] {
    margin-right: auto;
}

/* ----------------------------------------
   PAGINATION
   ---------------------------------------- */
.admin-pagination[b-tvsilmivig] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-5);
    padding: var(--space-4);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    animation: rise-b-tvsilmivig 0.45s cubic-bezier(.4, 0, .2, 1) 0.05s both;
}

.admin-pagination-info[b-tvsilmivig] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.admin-pagination-controls[b-tvsilmivig] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.admin-pagination-btn[b-tvsilmivig] {
    min-width: 36px;
    height: 36px;
    padding: 0 var(--space-2);
    background: transparent;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-pagination-btn:hover:not(:disabled)[b-tvsilmivig] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    transform: none;
    box-shadow: none;
}

.admin-pagination-btn:disabled[b-tvsilmivig] {
    opacity: 0.4;
    cursor: not-allowed;
}

.admin-pagination-btn.active[b-tvsilmivig] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg-primary);
    box-shadow: none;
}

.admin-pagination-ellipsis[b-tvsilmivig] {
    padding: 0 var(--space-2);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
}

.admin-page-size-select[b-tvsilmivig] {
    height: 36px;
    padding: 0 var(--space-3);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1), box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
}

.admin-page-size-select:hover[b-tvsilmivig] {
}

.admin-page-size-select:focus[b-tvsilmivig] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* ----------------------------------------
   RESPONSIVE DESIGN
   ---------------------------------------- */

/* Tablet */
@media (max-width: 991.98px) {
    .filter-field-wide[b-tvsilmivig] {
        grid-column: span 2;
    }

    .payments-grid[b-tvsilmivig] {
        grid-template-columns: 80px 1fr 130px 100px 120px 1fr;
    }

    .user-email[b-tvsilmivig] {
        max-width: 120px;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .filter-field-wide[b-tvsilmivig] {
        grid-column: span 1;
    }

    .dropdown-menu[b-tvsilmivig] {
        position: fixed;
        left: var(--space-4);
        right: var(--space-4);
        width: auto;
        min-width: auto;
        max-height: 50vh;
    }

    /* Mobile table - card layout */
    .payments-grid[b-tvsilmivig] {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-4);
    }

    [b-tvsilmivig] .admin-table-header.payments-grid {
        display: none;
    }

    [b-tvsilmivig] .admin-table-row {
        border-radius: var(--radius-lg);
        border: none;
        margin-bottom: var(--space-3);
    }

    .cell-id[b-tvsilmivig],
    .cell-user[b-tvsilmivig],
    .cell-status[b-tvsilmivig],
    .cell-amount[b-tvsilmivig],
    .cell-date[b-tvsilmivig],
    .cell-product[b-tvsilmivig],
    .cell-actions[b-tvsilmivig] {
        display: grid;
        grid-template-columns: 100px 1fr;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-2) 0;
        text-align: left;
    }

    .cell-id[b-tvsilmivig]::before { content: "Payment ID"; }
    .cell-user[b-tvsilmivig]::before { content: "User"; }
    .cell-status[b-tvsilmivig]::before { content: "Status"; }
    .cell-amount[b-tvsilmivig]::before { content: "Amount"; }
    .cell-date[b-tvsilmivig]::before { content: "Date"; }
    .cell-product[b-tvsilmivig]::before { content: "Product"; }
    .cell-actions[b-tvsilmivig]::before { content: "Invoice"; }

    .cell-id[b-tvsilmivig]::before,
    .cell-user[b-tvsilmivig]::before,
    .cell-status[b-tvsilmivig]::before,
    .cell-amount[b-tvsilmivig]::before,
    .cell-date[b-tvsilmivig]::before,
    .cell-product[b-tvsilmivig]::before,
    .cell-actions[b-tvsilmivig]::before {
        font-size: 11px;
        font-weight: var(--font-weight-bold);
        color: var(--color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .cell-amount[b-tvsilmivig] {
        text-align: left;
        padding-right: 0;
    }

    .amount-value[b-tvsilmivig] {
        justify-content: flex-start;
    }

    .cell-actions[b-tvsilmivig] {
        padding-top: var(--space-3);
        margin-top: var(--space-2);
    }

    .user-avatar[b-tvsilmivig] {
        width: 28px;
        height: 28px;
        border-radius: var(--radius-md);
    }

    .user-avatar svg[b-tvsilmivig] {
        width: var(--space-3);
        height: var(--space-3);
    }

    .user-email[b-tvsilmivig] {
        max-width: 150px;
    }

    .status-badge[b-tvsilmivig] {
        padding: var(--space-1) 10px;
        font-size: 11px;
    }

    .skeleton-header[b-tvsilmivig],
    .skeleton-row[b-tvsilmivig] {
        grid-template-columns: 1fr;
    }

    .admin-pagination[b-tvsilmivig] {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-pagination-info[b-tvsilmivig] {
        text-align: center;
    }

    .admin-pagination-controls[b-tvsilmivig] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .admin-page-size-select[b-tvsilmivig] {
        width: 100%;
    }
}

/* Small mobile */
@media (max-width: 575.98px) {
    .admin-table-card[b-tvsilmivig] {
        border-radius: var(--radius-lg);
    }

    .table-empty-state[b-tvsilmivig] {
        padding: var(--space-10) var(--space-4);
    }

    .empty-icon-bg[b-tvsilmivig] {
        width: 64px;
        height: 64px;
    }

    .empty-icon-bg svg[b-tvsilmivig] {
        width: var(--space-8);
        height: var(--space-8);
    }

    .cell-id[b-tvsilmivig],
    .cell-user[b-tvsilmivig],
    .cell-status[b-tvsilmivig],
    .cell-amount[b-tvsilmivig],
    .cell-date[b-tvsilmivig],
    .cell-product[b-tvsilmivig],
    .cell-actions[b-tvsilmivig] {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }

    .cell-id[b-tvsilmivig]::before,
    .cell-user[b-tvsilmivig]::before,
    .cell-status[b-tvsilmivig]::before,
    .cell-amount[b-tvsilmivig]::before,
    .cell-date[b-tvsilmivig]::before,
    .cell-product[b-tvsilmivig]::before,
    .cell-actions[b-tvsilmivig]::before {
        font-size: 10px;
    }
}

/* ----------------------------------------
   FOCUS STATES
   ---------------------------------------- */
[b-tvsilmivig] .filter-input:focus-visible,
.filter-input:focus-visible[b-tvsilmivig] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.modern-dropdown:focus-visible .dropdown-trigger[b-tvsilmivig] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-focus);
}

.copy-btn:focus-visible[b-tvsilmivig],
.admin-action-btn:focus-visible[b-tvsilmivig] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.admin-pagination-btn:focus-visible[b-tvsilmivig] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.admin-page-size-select:focus-visible[b-tvsilmivig] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ----------------------------------------
   REDUCED MOTION
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    [b-tvsilmivig] .loading-spinner-container .spinner,
    .btn-spinner-small[b-tvsilmivig],
    .skeleton-header-cell[b-tvsilmivig],
    .skeleton-cell[b-tvsilmivig] {
        animation: none;
    }

    .dropdown-trigger[b-tvsilmivig],
    .dropdown-arrow[b-tvsilmivig],
    .dropdown-option[b-tvsilmivig],
    .dropdown-menu[b-tvsilmivig],
    .copy-btn[b-tvsilmivig],
    .admin-action-btn[b-tvsilmivig],
    .admin-pagination-btn[b-tvsilmivig],
    .admin-page-size-select[b-tvsilmivig],
    .status-badge[b-tvsilmivig],
    .product-badge[b-tvsilmivig],
    .admin-table-card[b-tvsilmivig],
    .admin-pagination[b-tvsilmivig] {
        transition: none;
    }

    .dropdown-menu[b-tvsilmivig],
    .admin-table-card[b-tvsilmivig],
    .admin-pagination[b-tvsilmivig] {
        animation: none;
    }
}

/* ----------------------------------------
   PRINT STYLES
   ---------------------------------------- */
@media print {
    .admin-search-card[b-tvsilmivig],
    .copy-btn[b-tvsilmivig] {
        display: none;
    }

    .admin-table-card[b-tvsilmivig] {
        border: 1px solid #ddd;
        box-shadow: none;
    }

    .cell-actions[b-tvsilmivig] {
        display: none;
    }

    .admin-pagination[b-tvsilmivig] {
        display: none !important;
    }
}
/* /Components/Pages/Admin/AdminPromotions.razor.rz.scp.css */
/* ========================================
   ADMIN PROMOTIONS — 2026 Design System
   Scoped styles for /admin/promotions
   Solid surfaces, bordered inputs, rise animation
   Matches AdminTrackingEmulator reference design
   ======================================== */

/* ----------------------------------------
   RISE ANIMATION (standard entrance)
   ---------------------------------------- */
@keyframes rise-b-gcb9gcxoys {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shimmer-b-gcb9gcxoys {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ----------------------------------------
   FILTER FIELDS
   ---------------------------------------- */
.ap-filter-field[b-gcb9gcxoys] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.ap-filter-label[b-gcb9gcxoys] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 16px;
    height: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0;
    display: block;
}

.ap-filter-input-wrap[b-gcb9gcxoys] {
    position: relative;
    display: flex;
    align-items: center;
}

.ap-filter-input-icon[b-gcb9gcxoys] {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    pointer-events: none;
    z-index: 1;
}

.ap-filter-input[b-gcb9gcxoys] {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-4) 0 38px;
    font-size: 15px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    appearance: none;
    box-sizing: border-box;
}

.ap-filter-input:hover[b-gcb9gcxoys] {
    border-color: var(--color-border-secondary);
}

.ap-filter-input:focus[b-gcb9gcxoys] {
    outline: none;
    border: 1px solid var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.ap-filter-input[b-gcb9gcxoys]::placeholder {
    color: var(--color-text-muted);
}

/* Select filter (no search icon padding) */
.ap-filter-select[b-gcb9gcxoys] {
    padding: 0 36px 0 var(--space-4);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='%2364748B' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 16px;
    cursor: pointer;
}

/* AppSelect overrides in filter */
.ap-filter-field :deep(.app-select)[b-gcb9gcxoys] {
    height: 48px;
}

.ap-filter-field :deep(.app-select-trigger)[b-gcb9gcxoys] {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    box-sizing: border-box;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
}

/* ----------------------------------------
   STATS GRID — Solid Surface Cards
   ---------------------------------------- */
.ap-stats-grid[b-gcb9gcxoys] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.ap-stat-card[b-gcb9gcxoys] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    animation: rise-b-gcb9gcxoys .45s cubic-bezier(.4, 0, .2, 1) both;
    transition: box-shadow 200ms cubic-bezier(.4, 0, .2, 1), transform 200ms cubic-bezier(.4, 0, .2, 1);
}

.ap-stat-card:nth-child(1)[b-gcb9gcxoys] { animation-delay: 0s; }
.ap-stat-card:nth-child(2)[b-gcb9gcxoys] { animation-delay: 0.06s; }
.ap-stat-card:nth-child(3)[b-gcb9gcxoys] { animation-delay: 0.12s; }
.ap-stat-card:nth-child(4)[b-gcb9gcxoys] { animation-delay: 0.18s; }

.ap-stat-card:hover[b-gcb9gcxoys] {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.ap-stat-icon[b-gcb9gcxoys] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.ap-stat-icon svg[b-gcb9gcxoys] {
    width: 22px;
    height: 22px;
}

.ap-stat-icon--success[b-gcb9gcxoys] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.ap-stat-icon--warning[b-gcb9gcxoys] {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.ap-stat-icon--info[b-gcb9gcxoys] {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.ap-stat-icon--purple[b-gcb9gcxoys] {
    background: var(--color-purple-light);
    color: var(--color-purple);
}

.ap-stat-content[b-gcb9gcxoys] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ap-stat-value[b-gcb9gcxoys] {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.ap-stat-label[b-gcb9gcxoys] {
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
}

/* ----------------------------------------
   TABLE CARD — Solid Surface
   ---------------------------------------- */
.ap-table-card[b-gcb9gcxoys] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    animation: rise-b-gcb9gcxoys .45s cubic-bezier(.4, 0, .2, 1) both;
    animation-delay: 0.24s;
    transition: box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
}

.ap-table-container[b-gcb9gcxoys] {
    width: 100%;
}

/* Table Header */
.ap-table-head[b-gcb9gcxoys] {
    display: grid;
    grid-template-columns:
        minmax(120px, 1.1fr)
        minmax(200px, 2.2fr)
        minmax(120px, 1fr)
        minmax(120px, 1fr)
        minmax(180px, 1.6fr)
        minmax(96px, 0.8fr);
    gap: 0;
    padding: 0 var(--space-5);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-primary);
}

.ap-th[b-gcb9gcxoys] {
    padding: var(--space-3) var(--space-3);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.ap-th-left[b-gcb9gcxoys] { text-align: left; }
.ap-th-right[b-gcb9gcxoys] { text-align: right; }

/* Table Body */
.ap-table-body[b-gcb9gcxoys] {
    /* Rows stack vertically */
}

/* Table Row */
.ap-row[b-gcb9gcxoys] {
    display: grid;
    grid-template-columns:
        minmax(120px, 1.1fr)
        minmax(200px, 2.2fr)
        minmax(120px, 1fr)
        minmax(120px, 1fr)
        minmax(180px, 1.6fr)
        minmax(96px, 0.8fr);
    gap: 0;
    padding: 0 var(--space-5);
    align-items: center;
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
    border-bottom: 1px solid var(--color-border-primary);
}

.ap-row:last-child[b-gcb9gcxoys] {
    border-bottom: none;
}

.ap-row:hover[b-gcb9gcxoys] {
    background: var(--color-bg-secondary);
}

.ap-row:focus-visible[b-gcb9gcxoys] {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    border-radius: var(--radius-md);
}

/* Table Cells */
.ap-cell[b-gcb9gcxoys] {
    padding: var(--space-4) var(--space-3);
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ap-cell-primary[b-gcb9gcxoys] {
    padding: var(--space-4) var(--space-3);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.ap-cell-left[b-gcb9gcxoys] { text-align: left; }
.ap-cell-right[b-gcb9gcxoys] { text-align: right; }

/* Code badge */
.ap-code-badge[b-gcb9gcxoys] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) 10px;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    font-family: var(--font-mono, 'SF Mono', 'Monaco', 'Consolas', monospace);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    color: var(--color-text-primary);
}

/* Promo name */
.ap-promo-name[b-gcb9gcxoys] {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

/* Type badges */
.ap-type-badge[b-gcb9gcxoys] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.ap-type-badge--bonus[b-gcb9gcxoys] {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.ap-type-badge--free[b-gcb9gcxoys] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.ap-type-badge--discount[b-gcb9gcxoys] {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.ap-type-badge--credit[b-gcb9gcxoys] {
    background: var(--color-purple-light);
    color: var(--color-purple);
}

/* Status badges */
.ap-status-badge[b-gcb9gcxoys] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.ap-status-badge--success[b-gcb9gcxoys] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.ap-status-badge--warning[b-gcb9gcxoys] {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.ap-status-badge--info[b-gcb9gcxoys] {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.ap-status-badge--neutral[b-gcb9gcxoys] {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

.ap-status-badge--error[b-gcb9gcxoys] {
    background: var(--color-error-light);
    color: var(--color-error);
}

/* Duration */
.ap-duration[b-gcb9gcxoys] {
    font-size: 13px;
    color: var(--color-text-secondary);
}

/* Usage count */
.ap-usage[b-gcb9gcxoys] {
    font-family: var(--font-mono, 'SF Mono', 'Monaco', 'Consolas', monospace);
    font-size: 13px;
    color: var(--color-text-secondary);
}

/* ----------------------------------------
   EMPTY STATE
   ---------------------------------------- */
.ap-empty[b-gcb9gcxoys] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-6);
    text-align: center;
    animation: rise-b-gcb9gcxoys .45s cubic-bezier(.4, 0, .2, 1) both;
}

.ap-empty-icon[b-gcb9gcxoys] {
    width: 56px;
    height: 56px;
    margin-bottom: var(--space-4);
    color: var(--color-border-primary);
}

.ap-empty-icon svg[b-gcb9gcxoys] {
    width: 100%;
    height: 100%;
}

.ap-empty-title[b-gcb9gcxoys] {
    margin: 0 0 var(--space-2) 0;
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}

.ap-empty-text[b-gcb9gcxoys] {
    margin: 0 0 var(--space-6) 0;
    font-size: 14px;
    color: var(--color-text-secondary);
    max-width: 360px;
}

/* ----------------------------------------
   PAGINATION
   ---------------------------------------- */
.ap-pagination[b-gcb9gcxoys] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
    animation: rise-b-gcb9gcxoys .45s cubic-bezier(.4, 0, .2, 1) both;
    animation-delay: 0.30s;
}

.ap-page-btn[b-gcb9gcxoys] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

.ap-page-btn:hover:not(:disabled)[b-gcb9gcxoys] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
}

.ap-page-btn:disabled[b-gcb9gcxoys] {
    opacity: 0.45;
    cursor: not-allowed;
}

.ap-page-btn svg[b-gcb9gcxoys] {
    width: 16px;
    height: 16px;
}

.ap-page-info[b-gcb9gcxoys] {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* ----------------------------------------
   SKELETON LOADING
   ---------------------------------------- */
.ap-skeleton[b-gcb9gcxoys] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-bg-secondary) 50%, var(--color-bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-gcb9gcxoys 1.5s infinite;
    border-radius: var(--radius-md);
}

.ap-skeleton-card[b-gcb9gcxoys] {
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
}

.ap-stats-grid .ap-skeleton-card[b-gcb9gcxoys] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-bg-primary);
}

.ap-skeleton-icon[b-gcb9gcxoys] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.ap-skeleton-text[b-gcb9gcxoys] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ap-skeleton-value[b-gcb9gcxoys] {
    height: 22px;
    width: 60%;
}

.ap-skeleton-label[b-gcb9gcxoys] {
    height: 14px;
    width: 80%;
}

.ap-table-card.ap-skeleton-card[b-gcb9gcxoys] {
    padding: 0;
    background: var(--color-bg-primary);
    overflow: hidden;
}

.ap-skeleton-table-header[b-gcb9gcxoys] {
    display: grid;
    grid-template-columns: 1.1fr 2.2fr 1fr 1fr 1.6fr 0.8fr;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-primary);
}

.ap-skeleton-hcell[b-gcb9gcxoys] {
    height: 12px;
    border-radius: var(--radius-sm);
}

.ap-skeleton-row[b-gcb9gcxoys] {
    display: grid;
    grid-template-columns: 1.1fr 2.2fr 1fr 1fr 1.6fr 0.8fr;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border-primary);
}

.ap-skeleton-row:last-child[b-gcb9gcxoys] {
    border-bottom: none;
}

.ap-skeleton-cell[b-gcb9gcxoys] {
    height: 18px;
    border-radius: var(--radius-sm);
}

/* ----------------------------------------
   MODAL — Form Styles
   ---------------------------------------- */
.ap-modal-error[b-gcb9gcxoys] {
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    background: var(--color-error-light);
    border: 1px solid var(--color-error-bright, var(--color-error));
    border-radius: var(--radius-lg);
    color: var(--color-error);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
}

/* Section Title */
.ap-section-title[b-gcb9gcxoys] {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4) 0;
    padding-bottom: var(--space-2);
}

.ap-section-title--spaced[b-gcb9gcxoys] {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-primary);
}

/* Form Group */
.ap-form-group[b-gcb9gcxoys] {
    margin-bottom: var(--space-4);
}

.ap-form-group:last-child[b-gcb9gcxoys] {
    margin-bottom: 0;
}

/* Form Label — Fixed 16px height, 11px uppercase */
.ap-form-label[b-gcb9gcxoys] {
    display: block;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 16px;
    height: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-2) 0;
}

/* Form Input — 48px height, bordered */
.ap-form-input[b-gcb9gcxoys] {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-4);
    font-size: 15px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

.ap-form-input[b-gcb9gcxoys]::placeholder {
    color: var(--color-text-muted);
}

.ap-form-input:hover[b-gcb9gcxoys] {
    border-color: var(--color-border-secondary);
}

.ap-form-input:focus[b-gcb9gcxoys] {
    outline: none;
    border: 1px solid var(--color-primary);
    background: var(--color-bg-primary);
    box-shadow: var(--shadow-focus);
}

.ap-form-input:disabled[b-gcb9gcxoys] {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    cursor: not-allowed;
}

/* Textarea override */
.ap-form-textarea[b-gcb9gcxoys] {
    height: auto;
    padding: var(--space-3) var(--space-4);
    resize: vertical;
    min-height: 48px;
}

/* Form Row (2-column) */
.ap-form-row[b-gcb9gcxoys] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

/* Checkbox Group */
.ap-checkbox-group[b-gcb9gcxoys] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
}

.ap-checkbox[b-gcb9gcxoys] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    cursor: pointer;
    user-select: none;
}

.ap-checkbox input[type="checkbox"][b-gcb9gcxoys] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ap-checkbox-track[b-gcb9gcxoys] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 2px solid var(--color-border-secondary);
    border-radius: var(--radius-sm);
    background: var(--color-bg-primary);
    flex-shrink: 0;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

.ap-checkbox-check[b-gcb9gcxoys] {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: white;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    transform: scale(0.5);
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

.ap-checkbox input[type="checkbox"]:checked + .ap-checkbox-track[b-gcb9gcxoys] {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.ap-checkbox input[type="checkbox"]:checked + .ap-checkbox-track .ap-checkbox-check[b-gcb9gcxoys] {
    opacity: 1;
    transform: scale(1);
}

.ap-checkbox input[type="checkbox"]:focus-visible + .ap-checkbox-track[b-gcb9gcxoys] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.ap-checkbox-text[b-gcb9gcxoys] {
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}

.ap-checkbox--standalone[b-gcb9gcxoys] {
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
}

/* Modal Footer Actions (matches Invoices reference) */
.ap-modal-footer-actions[b-gcb9gcxoys] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.ap-modal-action-left[b-gcb9gcxoys] {
    margin-right: auto;
}

/* Modal Buttons */
.ap-btn[b-gcb9gcxoys] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 40px;
    padding: 0 var(--space-5);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

.ap-btn:disabled[b-gcb9gcxoys] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ap-btn--primary[b-gcb9gcxoys] {
    background: var(--color-primary);
    color: white;
}

.ap-btn--primary:hover:not(:disabled)[b-gcb9gcxoys] {
    background: var(--color-primary-hover, var(--color-primary));
    box-shadow: var(--shadow-sm);
}

.ap-btn--outline[b-gcb9gcxoys] {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-primary);
}

.ap-btn--outline:hover:not(:disabled)[b-gcb9gcxoys] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
}

.ap-btn--danger[b-gcb9gcxoys] {
    background: var(--color-error-light);
    color: var(--color-error);
    border: 1px solid transparent;
}

.ap-btn--danger:hover:not(:disabled)[b-gcb9gcxoys] {
    background: var(--color-error);
    color: white;
}

/* ----------------------------------------
   RESPONSIVE — Tablet
   ---------------------------------------- */
@media (max-width: 1023.98px) {
    .ap-stats-grid[b-gcb9gcxoys] {
        grid-template-columns: repeat(2, 1fr);
    }

    .ap-filter-field[b-gcb9gcxoys] {
        min-width: 150px;
    }

    .ap-form-row[b-gcb9gcxoys] {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------
   RESPONSIVE — Mobile Table Card Layout
   ---------------------------------------- */
@media (max-width: 991.98px) {
    /* Table card becomes transparent, rows are cards */
    .ap-table-card[b-gcb9gcxoys] {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    /* Hide header row */
    .ap-table-head[b-gcb9gcxoys] {
        display: none !important;
    }

    /* Table body gaps */
    .ap-table-body[b-gcb9gcxoys] {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    /* Rows become stacked cards */
    .ap-row[b-gcb9gcxoys] {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-4) !important;
        background: var(--color-bg-primary);
        border: 1px solid var(--color-border-primary);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
    }

    .ap-row:last-child[b-gcb9gcxoys] {
        border-bottom: 1px solid var(--color-border-primary);
    }

    .ap-row:hover[b-gcb9gcxoys] {
        transform: none;
    }

    /* Each cell: label | value */
    .ap-cell[b-gcb9gcxoys],
    .ap-cell-primary[b-gcb9gcxoys] {
        display: grid !important;
        grid-template-columns: 85px 1fr;
        align-items: baseline;
        gap: var(--space-2);
        padding: 2px 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        font-size: 13px;
        width: 100% !important;
        text-align: left !important;
    }

    .ap-cell-primary[b-gcb9gcxoys] {
        font-size: 14px;
        font-weight: 500;
    }

    /* data-label pseudo-elements */
    .ap-cell[b-gcb9gcxoys]::before,
    .ap-cell-primary[b-gcb9gcxoys]::before {
        content: attr(data-label) !important;
        font-size: 11px;
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-muted);
        text-transform: none;
        letter-spacing: -0.01em;
        white-space: nowrap;
    }
}

/* ----------------------------------------
   RESPONSIVE — Mobile
   ---------------------------------------- */
@media (max-width: 767.98px) {
    .ap-stats-grid[b-gcb9gcxoys] {
        grid-template-columns: 1fr;
    }

    .ap-stat-card[b-gcb9gcxoys] {
        padding: var(--space-4);
        border-radius: var(--radius-xl);
    }

    .ap-pagination[b-gcb9gcxoys] {
        flex-direction: column;
        gap: var(--space-3);
    }

    .ap-filter-field[b-gcb9gcxoys] {
        min-width: 100%;
    }

    .ap-modal-footer-actions[b-gcb9gcxoys] {
        flex-wrap: wrap;
    }

    .ap-form-row[b-gcb9gcxoys] {
        grid-template-columns: 1fr;
    }

    .ap-empty[b-gcb9gcxoys] {
        padding: var(--space-8) var(--space-4);
    }

    .ap-empty-icon[b-gcb9gcxoys] {
        width: 48px;
        height: 48px;
    }

    /* Skeleton table hidden on mobile */
    .ap-skeleton-table-header[b-gcb9gcxoys],
    .ap-skeleton-row[b-gcb9gcxoys] {
        display: none;
    }
}

/* ----------------------------------------
   RESPONSIVE — Small mobile
   ---------------------------------------- */
@media (max-width: 479.98px) {
    .ap-stat-card[b-gcb9gcxoys] {
        border-radius: var(--radius-lg);
    }

    .ap-stat-icon[b-gcb9gcxoys] {
        width: 40px;
        height: 40px;
    }

    .ap-stat-value[b-gcb9gcxoys] {
        font-size: 18px;
    }

    .ap-row[b-gcb9gcxoys] {
        border-radius: var(--radius-lg) !important;
    }

    .ap-checkbox-group[b-gcb9gcxoys] {
        border-radius: var(--radius-md);
    }

    .ap-checkbox--standalone[b-gcb9gcxoys] {
        border-radius: var(--radius-md);
    }
}

/* ----------------------------------------
   FOCUS STATES & ACCESSIBILITY
   ---------------------------------------- */
.ap-page-btn:focus-visible[b-gcb9gcxoys] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.ap-btn:focus-visible[b-gcb9gcxoys] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ----------------------------------------
   REDUCED MOTION
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ap-stat-card[b-gcb9gcxoys],
    .ap-table-card[b-gcb9gcxoys],
    .ap-pagination[b-gcb9gcxoys],
    .ap-empty[b-gcb9gcxoys],
    .ap-skeleton[b-gcb9gcxoys] {
        animation: none;
    }

    .ap-stat-card:hover[b-gcb9gcxoys] {
        transform: none;
    }

    .ap-row[b-gcb9gcxoys],
    .ap-page-btn[b-gcb9gcxoys],
    .ap-btn[b-gcb9gcxoys],
    .ap-filter-input[b-gcb9gcxoys],
    .ap-form-input[b-gcb9gcxoys],
    .ap-checkbox-track[b-gcb9gcxoys],
    .ap-checkbox-check[b-gcb9gcxoys] {
        transition: none;
    }
}

/* ----------------------------------------
   PRINT
   ---------------------------------------- */
@media print {
    .ap-stats-grid[b-gcb9gcxoys],
    .ap-pagination[b-gcb9gcxoys],
    .ap-empty[b-gcb9gcxoys],
    .ap-skeleton-card[b-gcb9gcxoys] {
        display: none;
    }

    .ap-table-card[b-gcb9gcxoys] {
        border: 1px solid #000;
        box-shadow: none;
    }

    .ap-row[b-gcb9gcxoys] {
        break-inside: avoid;
    }
}
/* /Components/Pages/Admin/AdminQrTokenUses.razor.rz.scp.css */
/* ========================================
   ADMIN QR TOKEN USES — 2026 Design System
   Solid surfaces, design tokens, rise animation
   Matches: AdminValidationLogs patterns
   ======================================== */

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes rise-b-pauozid955 {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-shimmer-b-pauozid955 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   FILTER LAYOUT — 5 filters on one row (desktop)
   ========================================================================== */
@media (min-width: 992px) {
    [b-pauozid955] .admin-page-header.qr-token-uses-header .aph-filters-content {
        grid-template-columns:
            minmax(140px, 180px)
            minmax(160px, 220px)
            minmax(200px, 1fr)
            minmax(160px, 200px)
            minmax(160px, 200px);
        gap: var(--space-4);
        align-items: end;
        min-width: 0;
    }

    .admin-page.admin-standard .filter-field[b-pauozid955] {
        min-width: 0 !important;
    }

    .admin-page.admin-standard .filter-input-wrapper[b-pauozid955] {
        min-width: 0;
    }

    .admin-page.admin-standard .filter-field[b-pauozid955]  .app-datepicker {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ==========================================================================
   FILTER FIELD ENHANCEMENTS
   ========================================================================== */
[b-pauozid955] .filter-field {
    display: flex;
    flex-direction: column;
    gap: var(--radius-sm);
}

[b-pauozid955] .filter-input-wrapper {
    position: relative;
    width: 100%;
}

[b-pauozid955] .filter-input-icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    pointer-events: none;
}

[b-pauozid955] .filter-input,
[b-pauozid955] input[type="text"].filter-input,
[b-pauozid955] input[type="number"].filter-input,
[b-pauozid955] .filter-input-wrapper input {
    height: 40px !important;
    box-sizing: border-box;
}

[b-pauozid955] .filter-field-label {
    min-height: var(--space-5);
    line-height: var(--space-5);
    display: block;
}

/* ==========================================================================
   TABLE CARD — Solid surface, bordered, no glassmorphism
   ========================================================================== */
.admin-table-card[b-pauozid955] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    margin-top: var(--space-5);
    box-shadow: var(--shadow-sm);
    animation: rise-b-pauozid955 0.45s cubic-bezier(.4, 0, .2, 1) both;
    overflow: hidden;
}

[b-pauozid955] .admin-table-container {
    margin-top: 0;
}

[b-pauozid955] .admin-table-header {
    background: var(--color-bg-secondary);
    margin-bottom: 0;
    padding: var(--space-4) 0;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border-primary);
}

[b-pauozid955] .admin-table-rows {
    gap: 0;
}

[b-pauozid955] .admin-table-row {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    padding: 0 var(--space-3) 0 0;
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

[b-pauozid955] .admin-table-row:hover {
    background: var(--color-bg-secondary);
    box-shadow: none;
    transform: none;
}

[b-pauozid955] .admin-table-row:focus-visible {
    box-shadow: var(--shadow-focus);
    outline: none;
    z-index: 1;
    position: relative;
}

[b-pauozid955] .admin-table-row:not(:last-child) {
    box-shadow: inset 0 -1px 0 var(--color-border-primary);
}

/* Alerts */
.admin-container[b-pauozid955] >  .app-alert {
    margin-bottom: var(--space-5);
}

/* ==========================================================================
   ID Badge
   ========================================================================== */
.qt-id-badge[b-pauozid955] {
    display: inline-flex;
    align-items: center;
    font-family: 'SF Mono', 'Cascadia Code', 'Courier New', monospace;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    letter-spacing: 0.3px;
}

/* ==========================================================================
   Ticket Badge
   ========================================================================== */
.qt-ticket-badge[b-pauozid955] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1) 10px;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    letter-spacing: 0.02em;
    min-width: 36px;
    text-align: center;
    font-family: 'SF Mono', 'Cascadia Code', 'Courier New', monospace;
}

/* ==========================================================================
   User Badge
   ========================================================================== */
.qt-user-badge[b-pauozid955] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    padding: 2px var(--space-2);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

/* ==========================================================================
   Code Badge (for JTI + Device ID in table)
   ========================================================================== */
.qt-code-badge[b-pauozid955] {
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Courier New', monospace;
    font-size: 12px;
    font-weight: 500;
    padding: var(--space-1) var(--space-2);
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    letter-spacing: 0.3px;
}

/* Full code badge (for modal detail — no truncation) */
.qt-code-badge-full[b-pauozid955] {
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Courier New', monospace;
    font-size: 12px;
    padding: var(--space-1) var(--space-2);
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    letter-spacing: 0.3px;
    word-break: break-all;
}

/* ==========================================================================
   Timestamp
   ========================================================================== */
.qt-timestamp[b-pauozid955] {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* Dash placeholder */
.qt-dash[b-pauozid955] {
    color: var(--color-text-muted);
}

/* ==========================================================================
   DETAIL MODAL — Structured sections
   ========================================================================== */
.qt-detail-modal[b-pauozid955] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Detail Section — Solid bordered card */
.qt-detail-section[b-pauozid955] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-md);
    overflow: hidden;
    animation: rise-b-pauozid955 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

.qt-detail-section-title[b-pauozid955] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
}

.qt-detail-section-title svg[b-pauozid955] {
    width: 18px;
    height: 18px;
    color: var(--color-primary);
    flex-shrink: 0;
}

/* Detail Grid — 2-column layout for key-value pairs */
.qt-detail-grid[b-pauozid955] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.qt-detail-field[b-pauozid955] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-primary);
}

.qt-detail-field:nth-child(odd)[b-pauozid955] {
    border-right: 1px solid var(--color-border-primary);
}

.qt-detail-grid .qt-detail-field:nth-last-child(1)[b-pauozid955],
.qt-detail-grid .qt-detail-field:nth-last-child(2)[b-pauozid955] {
    border-bottom: none;
}

.qt-detail-grid .qt-detail-field:last-child:nth-child(odd)[b-pauozid955] {
    border-right: none;
}

.qt-detail-field-label[b-pauozid955] {
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.qt-detail-field-value[b-pauozid955] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    word-break: break-word;
}

/* ==========================================================================
   SKELETON LOADING STATE
   ========================================================================== */
.qt-loading-state[b-pauozid955] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.qt-skeleton-row[b-pauozid955] {
    display: grid;
    grid-template-columns: 72px 1fr 120px;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-primary);
}

.qt-skeleton-row:first-child[b-pauozid955] {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.qt-skeleton-row:last-child[b-pauozid955] {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.qt-skeleton[b-pauozid955] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 37%, var(--color-bg-tertiary) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer-b-pauozid955 1.8s ease infinite;
    border-radius: var(--radius-sm);
}

.qt-skeleton-badge[b-pauozid955] {
    width: 52px;
    height: 28px;
    border-radius: var(--radius-sm);
}

.qt-skeleton-text[b-pauozid955] {
    width: 100%;
    max-width: 180px;
    height: 16px;
}

.qt-skeleton-text-sm[b-pauozid955] {
    width: 72px;
    height: 12px;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.qt-empty-state[b-pauozid955] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    text-align: center;
}

.qt-empty-state-icon[b-pauozid955] {
    width: 40px;
    height: 40px;
    color: var(--color-text-muted);
    opacity: 0.4;
    margin-bottom: var(--space-3);
}

.qt-empty-state-title[b-pauozid955] {
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
}

.qt-empty-state-text[b-pauozid955] {
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4) 0;
}

.qt-link-btn[b-pauozid955] {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
    text-underline-offset: 2px;
}

.qt-link-btn:hover[b-pauozid955] {
    color: var(--color-primary-hover);
    text-decoration-thickness: 2px;
}

/* ==========================================================================
   PAGINATION — 2026 Design System
   ========================================================================== */
.qt-pagination[b-pauozid955] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-top: 1px solid var(--color-border-primary);
}

.qt-pagination-info[b-pauozid955] {
    font-family: var(--font-family-base);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-muted);
    white-space: nowrap;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}

.qt-pagination-controls[b-pauozid955] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.qt-page-nav[b-pauozid955] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1);
    flex-shrink: 0;
}

.qt-page-nav svg[b-pauozid955] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.qt-page-nav:hover:not(:disabled)[b-pauozid955] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.qt-page-nav:disabled[b-pauozid955] {
    opacity: 0.25;
    cursor: default;
}

.qt-page-numbers[b-pauozid955] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.qt-page-num[b-pauozid955] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 2px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-2xl);
    cursor: pointer;
    font-family: var(--font-family-base);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    color: var(--color-text-secondary);
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1);
    font-variant-numeric: tabular-nums;
}

.qt-page-num:hover:not(.active)[b-pauozid955] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary);
}

.qt-page-num.active[b-pauozid955] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: 600;
    border-color: var(--color-primary);
}

.qt-page-ellipsis[b-pauozid955] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 34px;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    user-select: none;
}

.qt-page-size[b-pauozid955] {
    height: 34px;
    padding: 0 30px 0 12px;
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    font-family: var(--font-family-base);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 3.75L5 6.25L7.5 3.75' stroke='%2394A3B8' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1);
    font-variant-numeric: tabular-nums;
}

.qt-page-size:hover[b-pauozid955] {
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.qt-page-size:focus[b-pauozid955] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* ==========================================================================
   MOBILE — Card Layout (991.98px)
   ========================================================================== */
@media (max-width: 991.98px) {
    .admin-table-card[b-pauozid955] {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        margin-top: var(--space-4);
        box-shadow: none !important;
        overflow: visible !important;
    }

    [b-pauozid955] .admin-table-header,
    [b-pauozid955] .admin-table-header.admin-auto-grid {
        display: none !important;
    }

    [b-pauozid955] .admin-table-rows {
        gap: var(--space-3) !important;
    }

    [b-pauozid955] .admin-table-row,
    [b-pauozid955] .admin-table-container .admin-table-row {
        border-radius: var(--radius-lg) !important;
        margin-bottom: 0 !important;
        padding: var(--space-4) !important;
        background: var(--color-bg-primary) !important;
        border: 1px solid var(--color-border-primary) !important;
        box-shadow: var(--shadow-sm) !important;
        flex-direction: column !important;
    }

    [b-pauozid955] .admin-table-row:not(:last-child) {
        box-shadow: var(--shadow-sm) !important;
    }

    [b-pauozid955] .admin-table-row:hover {
        transform: none !important;
    }

    [b-pauozid955] .admin-grid-cols-6 {
        min-width: 0 !important;
    }

    [b-pauozid955] .admin-table-row-content,
    [b-pauozid955] .admin-table-row-content.admin-auto-grid,
    [b-pauozid955] .admin-table-row-content.admin-auto-grid.admin-grid-cols-6 {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-2) !important;
        padding: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    [b-pauozid955] .admin-auto-grid .admin-table-cell,
    [b-pauozid955] .admin-auto-grid .admin-table-cell-primary,
    [b-pauozid955] .admin-auto-grid .admin-table-cell-secondary {
        display: grid !important;
        grid-template-columns: 100px 1fr;
        align-items: baseline;
        gap: var(--space-3);
        padding: var(--space-1) 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        font-size: 13px;
        width: 100% !important;
        min-width: 0 !important;
    }

    [b-pauozid955] .admin-auto-grid .admin-table-cell-primary {
        font-size: 14px;
        font-weight: 600;
    }

    [b-pauozid955] .admin-auto-grid .admin-table-cell::before,
    [b-pauozid955] .admin-auto-grid .admin-table-cell-primary::before,
    [b-pauozid955] .admin-auto-grid .admin-table-cell-secondary::before {
        content: attr(data-label) !important;
        font-size: 11px;
        font-weight: 700;
        color: var(--color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }

    .qt-ticket-badge[b-pauozid955],
    .qt-user-badge[b-pauozid955] {
        width: fit-content;
    }

    .qt-code-badge[b-pauozid955] {
        white-space: normal;
        word-break: break-all;
    }

    .qt-skeleton-row[b-pauozid955] {
        grid-template-columns: 60px 1fr 96px;
    }

    .qt-skeleton-text-sm[b-pauozid955] {
        display: none;
    }

    /* Pagination — own card on mobile */
    .qt-pagination[b-pauozid955] {
        background: var(--color-bg-primary);
        border: 1px solid var(--color-border-primary);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        margin-top: var(--space-3);
        padding: var(--space-3) var(--space-4);
        border-top: none;
    }
}

/* ==========================================================================
   SMALL SCREENS (767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {
    [b-pauozid955] .filter-field {
        width: 100%;
    }

    .qt-skeleton-row[b-pauozid955] {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .qt-skeleton-badge[b-pauozid955] {
        width: 100%;
        max-width: none;
    }

    /* Hide page numbers, show compact nav */
    .qt-page-numbers[b-pauozid955] {
        display: none;
    }

    .qt-pagination-controls[b-pauozid955] {
        gap: var(--space-2);
    }

    .qt-pagination[b-pauozid955] {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-3);
    }

    .qt-pagination-info[b-pauozid955] {
        width: 100%;
        text-align: center;
        order: -1;
    }

    .qt-page-size[b-pauozid955] {
        order: 3;
    }
}

@media (max-width: 575.98px) {
    .qt-pagination[b-pauozid955] {
        padding: var(--space-3);
    }

    /* Modal detail grid — single column on small screens */
    .qt-detail-grid[b-pauozid955] {
        grid-template-columns: 1fr;
    }

    .qt-detail-field:nth-child(odd)[b-pauozid955] {
        border-right: none;
    }

    .qt-detail-field[b-pauozid955] {
        border-bottom: 1px solid var(--color-border-primary);
    }

    .qt-detail-grid .qt-detail-field:nth-last-child(2)[b-pauozid955] {
        border-bottom: 1px solid var(--color-border-primary);
    }

    .qt-detail-grid .qt-detail-field:last-child[b-pauozid955] {
        border-bottom: none;
    }

    .qt-detail-section-title[b-pauozid955] {
        padding: 10px var(--space-3);
    }
}

/* ==========================================================================
   FOCUS STATES
   ========================================================================== */
.qt-link-btn:focus-visible[b-pauozid955],
.qt-page-nav:focus-visible[b-pauozid955],
.qt-page-num:focus-visible[b-pauozid955] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.qt-page-size:focus-visible[b-pauozid955] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .admin-table-card[b-pauozid955],
    .qt-detail-section[b-pauozid955] {
        animation: none;
    }

    .qt-skeleton[b-pauozid955] {
        animation: none;
    }

    .qt-ticket-badge[b-pauozid955],
    .qt-user-badge[b-pauozid955],
    .qt-timestamp[b-pauozid955],
    .qt-id-badge[b-pauozid955],
    .qt-code-badge[b-pauozid955],
    .qt-link-btn[b-pauozid955],
    .qt-page-nav[b-pauozid955],
    .qt-page-num[b-pauozid955],
    .qt-page-size[b-pauozid955],
    [b-pauozid955] .admin-table-row {
        transition: none;
    }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .qt-pagination[b-pauozid955] {
        display: none !important;
    }

    .admin-table-card[b-pauozid955] {
        border: 1px solid #ddd;
        box-shadow: none;
        background: var(--color-bg-primary);
    }
}
/* /Components/Pages/Admin/AdminRoles.razor.rz.scp.css */
/* ========================================
   ADMIN ROLES — 2026 DESIGN SYSTEM
   Scoped styles for /admin/roles

   Design tokens: _design-tokens.css
   Solid surfaces · bordered inputs · rise animation
   ======================================== */

/* ----------------------------------------
   KEYFRAMES
   ---------------------------------------- */
@keyframes rise-b-nuxxg3i3n9 {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------
   ALERT SPACING (AppAlert Integration)
   ---------------------------------------- */
.admin-container[b-nuxxg3i3n9] >  .app-alert {
    margin-bottom: var(--space-5);
}

/* ----------------------------------------
   CREATE ROLE — FILTERS GRID LAYOUT
   ---------------------------------------- */
.filters-grid[b-nuxxg3i3n9] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-end;
    margin-top: var(--space-4);
}

/* Individual filter field */
.filter-field[b-nuxxg3i3n9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    flex: 1;
}

.filter-field-wide[b-nuxxg3i3n9] {
    flex: 1;
    min-width: 280px;
    max-width: 400px;
}

/* Action button field */
.filter-field-action[b-nuxxg3i3n9] {
    flex: 0 0 auto;
    min-width: 140px;
    max-width: 180px;
}

/* Visible label — fixed height for alignment */
.filter-field-label[b-nuxxg3i3n9] {
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 18px;
    height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Filter input wrapper with icon */
.filter-input-wrapper[b-nuxxg3i3n9] {
    position: relative;
    width: 100%;
    height: 44px;
}

.filter-input-icon[b-nuxxg3i3n9] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    pointer-events: none;
    z-index: 1;
}

[b-nuxxg3i3n9] .filter-input,
.filter-input[b-nuxxg3i3n9],
.filter-input-wrapper input[b-nuxxg3i3n9],
.filter-input-wrapper[b-nuxxg3i3n9]  input {
    width: 100%;
    height: 44px !important;
    padding: 0 14px 0 42px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    box-sizing: border-box;
}

/* Override global Inputs.css 52px for ALL input types in filter fields */
.filter-field input[b-nuxxg3i3n9],
.filter-field[b-nuxxg3i3n9]  input,
.filter-field input[type="date"][b-nuxxg3i3n9],
.filter-field[b-nuxxg3i3n9]  input[type="date"],
.filter-field input[type="number"][b-nuxxg3i3n9],
.filter-field[b-nuxxg3i3n9]  input[type="number"],
.filter-field input[type="text"][b-nuxxg3i3n9],
.filter-field[b-nuxxg3i3n9]  input[type="text"],
.filters-grid input[b-nuxxg3i3n9],
.filters-grid[b-nuxxg3i3n9]  input {
    height: 44px !important;
    box-sizing: border-box;
}

[b-nuxxg3i3n9] .filter-input:hover,
.filter-input:hover[b-nuxxg3i3n9] {
    border-color: var(--color-border-secondary);
}

[b-nuxxg3i3n9] .filter-input:focus,
.filter-input:focus[b-nuxxg3i3n9] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

[b-nuxxg3i3n9] .filter-input::placeholder,
.filter-input[b-nuxxg3i3n9]::placeholder {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-normal);
}

/* Filter button — AppButton integration */
[b-nuxxg3i3n9] .filter-btn {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

/* LoadingSpinner inside filter button */
[b-nuxxg3i3n9] .filter-btn .loading-spinner-container {
    display: inline-flex;
    margin-right: var(--space-1);
}

/* ----------------------------------------
   TABLE CARD WRAPPER
   Solid surface with rise animation
   ---------------------------------------- */
.admin-table-card[b-nuxxg3i3n9] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    margin-top: var(--space-5);
    box-shadow: var(--shadow-sm);
    animation: rise-b-nuxxg3i3n9 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

/* Remove borders from individual rows — use separators */
[b-nuxxg3i3n9] .admin-table-row {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

[b-nuxxg3i3n9] .admin-table-row:hover {
    background: var(--color-bg-secondary);
}

/* Table rows container — remove gap since we use borders */
[b-nuxxg3i3n9] .admin-table-rows {
    gap: 0;
}

/* Header styling */
[b-nuxxg3i3n9] .admin-table-header {
    background: var(--color-bg-secondary);
    margin-bottom: 0;
    padding: var(--space-4) 0;
}

/* Table container — remove margin */
[b-nuxxg3i3n9] .admin-table-container {
    margin-top: 0;
}

/* ----------------------------------------
   GRID COLUMNS OVERRIDE
   ---------------------------------------- */
[b-nuxxg3i3n9] .admin-grid-cols-3 {
    --admin-grid-cols: 3;
}

/* ----------------------------------------
   LOADING STATE (PageLoader Integration)
   ---------------------------------------- */
.table-loading-state[b-nuxxg3i3n9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-8);
    color: var(--color-text-secondary);
}

.table-loading-state[b-nuxxg3i3n9]  .loading-spinner-container {
    flex-direction: column;
    gap: var(--space-4);
}

.table-loading-state[b-nuxxg3i3n9]  .loading-spinner--lg {
    width: 40px;
    height: 40px;
}

.table-loading-state[b-nuxxg3i3n9]  .loading-text {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* ----------------------------------------
   EMPTY STATE
   ---------------------------------------- */
.table-empty-state[b-nuxxg3i3n9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-8);
    text-align: center;
}

.empty-icon[b-nuxxg3i3n9] {
    width: 64px;
    height: 64px;
    color: #D1D9E6;
    margin-bottom: var(--space-4);
}

.empty-icon svg[b-nuxxg3i3n9] {
    width: 100%;
    height: 100%;
}

.empty-title[b-nuxxg3i3n9] {
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
}

.empty-text[b-nuxxg3i3n9] {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
}

/* ----------------------------------------
   ROLE NAME CELL
   ---------------------------------------- */
.role-name-cell[b-nuxxg3i3n9] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.role-icon[b-nuxxg3i3n9] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.role-icon svg[b-nuxxg3i3n9] {
    width: 18px;
    height: 18px;
}

/* Role icon color variants — flat backgrounds */
.role-icon-admin[b-nuxxg3i3n9] {
    background: var(--color-error-light);
    color: var(--color-error);
}

.role-icon-dispatcher[b-nuxxg3i3n9] {
    background: var(--color-info-light);
    color: var(--color-info);
}

.role-icon-driver[b-nuxxg3i3n9] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.role-icon-cashier[b-nuxxg3i3n9] {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.role-icon-passenger[b-nuxxg3i3n9] {
    background: var(--color-indigo-light);
    color: var(--color-indigo-dark);
}

.role-icon-guest[b-nuxxg3i3n9] {
    background: var(--color-bg-tertiary);
    color: #6B7280;
}

.role-icon-default[b-nuxxg3i3n9] {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

.role-name-content[b-nuxxg3i3n9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.role-name[b-nuxxg3i3n9] {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.system-badge[b-nuxxg3i3n9] {
    display: inline-flex;
    padding: 2px var(--space-2);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    width: fit-content;
}

/* ----------------------------------------
   COUNT BADGES — flat backgrounds
   ---------------------------------------- */
.count-badge[b-nuxxg3i3n9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
}

.count-badge svg[b-nuxxg3i3n9] {
    flex-shrink: 0;
}

.count-badge-users[b-nuxxg3i3n9] {
    background: var(--color-info-light);
    color: var(--color-info);
}

.count-badge-permissions[b-nuxxg3i3n9] {
    background: var(--color-success-light);
    color: var(--color-success);
}

/* ----------------------------------------
   MODAL ERROR
   ---------------------------------------- */
.admin-modal-error[b-nuxxg3i3n9] {
    background: var(--color-error-light);
    color: var(--color-error);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-4);
    border: 1px solid var(--color-error-border);
}

/* Edit role modal input */
.admin-input-simple[b-nuxxg3i3n9] {
    width: 100%;
    height: 44px;
    padding: 0 var(--space-4);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    box-sizing: border-box;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

.admin-input-simple:hover[b-nuxxg3i3n9] {
    border-color: var(--color-border-secondary);
}

.admin-input-simple:focus[b-nuxxg3i3n9] {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-bg-primary);
    box-shadow: var(--shadow-focus);
}

.admin-input-simple[b-nuxxg3i3n9]::placeholder {
    color: var(--color-text-muted);
}

/* Edit role field */
.edit-role-field[b-nuxxg3i3n9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Edit role footer */
.edit-role-footer[b-nuxxg3i3n9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
}

.edit-role-footer-left[b-nuxxg3i3n9],
.edit-role-footer-right[b-nuxxg3i3n9] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.edit-role-footer-right[b-nuxxg3i3n9] {
    margin-left: auto;
}

/* ----------------------------------------
   PERMISSIONS MODAL
   ---------------------------------------- */
.permissions-header[b-nuxxg3i3n9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.permissions-header-actions[b-nuxxg3i3n9] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.admin-modal-scroll[b-nuxxg3i3n9] {
    max-height: 55vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-secondary) transparent;
}

.admin-modal-scroll[b-nuxxg3i3n9]::-webkit-scrollbar {
    width: 6px;
}

.admin-modal-scroll[b-nuxxg3i3n9]::-webkit-scrollbar-track {
    background: transparent;
}

.admin-modal-scroll[b-nuxxg3i3n9]::-webkit-scrollbar-thumb {
    background: var(--color-border-secondary);
    border-radius: 3px;
}

.admin-permission-card[b-nuxxg3i3n9] {
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-primary);
    animation: rise-b-nuxxg3i3n9 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

.admin-permission-card + .admin-permission-card[b-nuxxg3i3n9] {
    margin-top: var(--space-3);
}

.admin-permission-card-header[b-nuxxg3i3n9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 14px var(--space-5);
    background: var(--color-bg-secondary);
}

.admin-permission-card-header-title[b-nuxxg3i3n9] {
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}

.admin-badge[b-nuxxg3i3n9] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
}

.admin-badge-info[b-nuxxg3i3n9] {
    background: var(--color-info-light);
    color: var(--color-info);
}

.admin-permission-card-body[b-nuxxg3i3n9] {
    padding: var(--space-4) var(--space-5);
}

/* Permissions grid — replaces Bootstrap row/col */
.permissions-grid[b-nuxxg3i3n9] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

.admin-permission-name[b-nuxxg3i3n9] {
    display: block;
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.4;
}

.admin-permission-description[b-nuxxg3i3n9] {
    display: block;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    line-height: 1.4;
    margin-top: 2px;
}

.admin-text-info[b-nuxxg3i3n9] {
    font-size: 13px;
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.admin-text-info strong[b-nuxxg3i3n9] {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.admin-text-muted[b-nuxxg3i3n9] {
    color: var(--color-text-muted);
    font-size: 13px;
}

/* Permission modal action buttons */
.admin-btn[b-nuxxg3i3n9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    border: 1px solid transparent;
}

.admin-btn-sm[b-nuxxg3i3n9] {
    padding: 5px var(--space-3);
    font-size: 12px;
    border-radius: var(--radius-md);
}

.admin-btn-outline[b-nuxxg3i3n9] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    color: var(--color-text-primary);
}

.admin-btn-outline:hover[b-nuxxg3i3n9] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
}

.admin-btn-secondary[b-nuxxg3i3n9] {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-primary);
}

.admin-btn-secondary:hover[b-nuxxg3i3n9] {
    background: var(--color-border-primary);
    color: var(--color-text-primary);
}

.admin-btn-primary[b-nuxxg3i3n9] {
    background: var(--color-primary);
    color: #fff;
    border: 1px solid var(--color-primary);
}

.admin-btn-primary:hover[b-nuxxg3i3n9] {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.admin-btn-danger[b-nuxxg3i3n9] {
    background: var(--color-error);
    color: #fff;
    border: 1px solid var(--color-error);
}

.admin-btn-danger:hover[b-nuxxg3i3n9] {
    opacity: 0.9;
}

.admin-btn:disabled[b-nuxxg3i3n9] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ----------------------------------------
   INFO CARD — flat surface
   ---------------------------------------- */
.info-card[b-nuxxg3i3n9] {
    background: var(--color-info-light);
    border: 1px solid #BAE6FD;
    border-radius: var(--radius-2xl);
    box-shadow: none;
    padding: var(--space-5);
    margin-top: var(--space-5);
    animation: rise-b-nuxxg3i3n9 0.45s cubic-bezier(.4, 0, .2, 1) 0.06s both;
}

.info-card-header[b-nuxxg3i3n9] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.info-icon[b-nuxxg3i3n9] {
    width: 20px;
    height: 20px;
    color: var(--color-info);
    flex-shrink: 0;
}

.info-card-title[b-nuxxg3i3n9] {
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-info);
    margin: 0;
}

.info-list[b-nuxxg3i3n9] {
    margin: 0;
    padding-left: var(--space-8);
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    line-height: 1.8;
}

.info-list li[b-nuxxg3i3n9] {
    padding-left: var(--space-1);
}

/* ----------------------------------------
   RESPONSIVE — Tablet
   ---------------------------------------- */
@media (max-width: 991.98px) {
    .filters-grid[b-nuxxg3i3n9] {
        gap: var(--space-3);
    }

    .filter-field[b-nuxxg3i3n9] {
        min-width: 160px;
        max-width: none;
        flex: 1 1 calc(50% - var(--space-2));
    }

    .filter-field-wide[b-nuxxg3i3n9] {
        flex: 1 1 100%;
        max-width: none;
    }

    .filter-field-action[b-nuxxg3i3n9] {
        flex: 1 1 100%;
        max-width: none;
    }

    .permissions-grid[b-nuxxg3i3n9] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ----------------------------------------
   RESPONSIVE — Mobile
   ---------------------------------------- */
@media (max-width: 767.98px) {
    .filters-grid[b-nuxxg3i3n9] {
        flex-direction: column;
        gap: var(--space-3);
    }

    .filter-field[b-nuxxg3i3n9],
    .filter-field-wide[b-nuxxg3i3n9],
    .filter-field-action[b-nuxxg3i3n9] {
        width: 100%;
        min-width: auto;
        max-width: none;
        flex: none;
    }

    .role-icon[b-nuxxg3i3n9] {
        width: 32px;
        height: 32px;
        border-radius: var(--radius-md);
    }

    .role-icon svg[b-nuxxg3i3n9] {
        width: 16px;
        height: 16px;
    }

    .count-badge[b-nuxxg3i3n9] {
        padding: var(--space-1) 10px;
        font-size: 12px;
    }

    .permissions-grid[b-nuxxg3i3n9] {
        grid-template-columns: 1fr;
    }

    .permissions-header[b-nuxxg3i3n9] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ----------------------------------------
   RESPONSIVE — Small mobile
   ---------------------------------------- */
@media (max-width: 575.98px) {
    .admin-table-card[b-nuxxg3i3n9] {
        border-radius: var(--radius-lg);
        margin-top: var(--space-4);
    }

    .table-empty-state[b-nuxxg3i3n9],
    .table-loading-state[b-nuxxg3i3n9] {
        padding: var(--space-10) var(--space-4);
    }

    .empty-icon[b-nuxxg3i3n9] {
        width: 48px;
        height: 48px;
    }

    .info-card[b-nuxxg3i3n9] {
        padding: var(--space-4);
        border-radius: var(--radius-lg);
    }

    .info-list[b-nuxxg3i3n9] {
        padding-left: var(--space-6);
        font-size: 13px;
    }

    .admin-permission-card[b-nuxxg3i3n9] {
        border-radius: var(--radius-lg);
    }

    .admin-permission-card-header[b-nuxxg3i3n9] {
        padding: var(--space-3) var(--space-4);
    }

    .admin-permission-card-body[b-nuxxg3i3n9] {
        padding: var(--space-3) var(--space-4);
    }
}

/* ----------------------------------------
   FOCUS STATES & ACCESSIBILITY
   ---------------------------------------- */
[b-nuxxg3i3n9] .filter-input:focus-visible,
.filter-input:focus-visible[b-nuxxg3i3n9] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.admin-input-simple:focus-visible[b-nuxxg3i3n9] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Checkbox/switch styling is shared in AdminShared.css. */

/* ----------------------------------------
   REDUCED MOTION
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .filter-input[b-nuxxg3i3n9],
    .admin-input-simple[b-nuxxg3i3n9],
    .admin-checkbox-label[b-nuxxg3i3n9],
    .admin-btn[b-nuxxg3i3n9],
    .count-badge[b-nuxxg3i3n9],
    [b-nuxxg3i3n9] .admin-table-row {
        transition: none;
    }

    .admin-table-card[b-nuxxg3i3n9],
    .admin-permission-card[b-nuxxg3i3n9],
    .info-card[b-nuxxg3i3n9] {
        animation: none;
    }

    [b-nuxxg3i3n9] .loading-spinner-container .spinner {
        animation: none;
    }
}

/* ----------------------------------------
   PRINT STYLES
   ---------------------------------------- */
@media print {
    .admin-search-card[b-nuxxg3i3n9] {
        display: none;
    }

    .admin-table-card[b-nuxxg3i3n9] {
        border: 1px solid #ddd;
        box-shadow: none;
    }

    .admin-grid-actions[b-nuxxg3i3n9] {
        display: none;
    }

    .info-card[b-nuxxg3i3n9] {
        display: none;
    }
}
/* /Components/Pages/Admin/AdminTickets.razor.rz.scp.css */
/* ========================================
   ADMIN TICKETS – Premium 2026 Design System
   Ticket operations: issue, search & manage
   Uses tk- prefix for component scoping
   ======================================== */

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes rise-b-pnvwdkbbgl {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer-b-pnvwdkbbgl {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes spin-b-pnvwdkbbgl {
    to { transform: rotate(360deg); }
}

@keyframes fadeSlideIn-b-pnvwdkbbgl {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.tk-header[b-pnvwdkbbgl] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    animation: rise-b-pnvwdkbbgl 0.4s cubic-bezier(.4,0,.2,1) both;
}

.tk-header-text[b-pnvwdkbbgl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.tk-title[b-pnvwdkbbgl] {
    font-family: var(--font-family-base);
    font-size: var(--font-size-2xl, 26px);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: var(--letter-spacing-tight, -0.02em);
    line-height: 1.2;
}

.tk-subtitle[b-pnvwdkbbgl] {
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    margin: 0;
    letter-spacing: 0.01em;
}

.tk-header-actions[b-pnvwdkbbgl] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.tk-btn-icon[b-pnvwdkbbgl] {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4,0,.2,1);
}

.tk-btn-icon:hover[b-pnvwdkbbgl] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.tk-btn-icon:focus-visible[b-pnvwdkbbgl] {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-color: var(--color-primary);
}

.tk-btn-icon svg[b-pnvwdkbbgl] {
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   ALERT SYSTEM
   ========================================================================== */

.tk-alert[b-pnvwdkbbgl] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    animation: fadeSlideIn-b-pnvwdkbbgl 0.3s cubic-bezier(.16,1,.3,1);
    margin-bottom: var(--space-4);
}

.tk-alert > svg[b-pnvwdkbbgl] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

.tk-alert-text[b-pnvwdkbbgl] {
    flex: 1;
    min-width: 0;
}

.tk-alert--error[b-pnvwdkbbgl] {
    background: var(--color-error-light);
    color: var(--color-error);
    border: 1px solid var(--color-error-border);
    border-left: 3px solid var(--color-error);
}

.tk-alert--success[b-pnvwdkbbgl] {
    background: var(--color-success-light);
    color: var(--color-success);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-left: 3px solid var(--color-success);
}

.tk-alert--warning[b-pnvwdkbbgl] {
    background: var(--color-warning-light);
    color: var(--color-warning);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-left: 3px solid var(--color-warning);
}

.tk-alert-dismiss[b-pnvwdkbbgl] {
    background: transparent;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    transition: opacity 200ms cubic-bezier(.4,0,.2,1);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.tk-alert-dismiss:hover[b-pnvwdkbbgl] {
    opacity: 1;
}

.tk-alert-dismiss svg[b-pnvwdkbbgl] {
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   LAYOUT GRID
   ========================================================================== */

.tk-grid[b-pnvwdkbbgl] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.tk-grid > *[b-pnvwdkbbgl] {
    animation: rise-b-pnvwdkbbgl 0.45s cubic-bezier(.4,0,.2,1) both;
}

.tk-grid > *:nth-child(1)[b-pnvwdkbbgl] { animation-delay: 0s; }
.tk-grid > *:nth-child(2)[b-pnvwdkbbgl] { animation-delay: 0.06s; }

@media (max-width: 1199.98px) {
    .tk-grid[b-pnvwdkbbgl] {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   CARD ENHANCEMENTS
   ========================================================================== */

[b-pnvwdkbbgl] .admin-card {
    overflow: visible;
}

.tk-hdr-left[b-pnvwdkbbgl] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.tk-icon[b-pnvwdkbbgl] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tk-icon svg[b-pnvwdkbbgl] {
    width: 20px;
    height: 20px;
}

.tk-icon--issue[b-pnvwdkbbgl] {
    background: var(--color-info-light);
    color: var(--color-primary);
}

.tk-icon--search[b-pnvwdkbbgl] {
    background: var(--color-success-light);
    color: var(--color-success);
}

/* ==========================================================================
   FORM FIELDS & INPUTS
   ========================================================================== */

.tk-issue-body[b-pnvwdkbbgl],
.tk-search-body[b-pnvwdkbbgl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.tk-section[b-pnvwdkbbgl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tk-section-title[b-pnvwdkbbgl] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border-primary);
}

.tk-section-title svg[b-pnvwdkbbgl] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.7;
}

.tk-fields-row[b-pnvwdkbbgl] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    align-items: start;
}

.tk-field[b-pnvwdkbbgl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tk-label[b-pnvwdkbbgl] {
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.4;
}

.tk-required[b-pnvwdkbbgl] {
    color: var(--color-error);
    font-weight: var(--font-weight-bold);
}

.tk-input[b-pnvwdkbbgl] {
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: 14px;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 200ms cubic-bezier(.4,0,.2,1),
                box-shadow 200ms cubic-bezier(.4,0,.2,1);
}

.tk-input:hover[b-pnvwdkbbgl] {
    border-color: var(--color-border-secondary);
}

.tk-input:focus[b-pnvwdkbbgl],
.tk-input:focus-visible[b-pnvwdkbbgl] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.tk-input[b-pnvwdkbbgl]::placeholder {
    color: var(--color-text-muted);
    font-weight: 400;
}

.tk-placeholder[b-pnvwdkbbgl] {
    color: var(--color-text-muted);
    font-weight: 400;
}

/* ==========================================================================
   MODERN DROPDOWN (shared pattern)
   ========================================================================== */

.modern-dropdown[b-pnvwdkbbgl] {
    position: relative;
}

.modern-dropdown-trigger[b-pnvwdkbbgl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color 200ms cubic-bezier(.4,0,.2,1),
                box-shadow 200ms cubic-bezier(.4,0,.2,1);
    box-sizing: border-box;
}

.modern-dropdown-trigger:hover[b-pnvwdkbbgl] {
    border-color: var(--color-border-secondary);
}

.modern-dropdown-trigger:focus-visible[b-pnvwdkbbgl] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.modern-dropdown-trigger > span[b-pnvwdkbbgl] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.modern-dropdown-chevron[b-pnvwdkbbgl] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.55;
    transition: transform 250ms cubic-bezier(.4,0,.2,1);
}

.modern-dropdown-chevron.open[b-pnvwdkbbgl] {
    transform: rotate(180deg);
}

.modern-dropdown-menu[b-pnvwdkbbgl] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 6000;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,.1));
    padding: 4px;
    display: flex;
    flex-direction: column;
    max-height: 280px;
    overflow-y: auto;
    animation: fadeSlideIn-b-pnvwdkbbgl 0.18s cubic-bezier(.4,0,.2,1) both;
}

.modern-dropdown-item[b-pnvwdkbbgl] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    text-align: left;
    transition: background 150ms cubic-bezier(.4,0,.2,1);
}

.modern-dropdown-item:hover[b-pnvwdkbbgl] {
    background: var(--color-bg-secondary);
}

.modern-dropdown-item.selected[b-pnvwdkbbgl] {
    background: rgba(26, 124, 202, 0.06);
    font-weight: 500;
}

.modern-dropdown-check[b-pnvwdkbbgl] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-primary);
    margin-left: auto;
}

.tk-dd-empty[b-pnvwdkbbgl] {
    padding: 16px 12px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
}

/* ==========================================================================
   PASSENGER SEARCH
   ========================================================================== */

.tk-passenger-search[b-pnvwdkbbgl] {
    position: relative;
}

.tk-search-input-row[b-pnvwdkbbgl] {
    position: relative;
    display: flex;
    align-items: center;
}

.tk-search-icon[b-pnvwdkbbgl] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
    pointer-events: none;
    z-index: 1;
}

.tk-input--search[b-pnvwdkbbgl] {
    padding-left: 40px !important;
    padding-right: 40px;
}

.tk-spinner[b-pnvwdkbbgl] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-border-primary);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-pnvwdkbbgl 0.6s linear infinite;
    flex-shrink: 0;
}

.tk-search-input-row .tk-spinner[b-pnvwdkbbgl] {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    animation: spin-b-pnvwdkbbgl 0.6s linear infinite;
}

.tk-spinner--btn[b-pnvwdkbbgl] {
    width: 16px;
    height: 16px;
    border-width: 2px;
    border-color: currentColor;
    border-top-color: transparent;
}

.tk-search-results[b-pnvwdkbbgl] {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    right: 0;
    z-index: 6001;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    max-height: 280px;
    overflow-y: auto;
    padding: var(--space-2);
    animation: fadeSlideIn-b-pnvwdkbbgl 0.2s ease;
}

.tk-search-item[b-pnvwdkbbgl] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4,0,.2,1);
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: inherit;
    color: inherit;
}

.tk-search-item:hover[b-pnvwdkbbgl] {
    background: var(--color-bg-secondary);
}

.tk-search-item.selected[b-pnvwdkbbgl] {
    background: var(--color-bg-tertiary);
}

.tk-avatar[b-pnvwdkbbgl] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-bg-primary);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tk-search-item-info[b-pnvwdkbbgl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.tk-search-item-name[b-pnvwdkbbgl] {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tk-search-item-email[b-pnvwdkbbgl] {
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tk-search-item-id[b-pnvwdkbbgl] {
    font-family: var(--font-family-mono);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.tk-search-empty[b-pnvwdkbbgl] {
    padding: var(--space-5) 14px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   SELECTED PASSENGER CHIP
   ========================================================================== */

.tk-chip[b-pnvwdkbbgl] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    animation: fadeSlideIn-b-pnvwdkbbgl 0.2s ease;
}

.tk-chip svg[b-pnvwdkbbgl] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.6;
}

.tk-chip-remove[b-pnvwdkbbgl] {
    background: transparent;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: color 200ms cubic-bezier(.4,0,.2,1);
    display: flex;
    align-items: center;
}

.tk-chip-remove:hover[b-pnvwdkbbgl] {
    color: var(--color-error);
}

.tk-chip-remove svg[b-pnvwdkbbgl] {
    width: 14px;
    height: 14px;
}

.tk-checking[b-pnvwdkbbgl] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    animation: fadeSlideIn-b-pnvwdkbbgl 0.2s ease;
}

/* ==========================================================================
   USER PROFILE CARD
   ========================================================================== */

.tk-profile-card[b-pnvwdkbbgl] {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    animation: fadeSlideIn-b-pnvwdkbbgl 0.3s ease;
}

.tk-profile-header[b-pnvwdkbbgl] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.tk-profile-avatar[b-pnvwdkbbgl] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-bg-primary);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tk-profile-info[b-pnvwdkbbgl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.tk-profile-name[b-pnvwdkbbgl] {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.tk-profile-email[b-pnvwdkbbgl] {
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.tk-profile-checks[b-pnvwdkbbgl] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.tk-check[b-pnvwdkbbgl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px var(--space-3);
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    border: 1px solid transparent;
}

.tk-check svg[b-pnvwdkbbgl] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.tk-check--pass[b-pnvwdkbbgl] {
    background: var(--color-success-light);
    border-color: rgba(16, 185, 129, 0.2);
    color: var(--color-success);
}

.tk-check--fail[b-pnvwdkbbgl] {
    background: var(--color-error-light);
    border-color: rgba(220, 38, 38, 0.2);
    color: var(--color-error);
}

.tk-profile-warnings[b-pnvwdkbbgl] {
    margin-top: var(--space-3);
}

.tk-warning-list[b-pnvwdkbbgl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.tk-warning-item[b-pnvwdkbbgl] {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   ZONE MULTI-SELECT
   ========================================================================== */

.tk-zone-select[b-pnvwdkbbgl] {
    position: relative;
}

.tk-zone-trigger[b-pnvwdkbbgl] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 6px var(--space-4);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 200ms cubic-bezier(.4,0,.2,1),
                box-shadow 200ms cubic-bezier(.4,0,.2,1);
    user-select: none;
}

.tk-zone-trigger:hover[b-pnvwdkbbgl] {
    border-color: var(--color-border-secondary);
}

.tk-zone-trigger.open[b-pnvwdkbbgl] {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.tk-zone-tags[b-pnvwdkbbgl] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}

.tk-zone-tag[b-pnvwdkbbgl] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-2) 3px 10px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    white-space: nowrap;
    line-height: 1.4;
}

.tk-zone-tag-remove[b-pnvwdkbbgl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-4);
    height: var(--space-4);
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--space-1);
    transition: all 200ms cubic-bezier(.4,0,.2,1);
}

.tk-zone-tag-remove:hover[b-pnvwdkbbgl] {
    background: var(--color-error-light);
    color: var(--color-error);
}

.tk-zone-tag-remove svg[b-pnvwdkbbgl] {
    width: 10px;
    height: 10px;
}

.tk-zone-arrow[b-pnvwdkbbgl] {
    flex-shrink: 0;
    color: var(--color-text-muted);
    transition: transform 200ms cubic-bezier(.4,0,.2,1);
}

.tk-zone-arrow.rotated[b-pnvwdkbbgl] {
    transform: rotate(180deg);
}

.tk-zone-menu[b-pnvwdkbbgl] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 6001;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: fadeSlideIn-b-pnvwdkbbgl 0.2s ease;
}

.tk-zone-menu-header[b-pnvwdkbbgl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border-primary);
}

.tk-zone-menu-count[b-pnvwdkbbgl] {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.tk-zone-menu-clear[b-pnvwdkbbgl] {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    transition: background 200ms cubic-bezier(.4,0,.2,1);
}

.tk-zone-menu-clear:hover[b-pnvwdkbbgl] {
    background: var(--color-bg-tertiary);
}

.tk-zone-menu-options[b-pnvwdkbbgl] {
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
}

.tk-zone-option[b-pnvwdkbbgl] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4,0,.2,1);
}

.tk-zone-option:hover[b-pnvwdkbbgl] {
    background: var(--color-bg-secondary);
}

.tk-zone-option.selected[b-pnvwdkbbgl] {
    background: var(--color-bg-tertiary);
}

.tk-zone-checkbox[b-pnvwdkbbgl] {
    width: var(--space-5);
    height: var(--space-5);
    border-radius: var(--radius-sm);
    border: 2px solid var(--color-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 200ms cubic-bezier(.4,0,.2,1);
    background: var(--color-bg-primary);
}

.tk-zone-checkbox.checked[b-pnvwdkbbgl] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg-primary);
}

.tk-zone-checkbox svg[b-pnvwdkbbgl] {
    width: var(--space-3);
    height: var(--space-3);
}

.tk-zone-option-content[b-pnvwdkbbgl] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tk-zone-option-name[b-pnvwdkbbgl] {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.tk-zone-option-number[b-pnvwdkbbgl] {
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.tk-btn[b-pnvwdkbbgl] {
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border-radius: var(--radius-lg);
    padding: 0 var(--space-5);
    height: 40px;
    min-width: 100px;
    transition: all 200ms cubic-bezier(.25,.1,.25,1);
    position: relative;
    border: none;
}

.tk-btn svg[b-pnvwdkbbgl] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.tk-btn:focus-visible[b-pnvwdkbbgl] {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.tk-btn:disabled[b-pnvwdkbbgl] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.tk-btn--lg[b-pnvwdkbbgl] {
    height: 44px;
    padding: 0 var(--space-6);
    font-size: 14px;
}

.tk-btn--primary[b-pnvwdkbbgl] {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    box-shadow: var(--btn-primary-shadow);
}

.tk-btn--primary:hover:not(:disabled)[b-pnvwdkbbgl] {
    background: var(--btn-primary-bg-hover);
    box-shadow: var(--btn-primary-shadow-hover);
    transform: translateY(-1px);
}

.tk-btn--primary:active:not(:disabled)[b-pnvwdkbbgl] {
    background: var(--btn-primary-bg-active);
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.tk-btn--secondary[b-pnvwdkbbgl] {
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-primary);
}

.tk-btn--secondary:hover:not(:disabled)[b-pnvwdkbbgl] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.tk-btn--ghost[b-pnvwdkbbgl] {
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-primary);
}

.tk-btn--ghost:hover:not(:disabled)[b-pnvwdkbbgl] {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

.tk-btn--danger[b-pnvwdkbbgl] {
    background: var(--btn-danger-bg);
    color: var(--btn-danger-text);
    box-shadow: var(--btn-danger-shadow);
}

.tk-btn--danger:hover:not(:disabled)[b-pnvwdkbbgl] {
    background: var(--btn-danger-bg-hover);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35);
    transform: translateY(-1px);
}

.tk-btn--danger:active:not(:disabled)[b-pnvwdkbbgl] {
    background: #991B1B;
    transform: translateY(0);
}

.tk-btn--warning[b-pnvwdkbbgl] {
    background: var(--color-warning);
    color: white;
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.3);
}

.tk-btn--warning:hover:not(:disabled)[b-pnvwdkbbgl] {
    filter: brightness(0.95);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35);
    transform: translateY(-1px);
}

.tk-btn--warning:active:not(:disabled)[b-pnvwdkbbgl] {
    filter: brightness(0.9);
    transform: translateY(0);
}

/* Issue & Search action rows */
.tk-issue-actions[b-pnvwdkbbgl],
.tk-search-actions[b-pnvwdkbbgl] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-2);
}

/* ==========================================================================
   TABLE CARD
   ========================================================================== */

.tk-table-card[b-pnvwdkbbgl] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    animation: rise-b-pnvwdkbbgl 0.45s cubic-bezier(.4,0,.2,1) both;
    animation-delay: 0.12s;
    overflow: hidden;
}

.tk-table-header-bar[b-pnvwdkbbgl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border-primary);
    background: var(--color-bg-secondary);
}

.tk-results-count[b-pnvwdkbbgl] {
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

[b-pnvwdkbbgl] .admin-table-container {
    margin-top: 0;
}

[b-pnvwdkbbgl] .admin-table-header {
    background: var(--color-bg-secondary);
    margin-bottom: 0;
    padding: var(--space-4) 0;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border-primary);
}

[b-pnvwdkbbgl] .admin-table-rows {
    gap: 0;
}

[b-pnvwdkbbgl] .admin-table-row {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    padding: 0 var(--space-3) 0 0;
    transition: background 200ms cubic-bezier(.4,0,.2,1);
}

[b-pnvwdkbbgl] .admin-table-row:hover {
    background: var(--color-bg-secondary);
    box-shadow: none;
    transform: none;
}

[b-pnvwdkbbgl] .admin-table-row:focus-visible {
    box-shadow: var(--shadow-focus);
    outline: none;
    z-index: 1;
    position: relative;
}

[b-pnvwdkbbgl] .admin-table-row:not(:last-child) {
    box-shadow: inset 0 -1px 0 var(--color-border-primary);
}

[b-pnvwdkbbgl] .admin-grid-cols-5 {
    --admin-grid-cols: 5;
}

/* Table cell elements */
.tk-ticket-id[b-pnvwdkbbgl] {
    font-family: var(--font-family-mono);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.tk-user-id[b-pnvwdkbbgl] {
    font-family: var(--font-family-mono);
    font-size: 13px;
    color: var(--color-text-secondary);
}

.tk-type-info[b-pnvwdkbbgl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.tk-type-name[b-pnvwdkbbgl] {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-size: 13px;
}

.tk-zone-badge[b-pnvwdkbbgl] {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    width: fit-content;
}

.tk-validity[b-pnvwdkbbgl] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.tk-validity-date[b-pnvwdkbbgl] {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    font-family: var(--font-family-mono);
    font-size: 12px;
}

.tk-validity-sep[b-pnvwdkbbgl] {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-normal);
}

.tk-badge-icon[b-pnvwdkbbgl] {
    width: var(--space-3);
    height: var(--space-3);
    flex-shrink: 0;
}

[b-pnvwdkbbgl] .admin-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.tk-pagination[b-pnvwdkbbgl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-top: 1px solid var(--color-border-primary);
}

.tk-pagination-info[b-pnvwdkbbgl] {
    font-family: var(--font-family-base);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tk-pagination-controls[b-pnvwdkbbgl] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.tk-page-nav[b-pnvwdkbbgl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background 200ms cubic-bezier(.4,0,.2,1),
                border-color 200ms cubic-bezier(.4,0,.2,1),
                color 200ms cubic-bezier(.4,0,.2,1);
    flex-shrink: 0;
}

.tk-page-nav svg[b-pnvwdkbbgl] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.tk-page-nav:hover:not(:disabled)[b-pnvwdkbbgl] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.tk-page-nav:disabled[b-pnvwdkbbgl] {
    opacity: 0.25;
    cursor: default;
}

.tk-page-nav:focus-visible[b-pnvwdkbbgl] {
    box-shadow: var(--shadow-focus);
    outline: none;
}

.tk-page-numbers[b-pnvwdkbbgl] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.tk-page-num[b-pnvwdkbbgl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 2px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    cursor: pointer;
    font-family: var(--font-family-base);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    color: var(--color-text-secondary);
    transition: background 200ms cubic-bezier(.4,0,.2,1),
                border-color 200ms cubic-bezier(.4,0,.2,1),
                color 200ms cubic-bezier(.4,0,.2,1);
    font-variant-numeric: tabular-nums;
}

.tk-page-num:hover:not(.active)[b-pnvwdkbbgl] {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

.tk-page-num.active[b-pnvwdkbbgl] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: 600;
    border-color: var(--color-primary);
}

.tk-page-num:focus-visible[b-pnvwdkbbgl] {
    box-shadow: var(--shadow-focus);
    outline: none;
}

.tk-page-ellipsis[b-pnvwdkbbgl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 34px;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    user-select: none;
}

.tk-page-size[b-pnvwdkbbgl] {
    height: 34px;
    padding: 0 30px 0 12px;
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    font-family: var(--font-family-base);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 3.75L5 6.25L7.5 3.75' stroke='%2394A3B8' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 200ms cubic-bezier(.4,0,.2,1),
                color 200ms cubic-bezier(.4,0,.2,1);
    font-variant-numeric: tabular-nums;
}

.tk-page-size:hover[b-pnvwdkbbgl] {
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.tk-page-size:focus-visible[b-pnvwdkbbgl] {
    box-shadow: var(--shadow-focus);
    outline: none;
    border-color: var(--color-primary);
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.tk-empty[b-pnvwdkbbgl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12, 48px) var(--space-6);
    text-align: center;
    animation: rise-b-pnvwdkbbgl 0.45s cubic-bezier(.4,0,.2,1) both;
}

.tk-empty-icon[b-pnvwdkbbgl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
    opacity: 0.4;
    transition: opacity 200ms cubic-bezier(.4,0,.2,1);
}

.tk-empty:hover .tk-empty-icon[b-pnvwdkbbgl] {
    opacity: 0.6;
}

.tk-empty-icon svg[b-pnvwdkbbgl] {
    width: 100%;
    height: 100%;
}

.tk-empty-title[b-pnvwdkbbgl] {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-text-muted);
    margin: 0;
    letter-spacing: -0.01em;
}

.tk-empty-text[b-pnvwdkbbgl] {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: var(--space-2) 0 0 0;
    max-width: 320px;
}

/* ==========================================================================
   SKELETON LOADING
   ========================================================================== */

.tk-skeleton-card[b-pnvwdkbbgl] {
    padding: var(--space-6) !important;
}

.tk-skeleton-hdr[b-pnvwdkbbgl] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.tk-skeleton-icon[b-pnvwdkbbgl] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 50%, var(--color-bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-pnvwdkbbgl 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

.tk-skeleton-body[b-pnvwdkbbgl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tk-skeleton-row[b-pnvwdkbbgl] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.tk-skeleton-line[b-pnvwdkbbgl] {
    height: 44px;
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 50%, var(--color-bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-pnvwdkbbgl 1.5s ease-in-out infinite;
}

.tk-skeleton-line--title[b-pnvwdkbbgl] { width: 180px; height: 28px; }
.tk-skeleton-line--full[b-pnvwdkbbgl]  { width: 100%; }
.tk-skeleton-line--70[b-pnvwdkbbgl]    { width: 70%; }
.tk-skeleton-line--50[b-pnvwdkbbgl]    { width: 100%; }
.tk-skeleton-line--40[b-pnvwdkbbgl]    { width: 40%; }
.tk-skeleton-line--30[b-pnvwdkbbgl]    { width: 30%; height: 40px; }

/* ==========================================================================
   MODAL STYLES (scoped + ::deep for content inside Modal component)
   ========================================================================== */

/* Scoped versions for content rendered directly */
.tk-modal-form[b-pnvwdkbbgl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tk-modal-field[b-pnvwdkbbgl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.tk-modal-label[b-pnvwdkbbgl] {
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.tk-modal-value[b-pnvwdkbbgl] {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 14px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    font-family: var(--font-family-mono);
}

.tk-modal-actions[b-pnvwdkbbgl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-primary);
}

.tk-modal-actions-left[b-pnvwdkbbgl] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.tk-modal-actions-right[b-pnvwdkbbgl] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* ::deep versions for elements inside Modal ChildContent */
[b-pnvwdkbbgl] .tk-modal-form { display: flex; flex-direction: column; gap: var(--space-4); }
[b-pnvwdkbbgl] .tk-modal-field { display: flex; flex-direction: column; gap: var(--space-1); }
[b-pnvwdkbbgl] .tk-modal-label { font-size: 13px; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
[b-pnvwdkbbgl] .tk-modal-value {
    display: flex; align-items: center; min-height: 42px; padding: 0 14px;
    background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md); font-size: 14px; font-weight: var(--font-weight-medium);
    color: var(--color-text-primary); font-family: var(--font-family-mono);
}
[b-pnvwdkbbgl] .tk-modal-actions {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3); margin-top: var(--space-5);
    padding-top: var(--space-4); border-top: 1px solid var(--color-border-primary);
}
[b-pnvwdkbbgl] .tk-modal-actions-left { display: flex; align-items: center; gap: var(--space-3); }
[b-pnvwdkbbgl] .tk-modal-actions-right { display: flex; align-items: center; gap: var(--space-3); }

/* Confirm modal layout */
.tk-confirm-content[b-pnvwdkbbgl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
}

.tk-confirm-icon[b-pnvwdkbbgl] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tk-confirm-icon svg[b-pnvwdkbbgl] {
    width: 28px;
    height: 28px;
}

.tk-confirm-icon--warning[b-pnvwdkbbgl] {
    background: var(--color-warning-light);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: var(--color-warning);
}

.tk-confirm-icon--danger[b-pnvwdkbbgl] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-error);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.tk-confirm-text[b-pnvwdkbbgl] {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
}

.tk-confirm-details[b-pnvwdkbbgl] {
    width: 100%;
    text-align: left;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tk-confirm-detail[b-pnvwdkbbgl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
}

.tk-detail-label[b-pnvwdkbbgl] {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.tk-detail-value[b-pnvwdkbbgl] {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-family: var(--font-family-mono);
}

.tk-confirm-actions[b-pnvwdkbbgl] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    width: 100%;
    padding-top: var(--space-2);
}

/* ::deep versions for confirm modals */
[b-pnvwdkbbgl] .tk-confirm-content { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); }
[b-pnvwdkbbgl] .tk-confirm-icon { width: 56px; height: 56px; border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; }
[b-pnvwdkbbgl] .tk-confirm-icon svg { width: 28px; height: 28px; }
[b-pnvwdkbbgl] .tk-confirm-icon--warning { background: var(--color-warning-light); border: 1px solid rgba(245, 158, 11, 0.2); color: var(--color-warning); }
[b-pnvwdkbbgl] .tk-confirm-icon--danger { background: rgba(239, 68, 68, 0.1); color: var(--color-error); border: 1px solid rgba(239, 68, 68, 0.2); }
[b-pnvwdkbbgl] .tk-confirm-text { font-size: 14px; color: var(--color-text-secondary); margin: 0; }
[b-pnvwdkbbgl] .tk-confirm-details {
    width: 100%; text-align: left; background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl);
    padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3);
}
[b-pnvwdkbbgl] .tk-confirm-detail { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
[b-pnvwdkbbgl] .tk-detail-label { font-size: 13px; font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }
[b-pnvwdkbbgl] .tk-detail-value { font-size: 14px; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); font-family: var(--font-family-mono); }
[b-pnvwdkbbgl] .tk-confirm-actions { display: flex; justify-content: flex-end; gap: var(--space-3); width: 100%; padding-top: var(--space-2); }

/* Button styles inside modals (::deep) */
[b-pnvwdkbbgl] .tk-btn {
    font-family: var(--font-family-base); font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold); line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--space-2); border-radius: var(--radius-lg); padding: 0 var(--space-5);
    height: 40px; min-width: 100px; transition: all 200ms cubic-bezier(.25,.1,.25,1);
    position: relative; border: none;
}
[b-pnvwdkbbgl] .tk-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
[b-pnvwdkbbgl] .tk-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
[b-pnvwdkbbgl] .tk-btn:disabled { opacity: 0.5; cursor: not-allowed; }

[b-pnvwdkbbgl] .tk-btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); box-shadow: var(--btn-primary-shadow); }
[b-pnvwdkbbgl] .tk-btn--primary:hover:not(:disabled) { background: var(--btn-primary-bg-hover); box-shadow: var(--btn-primary-shadow-hover); transform: translateY(-1px); }

[b-pnvwdkbbgl] .tk-btn--secondary { background: var(--color-bg-primary); color: var(--color-text-secondary); border: 1px solid var(--color-border-primary); }
[b-pnvwdkbbgl] .tk-btn--secondary:hover:not(:disabled) { background: var(--color-bg-secondary); border-color: var(--color-border-secondary); color: var(--color-text-primary); }

[b-pnvwdkbbgl] .tk-btn--danger { background: var(--btn-danger-bg); color: var(--btn-danger-text); box-shadow: var(--btn-danger-shadow); }
[b-pnvwdkbbgl] .tk-btn--danger:hover:not(:disabled) { background: var(--btn-danger-bg-hover); box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35); transform: translateY(-1px); }

[b-pnvwdkbbgl] .tk-btn--warning { background: var(--color-warning); color: white; box-shadow: 0 1px 3px rgba(245, 158, 11, 0.3); }
[b-pnvwdkbbgl] .tk-btn--warning:hover:not(:disabled) { filter: brightness(0.95); box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35); transform: translateY(-1px); }

[b-pnvwdkbbgl] .tk-btn--ghost { background: transparent; color: var(--color-text-secondary); border: 1px solid var(--color-border-primary); }
[b-pnvwdkbbgl] .tk-btn--ghost:hover:not(:disabled) { background: var(--color-bg-secondary); color: var(--color-text-primary); }

/* ==========================================================================
   QR CODE SECTION (Ticket Detail Modal)
   ========================================================================== */

@keyframes qrPulse-b-pnvwdkbbgl {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes qrReveal-b-pnvwdkbbgl {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Scoped versions */
.tk-qr-section[b-pnvwdkbbgl] {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border-primary);
    animation: fadeSlideIn-b-pnvwdkbbgl 0.3s cubic-bezier(.16,1,.3,1);
}

.tk-qr-loading[b-pnvwdkbbgl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
}

.tk-qr-skeleton[b-pnvwdkbbgl] {
    width: 200px;
    height: 200px;
    border-radius: var(--radius-xl);
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 50%, var(--color-bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-pnvwdkbbgl 1.5s ease-in-out infinite;
}

.tk-qr-loading-text[b-pnvwdkbbgl] {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    animation: qrPulse-b-pnvwdkbbgl 1.5s ease-in-out infinite;
}

.tk-qr-card[b-pnvwdkbbgl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    animation: qrReveal-b-pnvwdkbbgl 0.4s cubic-bezier(.16,1,.3,1) both;
}

.tk-qr-canvas[b-pnvwdkbbgl] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.tk-qr-canvas canvas[b-pnvwdkbbgl] {
    display: block;
}

.tk-qr-meta[b-pnvwdkbbgl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
}

.tk-qr-expiry[b-pnvwdkbbgl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px var(--space-3);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.tk-qr-expiry svg[b-pnvwdkbbgl] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.6;
}

.tk-qr-refresh[b-pnvwdkbbgl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px var(--space-4);
    background: transparent;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4,0,.2,1);
    font-family: inherit;
}

.tk-qr-refresh:hover:not(:disabled)[b-pnvwdkbbgl] {
    background: var(--color-bg-tertiary);
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

.tk-qr-refresh:active:not(:disabled)[b-pnvwdkbbgl] {
    transform: translateY(0);
}

.tk-qr-refresh:disabled[b-pnvwdkbbgl] {
    opacity: 0.5;
    cursor: not-allowed;
}

.tk-qr-refresh svg[b-pnvwdkbbgl] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.tk-qr-error[b-pnvwdkbbgl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-4);
    background: var(--color-error-light);
    border: 1px solid var(--color-error-border);
    border-radius: var(--radius-xl);
    text-align: center;
}

.tk-qr-error > svg[b-pnvwdkbbgl] {
    width: 24px;
    height: 24px;
    color: var(--color-error);
    flex-shrink: 0;
}

.tk-qr-error > span[b-pnvwdkbbgl] {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-error);
}

.tk-qr-error .tk-qr-refresh[b-pnvwdkbbgl] {
    border-color: rgba(220, 38, 38, 0.3);
    color: var(--color-error);
}

.tk-qr-error .tk-qr-refresh:hover:not(:disabled)[b-pnvwdkbbgl] {
    background: rgba(220, 38, 38, 0.08);
    border-color: var(--color-error);
}

/* ::deep versions for QR elements inside Modal ChildContent */
[b-pnvwdkbbgl] .tk-qr-section {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border-primary);
    animation: fadeSlideIn-b-pnvwdkbbgl 0.3s cubic-bezier(.16,1,.3,1);
}

[b-pnvwdkbbgl] .tk-qr-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
}

[b-pnvwdkbbgl] .tk-qr-skeleton {
    width: 200px;
    height: 200px;
    border-radius: var(--radius-xl);
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 50%, var(--color-bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-pnvwdkbbgl 1.5s ease-in-out infinite;
}

[b-pnvwdkbbgl] .tk-qr-loading-text {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    animation: qrPulse-b-pnvwdkbbgl 1.5s ease-in-out infinite;
}

[b-pnvwdkbbgl] .tk-qr-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    animation: qrReveal-b-pnvwdkbbgl 0.4s cubic-bezier(.16,1,.3,1) both;
}

[b-pnvwdkbbgl] .tk-qr-canvas {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

[b-pnvwdkbbgl] .tk-qr-canvas canvas {
    display: block;
}

[b-pnvwdkbbgl] .tk-qr-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
}

[b-pnvwdkbbgl] .tk-qr-expiry {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px var(--space-3);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

[b-pnvwdkbbgl] .tk-qr-expiry svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.6;
}

[b-pnvwdkbbgl] .tk-qr-refresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px var(--space-4);
    background: transparent;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4,0,.2,1);
    font-family: inherit;
}

[b-pnvwdkbbgl] .tk-qr-refresh:hover:not(:disabled) {
    background: var(--color-bg-tertiary);
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

[b-pnvwdkbbgl] .tk-qr-refresh:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

[b-pnvwdkbbgl] .tk-qr-refresh svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

[b-pnvwdkbbgl] .tk-qr-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-4);
    background: var(--color-error-light);
    border: 1px solid var(--color-error-border);
    border-radius: var(--radius-xl);
    text-align: center;
}

[b-pnvwdkbbgl] .tk-qr-error > svg {
    width: 24px;
    height: 24px;
    color: var(--color-error);
    flex-shrink: 0;
}

[b-pnvwdkbbgl] .tk-qr-error > span {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-error);
}

[b-pnvwdkbbgl] .tk-qr-error .tk-qr-refresh {
    border-color: rgba(220, 38, 38, 0.3);
    color: var(--color-error);
}

[b-pnvwdkbbgl] .tk-qr-error .tk-qr-refresh:hover:not(:disabled) {
    background: rgba(220, 38, 38, 0.08);
    border-color: var(--color-error);
}

/* ==========================================================================
   RESPONSIVE — TABLET
   ========================================================================== */

@media (max-width: 991.98px) {
    .tk-header[b-pnvwdkbbgl] {
        flex-direction: column;
        gap: var(--space-3);
    }

    .tk-fields-row[b-pnvwdkbbgl] {
        grid-template-columns: 1fr;
    }

    .tk-table-card[b-pnvwdkbbgl] {
        background: transparent;
        border: none;
        border-radius: 0;
        margin-top: var(--space-4);
        box-shadow: none;
        overflow: visible;
    }

    .tk-table-header-bar[b-pnvwdkbbgl] {
        background: var(--color-bg-primary);
        border: 1px solid var(--color-border-primary);
        border-radius: var(--radius-lg);
        margin-bottom: var(--space-3);
    }

    [b-pnvwdkbbgl] .admin-table-header,
    [b-pnvwdkbbgl] .admin-table-header.admin-auto-grid {
        display: none !important;
    }

    [b-pnvwdkbbgl] .admin-table-rows {
        gap: var(--space-3) !important;
    }

    [b-pnvwdkbbgl] .admin-table-row,
    [b-pnvwdkbbgl] .admin-table-container .admin-table-row {
        border-radius: var(--radius-lg) !important;
        margin-bottom: 0 !important;
        padding: var(--space-4) !important;
        background: var(--color-bg-primary) !important;
        border: 1px solid var(--color-border-primary) !important;
        box-shadow: var(--shadow-sm) !important;
        flex-direction: column !important;
    }

    [b-pnvwdkbbgl] .admin-table-row:not(:last-child) {
        box-shadow: var(--shadow-sm) !important;
    }

    [b-pnvwdkbbgl] .admin-table-row:hover {
        transform: none !important;
    }

    [b-pnvwdkbbgl] .admin-grid-cols-5 {
        min-width: 0 !important;
    }

    [b-pnvwdkbbgl] .admin-table-row-content,
    [b-pnvwdkbbgl] .admin-table-row-content.admin-auto-grid,
    [b-pnvwdkbbgl] .admin-table-row-content.admin-auto-grid.admin-grid-cols-5 {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-2) !important;
        padding: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    [b-pnvwdkbbgl] .admin-auto-grid .admin-table-cell,
    [b-pnvwdkbbgl] .admin-auto-grid .admin-table-cell-primary,
    [b-pnvwdkbbgl] .admin-auto-grid .admin-table-cell-secondary {
        display: grid !important;
        grid-template-columns: 90px 1fr;
        align-items: baseline;
        gap: var(--space-3);
        padding: var(--space-1) 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        font-size: 13px;
        width: 100% !important;
        min-width: 0 !important;
    }

    [b-pnvwdkbbgl] .admin-auto-grid .admin-table-cell-primary {
        font-size: 14px;
        font-weight: 600;
    }

    [b-pnvwdkbbgl] .admin-auto-grid .admin-table-cell::before,
    [b-pnvwdkbbgl] .admin-auto-grid .admin-table-cell-primary::before,
    [b-pnvwdkbbgl] .admin-auto-grid .admin-table-cell-secondary::before {
        content: attr(data-label) !important;
        font-size: 11px;
        font-weight: 700;
        color: var(--color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }

    [b-pnvwdkbbgl] .admin-badge {
        width: fit-content;
    }

    .tk-pagination[b-pnvwdkbbgl] {
        background: var(--color-bg-primary);
        border: 1px solid var(--color-border-primary);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        margin-top: var(--space-3);
        padding: var(--space-3) var(--space-4);
        border-top: none;
    }
}

/* ==========================================================================
   RESPONSIVE — MOBILE
   ========================================================================== */

@media (max-width: 767.98px) {
    .tk-skeleton-row[b-pnvwdkbbgl] {
        grid-template-columns: 1fr;
    }

    .tk-search-actions[b-pnvwdkbbgl] {
        flex-direction: column;
    }

    .tk-search-actions .tk-btn[b-pnvwdkbbgl] {
        width: 100%;
    }

    .tk-issue-actions .tk-btn[b-pnvwdkbbgl] {
        width: 100%;
    }

    /* Modal action buttons full width */
    .tk-modal-actions[b-pnvwdkbbgl],
    [b-pnvwdkbbgl] .tk-modal-actions {
        flex-direction: column;
    }

    .tk-modal-actions-left[b-pnvwdkbbgl],
    .tk-modal-actions-right[b-pnvwdkbbgl],
    [b-pnvwdkbbgl] .tk-modal-actions-left,
    [b-pnvwdkbbgl] .tk-modal-actions-right {
        flex-direction: column;
        width: 100%;
    }

    .tk-modal-actions .tk-btn[b-pnvwdkbbgl],
    .tk-modal-actions-left .tk-btn[b-pnvwdkbbgl],
    .tk-modal-actions-right .tk-btn[b-pnvwdkbbgl],
    [b-pnvwdkbbgl] .tk-modal-actions .tk-btn,
    [b-pnvwdkbbgl] .tk-modal-actions-left .tk-btn,
    [b-pnvwdkbbgl] .tk-modal-actions-right .tk-btn {
        width: 100%;
        justify-content: center;
    }

    .tk-confirm-actions[b-pnvwdkbbgl],
    [b-pnvwdkbbgl] .tk-confirm-actions {
        flex-direction: column;
    }

    .tk-confirm-actions .tk-btn[b-pnvwdkbbgl],
    [b-pnvwdkbbgl] .tk-confirm-actions .tk-btn {
        width: 100%;
        justify-content: center;
    }

    /* QR section mobile */
    .tk-qr-card[b-pnvwdkbbgl],
    [b-pnvwdkbbgl] .tk-qr-card {
        padding: var(--space-4);
    }

    .tk-qr-meta[b-pnvwdkbbgl],
    [b-pnvwdkbbgl] .tk-qr-meta {
        gap: var(--space-2);
    }

    /* Pagination mobile */
    .tk-page-numbers[b-pnvwdkbbgl] {
        display: none;
    }

    .tk-pagination-controls[b-pnvwdkbbgl] {
        gap: var(--space-2);
    }

    .tk-pagination[b-pnvwdkbbgl] {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-3);
    }

    .tk-pagination-info[b-pnvwdkbbgl] {
        width: 100%;
        text-align: center;
        order: -1;
    }

    .tk-page-size[b-pnvwdkbbgl] {
        order: 3;
    }
}

/* Extra small screens */
@media (max-width: 375px) {
    .tk-profile-checks[b-pnvwdkbbgl] {
        flex-direction: column;
    }
}

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {
    .tk-grid > *[b-pnvwdkbbgl],
    .tk-table-card[b-pnvwdkbbgl] {
        animation: none;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .tk-pagination[b-pnvwdkbbgl] {
        display: none;
    }

    .tk-issue-actions[b-pnvwdkbbgl],
    .tk-search-actions[b-pnvwdkbbgl],
    .tk-header-actions[b-pnvwdkbbgl] {
        display: none;
    }
}

/* ==========================================================================
   ACCESSIBILITY & REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .tk-skeleton-line[b-pnvwdkbbgl],
    .tk-skeleton-icon[b-pnvwdkbbgl] {
        animation: none;
    }

    .tk-btn[b-pnvwdkbbgl],
    .tk-btn-icon[b-pnvwdkbbgl],
    .tk-input[b-pnvwdkbbgl],
    .tk-zone-trigger[b-pnvwdkbbgl],
    .tk-zone-tag-remove[b-pnvwdkbbgl],
    .tk-chip-remove[b-pnvwdkbbgl],
    .tk-search-item[b-pnvwdkbbgl],
    .tk-zone-option[b-pnvwdkbbgl],
    .tk-zone-checkbox[b-pnvwdkbbgl],
    .tk-zone-arrow[b-pnvwdkbbgl],
    .tk-alert-dismiss[b-pnvwdkbbgl],
    .modern-dropdown-trigger[b-pnvwdkbbgl],
    .modern-dropdown-chevron[b-pnvwdkbbgl],
    .modern-dropdown-item[b-pnvwdkbbgl],
    .tk-page-nav[b-pnvwdkbbgl],
    .tk-page-num[b-pnvwdkbbgl],
    .tk-page-size[b-pnvwdkbbgl],
    [b-pnvwdkbbgl] .tk-btn {
        transition: none;
    }

    .tk-grid > *[b-pnvwdkbbgl],
    .tk-table-card[b-pnvwdkbbgl],
    .tk-empty[b-pnvwdkbbgl],
    .tk-header[b-pnvwdkbbgl],
    .tk-alert[b-pnvwdkbbgl],
    .tk-profile-card[b-pnvwdkbbgl],
    .tk-chip[b-pnvwdkbbgl],
    .tk-checking[b-pnvwdkbbgl] {
        animation: none;
    }

    .tk-search-results[b-pnvwdkbbgl],
    .tk-zone-menu[b-pnvwdkbbgl],
    .modern-dropdown-menu[b-pnvwdkbbgl] {
        animation: none;
    }

    .tk-qr-section[b-pnvwdkbbgl],
    .tk-qr-card[b-pnvwdkbbgl],
    .tk-qr-skeleton[b-pnvwdkbbgl],
    .tk-qr-loading-text[b-pnvwdkbbgl],
    [b-pnvwdkbbgl] .tk-qr-section,
    [b-pnvwdkbbgl] .tk-qr-card,
    [b-pnvwdkbbgl] .tk-qr-skeleton,
    [b-pnvwdkbbgl] .tk-qr-loading-text {
        animation: none;
    }

    .tk-qr-refresh[b-pnvwdkbbgl],
    [b-pnvwdkbbgl] .tk-qr-refresh {
        transition: none;
    }

    [b-pnvwdkbbgl] .admin-table-row,
    [b-pnvwdkbbgl] .admin-badge {
        transition: none;
    }

    .tk-spinner[b-pnvwdkbbgl] {
        animation: none;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .tk-table-card[b-pnvwdkbbgl] {
        border: 2px solid var(--color-text-primary);
    }

    .tk-btn--secondary[b-pnvwdkbbgl],
    .tk-btn--ghost[b-pnvwdkbbgl],
    [b-pnvwdkbbgl] .tk-btn--secondary,
    [b-pnvwdkbbgl] .tk-btn--ghost {
        border-width: 2px;
    }
}
/* /Components/Pages/Admin/AdminTimetables.razor.rz.scp.css */
/* ========================================
   ADMIN TIMETABLES — 2026 Design System
   Solid surfaces · bordered cards · no glass
   ======================================== */

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes rise-b-fwddsaig84 {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   TABLE CARD
   ========================================================================== */
.admin-table-card[b-fwddsaig84] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    margin-top: var(--space-5);
    box-shadow: var(--shadow-sm);
    animation: rise-b-fwddsaig84 0.45s cubic-bezier(.4, 0, .2, 1) both;
    overflow: hidden;
}

[b-fwddsaig84] .admin-table-container {
    margin-top: 0;
}

[b-fwddsaig84] .admin-table-header {
    background: var(--color-bg-secondary);
    margin-bottom: 0;
    padding: var(--space-4) 0;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border-primary);
}

[b-fwddsaig84] .admin-table-rows {
    gap: 0;
}

[b-fwddsaig84] .admin-table-row {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    padding: 0 var(--space-3) 0 0;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

[b-fwddsaig84] .admin-table-row:hover {
    background: var(--color-bg-secondary);
    box-shadow: none;
    transform: none;
}

[b-fwddsaig84] .admin-table-row:focus-visible {
    box-shadow: var(--shadow-focus);
    outline: none;
    z-index: 1;
    position: relative;
}

[b-fwddsaig84] .admin-table-row:not(:last-child) {
    box-shadow: inset 0 -1px 0 var(--color-border-primary);
}

/* Override grid columns for 5-column layout */
[b-fwddsaig84] .admin-grid-cols-5 {
    --admin-grid-cols: 5;
}

/* ==========================================================================
   SCOPED INPUT OVERRIDES
   ========================================================================== */
[b-fwddsaig84] .admin-input-simple {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1),
                box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
}

[b-fwddsaig84] .admin-input-simple:focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
    outline: none;
}

[b-fwddsaig84] .admin-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1),
                border-color 200ms cubic-bezier(.4, 0, .2, 1),
                box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
}

[b-fwddsaig84] .admin-btn:focus-visible {
    box-shadow: var(--shadow-focus);
    outline: none;
}

/* ==========================================================================
   FORM SECTIONS (inside Modal)
   ========================================================================== */
.form-section[b-fwddsaig84] {
    margin-bottom: var(--space-6);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    animation: rise-b-fwddsaig84 0.45s cubic-bezier(.4, 0, .2, 1) both;
    transition: box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
}

.form-section:hover[b-fwddsaig84] {
    box-shadow: var(--shadow-md);
    transform: none;
}

.form-section:last-of-type[b-fwddsaig84] {
    margin-bottom: 0;
}

.form-section-title[b-fwddsaig84] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-base, 15px);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-5) 0;
    font-family: var(--font-family-base, 'Inter', sans-serif);
}

.section-number[b-fwddsaig84] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--color-primary);
    color: var(--color-bg-primary);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
    transition: box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
}

.section-number:hover[b-fwddsaig84] {
    box-shadow: var(--shadow-focus);
}

/* ==========================================================================
   FORM GRID
   ========================================================================== */
.form-grid[b-fwddsaig84] {
    display: grid;
    gap: var(--space-5);
}

.form-grid--3col[b-fwddsaig84] {
    grid-template-columns: repeat(3, 1fr);
}

.form-grid--1col[b-fwddsaig84] {
    grid-template-columns: 1fr;
}

.form-grid-span-3[b-fwddsaig84] {
    grid-column: span 3;
}

/* ==========================================================================
   FORM ACTIONS
   ========================================================================== */
.form-actions[b-fwddsaig84] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-6);
    margin-top: var(--space-6);
}

.form-actions-left[b-fwddsaig84] {
    margin-right: auto;
}

/* ==========================================================================
   TABLE CELL STYLES
   ========================================================================== */
.station-name[b-fwddsaig84] {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    transition: color 200ms cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   LINE BADGE
   ========================================================================== */
.line-badge[b-fwddsaig84] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) 10px;
    background: rgba(26, 124, 202, 0.1);
    color: var(--color-primary);
    border: 1px solid rgba(26, 124, 202, 0.2);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   DAY TYPE BADGES
   ========================================================================== */
.day-type-badge[b-fwddsaig84] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

.day-type-badge--weekday[b-fwddsaig84] {
    background-color: rgba(26, 124, 202, 0.1);
    color: var(--color-primary);
    border: 1px solid rgba(26, 124, 202, 0.2);
}

.day-type-badge--saturday[b-fwddsaig84] {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--color-warning);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.day-type-badge--sunday[b-fwddsaig84] {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--color-error);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.day-type-badge--holiday[b-fwddsaig84] {
    background-color: rgba(139, 92, 246, 0.1);
    color: var(--color-purple, #7C3AED);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.day-type-badge--default[b-fwddsaig84] {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-primary);
}

/* ==========================================================================
   TIME BADGE
   ========================================================================== */
.time-badge[b-fwddsaig84] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-family-mono, 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    transition: color 200ms cubic-bezier(.4, 0, .2, 1);
}

.time-badge svg[b-fwddsaig84] {
    color: var(--color-text-secondary);
    transition: color 200ms cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   VALIDITY TEXT
   ========================================================================== */
.validity-text[b-fwddsaig84] {
    font-size: 13px;
    color: var(--color-text-secondary);
    transition: color 200ms cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.empty-state[b-fwddsaig84] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12, 48px) var(--space-6);
    text-align: center;
    animation: rise-b-fwddsaig84 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

.empty-state-icon[b-fwddsaig84] {
    width: 64px;
    height: 64px;
    margin-bottom: var(--space-4);
    color: var(--color-text-muted);
    opacity: 0.6;
    transition: opacity 200ms cubic-bezier(.4, 0, .2, 1);
}

.empty-state:hover .empty-state-icon[b-fwddsaig84] {
    opacity: 0.8;
}

.empty-state-icon svg[b-fwddsaig84] {
    width: 100%;
    height: 100%;
}

.empty-state-title[b-fwddsaig84] {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--text-lg, 1.125rem);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.empty-state-text[b-fwddsaig84] {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary);
    max-width: 360px;
}

/* ==========================================================================
   MARGIN UTILITIES
   ========================================================================== */
.mb-4[b-fwddsaig84] {
    margin-bottom: var(--space-4);
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */
@media print {
    .admin-table-card[b-fwddsaig84] {
        border: 1px solid #ddd;
        box-shadow: none;
        animation: none;
    }

    .form-section[b-fwddsaig84] {
        border: 1px solid #ddd;
        box-shadow: none;
        animation: none;
    }

    [b-fwddsaig84] .admin-table-row:hover {
        background: transparent;
    }
}

/* ==========================================================================
   TABLET & MOBILE — Card layout
   ========================================================================== */
@media (max-width: 991.98px) {
    .admin-table-card[b-fwddsaig84] {
        background: transparent;
        border: none;
        border-radius: 0;
        margin-top: var(--space-4);
        box-shadow: none;
        overflow: visible;
    }

    [b-fwddsaig84] .admin-table-header,
    [b-fwddsaig84] .admin-table-header.admin-auto-grid {
        display: none !important;
    }

    [b-fwddsaig84] .admin-table-rows {
        gap: var(--space-3) !important;
    }

    [b-fwddsaig84] .admin-table-row,
    [b-fwddsaig84] .admin-table-container .admin-table-row {
        border-radius: var(--radius-lg) !important;
        margin-bottom: 0 !important;
        padding: var(--space-4) !important;
        background: var(--color-bg-primary) !important;
        border: 1px solid var(--color-border-primary) !important;
        box-shadow: var(--shadow-sm) !important;
        flex-direction: column !important;
    }

    [b-fwddsaig84] .admin-table-row:not(:last-child) {
        box-shadow: var(--shadow-sm) !important;
    }

    [b-fwddsaig84] .admin-table-row:hover {
        transform: none !important;
    }

    [b-fwddsaig84] .admin-grid-cols-5 {
        min-width: 0 !important;
    }

    [b-fwddsaig84] .admin-table-row-content,
    [b-fwddsaig84] .admin-table-row-content.admin-auto-grid,
    [b-fwddsaig84] .admin-table-row-content.admin-auto-grid.admin-grid-cols-5 {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-2) !important;
        padding: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    [b-fwddsaig84] .admin-auto-grid .admin-table-cell,
    [b-fwddsaig84] .admin-auto-grid .admin-table-cell-primary,
    [b-fwddsaig84] .admin-auto-grid .admin-table-cell-secondary {
        display: grid !important;
        grid-template-columns: 90px 1fr;
        align-items: baseline;
        gap: var(--space-3);
        padding: var(--space-1) 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        font-size: 13px;
        width: 100% !important;
        min-width: 0 !important;
    }

    [b-fwddsaig84] .admin-auto-grid .admin-table-cell-primary {
        font-size: 14px;
        font-weight: 600;
    }

    [b-fwddsaig84] .admin-auto-grid .admin-table-cell::before,
    [b-fwddsaig84] .admin-auto-grid .admin-table-cell-primary::before,
    [b-fwddsaig84] .admin-auto-grid .admin-table-cell-secondary::before {
        content: attr(data-label) !important;
        font-size: 11px;
        font-weight: 700;
        color: var(--color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }

    /* Actions cell — full width with top separator */
    [b-fwddsaig84] .admin-auto-grid .admin-table-cell.admin-grid-actions {
        grid-template-columns: 1fr;
        padding-top: var(--space-3) !important;
        margin-top: var(--space-1);
        border-top: 1px solid var(--color-border-primary);
    }

    [b-fwddsaig84] .admin-auto-grid .admin-table-cell.admin-grid-actions::before {
        display: none !important;
    }

    /* Badges */
    [b-fwddsaig84] .admin-badge {
        width: fit-content;
    }

    .empty-state[b-fwddsaig84] {
        padding: var(--space-8) var(--space-4);
    }

    .empty-state-icon[b-fwddsaig84] {
        width: 48px;
        height: 48px;
    }
}

/* ==========================================================================
   MOBILE — Form grid responsive
   ========================================================================== */
@media (max-width: 767.98px) {
    .form-section[b-fwddsaig84] {
        margin-bottom: var(--space-5);
        padding: var(--space-4);
    }

    .form-grid--3col[b-fwddsaig84] {
        grid-template-columns: 1fr;
    }

    .form-grid-span-3[b-fwddsaig84] {
        grid-column: span 1;
    }

    .form-actions[b-fwddsaig84] {
        flex-direction: column;
    }

    .form-actions[b-fwddsaig84]  .app-button {
        width: 100%;
    }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .admin-table-card[b-fwddsaig84],
    .form-section[b-fwddsaig84],
    .empty-state[b-fwddsaig84] {
        animation: none;
    }

    .form-section:hover[b-fwddsaig84],
    .section-number:hover[b-fwddsaig84],
    .empty-state:hover .empty-state-icon[b-fwddsaig84] {
        transform: none;
    }

    .form-section[b-fwddsaig84],
    .form-actions[b-fwddsaig84],
    .section-number[b-fwddsaig84],
    .line-badge[b-fwddsaig84],
    .day-type-badge[b-fwddsaig84],
    .station-name[b-fwddsaig84],
    .time-badge[b-fwddsaig84],
    .time-badge svg[b-fwddsaig84],
    .validity-text[b-fwddsaig84],
    .empty-state-icon[b-fwddsaig84],
    [b-fwddsaig84] .admin-table-row,
    [b-fwddsaig84] .admin-input-simple,
    [b-fwddsaig84] .admin-btn {
        transition: none;
    }
}
/* /Components/Pages/Admin/AdminTracking.razor.rz.scp.css */
/* ========================================
   ADMIN TRACKING — 2026 Modern UI
   Scoped styles for /admin/tracking

   Solid surfaces, flat colors, rise animation,
   unified var(--color-primary) accent.
   ======================================== */

/* ----------------------------------------
   RISE ANIMATION (shared pattern)
   ---------------------------------------- */
@keyframes rise-b-ol39b107gr {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------
   ALERT SPACING
   ---------------------------------------- */
.admin-container[b-ol39b107gr] >  .app-alert {
    margin-bottom: var(--space-6);
}

/* ----------------------------------------
   FILTERS GRID LAYOUT
   ---------------------------------------- */
.filters-grid[b-ol39b107gr] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-end;
}

.filter-field[b-ol39b107gr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    flex: 1;
}

.filter-field-action[b-ol39b107gr] {
    flex: 0 0 auto;
    min-width: 120px;
    max-width: 160px;
}

.filter-field-label[b-ol39b107gr] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 18px;
    height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-btn[b-ol39b107gr] {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.filter-btn .spinner[b-ol39b107gr] {
    width: var(--space-4);
    height: var(--space-4);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--color-bg-primary);
    border-radius: 50%;
    animation: spin-b-ol39b107gr 0.8s linear infinite;
}

@keyframes spin-b-ol39b107gr {
    to { transform: rotate(360deg); }
}

/* ----------------------------------------
   TABLE CARD WRAPPER — Solid surface
   ---------------------------------------- */
.admin-table-card[b-ol39b107gr] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-top: var(--space-5);
    box-shadow: var(--shadow-sm);
    animation: rise-b-ol39b107gr .45s cubic-bezier(.4, 0, .2, 1) both;
    transition: border-color var(--transition-apple);
}

[b-ol39b107gr] .admin-table-row {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
}

[b-ol39b107gr] .admin-table-row:hover {
    background: var(--color-bg-secondary);
    box-shadow: none;
    border-color: transparent;
}

[b-ol39b107gr] .admin-table-rows {
    gap: 0;
}

[b-ol39b107gr] .admin-table-header {
    background: var(--color-bg-secondary);
    margin-bottom: 0;
    padding: var(--space-4) 0;
}

[b-ol39b107gr] .admin-table-container {
    margin-top: 0;
}

/* ----------------------------------------
   LOADING STATE
   ---------------------------------------- */
.table-loading-state[b-ol39b107gr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-16) var(--space-8);
    color: var(--color-text-secondary);
}

.loading-spinner[b-ol39b107gr] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border-primary);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-ol39b107gr 0.8s linear infinite;
}

/* ----------------------------------------
   EMPTY STATE
   ---------------------------------------- */
.table-empty-state[b-ol39b107gr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-8);
    text-align: center;
    animation: rise-b-ol39b107gr .45s cubic-bezier(.4, 0, .2, 1) .08s both;
}

.empty-icon[b-ol39b107gr] {
    width: 56px;
    height: 56px;
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.empty-icon svg[b-ol39b107gr] {
    width: 100%;
    height: 100%;
}

.empty-title[b-ol39b107gr] {
    font-size: 17px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
    letter-spacing: -0.01em;
}

.empty-text[b-ol39b107gr] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 360px;
    line-height: var(--line-height-normal);
}

/* ----------------------------------------
   AUTO-REFRESH TOGGLE — Solid surface
   ---------------------------------------- */
.auto-refresh-toggle[b-ol39b107gr] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    height: 44px;
    padding: 0 var(--space-3);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-apple), background var(--transition-apple);
}

.auto-refresh-toggle:hover[b-ol39b107gr] {
    border-color: var(--color-border-secondary);
}

.auto-refresh-toggle input[b-ol39b107gr] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch[b-ol39b107gr] {
    position: relative;
    width: 44px;
    height: var(--space-6);
    background: var(--color-border-primary);
    border-radius: var(--radius-lg);
    transition: background var(--transition-apple);
    flex-shrink: 0;
}

.toggle-switch[b-ol39b107gr]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: var(--space-5);
    height: var(--space-5);
    background: var(--color-bg-primary);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
    transition: transform var(--transition-apple);
}

.auto-refresh-toggle input:checked + .toggle-switch[b-ol39b107gr] {
    background: var(--color-success);
}

.auto-refresh-toggle input:checked + .toggle-switch[b-ol39b107gr]::after {
    transform: translateX(20px);
}

.auto-refresh-toggle input:focus-visible + .toggle-switch[b-ol39b107gr] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.toggle-label[b-ol39b107gr] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.last-refresh-time[b-ol39b107gr] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    padding-left: var(--space-1);
    border-left: 1px solid var(--color-border-primary);
    margin-left: var(--space-1);
}

/* ----------------------------------------
   STATUS LEGEND
   ---------------------------------------- */
.status-legend[b-ol39b107gr] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-top: var(--space-4);
    margin-top: var(--space-5);
    flex-wrap: wrap;
}

.legend-items[b-ol39b107gr] {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.legend-item[b-ol39b107gr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
}

.legend-dot[b-ol39b107gr] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Flat legend dots — no gradients, no box-shadow glow */
.legend-item-recent .legend-dot[b-ol39b107gr] {
    background: var(--color-success);
}

.legend-item-stale .legend-dot[b-ol39b107gr] {
    background: var(--color-warning);
}

.legend-item-offline .legend-dot[b-ol39b107gr] {
    background: var(--color-error);
}

.legend-divider[b-ol39b107gr] {
    width: 1px;
    height: var(--space-5);
    background: var(--color-border-primary);
}

.badge-sm[b-ol39b107gr] {
    padding: 2px var(--space-2);
    font-size: 11px;
}

/* ----------------------------------------
   VEHICLE COUNT BADGE — Flat
   ---------------------------------------- */
.vehicle-count-badge[b-ol39b107gr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--space-2) var(--space-4);
    background: var(--color-primary-light);
    border: 1px solid rgba(26, 124, 202, 0.15);
    border-radius: var(--radius-lg);
    animation: rise-b-ol39b107gr .45s cubic-bezier(.4, 0, .2, 1) both;
    transition: border-color var(--transition-apple);
}

.vehicle-count-badge:hover[b-ol39b107gr] {
    border-color: rgba(26, 124, 202, 0.3);
}

.badge-icon[b-ol39b107gr] {
    width: var(--space-5);
    height: var(--space-5);
    color: var(--color-primary);
}

.badge-count[b-ol39b107gr] {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 1;
}

.badge-label[b-ol39b107gr] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

/* ----------------------------------------
   VEHICLE ROW STATUS INDICATORS
   ---------------------------------------- */
.vehicle-row[b-ol39b107gr] {
    position: relative;
    overflow: hidden;
    transition: background var(--transition-apple);
}

/* Flat left-edge accent strip — solid colors */
.vehicle-row[b-ol39b107gr]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    transition: background var(--transition-apple);
}

.vehicle-row.status-recent[b-ol39b107gr]::before {
    background: var(--color-success);
}

.vehicle-row.status-stale[b-ol39b107gr]::before {
    background: var(--color-warning);
}

.vehicle-row.status-offline[b-ol39b107gr]::before {
    background: var(--color-error);
}

/* Subtle row background tints for stale/offline */
.vehicle-row.status-stale[b-ol39b107gr] {
    background: rgba(245, 158, 11, 0.03);
}

.vehicle-row.status-offline[b-ol39b107gr] {
    background: rgba(220, 38, 38, 0.03);
}

/* ----------------------------------------
   LINE INFO
   ---------------------------------------- */
.line-info[b-ol39b107gr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* Line number badge — flat primary instead of dark gradient */
.line-number-badge[b-ol39b107gr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: var(--space-1) var(--space-3);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-md);
    letter-spacing: -0.01em;
}

.line-category[b-ol39b107gr] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ----------------------------------------
   DIRECTION BADGE — Flat
   ---------------------------------------- */
.direction-badge[b-ol39b107gr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-md);
    transition: transform var(--transition-fast);
}

.direction-badge:hover[b-ol39b107gr] {
    transform: scale(1.05);
}

/* Flat direction colors — no gradient, no box-shadow glow */
.direction-a[b-ol39b107gr] {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.direction-b[b-ol39b107gr] {
    background: rgba(245, 158, 11, 0.12);
    color: var(--color-amber-dark);
}

/* ----------------------------------------
   DRIVER NAME
   ---------------------------------------- */
.driver-name[b-ol39b107gr] {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

/* ----------------------------------------
   LOCATION LINK
   ---------------------------------------- */
.location-link[b-ol39b107gr] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    padding: var(--space-1) var(--space-2);
    margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2));
    border-radius: var(--radius-sm);
    transition: all var(--transition-apple);
}

.location-link:hover[b-ol39b107gr] {
    background: var(--color-primary-light);
    color: var(--color-primary-hover);
}

.location-icon[b-ol39b107gr] {
    width: var(--space-4);
    height: var(--space-4);
    flex-shrink: 0;
}

.no-location[b-ol39b107gr] {
    color: var(--color-text-muted);
    font-style: italic;
}

/* ----------------------------------------
   SPEED VALUE
   ---------------------------------------- */
.speed-value[b-ol39b107gr] {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.speed-unit[b-ol39b107gr] {
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

/* ----------------------------------------
   BATTERY INDICATOR — Flat
   ---------------------------------------- */
.battery-indicator[b-ol39b107gr] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) 10px;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    transition: transform var(--transition-fast);
}

.battery-indicator:hover[b-ol39b107gr] {
    transform: scale(1.03);
}

.battery-icon[b-ol39b107gr] {
    width: var(--space-5);
    height: var(--space-5);
}

.battery-percent[b-ol39b107gr] {
    font-size: var(--font-size-xs);
}

/* Flat battery status colors */
.battery-good[b-ol39b107gr] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.battery-low[b-ol39b107gr] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--color-warning);
}

.battery-critical[b-ol39b107gr] {
    background: rgba(220, 38, 38, 0.08);
    color: var(--color-error);
    animation: pulse-critical-b-ol39b107gr 2s ease-in-out infinite;
}

@keyframes pulse-critical-b-ol39b107gr {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ----------------------------------------
   TIME STATUS — Flat
   ---------------------------------------- */
.update-time[b-ol39b107gr] {
    display: inline-block;
    font-weight: var(--font-weight-semibold);
    padding: var(--space-1) 10px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    transition: transform var(--transition-fast);
}

.update-time:hover[b-ol39b107gr] {
    transform: scale(1.03);
}

/* Flat time status colors */
.time-recent[b-ol39b107gr] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.time-stale[b-ol39b107gr] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--color-warning);
}

.time-offline[b-ol39b107gr] {
    background: rgba(220, 38, 38, 0.08);
    color: var(--color-error);
}

.no-data[b-ol39b107gr] {
    color: var(--color-text-muted);
}

/* ----------------------------------------
   MODERN DROPDOWN STYLES — Solid surface
   ---------------------------------------- */
.modern-dropdown[b-ol39b107gr] {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    outline: none;
    background: transparent !important;
    background-color: transparent !important;
}

.dropdown-trigger[b-ol39b107gr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    height: 44px;
    padding: 0 var(--space-3);
    background: var(--color-bg-primary) !important;
    background-color: var(--color-bg-primary) !important;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    box-shadow: none;
}

.dropdown-trigger:hover[b-ol39b107gr] {
    background: var(--color-bg-secondary) !important;
    background-color: var(--color-bg-secondary) !important;
    border-color: var(--color-border-secondary);
}

.modern-dropdown.open .dropdown-trigger[b-ol39b107gr] {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
    background: var(--color-bg-primary) !important;
    background-color: var(--color-bg-primary) !important;
}

.dropdown-content[b-ol39b107gr] {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.dropdown-value[b-ol39b107gr] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-arrow[b-ol39b107gr] {
    color: var(--color-text-secondary);
    flex-shrink: 0;
    transition: transform 200ms cubic-bezier(.4, 0, .2, 1);
}

.dropdown-arrow.rotated[b-ol39b107gr] {
    transform: rotate(180deg);
}

/* Dropdown Menu — Solid white surface */
.dropdown-menu[b-ol39b107gr] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    min-width: 220px;
    max-height: 320px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1001;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: popIn-b-ol39b107gr .18s cubic-bezier(.4, 0, .2, 1);
}

.dropdown-menu-wide[b-ol39b107gr] {
    min-width: 280px;
}

@keyframes popIn-b-ol39b107gr {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Dropdown Search */
.dropdown-search[b-ol39b107gr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--space-3) 14px;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-primary);
}

.dropdown-search .search-icon[b-ol39b107gr] {
    color: var(--color-text-muted);
    flex-shrink: 0;
    position: static;
    transform: none;
    width: var(--space-4);
    height: var(--space-4);
}

.search-input[b-ol39b107gr] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    outline: none;
    min-width: 0;
    padding: 0;
    height: auto;
}

.search-input[b-ol39b107gr]::placeholder {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-normal);
}

/* Dropdown Options */
.dropdown-options[b-ol39b107gr] {
    overflow-y: auto;
    max-height: 260px;
    padding: var(--space-2);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-secondary) transparent;
}

.dropdown-options[b-ol39b107gr]::-webkit-scrollbar {
    width: 6px;
}

.dropdown-options[b-ol39b107gr]::-webkit-scrollbar-track {
    background: transparent;
}

.dropdown-options[b-ol39b107gr]::-webkit-scrollbar-thumb {
    background: var(--color-border-secondary);
    border-radius: 3px;
}

.dropdown-option[b-ol39b107gr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 10px var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
}

.dropdown-option:hover[b-ol39b107gr] {
    background: var(--color-bg-secondary);
}

.dropdown-option.selected[b-ol39b107gr] {
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.dropdown-option.selected:hover[b-ol39b107gr] {
    background: rgba(26, 124, 202, 0.12);
}

.option-content[b-ol39b107gr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.option-label[b-ol39b107gr] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.option-sublabel[b-ol39b107gr] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
}

.dropdown-option.selected .option-sublabel[b-ol39b107gr] {
    color: var(--color-primary);
    opacity: 0.7;
}

.check-icon[b-ol39b107gr] {
    color: var(--color-primary);
    flex-shrink: 0;
}

.dropdown-empty[b-ol39b107gr] {
    padding: var(--space-5) 14px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
}

/* Status Dropdown — option content with colored dot */
.status-option-content[b-ol39b107gr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.status-dot[b-ol39b107gr] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot-recent[b-ol39b107gr] {
    background: var(--color-success);
}

.status-dot-stale[b-ol39b107gr] {
    background: var(--color-warning);
}

.status-dot-offline[b-ol39b107gr] {
    background: var(--color-error);
}

/* Placeholder text style for dropdown when showing "Any" */
.dropdown-placeholder-text[b-ol39b107gr] {
    color: var(--color-text-muted);
}

/* ----------------------------------------
   TRACKING GRID — Custom column proportions
   Follows admin-auto-grid conventions (gap: 0, cells use own padding).
   Line | Dir | Driver | Vehicle | Location | Speed | Battery | LastUpdate
   ---------------------------------------- */
[b-ol39b107gr] .tracking-grid {
    display: grid;
    grid-template-columns:
        minmax(80px, 0.7fr)      /* Line       */
        minmax(56px, 0.4fr)      /* Direction   */
        minmax(120px, 1.4fr)     /* Driver      */
        minmax(100px, 1fr)       /* Vehicle     */
        minmax(140px, 1.6fr)     /* Location    */
        minmax(72px, 0.6fr)      /* Speed       */
        minmax(80px, 0.7fr)      /* Battery     */
        minmax(100px, 0.9fr);    /* LastUpdate  */
    align-items: center;
    gap: 0;
    width: 100%;
}

[b-ol39b107gr] .admin-search-card {
    overflow: visible;
}

/* Force filters into a compact 4-column row */
[b-ol39b107gr] .aph-filters-content {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: var(--space-4) !important;
    align-items: end;
}

/* ----------------------------------------
   RESPONSIVE DESIGN
   ---------------------------------------- */

/* Tablet */
@media (max-width: 991.98px) {
    .filters-grid[b-ol39b107gr] {
        gap: var(--space-3);
    }

    .filter-field[b-ol39b107gr] {
        min-width: 160px;
        max-width: none;
        flex: 1 1 calc(50% - var(--space-2));
    }

    .filter-field-action[b-ol39b107gr] {
        flex: 1 1 100%;
        max-width: none;
    }

    [b-ol39b107gr] .aph-filters-content {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    [b-ol39b107gr] .tracking-grid {
        grid-template-columns:
            minmax(70px, 0.7fr)
            minmax(48px, 0.4fr)
            minmax(100px, 1.2fr)
            minmax(80px, 1fr)
            minmax(120px, 1.4fr)
            minmax(60px, 0.5fr)
            minmax(70px, 0.6fr)
            minmax(90px, 0.8fr);
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .filters-grid[b-ol39b107gr] {
        flex-direction: column;
        gap: var(--space-3);
    }

    .filter-field[b-ol39b107gr],
    .filter-field-action[b-ol39b107gr] {
        width: 100%;
        min-width: auto;
        max-width: none;
        flex: none;
    }

    [b-ol39b107gr] .aph-filters-content {
        grid-template-columns: 1fr 1fr !important;
    }

    .auto-refresh-toggle[b-ol39b107gr] {
        width: 100%;
        justify-content: space-between;
    }

    .dropdown-trigger[b-ol39b107gr] {
        height: 44px;
    }

    .dropdown-menu[b-ol39b107gr] {
        position: fixed;
        left: var(--space-4);
        right: var(--space-4);
        width: auto;
        min-width: auto;
        max-height: 50vh;
    }

    .status-legend[b-ol39b107gr] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .legend-items[b-ol39b107gr] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .legend-divider[b-ol39b107gr] {
        display: none;
    }

    .vehicle-count-badge[b-ol39b107gr] {
        width: 100%;
        justify-content: center;
    }
}

/* Small mobile */
@media (max-width: 575.98px) {
    .admin-table-card[b-ol39b107gr] {
        border-radius: var(--radius-lg);
        margin-top: var(--space-4);
    }

    .table-empty-state[b-ol39b107gr],
    .table-loading-state[b-ol39b107gr] {
        padding: var(--space-10) var(--space-4);
    }

    .empty-icon[b-ol39b107gr] {
        width: 48px;
        height: 48px;
    }
}

/* ----------------------------------------
   VEHICLE CELL (License Plate + QR)
   ---------------------------------------- */
[b-ol39b107gr] .tracking-vehicle-cell {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.vehicle-plate-tag[b-ol39b107gr] {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--space-2);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    background: var(--color-primary-light);
    color: var(--color-primary);
    border: none;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.4px;
}

.vehicle-qr-tag[b-ol39b107gr] {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-1);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: var(--font-weight-normal);
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    margin-left: var(--space-1);
}

/* ----------------------------------------
   SESSION ACTIONS COLUMN
   ---------------------------------------- */
.session-actions[b-ol39b107gr] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

[b-ol39b107gr] .session-actions .admin-action-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    transition: background-color var(--transition-normal), color var(--transition-normal), transform var(--transition-fast);
}

[b-ol39b107gr] .session-actions .admin-action-btn:hover {
    transform: scale(1.05);
}

[b-ol39b107gr] .admin-action-btn--stop {
    color: var(--color-error);
}

[b-ol39b107gr] .admin-action-btn--stop:hover {
    background-color: rgba(220, 38, 38, 0.08);
    color: var(--color-error);
}

[b-ol39b107gr] .admin-action-btn--view {
    color: var(--color-primary);
}

[b-ol39b107gr] .admin-action-btn--view:hover {
    background-color: var(--color-primary-light);
    color: var(--color-primary-hover);
}

.btn-spinner[b-ol39b107gr] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(220, 38, 38, 0.3);
    border-top-color: var(--color-error);
    border-radius: 50%;
    animation: spin-b-ol39b107gr 0.8s linear infinite;
}

/* ----------------------------------------
   STOP SESSION MODAL DETAILS
   ---------------------------------------- */
.stop-session-details[b-ol39b107gr] {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.stop-detail[b-ol39b107gr] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.stop-detail strong[b-ol39b107gr] {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

/* ----------------------------------------
   FOCUS STATES
   ---------------------------------------- */
.modern-dropdown:focus-visible .dropdown-trigger[b-ol39b107gr] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* ----------------------------------------
   TABLE HEADER — inherit standard admin-table-header-cell styles
   Only add overrides specific to the tracking page
   ---------------------------------------- */

/* ----------------------------------------
   REDUCED MOTION
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .dropdown-trigger[b-ol39b107gr],
    .dropdown-arrow[b-ol39b107gr],
    .dropdown-option[b-ol39b107gr],
    .dropdown-menu[b-ol39b107gr],
    .toggle-switch[b-ol39b107gr],
    .toggle-switch[b-ol39b107gr]::after,
    .auto-refresh-toggle[b-ol39b107gr],
    .vehicle-row[b-ol39b107gr]::before,
    .vehicle-row[b-ol39b107gr],
    .location-link[b-ol39b107gr],
    .battery-critical[b-ol39b107gr],
    .battery-indicator[b-ol39b107gr],
    .update-time[b-ol39b107gr],
    .direction-badge[b-ol39b107gr],
    .vehicle-count-badge[b-ol39b107gr],
    .admin-table-card[b-ol39b107gr],
    .filter-btn .spinner[b-ol39b107gr],
    .loading-spinner[b-ol39b107gr],
    .btn-spinner[b-ol39b107gr],
    [b-ol39b107gr] .session-actions .admin-action-btn {
        transition: none;
        animation: none;
    }

    .dropdown-menu[b-ol39b107gr] {
        animation: none;
    }

    .admin-table-card[b-ol39b107gr],
    .table-empty-state[b-ol39b107gr] {
        animation: none;
    }
}

/* ----------------------------------------
   PRINT STYLES
   ---------------------------------------- */
@media print {
    .admin-search-card[b-ol39b107gr] {
        display: none;
    }

    .admin-table-card[b-ol39b107gr] {
        border: 1px solid #000;
        box-shadow: none;
        background: var(--color-bg-primary);
    }
}
/* /Components/Pages/Admin/AdminTrackingEmulator.razor.rz.scp.css */
/* ========================================
   ADMIN TRACKING EMULATOR — 2026 Design System
   Scoped styles for /admin/tracking-emulator
   Solid surfaces, flat backgrounds, bordered inputs
   ======================================== */

/* ----------------------------------------
   RISE ANIMATION (standard entrance)
   ---------------------------------------- */
@keyframes rise-b-69h3p3penr {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------
   POP-IN ANIMATION (dropdown menus)
   ---------------------------------------- */
@keyframes popIn-b-69h3p3penr {
    from {
        opacity: 0;
        transform: scale(0.98) translateY(-6px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ----------------------------------------
   STATUS BADGE (in AdminPageHeader TitleActions)
   ---------------------------------------- */
.emulator-status-badge[b-69h3p3penr] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

.status-indicator[b-69h3p3penr] {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: 50%;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

.status-idle[b-69h3p3penr] {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

.status-idle .status-indicator[b-69h3p3penr] {
    background: var(--color-text-muted);
}

.status-active[b-69h3p3penr] {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.status-active .status-indicator[b-69h3p3penr] {
    background: var(--color-primary);
}

.status-running[b-69h3p3penr] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.status-running .status-indicator[b-69h3p3penr] {
    background: var(--color-success);
    animation: pulse-status-b-69h3p3penr 1.5s ease-in-out infinite;
}

@keyframes pulse-status-b-69h3p3penr {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

/* ----------------------------------------
   ALERT MESSAGES (AppAlert Integration)
   ---------------------------------------- */
.admin-container[b-69h3p3penr] >  .app-alert {
    margin-bottom: var(--space-5);
}

/* ----------------------------------------
   MAIN GRID LAYOUT
   Two-column on desktop, single column on mobile
   ---------------------------------------- */
.emulator-grid[b-69h3p3penr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: start;
}

.emulator-column[b-69h3p3penr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ----------------------------------------
   CARD COMPONENT — Solid Surface
   ---------------------------------------- */
.emulator-card[b-69h3p3penr] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: visible;
    box-shadow: var(--shadow-sm);
    position: relative;
    animation: rise-b-69h3p3penr .45s cubic-bezier(.4, 0, .2, 1) both;
    transition: box-shadow 200ms cubic-bezier(.4, 0, .2, 1), transform 200ms cubic-bezier(.4, 0, .2, 1);
}

/* Staggered animation delays */
.emulator-column:first-child .emulator-card:nth-child(1)[b-69h3p3penr] { animation-delay: 0s; }
.emulator-column:first-child .emulator-card:nth-child(2)[b-69h3p3penr] { animation-delay: 0.06s; }
.emulator-column:last-child .emulator-card:nth-child(1)[b-69h3p3penr] { animation-delay: 0.12s; }
.emulator-column:last-child .emulator-card:nth-child(2)[b-69h3p3penr] { animation-delay: 0.18s; }

.emulator-card:hover[b-69h3p3penr] {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.card-disabled[b-69h3p3penr] {
    opacity: 0.6;
    pointer-events: none;
}

/* Card Header */
.emulator-card-header[b-69h3p3penr] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) 0 var(--space-6);
}

.card-header-icon[b-69h3p3penr] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* All card header icons use flat primary-light */
.session-icon[b-69h3p3penr],
.location-icon[b-69h3p3penr],
.telemetry-icon[b-69h3p3penr],
.presets-icon[b-69h3p3penr] {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.card-header-text[b-69h3p3penr] {
    flex: 1;
    min-width: 0;
}

.emulator-card-title[b-69h3p3penr] {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1) 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.emulator-card-subtitle[b-69h3p3penr] {
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* Card Body */
.emulator-card-body[b-69h3p3penr] {
    padding: var(--space-6);
}

/* ----------------------------------------
   FORM FIELD SYSTEM
   Label (16px) -> Gap (8px) -> Input (48px)
   ---------------------------------------- */

/* Form Grid Layouts */
.form-grid[b-69h3p3penr] {
    display: grid;
    gap: var(--space-4);
}

.form-grid-2[b-69h3p3penr] {
    grid-template-columns: repeat(2, 1fr);
}

.form-grid-3[b-69h3p3penr] {
    grid-template-columns: repeat(3, 1fr);
}

/* Form Field Wrapper */
.form-field[b-69h3p3penr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-field-full[b-69h3p3penr] {
    grid-column: 1 / -1;
}

/* Form Field Label — Fixed height for alignment */
.form-field-label[b-69h3p3penr] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 16px;
    height: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0;
    display: block;
}

/* Form Field Input — Fixed 48px height, bordered */
.form-field-input[b-69h3p3penr] {
    height: 48px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    padding: 0 var(--space-4);
    font-size: 15px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    width: 100%;
    box-sizing: border-box;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

.form-field-input[b-69h3p3penr]::placeholder {
    color: var(--color-text-muted);
}

.form-field-input:hover[b-69h3p3penr] {
    border-color: var(--color-border-secondary);
}

.form-field-input:focus[b-69h3p3penr] {
    outline: none;
    border: 1px solid var(--color-primary);
    background: var(--color-bg-primary);
    box-shadow: var(--shadow-focus);
}

.form-field-input:disabled[b-69h3p3penr] {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    cursor: not-allowed;
}

/* Select element specific */
select.form-field-input[b-69h3p3penr] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='%2364748B' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 16px;
    padding-right: 40px;
    cursor: pointer;
}

/* Form Field Hint */
.form-field-hint[b-69h3p3penr] {
    font-size: 12px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* Input with Unit (e.g., km/h, %) */
.input-with-unit[b-69h3p3penr] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-unit .form-field-input[b-69h3p3penr] {
    padding-right: 50px;
}

.input-unit[b-69h3p3penr] {
    position: absolute;
    right: var(--space-4);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    pointer-events: none;
}

/* Form Section Title */
.form-section[b-69h3p3penr] {
    margin-bottom: var(--space-6);
}

.form-section:last-child[b-69h3p3penr] {
    margin-bottom: 0;
}

.form-section-title[b-69h3p3penr] {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4) 0;
    padding-bottom: var(--space-2);
}

/* Form Actions */
.form-actions[b-69h3p3penr] {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
}

/* ----------------------------------------
   MODERN DROPDOWN (48px to match inputs)
   ---------------------------------------- */
.modern-dropdown[b-69h3p3penr] {
    position: relative;
    width: 100%;
    outline: none;
    background: transparent !important;
    background-color: transparent !important;
}

.dropdown-trigger[b-69h3p3penr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    height: 48px;
    padding: 0 14px;
    background: var(--color-bg-primary) !important;
    background-color: var(--color-bg-primary) !important;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    box-shadow: none;
}

.dropdown-trigger:hover[b-69h3p3penr] {
    background: var(--color-bg-secondary) !important;
    background-color: var(--color-bg-secondary) !important;
    border-color: var(--color-border-secondary);
}

.modern-dropdown.open .dropdown-trigger[b-69h3p3penr] {
    border: 1px solid var(--color-primary);
    box-shadow: var(--shadow-focus);
    background: var(--color-bg-primary) !important;
    background-color: var(--color-bg-primary) !important;
}

.dropdown-content[b-69h3p3penr] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    background: transparent !important;
    background-color: transparent !important;
}

.dropdown-value[b-69h3p3penr] {
    font-size: 15px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-placeholder[b-69h3p3penr] {
    font-size: 15px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
}

.dropdown-arrow[b-69h3p3penr] {
    color: var(--color-text-secondary);
    flex-shrink: 0;
    transition: transform 200ms cubic-bezier(.4, 0, .2, 1);
}

.dropdown-arrow.rotated[b-69h3p3penr] {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.dropdown-menu[b-69h3p3penr] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    min-width: 220px;
    max-height: 320px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1001;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: popIn-b-69h3p3penr 0.18s cubic-bezier(.4, 0, .2, 1);
}

.dropdown-menu-wide[b-69h3p3penr] {
    min-width: 280px;
}

/* Dropdown Search */
.dropdown-search[b-69h3p3penr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--space-3) 14px;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-primary);
}

.dropdown-search .search-icon[b-69h3p3penr] {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.search-input[b-69h3p3penr] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    outline: none;
    min-width: 0;
    padding: 0;
}

.search-input[b-69h3p3penr]::placeholder {
    color: var(--color-text-muted);
}

/* Dropdown Options */
.dropdown-options[b-69h3p3penr] {
    overflow-y: auto;
    max-height: 260px;
    padding: var(--space-2);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-secondary) transparent;
}

.dropdown-option[b-69h3p3penr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 10px var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
}

.dropdown-option:hover[b-69h3p3penr] {
    background: var(--color-bg-secondary);
}

.dropdown-option.selected[b-69h3p3penr] {
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.option-content[b-69h3p3penr] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.option-label[b-69h3p3penr] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.check-icon[b-69h3p3penr] {
    color: var(--color-primary);
    flex-shrink: 0;
}

.dropdown-empty[b-69h3p3penr] {
    padding: var(--space-5) 14px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
}

/* ----------------------------------------
   SESSION ACTIVE DISPLAY
   ---------------------------------------- */
.session-active[b-69h3p3penr] {
    /* Within card body padding */
}

.session-info-grid[b-69h3p3penr] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    margin-bottom: 0;
}

.session-info-item[b-69h3p3penr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.session-info-label[b-69h3p3penr] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.session-info-value[b-69h3p3penr] {
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.session-id[b-69h3p3penr] {
    font-family: monospace;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.direction-badge[b-69h3p3penr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
}

.direction-a[b-69h3p3penr] {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.direction-b[b-69h3p3penr] {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

/* ----------------------------------------
   EMPTY STATE
   ---------------------------------------- */
.empty-state[b-69h3p3penr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-6);
    text-align: center;
}

.empty-state-icon[b-69h3p3penr] {
    color: var(--color-border-primary);
    margin-bottom: var(--space-4);
}

.empty-state-text[b-69h3p3penr] {
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    margin: 0;
}

/* ----------------------------------------
   AUTO-SEND SECTION
   ---------------------------------------- */
.autosend-section[b-69h3p3penr] {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
}

.autosend-header[b-69h3p3penr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}

.autosend-header .form-section-title[b-69h3p3penr] {
    margin: 0;
    padding: 0;
    border: none;
}

.autosend-description[b-69h3p3penr] {
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4) 0;
    line-height: 1.5;
}

/* ----------------------------------------
   TOGGLE SWITCH
   ---------------------------------------- */
.toggle-switch[b-69h3p3penr] {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.toggle-switch input[b-69h3p3penr] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-69h3p3penr] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-text-light);
    border-radius: 26px;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

.toggle-slider[b-69h3p3penr]::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: var(--color-bg-primary);
    border-radius: 50%;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.toggle-switch input:checked + .toggle-slider[b-69h3p3penr] {
    background: var(--color-success);
}

.toggle-switch input:checked + .toggle-slider[b-69h3p3penr]::before {
    transform: translateX(22px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.toggle-switch input:focus + .toggle-slider[b-69h3p3penr] {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

/* ----------------------------------------
   COUNTER DISPLAY
   ---------------------------------------- */
.counter-display[b-69h3p3penr] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: 48px;
    padding: 0 var(--space-4);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
}

.counter-value[b-69h3p3penr] {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-family: monospace;
}

.counter-indicator[b-69h3p3penr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    padding: var(--space-1) 10px;
    border-radius: var(--radius-pill);
}

.counter-indicator.active[b-69h3p3penr] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.pulse-dot[b-69h3p3penr] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-success);
    animation: pulse-dot-b-69h3p3penr 1.5s ease-in-out infinite;
}

@keyframes pulse-dot-b-69h3p3penr {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ----------------------------------------
   TELEMETRY CARD
   ---------------------------------------- */
.telemetry-grid[b-69h3p3penr] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.telemetry-item[b-69h3p3penr] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-primary);
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1), box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
}

.telemetry-item:hover[b-69h3p3penr] {
    box-shadow: var(--shadow-sm);
}

.telemetry-icon-wrapper[b-69h3p3penr] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Default telemetry icons: flat primary-light */
.coord-icon[b-69h3p3penr],
.speed-icon[b-69h3p3penr],
.heading-icon[b-69h3p3penr],
.battery-icon[b-69h3p3penr] {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

/* Battery color-coded overrides */
.battery-icon.battery-low[b-69h3p3penr] {
    background: var(--color-error-light);
    color: var(--color-error);
}

.battery-icon.battery-medium[b-69h3p3penr] {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.telemetry-content[b-69h3p3penr] {
    flex: 1;
    min-width: 0;
}

.telemetry-label[b-69h3p3penr] {
    display: block;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
}

.telemetry-value[b-69h3p3penr] {
    display: block;
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.telemetry-value.battery-low[b-69h3p3penr] {
    color: var(--color-error);
}

.telemetry-value.battery-medium[b-69h3p3penr] {
    color: var(--color-warning);
}

.telemetry-value .no-data[b-69h3p3penr] {
    color: var(--color-text-muted);
    font-style: italic;
    font-weight: var(--font-weight-normal);
}

/* ----------------------------------------
   PRESETS SECTION
   ---------------------------------------- */
.presets-section[b-69h3p3penr] {
    margin-bottom: var(--space-6);
}

.presets-section:last-child[b-69h3p3penr] {
    margin-bottom: 0;
}

.presets-grid[b-69h3p3penr] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.preset-btn[b-69h3p3penr] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    text-align: left;
}

.preset-btn:hover:not(:disabled)[b-69h3p3penr] {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.preset-btn:disabled[b-69h3p3penr] {
    opacity: 0.5;
    cursor: not-allowed;
}

.preset-btn svg[b-69h3p3penr] {
    color: var(--color-primary);
}

.preset-name[b-69h3p3penr] {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.preset-coords[b-69h3p3penr] {
    font-size: 12px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    font-family: monospace;
}

/* Simulation Actions */
.simulation-actions[b-69h3p3penr] {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.simulation-btn[b-69h3p3penr] {
    flex: 1;
    min-width: 150px;
}

/* ----------------------------------------
   QUICK LINKS
   ---------------------------------------- */
.quick-links[b-69h3p3penr] {
    display: flex;
    gap: var(--space-3);
    animation: rise-b-69h3p3penr .45s cubic-bezier(.4, 0, .2, 1) both;
    animation-delay: 0.24s;
}

.quick-link[b-69h3p3penr] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px var(--space-5);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

.quick-link:hover[b-69h3p3penr] {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary);
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.quick-link svg:first-child[b-69h3p3penr] {
    color: var(--color-primary);
}

.quick-link svg:last-child[b-69h3p3penr] {
    color: var(--color-text-muted);
    transition: transform 200ms cubic-bezier(.4, 0, .2, 1);
}

.quick-link:hover svg:last-child[b-69h3p3penr] {
    transform: translateX(4px);
    color: var(--color-primary);
}

/* ----------------------------------------
   RESPONSIVE — Tablet
   ---------------------------------------- */
@media (max-width: 1023.98px) {
    .emulator-grid[b-69h3p3penr] {
        grid-template-columns: 1fr;
    }

    .telemetry-grid[b-69h3p3penr] {
        grid-template-columns: repeat(2, 1fr);
    }

    .presets-grid[b-69h3p3penr] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ----------------------------------------
   RESPONSIVE — Mobile
   ---------------------------------------- */
@media (max-width: 767.98px) {
    .emulator-header[b-69h3p3penr] {
        flex-direction: column;
        gap: var(--space-4);
    }

    .emulator-status-badge[b-69h3p3penr] {
        align-self: flex-start;
    }

    .emulator-card[b-69h3p3penr] {
        border-radius: var(--radius-xl);
    }

    .emulator-card-header[b-69h3p3penr] {
        padding: var(--space-5) var(--space-5) 0 var(--space-5);
    }

    .emulator-card-body[b-69h3p3penr] {
        padding: var(--space-5);
    }

    .card-header-icon[b-69h3p3penr] {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-lg);
    }

    .emulator-card-title[b-69h3p3penr] {
        font-size: 16px;
    }

    /* Form Grid — Stack on mobile */
    .form-grid-2[b-69h3p3penr],
    .form-grid-3[b-69h3p3penr] {
        grid-template-columns: 1fr;
    }

    .session-info-grid[b-69h3p3penr] {
        grid-template-columns: 1fr;
        gap: var(--space-3);
        padding: var(--space-4);
        border-radius: var(--radius-lg);
    }

    .telemetry-grid[b-69h3p3penr] {
        grid-template-columns: 1fr;
    }

    .telemetry-item[b-69h3p3penr] {
        border-radius: var(--radius-lg);
    }

    .presets-grid[b-69h3p3penr] {
        grid-template-columns: 1fr;
    }

    .preset-btn[b-69h3p3penr] {
        border-radius: var(--radius-lg);
    }

    .simulation-actions[b-69h3p3penr] {
        flex-direction: column;
    }

    .simulation-btn[b-69h3p3penr] {
        width: 100%;
    }

    .quick-links[b-69h3p3penr] {
        flex-direction: column;
    }

    .quick-link[b-69h3p3penr] {
        width: 100%;
        justify-content: space-between;
        border-radius: var(--radius-lg);
    }

    /* Dropdown — full-width fixed on mobile */
    .dropdown-menu[b-69h3p3penr] {
        position: fixed;
        left: var(--space-4);
        right: var(--space-4);
        width: auto;
        min-width: auto;
        max-height: 50vh;
    }

    .autosend-header[b-69h3p3penr] {
        flex-wrap: wrap;
    }
}

/* ----------------------------------------
   RESPONSIVE — Small mobile
   ---------------------------------------- */
@media (max-width: 479.98px) {
    .emulator-card[b-69h3p3penr] {
        border-radius: var(--radius-lg);
    }

    .emulator-card-header[b-69h3p3penr] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-4) 0 var(--space-4);
    }

    .emulator-card-body[b-69h3p3penr] {
        padding: var(--space-4);
    }

    .emulator-card-title[b-69h3p3penr] {
        font-size: 15px;
    }

    .card-header-icon[b-69h3p3penr] {
        width: 38px;
        height: 38px;
        border-radius: var(--radius-md);
    }

    .form-actions .admin-btn[b-69h3p3penr] {
        width: 100%;
    }

    .session-info-grid[b-69h3p3penr] {
        border-radius: var(--radius-md);
    }

    .telemetry-item[b-69h3p3penr] {
        border-radius: var(--radius-md);
    }

    .preset-btn[b-69h3p3penr] {
        border-radius: var(--radius-md);
    }

    .quick-link[b-69h3p3penr] {
        border-radius: var(--radius-md);
        padding: var(--space-3) var(--space-4);
    }

    .dropdown-menu[b-69h3p3penr] {
        border-radius: var(--radius-lg);
    }

    .dropdown-option[b-69h3p3penr] {
        border-radius: var(--radius-md);
    }
}

/* ----------------------------------------
   FOCUS STATES & ACCESSIBILITY
   ---------------------------------------- */
.modern-dropdown:focus-visible .dropdown-trigger[b-69h3p3penr] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.preset-btn:focus-visible[b-69h3p3penr],
.quick-link:focus-visible[b-69h3p3penr] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ----------------------------------------
   REDUCED MOTION
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .dropdown-trigger[b-69h3p3penr],
    .dropdown-arrow[b-69h3p3penr],
    .dropdown-option[b-69h3p3penr],
    .dropdown-menu[b-69h3p3penr],
    .toggle-slider[b-69h3p3penr],
    .toggle-slider[b-69h3p3penr]::before,
    .preset-btn[b-69h3p3penr],
    .quick-link[b-69h3p3penr],
    .quick-link svg:last-child[b-69h3p3penr],
    .emulator-status-badge[b-69h3p3penr],
    .status-indicator[b-69h3p3penr],
    .card-header-icon[b-69h3p3penr],
    .telemetry-item[b-69h3p3penr],
    .emulator-card[b-69h3p3penr] {
        transition: none;
    }

    .dropdown-menu[b-69h3p3penr],
    .emulator-card[b-69h3p3penr],
    .quick-links[b-69h3p3penr] {
        animation: none;
    }

    .status-running .status-indicator[b-69h3p3penr],
    .pulse-dot[b-69h3p3penr] {
        animation: none;
    }

    .emulator-card:hover[b-69h3p3penr] {
        transform: none;
    }

    .preset-btn:hover:not(:disabled)[b-69h3p3penr] {
        transform: none;
    }

    .quick-link:hover[b-69h3p3penr] {
        transform: none;
    }
}

/* ----------------------------------------
   DROPDOWN OVERRIDES (Blazor scoped CSS)
   ---------------------------------------- */
.modern-dropdown .dropdown-trigger[b-69h3p3penr],
.form-field .modern-dropdown .dropdown-trigger[b-69h3p3penr] {
    background-color: var(--color-bg-primary) !important;
    background: var(--color-bg-primary) !important;
    border: 1px solid var(--color-border-primary);
    box-shadow: none;
}

.modern-dropdown .dropdown-trigger:hover[b-69h3p3penr],
.form-field .modern-dropdown .dropdown-trigger:hover[b-69h3p3penr] {
    background: var(--color-bg-secondary) !important;
    background-color: var(--color-bg-secondary) !important;
    border-color: var(--color-border-secondary);
}

.modern-dropdown.open .dropdown-trigger[b-69h3p3penr],
.form-field .modern-dropdown.open .dropdown-trigger[b-69h3p3penr] {
    border: 1px solid var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.modern-dropdown .dropdown-content[b-69h3p3penr] {
    background: transparent !important;
    background-color: transparent !important;
}

/* Prevent browser autofill yellow background */
.modern-dropdown input:-webkit-autofill[b-69h3p3penr],
.modern-dropdown input:-webkit-autofill:hover[b-69h3p3penr],
.modern-dropdown input:-webkit-autofill:focus[b-69h3p3penr],
.modern-dropdown input:-webkit-autofill:active[b-69h3p3penr] {
    -webkit-box-shadow: 0 0 0 30px var(--color-bg-primary) inset !important;
    box-shadow: 0 0 0 30px var(--color-bg-primary) inset !important;
    background-color: var(--color-bg-primary) !important;
}

/* ----------------------------------------
   PRINT
   ---------------------------------------- */
@media print {
    .emulator-status-badge[b-69h3p3penr],
    .quick-links[b-69h3p3penr],
    .form-actions[b-69h3p3penr],
    .autosend-section[b-69h3p3penr],
    .simulation-actions[b-69h3p3penr] {
        display: none;
    }

    .emulator-card[b-69h3p3penr] {
        border: 1px solid #000;
        box-shadow: none;
        background: var(--color-bg-primary);
    }

    .session-info-grid[b-69h3p3penr],
    .telemetry-item[b-69h3p3penr],
    .counter-display[b-69h3p3penr] {
        border: 1px solid #000;
    }
}
/* /Components/Pages/Admin/AdminTrackingHistory.razor.rz.scp.css */
/* ========================================
   ADMIN TRACKING HISTORY — 2026 Modern UI
   Scoped styles for /admin/tracking-history

   Solid surfaces, flat colors, rise animation,
   unified var(--color-primary) accent.
   ======================================== */

/* ----------------------------------------
   RISE ANIMATION (shared pattern)
   ---------------------------------------- */
@keyframes rise-b-nbjuqx0rw1 {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------
   ALERT SPACING
   ---------------------------------------- */
.admin-container[b-nbjuqx0rw1] >  .app-alert {
    margin-bottom: var(--space-6);
}

/* ----------------------------------------
   FILTER FIELD LAYOUT
   ---------------------------------------- */
[b-nbjuqx0rw1] .filter-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

[b-nbjuqx0rw1] .filter-field > svg:not(.filter-input-icon):not(.filter-date-icon) {
    display: none;
}

/* Filter field label */
[b-nbjuqx0rw1] .filter-field-label {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 18px;
    height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----------------------------------------
   MODERN DROPDOWN — Solid surface
   ---------------------------------------- */
[b-nbjuqx0rw1] .modern-dropdown {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    outline: none;
    background: transparent !important;
    background-color: transparent !important;
}

[b-nbjuqx0rw1] .dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    height: 44px;
    padding: 0 var(--space-3);
    background: var(--color-bg-primary) !important;
    background-color: var(--color-bg-primary) !important;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    box-shadow: none;
}

[b-nbjuqx0rw1] .dropdown-trigger:hover {
    background: var(--color-bg-secondary) !important;
    background-color: var(--color-bg-secondary) !important;
    border-color: var(--color-border-secondary);
}

[b-nbjuqx0rw1] .modern-dropdown.open .dropdown-trigger {
    border: 1px solid var(--color-primary);
    box-shadow: var(--shadow-focus);
    background: var(--color-bg-primary) !important;
    background-color: var(--color-bg-primary) !important;
}

[b-nbjuqx0rw1] .dropdown-content {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

[b-nbjuqx0rw1] .dropdown-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-nbjuqx0rw1] .dropdown-arrow {
    color: var(--color-text-secondary);
    flex-shrink: 0;
    transition: transform 200ms cubic-bezier(.4, 0, .2, 1);
}

[b-nbjuqx0rw1] .dropdown-arrow.rotated {
    transform: rotate(180deg);
}

/* Dropdown Menu — Solid white surface */
[b-nbjuqx0rw1] .dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    min-width: 220px;
    max-height: 320px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: popIn-b-nbjuqx0rw1 .18s cubic-bezier(.4, 0, .2, 1);
}

[b-nbjuqx0rw1] .dropdown-menu-wide {
    min-width: 260px;
}

@keyframes popIn-b-nbjuqx0rw1 {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Dropdown Search */
[b-nbjuqx0rw1] .dropdown-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--space-3) 14px;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-primary);
}

[b-nbjuqx0rw1] .dropdown-search .search-icon {
    color: var(--color-text-muted);
    flex-shrink: 0;
    position: static;
    transform: none;
    width: var(--space-4);
    height: var(--space-4);
}

[b-nbjuqx0rw1] .search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    outline: none;
    min-width: 0;
    padding: 0;
    height: auto;
}

[b-nbjuqx0rw1] .search-input::placeholder {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-normal);
}

/* Dropdown Options */
[b-nbjuqx0rw1] .dropdown-options {
    overflow-y: auto;
    max-height: 260px;
    padding: var(--space-2);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-secondary) transparent;
}

[b-nbjuqx0rw1] .dropdown-options::-webkit-scrollbar {
    width: 6px;
}

[b-nbjuqx0rw1] .dropdown-options::-webkit-scrollbar-track {
    background: transparent;
}

[b-nbjuqx0rw1] .dropdown-options::-webkit-scrollbar-thumb {
    background: var(--color-border-secondary);
    border-radius: 3px;
}

[b-nbjuqx0rw1] .dropdown-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 10px var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
}

[b-nbjuqx0rw1] .dropdown-option:hover {
    background: var(--color-bg-secondary);
}

[b-nbjuqx0rw1] .dropdown-option.selected {
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

[b-nbjuqx0rw1] .dropdown-option.selected:hover {
    background: rgba(26, 124, 202, 0.12);
}

[b-nbjuqx0rw1] .option-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

[b-nbjuqx0rw1] .option-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-nbjuqx0rw1] .check-icon {
    color: var(--color-primary);
    flex-shrink: 0;
}

[b-nbjuqx0rw1] .dropdown-empty {
    padding: var(--space-5) 14px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
}

/* ----------------------------------------
   FILTER DATE INPUT — Solid surface
   ---------------------------------------- */
[b-nbjuqx0rw1] .filter-date-wrapper {
    position: relative;
    width: 100%;
    min-width: 160px;
}

[b-nbjuqx0rw1] .filter-date-wrapper .filter-date {
    width: 100%;
    height: 44px;
    padding: 0 var(--space-3) 0 42px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    outline: none;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    box-sizing: border-box;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

[b-nbjuqx0rw1] .filter-date-wrapper .filter-date:focus {
    outline: none;
    border: 1px solid var(--color-primary);
    box-shadow: var(--shadow-focus);
}

[b-nbjuqx0rw1] .filter-date-wrapper .filter-date:hover {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
}

[b-nbjuqx0rw1] .filter-date-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: var(--space-4);
    height: var(--space-4);
    color: var(--color-text-muted);
    pointer-events: none;
}

/* Override browser date picker appearance */
[b-nbjuqx0rw1] .filter-date::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

[b-nbjuqx0rw1] .filter-date::-webkit-datetime-edit {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
}

[b-nbjuqx0rw1] .filter-date::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

/* ----------------------------------------
   FILTER TEXT INPUT
   ---------------------------------------- */
[b-nbjuqx0rw1] .filter-input,
[b-nbjuqx0rw1] input[type="text"].filter-input,
[b-nbjuqx0rw1] input[type="date"].filter-input {
    height: 44px !important;
    box-sizing: border-box;
}

/* ----------------------------------------
   TABLE CARD WRAPPER — Solid surface
   ---------------------------------------- */
.admin-table-card[b-nbjuqx0rw1] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-top: var(--space-5);
    box-shadow: var(--shadow-sm);
    animation: rise-b-nbjuqx0rw1 .45s cubic-bezier(.4, 0, .2, 1) both;
    transition: border-color var(--transition-apple);
}

[b-nbjuqx0rw1] .admin-table-row {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    transition: background var(--transition-normal);
}

[b-nbjuqx0rw1] .admin-table-row:not(:last-child) {
}

[b-nbjuqx0rw1] .admin-table-row:hover {
    background: var(--color-bg-secondary);
    box-shadow: none;
    border-color: transparent;
}

/* Active session row highlight — subtle green tint */
.session-active-row[b-nbjuqx0rw1] {
    background: rgba(34, 197, 94, 0.03) !important;
}

/* ----------------------------------------
   TABLE FOOTER & PAGINATION
   ---------------------------------------- */
.admin-table-footer[b-nbjuqx0rw1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border-primary);
}

.pagination-info[b-nbjuqx0rw1] {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
}

.pagination[b-nbjuqx0rw1] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.pagination-btn[b-nbjuqx0rw1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--space-8);
    height: var(--space-8);
    padding: 0 var(--space-2);
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.pagination-btn:hover:not(:disabled)[b-nbjuqx0rw1] {
    color: var(--color-primary);
    background: var(--color-primary-light);
}

.pagination-btn.active[b-nbjuqx0rw1] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.pagination-btn:disabled[b-nbjuqx0rw1] {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-ellipsis[b-nbjuqx0rw1] {
    padding: 0 var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

/* ----------------------------------------
   LOADING & EMPTY STATES
   ---------------------------------------- */
.table-loading-state[b-nbjuqx0rw1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-16) var(--space-8);
    color: var(--color-text-secondary);
}

.table-empty-state[b-nbjuqx0rw1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-8);
    text-align: center;
    animation: rise-b-nbjuqx0rw1 .45s cubic-bezier(.4, 0, .2, 1) .08s both;
}

.empty-icon[b-nbjuqx0rw1] {
    width: 56px;
    height: 56px;
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.empty-icon svg[b-nbjuqx0rw1] {
    width: 100%;
    height: 100%;
}

.empty-title[b-nbjuqx0rw1] {
    font-size: 17px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
    letter-spacing: -0.01em;
}

.empty-text[b-nbjuqx0rw1] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 360px;
    line-height: var(--line-height-normal);
}

/* ----------------------------------------
   SESSION ID BADGE
   ---------------------------------------- */
.session-id-badge[b-nbjuqx0rw1] {
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Courier New', monospace;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    padding: 3px var(--space-2);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    letter-spacing: 0.3px;
    transition: background var(--transition-normal);
}

.session-id-badge:hover[b-nbjuqx0rw1] {
    background: var(--color-border-primary);
}

/* ----------------------------------------
   LINE & DIRECTION BADGES — Flat
   ---------------------------------------- */
.line-info[b-nbjuqx0rw1] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Line number badge — flat primary */
.line-number-badge[b-nbjuqx0rw1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: var(--space-6);
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xs);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    transition: transform var(--transition-normal);
}

.line-number-badge:hover[b-nbjuqx0rw1] {
    transform: scale(1.05);
}

/* Flat direction colors */
.direction-badge[b-nbjuqx0rw1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-6);
    height: var(--space-6);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xs);
    transition: transform var(--transition-normal);
}

.direction-badge:hover[b-nbjuqx0rw1] {
    transform: scale(1.08);
}

.direction-a[b-nbjuqx0rw1] {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.direction-b[b-nbjuqx0rw1] {
    background: rgba(245, 158, 11, 0.12);
    color: var(--color-amber-dark);
}

/* ----------------------------------------
   DRIVER INFO
   ---------------------------------------- */
.driver-info[b-nbjuqx0rw1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.driver-name[b-nbjuqx0rw1] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    color: var(--color-text-primary);
}

.driver-email[b-nbjuqx0rw1] {
    font-size: 11px;
    color: var(--color-text-muted);
}

/* ----------------------------------------
   VEHICLE PLATE TAG — Flat primary
   ---------------------------------------- */
.vehicle-plate-tag[b-nbjuqx0rw1] {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--space-2);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    background: var(--color-primary-light);
    color: var(--color-primary);
    border: none;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.4px;
}

/* ----------------------------------------
   DATETIME GROUP
   ---------------------------------------- */
.datetime-group[b-nbjuqx0rw1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.date-value[b-nbjuqx0rw1] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
}

.time-value[b-nbjuqx0rw1] {
    font-size: 11px;
    color: var(--color-text-muted);
    font-family: 'SF Mono', 'Cascadia Code', monospace;
}

/* ----------------------------------------
   DURATION VALUE
   ---------------------------------------- */
.duration-value[b-nbjuqx0rw1] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
}

/* ----------------------------------------
   SESSION STATUS BADGE — Flat
   ---------------------------------------- */
.session-status-badge[b-nbjuqx0rw1] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 10px;
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    transition: transform var(--transition-normal);
}

.session-status-badge:hover[b-nbjuqx0rw1] {
    transform: scale(1.05);
}

.session-status--active[b-nbjuqx0rw1] {
    background: var(--color-success-light);
    color: var(--color-success);
    border: none;
}

.session-status--completed[b-nbjuqx0rw1] {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    border: none;
}

.status-dot[b-nbjuqx0rw1] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-success);
    animation: pulse-dot-b-nbjuqx0rw1 2s ease-in-out infinite;
}

@keyframes pulse-dot-b-nbjuqx0rw1 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ----------------------------------------
   SESSION ACTIONS
   ---------------------------------------- */
.session-actions[b-nbjuqx0rw1] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

[b-nbjuqx0rw1] .admin-action-btn--view {
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-normal), color var(--transition-normal), transform var(--transition-fast);
}

[b-nbjuqx0rw1] .admin-action-btn--view:hover {
    background-color: var(--color-primary-light);
    color: var(--color-primary-hover);
    transform: scale(1.05);
}

[b-nbjuqx0rw1] .admin-action-btn--stop {
    color: var(--color-error);
    transition: background-color var(--transition-normal), color var(--transition-normal), transform var(--transition-fast);
}

[b-nbjuqx0rw1] .admin-action-btn--stop:hover {
    background-color: rgba(220, 38, 38, 0.08);
    color: var(--color-error);
    transform: scale(1.05);
}

[b-nbjuqx0rw1] .admin-action-btn--delete {
    color: var(--color-error);
    transition: background-color var(--transition-normal), color var(--transition-normal), transform var(--transition-fast);
}

[b-nbjuqx0rw1] .admin-action-btn--delete:hover {
    background-color: rgba(220, 38, 38, 0.08);
    color: var(--color-error);
    transform: scale(1.05);
}

.btn-spinner[b-nbjuqx0rw1] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(220, 38, 38, 0.3);
    border-top-color: var(--color-error);
    border-radius: 50%;
    animation: spin-b-nbjuqx0rw1 0.8s linear infinite;
}

@keyframes spin-b-nbjuqx0rw1 {
    to { transform: rotate(360deg); }
}

/* ----------------------------------------
   STOP SESSION MODAL DETAILS
   ---------------------------------------- */
.stop-session-details[b-nbjuqx0rw1] {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.stop-detail[b-nbjuqx0rw1] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.stop-detail strong[b-nbjuqx0rw1] {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

/* ----------------------------------------
   NO DATA PLACEHOLDER
   ---------------------------------------- */
.no-data[b-nbjuqx0rw1] {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

/* ----------------------------------------
   LOADING SPINNER
   ---------------------------------------- */
.loading-spinner[b-nbjuqx0rw1] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border-primary);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-nbjuqx0rw1 0.8s linear infinite;
}

/* ----------------------------------------
   SESSION ROUTE REPLAY
   ---------------------------------------- */
.route-replay-card[b-nbjuqx0rw1] {
    margin-top: var(--space-5);
    padding: var(--space-5);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    animation: rise-b-nbjuqx0rw1 .45s cubic-bezier(.4, 0, .2, 1) both;
}

.route-replay-header[b-nbjuqx0rw1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.route-replay-title[b-nbjuqx0rw1] {
    margin: 0;
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.route-replay-subtitle[b-nbjuqx0rw1] {
    margin: var(--space-1) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.route-replay-actions[b-nbjuqx0rw1] {
    display: inline-flex;
    align-items: center;
}

.route-replay-loading[b-nbjuqx0rw1],
.route-replay-empty[b-nbjuqx0rw1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: 120px;
    border: 1px dashed var(--color-border-primary);
    border-radius: var(--radius-lg);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    padding: var(--space-4);
}

.route-replay-stats[b-nbjuqx0rw1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.route-stat[b-nbjuqx0rw1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
}

.route-stat-label[b-nbjuqx0rw1] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

.route-stat-value[b-nbjuqx0rw1] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.route-replay-map[b-nbjuqx0rw1] {
    width: 100%;
    height: 420px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-primary);
    overflow: hidden;
    background: var(--color-bg-secondary);
}

.route-replay-points[b-nbjuqx0rw1] {
    margin-top: var(--space-4);
}

.route-points-header[b-nbjuqx0rw1] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.route-points-table[b-nbjuqx0rw1] {
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.route-points-row[b-nbjuqx0rw1] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-primary);
}

.route-points-row:last-child[b-nbjuqx0rw1] {
    border-bottom: none;
}

.route-points-row span[b-nbjuqx0rw1] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.route-points-row--head[b-nbjuqx0rw1] {
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
}

/* ----------------------------------------
   RESPONSIVE DESIGN
   ---------------------------------------- */

/* Large tablet: hide Vehicle (col 4) */
@media (max-width: 1280px) {
    [b-nbjuqx0rw1] .admin-table-cell:nth-child(4),
    [b-nbjuqx0rw1] .admin-table-header-cell:nth-child(4) {
        display: none;
    }
}

/* Tablet: also hide Duration (col 6) */
@media (max-width: 1024px) {
    [b-nbjuqx0rw1] .admin-table-cell:nth-child(6),
    [b-nbjuqx0rw1] .admin-table-header-cell:nth-child(6) {
        display: none;
    }
}

/* Small tablet: also hide Session ID (col 1) */
@media (max-width: 900px) {
    [b-nbjuqx0rw1] .admin-table-cell:nth-child(1),
    [b-nbjuqx0rw1] .admin-table-header-cell:nth-child(1) {
        display: none;
    }
}

/* Small mobile */
@media (max-width: 575.98px) {
    .admin-table-card[b-nbjuqx0rw1] {
        border-radius: var(--radius-lg);
        margin-top: var(--space-4);
    }

    .route-replay-card[b-nbjuqx0rw1] {
        padding: var(--space-4);
    }

    .route-replay-map[b-nbjuqx0rw1] {
        height: 300px;
    }

    .route-points-row[b-nbjuqx0rw1] {
        grid-template-columns: 1fr 1fr;
        row-gap: var(--space-1);
    }

    .table-empty-state[b-nbjuqx0rw1],
    .table-loading-state[b-nbjuqx0rw1] {
        padding: var(--space-10) var(--space-4);
    }

    .empty-icon[b-nbjuqx0rw1] {
        width: 48px;
        height: 48px;
    }

    .admin-table-footer[b-nbjuqx0rw1] {
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
    }
}

/* ----------------------------------------
   FOCUS STATES
   ---------------------------------------- */
[b-nbjuqx0rw1] .modern-dropdown:focus-visible .dropdown-trigger {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* ----------------------------------------
   REDUCED MOTION
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .session-status-badge[b-nbjuqx0rw1],
    .status-dot[b-nbjuqx0rw1],
    .btn-spinner[b-nbjuqx0rw1],
    .loading-spinner[b-nbjuqx0rw1],
    .admin-table-card[b-nbjuqx0rw1],
    .table-empty-state[b-nbjuqx0rw1],
    [b-nbjuqx0rw1] .dropdown-menu,
    [b-nbjuqx0rw1] .dropdown-trigger,
    [b-nbjuqx0rw1] .dropdown-arrow,
    [b-nbjuqx0rw1] .dropdown-option {
        transition: none;
        animation: none;
    }

    .line-number-badge[b-nbjuqx0rw1],
    .direction-badge[b-nbjuqx0rw1],
    .session-id-badge[b-nbjuqx0rw1],
    .vehicle-plate-tag[b-nbjuqx0rw1],
    [b-nbjuqx0rw1] .admin-action-btn--view,
    [b-nbjuqx0rw1] .admin-action-btn--stop,
    [b-nbjuqx0rw1] .admin-action-btn--delete {
        transition: none;
    }
}

/* ----------------------------------------
   PRINT STYLES
   ---------------------------------------- */
@media print {
    .session-actions[b-nbjuqx0rw1] {
        display: none;
    }

    .admin-table-card[b-nbjuqx0rw1] {
        border: 1px solid #000;
        box-shadow: none;
        background: var(--color-bg-primary);
    }

    .admin-table-footer[b-nbjuqx0rw1] {
        display: none;
    }
}
/* /Components/Pages/Admin/AdminTrackingMap.razor.rz.scp.css */
/* ========================================
   ADMIN TRACKING MAP — 2026 Modern UI
   Scoped styles for /admin/tracking-map

   Solid surfaces, flat colors, rise animation,
   unified var(--color-primary) accent.
   ======================================== */

/* ----------------------------------------
   RISE ANIMATION (shared pattern)
   ---------------------------------------- */
@keyframes rise-b-43ydbf7ffl {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------
   ALERT SPACING
   ---------------------------------------- */
.tracking-map-container[b-43ydbf7ffl] >  .app-alert {
    margin-bottom: var(--space-5);
}

/* ----------------------------------------
   PAGE LAYOUT
   ---------------------------------------- */
.tracking-map-container[b-43ydbf7ffl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* ----------------------------------------
   FILTERS CARD — Solid surface
   ---------------------------------------- */
.tracking-filters-card[b-43ydbf7ffl] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-6);
    box-shadow: var(--shadow-sm);
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
    animation: rise-b-43ydbf7ffl .45s cubic-bezier(.4, 0, .2, 1) both;
    transition: border-color var(--transition-apple);
}

.filters-grid[b-43ydbf7ffl] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    align-items: flex-end;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* ----------------------------------------
   FILTER FIELDS
   ---------------------------------------- */
.filter-field[b-43ydbf7ffl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    position: relative;
    flex: 1 1 180px;
}

.filter-field:nth-child(1)[b-43ydbf7ffl] { /* Line */
    min-width: 0;
    max-width: 280px;
}

.filter-field:nth-child(2)[b-43ydbf7ffl] { /* Direction */
    min-width: 0;
    max-width: 200px;
}

.filter-field:nth-child(3)[b-43ydbf7ffl] { /* Driver */
    min-width: 0;
    max-width: 280px;
}

.filter-field-label[b-43ydbf7ffl] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 18px;
    height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-field-search[b-43ydbf7ffl] {
    flex: 2 1 200px;
    min-width: 200px;
    max-width: none;
}

.filter-field-actions[b-43ydbf7ffl] {
    flex: 0 1 auto;
    margin-left: auto;
    min-width: 0;
    max-width: 100%;
}

.filter-actions-row[b-43ydbf7ffl] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 44px;
    flex-wrap: nowrap;
    max-width: 100%;
}

/* ----------------------------------------
   FILTER INPUT & SELECT — Bordered
   ---------------------------------------- */
.filter-select[b-43ydbf7ffl],
.filter-input[b-43ydbf7ffl] {
    height: 44px;
    padding: 0 var(--space-3);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

.filter-select:hover[b-43ydbf7ffl],
.filter-input:hover[b-43ydbf7ffl] {
    border-color: var(--color-border-secondary);
}

.filter-select:focus[b-43ydbf7ffl],
.filter-input:focus[b-43ydbf7ffl] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* Search Input Wrapper */
.search-input-wrapper[b-43ydbf7ffl] {
    position: relative;
    width: 100%;
}

.search-input-wrapper .search-icon[b-43ydbf7ffl] {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    width: var(--space-4);
    height: var(--space-4);
    color: var(--color-text-muted);
    pointer-events: none;
}

.search-input-wrapper .filter-input[b-43ydbf7ffl] {
    padding-left: 40px;
    width: 100%;
    height: 44px;
}

/* ----------------------------------------
   MODERN DROPDOWN — Solid surface
   ---------------------------------------- */
.modern-dropdown[b-43ydbf7ffl] {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    outline: none;
    background: transparent !important;
    background-color: transparent !important;
}

.dropdown-trigger[b-43ydbf7ffl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    height: 44px;
    padding: 0 var(--space-3);
    background: var(--color-bg-primary) !important;
    background-color: var(--color-bg-primary) !important;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    box-shadow: none;
}

.dropdown-trigger:hover[b-43ydbf7ffl] {
    background: var(--color-bg-secondary) !important;
    background-color: var(--color-bg-secondary) !important;
    border-color: var(--color-border-secondary);
}

.modern-dropdown.open .dropdown-trigger[b-43ydbf7ffl] {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
    background: var(--color-bg-primary) !important;
    background-color: var(--color-bg-primary) !important;
}

.dropdown-content[b-43ydbf7ffl] {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.dropdown-value[b-43ydbf7ffl] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-arrow[b-43ydbf7ffl] {
    color: var(--color-text-secondary);
    flex-shrink: 0;
    transition: transform 200ms cubic-bezier(.4, 0, .2, 1);
}

.dropdown-arrow.rotated[b-43ydbf7ffl] {
    transform: rotate(180deg);
}

/* Dropdown Menu — Solid white surface */
.dropdown-menu[b-43ydbf7ffl] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    min-width: 220px;
    max-height: 320px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: popIn-b-43ydbf7ffl .18s cubic-bezier(.4, 0, .2, 1);
}

.dropdown-menu-wide[b-43ydbf7ffl] {
    min-width: 260px;
}

@keyframes popIn-b-43ydbf7ffl {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Dropdown Search */
.dropdown-search[b-43ydbf7ffl] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--space-3) 14px;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-primary);
}

.dropdown-search .search-icon[b-43ydbf7ffl] {
    color: var(--color-text-muted);
    flex-shrink: 0;
    position: static;
    transform: none;
    width: var(--space-4);
    height: var(--space-4);
}

.search-input[b-43ydbf7ffl] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    outline: none;
    min-width: 0;
    padding: 0;
    height: auto;
}

.search-input[b-43ydbf7ffl]::placeholder {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-normal);
}

/* Dropdown Options */
.dropdown-options[b-43ydbf7ffl] {
    overflow-y: auto;
    max-height: 260px;
    padding: var(--space-2);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-secondary) transparent;
}

.dropdown-options[b-43ydbf7ffl]::-webkit-scrollbar {
    width: 6px;
}

.dropdown-options[b-43ydbf7ffl]::-webkit-scrollbar-track {
    background: transparent;
}

.dropdown-options[b-43ydbf7ffl]::-webkit-scrollbar-thumb {
    background: var(--color-border-secondary);
    border-radius: 3px;
}

.dropdown-option[b-43ydbf7ffl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 10px var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
}

.dropdown-option:hover[b-43ydbf7ffl] {
    background: var(--color-bg-secondary);
}

.dropdown-option.selected[b-43ydbf7ffl] {
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.dropdown-option.selected:hover[b-43ydbf7ffl] {
    background: rgba(26, 124, 202, 0.12);
}

.option-content[b-43ydbf7ffl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.option-label[b-43ydbf7ffl] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.option-sublabel[b-43ydbf7ffl] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
}

.dropdown-option.selected .option-sublabel[b-43ydbf7ffl] {
    color: var(--color-primary);
    opacity: 0.7;
}

.check-icon[b-43ydbf7ffl] {
    color: var(--color-primary);
    flex-shrink: 0;
}

.dropdown-empty[b-43ydbf7ffl] {
    padding: var(--space-5) 14px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
}

/* ----------------------------------------
   AUTO-REFRESH TOGGLE — Solid surface
   ---------------------------------------- */
.auto-refresh-toggle[b-43ydbf7ffl] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 10px;
    height: 44px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    flex-shrink: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    transition: border-color var(--transition-apple);
}

.auto-refresh-toggle:hover[b-43ydbf7ffl] {
    border-color: var(--color-border-secondary);
}

.toggle-switch[b-43ydbf7ffl] {
    position: relative;
    width: 40px;
    height: 22px;
    cursor: pointer;
    flex-shrink: 0;
}

.toggle-switch input[b-43ydbf7ffl] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-43ydbf7ffl] {
    position: absolute;
    inset: 0;
    background: var(--color-border-primary);
    border-radius: 11px;
    transition: background var(--transition-apple);
}

.toggle-slider[b-43ydbf7ffl]::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    bottom: 3px;
    background: var(--color-bg-primary);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
    transition: transform var(--transition-apple);
}

.toggle-switch input:checked + .toggle-slider[b-43ydbf7ffl] {
    background: var(--color-success);
}

.toggle-switch input:checked + .toggle-slider[b-43ydbf7ffl]::before {
    transform: translateX(18px);
}

.toggle-label[b-43ydbf7ffl] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* Action Buttons */
.action-btn[b-43ydbf7ffl] {
    width: 44px;
    min-width: 44px;
    height: 44px;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    flex-shrink: 0;
}

.action-btn:hover[b-43ydbf7ffl] {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border-color: var(--color-border-secondary);
}

.action-btn:active[b-43ydbf7ffl] {
    transform: scale(0.96);
}

.action-btn svg[b-43ydbf7ffl] {
    width: 18px;
    height: 18px;
}

.action-btn.refresh-btn:hover[b-43ydbf7ffl] {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-light);
}

.action-btn.fit-btn:hover[b-43ydbf7ffl] {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-light);
}

.action-btn:disabled[b-43ydbf7ffl] {
    opacity: 0.5;
    cursor: not-allowed;
}

.spinner[b-43ydbf7ffl] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border-primary);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-43ydbf7ffl 0.8s linear infinite;
}

@keyframes spin-b-43ydbf7ffl {
    to { transform: rotate(360deg); }
}

/* ----------------------------------------
   MAIN CONTENT (SIDEBAR + MAP)
   ---------------------------------------- */
.tracking-main-content[b-43ydbf7ffl] {
    flex: 1;
    display: flex;
    gap: var(--space-5);
    min-height: 500px;
    max-height: calc(100vh - 280px);
}

/* ----------------------------------------
   VEHICLE SIDEBAR — Solid surface
   ---------------------------------------- */
.vehicle-sidebar[b-43ydbf7ffl] {
    width: 320px;
    flex-shrink: 0;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    animation: rise-b-43ydbf7ffl .45s cubic-bezier(.4, 0, .2, 1) .06s both;
}

.sidebar-header[b-43ydbf7ffl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-primary);
}

.sidebar-title[b-43ydbf7ffl] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Vehicle count badge — flat primary */
.vehicle-count[b-43ydbf7ffl] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-2xl);
    min-width: 28px;
    text-align: center;
}

.vehicle-list[b-43ydbf7ffl] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-3);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-secondary) transparent;
}

.vehicle-list[b-43ydbf7ffl]::-webkit-scrollbar {
    width: 6px;
}

.vehicle-list[b-43ydbf7ffl]::-webkit-scrollbar-track {
    background: transparent;
}

.vehicle-list[b-43ydbf7ffl]::-webkit-scrollbar-thumb {
    background: var(--color-border-secondary);
    border-radius: 3px;
}

.vehicle-list[b-43ydbf7ffl]::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* Empty State */
.empty-state[b-43ydbf7ffl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-6);
    text-align: center;
    animation: rise-b-43ydbf7ffl .45s cubic-bezier(.4, 0, .2, 1) .08s both;
}

.empty-icon[b-43ydbf7ffl] {
    width: 56px;
    height: 56px;
    color: var(--color-text-muted);
    margin-bottom: var(--space-5);
    opacity: 0.5;
}

.empty-icon svg[b-43ydbf7ffl] {
    width: 100%;
    height: 100%;
}

.empty-text[b-43ydbf7ffl] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    margin: 0;
    line-height: var(--line-height-normal);
}

/* ----------------------------------------
   VEHICLE CARDS — Flat status backgrounds
   ---------------------------------------- */
.vehicle-card[b-43ydbf7ffl] {
    width: 100%;
    background: var(--color-bg-secondary);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    padding: 14px var(--space-4);
    margin-bottom: var(--space-2);
    cursor: pointer;
    transition: all var(--transition-normal);
    text-align: left;
}

.vehicle-card:last-child[b-43ydbf7ffl] {
    margin-bottom: 0;
}

.vehicle-card:hover[b-43ydbf7ffl] {
    background: var(--color-bg-primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.vehicle-card.selected[b-43ydbf7ffl] {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(26, 124, 202, 0.1);
}

/* Flat status backgrounds — no gradients */
.vehicle-card.stale[b-43ydbf7ffl] {
    background: rgba(245, 158, 11, 0.06);
}

.vehicle-card.stale:hover[b-43ydbf7ffl],
.vehicle-card.stale.selected[b-43ydbf7ffl] {
    border-color: var(--color-warning);
}

.vehicle-card.stale.selected[b-43ydbf7ffl] {
    background: rgba(245, 158, 11, 0.1);
}

.vehicle-card.offline[b-43ydbf7ffl] {
    background: rgba(220, 38, 38, 0.05);
}

.vehicle-card.offline:hover[b-43ydbf7ffl],
.vehicle-card.offline.selected[b-43ydbf7ffl] {
    border-color: var(--color-error);
}

.vehicle-card.offline.selected[b-43ydbf7ffl] {
    background: rgba(220, 38, 38, 0.08);
}

.vehicle-header[b-43ydbf7ffl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.vehicle-badges[b-43ydbf7ffl] {
    display: flex;
    gap: 6px;
}

/* Line badge — flat primary */
.line-badge[b-43ydbf7ffl] {
    padding: var(--space-1) 10px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-inverse);
}

/* Direction badge — flat */
.direction-badge[b-43ydbf7ffl] {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.status-indicator[b-43ydbf7ffl] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.status-indicator.active[b-43ydbf7ffl] {
    color: var(--color-success);
}

.status-indicator.stale[b-43ydbf7ffl] {
    color: var(--color-warning);
}

.status-indicator.offline[b-43ydbf7ffl] {
    color: var(--color-error);
}

/* Flat status dots — no glow */
.status-dot[b-43ydbf7ffl] {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: 50%;
    background: currentColor;
    animation: pulse-dot-b-43ydbf7ffl 2s ease-in-out infinite;
    flex-shrink: 0;
}

.status-indicator.offline .status-dot[b-43ydbf7ffl],
.status-indicator.stale .status-dot[b-43ydbf7ffl] {
    animation: none;
}

@keyframes pulse-dot-b-43ydbf7ffl {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.vehicle-details[b-43ydbf7ffl] {
    margin-bottom: var(--space-2);
}

.driver-name[b-43ydbf7ffl] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vehicle-id[b-43ydbf7ffl] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vehicle-metrics[b-43ydbf7ffl] {
    display: flex;
    gap: var(--space-4);
    padding-top: var(--space-2);
}

.metric[b-43ydbf7ffl] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
}

.metric svg[b-43ydbf7ffl] {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

.metric.low-battery[b-43ydbf7ffl] {
    color: var(--color-error);
}

.metric.low-battery svg[b-43ydbf7ffl] {
    opacity: 1;
}

/* ----------------------------------------
   MAP CONTAINER — Solid surface
   ---------------------------------------- */
.map-container[b-43ydbf7ffl] {
    flex: 1;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-sm);
    animation: rise-b-43ydbf7ffl .45s cubic-bezier(.4, 0, .2, 1) .12s both;
}

.tracking-map[b-43ydbf7ffl] {
    width: 100%;
    height: 100%;
}

/* Map Legend — Solid surface */
.map-legend[b-43ydbf7ffl] {
    position: absolute;
    bottom: var(--space-4);
    left: var(--space-4);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    display: flex;
    gap: var(--space-5);
    box-shadow: var(--shadow-md);
    z-index: 1000;
}

.legend-item[b-43ydbf7ffl] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Flat legend dots — no glow, no box-shadow */
.legend-dot[b-43ydbf7ffl] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.legend-item.active .legend-dot[b-43ydbf7ffl] {
    background: var(--color-success);
}

.legend-item.stale .legend-dot[b-43ydbf7ffl] {
    background: var(--color-warning);
}

.legend-item.offline .legend-dot[b-43ydbf7ffl] {
    background: var(--color-error);
}

.legend-label[b-43ydbf7ffl] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

/* ----------------------------------------
   RESPONSIVE DESIGN
   ---------------------------------------- */

/* Large desktop */
@media (min-width: 1400px) {
    .filter-field:nth-child(1)[b-43ydbf7ffl] { width: 200px; }
    .filter-field:nth-child(2)[b-43ydbf7ffl] { width: 140px; }
    .filter-field:nth-child(3)[b-43ydbf7ffl] { width: 200px; }
    .filter-field-search[b-43ydbf7ffl] { max-width: 350px; }
}

/* Desktop */
@media (max-width: 1399.98px) and (min-width: 1200px) {
    .filter-field:nth-child(1)[b-43ydbf7ffl] { min-width: 0; max-width: 240px; }
    .filter-field:nth-child(2)[b-43ydbf7ffl] { min-width: 0; max-width: 180px; }
    .filter-field:nth-child(3)[b-43ydbf7ffl] { min-width: 0; max-width: 240px; }
}

/* Smaller desktop */
@media (max-width: 1199.98px) {
    .filter-field:nth-child(1)[b-43ydbf7ffl] { min-width: 0; max-width: 220px; }
    .filter-field:nth-child(2)[b-43ydbf7ffl] { min-width: 0; max-width: 160px; }
    .filter-field:nth-child(3)[b-43ydbf7ffl] { min-width: 0; max-width: 220px; }

    .vehicle-sidebar[b-43ydbf7ffl] {
        width: 280px;
    }
}

/* Tablet */
@media (max-width: 991.98px) {
    .filters-grid[b-43ydbf7ffl] {
        gap: var(--space-3);
    }

    .filter-field:nth-child(1)[b-43ydbf7ffl],
    .filter-field:nth-child(2)[b-43ydbf7ffl],
    .filter-field:nth-child(3)[b-43ydbf7ffl] {
        flex: 1 1 calc(33.333% - 10px);
        min-width: 120px;
        max-width: none;
    }

    .filter-field-search[b-43ydbf7ffl] {
        flex: 1 1 200px;
        max-width: none;
    }

    .filter-field-actions[b-43ydbf7ffl] {
        margin-left: 0;
    }

    .modern-dropdown[b-43ydbf7ffl] {
        width: 100%;
    }

    .tracking-main-content[b-43ydbf7ffl] {
        flex-direction: column;
        max-height: none;
    }

    .vehicle-sidebar[b-43ydbf7ffl] {
        width: 100%;
        max-height: 300px;
        border-radius: var(--radius-xl);
    }

    .map-container[b-43ydbf7ffl] {
        min-height: 400px;
        border-radius: var(--radius-xl);
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .tracking-map-container[b-43ydbf7ffl] {
        gap: var(--space-4);
    }

    .tracking-filters-card[b-43ydbf7ffl] {
        padding: var(--space-4);
        border-radius: var(--radius-lg);
    }

    .filters-grid[b-43ydbf7ffl] {
        flex-direction: column;
        gap: var(--space-3);
    }

    .filter-field[b-43ydbf7ffl],
    .filter-field:nth-child(1)[b-43ydbf7ffl],
    .filter-field:nth-child(2)[b-43ydbf7ffl],
    .filter-field:nth-child(3)[b-43ydbf7ffl] {
        width: 100%;
        min-width: auto;
        max-width: none;
        flex: none;
    }

    .filter-field-search[b-43ydbf7ffl] {
        width: 100%;
        max-width: none;
    }

    .filter-field-actions[b-43ydbf7ffl] {
        width: 100%;
        margin-left: 0;
    }

    .filter-actions-row[b-43ydbf7ffl] {
        justify-content: space-between;
        width: 100%;
    }

    .auto-refresh-toggle[b-43ydbf7ffl] {
        flex: 1;
    }

    .dropdown-trigger[b-43ydbf7ffl] {
        height: 44px;
    }

    .dropdown-menu[b-43ydbf7ffl] {
        position: fixed;
        left: var(--space-4);
        right: var(--space-4);
        width: auto;
        min-width: auto;
        max-height: 50vh;
    }

    .vehicle-sidebar[b-43ydbf7ffl] {
        border-radius: var(--radius-lg);
    }

    .vehicle-card[b-43ydbf7ffl] {
        padding: var(--space-3) 14px;
        border-radius: var(--radius-lg);
    }

    .map-container[b-43ydbf7ffl] {
        border-radius: var(--radius-lg);
        min-height: 350px;
    }

    .map-legend[b-43ydbf7ffl] {
        bottom: var(--space-3);
        left: var(--space-3);
        padding: 10px var(--space-3);
        gap: var(--space-3);
        border-radius: var(--radius-lg);
    }

    .legend-label[b-43ydbf7ffl] {
        font-size: 11px;
    }
}

/* Small mobile */
@media (max-width: 575.98px) {
    .map-legend[b-43ydbf7ffl] {
        flex-direction: column;
        gap: var(--space-2);
    }

    .filter-actions-row[b-43ydbf7ffl] {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .auto-refresh-toggle[b-43ydbf7ffl] {
        width: 100%;
        justify-content: space-between;
    }

    .tracking-filters-card[b-43ydbf7ffl] {
        border-radius: var(--radius-lg);
    }

    .vehicle-sidebar[b-43ydbf7ffl] {
        border-radius: var(--radius-lg);
    }

    .map-container[b-43ydbf7ffl] {
        border-radius: var(--radius-lg);
    }
}

/* ----------------------------------------
   FOCUS STATES
   ---------------------------------------- */
.filter-select:focus-visible[b-43ydbf7ffl],
.filter-input:focus-visible[b-43ydbf7ffl],
.action-btn:focus-visible[b-43ydbf7ffl],
.vehicle-card:focus-visible[b-43ydbf7ffl] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.toggle-switch input:focus-visible + .toggle-slider[b-43ydbf7ffl] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.modern-dropdown:focus-visible .dropdown-trigger[b-43ydbf7ffl] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* ----------------------------------------
   REDUCED MOTION
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .vehicle-card[b-43ydbf7ffl],
    .action-btn[b-43ydbf7ffl],
    .filter-select[b-43ydbf7ffl],
    .filter-input[b-43ydbf7ffl],
    .auto-refresh-toggle[b-43ydbf7ffl],
    .toggle-slider[b-43ydbf7ffl],
    .toggle-slider[b-43ydbf7ffl]::before,
    .dropdown-trigger[b-43ydbf7ffl],
    .dropdown-arrow[b-43ydbf7ffl],
    .dropdown-option[b-43ydbf7ffl],
    .dropdown-menu[b-43ydbf7ffl] {
        transition: none;
    }

    .status-dot[b-43ydbf7ffl],
    .spinner[b-43ydbf7ffl] {
        animation: none;
    }

    .dropdown-menu[b-43ydbf7ffl] {
        animation: none;
    }

    .vehicle-card:hover[b-43ydbf7ffl] {
        transform: none;
    }

    .tracking-filters-card[b-43ydbf7ffl],
    .vehicle-sidebar[b-43ydbf7ffl],
    .map-container[b-43ydbf7ffl],
    .vehicle-card[b-43ydbf7ffl],
    .empty-state[b-43ydbf7ffl] {
        animation: none;
    }
}

/* ----------------------------------------
   PRINT STYLES
   ---------------------------------------- */
@media print {
    .tracking-filters-card[b-43ydbf7ffl] {
        display: none;
    }

    .vehicle-sidebar[b-43ydbf7ffl] {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #000;
    }

    .map-legend[b-43ydbf7ffl] {
        position: static;
        box-shadow: none;
        border: 1px solid #000;
    }

    .map-container[b-43ydbf7ffl] {
        box-shadow: none;
        border: 1px solid #000;
    }
}
/* /Components/Pages/Admin/AdminUserDocuments.razor.rz.scp.css */
/* ========================================
   AdminUserDocuments — 2026 Design System
   Solid surfaces · flat badges · rise animation
   ======================================== */

/* ----------------------------------------
   RISE ANIMATION
   ---------------------------------------- */
@keyframes rise-b-lw112qzzyk {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------
   UI KIT INTEGRATION - AppAlert
   ---------------------------------------- */
.admin-container[b-lw112qzzyk] >  .app-alert {
    margin-bottom: var(--space-5);
}

/* ----------------------------------------
   FILTERS GRID LAYOUT
   ---------------------------------------- */
.filters-grid[b-lw112qzzyk] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-end;
    margin-top: 0;
    grid-column: 1 / -1;
    width: 100%;
}

.filter-field[b-lw112qzzyk] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1 1 220px;
    max-width: none;
}

.filter-field-email[b-lw112qzzyk] {
    flex: 1 1 320px;
    min-width: 0;
}

.filter-field-status[b-lw112qzzyk] {
    flex: 0 0 200px;
    min-width: 0;
}

.filter-field-date[b-lw112qzzyk] {
    flex: 0 0 170px;
    min-width: 170px;
}

.filter-field-notes[b-lw112qzzyk] {
    flex: 2;
    max-width: 400px;
}

.filter-field-label[b-lw112qzzyk] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: -0.01em;
    line-height: 1.35;
    min-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Filter input wrapper with icon */
.filter-input-wrapper[b-lw112qzzyk] {
    position: relative;
    width: 100%;
    height: 44px;
}

.filter-input-icon[b-lw112qzzyk] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--color-text-muted);
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
}

[b-lw112qzzyk] .filter-input,
.filter-input[b-lw112qzzyk] {
    width: 100%;
    height: 44px !important;
    padding: 0 14px 0 36px;
    background: var(--color-bg-primary) !important;
    border: 1px solid var(--color-border-primary) !important;
    border-radius: var(--radius-md) !important;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1), box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
    box-sizing: border-box;
}

/* Override global Inputs.css height (52px -> 44px) for ALL filter inputs */
.filter-input-wrapper input[b-lw112qzzyk],
.filter-input-wrapper[b-lw112qzzyk]  input,
.filter-field input[b-lw112qzzyk],
.filter-field[b-lw112qzzyk]  input,
.filter-field input[type="date"][b-lw112qzzyk],
.filter-field[b-lw112qzzyk]  input[type="date"],
.filter-field input[type="number"][b-lw112qzzyk],
.filter-field[b-lw112qzzyk]  input[type="number"],
.filter-field input[type="text"][b-lw112qzzyk],
.filter-field[b-lw112qzzyk]  input[type="text"],
.filters-grid input[b-lw112qzzyk],
.filters-grid[b-lw112qzzyk]  input {
    height: 44px !important;
    box-sizing: border-box;
}

[b-lw112qzzyk] .filter-input-date,
.filter-input-date[b-lw112qzzyk],
[b-lw112qzzyk] .filter-input-notes,
.filter-input-notes[b-lw112qzzyk] {
    padding: 0 14px;
}

[b-lw112qzzyk] .filter-input:focus,
.filter-input:focus[b-lw112qzzyk] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
    background: var(--color-bg-primary) !important;
}

[b-lw112qzzyk] .filter-input::placeholder,
.filter-input[b-lw112qzzyk]::placeholder {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-normal);
}

/* Filter actions */
.filter-actions[b-lw112qzzyk] {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
}

[b-lw112qzzyk] .filter-btn-search,
[b-lw112qzzyk] .filter-btn-reset {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-5);
    height: 44px;
}

/* ----------------------------------------
   TABLE CARD WRAPPER
   ---------------------------------------- */
.admin-table-card[b-lw112qzzyk] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    margin-top: var(--space-5);
    box-shadow: var(--shadow-sm);
    animation: rise-b-lw112qzzyk 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

/* Remove borders from individual rows */
[b-lw112qzzyk] .admin-table-row {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

/* Hover effect */
[b-lw112qzzyk] .admin-table-row:hover {
    background: var(--color-bg-secondary);
    box-shadow: none;
    border-color: transparent;
}

/* Pending row highlight */
[b-lw112qzzyk] .admin-table-row.row-pending {
    background: var(--color-warning-light);
}

[b-lw112qzzyk] .admin-table-row.row-pending:hover {
    background: var(--color-bg-secondary);
}

/* Table rows container */
[b-lw112qzzyk] .admin-table-rows {
    gap: 0;
}

/* Header styling */
[b-lw112qzzyk] .admin-table-header {
    background: var(--color-bg-secondary);
    margin-bottom: 0;
    padding: var(--space-4) 0;
}

/* Table container */
[b-lw112qzzyk] .admin-table-container {
    margin-top: 0;
}

/* Override grid columns for 6-column layout */
[b-lw112qzzyk] .admin-grid-cols-6 {
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr;
}

/* ----------------------------------------
   EMPTY STATE
   ---------------------------------------- */
.table-empty-state[b-lw112qzzyk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-8);
    text-align: center;
}

.empty-icon[b-lw112qzzyk] {
    width: 64px;
    height: 64px;
    color: var(--color-border-primary);
    margin-bottom: var(--space-4);
}

.empty-icon svg[b-lw112qzzyk] {
    width: 100%;
    height: 100%;
}

.empty-title[b-lw112qzzyk] {
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
}

.empty-text[b-lw112qzzyk] {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
}

/* ----------------------------------------
   USER CELL
   ---------------------------------------- */
.user-cell[b-lw112qzzyk] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.user-avatar[b-lw112qzzyk] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-bg-primary);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-info[b-lw112qzzyk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.user-email[b-lw112qzzyk] {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-id[b-lw112qzzyk] {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* ----------------------------------------
   DOCUMENT TYPE BADGE
   ---------------------------------------- */
.doc-type-badge[b-lw112qzzyk] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 5px var(--space-3);
    background: var(--color-bg-tertiary);
    border-radius: 10px;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.doc-type-badge svg[b-lw112qzzyk] {
    flex-shrink: 0;
}

.file-name[b-lw112qzzyk] {
    font-size: 13px;
    color: var(--color-text-secondary);
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* ----------------------------------------
   STATUS BADGES
   ---------------------------------------- */
.status-badge[b-lw112qzzyk] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 5px var(--space-3);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
}

.status-dot[b-lw112qzzyk] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-approved[b-lw112qzzyk] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.status-approved .status-dot[b-lw112qzzyk] {
    background: var(--color-emerald);
}

.status-rejected[b-lw112qzzyk] {
    background: var(--color-error-light);
    color: var(--color-error);
}

.status-rejected .status-dot[b-lw112qzzyk] {
    background: var(--color-error-bright);
}

.status-pending[b-lw112qzzyk] {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.status-pending .status-dot[b-lw112qzzyk] {
    background: var(--color-amber);
}

.status-default[b-lw112qzzyk] {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

.status-default .status-dot[b-lw112qzzyk] {
    background: var(--color-text-muted);
}

/* ----------------------------------------
   TIMESTAMPS AND INFO
   ---------------------------------------- */
.timestamp[b-lw112qzzyk] {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.reviewer-info[b-lw112qzzyk] {
    font-size: 13px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.no-reviewer[b-lw112qzzyk] {
    color: var(--color-text-muted);
}

/* ----------------------------------------
   REVIEW CARD
   ---------------------------------------- */
.review-card[b-lw112qzzyk] {
    background: var(--color-bg-primary);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    margin-top: var(--space-5);
    box-shadow: var(--shadow-sm);
    animation: rise-b-lw112qzzyk 0.45s cubic-bezier(.4, 0, .2, 1) 0.06s both;
}

.review-card-header[b-lw112qzzyk] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
}

.review-card-title-section[b-lw112qzzyk] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.review-icon[b-lw112qzzyk] {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.review-card-title[b-lw112qzzyk] {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1) 0;
}

.review-card-subtitle[b-lw112qzzyk] {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
}

.review-close-btn[b-lw112qzzyk] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--color-border-primary);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    flex-shrink: 0;
}

.review-close-btn:hover[b-lw112qzzyk] {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

/* Document info in review card */
.review-document-info[b-lw112qzzyk] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-5);
    border: 1px solid var(--color-border-primary);
}

.doc-preview[b-lw112qzzyk] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--color-info-light);
    color: var(--color-info);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.doc-details[b-lw112qzzyk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.doc-type[b-lw112qzzyk] {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.doc-name[b-lw112qzzyk] {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.doc-user[b-lw112qzzyk] {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* Review form */
.review-form[b-lw112qzzyk] {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}

.review-form .filter-field[b-lw112qzzyk] {
    max-width: 200px;
}

.review-form .filter-field-notes[b-lw112qzzyk] {
    flex: 1;
    max-width: none;
    min-width: 200px;
}

/* Status-specific dropdown triggers */
.dropdown-trigger.status-approved[b-lw112qzzyk] {
    border-color: var(--color-emerald);
    background: var(--color-success-light) !important;
}

.dropdown-trigger.status-approved .dropdown-value[b-lw112qzzyk] {
    color: var(--color-success);
}

.dropdown-trigger.status-rejected[b-lw112qzzyk] {
    border-color: var(--color-error-bright);
    background: var(--color-error-light) !important;
}

.dropdown-trigger.status-rejected .dropdown-value[b-lw112qzzyk] {
    color: var(--color-error);
}

/* Dropdown option with icon */
.option-with-icon[b-lw112qzzyk] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.dropdown-option-approved:hover[b-lw112qzzyk],
.dropdown-option-approved.selected[b-lw112qzzyk] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.dropdown-option-rejected:hover[b-lw112qzzyk],
.dropdown-option-rejected.selected[b-lw112qzzyk] {
    background: var(--color-error-light);
    color: var(--color-error);
}

/* Review actions */
.review-actions[b-lw112qzzyk] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-4);
}

.review-actions-left[b-lw112qzzyk] {
    margin-right: auto;
}

.review-actions[b-lw112qzzyk]  .app-button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* LoadingSpinner inside review buttons */
.review-actions[b-lw112qzzyk]  .loading-spinner-container {
    display: inline-flex;
    margin-right: var(--space-1);
}

/* ========================================
   Modern Dropdown Combobox
   ======================================== */

.modern-dropdown[b-lw112qzzyk] {
    position: relative;
    width: 100%;
    height: 44px;
    flex-shrink: 0;
    outline: none;
    background: transparent !important;
    background-color: transparent !important;
}

.dropdown-trigger[b-lw112qzzyk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    height: 44px;
    padding: 0 14px;
    background: var(--color-bg-primary) !important;
    background-color: var(--color-bg-primary) !important;
    border: 1px solid var(--color-border-primary) !important;
    border-radius: var(--radius-md) !important;
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    box-shadow: none;
}

.dropdown-trigger:hover[b-lw112qzzyk] {
    background: var(--color-bg-primary) !important;
    background-color: var(--color-bg-primary) !important;
    box-shadow: none;
}

.modern-dropdown.open .dropdown-trigger[b-lw112qzzyk] {
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-focus);
    background: var(--color-bg-primary) !important;
    background-color: var(--color-bg-primary) !important;
}

.dropdown-content[b-lw112qzzyk] {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.dropdown-value[b-lw112qzzyk] {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-primary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-placeholder[b-lw112qzzyk] {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.dropdown-arrow[b-lw112qzzyk] {
    width: 14px;
    height: 14px;
    color: var(--color-text-muted);
    flex-shrink: 0;
    transition: transform 200ms cubic-bezier(.4, 0, .2, 1);
}

.dropdown-arrow.rotated[b-lw112qzzyk] {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.dropdown-menu[b-lw112qzzyk] {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    width: 100%;
    min-width: 180px;
    max-height: 320px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    z-index: 1001;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: dropdownSlideIn-b-lw112qzzyk 200ms cubic-bezier(.4, 0, .2, 1);
}

@keyframes dropdownSlideIn-b-lw112qzzyk {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown Options */
.dropdown-options[b-lw112qzzyk] {
    overflow-y: auto;
    max-height: 260px;
    padding: var(--space-2);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-secondary) transparent;
}

.dropdown-options[b-lw112qzzyk]::-webkit-scrollbar {
    width: 6px;
}

.dropdown-options[b-lw112qzzyk]::-webkit-scrollbar-track {
    background: transparent;
}

.dropdown-options[b-lw112qzzyk]::-webkit-scrollbar-thumb {
    background: var(--color-border-secondary);
    border-radius: 3px;
}

.dropdown-option[b-lw112qzzyk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 10px var(--space-3);
    border-radius: 10px;
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.dropdown-option:hover[b-lw112qzzyk] {
    background: var(--color-bg-secondary);
}

.dropdown-option.selected[b-lw112qzzyk] {
    background: rgba(26, 124, 202, 0.10);
    color: var(--color-text-primary);
}

.dropdown-option.selected:hover[b-lw112qzzyk] {
    background: rgba(26, 124, 202, 0.12);
}

.check-icon[b-lw112qzzyk] {
    color: var(--color-primary);
    flex-shrink: 0;
}

/* ----------------------------------------
   PAGINATION
   ---------------------------------------- */
[b-lw112qzzyk] .admin-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-5);
    padding: var(--space-4) 0;
}

[b-lw112qzzyk] .admin-pagination-info {
    font-size: 14px;
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

[b-lw112qzzyk] .admin-pagination-controls {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

[b-lw112qzzyk] .admin-pagination-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid var(--color-border-primary);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

[b-lw112qzzyk] .admin-pagination-btn:hover:not(:disabled):not(.active) {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
}

[b-lw112qzzyk] .admin-pagination-btn.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

[b-lw112qzzyk] .admin-pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-lw112qzzyk] .admin-pagination-ellipsis {
    padding: 0 var(--space-1);
    color: var(--color-text-muted);
    font-size: 14px;
}

[b-lw112qzzyk] .admin-page-size-select {
    height: 36px;
    padding: 0 28px 0 var(--space-3);
    border-radius: 10px;
    border: 1px solid var(--color-border-primary);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-2) center;
}

[b-lw112qzzyk] .admin-page-size-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* ----------------------------------------
   RESPONSIVE DESIGN
   ---------------------------------------- */

/* Tablet */
@media (max-width: 991.98px) {
    .filters-grid[b-lw112qzzyk] {
        gap: var(--space-3);
    }

    .filter-field[b-lw112qzzyk] {
        min-width: 120px;
        max-width: none;
        flex: 1 1 calc(33% - var(--space-3));
    }

    [b-lw112qzzyk] .admin-grid-cols-6 {
        grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr;
        min-width: 820px;
    }

    .admin-table-card[b-lw112qzzyk] {
        overflow-x: auto;
    }
}

/* Desktop: keep all filters on a single row */
@media (min-width: 992px) {
    .admin-page.admin-standard .filters-grid[b-lw112qzzyk] {
        flex-wrap: nowrap;
        align-items: flex-end;
        gap: 12px;
    }

    .admin-page.admin-standard .filters-grid .filter-field[b-lw112qzzyk] {
        flex: 1 1 0 !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .admin-page.admin-standard .filters-grid .filter-field.filter-field-email[b-lw112qzzyk] {
        flex: 1 1 520px !important;
        min-width: 360px !important;
    }

    .admin-page.admin-standard .filters-grid .filter-field.filter-field-status[b-lw112qzzyk] {
        flex: 0 0 220px !important;
        min-width: 0 !important;
        max-width: 260px !important;
    }

    .admin-page.admin-standard .filters-grid .filter-field.filter-field-date[b-lw112qzzyk] {
        flex: 0 0 188px !important;
        min-width: 0 !important;
        max-width: 220px !important;
    }

    .admin-page.admin-standard .filters-grid .filter-field.filter-field-date :is(.filter-input-date, ::deep .filter-input-date)[b-lw112qzzyk] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .filters-grid[b-lw112qzzyk] {
        flex-direction: column;
        gap: var(--space-3);
    }

    .filter-field[b-lw112qzzyk],
    .filter-field-notes[b-lw112qzzyk] {
        width: 100%;
        min-width: auto;
        max-width: none;
        flex: none;
    }

    .filter-actions[b-lw112qzzyk] {
        flex-direction: column;
    }

    .filter-btn-search[b-lw112qzzyk],
    .filter-btn-reset[b-lw112qzzyk] {
        width: 100%;
        justify-content: center;
    }

    .dropdown-menu[b-lw112qzzyk] {
        position: fixed;
        left: var(--space-4);
        right: var(--space-4);
        width: auto;
        min-width: auto;
        max-height: 50vh;
    }

    .user-avatar[b-lw112qzzyk] {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .review-card[b-lw112qzzyk] {
        padding: var(--space-4);
        border-radius: var(--radius-xl);
    }

    .review-form[b-lw112qzzyk] {
        flex-direction: column;
    }

    .review-form .filter-field[b-lw112qzzyk],
    .review-form .filter-field-notes[b-lw112qzzyk] {
        max-width: none;
    }

    .review-actions[b-lw112qzzyk] {
        flex-direction: column;
    }

    .review-actions .admin-btn[b-lw112qzzyk] {
        width: 100%;
        justify-content: center;
    }
}

/* Small mobile */
@media (max-width: 575.98px) {
    .admin-table-card[b-lw112qzzyk] {
        border-radius: var(--radius-lg);
        margin-top: var(--space-4);
    }

    .table-empty-state[b-lw112qzzyk] {
        padding: var(--space-10) var(--space-4);
    }

    .empty-icon[b-lw112qzzyk] {
        width: 48px;
        height: 48px;
    }

    .review-document-info[b-lw112qzzyk] {
        flex-direction: column;
        text-align: center;
        border-radius: var(--radius-lg);
    }
}

/* ----------------------------------------
   FOCUS STATES
   ---------------------------------------- */
[b-lw112qzzyk] .filter-input:focus-visible,
.filter-input:focus-visible[b-lw112qzzyk] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.modern-dropdown:focus-visible .dropdown-trigger[b-lw112qzzyk] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* ----------------------------------------
   REDUCED MOTION
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .dropdown-trigger[b-lw112qzzyk],
    .dropdown-arrow[b-lw112qzzyk],
    .dropdown-option[b-lw112qzzyk],
    .dropdown-menu[b-lw112qzzyk],
    .review-close-btn[b-lw112qzzyk],
    .admin-table-card[b-lw112qzzyk],
    .review-card[b-lw112qzzyk],
    [b-lw112qzzyk] .admin-pagination-btn,
    [b-lw112qzzyk] .admin-page-size-select,
    [b-lw112qzzyk] .loading-spinner-container .spinner {
        transition: none;
        animation: none;
    }

    .dropdown-menu[b-lw112qzzyk] {
        animation: none;
    }
}

/* ----------------------------------------
   PRINT STYLES
   ---------------------------------------- */
@media print {
    .admin-search-card[b-lw112qzzyk],
    .review-card[b-lw112qzzyk] {
        display: none;
    }

    .admin-table-card[b-lw112qzzyk] {
        border: 1px solid #ddd;
        box-shadow: none;
        background: var(--color-bg-primary);
    }

    .admin-grid-actions[b-lw112qzzyk] {
        display: none;
    }
}

/* Ensure dropdown menus are visible outside containers */
[b-lw112qzzyk] .admin-search-card {
    overflow: visible;
}
/* /Components/Pages/Admin/AdminValidationLogs.razor.rz.scp.css */
/* ========================================
   ADMIN VALIDATION LOGS — 2026 Design System
   Solid surfaces, design tokens, rise animation
   Matches: AdminVehicles / AdminDisruptions patterns
   ======================================== */

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes rise-b-d89d57j7rl {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-shimmer-b-d89d57j7rl {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Override grid columns for 7-column layout */
[b-d89d57j7rl] .admin-grid-cols-7 {
    --admin-grid-cols: 7;
}

/* ==========================================================================
   TABLE CARD — Solid surface, bordered, no glassmorphism
   ========================================================================== */
.admin-table-card[b-d89d57j7rl] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    margin-top: var(--space-5);
    box-shadow: var(--shadow-sm);
    animation: rise-b-d89d57j7rl 0.45s cubic-bezier(.4, 0, .2, 1) both;
    overflow: hidden;
}

[b-d89d57j7rl] .admin-table-container {
    margin-top: 0;
}

[b-d89d57j7rl] .admin-table-header {
    background: var(--color-bg-secondary);
    margin-bottom: 0;
    padding: var(--space-4) 0;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border-primary);
}

[b-d89d57j7rl] .admin-table-rows {
    gap: 0;
}

[b-d89d57j7rl] .admin-table-row {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    padding: 0 var(--space-3) 0 0;
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

[b-d89d57j7rl] .admin-table-row:hover {
    background: var(--color-bg-secondary);
    box-shadow: none;
    transform: none;
}

[b-d89d57j7rl] .admin-table-row:focus-visible {
    box-shadow: var(--shadow-focus);
    outline: none;
    z-index: 1;
    position: relative;
}

[b-d89d57j7rl] .admin-table-row:not(:last-child) {
    box-shadow: inset 0 -1px 0 var(--color-border-primary);
}

/* ==========================================================================
   Filter Field Layout
   ========================================================================== */
[b-d89d57j7rl] .filter-field {
    display: flex;
    flex-direction: column;
    gap: var(--radius-sm);
}

[b-d89d57j7rl] .filter-field > svg:not(.filter-input-icon) {
    display: none;
}

[b-d89d57j7rl] .filter-input-wrapper {
    position: relative;
    width: 100%;
}

[b-d89d57j7rl] .filter-input-icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    pointer-events: none;
}

[b-d89d57j7rl] .filter-input,
[b-d89d57j7rl] input[type="text"].filter-input,
[b-d89d57j7rl] input[type="number"].filter-input,
[b-d89d57j7rl] input[type="date"].filter-input,
[b-d89d57j7rl] .filter-input-wrapper input {
    height: 40px !important;
    box-sizing: border-box;
}

[b-d89d57j7rl] .filter-field-label {
    min-height: var(--space-5);
    line-height: var(--space-5);
    display: block;
}

/* AppSelect integration in filter fields */
[b-d89d57j7rl] .filter-field .app-select-wrapper {
    width: 100%;
    position: relative;
}

[b-d89d57j7rl] .filter-field .app-select {
    height: 40px;
    border-radius: var(--radius-md);
    position: relative;
}

[b-d89d57j7rl] .filter-field .app-select-trigger {
    height: 100%;
    padding: 0 var(--space-3);
}

[b-d89d57j7rl] .filter-field .app-select-menu {
    position: absolute;
    z-index: 1000;
    width: 100%;
    min-width: 200px;
}

[b-d89d57j7rl] .filter-field .app-select-wrapper.app-select-compact .app-select-label,
[b-d89d57j7rl] .filter-field .app-select-label {
    display: none;
}

/* ==========================================================================
   ID Badge
   ========================================================================== */
.vl-id-badge[b-d89d57j7rl] {
    display: inline-flex;
    align-items: center;
    font-family: 'SF Mono', 'Cascadia Code', 'Courier New', monospace;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    letter-spacing: 0.3px;
}

/* ==========================================================================
   Ticket & User Badges
   ========================================================================== */
.vl-ticket-badge[b-d89d57j7rl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1) 10px;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    letter-spacing: 0.02em;
    min-width: 36px;
    text-align: center;
    font-family: 'SF Mono', 'Cascadia Code', 'Courier New', monospace;
}

.vl-user-badge[b-d89d57j7rl] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    padding: 2px var(--space-2);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

/* ==========================================================================
   Status Badge
   ========================================================================== */
.vl-status-badge[b-d89d57j7rl] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) 10px;
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-semibold);
    font-size: 12px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.vl-status--success[b-d89d57j7rl] {
    background: var(--color-success-light);
    color: var(--color-success);
    border: 1px solid var(--color-success-light);
}

.vl-status--error[b-d89d57j7rl] {
    background: var(--color-error-light);
    color: var(--color-error);
    border: 1px solid var(--color-error-light);
}

.vl-status--warning[b-d89d57j7rl] {
    background: var(--color-warning-light);
    color: var(--color-warning);
    border: 1px solid var(--color-warning-light);
}

.vl-status-dot[b-d89d57j7rl] {
    width: var(--space-1);
    height: var(--space-1);
    border-radius: 50%;
    background-color: currentColor;
}

/* ==========================================================================
   Timestamp
   ========================================================================== */
.vl-timestamp[b-d89d57j7rl] {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* ==========================================================================
   Message Text
   ========================================================================== */
.vl-message-text[b-d89d57j7rl] {
    font-size: 13px;
    color: var(--color-text-secondary);
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* ==========================================================================
   DETAIL MODAL — Structured sections with hero status
   ========================================================================== */
.vl-detail-modal[b-d89d57j7rl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Status Hero Banner */
.vl-detail-hero[b-d89d57j7rl] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    animation: rise-b-d89d57j7rl 0.3s cubic-bezier(.4, 0, .2, 1) both;
}

.vl-detail-hero--success[b-d89d57j7rl] {
    background: var(--color-success-light);
    border: 1px solid var(--color-success-light);
}

.vl-detail-hero--error[b-d89d57j7rl] {
    background: var(--color-error-light);
    border: 1px solid var(--color-error-light);
}

.vl-detail-hero-icon[b-d89d57j7rl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.vl-detail-hero--success .vl-detail-hero-icon[b-d89d57j7rl] {
    background: var(--color-success);
    color: white;
}

.vl-detail-hero--error .vl-detail-hero-icon[b-d89d57j7rl] {
    background: var(--color-error);
    color: white;
}

.vl-detail-hero-icon svg[b-d89d57j7rl] {
    width: 20px;
    height: 20px;
}

.vl-detail-hero-text[b-d89d57j7rl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.vl-detail-hero-status[b-d89d57j7rl] {
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.vl-detail-hero-result[b-d89d57j7rl] {
    display: flex;
    align-items: center;
}

/* Detail Section — Solid bordered card (matches vehicle form sections) */
.vl-detail-section[b-d89d57j7rl] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-md);
    overflow: hidden;
    animation: rise-b-d89d57j7rl 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

.vl-detail-section-title[b-d89d57j7rl] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
}

.vl-detail-section-title svg[b-d89d57j7rl] {
    width: 18px;
    height: 18px;
    color: var(--color-primary);
    flex-shrink: 0;
}

/* Detail Grid — 2-column layout for key-value pairs */
.vl-detail-grid[b-d89d57j7rl] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.vl-detail-field[b-d89d57j7rl] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-primary);
}

.vl-detail-field:nth-child(odd)[b-d89d57j7rl] {
    border-right: 1px solid var(--color-border-primary);
}

.vl-detail-grid .vl-detail-field:nth-last-child(1)[b-d89d57j7rl],
.vl-detail-grid .vl-detail-field:nth-last-child(2)[b-d89d57j7rl] {
    border-bottom: none;
}

/* When odd number of items, last item spans full without right border issue */
.vl-detail-grid .vl-detail-field:last-child:nth-child(odd)[b-d89d57j7rl] {
    border-right: none;
}

.vl-detail-field-label[b-d89d57j7rl] {
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vl-detail-field-value[b-d89d57j7rl] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    word-break: break-word;
}

/* Code Badge (for device IDs, JTIs) */
.vl-code-badge[b-d89d57j7rl] {
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Courier New', monospace;
    font-size: 12px;
    padding: var(--space-1) var(--space-2);
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    letter-spacing: 0.3px;
    word-break: break-all;
}

/* Message block in detail modal */
.vl-detail-message[b-d89d57j7rl] {
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vl-detail-message-text[b-d89d57j7rl] {
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    line-height: 1.6;
    margin: 0;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-primary);
}

/* ==========================================================================
   Loading Skeleton State
   ========================================================================== */
.admin-loading-state[b-d89d57j7rl] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.admin-skeleton-row[b-d89d57j7rl] {
    display: grid;
    grid-template-columns: 72px 1fr 120px 96px;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-primary);
}

.admin-skeleton-row:first-child[b-d89d57j7rl] {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.admin-skeleton-row:last-child[b-d89d57j7rl] {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.admin-skeleton[b-d89d57j7rl] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 37%, var(--color-bg-tertiary) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer-b-d89d57j7rl 1.8s ease infinite;
    border-radius: var(--radius-sm);
}

.admin-skeleton-badge[b-d89d57j7rl] {
    width: 52px;
    height: 28px;
    border-radius: var(--radius-sm);
}

.admin-skeleton-text[b-d89d57j7rl] {
    width: 100%;
    max-width: 180px;
    height: 16px;
}

.admin-skeleton-text-sm[b-d89d57j7rl] {
    width: 72px;
    height: 12px;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   Empty State
   ========================================================================== */
.admin-empty-state[b-d89d57j7rl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    text-align: center;
}

.admin-empty-state-icon[b-d89d57j7rl] {
    width: 40px;
    height: 40px;
    color: var(--color-text-muted);
    opacity: 0.4;
    margin-bottom: var(--space-3);
}

.admin-empty-state-title[b-d89d57j7rl] {
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
}

.admin-empty-state-text[b-d89d57j7rl] {
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4) 0;
}

.admin-link-btn[b-d89d57j7rl] {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
    text-underline-offset: 2px;
}

.admin-link-btn:hover[b-d89d57j7rl] {
    color: var(--color-primary-hover);
    text-decoration-thickness: 2px;
}

/* ==========================================================================
   PAGINATION — 2026 Design System
   ========================================================================== */
.vl-pagination[b-d89d57j7rl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-top: 1px solid var(--color-border-primary);
}

.vl-pagination-info[b-d89d57j7rl] {
    font-family: var(--font-family-base);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-muted);
    white-space: nowrap;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}

.vl-pagination-controls[b-d89d57j7rl] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.vl-page-nav[b-d89d57j7rl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1);
    flex-shrink: 0;
}

.vl-page-nav svg[b-d89d57j7rl] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.vl-page-nav:hover:not(:disabled)[b-d89d57j7rl] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.vl-page-nav:disabled[b-d89d57j7rl] {
    opacity: 0.25;
    cursor: default;
}

.vl-page-numbers[b-d89d57j7rl] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.vl-page-num[b-d89d57j7rl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 2px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-2xl);
    cursor: pointer;
    font-family: var(--font-family-base);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    color: var(--color-text-secondary);
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1);
    font-variant-numeric: tabular-nums;
}

.vl-page-num:hover:not(.active)[b-d89d57j7rl] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary);
}

.vl-page-num.active[b-d89d57j7rl] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: 600;
    border-color: var(--color-primary);
}

.vl-page-ellipsis[b-d89d57j7rl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 34px;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    user-select: none;
}

.vl-page-size[b-d89d57j7rl] {
    height: 34px;
    padding: 0 30px 0 12px;
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    font-family: var(--font-family-base);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 3.75L5 6.25L7.5 3.75' stroke='%2394A3B8' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1);
    font-variant-numeric: tabular-nums;
}

.vl-page-size:hover[b-d89d57j7rl] {
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.vl-page-size:focus[b-d89d57j7rl] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* ==========================================================================
   MOBILE — Card Layout (991.98px)
   ========================================================================== */
@media (max-width: 991.98px) {
    .admin-table-card[b-d89d57j7rl] {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        margin-top: var(--space-4);
        box-shadow: none !important;
        overflow: visible !important;
    }

    [b-d89d57j7rl] .admin-table-header,
    [b-d89d57j7rl] .admin-table-header.admin-auto-grid {
        display: none !important;
    }

    [b-d89d57j7rl] .admin-table-rows {
        gap: var(--space-3) !important;
    }

    [b-d89d57j7rl] .admin-table-row,
    [b-d89d57j7rl] .admin-table-container .admin-table-row {
        border-radius: var(--radius-lg) !important;
        margin-bottom: 0 !important;
        padding: var(--space-4) !important;
        background: var(--color-bg-primary) !important;
        border: 1px solid var(--color-border-primary) !important;
        box-shadow: var(--shadow-sm) !important;
        flex-direction: column !important;
    }

    [b-d89d57j7rl] .admin-table-row:not(:last-child) {
        box-shadow: var(--shadow-sm) !important;
    }

    [b-d89d57j7rl] .admin-table-row:hover {
        transform: none !important;
    }

    [b-d89d57j7rl] .admin-grid-cols-7 {
        min-width: 0 !important;
    }

    [b-d89d57j7rl] .admin-table-row-content,
    [b-d89d57j7rl] .admin-table-row-content.admin-auto-grid,
    [b-d89d57j7rl] .admin-table-row-content.admin-auto-grid.admin-grid-cols-7 {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-2) !important;
        padding: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    [b-d89d57j7rl] .admin-auto-grid .admin-table-cell,
    [b-d89d57j7rl] .admin-auto-grid .admin-table-cell-primary,
    [b-d89d57j7rl] .admin-auto-grid .admin-table-cell-secondary {
        display: grid !important;
        grid-template-columns: 100px 1fr;
        align-items: baseline;
        gap: var(--space-3);
        padding: var(--space-1) 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        font-size: 13px;
        width: 100% !important;
        min-width: 0 !important;
    }

    [b-d89d57j7rl] .admin-auto-grid .admin-table-cell-primary {
        font-size: 14px;
        font-weight: 600;
    }

    [b-d89d57j7rl] .admin-auto-grid .admin-table-cell::before,
    [b-d89d57j7rl] .admin-auto-grid .admin-table-cell-primary::before,
    [b-d89d57j7rl] .admin-auto-grid .admin-table-cell-secondary::before {
        content: attr(data-label) !important;
        font-size: 11px;
        font-weight: 700;
        color: var(--color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }

    [b-d89d57j7rl] .admin-badge {
        width: fit-content;
    }

    .vl-ticket-badge[b-d89d57j7rl],
    .vl-user-badge[b-d89d57j7rl] {
        width: fit-content;
    }

    .vl-status-badge[b-d89d57j7rl] {
        width: fit-content;
    }

    .vl-message-text[b-d89d57j7rl] {
        max-width: none;
        white-space: normal;
    }

    .admin-skeleton-row[b-d89d57j7rl] {
        grid-template-columns: 60px 1fr 96px;
    }

    .admin-skeleton-text-sm[b-d89d57j7rl] {
        display: none;
    }

    /* Pagination — own card on mobile */
    .vl-pagination[b-d89d57j7rl] {
        background: var(--color-bg-primary);
        border: 1px solid var(--color-border-primary);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        margin-top: var(--space-3);
        padding: var(--space-3) var(--space-4);
        border-top: none;
    }
}

/* ==========================================================================
   SMALL SCREENS (767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {
    [b-d89d57j7rl] .filter-field {
        width: 100%;
    }

    .admin-skeleton-row[b-d89d57j7rl] {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .admin-skeleton-badge[b-d89d57j7rl],
    .admin-skeleton-actions[b-d89d57j7rl] {
        width: 100%;
        max-width: none;
    }

    /* Hide page numbers, show compact nav */
    .vl-page-numbers[b-d89d57j7rl] {
        display: none;
    }

    .vl-pagination-controls[b-d89d57j7rl] {
        gap: var(--space-2);
    }

    .vl-pagination[b-d89d57j7rl] {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-3);
    }

    .vl-pagination-info[b-d89d57j7rl] {
        width: 100%;
        text-align: center;
        order: -1;
    }

    .vl-page-size[b-d89d57j7rl] {
        order: 3;
    }
}

@media (max-width: 575.98px) {
    .vl-pagination[b-d89d57j7rl] {
        padding: var(--space-3);
    }

    /* Modal detail grid — single column on small screens */
    .vl-detail-grid[b-d89d57j7rl] {
        grid-template-columns: 1fr;
    }

    .vl-detail-field:nth-child(odd)[b-d89d57j7rl] {
        border-right: none;
    }

    .vl-detail-field[b-d89d57j7rl] {
        border-bottom: 1px solid var(--color-border-primary);
    }

    .vl-detail-grid .vl-detail-field:nth-last-child(2)[b-d89d57j7rl] {
        border-bottom: 1px solid var(--color-border-primary);
    }

    .vl-detail-grid .vl-detail-field:last-child[b-d89d57j7rl] {
        border-bottom: none;
    }

    .vl-detail-hero[b-d89d57j7rl] {
        flex-direction: column;
        text-align: center;
        gap: var(--space-3);
        padding: var(--space-4);
    }

    .vl-detail-hero-text[b-d89d57j7rl] {
        align-items: center;
    }

    .vl-detail-section-title[b-d89d57j7rl] {
        padding: 10px var(--space-3);
    }

    .vl-detail-message[b-d89d57j7rl] {
        padding: var(--space-3);
    }
}

/* ==========================================================================
   FOCUS STATES
   ========================================================================== */
.admin-link-btn:focus-visible[b-d89d57j7rl],
.vl-page-nav:focus-visible[b-d89d57j7rl],
.vl-page-num:focus-visible[b-d89d57j7rl] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.vl-page-size:focus-visible[b-d89d57j7rl] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .admin-table-card[b-d89d57j7rl],
    .vl-detail-hero[b-d89d57j7rl],
    .vl-detail-section[b-d89d57j7rl] {
        animation: none;
    }

    .admin-skeleton[b-d89d57j7rl] {
        animation: none;
    }

    .vl-ticket-badge[b-d89d57j7rl],
    .vl-user-badge[b-d89d57j7rl],
    .vl-status-badge[b-d89d57j7rl],
    .vl-timestamp[b-d89d57j7rl],
    .vl-message-text[b-d89d57j7rl],
    .vl-id-badge[b-d89d57j7rl],
    .admin-link-btn[b-d89d57j7rl],
    .vl-page-nav[b-d89d57j7rl],
    .vl-page-num[b-d89d57j7rl],
    .vl-page-size[b-d89d57j7rl],
    [b-d89d57j7rl] .admin-table-row {
        transition: none;
    }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .vl-pagination[b-d89d57j7rl] {
        display: none !important;
    }

    .admin-table-card[b-d89d57j7rl] {
        border: 1px solid #ddd;
        box-shadow: none;
        background: var(--color-bg-primary);
    }
}
/* /Components/Pages/Admin/AdminVehicles.razor.rz.scp.css */
/* ========================================
   ADMIN VEHICLES — 2026 Design System
   Solid surfaces, design tokens, rise animation
   ======================================== */

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes rise-b-2poc2b6ghx {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-shimmer-b-2poc2b6ghx {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Override grid columns for 8-column layout */
[b-2poc2b6ghx] .admin-grid-cols-8 {
    --admin-grid-cols: 8;
}

/* ==========================================================================
   TABLE CARD — Solid surface, bordered, no glassmorphism
   ========================================================================== */
.admin-table-card[b-2poc2b6ghx] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    margin-top: var(--space-5);
    box-shadow: var(--shadow-sm);
    animation: rise-b-2poc2b6ghx 0.45s cubic-bezier(.4, 0, .2, 1) both;
    overflow: hidden;
}

[b-2poc2b6ghx] .admin-table-container {
    margin-top: 0;
}

[b-2poc2b6ghx] .admin-table-header {
    background: var(--color-bg-secondary);
    margin-bottom: 0;
    padding: var(--space-4) 0;
    border-radius: 0;
}

[b-2poc2b6ghx] .admin-table-rows {
    gap: 0;
}

[b-2poc2b6ghx] .admin-table-row {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    padding: 0 var(--space-3) 0 0;
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

[b-2poc2b6ghx] .admin-table-row:hover {
    background: var(--color-bg-secondary);
    box-shadow: none;
    transform: none;
}

[b-2poc2b6ghx] .admin-table-row:not(:last-child) {
}

/* ==========================================================================
   Filter Field Layout
   ========================================================================== */
[b-2poc2b6ghx] .filter-field {
    display: flex;
    flex-direction: column;
    gap: var(--radius-sm);
}

[b-2poc2b6ghx] .filter-field > svg:not(.filter-input-icon) {
    display: none;
}

[b-2poc2b6ghx] .filter-input-wrapper {
    position: relative;
    width: 100%;
}

[b-2poc2b6ghx] .filter-input-icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    pointer-events: none;
}

[b-2poc2b6ghx] .filter-input,
[b-2poc2b6ghx] input[type="text"].filter-input,
[b-2poc2b6ghx] .filter-input-wrapper input {
    height: 40px !important;
    box-sizing: border-box;
}

[b-2poc2b6ghx] .filter-field-label {
    min-height: var(--space-5);
    line-height: var(--space-5);
    display: block;
}

/* AppSelect integration in filter fields */
[b-2poc2b6ghx] .filter-field .app-select-wrapper {
    width: 100%;
    position: relative;
}

[b-2poc2b6ghx] .filter-field .app-select {
    height: 40px;
    border-radius: var(--radius-md);
    position: relative;
}

[b-2poc2b6ghx] .filter-field .app-select-trigger {
    height: 100%;
    padding: 0 var(--space-3);
}

[b-2poc2b6ghx] .filter-field .app-select-menu {
    position: absolute;
    z-index: 1000;
    width: 100%;
    min-width: 200px;
}

[b-2poc2b6ghx] .filter-field .app-select-wrapper.app-select-compact .app-select-label,
[b-2poc2b6ghx] .filter-field .app-select-label {
    display: none;
}

/* ==========================================================================
   Cell Layout Overrides
   ========================================================================== */
[b-2poc2b6ghx] .vehicle-model-cell {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.vehicle-model-group[b-2poc2b6ghx] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ==========================================================================
   Vehicle Capacity Value
   ========================================================================== */
.vehicle-capacity-value[b-2poc2b6ghx] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.vehicle-capacity-value svg[b-2poc2b6ghx] {
    color: var(--color-text-muted);
}

/* ==========================================================================
   Vehicle Plate Badge
   ========================================================================== */
.vehicle-plate-badge[b-2poc2b6ghx] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) 10px;
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-bold);
    font-size: 12px;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-family: 'SF Mono', 'Cascadia Code', 'Courier New', monospace;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   Vehicle Detail Tag
   ========================================================================== */
.vehicle-detail-tag[b-2poc2b6ghx] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 12px;
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    padding: 2px var(--space-2);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

/* ==========================================================================
   Vehicle Model Name
   ========================================================================== */
.vehicle-model-name[b-2poc2b6ghx] {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

/* ==========================================================================
   Vehicle Empty Value
   ========================================================================== */
.vehicle-empty-value[b-2poc2b6ghx] {
    color: var(--color-text-muted);
}

/* ==========================================================================
   Code Badge
   ========================================================================== */
.code-badge[b-2poc2b6ghx] {
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Courier New', monospace;
    font-size: 11px;
    padding: var(--space-1) var(--space-2);
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    letter-spacing: 0.3px;
}

.code-badge--lg[b-2poc2b6ghx] {
    font-size: 14px;
    padding: var(--space-2) var(--space-3);
    letter-spacing: 0.5px;
    color: var(--color-text-primary);
}

/* ==========================================================================
   Vehicle Status Badge
   ========================================================================== */
.vehicle-status-badge[b-2poc2b6ghx] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) 10px;
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-semibold);
    font-size: 12px;
    letter-spacing: 0.02em;
}

.vehicle-status--active[b-2poc2b6ghx] {
    background: var(--color-success-light);
    color: var(--color-success);
    border: 1px solid var(--color-success-light);
}

.vehicle-status--maintenance[b-2poc2b6ghx] {
    background: var(--color-warning-light);
    color: var(--color-warning);
    border: 1px solid var(--color-warning-light);
}

.vehicle-status--retired[b-2poc2b6ghx] {
    background: var(--color-bg-tertiary);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-primary);
}

/* ==========================================================================
   Vehicle Expiry Date Badges
   ========================================================================== */
.vehicle-expiry-badge[b-2poc2b6ghx] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) 10px;
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-semibold);
    font-size: 12px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.vehicle-expiry--ok[b-2poc2b6ghx] {
    background: var(--color-success-light);
    color: var(--color-success);
    border: 1px solid var(--color-success-light);
}

.vehicle-expiry--upcoming[b-2poc2b6ghx] {
    background: #EEF2FF;
    color: #4F46E5;
    border: 1px solid #EEF2FF;
}

.vehicle-expiry--warning[b-2poc2b6ghx] {
    background: var(--color-warning-light);
    color: var(--color-warning);
    border: 1px solid var(--color-warning-light);
}

.vehicle-expiry--expired[b-2poc2b6ghx] {
    background: var(--color-error-light);
    color: var(--color-error);
    border: 1px solid var(--color-error-light);
}

/* ==========================================================================
   Alert Enhancements
   ========================================================================== */
.admin-alert[b-2poc2b6ghx] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.admin-alert-icon[b-2poc2b6ghx] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.admin-alert-dismiss[b-2poc2b6ghx] {
    margin-left: auto;
    background: transparent;
    border: none;
    padding: var(--space-1);
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: inherit;
    opacity: 0.6;
    transition: opacity 200ms cubic-bezier(.4, 0, .2, 1);
}

.admin-alert-dismiss:hover[b-2poc2b6ghx] {
    opacity: 1;
}

.admin-alert-dismiss svg[b-2poc2b6ghx] {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   Loading Skeleton State
   ========================================================================== */
.admin-loading-state[b-2poc2b6ghx] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.admin-skeleton-row[b-2poc2b6ghx] {
    display: grid;
    grid-template-columns: 72px 1fr 120px 96px;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-primary);
}

.admin-skeleton-row:first-child[b-2poc2b6ghx] {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.admin-skeleton-row:last-child[b-2poc2b6ghx] {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.admin-skeleton[b-2poc2b6ghx] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 37%, var(--color-bg-tertiary) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer-b-2poc2b6ghx 1.8s ease infinite;
    border-radius: var(--radius-sm);
}

.admin-skeleton-badge[b-2poc2b6ghx] {
    width: 52px;
    height: 28px;
    border-radius: var(--radius-sm);
}

.admin-skeleton-text[b-2poc2b6ghx] {
    width: 100%;
    max-width: 180px;
    height: 16px;
}

.admin-skeleton-text-sm[b-2poc2b6ghx] {
    width: 72px;
    height: 12px;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   Empty State
   ========================================================================== */
.admin-empty-state[b-2poc2b6ghx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    text-align: center;
}

.admin-empty-state-icon[b-2poc2b6ghx] {
    width: 40px;
    height: 40px;
    color: var(--color-text-muted);
    opacity: 0.4;
    margin-bottom: var(--space-3);
}

.admin-empty-state-title[b-2poc2b6ghx] {
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
}

.admin-empty-state-text[b-2poc2b6ghx] {
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4) 0;
}

/* Link button */
.admin-link-btn[b-2poc2b6ghx] {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
    text-underline-offset: 2px;
}

.admin-link-btn:hover[b-2poc2b6ghx] {
    color: var(--color-primary-hover);
    text-decoration-thickness: 2px;
}

/* ==========================================================================
   PAGINATION — 2026 Design System
   ========================================================================== */
.av-pagination[b-2poc2b6ghx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-top: 1px solid var(--color-border-primary);
}

.av-pagination-info[b-2poc2b6ghx] {
    font-family: var(--font-family-base);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-muted);
    white-space: nowrap;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}

.av-pagination-controls[b-2poc2b6ghx] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.av-page-nav[b-2poc2b6ghx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1);
    flex-shrink: 0;
}

.av-page-nav svg[b-2poc2b6ghx] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.av-page-nav:hover:not(:disabled)[b-2poc2b6ghx] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.av-page-nav:disabled[b-2poc2b6ghx] {
    opacity: 0.25;
    cursor: default;
}

.av-page-numbers[b-2poc2b6ghx] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.av-page-num[b-2poc2b6ghx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 2px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-2xl);
    cursor: pointer;
    font-family: var(--font-family-base);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    color: var(--color-text-secondary);
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1);
    font-variant-numeric: tabular-nums;
}

.av-page-num:hover:not(.active)[b-2poc2b6ghx] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary);
}

.av-page-num.active[b-2poc2b6ghx] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: 600;
    border-color: var(--color-primary);
}

.av-page-ellipsis[b-2poc2b6ghx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 34px;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    user-select: none;
}

.av-page-size[b-2poc2b6ghx] {
    height: 34px;
    padding: 0 30px 0 12px;
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    font-family: var(--font-family-base);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 3.75L5 6.25L7.5 3.75' stroke='%2394A3B8' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1);
    font-variant-numeric: tabular-nums;
}

.av-page-size:hover[b-2poc2b6ghx] {
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.av-page-size:focus[b-2poc2b6ghx] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* ==========================================================================
   MODAL FORM STRUCTURE
   ========================================================================== */
.admin-vehicle-form[b-2poc2b6ghx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Form Section — Solid bordered card */
.admin-form-section[b-2poc2b6ghx] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-md);
    padding: 0;
    overflow: hidden;
    animation: rise-b-2poc2b6ghx 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

.admin-form-section-title[b-2poc2b6ghx] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
}

.admin-form-section-title svg[b-2poc2b6ghx] {
    width: 18px;
    height: 18px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.admin-form-section-body[b-2poc2b6ghx] {
    padding: var(--space-4);
}

/* ==========================================================================
   FORM FIELD ALIGNMENT SYSTEM
   ========================================================================== */
.admin-form-field[b-2poc2b6ghx] {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin-bottom: var(--space-4);
}

.admin-form-field:last-child[b-2poc2b6ghx] {
    margin-bottom: 0;
}

.admin-form-field-label[b-2poc2b6ghx] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 20px;
    font-family: inherit;
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
    padding: 0;
}

.admin-required[b-2poc2b6ghx] {
    color: var(--color-error);
    font-weight: var(--font-weight-bold);
}

.admin-form-row-2col[b-2poc2b6ghx] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

@media (max-width: 575.98px) {
    .admin-form-row-2col[b-2poc2b6ghx] {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   MODAL ERROR
   ========================================================================== */
.admin-modal-error[b-2poc2b6ghx] {
    padding: var(--space-3) var(--space-4);
    background: var(--color-error-light);
    border: 1px solid var(--color-error-bright);
    border-radius: var(--radius-md);
    color: var(--color-error);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-4);
    animation: rise-b-2poc2b6ghx 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

/* ==========================================================================
   MODAL ACTIONS
   ========================================================================== */
.modal-delete-btn[b-2poc2b6ghx] {
    margin-right: auto;
}

/* ==========================================================================
   QR Section in Modal
   ========================================================================== */
.qr-preview[b-2poc2b6ghx] {
    display: flex;
    justify-content: center;
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
}

.qr-preview[b-2poc2b6ghx]  canvas {
    border: none !important;
    border-radius: var(--radius-md);
}

.qr-identifier-display[b-2poc2b6ghx] {
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}

.qr-actions[b-2poc2b6ghx] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.qr-auto-info[b-2poc2b6ghx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--space-3) var(--space-4);
    background: var(--color-info-light);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-info);
    line-height: 1.5;
}

.qr-auto-info svg[b-2poc2b6ghx] {
    flex-shrink: 0;
    color: var(--color-primary);
}

/* ==========================================================================
   Form Actions
   ========================================================================== */
.form-actions[b-2poc2b6ghx] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-4);
    margin-top: var(--space-3);
}

/* ==========================================================================
   INPUT STYLES (scoped)
   ========================================================================== */
[b-2poc2b6ghx] .admin-input-simple {
    width: 100%;
    height: 40px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1), box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
    box-sizing: border-box;
}

[b-2poc2b6ghx] .admin-input-simple:hover {
    border-color: var(--color-border-secondary);
}

[b-2poc2b6ghx] .admin-input-simple:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

[b-2poc2b6ghx] .admin-input-simple::placeholder {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-normal);
}

/* ==========================================================================
   MOBILE — Card Layout (991.98px)
   ========================================================================== */
@media (max-width: 991.98px) {
    .admin-table-card[b-2poc2b6ghx] {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        margin-top: var(--space-4);
        box-shadow: none !important;
        overflow: visible !important;
    }

    [b-2poc2b6ghx] .admin-table-header,
    [b-2poc2b6ghx] .admin-table-header.admin-auto-grid {
        display: none !important;
    }

    [b-2poc2b6ghx] .admin-table-rows {
        gap: var(--space-3) !important;
    }

    [b-2poc2b6ghx] .admin-table-row,
    [b-2poc2b6ghx] .admin-table-container .admin-table-row {
        border-radius: var(--radius-lg) !important;
        margin-bottom: 0 !important;
        padding: var(--space-4) !important;
        background: var(--color-bg-primary) !important;
        border: 1px solid var(--color-border-primary) !important;
        box-shadow: var(--shadow-sm) !important;
        flex-direction: column !important;
    }

    [b-2poc2b6ghx] .admin-table-row:not(:last-child) {
        box-shadow: var(--shadow-sm) !important;
    }

    [b-2poc2b6ghx] .admin-table-row:hover {
        transform: none !important;
    }

    [b-2poc2b6ghx] .admin-grid-cols-8 {
        min-width: 0 !important;
    }

    [b-2poc2b6ghx] .admin-table-row-content,
    [b-2poc2b6ghx] .admin-table-row-content.admin-auto-grid,
    [b-2poc2b6ghx] .admin-table-row-content.admin-auto-grid.admin-grid-cols-8 {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-2) !important;
        padding: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    [b-2poc2b6ghx] .admin-auto-grid .admin-table-cell,
    [b-2poc2b6ghx] .admin-auto-grid .admin-table-cell-primary,
    [b-2poc2b6ghx] .admin-auto-grid .admin-table-cell-secondary {
        display: grid !important;
        grid-template-columns: 100px 1fr;
        align-items: baseline;
        gap: var(--space-3);
        padding: var(--space-1) 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        font-size: 13px;
        width: 100% !important;
        min-width: 0 !important;
    }

    [b-2poc2b6ghx] .admin-auto-grid .admin-table-cell-primary {
        font-size: 14px;
        font-weight: 600;
    }

    [b-2poc2b6ghx] .admin-auto-grid .admin-table-cell::before,
    [b-2poc2b6ghx] .admin-auto-grid .admin-table-cell-primary::before,
    [b-2poc2b6ghx] .admin-auto-grid .admin-table-cell-secondary::before {
        content: attr(data-label) !important;
        font-size: 11px;
        font-weight: 700;
        color: var(--color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }

    [b-2poc2b6ghx] .admin-badge {
        width: fit-content;
    }

    .vehicle-plate-badge[b-2poc2b6ghx] {
        width: fit-content;
    }

    .vehicle-status-badge[b-2poc2b6ghx] {
        width: fit-content;
    }

    .vehicle-expiry-badge[b-2poc2b6ghx] {
        width: fit-content;
    }

    .code-badge[b-2poc2b6ghx] {
        word-break: break-all;
        white-space: normal;
    }

    .admin-skeleton-row[b-2poc2b6ghx] {
        grid-template-columns: 60px 1fr 96px;
    }

    .admin-skeleton-text-sm[b-2poc2b6ghx] {
        display: none;
    }

    /* Pagination — own card on mobile */
    .av-pagination[b-2poc2b6ghx] {
        background: var(--color-bg-primary);
        border: 1px solid var(--color-border-primary);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        margin-top: var(--space-3);
        padding: var(--space-3) var(--space-4);
        border-top: none;
    }
}

/* ==========================================================================
   SMALL SCREENS (767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {
    [b-2poc2b6ghx] .filter-field {
        width: 100%;
    }

    .admin-skeleton-row[b-2poc2b6ghx] {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .admin-skeleton-badge[b-2poc2b6ghx],
    .admin-skeleton-actions[b-2poc2b6ghx] {
        width: 100%;
        max-width: none;
    }

    .form-actions[b-2poc2b6ghx] {
        flex-direction: column-reverse;
    }

    .form-actions > *[b-2poc2b6ghx] {
        width: 100%;
    }

    .admin-form-section-body[b-2poc2b6ghx] {
        padding: var(--space-3);
    }

    .admin-form-section-title[b-2poc2b6ghx] {
        padding: 10px var(--space-3);
    }

    /* Hide page numbers, show compact nav */
    .av-page-numbers[b-2poc2b6ghx] {
        display: none;
    }

    .av-pagination-controls[b-2poc2b6ghx] {
        gap: var(--space-2);
    }

    .av-pagination[b-2poc2b6ghx] {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-3);
    }

    .av-pagination-info[b-2poc2b6ghx] {
        width: 100%;
        text-align: center;
        order: -1;
    }

    .av-page-size[b-2poc2b6ghx] {
        order: 3;
    }
}

@media (max-width: 575.98px) {
    .av-pagination[b-2poc2b6ghx] {
        padding: var(--space-3);
    }
}

/* ==========================================================================
   FOCUS STATES
   ========================================================================== */
[b-2poc2b6ghx] .admin-input-simple:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.admin-alert-dismiss:focus-visible[b-2poc2b6ghx],
.admin-link-btn:focus-visible[b-2poc2b6ghx],
.av-page-nav:focus-visible[b-2poc2b6ghx],
.av-page-num:focus-visible[b-2poc2b6ghx] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.av-page-size:focus-visible[b-2poc2b6ghx] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .admin-table-card[b-2poc2b6ghx],
    .admin-form-section[b-2poc2b6ghx],
    .admin-modal-error[b-2poc2b6ghx] {
        animation: none;
    }

    .admin-skeleton[b-2poc2b6ghx] {
        animation: none;
    }

    .vehicle-plate-badge[b-2poc2b6ghx],
    .vehicle-status-badge[b-2poc2b6ghx],
    .vehicle-expiry-badge[b-2poc2b6ghx],
    .vehicle-detail-tag[b-2poc2b6ghx],
    .vehicle-model-name[b-2poc2b6ghx],
    .code-badge[b-2poc2b6ghx],
    .admin-alert-dismiss[b-2poc2b6ghx],
    .av-page-nav[b-2poc2b6ghx],
    .av-page-num[b-2poc2b6ghx],
    .av-page-size[b-2poc2b6ghx],
    [b-2poc2b6ghx] .admin-table-row {
        transition: none;
    }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .av-pagination[b-2poc2b6ghx] {
        display: none !important;
    }

    .admin-table-card[b-2poc2b6ghx] {
        border: 1px solid #ddd;
        box-shadow: none;
        background: var(--color-bg-primary);
    }
}
/* /Components/Pages/Admin/AdminWallet.razor.rz.scp.css */
/* ========================================
   AdminWallet — 2026 Design System
   Solid surfaces · flat tokens · rise animation
   ======================================== */

/* ----------------------------------------
   RISE ANIMATION
   ---------------------------------------- */
@keyframes rise-b-ypvjjdk0n8 {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------
   UI KIT INTEGRATION - AppAlert
   ---------------------------------------- */
.admin-container[b-ypvjjdk0n8] >  .app-alert {
    margin-bottom: var(--space-5);
}

/* ----------------------------------------
   PAGE LAYOUT
   ---------------------------------------- */
.wallet-admin-grid[b-ypvjjdk0n8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    align-items: start;
}

.wallet-admin-grid .admin-search-card[b-ypvjjdk0n8] {
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .wallet-admin-grid[b-ypvjjdk0n8] {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------
   CARD HEADER WITH ICON
   ---------------------------------------- */
.card-header-content[b-ypvjjdk0n8] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.card-icon[b-ypvjjdk0n8] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
}

.card-icon svg[b-ypvjjdk0n8] {
    width: var(--space-5);
    height: var(--space-5);
}

.card-icon-topup[b-ypvjjdk0n8] {
    color: var(--color-success);
    background: var(--color-success-light);
    border-color: var(--color-success-light);
}

.card-icon-voucher[b-ypvjjdk0n8] {
    color: var(--color-primary);
    background: var(--color-info-light);
    border-color: var(--color-info-light);
}

.card-icon-list[b-ypvjjdk0n8] {
    color: var(--color-text-secondary);
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-primary);
}

.card-description[b-ypvjjdk0n8] {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin: var(--space-1) 0 0 0;
    font-weight: var(--font-weight-normal);
}

/* ----------------------------------------
   FILTERS GRID LAYOUT
   ---------------------------------------- */
.filters-grid[b-ypvjjdk0n8] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-end;
    margin-top: var(--space-4);
}

.filter-field[b-ypvjjdk0n8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1 1 0%;
    max-width: none;
}

.filter-field-wide[b-ypvjjdk0n8] {
    flex: 2 1 320px;
    min-width: 0;
    max-width: none;
}

.filter-field-action[b-ypvjjdk0n8] {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 220px;
}

.filter-field-label[b-ypvjjdk0n8] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: -0.01em;
    line-height: 1.35;
    min-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Filter input wrapper with icon */
.filter-input-wrapper[b-ypvjjdk0n8] {
    position: relative;
    width: 100%;
    height: 44px;
}

.filter-input-icon[b-ypvjjdk0n8] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--color-text-muted);
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
}

[b-ypvjjdk0n8] .filter-input,
.filter-input[b-ypvjjdk0n8],
.filter-input-wrapper input[b-ypvjjdk0n8],
.filter-input-wrapper[b-ypvjjdk0n8]  input {
    width: 100%;
    height: 44px !important;
    padding: 0 14px 0 36px;
    background: var(--color-bg-primary) !important;
    border: 1px solid var(--color-border-primary) !important;
    border-radius: var(--radius-md) !important;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1), box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
    box-sizing: border-box;
}

/* Override global Inputs.css 52px for ALL input types in filter fields */
.filter-field input[b-ypvjjdk0n8],
.filter-field[b-ypvjjdk0n8]  input,
.filter-field input[type="date"][b-ypvjjdk0n8],
.filter-field[b-ypvjjdk0n8]  input[type="date"],
.filter-field input[type="number"][b-ypvjjdk0n8],
.filter-field[b-ypvjjdk0n8]  input[type="number"],
.filter-field input[type="text"][b-ypvjjdk0n8],
.filter-field[b-ypvjjdk0n8]  input[type="text"],
.filters-grid input[b-ypvjjdk0n8],
.filters-grid[b-ypvjjdk0n8]  input {
    height: 44px !important;
    box-sizing: border-box;
}

[b-ypvjjdk0n8] .filter-input:focus,
.filter-input:focus[b-ypvjjdk0n8] {
    outline: none;
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-focus);
    background: var(--color-bg-primary) !important;
}

[b-ypvjjdk0n8] .filter-input::placeholder,
.filter-input[b-ypvjjdk0n8]::placeholder {
    color: var(--color-text-muted);
    font-weight: 400;
}

/* Filter button - AppButton integration */
[b-ypvjjdk0n8] .filter-btn {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

/* LoadingSpinner inside filter button */
[b-ypvjjdk0n8] .filter-btn .loading-spinner-container {
    display: inline-flex;
    margin-right: var(--space-1);
}

/* ----------------------------------------
   TOGGLE SWITCH
   ---------------------------------------- */
.toggle-label[b-ypvjjdk0n8] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    user-select: none;
}

.toggle-wrapper[b-ypvjjdk0n8] {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-input[b-ypvjjdk0n8] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-ypvjjdk0n8] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

.toggle-slider[b-ypvjjdk0n8]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--color-bg-primary);
    border-radius: 50%;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.toggle-input:checked + .toggle-slider[b-ypvjjdk0n8] {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: none;
}

.toggle-input:checked + .toggle-slider[b-ypvjjdk0n8]:before {
    transform: translateX(20px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
}

.toggle-input:focus-visible + .toggle-slider[b-ypvjjdk0n8] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.toggle-text[b-ypvjjdk0n8] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
}

/* ----------------------------------------
   GENERATED VOUCHER CARD
   ---------------------------------------- */
.generated-voucher-card[b-ypvjjdk0n8] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    margin-top: var(--space-4);
    background: var(--color-success-light);
    border: 1px solid rgba(16, 185, 129, 0.22);
    border-radius: var(--radius-lg);
    animation: rise-b-ypvjjdk0n8 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

.voucher-success-icon[b-ypvjjdk0n8] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-success-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-success);
}

/* Large voucher code button (for generated voucher card) */
.voucher-code-btn-large[b-ypvjjdk0n8] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    flex: 1;
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    text-align: left;
}

.voucher-code-btn-large:hover[b-ypvjjdk0n8] {
    border-color: var(--color-border-secondary);
    box-shadow: none;
}

.voucher-code-btn-large.copied[b-ypvjjdk0n8] {
    background: var(--color-success-light);
    border-color: rgba(16, 185, 129, 0.35);
}

.voucher-label[b-ypvjjdk0n8] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: -0.01em;
}

.voucher-code[b-ypvjjdk0n8] {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace;
    letter-spacing: 0.02em;
    word-break: break-all;
}

.copy-hint[b-ypvjjdk0n8] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

.copy-hint svg[b-ypvjjdk0n8] {
    flex-shrink: 0;
}

/* ----------------------------------------
   TABLE CARD WRAPPER
   ---------------------------------------- */
.admin-table-card[b-ypvjjdk0n8] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    margin-top: var(--space-5);
    box-shadow: var(--shadow-sm);
    animation: rise-b-ypvjjdk0n8 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

/* Remove borders from individual rows */
[b-ypvjjdk0n8] .admin-table-row {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

/* Hover effect */
[b-ypvjjdk0n8] .admin-table-row:hover {
    background: var(--color-bg-secondary);
    box-shadow: none;
    border-color: transparent;
}

/* Active row highlight */
[b-ypvjjdk0n8] .admin-table-row.row-active {
    background: var(--color-success-light);
}

[b-ypvjjdk0n8] .admin-table-row.row-active:hover {
    background: var(--color-bg-secondary);
}

/* Table rows container */
[b-ypvjjdk0n8] .admin-table-rows {
    gap: 0;
}

/* Header styling */
[b-ypvjjdk0n8] .admin-table-header {
    background: var(--color-bg-secondary);
    margin-bottom: 0;
    padding: var(--space-4) 0;
}

/* Ensure all header cells are left-aligned */
[b-ypvjjdk0n8] .admin-table-header-cell {
    text-align: left;
}

/* Ensure all table cells are left-aligned */
[b-ypvjjdk0n8] .admin-table-cell,
[b-ypvjjdk0n8] .admin-table-cell-primary,
[b-ypvjjdk0n8] .admin-table-cell-secondary {
    text-align: left;
}

/* Table container */
[b-ypvjjdk0n8] .admin-table-container {
    margin-top: 0;
}

/* Custom grid columns for voucher table */
[b-ypvjjdk0n8] .admin-grid-cols-5 {
    grid-template-columns: 2fr 0.8fr 1fr 1fr 1fr;
}

/* ----------------------------------------
   EMPTY STATE
   ---------------------------------------- */
.table-empty-state[b-ypvjjdk0n8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-8);
    text-align: center;
}

.empty-icon[b-ypvjjdk0n8] {
    width: 64px;
    height: 64px;
    color: var(--color-border-primary);
    margin-bottom: var(--space-4);
}

.empty-icon svg[b-ypvjjdk0n8] {
    width: 100%;
    height: 100%;
}

.empty-title[b-ypvjjdk0n8] {
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
}

.empty-text[b-ypvjjdk0n8] {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
}

/* ----------------------------------------
   VOUCHER CODE CELL (Table Cell)
   ---------------------------------------- */
.voucher-code-cell[b-ypvjjdk0n8] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.voucher-code-cell .voucher-code-text[b-ypvjjdk0n8] {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: 0.01em;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    padding: 6px 10px;
    border-radius: var(--radius-md);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voucher-copy-btn[b-ypvjjdk0n8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--color-text-muted);
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

.voucher-copy-btn:hover[b-ypvjjdk0n8] {
    background: var(--color-bg-secondary);
    transform: none;
    box-shadow: none;
}

.voucher-copy-btn.copied[b-ypvjjdk0n8] {
    background: var(--color-success-light);
    border-color: rgba(16, 185, 129, 0.30);
    color: var(--color-success);
}

.voucher-copy-btn:active[b-ypvjjdk0n8] {
    transform: none;
}

/* ----------------------------------------
   AMOUNT COLUMN - Right aligned
   ---------------------------------------- */
.col-amount[b-ypvjjdk0n8] {
    text-align: right !important;
    justify-self: end;
}

/* ----------------------------------------
   AMOUNT BADGE
   ---------------------------------------- */
.amount-badge[b-ypvjjdk0n8] {
    display: inline-flex;
    padding: 5px 10px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace;
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------
   STATUS BADGES
   ---------------------------------------- */
.status-badge[b-ypvjjdk0n8] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
}

.status-dot[b-ypvjjdk0n8] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-active[b-ypvjjdk0n8] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.status-active .status-dot[b-ypvjjdk0n8] {
    background: var(--color-success);
}

.status-redeemed[b-ypvjjdk0n8] {
    background: var(--color-bg-tertiary);
    color: var(--color-text-muted);
}

.status-redeemed .status-dot[b-ypvjjdk0n8] {
    background: var(--color-text-muted);
}

.status-inactive[b-ypvjjdk0n8] {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.status-inactive .status-dot[b-ypvjjdk0n8] {
    background: var(--color-warning);
}

/* ----------------------------------------
   DATE CELLS
   ---------------------------------------- */
.date-cell[b-ypvjjdk0n8] {
    display: block;
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.time-cell[b-ypvjjdk0n8] {
    display: block;
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.date-empty[b-ypvjjdk0n8] {
    color: var(--color-text-muted);
}

/* ----------------------------------------
   RESPONSIVE DESIGN
   ---------------------------------------- */

/* Tablet */
@media (max-width: 991.98px) {
    .filters-grid[b-ypvjjdk0n8] {
        gap: var(--space-3);
    }

    .filter-field[b-ypvjjdk0n8] {
        min-width: 120px;
        max-width: none;
        flex: 1 1 calc(50% - var(--space-2));
    }

    .filter-field-wide[b-ypvjjdk0n8] {
        flex: 1 1 100%;
        max-width: none;
    }

    .filter-field-action[b-ypvjjdk0n8] {
        flex: 1 1 100%;
        max-width: none;
    }

    .card-header-content[b-ypvjjdk0n8] {
        flex-wrap: wrap;
    }

    .admin-search-header[b-ypvjjdk0n8] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .admin-search-controls[b-ypvjjdk0n8] {
        width: 100%;
        flex-wrap: wrap;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .filters-grid[b-ypvjjdk0n8] {
        flex-direction: column;
        gap: var(--space-3);
    }

    .filter-field[b-ypvjjdk0n8],
    .filter-field-wide[b-ypvjjdk0n8],
    .filter-field-action[b-ypvjjdk0n8] {
        width: 100%;
        min-width: auto;
        max-width: none;
        flex: none;
    }

    .card-icon[b-ypvjjdk0n8] {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-lg);
    }

    .card-icon svg[b-ypvjjdk0n8] {
        width: 18px;
        height: 18px;
    }

    .generated-voucher-card[b-ypvjjdk0n8] {
        flex-direction: column;
        text-align: center;
        border-radius: var(--radius-lg);
    }

    .voucher-code[b-ypvjjdk0n8] {
        font-size: 18px;
    }

    .toggle-label[b-ypvjjdk0n8] {
        flex-direction: row-reverse;
        justify-content: space-between;
        width: 100%;
    }

    .copy-btn-sm[b-ypvjjdk0n8] {
        opacity: 1;
    }
}

/* Small mobile */
@media (max-width: 575.98px) {
    .admin-table-card[b-ypvjjdk0n8] {
        border-radius: var(--radius-lg);
        margin-top: var(--space-4);
    }

    .table-empty-state[b-ypvjjdk0n8] {
        padding: var(--space-10) var(--space-4);
    }

    .empty-icon[b-ypvjjdk0n8] {
        width: 48px;
        height: 48px;
    }

    .voucher-code-cell .voucher-code-text[b-ypvjjdk0n8] {
        font-size: 11px;
        padding: var(--space-1) var(--space-2);
    }

    .voucher-copy-btn[b-ypvjjdk0n8] {
        width: 28px;
        height: 28px;
    }

    .voucher-copy-btn svg[b-ypvjjdk0n8] {
        width: var(--space-3);
        height: var(--space-3);
    }

    .amount-badge[b-ypvjjdk0n8] {
        font-size: 12px;
        padding: var(--space-1) 10px;
    }

    .status-badge[b-ypvjjdk0n8] {
        font-size: 11px;
        padding: var(--space-1) 10px;
    }
}

/* ----------------------------------------
   FOCUS STATES
   ---------------------------------------- */
[b-ypvjjdk0n8] .filter-input:focus-visible,
.filter-input:focus-visible[b-ypvjjdk0n8] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ----------------------------------------
   REDUCED MOTION
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    [b-ypvjjdk0n8] .loading-spinner-container .spinner {
        animation: none;
    }

    .toggle-slider[b-ypvjjdk0n8],
    .toggle-slider[b-ypvjjdk0n8]:before,
    .voucher-code-btn-large[b-ypvjjdk0n8],
    .voucher-copy-btn[b-ypvjjdk0n8],
    .admin-table-card[b-ypvjjdk0n8],
    [b-ypvjjdk0n8] .admin-table-row {
        transition: none;
    }

    .generated-voucher-card[b-ypvjjdk0n8],
    .admin-table-card[b-ypvjjdk0n8] {
        animation: none;
    }
}

/* ----------------------------------------
   PRINT STYLES
   ---------------------------------------- */
@media print {
    .admin-search-card:has(.filters-grid)[b-ypvjjdk0n8] {
        display: none;
    }

    .admin-table-card[b-ypvjjdk0n8] {
        border: 1px solid #ddd;
        box-shadow: none;
    }

    .copy-btn[b-ypvjjdk0n8],
    .copy-btn-sm[b-ypvjjdk0n8] {
        display: none;
    }

    .toggle-label[b-ypvjjdk0n8] {
        display: none;
    }
}
/* /Components/Pages/Admin/AdminWalletTransactions.razor.rz.scp.css */
/* ========================================
   AdminWalletTransactions — 2026 Design System
   CSS-only rewrite — no markup changes

   ALIGNMENT PATTERN:
   - All filter controls use CSS Flexbox for alignment
   - Every control has a visible label above it
   - Consistent heights: labels 18px, controls 44px
   - Consistent spacing: 8px gap between label and control
   - Horizontal gap: 16px between filter fields

   2026 DESIGN SYSTEM:
   - All hardcoded rgba() replaced with design tokens
   - Solid surfaces with border-primary borders
   - rise animation for smooth entry
   - Consistent 200ms cubic-bezier(.4,0,.2,1) transitions
   - var(--shadow-focus) for all focus states
   - Flat type badges with token colors
   ======================================== */

/* ----------------------------------------
   RISE ANIMATION
   ---------------------------------------- */
@keyframes rise-b-muqpwentad {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Override grid columns for 7-column layout */
[b-muqpwentad] .admin-grid-cols-7 {
    --admin-grid-cols: 7;
}

/* Ensure dropdown menus are visible outside containers */
[b-muqpwentad] .admin-search-card {
    overflow: visible;
}

/* ----------------------------------------
   FILTER FIELD LAYOUT
   Filters sit directly in AdminPageHeader's .aph-filters-content grid
   ---------------------------------------- */
.filter-field[b-muqpwentad] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

/* Visible label for all filter fields */
.filter-field-label[b-muqpwentad] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: -0.01em;
    line-height: 1.35;
    min-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Filter input wrapper with icon */
.filter-input-wrapper[b-muqpwentad] {
    position: relative;
    width: 100%;
    height: 44px;
}

.filter-input-icon[b-muqpwentad] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--color-text-muted);
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
}

[b-muqpwentad] .filter-input,
.filter-input[b-muqpwentad] {
    width: 100%;
    height: 44px !important;
    padding: 0 14px 0 36px;
    background: var(--color-bg-primary) !important;
    border: 1px solid var(--color-border-primary) !important;
    border-radius: var(--radius-md) !important;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1), box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
    box-sizing: border-box;
}

/* Override global Inputs.css 52px for ALL input types in filter fields */
.filter-input-wrapper input[b-muqpwentad],
.filter-input-wrapper[b-muqpwentad]  input,
.filter-field input[b-muqpwentad],
.filter-field[b-muqpwentad]  input,
.filter-field input[type="date"][b-muqpwentad],
.filter-field[b-muqpwentad]  input[type="date"],
.filter-field input[type="number"][b-muqpwentad],
.filter-field[b-muqpwentad]  input[type="number"],
.filter-field input[type="text"][b-muqpwentad],
.filter-field[b-muqpwentad]  input[type="text"] {
    height: 44px !important;
    box-sizing: border-box;
}

[b-muqpwentad] .filter-input:hover,
.filter-input:hover[b-muqpwentad] {
}

[b-muqpwentad] .filter-input:focus,
.filter-input:focus[b-muqpwentad] {
    outline: none;
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-focus);
    background: var(--color-bg-primary) !important;
}

[b-muqpwentad] .filter-input::placeholder,
.filter-input[b-muqpwentad]::placeholder {
    color: var(--color-text-muted);
    font-weight: 400;
}

/* Date input specific adjustments */
[b-muqpwentad] .filter-input-date {
    padding-right: 14px;
}

/* ========================================
   Modern Dropdown Combobox
   ======================================== */

.modern-dropdown[b-muqpwentad] {
    position: relative;
    width: 100%;
    height: 44px;
    flex-shrink: 0;
    outline: none;
    background: transparent !important;
    background-color: transparent !important;
}

.dropdown-trigger[b-muqpwentad] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    height: 44px;
    padding: 0 14px;
    background: var(--color-bg-primary) !important;
    background-color: var(--color-bg-primary) !important;
    border: 1px solid var(--color-border-primary) !important;
    border-radius: var(--radius-md) !important;
    cursor: pointer;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1), box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
    box-shadow: none;
}

.dropdown-trigger:hover[b-muqpwentad] {
    background: var(--color-bg-primary) !important;
    background-color: var(--color-bg-primary) !important;
    box-shadow: none;
}

.modern-dropdown.open .dropdown-trigger[b-muqpwentad] {
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-focus);
    background: var(--color-bg-primary) !important;
    background-color: var(--color-bg-primary) !important;
}

.dropdown-content-inner[b-muqpwentad] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    overflow: hidden;
    flex: 1;
    min-width: 0;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.dropdown-value[b-muqpwentad] {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-placeholder[b-muqpwentad] {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-muted);
}

.dropdown-arrow[b-muqpwentad] {
    width: 14px;
    height: 14px;
    color: var(--color-text-muted);
    flex-shrink: 0;
    transition: transform 200ms cubic-bezier(.4, 0, .2, 1);
}

.dropdown-arrow.rotated[b-muqpwentad] {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.dropdown-menu[b-muqpwentad] {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    width: 100%;
    min-width: 180px;
    max-height: 320px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    z-index: 1001;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: dropdownSlideIn-b-muqpwentad 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes dropdownSlideIn-b-muqpwentad {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown Options */
.dropdown-options[b-muqpwentad] {
    overflow-y: auto;
    max-height: 260px;
    padding: var(--space-2);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-secondary) transparent;
}

.dropdown-options[b-muqpwentad]::-webkit-scrollbar {
    width: 6px;
}

.dropdown-options[b-muqpwentad]::-webkit-scrollbar-track {
    background: transparent;
}

.dropdown-options[b-muqpwentad]::-webkit-scrollbar-thumb {
    background: var(--color-border-secondary);
    border-radius: 3px;
}

.dropdown-option[b-muqpwentad] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 10px var(--space-3);
    border-radius: 10px;
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.dropdown-option:hover[b-muqpwentad] {
    background: var(--color-bg-secondary);
}

.dropdown-option.selected[b-muqpwentad] {
    background: var(--color-info-light);
    color: var(--color-text-primary);
}

.dropdown-option.selected:hover[b-muqpwentad] {
    background: var(--color-info-light);
}

.type-option[b-muqpwentad] {
    display: flex;
    align-items: center;
}

.check-icon[b-muqpwentad] {
    color: var(--color-primary);
    flex-shrink: 0;
}

/* ----------------------------------------
   TABLE CARD WRAPPER
   ---------------------------------------- */
.admin-table-card[b-muqpwentad] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-top: var(--space-5);
    animation: rise-b-muqpwentad 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

.admin-table-card:hover[b-muqpwentad] {
    box-shadow: var(--shadow-sm);
}

/* Remove borders from individual rows */
[b-muqpwentad] .admin-table-row {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

/* Subtle separator between rows */
[b-muqpwentad] .admin-table-row:not(:last-child) {
}

/* Hover effect */
[b-muqpwentad] .admin-table-row:hover {
    background: var(--color-bg-secondary);
    box-shadow: none;
    border-color: transparent;
}

/* Row type highlights — positive (TopUp, Voucher) */
[b-muqpwentad] .admin-table-row.row-positive {
    background: var(--color-success-light);
}

[b-muqpwentad] .admin-table-row.row-positive:hover {
    background: var(--color-success-light);
}

/* Row type highlights — negative (Purchase) */
[b-muqpwentad] .admin-table-row.row-negative {
    background: var(--color-error-light);
}

[b-muqpwentad] .admin-table-row.row-negative:hover {
    background: var(--color-error-light);
}

/* Table rows container */
[b-muqpwentad] .admin-table-rows {
    gap: 0;
}

/* Header styling */
[b-muqpwentad] .admin-table-header {
    background: var(--color-bg-secondary);
    margin-bottom: 0;
    padding: var(--space-4) 0;
}

/* Table container */
[b-muqpwentad] .admin-table-container {
    margin-top: 0;
}

/* ----------------------------------------
   LOADING STATE
   ---------------------------------------- */
.table-loading-state[b-muqpwentad] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-16) var(--space-8);
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
}

.loading-spinner[b-muqpwentad] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border-primary);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-muqpwentad 0.8s linear infinite;
}

@keyframes spin-b-muqpwentad {
    to { transform: rotate(360deg); }
}

/* ----------------------------------------
   EMPTY STATE
   ---------------------------------------- */
.table-empty-state[b-muqpwentad] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-8);
    text-align: center;
}

.empty-icon[b-muqpwentad] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-5);
}

.empty-icon svg[b-muqpwentad] {
    width: 40px;
    height: 40px;
    color: var(--color-border-primary);
}

.empty-title[b-muqpwentad] {
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
}

.empty-text[b-muqpwentad] {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
}

/* ----------------------------------------
   TRANSACTION ID
   ---------------------------------------- */
.transaction-id[b-muqpwentad] {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace;
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

.transaction-id:hover[b-muqpwentad] {
    background: var(--color-bg-tertiary);
}

/* ----------------------------------------
   USER CELL
   ---------------------------------------- */
.user-cell[b-muqpwentad] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar[b-muqpwentad] {
    width: var(--space-8);
    height: var(--space-8);
    border-radius: 10px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.user-cell:hover .user-avatar[b-muqpwentad] {
    transform: none;
    box-shadow: none;
}

.user-info[b-muqpwentad] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.user-id[b-muqpwentad] {
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.user-email[b-muqpwentad] {
    font-size: 12px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----------------------------------------
   TYPE BADGES
   ---------------------------------------- */
.type-badge[b-muqpwentad] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px var(--space-3);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.type-badge:hover[b-muqpwentad] {
    transform: none;
    box-shadow: none;
}

.type-dot[b-muqpwentad] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.type-topup[b-muqpwentad] {
    background: var(--color-success-light);
    border: 1px solid var(--color-success-light);
    color: var(--color-success);
}

.type-topup .type-dot[b-muqpwentad] {
    background: var(--color-emerald);
}

.type-voucher[b-muqpwentad] {
    background: var(--color-info-light);
    border: 1px solid var(--color-info-light);
    color: var(--color-indigo);
}

.type-voucher .type-dot[b-muqpwentad] {
    background: var(--color-indigo);
}

.type-purchase[b-muqpwentad] {
    background: var(--color-error-light);
    border: 1px solid var(--color-error-light);
    color: var(--color-error);
}

.type-purchase .type-dot[b-muqpwentad] {
    background: var(--color-error-bright);
}

.type-adjustment[b-muqpwentad] {
    background: var(--color-warning-light);
    border: 1px solid var(--color-warning-light);
    color: var(--color-warning);
}

.type-adjustment .type-dot[b-muqpwentad] {
    background: var(--color-amber);
}

.type-default[b-muqpwentad] {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    color: var(--color-text-muted);
}

.type-default .type-dot[b-muqpwentad] {
    background: var(--color-text-muted);
}

/* ----------------------------------------
   AMOUNT COLUMN - Right aligned
   ---------------------------------------- */
.col-amount[b-muqpwentad] {
    text-align: right !important;
    justify-self: end;
}

/* ----------------------------------------
   AMOUNT STYLING
   ---------------------------------------- */
.amount[b-muqpwentad] {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}

.amount-positive[b-muqpwentad] {
    color: var(--color-success);
}

.amount-negative[b-muqpwentad] {
    color: var(--color-error);
}

.currency[b-muqpwentad] {
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    margin-left: var(--space-1);
}

.balance[b-muqpwentad] {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace;
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------
   DATE CELLS
   ---------------------------------------- */
.date-cell[b-muqpwentad] {
    display: block;
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.time-cell[b-muqpwentad] {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* ----------------------------------------
   REFERENCE BADGE
   ---------------------------------------- */
.reference-badge[b-muqpwentad] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) 10px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

.reference-badge:hover[b-muqpwentad] {
    background: var(--color-bg-tertiary);
}

.reference-empty[b-muqpwentad] {
    color: var(--color-text-muted);
}

/* ----------------------------------------
   PAGINATION
   ---------------------------------------- */
.admin-pagination[b-muqpwentad] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-5);
    padding: var(--space-4);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    animation: rise-b-muqpwentad 0.45s cubic-bezier(.4, 0, .2, 1) 0.05s both;
}

.admin-pagination-info[b-muqpwentad] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.admin-pagination-controls[b-muqpwentad] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.admin-pagination-btn[b-muqpwentad] {
    min-width: 36px;
    height: 36px;
    padding: 0 var(--space-2);
    background: transparent;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.admin-pagination-btn:hover:not(:disabled)[b-muqpwentad] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    transform: none;
    box-shadow: none;
}

.admin-pagination-btn:disabled[b-muqpwentad] {
    opacity: 0.4;
    cursor: not-allowed;
}

.admin-pagination-btn.active[b-muqpwentad] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
    box-shadow: none;
}

.admin-pagination-btn.active:hover[b-muqpwentad] {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.admin-pagination-ellipsis[b-muqpwentad] {
    padding: 0 var(--space-2);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
}

.admin-page-size-select[b-muqpwentad] {
    height: 36px;
    padding: 0 var(--space-3);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1), box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
    box-shadow: none;
}

.admin-page-size-select:hover[b-muqpwentad] {
}

.admin-page-size-select:focus[b-muqpwentad] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* ----------------------------------------
   RESPONSIVE DESIGN
   ---------------------------------------- */

/* Mobile */
@media (max-width: 767.98px) {
    .dropdown-menu[b-muqpwentad] {
        position: fixed;
        left: var(--space-4);
        right: var(--space-4);
        width: auto;
        min-width: auto;
        max-height: 50vh;
        z-index: 1100;
    }

    .user-avatar[b-muqpwentad] {
        width: 28px;
        height: 28px;
        border-radius: var(--radius-md);
        font-size: 11px;
    }

    .admin-pagination[b-muqpwentad] {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-pagination-info[b-muqpwentad] {
        text-align: center;
    }

    .admin-pagination-controls[b-muqpwentad] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .admin-page-size-select[b-muqpwentad] {
        width: 100%;
    }
}

/* Small mobile */
@media (max-width: 575.98px) {
    .admin-table-card[b-muqpwentad] {
        border-radius: var(--radius-lg);
        margin-top: var(--space-4);
    }

    .table-empty-state[b-muqpwentad],
    .table-loading-state[b-muqpwentad] {
        padding: var(--space-10) var(--space-4);
    }

    .empty-icon[b-muqpwentad] {
        width: 64px;
        height: 64px;
    }

    .empty-icon svg[b-muqpwentad] {
        width: var(--space-8);
        height: var(--space-8);
    }

    .type-badge[b-muqpwentad] {
        font-size: 11px;
        padding: var(--space-1) 10px;
    }

    .amount[b-muqpwentad] {
        font-size: 13px;
    }

    .balance[b-muqpwentad] {
        font-size: 12px;
    }
}

/* ----------------------------------------
   FOCUS STATES
   ---------------------------------------- */
[b-muqpwentad] .filter-input:focus-visible,
.filter-input:focus-visible[b-muqpwentad] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.modern-dropdown:focus-visible .dropdown-trigger[b-muqpwentad] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-focus);
}

.admin-pagination-btn:focus-visible[b-muqpwentad] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.admin-page-size-select:focus-visible[b-muqpwentad] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ----------------------------------------
   REDUCED MOTION
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .loading-spinner[b-muqpwentad] {
        animation: none;
    }

    .dropdown-trigger[b-muqpwentad],
    .dropdown-arrow[b-muqpwentad],
    .dropdown-option[b-muqpwentad],
    .dropdown-menu[b-muqpwentad],
    .admin-pagination-btn[b-muqpwentad],
    .admin-page-size-select[b-muqpwentad],
    .admin-table-card[b-muqpwentad],
    .admin-pagination[b-muqpwentad],
    .transaction-id[b-muqpwentad],
    .reference-badge[b-muqpwentad],
    .type-badge[b-muqpwentad],
    .user-avatar[b-muqpwentad] {
        transition: none;
    }

    .dropdown-menu[b-muqpwentad] {
        animation: none;
    }

    .admin-table-card[b-muqpwentad],
    .admin-pagination[b-muqpwentad] {
        animation: none;
    }
}

/* ----------------------------------------
   PRINT STYLES
   ---------------------------------------- */
@media print {
    .admin-search-card[b-muqpwentad] {
        display: none;
    }

    .admin-table-card[b-muqpwentad] {
        border: 1px solid #ddd;
        box-shadow: none;
    }

    .admin-pagination[b-muqpwentad] {
        display: none !important;
    }
}
/* /Components/Pages/Admin/Fares.razor.rz.scp.css */
/* ========================================
   ADMIN FARES – Premium 2026 Design
   fr- prefix · solid surfaces · design tokens
   ======================================== */

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes rise-b-07f4rlxhsg {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-shimmer-b-07f4rlxhsg {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

@keyframes spin-b-07f4rlxhsg {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ==========================================================================
   Header
   ========================================================================== */
.fr-header[b-07f4rlxhsg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}

.fr-header-text[b-07f4rlxhsg] {
    min-width: 0;
}

.fr-title[b-07f4rlxhsg] {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
    margin: 0 0 2px 0;
}

.fr-subtitle[b-07f4rlxhsg] {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-muted);
    letter-spacing: -0.01em;
    margin: 0;
}

.fr-header-actions[b-07f4rlxhsg] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.fr-btn[b-07f4rlxhsg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 200ms cubic-bezier(.4,0,.2,1),
                border-color 200ms cubic-bezier(.4,0,.2,1),
                box-shadow 200ms cubic-bezier(.4,0,.2,1),
                color 200ms cubic-bezier(.4,0,.2,1),
                opacity 200ms cubic-bezier(.4,0,.2,1);
}

.fr-btn svg[b-07f4rlxhsg] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.fr-btn:focus-visible[b-07f4rlxhsg] {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.fr-btn:disabled[b-07f4rlxhsg] {
    opacity: 0.5;
    cursor: not-allowed;
}

.fr-btn--primary[b-07f4rlxhsg] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.fr-btn--primary:hover:not(:disabled)[b-07f4rlxhsg] {
    background: var(--color-primary-hover, #1570b8);
    border-color: var(--color-primary-hover, #1570b8);
}

.fr-btn--secondary[b-07f4rlxhsg] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary);
}

.fr-btn--secondary:hover:not(:disabled)[b-07f4rlxhsg] {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-secondary, var(--color-text-light));
}

.fr-btn--outline[b-07f4rlxhsg] {
    background: transparent;
    border-color: var(--color-border-primary);
    color: var(--color-text-secondary);
}

.fr-btn--outline:hover:not(:disabled)[b-07f4rlxhsg] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary, var(--color-text-light));
    color: var(--color-text-primary);
}

.fr-btn--ghost[b-07f4rlxhsg] {
    background: transparent;
    border-color: transparent;
    color: var(--color-text-secondary);
    padding: 0 14px;
}

.fr-btn--ghost:hover:not(:disabled)[b-07f4rlxhsg] {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

.fr-btn--danger-subtle[b-07f4rlxhsg] {
    background: transparent;
    border-color: transparent;
    color: var(--color-error);
    padding: 0 14px;
}

.fr-btn--danger-subtle:hover:not(:disabled)[b-07f4rlxhsg] {
    background: rgba(239, 68, 68, 0.06);
}

.fr-btn--sm[b-07f4rlxhsg] {
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
}

.fr-btn--sm svg[b-07f4rlxhsg] {
    width: 14px;
    height: 14px;
}

.fr-btn-icon[b-07f4rlxhsg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4,0,.2,1),
                border-color 200ms cubic-bezier(.4,0,.2,1),
                color 200ms cubic-bezier(.4,0,.2,1);
}

.fr-btn-icon svg[b-07f4rlxhsg] {
    width: 18px;
    height: 18px;
}

.fr-btn-icon:hover:not(:disabled)[b-07f4rlxhsg] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary, var(--color-text-light));
    color: var(--color-text-primary);
}

.fr-btn-icon:focus-visible[b-07f4rlxhsg] {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.fr-btn-icon:disabled[b-07f4rlxhsg] {
    opacity: 0.5;
    cursor: not-allowed;
}

.fr-btn-icon--sm[b-07f4rlxhsg] {
    width: 38px;
    height: 38px;
}

.fr-btn-icon--sm svg[b-07f4rlxhsg] {
    width: 16px;
    height: 16px;
}

.fr-btn-icon--danger[b-07f4rlxhsg] {
    color: var(--color-text-secondary);
}

.fr-btn-icon--danger:hover:not(:disabled)[b-07f4rlxhsg] {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.2);
    color: var(--color-error);
}

.fr-spin[b-07f4rlxhsg] {
    animation: spin-b-07f4rlxhsg 0.8s linear infinite;
}

/* ==========================================================================
   Alert
   ========================================================================== */
.fr-alert[b-07f4rlxhsg] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 14px var(--space-4);
    border-radius: var(--radius-lg);
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.15);
    color: var(--color-error);
    font-size: 14px;
    margin-bottom: var(--space-4);
    animation: rise-b-07f4rlxhsg 0.3s cubic-bezier(.4,0,.2,1) both;
}

.fr-alert > svg[b-07f4rlxhsg] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.85;
}

.fr-alert-text[b-07f4rlxhsg] {
    flex: 1;
    min-width: 0;
}

.fr-alert-actions[b-07f4rlxhsg] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.fr-alert-retry[b-07f4rlxhsg] {
    padding: 4px 12px;
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-error);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4,0,.2,1);
}

.fr-alert-retry:hover[b-07f4rlxhsg] {
    background: rgba(239, 68, 68, 0.08);
}

.fr-alert-dismiss[b-07f4rlxhsg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-error);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 200ms, background 200ms;
}

.fr-alert-dismiss:hover[b-07f4rlxhsg] {
    opacity: 1;
    background: rgba(239, 68, 68, 0.08);
}

.fr-alert-dismiss svg[b-07f4rlxhsg] {
    width: 16px;
    height: 16px;
}

.fr-modal-alert[b-07f4rlxhsg] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 12px var(--space-4);
    border-radius: var(--radius-lg);
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.15);
    color: var(--color-error);
    font-size: 13px;
    margin-bottom: var(--space-4);
}

.fr-modal-alert > svg[b-07f4rlxhsg] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.fr-modal-alert > span[b-07f4rlxhsg] {
    flex: 1;
    min-width: 0;
}

/* ==========================================================================
   Skeleton Loading
   ========================================================================== */
.fr-skeleton-card[b-07f4rlxhsg] {
    animation: rise-b-07f4rlxhsg 0.45s cubic-bezier(.4,0,.2,1) both;
}

.fr-skeleton-card:nth-child(2)[b-07f4rlxhsg] { animation-delay: 0.06s; }
.fr-skeleton-card:nth-child(3)[b-07f4rlxhsg] { animation-delay: 0.12s; }

.fr-skeleton-hdr[b-07f4rlxhsg] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border-primary);
}

.fr-skeleton-icon[b-07f4rlxhsg] {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-bg-secondary) 50%, var(--color-bg-tertiary) 75%);
    background-size: 400px 100%;
    animation: skeleton-shimmer-b-07f4rlxhsg 1.6s ease infinite;
}

.fr-skeleton-body[b-07f4rlxhsg] {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.fr-skeleton-row[b-07f4rlxhsg] {
    display: flex;
    gap: var(--space-4);
    padding: 8px 0;
}

.fr-skeleton-line[b-07f4rlxhsg] {
    height: 14px;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-bg-secondary) 50%, var(--color-bg-tertiary) 75%);
    background-size: 400px 100%;
    animation: skeleton-shimmer-b-07f4rlxhsg 1.6s ease infinite;
}

.fr-skeleton-line--title[b-07f4rlxhsg] { width: 160px; height: 18px; }
.fr-skeleton-line--full[b-07f4rlxhsg]  { width: 100%; }
.fr-skeleton-line--70[b-07f4rlxhsg]    { width: 70%; }
.fr-skeleton-line--60[b-07f4rlxhsg]    { width: 60%; }
.fr-skeleton-line--40[b-07f4rlxhsg]    { width: 40%; }
.fr-skeleton-line--30[b-07f4rlxhsg]    { width: 30%; }
.fr-skeleton-line--25[b-07f4rlxhsg]    { width: 25%; }
.fr-skeleton-line--20[b-07f4rlxhsg]    { width: 20%; }

/* ==========================================================================
   Section Icons
   ========================================================================== */
.fr-icon[b-07f4rlxhsg] {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fr-icon svg[b-07f4rlxhsg] {
    width: 18px;
    height: 18px;
}

.fr-icon--policy[b-07f4rlxhsg] {
    background: rgba(26, 124, 202, 0.08);
    border: 1px solid rgba(26, 124, 202, 0.18);
    color: rgba(26, 124, 202, 0.95);
}

.fr-icon--rules[b-07f4rlxhsg] {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.18);
    color: rgba(146, 64, 14, 0.95);
}

.fr-icon--bulk[b-07f4rlxhsg] {
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.18);
    color: rgba(109, 40, 217, 0.95);
}

.fr-icon--csv[b-07f4rlxhsg] {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.18);
    color: rgba(6, 95, 70, 0.95);
}

/* ==========================================================================
   Card Header Shared
   ========================================================================== */
.fr-hdr-left[b-07f4rlxhsg] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.fr-hdr-title-group[b-07f4rlxhsg] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fr-card-subtitle[b-07f4rlxhsg] {
    margin: 2px 0 0 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-muted);
    letter-spacing: -0.01em;
}

/* ==========================================================================
   Card Rise Animation + Stacking
   ========================================================================== */
:is(.fr-policy-card, .fr-rules-card, .fr-bulk-card, .fr-csv-card)[b-07f4rlxhsg] {
    position: relative;
    animation: rise-b-07f4rlxhsg 0.45s cubic-bezier(.4,0,.2,1) both;
}

.fr-policy-card[b-07f4rlxhsg] { z-index: 5; animation-delay: 0s; }
.fr-rules-card[b-07f4rlxhsg]  { z-index: 4; animation-delay: 0.06s; }
.fr-bulk-card[b-07f4rlxhsg]   { z-index: 2; animation-delay: 0.12s; }
.fr-csv-card[b-07f4rlxhsg]    { z-index: 1; animation-delay: 0.18s; }

/* ==========================================================================
   Modern Dropdown (shared pattern)
   ========================================================================== */
.modern-dropdown[b-07f4rlxhsg] {
    position: relative;
}

.modern-dropdown-trigger[b-07f4rlxhsg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color 200ms cubic-bezier(.4,0,.2,1),
                box-shadow 200ms cubic-bezier(.4,0,.2,1);
    box-sizing: border-box;
}

.modern-dropdown-trigger:hover[b-07f4rlxhsg] {
    border-color: var(--color-border-secondary, var(--color-text-light));
}

.modern-dropdown-trigger:focus-visible[b-07f4rlxhsg] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.modern-dropdown-trigger > span[b-07f4rlxhsg] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.modern-dropdown-chevron[b-07f4rlxhsg] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.55;
    transition: transform 250ms cubic-bezier(.4,0,.2,1);
}

.modern-dropdown-chevron.open[b-07f4rlxhsg] {
    transform: rotate(180deg);
}

.modern-dropdown-menu[b-07f4rlxhsg] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 6000;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,.1));
    padding: 4px;
    display: flex;
    flex-direction: column;
    animation: rise-b-07f4rlxhsg 0.18s cubic-bezier(.4,0,.2,1) both;
}

.fr-dd-scroll[b-07f4rlxhsg] {
    max-height: 260px;
    overflow-y: auto;
}

.modern-dropdown-item[b-07f4rlxhsg] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    text-align: left;
    transition: background 150ms cubic-bezier(.4,0,.2,1);
}

.modern-dropdown-item:hover[b-07f4rlxhsg] {
    background: var(--color-bg-secondary);
}

.modern-dropdown-item.selected[b-07f4rlxhsg] {
    background: rgba(26, 124, 202, 0.06);
    font-weight: 500;
}

.modern-dropdown-check[b-07f4rlxhsg] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-primary);
    margin-left: auto;
}

.fr-dd-empty[b-07f4rlxhsg] {
    padding: 16px 12px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
}

.fr-placeholder[b-07f4rlxhsg] {
    color: var(--color-text-muted);
}

/* ==========================================================================
   POLICY CARD
   ========================================================================== */
.fr-policy-body[b-07f4rlxhsg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.fr-policy-row[b-07f4rlxhsg] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

.fr-policy-dd[b-07f4rlxhsg] {
    flex: 1;
    min-width: 280px;
}

.fr-policy-btns[b-07f4rlxhsg] {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

.fr-policy-option[b-07f4rlxhsg] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.fr-policy-option-name[b-07f4rlxhsg] {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fr-policy-option-meta[b-07f4rlxhsg] {
    font-size: 12px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.fr-policy-active-dot[b-07f4rlxhsg] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-success, #22c55e);
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}

/* Policy Info Strip */
.fr-policy-info[b-07f4rlxhsg] {
    display: flex;
    gap: var(--space-5);
    padding: 14px var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    flex-wrap: wrap;
}

.fr-policy-info-item[b-07f4rlxhsg] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fr-policy-info-label[b-07f4rlxhsg] {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-muted);
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.fr-policy-info-value[b-07f4rlxhsg] {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.fr-policy-info-count[b-07f4rlxhsg] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.fr-status-badge[b-07f4rlxhsg] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.fr-status--active[b-07f4rlxhsg] {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
}

.fr-status--inactive[b-07f4rlxhsg] {
    background: var(--color-bg-tertiary);
    color: var(--color-text-muted);
}

/* Copy Panel */
.fr-copy-panel[b-07f4rlxhsg] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    flex-wrap: wrap;
}

.fr-copy-label[b-07f4rlxhsg] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.fr-copy-label svg[b-07f4rlxhsg] {
    width: 16px;
    height: 16px;
    opacity: 0.85;
}

.fr-source-dd[b-07f4rlxhsg] {
    flex: 1;
    min-width: 260px;
}

/* ==========================================================================
   RULES CARD
   ========================================================================== */
.fr-rules-toolbar[b-07f4rlxhsg] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.fr-badge[b-07f4rlxhsg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    min-width: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
}

.fr-toggle-btn[b-07f4rlxhsg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4,0,.2,1),
                border-color 200ms cubic-bezier(.4,0,.2,1),
                color 200ms cubic-bezier(.4,0,.2,1);
}

.fr-toggle-btn svg[b-07f4rlxhsg] {
    width: 15px;
    height: 15px;
    opacity: 0.85;
}

.fr-toggle-btn:hover[b-07f4rlxhsg] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary, var(--color-text-light));
    color: var(--color-text-primary);
}

.fr-toggle-btn.active[b-07f4rlxhsg] {
    background: rgba(26, 124, 202, 0.06);
    border-color: rgba(26, 124, 202, 0.22);
    color: var(--color-text-primary);
}

.fr-toggle-btn:focus-visible[b-07f4rlxhsg] {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* Filters */
.fr-filters[b-07f4rlxhsg] {
    display: grid;
    gap: var(--space-4);
    align-items: end;
    padding: var(--space-4);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-primary);
}

@media (min-width: 992px) {
    .fr-filters[b-07f4rlxhsg] {
        grid-template-columns: 1fr minmax(140px, 170px) 1fr auto;
    }
}

@media (max-width: 991.98px) {
    .fr-filters[b-07f4rlxhsg] {
        grid-template-columns: 1fr;
    }
}

.fr-filter-field[b-07f4rlxhsg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.fr-filter-clear[b-07f4rlxhsg] {
    display: flex;
    align-items: flex-end;
}

/* Inputs */
.fr-label[b-07f4rlxhsg] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    letter-spacing: -0.01em;
}

.fr-input[b-07f4rlxhsg] {
    height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md) !important;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: 14px;
    width: 100%;
    box-sizing: border-box !important;
    transition: border-color 200ms cubic-bezier(.4,0,.2,1),
                box-shadow 200ms cubic-bezier(.4,0,.2,1);
}

.fr-input:focus[b-07f4rlxhsg],
.fr-input:focus-visible[b-07f4rlxhsg] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.fr-input[b-07f4rlxhsg]::placeholder {
    color: var(--color-text-muted);
}

.fr-input--zone[b-07f4rlxhsg] {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.fr-help-text[b-07f4rlxhsg] {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 4px;
}

/* ==========================================================================
   New Rule Section
   ========================================================================== */
.fr-new-rule[b-07f4rlxhsg] {
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
}

.fr-section-label[b-07f4rlxhsg] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}

.fr-section-label svg[b-07f4rlxhsg] {
    width: 16px;
    height: 16px;
    color: var(--color-text-secondary);
}

.fr-new-rule-grid[b-07f4rlxhsg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
    align-items: end;
}

.fr-field[b-07f4rlxhsg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.fr-field--action[b-07f4rlxhsg] {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.fr-trigger--compact[b-07f4rlxhsg] {
    height: 44px !important;
    font-size: 13px;
}

/* Uniform input height enforcement across all form grids */
.fr-new-rule-grid .modern-dropdown-trigger[b-07f4rlxhsg],
.fr-new-rule-grid input[b-07f4rlxhsg],
.fr-new-rule-grid .fr-btn[b-07f4rlxhsg],
.fr-bulk-fields .modern-dropdown-trigger[b-07f4rlxhsg],
.fr-bulk-fields input[b-07f4rlxhsg],
.fr-filters .modern-dropdown-trigger[b-07f4rlxhsg],
.fr-filters input[b-07f4rlxhsg],
.fr-zone-item input[b-07f4rlxhsg] {
    height: 44px !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   Rules Table
   ========================================================================== */
.fr-table-wrap[b-07f4rlxhsg] {
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-primary);
    background: var(--color-bg-primary);
    overflow: visible;
}

.fr-empty[b-07f4rlxhsg] {
    padding: 48px var(--space-6);
    text-align: center;
    color: var(--color-text-muted);
}

.fr-empty svg[b-07f4rlxhsg] {
    width: 44px;
    height: 44px;
    margin: 0 auto var(--space-3);
    opacity: 0.4;
}

.fr-empty p[b-07f4rlxhsg] {
    font-size: 14px;
    margin: 0;
}

.fr-table-head[b-07f4rlxhsg] {
    display: grid;
    grid-template-columns: 1.6fr 0.5fr 0.7fr 1fr 1.2fr 36px;
    gap: var(--space-3);
    padding: 10px var(--space-4);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.fr-th[b-07f4rlxhsg] {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-muted);
    letter-spacing: 0.01em;
    text-transform: uppercase;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fr-th--end[b-07f4rlxhsg] {
    text-align: right;
}

.fr-table-body[b-07f4rlxhsg] {
    display: flex;
    flex-direction: column;
}

.fr-row[b-07f4rlxhsg] {
    display: grid;
    grid-template-columns: 1.6fr 0.5fr 0.7fr 1fr 1.2fr 36px;
    gap: var(--space-3);
    padding: 12px var(--space-4);
    background: var(--color-bg-primary);
    align-items: center;
    box-shadow: inset 0 -1px 0 var(--color-border-primary);
    transition: background 200ms cubic-bezier(.4,0,.2,1);
    position: relative;
    z-index: 0;
    cursor: pointer;
}

.fr-row:hover[b-07f4rlxhsg] {
    background: var(--color-bg-secondary);
    z-index: 1;
}

.fr-row:hover .fr-chevron[b-07f4rlxhsg] {
    opacity: 1;
}

.fr-row:focus-visible[b-07f4rlxhsg] {
    outline: none;
    box-shadow: var(--shadow-focus);
    z-index: 2;
}

.fr-row:last-child[b-07f4rlxhsg] {
    box-shadow: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.fr-cell[b-07f4rlxhsg] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.fr-cell--chevron[b-07f4rlxhsg] {
    justify-content: flex-end;
}

/* Avatar */
.fr-avatar[b-07f4rlxhsg] {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    transition: transform 200ms cubic-bezier(.4,0,.2,1),
                box-shadow 200ms cubic-bezier(.4,0,.2,1);
}

.fr-row:hover .fr-avatar[b-07f4rlxhsg] {
    transform: scale(1.08);
}

.fr-avatar--blue[b-07f4rlxhsg]    { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.fr-avatar--teal[b-07f4rlxhsg]    { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.fr-avatar--indigo[b-07f4rlxhsg]  { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.fr-avatar--amber[b-07f4rlxhsg]   { background: linear-gradient(135deg, #f59e0b, #d97706); }

.fr-cell-name[b-07f4rlxhsg] {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fr-zone-badge[b-07f4rlxhsg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    min-width: 26px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
}

.fr-price[b-07f4rlxhsg] {
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
}

.fr-cell-text[b-07f4rlxhsg] {
    font-size: 14px;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fr-validity-group[b-07f4rlxhsg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fr-duration-tag[b-07f4rlxhsg] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.fr-chevron[b-07f4rlxhsg] {
    width: 18px;
    height: 18px;
    opacity: 0.3;
    color: var(--color-text-muted);
    transition: opacity 200ms cubic-bezier(.4,0,.2,1),
                transform 200ms cubic-bezier(.4,0,.2,1);
}

.fr-row:hover .fr-chevron[b-07f4rlxhsg] {
    transform: translateX(2px);
}

/* ==========================================================================
   BULK EDIT CARD
   ========================================================================== */
.fr-bulk-body[b-07f4rlxhsg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.fr-bulk-fields[b-07f4rlxhsg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    align-items: end;
}

/* Toggle (Apple-style) — scoped baseline (for elements in this template) */
.sr-only[b-07f4rlxhsg] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.fr-toggle[b-07f4rlxhsg] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.fr-toggle-track[b-07f4rlxhsg] {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    transition: background 250ms cubic-bezier(.4,0,.2,1),
                border-color 250ms cubic-bezier(.4,0,.2,1);
    flex-shrink: 0;
}

.fr-toggle-thumb[b-07f4rlxhsg] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
    transition: transform 250ms cubic-bezier(.4,0,.2,1);
}

.sr-only:checked + .fr-toggle-track[b-07f4rlxhsg] {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.sr-only:checked + .fr-toggle-track .fr-toggle-thumb[b-07f4rlxhsg] {
    transform: translateX(20px);
}

.sr-only:focus-visible + .fr-toggle-track[b-07f4rlxhsg] {
    box-shadow: var(--shadow-focus);
}

.fr-toggle--highlight[b-07f4rlxhsg] {
    background: rgba(26, 124, 202, 0.08);
    border-color: rgba(26, 124, 202, 0.22);
}

.sr-only:checked + .fr-toggle--highlight[b-07f4rlxhsg] {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.fr-toggle-label[b-07f4rlxhsg] {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
}

/* Toggle (Apple-style) — ::deep for child-component piercing */
[b-07f4rlxhsg] .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

[b-07f4rlxhsg] .fr-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

[b-07f4rlxhsg] .fr-toggle-track {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    transition: background 250ms cubic-bezier(.4,0,.2,1),
                border-color 250ms cubic-bezier(.4,0,.2,1);
    flex-shrink: 0;
}

[b-07f4rlxhsg] .fr-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
    transition: transform 250ms cubic-bezier(.4,0,.2,1);
}

[b-07f4rlxhsg] .sr-only:checked + .fr-toggle-track {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

[b-07f4rlxhsg] .sr-only:checked + .fr-toggle-track .fr-toggle-thumb {
    transform: translateX(20px);
}

[b-07f4rlxhsg] .sr-only:focus-visible + .fr-toggle-track {
    box-shadow: var(--shadow-focus);
}

[b-07f4rlxhsg] .fr-toggle--highlight {
    background: rgba(26, 124, 202, 0.08);
    border-color: rgba(26, 124, 202, 0.22);
}

[b-07f4rlxhsg] .sr-only:checked + .fr-toggle--highlight {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

[b-07f4rlxhsg] .fr-toggle-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.fr-toggle-row[b-07f4rlxhsg] {
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
}

/* Zone Price Grid */
.fr-zone-grid[b-07f4rlxhsg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-3);
}

.fr-zone-item[b-07f4rlxhsg] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: var(--radius-lg);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    transition: border-color 200ms cubic-bezier(.4,0,.2,1),
                box-shadow 200ms cubic-bezier(.4,0,.2,1);
}

.fr-zone-item:focus-within[b-07f4rlxhsg] {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.fr-zone-label[b-07f4rlxhsg] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    letter-spacing: -0.01em;
}

@media (min-width: 992px) {
    .fr-zone-grid[b-07f4rlxhsg] {
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        grid-template-columns: none;
    }

    .fr-zone-item[b-07f4rlxhsg] {
        padding: 10px;
    }

    .fr-zone-label[b-07f4rlxhsg] {
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.fr-bulk-footer[b-07f4rlxhsg] {
    display: flex;
    justify-content: flex-end;
}

/* ==========================================================================
   CSV CARD
   ========================================================================== */
.fr-csv-btns[b-07f4rlxhsg] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.fr-csv-body[b-07f4rlxhsg] {
    position: relative;
}

.fr-textarea[b-07f4rlxhsg] {
    font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace) !important;
    font-size: 13px;
    line-height: 1.6;
    width: 100%;
    min-height: 200px;
    resize: vertical;
    padding: 14px 16px !important;
    background: var(--color-bg-secondary) !important;
    border: 1px solid var(--color-border-primary) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--color-text-primary);
    box-sizing: border-box;
    transition: border-color 200ms cubic-bezier(.4,0,.2,1),
                box-shadow 200ms cubic-bezier(.4,0,.2,1);
}

.fr-textarea:focus[b-07f4rlxhsg] {
    outline: none;
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-focus);
    background: var(--color-bg-primary) !important;
}

.fr-textarea[b-07f4rlxhsg]::placeholder {
    color: var(--color-text-muted);
}

/* ==========================================================================
   MODAL FORM — scoped baseline (ChildContent elements keep parent scope)
   ========================================================================== */
.fr-modal-form[b-07f4rlxhsg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.fr-modal-alert[b-07f4rlxhsg] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 12px var(--space-4);
    border-radius: var(--radius-lg);
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.15);
    color: var(--color-error);
    font-size: 13px;
    margin-bottom: var(--space-2);
    animation: rise-b-07f4rlxhsg 300ms cubic-bezier(.16,1,.3,1);
}

.fr-modal-alert > svg[b-07f4rlxhsg] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.fr-modal-alert > span[b-07f4rlxhsg] {
    flex: 1;
    min-width: 0;
}

.fr-modal-section[b-07f4rlxhsg] {
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
}

.fr-modal-section--highlight[b-07f4rlxhsg] {
    background: rgba(26, 124, 202, 0.04);
    border-color: rgba(26, 124, 202, 0.18);
}

.fr-modal-section-header[b-07f4rlxhsg] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fr-modal-section-header svg[b-07f4rlxhsg] {
    width: 16px;
    height: 16px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.fr-modal-field[b-07f4rlxhsg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: var(--space-3);
}

.fr-modal-field:first-of-type[b-07f4rlxhsg] {
    margin-top: 0;
}

.fr-modal-fields-row[b-07f4rlxhsg] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-3);
    align-items: start;
}

.fr-modal-fields-row > .fr-modal-field[b-07f4rlxhsg] {
    margin-top: 0 !important;
}

.fr-modal-readonly-grid[b-07f4rlxhsg] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    align-items: start;
}

.fr-modal-readonly-grid > .fr-modal-readonly[b-07f4rlxhsg] {
    margin-top: 0 !important;
}

.fr-modal-readonly[b-07f4rlxhsg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fr-modal-actions[b-07f4rlxhsg] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-5);
    margin-top: var(--space-2);
    border-top: 1px solid var(--color-border-primary);
}

.fr-modal-actions-right[b-07f4rlxhsg] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
}

.fr-modal-actions .fr-btn[b-07f4rlxhsg] {
    height: 44px;
    padding: 0 24px;
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    transition: all 200ms cubic-bezier(.4,0,.2,1);
}

.fr-modal-actions .fr-btn--primary[b-07f4rlxhsg] {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: #fff;
    box-shadow: 0 1px 3px rgba(26, 124, 202, 0.25);
}

.fr-modal-actions .fr-btn--primary:hover:not(:disabled)[b-07f4rlxhsg] {
    background: var(--color-primary-hover, #1570b8);
    border-color: var(--color-primary-hover, #1570b8);
    box-shadow: 0 4px 12px rgba(26, 124, 202, 0.3);
    transform: translateY(-1px);
}

.fr-modal-actions .fr-btn--secondary[b-07f4rlxhsg] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    color: var(--color-text-secondary);
}

.fr-modal-actions .fr-btn--secondary:hover:not(:disabled)[b-07f4rlxhsg] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary, var(--color-text-light));
    color: var(--color-text-primary);
}

.fr-modal-actions .fr-btn--danger-subtle[b-07f4rlxhsg] {
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-error);
}

.fr-modal-actions .fr-btn--danger-subtle:hover:not(:disabled)[b-07f4rlxhsg] {
    background: rgba(239, 68, 68, 0.06);
}

.fr-modal-actions .fr-btn:focus-visible[b-07f4rlxhsg] {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.fr-modal-actions .fr-btn:disabled[b-07f4rlxhsg] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================================================
   MODAL FORM — ::deep to pierce Modal component (backup)
   ========================================================================== */
[b-07f4rlxhsg] .fr-modal-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

[b-07f4rlxhsg] .fr-modal-alert {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 12px var(--space-4);
    border-radius: var(--radius-lg);
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.15);
    color: var(--color-error);
    font-size: 13px;
    margin-bottom: var(--space-2);
    animation: rise-b-07f4rlxhsg 300ms cubic-bezier(.16,1,.3,1);
}

[b-07f4rlxhsg] .fr-modal-alert > svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

[b-07f4rlxhsg] .fr-modal-alert > span {
    flex: 1;
    min-width: 0;
}

[b-07f4rlxhsg] .fr-modal-section {
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
}

[b-07f4rlxhsg] .fr-modal-section--highlight {
    background: rgba(26, 124, 202, 0.04);
    border-color: rgba(26, 124, 202, 0.18);
}

[b-07f4rlxhsg] .fr-modal-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

[b-07f4rlxhsg] .fr-modal-section-header svg {
    width: 16px;
    height: 16px;
    color: var(--color-primary);
    flex-shrink: 0;
}

[b-07f4rlxhsg] .fr-modal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: var(--space-3);
}

[b-07f4rlxhsg] .fr-modal-field:first-of-type {
    margin-top: 0;
}

[b-07f4rlxhsg] .fr-modal-fields-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-3);
    align-items: start;
}

[b-07f4rlxhsg] .fr-modal-fields-row > .fr-modal-field {
    margin-top: 0 !important;
}

[b-07f4rlxhsg] .fr-modal-readonly-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    align-items: start;
}

[b-07f4rlxhsg] .fr-modal-readonly-grid > .fr-modal-readonly {
    margin-top: 0 !important;
}

[b-07f4rlxhsg] .fr-modal-readonly {
    display: flex;
    flex-direction: column;
    gap: 4px;
}



/* Full input styling — ::deep for InputText/InputDate/InputNumber components */
[b-07f4rlxhsg] .fr-input {
    height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md) !important;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: 14px;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box !important;
    transition: border-color 200ms cubic-bezier(.4,0,.2,1),
                box-shadow 200ms cubic-bezier(.4,0,.2,1);
}

[b-07f4rlxhsg] .fr-input:hover {
    border-color: var(--color-border-secondary);
}

[b-07f4rlxhsg] .fr-input:focus,
[b-07f4rlxhsg] .fr-input:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

[b-07f4rlxhsg] .fr-input::placeholder {
    color: var(--color-text-muted);
}

/* ==========================================================================
   MODAL — uniform 44px input height enforcement (all element types)
   ========================================================================== */

/* Scoped version (ChildContent elements keep parent scope) */
.fr-modal-form .fr-input[b-07f4rlxhsg],
.fr-modal-form input[b-07f4rlxhsg],
.fr-modal-form .modern-dropdown-trigger[b-07f4rlxhsg] {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid var(--color-border-primary) !important;
    border-radius: var(--radius-md) !important;
    background: var(--color-bg-primary) !important;
    color: var(--color-text-primary) !important;
    font-size: 14px !important;
    font-family: inherit !important;
    line-height: 42px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 200ms cubic-bezier(.4,0,.2,1),
                box-shadow 200ms cubic-bezier(.4,0,.2,1);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.fr-modal-form .fr-input:hover[b-07f4rlxhsg],
.fr-modal-form input:hover[b-07f4rlxhsg],
.fr-modal-form .modern-dropdown-trigger:hover[b-07f4rlxhsg] {
    border-color: var(--color-border-secondary) !important;
}

.fr-modal-form .fr-input:focus[b-07f4rlxhsg],
.fr-modal-form .fr-input:focus-visible[b-07f4rlxhsg],
.fr-modal-form input:focus[b-07f4rlxhsg],
.fr-modal-form input:focus-visible[b-07f4rlxhsg] {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-focus) !important;
}

/* ::deep version (for InputText/InputDate/InputNumber component outputs) */
[b-07f4rlxhsg] .fr-modal-form .fr-input,
[b-07f4rlxhsg] .fr-modal-form input,
[b-07f4rlxhsg] .fr-modal-form .modern-dropdown-trigger {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid var(--color-border-primary) !important;
    border-radius: var(--radius-md) !important;
    background: var(--color-bg-primary) !important;
    color: var(--color-text-primary) !important;
    font-size: 14px !important;
    font-family: inherit !important;
    line-height: 42px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 200ms cubic-bezier(.4,0,.2,1),
                box-shadow 200ms cubic-bezier(.4,0,.2,1);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

[b-07f4rlxhsg] .fr-modal-form .fr-input:hover,
[b-07f4rlxhsg] .fr-modal-form input:hover,
[b-07f4rlxhsg] .fr-modal-form .modern-dropdown-trigger:hover {
    border-color: var(--color-border-secondary) !important;
}

[b-07f4rlxhsg] .fr-modal-form .fr-input:focus,
[b-07f4rlxhsg] .fr-modal-form .fr-input:focus-visible,
[b-07f4rlxhsg] .fr-modal-form input:focus,
[b-07f4rlxhsg] .fr-modal-form input:focus-visible {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-focus) !important;
}

/* Exclude the sr-only checkbox from input styling */
.fr-modal-form input.sr-only[b-07f4rlxhsg],
[b-07f4rlxhsg] .fr-modal-form input.sr-only {
    height: 1px !important;
    min-height: 1px !important;
    max-height: 1px !important;
    width: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 0 !important;
    background: transparent !important;
}

/* Read-only values match input height */
.fr-modal-readonly-value[b-07f4rlxhsg],
[b-07f4rlxhsg] .fr-modal-readonly-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    height: 44px;
    line-height: 42px;
    padding: 0 14px;
    background: var(--color-bg-tertiary, #f1f5f9);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-07f4rlxhsg] .fr-modal-form .fr-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    letter-spacing: -0.01em;
}

[b-07f4rlxhsg] .fr-modal-form .fr-help-text {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 4px;
}

/* Modal Actions */
[b-07f4rlxhsg] .fr-modal-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-5);
    margin-top: var(--space-2);
    border-top: 1px solid var(--color-border-primary);
}

[b-07f4rlxhsg] .fr-modal-actions-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
}

/* Modal buttons */
[b-07f4rlxhsg] .fr-modal-actions .fr-btn {
    height: 44px;
    padding: 0 24px;
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    transition: all 200ms cubic-bezier(.4,0,.2,1);
}

[b-07f4rlxhsg] .fr-modal-actions .fr-btn--primary {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: #fff;
    box-shadow: 0 1px 3px rgba(26, 124, 202, 0.25);
}

[b-07f4rlxhsg] .fr-modal-actions .fr-btn--primary:hover:not(:disabled) {
    background: var(--color-primary-hover, #1570b8);
    border-color: var(--color-primary-hover, #1570b8);
    box-shadow: 0 4px 12px rgba(26, 124, 202, 0.3);
    transform: translateY(-1px);
}

[b-07f4rlxhsg] .fr-modal-actions .fr-btn--secondary {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    color: var(--color-text-secondary);
}

[b-07f4rlxhsg] .fr-modal-actions .fr-btn--secondary:hover:not(:disabled) {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary, var(--color-text-light));
    color: var(--color-text-primary);
}

[b-07f4rlxhsg] .fr-modal-actions .fr-btn--danger-subtle {
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-error);
}

[b-07f4rlxhsg] .fr-modal-actions .fr-btn--danger-subtle:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.06);
}

[b-07f4rlxhsg] .fr-modal-actions .fr-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

[b-07f4rlxhsg] .fr-modal-actions .fr-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================================================
   SCOPED INPUT & BUTTON OVERRIDES
   ========================================================================== */
[b-07f4rlxhsg] input[type="text"],
[b-07f4rlxhsg] input[type="number"],
[b-07f4rlxhsg] input[type="date"],
[b-07f4rlxhsg] textarea,
[b-07f4rlxhsg] select {
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    transition: border-color 200ms cubic-bezier(.4,0,.2,1),
                box-shadow 200ms cubic-bezier(.4,0,.2,1);
}

[b-07f4rlxhsg] input:focus,
[b-07f4rlxhsg] input:focus-visible,
[b-07f4rlxhsg] textarea:focus,
[b-07f4rlxhsg] textarea:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    :is(.fr-policy-card, .fr-rules-card, .fr-bulk-card, .fr-csv-card)[b-07f4rlxhsg] {
        box-shadow: none;
        border: 1px solid #ddd;
        animation: none;
    }

    .fr-avatar[b-07f4rlxhsg],
    .fr-zone-badge[b-07f4rlxhsg],
    .fr-badge[b-07f4rlxhsg],
    .fr-status-badge[b-07f4rlxhsg] {
        border: 1px solid #ddd;
    }

    .fr-header-actions[b-07f4rlxhsg],
    .fr-toggle-btn[b-07f4rlxhsg],
    .fr-copy-panel[b-07f4rlxhsg],
    .fr-new-rule[b-07f4rlxhsg],
    .fr-csv-card[b-07f4rlxhsg] {
        display: none;
    }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .fr-table-head[b-07f4rlxhsg] {
        display: none;
    }

    .fr-row[b-07f4rlxhsg] {
        grid-template-columns: 1fr;
        gap: var(--space-3);
        padding: var(--space-4);
        box-shadow: none;
        border-top: 1px solid var(--color-border-primary);
    }

    .fr-row:first-child[b-07f4rlxhsg] {
        border-top: none;
    }

    .fr-cell[b-07f4rlxhsg] {
        display: grid;
        grid-template-columns: 140px 1fr;
        gap: 10px;
        align-items: center;
    }

    .fr-cell[b-07f4rlxhsg]::before {
        content: attr(data-label);
        font-size: 12px;
        font-weight: 500;
        color: var(--color-text-muted);
        letter-spacing: -0.01em;
    }

    .fr-cell--chevron[b-07f4rlxhsg] {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .fr-header[b-07f4rlxhsg] {
        flex-direction: column;
    }

    .fr-header-actions[b-07f4rlxhsg] {
        width: 100%;
        justify-content: flex-end;
    }

    .fr-policy-row[b-07f4rlxhsg] {
        flex-direction: column;
        align-items: stretch;
    }

    .fr-policy-dd[b-07f4rlxhsg] {
        min-width: 0;
    }

    .fr-policy-btns[b-07f4rlxhsg] {
        justify-content: flex-end;
    }

    .fr-copy-panel[b-07f4rlxhsg] {
        flex-direction: column;
        align-items: stretch;
    }

    .fr-source-dd[b-07f4rlxhsg] {
        min-width: 0;
    }

    .fr-csv-btns[b-07f4rlxhsg] {
        flex-direction: column;
        width: 100%;
    }

    .fr-csv-btns .fr-btn[b-07f4rlxhsg] {
        width: 100%;
        justify-content: center;
    }

    .fr-new-rule[b-07f4rlxhsg] {
        padding: var(--space-4);
    }

    .fr-cell[b-07f4rlxhsg] {
        grid-template-columns: 120px 1fr;
    }

    .fr-modal-fields-row[b-07f4rlxhsg],
    [b-07f4rlxhsg] .fr-modal-fields-row,
    .fr-modal-readonly-grid[b-07f4rlxhsg],
    [b-07f4rlxhsg] .fr-modal-readonly-grid {
        grid-template-columns: 1fr;
    }

    .fr-modal-actions[b-07f4rlxhsg],
    [b-07f4rlxhsg] .fr-modal-actions {
        flex-direction: column;
        gap: var(--space-2);
    }

    .fr-modal-actions .fr-btn--danger-subtle[b-07f4rlxhsg],
    [b-07f4rlxhsg] .fr-modal-actions .fr-btn--danger-subtle {
        order: 1;
        width: 100%;
    }

    .fr-modal-actions-right[b-07f4rlxhsg],
    [b-07f4rlxhsg] .fr-modal-actions-right {
        width: 100%;
        margin-left: 0;
    }

    .fr-modal-actions-right .fr-btn[b-07f4rlxhsg],
    [b-07f4rlxhsg] .fr-modal-actions-right .fr-btn {
        flex: 1;
    }
}

@media (max-width: 640px) {
    .fr-policy-info[b-07f4rlxhsg] {
        flex-direction: column;
        gap: var(--space-3);
    }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .fr-row[b-07f4rlxhsg],
    .fr-toggle-btn[b-07f4rlxhsg],
    .fr-textarea[b-07f4rlxhsg],
    .fr-avatar[b-07f4rlxhsg],
    .fr-chevron[b-07f4rlxhsg],
    .fr-btn[b-07f4rlxhsg],
    .fr-btn-icon[b-07f4rlxhsg],
    .fr-zone-item[b-07f4rlxhsg],
    .modern-dropdown-trigger[b-07f4rlxhsg],
    .modern-dropdown-chevron[b-07f4rlxhsg],
    .modern-dropdown-item[b-07f4rlxhsg],
    .fr-toggle-track[b-07f4rlxhsg],
    .fr-toggle-thumb[b-07f4rlxhsg] {
        transition: none;
    }

    :is(.fr-policy-card, .fr-rules-card, .fr-bulk-card, .fr-csv-card)[b-07f4rlxhsg],
    .fr-alert[b-07f4rlxhsg],
    .modern-dropdown-menu[b-07f4rlxhsg],
    .fr-skeleton-card[b-07f4rlxhsg] {
        animation: none;
    }

    .fr-skeleton-icon[b-07f4rlxhsg],
    .fr-skeleton-line[b-07f4rlxhsg] {
        animation: none;
        background: var(--color-bg-tertiary);
    }

    .fr-spin[b-07f4rlxhsg] {
        animation: none;
    }
}
/* /Components/Pages/Admin/PassengerCategories.razor.rz.scp.css */
/* ========================================
   PASSENGER CATEGORIES — Premium 2026 Redesign
   Solid surfaces, design tokens, rise animation
   ======================================== */

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes rise-b-qhvn2rc6n9 {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-shimmer-b-qhvn2rc6n9 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes spin-b-qhvn2rc6n9 {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Grid Column Definition
   ========================================================================== */
[b-qhvn2rc6n9] .admin-grid-cols-4 {
    --admin-grid-cols: 4;
}

/* ==========================================================================
   TABLE CARD — Solid surface
   ========================================================================== */
.admin-table-card[b-qhvn2rc6n9] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    margin-top: var(--space-5);
    box-shadow: var(--shadow-sm);
    animation: rise-b-qhvn2rc6n9 0.45s cubic-bezier(.4, 0, .2, 1) both;
    overflow: hidden;
}

[b-qhvn2rc6n9] .admin-table-container {
    margin-top: 0;
}

[b-qhvn2rc6n9] .admin-table-header {
    background: var(--color-bg-secondary);
    margin-bottom: 0;
    padding: var(--space-4) 0;
    border-radius: 0;
}

[b-qhvn2rc6n9] .admin-table-rows {
    gap: 0;
}

[b-qhvn2rc6n9] .admin-table-row {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    padding: 0 var(--space-4) 0 0;
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
    display: flex;
    align-items: center;
}

[b-qhvn2rc6n9] .admin-table-row:hover {
    background: var(--color-bg-secondary);
    box-shadow: none;
    transform: none;
}

[b-qhvn2rc6n9] .admin-table-row:not(:last-child) {
    border-bottom: 1px solid var(--color-border-primary);
}

/* ==========================================================================
   CATEGORY ROW — Avatar + Name + Code + Status + Chevron
   ========================================================================== */
.pc-name-cell[b-qhvn2rc6n9] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.pc-avatar[b-qhvn2rc6n9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    border-radius: var(--radius-lg);
    color: var(--color-text-inverse);
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.18);
}

.pc-avatar svg[b-qhvn2rc6n9] {
    width: 16px;
    height: 16px;
}

[b-qhvn2rc6n9] .admin-table-row:hover .pc-avatar {
    transform: scale(1.06);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.28);
}

.pc-name-group[b-qhvn2rc6n9] {
    min-width: 0;
}

.pc-name[b-qhvn2rc6n9] {
    font-weight: var(--font-weight-semibold);
    font-size: 14px;
    color: var(--color-text-primary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.pc-code-badge[b-qhvn2rc6n9] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) 10px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace;
    color: var(--color-text-primary);
    letter-spacing: 0.04em;
    transition: background 200ms;
}

.pc-sort-num[b-qhvn2rc6n9] {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Status Badges
   ========================================================================== */
.pc-status[b-qhvn2rc6n9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.pc-status-active[b-qhvn2rc6n9] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.pc-status-inactive[b-qhvn2rc6n9] {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

.pc-dot[b-qhvn2rc6n9] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pc-dot-active[b-qhvn2rc6n9] {
    background: var(--color-success);
}

.pc-dot-inactive[b-qhvn2rc6n9] {
    background: var(--color-text-muted);
}

/* ==========================================================================
   Row Chevron
   ========================================================================== */
.pc-row-chevron[b-qhvn2rc6n9] {
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    margin-left: auto;
    flex-shrink: 0;
}

[b-qhvn2rc6n9] .admin-table-row:hover .pc-row-chevron {
    opacity: 0.5;
    transform: translateX(2px);
}

/* ==========================================================================
   Alert Enhancements
   ========================================================================== */
.admin-alert[b-qhvn2rc6n9] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.admin-alert-icon[b-qhvn2rc6n9] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.admin-alert-dismiss[b-qhvn2rc6n9] {
    margin-left: auto;
    background: transparent;
    border: none;
    padding: var(--space-1);
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: inherit;
    opacity: 0.6;
    transition: opacity 200ms;
}

.admin-alert-dismiss:hover[b-qhvn2rc6n9] {
    opacity: 1;
}

.admin-alert-dismiss svg[b-qhvn2rc6n9] {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   Loading Skeleton
   ========================================================================== */
.pc-loading-state[b-qhvn2rc6n9] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pc-skeleton-row[b-qhvn2rc6n9] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
}

.pc-skeleton-row:not(:last-child)[b-qhvn2rc6n9] {
    border-bottom: 1px solid var(--color-border-primary);
}

.pc-skeleton[b-qhvn2rc6n9] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 37%, var(--color-bg-tertiary) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer-b-qhvn2rc6n9 1.8s ease infinite;
    border-radius: var(--radius-sm);
}

.pc-skeleton-avatar[b-qhvn2rc6n9] {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: var(--radius-lg);
}

.pc-skeleton-code[b-qhvn2rc6n9] {
    width: 60px;
    height: 24px;
    border-radius: var(--radius-md);
}

.pc-skeleton-text[b-qhvn2rc6n9] {
    width: 180px;
    max-width: 30%;
    height: 16px;
}

.pc-skeleton-badge[b-qhvn2rc6n9] {
    width: 70px;
    height: 22px;
    border-radius: var(--radius-pill);
}

/* ==========================================================================
   Empty State
   ========================================================================== */
.admin-empty-state[b-qhvn2rc6n9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-16) var(--space-8);
    animation: rise-b-qhvn2rc6n9 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

.pc-empty-icon[b-qhvn2rc6n9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: 50%;
    margin-bottom: var(--space-5);
}

.pc-empty-icon svg[b-qhvn2rc6n9] {
    width: 28px;
    height: 28px;
    color: var(--color-text-muted);
}

.admin-empty-state-title[b-qhvn2rc6n9] {
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
}

.admin-empty-state-text[b-qhvn2rc6n9] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-6) 0;
    max-width: 400px;
}

.pc-empty-btn[b-qhvn2rc6n9] {
    height: 38px;
    padding: 0 var(--space-5);
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-inverse);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: background 200ms, border-color 200ms;
    font-family: inherit;
}

.pc-empty-btn:hover[b-qhvn2rc6n9] {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.pc-empty-btn svg[b-qhvn2rc6n9] {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   Modern Dropdown (Status Filter)
   ========================================================================== */
.modern-dropdown[b-qhvn2rc6n9] {
    position: relative;
    outline: none;
}

.modern-dropdown-trigger[b-qhvn2rc6n9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 44px;
    padding: 0 var(--space-3);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: border-color 200ms, box-shadow 200ms;
    font-family: inherit;
    gap: var(--space-2);
    text-align: left;
}

.modern-dropdown-trigger:hover[b-qhvn2rc6n9] {
    border-color: var(--color-border-secondary);
}

.modern-dropdown-trigger:focus[b-qhvn2rc6n9],
.modern-dropdown-trigger[aria-expanded="true"][b-qhvn2rc6n9] {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.modern-dropdown-chevron[b-qhvn2rc6n9] {
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    flex-shrink: 0;
    transition: transform 200ms;
}

.modern-dropdown-chevron.open[b-qhvn2rc6n9] {
    transform: rotate(180deg);
}

.modern-dropdown-menu[b-qhvn2rc6n9] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    overflow: hidden;
    padding: var(--space-1) 0;
    animation: rise-b-qhvn2rc6n9 0.15s cubic-bezier(.4, 0, .2, 1) both;
}

.modern-dropdown-item[b-qhvn2rc6n9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: none;
    border: none;
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 150ms;
    text-align: left;
    font-family: inherit;
    gap: var(--space-2);
}

.modern-dropdown-item:hover[b-qhvn2rc6n9] {
    background: var(--color-bg-secondary);
}

.modern-dropdown-item.selected[b-qhvn2rc6n9] {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.modern-dropdown-check[b-qhvn2rc6n9] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--color-primary);
}

.pc-dropdown-status[b-qhvn2rc6n9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ==========================================================================
   MODAL FORM — Flat layout
   ========================================================================== */
.pc-form[b-qhvn2rc6n9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.pc-form-field[b-qhvn2rc6n9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pc-form-label[b-qhvn2rc6n9] {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.pc-form-req[b-qhvn2rc6n9] {
    color: var(--color-error);
    font-weight: var(--font-weight-bold);
}

.pc-form-hint[b-qhvn2rc6n9] {
    font-size: 12px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    margin: 0;
}

.pc-form-input[b-qhvn2rc6n9] {
    width: 100%;
    height: 40px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    transition: border-color 200ms, box-shadow 200ms;
    box-sizing: border-box;
    font-family: inherit;
}

.pc-form-input:hover[b-qhvn2rc6n9] {
    border-color: var(--color-border-secondary);
}

.pc-form-input:focus[b-qhvn2rc6n9] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.pc-form-input[b-qhvn2rc6n9]::placeholder {
    color: var(--color-text-muted);
}

[b-qhvn2rc6n9] .pc-form-input {
    width: 100%;
    height: 40px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    transition: border-color 200ms, box-shadow 200ms;
    box-sizing: border-box;
    font-family: inherit;
}

[b-qhvn2rc6n9] .pc-form-input:hover {
    border-color: var(--color-border-secondary);
}

[b-qhvn2rc6n9] .pc-form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

[b-qhvn2rc6n9] .pc-form-input::placeholder {
    color: var(--color-text-muted);
}

.pc-form-error[b-qhvn2rc6n9] {
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-error);
}

/* Modal error */
.pc-modal-error[b-qhvn2rc6n9] {
    padding: var(--space-3) var(--space-4);
    background: var(--color-error-light);
    border: 1px solid var(--color-error-bright);
    border-radius: var(--radius-md);
    color: var(--color-error);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-4);
    animation: rise-b-qhvn2rc6n9 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

/* ==========================================================================
   Apple-style Toggle
   ========================================================================== */
.pc-form-toggle-row[b-qhvn2rc6n9] {
    display: flex;
    align-items: center;
    padding: var(--space-2) 0;
}

.pc-toggle[b-qhvn2rc6n9] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
}

[b-qhvn2rc6n9] .pc-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pc-toggle-track[b-qhvn2rc6n9] {
    display: flex;
    align-items: center;
    width: 44px;
    height: 24px;
    background: var(--color-border-primary);
    border-radius: 12px;
    padding: 2px;
    transition: background 0.3s cubic-bezier(.4, 0, .2, 1);
    position: relative;
    flex-shrink: 0;
}

.pc-toggle-thumb[b-qhvn2rc6n9] {
    display: block;
    width: 20px;
    height: 20px;
    background: var(--color-bg-primary);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s cubic-bezier(.4, 0, .2, 1);
}

[b-qhvn2rc6n9] .pc-toggle-input:checked ~ .pc-toggle-track {
    background: var(--color-primary);
}

[b-qhvn2rc6n9] .pc-toggle-input:checked ~ .pc-toggle-track .pc-toggle-thumb {
    transform: translateX(20px);
}

[b-qhvn2rc6n9] .pc-toggle-input:focus-visible ~ .pc-toggle-track {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.pc-toggle-label[b-qhvn2rc6n9] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    line-height: 1.4;
    user-select: none;
}

/* ==========================================================================
   FORM ACTIONS — Delete left, Cancel+Save right
   ========================================================================== */
.pc-form-actions[b-qhvn2rc6n9] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-primary);
    margin-top: var(--space-5);
}

.pc-form-actions-right[b-qhvn2rc6n9] {
    display: flex;
    gap: var(--space-3);
    margin-left: auto;
}

.pc-delete-btn[b-qhvn2rc6n9] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-error);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background 200ms, color 200ms;
    font-family: inherit;
}

.pc-delete-btn:hover[b-qhvn2rc6n9] {
    background: var(--color-error-light);
}

.pc-delete-btn svg[b-qhvn2rc6n9] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.pc-cancel-btn[b-qhvn2rc6n9] {
    height: 38px;
    padding: 0 var(--space-5);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 200ms, border-color 200ms, color 200ms;
    font-family: inherit;
}

.pc-cancel-btn:hover[b-qhvn2rc6n9] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.pc-save-btn[b-qhvn2rc6n9] {
    height: 38px;
    padding: 0 var(--space-5);
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-inverse);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: background 200ms, border-color 200ms;
    font-family: inherit;
}

.pc-save-btn:hover[b-qhvn2rc6n9] {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.pc-save-btn:disabled[b-qhvn2rc6n9] {
    opacity: 0.7;
    cursor: not-allowed;
}

.pc-save-btn svg[b-qhvn2rc6n9] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.pc-spinner[b-qhvn2rc6n9] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-qhvn2rc6n9 0.6s linear infinite;
}

/* ==========================================================================
   MOBILE — Card Layout (991.98px)
   ========================================================================== */
@media (max-width: 991.98px) {
    .admin-table-card[b-qhvn2rc6n9] {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        margin-top: var(--space-4);
        box-shadow: none !important;
        overflow: visible !important;
    }

    [b-qhvn2rc6n9] .admin-table-header,
    [b-qhvn2rc6n9] .admin-table-header.admin-auto-grid {
        display: none !important;
    }

    [b-qhvn2rc6n9] .admin-table-rows {
        gap: var(--space-3) !important;
    }

    [b-qhvn2rc6n9] .admin-table-row,
    [b-qhvn2rc6n9] .admin-table-container .admin-table-row {
        border-radius: var(--radius-lg) !important;
        padding: var(--space-4) !important;
        background: var(--color-bg-primary) !important;
        border: 1px solid var(--color-border-primary) !important;
        box-shadow: var(--shadow-sm) !important;
        flex-wrap: wrap;
    }

    [b-qhvn2rc6n9] .admin-table-row:hover {
        transform: none !important;
    }

    [b-qhvn2rc6n9] .admin-table-row-content,
    [b-qhvn2rc6n9] .admin-table-row-content.admin-auto-grid,
    [b-qhvn2rc6n9] .admin-table-row-content.admin-auto-grid.admin-grid-cols-4 {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
        gap: var(--space-3) !important;
    }

    [b-qhvn2rc6n9] .admin-auto-grid .admin-table-cell,
    [b-qhvn2rc6n9] .admin-auto-grid .admin-table-cell-primary {
        display: flex !important;
        padding: 0 !important;
        width: 100% !important;
    }

    [b-qhvn2rc6n9] .admin-auto-grid .admin-table-cell::before,
    [b-qhvn2rc6n9] .admin-auto-grid .admin-table-cell-primary::before {
        display: none !important;
    }

    .pc-row-chevron[b-qhvn2rc6n9] {
        display: none;
    }
}

/* ==========================================================================
   SMALL SCREENS (767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {
    .pc-form-actions[b-qhvn2rc6n9] {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .pc-form-actions-right[b-qhvn2rc6n9] {
        flex-direction: column-reverse;
        margin-left: 0;
    }

    .pc-cancel-btn[b-qhvn2rc6n9],
    .pc-save-btn[b-qhvn2rc6n9],
    .pc-delete-btn[b-qhvn2rc6n9] {
        width: 100%;
        justify-content: center;
    }

    .admin-empty-state[b-qhvn2rc6n9] {
        padding: var(--space-12) var(--space-5);
    }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .pc-skeleton[b-qhvn2rc6n9],
    [b-qhvn2rc6n9] .admin-table-row,
    .pc-avatar[b-qhvn2rc6n9],
    .pc-row-chevron[b-qhvn2rc6n9],
    .pc-form-input[b-qhvn2rc6n9],
    [b-qhvn2rc6n9] .pc-form-input,
    .pc-cancel-btn[b-qhvn2rc6n9],
    .pc-save-btn[b-qhvn2rc6n9],
    .pc-delete-btn[b-qhvn2rc6n9],
    .pc-empty-btn[b-qhvn2rc6n9],
    .pc-toggle-track[b-qhvn2rc6n9],
    .pc-toggle-thumb[b-qhvn2rc6n9],
    .modern-dropdown-trigger[b-qhvn2rc6n9],
    .modern-dropdown-item[b-qhvn2rc6n9],
    .modern-dropdown-chevron[b-qhvn2rc6n9],
    .admin-alert-dismiss[b-qhvn2rc6n9],
    .pc-code-badge[b-qhvn2rc6n9] {
        transition: none;
        animation: none;
    }

    .admin-table-card[b-qhvn2rc6n9],
    .admin-empty-state[b-qhvn2rc6n9],
    .pc-modal-error[b-qhvn2rc6n9],
    .modern-dropdown-menu[b-qhvn2rc6n9] {
        animation: none;
    }

    .pc-spinner[b-qhvn2rc6n9] {
        animation: none;
    }
}

/* ==========================================================================
   FOCUS STATES
   ========================================================================== */
.pc-cancel-btn:focus-visible[b-qhvn2rc6n9],
.pc-save-btn:focus-visible[b-qhvn2rc6n9],
.pc-delete-btn:focus-visible[b-qhvn2rc6n9],
.pc-empty-btn:focus-visible[b-qhvn2rc6n9],
.admin-alert-dismiss:focus-visible[b-qhvn2rc6n9],
.modern-dropdown-trigger:focus-visible[b-qhvn2rc6n9] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

[b-qhvn2rc6n9] .pc-form-input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .admin-table-card[b-qhvn2rc6n9] {
        border: 1px solid #ddd;
        box-shadow: none;
        background: var(--color-bg-primary);
    }

    .pc-row-chevron[b-qhvn2rc6n9],
    .pc-avatar[b-qhvn2rc6n9] {
        display: none;
    }
}
/* /Components/Pages/Admin/Reports/ReportActivity.razor.rz.scp.css */
/* ========================================
   ADMIN REPORTS — 2026 Design System
   Matches AdminTrackingEmulator card style:
   Icon circles, title+subtitle headers, 48px inputs,
   card hover elevation, staggered rise animation.
   rp-* prefix for scoped isolation.
   ======================================== */

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes rise-b-875qv57s7w {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-shimmer-b-875qv57s7w {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   ALERTS
   ========================================================================== */
.admin-container[b-875qv57s7w] >  .app-alert {
    margin-bottom: var(--space-5);
}

/* ==========================================================================
   GRID LAYOUT — Two columns on desktop
   ========================================================================== */
.rp-grid[b-875qv57s7w] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: start;
}

.rp-column[b-875qv57s7w] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ==========================================================================
   SKELETON LOADING STATE
   ========================================================================== */
.rp-skeleton-card[b-875qv57s7w] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.rp-skeleton-header[b-875qv57s7w] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) 0 var(--space-6);
}

.rp-skeleton-header-text[b-875qv57s7w] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rp-skeleton-icon[b-875qv57s7w] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.rp-skeleton-title[b-875qv57s7w] {
    height: 22px;
    width: 55%;
    border-radius: var(--radius-sm);
}

.rp-skeleton-subtitle[b-875qv57s7w] {
    height: 16px;
    width: 75%;
    border-radius: var(--radius-sm);
}

.rp-skeleton-body[b-875qv57s7w] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
}

.rp-skeleton-filter[b-875qv57s7w] {
    height: 48px;
    border-radius: var(--radius-md);
}

.rp-skeleton-table[b-875qv57s7w] {
    height: 100px;
    border-radius: var(--radius-md);
}

.rp-skeleton[b-875qv57s7w] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 37%, var(--color-bg-tertiary) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer-b-875qv57s7w 1.8s ease infinite;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   CARD — Solid surface with hover elevation
   ========================================================================== */
.rp-card[b-875qv57s7w] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: visible;
    box-shadow: var(--shadow-sm);
    position: relative;
    animation: rise-b-875qv57s7w .45s cubic-bezier(.4, 0, .2, 1) both;
    transition: box-shadow 200ms cubic-bezier(.4, 0, .2, 1), transform 200ms cubic-bezier(.4, 0, .2, 1);
}

/* Staggered animation delays per column */
.rp-column:first-child .rp-card:nth-child(1)[b-875qv57s7w] { animation-delay: 0s; }
.rp-column:first-child .rp-card:nth-child(2)[b-875qv57s7w] { animation-delay: 0.06s; }
.rp-column:first-child .rp-card:nth-child(3)[b-875qv57s7w] { animation-delay: 0.12s; }
.rp-column:first-child .rp-card:nth-child(4)[b-875qv57s7w] { animation-delay: 0.18s; }
.rp-column:first-child .rp-card:nth-child(5)[b-875qv57s7w] { animation-delay: 0.24s; }
.rp-column:last-child .rp-card:nth-child(1)[b-875qv57s7w] { animation-delay: 0.03s; }
.rp-column:last-child .rp-card:nth-child(2)[b-875qv57s7w] { animation-delay: 0.09s; }
.rp-column:last-child .rp-card:nth-child(3)[b-875qv57s7w] { animation-delay: 0.15s; }
.rp-column:last-child .rp-card:nth-child(4)[b-875qv57s7w] { animation-delay: 0.21s; }
.rp-column:last-child .rp-card:nth-child(5)[b-875qv57s7w] { animation-delay: 0.27s; }
.rp-column:last-child .rp-card:nth-child(6)[b-875qv57s7w] { animation-delay: 0.33s; }

.rp-card:hover[b-875qv57s7w] {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.rp-card-full[b-875qv57s7w] {
    /* For full-width cards if needed in future; currently unused in 2-col layout */
}

/* Detailed validation card — full width below grid */
.rp-card-detailed[b-875qv57s7w] {
    margin-top: var(--space-6);
    animation-delay: 0.36s;
}

/* ==========================================================================
   CARD HEADER — Icon circle + title + subtitle
   ========================================================================== */
.rp-card-header[b-875qv57s7w] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) 0 var(--space-6);
}

.rp-card-icon[b-875qv57s7w] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Icon color variants */
.rp-icon-sales[b-875qv57s7w]       { background: var(--color-primary-light); color: var(--color-primary); }
.rp-icon-validation[b-875qv57s7w]  { background: var(--color-success-light); color: var(--color-success); }
.rp-icon-payments[b-875qv57s7w]    { background: #F0FDF4; color: #16A34A; }
.rp-icon-revenue[b-875qv57s7w]     { background: var(--color-warning-light); color: var(--color-warning); }
.rp-icon-tickets[b-875qv57s7w]     { background: #EEF2FF; color: #4F46E5; }
.rp-icon-wallet[b-875qv57s7w]      { background: #FFF1F2; color: #E11D48; }
.rp-icon-invoices[b-875qv57s7w]    { background: var(--color-error-light); color: var(--color-error); }
.rp-icon-documents[b-875qv57s7w]   { background: #F3E8FF; color: #9333EA; }
.rp-icon-activity[b-875qv57s7w]    { background: #FFF7ED; color: #EA580C; }
.rp-icon-disruptions[b-875qv57s7w] { background: var(--color-error-light); color: var(--color-error); }

.rp-card-header-text[b-875qv57s7w] {
    flex: 1;
    min-width: 0;
}

.rp-card-title[b-875qv57s7w] {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1) 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.rp-card-subtitle[b-875qv57s7w] {
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* ==========================================================================
   CARD BODY
   ========================================================================== */
.rp-card-body[b-875qv57s7w] {
    padding: var(--space-6);
}

/* ==========================================================================
   FILTERS — Date inputs + refresh button row
   ========================================================================== */
.rp-filters[b-875qv57s7w] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border-primary);
}

.rp-filters-wrap[b-875qv57s7w] {
    /* Ensure filter row wraps nicely for the detailed card with many filters */
}

.rp-filter-field[b-875qv57s7w] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
    min-width: 140px;
}

.rp-filter-label[b-875qv57s7w] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 16px;
    height: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0;
    display: block;
}

.rp-filter-input[b-875qv57s7w],
.rp-filter-input[type="date"][b-875qv57s7w] {
    height: 48px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    padding: 0 var(--space-4);
    font-size: 15px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    width: 100%;
    box-sizing: border-box;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

select.rp-filter-input[b-875qv57s7w] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.rp-filter-input:hover[b-875qv57s7w] {
    border-color: var(--color-border-secondary);
}

.rp-filter-input:focus[b-875qv57s7w] {
    outline: none;
    border: 1px solid var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.rp-filter-input[type="date"][b-875qv57s7w]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 200ms;
}

.rp-filter-input[type="date"][b-875qv57s7w]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Refresh button */
[b-875qv57s7w] .rp-refresh-btn {
    min-width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ==========================================================================
   EXPORT BUTTONS — Small icon buttons next to refresh
   ========================================================================== */
.rp-export-btn[b-875qv57s7w] {
    width: 40px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    padding: 0;
}

.rp-export-btn:hover[b-875qv57s7w] {
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
}

.rp-export-btn:active[b-875qv57s7w] {
    transform: scale(0.95);
}

.rp-export-xlsx:hover[b-875qv57s7w] {
    border-color: #16A34A;
    color: #16A34A;
    background: #F0FDF4;
}

.rp-export-pdf:hover[b-875qv57s7w] {
    border-color: var(--color-error);
    color: var(--color-error);
    background: var(--color-error-light);
}

/* ==========================================================================
   TABLE
   ========================================================================== */
.rp-table-wrap[b-875qv57s7w] {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
}

.rp-table[b-875qv57s7w] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.rp-table thead th[b-875qv57s7w] {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-primary);
    white-space: nowrap;
}

.rp-table tbody td[b-875qv57s7w] {
    padding: 14px var(--space-4);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-normal);
    border-bottom: 1px solid var(--color-border-primary);
}

.rp-table tbody tr:last-child td[b-875qv57s7w] {
    border-bottom: none;
}

.rp-table tbody tr[b-875qv57s7w] {
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-table tbody tr:hover[b-875qv57s7w] {
    background: var(--color-bg-secondary);
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.rp-empty[b-875qv57s7w] {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    font-size: 14px;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   SUMMARY LIST (ticket summary)
   ========================================================================== */
.rp-summary-list[b-875qv57s7w] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.rp-summary-item[b-875qv57s7w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-summary-item:hover[b-875qv57s7w] {
    border-color: var(--color-border-secondary);
}

.rp-summary-label[b-875qv57s7w] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.rp-summary-value[b-875qv57s7w] {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Colored summary values */
.rp-val-success[b-875qv57s7w] { color: var(--color-success); }
.rp-val-warning[b-875qv57s7w] { color: var(--color-warning); }
.rp-val-danger[b-875qv57s7w]  { color: var(--color-error); }

/* ==========================================================================
   STAT CARDS GRID (disruptions, detailed validation summary)
   ========================================================================== */
.rp-stat-grid[b-875qv57s7w] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.rp-vd-stats[b-875qv57s7w] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.rp-stat-card[b-875qv57s7w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-stat-card:hover[b-875qv57s7w] {
    border-color: var(--color-border-secondary);
}

.rp-stat-label[b-875qv57s7w] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.rp-stat-value[b-875qv57s7w] {
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Stat color accents */
.rp-stat-success .rp-stat-value[b-875qv57s7w] { color: var(--color-success); }
.rp-stat-info .rp-stat-value[b-875qv57s7w]    { color: var(--color-primary); }
.rp-stat-muted .rp-stat-value[b-875qv57s7w]   { color: var(--color-text-muted); }

/* ==========================================================================
   BREAKDOWN GRID (by validator, by line, by vehicle)
   ========================================================================== */
.rp-breakdown-grid[b-875qv57s7w] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.rp-breakdown-item[b-875qv57s7w] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 13px;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-breakdown-item:hover[b-875qv57s7w] {
    border-color: var(--color-border-secondary);
}

.rp-breakdown-label[b-875qv57s7w] {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.rp-breakdown-value[b-875qv57s7w] {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   BADGES (success/error status in table)
   ========================================================================== */
.rp-badge[b-875qv57s7w] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.rp-badge-success[b-875qv57s7w] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.rp-badge-error[b-875qv57s7w] {
    background: var(--color-error-light);
    color: var(--color-error);
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.rp-pagination[b-875qv57s7w] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-primary);
}

[b-875qv57s7w] .rp-page-btn {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rp-page-info[b-875qv57s7w] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   SECTION TITLE (invoices sub-sections, breakdown headers)
   ========================================================================== */
.rp-section-title[b-875qv57s7w] {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3) 0;
}

.rp-section-title-spaced[b-875qv57s7w] {
    margin-top: var(--space-6);
}

/* ==========================================================================
   RESPONSIVE — Tablet (1023.98px)
   ========================================================================== */
@media (max-width: 1023.98px) {
    .rp-grid[b-875qv57s7w] {
        grid-template-columns: 1fr;
    }

    .rp-vd-stats[b-875qv57s7w] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   RESPONSIVE — Mobile (767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {
    .rp-card[b-875qv57s7w] {
        border-radius: var(--radius-xl);
    }

    .rp-card-header[b-875qv57s7w] {
        padding: var(--space-5) var(--space-5) 0 var(--space-5);
    }

    .rp-card-body[b-875qv57s7w] {
        padding: var(--space-5);
    }

    .rp-card-icon[b-875qv57s7w] {
        width: 40px;
        height: 40px;
    }

    .rp-card-title[b-875qv57s7w] {
        font-size: 16px;
    }

    .rp-filters[b-875qv57s7w] {
        flex-direction: column;
        align-items: stretch;
    }

    .rp-filter-field[b-875qv57s7w] {
        min-width: 100%;
    }

    [b-875qv57s7w] .rp-refresh-btn {
        width: 100%;
    }

    .rp-export-btn[b-875qv57s7w] {
        width: 100%;
    }

    .rp-stat-grid[b-875qv57s7w] {
        grid-template-columns: repeat(2, 1fr);
    }

    .rp-vd-stats[b-875qv57s7w] {
        grid-template-columns: 1fr 1fr;
    }

    .rp-skeleton-header[b-875qv57s7w] {
        padding: var(--space-5) var(--space-5) 0 var(--space-5);
    }

    .rp-skeleton-body[b-875qv57s7w] {
        padding: var(--space-5);
    }
}

/* ==========================================================================
   RESPONSIVE — Small Mobile (479.98px)
   ========================================================================== */
@media (max-width: 479.98px) {
    .rp-grid[b-875qv57s7w] {
        gap: var(--space-5);
    }

    .rp-column[b-875qv57s7w] {
        gap: var(--space-5);
    }

    .rp-card[b-875qv57s7w] {
        border-radius: var(--radius-lg);
    }

    .rp-card-header[b-875qv57s7w] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-4) 0 var(--space-4);
    }

    .rp-card-body[b-875qv57s7w] {
        padding: var(--space-4);
    }

    .rp-card-icon[b-875qv57s7w] {
        width: 38px;
        height: 38px;
        border-radius: var(--radius-md);
    }

    .rp-card-title[b-875qv57s7w] {
        font-size: 15px;
    }

    .rp-filter-input[b-875qv57s7w] {
        height: 48px;
        font-size: 16px;
    }

    [b-875qv57s7w] .rp-refresh-btn {
        height: 48px;
    }

    .rp-stat-grid[b-875qv57s7w] {
        grid-template-columns: 1fr;
    }

    .rp-vd-stats[b-875qv57s7w] {
        grid-template-columns: 1fr;
    }

    .rp-table thead th[b-875qv57s7w],
    .rp-table tbody td[b-875qv57s7w] {
        padding: 10px var(--space-3);
        font-size: 13px;
    }

    .rp-table thead th[b-875qv57s7w] {
        font-size: 10px;
    }

    .rp-breakdown-grid[b-875qv57s7w] {
        flex-direction: column;
    }
}

/* ==========================================================================
   FOCUS & ACCESSIBILITY
   ========================================================================== */
.rp-filter-input:focus-visible[b-875qv57s7w] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.rp-export-btn:focus-visible[b-875qv57s7w] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .rp-card[b-875qv57s7w],
    .rp-skeleton[b-875qv57s7w] {
        animation: none;
    }

    .rp-card[b-875qv57s7w],
    .rp-filter-input[b-875qv57s7w],
    .rp-table tbody tr[b-875qv57s7w],
    .rp-summary-item[b-875qv57s7w],
    .rp-stat-card[b-875qv57s7w],
    .rp-export-btn[b-875qv57s7w],
    .rp-breakdown-item[b-875qv57s7w] {
        transition: none;
    }

    .rp-card:hover[b-875qv57s7w] {
        transform: none;
    }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .rp-filters[b-875qv57s7w],
    [b-875qv57s7w] .rp-refresh-btn,
    .rp-export-btn[b-875qv57s7w],
    .rp-pagination[b-875qv57s7w] {
        display: none;
    }

    .rp-card[b-875qv57s7w] {
        break-inside: avoid;
        box-shadow: none;
        background: var(--color-bg-primary);
        border: 1px solid #ddd;
    }
}
/* /Components/Pages/Admin/Reports/ReportDisruptions.razor.rz.scp.css */
/* ========================================
   ADMIN REPORTS — 2026 Design System
   Matches AdminTrackingEmulator card style:
   Icon circles, title+subtitle headers, 48px inputs,
   card hover elevation, staggered rise animation.
   rp-* prefix for scoped isolation.
   ======================================== */

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes rise-b-lc2ueiv3nr {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-shimmer-b-lc2ueiv3nr {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   ALERTS
   ========================================================================== */
.admin-container[b-lc2ueiv3nr] >  .app-alert {
    margin-bottom: var(--space-5);
}

/* ==========================================================================
   GRID LAYOUT — Two columns on desktop
   ========================================================================== */
.rp-grid[b-lc2ueiv3nr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: start;
}

.rp-column[b-lc2ueiv3nr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ==========================================================================
   SKELETON LOADING STATE
   ========================================================================== */
.rp-skeleton-card[b-lc2ueiv3nr] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.rp-skeleton-header[b-lc2ueiv3nr] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) 0 var(--space-6);
}

.rp-skeleton-header-text[b-lc2ueiv3nr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rp-skeleton-icon[b-lc2ueiv3nr] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.rp-skeleton-title[b-lc2ueiv3nr] {
    height: 22px;
    width: 55%;
    border-radius: var(--radius-sm);
}

.rp-skeleton-subtitle[b-lc2ueiv3nr] {
    height: 16px;
    width: 75%;
    border-radius: var(--radius-sm);
}

.rp-skeleton-body[b-lc2ueiv3nr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
}

.rp-skeleton-filter[b-lc2ueiv3nr] {
    height: 48px;
    border-radius: var(--radius-md);
}

.rp-skeleton-table[b-lc2ueiv3nr] {
    height: 100px;
    border-radius: var(--radius-md);
}

.rp-skeleton[b-lc2ueiv3nr] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 37%, var(--color-bg-tertiary) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer-b-lc2ueiv3nr 1.8s ease infinite;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   CARD — Solid surface with hover elevation
   ========================================================================== */
.rp-card[b-lc2ueiv3nr] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: visible;
    box-shadow: var(--shadow-sm);
    position: relative;
    animation: rise-b-lc2ueiv3nr .45s cubic-bezier(.4, 0, .2, 1) both;
    transition: box-shadow 200ms cubic-bezier(.4, 0, .2, 1), transform 200ms cubic-bezier(.4, 0, .2, 1);
}

/* Staggered animation delays per column */
.rp-column:first-child .rp-card:nth-child(1)[b-lc2ueiv3nr] { animation-delay: 0s; }
.rp-column:first-child .rp-card:nth-child(2)[b-lc2ueiv3nr] { animation-delay: 0.06s; }
.rp-column:first-child .rp-card:nth-child(3)[b-lc2ueiv3nr] { animation-delay: 0.12s; }
.rp-column:first-child .rp-card:nth-child(4)[b-lc2ueiv3nr] { animation-delay: 0.18s; }
.rp-column:first-child .rp-card:nth-child(5)[b-lc2ueiv3nr] { animation-delay: 0.24s; }
.rp-column:last-child .rp-card:nth-child(1)[b-lc2ueiv3nr] { animation-delay: 0.03s; }
.rp-column:last-child .rp-card:nth-child(2)[b-lc2ueiv3nr] { animation-delay: 0.09s; }
.rp-column:last-child .rp-card:nth-child(3)[b-lc2ueiv3nr] { animation-delay: 0.15s; }
.rp-column:last-child .rp-card:nth-child(4)[b-lc2ueiv3nr] { animation-delay: 0.21s; }
.rp-column:last-child .rp-card:nth-child(5)[b-lc2ueiv3nr] { animation-delay: 0.27s; }
.rp-column:last-child .rp-card:nth-child(6)[b-lc2ueiv3nr] { animation-delay: 0.33s; }

.rp-card:hover[b-lc2ueiv3nr] {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.rp-card-full[b-lc2ueiv3nr] {
    /* For full-width cards if needed in future; currently unused in 2-col layout */
}

/* Detailed validation card — full width below grid */
.rp-card-detailed[b-lc2ueiv3nr] {
    margin-top: var(--space-6);
    animation-delay: 0.36s;
}

/* ==========================================================================
   CARD HEADER — Icon circle + title + subtitle
   ========================================================================== */
.rp-card-header[b-lc2ueiv3nr] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) 0 var(--space-6);
}

.rp-card-icon[b-lc2ueiv3nr] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Icon color variants */
.rp-icon-sales[b-lc2ueiv3nr]       { background: var(--color-primary-light); color: var(--color-primary); }
.rp-icon-validation[b-lc2ueiv3nr]  { background: var(--color-success-light); color: var(--color-success); }
.rp-icon-payments[b-lc2ueiv3nr]    { background: #F0FDF4; color: #16A34A; }
.rp-icon-revenue[b-lc2ueiv3nr]     { background: var(--color-warning-light); color: var(--color-warning); }
.rp-icon-tickets[b-lc2ueiv3nr]     { background: #EEF2FF; color: #4F46E5; }
.rp-icon-wallet[b-lc2ueiv3nr]      { background: #FFF1F2; color: #E11D48; }
.rp-icon-invoices[b-lc2ueiv3nr]    { background: var(--color-error-light); color: var(--color-error); }
.rp-icon-documents[b-lc2ueiv3nr]   { background: #F3E8FF; color: #9333EA; }
.rp-icon-activity[b-lc2ueiv3nr]    { background: #FFF7ED; color: #EA580C; }
.rp-icon-disruptions[b-lc2ueiv3nr] { background: var(--color-error-light); color: var(--color-error); }

.rp-card-header-text[b-lc2ueiv3nr] {
    flex: 1;
    min-width: 0;
}

.rp-card-title[b-lc2ueiv3nr] {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1) 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.rp-card-subtitle[b-lc2ueiv3nr] {
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* ==========================================================================
   CARD BODY
   ========================================================================== */
.rp-card-body[b-lc2ueiv3nr] {
    padding: var(--space-6);
}

/* ==========================================================================
   FILTERS — Date inputs + refresh button row
   ========================================================================== */
.rp-filters[b-lc2ueiv3nr] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border-primary);
}

.rp-filters-wrap[b-lc2ueiv3nr] {
    /* Ensure filter row wraps nicely for the detailed card with many filters */
}

.rp-filter-field[b-lc2ueiv3nr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
    min-width: 140px;
}

.rp-filter-label[b-lc2ueiv3nr] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 16px;
    height: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0;
    display: block;
}

.rp-filter-input[b-lc2ueiv3nr],
.rp-filter-input[type="date"][b-lc2ueiv3nr] {
    height: 48px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    padding: 0 var(--space-4);
    font-size: 15px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    width: 100%;
    box-sizing: border-box;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

select.rp-filter-input[b-lc2ueiv3nr] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.rp-filter-input:hover[b-lc2ueiv3nr] {
    border-color: var(--color-border-secondary);
}

.rp-filter-input:focus[b-lc2ueiv3nr] {
    outline: none;
    border: 1px solid var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.rp-filter-input[type="date"][b-lc2ueiv3nr]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 200ms;
}

.rp-filter-input[type="date"][b-lc2ueiv3nr]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Refresh button */
[b-lc2ueiv3nr] .rp-refresh-btn {
    min-width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ==========================================================================
   EXPORT BUTTONS — Small icon buttons next to refresh
   ========================================================================== */
.rp-export-btn[b-lc2ueiv3nr] {
    width: 40px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    padding: 0;
}

.rp-export-btn:hover[b-lc2ueiv3nr] {
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
}

.rp-export-btn:active[b-lc2ueiv3nr] {
    transform: scale(0.95);
}

.rp-export-xlsx:hover[b-lc2ueiv3nr] {
    border-color: #16A34A;
    color: #16A34A;
    background: #F0FDF4;
}

.rp-export-pdf:hover[b-lc2ueiv3nr] {
    border-color: var(--color-error);
    color: var(--color-error);
    background: var(--color-error-light);
}

/* ==========================================================================
   TABLE
   ========================================================================== */
.rp-table-wrap[b-lc2ueiv3nr] {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
}

.rp-table[b-lc2ueiv3nr] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.rp-table thead th[b-lc2ueiv3nr] {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-primary);
    white-space: nowrap;
}

.rp-table tbody td[b-lc2ueiv3nr] {
    padding: 14px var(--space-4);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-normal);
    border-bottom: 1px solid var(--color-border-primary);
}

.rp-table tbody tr:last-child td[b-lc2ueiv3nr] {
    border-bottom: none;
}

.rp-table tbody tr[b-lc2ueiv3nr] {
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-table tbody tr:hover[b-lc2ueiv3nr] {
    background: var(--color-bg-secondary);
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.rp-empty[b-lc2ueiv3nr] {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    font-size: 14px;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   SUMMARY LIST (ticket summary)
   ========================================================================== */
.rp-summary-list[b-lc2ueiv3nr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.rp-summary-item[b-lc2ueiv3nr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-summary-item:hover[b-lc2ueiv3nr] {
    border-color: var(--color-border-secondary);
}

.rp-summary-label[b-lc2ueiv3nr] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.rp-summary-value[b-lc2ueiv3nr] {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Colored summary values */
.rp-val-success[b-lc2ueiv3nr] { color: var(--color-success); }
.rp-val-warning[b-lc2ueiv3nr] { color: var(--color-warning); }
.rp-val-danger[b-lc2ueiv3nr]  { color: var(--color-error); }

/* ==========================================================================
   STAT CARDS GRID (disruptions, detailed validation summary)
   ========================================================================== */
.rp-stat-grid[b-lc2ueiv3nr] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.rp-vd-stats[b-lc2ueiv3nr] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.rp-stat-card[b-lc2ueiv3nr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-stat-card:hover[b-lc2ueiv3nr] {
    border-color: var(--color-border-secondary);
}

.rp-stat-label[b-lc2ueiv3nr] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.rp-stat-value[b-lc2ueiv3nr] {
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Stat color accents */
.rp-stat-success .rp-stat-value[b-lc2ueiv3nr] { color: var(--color-success); }
.rp-stat-info .rp-stat-value[b-lc2ueiv3nr]    { color: var(--color-primary); }
.rp-stat-muted .rp-stat-value[b-lc2ueiv3nr]   { color: var(--color-text-muted); }

/* ==========================================================================
   BREAKDOWN GRID (by validator, by line, by vehicle)
   ========================================================================== */
.rp-breakdown-grid[b-lc2ueiv3nr] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.rp-breakdown-item[b-lc2ueiv3nr] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 13px;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-breakdown-item:hover[b-lc2ueiv3nr] {
    border-color: var(--color-border-secondary);
}

.rp-breakdown-label[b-lc2ueiv3nr] {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.rp-breakdown-value[b-lc2ueiv3nr] {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   BADGES (success/error status in table)
   ========================================================================== */
.rp-badge[b-lc2ueiv3nr] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.rp-badge-success[b-lc2ueiv3nr] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.rp-badge-error[b-lc2ueiv3nr] {
    background: var(--color-error-light);
    color: var(--color-error);
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.rp-pagination[b-lc2ueiv3nr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-primary);
}

[b-lc2ueiv3nr] .rp-page-btn {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rp-page-info[b-lc2ueiv3nr] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   SECTION TITLE (invoices sub-sections, breakdown headers)
   ========================================================================== */
.rp-section-title[b-lc2ueiv3nr] {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3) 0;
}

.rp-section-title-spaced[b-lc2ueiv3nr] {
    margin-top: var(--space-6);
}

/* ==========================================================================
   RESPONSIVE — Tablet (1023.98px)
   ========================================================================== */
@media (max-width: 1023.98px) {
    .rp-grid[b-lc2ueiv3nr] {
        grid-template-columns: 1fr;
    }

    .rp-vd-stats[b-lc2ueiv3nr] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   RESPONSIVE — Mobile (767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {
    .rp-card[b-lc2ueiv3nr] {
        border-radius: var(--radius-xl);
    }

    .rp-card-header[b-lc2ueiv3nr] {
        padding: var(--space-5) var(--space-5) 0 var(--space-5);
    }

    .rp-card-body[b-lc2ueiv3nr] {
        padding: var(--space-5);
    }

    .rp-card-icon[b-lc2ueiv3nr] {
        width: 40px;
        height: 40px;
    }

    .rp-card-title[b-lc2ueiv3nr] {
        font-size: 16px;
    }

    .rp-filters[b-lc2ueiv3nr] {
        flex-direction: column;
        align-items: stretch;
    }

    .rp-filter-field[b-lc2ueiv3nr] {
        min-width: 100%;
    }

    [b-lc2ueiv3nr] .rp-refresh-btn {
        width: 100%;
    }

    .rp-export-btn[b-lc2ueiv3nr] {
        width: 100%;
    }

    .rp-stat-grid[b-lc2ueiv3nr] {
        grid-template-columns: repeat(2, 1fr);
    }

    .rp-vd-stats[b-lc2ueiv3nr] {
        grid-template-columns: 1fr 1fr;
    }

    .rp-skeleton-header[b-lc2ueiv3nr] {
        padding: var(--space-5) var(--space-5) 0 var(--space-5);
    }

    .rp-skeleton-body[b-lc2ueiv3nr] {
        padding: var(--space-5);
    }
}

/* ==========================================================================
   RESPONSIVE — Small Mobile (479.98px)
   ========================================================================== */
@media (max-width: 479.98px) {
    .rp-grid[b-lc2ueiv3nr] {
        gap: var(--space-5);
    }

    .rp-column[b-lc2ueiv3nr] {
        gap: var(--space-5);
    }

    .rp-card[b-lc2ueiv3nr] {
        border-radius: var(--radius-lg);
    }

    .rp-card-header[b-lc2ueiv3nr] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-4) 0 var(--space-4);
    }

    .rp-card-body[b-lc2ueiv3nr] {
        padding: var(--space-4);
    }

    .rp-card-icon[b-lc2ueiv3nr] {
        width: 38px;
        height: 38px;
        border-radius: var(--radius-md);
    }

    .rp-card-title[b-lc2ueiv3nr] {
        font-size: 15px;
    }

    .rp-filter-input[b-lc2ueiv3nr] {
        height: 48px;
        font-size: 16px;
    }

    [b-lc2ueiv3nr] .rp-refresh-btn {
        height: 48px;
    }

    .rp-stat-grid[b-lc2ueiv3nr] {
        grid-template-columns: 1fr;
    }

    .rp-vd-stats[b-lc2ueiv3nr] {
        grid-template-columns: 1fr;
    }

    .rp-table thead th[b-lc2ueiv3nr],
    .rp-table tbody td[b-lc2ueiv3nr] {
        padding: 10px var(--space-3);
        font-size: 13px;
    }

    .rp-table thead th[b-lc2ueiv3nr] {
        font-size: 10px;
    }

    .rp-breakdown-grid[b-lc2ueiv3nr] {
        flex-direction: column;
    }
}

/* ==========================================================================
   FOCUS & ACCESSIBILITY
   ========================================================================== */
.rp-filter-input:focus-visible[b-lc2ueiv3nr] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.rp-export-btn:focus-visible[b-lc2ueiv3nr] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .rp-card[b-lc2ueiv3nr],
    .rp-skeleton[b-lc2ueiv3nr] {
        animation: none;
    }

    .rp-card[b-lc2ueiv3nr],
    .rp-filter-input[b-lc2ueiv3nr],
    .rp-table tbody tr[b-lc2ueiv3nr],
    .rp-summary-item[b-lc2ueiv3nr],
    .rp-stat-card[b-lc2ueiv3nr],
    .rp-export-btn[b-lc2ueiv3nr],
    .rp-breakdown-item[b-lc2ueiv3nr] {
        transition: none;
    }

    .rp-card:hover[b-lc2ueiv3nr] {
        transform: none;
    }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .rp-filters[b-lc2ueiv3nr],
    [b-lc2ueiv3nr] .rp-refresh-btn,
    .rp-export-btn[b-lc2ueiv3nr],
    .rp-pagination[b-lc2ueiv3nr] {
        display: none;
    }

    .rp-card[b-lc2ueiv3nr] {
        break-inside: avoid;
        box-shadow: none;
        background: var(--color-bg-primary);
        border: 1px solid #ddd;
    }
}
/* /Components/Pages/Admin/Reports/ReportDocuments.razor.rz.scp.css */
/* ========================================
   ADMIN REPORTS — 2026 Design System
   Matches AdminTrackingEmulator card style:
   Icon circles, title+subtitle headers, 48px inputs,
   card hover elevation, staggered rise animation.
   rp-* prefix for scoped isolation.
   ======================================== */

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes rise-b-hdtwms9dmm {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-shimmer-b-hdtwms9dmm {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   ALERTS
   ========================================================================== */
.admin-container[b-hdtwms9dmm] >  .app-alert {
    margin-bottom: var(--space-5);
}

/* ==========================================================================
   GRID LAYOUT — Two columns on desktop
   ========================================================================== */
.rp-grid[b-hdtwms9dmm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: start;
}

.rp-column[b-hdtwms9dmm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ==========================================================================
   SKELETON LOADING STATE
   ========================================================================== */
.rp-skeleton-card[b-hdtwms9dmm] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.rp-skeleton-header[b-hdtwms9dmm] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) 0 var(--space-6);
}

.rp-skeleton-header-text[b-hdtwms9dmm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rp-skeleton-icon[b-hdtwms9dmm] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.rp-skeleton-title[b-hdtwms9dmm] {
    height: 22px;
    width: 55%;
    border-radius: var(--radius-sm);
}

.rp-skeleton-subtitle[b-hdtwms9dmm] {
    height: 16px;
    width: 75%;
    border-radius: var(--radius-sm);
}

.rp-skeleton-body[b-hdtwms9dmm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
}

.rp-skeleton-filter[b-hdtwms9dmm] {
    height: 48px;
    border-radius: var(--radius-md);
}

.rp-skeleton-table[b-hdtwms9dmm] {
    height: 100px;
    border-radius: var(--radius-md);
}

.rp-skeleton[b-hdtwms9dmm] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 37%, var(--color-bg-tertiary) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer-b-hdtwms9dmm 1.8s ease infinite;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   CARD — Solid surface with hover elevation
   ========================================================================== */
.rp-card[b-hdtwms9dmm] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: visible;
    box-shadow: var(--shadow-sm);
    position: relative;
    animation: rise-b-hdtwms9dmm .45s cubic-bezier(.4, 0, .2, 1) both;
    transition: box-shadow 200ms cubic-bezier(.4, 0, .2, 1), transform 200ms cubic-bezier(.4, 0, .2, 1);
}

/* Staggered animation delays per column */
.rp-column:first-child .rp-card:nth-child(1)[b-hdtwms9dmm] { animation-delay: 0s; }
.rp-column:first-child .rp-card:nth-child(2)[b-hdtwms9dmm] { animation-delay: 0.06s; }
.rp-column:first-child .rp-card:nth-child(3)[b-hdtwms9dmm] { animation-delay: 0.12s; }
.rp-column:first-child .rp-card:nth-child(4)[b-hdtwms9dmm] { animation-delay: 0.18s; }
.rp-column:first-child .rp-card:nth-child(5)[b-hdtwms9dmm] { animation-delay: 0.24s; }
.rp-column:last-child .rp-card:nth-child(1)[b-hdtwms9dmm] { animation-delay: 0.03s; }
.rp-column:last-child .rp-card:nth-child(2)[b-hdtwms9dmm] { animation-delay: 0.09s; }
.rp-column:last-child .rp-card:nth-child(3)[b-hdtwms9dmm] { animation-delay: 0.15s; }
.rp-column:last-child .rp-card:nth-child(4)[b-hdtwms9dmm] { animation-delay: 0.21s; }
.rp-column:last-child .rp-card:nth-child(5)[b-hdtwms9dmm] { animation-delay: 0.27s; }
.rp-column:last-child .rp-card:nth-child(6)[b-hdtwms9dmm] { animation-delay: 0.33s; }

.rp-card:hover[b-hdtwms9dmm] {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.rp-card-full[b-hdtwms9dmm] {
    /* For full-width cards if needed in future; currently unused in 2-col layout */
}

/* Detailed validation card — full width below grid */
.rp-card-detailed[b-hdtwms9dmm] {
    margin-top: var(--space-6);
    animation-delay: 0.36s;
}

/* ==========================================================================
   CARD HEADER — Icon circle + title + subtitle
   ========================================================================== */
.rp-card-header[b-hdtwms9dmm] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) 0 var(--space-6);
}

.rp-card-icon[b-hdtwms9dmm] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Icon color variants */
.rp-icon-sales[b-hdtwms9dmm]       { background: var(--color-primary-light); color: var(--color-primary); }
.rp-icon-validation[b-hdtwms9dmm]  { background: var(--color-success-light); color: var(--color-success); }
.rp-icon-payments[b-hdtwms9dmm]    { background: #F0FDF4; color: #16A34A; }
.rp-icon-revenue[b-hdtwms9dmm]     { background: var(--color-warning-light); color: var(--color-warning); }
.rp-icon-tickets[b-hdtwms9dmm]     { background: #EEF2FF; color: #4F46E5; }
.rp-icon-wallet[b-hdtwms9dmm]      { background: #FFF1F2; color: #E11D48; }
.rp-icon-invoices[b-hdtwms9dmm]    { background: var(--color-error-light); color: var(--color-error); }
.rp-icon-documents[b-hdtwms9dmm]   { background: #F3E8FF; color: #9333EA; }
.rp-icon-activity[b-hdtwms9dmm]    { background: #FFF7ED; color: #EA580C; }
.rp-icon-disruptions[b-hdtwms9dmm] { background: var(--color-error-light); color: var(--color-error); }

.rp-card-header-text[b-hdtwms9dmm] {
    flex: 1;
    min-width: 0;
}

.rp-card-title[b-hdtwms9dmm] {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1) 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.rp-card-subtitle[b-hdtwms9dmm] {
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* ==========================================================================
   CARD BODY
   ========================================================================== */
.rp-card-body[b-hdtwms9dmm] {
    padding: var(--space-6);
}

/* ==========================================================================
   FILTERS — Date inputs + refresh button row
   ========================================================================== */
.rp-filters[b-hdtwms9dmm] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border-primary);
}

.rp-filters-wrap[b-hdtwms9dmm] {
    /* Ensure filter row wraps nicely for the detailed card with many filters */
}

.rp-filter-field[b-hdtwms9dmm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
    min-width: 140px;
}

.rp-filter-label[b-hdtwms9dmm] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 16px;
    height: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0;
    display: block;
}

.rp-filter-input[b-hdtwms9dmm],
.rp-filter-input[type="date"][b-hdtwms9dmm] {
    height: 48px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    padding: 0 var(--space-4);
    font-size: 15px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    width: 100%;
    box-sizing: border-box;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

select.rp-filter-input[b-hdtwms9dmm] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.rp-filter-input:hover[b-hdtwms9dmm] {
    border-color: var(--color-border-secondary);
}

.rp-filter-input:focus[b-hdtwms9dmm] {
    outline: none;
    border: 1px solid var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.rp-filter-input[type="date"][b-hdtwms9dmm]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 200ms;
}

.rp-filter-input[type="date"][b-hdtwms9dmm]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Refresh button */
[b-hdtwms9dmm] .rp-refresh-btn {
    min-width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ==========================================================================
   EXPORT BUTTONS — Small icon buttons next to refresh
   ========================================================================== */
.rp-export-btn[b-hdtwms9dmm] {
    width: 40px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    padding: 0;
}

.rp-export-btn:hover[b-hdtwms9dmm] {
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
}

.rp-export-btn:active[b-hdtwms9dmm] {
    transform: scale(0.95);
}

.rp-export-xlsx:hover[b-hdtwms9dmm] {
    border-color: #16A34A;
    color: #16A34A;
    background: #F0FDF4;
}

.rp-export-pdf:hover[b-hdtwms9dmm] {
    border-color: var(--color-error);
    color: var(--color-error);
    background: var(--color-error-light);
}

/* ==========================================================================
   TABLE
   ========================================================================== */
.rp-table-wrap[b-hdtwms9dmm] {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
}

.rp-table[b-hdtwms9dmm] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.rp-table thead th[b-hdtwms9dmm] {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-primary);
    white-space: nowrap;
}

.rp-table tbody td[b-hdtwms9dmm] {
    padding: 14px var(--space-4);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-normal);
    border-bottom: 1px solid var(--color-border-primary);
}

.rp-table tbody tr:last-child td[b-hdtwms9dmm] {
    border-bottom: none;
}

.rp-table tbody tr[b-hdtwms9dmm] {
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-table tbody tr:hover[b-hdtwms9dmm] {
    background: var(--color-bg-secondary);
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.rp-empty[b-hdtwms9dmm] {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    font-size: 14px;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   SUMMARY LIST (ticket summary)
   ========================================================================== */
.rp-summary-list[b-hdtwms9dmm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.rp-summary-item[b-hdtwms9dmm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-summary-item:hover[b-hdtwms9dmm] {
    border-color: var(--color-border-secondary);
}

.rp-summary-label[b-hdtwms9dmm] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.rp-summary-value[b-hdtwms9dmm] {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Colored summary values */
.rp-val-success[b-hdtwms9dmm] { color: var(--color-success); }
.rp-val-warning[b-hdtwms9dmm] { color: var(--color-warning); }
.rp-val-danger[b-hdtwms9dmm]  { color: var(--color-error); }

/* ==========================================================================
   STAT CARDS GRID (disruptions, detailed validation summary)
   ========================================================================== */
.rp-stat-grid[b-hdtwms9dmm] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.rp-vd-stats[b-hdtwms9dmm] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.rp-stat-card[b-hdtwms9dmm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-stat-card:hover[b-hdtwms9dmm] {
    border-color: var(--color-border-secondary);
}

.rp-stat-label[b-hdtwms9dmm] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.rp-stat-value[b-hdtwms9dmm] {
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Stat color accents */
.rp-stat-success .rp-stat-value[b-hdtwms9dmm] { color: var(--color-success); }
.rp-stat-info .rp-stat-value[b-hdtwms9dmm]    { color: var(--color-primary); }
.rp-stat-muted .rp-stat-value[b-hdtwms9dmm]   { color: var(--color-text-muted); }

/* ==========================================================================
   BREAKDOWN GRID (by validator, by line, by vehicle)
   ========================================================================== */
.rp-breakdown-grid[b-hdtwms9dmm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.rp-breakdown-item[b-hdtwms9dmm] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 13px;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-breakdown-item:hover[b-hdtwms9dmm] {
    border-color: var(--color-border-secondary);
}

.rp-breakdown-label[b-hdtwms9dmm] {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.rp-breakdown-value[b-hdtwms9dmm] {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   BADGES (success/error status in table)
   ========================================================================== */
.rp-badge[b-hdtwms9dmm] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.rp-badge-success[b-hdtwms9dmm] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.rp-badge-error[b-hdtwms9dmm] {
    background: var(--color-error-light);
    color: var(--color-error);
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.rp-pagination[b-hdtwms9dmm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-primary);
}

[b-hdtwms9dmm] .rp-page-btn {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rp-page-info[b-hdtwms9dmm] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   SECTION TITLE (invoices sub-sections, breakdown headers)
   ========================================================================== */
.rp-section-title[b-hdtwms9dmm] {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3) 0;
}

.rp-section-title-spaced[b-hdtwms9dmm] {
    margin-top: var(--space-6);
}

/* ==========================================================================
   RESPONSIVE — Tablet (1023.98px)
   ========================================================================== */
@media (max-width: 1023.98px) {
    .rp-grid[b-hdtwms9dmm] {
        grid-template-columns: 1fr;
    }

    .rp-vd-stats[b-hdtwms9dmm] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   RESPONSIVE — Mobile (767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {
    .rp-card[b-hdtwms9dmm] {
        border-radius: var(--radius-xl);
    }

    .rp-card-header[b-hdtwms9dmm] {
        padding: var(--space-5) var(--space-5) 0 var(--space-5);
    }

    .rp-card-body[b-hdtwms9dmm] {
        padding: var(--space-5);
    }

    .rp-card-icon[b-hdtwms9dmm] {
        width: 40px;
        height: 40px;
    }

    .rp-card-title[b-hdtwms9dmm] {
        font-size: 16px;
    }

    .rp-filters[b-hdtwms9dmm] {
        flex-direction: column;
        align-items: stretch;
    }

    .rp-filter-field[b-hdtwms9dmm] {
        min-width: 100%;
    }

    [b-hdtwms9dmm] .rp-refresh-btn {
        width: 100%;
    }

    .rp-export-btn[b-hdtwms9dmm] {
        width: 100%;
    }

    .rp-stat-grid[b-hdtwms9dmm] {
        grid-template-columns: repeat(2, 1fr);
    }

    .rp-vd-stats[b-hdtwms9dmm] {
        grid-template-columns: 1fr 1fr;
    }

    .rp-skeleton-header[b-hdtwms9dmm] {
        padding: var(--space-5) var(--space-5) 0 var(--space-5);
    }

    .rp-skeleton-body[b-hdtwms9dmm] {
        padding: var(--space-5);
    }
}

/* ==========================================================================
   RESPONSIVE — Small Mobile (479.98px)
   ========================================================================== */
@media (max-width: 479.98px) {
    .rp-grid[b-hdtwms9dmm] {
        gap: var(--space-5);
    }

    .rp-column[b-hdtwms9dmm] {
        gap: var(--space-5);
    }

    .rp-card[b-hdtwms9dmm] {
        border-radius: var(--radius-lg);
    }

    .rp-card-header[b-hdtwms9dmm] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-4) 0 var(--space-4);
    }

    .rp-card-body[b-hdtwms9dmm] {
        padding: var(--space-4);
    }

    .rp-card-icon[b-hdtwms9dmm] {
        width: 38px;
        height: 38px;
        border-radius: var(--radius-md);
    }

    .rp-card-title[b-hdtwms9dmm] {
        font-size: 15px;
    }

    .rp-filter-input[b-hdtwms9dmm] {
        height: 48px;
        font-size: 16px;
    }

    [b-hdtwms9dmm] .rp-refresh-btn {
        height: 48px;
    }

    .rp-stat-grid[b-hdtwms9dmm] {
        grid-template-columns: 1fr;
    }

    .rp-vd-stats[b-hdtwms9dmm] {
        grid-template-columns: 1fr;
    }

    .rp-table thead th[b-hdtwms9dmm],
    .rp-table tbody td[b-hdtwms9dmm] {
        padding: 10px var(--space-3);
        font-size: 13px;
    }

    .rp-table thead th[b-hdtwms9dmm] {
        font-size: 10px;
    }

    .rp-breakdown-grid[b-hdtwms9dmm] {
        flex-direction: column;
    }
}

/* ==========================================================================
   FOCUS & ACCESSIBILITY
   ========================================================================== */
.rp-filter-input:focus-visible[b-hdtwms9dmm] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.rp-export-btn:focus-visible[b-hdtwms9dmm] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .rp-card[b-hdtwms9dmm],
    .rp-skeleton[b-hdtwms9dmm] {
        animation: none;
    }

    .rp-card[b-hdtwms9dmm],
    .rp-filter-input[b-hdtwms9dmm],
    .rp-table tbody tr[b-hdtwms9dmm],
    .rp-summary-item[b-hdtwms9dmm],
    .rp-stat-card[b-hdtwms9dmm],
    .rp-export-btn[b-hdtwms9dmm],
    .rp-breakdown-item[b-hdtwms9dmm] {
        transition: none;
    }

    .rp-card:hover[b-hdtwms9dmm] {
        transform: none;
    }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .rp-filters[b-hdtwms9dmm],
    [b-hdtwms9dmm] .rp-refresh-btn,
    .rp-export-btn[b-hdtwms9dmm],
    .rp-pagination[b-hdtwms9dmm] {
        display: none;
    }

    .rp-card[b-hdtwms9dmm] {
        break-inside: avoid;
        box-shadow: none;
        background: var(--color-bg-primary);
        border: 1px solid #ddd;
    }
}
/* /Components/Pages/Admin/Reports/ReportInvoices.razor.rz.scp.css */
/* ========================================
   ADMIN REPORTS — 2026 Design System
   Matches AdminTrackingEmulator card style:
   Icon circles, title+subtitle headers, 48px inputs,
   card hover elevation, staggered rise animation.
   rp-* prefix for scoped isolation.
   ======================================== */

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes rise-b-wqodef5w5p {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-shimmer-b-wqodef5w5p {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   ALERTS
   ========================================================================== */
.admin-container[b-wqodef5w5p] >  .app-alert {
    margin-bottom: var(--space-5);
}

/* ==========================================================================
   GRID LAYOUT — Two columns on desktop
   ========================================================================== */
.rp-grid[b-wqodef5w5p] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: start;
}

.rp-column[b-wqodef5w5p] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ==========================================================================
   SKELETON LOADING STATE
   ========================================================================== */
.rp-skeleton-card[b-wqodef5w5p] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.rp-skeleton-header[b-wqodef5w5p] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) 0 var(--space-6);
}

.rp-skeleton-header-text[b-wqodef5w5p] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rp-skeleton-icon[b-wqodef5w5p] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.rp-skeleton-title[b-wqodef5w5p] {
    height: 22px;
    width: 55%;
    border-radius: var(--radius-sm);
}

.rp-skeleton-subtitle[b-wqodef5w5p] {
    height: 16px;
    width: 75%;
    border-radius: var(--radius-sm);
}

.rp-skeleton-body[b-wqodef5w5p] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
}

.rp-skeleton-filter[b-wqodef5w5p] {
    height: 48px;
    border-radius: var(--radius-md);
}

.rp-skeleton-table[b-wqodef5w5p] {
    height: 100px;
    border-radius: var(--radius-md);
}

.rp-skeleton[b-wqodef5w5p] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 37%, var(--color-bg-tertiary) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer-b-wqodef5w5p 1.8s ease infinite;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   CARD — Solid surface with hover elevation
   ========================================================================== */
.rp-card[b-wqodef5w5p] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: visible;
    box-shadow: var(--shadow-sm);
    position: relative;
    animation: rise-b-wqodef5w5p .45s cubic-bezier(.4, 0, .2, 1) both;
    transition: box-shadow 200ms cubic-bezier(.4, 0, .2, 1), transform 200ms cubic-bezier(.4, 0, .2, 1);
}

/* Staggered animation delays per column */
.rp-column:first-child .rp-card:nth-child(1)[b-wqodef5w5p] { animation-delay: 0s; }
.rp-column:first-child .rp-card:nth-child(2)[b-wqodef5w5p] { animation-delay: 0.06s; }
.rp-column:first-child .rp-card:nth-child(3)[b-wqodef5w5p] { animation-delay: 0.12s; }
.rp-column:first-child .rp-card:nth-child(4)[b-wqodef5w5p] { animation-delay: 0.18s; }
.rp-column:first-child .rp-card:nth-child(5)[b-wqodef5w5p] { animation-delay: 0.24s; }
.rp-column:last-child .rp-card:nth-child(1)[b-wqodef5w5p] { animation-delay: 0.03s; }
.rp-column:last-child .rp-card:nth-child(2)[b-wqodef5w5p] { animation-delay: 0.09s; }
.rp-column:last-child .rp-card:nth-child(3)[b-wqodef5w5p] { animation-delay: 0.15s; }
.rp-column:last-child .rp-card:nth-child(4)[b-wqodef5w5p] { animation-delay: 0.21s; }
.rp-column:last-child .rp-card:nth-child(5)[b-wqodef5w5p] { animation-delay: 0.27s; }
.rp-column:last-child .rp-card:nth-child(6)[b-wqodef5w5p] { animation-delay: 0.33s; }

.rp-card:hover[b-wqodef5w5p] {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.rp-card-full[b-wqodef5w5p] {
    /* For full-width cards if needed in future; currently unused in 2-col layout */
}

/* Detailed validation card — full width below grid */
.rp-card-detailed[b-wqodef5w5p] {
    margin-top: var(--space-6);
    animation-delay: 0.36s;
}

/* ==========================================================================
   CARD HEADER — Icon circle + title + subtitle
   ========================================================================== */
.rp-card-header[b-wqodef5w5p] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) 0 var(--space-6);
}

.rp-card-icon[b-wqodef5w5p] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Icon color variants */
.rp-icon-sales[b-wqodef5w5p]       { background: var(--color-primary-light); color: var(--color-primary); }
.rp-icon-validation[b-wqodef5w5p]  { background: var(--color-success-light); color: var(--color-success); }
.rp-icon-payments[b-wqodef5w5p]    { background: #F0FDF4; color: #16A34A; }
.rp-icon-revenue[b-wqodef5w5p]     { background: var(--color-warning-light); color: var(--color-warning); }
.rp-icon-tickets[b-wqodef5w5p]     { background: #EEF2FF; color: #4F46E5; }
.rp-icon-wallet[b-wqodef5w5p]      { background: #FFF1F2; color: #E11D48; }
.rp-icon-invoices[b-wqodef5w5p]    { background: var(--color-error-light); color: var(--color-error); }
.rp-icon-documents[b-wqodef5w5p]   { background: #F3E8FF; color: #9333EA; }
.rp-icon-activity[b-wqodef5w5p]    { background: #FFF7ED; color: #EA580C; }
.rp-icon-disruptions[b-wqodef5w5p] { background: var(--color-error-light); color: var(--color-error); }

.rp-card-header-text[b-wqodef5w5p] {
    flex: 1;
    min-width: 0;
}

.rp-card-title[b-wqodef5w5p] {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1) 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.rp-card-subtitle[b-wqodef5w5p] {
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* ==========================================================================
   CARD BODY
   ========================================================================== */
.rp-card-body[b-wqodef5w5p] {
    padding: var(--space-6);
}

/* ==========================================================================
   FILTERS — Date inputs + refresh button row
   ========================================================================== */
.rp-filters[b-wqodef5w5p] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border-primary);
}

.rp-filters-wrap[b-wqodef5w5p] {
    /* Ensure filter row wraps nicely for the detailed card with many filters */
}

.rp-filter-field[b-wqodef5w5p] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
    min-width: 140px;
}

.rp-filter-label[b-wqodef5w5p] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 16px;
    height: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0;
    display: block;
}

.rp-filter-input[b-wqodef5w5p],
.rp-filter-input[type="date"][b-wqodef5w5p] {
    height: 48px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    padding: 0 var(--space-4);
    font-size: 15px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    width: 100%;
    box-sizing: border-box;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

select.rp-filter-input[b-wqodef5w5p] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.rp-filter-input:hover[b-wqodef5w5p] {
    border-color: var(--color-border-secondary);
}

.rp-filter-input:focus[b-wqodef5w5p] {
    outline: none;
    border: 1px solid var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.rp-filter-input[type="date"][b-wqodef5w5p]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 200ms;
}

.rp-filter-input[type="date"][b-wqodef5w5p]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Refresh button */
[b-wqodef5w5p] .rp-refresh-btn {
    min-width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ==========================================================================
   EXPORT BUTTONS — Small icon buttons next to refresh
   ========================================================================== */
.rp-export-btn[b-wqodef5w5p] {
    width: 40px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    padding: 0;
}

.rp-export-btn:hover[b-wqodef5w5p] {
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
}

.rp-export-btn:active[b-wqodef5w5p] {
    transform: scale(0.95);
}

.rp-export-xlsx:hover[b-wqodef5w5p] {
    border-color: #16A34A;
    color: #16A34A;
    background: #F0FDF4;
}

.rp-export-pdf:hover[b-wqodef5w5p] {
    border-color: var(--color-error);
    color: var(--color-error);
    background: var(--color-error-light);
}

/* ==========================================================================
   TABLE
   ========================================================================== */
.rp-table-wrap[b-wqodef5w5p] {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
}

.rp-table[b-wqodef5w5p] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.rp-table thead th[b-wqodef5w5p] {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-primary);
    white-space: nowrap;
}

.rp-table tbody td[b-wqodef5w5p] {
    padding: 14px var(--space-4);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-normal);
    border-bottom: 1px solid var(--color-border-primary);
}

.rp-table tbody tr:last-child td[b-wqodef5w5p] {
    border-bottom: none;
}

.rp-table tbody tr[b-wqodef5w5p] {
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-table tbody tr:hover[b-wqodef5w5p] {
    background: var(--color-bg-secondary);
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.rp-empty[b-wqodef5w5p] {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    font-size: 14px;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   SUMMARY LIST (ticket summary)
   ========================================================================== */
.rp-summary-list[b-wqodef5w5p] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.rp-summary-item[b-wqodef5w5p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-summary-item:hover[b-wqodef5w5p] {
    border-color: var(--color-border-secondary);
}

.rp-summary-label[b-wqodef5w5p] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.rp-summary-value[b-wqodef5w5p] {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Colored summary values */
.rp-val-success[b-wqodef5w5p] { color: var(--color-success); }
.rp-val-warning[b-wqodef5w5p] { color: var(--color-warning); }
.rp-val-danger[b-wqodef5w5p]  { color: var(--color-error); }

/* ==========================================================================
   STAT CARDS GRID (disruptions, detailed validation summary)
   ========================================================================== */
.rp-stat-grid[b-wqodef5w5p] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.rp-vd-stats[b-wqodef5w5p] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.rp-stat-card[b-wqodef5w5p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-stat-card:hover[b-wqodef5w5p] {
    border-color: var(--color-border-secondary);
}

.rp-stat-label[b-wqodef5w5p] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.rp-stat-value[b-wqodef5w5p] {
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Stat color accents */
.rp-stat-success .rp-stat-value[b-wqodef5w5p] { color: var(--color-success); }
.rp-stat-info .rp-stat-value[b-wqodef5w5p]    { color: var(--color-primary); }
.rp-stat-muted .rp-stat-value[b-wqodef5w5p]   { color: var(--color-text-muted); }

/* ==========================================================================
   BREAKDOWN GRID (by validator, by line, by vehicle)
   ========================================================================== */
.rp-breakdown-grid[b-wqodef5w5p] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.rp-breakdown-item[b-wqodef5w5p] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 13px;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-breakdown-item:hover[b-wqodef5w5p] {
    border-color: var(--color-border-secondary);
}

.rp-breakdown-label[b-wqodef5w5p] {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.rp-breakdown-value[b-wqodef5w5p] {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   BADGES (success/error status in table)
   ========================================================================== */
.rp-badge[b-wqodef5w5p] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.rp-badge-success[b-wqodef5w5p] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.rp-badge-error[b-wqodef5w5p] {
    background: var(--color-error-light);
    color: var(--color-error);
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.rp-pagination[b-wqodef5w5p] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-primary);
}

[b-wqodef5w5p] .rp-page-btn {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rp-page-info[b-wqodef5w5p] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   SECTION TITLE (invoices sub-sections, breakdown headers)
   ========================================================================== */
.rp-section-title[b-wqodef5w5p] {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3) 0;
}

.rp-section-title-spaced[b-wqodef5w5p] {
    margin-top: var(--space-6);
}

/* ==========================================================================
   RESPONSIVE — Tablet (1023.98px)
   ========================================================================== */
@media (max-width: 1023.98px) {
    .rp-grid[b-wqodef5w5p] {
        grid-template-columns: 1fr;
    }

    .rp-vd-stats[b-wqodef5w5p] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   RESPONSIVE — Mobile (767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {
    .rp-card[b-wqodef5w5p] {
        border-radius: var(--radius-xl);
    }

    .rp-card-header[b-wqodef5w5p] {
        padding: var(--space-5) var(--space-5) 0 var(--space-5);
    }

    .rp-card-body[b-wqodef5w5p] {
        padding: var(--space-5);
    }

    .rp-card-icon[b-wqodef5w5p] {
        width: 40px;
        height: 40px;
    }

    .rp-card-title[b-wqodef5w5p] {
        font-size: 16px;
    }

    .rp-filters[b-wqodef5w5p] {
        flex-direction: column;
        align-items: stretch;
    }

    .rp-filter-field[b-wqodef5w5p] {
        min-width: 100%;
    }

    [b-wqodef5w5p] .rp-refresh-btn {
        width: 100%;
    }

    .rp-export-btn[b-wqodef5w5p] {
        width: 100%;
    }

    .rp-stat-grid[b-wqodef5w5p] {
        grid-template-columns: repeat(2, 1fr);
    }

    .rp-vd-stats[b-wqodef5w5p] {
        grid-template-columns: 1fr 1fr;
    }

    .rp-skeleton-header[b-wqodef5w5p] {
        padding: var(--space-5) var(--space-5) 0 var(--space-5);
    }

    .rp-skeleton-body[b-wqodef5w5p] {
        padding: var(--space-5);
    }
}

/* ==========================================================================
   RESPONSIVE — Small Mobile (479.98px)
   ========================================================================== */
@media (max-width: 479.98px) {
    .rp-grid[b-wqodef5w5p] {
        gap: var(--space-5);
    }

    .rp-column[b-wqodef5w5p] {
        gap: var(--space-5);
    }

    .rp-card[b-wqodef5w5p] {
        border-radius: var(--radius-lg);
    }

    .rp-card-header[b-wqodef5w5p] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-4) 0 var(--space-4);
    }

    .rp-card-body[b-wqodef5w5p] {
        padding: var(--space-4);
    }

    .rp-card-icon[b-wqodef5w5p] {
        width: 38px;
        height: 38px;
        border-radius: var(--radius-md);
    }

    .rp-card-title[b-wqodef5w5p] {
        font-size: 15px;
    }

    .rp-filter-input[b-wqodef5w5p] {
        height: 48px;
        font-size: 16px;
    }

    [b-wqodef5w5p] .rp-refresh-btn {
        height: 48px;
    }

    .rp-stat-grid[b-wqodef5w5p] {
        grid-template-columns: 1fr;
    }

    .rp-vd-stats[b-wqodef5w5p] {
        grid-template-columns: 1fr;
    }

    .rp-table thead th[b-wqodef5w5p],
    .rp-table tbody td[b-wqodef5w5p] {
        padding: 10px var(--space-3);
        font-size: 13px;
    }

    .rp-table thead th[b-wqodef5w5p] {
        font-size: 10px;
    }

    .rp-breakdown-grid[b-wqodef5w5p] {
        flex-direction: column;
    }
}

/* ==========================================================================
   FOCUS & ACCESSIBILITY
   ========================================================================== */
.rp-filter-input:focus-visible[b-wqodef5w5p] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.rp-export-btn:focus-visible[b-wqodef5w5p] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .rp-card[b-wqodef5w5p],
    .rp-skeleton[b-wqodef5w5p] {
        animation: none;
    }

    .rp-card[b-wqodef5w5p],
    .rp-filter-input[b-wqodef5w5p],
    .rp-table tbody tr[b-wqodef5w5p],
    .rp-summary-item[b-wqodef5w5p],
    .rp-stat-card[b-wqodef5w5p],
    .rp-export-btn[b-wqodef5w5p],
    .rp-breakdown-item[b-wqodef5w5p] {
        transition: none;
    }

    .rp-card:hover[b-wqodef5w5p] {
        transform: none;
    }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .rp-filters[b-wqodef5w5p],
    [b-wqodef5w5p] .rp-refresh-btn,
    .rp-export-btn[b-wqodef5w5p],
    .rp-pagination[b-wqodef5w5p] {
        display: none;
    }

    .rp-card[b-wqodef5w5p] {
        break-inside: avoid;
        box-shadow: none;
        background: var(--color-bg-primary);
        border: 1px solid #ddd;
    }
}
/* /Components/Pages/Admin/Reports/ReportPayments.razor.rz.scp.css */
/* ========================================
   ADMIN REPORTS — 2026 Design System
   Matches AdminTrackingEmulator card style:
   Icon circles, title+subtitle headers, 48px inputs,
   card hover elevation, staggered rise animation.
   rp-* prefix for scoped isolation.
   ======================================== */

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes rise-b-hla4kjfaql {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-shimmer-b-hla4kjfaql {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   ALERTS
   ========================================================================== */
.admin-container[b-hla4kjfaql] >  .app-alert {
    margin-bottom: var(--space-5);
}

/* ==========================================================================
   GRID LAYOUT — Two columns on desktop
   ========================================================================== */
.rp-grid[b-hla4kjfaql] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: start;
}

.rp-column[b-hla4kjfaql] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ==========================================================================
   SKELETON LOADING STATE
   ========================================================================== */
.rp-skeleton-card[b-hla4kjfaql] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.rp-skeleton-header[b-hla4kjfaql] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) 0 var(--space-6);
}

.rp-skeleton-header-text[b-hla4kjfaql] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rp-skeleton-icon[b-hla4kjfaql] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.rp-skeleton-title[b-hla4kjfaql] {
    height: 22px;
    width: 55%;
    border-radius: var(--radius-sm);
}

.rp-skeleton-subtitle[b-hla4kjfaql] {
    height: 16px;
    width: 75%;
    border-radius: var(--radius-sm);
}

.rp-skeleton-body[b-hla4kjfaql] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
}

.rp-skeleton-filter[b-hla4kjfaql] {
    height: 48px;
    border-radius: var(--radius-md);
}

.rp-skeleton-table[b-hla4kjfaql] {
    height: 100px;
    border-radius: var(--radius-md);
}

.rp-skeleton[b-hla4kjfaql] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 37%, var(--color-bg-tertiary) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer-b-hla4kjfaql 1.8s ease infinite;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   CARD — Solid surface with hover elevation
   ========================================================================== */
.rp-card[b-hla4kjfaql] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: visible;
    box-shadow: var(--shadow-sm);
    position: relative;
    animation: rise-b-hla4kjfaql .45s cubic-bezier(.4, 0, .2, 1) both;
    transition: box-shadow 200ms cubic-bezier(.4, 0, .2, 1), transform 200ms cubic-bezier(.4, 0, .2, 1);
}

/* Staggered animation delays per column */
.rp-column:first-child .rp-card:nth-child(1)[b-hla4kjfaql] { animation-delay: 0s; }
.rp-column:first-child .rp-card:nth-child(2)[b-hla4kjfaql] { animation-delay: 0.06s; }
.rp-column:first-child .rp-card:nth-child(3)[b-hla4kjfaql] { animation-delay: 0.12s; }
.rp-column:first-child .rp-card:nth-child(4)[b-hla4kjfaql] { animation-delay: 0.18s; }
.rp-column:first-child .rp-card:nth-child(5)[b-hla4kjfaql] { animation-delay: 0.24s; }
.rp-column:last-child .rp-card:nth-child(1)[b-hla4kjfaql] { animation-delay: 0.03s; }
.rp-column:last-child .rp-card:nth-child(2)[b-hla4kjfaql] { animation-delay: 0.09s; }
.rp-column:last-child .rp-card:nth-child(3)[b-hla4kjfaql] { animation-delay: 0.15s; }
.rp-column:last-child .rp-card:nth-child(4)[b-hla4kjfaql] { animation-delay: 0.21s; }
.rp-column:last-child .rp-card:nth-child(5)[b-hla4kjfaql] { animation-delay: 0.27s; }
.rp-column:last-child .rp-card:nth-child(6)[b-hla4kjfaql] { animation-delay: 0.33s; }

.rp-card:hover[b-hla4kjfaql] {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.rp-card-full[b-hla4kjfaql] {
    /* For full-width cards if needed in future; currently unused in 2-col layout */
}

/* Detailed validation card — full width below grid */
.rp-card-detailed[b-hla4kjfaql] {
    margin-top: var(--space-6);
    animation-delay: 0.36s;
}

/* ==========================================================================
   CARD HEADER — Icon circle + title + subtitle
   ========================================================================== */
.rp-card-header[b-hla4kjfaql] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) 0 var(--space-6);
}

.rp-card-icon[b-hla4kjfaql] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Icon color variants */
.rp-icon-sales[b-hla4kjfaql]       { background: var(--color-primary-light); color: var(--color-primary); }
.rp-icon-validation[b-hla4kjfaql]  { background: var(--color-success-light); color: var(--color-success); }
.rp-icon-payments[b-hla4kjfaql]    { background: #F0FDF4; color: #16A34A; }
.rp-icon-revenue[b-hla4kjfaql]     { background: var(--color-warning-light); color: var(--color-warning); }
.rp-icon-tickets[b-hla4kjfaql]     { background: #EEF2FF; color: #4F46E5; }
.rp-icon-wallet[b-hla4kjfaql]      { background: #FFF1F2; color: #E11D48; }
.rp-icon-invoices[b-hla4kjfaql]    { background: var(--color-error-light); color: var(--color-error); }
.rp-icon-documents[b-hla4kjfaql]   { background: #F3E8FF; color: #9333EA; }
.rp-icon-activity[b-hla4kjfaql]    { background: #FFF7ED; color: #EA580C; }
.rp-icon-disruptions[b-hla4kjfaql] { background: var(--color-error-light); color: var(--color-error); }

.rp-card-header-text[b-hla4kjfaql] {
    flex: 1;
    min-width: 0;
}

.rp-card-title[b-hla4kjfaql] {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1) 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.rp-card-subtitle[b-hla4kjfaql] {
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* ==========================================================================
   CARD BODY
   ========================================================================== */
.rp-card-body[b-hla4kjfaql] {
    padding: var(--space-6);
}

/* ==========================================================================
   FILTERS — Date inputs + refresh button row
   ========================================================================== */
.rp-filters[b-hla4kjfaql] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border-primary);
}

.rp-filters-wrap[b-hla4kjfaql] {
    /* Ensure filter row wraps nicely for the detailed card with many filters */
}

.rp-filter-field[b-hla4kjfaql] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
    min-width: 140px;
}

.rp-filter-label[b-hla4kjfaql] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 16px;
    height: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0;
    display: block;
}

.rp-filter-input[b-hla4kjfaql],
.rp-filter-input[type="date"][b-hla4kjfaql] {
    height: 48px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    padding: 0 var(--space-4);
    font-size: 15px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    width: 100%;
    box-sizing: border-box;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

select.rp-filter-input[b-hla4kjfaql] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.rp-filter-input:hover[b-hla4kjfaql] {
    border-color: var(--color-border-secondary);
}

.rp-filter-input:focus[b-hla4kjfaql] {
    outline: none;
    border: 1px solid var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.rp-filter-input[type="date"][b-hla4kjfaql]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 200ms;
}

.rp-filter-input[type="date"][b-hla4kjfaql]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Refresh button */
[b-hla4kjfaql] .rp-refresh-btn {
    min-width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ==========================================================================
   EXPORT BUTTONS — Small icon buttons next to refresh
   ========================================================================== */
.rp-export-btn[b-hla4kjfaql] {
    width: 40px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    padding: 0;
}

.rp-export-btn:hover[b-hla4kjfaql] {
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
}

.rp-export-btn:active[b-hla4kjfaql] {
    transform: scale(0.95);
}

.rp-export-xlsx:hover[b-hla4kjfaql] {
    border-color: #16A34A;
    color: #16A34A;
    background: #F0FDF4;
}

.rp-export-pdf:hover[b-hla4kjfaql] {
    border-color: var(--color-error);
    color: var(--color-error);
    background: var(--color-error-light);
}

/* ==========================================================================
   TABLE
   ========================================================================== */
.rp-table-wrap[b-hla4kjfaql] {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
}

.rp-table[b-hla4kjfaql] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.rp-table thead th[b-hla4kjfaql] {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-primary);
    white-space: nowrap;
}

.rp-table tbody td[b-hla4kjfaql] {
    padding: 14px var(--space-4);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-normal);
    border-bottom: 1px solid var(--color-border-primary);
}

.rp-table tbody tr:last-child td[b-hla4kjfaql] {
    border-bottom: none;
}

.rp-table tbody tr[b-hla4kjfaql] {
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-table tbody tr:hover[b-hla4kjfaql] {
    background: var(--color-bg-secondary);
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.rp-empty[b-hla4kjfaql] {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    font-size: 14px;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   SUMMARY LIST (ticket summary)
   ========================================================================== */
.rp-summary-list[b-hla4kjfaql] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.rp-summary-item[b-hla4kjfaql] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-summary-item:hover[b-hla4kjfaql] {
    border-color: var(--color-border-secondary);
}

.rp-summary-label[b-hla4kjfaql] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.rp-summary-value[b-hla4kjfaql] {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Colored summary values */
.rp-val-success[b-hla4kjfaql] { color: var(--color-success); }
.rp-val-warning[b-hla4kjfaql] { color: var(--color-warning); }
.rp-val-danger[b-hla4kjfaql]  { color: var(--color-error); }

/* ==========================================================================
   STAT CARDS GRID (disruptions, detailed validation summary)
   ========================================================================== */
.rp-stat-grid[b-hla4kjfaql] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.rp-vd-stats[b-hla4kjfaql] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.rp-stat-card[b-hla4kjfaql] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-stat-card:hover[b-hla4kjfaql] {
    border-color: var(--color-border-secondary);
}

.rp-stat-label[b-hla4kjfaql] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.rp-stat-value[b-hla4kjfaql] {
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Stat color accents */
.rp-stat-success .rp-stat-value[b-hla4kjfaql] { color: var(--color-success); }
.rp-stat-info .rp-stat-value[b-hla4kjfaql]    { color: var(--color-primary); }
.rp-stat-muted .rp-stat-value[b-hla4kjfaql]   { color: var(--color-text-muted); }

/* ==========================================================================
   BREAKDOWN GRID (by validator, by line, by vehicle)
   ========================================================================== */
.rp-breakdown-grid[b-hla4kjfaql] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.rp-breakdown-item[b-hla4kjfaql] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 13px;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-breakdown-item:hover[b-hla4kjfaql] {
    border-color: var(--color-border-secondary);
}

.rp-breakdown-label[b-hla4kjfaql] {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.rp-breakdown-value[b-hla4kjfaql] {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   BADGES (success/error status in table)
   ========================================================================== */
.rp-badge[b-hla4kjfaql] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.rp-badge-success[b-hla4kjfaql] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.rp-badge-error[b-hla4kjfaql] {
    background: var(--color-error-light);
    color: var(--color-error);
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.rp-pagination[b-hla4kjfaql] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-primary);
}

[b-hla4kjfaql] .rp-page-btn {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rp-page-info[b-hla4kjfaql] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   SECTION TITLE (invoices sub-sections, breakdown headers)
   ========================================================================== */
.rp-section-title[b-hla4kjfaql] {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3) 0;
}

.rp-section-title-spaced[b-hla4kjfaql] {
    margin-top: var(--space-6);
}

/* ==========================================================================
   RESPONSIVE — Tablet (1023.98px)
   ========================================================================== */
@media (max-width: 1023.98px) {
    .rp-grid[b-hla4kjfaql] {
        grid-template-columns: 1fr;
    }

    .rp-vd-stats[b-hla4kjfaql] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   RESPONSIVE — Mobile (767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {
    .rp-card[b-hla4kjfaql] {
        border-radius: var(--radius-xl);
    }

    .rp-card-header[b-hla4kjfaql] {
        padding: var(--space-5) var(--space-5) 0 var(--space-5);
    }

    .rp-card-body[b-hla4kjfaql] {
        padding: var(--space-5);
    }

    .rp-card-icon[b-hla4kjfaql] {
        width: 40px;
        height: 40px;
    }

    .rp-card-title[b-hla4kjfaql] {
        font-size: 16px;
    }

    .rp-filters[b-hla4kjfaql] {
        flex-direction: column;
        align-items: stretch;
    }

    .rp-filter-field[b-hla4kjfaql] {
        min-width: 100%;
    }

    [b-hla4kjfaql] .rp-refresh-btn {
        width: 100%;
    }

    .rp-export-btn[b-hla4kjfaql] {
        width: 100%;
    }

    .rp-stat-grid[b-hla4kjfaql] {
        grid-template-columns: repeat(2, 1fr);
    }

    .rp-vd-stats[b-hla4kjfaql] {
        grid-template-columns: 1fr 1fr;
    }

    .rp-skeleton-header[b-hla4kjfaql] {
        padding: var(--space-5) var(--space-5) 0 var(--space-5);
    }

    .rp-skeleton-body[b-hla4kjfaql] {
        padding: var(--space-5);
    }
}

/* ==========================================================================
   RESPONSIVE — Small Mobile (479.98px)
   ========================================================================== */
@media (max-width: 479.98px) {
    .rp-grid[b-hla4kjfaql] {
        gap: var(--space-5);
    }

    .rp-column[b-hla4kjfaql] {
        gap: var(--space-5);
    }

    .rp-card[b-hla4kjfaql] {
        border-radius: var(--radius-lg);
    }

    .rp-card-header[b-hla4kjfaql] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-4) 0 var(--space-4);
    }

    .rp-card-body[b-hla4kjfaql] {
        padding: var(--space-4);
    }

    .rp-card-icon[b-hla4kjfaql] {
        width: 38px;
        height: 38px;
        border-radius: var(--radius-md);
    }

    .rp-card-title[b-hla4kjfaql] {
        font-size: 15px;
    }

    .rp-filter-input[b-hla4kjfaql] {
        height: 48px;
        font-size: 16px;
    }

    [b-hla4kjfaql] .rp-refresh-btn {
        height: 48px;
    }

    .rp-stat-grid[b-hla4kjfaql] {
        grid-template-columns: 1fr;
    }

    .rp-vd-stats[b-hla4kjfaql] {
        grid-template-columns: 1fr;
    }

    .rp-table thead th[b-hla4kjfaql],
    .rp-table tbody td[b-hla4kjfaql] {
        padding: 10px var(--space-3);
        font-size: 13px;
    }

    .rp-table thead th[b-hla4kjfaql] {
        font-size: 10px;
    }

    .rp-breakdown-grid[b-hla4kjfaql] {
        flex-direction: column;
    }
}

/* ==========================================================================
   FOCUS & ACCESSIBILITY
   ========================================================================== */
.rp-filter-input:focus-visible[b-hla4kjfaql] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.rp-export-btn:focus-visible[b-hla4kjfaql] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .rp-card[b-hla4kjfaql],
    .rp-skeleton[b-hla4kjfaql] {
        animation: none;
    }

    .rp-card[b-hla4kjfaql],
    .rp-filter-input[b-hla4kjfaql],
    .rp-table tbody tr[b-hla4kjfaql],
    .rp-summary-item[b-hla4kjfaql],
    .rp-stat-card[b-hla4kjfaql],
    .rp-export-btn[b-hla4kjfaql],
    .rp-breakdown-item[b-hla4kjfaql] {
        transition: none;
    }

    .rp-card:hover[b-hla4kjfaql] {
        transform: none;
    }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .rp-filters[b-hla4kjfaql],
    [b-hla4kjfaql] .rp-refresh-btn,
    .rp-export-btn[b-hla4kjfaql],
    .rp-pagination[b-hla4kjfaql] {
        display: none;
    }

    .rp-card[b-hla4kjfaql] {
        break-inside: avoid;
        box-shadow: none;
        background: var(--color-bg-primary);
        border: 1px solid #ddd;
    }
}
/* /Components/Pages/Admin/Reports/ReportRevenue.razor.rz.scp.css */
/* ========================================
   ADMIN REPORTS — 2026 Design System
   Matches AdminTrackingEmulator card style:
   Icon circles, title+subtitle headers, 48px inputs,
   card hover elevation, staggered rise animation.
   rp-* prefix for scoped isolation.
   ======================================== */

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes rise-b-q1paiye6ht {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-shimmer-b-q1paiye6ht {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   ALERTS
   ========================================================================== */
.admin-container[b-q1paiye6ht] >  .app-alert {
    margin-bottom: var(--space-5);
}

/* ==========================================================================
   GRID LAYOUT — Two columns on desktop
   ========================================================================== */
.rp-grid[b-q1paiye6ht] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: start;
}

.rp-column[b-q1paiye6ht] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ==========================================================================
   SKELETON LOADING STATE
   ========================================================================== */
.rp-skeleton-card[b-q1paiye6ht] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.rp-skeleton-header[b-q1paiye6ht] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) 0 var(--space-6);
}

.rp-skeleton-header-text[b-q1paiye6ht] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rp-skeleton-icon[b-q1paiye6ht] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.rp-skeleton-title[b-q1paiye6ht] {
    height: 22px;
    width: 55%;
    border-radius: var(--radius-sm);
}

.rp-skeleton-subtitle[b-q1paiye6ht] {
    height: 16px;
    width: 75%;
    border-radius: var(--radius-sm);
}

.rp-skeleton-body[b-q1paiye6ht] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
}

.rp-skeleton-filter[b-q1paiye6ht] {
    height: 48px;
    border-radius: var(--radius-md);
}

.rp-skeleton-table[b-q1paiye6ht] {
    height: 100px;
    border-radius: var(--radius-md);
}

.rp-skeleton[b-q1paiye6ht] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 37%, var(--color-bg-tertiary) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer-b-q1paiye6ht 1.8s ease infinite;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   CARD — Solid surface with hover elevation
   ========================================================================== */
.rp-card[b-q1paiye6ht] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: visible;
    box-shadow: var(--shadow-sm);
    position: relative;
    animation: rise-b-q1paiye6ht .45s cubic-bezier(.4, 0, .2, 1) both;
    transition: box-shadow 200ms cubic-bezier(.4, 0, .2, 1), transform 200ms cubic-bezier(.4, 0, .2, 1);
}

/* Staggered animation delays per column */
.rp-column:first-child .rp-card:nth-child(1)[b-q1paiye6ht] { animation-delay: 0s; }
.rp-column:first-child .rp-card:nth-child(2)[b-q1paiye6ht] { animation-delay: 0.06s; }
.rp-column:first-child .rp-card:nth-child(3)[b-q1paiye6ht] { animation-delay: 0.12s; }
.rp-column:first-child .rp-card:nth-child(4)[b-q1paiye6ht] { animation-delay: 0.18s; }
.rp-column:first-child .rp-card:nth-child(5)[b-q1paiye6ht] { animation-delay: 0.24s; }
.rp-column:last-child .rp-card:nth-child(1)[b-q1paiye6ht] { animation-delay: 0.03s; }
.rp-column:last-child .rp-card:nth-child(2)[b-q1paiye6ht] { animation-delay: 0.09s; }
.rp-column:last-child .rp-card:nth-child(3)[b-q1paiye6ht] { animation-delay: 0.15s; }
.rp-column:last-child .rp-card:nth-child(4)[b-q1paiye6ht] { animation-delay: 0.21s; }
.rp-column:last-child .rp-card:nth-child(5)[b-q1paiye6ht] { animation-delay: 0.27s; }
.rp-column:last-child .rp-card:nth-child(6)[b-q1paiye6ht] { animation-delay: 0.33s; }

.rp-card:hover[b-q1paiye6ht] {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.rp-card-full[b-q1paiye6ht] {
    /* For full-width cards if needed in future; currently unused in 2-col layout */
}

/* Detailed validation card — full width below grid */
.rp-card-detailed[b-q1paiye6ht] {
    margin-top: var(--space-6);
    animation-delay: 0.36s;
}

/* ==========================================================================
   CARD HEADER — Icon circle + title + subtitle
   ========================================================================== */
.rp-card-header[b-q1paiye6ht] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) 0 var(--space-6);
}

.rp-card-icon[b-q1paiye6ht] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Icon color variants */
.rp-icon-sales[b-q1paiye6ht]       { background: var(--color-primary-light); color: var(--color-primary); }
.rp-icon-validation[b-q1paiye6ht]  { background: var(--color-success-light); color: var(--color-success); }
.rp-icon-payments[b-q1paiye6ht]    { background: #F0FDF4; color: #16A34A; }
.rp-icon-revenue[b-q1paiye6ht]     { background: var(--color-warning-light); color: var(--color-warning); }
.rp-icon-tickets[b-q1paiye6ht]     { background: #EEF2FF; color: #4F46E5; }
.rp-icon-wallet[b-q1paiye6ht]      { background: #FFF1F2; color: #E11D48; }
.rp-icon-invoices[b-q1paiye6ht]    { background: var(--color-error-light); color: var(--color-error); }
.rp-icon-documents[b-q1paiye6ht]   { background: #F3E8FF; color: #9333EA; }
.rp-icon-activity[b-q1paiye6ht]    { background: #FFF7ED; color: #EA580C; }
.rp-icon-disruptions[b-q1paiye6ht] { background: var(--color-error-light); color: var(--color-error); }

.rp-card-header-text[b-q1paiye6ht] {
    flex: 1;
    min-width: 0;
}

.rp-card-title[b-q1paiye6ht] {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1) 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.rp-card-subtitle[b-q1paiye6ht] {
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* ==========================================================================
   CARD BODY
   ========================================================================== */
.rp-card-body[b-q1paiye6ht] {
    padding: var(--space-6);
}

/* ==========================================================================
   FILTERS — Date inputs + refresh button row
   ========================================================================== */
.rp-filters[b-q1paiye6ht] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border-primary);
}

.rp-filters-wrap[b-q1paiye6ht] {
    /* Ensure filter row wraps nicely for the detailed card with many filters */
}

.rp-filter-field[b-q1paiye6ht] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
    min-width: 140px;
}

.rp-filter-label[b-q1paiye6ht] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 16px;
    height: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0;
    display: block;
}

.rp-filter-input[b-q1paiye6ht],
.rp-filter-input[type="date"][b-q1paiye6ht] {
    height: 48px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    padding: 0 var(--space-4);
    font-size: 15px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    width: 100%;
    box-sizing: border-box;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

select.rp-filter-input[b-q1paiye6ht] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.rp-filter-input:hover[b-q1paiye6ht] {
    border-color: var(--color-border-secondary);
}

.rp-filter-input:focus[b-q1paiye6ht] {
    outline: none;
    border: 1px solid var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.rp-filter-input[type="date"][b-q1paiye6ht]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 200ms;
}

.rp-filter-input[type="date"][b-q1paiye6ht]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Refresh button */
[b-q1paiye6ht] .rp-refresh-btn {
    min-width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ==========================================================================
   EXPORT BUTTONS — Small icon buttons next to refresh
   ========================================================================== */
.rp-export-btn[b-q1paiye6ht] {
    width: 40px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    padding: 0;
}

.rp-export-btn:hover[b-q1paiye6ht] {
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
}

.rp-export-btn:active[b-q1paiye6ht] {
    transform: scale(0.95);
}

.rp-export-xlsx:hover[b-q1paiye6ht] {
    border-color: #16A34A;
    color: #16A34A;
    background: #F0FDF4;
}

.rp-export-pdf:hover[b-q1paiye6ht] {
    border-color: var(--color-error);
    color: var(--color-error);
    background: var(--color-error-light);
}

/* ==========================================================================
   TABLE
   ========================================================================== */
.rp-table-wrap[b-q1paiye6ht] {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
}

.rp-table[b-q1paiye6ht] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.rp-table thead th[b-q1paiye6ht] {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-primary);
    white-space: nowrap;
}

.rp-table tbody td[b-q1paiye6ht] {
    padding: 14px var(--space-4);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-normal);
    border-bottom: 1px solid var(--color-border-primary);
}

.rp-table tbody tr:last-child td[b-q1paiye6ht] {
    border-bottom: none;
}

.rp-table tbody tr[b-q1paiye6ht] {
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-table tbody tr:hover[b-q1paiye6ht] {
    background: var(--color-bg-secondary);
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.rp-empty[b-q1paiye6ht] {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    font-size: 14px;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   SUMMARY LIST (ticket summary)
   ========================================================================== */
.rp-summary-list[b-q1paiye6ht] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.rp-summary-item[b-q1paiye6ht] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-summary-item:hover[b-q1paiye6ht] {
    border-color: var(--color-border-secondary);
}

.rp-summary-label[b-q1paiye6ht] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.rp-summary-value[b-q1paiye6ht] {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Colored summary values */
.rp-val-success[b-q1paiye6ht] { color: var(--color-success); }
.rp-val-warning[b-q1paiye6ht] { color: var(--color-warning); }
.rp-val-danger[b-q1paiye6ht]  { color: var(--color-error); }

/* ==========================================================================
   STAT CARDS GRID (disruptions, detailed validation summary)
   ========================================================================== */
.rp-stat-grid[b-q1paiye6ht] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.rp-vd-stats[b-q1paiye6ht] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.rp-stat-card[b-q1paiye6ht] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-stat-card:hover[b-q1paiye6ht] {
    border-color: var(--color-border-secondary);
}

.rp-stat-label[b-q1paiye6ht] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.rp-stat-value[b-q1paiye6ht] {
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Stat color accents */
.rp-stat-success .rp-stat-value[b-q1paiye6ht] { color: var(--color-success); }
.rp-stat-info .rp-stat-value[b-q1paiye6ht]    { color: var(--color-primary); }
.rp-stat-muted .rp-stat-value[b-q1paiye6ht]   { color: var(--color-text-muted); }

/* ==========================================================================
   BREAKDOWN GRID (by validator, by line, by vehicle)
   ========================================================================== */
.rp-breakdown-grid[b-q1paiye6ht] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.rp-breakdown-item[b-q1paiye6ht] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 13px;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-breakdown-item:hover[b-q1paiye6ht] {
    border-color: var(--color-border-secondary);
}

.rp-breakdown-label[b-q1paiye6ht] {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.rp-breakdown-value[b-q1paiye6ht] {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   BADGES (success/error status in table)
   ========================================================================== */
.rp-badge[b-q1paiye6ht] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.rp-badge-success[b-q1paiye6ht] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.rp-badge-error[b-q1paiye6ht] {
    background: var(--color-error-light);
    color: var(--color-error);
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.rp-pagination[b-q1paiye6ht] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-primary);
}

[b-q1paiye6ht] .rp-page-btn {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rp-page-info[b-q1paiye6ht] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   SECTION TITLE (invoices sub-sections, breakdown headers)
   ========================================================================== */
.rp-section-title[b-q1paiye6ht] {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3) 0;
}

.rp-section-title-spaced[b-q1paiye6ht] {
    margin-top: var(--space-6);
}

/* ==========================================================================
   RESPONSIVE — Tablet (1023.98px)
   ========================================================================== */
@media (max-width: 1023.98px) {
    .rp-grid[b-q1paiye6ht] {
        grid-template-columns: 1fr;
    }

    .rp-vd-stats[b-q1paiye6ht] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   RESPONSIVE — Mobile (767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {
    .rp-card[b-q1paiye6ht] {
        border-radius: var(--radius-xl);
    }

    .rp-card-header[b-q1paiye6ht] {
        padding: var(--space-5) var(--space-5) 0 var(--space-5);
    }

    .rp-card-body[b-q1paiye6ht] {
        padding: var(--space-5);
    }

    .rp-card-icon[b-q1paiye6ht] {
        width: 40px;
        height: 40px;
    }

    .rp-card-title[b-q1paiye6ht] {
        font-size: 16px;
    }

    .rp-filters[b-q1paiye6ht] {
        flex-direction: column;
        align-items: stretch;
    }

    .rp-filter-field[b-q1paiye6ht] {
        min-width: 100%;
    }

    [b-q1paiye6ht] .rp-refresh-btn {
        width: 100%;
    }

    .rp-export-btn[b-q1paiye6ht] {
        width: 100%;
    }

    .rp-stat-grid[b-q1paiye6ht] {
        grid-template-columns: repeat(2, 1fr);
    }

    .rp-vd-stats[b-q1paiye6ht] {
        grid-template-columns: 1fr 1fr;
    }

    .rp-skeleton-header[b-q1paiye6ht] {
        padding: var(--space-5) var(--space-5) 0 var(--space-5);
    }

    .rp-skeleton-body[b-q1paiye6ht] {
        padding: var(--space-5);
    }
}

/* ==========================================================================
   RESPONSIVE — Small Mobile (479.98px)
   ========================================================================== */
@media (max-width: 479.98px) {
    .rp-grid[b-q1paiye6ht] {
        gap: var(--space-5);
    }

    .rp-column[b-q1paiye6ht] {
        gap: var(--space-5);
    }

    .rp-card[b-q1paiye6ht] {
        border-radius: var(--radius-lg);
    }

    .rp-card-header[b-q1paiye6ht] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-4) 0 var(--space-4);
    }

    .rp-card-body[b-q1paiye6ht] {
        padding: var(--space-4);
    }

    .rp-card-icon[b-q1paiye6ht] {
        width: 38px;
        height: 38px;
        border-radius: var(--radius-md);
    }

    .rp-card-title[b-q1paiye6ht] {
        font-size: 15px;
    }

    .rp-filter-input[b-q1paiye6ht] {
        height: 48px;
        font-size: 16px;
    }

    [b-q1paiye6ht] .rp-refresh-btn {
        height: 48px;
    }

    .rp-stat-grid[b-q1paiye6ht] {
        grid-template-columns: 1fr;
    }

    .rp-vd-stats[b-q1paiye6ht] {
        grid-template-columns: 1fr;
    }

    .rp-table thead th[b-q1paiye6ht],
    .rp-table tbody td[b-q1paiye6ht] {
        padding: 10px var(--space-3);
        font-size: 13px;
    }

    .rp-table thead th[b-q1paiye6ht] {
        font-size: 10px;
    }

    .rp-breakdown-grid[b-q1paiye6ht] {
        flex-direction: column;
    }
}

/* ==========================================================================
   FOCUS & ACCESSIBILITY
   ========================================================================== */
.rp-filter-input:focus-visible[b-q1paiye6ht] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.rp-export-btn:focus-visible[b-q1paiye6ht] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .rp-card[b-q1paiye6ht],
    .rp-skeleton[b-q1paiye6ht] {
        animation: none;
    }

    .rp-card[b-q1paiye6ht],
    .rp-filter-input[b-q1paiye6ht],
    .rp-table tbody tr[b-q1paiye6ht],
    .rp-summary-item[b-q1paiye6ht],
    .rp-stat-card[b-q1paiye6ht],
    .rp-export-btn[b-q1paiye6ht],
    .rp-breakdown-item[b-q1paiye6ht] {
        transition: none;
    }

    .rp-card:hover[b-q1paiye6ht] {
        transform: none;
    }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .rp-filters[b-q1paiye6ht],
    [b-q1paiye6ht] .rp-refresh-btn,
    .rp-export-btn[b-q1paiye6ht],
    .rp-pagination[b-q1paiye6ht] {
        display: none;
    }

    .rp-card[b-q1paiye6ht] {
        break-inside: avoid;
        box-shadow: none;
        background: var(--color-bg-primary);
        border: 1px solid #ddd;
    }
}
/* /Components/Pages/Admin/Reports/ReportSalesByType.razor.rz.scp.css */
/* ========================================
   ADMIN REPORTS — 2026 Design System
   Matches AdminTrackingEmulator card style:
   Icon circles, title+subtitle headers, 48px inputs,
   card hover elevation, staggered rise animation.
   rp-* prefix for scoped isolation.
   ======================================== */

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes rise-b-x666mjf8wp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-shimmer-b-x666mjf8wp {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   ALERTS
   ========================================================================== */
.admin-container[b-x666mjf8wp] >  .app-alert {
    margin-bottom: var(--space-5);
}

/* ==========================================================================
   GRID LAYOUT — Two columns on desktop
   ========================================================================== */
.rp-grid[b-x666mjf8wp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: start;
}

.rp-column[b-x666mjf8wp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ==========================================================================
   SKELETON LOADING STATE
   ========================================================================== */
.rp-skeleton-card[b-x666mjf8wp] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.rp-skeleton-header[b-x666mjf8wp] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) 0 var(--space-6);
}

.rp-skeleton-header-text[b-x666mjf8wp] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rp-skeleton-icon[b-x666mjf8wp] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.rp-skeleton-title[b-x666mjf8wp] {
    height: 22px;
    width: 55%;
    border-radius: var(--radius-sm);
}

.rp-skeleton-subtitle[b-x666mjf8wp] {
    height: 16px;
    width: 75%;
    border-radius: var(--radius-sm);
}

.rp-skeleton-body[b-x666mjf8wp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
}

.rp-skeleton-filter[b-x666mjf8wp] {
    height: 48px;
    border-radius: var(--radius-md);
}

.rp-skeleton-table[b-x666mjf8wp] {
    height: 100px;
    border-radius: var(--radius-md);
}

.rp-skeleton[b-x666mjf8wp] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 37%, var(--color-bg-tertiary) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer-b-x666mjf8wp 1.8s ease infinite;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   CARD — Solid surface with hover elevation
   ========================================================================== */
.rp-card[b-x666mjf8wp] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: visible;
    box-shadow: var(--shadow-sm);
    position: relative;
    animation: rise-b-x666mjf8wp .45s cubic-bezier(.4, 0, .2, 1) both;
    transition: box-shadow 200ms cubic-bezier(.4, 0, .2, 1), transform 200ms cubic-bezier(.4, 0, .2, 1);
}

/* Staggered animation delays per column */
.rp-column:first-child .rp-card:nth-child(1)[b-x666mjf8wp] { animation-delay: 0s; }
.rp-column:first-child .rp-card:nth-child(2)[b-x666mjf8wp] { animation-delay: 0.06s; }
.rp-column:first-child .rp-card:nth-child(3)[b-x666mjf8wp] { animation-delay: 0.12s; }
.rp-column:first-child .rp-card:nth-child(4)[b-x666mjf8wp] { animation-delay: 0.18s; }
.rp-column:first-child .rp-card:nth-child(5)[b-x666mjf8wp] { animation-delay: 0.24s; }
.rp-column:last-child .rp-card:nth-child(1)[b-x666mjf8wp] { animation-delay: 0.03s; }
.rp-column:last-child .rp-card:nth-child(2)[b-x666mjf8wp] { animation-delay: 0.09s; }
.rp-column:last-child .rp-card:nth-child(3)[b-x666mjf8wp] { animation-delay: 0.15s; }
.rp-column:last-child .rp-card:nth-child(4)[b-x666mjf8wp] { animation-delay: 0.21s; }
.rp-column:last-child .rp-card:nth-child(5)[b-x666mjf8wp] { animation-delay: 0.27s; }
.rp-column:last-child .rp-card:nth-child(6)[b-x666mjf8wp] { animation-delay: 0.33s; }

.rp-card:hover[b-x666mjf8wp] {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.rp-card-full[b-x666mjf8wp] {
    /* For full-width cards if needed in future; currently unused in 2-col layout */
}

/* Detailed validation card — full width below grid */
.rp-card-detailed[b-x666mjf8wp] {
    margin-top: var(--space-6);
    animation-delay: 0.36s;
}

/* ==========================================================================
   CARD HEADER — Icon circle + title + subtitle
   ========================================================================== */
.rp-card-header[b-x666mjf8wp] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) 0 var(--space-6);
}

.rp-card-icon[b-x666mjf8wp] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Icon color variants */
.rp-icon-sales[b-x666mjf8wp]       { background: var(--color-primary-light); color: var(--color-primary); }
.rp-icon-validation[b-x666mjf8wp]  { background: var(--color-success-light); color: var(--color-success); }
.rp-icon-payments[b-x666mjf8wp]    { background: #F0FDF4; color: #16A34A; }
.rp-icon-revenue[b-x666mjf8wp]     { background: var(--color-warning-light); color: var(--color-warning); }
.rp-icon-tickets[b-x666mjf8wp]     { background: #EEF2FF; color: #4F46E5; }
.rp-icon-wallet[b-x666mjf8wp]      { background: #FFF1F2; color: #E11D48; }
.rp-icon-invoices[b-x666mjf8wp]    { background: var(--color-error-light); color: var(--color-error); }
.rp-icon-documents[b-x666mjf8wp]   { background: #F3E8FF; color: #9333EA; }
.rp-icon-activity[b-x666mjf8wp]    { background: #FFF7ED; color: #EA580C; }
.rp-icon-disruptions[b-x666mjf8wp] { background: var(--color-error-light); color: var(--color-error); }

.rp-card-header-text[b-x666mjf8wp] {
    flex: 1;
    min-width: 0;
}

.rp-card-title[b-x666mjf8wp] {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1) 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.rp-card-subtitle[b-x666mjf8wp] {
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* ==========================================================================
   CARD BODY
   ========================================================================== */
.rp-card-body[b-x666mjf8wp] {
    padding: var(--space-6);
}

/* ==========================================================================
   FILTERS — Date inputs + refresh button row
   ========================================================================== */
.rp-filters[b-x666mjf8wp] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border-primary);
}

.rp-filters-wrap[b-x666mjf8wp] {
    /* Ensure filter row wraps nicely for the detailed card with many filters */
}

.rp-filter-field[b-x666mjf8wp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
    min-width: 140px;
}

.rp-filter-label[b-x666mjf8wp] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 16px;
    height: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0;
    display: block;
}

.rp-filter-input[b-x666mjf8wp],
.rp-filter-input[type="date"][b-x666mjf8wp] {
    height: 48px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    padding: 0 var(--space-4);
    font-size: 15px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    width: 100%;
    box-sizing: border-box;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

select.rp-filter-input[b-x666mjf8wp] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.rp-filter-input:hover[b-x666mjf8wp] {
    border-color: var(--color-border-secondary);
}

.rp-filter-input:focus[b-x666mjf8wp] {
    outline: none;
    border: 1px solid var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.rp-filter-input[type="date"][b-x666mjf8wp]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 200ms;
}

.rp-filter-input[type="date"][b-x666mjf8wp]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Refresh button */
[b-x666mjf8wp] .rp-refresh-btn {
    min-width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ==========================================================================
   EXPORT BUTTONS — Small icon buttons next to refresh
   ========================================================================== */
.rp-export-btn[b-x666mjf8wp] {
    width: 40px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    padding: 0;
}

.rp-export-btn:hover[b-x666mjf8wp] {
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
}

.rp-export-btn:active[b-x666mjf8wp] {
    transform: scale(0.95);
}

.rp-export-xlsx:hover[b-x666mjf8wp] {
    border-color: #16A34A;
    color: #16A34A;
    background: #F0FDF4;
}

.rp-export-pdf:hover[b-x666mjf8wp] {
    border-color: var(--color-error);
    color: var(--color-error);
    background: var(--color-error-light);
}

/* ==========================================================================
   TABLE
   ========================================================================== */
.rp-table-wrap[b-x666mjf8wp] {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
}

.rp-table[b-x666mjf8wp] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.rp-table thead th[b-x666mjf8wp] {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-primary);
    white-space: nowrap;
}

.rp-table tbody td[b-x666mjf8wp] {
    padding: 14px var(--space-4);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-normal);
    border-bottom: 1px solid var(--color-border-primary);
}

.rp-table tbody tr:last-child td[b-x666mjf8wp] {
    border-bottom: none;
}

.rp-table tbody tr[b-x666mjf8wp] {
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-table tbody tr:hover[b-x666mjf8wp] {
    background: var(--color-bg-secondary);
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.rp-empty[b-x666mjf8wp] {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    font-size: 14px;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   SUMMARY LIST (ticket summary)
   ========================================================================== */
.rp-summary-list[b-x666mjf8wp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.rp-summary-item[b-x666mjf8wp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-summary-item:hover[b-x666mjf8wp] {
    border-color: var(--color-border-secondary);
}

.rp-summary-label[b-x666mjf8wp] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.rp-summary-value[b-x666mjf8wp] {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Colored summary values */
.rp-val-success[b-x666mjf8wp] { color: var(--color-success); }
.rp-val-warning[b-x666mjf8wp] { color: var(--color-warning); }
.rp-val-danger[b-x666mjf8wp]  { color: var(--color-error); }

/* ==========================================================================
   STAT CARDS GRID (disruptions, detailed validation summary)
   ========================================================================== */
.rp-stat-grid[b-x666mjf8wp] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.rp-vd-stats[b-x666mjf8wp] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.rp-stat-card[b-x666mjf8wp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-stat-card:hover[b-x666mjf8wp] {
    border-color: var(--color-border-secondary);
}

.rp-stat-label[b-x666mjf8wp] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.rp-stat-value[b-x666mjf8wp] {
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Stat color accents */
.rp-stat-success .rp-stat-value[b-x666mjf8wp] { color: var(--color-success); }
.rp-stat-info .rp-stat-value[b-x666mjf8wp]    { color: var(--color-primary); }
.rp-stat-muted .rp-stat-value[b-x666mjf8wp]   { color: var(--color-text-muted); }

/* ==========================================================================
   BREAKDOWN GRID (by validator, by line, by vehicle)
   ========================================================================== */
.rp-breakdown-grid[b-x666mjf8wp] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.rp-breakdown-item[b-x666mjf8wp] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 13px;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-breakdown-item:hover[b-x666mjf8wp] {
    border-color: var(--color-border-secondary);
}

.rp-breakdown-label[b-x666mjf8wp] {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.rp-breakdown-value[b-x666mjf8wp] {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   BADGES (success/error status in table)
   ========================================================================== */
.rp-badge[b-x666mjf8wp] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.rp-badge-success[b-x666mjf8wp] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.rp-badge-error[b-x666mjf8wp] {
    background: var(--color-error-light);
    color: var(--color-error);
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.rp-pagination[b-x666mjf8wp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-primary);
}

[b-x666mjf8wp] .rp-page-btn {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rp-page-info[b-x666mjf8wp] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   SECTION TITLE (invoices sub-sections, breakdown headers)
   ========================================================================== */
.rp-section-title[b-x666mjf8wp] {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3) 0;
}

.rp-section-title-spaced[b-x666mjf8wp] {
    margin-top: var(--space-6);
}

/* ==========================================================================
   RESPONSIVE — Tablet (1023.98px)
   ========================================================================== */
@media (max-width: 1023.98px) {
    .rp-grid[b-x666mjf8wp] {
        grid-template-columns: 1fr;
    }

    .rp-vd-stats[b-x666mjf8wp] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   RESPONSIVE — Mobile (767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {
    .rp-card[b-x666mjf8wp] {
        border-radius: var(--radius-xl);
    }

    .rp-card-header[b-x666mjf8wp] {
        padding: var(--space-5) var(--space-5) 0 var(--space-5);
    }

    .rp-card-body[b-x666mjf8wp] {
        padding: var(--space-5);
    }

    .rp-card-icon[b-x666mjf8wp] {
        width: 40px;
        height: 40px;
    }

    .rp-card-title[b-x666mjf8wp] {
        font-size: 16px;
    }

    .rp-filters[b-x666mjf8wp] {
        flex-direction: column;
        align-items: stretch;
    }

    .rp-filter-field[b-x666mjf8wp] {
        min-width: 100%;
    }

    [b-x666mjf8wp] .rp-refresh-btn {
        width: 100%;
    }

    .rp-export-btn[b-x666mjf8wp] {
        width: 100%;
    }

    .rp-stat-grid[b-x666mjf8wp] {
        grid-template-columns: repeat(2, 1fr);
    }

    .rp-vd-stats[b-x666mjf8wp] {
        grid-template-columns: 1fr 1fr;
    }

    .rp-skeleton-header[b-x666mjf8wp] {
        padding: var(--space-5) var(--space-5) 0 var(--space-5);
    }

    .rp-skeleton-body[b-x666mjf8wp] {
        padding: var(--space-5);
    }
}

/* ==========================================================================
   RESPONSIVE — Small Mobile (479.98px)
   ========================================================================== */
@media (max-width: 479.98px) {
    .rp-grid[b-x666mjf8wp] {
        gap: var(--space-5);
    }

    .rp-column[b-x666mjf8wp] {
        gap: var(--space-5);
    }

    .rp-card[b-x666mjf8wp] {
        border-radius: var(--radius-lg);
    }

    .rp-card-header[b-x666mjf8wp] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-4) 0 var(--space-4);
    }

    .rp-card-body[b-x666mjf8wp] {
        padding: var(--space-4);
    }

    .rp-card-icon[b-x666mjf8wp] {
        width: 38px;
        height: 38px;
        border-radius: var(--radius-md);
    }

    .rp-card-title[b-x666mjf8wp] {
        font-size: 15px;
    }

    .rp-filter-input[b-x666mjf8wp] {
        height: 48px;
        font-size: 16px;
    }

    [b-x666mjf8wp] .rp-refresh-btn {
        height: 48px;
    }

    .rp-stat-grid[b-x666mjf8wp] {
        grid-template-columns: 1fr;
    }

    .rp-vd-stats[b-x666mjf8wp] {
        grid-template-columns: 1fr;
    }

    .rp-table thead th[b-x666mjf8wp],
    .rp-table tbody td[b-x666mjf8wp] {
        padding: 10px var(--space-3);
        font-size: 13px;
    }

    .rp-table thead th[b-x666mjf8wp] {
        font-size: 10px;
    }

    .rp-breakdown-grid[b-x666mjf8wp] {
        flex-direction: column;
    }
}

/* ==========================================================================
   FOCUS & ACCESSIBILITY
   ========================================================================== */
.rp-filter-input:focus-visible[b-x666mjf8wp] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.rp-export-btn:focus-visible[b-x666mjf8wp] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .rp-card[b-x666mjf8wp],
    .rp-skeleton[b-x666mjf8wp] {
        animation: none;
    }

    .rp-card[b-x666mjf8wp],
    .rp-filter-input[b-x666mjf8wp],
    .rp-table tbody tr[b-x666mjf8wp],
    .rp-summary-item[b-x666mjf8wp],
    .rp-stat-card[b-x666mjf8wp],
    .rp-export-btn[b-x666mjf8wp],
    .rp-breakdown-item[b-x666mjf8wp] {
        transition: none;
    }

    .rp-card:hover[b-x666mjf8wp] {
        transform: none;
    }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .rp-filters[b-x666mjf8wp],
    [b-x666mjf8wp] .rp-refresh-btn,
    .rp-export-btn[b-x666mjf8wp],
    .rp-pagination[b-x666mjf8wp] {
        display: none;
    }

    .rp-card[b-x666mjf8wp] {
        break-inside: avoid;
        box-shadow: none;
        background: var(--color-bg-primary);
        border: 1px solid #ddd;
    }
}
/* /Components/Pages/Admin/Reports/ReportTicketSummary.razor.rz.scp.css */
/* ========================================
   ADMIN REPORTS — 2026 Design System
   Matches AdminTrackingEmulator card style:
   Icon circles, title+subtitle headers, 48px inputs,
   card hover elevation, staggered rise animation.
   rp-* prefix for scoped isolation.
   ======================================== */

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes rise-b-gfk67b13uw {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-shimmer-b-gfk67b13uw {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   ALERTS
   ========================================================================== */
.admin-container[b-gfk67b13uw] >  .app-alert {
    margin-bottom: var(--space-5);
}

/* ==========================================================================
   GRID LAYOUT — Two columns on desktop
   ========================================================================== */
.rp-grid[b-gfk67b13uw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: start;
}

.rp-column[b-gfk67b13uw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ==========================================================================
   SKELETON LOADING STATE
   ========================================================================== */
.rp-skeleton-card[b-gfk67b13uw] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.rp-skeleton-header[b-gfk67b13uw] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) 0 var(--space-6);
}

.rp-skeleton-header-text[b-gfk67b13uw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rp-skeleton-icon[b-gfk67b13uw] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.rp-skeleton-title[b-gfk67b13uw] {
    height: 22px;
    width: 55%;
    border-radius: var(--radius-sm);
}

.rp-skeleton-subtitle[b-gfk67b13uw] {
    height: 16px;
    width: 75%;
    border-radius: var(--radius-sm);
}

.rp-skeleton-body[b-gfk67b13uw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
}

.rp-skeleton-filter[b-gfk67b13uw] {
    height: 48px;
    border-radius: var(--radius-md);
}

.rp-skeleton-table[b-gfk67b13uw] {
    height: 100px;
    border-radius: var(--radius-md);
}

.rp-skeleton[b-gfk67b13uw] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 37%, var(--color-bg-tertiary) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer-b-gfk67b13uw 1.8s ease infinite;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   CARD — Solid surface with hover elevation
   ========================================================================== */
.rp-card[b-gfk67b13uw] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: visible;
    box-shadow: var(--shadow-sm);
    position: relative;
    animation: rise-b-gfk67b13uw .45s cubic-bezier(.4, 0, .2, 1) both;
    transition: box-shadow 200ms cubic-bezier(.4, 0, .2, 1), transform 200ms cubic-bezier(.4, 0, .2, 1);
}

/* Staggered animation delays per column */
.rp-column:first-child .rp-card:nth-child(1)[b-gfk67b13uw] { animation-delay: 0s; }
.rp-column:first-child .rp-card:nth-child(2)[b-gfk67b13uw] { animation-delay: 0.06s; }
.rp-column:first-child .rp-card:nth-child(3)[b-gfk67b13uw] { animation-delay: 0.12s; }
.rp-column:first-child .rp-card:nth-child(4)[b-gfk67b13uw] { animation-delay: 0.18s; }
.rp-column:first-child .rp-card:nth-child(5)[b-gfk67b13uw] { animation-delay: 0.24s; }
.rp-column:last-child .rp-card:nth-child(1)[b-gfk67b13uw] { animation-delay: 0.03s; }
.rp-column:last-child .rp-card:nth-child(2)[b-gfk67b13uw] { animation-delay: 0.09s; }
.rp-column:last-child .rp-card:nth-child(3)[b-gfk67b13uw] { animation-delay: 0.15s; }
.rp-column:last-child .rp-card:nth-child(4)[b-gfk67b13uw] { animation-delay: 0.21s; }
.rp-column:last-child .rp-card:nth-child(5)[b-gfk67b13uw] { animation-delay: 0.27s; }
.rp-column:last-child .rp-card:nth-child(6)[b-gfk67b13uw] { animation-delay: 0.33s; }

.rp-card:hover[b-gfk67b13uw] {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.rp-card-full[b-gfk67b13uw] {
    /* For full-width cards if needed in future; currently unused in 2-col layout */
}

/* Detailed validation card — full width below grid */
.rp-card-detailed[b-gfk67b13uw] {
    margin-top: var(--space-6);
    animation-delay: 0.36s;
}

/* ==========================================================================
   CARD HEADER — Icon circle + title + subtitle
   ========================================================================== */
.rp-card-header[b-gfk67b13uw] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) 0 var(--space-6);
}

.rp-card-icon[b-gfk67b13uw] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Icon color variants */
.rp-icon-sales[b-gfk67b13uw]       { background: var(--color-primary-light); color: var(--color-primary); }
.rp-icon-validation[b-gfk67b13uw]  { background: var(--color-success-light); color: var(--color-success); }
.rp-icon-payments[b-gfk67b13uw]    { background: #F0FDF4; color: #16A34A; }
.rp-icon-revenue[b-gfk67b13uw]     { background: var(--color-warning-light); color: var(--color-warning); }
.rp-icon-tickets[b-gfk67b13uw]     { background: #EEF2FF; color: #4F46E5; }
.rp-icon-wallet[b-gfk67b13uw]      { background: #FFF1F2; color: #E11D48; }
.rp-icon-invoices[b-gfk67b13uw]    { background: var(--color-error-light); color: var(--color-error); }
.rp-icon-documents[b-gfk67b13uw]   { background: #F3E8FF; color: #9333EA; }
.rp-icon-activity[b-gfk67b13uw]    { background: #FFF7ED; color: #EA580C; }
.rp-icon-disruptions[b-gfk67b13uw] { background: var(--color-error-light); color: var(--color-error); }

.rp-card-header-text[b-gfk67b13uw] {
    flex: 1;
    min-width: 0;
}

.rp-card-title[b-gfk67b13uw] {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1) 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.rp-card-subtitle[b-gfk67b13uw] {
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* ==========================================================================
   CARD BODY
   ========================================================================== */
.rp-card-body[b-gfk67b13uw] {
    padding: var(--space-6);
}

/* ==========================================================================
   FILTERS — Date inputs + refresh button row
   ========================================================================== */
.rp-filters[b-gfk67b13uw] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border-primary);
}

.rp-filters-wrap[b-gfk67b13uw] {
    /* Ensure filter row wraps nicely for the detailed card with many filters */
}

.rp-filter-field[b-gfk67b13uw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
    min-width: 140px;
}

.rp-filter-label[b-gfk67b13uw] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 16px;
    height: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0;
    display: block;
}

.rp-filter-input[b-gfk67b13uw],
.rp-filter-input[type="date"][b-gfk67b13uw] {
    height: 48px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    padding: 0 var(--space-4);
    font-size: 15px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    width: 100%;
    box-sizing: border-box;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

select.rp-filter-input[b-gfk67b13uw] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.rp-filter-input:hover[b-gfk67b13uw] {
    border-color: var(--color-border-secondary);
}

.rp-filter-input:focus[b-gfk67b13uw] {
    outline: none;
    border: 1px solid var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.rp-filter-input[type="date"][b-gfk67b13uw]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 200ms;
}

.rp-filter-input[type="date"][b-gfk67b13uw]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Refresh button */
[b-gfk67b13uw] .rp-refresh-btn {
    min-width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ==========================================================================
   EXPORT BUTTONS — Small icon buttons next to refresh
   ========================================================================== */
.rp-export-btn[b-gfk67b13uw] {
    width: 40px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    padding: 0;
}

.rp-export-btn:hover[b-gfk67b13uw] {
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
}

.rp-export-btn:active[b-gfk67b13uw] {
    transform: scale(0.95);
}

.rp-export-xlsx:hover[b-gfk67b13uw] {
    border-color: #16A34A;
    color: #16A34A;
    background: #F0FDF4;
}

.rp-export-pdf:hover[b-gfk67b13uw] {
    border-color: var(--color-error);
    color: var(--color-error);
    background: var(--color-error-light);
}

/* ==========================================================================
   TABLE
   ========================================================================== */
.rp-table-wrap[b-gfk67b13uw] {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
}

.rp-table[b-gfk67b13uw] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.rp-table thead th[b-gfk67b13uw] {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-primary);
    white-space: nowrap;
}

.rp-table tbody td[b-gfk67b13uw] {
    padding: 14px var(--space-4);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-normal);
    border-bottom: 1px solid var(--color-border-primary);
}

.rp-table tbody tr:last-child td[b-gfk67b13uw] {
    border-bottom: none;
}

.rp-table tbody tr[b-gfk67b13uw] {
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-table tbody tr:hover[b-gfk67b13uw] {
    background: var(--color-bg-secondary);
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.rp-empty[b-gfk67b13uw] {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    font-size: 14px;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   SUMMARY LIST (ticket summary)
   ========================================================================== */
.rp-summary-list[b-gfk67b13uw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.rp-summary-item[b-gfk67b13uw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-summary-item:hover[b-gfk67b13uw] {
    border-color: var(--color-border-secondary);
}

.rp-summary-label[b-gfk67b13uw] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.rp-summary-value[b-gfk67b13uw] {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Colored summary values */
.rp-val-success[b-gfk67b13uw] { color: var(--color-success); }
.rp-val-warning[b-gfk67b13uw] { color: var(--color-warning); }
.rp-val-danger[b-gfk67b13uw]  { color: var(--color-error); }

/* ==========================================================================
   STAT CARDS GRID (disruptions, detailed validation summary)
   ========================================================================== */
.rp-stat-grid[b-gfk67b13uw] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.rp-vd-stats[b-gfk67b13uw] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.rp-stat-card[b-gfk67b13uw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-stat-card:hover[b-gfk67b13uw] {
    border-color: var(--color-border-secondary);
}

.rp-stat-label[b-gfk67b13uw] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.rp-stat-value[b-gfk67b13uw] {
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Stat color accents */
.rp-stat-success .rp-stat-value[b-gfk67b13uw] { color: var(--color-success); }
.rp-stat-info .rp-stat-value[b-gfk67b13uw]    { color: var(--color-primary); }
.rp-stat-muted .rp-stat-value[b-gfk67b13uw]   { color: var(--color-text-muted); }

/* ==========================================================================
   BREAKDOWN GRID (by validator, by line, by vehicle)
   ========================================================================== */
.rp-breakdown-grid[b-gfk67b13uw] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.rp-breakdown-item[b-gfk67b13uw] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 13px;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-breakdown-item:hover[b-gfk67b13uw] {
    border-color: var(--color-border-secondary);
}

.rp-breakdown-label[b-gfk67b13uw] {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.rp-breakdown-value[b-gfk67b13uw] {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   BADGES (success/error status in table)
   ========================================================================== */
.rp-badge[b-gfk67b13uw] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.rp-badge-success[b-gfk67b13uw] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.rp-badge-error[b-gfk67b13uw] {
    background: var(--color-error-light);
    color: var(--color-error);
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.rp-pagination[b-gfk67b13uw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-primary);
}

[b-gfk67b13uw] .rp-page-btn {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rp-page-info[b-gfk67b13uw] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   SECTION TITLE (invoices sub-sections, breakdown headers)
   ========================================================================== */
.rp-section-title[b-gfk67b13uw] {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3) 0;
}

.rp-section-title-spaced[b-gfk67b13uw] {
    margin-top: var(--space-6);
}

/* ==========================================================================
   RESPONSIVE — Tablet (1023.98px)
   ========================================================================== */
@media (max-width: 1023.98px) {
    .rp-grid[b-gfk67b13uw] {
        grid-template-columns: 1fr;
    }

    .rp-vd-stats[b-gfk67b13uw] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   RESPONSIVE — Mobile (767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {
    .rp-card[b-gfk67b13uw] {
        border-radius: var(--radius-xl);
    }

    .rp-card-header[b-gfk67b13uw] {
        padding: var(--space-5) var(--space-5) 0 var(--space-5);
    }

    .rp-card-body[b-gfk67b13uw] {
        padding: var(--space-5);
    }

    .rp-card-icon[b-gfk67b13uw] {
        width: 40px;
        height: 40px;
    }

    .rp-card-title[b-gfk67b13uw] {
        font-size: 16px;
    }

    .rp-filters[b-gfk67b13uw] {
        flex-direction: column;
        align-items: stretch;
    }

    .rp-filter-field[b-gfk67b13uw] {
        min-width: 100%;
    }

    [b-gfk67b13uw] .rp-refresh-btn {
        width: 100%;
    }

    .rp-export-btn[b-gfk67b13uw] {
        width: 100%;
    }

    .rp-stat-grid[b-gfk67b13uw] {
        grid-template-columns: repeat(2, 1fr);
    }

    .rp-vd-stats[b-gfk67b13uw] {
        grid-template-columns: 1fr 1fr;
    }

    .rp-skeleton-header[b-gfk67b13uw] {
        padding: var(--space-5) var(--space-5) 0 var(--space-5);
    }

    .rp-skeleton-body[b-gfk67b13uw] {
        padding: var(--space-5);
    }
}

/* ==========================================================================
   RESPONSIVE — Small Mobile (479.98px)
   ========================================================================== */
@media (max-width: 479.98px) {
    .rp-grid[b-gfk67b13uw] {
        gap: var(--space-5);
    }

    .rp-column[b-gfk67b13uw] {
        gap: var(--space-5);
    }

    .rp-card[b-gfk67b13uw] {
        border-radius: var(--radius-lg);
    }

    .rp-card-header[b-gfk67b13uw] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-4) 0 var(--space-4);
    }

    .rp-card-body[b-gfk67b13uw] {
        padding: var(--space-4);
    }

    .rp-card-icon[b-gfk67b13uw] {
        width: 38px;
        height: 38px;
        border-radius: var(--radius-md);
    }

    .rp-card-title[b-gfk67b13uw] {
        font-size: 15px;
    }

    .rp-filter-input[b-gfk67b13uw] {
        height: 48px;
        font-size: 16px;
    }

    [b-gfk67b13uw] .rp-refresh-btn {
        height: 48px;
    }

    .rp-stat-grid[b-gfk67b13uw] {
        grid-template-columns: 1fr;
    }

    .rp-vd-stats[b-gfk67b13uw] {
        grid-template-columns: 1fr;
    }

    .rp-table thead th[b-gfk67b13uw],
    .rp-table tbody td[b-gfk67b13uw] {
        padding: 10px var(--space-3);
        font-size: 13px;
    }

    .rp-table thead th[b-gfk67b13uw] {
        font-size: 10px;
    }

    .rp-breakdown-grid[b-gfk67b13uw] {
        flex-direction: column;
    }
}

/* ==========================================================================
   FOCUS & ACCESSIBILITY
   ========================================================================== */
.rp-filter-input:focus-visible[b-gfk67b13uw] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.rp-export-btn:focus-visible[b-gfk67b13uw] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .rp-card[b-gfk67b13uw],
    .rp-skeleton[b-gfk67b13uw] {
        animation: none;
    }

    .rp-card[b-gfk67b13uw],
    .rp-filter-input[b-gfk67b13uw],
    .rp-table tbody tr[b-gfk67b13uw],
    .rp-summary-item[b-gfk67b13uw],
    .rp-stat-card[b-gfk67b13uw],
    .rp-export-btn[b-gfk67b13uw],
    .rp-breakdown-item[b-gfk67b13uw] {
        transition: none;
    }

    .rp-card:hover[b-gfk67b13uw] {
        transform: none;
    }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .rp-filters[b-gfk67b13uw],
    [b-gfk67b13uw] .rp-refresh-btn,
    .rp-export-btn[b-gfk67b13uw],
    .rp-pagination[b-gfk67b13uw] {
        display: none;
    }

    .rp-card[b-gfk67b13uw] {
        break-inside: avoid;
        box-shadow: none;
        background: var(--color-bg-primary);
        border: 1px solid #ddd;
    }
}
/* /Components/Pages/Admin/Reports/ReportValidationDetailed.razor.rz.scp.css */
/* ========================================
   ADMIN REPORTS — 2026 Design System
   Matches AdminTrackingEmulator card style:
   Icon circles, title+subtitle headers, 48px inputs,
   card hover elevation, staggered rise animation.
   rp-* prefix for scoped isolation.
   ======================================== */

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes rise-b-l6xf38p3pm {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-shimmer-b-l6xf38p3pm {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   ALERTS
   ========================================================================== */
.admin-container[b-l6xf38p3pm] >  .app-alert {
    margin-bottom: var(--space-5);
}

/* ==========================================================================
   SKELETON LOADING STATE
   ========================================================================== */
.rp-skeleton-card[b-l6xf38p3pm] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.rp-skeleton-header[b-l6xf38p3pm] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) 0 var(--space-6);
}

.rp-skeleton-header-text[b-l6xf38p3pm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rp-skeleton-icon[b-l6xf38p3pm] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.rp-skeleton-title[b-l6xf38p3pm] {
    height: 22px;
    width: 55%;
    border-radius: var(--radius-sm);
}

.rp-skeleton-subtitle[b-l6xf38p3pm] {
    height: 16px;
    width: 75%;
    border-radius: var(--radius-sm);
}

.rp-skeleton-body[b-l6xf38p3pm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
}

.rp-skeleton-filter[b-l6xf38p3pm] {
    height: 48px;
    border-radius: var(--radius-md);
}

.rp-skeleton-table[b-l6xf38p3pm] {
    height: 100px;
    border-radius: var(--radius-md);
}

.rp-skeleton[b-l6xf38p3pm] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 37%, var(--color-bg-tertiary) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer-b-l6xf38p3pm 1.8s ease infinite;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   CARD — Solid surface with hover elevation
   ========================================================================== */
.rp-card[b-l6xf38p3pm] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: visible;
    box-shadow: var(--shadow-sm);
    position: relative;
    animation: rise-b-l6xf38p3pm .45s cubic-bezier(.4, 0, .2, 1) both;
    transition: box-shadow 200ms cubic-bezier(.4, 0, .2, 1), transform 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-card:hover[b-l6xf38p3pm] {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* ==========================================================================
   CARD HEADER — Icon circle + title + subtitle
   ========================================================================== */
.rp-card-header[b-l6xf38p3pm] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) 0 var(--space-6);
}

.rp-card-icon[b-l6xf38p3pm] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Icon color variant */
.rp-icon-validation[b-l6xf38p3pm] { background: var(--color-success-light); color: var(--color-success); }

.rp-card-header-text[b-l6xf38p3pm] {
    flex: 1;
    min-width: 0;
}

.rp-card-title[b-l6xf38p3pm] {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1) 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.rp-card-subtitle[b-l6xf38p3pm] {
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* ==========================================================================
   CARD BODY
   ========================================================================== */
.rp-card-body[b-l6xf38p3pm] {
    padding: var(--space-6);
}

/* ==========================================================================
   FILTERS — Date inputs + refresh button row
   ========================================================================== */
.rp-filters[b-l6xf38p3pm] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border-primary);
}

.rp-filters-wrap[b-l6xf38p3pm] {
    /* Ensure filter row wraps nicely for the detailed card with many filters */
}

.rp-filter-field[b-l6xf38p3pm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
    min-width: 140px;
}

.rp-filter-label[b-l6xf38p3pm] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 16px;
    height: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0;
    display: block;
}

.rp-filter-input[b-l6xf38p3pm],
.rp-filter-input[type="date"][b-l6xf38p3pm] {
    height: 48px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    padding: 0 var(--space-4);
    font-size: 15px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    width: 100%;
    box-sizing: border-box;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

select.rp-filter-input[b-l6xf38p3pm] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.rp-filter-input:hover[b-l6xf38p3pm] {
    border-color: var(--color-border-secondary);
}

.rp-filter-input:focus[b-l6xf38p3pm] {
    outline: none;
    border: 1px solid var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.rp-filter-input[type="date"][b-l6xf38p3pm]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 200ms;
}

.rp-filter-input[type="date"][b-l6xf38p3pm]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Refresh button */
[b-l6xf38p3pm] .rp-refresh-btn {
    min-width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ==========================================================================
   EXPORT BUTTONS — Small icon buttons next to refresh
   ========================================================================== */
.rp-export-btn[b-l6xf38p3pm] {
    width: 40px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    padding: 0;
}

.rp-export-btn:hover[b-l6xf38p3pm] {
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
}

.rp-export-btn:active[b-l6xf38p3pm] {
    transform: scale(0.95);
}

.rp-export-xlsx:hover[b-l6xf38p3pm] {
    border-color: #16A34A;
    color: #16A34A;
    background: #F0FDF4;
}

.rp-export-pdf:hover[b-l6xf38p3pm] {
    border-color: var(--color-error);
    color: var(--color-error);
    background: var(--color-error-light);
}

/* ==========================================================================
   TABLE
   ========================================================================== */
.rp-table-wrap[b-l6xf38p3pm] {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
}

.rp-table[b-l6xf38p3pm] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.rp-table thead th[b-l6xf38p3pm] {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-primary);
    white-space: nowrap;
}

.rp-table tbody td[b-l6xf38p3pm] {
    padding: 14px var(--space-4);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-normal);
    border-bottom: 1px solid var(--color-border-primary);
}

.rp-table tbody tr:last-child td[b-l6xf38p3pm] {
    border-bottom: none;
}

.rp-table tbody tr[b-l6xf38p3pm] {
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-table tbody tr:hover[b-l6xf38p3pm] {
    background: var(--color-bg-secondary);
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.rp-empty[b-l6xf38p3pm] {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    font-size: 14px;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   STAT CARDS GRID (detailed validation summary)
   ========================================================================== */
.rp-vd-stats[b-l6xf38p3pm] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.rp-stat-card[b-l6xf38p3pm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-stat-card:hover[b-l6xf38p3pm] {
    border-color: var(--color-border-secondary);
}

.rp-stat-label[b-l6xf38p3pm] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.rp-stat-value[b-l6xf38p3pm] {
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Stat color accents */
.rp-stat-success .rp-stat-value[b-l6xf38p3pm] { color: var(--color-success); }
.rp-stat-info .rp-stat-value[b-l6xf38p3pm]    { color: var(--color-primary); }
.rp-stat-muted .rp-stat-value[b-l6xf38p3pm]   { color: var(--color-text-muted); }

/* ==========================================================================
   BREAKDOWN GRID (by validator, by line, by vehicle)
   ========================================================================== */
.rp-breakdown-grid[b-l6xf38p3pm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.rp-breakdown-item[b-l6xf38p3pm] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 13px;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-breakdown-item:hover[b-l6xf38p3pm] {
    border-color: var(--color-border-secondary);
}

.rp-breakdown-label[b-l6xf38p3pm] {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.rp-breakdown-value[b-l6xf38p3pm] {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   BADGES (success/error status in table)
   ========================================================================== */
.rp-badge[b-l6xf38p3pm] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.rp-badge-success[b-l6xf38p3pm] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.rp-badge-error[b-l6xf38p3pm] {
    background: var(--color-error-light);
    color: var(--color-error);
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.rp-pagination[b-l6xf38p3pm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-primary);
}

[b-l6xf38p3pm] .rp-page-btn {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rp-page-info[b-l6xf38p3pm] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   SECTION TITLE (breakdown headers)
   ========================================================================== */
.rp-section-title[b-l6xf38p3pm] {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3) 0;
}

.rp-section-title-spaced[b-l6xf38p3pm] {
    margin-top: var(--space-6);
}

/* ==========================================================================
   RESPONSIVE — Tablet (1023.98px)
   ========================================================================== */
@media (max-width: 1023.98px) {
    .rp-vd-stats[b-l6xf38p3pm] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   RESPONSIVE — Mobile (767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {
    .rp-card[b-l6xf38p3pm] {
        border-radius: var(--radius-xl);
    }

    .rp-card-header[b-l6xf38p3pm] {
        padding: var(--space-5) var(--space-5) 0 var(--space-5);
    }

    .rp-card-body[b-l6xf38p3pm] {
        padding: var(--space-5);
    }

    .rp-card-icon[b-l6xf38p3pm] {
        width: 40px;
        height: 40px;
    }

    .rp-card-title[b-l6xf38p3pm] {
        font-size: 16px;
    }

    .rp-filters[b-l6xf38p3pm] {
        flex-direction: column;
        align-items: stretch;
    }

    .rp-filter-field[b-l6xf38p3pm] {
        min-width: 100%;
    }

    [b-l6xf38p3pm] .rp-refresh-btn {
        width: 100%;
    }

    .rp-export-btn[b-l6xf38p3pm] {
        width: 100%;
    }

    .rp-vd-stats[b-l6xf38p3pm] {
        grid-template-columns: 1fr 1fr;
    }

    .rp-skeleton-header[b-l6xf38p3pm] {
        padding: var(--space-5) var(--space-5) 0 var(--space-5);
    }

    .rp-skeleton-body[b-l6xf38p3pm] {
        padding: var(--space-5);
    }
}

/* ==========================================================================
   RESPONSIVE — Small Mobile (479.98px)
   ========================================================================== */
@media (max-width: 479.98px) {
    .rp-card[b-l6xf38p3pm] {
        border-radius: var(--radius-lg);
    }

    .rp-card-header[b-l6xf38p3pm] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-4) 0 var(--space-4);
    }

    .rp-card-body[b-l6xf38p3pm] {
        padding: var(--space-4);
    }

    .rp-card-icon[b-l6xf38p3pm] {
        width: 38px;
        height: 38px;
        border-radius: var(--radius-md);
    }

    .rp-card-title[b-l6xf38p3pm] {
        font-size: 15px;
    }

    .rp-filter-input[b-l6xf38p3pm] {
        height: 48px;
        font-size: 16px;
    }

    [b-l6xf38p3pm] .rp-refresh-btn {
        height: 48px;
    }

    .rp-vd-stats[b-l6xf38p3pm] {
        grid-template-columns: 1fr;
    }

    .rp-table thead th[b-l6xf38p3pm],
    .rp-table tbody td[b-l6xf38p3pm] {
        padding: 10px var(--space-3);
        font-size: 13px;
    }

    .rp-table thead th[b-l6xf38p3pm] {
        font-size: 10px;
    }

    .rp-breakdown-grid[b-l6xf38p3pm] {
        flex-direction: column;
    }
}

/* ==========================================================================
   FOCUS & ACCESSIBILITY
   ========================================================================== */
.rp-filter-input:focus-visible[b-l6xf38p3pm] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.rp-export-btn:focus-visible[b-l6xf38p3pm] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .rp-card[b-l6xf38p3pm],
    .rp-skeleton[b-l6xf38p3pm] {
        animation: none;
    }

    .rp-card[b-l6xf38p3pm],
    .rp-filter-input[b-l6xf38p3pm],
    .rp-table tbody tr[b-l6xf38p3pm],
    .rp-stat-card[b-l6xf38p3pm],
    .rp-export-btn[b-l6xf38p3pm],
    .rp-breakdown-item[b-l6xf38p3pm] {
        transition: none;
    }

    .rp-card:hover[b-l6xf38p3pm] {
        transform: none;
    }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .rp-filters[b-l6xf38p3pm],
    [b-l6xf38p3pm] .rp-refresh-btn,
    .rp-export-btn[b-l6xf38p3pm],
    .rp-pagination[b-l6xf38p3pm] {
        display: none;
    }

    .rp-card[b-l6xf38p3pm] {
        break-inside: avoid;
        box-shadow: none;
        background: var(--color-bg-primary);
        border: 1px solid #ddd;
    }
}
/* /Components/Pages/Admin/Reports/ReportVehicles.razor.rz.scp.css */
/* ========================================
   ADMIN REPORTS — 2026 Design System
   Matches AdminTrackingEmulator card style:
   Icon circles, title+subtitle headers, 48px inputs,
   card hover elevation, staggered rise animation.
   rp-* prefix for scoped isolation.
   ======================================== */

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes rise-b-bcap6sf90l {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-shimmer-b-bcap6sf90l {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   ALERTS
   ========================================================================== */
.admin-container[b-bcap6sf90l] >  .app-alert {
    margin-bottom: var(--space-5);
}

/* ==========================================================================
   GRID LAYOUT — Two columns on desktop
   ========================================================================== */
.rp-grid[b-bcap6sf90l] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: start;
}

.rp-column[b-bcap6sf90l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ==========================================================================
   SKELETON LOADING STATE
   ========================================================================== */
.rp-skeleton-card[b-bcap6sf90l] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.rp-skeleton-header[b-bcap6sf90l] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) 0 var(--space-6);
}

.rp-skeleton-header-text[b-bcap6sf90l] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rp-skeleton-icon[b-bcap6sf90l] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.rp-skeleton-title[b-bcap6sf90l] {
    height: 22px;
    width: 55%;
    border-radius: var(--radius-sm);
}

.rp-skeleton-subtitle[b-bcap6sf90l] {
    height: 16px;
    width: 75%;
    border-radius: var(--radius-sm);
}

.rp-skeleton-body[b-bcap6sf90l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
}

.rp-skeleton-filter[b-bcap6sf90l] {
    height: 48px;
    border-radius: var(--radius-md);
}

.rp-skeleton-table[b-bcap6sf90l] {
    height: 100px;
    border-radius: var(--radius-md);
}

.rp-skeleton[b-bcap6sf90l] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 37%, var(--color-bg-tertiary) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer-b-bcap6sf90l 1.8s ease infinite;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   CARD — Solid surface with hover elevation
   ========================================================================== */
.rp-card[b-bcap6sf90l] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: visible;
    box-shadow: var(--shadow-sm);
    position: relative;
    animation: rise-b-bcap6sf90l .45s cubic-bezier(.4, 0, .2, 1) both;
    transition: box-shadow 200ms cubic-bezier(.4, 0, .2, 1), transform 200ms cubic-bezier(.4, 0, .2, 1);
}

/* Staggered animation delays per column */
.rp-column:first-child .rp-card:nth-child(1)[b-bcap6sf90l] { animation-delay: 0s; }
.rp-column:first-child .rp-card:nth-child(2)[b-bcap6sf90l] { animation-delay: 0.06s; }
.rp-column:first-child .rp-card:nth-child(3)[b-bcap6sf90l] { animation-delay: 0.12s; }
.rp-column:first-child .rp-card:nth-child(4)[b-bcap6sf90l] { animation-delay: 0.18s; }
.rp-column:first-child .rp-card:nth-child(5)[b-bcap6sf90l] { animation-delay: 0.24s; }
.rp-column:last-child .rp-card:nth-child(1)[b-bcap6sf90l] { animation-delay: 0.03s; }
.rp-column:last-child .rp-card:nth-child(2)[b-bcap6sf90l] { animation-delay: 0.09s; }
.rp-column:last-child .rp-card:nth-child(3)[b-bcap6sf90l] { animation-delay: 0.15s; }
.rp-column:last-child .rp-card:nth-child(4)[b-bcap6sf90l] { animation-delay: 0.21s; }
.rp-column:last-child .rp-card:nth-child(5)[b-bcap6sf90l] { animation-delay: 0.27s; }
.rp-column:last-child .rp-card:nth-child(6)[b-bcap6sf90l] { animation-delay: 0.33s; }

.rp-card:hover[b-bcap6sf90l] {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.rp-card-full[b-bcap6sf90l] {
    /* For full-width cards if needed in future; currently unused in 2-col layout */
}

/* Detailed validation card — full width below grid */
.rp-card-detailed[b-bcap6sf90l] {
    margin-top: var(--space-6);
    animation-delay: 0.36s;
}

/* ==========================================================================
   CARD HEADER — Icon circle + title + subtitle
   ========================================================================== */
.rp-card-header[b-bcap6sf90l] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) 0 var(--space-6);
}

.rp-card-icon[b-bcap6sf90l] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Icon color variants */
.rp-icon-sales[b-bcap6sf90l]       { background: var(--color-primary-light); color: var(--color-primary); }
.rp-icon-validation[b-bcap6sf90l]  { background: var(--color-success-light); color: var(--color-success); }
.rp-icon-payments[b-bcap6sf90l]    { background: #F0FDF4; color: #16A34A; }
.rp-icon-revenue[b-bcap6sf90l]     { background: var(--color-warning-light); color: var(--color-warning); }
.rp-icon-tickets[b-bcap6sf90l]     { background: #EEF2FF; color: #4F46E5; }
.rp-icon-wallet[b-bcap6sf90l]      { background: #FFF1F2; color: #E11D48; }
.rp-icon-invoices[b-bcap6sf90l]    { background: var(--color-error-light); color: var(--color-error); }
.rp-icon-documents[b-bcap6sf90l]   { background: #F3E8FF; color: #9333EA; }
.rp-icon-activity[b-bcap6sf90l]    { background: #FFF7ED; color: #EA580C; }
.rp-icon-disruptions[b-bcap6sf90l] { background: var(--color-error-light); color: var(--color-error); }
.rp-icon-vehicles[b-bcap6sf90l]   { background: #EEF2FF; color: #4F46E5; }

.rp-card-header-text[b-bcap6sf90l] {
    flex: 1;
    min-width: 0;
}

.rp-card-title[b-bcap6sf90l] {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1) 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.rp-card-subtitle[b-bcap6sf90l] {
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* ==========================================================================
   CARD BODY
   ========================================================================== */
.rp-card-body[b-bcap6sf90l] {
    padding: var(--space-6);
}

/* ==========================================================================
   FILTERS — Date inputs + refresh button row
   ========================================================================== */
.rp-filters[b-bcap6sf90l] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border-primary);
}

.rp-filters-wrap[b-bcap6sf90l] {
    /* Ensure filter row wraps nicely for the detailed card with many filters */
}

.rp-filter-field[b-bcap6sf90l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
    min-width: 140px;
}

.rp-filter-label[b-bcap6sf90l] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 16px;
    height: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0;
    display: block;
}

.rp-filter-input[b-bcap6sf90l],
.rp-filter-input[type="date"][b-bcap6sf90l] {
    height: 48px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    padding: 0 var(--space-4);
    font-size: 15px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    width: 100%;
    box-sizing: border-box;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

select.rp-filter-input[b-bcap6sf90l] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.rp-filter-input:hover[b-bcap6sf90l] {
    border-color: var(--color-border-secondary);
}

.rp-filter-input:focus[b-bcap6sf90l] {
    outline: none;
    border: 1px solid var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.rp-filter-input[type="date"][b-bcap6sf90l]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 200ms;
}

.rp-filter-input[type="date"][b-bcap6sf90l]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Refresh button */
[b-bcap6sf90l] .rp-refresh-btn {
    min-width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ==========================================================================
   EXPORT BUTTONS — Small icon buttons next to refresh
   ========================================================================== */
.rp-export-btn[b-bcap6sf90l] {
    width: 40px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    padding: 0;
}

.rp-export-btn:hover[b-bcap6sf90l] {
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
}

.rp-export-btn:active[b-bcap6sf90l] {
    transform: scale(0.95);
}

.rp-export-xlsx:hover[b-bcap6sf90l] {
    border-color: #16A34A;
    color: #16A34A;
    background: #F0FDF4;
}

.rp-export-pdf:hover[b-bcap6sf90l] {
    border-color: var(--color-error);
    color: var(--color-error);
    background: var(--color-error-light);
}

/* ==========================================================================
   TABLE
   ========================================================================== */
.rp-table-wrap[b-bcap6sf90l] {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
}

.rp-table[b-bcap6sf90l] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.rp-table thead th[b-bcap6sf90l] {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-primary);
    white-space: nowrap;
}

.rp-table tbody td[b-bcap6sf90l] {
    padding: 14px var(--space-4);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-normal);
    border-bottom: 1px solid var(--color-border-primary);
}

.rp-table tbody tr:last-child td[b-bcap6sf90l] {
    border-bottom: none;
}

.rp-table tbody tr[b-bcap6sf90l] {
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-table tbody tr:hover[b-bcap6sf90l] {
    background: var(--color-bg-secondary);
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.rp-empty[b-bcap6sf90l] {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    font-size: 14px;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   SUMMARY LIST (ticket summary)
   ========================================================================== */
.rp-summary-list[b-bcap6sf90l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.rp-summary-item[b-bcap6sf90l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-summary-item:hover[b-bcap6sf90l] {
    border-color: var(--color-border-secondary);
}

.rp-summary-label[b-bcap6sf90l] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.rp-summary-value[b-bcap6sf90l] {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Colored summary values */
.rp-val-success[b-bcap6sf90l] { color: var(--color-success); }
.rp-val-warning[b-bcap6sf90l] { color: var(--color-warning); }
.rp-val-danger[b-bcap6sf90l]  { color: var(--color-error); }

/* ==========================================================================
   STAT CARDS GRID (disruptions, detailed validation summary)
   ========================================================================== */
.rp-stat-grid[b-bcap6sf90l] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.rp-vd-stats[b-bcap6sf90l] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.rp-stat-card[b-bcap6sf90l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-stat-card:hover[b-bcap6sf90l] {
    border-color: var(--color-border-secondary);
}

.rp-stat-label[b-bcap6sf90l] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.rp-stat-value[b-bcap6sf90l] {
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Stat color accents */
.rp-stat-success .rp-stat-value[b-bcap6sf90l] { color: var(--color-success); }
.rp-stat-info .rp-stat-value[b-bcap6sf90l]    { color: var(--color-primary); }
.rp-stat-muted .rp-stat-value[b-bcap6sf90l]   { color: var(--color-text-muted); }

/* ==========================================================================
   BREAKDOWN GRID (by validator, by line, by vehicle)
   ========================================================================== */
.rp-breakdown-grid[b-bcap6sf90l] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.rp-breakdown-item[b-bcap6sf90l] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 13px;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-breakdown-item:hover[b-bcap6sf90l] {
    border-color: var(--color-border-secondary);
}

.rp-breakdown-label[b-bcap6sf90l] {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.rp-breakdown-value[b-bcap6sf90l] {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   BADGES (success/error status in table)
   ========================================================================== */
.rp-badge[b-bcap6sf90l] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.rp-badge-success[b-bcap6sf90l] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.rp-badge-error[b-bcap6sf90l] {
    background: var(--color-error-light);
    color: var(--color-error);
}

.rp-badge-warning[b-bcap6sf90l] {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.rp-badge-upcoming[b-bcap6sf90l] {
    background: #EEF2FF;
    color: #4F46E5;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.rp-pagination[b-bcap6sf90l] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-primary);
}

[b-bcap6sf90l] .rp-page-btn {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rp-page-info[b-bcap6sf90l] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   SUMMARY ALERTS (vehicle expiry warnings)
   ========================================================================== */
.rp-summary-alerts[b-bcap6sf90l] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-error-light);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-lg);
}

/* ==========================================================================
   LICENSE PLATE BADGE
   ========================================================================== */
.rp-license-plate[b-bcap6sf90l] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-primary);
    white-space: nowrap;
}

/* ==========================================================================
   SEARCH INPUT
   ========================================================================== */
.rp-search-input[b-bcap6sf90l] {
    height: 48px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    padding: 0 var(--space-4);
    font-size: 15px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-search-input:hover[b-bcap6sf90l] {
    border-color: var(--color-border-secondary);
}

.rp-search-input:focus[b-bcap6sf90l] {
    outline: none;
    border: 1px solid var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.rp-search-input[b-bcap6sf90l]::placeholder {
    color: var(--color-text-muted);
}

/* ==========================================================================
   SECTION TITLE (invoices sub-sections, breakdown headers)
   ========================================================================== */
.rp-section-title[b-bcap6sf90l] {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3) 0;
}

.rp-section-title-spaced[b-bcap6sf90l] {
    margin-top: var(--space-6);
}

/* ==========================================================================
   RESPONSIVE — Tablet (1023.98px)
   ========================================================================== */
@media (max-width: 1023.98px) {
    .rp-grid[b-bcap6sf90l] {
        grid-template-columns: 1fr;
    }

    .rp-vd-stats[b-bcap6sf90l] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   RESPONSIVE — Mobile (767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {
    .rp-card[b-bcap6sf90l] {
        border-radius: var(--radius-xl);
    }

    .rp-card-header[b-bcap6sf90l] {
        padding: var(--space-5) var(--space-5) 0 var(--space-5);
    }

    .rp-card-body[b-bcap6sf90l] {
        padding: var(--space-5);
    }

    .rp-card-icon[b-bcap6sf90l] {
        width: 40px;
        height: 40px;
    }

    .rp-card-title[b-bcap6sf90l] {
        font-size: 16px;
    }

    .rp-filters[b-bcap6sf90l] {
        flex-direction: column;
        align-items: stretch;
    }

    .rp-filter-field[b-bcap6sf90l] {
        min-width: 100%;
    }

    [b-bcap6sf90l] .rp-refresh-btn {
        width: 100%;
    }

    .rp-export-btn[b-bcap6sf90l] {
        width: 100%;
    }

    .rp-stat-grid[b-bcap6sf90l] {
        grid-template-columns: repeat(2, 1fr);
    }

    .rp-vd-stats[b-bcap6sf90l] {
        grid-template-columns: 1fr 1fr;
    }

    .rp-skeleton-header[b-bcap6sf90l] {
        padding: var(--space-5) var(--space-5) 0 var(--space-5);
    }

    .rp-skeleton-body[b-bcap6sf90l] {
        padding: var(--space-5);
    }
}

/* ==========================================================================
   RESPONSIVE — Small Mobile (479.98px)
   ========================================================================== */
@media (max-width: 479.98px) {
    .rp-grid[b-bcap6sf90l] {
        gap: var(--space-5);
    }

    .rp-column[b-bcap6sf90l] {
        gap: var(--space-5);
    }

    .rp-card[b-bcap6sf90l] {
        border-radius: var(--radius-lg);
    }

    .rp-card-header[b-bcap6sf90l] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-4) 0 var(--space-4);
    }

    .rp-card-body[b-bcap6sf90l] {
        padding: var(--space-4);
    }

    .rp-card-icon[b-bcap6sf90l] {
        width: 38px;
        height: 38px;
        border-radius: var(--radius-md);
    }

    .rp-card-title[b-bcap6sf90l] {
        font-size: 15px;
    }

    .rp-filter-input[b-bcap6sf90l] {
        height: 48px;
        font-size: 16px;
    }

    [b-bcap6sf90l] .rp-refresh-btn {
        height: 48px;
    }

    .rp-stat-grid[b-bcap6sf90l] {
        grid-template-columns: 1fr;
    }

    .rp-vd-stats[b-bcap6sf90l] {
        grid-template-columns: 1fr;
    }

    .rp-table thead th[b-bcap6sf90l],
    .rp-table tbody td[b-bcap6sf90l] {
        padding: 10px var(--space-3);
        font-size: 13px;
    }

    .rp-table thead th[b-bcap6sf90l] {
        font-size: 10px;
    }

    .rp-breakdown-grid[b-bcap6sf90l] {
        flex-direction: column;
    }
}

/* ==========================================================================
   FOCUS & ACCESSIBILITY
   ========================================================================== */
.rp-filter-input:focus-visible[b-bcap6sf90l] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.rp-export-btn:focus-visible[b-bcap6sf90l] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .rp-card[b-bcap6sf90l],
    .rp-skeleton[b-bcap6sf90l] {
        animation: none;
    }

    .rp-card[b-bcap6sf90l],
    .rp-filter-input[b-bcap6sf90l],
    .rp-table tbody tr[b-bcap6sf90l],
    .rp-summary-item[b-bcap6sf90l],
    .rp-stat-card[b-bcap6sf90l],
    .rp-export-btn[b-bcap6sf90l],
    .rp-breakdown-item[b-bcap6sf90l] {
        transition: none;
    }

    .rp-card:hover[b-bcap6sf90l] {
        transform: none;
    }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .rp-filters[b-bcap6sf90l],
    [b-bcap6sf90l] .rp-refresh-btn,
    .rp-export-btn[b-bcap6sf90l],
    .rp-pagination[b-bcap6sf90l] {
        display: none;
    }

    .rp-card[b-bcap6sf90l] {
        break-inside: avoid;
        box-shadow: none;
        background: var(--color-bg-primary);
        border: 1px solid #ddd;
    }
}
/* /Components/Pages/Admin/Reports/ReportWallet.razor.rz.scp.css */
/* ========================================
   ADMIN REPORTS — 2026 Design System
   Matches AdminTrackingEmulator card style:
   Icon circles, title+subtitle headers, 48px inputs,
   card hover elevation, staggered rise animation.
   rp-* prefix for scoped isolation.
   ======================================== */

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes rise-b-r7hxuudub9 {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-shimmer-b-r7hxuudub9 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   ALERTS
   ========================================================================== */
.admin-container[b-r7hxuudub9] >  .app-alert {
    margin-bottom: var(--space-5);
}

/* ==========================================================================
   GRID LAYOUT — Two columns on desktop
   ========================================================================== */
.rp-grid[b-r7hxuudub9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: start;
}

.rp-column[b-r7hxuudub9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ==========================================================================
   SKELETON LOADING STATE
   ========================================================================== */
.rp-skeleton-card[b-r7hxuudub9] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.rp-skeleton-header[b-r7hxuudub9] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) 0 var(--space-6);
}

.rp-skeleton-header-text[b-r7hxuudub9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rp-skeleton-icon[b-r7hxuudub9] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.rp-skeleton-title[b-r7hxuudub9] {
    height: 22px;
    width: 55%;
    border-radius: var(--radius-sm);
}

.rp-skeleton-subtitle[b-r7hxuudub9] {
    height: 16px;
    width: 75%;
    border-radius: var(--radius-sm);
}

.rp-skeleton-body[b-r7hxuudub9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
}

.rp-skeleton-filter[b-r7hxuudub9] {
    height: 48px;
    border-radius: var(--radius-md);
}

.rp-skeleton-table[b-r7hxuudub9] {
    height: 100px;
    border-radius: var(--radius-md);
}

.rp-skeleton[b-r7hxuudub9] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 37%, var(--color-bg-tertiary) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer-b-r7hxuudub9 1.8s ease infinite;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   CARD — Solid surface with hover elevation
   ========================================================================== */
.rp-card[b-r7hxuudub9] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: visible;
    box-shadow: var(--shadow-sm);
    position: relative;
    animation: rise-b-r7hxuudub9 .45s cubic-bezier(.4, 0, .2, 1) both;
    transition: box-shadow 200ms cubic-bezier(.4, 0, .2, 1), transform 200ms cubic-bezier(.4, 0, .2, 1);
}

/* Staggered animation delays per column */
.rp-column:first-child .rp-card:nth-child(1)[b-r7hxuudub9] { animation-delay: 0s; }
.rp-column:first-child .rp-card:nth-child(2)[b-r7hxuudub9] { animation-delay: 0.06s; }
.rp-column:first-child .rp-card:nth-child(3)[b-r7hxuudub9] { animation-delay: 0.12s; }
.rp-column:first-child .rp-card:nth-child(4)[b-r7hxuudub9] { animation-delay: 0.18s; }
.rp-column:first-child .rp-card:nth-child(5)[b-r7hxuudub9] { animation-delay: 0.24s; }
.rp-column:last-child .rp-card:nth-child(1)[b-r7hxuudub9] { animation-delay: 0.03s; }
.rp-column:last-child .rp-card:nth-child(2)[b-r7hxuudub9] { animation-delay: 0.09s; }
.rp-column:last-child .rp-card:nth-child(3)[b-r7hxuudub9] { animation-delay: 0.15s; }
.rp-column:last-child .rp-card:nth-child(4)[b-r7hxuudub9] { animation-delay: 0.21s; }
.rp-column:last-child .rp-card:nth-child(5)[b-r7hxuudub9] { animation-delay: 0.27s; }
.rp-column:last-child .rp-card:nth-child(6)[b-r7hxuudub9] { animation-delay: 0.33s; }

.rp-card:hover[b-r7hxuudub9] {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.rp-card-full[b-r7hxuudub9] {
    /* For full-width cards if needed in future; currently unused in 2-col layout */
}

/* Detailed validation card — full width below grid */
.rp-card-detailed[b-r7hxuudub9] {
    margin-top: var(--space-6);
    animation-delay: 0.36s;
}

/* ==========================================================================
   CARD HEADER — Icon circle + title + subtitle
   ========================================================================== */
.rp-card-header[b-r7hxuudub9] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) 0 var(--space-6);
}

.rp-card-icon[b-r7hxuudub9] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Icon color variants */
.rp-icon-sales[b-r7hxuudub9]       { background: var(--color-primary-light); color: var(--color-primary); }
.rp-icon-validation[b-r7hxuudub9]  { background: var(--color-success-light); color: var(--color-success); }
.rp-icon-payments[b-r7hxuudub9]    { background: #F0FDF4; color: #16A34A; }
.rp-icon-revenue[b-r7hxuudub9]     { background: var(--color-warning-light); color: var(--color-warning); }
.rp-icon-tickets[b-r7hxuudub9]     { background: #EEF2FF; color: #4F46E5; }
.rp-icon-wallet[b-r7hxuudub9]      { background: #FFF1F2; color: #E11D48; }
.rp-icon-invoices[b-r7hxuudub9]    { background: var(--color-error-light); color: var(--color-error); }
.rp-icon-documents[b-r7hxuudub9]   { background: #F3E8FF; color: #9333EA; }
.rp-icon-activity[b-r7hxuudub9]    { background: #FFF7ED; color: #EA580C; }
.rp-icon-disruptions[b-r7hxuudub9] { background: var(--color-error-light); color: var(--color-error); }

.rp-card-header-text[b-r7hxuudub9] {
    flex: 1;
    min-width: 0;
}

.rp-card-title[b-r7hxuudub9] {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1) 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.rp-card-subtitle[b-r7hxuudub9] {
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* ==========================================================================
   CARD BODY
   ========================================================================== */
.rp-card-body[b-r7hxuudub9] {
    padding: var(--space-6);
}

/* ==========================================================================
   FILTERS — Date inputs + refresh button row
   ========================================================================== */
.rp-filters[b-r7hxuudub9] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border-primary);
}

.rp-filters-wrap[b-r7hxuudub9] {
    /* Ensure filter row wraps nicely for the detailed card with many filters */
}

.rp-filter-field[b-r7hxuudub9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
    min-width: 140px;
}

.rp-filter-label[b-r7hxuudub9] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 16px;
    height: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0;
    display: block;
}

.rp-filter-input[b-r7hxuudub9],
.rp-filter-input[type="date"][b-r7hxuudub9] {
    height: 48px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    padding: 0 var(--space-4);
    font-size: 15px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    width: 100%;
    box-sizing: border-box;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

select.rp-filter-input[b-r7hxuudub9] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.rp-filter-input:hover[b-r7hxuudub9] {
    border-color: var(--color-border-secondary);
}

.rp-filter-input:focus[b-r7hxuudub9] {
    outline: none;
    border: 1px solid var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.rp-filter-input[type="date"][b-r7hxuudub9]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 200ms;
}

.rp-filter-input[type="date"][b-r7hxuudub9]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Refresh button */
[b-r7hxuudub9] .rp-refresh-btn {
    min-width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ==========================================================================
   EXPORT BUTTONS — Small icon buttons next to refresh
   ========================================================================== */
.rp-export-btn[b-r7hxuudub9] {
    width: 40px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    padding: 0;
}

.rp-export-btn:hover[b-r7hxuudub9] {
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
}

.rp-export-btn:active[b-r7hxuudub9] {
    transform: scale(0.95);
}

.rp-export-xlsx:hover[b-r7hxuudub9] {
    border-color: #16A34A;
    color: #16A34A;
    background: #F0FDF4;
}

.rp-export-pdf:hover[b-r7hxuudub9] {
    border-color: var(--color-error);
    color: var(--color-error);
    background: var(--color-error-light);
}

/* ==========================================================================
   TABLE
   ========================================================================== */
.rp-table-wrap[b-r7hxuudub9] {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
}

.rp-table[b-r7hxuudub9] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.rp-table thead th[b-r7hxuudub9] {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-primary);
    white-space: nowrap;
}

.rp-table tbody td[b-r7hxuudub9] {
    padding: 14px var(--space-4);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-normal);
    border-bottom: 1px solid var(--color-border-primary);
}

.rp-table tbody tr:last-child td[b-r7hxuudub9] {
    border-bottom: none;
}

.rp-table tbody tr[b-r7hxuudub9] {
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-table tbody tr:hover[b-r7hxuudub9] {
    background: var(--color-bg-secondary);
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.rp-empty[b-r7hxuudub9] {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    font-size: 14px;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   SUMMARY LIST (ticket summary)
   ========================================================================== */
.rp-summary-list[b-r7hxuudub9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.rp-summary-item[b-r7hxuudub9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-summary-item:hover[b-r7hxuudub9] {
    border-color: var(--color-border-secondary);
}

.rp-summary-label[b-r7hxuudub9] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.rp-summary-value[b-r7hxuudub9] {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Colored summary values */
.rp-val-success[b-r7hxuudub9] { color: var(--color-success); }
.rp-val-warning[b-r7hxuudub9] { color: var(--color-warning); }
.rp-val-danger[b-r7hxuudub9]  { color: var(--color-error); }

/* ==========================================================================
   STAT CARDS GRID (disruptions, detailed validation summary)
   ========================================================================== */
.rp-stat-grid[b-r7hxuudub9] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.rp-vd-stats[b-r7hxuudub9] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.rp-stat-card[b-r7hxuudub9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-stat-card:hover[b-r7hxuudub9] {
    border-color: var(--color-border-secondary);
}

.rp-stat-label[b-r7hxuudub9] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.rp-stat-value[b-r7hxuudub9] {
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Stat color accents */
.rp-stat-success .rp-stat-value[b-r7hxuudub9] { color: var(--color-success); }
.rp-stat-info .rp-stat-value[b-r7hxuudub9]    { color: var(--color-primary); }
.rp-stat-muted .rp-stat-value[b-r7hxuudub9]   { color: var(--color-text-muted); }

/* ==========================================================================
   BREAKDOWN GRID (by validator, by line, by vehicle)
   ========================================================================== */
.rp-breakdown-grid[b-r7hxuudub9] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.rp-breakdown-item[b-r7hxuudub9] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 13px;
    transition: border-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.rp-breakdown-item:hover[b-r7hxuudub9] {
    border-color: var(--color-border-secondary);
}

.rp-breakdown-label[b-r7hxuudub9] {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.rp-breakdown-value[b-r7hxuudub9] {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   BADGES (success/error status in table)
   ========================================================================== */
.rp-badge[b-r7hxuudub9] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.rp-badge-success[b-r7hxuudub9] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.rp-badge-error[b-r7hxuudub9] {
    background: var(--color-error-light);
    color: var(--color-error);
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.rp-pagination[b-r7hxuudub9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-primary);
}

[b-r7hxuudub9] .rp-page-btn {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rp-page-info[b-r7hxuudub9] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   SECTION TITLE (invoices sub-sections, breakdown headers)
   ========================================================================== */
.rp-section-title[b-r7hxuudub9] {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3) 0;
}

.rp-section-title-spaced[b-r7hxuudub9] {
    margin-top: var(--space-6);
}

/* ==========================================================================
   RESPONSIVE — Tablet (1023.98px)
   ========================================================================== */
@media (max-width: 1023.98px) {
    .rp-grid[b-r7hxuudub9] {
        grid-template-columns: 1fr;
    }

    .rp-vd-stats[b-r7hxuudub9] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   RESPONSIVE — Mobile (767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {
    .rp-card[b-r7hxuudub9] {
        border-radius: var(--radius-xl);
    }

    .rp-card-header[b-r7hxuudub9] {
        padding: var(--space-5) var(--space-5) 0 var(--space-5);
    }

    .rp-card-body[b-r7hxuudub9] {
        padding: var(--space-5);
    }

    .rp-card-icon[b-r7hxuudub9] {
        width: 40px;
        height: 40px;
    }

    .rp-card-title[b-r7hxuudub9] {
        font-size: 16px;
    }

    .rp-filters[b-r7hxuudub9] {
        flex-direction: column;
        align-items: stretch;
    }

    .rp-filter-field[b-r7hxuudub9] {
        min-width: 100%;
    }

    [b-r7hxuudub9] .rp-refresh-btn {
        width: 100%;
    }

    .rp-export-btn[b-r7hxuudub9] {
        width: 100%;
    }

    .rp-stat-grid[b-r7hxuudub9] {
        grid-template-columns: repeat(2, 1fr);
    }

    .rp-vd-stats[b-r7hxuudub9] {
        grid-template-columns: 1fr 1fr;
    }

    .rp-skeleton-header[b-r7hxuudub9] {
        padding: var(--space-5) var(--space-5) 0 var(--space-5);
    }

    .rp-skeleton-body[b-r7hxuudub9] {
        padding: var(--space-5);
    }
}

/* ==========================================================================
   RESPONSIVE — Small Mobile (479.98px)
   ========================================================================== */
@media (max-width: 479.98px) {
    .rp-grid[b-r7hxuudub9] {
        gap: var(--space-5);
    }

    .rp-column[b-r7hxuudub9] {
        gap: var(--space-5);
    }

    .rp-card[b-r7hxuudub9] {
        border-radius: var(--radius-lg);
    }

    .rp-card-header[b-r7hxuudub9] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-4) 0 var(--space-4);
    }

    .rp-card-body[b-r7hxuudub9] {
        padding: var(--space-4);
    }

    .rp-card-icon[b-r7hxuudub9] {
        width: 38px;
        height: 38px;
        border-radius: var(--radius-md);
    }

    .rp-card-title[b-r7hxuudub9] {
        font-size: 15px;
    }

    .rp-filter-input[b-r7hxuudub9] {
        height: 48px;
        font-size: 16px;
    }

    [b-r7hxuudub9] .rp-refresh-btn {
        height: 48px;
    }

    .rp-stat-grid[b-r7hxuudub9] {
        grid-template-columns: 1fr;
    }

    .rp-vd-stats[b-r7hxuudub9] {
        grid-template-columns: 1fr;
    }

    .rp-table thead th[b-r7hxuudub9],
    .rp-table tbody td[b-r7hxuudub9] {
        padding: 10px var(--space-3);
        font-size: 13px;
    }

    .rp-table thead th[b-r7hxuudub9] {
        font-size: 10px;
    }

    .rp-breakdown-grid[b-r7hxuudub9] {
        flex-direction: column;
    }
}

/* ==========================================================================
   FOCUS & ACCESSIBILITY
   ========================================================================== */
.rp-filter-input:focus-visible[b-r7hxuudub9] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.rp-export-btn:focus-visible[b-r7hxuudub9] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .rp-card[b-r7hxuudub9],
    .rp-skeleton[b-r7hxuudub9] {
        animation: none;
    }

    .rp-card[b-r7hxuudub9],
    .rp-filter-input[b-r7hxuudub9],
    .rp-table tbody tr[b-r7hxuudub9],
    .rp-summary-item[b-r7hxuudub9],
    .rp-stat-card[b-r7hxuudub9],
    .rp-export-btn[b-r7hxuudub9],
    .rp-breakdown-item[b-r7hxuudub9] {
        transition: none;
    }

    .rp-card:hover[b-r7hxuudub9] {
        transform: none;
    }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .rp-filters[b-r7hxuudub9],
    [b-r7hxuudub9] .rp-refresh-btn,
    .rp-export-btn[b-r7hxuudub9],
    .rp-pagination[b-r7hxuudub9] {
        display: none;
    }

    .rp-card[b-r7hxuudub9] {
        break-inside: avoid;
        box-shadow: none;
        background: var(--color-bg-primary);
        border: 1px solid #ddd;
    }
}
/* /Components/Pages/Admin/StationsAdmin.razor.rz.scp.css */
/* ========================================
   STATIONS ADMIN — Premium 2026 Design
   Layered surfaces, micro-interactions,
   staggered animations, refined depth system
   ======================================== */

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes rise-b-xq25ksdn1j {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes riseRow-b-xq25ksdn1j {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shimmer-b-xq25ksdn1j {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes pulseGlow-b-xq25ksdn1j {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes accentSlide-b-xq25ksdn1j {
    from {
        transform: scaleX(0);
        transform-origin: left;
    }
    to {
        transform: scaleX(1);
        transform-origin: left;
    }
}

/* Override grid columns for 3-column layout */
[b-xq25ksdn1j] .admin-grid-cols-3 {
    --admin-grid-cols: 3;
}

/* ==========================================================================
   TABLE CARD — Premium layered surface with accent top
   ========================================================================== */
.admin-table-card[b-xq25ksdn1j] {
    position: relative;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    margin-top: var(--space-5);
    box-shadow: var(--shadow-float);
    animation: rise-b-xq25ksdn1j 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    overflow: hidden;
}

/* Gradient accent top line */
.admin-table-card[b-xq25ksdn1j]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent), var(--color-teal));
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    z-index: 1;
}

[b-xq25ksdn1j] .admin-table-container {
    margin-top: 0;
}

[b-xq25ksdn1j] .admin-table-header {
    background: var(--color-bg-secondary);
    margin-bottom: 0;
    padding: var(--space-3) 0;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border-primary);
}

[b-xq25ksdn1j] .admin-table-header-cell {
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

[b-xq25ksdn1j] .admin-table-rows {
    gap: 0;
}

[b-xq25ksdn1j] .admin-table-row {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    padding: 0 var(--space-3) 0 0;
    cursor: pointer;
    position: relative;
    transition: background 0.2s cubic-bezier(.4, 0, .2, 1),
                box-shadow 0.2s cubic-bezier(.4, 0, .2, 1);
    animation: riseRow-b-xq25ksdn1j 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Left accent indicator on hover */
[b-xq25ksdn1j] .admin-table-row::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--color-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    transition: height 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

[b-xq25ksdn1j] .admin-table-row:hover {
    background: var(--color-bg-secondary);
    box-shadow: inset 0 0 0 1px var(--color-border-light);
}

[b-xq25ksdn1j] .admin-table-row:hover::after {
    height: 60%;
}

[b-xq25ksdn1j] .admin-table-row:not(:last-child) {
    border-bottom: 1px solid var(--color-border-light);
}

/* Active/pressed state */
[b-xq25ksdn1j] .admin-table-row:active {
    background: var(--color-bg-tertiary);
}

/* ==========================================================================
   Filter Field Layout
   ========================================================================== */
[b-xq25ksdn1j] .filter-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

[b-xq25ksdn1j] .filter-field > svg:not(.filter-input-icon) {
    display: none;
}

[b-xq25ksdn1j] .filter-input-wrapper {
    position: relative;
    width: 100%;
}

[b-xq25ksdn1j] .filter-input-icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    width: var(--space-4);
    height: var(--space-4);
    color: var(--color-text-muted);
    pointer-events: none;
    transition: color 0.2s;
}

/* Focus state for search icon */
[b-xq25ksdn1j] .filter-input-wrapper:focus-within .filter-input-icon {
    color: var(--color-primary);
}

[b-xq25ksdn1j] .filter-input,
[b-xq25ksdn1j] input[type="text"].filter-input,
[b-xq25ksdn1j] .filter-input-wrapper input {
    height: 40px !important;
    box-sizing: border-box;
}

[b-xq25ksdn1j] .filter-field-label {
    min-height: var(--space-5);
    line-height: var(--space-5);
    display: block;
}

/* ==========================================================================
   Modern Dropdown - Zone filter
   ========================================================================== */
[b-xq25ksdn1j] .modern-dropdown {
    position: relative;
    width: 100%;
}

[b-xq25ksdn1j] .modern-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0 var(--space-3);
    height: 40px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.2s cubic-bezier(.4, 0, .2, 1),
                box-shadow 0.2s cubic-bezier(.4, 0, .2, 1),
                background 0.2s cubic-bezier(.4, 0, .2, 1);
    box-sizing: border-box;
}

[b-xq25ksdn1j] .modern-dropdown-trigger:hover {
    border-color: var(--color-border-secondary);
    background: var(--color-bg-secondary);
}

[b-xq25ksdn1j] .modern-dropdown.open .modern-dropdown-trigger {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
    background: var(--color-bg-primary);
}

[b-xq25ksdn1j] .modern-dropdown-icon {
    width: var(--space-4);
    height: var(--space-4);
    color: var(--color-text-secondary);
    flex-shrink: 0;
    transition: color 0.2s;
}

[b-xq25ksdn1j] .modern-dropdown.open .modern-dropdown-icon {
    color: var(--color-primary);
}

[b-xq25ksdn1j] .modern-dropdown-text {
    flex: 1;
    font-size: 14px;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-xq25ksdn1j] .modern-dropdown-chevron {
    width: 14px;
    height: 14px;
    color: var(--color-text-muted);
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.2s;
}

[b-xq25ksdn1j] .modern-dropdown.open .modern-dropdown-chevron {
    transform: rotate(180deg);
    color: var(--color-primary);
}

[b-xq25ksdn1j] .modern-dropdown-menu {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    max-height: 280px;
    overflow-y: auto;
    animation: rise-b-xq25ksdn1j 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
    padding: var(--space-1) 0;
}

/* Scrollbar for dropdown */
[b-xq25ksdn1j] .modern-dropdown-menu::-webkit-scrollbar {
    width: 5px;
}
[b-xq25ksdn1j] .modern-dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
}
[b-xq25ksdn1j] .modern-dropdown-menu::-webkit-scrollbar-thumb {
    background: var(--color-border-secondary);
    border-radius: var(--radius-full);
}

[b-xq25ksdn1j] .modern-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 0.15s cubic-bezier(.4, 0, .2, 1);
    border-radius: var(--radius-sm);
    margin: 1px var(--space-1);
}

[b-xq25ksdn1j] .modern-dropdown-item:hover {
    background-color: var(--color-bg-secondary);
}

[b-xq25ksdn1j] .modern-dropdown-item.selected {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

[b-xq25ksdn1j] .modern-dropdown-check {
    width: 14px;
    height: 14px;
    color: var(--color-primary);
    flex-shrink: 0;
}

/* ==========================================================================
   LOADING SKELETON STATE — Premium pulse wave
   ========================================================================== */
.admin-loading-state[b-xq25ksdn1j] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.admin-skeleton-row[b-xq25ksdn1j] {
    display: grid;
    grid-template-columns: 36px 1fr 72px 80px;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-primary);
    animation: rise-b-xq25ksdn1j 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.admin-skeleton-row:not(:last-child)[b-xq25ksdn1j] {
    border-bottom: 1px solid var(--color-border-light);
}

.admin-skeleton[b-xq25ksdn1j] {
    background: linear-gradient(
        90deg,
        var(--color-bg-tertiary) 0%,
        var(--color-border-primary) 20%,
        var(--color-bg-tertiary) 40%,
        var(--color-bg-tertiary) 100%
    );
    background-size: 400% 100%;
    animation: shimmer-b-xq25ksdn1j 1.6s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

.admin-skeleton-avatar[b-xq25ksdn1j] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
}

.admin-skeleton-badge[b-xq25ksdn1j] {
    width: 52px;
    height: 26px;
    border-radius: var(--radius-full);
}

.admin-skeleton-text[b-xq25ksdn1j] {
    width: 100%;
    max-width: 200px;
    height: 14px;
    border-radius: var(--radius-sm);
}

.admin-skeleton-text-sm[b-xq25ksdn1j] {
    width: 48px;
    height: 14px;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   Station Name Cell — With avatar icon
   ========================================================================== */
.station-name-cell[b-xq25ksdn1j] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.station-avatar[b-xq25ksdn1j] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: var(--color-primary-light);
    border: 1px solid rgba(26, 124, 202, 0.12);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

[b-xq25ksdn1j] .admin-table-row:hover .station-avatar {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
    transform: scale(1.05);
}

.station-name[b-xq25ksdn1j] {
    font-weight: var(--font-weight-semibold);
    font-size: 14px;
    color: var(--color-text-primary);
    display: block;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   Zone Badges — Refined pill design
   ========================================================================== */
[b-xq25ksdn1j] .admin-badge.admin-badge-info {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    color: var(--color-text-inverse);
    font-weight: var(--font-weight-bold);
    font-size: 11px;
    padding: 5px var(--space-3);
    border-radius: var(--radius-full);
    letter-spacing: 0.04em;
    min-width: 40px;
    text-align: center;
    display: inline-block;
    box-shadow: 0 2px 6px rgba(26, 124, 202, 0.2);
    transition: box-shadow 0.2s, transform 0.15s;
}

[b-xq25ksdn1j] .admin-table-row:hover .admin-badge.admin-badge-info {
    box-shadow: 0 3px 10px rgba(26, 124, 202, 0.3);
    transform: translateY(-1px);
}

[b-xq25ksdn1j] .admin-badge.admin-badge-success {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
    color: var(--color-text-inverse);
    font-weight: var(--font-weight-bold);
    font-size: 11px;
    padding: 5px var(--space-3);
    border-radius: var(--radius-full);
    letter-spacing: 0.04em;
    min-width: 40px;
    text-align: center;
    display: inline-block;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.2);
    transition: box-shadow 0.2s, transform 0.15s;
}

[b-xq25ksdn1j] .admin-table-row:hover .admin-badge.admin-badge-success {
    box-shadow: 0 3px 10px rgba(5, 150, 105, 0.3);
    transform: translateY(-1px);
}

[b-xq25ksdn1j] .admin-badge.admin-badge-warning {
    background: linear-gradient(135deg, var(--color-amber) 0%, var(--color-amber-dark) 100%);
    color: var(--color-text-inverse);
    font-weight: var(--font-weight-bold);
    font-size: 11px;
    padding: 5px var(--space-3);
    border-radius: var(--radius-full);
    letter-spacing: 0.04em;
    min-width: 40px;
    text-align: center;
    display: inline-block;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.2);
    transition: box-shadow 0.2s, transform 0.15s;
}

[b-xq25ksdn1j] .admin-table-row:hover .admin-badge.admin-badge-warning {
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.3);
    transform: translateY(-1px);
}

[b-xq25ksdn1j] .admin-badge.admin-badge-neutral {
    background: var(--color-bg-tertiary);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
    font-size: 11px;
    padding: 5px var(--space-3);
    border-radius: var(--radius-full);
    min-width: 40px;
    text-align: center;
    display: inline-block;
    border: 1px solid var(--color-border-primary);
    transition: background 0.2s, transform 0.15s;
}

[b-xq25ksdn1j] .admin-table-row:hover .admin-badge.admin-badge-neutral {
    background: var(--color-bg-secondary);
    transform: translateY(-1px);
}

/* ==========================================================================
   Waiting Points Count Cell
   ========================================================================== */
.wp-count-cell[b-xq25ksdn1j] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.wp-count-icon[b-xq25ksdn1j] {
    color: var(--color-text-light);
    flex-shrink: 0;
    transition: color 0.2s;
}

.wp-count-value[b-xq25ksdn1j] {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.wp-count-value.has-points[b-xq25ksdn1j] {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

[b-xq25ksdn1j] .admin-table-row:hover .wp-count-icon {
    color: var(--color-primary);
}

/* ==========================================================================
   Empty State — Premium centered layout
   ========================================================================== */
.admin-empty-state[b-xq25ksdn1j] {
    text-align: center;
    padding: var(--space-16) var(--space-8);
    animation: rise-b-xq25ksdn1j 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.admin-empty-state-icon-wrapper[b-xq25ksdn1j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-4);
}

.admin-empty-state-icon[b-xq25ksdn1j] {
    width: 32px;
    height: 32px;
    color: var(--color-text-light);
}

.admin-empty-state-title[b-xq25ksdn1j] {
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
    letter-spacing: var(--letter-spacing-tight);
}

.admin-empty-state-text[b-xq25ksdn1j] {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: var(--line-height-relaxed);
}

/* ==========================================================================
   Link Button
   ========================================================================== */
.admin-link-btn[b-xq25ksdn1j] {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
    text-underline-offset: 3px;
    transition: color 0.2s cubic-bezier(.4, 0, .2, 1);
}

.admin-link-btn:hover[b-xq25ksdn1j] {
    color: var(--color-primary-hover);
    text-decoration-thickness: 2px;
}

/* ==========================================================================
   Modal Form Structure — Premium layout
   ========================================================================== */
.stations-form-grid[b-xq25ksdn1j] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

@media (min-width: 576px) {
    .stations-form-grid[b-xq25ksdn1j] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.modal-delete-btn[b-xq25ksdn1j] {
    margin-right: auto;
}

/* ==========================================================================
   STATION MODAL — Form Fields
   ========================================================================== */
.station-form-fields[b-xq25ksdn1j] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}

@media (min-width: 576px) {
    .station-form-fields[b-xq25ksdn1j] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Modern dropdown inside modal — match the 44px input height */
.station-form-fields[b-xq25ksdn1j]  .modern-dropdown-trigger {
    height: 44px;
    border-radius: var(--radius-lg);
}

/* ==========================================================================
   STATION MODAL — Navigation Link (Waiting Points)
   ========================================================================== */
.station-nav-link[b-xq25ksdn1j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background 0.2s cubic-bezier(.4, 0, .2, 1),
                border-color 0.2s;
    user-select: none;
    margin-bottom: var(--space-5);
}

.station-nav-link:hover[b-xq25ksdn1j] {
    background: var(--color-bg-tertiary);
    border-color: var(--color-primary);
}

.station-nav-link:active[b-xq25ksdn1j] {
    background: var(--color-border-light);
}

.station-nav-link-left[b-xq25ksdn1j] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.station-nav-link-icon[b-xq25ksdn1j] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: var(--color-primary-light);
    border: 1px solid rgba(26, 124, 202, 0.12);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    transition: background 0.2s, transform 0.2s;
}

.station-nav-link:hover .station-nav-link-icon[b-xq25ksdn1j] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    transform: scale(1.05);
}

.station-nav-link-arrow[b-xq25ksdn1j] {
    color: var(--color-text-muted);
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s;
}

.station-nav-link:hover .station-nav-link-arrow[b-xq25ksdn1j] {
    transform: translateX(3px);
    color: var(--color-primary);
}

/* ==========================================================================
   STATION MODAL — Footer (Delete + Cancel/Save)
   ========================================================================== */
.station-modal-footer[b-xq25ksdn1j] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-primary);
}

.station-delete-btn[b-xq25ksdn1j] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font-family-base);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-error);
    transition: background 0.2s, color 0.15s;
    margin-right: auto;
}

.station-delete-btn:hover[b-xq25ksdn1j] {
    background: var(--color-error-light);
}

.station-delete-btn:active[b-xq25ksdn1j] {
    background: var(--color-error-border);
}

.station-delete-btn:focus-visible[b-xq25ksdn1j] {
    outline: 2px solid var(--color-error);
    outline-offset: 2px;
}

.station-modal-footer-right[b-xq25ksdn1j] {
    display: flex;
    gap: var(--space-3);
    margin-left: auto;
}

/* ==========================================================================
   Modal Error — Premium alert with icon
   ========================================================================== */
.admin-modal-error[b-xq25ksdn1j] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--color-error-light);
    border: 1px solid var(--color-error-border);
    border-left: 3px solid var(--color-error);
    border-radius: var(--radius-lg);
    color: var(--color-error);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-6);
    animation: rise-b-xq25ksdn1j 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
    line-height: var(--line-height-normal);
}

.admin-modal-error-icon[b-xq25ksdn1j] {
    flex-shrink: 0;
    margin-top: 1px;
    opacity: 0.8;
}

/* ==========================================================================
   Input Styles (scoped) — Premium inputs
   ========================================================================== */
[b-xq25ksdn1j] .admin-input-simple {
    width: 100%;
    height: 44px;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    transition: border-color 0.2s cubic-bezier(.4, 0, .2, 1),
                box-shadow 0.2s cubic-bezier(.4, 0, .2, 1),
                background 0.2s cubic-bezier(.4, 0, .2, 1);
    box-sizing: border-box;
}

[b-xq25ksdn1j] .admin-input-simple:hover {
    border-color: var(--color-border-secondary);
    background: var(--color-bg-secondary);
}

[b-xq25ksdn1j] .admin-input-simple:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(26, 124, 202, 0.12);
    background: var(--color-bg-primary);
}

[b-xq25ksdn1j] .admin-input-simple::placeholder {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-normal);
}

/* ==========================================================================
   PAGINATION — Premium 2026
   ========================================================================== */
.as-pagination[b-xq25ksdn1j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border-primary);
    background: var(--color-bg-secondary);
}

.as-pagination-info[b-xq25ksdn1j] {
    font-family: var(--font-family-base);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-muted);
    white-space: nowrap;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}

.as-pagination-controls[b-xq25ksdn1j] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.as-page-nav[b-xq25ksdn1j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all 0.2s cubic-bezier(.4, 0, .2, 1);
    flex-shrink: 0;
}

.as-page-nav svg[b-xq25ksdn1j] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.as-page-nav:hover:not(:disabled)[b-xq25ksdn1j] {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.as-page-nav:active:not(:disabled)[b-xq25ksdn1j] {
    transform: translateY(0);
    box-shadow: none;
}

.as-page-nav:disabled[b-xq25ksdn1j] {
    opacity: 0.25;
    cursor: default;
}

.as-page-numbers[b-xq25ksdn1j] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.as-page-num[b-xq25ksdn1j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 4px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-family: var(--font-family-base);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    color: var(--color-text-secondary);
    transition: all 0.2s cubic-bezier(.4, 0, .2, 1);
    font-variant-numeric: tabular-nums;
}

.as-page-num:hover:not(.active)[b-xq25ksdn1j] {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary);
}

.as-page-num.active[b-xq25ksdn1j] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: 600;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-primary);
}

.as-page-ellipsis[b-xq25ksdn1j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 36px;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    user-select: none;
}

.as-page-size[b-xq25ksdn1j] {
    height: 36px;
    padding: 0 30px 0 12px;
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    font-family: var(--font-family-base);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 3.75L5 6.25L7.5 3.75' stroke='%2394A3B8' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: all 0.2s cubic-bezier(.4, 0, .2, 1);
    font-variant-numeric: tabular-nums;
}

.as-page-size:hover[b-xq25ksdn1j] {
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
    background-color: var(--color-bg-secondary);
}

.as-page-size:focus[b-xq25ksdn1j] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
    background-color: var(--color-bg-primary);
}

/* ==========================================================================
   WAITING POINTS CONTAINER
   ========================================================================== */
.waiting-points-container[b-xq25ksdn1j] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ==========================================================================
   WP TOOLBAR — Clean inline bar with count + action
   ========================================================================== */
.wp-toolbar[b-xq25ksdn1j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.wp-toolbar-info[b-xq25ksdn1j] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.wp-zone-chip[b-xq25ksdn1j] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    border-radius: var(--radius-full);
}

.wp-toolbar-count[b-xq25ksdn1j] {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   WAITING POINTS EMPTY STATE — Premium
   ========================================================================== */
.waiting-points-empty[b-xq25ksdn1j] {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    background: var(--gradient-neutral);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    animation: rise-b-xq25ksdn1j 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.waiting-points-empty-icon-wrapper[b-xq25ksdn1j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.waiting-points-empty-icon[b-xq25ksdn1j] {
    width: 28px;
    height: 28px;
    color: var(--color-text-light);
}

.waiting-points-empty-title[b-xq25ksdn1j] {
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
    letter-spacing: var(--letter-spacing-tight);
}

.waiting-points-empty-text[b-xq25ksdn1j] {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: var(--line-height-relaxed);
}

/* ==========================================================================
   WAITING POINTS TABLE — Premium with row accents
   ========================================================================== */
.waiting-points-table[b-xq25ksdn1j] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-float);
    animation: rise-b-xq25ksdn1j 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.waiting-points-table-header[b-xq25ksdn1j] {
    display: grid;
    grid-template-columns: 1.5fr 80px 1.5fr 1fr;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-primary);
    font-family: inherit;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

.waiting-points-table-body[b-xq25ksdn1j] {
    display: flex;
    flex-direction: column;
}

.waiting-points-table-row[b-xq25ksdn1j] {
    display: grid;
    grid-template-columns: 1.5fr 80px 1.5fr 1fr;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 3px);
    align-items: center;
    cursor: pointer;
    position: relative;
    transition: background 0.2s cubic-bezier(.4, 0, .2, 1),
                box-shadow 0.2s cubic-bezier(.4, 0, .2, 1);
    animation: riseRow-b-xq25ksdn1j 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Left accent indicator on hover */
.waiting-points-table-row[b-xq25ksdn1j]::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--color-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    transition: height 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.waiting-points-table-row:not(:last-child)[b-xq25ksdn1j] {
    border-bottom: 1px solid var(--color-border-light);
}

.waiting-points-table-row:hover[b-xq25ksdn1j] {
    background: var(--color-bg-secondary);
    box-shadow: inset 0 0 0 1px var(--color-border-light);
}

.waiting-points-table-row:hover[b-xq25ksdn1j]::after {
    height: 60%;
}

.waiting-points-table-row:active[b-xq25ksdn1j] {
    background: var(--color-bg-tertiary);
}

.wp-col-name[b-xq25ksdn1j] {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    font-size: 13px;
}

.wp-col-direction[b-xq25ksdn1j] {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.wp-col-coords[b-xq25ksdn1j] {
    font-size: 12px;
}

.wp-coords-value[b-xq25ksdn1j] {
    font-family: var(--font-family-mono);
    font-size: 11px;
    color: var(--color-text-secondary);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    padding: 4px var(--space-2);
    border-radius: var(--radius-sm);
    letter-spacing: 0.02em;
    display: inline-block;
    transition: background 0.2s, border-color 0.2s;
}

.waiting-points-table-row:hover .wp-coords-value[b-xq25ksdn1j] {
    background: var(--color-bg-primary);
    border-color: var(--color-border-secondary);
}

.wp-col-actions[b-xq25ksdn1j] {
    justify-self: end;
}

.wp-row-delete-btn[b-xq25ksdn1j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s;
}

.waiting-points-table-row:hover .wp-row-delete-btn[b-xq25ksdn1j] {
    opacity: 1;
}

.wp-row-delete-btn:hover[b-xq25ksdn1j] {
    color: var(--color-error);
    background: var(--color-error-light);
    border-color: var(--color-error);
}

/* ==========================================================================
   WAITING POINT FORM SECTION — Clean, no card wrapper
   ========================================================================== */
.wp-form-section[b-xq25ksdn1j] {
    animation: rise-b-xq25ksdn1j 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
    border-top: 1px solid var(--color-border-primary);
    padding-top: var(--space-5);
}

.wp-form-section-header[b-xq25ksdn1j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-5);
}

.wp-form-section-title[b-xq25ksdn1j] {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-tight);
}

.wp-form-section-close[b-xq25ksdn1j] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.wp-form-section-close:hover[b-xq25ksdn1j] {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary);
}

/* ==========================================================================
   WAITING POINT FORM GRID
   ========================================================================== */
.wp-form-grid[b-xq25ksdn1j] {
    display: grid;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}

.wp-form-grid-3[b-xq25ksdn1j] {
    grid-template-columns: repeat(3, 1fr);
}

/* Coordinate input */
[b-xq25ksdn1j] .wp-coord-input {
    font-family: var(--font-family-mono);
    font-size: 13px;
    letter-spacing: 0.02em;
}

/* Active toggle — inline, lightweight */
.wp-form-toggle-row[b-xq25ksdn1j] {
    margin-bottom: var(--space-5);
}

[b-xq25ksdn1j] .wp-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    user-select: none;
}

[b-xq25ksdn1j] .wp-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.wp-toggle-track[b-xq25ksdn1j] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 40px;
    height: 22px;
    background: var(--color-border-secondary);
    border-radius: var(--radius-full);
    transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.wp-toggle-thumb[b-xq25ksdn1j] {
    position: absolute;
    left: 3px;
    width: 16px;
    height: 16px;
    background: var(--color-bg-primary);
    border-radius: var(--radius-full);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Active state */
[b-xq25ksdn1j] .wp-toggle-input:checked ~ .wp-toggle-track {
    background: var(--color-primary);
    box-shadow: 0 2px 8px rgba(26, 124, 202, 0.25);
}

[b-xq25ksdn1j] .wp-toggle-input:checked ~ .wp-toggle-track .wp-toggle-thumb {
    transform: translateX(18px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Focus ring */
[b-xq25ksdn1j] .wp-toggle-input:focus-visible ~ .wp-toggle-track {
    box-shadow: var(--shadow-focus);
}

.wp-toggle-label[b-xq25ksdn1j] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.wp-form-actions[b-xq25ksdn1j] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-primary);
}

.wp-form-actions-right[b-xq25ksdn1j] {
    display: flex;
    gap: var(--space-3);
    margin-left: auto;
}

.wp-delete-btn[b-xq25ksdn1j] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-error);
    cursor: pointer;
    transition: background 0.2s;
    margin-right: auto;
}

.wp-delete-btn:hover[b-xq25ksdn1j] {
    background: var(--color-error-light);
}

/* ==========================================================================
   MOBILE — Card Layout (991.98px)
   ========================================================================== */
@media (max-width: 991.98px) {
    .admin-table-card[b-xq25ksdn1j] {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        margin-top: var(--space-4);
        box-shadow: none !important;
        overflow: visible !important;
    }

    .admin-table-card[b-xq25ksdn1j]::before {
        display: none;
    }

    [b-xq25ksdn1j] .admin-table-header,
    [b-xq25ksdn1j] .admin-table-header.admin-auto-grid {
        display: none !important;
    }

    [b-xq25ksdn1j] .admin-table-rows {
        gap: var(--space-3) !important;
    }

    [b-xq25ksdn1j] .admin-table-row,
    [b-xq25ksdn1j] .admin-table-container .admin-table-row {
        border-radius: var(--radius-lg) !important;
        margin-bottom: 0 !important;
        padding: var(--space-4) !important;
        background: var(--color-bg-primary) !important;
        border: 1px solid var(--color-border-primary) !important;
        box-shadow: var(--shadow-float) !important;
        flex-direction: column !important;
    }

    [b-xq25ksdn1j] .admin-table-row::after {
        display: none !important;
    }

    [b-xq25ksdn1j] .admin-table-row:not(:last-child) {
        border-bottom: 1px solid var(--color-border-primary) !important;
        box-shadow: var(--shadow-float) !important;
    }

    [b-xq25ksdn1j] .admin-table-row:hover {
        transform: none !important;
        box-shadow: var(--shadow-float-hover) !important;
    }

    [b-xq25ksdn1j] .admin-grid-cols-3 {
        min-width: 0 !important;
    }

    [b-xq25ksdn1j] .admin-table-row-content,
    [b-xq25ksdn1j] .admin-table-row-content.admin-auto-grid,
    [b-xq25ksdn1j] .admin-table-row-content.admin-auto-grid.admin-grid-cols-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-3) !important;
        padding: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    [b-xq25ksdn1j] .admin-auto-grid .admin-table-cell,
    [b-xq25ksdn1j] .admin-auto-grid .admin-table-cell-primary,
    [b-xq25ksdn1j] .admin-auto-grid .admin-table-cell-secondary {
        display: grid !important;
        grid-template-columns: 100px 1fr;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-1) 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        font-size: 13px;
        width: 100% !important;
        min-width: 0 !important;
    }

    [b-xq25ksdn1j] .admin-auto-grid .admin-table-cell-primary {
        font-size: 14px;
        font-weight: 600;
    }

    [b-xq25ksdn1j] .admin-auto-grid .admin-table-cell::before,
    [b-xq25ksdn1j] .admin-auto-grid .admin-table-cell-primary::before,
    [b-xq25ksdn1j] .admin-auto-grid .admin-table-cell-secondary::before {
        content: attr(data-label) !important;
        font-size: 11px;
        font-weight: 700;
        color: var(--color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }

    /* Station avatar hidden on mobile card layout */
    .station-avatar[b-xq25ksdn1j] {
        display: none;
    }

    /* Actions cell — full width with top separator */
    [b-xq25ksdn1j] .admin-auto-grid .admin-table-cell.admin-grid-actions {
        grid-template-columns: 1fr;
        padding-top: var(--space-3) !important;
        margin-top: var(--space-1);
        border-top: 1px solid var(--color-border-primary);
    }

    [b-xq25ksdn1j] .admin-auto-grid .admin-table-cell.admin-grid-actions::before {
        display: none !important;
    }

    /* Badges */
    [b-xq25ksdn1j] .admin-badge {
        width: fit-content;
    }

    /* Pagination as own card */
    .as-pagination[b-xq25ksdn1j] {
        background: var(--color-bg-primary);
        border: 1px solid var(--color-border-primary);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-float);
        margin-top: var(--space-3);
        padding: var(--space-3) var(--space-4);
        border-top: none;
    }

    /* Skeleton adjustments */
    .admin-skeleton-row[b-xq25ksdn1j] {
        grid-template-columns: 1fr 60px 96px;
    }

    .admin-skeleton-avatar[b-xq25ksdn1j],
    .admin-skeleton-text-sm[b-xq25ksdn1j] {
        display: none;
    }

    .wp-form-grid-3[b-xq25ksdn1j] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   SMALL MOBILE (767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {
    [b-xq25ksdn1j] .filter-field {
        width: 100%;
        min-width: auto;
        max-width: none;
        flex: none;
    }

    .as-page-numbers[b-xq25ksdn1j] {
        display: none;
    }

    .as-pagination-controls[b-xq25ksdn1j] {
        gap: var(--space-2);
    }

    .as-pagination[b-xq25ksdn1j] {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-3);
    }

    .as-pagination-info[b-xq25ksdn1j] {
        width: 100%;
        text-align: center;
        order: -1;
    }

    .as-page-size[b-xq25ksdn1j] {
        order: 3;
    }

    .admin-skeleton-row[b-xq25ksdn1j] {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .admin-skeleton-badge[b-xq25ksdn1j] {
        width: 100%;
        max-width: none;
    }

    .wp-toolbar[b-xq25ksdn1j] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .waiting-points-table-header[b-xq25ksdn1j] {
        display: none;
    }

    .waiting-points-table-row[b-xq25ksdn1j] {
        grid-template-columns: 1fr;
        gap: var(--space-3);
        padding: var(--space-4);
    }

    .waiting-points-table-row > div[b-xq25ksdn1j] {
        display: grid;
        grid-template-columns: 90px 1fr;
        align-items: center;
        gap: var(--space-2);
    }

    .waiting-points-table-row > div[b-xq25ksdn1j]::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: var(--font-weight-bold);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--color-text-secondary);
    }

    .wp-name-cell[b-xq25ksdn1j] {
        flex-direction: row;
    }

    .wp-col-actions[b-xq25ksdn1j] {
        justify-self: stretch;
        padding-top: var(--space-3);
        margin-top: var(--space-2);
    }

    .wp-col-actions[b-xq25ksdn1j]::before {
        display: none;
    }

    .wp-col-actions[b-xq25ksdn1j]  .admin-action-group {
        justify-content: flex-end;
    }

    .wp-row-delete-btn[b-xq25ksdn1j] {
        opacity: 1;
    }

}

@media (max-width: 575.98px) {
    .wp-form-grid-3[b-xq25ksdn1j] {
        grid-template-columns: 1fr;
    }

    .as-pagination[b-xq25ksdn1j] {
        padding: var(--space-3);
    }

    .station-modal-footer[b-xq25ksdn1j] {
        flex-wrap: wrap;
    }

    .station-delete-btn[b-xq25ksdn1j] {
        width: 100%;
        margin-right: 0;
        margin-bottom: var(--space-2);
        justify-content: center;
    }

    .station-modal-footer-right[b-xq25ksdn1j] {
        width: 100%;
        justify-content: flex-end;
    }

    .station-nav-link[b-xq25ksdn1j] {
        padding: var(--space-3);
    }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .admin-skeleton[b-xq25ksdn1j],
    [b-xq25ksdn1j] .admin-table-row,
    .waiting-points-table-row[b-xq25ksdn1j],
    .waiting-points-table-row[b-xq25ksdn1j]::after,
    [b-xq25ksdn1j] .modern-dropdown-chevron,
    [b-xq25ksdn1j] .modern-dropdown-trigger,
    [b-xq25ksdn1j] .modern-dropdown-item,
    .as-page-nav[b-xq25ksdn1j],
    .as-page-num[b-xq25ksdn1j],
    .as-page-size[b-xq25ksdn1j],
    .admin-link-btn[b-xq25ksdn1j],
    [b-xq25ksdn1j] .admin-input-simple,
    .station-avatar[b-xq25ksdn1j],
    [b-xq25ksdn1j] .admin-badge,
    .wp-sort-indicator[b-xq25ksdn1j],
    .wp-coords-value[b-xq25ksdn1j],
    .wp-toggle-track[b-xq25ksdn1j],
    .wp-toggle-thumb[b-xq25ksdn1j] {
        transition: none;
        animation: none;
    }

    .station-nav-link[b-xq25ksdn1j],
    .station-nav-link-icon[b-xq25ksdn1j],
    .station-nav-link-arrow[b-xq25ksdn1j],
    .station-delete-btn[b-xq25ksdn1j] {
        transition: none;
    }

    .admin-table-card[b-xq25ksdn1j],
    .waiting-points-table[b-xq25ksdn1j],
    .waiting-points-empty[b-xq25ksdn1j],
    .wp-form-section[b-xq25ksdn1j],
    .admin-modal-error[b-xq25ksdn1j],
    .admin-empty-state[b-xq25ksdn1j],
    .admin-skeleton-row[b-xq25ksdn1j],
    [b-xq25ksdn1j] .modern-dropdown-menu {
        animation: none;
    }
}

/* ==========================================================================
   FOCUS & ACCESSIBILITY
   ========================================================================== */
[b-xq25ksdn1j] .admin-action-btn:focus-visible,
.admin-link-btn:focus-visible[b-xq25ksdn1j],
.as-page-nav:focus-visible[b-xq25ksdn1j],
.as-page-num:focus-visible[b-xq25ksdn1j],
.as-page-size:focus-visible[b-xq25ksdn1j],
[b-xq25ksdn1j] .modern-dropdown:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

[b-xq25ksdn1j] .admin-input-simple:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

[b-xq25ksdn1j] .admin-table-row:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .as-pagination[b-xq25ksdn1j] {
        display: none !important;
    }

    .admin-table-card[b-xq25ksdn1j] {
        border: 1px solid #ddd;
        box-shadow: none;
        background: var(--color-bg-primary);
    }

    .admin-table-card[b-xq25ksdn1j]::before {
        display: none;
    }

    .station-avatar[b-xq25ksdn1j] {
        display: none;
    }

    [b-xq25ksdn1j] .admin-badge {
        box-shadow: none !important;
    }
}
/* /Components/Pages/Admin/TicketProducts.razor.rz.scp.css */
/* ========================================
   TICKET PRODUCTS - Admin Page
   Modernized with design tokens & glassmorphism
   ======================================== */

/* ----------------------------------------
   ANIMATIONS
   ---------------------------------------- */
@keyframes cardFadeIn-b-iq2av7m6kj {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------
   PAGE LAYOUT
   ---------------------------------------- */
.products-page[b-iq2av7m6kj] {
    background-color: var(--color-bg-secondary);
    min-height: 100vh;
    padding: 0;
}

.products-container[b-iq2av7m6kj] {
    background-color: var(--color-bg-secondary);
    padding: var(--space-8);
}

/* ----------------------------------------
   PAGE HEADER
   ---------------------------------------- */
.page-title[b-iq2av7m6kj] {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-medium);
    font-size: 32px;
    line-height: 48px;
    color: var(--color-dark-legacy);
    margin: 29px 0 0 var(--space-8);
}

.page-description[b-iq2av7m6kj] {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-semibold);
    font-size: 18px;
    line-height: var(--space-6);
    color: var(--color-text-secondary);
    margin: 11px 0 0 37px;
}

/* ----------------------------------------
   TABS
   ---------------------------------------- */
.tabs-container[b-iq2av7m6kj] {
    background: var(--color-border-primary);
    border-radius: 48px;
    padding: var(--space-1) 5px;
    display: flex;
    gap: 10px;
    margin: var(--space-5) 0 0 var(--space-8);
}

.tab-item[b-iq2av7m6kj] {
    height: 42px;
    padding: 6px var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 35px;
    cursor: pointer;
    transition: all var(--transition-slow);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-medium);
    font-size: 14px;
    line-height: var(--space-5);
    color: var(--color-text-secondary);
}

.tab-item.active[b-iq2av7m6kj] {
    background: var(--color-bg-primary);
    color: var(--color-dark-legacy);
    box-shadow: var(--shadow-sm);
}

.tab-item:hover:not(.active)[b-iq2av7m6kj] {
    background: rgba(255, 255, 255, 0.5);
}

.tabs-and-button-container[b-iq2av7m6kj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: var(--space-5) 0 0 var(--space-8);
    gap: var(--space-5);
}

/* ----------------------------------------
   NEW PRODUCT BUTTON
   ---------------------------------------- */
.new-product-button[b-iq2av7m6kj] {
    background: var(--color-dark-legacy);
    border: none;
    border-radius: var(--radius-pill);
    padding: 0 var(--space-6);
    height: 48px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
    transition: all var(--transition-slow);
    margin-left: auto;
}

.new-product-button:hover[b-iq2av7m6kj] {
    background: var(--color-dark-tertiary);
    box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.new-product-button:active[b-iq2av7m6kj] {
    transform: translateY(0);
}

.new-product-button-icon[b-iq2av7m6kj] {
    width: var(--space-6);
    height: var(--space-6);
    flex-shrink: 0;
}

.new-product-button-text[b-iq2av7m6kj] {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-medium);
    font-size: 14px;
    line-height: var(--space-5);
    color: var(--color-text-inverse);
    white-space: nowrap;
}

/* ----------------------------------------
   TABLE LAYOUT
   ---------------------------------------- */
.table-container[b-iq2av7m6kj] {
    margin-top: var(--space-5);
}

.table-header[b-iq2av7m6kj] {
    display: flex;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-1);
}

.table-header-cell[b-iq2av7m6kj] {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-medium);
    font-size: 12px;
    line-height: normal;
    letter-spacing: 0.48px;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    padding: 0 var(--space-5);
}

.product-rows[b-iq2av7m6kj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ----------------------------------------
   PRODUCT CARD - Glassmorphism
   ---------------------------------------- */
.product-card[b-iq2av7m6kj] {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: none;
    border-radius: var(--radius-lg);
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 0 0;
    box-shadow: var(--shadow-float);
    animation: cardFadeIn-b-iq2av7m6kj 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    transition: box-shadow var(--transition-slow), transform var(--transition-slow);
}

.product-card:hover[b-iq2av7m6kj] {
    box-shadow: var(--shadow-float-hover);
    transform: translateY(-1px);
}

.product-card-content[b-iq2av7m6kj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-5);
    flex: 1;
    justify-content: center;
}

.product-name[b-iq2av7m6kj] {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-bold);
    font-size: 16px;
    line-height: var(--space-5);
    color: var(--color-dark-tertiary);
}

.product-details[b-iq2av7m6kj] {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-semibold);
    font-size: 14px;
    line-height: var(--space-5);
    color: var(--color-text-secondary);
}

.product-eligible[b-iq2av7m6kj] {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-normal);
    font-size: 14px;
    line-height: var(--space-5);
    color: var(--color-text-secondary);
}

/* ----------------------------------------
   PRODUCT ACTIONS
   ---------------------------------------- */
.product-actions[b-iq2av7m6kj] {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    margin-left: 10px;
}

.edit-button[b-iq2av7m6kj],
.delete-button[b-iq2av7m6kj] {
    background: var(--color-bg-primary);
    border: none;
    border-radius: var(--space-8);
    padding: var(--space-2) 10px;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: all var(--transition-slow);
}

.edit-button:hover[b-iq2av7m6kj],
.delete-button:hover[b-iq2av7m6kj] {
    background: var(--color-bg-secondary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.edit-button:active[b-iq2av7m6kj],
.delete-button:active[b-iq2av7m6kj] {
    transform: translateY(0);
}

.button-text[b-iq2av7m6kj] {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-medium);
    font-size: 12px;
    line-height: normal;
    color: var(--color-dark-legacy);
}

.button-icon[b-iq2av7m6kj] {
    width: var(--space-4);
    height: var(--space-4);
}

/* ----------------------------------------
   PAGINATION
   ---------------------------------------- */
.pagination-container[b-iq2av7m6kj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 56px;
    height: 40px;
}

.pagination-info[b-iq2av7m6kj] {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-medium);
    font-size: 14px;
    line-height: var(--space-5);
    color: var(--color-text-secondary);
}

.pagination-controls[b-iq2av7m6kj] {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.pagination-button[b-iq2av7m6kj] {
    background: var(--color-bg-primary);
    border: none;
    border-radius: 50px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-medium);
    font-size: 14px;
    line-height: var(--space-5);
    color: var(--color-dark-tertiary);
    transition: all var(--transition-slow);
}

.pagination-button:hover[b-iq2av7m6kj] {
    background: var(--color-bg-secondary);
    box-shadow: var(--shadow-xs);
}

.pagination-button.active[b-iq2av7m6kj] {
    border: 2px solid var(--color-primary);
    background: var(--color-bg-primary);
    box-shadow: var(--shadow-focus);
}

.pagination-button.disabled[b-iq2av7m6kj] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-ellipsis[b-iq2av7m6kj] {
    width: var(--space-3);
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-medium);
    font-size: 14px;
    line-height: var(--space-5);
    color: var(--color-text-secondary);
}

/* ----------------------------------------
   ITEMS PER PAGE
   ---------------------------------------- */
.items-per-page[b-iq2av7m6kj] {
    background: var(--color-bg-primary);
    border: none;
    border-radius: var(--radius-md);
    padding: 14px var(--space-4);
    height: 40px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    transition: box-shadow var(--transition-slow);
}

.items-per-page:hover[b-iq2av7m6kj] {
    box-shadow: var(--shadow-xs);
}

.items-per-page-text[b-iq2av7m6kj] {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-normal);
    font-size: 14px;
    line-height: var(--space-5);
    color: var(--color-dark-tertiary);
}

.items-per-page-arrow[b-iq2av7m6kj] {
    width: var(--space-4);
    height: var(--space-4);
    flex-shrink: 0;
}

/* ----------------------------------------
   STAGGERED CARD ANIMATION
   ---------------------------------------- */
.product-card:nth-child(1)[b-iq2av7m6kj] { animation-delay: 0.03s; }
.product-card:nth-child(2)[b-iq2av7m6kj] { animation-delay: 0.06s; }
.product-card:nth-child(3)[b-iq2av7m6kj] { animation-delay: 0.09s; }
.product-card:nth-child(4)[b-iq2av7m6kj] { animation-delay: 0.12s; }
.product-card:nth-child(5)[b-iq2av7m6kj] { animation-delay: 0.15s; }
.product-card:nth-child(6)[b-iq2av7m6kj] { animation-delay: 0.18s; }
.product-card:nth-child(7)[b-iq2av7m6kj] { animation-delay: 0.21s; }
.product-card:nth-child(8)[b-iq2av7m6kj] { animation-delay: 0.24s; }
.product-card:nth-child(9)[b-iq2av7m6kj] { animation-delay: 0.27s; }
.product-card:nth-child(10)[b-iq2av7m6kj] { animation-delay: 0.30s; }

/* ----------------------------------------
   RESPONSIVE - MOBILE
   ---------------------------------------- */
@media (max-width: 768px) {
    .tabs-and-button-container[b-iq2av7m6kj] {
        flex-direction: column;
        align-items: flex-start;
    }

    .tabs-container[b-iq2av7m6kj] {
        width: 100%;
    }

    .new-product-button[b-iq2av7m6kj] {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }

    .product-card[b-iq2av7m6kj] {
        flex-direction: column;
        height: auto;
        padding: var(--space-4);
    }

    .product-actions[b-iq2av7m6kj] {
        align-self: flex-end;
        margin-top: 10px;
        margin-left: 0;
    }

    .pagination-container[b-iq2av7m6kj] {
        flex-direction: column;
        gap: var(--space-4);
        height: auto;
    }

    .pagination-controls[b-iq2av7m6kj] {
        position: relative;
        left: auto;
        transform: none;
    }
}

/* ----------------------------------------
   REDUCED MOTION
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .product-card[b-iq2av7m6kj] {
        animation: none;
    }

    .product-card:hover[b-iq2av7m6kj],
    .new-product-button:hover[b-iq2av7m6kj],
    .edit-button:hover[b-iq2av7m6kj],
    .delete-button:hover[b-iq2av7m6kj],
    .pagination-button:hover[b-iq2av7m6kj] {
        transform: none;
    }
}
/* /Components/Pages/Admin/TicketTypes.razor.rz.scp.css */
/* ========================================
   ADMIN TICKET TYPES — Premium 2026 Redesign
   Solid surfaces, design tokens, rise animation
   ======================================== */

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes rise-b-uahkejhqrb {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-shimmer-b-uahkejhqrb {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes spin-b-uahkejhqrb {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Grid Column Definition
   ========================================================================== */
[b-uahkejhqrb] .admin-grid-cols-5 {
    --admin-grid-cols: 5;
}

/* ==========================================================================
   TABLE CARD — Solid surface
   ========================================================================== */
.admin-table-card[b-uahkejhqrb] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    margin-top: var(--space-5);
    box-shadow: var(--shadow-sm);
    animation: rise-b-uahkejhqrb 0.45s cubic-bezier(.4, 0, .2, 1) both;
    overflow: hidden;
}

[b-uahkejhqrb] .admin-table-container {
    margin-top: 0;
}

[b-uahkejhqrb] .admin-table-header {
    background: var(--color-bg-secondary);
    margin-bottom: 0;
    padding: var(--space-4) 0;
    border-radius: 0;
}

[b-uahkejhqrb] .admin-table-rows {
    gap: 0;
}

[b-uahkejhqrb] .admin-table-row {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    padding: 0 var(--space-4) 0 0;
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
    display: flex;
    align-items: center;
}

[b-uahkejhqrb] .admin-table-row:hover {
    background: var(--color-bg-secondary);
    box-shadow: none;
    transform: none;
}

[b-uahkejhqrb] .admin-table-row:not(:last-child) {
    border-bottom: 1px solid var(--color-border-primary);
}

/* ==========================================================================
   TICKET TYPE ROW — Avatar + Name + Badges + Chevron
   ========================================================================== */
.tt-name-cell[b-uahkejhqrb] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

/* Avatar — ticket card gradient */
.tt-avatar[b-uahkejhqrb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: var(--radius-lg);
    color: var(--color-text-inverse);
    transition: transform 0.2s, box-shadow 0.2s;
}

.tt-avatar svg[b-uahkejhqrb] {
    width: 16px;
    height: 16px;
}

.tt-avatar--emerald[b-uahkejhqrb] {
    background: linear-gradient(135deg, #059669 0%, #34d399 100%);
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.20);
}

.tt-avatar--blue[b-uahkejhqrb] {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.20);
}

.tt-avatar--neutral[b-uahkejhqrb] {
    background: linear-gradient(135deg, #94a3b8 0%, #cbd5e1 100%);
    box-shadow: 0 2px 8px rgba(148, 163, 184, 0.20);
}

[b-uahkejhqrb] .admin-table-row:hover .tt-avatar {
    transform: scale(1.06);
}

[b-uahkejhqrb] .admin-table-row:hover .tt-avatar--emerald { box-shadow: 0 4px 12px rgba(5, 150, 105, 0.30); }
[b-uahkejhqrb] .admin-table-row:hover .tt-avatar--blue    { box-shadow: 0 4px 12px rgba(59, 130, 246, 0.30); }
[b-uahkejhqrb] .admin-table-row:hover .tt-avatar--neutral { box-shadow: 0 4px 12px rgba(148, 163, 184, 0.30); }

.tt-name-group[b-uahkejhqrb] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.tt-name[b-uahkejhqrb] {
    font-weight: var(--font-weight-semibold);
    font-size: 14px;
    color: var(--color-text-primary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.tt-subtitle[b-uahkejhqrb] {
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.tt-requirements[b-uahkejhqrb] {
    font-size: 11px;
    color: var(--color-text-muted);
    line-height: 1.3;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Code badge */
.tt-code-badge[b-uahkejhqrb] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) 10px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace;
    color: var(--color-text-secondary);
    letter-spacing: 0.04em;
}

/* Eligible text */
.tt-eligible[b-uahkejhqrb] {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* Status badges */
.tt-status[b-uahkejhqrb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    border: 1px solid transparent;
    white-space: nowrap;
}

.tt-status--active[b-uahkejhqrb],
.tt-status--public[b-uahkejhqrb] {
    background: rgba(5, 150, 105, 0.08);
    border-color: rgba(5, 150, 105, 0.18);
    color: #059669;
}

.tt-status--inactive[b-uahkejhqrb],
.tt-status--backoffice[b-uahkejhqrb] {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-primary);
    color: var(--color-text-secondary);
}

.tt-status-dot[b-uahkejhqrb] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
}

/* Row chevron */
.tt-row-chevron[b-uahkejhqrb] {
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    margin-left: auto;
    flex-shrink: 0;
}

[b-uahkejhqrb] .admin-table-row:hover .tt-row-chevron {
    opacity: 0.5;
    transform: translateX(2px);
}

/* ==========================================================================
   Alert Enhancements
   ========================================================================== */
.admin-alert[b-uahkejhqrb] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.admin-alert-icon[b-uahkejhqrb] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.tt-retry-btn[b-uahkejhqrb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-1) var(--space-3);
    background: transparent;
    border: 1px solid currentColor;
    border-radius: var(--radius-md);
    color: inherit;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background 200ms;
    font-family: inherit;
    white-space: nowrap;
    opacity: 0.8;
}

.tt-retry-btn:hover[b-uahkejhqrb] { opacity: 1; background: rgba(0, 0, 0, 0.05); }
.tt-retry-btn:disabled[b-uahkejhqrb] { opacity: 0.5; cursor: not-allowed; }
.tt-retry-btn svg[b-uahkejhqrb] { width: 14px; height: 14px; }

.admin-alert-dismiss[b-uahkejhqrb] {
    margin-left: auto;
    background: transparent;
    border: none;
    padding: var(--space-1);
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: inherit;
    opacity: 0.6;
    transition: opacity 200ms;
}

.admin-alert-dismiss:hover[b-uahkejhqrb] { opacity: 1; }
.admin-alert-dismiss svg[b-uahkejhqrb] { width: 16px; height: 16px; }

/* ==========================================================================
   Loading Skeleton
   ========================================================================== */
.tt-loading-state[b-uahkejhqrb] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tt-skeleton-row[b-uahkejhqrb] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
}

.tt-skeleton-row:not(:last-child)[b-uahkejhqrb] {
    border-bottom: 1px solid var(--color-border-primary);
}

.tt-skeleton[b-uahkejhqrb] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 37%, var(--color-bg-tertiary) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer-b-uahkejhqrb 1.8s ease infinite;
    border-radius: var(--radius-sm);
}

.tt-skeleton-avatar[b-uahkejhqrb] { width: 36px; height: 36px; min-width: 36px; border-radius: var(--radius-lg); }
.tt-skeleton-content[b-uahkejhqrb] { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.tt-skeleton-text[b-uahkejhqrb] { width: 160px; max-width: 50%; height: 14px; }
.tt-skeleton-sub[b-uahkejhqrb] { width: 100px; max-width: 30%; height: 10px; }
.tt-skeleton-badge[b-uahkejhqrb] { width: 60px; height: 24px; border-radius: var(--radius-md); }
.tt-skeleton-status[b-uahkejhqrb] { width: 70px; height: 24px; border-radius: var(--radius-pill); }

/* ==========================================================================
   Empty State
   ========================================================================== */
.admin-empty-state[b-uahkejhqrb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-16) var(--space-8);
    animation: rise-b-uahkejhqrb 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

.tt-empty-icon[b-uahkejhqrb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: 50%;
    margin-bottom: var(--space-5);
}

.tt-empty-icon svg[b-uahkejhqrb] { width: 28px; height: 28px; color: var(--color-text-muted); }

.admin-empty-state-title[b-uahkejhqrb] {
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
}

.admin-empty-state-text[b-uahkejhqrb] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-6) 0;
    max-width: 400px;
}

.tt-empty-btn[b-uahkejhqrb] {
    height: 38px;
    padding: 0 var(--space-5);
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-inverse);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: background 200ms, border-color 200ms;
    font-family: inherit;
}

.tt-empty-btn:hover[b-uahkejhqrb] { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.tt-empty-btn svg[b-uahkejhqrb] { width: 16px; height: 16px; }

/* ==========================================================================
   Modern Dropdown (Filters + Modal)
   ========================================================================== */
.modern-dropdown[b-uahkejhqrb] {
    position: relative;
    outline: none;
}

.modern-dropdown-trigger[b-uahkejhqrb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 44px;
    padding: 0 var(--space-3);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: border-color 200ms, box-shadow 200ms;
    font-family: inherit;
    gap: var(--space-2);
    text-align: left;
}

.modern-dropdown-trigger:hover[b-uahkejhqrb] { border-color: var(--color-border-secondary); }

.modern-dropdown-trigger:focus[b-uahkejhqrb],
.modern-dropdown-trigger[aria-expanded="true"][b-uahkejhqrb] {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.modern-dropdown-chevron[b-uahkejhqrb] {
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    flex-shrink: 0;
    transition: transform 200ms;
}

.modern-dropdown-chevron.open[b-uahkejhqrb] { transform: rotate(180deg); }

.modern-dropdown-menu[b-uahkejhqrb] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    overflow: hidden;
    padding: var(--space-1) 0;
    animation: rise-b-uahkejhqrb 0.15s cubic-bezier(.4, 0, .2, 1) both;
}

.tt-modal-dropdown-menu[b-uahkejhqrb] {
    max-height: 240px;
    overflow-y: auto;
}

.modern-dropdown-item[b-uahkejhqrb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: none;
    border: none;
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 150ms;
    text-align: left;
    font-family: inherit;
    gap: var(--space-2);
}

.modern-dropdown-item:hover[b-uahkejhqrb] { background: var(--color-bg-secondary); }

.modern-dropdown-item.selected[b-uahkejhqrb] {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.modern-dropdown-check[b-uahkejhqrb] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--color-primary);
}

/* Filter dot option */
.tt-filter-dot-option[b-uahkejhqrb] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tt-filter-dot[b-uahkejhqrb] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tt-dot--public[b-uahkejhqrb],
.tt-dot--active[b-uahkejhqrb] { background: #059669; }
.tt-dot--backoffice[b-uahkejhqrb],
.tt-dot--inactive[b-uahkejhqrb] { background: #94a3b8; }

/* ==========================================================================
   MODAL FORM — Premium layout with sections
   ========================================================================== */
.tt-form[b-uahkejhqrb] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tt-form-section[b-uahkejhqrb] {
    padding: var(--space-5) 0;
}

.tt-form-section:not(:first-child)[b-uahkejhqrb] {
    border-top: 1px solid var(--color-border-primary);
}

/* Section header with icon badge */
.tt-section-header[b-uahkejhqrb] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.tt-section-icon[b-uahkejhqrb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
}

.tt-section-icon svg[b-uahkejhqrb] {
    width: 16px;
    height: 16px;
    color: var(--color-text-secondary);
}

.tt-form-section-title[b-uahkejhqrb] {
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
    flex: 1;
    min-width: 0;
}

.tt-form-section-title svg[b-uahkejhqrb] {
    display: none;
}

.tt-form-grid-2col[b-uahkejhqrb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.tt-form-field[b-uahkejhqrb] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tt-form-label[b-uahkejhqrb] {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.tt-form-req[b-uahkejhqrb] {
    color: var(--color-error);
    font-weight: var(--font-weight-bold);
}

.tt-form-input[b-uahkejhqrb] {
    width: 100%;
    height: 40px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    transition: border-color 200ms, box-shadow 200ms;
    box-sizing: border-box;
    font-family: inherit;
}

.tt-form-input:hover[b-uahkejhqrb] { border-color: var(--color-border-secondary); }
.tt-form-input:focus[b-uahkejhqrb] { outline: none; border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
.tt-form-input[b-uahkejhqrb]::placeholder { color: var(--color-text-muted); }

[b-uahkejhqrb] .tt-form-input {
    width: 100%;
    height: 40px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    transition: border-color 200ms, box-shadow 200ms;
    box-sizing: border-box;
    font-family: inherit;
}

[b-uahkejhqrb] .tt-form-input:hover { border-color: var(--color-border-secondary); }
[b-uahkejhqrb] .tt-form-input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
[b-uahkejhqrb] .tt-form-input::placeholder { color: var(--color-text-muted); }

.tt-form-error[b-uahkejhqrb] {
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-error);
}

.tt-help-text[b-uahkejhqrb] {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: var(--space-2) 0 0 0;
    line-height: 1.4;
}

/* Modal error */
.tt-modal-error[b-uahkejhqrb] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-error-light);
    border: 1px solid var(--color-error-bright);
    border-radius: var(--radius-lg);
    color: var(--color-error);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-4);
    animation: rise-b-uahkejhqrb 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

.tt-modal-error svg[b-uahkejhqrb] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ==========================================================================
   APPLE-STYLE TOGGLE
   ========================================================================== */
.tt-toggle[b-uahkejhqrb] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    user-select: none;
}

.tt-toggles-group[b-uahkejhqrb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Toggle cards in 2×2 grid */
.tt-toggles-grid[b-uahkejhqrb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.tt-toggle-card[b-uahkejhqrb] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    cursor: pointer;
    user-select: none;
    transition: border-color 200ms, background 200ms, box-shadow 200ms;
}

.tt-toggle-card:hover[b-uahkejhqrb] {
    border-color: var(--color-border-secondary);
    background: var(--color-bg-secondary);
}

.tt-toggle-card:has(.sr-only:checked)[b-uahkejhqrb] {
    border-color: rgba(26, 124, 202, 0.30);
    background: rgba(26, 124, 202, 0.04);
}

.tt-toggle-card-label[b-uahkejhqrb] {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    line-height: 1.4;
}

.sr-only[b-uahkejhqrb] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.tt-toggle-track[b-uahkejhqrb] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 40px;
    height: 22px;
    background: var(--color-border-primary);
    border-radius: 11px;
    transition: background 0.25s cubic-bezier(.4, 0, .2, 1);
    flex-shrink: 0;
}

.tt-toggle-thumb[b-uahkejhqrb] {
    position: absolute;
    left: 2px;
    width: 18px;
    height: 18px;
    background: var(--color-bg-primary);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s cubic-bezier(.4, 0, .2, 1);
}

.sr-only:checked + .tt-toggle-track[b-uahkejhqrb] { background: var(--color-primary); }
.sr-only:checked + .tt-toggle-track .tt-toggle-thumb[b-uahkejhqrb] { transform: translateX(18px); }
.sr-only:focus-visible + .tt-toggle-track[b-uahkejhqrb] { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.tt-toggle-label[b-uahkejhqrb] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    line-height: 1.4;
}

.tt-toggle-label--bold[b-uahkejhqrb] {
    font-weight: var(--font-weight-semibold);
}

.tt-toggle--highlight[b-uahkejhqrb] {
    padding: var(--space-3) var(--space-4);
    background: rgba(26, 124, 202, 0.04);
    border: 1px solid rgba(26, 124, 202, 0.12);
    border-radius: var(--radius-lg);
    transition: border-color 200ms, background 200ms;
}

.tt-toggle--highlight:hover[b-uahkejhqrb] {
    border-color: rgba(26, 124, 202, 0.22);
    background: rgba(26, 124, 202, 0.06);
}

.tt-toggle--active-highlight[b-uahkejhqrb] {
    padding: var(--space-4) var(--space-5);
}

.tt-active-section[b-uahkejhqrb] { padding-bottom: 0; }

/* ==========================================================================
   ADD FIELD BUTTON (in section header)
   ========================================================================== */
.tt-add-field-btn[b-uahkejhqrb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px var(--space-3);
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-inverse);
    cursor: pointer;
    transition: background 200ms;
    font-family: inherit;
    white-space: nowrap;
    margin-left: auto;
}

.tt-add-field-btn:hover[b-uahkejhqrb] { background: var(--color-primary-hover); }
.tt-add-field-btn svg[b-uahkejhqrb] { width: 14px; height: 14px; }

/* ==========================================================================
   CUSTOM FIELD BUILDER — Premium card layout
   ========================================================================== */
.tt-cf-empty[b-uahkejhqrb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px dashed var(--color-border-primary);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
}

.tt-cf-empty svg[b-uahkejhqrb] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.5;
}

.tt-cf-list[b-uahkejhqrb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tt-cf-card[b-uahkejhqrb] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 200ms, box-shadow 200ms;
}

.tt-cf-card:hover[b-uahkejhqrb] {
    border-color: var(--color-border-secondary);
    box-shadow: var(--shadow-sm);
}

.tt-cf-card-header[b-uahkejhqrb] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-primary);
}

.tt-cf-card-number[b-uahkejhqrb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
}

.tt-cf-card-toggles[b-uahkejhqrb] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 1;
}

.tt-cf-card-toggles .tt-toggle-label[b-uahkejhqrb] {
    font-size: 12px;
}

.tt-cf-remove-btn[b-uahkejhqrb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 200ms, background 200ms;
    flex-shrink: 0;
}

.tt-cf-remove-btn:hover[b-uahkejhqrb] {
    color: var(--color-error);
    background: var(--color-error-light);
}

.tt-cf-remove-btn svg[b-uahkejhqrb] { width: 16px; height: 16px; }

.tt-cf-card-body[b-uahkejhqrb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    padding: var(--space-4);
}

/* ==========================================================================
   CATEGORY CHIP GRID — Selectable chips
   ========================================================================== */
.tt-category-grid[b-uahkejhqrb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-2);
}

.tt-category-chip[b-uahkejhqrb] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: border-color 200ms, background 200ms, box-shadow 200ms;
    user-select: none;
}

.tt-category-chip:hover[b-uahkejhqrb] {
    border-color: var(--color-border-secondary);
    background: var(--color-bg-secondary);
}

.tt-category-chip--selected[b-uahkejhqrb] {
    border-color: var(--color-primary);
    background: rgba(26, 124, 202, 0.06);
    color: var(--color-primary);
}

.tt-category-chip--selected:hover[b-uahkejhqrb] {
    background: rgba(26, 124, 202, 0.10);
}

.tt-category-chip--inactive[b-uahkejhqrb] {
    opacity: 0.55;
}

.tt-chip-check[b-uahkejhqrb] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--color-primary);
    opacity: 0;
    transition: opacity 200ms;
}

.tt-category-chip--selected .tt-chip-check[b-uahkejhqrb] {
    opacity: 1;
}

/* ==========================================================================
   FORM ACTIONS — Delete left, Cancel+Save right
   ========================================================================== */
.tt-form-actions[b-uahkejhqrb] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-primary);
    margin-top: var(--space-5);
}

.tt-form-actions-right[b-uahkejhqrb] {
    display: flex;
    gap: var(--space-3);
    margin-left: auto;
}

.tt-delete-btn[b-uahkejhqrb] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-error);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background 200ms, color 200ms;
    font-family: inherit;
}

.tt-delete-btn:hover[b-uahkejhqrb] { background: var(--color-error-light); }
.tt-delete-btn svg[b-uahkejhqrb] { width: 16px; height: 16px; flex-shrink: 0; }

.tt-cancel-btn[b-uahkejhqrb] {
    height: 38px;
    padding: 0 var(--space-5);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 200ms, border-color 200ms, color 200ms;
    font-family: inherit;
}

.tt-cancel-btn:hover[b-uahkejhqrb] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.tt-save-btn[b-uahkejhqrb] {
    height: 38px;
    padding: 0 var(--space-5);
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-inverse);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: background 200ms, border-color 200ms;
    font-family: inherit;
}

.tt-save-btn:hover[b-uahkejhqrb] { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.tt-save-btn:disabled[b-uahkejhqrb] { opacity: 0.7; cursor: not-allowed; }
.tt-save-btn svg[b-uahkejhqrb] { width: 16px; height: 16px; flex-shrink: 0; }

.tt-spinner[b-uahkejhqrb] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-uahkejhqrb 0.6s linear infinite;
}

/* ==========================================================================
   MOBILE — Card Layout (991.98px)
   ========================================================================== */
@media (max-width: 991.98px) {
    .admin-table-card[b-uahkejhqrb] {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        margin-top: var(--space-4);
        box-shadow: none !important;
        overflow: visible !important;
    }

    [b-uahkejhqrb] .admin-table-header,
    [b-uahkejhqrb] .admin-table-header.admin-auto-grid {
        display: none !important;
    }

    [b-uahkejhqrb] .admin-table-rows {
        gap: var(--space-3) !important;
    }

    [b-uahkejhqrb] .admin-table-row,
    [b-uahkejhqrb] .admin-table-container .admin-table-row {
        border-radius: var(--radius-lg) !important;
        padding: var(--space-4) !important;
        background: var(--color-bg-primary) !important;
        border: 1px solid var(--color-border-primary) !important;
        box-shadow: var(--shadow-sm) !important;
        flex-wrap: wrap;
    }

    [b-uahkejhqrb] .admin-table-row:hover {
        transform: none !important;
    }

    [b-uahkejhqrb] .admin-table-row-content,
    [b-uahkejhqrb] .admin-table-row-content.admin-auto-grid,
    [b-uahkejhqrb] .admin-table-row-content.admin-auto-grid.admin-grid-cols-5 {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
        gap: var(--space-3) !important;
    }

    [b-uahkejhqrb] .admin-auto-grid .admin-table-cell,
    [b-uahkejhqrb] .admin-auto-grid .admin-table-cell-primary {
        display: flex !important;
        padding: 0 !important;
        width: 100% !important;
    }

    [b-uahkejhqrb] .admin-auto-grid .admin-table-cell::before,
    [b-uahkejhqrb] .admin-auto-grid .admin-table-cell-primary::before {
        display: none !important;
    }

    .tt-row-chevron[b-uahkejhqrb] { display: none; }
}

/* ==========================================================================
   SMALL SCREENS (767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {
    .tt-form-actions[b-uahkejhqrb] {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .tt-form-actions-right[b-uahkejhqrb] {
        flex-direction: column-reverse;
        margin-left: 0;
    }

    .tt-cancel-btn[b-uahkejhqrb],
    .tt-save-btn[b-uahkejhqrb],
    .tt-delete-btn[b-uahkejhqrb] {
        width: 100%;
        justify-content: center;
    }

    .admin-empty-state[b-uahkejhqrb] {
        padding: var(--space-12) var(--space-5);
    }

    .tt-form-grid-2col[b-uahkejhqrb] {
        grid-template-columns: 1fr;
    }

    .tt-toggles-grid[b-uahkejhqrb] {
        grid-template-columns: 1fr;
    }

    .tt-category-grid[b-uahkejhqrb] {
        grid-template-columns: 1fr;
    }

    .tt-cf-card-body[b-uahkejhqrb] {
        grid-template-columns: 1fr;
    }

    .tt-cf-card-header[b-uahkejhqrb] {
        flex-wrap: wrap;
    }

    .tt-cf-card-toggles[b-uahkejhqrb] {
        order: 3;
        width: 100%;
    }

    .tt-section-header[b-uahkejhqrb] {
        flex-wrap: wrap;
    }

    .tt-add-field-btn[b-uahkejhqrb] {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .tt-skeleton[b-uahkejhqrb],
    [b-uahkejhqrb] .admin-table-row,
    .tt-avatar[b-uahkejhqrb],
    .tt-row-chevron[b-uahkejhqrb],
    .tt-form-input[b-uahkejhqrb],
    [b-uahkejhqrb] .tt-form-input,
    .tt-cancel-btn[b-uahkejhqrb],
    .tt-save-btn[b-uahkejhqrb],
    .tt-delete-btn[b-uahkejhqrb],
    .tt-empty-btn[b-uahkejhqrb],
    .tt-retry-btn[b-uahkejhqrb],
    .tt-add-field-btn[b-uahkejhqrb],
    .tt-toggle-track[b-uahkejhqrb],
    .tt-toggle-thumb[b-uahkejhqrb],
    .tt-toggle--highlight[b-uahkejhqrb],
    .tt-toggle-card[b-uahkejhqrb],
    .tt-category-chip[b-uahkejhqrb],
    .tt-chip-check[b-uahkejhqrb],
    .tt-cf-card[b-uahkejhqrb],
    .tt-cf-remove-btn[b-uahkejhqrb],
    .modern-dropdown-trigger[b-uahkejhqrb],
    .modern-dropdown-item[b-uahkejhqrb],
    .modern-dropdown-chevron[b-uahkejhqrb],
    .admin-alert-dismiss[b-uahkejhqrb] {
        transition: none;
        animation: none;
    }

    .admin-table-card[b-uahkejhqrb],
    .admin-empty-state[b-uahkejhqrb],
    .tt-modal-error[b-uahkejhqrb],
    .modern-dropdown-menu[b-uahkejhqrb] {
        animation: none;
    }

    .tt-spinner[b-uahkejhqrb] { animation: none; }
}

/* ==========================================================================
   FOCUS STATES
   ========================================================================== */
.tt-cancel-btn:focus-visible[b-uahkejhqrb],
.tt-save-btn:focus-visible[b-uahkejhqrb],
.tt-delete-btn:focus-visible[b-uahkejhqrb],
.tt-empty-btn:focus-visible[b-uahkejhqrb],
.tt-retry-btn:focus-visible[b-uahkejhqrb],
.tt-add-field-btn:focus-visible[b-uahkejhqrb],
.tt-cf-remove-btn:focus-visible[b-uahkejhqrb],
.admin-alert-dismiss:focus-visible[b-uahkejhqrb],
.modern-dropdown-trigger:focus-visible[b-uahkejhqrb],
.tt-category-chip:focus-within[b-uahkejhqrb],
.tt-toggle-card:focus-within[b-uahkejhqrb] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

[b-uahkejhqrb] .tt-form-input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .admin-table-card[b-uahkejhqrb] {
        border: 1px solid #ddd;
        box-shadow: none;
        background: var(--color-bg-primary);
    }

    .tt-row-chevron[b-uahkejhqrb],
    .tt-avatar[b-uahkejhqrb] { display: none; }
}
/* /Components/Pages/Admin/TicketValidities.razor.rz.scp.css */
/* ========================================
   ADMIN TICKET VALIDITIES — Premium 2026 Redesign
   Solid surfaces, design tokens, rise animation
   ======================================== */

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes rise-b-wp50ifv0h1 {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-shimmer-b-wp50ifv0h1 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes spin-b-wp50ifv0h1 {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Grid Column Definition
   ========================================================================== */
[b-wp50ifv0h1] .admin-grid-cols-4 {
    --admin-grid-cols: 4;
}

/* ==========================================================================
   TABLE CARD — Solid surface
   ========================================================================== */
.admin-table-card[b-wp50ifv0h1] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    margin-top: var(--space-5);
    box-shadow: var(--shadow-sm);
    animation: rise-b-wp50ifv0h1 0.45s cubic-bezier(.4, 0, .2, 1) both;
    overflow: hidden;
}

[b-wp50ifv0h1] .admin-table-container {
    margin-top: 0;
}

[b-wp50ifv0h1] .admin-table-header {
    background: var(--color-bg-secondary);
    margin-bottom: 0;
    padding: var(--space-4) 0;
    border-radius: 0;
}

[b-wp50ifv0h1] .admin-table-rows {
    gap: 0;
}

[b-wp50ifv0h1] .admin-table-row {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    padding: 0 var(--space-4) 0 0;
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
    display: flex;
    align-items: center;
}

[b-wp50ifv0h1] .admin-table-row:hover {
    background: var(--color-bg-secondary);
    box-shadow: none;
    transform: none;
}

[b-wp50ifv0h1] .admin-table-row:not(:last-child) {
    border-bottom: 1px solid var(--color-border-primary);
}

/* ==========================================================================
   VALIDITY ROW — Avatar + Name + Badges + Chevron
   ========================================================================== */
.tv-name-cell[b-wp50ifv0h1] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

/* Validity avatar — colored gradient by type */
.tv-avatar[b-wp50ifv0h1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: var(--radius-lg);
    color: var(--color-text-inverse);
    transition: transform 0.2s, box-shadow 0.2s;
}

.tv-avatar svg[b-wp50ifv0h1] {
    width: 16px;
    height: 16px;
}

.tv-avatar--blue[b-wp50ifv0h1] {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.20);
}

.tv-avatar--teal[b-wp50ifv0h1] {
    background: linear-gradient(135deg, #14b8a6 0%, #5eead4 100%);
    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.20);
}

.tv-avatar--indigo[b-wp50ifv0h1] {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.20);
}

.tv-avatar--neutral[b-wp50ifv0h1] {
    background: linear-gradient(135deg, #94a3b8 0%, #cbd5e1 100%);
    box-shadow: 0 2px 8px rgba(148, 163, 184, 0.20);
}

[b-wp50ifv0h1] .admin-table-row:hover .tv-avatar {
    transform: scale(1.06);
}

[b-wp50ifv0h1] .admin-table-row:hover .tv-avatar--blue    { box-shadow: 0 4px 12px rgba(59, 130, 246, 0.30); }
[b-wp50ifv0h1] .admin-table-row:hover .tv-avatar--teal    { box-shadow: 0 4px 12px rgba(20, 184, 166, 0.30); }
[b-wp50ifv0h1] .admin-table-row:hover .tv-avatar--indigo  { box-shadow: 0 4px 12px rgba(99, 102, 241, 0.30); }
[b-wp50ifv0h1] .admin-table-row:hover .tv-avatar--neutral { box-shadow: 0 4px 12px rgba(148, 163, 184, 0.30); }

.tv-name-group[b-wp50ifv0h1] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.tv-name[b-wp50ifv0h1] {
    font-weight: var(--font-weight-semibold);
    font-size: 14px;
    color: var(--color-text-primary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.tv-description[b-wp50ifv0h1] {
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.tv-summary[b-wp50ifv0h1] {
    font-size: 11px;
    color: var(--color-text-muted);
    line-height: 1.3;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Code badge — monospace pill */
.tv-code-badge[b-wp50ifv0h1] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) 10px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace;
    color: var(--color-text-secondary);
    letter-spacing: 0.04em;
}

/* Sort order badge */
.tv-sort-badge[b-wp50ifv0h1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 26px;
    padding: 0 8px;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    font-size: 12px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Status badge — active/inactive */
.tv-status[b-wp50ifv0h1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    border: 1px solid transparent;
}

.tv-status--active[b-wp50ifv0h1] {
    background: rgba(5, 150, 105, 0.08);
    border-color: rgba(5, 150, 105, 0.18);
    color: #059669;
}

.tv-status--inactive[b-wp50ifv0h1] {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-primary);
    color: var(--color-text-secondary);
}

.tv-status-dot[b-wp50ifv0h1] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
}

/* Row chevron */
.tv-row-chevron[b-wp50ifv0h1] {
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    margin-left: auto;
    flex-shrink: 0;
}

[b-wp50ifv0h1] .admin-table-row:hover .tv-row-chevron {
    opacity: 0.5;
    transform: translateX(2px);
}

/* ==========================================================================
   Alert Enhancements
   ========================================================================== */
.admin-alert[b-wp50ifv0h1] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.admin-alert-icon[b-wp50ifv0h1] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.tv-retry-btn[b-wp50ifv0h1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-1) var(--space-3);
    background: transparent;
    border: 1px solid currentColor;
    border-radius: var(--radius-md);
    color: inherit;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background 200ms;
    font-family: inherit;
    white-space: nowrap;
    opacity: 0.8;
}

.tv-retry-btn:hover[b-wp50ifv0h1] {
    opacity: 1;
    background: rgba(0, 0, 0, 0.05);
}

.tv-retry-btn:disabled[b-wp50ifv0h1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.tv-retry-btn svg[b-wp50ifv0h1] {
    width: 14px;
    height: 14px;
}

.admin-alert-dismiss[b-wp50ifv0h1] {
    margin-left: auto;
    background: transparent;
    border: none;
    padding: var(--space-1);
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: inherit;
    opacity: 0.6;
    transition: opacity 200ms;
}

.admin-alert-dismiss:hover[b-wp50ifv0h1] {
    opacity: 1;
}

.admin-alert-dismiss svg[b-wp50ifv0h1] {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   Loading Skeleton
   ========================================================================== */
.tv-loading-state[b-wp50ifv0h1] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tv-skeleton-row[b-wp50ifv0h1] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
}

.tv-skeleton-row:not(:last-child)[b-wp50ifv0h1] {
    border-bottom: 1px solid var(--color-border-primary);
}

.tv-skeleton[b-wp50ifv0h1] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 37%, var(--color-bg-tertiary) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer-b-wp50ifv0h1 1.8s ease infinite;
    border-radius: var(--radius-sm);
}

.tv-skeleton-avatar[b-wp50ifv0h1] {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: var(--radius-lg);
}

.tv-skeleton-content[b-wp50ifv0h1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.tv-skeleton-text[b-wp50ifv0h1] {
    width: 160px;
    max-width: 50%;
    height: 14px;
}

.tv-skeleton-sub[b-wp50ifv0h1] {
    width: 100px;
    max-width: 30%;
    height: 10px;
}

.tv-skeleton-badge[b-wp50ifv0h1] {
    width: 60px;
    height: 24px;
    border-radius: var(--radius-md);
}

.tv-skeleton-status[b-wp50ifv0h1] {
    width: 52px;
    height: 24px;
    border-radius: var(--radius-pill);
}

/* ==========================================================================
   Empty State
   ========================================================================== */
.admin-empty-state[b-wp50ifv0h1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-16) var(--space-8);
    animation: rise-b-wp50ifv0h1 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

.tv-empty-icon[b-wp50ifv0h1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: 50%;
    margin-bottom: var(--space-5);
}

.tv-empty-icon svg[b-wp50ifv0h1] {
    width: 28px;
    height: 28px;
    color: var(--color-text-muted);
}

.admin-empty-state-title[b-wp50ifv0h1] {
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
}

.admin-empty-state-text[b-wp50ifv0h1] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-6) 0;
    max-width: 400px;
}

.tv-empty-btn[b-wp50ifv0h1] {
    height: 38px;
    padding: 0 var(--space-5);
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-inverse);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: background 200ms, border-color 200ms;
    font-family: inherit;
}

.tv-empty-btn:hover[b-wp50ifv0h1] {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.tv-empty-btn svg[b-wp50ifv0h1] {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   Modern Dropdown (Active Filter)
   ========================================================================== */
.modern-dropdown[b-wp50ifv0h1] {
    position: relative;
    outline: none;
}

.modern-dropdown-trigger[b-wp50ifv0h1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 44px;
    padding: 0 var(--space-3);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: border-color 200ms, box-shadow 200ms;
    font-family: inherit;
    gap: var(--space-2);
    text-align: left;
}

.modern-dropdown-trigger:hover[b-wp50ifv0h1] {
    border-color: var(--color-border-secondary);
}

.modern-dropdown-trigger:focus[b-wp50ifv0h1],
.modern-dropdown-trigger[aria-expanded="true"][b-wp50ifv0h1] {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.modern-dropdown-chevron[b-wp50ifv0h1] {
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    flex-shrink: 0;
    transition: transform 200ms;
}

.modern-dropdown-chevron.open[b-wp50ifv0h1] {
    transform: rotate(180deg);
}

.modern-dropdown-menu[b-wp50ifv0h1] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    overflow: hidden;
    padding: var(--space-1) 0;
    animation: rise-b-wp50ifv0h1 0.15s cubic-bezier(.4, 0, .2, 1) both;
}

.modern-dropdown-item[b-wp50ifv0h1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: none;
    border: none;
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 150ms;
    text-align: left;
    font-family: inherit;
    gap: var(--space-2);
}

.modern-dropdown-item:hover[b-wp50ifv0h1] {
    background: var(--color-bg-secondary);
}

.modern-dropdown-item.selected[b-wp50ifv0h1] {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.modern-dropdown-check[b-wp50ifv0h1] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--color-primary);
}

/* Filter status option with dot */
.tv-filter-status-option[b-wp50ifv0h1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tv-filter-status-dot[b-wp50ifv0h1] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tv-dot--active[b-wp50ifv0h1] {
    background: #059669;
}

.tv-dot--inactive[b-wp50ifv0h1] {
    background: #94a3b8;
}

/* ==========================================================================
   MODAL FORM — Flat layout with sections
   ========================================================================== */
.tv-form[b-wp50ifv0h1] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tv-form-section[b-wp50ifv0h1] {
    padding: var(--space-5) 0;
}

.tv-form-section:not(:first-child)[b-wp50ifv0h1] {
    border-top: 1px solid var(--color-border-primary);
}

.tv-form-section-title[b-wp50ifv0h1] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 var(--space-4) 0;
}

.tv-form-section-title svg[b-wp50ifv0h1] {
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.tv-form-grid-2col[b-wp50ifv0h1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.tv-form-span-2[b-wp50ifv0h1] {
    grid-column: span 2;
}

.tv-form-field[b-wp50ifv0h1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tv-form-label[b-wp50ifv0h1] {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.tv-form-req[b-wp50ifv0h1] {
    color: var(--color-error);
    font-weight: var(--font-weight-bold);
}

.tv-form-input[b-wp50ifv0h1] {
    width: 100%;
    height: 40px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    transition: border-color 200ms, box-shadow 200ms;
    box-sizing: border-box;
    font-family: inherit;
}

.tv-form-input:hover[b-wp50ifv0h1] {
    border-color: var(--color-border-secondary);
}

.tv-form-input:focus[b-wp50ifv0h1] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.tv-form-input[b-wp50ifv0h1]::placeholder {
    color: var(--color-text-muted);
}

[b-wp50ifv0h1] .tv-form-input {
    width: 100%;
    height: 40px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    transition: border-color 200ms, box-shadow 200ms;
    box-sizing: border-box;
    font-family: inherit;
}

[b-wp50ifv0h1] .tv-form-input:hover {
    border-color: var(--color-border-secondary);
}

[b-wp50ifv0h1] .tv-form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

[b-wp50ifv0h1] .tv-form-input::placeholder {
    color: var(--color-text-muted);
}

.tv-form-error[b-wp50ifv0h1] {
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-error);
}

/* Duration grid — 5 columns */
.tv-duration-grid[b-wp50ifv0h1] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-3);
}

/* Modal error */
.tv-modal-error[b-wp50ifv0h1] {
    padding: var(--space-3) var(--space-4);
    background: var(--color-error-light);
    border: 1px solid var(--color-error-bright);
    border-radius: var(--radius-md);
    color: var(--color-error);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-4);
    animation: rise-b-wp50ifv0h1 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

/* ==========================================================================
   APPLE-STYLE TOGGLE
   ========================================================================== */
.tv-toggle[b-wp50ifv0h1] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    user-select: none;
}

.tv-toggle-row[b-wp50ifv0h1] {
    margin-bottom: var(--space-4);
}

.tv-toggles-group[b-wp50ifv0h1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.sr-only[b-wp50ifv0h1] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.tv-toggle-track[b-wp50ifv0h1] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 40px;
    height: 22px;
    background: var(--color-border-primary);
    border-radius: 11px;
    transition: background 0.25s cubic-bezier(.4, 0, .2, 1);
    flex-shrink: 0;
}

.tv-toggle-thumb[b-wp50ifv0h1] {
    position: absolute;
    left: 2px;
    width: 18px;
    height: 18px;
    background: var(--color-bg-primary);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s cubic-bezier(.4, 0, .2, 1);
}

.sr-only:checked + .tv-toggle-track[b-wp50ifv0h1] {
    background: var(--color-primary);
}

.sr-only:checked + .tv-toggle-track .tv-toggle-thumb[b-wp50ifv0h1] {
    transform: translateX(18px);
}

.sr-only:focus-visible + .tv-toggle-track[b-wp50ifv0h1] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.tv-toggle-label[b-wp50ifv0h1] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    line-height: 1.4;
}

.tv-toggle--highlight[b-wp50ifv0h1] {
    padding: var(--space-3) var(--space-4);
    background: rgba(26, 124, 202, 0.04);
    border: 1px solid rgba(26, 124, 202, 0.12);
    border-radius: var(--radius-lg);
    transition: border-color 200ms, background 200ms;
}

.tv-toggle--highlight:hover[b-wp50ifv0h1] {
    border-color: rgba(26, 124, 202, 0.22);
    background: rgba(26, 124, 202, 0.06);
}

.tv-active-section[b-wp50ifv0h1] {
    padding-bottom: 0;
}

/* ==========================================================================
   FORM ACTIONS — Delete left, Cancel+Save right
   ========================================================================== */
.tv-form-actions[b-wp50ifv0h1] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-primary);
    margin-top: var(--space-5);
}

.tv-form-actions-right[b-wp50ifv0h1] {
    display: flex;
    gap: var(--space-3);
    margin-left: auto;
}

.tv-delete-btn[b-wp50ifv0h1] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-error);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background 200ms, color 200ms;
    font-family: inherit;
}

.tv-delete-btn:hover[b-wp50ifv0h1] {
    background: var(--color-error-light);
}

.tv-delete-btn svg[b-wp50ifv0h1] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.tv-cancel-btn[b-wp50ifv0h1] {
    height: 38px;
    padding: 0 var(--space-5);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 200ms, border-color 200ms, color 200ms;
    font-family: inherit;
}

.tv-cancel-btn:hover[b-wp50ifv0h1] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.tv-save-btn[b-wp50ifv0h1] {
    height: 38px;
    padding: 0 var(--space-5);
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-inverse);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: background 200ms, border-color 200ms;
    font-family: inherit;
}

.tv-save-btn:hover[b-wp50ifv0h1] {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.tv-save-btn:disabled[b-wp50ifv0h1] {
    opacity: 0.7;
    cursor: not-allowed;
}

.tv-save-btn svg[b-wp50ifv0h1] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.tv-spinner[b-wp50ifv0h1] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-wp50ifv0h1 0.6s linear infinite;
}

/* ==========================================================================
   MOBILE — Card Layout (991.98px)
   ========================================================================== */
@media (max-width: 991.98px) {
    .admin-table-card[b-wp50ifv0h1] {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        margin-top: var(--space-4);
        box-shadow: none !important;
        overflow: visible !important;
    }

    [b-wp50ifv0h1] .admin-table-header,
    [b-wp50ifv0h1] .admin-table-header.admin-auto-grid {
        display: none !important;
    }

    [b-wp50ifv0h1] .admin-table-rows {
        gap: var(--space-3) !important;
    }

    [b-wp50ifv0h1] .admin-table-row,
    [b-wp50ifv0h1] .admin-table-container .admin-table-row {
        border-radius: var(--radius-lg) !important;
        padding: var(--space-4) !important;
        background: var(--color-bg-primary) !important;
        border: 1px solid var(--color-border-primary) !important;
        box-shadow: var(--shadow-sm) !important;
        flex-wrap: wrap;
    }

    [b-wp50ifv0h1] .admin-table-row:hover {
        transform: none !important;
    }

    [b-wp50ifv0h1] .admin-table-row-content,
    [b-wp50ifv0h1] .admin-table-row-content.admin-auto-grid,
    [b-wp50ifv0h1] .admin-table-row-content.admin-auto-grid.admin-grid-cols-4 {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
        gap: var(--space-3) !important;
    }

    [b-wp50ifv0h1] .admin-auto-grid .admin-table-cell,
    [b-wp50ifv0h1] .admin-auto-grid .admin-table-cell-primary {
        display: flex !important;
        padding: 0 !important;
        width: 100% !important;
    }

    [b-wp50ifv0h1] .admin-auto-grid .admin-table-cell::before,
    [b-wp50ifv0h1] .admin-auto-grid .admin-table-cell-primary::before {
        display: none !important;
    }

    .tv-row-chevron[b-wp50ifv0h1] {
        display: none;
    }
}

/* ==========================================================================
   SMALL SCREENS (767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {
    .tv-form-actions[b-wp50ifv0h1] {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .tv-form-actions-right[b-wp50ifv0h1] {
        flex-direction: column-reverse;
        margin-left: 0;
    }

    .tv-cancel-btn[b-wp50ifv0h1],
    .tv-save-btn[b-wp50ifv0h1],
    .tv-delete-btn[b-wp50ifv0h1] {
        width: 100%;
        justify-content: center;
    }

    .admin-empty-state[b-wp50ifv0h1] {
        padding: var(--space-12) var(--space-5);
    }

    .tv-form-grid-2col[b-wp50ifv0h1] {
        grid-template-columns: 1fr;
    }

    .tv-form-span-2[b-wp50ifv0h1] {
        grid-column: span 1;
    }

    .tv-duration-grid[b-wp50ifv0h1] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .tv-duration-grid[b-wp50ifv0h1] {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .tv-skeleton[b-wp50ifv0h1],
    [b-wp50ifv0h1] .admin-table-row,
    .tv-avatar[b-wp50ifv0h1],
    .tv-row-chevron[b-wp50ifv0h1],
    .tv-form-input[b-wp50ifv0h1],
    [b-wp50ifv0h1] .tv-form-input,
    .tv-cancel-btn[b-wp50ifv0h1],
    .tv-save-btn[b-wp50ifv0h1],
    .tv-delete-btn[b-wp50ifv0h1],
    .tv-empty-btn[b-wp50ifv0h1],
    .tv-retry-btn[b-wp50ifv0h1],
    .tv-toggle-track[b-wp50ifv0h1],
    .tv-toggle-thumb[b-wp50ifv0h1],
    .tv-toggle--highlight[b-wp50ifv0h1],
    .modern-dropdown-trigger[b-wp50ifv0h1],
    .modern-dropdown-item[b-wp50ifv0h1],
    .modern-dropdown-chevron[b-wp50ifv0h1],
    .admin-alert-dismiss[b-wp50ifv0h1] {
        transition: none;
        animation: none;
    }

    .admin-table-card[b-wp50ifv0h1],
    .admin-empty-state[b-wp50ifv0h1],
    .tv-modal-error[b-wp50ifv0h1],
    .modern-dropdown-menu[b-wp50ifv0h1] {
        animation: none;
    }

    .tv-spinner[b-wp50ifv0h1] {
        animation: none;
    }
}

/* ==========================================================================
   FOCUS STATES
   ========================================================================== */
.tv-cancel-btn:focus-visible[b-wp50ifv0h1],
.tv-save-btn:focus-visible[b-wp50ifv0h1],
.tv-delete-btn:focus-visible[b-wp50ifv0h1],
.tv-empty-btn:focus-visible[b-wp50ifv0h1],
.tv-retry-btn:focus-visible[b-wp50ifv0h1],
.admin-alert-dismiss:focus-visible[b-wp50ifv0h1],
.modern-dropdown-trigger:focus-visible[b-wp50ifv0h1] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

[b-wp50ifv0h1] .tv-form-input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .admin-table-card[b-wp50ifv0h1] {
        border: 1px solid #ddd;
        box-shadow: none;
        background: var(--color-bg-primary);
    }

    .tv-row-chevron[b-wp50ifv0h1],
    .tv-avatar[b-wp50ifv0h1] {
        display: none;
    }
}
/* /Components/Pages/Admin/UsersAdmin.razor.rz.scp.css */
/* ========================================
   USERS ADMIN — 2026 Design System
   Scoped styles for /admin/users
   Solid surfaces, flat backgrounds, bordered inputs
   ======================================== */

/* ----------------------------------------
   RISE ANIMATION (standard entrance)
   ---------------------------------------- */
@keyframes rise-b-332vy8sae4 {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------
   POP-IN ANIMATION (dropdown menus)
   ---------------------------------------- */
@keyframes popIn-b-332vy8sae4 {
    from {
        opacity: 0;
        transform: scale(0.98) translateY(-6px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ----------------------------------------
   ALERT SPACING (AppAlert Integration)
   ---------------------------------------- */
.admin-container[b-332vy8sae4] >  .app-alert {
    margin-bottom: var(--space-5);
}

/* ----------------------------------------
   FILTER FIELDS (in AdminPageHeader <Filters>)
   ---------------------------------------- */
.filter-field[b-332vy8sae4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    flex: 1;
}

.filter-field-label[b-332vy8sae4] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 18px;
    height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Filter input with search icon */
.filter-input-wrapper[b-332vy8sae4] {
    position: relative;
    width: 100%;
    height: 44px;
}

.filter-search-icon[b-332vy8sae4] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: var(--space-4);
    height: var(--space-4);
    color: var(--color-text-muted);
    pointer-events: none;
    z-index: 1;
}

[b-332vy8sae4] .filter-input,
.filter-input[b-332vy8sae4],
.filter-input-wrapper input[b-332vy8sae4],
.filter-input-wrapper[b-332vy8sae4]  input {
    width: 100%;
    height: 44px !important;
    padding: 0 14px 0 42px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    box-sizing: border-box;
}

/* Override global Inputs.css 52px for ALL input types in filter fields */
.filter-field input[b-332vy8sae4],
.filter-field[b-332vy8sae4]  input,
.filter-field input[type="date"][b-332vy8sae4],
.filter-field[b-332vy8sae4]  input[type="date"],
.filter-field input[type="number"][b-332vy8sae4],
.filter-field[b-332vy8sae4]  input[type="number"],
.filter-field input[type="text"][b-332vy8sae4],
.filter-field[b-332vy8sae4]  input[type="text"],
.filters-grid input[b-332vy8sae4],
.filters-grid[b-332vy8sae4]  input {
    height: 44px !important;
    box-sizing: border-box;
}

/* Native select filter input */
.filter-field select.filter-input[b-332vy8sae4],
select.filter-input[b-332vy8sae4] {
    width: 100%;
    height: 44px !important;
    padding: 0 14px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    box-sizing: border-box;
    cursor: pointer;
    appearance: auto;
}

[b-332vy8sae4] .filter-input:hover,
.filter-input:hover[b-332vy8sae4] {
    border-color: var(--color-border-secondary);
}

[b-332vy8sae4] .filter-input:focus,
.filter-input:focus[b-332vy8sae4] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

[b-332vy8sae4] .filter-input::placeholder,
.filter-input[b-332vy8sae4]::placeholder {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-normal);
}

/* ----------------------------------------
   TABLE CARD WRAPPER — Solid Surface
   ---------------------------------------- */
.admin-table-card[b-332vy8sae4] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    margin-top: var(--space-5);
    box-shadow: var(--shadow-sm);
    animation: rise-b-332vy8sae4 .45s cubic-bezier(.4, 0, .2, 1) both;
}

/* Remove borders from individual rows — use separators */
[b-332vy8sae4] .admin-table-row {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
}

[b-332vy8sae4] .admin-table-row:not(:last-child) {
}

[b-332vy8sae4] .admin-table-row:hover {
    background: var(--color-bg-secondary);
    box-shadow: none;
    border-color: transparent;
}

/* Table rows container — remove gap since we use borders */
[b-332vy8sae4] .admin-table-rows {
    gap: 0;
}

/* Header styling */
[b-332vy8sae4] .admin-table-header {
    background: var(--color-bg-secondary);
    margin-bottom: 0;
    padding: var(--space-4) 0;
}

/* Table container — remove margin */
[b-332vy8sae4] .admin-table-container {
    margin-top: 0;
}

/* ----------------------------------------
   LOADING STATE (LoadingSpinner Integration)
   ---------------------------------------- */
.table-loading-state[b-332vy8sae4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-8);
    color: var(--color-text-secondary);
}

.table-loading-state[b-332vy8sae4]  .loading-spinner-container {
    flex-direction: column;
    gap: var(--space-4);
}

.table-loading-state[b-332vy8sae4]  .loading-spinner--lg {
    width: 40px;
    height: 40px;
}

.table-loading-state[b-332vy8sae4]  .loading-text {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* ----------------------------------------
   EMPTY STATE
   ---------------------------------------- */
.table-empty-state[b-332vy8sae4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-8);
    text-align: center;
}

.empty-icon[b-332vy8sae4] {
    width: var(--space-16);
    height: var(--space-16);
    color: var(--color-text-light);
    margin-bottom: var(--space-4);
}

.empty-icon svg[b-332vy8sae4] {
    width: 100%;
    height: 100%;
}

.empty-title[b-332vy8sae4] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
}

.empty-text[b-332vy8sae4] {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
}

/* ----------------------------------------
   USER EMAIL CELL — Avatar + Email
   ---------------------------------------- */
.user-email-cell[b-332vy8sae4] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.user-avatar[b-332vy8sae4] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-bg-primary);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-email[b-332vy8sae4] {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----------------------------------------
   CATEGORY BADGE
   ---------------------------------------- */
.category-badge[b-332vy8sae4] {
    display: inline-flex;
    padding: var(--space-1) 10px;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

/* ----------------------------------------
   ROLE BADGES — Flat backgrounds
   ---------------------------------------- */
.roles-container[b-332vy8sae4] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.role-badge[b-332vy8sae4] {
    display: inline-flex;
    padding: 3px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.role-badge-admin[b-332vy8sae4] {
    background: var(--color-error-light);
    color: var(--color-error);
}

.role-badge-dispatcher[b-332vy8sae4] {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.role-badge-driver[b-332vy8sae4] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.role-badge-cashier[b-332vy8sae4] {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.role-badge-default[b-332vy8sae4] {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

.role-badge-more[b-332vy8sae4] {
    background: var(--color-bg-tertiary);
    color: var(--color-text-muted);
    cursor: help;
}

/* ----------------------------------------
   STATUS BADGES — Flat backgrounds
   ---------------------------------------- */
.status-badge[b-332vy8sae4] {
    display: inline-flex;
    align-items: center;
    gap: var(--radius-sm);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
}

.status-dot[b-332vy8sae4] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-active[b-332vy8sae4] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.status-active .status-dot[b-332vy8sae4] {
    background: var(--color-success);
}

.status-disabled[b-332vy8sae4] {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.status-disabled .status-dot[b-332vy8sae4] {
    background: var(--color-warning);
}

.status-deactivated[b-332vy8sae4] {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

.status-deactivated .status-dot[b-332vy8sae4] {
    background: var(--color-text-muted);
}

/* ----------------------------------------
   DEACTIVATED USER ROW
   ---------------------------------------- */
[b-332vy8sae4] .user-deactivated {
    opacity: 0.6;
    background-color: var(--color-bg-secondary);
}

[b-332vy8sae4] .user-deactivated:hover {
    opacity: 0.8;
}

/* ----------------------------------------
   GRID COLUMNS OVERRIDE
   ---------------------------------------- */
[b-332vy8sae4] .admin-grid-cols-6 {
    --admin-grid-cols: 6;
}

/* Ensure dropdown menus are visible outside containers */
[b-332vy8sae4] .admin-search-card {
    overflow: visible;
}

/* ----------------------------------------
   MODAL ERROR — Flat background
   ---------------------------------------- */
.admin-modal-error[b-332vy8sae4] {
    background: var(--color-error-light);
    color: var(--color-error);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-4);
    border: 1px solid var(--color-error-border);
}

/* ----------------------------------------
   MODERN DROPDOWN (44px height to match filter inputs)
   ---------------------------------------- */
.modern-dropdown[b-332vy8sae4] {
    position: relative;
    width: 100%;
    height: 44px;
    flex-shrink: 0;
    outline: none;
    background: transparent !important;
    background-color: transparent !important;
}

.dropdown-trigger[b-332vy8sae4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    height: 44px;
    padding: 0 14px;
    background: var(--color-bg-primary) !important;
    background-color: var(--color-bg-primary) !important;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    box-shadow: none;
}

.dropdown-trigger:hover[b-332vy8sae4] {
    background: var(--color-bg-secondary) !important;
    background-color: var(--color-bg-secondary) !important;
    border-color: var(--color-border-secondary);
}

.modern-dropdown.open .dropdown-trigger[b-332vy8sae4] {
    border: 1px solid var(--color-primary);
    box-shadow: var(--shadow-focus);
    background: var(--color-bg-primary) !important;
    background-color: var(--color-bg-primary) !important;
}

.dropdown-content[b-332vy8sae4] {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.dropdown-value[b-332vy8sae4] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-placeholder[b-332vy8sae4] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    line-height: 1.4;
}

.dropdown-arrow[b-332vy8sae4] {
    color: var(--color-text-secondary);
    flex-shrink: 0;
    transition: transform 200ms cubic-bezier(.4, 0, .2, 1);
}

.dropdown-arrow.rotated[b-332vy8sae4] {
    transform: rotate(180deg);
}

/* Dropdown Menu — Solid surface */
.dropdown-menu[b-332vy8sae4] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    min-width: 220px;
    max-height: 320px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1001;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: popIn-b-332vy8sae4 0.18s cubic-bezier(.4, 0, .2, 1);
}

.dropdown-menu-wide[b-332vy8sae4] {
    min-width: 280px;
}

/* Dropdown Search */
.dropdown-search[b-332vy8sae4] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--space-3) 14px;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-primary);
}

.dropdown-search .search-icon[b-332vy8sae4] {
    color: var(--color-text-muted);
    flex-shrink: 0;
    position: static;
    transform: none;
    width: var(--space-4);
    height: var(--space-4);
}

.search-input[b-332vy8sae4] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    outline: none;
    min-width: 0;
    padding: 0;
    height: auto;
}

.search-input[b-332vy8sae4]::placeholder {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-normal);
}

/* Dropdown Options */
.dropdown-options[b-332vy8sae4] {
    overflow-y: auto;
    max-height: 260px;
    padding: var(--space-2);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-secondary) transparent;
}

.dropdown-options[b-332vy8sae4]::-webkit-scrollbar {
    width: 6px;
}

.dropdown-options[b-332vy8sae4]::-webkit-scrollbar-track {
    background: transparent;
}

.dropdown-options[b-332vy8sae4]::-webkit-scrollbar-thumb {
    background: var(--color-border-secondary);
    border-radius: 3px;
}

.dropdown-option[b-332vy8sae4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 10px var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.dropdown-option:hover[b-332vy8sae4] {
    background: var(--color-bg-secondary);
}

.dropdown-option.selected[b-332vy8sae4] {
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.dropdown-option.selected:hover[b-332vy8sae4] {
    background: var(--color-primary-light);
}

.option-content[b-332vy8sae4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.option-label[b-332vy8sae4] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.option-sublabel[b-332vy8sae4] {
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
}

.dropdown-option.selected .option-sublabel[b-332vy8sae4] {
    color: var(--color-primary);
}

.check-icon[b-332vy8sae4] {
    color: var(--color-primary);
    flex-shrink: 0;
}

.dropdown-empty[b-332vy8sae4] {
    padding: var(--space-5) 14px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* ----------------------------------------
   PAGINATION — Solid surface
   ---------------------------------------- */
.admin-pagination[b-332vy8sae4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-5);
    padding: var(--space-4);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    animation: rise-b-332vy8sae4 .45s cubic-bezier(.4, 0, .2, 1) both;
    animation-delay: 0.06s;
}

.admin-pagination-info[b-332vy8sae4] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.admin-pagination-controls[b-332vy8sae4] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.admin-pagination-btn[b-332vy8sae4] {
    min-width: 36px;
    height: 36px;
    padding: 0 var(--space-2);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-pagination-btn:hover:not(:disabled)[b-332vy8sae4] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
}

.admin-pagination-btn:disabled[b-332vy8sae4] {
    opacity: 0.4;
    cursor: not-allowed;
}

.admin-pagination-btn.active[b-332vy8sae4] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg-primary);
}

.admin-pagination-ellipsis[b-332vy8sae4] {
    padding: 0 var(--space-2);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
}

.admin-page-size-select[b-332vy8sae4] {
    height: 36px;
    padding: 0 var(--space-3);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
}

.admin-page-size-select:hover[b-332vy8sae4] {
    border-color: var(--color-border-secondary);
}

.admin-page-size-select:focus[b-332vy8sae4] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* ========================================
   MODAL — User Header (Edit Modal)
   ======================================== */
.modal-user-header[b-332vy8sae4] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
}

.modal-user-avatar[b-332vy8sae4] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-bg-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.modal-user-info[b-332vy8sae4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.modal-user-email[b-332vy8sae4] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-user-id[b-332vy8sae4] {
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
}

/* ========================================
   MODAL — Section Wrapper
   ======================================== */
.modal-section[b-332vy8sae4] {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
}

.modal-section:last-of-type[b-332vy8sae4] {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ========================================
   MODAL — Textarea
   ======================================== */
[b-332vy8sae4] .modal-textarea,
.modal-textarea[b-332vy8sae4] {
    min-height: 80px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}

/* ========================================
   MODAL — Document Upload Section
   ======================================== */
.doc-upload-section[b-332vy8sae4] {
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.doc-upload-grid[b-332vy8sae4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}

.doc-upload-field[b-332vy8sae4] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Custom file input — styled to match admin-input-simple */
.doc-file-input-wrapper[b-332vy8sae4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.doc-file-input-label[b-332vy8sae4] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 44px;
    padding: 0 14px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.doc-file-input-label:hover[b-332vy8sae4] {
    border-color: var(--color-border-secondary);
    background: var(--color-bg-secondary);
}

.doc-file-input-label svg[b-332vy8sae4] {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.doc-file-input-label span[b-332vy8sae4] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Hide the native file input */
[b-332vy8sae4] .doc-file-input-hidden,
.doc-file-input-hidden[b-332vy8sae4] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.doc-file-size[b-332vy8sae4] {
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
}

.doc-upload-actions[b-332vy8sae4] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: var(--space-1);
}

@media (max-width: 767.98px) {
    .doc-upload-grid[b-332vy8sae4] {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   MODAL — Roles Grid
   ======================================== */
.modal-roles-grid[b-332vy8sae4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

.checkbox-label[b-332vy8sae4] {
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    cursor: pointer;
}

/* ========================================
   MODAL — Security Grid
   ======================================== */
.modal-security-grid[b-332vy8sae4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.security-action-card[b-332vy8sae4] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
}

.security-action-card[b-332vy8sae4]  .admin-input-simple,
.security-action-card .admin-input-simple[b-332vy8sae4] {
    width: 100%;
}

.security-help-text[b-332vy8sae4] {
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.security-card-btn[b-332vy8sae4] {
    margin-top: auto;
}

/* ========================================
   MODAL — Account Actions
   ======================================== */
.modal-account-summary[b-332vy8sae4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--space-3) 14px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
}

.modal-account-action-row[b-332vy8sae4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: var(--space-1) 0;
}

.modal-account-action-info[b-332vy8sae4] {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.modal-account-summary-label[b-332vy8sae4] {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.modal-account-summary-value[b-332vy8sae4] {
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    white-space: nowrap;
}

.modal-deactivated-info[b-332vy8sae4] {
    display: block;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    padding: var(--space-2) 14px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    margin-top: var(--space-3);
}

/* Danger zone — delete user */
.modal-danger-zone[b-332vy8sae4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-4);
    padding: var(--space-4) 14px;
    background: var(--color-error-light);
    border: 1px solid var(--color-error-border);
    border-radius: var(--radius-md);
}

.modal-danger-zone-info[b-332vy8sae4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.modal-danger-zone-label[b-332vy8sae4] {
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-error);
}

.modal-danger-zone-desc[b-332vy8sae4] {
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
}

/* ========================================
   MODAL — Footer Actions
   ======================================== */
.users-modal-footer[b-332vy8sae4] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    width: 100%;
}

/* ========================================
   MODAL — Loading State
   ======================================== */
.modal-loading-state[b-332vy8sae4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-8);
    color: var(--color-text-secondary);
}

.modal-loading-state[b-332vy8sae4]  .loading-spinner-container {
    flex-direction: column;
    gap: var(--space-4);
}

/* ========================================
   MODAL — Delete Confirmation
   ======================================== */
.delete-confirm-content[b-332vy8sae4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-5) var(--space-4);
    gap: var(--space-4);
}

.modal-icon[b-332vy8sae4] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-icon--danger[b-332vy8sae4] {
    background: var(--color-error-light);
    color: var(--color-error);
}

.modal-icon svg[b-332vy8sae4] {
    width: 28px;
    height: 28px;
}

.delete-warning-text[b-332vy8sae4] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.delete-message-text[b-332vy8sae4] {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* ----------------------------------------
   RESPONSIVE — Large desktop
   ---------------------------------------- */
@media (min-width: 1200px) {
    .filter-field[b-332vy8sae4] {
        max-width: 260px;
    }
}

/* ----------------------------------------
   RESPONSIVE — Tablet
   ---------------------------------------- */
@media (max-width: 991.98px) {
    .filter-field[b-332vy8sae4] {
        min-width: 160px;
        max-width: none;
        flex: 1 1 calc(50% - var(--space-2));
    }
}

/* ----------------------------------------
   RESPONSIVE — Mobile
   ---------------------------------------- */
@media (max-width: 767.98px) {
    .filter-field[b-332vy8sae4] {
        width: 100%;
        min-width: auto;
        max-width: none;
        flex: none;
    }

    .dropdown-trigger[b-332vy8sae4] {
        height: 44px;
    }

    .dropdown-menu[b-332vy8sae4] {
        position: fixed;
        left: var(--space-4);
        right: var(--space-4);
        width: auto;
        min-width: auto;
        max-height: 50vh;
    }

    .user-avatar[b-332vy8sae4] {
        display: none;
    }

    .roles-container[b-332vy8sae4] {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-pagination[b-332vy8sae4] {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-pagination-info[b-332vy8sae4] {
        text-align: center;
    }

    .admin-pagination-controls[b-332vy8sae4] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .admin-page-size-select[b-332vy8sae4] {
        width: 100%;
    }

    /* Modal responsive - mobile */
    .modal-user-header[b-332vy8sae4] {
        padding: var(--space-4);
        gap: var(--space-3);
    }

    .modal-user-avatar[b-332vy8sae4] {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .modal-security-grid[b-332vy8sae4] {
        grid-template-columns: 1fr;
    }

    .modal-roles-grid[b-332vy8sae4] {
        grid-template-columns: 1fr;
    }

    .modal-account-action-row[b-332vy8sae4] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .modal-danger-zone[b-332vy8sae4] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ----------------------------------------
   RESPONSIVE — Small mobile
   ---------------------------------------- */
@media (max-width: 575.98px) {
    .admin-table-card[b-332vy8sae4] {
        border-radius: var(--radius-lg);
        margin-top: var(--space-4);
    }

    .table-empty-state[b-332vy8sae4],
    .table-loading-state[b-332vy8sae4] {
        padding: var(--space-10) var(--space-4);
    }

    .empty-icon[b-332vy8sae4] {
        width: 48px;
        height: 48px;
    }

    .dropdown-menu[b-332vy8sae4] {
        border-radius: var(--radius-lg);
    }

    .dropdown-option[b-332vy8sae4] {
        border-radius: var(--radius-md);
    }
}

/* ----------------------------------------
   FOCUS STATES & ACCESSIBILITY
   ---------------------------------------- */
.filter-input:focus-visible[b-332vy8sae4] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.modern-dropdown:focus-visible .dropdown-trigger[b-332vy8sae4] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.admin-pagination-btn:focus-visible[b-332vy8sae4] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.admin-page-size-select:focus-visible[b-332vy8sae4] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ----------------------------------------
   REDUCED MOTION
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .dropdown-trigger[b-332vy8sae4],
    .dropdown-arrow[b-332vy8sae4],
    .dropdown-option[b-332vy8sae4],
    .dropdown-menu[b-332vy8sae4],
    .filter-input[b-332vy8sae4],
    .admin-pagination-btn[b-332vy8sae4],
    .admin-page-size-select[b-332vy8sae4],
    .modal-checkbox-row[b-332vy8sae4] {
        transition: none;
    }

    .dropdown-menu[b-332vy8sae4],
    .admin-table-card[b-332vy8sae4],
    .admin-pagination[b-332vy8sae4] {
        animation: none;
    }
}

/* ----------------------------------------
   DROPDOWN OVERRIDES (Blazor scoped CSS)
   ---------------------------------------- */
.modern-dropdown .dropdown-trigger[b-332vy8sae4],
.filter-field .modern-dropdown .dropdown-trigger[b-332vy8sae4] {
    background-color: var(--color-bg-primary) !important;
    background: var(--color-bg-primary) !important;
    border: 1px solid var(--color-border-primary);
    box-shadow: none;
}

.modern-dropdown .dropdown-trigger:hover[b-332vy8sae4],
.filter-field .modern-dropdown .dropdown-trigger:hover[b-332vy8sae4] {
    background: var(--color-bg-secondary) !important;
    background-color: var(--color-bg-secondary) !important;
    border-color: var(--color-border-secondary);
}

.modern-dropdown.open .dropdown-trigger[b-332vy8sae4],
.filter-field .modern-dropdown.open .dropdown-trigger[b-332vy8sae4] {
    border: 1px solid var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.modern-dropdown .dropdown-content[b-332vy8sae4] {
    background: transparent !important;
    background-color: transparent !important;
}

/* ----------------------------------------
   PRINT
   ---------------------------------------- */
@media print {
    .admin-search-card[b-332vy8sae4] {
        display: none;
    }

    .admin-table-card[b-332vy8sae4] {
        border: 1px solid #000;
        box-shadow: none;
        background: var(--color-bg-primary);
    }

    .admin-grid-actions[b-332vy8sae4] {
        display: none;
    }

    .admin-pagination[b-332vy8sae4] {
        display: none;
    }

    .modal-user-header[b-332vy8sae4],
    .security-action-card[b-332vy8sae4],
    .modal-account-summary[b-332vy8sae4],
    .modal-deactivated-info[b-332vy8sae4] {
        border: 1px solid #000;
    }
}
/* /Components/Pages/Admin/Zones.razor.rz.scp.css */
/* ========================================
   ADMIN ZONES — Premium 2026 Redesign
   Solid surfaces, design tokens, rise animation
   ======================================== */

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes rise-b-nivrdrdl2t {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-shimmer-b-nivrdrdl2t {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes spin-b-nivrdrdl2t {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Grid Column Definition
   ========================================================================== */
[b-nivrdrdl2t] .admin-grid-cols-3 {
    --admin-grid-cols: 3;
}

/* ==========================================================================
   TABLE CARD — Solid surface
   ========================================================================== */
.admin-table-card[b-nivrdrdl2t] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    margin-top: var(--space-5);
    box-shadow: var(--shadow-sm);
    animation: rise-b-nivrdrdl2t 0.45s cubic-bezier(.4, 0, .2, 1) both;
    overflow: hidden;
}

[b-nivrdrdl2t] .admin-table-container {
    margin-top: 0;
}

[b-nivrdrdl2t] .admin-table-header {
    background: var(--color-bg-secondary);
    margin-bottom: 0;
    padding: var(--space-4) 0;
    border-radius: 0;
}

[b-nivrdrdl2t] .admin-table-rows {
    gap: 0;
}

[b-nivrdrdl2t] .admin-table-row {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    padding: 0 var(--space-4);
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
    display: flex;
    align-items: center;
}

/* Prevent cell overflow:hidden from clipping the zone avatar */
[b-nivrdrdl2t] .admin-auto-grid .admin-table-cell-primary {
    overflow: visible;
}

[b-nivrdrdl2t] .admin-table-row:hover {
    background: var(--color-bg-secondary);
    box-shadow: none;
    transform: none;
}

[b-nivrdrdl2t] .admin-table-row:not(:last-child) {
    border-bottom: 1px solid var(--color-border-primary);
}

/* ==========================================================================
   ZONE ROW — Avatar + Name + Badge + Code + Chevron
   ========================================================================== */
.zn-name-cell[b-nivrdrdl2t] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

/* Zone avatar — 8 distinct transit-inspired colors per zone */
.zn-avatar[b-nivrdrdl2t] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: var(--radius-lg);
    color: var(--color-text-inverse);
    transition: transform 0.2s, box-shadow 0.2s;
}

.zn-avatar svg[b-nivrdrdl2t] {
    width: 16px;
    height: 16px;
}

/* ── Zone Avatar Colors ─────────────────────────────────────────────
   Official ATSK Autotransport Karlovac transit zone colors.
   Matches the printed ticket / pricing board palette exactly.
   ────────────────────────────────────────────────────────────────── */

/* Zone 0 — Neutral (Bez zone) · White outline style */
.zn-avatar--neutral[b-nivrdrdl2t] {
    background: linear-gradient(135deg, #E2E8F0 0%, #F1F5F9 100%);
    color: #64748B;
    border: 1.5px solid #CBD5E1;
}

/* Zone 1 — Blue · Official ATSK Z1 */
.zn-avatar--blue[b-nivrdrdl2t] {
    background: linear-gradient(135deg, #1A7CCA 0%, #4BA3E3 100%);
}

/* Zone 2 — Green · Official ATSK Z2 */
.zn-avatar--green[b-nivrdrdl2t] {
    background: linear-gradient(135deg, #2E9D3E 0%, #5BBD6B 100%);
}

/* Zone 3 — Yellow/Gold · Official ATSK Z3 */
.zn-avatar--yellow[b-nivrdrdl2t] {
    background: linear-gradient(135deg, #E8B800 0%, #FFD642 100%);
    color: #422006;
}

/* Zone 4 — Red · Official ATSK Z4 */
.zn-avatar--red[b-nivrdrdl2t] {
    background: linear-gradient(135deg, #D42B2B 0%, #EF5350 100%);
}

/* Zone 5 — Magenta/Pink · Official ATSK Z5 */
.zn-avatar--magenta[b-nivrdrdl2t] {
    background: linear-gradient(135deg, #C2185B 0%, #E91E90 100%);
}

/* Zone 6 — Gray · Official ATSK Z6 */
.zn-avatar--gray[b-nivrdrdl2t] {
    background: linear-gradient(135deg, #78909C 0%, #A4B5BF 100%);
}

/* Zone 7 — Black · Official ATSK Z7 */
.zn-avatar--black[b-nivrdrdl2t] {
    background: linear-gradient(135deg, #1E293B 0%, #475569 100%);
}

[b-nivrdrdl2t] .admin-table-row:hover .zn-avatar {
    transform: scale(1.06);
}

.zn-name-group[b-nivrdrdl2t] {
    min-width: 0;
}

.zn-name[b-nivrdrdl2t] {
    font-weight: var(--font-weight-semibold);
    font-size: 14px;
    color: var(--color-text-primary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Zone number badge — color-coded pill */
.zn-zone-badge[b-nivrdrdl2t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 26px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    font-weight: var(--font-weight-semibold);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Zone 0 — Neutral */
.zn-badge--neutral[b-nivrdrdl2t] {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    color: var(--color-text-secondary);
}

/* Zone 1 — Blue */
.zn-badge--blue[b-nivrdrdl2t] {
    background: rgba(26, 124, 202, 0.10);
    border: 1px solid rgba(26, 124, 202, 0.22);
    color: #1568A8;
}

/* Zone 2 — Green */
.zn-badge--green[b-nivrdrdl2t] {
    background: rgba(46, 157, 62, 0.10);
    border: 1px solid rgba(46, 157, 62, 0.22);
    color: #1B7D2B;
}

/* Zone 3 — Yellow */
.zn-badge--yellow[b-nivrdrdl2t] {
    background: rgba(232, 184, 0, 0.12);
    border: 1px solid rgba(232, 184, 0, 0.28);
    color: #92400E;
}

/* Zone 4 — Red */
.zn-badge--red[b-nivrdrdl2t] {
    background: rgba(212, 43, 43, 0.10);
    border: 1px solid rgba(212, 43, 43, 0.22);
    color: #B91C1C;
}

/* Zone 5 — Magenta */
.zn-badge--magenta[b-nivrdrdl2t] {
    background: rgba(194, 24, 91, 0.10);
    border: 1px solid rgba(194, 24, 91, 0.22);
    color: #9D174D;
}

/* Zone 6 — Gray */
.zn-badge--gray[b-nivrdrdl2t] {
    background: rgba(120, 144, 156, 0.12);
    border: 1px solid rgba(120, 144, 156, 0.22);
    color: #546E7A;
}

/* Zone 7 — Black */
.zn-badge--black[b-nivrdrdl2t] {
    background: rgba(30, 41, 59, 0.10);
    border: 1px solid rgba(30, 41, 59, 0.20);
    color: #1E293B;
}

/* Code badge */
.zn-code-badge[b-nivrdrdl2t] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) 10px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace;
    color: var(--color-text-secondary);
    letter-spacing: 0.04em;
}

/* Row chevron */
.zn-row-chevron[b-nivrdrdl2t] {
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    margin-left: auto;
    flex-shrink: 0;
}

[b-nivrdrdl2t] .admin-table-row:hover .zn-row-chevron {
    opacity: 0.5;
    transform: translateX(2px);
}

/* ==========================================================================
   Alert Enhancements
   ========================================================================== */
.admin-alert[b-nivrdrdl2t] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.admin-alert-icon[b-nivrdrdl2t] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.zn-retry-btn[b-nivrdrdl2t] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-1) var(--space-3);
    background: transparent;
    border: 1px solid currentColor;
    border-radius: var(--radius-md);
    color: inherit;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background 200ms;
    font-family: inherit;
    white-space: nowrap;
    opacity: 0.8;
}

.zn-retry-btn:hover[b-nivrdrdl2t] {
    opacity: 1;
    background: rgba(0, 0, 0, 0.05);
}

.zn-retry-btn:disabled[b-nivrdrdl2t] {
    opacity: 0.5;
    cursor: not-allowed;
}

.zn-retry-btn svg[b-nivrdrdl2t] {
    width: 14px;
    height: 14px;
}

.admin-alert-dismiss[b-nivrdrdl2t] {
    margin-left: auto;
    background: transparent;
    border: none;
    padding: var(--space-1);
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: inherit;
    opacity: 0.6;
    transition: opacity 200ms;
}

.admin-alert-dismiss:hover[b-nivrdrdl2t] {
    opacity: 1;
}

.admin-alert-dismiss svg[b-nivrdrdl2t] {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   Loading Skeleton
   ========================================================================== */
.zn-loading-state[b-nivrdrdl2t] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.zn-skeleton-row[b-nivrdrdl2t] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
}

.zn-skeleton-row:not(:last-child)[b-nivrdrdl2t] {
    border-bottom: 1px solid var(--color-border-primary);
}

.zn-skeleton[b-nivrdrdl2t] {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-border-primary) 37%, var(--color-bg-tertiary) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer-b-nivrdrdl2t 1.8s ease infinite;
    border-radius: var(--radius-sm);
}

.zn-skeleton-avatar[b-nivrdrdl2t] {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: var(--radius-lg);
}

.zn-skeleton-text[b-nivrdrdl2t] {
    width: 180px;
    max-width: 30%;
    height: 16px;
}

.zn-skeleton-code[b-nivrdrdl2t] {
    width: 60px;
    height: 24px;
    border-radius: var(--radius-md);
}

/* ==========================================================================
   Empty State
   ========================================================================== */
.admin-empty-state[b-nivrdrdl2t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-16) var(--space-8);
    animation: rise-b-nivrdrdl2t 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

.zn-empty-icon[b-nivrdrdl2t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: 50%;
    margin-bottom: var(--space-5);
}

.zn-empty-icon svg[b-nivrdrdl2t] {
    width: 28px;
    height: 28px;
    color: var(--color-text-muted);
}

.admin-empty-state-title[b-nivrdrdl2t] {
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
}

.admin-empty-state-text[b-nivrdrdl2t] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-6) 0;
    max-width: 400px;
}

.zn-empty-btn[b-nivrdrdl2t] {
    height: 38px;
    padding: 0 var(--space-5);
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-inverse);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: background 200ms, border-color 200ms;
    font-family: inherit;
}

.zn-empty-btn:hover[b-nivrdrdl2t] {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.zn-empty-btn svg[b-nivrdrdl2t] {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   Modern Dropdown (Sort By / Order Filters)
   ========================================================================== */
.modern-dropdown[b-nivrdrdl2t] {
    position: relative;
    outline: none;
}

.modern-dropdown-trigger[b-nivrdrdl2t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 44px;
    padding: 0 var(--space-3);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: border-color 200ms, box-shadow 200ms;
    font-family: inherit;
    gap: var(--space-2);
    text-align: left;
}

.modern-dropdown-trigger:hover[b-nivrdrdl2t] {
    border-color: var(--color-border-secondary);
}

.modern-dropdown-trigger:focus[b-nivrdrdl2t],
.modern-dropdown-trigger[aria-expanded="true"][b-nivrdrdl2t] {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.modern-dropdown-chevron[b-nivrdrdl2t] {
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    flex-shrink: 0;
    transition: transform 200ms;
}

.modern-dropdown-chevron.open[b-nivrdrdl2t] {
    transform: rotate(180deg);
}

.modern-dropdown-menu[b-nivrdrdl2t] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    overflow: hidden;
    padding: var(--space-1) 0;
    animation: rise-b-nivrdrdl2t 0.15s cubic-bezier(.4, 0, .2, 1) both;
}

.modern-dropdown-item[b-nivrdrdl2t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: none;
    border: none;
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 150ms;
    text-align: left;
    font-family: inherit;
    gap: var(--space-2);
}

.modern-dropdown-item:hover[b-nivrdrdl2t] {
    background: var(--color-bg-secondary);
}

.modern-dropdown-item.selected[b-nivrdrdl2t] {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.modern-dropdown-check[b-nivrdrdl2t] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--color-primary);
}

/* Zone filter dropdown — option with colored dot */
.zn-filter-zone-option[b-nivrdrdl2t] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.zn-filter-zone-dot[b-nivrdrdl2t] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.zn-filter-zone-dot.zn-badge--neutral[b-nivrdrdl2t] {
    background: #94A3B8;
}

.zn-filter-zone-dot.zn-badge--blue[b-nivrdrdl2t] {
    background: #1A7CCA;
}

.zn-filter-zone-dot.zn-badge--green[b-nivrdrdl2t] {
    background: #2E9D3E;
}

.zn-filter-zone-dot.zn-badge--yellow[b-nivrdrdl2t] {
    background: #E8B800;
}

.zn-filter-zone-dot.zn-badge--red[b-nivrdrdl2t] {
    background: #D42B2B;
}

.zn-filter-zone-dot.zn-badge--magenta[b-nivrdrdl2t] {
    background: #C2185B;
}

.zn-filter-zone-dot.zn-badge--gray[b-nivrdrdl2t] {
    background: #78909C;
}

.zn-filter-zone-dot.zn-badge--black[b-nivrdrdl2t] {
    background: #1E293B;
}

/* ==========================================================================
   PAGINATION — Premium (StationsAdmin pattern)
   ========================================================================== */
.an-pagination[b-nivrdrdl2t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border-primary);
    background: var(--color-bg-secondary);
}

.an-pagination-info[b-nivrdrdl2t] {
    font-family: var(--font-family-base);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-muted);
    white-space: nowrap;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}

.an-pagination-controls[b-nivrdrdl2t] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.an-page-nav[b-nivrdrdl2t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all 0.2s cubic-bezier(.4, 0, .2, 1);
    flex-shrink: 0;
}

.an-page-nav:hover:not(:disabled)[b-nivrdrdl2t] {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.an-page-nav:active:not(:disabled)[b-nivrdrdl2t] {
    transform: translateY(0);
    box-shadow: none;
}

.an-page-nav:disabled[b-nivrdrdl2t] {
    opacity: 0.25;
    cursor: default;
}

.an-page-numbers[b-nivrdrdl2t] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.an-page-num[b-nivrdrdl2t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 4px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-family: var(--font-family-base);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    color: var(--color-text-secondary);
    transition: all 0.2s cubic-bezier(.4, 0, .2, 1);
    font-variant-numeric: tabular-nums;
}

.an-page-num:hover:not(.active)[b-nivrdrdl2t] {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary);
}

.an-page-num.active[b-nivrdrdl2t] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: 600;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-primary);
}

.an-page-ellipsis[b-nivrdrdl2t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 36px;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    user-select: none;
}

.an-page-size[b-nivrdrdl2t] {
    height: 36px;
    padding: 0 30px 0 12px;
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    font-family: var(--font-family-base);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 3.75L5 6.25L7.5 3.75' stroke='%2394A3B8' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: all 0.2s cubic-bezier(.4, 0, .2, 1);
    font-variant-numeric: tabular-nums;
}

.an-page-size:hover[b-nivrdrdl2t] {
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
    background-color: var(--color-bg-secondary);
}

.an-page-size:focus[b-nivrdrdl2t] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
    background-color: var(--color-bg-primary);
}

/* ==========================================================================
   MODAL FORM — Flat layout
   ========================================================================== */
.zn-form[b-nivrdrdl2t] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.zn-form-row-2col[b-nivrdrdl2t] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.zn-form-field[b-nivrdrdl2t] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.zn-form-label[b-nivrdrdl2t] {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.zn-form-req[b-nivrdrdl2t] {
    color: var(--color-error);
    font-weight: var(--font-weight-bold);
}

.zn-form-input[b-nivrdrdl2t] {
    width: 100%;
    height: 40px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    transition: border-color 200ms, box-shadow 200ms;
    box-sizing: border-box;
    font-family: inherit;
}

.zn-form-input:hover[b-nivrdrdl2t] {
    border-color: var(--color-border-secondary);
}

.zn-form-input:focus[b-nivrdrdl2t] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.zn-form-input[b-nivrdrdl2t]::placeholder {
    color: var(--color-text-muted);
}

[b-nivrdrdl2t] .zn-form-input {
    width: 100%;
    height: 40px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    transition: border-color 200ms, box-shadow 200ms;
    box-sizing: border-box;
    font-family: inherit;
}

[b-nivrdrdl2t] .zn-form-input:hover {
    border-color: var(--color-border-secondary);
}

[b-nivrdrdl2t] .zn-form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

[b-nivrdrdl2t] .zn-form-input::placeholder {
    color: var(--color-text-muted);
}

.zn-form-error[b-nivrdrdl2t] {
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-error);
}

/* Modal error */
.zn-modal-error[b-nivrdrdl2t] {
    padding: var(--space-3) var(--space-4);
    background: var(--color-error-light);
    border: 1px solid var(--color-error-bright);
    border-radius: var(--radius-md);
    color: var(--color-error);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-4);
    animation: rise-b-nivrdrdl2t 0.45s cubic-bezier(.4, 0, .2, 1) both;
}

/* ==========================================================================
   FORM ACTIONS — Delete left, Cancel+Save right
   ========================================================================== */
.zn-form-actions[b-nivrdrdl2t] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-primary);
    margin-top: var(--space-5);
}

.zn-form-actions-right[b-nivrdrdl2t] {
    display: flex;
    gap: var(--space-3);
    margin-left: auto;
}

.zn-delete-btn[b-nivrdrdl2t] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-error);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background 200ms, color 200ms;
    font-family: inherit;
}

.zn-delete-btn:hover[b-nivrdrdl2t] {
    background: var(--color-error-light);
}

.zn-delete-btn svg[b-nivrdrdl2t] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.zn-cancel-btn[b-nivrdrdl2t] {
    height: 38px;
    padding: 0 var(--space-5);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 200ms, border-color 200ms, color 200ms;
    font-family: inherit;
}

.zn-cancel-btn:hover[b-nivrdrdl2t] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.zn-save-btn[b-nivrdrdl2t] {
    height: 38px;
    padding: 0 var(--space-5);
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-inverse);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: background 200ms, border-color 200ms;
    font-family: inherit;
}

.zn-save-btn:hover[b-nivrdrdl2t] {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.zn-save-btn:disabled[b-nivrdrdl2t] {
    opacity: 0.7;
    cursor: not-allowed;
}

.zn-save-btn svg[b-nivrdrdl2t] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.zn-spinner[b-nivrdrdl2t] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-nivrdrdl2t 0.6s linear infinite;
}

/* ==========================================================================
   MOBILE — Card Layout (991.98px)
   ========================================================================== */
@media (max-width: 991.98px) {
    .admin-table-card[b-nivrdrdl2t] {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        margin-top: var(--space-4);
        box-shadow: none !important;
        overflow: visible !important;
    }

    [b-nivrdrdl2t] .admin-table-header,
    [b-nivrdrdl2t] .admin-table-header.admin-auto-grid {
        display: none !important;
    }

    [b-nivrdrdl2t] .admin-table-rows {
        gap: var(--space-3) !important;
    }

    [b-nivrdrdl2t] .admin-table-row,
    [b-nivrdrdl2t] .admin-table-container .admin-table-row {
        border-radius: var(--radius-lg) !important;
        padding: var(--space-4) !important;
        background: var(--color-bg-primary) !important;
        border: 1px solid var(--color-border-primary) !important;
        box-shadow: var(--shadow-sm) !important;
        flex-wrap: wrap;
    }

    [b-nivrdrdl2t] .admin-table-row:hover {
        transform: none !important;
    }

    [b-nivrdrdl2t] .admin-table-row-content,
    [b-nivrdrdl2t] .admin-table-row-content.admin-auto-grid,
    [b-nivrdrdl2t] .admin-table-row-content.admin-auto-grid.admin-grid-cols-3 {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
        gap: var(--space-3) !important;
    }

    [b-nivrdrdl2t] .admin-auto-grid .admin-table-cell,
    [b-nivrdrdl2t] .admin-auto-grid .admin-table-cell-primary {
        display: flex !important;
        padding: 0 !important;
        width: 100% !important;
    }

    [b-nivrdrdl2t] .admin-auto-grid .admin-table-cell::before,
    [b-nivrdrdl2t] .admin-auto-grid .admin-table-cell-primary::before {
        display: none !important;
    }

    .zn-row-chevron[b-nivrdrdl2t] {
        display: none;
    }

    .an-pagination[b-nivrdrdl2t] {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-3);
        background: var(--color-bg-primary);
        border: 1px solid var(--color-border-primary);
        border-radius: var(--radius-2xl);
        box-shadow: var(--shadow-sm);
        margin-top: var(--space-4);
    }

    .an-pagination-info[b-nivrdrdl2t] {
        width: 100%;
        text-align: center;
        order: -1;
    }

    .an-page-size[b-nivrdrdl2t] {
        order: 3;
    }
}

/* ==========================================================================
   SMALL SCREENS (767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {
    .zn-form-actions[b-nivrdrdl2t] {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .zn-form-actions-right[b-nivrdrdl2t] {
        flex-direction: column-reverse;
        margin-left: 0;
    }

    .zn-cancel-btn[b-nivrdrdl2t],
    .zn-save-btn[b-nivrdrdl2t],
    .zn-delete-btn[b-nivrdrdl2t] {
        width: 100%;
        justify-content: center;
    }

    .admin-empty-state[b-nivrdrdl2t] {
        padding: var(--space-12) var(--space-5);
    }

    .zn-form-row-2col[b-nivrdrdl2t] {
        grid-template-columns: 1fr;
    }

    .an-pagination-controls[b-nivrdrdl2t] {
        order: 2;
    }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .zn-skeleton[b-nivrdrdl2t],
    [b-nivrdrdl2t] .admin-table-row,
    .zn-avatar[b-nivrdrdl2t],
    .zn-row-chevron[b-nivrdrdl2t],
    .zn-form-input[b-nivrdrdl2t],
    [b-nivrdrdl2t] .zn-form-input,
    .zn-cancel-btn[b-nivrdrdl2t],
    .zn-save-btn[b-nivrdrdl2t],
    .zn-delete-btn[b-nivrdrdl2t],
    .zn-empty-btn[b-nivrdrdl2t],
    .zn-retry-btn[b-nivrdrdl2t],
    .modern-dropdown-trigger[b-nivrdrdl2t],
    .modern-dropdown-item[b-nivrdrdl2t],
    .modern-dropdown-chevron[b-nivrdrdl2t],
    .admin-alert-dismiss[b-nivrdrdl2t],
    .an-page-nav[b-nivrdrdl2t],
    .an-page-num[b-nivrdrdl2t],
    .an-page-size[b-nivrdrdl2t] {
        transition: none;
        animation: none;
    }

    .admin-table-card[b-nivrdrdl2t],
    .admin-empty-state[b-nivrdrdl2t],
    .zn-modal-error[b-nivrdrdl2t],
    .modern-dropdown-menu[b-nivrdrdl2t] {
        animation: none;
    }

    .zn-spinner[b-nivrdrdl2t] {
        animation: none;
    }
}

/* ==========================================================================
   FOCUS STATES
   ========================================================================== */
.zn-cancel-btn:focus-visible[b-nivrdrdl2t],
.zn-save-btn:focus-visible[b-nivrdrdl2t],
.zn-delete-btn:focus-visible[b-nivrdrdl2t],
.zn-empty-btn:focus-visible[b-nivrdrdl2t],
.zn-retry-btn:focus-visible[b-nivrdrdl2t],
.admin-alert-dismiss:focus-visible[b-nivrdrdl2t],
.modern-dropdown-trigger:focus-visible[b-nivrdrdl2t],
.an-page-nav:focus-visible[b-nivrdrdl2t],
.an-page-num:focus-visible[b-nivrdrdl2t],
.an-page-size:focus-visible[b-nivrdrdl2t] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

[b-nivrdrdl2t] .zn-form-input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    .admin-table-card[b-nivrdrdl2t] {
        border: 1px solid #ddd;
        box-shadow: none;
        background: var(--color-bg-primary);
    }

    .zn-row-chevron[b-nivrdrdl2t],
    .zn-avatar[b-nivrdrdl2t] {
        display: none;
    }

    .an-pagination[b-nivrdrdl2t] {
        display: none;
    }
}
/* /Components/Pages/Auth/ConfirmEmail.razor.rz.scp.css */
/* ConfirmEmail Page - Scoped Overrides
   Base styles are in shared Auth.css */
/* /Components/Pages/Auth/ForgotPassword.razor.rz.scp.css */
/* ForgotPassword Page - Scoped Overrides
   Base styles are in shared Auth.css */
/* /Components/Pages/Auth/Login.razor.rz.scp.css */
/* Login Page - Scoped Overrides
   Base styles are in shared Auth.css */

#google-signin-button[b-tii5i8ne35] {
    width: 100%;
    margin-bottom: 0.875rem;
}
/* /Components/Pages/Auth/Register.razor.rz.scp.css */
/* Register Page - Scoped Overrides
   Base styles are in shared Auth.css */
/* /Components/Pages/Auth/VerifyResetCode.razor.rz.scp.css */
/* VerifyResetCode Page - Scoped Overrides
   Base styles are in shared Auth.css */

.code-input[b-kpsobbce8n] {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.75rem;
    padding-left: 1rem;
    font-family: var(--font-mono, 'Courier New', monospace);
}

.code-input[b-kpsobbce8n]::placeholder {
    letter-spacing: 0.75rem;
    font-weight: 400;
    opacity: 0.4;
}

.resend-section[b-kpsobbce8n] {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.resend-cooldown[b-kpsobbce8n] {
    color: var(--text-secondary, #6b7280);
    font-size: 0.875rem;
}

.resend-btn[b-kpsobbce8n] {
    background: none;
    border: none;
    color: var(--color-primary, #0066ff);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.resend-btn:hover:not(:disabled)[b-kpsobbce8n] {
    text-decoration: underline;
}

.resend-btn:disabled[b-kpsobbce8n] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/Pages/Legal/Contact.razor.rz.scp.css */
/* ========================================
   CONTACT PAGE – Clean, solid-surface design
   ======================================== */

/* ── Keyframes ──────────────────────── */
@keyframes rise-b-5rqpaqw0dt {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Layout ─────────────────────────── */
.contact-layout[b-5rqpaqw0dt] {
    width: 100%;
    padding-bottom: var(--space-12);
}

/* ── Hero ────────────────────────────── */
.contact-hero[b-5rqpaqw0dt] {
    padding: var(--space-2) 0 var(--space-6);
    animation: rise-b-5rqpaqw0dt .45s cubic-bezier(.4,0,.2,1) both;
}

.hero-title[b-5rqpaqw0dt] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1.15;
}

.hero-lead[b-5rqpaqw0dt] {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 6px 0 0;
    line-height: var(--line-height-normal);
}

/* ── Meta Card ──────────────────────── */
.meta-card[b-5rqpaqw0dt] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-5) 28px;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
    animation: rise-b-5rqpaqw0dt .45s cubic-bezier(.4,0,.2,1) .06s both;
}

.meta-title[b-5rqpaqw0dt] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

/* ── Content Card ───────────────────── */
.content-card[b-5rqpaqw0dt] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    animation: rise-b-5rqpaqw0dt .45s cubic-bezier(.4,0,.2,1) .12s both;
}

/* ── Dynamic HTML Content Typography ── */
.content-card h2[b-5rqpaqw0dt] {
    font-weight: var(--font-weight-bold);
    font-size: 22px;
    line-height: var(--line-height-snug);
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
    margin: 36px 0 18px 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.content-card h2[b-5rqpaqw0dt]::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 26px;
    background: var(--color-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

.content-card h2:first-child[b-5rqpaqw0dt] {
    margin-top: 0;
}

.content-card h3[b-5rqpaqw0dt] {
    font-weight: var(--font-weight-bold);
    font-size: 17px;
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    margin: var(--space-6) 0 14px 0;
}

.content-card h4[b-5rqpaqw0dt] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-dark-tertiary, #334155);
    margin: var(--space-5) 0 10px 0;
}

.content-card p[b-5rqpaqw0dt] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4) 0;
}

.content-card ul[b-5rqpaqw0dt],
.content-card ol[b-5rqpaqw0dt] {
    margin: 0 0 var(--space-5) 0;
    padding-left: 28px;
}

.content-card li[b-5rqpaqw0dt] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: 10px;
}

.content-card a[b-5rqpaqw0dt] {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: color .2s ease;
}

.content-card a:hover[b-5rqpaqw0dt] {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.content-card strong[b-5rqpaqw0dt] {
    font-weight: var(--font-weight-bold);
    color: var(--color-dark-secondary, #1E293B);
}

/* ── Special Content Blocks ─────────── */

/* Intro Section */
.intro-section[b-5rqpaqw0dt] {
    background: var(--color-primary-light, rgba(26, 124, 202, .06));
    border-radius: var(--radius-xl);
    padding: var(--space-6) 28px;
    border: 1px solid rgba(26, 124, 202, 0.1);
    margin-bottom: 28px;
}

.intro-text[b-5rqpaqw0dt] {
    font-size: var(--font-size-md);
    line-height: 1.7;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
    margin: 0 !important;
}

/* Contact Info Box */
.contact-info[b-5rqpaqw0dt] {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-6);
    margin: var(--space-4) 0;
    border: 1px solid var(--color-border-primary);
    transition: border-color .2s ease;
}

.contact-info:hover[b-5rqpaqw0dt] {
    border-color: var(--color-border-secondary);
}

.contact-info p[b-5rqpaqw0dt] {
    margin: 0 0 6px 0;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

.contact-info p:last-child[b-5rqpaqw0dt] {
    margin-bottom: 0;
}

/* Legal Table */
.legal-table[b-5rqpaqw0dt] {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-5) 0;
    font-size: 14px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border-primary);
}

.legal-table th[b-5rqpaqw0dt],
.legal-table td[b-5rqpaqw0dt] {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--color-border-primary);
}

.legal-table th[b-5rqpaqw0dt] {
    background: var(--color-bg-secondary);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.legal-table td[b-5rqpaqw0dt] {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.legal-table tr:last-child td[b-5rqpaqw0dt] {
    border-bottom: none;
}

.legal-table tr:hover td[b-5rqpaqw0dt] {
    background: var(--color-bg-secondary);
}

/* Contact Grid */
.contact-grid[b-5rqpaqw0dt] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-5);
    margin: var(--space-6) 0;
}

.contact-card[b-5rqpaqw0dt] {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    text-align: center;
    border: 1px solid var(--color-border-primary);
    transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

.contact-card:hover[b-5rqpaqw0dt] {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-secondary);
    transform: translateY(-2px);
}

.contact-icon[b-5rqpaqw0dt] {
    font-size: 36px;
    margin-bottom: 14px;
}

.contact-card h4[b-5rqpaqw0dt] {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    margin: 0 0 10px 0;
}

.contact-card p[b-5rqpaqw0dt] {
    margin: 6px 0;
    color: var(--color-text-primary);
}

.contact-note[b-5rqpaqw0dt] {
    font-size: var(--font-size-sm) !important;
    color: var(--color-text-secondary) !important;
    margin-top: 10px !important;
}

/* Rights Grid */
.rights-grid[b-5rqpaqw0dt] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-5);
    margin: var(--space-5) 0;
}

.right-item[b-5rqpaqw0dt] {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    border: 1px solid var(--color-border-primary);
    transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

.right-item:hover[b-5rqpaqw0dt] {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-secondary);
    transform: translateY(-2px);
}

.right-item h4[b-5rqpaqw0dt] {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    margin: 0 0 10px 0;
}

.right-item p[b-5rqpaqw0dt] {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

/* Rights Summary Badges */
.rights-summary[b-5rqpaqw0dt] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: var(--space-5) 0;
}

.right-badge[b-5rqpaqw0dt] {
    background: var(--color-primary-light, rgba(26, 124, 202, .08));
    color: var(--color-primary);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

/* Data Categories */
.data-categories[b-5rqpaqw0dt] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-5);
    margin: var(--space-5) 0;
}

.category-item[b-5rqpaqw0dt] {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    border: 1px solid var(--color-border-primary);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.category-item:hover[b-5rqpaqw0dt] {
    border-color: var(--color-border-secondary);
    box-shadow: var(--shadow-sm);
}

.category-item h4[b-5rqpaqw0dt] {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    margin: 0 0 14px 0;
}

.category-item ul[b-5rqpaqw0dt] {
    margin: 0;
    padding-left: var(--space-5);
}

.category-item li[b-5rqpaqw0dt] {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 6px;
}

/* Purpose List */
.purpose-list[b-5rqpaqw0dt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: var(--space-5) 0;
}

.purpose-item[b-5rqpaqw0dt] {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--color-border-primary);
    border-left: 4px solid var(--color-primary);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.purpose-item:hover[b-5rqpaqw0dt] {
    border-color: var(--color-border-secondary);
    border-left-color: var(--color-primary-hover);
    box-shadow: var(--shadow-sm);
}

.purpose-header[b-5rqpaqw0dt] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.purpose-icon[b-5rqpaqw0dt] {
    font-size: 22px;
}

.purpose-header h4[b-5rqpaqw0dt] {
    margin: 0;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
}

.purpose-item p[b-5rqpaqw0dt] {
    margin: 6px 0;
    font-size: 14px;
    line-height: 1.6;
}

/* Numbered List */
.numbered-list[b-5rqpaqw0dt] {
    counter-reset: item;
    list-style: none;
    padding-left: 0;
}

.numbered-list li[b-5rqpaqw0dt] {
    counter-increment: item;
    position: relative;
    padding-left: 44px;
    margin-bottom: 18px;
}

.numbered-list li[b-5rqpaqw0dt]::before {
    content: counter(item);
    position: absolute;
    left: 0;
    top: 2px;
    width: 28px;
    height: 28px;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-radius: 50%;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-primary);
}

/* Info Box */
.info-box[b-5rqpaqw0dt] {
    background: var(--color-warning-light, #fffbeb);
    border: 1px solid rgba(217, 119, 6, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-6);
    margin: var(--space-5) 0;
}

.info-box h4[b-5rqpaqw0dt] {
    color: var(--color-warning);
    font-weight: var(--font-weight-bold);
    margin: 0 0 14px 0;
}

.info-box ul[b-5rqpaqw0dt] {
    margin: 0;
}

/* Note Box */
.note[b-5rqpaqw0dt] {
    background: var(--color-primary-light, rgba(26, 124, 202, .06));
    border-left: 4px solid var(--color-primary);
    padding: var(--space-4) var(--space-5);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    margin: var(--space-5) 0;
}

/* Social Links */
.social-links[b-5rqpaqw0dt] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: var(--space-5) 0;
}

.social-link[b-5rqpaqw0dt] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--color-bg-secondary);
    padding: 14px var(--space-6);
    border-radius: var(--radius-lg);
    color: var(--color-text-primary);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    border: 1px solid var(--color-border-primary);
    transition: border-color .2s ease, background .2s ease, transform .15s ease;
}

.social-link:hover[b-5rqpaqw0dt] {
    background: var(--color-primary-light, rgba(26, 124, 202, .06));
    border-color: var(--color-primary);
    color: var(--color-primary);
    text-decoration: none;
    transform: translateY(-2px);
}

.social-icon[b-5rqpaqw0dt] {
    font-size: var(--font-size-xl);
}

/* ── Error State ────────────────────── */
.error-card[b-5rqpaqw0dt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-20) var(--space-8);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    text-align: center;
    animation: rise-b-5rqpaqw0dt .45s cubic-bezier(.4,0,.2,1) both;
}

.error-icon[b-5rqpaqw0dt] {
    width: 48px;
    height: 48px;
    color: var(--color-error);
    opacity: 0.6;
}

.error-title[b-5rqpaqw0dt] {
    font-size: 17px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
}

.error-desc[b-5rqpaqw0dt] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 400px;
    line-height: 1.6;
}

.btn-retry[b-5rqpaqw0dt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--btn-height-md);
    padding: 0 var(--space-6);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
    box-shadow: var(--btn-primary-shadow);
    font-family: inherit;
}

.btn-retry:hover[b-5rqpaqw0dt] {
    background: var(--btn-primary-bg-hover);
    box-shadow: var(--btn-primary-shadow-hover);
    transform: translateY(-1px);
}

.btn-retry:active[b-5rqpaqw0dt] {
    transform: translateY(0);
}

.btn-retry svg[b-5rqpaqw0dt] {
    width: 18px;
    height: 18px;
}

/* ========================================
   RESPONSIVE – Tablet
   ======================================== */
@media (max-width: 991.98px) {
    .content-card[b-5rqpaqw0dt] {
        padding: var(--space-8);
    }

    .content-card h2[b-5rqpaqw0dt] {
        font-size: 20px;
    }

    .meta-card[b-5rqpaqw0dt] {
        padding: var(--space-5) var(--space-6);
    }
}

/* ========================================
   RESPONSIVE – Mobile
   ======================================== */
@media (max-width: 767.98px) {
    .hero-title[b-5rqpaqw0dt] {
        font-size: var(--font-size-2xl);
    }

    .meta-card[b-5rqpaqw0dt] {
        padding: var(--space-4) var(--space-5);
    }

    .content-card[b-5rqpaqw0dt] {
        padding: var(--space-6);
    }

    .content-card h2[b-5rqpaqw0dt] {
        font-size: 18px;
        line-height: 1.4;
        margin: 28px 0 14px 0;
    }

    .content-card h2[b-5rqpaqw0dt]::before {
        height: 22px;
    }

    .content-card h3[b-5rqpaqw0dt] {
        font-size: var(--font-size-md);
    }

    .content-card p[b-5rqpaqw0dt],
    .content-card li[b-5rqpaqw0dt] {
        font-size: 14px;
        line-height: 1.65;
    }

    .legal-table[b-5rqpaqw0dt] {
        display: block;
        overflow-x: auto;
    }

    .rights-grid[b-5rqpaqw0dt],
    .data-categories[b-5rqpaqw0dt],
    .contact-grid[b-5rqpaqw0dt] {
        grid-template-columns: 1fr;
    }

    .social-links[b-5rqpaqw0dt] {
        flex-direction: column;
    }

    .intro-section[b-5rqpaqw0dt] {
        padding: var(--space-5);
    }

    .error-card[b-5rqpaqw0dt] {
        padding: 60px var(--space-6);
    }
}

/* ========================================
   RESPONSIVE – Small Mobile
   ======================================== */
@media (max-width: 575.98px) {
    .hero-title[b-5rqpaqw0dt] {
        font-size: 22px;
    }

    .meta-card[b-5rqpaqw0dt] {
        padding: 14px var(--space-4);
        border-radius: var(--radius-lg);
    }

    .meta-title[b-5rqpaqw0dt] {
        font-size: 14px;
    }

    .content-card[b-5rqpaqw0dt] {
        padding: var(--space-5);
        border-radius: var(--radius-lg);
    }

    .content-card h2[b-5rqpaqw0dt] {
        font-size: 17px;
        line-height: 1.35;
    }

    .content-card h3[b-5rqpaqw0dt] {
        font-size: var(--font-size-base);
    }

    .error-card[b-5rqpaqw0dt] {
        padding: 50px var(--space-5);
        border-radius: var(--radius-lg);
    }

    .contact-card[b-5rqpaqw0dt] {
        padding: var(--space-5);
    }

    .purpose-item[b-5rqpaqw0dt] {
        padding: var(--space-4) var(--space-5);
    }

    .numbered-list li[b-5rqpaqw0dt] {
        padding-left: 40px;
    }

    .numbered-list li[b-5rqpaqw0dt]::before {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }

    .btn-retry[b-5rqpaqw0dt] {
        height: 42px;
        font-size: var(--font-size-sm);
    }
}

/* ── Reduced Motion ──────────────────── */
@media (prefers-reduced-motion: reduce) {
    .contact-hero[b-5rqpaqw0dt],
    .meta-card[b-5rqpaqw0dt],
    .content-card[b-5rqpaqw0dt],
    .error-card[b-5rqpaqw0dt] {
        animation: none;
    }

    .right-item[b-5rqpaqw0dt],
    .contact-card[b-5rqpaqw0dt],
    .social-link[b-5rqpaqw0dt],
    .btn-retry[b-5rqpaqw0dt],
    .purpose-item[b-5rqpaqw0dt],
    .category-item[b-5rqpaqw0dt],
    .contact-info[b-5rqpaqw0dt],
    .content-card a[b-5rqpaqw0dt] {
        transition: none;
    }

    .right-item:hover[b-5rqpaqw0dt],
    .contact-card:hover[b-5rqpaqw0dt],
    .social-link:hover[b-5rqpaqw0dt],
    .btn-retry:hover[b-5rqpaqw0dt],
    .purpose-item:hover[b-5rqpaqw0dt] {
        transform: none;
    }
}

/* ── Focus States ────────────────────── */
.btn-retry:focus-visible[b-5rqpaqw0dt],
.social-link:focus-visible[b-5rqpaqw0dt],
.contact-card:focus-visible[b-5rqpaqw0dt] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
/* /Components/Pages/Legal/Cookies.razor.rz.scp.css */
/* ========================================
   COOKIES PAGE – Clean, solid-surface design
   ======================================== */

/* ── Keyframes ──────────────────────── */
@keyframes rise-b-t54654pkwj {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Layout ─────────────────────────── */
.cookies-layout[b-t54654pkwj] {
    width: 100%;
    padding-bottom: var(--space-12);
}

/* ── Hero ────────────────────────────── */
.cookies-hero[b-t54654pkwj] {
    padding: var(--space-2) 0 var(--space-6);
    animation: rise-b-t54654pkwj .45s cubic-bezier(.4,0,.2,1) both;
}

.hero-title[b-t54654pkwj] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1.15;
}

.hero-lead[b-t54654pkwj] {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 6px 0 0;
    line-height: var(--line-height-normal);
}

/* ── Meta Card ──────────────────────── */
.meta-card[b-t54654pkwj] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-5) 28px;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
    animation: rise-b-t54654pkwj .45s cubic-bezier(.4,0,.2,1) .06s both;
}

.meta-title[b-t54654pkwj] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

.meta-badges[b-t54654pkwj] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.meta-badge[b-t54654pkwj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    background: var(--color-primary-light, rgba(26, 124, 202, .08));
    color: var(--color-primary);
}

.meta-badge svg[b-t54654pkwj] {
    flex-shrink: 0;
}

/* ── Content Card ───────────────────── */
.content-card[b-t54654pkwj] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    animation: rise-b-t54654pkwj .45s cubic-bezier(.4,0,.2,1) .12s both;
}

/* ── Dynamic HTML Content Typography ── */
.content-card h2[b-t54654pkwj] {
    font-weight: var(--font-weight-bold);
    font-size: 22px;
    line-height: var(--line-height-snug);
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
    margin: 36px 0 18px 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.content-card h2[b-t54654pkwj]::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 26px;
    background: var(--color-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

.content-card h2:first-child[b-t54654pkwj] {
    margin-top: 0;
}

.content-card h3[b-t54654pkwj] {
    font-weight: var(--font-weight-bold);
    font-size: 17px;
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    margin: var(--space-6) 0 14px 0;
}

.content-card h4[b-t54654pkwj] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-dark-tertiary, #334155);
    margin: var(--space-5) 0 10px 0;
}

.content-card p[b-t54654pkwj] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4) 0;
}

.content-card ul[b-t54654pkwj],
.content-card ol[b-t54654pkwj] {
    margin: 0 0 var(--space-5) 0;
    padding-left: 28px;
}

.content-card li[b-t54654pkwj] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: 10px;
}

.content-card a[b-t54654pkwj] {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: color .2s ease;
}

.content-card a:hover[b-t54654pkwj] {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.content-card strong[b-t54654pkwj] {
    font-weight: var(--font-weight-bold);
    color: var(--color-dark-secondary, #1E293B);
}

/* ── Special Content Blocks ─────────── */

/* Intro Section */
.intro-section[b-t54654pkwj] {
    background: var(--color-primary-light, rgba(26, 124, 202, .06));
    border-radius: var(--radius-xl);
    padding: var(--space-6) 28px;
    border: 1px solid rgba(26, 124, 202, 0.1);
    margin-bottom: 28px;
}

.intro-text[b-t54654pkwj] {
    font-size: var(--font-size-md);
    line-height: 1.7;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
    margin: 0 !important;
}

/* Contact Info Box */
.contact-info[b-t54654pkwj] {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-6);
    margin: var(--space-4) 0;
    border: 1px solid var(--color-border-primary);
    transition: border-color .2s ease;
}

.contact-info:hover[b-t54654pkwj] {
    border-color: var(--color-border-secondary);
}

.contact-info p[b-t54654pkwj] {
    margin: 0 0 6px 0;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

.contact-info p:last-child[b-t54654pkwj] {
    margin-bottom: 0;
}

/* Legal Table */
.legal-table[b-t54654pkwj] {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-5) 0;
    font-size: 14px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border-primary);
}

.legal-table th[b-t54654pkwj],
.legal-table td[b-t54654pkwj] {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--color-border-primary);
}

.legal-table th[b-t54654pkwj] {
    background: var(--color-bg-secondary);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.legal-table td[b-t54654pkwj] {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.legal-table tr:last-child td[b-t54654pkwj] {
    border-bottom: none;
}

.legal-table tr:hover td[b-t54654pkwj] {
    background: var(--color-bg-secondary);
}

/* Rights Grid */
.rights-grid[b-t54654pkwj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-5);
    margin: var(--space-5) 0;
}

.right-item[b-t54654pkwj] {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    border: 1px solid var(--color-border-primary);
    transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

.right-item:hover[b-t54654pkwj] {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-secondary);
    transform: translateY(-2px);
}

.right-item h4[b-t54654pkwj] {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    margin: 0 0 10px 0;
}

.right-item p[b-t54654pkwj] {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

/* Rights Summary Badges */
.rights-summary[b-t54654pkwj] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: var(--space-5) 0;
}

.right-badge[b-t54654pkwj] {
    background: var(--color-primary-light, rgba(26, 124, 202, .08));
    color: var(--color-primary);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

/* Data Categories */
.data-categories[b-t54654pkwj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-5);
    margin: var(--space-5) 0;
}

.category-item[b-t54654pkwj] {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    border: 1px solid var(--color-border-primary);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.category-item:hover[b-t54654pkwj] {
    border-color: var(--color-border-secondary);
    box-shadow: var(--shadow-sm);
}

.category-item h4[b-t54654pkwj] {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    margin: 0 0 14px 0;
}

.category-item ul[b-t54654pkwj] {
    margin: 0;
    padding-left: var(--space-5);
}

.category-item li[b-t54654pkwj] {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 6px;
}

/* Purpose List */
.purpose-list[b-t54654pkwj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: var(--space-5) 0;
}

.purpose-item[b-t54654pkwj] {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--color-border-primary);
    border-left: 4px solid var(--color-primary);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.purpose-item:hover[b-t54654pkwj] {
    border-color: var(--color-border-secondary);
    border-left-color: var(--color-primary-hover);
    box-shadow: var(--shadow-sm);
}

.purpose-header[b-t54654pkwj] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.purpose-icon[b-t54654pkwj] {
    font-size: 22px;
}

.purpose-header h4[b-t54654pkwj] {
    margin: 0;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
}

.purpose-item p[b-t54654pkwj] {
    margin: 6px 0;
    font-size: 14px;
    line-height: 1.6;
}

/* Numbered List */
.numbered-list[b-t54654pkwj] {
    counter-reset: item;
    list-style: none;
    padding-left: 0;
}

.numbered-list li[b-t54654pkwj] {
    counter-increment: item;
    position: relative;
    padding-left: 44px;
    margin-bottom: 18px;
}

.numbered-list li[b-t54654pkwj]::before {
    content: counter(item);
    position: absolute;
    left: 0;
    top: 2px;
    width: 28px;
    height: 28px;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-radius: 50%;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-primary);
}

/* Info Box */
.info-box[b-t54654pkwj] {
    background: var(--color-warning-light, #fffbeb);
    border: 1px solid rgba(217, 119, 6, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-6);
    margin: var(--space-5) 0;
}

.info-box h4[b-t54654pkwj] {
    color: var(--color-warning);
    font-weight: var(--font-weight-bold);
    margin: 0 0 14px 0;
}

.info-box ul[b-t54654pkwj] {
    margin: 0;
}

/* Note Box */
.note[b-t54654pkwj] {
    background: var(--color-primary-light, rgba(26, 124, 202, .06));
    border-left: 4px solid var(--color-primary);
    padding: var(--space-4) var(--space-5);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    margin: var(--space-5) 0;
}

/* Contact Grid */
.contact-grid[b-t54654pkwj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-5);
    margin: var(--space-6) 0;
}

.contact-card[b-t54654pkwj] {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    text-align: center;
    border: 1px solid var(--color-border-primary);
    transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

.contact-card:hover[b-t54654pkwj] {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-secondary);
    transform: translateY(-2px);
}

.contact-icon[b-t54654pkwj] {
    font-size: 36px;
    margin-bottom: 14px;
}

.contact-card h4[b-t54654pkwj] {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    margin: 0 0 10px 0;
}

.contact-card p[b-t54654pkwj] {
    margin: 6px 0;
    color: var(--color-text-primary);
}

.contact-note[b-t54654pkwj] {
    font-size: var(--font-size-sm) !important;
    color: var(--color-text-secondary) !important;
    margin-top: 10px !important;
}

/* Social Links */
.social-links[b-t54654pkwj] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: var(--space-5) 0;
}

.social-link[b-t54654pkwj] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--color-bg-secondary);
    padding: 14px var(--space-6);
    border-radius: var(--radius-lg);
    color: var(--color-text-primary);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    border: 1px solid var(--color-border-primary);
    transition: border-color .2s ease, background .2s ease, transform .15s ease;
}

.social-link:hover[b-t54654pkwj] {
    background: var(--color-primary-light, rgba(26, 124, 202, .06));
    border-color: var(--color-primary);
    color: var(--color-primary);
    text-decoration: none;
    transform: translateY(-2px);
}

.social-icon[b-t54654pkwj] {
    font-size: var(--font-size-xl);
}

/* ── Error State ────────────────────── */
.error-card[b-t54654pkwj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-20) var(--space-8);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    text-align: center;
    animation: rise-b-t54654pkwj .45s cubic-bezier(.4,0,.2,1) both;
}

.error-icon[b-t54654pkwj] {
    width: 48px;
    height: 48px;
    color: var(--color-error);
    opacity: 0.6;
}

.error-title[b-t54654pkwj] {
    font-size: 17px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
}

.error-desc[b-t54654pkwj] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 400px;
    line-height: 1.6;
}

.btn-retry[b-t54654pkwj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--btn-height-md);
    padding: 0 var(--space-6);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
    box-shadow: var(--btn-primary-shadow);
    font-family: inherit;
}

.btn-retry:hover[b-t54654pkwj] {
    background: var(--btn-primary-bg-hover);
    box-shadow: var(--btn-primary-shadow-hover);
    transform: translateY(-1px);
}

.btn-retry:active[b-t54654pkwj] {
    transform: translateY(0);
}

.btn-retry svg[b-t54654pkwj] {
    width: 18px;
    height: 18px;
}

/* ========================================
   RESPONSIVE – Tablet
   ======================================== */
@media (max-width: 991.98px) {
    .content-card[b-t54654pkwj] {
        padding: var(--space-8);
    }

    .content-card h2[b-t54654pkwj] {
        font-size: 20px;
    }

    .meta-card[b-t54654pkwj] {
        padding: var(--space-5) var(--space-6);
    }
}

/* ========================================
   RESPONSIVE – Mobile
   ======================================== */
@media (max-width: 767.98px) {
    .hero-title[b-t54654pkwj] {
        font-size: var(--font-size-2xl);
    }

    .meta-card[b-t54654pkwj] {
        padding: var(--space-4) var(--space-5);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .meta-badges[b-t54654pkwj] {
        gap: 6px;
    }

    .meta-badge[b-t54654pkwj] {
        padding: 4px 10px;
        font-size: var(--font-size-xs);
    }

    .content-card[b-t54654pkwj] {
        padding: var(--space-6);
    }

    .content-card h2[b-t54654pkwj] {
        font-size: 18px;
        line-height: 1.4;
        margin: 28px 0 14px 0;
    }

    .content-card h2[b-t54654pkwj]::before {
        height: 22px;
    }

    .content-card h3[b-t54654pkwj] {
        font-size: var(--font-size-md);
    }

    .content-card p[b-t54654pkwj],
    .content-card li[b-t54654pkwj] {
        font-size: 14px;
        line-height: 1.65;
    }

    .legal-table[b-t54654pkwj] {
        display: block;
        overflow-x: auto;
    }

    .rights-grid[b-t54654pkwj],
    .data-categories[b-t54654pkwj],
    .contact-grid[b-t54654pkwj] {
        grid-template-columns: 1fr;
    }

    .social-links[b-t54654pkwj] {
        flex-direction: column;
    }

    .intro-section[b-t54654pkwj] {
        padding: var(--space-5);
    }

    .error-card[b-t54654pkwj] {
        padding: 60px var(--space-6);
    }
}

/* ========================================
   RESPONSIVE – Small Mobile
   ======================================== */
@media (max-width: 575.98px) {
    .hero-title[b-t54654pkwj] {
        font-size: 22px;
    }

    .meta-card[b-t54654pkwj] {
        padding: 14px var(--space-4);
        border-radius: var(--radius-lg);
    }

    .meta-title[b-t54654pkwj] {
        font-size: 14px;
    }

    .content-card[b-t54654pkwj] {
        padding: var(--space-5);
        border-radius: var(--radius-lg);
    }

    .content-card h2[b-t54654pkwj] {
        font-size: 17px;
        line-height: 1.35;
    }

    .content-card h3[b-t54654pkwj] {
        font-size: var(--font-size-base);
    }

    .error-card[b-t54654pkwj] {
        padding: 50px var(--space-5);
        border-radius: var(--radius-lg);
    }

    .contact-card[b-t54654pkwj] {
        padding: var(--space-5);
    }

    .purpose-item[b-t54654pkwj] {
        padding: var(--space-4) var(--space-5);
    }

    .numbered-list li[b-t54654pkwj] {
        padding-left: 40px;
    }

    .numbered-list li[b-t54654pkwj]::before {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }

    .btn-retry[b-t54654pkwj] {
        height: 42px;
        font-size: var(--font-size-sm);
    }
}

/* ── Reduced Motion ──────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cookies-hero[b-t54654pkwj],
    .meta-card[b-t54654pkwj],
    .content-card[b-t54654pkwj],
    .error-card[b-t54654pkwj] {
        animation: none;
    }

    .right-item[b-t54654pkwj],
    .contact-card[b-t54654pkwj],
    .social-link[b-t54654pkwj],
    .btn-retry[b-t54654pkwj],
    .purpose-item[b-t54654pkwj],
    .category-item[b-t54654pkwj],
    .contact-info[b-t54654pkwj],
    .content-card a[b-t54654pkwj] {
        transition: none;
    }

    .right-item:hover[b-t54654pkwj],
    .contact-card:hover[b-t54654pkwj],
    .social-link:hover[b-t54654pkwj],
    .btn-retry:hover[b-t54654pkwj],
    .purpose-item:hover[b-t54654pkwj] {
        transform: none;
    }
}

/* ── Focus States ────────────────────── */
.btn-retry:focus-visible[b-t54654pkwj],
.social-link:focus-visible[b-t54654pkwj],
.contact-card:focus-visible[b-t54654pkwj] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
/* /Components/Pages/Legal/DataProcessing.razor.rz.scp.css */
/* ========================================
   DATA PROCESSING PAGE - MODERN PUBLIC TRANSPORT
   Design-token powered, glassmorphism + micro-interactions
   Accent: Primary Blue (ATSK brand)
   ======================================== */

/* ----------------------------------------
   ENTRANCE ANIMATIONS
   ---------------------------------------- */
@keyframes fadeInUp-b-kuzq4kn54d {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn-b-kuzq4kn54d {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.legal-page[b-kuzq4kn54d] {
    padding-bottom: 60px;
}

.legal-header[b-kuzq4kn54d] {
    margin-bottom: var(--space-2);
    animation: fadeInUp-b-kuzq4kn54d 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.page-title[b-kuzq4kn54d] {
    font-family: var(--font-family-base, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-3xl, 28px);
    line-height: 36px;
    color: var(--color-text-primary, #0F172A);
    margin: 0 0 var(--space-2) 0;
    letter-spacing: var(--letter-spacing-tight, -0.03em);
}

.legal-meta[b-kuzq4kn54d] {
    font-family: var(--font-family-base, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text-muted, #94A3B8);
    margin: 0;
    animation: fadeInUp-b-kuzq4kn54d 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.05s both;
}

/* ----------------------------------------
   LEGAL CARD
   Glassmorphism surface
   ---------------------------------------- */
.legal-card[b-kuzq4kn54d] {
    background: var(--glass-bg-heavy, rgba(255, 255, 255, 0.85));
    backdrop-filter: var(--glass-blur, blur(20px));
    -webkit-backdrop-filter: var(--glass-blur, blur(20px));
    border: 1px solid var(--glass-border-subtle, rgba(226, 232, 240, 0.6));
    border-radius: var(--radius-lg, 12px);
    padding: var(--space-8);
    box-shadow: var(--glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.06));
    animation: fadeInUp-b-kuzq4kn54d 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}

/* ----------------------------------------
   LEGAL SECTION
   ---------------------------------------- */
.legal-section[b-kuzq4kn54d] {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border-light, #F1F5F9);
}

.legal-section:last-child[b-kuzq4kn54d] {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.legal-section h2[b-kuzq4kn54d] {
    font-family: var(--font-family-base, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-xl, 20px);
    line-height: 28px;
    color: var(--color-text-primary, #0F172A);
    margin: 0 0 var(--space-4) 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.legal-section h2[b-kuzq4kn54d]::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 24px;
    background: linear-gradient(180deg, var(--color-primary, #1A7CCA) 0%, var(--color-primary-hover, #1568A8) 100%);
    border-radius: 2px;
    flex-shrink: 0;
}

.legal-section h3[b-kuzq4kn54d] {
    font-family: var(--font-family-base, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-md, 16px);
    line-height: var(--line-height-normal, 24px);
    color: var(--color-text-primary, #0F172A);
    margin: var(--space-5) 0 var(--space-3) 0;
}

.legal-section h4[b-kuzq4kn54d] {
    font-family: var(--font-family-base, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-weight: var(--font-weight-semibold, 600);
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text-primary, #0F172A);
    margin: 0 0 var(--space-2) 0;
}

.legal-section p[b-kuzq4kn54d] {
    font-family: var(--font-family-base, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 14px;
    line-height: 22px;
    color: var(--color-text-secondary, #475569);
    margin: 0 0 var(--space-3) 0;
}

.legal-section ul[b-kuzq4kn54d],
.legal-section ol[b-kuzq4kn54d] {
    margin: 0 0 var(--space-4) 0;
    padding-left: var(--space-6);
}

.legal-section li[b-kuzq4kn54d] {
    font-family: var(--font-family-base, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 14px;
    line-height: 22px;
    color: var(--color-text-secondary, #475569);
    margin-bottom: var(--space-2);
}

.legal-section a[b-kuzq4kn54d] {
    color: var(--color-primary, #1A7CCA);
    text-decoration: none;
    font-weight: var(--font-weight-medium, 500);
    transition: color var(--transition-slow, 0.2s ease);
}

.legal-section a:hover[b-kuzq4kn54d] {
    color: var(--color-primary-hover, #1568A8);
    text-decoration: underline;
}

/* ----------------------------------------
   CONTACT INFO BOX
   ---------------------------------------- */
.contact-info[b-kuzq4kn54d] {
    background: linear-gradient(135deg, var(--color-bg-secondary, #F8FAFC) 0%, var(--color-bg-tertiary, #F1F5F9) 100%);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-4) var(--space-5);
    margin: var(--space-3) 0;
    border: 1px solid var(--color-border-primary, #E2E8F0);
    transition: border-color var(--transition-slow, 0.2s ease);
}

.contact-info:hover[b-kuzq4kn54d] {
    border-color: var(--color-border-secondary, #CBD5E1);
}

.contact-info p[b-kuzq4kn54d] {
    margin: 0 0 4px 0;
    color: var(--color-text-primary, #0F172A);
    font-weight: var(--font-weight-medium, 500);
}

.contact-info p:last-child[b-kuzq4kn54d] {
    margin-bottom: 0;
}

/* ----------------------------------------
   LEGAL TABLE
   ---------------------------------------- */
.legal-table[b-kuzq4kn54d] {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-4) 0;
    font-size: 14px;
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    border: 1px solid var(--color-border-primary, #E2E8F0);
}

.legal-table th[b-kuzq4kn54d],
.legal-table td[b-kuzq4kn54d] {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border: 1px solid var(--color-border-primary, #E2E8F0);
}

.legal-table th[b-kuzq4kn54d] {
    background: linear-gradient(135deg, var(--color-bg-secondary, #F8FAFC) 0%, var(--color-bg-tertiary, #F1F5F9) 100%);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #0F172A);
    font-size: var(--font-size-sm, 13px);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.legal-table td[b-kuzq4kn54d] {
    color: var(--color-text-secondary, #475569);
    transition: background var(--transition-fast, 0.1s ease);
}

.legal-table tr:hover td[b-kuzq4kn54d] {
    background: var(--color-bg-secondary, #F8FAFC);
}

/* ----------------------------------------
   RIGHTS GRID
   ---------------------------------------- */
.rights-grid[b-kuzq4kn54d] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
    margin: var(--space-4) 0;
}

.right-item[b-kuzq4kn54d] {
    background: var(--glass-bg, rgba(255, 255, 255, 0.72));
    backdrop-filter: var(--glass-blur, blur(20px));
    -webkit-backdrop-filter: var(--glass-blur, blur(20px));
    border-radius: var(--radius-md, 8px);
    padding: var(--space-4);
    border: 1px solid var(--glass-border-subtle, rgba(226, 232, 240, 0.6));
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: fadeInUp-b-kuzq4kn54d 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.right-item:nth-child(1)[b-kuzq4kn54d] { animation-delay: 0.05s; }
.right-item:nth-child(2)[b-kuzq4kn54d] { animation-delay: 0.1s; }
.right-item:nth-child(3)[b-kuzq4kn54d] { animation-delay: 0.15s; }
.right-item:nth-child(4)[b-kuzq4kn54d] { animation-delay: 0.2s; }
.right-item:nth-child(5)[b-kuzq4kn54d] { animation-delay: 0.25s; }
.right-item:nth-child(6)[b-kuzq4kn54d] { animation-delay: 0.3s; }

.right-item:hover[b-kuzq4kn54d] {
    box-shadow: var(--glass-shadow-hover, 0 20px 60px rgba(0, 0, 0, 0.1));
    border-color: var(--color-border-secondary, #CBD5E1);
    transform: translateY(-4px);
}

.right-item h4[b-kuzq4kn54d] {
    color: var(--color-primary, #1A7CCA);
    font-weight: var(--font-weight-semibold, 600);
    margin-bottom: var(--space-2);
}

.right-item p[b-kuzq4kn54d] {
    margin: 0;
    font-size: var(--font-size-sm, 13px);
}

/* ----------------------------------------
   RIGHTS SUMMARY BADGES
   ---------------------------------------- */
.rights-summary[b-kuzq4kn54d] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4) 0;
}

.right-badge[b-kuzq4kn54d] {
    background: var(--color-primary-light, #EBF5FF);
    color: var(--color-primary, #1A7CCA);
    padding: 6px var(--space-3);
    border-radius: var(--radius-pill, 100px);
    font-size: var(--font-size-sm, 13px);
    font-weight: var(--font-weight-medium, 500);
    border: 1px solid rgba(26, 124, 202, 0.15);
    transition: transform var(--transition-fast, 0.1s ease);
}

.right-badge:hover[b-kuzq4kn54d] {
    transform: scale(1.03);
}

/* ----------------------------------------
   DATA CATEGORIES
   ---------------------------------------- */
.data-categories[b-kuzq4kn54d] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-4);
    margin: var(--space-4) 0;
}

.category-item[b-kuzq4kn54d] {
    background: linear-gradient(135deg, var(--color-bg-secondary, #F8FAFC) 0%, var(--color-bg-tertiary, #F1F5F9) 100%);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-4);
    border: 1px solid var(--color-border-primary, #E2E8F0);
    transition: border-color var(--transition-slow, 0.2s ease),
                box-shadow var(--transition-slow, 0.2s ease);
}

.category-item:hover[b-kuzq4kn54d] {
    border-color: var(--color-border-secondary, #CBD5E1);
    box-shadow: var(--shadow-md);
}

.category-item h4[b-kuzq4kn54d] {
    color: var(--color-primary, #1A7CCA);
    font-weight: var(--font-weight-semibold, 600);
    margin-bottom: var(--space-3);
}

.category-item ul[b-kuzq4kn54d] {
    margin: 0;
    padding-left: 18px;
}

.category-item li[b-kuzq4kn54d] {
    font-size: var(--font-size-sm, 13px);
    margin-bottom: 4px;
}

/* ----------------------------------------
   PURPOSE LIST
   ---------------------------------------- */
.purpose-list[b-kuzq4kn54d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: var(--space-4) 0;
}

.purpose-item[b-kuzq4kn54d] {
    background: linear-gradient(135deg, var(--color-bg-secondary, #F8FAFC) 0%, var(--color-bg-tertiary, #F1F5F9) 100%);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-4) var(--space-5);
    border-left: 4px solid var(--color-primary, #1A7CCA);
    border-top: 1px solid var(--color-border-primary, #E2E8F0);
    border-right: 1px solid var(--color-border-primary, #E2E8F0);
    border-bottom: 1px solid var(--color-border-primary, #E2E8F0);
    transition: transform var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1)),
                box-shadow var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
}

.purpose-item:hover[b-kuzq4kn54d] {
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
}

.purpose-header[b-kuzq4kn54d] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.purpose-icon[b-kuzq4kn54d] {
    font-size: 20px;
    transition: transform var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
}

.purpose-item:hover .purpose-icon[b-kuzq4kn54d] {
    transform: scale(1.15);
}

.purpose-header h4[b-kuzq4kn54d] {
    margin: 0;
    color: var(--color-text-primary, #0F172A);
}

.purpose-item p[b-kuzq4kn54d] {
    margin: 4px 0;
    font-size: var(--font-size-sm, 13px);
}

/* ----------------------------------------
   INTRO SECTION
   ---------------------------------------- */
.intro-section[b-kuzq4kn54d] {
    background: var(--color-primary-light, #EBF5FF);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-5) var(--space-6);
    border: 1px solid rgba(26, 124, 202, 0.15);
    margin-bottom: var(--space-6);
    animation: fadeIn-b-kuzq4kn54d 0.4s ease 0.15s both;
}

.intro-text[b-kuzq4kn54d] {
    font-size: var(--font-size-base, 15px);
    line-height: var(--line-height-normal, 24px);
    color: var(--color-text-primary, #0F172A);
    font-weight: var(--font-weight-medium, 500);
    margin: 0 !important;
}

/* ----------------------------------------
   CONTACT GRID
   ---------------------------------------- */
.contact-grid[b-kuzq4kn54d] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
    margin: var(--space-5) 0;
}

.contact-card[b-kuzq4kn54d] {
    background: var(--glass-bg, rgba(255, 255, 255, 0.72));
    backdrop-filter: var(--glass-blur, blur(20px));
    -webkit-backdrop-filter: var(--glass-blur, blur(20px));
    border-radius: var(--radius-md, 8px);
    padding: var(--space-5);
    text-align: center;
    border: 1px solid var(--glass-border-subtle, rgba(226, 232, 240, 0.6));
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: fadeInUp-b-kuzq4kn54d 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.contact-card:nth-child(1)[b-kuzq4kn54d] { animation-delay: 0.1s; }
.contact-card:nth-child(2)[b-kuzq4kn54d] { animation-delay: 0.15s; }
.contact-card:nth-child(3)[b-kuzq4kn54d] { animation-delay: 0.2s; }
.contact-card:nth-child(4)[b-kuzq4kn54d] { animation-delay: 0.25s; }
.contact-card:nth-child(5)[b-kuzq4kn54d] { animation-delay: 0.3s; }
.contact-card:nth-child(6)[b-kuzq4kn54d] { animation-delay: 0.35s; }

.contact-card:hover[b-kuzq4kn54d] {
    box-shadow: var(--glass-shadow-hover, 0 20px 60px rgba(0, 0, 0, 0.1));
    border-color: var(--color-border-secondary, #CBD5E1);
    transform: translateY(-4px);
}

.contact-icon[b-kuzq4kn54d] {
    font-size: 32px;
    margin-bottom: var(--space-3);
    transition: transform var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
}

.contact-card:hover .contact-icon[b-kuzq4kn54d] {
    transform: scale(1.1);
}

.contact-card h4[b-kuzq4kn54d] {
    color: var(--color-primary, #1A7CCA);
    font-weight: var(--font-weight-semibold, 600);
    margin-bottom: var(--space-2);
}

.contact-card p[b-kuzq4kn54d] {
    margin: 4px 0;
    color: var(--color-text-primary, #0F172A);
}

.contact-note[b-kuzq4kn54d] {
    font-size: 12px !important;
    color: var(--color-text-muted, #94A3B8) !important;
    margin-top: var(--space-2) !important;
}

/* ----------------------------------------
   NUMBERED LIST
   ---------------------------------------- */
.numbered-list[b-kuzq4kn54d] {
    counter-reset: item;
    list-style: none;
    padding-left: 0;
}

.numbered-list li[b-kuzq4kn54d] {
    counter-increment: item;
    position: relative;
    padding-left: 36px;
    margin-bottom: var(--space-4);
}

.numbered-list li[b-kuzq4kn54d]::before {
    content: counter(item);
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, var(--color-primary, #1A7CCA) 0%, var(--color-primary-hover, #1568A8) 100%);
    color: var(--color-text-inverse, #FFFFFF);
    border-radius: 50%;
    font-size: 12px;
    font-weight: var(--font-weight-semibold, 600);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-primary, 0 2px 8px rgba(26, 124, 202, 0.3));
}

/* ----------------------------------------
   INFO BOX
   ---------------------------------------- */
.info-box[b-kuzq4kn54d] {
    background: var(--gradient-warning, linear-gradient(135deg, var(--color-warning-light) 0%, var(--color-warning-lighter) 100%));
    border: 1px solid var(--color-warning-border, #FCD34D);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-4) var(--space-5);
    margin: var(--space-4) 0;
}

.info-box h4[b-kuzq4kn54d] {
    color: var(--color-warning, #D97706);
    font-weight: var(--font-weight-semibold, 600);
    margin-bottom: var(--space-3);
}

.info-box ul[b-kuzq4kn54d] {
    margin: 0;
}

.info-box li[b-kuzq4kn54d] {
    color: var(--color-warning-dark, #92400E);
}

/* ----------------------------------------
   SOCIAL LINKS
   ---------------------------------------- */
.social-links[b-kuzq4kn54d] {
    display: flex;
    gap: var(--space-4);
    margin: var(--space-4) 0;
}

.social-link[b-kuzq4kn54d] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--glass-bg, rgba(255, 255, 255, 0.72));
    backdrop-filter: var(--glass-blur, blur(20px));
    -webkit-backdrop-filter: var(--glass-blur, blur(20px));
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md, 8px);
    color: var(--color-text-primary, #0F172A);
    text-decoration: none;
    font-weight: var(--font-weight-medium, 500);
    border: 1px solid var(--glass-border-subtle, rgba(226, 232, 240, 0.6));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.social-link:hover[b-kuzq4kn54d] {
    background: var(--color-primary-light, #EBF5FF);
    border-color: var(--color-primary, #1A7CCA);
    color: var(--color-primary, #1A7CCA);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--glass-shadow-elevated, 0 16px 48px rgba(0, 0, 0, 0.08));
}

.social-icon[b-kuzq4kn54d] {
    font-size: 18px;
    transition: transform var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
}

.social-link:hover .social-icon[b-kuzq4kn54d] {
    transform: scale(1.15);
}

/* ----------------------------------------
   NOTE BOX
   ---------------------------------------- */
.note[b-kuzq4kn54d] {
    background: linear-gradient(135deg, var(--color-primary-light, #EBF5FF) 0%, var(--color-primary-lighter) 100%);
    border-left: 4px solid var(--color-primary, #1A7CCA);
    padding: var(--space-3) var(--space-4);
    border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
    margin: var(--space-4) 0;
}

/* ----------------------------------------
   RESPONSIVE
   ---------------------------------------- */
@media (max-width: 768px) {
    .legal-card[b-kuzq4kn54d] {
        padding: var(--space-5);
    }

    .page-title[b-kuzq4kn54d] {
        font-size: var(--font-size-2xl, 24px);
        line-height: 32px;
    }

    .legal-table[b-kuzq4kn54d] {
        display: block;
        overflow-x: auto;
    }

    .rights-grid[b-kuzq4kn54d],
    .data-categories[b-kuzq4kn54d],
    .contact-grid[b-kuzq4kn54d] {
        grid-template-columns: 1fr;
    }

    .social-links[b-kuzq4kn54d] {
        flex-direction: column;
    }

    .intro-section[b-kuzq4kn54d] {
        padding: var(--space-4) var(--space-5);
    }

    .legal-section h2[b-kuzq4kn54d] {
        font-size: var(--font-size-lg, 18px);
    }
}

/* ----------------------------------------
   ACCESSIBILITY
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .legal-page *[b-kuzq4kn54d],
    .right-item[b-kuzq4kn54d],
    .contact-card[b-kuzq4kn54d],
    .social-link[b-kuzq4kn54d],
    .purpose-item[b-kuzq4kn54d],
    .contact-icon[b-kuzq4kn54d],
    .social-icon[b-kuzq4kn54d],
    .purpose-icon[b-kuzq4kn54d],
    .right-badge[b-kuzq4kn54d],
    .category-item[b-kuzq4kn54d],
    .contact-info[b-kuzq4kn54d],
    .legal-section a[b-kuzq4kn54d] {
        animation: none !important;
        transition: none !important;
    }

    .right-item:hover[b-kuzq4kn54d],
    .contact-card:hover[b-kuzq4kn54d],
    .social-link:hover[b-kuzq4kn54d],
    .purpose-item:hover[b-kuzq4kn54d] {
        transform: none;
    }
}
/* /Components/Pages/Legal/Privacy.razor.rz.scp.css */
/* ========================================
   PRIVACY PAGE – Clean, solid-surface design
   ======================================== */

/* ── Keyframes ──────────────────────── */
@keyframes rise-b-jcdfh2avmb {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Layout ─────────────────────────── */
.privacy-layout[b-jcdfh2avmb] {
    width: 100%;
    padding-bottom: var(--space-12);
}

/* ── Hero ────────────────────────────── */
.privacy-hero[b-jcdfh2avmb] {
    padding: var(--space-2) 0 var(--space-6);
    animation: rise-b-jcdfh2avmb .45s cubic-bezier(.4,0,.2,1) both;
}

.hero-title[b-jcdfh2avmb] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1.15;
}

.hero-lead[b-jcdfh2avmb] {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 6px 0 0;
    line-height: var(--line-height-normal);
}

/* ── Meta Card ──────────────────────── */
.meta-card[b-jcdfh2avmb] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-5) 28px;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
    animation: rise-b-jcdfh2avmb .45s cubic-bezier(.4,0,.2,1) .06s both;
}

.meta-title[b-jcdfh2avmb] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

.meta-badges[b-jcdfh2avmb] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.meta-badge[b-jcdfh2avmb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    background: var(--color-primary-light, rgba(26, 124, 202, .08));
    color: var(--color-primary);
}

.meta-badge svg[b-jcdfh2avmb] {
    flex-shrink: 0;
}

/* ── Content Card ───────────────────── */
.content-card[b-jcdfh2avmb] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    animation: rise-b-jcdfh2avmb .45s cubic-bezier(.4,0,.2,1) .12s both;
}

/* ── Dynamic HTML Content Typography ── */
.content-card h2[b-jcdfh2avmb] {
    font-weight: var(--font-weight-bold);
    font-size: 22px;
    line-height: var(--line-height-snug);
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
    margin: 36px 0 18px 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.content-card h2[b-jcdfh2avmb]::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 26px;
    background: var(--color-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

.content-card h2:first-child[b-jcdfh2avmb] {
    margin-top: 0;
}

.content-card h3[b-jcdfh2avmb] {
    font-weight: var(--font-weight-bold);
    font-size: 17px;
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    margin: var(--space-6) 0 14px 0;
}

.content-card h4[b-jcdfh2avmb] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-dark-tertiary, #334155);
    margin: var(--space-5) 0 10px 0;
}

.content-card p[b-jcdfh2avmb] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4) 0;
}

.content-card ul[b-jcdfh2avmb],
.content-card ol[b-jcdfh2avmb] {
    margin: 0 0 var(--space-5) 0;
    padding-left: 28px;
}

.content-card li[b-jcdfh2avmb] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: 10px;
}

.content-card a[b-jcdfh2avmb] {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: color .2s ease;
}

.content-card a:hover[b-jcdfh2avmb] {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.content-card strong[b-jcdfh2avmb] {
    font-weight: var(--font-weight-bold);
    color: var(--color-dark-secondary, #1E293B);
}

/* ── Special Content Blocks ─────────── */

/* Intro Section */
.intro-section[b-jcdfh2avmb] {
    background: var(--color-primary-light, rgba(26, 124, 202, .06));
    border-radius: var(--radius-xl);
    padding: var(--space-6) 28px;
    border: 1px solid rgba(26, 124, 202, 0.1);
    margin-bottom: 28px;
}

.intro-text[b-jcdfh2avmb] {
    font-size: var(--font-size-md);
    line-height: 1.7;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
    margin: 0 !important;
}

/* Contact Info Box */
.contact-info[b-jcdfh2avmb] {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-6);
    margin: var(--space-4) 0;
    border: 1px solid var(--color-border-primary);
    transition: border-color .2s ease;
}

.contact-info:hover[b-jcdfh2avmb] {
    border-color: var(--color-border-secondary);
}

.contact-info p[b-jcdfh2avmb] {
    margin: 0 0 6px 0;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

.contact-info p:last-child[b-jcdfh2avmb] {
    margin-bottom: 0;
}

/* Legal Table */
.legal-table[b-jcdfh2avmb] {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-5) 0;
    font-size: 14px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border-primary);
}

.legal-table th[b-jcdfh2avmb],
.legal-table td[b-jcdfh2avmb] {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--color-border-primary);
}

.legal-table th[b-jcdfh2avmb] {
    background: var(--color-bg-secondary);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.legal-table td[b-jcdfh2avmb] {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.legal-table tr:last-child td[b-jcdfh2avmb] {
    border-bottom: none;
}

.legal-table tr:hover td[b-jcdfh2avmb] {
    background: var(--color-bg-secondary);
}

/* Rights Grid */
.rights-grid[b-jcdfh2avmb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-5);
    margin: var(--space-5) 0;
}

.right-item[b-jcdfh2avmb] {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    border: 1px solid var(--color-border-primary);
    transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

.right-item:hover[b-jcdfh2avmb] {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-secondary);
    transform: translateY(-2px);
}

.right-item h4[b-jcdfh2avmb] {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    margin: 0 0 10px 0;
}

.right-item p[b-jcdfh2avmb] {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

/* Rights Summary Badges */
.rights-summary[b-jcdfh2avmb] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: var(--space-5) 0;
}

.right-badge[b-jcdfh2avmb] {
    background: var(--color-primary-light, rgba(26, 124, 202, .08));
    color: var(--color-primary);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

/* Data Categories */
.data-categories[b-jcdfh2avmb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-5);
    margin: var(--space-5) 0;
}

.category-item[b-jcdfh2avmb] {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    border: 1px solid var(--color-border-primary);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.category-item:hover[b-jcdfh2avmb] {
    border-color: var(--color-border-secondary);
    box-shadow: var(--shadow-sm);
}

.category-item h4[b-jcdfh2avmb] {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    margin: 0 0 14px 0;
}

.category-item ul[b-jcdfh2avmb] {
    margin: 0;
    padding-left: var(--space-5);
}

.category-item li[b-jcdfh2avmb] {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 6px;
}

/* Purpose List */
.purpose-list[b-jcdfh2avmb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: var(--space-5) 0;
}

.purpose-item[b-jcdfh2avmb] {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--color-border-primary);
    border-left: 4px solid var(--color-primary);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.purpose-item:hover[b-jcdfh2avmb] {
    border-color: var(--color-border-secondary);
    border-left-color: var(--color-primary-hover);
    box-shadow: var(--shadow-sm);
}

.purpose-header[b-jcdfh2avmb] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.purpose-icon[b-jcdfh2avmb] {
    font-size: 22px;
}

.purpose-header h4[b-jcdfh2avmb] {
    margin: 0;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
}

.purpose-item p[b-jcdfh2avmb] {
    margin: 6px 0;
    font-size: 14px;
    line-height: 1.6;
}

/* Numbered List */
.numbered-list[b-jcdfh2avmb] {
    counter-reset: item;
    list-style: none;
    padding-left: 0;
}

.numbered-list li[b-jcdfh2avmb] {
    counter-increment: item;
    position: relative;
    padding-left: 44px;
    margin-bottom: 18px;
}

.numbered-list li[b-jcdfh2avmb]::before {
    content: counter(item);
    position: absolute;
    left: 0;
    top: 2px;
    width: 28px;
    height: 28px;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-radius: 50%;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-primary);
}

/* Info Box */
.info-box[b-jcdfh2avmb] {
    background: var(--color-warning-light, #fffbeb);
    border: 1px solid rgba(217, 119, 6, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-6);
    margin: var(--space-5) 0;
}

.info-box h4[b-jcdfh2avmb] {
    color: var(--color-warning);
    font-weight: var(--font-weight-bold);
    margin: 0 0 14px 0;
}

.info-box ul[b-jcdfh2avmb] {
    margin: 0;
}

/* Note Box */
.note[b-jcdfh2avmb] {
    background: var(--color-primary-light, rgba(26, 124, 202, .06));
    border-left: 4px solid var(--color-primary);
    padding: var(--space-4) var(--space-5);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    margin: var(--space-5) 0;
}

/* Contact Grid */
.contact-grid[b-jcdfh2avmb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-5);
    margin: var(--space-6) 0;
}

.contact-card[b-jcdfh2avmb] {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    text-align: center;
    border: 1px solid var(--color-border-primary);
    transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

.contact-card:hover[b-jcdfh2avmb] {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-secondary);
    transform: translateY(-2px);
}

.contact-icon[b-jcdfh2avmb] {
    font-size: 36px;
    margin-bottom: 14px;
}

.contact-card h4[b-jcdfh2avmb] {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    margin: 0 0 10px 0;
}

.contact-card p[b-jcdfh2avmb] {
    margin: 6px 0;
    color: var(--color-text-primary);
}

.contact-note[b-jcdfh2avmb] {
    font-size: var(--font-size-sm) !important;
    color: var(--color-text-secondary) !important;
    margin-top: 10px !important;
}

/* Social Links */
.social-links[b-jcdfh2avmb] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: var(--space-5) 0;
}

.social-link[b-jcdfh2avmb] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--color-bg-secondary);
    padding: 14px var(--space-6);
    border-radius: var(--radius-lg);
    color: var(--color-text-primary);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    border: 1px solid var(--color-border-primary);
    transition: border-color .2s ease, background .2s ease, transform .15s ease;
}

.social-link:hover[b-jcdfh2avmb] {
    background: var(--color-primary-light, rgba(26, 124, 202, .06));
    border-color: var(--color-primary);
    color: var(--color-primary);
    text-decoration: none;
    transform: translateY(-2px);
}

.social-icon[b-jcdfh2avmb] {
    font-size: var(--font-size-xl);
}

/* ── Error State ────────────────────── */
.error-card[b-jcdfh2avmb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-20) var(--space-8);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    text-align: center;
    animation: rise-b-jcdfh2avmb .45s cubic-bezier(.4,0,.2,1) both;
}

.error-icon[b-jcdfh2avmb] {
    width: 48px;
    height: 48px;
    color: var(--color-error);
    opacity: 0.6;
}

.error-title[b-jcdfh2avmb] {
    font-size: 17px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
}

.error-desc[b-jcdfh2avmb] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 400px;
    line-height: 1.6;
}

.btn-retry[b-jcdfh2avmb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--btn-height-md);
    padding: 0 var(--space-6);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
    box-shadow: var(--btn-primary-shadow);
    font-family: inherit;
}

.btn-retry:hover[b-jcdfh2avmb] {
    background: var(--btn-primary-bg-hover);
    box-shadow: var(--btn-primary-shadow-hover);
    transform: translateY(-1px);
}

.btn-retry:active[b-jcdfh2avmb] {
    transform: translateY(0);
}

.btn-retry svg[b-jcdfh2avmb] {
    width: 18px;
    height: 18px;
}

/* ========================================
   RESPONSIVE – Tablet
   ======================================== */
@media (max-width: 991.98px) {
    .content-card[b-jcdfh2avmb] {
        padding: var(--space-8);
    }

    .content-card h2[b-jcdfh2avmb] {
        font-size: 20px;
    }

    .meta-card[b-jcdfh2avmb] {
        padding: var(--space-5) var(--space-6);
    }
}

/* ========================================
   RESPONSIVE – Mobile
   ======================================== */
@media (max-width: 767.98px) {
    .hero-title[b-jcdfh2avmb] {
        font-size: var(--font-size-2xl);
    }

    .meta-card[b-jcdfh2avmb] {
        padding: var(--space-4) var(--space-5);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .meta-badges[b-jcdfh2avmb] {
        gap: 6px;
    }

    .meta-badge[b-jcdfh2avmb] {
        padding: 4px 10px;
        font-size: var(--font-size-xs);
    }

    .content-card[b-jcdfh2avmb] {
        padding: var(--space-6);
    }

    .content-card h2[b-jcdfh2avmb] {
        font-size: 18px;
        line-height: 1.4;
        margin: 28px 0 14px 0;
    }

    .content-card h2[b-jcdfh2avmb]::before {
        height: 22px;
    }

    .content-card h3[b-jcdfh2avmb] {
        font-size: var(--font-size-md);
    }

    .content-card p[b-jcdfh2avmb],
    .content-card li[b-jcdfh2avmb] {
        font-size: 14px;
        line-height: 1.65;
    }

    .legal-table[b-jcdfh2avmb] {
        display: block;
        overflow-x: auto;
    }

    .rights-grid[b-jcdfh2avmb],
    .data-categories[b-jcdfh2avmb],
    .contact-grid[b-jcdfh2avmb] {
        grid-template-columns: 1fr;
    }

    .social-links[b-jcdfh2avmb] {
        flex-direction: column;
    }

    .intro-section[b-jcdfh2avmb] {
        padding: var(--space-5);
    }

    .error-card[b-jcdfh2avmb] {
        padding: 60px var(--space-6);
    }
}

/* ========================================
   RESPONSIVE – Small Mobile
   ======================================== */
@media (max-width: 575.98px) {
    .hero-title[b-jcdfh2avmb] {
        font-size: 22px;
    }

    .meta-card[b-jcdfh2avmb] {
        padding: 14px var(--space-4);
        border-radius: var(--radius-lg);
    }

    .meta-title[b-jcdfh2avmb] {
        font-size: 14px;
    }

    .content-card[b-jcdfh2avmb] {
        padding: var(--space-5);
        border-radius: var(--radius-lg);
    }

    .content-card h2[b-jcdfh2avmb] {
        font-size: 17px;
        line-height: 1.35;
    }

    .content-card h3[b-jcdfh2avmb] {
        font-size: var(--font-size-base);
    }

    .error-card[b-jcdfh2avmb] {
        padding: 50px var(--space-5);
        border-radius: var(--radius-lg);
    }

    .contact-card[b-jcdfh2avmb] {
        padding: var(--space-5);
    }

    .purpose-item[b-jcdfh2avmb] {
        padding: var(--space-4) var(--space-5);
    }

    .numbered-list li[b-jcdfh2avmb] {
        padding-left: 40px;
    }

    .numbered-list li[b-jcdfh2avmb]::before {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }

    .btn-retry[b-jcdfh2avmb] {
        height: 42px;
        font-size: var(--font-size-sm);
    }
}

/* ── Reduced Motion ──────────────────── */
@media (prefers-reduced-motion: reduce) {
    .privacy-hero[b-jcdfh2avmb],
    .meta-card[b-jcdfh2avmb],
    .content-card[b-jcdfh2avmb],
    .error-card[b-jcdfh2avmb] {
        animation: none;
    }

    .right-item[b-jcdfh2avmb],
    .contact-card[b-jcdfh2avmb],
    .social-link[b-jcdfh2avmb],
    .btn-retry[b-jcdfh2avmb],
    .purpose-item[b-jcdfh2avmb],
    .category-item[b-jcdfh2avmb],
    .contact-info[b-jcdfh2avmb],
    .content-card a[b-jcdfh2avmb] {
        transition: none;
    }

    .right-item:hover[b-jcdfh2avmb],
    .contact-card:hover[b-jcdfh2avmb],
    .social-link:hover[b-jcdfh2avmb],
    .btn-retry:hover[b-jcdfh2avmb],
    .purpose-item:hover[b-jcdfh2avmb] {
        transform: none;
    }
}

/* ── Focus States ────────────────────── */
.btn-retry:focus-visible[b-jcdfh2avmb],
.social-link:focus-visible[b-jcdfh2avmb],
.contact-card:focus-visible[b-jcdfh2avmb] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
/* /Components/Pages/Legal/Terms.razor.rz.scp.css */
/* ========================================
   TERMS PAGE – Clean, solid-surface design
   ======================================== */

/* ── Keyframes ──────────────────────── */
@keyframes rise-b-bnj4mjyxxk {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Layout ─────────────────────────── */
.terms-layout[b-bnj4mjyxxk] {
    width: 100%;
    padding-bottom: var(--space-12);
}

/* ── Hero ────────────────────────────── */
.terms-hero[b-bnj4mjyxxk] {
    padding: var(--space-2) 0 var(--space-6);
    animation: rise-b-bnj4mjyxxk .45s cubic-bezier(.4,0,.2,1) both;
}

.hero-title[b-bnj4mjyxxk] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1.15;
}

.hero-lead[b-bnj4mjyxxk] {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 6px 0 0;
    line-height: var(--line-height-normal);
}

/* ── Meta Card ──────────────────────── */
.meta-card[b-bnj4mjyxxk] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-5) 28px;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
    animation: rise-b-bnj4mjyxxk .45s cubic-bezier(.4,0,.2,1) .06s both;
}

.meta-title[b-bnj4mjyxxk] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

.meta-badges[b-bnj4mjyxxk] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.meta-badge[b-bnj4mjyxxk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    background: var(--color-primary-light, rgba(26, 124, 202, .08));
    color: var(--color-primary);
}

.meta-badge svg[b-bnj4mjyxxk] {
    flex-shrink: 0;
}

/* ── Content Card ───────────────────── */
.content-card[b-bnj4mjyxxk] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    animation: rise-b-bnj4mjyxxk .45s cubic-bezier(.4,0,.2,1) .12s both;
}

/* ── Dynamic HTML Content Typography ── */
.content-card h2[b-bnj4mjyxxk] {
    font-weight: var(--font-weight-bold);
    font-size: 22px;
    line-height: var(--line-height-snug);
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
    margin: 36px 0 18px 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.content-card h2[b-bnj4mjyxxk]::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 26px;
    background: var(--color-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

.content-card h2:first-child[b-bnj4mjyxxk] {
    margin-top: 0;
}

.content-card h3[b-bnj4mjyxxk] {
    font-weight: var(--font-weight-bold);
    font-size: 17px;
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    margin: var(--space-6) 0 14px 0;
}

.content-card h4[b-bnj4mjyxxk] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-dark-tertiary, #334155);
    margin: var(--space-5) 0 10px 0;
}

.content-card p[b-bnj4mjyxxk] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4) 0;
}

.content-card ul[b-bnj4mjyxxk],
.content-card ol[b-bnj4mjyxxk] {
    margin: 0 0 var(--space-5) 0;
    padding-left: 28px;
}

.content-card li[b-bnj4mjyxxk] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: 10px;
}

.content-card a[b-bnj4mjyxxk] {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: color .2s ease;
}

.content-card a:hover[b-bnj4mjyxxk] {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.content-card strong[b-bnj4mjyxxk] {
    font-weight: var(--font-weight-bold);
    color: var(--color-dark-secondary, #1E293B);
}

/* ── Special Content Blocks ─────────── */

/* Intro Section */
.intro-section[b-bnj4mjyxxk] {
    background: var(--color-primary-light, rgba(26, 124, 202, .06));
    border-radius: var(--radius-xl);
    padding: var(--space-6) 28px;
    border: 1px solid rgba(26, 124, 202, 0.1);
    margin-bottom: 28px;
}

.intro-text[b-bnj4mjyxxk] {
    font-size: var(--font-size-md);
    line-height: 1.7;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
    margin: 0 !important;
}

/* Contact Info Box */
.contact-info[b-bnj4mjyxxk] {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-6);
    margin: var(--space-4) 0;
    border: 1px solid var(--color-border-primary);
    transition: border-color .2s ease;
}

.contact-info:hover[b-bnj4mjyxxk] {
    border-color: var(--color-border-secondary);
}

.contact-info p[b-bnj4mjyxxk] {
    margin: 0 0 6px 0;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

.contact-info p:last-child[b-bnj4mjyxxk] {
    margin-bottom: 0;
}

/* Legal Table */
.legal-table[b-bnj4mjyxxk] {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-5) 0;
    font-size: 14px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border-primary);
}

.legal-table th[b-bnj4mjyxxk],
.legal-table td[b-bnj4mjyxxk] {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--color-border-primary);
}

.legal-table th[b-bnj4mjyxxk] {
    background: var(--color-bg-secondary);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.legal-table td[b-bnj4mjyxxk] {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.legal-table tr:last-child td[b-bnj4mjyxxk] {
    border-bottom: none;
}

.legal-table tr:hover td[b-bnj4mjyxxk] {
    background: var(--color-bg-secondary);
}

/* Rights Grid */
.rights-grid[b-bnj4mjyxxk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-5);
    margin: var(--space-5) 0;
}

.right-item[b-bnj4mjyxxk] {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    border: 1px solid var(--color-border-primary);
    transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

.right-item:hover[b-bnj4mjyxxk] {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-secondary);
    transform: translateY(-2px);
}

.right-item h4[b-bnj4mjyxxk] {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    margin: 0 0 10px 0;
}

.right-item p[b-bnj4mjyxxk] {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

/* Rights Summary Badges */
.rights-summary[b-bnj4mjyxxk] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: var(--space-5) 0;
}

.right-badge[b-bnj4mjyxxk] {
    background: var(--color-primary-light, rgba(26, 124, 202, .08));
    color: var(--color-primary);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

/* Data Categories */
.data-categories[b-bnj4mjyxxk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-5);
    margin: var(--space-5) 0;
}

.category-item[b-bnj4mjyxxk] {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    border: 1px solid var(--color-border-primary);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.category-item:hover[b-bnj4mjyxxk] {
    border-color: var(--color-border-secondary);
    box-shadow: var(--shadow-sm);
}

.category-item h4[b-bnj4mjyxxk] {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    margin: 0 0 14px 0;
}

.category-item ul[b-bnj4mjyxxk] {
    margin: 0;
    padding-left: var(--space-5);
}

.category-item li[b-bnj4mjyxxk] {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 6px;
}

/* Purpose List */
.purpose-list[b-bnj4mjyxxk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: var(--space-5) 0;
}

.purpose-item[b-bnj4mjyxxk] {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--color-border-primary);
    border-left: 4px solid var(--color-primary);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.purpose-item:hover[b-bnj4mjyxxk] {
    border-color: var(--color-border-secondary);
    border-left-color: var(--color-primary-hover);
    box-shadow: var(--shadow-sm);
}

.purpose-header[b-bnj4mjyxxk] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.purpose-icon[b-bnj4mjyxxk] {
    font-size: 22px;
}

.purpose-header h4[b-bnj4mjyxxk] {
    margin: 0;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
}

.purpose-item p[b-bnj4mjyxxk] {
    margin: 6px 0;
    font-size: 14px;
    line-height: 1.6;
}

/* Numbered List */
.numbered-list[b-bnj4mjyxxk] {
    counter-reset: item;
    list-style: none;
    padding-left: 0;
}

.numbered-list li[b-bnj4mjyxxk] {
    counter-increment: item;
    position: relative;
    padding-left: 44px;
    margin-bottom: 18px;
}

.numbered-list li[b-bnj4mjyxxk]::before {
    content: counter(item);
    position: absolute;
    left: 0;
    top: 2px;
    width: 28px;
    height: 28px;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-radius: 50%;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-primary);
}

/* Info Box */
.info-box[b-bnj4mjyxxk] {
    background: var(--color-warning-light, #fffbeb);
    border: 1px solid rgba(217, 119, 6, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-6);
    margin: var(--space-5) 0;
}

.info-box h4[b-bnj4mjyxxk] {
    color: var(--color-warning);
    font-weight: var(--font-weight-bold);
    margin: 0 0 14px 0;
}

.info-box ul[b-bnj4mjyxxk] {
    margin: 0;
}

/* Note Box */
.note[b-bnj4mjyxxk] {
    background: var(--color-primary-light, rgba(26, 124, 202, .06));
    border-left: 4px solid var(--color-primary);
    padding: var(--space-4) var(--space-5);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    margin: var(--space-5) 0;
}

/* Contact Grid */
.contact-grid[b-bnj4mjyxxk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-5);
    margin: var(--space-6) 0;
}

.contact-card[b-bnj4mjyxxk] {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    text-align: center;
    border: 1px solid var(--color-border-primary);
    transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

.contact-card:hover[b-bnj4mjyxxk] {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-secondary);
    transform: translateY(-2px);
}

.contact-icon[b-bnj4mjyxxk] {
    font-size: 36px;
    margin-bottom: 14px;
}

.contact-card h4[b-bnj4mjyxxk] {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    margin: 0 0 10px 0;
}

.contact-card p[b-bnj4mjyxxk] {
    margin: 6px 0;
    color: var(--color-text-primary);
}

.contact-note[b-bnj4mjyxxk] {
    font-size: var(--font-size-sm) !important;
    color: var(--color-text-secondary) !important;
    margin-top: 10px !important;
}

/* Social Links */
.social-links[b-bnj4mjyxxk] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: var(--space-5) 0;
}

.social-link[b-bnj4mjyxxk] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--color-bg-secondary);
    padding: 14px var(--space-6);
    border-radius: var(--radius-lg);
    color: var(--color-text-primary);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    border: 1px solid var(--color-border-primary);
    transition: border-color .2s ease, background .2s ease, transform .15s ease;
}

.social-link:hover[b-bnj4mjyxxk] {
    background: var(--color-primary-light, rgba(26, 124, 202, .06));
    border-color: var(--color-primary);
    color: var(--color-primary);
    text-decoration: none;
    transform: translateY(-2px);
}

.social-icon[b-bnj4mjyxxk] {
    font-size: var(--font-size-xl);
}

/* ── Error State ────────────────────── */
.error-card[b-bnj4mjyxxk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-20) var(--space-8);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    text-align: center;
    animation: rise-b-bnj4mjyxxk .45s cubic-bezier(.4,0,.2,1) both;
}

.error-icon[b-bnj4mjyxxk] {
    width: 48px;
    height: 48px;
    color: var(--color-error);
    opacity: 0.6;
}

.error-title[b-bnj4mjyxxk] {
    font-size: 17px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
}

.error-desc[b-bnj4mjyxxk] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 400px;
    line-height: 1.6;
}

.btn-retry[b-bnj4mjyxxk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--btn-height-md);
    padding: 0 var(--space-6);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
    box-shadow: var(--btn-primary-shadow);
    font-family: inherit;
}

.btn-retry:hover[b-bnj4mjyxxk] {
    background: var(--btn-primary-bg-hover);
    box-shadow: var(--btn-primary-shadow-hover);
    transform: translateY(-1px);
}

.btn-retry:active[b-bnj4mjyxxk] {
    transform: translateY(0);
}

.btn-retry svg[b-bnj4mjyxxk] {
    width: 18px;
    height: 18px;
}

/* ========================================
   RESPONSIVE – Tablet
   ======================================== */
@media (max-width: 991.98px) {
    .content-card[b-bnj4mjyxxk] {
        padding: var(--space-8);
    }

    .content-card h2[b-bnj4mjyxxk] {
        font-size: 20px;
    }

    .meta-card[b-bnj4mjyxxk] {
        padding: var(--space-5) var(--space-6);
    }
}

/* ========================================
   RESPONSIVE – Mobile
   ======================================== */
@media (max-width: 767.98px) {
    .hero-title[b-bnj4mjyxxk] {
        font-size: var(--font-size-2xl);
    }

    .meta-card[b-bnj4mjyxxk] {
        padding: var(--space-4) var(--space-5);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .meta-badges[b-bnj4mjyxxk] {
        gap: 6px;
    }

    .meta-badge[b-bnj4mjyxxk] {
        padding: 4px 10px;
        font-size: var(--font-size-xs);
    }

    .content-card[b-bnj4mjyxxk] {
        padding: var(--space-6);
    }

    .content-card h2[b-bnj4mjyxxk] {
        font-size: 18px;
        line-height: 1.4;
        margin: 28px 0 14px 0;
    }

    .content-card h2[b-bnj4mjyxxk]::before {
        height: 22px;
    }

    .content-card h3[b-bnj4mjyxxk] {
        font-size: var(--font-size-md);
    }

    .content-card p[b-bnj4mjyxxk],
    .content-card li[b-bnj4mjyxxk] {
        font-size: 14px;
        line-height: 1.65;
    }

    .legal-table[b-bnj4mjyxxk] {
        display: block;
        overflow-x: auto;
    }

    .rights-grid[b-bnj4mjyxxk],
    .data-categories[b-bnj4mjyxxk],
    .contact-grid[b-bnj4mjyxxk] {
        grid-template-columns: 1fr;
    }

    .social-links[b-bnj4mjyxxk] {
        flex-direction: column;
    }

    .intro-section[b-bnj4mjyxxk] {
        padding: var(--space-5);
    }

    .error-card[b-bnj4mjyxxk] {
        padding: 60px var(--space-6);
    }
}

/* ========================================
   RESPONSIVE – Small Mobile
   ======================================== */
@media (max-width: 575.98px) {
    .hero-title[b-bnj4mjyxxk] {
        font-size: 22px;
    }

    .meta-card[b-bnj4mjyxxk] {
        padding: 14px var(--space-4);
        border-radius: var(--radius-lg);
    }

    .meta-title[b-bnj4mjyxxk] {
        font-size: 14px;
    }

    .content-card[b-bnj4mjyxxk] {
        padding: var(--space-5);
        border-radius: var(--radius-lg);
    }

    .content-card h2[b-bnj4mjyxxk] {
        font-size: 17px;
        line-height: 1.35;
    }

    .content-card h3[b-bnj4mjyxxk] {
        font-size: var(--font-size-base);
    }

    .error-card[b-bnj4mjyxxk] {
        padding: 50px var(--space-5);
        border-radius: var(--radius-lg);
    }

    .contact-card[b-bnj4mjyxxk] {
        padding: var(--space-5);
    }

    .purpose-item[b-bnj4mjyxxk] {
        padding: var(--space-4) var(--space-5);
    }

    .numbered-list li[b-bnj4mjyxxk] {
        padding-left: 40px;
    }

    .numbered-list li[b-bnj4mjyxxk]::before {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }

    .btn-retry[b-bnj4mjyxxk] {
        height: 42px;
        font-size: var(--font-size-sm);
    }
}

/* ── Reduced Motion ──────────────────── */
@media (prefers-reduced-motion: reduce) {
    .terms-hero[b-bnj4mjyxxk],
    .meta-card[b-bnj4mjyxxk],
    .content-card[b-bnj4mjyxxk],
    .error-card[b-bnj4mjyxxk] {
        animation: none;
    }

    .right-item[b-bnj4mjyxxk],
    .contact-card[b-bnj4mjyxxk],
    .social-link[b-bnj4mjyxxk],
    .btn-retry[b-bnj4mjyxxk],
    .purpose-item[b-bnj4mjyxxk],
    .category-item[b-bnj4mjyxxk],
    .contact-info[b-bnj4mjyxxk],
    .content-card a[b-bnj4mjyxxk] {
        transition: none;
    }

    .right-item:hover[b-bnj4mjyxxk],
    .contact-card:hover[b-bnj4mjyxxk],
    .social-link:hover[b-bnj4mjyxxk],
    .btn-retry:hover[b-bnj4mjyxxk],
    .purpose-item:hover[b-bnj4mjyxxk] {
        transform: none;
    }
}

/* ── Focus States ────────────────────── */
.btn-retry:focus-visible[b-bnj4mjyxxk],
.social-link:focus-visible[b-bnj4mjyxxk],
.contact-card:focus-visible[b-bnj4mjyxxk] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
/* /Components/Pages/Notifications/MyNotifications.razor.rz.scp.css */
/* ========================================
   MY NOTIFICATIONS — Premium 2026 Design
   Card-based inbox with smooth animations
   ======================================== */

@keyframes rise-b-htiyf8d201 {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes riseCard-b-htiyf8d201 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes expandIn-b-htiyf8d201 {
    from { opacity: 0; max-height: 0; }
    to   { opacity: 1; max-height: 600px; }
}

@keyframes shimmer-b-htiyf8d201 {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes pulseDot-b-htiyf8d201 {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* ── Layout ─────────────────────────── */
.notif-layout[b-htiyf8d201] {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

/* ── Hero ────────────────────────────── */
.notif-hero[b-htiyf8d201] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0 var(--space-5);
    animation: rise-b-htiyf8d201 0.45s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.notif-hero-left[b-htiyf8d201] {
    flex: 1;
    min-width: 0;
}

.notif-title[b-htiyf8d201] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1.15;
}

.notif-subtitle[b-htiyf8d201] {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 6px 0 0;
    line-height: var(--line-height-normal);
}

.notif-mark-all-btn[b-htiyf8d201] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all var(--transition-normal);
}

.notif-mark-all-btn:hover[b-htiyf8d201] {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

/* ── Filter Pills ───────────────────── */
.notif-filters[b-htiyf8d201] {
    display: flex;
    gap: var(--space-2);
    padding-bottom: var(--space-5);
    animation: rise-b-htiyf8d201 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.05s both;
}

.notif-filter-pill[b-htiyf8d201] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.notif-filter-pill:hover[b-htiyf8d201] {
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.notif-filter-pill.active[b-htiyf8d201] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
}

.notif-filter-count[b-htiyf8d201] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    background: var(--color-bg-tertiary);
    color: var(--color-text-muted);
    transition: all var(--transition-normal);
}

.notif-filter-pill.active .notif-filter-count[b-htiyf8d201] {
    background: rgba(255, 255, 255, 0.25);
    color: var(--color-text-inverse);
}

.notif-filter-count.unread[b-htiyf8d201] {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.notif-filter-pill.active .notif-filter-count.unread[b-htiyf8d201] {
    background: rgba(255, 255, 255, 0.25);
    color: var(--color-text-inverse);
}

/* ── Notification List ──────────────── */
.notif-list[b-htiyf8d201] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ── Notification Card ──────────────── */
.notif-card[b-htiyf8d201] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all var(--transition-normal);
    animation: riseCard-b-htiyf8d201 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.notif-card:hover[b-htiyf8d201] {
    border-color: var(--color-border-secondary);
    box-shadow: var(--shadow-float);
}

.notif-card.unread[b-htiyf8d201] {
    background: var(--color-primary-light);
    border-color: rgba(26, 124, 202, 0.15);
}

.notif-card.unread:hover[b-htiyf8d201] {
    border-color: rgba(26, 124, 202, 0.30);
    box-shadow: var(--shadow-float-hover);
}

.notif-card.expanded[b-htiyf8d201] {
    box-shadow: var(--shadow-float-hover);
}

.notif-card-main[b-htiyf8d201] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.notif-card-main:hover[b-htiyf8d201] {
    background: rgba(0, 0, 0, 0.015);
}

.notif-card.unread .notif-card-main:hover[b-htiyf8d201] {
    background: rgba(26, 124, 202, 0.04);
}

/* ── Indicator Dots ─────────────────── */
.notif-card-indicator[b-htiyf8d201] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    flex-shrink: 0;
    padding-top: 4px;
}

.notif-unread-dot[b-htiyf8d201] {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(26, 124, 202, 0.15);
    animation: pulseDot-b-htiyf8d201 2s ease-in-out infinite;
}

.notif-read-dot[b-htiyf8d201] {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-border-primary);
}

/* ── Card Content ───────────────────── */
.notif-card-content[b-htiyf8d201] {
    flex: 1;
    min-width: 0;
}

.notif-card-header[b-htiyf8d201] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: 4px;
}

.notif-card-title[b-htiyf8d201] {
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    line-height: var(--line-height-snug);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notif-card-title.bold[b-htiyf8d201] {
    font-weight: var(--font-weight-semibold);
}

.notif-card-time[b-htiyf8d201] {
    font-size: 12px;
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.notif-card-body[b-htiyf8d201] {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-card-meta[b-htiyf8d201] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.notif-sender[b-htiyf8d201] {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* ── Dismiss Button ─────────────────── */
.notif-dismiss-btn[b-htiyf8d201] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0;
    transition: all var(--transition-normal);
}

.notif-card:hover .notif-dismiss-btn[b-htiyf8d201] {
    opacity: 1;
}

.notif-dismiss-btn:hover[b-htiyf8d201] {
    color: var(--color-error);
    background: var(--color-error-light);
    border-color: rgba(220, 38, 38, 0.2);
}

/* ── Category Badges ────────────────── */
.notif-category-badge[b-htiyf8d201] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.03em;
    text-transform: capitalize;
}

.cat-general[b-htiyf8d201]    { background: rgba(26, 124, 202, 0.1);  color: #2563eb; }
.cat-alert[b-htiyf8d201]      { background: rgba(245, 158, 11, 0.1);  color: #b45309; }
.cat-ticket[b-htiyf8d201]     { background: rgba(16, 185, 129, 0.1);  color: #16a34a; }
.cat-wallet[b-htiyf8d201]     { background: rgba(59, 130, 246, 0.1);  color: #2563eb; }
.cat-announcement[b-htiyf8d201] { background: rgba(139, 92, 246, 0.1); color: #7c3aed; }
.cat-promo[b-htiyf8d201]      { background: rgba(236, 72, 153, 0.1);  color: #db2777; }
.cat-system[b-htiyf8d201]     { background: rgba(100, 116, 139, 0.1); color: #64748b; }
.cat-schedule[b-htiyf8d201]   { background: rgba(13, 148, 136, 0.1);  color: #0d9488; }
.cat-maintenance[b-htiyf8d201] { background: rgba(180, 83, 9, 0.1);   color: #b45309; }
.cat-safety[b-htiyf8d201]     { background: rgba(220, 38, 38, 0.1);   color: #dc2626; }
.cat-trip[b-htiyf8d201]       { background: rgba(16, 185, 129, 0.1);  color: #059669; }
.cat-security[b-htiyf8d201]   { background: rgba(75, 85, 99, 0.1);    color: #4b5563; }

/* ── Expanded Detail ────────────────── */
.notif-detail[b-htiyf8d201] {
    padding: 0 var(--space-5) var(--space-5) calc(var(--space-5) + 20px + var(--space-3));
    border-top: 1px solid var(--color-border-light);
    animation: expandIn-b-htiyf8d201 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
    overflow: hidden;
}

.notif-detail-body[b-htiyf8d201] {
    font-size: 14px;
    color: var(--color-text-primary);
    line-height: var(--line-height-relaxed);
    padding-top: var(--space-4);
    white-space: pre-wrap;
    word-break: break-word;
}

.notif-detail-footer[b-htiyf8d201] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-light);
}

.notif-detail-time[b-htiyf8d201] {
    font-size: 12px;
    color: var(--color-text-muted);
    font-family: var(--font-family-mono);
}

.notif-detail-read[b-htiyf8d201] {
    font-size: 12px;
    color: var(--color-success);
}

.notif-detail-link[b-htiyf8d201] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: all var(--transition-normal);
    margin-left: auto;
}

.notif-detail-link:hover[b-htiyf8d201] {
    background: var(--color-primary-hover);
    box-shadow: var(--shadow-sm);
}

/* ── Empty State ────────────────────── */
.notif-empty[b-htiyf8d201] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-6);
    text-align: center;
    animation: rise-b-htiyf8d201 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}

.notif-empty-icon[b-htiyf8d201] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background: var(--color-bg-tertiary);
    color: var(--color-text-muted);
    margin-bottom: var(--space-5);
}

.notif-empty-title[b-htiyf8d201] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
}

.notif-empty-text[b-htiyf8d201] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
}

/* ── Skeleton Loading ───────────────── */
.notif-skeleton-list[b-htiyf8d201] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.notif-skeleton-card[b-htiyf8d201] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    animation: riseCard-b-htiyf8d201 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.notif-skeleton-dot[b-htiyf8d201] {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    margin-top: 4px;
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-bg-secondary) 50%, var(--color-bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-htiyf8d201 1.5s ease-in-out infinite;
}

.notif-skeleton-body[b-htiyf8d201] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.notif-skeleton-line[b-htiyf8d201] {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-bg-secondary) 50%, var(--color-bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-htiyf8d201 1.5s ease-in-out infinite;
}

.notif-skeleton-line.w60[b-htiyf8d201] { width: 60%; }
.notif-skeleton-line.w90[b-htiyf8d201] { width: 90%; }
.notif-skeleton-line.w40[b-htiyf8d201] { width: 40%; }

/* ── Responsive ─────────────────────── */
@media (max-width: 767.98px) {
    .notif-hero[b-htiyf8d201] {
        flex-direction: column;
        gap: var(--space-3);
    }

    .notif-title[b-htiyf8d201] {
        font-size: var(--font-size-2xl);
    }

    .notif-card-main[b-htiyf8d201] {
        padding: var(--space-3) var(--space-4);
    }

    .notif-card-header[b-htiyf8d201] {
        flex-direction: column;
        gap: 2px;
    }

    .notif-card-title[b-htiyf8d201] {
        white-space: normal;
    }

    .notif-dismiss-btn[b-htiyf8d201] {
        opacity: 1;
    }

    .notif-detail[b-htiyf8d201] {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .notif-detail-footer[b-htiyf8d201] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .notif-detail-link[b-htiyf8d201] {
        margin-left: 0;
    }
}

@media (max-width: 575.98px) {
    .notif-card-indicator[b-htiyf8d201] {
        display: none;
    }

    .notif-card.unread[b-htiyf8d201] {
        border-left: 3px solid var(--color-primary);
    }

    .notif-mark-all-btn[b-htiyf8d201] {
        width: 100%;
        justify-content: center;
    }
}

/* ── Reduced Motion ─────────────────── */
@media (prefers-reduced-motion: reduce) {
    .notif-card[b-htiyf8d201],
    .notif-hero[b-htiyf8d201],
    .notif-filters[b-htiyf8d201],
    .notif-empty[b-htiyf8d201],
    .notif-detail[b-htiyf8d201],
    .notif-skeleton-card[b-htiyf8d201],
    .notif-unread-dot[b-htiyf8d201] {
        animation: none !important;
    }
}
/* /Components/Pages/Profile/ActivityLog.razor.rz.scp.css */
/* ========================================
   ACTIVITY LOG PAGE — MODERN 2026 APPLE-STYLE
   Glassmorphism · Design Tokens · Dark Mode
   ======================================== */

.profile-page[b-cai81ci5ew] {
    background: var(--gradient-mesh, var(--color-bg-page));
    padding: 29px var(--space-8) 56px var(--space-8);
    box-sizing: border-box;
    font-family: var(--font-family-base);
    min-height: 100vh;
}

/* ----------------------------------------
   HEADER ROW
   ---------------------------------------- */
.profile-title-row[b-cai81ci5ew] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}

.profile-title[b-cai81ci5ew] {
    margin: 0;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-3xl);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-tight);
}

.profile-subtitle[b-cai81ci5ew] {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: var(--line-height-normal);
    color: var(--color-text-secondary);
}

.profile-actions[b-cai81ci5ew] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

/* ----------------------------------------
   SECTION CARD — GLASSMORPHISM
   ---------------------------------------- */
.profile-editbox[b-cai81ci5ew] {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border-subtle);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    margin-bottom: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    width: 100%;
    max-width: 1174px;
    box-shadow: var(--glass-shadow);
    transition: box-shadow var(--transition-smooth);
    animation: cardFadeIn-b-cai81ci5ew 0.5s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.profile-editbox:hover[b-cai81ci5ew] {
    box-shadow: var(--glass-shadow-elevated);
}

@keyframes cardFadeIn-b-cai81ci5ew {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.profile-section-title[b-cai81ci5ew] {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

/* ----------------------------------------
   BUTTONS — PRIMARY
   ---------------------------------------- */
.profile-button-save[b-cai81ci5ew] {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    border-radius: var(--radius-pill);
    padding: 0 var(--space-6);
    height: var(--btn-height-xl);
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: normal;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 204px;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--btn-primary-shadow);
}

.profile-button-save:hover:not(:disabled)[b-cai81ci5ew] {
    background: var(--btn-primary-bg-hover);
    box-shadow: var(--btn-primary-shadow-hover);
    transform: translateY(-1px);
}

.profile-button-save:active:not(:disabled)[b-cai81ci5ew] {
    transform: translateY(0);
}

.profile-button-save:disabled[b-cai81ci5ew] {
    opacity: var(--btn-disabled-opacity);
    cursor: var(--btn-disabled-cursor);
}

/* ----------------------------------------
   BUTTONS — SECONDARY (CANCEL)
   ---------------------------------------- */
.profile-button-cancel[b-cai81ci5ew] {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    border: 2px solid var(--color-border-secondary);
    border-radius: var(--radius-pill);
    padding: 0 var(--space-6);
    height: var(--btn-height-xl);
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: normal;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.profile-button-cancel:hover:not(:disabled)[b-cai81ci5ew] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-primary);
}

.profile-button-cancel:disabled[b-cai81ci5ew] {
    opacity: var(--btn-disabled-opacity);
    cursor: var(--btn-disabled-cursor);
}

/* ----------------------------------------
   ALERT MESSAGES
   ---------------------------------------- */
.profile-message[b-cai81ci5ew] {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
    font-size: 14px;
    line-height: var(--line-height-normal);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: alertSlideIn-b-cai81ci5ew 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes alertSlideIn-b-cai81ci5ew {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.profile-message-error[b-cai81ci5ew] {
    background: rgba(220, 38, 38, 0.1);
    color: var(--color-error);
    border: 1px solid var(--color-error-border);
}

/* ----------------------------------------
   ACTIVITY LOG TABLE
   ---------------------------------------- */
.activity-log-table[b-cai81ci5ew] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.activity-log-header[b-cai81ci5ew] {
    display: grid;
    grid-template-columns: 160px 180px 220px 1fr;
    gap: var(--space-4);
    font-size: var(--font-size-xs);
    line-height: 1.3;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    font-weight: var(--font-weight-bold);
    padding: 0 var(--space-4);
}

/* ----------------------------------------
   ACTIVITY LOG ROW — GLASSMORPHISM
   ---------------------------------------- */
.activity-log-row[b-cai81ci5ew] {
    display: grid;
    grid-template-columns: 160px 180px 220px 1fr;
    gap: var(--space-4);
    background: var(--glass-bg-light);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--glass-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    align-items: start;
    box-shadow: var(--shadow-xs);
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    animation: rowFadeIn-b-cai81ci5ew 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.activity-log-row:nth-child(1)[b-cai81ci5ew] { animation-delay: 0.03s; }
.activity-log-row:nth-child(2)[b-cai81ci5ew] { animation-delay: 0.06s; }
.activity-log-row:nth-child(3)[b-cai81ci5ew] { animation-delay: 0.09s; }
.activity-log-row:nth-child(4)[b-cai81ci5ew] { animation-delay: 0.12s; }
.activity-log-row:nth-child(5)[b-cai81ci5ew] { animation-delay: 0.15s; }

@keyframes rowFadeIn-b-cai81ci5ew {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.activity-log-row:hover[b-cai81ci5ew] {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    box-shadow: var(--glass-shadow);
    transform: translateY(-1px);
}

/* ----------------------------------------
   ACTIVITY LOG CELLS
   ---------------------------------------- */
.activity-log-when[b-cai81ci5ew] {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-snug);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.activity-log-event[b-cai81ci5ew] {
    font-size: 14px;
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.activity-log-actor[b-cai81ci5ew] {
    font-size: 14px;
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

.activity-log-detail[b-cai81ci5ew] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.activity-log-description[b-cai81ci5ew] {
    font-size: 14px;
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

.activity-log-meta[b-cai81ci5ew] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--font-size-xs);
    line-height: 1.3;
    color: var(--color-text-muted);
    word-break: break-word;
    font-weight: var(--font-weight-medium);
}

/* ----------------------------------------
   EMPTY STATE — GLASSMORPHISM
   ---------------------------------------- */
.activity-log-empty[b-cai81ci5ew] {
    padding: var(--space-5);
    border: 1px dashed var(--color-border-secondary);
    border-radius: var(--radius-lg);
    color: var(--color-text-secondary);
    text-align: center;
    background: var(--glass-bg-light);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
}

/* ----------------------------------------
   ACTIONS (LOAD MORE)
   ---------------------------------------- */
.activity-log-actions[b-cai81ci5ew] {
    display: flex;
    justify-content: center;
    margin-top: var(--space-3);
}

/* ----------------------------------------
   RESPONSIVE
   ---------------------------------------- */
@media (max-width: 1000px) {
    .activity-log-header[b-cai81ci5ew],
    .activity-log-row[b-cai81ci5ew] {
        grid-template-columns: 140px 160px 200px 1fr;
    }
}

@media (max-width: 900px) {
    .activity-log-header[b-cai81ci5ew] {
        display: none;
    }

    .activity-log-row[b-cai81ci5ew] {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
}

@media (max-width: 768px) {
    .profile-page[b-cai81ci5ew] {
        padding: var(--space-4);
    }

    .profile-title[b-cai81ci5ew] {
        font-size: var(--font-size-2xl);
        line-height: var(--line-height-tight);
    }

    .profile-editbox[b-cai81ci5ew] {
        padding: var(--space-6);
        border-radius: var(--radius-xl);
    }

    .profile-button-save[b-cai81ci5ew],
    .profile-button-cancel[b-cai81ci5ew] {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .profile-page[b-cai81ci5ew] {
        padding: var(--space-4) var(--space-3);
    }

    .profile-editbox[b-cai81ci5ew] {
        padding: 18px;
        border-radius: var(--radius-lg);
    }

    .profile-title[b-cai81ci5ew] {
        font-size: 22px;
    }

    .profile-button-save[b-cai81ci5ew],
    .profile-button-cancel[b-cai81ci5ew] {
        height: var(--btn-height-lg);
        font-size: var(--font-size-sm);
        border-radius: var(--radius-pill);
    }

    .activity-log-row[b-cai81ci5ew] {
        padding: var(--space-3);
        border-radius: var(--radius-md);
    }
}

/* ----------------------------------------
   ACCESSIBILITY
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .profile-editbox[b-cai81ci5ew],
    .profile-message[b-cai81ci5ew],
    .activity-log-row[b-cai81ci5ew],
    .profile-button-save[b-cai81ci5ew],
    .profile-button-cancel[b-cai81ci5ew] {
        transition: none;
        animation: none;
    }
}

.profile-button-save:focus-visible[b-cai81ci5ew] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.profile-button-cancel:focus-visible[b-cai81ci5ew] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
/* /Components/Pages/Profile/Profile.razor.rz.scp.css */
/* ========================================
   PROFILE PAGE – Clean, solid-surface design
   ======================================== */

/* ── Keyframes ──────────────────────── */
@keyframes rise-b-osixulgk5s {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin-b-osixulgk5s {
    to { transform: rotate(360deg); }
}

/* ── Layout ─────────────────────────── */
.profile-layout[b-osixulgk5s] {
    width: 100%;
}

/* ── Hero ────────────────────────────── */
.profile-hero[b-osixulgk5s] {
    padding: var(--space-2) 0 var(--space-6);
    animation: rise-b-osixulgk5s .45s cubic-bezier(.4,0,.2,1) both;
}

.hero-title[b-osixulgk5s] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1.15;
}

.hero-lead[b-osixulgk5s] {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 6px 0 0;
    line-height: var(--line-height-normal);
}

/* ── Content ────────────────────────── */
.profile-columns[b-osixulgk5s] {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-6);
    align-items: start;
}

.profile-main[b-osixulgk5s] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.profile-sidebar[b-osixulgk5s] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    position: sticky;
    top: 96px;
}

/* ── Alert Banners ──────────────────── */
.alert-banner[b-osixulgk5s] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-xl);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    margin-bottom: var(--space-5);
    animation: rise-b-osixulgk5s .4s cubic-bezier(.4,0,.2,1) both;
}

.alert-banner.success[b-osixulgk5s] {
    background: var(--color-success-light, #ecfdf5);
    border: 1px solid rgba(5, 150, 105, 0.15);
    color: var(--color-success);
}

.alert-banner.error[b-osixulgk5s] {
    background: var(--color-error-light, #fef2f2);
    border: 1px solid rgba(220, 38, 38, 0.15);
    color: var(--color-error);
}

.alert-banner svg[b-osixulgk5s] {
    flex-shrink: 0;
    margin-top: 1px;
}

.alert-text[b-osixulgk5s] {
    margin: 0;
    flex: 1;
}

/* ── Section Cards ──────────────────── */
.section-card[b-osixulgk5s] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    animation: rise-b-osixulgk5s .45s cubic-bezier(.4,0,.2,1) both;
}

.section-card:nth-child(1)[b-osixulgk5s] { animation-delay: .06s; }
.section-card:nth-child(2)[b-osixulgk5s] { animation-delay: .10s; }
.section-card:nth-child(3)[b-osixulgk5s] { animation-delay: .14s; }
.section-card:nth-child(4)[b-osixulgk5s] { animation-delay: .18s; }

.section-card-header[b-osixulgk5s] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.section-icon[b-osixulgk5s] {
    width: 22px;
    height: 22px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.section-title[b-osixulgk5s] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

/* ── Form Styles ────────────────────── */
.form-grid[b-osixulgk5s] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}

.form-group[b-osixulgk5s] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-group.full-width[b-osixulgk5s] {
    grid-column: 1 / -1;
}

.form-label[b-osixulgk5s] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.form-input[b-osixulgk5s] {
    width: 100%;
    height: var(--input-height-lg);
    padding: 0 var(--space-4);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    font-family: inherit;
    transition: border-color .2s ease, box-shadow .2s ease;
    outline: none;
    box-sizing: border-box;
}

.form-input[b-osixulgk5s]::placeholder {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-normal);
}

.form-input:hover[b-osixulgk5s] {
    border-color: var(--color-border-secondary);
}

.form-input:focus[b-osixulgk5s] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(26, 124, 202, 0.1);
}

.form-input:disabled[b-osixulgk5s],
.form-input[disabled][b-osixulgk5s] {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    cursor: not-allowed;
    border-color: var(--color-border-primary);
}

/* Validation */
.form-input.invalid[b-osixulgk5s],
.form-input.modified.invalid[b-osixulgk5s] {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}

.form-input.valid[b-osixulgk5s],
.form-input.modified.valid[b-osixulgk5s] {
    border-color: var(--color-success);
}

.validation-summary[b-osixulgk5s] {
    padding: 14px 18px;
    background: var(--color-error-light, #fef2f2);
    border: 1px solid rgba(220, 38, 38, 0.15);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-5);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-error);
    line-height: var(--line-height-normal);
}

.validation-summary ul[b-osixulgk5s] {
    margin: 0;
    padding-left: 18px;
}

.validation-summary li[b-osixulgk5s] {
    margin-bottom: 4px;
}

/* ── Modern Dropdown ────────────────── */
.modern-dropdown[b-osixulgk5s] {
    position: relative;
    width: 100%;
    outline: none;
    background: transparent !important;
}

.dropdown-trigger[b-osixulgk5s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    height: var(--input-height-lg);
    padding: 0 var(--space-4);
    background: var(--color-bg-primary) !important;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease;
    box-shadow: none;
}

.dropdown-trigger:hover[b-osixulgk5s] {
    border-color: var(--color-border-secondary);
}

.modern-dropdown.open .dropdown-trigger[b-osixulgk5s] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(26, 124, 202, 0.1);
}

.dropdown-content[b-osixulgk5s] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    flex: 1;
    min-width: 0;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.dropdown-value[b-osixulgk5s] {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-arrow[b-osixulgk5s] {
    color: var(--color-text-secondary);
    flex-shrink: 0;
    transition: transform .2s cubic-bezier(.4,0,.2,1);
}

.dropdown-arrow.rotated[b-osixulgk5s] {
    transform: rotate(180deg);
}

.dropdown-menu[b-osixulgk5s] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    min-width: 240px;
    max-height: 340px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: rise-b-osixulgk5s .2s cubic-bezier(.4,0,.2,1);
}

.dropdown-options[b-osixulgk5s] {
    overflow-y: auto;
    max-height: 280px;
    padding: var(--space-2);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-secondary) transparent;
}

.dropdown-option[b-osixulgk5s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 14px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background .15s ease;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.dropdown-option:hover[b-osixulgk5s] {
    background: var(--color-bg-secondary);
}

.dropdown-option.selected[b-osixulgk5s] {
    background: var(--color-primary-light, rgba(26, 124, 202, .08));
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.option-label[b-osixulgk5s] {
    font-size: 14px;
    font-weight: inherit;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.check-icon[b-osixulgk5s] {
    color: var(--color-primary);
    flex-shrink: 0;
}

/* ── Buttons ────────────────────────── */
.form-actions[b-osixulgk5s] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-light);
}

.btn-primary[b-osixulgk5s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--btn-height-md);
    padding: 0 var(--space-6);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
    box-shadow: var(--btn-primary-shadow);
    font-family: inherit;
}

.btn-primary:hover:not(:disabled)[b-osixulgk5s] {
    background: var(--btn-primary-bg-hover);
    box-shadow: var(--btn-primary-shadow-hover);
    transform: translateY(-1px);
}

.btn-primary:active:not(:disabled)[b-osixulgk5s] {
    transform: translateY(0);
}

.btn-primary:disabled[b-osixulgk5s] {
    opacity: var(--btn-disabled-opacity);
    cursor: var(--btn-disabled-cursor);
    transform: none;
}

.btn-secondary[b-osixulgk5s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--btn-height-md);
    padding: 0 var(--space-6);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
    font-family: inherit;
}

.btn-secondary:hover:not(:disabled)[b-osixulgk5s] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.btn-secondary:disabled[b-osixulgk5s] {
    opacity: var(--btn-disabled-opacity);
    cursor: var(--btn-disabled-cursor);
}

.btn-link[b-osixulgk5s] {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    transition: background .15s ease, color .15s ease;
    font-family: inherit;
}

.btn-link:hover[b-osixulgk5s] {
    background: var(--color-primary-light, rgba(26, 124, 202, .08));
    color: var(--color-primary-hover);
}

/* ── Account Info (Read-Only) ───────── */
.info-grid[b-osixulgk5s] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.info-item[b-osixulgk5s] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-4);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    transition: background .2s ease, border-color .2s ease;
}

.info-item:hover[b-osixulgk5s] {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-primary);
}

.info-label[b-osixulgk5s] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
}

.info-value[b-osixulgk5s] {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.4;
    word-break: break-word;
}

/* ── QR Code Section ────────────────── */
.qr-description[b-osixulgk5s] {
    font-size: 14px;
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-5) 0;
    text-align: center;
}

.qr-code-container[b-osixulgk5s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-6);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-light);
}

.qr-code-wrapper[b-osixulgk5s] {
    background: var(--color-bg-primary);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border-primary);
}

.qr-code-wrapper canvas[b-osixulgk5s] {
    display: block;
    border-radius: var(--radius-md);
}

.qr-refresh-row[b-osixulgk5s] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    width: 100%;
    justify-content: center;
}

.qr-code-placeholder[b-osixulgk5s] {
    padding: var(--space-12) var(--space-6);
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
}

/* ── Photo Upload ───────────────────── */
.photo-upload-row[b-osixulgk5s] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
}

.photo-preview[b-osixulgk5s] {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-xl);
    background: var(--color-bg-secondary);
    border: 2px solid var(--color-border-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    color: var(--color-text-muted);
}

.photo-preview:has(.photo-preview-img)[b-osixulgk5s] {
    border-color: var(--color-primary);
}

.photo-preview-img[b-osixulgk5s] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.photo-upload-controls[b-osixulgk5s] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.photo-upload-zone[b-osixulgk5s] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--color-bg-secondary);
    border: 2px dashed var(--color-border-secondary);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
    min-height: 44px;
}

.photo-upload-zone:hover[b-osixulgk5s] {
    border-color: var(--color-primary);
    background: var(--color-primary-light, rgba(26, 124, 202, .04));
}

.photo-upload-zone.drag-over[b-osixulgk5s] {
    border-color: var(--color-primary);
    background: var(--color-primary-light, rgba(26, 124, 202, .06));
    border-style: solid;
    box-shadow: 0 0 0 3px rgba(26, 124, 202, 0.1);
}

.photo-upload-zone-icon[b-osixulgk5s] {
    color: var(--color-text-muted);
    flex-shrink: 0;
    pointer-events: none;
    z-index: 1;
    transition: color .2s ease;
}

.photo-upload-zone:hover .photo-upload-zone-icon[b-osixulgk5s] {
    color: var(--color-primary);
}

.photo-upload-zone-text[b-osixulgk5s] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}

.photo-upload-zone-filename[b-osixulgk5s] {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.photo-upload-hint[b-osixulgk5s] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    padding-left: 2px;
}

.photo-upload-buttons[b-osixulgk5s] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.btn-sm[b-osixulgk5s] {
    height: 32px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    border-radius: var(--radius-md) !important;
}

/* ── File Upload Zone ───────────────── */
.file-upload-zone[b-osixulgk5s] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: var(--color-bg-secondary);
    border: 2px dashed var(--color-border-secondary);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
    min-height: 100px;
}

.file-upload-zone:hover[b-osixulgk5s] {
    border-color: var(--color-primary);
    background: var(--color-primary-light, rgba(26, 124, 202, .04));
}

.file-upload-zone.drag-over[b-osixulgk5s] {
    border-color: var(--color-primary);
    background: var(--color-primary-light, rgba(26, 124, 202, .06));
    border-style: solid;
    box-shadow: 0 0 0 3px rgba(26, 124, 202, 0.1);
}

.file-upload-zone.has-file[b-osixulgk5s] {
    border-color: var(--color-success);
    background: var(--color-success-light, #ecfdf5);
    border-style: solid;
}

.file-upload-placeholder[b-osixulgk5s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    pointer-events: none;
    z-index: 1;
}

.file-upload-icon-wrapper[b-osixulgk5s] {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-xl);
    background: var(--color-primary-light, rgba(26, 124, 202, .08));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.file-upload-text[b-osixulgk5s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.file-upload-text-primary[b-osixulgk5s] {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.file-upload-link[b-osixulgk5s] {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    text-decoration: none;
    position: relative;
    z-index: 3;
}

.file-upload-link:hover[b-osixulgk5s] {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.file-upload-text-hint[b-osixulgk5s] {
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
}

.file-upload-selected[b-osixulgk5s] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    pointer-events: none;
    z-index: 1;
}

.file-upload-selected-icon[b-osixulgk5s] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: var(--color-success-light, #ecfdf5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-success);
    flex-shrink: 0;
}

.file-upload-selected-name[b-osixulgk5s] {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}

.file-upload-selected-size[b-osixulgk5s] {
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.file-upload-actions[b-osixulgk5s] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-upload[b-osixulgk5s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 40px;
    padding: 0 var(--space-5);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
    box-shadow: var(--btn-primary-shadow);
    font-family: inherit;
}

.btn-upload:hover:not(:disabled)[b-osixulgk5s] {
    background: var(--btn-primary-bg-hover);
    box-shadow: var(--btn-primary-shadow-hover);
    transform: translateY(-1px);
}

.btn-upload:disabled[b-osixulgk5s] {
    opacity: var(--btn-disabled-opacity);
    cursor: var(--btn-disabled-cursor);
    transform: none;
}

.btn-upload-cancel[b-osixulgk5s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 var(--space-4);
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
    font-family: inherit;
}

.btn-upload-cancel:hover[b-osixulgk5s] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

.btn-spinner[b-osixulgk5s] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--color-text-inverse);
    border-radius: 50%;
    animation: spin-b-osixulgk5s 600ms linear infinite;
}

.file-upload-error[b-osixulgk5s] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: 10px 14px;
    background: var(--color-error-light, #fef2f2);
    border: 1px solid rgba(220, 38, 38, 0.15);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-error);
}

.file-delete-btn[b-osixulgk5s] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-2) 14px;
    background: var(--color-bg-primary);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: var(--radius-md);
    color: var(--color-error);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
    font-family: inherit;
    white-space: nowrap;
}

.file-delete-btn:hover:not(:disabled)[b-osixulgk5s] {
    background: var(--color-error-light, #fef2f2);
    border-color: var(--color-error);
}

.file-delete-btn:disabled[b-osixulgk5s] {
    opacity: var(--btn-disabled-opacity);
    cursor: var(--btn-disabled-cursor);
}

/* ── Documents List ─────────────────── */
.documents-list[b-osixulgk5s] {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-light);
}

.documents-list-title[b-osixulgk5s] {
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 14px 0;
    letter-spacing: -0.01em;
}

.documents-list-items[b-osixulgk5s] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.document-item[b-osixulgk5s] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    transition: background .2s ease, border-color .2s ease, transform .15s ease;
}

.document-item:hover[b-osixulgk5s] {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-primary);
    transform: translateY(-1px);
}

.document-item-icon[b-osixulgk5s] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: var(--color-primary-light, rgba(26, 124, 202, .08));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

.document-item-info[b-osixulgk5s] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.document-item-name[b-osixulgk5s] {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-item-meta[b-osixulgk5s] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    flex-wrap: wrap;
}

.document-meta-dot[b-osixulgk5s] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color-border-secondary);
    flex-shrink: 0;
}

.document-status-badge[b-osixulgk5s] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    text-transform: capitalize;
}

.document-status-badge.status-pending[b-osixulgk5s] {
    background: var(--color-warning-light, #fffbeb);
    color: var(--color-warning);
    border: 1px solid rgba(245, 158, 11, 0.15);
}

.document-status-badge.status-approved[b-osixulgk5s] {
    background: var(--color-success-light, #ecfdf5);
    color: var(--color-success);
    border: 1px solid rgba(22, 163, 74, 0.15);
}

.document-status-badge.status-rejected[b-osixulgk5s] {
    background: var(--color-error-light, #fef2f2);
    color: var(--color-error);
    border: 1px solid rgba(220, 38, 38, 0.15);
}

.document-download-btn[b-osixulgk5s] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-2) 14px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
    font-family: inherit;
    white-space: nowrap;
}

.document-download-btn:hover:not(:disabled)[b-osixulgk5s] {
    background: var(--color-primary-light, rgba(26, 124, 202, .08));
    border-color: var(--color-primary);
}

.document-download-btn:disabled[b-osixulgk5s] {
    opacity: var(--btn-disabled-opacity);
    cursor: var(--btn-disabled-cursor);
}

/* ========================================
   RESPONSIVE – Tablet
   ======================================== */
@media (max-width: 991.98px) {
    .profile-columns[b-osixulgk5s] {
        grid-template-columns: 1fr;
    }

    .profile-sidebar[b-osixulgk5s] {
        position: static;
    }

    .section-card[b-osixulgk5s] {
        padding: var(--space-6);
    }

    .form-input[b-osixulgk5s] {
        height: 46px;
    }

    .dropdown-trigger[b-osixulgk5s] {
        height: 46px;
        border-radius: var(--radius-lg);
    }
}

/* ========================================
   RESPONSIVE – Mobile
   ======================================== */
@media (max-width: 767.98px) {
    .hero-title[b-osixulgk5s] {
        font-size: var(--font-size-2xl);
    }

    .profile-columns[b-osixulgk5s] {
        gap: var(--space-5);
    }

    .section-card[b-osixulgk5s] {
        padding: var(--space-5);
        border-radius: var(--radius-xl);
    }

    .form-grid[b-osixulgk5s] {
        grid-template-columns: 1fr;
    }

    .info-grid[b-osixulgk5s] {
        grid-template-columns: 1fr;
    }

    .form-actions[b-osixulgk5s] {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-primary[b-osixulgk5s],
    .btn-secondary[b-osixulgk5s] {
        width: 100%;
        justify-content: center;
    }

    .dropdown-menu[b-osixulgk5s] {
        position: fixed;
        left: var(--space-4);
        right: var(--space-4);
        width: auto;
        min-width: auto;
        max-height: 50vh;
    }

    .qr-code-container[b-osixulgk5s] {
        padding: var(--space-5);
    }

    .qr-code-wrapper[b-osixulgk5s] {
        padding: var(--space-4);
    }

    .photo-upload-row[b-osixulgk5s] {
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }

    .photo-preview[b-osixulgk5s] {
        width: 72px;
        height: 72px;
    }

    .photo-upload-controls[b-osixulgk5s] {
        width: 100%;
    }

    .photo-upload-buttons[b-osixulgk5s] {
        flex-direction: column;
        align-items: stretch;
    }

    .photo-upload-buttons .btn-upload[b-osixulgk5s],
    .photo-upload-buttons .btn-upload-cancel[b-osixulgk5s],
    .photo-upload-buttons .file-delete-btn[b-osixulgk5s] {
        width: 100%;
        justify-content: center;
    }

    .file-upload-zone[b-osixulgk5s] {
        padding: var(--space-5) var(--space-4);
    }

    .file-upload-selected-name[b-osixulgk5s] {
        max-width: 160px;
    }

    .file-upload-actions[b-osixulgk5s] {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-upload[b-osixulgk5s],
    .btn-upload-cancel[b-osixulgk5s] {
        width: 100%;
        justify-content: center;
    }

    .document-item[b-osixulgk5s] {
        flex-wrap: wrap;
    }

    .document-download-btn[b-osixulgk5s] {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   RESPONSIVE – Small Mobile
   ======================================== */
@media (max-width: 575.98px) {
    .hero-title[b-osixulgk5s] {
        font-size: 22px;
    }

    .section-card[b-osixulgk5s] {
        padding: 18px;
        border-radius: var(--radius-lg);
    }

    .section-icon[b-osixulgk5s] {
        width: 20px;
        height: 20px;
    }

    .section-title[b-osixulgk5s] {
        font-size: var(--font-size-base);
    }

    .form-input[b-osixulgk5s] {
        height: var(--btn-height-md);
        padding: 0 14px;
        border-radius: var(--radius-lg);
        font-size: var(--font-size-sm);
    }

    .dropdown-trigger[b-osixulgk5s] {
        height: var(--btn-height-md);
        padding: 0 14px;
        border-radius: var(--radius-lg);
    }

    .dropdown-value[b-osixulgk5s] {
        font-size: var(--font-size-sm);
    }

    .dropdown-menu[b-osixulgk5s] {
        border-radius: var(--radius-lg);
    }

    .dropdown-option[b-osixulgk5s] {
        padding: 10px var(--space-3);
        border-radius: var(--radius-md);
    }

    .btn-primary[b-osixulgk5s],
    .btn-secondary[b-osixulgk5s] {
        height: 42px;
        font-size: var(--font-size-sm);
        border-radius: var(--radius-lg);
    }

    .info-item[b-osixulgk5s] {
        padding: var(--space-3) 14px;
        border-radius: var(--radius-lg);
    }

    .qr-code-container[b-osixulgk5s] {
        padding: var(--space-4);
        border-radius: var(--radius-lg);
    }

    .qr-code-wrapper[b-osixulgk5s] {
        padding: 14px;
        border-radius: var(--radius-lg);
    }

    .qr-code-wrapper canvas[b-osixulgk5s] {
        width: 160px !important;
        height: 160px !important;
    }
}

/* ── Reduced Motion ──────────────────── */
@media (prefers-reduced-motion: reduce) {
    .profile-hero[b-osixulgk5s],
    .section-card[b-osixulgk5s],
    .alert-banner[b-osixulgk5s] {
        animation: none;
    }

    .form-input[b-osixulgk5s],
    .dropdown-trigger[b-osixulgk5s],
    .dropdown-arrow[b-osixulgk5s],
    .dropdown-option[b-osixulgk5s],
    .btn-primary[b-osixulgk5s],
    .btn-secondary[b-osixulgk5s],
    .btn-link[b-osixulgk5s],
    .btn-upload[b-osixulgk5s],
    .btn-upload-cancel[b-osixulgk5s],
    .photo-upload-zone[b-osixulgk5s],
    .photo-upload-zone-icon[b-osixulgk5s],
    .file-upload-zone[b-osixulgk5s],
    .file-delete-btn[b-osixulgk5s],
    .document-item[b-osixulgk5s],
    .document-download-btn[b-osixulgk5s],
    .info-item[b-osixulgk5s] {
        transition: none;
    }

    .btn-spinner[b-osixulgk5s] {
        animation-duration: 1.5s;
    }
}

/* ── Focus States ────────────────────── */
.modern-dropdown:focus-visible .dropdown-trigger[b-osixulgk5s] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.btn-primary:focus-visible[b-osixulgk5s],
.btn-secondary:focus-visible[b-osixulgk5s] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.form-input:focus-visible[b-osixulgk5s] {
    outline: none;
}
/* /Components/Pages/Tickets/Verify.razor.rz.scp.css */
/* ========================================
   VERIFY PAGE – Clean, solid-surface design
   ======================================== */

/* ── Hero ────────────────────────────── */
.verify-hero[b-696kkfixrh] {
    padding: var(--space-2) 0 var(--space-6);
    animation: rise-b-696kkfixrh .45s cubic-bezier(.4,0,.2,1) both;
}

.hero-title[b-696kkfixrh] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1.15;
}

.hero-lead[b-696kkfixrh] {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 6px 0 0;
    line-height: var(--line-height-normal);
}

/* ── Verify Form Card ────────────────── */
.verify-card[b-696kkfixrh] {
    max-width: 560px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    animation: rise-b-696kkfixrh .45s cubic-bezier(.4,0,.2,1) .06s both;
}

/* ── Form ────────────────────────────── */
.form-field[b-696kkfixrh] {
    margin-bottom: var(--space-5);
}

.form-label[b-696kkfixrh] {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

.form-input[b-696kkfixrh],
.form-field[b-696kkfixrh]  input {
    width: 100%;
    height: var(--btn-height-xl);
    padding: 0 var(--space-4);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    font-family: inherit;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
    box-sizing: border-box;
}

.form-input:hover[b-696kkfixrh],
.form-field[b-696kkfixrh]  input:hover {
    border-color: var(--color-border-secondary);
}

.form-input:focus[b-696kkfixrh],
.form-field[b-696kkfixrh]  input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(26, 124, 202, .12);
}

.form-input[b-696kkfixrh]::placeholder,
.form-field[b-696kkfixrh]  input::placeholder {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-normal);
}

/* ── Verify Button ───────────────────── */
.verify-btn[b-696kkfixrh] {
    width: 100%;
    height: var(--btn-height-xl);
    padding: 0 var(--space-6);
    background: var(--color-primary);
    color: var(--btn-primary-text);
    border: none;
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: var(--space-2);
    transition: background-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

.verify-btn:hover:not(:disabled)[b-696kkfixrh] {
    background: var(--color-primary-hover);
    box-shadow: var(--shadow-float-hover);
    transform: translateY(-1px);
}

.verify-btn:active:not(:disabled)[b-696kkfixrh] {
    transform: translateY(0);
}

.verify-btn:disabled[b-696kkfixrh] {
    opacity: .55;
    cursor: not-allowed;
}

.verify-btn:focus-visible[b-696kkfixrh] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Button spinner */
.btn-spinner[b-696kkfixrh] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: var(--radius-full);
    animation: spin-b-696kkfixrh .7s linear infinite;
}

@keyframes spin-b-696kkfixrh {
    to { transform: rotate(360deg); }
}

/* ── Alert Banner ────────────────────── */
.alert-banner[b-696kkfixrh] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-5);
    background: var(--color-error-light);
    color: var(--color-error);
    border: 1px solid var(--color-error-border);
    animation: alertIn-b-696kkfixrh .35s ease both;
}

.alert-icon[b-696kkfixrh] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

@keyframes alertIn-b-696kkfixrh {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ========================================
   RESULT CARD
   ======================================== */
.result-card[b-696kkfixrh] {
    max-width: 560px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-top: var(--space-5);
    animation: rise-b-696kkfixrh .45s cubic-bezier(.4,0,.2,1) .1s both;
}

.result-card.result-valid[b-696kkfixrh] {
    border-color: rgba(5, 150, 105, .25);
}

.result-card.result-invalid[b-696kkfixrh] {
    border-color: rgba(220, 38, 38, .25);
}

/* ── Result Header ───────────────────── */
.result-header[b-696kkfixrh] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
}

.result-valid .result-header[b-696kkfixrh] {
    background: rgba(5, 150, 105, .04);
}

.result-invalid .result-header[b-696kkfixrh] {
    background: rgba(220, 38, 38, .04);
}

.status-icon[b-696kkfixrh] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.status-icon svg[b-696kkfixrh] {
    width: 22px;
    height: 22px;
}

.status-icon.valid[b-696kkfixrh] {
    background: rgba(5, 150, 105, .1);
    color: var(--color-success);
}

.status-icon.invalid[b-696kkfixrh] {
    background: rgba(220, 38, 38, .1);
    color: var(--color-error);
}

.status-text[b-696kkfixrh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.status-label[b-696kkfixrh] {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.status-value[b-696kkfixrh] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    letter-spacing: -.01em;
}

.status-value.valid[b-696kkfixrh] {
    color: var(--color-success-dark);
}

.status-value.invalid[b-696kkfixrh] {
    color: var(--color-error);
}

/* ── Result Body ─────────────────────── */
.result-body[b-696kkfixrh] {
    padding: var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
}

.detail-row[b-696kkfixrh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border-light);
}

.detail-row:last-child[b-696kkfixrh] {
    border-bottom: none;
    padding-bottom: 0;
}

.detail-row:first-child[b-696kkfixrh] {
    padding-top: 0;
}

.detail-label[b-696kkfixrh] {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.detail-value[b-696kkfixrh] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.4;
    word-break: break-word;
}

/* ── Rise animation ──────────────────── */
@keyframes rise-b-696kkfixrh {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 767.98px) {
    .hero-title[b-696kkfixrh] {
        font-size: var(--font-size-2xl);
    }

    .verify-card[b-696kkfixrh] {
        padding: var(--space-5);
        max-width: none;
    }

    .result-card[b-696kkfixrh] {
        max-width: none;
    }
}

@media (max-width: 575.98px) {
    .hero-title[b-696kkfixrh] {
        font-size: 22px;
    }

    .verify-card[b-696kkfixrh] {
        padding: var(--space-4);
        border-radius: var(--radius-lg);
    }

    .form-input[b-696kkfixrh],
    .form-field[b-696kkfixrh]  input {
        height: var(--btn-height-lg);
        font-size: 14px;
    }

    .verify-btn[b-696kkfixrh] {
        height: var(--btn-height-lg);
        font-size: 14px;
    }

    .result-card[b-696kkfixrh] {
        border-radius: var(--radius-lg);
    }

    .result-header[b-696kkfixrh] {
        padding: var(--space-4);
        gap: var(--space-3);
    }

    .status-icon[b-696kkfixrh] {
        width: 38px;
        height: 38px;
    }

    .status-icon svg[b-696kkfixrh] {
        width: 18px;
        height: 18px;
    }

    .result-body[b-696kkfixrh] {
        padding: var(--space-4);
    }

    .detail-row[b-696kkfixrh] {
        padding: 12px 0;
    }
}

/* ── Reduced motion ──────────────────── */
@media (prefers-reduced-motion: reduce) {
    .verify-hero[b-696kkfixrh],
    .verify-card[b-696kkfixrh],
    .result-card[b-696kkfixrh],
    .alert-banner[b-696kkfixrh] {
        animation: none;
    }

    .verify-btn[b-696kkfixrh] {
        transition: none;
    }

    .verify-btn:hover:not(:disabled)[b-696kkfixrh] {
        transform: none;
    }

    .btn-spinner[b-696kkfixrh] {
        animation: none;
    }
}
/* /Components/Shared/DeleteConfirmModal.razor.rz.scp.css */
/* ========================================
   DELETE CONFIRM MODAL — Premium 2026 Design
   Focused danger UX with visual warning cue
   ======================================== */

.delete-confirm-content[b-z1k38l6c99] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
    padding: var(--space-2) 0;
}

/* Warning icon wrapper with danger glow */
.delete-confirm-icon-wrapper[b-z1k38l6c99] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--color-error-light);
    border: 1px solid var(--color-error-border);
    border-radius: var(--radius-xl);
    color: var(--color-error);
    animation: deleteIconPulse-b-z1k38l6c99 2s ease-in-out infinite;
}

@keyframes deleteIconPulse-b-z1k38l6c99 {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.1);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(220, 38, 38, 0);
    }
}

.delete-confirm-icon[b-z1k38l6c99] {
    flex-shrink: 0;
}

.delete-confirm-message[b-z1k38l6c99] {
    margin: 0;
    font-size: 15px;
    line-height: var(--line-height-relaxed);
    color: var(--color-text-primary);
    max-width: 320px;
}

.delete-confirm-disabled-message[b-z1k38l6c99] {
    margin: 0;
    font-size: 13px;
    line-height: var(--line-height-normal);
    color: var(--color-error);
    font-weight: var(--font-weight-medium);
    background: var(--color-error-light);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-error-border);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .delete-confirm-icon-wrapper[b-z1k38l6c99] {
        animation: none;
    }
}
/* /Components/Shared/FormField.razor.rz.scp.css */
/* ========================================
   FORM FIELD COMPONENT - Consistent Alignment System
   Ensures uniform spacing and alignment across all form controls
   ======================================== */

.form-field[b-8daxqplpw5] {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    min-width: 0;
}

/* Label - Fixed height for consistent alignment */
.form-field-label[b-8daxqplpw5] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 24px; /* Fixed height ensures alignment */
    font-family: var(--font-family-base, 'Inter', sans-serif);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-secondary, #64748B);
    margin-bottom: 8px;
    padding: 0;
}

/* Required indicator */
.form-field-required[b-8daxqplpw5] {
    color: var(--color-error, #DC2626);
    font-weight: 700;
}

/* Control wrapper */
.form-field-control[b-8daxqplpw5] {
    position: relative;
    width: 100%;
}

/* Ensure inputs inside have consistent styling */
.form-field-control input[b-8daxqplpw5],
.form-field-control select[b-8daxqplpw5],
.form-field-control textarea[b-8daxqplpw5] {
    width: 100%;
    box-sizing: border-box;
}

/* Help text - consistent spacing */
.form-field-help[b-8daxqplpw5] {
    min-height: 20px;
    margin-top: 6px;
    font-family: var(--font-family-base, 'Inter', sans-serif);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text-muted, #94A3B8);
}

/* Validation message - reserves space to prevent layout shift */
.form-field-validation[b-8daxqplpw5] {
    min-height: 20px;
    margin-top: 6px;
    font-family: var(--font-family-base, 'Inter', sans-serif);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-error, #DC2626);
}

/* Empty state - reserve space even without message */
.form-field-validation:empty[b-8daxqplpw5],
.form-field-help:empty[b-8daxqplpw5] {
    visibility: hidden;
}

/* Accessibility: focus visible */
.form-field-control:focus-within[b-8daxqplpw5] {
    outline: none;
}

.form-field-label:has(+ .form-field-control:focus-within)[b-8daxqplpw5] {
    color: var(--color-primary, #1A7CCA);
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .form-field-label[b-8daxqplpw5] {
        font-size: 12px;
        min-height: 22px;
        margin-bottom: 6px;
    }

    .form-field-help[b-8daxqplpw5],
    .form-field-validation[b-8daxqplpw5] {
        font-size: 11px;
        min-height: 18px;
    }
}
/* /Components/Shared/Modal.razor.rz.scp.css */
/* ========================================
   ATSK TRANSPORT WEB - MODAL SYSTEM
   Premium 2026 Enterprise Modal Design
   Layered depth, refined transitions,
   uses CSS custom properties from _design-tokens.css
   ======================================== */

/* Modal Overlay — Refined backdrop */
.modal-overlay[b-544foctpw0] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-backdrop);
    padding: var(--space-5);
    box-sizing: border-box;
    animation: modalFadeIn-b-544foctpw0 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

@keyframes modalFadeIn-b-544foctpw0 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal Container — Premium surface with depth */
.modal-container[b-544foctpw0] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.03),
        0 24px 56px -12px rgba(0, 0, 0, 0.16),
        0 8px 24px -8px rgba(0, 0, 0, 0.06);
    max-width: 560px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: modalSlideUp-b-544foctpw0 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    position: relative;
}

.modal-container.modal-size-sm[b-544foctpw0] {
    max-width: 420px;
}

.modal-container.modal-size-lg[b-544foctpw0] {
    max-width: 720px;
}

.modal-container.modal-size-xl[b-544foctpw0] {
    max-width: 960px;
}

@keyframes modalSlideUp-b-544foctpw0 {
    from {
        transform: translateY(16px) scale(0.98);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Modal Header — Clean with subtle separator */
.modal-header[b-544foctpw0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-6) var(--space-8);
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border-primary);
    position: relative;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.modal-title[b-544foctpw0] {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-tight);
}

.modal-close[b-544foctpw0] {
    background: transparent;
    border: 1px solid transparent;
    padding: var(--space-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    color: var(--color-text-muted);
    width: 36px;
    height: 36px;
}

.modal-close:hover[b-544foctpw0] {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary);
}

.modal-close:active[b-544foctpw0] {
    background: var(--color-bg-secondary);
    transform: scale(0.95);
}

.modal-close:focus-visible[b-544foctpw0] {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-color: var(--color-primary);
}

/* Modal Body */
.modal-body[b-544foctpw0] {
    padding: var(--space-8);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    color: var(--color-text-primary);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
}

/* The modal body is the single scroll container. Prevent nested scrollbars from legacy wrappers. */
.modal-body .admin-modal-scroll[b-544foctpw0] {
    max-height: none !important;
    overflow: visible !important;
}

/* Custom scrollbar for modal body */
.modal-body[b-544foctpw0]::-webkit-scrollbar {
    width: 5px;
}

.modal-body[b-544foctpw0]::-webkit-scrollbar-track {
    background: transparent;
    border-radius: var(--radius-full);
}

.modal-body[b-544foctpw0]::-webkit-scrollbar-thumb {
    background: var(--color-border-secondary);
    border-radius: var(--radius-full);
}

.modal-body[b-544foctpw0]::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* Modal Error Alert */
.admin-modal-error[b-544foctpw0] {
    background: var(--color-error-light);
    color: var(--color-error);
    border: 1px solid var(--color-error-border);
    border-left: 3px solid var(--color-error);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    animation: modalAlertSlide-b-544foctpw0 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalAlertSlide-b-544foctpw0 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal Footer — Refined with subtle background */
.modal-footer[b-544foctpw0] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-8);
    border-top: 1px solid var(--color-border-primary);
    background: var(--color-bg-secondary);
    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
}

/* ========================================
   MODAL BUTTON SYSTEM
   Premium enterprise button design
   ======================================== */

/* Base button styles */
.modal-button-primary[b-544foctpw0],
.modal-button-secondary[b-544foctpw0],
.modal-button-danger[b-544foctpw0],
.modal-button-success[b-544foctpw0] {
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border-radius: var(--radius-lg);
    padding: 0 var(--space-6);
    height: var(--btn-height-md);
    min-width: 100px;
    transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    position: relative;
    overflow: hidden;
}

/* Primary Button */
.modal-button-primary[b-544foctpw0] {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    box-shadow: var(--btn-primary-shadow);
}

.modal-button-primary:hover:not(:disabled)[b-544foctpw0] {
    background: var(--btn-primary-bg-hover);
    box-shadow: var(--btn-primary-shadow-hover);
    transform: translateY(-1px);
}

.modal-button-primary:active:not(:disabled)[b-544foctpw0] {
    background: var(--btn-primary-bg-active);
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.modal-button-primary:focus-visible[b-544foctpw0] {
    outline: none;
    box-shadow: var(--btn-primary-shadow), var(--shadow-focus);
}

.modal-button-primary:disabled[b-544foctpw0] {
    opacity: var(--btn-disabled-opacity);
    cursor: var(--btn-disabled-cursor);
    box-shadow: none;
}

/* Secondary Button */
.modal-button-secondary[b-544foctpw0] {
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-primary);
    box-shadow: none;
}

.modal-button-secondary:hover:not(:disabled)[b-544foctpw0] {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.modal-button-secondary:active:not(:disabled)[b-544foctpw0] {
    background: var(--color-bg-tertiary);
    transform: translateY(0);
    box-shadow: none;
}

.modal-button-secondary:focus-visible[b-544foctpw0] {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.modal-button-secondary:disabled[b-544foctpw0] {
    opacity: var(--btn-disabled-opacity);
    cursor: var(--btn-disabled-cursor);
    box-shadow: none;
}

/* Danger Button */
.modal-button-danger[b-544foctpw0] {
    background: var(--btn-danger-bg);
    color: var(--btn-danger-text);
    border: none;
    box-shadow: var(--btn-danger-shadow);
}

.modal-button-danger:hover:not(:disabled)[b-544foctpw0] {
    background: var(--btn-danger-bg-hover);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35);
    transform: translateY(-1px);
}

.modal-button-danger:active:not(:disabled)[b-544foctpw0] {
    background: #991B1B;
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.modal-button-danger:focus-visible[b-544foctpw0] {
    outline: none;
    box-shadow: var(--btn-danger-shadow), var(--shadow-focus-error);
}

.modal-button-danger:disabled[b-544foctpw0] {
    opacity: var(--btn-disabled-opacity);
    cursor: var(--btn-disabled-cursor);
    box-shadow: none;
}

/* Success Button */
.modal-button-success[b-544foctpw0] {
    background: var(--btn-success-bg);
    color: var(--btn-success-text);
    border: none;
    box-shadow: var(--btn-success-shadow);
}

.modal-button-success:hover:not(:disabled)[b-544foctpw0] {
    background: var(--btn-success-bg-hover);
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.35);
    transform: translateY(-1px);
}

.modal-button-success:active:not(:disabled)[b-544foctpw0] {
    background: #047857;
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.modal-button-success:focus-visible[b-544foctpw0] {
    outline: none;
    box-shadow: var(--btn-success-shadow), 0 0 0 3px rgba(5, 150, 105, 0.2);
}

.modal-button-success:disabled[b-544foctpw0] {
    opacity: var(--btn-disabled-opacity);
    cursor: var(--btn-disabled-cursor);
    box-shadow: none;
}

/* Icon in button support */
.modal-button-primary svg[b-544foctpw0],
.modal-button-secondary svg[b-544foctpw0],
.modal-button-danger svg[b-544foctpw0],
.modal-button-success svg[b-544foctpw0] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Loading state */
.modal-button-loading[b-544foctpw0] {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.modal-button-loading[b-544foctpw0]::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: buttonSpinner-b-544foctpw0 0.6s linear infinite;
}

.modal-button-primary.modal-button-loading[b-544foctpw0]::after {
    border-top-color: var(--btn-primary-text);
}

.modal-button-secondary.modal-button-loading[b-544foctpw0]::after {
    border-top-color: var(--color-text-primary);
}

@keyframes buttonSpinner-b-544foctpw0 {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet */
@media (max-width: 991.98px) {
    .modal-container[b-544foctpw0] {
        max-width: 90%;
    }

    .modal-header[b-544foctpw0] {
        padding: var(--space-5) var(--space-6);
    }

    .modal-body[b-544foctpw0] {
        padding: var(--space-6);
    }

    .modal-footer[b-544foctpw0] {
        padding: var(--space-4) var(--space-6);
    }
}

/* Mobile — Bottom sheet pattern */
@media (max-width: 767.98px) {
    .modal-overlay[b-544foctpw0] {
        padding: 0;
        align-items: flex-end;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .modal-container[b-544foctpw0] {
        max-width: 100%;
        max-height: 92vh;
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
        margin-bottom: 0;
        animation: modalSlideUpMobile-b-544foctpw0 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes modalSlideUpMobile-b-544foctpw0 {
        from {
            transform: translateY(100%);
            opacity: 0.8;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .modal-header[b-544foctpw0] {
        padding: var(--space-5) var(--space-5);
    }

    /* Drag handle indicator for mobile */
    .modal-header[b-544foctpw0]::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        background: var(--color-border-secondary);
        border-radius: var(--radius-full);
    }

    .modal-title[b-544foctpw0] {
        font-size: var(--font-size-lg);
        padding-top: var(--space-2);
    }

    .modal-close[b-544foctpw0] {
        width: 32px;
        height: 32px;
        padding: var(--space-1);
    }

    .modal-body[b-544foctpw0] {
        padding: var(--space-5);
    }

    .modal-footer[b-544foctpw0] {
        padding: var(--space-4) var(--space-5);
        flex-direction: column-reverse;
        gap: var(--space-3);
        padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
    }

    .modal-footer button[b-544foctpw0],
    .modal-button-primary[b-544foctpw0],
    .modal-button-secondary[b-544foctpw0],
    .modal-button-danger[b-544foctpw0],
    .modal-button-success[b-544foctpw0] {
        width: 100%;
        min-width: unset;
    }
}

/* Extra small screens */
@media (max-width: 375px) {
    .modal-container[b-544foctpw0] {
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        max-height: 100vh;
    }

    .modal-header[b-544foctpw0],
    .modal-body[b-544foctpw0],
    .modal-footer[b-544foctpw0] {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .modal-button-primary[b-544foctpw0],
    .modal-button-secondary[b-544foctpw0],
    .modal-button-danger[b-544foctpw0],
    .modal-button-success[b-544foctpw0] {
        height: var(--btn-height-md);
        font-size: var(--font-size-sm);
    }
}

/* ========================================
   ACCESSIBILITY & REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .modal-overlay[b-544foctpw0] {
        animation: none;
    }

    .modal-container[b-544foctpw0] {
        animation: none;
    }

    .modal-close[b-544foctpw0],
    .modal-button-primary[b-544foctpw0],
    .modal-button-secondary[b-544foctpw0],
    .modal-button-danger[b-544foctpw0],
    .modal-button-success[b-544foctpw0] {
        transition: none;
    }

    .modal-button-loading[b-544foctpw0]::after {
        animation: none;
    }

    .admin-modal-error[b-544foctpw0] {
        animation: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .modal-container[b-544foctpw0] {
        border: 2px solid var(--color-text-primary);
    }

    .modal-button-secondary[b-544foctpw0] {
        border-width: 2px;
    }
}
/* /Components/Shared/ModernDropdown.razor.rz.scp.css */
/* ==========================================================================
   Modern Dropdown Combobox - Shared Component
   ========================================================================== */

.modern-dropdown[b-x9azjubj5j] {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    outline: none;
    background: transparent !important;
    background-color: transparent !important;
}

.dropdown-trigger[b-x9azjubj5j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 52px;
    padding: 0 16px;
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    cursor: pointer;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
}

.dropdown-trigger:hover[b-x9azjubj5j] {
    border-color: #CBD5E1;
    background: #F8FAFC !important;
    background-color: #F8FAFC !important;
    box-shadow: none;
}

.modern-dropdown.open .dropdown-trigger[b-x9azjubj5j] {
    border-color: #1A7CCA;
    box-shadow: 0 0 0 4px rgba(26, 124, 202, 0.12);
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}

.dropdown-content[b-x9azjubj5j] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    flex: 1;
    min-width: 0;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.dropdown-label[b-x9azjubj5j] {
    font-size: 11px;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.dropdown-value[b-x9azjubj5j] {
    font-size: 14px;
    font-weight: 600;
    color: #0F172A;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-placeholder[b-x9azjubj5j] {
    font-size: 14px;
    font-weight: 500;
    color: #64748B;
    line-height: 1.5;
}

.dropdown-arrow[b-x9azjubj5j] {
    color: #64748B;
    flex-shrink: 0;
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown-arrow.rotated[b-x9azjubj5j] {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.dropdown-menu[b-x9azjubj5j] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    min-width: 240px;
    max-height: 340px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.12),
                0 4px 12px -4px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: dropdownSlideIn-b-x9azjubj5j 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown-menu-wide[b-x9azjubj5j] {
    min-width: 280px;
}

@keyframes dropdownSlideIn-b-x9azjubj5j {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Dropdown Search */
.dropdown-search[b-x9azjubj5j] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #F1F5F9;
    background: #FAFBFC;
}

.search-icon[b-x9azjubj5j] {
    color: #94A3B8;
    flex-shrink: 0;
}

.search-input[b-x9azjubj5j] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    color: #0F172A;
    outline: none;
    min-width: 0;
}

.search-input[b-x9azjubj5j]::placeholder {
    color: #94A3B8;
    font-weight: 400;
}

/* Dropdown Options */
.dropdown-options[b-x9azjubj5j] {
    overflow-y: auto;
    max-height: 280px;
    padding: 8px;
    scrollbar-width: thin;
    scrollbar-color: #CBD5E1 transparent;
}

.dropdown-options[b-x9azjubj5j]::-webkit-scrollbar {
    width: 6px;
}

.dropdown-options[b-x9azjubj5j]::-webkit-scrollbar-track {
    background: transparent;
}

.dropdown-options[b-x9azjubj5j]::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 3px;
}

.dropdown-option[b-x9azjubj5j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 150ms ease;
    font-size: 14px;
    font-weight: 500;
    color: #0F172A;
}

.dropdown-option:hover[b-x9azjubj5j] {
    background: #F8FAFC;
}

.dropdown-option.selected[b-x9azjubj5j] {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    color: #1A7CCA;
}

.dropdown-option.selected:hover[b-x9azjubj5j] {
    background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
}

.option-content[b-x9azjubj5j] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.option-label[b-x9azjubj5j] {
    font-size: 14px;
    font-weight: 500;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.option-sublabel[b-x9azjubj5j] {
    font-size: 12px;
    font-weight: 500;
    color: #94A3B8;
}

.dropdown-option.selected .option-sublabel[b-x9azjubj5j] {
    color: #60A5FA;
}

.check-icon[b-x9azjubj5j] {
    color: #1A7CCA;
    flex-shrink: 0;
}

.dropdown-empty[b-x9azjubj5j] {
    padding: 24px 16px;
    text-align: center;
    color: #94A3B8;
    font-size: 13px;
    font-weight: 500;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 991.98px) {
    .dropdown-trigger[b-x9azjubj5j] {
        height: 48px;
        border-radius: 12px;
    }

    .dropdown-menu[b-x9azjubj5j] {
        border-radius: 14px;
    }
}

@media (max-width: 767.98px) {
    .dropdown-trigger[b-x9azjubj5j] {
        height: 50px;
    }

    .dropdown-menu[b-x9azjubj5j] {
        position: fixed;
        left: 16px;
        right: 16px;
        width: auto;
        min-width: auto;
        max-height: 50vh;
    }
}

@media (max-width: 575.98px) {
    .dropdown-trigger[b-x9azjubj5j] {
        height: 48px;
        padding: 0 14px;
        border-radius: 10px;
    }

    .dropdown-label[b-x9azjubj5j] {
        font-size: 10px;
    }

    .dropdown-value[b-x9azjubj5j] {
        font-size: 13px;
    }

    .dropdown-placeholder[b-x9azjubj5j] {
        font-size: 13px;
    }

    .dropdown-menu[b-x9azjubj5j] {
        border-radius: 12px;
    }

    .dropdown-option[b-x9azjubj5j] {
        padding: 10px 12px;
        border-radius: 8px;
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .dropdown-trigger[b-x9azjubj5j],
    .dropdown-arrow[b-x9azjubj5j],
    .dropdown-option[b-x9azjubj5j],
    .dropdown-menu[b-x9azjubj5j] {
        transition: none;
    }

    .dropdown-menu[b-x9azjubj5j] {
        animation: none;
    }
}

/* Focus states for keyboard navigation */
.modern-dropdown:focus-visible .dropdown-trigger[b-x9azjubj5j] {
    outline: 2px solid #1A7CCA;
    outline-offset: 2px;
    border-color: #1A7CCA;
    box-shadow: 0 0 0 4px rgba(26, 124, 202, 0.12);
}
/* /Components/Shared/RichTextEditor.razor.rz.scp.css */
.rich-text-editor-wrapper[b-m7aoik6j3m] {
    width: 100%;
    background: var(--color-bg-primary, #ffffff);
    border: 1px solid var(--color-border-primary, #d4d4d4);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    font-family: var(--font-family-base, system-ui);
}

.rich-text-editor-container[b-m7aoik6j3m] {
    min-height: var(--rte-min-height, 200px);
    background: transparent;
    border: none;
    border-radius: 0;
}

/* Quill editor styling overrides */
[b-m7aoik6j3m] .ql-toolbar {
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    background: var(--color-bg-secondary, #fafafa);
    padding: 8px 12px !important;
}

[b-m7aoik6j3m] .ql-container {
    border: none !important;
    font-family: var(--font-family-base, system-ui);
    font-size: 14px;
    background: transparent;
}

[b-m7aoik6j3m] .ql-editor {
    min-height: var(--rte-min-height, 200px);
    padding: 16px;
    line-height: 1.6;
}

[b-m7aoik6j3m] .ql-editor.ql-blank::before {
    color: #a3a3a3;
    font-style: normal;
}

[b-m7aoik6j3m] .ql-editor h1,
[b-m7aoik6j3m] .ql-editor h2,
[b-m7aoik6j3m] .ql-editor h3,
[b-m7aoik6j3m] .ql-editor h4 {
    margin-top: 1em;
    margin-bottom: 0.5em;
    font-weight: 600;
    color: #1d1d1b;
}

[b-m7aoik6j3m] .ql-editor h1 {
    font-size: 1.75em;
}

[b-m7aoik6j3m] .ql-editor h2 {
    font-size: 1.5em;
}

[b-m7aoik6j3m] .ql-editor h3 {
    font-size: 1.25em;
}

[b-m7aoik6j3m] .ql-editor h4 {
    font-size: 1.1em;
}

[b-m7aoik6j3m] .ql-editor p {
    margin-bottom: 1em;
}

[b-m7aoik6j3m] .ql-editor ul,
[b-m7aoik6j3m] .ql-editor ol {
    margin-bottom: 1em;
    padding-left: 1.5em;
}

[b-m7aoik6j3m] .ql-editor li {
    margin-bottom: 0.5em;
}

[b-m7aoik6j3m] .ql-editor a {
    color: #1363a3;
    text-decoration: underline;
}

[b-m7aoik6j3m] .ql-editor a:hover {
    color: #0f4d7a;
}

/* Toolbar button styling */
[b-m7aoik6j3m] .ql-toolbar button {
    width: 28px !important;
    height: 28px !important;
    padding: 4px !important;
    border-radius: 4px;
}

[b-m7aoik6j3m] .ql-toolbar button:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

[b-m7aoik6j3m] .ql-toolbar button.ql-active {
    background-color: rgba(0, 0, 0, 0.08);
}

[b-m7aoik6j3m] .ql-toolbar .ql-picker {
    height: 28px;
}

[b-m7aoik6j3m] .ql-toolbar .ql-picker-label {
    padding: 4px 8px;
    border-radius: 4px;
}

[b-m7aoik6j3m] .ql-toolbar .ql-picker-label:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

[b-m7aoik6j3m] .ql-toolbar .ql-picker-options {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid #e5e5e5;
    padding: 4px;
    background: var(--color-bg-primary, #ffffff);
}

[b-m7aoik6j3m] .ql-toolbar .ql-picker-item {
    padding: 4px 8px;
    border-radius: 4px;
}

[b-m7aoik6j3m] .ql-toolbar .ql-picker-item:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

/* Focus state */
.rich-text-editor-wrapper:focus-within[b-m7aoik6j3m] {
    border-color: var(--color-primary, #1a7cca);
    box-shadow: 0 0 0 3px rgba(26, 124, 202, 0.10);
}

/* Disabled state */
.rich-text-editor-container.ql-disabled[b-m7aoik6j3m] {
    opacity: 0.6;
    pointer-events: none;
}

[b-m7aoik6j3m] .ql-editor:focus {
    outline: none;
}
/* /Components/UI/AdminPageHeader.razor.rz.scp.css */
/*
 * AdminPageHeader.razor.css - Standardized Admin Page Header Styles
 *
 * NON-NEGOTIABLE RULES:
 * 1. Action buttons have FIXED widths - no shifting on refresh/loading
 * 2. Responsive: 1280px → 375px without layout jumps
 * 3. Loading states show spinner inside button without layout shift
 * 4. Grid layout ensures consistent structure across all breakpoints
 *
 * BREAKPOINTS:
 * - Desktop: 1024px+
 * - Tablet: 768px - 1023px
 * - Mobile: < 768px
 * - Small Mobile: < 480px
 */

/* ============================================
   ROOT CONTAINER
   ============================================ */
.admin-page-header[b-i0qx0l2epu] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg, 1.5rem);
    width: 100%;
    /* Avoid margin-collapse above .admin-page which reveals the tinted main-ui background. */
    margin-top: 0;
    margin-bottom: var(--space-5, 20px);
}

/* ============================================
   TITLE ROW
   ============================================ */
.aph-title-row[b-i0qx0l2epu] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md, 1rem);
}

.aph-title-content[b-i0qx0l2epu] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm, 0.75rem);
    min-width: 0; /* Allow text truncation */
    flex: 1 1 auto;
}

.aph-back-link[b-i0qx0l2epu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm, 8px);
    color: var(--color-text-muted, #94A3B8);
    background: transparent;
    border: none;
    box-shadow: none;
    transition: background var(--transition-apple-fast, 0.18s cubic-bezier(0.25, 0.1, 0.25, 1)),
                color var(--transition-apple-fast, 0.18s cubic-bezier(0.25, 0.1, 0.25, 1));
    flex-shrink: 0;
    margin-top: 2px;
}

.aph-back-link:hover[b-i0qx0l2epu] {
    background: rgba(0, 0, 0, 0.04);
    color: var(--color-text-secondary, #64748B);
}

.aph-back-link:focus-visible[b-i0qx0l2epu] {
    outline: 2px solid rgba(0, 0, 0, 0.12);
    outline-offset: 1px;
}

.aph-title-text[b-i0qx0l2epu] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs, 0.25rem);
    min-width: 0;
}

.aph-title-line[b-i0qx0l2epu] {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm, 0.75rem);
    flex-wrap: nowrap;
    min-width: 0;
}

.aph-title[b-i0qx0l2epu] {
    margin: 0;
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.2;
    letter-spacing: var(--letter-spacing-display, -0.03em);
    color: var(--color-text-primary, #0F172A);
    overflow: hidden;
    text-overflow: ellipsis;
}

.aph-subtitle[b-i0qx0l2epu] {
    margin: 0;
    font-size: var(--font-size-sm, 0.8125rem);
    color: var(--color-text-muted, #94A3B8);
    line-height: var(--line-height-normal, 1.5);
    letter-spacing: var(--letter-spacing-normal, -0.01em);
}

/* Title Actions */
.aph-title-actions[b-i0qx0l2epu] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.75rem);
    flex-shrink: 0;
}

/* Create Button - Fixed Width */
.aph-create-btn[b-i0qx0l2epu] {
    min-width: 140px;
    justify-content: center;
    gap: var(--spacing-xs, 0.5rem);
}

/* ============================================
   FILTERS CARD
   ============================================ */
.aph-filters-card[b-i0qx0l2epu] {
    background: var(--glass-bg, rgba(255, 255, 255, 0.60));
    backdrop-filter: var(--glass-blur, blur(40px));
    -webkit-backdrop-filter: var(--glass-blur, blur(40px));
    border: none;
    border-radius: var(--radius-2xl, 1.5rem);
    box-shadow: var(--shadow-float, 0 2px 12px -2px rgba(0,0,0,0.05));
    overflow: visible;
    transition: box-shadow var(--transition-apple, 0.35s cubic-bezier(0.25, 0.1, 0.25, 1));
}

/* Filters Header */
.aph-filters-header[b-i0qx0l2epu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem);
    border-bottom: none;
    background: transparent;
    border-radius: var(--radius-2xl, 1.5rem) var(--radius-2xl, 1.5rem) 0 0;
}

.aph-filters-header-left[b-i0qx0l2epu] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.75rem);
}

.aph-filter-icon[b-i0qx0l2epu] {
    color: var(--text-secondary, #6b7280);
    flex-shrink: 0;
}

.aph-filters-title[b-i0qx0l2epu] {
    margin: 0;
    font-size: var(--text-base, 1rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-primary, #111827);
    letter-spacing: var(--letter-spacing-tight, -0.025em);
}

.aph-results-badge[b-i0qx0l2epu] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2xs, 0.25rem);
    padding: var(--spacing-2xs, 0.25rem) var(--spacing-sm, 0.75rem);
    background: var(--accent-bg, #eff6ff);
    color: var(--accent-text, #1d4ed8);
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
}

.aph-results-badge strong[b-i0qx0l2epu] {
    font-weight: 700;
}

/* Collapse Button */
.aph-collapse-btn[b-i0qx0l2epu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm, 8px);
    background: transparent;
    color: var(--color-text-muted, #94A3B8);
    cursor: pointer;
    transition: background var(--transition-apple-fast, 0.18s cubic-bezier(0.25, 0.1, 0.25, 1)),
                color var(--transition-apple-fast, 0.18s cubic-bezier(0.25, 0.1, 0.25, 1));
}

.aph-collapse-btn:hover[b-i0qx0l2epu] {
    background: rgba(0, 0, 0, 0.04);
    color: var(--color-text-secondary, #64748B);
}

.aph-collapse-btn:focus-visible[b-i0qx0l2epu] {
    outline: 2px solid rgba(0, 0, 0, 0.12);
    outline-offset: 1px;
}

.aph-collapse-btn svg[b-i0qx0l2epu] {
    transition: transform var(--transition-apple, 0.35s cubic-bezier(0.25, 0.1, 0.25, 1));
}

.aph-collapse-btn svg.aph-rotated[b-i0qx0l2epu] {
    transform: rotate(180deg);
}

/* Filters Body */
.aph-filters-body[b-i0qx0l2epu] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1rem);
    padding: var(--spacing-lg, 1.5rem);
    transition: opacity var(--transition-apple-fast, 0.2s cubic-bezier(0.2, 0.8, 0.2, 1)), max-height var(--transition-apple, 0.4s cubic-bezier(0.2, 0.8, 0.2, 1));
    overflow: visible; /* Allow dropdowns to overflow */
}

.aph-filters-body.aph-collapsed[b-i0qx0l2epu] {
    display: none;
}

/* Filters Content - Grid Layout for filter fields */
.aph-filters-content[b-i0qx0l2epu] {
    display: grid;
    /* auto-fill ensures columns wrap gracefully at any viewport width */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--spacing-md, 1rem);
    width: 100%;
    overflow: visible; /* Allow dropdowns to overflow */
}

/* ============================================
   ACTIONS BAR
   ============================================ */
.aph-actions-bar[b-i0qx0l2epu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md, 1rem);
    padding-top: var(--spacing-md, 1rem);
    border-top: none;
}

.aph-extra-actions[b-i0qx0l2epu] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.75rem);
    flex-wrap: wrap;
}

/* Action Buttons Container */
.aph-action-buttons[b-i0qx0l2epu] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.75rem);
    margin-left: auto; /* Push to right */
}

/* ============================================
   ACTION BUTTONS - FIXED WIDTHS (Critical!)
   ============================================ */
.aph-action-btn[b-i0qx0l2epu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs, 0.5rem);
    /* Height is set by AppButton, we just ensure consistent width */
}

/* Reset Button - Icon + Optional Text */
.aph-reset-btn[b-i0qx0l2epu] {
    min-width: 44px; /* Icon only minimum */
}

/* Search Button - Always visible text */
.aph-search-btn[b-i0qx0l2epu] {
    min-width: 110px;
}

/* Refresh Button - Always visible text */
.aph-refresh-btn[b-i0qx0l2epu] {
    min-width: 110px;
}

/* Button text that hides on small screens */
.aph-btn-text[b-i0qx0l2epu] {
    white-space: nowrap;
}

/* Button text that's optional (hides earlier) */
.aph-btn-text-optional[b-i0qx0l2epu] {
    white-space: nowrap;
}

/* ============================================
   RESULTS SUMMARY
   ============================================ */
.aph-results-summary[b-i0qx0l2epu] {
    padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem);
    background: var(--glass-bg-light, rgba(255, 255, 255, 0.42));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: none;
    border-radius: var(--radius-lg, 1rem);
    box-shadow: none;
    font-size: var(--font-size-sm, 0.8125rem);
    color: var(--color-text-muted, #94A3B8);
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Tablet: 768px - 1023px */
@media (max-width: 1023px) {
    .aph-filters-content[b-i0qx0l2epu] {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .aph-title[b-i0qx0l2epu] {
        font-size: var(--text-xl, 1.25rem);
    }

    .aph-create-btn[b-i0qx0l2epu] {
        min-width: 120px;
    }
}

/* Mobile: < 768px */
@media (max-width: 767px) {
    .admin-page-header[b-i0qx0l2epu] {
        gap: var(--spacing-md, 1rem);
    }

    .aph-title-row[b-i0qx0l2epu] {
        flex-direction: column;
        align-items: stretch;
    }

    .aph-title-actions[b-i0qx0l2epu] {
        justify-content: flex-end;
    }

    .aph-filters-header[b-i0qx0l2epu] {
        padding: var(--spacing-sm, 0.75rem) var(--spacing-md, 1rem);
    }

    .aph-filters-body[b-i0qx0l2epu] {
        padding: var(--spacing-md, 1rem);
    }

    .aph-filters-content[b-i0qx0l2epu] {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: var(--spacing-sm, 0.75rem);
    }

    .aph-actions-bar[b-i0qx0l2epu] {
        flex-direction: column;
        align-items: stretch;
    }

    .aph-action-buttons[b-i0qx0l2epu] {
        justify-content: flex-end;
        margin-left: 0;
    }

    /* Keep button widths stable */
    .aph-search-btn[b-i0qx0l2epu],
    .aph-refresh-btn[b-i0qx0l2epu] {
        min-width: 100px;
    }

    .aph-create-btn[b-i0qx0l2epu] {
        min-width: 110px;
    }
}

/* Small Mobile: < 480px */
@media (max-width: 479px) {
    .aph-title[b-i0qx0l2epu] {
        font-size: var(--text-lg, 1.125rem);
    }

    .aph-subtitle[b-i0qx0l2epu] {
        font-size: var(--text-xs, 0.75rem);
    }

    .aph-filters-content[b-i0qx0l2epu] {
        grid-template-columns: 1fr;
    }

    .aph-action-buttons[b-i0qx0l2epu] {
        width: 100%;
        justify-content: stretch;
    }

    /* On very small screens, hide optional text but keep button width */
    .aph-btn-text-optional[b-i0qx0l2epu] {
        display: none;
    }

    .aph-reset-btn[b-i0qx0l2epu] {
        min-width: 44px;
        max-width: 44px;
    }

    /* Buttons take equal space */
    .aph-search-btn[b-i0qx0l2epu],
    .aph-refresh-btn[b-i0qx0l2epu] {
        flex: 1;
        min-width: 0;
    }

    .aph-create-btn[b-i0qx0l2epu] {
        width: 100%;
    }

    .aph-results-badge[b-i0qx0l2epu] {
        font-size: var(--text-xs, 0.75rem);
        padding: var(--spacing-2xs, 0.25rem) var(--spacing-xs, 0.5rem);
    }
}

/* Extra Small: < 375px */
@media (max-width: 374px) {
    .aph-filters-header[b-i0qx0l2epu] {
        flex-wrap: wrap;
        gap: var(--spacing-sm, 0.75rem);
    }

    .aph-filters-header-left[b-i0qx0l2epu] {
        flex-wrap: wrap;
    }

    .aph-results-badge[b-i0qx0l2epu] {
        order: 3;
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   LOADING STATE STYLES
   ============================================ */

/* Ensure spinner fits without changing button size */
.aph-action-btn[b-i0qx0l2epu]  .loading-spinner {
    width: 16px;
    height: 16px;
}

/* Disabled state during loading */
.aph-action-btn:disabled[b-i0qx0l2epu] {
    cursor: not-allowed;
    opacity: 0.7;
}

/* ============================================
   FOCUS & ACCESSIBILITY
   ============================================ */

/* Ensure focus is visible on all interactive elements */
.aph-action-btn:focus-visible[b-i0qx0l2epu],
.aph-create-btn:focus-visible[b-i0qx0l2epu] {
    outline: 2px solid rgba(0, 0, 0, 0.12);
    outline-offset: 1px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .aph-filters-card[b-i0qx0l2epu] {
        box-shadow: 0 0 0 2px var(--color-text-primary);
    }

    .aph-action-btn:focus-visible[b-i0qx0l2epu] {
        outline-width: 3px;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .aph-collapse-btn svg[b-i0qx0l2epu],
    .aph-filters-body[b-i0qx0l2epu],
    .aph-back-link[b-i0qx0l2epu] {
        transition: none;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .aph-action-buttons[b-i0qx0l2epu],
    .aph-collapse-btn[b-i0qx0l2epu],
    .aph-back-link[b-i0qx0l2epu] {
        display: none;
    }

    .aph-filters-card[b-i0qx0l2epu] {
        border: none;
        box-shadow: 0 0 0 1px #000;
    }

    .aph-filters-body.aph-collapsed[b-i0qx0l2epu] {
        display: flex;
    }
}
/* /Components/UI/AppAlert.razor.rz.scp.css */
/* ========================================
   AppAlert - Standardized alert component
   Provides consistent alert styling
   ======================================== */

.app-alert[b-orlulsehqe] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.app-alert-icon[b-orlulsehqe] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.app-alert-content[b-orlulsehqe] {
    flex: 1;
    min-width: 0;
}

.app-alert-title[b-orlulsehqe] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-1);
}

.app-alert-message[b-orlulsehqe] {
    line-height: var(--line-height-relaxed);
}

.app-alert-dismiss[b-orlulsehqe] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    opacity: 0.7;
    transition: var(--transition-fast);
    margin: -4px -8px -4px 0;
}

.app-alert-dismiss:hover[b-orlulsehqe] {
    opacity: 1;
    background: rgba(0, 0, 0, 0.1);
}

/* ========================================
   VARIANTS
   ======================================== */

/* Success */
.app-alert--success[b-orlulsehqe] {
    background: var(--gradient-success);
    color: var(--color-success);
    border: 1px solid var(--color-success-border);
}

/* Error */
.app-alert--error[b-orlulsehqe] {
    background: var(--gradient-error);
    color: var(--color-error);
    border: 1px solid var(--color-error-border);
}

/* Warning */
.app-alert--warning[b-orlulsehqe] {
    background: var(--gradient-warning);
    color: var(--color-warning);
    border: 1px solid var(--color-warning-border);
}

/* Info */
.app-alert--info[b-orlulsehqe] {
    background: var(--gradient-info);
    color: var(--color-info);
    border: 1px solid var(--color-info-border);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 575.98px) {
    .app-alert[b-orlulsehqe] {
        padding: var(--space-3) var(--space-4);
    }

    .app-alert-title[b-orlulsehqe] {
        font-size: var(--font-size-sm);
    }
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .app-alert-dismiss[b-orlulsehqe] {
        transition: none;
    }
}
/* /Components/UI/AppBadge.razor.rz.scp.css */
/* ========================================
   AppBadge.razor.css - Status badge/pill component styles
   ======================================== */

.app-badge[b-jhe196rvmt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 20px;
    font-family: var(--font-family-base, 'Inter', sans-serif);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: var(--transition-fast, 0.1s ease);
}

/* Size Variants */
.app-badge--sm[b-jhe196rvmt] {
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 16px;
}

.app-badge--lg[b-jhe196rvmt] {
    padding: 8px 18px;
    font-size: 14px;
    border-radius: 24px;
}

/* Color Variants */
.app-badge--neutral[b-jhe196rvmt] {
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    color: var(--color-text-secondary, #64748B);
}

.app-badge--success[b-jhe196rvmt] {
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    color: var(--color-success, #059669);
}

.app-badge--error[b-jhe196rvmt] {
    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
    color: var(--color-error, #DC2626);
}

.app-badge--warning[b-jhe196rvmt] {
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    color: var(--color-warning, #D97706);
}

.app-badge--info[b-jhe196rvmt] {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    color: var(--color-info, #2563EB);
}

.app-badge--primary[b-jhe196rvmt] {
    background: linear-gradient(135deg, #EBF5FF 0%, #DBEAFE 100%);
    color: var(--color-primary, #1A7CCA);
}
/* /Components/UI/AppButton.razor.rz.scp.css */
/* ========================================
   AppButton - Standardized button component
   Provides consistent button styling with variants
   ======================================== */

.app-button[b-fwn9pf144x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    border-radius: var(--radius-lg);
    padding: 0 var(--space-6);
    height: var(--btn-height-md);
    border: none;
    cursor: pointer;
    transition: var(--transition-normal);
    position: relative;
    white-space: nowrap;
    text-decoration: none;
}

.app-button:focus-visible[b-fwn9pf144x] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.app-button:disabled[b-fwn9pf144x] {
    opacity: var(--btn-disabled-opacity);
    cursor: not-allowed;
    transform: none !important;
}

/* Button Content */
.app-button-content[b-fwn9pf144x] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.app-button-content.loading[b-fwn9pf144x] {
    visibility: hidden;
}

/* Spinner */
.app-button-spinner[b-fwn9pf144x] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner-icon[b-fwn9pf144x] {
    width: 20px;
    height: 20px;
    animation: button-spin-b-fwn9pf144x 1s linear infinite;
}

@keyframes button-spin-b-fwn9pf144x {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   VARIANTS
   ======================================== */

/* Primary */
.app-button--primary[b-fwn9pf144x] {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    box-shadow: var(--btn-primary-shadow);
}

.app-button--primary:hover:not(:disabled)[b-fwn9pf144x] {
    background: var(--btn-primary-bg-hover);
    box-shadow: var(--btn-primary-shadow-hover);
    transform: translateY(-1px);
}

.app-button--primary:active:not(:disabled)[b-fwn9pf144x] {
    background: var(--btn-primary-bg-active);
    transform: translateY(0);
}

/* Secondary */
.app-button--secondary[b-fwn9pf144x] {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: 1px solid var(--btn-secondary-border);
}

.app-button--secondary:hover:not(:disabled)[b-fwn9pf144x] {
    background: var(--btn-secondary-bg-hover);
    border-color: var(--btn-secondary-border-hover);
}

/* Tertiary */
.app-button--tertiary[b-fwn9pf144x] {
    background: var(--btn-tertiary-bg);
    color: var(--btn-tertiary-text);
    border: 1px solid var(--btn-tertiary-border);
}

.app-button--tertiary:hover:not(:disabled)[b-fwn9pf144x] {
    background: var(--btn-tertiary-bg-hover);
    color: var(--btn-tertiary-text-hover);
}

/* Danger */
.app-button--danger[b-fwn9pf144x] {
    background: var(--btn-danger-bg);
    color: var(--btn-danger-text);
    box-shadow: var(--btn-danger-shadow);
}

.app-button--danger:hover:not(:disabled)[b-fwn9pf144x] {
    background: var(--btn-danger-bg-hover);
    transform: translateY(-1px);
}

.app-button--danger:active:not(:disabled)[b-fwn9pf144x] {
    transform: translateY(0);
}

/* Success */
.app-button--success[b-fwn9pf144x] {
    background: var(--btn-success-bg);
    color: var(--btn-success-text);
    box-shadow: var(--btn-success-shadow);
}

.app-button--success:hover:not(:disabled)[b-fwn9pf144x] {
    background: var(--btn-success-bg-hover);
    transform: translateY(-1px);
}

.app-button--success:active:not(:disabled)[b-fwn9pf144x] {
    transform: translateY(0);
}

/* Ghost */
.app-button--ghost[b-fwn9pf144x] {
    background: transparent;
    color: var(--color-text-secondary);
}

.app-button--ghost:hover:not(:disabled)[b-fwn9pf144x] {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

/* Outline */
.app-button--outline[b-fwn9pf144x] {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.app-button--outline:hover:not(:disabled)[b-fwn9pf144x] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    box-shadow: var(--btn-primary-shadow);
}

/* ========================================
   SIZES
   ======================================== */

.app-button--xs[b-fwn9pf144x] {
    height: var(--btn-height-xs);
    padding: 0 var(--space-3);
    font-size: var(--font-size-xs);
    border-radius: var(--radius-md);
}

.app-button--sm[b-fwn9pf144x] {
    height: var(--btn-height-sm);
    padding: 0 var(--space-4);
    font-size: var(--font-size-sm);
}

.app-button--lg[b-fwn9pf144x] {
    height: var(--btn-height-lg);
    padding: 0 var(--space-8);
}

.app-button--xl[b-fwn9pf144x] {
    height: var(--btn-height-xl);
    padding: 0 var(--space-10);
    font-size: var(--font-size-md);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 575.98px) {
    .app-button[b-fwn9pf144x] {
        height: var(--btn-height-lg);
        width: 100%;
    }

    .app-button--xs[b-fwn9pf144x] {
        height: var(--btn-height-sm);
        width: auto;
    }

    .app-button--sm[b-fwn9pf144x] {
        height: var(--btn-height-md);
        width: auto;
    }
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .app-button[b-fwn9pf144x] {
        transition: none;
    }

    .app-button:hover:not(:disabled)[b-fwn9pf144x] {
        transform: none;
    }

    .spinner-icon[b-fwn9pf144x] {
        animation: none;
    }
}
/* /Components/UI/AppCard.razor.rz.scp.css */
/* ========================================
   AppCard - Standardized card component
   Provides consistent card styling
   ======================================== */

.app-card[b-ia9uaiutzz] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.app-card-header[b-ia9uaiutzz] {
    padding: var(--space-6);
    padding-bottom: 0;
}

.app-card-title[b-ia9uaiutzz] {
    font-family: var(--font-family-base);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
    margin: 0;
}

.app-card-subtitle[b-ia9uaiutzz] {
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin: var(--space-1) 0 0 0;
}

.app-card-body[b-ia9uaiutzz] {
    padding: var(--space-6);
}

.app-card-header + .app-card-body[b-ia9uaiutzz] {
    padding-top: var(--space-4);
}

.app-card-footer[b-ia9uaiutzz] {
    padding: var(--space-6);
    padding-top: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* With header and footer dividers */
.app-card-footer.with-border[b-ia9uaiutzz] {
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-primary);
}

/* Elevated variant */
.app-card--elevated[b-ia9uaiutzz] {
    box-shadow: var(--shadow-lg);
    border: none;
}

/* Outlined variant */
.app-card--outlined[b-ia9uaiutzz] {
    box-shadow: none;
    border: 2px solid var(--color-border-primary);
}

/* Interactive variant */
.app-card--interactive[b-ia9uaiutzz] {
    cursor: pointer;
    transition: var(--transition-normal);
}

.app-card--interactive:hover[b-ia9uaiutzz] {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-secondary);
    transform: translateY(-2px);
}

.app-card--interactive:active[b-ia9uaiutzz] {
    transform: translateY(0);
}

/* Compact variant */
.app-card--compact .app-card-header[b-ia9uaiutzz] {
    padding: var(--space-4);
}

.app-card--compact .app-card-body[b-ia9uaiutzz] {
    padding: var(--space-4);
}

.app-card--compact .app-card-footer[b-ia9uaiutzz] {
    padding: var(--space-4);
}

.app-card--compact .app-card-header + .app-card-body[b-ia9uaiutzz] {
    padding-top: var(--space-2);
}

/* Responsive adjustments */
@media (max-width: 575.98px) {
    .app-card[b-ia9uaiutzz] {
        border-radius: var(--radius-xl);
    }

    .app-card-header[b-ia9uaiutzz],
    .app-card-body[b-ia9uaiutzz],
    .app-card-footer[b-ia9uaiutzz] {
        padding: var(--space-4);
    }

    .app-card-header + .app-card-body[b-ia9uaiutzz] {
        padding-top: var(--space-3);
    }

    .app-card-title[b-ia9uaiutzz] {
        font-size: var(--font-size-lg);
    }
}
/* /Components/UI/AppDatePicker.razor.rz.scp.css */
/* ========================================
   AppDatePicker.razor.css - Modern date picker styles
   Matches AppSelect / AppInput design language

   Strategy: The native <input type="date"> is positioned
   absolutely to fill the entire container, with opacity:0.
   Clicking anywhere on the container triggers the native
   browser date picker popup. The visible UI (icon,
   placeholder, display text) are rendered underneath.
   ======================================== */

/* Wrapper */
.app-datepicker-wrapper[b-60l8fv2f8g] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

/* Label */
.app-datepicker-label[b-60l8fv2f8g] {
    display: flex;
    align-items: center;
    gap: var(--space-1, 4px);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted, #94A3B8);
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.app-datepicker-required[b-60l8fv2f8g] {
    color: var(--color-danger, #DC2626);
    font-weight: var(--font-weight-bold, 700);
}

/* Main container */
.app-datepicker[b-60l8fv2f8g] {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 14px;
    background: var(--color-bg-primary, #FFFFFF);
    border: 1px solid var(--color-border-primary, #E2E8F0);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: border-color 180ms ease, box-shadow 180ms ease;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.app-datepicker:hover[b-60l8fv2f8g] {
    border-color: var(--color-border-secondary, #CBD5E1);
}

.app-datepicker:focus-within[b-60l8fv2f8g] {
    border-color: var(--color-primary, #1A7CCA);
    box-shadow: 0 0 0 3px rgba(26, 124, 202, 0.1);
    background: var(--color-bg-primary, #FFFFFF);
}

.app-datepicker.has-error[b-60l8fv2f8g] {
    border-color: var(--color-danger, #DC2626);
}

.app-datepicker.has-error:focus-within[b-60l8fv2f8g] {
    box-shadow: none;
}

.app-datepicker.disabled[b-60l8fv2f8g] {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--color-bg-tertiary, #F1F5F9);
}

/* Calendar icon */
.app-datepicker-icon[b-60l8fv2f8g] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted, #94A3B8);
    flex-shrink: 0;
    transition: color 200ms ease;
    pointer-events: none;
    z-index: 1;
}

.app-datepicker:focus-within .app-datepicker-icon[b-60l8fv2f8g] {
    color: var(--color-text-secondary, #64748B);
}

/* Placeholder text (when no value) */
.app-datepicker-placeholder[b-60l8fv2f8g] {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-muted, #94A3B8);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    z-index: 1;
    letter-spacing: -0.01em;
}

/* Display text (when value is set) */
.app-datepicker-display[b-60l8fv2f8g] {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-primary, #0F172A);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    z-index: 1;
    letter-spacing: -0.01em;
}

/* Native date input — covers entire container, fully transparent */
.app-datepicker-input[b-60l8fv2f8g] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    color: transparent;
    outline: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    z-index: 2;
    font-size: 16px; /* Prevent iOS zoom */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* The native calendar picker indicator fills the entire input */
.app-datepicker-input[b-60l8fv2f8g]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
}

.app-datepicker-input[b-60l8fv2f8g]::-webkit-inner-spin-button,
.app-datepicker-input[b-60l8fv2f8g]::-webkit-clear-button {
    display: none;
    -webkit-appearance: none;
}

.app-datepicker-input[b-60l8fv2f8g]::-webkit-date-and-time-value {
    text-align: left;
}

.app-datepicker.disabled .app-datepicker-input[b-60l8fv2f8g] {
    cursor: not-allowed;
}

/* Clear button — sits on top of everything */
.app-datepicker-clear[b-60l8fv2f8g] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text-muted, #94A3B8);
    transition: background 150ms ease;
    flex-shrink: 0;
    padding: 0;
    z-index: 4;
    position: relative;
}

.app-datepicker-clear:hover[b-60l8fv2f8g] {
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-text-secondary, #64748B);
}

.app-datepicker-clear:active[b-60l8fv2f8g] {
    background: rgba(0, 0, 0, 0.08);
}

/* Help text */
.app-datepicker-help[b-60l8fv2f8g] {
    font-size: 11px;
    font-weight: 400;
    color: var(--color-text-muted, #94A3B8);
    line-height: 1.5;
    letter-spacing: -0.01em;
}

/* Error text */
.app-datepicker-error[b-60l8fv2f8g] {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-danger, #DC2626);
    line-height: 1.5;
    letter-spacing: -0.01em;
}

/* Responsive - Tablet */
@media (max-width: 768px) {
    .app-datepicker[b-60l8fv2f8g] {
        height: 44px;
        padding: 0 12px;
    }

    .app-datepicker-placeholder[b-60l8fv2f8g],
    .app-datepicker-display[b-60l8fv2f8g] {
        font-size: 13px;
    }
}

/* Responsive - Small mobile */
@media (max-width: 576px) {
    .app-datepicker[b-60l8fv2f8g] {
        height: 44px;
        padding: 0 12px;
        gap: 8px;
    }

    .app-datepicker-placeholder[b-60l8fv2f8g],
    .app-datepicker-display[b-60l8fv2f8g] {
        font-size: 13px;
    }

    .app-datepicker-icon svg[b-60l8fv2f8g] {
        width: 14px;
        height: 14px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .app-datepicker[b-60l8fv2f8g],
    .app-datepicker-icon[b-60l8fv2f8g],
    .app-datepicker-clear[b-60l8fv2f8g] {
        transition: none;
    }
}
/* /Components/UI/AppInput.razor.rz.scp.css */
/* ========================================
   AppInput.razor.css - Uses global AdminShared.css styles
   Only adds component-specific styles (errors, help text)
   ======================================== */

/* Wrapper */
.app-input-wrapper[b-8ioje2ir0o] {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

/* Required asterisk */
.app-input-required[b-8ioje2ir0o] {
    color: #DC2626;
    font-weight: 700;
    margin-left: 4px;
}

/* Error state for input */
.app-input-wrapper .admin-form-input.invalid[b-8ioje2ir0o] {
    border-color: #DC2626;
}

.app-input-wrapper .admin-form-input.invalid:focus[b-8ioje2ir0o] {
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12);
}

/* Error state for label */
.app-input-wrapper.has-error .admin-form-label[b-8ioje2ir0o] {
    color: #DC2626;
}

/* Help text */
.app-input-help[b-8ioje2ir0o] {
    font-family: var(--font-family-base, 'Inter', sans-serif);
    font-size: 11px;
    font-weight: 500;
    color: #94A3B8;
    margin-top: 8px;
    margin-left: 16px;
}

/* Error message */
.app-input-error[b-8ioje2ir0o] {
    font-family: var(--font-family-base, 'Inter', sans-serif);
    font-size: 11px;
    font-weight: 600;
    color: #DC2626;
    margin-top: 8px;
    margin-left: 16px;
}

/* Responsive */
@media (max-width: 768px) {
    .app-input-help[b-8ioje2ir0o],
    .app-input-error[b-8ioje2ir0o] {
        margin-left: 14px;
    }
}
/* /Components/UI/AppSelect.razor.rz.scp.css */
/* ========================================
   AppSelect.razor.css - Modern dropdown/select component styles
   Matches the catalog page dropdown design pattern
   ======================================== */

/* Wrapper */
.app-select-wrapper[b-1bhto8kqef] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

/* Label */
.app-select-label[b-1bhto8kqef] {
    display: flex;
    align-items: center;
    gap: var(--space-1, 4px);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted, #94A3B8);
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.app-select-required[b-1bhto8kqef] {
    color: var(--color-danger, #DC2626);
    font-weight: var(--font-weight-bold, 700);
}

/* Main select container */
.app-select[b-1bhto8kqef] {
    position: relative;
    outline: none;
    background: transparent;
}

/* Trigger button */
.app-select-trigger[b-1bhto8kqef] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 44px;
    padding: 0 14px;
    background: var(--color-bg-primary, #FFFFFF);
    border: 1px solid var(--color-border-primary, #E2E8F0);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: border-color 180ms ease, box-shadow 180ms ease;
    box-shadow: none;
    box-sizing: border-box;
}

.app-select-trigger:hover[b-1bhto8kqef] {
    border-color: var(--color-border-secondary, #CBD5E1);
}

.app-select.open .app-select-trigger[b-1bhto8kqef] {
    border-color: var(--color-primary, #1A7CCA);
    box-shadow: 0 0 0 3px rgba(26, 124, 202, 0.1);
    background: var(--color-bg-primary, #FFFFFF);
}

.app-select.has-error .app-select-trigger[b-1bhto8kqef] {
    border-color: var(--color-danger, #DC2626);
}

.app-select.has-error.open .app-select-trigger[b-1bhto8kqef] {
    box-shadow: none;
}

.app-select.disabled .app-select-trigger[b-1bhto8kqef] {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--color-bg-tertiary, #F1F5F9);
    border-radius: var(--radius-md, 8px);
}

/* Trigger content */
.app-select-content[b-1bhto8kqef] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.app-select-inner-label[b-1bhto8kqef] {
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-muted, #94A3B8);
    text-transform: none;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.app-select-value[b-1bhto8kqef] {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-primary, #0F172A);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.app-select-placeholder[b-1bhto8kqef] {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-muted, #94A3B8);
    line-height: 1.5;
    letter-spacing: -0.01em;
}

/* Arrow icon */
.app-select-arrow[b-1bhto8kqef] {
    color: var(--color-text-muted, #94A3B8);
    flex-shrink: 0;
    transition: transform 180ms ease;
    width: 14px;
    height: 14px;
}

.app-select-arrow.rotated[b-1bhto8kqef] {
    transform: rotate(180deg);
}

/* Dropdown menu */
.app-select-menu[b-1bhto8kqef] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    min-width: 220px;
    max-height: 300px;
    background: var(--color-bg-primary, #FFFFFF);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.1),
                0 2px 8px -2px rgba(0, 0, 0, 0.06);
    z-index: 1000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: appSelectSlideIn-b-1bhto8kqef 150ms ease;
}

.app-select-menu.wide[b-1bhto8kqef] {
    min-width: 280px;
}

@keyframes appSelectSlideIn-b-1bhto8kqef {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Search input */
.app-select-search[b-1bhto8kqef] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    background: transparent;
}

.app-select-search-icon[b-1bhto8kqef] {
    color: var(--color-text-muted, #94A3B8);
    flex-shrink: 0;
}

.app-select-search-input[b-1bhto8kqef] {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--font-family-base, 'Inter', sans-serif);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-primary, #0F172A);
    outline: none;
    min-width: 0;
    letter-spacing: -0.01em;
}

.app-select-search-input[b-1bhto8kqef]::placeholder {
    color: var(--color-text-muted, #94A3B8);
    font-weight: 400;
}

/* Options list */
.app-select-options[b-1bhto8kqef] {
    overflow-y: auto;
    max-height: 260px;
    padding: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-secondary, #CBD5E1) transparent;
}

.app-select-options[b-1bhto8kqef]::-webkit-scrollbar {
    width: 6px;
}

.app-select-options[b-1bhto8kqef]::-webkit-scrollbar-track {
    background: transparent;
}

.app-select-options[b-1bhto8kqef]::-webkit-scrollbar-thumb {
    background: var(--color-border-secondary, #CBD5E1);
    border-radius: 3px;
}

/* Individual option */
.app-select-option[b-1bhto8kqef] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    transition: background 120ms ease;
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-primary, #0F172A);
    letter-spacing: -0.01em;
}

.app-select-option:hover[b-1bhto8kqef] {
    background: rgba(0, 0, 0, 0.04);
}

.app-select-option.selected[b-1bhto8kqef] {
    background: rgba(0, 0, 0, 0.04);
    color: var(--color-text-primary, #0F172A);
    font-weight: 500;
}

.app-select-option.selected:hover[b-1bhto8kqef] {
    background: rgba(0, 0, 0, 0.06);
}

.app-select-option-text[b-1bhto8kqef] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Check icon */
.app-select-check-icon[b-1bhto8kqef] {
    color: var(--color-text-primary, #0F172A);
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

/* Empty state */
.app-select-empty[b-1bhto8kqef] {
    padding: 20px 14px;
    text-align: center;
    color: var(--color-text-muted, #94A3B8);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* Help text */
.app-select-help[b-1bhto8kqef] {
    font-size: 11px;
    font-weight: 400;
    color: var(--color-text-muted, #94A3B8);
    line-height: 1.5;
    letter-spacing: -0.01em;
}

/* Error state */
.app-select-error[b-1bhto8kqef] {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-danger, #DC2626);
    line-height: 1.5;
    letter-spacing: -0.01em;
}

/* Focus visible */
.app-select:focus-visible .app-select-trigger[b-1bhto8kqef] {
    outline: 2px solid rgba(0, 0, 0, 0.12);
    outline-offset: 1px;
}

/* Responsive */
@media (max-width: 768px) {
    .app-select-trigger[b-1bhto8kqef] {
        height: 44px;
        padding: 0 12px;
    }

    .app-select-value[b-1bhto8kqef],
    .app-select-placeholder[b-1bhto8kqef] {
        font-size: 13px;
    }

    .app-select-menu[b-1bhto8kqef] {
        min-width: 200px;
    }

    .app-select-option[b-1bhto8kqef] {
        padding: 8px 10px;
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    .app-select-trigger[b-1bhto8kqef] {
        height: 44px;
        padding: 0 12px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .app-select-trigger[b-1bhto8kqef],
    .app-select-arrow[b-1bhto8kqef],
    .app-select-option[b-1bhto8kqef],
    .app-select-menu[b-1bhto8kqef] {
        transition: none;
    }

    .app-select-menu[b-1bhto8kqef] {
        animation: none;
    }
}
/* /Components/UI/AppTabs.razor.rz.scp.css */
/* ========================================
   AppTabs.razor.css - Modern tabs component styles
   Clean underline design with animated indicator
   ======================================== */

.app-tabs[b-581lfcr39b] {
    display: flex;
    flex-direction: column;
}

/* Tab header container */
.app-tabs-header[b-581lfcr39b] {
    display: flex;
    gap: var(--space-1, 4px);
    position: relative;
    border-bottom: 1px solid var(--color-border-primary, #E2E8F0);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar but keep functionality */
.app-tabs-header[b-581lfcr39b]::-webkit-scrollbar {
    display: none;
}

.app-tabs-header[b-581lfcr39b] {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Individual tab button */
.app-tab-button[b-581lfcr39b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    padding: var(--space-4, 16px) var(--space-5, 20px);
    font-family: var(--font-family-base, 'Inter', sans-serif);
    font-size: var(--font-size-sm, 14px);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.25;
    color: var(--color-text-secondary, #64748B);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background-color 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
}

.app-tab-button:hover:not(.active)[b-581lfcr39b] {
    color: var(--color-text-primary, #0F172A);
    background: var(--color-bg-tertiary, #F8FAFC);
}

.app-tab-button:focus-visible[b-581lfcr39b] {
    outline: none;
    background: var(--color-primary-light, #EBF5FF);
    color: var(--color-primary, #1A7CCA);
}

/* Active tab state */
.app-tab-button.active[b-581lfcr39b] {
    color: var(--color-primary, #1A7CCA);
    border-bottom-color: var(--color-primary, #1A7CCA);
    font-weight: var(--font-weight-semibold, 600);
}

/* Active indicator glow effect */
.app-tab-button.active[b-581lfcr39b]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--color-primary, #1A7CCA) 20%,
        var(--color-primary, #1A7CCA) 80%,
        transparent 100%);
    opacity: 0.5;
    filter: blur(4px);
}

/* Tab icon */
.app-tab-icon[b-581lfcr39b] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    opacity: 0.75;
    transition: opacity 0.2s ease;
}

.app-tab-button:hover .app-tab-icon[b-581lfcr39b],
.app-tab-button.active .app-tab-icon[b-581lfcr39b] {
    opacity: 1;
}

.app-tab-icon svg[b-581lfcr39b] {
    width: 18px;
    height: 18px;
}

/* Tab badge (count indicator) */
.app-tab-badge[b-581lfcr39b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-secondary, #64748B);
    background: var(--color-bg-secondary, #F1F5F9);
    border-radius: var(--radius-full, 9999px);
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.app-tab-button:hover .app-tab-badge[b-581lfcr39b] {
    background: var(--color-bg-tertiary, #E2E8F0);
}

.app-tab-button.active .app-tab-badge[b-581lfcr39b] {
    background: var(--color-primary, #1A7CCA);
    color: var(--color-text-inverse, #FFFFFF);
    transform: scale(1.05);
}

/* Tab content area */
.app-tabs-content[b-581lfcr39b] {
    margin-top: var(--space-6, 24px);
}

/* Tab panel */
.app-tab-panel[b-581lfcr39b] {
    display: none;
}

.app-tab-panel.active[b-581lfcr39b] {
    display: block;
    animation: tabFadeIn-b-581lfcr39b 0.25s ease-out;
}

@keyframes tabFadeIn-b-581lfcr39b {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   Variant: Pill/Segment style (add .app-tabs--pills class)
   ======================================== */

.app-tabs--pills .app-tabs-header[b-581lfcr39b] {
    gap: var(--space-1, 4px);
    padding: var(--space-1, 4px);
    background: var(--color-bg-secondary, #F8FAFC);
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--color-border-primary, #E2E8F0);
    border-bottom: 1px solid var(--color-border-primary, #E2E8F0);
}

.app-tabs--pills .app-tab-button[b-581lfcr39b] {
    padding: var(--space-3, 12px) var(--space-5, 20px);
    border-radius: var(--radius-md, 8px);
    border-bottom: none;
    margin-bottom: 0;
}

.app-tabs--pills .app-tab-button.active[b-581lfcr39b] {
    background: var(--color-bg-primary, #FFFFFF);
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.06));
    border-bottom: none;
}

.app-tabs--pills .app-tab-button.active[b-581lfcr39b]::after {
    display: none;
}

/* ========================================
   Variant: Boxed style (add .app-tabs--boxed class)
   ======================================== */

.app-tabs--boxed .app-tabs-header[b-581lfcr39b] {
    background: var(--color-bg-primary, #FFFFFF);
    border: 1px solid var(--color-border-primary, #E2E8F0);
    border-bottom: none;
    border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
    padding: 0;
    gap: 0;
}

.app-tabs--boxed .app-tab-button[b-581lfcr39b] {
    padding: var(--space-4, 16px) var(--space-6, 24px);
    border-radius: 0;
    border-bottom: none;
    border-right: 1px solid var(--color-border-light, #F1F5F9);
    margin-bottom: 0;
}

.app-tabs--boxed .app-tab-button:first-child[b-581lfcr39b] {
    border-radius: var(--radius-lg, 12px) 0 0 0;
}

.app-tabs--boxed .app-tab-button:last-child[b-581lfcr39b] {
    border-right: none;
    border-radius: 0 var(--radius-lg, 12px) 0 0;
}

.app-tabs--boxed .app-tab-button.active[b-581lfcr39b] {
    background: var(--color-primary-light, #EBF5FF);
    border-bottom: none;
}

.app-tabs--boxed .app-tab-button.active[b-581lfcr39b]::after {
    display: none;
}

.app-tabs--boxed .app-tabs-content[b-581lfcr39b] {
    margin-top: 0;
    background: var(--color-bg-primary, #FFFFFF);
    border: 1px solid var(--color-border-primary, #E2E8F0);
    border-top: none;
    border-radius: 0 0 var(--radius-lg, 12px) var(--radius-lg, 12px);
    padding: var(--space-5, 20px);
}

/* ========================================
   Variant: Minimal style (add .app-tabs--minimal class)
   ======================================== */

.app-tabs--minimal .app-tabs-header[b-581lfcr39b] {
    border-bottom: none;
    gap: var(--space-6, 24px);
}

.app-tabs--minimal .app-tab-button[b-581lfcr39b] {
    padding: var(--space-3, 12px) 0;
    border-bottom: none;
    margin-bottom: 0;
    position: relative;
}

.app-tabs--minimal .app-tab-button[b-581lfcr39b]::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary, #1A7CCA);
    transition: width 0.25s ease;
}

.app-tabs--minimal .app-tab-button.active[b-581lfcr39b]::before {
    width: 100%;
}

.app-tabs--minimal .app-tab-button.active[b-581lfcr39b]::after {
    display: none;
}

/* ========================================
   Size variants
   ======================================== */

/* Compact size */
.app-tabs--compact .app-tab-button[b-581lfcr39b] {
    padding: var(--space-2, 8px) var(--space-4, 16px);
    font-size: var(--font-size-xs, 12px);
}

.app-tabs--compact .app-tab-badge[b-581lfcr39b] {
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    padding: 0 4px;
}

/* Large size */
.app-tabs--large .app-tab-button[b-581lfcr39b] {
    padding: var(--space-5, 20px) var(--space-6, 24px);
    font-size: var(--font-size-base, 15px);
}

.app-tabs--large .app-tab-icon[b-581lfcr39b] {
    width: 20px;
    height: 20px;
}

.app-tabs--large .app-tab-icon svg[b-581lfcr39b] {
    width: 20px;
    height: 20px;
}

/* ========================================
   Full width tabs
   ======================================== */

.app-tabs--full-width .app-tabs-header[b-581lfcr39b] {
    width: 100%;
}

.app-tabs--full-width .app-tab-button[b-581lfcr39b] {
    flex: 1;
    justify-content: center;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 768px) {
    .app-tabs-header[b-581lfcr39b] {
        gap: 0;
    }

    .app-tab-button[b-581lfcr39b] {
        padding: var(--space-3, 12px) var(--space-4, 16px);
        font-size: var(--font-size-sm, 13px);
    }

    .app-tabs--pills .app-tab-button[b-581lfcr39b] {
        padding: var(--space-2, 8px) var(--space-3, 12px);
    }

    .app-tabs--boxed .app-tab-button[b-581lfcr39b] {
        padding: var(--space-3, 12px) var(--space-4, 16px);
    }
}

@media (max-width: 576px) {
    .app-tab-button[b-581lfcr39b] {
        padding: var(--space-2, 8px) var(--space-3, 12px);
        font-size: var(--font-size-xs, 12px);
    }

    .app-tab-icon[b-581lfcr39b] {
        width: 16px;
        height: 16px;
    }

    .app-tab-icon svg[b-581lfcr39b] {
        width: 16px;
        height: 16px;
    }

    .app-tab-badge[b-581lfcr39b] {
        min-width: 18px;
        height: 18px;
        font-size: 10px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .app-tab-button[b-581lfcr39b],
    .app-tab-badge[b-581lfcr39b],
    .app-tab-icon[b-581lfcr39b] {
        transition: none;
    }

    .app-tab-panel.active[b-581lfcr39b] {
        animation: none;
    }

    .app-tabs--minimal .app-tab-button[b-581lfcr39b]::before {
        transition: none;
    }
}
/* /Components/UI/AppTextarea.razor.rz.scp.css */
/* ========================================
   AppTextarea.razor.css - Textarea component styles
   ======================================== */

.app-textarea-wrapper[b-hbynei9lpl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

.app-textarea-label[b-hbynei9lpl] {
    font-size: var(--font-size-sm, 13px);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-primary, #0F172A);
    line-height: var(--line-height-tight, 1.25);
}

.app-textarea-required[b-hbynei9lpl] {
    color: var(--color-error, #DC2626);
    margin-left: 2px;
}

.app-textarea-container[b-hbynei9lpl] {
    position: relative;
}

.app-textarea[b-hbynei9lpl] {
    width: 100%;
    min-height: 120px;
    padding: var(--space-4, 16px);
    font-family: var(--font-family-base, 'Inter', sans-serif);
    font-size: var(--font-size-base, 15px);
    font-weight: var(--font-weight-medium, 500);
    line-height: var(--line-height-normal, 1.5);
    color: var(--color-text-primary, #0F172A);
    background: var(--color-bg-secondary, #F8FAFC);
    border: 1px solid var(--color-border-primary, #E2E8F0);
    border-radius: 14px;
    transition: var(--transition-slow, 0.2s ease);
    resize: vertical;
    box-sizing: border-box;
}

.app-textarea[b-hbynei9lpl]::placeholder {
    color: var(--color-text-muted, #94A3B8);
}

.app-textarea:hover:not(:disabled)[b-hbynei9lpl] {
    border-color: var(--color-border-secondary, #CBD5E1);
}

.app-textarea:focus[b-hbynei9lpl] {
    outline: none;
    border-color: var(--color-primary, #1A7CCA);
    background: var(--color-bg-primary, #FFFFFF);
    box-shadow: var(--shadow-focus, 0 0 0 3px rgba(26, 124, 202, 0.2));
}

.app-textarea:disabled[b-hbynei9lpl] {
    background: var(--color-bg-tertiary, #F1F5F9);
    color: var(--color-text-muted, #94A3B8);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Error state */
.app-textarea.invalid[b-hbynei9lpl] {
    border-color: var(--color-error, #DC2626);
    background: var(--color-error-light, #FEF2F2);
}

.app-textarea.invalid:focus[b-hbynei9lpl] {
    box-shadow: var(--shadow-focus-error, 0 0 0 3px rgba(220, 38, 38, 0.2));
}

.app-textarea-wrapper.has-error .app-textarea-label[b-hbynei9lpl] {
    color: var(--color-error, #DC2626);
}

/* Help text */
.app-textarea-help[b-hbynei9lpl] {
    font-size: var(--font-size-sm, 13px);
    color: var(--color-text-secondary, #64748B);
    line-height: var(--line-height-normal, 1.5);
}

/* Error message */
.app-textarea-error[b-hbynei9lpl] {
    font-size: var(--font-size-sm, 13px);
    color: var(--color-error, #DC2626);
    line-height: var(--line-height-normal, 1.5);
    display: flex;
    align-items: center;
    gap: var(--space-1, 4px);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .app-textarea[b-hbynei9lpl] {
        transition: none;
    }
}
/* /Components/UI/EmptyState.razor.rz.scp.css */
/* ========================================
   EmptyState - Standardized empty state placeholder
   ======================================== */

.empty-state[b-uctk40jlyi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-12) var(--space-6);
}

.empty-state-icon[b-uctk40jlyi] {
    color: var(--color-border-secondary);
    margin-bottom: var(--space-5);
}

.empty-state-icon svg[b-uctk40jlyi] {
    width: 64px;
    height: 64px;
}

.empty-state-title[b-uctk40jlyi] {
    font-family: var(--font-family-base);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
}

.empty-state-description[b-uctk40jlyi] {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-6) 0;
    max-width: 320px;
    line-height: var(--line-height-relaxed);
}

.empty-state-action[b-uctk40jlyi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-6);
    height: var(--btn-height-md);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    box-shadow: var(--btn-primary-shadow);
    transition: var(--transition-normal);
}

.empty-state-action:hover[b-uctk40jlyi] {
    background: var(--btn-primary-bg-hover);
    box-shadow: var(--btn-primary-shadow-hover);
    transform: translateY(-1px);
}

.empty-state-action:active[b-uctk40jlyi] {
    transform: translateY(0);
}

.empty-state-action-slot[b-uctk40jlyi] {
    margin-top: var(--space-4);
}

/* Responsive */
@media (max-width: 575.98px) {
    .empty-state[b-uctk40jlyi] {
        padding: var(--space-8) var(--space-4);
    }

    .empty-state-icon svg[b-uctk40jlyi] {
        width: 48px;
        height: 48px;
    }

    .empty-state-title[b-uctk40jlyi] {
        font-size: var(--font-size-lg);
    }

    .empty-state-description[b-uctk40jlyi] {
        font-size: var(--font-size-sm);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .empty-state-action[b-uctk40jlyi] {
        transition: none;
    }

    .empty-state-action:hover[b-uctk40jlyi] {
        transform: none;
    }
}
/* /Components/UI/LoadingSpinner.razor.rz.scp.css */
/* ========================================
   LoadingSpinner - Standardized loading indicator
   ======================================== */

.loading-spinner-container[b-0rm0hq217o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.loading-spinner-container.centered[b-0rm0hq217o] {
    justify-content: center;
    padding: var(--space-8) var(--space-4);
}

.loading-spinner[b-0rm0hq217o] {
    width: 40px;
    height: 40px;
}

.loading-spinner--sm[b-0rm0hq217o] {
    width: 24px;
    height: 24px;
}

.loading-spinner--lg[b-0rm0hq217o] {
    width: 56px;
    height: 56px;
}

.spinner-svg[b-0rm0hq217o] {
    width: 100%;
    height: 100%;
    animation: spinner-rotate-b-0rm0hq217o 1.4s linear infinite;
}

.spinner-circle[b-0rm0hq217o] {
    stroke: var(--color-primary);
    stroke-linecap: round;
    animation: spinner-dash-b-0rm0hq217o 1.4s ease-in-out infinite;
}

@keyframes spinner-rotate-b-0rm0hq217o {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes spinner-dash-b-0rm0hq217o {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

.loading-text[b-0rm0hq217o] {
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

/* Overlay */
.loading-overlay[b-0rm0hq217o] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    z-index: var(--z-modal);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .spinner-svg[b-0rm0hq217o] {
        animation: none;
    }

    .spinner-circle[b-0rm0hq217o] {
        animation: none;
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
}
/* /Components/UI/PageContainer.razor.rz.scp.css */
/* ========================================
   PageContainer - Standardized page wrapper
   Provides consistent max-width, padding, and responsive gutters
   ======================================== */

.page-container[b-rusvdl2dwv] {
    width: 100%;
    /* Global gutters/padding are applied by `.app-body--content`. */
    max-width: var(--page-container-max-width, 100%);
    margin: 0;
    padding: 0;
}

/* No padding variant */
:host-context(.no-padding) .page-container[b-rusvdl2dwv],
.page-container.no-padding[b-rusvdl2dwv] {
    padding: 0;
}

/* Full width variant */
.page-container.full-width[b-rusvdl2dwv] {
    max-width: none;
}
/* /Components/UI/PageHeader.razor.rz.scp.css */
/* ========================================
   PageHeader - Standardized page header
   Provides consistent title, subtitle, and actions layout
   ======================================== */

.page-header[b-vzmj3bjcib] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    margin-bottom: var(--space-5, 20px);
    padding-top: 0;
}

.page-header-back[b-vzmj3bjcib] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    background: transparent;
    border: none;
    transition: background var(--transition-apple-fast), color var(--transition-apple-fast);
    flex-shrink: 0;
    margin-top: 2px;
}

.page-header-back:hover[b-vzmj3bjcib] {
    background: rgba(0, 0, 0, 0.04);
    color: var(--color-text-secondary);
}

.page-header-content[b-vzmj3bjcib] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex: 1;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.page-header-text[b-vzmj3bjcib] {
    flex: 1;
    min-width: 200px;
}

.page-header-title[b-vzmj3bjcib] {
    font-family: var(--font-family-base);
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.2;
    letter-spacing: var(--letter-spacing-display, -0.03em);
    color: var(--color-text-primary);
    margin: 0;
}

.page-header-subtitle[b-vzmj3bjcib] {
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm, 0.8125rem);
    font-weight: var(--font-weight-normal, 400);
    color: var(--color-text-muted, #94A3B8);
    margin: var(--spacing-2xs, 0.25rem) 0 0 0;
    line-height: var(--line-height-normal, 1.5);
    letter-spacing: var(--letter-spacing-normal, -0.01em);
}

.page-header-actions[b-vzmj3bjcib] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

/* No responsive upscaling: admin/non-admin headings should match exactly. */

/* Mobile adjustments */
@media (max-width: 575.98px) {
    .page-header-content[b-vzmj3bjcib] {
        flex-direction: column;
        align-items: stretch;
    }

    .page-header-actions[b-vzmj3bjcib] {
        width: 100%;
        justify-content: stretch;
    }

    .page-header-actions > *[b-vzmj3bjcib] {
        flex: 1;
    }
}
/* /Components/UI/PageLoader.razor.rz.scp.css */
/* ========================================
   PageLoader - Modern page-level loading
   Clean pulsing dots animation
   ======================================== */

.page-loader[b-vt98y8j4qs] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    width: 100%;
}

.page-loader--compact[b-vt98y8j4qs] {
    padding: 40px 24px;
}

.page-loader__content[b-vt98y8j4qs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.page-loader__dots[b-vt98y8j4qs] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-loader__dot[b-vt98y8j4qs] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary, #1A7CCA);
    opacity: 0.3;
    animation: pageLoaderPulse-b-vt98y8j4qs 1.4s ease-in-out infinite;
}

.page-loader__dot:nth-child(2)[b-vt98y8j4qs] {
    animation-delay: 0.2s;
}

.page-loader__dot:nth-child(3)[b-vt98y8j4qs] {
    animation-delay: 0.4s;
}

@keyframes pageLoaderPulse-b-vt98y8j4qs {
    0%, 80%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    40% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.page-loader__text[b-vt98y8j4qs] {
    font-family: var(--font-family-base, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary, #64748B);
    letter-spacing: -0.01em;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .page-loader__dot[b-vt98y8j4qs] {
        animation: none;
        opacity: 0.6;
    }

    .page-loader__dot:nth-child(2)[b-vt98y8j4qs] {
        opacity: 1;
    }
}
/* /Components/UI/ThemeToggle.razor.rz.scp.css */
.theme-toggle[b-3tqrgfkxnw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    color: var(--color-text-muted);
    transition: background var(--transition-apple-fast, 0.18s cubic-bezier(0.25, 0.1, 0.25, 1)),
                color var(--transition-apple-fast, 0.18s cubic-bezier(0.25, 0.1, 0.25, 1));
}

.theme-toggle:hover[b-3tqrgfkxnw] {
    background: rgba(0, 0, 0, 0.04);
    color: var(--color-text-secondary);
}

.theme-toggle:active[b-3tqrgfkxnw] {
    background: rgba(0, 0, 0, 0.06);
}

.theme-toggle:focus-visible[b-3tqrgfkxnw] {
    outline: 2px solid rgba(0, 0, 0, 0.15);
    outline-offset: 1px;
}

.theme-icon[b-3tqrgfkxnw] {
    width: 17px;
    height: 17px;
    transition: none;
}

.theme-toggle:hover .theme-icon[b-3tqrgfkxnw] {
    transform: none;
}