/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Fluent glass navigation layout

   HYDRATION FADE-IN: Page starts invisible, fades in when JavaScript initializes
   This prevents visual "blink" during Blazor prerender → interactive transition
   ═══════════════════════════════════════════════════════════════════════════ */
.page[b-xe9xir6ckc] {
    height: 100vh;
    width: 100vw;
    font-family: var(--bs-font-sans-serif);
    overflow: hidden;
    background: radial-gradient(ellipse 100% 100% at 10% 0%, rgba(37, 99, 235, 0.35) 0%, transparent 50%),
                radial-gradient(ellipse 80% 80% at 90% 10%, rgba(51, 65, 85, 0.25) 0%, transparent 45%),
                #0f172a;
    --sidebar-surface: linear-gradient(165deg, rgba(30, 41, 59, 0.92), rgba(51, 65, 85, 0.75));
    --sidebar-border: rgba(100, 116, 139, 0.25);
    --sidebar-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.15);
    --sidebar-hover-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(59, 130, 246, 0.1);
    /* Fade-in transition */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.page.page-ready[b-xe9xir6ckc] {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL DARK SCROLLBAR STYLES - Matches dark theme
   ═══════════════════════════════════════════════════════════════════════════ */

/* Global scrollbar styling for all elements in page */
.page *[b-xe9xir6ckc]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.page *[b-xe9xir6ckc]::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.3);
    border-radius: 3px;
}

.page *[b-xe9xir6ckc]::-webkit-scrollbar-thumb {
    background: rgba(71, 85, 105, 0.5);
    border-radius: 3px;
}

.page *[b-xe9xir6ckc]::-webkit-scrollbar-thumb:hover {
    background: rgba(96, 165, 250, 0.6);
}

/* Firefox scrollbar support */
.page *[b-xe9xir6ckc] {
    scrollbar-width: thin;
    scrollbar-color: rgba(71, 85, 105, 0.5) rgba(15, 23, 42, 0.3);
}

[b-xe9xir6ckc] .navigation-drawer {
    height: 100vh;
    color: #e2e8f0;
}

[b-xe9xir6ckc] .navigation-drawer .dxbl-drawer-panel {
    background: var(--sidebar-surface) !important;
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border-radius: 0;
    border: none !important;
    border-right: 1px solid rgba(71, 85, 105, 0.15) !important;
    box-shadow: none;
    padding: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    transition: border-color 0.25s ease;
}

[b-xe9xir6ckc] .navigation-drawer .dxbl-drawer-panel:hover {
    border-right-color: rgba(71, 85, 105, 0.25) !important;
}

[b-xe9xir6ckc] .navigation-drawer .dxbl-drawer-panel>* {
    position: relative;
    z-index: 1;
    background: transparent !important;
}

[b-xe9xir6ckc] .navigation-drawer .dxbl-drawer-header,
[b-xe9xir6ckc] .navigation-drawer .dxbl-drawer-body,
[b-xe9xir6ckc] .navigation-drawer .dxbl-drawer-footer {
    background: transparent !important;
}

/* Make DevExpress drawer separators more subtle */
[b-xe9xir6ckc] .navigation-drawer .dxbl-drawer-header {
    border-bottom: 1px solid rgba(71, 85, 105, 0.15) !important;
}

[b-xe9xir6ckc] .navigation-drawer .dxbl-drawer-footer {
    border-top: 1px solid rgba(71, 85, 105, 0.15) !important;
}

/* Remove all padding from drawer body - CRITICAL for spacing */
[b-xe9xir6ckc] .dxbl-drawer-body,
[b-xe9xir6ckc] .navigation-drawer .dxbl-drawer-body,
[b-xe9xir6ckc] .dxbl-drawer-panel>.dxbl-drawer-body {
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    border: none !important;
}

/* Custom dark scrollbar for drawer panel and body */
[b-xe9xir6ckc] .dxbl-drawer-panel::-webkit-scrollbar,
[b-xe9xir6ckc] .dxbl-drawer-body::-webkit-scrollbar,
[b-xe9xir6ckc] .navigation-drawer::-webkit-scrollbar {
    width: 4px;
}

[b-xe9xir6ckc] .dxbl-drawer-panel::-webkit-scrollbar-track,
[b-xe9xir6ckc] .dxbl-drawer-body::-webkit-scrollbar-track,
[b-xe9xir6ckc] .navigation-drawer::-webkit-scrollbar-track {
    background: transparent;
}

[b-xe9xir6ckc] .dxbl-drawer-panel::-webkit-scrollbar-thumb,
[b-xe9xir6ckc] .dxbl-drawer-body::-webkit-scrollbar-thumb,
[b-xe9xir6ckc] .navigation-drawer::-webkit-scrollbar-thumb {
    background: rgba(71, 85, 105, 0.4);
    border-radius: 99px;
}

[b-xe9xir6ckc] .dxbl-drawer-panel::-webkit-scrollbar-thumb:hover,
[b-xe9xir6ckc] .dxbl-drawer-body::-webkit-scrollbar-thumb:hover,
[b-xe9xir6ckc] .navigation-drawer::-webkit-scrollbar-thumb:hover {
    background: rgba(96, 165, 250, 0.5);
}

/* Remove any borders from drawer menu area (but not the panel itself) */
[b-xe9xir6ckc] .navigation-drawer .drawer-menu,
[b-xe9xir6ckc] .navigation-drawer .dxbl-menu,
[b-xe9xir6ckc] .navigation-drawer .dxbl-drawer-body,
[b-xe9xir6ckc] .navigation-drawer .dxbl-drawer-body * {
    border-left: none !important;
    border-right: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Drawer Header - Logo + Brand + Hamburger
   Modern style matching mockup with Montserrat font
   ═══════════════════════════════════════════════════════════════════════════ */
.drawer-header[b-xe9xir6ckc] {
    padding: 1rem;
    display: flex;
    align-items: center;
    min-height: 70px;
    transition: all 0.3s ease;
}

.drawer-header.header-expanded[b-xe9xir6ckc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Align logo icon with menu item icons below */
    padding: 1rem 1rem 1rem 1rem;
    padding-left: calc(1rem - 2px);
    width: 100%;
    box-sizing: border-box;
    gap: 0.5rem;
}

.drawer-header.header-collapsed[b-xe9xir6ckc] {
    flex-direction: column;
    justify-content: center;
    padding: 1.25rem 0.5rem;
}

/* Logo container - holds icon + brand text */
.logo-container[b-xe9xir6ckc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.logo-container-mini[b-xe9xir6ckc] {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Logo icon wrapper - blue rounded square background */
.logo-icon-wrapper[b-xe9xir6ckc] {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.25s ease;
}

.logo-icon-wrapper:hover[b-xe9xir6ckc] {
    transform: scale(1.02);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Logo icon inside wrapper */
.logo-icon-wrapper .logo-icon[b-xe9xir6ckc] {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}

/* Mini mode logo - matches menu icon size */
.logo-container-mini[b-xe9xir6ckc] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.logo-container-mini .logo-icon[b-xe9xir6ckc] {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}

/* Brand text container */
.brand-text[b-xe9xir6ckc] {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

/* BEZPIECZNA - main brand name */
.brand-name[b-xe9xir6ckc] {
    font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(248, 250, 252, 0.95);
    letter-spacing: 0.05em;
    line-height: 1.3;
}

/* STACJA - tagline (same size, uppercase) */
.brand-tagline[b-xe9xir6ckc] {
    font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.85);
    letter-spacing: 0.05em;
    line-height: 1.3;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Hamburger Button - Modern SVG style
   ═══════════════════════════════════════════════════════════════════════════ */
.hamburger-button[b-xe9xir6ckc] {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: rgba(148, 163, 184, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.hamburger-button:hover[b-xe9xir6ckc] {
    color: rgba(248, 250, 252, 0.95);
    background: rgba(255, 255, 255, 0.08);
}

.hamburger-button:active[b-xe9xir6ckc] {
    transform: scale(0.95);
}

.hamburger-icon[b-xe9xir6ckc] {
    width: 22px;
    height: 22px;
}

/* Mini mode hamburger button - centered below logo */
.hamburger-button-mini[b-xe9xir6ckc] {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: rgba(148, 163, 184, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    margin-top: 0.75rem;
}

.hamburger-button-mini:hover[b-xe9xir6ckc] {
    color: rgba(248, 250, 252, 0.95);
    background: rgba(255, 255, 255, 0.12);
}

.hamburger-button-mini:active[b-xe9xir6ckc] {
    transform: scale(0.95);
}

.hamburger-button-mini .hamburger-icon[b-xe9xir6ckc] {
    width: 18px;
    height: 18px;
}

/* Old styles - kept for backwards compatibility */
.logo-full[b-xe9xir6ckc] {
    display: none;
}

.logo-mini[b-xe9xir6ckc] {
    display: none;
}

.drawer-menu[b-xe9xir6ckc] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden !important;
    padding: 0.5rem 0 0.5rem 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
}

.drawer-menu[b-xe9xir6ckc]::-webkit-scrollbar {
    width: 4px;
}

.drawer-menu[b-xe9xir6ckc]::-webkit-scrollbar-track {
    background: transparent;
}

.drawer-menu[b-xe9xir6ckc]::-webkit-scrollbar-thumb {
    background: rgba(71, 85, 105, 0.3);
    border-radius: 99px;
    transition: background 0.25s ease;
}

.drawer-menu[b-xe9xir6ckc]::-webkit-scrollbar-thumb:hover {
    background: rgba(96, 165, 250, 0.5);
}

[b-xe9xir6ckc] .drawer-menu .dxbl-menu {
    background-color: transparent;
    width: 100%;
    overflow-x: hidden !important;
}

/* Ensure submenu items are compact and don't overflow */
[b-xe9xir6ckc] .drawer-menu .dxbl-menu-item-link {
    padding: 0.5rem 0.75rem !important;
    max-width: 100%;
    box-sizing: border-box;
}

[b-xe9xir6ckc] .drawer-menu .dxbl-menu-submenu .dxbl-menu-item-link {
    padding: 0.45rem 0.75rem 0.45rem 1.5rem !important;
}

/* Prevent text overflow in menu items */
[b-xe9xir6ckc] .drawer-menu .dxbl-menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* DevExpress drawer footer wrapper */
[b-xe9xir6ckc] .dxbl-drawer-footer {
    width: 100% !important;
    padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Drawer Footer - Wrapper
   Single root element inside DxDrawer FooterTemplate to avoid layout issues
   with DevExpress's internal flex styling on dxbl-drawer-footer
   ═══════════════════════════════════════════════════════════════════════════ */
.drawer-footer-wrapper[b-xe9xir6ckc] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Drawer Footer - Documentation Link
   Sits above user profile with a subtle separator
   ═══════════════════════════════════════════════════════════════════════════ */
.drawer-footer-documentation[b-xe9xir6ckc] {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(71, 85, 105, 0.15);
}

.documentation-link[b-xe9xir6ckc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.5rem;
    border-radius: 8px;
    color: rgba(148, 163, 184, 0.85);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.documentation-link:hover[b-xe9xir6ckc] {
    color: rgba(248, 250, 252, 0.95);
    background: rgba(255, 255, 255, 0.06);
}

.documentation-link .oi[b-xe9xir6ckc] {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.documentation-link-mini[b-xe9xir6ckc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    border-radius: 8px;
    color: rgba(148, 163, 184, 0.85);
    text-decoration: none;
    transition: all 0.2s ease;
}

.documentation-link-mini:hover[b-xe9xir6ckc] {
    color: rgba(248, 250, 252, 0.95);
    background: rgba(255, 255, 255, 0.08);
}

.documentation-link-mini .oi[b-xe9xir6ckc] {
    font-size: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Drawer Footer - User Profile (Flat style matching mockup)
   ═══════════════════════════════════════════════════════════════════════════ */
.drawer-footer[b-xe9xir6ckc] {
    padding: 0.75rem 0.75rem 1rem 0.75rem;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Avatar with gradient and initials */
.user-avatar[b-xe9xir6ckc] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    color: white;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.25s ease;
}

/* User info text container */
.user-info[b-xe9xir6ckc] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.user-name[b-xe9xir6ckc] {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(248, 250, 252, 0.95);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role[b-xe9xir6ckc] {
    font-size: 0.75rem;
    font-weight: 400;
    color: rgba(148, 163, 184, 0.75);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Logout icon button (cog icon) */
.logout-icon-button[b-xe9xir6ckc] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: rgba(148, 163, 184, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.logout-icon-button:hover[b-xe9xir6ckc] {
    color: rgba(248, 250, 252, 0.95);
    background: rgba(255, 255, 255, 0.08);
}

.logout-icon-button .oi[b-xe9xir6ckc] {
    font-size: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   User Profile - Mini Mode (Collapsed Drawer)
   Avatar only, centered
   ═══════════════════════════════════════════════════════════════════════════ */
.user-avatar-mini[b-xe9xir6ckc] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    color: white;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Logout Confirmation Popup
   ═══════════════════════════════════════════════════════════════════════════ */
.logout-overlay[b-xe9xir6ckc] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn-b-xe9xir6ckc 0.2s ease;
}

.logout-popup[b-xe9xir6ckc] {
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.95), rgba(51, 65, 85, 0.9));
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 20px;
    padding: 2rem;
    max-width: 360px;
    width: 90%;
    text-align: center;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4),
                0 12px 24px rgba(0, 0, 0, 0.2);
    animation: popupSlideIn-b-xe9xir6ckc 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.logout-popup-icon[b-xe9xir6ckc] {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
}

.logout-popup-icon .oi[b-xe9xir6ckc] {
    font-size: 1.5rem;
    color: #ef4444;
}

.logout-popup-title[b-xe9xir6ckc] {
    font-size: 1.25rem;
    font-weight: 600;
    color: rgba(248, 250, 252, 0.95);
    margin: 0 0 0.5rem;
}

.logout-popup-message[b-xe9xir6ckc] {
    font-size: 0.9rem;
    color: rgba(148, 163, 184, 0.85);
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

.logout-popup-actions[b-xe9xir6ckc] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.logout-btn[b-xe9xir6ckc] {
    padding: 0.65rem 1.5rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.logout-btn-cancel[b-xe9xir6ckc] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.logout-btn-cancel:hover[b-xe9xir6ckc] {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(148, 163, 184, 0.3);
}

.logout-btn-confirm[b-xe9xir6ckc] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.logout-btn-confirm:hover[b-xe9xir6ckc] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

@keyframes fadeIn-b-xe9xir6ckc {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes popupSlideIn-b-xe9xir6ckc {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UNIFIED LAYOUT STRUCTURE
   Desktop: Drawer (fixed left) + Main Content (with left margin)
   Mobile: Main Content only (full width)

   CRITICAL: @Body is always rendered in the same DOM position to prevent
   component destruction/recreation on window resize (which causes data reload)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Desktop drawer wrapper - positioned fixed on the left */
.desktop-drawer-wrapper[b-xe9xir6ckc] {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 100;
}

.desktop-drawer-wrapper.hidden[b-xe9xir6ckc] {
    display: none;
}

/* Placeholder inside drawer - drawer needs TargetContent but we render content separately */
.drawer-content-placeholder[b-xe9xir6ckc] {
    display: none;
}

.main-content[b-xe9xir6ckc] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: transparent;
    transition: margin-left 0.3s ease;
}

/* Desktop mode - offset content for drawer */
.main-content.desktop[b-xe9xir6ckc] {
    margin-left: 70px; /* Mini mode width */
}

.main-content.desktop.drawer-expanded[b-xe9xir6ckc] {
    margin-left: 260px; /* Full drawer width */
}

.main-content.desktop.drawer-collapsed[b-xe9xir6ckc] {
    margin-left: 70px; /* Mini mode width */
}

/* Mobile mode - full width, no offset */
.main-content.mobile[b-xe9xir6ckc] {
    margin-left: 0;
}

.content-header[b-xe9xir6ckc] {
    flex-shrink: 0;
    /* Match content-body px-4 padding (1.5rem = 24px) for consistent alignment */
    padding: 1.2rem 1.5rem 0.6rem;
}

.content-body[b-xe9xir6ckc] {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 2rem;
}

/* Custom dark scrollbar for content body */
.content-body[b-xe9xir6ckc]::-webkit-scrollbar {
    width: 8px;
}

.content-body[b-xe9xir6ckc]::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.4);
    border-radius: 4px;
}

.content-body[b-xe9xir6ckc]::-webkit-scrollbar-thumb {
    background: rgba(71, 85, 105, 0.5);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.content-body[b-xe9xir6ckc]::-webkit-scrollbar-thumb:hover {
    background: rgba(96, 165, 250, 0.5);
    border: 2px solid transparent;
    background-clip: padding-box;
}

[b-xe9xir6ckc] .icon-back {
    -webkit-mask-image: url("images/back.svg");
    mask-image: url("images/back.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 1rem;
    height: 1rem;
    background-repeat: no-repeat;
    background-color: var(--dxbl-btn-color);
}

[b-xe9xir6ckc] .back-button:hover .icon-back {
    background-color: var(--dxbl-btn-hover-color);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MINI MODE - Collapsed drawer styling
   Icon-only menu with centered alignment
   Uses correct DevExpress selectors: <a> and <button> direct children
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide text in mini mode - target both regular text and custom text AND container */
[b-xe9xir6ckc] .drawer-mini .dxbl-menu-item-text,
[b-xe9xir6ckc] .drawer-mini .dxbl-menu-item-text-container,
[b-xe9xir6ckc] .drawer-mini .dxbl-text {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
}

/* Mini mode drawer panel */
[b-xe9xir6ckc] .drawer-mini .dxbl-drawer-panel {
    padding: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Mini mode menu container */
[b-xe9xir6ckc] .drawer-mini .drawer-menu {
    text-align: center !important;
    padding: 0.5rem 0.3rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    justify-content: flex-start !important;
}

/* Mini mode menu item link/button - centered icon container
   Target BOTH <a> and <button> which are direct children of .dxbl-menu-item */
[b-xe9xir6ckc] .drawer-mini .dxbl-menu-item > a,
[b-xe9xir6ckc] .drawer-mini .dxbl-menu-item > button {
    justify-content: center !important;
    /* Balanced padding - icon is 36px, add small padding around */
    padding: 0.35rem !important;
    margin: 0.1rem auto !important;
    width: 50px !important;
    max-width: 50px !important;
    min-height: 44px !important;
    height: auto !important;
    border-radius: 0 !important;
    transition: background 0.12s ease !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    flex-direction: column !important;
    border: none !important;
    box-shadow: none !important;
}

/* Mini mode icon - Target BOTH .dxbl-menu-item-icon (Type 1) AND .dxbl-image (Type 2, 3) */
[b-xe9xir6ckc] .drawer-mini .dxbl-menu-item > a .dxbl-menu-item-icon,
[b-xe9xir6ckc] .drawer-mini .dxbl-menu-item > button .dxbl-menu-item-icon,
[b-xe9xir6ckc] .drawer-mini .dxbl-menu-item > a .dxbl-image,
[b-xe9xir6ckc] .drawer-mini .dxbl-menu-item > button .dxbl-image {
    margin: 0 auto !important;
    font-size: 0.95rem !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(59, 130, 246, 0.12) !important;
    border-radius: 8px !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: background 0.12s ease, color 0.12s ease !important;
    color: rgba(147, 197, 253, 0.9) !important;
    filter: none !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

/* Mini mode hover - subtle highlight */
[b-xe9xir6ckc] .drawer-mini .dxbl-menu-item > a:hover,
[b-xe9xir6ckc] .drawer-mini .dxbl-menu-item > button:hover {
    background: rgba(59, 130, 246, 0.08) !important;
    transform: none !important;
}

[b-xe9xir6ckc] .drawer-mini .dxbl-menu-item > a:hover .dxbl-menu-item-icon,
[b-xe9xir6ckc] .drawer-mini .dxbl-menu-item > button:hover .dxbl-menu-item-icon,
[b-xe9xir6ckc] .drawer-mini .dxbl-menu-item > a:hover .dxbl-image,
[b-xe9xir6ckc] .drawer-mini .dxbl-menu-item > button:hover .dxbl-image {
    transform: none !important;
    background: rgba(59, 130, 246, 0.18) !important;
    box-shadow: none !important;
    color: rgba(191, 219, 254, 1) !important;
    filter: none !important;
}

/* Mini mode active state - subtle glow, solid blue icon (no left border in mini) */
[b-xe9xir6ckc] .drawer-mini .dxbl-menu-item.dxbl-active > a,
[b-xe9xir6ckc] .drawer-mini .dxbl-menu-item.dxbl-active > button {
    background: rgba(59, 130, 246, 0.1) !important;
    border-left: none !important;
    padding-left: 0.5rem !important;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.15) !important;
}

[b-xe9xir6ckc] .drawer-mini .dxbl-menu-item.dxbl-active > a .dxbl-menu-item-icon,
[b-xe9xir6ckc] .drawer-mini .dxbl-menu-item.dxbl-active > button .dxbl-menu-item-icon,
[b-xe9xir6ckc] .drawer-mini .dxbl-menu-item.dxbl-active > a .dxbl-image:not(.dxbl-menu-dropdown-toggle),
[b-xe9xir6ckc] .drawer-mini .dxbl-menu-item.dxbl-active > button .dxbl-image:not(.dxbl-menu-dropdown-toggle) {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%) !important;
    border: 1px solid rgba(96, 165, 250, 0.4) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4),
                0 0 16px rgba(59, 130, 246, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    filter: none !important;
    transform: none !important;
}

/* Notification badge positioning in mini mode */
[b-xe9xir6ckc] .drawer-mini .authorize-label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hide authorize text in mini mode, keep only icon */
[b-xe9xir6ckc] .drawer-mini .authorize-text {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
}

/* Mini mode badge - smaller, positioned top-right */
[b-xe9xir6ckc] .drawer-mini .authorize-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.3rem;
    font-size: 0.65rem;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4),
                0 0 0 2px rgba(15, 23, 42, 0.6);
}

/* Mini mode header padding */
[b-xe9xir6ckc] .drawer-mini .drawer-header {
    padding: 1.25rem 0.5rem;
}

/* Mini mode footer padding */
[b-xe9xir6ckc] .drawer-mini .drawer-footer {
    padding: 1rem 0.5rem 1.5rem;
}

/* Mini mode documentation footer */
[b-xe9xir6ckc] .drawer-mini .drawer-footer-documentation {
    padding: 0.5rem 0.3rem;
    display: flex;
    justify-content: center;
}

/* Hide dropdown toggle/chevron in mini mode */
[b-xe9xir6ckc] .drawer-mini .dxbl-menu-dropdown-toggle {
    display: none !important;
}

/* Hide group separators in mini mode (would look odd with centered icons) */
[b-xe9xir6ckc] .drawer-mini .dxbl-menu-item.menu-group-start::before {
    display: none !important;
}

[b-xe9xir6ckc] .drawer-mini .dxbl-menu-item.menu-group-start {
    margin-top: 0.25rem !important;
}

/* Ensure menu list is centered in mini mode */
[b-xe9xir6ckc] .drawer-mini .dxbl-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Ensure all menu items get proper width in mini mode */
[b-xe9xir6ckc] .drawer-mini .dxbl-menu-item {
    width: 50px !important;
    max-width: 50px !important;
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto !important;
}

/* Logo entrance animation */
.logo-full[b-xe9xir6ckc] {
    animation: logoFadeIn-b-xe9xir6ckc 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes logoFadeIn-b-xe9xir6ckc {
    from {
        opacity: 0;
        transform: translateY(-15px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Smooth drawer panel entrance - subtle fade only */
[b-xe9xir6ckc] .navigation-drawer .dxbl-drawer-panel {
    animation: drawerFadeIn-b-xe9xir6ckc 0.3s ease;
}

@keyframes drawerFadeIn-b-xe9xir6ckc {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    [b-xe9xir6ckc] .navigation-drawer .dxbl-drawer-panel {
        max-width: 85vw;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .content-header[b-xe9xir6ckc] {
        /* Match Bootstrap px-3 on mobile (1rem = 16px) for consistent alignment */
        padding: 1rem 1rem 0.5rem;
    }

    /* Reduce horizontal padding on content body for more grid space */
    .content-body.px-4[b-xe9xir6ckc] {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .drawer-menu[b-xe9xir6ckc] {
        padding-bottom: 2.5rem;
    }

    /* Compact footer for mobile */
    .drawer-footer[b-xe9xir6ckc] {
        padding: 0.5rem 0.4rem 0.6rem 0.4rem !important;
        gap: 0.5rem !important;
    }

    .user-avatar[b-xe9xir6ckc] {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        font-size: 0.8rem !important;
    }

    .user-name[b-xe9xir6ckc] {
        font-size: 0.8rem !important;
    }

    .user-role[b-xe9xir6ckc] {
        font-size: 0.7rem !important;
    }
}

/* Extra-small screens - minimal horizontal padding for maximum grid space */
@media (max-width: 575.98px) {
    .content-body.px-4[b-xe9xir6ckc] {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .content-header[b-xe9xir6ckc] {
        padding: 0.75rem 0.5rem 0.5rem;
    }
}
/* /Components/Pages/Administrator/AdministratorClientDetails.razor.rz.scp.css */
/* Color preview swatch for branding colors */
.color-preview[b-g4ymtnuyt9] {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* /Components/Pages/Administrator/AdministratorDataQualityReview.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════
   AdministratorDataQualityReview - Glassmorphic data quality review page
   Matches Import Review design patterns (dq- prefix)
   ═══════════════════════════════════════════════════════════════════════════════ */

.dq-page[b-57lz3hf15g] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 1rem 2rem;
    color: #e2e8f0;
    outline: none;
}

/* ═══════════════════════════════════════════════════════════════
   CATEGORY TABS
   ═══════════════════════════════════════════════════════════════ */
.dq-tabs[b-57lz3hf15g] {
    display: flex;
    gap: 0.35rem;
    padding: 0.25rem;
    background: rgba(15, 23, 42, 0.3);
    border: 1px solid rgba(100, 116, 139, 0.15);
    border-radius: 12px;
    flex-wrap: wrap;
}

.dq-tab[b-57lz3hf15g] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(148, 163, 184, 0.7);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.dq-tab:hover[b-57lz3hf15g] {
    background: rgba(71, 85, 105, 0.25);
    color: #cbd5e1;
}

.dq-tab-active[b-57lz3hf15g] {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(96, 165, 250, 0.25);
    color: #93c5fd;
}

.dq-tab .oi[b-57lz3hf15g] {
    font-size: 0.75rem;
    opacity: 0.65;
}

.dq-tab-active .oi[b-57lz3hf15g] {
    opacity: 1;
}

.dq-tab-badge[b-57lz3hf15g] {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(248, 113, 113, 0.3);
    color: #f87171;
    min-width: 18px;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   MASTER-DETAIL SPLIT LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.dq-master-detail[b-57lz3hf15g] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    min-height: 0;
}

.dq-master-pane[b-57lz3hf15g] {
    flex: 1 1 42%;
    min-width: 0;
}

.dq-detail-pane[b-57lz3hf15g] {
    flex: 1.4 1 58%;
    min-width: 0;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.35) transparent;
}

.dq-detail-pane[b-57lz3hf15g]::-webkit-scrollbar {
    width: 6px;
}

.dq-detail-pane[b-57lz3hf15g]::-webkit-scrollbar-track {
    background: transparent;
}

.dq-detail-pane[b-57lz3hf15g]::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.3);
    border-radius: 3px;
}

.dq-detail-pane[b-57lz3hf15g]::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.5);
}

/* ═══════════════════════════════════════════════════════════════
   GRID CONTAINER
   ═══════════════════════════════════════════════════════════════ */
.dq-grid-container[b-57lz3hf15g] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(51, 65, 85, 0.4));
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Grid theming */
[b-57lz3hf15g] .dq-grid {
    font-size: 0.8rem;
}

[b-57lz3hf15g] .dq-grid .dxbl-grid-table tbody tr {
    cursor: pointer;
}

[b-57lz3hf15g] .dq-grid .dxbl-grid-table tbody tr.dxbl-grid-focused-row > td,
[b-57lz3hf15g] .dq-grid .dxbl-grid-table tbody tr.dxbl-grid-selected-row > td {
    background: rgba(96, 165, 250, 0.12) !important;
    border-bottom-color: rgba(96, 165, 250, 0.2) !important;
}

[b-57lz3hf15g] .dq-grid .dxbl-grid-table tbody tr.dxbl-grid-focused-row > td:first-child,
[b-57lz3hf15g] .dq-grid .dxbl-grid-table tbody tr.dxbl-grid-selected-row > td:first-child {
    box-shadow: inset 3px 0 0 #60a5fa;
}

/* ═══════════════════════════════════════════════════════════════
   NEGATIVE SALDO DISPLAY
   ═══════════════════════════════════════════════════════════════ */
.dq-saldo-negative[b-57lz3hf15g] {
    color: #f87171;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════ */
.dq-empty-state[b-57lz3hf15g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 2rem;
    text-align: center;
}

.dq-empty-icon[b-57lz3hf15g] {
    font-size: 2.5rem;
    color: #4ade80;
    opacity: 0.5;
}

.dq-empty-title[b-57lz3hf15g] {
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.9);
}

.dq-empty-message[b-57lz3hf15g] {
    font-size: 0.8rem;
    color: rgba(148, 163, 184, 0.6);
    max-width: 320px;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   DETAIL PANEL
   ═══════════════════════════════════════════════════════════════ */
.dq-detail-placeholder[b-57lz3hf15g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 4rem 2rem;
    color: rgba(148, 163, 184, 0.4);
    font-size: 0.85rem;
    text-align: center;
}

.dq-detail-placeholder .oi[b-57lz3hf15g] {
    font-size: 1.5rem;
    opacity: 0.4;
}

.dq-detail-panel[b-57lz3hf15g] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(51, 65, 85, 0.7));
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 14px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
    animation: dq-panel-slideIn-b-57lz3hf15g 0.3s ease;
}

@keyframes dq-panel-slideIn-b-57lz3hf15g {
    from {
        opacity: 0;
        transform: translateX(12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.dq-detail-header[b-57lz3hf15g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.15);
    background: rgba(15, 23, 42, 0.3);
    font-size: 0.9rem;
    font-weight: 700;
    color: #f1f5f9;
}

.dq-detail-header .oi[b-57lz3hf15g] {
    color: rgba(148, 163, 184, 0.6);
}

.dq-detail-header-amount[b-57lz3hf15g] {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.7);
    margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════════
   SALDO SUMMARY BAR
   ═══════════════════════════════════════════════════════════════ */
.dq-saldo-bar[b-57lz3hf15g] {
    display: flex;
    gap: 1rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.1);
    background: rgba(15, 23, 42, 0.15);
    flex-wrap: wrap;
}

.dq-saldo-item[b-57lz3hf15g] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.dq-saldo-label[b-57lz3hf15g] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(148, 163, 184, 0.5);
}

.dq-saldo-value[b-57lz3hf15g] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #e2e8f0;
}

/* ═══════════════════════════════════════════════════════════════
   TRANSACTION LIST (detail pane)
   ═══════════════════════════════════════════════════════════════ */
.dq-tx-list[b-57lz3hf15g] {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dq-tx-row[b-57lz3hf15g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.3);
    border: 1px solid rgba(100, 116, 139, 0.1);
    transition: all 0.15s ease;
}

.dq-tx-row:hover[b-57lz3hf15g] {
    background: rgba(15, 23, 42, 0.5);
    border-color: rgba(100, 116, 139, 0.2);
}

.dq-tx-marked-delete[b-57lz3hf15g] {
    opacity: 0.5;
    background: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.15);
}

.dq-tx-main[b-57lz3hf15g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
    flex: 1;
}

.dq-tx-id[b-57lz3hf15g] {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.6);
    font-family: 'Montserrat', monospace;
}

.dq-tx-id-link[b-57lz3hf15g] {
    text-decoration: none;
    color: rgba(148, 163, 184, 0.6);
    transition: color 0.15s ease;
}

.dq-tx-id-link:hover[b-57lz3hf15g] {
    color: #93c5fd;
    text-decoration: underline;
}

.dq-tx-amount[b-57lz3hf15g] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #f1f5f9;
    white-space: nowrap;
}

.dq-amount-payment[b-57lz3hf15g] {
    color: #f87171;
}

.dq-tx-date[b-57lz3hf15g] {
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.65);
    white-space: nowrap;
}

/* Period (month) cell in the high-alarm breakdown — clearer + never clipped */
.dq-period[b-57lz3hf15g] {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(203, 213, 225, 0.92);
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.dq-tx-location[b-57lz3hf15g] {
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.dq-tx-actions[b-57lz3hf15g] {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   TYPE BADGES
   ═══════════════════════════════════════════════════════════════ */
.dq-type-badge[b-57lz3hf15g] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.45rem;
    border-radius: 5px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.dq-type-driveoff[b-57lz3hf15g] {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

.dq-type-payment[b-57lz3hf15g] {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(96, 165, 250, 0.3);
    color: #60a5fa;
}

/* ═══════════════════════════════════════════════════════════════
   STATUS BADGES
   ═══════════════════════════════════════════════════════════════ */
.dq-status-badge[b-57lz3hf15g] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.4rem;
    border-radius: 5px;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.dq-status-unauthorized[b-57lz3hf15g] {
    background: rgba(100, 116, 139, 0.15);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: #94a3b8;
}

.dq-status-global[b-57lz3hf15g] {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.3);
    color: #4ade80;
}

.dq-status-local[b-57lz3hf15g] {
    background: rgba(6, 182, 212, 0.15);
    border: 1px solid rgba(34, 211, 238, 0.3);
    color: #22d3ee;
}

/* ═══════════════════════════════════════════════════════════════
   "OLDEST" BADGE (duplicate detail)
   ═══════════════════════════════════════════════════════════════ */
.dq-oldest-badge[b-57lz3hf15g] {
    font-size: 0.55rem;
    font-weight: 600;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(192, 132, 252, 0.3);
    color: #c084fc;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════════════════
   ACTION BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.dq-action-btn[b-57lz3hf15g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: 30px;
    padding: 0 0.6rem;
    border-radius: 7px;
    border: none;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.dq-action-btn:disabled[b-57lz3hf15g] {
    opacity: 0.5;
    cursor: not-allowed;
}

.dq-action-btn .oi[b-57lz3hf15g] {
    font-size: 0.65rem;
}

.dq-btn-delete[b-57lz3hf15g] {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(248, 113, 113, 0.3);
    color: #f87171;
}

.dq-btn-delete:hover:not(:disabled)[b-57lz3hf15g] {
    background: rgba(239, 68, 68, 0.25);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

.dq-btn-adjust[b-57lz3hf15g] {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

.dq-btn-adjust:hover:not(:disabled)[b-57lz3hf15g] {
    background: rgba(245, 158, 11, 0.25);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.dq-btn-adjust-confirm[b-57lz3hf15g] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.dq-btn-adjust-confirm:hover:not(:disabled)[b-57lz3hf15g] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
}

.dq-btn-cancel[b-57lz3hf15g] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.dq-btn-cancel:hover[b-57lz3hf15g] {
    background: rgba(255, 255, 255, 0.12);
}

.dq-btn-bulk-delete[b-57lz3hf15g] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    height: 36px;
    padding: 0 1rem;
    font-size: 0.8rem;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.dq-btn-bulk-delete:hover:not(:disabled)[b-57lz3hf15g] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

.dq-bulk-action[b-57lz3hf15g] {
    display: flex;
    justify-content: flex-end;
    padding: 0.6rem 0.75rem;
    border-top: 1px solid rgba(100, 116, 139, 0.1);
}

/* ═══════════════════════════════════════════════════════════════
   EXPANDABLE DETAIL CARD
   ═══════════════════════════════════════════════════════════════ */
.dq-tx-wrapper[b-57lz3hf15g] {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.3);
    border: 1px solid rgba(100, 116, 139, 0.1);
    transition: all 0.15s ease;
}

.dq-tx-wrapper:hover[b-57lz3hf15g] {
    background: rgba(15, 23, 42, 0.5);
    border-color: rgba(100, 116, 139, 0.2);
}

.dq-tx-wrapper.dq-tx-marked-delete[b-57lz3hf15g] {
    opacity: 0.5;
    background: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.15);
}

.dq-tx-wrapper > .dq-tx-row[b-57lz3hf15g] {
    background: transparent;
    border: none;
    border-radius: 0;
}

.dq-tx-wrapper > .dq-tx-row:hover[b-57lz3hf15g] {
    background: transparent;
    border-color: transparent;
}

.dq-tx-expand-btn[b-57lz3hf15g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid rgba(100, 116, 139, 0.2);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: rgba(148, 163, 184, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.dq-tx-expand-btn:hover[b-57lz3hf15g] {
    background: rgba(96, 165, 250, 0.1);
    border-color: rgba(96, 165, 250, 0.3);
    color: #93c5fd;
}

.dq-tx-expand-btn .oi[b-57lz3hf15g] {
    font-size: 0.55rem;
}

.dq-tx-detail-card[b-57lz3hf15g] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 1rem;
    padding: 0.5rem 0.65rem 0.55rem;
    border-top: 1px solid rgba(100, 116, 139, 0.1);
    background: rgba(15, 23, 42, 0.2);
    border-radius: 0 0 8px 8px;
    animation: dq-detailSlideDown-b-57lz3hf15g 0.2s ease;
}

@keyframes dq-detailSlideDown-b-57lz3hf15g {
    from {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    to {
        opacity: 1;
        max-height: 300px;
        padding-top: 0.5rem;
        padding-bottom: 0.55rem;
    }
}

.dq-tx-detail-row[b-57lz3hf15g] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.dq-tx-detail-row:first-child[b-57lz3hf15g] {
    grid-column: 1 / -1;
}

.dq-tx-detail-label[b-57lz3hf15g] {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(148, 163, 184, 0.45);
}

.dq-tx-detail-value[b-57lz3hf15g] {
    font-size: 0.75rem;
    color: rgba(226, 232, 240, 0.85);
    overflow: hidden;
    text-overflow: ellipsis;
}

.dq-tx-comment[b-57lz3hf15g] {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.8rem;
    line-height: 1.4;
    color: rgba(226, 232, 240, 0.95);
}

/* ═══════════════════════════════════════════════════════════════
   KEEP / DELETE TOGGLE
   ═══════════════════════════════════════════════════════════════ */
.dq-toggle-btn[b-57lz3hf15g] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 28px;
    padding: 0 0.65rem;
    border-radius: 7px;
    border: 1px solid transparent;
    font-size: 0.65rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dq-toggle-keep[b-57lz3hf15g] {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(74, 222, 128, 0.3);
    color: #4ade80;
}

.dq-toggle-keep:hover[b-57lz3hf15g] {
    background: rgba(34, 197, 94, 0.25);
}

.dq-toggle-delete[b-57lz3hf15g] {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(248, 113, 113, 0.25);
    color: #f87171;
}

.dq-toggle-delete:hover[b-57lz3hf15g] {
    background: rgba(239, 68, 68, 0.2);
}

/* ═══════════════════════════════════════════════════════════════
   CONFIRMATION OVERLAY
   ═══════════════════════════════════════════════════════════════ */
.dq-confirm-overlay[b-57lz3hf15g] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: dq-fadeIn-b-57lz3hf15g 0.2s ease;
}

@keyframes dq-fadeIn-b-57lz3hf15g {
    from { opacity: 0; }
    to { opacity: 1; }
}

.dq-confirm-popup[b-57lz3hf15g] {
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.95), rgba(51, 65, 85, 0.9));
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 20px;
    padding: 1.75rem 2rem;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), 0 12px 24px rgba(0, 0, 0, 0.2);
    animation: dq-confirmSlideIn-b-57lz3hf15g 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes dq-confirmSlideIn-b-57lz3hf15g {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.dq-confirm-icon[b-57lz3hf15g] {
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dq-confirm-icon .oi[b-57lz3hf15g] {
    font-size: 1.3rem;
}

.dq-confirm-icon-delete[b-57lz3hf15g] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.15));
}

.dq-confirm-icon-delete .oi[b-57lz3hf15g] {
    color: #ef4444;
}

.dq-confirm-icon-adjust[b-57lz3hf15g] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.15));
}

.dq-confirm-icon-adjust .oi[b-57lz3hf15g] {
    color: #f59e0b;
}

.dq-confirm-title[b-57lz3hf15g] {
    font-size: 1.15rem;
    font-weight: 600;
    color: rgba(248, 250, 252, 0.95);
    margin: 0 0 0.75rem;
}

.dq-confirm-details[b-57lz3hf15g] {
    font-size: 0.8rem;
    color: rgba(148, 163, 184, 0.75);
    margin: 0 0 1rem;
    line-height: 1.4;
    text-align: left;
    padding: 0.6rem 0.75rem;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(100, 116, 139, 0.15);
    border-radius: 10px;
}

.dq-confirm-reason[b-57lz3hf15g] {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.5);
    color: #e2e8f0;
    font-family: inherit;
    font-size: 0.8rem;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
}

.dq-confirm-reason:focus[b-57lz3hf15g] {
    border-color: rgba(96, 165, 250, 0.5);
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.1);
}

.dq-confirm-amount-row[b-57lz3hf15g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.4rem 0.5rem;
    background: rgba(15, 23, 42, 0.3);
    border-radius: 8px;
}

.dq-confirm-amount-label[b-57lz3hf15g] {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.6);
    white-space: nowrap;
}

.dq-confirm-amount-input[b-57lz3hf15g] {
    flex: 1;
    padding: 0.35rem 0.5rem;
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.5);
    color: #f59e0b;
    font-size: 0.85rem;
    font-weight: 600;
    outline: none;
    transition: border-color 0.2s;
}

.dq-confirm-amount-input:focus[b-57lz3hf15g] {
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.1);
}

.dq-confirm-buttons[b-57lz3hf15g] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════
   SPINNER
   ═══════════════════════════════════════════════════════════════ */
.dq-spinner[b-57lz3hf15g] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: dq-spin-b-57lz3hf15g 1s linear infinite;
}

@keyframes dq-spin-b-57lz3hf15g {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════
   PLATE VARIANTS
   ═══════════════════════════════════════════════════════════════ */
.dq-merge-target-bar[b-57lz3hf15g] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.15);
    background: rgba(15, 23, 42, 0.2);
    flex-wrap: wrap;
}

.dq-merge-target-bar select[b-57lz3hf15g] {
    flex: 1;
    min-width: 160px;
    padding: 0.4rem 0.5rem;
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: 7px;
    background: rgba(15, 23, 42, 0.5);
    color: #e2e8f0;
    font-size: 0.8rem;
    font-family: 'Montserrat', monospace;
    outline: none;
    transition: border-color 0.2s;
}

.dq-merge-target-bar select:focus[b-57lz3hf15g] {
    border-color: rgba(74, 222, 128, 0.5);
    box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.1);
}

.dq-merge-target-bar select option[b-57lz3hf15g] {
    background: #1e293b;
    color: #e2e8f0;
}

.dq-merge-target-label[b-57lz3hf15g] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(148, 163, 184, 0.6);
    white-space: nowrap;
}

.dq-btn-merge[b-57lz3hf15g] {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.3);
    color: #4ade80;
}

.dq-btn-merge:hover:not(:disabled)[b-57lz3hf15g] {
    background: rgba(34, 197, 94, 0.25);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
}

.dq-btn-merge-confirm[b-57lz3hf15g] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.dq-btn-merge-confirm:hover:not(:disabled)[b-57lz3hf15g] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4);
}

.dq-confirm-icon-merge[b-57lz3hf15g] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.15));
}

.dq-confirm-icon-merge .oi[b-57lz3hf15g] {
    color: #22c55e;
}

.dq-confirm-icon-correct[b-57lz3hf15g] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.15));
}

.dq-confirm-icon-correct .oi[b-57lz3hf15g] {
    color: #3b82f6;
}

.dq-variant-section[b-57lz3hf15g] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.4), rgba(30, 41, 59, 0.3));
    border: 1px solid rgba(100, 116, 139, 0.15);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.dq-variant-target[b-57lz3hf15g] {
    border-left: 3px solid #4ade80;
}

.dq-variant-header[b-57lz3hf15g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.1);
    flex-wrap: wrap;
}

.dq-variant-stats[b-57lz3hf15g] {
    display: flex;
    gap: 0.75rem;
    margin-left: auto;
    flex-wrap: wrap;
}

.dq-variant-stat[b-57lz3hf15g] {
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.7);
    white-space: nowrap;
}

.dq-variant-stat strong[b-57lz3hf15g] {
    color: #e2e8f0;
    font-weight: 600;
}

.dq-target-badge[b-57lz3hf15g] {
    font-size: 0.55rem;
    font-weight: 600;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.3);
    color: #4ade80;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dq-canonical-badge[b-57lz3hf15g] {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(192, 132, 252, 0.25);
    color: #c084fc;
    font-family: 'Montserrat', monospace;
    letter-spacing: 0.04em;
}

.dq-variant-expand[b-57lz3hf15g] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
    border: 1px solid rgba(100, 116, 139, 0.2);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(148, 163, 184, 0.6);
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dq-variant-expand:hover[b-57lz3hf15g] {
    background: rgba(96, 165, 250, 0.1);
    border-color: rgba(96, 165, 250, 0.3);
    color: #93c5fd;
}

.dq-variant-expand .oi[b-57lz3hf15g] {
    font-size: 0.55rem;
}

.dq-variant-saldo-negative[b-57lz3hf15g] {
    color: #f87171;
    font-weight: 600;
}

/* Variant DxGrid styling */
[b-57lz3hf15g] .dq-variant-grid {
    font-size: 0.78rem;
    background: transparent;
}

/* Shrink the auto-generated drag handle column */
[b-57lz3hf15g] .dq-variant-grid col:first-child {
    width: 28px !important;
}

[b-57lz3hf15g] .dq-variant-grid .dxbl-grid-table td:first-child {
    padding: 0 !important;
    text-align: center;
}

[b-57lz3hf15g] .dq-variant-grid .dxbl-grid-table tbody tr {
    cursor: grab;
}

[b-57lz3hf15g] .dq-variant-grid .dxbl-grid-table tbody tr:active {
    cursor: grabbing;
}

[b-57lz3hf15g] .dq-variant-grid .dxbl-grid-table tbody tr.dxbl-grid-selected-row > td {
    background: rgba(96, 165, 250, 0.1) !important;
}

/* Drop zone highlight when grid is a drop target */
[b-57lz3hf15g] .dq-variant-grid.dxbl-grid-drop-target-component {
    outline: 2px dashed rgba(74, 222, 128, 0.5);
    outline-offset: -2px;
    background: rgba(34, 197, 94, 0.04);
}

/* Pending changes bar */
.dq-pending-changes-bar[b-57lz3hf15g] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgba(251, 191, 36, 0.2);
    background: rgba(245, 158, 11, 0.08);
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: #fbbf24;
    animation: dq-pendingSlideIn-b-57lz3hf15g 0.3s ease;
}

@keyframes dq-pendingSlideIn-b-57lz3hf15g {
    from {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    to {
        opacity: 1;
        max-height: 60px;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

.dq-pending-changes-bar .oi[b-57lz3hf15g] {
    font-size: 0.85rem;
    opacity: 0.8;
}

.dq-pending-changes-bar > span:nth-child(2)[b-57lz3hf15g] {
    flex: 1;
    min-width: 120px;
}

.dq-confirm-plate-row[b-57lz3hf15g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.4rem 0.5rem;
    background: rgba(15, 23, 42, 0.3);
    border-radius: 8px;
}

.dq-confirm-plate-label[b-57lz3hf15g] {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.6);
    white-space: nowrap;
}

.dq-confirm-plate-input[b-57lz3hf15g] {
    flex: 1;
    padding: 0.35rem 0.5rem;
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.5);
    color: #60a5fa;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Montserrat', monospace;
    outline: none;
    transition: border-color 0.2s;
    text-transform: uppercase;
}

.dq-confirm-plate-input:focus[b-57lz3hf15g] {
    border-color: rgba(96, 165, 250, 0.5);
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.1);
}

/* ═══════════════════════════════════════════════════════════════
   VARIANT GRID — force compact badge (single letter)
   ═══════════════════════════════════════════════════════════════ */
[b-57lz3hf15g] .dq-variant-grid .badge-text-full {
    display: none;
}

[b-57lz3hf15g] .dq-variant-grid .badge-text-mobile {
    display: inline;
}

/* ═══════════════════════════════════════════════════════════════
   VARIANT GRID HEADERS — glassmorphic theme
   ═══════════════════════════════════════════════════════════════ */
[b-57lz3hf15g] .dq-variant-grid .dxbl-grid-header-row th {
    background: rgba(15, 23, 42, 0.25) !important;
    border-bottom: 1px solid rgba(100, 116, 139, 0.12) !important;
    color: rgba(148, 163, 184, 0.65);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════════════════
   VARIANT GRID CHECKBOX CONTRAST
   ═══════════════════════════════════════════════════════════════ */
[b-57lz3hf15g] .dq-variant-grid .dxbl-grid-table .dxbl-checkbox {
    --dxbl-checkbox-bg: rgba(255, 255, 255, 0.06);
    --dxbl-checkbox-border-color: rgba(148, 163, 184, 0.35);
    --dxbl-checkbox-checked-bg: rgba(96, 165, 250, 0.6);
    --dxbl-checkbox-checked-border-color: rgba(96, 165, 250, 0.8);
}

/* ═══════════════════════════════════════════════════════════════
   DRAG HINT CHIP
   ═══════════════════════════════════════════════════════════════ */
.dq-drag-hint[b-57lz3hf15g] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    background: rgba(96, 165, 250, 0.2);
    border: 1px solid rgba(96, 165, 250, 0.4);
    color: #93c5fd;
    font-size: 0.72rem;
    font-weight: 600;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ═══════════════════════════════════════════════════════════════
   REASSIGNMENT DETAILS POPUP
   ═══════════════════════════════════════════════════════════════ */
.dq-details-popup[b-57lz3hf15g] {
    max-width: 520px;
    text-align: left;
}

.dq-reassign-details-list[b-57lz3hf15g] {
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.35) transparent;
}

.dq-reassign-detail-row[b-57lz3hf15g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    background: rgba(15, 23, 42, 0.3);
    border: 1px solid rgba(100, 116, 139, 0.15);
    border-radius: 8px;
}

.dq-reassign-arrow[b-57lz3hf15g] {
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.6);
}

.dq-reassign-detail-count[b-57lz3hf15g] {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.7);
}

.dq-reassign-detail-tx[b-57lz3hf15g] {
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.5);
    padding-left: 1.5rem;
    font-family: 'Montserrat', monospace;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .dq-master-detail[b-57lz3hf15g] {
        flex-direction: column;
    }

    .dq-master-pane[b-57lz3hf15g],
    .dq-detail-pane[b-57lz3hf15g] {
        flex: 1 1 auto;
        width: 100%;
    }

    .dq-detail-pane[b-57lz3hf15g] {
        position: static;
        max-height: none;
    }
}

@media (max-width: 767.98px) {
    .dq-page[b-57lz3hf15g] {
        padding: 0 0.5rem 1.5rem;
    }

    .dq-tabs[b-57lz3hf15g] {
        flex-direction: column;
    }

    .dq-tab[b-57lz3hf15g] {
        width: 100%;
        justify-content: center;
    }

    .dq-tx-main[b-57lz3hf15g] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }

    .dq-tx-location[b-57lz3hf15g] {
        max-width: none;
    }

    .dq-saldo-bar[b-57lz3hf15g] {
        flex-direction: column;
        gap: 0.4rem;
    }

    .dq-confirm-popup[b-57lz3hf15g] {
        padding: 1.25rem 1.25rem;
    }

    .dq-confirm-buttons[b-57lz3hf15g] {
        flex-direction: column;
    }
}

@media (max-width: 575.98px) {
    .dq-page[b-57lz3hf15g] {
        padding: 0 0.35rem 1rem;
        gap: 0.65rem;
    }

    /* Master grid: let plate column fill available space */
    [b-57lz3hf15g] .dq-grid {
        font-size: 0.75rem;
    }

    /* Detail header: wrap and shrink */
    .dq-detail-header[b-57lz3hf15g] {
        flex-wrap: wrap;
        padding: 0.55rem 0.65rem;
        font-size: 0.8rem;
        gap: 0.35rem;
    }

    /* Action buttons: full-width on mobile */
    .dq-bulk-action[b-57lz3hf15g] {
        padding: 0.5rem;
    }

    .dq-btn-bulk-delete[b-57lz3hf15g] {
        width: 100%;
        justify-content: center;
    }

    /* Merge target bar: stack vertically */
    .dq-merge-target-bar[b-57lz3hf15g] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
        padding: 0.5rem 0.65rem;
    }

    .dq-merge-target-bar select[b-57lz3hf15g] {
        min-width: unset;
    }

    .dq-btn-merge[b-57lz3hf15g] {
        width: 100%;
        justify-content: center;
    }

    /* Pending changes bar: stack vertically */
    .dq-pending-changes-bar[b-57lz3hf15g] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
        padding: 0.4rem 0.65rem;
    }

    .dq-pending-changes-bar .dq-action-btn[b-57lz3hf15g] {
        width: 100%;
        justify-content: center;
    }

    /* Variant header: wrap tighter */
    .dq-variant-header[b-57lz3hf15g] {
        padding: 0.4rem 0.5rem;
        gap: 0.35rem;
    }

    .dq-variant-stats[b-57lz3hf15g] {
        margin-left: 0;
        gap: 0.5rem;
    }

    /* Transaction rows: tighter padding */
    .dq-tx-row[b-57lz3hf15g] {
        padding: 0.35rem 0.45rem;
    }

    .dq-tx-detail-card[b-57lz3hf15g] {
        grid-template-columns: 1fr;
        gap: 0.3rem;
        padding: 0.4rem 0.5rem;
    }

    /* Confirmation popup: tighter on phones */
    .dq-confirm-popup[b-57lz3hf15g] {
        width: 95%;
        padding: 1rem;
        border-radius: 16px;
    }

    .dq-details-popup[b-57lz3hf15g] {
        max-width: 95%;
    }

    /* Toggle buttons: compact but accessible */
    .dq-toggle-btn[b-57lz3hf15g] {
        height: 36px;
        padding: 0 0.5rem;
        font-size: 0.75rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PLATE CORRECTIONS TAB
   ═══════════════════════════════════════════════════════════════════════════════ */

.dq-correction-compare[b-57lz3hf15g] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 10px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.dq-correction-plate[b-57lz3hf15g] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: center;
}

.dq-correction-arrow[b-57lz3hf15g] {
    color: #60a5fa;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.dq-correction-label[b-57lz3hf15g] {
    font-size: 0.65rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dq-correction-comment[b-57lz3hf15g] {
    padding: 0.75rem;
    background: rgba(15, 23, 42, 0.4);
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.dq-correction-comment p[b-57lz3hf15g] {
    margin: 0.35rem 0 0;
    color: #cbd5e1;
    font-size: 0.85rem;
    line-height: 1.4;
}

.dq-correction-meta[b-57lz3hf15g] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.dq-correction-role[b-57lz3hf15g] {
    padding: 0.1rem 0.5rem;
    background: rgba(99, 102, 241, 0.15);
    border-radius: 4px;
    font-size: 0.7rem;
    color: #818cf8;
    text-transform: capitalize;
}

.dq-correction-tx-context[b-57lz3hf15g] {
    padding: 0.75rem;
    background: rgba(15, 23, 42, 0.3);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.dq-correction-tx-row[b-57lz3hf15g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.dq-correction-tx-actions[b-57lz3hf15g] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.dq-correction-tx-actions .dq-tx-id-link[b-57lz3hf15g] {
    font-size: 0.8rem;
}

.dq-correction-image-btn[b-57lz3hf15g] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 6px;
    background: rgba(59, 130, 246, 0.1);
    color: #93c5fd;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dq-correction-image-btn:hover[b-57lz3hf15g] {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.5);
}

.dq-correction-image-btn:disabled[b-57lz3hf15g] {
    opacity: 0.6;
    cursor: default;
}

.dq-correction-image-btn .oi[b-57lz3hf15g] {
    font-size: 0.75rem;
}

.dq-correction-image[b-57lz3hf15g] {
    margin-top: 0.75rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.15);
}

.dq-correction-image img[b-57lz3hf15g] {
    width: 100%;
    height: auto;
    display: block;
}

.dq-correction-actions[b-57lz3hf15g] {
    padding-top: 0.75rem;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.dq-correction-apply-row[b-57lz3hf15g] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.dq-correction-apply-fields[b-57lz3hf15g] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-top: 0.35rem;
}

[b-57lz3hf15g] .dq-correction-country-select {
    flex: 0 0 115px;
    min-width: 115px;
}

.dq-correction-country-item[b-57lz3hf15g] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.dq-correction-flag[b-57lz3hf15g] {
    width: 24px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
}

.dq-correction-apply-input[b-57lz3hf15g] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    color: #e2e8f0;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    flex: 1;
}

.dq-correction-apply-input:focus[b-57lz3hf15g] {
    outline: none;
    border-color: rgba(59, 130, 246, 0.5);
}

.dq-correction-buttons[b-57lz3hf15g] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════
   HIGH-FREQUENCY ALARM PLATES
   ═══════════════════════════════════════════════════════════════ */
.dq-threshold-bar[b-57lz3hf15g] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.15);
    background: rgba(15, 23, 42, 0.2);
    flex-wrap: wrap;
}

.dq-threshold-bar .oi[b-57lz3hf15g] {
    color: #fbbf24;
}

.dq-threshold-label[b-57lz3hf15g] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(148, 163, 184, 0.6);
    white-space: nowrap;
}

.dq-threshold-select[b-57lz3hf15g] {
    padding: 0.35rem 0.5rem;
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: 7px;
    background: rgba(15, 23, 42, 0.5);
    color: #e2e8f0;
    font-size: 0.8rem;
    font-family: 'Montserrat', monospace;
    outline: none;
    transition: border-color 0.2s;
}

.dq-threshold-select:focus[b-57lz3hf15g] {
    border-color: rgba(251, 191, 36, 0.5);
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.1);
}

.dq-threshold-select option[b-57lz3hf15g] {
    background: #1e293b;
    color: #e2e8f0;
}

.dq-alarm-count[b-57lz3hf15g] {
    color: #fbbf24;
    font-weight: 700;
}
/* /Components/Pages/Administrator/AdministratorEgressConfig.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════
   AdministratorEgressConfig - webhook egress configuration (admin-only v1)
   Full-width layout: a slim client-picker toolbar up top (no permanent master column),
   a compact subscription card, and a dense virtualized locations grid.
   ═══════════════════════════════════════════════════════════════════════════════ */

.egress-config-page[b-34xxvhd564] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: #e2e8f0;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION CARD (glassmorphism) - this page didn't define these classes before
   even though its markup already used them, so the cards below rendered with no
   chrome at all. Adapted from Client/LocationDetails.razor.css's own copy of the
   same pattern - same colors as this page's .ec-mode-* / .ec-webhook-* badges.
   ═══════════════════════════════════════════════════════════════ */
.section-card[b-34xxvhd564] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(51, 65, 85, 0.7));
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 14px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.section-header[b-34xxvhd564] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.2);
}

.ec-section-title-group[b-34xxvhd564] {
    min-width: 0;
    flex: 1 1 auto;
}

.section-title[b-34xxvhd564] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.section-icon[b-34xxvhd564] {
    font-size: 1.05rem;
    opacity: 0.9;
    flex-shrink: 0;
}

.section-icon.primary[b-34xxvhd564] {
    color: #60a5fa;
    filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.4));
}

.section-icon.info[b-34xxvhd564] {
    color: #22d3ee;
    filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.4));
}

.section-body[b-34xxvhd564] {
    padding: 0.9rem 1.1rem;
}

/* ═══════════════════════════════════════════════════════════════
   CENTRAL-RESTART CAVEAT BANNER
   ═══════════════════════════════════════════════════════════════ */
.ec-restart-banner[b-34xxvhd564] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fcd34d;
}

.ec-restart-banner-icon[b-34xxvhd564] {
    margin-top: 0.15rem;
    color: #f59e0b;
}

.ec-restart-banner-text[b-34xxvhd564] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.85rem;
    line-height: 1.4;
}

.ec-restart-banner-text strong[b-34xxvhd564] {
    color: #fde68a;
}

.ec-restart-banner .btn-close[b-34xxvhd564] {
    margin-left: auto;
    filter: invert(1) grayscale(1) brightness(1.6);
    opacity: 0.7;
}

.ec-restart-banner .btn-close:hover[b-34xxvhd564] {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   CLIENT PICKER TOOLBAR (replaces the old permanent master column)
   ═══════════════════════════════════════════════════════════════ */
.ec-toolbar[b-34xxvhd564] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    padding: 0.6rem 1rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.6) 100%);
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 12px;
    backdrop-filter: blur(12px);
}

.ec-toolbar-picker[b-34xxvhd564] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ec-toolbar-icon[b-34xxvhd564] {
    color: rgba(147, 197, 253, 0.85);
    font-size: 0.9rem;
    flex-shrink: 0;
}

[b-34xxvhd564] .ec-client-picker {
    min-width: 240px;
    max-width: 360px;
}

.ec-toolbar-summary[b-34xxvhd564] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: rgba(226, 232, 240, 0.8);
    font-size: 0.8rem;
    font-weight: 500;
}

.ec-toolbar-summary .oi[b-34xxvhd564] {
    color: rgba(148, 163, 184, 0.7);
    font-size: 0.75rem;
}

@media (max-width: 767.98px) {
    .ec-toolbar[b-34xxvhd564] {
        flex-direction: column;
        align-items: stretch;
    }

    [b-34xxvhd564] .ec-client-picker {
        max-width: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   WEBHOOK STATE BADGE (toolbar)
   ═══════════════════════════════════════════════════════════════ */
.ec-webhook-badge[b-34xxvhd564] {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.ec-webhook-none[b-34xxvhd564] {
    background: rgba(100, 116, 139, 0.15);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: rgba(148, 163, 184, 0.8);
}

.ec-webhook-inactive[b-34xxvhd564] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.ec-webhook-active[b-34xxvhd564] {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.35);
    color: #4ade80;
}

/* ═══════════════════════════════════════════════════════════════
   NO SELECTION STATE
   ═══════════════════════════════════════════════════════════════ */
.ec-no-selection[b-34xxvhd564] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem 2rem;
    color: rgba(148, 163, 184, 0.55);
    font-size: 0.9rem;
    border: 1px dashed rgba(100, 116, 139, 0.25);
    border-radius: 14px;
}

.ec-empty-list[b-34xxvhd564] {
    padding: 1.5rem;
    text-align: center;
    color: rgba(148, 163, 184, 0.6);
    font-size: 0.85rem;
}

/* ═══════════════════════════════════════════════════════════════
   SUBSCRIPTION CARD - compact hand-rolled field grid (mirrors the
   registers-popup's .ec-register-row DIY layout rather than DxFormLayout,
   for tight, predictable row heights)
   ═══════════════════════════════════════════════════════════════ */
.ec-sub-form[b-34xxvhd564] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ec-sub-form-row[b-34xxvhd564] {
    display: grid;
    grid-template-columns: 1.6fr 1.3fr auto auto;
    gap: 0.6rem;
    align-items: end;
}

.ec-field[b-34xxvhd564] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.ec-field-wide[b-34xxvhd564] {
    width: 100%;
}

.ec-field-auto[b-34xxvhd564] {
    min-width: 90px;
}

.ec-field-switch[b-34xxvhd564] {
    min-width: 70px;
}

.ec-field-label[b-34xxvhd564] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(148, 163, 184, 0.65);
    margin: 0;
}

.ec-auth-pill[b-34xxvhd564] {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 0.6rem;
    border-radius: 6px;
    background: rgba(100, 116, 139, 0.15);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: rgba(203, 213, 225, 0.85);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    width: fit-content;
}

.ec-field-switch[b-34xxvhd564]  .dxbl-checkbox {
    height: 32px;
    display: flex;
    align-items: center;
}

.ec-secret-hint[b-34xxvhd564] {
    margin: 0;
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.6);
    line-height: 1.4;
}

@media (max-width: 767.98px) {
    .ec-sub-form-row[b-34xxvhd564] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575.98px) {
    .ec-sub-form-row[b-34xxvhd564] {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════
   LOCATIONS GRID HEADER BADGE
   ═══════════════════════════════════════════════════════════════ */
.ec-location-count-badge[b-34xxvhd564] {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    background: rgba(100, 116, 139, 0.2);
    color: rgba(148, 163, 184, 0.8);
}

/* Own horizontal-scroll container so a narrow viewport scrolls the grid, not the page. */
.ec-grid-scroll[b-34xxvhd564] {
    overflow-x: auto;
}

/* ═══════════════════════════════════════════════════════════════
   ROW HEIGHT / PAGING - this grid used to run VirtualScrollingEnabled with a
   bespoke tight-padding override here on top of it. DevExpress virtual scrolling
   requires uniform row heights to compute what to render; combined with the
   variable-height mode badge (wraps a warning icon in the "conflict" state) and
   this override's own padding fighting modern-grid.css's shared padding, that
   was the actual cause of the intermittent blank rows on scroll - not something
   to patch with yet another padding tweak. No other grid in this app
   (Transactions, AdministratorClientDetails, Client/LocationDetails, ClientOverview,
   GeneralDriveOffList, ...) uses VirtualScrollingEnabled at any comparable row
   count; they all use the standard PageSize + pager (see modern-grid.css's own
   pager theming), so this grid now does too (see AdministratorEgressConfig.razor)
   and needs no row-height overrides of its own - the shared modern-glass-grid
   padding is what every other grid in the app already renders at. */

/* The shared modern-glass-grid stylesheet (modern-grid.css) centers + tightens
   columns 1-3 on the assumption they're icon/action columns (status + edit +
   details, as in AdministratorClientDetails' managers grid). Here only column 1
   (status) fits that pattern - columns 2 (location name) and 3 (station) are
   regular left-aligned text, so restore the standard alignment/padding for them. */
.ec-locations-grid .dxbl-grid-table td:nth-child(2)[b-34xxvhd564],
.ec-locations-grid .dxbl-grid-table td:nth-child(3)[b-34xxvhd564] {
    text-align: left !important;
    padding: 0.65rem 1rem !important; /* modern-grid.css's own default td padding */
}

.ec-locations-grid .dxbl-grid-table th:nth-child(2)[b-34xxvhd564],
.ec-locations-grid .dxbl-grid-table th:nth-child(3)[b-34xxvhd564] {
    padding: 0.75rem 1rem !important; /* modern-grid.css's own default th padding */
}

/* ═══════════════════════════════════════════════════════════════
   MODE BADGES (locations grid)
   ═══════════════════════════════════════════════════════════════ */
.ec-mode-badge[b-34xxvhd564] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    white-space: nowrap;
}

.ec-mode-off[b-34xxvhd564] {
    background: rgba(100, 116, 139, 0.15);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: rgba(148, 163, 184, 0.75);
}

.ec-mode-single[b-34xxvhd564] {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.3);
    color: #4ade80;
}

.ec-mode-fanout[b-34xxvhd564] {
    background: rgba(6, 182, 212, 0.15);
    border: 1px solid rgba(34, 211, 238, 0.3);
    color: #22d3ee;
}

.ec-mode-conflict[b-34xxvhd564] {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #f59e0b;
}

/* Inline warning icon inside the badge (tooltip carries the explanation) instead of
   a second wrapped text line - keeps every row the same tight height even in the
   rare conflict state. */
.ec-mode-warning-icon[b-34xxvhd564] {
    font-size: 0.7rem;
    color: #fbbf24;
    cursor: help;
}

/* ═══════════════════════════════════════════════════════════════
   LAST-EVENT COLUMN + PULSE
   ═══════════════════════════════════════════════════════════════ */
.ec-last-event[b-34xxvhd564] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
}

.ec-no-event[b-34xxvhd564] {
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.5);
}

.ec-pulse-dot[b-34xxvhd564] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(100, 116, 139, 0.35);
    flex-shrink: 0;
}

.ec-pulse-dot.ec-pulse-active[b-34xxvhd564] {
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
    animation: ec-pulse-b-34xxvhd564 1.6s ease-out infinite;
}

@keyframes ec-pulse-b-34xxvhd564 {
    0% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55);
    }
    70% {
        box-shadow: 0 0 0 7px rgba(74, 222, 128, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
    }
}

/* ═══════════════════════════════════════════════════════════════
   ROW ACTIONS - compact icon buttons + tooltips, replacing the two
   stacked full-text buttons the old actions column rendered per row.
   ═══════════════════════════════════════════════════════════════ */
.ec-row-actions[b-34xxvhd564] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.ec-row-action-btn[b-34xxvhd564] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.8rem;
}

.ec-row-action-btn--enable[b-34xxvhd564] {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
}

.ec-row-action-btn--enable:hover[b-34xxvhd564] {
    background: rgba(34, 197, 94, 0.2);
}

.ec-row-action-btn--disable[b-34xxvhd564] {
    border-color: rgba(148, 163, 184, 0.25);
    background: rgba(100, 116, 139, 0.1);
    color: rgba(226, 232, 240, 0.75);
}

.ec-row-action-btn--disable:hover[b-34xxvhd564] {
    background: rgba(100, 116, 139, 0.2);
}

.ec-row-action-btn--registers[b-34xxvhd564] {
    border-color: rgba(99, 102, 241, 0.3);
    background: rgba(99, 102, 241, 0.1);
    color: #a5b4fc;
}

.ec-row-action-btn--registers:hover[b-34xxvhd564] {
    background: rgba(99, 102, 241, 0.2);
}

/* ═══════════════════════════════════════════════════════════════
   CONFIGURE REGISTERS POPUP
   ═══════════════════════════════════════════════════════════════ */
.ec-registers-editor[b-34xxvhd564] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ec-register-row[b-34xxvhd564] {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr auto auto;
    gap: 0.5rem;
    align-items: center;
}

.ec-register-row-header[b-34xxvhd564] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(148, 163, 184, 0.55);
    padding: 0 0.1rem;
}

.ec-register-remove[b-34xxvhd564] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(239, 68, 68, 0.25);
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ec-register-remove:hover[b-34xxvhd564] {
    background: rgba(239, 68, 68, 0.2);
}

.ec-register-add[b-34xxvhd564] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    margin-top: 0.25rem;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(99, 102, 241, 0.3);
    background: rgba(99, 102, 241, 0.1);
    color: #a5b4fc;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ec-register-add:hover[b-34xxvhd564] {
    background: rgba(99, 102, 241, 0.2);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .ec-register-row[b-34xxvhd564] {
        grid-template-columns: 1fr;
    }

    .ec-register-row-header[b-34xxvhd564] {
        display: none;
    }
}
/* /Components/Pages/Administrator/AdministratorHardwareDetails.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Relation Delete Confirmation Popup (logout-style)
   ═══════════════════════════════════════════════════════════════════════════ */
.confirm-overlay[b-p4l6ras364] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn-b-p4l6ras364 0.2s ease;
}

.confirm-popup[b-p4l6ras364] {
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.95), rgba(51, 65, 85, 0.9));
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 20px;
    padding: 2rem;
    max-width: 360px;
    width: 90%;
    text-align: center;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4),
                0 12px 24px rgba(0, 0, 0, 0.2);
    animation: popupSlideIn-b-p4l6ras364 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.confirm-popup-icon[b-p4l6ras364] {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-popup-icon .oi[b-p4l6ras364] {
    font-size: 1.5rem;
    color: #ef4444;
}

.confirm-popup-title[b-p4l6ras364] {
    font-size: 1.25rem;
    font-weight: 600;
    color: rgba(248, 250, 252, 0.95);
    margin: 0 0 0.5rem;
}

.confirm-popup-message[b-p4l6ras364] {
    font-size: 0.9rem;
    color: rgba(148, 163, 184, 0.85);
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

.confirm-popup-actions[b-p4l6ras364] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.confirm-btn[b-p4l6ras364] {
    padding: 0.65rem 1.5rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.confirm-btn-cancel[b-p4l6ras364] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.confirm-btn-cancel:hover[b-p4l6ras364] {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(148, 163, 184, 0.3);
}

.confirm-btn-yes[b-p4l6ras364] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.confirm-btn-yes:hover[b-p4l6ras364] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

@keyframes fadeIn-b-p4l6ras364 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes popupSlideIn-b-p4l6ras364 {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mobile Responsiveness
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .confirm-popup[b-p4l6ras364] {
        padding: 1.5rem 1rem;
        border-radius: 16px;
        max-width: 92vw;
    }

    .confirm-popup-title[b-p4l6ras364] {
        font-size: 1.1rem;
    }

    .confirm-popup-message[b-p4l6ras364] {
        font-size: 0.85rem;
    }

    .confirm-popup-actions[b-p4l6ras364] {
        flex-direction: column;
    }

    .confirm-btn[b-p4l6ras364] {
        width: 100%;
        padding: 0.75rem 1rem;
    }
}
/* /Components/Pages/Administrator/AdministratorHome.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Administrator Home - Lightweight search-first landing page
   ═══════════════════════════════════════════════════════════════════════════ */
.home-page[b-l4lh6nkedq] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0 1.5rem 3rem;
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    color: rgba(226, 232, 240, 0.95);
    animation: home-fade-in 0.4s ease;
}

@@keyframes home-fade-in {
    from[b-l4lh6nkedq] { opacity: 0; }
    to[b-l4lh6nkedq] { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Hero Search Section
   ═══════════════════════════════════════════════════════════════════════════ */
.home-hero[b-l4lh6nkedq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5rem 0 2rem;
}

.home-subtitle[b-l4lh6nkedq] {
    font-size: 1rem;
    color: rgba(148, 163, 184, 0.65);
    margin-bottom: 2rem;
    text-align: center;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Search Bar
   ═══════════════════════════════════════════════════════════════════════════ */
.home-search-wrap[b-l4lh6nkedq] {
    position: relative;
    width: 100%;
    max-width: 620px;
}

.home-search-shell[b-l4lh6nkedq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.7), rgba(51, 65, 85, 0.5));
    border: 1px solid rgba(148, 163, 184, 0.2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.home-search-shell:hover[b-l4lh6nkedq] {
    border-color: rgba(148, 163, 184, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.home-search-shell.focused[b-l4lh6nkedq] {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25),
                0 0 0 4px rgba(59, 130, 246, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.home-search-icon[b-l4lh6nkedq] {
    font-size: 1.15rem;
    color: rgba(148, 163, 184, 0.4);
    transition: color 0.3s ease;
    flex-shrink: 0;
}

.home-search-shell.focused .home-search-icon[b-l4lh6nkedq] {
    color: rgba(59, 130, 246, 0.6);
}

.home-search-input[b-l4lh6nkedq] {
    flex: 1;
    height: 52px;
    border: none;
    background: transparent;
    color: rgba(226, 232, 240, 0.95);
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    outline: none;
}

.home-search-input[b-l4lh6nkedq]::placeholder {
    color: rgba(148, 163, 184, 0.4);
    font-weight: 400;
}

/* ── Loading Spinner ── */
.home-spinner[b-l4lh6nkedq] {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-top-color: rgba(59, 130, 246, 0.7);
    border-radius: 50%;
    animation: home-spin 0.8s linear infinite;
    flex-shrink: 0;
}

@@keyframes home-spin {
    to[b-l4lh6nkedq] { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Search Results Dropdown
   ═══════════════════════════════════════════════════════════════════════════ */
.home-results[b-l4lh6nkedq] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 420px;
    overflow-y: auto;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.97), rgba(51, 65, 85, 0.95));
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    z-index: 100;
    padding: 0.4rem 0;
    animation: home-dropdown-in 0.15s ease;
}

@@keyframes home-dropdown-in {
    from[b-l4lh6nkedq] { opacity: 0; transform: translateY(-8px); }
    to[b-l4lh6nkedq] { opacity: 1; transform: translateY(0); }
}

.home-results-category[b-l4lh6nkedq] {
    padding: 0.55rem 1rem 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(148, 163, 184, 0.55);
}

.home-result-item[b-l4lh6nkedq] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: background 0.12s ease;
}

.home-result-item:hover[b-l4lh6nkedq],
.home-result-item.selected[b-l4lh6nkedq] {
    background: rgba(59, 130, 246, 0.12);
}

.home-result-item.selected[b-l4lh6nkedq] {
    background: rgba(59, 130, 246, 0.18);
}

.home-result-icon[b-l4lh6nkedq] {
    font-size: 0.9rem;
    color: rgba(148, 163, 184, 0.6);
    min-width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.home-result-text[b-l4lh6nkedq] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.home-result-primary[b-l4lh6nkedq] {
    font-size: 0.92rem;
    font-weight: 500;
    color: rgba(226, 232, 240, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-result-sub[b-l4lh6nkedq] {
    font-size: 0.78rem;
    color: rgba(148, 163, 184, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-result-plate[b-l4lh6nkedq] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 1rem;
    margin-top: 0.2rem;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    cursor: pointer;
    font-size: 0.88rem;
    color: rgba(96, 165, 250, 0.9);
    transition: background 0.12s ease;
}

.home-result-plate:hover[b-l4lh6nkedq],
.home-result-plate.selected[b-l4lh6nkedq] {
    background: rgba(59, 130, 246, 0.12);
}

.home-no-results[b-l4lh6nkedq] {
    padding: 1.5rem 1rem;
    text-align: center;
    color: rgba(148, 163, 184, 0.5);
    font-size: 0.88rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tip Text
   ═══════════════════════════════════════════════════════════════════════════ */
.home-tip[b-l4lh6nkedq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    font-size: 0.78rem;
    color: rgba(148, 163, 184, 0.4);
}

.home-tip-icon[b-l4lh6nkedq] {
    font-size: 0.72rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Quick Access Section
   ═══════════════════════════════════════════════════════════════════════════ */
.home-links[b-l4lh6nkedq] {
    padding: 0;
    width: 100%;
    animation: home-fade-up 0.5s ease 0.1s both;
}

@@keyframes home-fade-up {
    from[b-l4lh6nkedq] { opacity: 0; transform: translateY(12px); }
    to[b-l4lh6nkedq] { opacity: 1; transform: translateY(0); }
}

.home-section-title[b-l4lh6nkedq] {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 1rem;
    padding-left: 10px;
    border-left: 3px solid rgba(59, 130, 246, 0.4);
}

.home-links-grid[b-l4lh6nkedq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Quick Link Cards
   ═══════════════════════════════════════════════════════════════════════════ */
.home-link-card[b-l4lh6nkedq] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-top: 2px solid var(--accent);
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    min-width: 0;
    overflow: hidden;
}

.home-link-card:hover[b-l4lh6nkedq] {
    border-color: var(--accent);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15),
                0 0 0 1px var(--accent-bg);
    transform: translateY(-2px);
}

.home-link-icon[b-l4lh6nkedq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--accent-bg);
    color: var(--accent);
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.home-link-card:hover .home-link-icon[b-l4lh6nkedq] {
    transform: scale(1.08);
}

.home-link-body[b-l4lh6nkedq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.home-link-title[b-l4lh6nkedq] {
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(248, 250, 252, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-link-desc[b-l4lh6nkedq] {
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-link-arrow[b-l4lh6nkedq] {
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.3);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.home-link-card:hover .home-link-arrow[b-l4lh6nkedq] {
    color: var(--accent);
    transform: translateX(3px);
}

/* Touch feedback for mobile */
.home-link-card:active[b-l4lh6nkedq] {
    transform: scale(0.98);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive - Tablet
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    .home-links-grid[b-l4lh6nkedq] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-hero[b-l4lh6nkedq] {
        padding: 3.5rem 0 1.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive - Mobile (< 768px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .home-page[b-l4lh6nkedq] {
        gap: 1.5rem;
        padding: 0 1rem 2rem;
    }

    .home-links-grid[b-l4lh6nkedq] {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .home-hero[b-l4lh6nkedq] {
        padding: 2.5rem 0 1.5rem;
    }

    .home-subtitle[b-l4lh6nkedq] {
        font-size: 0.9rem;
    }

    .home-search-input[b-l4lh6nkedq] {
        height: 46px;
        font-size: 1rem;
    }

    .home-search-shell[b-l4lh6nkedq] {
        border-radius: 14px;
    }

    .home-results[b-l4lh6nkedq] {
        max-height: 320px;
        border-radius: 12px;
    }

    .home-result-item[b-l4lh6nkedq] {
        padding: 0.75rem 1rem;
    }

    .home-result-plate[b-l4lh6nkedq] {
        padding: 0.75rem 1rem;
    }

    .home-link-title[b-l4lh6nkedq] {
        white-space: normal;
    }

    .home-link-desc[b-l4lh6nkedq] {
        white-space: normal;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive - XSmall / Phone (< 576px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .home-page[b-l4lh6nkedq] {
        padding: 0 0.75rem 1.5rem;
    }

    .home-hero[b-l4lh6nkedq] {
        padding: 1.5rem 0 1rem;
    }

    .home-subtitle[b-l4lh6nkedq] {
        font-size: 0.85rem;
        margin-bottom: 1.25rem;
    }

    .home-search-input[b-l4lh6nkedq] {
        height: 44px;
        font-size: 0.95rem;
    }

    .home-search-shell[b-l4lh6nkedq] {
        padding: 0.4rem 0.75rem;
        border-radius: 12px;
    }

    .home-link-card[b-l4lh6nkedq] {
        padding: 14px 14px;
        gap: 12px;
    }

    .home-link-icon[b-l4lh6nkedq] {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        font-size: 1rem;
    }

    .home-link-title[b-l4lh6nkedq] {
        font-size: 0.85rem;
    }

    .home-link-desc[b-l4lh6nkedq] {
        font-size: 0.75rem;
    }

    .home-link-arrow[b-l4lh6nkedq] {
        display: none;
    }

    .home-section-title[b-l4lh6nkedq] {
        font-size: 0.78rem;
        margin-bottom: 0.75rem;
    }

    .home-tip[b-l4lh6nkedq] {
        font-size: 0.72rem;
        margin-top: 1rem;
    }

    .home-results[b-l4lh6nkedq] {
        max-height: 280px;
    }
}
/* /Components/Pages/Administrator/AdministratorImportDriveoffs.razor.rz.scp.css */
/* Mobile responsiveness: force summary cards to wrap on small screens */
@media (max-width: 575.98px) {
    [b-wwohvxhu1k] .summary-card {
        padding: 12px 8px;
        min-width: 0;
    }

    [b-wwohvxhu1k] .summary-number {
        font-size: 1.4rem;
    }

    [b-wwohvxhu1k] .summary-label {
        font-size: 0.75rem;
    }

    [b-wwohvxhu1k] .row.g-3 > .col {
        flex: 0 0 48%;
        max-width: 48%;
    }
}
/* /Components/Pages/Administrator/AdministratorImportPayments.razor.rz.scp.css */
/* Connected drive-off cell — two-row layout: meta on top, plate chip below */
[b-kwu43dhj3g] .parent-link {
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: 1.3;
    padding: 2px 0;
}

[b-kwu43dhj3g] .parent-link-meta {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.6rem;
}

[b-kwu43dhj3g] .parent-link-plate {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: 0.06em;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 4px;
    padding: 1px 6px;
    width: fit-content;
}

[b-kwu43dhj3g] .parent-link-source {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0px 4px;
    border-radius: 3px;
    line-height: 1.5;
}

[b-kwu43dhj3g] .parent-link-db {
    background: rgba(34, 197, 94, 0.12);
    color: rgba(74, 222, 128, 0.8);
}

[b-kwu43dhj3g] .parent-link-batch {
    background: rgba(96, 165, 250, 0.12);
    color: rgba(96, 165, 250, 0.8);
}

[b-kwu43dhj3g] .parent-link-id {
    color: rgba(148, 163, 184, 0.5);
    font-weight: 400;
}

/* Mobile responsiveness: force summary cards to wrap on small screens */
@media (max-width: 575.98px) {
    [b-kwu43dhj3g] .summary-card {
        padding: 12px 8px;
        min-width: 0;
    }

    [b-kwu43dhj3g] .summary-number {
        font-size: 1.4rem;
    }

    [b-kwu43dhj3g] .summary-label {
        font-size: 0.75rem;
    }

    [b-kwu43dhj3g] .row.g-3 > .col {
        flex: 0 0 48%;
        max-width: 48%;
    }
}
/* /Components/Pages/Administrator/AdministratorImportReview.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════
   AdministratorImportReview - Glassmorphic dual-mode review page
   Matches VehicleIdReview design patterns
   ═══════════════════════════════════════════════════════════════════════════════ */

.import-review-page[b-wp6xsv969m] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 1rem 2rem;
    color: #e2e8f0;
    outline: none;
}

/* ═══════════════════════════════════════════════════════════════
   GRID SECTION
   ═══════════════════════════════════════════════════════════════ */
.ir-grid-container[b-wp6xsv969m] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(51, 65, 85, 0.4));
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.ir-grid-header[b-wp6xsv969m] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.6rem 1.25rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.15);
    background: rgba(15, 23, 42, 0.2);
}

.ir-grid-filters[b-wp6xsv969m] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}

.ir-grid-bulk-actions[b-wp6xsv969m] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding-left: 0.35rem;
    border-left: 1px solid rgba(100, 116, 139, 0.15);
}


/* ── Inline DxComboBox theme integration ── */
[b-wp6xsv969m] .ir-inline-combo {
    width: 130px;
}

[b-wp6xsv969m] .ir-inline-combo .dxbl-combobox {
    font-size: 0.7rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 6px;
    color: #cbd5e1;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[b-wp6xsv969m] .ir-inline-combo .dxbl-combobox:hover {
    border-color: rgba(100, 116, 139, 0.4);
}

[b-wp6xsv969m] .ir-inline-combo .dxbl-combobox:focus-within {
    border-color: rgba(96, 165, 250, 0.45);
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.1);
}

[b-wp6xsv969m] .ir-inline-combo .dxbl-combobox input {
    color: #e2e8f0;
    font-size: 0.7rem;
    font-weight: 500;
}

[b-wp6xsv969m] .ir-inline-combo .dxbl-combobox .dxbl-btn-clear {
    color: rgba(148, 163, 184, 0.5);
}

[b-wp6xsv969m] .ir-inline-combo .dxbl-combobox .dxbl-btn-clear:hover {
    color: rgba(248, 113, 113, 0.8);
}

.ir-grid-title[b-wp6xsv969m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #f1f5f9;
}

.ir-grid-title .oi[b-wp6xsv969m] {
    color: rgba(148, 163, 184, 0.6);
}

.ir-grid-count[b-wp6xsv969m] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    background: rgba(100, 116, 139, 0.2);
    color: rgba(148, 163, 184, 0.8);
}

.ir-grid-body[b-wp6xsv969m] {
    padding: 0.5rem;
}


/* ═══════════════════════════════════════════════════════════════
   STATUS BADGES (for processed items in grid)
   ═══════════════════════════════════════════════════════════════ */
.ir-status-badge[b-wp6xsv969m] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ir-status-accepted[b-wp6xsv969m] {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.3);
    color: #4ade80;
}

.ir-status-rejected[b-wp6xsv969m] {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(248, 113, 113, 0.3);
    color: #f87171;
}

.ir-status-merged[b-wp6xsv969m] {
    background: rgba(6, 182, 212, 0.15);
    border: 1px solid rgba(34, 211, 238, 0.3);
    color: #22d3ee;
}

.ir-status-pending[b-wp6xsv969m] {
    background: rgba(100, 116, 139, 0.15);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: #94a3b8;
}

/* ═══════════════════════════════════════════════════════════════
   GRID ACTION CELLS
   ═══════════════════════════════════════════════════════════════ */
.ir-grid-actions[b-wp6xsv969m] {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.ir-plate-cell[b-wp6xsv969m] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════ */
.ir-empty-state[b-wp6xsv969m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 2rem;
    color: rgba(148, 163, 184, 0.6);
    text-align: center;
}

.ir-empty-state .oi[b-wp6xsv969m] {
    font-size: 2.5rem;
    opacity: 0.4;
}

/* Success empty state — all pending items reviewed */
.ir-empty-success[b-wp6xsv969m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 2rem;
    text-align: center;
}

.ir-empty-success-icon[b-wp6xsv969m] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(22, 163, 74, 0.1));
    border: 1px solid rgba(74, 222, 128, 0.2);
    margin-bottom: 0.5rem;
}

.ir-empty-success-icon .oi[b-wp6xsv969m] {
    font-size: 1.6rem;
    color: #4ade80;
}

.ir-empty-success-title[b-wp6xsv969m] {
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.9);
    margin: 0;
}

.ir-empty-success-text[b-wp6xsv969m] {
    font-size: 0.8rem;
    color: rgba(148, 163, 184, 0.6);
    max-width: 320px;
    line-height: 1.5;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   MASTER-DETAIL SPLIT LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.ir-master-detail[b-wp6xsv969m] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    min-height: 0;
}

/* Phones + small tablets: stack the panes — side-by-side leaves ~150px each */
@media (max-width: 767.98px) {
    .ir-master-detail[b-wp6xsv969m] {
        flex-direction: column;
    }

    .ir-master-pane[b-wp6xsv969m],
    .ir-detail-pane[b-wp6xsv969m] {
        flex: 1 1 100%;
        width: 100%;
        position: static;
        max-height: none;
    }
}

.ir-master-pane[b-wp6xsv969m] {
    flex: 1 1 42%;
    min-width: 0;
}

.ir-detail-pane[b-wp6xsv969m] {
    flex: 1.4 1 58%;
    min-width: 0;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.35) transparent;
}

.ir-detail-pane[b-wp6xsv969m]::-webkit-scrollbar {
    width: 6px;
}

.ir-detail-pane[b-wp6xsv969m]::-webkit-scrollbar-track {
    background: transparent;
}

.ir-detail-pane[b-wp6xsv969m]::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.3);
    border-radius: 3px;
}

.ir-detail-pane[b-wp6xsv969m]::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.5);
}

/* ═══════════════════════════════════════════════════════════════
   DETAIL PANEL
   ═══════════════════════════════════════════════════════════════ */
.ir-detail-panel[b-wp6xsv969m] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(51, 65, 85, 0.7));
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 14px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
    animation: ir-panel-slideIn-b-wp6xsv969m 0.3s ease;
}

@keyframes ir-panel-slideIn-b-wp6xsv969m {
    from {
        opacity: 0;
        transform: translateX(12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Navigation bar at top of detail panel */
.ir-navigation[b-wp6xsv969m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.15);
    background: rgba(15, 23, 42, 0.3);
}

.ir-nav-buttons[b-wp6xsv969m] {
    display: flex;
    gap: 0.5rem;
}

.ir-nav-btn[b-wp6xsv969m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: 32px;
    padding: 0 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(100, 116, 139, 0.3);
    background: rgba(71, 85, 105, 0.3);
    color: rgba(203, 213, 225, 0.8);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ir-nav-btn:hover:not(:disabled)[b-wp6xsv969m] {
    background: rgba(71, 85, 105, 0.5);
    color: #f8fafc;
}

.ir-nav-btn:disabled[b-wp6xsv969m] {
    opacity: 0.35;
    cursor: not-allowed;
}

.ir-queue-position[b-wp6xsv969m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: rgba(148, 163, 184, 0.8);
}

.ir-queue-current[b-wp6xsv969m] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    color: #60a5fa;
}

.ir-queue-total[b-wp6xsv969m] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.6);
}

.ir-queue-label[b-wp6xsv969m] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(148, 163, 184, 0.5);
}


/* ═══════════════════════════════════════════════════════════════
   DETAIL SPLIT (50/50 comparison)
   ═══════════════════════════════════════════════════════════════ */
.ir-detail-content[b-wp6xsv969m] {
    padding: 1rem;
}

.ir-detail-split[b-wp6xsv969m] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ir-detail-card[b-wp6xsv969m] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.875rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.6), rgba(30, 41, 59, 0.5));
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 12px;
}

.ir-detail-card-header[b-wp6xsv969m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.15);
}

.ir-detail-card-title[b-wp6xsv969m] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(148, 163, 184, 0.6);
}

.ir-detail-card-icon[b-wp6xsv969m] {
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.4);
}

/* Detail rows */
.ir-detail-row[b-wp6xsv969m] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.4rem 0;
}

.ir-detail-row + .ir-detail-row[b-wp6xsv969m] {
    border-top: 1px solid rgba(100, 116, 139, 0.08);
}

.ir-detail-field-label[b-wp6xsv969m] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(148, 163, 184, 0.5);
    width: 80px;
    flex-shrink: 0;
    padding-top: 0.1rem;
}

.ir-detail-field-value[b-wp6xsv969m] {
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(226, 232, 240, 0.9);
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

/* Diff highlighting */
.ir-diff-highlight[b-wp6xsv969m] {
    border-left: 3px solid rgba(245, 158, 11, 0.5);
    padding-left: 0.5rem;
    background: rgba(245, 158, 11, 0.05);
    border-radius: 0 4px 4px 0;
}

.ir-diff-resolved[b-wp6xsv969m] {
    border-left: 3px solid rgba(34, 211, 238, 0.5);
    padding-left: 0.5rem;
    background: rgba(34, 211, 238, 0.05);
    border-radius: 0 4px 4px 0;
}

/* Merge preview — cyan text for overridden values */
.ir-merge-preview[b-wp6xsv969m] {
    color: #22d3ee;
    font-weight: 600;
}

[b-wp6xsv969m] .ir-merge-preview .plate-number {
    color: #22d3ee !important;
}

/* ── Merge toggle pill ── */
.ir-merge-toggle[b-wp6xsv969m] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    flex-shrink: 0;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    border: 1px solid rgba(100, 116, 139, 0.25);
    background: rgba(100, 116, 139, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
}

.ir-merge-toggle input[type="checkbox"][b-wp6xsv969m] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ir-merge-toggle .oi[b-wp6xsv969m] {
    font-size: 0.55rem;
    color: rgba(148, 163, 184, 0.5);
    transition: color 0.2s ease, transform 0.2s ease;
}

.ir-merge-text[b-wp6xsv969m] {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(148, 163, 184, 0.6);
    white-space: nowrap;
    transition: color 0.2s ease;
}

/* Hover */
.ir-merge-toggle:hover[b-wp6xsv969m] {
    border-color: rgba(34, 211, 238, 0.3);
    background: rgba(34, 211, 238, 0.06);
}
.ir-merge-toggle:hover .oi[b-wp6xsv969m],
.ir-merge-toggle:hover .ir-merge-text[b-wp6xsv969m] {
    color: rgba(34, 211, 238, 0.7);
}

/* Active/checked */
.ir-merge-toggle.ir-merge-active[b-wp6xsv969m] {
    border-color: rgba(34, 211, 238, 0.45);
    background: rgba(34, 211, 238, 0.12);
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.1);
}
.ir-merge-toggle.ir-merge-active .oi[b-wp6xsv969m] {
    color: #22d3ee;
    transform: translateX(-1px);
}
.ir-merge-toggle.ir-merge-active .ir-merge-text[b-wp6xsv969m] {
    color: rgba(34, 211, 238, 0.9);
}

/* No match info */
.ir-no-match[b-wp6xsv969m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: rgba(148, 163, 184, 0.5);
    text-align: center;
    font-size: 0.85rem;
}

.ir-no-match .oi[b-wp6xsv969m] {
    font-size: 1.5rem;
    opacity: 0.4;
}

/* Loading state in detail panel */
.ir-detail-loading[b-wp6xsv969m] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: rgba(148, 163, 184, 0.6);
    font-size: 0.85rem;
}

.ir-spin[b-wp6xsv969m] {
    animation: ir-spin-b-wp6xsv969m 1s linear infinite;
}

@keyframes ir-spin-b-wp6xsv969m {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════
   PLATE EDITOR (inline in detail panel)
   ═══════════════════════════════════════════════════════════════ */
.ir-plate-editor[b-wp6xsv969m] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ir-plate-editor-row[b-wp6xsv969m] {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.ir-plate-input[b-wp6xsv969m] {
    width: 140px;
    padding: 0.3rem 0.5rem;
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.6);
    color: #f1f5f9;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.2s;
}

.ir-plate-input:focus[b-wp6xsv969m] {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.ir-plate-validation[b-wp6xsv969m] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

.ir-plate-valid[b-wp6xsv969m] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.ir-plate-invalid[b-wp6xsv969m] {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

/* ═══════════════════════════════════════════════════════════════
   ACTION BAR (bottom of detail panel)
   ═══════════════════════════════════════════════════════════════ */
.ir-action-bar[b-wp6xsv969m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(100, 116, 139, 0.15);
    background: rgba(15, 23, 42, 0.3);
    flex-wrap: wrap;
}

.ir-action-left[b-wp6xsv969m] {
    display: flex;
    gap: 0.5rem;
}

.ir-action-right[b-wp6xsv969m] {
    display: flex;
    gap: 0.5rem;
}

.ir-action-btn[b-wp6xsv969m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 36px;
    padding: 0 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.ir-action-btn:disabled[b-wp6xsv969m] {
    opacity: 0.4;
    cursor: not-allowed;
}

.ir-btn-shortcut[b-wp6xsv969m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 4px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
    font-size: 0.55rem;
    font-weight: 700;
    opacity: 0.5;
    font-family: monospace;
}

/* Skip */
.ir-btn-skip[b-wp6xsv969m] {
    background: rgba(71, 85, 105, 0.4);
    border-color: rgba(100, 116, 139, 0.3);
    color: rgba(203, 213, 225, 0.8);
}

.ir-btn-skip:hover:not(:disabled)[b-wp6xsv969m] {
    background: rgba(71, 85, 105, 0.6);
    color: #f8fafc;
}

/* Reject */
.ir-btn-reject[b-wp6xsv969m] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.ir-btn-reject:hover:not(:disabled)[b-wp6xsv969m] {
    background: rgba(239, 68, 68, 0.25);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

/* Merge */
.ir-btn-merge[b-wp6xsv969m] {
    background: rgba(6, 182, 212, 0.15);
    border-color: rgba(6, 182, 212, 0.3);
    color: #22d3ee;
}

.ir-btn-merge:hover:not(:disabled)[b-wp6xsv969m] {
    background: rgba(6, 182, 212, 0.25);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.15);
}

/* Accept */
.ir-btn-accept[b-wp6xsv969m] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-color: rgba(34, 197, 94, 0.4);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.25);
}

.ir-btn-accept:hover:not(:disabled)[b-wp6xsv969m] {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.35);
}

.ir-btn-accept:active:not(:disabled)[b-wp6xsv969m] {
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .ir-master-detail[b-wp6xsv969m] {
        flex-direction: column;
    }

    .ir-detail-pane[b-wp6xsv969m] {
        position: static;
        max-height: none;
        flex: 1 1 auto;
    }

    .ir-detail-split[b-wp6xsv969m] {
        flex-direction: row;
    }

    .ir-detail-card[b-wp6xsv969m] {
        flex: 1 1 50%;
    }

    .ir-grid-filters[b-wp6xsv969m] {
        margin-left: 0;
    }

    .ir-grid-bulk-actions[b-wp6xsv969m] {
        border-left: none;
        padding-left: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .import-review-page[b-wp6xsv969m] {
        padding: 0 0.5rem 1.5rem;
        gap: 0.75rem;
    }

    .ir-grid-header[b-wp6xsv969m] {
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
    }

    .ir-grid-filters[b-wp6xsv969m] {
        order: 2;
        width: 100%;
        margin-left: 0;
    }

    [b-wp6xsv969m] .ir-inline-combo {
        flex: 1;
        width: auto;
        min-width: 0;
    }

    .ir-grid-bulk-actions[b-wp6xsv969m] {
        order: 3;
        width: 100%;
        border-left: none;
        padding-left: 0;
        padding-top: 0.35rem;
        border-top: 1px solid rgba(100, 116, 139, 0.1);
    }

    .ir-detail-split[b-wp6xsv969m] {
        flex-direction: column;
    }

    .ir-action-bar[b-wp6xsv969m] {
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
    }

    .ir-action-left[b-wp6xsv969m],
    .ir-action-right[b-wp6xsv969m] {
        width: 100%;
        justify-content: center;
    }

    .ir-action-btn[b-wp6xsv969m] {
        flex: 1;
        height: 38px;
        padding: 0 0.75rem;
        font-size: 0.75rem;
    }

    .ir-btn-shortcut[b-wp6xsv969m] {
        display: none;
    }

    .ir-navigation[b-wp6xsv969m] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FORCE SHORT BADGE TEXT IN REVIEW GRID TYPE COLUMN
   ═══════════════════════════════════════════════════════════════ */
[b-wp6xsv969m] .review-grid .badge-text-full {
    display: none;
}

[b-wp6xsv969m] .review-grid .badge-text-mobile {
    display: inline;
}

/* ═══════════════════════════════════════════════════════════════
   FOCUSED ROW INDICATOR (review grid)
   ═══════════════════════════════════════════════════════════════ */
[b-wp6xsv969m] .review-grid .dxbl-grid-table tbody tr.dxbl-grid-focused-row > td,
[b-wp6xsv969m] .review-grid .dxbl-grid-table tbody tr.dxbl-grid-selected-row > td {
    background: rgba(96, 165, 250, 0.12) !important;
    border-bottom-color: rgba(96, 165, 250, 0.2) !important;
}

[b-wp6xsv969m] .review-grid .dxbl-grid-table tbody tr.dxbl-grid-focused-row > td:first-child,
[b-wp6xsv969m] .review-grid .dxbl-grid-table tbody tr.dxbl-grid-selected-row > td:first-child {
    box-shadow: inset 3px 0 0 #60a5fa;
}

/* ═══════════════════════════════════════════════════════════════
   CLICKABLE ROWS
   ═══════════════════════════════════════════════════════════════ */
[b-wp6xsv969m] .review-grid .dxbl-grid-table tbody tr {
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   CONFIRM ACTION POPUP
   ═══════════════════════════════════════════════════════════════ */
.ir-confirm-overlay[b-wp6xsv969m] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.2s ease;
}

.ir-confirm-popup[b-wp6xsv969m] {
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.95), rgba(51, 65, 85, 0.9));
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 20px;
    padding: 1.75rem 2rem;
    max-width: 380px;
    width: 90%;
    text-align: center;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), 0 12px 24px rgba(0, 0, 0, 0.2);
    animation: ir-confirmSlideIn-b-wp6xsv969m 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Icon circle — green for accept, red for reject */
.ir-confirm-icon[b-wp6xsv969m] {
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ir-confirm-icon .oi[b-wp6xsv969m] {
    font-size: 1.3rem;
}

.ir-confirm-icon-accept[b-wp6xsv969m] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.15));
}

.ir-confirm-icon-accept .oi[b-wp6xsv969m] {
    color: #4ade80;
}

.ir-confirm-icon-reject[b-wp6xsv969m] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.15));
}

.ir-confirm-icon-reject .oi[b-wp6xsv969m] {
    color: #ef4444;
}

.ir-confirm-title[b-wp6xsv969m] {
    font-size: 1.15rem;
    font-weight: 600;
    color: rgba(248, 250, 252, 0.95);
    margin: 0 0 0.75rem;
}

/* Item details summary */
.ir-confirm-details[b-wp6xsv969m] {
    text-align: left;
    margin-bottom: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(100, 116, 139, 0.15);
    border-radius: 10px;
}

.ir-confirm-row[b-wp6xsv969m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0;
}

.ir-confirm-row + .ir-confirm-row[b-wp6xsv969m] {
    border-top: 1px solid rgba(100, 116, 139, 0.08);
}

.ir-confirm-label[b-wp6xsv969m] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(148, 163, 184, 0.5);
}

.ir-confirm-value[b-wp6xsv969m] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #e2e8f0;
}

/* Bulk confirm — large count display */
.ir-confirm-bulk-count[b-wp6xsv969m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    margin-bottom: 0.75rem;
    padding: 0.6rem 0;
}

.ir-confirm-bulk-number[b-wp6xsv969m] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #f1f5f9;
    line-height: 1;
}

.ir-confirm-bulk-label[b-wp6xsv969m] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(148, 163, 184, 0.5);
}

.ir-confirm-message[b-wp6xsv969m] {
    font-size: 0.8rem;
    color: rgba(148, 163, 184, 0.75);
    margin: 0 0 1.25rem;
    line-height: 1.4;
}

.ir-confirm-actions[b-wp6xsv969m] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.ir-confirm-btn[b-wp6xsv969m] {
    padding: 0.6rem 1.4rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.ir-confirm-btn:disabled[b-wp6xsv969m] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ir-confirm-btn-cancel[b-wp6xsv969m] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.ir-confirm-btn-cancel:hover[b-wp6xsv969m] {
    background: rgba(255, 255, 255, 0.12);
}

.ir-confirm-btn-accept[b-wp6xsv969m] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.ir-confirm-btn-accept:hover:not(:disabled)[b-wp6xsv969m] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4);
}

.ir-confirm-btn-reject[b-wp6xsv969m] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.ir-confirm-btn-reject:hover:not(:disabled)[b-wp6xsv969m] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

@keyframes ir-confirmSlideIn-b-wp6xsv969m {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   COMMENT MERGE: two pills stacked vertically + editable textarea
   ═══════════════════════════════════════════════════════════════ */
.ir-comment-toggles[b-wp6xsv969m] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-left: auto;
    flex-shrink: 0;
}

.ir-comment-editor[b-wp6xsv969m] {
    width: 100%;
    min-height: 3rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid rgba(34, 211, 238, 0.3);
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.6);
    color: #22d3ee;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
}

.ir-comment-editor:focus[b-wp6xsv969m] {
    border-color: rgba(34, 211, 238, 0.5);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1);
}

/* ═══════════════════════════════════════════════════════════════
   REVIEW-TYPE TAG (pill in Import Item header)
   ═══════════════════════════════════════════════════════════════ */
.ir-review-type-tag[b-wp6xsv969m] {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.15rem 0.45rem;
    border-radius: 5px;
}

.ir-review-type-correction[b-wp6xsv969m] {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #f59e0b;
}

.ir-review-type-duplicate[b-wp6xsv969m] {
    background: rgba(100, 116, 139, 0.15);
    border: 1px solid rgba(100, 116, 139, 0.25);
    color: #94a3b8;
}

.ir-review-type-pendingauth[b-wp6xsv969m] {
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #818cf8;
}

/* Pending Auth banner in import item card */
.ir-pending-auth-banner[b-wp6xsv969m] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.5rem 0.65rem;
    margin: 0.35rem 0;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 6px;
    font-size: 0.75rem;
    color: #a5b4fc;
    line-height: 1.4;
}

.ir-pending-auth-banner .oi[b-wp6xsv969m] {
    margin-top: 0.1rem;
    flex-shrink: 0;
}

/* Fill all empty button */
.ir-fill-all-row[b-wp6xsv969m] {
    justify-content: center;
    padding-top: 0.25rem;
}

.ir-fill-all-btn[b-wp6xsv969m] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 6px;
    background: rgba(99, 102, 241, 0.1);
    color: #a5b4fc;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.ir-fill-all-btn:hover[b-wp6xsv969m] {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.5);
}

/* Enrich button */
.ir-btn-enrich[b-wp6xsv969m] {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.3);
    color: #a5b4fc;
}

.ir-btn-enrich:hover:not(:disabled)[b-wp6xsv969m] {
    background: rgba(99, 102, 241, 0.25);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}
/* /Components/Pages/Administrator/AdministratorLiveFeed.razor.rz.scp.css */
.admin-live-feed-page[b-qm6gq2ly5h] {
    display: flex;
    flex-direction: column;
}

[b-qm6gq2ly5h] .live-feed-client-picker {
    min-width: 220px;
    max-width: 280px;
    /* Match LocationScopePicker's trigger height (.location-scope-trigger-btn) so the scope bar's row
       height stays identical whether the location picker is showing next to this control (a client is
       selected) or not (the "All clients" default, screenshot 2) - otherwise the bar visibly resizes
       between those two states. */
    height: 38px;
}

@media (max-width: 767.98px) {
    [b-qm6gq2ly5h] .live-feed-client-picker {
        max-width: none;
        flex: 1 1 100%;
    }
}
/* /Components/Pages/Administrator/AdministratorOverview.razor.rz.scp.css */
.administrator-overview-page[b-bkqq5k43we] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    color: #e2e8f0;
}

.administrator-overview-page>h3[b-bkqq5k43we] {
    font-size: clamp(1.6rem, 2vw, 2rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 0.25rem;
    padding-left: 0.25rem;
}

/* === CARD HEADER === */
.administrator-overview-page .card-header[b-bkqq5k43we] {
    padding: 0.85rem 1.2rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    color: #f8fafc;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Page-specific header overrides removed - using global card-palette.css */

.administrator-overview-page .card-header .oi[b-bkqq5k43we] {
    color: rgba(148, 163, 184, 0.85);
}

.administrator-overview-page .card-header h5[b-bkqq5k43we] {
    font-size: 1rem;
    margin: 0;
    font-weight: 600;
}

.administrator-overview-page .card-header .dxbl-btn[b-bkqq5k43we] {
    margin-left: auto;
}

/* === ADD BUTTON === */
.administrator-overview-page[b-bkqq5k43we]  .dxbl-btn.dxbl-btn-success {
    border-radius: 6px;
    padding-inline: 1rem;
    height: 32px;
    font-weight: 500;
    font-size: 0.8rem;
    background: #10b981;
    border: 1px solid #10b981;
    color: #ffffff;
    transition: background-color 0.2s ease;
}

.administrator-overview-page[b-bkqq5k43we]  .dxbl-btn.dxbl-btn-success:hover {
    background: #059669;
    border-color: #059669;
}

.administrator-overview-page .card-body[b-bkqq5k43we] {
    padding: 0;
}

.administrator-overview-page .card+.card[b-bkqq5k43we] {
    margin-top: 1.5rem;
}



/* === ALERTS === */
.administrator-overview-page[b-bkqq5k43we]  .alert.alert-danger {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.2);
    border-radius: 8px;
    color: #fecaca;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .administrator-overview-page[b-bkqq5k43we] {
        gap: 1rem;
    }
}
/* /Components/Pages/Administrator/AdministratorPoliceReportDesigner.razor.rz.scp.css */
/* ── Header layout ─────────────────────────────────────── */

.designer-header[b-0aixdwfovv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.designer-header-title[b-0aixdwfovv] {
    display: flex;
    align-items: center;
    min-width: 0;
}

.designer-header-title h3[b-0aixdwfovv] {
    font-size: 1.25rem;
}

.designer-header-actions[b-0aixdwfovv] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ── Designer container ───────────────────────────────── */

.designer-container[b-0aixdwfovv] {
    height: calc(100dvh - 350px);
    height: calc(100vh - 350px);
    overflow: hidden;
}

@supports (height: 100dvh) {
    .designer-container[b-0aixdwfovv] {
        height: calc(100dvh - 350px);
    }
}

/* ── Small screens (< 768px) ─────────────────────────── */

@media (max-width: 767.98px) {
    .designer-header[b-0aixdwfovv] {
        flex-direction: column;
        align-items: stretch;
    }

    .designer-header-title[b-0aixdwfovv] {
        justify-content: center;
    }

    .designer-header-title h3[b-0aixdwfovv] {
        font-size: 1rem;
    }

    .designer-header-actions[b-0aixdwfovv] {
        justify-content: center;
    }

    .designer-container[b-0aixdwfovv] {
        height: calc(100dvh - 280px);
    }
}

/* ── XSmall screens (< 576px) ────────────────────────── */

@media (max-width: 575.98px) {
    .designer-container[b-0aixdwfovv] {
        height: calc(100dvh - 260px);
    }
}
/* /Components/Pages/Administrator/AdministratorSearchCars.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════
   AdministratorSearchCars — Forensic vehicle search
   Dense, utilitarian layout: every pixel earns its place
   ═══════════════════════════════════════════════════════════════════════════════ */

.sc-page[b-w7wz0f5hd4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 1rem 2rem;
    color: #e2e8f0;
    outline: none;
}

/* ═══════════════════════════════════════════════════════════════
   RESULT BADGE (in PageHeader)
   ═══════════════════════════════════════════════════════════════ */
.sc-result-badge[b-w7wz0f5hd4] {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    background: rgba(96, 165, 250, 0.15);
    border: 1px solid rgba(96, 165, 250, 0.25);
    color: #93c5fd;
    letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════════
   SEARCH BAR — single-line, keyboard-first
   ═══════════════════════════════════════════════════════════════ */
.sc-search-bar[b-w7wz0f5hd4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(51, 65, 85, 0.5));
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 10px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[b-w7wz0f5hd4] .sc-textbox {
    flex: 1 1 120px;
    min-width: 80px;
}

[b-w7wz0f5hd4] .sc-textbox.sc-plate-input {
    flex: 1 1 140px;
}

[b-w7wz0f5hd4] .sc-textbox .dxbl-text-edit {
    font-size: 0.78rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 6px;
    color: #e2e8f0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    height: 32px;
}

[b-w7wz0f5hd4] .sc-textbox .dxbl-text-edit:hover {
    border-color: rgba(100, 116, 139, 0.35);
}

[b-w7wz0f5hd4] .sc-textbox .dxbl-text-edit:focus-within {
    border-color: rgba(96, 165, 250, 0.5);
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.1);
}

[b-w7wz0f5hd4] .sc-textbox .dxbl-text-edit input {
    color: #e2e8f0;
    font-size: 0.78rem;
}

.sc-search-actions[b-w7wz0f5hd4] {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    flex-shrink: 0;
}

.sc-search-btn[b-w7wz0f5hd4] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.35), rgba(37, 99, 235, 0.4));
    border: 1px solid rgba(96, 165, 250, 0.3);
    color: #93c5fd;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 0.85rem;
}

.sc-search-btn:hover:not(:disabled)[b-w7wz0f5hd4] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.5), rgba(37, 99, 235, 0.55));
    border-color: rgba(96, 165, 250, 0.5);
    color: #bfdbfe;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.2);
}

.sc-search-btn:disabled[b-w7wz0f5hd4] {
    opacity: 0.35;
    cursor: not-allowed;
}

.sc-search-btn.sc-searching[b-w7wz0f5hd4] {
    background: rgba(59, 130, 246, 0.2);
}

.sc-clear-btn[b-w7wz0f5hd4] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(71, 85, 105, 0.3);
    border: 1px solid rgba(100, 116, 139, 0.2);
    color: rgba(148, 163, 184, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 0.7rem;
}

.sc-clear-btn:hover[b-w7wz0f5hd4] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(248, 113, 113, 0.3);
    color: #f87171;
}

/* ═══════════════════════════════════════════════════════════════
   INITIAL STATE — before first search
   ═══════════════════════════════════════════════════════════════ */
.sc-initial-state[b-w7wz0f5hd4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 4rem 2rem;
    color: rgba(148, 163, 184, 0.5);
    text-align: center;
}

.sc-initial-icon[b-w7wz0f5hd4] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: rgba(96, 165, 250, 0.4);
    margin-bottom: 0.25rem;
}

.sc-initial-title[b-w7wz0f5hd4] {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.6);
}

.sc-initial-hint[b-w7wz0f5hd4] {
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.45);
    max-width: 380px;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   SEARCHING STATE
   ═══════════════════════════════════════════════════════════════ */
.sc-searching-state[b-w7wz0f5hd4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem;
    color: rgba(148, 163, 184, 0.6);
    font-size: 0.8rem;
}

.sc-search-pulse[b-w7wz0f5hd4] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(96, 165, 250, 0.15);
    animation: sc-pulse-b-w7wz0f5hd4 1.2s ease-in-out infinite;
}

@keyframes sc-pulse-b-w7wz0f5hd4 {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.3); opacity: 0.2; }
}

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════ */
.sc-empty-state[b-w7wz0f5hd4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 2rem;
    color: rgba(148, 163, 184, 0.5);
    text-align: center;
    font-size: 0.85rem;
}

.sc-empty-state .oi[b-w7wz0f5hd4] {
    font-size: 2rem;
    opacity: 0.4;
}

/* ═══════════════════════════════════════════════════════════════
   MASTER-DETAIL SPLIT LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.sc-master-detail[b-w7wz0f5hd4] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    min-height: 0;
}

.sc-master-pane[b-w7wz0f5hd4] {
    flex: 1 1 45%;
    min-width: 0;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(51, 65, 85, 0.4));
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 10px;
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.sc-detail-pane[b-w7wz0f5hd4] {
    flex: 1.2 1 55%;
    min-width: 0;
    position: sticky;
    top: 0.5rem;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.3) transparent;
}

.sc-detail-pane[b-w7wz0f5hd4]::-webkit-scrollbar {
    width: 5px;
}

.sc-detail-pane[b-w7wz0f5hd4]::-webkit-scrollbar-track {
    background: transparent;
}

.sc-detail-pane[b-w7wz0f5hd4]::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.25);
    border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   GRID THEMING
   ═══════════════════════════════════════════════════════════════ */
[b-w7wz0f5hd4] .sc-grid {
    background: transparent;
    border: none;
    font-size: 0.76rem;
}

[b-w7wz0f5hd4] .sc-grid .dxbl-grid-header-row th {
    background: rgba(15, 23, 42, 0.35);
    color: rgba(148, 163, 184, 0.75);
    font-weight: 700;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid rgba(100, 116, 139, 0.15);
    padding: 0.4rem 0.5rem;
}

[b-w7wz0f5hd4] .sc-grid .dxbl-grid-table td {
    color: #cbd5e1;
    border-bottom: 1px solid rgba(100, 116, 139, 0.06);
    padding: 0.3rem 0.5rem;
    vertical-align: middle;
}

[b-w7wz0f5hd4] .sc-grid .dxbl-grid-table tr {
    cursor: pointer;
}

[b-w7wz0f5hd4] .sc-grid .dxbl-grid-table tr:hover td {
    background: rgba(96, 165, 250, 0.06);
}

[b-w7wz0f5hd4] .sc-grid .dxbl-grid-table tr.dxbl-focused td,
[b-w7wz0f5hd4] .sc-grid .dxbl-grid-table tr.dxbl-grid-focused-row td {
    background: rgba(96, 165, 250, 0.14);
    color: #f1f5f9;
}

/* Color dot in grid */
.sc-color-cell[b-w7wz0f5hd4] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.sc-color-dot[b-w7wz0f5hd4] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   DETAIL PLACEHOLDER
   ═══════════════════════════════════════════════════════════════ */
.sc-detail-placeholder[b-w7wz0f5hd4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 2rem;
    color: rgba(148, 163, 184, 0.4);
    text-align: center;
    background: rgba(30, 41, 59, 0.25);
    border: 1px dashed rgba(100, 116, 139, 0.15);
    border-radius: 10px;
    font-size: 0.8rem;
}

.sc-detail-placeholder .oi[b-w7wz0f5hd4] {
    font-size: 1.5rem;
    opacity: 0.35;
}

/* ═══════════════════════════════════════════════════════════════
   DETAIL PANEL
   ═══════════════════════════════════════════════════════════════ */
.sc-detail-panel[b-w7wz0f5hd4] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(51, 65, 85, 0.7));
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 10px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    animation: sc-slideIn-b-w7wz0f5hd4 0.25s ease;
}

@keyframes sc-slideIn-b-w7wz0f5hd4 {
    from { opacity: 0; transform: translateX(8px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Status badge */
.sc-status-badge[b-w7wz0f5hd4] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.sc-status-confirmed[b-w7wz0f5hd4] {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.25);
    color: #4ade80;
}

.sc-status-corrected[b-w7wz0f5hd4] {
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.25);
    color: #fbbf24;
}

/* ═══════════════════════════════════════════════════════════════
   DETAIL GRID — adaptive two-column (like TransactionDetails)
   Image left (up to 45%), info right. Collapses to single col
   when no image.
   ═══════════════════════════════════════════════════════════════ */
.sc-detail-grid[b-w7wz0f5hd4] {
    display: grid;
    grid-template-columns: minmax(180px, 45%) 1fr;
    min-height: 0;
}

.sc-detail-grid.sc-no-image[b-w7wz0f5hd4] {
    grid-template-columns: 1fr;
}

.sc-detail-grid.sc-no-image .sc-image-col[b-w7wz0f5hd4] {
    display: none;
}

/* ── Image column ── */
.sc-image-col[b-w7wz0f5hd4] {
    grid-row: 1 / -1;
    background: rgba(15, 23, 42, 0.3);
    border-right: 1px solid rgba(100, 116, 139, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 200px;
}

.sc-image-frame[b-w7wz0f5hd4] {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-vehicle-image[b-w7wz0f5hd4] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.sc-image-frame:hover .sc-vehicle-image[b-w7wz0f5hd4] {
    transform: scale(1.03);
}

.sc-image-overlay[b-w7wz0f5hd4] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 40%);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
}

.sc-image-frame:hover .sc-image-overlay[b-w7wz0f5hd4] {
    opacity: 1;
}

.sc-image-placeholder[b-w7wz0f5hd4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 120px;
    color: rgba(148, 163, 184, 0.25);
    font-size: 1.8rem;
}

/* ── Info column ── */
.sc-info-col[b-w7wz0f5hd4] {
    display: flex;
    flex-direction: column;
    padding: 0.65rem 0.85rem;
    gap: 0.55rem;
    min-width: 0;
}

/* Identity row: plate + navigate */
.sc-identity[b-w7wz0f5hd4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sc-intel-btn[b-w7wz0f5hd4] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 26px;
    padding: 0 0.55rem;
    border-radius: 6px;
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.18);
    color: rgba(147, 197, 253, 0.75);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-left: auto;
    white-space: nowrap;
}

.sc-intel-btn .oi[b-w7wz0f5hd4] {
    font-size: 0.65rem;
}

.sc-intel-btn:hover[b-w7wz0f5hd4] {
    background: rgba(96, 165, 250, 0.2);
    border-color: rgba(96, 165, 250, 0.35);
    color: #93c5fd;
}

.sc-intel-text[b-w7wz0f5hd4] {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Vehicle description */
.sc-vehicle-desc[b-w7wz0f5hd4] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.sc-vid-make[b-w7wz0f5hd4] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #f1f5f9;
}

.sc-vid-model[b-w7wz0f5hd4] {
    font-size: 0.88rem;
    font-weight: 500;
    color: rgba(203, 213, 225, 0.8);
}

.sc-vid-color[b-w7wz0f5hd4] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    color: rgba(148, 163, 184, 0.7);
    padding-left: 0.4rem;
    border-left: 1px solid rgba(100, 116, 139, 0.15);
}

/* KPIs — horizontal row */
.sc-kpis[b-w7wz0f5hd4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.45rem 0;
    border-top: 1px solid rgba(100, 116, 139, 0.1);
    border-bottom: 1px solid rgba(100, 116, 139, 0.1);
    min-height: 36px;
}

.sc-kpi[b-w7wz0f5hd4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.02rem;
}

.sc-kpi-value[b-w7wz0f5hd4] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1.15;
}

.sc-kpi-value.sc-danger[b-w7wz0f5hd4] {
    color: #f87171;
}

.sc-kpi-value.sc-success[b-w7wz0f5hd4] {
    color: #4ade80;
}

.sc-kpi-label[b-w7wz0f5hd4] {
    font-size: 0.52rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(148, 163, 184, 0.45);
}

.sc-kpi-loading[b-w7wz0f5hd4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: rgba(148, 163, 184, 0.4);
}

/* Meta row */
.sc-meta[b-w7wz0f5hd4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
}

/* ═══════════════════════════════════════════════════════════════
   LOCATIONS — inline in info column
   ═══════════════════════════════════════════════════════════════ */
.sc-locations-inline[b-w7wz0f5hd4] {
    display: flex;
    flex-direction: column;
}

.sc-section-title[b-w7wz0f5hd4] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.6rem;
    font-weight: 700;
    color: rgba(148, 163, 184, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.15rem;
}

.sc-section-title .oi[b-w7wz0f5hd4] {
    font-size: 0.6rem;
    color: rgba(96, 165, 250, 0.45);
}

.sc-location-row[b-w7wz0f5hd4] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.35rem;
    border-radius: 5px;
    transition: background 0.15s ease;
}

.sc-location-row:hover[b-w7wz0f5hd4] {
    background: rgba(96, 165, 250, 0.05);
}

.sc-location-name[b-w7wz0f5hd4] {
    font-size: 0.74rem;
    font-weight: 600;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-location-stats[b-w7wz0f5hd4] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.sc-loc-stat[b-w7wz0f5hd4] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.75);
}

.sc-loc-stat .oi[b-w7wz0f5hd4] {
    font-size: 0.55rem;
}

.sc-loc-alarm[b-w7wz0f5hd4] {
    color: #fbbf24;
}

.sc-location-dates[b-w7wz0f5hd4] {
    font-size: 0.6rem;
    color: rgba(148, 163, 184, 0.4);
    white-space: nowrap;
}

.sc-card-loading[b-w7wz0f5hd4] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    color: rgba(148, 163, 184, 0.4);
}

.sc-card-empty[b-w7wz0f5hd4] {
    font-size: 0.72rem;
    color: rgba(148, 163, 184, 0.4);
    text-align: center;
    padding: 0.75rem;
}

.sc-meta-tag[b-w7wz0f5hd4] {
    font-size: 0.56rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    background: rgba(100, 116, 139, 0.12);
    color: rgba(148, 163, 184, 0.55);
}

.sc-meta-date[b-w7wz0f5hd4] {
    font-size: 0.58rem;
    color: rgba(148, 163, 184, 0.35);
    margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════════
   SPINNER
   ═══════════════════════════════════════════════════════════════ */
.sc-spin-icon[b-w7wz0f5hd4] {
    animation: sc-spin-b-w7wz0f5hd4 1s linear infinite;
    font-size: 1rem;
}

@keyframes sc-spin-b-w7wz0f5hd4 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════
   LIGHTBOX
   ═══════════════════════════════════════════════════════════════ */
.sc-lightbox-overlay[b-w7wz0f5hd4] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: sc-lb-fadeIn-b-w7wz0f5hd4 0.2s ease;
    cursor: pointer;
}

@keyframes sc-lb-fadeIn-b-w7wz0f5hd4 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.sc-lightbox-content[b-w7wz0f5hd4] {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    cursor: default;
    animation: sc-lb-zoomIn-b-w7wz0f5hd4 0.2s ease;
}

@keyframes sc-lb-zoomIn-b-w7wz0f5hd4 {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.sc-lightbox-image[b-w7wz0f5hd4] {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

.sc-lightbox-close[b-w7wz0f5hd4] {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid rgba(100, 116, 139, 0.3);
    color: #e2e8f0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    font-size: 0.7rem;
}

.sc-lightbox-close:hover[b-w7wz0f5hd4] {
    background: rgba(239, 68, 68, 0.8);
    border-color: rgba(248, 113, 113, 0.5);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1199.98px) {
    .sc-master-pane[b-w7wz0f5hd4] {
        flex: 1 1 40%;
    }

    .sc-detail-pane[b-w7wz0f5hd4] {
        flex: 1.5 1 60%;
    }
}

@media (max-width: 991.98px) {
    .sc-master-detail[b-w7wz0f5hd4] {
        flex-direction: column;
    }

    .sc-master-pane[b-w7wz0f5hd4],
    .sc-detail-pane[b-w7wz0f5hd4] {
        flex: none;
        width: 100%;
    }

    .sc-detail-pane[b-w7wz0f5hd4] {
        position: static;
        max-height: none;
    }
}

@media (max-width: 767.98px) {
    .sc-search-bar[b-w7wz0f5hd4] {
        flex-wrap: wrap;
    }

    [b-w7wz0f5hd4] .sc-textbox {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
    }

    .sc-search-actions[b-w7wz0f5hd4] {
        margin-left: auto;
    }

    .sc-detail-grid[b-w7wz0f5hd4] {
        grid-template-columns: 1fr;
    }

    .sc-image-col[b-w7wz0f5hd4] {
        grid-row: auto;
        max-height: 200px;
        min-height: 120px;
        border-right: none;
        border-bottom: 1px solid rgba(100, 116, 139, 0.1);
    }

    .sc-identity[b-w7wz0f5hd4] {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .sc-intel-btn[b-w7wz0f5hd4] {
        margin-left: 0;
    }
}

@media (max-width: 575.98px) {
    .sc-page[b-w7wz0f5hd4] {
        padding: 0 0.5rem 1.5rem;
    }

    [b-w7wz0f5hd4] .sc-textbox {
        flex: 1 1 100%;
    }

    .sc-image-col[b-w7wz0f5hd4] {
        max-height: 160px;
        min-height: 80px;
    }

    .sc-info-col[b-w7wz0f5hd4] {
        padding: 0.5rem 0.6rem;
    }

    .sc-vehicle-desc[b-w7wz0f5hd4] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }

    .sc-vid-color[b-w7wz0f5hd4] {
        padding-left: 0;
        border-left: none;
    }

    .sc-kpis[b-w7wz0f5hd4] {
        gap: 0.5rem;
        justify-content: space-around;
    }

    .sc-kpi[b-w7wz0f5hd4] {
        flex: 1 1 auto;
        min-width: 0;
    }

    .sc-location-row[b-w7wz0f5hd4] {
        grid-template-columns: 1fr auto;
    }

    .sc-location-dates[b-w7wz0f5hd4] {
        font-size: 0.55rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sc-initial-state[b-w7wz0f5hd4] {
        padding: 2.5rem 1rem;
    }

    .sc-detail-placeholder[b-w7wz0f5hd4] {
        padding: 2rem 1rem;
    }

    .sc-lightbox-image[b-w7wz0f5hd4] {
        max-width: 95vw;
        max-height: 85vh;
    }

    .sc-lightbox-content[b-w7wz0f5hd4] {
        max-width: 95vw;
    }
}
/* /Components/Pages/Administrator/AdministratorSearchResults.razor.rz.scp.css */
.search-results-page[b-ivf4ai2cgt] {
    padding: 1rem 0;
    max-width: min(800px, 100%);
}

.search-loading[b-ivf4ai2cgt] {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.search-empty[b-ivf4ai2cgt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem;
    color: rgba(148, 163, 184, 0.6);
}

.search-empty-icon[b-ivf4ai2cgt] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.search-category[b-ivf4ai2cgt] {
    margin-bottom: 1.5rem;
}

.search-category-title[b-ivf4ai2cgt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.8);
    margin-bottom: 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.search-count[b-ivf4ai2cgt] {
    font-weight: 400;
    font-size: 0.8rem;
    color: rgba(148, 163, 184, 0.5);
}

.search-cards[b-ivf4ai2cgt] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.search-card[b-ivf4ai2cgt] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.5), rgba(51, 65, 85, 0.3));
    border: 1px solid rgba(148, 163, 184, 0.1);
    cursor: pointer;
    transition: all 0.15s ease;
}

.search-card:hover[b-ivf4ai2cgt] {
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.08));
    border-color: rgba(59, 130, 246, 0.25);
    transform: translateX(2px);
}

.search-card-icon[b-ivf4ai2cgt] {
    font-size: 1rem;
    color: rgba(148, 163, 184, 0.6);
    min-width: 20px;
    text-align: center;
}

.search-card-text[b-ivf4ai2cgt] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.search-card-primary[b-ivf4ai2cgt] {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(226, 232, 240, 0.95);
}

.search-card-subtitle[b-ivf4ai2cgt] {
    font-size: 0.78rem;
    color: rgba(148, 163, 184, 0.55);
}

.search-card-arrow[b-ivf4ai2cgt] {
    font-size: 0.65rem;
    color: rgba(148, 163, 184, 0.3);
}

.search-plate-link[b-ivf4ai2cgt] {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.search-plate-link a[b-ivf4ai2cgt] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(96, 165, 250, 0.9);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.15s ease;
}

.search-plate-link a:hover[b-ivf4ai2cgt] {
    color: rgba(147, 197, 253, 1);
}

@media (max-width: 767.98px) {
    .search-results-page[b-ivf4ai2cgt] {
        padding: 0.5rem 0;
    }

    .search-card[b-ivf4ai2cgt] {
        padding: 0.55rem 0.7rem;
    }
}

@media (max-width: 575.98px) {
    .search-results-page[b-ivf4ai2cgt] {
        padding: 0.25rem 0;
    }

    .search-empty[b-ivf4ai2cgt] {
        padding: 2rem 1rem;
    }

    .search-empty-icon[b-ivf4ai2cgt] {
        font-size: 2rem;
    }

    .search-category[b-ivf4ai2cgt] {
        margin-bottom: 1rem;
    }

    .search-category-title[b-ivf4ai2cgt] {
        font-size: 0.85rem;
        gap: 0.35rem;
        margin-bottom: 0.4rem;
        padding-bottom: 0.3rem;
    }

    .search-card[b-ivf4ai2cgt] {
        gap: 0.5rem;
        padding: 0.5rem 0.6rem;
        border-radius: 8px;
    }

    .search-card-primary[b-ivf4ai2cgt] {
        font-size: 0.82rem;
    }

    .search-card-subtitle[b-ivf4ai2cgt] {
        font-size: 0.72rem;
    }

    .search-card-icon[b-ivf4ai2cgt] {
        font-size: 0.9rem;
        min-width: 18px;
    }

    .search-card-arrow[b-ivf4ai2cgt] {
        font-size: 0.6rem;
    }

    .search-plate-link[b-ivf4ai2cgt] {
        margin-top: 1rem;
        padding-top: 0.75rem;
    }

    .search-plate-link a[b-ivf4ai2cgt] {
        font-size: 0.82rem;
    }
}
/* /Components/Pages/Administrator/OperationsDashboard.razor.rz.scp.css */
.ops-page[b-zzuajxklis] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 0 2rem;
    width: 100%;
    min-width: 0;
    color: #e2e8f0;
}

/* Client Filter Bar */
.ops-filter-bar[b-zzuajxklis] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
}

.ops-filter-label[b-zzuajxklis] {
    font-size: 0.85rem;
    color: rgba(248, 250, 252, 0.6);
    font-weight: 500;
    white-space: nowrap;
}

[b-zzuajxklis] .ops-client-combo {
    min-width: 200px;
    max-width: 280px;
}

[b-zzuajxklis] .ops-client-combo .dxbl-input-editor {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: 8px;
}

[b-zzuajxklis] .ops-client-combo .dxbl-input-editor:hover {
    border-color: rgba(59, 130, 246, 0.4);
}

[b-zzuajxklis] .ops-client-combo .dxbl-input-editor:focus-within {
    border-color: rgba(59, 130, 246, 0.6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* ── KPI Summary Bar ── */
.ops-kpi-row[b-zzuajxklis] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.ops-kpi-card[b-zzuajxklis] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-top: 2px solid rgba(239, 68, 68, 0.4);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ops-kpi-card:nth-child(2)[b-zzuajxklis] {
    border-top-color: rgba(59, 130, 246, 0.4);
}

.ops-kpi-card:nth-child(3)[b-zzuajxklis] {
    border-top-color: rgba(251, 146, 60, 0.4);
}

.ops-kpi-card:nth-child(4)[b-zzuajxklis] {
    border-top-color: rgba(34, 197, 94, 0.4);
}

.ops-kpi-card:nth-child(5)[b-zzuajxklis] {
    border-top-color: rgba(99, 102, 241, 0.4);
}

.ops-kpi-icon[b-zzuajxklis] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.ops-kpi-icon-detections[b-zzuajxklis] {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.ops-kpi-icon-driveoff[b-zzuajxklis] {
    background: rgba(251, 146, 60, 0.15);
    color: #fb923c;
}

.ops-kpi-icon-prevention[b-zzuajxklis] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.ops-kpi-icon-pending[b-zzuajxklis] {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
}

.ops-kpi-card-pending:hover[b-zzuajxklis] {
    border-top-color: rgba(99, 102, 241, 0.7);
    box-shadow: 0 -2px 12px rgba(99, 102, 241, 0.15);
}

/* Pulse when pending count > 0 */
.ops-kpi-card-pending.has-pending[b-zzuajxklis] {
    animation: pending-pulse-b-zzuajxklis 3s ease-in-out infinite;
}

@keyframes pending-pulse-b-zzuajxklis {
    0%, 100% { border-top-color: rgba(99, 102, 241, 0.4); }
    50% { border-top-color: rgba(99, 102, 241, 0.8); }
}

.ops-kpi-body[b-zzuajxklis] {
    min-width: 0;
}

.ops-kpi-value[b-zzuajxklis] {
    font-size: 1.8rem;
    font-weight: 700;
    color: rgba(248, 250, 252, 0.95);
    line-height: 1.1;
}

.ops-kpi-unit[b-zzuajxklis] {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(248, 250, 252, 0.6);
    margin-left: 2px;
}

.ops-kpi-placeholder[b-zzuajxklis] {
    color: rgba(148, 163, 184, 0.4);
}

.ops-kpi-label[b-zzuajxklis] {
    font-size: 0.78rem;
    color: rgba(148, 163, 184, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 4px;
}

.ops-kpi-compare[b-zzuajxklis] {
    font-size: 0.72rem;
    color: rgba(148, 163, 184, 0.55);
    margin-top: 2px;
}

/* ── Middle Row ── */
.ops-middle-row[b-zzuajxklis] {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 16px;
}

.ops-section[b-zzuajxklis] {
    padding: 16px;
}

.ops-section-title[b-zzuajxklis] {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 14px;
    padding-left: 10px;
    border-left: 3px solid rgba(59, 130, 246, 0.5);
}

.ops-section-header[b-zzuajxklis] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ops-section-header .ops-section-title[b-zzuajxklis] {
    margin-bottom: 0;
}

.ops-no-data[b-zzuajxklis] {
    padding: 40px;
    text-align: center;
    color: rgba(148, 163, 184, 0.5);
    font-size: 0.9rem;
}

/* ── Station Activity Grid ── */
.ops-grid[b-zzuajxklis] {
    background: transparent;
}

.ops-badge[b-zzuajxklis] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
}

.ops-badge-red[b-zzuajxklis] {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.ops-badge-red-hot[b-zzuajxklis] {
    background: rgba(239, 68, 68, 0.25);
    color: #fca5a5;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.2);
}

.ops-badge-green[b-zzuajxklis] {
    background: rgba(34, 197, 94, 0.1);
    color: rgba(34, 197, 94, 0.6);
}

.ops-health-critical[b-zzuajxklis] {
    color: #ef4444;
    font-weight: 700;
}

.ops-health-warning[b-zzuajxklis] {
    color: #fb923c;
    font-weight: 600;
}

.ops-avg[b-zzuajxklis] {
    color: rgba(148, 163, 184, 0.55);
    font-size: 0.8rem;
}

.ops-na[b-zzuajxklis] {
    color: rgba(148, 163, 184, 0.4);
    font-size: 0.82rem;
}

/* ── Touch feedback ── */
.ops-kpi-card-pending:active[b-zzuajxklis] {
    transform: scale(0.98);
}

/* ── Responsive ── */
@media (max-width: 1200px) {
    .ops-kpi-row[b-zzuajxklis] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .ops-middle-row[b-zzuajxklis] {
        grid-template-columns: 1fr;
    }

    .ops-kpi-row[b-zzuajxklis] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .ops-kpi-row[b-zzuajxklis] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .ops-kpi-card[b-zzuajxklis] {
        padding: 14px 16px;
        gap: 10px;
    }

    .ops-kpi-icon[b-zzuajxklis] {
        width: 38px;
        height: 38px;
        font-size: 1.05rem;
    }

    .ops-kpi-value[b-zzuajxklis] {
        font-size: 1.5rem;
    }

    .ops-kpi-label[b-zzuajxklis] {
        font-size: 0.72rem;
    }

    .ops-section[b-zzuajxklis] {
        padding: 14px 12px;
    }

    .ops-section-header[b-zzuajxklis] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .ops-no-data[b-zzuajxklis] {
        padding: 24px 16px;
    }
}

@media (max-width: 575.98px) {
    .ops-page[b-zzuajxklis] {
        gap: 0.75rem;
        overflow-x: hidden;
    }

    .ops-filter-bar[b-zzuajxklis] {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 10px 12px;
    }

    [b-zzuajxklis] .ops-client-combo {
        min-width: unset;
        max-width: unset;
        width: 100%;
    }

    .ops-kpi-row[b-zzuajxklis] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    /* Last KPI card spans full width when odd count leaves it orphaned */
    .ops-kpi-card:last-child:nth-child(odd)[b-zzuajxklis] {
        grid-column: 1 / -1;
    }

    .ops-kpi-card[b-zzuajxklis] {
        padding: 12px 12px;
        gap: 8px;
    }

    .ops-kpi-icon[b-zzuajxklis] {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        font-size: 0.95rem;
    }

    .ops-kpi-value[b-zzuajxklis] {
        font-size: 1.3rem;
    }

    .ops-kpi-label[b-zzuajxklis] {
        font-size: 0.75rem;
        margin-top: 2px;
    }

    .ops-kpi-compare[b-zzuajxklis] {
        font-size: 0.75rem;
    }

    /* Prevent chart and alarm sections from causing horizontal scroll */
    .ops-section[b-zzuajxklis] {
        padding: 12px 10px;
        overflow: hidden;
        min-width: 0;
    }

    .ops-section-full[b-zzuajxklis] {
        overflow: hidden;
        min-width: 0;
    }

    .ops-middle-row[b-zzuajxklis] {
        min-width: 0;
        overflow: hidden;
    }

    .ops-section-title[b-zzuajxklis] {
        font-size: 0.76rem;
        margin-bottom: 10px;
    }

    /* Constrain chart to container */
    [b-zzuajxklis] .dxbl-chart {
        max-width: 100% !important;
        overflow: hidden;
    }
}
/* /Components/Pages/Client/AddManager.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════
   AddManager - Modern Glass Form Page
   ═══════════════════════════════════════════════════════════════════════════════ */

.add-manager-page[b-fm7sh0haz7] {
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
}

/* Centered form container - consistent with AddPayment pattern */
.form-container-centered[b-fm7sh0haz7] {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FORM SECTION HEADERS
   ═══════════════════════════════════════════════════════════════════════════════ */

[b-fm7sh0haz7] .form-section-header {
    margin-top: 1.25rem;
    margin-bottom: 0.25rem;
    padding-bottom: 0;
}

[b-fm7sh0haz7] .form-section-header:first-child {
    margin-top: 0;
}

[b-fm7sh0haz7] .form-section-header .dxbl-fl-cpt {
    display: none;
}

.section-title[b-fm7sh0haz7] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.2);
    margin-bottom: 0.25rem;
}

.section-title span:first-child[b-fm7sh0haz7] {
    color: rgba(59, 130, 246, 0.85);
    font-size: 0.9rem;
}

.section-title span:last-child[b-fm7sh0haz7] {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(203, 213, 225, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FORM INPUT STYLING
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Login input row - username + domain */
.login-input-row[b-fm7sh0haz7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.login-textbox[b-fm7sh0haz7] {
    flex: 1;
    max-width: 280px;
}

.upn-domain-label[b-fm7sh0haz7] {
    color: rgba(148, 163, 184, 0.9);
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    padding: 0.5rem 0;
}

/* Email field width */
.email-textbox[b-fm7sh0haz7] {
    max-width: 460px;
}

/* Help text styling */
.form-help-text[b-fm7sh0haz7] {
    color: rgba(148, 163, 184, 0.65);
    font-size: 0.8rem;
    margin-top: 0.35rem;
    line-height: 1.4;
}

/* Validation error text */
.validation-error-text[b-fm7sh0haz7] {
    color: #f87171;
    font-size: 0.8rem;
    margin-top: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.validation-error-text[b-fm7sh0haz7]::before {
    content: "\e09a"; /* warning icon */
    font-family: "open-iconic";
    font-size: 0.7rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FORM LAYOUT IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Consistent form item spacing */
[b-fm7sh0haz7] .modern-edit-form .dxbl-form-layout-item {
    margin-bottom: 0.5rem;
}

/* Make sure all form inputs have consistent sizing */
[b-fm7sh0haz7] .modern-edit-form .dxbl-combo-box,
[b-fm7sh0haz7] .modern-edit-form .dxbl-text-edit,
[b-fm7sh0haz7] .modern-edit-form .dxbl-spin-edit,
[b-fm7sh0haz7] .modern-edit-form .dxbl-date-edit,
[b-fm7sh0haz7] .modern-edit-form .dxbl-memo {
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FORM ACTIONS (Buttons)
   ═══════════════════════════════════════════════════════════════════════════════ */

.form-actions[b-fm7sh0haz7] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(100, 116, 139, 0.15);
}

.btn-action[b-fm7sh0haz7] {
    min-width: 120px;
}

/* Spinning animation for save button */
.spinning[b-fm7sh0haz7] {
    animation: spin-b-fm7sh0haz7 1s linear infinite;
}

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

/* ═══════════════════════════════════════════════════════════════════════════════
   TOAST NOTIFICATION
   ═══════════════════════════════════════════════════════════════════════════════ */

.toast-container[b-fm7sh0haz7] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1100;
    animation: slideInUp-b-fm7sh0haz7 0.3s ease-out;
}

.modern-toast[b-fm7sh0haz7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(5, 150, 105, 0.95));
    border: 1px solid rgba(110, 231, 183, 0.3);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.25);
    backdrop-filter: blur(12px);
    color: #ffffff;
    font-weight: 500;
    font-size: 0.9rem;
}

.toast-icon[b-fm7sh0haz7] {
    font-size: 1.1rem;
}

.toast-message[b-fm7sh0haz7] {
    flex: 1;
}

.toast-close[b-fm7sh0haz7] {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 6px;
    padding: 0.35rem;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.85);
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-close:hover[b-fm7sh0haz7] {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.toast-close .oi[b-fm7sh0haz7] {
    font-size: 0.75rem;
}

@keyframes slideInUp-b-fm7sh0haz7 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SUCCESS POPUP - Modern Glass Design
   ═══════════════════════════════════════════════════════════════════════════════ */

[b-fm7sh0haz7] .modern-success-popup {
    --popup-radius: 16px;
}

[b-fm7sh0haz7] .modern-success-popup .dxbl-popup-content {
    border-radius: var(--popup-radius) !important;
    overflow: hidden;
}

[b-fm7sh0haz7] .modern-popup-header-success {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    border-bottom: none !important;
    padding: 1rem 1.5rem !important;
}

[b-fm7sh0haz7] .modern-popup-header-success .dxbl-popup-header-text {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
}

[b-fm7sh0haz7] .modern-popup-body {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98)) !important;
    padding: 0 !important;
}

[b-fm7sh0haz7] .modern-popup-footer {
    background: rgba(30, 41, 59, 0.95) !important;
    border-top: 1px solid rgba(100, 116, 139, 0.2) !important;
    padding: 1rem 1.5rem !important;
}

.success-popup-content[b-fm7sh0haz7] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Success message banner */
.success-message-banner[b-fm7sh0haz7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 10px;
    color: #6ee7b7;
    font-weight: 600;
    font-size: 0.95rem;
}

.success-message-banner .oi[b-fm7sh0haz7] {
    font-size: 1.25rem;
}

/* Credentials card */
.credentials-card[b-fm7sh0haz7] {
    background: rgba(51, 65, 85, 0.4);
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 12px;
    overflow: hidden;
}

.credentials-header[b-fm7sh0haz7] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.1));
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    font-weight: 600;
    font-size: 0.9rem;
}

.credentials-header .oi[b-fm7sh0haz7] {
    font-size: 1rem;
}

.credentials-body[b-fm7sh0haz7] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Credential field */
.credential-field[b-fm7sh0haz7] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.credential-field label[b-fm7sh0haz7] {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(148, 163, 184, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.credential-input-group[b-fm7sh0haz7] {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(100, 116, 139, 0.3);
}

.credential-input[b-fm7sh0haz7] {
    flex: 1;
    padding: 0.625rem 0.875rem;
    background: transparent;
    border: none;
    color: #e2e8f0;
    font-family: 'Courier New', Consolas, monospace;
    font-weight: 600;
    font-size: 0.9rem;
    outline: none;
}

.credential-input.username-field[b-fm7sh0haz7] {
    color: #60a5fa;
}

.credential-input.password-field[b-fm7sh0haz7] {
    color: #fbbf24;
}

.credential-btn[b-fm7sh0haz7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    background: rgba(100, 116, 139, 0.15);
    border: none;
    border-left: 1px solid rgba(100, 116, 139, 0.2);
    color: rgba(148, 163, 184, 0.85);
    cursor: pointer;
    transition: all 0.15s ease;
}

.credential-btn:hover[b-fm7sh0haz7] {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.credential-btn.copy-btn:hover[b-fm7sh0haz7] {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

.credential-btn .oi[b-fm7sh0haz7] {
    font-size: 0.85rem;
}

/* Notice cards */
.notice-card[b-fm7sh0haz7] {
    display: flex;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    align-items: flex-start;
}

.notice-card.warning[b-fm7sh0haz7] {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.25);
}

.notice-card.warning .notice-icon[b-fm7sh0haz7] {
    color: #fbbf24;
}

.notice-card.success[b-fm7sh0haz7] {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.notice-card.success .notice-icon[b-fm7sh0haz7] {
    color: #6ee7b7;
}

.notice-card.danger[b-fm7sh0haz7] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.25);
}

.notice-card.danger .notice-icon[b-fm7sh0haz7] {
    color: #f87171;
}

.notice-icon[b-fm7sh0haz7] {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.notice-content[b-fm7sh0haz7] {
    flex: 1;
}

.notice-content strong[b-fm7sh0haz7] {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    color: #e2e8f0;
}

.notice-content p[b-fm7sh0haz7] {
    margin: 0;
    font-size: 0.8rem;
    color: rgba(203, 213, 225, 0.85);
    line-height: 1.4;
}

.notice-content .email-recipient[b-fm7sh0haz7] {
    margin-top: 0.25rem;
    opacity: 0.8;
}

/* Popup footer */
.popup-footer-actions[b-fm7sh0haz7] {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

[b-fm7sh0haz7] .btn-confirm {
    min-width: 140px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE - Tablet and below
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 991.98px) {
    .form-container-centered[b-fm7sh0haz7] {
        max-width: 100%;
        padding: 0 0.75rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE - Mobile (Small screens)
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    .add-manager-page[b-fm7sh0haz7] {
        padding: 0.5rem 0;
    }

    .form-container-centered[b-fm7sh0haz7] {
        padding: 0 0.5rem;
    }

    /* Stack login input on mobile */
    .login-input-row[b-fm7sh0haz7] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }

    .login-textbox[b-fm7sh0haz7] {
        max-width: 100%;
        width: 100%;
    }

    .email-textbox[b-fm7sh0haz7] {
        max-width: 100%;
    }

    .upn-domain-label[b-fm7sh0haz7] {
        font-size: 0.8rem;
        padding: 0;
    }

    /* Form actions stack on mobile */
    .form-actions[b-fm7sh0haz7] {
        flex-direction: column;
    }

    .btn-action[b-fm7sh0haz7] {
        width: 100%;
    }

    /* Toast adjustments */
    .toast-container[b-fm7sh0haz7] {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
    }

    .modern-toast[b-fm7sh0haz7] {
        width: 100%;
    }

    /* Popup adjustments */
    .success-popup-content[b-fm7sh0haz7] {
        padding: 1rem;
    }

    .credentials-body[b-fm7sh0haz7] {
        padding: 0.875rem;
    }

    .credential-input[b-fm7sh0haz7] {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }

    .credential-btn[b-fm7sh0haz7] {
        width: 36px;
        min-width: 36px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE - XSmall Mobile (Phone)
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
    .form-container-centered[b-fm7sh0haz7] {
        padding: 0 0.25rem;
    }

    /* Ensure form inputs are readable and prevent iOS zoom */
    [b-fm7sh0haz7] .dxbl-text-edit input {
        font-size: 16px !important;
    }

    /* Popup mobile fixes */
    [b-fm7sh0haz7] .modern-success-popup .dxbl-popup-content {
        margin: 0.5rem;
    }

    .success-message-banner[b-fm7sh0haz7] {
        font-size: 0.875rem;
        padding: 0.75rem;
    }

    .notice-card[b-fm7sh0haz7] {
        padding: 0.75rem;
    }

    .notice-content strong[b-fm7sh0haz7] {
        font-size: 0.8rem;
    }

    .notice-content p[b-fm7sh0haz7] {
        font-size: 0.75rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SUBTLE BACKGROUND PATTERN
   ═══════════════════════════════════════════════════════════════════════════════ */

.add-manager-page[b-fm7sh0haz7]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    opacity: 0.03;
    background-image:
        radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
    background-size: 100% 100%;
    pointer-events: none;
}
/* /Components/Pages/Client/ClientDashboard.razor.rz.scp.css */
/* Page-specific styles - common styles in wwwroot/css/dashboard.css */

.data-warning[b-cx492g0y54] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: #facc15;
    background: rgba(234, 179, 8, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
}

/* Source Badges (compact inline style for this dashboard) */
.source-badges[b-cx492g0y54] {
    display: flex;
    gap: 0.75rem;
    margin-left: auto;
}

.source-badge[b-cx492g0y54] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.source-badge.tablet[b-cx492g0y54] {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.source-badge.website[b-cx492g0y54] {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.source-badge .percent[b-cx492g0y54] {
    opacity: 0.7;
    font-size: 0.75rem;
}

/* Top Offenders Grid Styles */
.offenders-container[b-cx492g0y54] {
    padding: 1rem;
}

.offenders-grid[b-cx492g0y54] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.75rem;
}

.offender-card[b-cx492g0y54] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 3px solid rgba(239, 68, 68, 0.45);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.offender-card:hover[b-cx492g0y54] {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.25);
    border-left-color: rgba(59, 130, 246, 0.6);
    transform: translateY(-1px);
}

.offender-top[b-cx492g0y54] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.offender-amount[b-cx492g0y54] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fb923c;
    white-space: nowrap;
}

.offender-chips[b-cx492g0y54] {
    display: flex;
    gap: 0.5rem;
}

.offender-chip[b-cx492g0y54] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    font-size: 0.74rem;
    line-height: 1;
    white-space: nowrap;
}

.offender-chip .oi[b-cx492g0y54] {
    font-size: 0.62rem;
}

.chip-label[b-cx492g0y54] {
    opacity: 0.75;
}

.chip-value[b-cx492g0y54] {
    font-weight: 700;
    font-size: 0.8rem;
}

.chip-alarms[b-cx492g0y54] {
    color: #facc15;
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.25);
}

.chip-driveoffs[b-cx492g0y54] {
    color: #f87171;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE - Mobile (Small screens)
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .source-badges[b-cx492g0y54] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .source-badge[b-cx492g0y54] {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    .offenders-grid[b-cx492g0y54] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .offender-card[b-cx492g0y54] {
        padding: 0.6rem 0.65rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE - XSmall Mobile (Phone)
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .source-badges[b-cx492g0y54] {
        flex-direction: column;
        width: 100%;
        margin-left: 0;
        margin-top: 0.5rem;
    }

    .source-badge[b-cx492g0y54] {
        justify-content: center;
    }

    .offenders-grid[b-cx492g0y54] {
        grid-template-columns: 1fr;
    }

    .offender-chip[b-cx492g0y54] {
        font-size: 0.8rem;
    }

    .offender-amount[b-cx492g0y54] {
        font-size: 0.95rem;
    }
}

/* ── Live activity strip (today / 7-day) ── */
.live-section[b-cx492g0y54] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.live-kpi-row[b-cx492g0y54] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.live-kpi-card[b-cx492g0y54] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-top: 2px solid rgba(239, 68, 68, 0.4);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.live-kpi-card:nth-child(2)[b-cx492g0y54] {
    border-top-color: rgba(59, 130, 246, 0.4);
}

.live-kpi-card:nth-child(3)[b-cx492g0y54] {
    border-top-color: rgba(251, 146, 60, 0.4);
}

.live-kpi-card:nth-child(4)[b-cx492g0y54] {
    border-top-color: rgba(99, 102, 241, 0.4);
}

.live-kpi-icon[b-cx492g0y54] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.live-kpi-icon-alarms[b-cx492g0y54] {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.live-kpi-icon-detections[b-cx492g0y54] {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.live-kpi-icon-driveoff[b-cx492g0y54] {
    background: rgba(251, 146, 60, 0.15);
    color: #fb923c;
}

.live-kpi-icon-pending[b-cx492g0y54] {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
}

.live-kpi-card-pending[b-cx492g0y54] {
    cursor: pointer;
}

.live-kpi-card-pending:hover[b-cx492g0y54] {
    border-top-color: rgba(99, 102, 241, 0.7);
    box-shadow: 0 -2px 12px rgba(99, 102, 241, 0.15);
}

.live-kpi-card-pending:active[b-cx492g0y54] {
    transform: scale(0.98);
}

.live-kpi-card-pending.has-pending[b-cx492g0y54] {
    animation: live-pending-pulse-b-cx492g0y54 3s ease-in-out infinite;
}

@keyframes live-pending-pulse-b-cx492g0y54 {
    0%, 100% { border-top-color: rgba(99, 102, 241, 0.4); }
    50% { border-top-color: rgba(99, 102, 241, 0.8); }
}

.live-kpi-body[b-cx492g0y54] {
    min-width: 0;
}

.live-kpi-value[b-cx492g0y54] {
    font-size: 1.8rem;
    font-weight: 700;
    color: rgba(248, 250, 252, 0.95);
    line-height: 1.1;
}

.live-kpi-placeholder[b-cx492g0y54] {
    color: rgba(148, 163, 184, 0.4);
}

.live-kpi-label[b-cx492g0y54] {
    font-size: 0.78rem;
    color: rgba(148, 163, 184, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 4px;
}

.live-kpi-compare[b-cx492g0y54] {
    font-size: 0.72rem;
    color: rgba(148, 163, 184, 0.55);
    margin-top: 2px;
}

.live-middle-row[b-cx492g0y54] {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 16px;
}

.live-panel[b-cx492g0y54] {
    padding: 16px;
    min-width: 0;
}

.live-panel-title[b-cx492g0y54] {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 14px;
    padding-left: 10px;
    border-left: 3px solid rgba(59, 130, 246, 0.5);
}

.live-no-data[b-cx492g0y54] {
    padding: 40px;
    text-align: center;
    color: rgba(148, 163, 184, 0.5);
    font-size: 0.9rem;
}

/* ── Short-history notice (new clients without monthly aggregates yet) ── */
.short-history-notice[b-cx492g0y54] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 1rem;
    font-size: 0.88rem;
    color: #93c5fd;
    border-left: 3px solid rgba(59, 130, 246, 0.6);
}

.short-history-notice .oi[b-cx492g0y54] {
    flex-shrink: 0;
}

/* ── Live strip responsive ── */
@media (max-width: 991.98px) {
    .live-middle-row[b-cx492g0y54] {
        grid-template-columns: 1fr;
    }

    .live-kpi-row[b-cx492g0y54] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .live-kpi-row[b-cx492g0y54] {
        gap: 10px;
    }

    .live-kpi-card[b-cx492g0y54] {
        padding: 14px 16px;
        gap: 10px;
    }

    .live-kpi-icon[b-cx492g0y54] {
        width: 38px;
        height: 38px;
        font-size: 1.05rem;
    }

    .live-kpi-value[b-cx492g0y54] {
        font-size: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .live-kpi-row[b-cx492g0y54] {
        gap: 8px;
    }

    .live-kpi-card[b-cx492g0y54] {
        padding: 12px;
        gap: 8px;
    }

    .live-kpi-icon[b-cx492g0y54] {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        font-size: 0.95rem;
    }

    .live-kpi-value[b-cx492g0y54] {
        font-size: 1.3rem;
    }

    .live-panel[b-cx492g0y54] {
        padding: 12px 10px;
        overflow: hidden;
    }

    .live-middle-row[b-cx492g0y54] {
        min-width: 0;
        overflow: hidden;
    }
}
/* /Components/Pages/Client/ClientHome.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Client Home - Search-first landing page with KPI hero bar
   ═══════════════════════════════════════════════════════════════════════════ */
.home-page[b-1w0u3p1p8i] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 0 2rem;
    max-width: 1140px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    color: rgba(226, 232, 240, 0.95);
    animation: home-fade-in 0.4s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   KPI Hero Bar - Dissolved Container for Home Page
   Strip the wrapper background so cards float directly on the page surface.
   Individual cards keep their own glass-morphism treatment.
   ═══════════════════════════════════════════════════════════════════════════ */
[b-1w0u3p1p8i] .kpi-hero-bar {
    background: none;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    padding: 0.5rem 1.5rem;
    margin-bottom: 0;
}

[b-1w0u3p1p8i] .kpi-cards-row {
    gap: 0.75rem;
}

/* ── Welcome / Brand Card ── */
[b-1w0u3p1p8i] .welcome-card {
    flex: 1.3;
    min-width: 190px;
    padding: 0.875rem 1.125rem;
    gap: 0.3rem;
    border-radius: 12px;
}

[b-1w0u3p1p8i] .welcome-logo {
    width: 52px;
    height: 52px;
    max-width: 52px;
    max-height: 52px;
}

[b-1w0u3p1p8i] .welcome-company-name {
    font-size: 1.05rem;
}

[b-1w0u3p1p8i] .welcome-subtitle {
    font-size: 0.62rem;
}

[b-1w0u3p1p8i] .welcome-period {
    font-size: 0.62rem;
    margin-top: 0.125rem;
}

/* ── KPI Metric Cards ── */
[b-1w0u3p1p8i] .kpi-hero-card {
    min-width: 0;
    padding: 0.75rem 0.875rem;
    gap: 0.25rem;
    border-radius: 10px;
}

[b-1w0u3p1p8i] .kpi-hero-card .kpi-card-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    font-size: 0.9rem;
}

[b-1w0u3p1p8i] .kpi-hero-card .kpi-card-label {
    font-size: 0.6rem;
    letter-spacing: 0.04em;
}

[b-1w0u3p1p8i] .kpi-hero-card .kpi-card-value {
    font-size: 1.35rem;
    line-height: 1.1;
}

[b-1w0u3p1p8i] .kpi-hero-card .kpi-card-sublabel {
    font-size: 0.62rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   KPI Zone — invisible placeholder whose height is held by skeleton cards
   inside KpiHeroBar. visibility:hidden keeps layout space; opacity handles
   the fade. When kpiReady fires, both flip and the bar appears in-place.
   ═══════════════════════════════════════════════════════════════════════════ */
.kpi-zone[b-1w0u3p1p8i] {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.kpi-zone--visible[b-1w0u3p1p8i] {
    visibility: visible;
    opacity: 1;
}

@@keyframes home-fade-in {
    from[b-1w0u3p1p8i] { opacity: 0; }
    to[b-1w0u3p1p8i] { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Hero Search Section
   ═══════════════════════════════════════════════════════════════════════════ */
.home-hero[b-1w0u3p1p8i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem 0.5rem;
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid rgba(100, 116, 139, 0.15);
}

.home-subtitle[b-1w0u3p1p8i] {
    font-size: 0.92rem;
    color: rgba(148, 163, 184, 0.65);
    margin-bottom: 1rem;
    text-align: center;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Search Bar
   ═══════════════════════════════════════════════════════════════════════════ */
.home-search-wrap[b-1w0u3p1p8i] {
    position: relative;
    width: 100%;
    max-width: 620px;
}

.home-search-shell[b-1w0u3p1p8i] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.7), rgba(51, 65, 85, 0.5));
    border: 1px solid rgba(148, 163, 184, 0.2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.home-search-shell:hover[b-1w0u3p1p8i] {
    border-color: rgba(148, 163, 184, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.home-search-shell.focused[b-1w0u3p1p8i] {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25),
                0 0 0 4px rgba(59, 130, 246, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.home-search-icon[b-1w0u3p1p8i] {
    font-size: 1.15rem;
    color: rgba(148, 163, 184, 0.4);
    transition: color 0.3s ease;
    flex-shrink: 0;
}

.home-search-shell.focused .home-search-icon[b-1w0u3p1p8i] {
    color: rgba(59, 130, 246, 0.6);
}

.home-search-input[b-1w0u3p1p8i] {
    flex: 1;
    height: 46px;
    border: none;
    background: transparent;
    color: rgba(226, 232, 240, 0.95);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    outline: none;
}

.home-search-input[b-1w0u3p1p8i]::placeholder {
    color: rgba(148, 163, 184, 0.4);
    font-weight: 400;
}

/* ── Loading Spinner ── */
.home-spinner[b-1w0u3p1p8i] {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-top-color: rgba(59, 130, 246, 0.7);
    border-radius: 50%;
    animation: home-spin 0.8s linear infinite;
    flex-shrink: 0;
}

@@keyframes home-spin {
    to[b-1w0u3p1p8i] { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Search Results Dropdown
   ═══════════════════════════════════════════════════════════════════════════ */
.home-results[b-1w0u3p1p8i] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 420px;
    overflow-y: auto;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.97), rgba(51, 65, 85, 0.95));
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    z-index: 100;
    padding: 0.4rem 0;
    animation: home-dropdown-in 0.15s ease;
}

@@keyframes home-dropdown-in {
    from[b-1w0u3p1p8i] { opacity: 0; transform: translateY(-8px); }
    to[b-1w0u3p1p8i] { opacity: 1; transform: translateY(0); }
}

.home-results-category[b-1w0u3p1p8i] {
    padding: 0.55rem 1rem 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(148, 163, 184, 0.55);
}

.home-result-item[b-1w0u3p1p8i] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: background 0.12s ease;
}

.home-result-item:hover[b-1w0u3p1p8i],
.home-result-item.selected[b-1w0u3p1p8i] {
    background: rgba(59, 130, 246, 0.12);
}

.home-result-item.selected[b-1w0u3p1p8i] {
    background: rgba(59, 130, 246, 0.18);
}

.home-result-icon[b-1w0u3p1p8i] {
    font-size: 0.9rem;
    color: rgba(148, 163, 184, 0.6);
    min-width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.home-result-text[b-1w0u3p1p8i] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.home-result-primary[b-1w0u3p1p8i] {
    font-size: 0.92rem;
    font-weight: 500;
    color: rgba(226, 232, 240, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-result-sub[b-1w0u3p1p8i] {
    font-size: 0.78rem;
    color: rgba(148, 163, 184, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-result-plate[b-1w0u3p1p8i] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 1rem;
    margin-top: 0.2rem;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    cursor: pointer;
    font-size: 0.88rem;
    color: rgba(96, 165, 250, 0.9);
    transition: background 0.12s ease;
}

.home-result-plate:hover[b-1w0u3p1p8i],
.home-result-plate.selected[b-1w0u3p1p8i] {
    background: rgba(59, 130, 246, 0.12);
}

.home-no-results[b-1w0u3p1p8i] {
    padding: 1.5rem 1rem;
    text-align: center;
    color: rgba(148, 163, 184, 0.5);
    font-size: 0.88rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tip Text
   ═══════════════════════════════════════════════════════════════════════════ */
.home-tip[b-1w0u3p1p8i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.4);
}

.home-tip-icon[b-1w0u3p1p8i] {
    font-size: 0.72rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Quick Access Section
   ═══════════════════════════════════════════════════════════════════════════ */
.home-links[b-1w0u3p1p8i] {
    padding: 0 1.5rem;
    margin-top: 0.25rem;
    width: 100%;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    animation: home-fade-up 0.5s ease 0.1s both;
}

@@keyframes home-fade-up {
    from[b-1w0u3p1p8i] { opacity: 0; transform: translateY(12px); }
    to[b-1w0u3p1p8i] { opacity: 1; transform: translateY(0); }
}

.home-section-title[b-1w0u3p1p8i] {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 1rem;
    padding-left: 10px;
    border-left: 3px solid rgba(59, 130, 246, 0.4);
}

.home-links-grid[b-1w0u3p1p8i] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Quick Link Cards
   ═══════════════════════════════════════════════════════════════════════════ */
.home-link-card[b-1w0u3p1p8i] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-top: 2px solid var(--accent);
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    min-width: 0;
    overflow: hidden;
}

.home-link-card:hover[b-1w0u3p1p8i] {
    border-color: var(--accent);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15),
                0 0 0 1px var(--accent-bg);
    transform: translateY(-2px);
}

.home-link-icon[b-1w0u3p1p8i] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--accent-bg);
    color: var(--accent);
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.home-link-card:hover .home-link-icon[b-1w0u3p1p8i] {
    transform: scale(1.08);
}

.home-link-body[b-1w0u3p1p8i] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.home-link-title[b-1w0u3p1p8i] {
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(248, 250, 252, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-link-desc[b-1w0u3p1p8i] {
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-link-arrow[b-1w0u3p1p8i] {
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.3);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.home-link-card:hover .home-link-arrow[b-1w0u3p1p8i] {
    color: var(--accent);
    transform: translateX(3px);
}

/* Touch feedback for mobile */
.home-link-card:active[b-1w0u3p1p8i] {
    transform: scale(0.98);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive - Tablet (< 992px)
   KPI cards wrap into a 2+3 or 3+3 layout
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    .home-links-grid[b-1w0u3p1p8i] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-hero[b-1w0u3p1p8i] {
        padding: 0.5rem 1.5rem 0.5rem;
    }

    [b-1w0u3p1p8i] .kpi-hero-bar {
        padding: 0.5rem 1rem;
    }

    [b-1w0u3p1p8i] .kpi-cards-row {
        flex-wrap: wrap;
    }

    [b-1w0u3p1p8i] .welcome-card {
        min-width: 100%;
        order: -1;
    }

    [b-1w0u3p1p8i] .kpi-hero-card {
        min-width: calc(50% - 0.5rem);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive - Mobile (< 768px)
   Single column stacked layout
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .home-page[b-1w0u3p1p8i] {
        gap: 0.5rem;
    }

    .home-hero[b-1w0u3p1p8i] {
        padding: 0.5rem 1rem 0.5rem;
    }

    .home-links[b-1w0u3p1p8i] {
        padding: 0 1rem;
    }

    .home-links-grid[b-1w0u3p1p8i] {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    [b-1w0u3p1p8i] .kpi-hero-bar {
        padding: 0.25rem 0.75rem;
    }

    [b-1w0u3p1p8i] .kpi-cards-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    [b-1w0u3p1p8i] .kpi-hero-card {
        min-width: 100%;
    }

    .home-subtitle[b-1w0u3p1p8i] {
        font-size: 0.88rem;
    }

    .home-search-input[b-1w0u3p1p8i] {
        height: 44px;
        font-size: 1rem;
    }

    .home-search-shell[b-1w0u3p1p8i] {
        border-radius: 14px;
    }

    .home-results[b-1w0u3p1p8i] {
        max-height: 320px;
        border-radius: 12px;
    }

    .home-result-item[b-1w0u3p1p8i] {
        padding: 0.75rem 1rem;
    }

    .home-result-plate[b-1w0u3p1p8i] {
        padding: 0.75rem 1rem;
    }

    .home-link-title[b-1w0u3p1p8i] {
        white-space: normal;
    }

    .home-link-desc[b-1w0u3p1p8i] {
        white-space: normal;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive - XSmall / Phone (< 576px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .home-hero[b-1w0u3p1p8i] {
        padding: 0.25rem 0.75rem 0.25rem;
    }

    .home-links[b-1w0u3p1p8i] {
        padding: 0 0.75rem;
    }

    .home-subtitle[b-1w0u3p1p8i] {
        font-size: 0.82rem;
        margin-bottom: 0.75rem;
    }

    .home-search-input[b-1w0u3p1p8i] {
        height: 42px;
        font-size: 0.95rem;
    }

    .home-search-shell[b-1w0u3p1p8i] {
        padding: 0.4rem 0.75rem;
        border-radius: 12px;
    }

    .home-link-card[b-1w0u3p1p8i] {
        padding: 14px 14px;
        gap: 12px;
    }

    .home-link-icon[b-1w0u3p1p8i] {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        font-size: 1rem;
    }

    .home-link-title[b-1w0u3p1p8i] {
        font-size: 0.85rem;
    }

    .home-link-desc[b-1w0u3p1p8i] {
        font-size: 0.75rem;
    }

    .home-link-arrow[b-1w0u3p1p8i] {
        display: none;
    }

    .home-section-title[b-1w0u3p1p8i] {
        font-size: 0.78rem;
        margin-bottom: 0.75rem;
    }

    .home-tip[b-1w0u3p1p8i] {
        font-size: 0.72rem;
        margin-top: 0.75rem;
    }

    .home-results[b-1w0u3p1p8i] {
        max-height: 280px;
    }

    [b-1w0u3p1p8i] .kpi-hero-bar {
        padding: 0.25rem 0.5rem;
    }
}
/* /Components/Pages/Client/ClientOverview.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════
   ClientOverview - Company Command Center Dashboard
   Industrial Command Center aesthetic with company-wide success metrics
   ═══════════════════════════════════════════════════════════════════════════════ */

.client-overview-page[b-usrkzh8fpi] {
    padding: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ENHANCED TABS - Glassmorphism Tab Container
   ═══════════════════════════════════════════════════════════════════════════════ */
[b-usrkzh8fpi] .custom-tabs .dxbs-tabs {
    background: transparent !important;
}

[b-usrkzh8fpi] .custom-tabs .nav-tabs {
    border-bottom: 1px solid rgba(100, 116, 139, 0.25) !important;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(51, 65, 85, 0.4));
    border-radius: 12px 12px 0 0;
    padding: 0.5rem 0.5rem 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[b-usrkzh8fpi] .custom-tabs .nav-item .nav-link {
    color: rgba(203, 213, 225, 0.8) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 0.75rem 1.25rem !important;
    margin-bottom: -1px;
    transition: all 0.25s ease;
}

[b-usrkzh8fpi] .custom-tabs .nav-item .nav-link:hover {
    color: #f8fafc !important;
    background: rgba(100, 116, 139, 0.2) !important;
}

[b-usrkzh8fpi] .custom-tabs .nav-item .nav-link.active {
    color: #60a5fa !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.1)) !important;
    border-bottom: 2px solid #60a5fa !important;
}

.tab-icon[b-usrkzh8fpi] {
    margin-right: 0.5rem;
    font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   STATION NAME COLUMN - Left align
   The global modern-grid.css centers the 3rd column of every .modern-glass-grid
   (meant for status/edit/details action buttons), but in the locations grid the
   3rd visible column is "Nazwa stacji". Keep the station name left-aligned.
   ═══════════════════════════════════════════════════════════════════════════════ */
[b-usrkzh8fpi] .station-grid .dxbl-grid-table td:nth-child(3),
[b-usrkzh8fpi] .station-grid .dxbl-grid-table th:nth-child(3) {
    text-align: left !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GLASS CARD - Manager Card with Glassmorphism
   ═══════════════════════════════════════════════════════════════════════════════ */
.card.shadow[b-usrkzh8fpi] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6)) !important;
    border: 1px solid rgba(100, 116, 139, 0.25) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BUTTON STYLING
   ═══════════════════════════════════════════════════════════════════════════════ */
.btn-add-manager[b-usrkzh8fpi] {
    font-weight: 500;
}

.button-separator[b-usrkzh8fpi] {
    width: 1px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.3);
    margin: 0 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SEARCH BOX STYLING
   ═══════════════════════════════════════════════════════════════════════════════ */
[b-usrkzh8fpi] .dxbl-grid-search-box {
    width: 100% !important;
}

[b-usrkzh8fpi] .dxbl-grid-search-input {
    width: 100% !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    padding: 0.5rem 1rem !important;
    border-radius: 6px !important;
}

[b-usrkzh8fpi] .dxbl-grid-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

[b-usrkzh8fpi] .dxbl-grid-search-input:focus {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    outline: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE - Tablet and below
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .client-overview-page[b-usrkzh8fpi] {
        padding: 0;
    }

    [b-usrkzh8fpi] .custom-tabs .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    [b-usrkzh8fpi] .custom-tabs .nav-item .nav-link {
        white-space: nowrap;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE - Mobile (Small screens)
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .card.shadow[b-usrkzh8fpi] {
        border-radius: 12px !important;
    }

    [b-usrkzh8fpi] .custom-tabs .nav-tabs {
        padding: 0.25rem 0.25rem 0;
        border-radius: 10px 10px 0 0;
    }

    [b-usrkzh8fpi] .custom-tabs .nav-item .nav-link {
        padding: 0.625rem 0.875rem !important;
        font-size: 0.9rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE - XSmall Mobile (Phone)
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .card.shadow[b-usrkzh8fpi] {
        border-radius: 10px !important;
    }

    [b-usrkzh8fpi] .custom-tabs .nav-item .nav-link {
        padding: 0.5rem 0.65rem !important;
        font-size: 0.8rem;
    }

    .tab-icon[b-usrkzh8fpi] {
        font-size: 0.8rem;
        margin-right: 0.35rem;
    }
}
/* /Components/Pages/Client/ClientReports.razor.rz.scp.css */
.reports-page[b-b71s76nqfc] {
    padding: 0 0 24px 0;
}

/* ---- Global period bar: the ONLY shared parameter on this page ---- */

.params-bar[b-b71s76nqfc] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    padding: 14px 16px;
    margin-bottom: 6px;
    align-items: center;
    justify-content: space-between;
}

.params-bar-head[b-b71s76nqfc] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 240px;
    min-width: 0;
}

.params-bar-icon[b-b71s76nqfc] {
    font-size: 1.2rem;
    color: #60a5fa;
}

.params-bar-text h3[b-b71s76nqfc] {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
    color: rgba(248, 250, 252, 0.95);
}

.params-bar-text p[b-b71s76nqfc] {
    font-size: 0.8rem;
    color: rgba(148, 163, 184, 0.9);
    margin: 2px 0 0 0;
}

.params-bar-fields[b-b71s76nqfc] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    flex: 0 1 400px;
    min-width: 0;
}

.params-bar-fields .param[b-b71s76nqfc] {
    flex: 1 1 150px;
}

.suite-title[b-b71s76nqfc] {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 18px 0 12px 0;
    color: rgba(248, 250, 252, 0.95);
}

.reports-grid[b-b71s76nqfc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    align-items: stretch;
}

.report-card[b-b71s76nqfc] {
    display: flex;
    flex-direction: column;
    padding: 18px;
}

.report-card-head[b-b71s76nqfc] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.report-card-head h3[b-b71s76nqfc] {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: rgba(248, 250, 252, 0.95);
}

.report-card-icon[b-b71s76nqfc] {
    font-size: 1.1rem;
    color: #60a5fa;
}

/* ---- Scope chips: every card declares exactly what feeds it ---- */

.report-card-meta[b-b71s76nqfc] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.scope-chip[b-b71s76nqfc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(148, 163, 184, 0.1);
    color: rgba(203, 213, 225, 0.95);
    white-space: nowrap;
}

.scope-chip .oi[b-b71s76nqfc] {
    font-size: 0.68rem;
}

.scope-network[b-b71s76nqfc] {
    border-color: rgba(96, 165, 250, 0.4);
    background: rgba(96, 165, 250, 0.12);
    color: #93c5fd;
}

.scope-station[b-b71s76nqfc] {
    border-color: rgba(52, 211, 153, 0.4);
    background: rgba(52, 211, 153, 0.1);
    color: #6ee7b7;
}

.scope-vehicle[b-b71s76nqfc] {
    border-color: rgba(167, 139, 250, 0.4);
    background: rgba(167, 139, 250, 0.12);
    color: #c4b5fd;
}

.report-card-desc[b-b71s76nqfc] {
    font-size: 0.85rem;
    color: rgba(148, 163, 184, 0.95);
    margin: 0 0 14px 0;
}

/* ---- In-card parameters (only on the cards that actually use them) ---- */

.report-card-params[b-b71s76nqfc] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    margin-bottom: 14px;
}

/* When a card has its own parameters, they (not the buttons) anchor the bottom
   cluster — keeps select + actions visually glued together. */
.report-card-params ~ .report-card-actions[b-b71s76nqfc] {
    margin-top: 0;
}

.param[b-b71s76nqfc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 120px;
}

.param-wide[b-b71s76nqfc] {
    flex: 1 1 100%;
}

.param label[b-b71s76nqfc] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(148, 163, 184, 0.85);
}

.param-select[b-b71s76nqfc] {
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.6);
    color: rgba(248, 250, 252, 0.95);
    font-size: 0.9rem;
    width: 100%;
}

.param-select:disabled[b-b71s76nqfc] {
    opacity: 0.45;
}

.param-select option[b-b71s76nqfc] {
    background: #0f172a;
    color: #f8fafc;
}

.report-card-error[b-b71s76nqfc] {
    font-size: 0.82rem;
    color: #f87171;
    margin-bottom: 10px;
}

.report-card-actions[b-b71s76nqfc] {
    display: flex;
    gap: 10px;
    margin-top: auto;
    flex-wrap: wrap;
}

.report-card-actions[b-b71s76nqfc]  .dxbl-btn {
    min-height: 44px;
}

.collecting-notice[b-b71s76nqfc] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    margin-bottom: 8px;
}

.collecting-notice h3[b-b71s76nqfc] {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: rgba(248, 250, 252, 0.95);
}

.collecting-notice p[b-b71s76nqfc] {
    font-size: 0.85rem;
    color: rgba(148, 163, 184, 0.95);
    margin: 0;
}

.collecting-icon[b-b71s76nqfc] {
    font-size: 1.3rem;
    color: #facc15;
    margin-top: 2px;
}

/* Admin-only: client picker shown when the hub is opened from the menu
   (no clientId in the route). */
.client-pick[b-b71s76nqfc] {
    padding: 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.client-pick-head[b-b71s76nqfc] {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
}

.client-pick-head .oi[b-b71s76nqfc] {
    font-size: 1.35rem;
    color: rgba(255, 255, 255, .55);
    margin-top: .15rem;
}

.client-pick-head h3[b-b71s76nqfc] {
    margin: 0 0 .2rem;
    font-size: 1.02rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
}

.client-pick-head p[b-b71s76nqfc] {
    margin: 0;
    font-size: .85rem;
    color: rgba(255, 255, 255, .6);
}

.client-pick-controls[b-b71s76nqfc] {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.client-pick-combo[b-b71s76nqfc] {
    flex: 1 1 260px;
    min-width: 0;
}

@media (max-width: 575.98px) {
    .client-pick-controls[b-b71s76nqfc] {
        flex-direction: column;
        align-items: stretch;
    }

    .client-pick-controls[b-b71s76nqfc]  .dxbl-btn {
        width: 100%;
    }
}

/* Phones (XSmall < 576px): single-column cards, stacked period bar,
   full-width primary + secondary buttons per the design-system rule. */
@media (max-width: 575.98px) {
    .reports-grid[b-b71s76nqfc] {
        grid-template-columns: 1fr;
    }

    .params-bar[b-b71s76nqfc] {
        flex-direction: column;
        align-items: stretch;
    }

    .params-bar-fields[b-b71s76nqfc] {
        flex: 1 1 auto;
    }

    .report-card-actions[b-b71s76nqfc] {
        flex-direction: column;
    }

    .report-card-actions[b-b71s76nqfc]  .dxbl-btn {
        width: 100%;
    }
}
/* /Components/Pages/Client/LocationDashboard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════
   LocationDashboard - Page-specific styles
   Common styles in wwwroot/css/dashboard.css
   ═══════════════════════════════════════════════════════════════════════════════ */

.back-btn[b-2j8ejowrz3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
}

.back-btn:hover[b-2j8ejowrz3] {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.location-info[b-2j8ejowrz3] {
    display: flex;
    flex-direction: column;
}

.location-id[b-2j8ejowrz3] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE - Tablet and below
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .location-dashboard-page[b-2j8ejowrz3] {
        padding: 1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE - Mobile (Small screens)
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .location-dashboard-page[b-2j8ejowrz3] {
        padding: 0.75rem;
    }

    .back-btn[b-2j8ejowrz3] {
        width: 36px;
        height: 36px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE - XSmall Mobile (Phone)
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .location-dashboard-page[b-2j8ejowrz3] {
        padding: 0.5rem;
    }

    .location-id[b-2j8ejowrz3] {
        font-size: 0.7rem;
    }
}
/* /Components/Pages/Client/LocationDetails.razor.rz.scp.css */
/* ==========================================================================
   LocationDetails Page - Glassmorphism Design System
   ========================================================================== */

/* Page Layout */
.location-details-page[b-p5euwkxpsx] {
    padding: 0;
}

/* ==========================================================================
   KPI Hero Bar - Reusing global styles from kpi-hero-bar.css
   ========================================================================== */

/* Location Info Card - Custom styling for first card */
.location-info-card[b-p5euwkxpsx] {
    flex: 2;
    min-width: 220px;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(51, 65, 85, 0.85));
    border-left: 3px solid #60a5fa;
}

.location-header[b-p5euwkxpsx] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.location-icon[b-p5euwkxpsx] {
    font-size: 1.75rem;
    color: #60a5fa;
    text-shadow: 0 0 20px rgba(96, 165, 250, 0.4);
}

.location-details-info[b-p5euwkxpsx] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.location-name[b-p5euwkxpsx] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.location-address[b-p5euwkxpsx] {
    font-size: 0.8rem;
    color: rgba(148, 163, 184, 0.9);
}

.status-badge[b-p5euwkxpsx] {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.status-badge.inactive[b-p5euwkxpsx] {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

/* Stats Period Indicator */
.stats-period-indicator[b-p5euwkxpsx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(100, 116, 139, 0.2);
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(148, 163, 184, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    animation: stats-fade-in-b-p5euwkxpsx 0.3s ease-out;
}

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

.stats-period-indicator .oi[b-p5euwkxpsx] {
    font-size: 0.65rem;
    opacity: 0.7;
}

/* ==========================================================================
   Section Cards - Glassmorphism
   ========================================================================== */
.section-card[b-p5euwkxpsx] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(51, 65, 85, 0.7));
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 14px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.section-card.section-warning[b-p5euwkxpsx] {
    border-color: rgba(251, 191, 36, 0.35);
    box-shadow:
        0 4px 20px rgba(251, 191, 36, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.section-header[b-p5euwkxpsx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.2);
}

.section-title[b-p5euwkxpsx] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.section-icon[b-p5euwkxpsx] {
    font-size: 1.1rem;
    opacity: 0.9;
}

.section-icon.success[b-p5euwkxpsx] {
    color: #4ade80;
    filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.4));
}

.section-icon.warning[b-p5euwkxpsx] {
    color: #fbbf24;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.4));
}

.section-icon.primary[b-p5euwkxpsx] {
    color: #60a5fa;
    filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.4));
}

.section-icon.info[b-p5euwkxpsx] {
    color: #22d3ee;
    filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.4));
}

.section-body[b-p5euwkxpsx] {
    padding: 1rem 1.25rem;
}

/* Pending Badge */
.pending-badge[b-p5euwkxpsx] {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Cashier Count Badge */
.cashier-count-badge[b-p5euwkxpsx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 0.5rem;
    background: rgba(6, 182, 212, 0.2);
    color: #22d3ee;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ==========================================================================
   Location Profile Row - Manager + Map side by side
   ========================================================================== */
.location-profile-row[b-p5euwkxpsx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Manager Card Expanded */
.manager-card-expanded[b-p5euwkxpsx] {
    min-height: 200px;
}

.manager-details[b-p5euwkxpsx] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.manager-label-row[b-p5euwkxpsx] {
    font-size: 0.85rem;
}

.manager-name-link[b-p5euwkxpsx] {
    margin-bottom: 0.5rem;
}

.manager-actions[b-p5euwkxpsx] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

/* Subtle danger button - only shows danger color on hover */
.manager-actions[b-p5euwkxpsx]  .btn-danger-subtle:hover {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #f87171 !important;
}

.no-manager-alert[b-p5euwkxpsx] {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background: rgba(59, 130, 246, 0.15);
    border-radius: 8px;
    color: rgba(148, 163, 184, 0.9);
    font-size: 0.85rem;
}

.no-manager-alert.inactive[b-p5euwkxpsx] {
    background: rgba(100, 116, 139, 0.15);
}

/* Map Card Compact */
.map-card-compact[b-p5euwkxpsx] {
    min-height: 200px;
}

.map-card-compact .section-body[b-p5euwkxpsx] {
    position: relative;
}

/* Vignette overlay for smoother map integration */
.map-card-compact .section-body[b-p5euwkxpsx]::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 0 0 12px 12px;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3);
}

.map-card-compact iframe[b-p5euwkxpsx] {
    height: 200px;
    border-radius: 0 0 12px 12px;
}

/* ==========================================================================
   Cashiers Section
   ========================================================================== */
.cashiers-section[b-p5euwkxpsx] {
    margin-top: 1.5rem;
}

/* ==========================================================================
   Map Container
   ========================================================================== */
.map-container[b-p5euwkxpsx] {
    height: 300px;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}

/* ==========================================================================
   Brand Logo Styles
   ========================================================================== */
.brand-logo-container[b-p5euwkxpsx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 6px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.brand-logo[b-p5euwkxpsx] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(1.05);
}

/* ==========================================================================
   Transactions Row - Side by Side Layout
   ========================================================================== */
.transactions-row[b-p5euwkxpsx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Base transaction card */
.transaction-card[b-p5euwkxpsx] {
    border-radius: 14px;
    overflow: hidden;
}

/* Pending card - amber accent */
.transaction-card.pending[b-p5euwkxpsx] {
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-left: 3px solid rgba(251, 191, 36, 0.7);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        -4px 0 20px rgba(251, 191, 36, 0.1);
}

/* Authorized card - green accent */
.transaction-card.authorized[b-p5euwkxpsx] {
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-left: 3px solid rgba(34, 197, 94, 0.7);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        -4px 0 20px rgba(34, 197, 94, 0.1);
}

/* Transaction count badges */
.transaction-count-badge[b-p5euwkxpsx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.transaction-count-badge.pending[b-p5euwkxpsx] {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.transaction-count-badge.authorized[b-p5euwkxpsx] {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

/* Empty state for balanced layout */
.transaction-card-empty[b-p5euwkxpsx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 2rem;
    background: linear-gradient(135deg,
        rgba(100, 116, 139, 0.04) 0%,
        rgba(71, 85, 105, 0.02) 50%,
        transparent 100%);
}

.empty-state-mini[b-p5euwkxpsx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgba(148, 163, 184, 0.7);
}

.empty-state-mini .oi[b-p5euwkxpsx] {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    display: block;
    opacity: 0.5;
}

.empty-state-mini div[b-p5euwkxpsx] {
    font-size: 0.85rem;
    max-width: 180px;
    line-height: 1.4;
}

/* ==========================================================================
   All Clear Celebration State
   ========================================================================== */
.all-clear-state[b-p5euwkxpsx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.5rem 2rem;
    min-height: 280px;
    background: linear-gradient(135deg,
        rgba(34, 197, 94, 0.06) 0%,
        rgba(22, 163, 74, 0.02) 50%,
        transparent 100%);
}

.all-clear-icon-container[b-p5euwkxpsx] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.2);
    animation: gentle-pulse-b-p5euwkxpsx 3s ease-in-out infinite;
}

@keyframes gentle-pulse-b-p5euwkxpsx {
    0%, 100% {
        box-shadow: 0 0 30px rgba(34, 197, 94, 0.2);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 40px rgba(34, 197, 94, 0.3);
        transform: scale(1.03);
    }
}

.all-clear-icon[b-p5euwkxpsx] {
    font-size: 2rem;
    color: #4ade80;
    text-shadow: 0 0 15px rgba(74, 222, 128, 0.5);
}

.all-clear-title[b-p5euwkxpsx] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: #4ade80;
    margin: 0 0 0.5rem 0;
}

.all-clear-message[b-p5euwkxpsx] {
    font-size: 0.85rem;
    color: rgba(148, 163, 184, 0.8);
    margin: 0;
    max-width: 220px;
    line-height: 1.4;
}

/* ==========================================================================
   Inactive Location Styles
   ========================================================================== */
.location-details-page .inactive-location[b-p5euwkxpsx] {
    opacity: 0.85;
}

/* ==========================================================================
   Loading Skeleton
   ========================================================================== */
.kpi-skeleton[b-p5euwkxpsx] {
    animation: kpi-skeleton-pulse-b-p5euwkxpsx 1.5s ease-in-out infinite;
}

@keyframes kpi-skeleton-pulse-b-p5euwkxpsx {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

.kpi-skeleton-value[b-p5euwkxpsx] {
    width: 60px;
    height: 28px;
    background: rgba(100, 116, 139, 0.3);
    border-radius: 4px;
}

/* ==========================================================================
   Responsive - Large Tablet (transactions stack)
   ========================================================================== */
@media (max-width: 1199.98px) {
    .transactions-row[b-p5euwkxpsx] {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Responsive - Tablet
   ========================================================================== */
@media (max-width: 991.98px) {
    .location-profile-row[b-p5euwkxpsx] {
        grid-template-columns: 1fr;
    }

    .location-info-card[b-p5euwkxpsx] {
        min-width: 100%;
    }
}

/* ==========================================================================
   Responsive - Mobile
   ========================================================================== */
@media (max-width: 767.98px) {
    .section-header[b-p5euwkxpsx] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .pending-badge[b-p5euwkxpsx] {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }

    .location-name[b-p5euwkxpsx] {
        font-size: 1.1rem;
    }

    .location-address[b-p5euwkxpsx] {
        font-size: 0.75rem;
    }

    .manager-actions[b-p5euwkxpsx] {
        gap: 0.375rem;
    }

    .map-card-compact iframe[b-p5euwkxpsx] {
        height: 180px;
    }
}

/* ==========================================================================
   Responsive - XSmall Mobile
   ========================================================================== */
@media (max-width: 575.98px) {
    .section-card[b-p5euwkxpsx] {
        border-radius: 10px;
    }

    .section-header[b-p5euwkxpsx] {
        padding: 0.75rem 1rem;
    }

    .section-body[b-p5euwkxpsx] {
        padding: 0.75rem 1rem;
    }

    .location-name[b-p5euwkxpsx] {
        font-size: 1rem;
    }

    .location-profile-row[b-p5euwkxpsx] {
        gap: 1rem;
    }

    .manager-card-expanded[b-p5euwkxpsx] {
        min-height: auto;
    }

    .map-card-compact[b-p5euwkxpsx] {
        min-height: auto;
    }
}

/* ==========================================================================
   Live Events Card (webhook egress status)
   ========================================================================== */
.egress-mode-badge[b-p5euwkxpsx] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
}

.egress-mode-off[b-p5euwkxpsx] {
    background: rgba(100, 116, 139, 0.15);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: rgba(148, 163, 184, 0.75);
}

.egress-mode-single[b-p5euwkxpsx] {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.3);
    color: #4ade80;
}

.egress-mode-fanout[b-p5euwkxpsx] {
    background: rgba(6, 182, 212, 0.15);
    border: 1px solid rgba(34, 211, 238, 0.3);
    color: #22d3ee;
}

.egress-mode-conflict[b-p5euwkxpsx] {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #f59e0b;
}

.live-events-row[b-p5euwkxpsx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.live-events-field[b-p5euwkxpsx] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.live-events-last-event[b-p5euwkxpsx] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.live-events-pulse-dot[b-p5euwkxpsx] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(100, 116, 139, 0.35);
    flex-shrink: 0;
}

.live-events-pulse-dot.is-active[b-p5euwkxpsx] {
    background: #4ade80;
    animation: live-events-pulse-b-p5euwkxpsx 1.6s ease-out infinite;
}

@keyframes live-events-pulse-b-p5euwkxpsx {
    0% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55);
    }
    70% {
        box-shadow: 0 0 0 7px rgba(74, 222, 128, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
    }
}

.live-events-actions[b-p5euwkxpsx] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════
   PER-LOCATION EGRESS CONFIG POPUP (admin) - on/off + registers (kasy)
   Mirrors the egress-config page's .ec-register-row editor layout.
   ═══════════════════════════════════════════════════════════════ */
.ld-registers-editor[b-p5euwkxpsx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ld-registers-toolbar[b-p5euwkxpsx] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-bottom: 0.5rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.2);
}

.ld-register-row[b-p5euwkxpsx] {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr auto auto;
    gap: 0.5rem;
    align-items: center;
}

.ld-register-row-header[b-p5euwkxpsx] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(148, 163, 184, 0.55);
    padding: 0 0.1rem;
}

.ld-register-remove[b-p5euwkxpsx] {
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
    border-radius: 6px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ld-register-remove:hover[b-p5euwkxpsx] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.5);
}

.ld-register-add[b-p5euwkxpsx] {
    align-self: flex-start;
    margin-top: 0.25rem;
    background: rgba(59, 130, 246, 0.14);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #93c5fd;
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ld-register-add:hover[b-p5euwkxpsx] {
    background: rgba(59, 130, 246, 0.24);
    border-color: rgba(59, 130, 246, 0.5);
}

@media (max-width: 575.98px) {
    .ld-register-row[b-p5euwkxpsx] {
        grid-template-columns: 1fr 1fr auto auto;
    }

    .ld-register-row .ec-register-url[b-p5euwkxpsx],
    .ld-register-row > :nth-child(2)[b-p5euwkxpsx] {
        grid-column: 1 / -1;
    }
}
/* /Components/Pages/Client/ManagerActivityReport.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════
   ManagerActivityReport — Glass UI with Indigo Accent
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Page container */
.manager-activity-report-page[b-66uuwsb21a] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    color: #e2e8f0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GLASS LOADING SECTION
   ═══════════════════════════════════════════════════════════════════════════════ */

.glass-loading-section[b-66uuwsb21a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6));
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

.glass-loading-section h5[b-66uuwsb21a] {
    margin: 0 0 0.75rem 0;
    color: #c7d2fe;
    font-weight: 600;
    font-size: 1.1rem;
}

.loading-progress[b-66uuwsb21a] {
    margin: 0;
    color: #94a3b8;
}

.loading-progress strong[b-66uuwsb21a] {
    font-size: 1.15rem;
    color: #a5b4fc;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FILTER SECTION
   ═══════════════════════════════════════════════════════════════════════════════ */

.filter-section[b-66uuwsb21a] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6));
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

.filter-section-header[b-66uuwsb21a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.2), rgba(99, 102, 241, 0.06));
    border-bottom: 1px solid rgba(129, 140, 248, 0.2);
}

.filter-title[b-66uuwsb21a] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.filter-title .icon-wrapper[b-66uuwsb21a] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-title .icon-wrapper .oi[b-66uuwsb21a] {
    color: #818cf8;
    font-size: 1.1rem;
}

.filter-title h5[b-66uuwsb21a] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #f8fafc;
}

.filter-count-badge[b-66uuwsb21a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 0.4rem;
    border-radius: 11px;
    background: rgba(99, 102, 241, 0.3);
    color: #c7d2fe;
    font-size: 0.75rem;
    font-weight: 700;
}

.filter-section-body[b-66uuwsb21a] {
    padding: 1rem 1.25rem;
}

.filter-label[b-66uuwsb21a] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 0.35rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ACTIVE FILTERS ALERT — Glass Override
   ═══════════════════════════════════════════════════════════════════════════════ */

[b-66uuwsb21a] .alert-info {
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(129, 140, 248, 0.28);
    border-radius: 12px;
    color: #c7d2fe;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(67, 56, 202, 0.12);
    padding: 0.75rem 1rem;
}

[b-66uuwsb21a] .alert-info strong {
    color: #e0e7ff;
}

[b-66uuwsb21a] .alert-info .badge.bg-primary {
    background: rgba(99, 102, 241, 0.35) !important;
    border: 1px solid rgba(129, 140, 248, 0.3);
    color: #e0e7ff;
    font-weight: 500;
    font-size: 0.8rem;
    border-radius: 8px;
    padding: 0.35rem 0.65rem;
}

[b-66uuwsb21a] .alert-danger {
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid rgba(248, 113, 113, 0.3);
    border-radius: 12px;
    color: #fecaca;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(127, 29, 29, 0.2);
    padding: 0.75rem 1rem;
}

/* No-data alert */
[b-66uuwsb21a] .alert-info:last-child {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(129, 140, 248, 0.2);
    color: #a5b4fc;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SUMMARY STAT CARDS
   ═══════════════════════════════════════════════════════════════════════════════ */

.summary-cards-row[b-66uuwsb21a] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.stat-card[b-66uuwsb21a] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6));
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 12px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 1.25rem 1rem;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover[b-66uuwsb21a] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.stat-card-primary[b-66uuwsb21a] {
    border-top: 3px solid #818cf8;
}

.stat-card-warning[b-66uuwsb21a] {
    border-top: 3px solid #fbbf24;
}

.stat-card-success[b-66uuwsb21a] {
    border-top: 3px solid #34d399;
}

.stat-card-info[b-66uuwsb21a] {
    border-top: 3px solid #38bdf8;
}

.stat-label[b-66uuwsb21a] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.stat-value[b-66uuwsb21a] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.stat-primary[b-66uuwsb21a] {
    color: #a5b4fc;
}

.stat-warning[b-66uuwsb21a] {
    color: #fde68a;
}

.stat-success[b-66uuwsb21a] {
    color: #6ee7b7;
}

.stat-info[b-66uuwsb21a] {
    color: #7dd3fc;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GRID SECTION
   ═══════════════════════════════════════════════════════════════════════════════ */

.grid-section[b-66uuwsb21a] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6));
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

.grid-section-header[b-66uuwsb21a] {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.2), rgba(99, 102, 241, 0.06));
    border-bottom: 1px solid rgba(129, 140, 248, 0.2);
}

.grid-section-header h5[b-66uuwsb21a] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #f8fafc;
}

.grid-section-header .oi-people[b-66uuwsb21a] {
    color: #818cf8;
}

.grid-container[b-66uuwsb21a] {
    position: relative;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (≤992px)
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 991.98px) {
    .summary-cards-row[b-66uuwsb21a] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-section-body .row[b-66uuwsb21a] {
        gap: 0.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (≤768px)
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    .stat-card[b-66uuwsb21a] {
        padding: 1rem 0.75rem;
    }

    .stat-value[b-66uuwsb21a] {
        font-size: 1.5rem;
    }

    .stat-label[b-66uuwsb21a] {
        font-size: 0.75rem;
    }

    .filter-section-body[b-66uuwsb21a] {
        padding: 0.85rem;
    }

    .filter-section-header[b-66uuwsb21a] {
        padding: 0.75rem 0.85rem;
    }

    .grid-section-header[b-66uuwsb21a] {
        padding: 0.75rem 0.85rem;
    }

    /* Popup adjustments */
    [b-66uuwsb21a] .dxbl-popup {
        max-width: 95vw !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — XSmall (≤576px)
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
    .stat-card[b-66uuwsb21a] {
        padding: 0.75rem 0.625rem;
        border-radius: 10px;
    }

    .stat-value[b-66uuwsb21a] {
        font-size: 1.25rem;
    }

    .stat-label[b-66uuwsb21a] {
        font-size: 0.7rem;
    }

    .filter-section[b-66uuwsb21a],
    .grid-section[b-66uuwsb21a] {
        border-radius: 10px;
    }

    .filter-label[b-66uuwsb21a] {
        font-size: 0.8rem;
        margin-bottom: 0.25rem;
    }

    /* Ensure popups don't overflow */
    [b-66uuwsb21a] .dxbl-popup {
        max-width: 100vw !important;
        margin: 0.5rem;
    }

    /* Compact badges in grid */
    [b-66uuwsb21a] .badge {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }
}
/* /Components/Pages/Client/ManagerDetails.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════
   ManagerDetails - Manager Profile & Management Page
   ═══════════════════════════════════════════════════════════════════════════════ */

.manager-details-page[b-alhswrtcw7] {
    padding: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   INACTIVE STATE STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */
.inactive-body[b-alhswrtcw7] {
    background-color: rgba(108, 117, 125, 0.05);
}

.inactive-body .fw-bold[b-alhswrtcw7] {
    color: #6c757d !important;
}

.inactive-body label.text-muted[b-alhswrtcw7] {
    opacity: 0.7;
}

.inactive-header[b-alhswrtcw7] {
    opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CARD STYLING - Glassmorphism
   ═══════════════════════════════════════════════════════════════════════════════ */
.card.shadow[b-alhswrtcw7] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6)) !important;
    border: 1px solid rgba(100, 116, 139, 0.25) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DETAIL GRID - Modern layout for manager info
   ═══════════════════════════════════════════════════════════════════════════════ */
.modern-detail-grid[b-alhswrtcw7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 2rem;
}

.detail-item[b-alhswrtcw7] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.detail-label[b-alhswrtcw7] {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(148, 163, 184, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.detail-value[b-alhswrtcw7] {
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(241, 245, 249, 0.95);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE - Tablet and below
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .manager-details-page[b-alhswrtcw7] {
        padding: 0;
    }

    .modern-detail-grid[b-alhswrtcw7] {
        gap: 0.875rem 1.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE - Mobile (Small screens)
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .card.shadow[b-alhswrtcw7] {
        border-radius: 12px !important;
    }

    .modern-detail-grid[b-alhswrtcw7] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .detail-value[b-alhswrtcw7] {
        font-size: 0.9rem;
    }

    /* Popup width adjustments */
    [b-alhswrtcw7] .dxbl-popup {
        max-width: 95vw !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE - XSmall Mobile (Phone)
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .card.shadow[b-alhswrtcw7] {
        border-radius: 10px !important;
    }

    .modern-detail-grid[b-alhswrtcw7] {
        gap: 0.625rem;
    }

    .detail-label[b-alhswrtcw7] {
        font-size: 0.7rem;
    }

    .detail-value[b-alhswrtcw7] {
        font-size: 0.85rem;
    }

    /* Ensure popups don't overflow */
    [b-alhswrtcw7] .dxbl-popup {
        max-width: 100vw !important;
        margin: 0.5rem;
    }

    [b-alhswrtcw7] .dxbl-popup .card {
        margin-bottom: 0.75rem !important;
    }

    /* Compact alerts on mobile */
    [b-alhswrtcw7] .alert {
        padding: 0.625rem 0.875rem;
        font-size: 0.85rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   STATISTICS PANEL
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Period selector */
.stats-range-bar[b-alhswrtcw7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(30, 41, 59, 0.5);
    border-radius: 10px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.stats-range-label[b-alhswrtcw7] {
    font-size: 0.85rem;
    color: rgba(248, 250, 252, 0.6);
    font-weight: 500;
    margin-right: 4px;
}

.stats-range-btn[b-alhswrtcw7] {
    padding: 5px 14px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 6px;
    background: transparent;
    color: rgba(248, 250, 252, 0.7);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.stats-range-btn:hover[b-alhswrtcw7] {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.4);
    color: #f8fafc;
}

.stats-range-active[b-alhswrtcw7] {
    background: rgba(99, 102, 241, 0.2) !important;
    border-color: rgba(99, 102, 241, 0.5) !important;
    color: #a5b4fc !important;
    font-weight: 600;
}

/* KPI cards grid */
.stats-kpi-row[b-alhswrtcw7] {
    display: grid;
    /* minmax(0,1fr): plain 1fr tracks can't shrink below the nowrap label's
       min-content width, which overflows the card on narrow screens */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.stats-kpi-card[b-alhswrtcw7] {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    gap: 0.65rem;
    padding: 0.75rem;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 10px;
}

.stats-kpi-icon[b-alhswrtcw7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    font-size: 0.95rem;
}

.stats-kpi-content[b-alhswrtcw7] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stats-kpi-label[b-alhswrtcw7] {
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(148, 163, 184, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stats-kpi-value[b-alhswrtcw7] {
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(241, 245, 249, 0.95);
    line-height: 1.3;
}

.stats-kpi-sublabel[b-alhswrtcw7] {
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chart container */
.stats-chart-container[b-alhswrtcw7] {
    padding: 0.5rem 0;
}

/* Responsive — mobile */
@media (max-width: 767.98px) {
    .stats-kpi-row[b-alhswrtcw7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats-range-bar[b-alhswrtcw7] {
        padding: 8px 10px;
        gap: 6px;
    }

    .stats-range-btn[b-alhswrtcw7] {
        padding: 4px 10px;
        font-size: 0.75rem;
    }

    .stats-range-label[b-alhswrtcw7] {
        width: 100%;
        margin-bottom: 2px;
    }
}

@media (max-width: 575.98px) {
    .stats-kpi-card[b-alhswrtcw7] {
        padding: 0.6rem;
    }

    .stats-kpi-icon[b-alhswrtcw7] {
        width: 30px;
        height: 30px;
        min-width: 30px;
        font-size: 0.85rem;
    }

    .stats-kpi-value[b-alhswrtcw7] {
        font-size: 1rem;
    }
}
/* /Components/Pages/Debug/MemoResizeDebug.razor.rz.scp.css */
/* Debug page container */
.debug-page[b-vzvgnh7yoq] {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
    color: #e2e8f0;
}

.debug-title[b-vzvgnh7yoq] {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 0.25rem;
}

.debug-subtitle[b-vzvgnh7yoq] {
    color: #94a3b8;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

/* ─── Test card ─── */
.test-card[b-vzvgnh7yoq] {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.test-header[b-vzvgnh7yoq] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.test-number[b-vzvgnh7yoq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.25);
    color: #a5b4fc;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.test-label[b-vzvgnh7yoq] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #cbd5e1;
}

.test-expect[b-vzvgnh7yoq] {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.test-expect.pass[b-vzvgnh7yoq] {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.test-expect.fail[b-vzvgnh7yoq] {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.test-expect.unknown[b-vzvgnh7yoq] {
    background: rgba(234, 179, 8, 0.18);
    color: #fbbf24;
    border: 1px solid rgba(234, 179, 8, 0.3);
}

/* ─── Test 6: Exact replica of AddLocalDriveOff .form-section (overflow:hidden) ─── */
.form-section-bug[b-vzvgnh7yoq] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6));
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden; /* PRIMARY SUSPECT */
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

.form-section-body-test[b-vzvgnh7yoq] {
    padding: 1.25rem 1.4rem;
}

/* ─── Test 7: Same as above but with overflow:visible ─── */
.form-section-fix[b-vzvgnh7yoq] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6));
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: visible; /* FIX: changed from hidden */
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

/* ─── Test 8: :has() CSS fix applied to container ─── */
[b-vzvgnh7yoq] .with-has-fix .dxbl-fl-ctrl:has(.dxbl-memo-edit) {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    align-items: stretch !important;
}

[b-vzvgnh7yoq] .with-has-fix .dxbl-fl-item:has(.dxbl-memo-edit) {
    align-items: stretch !important;
    overflow: visible !important;
}

/* ─── Test 10: Exact clone of AddLocalDriveOff structure ─── */
.form-section-clone[b-vzvgnh7yoq] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6));
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden; /* Same as AddLocalDriveOff */
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

.form-section-header-clone[b-vzvgnh7yoq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(90deg, rgba(185, 28, 28, 0.38), rgba(220, 38, 38, 0.18));
    border-bottom: 1px solid rgba(248, 113, 113, 0.2);
}

.form-title-clone[b-vzvgnh7yoq] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.form-title-clone h3[b-vzvgnh7yoq] {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #f8fafc;
    text-transform: uppercase;
}

.form-section-body-clone[b-vzvgnh7yoq] {
    padding: 1.25rem 1.4rem;
}

/* ─── Sanity C: Force-override everything on the memo textarea ─── */
[b-vzvgnh7yoq] .memo-force-resize {
    height: auto !important;
    min-height: 80px !important;
    max-height: none !important;
    overflow: visible !important;
}

[b-vzvgnh7yoq] .memo-force-resize textarea {
    resize: vertical !important;
    overflow: auto !important;
    height: auto !important;
    min-height: 80px !important;
    max-height: none !important;
}

/* Form layout caption styling (matching AddLocalDriveOff scoped styles) */
[b-vzvgnh7yoq] .form-section-clone .dxbl-form-layout-item {
    margin-bottom: 0.5rem;
}

[b-vzvgnh7yoq] .form-section-clone .dxbl-form-layout-item-caption {
    font-size: 0.95rem;
    font-weight: 600;
    color: #cbd5e1;
    margin-bottom: 0.25rem;
    padding-top: 0.25rem;
}
/* /Components/Pages/Debug/VehicleIdReview.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════
   VehicleIdReview - Queue-based AI Review Page
   Glass morphism design matching AuthorizeTransaction patterns
   ═══════════════════════════════════════════════════════════════════════════════ */

.review-page[b-kx4hj32elg] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem 2rem;
    color: #e2e8f0;
    outline: none;
}

/* ═══════════════════════════════════════════════════════════════
   FILTER TOGGLES (in PageHeader ActionContent)
   ═══════════════════════════════════════════════════════════════ */
.filter-toggles[b-kx4hj32elg] {
    display: flex;
    gap: 0.35rem;
}

.filter-btn[b-kx4hj32elg] {
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(100, 116, 139, 0.25);
    background: rgba(71, 85, 105, 0.3);
    color: rgba(148, 163, 184, 0.8);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.filter-btn:hover[b-kx4hj32elg] {
    background: rgba(71, 85, 105, 0.5);
    color: #e2e8f0;
}

.filter-btn-active[b-kx4hj32elg] {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(96, 165, 250, 0.4);
    color: #93c5fd;
}

/* ═══════════════════════════════════════════════════════════════
   EMPTY / LOADING STATES
   ═══════════════════════════════════════════════════════════════ */
.review-empty-state[b-kx4hj32elg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 2rem;
    color: rgba(148, 163, 184, 0.6);
    text-align: center;
}

.review-empty-state .oi[b-kx4hj32elg] {
    font-size: 2.5rem;
    opacity: 0.4;
}

/* ═══════════════════════════════════════════════════════════════
   STATS BAR
   ═══════════════════════════════════════════════════════════════ */
.review-stats-bar[b-kx4hj32elg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(51, 65, 85, 0.7));
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 12px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.review-stat-item[b-kx4hj32elg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.review-stat-label[b-kx4hj32elg] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(148, 163, 184, 0.6);
}

.review-stat-value[b-kx4hj32elg] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #f1f5f9;
}

.review-stat-dim[b-kx4hj32elg] {
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(148, 163, 184, 0.6);
}

.review-stat-amber[b-kx4hj32elg] {
    color: #F59E0B;
}

.review-stat-blue[b-kx4hj32elg] {
    color: #60a5fa;
}

.review-stat-divider[b-kx4hj32elg] {
    width: 1px;
    height: 28px;
    background: rgba(100, 116, 139, 0.3);
}

/* ═══════════════════════════════════════════════════════════════
   ALL DONE STATE
   ═══════════════════════════════════════════════════════════════ */
.review-done-state[b-kx4hj32elg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 4rem 2rem;
    text-align: center;
}

.review-done-icon[b-kx4hj32elg] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.review-done-icon .oi[b-kx4hj32elg] {
    font-size: 2rem;
    color: #4ade80;
}

.review-done-state h3[b-kx4hj32elg] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0;
}

.review-done-state p[b-kx4hj32elg] {
    font-size: 0.95rem;
    color: rgba(148, 163, 184, 0.8);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   IDENTITY BAR (reuses AuthorizeTransaction hero-identity-bar)
   ═══════════════════════════════════════════════════════════════ */
.review-identity-bar[b-kx4hj32elg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(51, 65, 85, 0.7));
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 14px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.identity-left[b-kx4hj32elg] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.plate-wrapper[b-kx4hj32elg] {
    flex-shrink: 0;
}

.review-status-badge[b-kx4hj32elg] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.status-confirmed[b-kx4hj32elg] {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.3);
    color: #4ade80;
}

.status-corrected[b-kx4hj32elg] {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #F59E0B;
}

.navigation-section[b-kx4hj32elg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.queue-indicator[b-kx4hj32elg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.45rem 0.875rem;
    min-width: 90px;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6));
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: 10px;
}

.queue-label[b-kx4hj32elg] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(148, 163, 184, 0.6);
    text-align: center;
}

.queue-progress[b-kx4hj32elg] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.position-display[b-kx4hj32elg] {
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
}

.position-input[b-kx4hj32elg] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: #60a5fa;
    line-height: 1.1;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    outline: none;
    text-align: center;
    padding: 0 0 2px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -moz-appearance: textfield;
}

.position-input[b-kx4hj32elg]::-webkit-outer-spin-button,
.position-input[b-kx4hj32elg]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.position-input:hover[b-kx4hj32elg] {
    border-bottom-color: rgba(96, 165, 250, 0.35);
}

.position-input:focus[b-kx4hj32elg] {
    border-bottom-color: #60a5fa;
    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.2);
}

.position-separator[b-kx4hj32elg],
.total-count[b-kx4hj32elg] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.8);
}

/* ═══════════════════════════════════════════════════════════════
   CONTENT SPLIT (50% | 50%)
   ═══════════════════════════════════════════════════════════════ */
.review-content-split[b-kx4hj32elg] {
    display: flex;
    gap: 1rem;
    min-height: 360px;
}

/* ═══════════════════════════════════════════════════════════════
   IMAGE GALLERY (left 50%)
   ═══════════════════════════════════════════════════════════════ */
.review-image-gallery[b-kx4hj32elg] {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.review-images-loading[b-kx4hj32elg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem;
    color: rgba(148, 163, 184, 0.6);
    font-size: 0.85rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.6), rgba(30, 41, 59, 0.5));
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 12px;
    flex: 1;
}

.review-spin-icon[b-kx4hj32elg] {
    animation: review-spin-b-kx4hj32elg 1s linear infinite;
}

@keyframes review-spin-b-kx4hj32elg {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.review-no-images[b-kx4hj32elg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 2rem;
    color: rgba(148, 163, 184, 0.5);
    text-align: center;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.6), rgba(30, 41, 59, 0.5));
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 12px;
    flex: 1;
}

.review-no-images .oi[b-kx4hj32elg] {
    font-size: 2.5rem;
    opacity: 0.4;
}

.review-image-slot[b-kx4hj32elg] {
    position: relative;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.7), rgba(30, 41, 59, 0.6));
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.review-image-slot:hover[b-kx4hj32elg] {
    border-color: rgba(100, 116, 139, 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.review-image-slot img[b-kx4hj32elg] {
    width: 100%;
    max-height: 240px;
    object-fit: contain;
    display: block;
    padding: 0.5rem;
}

.review-image-tag[b-kx4hj32elg] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background: rgba(0, 0, 0, 0.5);
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(203, 213, 225, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.review-image-tag .oi[b-kx4hj32elg] {
    font-size: 0.55rem;
    opacity: 0.7;
}

.best-tag[b-kx4hj32elg] {
    margin-left: auto;
    padding: 0.15rem 0.4rem;
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 4px;
    color: #F59E0B;
    font-size: 0.55rem;
}

.select-image-btn[b-kx4hj32elg] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.25);
    border-radius: 4px;
    color: #93c5fd;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.select-image-btn:hover[b-kx4hj32elg] {
    background: rgba(96, 165, 250, 0.25);
    border-color: rgba(96, 165, 250, 0.5);
    color: #bfdbfe;
}

.select-image-btn .oi[b-kx4hj32elg] {
    font-size: 0.5rem;
}

/* Best image indicator — amber border */
.review-best-indicator[b-kx4hj32elg] {
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.1);
}

.review-best-indicator:hover[b-kx4hj32elg] {
    border-color: rgba(245, 158, 11, 0.6);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.15);
}

/* ═══════════════════════════════════════════════════════════════
   DETAILS CARD (right 50%)
   ═══════════════════════════════════════════════════════════════ */
.review-details[b-kx4hj32elg] {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.review-details-section[b-kx4hj32elg] {
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(51, 65, 85, 0.7));
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 12px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.review-section-label[b-kx4hj32elg] {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(148, 163, 184, 0.6);
    margin-bottom: 0.5rem;
}

.review-ai-result[b-kx4hj32elg] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

.review-ai-make[b-kx4hj32elg] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #f8fafc;
    line-height: 1.2;
}

.review-ai-model[b-kx4hj32elg] {
    font-size: 1.5rem;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.85);
    line-height: 1.2;
}

.review-ai-color[b-kx4hj32elg] {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(148, 163, 184, 0.7);
    padding: 0.2rem 0.6rem;
    background: rgba(71, 85, 105, 0.3);
    border-radius: 6px;
}

/* Meta grid */
.review-meta-grid[b-kx4hj32elg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(51, 65, 85, 0.4));
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 12px;
}

.review-meta-item[b-kx4hj32elg] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.review-meta-label[b-kx4hj32elg] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(148, 163, 184, 0.5);
}

.review-meta-value[b-kx4hj32elg] {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.9);
    word-break: break-all;
}

/* Intel link */
.review-intel-link[b-kx4hj32elg] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.25);
    color: #93c5fd;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    align-self: flex-start;
}

.review-intel-link:hover[b-kx4hj32elg] {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(96, 165, 250, 0.4);
    color: #bfdbfe;
}

.review-intel-link .oi[b-kx4hj32elg] {
    font-size: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════
   ACTION BAR
   ═══════════════════════════════════════════════════════════════ */
.review-action-bar[b-kx4hj32elg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(51, 65, 85, 0.5));
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.review-action-primary[b-kx4hj32elg] {
    display: flex;
    gap: 0.75rem;
}

.review-action-btn[b-kx4hj32elg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 48px;
    padding: 0 1.25rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    position: relative;
}

.review-action-btn:disabled[b-kx4hj32elg] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-shortcut[b-kx4hj32elg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 4px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
    font-size: 0.6rem;
    font-weight: 700;
    opacity: 0.5;
    font-family: monospace;
}

/* Skip button */
.review-btn-skip[b-kx4hj32elg] {
    background: rgba(71, 85, 105, 0.4);
    border-color: rgba(100, 116, 139, 0.3);
    color: rgba(203, 213, 225, 0.8);
}

.review-btn-skip:hover:not(:disabled)[b-kx4hj32elg] {
    background: rgba(71, 85, 105, 0.6);
    color: #f8fafc;
}

/* Correct button */
.review-btn-correct[b-kx4hj32elg] {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    color: #F59E0B;
}

.review-btn-correct:hover:not(:disabled)[b-kx4hj32elg] {
    background: rgba(245, 158, 11, 0.25);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

/* Confirm button */
.review-btn-confirm[b-kx4hj32elg] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-color: rgba(34, 197, 94, 0.4);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.25);
}

.review-btn-confirm:hover:not(:disabled)[b-kx4hj32elg] {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.35);
}

.review-btn-confirm:active:not(:disabled)[b-kx4hj32elg] {
    transform: translateY(0);
}

.review-spinner[b-kx4hj32elg] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: review-spin-b-kx4hj32elg 0.8s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════
   IMAGE LIGHTBOX (copied from AuthorizeTransaction)
   ═══════════════════════════════════════════════════════════════ */
.image-lightbox[b-kx4hj32elg] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: lb-fade-in-b-kx4hj32elg 0.2s ease;
    cursor: pointer;
}

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

.lightbox-content[b-kx4hj32elg] {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
    cursor: default;
    animation: lb-zoom-in-b-kx4hj32elg 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes lb-zoom-in-b-kx4hj32elg {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.lightbox-close[b-kx4hj32elg] {
    position: absolute;
    top: -50px; right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: all 0.2s ease;
}

.lightbox-close:hover[b-kx4hj32elg] {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.lightbox-close .oi[b-kx4hj32elg] {
    font-size: 1.1rem;
}

.lightbox-image[b-kx4hj32elg] {
    max-width: 95vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

/* ═══════════════════════════════════════════════════════════════
   CORRECTION POPUP (copied from AuthorizeTransaction vid-*)
   ═══════════════════════════════════════════════════════════════ */
.vid-overlay[b-kx4hj32elg] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: vid-fadeIn-b-kx4hj32elg 0.2s ease;
}

.vid-popup[b-kx4hj32elg] {
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.95), rgba(51, 65, 85, 0.9));
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 20px;
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), 0 12px 24px rgba(0, 0, 0, 0.2);
    animation: vid-slideIn-b-kx4hj32elg 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vid-popup-icon[b-kx4hj32elg] {
    width: 56px; height: 56px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.15));
    display: flex; align-items: center; justify-content: center;
}
.vid-popup-icon .oi[b-kx4hj32elg] { font-size: 1.5rem; color: #F59E0B; }

.vid-popup-title[b-kx4hj32elg] {
    font-size: 1.1rem; font-weight: 700; color: #f8fafc; margin-bottom: 1rem;
}

.vid-previous-result[b-kx4hj32elg], .vid-new-result[b-kx4hj32elg], .vid-hint-section[b-kx4hj32elg],
.vid-processing-section[b-kx4hj32elg], .vid-error-section[b-kx4hj32elg] {
    padding: 0.75rem; border-radius: 10px; margin-bottom: 0.75rem; text-align: left;
}

.vid-section-label[b-kx4hj32elg] {
    display: block; font-size: 0.65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: rgba(148, 163, 184, 0.6); margin-bottom: 0.35rem;
}

.vid-previous-result[b-kx4hj32elg] {
    background: rgba(71, 85, 105, 0.3);
    border: 1px solid rgba(100, 116, 139, 0.2);
}

.vid-result-row[b-kx4hj32elg] {
    font-size: 0.95rem; font-weight: 600; color: #f1f5f9;
}
.vid-color[b-kx4hj32elg] { color: rgba(148, 163, 184, 0.7); }

.vid-new-result[b-kx4hj32elg] {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.vid-result-success[b-kx4hj32elg] { color: #F59E0B; }

.vid-hint-input[b-kx4hj32elg] {
    width: 100%; padding: 0.5rem 0.75rem;
    border: 1px solid rgba(100, 116, 139, 0.3); border-radius: 8px;
    background: rgba(15, 23, 42, 0.6); color: #f1f5f9;
    font-size: 0.9rem; outline: none; transition: border-color 0.2s;
    box-sizing: border-box;
}
.vid-hint-input:focus[b-kx4hj32elg] {
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}
.vid-hint-input[b-kx4hj32elg]::placeholder { color: rgba(148, 163, 184, 0.5); }

.vid-hint-sent[b-kx4hj32elg] { margin-bottom: 0.75rem; }
.vid-hint-text[b-kx4hj32elg] { font-style: italic; color: #F59E0B; font-size: 0.9rem; }

.vid-spinner-row[b-kx4hj32elg] {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.75rem; background: rgba(245, 158, 11, 0.08);
    border-radius: 8px; color: rgba(245, 158, 11, 0.9); font-size: 0.85rem;
}
.vid-spin-icon[b-kx4hj32elg] { animation: review-spin-b-kx4hj32elg 1s linear infinite; }

.vid-error-section[b-kx4hj32elg] {
    display: flex; align-items: center; gap: 0.5rem;
    background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(248, 113, 113, 0.25);
    color: #fca5a5; font-size: 0.9rem;
}

.vid-popup-actions[b-kx4hj32elg] {
    display: flex; gap: 0.75rem; justify-content: center; margin-top: 1.25rem;
}

.vid-btn[b-kx4hj32elg] {
    padding: 0.65rem 1.5rem; border-radius: 10px;
    font-size: 0.9rem; font-weight: 600; cursor: pointer;
    transition: all 0.2s ease; border: none;
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.vid-btn:disabled[b-kx4hj32elg] { opacity: 0.4; cursor: default; }

.vid-btn-cancel[b-kx4hj32elg] {
    background: rgba(255, 255, 255, 0.08); color: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.2);
}
.vid-btn-cancel:hover[b-kx4hj32elg] { background: rgba(255, 255, 255, 0.12); }

.vid-btn-confirm[b-kx4hj32elg] {
    background: linear-gradient(135deg, #F59E0B, #D97706); color: white;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.vid-btn-confirm:hover:not(:disabled)[b-kx4hj32elg] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
}

@keyframes vid-fadeIn-b-kx4hj32elg { from { opacity: 0; } to { opacity: 1; } }
@keyframes vid-slideIn-b-kx4hj32elg {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .review-content-split[b-kx4hj32elg] {
        min-height: 300px;
    }

    .review-image-slot img[b-kx4hj32elg] {
        max-height: 200px;
    }

    .review-ai-make[b-kx4hj32elg] {
        font-size: 1.5rem;
    }

    .review-ai-model[b-kx4hj32elg] {
        font-size: 1.25rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .review-page[b-kx4hj32elg] {
        padding: 0 0.5rem 1.5rem;
        gap: 0.75rem;
    }

    .filter-toggles[b-kx4hj32elg] {
        gap: 0.25rem;
    }

    .filter-btn[b-kx4hj32elg] {
        padding: 0.25rem 0.5rem;
        font-size: 0.7rem;
    }

    .review-stats-bar[b-kx4hj32elg] {
        gap: 0.75rem;
        padding: 0.6rem 0.75rem;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .review-stat-value[b-kx4hj32elg] {
        font-size: 0.95rem;
    }

    .review-stat-divider[b-kx4hj32elg] {
        display: none;
    }

    .review-identity-bar[b-kx4hj32elg] {
        padding: 0.75rem 1rem;
        border-radius: 12px;
    }

    .review-content-split[b-kx4hj32elg] {
        flex-direction: column;
        min-height: auto;
    }

    .review-image-gallery[b-kx4hj32elg] {
        flex: none;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
    }

    .review-image-slot[b-kx4hj32elg] {
        flex: 0 0 85%;
        scroll-snap-align: start;
    }

    .review-image-slot img[b-kx4hj32elg] {
        max-height: 200px;
    }

    .review-details[b-kx4hj32elg] {
        flex: none;
    }

    .review-action-bar[b-kx4hj32elg] {
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.875rem 1rem;
        border-radius: 12px;
    }

    .review-action-primary[b-kx4hj32elg] {
        width: 100%;
    }

    .review-action-btn[b-kx4hj32elg] {
        flex: 1;
        height: 44px;
        padding: 0 0.75rem;
        font-size: 0.85rem;
    }

    .review-btn-skip[b-kx4hj32elg] {
        width: 100%;
    }

    .btn-shortcut[b-kx4hj32elg] {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — XSmall Mobile
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .review-page[b-kx4hj32elg] {
        padding: 0 0.25rem 1rem;
        gap: 0.5rem;
    }

    .review-identity-bar[b-kx4hj32elg] {
        padding: 0.625rem 0.75rem;
        border-radius: 10px;
    }

    .identity-left[b-kx4hj32elg] {
        gap: 0.5rem;
    }

    .queue-indicator[b-kx4hj32elg] {
        padding: 0.25rem 0.4rem;
        min-width: 60px;
    }

    .position-input[b-kx4hj32elg] {
        font-size: 1.1rem;
    }

    .position-separator[b-kx4hj32elg],
    .total-count[b-kx4hj32elg] {
        font-size: 0.75rem;
    }

    .review-ai-make[b-kx4hj32elg] {
        font-size: 1.25rem;
    }

    .review-ai-model[b-kx4hj32elg] {
        font-size: 1rem;
    }

    .review-image-slot[b-kx4hj32elg] {
        flex: 0 0 90%;
    }

    .review-image-slot img[b-kx4hj32elg] {
        max-height: 170px;
    }
}
/* /Components/Pages/Error.razor.rz.scp.css */
/* Error page specific styles - inherits animated background and glass card from login.css */

.error-content[b-musb01z2dm] {
    text-align: center;
    width: 100%;
    animation: slideUp 0.6s ease-out;
    animation-delay: 0.2s;
    opacity: 0;
    animation-fill-mode: forwards;
}

.error-icon-container[b-musb01z2dm] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 99, 71, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem auto;
    animation: float 4s ease-in-out infinite;
}

.error-icon-container .oi[b-musb01z2dm] {
    font-size: 2.5rem;
    color: #FF6347;
}

.error-title[b-musb01z2dm] {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.75rem;
    margin: 1rem 0;
    font-weight: 600;
}

.error-message[b-musb01z2dm] {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1.5rem;
    line-height: 1.6;
    font-size: 1rem;
}

.error-details[b-musb01z2dm] {
    margin-bottom: 1.5rem;
    text-align: left;
    width: 100%;
}

.error-details details[b-musb01z2dm] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 0.75rem;
}

.error-details summary[b-musb01z2dm] {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    user-select: none;
}

.error-details summary:hover[b-musb01z2dm] {
    color: #ffffff;
}

.error-details pre[b-musb01z2dm] {
    margin-top: 0.75rem;
    margin-bottom: 0;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.85rem;
    overflow-x: auto;
    max-height: 150px;
    overflow-y: auto;
}

.button-group[b-musb01z2dm] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    margin-top: 1.5rem;
}

.action-btn[b-musb01z2dm] {
    padding: 0.9rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
}

.action-btn[b-musb01z2dm]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.action-btn:hover[b-musb01z2dm]::before {
    left: 100%;
}

.primary-btn[b-musb01z2dm] {
    color: #0D6EFD;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
}

.primary-btn:hover[b-musb01z2dm] {
    background: linear-gradient(135deg, #ffffff, rgba(255, 255, 255, 0.9));
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(13, 110, 253, 0.4);
}

.secondary-btn[b-musb01z2dm] {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.secondary-btn:hover[b-musb01z2dm] {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.action-btn:active[b-musb01z2dm] {
    transform: translateY(-1px) scale(0.98);
    transition: all 0.1s ease;
}

.action-btn:focus[b-musb01z2dm] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.home-icon[b-musb01z2dm],
.reload-icon[b-musb01z2dm] {
    font-size: 1.2rem;
}

/* Responsive Design */
@media (max-width: 480px) {
    .error-icon-container[b-musb01z2dm] {
        width: 70px;
        height: 70px;
    }

    .error-icon-container .oi[b-musb01z2dm] {
        font-size: 2rem;
    }

    .error-title[b-musb01z2dm] {
        font-size: 1.5rem;
    }

    .action-btn[b-musb01z2dm] {
        padding: 0.8rem 1.5rem;
    }
}
/* /Components/Pages/Index.razor.rz.scp.css */
/* Index page - minimal styles for dynamic overview rendering */

.left_aligned[b-qxz2zk93yg] {
    width: 100%;
}

[b-qxz2zk93yg] .welcome-gridlayout {
    margin: 0;
    width: 100%;
    height: auto;
}

[b-qxz2zk93yg] .welcome-gridlayout .dxbl-gridlayout-root {
    align-content: flex-start;
    justify-content: flex-start;
}
/* /Components/Pages/Manager/ManagerDashboard.razor.rz.scp.css */
/* Manager Dashboard - Responsive Styles */

.manager-dashboard-page[b-hx4qzilihg] {
    padding: 0;
}

/* Location tabs mobile handling */
.location-tabs-mobile[b-hx4qzilihg] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.location-tabs-mobile[b-hx4qzilihg]  .dxbl-tabs-scroll-container {
    flex-wrap: nowrap;
}

/* Hide DevExpress Tab Navigation/Scroll Buttons - users click tabs directly */
[b-hx4qzilihg] .location-tabs .dxbs-nav-btn,
[b-hx4qzilihg] .location-tabs .dxbl-scroll-btn,
[b-hx4qzilihg] .location-tabs .dxbl-tabs-scroll-btn,
[b-hx4qzilihg] .location-tabs .dxbl-scroll-viewer-btn,
[b-hx4qzilihg] .location-tabs [class*="scroll-btn"],
[b-hx4qzilihg] .location-tabs [class*="nav-btn"],
[b-hx4qzilihg] .dxbl-scroll-viewer-btn,
[b-hx4qzilihg] .dxbl-btn-scroll,
[b-hx4qzilihg] [class*="dxbl"][class*="scroll"][class*="btn"] {
    display: none !important;
}

/* Tablet (991.98px) */
@media (max-width: 991.98px) {
    .location-tabs[b-hx4qzilihg]  .dxbl-tabs {
        font-size: 0.9rem;
    }
}

/* Mobile (767.98px) */
@media (max-width: 767.98px) {
    .location-tabs[b-hx4qzilihg]  .dxbl-tabs {
        font-size: 0.85rem;
    }

    .location-tabs[b-hx4qzilihg]  .dxbl-tab {
        padding: 0.5rem 0.75rem;
    }
}

/* Phone (575.98px) */
@media (max-width: 575.98px) {
    .location-tabs[b-hx4qzilihg]  .dxbl-tabs {
        font-size: 0.8rem;
    }

    .location-tabs[b-hx4qzilihg]  .dxbl-tab {
        padding: 0.4rem 0.6rem;
        white-space: nowrap;
    }
}
/* /Components/Pages/Manager/ManagerOverview.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════
   ManagerOverview - Command Center Dashboard Design
   Professional soft glass aesthetic with refined, minimal motion
   ═══════════════════════════════════════════════════════════════════════════════ */

.manager-overview-page[b-impcydkemc] {
    padding: 0;
    animation: fadeIn-b-impcydkemc 0.3s ease-out both;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PAGE LOAD ANIMATION
   Single subtle fade - professional restraint
   ═══════════════════════════════════════════════════════════════════════════════ */
@keyframes fadeIn-b-impcydkemc {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ENHANCED TABS - Glassmorphism Tab Container
   Using .custom-tabs wrapper for consistency with ClientOverview
   ═══════════════════════════════════════════════════════════════════════════════ */
[b-impcydkemc] .custom-tabs .dxbs-tabs {
    background: transparent !important;
}

[b-impcydkemc] .custom-tabs .nav-tabs {
    border-bottom: 1px solid rgba(100, 116, 139, 0.25) !important;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(51, 65, 85, 0.4));
    border-radius: 12px 12px 0 0;
    padding: 0.5rem 0.5rem 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[b-impcydkemc] .custom-tabs .nav-item .nav-link {
    color: rgba(203, 213, 225, 0.8) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 0.75rem 1.25rem !important;
    margin-bottom: -1px;
    transition: all 0.25s ease;
    font-weight: 500;
}

[b-impcydkemc] .custom-tabs .nav-item .nav-link:hover {
    color: #f8fafc !important;
    background: rgba(100, 116, 139, 0.2) !important;
}

[b-impcydkemc] .custom-tabs .nav-item .nav-link.active {
    color: #60a5fa !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.1)) !important;
    border-bottom: 2px solid #60a5fa !important;
}

.tab-title[b-impcydkemc] {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--bs-light);
}

.tab-badge[b-impcydkemc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 10px;
    background: rgba(251, 191, 36, 0.3);
    color: #fcd34d;
    border: 1px solid rgba(251, 191, 36, 0.5);
    transition: all 0.2s ease;
}

.tab-badge.empty[b-impcydkemc] {
    background: rgba(34, 197, 94, 0.25);
    color: #6ee7b7;
    border-color: rgba(34, 197, 94, 0.45);
}

[b-impcydkemc] .dxbs-selected-tab .tab-title {
    color: var(--bs-primary);
}

/* Hide DevExpress Tab Navigation/Scroll Buttons - users click tabs directly */
[b-impcydkemc] .custom-tabs .dxbs-nav-btn,
[b-impcydkemc] .custom-tabs .dxbl-scroll-btn,
[b-impcydkemc] .custom-tabs .dxbl-tabs-scroll-btn,
[b-impcydkemc] .custom-tabs .dxbl-scroll-viewer-btn,
[b-impcydkemc] .custom-tabs [class*="scroll-btn"],
[b-impcydkemc] .custom-tabs [class*="nav-btn"],
[b-impcydkemc] .dxbl-scroll-viewer-btn,
[b-impcydkemc] .dxbl-btn-scroll,
[b-impcydkemc] [class*="dxbl"][class*="scroll"][class*="btn"] {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PENDING AUTHORIZATION CARD - Elevated Priority
   Enhanced with bolder colors and refined animation
   ═══════════════════════════════════════════════════════════════════════════════ */
.pending-authorization-card[b-impcydkemc] {
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(145deg,
        rgba(251, 191, 36, 0.18) 0%,
        rgba(245, 158, 11, 0.1) 100%);
    border: 1px solid rgba(251, 191, 36, 0.5);
    border-radius: var(--glass-card-radius-lg, 14px);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: subtlePulse-b-impcydkemc 4s ease-in-out infinite;
}

/* Subtle border pulse for pending items - professional and calm */
@keyframes subtlePulse-b-impcydkemc {
    0%, 100% { border-color: rgba(251, 191, 36, 0.4); }
    50% { border-color: rgba(251, 191, 36, 0.6); }
}

.pending-header[b-impcydkemc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.pending-title[b-impcydkemc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pending-title .oi[b-impcydkemc] {
    font-size: 1.25rem;
    color: #fcd34d;
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.4));
}

.pending-title h5[b-impcydkemc] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #fef3c7;
    letter-spacing: -0.01em;
}

.pending-count-badge[b-impcydkemc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 14px;
    background: rgba(251, 191, 36, 0.35);
    color: #fcd34d;
    border: 1px solid rgba(251, 191, 36, 0.6);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   POLICE REPORTS NEEDED CARD - Steel/Slate Glass
   Secondary priority - calm, professional appearance
   ═══════════════════════════════════════════════════════════════════════════════ */
.police-reports-card[b-impcydkemc] {
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(145deg,
        rgba(100, 116, 139, 0.2) 0%,
        rgba(71, 85, 105, 0.12) 100%);
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: var(--glass-card-radius-lg, 14px);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.police-reports-header[b-impcydkemc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.police-reports-title[b-impcydkemc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.police-reports-title .oi[b-impcydkemc] {
    font-size: 1.25rem;
    color: #94a3b8;
    filter: drop-shadow(0 0 4px rgba(148, 163, 184, 0.3));
}

.police-reports-title h5[b-impcydkemc] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #cbd5e1;
    letter-spacing: -0.01em;
}

.police-reports-count-badge[b-impcydkemc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 14px;
    background: rgba(100, 116, 139, 0.35);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.5);
}

.police-reports-view-all[b-impcydkemc] {
    font-size: 0.8rem;
    color: rgba(148, 163, 184, 0.8);
    text-decoration: none;
    transition: color 0.2s ease;
}

.police-reports-view-all:hover[b-impcydkemc] {
    color: #cbd5e1;
}

.police-reports-clear-card[b-impcydkemc] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    background: rgba(100, 116, 139, 0.1);
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 10px;
    font-size: 0.85rem;
    color: rgba(148, 163, 184, 0.7);
}

.police-reports-clear-card .oi[b-impcydkemc] {
    font-size: 0.9rem;
    color: rgba(148, 163, 184, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ALL CLEAR STATE - Static Success Card
   Clean, professional - no animations
   ═══════════════════════════════════════════════════════════════════════════════ */
.all-clear-card[b-impcydkemc] {
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(145deg,
        rgba(34, 197, 94, 0.15) 0%,
        rgba(22, 163, 74, 0.08) 100%);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: var(--glass-card-radius-lg, 14px);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: border-color 0.2s ease;
}

.all-clear-card:hover[b-impcydkemc] {
    border-color: rgba(34, 197, 94, 0.55);
}

.all-clear-content[b-impcydkemc] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.all-clear-icon-wrapper[b-impcydkemc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: rgba(34, 197, 94, 0.15);
    border-radius: 10px;
}

.all-clear-icon-wrapper .oi[b-impcydkemc] {
    font-size: 1.25rem;
    color: #6ee7b7;
}

/* Hidden - no glow effect for professional look */
.all-clear-glow[b-impcydkemc] {
    display: none;
}

.all-clear-text h5[b-impcydkemc] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #a7f3d0;
}

.all-clear-text p[b-impcydkemc] {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: rgba(167, 243, 208, 0.7);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ACTION CARDS ROW - Side by Side on Desktop
   ═══════════════════════════════════════════════════════════════════════════════ */
.action-cards-row[b-impcydkemc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
    align-items: stretch;
}

.action-card-col[b-impcydkemc] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.action-card-col .pending-authorization-card[b-impcydkemc],
.action-card-col .police-reports-card[b-impcydkemc],
.action-card-col .all-clear-card[b-impcydkemc],
.action-card-col .police-reports-clear-card[b-impcydkemc] {
    flex: 1;
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LOCATION CONTENT LAYOUT - Side by Side Cards
   ═══════════════════════════════════════════════════════════════════════════════ */
.location-content-grid[b-impcydkemc] {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LOCATION INFO CARD - Enhanced with hover and icons
   ═══════════════════════════════════════════════════════════════════════════════ */
.location-info-card[b-impcydkemc] {
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6));
    border: 1px solid var(--glass-card-border, rgba(100, 116, 139, 0.25));
    border-radius: var(--glass-card-radius-lg, 14px);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: border-color 0.2s ease;
}

.location-info-card:hover[b-impcydkemc] {
    border-color: rgba(100, 116, 139, 0.4);
}

.location-info-header[b-impcydkemc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--glass-card-header-border, rgba(100, 116, 139, 0.2));
}

.location-info-header .oi[b-impcydkemc] {
    color: #60a5fa;
    font-size: 1.1rem;
}

.location-info-header h5[b-impcydkemc] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--glass-card-header-text, #f8fafc);
    letter-spacing: -0.01em;
}

/* Info List with Icons */
.info-list[b-impcydkemc] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.info-item[b-impcydkemc] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.info-icon[b-impcydkemc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.info-content[b-impcydkemc] {
    flex: 1;
    min-width: 0;
}

.info-content label[b-impcydkemc] {
    display: block;
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.2rem;
}

.info-content p[b-impcydkemc] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: #f1f5f9;
    line-height: 1.3;
}

/* Location Quick Stats */
.location-quick-stats[b-impcydkemc] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 1px solid rgba(100, 116, 139, 0.15);
}

.quick-stat[b-impcydkemc] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    background: rgba(100, 116, 139, 0.15);
    border-radius: 6px;
    font-size: 0.75rem;
    color: rgba(203, 213, 225, 0.9);
}

.quick-stat .oi[b-impcydkemc] {
    font-size: 0.7rem;
    color: #60a5fa;
}

/* Map Toggle Button - Enhanced */
.map-toggle-btn[b-impcydkemc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 1rem;
    padding: 0.625rem 1rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.1));
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    color: #93c5fd;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
}

.map-toggle-btn:hover[b-impcydkemc] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(37, 99, 235, 0.15));
    border-color: rgba(59, 130, 246, 0.45);
    color: #bfdbfe;
}

.map-toggle-btn .oi[b-impcydkemc] {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.map-toggle-btn.expanded[b-impcydkemc] {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
}

.map-toggle-btn.expanded .oi[b-impcydkemc] {
    transform: rotate(180deg);
}

/* Collapsible Map Container */
.map-container[b-impcydkemc] {
    margin-top: 1rem;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--glass-card-border, rgba(100, 116, 139, 0.25));
    max-height: 0;
    opacity: 0;
    transition: all 0.35s ease;
}

.map-container.expanded[b-impcydkemc] {
    max-height: 300px;
    opacity: 1;
}

.map-container iframe[b-impcydkemc] {
    display: block;
    width: 100%;
    height: 250px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TEAM CARD - Enhanced with hover
   ═══════════════════════════════════════════════════════════════════════════════ */
.team-card[b-impcydkemc] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6));
    border: 1px solid var(--glass-card-border, rgba(100, 116, 139, 0.25));
    border-radius: var(--glass-card-radius-lg, 14px);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.team-card:hover[b-impcydkemc] {
    border-color: rgba(100, 116, 139, 0.4);
}

.team-card-header[b-impcydkemc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(37, 99, 235, 0.06));
    border-bottom: 1px solid var(--glass-card-header-border, rgba(100, 116, 139, 0.2));
}

.team-card-header-title[b-impcydkemc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.team-card-header-title .oi[b-impcydkemc] {
    color: #60a5fa;
    font-size: 1rem;
}

.team-card-header-title h5[b-impcydkemc] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--glass-card-header-text, #f8fafc);
    letter-spacing: -0.01em;
}

.team-card-body[b-impcydkemc] {
    padding: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GLASS CARD - Page-specific variant (cameras section)
   ═══════════════════════════════════════════════════════════════════════════════ */
.glass-card[b-impcydkemc] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6));
    border: 1px solid var(--glass-card-border, rgba(100, 116, 139, 0.25));
    border-radius: var(--glass-card-radius-lg, 14px);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    margin-bottom: 1rem;
    transition: border-color 0.2s ease;
}

.glass-card:hover[b-impcydkemc] {
    border-color: rgba(100, 116, 139, 0.4);
}

.glass-card-header[b-impcydkemc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(37, 99, 235, 0.06));
    border-bottom: 1px solid var(--glass-card-header-border, rgba(100, 116, 139, 0.2));
}

.glass-card-header.warning[b-impcydkemc] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(245, 158, 11, 0.06));
}

.glass-card-header.success[b-impcydkemc] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(22, 163, 74, 0.06));
}

.glass-card-header-title[b-impcydkemc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.glass-card-header-title .oi[b-impcydkemc] {
    color: #60a5fa;
    font-size: 1rem;
}

.glass-card-header.warning .glass-card-header-title .oi[b-impcydkemc] {
    color: #fbbf24;
}

.glass-card-header-title h5[b-impcydkemc] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--glass-card-header-text, #f8fafc);
    letter-spacing: -0.01em;
}

.glass-card-body[b-impcydkemc] {
    padding: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TAB CONTENT CONTAINER - With depth effect
   ═══════════════════════════════════════════════════════════════════════════════ */
.tab-content-container[b-impcydkemc] {
    position: relative;
    padding: 1.25rem;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid var(--glass-card-border, rgba(100, 116, 139, 0.2));
    border-top: none;
    border-radius: 0 0 var(--glass-card-radius-lg, 14px) var(--glass-card-radius-lg, 14px);
}

/* Depth effect at top of content */
.tab-content-container[b-impcydkemc]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, transparent 100%);
    pointer-events: none;
    border-radius: 0;
}

.location-status-row[b-impcydkemc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.15);
}

.location-status-info[b-impcydkemc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.location-status-info .text-muted[b-impcydkemc] {
    color: rgba(148, 163, 184, 0.8) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE - Tablet (991.98px)
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .action-cards-row[b-impcydkemc] {
        grid-template-columns: 1fr;
    }

    .location-content-grid[b-impcydkemc] {
        grid-template-columns: 1fr;
    }

    [b-impcydkemc] .custom-tabs .nav-item .nav-link {
        white-space: nowrap;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE - Mobile (767.98px)
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .tab-content-container[b-impcydkemc] {
        padding: 1rem;
    }

    .tab-content-container[b-impcydkemc]::before {
        height: 30px;
    }

    .pending-authorization-card[b-impcydkemc],
    .all-clear-card[b-impcydkemc],
    .police-reports-card[b-impcydkemc] {
        padding: 0.875rem 1rem;
        border-radius: var(--glass-card-radius, 12px);
    }

    .police-reports-header[b-impcydkemc] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .all-clear-icon-wrapper[b-impcydkemc] {
        width: 40px;
        height: 40px;
    }

    .all-clear-icon-wrapper .oi[b-impcydkemc] {
        font-size: 1.5rem;
    }

    .all-clear-glow[b-impcydkemc] {
        width: 48px;
        height: 48px;
    }

    .all-clear-text h5[b-impcydkemc] {
        font-size: 1rem;
    }

    .pending-header[b-impcydkemc] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .location-content-grid[b-impcydkemc] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .location-info-card[b-impcydkemc] {
        padding: 1rem;
        border-radius: var(--glass-card-radius, 12px);
    }

    .info-icon[b-impcydkemc] {
        width: 26px;
        height: 26px;
    }

    .location-quick-stats[b-impcydkemc] {
        flex-wrap: wrap;
    }

    .team-card[b-impcydkemc],
    .glass-card[b-impcydkemc] {
        border-radius: var(--glass-card-radius, 12px);
    }

    .team-card-header[b-impcydkemc] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.875rem 1rem;
    }

    [b-impcydkemc] .custom-tabs .nav-tabs {
        padding: 0.25rem 0.25rem 0;
        border-radius: 10px 10px 0 0;
    }

    [b-impcydkemc] .custom-tabs .nav-item .nav-link {
        padding: 0.625rem 0.875rem !important;
        font-size: 0.9rem;
    }

    .tab-badge[b-impcydkemc] {
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        font-size: 0.7rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE - XSmall Mobile (575.98px)
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .tab-content-container[b-impcydkemc] {
        padding: 0.75rem;
        border-radius: 0 0 10px 10px;
    }

    .tab-content-container[b-impcydkemc]::before {
        height: 24px;
    }

    .location-status-row[b-impcydkemc] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .pending-title h5[b-impcydkemc] {
        font-size: 0.9rem;
    }

    .all-clear-card[b-impcydkemc] {
        padding: 1rem;
    }

    .all-clear-content[b-impcydkemc] {
        gap: 0.75rem;
    }

    .all-clear-icon-wrapper[b-impcydkemc] {
        width: 36px;
        height: 36px;
    }

    .all-clear-icon-wrapper .oi[b-impcydkemc] {
        font-size: 1.35rem;
    }

    .all-clear-glow[b-impcydkemc] {
        width: 44px;
        height: 44px;
    }

    .all-clear-text h5[b-impcydkemc] {
        font-size: 0.95rem;
    }

    .all-clear-text p[b-impcydkemc] {
        font-size: 0.8rem;
    }

    .location-info-card[b-impcydkemc],
    .team-card[b-impcydkemc],
    .glass-card[b-impcydkemc] {
        border-radius: 10px;
    }

    .location-info-header[b-impcydkemc],
    .team-card-header[b-impcydkemc],
    .glass-card-header[b-impcydkemc] {
        padding: 0.75rem 1rem;
    }

    .location-info-header h5[b-impcydkemc],
    .team-card-header-title h5[b-impcydkemc],
    .glass-card-header-title h5[b-impcydkemc] {
        font-size: 0.875rem;
    }

    .info-item[b-impcydkemc] {
        gap: 0.6rem;
    }

    .info-icon[b-impcydkemc] {
        width: 24px;
        height: 24px;
        font-size: 0.65rem;
    }

    .info-content label[b-impcydkemc] {
        font-size: 0.65rem;
    }

    .info-content p[b-impcydkemc] {
        font-size: 0.85rem;
    }

    .location-quick-stats[b-impcydkemc] {
        margin-top: 0.75rem;
        padding-top: 0.75rem;
    }

    .quick-stat[b-impcydkemc] {
        padding: 0.35rem 0.6rem;
        font-size: 0.7rem;
    }

    .map-toggle-btn[b-impcydkemc] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    [b-impcydkemc] .custom-tabs .nav-item .nav-link {
        padding: 0.5rem 0.65rem !important;
        font-size: 0.8rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   REDUCED MOTION - Accessibility
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .manager-overview-page[b-impcydkemc],
    .pending-authorization-card[b-impcydkemc] {
        animation: none;
    }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
/* NotFound page specific styles - inherits animated background and glass card from login.css */

.error-content[b-ininvqicf0] {
    text-align: center;
    width: 100%;
    animation: slideUp 0.6s ease-out;
    animation-delay: 0.2s;
    opacity: 0;
    animation-fill-mode: forwards;
}

.error-icon-container[b-ininvqicf0] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 193, 7, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem auto;
    animation: float 4s ease-in-out infinite;
}

.error-icon-container .oi[b-ininvqicf0] {
    font-size: 2.5rem;
    color: #FFD700;
}

.error-title[b-ininvqicf0] {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.75rem;
    margin: 1rem 0;
    font-weight: 600;
}

.error-message[b-ininvqicf0] {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2rem;
    line-height: 1.6;
    font-size: 1rem;
}

.action-btn[b-ininvqicf0] {
    margin-top: 0.5rem;
    width: 100%;
    padding: 0.9rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
}

.action-btn[b-ininvqicf0]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.action-btn:hover[b-ininvqicf0]::before {
    left: 100%;
}

.primary-btn[b-ininvqicf0] {
    color: #0D6EFD;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
}

.primary-btn:hover[b-ininvqicf0] {
    background: linear-gradient(135deg, #ffffff, rgba(255, 255, 255, 0.9));
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(13, 110, 253, 0.4);
}

.action-btn:active[b-ininvqicf0] {
    transform: translateY(-1px) scale(0.98);
    transition: all 0.1s ease;
}

.action-btn:focus[b-ininvqicf0] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.home-icon[b-ininvqicf0] {
    font-size: 1.2rem;
}

/* Responsive Design */
@media (max-width: 480px) {
    .error-icon-container[b-ininvqicf0] {
        width: 70px;
        height: 70px;
    }

    .error-icon-container .oi[b-ininvqicf0] {
        font-size: 2rem;
    }

    .error-title[b-ininvqicf0] {
        font-size: 1.5rem;
    }

    .action-btn[b-ininvqicf0] {
        padding: 0.8rem 1.5rem;
    }
}
/* /Components/Pages/UserPanel/AddLocalDriveOff.razor.rz.scp.css */
/* Modern Glass Form - Add Local Drive-Off */

/* Page container */
.add-local-driveoff-page[b-gjndme3b28] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    color: #e2e8f0;
}

/* Centered form container */
.fixwidth-container[b-gjndme3b28] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
}

/* Glass form section — replaces old .card */
.form-section[b-gjndme3b28] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6));
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

.form-section-header[b-gjndme3b28] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(90deg, rgba(185, 28, 28, 0.38), rgba(220, 38, 38, 0.18));
    border-bottom: 1px solid rgba(248, 113, 113, 0.2);
}

.form-title[b-gjndme3b28] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.form-title .icon-wrapper[b-gjndme3b28] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-title .icon-wrapper .oi[b-gjndme3b28] {
    color: #f87171;
    font-size: 1.1rem;
}

.form-title h3[b-gjndme3b28] {
    margin: 0;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: #f8fafc;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.form-section-body[b-gjndme3b28] {
    padding: 1.25rem 1.4rem;
}

/* Form layout compact spacing */
[b-gjndme3b28] .dxbl-form-layout-item {
    margin-bottom: 0.5rem;
}

[b-gjndme3b28] .dxbl-form-layout-item-caption {
    font-size: 0.95rem;
    font-weight: 600;
    color: #cbd5e1;
    margin-bottom: 0.25rem;
    padding-top: 0.25rem;
}

/* License validation styling */
.license-validation[b-gjndme3b28] {
    font-size: 0.875rem;
    padding: 0.25rem 0;
    margin-top: 0.25rem;
}

/* Button styling */
.btn-sm[b-gjndme3b28] {
    min-height: 30px;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-sm:hover[b-gjndme3b28] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Badge styling */
.badge[b-gjndme3b28] {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}

/* Alert styling - modern glassmorphic */
[b-gjndme3b28] .alert-warning {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.28);
    border-radius: 12px;
    color: #fde68a;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(120, 53, 15, 0.18);
    padding: 0.75rem 1rem;
}

[b-gjndme3b28] .alert-danger {
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid rgba(248, 113, 113, 0.3);
    border-radius: 12px;
    color: #fecaca;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(127, 29, 29, 0.2);
    padding: 0.75rem 1rem;
}

[b-gjndme3b28] .alert-info {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.28);
    border-radius: 12px;
    color: #bfdbfe;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(30, 64, 175, 0.18);
    padding: 0.75rem 1rem;
}

/* Buttons now use global styles from site.css */

/* Modern Popup Styling */
.modern-confirmation-popup[b-gjndme3b28] {
    --popup-border-radius: 16px;
    --popup-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    --header-bg: linear-gradient(135deg, #f1f3f4 0%, #e8eaed 100%);
    --header-border: #dadce0;
    --warning-color: #ea4335;
    --text-primary: #1a1a1a;
    --text-secondary: #5f6368;
}

    /* Popup Container */
    .modern-confirmation-popup .dx-popup-wrapper[b-gjndme3b28] {
        box-shadow: var(--popup-shadow);
        border-radius: var(--popup-border-radius);
        border: 2px solid #dadce0;
        overflow: hidden;
        animation: popupFadeIn 0.3s ease-out;
    }

/* Header Styling */
.modern-popup-header[b-gjndme3b28] {
    background: var(--header-bg);
    border-bottom: 2px solid var(--header-border);
    padding: 0 !important;
}

.custom-popup-header[b-gjndme3b28] {
    display: flex;
    align-items: center;
    padding: 0.625rem 1.25rem 0.25rem 1.25rem;
    gap: 0.625rem;
}

.header-icon-wrapper[b-gjndme3b28] {
    background: var(--warning-color);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 2px 6px rgba(234, 67, 53, 0.3);
}

.header-content h5[b-gjndme3b28] {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.3;
}

.header-subtitle[b-gjndme3b28] {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
}

/* Body Styling */
.modern-popup-body[b-gjndme3b28] {
    background: #ffffff;
    padding: 0 !important;
}

.custom-popup-content[b-gjndme3b28] {
    padding: 0.5rem 1.25rem 0.625rem 1.25rem;
}

.main-message[b-gjndme3b28] {
    background: #fef7e0;
    border: 1px solid #fbbf24;
    border-left: 4px solid var(--warning-color);
    border-radius: 6px;
    padding: 0.75rem;
    margin: 0;
}

.message-icon[b-gjndme3b28] {
    color: #d97706;
    font-size: 1.1rem;
    margin-top: 0.125rem;
}

.message-text p[b-gjndme3b28] {
    color: var(--text-primary);
    font-size: 0.875rem;
    line-height: 1.3;
    margin-bottom: 0.375rem;
}

    .message-text p:last-child[b-gjndme3b28] {
        margin-bottom: 0;
    }

.plate-display[b-gjndme3b28] {
    background: #f3f4f6;
    color: var(--text-primary);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    font-family: 'Courier New', monospace;
    font-weight: 700;
}

.country-display[b-gjndme3b28] {
    color: var(--text-primary);
    font-weight: 700;
}

.confirmation-question[b-gjndme3b28] {
    font-weight: 600;
    color: var(--text-primary);
}

/* Footer Styling */
.modern-popup-footer[b-gjndme3b28] {
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    padding: 0 !important;
}

.custom-popup-footer[b-gjndme3b28] {
    padding: 0.625rem 1.25rem;
}

    /* Button Enhancements */
    .custom-popup-footer .btn[b-gjndme3b28] {
        border-radius: 6px;
        font-weight: 600;
        padding: 0.4rem 1rem;
        transition: all 0.2s ease;
        min-width: 100px;
        font-size: 0.85rem;
    }

        .custom-popup-footer .btn:hover[b-gjndme3b28] {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

/* Close Button Styling */
.modern-confirmation-popup .dx-popup-header .dx-button[b-gjndme3b28] {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

    .modern-confirmation-popup .dx-popup-header .dx-button:hover[b-gjndme3b28] {
        background: rgba(0, 0, 0, 0.2);
        transform: scale(1.1);
    }

/* Backdrop */
.modern-confirmation-popup .dx-popup-backdrop[b-gjndme3b28] {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
}

.loading-spinner[b-gjndme3b28] {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid #ffffff33;
    border-top: 2px solid #ffffff;
    border-radius: 50%;
    animation: spin-b-gjndme3b28 1s linear infinite;
    margin-left: 8px;
}

.loading .loading-spinner[b-gjndme3b28] {
    display: inline-block;
}

.loading .button-text[b-gjndme3b28] {
    margin-right: 8px;
}

.spinning .oi-reload[b-gjndme3b28] {
    animation: spin-b-gjndme3b28 1s linear infinite;
}

@keyframes spin-b-gjndme3b28 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* Responsive adjustments */
@media (max-width: 992px) {
    .fixwidth-container[b-gjndme3b28] {
        max-width: 100%;
        padding: 0 0.75rem;
    }
}

@media (max-width: 768px) {
    .fixwidth-container[b-gjndme3b28] {
        padding: 0 0.5rem;
    }

    .form-section-body[b-gjndme3b28] {
        padding: 0.85rem;
    }

    .form-section-header[b-gjndme3b28] {
        padding: 0.75rem 0.85rem;
    }

    .form-title h3[b-gjndme3b28] {
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) {
    .form-section[b-gjndme3b28] {
        border-radius: 10px;
    }

    .form-section-body[b-gjndme3b28] {
        padding: 0.65rem;
    }
}

/* Mobile Responsiveness for Popup */
@media (max-width: 576px) {
    .modern-confirmation-popup .dx-popup-wrapper[b-gjndme3b28] {
        margin: 0.75rem;
        border-radius: 10px;
    }

    .custom-popup-header[b-gjndme3b28] {
        padding: 0.5rem 1rem 0.125rem 1rem;
        gap: 0.5rem;
    }

    .header-icon-wrapper[b-gjndme3b28] {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .header-content h5[b-gjndme3b28] {
        font-size: 0.9rem;
    }

    .custom-popup-content[b-gjndme3b28] {
        padding: 0.375rem 1rem 0.5rem 1rem;
    }

    .custom-popup-footer[b-gjndme3b28] {
        padding: 0.5rem 1rem;
    }

        .custom-popup-footer .btn[b-gjndme3b28] {
            min-width: 100%;
            padding: 0.5rem 1rem;
            font-size: 0.8rem;
        }

    .main-message[b-gjndme3b28] {
        padding: 0.625rem;
    }

    .message-text p[b-gjndme3b28] {
        font-size: 0.8rem;
    }
}

/* Photo Drop Zone */
.photo-drop-area[b-gjndme3b28] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem;
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    text-align: center;
    gap: 0.3rem;
}

/* Full-width: horizontal layout with icon left, text right */
.photo-drop-area-wide[b-gjndme3b28] {
    flex-direction: row;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
}

.photo-drop-area-wide .photo-drop-icon[b-gjndme3b28] {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.photo-drop-area-wide .photo-drop-text[b-gjndme3b28],
.photo-drop-area-wide .photo-drop-hint[b-gjndme3b28] {
    text-align: left;
}

.photo-drop-area:hover[b-gjndme3b28],
.photo-drop-area-hover[b-gjndme3b28] {
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.05);
}

.photo-drop-icon[b-gjndme3b28] {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.3);
}

.photo-drop-text[b-gjndme3b28] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
}

.photo-drop-hint[b-gjndme3b28] {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.3);
}

/* Photo Preview — centered in full-width row */
.photo-preview-wide[b-gjndme3b28] {
    display: flex;
    justify-content: center;
}

.photo-preview-compact[b-gjndme3b28] {
    position: relative;
    display: inline-flex;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(100, 116, 139, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    max-width: 100%;
}

.photo-thumb[b-gjndme3b28] {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
    display: block;
}

.photo-preview-overlay[b-gjndme3b28] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.35rem 0.5rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 0.2s;
}

.photo-preview-compact:hover .photo-preview-overlay[b-gjndme3b28] {
    opacity: 1;
}

.btn-remove-photo[b-gjndme3b28] {
    background: rgba(220, 38, 38, 0.85);
    color: white;
    border: none;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-remove-photo:hover[b-gjndme3b28] {
    background: rgba(220, 38, 38, 1);
}

.photo-selected-info[b-gjndme3b28] {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(51, 65, 85, 0.3);
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: 10px;
    font-size: 0.85rem;
    color: rgba(203, 213, 225, 0.9);
}

@media (max-width: 575.98px) {
    .photo-drop-area-wide[b-gjndme3b28] {
        flex-direction: column;
        padding: 1rem 0.75rem;
    }

    .photo-thumb[b-gjndme3b28] {
        max-height: 140px;
    }

    .photo-preview-overlay[b-gjndme3b28] {
        opacity: 1;
    }
}
/* /Components/Pages/UserPanel/AddPayment.razor.rz.scp.css */
/* Add Payment Page - Modern Glass Form Styling */

.add-payment-page[b-7oju5lgrck] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    color: #e2e8f0;
}

/* Centered form container - professional form page style */
.form-container-centered[b-7oju5lgrck] {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Modern subtle info message */
.modern-info-message[b-7oju5lgrck] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(148, 163, 235, 0.25);
    border-radius: 12px;
    padding: 0.65rem 0.95rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.modern-info-message small[b-7oju5lgrck] {
    color: rgba(148, 163, 235, 0.85) !important;
    font-size: 0.75rem;
    line-height: 1.4;
    display: block;
}

/* First Line: License Plate Row (centered) */
.plate-row[b-7oju5lgrck] {
    margin-bottom: 1.5rem;
}

/* Second Line: Saldo Row (full width) */
.saldo-row[b-7oju5lgrck] {
    /* Saldo display component will fill this */
}

/* Glass form section — replaces old .card */
.form-section[b-7oju5lgrck] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6));
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

.form-section-header[b-7oju5lgrck] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.08));
    border-bottom: 1px solid rgba(34, 197, 94, 0.12);
}

.form-title[b-7oju5lgrck] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.form-title .icon-wrapper[b-7oju5lgrck] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-title .icon-wrapper .oi[b-7oju5lgrck] {
    color: #4ade80;
    font-size: 1.1rem;
}

.form-title h3[b-7oju5lgrck] {
    margin: 0;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: #f8fafc;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.form-section-body[b-7oju5lgrck] {
    padding: 1.25rem 1.4rem;
}

/* Form layout improvements */
.add-payment-page .dxbl-form-layout-item[b-7oju5lgrck] {
    margin-bottom: 0.5rem;
}

[b-7oju5lgrck] .dxbl-form-layout-item-caption {
    font-size: 0.95rem;
    font-weight: 600;
    color: #cbd5e1;
    margin-bottom: 0.25rem;
    padding-top: 0.25rem;
}

/* Plate Selection Row - single line: Label | Dropdown | Buttons */
.plate-selection-row[b-7oju5lgrck] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.plate-selection-label[b-7oju5lgrck] {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(148, 163, 184, 0.85);
    white-space: nowrap;
    flex-shrink: 0;
}

.plate-selection-dropdown[b-7oju5lgrck] {
    flex: 1;
    min-width: 200px;
}

/* Center the license plate display inside dropdown */
.plate-selection-dropdown .dxbl-listbox-item[b-7oju5lgrck],
.plate-selection-dropdown .dxbl-text-edit-input[b-7oju5lgrck] {
    text-align: center;
}

.plate-selection-dropdown .dxbl-listbox-item > *[b-7oju5lgrck],
.plate-selection-dropdown .license-plate-display[b-7oju5lgrck] {
    margin: 0 auto;
}

/* Responsive: stack on smaller screens */
@media (max-width: 768px) {
    .plate-selection-row[b-7oju5lgrck] {
        flex-wrap: wrap;
    }

    .plate-selection-label[b-7oju5lgrck] {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .plate-selection-dropdown[b-7oju5lgrck] {
        flex: 1;
        min-width: 150px;
    }

    .plate-row[b-7oju5lgrck] {
        margin-bottom: 1rem;
    }

    .form-section-body[b-7oju5lgrck] {
        padding: 0.85rem;
    }

    .form-section-header[b-7oju5lgrck] {
        padding: 0.75rem 0.85rem;
    }

    .form-title h3[b-7oju5lgrck] {
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) {
    .plate-selection-row[b-7oju5lgrck] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .plate-selection-dropdown[b-7oju5lgrck] {
        width: 100%;
    }

    .plate-selection-row .dxbl-btn[b-7oju5lgrck] {
        width: 100%;
    }

    .form-section[b-7oju5lgrck] {
        border-radius: 10px;
    }

    .form-section-body[b-7oju5lgrck] {
        padding: 0.65rem;
    }

    /* Stack action buttons vertically on mobile */
    .d-flex.justify-content-end.gap-2[b-7oju5lgrck] {
        flex-direction: column;
    }

    .d-flex.justify-content-end.gap-2 .dxbl-btn[b-7oju5lgrck] {
        width: 100%;
    }
}

/* Button container alignment */
.add-payment-page .d-flex.gap-2[b-7oju5lgrck] {
    gap: 0.75rem !important;
}

/* Make sure all form inputs have consistent sizing */
.add-payment-page .dxbl-combo-box[b-7oju5lgrck],
.add-payment-page .dxbl-text-edit[b-7oju5lgrck],
.add-payment-page .dxbl-spin-edit[b-7oju5lgrck],
.add-payment-page .dxbl-date-edit[b-7oju5lgrck],
.add-payment-page .dxbl-memo[b-7oju5lgrck] {
    width: 100%;
}

/* Subtle background pattern (very light) */
.add-payment-page[b-7oju5lgrck]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    opacity: 0.02;
    background-image:
        radial-gradient(circle at 30% 30%, rgba(148, 163, 235, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(37, 99, 235, 0.08) 0%, transparent 50%);
    background-size: 100% 100%;
    pointer-events: none;
}

/* Alert styling overrides for this page */
.add-payment-page .alert-warning[b-7oju5lgrck] {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.28);
    border-radius: 16px;
    color: #fde68a;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(120, 53, 15, 0.18);
}

.add-payment-page .alert-info[b-7oju5lgrck] {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.28);
    border-radius: 16px;
    color: #bfdbfe;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(30, 64, 175, 0.18);
}

.add-payment-page .alert-danger[b-7oju5lgrck] {
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid rgba(248, 113, 113, 0.3);
    border-radius: 16px;
    color: #fecaca;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(127, 29, 29, 0.2);
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .form-container-centered[b-7oju5lgrck] {
        max-width: 100%;
        padding: 0 0.75rem;
    }
}

@media (max-width: 768px) {
    .form-container-centered[b-7oju5lgrck] {
        padding: 0 0.5rem;
    }
}
/* /Components/Pages/UserPanel/AuthorizeTransaction.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════
   AuthorizeTransaction - Split Layout Design
   Row 1: Hero Identity Bar | Row 2: Data 60% + Image 40% | Row 3: Actions
   ═══════════════════════════════════════════════════════════════════════════════ */

.authorize-page[b-x5h3kcvn4i] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem 2rem;
    color: #e2e8f0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ERROR & WARNING PANELS
   ═══════════════════════════════════════════════════════════════════════════════ */
.error-panel[b-x5h3kcvn4i],
.warning-panel[b-x5h3kcvn4i] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.error-panel[b-x5h3kcvn4i] {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(248, 113, 113, 0.3);
    color: #fecaca;
}

.warning-panel[b-x5h3kcvn4i] {
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fef3c7;
}

.error-panel .oi[b-x5h3kcvn4i],
.warning-panel .oi[b-x5h3kcvn4i] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ROW 1: HERO IDENTITY BAR - Single Horizontal Line
   ═══════════════════════════════════════════════════════════════════════════════ */
.hero-identity-bar[b-x5h3kcvn4i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    margin-bottom: 0.25rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(51, 65, 85, 0.7));
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 14px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.identity-left[b-x5h3kcvn4i] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.plate-wrapper[b-x5h3kcvn4i] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.meta-badges[b-x5h3kcvn4i] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.meta-badge[b-x5h3kcvn4i] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    background: rgba(71, 85, 105, 0.4);
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 6px;
    font-size: 0.8rem;
    color: rgba(203, 213, 225, 0.9);
    white-space: nowrap;
}

.meta-badge .oi[b-x5h3kcvn4i] {
    font-size: 0.7rem;
    opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   NAVIGATION SECTION - Queue Progress + Action Button
   ═══════════════════════════════════════════════════════════════════════════════ */
.navigation-section[b-x5h3kcvn4i] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* Queue Indicator - Shows remaining transactions */
.queue-indicator[b-x5h3kcvn4i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.45rem 0.875rem;
    min-width: 90px;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6));
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: 10px;
}

.queue-label[b-x5h3kcvn4i] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(148, 163, 184, 0.6);
    text-align: center;
}

.queue-progress[b-x5h3kcvn4i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Position display (e.g., "5/46") */
.position-display[b-x5h3kcvn4i] {
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
}

.current-position[b-x5h3kcvn4i] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: #60a5fa;
    line-height: 1.1;
}

.position-separator[b-x5h3kcvn4i],
.total-count[b-x5h3kcvn4i] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.8);
}

/* Keep these for backwards compatibility */
.remaining-count[b-x5h3kcvn4i] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: #60a5fa;
    line-height: 1.1;
}

.remaining-text[b-x5h3kcvn4i] {
    font-size: 0.65rem;
    font-weight: 500;
    color: rgba(148, 163, 184, 0.8);
    text-transform: lowercase;
}

.queue-complete[b-x5h3kcvn4i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #4ade80;
}

.queue-complete .oi[b-x5h3kcvn4i] {
    font-size: 1rem;
}

/* NEXT Button - Primary navigation action */
.next-btn[b-x5h3kcvn4i] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 48px;
    padding: 0 1.25rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.25));
    border: 1px solid rgba(96, 165, 250, 0.4);
    border-radius: 12px;
    color: #93c5fd;
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.next-btn:hover[b-x5h3kcvn4i] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.45), rgba(37, 99, 235, 0.4));
    color: #ffffff;
    transform: translateX(3px);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
    border-color: rgba(96, 165, 250, 0.6);
}

.next-btn:focus-visible[b-x5h3kcvn4i] {
    outline: 2px solid rgba(96, 165, 250, 0.8);
    outline-offset: 2px;
}

.next-btn:active[b-x5h3kcvn4i] {
    transform: translateX(1px) scale(0.98);
}

.next-btn .oi[b-x5h3kcvn4i] {
    font-size: 0.85rem;
    transition: transform 0.25s ease;
}

.next-btn:hover .oi[b-x5h3kcvn4i] {
    transform: translateX(3px);
}

.next-text[b-x5h3kcvn4i] {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* NEXT Button - Loading State */
.next-btn.is-loading[b-x5h3kcvn4i] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.15));
    border-color: rgba(96, 165, 250, 0.3);
    cursor: wait;
    pointer-events: none;
}

.next-btn.is-loading:hover[b-x5h3kcvn4i] {
    transform: none;
}

.next-spinner[b-x5h3kcvn4i] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(147, 197, 253, 0.3);
    border-top-color: #93c5fd;
    border-radius: 50%;
    animation: next-spin-b-x5h3kcvn4i 0.7s linear infinite;
}

@keyframes next-spin-b-x5h3kcvn4i {
    to { transform: rotate(360deg); }
}

/* DONE Button - When queue is empty */
.done-btn[b-x5h3kcvn4i] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 48px;
    padding: 0 1.25rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(22, 163, 74, 0.2));
    border: 1px solid rgba(74, 222, 128, 0.4);
    border-radius: 12px;
    color: #86efac;
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
}

.done-btn:hover[b-x5h3kcvn4i] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.4), rgba(22, 163, 74, 0.35));
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
    border-color: rgba(74, 222, 128, 0.6);
    transform: scale(1.02);
}

.done-btn:active[b-x5h3kcvn4i] {
    transform: scale(0.98);
}

.done-btn .oi[b-x5h3kcvn4i] {
    font-size: 0.9rem;
}

.done-text[b-x5h3kcvn4i] {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ROW 2: CONTENT SPLIT - Data (60%) | Image (40%)
   ═══════════════════════════════════════════════════════════════════════════════ */
.content-split[b-x5h3kcvn4i] {
    display: flex;
    gap: 1rem;
    min-height: 400px;
    /* Allow container to grow when content is resized */
    height: auto;
    overflow: visible;
}

/* Data Section - 60% width */
.data-section[b-x5h3kcvn4i] {
    flex: 0 0 60%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    order: 1;
    /* Allow section to grow when content (like resized textarea) grows */
    min-height: fit-content;
    overflow: visible;
}

/* Image Section - 40% width */
.image-section[b-x5h3kcvn4i] {
    flex: 0 0 calc(40% - 1rem);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    order: 2;
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.2),
        0 4px 20px rgba(0, 0, 0, 0.15);
}

.image-container[b-x5h3kcvn4i] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0.5rem;
}

.evidence-image[b-x5h3kcvn4i] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.image-label[b-x5h3kcvn4i] {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    font-size: 0.65rem;
    color: rgba(203, 213, 225, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

.image-label .oi[b-x5h3kcvn4i] {
    font-size: 0.6rem;
    opacity: 0.8;
}

.no-image[b-x5h3kcvn4i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: rgba(148, 163, 184, 0.6);
    text-align: center;
}

.no-image .oi[b-x5h3kcvn4i] {
    font-size: 3rem;
    opacity: 0.4;
}

/* Image Zoom Hint - Shows on hover */
.image-container[b-x5h3kcvn4i] {
    cursor: pointer;
}

.image-zoom-hint[b-x5h3kcvn4i] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    opacity: 0;
    transition: all 0.2s ease;
    pointer-events: none;
}

.image-container:hover .image-zoom-hint[b-x5h3kcvn4i] {
    opacity: 1;
}

.image-zoom-hint .oi[b-x5h3kcvn4i] {
    font-size: 0.9rem;
}

/* Vehicle ID Badge */
.vehicle-id-badge[b-x5h3kcvn4i] {
    position: absolute;
    top: 0.75rem; left: 0.75rem; right: 0.75rem;
    display: flex; align-items: center; gap: 4px;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    border-radius: 6px;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.4;
    pointer-events: none;
    z-index: 2;
}
.vehicle-id-badge .oi-bolt[b-x5h3kcvn4i] { color: #F59E0B; font-size: 0.55rem; flex-shrink: 0; }
.vehicle-id-badge-loading[b-x5h3kcvn4i] { opacity: 0.7; }
.vehicle-id-badge-loading .oi-loop-circular[b-x5h3kcvn4i] { animation: vid-spin-b-x5h3kcvn4i 1s linear infinite; }
@keyframes vid-spin-b-x5h3kcvn4i { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Pencil edit button inside vehicle-id badge */
.vehicle-id-edit-btn[b-x5h3kcvn4i] {
    pointer-events: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,0.5);
    padding: 0 2px;
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.55rem;
    line-height: 1;
    transition: color 0.15s;
}
.vehicle-id-edit-btn:hover[b-x5h3kcvn4i] { color: #F59E0B; }

/* ═══ Vehicle Re-identification Popup ═══ */

.vid-overlay[b-x5h3kcvn4i] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: vid-fadeIn-b-x5h3kcvn4i 0.2s ease;
}

.vid-popup[b-x5h3kcvn4i] {
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.95), rgba(51, 65, 85, 0.9));
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 20px;
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), 0 12px 24px rgba(0, 0, 0, 0.2);
    animation: vid-slideIn-b-x5h3kcvn4i 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vid-popup-icon[b-x5h3kcvn4i] {
    width: 56px; height: 56px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.15));
    display: flex; align-items: center; justify-content: center;
}
.vid-popup-icon .oi[b-x5h3kcvn4i] { font-size: 1.5rem; color: #F59E0B; }

.vid-popup-title[b-x5h3kcvn4i] {
    font-size: 1.1rem; font-weight: 700; color: #f8fafc; margin-bottom: 1rem;
}

.vid-previous-result[b-x5h3kcvn4i], .vid-new-result[b-x5h3kcvn4i], .vid-hint-section[b-x5h3kcvn4i],
.vid-processing-section[b-x5h3kcvn4i], .vid-error-section[b-x5h3kcvn4i] {
    padding: 0.75rem; border-radius: 10px; margin-bottom: 0.75rem; text-align: left;
}

.vid-section-label[b-x5h3kcvn4i] {
    display: block; font-size: 0.65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: rgba(148, 163, 184, 0.6); margin-bottom: 0.35rem;
}

.vid-previous-result[b-x5h3kcvn4i] {
    background: rgba(71, 85, 105, 0.3);
    border: 1px solid rgba(100, 116, 139, 0.2);
}

.vid-result-row[b-x5h3kcvn4i] {
    font-size: 0.95rem; font-weight: 600; color: #f1f5f9;
}
.vid-color[b-x5h3kcvn4i] { color: rgba(148, 163, 184, 0.7); }

.vid-new-result[b-x5h3kcvn4i] {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.vid-result-success[b-x5h3kcvn4i] { color: #F59E0B; }

.vid-hint-input[b-x5h3kcvn4i] {
    width: 100%; padding: 0.5rem 0.75rem;
    border: 1px solid rgba(100, 116, 139, 0.3); border-radius: 8px;
    background: rgba(15, 23, 42, 0.6); color: #f1f5f9;
    font-size: 0.9rem; outline: none; transition: border-color 0.2s;
    box-sizing: border-box;
}
.vid-hint-input:focus[b-x5h3kcvn4i] {
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}
.vid-hint-input[b-x5h3kcvn4i]::placeholder { color: rgba(148, 163, 184, 0.5); }

.vid-hint-sent[b-x5h3kcvn4i] { margin-bottom: 0.75rem; }
.vid-hint-text[b-x5h3kcvn4i] { font-style: italic; color: #F59E0B; font-size: 0.9rem; }

.vid-spinner-row[b-x5h3kcvn4i] {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.75rem; background: rgba(245, 158, 11, 0.08);
    border-radius: 8px; color: rgba(245, 158, 11, 0.9); font-size: 0.85rem;
}
.vid-spin-icon[b-x5h3kcvn4i] { animation: vid-spin-b-x5h3kcvn4i 1s linear infinite; }

.vid-error-section[b-x5h3kcvn4i] {
    display: flex; align-items: center; gap: 0.5rem;
    background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(248, 113, 113, 0.25);
    color: #fca5a5; font-size: 0.9rem;
}

.vid-popup-actions[b-x5h3kcvn4i] {
    display: flex; gap: 0.75rem; justify-content: center; margin-top: 1.25rem;
}

.vid-btn[b-x5h3kcvn4i] {
    padding: 0.65rem 1.5rem; border-radius: 10px;
    font-size: 0.9rem; font-weight: 600; cursor: pointer;
    transition: all 0.2s ease; border: none;
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.vid-btn:disabled[b-x5h3kcvn4i] { opacity: 0.4; cursor: default; }

.vid-btn-cancel[b-x5h3kcvn4i] {
    background: rgba(255, 255, 255, 0.08); color: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.2);
}
.vid-btn-cancel:hover[b-x5h3kcvn4i] { background: rgba(255, 255, 255, 0.12); }

.vid-btn-confirm[b-x5h3kcvn4i] {
    background: linear-gradient(135deg, #F59E0B, #D97706); color: white;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.vid-btn-confirm:hover:not(:disabled)[b-x5h3kcvn4i] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
}

@keyframes vid-fadeIn-b-x5h3kcvn4i { from { opacity: 0; } to { opacity: 1; } }
@keyframes vid-slideIn-b-x5h3kcvn4i {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   IMAGE LIGHTBOX - Full Screen Modal
   ═══════════════════════════════════════════════════════════════════════════════ */
.image-lightbox[b-x5h3kcvn4i] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: lightbox-fade-in-b-x5h3kcvn4i 0.2s ease;
    cursor: pointer;
}

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

.lightbox-content[b-x5h3kcvn4i] {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
    cursor: default;
    animation: lightbox-zoom-in-b-x5h3kcvn4i 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes lightbox-zoom-in-b-x5h3kcvn4i {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.lightbox-close[b-x5h3kcvn4i] {
    position: absolute;
    top: -50px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: all 0.2s ease;
}

.lightbox-close:hover[b-x5h3kcvn4i] {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    transform: scale(1.1);
}

.lightbox-close .oi[b-x5h3kcvn4i] {
    font-size: 1.1rem;
}

.lightbox-image[b-x5h3kcvn4i] {
    max-width: 95vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   AMOUNT HERO - Commanding Financial Display
   ═══════════════════════════════════════════════════════════════════════════════ */
.amount-hero[b-x5h3kcvn4i] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem 1.5rem 1.25rem;
    background: linear-gradient(145deg,
        rgba(34, 197, 94, 0.15) 0%,
        rgba(22, 163, 74, 0.08) 50%,
        rgba(16, 185, 129, 0.12) 100%);
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: 16px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
    box-shadow:
        0 4px 24px rgba(34, 197, 94, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.amount-hero-header[b-x5h3kcvn4i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.amount-label[b-x5h3kcvn4i] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(34, 197, 94, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.amount-currency-badge[b-x5h3kcvn4i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.65rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(22, 163, 74, 0.2));
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 6px;
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    color: #4ade80;
    letter-spacing: 0.05em;
}

.amount-input-wrapper[b-x5h3kcvn4i] {
    width: 100%;
    position: relative;
    z-index: 2;
}

/* Ambient glow effect behind the input */
.amount-hero-glow[b-x5h3kcvn4i] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 60%;
    background: radial-gradient(ellipse at center, rgba(34, 197, 94, 0.2) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: amount-pulse-b-x5h3kcvn4i 4s ease-in-out infinite;
}

@keyframes amount-pulse-b-x5h3kcvn4i {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
}

[b-x5h3kcvn4i] .amount-hero-editor {
    width: 100%;
}

/* Style the OUTER wrapper for borders (masked input) */
[b-x5h3kcvn4i] .amount-hero-editor.dxbl-masked-input,
[b-x5h3kcvn4i] .amount-hero-editor.dxbl-text-edit {
    border: 2px solid rgba(34, 197, 94, 0.4) !important;
    border-radius: 10px !important;
    background: rgba(15, 23, 42, 0.7) !important;
    transition: all 0.25s ease !important;
    height: 56px !important;
    min-height: 56px !important;
}

[b-x5h3kcvn4i] .amount-hero-editor.dxbl-masked-input:hover,
[b-x5h3kcvn4i] .amount-hero-editor.dxbl-text-edit:hover {
    border-color: rgba(34, 197, 94, 0.5) !important;
    background: rgba(15, 23, 42, 0.8) !important;
}

[b-x5h3kcvn4i] .amount-hero-editor.dxbl-masked-input:focus-within,
[b-x5h3kcvn4i] .amount-hero-editor.dxbl-text-edit:focus-within {
    border-color: rgba(74, 222, 128, 0.6) !important;
    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.15),
        0 8px 32px rgba(34, 197, 94, 0.2) !important;
    background: rgba(15, 23, 42, 0.85) !important;
}

/* Inner input - THE HERO NUMBER */
[b-x5h3kcvn4i] .amount-hero-editor .dxbl-text-edit-input {
    font-family: var(--font-family-mono, 'JetBrains Mono', monospace) !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    text-align: right;
    color: #4ade80 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0 1rem !important;
    height: 100% !important;
    box-shadow: none !important;
    text-shadow: 0 0 30px rgba(74, 222, 128, 0.4);
    letter-spacing: -0.01em;
    line-height: 52px !important;
}

/* Validation icon positioning */
[b-x5h3kcvn4i] .amount-hero-editor .dxbl-image {
    width: 14px !important;
    height: 14px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FIELDS GRID - Compact 3-Column Layout
   ═══════════════════════════════════════════════════════════════════════════════ */
.fields-grid[b-x5h3kcvn4i] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.875rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(51, 65, 85, 0.4));
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 12px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.field-item[b-x5h3kcvn4i] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.field-label[b-x5h3kcvn4i] {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[b-x5h3kcvn4i] .compact-field {
    width: 100%;
}

/* Style OUTER wrappers for borders - consistent with global modern-forms.css */
[b-x5h3kcvn4i] .compact-field.dxbl-text-edit,
[b-x5h3kcvn4i] .compact-field.dxbl-spin-edit,
[b-x5h3kcvn4i] .compact-field.dxbl-combobox {
    border: 1px solid rgba(100, 116, 139, 0.3) !important;
    border-radius: 8px !important;
    background: rgba(15, 23, 42, 0.6) !important;
    transition: all 0.2s ease !important;
}

/* Memo wrapper needs overflow:visible for resize handle */
/* DevExpress uses custom element dxbl-memo-editor with class .dxbl-memo-edit */
[b-x5h3kcvn4i] .compact-field.dxbl-memo,
[b-x5h3kcvn4i] .compact-field.dxbl-memo-edit,
[b-x5h3kcvn4i] dxbl-memo-editor.compact-field {
    border: 1px solid rgba(100, 116, 139, 0.3) !important;
    border-radius: 8px !important;
    background: rgba(15, 23, 42, 0.6) !important;
    transition: all 0.2s ease !important;
    overflow: visible !important;
}

[b-x5h3kcvn4i] .compact-field.dxbl-text-edit:hover,
[b-x5h3kcvn4i] .compact-field.dxbl-spin-edit:hover,
[b-x5h3kcvn4i] .compact-field.dxbl-combobox:hover {
    border-color: rgba(100, 116, 139, 0.5) !important;
    background: rgba(15, 23, 42, 0.7) !important;
}

[b-x5h3kcvn4i] .compact-field.dxbl-memo:hover,
[b-x5h3kcvn4i] .compact-field.dxbl-memo-edit:hover,
[b-x5h3kcvn4i] dxbl-memo-editor.compact-field:hover {
    border-color: rgba(100, 116, 139, 0.5) !important;
    background: rgba(15, 23, 42, 0.7) !important;
}

[b-x5h3kcvn4i] .compact-field.dxbl-text-edit:focus-within,
[b-x5h3kcvn4i] .compact-field.dxbl-spin-edit:focus-within,
[b-x5h3kcvn4i] .compact-field.dxbl-combobox:focus-within {
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
    background: rgba(15, 23, 42, 0.8) !important;
}

[b-x5h3kcvn4i] .compact-field.dxbl-memo:focus-within,
[b-x5h3kcvn4i] .compact-field.dxbl-memo-edit:focus-within,
[b-x5h3kcvn4i] dxbl-memo-editor.compact-field:focus-within {
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
    background: rgba(15, 23, 42, 0.8) !important;
}

/* Inner inputs - NO border (handled by outer wrapper) */
[b-x5h3kcvn4i] .compact-field .dxbl-text-edit-input,
[b-x5h3kcvn4i] .compact-field .dxbl-combobox-input-container {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #f1f5f9 !important;
    font-size: 0.875rem !important;
    padding: 0.45rem 0.65rem !important;
}

/* Spin buttons for compact fields - inherit from modern-forms.css, no overrides needed */

/* Textarea - NO border but KEEP resize functionality */
/* DevExpress uses .dxbl-v-resize class for vertical resize mode */
/* CRITICAL: CSS resize only works when overflow is NOT visible (needs auto/hidden/scroll) */
[b-x5h3kcvn4i] .compact-field textarea,
[b-x5h3kcvn4i] .compact-field textarea.dxbl-v-resize,
[b-x5h3kcvn4i] dxbl-memo-editor.compact-field textarea {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #f1f5f9 !important;
    font-size: 0.875rem !important;
    padding: 0.45rem 0.65rem !important;
    overflow: auto !important;
    resize: vertical !important;
}

.stolen-checkbox-wrapper[b-x5h3kcvn4i] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 0.75rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.stolen-checkbox-wrapper:hover[b-x5h3kcvn4i] {
    border-color: rgba(100, 116, 139, 0.5);
    background: rgba(15, 23, 42, 0.7);
}

[b-x5h3kcvn4i] .stolen-checkbox {
    transform: scale(1.3);
    cursor: pointer;
}

[b-x5h3kcvn4i] .stolen-checkbox:checked {
    accent-color: #ef4444;
}

/* Comment field */
.comment-field[b-x5h3kcvn4i] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(51, 65, 85, 0.4));
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 12px;
    /* Allow field to grow when textarea is resized */
    flex-shrink: 0;
    min-height: fit-content;
}

[b-x5h3kcvn4i] .comment-memo textarea,
[b-x5h3kcvn4i] .comment-memo textarea.dxbl-v-resize,
[b-x5h3kcvn4i] dxbl-memo-editor.comment-memo textarea {
    min-height: 50px !important;
    max-height: none !important;
    overflow: auto !important;
    resize: vertical !important;
    /* Ensure resize handle is visible and functional */
    -webkit-appearance: none !important;
}

/* Ensure the memo wrapper allows the textarea to resize */
[b-x5h3kcvn4i] .comment-memo.dxbl-memo-edit,
[b-x5h3kcvn4i] dxbl-memo-editor.comment-memo {
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    flex-shrink: 0 !important;
}

/* Form context: ensure no parent clips the resize handle */
/* Target form element (rendered by EditForm) */
form[b-x5h3kcvn4i] {
    overflow: visible !important;
}

/* VERY HIGH SPECIFICITY: Force resize on DevExpress memo inside form */
/* This targets the exact structure: form > ... > dxbl-memo-editor > textarea */
[b-x5h3kcvn4i] form dxbl-memo-editor textarea,
[b-x5h3kcvn4i] form dxbl-memo-editor textarea.dxbl-v-resize,
[b-x5h3kcvn4i] form .dxbl-memo-edit textarea,
[b-x5h3kcvn4i] form .dxbl-memo-edit textarea.dxbl-v-resize {
    resize: vertical !important;
    overflow: auto !important;
    max-height: none !important;
    -webkit-resize: vertical !important;
}

/* Alternative: target by attribute since DevExpress may add data attributes */
[b-x5h3kcvn4i] textarea[style*="height"],
[b-x5h3kcvn4i] form textarea[style*="height"] {
    resize: vertical !important;
    overflow: auto !important;
}

/* Validation summary */
.validation-summary[b-x5h3kcvn4i] {
    color: #fca5a5;
    font-size: 0.85rem;
    padding: 0.75rem;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 8px;
}

.validation-summary:empty[b-x5h3kcvn4i] {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ROW 3: ACTION BAR - Full Width
   ═══════════════════════════════════════════════════════════════════════════════ */
.action-bar[b-x5h3kcvn4i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.25rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(51, 65, 85, 0.5));
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.secondary-actions[b-x5h3kcvn4i] {
    display: flex;
    gap: 0.5rem;
}

.action-btn[b-x5h3kcvn4i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 44px;
    padding: 0 1rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.action-btn-secondary[b-x5h3kcvn4i] {
    background: rgba(71, 85, 105, 0.5);
    border-color: rgba(100, 116, 139, 0.3);
    color: rgba(203, 213, 225, 0.9);
}

.action-btn-secondary:hover[b-x5h3kcvn4i] {
    background: rgba(71, 85, 105, 0.7);
    color: #f8fafc;
}

.action-btn-danger[b-x5h3kcvn4i] {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(248, 113, 113, 0.3);
    color: #fca5a5;
}

.action-btn-danger:hover[b-x5h3kcvn4i] {
    background: rgba(239, 68, 68, 0.35);
    color: #fecaca;
}

.action-btn:disabled[b-x5h3kcvn4i] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Hero Authorize Button */
.hero-authorize-btn[b-x5h3kcvn4i] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    height: 56px;
    padding: 0 2.5rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #15803d 100%);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #ffffff;
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:
        0 4px 16px rgba(34, 197, 94, 0.35),
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    animation: authorize-glow-b-x5h3kcvn4i 3s ease-in-out infinite;
}

@keyframes authorize-glow-b-x5h3kcvn4i {
    0%, 100% {
        box-shadow:
            0 4px 16px rgba(34, 197, 94, 0.35),
            0 8px 32px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }
    50% {
        box-shadow:
            0 4px 20px rgba(34, 197, 94, 0.5),
            0 8px 36px rgba(0, 0, 0, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

.hero-authorize-btn:hover:not(:disabled)[b-x5h3kcvn4i] {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 6px 24px rgba(34, 197, 94, 0.45),
        0 12px 40px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 50%, #16a34a 100%);
}

.hero-authorize-btn:active:not(:disabled)[b-x5h3kcvn4i] {
    transform: translateY(0) scale(0.98);
}

.hero-authorize-btn:disabled[b-x5h3kcvn4i] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.hero-authorize-btn .oi[b-x5h3kcvn4i] {
    font-size: 1.1rem;
}

.cta-text[b-x5h3kcvn4i] {
    position: relative;
    z-index: 2;
}

.cta-shimmer[b-x5h3kcvn4i] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255, 255, 255, 0.15) 50%,
        transparent 80%
    );
    transform: translateX(-100%);
    animation: authorize-shimmer-b-x5h3kcvn4i 8s ease-in-out infinite;
    animation-delay: 2s;
}

@keyframes authorize-shimmer-b-x5h3kcvn4i {
    0%, 85%, 100% { transform: translateX(-100%); }
    15% { transform: translateX(100%); }
}

.spinner[b-x5h3kcvn4i] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin-b-x5h3kcvn4i 0.8s linear infinite;
}

.spinner-small[b-x5h3kcvn4i] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin-b-x5h3kcvn4i 0.8s linear infinite;
    margin-right: 0.5rem;
}

@keyframes spin-b-x5h3kcvn4i {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   POPUP STYLING - Modern Glass Popups
   ═══════════════════════════════════════════════════════════════════════════════ */
[b-x5h3kcvn4i] .modern-popup .dxbl-modal-content {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.99)) !important;
    border: 1px solid rgba(100, 116, 139, 0.3) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
}

[b-x5h3kcvn4i] .modern-popup .dxbl-modal-header {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.1)) !important;
    border-bottom: 1px solid rgba(59, 130, 246, 0.2) !important;
    padding: 1rem 1.25rem !important;
}

[b-x5h3kcvn4i] .modern-popup .dxbl-modal-title {
    color: #f8fafc !important;
    font-weight: 600 !important;
}

[b-x5h3kcvn4i] .modern-popup .dxbl-modal-body {
    padding: 1.25rem !important;
}

[b-x5h3kcvn4i] .modern-popup .dxbl-modal-footer {
    background: rgba(15, 23, 42, 0.5) !important;
    border-top: 1px solid rgba(100, 116, 139, 0.2) !important;
    padding: 1rem 1.25rem !important;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

[b-x5h3kcvn4i] .danger-popup .dxbl-modal-header {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.1)) !important;
    border-bottom-color: rgba(248, 113, 113, 0.2) !important;
}

[b-x5h3kcvn4i] .success-popup .dxbl-modal-header {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(22, 163, 74, 0.1)) !important;
    border-bottom-color: rgba(34, 197, 94, 0.2) !important;
}

[b-x5h3kcvn4i] .error-popup .dxbl-modal-header {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.1)) !important;
    border-bottom-color: rgba(248, 113, 113, 0.2) !important;
}

.popup-body[b-x5h3kcvn4i] {
    color: #e2e8f0;
}

.popup-message[b-x5h3kcvn4i] {
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.danger-text[b-x5h3kcvn4i] {
    color: #fca5a5;
    font-weight: 600;
}

.popup-details[b-x5h3kcvn4i] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 10px;
}

.popup-detail-row[b-x5h3kcvn4i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.popup-label[b-x5h3kcvn4i] {
    font-size: 0.85rem;
    color: rgba(148, 163, 184, 0.9);
}

.popup-value[b-x5h3kcvn4i] {
    font-weight: 600;
    color: #f8fafc;
}

.popup-amount[b-x5h3kcvn4i] {
    font-size: 1.25rem;
    color: #22c55e;
}

.popup-warning[b-x5h3kcvn4i] {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 10px;
}

.warning-title[b-x5h3kcvn4i] {
    font-weight: 600;
    color: #fbbf24;
    margin-bottom: 0.5rem;
}

.warning-list[b-x5h3kcvn4i] {
    margin: 0;
    padding-left: 1.25rem;
    color: rgba(254, 243, 199, 0.9);
    font-size: 0.9rem;
}

.warning-list li[b-x5h3kcvn4i] {
    margin-bottom: 0.25rem;
}

.success-body[b-x5h3kcvn4i],
.error-body[b-x5h3kcvn4i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 0;
}

.success-icon[b-x5h3kcvn4i] {
    font-size: 3rem;
    color: #22c55e;
    margin-bottom: 1rem;
}

.success-message[b-x5h3kcvn4i] {
    color: #a7f3d0;
    font-size: 1rem;
}

.error-icon[b-x5h3kcvn4i] {
    font-size: 3rem;
    color: #ef4444;
    margin-bottom: 1rem;
}

.error-message[b-x5h3kcvn4i] {
    color: #fecaca;
    font-size: 1rem;
}

.popup-btn[b-x5h3kcvn4i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 42px;
    padding: 0 1.25rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.popup-btn-primary[b-x5h3kcvn4i] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-color: rgba(34, 197, 94, 0.4);
    color: #ffffff;
}

.popup-btn-primary:hover[b-x5h3kcvn4i] {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.popup-btn-danger[b-x5h3kcvn4i] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: rgba(248, 113, 113, 0.4);
    color: #ffffff;
}

.popup-btn-danger:hover[b-x5h3kcvn4i] {
    background: linear-gradient(135deg, #f87171, #ef4444);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.popup-btn-secondary[b-x5h3kcvn4i] {
    background: rgba(71, 85, 105, 0.6);
    border-color: rgba(100, 116, 139, 0.3);
    color: rgba(203, 213, 225, 0.9);
}

.popup-btn-secondary:hover[b-x5h3kcvn4i] {
    background: rgba(71, 85, 105, 0.8);
    color: #f8fafc;
}

.popup-btn:disabled[b-x5h3kcvn4i] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE - Tablet (768px) - Keep split but adjust proportions
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .content-split[b-x5h3kcvn4i] {
        min-height: 350px;
    }

    .data-section[b-x5h3kcvn4i] {
        flex: 0 0 55%;
    }

    .image-section[b-x5h3kcvn4i] {
        flex: 0 0 calc(45% - 1rem);
    }

    .fields-grid[b-x5h3kcvn4i] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-authorize-btn[b-x5h3kcvn4i] {
        padding: 0 1.5rem;
    }

    .next-btn[b-x5h3kcvn4i],
    .done-btn[b-x5h3kcvn4i] {
        padding: 0 1rem;
        height: 44px;
    }

    .queue-indicator[b-x5h3kcvn4i] {
        padding: 0.4rem 0.7rem;
        min-width: 85px;
    }

    .remaining-count[b-x5h3kcvn4i],
    .current-position[b-x5h3kcvn4i] {
        font-size: 1.35rem;
    }

    .position-separator[b-x5h3kcvn4i],
    .total-count[b-x5h3kcvn4i] {
        font-size: 0.9rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE - Mobile (768px and below) - Stack vertically
   Mobile order: Hero → Image → Data → Actions
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .authorize-page[b-x5h3kcvn4i] {
        padding: 0 0.5rem 1.5rem;
        gap: 0.75rem;
    }

    .hero-identity-bar[b-x5h3kcvn4i] {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        border-radius: 12px;
    }

    /* Row 1 left: plate */
    .identity-left[b-x5h3kcvn4i] {
        display: contents;
    }

    .plate-wrapper[b-x5h3kcvn4i] {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }

    /* Row 1 right: queue + next */
    .navigation-section[b-x5h3kcvn4i] {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        gap: 0.5rem;
    }

    /* Row 2 full width: location + date + correction button */
    .meta-badges[b-x5h3kcvn4i] {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .queue-indicator[b-x5h3kcvn4i] {
        padding: 0.35rem 0.6rem;
        min-width: 80px;
    }

    .queue-label[b-x5h3kcvn4i] {
        font-size: 0.5rem;
    }

    .remaining-count[b-x5h3kcvn4i],
    .current-position[b-x5h3kcvn4i] {
        font-size: 1.25rem;
    }

    .remaining-text[b-x5h3kcvn4i] {
        font-size: 0.6rem;
    }

    .position-separator[b-x5h3kcvn4i],
    .total-count[b-x5h3kcvn4i] {
        font-size: 0.85rem;
    }

    .next-btn[b-x5h3kcvn4i],
    .done-btn[b-x5h3kcvn4i] {
        height: 42px;
        padding: 0 1rem;
        font-size: 0.85rem;
    }

    /* Stack the split content */
    .content-split[b-x5h3kcvn4i] {
        flex-direction: column;
        min-height: auto;
    }

    /* Image first on mobile (order 1) */
    .image-section[b-x5h3kcvn4i] {
        flex: none;
        width: 100%;
        min-height: 200px;
        max-height: 35vh;
        order: 1;
        border-radius: 12px;
    }

    /* Data second on mobile (order 2) */
    .data-section[b-x5h3kcvn4i] {
        flex: none;
        width: 100%;
        order: 2;
    }

    .image-container[b-x5h3kcvn4i] {
        max-height: 35vh;
    }

    .vehicle-id-badge[b-x5h3kcvn4i] { font-size: 0.6rem; padding: 2px 6px; top: 0.5rem; left: 0.5rem; right: 0.5rem; }

    .evidence-image[b-x5h3kcvn4i] {
        max-height: 34vh;
    }

    .fields-grid[b-x5h3kcvn4i] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        padding: 0.875rem;
        border-radius: 10px;
    }

    .amount-hero[b-x5h3kcvn4i] {
        padding: 1rem;
        border-radius: 12px;
    }

    .amount-hero-glow[b-x5h3kcvn4i] {
        display: none;
    }

    [b-x5h3kcvn4i] .amount-hero-editor.dxbl-masked-input,
    [b-x5h3kcvn4i] .amount-hero-editor.dxbl-text-edit {
        height: 50px !important;
        min-height: 50px !important;
    }

    [b-x5h3kcvn4i] .amount-hero-editor .dxbl-text-edit-input {
        font-size: 1.5rem !important;
        line-height: 46px !important;
    }

    .comment-field[b-x5h3kcvn4i] {
        padding: 0.75rem;
        border-radius: 10px;
    }

    .action-bar[b-x5h3kcvn4i] {
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.875rem 1rem;
        border-radius: 12px;
    }

    .secondary-actions[b-x5h3kcvn4i] {
        width: 100%;
        justify-content: stretch;
    }

    .secondary-actions .action-btn[b-x5h3kcvn4i] {
        flex: 1;
    }

    .hero-authorize-btn[b-x5h3kcvn4i] {
        width: 100%;
        height: 52px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE - XSmall Mobile (576px and below)
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .authorize-page[b-x5h3kcvn4i] {
        padding: 0 0.25rem 1rem;
        gap: 0.5rem;
    }

    .hero-identity-bar[b-x5h3kcvn4i] {
        padding: 0.625rem 0.75rem;
        border-radius: 10px;
    }

    .meta-badges[b-x5h3kcvn4i] {
        gap: 0.35rem;
    }

    .meta-badge[b-x5h3kcvn4i] {
        padding: 0.2rem 0.5rem;
        font-size: 0.7rem;
    }

    .navigation-section[b-x5h3kcvn4i] {
        gap: 0.35rem;
    }

    .queue-indicator[b-x5h3kcvn4i] {
        padding: 0.25rem 0.4rem;
        border-radius: 8px;
        min-width: 60px;
    }

    .queue-label[b-x5h3kcvn4i] {
        font-size: 0.45rem;
    }

    .remaining-count[b-x5h3kcvn4i],
    .current-position[b-x5h3kcvn4i] {
        font-size: 1.1rem;
    }

    .remaining-text[b-x5h3kcvn4i] {
        font-size: 0.55rem;
    }

    .position-separator[b-x5h3kcvn4i],
    .total-count[b-x5h3kcvn4i] {
        font-size: 0.75rem;
    }

    .queue-complete[b-x5h3kcvn4i] {
        font-size: 0.65rem;
    }

    .queue-complete .oi[b-x5h3kcvn4i] {
        font-size: 0.85rem;
    }

    .next-btn[b-x5h3kcvn4i],
    .done-btn[b-x5h3kcvn4i] {
        height: 38px;
        padding: 0 0.75rem;
        font-size: 0.8rem;
        border-radius: 8px;
    }

    .next-text[b-x5h3kcvn4i],
    .done-text[b-x5h3kcvn4i] {
        display: none;
    }

    /* Show spinner even when text is hidden */
    .next-btn.is-loading .next-text[b-x5h3kcvn4i] {
        display: none;
    }

    .next-spinner[b-x5h3kcvn4i] {
        width: 16px;
        height: 16px;
    }

    /* Lightbox adjustments for mobile */
    .lightbox-close[b-x5h3kcvn4i] {
        top: -44px;
        width: 40px;
        height: 40px;
    }

    .lightbox-image[b-x5h3kcvn4i] {
        max-width: 98vw;
        max-height: 85vh;
        border-radius: 6px;
    }

    .image-zoom-hint[b-x5h3kcvn4i] {
        width: 32px;
        height: 32px;
        top: 0.5rem;
        right: 0.5rem;
        border-radius: 6px;
        opacity: 1;
    }

    .image-zoom-hint .oi[b-x5h3kcvn4i] {
        font-size: 0.8rem;
    }

    .image-section[b-x5h3kcvn4i] {
        min-height: 150px;
        max-height: 30vh;
        border-radius: 10px;
    }

    .image-container[b-x5h3kcvn4i] {
        max-height: 30vh;
        padding: 0.25rem;
    }

    .evidence-image[b-x5h3kcvn4i] {
        max-height: 29vh;
        border-radius: 6px;
    }

    .image-label[b-x5h3kcvn4i] {
        font-size: 0.65rem;
        padding: 0.2rem 0.5rem;
    }

    .no-image[b-x5h3kcvn4i] {
        padding: 1.5rem 1rem;
    }

    .no-image .oi[b-x5h3kcvn4i] {
        font-size: 2rem;
    }

    .amount-hero[b-x5h3kcvn4i] {
        padding: 0.875rem;
        border-radius: 10px;
    }

    .amount-hero-header[b-x5h3kcvn4i] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .amount-label[b-x5h3kcvn4i] {
        font-size: 0.6rem;
    }

    .amount-currency-badge[b-x5h3kcvn4i] {
        padding: 0.2rem 0.5rem;
        font-size: 0.6rem;
    }

    [b-x5h3kcvn4i] .amount-hero-editor.dxbl-masked-input,
    [b-x5h3kcvn4i] .amount-hero-editor.dxbl-text-edit {
        height: 46px !important;
        min-height: 46px !important;
    }

    [b-x5h3kcvn4i] .amount-hero-editor .dxbl-text-edit-input {
        font-size: 1.35rem !important;
        line-height: 42px !important;
        padding: 0 0.75rem !important;
    }

    .fields-grid[b-x5h3kcvn4i] {
        grid-template-columns: 1fr 1fr;
        gap: 0.625rem;
        padding: 0.75rem;
        border-radius: 8px;
    }

    .field-label[b-x5h3kcvn4i] {
        font-size: 0.65rem;
    }

    [b-x5h3kcvn4i] .compact-field .dxbl-text-edit-input,
    [b-x5h3kcvn4i] .compact-field .dxbl-combobox-input-container,
    [b-x5h3kcvn4i] .compact-field textarea {
        font-size: 0.8rem !important;
        padding: 0.35rem 0.5rem !important;
    }

    .stolen-checkbox-wrapper[b-x5h3kcvn4i] {
        height: 32px;
    }

    .comment-field[b-x5h3kcvn4i] {
        padding: 0.625rem 0.75rem;
        border-radius: 8px;
    }

    .action-bar[b-x5h3kcvn4i] {
        padding: 0.75rem;
        border-radius: 10px;
        gap: 0.5rem;
    }

    .action-btn[b-x5h3kcvn4i] {
        height: 40px;
        padding: 0 0.75rem;
        font-size: 0.8rem;
        border-radius: 8px;
    }

    .action-btn .btn-text[b-x5h3kcvn4i] {
        display: none;
    }

    .action-btn .oi[b-x5h3kcvn4i] {
        font-size: 1rem;
    }

    .hero-authorize-btn[b-x5h3kcvn4i] {
        height: 48px;
        font-size: 0.9rem;
        border-radius: 10px;
    }

    /* Popup adjustments */
    [b-x5h3kcvn4i] .modern-popup .dxbl-modal-content {
        margin: 0.5rem;
        border-radius: 12px !important;
    }

    [b-x5h3kcvn4i] .modern-popup .dxbl-modal-header {
        padding: 0.875rem 1rem !important;
    }

    [b-x5h3kcvn4i] .modern-popup .dxbl-modal-body {
        padding: 1rem !important;
    }

    [b-x5h3kcvn4i] .modern-popup .dxbl-modal-footer {
        padding: 0.875rem 1rem !important;
        flex-wrap: wrap;
    }

    .popup-btn[b-x5h3kcvn4i] {
        flex: 1;
        min-width: 100px;
    }

    .popup-amount[b-x5h3kcvn4i] {
        font-size: 1.1rem;
    }

    .success-icon[b-x5h3kcvn4i],
    .error-icon[b-x5h3kcvn4i] {
        font-size: 2.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   EXTRA SMALL - Very narrow screens (360px)
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
    .fields-grid[b-x5h3kcvn4i] {
        grid-template-columns: 1fr;
    }

    .identity-left[b-x5h3kcvn4i] {
        width: 100%;
    }

    .meta-badges[b-x5h3kcvn4i] {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SUCCESS TOAST - Dark Glass Theme
   ═══════════════════════════════════════════════════════════════════════════════ */
.toast[b-x5h3kcvn4i] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.99));
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 12px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(34, 197, 94, 0.15);
    min-width: 280px;
}

.toast-header[b-x5h3kcvn4i] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(22, 163, 74, 0.1));
    border-bottom: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 12px 12px 0 0;
    color: #f8fafc;
    padding: 0.75rem 1rem;
}

.toast-header strong[b-x5h3kcvn4i] {
    color: #4ade80;
}

.toast-body[b-x5h3kcvn4i] {
    color: #e2e8f0;
    padding: 0.875rem 1rem;
    font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PLATE CORRECTION REQUEST BUTTON & POPUP
   ═══════════════════════════════════════════════════════════════════════════════ */

.plate-correct-btn[b-x5h3kcvn4i] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid rgba(96, 165, 250, 0.4);
    border-radius: 20px;
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 600;
    transition: all 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.plate-correct-btn:hover[b-x5h3kcvn4i] {
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(96, 165, 250, 0.6);
    color: #bfdbfe;
}

.plate-correct-btn .oi[b-x5h3kcvn4i] {
    font-size: 0.65rem;
}

.plate-correct-pending[b-x5h3kcvn4i] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 20px;
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.plate-correct-pending:hover[b-x5h3kcvn4i] {
    background: rgba(251, 191, 36, 0.22);
    border-color: rgba(251, 191, 36, 0.6);
}

.plate-correct-pending .oi[b-x5h3kcvn4i] {
    font-size: 0.65rem;
}

.plate-correct-label[b-x5h3kcvn4i] {
    font-size: 0.7rem;
    letter-spacing: 0.02em;
}

/* On mobile the correction button is in the meta-badges row with space — keep label visible */

.correction-current-plate[b-x5h3kcvn4i] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.correction-field[b-x5h3kcvn4i] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.correction-label[b-x5h3kcvn4i] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.correction-info[b-x5h3kcvn4i] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    font-size: 0.8rem;
    color: #93c5fd;
    line-height: 1.4;
}

.correction-info .oi[b-x5h3kcvn4i] {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.correction-plate-row[b-x5h3kcvn4i] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

[b-x5h3kcvn4i] .correction-country-select {
    flex: 0 0 115px;
    min-width: 115px;
}

.correction-plate-input[b-x5h3kcvn4i] {
    flex: 1;
}

.correction-country-item[b-x5h3kcvn4i] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.correction-flag[b-x5h3kcvn4i] {
    width: 24px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
}
/* /Components/Pages/UserPanel/CortexGraphViewer.razor.rz.scp.css */
.empty-state[b-znzs58d8bu] {
    text-align: center;
    padding: 60px 20px;
    color: rgba(203, 213, 225, 0.7);
}

.empty-state-icon[b-znzs58d8bu] {
    font-size: 4rem;
    color: #007bff;
    margin-bottom: 20px;
}

.empty-state h4[b-znzs58d8bu] {
    margin-bottom: 15px;
    color: rgba(226, 232, 240, 0.9);
}

.empty-state p[b-znzs58d8bu] {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto 20px;
}

.cortex-info-panel[b-znzs58d8bu] {
    background: rgba(51, 65, 85, 0.3);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
}

.info-item[b-znzs58d8bu] {
    margin-bottom: 10px;
}

.info-item label[b-znzs58d8bu] {
    font-weight: 600;
    color: rgba(203, 213, 225, 0.85);
    margin-bottom: 5px;
    display: block;
    font-size: 0.9rem;
}

.info-value[b-znzs58d8bu] {
    font-size: 1.1rem;
    color: #007bff;
    font-weight: 500;
}

.graph-viewer-container[b-znzs58d8bu] {
    height: 70vh;
    min-height: 500px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
    background: #1a1a1a;
}

/* Dark theme adjustments */
[data-bs-theme="dark"] .cortex-info-panel[b-znzs58d8bu] {
    background: #2d2d2d;
    border-color: #404040;
}

[data-bs-theme="dark"] .info-item label[b-znzs58d8bu] {
    color: #cccccc;
}

[data-bs-theme="dark"] .info-value[b-znzs58d8bu] {
    color: #4ECDC4;
}

[data-bs-theme="dark"] .empty-state[b-znzs58d8bu] {
    color: #cccccc;
}

[data-bs-theme="dark"] .empty-state h4[b-znzs58d8bu] {
    color: #ffffff;
}

[data-bs-theme="dark"] .graph-viewer-container[b-znzs58d8bu] {
    border-color: #404040;
}

/* Responsive design */
@media (max-width: 767.98px) {
    .empty-state[b-znzs58d8bu] {
        padding: 40px 15px;
    }
    
    .empty-state-icon[b-znzs58d8bu] {
        font-size: 3rem;
    }
    
    .empty-state p[b-znzs58d8bu] {
        font-size: 1rem;
    }
    
    .cortex-info-panel[b-znzs58d8bu] {
        padding: 15px;
    }
    
    .graph-viewer-container[b-znzs58d8bu] {
        height: 60vh;
        min-height: 400px;
    }
}

/* File upload styling */
.btn-primary[b-znzs58d8bu] {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:hover[b-znzs58d8bu] {
    background-color: #0056b3;
    border-color: #0056b3;
}

.btn-outline-danger[b-znzs58d8bu] {
    color: #dc3545;
    border-color: #dc3545;
}

.btn-outline-danger:hover[b-znzs58d8bu] {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

/* Alert styling */
.alert[b-znzs58d8bu] {
    border-radius: 6px;
}

.alert-info[b-znzs58d8bu] {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

.alert-danger[b-znzs58d8bu] {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

[data-bs-theme="dark"] .alert-info[b-znzs58d8bu] {
    background-color: #1f4e56;
    border-color: #3a6f75;
    color: #9dd9e0;
}

[data-bs-theme="dark"] .alert-danger[b-znzs58d8bu] {
    background-color: #5a1f24;
    border-color: #7a3e44;
    color: #f5c6cb;
}

/* Loading components */
.loading-container[b-znzs58d8bu] {
    padding: 40px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 20px 0;
}

.loading-steps[b-znzs58d8bu] {
    text-align: left;
    max-width: 400px;
    margin: 0 auto;
}

.loading-step[b-znzs58d8bu] {
    display: flex;
    align-items: center;
    padding: 8px 0;
    font-size: 0.9rem;
}

.loading-step.active[b-znzs58d8bu] {
    color: #007bff;
    font-weight: 500;
}

.loading-step.completed[b-znzs58d8bu] {
    color: #28a745;
}

.loading-step i[b-znzs58d8bu] {
    width: 20px;
    text-align: center;
}

/* Logs panel */
.logs-panel[b-znzs58d8bu] {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
}

.logs-header[b-znzs58d8bu] {
    background: #e9ecef;
    padding: 10px 15px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logs-header h6[b-znzs58d8bu] {
    margin: 0;
    font-size: 0.9rem;
    color: #495057;
}

.logs-content[b-znzs58d8bu] {
    max-height: 300px;
    overflow-y: auto;
    padding: 0;
}

.log-entry[b-znzs58d8bu] {
    padding: 8px 15px;
    border-bottom: 1px solid #f1f3f4;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.log-entry:last-child[b-znzs58d8bu] {
    border-bottom: none;
}

.log-time[b-znzs58d8bu] {
    color: #6c757d;
    font-size: 0.75rem;
    min-width: 80px;
}

.log-level[b-znzs58d8bu] {
    font-weight: 600;
    min-width: 70px;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.7rem;
    text-align: center;
}

.log-message[b-znzs58d8bu] {
    flex: 1;
    word-wrap: break-word;
}

.log-info[b-znzs58d8bu] {
    background: #e7f3ff;
    border-left: 3px solid #007bff;
}

.log-info .log-level[b-znzs58d8bu] {
    background: #007bff;
    color: white;
}

.log-success[b-znzs58d8bu] {
    background: #e8f5e8;
    border-left: 3px solid #28a745;
}

.log-success .log-level[b-znzs58d8bu] {
    background: #28a745;
    color: white;
}

.log-warning[b-znzs58d8bu] {
    background: #fff3cd;
    border-left: 3px solid #ffc107;
}

.log-warning .log-level[b-znzs58d8bu] {
    background: #ffc107;
    color: #212529;
}

.log-error[b-znzs58d8bu] {
    background: #f8d7da;
    border-left: 3px solid #dc3545;
}

.log-error .log-level[b-znzs58d8bu] {
    background: #dc3545;
    color: white;
}

.log-debug[b-znzs58d8bu] {
    background: #f1f3f4;
    border-left: 3px solid #6c757d;
}

.log-debug .log-level[b-znzs58d8bu] {
    background: #6c757d;
    color: white;
}

/* Dark theme adjustments */
[data-bs-theme="dark"] .loading-container[b-znzs58d8bu] {
    background: #2d2d2d;
    color: #ffffff;
}

[data-bs-theme="dark"] .logs-panel[b-znzs58d8bu] {
    background: #2d2d2d;
    border-color: #404040;
}

[data-bs-theme="dark"] .logs-header[b-znzs58d8bu] {
    background: #333333;
    border-color: #404040;
}

[data-bs-theme="dark"] .logs-header h6[b-znzs58d8bu] {
    color: #ffffff;
}

[data-bs-theme="dark"] .log-entry[b-znzs58d8bu] {
    border-color: #404040;
}

[data-bs-theme="dark"] .log-time[b-znzs58d8bu] {
    color: #888888;
}

[data-bs-theme="dark"] .log-info[b-znzs58d8bu] {
    background: #1a2f3a;
    border-left-color: #4ECDC4;
}

[data-bs-theme="dark"] .log-success[b-znzs58d8bu] {
    background: #1a2f1a;
    border-left-color: #28a745;
}

[data-bs-theme="dark"] .log-warning[b-znzs58d8bu] {
    background: #3a3a1a;
    border-left-color: #ffc107;
}

[data-bs-theme="dark"] .log-error[b-znzs58d8bu] {
    background: #3a1a1a;
    border-left-color: #dc3545;
}

[data-bs-theme="dark"] .log-debug[b-znzs58d8bu] {
    background: #2a2a2a;
    border-left-color: #888888;
}

/* New full-height layout styles */
.cortex-viewer-wrapper[b-znzs58d8bu] {
    height: calc(100vh - 200px); /* Full height minus header/navigation space */
    min-height: 600px;
    display: flex;
    gap: 1rem;
    padding: 0 1rem;
}

.graph-viewer-container-new[b-znzs58d8bu] {
    flex: 1;
    display: flex;
    gap: 1rem;
    height: 100%;
    overflow: hidden; /* Prevent scrollbars from affecting layout */
}

.axon-settings-panel[b-znzs58d8bu] {
    width: 420px;
    min-width: min(420px, 92vw);
    background: #2c3e50;
    color: #fff;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.axon-panel-header[b-znzs58d8bu] {
    background: #34495e;
    padding: 1rem;
    border-bottom: 1px solid #4a5f7a;
    flex-shrink: 0;
}

.axon-panel-content[b-znzs58d8bu] {
    padding: 1rem;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.graph-content[b-znzs58d8bu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Allow flex child to shrink */
    height: 100%;
}

.no-selection-message[b-znzs58d8bu] {
    text-align: center;
    color: #95a5a6;
    padding: 3rem 1rem;
    font-size: 0.9rem;
}

.no-selection-message i[b-znzs58d8bu] {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    opacity: 0.5;
}

/* Mobile responsive design for new layout */
@media (max-width: 767.98px) {
    .cortex-viewer-wrapper[b-znzs58d8bu] {
        height: auto;
        min-height: auto;
        flex-direction: column;
        padding: 0 0.5rem;
    }

    .graph-viewer-container-new[b-znzs58d8bu] {
        flex-direction: column;
        height: auto;
        gap: 1rem;
    }

    .axon-settings-panel[b-znzs58d8bu] {
        width: 100%;
        min-width: auto;
        max-height: 50vh;
        order: 2; /* Move panel below graph */
        margin-bottom: 1rem;
    }

    .graph-content[b-znzs58d8bu] {
        order: 1;
        min-height: 50vh;
        height: auto;
    }

    .axon-panel-content[b-znzs58d8bu] {
        padding: 0.75rem;
    }

    .axon-panel-header[b-znzs58d8bu] {
        padding: 0.75rem;
    }

    .no-selection-message[b-znzs58d8bu] {
        padding: 2rem 1rem;
    }
}

/* Page title responsive sizing */
.page-title[b-znzs58d8bu] {
    font-size: 1.5rem;
}

/* XSmall screens - phones < 576px */
@media (max-width: 575.98px) {
    .page-title[b-znzs58d8bu] {
        font-size: 1.15rem;
    }
    .cortex-viewer-wrapper[b-znzs58d8bu] {
        height: auto;
        min-height: auto;
        padding: 0 0.25rem;
        gap: 0.5rem;
    }

    .graph-viewer-container-new[b-znzs58d8bu] {
        gap: 0.5rem;
    }

    .axon-settings-panel[b-znzs58d8bu] {
        width: 100%;
        min-width: 0; /* Remove all min-width constraint */
        max-height: 40vh;
    }

    .axon-panel-header[b-znzs58d8bu] {
        padding: 0.5rem 0.75rem;
    }

    .axon-panel-header h5[b-znzs58d8bu] {
        font-size: 0.9rem;
    }

    .axon-panel-content[b-znzs58d8bu] {
        padding: 0.5rem;
    }

    .graph-content[b-znzs58d8bu] {
        min-height: calc(100vh - 160px); /* Adjust for mobile nav/header */
        min-height: calc(100dvh - 160px); /* Dynamic viewport height for mobile browsers */
    }

    .empty-state[b-znzs58d8bu] {
        padding: 30px 10px;
    }

    .empty-state-icon[b-znzs58d8bu] {
        font-size: 2.5rem;
    }

    .empty-state p[b-znzs58d8bu] {
        font-size: 0.9rem;
    }

    .loading-container[b-znzs58d8bu] {
        padding: 20px 10px;
    }

    .log-entry[b-znzs58d8bu] {
        flex-wrap: wrap;
        gap: 4px;
        padding: 6px 10px;
    }

    .log-time[b-znzs58d8bu] {
        min-width: auto;
        font-size: 0.7rem;
    }

    .log-level[b-znzs58d8bu] {
        min-width: auto;
        font-size: 0.65rem;
    }

    .log-message[b-znzs58d8bu] {
        width: 100%;
        font-size: 0.75rem;
    }

    .no-selection-message[b-znzs58d8bu] {
        padding: 1.5rem 0.75rem;
    }

    .no-selection-message i[b-znzs58d8bu] {
        font-size: 2rem;
    }
}

/* Tablet responsive design */
@media (max-width: 992px) and (min-width: 768px) {
    .axon-settings-panel[b-znzs58d8bu] {
        width: 380px;
        min-width: 380px;
    }
    
    .cortex-viewer-wrapper[b-znzs58d8bu] {
        gap: 0.75rem;
        padding: 0 0.75rem;
    }
    
    .graph-viewer-container-new[b-znzs58d8bu] {
        gap: 0.75rem;
    }
}

/* Large screen optimization */
@media (min-width: 1400px) {
    .axon-settings-panel[b-znzs58d8bu] {
        width: 480px;
        min-width: 480px;
    }
}
/* /Components/Pages/UserPanel/GeneralDriveOffList.razor.rz.scp.css */

.modal-backdrop.show[b-tpo7b64n5o] {
    opacity: 0.5;
}

/* Loading overlay for grid refresh */
.grid-loading-overlay[b-tpo7b64n5o] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    border-radius: inherit;
}

/* Page container */
.general-driveoff-list-page[b-tpo7b64n5o] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    color: #e2e8f0;
}

/* Grid section - glass card */
.grid-section[b-tpo7b64n5o] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6));
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
}

.grid-section-header[b-tpo7b64n5o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.15);
}

.grid-title[b-tpo7b64n5o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.grid-title .oi[b-tpo7b64n5o] {
    color: #60a5fa;
    font-size: 1rem;
}

.grid-title h5[b-tpo7b64n5o] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #f8fafc;
}

.grid-count[b-tpo7b64n5o] {
    font-size: 0.8rem;
    color: rgba(148, 163, 184, 0.8);
}

/* Grid container (inside RenderGrid) */
.grid-container[b-tpo7b64n5o] {
    position: relative;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 575.98px) {
    .grid-section[b-tpo7b64n5o] {
        border-radius: 10px;
    }

    .grid-section-header[b-tpo7b64n5o] {
        padding: 0.75rem 0.85rem;
    }
}

/* ============================================
   GLOBAL AUTHORIZATION STRIPE
   Green left border for status=2 drive-offs (images available)
   ============================================ */
[b-tpo7b64n5o] .modern-glass-grid .dxbl-grid-table tbody tr.global-auth > td:first-child {
    border-left: 3px solid rgba(34, 197, 94, 0.7) !important;
}

[b-tpo7b64n5o] .modern-glass-grid .dxbl-grid-table tbody tr.global-auth:hover > td:first-child {
    border-left-color: rgba(34, 197, 94, 0.9) !important;
}
/* /Components/Pages/UserPanel/LicensePlateReport.razor.rz.scp.css */
/* License Plate Report Page - Modern Glass Styling */

.licenseplate-report-page[b-afyevfzma1] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 140px);
    padding: 1rem 0;
}

/* Centered form container - professional form page style */
.form-container-centered[b-afyevfzma1] {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* TOP SECTION: License Plate & Saldo in ONE CONTAINER (stacked vertically) */
.plate-saldo-card[b-afyevfzma1] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.6), rgba(30, 58, 138, 0.32), rgba(15, 23, 42, 0.55));
    border: 1px solid rgba(148, 163, 235, 0.25);
    border-radius: 20px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 30px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: all 0.3s ease;
}

.plate-saldo-card:hover[b-afyevfzma1] {
    border-color: rgba(148, 163, 235, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 12px 36px rgba(0, 0, 0, 0.3);
}

.plate-saldo-card .card-body[b-afyevfzma1] {
    padding: 1.75rem 2rem;
}

/* First Line: License Plate Row (centered) */
.plate-row[b-afyevfzma1] {
    margin-bottom: 1.5rem;
}

/* Second Line: Saldo Row (full width) */
.saldo-row[b-afyevfzma1] {
    /* Saldo display component will fill this */
}

/* === COLOR-CODED TRANSACTION CARD HEADERS === */
/* These match the saldo state colors for visual consistency */

/* Green - Paid (All good) */
.licenseplate-report-page .card-header-paid[b-afyevfzma1] {
    background: linear-gradient(135deg,
        rgba(16, 185, 129, 0.85) 0%,
        rgba(5, 150, 105, 0.80) 50%,
        rgba(4, 120, 87, 0.85) 100%) !important;
    border-bottom: 1px solid rgba(167, 243, 208, 0.3) !important;
    border-top: 1px solid rgba(167, 243, 208, 0.2) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 2px 8px rgba(5, 150, 105, 0.3),
        0 0 20px rgba(16, 185, 129, 0.2) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.licenseplate-report-page .card-header-paid .oi[b-afyevfzma1] {
    color: rgba(255, 255, 255, 0.95) !important;
    filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.4));
}

/* Yellow/Amber - Needs Authorization */
.licenseplate-report-page .card-header-authorize[b-afyevfzma1] {
    background: linear-gradient(135deg,
        rgba(245, 158, 11, 0.85) 0%,
        rgba(217, 119, 6, 0.80) 50%,
        rgba(180, 83, 9, 0.85) 100%) !important;
    border-bottom: 1px solid rgba(253, 230, 138, 0.3) !important;
    border-top: 1px solid rgba(253, 230, 138, 0.2) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 2px 8px rgba(217, 119, 6, 0.3),
        0 0 20px rgba(245, 158, 11, 0.2) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.licenseplate-report-page .card-header-authorize .oi[b-afyevfzma1] {
    color: rgba(255, 255, 255, 0.95) !important;
    filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.4));
}

/* Red - Unpaid */
.licenseplate-report-page .card-header-unpaid[b-afyevfzma1] {
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.85) 0%,
        rgba(220, 38, 38, 0.80) 50%,
        rgba(185, 28, 28, 0.85) 100%) !important;
    border-bottom: 1px solid rgba(254, 202, 202, 0.3) !important;
    border-top: 1px solid rgba(254, 202, 202, 0.2) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 2px 8px rgba(220, 38, 38, 0.3),
        0 0 20px rgba(239, 68, 68, 0.2) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.licenseplate-report-page .card-header-unpaid .oi[b-afyevfzma1] {
    color: rgba(255, 255, 255, 0.95) !important;
    filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.4));
}

/* Common styles for all colored headers */
.licenseplate-report-page .card-header-paid[b-afyevfzma1],
.licenseplate-report-page .card-header-authorize[b-afyevfzma1],
.licenseplate-report-page .card-header-unpaid[b-afyevfzma1] {
    padding: 1.25rem 1.5rem;
    transition: all 0.3s ease;
}

/* === GLOBAL MATCHES (other participating networks) === */

/* Explicit settled/outstanding pill in the global card header */
.licenseplate-report-page .global-status-pill[b-afyevfzma1] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.licenseplate-report-page .global-status-pill .oi[b-afyevfzma1] {
    font-size: 0.8rem;
    color: inherit !important;
    filter: none !important;
}

.licenseplate-report-page .pill-unpaid[b-afyevfzma1] {
    color: #b91c1c;
}

.licenseplate-report-page .pill-paid[b-afyevfzma1] {
    color: #047857;
}

/* One-line privacy/provenance explanation between header and grid */
.licenseplate-report-page .global-matches-note[b-afyevfzma1] {
    padding: 0.7rem 1.5rem;
    font-size: 0.85rem;
    color: #94a3b8;
    background: rgba(15, 23, 42, 0.5);
    border-bottom: 1px solid rgba(148, 163, 235, 0.15);
}

.licenseplate-report-page .global-matches-note .oi[b-afyevfzma1] {
    font-size: 0.8rem;
}

/* Source cell: muted, icon-led */
.licenseplate-report-page .global-source-cell[b-afyevfzma1] {
    color: #94a3b8;
    font-size: 0.9rem;
    white-space: nowrap;
}

.licenseplate-report-page .global-source-cell .oi[b-afyevfzma1] {
    font-size: 0.8rem;
}

/* Contact-support footer under the global matches grid */
.licenseplate-report-page .global-support-footer[b-afyevfzma1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.9rem 1.5rem;
    background: rgba(15, 23, 42, 0.5);
    border-top: 1px solid rgba(148, 163, 235, 0.15);
    border-radius: 0 0 var(--bs-card-border-radius) var(--bs-card-border-radius);
}

.licenseplate-report-page .global-support-text[b-afyevfzma1] {
    color: #94a3b8;
    font-size: 0.85rem;
}

.licenseplate-report-page .global-support-text .oi[b-afyevfzma1] {
    font-size: 0.8rem;
}

.licenseplate-report-page .global-support-btn[b-afyevfzma1] {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #bfdbfe;
    text-decoration: none;
    background: rgba(59, 130, 246, 0.16);
    border: 1px solid rgba(96, 165, 250, 0.35);
    border-radius: 999px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.licenseplate-report-page .global-support-btn:hover[b-afyevfzma1] {
    color: #ffffff;
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(96, 165, 250, 0.55);
}

.licenseplate-report-page .global-support-btn .oi[b-afyevfzma1] {
    font-size: 0.8rem;
}

@media (max-width: 575.98px) {
    .licenseplate-report-page .global-support-footer[b-afyevfzma1] {
        padding: 0.75rem 1rem;
    }
}

/* Transactions card header */
.licenseplate-report-page .card-header h5[b-afyevfzma1] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #f8fafc;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .plate-saldo-card .card-body[b-afyevfzma1] {
        padding: 1.25rem 1.5rem;
    }

    .plate-row[b-afyevfzma1] {
        margin-bottom: 1rem;
    }
}

/* Grid takes full space in card */
.licenseplate-report-page .card-body.p-0[b-afyevfzma1] {
    padding: 0 !important;
}

.licenseplate-report-page .dxbs-grid[b-afyevfzma1] {
    border-radius: 0 0 var(--bs-card-border-radius) var(--bs-card-border-radius);
}

/* Horizontal scroll for grid on mobile - normal grid experience */
.licenseplate-report-page[b-afyevfzma1]  .dxbl-grid-wrapper,
.licenseplate-report-page[b-afyevfzma1]  .dxbl-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Badge styling */
.licenseplate-report-page .badge.bg-danger[b-afyevfzma1],
.licenseplate-report-page .badge.bg-success[b-afyevfzma1] {
    font-size: 1rem;
}

/* Alert styling */
.licenseplate-report-page .alert-info[b-afyevfzma1] {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.28);
    border-radius: 16px;
    color: #bfdbfe;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(30, 64, 175, 0.18);
}

/* Subtle background pattern (very light) */
.licenseplate-report-page[b-afyevfzma1]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    opacity: 0.02;
    background-image:
        radial-gradient(circle at 30% 30%, rgba(148, 163, 235, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(37, 99, 235, 0.08) 0%, transparent 50%);
    background-size: 100% 100%;
    pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .form-container-centered[b-afyevfzma1] {
        max-width: 100%;
        padding: 0 0.75rem;
    }
}

@media (max-width: 768px) {
    .licenseplate-report-page[b-afyevfzma1] {
        padding: 0.5rem 0;
    }

    .form-container-centered[b-afyevfzma1] {
        padding: 0 0.5rem;
    }

    /* Card header title styling on mobile */
    .licenseplate-report-page .card-header h5[b-afyevfzma1] {
        font-size: 1.1rem;
    }

    /* Card header padding on mobile */
    .licenseplate-report-page .card-header-paid[b-afyevfzma1],
    .licenseplate-report-page .card-header-authorize[b-afyevfzma1],
    .licenseplate-report-page .card-header-unpaid[b-afyevfzma1] {
        padding: 0.85rem 1rem;
    }
}

/* Extra small screens */
@media (max-width: 575.98px) {
    /* Card header title smaller */
    .licenseplate-report-page .card-header h5[b-afyevfzma1] {
        font-size: 1rem;
    }

    /* Tighter header padding */
    .licenseplate-report-page .card-header-paid[b-afyevfzma1],
    .licenseplate-report-page .card-header-authorize[b-afyevfzma1],
    .licenseplate-report-page .card-header-unpaid[b-afyevfzma1] {
        padding: 0.65rem 0.75rem;
    }
}
/* /Components/Pages/UserPanel/LicensePlateSearchResults.razor.rz.scp.css */
/* License Plate Search Results Page - Modern Glass Styling */
/* Inherits global card styling from modern-cards.css */

.search-results-page[b-0zp6in60ek] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    color: #e2e8f0;
    min-height: calc(100vh - 140px);
    position: relative;
}

/* Subtle background pattern to fill empty space */
.search-results-page[b-0zp6in60ek]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    opacity: 0.03;
    background-image:
        radial-gradient(circle at 25% 25%, rgba(13, 148, 136, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(8, 145, 178, 0.1) 0%, transparent 50%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.03) 2px,
            rgba(255, 255, 255, 0.03) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.03) 2px,
            rgba(255, 255, 255, 0.03) 4px
        );
    background-size: 100% 100%, 100% 100%, 60px 60px, 60px 60px;
    pointer-events: none;
}

/* Override card glow for search theme */
.search-results-page .card[b-0zp6in60ek] {
    --glass-card-glow: color-mix(in srgb, var(--card-search-bg) 32%, transparent);
}

/* Page Title Styling - matches AdministratorOverview POC */
.search-results-page .page-title[b-0zp6in60ek] {
    font-size: clamp(1.8rem, 2.2vw, 2.35rem);
    font-weight: 700;
    letter-spacing: 0.015em;
    color: #f8fafc;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.search-results-page .page-title .oi[b-0zp6in60ek] {
    color: var(--card-search-light);
    filter: drop-shadow(0 2px 6px rgba(13, 148, 136, 0.4));
}

.search-results-page .page-title small[b-0zp6in60ek] {
    font-weight: 400;
    font-size: 0.7em;
    color: #cbd5e1;
}

.search-results-page .page-title strong[b-0zp6in60ek] {
    color: var(--card-search-light);
    font-weight: 700;
}

/* Search Transparency Info - Modern Glass Card */
.search-transparency-info[b-0zp6in60ek] {
    background: linear-gradient(138deg, rgba(15, 23, 42, 0.60) 0%, rgba(13, 148, 136, 0.25) 50%, rgba(94, 234, 212, 0.15) 100%);
    border: 1px solid rgba(94, 234, 212, 0.25);
    border-radius: 18px;
    padding: 1.25rem 1.5rem;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow:
        0 20px 50px rgba(15, 23, 42, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}

.search-transparency-info:hover[b-0zp6in60ek] {
    border-color: rgba(94, 234, 212, 0.4);
    box-shadow:
        0 25px 60px rgba(13, 148, 136, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.search-patterns strong[b-0zp6in60ek] {
    color: #e3f2fd;
    font-weight: 600;
    display: block;
    margin-bottom: 0.75rem;
}

.pattern-list[b-0zp6in60ek] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pattern-badge[b-0zp6in60ek] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.2), rgba(8, 145, 178, 0.15));
    border: 1px solid rgba(94, 234, 212, 0.3);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    color: #e3f2fd;
    backdrop-filter: blur(8px);
    transition: all 0.2s ease;
}

.pattern-badge:hover[b-0zp6in60ek] {
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.3), rgba(8, 145, 178, 0.25));
    border-color: rgba(94, 234, 212, 0.5);
    transform: translateY(-1px);
}

.pattern-badge.more-patterns[b-0zp6in60ek] {
    background: rgba(255, 255, 255, 0.08);
    font-style: italic;
    font-family: inherit;
    border-color: rgba(255, 255, 255, 0.15);
}

.pattern-badge .oi[b-0zp6in60ek] {
    font-size: 0.75rem;
    color: var(--card-search-light);
}

/* Search Help Alert - Modern Glass Card */
.search-help-alert[b-0zp6in60ek] {
    background: linear-gradient(138deg, rgba(15, 23, 42, 0.60) 0%, rgba(13, 148, 136, 0.25) 50%, rgba(94, 234, 212, 0.15) 100%);
    border: 1px solid rgba(94, 234, 212, 0.25);
    border-radius: 20px;
    padding: 2rem;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow:
        0 20px 50px rgba(15, 23, 42, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    margin-top: 1.5rem;
}

.search-help-alert .alert-header[b-0zp6in60ek] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    font-size: 1.3rem;
    color: #f8fafc;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.search-help-alert .alert-header .oi[b-0zp6in60ek] {
    color: var(--card-search-light);
    font-size: 1.4rem;
    filter: drop-shadow(0 2px 6px rgba(13, 148, 136, 0.5));
}

.help-section[b-0zp6in60ek] {
    margin-bottom: 1.75rem;
}

.help-section:last-child[b-0zp6in60ek] {
    margin-bottom: 0;
}

.help-section h4[b-0zp6in60ek] {
    color: #e3f2fd;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.help-section h4 .oi[b-0zp6in60ek] {
    color: var(--card-search-light);
    filter: drop-shadow(0 2px 4px rgba(13, 148, 136, 0.4));
}

.help-section p[b-0zp6in60ek] {
    color: #cbd5e1;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.format-examples[b-0zp6in60ek] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.25rem;
    margin: 1rem 0;
    backdrop-filter: blur(8px);
}

.example-item[b-0zp6in60ek] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem 0;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    font-size: 0.95rem;
}

.example-correct[b-0zp6in60ek] {
    color: #86efac;
}

.example-flexible[b-0zp6in60ek] {
    color: #93c5fd;
}

.example-incorrect[b-0zp6in60ek] {
    color: #fca5a5;
}

.example-partial[b-0zp6in60ek] {
    color: #fcd34d;
}

.example-item .oi[b-0zp6in60ek] {
    width: 20px;
    font-size: 0.9rem;
}

.search-tips[b-0zp6in60ek] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(245, 158, 11, 0.08));
    border-left: 4px solid #fbbf24;
    border-radius: 0 12px 12px 0;
    padding: 1.25rem 1.5rem;
    backdrop-filter: blur(8px);
}

.search-tips h4[b-0zp6in60ek] {
    color: #fef3c7;
    margin-bottom: 1rem;
    font-size: 1.05rem;
}

.search-tips ul[b-0zp6in60ek] {
    margin: 0;
    padding-left: 1.5rem;
    color: #fde68a;
}

.search-tips li[b-0zp6in60ek] {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

/* Results Count */
.results-count[b-0zp6in60ek] {
    color: #94a3b8;
    font-size: 0.9rem;
    padding-left: 0.5rem;
    margin-bottom: 1rem;
}

/* Row color coding based on amount */
.search-results-page[b-0zp6in60ek]  .row-negative {
    background-color: rgba(16, 185, 129, 0.15) !important;
}

.search-results-page[b-0zp6in60ek]  .row-positive {
    background-color: rgba(220, 53, 69, 0.15) !important;
}

.search-results-page[b-0zp6in60ek]  .row-zero {
    background-color: rgba(251, 191, 36, 0.15) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .search-results-page[b-0zp6in60ek] {
        gap: 1rem;
    }

    .search-results-page .page-title[b-0zp6in60ek] {
        font-size: 1.5rem;
        flex-wrap: wrap;
    }

    .search-help-alert[b-0zp6in60ek] {
        padding: 1.5rem;
    }

    .search-help-alert .alert-header[b-0zp6in60ek] {
        font-size: 1.1rem;
    }

    .help-section h4[b-0zp6in60ek] {
        font-size: 1rem;
    }

    .format-examples[b-0zp6in60ek] {
        padding: 1rem;
    }

    .pattern-list[b-0zp6in60ek] {
        gap: 0.4rem;
    }

    .pattern-badge[b-0zp6in60ek] {
        font-size: 0.8rem;
        padding: 0.35rem 0.75rem;
    }
}

/* Empty-term search prompt (opened from Reports hub / bare link) */
.plate-search-prompt[b-0zp6in60ek] {
    max-width: 520px;
    margin: 2.5rem auto;
    padding: 2rem 1.5rem;
    text-align: center;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 14px;
}

.plate-search-prompt-icon[b-0zp6in60ek] {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    font-size: 1.4rem;
}

.plate-search-prompt-title[b-0zp6in60ek] {
    font-size: 1.15rem;
    font-weight: 600;
    color: rgba(241, 245, 249, 0.95);
    margin: 0 0 0.4rem;
}

.plate-search-prompt-hint[b-0zp6in60ek] {
    font-size: 0.85rem;
    color: rgba(148, 163, 184, 0.9);
    margin: 0 0 1.25rem;
}

.plate-search-prompt-row[b-0zp6in60ek] {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.plate-search-prompt-row[b-0zp6in60ek]  .plate-search-prompt-input {
    flex: 1 1 auto;
}

.plate-search-prompt-validation[b-0zp6in60ek] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: #fca5a5;
}

.plate-search-prompt-validation .oi[b-0zp6in60ek] {
    font-size: 0.75rem;
}

/* Phones: stack the input above a full-width button */
@media (max-width: 575.98px) {
    .plate-search-prompt-row[b-0zp6in60ek] {
        flex-direction: column;
    }
    .plate-search-prompt-row[b-0zp6in60ek]  .dxbl-btn {
        width: 100%;
    }
}
/* /Components/Pages/UserPanel/PlateIntelligence.razor.rz.scp.css */
/* Plate Intelligence Page - Glass UI Styling */

.plate-intelligence-page[b-u4z3oxifmq] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 140px);
    padding: 1rem 0;
}

.page-container[b-u4z3oxifmq] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ===== RISK PROFILE CARD ===== */
.risk-profile-card[b-u4z3oxifmq] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.6), rgba(30, 58, 138, 0.32), rgba(15, 23, 42, 0.55));
    border: 1px solid rgba(148, 163, 235, 0.25);
    border-radius: 16px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 24px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
}

/* Hero row — large centered plate + risk badge */
.plate-hero-row[b-u4z3oxifmq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem 1.5rem 1rem;
}

.plate-hero-row.hero-with-image[b-u4z3oxifmq] {
    justify-content: space-between;
}

.hero-plate-group[b-u4z3oxifmq] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hero-risk-badge[b-u4z3oxifmq] {
    font-size: 0.85rem;
    padding: 0.3rem 0.75rem;
}

/* ===== HERO VEHICLE IMAGE ===== */
.hero-vehicle-image[b-u4z3oxifmq] {
    position: relative;
    width: 130px;
    height: 100px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(148, 163, 235, 0.25);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 4px 16px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hero-vehicle-image:hover[b-u4z3oxifmq] {
    border-color: rgba(96, 165, 250, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 4px 20px rgba(96, 165, 250, 0.2);
}

.hero-vehicle-image img[b-u4z3oxifmq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-image-overlay[b-u4z3oxifmq] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.5rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: #e2e8f0;
    font-size: 0.6rem;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.hero-vehicle-image:hover .hero-image-overlay[b-u4z3oxifmq] {
    opacity: 1;
}

.hero-image-overlay .oi[b-u4z3oxifmq] {
    font-size: 0.55rem;
}

/* ===== AI VEHICLE ID BADGE ===== */
.hero-ai-badge[b-u4z3oxifmq] {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    border-radius: 6px;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.hero-ai-badge .oi-bolt[b-u4z3oxifmq] {
    color: #F59E0B;
    font-size: 0.55rem;
    flex-shrink: 0;
}

.hero-ai-badge-loading[b-u4z3oxifmq] {
    opacity: 0.7;
}

.hero-ai-badge-loading .oi-loop-circular[b-u4z3oxifmq] {
    animation: spin-b-u4z3oxifmq 1s linear infinite;
}

.ai-refresh-btn[b-u4z3oxifmq] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 0 2px;
    font-size: 0.55rem;
    margin-left: auto;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.ai-refresh-btn:hover[b-u4z3oxifmq] {
    color: rgba(255, 255, 255, 0.9);
}

.ai-refresh-btn:disabled[b-u4z3oxifmq] {
    cursor: wait;
}

.ai-refresh-btn:disabled .oi-loop-circular[b-u4z3oxifmq] {
    animation: spin-b-u4z3oxifmq 1s linear infinite;
}

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

.hero-image-loading[b-u4z3oxifmq] {
    width: 130px;
    height: 100px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.15), rgba(100, 116, 139, 0.08));
    border: 1px solid rgba(100, 116, 139, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    animation: hero-image-pulse-b-u4z3oxifmq 1.5s ease-in-out infinite;
}

.hero-image-loading .oi[b-u4z3oxifmq] {
    font-size: 1.2rem;
    color: #475569;
}

@keyframes hero-image-pulse-b-u4z3oxifmq {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.card-header-section[b-u4z3oxifmq] {
    display: flex;
    align-items: center;
    padding: 0.6rem 1.5rem;
    border-bottom: 1px solid rgba(148, 163, 235, 0.12);
}

.card-header-section h5[b-u4z3oxifmq] {
    font-size: 1.15rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

/* ===== VEHICLE IDENTIFICATION ROW ===== */
.vehicle-id-row[b-u4z3oxifmq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem;
    background: rgba(96, 165, 250, 0.04);
    border-bottom: 1px solid rgba(96, 165, 250, 0.1);
}

.vehicle-id-icon[b-u4z3oxifmq] {
    font-size: 0.8rem;
    color: #60a5fa;
}

.vehicle-id-text[b-u4z3oxifmq] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #cbd5e1;
}

.vehicle-id-badge[b-u4z3oxifmq] {
    font-size: 0.6rem;
    font-weight: 700;
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.25);
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    letter-spacing: 0.05em;
    line-height: 1;
}

.vehicle-id-spinner[b-u4z3oxifmq] {
    font-size: 0.75rem;
    color: #64748b;
    animation: spin-b-u4z3oxifmq 1s linear infinite;
}

/* ===== DATE RANGE ROW ===== */
.date-range-row[b-u4z3oxifmq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 0.6rem 1.5rem;
    background: rgba(100, 116, 139, 0.06);
    border-bottom: 1px solid rgba(148, 163, 235, 0.08);
}

.date-range-item[b-u4z3oxifmq] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.date-range-item .oi[b-u4z3oxifmq] {
    font-size: 0.75rem;
    color: #64748b;
}

.date-range-label[b-u4z3oxifmq] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.date-range-value[b-u4z3oxifmq] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #cbd5e1;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
}

.card-header-section .oi[b-u4z3oxifmq] {
    color: #60a5fa;
    font-size: 1.1rem;
}

.kpi-row[b-u4z3oxifmq] {
    display: flex;
    flex-wrap: wrap;
    padding: 1.25rem 1.5rem;
    gap: 1rem;
}

.kpi-item[b-u4z3oxifmq] {
    flex: 1 1 0;
    min-width: 100px;
    text-align: center;
    padding: 0.5rem;
}

.kpi-value[b-u4z3oxifmq] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1.2;
}

.kpi-label[b-u4z3oxifmq] {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

/* ===== ALARM EFFECTIVENESS ===== */
.alarm-effectiveness-section[b-u4z3oxifmq] {
    padding: 0.75rem 1.5rem 1rem;
    border-top: 1px solid rgba(148, 163, 235, 0.1);
}

.alarm-effectiveness-header[b-u4z3oxifmq] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.alarm-effectiveness-header .oi[b-u4z3oxifmq] {
    font-size: 0.65rem;
    color: #60a5fa;
}

.alarm-effectiveness-bar[b-u4z3oxifmq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(100, 116, 139, 0.15);
}

.alarm-effectiveness-bar.all-prevented[b-u4z3oxifmq] {
    background: rgba(34, 197, 94, 0.06);
    border-color: rgba(34, 197, 94, 0.2);
}

.alarm-effectiveness-bar.has-failures[b-u4z3oxifmq] {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.2);
}

.alarm-stat[b-u4z3oxifmq] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.alarm-stat-prevented[b-u4z3oxifmq] {
    color: #22c55e;
}

.alarm-stat-failed[b-u4z3oxifmq] {
    color: #ef4444;
}

.alarm-stat-icon[b-u4z3oxifmq] {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
}

.alarm-stat-count[b-u4z3oxifmq] {
    font-size: 1rem;
    font-weight: 700;
}

.alarm-stat-label[b-u4z3oxifmq] {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.85;
}

.alarm-bar-track[b-u4z3oxifmq] {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    display: flex;
    overflow: hidden;
    background: rgba(100, 116, 139, 0.15);
}

.alarm-bar-fill-prevented[b-u4z3oxifmq] {
    background: linear-gradient(90deg, #22c55e, #4ade80);
    transition: width 0.4s ease;
}

.alarm-bar-fill-failed[b-u4z3oxifmq] {
    background: linear-gradient(90deg, #ef4444, #f87171);
    transition: width 0.4s ease;
}

.alarm-prevention-rate[b-u4z3oxifmq] {
    text-align: center;
    font-size: 0.72rem;
    color: #64748b;
    margin-top: 0.35rem;
}

/* ===== TIMELINE ALARM OUTCOME BADGES ===== */
.alarm-outcome-badge[b-u4z3oxifmq] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.2rem;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.alarm-outcome-prevented[b-u4z3oxifmq] {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.alarm-outcome-failed[b-u4z3oxifmq] {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.alarm-outcome-prior[b-u4z3oxifmq] {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.alarm-outcome-prior .oi[b-u4z3oxifmq] {
    font-size: 0.6rem;
}

.timeline-alarm-prevented[b-u4z3oxifmq] {
    background: rgba(34, 197, 94, 0.04);
    margin: 0.1rem -0.5rem;
    padding: 0.4rem 0.5rem;
}

.timeline-alarm-failed[b-u4z3oxifmq] {
    background: rgba(239, 68, 68, 0.06);
}

/* ===== SECTION CARDS (Map, Timeline, Grid) ===== */
.section-card[b-u4z3oxifmq] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.5), rgba(30, 41, 59, 0.35));
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
}

.section-header[b-u4z3oxifmq] {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.15);
}

.section-header h5[b-u4z3oxifmq] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #e2e8f0;
    margin: 0;
}

.section-header .oi[b-u4z3oxifmq] {
    color: #60a5fa;
}

/* ===== MAP ===== */
.map-container[b-u4z3oxifmq] {
    padding: 0;
}

.map-container.map-hidden[b-u4z3oxifmq] {
    display: none;
}

[b-u4z3oxifmq] .plate-map {
    border-radius: 0 0 12px 12px;
}

/* Map reveal trigger — collapsed state */
.map-reveal[b-u4z3oxifmq] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    transition: background 0.2s ease;
    user-select: none;
}

.map-reveal:hover[b-u4z3oxifmq] {
    background: rgba(96, 165, 250, 0.06);
}

.map-reveal:active[b-u4z3oxifmq] {
    background: rgba(96, 165, 250, 0.1);
}

.map-reveal-icon[b-u4z3oxifmq] {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(59, 130, 246, 0.08));
    border: 1px solid rgba(96, 165, 250, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.map-reveal:hover .map-reveal-icon[b-u4z3oxifmq] {
    border-color: rgba(96, 165, 250, 0.4);
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.22), rgba(59, 130, 246, 0.12));
}

.map-reveal-icon .oi[b-u4z3oxifmq] {
    font-size: 1.1rem;
    color: #60a5fa;
}

.map-reveal-text[b-u4z3oxifmq] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.map-reveal-title[b-u4z3oxifmq] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #e2e8f0;
}

.map-reveal-sub[b-u4z3oxifmq] {
    font-size: 0.75rem;
    color: #64748b;
}

.map-reveal-arrow[b-u4z3oxifmq] {
    font-size: 0.75rem;
    color: #475569;
    transition: transform 0.2s ease, color 0.2s ease;
}

.map-reveal:hover .map-reveal-arrow[b-u4z3oxifmq] {
    color: #60a5fa;
    transform: translateX(2px);
}

/* Map toggle button — in header when map is visible */
.map-toggle-btn[b-u4z3oxifmq] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(100, 116, 139, 0.12);
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 6px;
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.map-toggle-btn:hover[b-u4z3oxifmq] {
    background: rgba(100, 116, 139, 0.2);
    color: #e2e8f0;
    border-color: rgba(100, 116, 139, 0.35);
}

.map-toggle-btn .oi[b-u4z3oxifmq] {
    font-size: 0.65rem;
}

/* ===== TIMELINE — Help button ===== */
.timeline-help-btn[b-u4z3oxifmq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.2);
    color: #60a5fa;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    margin-left: 0.5rem;
    flex-shrink: 0;
}

.timeline-help-btn:hover[b-u4z3oxifmq] {
    background: rgba(96, 165, 250, 0.18);
    border-color: rgba(96, 165, 250, 0.45);
    color: #93c5fd;
    box-shadow: 0 0 12px rgba(96, 165, 250, 0.2);
}

.timeline-help-btn:active[b-u4z3oxifmq] {
    background: rgba(96, 165, 250, 0.25);
}

/* ===== TIMELINE — Total count in header ===== */
.timeline-total-count[b-u4z3oxifmq] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #64748b;
}

/* ===== TIMELINE — Month-Grouped ===== */
.timeline-grouped-container[b-u4z3oxifmq] {
    padding: 0.5rem 0;
}

.month-group[b-u4z3oxifmq] {
    border-bottom: 1px solid rgba(100, 116, 139, 0.08);
}

.month-group:last-child[b-u4z3oxifmq] {
    border-bottom: none;
}

.month-header[b-u4z3oxifmq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.month-header:hover[b-u4z3oxifmq] {
    background: rgba(96, 165, 250, 0.04);
}

.month-header-expanded[b-u4z3oxifmq] {
    background: rgba(96, 165, 250, 0.03);
}

.month-chevron[b-u4z3oxifmq] {
    font-size: 0.6rem;
    color: #64748b;
    flex-shrink: 0;
    width: 14px;
    transition: color 0.15s;
}

.month-header:hover .month-chevron[b-u4z3oxifmq] {
    color: #94a3b8;
}

.month-label[b-u4z3oxifmq] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #e2e8f0;
    text-transform: capitalize;
}

.month-dots[b-u4z3oxifmq] {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    margin-left: 0.5rem;
}

.month-dot[b-u4z3oxifmq] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.month-dot-visit[b-u4z3oxifmq] {
    background: #3b82f6;
}

.month-dot-alarm[b-u4z3oxifmq] {
    background: #ef4444;
}

.month-dot-driveoff[b-u4z3oxifmq] {
    background: #f97316;
}

.month-dot-payment[b-u4z3oxifmq] {
    background: #22c55e;
}

.month-dot-driveoff-added[b-u4z3oxifmq] {
    background: #a855f7;
}

.month-dot-driveoff-authorized[b-u4z3oxifmq] {
    background: #06b6d4;
}

.month-dots-overflow[b-u4z3oxifmq] {
    font-size: 0.6rem;
    color: #64748b;
    margin-left: 1px;
}

.month-summary[b-u4z3oxifmq] {
    font-size: 0.75rem;
    color: #64748b;
    margin-left: auto;
    white-space: nowrap;
}

.month-event-count[b-u4z3oxifmq] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #94a3b8;
    background: rgba(100, 116, 139, 0.15);
    border-radius: 10px;
    padding: 0.1rem 0.5rem;
    min-width: 22px;
    text-align: center;
    flex-shrink: 0;
}

/* ===== Month events container ===== */
.month-events[b-u4z3oxifmq] {
    padding: 0.25rem 1.25rem 0.5rem 1.25rem;
    position: relative;
}

.month-events[b-u4z3oxifmq]::before {
    content: '';
    position: absolute;
    left: 2rem;
    top: 0.25rem;
    bottom: 0.5rem;
    width: 2px;
    background: rgba(100, 116, 139, 0.15);
}

/* ===== TIMELINE ITEMS ===== */
.timeline-item[b-u4z3oxifmq] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.4rem 0;
    position: relative;
    border-radius: 6px;
}

.timeline-item-alarm[b-u4z3oxifmq] {
    background: rgba(239, 68, 68, 0.04);
    margin: 0.1rem -0.5rem;
    padding: 0.4rem 0.5rem;
}

.timeline-dot[b-u4z3oxifmq] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.35rem;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.8);
}

.timeline-dot-visit[b-u4z3oxifmq] {
    background: #3b82f6;
}

.timeline-dot-alarm[b-u4z3oxifmq] {
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.8), 0 0 8px rgba(239, 68, 68, 0.4);
}

.timeline-dot-driveoff[b-u4z3oxifmq] {
    background: #f97316;
}

.timeline-dot-payment[b-u4z3oxifmq] {
    background: #22c55e;
}

.timeline-dot-driveoff-added[b-u4z3oxifmq] {
    background: #a855f7;
}

.timeline-dot-driveoff-authorized[b-u4z3oxifmq] {
    background: #06b6d4;
}

.timeline-item-driveoff-added[b-u4z3oxifmq] {
    border-left: 2px solid rgba(168, 85, 247, 0.3);
    margin-left: -2px;
    padding-left: 2px;
}

.timeline-item-driveoff-authorized[b-u4z3oxifmq] {
    border-left: 2px solid rgba(6, 182, 212, 0.3);
    margin-left: -2px;
    padding-left: 2px;
}

.timeline-companion-note[b-u4z3oxifmq] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    opacity: 0.85;
}

.timeline-companion-note.companion-note-added[b-u4z3oxifmq] {
    color: #a855f7;
}

.timeline-companion-note.companion-note-authorized[b-u4z3oxifmq] {
    color: #06b6d4;
}

.timeline-companion-note.companion-note-pending[b-u4z3oxifmq] {
    color: #f59e0b;
}

.timeline-companion-note.companion-note-linked-visit[b-u4z3oxifmq] {
    color: #64748b;
}

.timeline-companion-note .oi[b-u4z3oxifmq] {
    font-size: 0.6rem;
}

.timeline-content[b-u4z3oxifmq] {
    flex: 1;
    min-width: 0;
}

.timeline-header[b-u4z3oxifmq] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.timeline-type[b-u4z3oxifmq] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #e2e8f0;
}

.timeline-amount[b-u4z3oxifmq] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #f97316;
}

.badge-alarm[b-u4z3oxifmq] {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-weight: 600;
}

.badge-auth-unauthorized[b-u4z3oxifmq] {
    background: rgba(249, 115, 22, 0.2);
    color: #fdba74;
    border: 1px solid rgba(249, 115, 22, 0.3);
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-weight: 600;
}

.badge-auth-authorized[b-u4z3oxifmq] {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.3);
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-weight: 600;
}

.timeline-details[b-u4z3oxifmq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: #94a3b8;
}

.timeline-location[b-u4z3oxifmq] {
    font-weight: 500;
}

.timeline-time[b-u4z3oxifmq] {
    opacity: 0.7;
}

.timeline-action-link[b-u4z3oxifmq] {
    color: #60a5fa;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.78rem;
    white-space: nowrap;
    transition: color 0.15s;
}

.timeline-action-link:hover[b-u4z3oxifmq] {
    color: #93c5fd;
    text-decoration: underline;
}

/* ===== TIMELINE CAMERA BUTTON ===== */
.timeline-camera-btn[b-u4z3oxifmq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.12), rgba(59, 130, 246, 0.06));
    border: 1px solid rgba(96, 165, 250, 0.25);
    color: #60a5fa;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    flex-shrink: 0;
}

.timeline-camera-btn:hover:not(:disabled)[b-u4z3oxifmq] {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.22), rgba(59, 130, 246, 0.12));
    border-color: rgba(96, 165, 250, 0.45);
    color: #93c5fd;
}

.timeline-camera-btn:disabled[b-u4z3oxifmq] {
    opacity: 0.5;
    cursor: not-allowed;
}

.timeline-camera-btn.loading .oi[b-u4z3oxifmq] {
    animation: spin-b-u4z3oxifmq 1s linear infinite;
}

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

/* ===== GRID CONTAINER ===== */
.grid-container[b-u4z3oxifmq] {
    padding: 0;
}

/* ===== BADGES ===== */
.badge-success[b-u4z3oxifmq] {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.3);
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-warning[b-u4z3oxifmq] {
    background: rgba(251, 191, 36, 0.2);
    color: #fde68a;
    border: 1px solid rgba(251, 191, 36, 0.3);
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-danger[b-u4z3oxifmq] {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .page-container[b-u4z3oxifmq] {
        max-width: 100%;
        padding: 0 0.75rem;
    }
}

@media (max-width: 768px) {
    .plate-intelligence-page[b-u4z3oxifmq] {
        padding: 0.5rem 0;
    }

    .page-container[b-u4z3oxifmq] {
        padding: 0 0.5rem;
    }

    .kpi-row[b-u4z3oxifmq] {
        padding: 1rem;
        gap: 0.5rem;
    }

    .kpi-item[b-u4z3oxifmq] {
        min-width: 80px;
        flex: 1 1 30%;
    }

    .kpi-value[b-u4z3oxifmq] {
        font-size: 1.35rem;
    }

    .month-header[b-u4z3oxifmq] {
        padding: 0.6rem 1rem;
    }

    .month-events[b-u4z3oxifmq] {
        padding: 0.25rem 1rem 0.5rem 1rem;
    }

    .month-events[b-u4z3oxifmq]::before {
        left: 1.75rem;
    }

    .card-header-section[b-u4z3oxifmq] {
        padding: 0.5rem 1rem;
    }

    .section-header[b-u4z3oxifmq] {
        padding: 0.85rem 1rem;
    }

    .plate-hero-row[b-u4z3oxifmq] {
        padding: 1.25rem 1rem 0.75rem;
    }

    .hero-vehicle-image[b-u4z3oxifmq],
    .hero-image-loading[b-u4z3oxifmq] {
        width: 100px;
        height: 75px;
    }
}

@media (max-width: 575.98px) {
    .alarm-effectiveness-section[b-u4z3oxifmq] {
        padding: 0.5rem 0.75rem 0.75rem;
    }

    .alarm-stat-label[b-u4z3oxifmq] {
        display: none;
    }

    .hero-vehicle-image[b-u4z3oxifmq],
    .hero-image-loading[b-u4z3oxifmq] {
        display: none;
    }

    .plate-hero-row.hero-with-image[b-u4z3oxifmq] {
        justify-content: center;
    }

    .date-range-row[b-u4z3oxifmq] {
        flex-direction: column;
        gap: 0.35rem;
        padding: 0.5rem 1rem;
    }

    .kpi-row[b-u4z3oxifmq] {
        padding: 0.75rem;
    }

    .kpi-item[b-u4z3oxifmq] {
        flex: 1 1 45%;
    }

    .kpi-value[b-u4z3oxifmq] {
        font-size: 1.2rem;
    }

    .kpi-label[b-u4z3oxifmq] {
        font-size: 0.65rem;
    }

    .card-header-section h5[b-u4z3oxifmq] {
        font-size: 1rem;
    }

    .section-header h5[b-u4z3oxifmq] {
        font-size: 0.95rem;
    }

    .month-events[b-u4z3oxifmq]::before {
        left: 1.25rem;
    }

    .month-header[b-u4z3oxifmq] {
        padding: 0.55rem 0.75rem;
        gap: 0.35rem;
    }

    .month-label[b-u4z3oxifmq] {
        font-size: 0.82rem;
    }

    .month-summary[b-u4z3oxifmq] {
        font-size: 0.68rem;
    }

    .timeline-header[b-u4z3oxifmq] {
        font-size: 0.8rem;
    }

    .timeline-details[b-u4z3oxifmq] {
        flex-direction: column;
        gap: 0.15rem;
    }

    .plate-hero-row[b-u4z3oxifmq] {
        padding: 1rem 0.75rem 0.5rem;
        gap: 0.75rem;
    }
}
/* /Components/Pages/UserPanel/PoliceReport/PoliceReportAuthorities.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════
   POLICE REPORT AUTHORITIES - Glass UI
   ═══════════════════════════════════════════════════════════════════════════════ */

.police-report-authorities-page[b-5tbwl8rmn0] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    color: #e2e8f0;
}

/* ── Section Card ──────────────────────────────────────────────────────────── */

.section-card[b-5tbwl8rmn0] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6));
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.section-card:hover[b-5tbwl8rmn0] {
    border-color: rgba(100, 116, 139, 0.4);
}

/* ── Section Card Header ───────────────────────────────────────────────────── */

.section-card-header[b-5tbwl8rmn0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.2);
}

.section-card-header.reporters[b-5tbwl8rmn0] {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.35), rgba(59, 130, 246, 0.15));
}

.section-card-header.stations[b-5tbwl8rmn0] {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.35), rgba(34, 197, 94, 0.15));
}

.section-card-header-title[b-5tbwl8rmn0] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.icon-wrapper[b-5tbwl8rmn0] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.85rem;
}

.icon-wrapper.reporters[b-5tbwl8rmn0] {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.icon-wrapper.stations[b-5tbwl8rmn0] {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.section-card-header-title h5[b-5tbwl8rmn0] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #f8fafc;
    letter-spacing: -0.01em;
}

/* ── Grid Wrapper ──────────────────────────────────────────────────────────── */

.grid-wrapper[b-5tbwl8rmn0] {
    overflow: hidden;
}

/* Data columns (4+) should be left-aligned — override global nth-child centering */
[b-5tbwl8rmn0] .modern-glass-grid .dxbl-grid-table td:nth-child(n+4),
[b-5tbwl8rmn0] .modern-glass-grid .dxbl-grid-table th:nth-child(n+4) {
    text-align: left !important;
    padding: 0.5rem 0.75rem !important;
}

/* ── Default Badge ─────────────────────────────────────────────────────────── */

.default-badge[b-5tbwl8rmn0] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #22c55e;
    margin-right: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    .section-card[b-5tbwl8rmn0] {
        border-radius: 12px;
    }

    .section-card-header[b-5tbwl8rmn0] {
        padding: 0.85rem 1rem;
    }
}

@media (max-width: 575.98px) {
    .section-card-header[b-5tbwl8rmn0] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .section-card[b-5tbwl8rmn0] {
        border-radius: 10px;
    }
}
/* /Components/Pages/UserPanel/PoliceReport/PoliceReportForm.razor.rz.scp.css */
/* ==========================================================================
   Police Report Form - Standard App Styling
   Matches AddPayment and other pages - clean, professional, consistent
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page Container - Matches AddPayment pattern
   -------------------------------------------------------------------------- */
.police-report-form-page[b-0ic6ghigqc] {
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
}

/* Centered form container */
.police-report-form-page .card[b-0ic6ghigqc] {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
}

.police-report-form-page .card-body[b-0ic6ghigqc] {
    padding: 1.5rem 2rem;
}

/* --------------------------------------------------------------------------
   Hide Duplicate Card Header (PageHeader is sufficient)
   -------------------------------------------------------------------------- */
[b-0ic6ghigqc] .card-header {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Subtle Background Pattern (matches AddPayment - very low opacity)
   -------------------------------------------------------------------------- */
.police-report-form-page[b-0ic6ghigqc]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    opacity: 0.02;
    background-image:
        radial-gradient(circle at 25% 35%, rgba(220, 38, 38, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 75% 65%, rgba(37, 99, 235, 0.08) 0%, transparent 50%);
    background-size: 100% 100%;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Wizard Progress Indicator - Clean Round Circles
   -------------------------------------------------------------------------- */
.wizard-progress[b-0ic6ghigqc] {
    padding: 0.75rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.2);
}

.wizard-steps[b-0ic6ghigqc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.wizard-step[b-0ic6ghigqc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    position: relative;
    padding: 0 1rem;
    flex: 1 1 0;
    max-width: 160px;
    min-height: 70px;
    /* Override global import-wizard.css */
    background: transparent;
    border-radius: 0;
}

.wizard-step.active[b-0ic6ghigqc] {
    background: transparent;
}

.wizard-step.completed[b-0ic6ghigqc] {
    background: transparent;
}

.wizard-step.clickable[b-0ic6ghigqc] {
    cursor: pointer;
}

.wizard-step.clickable:hover .step-circle[b-0ic6ghigqc] {
    border-color: #3b82f6;
    transform: scale(1.05);
}

/* Round step circles */
.step-circle[b-0ic6ghigqc] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    background: rgba(51, 65, 85, 0.5);
    border: 2px solid rgba(100, 116, 139, 0.3);
    color: rgba(148, 163, 184, 0.7);
    transition: all 0.2s ease;
}

.wizard-step.active .step-circle[b-0ic6ghigqc] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: #3b82f6;
    color: #fff;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

.wizard-step.completed .step-circle[b-0ic6ghigqc] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-color: #22c55e;
    color: #fff;
}

.step-label[b-0ic6ghigqc] {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(148, 163, 184, 0.6);
    text-align: center;
    width: 120px;
    min-height: 2.25em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wizard-step.active .step-label[b-0ic6ghigqc] {
    color: #60a5fa;
    font-weight: 600;
}

.wizard-step.completed .step-label[b-0ic6ghigqc] {
    color: #4ade80;
}

.step-connector[b-0ic6ghigqc] {
    width: 60px;
    height: 2px;
    background: rgba(100, 116, 139, 0.3);
    transition: background 0.2s ease;
}

.step-connector.completed[b-0ic6ghigqc] {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

/* --------------------------------------------------------------------------
   Mobile Step Indicator
   -------------------------------------------------------------------------- */
.step-indicator-mobile[b-0ic6ghigqc] {
    display: none;
    text-align: center;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(148, 163, 184, 0.8);
}

/* --------------------------------------------------------------------------
   Transaction Context Bar - Single-Line Compact Layout
   -------------------------------------------------------------------------- */
.transaction-context-bar[b-0ic6ghigqc] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.55), rgba(51, 65, 85, 0.35));
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 10px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin-bottom: 1.25rem;
}

/* License plate - compact left anchor */
.context-plate[b-0ic6ghigqc] {
    flex-shrink: 0;
    margin-right: 0.75rem;
}

.transaction-context-bar[b-0ic6ghigqc]  .license-plate-display {
    transform: scale(0.72);
    transform-origin: left center;
    margin: -0.35rem 0;
    margin-right: -1.5rem;
}

/* Vertical separator between groups */
.context-separator[b-0ic6ghigqc] {
    width: 1px;
    align-self: stretch;
    margin: 0.25rem 0.75rem;
    background: rgba(100, 116, 139, 0.25);
    flex-shrink: 0;
}

/* Logical groups of cells — forced horizontal */
.context-group[b-0ic6ghigqc] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1rem;
    min-width: 0;
}

/* Individual data cell — label on top, value below */
.context-cell[b-0ic6ghigqc] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex-shrink: 0;
}

.context-label[b-0ic6ghigqc] {
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(148, 163, 184, 0.45);
    line-height: 1;
}

.context-value[b-0ic6ghigqc] {
    font-size: 0.8rem;
    color: rgba(226, 232, 240, 0.9);
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.2;
}

/* Amount cell - subtle blue accent pill */
.context-cell-amount[b-0ic6ghigqc] {
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    margin: -0.2rem 0;
}

.context-value-highlight[b-0ic6ghigqc] {
    color: #60a5fa;
    font-weight: 600;
}

/* Long location names must truncate rather than overflow into the fuel/amount
   group. Only the primary (date + location) group flexes; the fuel/amount group
   holds its intrinsic size, and the location value ellipsizes (full text on hover). */
.context-group-primary[b-0ic6ghigqc] {
    flex-shrink: 1;
    min-width: 0;
}

.context-group-secondary[b-0ic6ghigqc] {
    flex-shrink: 0;
}

.context-cell-location[b-0ic6ghigqc] {
    flex-shrink: 1;
    min-width: 0;
}

.context-cell-location .context-value[b-0ic6ghigqc] {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* View details button */
.context-action[b-0ic6ghigqc] {
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 0.5rem;
}

[b-0ic6ghigqc] .context-view-btn {
    opacity: 0.65;
    transition: all 0.15s ease;
    font-size: 0.7rem !important;
}

[b-0ic6ghigqc] .context-view-btn:hover {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Wizard Navigation Bar
   -------------------------------------------------------------------------- */
.wizard-navigation[b-0ic6ghigqc] {
    padding-top: 1.25rem;
    border-top: 1px solid rgba(100, 116, 139, 0.2);
    margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   Form Sections - Custom HTML (replaces DxFormLayoutGroup)
   -------------------------------------------------------------------------- */
.form-sections[b-0ic6ghigqc] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-section[b-0ic6ghigqc] {
    margin-bottom: 1rem;
    padding-left: 0.75rem;
    border-left: 3px solid rgba(100, 116, 139, 0.2);
    transition: border-color 0.2s ease;
}

.form-section:hover[b-0ic6ghigqc] {
    border-left-color: rgba(96, 165, 250, 0.3);
}

.section-header[b-0ic6ghigqc] {
    color: rgba(148, 163, 184, 0.9);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.25);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

[b-0ic6ghigqc] .ai-generate-btn {
    text-transform: none !important;
    font-size: 0.75rem !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
}

.ai-memo-wrapper[b-0ic6ghigqc] {
    position: relative;
}

.ai-loading-overlay[b-0ic6ghigqc] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(2px);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: #93c5fd;
    font-size: 0.85rem;
    font-weight: 500;
    z-index: 2;
}

.ai-notice[b-0ic6ghigqc] {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.25);
    border-radius: 8px;
    color: #93c5fd;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
}

.ai-error-notice[b-0ic6ghigqc] {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 8px;
    color: #fcd34d;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
}

.fields-grid[b-0ic6ghigqc] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.field-item[b-0ic6ghigqc] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.field-item.field-wide[b-0ic6ghigqc] {
    grid-column: span 2;
}

.field-label[b-0ic6ghigqc] {
    font-size: 0.8rem;
    color: rgba(203, 213, 225, 0.9);
    font-weight: 500;
}

.field-required[b-0ic6ghigqc] {
    color: #f87171;
    font-weight: 600;
}

/* Offense type threshold hint - amber mini-alert */
.offense-hint[b-0ic6ghigqc] {
    padding: 0.4rem 0.6rem;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 6px;
    color: #fcd34d;
    font-size: 0.78rem;
    font-weight: 500;
    display: flex;
    align-items: center;
}

/* --------------------------------------------------------------------------
   Form Layout - Standard Spacing (for any remaining DxFormLayout)
   -------------------------------------------------------------------------- */
[b-0ic6ghigqc] .dxbl-fl-g {
    margin-bottom: 1rem !important;
}

[b-0ic6ghigqc] .dxbl-fl-i {
    margin-bottom: 0.5rem !important;
}

/* --------------------------------------------------------------------------
   Form Layout Group - Remove Gray Background, Match App Theme
   -------------------------------------------------------------------------- */

/* Target the group container itself */
[b-0ic6ghigqc] .dxbl-fl-g {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

/* Section header styling - multiple selectors for specificity */
[b-0ic6ghigqc] .dxbl-fl-g > .dxbl-fl-g-h,
[b-0ic6ghigqc] .dxbl-fl-g-h,
[b-0ic6ghigqc] .dxbl-fl-g .dxbl-fl-g-h {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(100, 116, 139, 0.25) !important;
    padding: 0.5rem 0 !important;
    margin-bottom: 0.75rem !important;
}

[b-0ic6ghigqc] .dxbl-fl-g-h span,
[b-0ic6ghigqc] .dxbl-fl-g-h .dxbl-fl-g-cpt,
[b-0ic6ghigqc] .dxbl-fl-g-cpt {
    color: rgba(148, 163, 184, 0.9) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    background: transparent !important;
}

/* Section body - transparent background */
[b-0ic6ghigqc] .dxbl-fl-g > .dxbl-fl-g-b,
[b-0ic6ghigqc] .dxbl-fl-g-b,
[b-0ic6ghigqc] .dxbl-fl-g .dxbl-fl-g-b {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0.5rem 0 !important;
}

/* Override any card-like styling on form layout groups */
[b-0ic6ghigqc] .dxbl-fl-g.dxbl-fl-g-ec,
[b-0ic6ghigqc] .dxbl-fl-g-ec {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Collapsible Toggle - Details Expand/Collapse
   -------------------------------------------------------------------------- */
.collapsible-toggle[b-0ic6ghigqc] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    color: rgba(148, 163, 184, 0.85);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.35rem 0;
    margin-bottom: 0.5rem;
    user-select: none;
    transition: color 0.15s ease;
}

.collapsible-toggle:hover[b-0ic6ghigqc] {
    color: #60a5fa;
}

.collapsible-chevron[b-0ic6ghigqc] {
    font-size: 0.65rem;
    transition: transform 0.15s ease;
}

/* --------------------------------------------------------------------------
   Vehicle Section - Side by Side Layout with Image
   -------------------------------------------------------------------------- */
.vehicle-section[b-0ic6ghigqc] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.vehicle-fields[b-0ic6ghigqc] {
    flex: 1;
    min-width: 0;
}

.vehicle-image-container[b-0ic6ghigqc] {
    flex-shrink: 0;
    width: 200px;
}

.vehicle-image-preview[b-0ic6ghigqc] {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(100, 116, 139, 0.3);
    transition: all 0.2s ease;
}

.vehicle-image-preview:hover[b-0ic6ghigqc] {
    border-color: rgba(59, 130, 246, 0.5);
    transform: scale(1.02);
}

.vehicle-image-preview img[b-0ic6ghigqc] {
    width: 100%;
    height: auto;
    display: block;
    max-height: 150px;
    object-fit: cover;
}

.vehicle-image-overlay[b-0ic6ghigqc] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: #fff;
    font-size: 0.75rem;
    text-align: center;
}

.vehicle-image-expand-hint[b-0ic6ghigqc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    opacity: 0.8;
}

.image-include-checkbox[b-0ic6ghigqc] {
    margin-top: 0.35rem;
    padding: 0.2rem 0;
}

.image-include-label[b-0ic6ghigqc] {
    font-size: 0.75rem;
    line-height: 1.3;
    color: rgba(203, 213, 225, 0.85);
}

.vehicle-no-image[b-0ic6ghigqc] {
    padding: 1rem;
    text-align: center;
    color: rgba(148, 163, 184, 0.6);
    font-size: 0.8rem;
    background: rgba(51, 65, 85, 0.3);
    border-radius: 12px;
    border: 1px dashed rgba(100, 116, 139, 0.3);
}

.vehicle-no-image .oi[b-0ic6ghigqc] {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* Vehicle fields row - make, model, color in a single row */
.vehicle-details-row[b-0ic6ghigqc] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 0.75rem;
}

.vehicle-details-row .field-item[b-0ic6ghigqc] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.vehicle-details-row .field-label[b-0ic6ghigqc] {
    font-size: 0.8rem;
    color: rgba(148, 163, 184, 0.8);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Image Lightbox (Reused from TransactionDetails pattern)
   -------------------------------------------------------------------------- */
.image-lightbox[b-0ic6ghigqc] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    animation: fadeIn-b-0ic6ghigqc 0.2s ease;
}

.lightbox-content[b-0ic6ghigqc] {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.lightbox-content img[b-0ic6ghigqc] {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-close[b-0ic6ghigqc] {
    position: absolute;
    top: -40px;
    right: 0;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.lightbox-close:hover[b-0ic6ghigqc] {
    background: rgba(255, 255, 255, 0.2);
}

/* --------------------------------------------------------------------------
   Alert Styling - Glassmorphic (matches AddPayment)
   -------------------------------------------------------------------------- */
.police-report-form-page .alert-info[b-0ic6ghigqc] {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.28);
    border-radius: 12px;
    color: #bfdbfe;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.police-report-form-page .alert-warning[b-0ic6ghigqc] {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.28);
    border-radius: 12px;
    color: #fde68a;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.police-report-form-page .alert-danger[b-0ic6ghigqc] {
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid rgba(248, 113, 113, 0.3);
    border-radius: 12px;
    color: #fecaca;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* --------------------------------------------------------------------------
   Step 3 - Optional Hint & Empty States
   -------------------------------------------------------------------------- */
.step-optional-hint[b-0ic6ghigqc] {
    padding: 0.6rem 0.85rem;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.2);
    border-radius: 8px;
    color: #93c5fd;
    font-size: 0.82rem;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.empty-state-message[b-0ic6ghigqc] {
    padding: 1rem 1.25rem;
    text-align: center;
    color: rgba(148, 163, 184, 0.5);
    font-size: 0.82rem;
    font-style: italic;
    background: rgba(51, 65, 85, 0.15);
    border: 1px dashed rgba(100, 116, 139, 0.2);
    border-radius: 8px;
}

/* --------------------------------------------------------------------------
   Evidence List - Step 4
   -------------------------------------------------------------------------- */
.evidence-list[b-0ic6ghigqc] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.evidence-item[b-0ic6ghigqc] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: rgba(51, 65, 85, 0.25);
    border: 1px solid rgba(100, 116, 139, 0.15);
    border-radius: 8px;
    font-size: 0.85rem;
    color: rgba(226, 232, 240, 0.9);
}

.evidence-item .oi-document[b-0ic6ghigqc] {
    color: rgba(148, 163, 184, 0.5);
    font-size: 0.75rem;
}

/* Delete button: muted by default, red on hover */
[b-0ic6ghigqc] .evidence-delete-btn {
    opacity: 0.4;
    transition: opacity 0.15s ease;
}

[b-0ic6ghigqc] .evidence-delete-btn:hover {
    opacity: 1;
    color: #f87171 !important;
}

/* --------------------------------------------------------------------------
   Review Summary
   -------------------------------------------------------------------------- */
.review-summary[b-0ic6ghigqc] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.5), rgba(51, 65, 85, 0.35)) !important;
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 12px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.review-summary p[b-0ic6ghigqc] {
    margin-bottom: 0.375rem;
    font-size: 0.85rem;
    color: rgba(226, 232, 240, 0.9);
}

.review-summary strong[b-0ic6ghigqc] {
    color: rgba(148, 163, 184, 0.7);
}

/* Three-column layout with separators */
.review-columns[b-0ic6ghigqc] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
}

.review-column[b-0ic6ghigqc] {
    padding: 0 1.25rem;
    border-right: 1px solid rgba(100, 116, 139, 0.15);
}

.review-column:first-child[b-0ic6ghigqc] {
    padding-left: 0;
}

.review-column:last-child[b-0ic6ghigqc] {
    border-right: none;
    padding-right: 0;
}

/* Column headers - distinct from content */
.review-column-header[b-0ic6ghigqc] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(96, 165, 250, 0.7);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.15);
}

/* Sub-header (e.g. STRONY within a column) */
.review-sub-header[b-0ic6ghigqc] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(148, 163, 184, 0.5);
    margin-top: 0.75rem;
    margin-bottom: 0.375rem;
}

/* Zero-value items — dimmed */
.review-summary p.review-zero[b-0ic6ghigqc] {
    opacity: 0.35;
}

/* Total value - elevated */
.review-summary .review-total-value span[b-0ic6ghigqc] {
    color: #60a5fa;
    font-weight: 600;
    font-size: 0.95rem;
}

/* Value breakdown box in review */
.review-value-breakdown[b-0ic6ghigqc] {
    margin-top: 0.375rem;
    padding: 0.5rem 0.625rem;
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(100, 116, 139, 0.15);
    border-radius: 8px;
}

.review-value-breakdown p[b-0ic6ghigqc] {
    margin-bottom: 0.25rem !important;
}

.review-fuel-value span[b-0ic6ghigqc] {
    font-family: var(--font-family-mono, 'JetBrains Mono', monospace);
    color: #4ade80;
    font-weight: 600;
}

.review-products-value span[b-0ic6ghigqc] {
    font-family: var(--font-family-mono, 'JetBrains Mono', monospace);
    color: #fbbf24;
    font-weight: 600;
}

.review-offense-reason[b-0ic6ghigqc] {
    font-size: 0.75rem !important;
    font-style: italic;
    color: rgba(148, 163, 184, 0.65) !important;
    margin-top: 0.25rem !important;
    margin-bottom: 0 !important;
}

/* Factual description block — left accent border */
.review-description-block[b-0ic6ghigqc] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(100, 116, 139, 0.15);
    padding-left: 0.75rem;
    border-left: 3px solid rgba(96, 165, 250, 0.35);
}

.review-description-label[b-0ic6ghigqc] {
    margin-bottom: 0.25rem !important;
    font-size: 0.8rem !important;
    color: rgba(148, 163, 184, 0.7) !important;
}

.review-description-text[b-0ic6ghigqc] {
    font-size: 0.825rem !important;
    color: rgba(226, 232, 240, 0.75) !important;
    line-height: 1.5;
}

/* Mobile: stack columns */
@media (max-width: 768px) {
    .review-columns[b-0ic6ghigqc] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .review-column[b-0ic6ghigqc] {
        padding: 0;
        border-right: none;
        border-bottom: 1px solid rgba(100, 116, 139, 0.12);
        padding-bottom: 0.75rem;
    }

    .review-column:last-child[b-0ic6ghigqc] {
        border-bottom: none;
        padding-bottom: 0;
    }
}

/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */
@keyframes fadeIn-b-0ic6ghigqc {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[b-0ic6ghigqc] .dxbl-fl-g {
    animation: fadeIn-b-0ic6ghigqc 0.25s ease;
}

/* --------------------------------------------------------------------------
   Modern Glass Grid - Step 3 Incident Details Grids
   -------------------------------------------------------------------------- */
[b-0ic6ghigqc] .modern-glass-grid {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.5), rgba(51, 65, 85, 0.35));
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 12px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
}

/* Header row */
[b-0ic6ghigqc] .modern-glass-grid .dxbl-grid-header-row th {
    background: transparent !important;
    color: rgba(148, 163, 184, 0.85) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: 1px solid rgba(100, 116, 139, 0.25) !important;
    padding: 0.625rem 0.75rem !important;
}

/* Data rows */
[b-0ic6ghigqc] .modern-glass-grid .dxbl-grid-table tbody tr {
    border-bottom: 1px solid rgba(100, 116, 139, 0.1);
    transition: background 0.15s ease;
}

[b-0ic6ghigqc] .modern-glass-grid .dxbl-grid-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.06) !important;
}

[b-0ic6ghigqc] .modern-glass-grid .dxbl-grid-table tbody td {
    background: transparent !important;
    color: rgba(226, 232, 240, 0.9) !important;
    font-size: 0.85rem !important;
    padding: 0.5rem 0.75rem !important;
    border: none !important;
}

/* Empty data area */
[b-0ic6ghigqc] .modern-glass-grid .dxbl-grid-empty-data-area,
[b-0ic6ghigqc] .modern-glass-grid .dxbl-grid-empty-data-area td {
    background: transparent !important;
    color: rgba(148, 163, 184, 0.5) !important;
    font-size: 0.85rem !important;
    text-align: center !important;
    padding: 1.5rem !important;
    font-style: italic;
}

/* Grid footer / pager area */
[b-0ic6ghigqc] .modern-glass-grid .dxbl-grid-footer,
[b-0ic6ghigqc] .modern-glass-grid .dxbl-grid-pager {
    background: transparent !important;
    border-top: 1px solid rgba(100, 116, 139, 0.15) !important;
}

/* Button columns - tight padding to prevent "..." overflow */
[b-0ic6ghigqc] .modern-glass-grid .dxbl-grid-table td:nth-child(1),
[b-0ic6ghigqc] .modern-glass-grid .dxbl-grid-table td:nth-child(2) {
    padding: 0.5rem 0.25rem !important;
    text-overflow: clip !important;
    overflow: hidden !important;
    text-align: center !important;
}

[b-0ic6ghigqc] .modern-glass-grid .dxbl-grid-header-row th:nth-child(1),
[b-0ic6ghigqc] .modern-glass-grid .dxbl-grid-header-row th:nth-child(2) {
    padding: 0.625rem 0.25rem !important;
}

/* Edit row styling */
[b-0ic6ghigqc] .modern-glass-grid .dxbl-grid-edit-row td {
    background: rgba(59, 130, 246, 0.08) !important;
    border-bottom: 1px solid rgba(59, 130, 246, 0.2) !important;
}

/* Grid inline edit save button - prominent green */
[b-0ic6ghigqc] .grid-save-btn {
    width: 34px;
    height: 30px;
    padding: 0;
    border-radius: 6px;
    background: rgba(34, 197, 94, 0.3);
    border: 1px solid rgba(34, 197, 94, 0.5);
    color: #4ade80;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

[b-0ic6ghigqc] .grid-save-btn:hover {
    background: rgba(34, 197, 94, 0.45);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.7);
}

[b-0ic6ghigqc] .grid-save-btn:active {
    transform: scale(0.96);
}

/* Grid inline edit cancel button - subtle gray */
[b-0ic6ghigqc] .grid-cancel-btn {
    width: 34px;
    height: 30px;
    padding: 0;
    border-radius: 6px;
    background: rgba(71, 85, 105, 0.3);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: rgba(203, 213, 225, 0.9);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

[b-0ic6ghigqc] .grid-cancel-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}

[b-0ic6ghigqc] .grid-cancel-btn:active {
    transform: scale(0.96);
}

/* --------------------------------------------------------------------------
   Mobile Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .police-report-form-page[b-0ic6ghigqc] {
        padding: 0.5rem 0;
    }

    /* Reduce card body padding on mobile */
    .police-report-form-page .card-body[b-0ic6ghigqc] {
        padding: 1rem !important;
    }

    /* Reduce section left-border padding on mobile */
    .form-section[b-0ic6ghigqc] {
        padding-left: 0.5rem;
    }

    .wizard-steps[b-0ic6ghigqc] {
        display: none;
    }

    .step-indicator-mobile[b-0ic6ghigqc] {
        display: block;
    }

    .transaction-context-bar[b-0ic6ghigqc] {
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
    }

    .context-separator[b-0ic6ghigqc] {
        display: none;
    }

    .context-group[b-0ic6ghigqc] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    /* On mobile there's room to wrap the full address instead of truncating it */
    .context-cell-location .context-value[b-0ic6ghigqc] {
        white-space: normal;
        overflow: visible;
    }

    /* Keep Szczegoly button compact on mobile, not full-width */
    .context-action[b-0ic6ghigqc] {
        width: auto;
        margin-left: auto;
    }

    /* Reporter / Police Station combo + buttons: stack on mobile */
    .form-section .d-flex.gap-2:has(.flex-grow-1)[b-0ic6ghigqc] {
        flex-wrap: wrap;
    }

    .form-section .d-flex.gap-2:has(.flex-grow-1)[b-0ic6ghigqc] >  .flex-grow-1 {
        width: 100%;
        flex: 1 1 100%;
    }

    /* Evidence add row: stack on mobile */
    .form-section > .d-flex.gap-2[b-0ic6ghigqc] {
        flex-wrap: wrap;
    }

    .form-section > .d-flex.gap-2[b-0ic6ghigqc] >  .flex-grow-1 {
        flex: 1 1 100%;
    }

    /* Touch-friendly grid edit/delete buttons */
    [b-0ic6ghigqc] .grid-save-btn,
    [b-0ic6ghigqc] .grid-cancel-btn {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 992px) and (min-width: 769px) {
    .step-label[b-0ic6ghigqc] {
        display: none;
    }

    .step-connector[b-0ic6ghigqc] {
        width: 40px;
    }

    .wizard-step[b-0ic6ghigqc] {
        padding: 0 0.75rem;
    }
}

/* --------------------------------------------------------------------------
   Wizard Navigation - Stack Buttons on Small Screens
   !important overrides Bootstrap .d-flex / .justify-content-between utilities
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .wizard-navigation .d-flex[b-0ic6ghigqc] {
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }

    .wizard-navigation .d-flex > div[b-0ic6ghigqc] {
        width: 100%;
    }

    .wizard-navigation .d-flex > div[b-0ic6ghigqc]  .btn,
    .wizard-navigation .d-flex > div[b-0ic6ghigqc]  button {
        width: 100%;
        min-height: 44px;
    }

    /* Inner button group (Next / Generate Report) also full-width */
    .wizard-navigation .d-flex .d-flex[b-0ic6ghigqc] {
        flex-direction: column !important;
        width: 100%;
    }
}

@media (max-width: 480px) {
    /* Extra-small phones: reduce padding further */
    .police-report-form-page .card-body[b-0ic6ghigqc] {
        padding: 0.75rem !important;
    }

    .form-section[b-0ic6ghigqc] {
        padding-left: 0.375rem;
        border-left-width: 2px;
    }

    .context-group[b-0ic6ghigqc] {
        width: 100%;
    }

    .context-cell[b-0ic6ghigqc] {
        flex: 1 1 40%;
    }

    /* Section headers: smaller on phones */
    .section-header[b-0ic6ghigqc] {
        font-size: 0.78rem;
    }

    /* Review summary: tighter on phones */
    .review-summary[b-0ic6ghigqc] {
        padding: 0.75rem !important;
    }

    .review-summary p[b-0ic6ghigqc] {
        font-size: 0.78rem;
    }
}

/* --------------------------------------------------------------------------
   Vehicle Section & Fields Grid Mobile Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .vehicle-section[b-0ic6ghigqc] {
        flex-direction: column;
    }

    .vehicle-image-container[b-0ic6ghigqc] {
        width: 100%;
        max-width: 250px;
        margin: 0 auto 1rem;
    }

    .vehicle-details-row[b-0ic6ghigqc] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .fields-grid[b-0ic6ghigqc] {
        grid-template-columns: 1fr;
    }

    .field-item.field-wide[b-0ic6ghigqc] {
        grid-column: span 1;
    }

    [b-0ic6ghigqc] .modern-glass-grid {
        border-radius: 8px;
    }

    [b-0ic6ghigqc] .modern-glass-grid .dxbl-grid-table tbody td,
    [b-0ic6ghigqc] .modern-glass-grid .dxbl-grid-header-row th {
        padding: 0.4rem 0.5rem !important;
        font-size: 0.8rem !important;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .vehicle-details-row[b-0ic6ghigqc] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vehicle-image-container[b-0ic6ghigqc] {
        width: 180px;
    }
}
/* /Components/Pages/UserPanel/PoliceReport/PoliceReportList.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════
   POLICE REPORT LIST - Glass UI
   ═══════════════════════════════════════════════════════════════════════════════ */

.police-report-list-page[b-rw33ktrcgy] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    color: #e2e8f0;
}

/* ── Hero Summary Bar ──────────────────────────────────────────────────────── */

.hero-bar[b-rw33ktrcgy] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6));
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 16px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.hero-bar-left[b-rw33ktrcgy] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-title[b-rw33ktrcgy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hero-title .oi[b-rw33ktrcgy] {
    color: #60a5fa;
    font-size: 1.25rem;
}

.hero-title h3[b-rw33ktrcgy] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #f8fafc;
    letter-spacing: -0.01em;
}

.hero-stats[b-rw33ktrcgy] {
    display: inline-flex;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.8rem;
    color: rgba(203, 213, 225, 0.8);
}

.hero-stat[b-rw33ktrcgy] {
    white-space: nowrap;
}

.hero-stat strong[b-rw33ktrcgy] {
    color: #f1f5f9;
}

.hero-stat-separator[b-rw33ktrcgy] {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: rgba(100, 116, 139, 0.4);
    vertical-align: middle;
}

.hero-bar-right[b-rw33ktrcgy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ── Filters Container ─────────────────────────────────────────────────────── */

.filters-container[b-rw33ktrcgy] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(51, 65, 85, 0.4));
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 12px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 1rem 1.25rem;
}

.filters-row[b-rw33ktrcgy] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.filter-item[b-rw33ktrcgy] {
    flex: 1;
    min-width: 200px;
}

.filter-item label[b-rw33ktrcgy] {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(148, 163, 184, 0.9);
    margin-bottom: 0.35rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ── Grid Container ────────────────────────────────────────────────────────── */

.grid-container[b-rw33ktrcgy] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6));
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
}

/* ── Status Badges ─────────────────────────────────────────────────────────── */

.status-badge[b-rw33ktrcgy] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.status-badge.draft[b-rw33ktrcgy] {
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.35);
    color: #fbbf24;
}

.status-badge.finalized[b-rw33ktrcgy] {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #22c55e;
}

.status-badge.submitted[b-rw33ktrcgy] {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: #60a5fa;
}

/* ── Mobile Status Dot ──────────────────────────────────────────────────────── */

.status-dot[b-rw33ktrcgy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0;
}

.status-dot.draft[b-rw33ktrcgy] {
    background: rgba(251, 191, 36, 0.2);
    border: 1px solid rgba(251, 191, 36, 0.4);
    color: #fbbf24;
}

.status-dot.finalized[b-rw33ktrcgy] {
    background: rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #22c55e;
}

.status-dot.submitted[b-rw33ktrcgy] {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: #60a5fa;
}

.status-dot.unknown[b-rw33ktrcgy] {
    background: rgba(100, 116, 139, 0.2);
    border: 1px solid rgba(100, 116, 139, 0.4);
    color: #94a3b8;
}

.status-badge.unknown[b-rw33ktrcgy] {
    background: rgba(100, 116, 139, 0.15);
    border: 1px solid rgba(100, 116, 139, 0.35);
    color: #94a3b8;
}

/* ── Mobile: Create button full-width ──────────────────────────────────────── */

.hero-bar-mobile-create[b-rw33ktrcgy] {
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    .hero-bar[b-rw33ktrcgy] {
        padding: 1rem;
        border-radius: 12px;
    }

    .filters-row[b-rw33ktrcgy] {
        flex-direction: column;
    }

    .filter-item[b-rw33ktrcgy] {
        min-width: 100%;
    }
}

@media (max-width: 575.98px) {
    .hero-bar[b-rw33ktrcgy] {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-bar-left[b-rw33ktrcgy] {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-bar-right[b-rw33ktrcgy] {
        flex-direction: column;
    }

    .hero-stats[b-rw33ktrcgy] {
        flex-wrap: wrap;
    }

    .grid-container[b-rw33ktrcgy] {
        border-radius: 10px;
    }

    .filters-container[b-rw33ktrcgy] {
        border-radius: 10px;
        padding: 0.85rem 1rem;
    }
}
/* /Components/Pages/UserPanel/PoliceReport/PoliceReportPreview.razor.rz.scp.css */
/* ==========================================================================
   POLICE REPORT PREVIEW - Compact Glassmorphic Design
   Matches TransactionDetails styling patterns
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAGE CONTAINER
   -------------------------------------------------------------------------- */
.police-report-preview-page[b-hzh94hd2au] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1rem 2rem;
}

/* --------------------------------------------------------------------------
   IDENTITY BAR - Compact Header
   -------------------------------------------------------------------------- */
.identity-bar[b-hzh94hd2au] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6));
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 12px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.identity-main[b-hzh94hd2au] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.report-number[b-hzh94hd2au] {
    font-family: var(--font-family-mono, 'JetBrains Mono', monospace);
    font-size: 0.9rem;
    font-weight: 600;
    color: #f1f5f9;
}

.identity-meta[b-hzh94hd2au] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
    flex-wrap: wrap;
}

.meta-item[b-hzh94hd2au] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.8rem;
    color: rgba(203, 213, 225, 0.9);
}

.meta-item .oi[b-hzh94hd2au] {
    font-size: 0.65rem;
    color: rgba(148, 163, 184, 0.7);
}

/* Status Badges */
.status-badge[b-hzh94hd2au] {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-badge--draft[b-hzh94hd2au] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.15));
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fcd34d;
}

.status-badge--finalized[b-hzh94hd2au] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.15));
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: #93c5fd;
}

.status-badge--submitted[b-hzh94hd2au] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.15));
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #86efac;
}

.status-badge--unknown[b-hzh94hd2au] {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.2), rgba(100, 116, 139, 0.15));
    border: 1px solid rgba(100, 116, 139, 0.4);
    color: rgba(203, 213, 225, 0.9);
}

/* Type Badge (offense type) */
.type-badge[b-hzh94hd2au] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.2), rgba(100, 116, 139, 0.15));
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: 4px;
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(203, 213, 225, 0.9);
}

/* --------------------------------------------------------------------------
   DOWNLOAD HERO BAR - Primary Action Area
   -------------------------------------------------------------------------- */
.download-bar[b-hzh94hd2au] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(37, 99, 235, 0.05));
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.download-actions[b-hzh94hd2au] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.secondary-actions[b-hzh94hd2au] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Download button glow effect */
[b-hzh94hd2au] .btn-download {
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25) !important;
    transition: all 0.2s ease !important;
}

[b-hzh94hd2au] .btn-download:hover {
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35) !important;
    transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   STATUS BARS - Generating / Success
   -------------------------------------------------------------------------- */
.status-bar[b-hzh94hd2au] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.status-bar--warning[b-hzh94hd2au] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.07));
    border: 1px solid rgba(245, 158, 11, 0.25);
    color: #fcd34d;
}

.status-bar--success[b-hzh94hd2au] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(22, 163, 74, 0.07));
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #4ade80;
}

/* --------------------------------------------------------------------------
   EXPORT INFO - Subtle inline bar
   -------------------------------------------------------------------------- */
.export-info[b-hzh94hd2au] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    color: rgba(148, 163, 184, 0.85);
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
}

.export-info .oi[b-hzh94hd2au] {
    font-size: 0.7rem;
}

/* --------------------------------------------------------------------------
   VALUE SUMMARY HERO
   -------------------------------------------------------------------------- */
.value-summary-hero[b-hzh94hd2au] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(51, 65, 85, 0.5));
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 10px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.value-item[b-hzh94hd2au] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.value-label[b-hzh94hd2au] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(148, 163, 184, 0.6);
    line-height: 1;
}

.value-number--fuel[b-hzh94hd2au] {
    font-family: var(--font-family-mono, 'JetBrains Mono', monospace);
    font-weight: 600;
    color: #4ade80;
    font-size: 0.95rem;
}

.value-number--products[b-hzh94hd2au] {
    font-family: var(--font-family-mono, 'JetBrains Mono', monospace);
    font-weight: 600;
    color: #fbbf24;
    font-size: 0.95rem;
}

.value-number--grand[b-hzh94hd2au] {
    font-family: var(--font-family-mono, 'JetBrains Mono', monospace);
    font-weight: 700;
    color: #60a5fa;
    font-size: 1.1rem;
}

.value-operator[b-hzh94hd2au] {
    font-family: var(--font-family-mono, 'JetBrains Mono', monospace);
    font-size: 1rem;
    color: rgba(148, 163, 184, 0.4);
    font-weight: 600;
    padding: 0 0.25rem;
    align-self: flex-end;
    padding-bottom: 0.1rem;
}

.value-offense-badge[b-hzh94hd2au] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-left: auto;
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    text-align: right;
}

.offense-classification--crime[b-hzh94hd2au] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.1));
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.offense-classification--misdemeanor[b-hzh94hd2au] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.1));
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.offense-label[b-hzh94hd2au] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.offense-classification--crime .offense-label[b-hzh94hd2au] {
    color: #fca5a5;
}

.offense-classification--misdemeanor .offense-label[b-hzh94hd2au] {
    color: #fcd34d;
}

.offense-reason[b-hzh94hd2au] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    color: rgba(148, 163, 184, 0.7);
}

/* --------------------------------------------------------------------------
   ADDITIONAL PRODUCTS TABLE
   -------------------------------------------------------------------------- */
.products-table[b-hzh94hd2au] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0;
}

.products-header[b-hzh94hd2au] {
    display: contents;
}

.products-header > span[b-hzh94hd2au] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.2);
}

.products-row[b-hzh94hd2au] {
    display: contents;
}

.products-row > span[b-hzh94hd2au] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.8rem;
    color: #e2e8f0;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.1);
}

.products-footer[b-hzh94hd2au] {
    display: contents;
}

.products-footer > span[b-hzh94hd2au] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #e2e8f0;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid rgba(100, 116, 139, 0.25);
}

.section-count-badge[b-hzh94hd2au] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: rgba(96, 165, 250, 0.2);
    border: 1px solid rgba(96, 165, 250, 0.35);
    border-radius: 9px;
    font-size: 0.6rem;
    font-weight: 700;
    color: #93c5fd;
    margin-left: 0.35rem;
}

/* --------------------------------------------------------------------------
   REPORT SECTIONS CONTAINER
   -------------------------------------------------------------------------- */
.report-sections[b-hzh94hd2au] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* --------------------------------------------------------------------------
   FIELDS SECTION - Glassmorphic Panel
   -------------------------------------------------------------------------- */
.fields-section[b-hzh94hd2au] {
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(51, 65, 85, 0.4));
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 10px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* --------------------------------------------------------------------------
   SECTION TITLE - Compact Uppercase
   -------------------------------------------------------------------------- */
.section-title[b-hzh94hd2au] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(148, 163, 184, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    user-select: none;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.15);
    margin-bottom: 0.625rem;
    transition: color 0.15s ease;
}

.section-title:hover[b-hzh94hd2au] {
    color: #60a5fa;
}

.section-title .oi[b-hzh94hd2au] {
    font-size: 0.65rem;
    color: rgba(148, 163, 184, 0.6);
}

.section-chevron[b-hzh94hd2au] {
    font-size: 0.55rem;
    transition: transform 0.15s ease;
}

/* --------------------------------------------------------------------------
   FIELDS GRID - 3 Column Compact Layout
   -------------------------------------------------------------------------- */
.fields-grid[b-hzh94hd2au] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.625rem 0.75rem;
}

.field-item[b-hzh94hd2au] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.field-item--wide[b-hzh94hd2au] {
    grid-column: 1 / -1;
}

.field-label[b-hzh94hd2au] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.field-value[b-hzh94hd2au] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: #e2e8f0;
    padding: 0.2rem 0;
}

.field-value--amount[b-hzh94hd2au] {
    font-family: var(--font-family-mono, 'JetBrains Mono', monospace);
    font-weight: 700;
    color: #4ade80;
}

/* --------------------------------------------------------------------------
   PREVIEW CONTAINER
   -------------------------------------------------------------------------- */
.preview-container[b-hzh94hd2au] {
    margin-top: 0.75rem;
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(30, 41, 59, 0.5);
}

.pdf-preview-iframe[b-hzh94hd2au] {
    width: 100%;
    height: 70vh;
    border: none;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .identity-bar[b-hzh94hd2au] {
        flex-direction: column;
        align-items: flex-start;
    }

    .identity-meta[b-hzh94hd2au] {
        margin-left: 0;
    }

    .download-bar[b-hzh94hd2au] {
        flex-direction: column;
        align-items: stretch;
    }

    .download-actions[b-hzh94hd2au] {
        flex-direction: column;
    }

    [b-hzh94hd2au] .download-actions .btn-download {
        width: 100%;
    }

    .secondary-actions[b-hzh94hd2au] {
        justify-content: center;
    }

    .fields-grid[b-hzh94hd2au] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .value-summary-hero[b-hzh94hd2au] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .value-operator[b-hzh94hd2au] {
        align-self: flex-start;
        padding: 0;
    }

    .value-offense-badge[b-hzh94hd2au] {
        margin-left: 0;
        width: 100%;
        text-align: left;
    }

    .products-table[b-hzh94hd2au] {
        grid-template-columns: 1fr auto auto;
    }

    .pdf-preview-iframe[b-hzh94hd2au] {
        height: 55vh;
    }
}

@media (max-width: 575.98px) {
    .pdf-preview-iframe[b-hzh94hd2au] {
        height: 50vh;
    }

    /* Products table: stack into card-like rows on narrow screens */
    .products-table[b-hzh94hd2au] {
        grid-template-columns: 1fr;
    }

    .products-header[b-hzh94hd2au] {
        display: none;
    }

    .products-row[b-hzh94hd2au] {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.15rem 0.5rem;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid rgba(100, 116, 139, 0.1);
    }

    .products-row > span[b-hzh94hd2au] {
        padding: 0;
        border-bottom: none;
    }

    /* Product name takes full width, qty + value share the row */
    .products-row > span:first-child[b-hzh94hd2au] {
        flex: 1 1 100%;
        font-weight: 600;
    }

    .products-row > span:nth-child(2)[b-hzh94hd2au] {
        font-size: 0.75rem;
        color: rgba(148, 163, 184, 0.7);
    }

    .products-footer[b-hzh94hd2au] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0.75rem;
    }

    .products-footer > span[b-hzh94hd2au] {
        padding: 0;
        border-top: none;
    }

    .products-footer > span:nth-child(2)[b-hzh94hd2au] {
        display: none;
    }

    /* Value summary: slightly smaller type on very small screens */
    .value-number--fuel[b-hzh94hd2au],
    .value-number--products[b-hzh94hd2au] {
        font-size: 0.85rem;
    }

    .value-number--grand[b-hzh94hd2au] {
        font-size: 1rem;
    }

    /* Secondary action buttons wrap to fill width */
    .secondary-actions[b-hzh94hd2au] {
        flex-direction: column;
    }

    [b-hzh94hd2au] .secondary-actions .dxbl-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .police-report-preview-page[b-hzh94hd2au] {
        padding: 0 0.5rem 1.5rem;
    }

    .fields-grid[b-hzh94hd2au] {
        grid-template-columns: 1fr;
    }

    .identity-bar[b-hzh94hd2au],
    .download-bar[b-hzh94hd2au],
    .fields-section[b-hzh94hd2au] {
        padding: 0.6rem 0.75rem;
    }

    .meta-item[b-hzh94hd2au] {
        font-size: 0.75rem;
    }
}
/* /Components/Pages/UserPanel/PoliceReport/PoliceReportTransactionSelector.razor.rz.scp.css */
/* Police Report Transaction Selector - Command Center Design */
/* Matches Transactions page styling for consistency */

.police-report-selector-page[b-8cj7cr8awz] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    color: #e2e8f0;
    min-height: calc(100vh - 140px);
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO ACTION BANNER - Command Center focal point
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-action-banner[b-8cj7cr8awz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.75rem 2rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(51, 65, 85, 0.7));
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 16px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

/* Subtle animated gradient overlay - green theme for police reports */
.hero-action-banner[b-8cj7cr8awz]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(34, 197, 94, 0.08) 0%,
        transparent 50%,
        rgba(22, 163, 74, 0.05) 100%
    );
    pointer-events: none;
}

/* Hero top row - for responsive layout */
.hero-top-row[b-8cj7cr8awz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    width: 100%;
}

/* Stats section */
.hero-stats[b-8cj7cr8awz] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 1;
}

.hero-count[b-8cj7cr8awz] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.count-number[b-8cj7cr8awz] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    color: #f8fafc;
    line-height: 1;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.count-label[b-8cj7cr8awz] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hero-meta[b-8cj7cr8awz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: rgba(148, 163, 184, 0.75);
}

.hero-meta .oi[b-8cj7cr8awz] {
    font-size: 0.75rem;
    opacity: 0.7;
}

.hero-meta strong[b-8cj7cr8awz] {
    color: rgba(248, 250, 252, 0.9);
    font-weight: 600;
}

/* CTA Button - Green theme for police reports */
.hero-cta-btn[b-8cj7cr8awz] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 2rem;
    border-radius: 14px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #15803d 100%);
    border: 1px solid rgba(74, 222, 128, 0.4);
    color: #ffffff;
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:
        0 4px 16px rgba(34, 197, 94, 0.35),
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    white-space: nowrap;
}

.hero-cta-btn:hover[b-8cj7cr8awz] {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 6px 24px rgba(34, 197, 94, 0.45),
        0 12px 40px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 50%, #16a34a 100%);
}

.hero-cta-btn:active[b-8cj7cr8awz] {
    transform: translateY(0) scale(0.98);
}

.cta-content[b-8cj7cr8awz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    z-index: 2;
    position: relative;
}

.cta-arrow[b-8cj7cr8awz] {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.hero-cta-btn:hover .cta-arrow[b-8cj7cr8awz] {
    transform: translateX(4px);
}

/* Shimmer effect on CTA */
.cta-shimmer[b-8cj7cr8awz] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255, 255, 255, 0.15) 50%,
        transparent 80%
    );
    transform: translateX(-100%);
    animation: cta-shimmer-b-8cj7cr8awz 8s ease-in-out infinite;
    animation-delay: 2s;
}

@keyframes cta-shimmer-b-8cj7cr8awz {
    0%, 85%, 100% { transform: translateX(-100%); }
    15% { transform: translateX(100%); }
}

/* Mobile full-width CTA button */
.hero-cta-btn.mobile-full-width[b-8cj7cr8awz] {
    width: 100%;
    margin-top: 1rem;
}

/* Mobile hero banner layout */
.hero-action-banner.mobile[b-8cj7cr8awz] {
    flex-direction: column;
    gap: 0;
    padding: 1rem;
}

.hero-action-banner.mobile .hero-top-row[b-8cj7cr8awz] {
    flex-direction: row;
    justify-content: flex-start;
    gap: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FILTERS SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.filters-container[b-8cj7cr8awz] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(51, 65, 85, 0.4));
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 12px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 1rem 1.25rem;
}

.filters-row[b-8cj7cr8awz] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-end;
}

.filter-item[b-8cj7cr8awz] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 160px;
    flex: 1;
    max-width: 220px;
}

.filter-item-location[b-8cj7cr8awz] {
    min-width: 200px;
    max-width: 280px;
}

.filter-label[b-8cj7cr8awz] {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-input[b-8cj7cr8awz] {
    width: 100%;
}

/* Inactive locations toggle */
.filter-item-toggle[b-8cj7cr8awz] {
    min-width: auto;
    max-width: none;
    flex: 0 0 auto;
}

.btn-inactive-toggle[b-8cj7cr8awz] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(100, 116, 139, 0.3);
    background: rgba(30, 41, 59, 0.4);
    color: rgba(148, 163, 184, 0.8);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    height: 36px;
}

.btn-inactive-toggle .oi[b-8cj7cr8awz] {
    font-size: 0.7rem;
}

.btn-inactive-toggle:hover[b-8cj7cr8awz] {
    border-color: rgba(148, 163, 184, 0.5);
    color: rgba(226, 232, 240, 0.9);
    background: rgba(51, 65, 85, 0.5);
}

.btn-inactive-toggle.active[b-8cj7cr8awz] {
    border-color: rgba(251, 191, 36, 0.4);
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
}

/* Apply Filters button */
.filter-item-apply[b-8cj7cr8awz] {
    min-width: auto;
    max-width: none;
    flex: 0 0 auto;
}

.btn-apply-filters[b-8cj7cr8awz] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    height: 36px;
}

.btn-apply-filters .oi[b-8cj7cr8awz] {
    font-size: 0.7rem;
}

.btn-apply-filters:hover[b-8cj7cr8awz] {
    background: rgba(34, 197, 94, 0.25);
    border-color: rgba(34, 197, 94, 0.6);
    color: #86efac;
}

.btn-apply-filters:active[b-8cj7cr8awz] {
    transform: scale(0.97);
}

/* Truncated results note */
.hero-truncated-note[b-8cj7cr8awz] {
    font-size: 0.7rem;
    color: rgba(251, 191, 36, 0.8);
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STREAMLINED GRID CONTAINER
   ═══════════════════════════════════════════════════════════════════════════ */
.grid-container[b-8cj7cr8awz] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.5), rgba(51, 65, 85, 0.35));
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE - Tablet
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .police-report-selector-page[b-8cj7cr8awz] {
        gap: 1rem;
        padding: 0 0.5rem;
    }

    /* Hero banner stacks on tablet/mobile */
    .hero-action-banner[b-8cj7cr8awz] {
        padding: 1.25rem 1.5rem;
    }

    .hero-top-row[b-8cj7cr8awz] {
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
        text-align: center;
    }

    .hero-stats[b-8cj7cr8awz] {
        align-items: center;
    }

    .hero-count[b-8cj7cr8awz] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .count-number[b-8cj7cr8awz] {
        font-size: 3rem;
    }

    .hero-meta[b-8cj7cr8awz] {
        justify-content: center;
    }

    .grid-container[b-8cj7cr8awz] {
        border-radius: 12px;
    }

    .hero-cta-btn[b-8cj7cr8awz] {
        height: 50px;
        font-size: 0.9rem;
        padding: 0 1.5rem;
    }

    .filters-container[b-8cj7cr8awz] {
        padding: 1rem;
    }

    .filters-row[b-8cj7cr8awz] {
        gap: 1rem;
    }

    .filter-item[b-8cj7cr8awz] {
        min-width: 180px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE - Mobile (XSmall)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .police-report-selector-page[b-8cj7cr8awz] {
        padding: 0 0.25rem;
        gap: 0.75rem;
    }

    .hero-action-banner[b-8cj7cr8awz] {
        padding: 1rem;
        border-radius: 12px;
    }

    .hero-top-row[b-8cj7cr8awz] {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        gap: 1rem;
    }

    .hero-stats[b-8cj7cr8awz] {
        align-items: flex-start;
        text-align: left;
    }

    .hero-count[b-8cj7cr8awz] {
        flex-direction: row;
        align-items: baseline;
        gap: 0.5rem;
    }

    .count-number[b-8cj7cr8awz] {
        font-size: 2.25rem;
    }

    .count-label[b-8cj7cr8awz] {
        font-size: 0.7rem;
    }

    .hero-meta[b-8cj7cr8awz] {
        font-size: 0.7rem;
        justify-content: flex-start;
    }

    .hero-cta-btn[b-8cj7cr8awz] {
        height: 46px;
        font-size: 0.85rem;
        border-radius: 10px;
    }

    .grid-container[b-8cj7cr8awz] {
        border-radius: 10px;
    }

    .filters-container[b-8cj7cr8awz] {
        padding: 0.75rem;
        border-radius: 10px;
    }

    .filters-row[b-8cj7cr8awz] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .filter-item[b-8cj7cr8awz] {
        min-width: 100%;
        max-width: 100%;
        flex: 1 1 100%;
    }

    /* Toggle + Apply share one row on mobile */
    .filter-item-toggle[b-8cj7cr8awz],
    .filter-item-apply[b-8cj7cr8awz] {
        min-width: 0;
        max-width: 100%;
        flex: 1 1 45%;
    }

    .filter-item-toggle .filter-label[b-8cj7cr8awz],
    .filter-item-apply .filter-label[b-8cj7cr8awz] {
        display: none;
    }

    .btn-inactive-toggle[b-8cj7cr8awz] {
        width: 100%;
        justify-content: center;
        padding: 0.5rem 0.75rem;
    }

    .btn-inactive-toggle .toggle-text[b-8cj7cr8awz] {
        display: inline;
    }

    .btn-apply-filters[b-8cj7cr8awz] {
        width: 100%;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL AUTHORIZATION STRIPE - Green left border for status=2 (has photo)
   ═══════════════════════════════════════════════════════════════════════════ */
[b-8cj7cr8awz] .modern-glass-grid .dxbl-grid-table tbody tr.global-auth > td:first-child {
    border-left: 3px solid rgba(34, 197, 94, 0.7) !important;
}

[b-8cj7cr8awz] .modern-glass-grid .dxbl-grid-table tbody tr.global-auth:hover > td:first-child {
    border-left-color: rgba(34, 197, 94, 0.9) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STATUS BADGES - Visual indicators for report status
   ═══════════════════════════════════════════════════════════════════════════ */
.status-badge[b-8cj7cr8awz] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.status-badge .oi[b-8cj7cr8awz] {
    font-size: 0.75rem;
}

/* Draft - Amber/Yellow */
.status-badge.status-draft[b-8cj7cr8awz] {
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.35);
    color: #fbbf24;
}

/* Complete - Green */
.status-badge.status-complete[b-8cj7cr8awz] {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #22c55e;
}

/* Pending - Gray/Blue */
.status-badge.status-pending[b-8cj7cr8awz] {
    background: rgba(100, 116, 139, 0.15);
    border: 1px solid rgba(100, 116, 139, 0.3);
    color: #94a3b8;
}

/* Mobile: icon-only badges */
@media (max-width: 575.98px) {
    .status-badge[b-8cj7cr8awz] {
        padding: 0.35rem;
        min-width: 28px;
        justify-content: center;
    }

    .status-badge .oi[b-8cj7cr8awz] {
        font-size: 0.85rem;
    }
}
/* /Components/Pages/UserPanel/SearchResults.razor.rz.scp.css */
.search-results-page[b-jhkjzpvci8] {
    padding: 1rem 0;
    max-width: 800px;
}

.search-loading[b-jhkjzpvci8] {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.search-empty[b-jhkjzpvci8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem;
    color: rgba(148, 163, 184, 0.6);
}

.search-empty-icon[b-jhkjzpvci8] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.search-category[b-jhkjzpvci8] {
    margin-bottom: 1.5rem;
}

.search-category-title[b-jhkjzpvci8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.8);
    margin-bottom: 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.search-count[b-jhkjzpvci8] {
    font-weight: 400;
    font-size: 0.8rem;
    color: rgba(148, 163, 184, 0.5);
}

.search-cards[b-jhkjzpvci8] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.search-card[b-jhkjzpvci8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.5), rgba(51, 65, 85, 0.3));
    border: 1px solid rgba(148, 163, 184, 0.1);
    cursor: pointer;
    transition: all 0.15s ease;
}

.search-card:hover[b-jhkjzpvci8] {
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.08));
    border-color: rgba(59, 130, 246, 0.25);
    transform: translateX(2px);
}

.search-card-icon[b-jhkjzpvci8] {
    font-size: 1rem;
    color: rgba(148, 163, 184, 0.6);
    min-width: 20px;
    text-align: center;
}

.search-card-text[b-jhkjzpvci8] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.search-card-primary[b-jhkjzpvci8] {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(226, 232, 240, 0.95);
}

.search-card-subtitle[b-jhkjzpvci8] {
    font-size: 0.78rem;
    color: rgba(148, 163, 184, 0.55);
}

.search-card-arrow[b-jhkjzpvci8] {
    font-size: 0.65rem;
    color: rgba(148, 163, 184, 0.3);
}

.search-plate-link[b-jhkjzpvci8] {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.search-plate-link a[b-jhkjzpvci8] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(96, 165, 250, 0.9);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.15s ease;
}

.search-plate-link a:hover[b-jhkjzpvci8] {
    color: rgba(147, 197, 253, 1);
}

@media (max-width: 767.98px) {
    .search-results-page[b-jhkjzpvci8] {
        padding: 0.5rem 0;
        max-width: 100%;
    }

    .search-card[b-jhkjzpvci8] {
        padding: 0.55rem 0.7rem;
    }
}

@media (max-width: 575.98px) {
    .search-results-page[b-jhkjzpvci8] {
        padding: 0.25rem 0;
    }

    .search-empty[b-jhkjzpvci8] {
        padding: 2rem 1rem;
    }

    .search-empty-icon[b-jhkjzpvci8] {
        font-size: 2rem;
    }

    .search-category[b-jhkjzpvci8] {
        margin-bottom: 1rem;
    }

    .search-category-title[b-jhkjzpvci8] {
        font-size: 0.85rem;
        gap: 0.35rem;
        margin-bottom: 0.4rem;
        padding-bottom: 0.3rem;
    }

    .search-count[b-jhkjzpvci8] {
        font-size: 0.72rem;
    }

    .search-card[b-jhkjzpvci8] {
        padding: 0.5rem 0.6rem;
        gap: 0.5rem;
        border-radius: 8px;
    }

    .search-card-icon[b-jhkjzpvci8] {
        font-size: 0.9rem;
        min-width: 18px;
    }

    .search-card-primary[b-jhkjzpvci8] {
        font-size: 0.82rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .search-card-subtitle[b-jhkjzpvci8] {
        font-size: 0.72rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .search-card-arrow[b-jhkjzpvci8] {
        font-size: 0.55rem;
    }

    .search-plate-link[b-jhkjzpvci8] {
        margin-top: 1rem;
        padding-top: 0.75rem;
    }

    .search-plate-link a[b-jhkjzpvci8] {
        font-size: 0.82rem;
        gap: 0.35rem;
    }
}
/* /Components/Pages/UserPanel/TransactionDetails.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════
   TRANSACTION DETAILS PAGE - Modern Glassmorphism Design
   ═══════════════════════════════════════════════════════════════════════════════

   Design Philosophy:
   - Glassmorphism with subtle transparency and blur effects
   - Adaptive layout: expands when no image present
   - Clear visual hierarchy with hero sections
   - Consistent with AuthorizeTransaction styling

   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   PAGE CONTAINER
   ═══════════════════════════════════════════════════════════════════════════════ */
.transaction-details-page[b-bneqkf8e54] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem 2rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HERO IDENTITY BAR - Compact Header
   ═══════════════════════════════════════════════════════════════════════════════ */
.identity-bar[b-bneqkf8e54] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6));
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 12px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.identity-plate[b-bneqkf8e54] {
    flex-shrink: 0;
}

.identity-meta[b-bneqkf8e54] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex: 1;
}

.meta-item[b-bneqkf8e54] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.8rem;
    color: rgba(203, 213, 225, 0.9);
}

.meta-item .oi[b-bneqkf8e54] {
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.7);
}

.identity-badges[b-bneqkf8e54] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* Transaction Type Badges */
.type-badge[b-bneqkf8e54] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.type-badge--driveoff[b-bneqkf8e54] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.15));
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

.type-badge--payment[b-bneqkf8e54] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.15));
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #86efac;
}

/* Status Badges */
.status-badge[b-bneqkf8e54] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-badge--unauthorized[b-bneqkf8e54] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.15));
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fcd34d;
}

.status-badge--authorized[b-bneqkf8e54] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.15));
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #86efac;
}

.status-badge--local[b-bneqkf8e54] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.15));
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: #93c5fd;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MAIN CONTENT LAYOUT - Adaptive Grid
   ═══════════════════════════════════════════════════════════════════════════════ */
.content-layout[b-bneqkf8e54] {
    display: grid;
    gap: 1rem;
}

/* Layout WITH image - wider image section (55/45 split) */
.content-layout--with-image[b-bneqkf8e54] {
    grid-template-columns: minmax(320px, 1fr) minmax(300px, 48%);
    grid-template-rows: auto auto 1fr;
}

/* Layout WITHOUT image - single column, full width */
.content-layout--no-image[b-bneqkf8e54] {
    grid-template-columns: 1fr;
}

/* Form column */
.form-column[b-bneqkf8e54] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Image column */
.image-column[b-bneqkf8e54] {
    grid-row: 1 / -1;
    grid-column: 2;
    display: flex;
    flex-direction: column;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   AMOUNT ROW - Compact Horizontal Layout
   ═══════════════════════════════════════════════════════════════════════════════ */
.amount-row[b-bneqkf8e54] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg,
        rgba(34, 197, 94, 0.12) 0%,
        rgba(22, 163, 74, 0.08) 100%);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 10px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.amount-row--negative[b-bneqkf8e54] {
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 0.12) 0%,
        rgba(37, 99, 235, 0.08) 100%);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.amount-row-label[b-bneqkf8e54] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(34, 197, 94, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.amount-row--negative .amount-row-label[b-bneqkf8e54] {
    color: rgba(96, 165, 250, 0.85);
}

.amount-row-label .oi[b-bneqkf8e54] {
    font-size: 0.85rem;
}

.amount-row-value[b-bneqkf8e54] {
    flex: 1;
    font-family: var(--font-family-mono, 'JetBrains Mono', monospace);
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #4ade80;
    text-shadow: 0 0 20px rgba(74, 222, 128, 0.3);
    text-align: right;
    letter-spacing: -0.01em;
}

.amount-row--negative .amount-row-value[b-bneqkf8e54] {
    color: #60a5fa;
    text-shadow: 0 0 20px rgba(96, 165, 250, 0.3);
}

.amount-row-input[b-bneqkf8e54] {
    flex: 1;
    min-width: 150px;
}

.amount-row-currency[b-bneqkf8e54] {
    padding: 0.25rem 0.5rem;
    background: rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: 5px;
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.65rem;
    font-weight: 800;
    color: #4ade80;
    letter-spacing: 0.05em;
}

.amount-row--negative .amount-row-currency[b-bneqkf8e54] {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: #60a5fa;
}

/* Compact amount editor */
[b-bneqkf8e54] .amount-compact-editor.dxbl-masked-input,
[b-bneqkf8e54] .amount-compact-editor.dxbl-text-edit {
    border: 1px solid rgba(34, 197, 94, 0.4) !important;
    border-radius: 8px !important;
    background: rgba(15, 23, 42, 0.6) !important;
    transition: all 0.2s ease !important;
    height: 38px !important;
    min-height: 38px !important;
}

[b-bneqkf8e54] .amount-compact-editor.dxbl-masked-input:hover,
[b-bneqkf8e54] .amount-compact-editor.dxbl-text-edit:hover {
    border-color: rgba(34, 197, 94, 0.5) !important;
    background: rgba(15, 23, 42, 0.7) !important;
}

[b-bneqkf8e54] .amount-compact-editor.dxbl-masked-input:focus-within,
[b-bneqkf8e54] .amount-compact-editor.dxbl-text-edit:focus-within {
    border-color: rgba(74, 222, 128, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15) !important;
    background: rgba(15, 23, 42, 0.8) !important;
}

[b-bneqkf8e54] .amount-compact-editor .dxbl-text-edit-input {
    font-family: var(--font-family-mono, 'JetBrains Mono', monospace) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    text-align: right;
    color: #4ade80 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 0.75rem !important;
    height: 100% !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FIELDS GRID - Compact Dense Layout
   ═══════════════════════════════════════════════════════════════════════════════ */
.fields-section[b-bneqkf8e54] {
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(51, 65, 85, 0.4));
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 10px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.section-title[b-bneqkf8e54] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(148, 163, 184, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.15);
}

.section-title .oi[b-bneqkf8e54] {
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.6);
}

.fields-grid[b-bneqkf8e54] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

/* Dense mode - same 3 columns, slightly tighter */
.fields-grid--dense[b-bneqkf8e54] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.625rem 0.75rem;
}

/* When no image, use more columns for better space utilization */
.content-layout--no-image .fields-grid[b-bneqkf8e54],
.content-layout--no-image .fields-grid--dense[b-bneqkf8e54] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fields-grid--two-col[b-bneqkf8e54] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field-item[b-bneqkf8e54] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.field-label[b-bneqkf8e54] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.field-value[b-bneqkf8e54] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: #e2e8f0;
    padding: 0.35rem 0;
}

/* Compact form controls */
[b-bneqkf8e54] .compact-field {
    width: 100%;
}

[b-bneqkf8e54] .compact-field.dxbl-text-edit,
[b-bneqkf8e54] .compact-field.dxbl-spin-edit,
[b-bneqkf8e54] .compact-field.dxbl-combobox,
[b-bneqkf8e54] .compact-field.dxbl-date-edit,
[b-bneqkf8e54] .compact-field.dxbl-time-edit,
[b-bneqkf8e54] .compact-field.dxbl-masked-input {
    border: 1px solid rgba(100, 116, 139, 0.3) !important;
    border-radius: 6px !important;
    background: rgba(15, 23, 42, 0.6) !important;
    transition: all 0.2s ease !important;
    height: 34px !important;
    min-height: 34px !important;
}

[b-bneqkf8e54] .compact-field.dxbl-text-edit:hover,
[b-bneqkf8e54] .compact-field.dxbl-spin-edit:hover,
[b-bneqkf8e54] .compact-field.dxbl-combobox:hover,
[b-bneqkf8e54] .compact-field.dxbl-date-edit:hover,
[b-bneqkf8e54] .compact-field.dxbl-time-edit:hover,
[b-bneqkf8e54] .compact-field.dxbl-masked-input:hover {
    border-color: rgba(100, 116, 139, 0.5) !important;
    background: rgba(15, 23, 42, 0.7) !important;
}

[b-bneqkf8e54] .compact-field.dxbl-text-edit:focus-within,
[b-bneqkf8e54] .compact-field.dxbl-spin-edit:focus-within,
[b-bneqkf8e54] .compact-field.dxbl-combobox:focus-within,
[b-bneqkf8e54] .compact-field.dxbl-date-edit:focus-within,
[b-bneqkf8e54] .compact-field.dxbl-time-edit:focus-within,
[b-bneqkf8e54] .compact-field.dxbl-masked-input:focus-within {
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
    background: rgba(15, 23, 42, 0.8) !important;
}

[b-bneqkf8e54] .compact-field .dxbl-text-edit-input,
[b-bneqkf8e54] .compact-field .dxbl-combobox-input-container {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #f1f5f9 !important;
    font-size: 0.875rem !important;
    padding: 0.45rem 0.65rem !important;
}

/* Checkbox styling */
.checkbox-wrapper[b-bneqkf8e54] {
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 0.6rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.checkbox-wrapper:hover[b-bneqkf8e54] {
    border-color: rgba(100, 116, 139, 0.5);
    background: rgba(15, 23, 42, 0.7);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   AUTHORIZATION INFO SECTION - Compact
   ═══════════════════════════════════════════════════════════════════════════════ */
.auth-info-section[b-bneqkf8e54] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.65rem 1rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(22, 163, 74, 0.05));
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 8px;
}

.auth-info-item[b-bneqkf8e54] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.auth-info-icon[b-bneqkf8e54] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(34, 197, 94, 0.15);
    border-radius: 6px;
    color: #4ade80;
    font-size: 0.75rem;
}

.auth-info-content[b-bneqkf8e54] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.auth-info-label[b-bneqkf8e54] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.auth-info-value[b-bneqkf8e54] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #e2e8f0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   COMMENT SECTION - Compact
   ═══════════════════════════════════════════════════════════════════════════════ */
.comment-section[b-bneqkf8e54] {
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(51, 65, 85, 0.4));
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 10px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.comment-label[b-bneqkf8e54] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}

[b-bneqkf8e54] .comment-field.dxbl-memo,
[b-bneqkf8e54] .comment-field.dxbl-memo-edit,
[b-bneqkf8e54] dxbl-memo-editor.comment-field {
    border: 1px solid rgba(100, 116, 139, 0.3) !important;
    border-radius: 8px !important;
    background: rgba(15, 23, 42, 0.6) !important;
    transition: all 0.2s ease !important;
    overflow: visible !important;
}

[b-bneqkf8e54] .comment-field.dxbl-memo:hover,
[b-bneqkf8e54] .comment-field.dxbl-memo-edit:hover {
    border-color: rgba(100, 116, 139, 0.5) !important;
    background: rgba(15, 23, 42, 0.7) !important;
}

[b-bneqkf8e54] .comment-field.dxbl-memo:focus-within,
[b-bneqkf8e54] .comment-field.dxbl-memo-edit:focus-within {
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
    background: rgba(15, 23, 42, 0.8) !important;
}

[b-bneqkf8e54] .comment-field textarea {
    background: transparent !important;
    border: none !important;
    color: #f1f5f9 !important;
    font-size: 0.875rem !important;
    padding: 0.65rem !important;
    resize: vertical !important;
    overflow: auto !important;
}

/* Read-only comment display */
.comment-display[b-bneqkf8e54] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.875rem;
    color: #e2e8f0;
    line-height: 1.5;
    white-space: pre-wrap;
}

.comment-empty[b-bneqkf8e54] {
    color: rgba(148, 163, 184, 0.5);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   POLICE REPORT CTA - Compact
   ═══════════════════════════════════════════════════════════════════════════════ */
.police-report-cta[b-bneqkf8e54] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.05));
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 10px;
}

.police-report-content[b-bneqkf8e54] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.police-report-icon[b-bneqkf8e54] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(239, 68, 68, 0.15);
    border-radius: 10px;
    color: #fca5a5;
    font-size: 1.1rem;
}

.police-report-text h4[b-bneqkf8e54] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fca5a5;
    margin: 0 0 0.15rem 0;
}

.police-report-text p[b-bneqkf8e54] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.75rem;
    color: rgba(203, 213, 225, 0.8);
    margin: 0;
}

.police-report-btn[b-bneqkf8e54] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.8), rgba(220, 38, 38, 0.9));
    border: 1px solid rgba(252, 165, 165, 0.3);
    border-radius: 8px;
    color: #ffffff;
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.police-report-btn:hover[b-bneqkf8e54] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(220, 38, 38, 1));
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.35);
    transform: translateY(-1px);
}

.police-report-btn .oi[b-bneqkf8e54] {
    font-size: 0.85rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ACTION BAR - Compact
   ═══════════════════════════════════════════════════════════════════════════════ */
.action-bar[b-bneqkf8e54] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(51, 65, 85, 0.5));
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 10px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.action-bar-secondary[b-bneqkf8e54] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.action-bar-primary[b-bneqkf8e54] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Action Buttons - Compact */
.btn-cancel[b-bneqkf8e54] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 36px;
    padding: 0 1rem;
    background: rgba(100, 116, 139, 0.2);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 7px;
    color: rgba(203, 213, 225, 0.9);
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover[b-bneqkf8e54] {
    background: rgba(100, 116, 139, 0.35);
    border-color: rgba(148, 163, 184, 0.4);
    color: #e2e8f0;
}

.btn-cancel .oi[b-bneqkf8e54] {
    font-size: 0.7rem;
}

.btn-update[b-bneqkf8e54] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 36px;
    padding: 0 1.25rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.85), rgba(37, 99, 235, 0.9));
    border: 1px solid rgba(147, 197, 253, 0.3);
    border-radius: 7px;
    color: #ffffff;
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-update:hover[b-bneqkf8e54] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(37, 99, 235, 1));
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35);
    transform: translateY(-1px);
}

.btn-update .oi[b-bneqkf8e54] {
    font-size: 0.7rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   IMAGE SECTION - Full Image Display
   ═══════════════════════════════════════════════════════════════════════════════ */
.image-section[b-bneqkf8e54] {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(10, 15, 25, 0.8);
    border: 1px solid rgba(100, 116, 139, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 280px;
}

.image-container[b-bneqkf8e54] {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

.image-container img[b-bneqkf8e54] {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-container:hover img[b-bneqkf8e54] {
    transform: scale(1.01);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.image-overlay[b-bneqkf8e54] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.75rem 1rem;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.95), transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.image-label[b-bneqkf8e54] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(203, 213, 225, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.image-label .oi[b-bneqkf8e54] {
    font-size: 0.8rem;
    color: rgba(148, 163, 184, 0.7);
}

.image-expand-hint[b-bneqkf8e54] {
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.6);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   VEHICLE ID BADGE
   ═══════════════════════════════════════════════════════════════════════════════ */
.vehicle-id-badge[b-bneqkf8e54] {
    position: absolute;
    top: 0.75rem; left: 0.75rem; right: 0.75rem;
    display: flex; align-items: center; gap: 4px;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    border-radius: 6px;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.4;
    pointer-events: none;
    z-index: 2;
}
.vehicle-id-badge .oi-bolt[b-bneqkf8e54] { color: #F59E0B; font-size: 0.55rem; flex-shrink: 0; }
.vehicle-id-badge-loading[b-bneqkf8e54] { opacity: 0.7; }
.vehicle-id-badge-loading .oi-loop-circular[b-bneqkf8e54] { animation: vid-spin-b-bneqkf8e54 1s linear infinite; }
@keyframes vid-spin-b-bneqkf8e54 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.vehicle-id-edit-btn[b-bneqkf8e54] {
    pointer-events: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,0.5);
    padding: 0 2px;
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.55rem;
    line-height: 1;
    transition: color 0.15s;
}
.vehicle-id-edit-btn:hover[b-bneqkf8e54] { color: #F59E0B; }

/* ═══════════════════════════════════════════════════════════════════════════════
   VEHICLE RE-IDENTIFICATION POPUP
   ═══════════════════════════════════════════════════════════════════════════════ */
.vid-overlay[b-bneqkf8e54] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: vid-fadeIn-b-bneqkf8e54 0.2s ease;
}

.vid-popup[b-bneqkf8e54] {
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.95), rgba(51, 65, 85, 0.9));
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 20px;
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), 0 12px 24px rgba(0, 0, 0, 0.2);
    animation: vid-slideIn-b-bneqkf8e54 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vid-popup-icon[b-bneqkf8e54] {
    width: 56px; height: 56px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.15));
    display: flex; align-items: center; justify-content: center;
}
.vid-popup-icon .oi[b-bneqkf8e54] { font-size: 1.5rem; color: #F59E0B; }

.vid-popup-title[b-bneqkf8e54] {
    font-size: 1.1rem; font-weight: 700; color: #f8fafc; margin-bottom: 1rem;
}

.vid-previous-result[b-bneqkf8e54], .vid-new-result[b-bneqkf8e54], .vid-hint-section[b-bneqkf8e54],
.vid-processing-section[b-bneqkf8e54], .vid-error-section[b-bneqkf8e54] {
    padding: 0.75rem; border-radius: 10px; margin-bottom: 0.75rem; text-align: left;
}

.vid-section-label[b-bneqkf8e54] {
    display: block; font-size: 0.65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: rgba(148, 163, 184, 0.6); margin-bottom: 0.35rem;
}

.vid-previous-result[b-bneqkf8e54] {
    background: rgba(71, 85, 105, 0.3);
    border: 1px solid rgba(100, 116, 139, 0.2);
}

.vid-result-row[b-bneqkf8e54] {
    font-size: 0.95rem; font-weight: 600; color: #f1f5f9;
}
.vid-color[b-bneqkf8e54] { color: rgba(148, 163, 184, 0.7); }

.vid-new-result[b-bneqkf8e54] {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.vid-result-success[b-bneqkf8e54] { color: #F59E0B; }

.vid-hint-input[b-bneqkf8e54] {
    width: 100%; padding: 0.5rem 0.75rem;
    border: 1px solid rgba(100, 116, 139, 0.3); border-radius: 8px;
    background: rgba(15, 23, 42, 0.6); color: #f1f5f9;
    font-size: 0.9rem; outline: none; transition: border-color 0.2s;
    box-sizing: border-box;
}
.vid-hint-input:focus[b-bneqkf8e54] {
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}
.vid-hint-input[b-bneqkf8e54]::placeholder { color: rgba(148, 163, 184, 0.5); }

.vid-hint-sent[b-bneqkf8e54] { margin-bottom: 0.75rem; }
.vid-hint-text[b-bneqkf8e54] { font-style: italic; color: #F59E0B; font-size: 0.9rem; }

.vid-spinner-row[b-bneqkf8e54] {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.75rem; background: rgba(245, 158, 11, 0.08);
    border-radius: 8px; color: rgba(245, 158, 11, 0.9); font-size: 0.85rem;
}
.vid-spin-icon[b-bneqkf8e54] { animation: vid-spin-b-bneqkf8e54 1s linear infinite; }

.vid-error-section[b-bneqkf8e54] {
    display: flex; align-items: center; gap: 0.5rem;
    background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(248, 113, 113, 0.25);
    color: #fca5a5; font-size: 0.9rem;
}

.vid-popup-actions[b-bneqkf8e54] {
    display: flex; gap: 0.75rem; justify-content: center; margin-top: 1.25rem;
}

.vid-btn[b-bneqkf8e54] {
    padding: 0.65rem 1.5rem; border-radius: 10px;
    font-size: 0.9rem; font-weight: 600; cursor: pointer;
    transition: all 0.2s ease; border: none;
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.vid-btn:disabled[b-bneqkf8e54] { opacity: 0.4; cursor: default; }

.vid-btn-cancel[b-bneqkf8e54] {
    background: rgba(255, 255, 255, 0.08); color: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.2);
}
.vid-btn-cancel:hover[b-bneqkf8e54] { background: rgba(255, 255, 255, 0.12); }

.vid-btn-confirm[b-bneqkf8e54] {
    background: linear-gradient(135deg, #F59E0B, #D97706); color: white;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.vid-btn-confirm:hover:not(:disabled)[b-bneqkf8e54] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
}

@keyframes vid-fadeIn-b-bneqkf8e54 { from { opacity: 0; } to { opacity: 1; } }
@keyframes vid-slideIn-b-bneqkf8e54 {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   IMAGE LIGHTBOX
   ═══════════════════════════════════════════════════════════════════════════════ */
.image-lightbox[b-bneqkf8e54] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: lightbox-fade-in-b-bneqkf8e54 0.2s ease-out;
}

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

.lightbox-content[b-bneqkf8e54] {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
    animation: lightbox-scale-in-b-bneqkf8e54 0.25s ease-out;
}

@keyframes lightbox-scale-in-b-bneqkf8e54 {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.lightbox-content img[b-bneqkf8e54] {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
}

.lightbox-close[b-bneqkf8e54] {
    position: absolute;
    top: -50px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lightbox-close:hover[b-bneqkf8e54] {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CONFIRMATION POPUP
   ═══════════════════════════════════════════════════════════════════════════════ */
[b-bneqkf8e54] .dxbl-popup {
    background: rgba(30, 41, 59, 0.98) !important;
    border: 1px solid rgba(100, 116, 139, 0.3) !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(20px) !important;
}

[b-bneqkf8e54] .dxbl-popup-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(100, 116, 139, 0.2) !important;
    padding: 1.25rem 1.5rem !important;
}

[b-bneqkf8e54] .dxbl-popup-header-text {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #f1f5f9 !important;
}

[b-bneqkf8e54] .dxbl-popup-body {
    padding: 1.5rem !important;
    color: rgba(203, 213, 225, 0.9) !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
}

[b-bneqkf8e54] .dxbl-popup-footer {
    background: rgba(51, 65, 85, 0.3) !important;
    border-top: 1px solid rgba(100, 116, 139, 0.2) !important;
    padding: 1rem 1.5rem !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 0.75rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Tablet portrait - stack layout */
@media (max-width: 992px) {
    .content-layout--with-image[b-bneqkf8e54] {
        grid-template-columns: 1fr;
    }

    .image-column[b-bneqkf8e54] {
        grid-row: auto;
        grid-column: 1;
        order: -1;
    }

    .image-section[b-bneqkf8e54] {
        min-height: 220px;
        max-height: 320px;
    }

    .auth-info-section[b-bneqkf8e54] {
        flex-wrap: wrap;
    }

    .police-report-cta[b-bneqkf8e54] {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .police-report-content[b-bneqkf8e54] {
        justify-content: center;
    }

    .police-report-btn[b-bneqkf8e54] {
        justify-content: center;
    }
}

/* Small tablet / large phone - responsive columns */
@media (max-width: 768px) {
    .fields-grid[b-bneqkf8e54],
    .fields-grid--dense[b-bneqkf8e54],
    .content-layout--no-image .fields-grid[b-bneqkf8e54],
    .content-layout--no-image .fields-grid--dense[b-bneqkf8e54] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile */
@media (max-width: 575px) {
    .transaction-details-page[b-bneqkf8e54] {
        padding: 0 0.5rem 1rem;
    }

    .identity-bar[b-bneqkf8e54] {
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
        border-radius: 10px;
    }

    .identity-meta[b-bneqkf8e54] {
        width: 100%;
        order: 1;
    }

    .identity-badges[b-bneqkf8e54] {
        width: 100%;
        margin-left: 0;
        order: 2;
        justify-content: flex-start;
    }

    .amount-row[b-bneqkf8e54] {
        padding: 0.5rem 0.75rem;
        border-radius: 8px;
        flex-wrap: wrap;
    }

    .amount-row-input[b-bneqkf8e54] {
        min-width: 120px;
    }

    .amount-row-value[b-bneqkf8e54] {
        font-size: 1.25rem;
    }

    .fields-section[b-bneqkf8e54] {
        padding: 0.625rem 0.75rem;
    }

    .fields-grid[b-bneqkf8e54],
    .fields-grid--dense[b-bneqkf8e54],
    .content-layout--no-image .fields-grid[b-bneqkf8e54],
    .content-layout--no-image .fields-grid--dense[b-bneqkf8e54] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .auth-info-section[b-bneqkf8e54] {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
    }

    .auth-info-item[b-bneqkf8e54] {
        width: 100%;
    }

    .comment-section[b-bneqkf8e54] {
        padding: 0.5rem 0.75rem;
    }

    .action-bar[b-bneqkf8e54] {
        flex-direction: row;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
    }

    .btn-cancel[b-bneqkf8e54],
    .btn-update[b-bneqkf8e54] {
        flex: 1;
        justify-content: center;
        height: 34px;
        font-size: 0.75rem;
    }

    .image-section[b-bneqkf8e54] {
        min-height: 180px;
        max-height: 250px;
    }
}

/* Very small screens */
@media (max-width: 400px) {
    .fields-grid[b-bneqkf8e54],
    .fields-grid--dense[b-bneqkf8e54],
    .content-layout--no-image .fields-grid[b-bneqkf8e54],
    .content-layout--no-image .fields-grid--dense[b-bneqkf8e54] {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }

    .type-badge[b-bneqkf8e54],
    .status-badge[b-bneqkf8e54] {
        padding: 0.25rem 0.4rem;
        font-size: 0.55rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PHOTO UPLOAD DROP ZONE
   ═══════════════════════════════════════════════════════════════════════════════ */

.photo-drop-area[b-bneqkf8e54] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    text-align: center;
    gap: 0.4rem;
}

.photo-drop-area:hover[b-bneqkf8e54],
.photo-drop-area-hover[b-bneqkf8e54] {
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.05);
}

.photo-uploading[b-bneqkf8e54] {
    cursor: default;
    border-color: rgba(59, 130, 246, 0.3);
}

@keyframes photo-spin-b-bneqkf8e54 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.photo-spin[b-bneqkf8e54] {
    animation: photo-spin-b-bneqkf8e54 1s linear infinite;
}

.photo-drop-icon[b-bneqkf8e54] {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.3);
}

.photo-drop-text[b-bneqkf8e54] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
}

.photo-drop-hint[b-bneqkf8e54] {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.3);
}

.photo-drop-area-fill[b-bneqkf8e54] {
    flex: 1;
    min-height: 0;
    align-self: stretch;
}

.photo-drop-info[b-bneqkf8e54] {
    margin-top: auto;
    padding-top: 1rem;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.3);
    line-height: 1.4;
    text-align: center;
}

.photo-drop-info .oi[b-bneqkf8e54] {
    font-size: 0.65rem;
    margin-right: 0.2rem;
}

.photo-preview-compact[b-bneqkf8e54] {
    position: relative;
    display: inline-flex;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(100, 116, 139, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    max-width: 100%;
}

.photo-thumb[b-bneqkf8e54] {
    max-width: 100%;
    max-height: 280px;
    object-fit: contain;
    display: block;
}

.photo-preview-overlay[b-bneqkf8e54] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.35rem 0.5rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 0.2s;
}

.photo-preview-compact:hover .photo-preview-overlay[b-bneqkf8e54] {
    opacity: 1;
}

.btn-remove-photo[b-bneqkf8e54] {
    background: rgba(220, 38, 38, 0.85);
    color: white;
    border: none;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-remove-photo:hover[b-bneqkf8e54] {
    background: rgba(220, 38, 38, 1);
}

.photo-action-bar[b-bneqkf8e54] {
    display: flex;
    justify-content: center;
    margin-top: 0.75rem;
}

.btn-upload-photo[b-bneqkf8e54] {
    background: rgba(59, 130, 246, 0.85);
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-upload-photo:hover[b-bneqkf8e54] {
    background: rgba(59, 130, 246, 1);
}

.btn-upload-photo:disabled[b-bneqkf8e54] {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 575.98px) {
    .photo-thumb[b-bneqkf8e54] {
        max-height: 180px;
    }

    .photo-preview-overlay[b-bneqkf8e54] {
        opacity: 1;
    }
}
/* /Components/Pages/UserPanel/Transactions.razor.rz.scp.css */
/* Transactions Page - Command Center Design */
/* Modern hero-focused layout for high-traffic authorization workflow */

.transactions-page[b-525r4xkucl] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    color: #e2e8f0;
    min-height: calc(100vh - 140px);
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO ACTION BANNER - Command Center focal point
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-action-banner[b-525r4xkucl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.75rem 2rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(51, 65, 85, 0.7));
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 16px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

/* Subtle animated gradient overlay */
.hero-action-banner[b-525r4xkucl]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 107, 107, 0.08) 0%,
        transparent 50%,
        rgba(220, 38, 38, 0.05) 100%
    );
    pointer-events: none;
}

/* Urgency state: Warning (7-14 days) */
.hero-action-banner.urgency-warning[b-525r4xkucl] {
    border-color: rgba(251, 191, 36, 0.35);
    box-shadow:
        0 4px 24px rgba(251, 191, 36, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.hero-action-banner.urgency-warning[b-525r4xkucl]::before {
    background: linear-gradient(
        135deg,
        rgba(251, 191, 36, 0.12) 0%,
        transparent 50%,
        rgba(245, 158, 11, 0.08) 100%
    );
}

/* Urgency state: Critical (14+ days) */
.hero-action-banner.urgency-critical[b-525r4xkucl] {
    border-color: rgba(248, 113, 113, 0.4);
    box-shadow:
        0 4px 24px rgba(239, 68, 68, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.hero-action-banner.urgency-critical[b-525r4xkucl]::before {
    background: linear-gradient(
        135deg,
        rgba(239, 68, 68, 0.15) 0%,
        transparent 50%,
        rgba(220, 38, 38, 0.1) 100%
    );
}

/* Stats section */
.hero-stats[b-525r4xkucl] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 1;
}

.hero-count[b-525r4xkucl] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.count-number[b-525r4xkucl] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    color: #f8fafc;
    line-height: 1;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.count-label[b-525r4xkucl] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hero-meta[b-525r4xkucl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: rgba(148, 163, 184, 0.75);
}

.hero-meta .oi[b-525r4xkucl] {
    font-size: 0.75rem;
    opacity: 0.7;
}

.hero-meta strong[b-525r4xkucl] {
    color: rgba(248, 250, 252, 0.9);
    font-weight: 600;
}

/* Hero Actions Container */
.hero-actions[b-525r4xkucl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    z-index: 1;
}

.hero-cta-btn[b-525r4xkucl] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 2rem;
    border-radius: 14px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
    border: 1px solid rgba(248, 113, 113, 0.4);
    color: #ffffff;
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:
        0 4px 16px rgba(239, 68, 68, 0.35),
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    white-space: nowrap;
}

.hero-cta-btn:hover[b-525r4xkucl] {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 6px 24px rgba(239, 68, 68, 0.45),
        0 12px 40px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, #f87171 0%, #ef4444 50%, #dc2626 100%);
}

.hero-cta-btn:active[b-525r4xkucl] {
    transform: translateY(0) scale(0.98);
}

.cta-content[b-525r4xkucl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    z-index: 2;
    position: relative;
}

.cta-arrow[b-525r4xkucl] {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.hero-cta-btn:hover .cta-arrow[b-525r4xkucl] {
    transform: translateX(4px);
}

/* Shimmer effect on CTA - subtle, infrequent */
.cta-shimmer[b-525r4xkucl] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255, 255, 255, 0.15) 50%,
        transparent 80%
    );
    transform: translateX(-100%);
    animation: cta-shimmer-b-525r4xkucl 8s ease-in-out infinite;
    animation-delay: 2s;
}

@keyframes cta-shimmer-b-525r4xkucl {
    0%, 85%, 100% { transform: translateX(-100%); }
    15% { transform: translateX(100%); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STREAMLINED GRID CONTAINER
   ═══════════════════════════════════════════════════════════════════════════ */
.grid-container[b-525r4xkucl] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.5), rgba(51, 65, 85, 0.35));
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AGE INDICATOR ROWS - Note: Global styles in modern-grid.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* Subtle background pattern */
.transactions-page[b-525r4xkucl]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    opacity: 0.03;
    background-image:
        radial-gradient(circle at 25% 25%, rgba(255, 107, 107, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(220, 38, 38, 0.1) 0%, transparent 50%);
    background-size: 100% 100%;
    pointer-events: none;
}

/* Page Title Styling */
.transactions-page .page-title[b-525r4xkucl] {
    font-size: clamp(1.8rem, 2.2vw, 2.35rem);
    font-weight: 700;
    letter-spacing: 0.015em;
    color: #f8fafc;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    margin-bottom: 1.5rem;
    padding-left: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALERT STYLING
   ═══════════════════════════════════════════════════════════════════════════ */

/* Success alert styling */
.transactions-page .alert.alert-success[b-525r4xkucl] {
    background: rgba(5, 150, 105, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 16px;
    color: #a7f3d0;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(5, 150, 105, 0.2);
}

.transactions-page .alert.alert-success .alert-heading[b-525r4xkucl] {
    color: #d1fae5;
    margin-bottom: 0.5rem;
}

/* Error alert styling */
.transactions-page .alert.alert-danger[b-525r4xkucl] {
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid rgba(248, 113, 113, 0.3);
    border-radius: 16px;
    color: #fecaca;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(127, 29, 29, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE - Tablet
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .transactions-page[b-525r4xkucl] {
        gap: 1rem;
        padding: 0 0.5rem;
    }

    .transactions-page .page-title[b-525r4xkucl] {
        font-size: 1.5rem;
    }

    /* Hero banner stacks on tablet/mobile */
    .hero-action-banner[b-525r4xkucl] {
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
        padding: 1.25rem 1.5rem;
        text-align: center;
    }

    .hero-stats[b-525r4xkucl] {
        align-items: center;
    }

    .hero-count[b-525r4xkucl] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .count-number[b-525r4xkucl] {
        font-size: 3rem;
    }

    .hero-meta[b-525r4xkucl] {
        justify-content: center;
    }

    .grid-container[b-525r4xkucl] {
        border-radius: 12px;
    }

    /* On tablet, keep desktop-like but slightly smaller */
    .hero-cta-btn[b-525r4xkucl] {
        height: 50px;
        font-size: 0.9rem;
        padding: 0 1.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE - Mobile (XSmall)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .transactions-page[b-525r4xkucl] {
        padding: 0 0.25rem;
        gap: 0.75rem;
    }

    .hero-action-banner[b-525r4xkucl] {
        padding: 1rem;
        border-radius: 12px;
        gap: 0;
    }

    .hero-stats[b-525r4xkucl] {
        align-items: flex-start;
        text-align: left;
    }

    .hero-count[b-525r4xkucl] {
        flex-direction: row;
        align-items: baseline;
        gap: 0.5rem;
    }

    .count-number[b-525r4xkucl] {
        font-size: 2.25rem;
    }

    .count-label[b-525r4xkucl] {
        font-size: 0.7rem;
    }

    .hero-meta[b-525r4xkucl] {
        font-size: 0.7rem;
        justify-content: flex-start;
    }

    .hero-cta-btn[b-525r4xkucl] {
        height: 46px;
        font-size: 0.85rem;
        border-radius: 10px;
    }

    .grid-container[b-525r4xkucl] {
        border-radius: 10px;
    }
}
/* /Components/Shared/AuthorizationStatusBadge.razor.rz.scp.css */
/* === MODERN AUTHORIZATION STATUS BADGE === */
/* Glassmorphic badge with color-coded states and responsive mobile view */

.modern-status-badge[b-uvhvhi1bcz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: 32px;
    padding: 0 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: default;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.12),
        inset 0 1px 2px rgba(255, 255, 255, 0.2);
    vertical-align: middle;
}

.badge-icon[b-uvhvhi1bcz] {
    font-size: 0.85rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* Full text - visible on desktop */
.badge-text-full[b-uvhvhi1bcz] {
    display: inline;
}

/* Mobile text - hidden on desktop, visible on mobile */
.badge-text-mobile[b-uvhvhi1bcz] {
    display: none;
    font-weight: 700;
}

/* === COLOR STATES === */

/* Yellow/Amber - Waiting for Authorization (Unauthorized) */
.modern-status-badge.badge-waiting[b-uvhvhi1bcz] {
    background: linear-gradient(135deg,
        rgba(245, 158, 11, 0.85) 0%,
        rgba(217, 119, 6, 0.80) 100%);
    border: 1px solid rgba(253, 230, 138, 0.4);
    color: #ffffff;
}

.modern-status-badge.badge-waiting:hover[b-uvhvhi1bcz] {
    background: linear-gradient(135deg,
        rgba(245, 158, 11, 0.95) 0%,
        rgba(217, 119, 6, 0.90) 100%);
    box-shadow:
        0 6px 16px rgba(217, 119, 6, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.25),
        0 0 20px rgba(245, 158, 11, 0.2);
}

/* Green - Payment */
.modern-status-badge.badge-payment[b-uvhvhi1bcz] {
    background: linear-gradient(135deg,
        rgba(16, 185, 129, 0.85) 0%,
        rgba(5, 150, 105, 0.80) 100%);
    border: 1px solid rgba(167, 243, 208, 0.4);
    color: #ffffff;
}

.modern-status-badge.badge-payment:hover[b-uvhvhi1bcz] {
    background: linear-gradient(135deg,
        rgba(16, 185, 129, 0.95) 0%,
        rgba(5, 150, 105, 0.90) 100%);
    box-shadow:
        0 6px 16px rgba(5, 150, 105, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.25),
        0 0 20px rgba(16, 185, 129, 0.2);
}

/* Red - Drive-off */
.modern-status-badge.badge-driveoff[b-uvhvhi1bcz] {
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.85) 0%,
        rgba(220, 38, 38, 0.80) 100%);
    border: 1px solid rgba(254, 202, 202, 0.4);
    color: #ffffff;
}

.modern-status-badge.badge-driveoff:hover[b-uvhvhi1bcz] {
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.95) 0%,
        rgba(220, 38, 38, 0.90) 100%);
    box-shadow:
        0 6px 16px rgba(220, 38, 38, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.25),
        0 0 20px rgba(239, 68, 68, 0.2);
}

/* Gray - Neutral/Unknown */
.modern-status-badge.badge-neutral[b-uvhvhi1bcz] {
    background: linear-gradient(135deg,
        rgba(100, 116, 139, 0.85) 0%,
        rgba(71, 85, 105, 0.80) 100%);
    border: 1px solid rgba(203, 213, 225, 0.4);
    color: #ffffff;
}

.modern-status-badge.badge-neutral:hover[b-uvhvhi1bcz] {
    background: linear-gradient(135deg,
        rgba(100, 116, 139, 0.95) 0%,
        rgba(71, 85, 105, 0.90) 100%);
    box-shadow:
        0 6px 16px rgba(71, 85, 105, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.25);
}

/* === RESPONSIVE - MOBILE VIEW === */
@media (max-width: 768px) {
    .modern-status-badge[b-uvhvhi1bcz] {
        height: 32px;
        padding: 0 0.6rem;
        gap: 0.25rem;
        min-width: 44px;
        justify-content: center;
    }

    /* Hide full text on mobile */
    .badge-text-full[b-uvhvhi1bcz] {
        display: none;
    }

    /* Show first letter on mobile */
    .badge-text-mobile[b-uvhvhi1bcz] {
        display: inline;
        font-size: 0.8rem;
        font-weight: 700;
    }

    .badge-icon[b-uvhvhi1bcz] {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .modern-status-badge[b-uvhvhi1bcz] {
        height: 32px;
        padding: 0 0.5rem;
        min-width: 40px;
    }

    .badge-text-mobile[b-uvhvhi1bcz] {
        font-size: 0.75rem;
    }

    .badge-icon[b-uvhvhi1bcz] {
        font-size: 0.75rem;
    }
}
/* /Components/Shared/AuthorizeButton.razor.rz.scp.css */
/* /Components/Shared/Charts/PlateProfilePopup.razor.rz.scp.css */
@media (max-width: 575.98px) {
    [b-hcadawqizc] .dxbl-popup-footer {
        flex-direction: column;
        gap: 0.5rem;
    }
    [b-hcadawqizc] .dxbl-popup-footer .dxbl-btn {
        width: 100%;
    }
}
/* /Components/Shared/ColumnChooserButton.razor.rz.scp.css */
.column-chooser-btn[b-d1mgyhq7c2] {
    position: relative;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 12px;
    background: rgba(71, 85, 105, 0.4);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: rgba(203, 213, 225, 0.9);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex-shrink: 0;
}

.column-chooser-btn:hover[b-d1mgyhq7c2] {
    background: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.5);
    transform: translateY(-1px);
}

.column-chooser-btn:active[b-d1mgyhq7c2] {
    transform: scale(0.96) translateY(0);
    background: rgba(59, 130, 246, 0.35);
}

.column-chooser-btn:focus-visible[b-d1mgyhq7c2] {
    outline: 2px solid var(--color-primary, #3b82f6);
    outline-offset: 2px;
}

.column-chooser-btn .icon-wrapper[b-d1mgyhq7c2] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

/* Smaller on mobile */
@media (max-width: 575.98px) {
    .column-chooser-btn[b-d1mgyhq7c2] {
        width: 42px;
        height: 42px;
        border-radius: 10px;
    }

    .column-chooser-btn .icon-wrapper[b-d1mgyhq7c2] {
        font-size: 1rem;
    }
}
/* /Components/Shared/CortexGraphVisualization.razor.rz.scp.css */
.cortex-graph-container[b-g0aclxswmx] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
}

.cortex-graph-header[b-g0aclxswmx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #2d2d2d;
    border-bottom: 1px solid #404040;
}

.cortex-graph-header h4[b-g0aclxswmx] {
    margin: 0;
    color: #ffffff;
    font-size: 1.25rem;
}

.cortex-graph-controls[b-g0aclxswmx] {
    display: flex;
    gap: 10px;
}

.cortex-graph-controls .btn[b-g0aclxswmx] {
    padding: 6px 12px;
    font-size: 0.875rem;
}

.cortex-graph-content[b-g0aclxswmx] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.graph-container[b-g0aclxswmx] {
    flex: 1;
    position: relative;
}

.graph-canvas[b-g0aclxswmx] {
    width: 100%;
    height: 100%;
    background: #1a1a1a;
}

.details-panel[b-g0aclxswmx] {
    width: 300px;
    background: #2d2d2d;
    border-left: 1px solid #404040;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.details-header[b-g0aclxswmx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #333333;
    border-bottom: 1px solid #404040;
}

.details-header h5[b-g0aclxswmx] {
    margin: 0;
    color: #ffffff;
    font-size: 1.1rem;
}

.details-content[b-g0aclxswmx] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.detail-item[b-g0aclxswmx] {
    margin-bottom: 15px;
}

.detail-item label[b-g0aclxswmx] {
    display: block;
    font-weight: 600;
    color: #cccccc;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.detail-item .badge[b-g0aclxswmx] {
    font-size: 0.8rem;
    padding: 4px 8px;
}

.badge-info[b-g0aclxswmx] {
    background-color: #17a2b8;
    color: white;
}

.badge-warning[b-g0aclxswmx] {
    background-color: #ffc107;
    color: #212529;
}

.badge-danger[b-g0aclxswmx] {
    background-color: #dc3545;
    color: white;
}

.badge-primary[b-g0aclxswmx] {
    background-color: #007bff;
    color: white;
}

.badge-secondary[b-g0aclxswmx] {
    background-color: #6c757d;
    color: white;
}

.badge i[b-g0aclxswmx] {
    margin-right: 4px;
}

/* Category-specific badge styling */
.badge.category-input[b-g0aclxswmx] {
    background-color: #4ECDC4;
    color: #2c3e50;
}

.badge.category-processing[b-g0aclxswmx] {
    background-color: #96CEB4;
    color: #2c3e50;
}

.badge.category-output[b-g0aclxswmx] {
    background-color: #45B7D1;
    color: white;
}

.badge.category-storage[b-g0aclxswmx] {
    background-color: #FF8A65;
    color: white;
}

.badge.category-network[b-g0aclxswmx] {
    background-color: #DDA0DD;
    color: #2c3e50;
}

.badge.category-media[b-g0aclxswmx] {
    background-color: #FFB74D;
    color: #2c3e50;
}

.badge.category-security[b-g0aclxswmx] {
    background-color: #F06292;
    color: white;
}

.badge.category-integration[b-g0aclxswmx] {
    background-color: #A1C181;
    color: #2c3e50;
}

.badge.category-utility[b-g0aclxswmx] {
    background-color: #98D8C8;
    color: #2c3e50;
}

.code-block[b-g0aclxswmx] {
    background: #1a1a1a;
    color: #e6e6e6;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #404040;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 200px;
    overflow-y: auto;
}

.trigger-action[b-g0aclxswmx] {
    background: #333333;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    border: 1px solid #404040;
}

.trigger-name[b-g0aclxswmx] {
    font-weight: 600;
    color: #4ECDC4;
    margin-bottom: 5px;
}

.trigger-condition[b-g0aclxswmx],
.trigger-action-script[b-g0aclxswmx] {
    margin-top: 8px;
}

.trigger-condition small[b-g0aclxswmx],
.trigger-action-script small[b-g0aclxswmx] {
    color: #888888;
    font-size: 0.8rem;
}

.trigger-condition code[b-g0aclxswmx],
.trigger-action-script code[b-g0aclxswmx] {
    background: #1a1a1a;
    color: #e6e6e6;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8rem;
}

.message-info[b-g0aclxswmx] {
    background: #404040;
    color: #cccccc;
    padding: 6px 10px;
    border-radius: 4px;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

/* Responsive design */
@media (max-width: 768px) {
    .cortex-graph-content[b-g0aclxswmx] {
        flex-direction: column;
    }
    
    .details-panel[b-g0aclxswmx] {
        width: 100%;
        max-height: 50vh;
    }
    
    .cortex-graph-header[b-g0aclxswmx] {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
    
    .cortex-graph-controls[b-g0aclxswmx] {
        width: 100%;
        justify-content: flex-start;
    }
}
/* /Components/Shared/Dashboard/KpiHeroBar.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════
   KpiHeroBar - Shared KPI Hero Bar Component
   Industrial Command Center aesthetic with performance metrics
   ═══════════════════════════════════════════════════════════════════════════════ */

.kpi-hero-bar[b-lmphm1twd4] {
    display: flex;
    width: 100%;
    gap: 1rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(51, 65, 85, 0.7));
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 14px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.kpi-cards-row[b-lmphm1twd4] {
    display: flex;
    gap: 1rem;
    flex-wrap: nowrap;
    width: 100%;
    align-items: stretch;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   WELCOME CARD - Brand/Company Card
   ═══════════════════════════════════════════════════════════════════════════════ */
.welcome-card[b-lmphm1twd4] {
    flex: 1.5;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    background: linear-gradient(135deg,
        rgba(0, 153, 0, 0.2) 0%,
        rgba(0, 120, 0, 0.15) 50%,
        rgba(255, 204, 0, 0.1) 100%);
    border: 1px solid rgba(0, 153, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.welcome-card[b-lmphm1twd4]::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 100%;
    background: linear-gradient(180deg,
        rgba(255, 204, 0, 0.3) 0%,
        rgba(255, 204, 0, 0.1) 100%);
    border-radius: 0 12px 12px 0;
}

.welcome-card:hover[b-lmphm1twd4] {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 153, 0, 0.25);
    border-color: rgba(0, 153, 0, 0.6);
}

.welcome-brand[b-lmphm1twd4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}

.welcome-brand-text[b-lmphm1twd4] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #00cc00 0%, #ffcc00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}

.welcome-subtitle[b-lmphm1twd4] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(148, 163, 184, 0.9);
    position: relative;
    z-index: 1;
}

.welcome-period[b-lmphm1twd4] {
    font-size: 0.7rem;
    color: rgba(0, 204, 0, 0.8);
    font-weight: 500;
    position: relative;
    z-index: 1;
}

/* Basic Welcome Card (no branding configured) */
.welcome-card-basic[b-lmphm1twd4] {
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 0.15) 0%,
        rgba(37, 99, 235, 0.1) 50%,
        rgba(99, 102, 241, 0.08) 100%);
    border: 1px solid rgba(59, 130, 246, 0.35);
}

.welcome-card-basic .welcome-brand-text[b-lmphm1twd4] {
    background: linear-gradient(135deg, #60a5fa 0%, #818cf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.welcome-card-basic .welcome-period[b-lmphm1twd4] {
    color: rgba(96, 165, 250, 0.8);
}

.welcome-card-basic[b-lmphm1twd4]::before {
    background: linear-gradient(180deg,
        rgba(99, 102, 241, 0.3) 0%,
        rgba(99, 102, 241, 0.1) 100%);
}

.welcome-card-basic:hover[b-lmphm1twd4] {
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.6);
}

/* Branded Welcome Card (with client colors - styles set via inline style) */
.welcome-card-branded[b-lmphm1twd4] {
    /* Base styles inherited from .welcome-card */
    /* Background and border colors set via inline style */
}

.welcome-card-branded .welcome-brand-text[b-lmphm1twd4] {
    /* Colors set via inline style */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.welcome-card-branded[b-lmphm1twd4]::before {
    /* Remove the hardcoded accent strip for branded cards */
    display: none;
}

/* Logo styling for branded cards */
.welcome-logo[b-lmphm1twd4] {
    width: 52px;
    height: 52px;
    max-width: 52px;
    max-height: 52px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   KPI HERO CARD - Base Styles
   ═══════════════════════════════════════════════════════════════════════════════ */
.kpi-hero-card[b-lmphm1twd4] {
    flex: 1;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.kpi-hero-card:hover[b-lmphm1twd4] {
    transform: translateY(-2px);
}

/* Success variant (green) */
.kpi-hero-card.success[b-lmphm1twd4] {
    background: linear-gradient(145deg,
        rgba(34, 197, 94, 0.15) 0%,
        rgba(22, 163, 74, 0.08) 50%,
        rgba(16, 185, 129, 0.12) 100%);
    border: 1px solid rgba(34, 197, 94, 0.35);
}

.kpi-hero-card.success:hover[b-lmphm1twd4] {
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.5);
}

/* Info variant (cyan) */
.kpi-hero-card.info[b-lmphm1twd4] {
    background: linear-gradient(145deg,
        rgba(6, 182, 212, 0.15) 0%,
        rgba(8, 145, 178, 0.08) 50%,
        rgba(14, 165, 233, 0.12) 100%);
    border: 1px solid rgba(6, 182, 212, 0.35);
}

.kpi-hero-card.info:hover[b-lmphm1twd4] {
    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.2);
    border-color: rgba(6, 182, 212, 0.5);
}

/* Warning variant (amber) */
.kpi-hero-card.warning[b-lmphm1twd4] {
    background: linear-gradient(145deg,
        rgba(251, 191, 36, 0.15) 0%,
        rgba(245, 158, 11, 0.08) 50%,
        rgba(234, 179, 8, 0.12) 100%);
    border: 1px solid rgba(251, 191, 36, 0.35);
}

.kpi-hero-card.warning:hover[b-lmphm1twd4] {
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.5);
}

/* Primary variant (blue) */
.kpi-hero-card.primary[b-lmphm1twd4] {
    background: linear-gradient(145deg,
        rgba(59, 130, 246, 0.15) 0%,
        rgba(37, 99, 235, 0.08) 50%,
        rgba(29, 78, 216, 0.12) 100%);
    border: 1px solid rgba(59, 130, 246, 0.35);
}

.kpi-hero-card.primary:hover[b-lmphm1twd4] {
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   KPI CARD ELEMENTS
   ═══════════════════════════════════════════════════════════════════════════════ */
.kpi-card-icon[b-lmphm1twd4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

.kpi-hero-card.success .kpi-card-icon[b-lmphm1twd4] {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.kpi-hero-card.info .kpi-card-icon[b-lmphm1twd4] {
    background: rgba(6, 182, 212, 0.2);
    color: #22d3ee;
}

.kpi-hero-card.warning .kpi-card-icon[b-lmphm1twd4] {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.kpi-hero-card.primary .kpi-card-icon[b-lmphm1twd4] {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.kpi-card-label[b-lmphm1twd4] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(148, 163, 184, 0.9);
}

.kpi-card-value[b-lmphm1twd4] {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.kpi-hero-card.success .kpi-card-value[b-lmphm1twd4] {
    color: #4ade80;
}

.kpi-hero-card.info .kpi-card-value[b-lmphm1twd4] {
    color: #22d3ee;
}

.kpi-hero-card.warning .kpi-card-value[b-lmphm1twd4] {
    color: #fbbf24;
}

.kpi-hero-card.primary .kpi-card-value[b-lmphm1twd4] {
    color: #60a5fa;
}

.kpi-card-sublabel[b-lmphm1twd4] {
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.7);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LOADING SKELETON
   ═══════════════════════════════════════════════════════════════════════════════ */
.kpi-skeleton[b-lmphm1twd4] {
    animation: skeleton-pulse-b-lmphm1twd4 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse-b-lmphm1twd4 {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

.kpi-skeleton-value[b-lmphm1twd4] {
    width: 60px;
    height: 28px;
    background: rgba(100, 116, 139, 0.3);
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE - Tablet
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .kpi-hero-bar[b-lmphm1twd4] {
        flex-wrap: wrap;
    }

    .kpi-cards-row[b-lmphm1twd4] {
        flex-wrap: wrap;
    }

    .welcome-card[b-lmphm1twd4] {
        min-width: 100%;
        order: -1;
    }

    .kpi-hero-card[b-lmphm1twd4] {
        min-width: calc(50% - 0.5rem);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE - Mobile
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .kpi-hero-bar[b-lmphm1twd4] {
        padding: 1rem;
        gap: 0.75rem;
        border-radius: 12px;
        margin-bottom: 1rem;
    }

    .kpi-cards-row[b-lmphm1twd4] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .welcome-card[b-lmphm1twd4] {
        min-width: 100%;
        padding: 1rem;
    }

    .welcome-brand-text[b-lmphm1twd4] {
        font-size: 1.25rem;
    }

    .welcome-logo[b-lmphm1twd4] {
        width: 48px;
        height: 48px;
        max-width: 48px;
        max-height: 48px;
    }

    .kpi-hero-card[b-lmphm1twd4] {
        min-width: 100%;
        padding: 0.875rem 1rem;
    }

    .kpi-card-value[b-lmphm1twd4] {
        font-size: 1.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE - XSmall Mobile
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .kpi-hero-bar[b-lmphm1twd4] {
        padding: 0.75rem;
    }

    .welcome-card[b-lmphm1twd4] {
        padding: 0.75rem;
    }

    .welcome-brand-text[b-lmphm1twd4] {
        font-size: 1.1rem;
    }

    .welcome-logo[b-lmphm1twd4] {
        width: 44px;
        height: 44px;
        max-width: 44px;
        max-height: 44px;
    }

    .welcome-subtitle[b-lmphm1twd4] {
        font-size: 0.65rem;
    }

    .welcome-period[b-lmphm1twd4] {
        font-size: 0.6rem;
    }

    .kpi-hero-card[b-lmphm1twd4] {
        padding: 0.75rem;
    }

    .kpi-card-label[b-lmphm1twd4] {
        font-size: 0.65rem;
    }

    .kpi-card-value[b-lmphm1twd4] {
        font-size: 1.35rem;
    }
}
/* /Components/Shared/Dashboard/TodayAlarmsFeed.razor.rz.scp.css */
.alarms-feed-container[b-v8lwq0gugs] {
    min-height: 120px;
}

.feed-scroll[b-v8lwq0gugs] {
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 4px;
}

.feed-scroll[b-v8lwq0gugs]::-webkit-scrollbar {
    width: 5px;
}

.feed-scroll[b-v8lwq0gugs]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
}

.feed-scroll[b-v8lwq0gugs]::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.25);
    border-radius: 4px;
}

.feed-row[b-v8lwq0gugs] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.feed-row:hover[b-v8lwq0gugs] {
    background: rgba(255, 255, 255, 0.04);
}

.feed-time[b-v8lwq0gugs] {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(248, 250, 252, 0.6);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    min-width: 40px;
}

.feed-location[b-v8lwq0gugs] {
    font-size: 0.8rem;
    color: rgba(248, 250, 252, 0.55);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.feed-empty[b-v8lwq0gugs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    color: rgba(148, 163, 184, 0.5);
    font-size: 0.9rem;
}

.feed-empty-icon[b-v8lwq0gugs] {
    font-size: 1.5rem;
    color: rgba(34, 197, 94, 0.5);
}

/* ── Mobile ── */
@media (max-width: 575.98px) {
    .feed-scroll[b-v8lwq0gugs] {
        max-height: 260px;
    }

    .feed-row[b-v8lwq0gugs] {
        padding: 6px 8px;
        gap: 8px;
    }

    .feed-time[b-v8lwq0gugs] {
        font-size: 0.75rem;
    }

    .feed-location[b-v8lwq0gugs] {
        font-size: 0.75rem;
    }

    .feed-empty[b-v8lwq0gugs] {
        padding: 24px 16px;
    }
}
/* /Components/Shared/DataLoadingIndicator.razor.rz.scp.css */
/* === MODERN LOADING CONTAINER === */
/* Using theme colors from modern-forms.css for consistency */
.modern-loading-container[b-9y3izoq4i1] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    min-height: 200px;
    width: 100%;
}

/* Full screen centered mode */
.modern-loading-container.fullscreen[b-9y3izoq4i1] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 100vh;
    padding: 0;
    z-index: 9999;
    background: transparent;
}

/* Backdrop blur effect */
.modern-loading-container.with-backdrop[b-9y3izoq4i1] {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.modern-loading-glass[b-9y3izoq4i1] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2.5rem 3.5rem;
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: glassAppear-b-9y3izoq4i1 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Floating animation for fullscreen mode */
.modern-loading-glass.floating[b-9y3izoq4i1] {
    animation: glassAppear-b-9y3izoq4i1 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
               float-b-9y3izoq4i1 3s ease-in-out infinite 0.5s;
}

@keyframes glassAppear-b-9y3izoq4i1 {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes float-b-9y3izoq4i1 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* === SPINNER ANIMATION === */
.loading-spinner[b-9y3izoq4i1] {
    position: relative;
    width: 72px;
    height: 72px;
}

.spinner-ring[b-9y3izoq4i1] {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid rgba(100, 116, 139, 0.15);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spinnerRotate-b-9y3izoq4i1 0.9s linear infinite;
}

.spinner-ring-delay[b-9y3izoq4i1] {
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    border-width: 3px;
    border-color: rgba(100, 116, 139, 0.1);
    border-top-color: rgba(147, 197, 253, 0.8);
    animation: spinnerRotateReverse-b-9y3izoq4i1 1.4s linear infinite;
}

@keyframes spinnerRotate-b-9y3izoq4i1 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes spinnerRotateReverse-b-9y3izoq4i1 {
    0% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* === DOTS ANIMATION === */
.loading-dots[b-9y3izoq4i1] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.dot[b-9y3izoq4i1] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #3b82f6;
    animation: dotBounce-b-9y3izoq4i1 1.4s infinite ease-in-out both;
}

.dot:nth-child(1)[b-9y3izoq4i1] {
    animation-delay: -0.32s;
}

.dot:nth-child(2)[b-9y3izoq4i1] {
    animation-delay: -0.16s;
}

@keyframes dotBounce-b-9y3izoq4i1 {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.4;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* === PULSE ANIMATION === */
.loading-pulse[b-9y3izoq4i1] {
    position: relative;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pulse-circle[b-9y3izoq4i1] {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #3b82f6;
    animation: pulseExpand-b-9y3izoq4i1 1.5s ease-out infinite;
}

.pulse-circle-delay-1[b-9y3izoq4i1] {
    animation-delay: 0.5s;
}

.pulse-circle-delay-2[b-9y3izoq4i1] {
    animation-delay: 1s;
}

@keyframes pulseExpand-b-9y3izoq4i1 {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* === PROGRESS BAR ANIMATION === */
.loading-progress[b-9y3izoq4i1] {
    width: 200px;
    height: 4px;
    background: rgba(100, 116, 139, 0.2);
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar[b-9y3izoq4i1] {
    height: 100%;
    width: 40%;
    background: #3b82f6;
    border-radius: 999px;
    animation: progressSlide-b-9y3izoq4i1 1.2s ease-in-out infinite;
}

@keyframes progressSlide-b-9y3izoq4i1 {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(350%);
    }
}

/* === TEXT CONTAINER === */
.loading-text-container[b-9y3izoq4i1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

/* === LOADING TEXT === */
.loading-text[b-9y3izoq4i1] {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #ffffff;
    text-align: center;
}

/* === SUBTITLE === */
.loading-subtitle[b-9y3izoq4i1] {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    color: rgba(148, 163, 184, 0.8);
    text-align: center;
    max-width: 260px;
    line-height: 1.4;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .modern-loading-container[b-9y3izoq4i1] {
        min-height: 220px;
        padding: 2rem 1rem;
    }

    .modern-loading-glass[b-9y3izoq4i1] {
        padding: 2rem 2.5rem;
        gap: 1.5rem;
        border-radius: 16px;
    }

    .loading-spinner[b-9y3izoq4i1] {
        width: 60px;
        height: 60px;
    }

    .loading-pulse[b-9y3izoq4i1] {
        width: 60px;
        height: 60px;
    }

    .loading-progress[b-9y3izoq4i1] {
        width: 180px;
    }

    .loading-text[b-9y3izoq4i1] {
        font-size: 1rem;
    }

    .loading-subtitle[b-9y3izoq4i1] {
        font-size: 0.8rem;
        max-width: 220px;
    }
}

@media (max-width: 480px) {
    .modern-loading-glass[b-9y3izoq4i1] {
        padding: 1.75rem 1.5rem;
    }

    .loading-spinner[b-9y3izoq4i1] {
        width: 56px;
        height: 56px;
    }

    .loading-text[b-9y3izoq4i1] {
        font-size: 0.95rem;
    }
}
/* /Components/Shared/DetailsButton.razor.rz.scp.css */
.detail-button[b-mcey9ykgkk] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.35rem;
    border-radius: 16px;
    background: linear-gradient(150deg, rgba(37, 99, 235, 0.65), rgba(59, 130, 246, 0.4));
    border: 1px solid rgba(191, 219, 254, 0.38);
    color: #f8fafc;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1;
    letter-spacing: 0.015em;
    min-height: 2.35rem;
    min-width: 2.35rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 18px 42px rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}

.detail-button[b-mcey9ykgkk]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 15px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.18) 0%, rgba(191, 219, 254, 0.08) 45%, rgba(59, 130, 246, 0.18) 100%);
    opacity: 0.8;
    pointer-events: none;
    z-index: 0;
}

.detail-button .text[b-mcey9ykgkk] {
    z-index: 1;
}

.icon-container[b-mcey9ykgkk] {
    position: relative;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 12px;
    background: linear-gradient(150deg, rgba(37, 99, 235, 0.75), rgba(59, 130, 246, 0.45));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 16px 28px rgba(15, 23, 42, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    flex-shrink: 0;
    transition: transform 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}

.icon-default[b-mcey9ykgkk],
.icon-hover[b-mcey9ykgkk] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: #f8fafc;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.icon-default[b-mcey9ykgkk] {
    opacity: 1;
}

.icon-hover[b-mcey9ykgkk] {
    opacity: 0;
}

.detail-button .shine[b-mcey9ykgkk] {
    position: absolute;
    inset: -10%;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0) 70%);
    transform: translateX(-120%) skewX(-20deg);
    transition: transform 0.55s ease;
    pointer-events: none;
    z-index: 0;
}

.detail-button:hover[b-mcey9ykgkk] {
    background: linear-gradient(150deg, rgba(96, 165, 250, 0.75), rgba(37, 99, 235, 0.55));
    border-color: rgba(191, 219, 254, 0.55);
    box-shadow: 0 24px 52px rgba(37, 99, 235, 0.42);
    transform: translateY(-2px);
}

.detail-button:hover[b-mcey9ykgkk]::before {
    opacity: 1;
}

.detail-button:hover .shine[b-mcey9ykgkk] {
    transform: translateX(120%) skewX(-20deg);
}

.detail-button:hover .icon-default[b-mcey9ykgkk] {
    opacity: 0;
}

.detail-button:hover .icon-hover[b-mcey9ykgkk] {
    opacity: 1;
}

.detail-button:hover .icon-container[b-mcey9ykgkk] {
    transform: translateY(-1px) scale(1.05);
    background: linear-gradient(150deg, rgba(191, 219, 254, 0.9), rgba(96, 165, 250, 0.6));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 22px 40px rgba(37, 99, 235, 0.4);
}

.detail-button:active[b-mcey9ykgkk] {
    transform: translateY(0);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.38);
}

.detail-button:focus-visible[b-mcey9ykgkk] {
    outline: none;
    box-shadow: 0 0 0 4px rgba(191, 219, 254, 0.45);
}

@media (max-width: 768px) {
    .detail-button[b-mcey9ykgkk] {
        padding: 0.5rem 1.05rem;
        border-radius: 14px;
        font-size: 0.88rem;
        min-height: 2.1rem;
    }

    .icon-container[b-mcey9ykgkk] {
        width: 1.4rem;
        height: 1.4rem;
    }
}
/* /Components/Shared/EditFormButtons.razor.rz.scp.css */
/* Edit Form Buttons Styling */

/* ============================================
   Standalone Form Mode (UseFormSubmit=false)
   ============================================ */

/* Ensure buttons have consistent height and spacing */
.d-flex .dx-button[b-p7jozulu8l] {
    min-width: 100px;
    height: 38px;
}

/* Add subtle shadow to buttons */
.d-flex .dx-button[b-p7jozulu8l] {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

/* Hover effects for enabled buttons */
.d-flex .dx-button:not([disabled]):hover[b-p7jozulu8l] {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Disabled button styling - more subtle when saving */
.d-flex .dx-button[disabled][b-p7jozulu8l] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Icon spacing */
.dx-button .oi[b-p7jozulu8l] {
    margin-right: 4px;
}

/* Border top styling */
.border-top[b-p7jozulu8l] {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ============================================
   Grid Inline Edit Mode (UseFormSubmit=true)
   ============================================ */

.grid-edit-actions[b-p7jozulu8l] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(100, 116, 139, 0.2);
}

/* Override global button styles for grid edit buttons */
.grid-edit-btn[b-p7jozulu8l],
button.grid-edit-btn[b-p7jozulu8l],
.dxbl-btn.grid-edit-btn[b-p7jozulu8l] {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 110px !important;
    height: 38px !important;
    border-radius: 6px !important;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 1rem !important;
    box-sizing: border-box !important;
}

.grid-edit-btn .oi[b-p7jozulu8l],
.grid-edit-btn .dxbl-btn-icon[b-p7jozulu8l] {
    margin-right: 0.5rem !important;
    font-size: 0.8rem !important;
}

/* Save button - blue (Primary) */
.dxbl-btn.grid-edit-btn.dxbl-btn-primary[b-p7jozulu8l] {
    background: rgba(59, 130, 246, 0.85) !important;
    border: 1px solid rgba(147, 197, 253, 0.4) !important;
    color: #ffffff !important;
}

.dxbl-btn.grid-edit-btn.dxbl-btn-primary:hover:not(:disabled)[b-p7jozulu8l] {
    background: rgba(59, 130, 246, 0.95) !important;
    border-color: rgba(147, 197, 253, 0.6) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* Cancel button - gray (Secondary) */
.dxbl-btn.grid-edit-btn.dxbl-btn-secondary[b-p7jozulu8l] {
    background: rgba(100, 116, 139, 0.25) !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
    color: rgba(203, 213, 225, 0.9) !important;
}

.dxbl-btn.grid-edit-btn.dxbl-btn-secondary:hover:not(:disabled)[b-p7jozulu8l] {
    background: rgba(100, 116, 139, 0.4) !important;
    border-color: rgba(148, 163, 184, 0.5) !important;
    color: #e2e8f0 !important;
}

/* Disabled state */
.grid-edit-btn:disabled[b-p7jozulu8l],
.dxbl-btn.grid-edit-btn:disabled[b-p7jozulu8l] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* ============================================
   Shared: Spinning animation for saving state
   ============================================ */

.spinning-icon .oi-loop-circular[b-p7jozulu8l] {
    animation: spin-b-p7jozulu8l 1s linear infinite;
}

@keyframes spin-b-p7jozulu8l {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================
   Mobile: stack buttons and share equal width
   ============================================ */

@media (max-width: 575.98px) {
    .d-flex.justify-content-end.gap-2 .dx-button[b-p7jozulu8l],
    .d-flex.justify-content-end.gap-2[b-p7jozulu8l]  .dxbl-btn {
        min-width: 0;
        flex: 1;
    }

    .grid-edit-actions[b-p7jozulu8l] {
        flex-wrap: wrap;
    }

    .grid-edit-btn[b-p7jozulu8l],
    .dxbl-btn.grid-edit-btn[b-p7jozulu8l] {
        min-width: 90px !important;
        flex: 1 !important;
    }
}
/* /Components/Shared/EmptyState.razor.rz.scp.css */
/* Empty State Component - Consistent empty/no-data display */

.empty-state[b-xbdqwn2mod] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 2rem;
    text-align: center;
}

.empty-state-icon[b-xbdqwn2mod] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.25) 0%, rgba(100, 116, 139, 0.1) 100%);
    color: rgba(148, 163, 184, 0.6);
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

/* Variant: Success (green) */
.empty-state-icon--success[b-xbdqwn2mod] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(16, 185, 129, 0.1) 100%);
    color: rgba(52, 211, 153, 0.8);
}

/* Variant: Warning (orange/yellow) */
.empty-state-icon--warning[b-xbdqwn2mod] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0.1) 100%);
    color: rgba(251, 191, 36, 0.8);
}

/* Variant: Info (blue) */
.empty-state-icon--info[b-xbdqwn2mod] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(59, 130, 246, 0.1) 100%);
    color: rgba(96, 165, 250, 0.8);
}

.empty-state-icon .oi[b-xbdqwn2mod],
.empty-state-icon span[b-xbdqwn2mod] {
    font-size: inherit;
}

.empty-state-title[b-xbdqwn2mod] {
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

.empty-state-message[b-xbdqwn2mod] {
    color: rgba(148, 163, 184, 0.7);
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    margin: 0;
    max-width: 320px;
    line-height: 1.5;
}

.empty-state-content[b-xbdqwn2mod] {
    margin-top: 0.5rem;
}
/* /Components/Shared/FilterChip.razor.rz.scp.css */
.filter-chip[b-3i4ysm2a46] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.4rem 0.3rem 0.75rem;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 20px;
    font-size: 0.8rem;
    color: #e2e8f0;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.filter-chip:hover[b-3i4ysm2a46] {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.5);
}

.filter-chip-label[b-3i4ysm2a46] {
    color: rgba(148, 163, 184, 0.9);
    font-weight: 500;
}

.filter-chip-value[b-3i4ysm2a46] {
    font-weight: 600;
    color: #f1f5f9;
}

.filter-chip-remove[b-3i4ysm2a46] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: 0.15rem;
    background: rgba(239, 68, 68, 0.2);
    border: none;
    border-radius: 50%;
    color: rgba(248, 113, 113, 0.9);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.65rem;
}

.filter-chip-remove:hover[b-3i4ysm2a46] {
    background: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    transform: scale(1.1);
}
/* /Components/Shared/Filters/TransactionFilterToolbar.razor.rz.scp.css */
/* ============================================
   TRANSACTION FILTER TOOLBAR
   Modern glassmorphic filter bar with badge-style selectors
   ============================================ */

.filter-toolbar[b-lgflye88i6] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg,
        rgba(30, 41, 59, 0.7) 0%,
        rgba(15, 23, 42, 0.6) 100%);
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 12px;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

/* ============================================
   MAIN FILTER ROW
   ============================================ */

.filter-main-row[b-lgflye88i6] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.filter-section[b-lgflye88i6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ============================================
   TRANSACTION TYPE SELECTOR (Dropdown with Badge)
   ============================================ */

.type-section[b-lgflye88i6] {
    flex: 0 0 auto;
}

[b-lgflye88i6] .type-dropdown {
    min-width: 120px;
    max-width: 140px;
}

[b-lgflye88i6] .type-dropdown .dxbl-input-editor {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: 8px;
    padding: 0.15rem 0.25rem;
}

[b-lgflye88i6] .type-dropdown .dxbl-input-editor:hover {
    border-color: rgba(59, 130, 246, 0.4);
}

[b-lgflye88i6] .type-dropdown .dxbl-input-editor:focus-within {
    border-color: rgba(59, 130, 246, 0.6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Badge base styles - matching AuthorizationStatusBadge */
.type-badge[b-lgflye88i6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.type-badge-selected[b-lgflye88i6] {
    padding: 0.25rem 0.5rem;
}

/* All Types Badge (Slate/Gray) */
.type-badge.badge-all[b-lgflye88i6] {
    background: linear-gradient(135deg,
        rgba(100, 116, 139, 0.85) 0%,
        rgba(71, 85, 105, 0.80) 100%);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(100, 116, 139, 0.25);
}

/* Payment Badge (Green) */
.type-badge.badge-payment[b-lgflye88i6] {
    background: linear-gradient(135deg,
        rgba(16, 185, 129, 0.85) 0%,
        rgba(5, 150, 105, 0.80) 100%);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}

/* DriveOff Badge (Red) */
.type-badge.badge-driveoff[b-lgflye88i6] {
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.85) 0%,
        rgba(220, 38, 38, 0.80) 100%);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.25);
}

/* ============================================
   DATE SECTION
   ============================================ */

.date-section[b-lgflye88i6] {
    flex: 0 1 auto;
    gap: 0.75rem;
}

/* Period Preset Buttons */
.period-presets[b-lgflye88i6] {
    display: flex;
    gap: 0.25rem;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 8px;
    padding: 0.2rem;
}

.period-btn[b-lgflye88i6] {
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.85);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 32px;
}

.period-btn:hover[b-lgflye88i6] {
    background: rgba(59, 130, 246, 0.15);
    color: rgba(147, 197, 253, 0.95);
}

.period-btn.active[b-lgflye88i6] {
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 0.8) 0%,
        rgba(37, 99, 235, 0.75) 100%);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25);
}

/* Date Pickers Container */
.date-pickers[b-lgflye88i6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-separator[b-lgflye88i6] {
    color: rgba(148, 163, 184, 0.7);
    font-weight: 500;
}

[b-lgflye88i6] .date-picker {
    min-width: 155px;
    max-width: 175px;
}

[b-lgflye88i6] .date-picker .dxbl-input-editor {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: 8px;
}

[b-lgflye88i6] .date-picker .dxbl-input-editor:hover {
    border-color: rgba(59, 130, 246, 0.4);
}

[b-lgflye88i6] .date-picker .dxbl-input-editor:focus-within {
    border-color: rgba(59, 130, 246, 0.6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* ============================================
   LOCATION SECTION
   ============================================ */

.location-section[b-lgflye88i6] {
    flex: 0 1 auto;
}

[b-lgflye88i6] .location-select {
    min-width: 180px;
    max-width: 220px;
}

[b-lgflye88i6] .location-select .dxbl-input-editor {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: 8px;
}

/* ============================================
   LICENSE PLATE SECTION
   ============================================ */

.plate-section[b-lgflye88i6] {
    flex: 0 1 auto;
}

.license-plate-filter[b-lgflye88i6] {
    display: flex;
    gap: 0.4rem;
    align-items: stretch;
}

[b-lgflye88i6] .country-select {
    flex: 0 0 95px;
    min-width: 95px;
}

[b-lgflye88i6] .country-select .dxbl-input-editor {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: 8px;
}

.country-item[b-lgflye88i6] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.country-flag[b-lgflye88i6] {
    width: 18px;
    height: auto;
}

[b-lgflye88i6] .plate-input {
    flex: 1;
    min-width: 140px;
    max-width: 180px;
}

/* ============================================
   ACTION BUTTONS
   ============================================ */

.actions-section[b-lgflye88i6] {
    flex: 0 0 auto;
    margin-left: auto;
    gap: 0.5rem;
}

[b-lgflye88i6] .action-btn {
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.15s ease;
}

[b-lgflye88i6] .apply-btn {
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 0.9) 0%,
        rgba(37, 99, 235, 0.85) 100%);
    border: none;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

[b-lgflye88i6] .apply-btn:hover {
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 1) 0%,
        rgba(37, 99, 235, 0.95) 100%);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
    transform: translateY(-1px);
}

[b-lgflye88i6] .reset-btn {
    background: transparent;
    border: 1px solid rgba(100, 116, 139, 0.4);
    color: rgba(148, 163, 184, 0.9);
}

[b-lgflye88i6] .reset-btn:hover {
    border-color: rgba(148, 163, 184, 0.6);
    background: rgba(100, 116, 139, 0.15);
    color: #e2e8f0;
}

/* ============================================
   FILTER CHIPS ROW
   ============================================ */

.filter-chips-row[b-lgflye88i6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(100, 116, 139, 0.15);
}

.clear-all-btn[b-lgflye88i6] {
    padding: 0.3rem 0.75rem;
    background: transparent;
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: 16px;
    color: rgba(148, 163, 184, 0.8);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.clear-all-btn:hover[b-lgflye88i6] {
    border-color: rgba(239, 68, 68, 0.5);
    color: rgba(248, 113, 113, 0.9);
    background: rgba(239, 68, 68, 0.1);
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */

@media (max-width: 1200px) {
    .filter-main-row[b-lgflye88i6] {
        gap: 0.75rem;
    }

    [b-lgflye88i6] .date-picker {
        min-width: 140px;
        max-width: 160px;
    }

    [b-lgflye88i6] .location-select {
        min-width: 160px;
    }
}

@media (max-width: 992px) {
    .filter-toolbar[b-lgflye88i6] {
        padding: 0.875rem 1rem;
    }

    .filter-main-row[b-lgflye88i6] {
        flex-wrap: wrap;
    }

    .date-section[b-lgflye88i6] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .period-presets[b-lgflye88i6] {
        width: 100%;
        justify-content: flex-start;
    }

    .date-pickers[b-lgflye88i6] {
        width: 100%;
    }

    [b-lgflye88i6] .date-picker {
        flex: 1;
        max-width: none;
    }

    .actions-section[b-lgflye88i6] {
        width: 100%;
        justify-content: flex-end;
        margin-left: 0;
        margin-top: 0.5rem;
    }
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */

.filter-toolbar.mobile[b-lgflye88i6] {
    padding: 0.75rem;
    border-radius: 10px;
}

.filter-toolbar.mobile .filter-main-row[b-lgflye88i6] {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
}

.filter-toolbar.mobile .filter-section[b-lgflye88i6] {
    width: 100%;
}

.filter-toolbar.mobile .type-section[b-lgflye88i6] {
    justify-content: flex-start;
}

.filter-toolbar.mobile[b-lgflye88i6]  .type-dropdown {
    width: 100%;
    max-width: none;
}

.filter-toolbar.mobile .date-section[b-lgflye88i6] {
    flex-direction: column;
    gap: 0.5rem;
}

.filter-toolbar.mobile .period-presets[b-lgflye88i6] {
    width: 100%;
    justify-content: space-between;
}

.filter-toolbar.mobile .period-btn[b-lgflye88i6] {
    flex: 1;
    text-align: center;
}

.filter-toolbar.mobile .date-pickers[b-lgflye88i6] {
    width: 100%;
}

.filter-toolbar.mobile[b-lgflye88i6]  .date-picker {
    flex: 1;
    max-width: none;
    min-width: 0;
}

.filter-toolbar.mobile .location-section[b-lgflye88i6] {
    width: 100%;
}

.filter-toolbar.mobile[b-lgflye88i6]  .location-select {
    width: 100%;
    max-width: none;
}

.filter-toolbar.mobile .license-plate-filter[b-lgflye88i6] {
    width: 100%;
}

.filter-toolbar.mobile[b-lgflye88i6]  .plate-input {
    flex: 1;
    max-width: none;
}

.filter-toolbar.mobile .actions-section[b-lgflye88i6] {
    flex-direction: row;
    gap: 0.5rem;
}

.filter-toolbar.mobile[b-lgflye88i6]  .action-btn {
    flex: 1;
}

@media (max-width: 480px) {
    .filter-toolbar[b-lgflye88i6] {
        padding: 0.625rem;
        border-radius: 8px;
    }

    .period-btn[b-lgflye88i6] {
        padding: 0.3rem 0.4rem;
        font-size: 0.7rem;
    }

    .filter-chips-row[b-lgflye88i6] {
        gap: 0.35rem;
    }
}

/* Touch-target uplift: segmented period buttons get a real 44px tap height
   on phones (they sit in their own full-width row, so there is room) */
@media (max-width: 575.98px) {
    .period-btn[b-lgflye88i6] {
        min-height: 44px;
    }
}
/* /Components/Shared/GridEditButton.razor.rz.scp.css */
.edit-button[b-bdvyt8zjl2] {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 1.2rem;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.65), rgba(14, 165, 233, 0.35));
    border: 1px solid rgba(191, 219, 254, 0.32);
    color: #f8fafc;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.02em;
    line-height: 1;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 2.25rem;
    min-width: 2.25rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 16px 34px rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.edit-button[b-bdvyt8zjl2]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 13px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.18) 0%, rgba(191, 219, 254, 0.08) 50%, rgba(59, 130, 246, 0.15) 100%);
    pointer-events: none;
    z-index: 0;
}

.edit-button .text[b-bdvyt8zjl2] {
    z-index: 1;
    white-space: nowrap;
}

.icon-container[b-bdvyt8zjl2] {
    position: relative;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 12px;
    background: linear-gradient(150deg, rgba(59, 130, 246, 0.75), rgba(14, 165, 233, 0.5));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 14px 24px rgba(15, 23, 42, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
    transition: transform 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}

.icon-default[b-bdvyt8zjl2],
.icon-hover[b-bdvyt8zjl2] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: #f8fafc;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.icon-default[b-bdvyt8zjl2] {
    opacity: 1;
}

.icon-hover[b-bdvyt8zjl2] {
    opacity: 0;
    transform: translateY(2px) scale(0.95);
}

.edit-button .shine[b-bdvyt8zjl2] {
    position: absolute;
    inset: -10%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 40%, rgba(255, 255, 255, 0) 70%);
    transform: translateX(-130%) skewX(-18deg);
    transition: transform 0.6s ease;
    pointer-events: none;
    z-index: 0;
}

.edit-button:hover[b-bdvyt8zjl2] {
    background: linear-gradient(145deg, rgba(96, 165, 250, 0.75), rgba(14, 165, 233, 0.55));
    border-color: rgba(191, 219, 254, 0.55);
    box-shadow: 0 22px 48px rgba(37, 99, 235, 0.38);
    transform: translateY(-2px);
}

.edit-button:hover[b-bdvyt8zjl2]::before {
    opacity: 1;
}

.edit-button:hover .shine[b-bdvyt8zjl2] {
    transform: translateX(130%) skewX(-18deg);
}

.edit-button:hover .icon-default[b-bdvyt8zjl2] {
    opacity: 0;
    transform: translateY(-2px) scale(0.9);
}

.edit-button:hover .icon-hover[b-bdvyt8zjl2] {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.edit-button:hover .icon-container[b-bdvyt8zjl2] {
    transform: translateY(-1px) scale(1.05);
    background: linear-gradient(150deg, rgba(191, 219, 254, 0.9), rgba(59, 130, 246, 0.6));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 18px 32px rgba(37, 99, 235, 0.35);
}

.edit-button:active[b-bdvyt8zjl2] {
    transform: translateY(0);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.4);
}

.edit-button:focus-visible[b-bdvyt8zjl2] {
    outline: none;
    box-shadow: 0 0 0 4px rgba(191, 219, 254, 0.4);
}

@media (max-width: 768px) {
    .edit-button[b-bdvyt8zjl2] {
        padding: 0.45rem 1rem;
        border-radius: 12px;
        min-height: 2.05rem;
    }

    .icon-container[b-bdvyt8zjl2] {
        width: 1.4rem;
        height: 1.4rem;
    }
}
/* /Components/Shared/Header.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Header Bar - Clean, flat design matching mockup
   No container background - elements sit directly on page
   ═══════════════════════════════════════════════════════════════════════════ */
.header-bar[b-xtos6rb4f0] {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Search Wrapper - Takes available space
   ═══════════════════════════════════════════════════════════════════════════ */
.header-search-wrapper[b-xtos6rb4f0] {
    flex: 1;
    max-width: 500px;
    min-width: 200px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Header Actions - Icon buttons on the right
   ═══════════════════════════════════════════════════════════════════════════ */
.header-actions[b-xtos6rb4f0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.action-item[b-xtos6rb4f0] {
    position: relative;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Icon Buttons - Glassy square buttons with rounded corners
   ═══════════════════════════════════════════════════════════════════════════ */
.header-icon-btn[b-xtos6rb4f0] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(51, 65, 85, 0.4));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: rgba(226, 232, 240, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.header-icon-btn:hover[b-xtos6rb4f0] {
    background: linear-gradient(145deg, rgba(51, 65, 85, 0.7), rgba(71, 85, 105, 0.5));
    border-color: rgba(148, 163, 184, 0.35);
    color: rgba(248, 250, 252, 0.95);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.header-icon-btn:active[b-xtos6rb4f0] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.header-icon-btn.has-notifications[b-xtos6rb4f0] {
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.header-icon-btn.has-notifications:hover[b-xtos6rb4f0] {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* SVG Icons */
.action-icon[b-xtos6rb4f0] {
    width: 22px;
    height: 22px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Notification Badge - Red pill with count
   ═══════════════════════════════════════════════════════════════════════════ */
.notification-badge[b-xtos6rb4f0] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    border: 2px solid rgba(15, 23, 42, 0.8);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4),
                0 0 0 2px rgba(239, 68, 68, 0.15);
    animation: badge-pulse-b-xtos6rb4f0 2s ease-in-out infinite;
}

@keyframes badge-pulse-b-xtos6rb4f0 {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4),
                    0 0 0 2px rgba(239, 68, 68, 0.15);
    }
    50% {
        box-shadow: 0 4px 16px rgba(239, 68, 68, 0.5),
                    0 0 0 4px rgba(239, 68, 68, 0.1);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mobile Hamburger Button
   ═══════════════════════════════════════════════════════════════════════════ */
.mobile-hamburger[b-xtos6rb4f0] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(51, 65, 85, 0.4));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: rgba(226, 232, 240, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.mobile-hamburger:hover[b-xtos6rb4f0] {
    background: linear-gradient(145deg, rgba(51, 65, 85, 0.7), rgba(71, 85, 105, 0.5));
    border-color: rgba(148, 163, 184, 0.35);
    color: rgba(248, 250, 252, 0.95);
}

.mobile-hamburger:active[b-xtos6rb4f0] {
    transform: scale(0.95);
}

.mobile-hamburger .hamburger-icon[b-xtos6rb4f0] {
    width: 22px;
    height: 22px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tablet Responsive (768px - 992px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    .header-bar[b-xtos6rb4f0] {
        gap: 0.75rem;
    }

    .header-search-wrapper[b-xtos6rb4f0] {
        flex: 1;
        max-width: none;
        min-width: 180px;
    }

    .header-actions[b-xtos6rb4f0] {
        gap: 0.4rem;
    }

    .header-icon-btn[b-xtos6rb4f0] {
        width: 46px;
        height: 46px;
    }

    .action-icon[b-xtos6rb4f0] {
        width: 20px;
        height: 20px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mobile Responsive (max 768px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .header-bar[b-xtos6rb4f0] {
        gap: 0.5rem;
    }

    .header-search-wrapper[b-xtos6rb4f0] {
        flex: 1;
        min-width: 140px;
    }

    .header-actions[b-xtos6rb4f0] {
        gap: 0.35rem;
    }

    /* Touch-friendly 44px minimum */
    .header-icon-btn[b-xtos6rb4f0] {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        border-radius: 10px;
    }

    .mobile-hamburger[b-xtos6rb4f0] {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 10px;
    }

    .action-icon[b-xtos6rb4f0],
    .hamburger-icon[b-xtos6rb4f0] {
        width: 20px;
        height: 20px;
    }

    .notification-badge[b-xtos6rb4f0] {
        min-width: 18px;
        height: 18px;
        font-size: 0.65rem;
        padding: 0 5px;
        top: -3px;
        right: -3px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Extra Small Mobile (max 480px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .header-bar[b-xtos6rb4f0] {
        gap: 0.4rem;
    }

    .header-search-wrapper[b-xtos6rb4f0] {
        min-width: 120px;
    }

    .header-actions[b-xtos6rb4f0] {
        gap: 0.25rem;
    }

    /* Maintain touch targets */
    .header-icon-btn[b-xtos6rb4f0],
    .mobile-hamburger[b-xtos6rb4f0] {
        width: 44px;
        height: 44px;
    }

    .action-icon[b-xtos6rb4f0],
    .hamburger-icon[b-xtos6rb4f0] {
        width: 18px;
        height: 18px;
    }
}
/* /Components/Shared/HeaderSearchBar.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Search Bar - Clean glassy style matching header buttons
   ═══════════════════════════════════════════════════════════════════════════ */
.header-search[b-bcgswfqxe5] {
    position: relative;
    width: 100%;
}

.header-search-shell[b-bcgswfqxe5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.25rem 0.25rem 0.25rem 0;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(51, 65, 85, 0.4));
    border: 1px solid rgba(148, 163, 184, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.25s ease;
}

.header-search-shell:hover[b-bcgswfqxe5] {
    border-color: rgba(148, 163, 184, 0.3);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.header-search-shell:focus-within[b-bcgswfqxe5] {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2),
                0 0 0 3px rgba(59, 130, 246, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.header-search-shell.invalid[b-bcgswfqxe5] {
    border-color: rgba(251, 191, 36, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15),
                0 0 0 2px rgba(251, 191, 36, 0.2);
}

.header-search-shell.searching[b-bcgswfqxe5] {
    cursor: progress;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Search Input
   ═══════════════════════════════════════════════════════════════════════════ */
.header-search-input[b-bcgswfqxe5] {
    flex: 1;
    height: 44px;
    border: none;
    background: transparent;
    color: rgba(226, 232, 240, 0.95);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 0 0.75rem 0 1rem;
    outline: none;
}

.header-search-input[b-bcgswfqxe5]::placeholder {
    color: rgba(148, 163, 184, 0.6);
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Search Button - Matches header icon buttons
   ═══════════════════════════════════════════════════════════════════════════ */
.header-search-button[b-bcgswfqxe5] {
    position: relative;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.15);
    background: linear-gradient(145deg, rgba(51, 65, 85, 0.5), rgba(71, 85, 105, 0.3));
    color: rgba(226, 232, 240, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Narrow headers shrink the visual button below 44px — keep the effective
   touch target at 44px via an invisible expanded hit area */
.header-search-button[b-bcgswfqxe5]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max(100%, 44px);
    height: max(100%, 44px);
}

.header-search-button:hover:not(:disabled)[b-bcgswfqxe5] {
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.25));
    border-color: rgba(59, 130, 246, 0.4);
    color: rgba(248, 250, 252, 0.95);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.header-search-button:active:not(:disabled)[b-bcgswfqxe5] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.header-search-button:disabled[b-bcgswfqxe5] {
    opacity: 0.35;
    cursor: not-allowed;
    background: linear-gradient(145deg, rgba(51, 65, 85, 0.3), rgba(71, 85, 105, 0.2));
}

/* SVG Search Icon */
.search-icon[b-bcgswfqxe5] {
    width: 20px;
    height: 20px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Validation Message
   ═══════════════════════════════════════════════════════════════════════════ */
.header-search-validation[b-bcgswfqxe5] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(51, 65, 85, 0.9));
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 10px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    font-size: 0.8rem;
    color: rgba(251, 191, 36, 0.9);
    animation: validation-slide-in-b-bcgswfqxe5 0.2s ease;
    z-index: 10;
}

.header-search-validation .oi[b-bcgswfqxe5] {
    font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Omnibox Dropdown
   ═══════════════════════════════════════════════════════════════════════════ */
.omni-dropdown[b-bcgswfqxe5] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 420px;
    overflow-y: auto;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.97), rgba(51, 65, 85, 0.95));
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    z-index: 100;
    padding: 0.35rem 0;
    animation: validation-slide-in-b-bcgswfqxe5 0.15s ease;
}

.omni-category-header[b-bcgswfqxe5] {
    padding: 0.45rem 0.85rem 0.25rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(148, 163, 184, 0.6);
}

.omni-result-item[b-bcgswfqxe5] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.85rem;
    cursor: pointer;
    transition: background 0.12s ease;
}

.omni-result-item:hover[b-bcgswfqxe5],
.omni-result-item.selected[b-bcgswfqxe5] {
    background: rgba(59, 130, 246, 0.12);
}

.omni-result-item.selected[b-bcgswfqxe5] {
    background: rgba(59, 130, 246, 0.18);
}

.omni-icon[b-bcgswfqxe5] {
    font-size: 0.85rem;
    color: rgba(148, 163, 184, 0.7);
    min-width: 18px;
    text-align: center;
}

.omni-result-text[b-bcgswfqxe5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.omni-primary[b-bcgswfqxe5] {
    font-size: 0.88rem;
    font-weight: 500;
    color: rgba(226, 232, 240, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.omni-subtitle[b-bcgswfqxe5] {
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.omni-plate-action[b-bcgswfqxe5] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.85rem;
    margin-top: 0.2rem;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    cursor: pointer;
    font-size: 0.85rem;
    color: rgba(96, 165, 250, 0.9);
    transition: background 0.12s ease;
}

.omni-plate-action:hover[b-bcgswfqxe5],
.omni-plate-action.selected[b-bcgswfqxe5] {
    background: rgba(59, 130, 246, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Animations
   ═══════════════════════════════════════════════════════════════════════════ */
.spinning[b-bcgswfqxe5] {
    animation: spin-b-bcgswfqxe5 1s linear infinite;
}

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

@keyframes validation-slide-in-b-bcgswfqxe5 {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tablet Responsive
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    .header-search-shell[b-bcgswfqxe5] {
        padding: 0.2rem 0.2rem 0.2rem 0;
    }

    .header-search-input[b-bcgswfqxe5] {
        height: 42px;
        font-size: 0.95rem;
        padding: 0 0.6rem 0 0.9rem;
    }

    .header-search-button[b-bcgswfqxe5] {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }

    .search-icon[b-bcgswfqxe5] {
        width: 18px;
        height: 18px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mobile Responsive
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .header-search-shell[b-bcgswfqxe5] {
        border-radius: 12px;
    }

    .header-search-input[b-bcgswfqxe5] {
        height: 40px;
        font-size: 0.9rem;
        padding: 0 0.5rem 0 0.75rem;
    }

    .header-search-button[b-bcgswfqxe5] {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 10px;
    }

    .search-icon[b-bcgswfqxe5] {
        width: 18px;
        height: 18px;
    }

    .header-search-validation[b-bcgswfqxe5] {
        font-size: 0.75rem;
        padding: 0.4rem 0.6rem;
    }

    .omni-dropdown[b-bcgswfqxe5] {
        max-height: 320px;
        border-radius: 10px;
    }

    .omni-primary[b-bcgswfqxe5] {
        font-size: 0.82rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Extra Small Mobile
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .header-search-input[b-bcgswfqxe5] {
        height: 38px;
        font-size: 0.85rem;
        padding: 0 0.4rem 0 0.6rem;
    }

    .header-search-button[b-bcgswfqxe5] {
        width: 38px;
        height: 38px;
        min-width: 38px;
    }

    .search-icon[b-bcgswfqxe5] {
        width: 16px;
        height: 16px;
    }
}
/* /Components/Shared/ImageLightbox.razor.rz.scp.css */
.image-lightbox[b-tfykp07t28] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: lightbox-fade-in-b-tfykp07t28 0.2s ease-out;
}

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

.lightbox-content[b-tfykp07t28] {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
    animation: lightbox-scale-in-b-tfykp07t28 0.25s ease-out;
}

@keyframes lightbox-scale-in-b-tfykp07t28 {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.lightbox-content img[b-tfykp07t28] {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
}

.lightbox-close[b-tfykp07t28] {
    position: absolute;
    top: -50px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lightbox-close:hover[b-tfykp07t28] {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}
/* /Components/Shared/ImportCountryFilter.razor.rz.scp.css */
.country-filter-bar[b-7gcqvtc8rz] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.country-filter-label[b-7gcqvtc8rz] {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.country-pills[b-7gcqvtc8rz] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.country-pill[b-7gcqvtc8rz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1.5px solid transparent;
    line-height: 1.3;
}

.country-pill:hover[b-7gcqvtc8rz] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.country-pill-included[b-7gcqvtc8rz] {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.4);
    color: #86efac;
}

.country-pill-included:hover[b-7gcqvtc8rz] {
    background: rgba(34, 197, 94, 0.25);
}

.country-pill-excluded[b-7gcqvtc8rz] {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: rgba(252, 165, 165, 0.7);
    text-decoration: line-through;
    text-decoration-color: rgba(239, 68, 68, 0.5);
}

.country-pill-excluded:hover[b-7gcqvtc8rz] {
    background: rgba(239, 68, 68, 0.2);
}

.country-flag[b-7gcqvtc8rz] {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
}

.flag-excluded[b-7gcqvtc8rz] {
    filter: grayscale(0.8);
    opacity: 0.5;
}

.country-code[b-7gcqvtc8rz] {
    letter-spacing: 0.03em;
}

.country-count[b-7gcqvtc8rz] {
    font-size: 0.75rem;
    opacity: 0.7;
    font-weight: 400;
}

.country-x[b-7gcqvtc8rz] {
    font-size: 0.7rem;
    opacity: 0.6;
    margin-left: -2px;
}
/* /Components/Shared/LicensePlateDisplay.razor.rz.scp.css */
/* Modern Glassmorphic License Plate Display - Larger Format for Forms and Details */

.license-plate[b-4zf9o321a0] {
    position: relative;
    display: inline-flex;
    align-items: stretch;

    /* Modern glassmorphic background - bright white with glass effect */
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(248, 250, 252, 0.92) 100%);

    /* Subtle border with depth */
    border: 2.5px solid rgba(30, 41, 59, 0.8);
    border-radius: 8px;
    overflow: hidden;

    /* Typography - clean and readable */
    font-family: 'Segoe UI', 'Roboto', sans-serif;
    font-size: 1.4rem;
    color: #1e293b;
    font-weight: 700;

    /* Flexible width for larger display */
    min-width: 240px;
    height: 50px;

    /* Modern glass effects */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    /* Enhanced depth and shadow system for larger display */
    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.6),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1);

    /* Smooth transitions */
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* EU Band - Modern EU Flag Blue with Glass Effect */
.euro-band[b-4zf9o321a0] {
    position: relative;

    /* EU flag blue with glass gradient */
    background: linear-gradient(135deg,
        rgba(0, 51, 153, 0.95) 0%,
        rgba(0, 41, 122, 0.98) 100%);

    color: #ffffff;
    width: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    /* Subtle inner glow */
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2);

    transition: all 0.3s ease;
}

/* Country Code - Bold and Clear */
.country-code[b-4zf9o321a0] {
    font-weight: 700;
    font-size: 1.05rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Plate Number - Large and Readable */
.plate-number[b-4zf9o321a0] {
    flex-grow: 1;
    color: #0f172a;
    font-weight: 700;
    letter-spacing: 2.5px;
    padding: 0 16px;

    /* Monospace for authentic license plate feel */
    font-family: 'Consolas', 'Monaco', 'Roboto Mono', monospace;
    font-size: 1.35rem;

    display: flex;
    align-items: center;
    justify-content: center;

    /* Subtle text shadow for depth */
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}

/* Details Button - Modern Glass Style */
.details-btn[b-4zf9o321a0] {
    position: relative;
    height: 100%;
    border: none;
    border-left: 2px solid rgba(30, 41, 59, 0.6);

    /* Modern blue glass gradient */
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 0.9) 0%,
        rgba(37, 99, 235, 0.95) 100%);

    color: #ffffff;
    font-size: 1.1rem;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 14px;
    cursor: pointer;

    /* Glass effects */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    /* Subtle shadow */
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.25);

    transition: all 0.3s ease;
}

.details-btn:hover[b-4zf9o321a0] {
    /* Brighter blue on hover */
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 1) 0%,
        rgba(37, 99, 235, 1) 100%);

    /* Enhanced glow */
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.3),
        inset 0 0 12px rgba(147, 197, 253, 0.4);
}

.details-btn:active[b-4zf9o321a0] {
    background: linear-gradient(135deg,
        rgba(37, 99, 235, 1) 0%,
        rgba(29, 78, 216, 1) 100%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.details-btn i[b-4zf9o321a0] {
    font-size: 1rem;
}

/* === SIZE VARIANTS === */

/* Small size - for compact cards and grids */
.license-plate.plate-small[b-4zf9o321a0] {
    min-width: 140px;
    height: 32px;
    font-size: 0.85rem;
    border-width: 2px;
    border-radius: 5px;
}

.license-plate.plate-small .euro-band[b-4zf9o321a0] {
    width: 28px;
}

.license-plate.plate-small .country-code[b-4zf9o321a0] {
    font-size: 0.65rem;
}

.license-plate.plate-small .plate-number[b-4zf9o321a0] {
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    padding: 0 8px;
}

.license-plate.plate-small .details-btn[b-4zf9o321a0] {
    padding: 0 8px;
}

.license-plate.plate-small .details-btn i[b-4zf9o321a0] {
    font-size: 0.75rem;
}

/* Large size - for cards and prominent displays */
.license-plate.plate-large[b-4zf9o321a0] {
    min-width: 340px;
    height: 70px;
    font-size: 1.8rem;
    border: 3px solid rgba(30, 41, 59, 0.8);
}

.license-plate.plate-large .euro-band[b-4zf9o321a0] {
    width: 64px;
}

.license-plate.plate-large .country-code[b-4zf9o321a0] {
    font-size: 1.3rem;
}

.license-plate.plate-large .plate-number[b-4zf9o321a0] {
    font-size: 1.9rem;
    letter-spacing: 3.5px;
    padding: 0 24px;
}

.license-plate.plate-large .details-btn[b-4zf9o321a0] {
    padding: 0 18px;
}

.license-plate.plate-large .details-btn i[b-4zf9o321a0] {
    font-size: 1.4rem;
}

/* Extra large size - for hero displays */
.license-plate.plate-xlarge[b-4zf9o321a0] {
    min-width: 420px;
    height: 90px;
    font-size: 2.2rem;
    border: 4px solid rgba(30, 41, 59, 0.8);
}

.license-plate.plate-xlarge .euro-band[b-4zf9o321a0] {
    width: 80px;
}

.license-plate.plate-xlarge .country-code[b-4zf9o321a0] {
    font-size: 1.6rem;
}

.license-plate.plate-xlarge .plate-number[b-4zf9o321a0] {
    font-size: 2.4rem;
    letter-spacing: 4.5px;
    padding: 0 32px;
}

.license-plate.plate-xlarge .details-btn[b-4zf9o321a0] {
    padding: 0 24px;
}

.license-plate.plate-xlarge .details-btn i[b-4zf9o321a0] {
    font-size: 1.8rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .license-plate[b-4zf9o321a0] {
        height: 45px;
        min-width: 220px;
        font-size: 1.2rem;
    }

    .license-plate.plate-large[b-4zf9o321a0] {
        height: 60px;
        min-width: 280px;
    }

    .license-plate.plate-large .euro-band[b-4zf9o321a0] {
        width: 56px;
    }

    .license-plate.plate-large .country-code[b-4zf9o321a0] {
        font-size: 1.1rem;
    }

    .license-plate.plate-large .plate-number[b-4zf9o321a0] {
        font-size: 1.6rem;
        letter-spacing: 2.5px;
        padding: 0 18px;
    }

    .license-plate.plate-xlarge[b-4zf9o321a0] {
        height: 70px;
        min-width: 320px;
    }

    .license-plate.plate-xlarge .euro-band[b-4zf9o321a0] {
        width: 64px;
    }

    .license-plate.plate-xlarge .country-code[b-4zf9o321a0] {
        font-size: 1.3rem;
    }

    .license-plate.plate-xlarge .plate-number[b-4zf9o321a0] {
        font-size: 1.9rem;
        letter-spacing: 3px;
        padding: 0 22px;
    }

    .euro-band[b-4zf9o321a0] {
        width: 44px;
    }

    .country-code[b-4zf9o321a0] {
        font-size: 0.95rem;
    }

    .plate-number[b-4zf9o321a0] {
        font-size: 1.2rem;
        letter-spacing: 2px;
        padding: 0 12px;
    }

    .details-btn[b-4zf9o321a0] {
        padding: 0 12px;
    }

    .details-btn i[b-4zf9o321a0] {
        font-size: 0.95rem;
    }
}
/* /Components/Shared/LicensePlateGrid.razor.rz.scp.css */
/* Modern Glassmorphic License Plate - Still Recognizable as EU License Plate */

/* Remove default link styling */
.license-plate-link[b-556zl7d3go] {
    text-decoration: none;
    color: inherit;
    display: inline-block;
    cursor: pointer;
}

/* License Plate Container - Modern Glass with EU License Plate Feel */
.license-plate-grid[b-556zl7d3go] {
    position: relative;
    display: flex;
    align-items: center;

    /* Modern glassmorphic background - bright white with glass effect */
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(248, 250, 252, 0.92) 100%);

    /* Subtle border with depth */
    border: 2px solid rgba(30, 41, 59, 0.8);
    border-radius: 6px;
    overflow: hidden;

    /* Typography - clean and readable */
    font-family: 'Segoe UI', 'Roboto', sans-serif;
    font-size: 0.9rem;
    color: #1e293b;
    font-weight: 600;
    letter-spacing: 0.5px;

    /* Flexible width - adapts to plate length */
    min-width: 160px; /* Good for typical plates like WWL-71466 */
    max-width: fit-content;
    box-sizing: border-box;
    height: 32px;

    /* Modern glass effects */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    /* Depth and shadow system */
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.25),
        0 1px 2px rgba(0, 0, 0, 0.15),
        inset 0 1px 1px rgba(255, 255, 255, 0.6),
        inset 0 -1px 1px rgba(0, 0, 0, 0.1);

    /* Smooth transitions */
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Non-clickable state */
.license-plate-grid.non-clickable[b-556zl7d3go] {
    cursor: default;
}

/* Enhanced Modern Hover Effects */
.license-plate-link:hover .license-plate-grid[b-556zl7d3go] {
    /* Brighter glass on hover */
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(248, 250, 252, 0.98) 100%);

    /* Enhanced glow and lift */
    box-shadow:
        0 0 20px rgba(59, 130, 246, 0.4),
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.8),
        inset 0 -1px 1px rgba(0, 0, 0, 0.08);

    /* Subtle lift */
    transform: translateY(-1px) scale(1.03);

    /* Brighten border */
    border-color: rgba(59, 130, 246, 0.6);
}

/* Active/Press state */
.license-plate-link:active .license-plate-grid[b-556zl7d3go] {
    transform: translateY(0) scale(1);
    box-shadow:
        0 0 12px rgba(59, 130, 246, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.25),
        inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

/* Focus Styles for Accessibility */
.license-plate-link:focus[b-556zl7d3go] {
    outline: none;
}

.license-plate-link:focus .license-plate-grid[b-556zl7d3go] {
    outline: 2px solid rgba(59, 130, 246, 0.8);
    outline-offset: 2px;
    border-color: rgba(59, 130, 246, 0.8);
    box-shadow:
        0 0 0 3px rgba(59, 130, 246, 0.2),
        0 0 20px rgba(59, 130, 246, 0.4),
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.7);
}

/* Country Code - Modern EU Flag Blue with Glass Effect */
.country-code[b-556zl7d3go] {
    position: relative;

    /* EU flag blue with glass gradient */
    background: linear-gradient(135deg,
        rgba(0, 51, 153, 0.95) 0%,
        rgba(0, 41, 122, 0.98) 100%);

    color: #ffffff;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    padding: 0 10px;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 0.85rem;
    min-width: 42px;

    /* Separation border */
    border-right: 2px solid rgba(30, 41, 59, 0.8);

    /* Subtle inner glow */
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2);

    /* Smooth transition */
    transition: all 0.3s ease;
}

/* Country code hover effect */
.license-plate-link:hover .country-code[b-556zl7d3go] {
    background: linear-gradient(135deg,
        rgba(0, 51, 153, 1) 0%,
        rgba(0, 41, 122, 1) 100%);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.3),
        inset 0 0 8px rgba(59, 130, 246, 0.4);
}

/* Plate Number - Clean and Readable */
.plate-number[b-556zl7d3go] {
    flex-grow: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* Monospace for authentic license plate feel */
    font-family: 'Consolas', 'Monaco', 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 1.5px;

    color: #0f172a;
    padding: 0 10px;
    min-width: 100px; /* Ensures good spacing for plate number */

    /* Subtle text shadow for depth */
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);

    transition: color 0.3s ease;
}

/* Plate number hover effect */
.license-plate-link:hover .plate-number[b-556zl7d3go] {
    color: #1e293b;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 1);
}

/* Subtle shimmer effect on hover */
.license-plate-grid[b-556zl7d3go]::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 100%
    );
    transition: left 0.5s ease;
    pointer-events: none;
}

.license-plate-link:hover .license-plate-grid[b-556zl7d3go]::after {
    left: 100%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .license-plate-grid[b-556zl7d3go] {
        height: 30px;
        font-size: 0.85rem;
    }

    .country-code[b-556zl7d3go] {
        min-width: 38px;
        font-size: 0.8rem;
        padding: 0 8px;
    }

    .plate-number[b-556zl7d3go] {
        font-size: 0.88rem;
        letter-spacing: 1px;
        padding: 0 8px;
    }
}

/* ========================================
   Compact Mode - Mobile/Small Screens
   Shows thin blue EU stripe without country text
   Fixed width for unified, real license plate look
   ======================================== */
.license-plate-grid.compact[b-556zl7d3go] {
    width: 115px;        /* Fixed width for consistency */
    min-width: 115px;
    max-width: 115px;
    height: 28px;
}

.license-plate-grid.compact .country-code[b-556zl7d3go] {
    min-width: 12px;     /* Thin blue stripe only - visible but compact */
    width: 12px;         /* Fixed thin width */
    padding: 0;          /* No padding needed without text */
}

.license-plate-grid.compact .plate-number[b-556zl7d3go] {
    padding: 0 6px;
    min-width: 0;
    width: 100%;         /* Fill remaining space */
    font-size: 0.85rem;
    letter-spacing: 1px;
}
/* /Components/Shared/LicensePlateInput.razor.rz.scp.css */
.license-plate-container[b-y6td10ylw2] {
    display: inline-block;
    position: relative;
}

.license-plate[b-y6td10ylw2] {
    background-color: white;
    border: 2px solid #000;
    border-radius: 4px;
    padding: 0;
    font-family: 'Arial', sans-serif;
    font-size: 1.4rem;
    display: inline-flex;
    align-items: stretch;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
    min-width: 250px;
    height: 40px;
    position: relative; /* Added for clear button positioning */
}

    .license-plate.compact[b-y6td10ylw2] {
        min-width: 200px;
        height: 32px;
        font-size: 1rem;
    }

    .license-plate.disabled[b-y6td10ylw2] {
        opacity: 0.7;
        cursor: not-allowed;
    }

.euro-band[b-y6td10ylw2] {
    background-color: #003399;
    color: white;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.license-plate.compact .euro-band[b-y6td10ylw2] {
    width: 30px;
}

.country-code[b-y6td10ylw2] {
    font-weight: bold;
    font-size: 0.9rem;
    text-align: center;
}

.license-plate.compact .country-code[b-y6td10ylw2] {
    font-size: 0.8rem;
}

.plate-number[b-y6td10ylw2] {
    color: #000 !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
    padding: 0 32px 0 8px !important; /* Horizontal padding only, vertical centering via line-height */
    font-family: monospace !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    width: 100% !important;
    text-align: left !important;
    font-size: 1rem !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    -webkit-text-fill-color: #000 !important;
    caret-color: #000 !important;
}

.plate-number[b-y6td10ylw2]::placeholder {
    color: #666 !important;
    -webkit-text-fill-color: #666 !important;
    opacity: 1 !important;
}

.license-plate.compact .plate-number[b-y6td10ylw2] {
    padding: 0 28px 0 8px; /* Horizontal padding only */
    letter-spacing: 1px;
    display: flex;
    align-items: center;
}

.plate-number:focus[b-y6td10ylw2] {
    outline: none;
    background-color: rgba(0, 51, 153, 0.05);
}

.license-plate.disabled .plate-number[b-y6td10ylw2] {
    cursor: not-allowed;
    background-color: #f5f5f5;
}

/* New styles for clear button */
.clear-plate-btn[b-y6td10ylw2] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.2s;
    z-index: 1;
}

    .clear-plate-btn:hover[b-y6td10ylw2] {
        opacity: 1;
    }

    .clear-plate-btn .oi[b-y6td10ylw2] {
        font-size: 14px;
        color: #000;
    }

.license-plate.compact .clear-plate-btn[b-y6td10ylw2] {
    right: 6px;
}

    .license-plate.compact .clear-plate-btn .oi[b-y6td10ylw2] {
        font-size: 12px;
    }

/* Full-width mode */
.license-plate-container.full-width[b-y6td10ylw2] {
    display: block;
    width: 100%;
}

.license-plate-container.full-width .license-plate[b-y6td10ylw2] {
    width: 100%;
}
/* /Components/Shared/LicensePlateSaldoCard.razor.rz.scp.css */
/* === LICENSE PLATE + SALDO COMBINED CARD === */
/* Modern glassmorphic card with color-coded states */

.license-plate-saldo-card[b-3m4baf478z] {
    position: relative;
    width: 100%;
    border-radius: 24px;
    padding: 2rem 2.5rem;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
    box-shadow:
        0 12px 48px rgba(0, 0, 0, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.2),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.15);
}

.license-plate-saldo-card[b-3m4baf478z]::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.25),
        transparent
    );
    transition: left 0.8s ease;
    pointer-events: none;
}

.license-plate-saldo-card:hover[b-3m4baf478z]::before {
    left: 100%;
}

.license-plate-saldo-card:hover[b-3m4baf478z] {
    transform: translateY(-4px);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 2px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 0 rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.25),
        0 0 60px currentColor;
}

/* === CARD CONTENT LAYOUT === */
.card-content[b-3m4baf478z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    position: relative;
}

/* === LICENSE PLATE SECTION === */
.plate-section[b-3m4baf478z] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    position: relative;
    gap: 0.5rem;
}

.plate-row[b-3m4baf478z] {
    display: flex;
    align-items: center;
    position: relative;
}

/* === INTELLIGENCE LINK === */
.intelligence-link[b-3m4baf478z] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.3rem 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.03em;
}

.intelligence-link:hover[b-3m4baf478z] {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateX(2px);
}

.intelligence-link .oi[b-3m4baf478z] {
    font-size: 0.72rem;
}

/* === PLATE REPORT BUTTON === */
/* Circular eye icon button glued to top-right corner of license plate */
.plate-report-btn[b-3m4baf478z] {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;

    /* Modern blue glass gradient */
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 0.95) 0%,
        rgba(37, 99, 235, 1) 100%);

    color: #ffffff;
    font-size: 1.4rem;

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    /* Glass effects */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 8px 24px rgba(37, 99, 235, 0.5),
        inset 0 1px 2px rgba(255, 255, 255, 0.3),
        0 0 0 3px rgba(255, 255, 255, 0.9);

    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 10;
}

.plate-report-btn i[b-3m4baf478z] {
    font-size: 1.4rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.plate-report-btn:hover[b-3m4baf478z] {
    transform: scale(1.12) rotate(3deg);
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 1) 0%,
        rgba(37, 99, 235, 1) 100%);
    box-shadow:
        0 10px 28px rgba(37, 99, 235, 0.6),
        inset 0 1px 2px rgba(255, 255, 255, 0.4),
        0 0 0 4px rgba(255, 255, 255, 1),
        0 0 30px rgba(59, 130, 246, 0.5);
}

.plate-report-btn:active[b-3m4baf478z] {
    transform: scale(1.05);
    box-shadow:
        0 4px 16px rgba(37, 99, 235, 0.5),
        inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* === SALDO SECTION === */
.saldo-section[b-3m4baf478z] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
    justify-content: flex-end;
}

.saldo-icon[b-3m4baf478z] {
    font-size: 3.5rem;
    color: rgba(255, 255, 255, 0.95);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
    flex-shrink: 0;
}

.saldo-info[b-3m4baf478z] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.saldo-label[b-3m4baf478z] {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.saldo-amount[b-3m4baf478z] {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #ffffff;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    line-height: 1;
}

.saldo-subtitle[b-3m4baf478z] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    margin-top: 0.25rem;
}

/* === OTHER-NETWORKS STATUS STRIP === */
/* Full-width strip under the plate/saldo row; solid enough to read on ANY card state color */
.global-status-row[b-3m4baf478z] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding: 0.55rem 1rem;
    border-radius: 14px;
    font-size: 0.95rem;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 4px 14px rgba(0, 0, 0, 0.25);
    position: relative;
}

.global-status-row .oi[b-3m4baf478z] {
    font-size: 0.9rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.global-status-label[b-3m4baf478z] {
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.78rem;
    opacity: 0.92;
}

.global-status-value[b-3m4baf478z] {
    font-weight: 800;
    letter-spacing: 0.02em;
}

/* Red — unsettled incidents at other networks */
.global-status-unpaid[b-3m4baf478z] {
    background: linear-gradient(135deg,
        rgba(185, 28, 28, 0.96) 0%,
        rgba(153, 27, 27, 0.96) 100%);
    border: 1px solid rgba(254, 202, 202, 0.55);
}

/* Green — matches exist but everything is settled */
.global-status-paid[b-3m4baf478z] {
    background: linear-gradient(135deg,
        rgba(4, 120, 87, 0.96) 0%,
        rgba(6, 95, 70, 0.96) 100%);
    border: 1px solid rgba(167, 243, 208, 0.55);
}

/* === STATE COLORS === */

/* GREEN - PAID (All good) */
.saldo-state-paid[b-3m4baf478z] {
    background: linear-gradient(135deg,
        rgba(16, 185, 129, 0.90) 0%,
        rgba(5, 150, 105, 0.85) 30%,
        rgba(4, 120, 87, 0.90) 70%,
        rgba(6, 95, 70, 0.90) 100%);
    border: 1px solid rgba(167, 243, 208, 0.5);
    color: rgba(16, 185, 129, 0.5);
}

.saldo-state-paid:hover[b-3m4baf478z] {
    background: linear-gradient(135deg,
        rgba(16, 185, 129, 0.95) 0%,
        rgba(5, 150, 105, 0.92) 30%,
        rgba(4, 120, 87, 0.95) 70%,
        rgba(6, 95, 70, 0.95) 100%);
    border-color: rgba(167, 243, 208, 0.7);
}

/* YELLOW/AMBER - NEEDS AUTHORIZATION */
.saldo-state-authorize[b-3m4baf478z] {
    background: linear-gradient(135deg,
        rgba(245, 158, 11, 0.90) 0%,
        rgba(217, 119, 6, 0.85) 30%,
        rgba(180, 83, 9, 0.90) 70%,
        rgba(146, 64, 14, 0.90) 100%);
    border: 1px solid rgba(253, 230, 138, 0.5);
    color: rgba(245, 158, 11, 0.5);
}

.saldo-state-authorize:hover[b-3m4baf478z] {
    background: linear-gradient(135deg,
        rgba(245, 158, 11, 0.95) 0%,
        rgba(217, 119, 6, 0.92) 30%,
        rgba(180, 83, 9, 0.95) 70%,
        rgba(146, 64, 14, 0.95) 100%);
    border-color: rgba(253, 230, 138, 0.7);
}

/* RED - UNPAID */
.saldo-state-unpaid[b-3m4baf478z] {
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.90) 0%,
        rgba(220, 38, 38, 0.85) 30%,
        rgba(185, 28, 28, 0.90) 70%,
        rgba(153, 27, 27, 0.90) 100%);
    border: 1px solid rgba(254, 202, 202, 0.5);
    color: rgba(239, 68, 68, 0.5);
}

.saldo-state-unpaid:hover[b-3m4baf478z] {
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.95) 0%,
        rgba(220, 38, 38, 0.92) 30%,
        rgba(185, 28, 28, 0.95) 70%,
        rgba(153, 27, 27, 0.95) 100%);
    border-color: rgba(254, 202, 202, 0.7);
}

/* === RESPONSIVE ADJUSTMENTS === */
@media (max-width: 992px) {
    .license-plate-saldo-card[b-3m4baf478z] {
        padding: 1.75rem 2rem;
    }

    .card-content[b-3m4baf478z] {
        gap: 2rem;
    }

    .saldo-amount[b-3m4baf478z] {
        font-size: 2.25rem;
    }

    .saldo-icon[b-3m4baf478z] {
        font-size: 3rem;
    }
}

@media (max-width: 768px) {
    .license-plate-saldo-card[b-3m4baf478z] {
        padding: 1.5rem;
        border-radius: 20px;
    }

    .card-content[b-3m4baf478z] {
        flex-direction: column;
        gap: 1.5rem;
        align-items: stretch;
    }

    .plate-section[b-3m4baf478z] {
        align-items: center;
    }

    .saldo-section[b-3m4baf478z] {
        justify-content: center;
        gap: 1.25rem;
    }

    .saldo-info[b-3m4baf478z] {
        align-items: center;
    }

    .saldo-amount[b-3m4baf478z] {
        font-size: 2rem;
    }

    .saldo-icon[b-3m4baf478z] {
        font-size: 2.5rem;
    }

    .plate-report-btn[b-3m4baf478z] {
        width: 46px;
        height: 46px;
        top: -8px;
        right: -8px;
    }

    .plate-report-btn i[b-3m4baf478z] {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .license-plate-saldo-card[b-3m4baf478z] {
        padding: 1.25rem;
        border-radius: 18px;
    }

    .card-content[b-3m4baf478z] {
        gap: 1.25rem;
    }

    .saldo-amount[b-3m4baf478z] {
        font-size: 1.75rem;
    }

    .saldo-icon[b-3m4baf478z] {
        font-size: 2.25rem;
    }

    .saldo-label[b-3m4baf478z] {
        font-size: 0.75rem;
    }

    .saldo-subtitle[b-3m4baf478z] {
        font-size: 0.85rem;
    }

    .plate-report-btn[b-3m4baf478z] {
        width: 42px;
        height: 42px;
        top: -7px;
        right: -7px;
    }

    .plate-report-btn i[b-3m4baf478z] {
        font-size: 1.15rem;
    }
}
/* /Components/Shared/LiveFeedScopeBar.razor.rz.scp.css */
/* Compact filter/scope bar - same "modern glass" language as TransactionFilterToolbar, sized down to
   what a couple of controls plus a summary line actually need instead of a full bootstrap card. */

.live-feed-scope-bar[b-gq7bbljuf0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    padding: 0.65rem 1rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.6) 100%);
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 12px;
    backdrop-filter: blur(12px);
}

.live-feed-scope-controls[b-gq7bbljuf0] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.live-feed-scope-summary[b-gq7bbljuf0] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(226, 232, 240, 0.85);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-feed-scope-summary i[b-gq7bbljuf0] {
    color: rgba(147, 197, 253, 0.85);
    font-size: 0.8rem;
}

@media (max-width: 767.98px) {
    .live-feed-scope-bar[b-gq7bbljuf0] {
        flex-direction: column;
        align-items: stretch;
        padding: 0.75rem;
    }

    .live-feed-scope-controls[b-gq7bbljuf0] {
        width: 100%;
    }

    .live-feed-scope-summary[b-gq7bbljuf0] {
        white-space: normal;
    }
}
/* /Components/Shared/LivePlateFeed.razor.rz.scp.css */
/* Operator-console look for the Live Plate Feed, styled after the Android tablet "Info Screen" app.
   Deliberately uses its own literal palette (near-black backdrop, slate cards, green/red status)
   rather than the app-wide design tokens - this view is meant to read as a distinct "console",
   the way the tablet app does. */

.live-feed-root[b-cn6oxywjiv] {
    background: #1A1A1A;
    border-radius: 8px;
    padding: 14px;
    color: #ffffff;
}

/* ── status bar ─────────────────────────────────────────────────────────────────────────────── */

.live-feed-status-bar[b-cn6oxywjiv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 4px 4px 14px 4px;
    font-weight: 600;
}

.live-feed-status-chip[b-cn6oxywjiv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.live-feed-status-chip.is-active[b-cn6oxywjiv] {
    background: rgba(0, 255, 0, 0.12);
    color: #7CFC7C;
}

.live-feed-status-chip.is-error[b-cn6oxywjiv] {
    background: rgba(255, 0, 0, 0.14);
    color: #FF8A8A;
}

.live-feed-status-dot[b-cn6oxywjiv] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
}

.is-active .live-feed-status-dot[b-cn6oxywjiv] {
    animation: liveFeedDotPulse-b-cn6oxywjiv 2s ease-in-out infinite;
}

@keyframes liveFeedDotPulse-b-cn6oxywjiv {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.live-feed-status-note[b-cn6oxywjiv] {
    color: #FF8A8A;
    font-size: 0.8rem;
    font-weight: 500;
}

.live-feed-status-meta[b-cn6oxywjiv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.8rem;
    font-weight: 500;
}

/* "Follow live" - only rendered while pinned (see isPinned in LivePlateFeed.razor). Right-aligned in
   the status bar (margin-left:auto pushes it to the end of the flex row, after the "last N events"
   counter) rather than a corner of the focus card - it's the primary way back to live mode once
   pinned, so it gets the status bar's prominence and a slightly bigger, bolder pill than a plain meta
   chip. */
.live-feed-follow-live-pill[b-cn6oxywjiv] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(59, 130, 246, 0.9);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 7px 16px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.live-feed-follow-live-pill:hover[b-cn6oxywjiv] {
    background: rgba(37, 99, 235, 0.95);
}

.live-feed-follow-live-pill:active[b-cn6oxywjiv] {
    transform: scale(0.97);
}

/* ── two-pane layout ────────────────────────────────────────────────────────────────────────── */

.live-feed-panes[b-cn6oxywjiv] {
    display: flex;
    gap: 14px;
    align-items: stretch;
}

/* Only the list pane scrolls (deterministic scroll-stick, handled in JS - see
   wwwroot/js/live-plate-feed.js) - the focus pane holds exactly one non-scrolling card, sized to
   match via max-height/min-height so both panes still read as one unit. */
.live-feed-list-pane[b-cn6oxywjiv] {
    overflow-y: auto;
    overflow-anchor: none;
    max-height: 72vh;
    min-height: 420px;
    padding-right: 4px;
}

.live-feed-focus-pane[b-cn6oxywjiv] {
    max-height: 72vh;
    min-height: 420px;
}

/* List left, focus pane right (markup order below matches - see LivePlateFeed.razor). The list is a
   flex column of rows that must never be squashed by flexbox's default shrink-to-fit: every row below
   sets flex-shrink:0 for exactly that reason (see the comment on .live-feed-row - this was the actual
   cause of the list visually collapsing under a heavy fleet-wide event volume, not just something to
   guard against defensively). */
.live-feed-list-pane[b-cn6oxywjiv] {
    flex: 1 1 34%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 260px;
}

.live-feed-focus-pane[b-cn6oxywjiv] {
    flex: 0 0 66%;
    display: flex;
    flex-direction: column;
}

.live-feed-panes.compact-only .live-feed-list-pane[b-cn6oxywjiv] {
    flex: 1 1 100%;
    max-height: 76vh;
}

/* ── right pane: single focused-event card ──────────────────────────────────────────────────── */

/* Deliberately fills the pane (flex: 1 1 auto within a column that already has a height budget from
   .live-feed-focus-pane above) - kiosk-sized, not a card among many, since this is the only image the
   app will ever fetch for this pane (see the comment above the markup in LivePlateFeed.razor). */
.live-feed-focus-card[b-cn6oxywjiv] {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    background: #2C3E50;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.15s ease;
}

/* Border lights up only while pinned (see RowStateClass/FocusedEvent) - a quiet cue that this is no
   longer tracking the newest arrival. */
.live-feed-focus-card.is-selected[b-cn6oxywjiv] {
    border-color: rgba(148, 163, 184, 0.65);
    background: #34495E;
}

.live-feed-image-area[b-cn6oxywjiv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 220px;
    background: repeating-linear-gradient(135deg, #24313F 0px, #24313F 14px, #223040 14px, #223040 28px);
}

/* Focus-card variant grows to fill the card instead of the list-row's fixed 220px floor. */
.live-feed-focus-image-area[b-cn6oxywjiv] {
    flex: 1 1 auto;
    min-height: 320px;
    gap: 16px;
}

.live-feed-focus-image-area .live-feed-image-placeholder-logo[b-cn6oxywjiv] {
    font-size: 96px;
}

.live-feed-focus-image-area .live-feed-image-caption[b-cn6oxywjiv] {
    font-size: 1rem;
}

.live-feed-image-placeholder-logo[b-cn6oxywjiv] {
    /* Icon placeholder (the app ships no image assets in wwwroot — an <img> here would 404). */
    font-size: 56px;
    line-height: 1;
    opacity: 0.22;
    filter: grayscale(1) brightness(2);
}

.live-feed-image-caption[b-cn6oxywjiv] {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.live-feed-image-overlay[b-cn6oxywjiv] {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 6px;
}

.live-feed-overlay-pill[b-cn6oxywjiv] {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 3px 9px;
    border-radius: 999px;
}

.live-feed-driveoff-flag[b-cn6oxywjiv] {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 0, 0, 0.85);
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 999px;
}

/* Footer strip below the image area: the plate readout (app-wide shared control, see
   LicensePlateGrid.razor) and the station/pos/status badges, laid out like the list row's own meta
   cell but with room to breathe at this larger size. */
.live-feed-focus-footer[b-cn6oxywjiv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.15);
}

.live-feed-focus-meta[b-cn6oxywjiv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* ── left pane: compact rows ────────────────────────────────────────────────────────────────── */

.live-feed-row[b-cn6oxywjiv] {
    position: relative;
    display: grid;
    /* strip | pump+time (content width) | plate control (capped) | badges (wraps, takes the rest) -
       an explicit grid template (over the previous plain flex row) plus the min-height below is what
       makes this row structurally unable to collapse or overlap no matter which badges/fields a given
       event does or doesn't carry (empty pos_id, missing pump, long normalized plate, station badge
       on/off, ...) - see the individual cell rules for how each one is bounded. 170px fits
       LicensePlateGrid's own non-compact min-width (160px) without clipping it. */
    grid-template-columns: 8px auto minmax(0, 170px) minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    min-height: 56px;
    background: #2C3E50;
    border-radius: 8px;
    padding: 8px 10px 8px 0;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid transparent;
    /* Same shrink-to-fit trap as the image cards above (see that comment) - without this, a fleet-wide
       feed with enough rows to exceed the pane's max-height gets every row squashed toward 0, which is
       what "everything ~30px tall" in the All Clients report actually was. */
    flex-shrink: 0;
    transition: border-color 0.15s ease, filter 0.15s ease;
}

.live-feed-row:hover[b-cn6oxywjiv] {
    filter: brightness(1.08);
}

.live-feed-row.is-selected[b-cn6oxywjiv] {
    border-color: rgba(148, 163, 184, 0.65);
    background: #34495E;
}

.live-feed-row-strip[b-cn6oxywjiv] {
    align-self: stretch;
    width: 8px;
    flex-shrink: 0;
    border-radius: 8px 0 0 8px;
}

.live-feed-row-strip.is-normal[b-cn6oxywjiv] {
    background: #00FF00;
}

.live-feed-row-strip.is-driveoff[b-cn6oxywjiv] {
    background: #FF0000;
}

.live-feed-row-pump[b-cn6oxywjiv] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
    white-space: nowrap;
}

.live-feed-row-pump-number[b-cn6oxywjiv] {
    /* Was a bare "#3" at 1.15rem - the actual complaint was that the number alone reads as
       unexplained. Now a localized "Pump 3" / "Dyst. 3" (see PumpLabelFormat), sized down to fit that
       longer label into the same compact column. */
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.2;
}

.live-feed-row-time[b-cn6oxywjiv] {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    font-variant-numeric: tabular-nums;
}

.live-feed-row-plate[b-cn6oxywjiv] {
    min-width: 0;
    overflow: hidden;
}

.live-feed-row-meta[b-cn6oxywjiv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}

.live-feed-station-badge[b-cn6oxywjiv] {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.live-feed-pos-badge[b-cn6oxywjiv] {
    background: rgba(59, 130, 246, 0.18);
    color: #93c5fd;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.live-feed-status-badge[b-cn6oxywjiv] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.live-feed-status-badge.is-delivered[b-cn6oxywjiv] {
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
}

.live-feed-status-badge.is-failed[b-cn6oxywjiv] {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
}

.live-feed-status-badge.is-dropped[b-cn6oxywjiv] {
    background: rgba(245, 158, 11, 0.18);
    color: #fcd34d;
}

.live-feed-status-badge.is-unknown[b-cn6oxywjiv] {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
}

/* ── focus-pane plate readout ───────────────────────────────────────────────────────────────────
   The plate chip markup used to live here (pure-CSS, no assets) - both panes now render the plate via
   the app's shared LicensePlateGrid control instead (Components/Shared/LicensePlateGrid.razor, same one
   Transactions/GeneralDriveOffList/PoliceReportList/TodayAlarmsFeed use), non-clickable, so this
   component owns none of that markup or styling anymore. */
.live-feed-focus-plate[b-cn6oxywjiv] {
    display: flex;
    align-items: center;
}

/* ── focus-pane tabs (plate history / photo) ───────────────────────────────────────────────────── */

.live-feed-focus-tabs[b-cn6oxywjiv] {
    display: flex;
    gap: 2px;
    padding: 6px 8px 0 8px;
    background: rgba(0, 0, 0, 0.18);
    flex-shrink: 0;
}

.live-feed-focus-tab[b-cn6oxywjiv] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 700;
    font-size: 0.82rem;
    padding: 9px 14px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.live-feed-focus-tab:hover[b-cn6oxywjiv] {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.05);
}

.live-feed-focus-tab.is-active[b-cn6oxywjiv] {
    color: #ffffff;
    border-bottom-color: #3b82f6;
}

.live-feed-focus-tab .oi[b-cn6oxywjiv] {
    font-size: 0.8rem;
    opacity: 0.85;
}

/* Shared header (plate + meta), visible on both tabs. */
.live-feed-focus-header[b-cn6oxywjiv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

/* Tab body: fills the remaining card height; the only scrolling area in the focus card. */
.live-feed-focus-body[b-cn6oxywjiv] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-anchor: none;
}

/* When the Photo tab is active, keep the placeholder filling the body as before. */
.live-feed-focus-body .live-feed-focus-image-area[b-cn6oxywjiv] {
    flex: 1 1 auto;
}

/* ── plate history content ─────────────────────────────────────────────────────────────────────── */

.live-feed-history-section[b-cn6oxywjiv] {
    padding: 12px 16px;
}

.live-feed-history-title[b-cn6oxywjiv] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.live-feed-history-list[b-cn6oxywjiv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.live-feed-history-item[b-cn6oxywjiv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    font-size: 0.82rem;
}

.live-feed-history-date[b-cn6oxywjiv] {
    color: rgba(255, 255, 255, 0.75);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

.live-feed-history-loc[b-cn6oxywjiv] {
    color: rgba(255, 255, 255, 0.55);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-feed-history-amount[b-cn6oxywjiv] {
    color: #7CFC7C;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

/* "Clean in the system" - the common case (few cars have prior transactions). */
.live-feed-history-clean[b-cn6oxywjiv] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px;
    padding: 14px 16px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 8px;
}

.live-feed-history-clean .oi[b-cn6oxywjiv] {
    font-size: 1.6rem;
    color: #7CFC7C;
    flex-shrink: 0;
}

.live-feed-history-clean-title[b-cn6oxywjiv] {
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9rem;
}

.live-feed-history-clean-sub[b-cn6oxywjiv] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.78rem;
    margin-top: 2px;
}

.live-feed-history-empty[b-cn6oxywjiv],
.live-feed-history-loading[b-cn6oxywjiv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.82rem;
}

.live-feed-history-empty .oi[b-cn6oxywjiv] {
    opacity: 0.7;
}

/* Previous visits (on-demand). */
.live-feed-visits[b-cn6oxywjiv] {
    padding: 4px 16px 16px 16px;
    margin-top: auto;
}

.live-feed-visits-btn[b-cn6oxywjiv] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(59, 130, 246, 0.16);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 8px 14px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.live-feed-visits-btn:hover[b-cn6oxywjiv] {
    background: rgba(59, 130, 246, 0.28);
    border-color: rgba(59, 130, 246, 0.5);
    color: #bfdbfe;
}

.live-feed-visits .live-feed-history-section[b-cn6oxywjiv] {
    padding: 0;
}

/* Cap the visits list height so a frequent visitor's long history stays inside the card. */
.live-feed-visits-list[b-cn6oxywjiv] {
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}

/* ── new-arrival highlight + drive-off pulse ───────────────────────────────────────────────────── */

.is-new-arrival[b-cn6oxywjiv] {
    animation: liveFeedNewArrival-b-cn6oxywjiv 2s ease-out;
}

@keyframes liveFeedNewArrival-b-cn6oxywjiv {
    0% { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.9); background-color: rgba(59, 130, 246, 0.22); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

.is-driveoff-pulse[b-cn6oxywjiv] {
    animation: liveFeedDriveoffPulse-b-cn6oxywjiv 0.5s ease-in-out infinite;
}

@keyframes liveFeedDriveoffPulse-b-cn6oxywjiv {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.65); }
    50% { box-shadow: 0 0 0 7px rgba(255, 0, 0, 0.08); }
}

/* ── responsive ─────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    .live-feed-panes[b-cn6oxywjiv] {
        flex-direction: column;
    }

    .live-feed-focus-pane[b-cn6oxywjiv] {
        flex-basis: auto;
        max-height: 50vh;
    }

    .live-feed-list-pane[b-cn6oxywjiv] {
        flex-basis: auto;
        max-height: 50vh;
    }
}
/* /Components/Shared/LocationScopePicker.razor.rz.scp.css */
/* Compact location-scope trigger + popup. Deliberately small - this sits next to a client picker in a
   single filter row and must never dominate it the way the old per-location chip strip did. */

.location-scope-picker[b-rjhkrensyx] {
    display: inline-flex;
    align-items: center;
}

[b-rjhkrensyx] .location-scope-trigger-btn {
    height: 38px;
    padding: 0 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 8px;
    white-space: nowrap;
}

.location-scope-chip-trigger[b-rjhkrensyx] {
    display: inline-flex;
    cursor: pointer;
    border-radius: 20px;
}

.location-scope-chip-trigger:focus-visible[b-rjhkrensyx] {
    outline: 2px solid var(--color-primary, #3b82f6);
    outline-offset: 2px;
}

/* ── popup body ─────────────────────────────────────────────────────────────────────────────── */

.location-picker-body[b-rjhkrensyx] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

[b-rjhkrensyx] .location-picker-search {
    width: 100%;
}

.location-picker-toolbar[b-rjhkrensyx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.location-picker-count[b-rjhkrensyx] {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.9);
}

.location-picker-count.is-empty[b-rjhkrensyx] {
    color: rgba(252, 165, 165, 0.9);
    font-weight: 500;
}

.location-picker-toolbar-actions[b-rjhkrensyx] {
    display: flex;
    gap: 1rem;
}

.location-picker-link-btn[b-rjhkrensyx] {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-primary-light, #60a5fa);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.location-picker-link-btn:hover[b-rjhkrensyx] {
    text-decoration: underline;
}

.location-picker-empty[b-rjhkrensyx] {
    padding: 2rem 1rem;
    text-align: center;
    color: rgba(148, 163, 184, 0.75);
    font-size: 0.85rem;
}

[b-rjhkrensyx] .location-picker-grid {
    border-radius: 8px;
    overflow: hidden;
}

/* ── mobile ─────────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
    [b-rjhkrensyx] .location-scope-trigger-btn {
        width: 100%;
    }

    .location-scope-picker[b-rjhkrensyx] {
        width: 100%;
    }
}
/* /Components/Shared/MobileFlatMenu.razor.rz.scp.css */
/* MobileFlatMenu.razor.css - Mobile Flat Menu Styling */

/* Overlay - full screen dark backdrop */
.mobile-menu-overlay[b-tkzhs1mydo] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn-b-tkzhs1mydo 0.2s ease;
}

/* Menu panel - centered modal */
.mobile-menu-panel[b-tkzhs1mydo] {
    width: 90vw;
    max-width: 400px;
    height: 95vh;
    max-height: 700px;
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98));
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 32px 64px rgba(15, 23, 42, 0.75);
    animation: slideInUp-b-tkzhs1mydo 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Header - logo + close button */
.mobile-menu-header[b-tkzhs1mydo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(148, 163, 235, 0.15);
    min-height: 56px;
    flex-shrink: 0;
}

.mobile-logo-icon[b-tkzhs1mydo] {
    width: 36px;
    height: 36px;
    filter: drop-shadow(0 4px 12px rgba(59, 130, 246, 0.3));
}

.mobile-menu-close[b-tkzhs1mydo] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(71, 85, 105, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(226, 232, 240, 0.9);
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mobile-menu-close:hover[b-tkzhs1mydo] {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.25);
    color: rgba(248, 250, 252, 0.98);
}

.mobile-menu-close:active[b-tkzhs1mydo] {
    background: rgba(239, 68, 68, 0.3);
}

/* Scrollable menu list */
.mobile-menu-list[b-tkzhs1mydo] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 235, 0.3) transparent;
}

.mobile-menu-list[b-tkzhs1mydo]::-webkit-scrollbar {
    width: 6px;
}

.mobile-menu-list[b-tkzhs1mydo]::-webkit-scrollbar-track {
    background: transparent;
}

.mobile-menu-list[b-tkzhs1mydo]::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 235, 0.3);
    border-radius: 3px;
}

.mobile-menu-list[b-tkzhs1mydo]::-webkit-scrollbar-thumb:hover {
    background: rgba(96, 165, 250, 0.5);
}

/* Menu item - main items (44px) */
.mobile-menu-item[b-tkzhs1mydo] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 10px 12px;
    margin: 2px 0;
    border-radius: 10px;
    color: rgba(226, 232, 240, 0.9);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    background: transparent;
    transition: all 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    border: none;
    position: relative;
}

/* Left accent indicator for mobile */
.mobile-menu-item[b-tkzhs1mydo]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 60%;
    border-radius: 0 3px 3px 0;
    background: rgba(59, 130, 246, 0.9);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.2s ease;
    opacity: 0;
}

.mobile-menu-item:hover[b-tkzhs1mydo] {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(248, 250, 252, 0.98);
}

.mobile-menu-item:hover[b-tkzhs1mydo]::before {
    transform: translateY(-50%) scaleY(0.6);
    opacity: 0.5;
}

.mobile-menu-item:active[b-tkzhs1mydo] {
    background: rgba(59, 130, 246, 0.12);
}

.mobile-menu-item:active[b-tkzhs1mydo]::before {
    transform: translateY(-50%) scaleY(1);
    opacity: 1;
}

/* Submenu items (44px touch-target guideline, indented) */
.mobile-menu-item.submenu[b-tkzhs1mydo] {
    min-height: 44px;
    padding: 8px 12px 8px 24px;
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(148, 163, 184, 0.85);
}

.mobile-menu-item.submenu[b-tkzhs1mydo]::before {
    width: 2px;
    height: 50%;
}

.mobile-menu-item.submenu:hover[b-tkzhs1mydo] {
    color: rgba(248, 250, 252, 0.98);
}

/* Icon styling */
.mobile-menu-item i[b-tkzhs1mydo] {
    font-size: 1rem;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(71, 85, 105, 0.35);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(226, 232, 240, 0.9);
    transition: all 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mobile-menu-item:hover i[b-tkzhs1mydo] {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.15);
    color: rgba(248, 250, 252, 0.98);
}

.mobile-menu-item.submenu i[b-tkzhs1mydo] {
    font-size: 0.85rem;
    min-width: 26px;
    height: 26px;
    border-radius: 6px;
}

/* Notification badge on Authorize item */
.mobile-notification-badge[b-tkzhs1mydo] {
    margin-left: auto;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(220, 38, 38, 0.95));
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 6px;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

/* Section header (28px) */
.mobile-menu-section[b-tkzhs1mydo] {
    padding: 6px 12px;
    margin: 12px 0 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(148, 163, 184, 0.6);
    min-height: 24px;
    display: flex;
    align-items: center;
}

/* Loading state */
.mobile-menu-loading[b-tkzhs1mydo] {
    padding: 20px;
    text-align: center;
    color: rgba(148, 163, 235, 0.7);
    font-size: 0.95rem;
}

/* Footer - documentation button */
.mobile-menu-footer[b-tkzhs1mydo] {
    padding: 8px 12px;
    border-top: 1px solid rgba(148, 163, 235, 0.15);
    flex-shrink: 0;
}

.mobile-doc-button[b-tkzhs1mydo] {
    width: 100%;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.12);
    border: none;
    color: rgba(226, 232, 240, 0.9);
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.mobile-doc-button[b-tkzhs1mydo]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 60%;
    border-radius: 0 3px 3px 0;
    background: rgba(59, 130, 246, 0.9);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.2s ease;
    opacity: 0;
}

.mobile-doc-button:hover[b-tkzhs1mydo] {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(248, 250, 252, 0.98);
}

.mobile-doc-button:hover[b-tkzhs1mydo]::before {
    transform: translateY(-50%) scaleY(0.6);
    opacity: 0.5;
}

.mobile-doc-button:active[b-tkzhs1mydo] {
    background: rgba(59, 130, 246, 0.15);
}

.mobile-doc-button i[b-tkzhs1mydo] {
    font-size: 0.95rem;
}

/* Animations */
@keyframes fadeIn-b-tkzhs1mydo {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInUp-b-tkzhs1mydo {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Extra small phones */
@media (max-width: 375px) {
    .mobile-menu-panel[b-tkzhs1mydo] {
        width: 95vw;
        height: 98vh;
    }

    .mobile-menu-item[b-tkzhs1mydo] {
        font-size: 0.95rem;
        padding: 9px 10px;
    }

    .mobile-menu-item.submenu[b-tkzhs1mydo] {
        font-size: 0.9rem;
        padding: 7px 10px 7px 24px;
    }
}

/* Landscape orientation adjustments */
@media (max-height: 600px) and (orientation: landscape) {
    .mobile-menu-panel[b-tkzhs1mydo] {
        height: 98vh;
        max-height: none;
    }

    .mobile-menu-header[b-tkzhs1mydo] {
        padding: 8px 16px;
        min-height: 48px;
    }

    .mobile-logo-icon[b-tkzhs1mydo] {
        width: 32px;
        height: 32px;
    }

    .mobile-menu-close[b-tkzhs1mydo] {
        width: 32px;
        height: 32px;
        font-size: 20px;
    }
}
/* /Components/Shared/Modals/ConfirmationPopup.razor.rz.scp.css */
@media (max-width: 575.98px) {
    [b-zku694mi11] .dxbl-popup-footer {
        flex-direction: column;
        gap: 0.5rem;
    }
    [b-zku694mi11] .dxbl-popup-footer .dxbl-btn {
        width: 100%;
    }
}
/* /Components/Shared/ModernFilterButton.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   ModernFilterButton - Consistent filter/action button for grids
   Matches modern dark theme with glass effect
   ═══════════════════════════════════════════════════════════════════════════ */

.modern-filter-btn[b-u3q0w60sh5] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    height: 36px;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    border: none;
}

.modern-filter-btn:disabled[b-u3q0w60sh5] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Icon styling */
.btn-icon[b-u3q0w60sh5] {
    font-size: 0.85rem;
    line-height: 1;
    flex-shrink: 0;
}

.btn-text[b-u3q0w60sh5] {
    line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Variant: Default - Subtle glass effect
   ═══════════════════════════════════════════════════════════════════════════ */
.modern-filter-btn.variant-default[b-u3q0w60sh5] {
    background: rgba(51, 65, 85, 0.6);
    border: 1px solid rgba(100, 116, 139, 0.3);
    color: rgba(203, 213, 225, 0.9);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.modern-filter-btn.variant-default:hover:not(:disabled)[b-u3q0w60sh5] {
    background: rgba(71, 85, 105, 0.7);
    border-color: rgba(100, 116, 139, 0.5);
    color: rgba(241, 245, 249, 0.95);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

.modern-filter-btn.variant-default:active:not(:disabled)[b-u3q0w60sh5] {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Active state - shows filter is applied */
.modern-filter-btn.variant-default.active[b-u3q0w60sh5] {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
    color: rgba(147, 197, 253, 0.95);
}

.modern-filter-btn.variant-default.active:hover:not(:disabled)[b-u3q0w60sh5] {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.5);
    color: #bfdbfe;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Variant: Primary - Blue accent for important actions
   ═══════════════════════════════════════════════════════════════════════════ */
.modern-filter-btn.variant-primary[b-u3q0w60sh5] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

.modern-filter-btn.variant-primary:hover:not(:disabled)[b-u3q0w60sh5] {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35);
    transform: translateY(-1px);
}

.modern-filter-btn.variant-primary:active:not(:disabled)[b-u3q0w60sh5] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Variant: Outline - Transparent with border
   ═══════════════════════════════════════════════════════════════════════════ */
.modern-filter-btn.variant-outline[b-u3q0w60sh5] {
    background: transparent;
    border: 1px solid rgba(100, 116, 139, 0.4);
    color: rgba(203, 213, 225, 0.9);
}

.modern-filter-btn.variant-outline:hover:not(:disabled)[b-u3q0w60sh5] {
    background: rgba(51, 65, 85, 0.4);
    border-color: rgba(148, 163, 184, 0.5);
    color: rgba(241, 245, 249, 0.95);
}

.modern-filter-btn.variant-outline.active[b-u3q0w60sh5] {
    border-color: rgba(59, 130, 246, 0.5);
    color: rgba(147, 197, 253, 0.95);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Variant: Ghost - Minimal appearance
   ═══════════════════════════════════════════════════════════════════════════ */
.modern-filter-btn.variant-ghost[b-u3q0w60sh5] {
    background: transparent;
    border: 1px solid transparent;
    color: rgba(148, 163, 184, 0.85);
}

.modern-filter-btn.variant-ghost:hover:not(:disabled)[b-u3q0w60sh5] {
    background: rgba(51, 65, 85, 0.3);
    color: rgba(226, 232, 240, 0.95);
}

.modern-filter-btn.variant-ghost.active[b-u3q0w60sh5] {
    color: rgba(147, 197, 253, 0.95);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive adjustments
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .modern-filter-btn[b-u3q0w60sh5] {
        padding: 0.45rem 0.85rem;
        height: 34px;
        font-size: 0.75rem;
        gap: 0.4rem;
    }

    .btn-icon[b-u3q0w60sh5] {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .modern-filter-btn[b-u3q0w60sh5] {
        padding: 0.4rem 0.75rem;
        height: 32px;
        font-size: 0.7rem;
    }
}
/* /Components/Shared/ResponsiveMainMenu.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   HYDRATION FADE-IN: Prevent visual "blink" during Blazor hydration
   Menu starts invisible, fades in smoothly when JavaScript initializes
   ═══════════════════════════════════════════════════════════════════════════ */
[b-q45kn7cxa2] .main-nav-menu {
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
    overflow-x: hidden !important;
    width: 100%;
}

[b-q45kn7cxa2] .main-nav-menu.menu-ready {
    opacity: 1;
}

[b-q45kn7cxa2] .main-nav-menu .dxbl-menu-item-link {
    overflow: hidden !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-q45kn7cxa2] .main-nav-menu .dxbl-menu-submenu {
    overflow-x: hidden !important;
    width: 100%;
}

[b-q45kn7cxa2] .main-nav-menu .dxbl-dropdown-content,
[b-q45kn7cxa2] .main-nav-menu .dxbl-menu-dropdown {
    overflow-x: hidden !important;
    max-width: 100%;
}

/* Authorize badge styling */
.authorize-badge[b-q45kn7cxa2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.65rem;
    height: 1.45rem;
    padding: 0 0.45rem;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, 0.32);
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35), 0 0 0 3px rgba(239, 68, 68, 0.12);
    will-change: box-shadow; /* GPU acceleration hint */
    transform: translateZ(0); /* Force GPU layer */
    animation: notification-pulse 2s ease-in-out infinite;
}

/* ===== MOBILE RESPONSIVE ENHANCEMENTS ===== */

/* Mobile touch target optimization - ensures all menu items meet 44-48px minimum */
@media (max-width: 768px) {
    /* Base menu item styling for mobile */
    [b-q45kn7cxa2] .main-nav-menu .dxbl-menu-item-link {
        min-height: 48px !important;  /* iOS/Android touch target guideline */
        padding: 0.75rem 1rem !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem;
    }

    /* Larger, more visible icons on mobile */
    [b-q45kn7cxa2] .main-nav-menu .dxbl-menu-item-icon {
        font-size: 1.25rem !important;  /* 20px - easier to see on small screens */
        min-width: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Readable text sizing on mobile */
    [b-q45kn7cxa2] .main-nav-menu .dxbl-menu-item-text {
        font-size: 1rem !important;  /* 16px - comfortable reading size */
        font-weight: 500 !important;
        line-height: 1.4;
    }

    /* Mobile submenu indentation for visual hierarchy */
    [b-q45kn7cxa2] .main-nav-menu .dxbl-menu-submenu .dxbl-menu-item-link {
        padding-left: 2.5rem !important;  /* Clear visual nesting */
    }

    /* Mobile mode Back button styling (DevExpress provides this in mobile mode) */
    [b-q45kn7cxa2] .main-nav-menu .dxbl-menu-back-button {
        min-height: 48px !important;
        padding: 0.75rem 1rem !important;
        font-weight: 600 !important;
    }

    /* Expand icon sizing on mobile */
    [b-q45kn7cxa2] .main-nav-menu .dxbl-menu-item-expand-icon {
        font-size: 1.1rem !important;
        min-width: 24px;
    }

    /* Ensure adequate spacing between menu items */
    [b-q45kn7cxa2] .main-nav-menu .dxbl-menu-item {
        margin: 0.15rem 0;
    }

    /* Active/selected item emphasis on mobile */
    [b-q45kn7cxa2] .main-nav-menu .dxbl-menu-item-link:active,
    [b-q45kn7cxa2] .main-nav-menu .dxbl-menu-item-link.active {
        background: rgba(59, 130, 246, 0.25) !important;
    }

    /* Authorize label needs to stay horizontal on mobile */
    .authorize-label[b-q45kn7cxa2] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: nowrap;
    }

    .authorize-text[b-q45kn7cxa2] {
        flex-shrink: 0;
    }

    /* Badge remains visible and accessible on mobile */
    .authorize-badge[b-q45kn7cxa2] {
        flex-shrink: 0;
        min-width: 1.75rem;
        height: 1.5rem;
        font-size: 0.8rem;
    }
}

/* Extra small screens (iPhone SE, small Android phones) */
@media (max-width: 375px) {
    /* Slightly reduce padding to maximize space */
    [b-q45kn7cxa2] .main-nav-menu .dxbl-menu-item-link {
        padding: 0.65rem 0.85rem !important;
    }

    /* Keep icons visible but slightly smaller */
    [b-q45kn7cxa2] .main-nav-menu .dxbl-menu-item-icon {
        font-size: 1.15rem !important;
        min-width: 26px;
    }

    /* Text remains readable */
    [b-q45kn7cxa2] .main-nav-menu .dxbl-menu-item-text {
        font-size: 0.95rem !important;
    }

    /* Adjust submenu indentation */
    [b-q45kn7cxa2] .main-nav-menu .dxbl-menu-submenu .dxbl-menu-item-link {
        padding-left: 2rem !important;
    }
}
/* /Components/Shared/SaldoDisplay.razor.rz.scp.css */
/* === SALDO DISPLAY COMPONENT === */
/* Modern glassmorphic badge for displaying saldo with color-coded states */

/* === SHARED GLASSMORPHIC STYLES === */
.saldo-block[b-wjev3zpjh1],
.saldo-inline[b-wjev3zpjh1] {
    position: relative;
    border-radius: 18px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #ffffff;
    overflow: hidden;
}

/* === BLOCK (FULL WIDTH) VERSION === */
.saldo-block[b-wjev3zpjh1] {
    padding: 1.5rem 2rem;
    width: 100%;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

.saldo-block .saldo-content[b-wjev3zpjh1] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.saldo-block .saldo-text[b-wjev3zpjh1] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.saldo-block .saldo-label[b-wjev3zpjh1] {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
    font-weight: 500;
}

.saldo-block .saldo-amount[b-wjev3zpjh1] {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.saldo-block .saldo-icon[b-wjev3zpjh1] {
    font-size: 2.5rem;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

/* === INLINE VERSION === */
.saldo-inline[b-wjev3zpjh1] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

.saldo-inline .saldo-label[b-wjev3zpjh1] {
    font-weight: 600;
}

.saldo-inline .saldo-amount[b-wjev3zpjh1] {
    font-weight: 700;
    font-size: 1.2rem;
}

.saldo-inline .saldo-icon[b-wjev3zpjh1] {
    font-size: 1.5rem;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

/* === STATE COLORS === */

/* GREEN - PAID (All good) */
.saldo-state-paid[b-wjev3zpjh1] {
    background: linear-gradient(135deg,
        rgba(16, 185, 129, 0.85) 0%,
        rgba(5, 150, 105, 0.75) 50%,
        rgba(4, 120, 87, 0.85) 100%);
    border: 1px solid rgba(167, 243, 208, 0.4);
}

.saldo-state-paid:hover[b-wjev3zpjh1] {
    background: linear-gradient(135deg,
        rgba(16, 185, 129, 0.95) 0%,
        rgba(5, 150, 105, 0.85) 50%,
        rgba(4, 120, 87, 0.95) 100%);
    border-color: rgba(167, 243, 208, 0.6);
    box-shadow:
        0 12px 40px rgba(5, 150, 105, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 0 1px rgba(167, 243, 208, 0.3),
        0 0 40px rgba(16, 185, 129, 0.3);
    transform: translateY(-2px);
}

/* YELLOW/AMBER - NEEDS AUTHORIZATION */
.saldo-state-authorize[b-wjev3zpjh1] {
    background: linear-gradient(135deg,
        rgba(245, 158, 11, 0.85) 0%,
        rgba(217, 119, 6, 0.75) 50%,
        rgba(180, 83, 9, 0.85) 100%);
    border: 1px solid rgba(253, 230, 138, 0.4);
}

.saldo-state-authorize:hover[b-wjev3zpjh1] {
    background: linear-gradient(135deg,
        rgba(245, 158, 11, 0.95) 0%,
        rgba(217, 119, 6, 0.85) 50%,
        rgba(180, 83, 9, 0.95) 100%);
    border-color: rgba(253, 230, 138, 0.6);
    box-shadow:
        0 12px 40px rgba(217, 119, 6, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 0 1px rgba(253, 230, 138, 0.3),
        0 0 40px rgba(245, 158, 11, 0.3);
    transform: translateY(-2px);
}

/* RED - UNPAID */
.saldo-state-unpaid[b-wjev3zpjh1] {
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.85) 0%,
        rgba(220, 38, 38, 0.75) 50%,
        rgba(185, 28, 28, 0.85) 100%);
    border: 1px solid rgba(254, 202, 202, 0.4);
}

.saldo-state-unpaid:hover[b-wjev3zpjh1] {
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.95) 0%,
        rgba(220, 38, 38, 0.85) 50%,
        rgba(185, 28, 28, 0.95) 100%);
    border-color: rgba(254, 202, 202, 0.6);
    box-shadow:
        0 12px 40px rgba(220, 38, 38, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 0 1px rgba(254, 202, 202, 0.3),
        0 0 40px rgba(239, 68, 68, 0.3);
    transform: translateY(-2px);
}

/* === SHIMMER EFFECT ON HOVER === */
.saldo-block[b-wjev3zpjh1]::before,
.saldo-inline[b-wjev3zpjh1]::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.6s ease;
    pointer-events: none;
}

.saldo-block:hover[b-wjev3zpjh1]::before,
.saldo-inline:hover[b-wjev3zpjh1]::before {
    left: 100%;
}

/* === RESPONSIVE ADJUSTMENTS === */
@media (max-width: 768px) {
    .saldo-block[b-wjev3zpjh1] {
        padding: 1.25rem 1.5rem;
        border-radius: 16px;
    }

    .saldo-block .saldo-amount[b-wjev3zpjh1] {
        font-size: 1.75rem;
    }

    .saldo-block .saldo-icon[b-wjev3zpjh1] {
        font-size: 2rem;
    }

    .saldo-inline[b-wjev3zpjh1] {
        padding: 0.65rem 1.25rem;
        font-size: 1rem;
        gap: 0.6rem;
    }

    .saldo-inline .saldo-amount[b-wjev3zpjh1] {
        font-size: 1.1rem;
    }

    .saldo-inline .saldo-icon[b-wjev3zpjh1] {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .saldo-block[b-wjev3zpjh1] {
        padding: 1rem 1.25rem;
        border-radius: 14px;
    }

    .saldo-block .saldo-content[b-wjev3zpjh1] {
        gap: 1rem;
    }

    .saldo-block .saldo-label[b-wjev3zpjh1] {
        font-size: 0.85rem;
    }

    .saldo-block .saldo-amount[b-wjev3zpjh1] {
        font-size: 1.5rem;
    }

    .saldo-block .saldo-icon[b-wjev3zpjh1] {
        font-size: 1.75rem;
    }
}
/* /Components/Shared/TimelineHelpGuide.razor.rz.scp.css */
/* TimelineHelpGuide — scoped styles */
/* DxPopup renders in a portal, so ::deep is needed for inner content */

[b-hi3dxjjc0n] .help-guide {
    padding: 0.25rem 0.5rem 0.75rem;
}

[b-hi3dxjjc0n] .help-section {
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.15);
}

[b-hi3dxjjc0n] .help-section-last {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0.25rem;
}

[b-hi3dxjjc0n] .help-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #e2e8f0;
    margin: 0 0 0.4rem;
}

[b-hi3dxjjc0n] .help-section-desc {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0 0 0.85rem;
    line-height: 1.5;
}

/* ===== EVENT TYPE LEGEND ===== */
[b-hi3dxjjc0n] .legend-grid {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

[b-hi3dxjjc0n] .legend-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

[b-hi3dxjjc0n] .legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.2rem;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.8);
}

[b-hi3dxjjc0n] .legend-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

[b-hi3dxjjc0n] .legend-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #e2e8f0;
}

[b-hi3dxjjc0n] .legend-desc {
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.45;
}

/* Dot colors (duplicated from PlateIntelligence — Blazor CSS isolation) */
[b-hi3dxjjc0n] .dot-visit {
    background: #3b82f6;
}

[b-hi3dxjjc0n] .dot-alarm {
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.8), 0 0 8px rgba(239, 68, 68, 0.4);
}

[b-hi3dxjjc0n] .dot-driveoff {
    background: #f97316;
}

[b-hi3dxjjc0n] .dot-driveoff-added {
    background: #a855f7;
}

[b-hi3dxjjc0n] .dot-driveoff-authorized {
    background: #06b6d4;
}

[b-hi3dxjjc0n] .dot-payment {
    background: #22c55e;
}

/* ===== BADGE EXAMPLES ===== */
[b-hi3dxjjc0n] .badge-grid {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

[b-hi3dxjjc0n] .badge-example {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

[b-hi3dxjjc0n] .example-badge {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

[b-hi3dxjjc0n] .badge-alarm-ex {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

[b-hi3dxjjc0n] .badge-awaiting-ex {
    background: rgba(249, 115, 22, 0.2);
    color: #fdba74;
    border: 1px solid rgba(249, 115, 22, 0.3);
}

[b-hi3dxjjc0n] .badge-authorized-ex {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

[b-hi3dxjjc0n] .badge-desc {
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.45;
}

/* ===== LINKED NOTE EXAMPLES ===== */
[b-hi3dxjjc0n] .notes-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

[b-hi3dxjjc0n] .note-example {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

[b-hi3dxjjc0n] .example-note {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    opacity: 0.85;
}

[b-hi3dxjjc0n] .example-note .oi {
    font-size: 0.6rem;
}

[b-hi3dxjjc0n] .note-default-ex {
    color: #94a3b8;
}

[b-hi3dxjjc0n] .note-added-ex {
    color: #a855f7;
}

[b-hi3dxjjc0n] .note-authorized-ex {
    color: #06b6d4;
}

[b-hi3dxjjc0n] .note-pending-ex {
    color: #f59e0b;
}

[b-hi3dxjjc0n] .note-desc {
    font-size: 0.73rem;
    color: #64748b;
    line-height: 1.45;
    padding-left: 1rem;
}

/* ===== LIFECYCLE FLOW ===== */
[b-hi3dxjjc0n] .lifecycle-flow {
    display: flex;
    flex-direction: column;
    padding-left: 0.25rem;
}

[b-hi3dxjjc0n] .lifecycle-step {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    position: relative;
    padding-bottom: 1rem;
}

[b-hi3dxjjc0n] .lifecycle-step-last {
    padding-bottom: 0;
}

[b-hi3dxjjc0n] .lifecycle-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.15rem;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.8);
}

[b-hi3dxjjc0n] .lifecycle-connector {
    position: absolute;
    left: 6px;
    top: 16px;
    bottom: 0;
    width: 2px;
    background: rgba(100, 116, 139, 0.25);
}

[b-hi3dxjjc0n] .lifecycle-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

[b-hi3dxjjc0n] .lifecycle-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #e2e8f0;
}

[b-hi3dxjjc0n] .lifecycle-desc {
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.45;
}

/* ===== MONTH DOTS EXAMPLE ===== */
[b-hi3dxjjc0n] .month-dots-example {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: rgba(100, 116, 139, 0.08);
    border-radius: 6px;
    border: 1px solid rgba(100, 116, 139, 0.12);
}

[b-hi3dxjjc0n] .example-month-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 575.98px) {
    [b-hi3dxjjc0n] .help-guide {
        padding: 0.15rem 0.25rem 0.5rem;
    }

    [b-hi3dxjjc0n] .help-section {
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }

    [b-hi3dxjjc0n] .help-section-title {
        font-size: 0.9rem;
    }

    [b-hi3dxjjc0n] .legend-item {
        gap: 0.6rem;
    }

    [b-hi3dxjjc0n] .badge-example {
        flex-direction: column;
        gap: 0.2rem;
    }

    [b-hi3dxjjc0n] .badge-desc {
        padding-left: 0;
    }
}