/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-tyww6ez50i] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-tyww6ez50i] {
    flex: 1;
}

.sidebar[b-tyww6ez50i] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-tyww6ez50i] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-tyww6ez50i]  a, .top-row[b-tyww6ez50i]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-tyww6ez50i]  a:hover, .top-row[b-tyww6ez50i]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-tyww6ez50i]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-tyww6ez50i] {
        justify-content: space-between;
    }

    .top-row[b-tyww6ez50i]  a, .top-row[b-tyww6ez50i]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-tyww6ez50i] {
        flex-direction: row;
    }

    .sidebar[b-tyww6ez50i] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-tyww6ez50i] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-tyww6ez50i]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }
}

#blazor-error-ui[b-tyww6ez50i] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-tyww6ez50i] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.toast-blue[b-tyww6ez50i] {
    background-color: blue;
}

.toast-green[b-tyww6ez50i] {
    background-color: green;
}

.toast-red[b-tyww6ez50i] {
    background-color: red;
}
/* /Components/Layout/NavBar.razor.rz.scp.css */
/* ============================================================
   NavBar - Clean & Professional Design
   ============================================================ */

*[b-wr6hxw41hx] {
    box-sizing: border-box;
}

.body[b-wr6hxw41hx] {
    margin: 0;
}

/* ============================================================
   Header Bar
   ============================================================ */
.nav[b-wr6hxw41hx] {
    height: 60px;
    width: 100%;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.nav > .nav-header[b-wr6hxw41hx] {
    display: flex;
    align-items: center;
    height: 100%;
}

.nav > .nav-header > .nav-title[b-wr6hxw41hx] {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 8px 16px;
    cursor: pointer;
}

.nav > .nav-header > .nav-title img[b-wr6hxw41hx] {
    height: 40px;
    width: auto;
}

.nav > .nav-btn[b-wr6hxw41hx] {
    display: none;
}

.nav > #nav-check[b-wr6hxw41hx] {
    display: none;
}

/* ============================================================
   Header Icons (Settings/Account)
   ============================================================ */
.nav > .nav-links[b-wr6hxw41hx] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding-right: 16px;
    position: relative;
}

.nav > .nav-links > a[b-wr6hxw41hx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.nav > .nav-links > a:hover[b-wr6hxw41hx] {
    background-color: rgba(255, 255, 255, 0.1);
}

.button-icon-settings[b-wr6hxw41hx] {
    color: #94a3b8;
    font-size: 20px;
    transition: color 0.2s ease;
}

.button-icon-settings:hover[b-wr6hxw41hx] {
    color: #fff;
}

.button-icon-account[b-wr6hxw41hx] {
    color: #fff;
    font-size: 24px;
    padding: 0;
}

/* ============================================================
   User Dropdown
   ============================================================ */
.userdropdown[b-wr6hxw41hx] {
    position: absolute;
    top: 50px;
    right: 0;
    z-index: 1000;
    width: 320px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.user-info[b-wr6hxw41hx] {
    padding: 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
}

.company-name[b-wr6hxw41hx] {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    display: block;
}

.user-name[b-wr6hxw41hx] {
    font-size: 14px;
    color: #64748b;
    display: block;
    margin-top: 4px;
}

.link-section[b-wr6hxw41hx] {
    padding: 12px;
    background: #fff;
    box-shadow: none;
}

.menu-item-link[b-wr6hxw41hx] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: 8px;
    color: #475569;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    margin: 0;
}

.menu-item-link:hover[b-wr6hxw41hx] {
    background-color: #f1f5f9;
    color: #1e293b;
}

.menu-item-link i[b-wr6hxw41hx] {
    width: 20px;
    text-align: center;
}

.ml[b-wr6hxw41hx] {
    margin-left: 12px;
}

/* ============================================================
   Desktop Navigation Bar
   ============================================================ */
.nav-buttons[b-wr6hxw41hx] {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 52px;
    width: 100%;
    padding: 0 24px;
    background-color: #fff;
    border-bottom: 1px solid #e2e8f0;
    position: fixed;
    top: 60px;
    left: 0;
    z-index: 999;
}

.menu-item[b-wr6hxw41hx] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0 16px;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
    border: none;
    background: none;
}

.menu-item i[b-wr6hxw41hx] {
    font-size: 14px;
    width: 16px;
    text-align: center;
}

.menu-item:hover[b-wr6hxw41hx] {
    color: #1e293b;
    background-color: transparent;
}

.menu-item.active[b-wr6hxw41hx] {
    color: var(--main-blue-dark, #3597CC);
    font-weight: 600;
}

.menu-item.active[b-wr6hxw41hx]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 8px;
    right: 8px;
    height: 2px;
    background-color: var(--main-blue-dark, #3597CC);
    border-radius: 2px 2px 0 0;
}

.menu-item.active i[b-wr6hxw41hx] {
    color: var(--main-blue-dark, #3597CC);
}

/* Legacy classes - keeping for backwards compatibility */
.page-selected[b-wr6hxw41hx] {
    font-weight: 600;
}

.menu-item-text[b-wr6hxw41hx] {
    display: none;
}

/* ============================================================
   Desktop Only Elements
   ============================================================ */
.desktop-only[b-wr6hxw41hx] {
    display: flex;
}

/* ============================================================
   Mobile Navigation - Hidden by Default
   ============================================================ */
.mobile-nav-drawer[b-wr6hxw41hx] {
    display: none;
}

.mobile-text[b-wr6hxw41hx] {
    display: none;
}

img[b-wr6hxw41hx] {
    max-width: 100%;
    max-height: 100%;
}

/* ============================================================
   Mobile Styles (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
    /* Header adjustments */
    .nav[b-wr6hxw41hx] {
        height: 56px;
    }

    .nav > .nav-header > .nav-title[b-wr6hxw41hx] {
        padding: 8px 12px;
    }

    .nav > .nav-header > .nav-title img[b-wr6hxw41hx] {
        height: 36px;
    }

    /* Hide desktop elements */
    .desktop-only[b-wr6hxw41hx] {
        display: none !important;
    }

    .nav-buttons[b-wr6hxw41hx] {
        display: none !important;
    }

    /* Hamburger button */
    .nav > .nav-btn[b-wr6hxw41hx] {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        cursor: pointer;
    }

    .nav > .nav-btn > label[b-wr6hxw41hx] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        padding: 12px;
        cursor: pointer;
        border-radius: 8px;
        transition: background-color 0.2s ease;
    }

    .nav > .nav-btn > label:hover[b-wr6hxw41hx],
    .nav #nav-check:checked ~ .nav-btn > label[b-wr6hxw41hx] {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .nav > .nav-btn > label > span[b-wr6hxw41hx] {
        display: block;
        width: 20px;
        height: 2px;
        background-color: #fff;
        border-radius: 1px;
        margin: 2px 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
        border-top: none;
    }

    /* Hamburger animation when open */
    .nav #nav-check:checked ~ .nav-btn > label > span:nth-child(1)[b-wr6hxw41hx] {
        transform: translateY(6px) rotate(45deg);
    }

    .nav #nav-check:checked ~ .nav-btn > label > span:nth-child(2)[b-wr6hxw41hx] {
        opacity: 0;
    }

    .nav #nav-check:checked ~ .nav-btn > label > span:nth-child(3)[b-wr6hxw41hx] {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* Mobile Navigation Drawer */
    .mobile-nav-drawer[b-wr6hxw41hx] {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        z-index: 1000;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav #nav-check:checked ~ .mobile-nav-drawer[b-wr6hxw41hx] {
        transform: translateX(0);
    }

    /* User Section */
    .mobile-user-section[b-wr6hxw41hx] {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 20px;
        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
        color: #fff;
    }

    .mobile-user-avatar[b-wr6hxw41hx] {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
    }

    .mobile-user-info[b-wr6hxw41hx] {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .mobile-user-name[b-wr6hxw41hx] {
        font-weight: 600;
        font-size: 1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-company-name[b-wr6hxw41hx] {
        font-size: 0.85rem;
        opacity: 0.8;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Navigation Sections */
    .mobile-nav-section[b-wr6hxw41hx] {
        padding: 8px 0;
        border-bottom: 1px solid #e2e8f0;
    }

    .mobile-nav-section-title[b-wr6hxw41hx] {
        padding: 12px 20px 8px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #94a3b8;
    }

    .mobile-nav-item[b-wr6hxw41hx] {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 20px;
        color: #475569;
        font-size: 15px;
        font-weight: 500;
        text-decoration: none;
        transition: background-color 0.15s ease;
        cursor: pointer;
    }

    .mobile-nav-item:hover[b-wr6hxw41hx],
    .mobile-nav-item:active[b-wr6hxw41hx] {
        background: #f8fafc;
    }

    .mobile-nav-item.active[b-wr6hxw41hx] {
        background: linear-gradient(90deg, #e0f2fe 0%, #f0f9ff 100%);
        color: var(--main-blue-dark, #3597CC);
        border-left: 3px solid var(--main-blue-dark, #3597CC);
    }

    .mobile-nav-item.active i[b-wr6hxw41hx] {
        color: var(--main-blue-dark, #3597CC);
    }

    .mobile-nav-item i[b-wr6hxw41hx] {
        width: 22px;
        text-align: center;
        color: #64748b;
        font-size: 16px;
    }

    /* Footer / Logout */
    .mobile-nav-footer[b-wr6hxw41hx] {
        margin-top: auto;
        padding: 8px 0 max(24px, env(safe-area-inset-bottom));
        border-top: 1px solid #e2e8f0;
    }

    .mobile-logout[b-wr6hxw41hx] {
        color: #dc2626 !important;
    }

    .mobile-logout i[b-wr6hxw41hx] {
        color: #dc2626 !important;
    }

    .mobile-logout:hover[b-wr6hxw41hx],
    .mobile-logout:active[b-wr6hxw41hx] {
        background: #fef2f2 !important;
    }

    /* Hide old nav-links on mobile */
    .nav > .nav-links[b-wr6hxw41hx] {
        display: none !important;
    }
}

/* ============================================================
   Small Mobile (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {
    .mobile-user-section[b-wr6hxw41hx] {
        padding: 16px;
    }

    .mobile-user-avatar[b-wr6hxw41hx] {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .mobile-nav-item[b-wr6hxw41hx] {
        padding: 12px 16px;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-9n9o30a6cj] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-9n9o30a6cj] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-9n9o30a6cj] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-9n9o30a6cj] {
    font-size: 1.1rem;
}

.bi[b-9n9o30a6cj] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-9n9o30a6cj] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-9n9o30a6cj] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-9n9o30a6cj] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-9n9o30a6cj] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-9n9o30a6cj] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-9n9o30a6cj] {
        padding-bottom: 1rem;
    }

    .nav-item[b-9n9o30a6cj]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-9n9o30a6cj]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-9n9o30a6cj]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-9n9o30a6cj] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-9n9o30a6cj] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-9n9o30a6cj] {
        display: none;
    }

    .nav-scrollable[b-9n9o30a6cj] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/SortableList.razor.rz.scp.css */
/* 
  you need the ::deep identifier if you are using scoped styles like this
  because scoped styles are only applied to markup in the component, not
  to the markup inside the render fragment.
*/

[b-mmk62ux6pk] .sortable-ghost {
  visibility: hidden;
}

[b-mmk62ux6pk] .sortable-fallback {
  opacity: 1 !important
}
/* /Components/Layout/ToastComponent.razor.rz.scp.css */
.e-toast-container .e-toast .e-toast-message .e-toast-content .e-toast-title[b-sx51hd74w7] {
    transition: background-color 0.3s ease;
}

.toast-blue[b-sx51hd74w7] {
    background-color: blue;
    color: white;
}

.toast-green[b-sx51hd74w7] {
    background-color: green;
    color: white;
}

.toast-red[b-sx51hd74w7] {
    background-color: red;
    color: white;
}
/* /Components/Pages/Billing.razor.rz.scp.css */
/* ============================
   Billing Page Layout
   Mirrors Route Sales scoped pattern (RouteSales.razor.css)
   ============================ */

/* ============================
   Navigation Sidebar (Desktop)
   ============================ */

.page-list[b-n0pbdb7x3x] {
    width: 260px;
    min-width: 260px;
    height: calc(100vh - 112px);
    display: flex;
    flex-direction: column;
    background: white;
    border-right: 1px solid var(--cp-border, #E5E7EB);
    padding: 24px 16px;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
}

.page-list h3[b-n0pbdb7x3x] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cp-dark, #1A1D2E);
    margin: 0 0 20px 8px;
    letter-spacing: -0.01em;
}

.page[b-n0pbdb7x3x] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--cp-text-secondary, #6B7280);
    cursor: pointer;
    transition: all 0.2s;
}

.page:hover[b-n0pbdb7x3x] {
    background: var(--cp-border-light, #F3F4F6);
    color: var(--cp-dark, #1A1D2E);
}

.page.selected[b-n0pbdb7x3x] {
    background: linear-gradient(135deg, rgba(59, 158, 255, 0.1), rgba(37, 99, 235, 0.1));
    color: var(--cp-primary, #3B9EFF);
    font-size: 0.95rem;
    font-weight: 600;
}

.page.selected:hover[b-n0pbdb7x3x] {
    background: linear-gradient(135deg, rgba(59, 158, 255, 0.15), rgba(37, 99, 235, 0.15));
    color: var(--cp-primary, #3B9EFF);
}

/* ============================
   Content Area (right pane)
   This is the gray scroll container that fills the entire right side
   ============================ */

.tab-container[b-n0pbdb7x3x] {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    height: calc(100vh - 112px);
    background: var(--cp-bg-page, #EEF2F6);
}

.grid-container[b-n0pbdb7x3x] {
    min-height: 100%;
}

/* ============================
   Responsive - Tablet
   ============================ */

@media (max-width: 1024px) {
    .page-list[b-n0pbdb7x3x] {
        width: 220px;
        min-width: 220px;
        padding: 20px 12px;
    }

    .page-list h3[b-n0pbdb7x3x] {
        font-size: 1rem;
        margin-bottom: 16px;
    }

    .page[b-n0pbdb7x3x] {
        padding: 10px 14px;
        font-size: 0.9rem;
    }
}

/* ============================
   Responsive - Mobile (Horizontal Tabs)
   ============================ */

@media (max-width: 768px) {
    .page-list[b-n0pbdb7x3x] {
        width: 100%;
        min-width: 100%;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 16px;
        border-right: none;
        border-bottom: 1px solid var(--cp-border, #E5E7EB);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        gap: 8px;
        flex-shrink: 0;
    }

    .page-list h3[b-n0pbdb7x3x] {
        width: 100%;
        font-size: 1.25rem;
        margin: 0 0 12px 0;
    }

    .page[b-n0pbdb7x3x] {
        flex-shrink: 0;
        padding: 10px 20px;
        border-radius: 50px;
        background: var(--cp-border-light, #F3F4F6);
        font-size: 0.9rem;
        gap: 8px;
    }

    .page:hover[b-n0pbdb7x3x] {
        background: var(--cp-border, #E5E7EB);
    }

    .page.selected[b-n0pbdb7x3x] {
        background: linear-gradient(135deg, #3B9EFF, #2563EB);
        color: white;
        box-shadow: 0 2px 8px rgba(59, 158, 255, 0.3);
    }

    .page.selected:hover[b-n0pbdb7x3x] {
        background: linear-gradient(135deg, #2563EB, #1D4ED8);
        color: white;
    }

    .tab-container[b-n0pbdb7x3x] {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        height: calc(100vh - 56px);
    }

    .grid-container[b-n0pbdb7x3x] {
        min-height: auto;
    }
}

/* ============================
   Responsive - Small Mobile
   ============================ */

@media (max-width: 480px) {
    .page-list[b-n0pbdb7x3x] {
        padding: 12px;
    }

    .page-list h3[b-n0pbdb7x3x] {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }

    .page[b-n0pbdb7x3x] {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
}
/* /Components/Pages/Communications.razor.rz.scp.css */
.page-list[b-3xstk3dkwn] {
    width: 300px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    vertical-align: bottom;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 15px;
    padding-left: 20px;
    padding-top: 20px;
}

.selected[b-3xstk3dkwn] {
    color: #6262e8;
    font-size: 20px;
    font-weight: 600 !important;
}

.page[b-3xstk3dkwn] {
    padding: 10px 8px;
}
.page:hover[b-3xstk3dkwn] {
    font-weight:bold;
}

/* /Components/Pages/CompanyInfo.razor.rz.scp.css */
/* ============================
   Company Info Page Layout
   ============================ */

.company-info-page[b-7pucx1a3uv] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 0 80px 0;
    max-width: 900px;
}

/* ============================
   Widget Card Styles
   ============================ */

.widget[b-7pucx1a3uv] {
    background: white;
    border: 1px solid var(--cp-border);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.widget-header[b-7pucx1a3uv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--cp-border-light);
    background: linear-gradient(135deg, #FAFBFC 0%, #F5F7FA 100%);
}

.widget-icon[b-7pucx1a3uv] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.widget-icon-blue[b-7pucx1a3uv] {
    background: linear-gradient(135deg, #3B9EFF, #2563EB);
    color: white;
    box-shadow: 0 4px 10px rgba(59, 158, 255, 0.3);
}

.widget-icon-teal[b-7pucx1a3uv] {
    background: linear-gradient(135deg, #14B8A6, #0D9488);
    color: white;
    box-shadow: 0 4px 10px rgba(20, 184, 166, 0.3);
}

.widget-icon-purple[b-7pucx1a3uv] {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    color: white;
    box-shadow: 0 4px 10px rgba(139, 92, 246, 0.3);
}

.widget-icon-amber[b-7pucx1a3uv] {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: white;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
}

.widget-title[b-7pucx1a3uv] {
    flex: 1;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cp-dark);
}

.widget-content[b-7pucx1a3uv] {
    padding: 1.5rem;
}

/* ============================
   Form Styles
   ============================ */

.form-grid[b-7pucx1a3uv] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.form-group[b-7pucx1a3uv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.full-width[b-7pucx1a3uv] {
    grid-column: span 12;
}

.form-group.span-6[b-7pucx1a3uv] {
    grid-column: span 6;
}

.form-group.span-4[b-7pucx1a3uv] {
    grid-column: span 4;
}

.form-group.span-3[b-7pucx1a3uv] {
    grid-column: span 3;
}

.form-group.span-2[b-7pucx1a3uv] {
    grid-column: span 2;
}

.form-label[b-7pucx1a3uv] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cp-text-secondary);
    margin: 0;
}

.form-label-row[b-7pucx1a3uv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.form-input[b-7pucx1a3uv] {
    padding: 10px 14px;
    font-size: 0.95rem;
    border: 1px solid var(--cp-border);
    border-radius: 8px;
    background: white;
    color: var(--cp-dark);
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.form-input:focus[b-7pucx1a3uv] {
    outline: none;
    border-color: var(--cp-primary);
    box-shadow: 0 0 0 3px rgba(59, 158, 255, 0.15);
}

.form-input[b-7pucx1a3uv]::placeholder {
    color: var(--cp-text-muted);
}

.form-section-divider[b-7pucx1a3uv] {
    height: 1px;
    background: var(--cp-border-light);
    margin: 20px 0;
}

/* ============================
   Button Styles
   ============================ */

.save-button[b-7pucx1a3uv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #10B981, #059669);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.save-button:hover[b-7pucx1a3uv] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.edit-button[b-7pucx1a3uv] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(59, 158, 255, 0.1);
    color: var(--cp-primary);
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.edit-button:hover[b-7pucx1a3uv] {
    background: rgba(59, 158, 255, 0.2);
}

.upload-button[b-7pucx1a3uv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--cp-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.upload-button:hover[b-7pucx1a3uv] {
    background: #2563EB;
    transform: translateY(-1px);
}

.change-logo-button[b-7pucx1a3uv] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: white;
    color: var(--cp-text-secondary);
    border: 1px solid var(--cp-border);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.change-logo-button:hover[b-7pucx1a3uv] {
    border-color: var(--cp-primary);
    color: var(--cp-primary);
}

/* ============================
   Industry Chips
   ============================ */

.industry-chips[b-7pucx1a3uv] {
    margin-top: 8px;
}

.industry-chips :deep(.e-chip-list)[b-7pucx1a3uv] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.industry-chips :deep(.e-chip)[b-7pucx1a3uv] {
    background: rgba(59, 158, 255, 0.1);
    color: var(--cp-primary);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* ============================
   Settings List
   ============================ */

.settings-list[b-7pucx1a3uv] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.setting-item[b-7pucx1a3uv] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: var(--cp-bg-page);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.setting-item:hover[b-7pucx1a3uv] {
    background: linear-gradient(135deg, #EBF5FF 0%, #E0F2FE 100%);
}

.setting-checkbox[b-7pucx1a3uv] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--cp-primary);
    cursor: pointer;
}

.setting-text[b-7pucx1a3uv] {
    font-size: 0.95rem;
    color: var(--cp-dark);
    line-height: 1.4;
}

/* ============================
   Service Windows
   ============================ */

.service-windows-container[b-7pucx1a3uv] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px;
    background: white;
    border: 1px dashed var(--cp-border);
    border-radius: 10px;
    margin-left: 30px;
}

.service-window-chip[b-7pucx1a3uv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #EBF5FF 0%, #E0F2FE 100%);
    border: 1px solid rgba(59, 158, 255, 0.2);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cp-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.service-window-chip:hover[b-7pucx1a3uv] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 158, 255, 0.2);
}

.service-window-chip i[b-7pucx1a3uv] {
    font-size: 0.85rem;
}

.add-window-button[b-7pucx1a3uv] {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px dashed var(--cp-border);
    border-radius: 8px;
    color: var(--cp-text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.add-window-button:hover[b-7pucx1a3uv] {
    border-color: var(--cp-primary);
    color: var(--cp-primary);
    background: rgba(59, 158, 255, 0.05);
}

/* ============================
   Integrations
   ============================ */

.integration-item[b-7pucx1a3uv] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.integration-info[b-7pucx1a3uv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.integration-name[b-7pucx1a3uv] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--cp-dark);
}

.integration-logo[b-7pucx1a3uv] {
    width: 24px;
    height: 24px;
    color: var(--cp-primary);
}

.integration-description[b-7pucx1a3uv] {
    font-size: 0.85rem;
    color: var(--cp-text-secondary);
    margin: 0;
}

.integration-field[b-7pucx1a3uv] {
    max-width: 400px;
}

/* ============================
   Logo Section
   ============================ */

.logo-section[b-7pucx1a3uv] {
    display: flex;
    justify-content: center;
}

.logo-empty-state[b-7pucx1a3uv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px;
    text-align: center;
}

.logo-placeholder[b-7pucx1a3uv] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cp-bg-page);
    border: 2px dashed var(--cp-border);
    border-radius: 12px;
    color: var(--cp-text-muted);
    font-size: 2rem;
}

.logo-empty-text[b-7pucx1a3uv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.logo-empty-text p[b-7pucx1a3uv] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--cp-dark);
}

.logo-empty-text span[b-7pucx1a3uv] {
    font-size: 0.85rem;
    color: var(--cp-text-secondary);
}

.logo-preview-container[b-7pucx1a3uv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.logo-preview[b-7pucx1a3uv] {
    padding: 16px;
    background: var(--cp-bg-page);
    border: 1px solid var(--cp-border);
    border-radius: 12px;
}

.logo-image[b-7pucx1a3uv] {
    max-width: 300px;
    max-height: 150px;
    object-fit: contain;
}

/* ============================
   Dialog Styles (for industry selection)
   ============================ */

.industry-box[b-7pucx1a3uv] {
    width: 280px;
    padding: 12px 16px;
    border-radius: 10px;
    background: white;
    border: 1px solid var(--cp-border);
    cursor: pointer;
    transition: all 0.2s;
}

.industry-box:hover[b-7pucx1a3uv] {
    border-color: var(--cp-primary);
    background: rgba(59, 158, 255, 0.05);
}

.industry-box:active[b-7pucx1a3uv] {
    transform: scale(0.98);
}

.industry-selected[b-7pucx1a3uv] {
    background: linear-gradient(135deg, #3B9EFF, #2563EB);
    color: white;
    border-color: transparent;
}

.industry-selected:hover[b-7pucx1a3uv] {
    background: linear-gradient(135deg, #2563EB, #1D4ED8);
}

.flex-group[b-7pucx1a3uv] {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 0;
}

.save-row[b-7pucx1a3uv] {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
}

/* ============================
   Dialog Preserved Styles
   ============================ */

.preview[b-7pucx1a3uv] {
    display: flex;
    align-items: center;
}

.attachmentview[b-7pucx1a3uv] {
    width: 480px !important;
    border-radius: 8px;
}

.image-row[b-7pucx1a3uv] {
    margin-top: 16px;
}

.action-button[b-7pucx1a3uv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--cp-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.action-button:hover[b-7pucx1a3uv] {
    background: #2563EB;
}

.margin-above[b-7pucx1a3uv] {
    margin-top: 16px;
}

.margin-below[b-7pucx1a3uv] {
    margin-bottom: 16px;
}

.text-label[b-7pucx1a3uv] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cp-text-secondary);
}

.clear-padding[b-7pucx1a3uv] {
    padding: 0;
}

/* ============================
   Responsive Design
   ============================ */

@media (max-width: 768px) {
    .company-info-page[b-7pucx1a3uv] {
        gap: 16px;
        padding: 16px 0;
    }

    .widget-header[b-7pucx1a3uv] {
        flex-wrap: wrap;
        gap: 10px;
        padding: 1rem;
    }

    .widget-content[b-7pucx1a3uv] {
        padding: 1rem;
    }

    .form-grid[b-7pucx1a3uv] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .form-group.full-width[b-7pucx1a3uv],
    .form-group.span-6[b-7pucx1a3uv],
    .form-group.span-4[b-7pucx1a3uv],
    .form-group.span-3[b-7pucx1a3uv],
    .form-group.span-2[b-7pucx1a3uv] {
        grid-column: span 1;
    }

    .save-button[b-7pucx1a3uv] {
        width: 100%;
        justify-content: center;
        margin-top: 8px;
    }

    .service-windows-container[b-7pucx1a3uv] {
        margin-left: 0;
    }

    .logo-image[b-7pucx1a3uv] {
        max-width: 200px;
    }
}
/* /Components/Pages/CompanyMessages.razor.rz.scp.css */
.non-greyed:disabled[b-76plnb12tg] {
    background-color: #fff !important; /* White background */
    color: #000 !important; /* Black text color */
    cursor: default; /* Normal cursor */
    opacity: 1 !important; /* Remove greying effect */
    border: 1px solid #ced4da; /* Standard input border */
}

.align-right[b-76plnb12tg] {
    float: right; /* Moves the element to the right */
    text-align: right; /* Aligns the text to the right within the element */
}

.message-view[b-76plnb12tg] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    font-size: 14px;
    background-color: violet;
}

.message-content[b-76plnb12tg] {
    white-space: pre-wrap;
    line-height: 1.5;
}

.form-label[b-76plnb12tg] {
    font-weight: bold;
}

.row[b-76plnb12tg] {
    margin-bottom: 1rem;
}



.home-section[b-76plnb12tg] {
    display: flex;
    width: 100%;
}

.home-list[b-76plnb12tg] {
    width: 100%;
}

.home-header[b-76plnb12tg] {
    width: 25%;
}

.home-values[b-76plnb12tg] {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    align-content: flex-start;
}



.messages-section[b-76plnb12tg] {
    display: flex;
    width: 100%;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 12px;
    background: var(--White, white);
    align-items: stretch;
    box-shadow: 2px 2px lightgray;
}

.message-card[b-76plnb12tg] {
    width: 100%;
    /*background-color: var(--grey-g-10);*/
    align-items: stretch;
    border-radius: 4px;
}

.message-date[b-76plnb12tg] {
    font-size: 14px;
}

.message-subject[b-76plnb12tg] {
    font-size: 20px;
    font-weight: 600;
}

.message-value[b-76plnb12tg] {
    margin-top: 10px;
    font-size: 18px;
}

.message-detail[b-76plnb12tg] {
    margin-left: 10px;
}

.message-divider[b-76plnb12tg] {
    border: none;
    border-top: 1px solid gray;
    margin: 10px 0;
}
/* /Components/Pages/ConfigEmailTemplates.razor.rz.scp.css */
/* /Components/Pages/ConfigInvoicing.razor.rz.scp.css */
.settings-card[b-hk2du2tdg5] {
    margin-left: 20px;
    max-width: 650px;
    background: #fff;
    padding: 25px;
    border-radius: 12px;
}

.header-row[b-hk2du2tdg5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.icon-button[b-hk2du2tdg5] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: #004aad;
}

.view-row[b-hk2du2tdg5] {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.preview-box[b-hk2du2tdg5] {
    background: #f5f8ff;
    padding: 12px 15px;
    border-radius: 8px;
    margin: 15px 0px;
}

.form-check[b-hk2du2tdg5] {
    margin-top: 10px;
}

.preview-value[b-hk2du2tdg5] {
    font-weight: 600;
    margin-left: 10px;
    color: #004aad;
}

.button-row button[b-hk2du2tdg5] {
    margin-right: 10px;
}

.form-group[b-hk2du2tdg5] {
    margin-top: 10px;
}
/* /Components/Pages/Configuration.razor.rz.scp.css */
.inline-input-group[b-umzpx1edfl] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.threshold-input[b-umzpx1edfl] {
    width: 80px;
    text-align: center;
}

.input-error[b-umzpx1edfl] {
    border-color: #dc3545 !important;
}

.error-message[b-umzpx1edfl] {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.muted-text span[b-umzpx1edfl] {
    color: #6c757d;
    font-size: 0.875rem;
}

.mt20[b-umzpx1edfl] {
    margin-top: 20px;
}

.mb15[b-umzpx1edfl] {
    margin-bottom: 15px;
}

.success-message[b-umzpx1edfl] {
    color: #198754;
    background-color: #d1e7dd;
    border: 1px solid #badbcc;
    padding: 12px 16px;
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.success-message i[b-umzpx1edfl] {
    font-size: 1.1rem;
}

.vehicle-count[b-umzpx1edfl] {
    margin-left: 8px;
    color: #0f5132;
    font-weight: 500;
}

.help-text[b-umzpx1edfl] {
    color: #6c757d;
    font-size: 0.8rem;
    margin-top: 4px;
}

.help-link[b-umzpx1edfl] {
    width: 100%;
    margin-top: 8px;
}

.help-link a[b-umzpx1edfl] {
    color: #dc3545;
    font-size: 0.875rem;
}

.checkbox-label[b-umzpx1edfl] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-umzpx1edfl] {
    width: 18px;
    height: 18px;
}

.cp-badge[b-umzpx1edfl] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

.cp-badge-success[b-umzpx1edfl] {
    background-color: #d1e7dd;
    color: #0f5132;
}

.cp-badge-gray[b-umzpx1edfl] {
    background-color: #e9ecef;
    color: #6c757d;
}

.cp-badge-warning[b-umzpx1edfl] {
    background-color: #fff3cd;
    color: #856404;
}

/* Bottom spacing for scroll clearance */
.space-above:last-child[b-umzpx1edfl] {
    margin-bottom: 80px;
}
/* /Components/Pages/CreateProfile.razor.rz.scp.css */
.submit-section[b-4u97qkg7yv] {
    margin-bottom: 100px;
}
/* /Components/Pages/CreateProfileInfo.razor.rz.scp.css */
/* Page container */



.onboarding-page[b-x8gto9f7uy] {
    position: fixed;
    inset: 64px 0 0 0; /* below navbar */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px 16px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
}

/* Card */
.onboarding-card[b-x8gto9f7uy] {
    max-height: none !important;
    width: 100%;
    max-width: 760px;
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,.15);
}

/* Header */
.onboarding-header h1[b-x8gto9f7uy] {
    font-size: 1.8rem;
    margin-bottom: 6px;
}

.onboarding-header p[b-x8gto9f7uy] {
    color: #6b7280;
    margin-bottom: 24px;
}

/* Sections */
.form-section[b-x8gto9f7uy] {
    margin-bottom: 28px;
}

    .form-section h2[b-x8gto9f7uy] {
        font-size: 1.1rem;
        margin-bottom: 12px;
    }

/* Form */
.form-group[b-x8gto9f7uy] {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

    .form-group label[b-x8gto9f7uy] {
        font-weight: 500;
        margin-bottom: 6px;
    }

/* Grid */
.form-grid[b-x8gto9f7uy] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

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

/* Inputs */
.input[b-x8gto9f7uy] {
    height: 44px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    padding: 0 12px;
    font-size: 1rem;
}

/* Chips */
.chip-grid[b-x8gto9f7uy] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.chip[b-x8gto9f7uy] {
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    cursor: pointer;
    font-size: .95rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .chip.selected[b-x8gto9f7uy] {
        background: #4f46e5;
        color: #fff;
        border-color: #4f46e5;
    }

.check-icon[b-x8gto9f7uy] {
    font-size: 1.1rem;
    font-weight: bold;
}

/* Submit */
.submit-row[b-x8gto9f7uy] {
    margin-top: 32px;
}

.primary-button[b-x8gto9f7uy] {
    width: 100%;
    height: 48px;
    border-radius: 10px;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
}

/* Tablet+ */
@media (min-width: 768px) {
    .onboarding-page[b-x8gto9f7uy] {
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

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

    .primary-button[b-x8gto9f7uy] {
        width: auto;
        padding: 0 32px;
    }

    .submit-row[b-x8gto9f7uy] {
        text-align: right;
    }
}
/* /Components/Pages/Customer.razor.rz.scp.css */
/* Page Container - Max width for large screens */
[b-l1zzad95fy] .dashboard-page {
    max-width: 1400px;
    margin: 0 auto;
}

/* Back Navigation */
.back-nav[b-l1zzad95fy] {
    margin-bottom: 16px;
}

.back-link[b-l1zzad95fy] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--cp-text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 8px 0;
    transition: color 0.15s ease;
}

.back-link:hover[b-l1zzad95fy] {
    color: var(--cp-primary);
}

.back-link i[b-l1zzad95fy] {
    font-size: 0.85rem;
}

/* Customer Header Card */
.customer-header[b-l1zzad95fy] {
    margin-bottom: 24px;
    padding: 24px;
}

.customer-header-top[b-l1zzad95fy] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.customer-header-info[b-l1zzad95fy] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.customer-header-details[b-l1zzad95fy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.customer-header .customer-name[b-l1zzad95fy] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cp-dark);
    margin: 0;
}

.customer-meta[b-l1zzad95fy] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.meta-item[b-l1zzad95fy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--cp-text-secondary);
}

.meta-item i[b-l1zzad95fy] {
    color: var(--cp-text-muted);
    font-size: 0.8rem;
}

.customer-since[b-l1zzad95fy] {
    font-size: 0.85rem;
    color: var(--cp-text-muted);
    margin-top: 4px;
}

.customer-header-actions[b-l1zzad95fy] {
    flex-shrink: 0;
}

/* Customer Edit Form */
.customer-edit-form[b-l1zzad95fy] {
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid var(--cp-border-light);
}

/* Customer Stats */
.customer-header-stats[b-l1zzad95fy] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid var(--cp-border-light);
}

/* Quick Actions */
.quick-actions[b-l1zzad95fy] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.quick-actions .cp-btn span[b-l1zzad95fy] {
    margin-left: 4px;
}

/* Sites Section */
.cp-section[b-l1zzad95fy] {
    background: var(--cp-bg-card);
    border: 1px solid var(--cp-border);
    border-radius: 16px;
    margin-bottom: 24px;
    overflow: hidden;
}

.cp-section-header[b-l1zzad95fy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(180deg, #FAFBFC 0%, #F5F7F9 100%);
    border-bottom: 1px solid var(--cp-border-light);
    flex-wrap: wrap;
    gap: 12px;
}

.section-header-left[b-l1zzad95fy] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cp-section-icon[b-l1zzad95fy] {
    color: var(--cp-primary);
    font-size: 1rem;
}

.cp-section-title[b-l1zzad95fy] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cp-dark);
}

.cp-section-count[b-l1zzad95fy] {
    font-size: 0.85rem;
    color: var(--cp-text-muted);
}

.section-header-right[b-l1zzad95fy] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-search[b-l1zzad95fy] {
    max-width: 200px;
}

.site-search .cp-search-input[b-l1zzad95fy] {
    padding: 8px 12px 8px 36px;
    font-size: 0.85rem;
}

.cp-section-content[b-l1zzad95fy] {
    padding: 20px;
}

/* Site Cards Grid */
.site-cards[b-l1zzad95fy] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.site-card[b-l1zzad95fy] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
}

.site-icon[b-l1zzad95fy] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cp-primary-light);
    border-radius: 8px;
    color: var(--cp-primary);
    flex-shrink: 0;
}

.site-info[b-l1zzad95fy] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.site-name[b-l1zzad95fy] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cp-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-address[b-l1zzad95fy] {
    font-size: 0.85rem;
    color: var(--cp-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-city[b-l1zzad95fy] {
    font-size: 0.8rem;
    color: var(--cp-text-muted);
}

/* Widget Row */
.widget-row[b-l1zzad95fy] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 24px;
}

.widget-row .widget[b-l1zzad95fy] {
    flex: 1 1 350px;
    min-width: 300px;
}

/* Empty States */
.empty-state[b-l1zzad95fy] {
    text-align: center;
    padding: 32px 24px;
    color: var(--cp-text-secondary);
}

.empty-state i[b-l1zzad95fy] {
    font-size: 2rem;
    margin-bottom: 12px;
    opacity: 0.4;
    display: block;
}

.empty-state p[b-l1zzad95fy] {
    font-size: 0.9rem;
    margin: 0;
}

.empty-state-small[b-l1zzad95fy] {
    text-align: center;
    padding: 24px 16px;
    color: var(--cp-text-muted);
}

.empty-state-small p[b-l1zzad95fy] {
    font-size: 0.85rem;
    margin: 0;
}

/* Loading Container */
.loading-container[b-l1zzad95fy] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

/* New Customer Form */
.new-customer-card[b-l1zzad95fy] {
    padding: 24px;
    max-width: 800px;
}

.new-customer-card .section-title[b-l1zzad95fy] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--cp-dark);
    margin: 0 0 24px 0;
}

/* Form Styles */
.form-grid[b-l1zzad95fy] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.form-grid-3[b-l1zzad95fy] {
    grid-template-columns: repeat(3, 1fr);
}

.form-group[b-l1zzad95fy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-actions[b-l1zzad95fy] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

/* Dialog Styles */
.dialog-content[b-l1zzad95fy] {
    padding: 8px;
}

.dialog-content .form-grid[b-l1zzad95fy] {
    margin-bottom: 16px;
}

/* Mapbox autofill z-index fix */
div[class$="--Results"][b-l1zzad95fy] {
    z-index: 10000 !important;
    position: relative !important;
}

/* Responsive - Tablet */
@media (max-width: 1200px) {
    .customer-header-stats[b-l1zzad95fy] {
        grid-template-columns: repeat(2, 1fr);
    }

    .site-cards[b-l1zzad95fy] {
        grid-template-columns: repeat(2, 1fr);
    }

    .widget-row .widget[b-l1zzad95fy] {
        flex: 1 1 100%;
    }
}

/* Responsive - Mobile */
@media (max-width: 575px) {
    .customer-header[b-l1zzad95fy] {
        padding: 16px;
    }

    .customer-header-top[b-l1zzad95fy] {
        flex-direction: column;
    }

    .customer-header-info[b-l1zzad95fy] {
        flex-direction: column;
        align-items: flex-start;
    }

    .customer-header .customer-name[b-l1zzad95fy] {
        font-size: 1.25rem;
    }

    .customer-meta[b-l1zzad95fy] {
        flex-direction: column;
        gap: 8px;
    }

    .customer-header-actions[b-l1zzad95fy] {
        width: 100%;
    }

    .customer-header-actions .cp-btn[b-l1zzad95fy] {
        width: 100%;
        justify-content: center;
    }

    .customer-header-stats[b-l1zzad95fy] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .quick-actions[b-l1zzad95fy] {
        flex-direction: column;
    }

    .quick-actions .cp-btn[b-l1zzad95fy] {
        width: 100%;
        justify-content: center;
    }

    .cp-section-header[b-l1zzad95fy] {
        flex-direction: column;
        align-items: stretch;
    }

    .section-header-right[b-l1zzad95fy] {
        flex-direction: column;
        width: 100%;
    }

    .site-search[b-l1zzad95fy] {
        max-width: 100%;
        width: 100%;
    }

    .site-cards[b-l1zzad95fy] {
        grid-template-columns: 1fr;
    }

    .form-grid[b-l1zzad95fy],
    .form-grid-3[b-l1zzad95fy] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Customers.razor.rz.scp.css */
/* Page Container - Max width for large screens */
[b-t6t87rm10g] .dashboard-page {
    max-width: 1400px;
    margin: 20px auto;
}

/* Page Header */
.page-header[b-t6t87rm10g] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.header-left[b-t6t87rm10g] {
    flex: 1;
    min-width: 200px;
}

.page-title[b-t6t87rm10g] {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--cp-dark);
    margin: 0 0 4px 0;
    letter-spacing: -0.02em;
}

.page-subtitle[b-t6t87rm10g] {
    font-size: 0.95rem;
    color: var(--cp-text-secondary);
    margin: 0;
}

.header-right[b-t6t87rm10g] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Quick Stats Row */
.quick-stats[b-t6t87rm10g] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

/* Search/Filter Bar */
.search-filter-bar[b-t6t87rm10g] {
    margin-bottom: 8px;
}

.search-filter-bar .cp-search-box[b-t6t87rm10g] {
    max-width: 400px;
}

/* Top Pagination Controls */
.pagination-controls-top[b-t6t87rm10g] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 4px 0 !important;
    border-top: none !important;
    border-bottom: none !important;
}

/* Desktop/Mobile Visibility */
.desktop-only[b-t6t87rm10g] {
    display: block !important;
}

.mobile-only[b-t6t87rm10g] {
    display: none !important;
}

/* Customers Grid Card */
.customers-grid-card[b-t6t87rm10g] {
    padding: 0;
    overflow: hidden;
}

/* Syncfusion Grid Styling Overrides */
[b-t6t87rm10g] .e-grid {
    border: none !important;
    font-family: inherit;
}

[b-t6t87rm10g] .e-grid .e-gridheader {
    background: linear-gradient(180deg, #FAFBFC 0%, #F5F7F9 100%);
    border-bottom: 1px solid var(--cp-border);
}

[b-t6t87rm10g] .e-grid .e-headercell {
    background: transparent;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--cp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px 12px;
}

[b-t6t87rm10g] .e-grid .e-rowcell {
    padding: 14px 12px;
    font-size: 0.9rem;
    color: var(--cp-text);
    border-bottom: 1px solid var(--cp-border-light);
}

[b-t6t87rm10g] .e-grid .e-row:hover .e-rowcell {
    background: var(--cp-primary-light) !important;
    cursor: pointer;
}

[b-t6t87rm10g] .e-grid .e-row.e-altrow .e-rowcell {
    background: #FAFBFC;
}

[b-t6t87rm10g] .e-grid .e-row.e-altrow:hover .e-rowcell {
    background: var(--cp-primary-light) !important;
}

/* Customer Cards Grid (Mobile) */
.customer-cards[b-t6t87rm10g] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.customer-card[b-t6t87rm10g] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}

.customer-card-header[b-t6t87rm10g] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.customer-card-info[b-t6t87rm10g] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.customer-card-name-section[b-t6t87rm10g] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.customer-name[b-t6t87rm10g] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cp-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-address[b-t6t87rm10g] {
    font-size: 0.85rem;
    color: var(--cp-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-card-balance[b-t6t87rm10g] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.balance-amount[b-t6t87rm10g] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cp-text-secondary);
}

.balance-amount.has-balance[b-t6t87rm10g] {
    color: var(--cp-warning);
}

/* Customer Card Details */
.customer-card-details[b-t6t87rm10g] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--cp-border-light);
}

.customer-detail[b-t6t87rm10g] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--cp-text-secondary);
}

.customer-detail i[b-t6t87rm10g] {
    font-size: 0.75rem;
    color: var(--cp-text-muted);
}

/* Empty State */
.empty-state[b-t6t87rm10g] {
    text-align: center;
    padding: 48px 24px;
    color: var(--cp-text-secondary);
}

.empty-state i[b-t6t87rm10g] {
    font-size: 2.5rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p[b-t6t87rm10g] {
    font-size: 0.95rem;
    margin: 0;
}

/* Loading Container */
.loading-container[b-t6t87rm10g] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

/* Pagination Controls */
.pagination-controls[b-t6t87rm10g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    margin-top: 16px;
    margin-bottom: 120px;
    border-top: 1px solid var(--cp-border-light);
    flex-wrap: wrap;
    gap: 12px;
}

.pagination-info[b-t6t87rm10g] {
    font-size: 0.875rem;
    color: var(--cp-text-secondary);
}

.pagination-buttons[b-t6t87rm10g] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-current[b-t6t87rm10g] {
    font-size: 0.875rem;
    color: var(--cp-text);
    padding: 0 12px;
}

.pagination-size[b-t6t87rm10g] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-size label[b-t6t87rm10g] {
    font-size: 0.875rem;
    color: var(--cp-text-secondary);
}

.pagination-size .cp-select-sm[b-t6t87rm10g] {
    padding: 4px 8px;
    font-size: 0.875rem;
    min-width: 60px;
}

/* Responsive - Tablet */
@media (max-width: 1200px) {
    .quick-stats[b-t6t87rm10g] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive - Switch to cards on mobile */
@media (max-width: 768px) {
    .desktop-only[b-t6t87rm10g] {
        display: none !important;
    }

    .mobile-only[b-t6t87rm10g] {
        display: grid !important;
    }

    .customer-cards[b-t6t87rm10g] {
        grid-template-columns: 1fr;
    }
}

/* Responsive - Mobile */
@media (max-width: 575px) {
    .page-header[b-t6t87rm10g] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-right[b-t6t87rm10g] {
        justify-content: flex-end;
    }

    .page-title[b-t6t87rm10g] {
        font-size: 1.5rem;
    }

    .quick-stats[b-t6t87rm10g] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .search-filter-bar .cp-search-box[b-t6t87rm10g] {
        max-width: 100%;
    }

    .customer-card[b-t6t87rm10g] {
        padding: 16px;
    }

    .customer-card-header[b-t6t87rm10g] {
        flex-direction: column;
        gap: 12px;
    }

    .customer-card-balance[b-t6t87rm10g] {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }

    .customer-card-details[b-t6t87rm10g] {
        gap: 12px;
    }

    .btn-text[b-t6t87rm10g] {
        display: none;
    }

    .pagination-controls[b-t6t87rm10g] {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .pagination-buttons[b-t6t87rm10g] {
        justify-content: center;
    }

    .pagination-size[b-t6t87rm10g] {
        justify-content: center;
    }
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
body[b-70s4go0iuf] {
}
/* /Components/Pages/Fleet.razor.rz.scp.css */
/* ============================
   Fleet Page Layout
   ============================ */

/* ============================
   Navigation Sidebar (Desktop)
   ============================ */

.fleet-nav[b-bi3m8vqvxj] {
    width: 260px;
    min-width: 260px;
    height: calc(100vh - 112px);
    display: flex;
    flex-direction: column;
    background: white;
    border-right: 1px solid var(--cp-border, #E5E7EB);
    padding: 24px 16px;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
}

.nav-title[b-bi3m8vqvxj] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cp-dark, #1A1D2E);
    margin: 0 0 20px 8px;
    letter-spacing: -0.01em;
}

.nav-items[b-bi3m8vqvxj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-item[b-bi3m8vqvxj] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--cp-text-secondary, #6B7280);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.nav-item:hover[b-bi3m8vqvxj] {
    background: var(--cp-border-light, #F3F4F6);
    color: var(--cp-dark, #1A1D2E);
}

.nav-item i[b-bi3m8vqvxj] {
    width: 20px;
    text-align: center;
    font-size: 1rem;
}

.nav-item-active[b-bi3m8vqvxj] {
    background: linear-gradient(135deg, rgba(59, 158, 255, 0.1), rgba(37, 99, 235, 0.1));
    color: var(--cp-primary, #3B9EFF);
    font-weight: 600;
}

.nav-item-active:hover[b-bi3m8vqvxj] {
    background: linear-gradient(135deg, rgba(59, 158, 255, 0.15), rgba(37, 99, 235, 0.15));
    color: var(--cp-primary, #3B9EFF);
}

.nav-item-active i[b-bi3m8vqvxj] {
    color: var(--cp-primary, #3B9EFF);
}

/* ============================
   Content Area
   ============================ */

.fleet-content[b-bi3m8vqvxj] {
    padding: 24px;
    width: 100%;
    max-width: 1200px;
}

/* ============================
   Fleet Summary Section
   ============================ */

.fleet-summary-section[b-bi3m8vqvxj] {
    margin-bottom: 24px;
}

.summary-cards[b-bi3m8vqvxj] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.summary-card[b-bi3m8vqvxj] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: white;
    border: 1px solid var(--cp-border, #E5E7EB);
    border-radius: 12px;
    padding: 16px 20px;
    min-width: 160px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.summary-icon[b-bi3m8vqvxj] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--cp-border-light, #F3F4F6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--cp-text-secondary, #6B7280);
    flex-shrink: 0;
}

.summary-content[b-bi3m8vqvxj] {
    display: flex;
    flex-direction: column;
}

.summary-value[b-bi3m8vqvxj] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cp-dark, #1A1D2E);
    line-height: 1.2;
}

.summary-suffix[b-bi3m8vqvxj] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--cp-text-secondary, #6B7280);
}

.summary-label[b-bi3m8vqvxj] {
    font-size: 0.85rem;
    color: var(--cp-text-secondary, #6B7280);
    font-weight: 500;
}

/* Summary card variants */
.summary-card-primary .summary-icon[b-bi3m8vqvxj] {
    background: linear-gradient(135deg, rgba(59, 158, 255, 0.15), rgba(37, 99, 235, 0.15));
    color: var(--cp-primary, #3B9EFF);
}

.summary-card-primary .summary-value[b-bi3m8vqvxj] {
    color: var(--cp-primary, #3B9EFF);
}

.summary-card-success .summary-icon[b-bi3m8vqvxj] {
    background: rgba(34, 197, 94, 0.15);
    color: #22C55E;
}

.summary-card-success .summary-value[b-bi3m8vqvxj] {
    color: #16A34A;
}

.summary-card-warning .summary-icon[b-bi3m8vqvxj] {
    background: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
}

.summary-card-warning .summary-value[b-bi3m8vqvxj] {
    color: #D97706;
}

/* ============================
   Responsive - Tablet
   ============================ */

@media (max-width: 1024px) {
    .fleet-nav[b-bi3m8vqvxj] {
        width: 220px;
        min-width: 220px;
        padding: 20px 12px;
    }

    .nav-title[b-bi3m8vqvxj] {
        font-size: 1rem;
        margin-bottom: 16px;
    }

    .nav-item[b-bi3m8vqvxj] {
        padding: 10px 14px;
        font-size: 0.9rem;
    }

    .fleet-content[b-bi3m8vqvxj] {
        padding: 20px;
    }
}

/* ============================
   Responsive - Mobile (Horizontal Tabs)
   ============================ */

@media (max-width: 768px) {
    .fleet-nav[b-bi3m8vqvxj] {
        width: 100%;
        min-width: 100%;
        height: auto;
        flex-direction: column;
        padding: 16px;
        border-right: none;
        border-bottom: 1px solid var(--cp-border, #E5E7EB);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .nav-title[b-bi3m8vqvxj] {
        font-size: 1.25rem;
        margin: 0 0 12px 0;
    }

    .nav-items[b-bi3m8vqvxj] {
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .nav-items[b-bi3m8vqvxj]::-webkit-scrollbar {
        display: none;
    }

    .nav-item[b-bi3m8vqvxj] {
        flex-shrink: 0;
        padding: 10px 20px;
        border-radius: 50px;
        background: var(--cp-border-light, #F3F4F6);
        font-size: 0.9rem;
        gap: 8px;
    }

    .nav-item:hover[b-bi3m8vqvxj] {
        background: var(--cp-border, #E5E7EB);
    }

    .nav-item-active[b-bi3m8vqvxj] {
        background: linear-gradient(135deg, #3B9EFF, #2563EB);
        color: white;
        box-shadow: 0 2px 8px rgba(59, 158, 255, 0.3);
    }

    .nav-item-active:hover[b-bi3m8vqvxj] {
        background: linear-gradient(135deg, #2563EB, #1D4ED8);
        color: white;
    }

    .nav-item-active i[b-bi3m8vqvxj] {
        color: white;
    }

    .fleet-content[b-bi3m8vqvxj] {
        padding: 16px;
    }

    /* Stack layout vertically on mobile */
    .page-container[b-bi3m8vqvxj] {
        flex-direction: column;
    }
}

/* ============================
   Responsive - Small Mobile
   ============================ */

@media (max-width: 480px) {
    .fleet-nav[b-bi3m8vqvxj] {
        padding: 12px;
    }

    .nav-title[b-bi3m8vqvxj] {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }

    .nav-item[b-bi3m8vqvxj] {
        padding: 8px 16px;
        font-size: 0.85rem;
    }

    .fleet-content[b-bi3m8vqvxj] {
        padding: 12px;
    }
}
/* /Components/Pages/GettingStarted.razor.rz.scp.css */
/* Root container */
.gs-container[b-x7v5yl53s7] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 135deg, #0f172a, #020617 );
    padding: 1.5rem;
}

/* Card */
.gs-card[b-x7v5yl53s7] {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: 16px;
    padding: 2rem 1.75rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

/* Header */
.gs-header h1[b-x7v5yl53s7] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.5rem;
}

.gs-header p[b-x7v5yl53s7] {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.4;
    margin-bottom: 1.75rem;
}

/* Form */
.gs-form[b-x7v5yl53s7] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gs-field label[b-x7v5yl53s7] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.25rem;
}

.gs-input[b-x7v5yl53s7] {
    display:block;
    width: 100%;
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    border: 1px solid #cbd5f5;
    font-size: 1rem;
    outline: none;
}

    .gs-input:focus[b-x7v5yl53s7] {
        border-color: #6366f1;
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
    }

/* Button */
.gs-button[b-x7v5yl53s7] {
    width: 100%;
    margin-top: 0.5rem;
    background: linear-gradient( 135deg, #6366f1, #4f46e5 );
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 0.85rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 30px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .gs-button:hover:not(:disabled)[b-x7v5yl53s7] {
        transform: translateY(-1px);
        box-shadow: 0 10px 25px rgba(79, 70, 229, 0.4);
    }

    .gs-button:disabled[b-x7v5yl53s7] {
        opacity: 0.7;
        cursor: default;
    }

/* Validation + errors */
.gs-validation[b-x7v5yl53s7] {
    font-size: 0.8rem;
    color: #dc2626;
}

.gs-error[b-x7v5yl53s7] {
    margin-top: 1rem;
    padding: 0.75rem;
    background: #fee2e2;
    border-radius: 10px;
    color: #991b1b;
    font-size: 0.85rem;
}

/* Footer */
.gs-footer[b-x7v5yl53s7] {
    margin-top: 1.5rem;
    font-size: 0.8rem;
    color: #64748b;
    text-align: center;
}

    .gs-footer a[b-x7v5yl53s7] {
        color: #4f46e5;
        font-weight: 600;
        text-decoration: none;
    }

        .gs-footer a:hover[b-x7v5yl53s7] {
            text-decoration: underline;
        }
.signin a:hover[b-x7v5yl53s7] {
    color: blue;
    text-decoration: underline;
}
/* Desktop enhancement */
@media (min-width: 768px) {
    .gs-card[b-x7v5yl53s7] {
        padding: 2.5rem 2.25rem;
    }

    .gs-header h1[b-x7v5yl53s7] {
        font-size: 2rem;
    }
}
/* /Components/Pages/GettingStartedApp.razor.rz.scp.css */
/* Root container */
.gs-container[b-uffc323k1l] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 135deg, #0f172a, #020617 );
    padding: 1.5rem;
}

/* Card */
.gs-card[b-uffc323k1l] {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: 16px;
    padding: 2rem 1.75rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

/* Header */
.gs-header h1[b-uffc323k1l] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.5rem;
}

.gs-header p[b-uffc323k1l] {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.4;
    margin-bottom: 1.75rem;
}

/* Form */
.gs-form[b-uffc323k1l] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gs-field label[b-uffc323k1l] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.25rem;
}

.gs-input[b-uffc323k1l] {
    display: block;
    width: 100%;
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    border: 1px solid #cbd5f5;
    font-size: 1rem;
    outline: none;
}

    .gs-input:focus[b-uffc323k1l] {
        border-color: #6366f1;
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
    }

/* Button */
.gs-button[b-uffc323k1l] {
    width: 100%;
    margin-top: 0.5rem;
    background: linear-gradient( 135deg, #6366f1, #4f46e5 );
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 0.85rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 30px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .gs-button:hover:not(:disabled)[b-uffc323k1l] {
        transform: translateY(-1px);
        box-shadow: 0 10px 25px rgba(79, 70, 229, 0.4);
    }

    .gs-button:disabled[b-uffc323k1l] {
        opacity: 0.7;
        cursor: default;
    }

/* Validation + errors */
.gs-validation[b-uffc323k1l] {
    font-size: 0.8rem;
    color: #dc2626;
}

.gs-error[b-uffc323k1l] {
    margin-top: 1rem;
    padding: 0.75rem;
    background: #fee2e2;
    border-radius: 10px;
    color: #991b1b;
    font-size: 0.85rem;
}

/* Footer */
.gs-footer[b-uffc323k1l] {
    margin-top: 1.5rem;
    font-size: 0.8rem;
    color: #64748b;
    text-align: center;
}

    .gs-footer a[b-uffc323k1l] {
        color: #4f46e5;
        font-weight: 600;
        text-decoration: none;
    }

        .gs-footer a:hover[b-uffc323k1l] {
            text-decoration: underline;
        }

.signin a:hover[b-uffc323k1l] {
    color: blue;
    text-decoration: underline;
}
/* Desktop enhancement */
@media (min-width: 768px) {
    .gs-card[b-uffc323k1l] {
        padding: 2.5rem 2.25rem;
    }

    .gs-header h1[b-uffc323k1l] {
        font-size: 2rem;
    }
}
/* /Components/Pages/GettingStartedCore.razor.rz.scp.css */

/* ============================
   Getting Started – Core Card (Blue Theme)
   ============================ */

.gs-card[b-08czmznyav] {
    border: 1px solid var(--cp-border);
    border-radius: 16px;
    padding: 1.75rem;
    margin-bottom: 1.5rem;
    background: var(--cp-bg-card);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.gs-card-blue[b-08czmznyav] {
    background: linear-gradient(135deg, #EBF5FF 0%, #E0F2FE 100%);
    border-color: #BAE6FD;
}

/* ============================
   Header Section
   ============================ */

.gs-header[b-08czmznyav] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.gs-icon[b-08czmznyav] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2563EB, #3B82F6);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.gs-header-content[b-08czmznyav] {
    flex: 1;
    min-width: 200px;
}

.gs-header-content h3[b-08czmznyav] {
    margin: 0 0 0.25rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cp-dark);
}

.gs-card .intro[b-08czmznyav] {
    color: var(--cp-text-secondary);
    margin: 0;
    font-size: 0.9rem;
}

/* ============================
   Progress Indicator
   ============================ */

.gs-progress[b-08czmznyav] {
    text-align: right;
    min-width: 100px;
}

.gs-progress-text[b-08czmznyav] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #2563EB;
    display: block;
    margin-bottom: 6px;
}

.gs-progress-bar[b-08czmznyav] {
    height: 6px;
    background: rgba(37, 99, 235, 0.15);
    border-radius: 3px;
    overflow: hidden;
}

.gs-progress-fill[b-08czmznyav] {
    height: 100%;
    background: linear-gradient(90deg, #2563EB, #3B82F6);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* ============================
   Steps
   ============================ */

.steps[b-08czmznyav] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.step[b-08czmznyav] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.7);
    transition: background-color 0.2s, transform 0.1s;
}

.step:hover[b-08czmznyav] {
    background: rgba(255, 255, 255, 0.95);
    transform: translateX(4px);
}

.step.completed[b-08czmznyav] {
    opacity: 0.7;
}

.step.completed:hover[b-08czmznyav] {
    opacity: 0.85;
}

/* Checkbox styling */
.step-checkbox[b-08czmznyav] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid #BAE6FD;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.step-checkbox.checked[b-08czmznyav] {
    background: linear-gradient(135deg, #2563EB, #3B82F6);
    border-color: #2563EB;
    color: white;
    font-size: 0.7rem;
}

/* Step icon */
.step-icon[b-08czmznyav] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(37, 99, 235, 0.1);
    color: #2563EB;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.step.completed .step-icon[b-08czmznyav] {
    background: rgba(37, 99, 235, 0.05);
    color: #93C5FD;
}

/* Step link */
.step a[b-08czmznyav] {
    display: block;
    text-decoration: none;
    color: inherit;
    flex: 1;
}

.step a strong[b-08czmznyav] {
    display: block;
    font-weight: 600;
    color: var(--cp-dark);
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.step.completed a strong[b-08czmznyav] {
    text-decoration: line-through;
    color: var(--cp-text-secondary);
}

.step a span[b-08czmznyav] {
    display: block;
    font-size: 0.8rem;
    color: var(--cp-text-secondary);
}

/* ============================
   Footer / Done Link
   ============================ */

.gs-card .footer[b-08czmznyav] {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(186, 230, 253, 0.5);
}

.gs-card .footer .done-link[b-08czmznyav] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 8px 16px;
    font-size: 0.85rem;
    color: var(--cp-text-secondary);
    cursor: pointer;
    border-radius: 50px;
    transition: all 0.2s;
}

.gs-card .footer .done-link:hover[b-08czmznyav] {
    background: rgba(255, 255, 255, 0.8);
    color: var(--cp-text);
}

/* ============================
   Responsive
   ============================ */

@media (max-width: 600px) {
    .gs-header[b-08czmznyav] {
        flex-direction: column;
    }

    .gs-progress[b-08czmznyav] {
        text-align: left;
        width: 100%;
    }

    .gs-progress-bar[b-08czmznyav] {
        max-width: 200px;
    }
}
/* /Components/Pages/GettingStartedRoutes.razor.rz.scp.css */

/* ============================
   Getting Started – Routes Card (Green Theme)
   ============================ */

.gs-card[b-ieaalsfx71] {
    border: 1px solid var(--cp-border);
    border-radius: 16px;
    padding: 1.75rem;
    margin-bottom: 1.5rem;
    background: var(--cp-bg-card);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.gs-card-green[b-ieaalsfx71] {
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    border-color: #A7F3D0;
}

/* ============================
   Header Section
   ============================ */

.gs-header[b-ieaalsfx71] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.gs-icon[b-ieaalsfx71] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #059669, #10B981);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.gs-header-content[b-ieaalsfx71] {
    flex: 1;
    min-width: 200px;
}

.gs-header-content h3[b-ieaalsfx71] {
    margin: 0 0 0.25rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cp-dark);
}

.gs-card .intro[b-ieaalsfx71] {
    color: var(--cp-text-secondary);
    margin: 0;
    font-size: 0.9rem;
}

/* ============================
   Progress Indicator
   ============================ */

.gs-progress[b-ieaalsfx71] {
    text-align: right;
    min-width: 100px;
}

.gs-progress-text[b-ieaalsfx71] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #059669;
    display: block;
    margin-bottom: 6px;
}

.gs-progress-bar[b-ieaalsfx71] {
    height: 6px;
    background: rgba(5, 150, 105, 0.15);
    border-radius: 3px;
    overflow: hidden;
}

.gs-progress-fill[b-ieaalsfx71] {
    height: 100%;
    background: linear-gradient(90deg, #059669, #10B981);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* ============================
   Steps
   ============================ */

.steps[b-ieaalsfx71] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.step[b-ieaalsfx71] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.7);
    transition: background-color 0.2s, transform 0.1s;
}

.step:hover[b-ieaalsfx71] {
    background: rgba(255, 255, 255, 0.95);
    transform: translateX(4px);
}

.step.completed[b-ieaalsfx71] {
    opacity: 0.7;
}

.step.completed:hover[b-ieaalsfx71] {
    opacity: 0.85;
}

/* Checkbox styling */
.step-checkbox[b-ieaalsfx71] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid #A7F3D0;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.step-checkbox.checked[b-ieaalsfx71] {
    background: linear-gradient(135deg, #059669, #10B981);
    border-color: #059669;
    color: white;
    font-size: 0.7rem;
}

/* Step icon */
.step-icon[b-ieaalsfx71] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(5, 150, 105, 0.1);
    color: #059669;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.step.completed .step-icon[b-ieaalsfx71] {
    background: rgba(5, 150, 105, 0.05);
    color: #6EE7B7;
}

/* Step link */
.step a[b-ieaalsfx71] {
    display: block;
    text-decoration: none;
    color: inherit;
    flex: 1;
}

.step a strong[b-ieaalsfx71] {
    display: block;
    font-weight: 600;
    color: var(--cp-dark);
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.step.completed a strong[b-ieaalsfx71] {
    text-decoration: line-through;
    color: var(--cp-text-secondary);
}

.step a span[b-ieaalsfx71] {
    display: block;
    font-size: 0.8rem;
    color: var(--cp-text-secondary);
}

/* ============================
   Footer / Done Link
   ============================ */

.gs-card .footer[b-ieaalsfx71] {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(167, 243, 208, 0.5);
}

.gs-card .footer .done-link[b-ieaalsfx71] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 8px 16px;
    font-size: 0.85rem;
    color: var(--cp-text-secondary);
    cursor: pointer;
    border-radius: 50px;
    transition: all 0.2s;
}

.gs-card .footer .done-link:hover[b-ieaalsfx71] {
    background: rgba(255, 255, 255, 0.8);
    color: var(--cp-text);
}

/* ============================
   Responsive
   ============================ */

@media (max-width: 600px) {
    .gs-header[b-ieaalsfx71] {
        flex-direction: column;
    }

    .gs-progress[b-ieaalsfx71] {
        text-align: left;
        width: 100%;
    }

    .gs-progress-bar[b-ieaalsfx71] {
        max-width: 200px;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
.page-content[b-vweh2vmx91] {
    padding-bottom: 100px;
    overflow-y: scroll;
    height: 100dvh !important;
}

.dashboard-page[b-vweh2vmx91] {
    display: flex;
    flex-direction: column;
    margin: 24px 32px;
    gap: 24px;
}

/* ============================
   Dashboard Header
   ============================ */

.dashboard-header[b-vweh2vmx91] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 8px;
}

.welcome-section[b-vweh2vmx91] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.welcome-title[b-vweh2vmx91] {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--cp-dark);
    margin: 0;
    letter-spacing: -0.02em;
}

.welcome-subtitle[b-vweh2vmx91] {
    font-size: 0.95rem;
    color: var(--cp-text-secondary);
    margin: 0;
}

.header-date[b-vweh2vmx91] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: white;
    border: 1px solid var(--cp-border);
    border-radius: 50px;
    font-size: 0.875rem;
    color: var(--cp-text-secondary);
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.header-date i[b-vweh2vmx91] {
    color: var(--cp-primary);
}

/* ============================
   Quick Stats Row
   ============================ */

.quick-stats-row[b-vweh2vmx91] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.quick-stat-card[b-vweh2vmx91] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    background: white;
    border: 1px solid var(--cp-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    cursor: pointer;
    position: relative;
}

.quick-stat-card:hover[b-vweh2vmx91] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--cp-primary);
}

.quick-stat-card:active[b-vweh2vmx91] {
    transform: translateY(0);
}

.stat-icon[b-vweh2vmx91] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.stat-blue .stat-icon[b-vweh2vmx91] {
    background: linear-gradient(135deg, #3B9EFF, #2563EB);
    color: white;
    box-shadow: 0 4px 12px rgba(59, 158, 255, 0.35);
}

.stat-green .stat-icon[b-vweh2vmx91] {
    background: linear-gradient(135deg, #10B981, #059669);
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.stat-amber .stat-icon[b-vweh2vmx91] {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: white;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

.stat-purple .stat-icon[b-vweh2vmx91] {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    color: white;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
}

.stat-info[b-vweh2vmx91] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.stat-value[b-vweh2vmx91] {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--cp-dark);
    line-height: 1.2;
}

.stat-label[b-vweh2vmx91] {
    font-size: 0.85rem;
    color: var(--cp-text-secondary);
    margin-top: 2px;
}

.stat-arrow[b-vweh2vmx91] {
    color: var(--cp-text-muted);
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
}

.quick-stat-card:hover .stat-arrow[b-vweh2vmx91] {
    opacity: 1;
    transform: translateX(4px);
}

/* ============================
   Quick Actions Section
   ============================ */

.quick-actions-section[b-vweh2vmx91] {
    margin-bottom: 2rem;
}

.section-heading[b-vweh2vmx91] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cp-dark);
    margin: 0 0 1rem 0;
}

.quick-actions-grid[b-vweh2vmx91] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.quick-action-card[b-vweh2vmx91] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 1rem 1.25rem;
    background: white;
    border: 1px solid var(--cp-border);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.quick-action-card:hover[b-vweh2vmx91] {
    border-color: var(--cp-primary);
    background: linear-gradient(135deg, #F8FBFF 0%, #EEF6FF 100%);
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(59, 158, 255, 0.15);
}

.action-icon[b-vweh2vmx91] {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.action-blue[b-vweh2vmx91] {
    background: rgba(59, 158, 255, 0.12);
    color: #2563EB;
}

.action-green[b-vweh2vmx91] {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.action-amber[b-vweh2vmx91] {
    background: rgba(245, 158, 11, 0.12);
    color: #D97706;
}

.action-purple[b-vweh2vmx91] {
    background: rgba(139, 92, 246, 0.12);
    color: #7C3AED;
}

.action-teal[b-vweh2vmx91] {
    background: rgba(20, 184, 166, 0.12);
    color: #0D9488;
}

.action-text[b-vweh2vmx91] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.action-text strong[b-vweh2vmx91] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cp-dark);
    margin-bottom: 2px;
}

.action-text span[b-vweh2vmx91] {
    font-size: 0.8rem;
    color: var(--cp-text-secondary);
}

.action-arrow[b-vweh2vmx91] {
    color: var(--cp-text-muted);
    font-size: 0.75rem;
    transition: transform 0.2s, color 0.2s;
}

.quick-action-card:hover .action-arrow[b-vweh2vmx91] {
    color: var(--cp-primary);
    transform: translateX(4px);
}

.info-section[b-vweh2vmx91] {
    margin: 20px 20px;
    width: 100%;
}
.avatar[b-vweh2vmx91] {
    width: 60px;
    height: 60px;
    margin-top: 15px;
    border: 2px solid white;
    border-radius: 50%;
}

.chart[b-vweh2vmx91] {
    width: 95%;
    padding-bottom:20px;
}

.section-title[b-vweh2vmx91] {
    padding-top: 20px;
}
.avatar[b-vweh2vmx91], .name .total[b-vweh2vmx91] {
    display: inline-block;
}

/* ============================
   Dashboard Widgets
   ============================ */

.dashboard-widgets[b-vweh2vmx91] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.widget[b-vweh2vmx91] {
    background: white;
    border: 1px solid var(--cp-border);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    flex: 1 1 400px;
    min-width: 350px;
}

.widget-getting-started[b-vweh2vmx91] {
    flex: 1 1 100%;
    background: transparent;
    border: none;
    box-shadow: none;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.widget-getting-started > :deep(*)[b-vweh2vmx91] {
    flex: 1 1 450px;
    min-width: 350px;
}

.widget-header[b-vweh2vmx91] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--cp-border-light);
    background: linear-gradient(135deg, #FAFBFC 0%, #F5F7FA 100%);
}

.widget-icon[b-vweh2vmx91] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.widget-icon-blue[b-vweh2vmx91] {
    background: linear-gradient(135deg, #3B9EFF, #2563EB);
    color: white;
    box-shadow: 0 4px 10px rgba(59, 158, 255, 0.3);
}

.widget-icon-green[b-vweh2vmx91] {
    background: linear-gradient(135deg, #10B981, #059669);
    color: white;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}

.widget-icon-teal[b-vweh2vmx91] {
    background: linear-gradient(135deg, #14B8A6, #0D9488);
    color: white;
    box-shadow: 0 4px 10px rgba(20, 184, 166, 0.3);
}

.widget-title[b-vweh2vmx91] {
    flex: 1;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cp-dark);
}

.widget-controls[b-vweh2vmx91] {
    margin-left: auto;
}

.widget-content[b-vweh2vmx91] {
    padding: 1.5rem;
}

/* Collection Widget Styles */
.widget-title-group[b-vweh2vmx91] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex: 1;
}

.widget-period[b-vweh2vmx91] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--cp-text-secondary);
    background: rgba(59, 158, 255, 0.1);
    padding: 4px 10px;
    border-radius: 12px;
}

.collection-metrics[b-vweh2vmx91] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 1.5rem;
}

.metric-card[b-vweh2vmx91] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    background: var(--cp-bg-page);
    border-radius: 12px;
    border: 1px solid var(--cp-border-light);
}

.metric-card.metric-primary[b-vweh2vmx91] {
    background: linear-gradient(135deg, #EBF5FF 0%, #E0F2FE 100%);
    border-color: rgba(59, 158, 255, 0.2);
}

.metric-card.metric-highlight[b-vweh2vmx91] {
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    border-color: rgba(16, 185, 129, 0.2);
}

.metric-label[b-vweh2vmx91] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.metric-value[b-vweh2vmx91] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cp-dark);
    line-height: 1.2;
}

.metric-primary .metric-value[b-vweh2vmx91] {
    color: #2563EB;
}

.metric-highlight .metric-value[b-vweh2vmx91] {
    color: #059669;
}

.empty-state[b-vweh2vmx91] {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--cp-text-muted);
}

.empty-state i[b-vweh2vmx91] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state p[b-vweh2vmx91] {
    margin: 0;
    font-size: 0.95rem;
}

.trip-list[b-vweh2vmx91] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trip-list-header[b-vweh2vmx91] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.trip-item[b-vweh2vmx91] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: var(--cp-bg-page);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.trip-item:hover[b-vweh2vmx91] {
    background: linear-gradient(135deg, #EBF5FF 0%, #E0F2FE 100%);
    transform: translateX(4px);
}

.trip-info[b-vweh2vmx91] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trip-route[b-vweh2vmx91] {
    font-weight: 600;
    color: var(--cp-dark);
    font-size: 0.95rem;
}

.trip-meta[b-vweh2vmx91] {
    font-size: 0.8rem;
    color: var(--cp-text-secondary);
}

.trip-details[b-vweh2vmx91] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.trip-status[b-vweh2vmx91] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
}

.trip-status.active[b-vweh2vmx91] {
    background: rgba(59, 158, 255, 0.15);
    color: #2563EB;
}

.trip-status.complete[b-vweh2vmx91] {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.trip-amount[b-vweh2vmx91] {
    font-weight: 700;
    color: var(--cp-dark);
    font-size: 0.95rem;
}

.view-all-link[b-vweh2vmx91] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    margin-top: 8px;
    background: none;
    border: 1px dashed var(--cp-border);
    border-radius: 10px;
    color: var(--cp-primary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.view-all-link:hover[b-vweh2vmx91] {
    background: var(--cp-primary-light);
    border-color: var(--cp-primary);
}

.view-all-link i[b-vweh2vmx91] {
    transition: transform 0.2s;
}

.view-all-link:hover i[b-vweh2vmx91] {
    transform: translateX(4px);
}

/* View Toggle Buttons */
.view-toggle[b-vweh2vmx91] {
    display: flex;
    gap: 8px;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--cp-border-light);
}

.toggle-btn[b-vweh2vmx91] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cp-text-secondary);
    background: var(--cp-bg-page);
    border: 1px solid var(--cp-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.toggle-btn:hover[b-vweh2vmx91] {
    background: var(--cp-primary-light);
    border-color: var(--cp-primary);
    color: var(--cp-primary);
}

.toggle-btn.active[b-vweh2vmx91] {
    background: var(--cp-primary);
    border-color: var(--cp-primary);
    color: white;
}

.toggle-btn i[b-vweh2vmx91] {
    font-size: 0.8rem;
}

/* Route Grid */
.route-grid[b-vweh2vmx91] {
    min-height: 200px;
}

/* Segmented Control in Widget */
.widget-controls .segmented[b-vweh2vmx91] {
    display: flex;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 3px;
}

.widget-controls .segmented input[b-vweh2vmx91] {
    display: none;
}

.widget-controls .segmented .seg-item[b-vweh2vmx91] {
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cp-text-secondary);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}

.widget-controls .segmented input:checked + .seg-item[b-vweh2vmx91] {
    background: white;
    color: var(--cp-dark);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.getting-started-section[b-vweh2vmx91] {
    max-width: 960px; /* Centered column on desktop */
    margin: 2rem auto; /* Vertical spacing + horizontal centering */
    padding: 0 1rem; /* Side padding for small screens */
}

.name[b-vweh2vmx91] {
    margin-top: 30px;
}

.total[b-vweh2vmx91] {
    margin-top: 30px;
}

.user-list[b-vweh2vmx91]{
    padding-bottom: 20px;
}

.messages[b-vweh2vmx91] {
    margin-left: 60px;
    padding-bottom: 60px;   
}
.create[b-vweh2vmx91] {
 margin-left: 20px; 
}
.map-section[b-vweh2vmx91] { 
}
.reports[b-vweh2vmx91] { 
}
.summary-header[b-vweh2vmx91] {
    display: flex;
    flex-direction: row;
}

.summary-title[b-vweh2vmx91] {
    font-size: 24px;
    font-weight: 600;
    width: 50%;
}
.job-summary[b-vweh2vmx91] {
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
}

.summary-detail[b-vweh2vmx91] {
    font-size: 30px;
    font-weight: 600;
}

.summary-info[b-vweh2vmx91] {
    display: flex;
    flex-direction: row;
    margin-top: 10px;
}
.collect-icon[b-vweh2vmx91] {
    background-color: #B5C8E8 !important;
    color: blue;
    border: none;
    padding: 5px;
    font-size: 18px;
    height: 35px;
    width: 35px;
    border-radius: 50%;
    margin: 5px 10px 10px 10px;
    
}
.collections[b-vweh2vmx91], .route-summaries[b-vweh2vmx91] {
    width: 40%;
}

.route-info[b-vweh2vmx91] {
    margin-top: 20px;
}
.list-header[b-vweh2vmx91] {
    font-size: 18px;
    margin: 10px 5px;
}


.job-card-border[b-vweh2vmx91] {
    min-width: 10px;
    min-height: 100%;
    display: inline-block;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    background-color: #783aed;
}

.job-card[b-vweh2vmx91] {
    vertical-align: top;
    display: flex;
    flex-direction: column;
    padding: 6px;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    background: white;
    border-top: solid 1px grey;
}
.trip-summaries[b-vweh2vmx91], .route-section[b-vweh2vmx91] {
    padding: 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.route-values[b-vweh2vmx91]{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.route-name[b-vweh2vmx91] {
    font-weight: 600;
    font-size: 18px;
}
.route-status[b-vweh2vmx91] {
    width: 25%;
}

.active[b-vweh2vmx91] {
    color: #2563eb;
    background-color: white;
    font-weight: 500;
    padding: 0px 14px;
    border-radius: 10px;
}

.complete[b-vweh2vmx91] {
    color: green;
    background-color: white;
    font-weight: 400;
    padding: 0px 10px;
    border-radius: 10px;
}
.route-date[b-vweh2vmx91] {
    width: 25%;
    font-size: 16px;
}
.route-assign[b-vweh2vmx91] {
    width: 25%;
}
.route-total[b-vweh2vmx91] {
    width: 25%;
    font-size: 16px;
    font-weight: 500;
    text-align: end;
}

.centered-page[b-vweh2vmx91] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--grey-g-40);
}

.loading-box[b-vweh2vmx91] {
    width: 350px;
    height: 350px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 30px var(--grey-g-60);
    border-radius: 12px;
    background-color: white;
}

.space-below[b-vweh2vmx91] {
    margin-bottom: 100px;
}

.space-above[b-vweh2vmx91] {
    margin-top: 40px;
}

.logo-image[b-vweh2vmx91] {
    margin-top: 40px;
    margin-left: 20px;
    width: 300px;
}

.centered[b-vweh2vmx91] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

@media (max-width: 1200px) {

    .dashboard-page[b-vweh2vmx91] {
        display: flex;
        flex-direction: column;
        margin: 20px 20px;
        gap: 20px;
    }

    .dashboard-header[b-vweh2vmx91] {
        flex-direction: column;
        gap: 12px;
    }

    .header-date[b-vweh2vmx91] {
        align-self: flex-start;
    }

    .info-section[b-vweh2vmx91] {
        margin: 10px 10px;
    }

    .collections[b-vweh2vmx91] {
        width: 48%
    }

    .route-summaries[b-vweh2vmx91] {
        width: 48%
    }

    .trip-summaries[b-vweh2vmx91] {
        padding: 10px;
    }
    .flex-col[b-vweh2vmx91] {
        justify-content:space-evenly ;
    }

    .route-info[b-vweh2vmx91] {
        font-size: 10px !important;
    }

    .route-section[b-vweh2vmx91] {
        padding: 10px;
    }

    .route-name[b-vweh2vmx91] {
        font-weight: 600;
        font-size: 14px;
    }
    .route-date[b-vweh2vmx91] {
        font-size: 14px;
    }
    .route-status[b-vweh2vmx91] {
        font-size: 14px;
    }
    .route-assign[b-vweh2vmx91] {
        font-size: 14px;
    }

    .route-total[b-vweh2vmx91] {
        font-size: 14px;
    }

    .summary-header[b-vweh2vmx91] {
        flex-direction: column;
        margin-left: 0px;
    }

    .summary-title[b-vweh2vmx91] {
        width: 90%;
    }

    /* Responsive Quick Stats */
    .quick-stats-row[b-vweh2vmx91] {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Responsive Quick Actions */
    .quick-actions-grid[b-vweh2vmx91] {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Responsive Widgets */
    .widget[b-vweh2vmx91] {
        flex: 1 1 100%;
        min-width: 100%;
    }

    .widget-getting-started > :deep(*)[b-vweh2vmx91] {
        flex: 1 1 100%;
        min-width: 100%;
    }
}


@media (max-width: 575.98px) {
    .flex-col[b-vweh2vmx91] {
        flex-direction: column;
    }
    .dashboard-page[b-vweh2vmx91] {
        margin: 0px;
        padding: 16px;
        gap: 16px;
    }

    .dashboard-header[b-vweh2vmx91] {
        gap: 8px;
    }

    .welcome-title[b-vweh2vmx91] {
        font-size: 1.4rem;
    }

    .welcome-subtitle[b-vweh2vmx91] {
        font-size: 0.85rem;
    }

    .header-date[b-vweh2vmx91] {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .collections[b-vweh2vmx91] {
        width: 100%

    }

    .route-summaries[b-vweh2vmx91] {
        width: 100%
    }

    /* Mobile Quick Stats - 2x2 grid */
    .quick-stats-row[b-vweh2vmx91] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .quick-stat-card[b-vweh2vmx91] {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
        gap: 10px;
    }

    .stat-icon[b-vweh2vmx91] {
        width: 48px;
        height: 48px;
        font-size: 1.15rem;
    }

    .stat-value[b-vweh2vmx91] {
        font-size: 1.5rem;
    }

    .stat-label[b-vweh2vmx91] {
        font-size: 0.75rem;
    }

    .stat-arrow[b-vweh2vmx91] {
        display: none;
    }

    /* Mobile Quick Actions - single column */
    .quick-actions-grid[b-vweh2vmx91] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .quick-action-card[b-vweh2vmx91] {
        padding: 0.875rem 1rem;
    }

    .action-icon[b-vweh2vmx91] {
        width: 38px;
        height: 38px;
        font-size: 0.9rem;
    }

    /* Mobile Widgets */
    .dashboard-widgets[b-vweh2vmx91] {
        gap: 16px;
    }

    .widget[b-vweh2vmx91] {
        min-width: 100%;
    }

    .widget-header[b-vweh2vmx91] {
        flex-wrap: wrap;
        gap: 10px;
        padding: 1rem;
    }

    .widget-controls[b-vweh2vmx91] {
        width: 100%;
        margin-left: 0;
        margin-top: 8px;
    }

    .widget-content[b-vweh2vmx91] {
        padding: 1rem;
    }

    /* Mobile Collection Metrics */
    .collection-metrics[b-vweh2vmx91] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .metric-card[b-vweh2vmx91] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 14px 16px;
    }

    .metric-value[b-vweh2vmx91] {
        font-size: 1.25rem;
    }

    .widget-title-group[b-vweh2vmx91] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}


/* /Components/Pages/Initialize.razor.rz.scp.css */
.page-container[b-zxshuiljw4] {
    width: 100%;
    height: 100vh;
    padding-top: 0px !important;
}

.centered-page[b-zxshuiljw4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #0f172a;
}

.loading-box[b-zxshuiljw4] {
    display: flex;
    width: 350px;
    height: 350px;
    flex-direction: column;
    box-shadow: 0 6px 30px var(--grey-g-60);
    border-radius: 12px;
    background-color: white;
}
.space-below[b-zxshuiljw4] {
    margin-bottom: 100px;
}

.space-above[b-zxshuiljw4] {
    margin-top: 40px;
}

.logo-image[b-zxshuiljw4] {
    margin-left: 20px;
    width: 300px;
}

.centered[b-zxshuiljw4] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
}
/* /Components/Pages/Inventory.razor.rz.scp.css */
/* ============================
   Inventory Page Layout
   ============================ */

/* ============================
   Navigation Sidebar (Desktop)
   ============================ */

.inventory-nav[b-p8ueqv9cap] {
    width: 260px;
    min-width: 260px;
    height: calc(100vh - 112px);
    display: flex;
    flex-direction: column;
    background: white;
    border-right: 1px solid var(--cp-border, #E5E7EB);
    padding: 24px 16px;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
}

.nav-title[b-p8ueqv9cap] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cp-dark, #1A1D2E);
    margin: 0 0 20px 8px;
    letter-spacing: -0.01em;
}

.nav-items[b-p8ueqv9cap] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-item[b-p8ueqv9cap] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--cp-text-secondary, #6B7280);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.nav-item:hover[b-p8ueqv9cap] {
    background: var(--cp-border-light, #F3F4F6);
    color: var(--cp-dark, #1A1D2E);
}

.nav-item i[b-p8ueqv9cap] {
    width: 20px;
    text-align: center;
    font-size: 1rem;
}

.nav-item-active[b-p8ueqv9cap] {
    background: linear-gradient(135deg, rgba(59, 158, 255, 0.1), rgba(37, 99, 235, 0.1));
    color: var(--cp-primary, #3B9EFF);
    font-weight: 600;
}

.nav-item-active:hover[b-p8ueqv9cap] {
    background: linear-gradient(135deg, rgba(59, 158, 255, 0.15), rgba(37, 99, 235, 0.15));
    color: var(--cp-primary, #3B9EFF);
}

.nav-item-active i[b-p8ueqv9cap] {
    color: var(--cp-primary, #3B9EFF);
}

/* ============================
   Content Area
   ============================ */

.inventory-content[b-p8ueqv9cap] {
    padding: 24px;
    padding-bottom: 100px;
    width: 100%;
    max-width: 1200px;
}

/* ============================
   Responsive - Tablet
   ============================ */

@media (max-width: 1024px) {
    .inventory-nav[b-p8ueqv9cap] {
        width: 220px;
        min-width: 220px;
        padding: 20px 12px;
    }

    .nav-title[b-p8ueqv9cap] {
        font-size: 1rem;
        margin-bottom: 16px;
    }

    .nav-item[b-p8ueqv9cap] {
        padding: 10px 14px;
        font-size: 0.9rem;
    }

    .inventory-content[b-p8ueqv9cap] {
        padding: 20px;
    }
}

/* ============================
   Responsive - Mobile (Horizontal Tabs)
   ============================ */

@media (max-width: 768px) {
    .inventory-nav[b-p8ueqv9cap] {
        width: 100%;
        min-width: 100%;
        height: auto;
        flex-direction: column;
        padding: 16px;
        border-right: none;
        border-bottom: 1px solid var(--cp-border, #E5E7EB);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .nav-title[b-p8ueqv9cap] {
        font-size: 1.25rem;
        margin: 0 0 12px 0;
    }

    .nav-items[b-p8ueqv9cap] {
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .nav-items[b-p8ueqv9cap]::-webkit-scrollbar {
        display: none;
    }

    .nav-item[b-p8ueqv9cap] {
        flex-shrink: 0;
        padding: 10px 20px;
        border-radius: 50px;
        background: var(--cp-border-light, #F3F4F6);
        font-size: 0.9rem;
        gap: 8px;
    }

    .nav-item:hover[b-p8ueqv9cap] {
        background: var(--cp-border, #E5E7EB);
    }

    .nav-item-active[b-p8ueqv9cap] {
        background: linear-gradient(135deg, #3B9EFF, #2563EB);
        color: white;
        box-shadow: 0 2px 8px rgba(59, 158, 255, 0.3);
    }

    .nav-item-active:hover[b-p8ueqv9cap] {
        background: linear-gradient(135deg, #2563EB, #1D4ED8);
        color: white;
    }

    .nav-item-active i[b-p8ueqv9cap] {
        color: white;
    }

    .inventory-content[b-p8ueqv9cap] {
        padding: 16px;
    }

    /* Stack layout vertically on mobile */
    .page-container[b-p8ueqv9cap] {
        flex-direction: column;
    }
}

/* ============================
   Responsive - Small Mobile
   ============================ */

@media (max-width: 480px) {
    .inventory-nav[b-p8ueqv9cap] {
        padding: 12px;
    }

    .nav-title[b-p8ueqv9cap] {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }

    .nav-item[b-p8ueqv9cap] {
        padding: 8px 16px;
        font-size: 0.85rem;
    }

    .inventory-content[b-p8ueqv9cap] {
        padding: 12px;
    }
}
/* /Components/Pages/Invitation.razor.rz.scp.css */
.invite-box[b-z923yfj8s3] {
    width: 800px;
    height: 300px;
}

.code-box[b-z923yfj8s3] {
    margin-top: 50px;
}

.invite-title[b-z923yfj8s3] {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 50px;
}

.code-input[b-z923yfj8s3] {
    margin-top: 8px;
}

.invite-page[b-z923yfj8s3] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -100px;
}

.page-container[b-z923yfj8s3] {
    background: var(--grey-g-30);
}
/* /Components/Pages/Invoices.razor.rz.scp.css */
/* Container: padding + bottom spacer.
   Background and scroll are owned by Billing's .tab-container parent. */
.invoices-container[b-m6i5l9odf1] {
    padding: 24px;
    padding-bottom: 80px;
    box-sizing: border-box;
}

/* Compact Route Sales-style header */
.invoices-header[b-m6i5l9odf1] {
    margin-bottom: 16px;
}

.invoices-title-row[b-m6i5l9odf1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.invoices-title[b-m6i5l9odf1] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.invoices-title i[b-m6i5l9odf1] {
    font-size: 1.5rem;
    color: var(--cp-primary);
}

.invoices-title h2[b-m6i5l9odf1] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cp-text);
}

/* Quick Stats Row (Jobs.razor pattern) */
.quick-stats[b-m6i5l9odf1] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

/* Pagination Controls (Customers.razor.css pattern) */
.pagination-controls[b-m6i5l9odf1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    margin-top: 16px;
    margin-bottom: 16px;
    border-top: 1px solid var(--cp-border-light);
    flex-wrap: wrap;
    gap: 12px;
}

.pagination-controls-top[b-m6i5l9odf1] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 4px 0 !important;
    border-top: none !important;
    border-bottom: none !important;
}

.pagination-info[b-m6i5l9odf1] {
    font-size: 0.875rem;
    color: var(--cp-text-secondary);
}

.pagination-buttons[b-m6i5l9odf1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-current[b-m6i5l9odf1] {
    font-size: 0.875rem;
    color: var(--cp-text);
    padding: 0 12px;
}

.pagination-size[b-m6i5l9odf1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-size label[b-m6i5l9odf1] {
    font-size: 0.875rem;
    color: var(--cp-text-secondary);
}

.pagination-size .cp-select-sm[b-m6i5l9odf1] {
    padding: 4px 8px;
    font-size: 0.875rem;
    min-width: 60px;
}

/* Responsive - Tablet */
@media (max-width: 991px) {
    .quick-stats[b-m6i5l9odf1] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive - Mobile */
@media (max-width: 575px) {
    .invoices-title h2[b-m6i5l9odf1] {
        font-size: 1.25rem;
    }

    .quick-stats[b-m6i5l9odf1] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .pagination-controls[b-m6i5l9odf1] {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .pagination-buttons[b-m6i5l9odf1] {
        justify-content: center;
    }

    .pagination-size[b-m6i5l9odf1] {
        justify-content: center;
    }
}
/* /Components/Pages/Job.razor.rz.scp.css */
/* Page Container */
[b-r6wqgr4v24] .dashboard-page {
    max-width: 1400px;
    margin: 0 auto;
}

/* Back Navigation */
.back-nav[b-r6wqgr4v24] {
    margin-bottom: 16px;
}

.back-link[b-r6wqgr4v24] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--cp-text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 8px 0;
    transition: color 0.15s ease;
}

.back-link:hover[b-r6wqgr4v24] {
    color: var(--cp-primary);
}

.back-link i[b-r6wqgr4v24] {
    font-size: 0.85rem;
}

/* Job Header Card */
.job-header[b-r6wqgr4v24] {
    margin-bottom: 24px;
    padding: 24px;
}

.job-header-top[b-r6wqgr4v24] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 20px;
}

.job-header-info[b-r6wqgr4v24] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1;
}

.job-header-details[b-r6wqgr4v24] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.job-customer-name[b-r6wqgr4v24] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cp-dark);
    margin: 0;
}

.job-meta[b-r6wqgr4v24] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.meta-item[b-r6wqgr4v24] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--cp-text-secondary);
}

.meta-item i[b-r6wqgr4v24] {
    color: var(--cp-text-muted);
    font-size: 0.8rem;
}

.address-secondary[b-r6wqgr4v24] {
    margin-left: 20px;
    color: var(--cp-text-muted);
}

.job-type-badge[b-r6wqgr4v24] {
    margin-top: 8px;
}

.job-header-map[b-r6wqgr4v24] {
    flex-shrink: 0;
    width: 200px;
    height: 120px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--cp-border-light);
}

.job-header-map .static-map[b-r6wqgr4v24] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Job Stats */
.job-header-stats[b-r6wqgr4v24] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid var(--cp-border-light);
}

/* Job Notes */
.job-notes[b-r6wqgr4v24] {
    margin-top: 20px;
    padding: 16px;
    background: var(--cp-border-light);
    border-radius: 10px;
}

.notes-label[b-r6wqgr4v24] {
    font-weight: 600;
    color: var(--cp-text-secondary);
    font-size: 0.85rem;
    margin-right: 8px;
}

.notes-label i[b-r6wqgr4v24] {
    margin-right: 4px;
}

.notes-text[b-r6wqgr4v24] {
    color: var(--cp-text);
    font-size: 0.9rem;
}

/* Section Styles */
.cp-section[b-r6wqgr4v24] {
    background: var(--cp-bg-card);
    border: 1px solid var(--cp-border);
    border-radius: 16px;
    margin-bottom: 24px;
    overflow: hidden;
}

.cp-section-header[b-r6wqgr4v24] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(180deg, #FAFBFC 0%, #F5F7F9 100%);
    border-bottom: 1px solid var(--cp-border-light);
}

.section-header-left[b-r6wqgr4v24] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cp-section-icon[b-r6wqgr4v24] {
    color: var(--cp-primary);
    font-size: 1rem;
}

.cp-section-title[b-r6wqgr4v24] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cp-dark);
}

.cp-section-count[b-r6wqgr4v24] {
    font-size: 0.85rem;
    color: var(--cp-text-muted);
}

.cp-section-content[b-r6wqgr4v24] {
    padding: 20px;
}

/* Estimate Cards */
.estimate-cards[b-r6wqgr4v24] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

.estimate-card[b-r6wqgr4v24] {
    padding: 16px;
}

.estimate-info[b-r6wqgr4v24] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.estimate-date[b-r6wqgr4v24] {
    font-size: 0.9rem;
    color: var(--cp-text-secondary);
}

.estimate-total[b-r6wqgr4v24] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cp-dark);
}

/* Invoice Cards */
.invoice-cards[b-r6wqgr4v24] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.invoice-card[b-r6wqgr4v24] {
    padding: 16px;
}

.invoice-header[b-r6wqgr4v24] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cp-border-light);
}

.invoice-number[b-r6wqgr4v24] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cp-dark);
}

.invoice-details[b-r6wqgr4v24] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.invoice-detail[b-r6wqgr4v24] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-label[b-r6wqgr4v24] {
    font-size: 0.75rem;
    color: var(--cp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value[b-r6wqgr4v24] {
    font-size: 0.9rem;
    color: var(--cp-text);
}

.invoice-total[b-r6wqgr4v24] {
    font-weight: 600;
}

.has-balance[b-r6wqgr4v24] {
    color: var(--cp-warning);
    font-weight: 600;
}

/* Image Grid */
.image-grid[b-r6wqgr4v24] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.image-thumb[b-r6wqgr4v24] {
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid var(--cp-border);
}

.image-thumb:hover[b-r6wqgr4v24] {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.image-thumb img[b-r6wqgr4v24] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-group-title[b-r6wqgr4v24] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cp-text-secondary);
    margin: 16px 0 12px 0;
    padding-top: 16px;
    border-top: 1px solid var(--cp-border-light);
}

/* Empty States */
.empty-state-small[b-r6wqgr4v24] {
    text-align: center;
    padding: 24px 16px;
    color: var(--cp-text-muted);
}

.empty-state-small p[b-r6wqgr4v24] {
    font-size: 0.85rem;
    margin: 0;
}

/* Loading Container */
.loading-container[b-r6wqgr4v24] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
}

/* Attachment Dialog */
.attachment-dialog-content[b-r6wqgr4v24] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.viewattachment[b-r6wqgr4v24] {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}

/* Responsive - Tablet */
@media (max-width: 1200px) {
    .job-header-stats[b-r6wqgr4v24] {
        grid-template-columns: repeat(2, 1fr);
    }

    .job-header-map[b-r6wqgr4v24] {
        width: 160px;
        height: 100px;
    }
}

/* Responsive - Mobile */
@media (max-width: 575px) {
    .job-header[b-r6wqgr4v24] {
        padding: 16px;
    }

    .job-header-top[b-r6wqgr4v24] {
        flex-direction: column;
    }

    .job-header-info[b-r6wqgr4v24] {
        flex-direction: column;
        align-items: flex-start;
    }

    .job-customer-name[b-r6wqgr4v24] {
        font-size: 1.25rem;
    }

    .job-meta[b-r6wqgr4v24] {
        flex-direction: column;
        gap: 8px;
    }

    .address-secondary[b-r6wqgr4v24] {
        margin-left: 0;
    }

    .job-header-map[b-r6wqgr4v24] {
        width: 100%;
        height: 150px;
    }

    .job-header-stats[b-r6wqgr4v24] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .cp-section-header[b-r6wqgr4v24] {
        flex-direction: column;
        align-items: stretch;
    }

    .invoice-cards[b-r6wqgr4v24],
    .estimate-cards[b-r6wqgr4v24] {
        grid-template-columns: 1fr;
    }

    .image-grid[b-r6wqgr4v24] {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* /Components/Pages/Jobs.razor.rz.scp.css */
/* Page Container - Max width for large screens */
[b-9cf61ueesj] .dashboard-page {
    max-width: 1400px;
    margin: 20px auto;
}

/* Page Header */
.page-header[b-9cf61ueesj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.header-left[b-9cf61ueesj] {
    flex: 1;
    min-width: 200px;
}

.page-title[b-9cf61ueesj] {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--cp-dark);
    margin: 0 0 4px 0;
    letter-spacing: -0.02em;
}

.page-subtitle[b-9cf61ueesj] {
    font-size: 0.95rem;
    color: var(--cp-text-secondary);
    margin: 0;
}

.header-right[b-9cf61ueesj] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Quick Stats Row */
.quick-stats[b-9cf61ueesj] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

/* Search/Filter Bar */
.search-filter-bar[b-9cf61ueesj] {
    margin-bottom: 24px;
}

.search-filter-bar .cp-search-box[b-9cf61ueesj] {
    max-width: 400px;
}

/* Jobs Grid Card */
.jobs-grid-card[b-9cf61ueesj] {
    padding: 0;
    overflow: hidden;
}

/* Syncfusion Grid Styling Overrides */
[b-9cf61ueesj] .e-grid {
    border: none !important;
    font-family: inherit;
}

[b-9cf61ueesj] .e-grid .e-gridheader {
    background: linear-gradient(180deg, #FAFBFC 0%, #F5F7F9 100%);
    border-bottom: 1px solid var(--cp-border);
}

[b-9cf61ueesj] .e-grid .e-headercell {
    background: transparent;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--cp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px 12px;
}

[b-9cf61ueesj] .e-grid .e-rowcell {
    padding: 14px 12px;
    font-size: 0.9rem;
    color: var(--cp-text);
    border-bottom: 1px solid var(--cp-border-light);
}

[b-9cf61ueesj] .e-grid .e-row:hover .e-rowcell {
    background: var(--cp-primary-light) !important;
    cursor: pointer;
}

[b-9cf61ueesj] .e-grid .e-row.e-altrow .e-rowcell {
    background: #FAFBFC;
}

[b-9cf61ueesj] .e-grid .e-row.e-altrow:hover .e-rowcell {
    background: var(--cp-primary-light) !important;
}

/* Empty State */
.empty-state[b-9cf61ueesj] {
    text-align: center;
    padding: 48px 24px;
    color: var(--cp-text-secondary);
}

.empty-state i[b-9cf61ueesj] {
    font-size: 2.5rem;
    margin-bottom: 16px;
    opacity: 0.5;
    display: block;
}

.empty-state p[b-9cf61ueesj] {
    font-size: 0.95rem;
    margin: 0;
}

/* Loading Container */
.loading-container[b-9cf61ueesj] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

/* Responsive - Tablet */
@media (max-width: 1200px) {
    .quick-stats[b-9cf61ueesj] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive - Mobile */
@media (max-width: 575px) {
    .page-header[b-9cf61ueesj] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-right[b-9cf61ueesj] {
        justify-content: flex-end;
    }

    .page-title[b-9cf61ueesj] {
        font-size: 1.5rem;
    }

    .quick-stats[b-9cf61ueesj] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .search-filter-bar .cp-search-box[b-9cf61ueesj] {
        max-width: 100%;
    }

    .btn-text[b-9cf61ueesj] {
        display: none;
    }
}
/* /Components/Pages/Lists.razor.rz.scp.css */
.page-list[b-wiij90mdiy] {
    margin-top: 10px;
    display: flex;
    vertical-align: bottom;
}

.title[b-wiij90mdiy] {
    font-weight: bold;
    float: left;
    display: flex;
    align-items: flex-end;
}

.page[b-wiij90mdiy] {
    display: flex;
    align-items: flex-end;
    padding-bottom: 4px;
    padding-left: 40px;
}

.selected[b-wiij90mdiy] {
    color: #6262e8;
    font-size: 28px;
    font-weight: 600 !important;
}

.grid-title[b-wiij90mdiy] {
    margin-bottom: 10px;
}

.tab-container[b-wiij90mdiy] {
    height: 100vh;
    width: 100%;
    box-shadow: 6px;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 15px;
    overflow-y: scroll;
}

.container[b-wiij90mdiy] {
    padding: 0px;
    margin: 0px;
    max-width: 100%;
}
/* /Components/Pages/Login.razor.rz.scp.css */
.section[b-zima67j9ik] {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100%;
}

.login-container[b-zima67j9ik] {
    padding: 0;
    margin: 0;
    background-color: #0f172a;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-box[b-zima67j9ik] {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    color: white;
    width: 400px;
    height: 400px;
    text-align: center;
}

    .login-box h2[b-zima67j9ik] {
        margin: 0 0 20px;
        padding: 0;
    }

.textbox[b-zima67j9ik] {
    margin-bottom: 20px;
}

    .textbox input[b-zima67j9ik] {
        width: 100%;
        padding: 10px;
        border: none;
        border-radius: 5px;
    }

.btn[b-zima67j9ik] {
    width: 80%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: var(--main-blue);
    color: white;
    font-size: 16px;
    cursor: pointer;
}

    .btn:hover[b-zima67j9ik] {
        background-color: var(--main-blue-dark);
    }

.logo-image[b-zima67j9ik]{
    height: 250px;
    width: 300px;
}
/* /Components/Pages/Map.razor.rz.scp.css */
.username[b-4lr0sy3mae] {
    color: blue !important;
}

.map-box[b-4lr0sy3mae] {
    justify-content: center;
    width: 100%;
    height: 100vh;
}

.setting-list[b-4lr0sy3mae] {
    width: 300px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    vertical-align: bottom;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 15px;
    padding-left: 20px;
    padding-top: 20px;
    gap: 20px;
    border-right: 1px solid lightgray;
}

.tab-container[b-4lr0sy3mae] {
    width: 100%
}

.option-check[b-4lr0sy3mae] {
    margin-right: 10px;
}

.dropdown-menu[b-4lr0sy3mae] {
    position: absolute !important;
    margin-left:230px;
    z-index: 100;
    background-color: var(--grey-g-2);
    font-size: 12px;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 2px 2px lightgray;
    width: 250px;
}

    .dropdown-menu span:hover[b-4lr0sy3mae] {
        background-color: #f0f0f0;
    }

.popup span[b-4lr0sy3mae] { 
    color: blue;
}

/* /Components/Pages/Marketing.razor.rz.scp.css */
/* /Components/Pages/NewTicket.razor.rz.scp.css */
.new-ticket-container[b-znns335nkf] {
    overflow-y: auto;
}

.new-ticket-page[b-znns335nkf] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
    gap: 20px;
}

@media (max-width: 768px) {
    .new-ticket-page[b-znns335nkf] {
        max-width: 100%;
        padding: 16px;
    }
}

.page-header[b-znns335nkf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.header-left[b-znns335nkf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.header-right[b-znns335nkf] {
    display: flex;
    gap: 12px;
}

.page-title[b-znns335nkf] {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
    margin: 0;
}

.page-subtitle[b-znns335nkf] {
    font-size: 14px;
    color: var(--text-secondary, #64748b);
    margin: 0;
}

.ticket-form-container[b-znns335nkf] {
    background: white;
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    padding: 24px;
}

.cp-btn-secondary[b-znns335nkf] {
    background: white;
    color: var(--text-primary, #1a1a2e);
    border: 1px solid var(--border-color, #e2e8f0);
}

.cp-btn-secondary:hover:not(:disabled)[b-znns335nkf] {
    background: #f8fafc;
    border-color: var(--primary-color, #3b82f6);
}

.cp-form-grid[b-znns335nkf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.cp-form-group[b-znns335nkf] {
    display: flex;
    flex-direction: column;
}

.cp-form-group-full[b-znns335nkf] {
    grid-column: 1 / -1;
}

.cp-form-label[b-znns335nkf] {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-primary, #333);
}

.cp-form-label .required[b-znns335nkf] {
    color: #dc3545;
}

.cp-form-input[b-znns335nkf] {
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.cp-form-input:focus[b-znns335nkf] {
    border-color: #0066cc;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
    outline: none;
}

.cp-validation-error[b-znns335nkf] {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.cp-file-upload-area[b-znns335nkf] {
    position: relative;
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    background: #f8f9fa;
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
}

.cp-file-upload-area:hover[b-znns335nkf] {
    border-color: #0066cc;
    background: #f0f7ff;
}

.cp-file-input[b-znns335nkf] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.cp-file-upload-text[b-znns335nkf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: #666;
}

.cp-file-upload-icon[b-znns335nkf] {
    font-size: 2rem;
}

.cp-file-upload-hint[b-znns335nkf] {
    font-size: 0.875rem;
    color: #999;
}

.cp-file-list[b-znns335nkf] {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cp-file-item[b-znns335nkf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.cp-file-name[b-znns335nkf] {
    flex: 1;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-file-size[b-znns335nkf] {
    color: #666;
    font-size: 0.875rem;
}

.cp-file-remove[b-znns335nkf] {
    background: none;
    border: none;
    color: #dc3545;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
}

.cp-file-remove:hover[b-znns335nkf] {
    color: #a71d2a;
}

.cp-form-actions[b-znns335nkf] {
    margin-top: 1rem;
}

.cp-btn[b-znns335nkf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.cp-btn:disabled[b-znns335nkf] {
    opacity: 0.7;
    cursor: not-allowed;
}

.cp-btn-primary[b-znns335nkf] {
    background: #0066cc;
    color: white;
}

.cp-btn-primary:hover:not(:disabled)[b-znns335nkf] {
    background: #0052a3;
}

.cp-spinner[b-znns335nkf] {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-znns335nkf 0.8s linear infinite;
}

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

.cp-alert[b-znns335nkf] {
    padding: 1.5rem;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    text-align: center;
}

.cp-alert-success[b-znns335nkf] {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.cp-alert-content[b-znns335nkf] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.cp-alert-icon[b-znns335nkf] {
    font-size: 1.5rem;
    color: #28a745;
}

.cp-loading-overlay[b-znns335nkf] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 1000;
}

.cp-loading-spinner[b-znns335nkf] {
    width: 3rem;
    height: 3rem;
    border: 4px solid #ddd;
    border-top-color: #0066cc;
    border-radius: 50%;
    animation: spin-b-znns335nkf 0.8s linear infinite;
}
/* /Components/Pages/Orders.razor.rz.scp.css */
/* /Components/Pages/Payments.razor.rz.scp.css */
/* Container: padding + bottom spacer.
   Background and scroll are owned by Billing's .tab-container parent. */
.payments-container[b-rfwbykhh14] {
    padding: 24px;
    padding-bottom: 80px;
    box-sizing: border-box;
}

/* Compact Route Sales-style header */
.payments-header[b-rfwbykhh14] {
    margin-bottom: 16px;
}

.payments-title-row[b-rfwbykhh14] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.payments-title[b-rfwbykhh14] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.payments-title i[b-rfwbykhh14] {
    font-size: 1.5rem;
    color: var(--cp-primary);
}

.payments-title h2[b-rfwbykhh14] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cp-text);
}

/* Quick Stats Row (Jobs.razor pattern) */
.quick-stats[b-rfwbykhh14] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

/* Pagination Controls (Customers.razor.css pattern) */
.pagination-controls[b-rfwbykhh14] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    margin-top: 16px;
    margin-bottom: 16px;
    border-top: 1px solid var(--cp-border-light);
    flex-wrap: wrap;
    gap: 12px;
}

.pagination-controls-top[b-rfwbykhh14] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 4px 0 !important;
    border-top: none !important;
    border-bottom: none !important;
}

.pagination-info[b-rfwbykhh14] {
    font-size: 0.875rem;
    color: var(--cp-text-secondary);
}

.pagination-buttons[b-rfwbykhh14] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-current[b-rfwbykhh14] {
    font-size: 0.875rem;
    color: var(--cp-text);
    padding: 0 12px;
}

.pagination-size[b-rfwbykhh14] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-size label[b-rfwbykhh14] {
    font-size: 0.875rem;
    color: var(--cp-text-secondary);
}

.pagination-size .cp-select-sm[b-rfwbykhh14] {
    padding: 4px 8px;
    font-size: 0.875rem;
    min-width: 60px;
}

/* Responsive - Tablet */
@media (max-width: 991px) {
    .quick-stats[b-rfwbykhh14] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive - Mobile */
@media (max-width: 575px) {
    .payments-title h2[b-rfwbykhh14] {
        font-size: 1.25rem;
    }

    .quick-stats[b-rfwbykhh14] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .pagination-controls[b-rfwbykhh14] {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .pagination-buttons[b-rfwbykhh14] {
        justify-content: center;
    }

    .pagination-size[b-rfwbykhh14] {
        justify-content: center;
    }
}
/* /Components/Pages/Phone.razor.rz.scp.css */
.action-box[b-dkvlntw2hb] {
    width: 180px;
    height: 40px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    background-color: #5E5DF0;
    color: white;
    border-radius: 10px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    padding-top: 6px;
    margin: 30px 10px 10px 10px;
}
/* /Components/Pages/Pricebooks.razor.rz.scp.css */
/* ============================
   Pricebooks Page Layout
   ============================ */

.pricebooks-page[b-ftq02afxr9] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 0 80px 0;
    max-width: 1200px;
}

/* ============================
   Page Header
   ============================ */

.page-header[b-ftq02afxr9] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
}

.header-left[b-ftq02afxr9] {
    flex: 1;
    min-width: 200px;
}

.page-title[b-ftq02afxr9] {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--cp-dark);
    margin: 0 0 4px 0;
    letter-spacing: -0.02em;
}

.page-subtitle[b-ftq02afxr9] {
    font-size: 0.95rem;
    color: var(--cp-text-secondary);
    margin: 0;
}

.header-right[b-ftq02afxr9] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ============================
   Pricebook Selector
   ============================ */

.pricebook-selector[b-ftq02afxr9] {
    margin-bottom: 8px;
}

.pricebook-tabs[b-ftq02afxr9] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pricebook-tab[b-ftq02afxr9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: white;
    border: 1px solid var(--cp-border);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--cp-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.pricebook-tab:hover[b-ftq02afxr9] {
    border-color: var(--cp-primary);
    color: var(--cp-primary);
    background: rgba(59, 158, 255, 0.05);
}

.pricebook-tab-active[b-ftq02afxr9] {
    background: linear-gradient(135deg, #3B9EFF, #2563EB);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(59, 158, 255, 0.3);
}

.pricebook-tab-active:hover[b-ftq02afxr9] {
    background: linear-gradient(135deg, #2563EB, #1D4ED8);
    color: white;
}

.pricebook-dropdown[b-ftq02afxr9] {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 350px;
}

.dropdown-label[b-ftq02afxr9] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--cp-text-secondary);
    white-space: nowrap;
}

/* ============================
   Search & Actions Bar
   ============================ */

.search-actions-bar[b-ftq02afxr9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.cp-search-box[b-ftq02afxr9] {
    position: relative;
    flex: 1;
    max-width: 400px;
    min-width: 200px;
}

.cp-search-icon[b-ftq02afxr9] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cp-text-muted);
    font-size: 0.9rem;
}

.cp-search-input[b-ftq02afxr9] {
    width: 100%;
    padding: 10px 40px 10px 40px;
    font-size: 0.9rem;
    border: 1px solid var(--cp-border);
    border-radius: 8px;
    background: white;
    color: var(--cp-dark);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.cp-search-input:focus[b-ftq02afxr9] {
    outline: none;
    border-color: var(--cp-primary);
    box-shadow: 0 0 0 3px rgba(59, 158, 255, 0.15);
}

.cp-search-input[b-ftq02afxr9]::placeholder {
    color: var(--cp-text-muted);
}

.cp-search-clear[b-ftq02afxr9] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--cp-text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cp-search-clear:hover[b-ftq02afxr9] {
    color: var(--cp-dark);
}

.action-buttons[b-ftq02afxr9] {
    display: flex;
    gap: 10px;
}

/* ============================
   Button Styles
   ============================ */

.cp-btn[b-ftq02afxr9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.cp-btn-primary[b-ftq02afxr9] {
    background: linear-gradient(135deg, #3B9EFF, #2563EB);
    color: white;
    box-shadow: 0 2px 8px rgba(59, 158, 255, 0.3);
}

.cp-btn-primary:hover[b-ftq02afxr9] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 158, 255, 0.4);
}

.cp-btn-secondary[b-ftq02afxr9] {
    background: white;
    color: var(--cp-text-secondary);
    border: 1px solid var(--cp-border);
}

.cp-btn-secondary:hover[b-ftq02afxr9] {
    border-color: var(--cp-primary);
    color: var(--cp-primary);
    background: rgba(59, 158, 255, 0.05);
}

.cp-btn-lg[b-ftq02afxr9] {
    padding: 14px 28px;
    font-size: 1rem;
}

/* ============================
   Service Items Card Grid
   ============================ */

.service-items-grid[b-ftq02afxr9] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.cp-card[b-ftq02afxr9] {
    background: white;
    border: 1px solid var(--cp-border);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.2s;
}

.cp-card-interactive[b-ftq02afxr9] {
    cursor: pointer;
}

.cp-card-interactive:hover[b-ftq02afxr9] {
    border-color: var(--cp-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.service-item-card[b-ftq02afxr9] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.item-card-header[b-ftq02afxr9] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.item-info[b-ftq02afxr9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.item-name[b-ftq02afxr9] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cp-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-category[b-ftq02afxr9] {
    font-size: 0.8rem;
    color: var(--cp-text-muted);
}

.item-price[b-ftq02afxr9] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-shrink: 0;
}

.price-amount[b-ftq02afxr9] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cp-primary);
}

.price-unit[b-ftq02afxr9] {
    font-size: 0.8rem;
    color: var(--cp-text-secondary);
}

.item-description[b-ftq02afxr9] {
    font-size: 0.85rem;
    color: var(--cp-text-secondary);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-card-footer[b-ftq02afxr9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--cp-border-light);
}

.item-badges[b-ftq02afxr9] {
    display: flex;
    gap: 6px;
}

.cp-badge[b-ftq02afxr9] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 20px;
}

.cp-badge-info[b-ftq02afxr9] {
    background: rgba(59, 158, 255, 0.1);
    color: var(--cp-primary);
}

.cp-badge-success[b-ftq02afxr9] {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.item-sku[b-ftq02afxr9] {
    font-size: 0.8rem;
    color: var(--cp-text-muted);
    font-family: monospace;
}

/* ============================
   Empty States
   ============================ */

.empty-state[b-ftq02afxr9] {
    text-align: center;
    padding: 48px 24px;
    color: var(--cp-text-secondary);
    background: white;
    border: 1px solid var(--cp-border);
    border-radius: 12px;
}

.empty-state i[b-ftq02afxr9] {
    font-size: 2.5rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p[b-ftq02afxr9] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cp-dark);
    margin: 0 0 8px 0;
}

.empty-state span[b-ftq02afxr9] {
    font-size: 0.9rem;
    color: var(--cp-text-secondary);
}

.empty-state-actions[b-ftq02afxr9] {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.empty-state-large[b-ftq02afxr9] {
    padding: 80px 24px;
}

.empty-state-large .empty-icon[b-ftq02afxr9] {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cp-bg-page);
    border: 2px dashed var(--cp-border);
    border-radius: 16px;
}

.empty-state-large .empty-icon i[b-ftq02afxr9] {
    font-size: 2rem;
    margin: 0;
}

.empty-state-large h3[b-ftq02afxr9] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cp-dark);
    margin: 0 0 8px 0;
}

/* ============================
   Loading
   ============================ */

.loading-container[b-ftq02afxr9] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

/* ============================
   Dialog Styles
   ============================ */

.dialog-header[b-ftq02afxr9] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cp-dark);
}

.dialog-icon[b-ftq02afxr9] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.dialog-icon-blue[b-ftq02afxr9] {
    background: linear-gradient(135deg, #3B9EFF, #2563EB);
    color: white;
}

.dialog-icon-teal[b-ftq02afxr9] {
    background: linear-gradient(135deg, #14B8A6, #0D9488);
    color: white;
}

.dialog-icon-purple[b-ftq02afxr9] {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    color: white;
}

.dialog-form[b-ftq02afxr9] {
    padding: 8px 0;
}

.dialog-footer[b-ftq02afxr9] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 8px;
}

/* ============================
   Form Styles
   ============================ */

.form-section[b-ftq02afxr9] {
    margin-bottom: 8px;
}

.form-section-title[b-ftq02afxr9] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cp-dark);
    margin: 0 0 16px 0;
}

.form-grid[b-ftq02afxr9] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    margin-bottom: 12px;
}

.form-group[b-ftq02afxr9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.span-12[b-ftq02afxr9] {
    grid-column: span 12;
}

.form-group.span-8[b-ftq02afxr9] {
    grid-column: span 8;
}

.form-group.span-6[b-ftq02afxr9] {
    grid-column: span 6;
}

.form-group.span-5[b-ftq02afxr9] {
    grid-column: span 5;
}

.form-group.span-4[b-ftq02afxr9] {
    grid-column: span 4;
}

.form-group.span-3[b-ftq02afxr9] {
    grid-column: span 3;
}

.form-label[b-ftq02afxr9] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cp-text-secondary);
    margin: 0;
}

.form-input[b-ftq02afxr9] {
    padding: 10px 14px;
    font-size: 0.9rem;
    border: 1px solid var(--cp-border);
    border-radius: 8px;
    background: white;
    color: var(--cp-dark);
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.form-input:focus[b-ftq02afxr9] {
    outline: none;
    border-color: var(--cp-primary);
    box-shadow: 0 0 0 3px rgba(59, 158, 255, 0.15);
}

.form-input[b-ftq02afxr9]::placeholder {
    color: var(--cp-text-muted);
}

.form-section-divider[b-ftq02afxr9] {
    height: 1px;
    background: var(--cp-border-light);
    margin: 20px 0;
}

/* ============================
   Options Row (Checkboxes)
   ============================ */

.options-row[b-ftq02afxr9] {
    display: flex;
    gap: 24px;
}

.checkbox-item[b-ftq02afxr9] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--cp-dark);
}

.checkbox-item input[type="checkbox"][b-ftq02afxr9] {
    width: 18px;
    height: 18px;
    accent-color: var(--cp-primary);
    cursor: pointer;
}

/* ============================
   Import Dialog Specific
   ============================ */

.import-tabs[b-ftq02afxr9] {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--cp-border-light);
}

.import-tab[b-ftq02afxr9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: transparent;
    border: 1px solid var(--cp-border);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--cp-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.import-tab:hover[b-ftq02afxr9] {
    border-color: var(--cp-primary);
    color: var(--cp-primary);
}

.import-tab-active[b-ftq02afxr9] {
    background: rgba(59, 158, 255, 0.1);
    border-color: var(--cp-primary);
    color: var(--cp-primary);
}

.import-content[b-ftq02afxr9] {
    min-height: 200px;
}

.template-items-list[b-ftq02afxr9] {
    margin-top: 20px;
    border: 1px solid var(--cp-border);
    border-radius: 8px;
    overflow: hidden;
}

.template-list-header[b-ftq02afxr9] {
    padding: 12px 16px;
    background: var(--cp-bg-page);
    border-bottom: 1px solid var(--cp-border);
}

.template-items[b-ftq02afxr9] {
    max-height: 300px;
    overflow-y: auto;
}

.template-item[b-ftq02afxr9] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid var(--cp-border-light);
}

.template-item:last-child[b-ftq02afxr9] {
    border-bottom: none;
}

.template-item:hover[b-ftq02afxr9] {
    background: rgba(59, 158, 255, 0.05);
}

.template-item input[type="checkbox"][b-ftq02afxr9] {
    width: 18px;
    height: 18px;
    accent-color: var(--cp-primary);
    flex-shrink: 0;
}

.template-item-info[b-ftq02afxr9] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.template-item-name[b-ftq02afxr9] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cp-dark);
}

.template-item-desc[b-ftq02afxr9] {
    font-size: 0.8rem;
    color: var(--cp-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.template-item-price[b-ftq02afxr9] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cp-primary);
    flex-shrink: 0;
}

.upload-area[b-ftq02afxr9] {
    padding: 24px;
    background: var(--cp-bg-page);
    border: 2px dashed var(--cp-border);
    border-radius: 8px;
    text-align: center;
}

.manual-entry[b-ftq02afxr9] {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--cp-border-light);
}

.manual-entry-label[b-ftq02afxr9] {
    font-size: 0.9rem;
    color: var(--cp-text-secondary);
    margin: 0 0 16px 0;
}

/* ============================
   Responsive Design
   ============================ */

@media (max-width: 900px) {
    .service-items-grid[b-ftq02afxr9] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .pricebooks-page[b-ftq02afxr9] {
        gap: 16px;
        padding: 16px 0;
    }

    .page-header[b-ftq02afxr9] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-right[b-ftq02afxr9] {
        justify-content: flex-end;
    }

    .page-title[b-ftq02afxr9] {
        font-size: 1.5rem;
    }

    .search-actions-bar[b-ftq02afxr9] {
        flex-direction: column;
        align-items: stretch;
    }

    .cp-search-box[b-ftq02afxr9] {
        max-width: 100%;
    }

    .action-buttons[b-ftq02afxr9] {
        justify-content: flex-end;
    }

    .pricebook-tabs[b-ftq02afxr9] {
        flex-direction: column;
    }

    .pricebook-tab[b-ftq02afxr9] {
        justify-content: center;
    }

    .form-grid[b-ftq02afxr9] {
        grid-template-columns: 1fr;
    }

    .form-group.span-12[b-ftq02afxr9],
    .form-group.span-8[b-ftq02afxr9],
    .form-group.span-6[b-ftq02afxr9],
    .form-group.span-5[b-ftq02afxr9],
    .form-group.span-4[b-ftq02afxr9],
    .form-group.span-3[b-ftq02afxr9] {
        grid-column: span 1;
    }

    .options-row[b-ftq02afxr9] {
        flex-direction: column;
        gap: 12px;
    }

    .btn-text[b-ftq02afxr9] {
        display: none;
    }

    .dialog-footer[b-ftq02afxr9] {
        flex-direction: column;
    }

    .dialog-footer .cp-btn[b-ftq02afxr9] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .item-card-header[b-ftq02afxr9] {
        flex-direction: column;
        gap: 8px;
    }

    .item-price[b-ftq02afxr9] {
        align-self: flex-start;
    }
}
/* /Components/Pages/Products.razor.rz.scp.css */
/* ============================
   Products Page Layout
   ============================ */

.page-content[b-fgo96ldvru] {
    height: 100dvh;
}

.products-page[b-fgo96ldvru] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 0;
    max-width: 1200px;
}

/* ============================
   Page Header
   ============================ */

.page-header[b-fgo96ldvru] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
}

.header-left[b-fgo96ldvru] {
    flex: 1;
    min-width: 200px;
}

.page-title[b-fgo96ldvru] {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--cp-dark);
    margin: 0 0 4px 0;
    letter-spacing: -0.02em;
}

.page-subtitle[b-fgo96ldvru] {
    font-size: 0.95rem;
    color: var(--cp-text-secondary);
    margin: 0;
}

.header-right[b-fgo96ldvru] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ============================
   Category Filter Chips
   ============================ */

.category-filter-section[b-fgo96ldvru] {
    margin-bottom: 8px;
}

.category-chips[b-fgo96ldvru] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.category-chip[b-fgo96ldvru] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: white;
    border: 1px solid var(--cp-border);
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--cp-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.category-chip:hover[b-fgo96ldvru] {
    border-color: var(--cp-primary);
    color: var(--cp-primary);
    background: rgba(59, 158, 255, 0.05);
}

.category-chip-active[b-fgo96ldvru] {
    background: linear-gradient(135deg, #3B9EFF, #2563EB);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(59, 158, 255, 0.3);
}

.category-chip-active:hover[b-fgo96ldvru] {
    background: linear-gradient(135deg, #2563EB, #1D4ED8);
    color: white;
}

.category-chip-active .chip-count[b-fgo96ldvru] {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

.chip-count[b-fgo96ldvru] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: var(--cp-border-light);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cp-text-secondary);
}

.category-chip-add[b-fgo96ldvru] {
    width: 42px;
    height: 42px;
    padding: 0;
    justify-content: center;
    border-style: dashed;
    border-color: var(--cp-border);
    color: var(--cp-text-muted);
}

.category-chip-add:hover[b-fgo96ldvru] {
    border-color: var(--cp-primary);
    color: var(--cp-primary);
    background: rgba(59, 158, 255, 0.05);
    border-style: solid;
}

/* ============================
   Search & Actions Bar
   ============================ */

.search-actions-bar[b-fgo96ldvru] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.cp-search-box[b-fgo96ldvru] {
    position: relative;
    flex: 1;
    max-width: 400px;
    min-width: 200px;
}

.cp-search-icon[b-fgo96ldvru] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cp-text-muted);
    font-size: 0.9rem;
}

.cp-search-input[b-fgo96ldvru] {
    width: 100%;
    padding: 10px 40px 10px 40px;
    font-size: 0.9rem;
    border: 1px solid var(--cp-border);
    border-radius: 8px;
    background: white;
    color: var(--cp-dark);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.cp-search-input:focus[b-fgo96ldvru] {
    outline: none;
    border-color: var(--cp-primary);
    box-shadow: 0 0 0 3px rgba(59, 158, 255, 0.15);
}

.cp-search-input[b-fgo96ldvru]::placeholder {
    color: var(--cp-text-muted);
}

.cp-search-clear[b-fgo96ldvru] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--cp-text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cp-search-clear:hover[b-fgo96ldvru] {
    color: var(--cp-dark);
}

/* ============================
   Products Grid Container
   ============================ */

.products-grid-container[b-fgo96ldvru] {
    background: white;
    border: 1px solid var(--cp-border);
    border-radius: 12px;
    overflow: visible;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.products-grid-container[b-fgo96ldvru]  .e-grid {
    overflow: visible !important;
}

.products-grid-container[b-fgo96ldvru]  .e-gridcontent {
    overflow: visible !important;
}

.products-grid-container[b-fgo96ldvru]  .e-content {
    overflow: visible !important;
}

.products-grid-container[b-fgo96ldvru]  .e-table {
    overflow: visible !important;
}

.products-grid-container[b-fgo96ldvru]  .e-rowcell {
    overflow: visible !important;
}

.products-grid-container[b-fgo96ldvru]  .e-grid {
    border: none;
}

.products-grid-container[b-fgo96ldvru]  .e-gridheader {
    background: var(--cp-bg-page);
    border-bottom: 1px solid var(--cp-border);
}

.products-grid-container[b-fgo96ldvru]  .e-headercell {
    background: transparent;
    font-weight: 600;
    color: var(--cp-text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.products-grid-container[b-fgo96ldvru]  .e-row {
    cursor: pointer;
    transition: background-color 0.15s;
}

.products-grid-container[b-fgo96ldvru]  .e-row:hover {
    background: rgba(59, 158, 255, 0.04) !important;
}

.products-grid-container[b-fgo96ldvru]  .e-selectionbackground {
    background: rgba(59, 158, 255, 0.08) !important;
}

.products-grid-container[b-fgo96ldvru]  .e-rowcell {
    padding: 16px 12px;
    border-color: var(--cp-border-light);
}

/* Grid Cell Styling */
.product-name-cell[b-fgo96ldvru] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.product-name[b-fgo96ldvru] {
    font-weight: 600;
    color: var(--cp-dark);
    font-size: 0.95rem;
}

.category-badge[b-fgo96ldvru] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: linear-gradient(135deg, rgba(59, 158, 255, 0.1), rgba(37, 99, 235, 0.1));
    color: var(--cp-primary);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
}

.unit-badge[b-fgo96ldvru] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--cp-border-light);
    color: var(--cp-text-secondary);
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* ============================
   Product Actions Dropdown
   ============================ */

.product-actions-dropdown[b-fgo96ldvru] {
    position: relative;
    display: flex;
    justify-content: center;
}

.btn-icon[b-fgo96ldvru] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--cp-text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-icon:hover[b-fgo96ldvru] {
    background: var(--cp-border-light);
    color: var(--cp-dark);
}

.btn-menu[b-fgo96ldvru] {
    font-size: 1rem;
}

.dropdown-menu[b-fgo96ldvru] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    background: var(--cp-bg-card, white);
    border: 1px solid var(--cp-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    min-width: 140px;
    padding: 6px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.dropdown-menu.show[b-fgo96ldvru] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item[b-fgo96ldvru] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: var(--cp-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.dropdown-item:hover[b-fgo96ldvru] {
    background: var(--cp-border-light);
}

.dropdown-item i[b-fgo96ldvru] {
    width: 16px;
    text-align: center;
    color: var(--cp-text-secondary);
}

.dropdown-item-danger[b-fgo96ldvru] {
    color: var(--cp-danger, #EF4444);
}

.dropdown-item-danger i[b-fgo96ldvru] {
    color: var(--cp-danger, #EF4444);
}

.dropdown-item-danger:hover[b-fgo96ldvru] {
    background: #FEF2F2;
}

/* ============================
   Empty States
   ============================ */

.empty-state[b-fgo96ldvru] {
    text-align: center;
    padding: 48px 24px;
    color: var(--cp-text-secondary);
    background: white;
    border: 1px solid var(--cp-border);
    border-radius: 12px;
}

.empty-state i[b-fgo96ldvru] {
    font-size: 2.5rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p[b-fgo96ldvru] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cp-dark);
    margin: 0 0 8px 0;
}

.empty-state span[b-fgo96ldvru] {
    font-size: 0.9rem;
    color: var(--cp-text-secondary);
}

.empty-state-actions[b-fgo96ldvru] {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.empty-state-large[b-fgo96ldvru] {
    padding: 80px 24px;
}

.empty-state-large .empty-icon[b-fgo96ldvru] {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cp-bg-page);
    border: 2px dashed var(--cp-border);
    border-radius: 16px;
}

.empty-state-large .empty-icon i[b-fgo96ldvru] {
    font-size: 2rem;
    margin: 0;
}

.empty-state-large h3[b-fgo96ldvru] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cp-dark);
    margin: 0 0 8px 0;
}

/* ============================
   Loading
   ============================ */

.loading-container[b-fgo96ldvru] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

/* ============================
   Button Styles
   ============================ */

.cp-btn[b-fgo96ldvru] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.cp-btn-primary[b-fgo96ldvru] {
    background: linear-gradient(135deg, #3B9EFF, #2563EB);
    color: white;
    box-shadow: 0 2px 8px rgba(59, 158, 255, 0.3);
}

.cp-btn-primary:hover[b-fgo96ldvru] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 158, 255, 0.4);
}

.cp-btn-primary:disabled[b-fgo96ldvru] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.cp-btn-secondary[b-fgo96ldvru] {
    background: white;
    color: var(--cp-text-secondary);
    border: 1px solid var(--cp-border);
}

.cp-btn-secondary:hover[b-fgo96ldvru] {
    border-color: var(--cp-primary);
    color: var(--cp-primary);
    background: rgba(59, 158, 255, 0.05);
}

.cp-btn-lg[b-fgo96ldvru] {
    padding: 14px 28px;
    font-size: 1rem;
}

.cp-btn-danger[b-fgo96ldvru] {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    color: white;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.cp-btn-danger:hover[b-fgo96ldvru] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* ============================
   Dialog Styles
   ============================ */

.dialog-header[b-fgo96ldvru] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cp-dark);
}

.dialog-icon[b-fgo96ldvru] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.dialog-icon-blue[b-fgo96ldvru] {
    background: linear-gradient(135deg, #3B9EFF, #2563EB);
    color: white;
}

.dialog-icon-teal[b-fgo96ldvru] {
    background: linear-gradient(135deg, #14B8A6, #0D9488);
    color: white;
}

.dialog-icon-danger[b-fgo96ldvru] {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    color: white;
}

.delete-confirm-message[b-fgo96ldvru] {
    font-size: 0.95rem;
    color: var(--cp-dark);
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.dialog-form[b-fgo96ldvru] {
    padding: 8px 0;
}

.dialog-footer[b-fgo96ldvru] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 8px;
}

/* ============================
   Form Styles
   ============================ */

.form-section[b-fgo96ldvru] {
    margin-bottom: 8px;
}

.form-section-title[b-fgo96ldvru] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cp-dark);
    margin: 0 0 16px 0;
}

.form-grid[b-fgo96ldvru] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    margin-bottom: 12px;
}

.form-group[b-fgo96ldvru] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.span-12[b-fgo96ldvru] {
    grid-column: span 12;
}

.form-group.span-6[b-fgo96ldvru] {
    grid-column: span 6;
}

.form-label[b-fgo96ldvru] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cp-text-secondary);
    margin: 0;
}

.form-label .required[b-fgo96ldvru] {
    color: var(--cp-danger, #EF4444);
}

.form-input[b-fgo96ldvru] {
    padding: 10px 14px;
    font-size: 0.9rem;
    border: 1px solid var(--cp-border);
    border-radius: 8px;
    background: white;
    color: var(--cp-dark);
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.form-input:focus[b-fgo96ldvru] {
    outline: none;
    border-color: var(--cp-primary);
    box-shadow: 0 0 0 3px rgba(59, 158, 255, 0.15);
}

.form-input[b-fgo96ldvru]::placeholder {
    color: var(--cp-text-muted);
}

.form-textarea[b-fgo96ldvru] {
    resize: vertical;
    font-family: inherit;
    min-height: 80px;
}

.form-section-divider[b-fgo96ldvru] {
    height: 1px;
    background: var(--cp-border-light);
    margin: 20px 0;
}

.form-hint[b-fgo96ldvru] {
    font-size: 0.8rem;
    color: var(--cp-text-muted);
    margin: 8px 0 0 0;
    display: block;
}

/* ============================
   Category Selection Chips (Dialog)
   ============================ */

.category-select-chips[b-fgo96ldvru] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.category-select-chip[b-fgo96ldvru] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: white;
    border: 1px solid var(--cp-border);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--cp-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.category-select-chip:hover[b-fgo96ldvru] {
    border-color: var(--cp-primary);
    color: var(--cp-primary);
    background: rgba(59, 158, 255, 0.05);
}

.category-select-chip-active[b-fgo96ldvru] {
    background: var(--cp-primary);
    color: white;
    border-color: var(--cp-primary);
}

.category-select-chip-active:hover[b-fgo96ldvru] {
    background: var(--cp-primary-hover, #2B8AE8);
    color: white;
}

.category-select-chip-new[b-fgo96ldvru] {
    border-style: dashed;
    color: var(--cp-text-muted);
}

.category-select-chip-new:hover[b-fgo96ldvru] {
    border-style: solid;
}

/* ============================
   Responsive Design
   ============================ */

@media (max-width: 900px) {
    .form-grid[b-fgo96ldvru] {
        grid-template-columns: 1fr;
    }

    .form-group.span-6[b-fgo96ldvru] {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .products-page[b-fgo96ldvru] {
        gap: 16px;
        padding: 16px 0;
    }

    .page-header[b-fgo96ldvru] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-right[b-fgo96ldvru] {
        justify-content: flex-end;
    }

    .page-title[b-fgo96ldvru] {
        font-size: 1.5rem;
    }

    .category-chips[b-fgo96ldvru] {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }

    .category-chip[b-fgo96ldvru] {
        flex-shrink: 0;
    }

    .search-actions-bar[b-fgo96ldvru] {
        flex-direction: column;
        align-items: stretch;
    }

    .cp-search-box[b-fgo96ldvru] {
        max-width: 100%;
    }

    .btn-text[b-fgo96ldvru] {
        display: none;
    }

    .dialog-footer[b-fgo96ldvru] {
        flex-direction: column;
    }

    .dialog-footer .cp-btn[b-fgo96ldvru] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/RouteCommandCenter.razor.rz.scp.css */
/* Route Command Center - Scoped Styles */

/* Tab Navigation */
.rcc-tab-nav[b-5hn86wdw23] {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    padding: 4px;
    background: var(--cp-bg-card);
    border-radius: 12px;
    border: 1px solid var(--cp-border);
    width: fit-content;
}

.rcc-tab[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--cp-text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    min-height: 44px; /* Touch target */
}

.rcc-tab:hover[b-5hn86wdw23] {
    background: var(--cp-border-light);
    color: var(--cp-text);
}

.rcc-tab-active[b-5hn86wdw23] {
    background: var(--cp-primary);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(59, 158, 255, 0.3);
}

.rcc-tab-active:hover[b-5hn86wdw23] {
    background: var(--cp-primary-hover);
    color: #FFFFFF;
}

.rcc-tab i[b-5hn86wdw23] {
    font-size: 1rem;
}

/* Content Area */
.rcc-content[b-5hn86wdw23] {
    min-height: 400px;
}

/* Week Navigation */
.rcc-week-nav[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: var(--cp-bg-card);
    border-radius: 12px;
    border: 1px solid var(--cp-border);
    width: fit-content;
}

.rcc-week-btn[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 8px;
    background: var(--cp-border-light);
    color: var(--cp-text-secondary);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.rcc-week-btn:hover[b-5hn86wdw23] {
    background: var(--cp-primary-light);
    color: var(--cp-primary);
}

.rcc-week-btn:active[b-5hn86wdw23] {
    transform: scale(0.95);
}

.rcc-week-label[b-5hn86wdw23] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 160px;
}

.rcc-week-title[b-5hn86wdw23] {
    font-size: 0.75rem;
    color: var(--cp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rcc-week-dates[b-5hn86wdw23] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cp-text);
}

.rcc-week-current[b-5hn86wdw23] {
    color: var(--cp-primary);
}

.rcc-today-btn[b-5hn86wdw23] {
    padding: 8px 16px;
    border: 1px solid var(--cp-primary);
    border-radius: 50px;
    background: transparent;
    color: var(--cp-primary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    min-height: 36px;
}

.rcc-today-btn:hover[b-5hn86wdw23] {
    background: var(--cp-primary);
    color: #FFFFFF;
}

/* Helper text styles */
.cp-text-sm[b-5hn86wdw23] {
    font-size: 0.8rem;
}

.cp-text-muted[b-5hn86wdw23] {
    color: var(--cp-text-muted);
}

/* Quick Stats Row */
.rcc-stats-row[b-5hn86wdw23] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
    transition: opacity 0.2s;
}

.rcc-stats-loading[b-5hn86wdw23] {
    opacity: 0.6;
}

.rcc-stats-row .cp-stat-card[b-5hn86wdw23] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.rcc-stats-row .cp-stat-label[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

.rcc-stats-row .cp-stat-label i[b-5hn86wdw23] {
    font-size: 0.75rem;
}

/* ============================================
   Status Sections
   ============================================ */
.rcc-sections[b-5hn86wdw23] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: opacity 0.2s;
}

.rcc-sections-loading[b-5hn86wdw23] {
    opacity: 0.6;
    pointer-events: none;
}

.rcc-section[b-5hn86wdw23] {
    background: var(--cp-bg-card);
    border: 1px solid var(--cp-border);
    border-radius: 12px;
    overflow: hidden;
}

.rcc-section-header[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    min-height: 44px;
    transition: background-color 0.2s;
}

.rcc-section-header:hover[b-5hn86wdw23] {
    background: var(--cp-border-light);
}

.rcc-section-title[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--cp-text);
}

.rcc-section-title i[b-5hn86wdw23] {
    font-size: 1.1rem;
}

.rcc-icon-success[b-5hn86wdw23] { color: var(--cp-success); }
.rcc-icon-warning[b-5hn86wdw23] { color: var(--cp-warning); }
.rcc-icon-danger[b-5hn86wdw23] { color: var(--cp-danger); }
.rcc-icon-gray[b-5hn86wdw23] { color: var(--cp-text-muted); }

.rcc-section-content[b-5hn86wdw23] {
    padding: 0 20px 20px 20px;
    animation: slideDown-b-5hn86wdw23 0.2s ease-out;
}

@keyframes slideDown-b-5hn86wdw23 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.rcc-empty-section[b-5hn86wdw23] {
    padding: 24px;
    text-align: center;
    color: var(--cp-text-muted);
    font-size: 0.9rem;
}

/* Cards Grid */
.rcc-cards-grid[b-5hn86wdw23] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* Trip Cards */
.rcc-trip-card[b-5hn86wdw23] {
    padding: 16px;
}

.rcc-trip-header[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.rcc-trip-route[b-5hn86wdw23] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cp-text);
}

.rcc-trip-details[b-5hn86wdw23] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rcc-trip-driver[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--cp-text-secondary);
}

.rcc-trip-schedule[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--cp-text-secondary);
}

.rcc-trip-schedule i[b-5hn86wdw23] {
    color: var(--cp-text-muted);
}

.rcc-trip-progress[b-5hn86wdw23] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--cp-text-secondary);
}

.rcc-trip-paused[b-5hn86wdw23] {
    border-left: 3px solid var(--cp-warning);
}

.rcc-trip-completed[b-5hn86wdw23] {
    opacity: 0.7;
}

/* Avatar */
.rcc-avatar[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cp-primary);
    color: white;
    font-weight: 600;
    font-size: 0.75rem;
}

.rcc-avatar-sm[b-5hn86wdw23] {
    width: 32px;
    height: 32px;
}

/* Progress Bar */
.rcc-progress-bar[b-5hn86wdw23] {
    width: 100%;
    height: 6px;
    background: var(--cp-border-light);
    border-radius: 3px;
    overflow: hidden;
}

.rcc-progress-fill[b-5hn86wdw23] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.rcc-progress-success[b-5hn86wdw23] { background: var(--cp-success); }
.rcc-progress-warning[b-5hn86wdw23] { background: var(--cp-warning); }
.rcc-progress-complete[b-5hn86wdw23] { background: var(--cp-text-muted); }

/* Route Cards (Needs Scheduling) */
.rcc-route-card[b-5hn86wdw23] {
    padding: 16px;
}

.rcc-route-needs-scheduling[b-5hn86wdw23] {
    border-left: 3px solid var(--cp-danger);
}

.rcc-route-header[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.rcc-route-name[b-5hn86wdw23] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cp-text);
}

.rcc-route-details[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rcc-route-stops[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--cp-text-secondary);
}

.rcc-route-stops i[b-5hn86wdw23] {
    color: var(--cp-text-muted);
}

/* Placeholder Cards */
.rcc-placeholder[b-5hn86wdw23] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 24px;
    min-height: 300px;
}

.rcc-placeholder-icon[b-5hn86wdw23] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--cp-primary-light);
    color: var(--cp-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 20px;
}

.rcc-placeholder h3[b-5hn86wdw23] {
    margin: 0 0 8px 0;
    color: var(--cp-text);
    font-size: 1.25rem;
}

.rcc-placeholder p[b-5hn86wdw23] {
    margin: 0;
    font-size: 0.9rem;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .rcc-tab-nav[b-5hn86wdw23] {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .rcc-tab-nav[b-5hn86wdw23]::-webkit-scrollbar {
        display: none;
    }

    .rcc-tab[b-5hn86wdw23] {
        padding: 12px 16px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .rcc-tab span[b-5hn86wdw23] {
        /* Keep text visible on mobile */
    }

    .rcc-week-nav[b-5hn86wdw23] {
        width: 100%;
        justify-content: space-between;
    }

    .rcc-week-label[b-5hn86wdw23] {
        min-width: auto;
        flex: 1;
    }

    .rcc-week-dates[b-5hn86wdw23] {
        font-size: 1rem;
    }

    .rcc-today-btn[b-5hn86wdw23] {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .rcc-stats-row[b-5hn86wdw23] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .rcc-stats-row .cp-stat-card[b-5hn86wdw23] {
        padding: 16px 12px;
    }

    .rcc-stats-row .cp-stat-value[b-5hn86wdw23] {
        font-size: 1.5rem;
    }

    .rcc-stats-row .cp-stat-label[b-5hn86wdw23] {
        font-size: 0.65rem;
    }

    .rcc-placeholder[b-5hn86wdw23] {
        padding: 40px 16px;
        min-height: 200px;
    }

    .rcc-placeholder-icon[b-5hn86wdw23] {
        width: 64px;
        height: 64px;
        font-size: 1.5rem;
    }

    /* Sections mobile */
    .rcc-section-header[b-5hn86wdw23] {
        padding: 14px 16px;
    }

    .rcc-section-title[b-5hn86wdw23] {
        font-size: 0.9rem;
        gap: 10px;
    }

    .rcc-section-content[b-5hn86wdw23] {
        padding: 0 16px 16px 16px;
    }

    .rcc-cards-grid[b-5hn86wdw23] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .rcc-trip-card[b-5hn86wdw23],
    .rcc-route-card[b-5hn86wdw23] {
        padding: 14px;
    }

    .rcc-route-details[b-5hn86wdw23] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .rcc-route-details .cp-btn[b-5hn86wdw23] {
        width: 100%;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .rcc-tab[b-5hn86wdw23] {
        padding: 10px 12px;
        font-size: 0.85rem;
    }

    .rcc-tab i[b-5hn86wdw23] {
        font-size: 0.9rem;
    }
}

/* ============================================
   Routes Gallery Styles (Epic 2)
   ============================================ */

/* Gallery Header with Search and Sort */
.rcc-gallery-header[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.rcc-search-box[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 200px;
    max-width: 400px;
    padding: 10px 16px;
    background: var(--cp-bg-card);
    border: 1px solid var(--cp-border);
    border-radius: 50px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.rcc-search-box:focus-within[b-5hn86wdw23] {
    border-color: var(--cp-primary);
    box-shadow: 0 0 0 3px var(--cp-primary-light);
}

.rcc-search-box i[b-5hn86wdw23] {
    color: var(--cp-text-muted);
    font-size: 0.9rem;
}

.rcc-search-input[b-5hn86wdw23] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    color: var(--cp-text);
    outline: none;
}

.rcc-search-input[b-5hn86wdw23]::placeholder {
    color: var(--cp-text-muted);
}

.rcc-search-clear[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: var(--cp-border-light);
    color: var(--cp-text-secondary);
    cursor: pointer;
    transition: background-color 0.2s;
}

.rcc-search-clear:hover[b-5hn86wdw23] {
    background: var(--cp-border);
}

.rcc-sort-dropdown[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rcc-sort-dropdown label[b-5hn86wdw23] {
    font-size: 0.85rem;
    color: var(--cp-text-secondary);
    white-space: nowrap;
}

.rcc-sort-select[b-5hn86wdw23] {
    padding: 10px 16px;
    border: 1px solid var(--cp-border);
    border-radius: 8px;
    background: var(--cp-bg-card);
    font-size: 0.9rem;
    color: var(--cp-text);
    cursor: pointer;
    outline: none;
    min-width: 180px;
}

.rcc-sort-select:focus[b-5hn86wdw23] {
    border-color: var(--cp-primary);
}

/* Gallery Grid */
.rcc-gallery[b-5hn86wdw23] {
    transition: opacity 0.2s;
}

.rcc-gallery-loading[b-5hn86wdw23] {
    opacity: 0.6;
    pointer-events: none;
}

.rcc-gallery-grid[b-5hn86wdw23] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

/* Empty Gallery State */
.rcc-empty-gallery[b-5hn86wdw23] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
    background: var(--cp-bg-card);
    border: 1px dashed var(--cp-border);
    border-radius: 12px;
    color: var(--cp-text-muted);
}

.rcc-empty-gallery i[b-5hn86wdw23] {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.rcc-empty-gallery p[b-5hn86wdw23] {
    margin: 0;
    font-size: 1rem;
}

/* Gallery Card */
.rcc-gallery-card[b-5hn86wdw23] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}

.rcc-gallery-card-header[b-5hn86wdw23] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.rcc-gallery-card-title[b-5hn86wdw23] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cp-text);
    line-height: 1.3;
}

.rcc-gallery-card-desc[b-5hn86wdw23] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--cp-text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Gallery Stats Grid */
.rcc-gallery-stats[b-5hn86wdw23] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 12px 0;
    border-top: 1px solid var(--cp-border-light);
    border-bottom: 1px solid var(--cp-border-light);
}

.rcc-gallery-stat[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--cp-text-secondary);
}

.rcc-gallery-stat i[b-5hn86wdw23] {
    width: 16px;
    color: var(--cp-text-muted);
    font-size: 0.8rem;
}

/* Gallery Card Footer */
.rcc-gallery-card-footer[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}

.rcc-gallery-trips[b-5hn86wdw23] {
    font-size: 0.8rem;
    color: var(--cp-text-muted);
}

/* Responsive - Gallery Mobile */
@media (max-width: 768px) {
    .rcc-gallery-header[b-5hn86wdw23] {
        flex-direction: column;
        align-items: stretch;
    }

    .rcc-search-box[b-5hn86wdw23] {
        max-width: none;
    }

    .rcc-sort-dropdown[b-5hn86wdw23] {
        justify-content: space-between;
    }

    .rcc-sort-select[b-5hn86wdw23] {
        flex: 1;
    }

    .rcc-gallery-grid[b-5hn86wdw23] {
        grid-template-columns: 1fr;
    }

    .rcc-gallery-stats[b-5hn86wdw23] {
        grid-template-columns: 1fr;
    }

    .rcc-gallery-card-footer[b-5hn86wdw23] {
        flex-direction: column;
        align-items: stretch;
    }

    .rcc-gallery-trips[b-5hn86wdw23] {
        text-align: center;
        margin-bottom: 8px;
    }

    .rcc-gallery-card-footer .cp-btn[b-5hn86wdw23] {
        width: 100%;
    }
}

/* ============================================
   Schedule Trip Entry Point (Epic 3 Refactor)
   ============================================ */

.rcc-schedule-entry[b-5hn86wdw23] {
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--cp-border-light);
}

.rcc-schedule-entry .rcc-schedule-btn[b-5hn86wdw23] {
    width: 100%;
    min-height: 44px;
}

/* Scheduled status indicator on route cards */
.rcc-scheduled-status[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--cp-success);
    padding: 6px 12px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 6px;
}

.rcc-scheduled-status i[b-5hn86wdw23] {
    font-size: 0.75rem;
}

/* Schedule button in gallery footer */
.rcc-gallery-card-footer .rcc-schedule-btn[b-5hn86wdw23] {
    min-height: 40px;
}

/* ============================================
   Schedule Trip Modal (Epic 3 Refactor)
   ============================================ */

.rcc-schedule-dialog .rcc-dialog-route-context[b-5hn86wdw23] {
    margin: 0 0 20px 0;
    padding: 12px 16px;
    background: var(--cp-border-light);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--cp-text);
}

.rcc-icon-primary[b-5hn86wdw23] {
    color: var(--cp-primary);
}

.rcc-validation-error[b-5hn86wdw23] {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--cp-danger);
}

/* Day past styling in modal */
.rcc-day-past[b-5hn86wdw23] {
    color: var(--cp-text-muted);
}

.rcc-schedule-btn[b-5hn86wdw23] {
    flex-shrink: 0;
    min-width: 100px;
}

.rcc-schedule-btn:disabled[b-5hn86wdw23] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Responsive - Schedule Entry Mobile */
@media (max-width: 768px) {
    .rcc-schedule-entry .rcc-schedule-btn[b-5hn86wdw23] {
        min-height: 48px;
    }

    .rcc-scheduled-status[b-5hn86wdw23] {
        justify-content: center;
        width: 100%;
    }
}

/* ============================================
   Trip Lifecycle Actions (Epic 4)
   ============================================ */

/* Trip Action Buttons Container */
.rcc-trip-actions[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--cp-border-light);
}

/* Individual Action Button */
.rcc-action-btn[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--cp-border);
    border-radius: 6px;
    background: var(--cp-bg-card);
    color: var(--cp-text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 36px;
    white-space: nowrap;
}

.rcc-action-btn:hover[b-5hn86wdw23] {
    background: var(--cp-border-light);
    color: var(--cp-text);
}

.rcc-action-btn:active[b-5hn86wdw23] {
    transform: scale(0.97);
}

.rcc-action-btn i[b-5hn86wdw23] {
    font-size: 0.75rem;
}

/* Action-specific colors */
.rcc-action-pause:hover[b-5hn86wdw23] {
    border-color: var(--cp-warning);
    background: rgba(245, 158, 11, 0.1);
    color: var(--cp-warning);
}

.rcc-action-resume:hover[b-5hn86wdw23] {
    border-color: var(--cp-success);
    background: rgba(16, 185, 129, 0.1);
    color: var(--cp-success);
}

.rcc-action-reassign:hover[b-5hn86wdw23] {
    border-color: var(--cp-primary);
    background: var(--cp-primary-light);
    color: var(--cp-primary);
}

.rcc-action-complete:hover[b-5hn86wdw23] {
    border-color: var(--cp-success);
    background: rgba(16, 185, 129, 0.1);
    color: var(--cp-success);
}

/* Hide label on smaller cards for space */
@media (max-width: 360px) {
    .rcc-action-label[b-5hn86wdw23] {
        display: none;
    }

    .rcc-action-btn[b-5hn86wdw23] {
        padding: 8px 10px;
    }
}

/* Mobile: Stack action buttons vertically */
@media (max-width: 768px) {
    .rcc-trip-actions[b-5hn86wdw23] {
        flex-wrap: wrap;
    }

    .rcc-action-btn[b-5hn86wdw23] {
        flex: 1;
        min-width: calc(33% - 6px);
        justify-content: center;
        min-height: 44px; /* Touch-friendly */
    }
}

/* ============================================
   Dialog Styles (Epic 4)
   ============================================ */

.rcc-dialog[b-5hn86wdw23] {
    border-radius: 16px;
}

.rcc-dialog-header[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.1rem;
    font-weight: 600;
}

.rcc-dialog-icon[b-5hn86wdw23] {
    font-size: 1.25rem;
}

.rcc-dialog-message[b-5hn86wdw23] {
    margin: 0 0 12px 0;
    font-size: 1rem;
    color: var(--cp-text);
}

.rcc-dialog-hint[b-5hn86wdw23] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--cp-text-muted);
}

.rcc-dialog-progress[b-5hn86wdw23] {
    margin: 0 0 12px 0;
    font-size: 0.9rem;
    color: var(--cp-text-secondary);
}

.rcc-dialog-warning[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0 0;
    padding: 12px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--cp-warning);
}

.rcc-dialog-warning i[b-5hn86wdw23] {
    font-size: 1rem;
}

.rcc-dialog-current[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0;
    padding: 12px;
    background: var(--cp-border-light);
    border-radius: 8px;
}

.rcc-dialog-label[b-5hn86wdw23] {
    display: block;
    margin-bottom: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cp-text-secondary);
}

.rcc-dialog-value[b-5hn86wdw23] {
    font-weight: 600;
    color: var(--cp-text);
}

.rcc-dialog-field[b-5hn86wdw23] {
    margin: 16px 0;
}

.rcc-dialog-select[b-5hn86wdw23] {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--cp-border);
    border-radius: 8px;
    background: var(--cp-bg-card);
    font-size: 0.95rem;
    color: var(--cp-text);
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.rcc-dialog-select:focus[b-5hn86wdw23] {
    border-color: var(--cp-primary);
    box-shadow: 0 0 0 3px var(--cp-primary-light);
}

/* Dialog Button Overrides */
.rcc-dialog-btn-cancel[b-5hn86wdw23] {
    background: var(--cp-border-light) !important;
    color: var(--cp-text-secondary) !important;
    border: none !important;
}

.rcc-dialog-btn-cancel:hover[b-5hn86wdw23] {
    background: var(--cp-border) !important;
}

.rcc-dialog-btn-confirm[b-5hn86wdw23] {
    background: var(--cp-primary) !important;
    color: #FFFFFF !important;
    border: none !important;
}

.rcc-dialog-btn-confirm:hover[b-5hn86wdw23] {
    background: var(--cp-primary-hover) !important;
}

/* ============================================
   Live Tracking View (Epic 5)
   ============================================ */

.rcc-live-tracking[b-5hn86wdw23] {
    transition: opacity 0.2s;
}

.rcc-live-loading[b-5hn86wdw23] {
    opacity: 0.6;
    pointer-events: none;
}

/* Empty State */
.rcc-empty-live[b-5hn86wdw23] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
    background: var(--cp-bg-card);
    border: 1px dashed var(--cp-border);
    border-radius: 12px;
}

.rcc-empty-live-icon[b-5hn86wdw23] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--cp-primary-light);
    color: var(--cp-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 20px;
}

.rcc-empty-live h3[b-5hn86wdw23] {
    margin: 0 0 8px 0;
    color: var(--cp-text);
    font-size: 1.25rem;
}

.rcc-empty-live p[b-5hn86wdw23] {
    margin: 0;
    font-size: 0.9rem;
}

/* Live Container - Side by Side Layout */
.rcc-live-container[b-5hn86wdw23] {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 24px;
    min-height: 600px;
}

/* Trip List Panel */
.rcc-live-list[b-5hn86wdw23] {
    display: flex;
    flex-direction: column;
    background: var(--cp-bg-card);
    border: 1px solid var(--cp-border);
    border-radius: 12px;
    overflow: hidden;
}

.rcc-live-header[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--cp-border-light);
}

.rcc-live-header h3[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--cp-text);
}

.rcc-live-indicator[b-5hn86wdw23] {
    font-size: 8px;
    color: var(--cp-success);
    animation: pulse-b-5hn86wdw23 2s infinite;
}

@keyframes pulse-b-5hn86wdw23 {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

.rcc-auto-refresh-status[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--cp-text-muted);
    padding: 4px 8px;
    background: var(--cp-border-light);
    border-radius: 50px;
}

.rcc-live-trips[b-5hn86wdw23] {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Live Trip Cards */
.rcc-live-trip-card[b-5hn86wdw23] {
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rcc-live-trip-card:hover[b-5hn86wdw23] {
    border-color: var(--cp-primary);
}

.rcc-live-trip-selected[b-5hn86wdw23] {
    border-color: var(--cp-primary);
    box-shadow: 0 0 0 2px var(--cp-primary-light);
}

.rcc-live-trip-paused[b-5hn86wdw23] {
    border-left: 3px solid var(--cp-warning);
}

.rcc-live-trip-header[b-5hn86wdw23] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.rcc-live-trip-info[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.rcc-live-trip-route[b-5hn86wdw23] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cp-text);
}

.rcc-live-trip-driver[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--cp-text-secondary);
}

/* Progress Section */
.rcc-live-trip-progress[b-5hn86wdw23] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rcc-live-progress-stats[b-5hn86wdw23] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.rcc-live-stat[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--cp-text-secondary);
}

.rcc-live-stat i[b-5hn86wdw23] {
    font-size: 0.75rem;
    color: var(--cp-text-muted);
    width: 14px;
}

.rcc-live-stat strong[b-5hn86wdw23] {
    color: var(--cp-text);
}

.rcc-live-progress-bar[b-5hn86wdw23] {
    height: 8px;
}

/* Trip Footer */
.rcc-live-trip-footer[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--cp-border-light);
}

.rcc-live-checkin[b-5hn86wdw23] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--cp-text-muted);
}

.rcc-live-checkin i[b-5hn86wdw23] {
    font-size: 0.7rem;
}

.rcc-live-checkin-stale[b-5hn86wdw23] {
    color: var(--cp-warning);
}

/* Map Container */
.rcc-live-map-container[b-5hn86wdw23] {
    display: flex;
    flex-direction: column;
    background: var(--cp-bg-card);
    border: 1px solid var(--cp-border);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.rcc-map-toggle-mobile[b-5hn86wdw23] {
    display: none;
}

.rcc-live-map[b-5hn86wdw23] {
    flex: 1;
    min-height: 400px;
    background: var(--cp-border-light);
}

.rcc-map-trip-info[b-5hn86wdw23] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    background: var(--cp-bg-card);
    border-top: 1px solid var(--cp-border-light);
    font-size: 0.85rem;
}

.rcc-map-trip-info strong[b-5hn86wdw23] {
    color: var(--cp-text);
}

.rcc-map-trip-info span[b-5hn86wdw23] {
    color: var(--cp-text-secondary);
}

/* Tablet Layout */
@media (max-width: 1200px) {
    .rcc-live-container[b-5hn86wdw23] {
        grid-template-columns: 350px 1fr;
    }
}

/* Mobile Layout */
@media (max-width: 768px) {
    .rcc-live-container[b-5hn86wdw23] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .rcc-live-list[b-5hn86wdw23] {
        max-height: none;
    }

    .rcc-live-trips[b-5hn86wdw23] {
        max-height: 400px;
    }

    .rcc-map-toggle-mobile[b-5hn86wdw23] {
        display: flex;
        justify-content: center;
        padding: 12px;
        border-bottom: 1px solid var(--cp-border-light);
    }

    .rcc-map-hidden-mobile[b-5hn86wdw23] {
        display: none;
    }

    .rcc-live-map[b-5hn86wdw23] {
        min-height: 300px;
    }

    .rcc-live-progress-stats[b-5hn86wdw23] {
        gap: 8px;
    }

    .rcc-live-stat[b-5hn86wdw23] {
        font-size: 0.75rem;
    }

    .rcc-live-trip-card[b-5hn86wdw23] {
        padding: 14px;
    }
}
/* /Components/Pages/RouteEdit.razor.rz.scp.css */
/* ============================
   Root Variables & Reset
   ============================ */
:root[b-3g9ikho6ts] {
    --vh: 100vh;
}

/* ============================
   Page Layout
   ============================ */
.page-content[b-3g9ikho6ts] {
    gap: 0px;
}

.route-page[b-3g9ikho6ts] {
    display: flex;
    flex-direction: row;
}

.route-info[b-3g9ikho6ts] {
    width: 40%;
    height: 100vh;
    overflow-y: auto;
    overflow-x: clip;
    scrollbar-width: none;
    padding: 24px;
    background: var(--cp-bg-page, #f8fafc);
}

.route-map[b-3g9ikho6ts] {
    width: 60%;
    height: 100vh;
}

.map-box[b-3g9ikho6ts] {
    height: 100vh;
    width: 100%;
}

/* ============================
   Route Details Card
   ============================ */
.route-details-card[b-3g9ikho6ts] {
    background: white;
    border: 1px solid var(--cp-border, #e2e8f0);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    margin-bottom: 20px;
}

.route-details-header[b-3g9ikho6ts] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--cp-border-light, #f1f5f9);
    background: linear-gradient(135deg, #FAFBFC 0%, #F5F7FA 100%);
}

.back-button[b-3g9ikho6ts] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--cp-border, #e2e8f0);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--cp-text-secondary, #64748b);
}

.back-button:hover[b-3g9ikho6ts] {
    border-color: var(--cp-primary, #3B9EFF);
    color: var(--cp-primary, #3B9EFF);
    background: var(--cp-primary-light, #f0f9ff);
}

.route-details-title[b-3g9ikho6ts] {
    flex: 1;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cp-dark, #0f172a);
}

.route-details-body[b-3g9ikho6ts] {
    padding: 1.5rem;
}

/* Form Grid */
.form-grid[b-3g9ikho6ts] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-field[b-3g9ikho6ts] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label[b-3g9ikho6ts] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cp-text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-input[b-3g9ikho6ts] {
    padding: 10px 14px;
    border: 1px solid var(--cp-border, #e2e8f0);
    border-radius: 10px;
    font-size: 0.95rem;
    color: var(--cp-dark, #0f172a);
    background: white;
    transition: all 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.form-input:focus[b-3g9ikho6ts] {
    outline: none;
    border-color: var(--cp-primary, #3B9EFF);
    box-shadow: 0 0 0 3px rgba(59, 158, 255, 0.1);
}

.form-input[b-3g9ikho6ts]::placeholder {
    color: var(--cp-text-secondary, #94a3b8);
}

.form-input.short[b-3g9ikho6ts] {
    width: 80px;
}

.input-suffix[b-3g9ikho6ts] {
    font-size: 0.85rem;
    color: var(--cp-text-secondary, #64748b);
    margin-left: 8px;
}

/* ============================
   Stops Card
   ============================ */
.stops-card[b-3g9ikho6ts] {
    background: white;
    border: 1px solid var(--cp-border, #e2e8f0);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 280px);
}

.stops-card-header[b-3g9ikho6ts] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--cp-border-light, #f1f5f9);
    background: linear-gradient(135deg, #FAFBFC 0%, #F5F7FA 100%);
    flex-shrink: 0;
}

.stops-card-header-left[b-3g9ikho6ts] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stops-title[b-3g9ikho6ts] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cp-dark, #0f172a);
}

.completion-badge[b-3g9ikho6ts] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--cp-primary-light, #eff6ff);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cp-primary, #2563eb);
}

.stops-card-header-right[b-3g9ikho6ts] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Buttons */
.btn-primary[b-3g9ikho6ts] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #3B9EFF, #2563EB);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary:hover[b-3g9ikho6ts] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 158, 255, 0.4);
}

.btn-secondary[b-3g9ikho6ts] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: white;
    color: var(--cp-dark, #0f172a);
    border: 1px solid var(--cp-border, #e2e8f0);
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover[b-3g9ikho6ts] {
    border-color: var(--cp-primary, #3B9EFF);
    background: var(--cp-primary-light, #f0f9ff);
    color: var(--cp-primary, #3B9EFF);
}

.btn-danger[b-3g9ikho6ts] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-danger:hover[b-3g9ikho6ts] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* Route Dropdown */
.route-dropdown-container[b-3g9ikho6ts] {
    position: relative;
}

.route-dropdown-btn[b-3g9ikho6ts] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--cp-border, #e2e8f0);
    border-radius: 10px;
    background: white;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cp-dark, #0f172a);
    cursor: pointer;
    transition: all 0.2s;
}

.route-dropdown-btn:hover[b-3g9ikho6ts] {
    border-color: var(--cp-primary, #3B9EFF);
    background: var(--cp-primary-light, #f0f9ff);
}

.route-dropdown-menu[b-3g9ikho6ts] {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 1000;
    width: 220px;
    background: white;
    border: 1px solid var(--cp-border, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 8px;
}

.route-dropdown-item[b-3g9ikho6ts] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--cp-dark, #0f172a);
    cursor: pointer;
    transition: all 0.15s;
}

.route-dropdown-item:hover[b-3g9ikho6ts] {
    background: var(--cp-bg-page, #f8fafc);
}

.route-dropdown-item.danger[b-3g9ikho6ts] {
    color: #dc2626;
}

.route-dropdown-item.danger:hover[b-3g9ikho6ts] {
    background: rgba(239, 68, 68, 0.1);
}

.route-dropdown-divider[b-3g9ikho6ts] {
    height: 1px;
    background: var(--cp-border-light, #f1f5f9);
    margin: 8px 0;
}

/* Bulk Options Bar */
.bulk-options-bar[b-3g9ikho6ts] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-bottom: 1px solid var(--cp-border-light, #f1f5f9);
}

.bulk-options-label[b-3g9ikho6ts] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cp-primary, #2563eb);
}

.bulk-options-actions[b-3g9ikho6ts] {
    display: flex;
    gap: 8px;
}

.bulk-action-btn[b-3g9ikho6ts] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: white;
    border: 1px solid var(--cp-border, #e2e8f0);
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cp-dark, #0f172a);
    cursor: pointer;
    transition: all 0.2s;
}

.bulk-action-btn:hover[b-3g9ikho6ts] {
    border-color: var(--cp-primary, #3B9EFF);
    background: var(--cp-primary-light, #f0f9ff);
}

.bulk-action-btn.danger[b-3g9ikho6ts] {
    color: #dc2626;
}

.bulk-action-btn.danger:hover[b-3g9ikho6ts] {
    border-color: #dc2626;
    background: rgba(239, 68, 68, 0.1);
}

.bulk-action-btn.cancel[b-3g9ikho6ts] {
    color: var(--cp-text-secondary, #64748b);
}

/* Stops List */
.stops-list[b-3g9ikho6ts] {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    scrollbar-width: thin;
}

/* Stops Empty State */
.stops-empty-state[b-3g9ikho6ts] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.stops-empty-icon[b-3g9ikho6ts] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.stops-empty-icon i[b-3g9ikho6ts] {
    font-size: 2rem;
    color: var(--cp-primary, #3B9EFF);
}

.stops-empty-title[b-3g9ikho6ts] {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cp-dark, #0f172a);
}

.stops-empty-text[b-3g9ikho6ts] {
    margin: 0 0 24px 0;
    font-size: 0.9rem;
    color: var(--cp-text-secondary, #64748b);
}

.stops-empty-btn[b-3g9ikho6ts] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #3B9EFF, #2563EB);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.stops-empty-btn:hover[b-3g9ikho6ts] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 158, 255, 0.4);
}

.stops-empty-btn i[b-3g9ikho6ts] {
    font-size: 0.85rem;
}

.stop-row[b-3g9ikho6ts] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: white;
    border: 1px solid var(--cp-border, #e2e8f0);
    border-radius: 12px;
    margin-bottom: 10px;
    cursor: grab;
    transition: all 0.2s;
}

.stop-row:hover[b-3g9ikho6ts] {
    border-color: var(--cp-primary, #3B9EFF);
    background: linear-gradient(135deg, #FAFCFF 0%, #F8FBFF 100%);
    box-shadow: 0 2px 8px rgba(59, 158, 255, 0.1);
}

.stop-checkbox[b-3g9ikho6ts] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkbox-input[b-3g9ikho6ts] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--cp-primary, #3B9EFF);
}

.stop-number-badge[b-3g9ikho6ts] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
    background: linear-gradient(135deg, #94a3b8, #64748b);
    color: white;
}

.stop-info[b-3g9ikho6ts] {
    flex: 1;
    min-width: 0;
}

.stop-name[b-3g9ikho6ts] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cp-dark, #0f172a);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stop-address[b-3g9ikho6ts] {
    font-size: 0.8rem;
    color: var(--cp-text-secondary, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stop-duration[b-3g9ikho6ts] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 12px;
    flex-shrink: 0;
}

.duration-value[b-3g9ikho6ts] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cp-dark, #0f172a);
}

.duration-label[b-3g9ikho6ts] {
    font-size: 0.7rem;
    color: var(--cp-text-secondary, #64748b);
    text-transform: uppercase;
}

.stop-menu[b-3g9ikho6ts] {
    position: relative;
}

.stop-menu-btn[b-3g9ikho6ts] {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--cp-text-secondary, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.stop-menu-btn:hover[b-3g9ikho6ts] {
    background: var(--cp-bg-page, #f8fafc);
    color: var(--cp-dark, #0f172a);
}

.stop-menu-popup[b-3g9ikho6ts] {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 100;
}

/* Bottom Spacer */
.bottom-spacer[b-3g9ikho6ts] {
    height: 100px;
}

/* ============================
   Dialog Shared Styles
   ============================ */
[b-3g9ikho6ts] .e-dialog {
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25) !important;
}

[b-3g9ikho6ts] .e-dlg-header-content {
    background: linear-gradient(135deg, #FAFBFC 0%, #F5F7FA 100%) !important;
    border-bottom: 1px solid var(--cp-border-light, #f1f5f9) !important;
    padding: 1.25rem 1.5rem !important;
}

[b-3g9ikho6ts] .e-dlg-header {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--cp-dark, #0f172a) !important;
}

[b-3g9ikho6ts] .e-dlg-content {
    background: var(--cp-bg-page, #f8fafc) !important;
    padding: 1.5rem !important;
}

/* Dialog Section Card */
.dialog-section[b-3g9ikho6ts] {
    background: white;
    border: 1px solid var(--cp-border, #e2e8f0);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

.dialog-section:last-child[b-3g9ikho6ts] {
    margin-bottom: 0;
}

.dialog-section-header[b-3g9ikho6ts] {
    padding: 12px 16px;
    background: linear-gradient(135deg, #FAFBFC 0%, #F5F7FA 100%);
    border-bottom: 1px solid var(--cp-border-light, #f1f5f9);
}

.dialog-section-title[b-3g9ikho6ts] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--cp-primary, #3B9EFF);
}

.dialog-section-body[b-3g9ikho6ts] {
    padding: 16px;
}

/* Form Row */
.form-row[b-3g9ikho6ts] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.form-row:last-child[b-3g9ikho6ts] {
    margin-bottom: 0;
}

.form-row .form-label[b-3g9ikho6ts] {
    flex: 0 0 120px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cp-text-secondary, #64748b);
}

.form-control[b-3g9ikho6ts] {
    flex: 1;
    display: flex;
    align-items: center;
}

/* Checkbox Row */
.checkbox-row[b-3g9ikho6ts] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.checkbox-row:last-child[b-3g9ikho6ts] {
    margin-bottom: 0;
}

.checkbox-label[b-3g9ikho6ts] {
    font-size: 0.9rem;
    color: var(--cp-dark, #0f172a);
    cursor: pointer;
}

/* Item Tags */
.item-list[b-3g9ikho6ts] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.item-tag[b-3g9ikho6ts] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--cp-primary-light, #eff6ff);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--cp-primary, #2563eb);
}

/* Sites Grid */
.sites-grid[b-3g9ikho6ts] {
    border: 1px solid var(--cp-border, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
}

/* Confirm Message */
.confirm-message[b-3g9ikho6ts] {
    text-align: center;
    padding: 20px;
}

.confirm-icon[b-3g9ikho6ts] {
    font-size: 3rem;
    color: #f59e0b;
    margin-bottom: 16px;
}

.confirm-message p[b-3g9ikho6ts] {
    margin: 0 0 8px 0;
    font-size: 1rem;
    color: var(--cp-dark, #0f172a);
}

.confirm-warning[b-3g9ikho6ts] {
    font-size: 0.85rem !important;
    color: var(--cp-text-secondary, #64748b) !important;
}

/* Dialog Actions */
.dialog-actions[b-3g9ikho6ts] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

/* Loading State */
.loading-state[b-3g9ikho6ts] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
}

.loading-text[b-3g9ikho6ts] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cp-dark, #0f172a);
    margin-top: 16px;
}

/* Error Message */
.error-message[b-3g9ikho6ts] {
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: #dc2626;
    font-size: 0.85rem;
    margin-top: 12px;
}

/* Checkbox styling */
.opt-checkbox[b-3g9ikho6ts] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ============================
   Responsive Styles
   ============================ */
@media (max-width: 1200px) {
    .route-info[b-3g9ikho6ts] {
        width: 50%;
        padding: 20px;
    }

    .route-map[b-3g9ikho6ts] {
        width: 50%;
    }

    .form-grid[b-3g9ikho6ts] {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 575.98px) {
    .page-content[b-3g9ikho6ts] {
        background-color: white;
    }

    .route-page[b-3g9ikho6ts] {
        flex-direction: column;
        min-height: 100%;
        height: 100dvh;
        overflow-y: auto;
        overflow-x: clip;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .route-info[b-3g9ikho6ts] {
        width: 100%;
        height: auto;
        min-height: 100vh;
        padding: 16px;
        overflow-y: visible;
    }

    .route-map[b-3g9ikho6ts] {
        display: none;
    }

    .route-details-card[b-3g9ikho6ts],
    .stops-card[b-3g9ikho6ts] {
        border-radius: 12px;
    }

    .route-details-header[b-3g9ikho6ts],
    .stops-card-header[b-3g9ikho6ts] {
        padding: 1rem;
        flex-wrap: wrap;
        gap: 12px;
    }

    .route-details-title[b-3g9ikho6ts] {
        font-size: 1.1rem;
        order: 1;
        flex: 1;
    }

    .back-button[b-3g9ikho6ts] {
        order: 0;
    }

    .btn-primary[b-3g9ikho6ts] {
        order: 2;
        padding: 8px 16px;
        font-size: 0.8rem;
    }

    .route-details-body[b-3g9ikho6ts] {
        padding: 1rem;
    }

    .form-grid[b-3g9ikho6ts] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .stops-card[b-3g9ikho6ts] {
        max-height: none;
    }

    .stops-card-header[b-3g9ikho6ts] {
        flex-wrap: wrap;
        gap: 12px;
    }

    .stops-card-header-left[b-3g9ikho6ts] {
        width: 100%;
        justify-content: space-between;
    }

    .stops-card-header-right[b-3g9ikho6ts] {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .stop-row[b-3g9ikho6ts] {
        padding: 10px;
    }

    .stop-duration[b-3g9ikho6ts] {
        padding: 0 8px;
    }

    .bottom-spacer[b-3g9ikho6ts] {
        height: 80px;
    }

    .bulk-options-bar[b-3g9ikho6ts] {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .bulk-options-actions[b-3g9ikho6ts] {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Legacy classes for sortable functionality */
.sortable-item[b-3g9ikho6ts] {
    cursor: grab;
}

.noselect[b-3g9ikho6ts],
.noselect *[b-3g9ikho6ts] {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
}
/* /Components/Pages/RouteSales.razor.rz.scp.css */
/* ============================
   Route Sales Page Layout
   ============================ */

.page-container[b-xruyhhic5c] {
    display: flex;
    flex-direction: row;
    min-height: calc(100vh - 60px);
    background: var(--cp-bg-page, #F9FAFB);
}

/* ============================
   Navigation Sidebar (Desktop)
   ============================ */

.page-list[b-xruyhhic5c] {
    width: 260px;
    min-width: 260px;
    height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    background: white;
    border-right: 1px solid var(--cp-border, #E5E7EB);
    padding: 24px 16px;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
}

.page-list h3[b-xruyhhic5c] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cp-dark, #1A1D2E);
    margin: 0 0 20px 8px;
    letter-spacing: -0.01em;
}

.page[b-xruyhhic5c] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--cp-text-secondary, #6B7280);
    cursor: pointer;
    transition: all 0.2s;
}

.page:hover[b-xruyhhic5c] {
    background: var(--cp-border-light, #F3F4F6);
    color: var(--cp-dark, #1A1D2E);
}

.page.selected[b-xruyhhic5c] {
    background: linear-gradient(135deg, rgba(59, 158, 255, 0.1), rgba(37, 99, 235, 0.1));
    color: var(--cp-primary, #3B9EFF);
    font-size: 0.95rem;
    font-weight: 600;
}

.page.selected:hover[b-xruyhhic5c] {
    background: linear-gradient(135deg, rgba(59, 158, 255, 0.15), rgba(37, 99, 235, 0.15));
    color: var(--cp-primary, #3B9EFF);
}

/* ============================
   Content Area
   ============================ */

.tab-container[b-xruyhhic5c] {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    height: calc(100vh - 60px);
    background: var(--cp-bg-page, #F9FAFB);
}

.grid-container[b-xruyhhic5c] {
    min-height: 100%;
}

/* Legacy styles (kept for compatibility) */
.sales-page[b-xruyhhic5c] {
    display: flex;
    flex-direction: row;
}

.route-items[b-xruyhhic5c] {
    width: 50%;
    margin: 30px;
}

.sales-items[b-xruyhhic5c] {
    width: 50%;
    margin: 30px;
}

/* ============================
   Responsive - Tablet
   ============================ */

@media (max-width: 1024px) {
    .page-list[b-xruyhhic5c] {
        width: 220px;
        min-width: 220px;
        padding: 20px 12px;
    }

    .page-list h3[b-xruyhhic5c] {
        font-size: 1rem;
        margin-bottom: 16px;
    }

    .page[b-xruyhhic5c] {
        padding: 10px 14px;
        font-size: 0.9rem;
    }
}

/* ============================
   Responsive - Mobile (Horizontal Tabs)
   ============================ */

@media (max-width: 768px) {
    .page-container[b-xruyhhic5c] {
        flex-direction: column;
        min-height: 100vh;
        height: 100vh;
        overflow: hidden;
    }

    .page-list[b-xruyhhic5c] {
        width: 100%;
        min-width: 100%;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 16px;
        border-right: none;
        border-bottom: 1px solid var(--cp-border, #E5E7EB);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        gap: 8px;
        flex-shrink: 0;
    }

    .page-list h3[b-xruyhhic5c] {
        width: 100%;
        font-size: 1.25rem;
        margin: 0 0 12px 0;
    }

    .page[b-xruyhhic5c] {
        flex-shrink: 0;
        padding: 10px 20px;
        border-radius: 50px;
        background: var(--cp-border-light, #F3F4F6);
        font-size: 0.9rem;
        gap: 8px;
    }

    .page:hover[b-xruyhhic5c] {
        background: var(--cp-border, #E5E7EB);
    }

    .page.selected[b-xruyhhic5c] {
        background: linear-gradient(135deg, #3B9EFF, #2563EB);
        color: white;
        box-shadow: 0 2px 8px rgba(59, 158, 255, 0.3);
    }

    .page.selected:hover[b-xruyhhic5c] {
        background: linear-gradient(135deg, #2563EB, #1D4ED8);
        color: white;
    }

    .tab-container[b-xruyhhic5c] {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        height: 0; /* Force flex to calculate proper height */
    }

    .grid-container[b-xruyhhic5c] {
        min-height: auto;
    }
}

/* ============================
   Responsive - Small Mobile
   ============================ */

@media (max-width: 480px) {
    .page-list[b-xruyhhic5c] {
        padding: 12px;
    }

    .page-list h3[b-xruyhhic5c] {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }

    .page[b-xruyhhic5c] {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
}
/* /Components/Pages/RouteSalesTrip.razor.rz.scp.css */
/* ============================
   Root Variables & Reset
   ============================ */
:root[b-5463jvr2cs] {
    --vh: 100vh;
}

/* ============================
   Page Layout
   ============================ */
.page-content[b-5463jvr2cs] {
    gap: 0px;
}

.route-page[b-5463jvr2cs] {
    display: flex;
    flex-direction: row;
}

.route-info[b-5463jvr2cs] {
    width: 40%;
    height: 100vh;
    overflow-y: auto;
    overflow-x: clip;
    scrollbar-width: none;
    padding: 24px;
    background: var(--cp-bg-page, #f8fafc);
}

.route-map[b-5463jvr2cs] {
    width: 60%;
    height: 100vh;
}

.map-box[b-5463jvr2cs] {
    height: 100vh;
    width: 100%;
}

/* ============================
   Trip Summary Card
   ============================ */
.trip-summary-card[b-5463jvr2cs] {
    background: white;
    border: 1px solid var(--cp-border, #e2e8f0);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    margin-bottom: 20px;
}

.trip-summary-header[b-5463jvr2cs] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--cp-border-light, #f1f5f9);
    background: linear-gradient(135deg, #FAFBFC 0%, #F5F7FA 100%);
}

.back-button[b-5463jvr2cs] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--cp-border, #e2e8f0);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--cp-text-secondary, #64748b);
}

.back-button:hover[b-5463jvr2cs] {
    border-color: var(--cp-primary, #3B9EFF);
    color: var(--cp-primary, #3B9EFF);
    background: var(--cp-primary-light, #f0f9ff);
}

.trip-summary-title[b-5463jvr2cs] {
    flex: 1;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cp-dark, #0f172a);
}

.trip-summary-body[b-5463jvr2cs] {
    padding: 1.5rem;
}

.metrics-grid[b-5463jvr2cs] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.metric-item[b-5463jvr2cs] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metric-label[b-5463jvr2cs] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--cp-text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-value[b-5463jvr2cs] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cp-dark, #0f172a);
}

.metric-value.currency[b-5463jvr2cs] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cp-success, #059669);
}

.metric-link[b-5463jvr2cs] {
    color: var(--cp-primary, #3B9EFF);
    cursor: pointer;
    font-weight: 600;
    transition: color 0.2s;
}

.metric-link:hover[b-5463jvr2cs] {
    color: var(--cp-primary-dark, #2563eb);
    text-decoration: underline;
}

.route-name-list[b-5463jvr2cs] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Status Badge */
.status-badge[b-5463jvr2cs] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    width: fit-content;
}

.status-badge.pending[b-5463jvr2cs] {
    background: rgba(148, 163, 184, 0.15);
    color: #64748b;
}

.status-badge.active[b-5463jvr2cs] {
    background: rgba(59, 158, 255, 0.15);
    color: #2563EB;
}

.status-badge.complete[b-5463jvr2cs] {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.status-badge.incomplete[b-5463jvr2cs] {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

/* ============================
   Stops Card
   ============================ */
.stops-card[b-5463jvr2cs] {
    background: white;
    border: 1px solid var(--cp-border, #e2e8f0);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 320px);
}

.stops-card-header[b-5463jvr2cs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--cp-border-light, #f1f5f9);
    background: linear-gradient(135deg, #FAFBFC 0%, #F5F7FA 100%);
    flex-shrink: 0;
}

.stops-card-header-left[b-5463jvr2cs] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stops-title[b-5463jvr2cs] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cp-dark, #0f172a);
}

.completion-badge[b-5463jvr2cs] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--cp-primary-light, #eff6ff);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cp-primary, #2563eb);
}

.stops-card-header-right[b-5463jvr2cs] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.route-dropdown-container[b-5463jvr2cs] {
    position: relative;
}

.route-dropdown-btn[b-5463jvr2cs] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--cp-border, #e2e8f0);
    border-radius: 10px;
    background: white;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cp-dark, #0f172a);
    cursor: pointer;
    transition: all 0.2s;
}

.route-dropdown-btn:hover[b-5463jvr2cs] {
    border-color: var(--cp-primary, #3B9EFF);
    background: var(--cp-primary-light, #f0f9ff);
}

.route-dropdown-menu[b-5463jvr2cs] {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 1000;
    width: 220px;
    background: white;
    border: 1px solid var(--cp-border, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 8px;
}

.route-dropdown-item[b-5463jvr2cs] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--cp-dark, #0f172a);
    cursor: pointer;
    transition: all 0.15s;
}

.route-dropdown-item:hover[b-5463jvr2cs] {
    background: var(--cp-bg-page, #f8fafc);
}

.route-dropdown-divider[b-5463jvr2cs] {
    height: 1px;
    background: var(--cp-border-light, #f1f5f9);
    margin: 8px 0;
}

/* Stops List */
.stops-list[b-5463jvr2cs] {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    scrollbar-width: thin;
}

.stop-row[b-5463jvr2cs] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: white;
    border: 1px solid var(--cp-border, #e2e8f0);
    border-radius: 12px;
    margin-bottom: 10px;
    cursor: grab;
    transition: all 0.2s;
}

.stop-row:hover[b-5463jvr2cs] {
    border-color: var(--cp-primary, #3B9EFF);
    background: linear-gradient(135deg, #FAFCFF 0%, #F8FBFF 100%);
    box-shadow: 0 2px 8px rgba(59, 158, 255, 0.1);
}

.stop-row.failed[b-5463jvr2cs] {
    background: rgba(239, 68, 68, 0.04);
    border-color: rgba(239, 68, 68, 0.3);
}

.stop-number-badge[b-5463jvr2cs] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
    color: white;
}

.stop-number-badge.pending[b-5463jvr2cs] {
    background: linear-gradient(135deg, #94a3b8, #64748b);
}

.stop-number-badge.active[b-5463jvr2cs] {
    background: linear-gradient(135deg, #3B9EFF, #2563EB);
}

.stop-number-badge.complete[b-5463jvr2cs] {
    background: linear-gradient(135deg, #10B981, #059669);
}

.stop-number-badge.incomplete[b-5463jvr2cs] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.stop-info[b-5463jvr2cs] {
    flex: 1;
    min-width: 0;
}

.stop-name[b-5463jvr2cs] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cp-dark, #0f172a);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stop-address[b-5463jvr2cs] {
    font-size: 0.8rem;
    color: var(--cp-text-secondary, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stop-notes[b-5463jvr2cs] {
    font-size: 0.75rem;
    color: #dc2626;
    margin-top: 4px;
    font-weight: 500;
}

.stop-action[b-5463jvr2cs] {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid var(--cp-border, #e2e8f0);
    border-radius: 8px;
    background: white;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cp-primary, #3B9EFF);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: center;
}

.stop-action:hover[b-5463jvr2cs] {
    background: var(--cp-primary, #3B9EFF);
    color: white;
    border-color: var(--cp-primary, #3B9EFF);
}

/* Bottom Spacer */
.bottom-spacer[b-5463jvr2cs] {
    height: 100px;
}

/* ============================
   Dialog Shared Styles
   ============================ */
[b-5463jvr2cs] .e-dialog {
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25) !important;
}

[b-5463jvr2cs] .e-dlg-header-content {
    background: linear-gradient(135deg, #FAFBFC 0%, #F5F7FA 100%) !important;
    border-bottom: 1px solid var(--cp-border-light, #f1f5f9) !important;
    padding: 1.25rem 1.5rem !important;
}

[b-5463jvr2cs] .e-dlg-header {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--cp-dark, #0f172a) !important;
}

[b-5463jvr2cs] .e-dlg-content {
    background: var(--cp-bg-page, #f8fafc) !important;
    padding: 1.5rem !important;
}

/* Dialog Section Card */
.dialog-section[b-5463jvr2cs] {
    background: white;
    border: 1px solid var(--cp-border, #e2e8f0);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

.dialog-section:last-child[b-5463jvr2cs] {
    margin-bottom: 0;
}

.dialog-section-header[b-5463jvr2cs] {
    padding: 12px 16px;
    background: linear-gradient(135deg, #FAFBFC 0%, #F5F7FA 100%);
    border-bottom: 1px solid var(--cp-border-light, #f1f5f9);
}

.dialog-section-title[b-5463jvr2cs] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--cp-primary, #3B9EFF);
}

.dialog-section-body[b-5463jvr2cs] {
    padding: 16px;
}

/* Key/Value Grid */
.kv-grid[b-5463jvr2cs] {
    display: grid;
    gap: 16px;
}

.kv-item[b-5463jvr2cs] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kv-label[b-5463jvr2cs] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--cp-text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kv-value[b-5463jvr2cs] {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--cp-dark, #0f172a);
}

/* Product Refills List */
.refill-list[b-5463jvr2cs] {
    display: flex;
    flex-direction: column;
}

.refill-item[b-5463jvr2cs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--cp-border-light, #f1f5f9);
}

.refill-item:last-child[b-5463jvr2cs] {
    border-bottom: none;
}

.refill-name[b-5463jvr2cs] {
    font-size: 0.9rem;
    color: var(--cp-dark, #0f172a);
}

.refill-amount[b-5463jvr2cs] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cp-dark, #0f172a);
}

/* Image Gallery */
.image-gallery[b-5463jvr2cs] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
}

.gallery-thumbnail[b-5463jvr2cs] {
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--cp-border, #e2e8f0);
    cursor: pointer;
    transition: all 0.2s;
}

.gallery-thumbnail:hover[b-5463jvr2cs] {
    border-color: var(--cp-primary, #3B9EFF);
    box-shadow: 0 4px 12px rgba(59, 158, 255, 0.2);
    transform: scale(1.02);
}

.gallery-thumbnail img[b-5463jvr2cs] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dialog Form Styles */
.dialog-form-section[b-5463jvr2cs] {
    background: white;
    border: 1px solid var(--cp-border, #e2e8f0);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

.form-row[b-5463jvr2cs] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.form-row:last-child[b-5463jvr2cs] {
    margin-bottom: 0;
}

.form-label[b-5463jvr2cs] {
    flex: 0 0 120px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cp-text-secondary, #64748b);
}

.form-control[b-5463jvr2cs] {
    flex: 1;
}

/* Dialog Actions */
.dialog-actions[b-5463jvr2cs] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

.btn-primary[b-5463jvr2cs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    background: linear-gradient(135deg, #3B9EFF, #2563EB);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary:hover[b-5463jvr2cs] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 158, 255, 0.4);
}

.btn-primary:disabled[b-5463jvr2cs] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Loading State */
.loading-state[b-5463jvr2cs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
}

.loading-text[b-5463jvr2cs] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cp-dark, #0f172a);
    margin-top: 16px;
}

/* Error Message */
.error-message[b-5463jvr2cs] {
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: #dc2626;
    font-size: 0.85rem;
    margin-top: 12px;
}

/* Checkbox styling */
.opt-checkbox[b-5463jvr2cs] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ============================
   Map Marker Styles (Inline)
   ============================ */
.marker-name[b-5463jvr2cs] {
    font-size: 20px;
    font-weight: bold;
    color: var(--blue-g-80);
    margin-bottom: 10px;
    margin-top: 10px;
}

.marker-stopstatus[b-5463jvr2cs] {
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 10px;
    color: var(--grey-g-80);
}

.marker-time[b-5463jvr2cs] {
    font-size: 10px;
    color: black;
}

.custom-marker[b-5463jvr2cs] {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: lightgray;
    color: black;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 14px;
    border: 2px solid white;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

/* ============================
   Responsive Styles
   ============================ */
@media (max-width: 1200px) {
    .route-info[b-5463jvr2cs] {
        width: 50%;
        padding: 20px;
    }

    .route-map[b-5463jvr2cs] {
        width: 50%;
    }

    .metrics-grid[b-5463jvr2cs] {
        gap: 16px;
    }
}

@media (max-width: 575.98px) {
    .page-content[b-5463jvr2cs] {
        background-color: white;
    }

    .route-page[b-5463jvr2cs] {
        flex-direction: column;
        min-height: 100%;
        height: 100dvh;
        overflow-y: auto;
        overflow-x: clip;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .route-info[b-5463jvr2cs] {
        width: 100%;
        height: auto;
        min-height: 100vh;
        padding: 16px;
        overflow-y: visible;
    }

    .route-map[b-5463jvr2cs] {
        display: none;
    }

    .trip-summary-card[b-5463jvr2cs],
    .stops-card[b-5463jvr2cs] {
        border-radius: 12px;
    }

    .trip-summary-header[b-5463jvr2cs],
    .stops-card-header[b-5463jvr2cs] {
        padding: 1rem;
    }

    .trip-summary-title[b-5463jvr2cs] {
        font-size: 1.1rem;
    }

    .trip-summary-body[b-5463jvr2cs] {
        padding: 1rem;
    }

    .metrics-grid[b-5463jvr2cs] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .stops-card[b-5463jvr2cs] {
        max-height: none;
    }

    .stops-card-header[b-5463jvr2cs] {
        flex-wrap: wrap;
        gap: 12px;
    }

    .stops-card-header-left[b-5463jvr2cs] {
        width: 100%;
        justify-content: space-between;
    }

    .stops-card-header-right[b-5463jvr2cs] {
        width: 100%;
        justify-content: flex-end;
    }

    .stop-row[b-5463jvr2cs] {
        padding: 10px;
    }

    .stop-action[b-5463jvr2cs] {
        padding: 6px 10px;
        font-size: 0.7rem;
    }

    .bottom-spacer[b-5463jvr2cs] {
        height: 80px;
    }
}

/* Legacy classes for sortable functionality */
.sortable-item[b-5463jvr2cs] {
    cursor: grab;
}

.noselect[b-5463jvr2cs],
.noselect *[b-5463jvr2cs] {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
}
/* /Components/Pages/RouteSalesTripVisit.razor.rz.scp.css */
.address-icon[b-ihs070v1ky] {
    font-size: 18px;
}

.complete-section[b-ihs070v1ky] {

}
/* /Components/Pages/RoutesList.razor.rz.scp.css */
route-list[b-c2whyc4i0k] {
    margin: 20px;
    background-color: white;
    padding-bottom: 30px;
}

.info-section[b-c2whyc4i0k] {
    margin-top: 20px;
}

.round[b-c2whyc4i0k] { 
    margin-top: 20px;
}

.header[b-c2whyc4i0k] {
    margin-top: 20px;
}
.grid-title[b-c2whyc4i0k] {
    margin-top: 30px;
}

/*.grid-list {
    margin: 20px;
    width: 90%;
    min-height: 200px;
}*/

/* /Components/Pages/RouteStop.razor.rz.scp.css */
/* /Components/Pages/RouteSummary.razor.rz.scp.css */
/* ============================================
   Routes Page - CrewPilot Design System
   ============================================ */

/* Main Container */
.routes-container[b-t115cvig56] {
    padding: 24px;
    padding-bottom: 80px;
    background: var(--cp-bg-page, #F9FAFB);
    min-height: calc(100vh - 60px);
    box-sizing: border-box;
}

/* Loading State */
.routes-loading-state[b-t115cvig56] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    background: var(--cp-bg-card, white);
    border: 1px solid var(--cp-border, #E5E7EB);
    border-radius: 12px;
    color: var(--cp-text-muted);
}

.routes-loading-state i[b-t115cvig56] {
    font-size: 2rem;
    margin-bottom: 12px;
    color: var(--cp-primary);
}

.routes-loading-state p[b-t115cvig56] {
    margin: 0;
    font-size: 1rem;
}

/* Header Section */
.routes-header[b-t115cvig56] {
    margin-bottom: 20px;
}

.routes-title-row[b-t115cvig56] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.routes-title[b-t115cvig56] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.routes-title i[b-t115cvig56] {
    font-size: 1.5rem;
    color: var(--cp-primary);
}

.routes-title h2[b-t115cvig56] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cp-text);
}

/* Search Bar */
.routes-search-bar[b-t115cvig56] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding: 16px 20px;
    background: var(--cp-bg-card, white);
    border: 1px solid var(--cp-border, #E5E7EB);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.routes-search-box[b-t115cvig56] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    max-width: 400px;
    padding: 10px 14px;
    background: var(--cp-bg-page, #F9FAFB);
    border: 1px solid var(--cp-border, #E5E7EB);
    border-radius: 50px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.routes-search-box:focus-within[b-t115cvig56] {
    border-color: var(--cp-primary);
    box-shadow: 0 0 0 3px var(--cp-primary-light);
}

.routes-search-box i[b-t115cvig56] {
    color: var(--cp-text-muted);
    font-size: 0.85rem;
}

.routes-search-input[b-t115cvig56] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    color: var(--cp-text);
    outline: none;
    min-width: 0;
}

.routes-search-input[b-t115cvig56]::placeholder {
    color: var(--cp-text-muted);
}

.routes-search-clear[b-t115cvig56] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: var(--cp-border);
    color: var(--cp-text-secondary);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.routes-search-clear:hover[b-t115cvig56] {
    background: var(--cp-text-muted);
    color: white;
}

.routes-result-count[b-t115cvig56] {
    font-size: 0.9rem;
    color: var(--cp-text-secondary);
    white-space: nowrap;
}

/* Route Table (Tablet+) */
.routes-table-section[b-t115cvig56] {
    display: block;
}

.routes-table[b-t115cvig56] {
    width: 100%;
    border-collapse: collapse;
    background: var(--cp-bg-card, white);
    border: 1px solid var(--cp-border, #E5E7EB);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.routes-table thead[b-t115cvig56] {
    background: var(--cp-bg-page, #F9FAFB);
    border-bottom: 1px solid var(--cp-border, #E5E7EB);
}

.routes-table th[b-t115cvig56] {
    padding: 14px 16px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.routes-table th:last-child[b-t115cvig56] {
    width: 50px;
    text-align: center;
}

.routes-table tbody tr[b-t115cvig56] {
    border-bottom: 1px solid var(--cp-border-light, #F3F4F6);
    cursor: pointer;
    transition: background-color 0.15s;
}

.routes-table tbody tr:last-child[b-t115cvig56] {
    border-bottom: none;
}

.routes-table tbody tr:hover[b-t115cvig56] {
    background: var(--cp-primary-light, #EEF6FF);
}

.routes-table td[b-t115cvig56] {
    padding: 16px;
    font-size: 0.9rem;
    color: var(--cp-text);
}

.routes-table-name[b-t115cvig56] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.routes-table-name i[b-t115cvig56] {
    color: var(--cp-primary);
}

.routes-table-actions[b-t115cvig56] {
    position: relative;
    text-align: center;
}

/* Route Cards Grid (Mobile) */
.routes-cards-section[b-t115cvig56] {
    display: none;
}

/* Route Card */
.route-card[b-t115cvig56] {
    background: var(--cp-bg-card, white);
    border: 1px solid var(--cp-border, #E5E7EB);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.route-card:hover[b-t115cvig56] {
    border-color: var(--cp-primary);
    box-shadow: 0 4px 12px rgba(59, 158, 255, 0.15);
}

.route-card-header[b-t115cvig56] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--cp-border-light, #F3F4F6);
}

.route-card-name[b-t115cvig56] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--cp-text);
    font-size: 1rem;
    flex: 1;
    min-width: 0;
}

.route-card-name i[b-t115cvig56] {
    color: var(--cp-primary);
    flex-shrink: 0;
}

.route-card-name span[b-t115cvig56] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.route-card-actions[b-t115cvig56] {
    position: relative;
}

.route-card-menu-btn[b-t115cvig56] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: var(--cp-border-light, #F3F4F6);
    color: var(--cp-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.route-card-menu-btn:hover[b-t115cvig56] {
    background: var(--cp-border);
    color: var(--cp-text);
}

.route-card-menu[b-t115cvig56] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--cp-bg-card, white);
    border: 1px solid var(--cp-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    z-index: 100;
    min-width: 160px;
}

.route-card-menu-item[b-t115cvig56] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 0.9rem;
    color: var(--cp-text);
    cursor: pointer;
    transition: background-color 0.15s;
}

.route-card-menu-item:hover[b-t115cvig56] {
    background: var(--cp-border-light, #F3F4F6);
}

.route-card-menu-item i[b-t115cvig56] {
    font-size: 0.85rem;
    width: 16px;
    text-align: center;
    color: var(--cp-text-secondary);
}

/* Route Card Body */
.route-card-body[b-t115cvig56] {
    padding: 16px;
    cursor: pointer;
}

.route-card-stats[b-t115cvig56] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.route-card-stat[b-t115cvig56] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}

.route-card-stat-value[b-t115cvig56] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cp-text);
}

.route-card-stat-label[b-t115cvig56] {
    font-size: 0.75rem;
    color: var(--cp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

/* Quick Schedule Section */
.route-card-schedule[b-t115cvig56] {
    padding: 12px 16px;
    border-top: 1px solid var(--cp-border-light, #F3F4F6);
    background: var(--cp-bg-page, #F9FAFB);
}

.route-card-schedule-btn[b-t115cvig56] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px dashed var(--cp-border);
    border-radius: 8px;
    background: transparent;
    color: var(--cp-text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.route-card-schedule-btn:hover[b-t115cvig56] {
    border-color: var(--cp-primary);
    color: var(--cp-primary);
    background: var(--cp-primary-light);
}

.route-card-schedule-btn i[b-t115cvig56] {
    font-size: 0.9rem;
}

/* Empty State */
.routes-empty-state[b-t115cvig56] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    background: var(--cp-bg-card, white);
    border: 1px solid var(--cp-border);
    border-radius: 12px;
    color: var(--cp-text-muted);
    grid-column: 1 / -1;
}

.routes-empty-state i[b-t115cvig56] {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.routes-empty-state p[b-t115cvig56] {
    margin: 0;
    font-size: 1rem;
}

/* ============================================
   Modal Styles
   ============================================ */
.modal-overlay[b-t115cvig56] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-t115cvig56] {
    background: var(--cp-bg-card, white);
    border-radius: 12px;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.modal-content.modal-lg[b-t115cvig56] {
    max-width: 500px;
}

.modal-content.modal-xl[b-t115cvig56] {
    max-width: 700px;
}

.file-input[b-t115cvig56] {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 2px dashed var(--cp-border, #E5E7EB);
    border-radius: 8px;
    background: var(--cp-bg-page, #F9FAFB);
    cursor: pointer;
    transition: border-color 0.2s;
}

.file-input:hover[b-t115cvig56] {
    border-color: var(--cp-primary);
}

.modal-header[b-t115cvig56] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--cp-border, #E5E7EB);
}

.modal-header h3[b-t115cvig56] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-header h3 i[b-t115cvig56] {
    color: var(--cp-primary);
}

.modal-close[b-t115cvig56] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--cp-text-muted);
    line-height: 1;
}

.modal-close:hover[b-t115cvig56] {
    color: var(--cp-text);
}

.modal-body[b-t115cvig56] {
    padding: 20px;
}

.modal-footer[b-t115cvig56] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--cp-border, #E5E7EB);
}

/* Schedule Trip Form */
.schedule-route-info[b-t115cvig56] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--cp-primary-light);
    border-radius: 8px;
    margin-bottom: 20px;
    font-weight: 600;
    color: var(--cp-primary);
}

.schedule-route-info i[b-t115cvig56] {
    font-size: 1rem;
}

.schedule-form-group[b-t115cvig56] {
    margin-bottom: 16px;
}

.schedule-label[b-t115cvig56] {
    display: block;
    margin-bottom: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cp-text-secondary);
}

.schedule-select[b-t115cvig56],
.schedule-input[b-t115cvig56] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--cp-border, #E5E7EB);
    border-radius: 8px;
    background: var(--cp-bg-card, white);
    font-size: 0.95rem;
    color: var(--cp-text);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.schedule-select:focus[b-t115cvig56],
.schedule-input:focus[b-t115cvig56] {
    border-color: var(--cp-primary);
    box-shadow: 0 0 0 3px var(--cp-primary-light);
}

/* ============================================
   Import Styles (preserved from original)
   ============================================ */
.summaries[b-t115cvig56] {
    width: 100%;
}

.site-info[b-t115cvig56] {
    display: flex;
    flex-direction: row;
}

.site-value-name[b-t115cvig56] {
    width: 25%;
    text-align: left;
}

.site-value[b-t115cvig56] {
    width: 45%;
    text-align: left;
}

.site-value-small[b-t115cvig56] {
    width: 10%;
    text-align: left;
}

.site-value-header-name[b-t115cvig56] {
    font-weight: bold;
    width: 25%;
}

.site-value-header[b-t115cvig56] {
    font-weight: bold;
    width: 45%;
}

.site-value-header-small[b-t115cvig56] {
    font-weight: bold;
    width: 10%;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
    /* Hide table, show cards on mobile */
    .routes-table-section[b-t115cvig56] {
        display: none;
    }

    .routes-cards-section[b-t115cvig56] {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .routes-container[b-t115cvig56] {
        padding: 16px;
    }

    .routes-title-row[b-t115cvig56] {
        flex-direction: column;
        align-items: stretch;
    }

    .routes-title[b-t115cvig56] {
        justify-content: center;
    }

    .routes-title-row .cp-btn[b-t115cvig56] {
        width: 100%;
        justify-content: center;
    }

    .routes-search-bar[b-t115cvig56] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .routes-search-box[b-t115cvig56] {
        max-width: none;
    }

    .routes-result-count[b-t115cvig56] {
        text-align: center;
    }

    /* Compact card styling for mobile */
    .route-card-header[b-t115cvig56] {
        padding: 10px 12px;
    }

    .route-card-name[b-t115cvig56] {
        font-size: 0.85rem;
        gap: 6px;
    }

    .route-card-name i[b-t115cvig56] {
        font-size: 0.8rem;
    }

    .route-card-menu-btn[b-t115cvig56] {
        width: 26px;
        height: 26px;
    }

    .route-card-body[b-t115cvig56] {
        padding: 10px 12px;
    }

    /* Single row layout for stats */
    .route-card-stats[b-t115cvig56] {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 8px;
    }

    .route-card-stat[b-t115cvig56] {
        flex: 1;
        min-width: 0;
        flex-direction: row;
        gap: 4px;
    }

    .route-card-stat-value[b-t115cvig56] {
        font-size: 0.8rem;
        font-weight: 600;
    }

    .route-card-stat-label[b-t115cvig56] {
        font-size: 0.65rem;
    }

    /* Hide table empty state on mobile */
    .routes-table-section .routes-empty-state[b-t115cvig56] {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .routes-container[b-t115cvig56] {
        padding: 10px;
    }

    .routes-title h2[b-t115cvig56] {
        font-size: 1.25rem;
    }

    .routes-cards-section[b-t115cvig56] {
        gap: 6px;
    }

    .route-card-header[b-t115cvig56] {
        padding: 8px 10px;
        border-bottom: none;
    }

    .route-card-name[b-t115cvig56] {
        font-size: 0.8rem;
    }

    .route-card-name i[b-t115cvig56] {
        font-size: 0.75rem;
    }

    .route-card-menu-btn[b-t115cvig56] {
        width: 24px;
        height: 24px;
    }

    .route-card-menu-btn i[b-t115cvig56] {
        font-size: 0.7rem;
    }

    .route-card-body[b-t115cvig56] {
        padding: 6px 10px 8px;
    }

    /* Compact inline stats */
    .route-card-stats[b-t115cvig56] {
        gap: 6px;
    }

    .route-card-stat[b-t115cvig56] {
        flex-direction: row;
        align-items: center;
        gap: 3px;
    }

    .route-card-stat-value[b-t115cvig56] {
        font-size: 0.7rem;
    }

    .route-card-stat-label[b-t115cvig56] {
        font-size: 0.55rem;
        margin-top: 0;
    }
}

/* Hide mobile empty state on tablet+ */
.routes-empty-state-mobile[b-t115cvig56] {
    display: none !important;
}

@media (max-width: 768px) {
    .routes-empty-state-mobile[b-t115cvig56] {
        display: flex !important;
    }
}
/* /Components/Pages/Schedule.razor.rz.scp.css */

.header[b-w1mg1sg8s4] {
    margin-left: 20px;
    color: var(--blue-g-70);
}

.e-schedule .template-wrap[b-w1mg1sg8s4] {
    display: flex;
    flex-direction: column;
    text-align: left;
    color: black;
}

.event-subject[b-w1mg1sg8s4] {
    font-size: 16px;
    height: 80px;
    font-weight: bold;
}
.event-time[b-w1mg1sg8s4] {
    font-size: 12px;
    margin-left: 8px;
}

.customschedule[b-w1mg1sg8s4] {
    overflow-y: scroll;
    margin: 10px;
    padding-bottom: 10px;
}



    .customschedule .e-schedule .template-wrap[b-w1mg1sg8s4] {
        display: flex;
        text-align: left;
        flex-direction: row;
    }

        .customschedule .e-schedule .template-wrap .resource-image img[b-w1mg1sg8s4] {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: inline-block;
        }

        .customschedule .e-schedule .template-wrap .resource-details[b-w1mg1sg8s4] {
            padding-left: 10px;
        }

            .customschedule .e-schedule .template-wrap .resource-details .resource-name[b-w1mg1sg8s4] {
                font-size: 16px;
                font-weight: 500;
                margin-top: 10px;
                margin-left: 8px;
                float: right;
                display: inline-block;
            }

    .customschedule .e-schedule.e-device .template-wrap .resource-details .resource-name[b-w1mg1sg8s4] {
        font-size: inherit;
        font-weight: inherit;
    }

.search[b-w1mg1sg8s4] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.location[b-w1mg1sg8s4] {
    margin-top: 8px;
}

#button[b-w1mg1sg8s4] {
    border: none;
    background-color: white;
    font-size: 18px;
    margin-top: 4px;
    margin-left: 4px;
}

.action-button[b-w1mg1sg8s4] {
    margin-top: 0px;
}

.flex-group[b-w1mg1sg8s4] {
    width: 100%;
    gap: 20px;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
}

.window-selected[b-w1mg1sg8s4] {
    box-shadow: 0 0 2px darkslategray;
    background-color: #5E5DF0 !important;
    color: white !important;
}

.window-item[b-w1mg1sg8s4] {
    width: 180px;
    height: 45px;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    background-color: white;
    border: solid;
    color: #5E5DF0;
    border-radius: 10px;
    padding-top: 4px;
}

.jobdetail-title[b-w1mg1sg8s4] {
    font-size: 20px;
}

.jobdetails .row[b-w1mg1sg8s4] {
    margin-top: 20px;
}

.service-date[b-w1mg1sg8s4] {
    margin-top: 8px;
    margin-right: 10px;
    font-size: 20px;
}

button.round[b-w1mg1sg8s4] {
    background-color: #5E5DF0;
    color: white;
    border: none;
    padding: 5px;
    font-size: 18px;
    height: 35px;
    width: 35px;
    border-radius: 50%;
    box-shadow: 0 2px 4px darkslategray;
}

    button.round:active[b-w1mg1sg8s4] {
        box-shadow: 0 0 2px darkslategray;
        transform: translateY(2px);
    }


.results[b-w1mg1sg8s4] {
    position: absolute !important;
    z-index: 100;
    background-color: var(--grey-g-2);
    padding: 5px;
    border-radius: 8px;
    box-shadow: 2px 2px lightgray;
}

    .results ul[b-w1mg1sg8s4] {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

        .results ul li[b-w1mg1sg8s4] {
            padding: 5px;
            cursor: pointer;
        }

            .results ul li:hover[b-w1mg1sg8s4] {
                background-color: #f0f0f0;
            }

input.e-input[b-w1mg1sg8s4], textarea.e-input[b-w1mg1sg8s4], .e-input-group[b-w1mg1sg8s4], .e-input-group.e-control-wrapper[b-w1mg1sg8s4] {
    font-size: 20px;
}
/* /Components/Pages/Settings.razor.rz.scp.css */
.tab-container[b-px906w8ewa]{
    width: 100%
}

.setting-list[b-px906w8ewa] {
    width: 300px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    vertical-align: bottom;
    box-shadow: rgba(0, 0, 220, 0.35) 0px 0px 15px;
    padding-left: 20px;
    padding-top: 20px;
}

.selected[b-px906w8ewa] {
    color: #6262e8;
    font-size: 20px;
    font-weight: 600 !important;
}

.page[b-px906w8ewa] {
    padding: 10px 10px;
}
    .page:hover[b-px906w8ewa] {
        font-weight: bold;
    }
/* /Components/Pages/StripeConfirmation.razor.rz.scp.css */

.page-container[b-xfslfhyffz] {
    background: #f8fafc;
    overflow-y: auto;
}

.section[b-xfslfhyffz] {
    align-items: center;
}

.hero[b-xfslfhyffz] {
    margin-bottom: 40px;
}
.wrap[b-xfslfhyffz] {
    max-width: 980px;
    margin: 0 auto;
    padding: 48px 24px 64px;
}

.confirmation-card[b-xfslfhyffz] {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.status[b-xfslfhyffz] {
    padding: 3rem 2rem;
    border-radius: 16px;
    background: #ffffff;
}

.spinner[b-xfslfhyffz] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px solid #e5e7eb;
    border-top-color: #6366f1;
    animation: spin-b-xfslfhyffz 1s linear infinite;
    margin: 0 auto 1.5rem;
}

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

.success .icon[b-xfslfhyffz] {
    font-size: 3rem;
    color: #22c55e;
    display: block;
    margin-bottom: 1rem;
}
/* /Components/Pages/StripeConfirmationNoAuth.razor.rz.scp.css */

.page-container[b-x00rh4beuq] {
    background: #f8fafc;
    overflow-y: auto;
}

.section[b-x00rh4beuq] {
    align-items: center;
}

.hero[b-x00rh4beuq] {
    margin-bottom: 40px;
}

.wrap[b-x00rh4beuq] {
    max-width: 980px;
    margin: 0 auto;
    padding: 48px 24px 64px;
}

.confirmation-card[b-x00rh4beuq] {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.status[b-x00rh4beuq] {
    padding: 3rem 2rem;
    border-radius: 16px;
    background: #ffffff;
}

.spinner[b-x00rh4beuq] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px solid #e5e7eb;
    border-top-color: #6366f1;
    animation: spin-b-x00rh4beuq 1s linear infinite;
    margin: 0 auto 1.5rem;
}

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

.success .icon[b-x00rh4beuq] {
    font-size: 3rem;
    color: #22c55e;
    display: block;
    margin-bottom: 1rem;
}
/* /Components/Pages/Subscription.razor.rz.scp.css */
/* Page shell */
.onboarding-page[b-xig4tosrx5] {
    background: #f8fafc;
    overflow-y: auto;
    flex: 1;
    min-height: 100vh;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* iOS scroll fix: -webkit-overflow-scrolling enables momentum scrolling */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Android scroll fix: touch-action enables native scrolling in WebView */
    touch-action: pan-y;
    overflow-scrolling: touch;
}

.onboarding-wrap[b-xig4tosrx5] {
    max-width: 980px;
    margin: 0 auto;
    padding: 48px 24px 64px;
}

/* Header */
.onboarding-header[b-xig4tosrx5] {
    margin-bottom: 32px;
}

.onboarding-step[b-xig4tosrx5] {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #6366f1;
    margin-bottom: 8px;
}

.onboarding-header h1[b-xig4tosrx5] {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
}

.onboarding-subhead[b-xig4tosrx5] {
    margin-top: 8px;
    max-width: 640px;
    color: #6b7280;
}

/* Cards */
.onboarding-card[b-xig4tosrx5] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.card-header h2[b-xig4tosrx5] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.card-header p[b-xig4tosrx5] {
    margin-top: 6px;
    color: #6b7280;
    max-width: 720px;
}

/* Feature list */
.feature-list[b-xig4tosrx5] {
    margin: 16px 0 20px;
    padding-left: 20px;
    color: #374151;
}

    .feature-list li[b-xig4tosrx5] {
        margin: 8px 0;
    }

/* Stripe embed container */
.pricing-embed[b-xig4tosrx5] {
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

/* Footer */
.onboarding-footer[b-xig4tosrx5] {
    margin-top: 32px;
    font-size: 13px;
    color: #6b7280;
    text-align: center;
}
/* /Components/Pages/SubscriptionApp.razor.rz.scp.css */
/* Page shell */
.onboarding-page[b-yl8z0r0vv4] {
    background: #f8fafc;
    overflow-y: auto;
}

.onboarding-wrap[b-yl8z0r0vv4] {
    max-width: 980px;
    margin: 0 auto;
    padding: 48px 24px 64px;
}

/* Header */
.onboarding-header[b-yl8z0r0vv4] {
    margin-bottom: 32px;
}

.onboarding-step[b-yl8z0r0vv4] {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #6366f1;
    margin-bottom: 8px;
}

.onboarding-header h1[b-yl8z0r0vv4] {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
}

.onboarding-subhead[b-yl8z0r0vv4] {
    margin-top: 8px;
    max-width: 640px;
    color: #6b7280;
}

/* Cards */
.onboarding-card[b-yl8z0r0vv4] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.card-header h2[b-yl8z0r0vv4] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.card-header p[b-yl8z0r0vv4] {
    margin-top: 6px;
    color: #6b7280;
    max-width: 720px;
}

/* Feature list */
.feature-list[b-yl8z0r0vv4] {
    margin: 16px 0 20px;
    padding-left: 20px;
    color: #374151;
}

    .feature-list li[b-yl8z0r0vv4] {
        margin: 8px 0;
    }

/* Stripe embed container */
.pricing-embed[b-yl8z0r0vv4] {
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

/* Footer */
.onboarding-footer[b-yl8z0r0vv4] {
    margin-top: 32px;
    font-size: 13px;
    color: #6b7280;
    text-align: center;
}
/* /Components/Pages/TicketDetail.razor.rz.scp.css */
.ticket-detail-page[b-qefwr5evcn] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    gap: 20px;
}

/* Header */
.page-header[b-qefwr5evcn] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.header-left[b-qefwr5evcn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.back-link[b-qefwr5evcn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary, #64748b);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.back-link:hover[b-qefwr5evcn] {
    color: var(--primary-color, #3b82f6);
}

.page-title[b-qefwr5evcn] {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ticket-number[b-qefwr5evcn] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--primary-light, #eff6ff);
    color: var(--primary-color, #3b82f6);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
}

/* Content Layout */
.ticket-content[b-qefwr5evcn] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    flex: 1;
}

@media (max-width: 992px) {
    .ticket-content[b-qefwr5evcn] {
        grid-template-columns: 1fr;
    }
}

/* Main Section */
.ticket-main[b-qefwr5evcn] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.status-bar[b-qefwr5evcn] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ticket-section[b-qefwr5evcn] {
    background: white;
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    padding: 20px;
}

.section-title[b-qefwr5evcn] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.description-content[b-qefwr5evcn] {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary, #1a1a2e);
}

.description-content p[b-qefwr5evcn] {
    margin: 0 0 12px;
}

.no-description[b-qefwr5evcn] {
    color: var(--text-secondary, #64748b);
    font-style: italic;
}

/* Attachments */
.attachments-list[b-qefwr5evcn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.attachment-item[b-qefwr5evcn] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--background-secondary, #f8fafc);
    border-radius: 8px;
}

.attachment-icon[b-qefwr5evcn] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 8px;
    color: var(--primary-color, #3b82f6);
    font-size: 18px;
}

.attachment-info[b-qefwr5evcn] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.attachment-name[b-qefwr5evcn] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #1a1a2e);
}

.attachment-size[b-qefwr5evcn] {
    font-size: 12px;
    color: var(--text-secondary, #64748b);
}

.attachment-download[b-qefwr5evcn] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 8px;
    color: var(--text-secondary, #64748b);
    text-decoration: none;
    transition: all 0.2s ease;
}

.attachment-download:hover[b-qefwr5evcn] {
    color: var(--primary-color, #3b82f6);
    background: var(--primary-light, #eff6ff);
}

/* Sidebar */
.ticket-sidebar[b-qefwr5evcn] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sidebar-card[b-qefwr5evcn] {
    background: white;
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    padding: 20px;
}

.sidebar-card-title[b-qefwr5evcn] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-list[b-qefwr5evcn] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-item[b-qefwr5evcn] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-label[b-qefwr5evcn] {
    font-size: 12px;
    color: var(--text-secondary, #64748b);
}

.info-value[b-qefwr5evcn] {
    font-size: 14px;
    color: var(--text-primary, #1a1a2e);
    word-break: break-all;
}

/* Sync Status */
.sync-info[b-qefwr5evcn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sync-status[b-qefwr5evcn] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
}

.sync-status-synced[b-qefwr5evcn] {
    background: #d1fae5;
    color: #059669;
}

.sync-status-pending[b-qefwr5evcn] {
    background: #fef3c7;
    color: #d97706;
}

.sync-status-failed[b-qefwr5evcn] {
    background: #fecaca;
    color: #dc2626;
}

.sync-details[b-qefwr5evcn] {
    font-size: 12px;
    color: var(--text-secondary, #64748b);
    padding-left: 10px;
}

/* Status Badge */
.status-badge[b-qefwr5evcn] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.status-badge-open[b-qefwr5evcn] {
    background: #dbeafe;
    color: #2563eb;
}

.status-badge-inprogress[b-qefwr5evcn] {
    background: #fef3c7;
    color: #d97706;
}

.status-badge-resolved[b-qefwr5evcn] {
    background: #d1fae5;
    color: #059669;
}

.status-badge-closed[b-qefwr5evcn] {
    background: #e2e8f0;
    color: #64748b;
}

/* Priority Badge */
.priority-badge[b-qefwr5evcn] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.priority-badge-low[b-qefwr5evcn] {
    background: #e2e8f0;
    color: #64748b;
}

.priority-badge-medium[b-qefwr5evcn] {
    background: #dbeafe;
    color: #2563eb;
}

.priority-badge-high[b-qefwr5evcn] {
    background: #fed7aa;
    color: #c2410c;
}

.priority-badge-urgent[b-qefwr5evcn] {
    background: #fecaca;
    color: #dc2626;
}

/* Category Tag */
.category-tag[b-qefwr5evcn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--background-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-secondary, #64748b);
}

/* Loading & Error */
.loading-container[b-qefwr5evcn] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}

.error-state[b-qefwr5evcn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.error-state i[b-qefwr5evcn] {
    font-size: 64px;
    color: #f59e0b;
    margin-bottom: 20px;
}

.error-state h3[b-qefwr5evcn] {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px;
}

.error-state p[b-qefwr5evcn] {
    font-size: 14px;
    color: var(--text-secondary, #64748b);
    margin: 0 0 20px;
}

/* Buttons */
.cp-btn[b-qefwr5evcn] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    text-decoration: none;
}

.cp-btn-primary[b-qefwr5evcn] {
    background: var(--primary-color, #3b82f6);
    color: white;
}

.cp-btn-primary:hover[b-qefwr5evcn] {
    background: var(--primary-dark, #2563eb);
}

/* Header actions */
.header-right[b-qefwr5evcn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Loading notes */
.loading-notes[b-qefwr5evcn] {
    display: flex;
    justify-content: center;
    padding: 40px;
}

/* Closed ticket notice */
.closed-ticket-notice[b-qefwr5evcn] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    margin-top: 1rem;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    color: #6c757d;
    font-size: 0.9rem;
}

.closed-ticket-notice i[b-qefwr5evcn] {
    color: #dc3545;
}
/* /Components/Pages/Tickets.razor.rz.scp.css */
.tickets-page[b-93cg8pk26e] {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 24px;
    gap: 20px;
}

.page-header[b-93cg8pk26e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.header-left[b-93cg8pk26e] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-93cg8pk26e] {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
    margin: 0;
}

.page-subtitle[b-93cg8pk26e] {
    font-size: 14px;
    color: var(--text-secondary, #64748b);
    margin: 0;
}

/* Stats Dashboard */
.stats-dashboard[b-93cg8pk26e] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.stat-card[b-93cg8pk26e] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: white;
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 140px;
}

.stat-card:hover[b-93cg8pk26e] {
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.stat-card-active[b-93cg8pk26e] {
    border-color: var(--primary-color, #3b82f6);
    background: var(--primary-light, #eff6ff);
}

.stat-icon[b-93cg8pk26e] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 18px;
}

.stat-card-open .stat-icon[b-93cg8pk26e] {
    background: #dbeafe;
    color: #2563eb;
}

.stat-card-inprogress .stat-icon[b-93cg8pk26e] {
    background: #fef3c7;
    color: #d97706;
}

.stat-card-resolved .stat-icon[b-93cg8pk26e] {
    background: #d1fae5;
    color: #059669;
}

.stat-card-closed .stat-icon[b-93cg8pk26e] {
    background: #e2e8f0;
    color: #64748b;
}

.stat-card-total .stat-icon[b-93cg8pk26e] {
    background: #e0e7ff;
    color: #4f46e5;
}

.stat-content[b-93cg8pk26e] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-93cg8pk26e] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary, #1a1a2e);
}

.stat-label[b-93cg8pk26e] {
    font-size: 12px;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Filters Bar */
.filters-bar[b-93cg8pk26e] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.cp-search-box[b-93cg8pk26e] {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.cp-search-icon[b-93cg8pk26e] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary, #64748b);
}

.cp-search-input[b-93cg8pk26e] {
    width: 100%;
    padding: 10px 36px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    font-size: 14px;
    background: white;
    transition: border-color 0.2s ease;
}

.cp-search-input:focus[b-93cg8pk26e] {
    outline: none;
    border-color: var(--primary-color, #3b82f6);
}

.cp-search-clear[b-93cg8pk26e] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    padding: 4px;
}

/* Grid Container */
.tickets-grid-container[b-93cg8pk26e] {
    flex: 1;
    background: white;
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    overflow: hidden;
    min-height: 400px;
}

/* Status Badge */
.status-badge[b-93cg8pk26e] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
}

.status-badge-open[b-93cg8pk26e] {
    background: #dbeafe;
    color: #2563eb;
}

.status-badge-inprogress[b-93cg8pk26e] {
    background: #fef3c7;
    color: #d97706;
}

.status-badge-resolved[b-93cg8pk26e] {
    background: #d1fae5;
    color: #059669;
}

.status-badge-closed[b-93cg8pk26e] {
    background: #e2e8f0;
    color: #64748b;
}

/* Priority Badge */
.priority-badge[b-93cg8pk26e] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.priority-badge-low[b-93cg8pk26e] {
    background: #e2e8f0;
    color: #64748b;
}

.priority-badge-medium[b-93cg8pk26e] {
    background: #dbeafe;
    color: #2563eb;
}

.priority-badge-high[b-93cg8pk26e] {
    background: #fed7aa;
    color: #c2410c;
}

.priority-badge-urgent[b-93cg8pk26e] {
    background: #fecaca;
    color: #dc2626;
}

/* Sync Badge */
.sync-badge[b-93cg8pk26e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 12px;
}

.sync-badge-synced[b-93cg8pk26e] {
    background: #d1fae5;
    color: #059669;
}

.sync-badge-pending[b-93cg8pk26e] {
    background: #fef3c7;
    color: #d97706;
}

.sync-badge-failed[b-93cg8pk26e] {
    background: #fecaca;
    color: #dc2626;
}

/* Pagination */
.pagination-bar[b-93cg8pk26e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}

.pagination-info[b-93cg8pk26e] {
    font-size: 14px;
    color: var(--text-secondary, #64748b);
}

.pagination-controls[b-93cg8pk26e] {
    display: flex;
    gap: 8px;
}

/* Empty State */
.empty-state[b-93cg8pk26e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    background: white;
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
}

.empty-state i[b-93cg8pk26e] {
    font-size: 48px;
    color: var(--text-secondary, #64748b);
    margin-bottom: 16px;
}

.empty-state p[b-93cg8pk26e] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
    margin: 0 0 8px;
}

.empty-state span[b-93cg8pk26e] {
    font-size: 14px;
    color: var(--text-secondary, #64748b);
}

.empty-state-large .empty-icon[b-93cg8pk26e] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light, #eff6ff);
    border-radius: 50%;
    margin-bottom: 20px;
}

.empty-state-large .empty-icon i[b-93cg8pk26e] {
    font-size: 32px;
    color: var(--primary-color, #3b82f6);
    margin-bottom: 0;
}

.empty-state-large h3[b-93cg8pk26e] {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px;
}

.empty-state-actions[b-93cg8pk26e] {
    margin-top: 20px;
}

/* Loading */
.loading-container[b-93cg8pk26e] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}

/* Buttons */
.cp-btn[b-93cg8pk26e] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    text-decoration: none;
}

.cp-btn-primary[b-93cg8pk26e] {
    background: var(--primary-color, #3b82f6);
    color: white;
}

.cp-btn-primary:hover[b-93cg8pk26e] {
    background: var(--primary-dark, #2563eb);
}

.cp-btn-secondary[b-93cg8pk26e] {
    background: white;
    color: var(--text-primary, #1a1a2e);
    border: 1px solid var(--border-color, #e2e8f0);
}

.cp-btn-secondary:hover[b-93cg8pk26e] {
    background: var(--background-secondary, #f8fafc);
}

.cp-btn-secondary:disabled[b-93cg8pk26e] {
    opacity: 0.5;
    cursor: not-allowed;
}

.cp-btn-lg[b-93cg8pk26e] {
    padding: 14px 24px;
    font-size: 16px;
}

/* Select Dropdown */
.cp-select[b-93cg8pk26e] {
    padding: 10px 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    font-size: 14px;
    background: white;
    min-width: 160px;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.cp-select:focus[b-93cg8pk26e] {
    outline: none;
    border-color: var(--primary-color, #3b82f6);
}
/* /Components/Pages/Trips.razor.rz.scp.css */
/* ============================================
   Trips Page - CrewPilot Design System
   ============================================ */

/* Main Container - fills remaining space */
.trips-container[b-rbyyx103ty] {
    padding: 24px;
    padding-bottom: 80px;
    background: var(--cp-bg-page, #F9FAFB);
    min-height: calc(100vh - 60px);
    box-sizing: border-box;
}

/* Loading State */
.trips-loading-state[b-rbyyx103ty] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    background: var(--cp-bg-card, white);
    border: 1px solid var(--cp-border, #E5E7EB);
    border-radius: 12px;
    color: var(--cp-text-muted);
}

.trips-loading-state i[b-rbyyx103ty] {
    font-size: 2rem;
    margin-bottom: 12px;
    color: var(--cp-primary);
}

.trips-loading-state p[b-rbyyx103ty] {
    margin: 0;
    font-size: 1rem;
}

/* Header Section */
.trips-header[b-rbyyx103ty] {
    margin-bottom: 20px;
}

.trips-title-row[b-rbyyx103ty] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.trips-title[b-rbyyx103ty] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.trips-title i[b-rbyyx103ty] {
    font-size: 1.5rem;
    color: var(--cp-primary);
}

.trips-title h2[b-rbyyx103ty] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cp-text);
}

/* ============================================
   Filter Bar
   ============================================ */
.trips-filter-bar[b-rbyyx103ty] {
    background: var(--cp-bg-card, white);
    border: 1px solid var(--cp-border, #E5E7EB);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Mobile Filter Toggle Button - hidden on desktop */
.trips-filter-toggle[b-rbyyx103ty] {
    display: none;
}

/* Filter content wrapper */
.trips-filter-content[b-rbyyx103ty] {
    display: block;
}

.trips-filter-row[b-rbyyx103ty] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Search Box */
.trips-search-box[b-rbyyx103ty] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 180px;
    max-width: 280px;
    padding: 10px 14px;
    background: var(--cp-bg-page, #F9FAFB);
    border: 1px solid var(--cp-border, #E5E7EB);
    border-radius: 50px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.trips-search-box:focus-within[b-rbyyx103ty] {
    border-color: var(--cp-primary);
    box-shadow: 0 0 0 3px var(--cp-primary-light);
}

.trips-search-box i[b-rbyyx103ty] {
    color: var(--cp-text-muted);
    font-size: 0.85rem;
}

.trips-search-input[b-rbyyx103ty] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    color: var(--cp-text);
    outline: none;
    min-width: 0;
}

.trips-search-input[b-rbyyx103ty]::placeholder {
    color: var(--cp-text-muted);
}

.trips-search-clear[b-rbyyx103ty] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: var(--cp-border);
    color: var(--cp-text-secondary);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.trips-search-clear:hover[b-rbyyx103ty] {
    background: var(--cp-text-muted);
    color: white;
}

/* Filter Groups */
.trips-filter-group[b-rbyyx103ty] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.trips-filter-group label[b-rbyyx103ty] {
    color: var(--cp-text-muted);
    font-size: 0.85rem;
}

.trips-filter-select[b-rbyyx103ty] {
    padding: 10px 14px;
    border: 1px solid var(--cp-border, #E5E7EB);
    border-radius: 8px;
    background: var(--cp-bg-card, white);
    font-size: 0.85rem;
    color: var(--cp-text);
    cursor: pointer;
    outline: none;
    min-width: 130px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.trips-filter-select:focus[b-rbyyx103ty] {
    border-color: var(--cp-primary);
    box-shadow: 0 0 0 3px var(--cp-primary-light);
}

/* Filter Summary Row */
.trips-filter-summary[b-rbyyx103ty] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--cp-border-light, #F3F4F6);
}

.trips-result-count[b-rbyyx103ty] {
    font-size: 0.85rem;
    color: var(--cp-text-secondary);
}

.trips-result-count strong[b-rbyyx103ty] {
    color: var(--cp-text);
}

.trips-clear-filters[b-rbyyx103ty] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    border-radius: 50px;
    background: var(--cp-border-light, #F3F4F6);
    color: var(--cp-text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.trips-clear-filters:hover[b-rbyyx103ty] {
    background: var(--cp-danger-light);
    color: var(--cp-danger);
}

/* ============================================
   Table Section (Tablet+)
   ============================================ */
.trips-table-section[b-rbyyx103ty] {
    display: block;
}

.trips-table[b-rbyyx103ty] {
    width: 100%;
    border-collapse: collapse;
    background: var(--cp-bg-card, white);
    border: 1px solid var(--cp-border, #E5E7EB);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.trips-table thead[b-rbyyx103ty] {
    background: var(--cp-bg-page, #F9FAFB);
    border-bottom: 1px solid var(--cp-border, #E5E7EB);
}

.trips-table th[b-rbyyx103ty] {
    padding: 14px 16px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.trips-table th:last-child[b-rbyyx103ty] {
    width: 50px;
    text-align: center;
}

.trips-table tbody tr[b-rbyyx103ty] {
    border-bottom: 1px solid var(--cp-border-light, #F3F4F6);
    cursor: pointer;
    transition: background-color 0.15s;
}

.trips-table tbody tr:last-child[b-rbyyx103ty] {
    border-bottom: none;
}

.trips-table tbody tr:hover[b-rbyyx103ty] {
    background: var(--cp-primary-light, #EEF6FF);
}

.trips-table td[b-rbyyx103ty] {
    padding: 16px;
    font-size: 0.9rem;
    color: var(--cp-text);
}

.trips-table-route[b-rbyyx103ty] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.trips-table-route i[b-rbyyx103ty] {
    color: var(--cp-primary);
}

.trips-table-amount[b-rbyyx103ty] {
    font-weight: 700;
}

.trips-table-actions[b-rbyyx103ty] {
    position: relative;
    text-align: center;
}

/* ============================================
   Grid Section (Legacy - kept for reference)
   ============================================ */
.trips-grid-section[b-rbyyx103ty] {
    background: var(--cp-bg-card, white);
    border: 1px solid var(--cp-border, #E5E7EB);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.grid-list[b-rbyyx103ty] {
    margin: 0;
    padding: 0;
}

.bottom[b-rbyyx103ty] {
    background-color: white;
    display: flex;
    height: 40px;
}

.bottom-spacer[b-rbyyx103ty] {
    flex-grow: 1;
}

/* Action Dropdown in Grid */
.actions-dropdown[b-rbyyx103ty] {
    position: relative;
    z-index: 10;
}

.dropdown-box[b-rbyyx103ty] {
    position: relative;
    z-index: 1000;
}

.menu-icon[b-rbyyx103ty] {
    padding: 8px;
    cursor: pointer;
    color: var(--cp-text-secondary);
    transition: color 0.2s;
}

.menu-icon:hover[b-rbyyx103ty] {
    color: var(--cp-primary);
}

.menu-items[b-rbyyx103ty] {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 160px;
    background: var(--cp-bg-card, white);
    border: 1px solid var(--cp-border, #E5E7EB);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 10000 !important;
    overflow: hidden;
}

.menu-items div[b-rbyyx103ty] {
    padding: 10px 14px;
    font-size: 0.85rem;
    color: var(--cp-text);
    cursor: pointer;
    transition: background-color 0.15s;
    background-color: var(--cp-bg-card, white) !important;
}

.menu-items div:hover[b-rbyyx103ty] {
    background-color: var(--cp-border-light, #F3F4F6) !important;
}

/* ============================================
   Dialog Styles
   ============================================ */
.trips-dialog[b-rbyyx103ty] {
    border-radius: 16px !important;
}

.trips-dialog-header[b-rbyyx103ty] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cp-text);
}

.trips-dialog-icon[b-rbyyx103ty] {
    font-size: 1.25rem;
    color: var(--cp-primary);
}

.trips-dialog-header-success .trips-dialog-icon[b-rbyyx103ty] {
    color: var(--cp-success);
}

.trips-dialog-header-danger .trips-dialog-icon[b-rbyyx103ty] {
    color: var(--cp-danger);
}

.trips-dialog-content[b-rbyyx103ty] {
    padding: 8px 0;
}

.trips-dialog-message[b-rbyyx103ty] {
    margin: 0 0 12px 0;
    font-size: 1rem;
    color: var(--cp-text);
    line-height: 1.5;
}

.trips-dialog-hint[b-rbyyx103ty] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.85rem;
    color: var(--cp-text-muted);
}

.trips-dialog-hint i[b-rbyyx103ty] {
    color: var(--cp-text-muted);
}

.trips-dialog-warning[b-rbyyx103ty] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 0 0;
    padding: 12px 14px;
    background: var(--cp-danger-light);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--cp-danger);
}

.trips-dialog-warning i[b-rbyyx103ty] {
    font-size: 1rem;
}

.trips-dialog-field[b-rbyyx103ty] {
    margin-bottom: 16px;
}

.trips-dialog-label[b-rbyyx103ty] {
    display: block;
    margin-bottom: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cp-text-secondary);
}

/* Route Selection in Create Dialog */
.trips-route-select[b-rbyyx103ty] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.trips-route-dropdown[b-rbyyx103ty] {
    flex: 1;
}

.trips-selected-routes[b-rbyyx103ty] {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--cp-border-light);
}

.trips-route-chips[b-rbyyx103ty] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.trips-route-chip[b-rbyyx103ty] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--cp-primary-light);
    color: var(--cp-primary);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
}

.trips-route-chip i[b-rbyyx103ty] {
    font-size: 0.75rem;
}

/* Dialog Button Overrides */
.trips-dialog-btn-cancel[b-rbyyx103ty] {
    background: var(--cp-border-light, #F3F4F6) !important;
    color: var(--cp-text-secondary) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
}

.trips-dialog-btn-cancel:hover[b-rbyyx103ty] {
    background: var(--cp-border, #E5E7EB) !important;
}

.trips-dialog-btn-confirm[b-rbyyx103ty] {
    background: var(--cp-primary) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
}

.trips-dialog-btn-confirm:hover[b-rbyyx103ty] {
    background: var(--cp-primary-hover) !important;
}

.trips-dialog-btn-success[b-rbyyx103ty] {
    background: var(--cp-success) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
}

.trips-dialog-btn-success:hover[b-rbyyx103ty] {
    background: #059669 !important;
}

.trips-dialog-btn-danger[b-rbyyx103ty] {
    background: var(--cp-danger) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
}

.trips-dialog-btn-danger:hover[b-rbyyx103ty] {
    background: #DC2626 !important;
}

/* ============================================
   Responsive - Tablet (Filter Grid Layout)
   ============================================ */
@media (max-width: 1200px) {
    .trips-filter-row[b-rbyyx103ty] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .trips-search-box[b-rbyyx103ty] {
        grid-column: 1 / -1;
        max-width: none;
    }

    .trips-filter-group[b-rbyyx103ty] {
        width: 100%;
    }

    .trips-filter-select[b-rbyyx103ty] {
        flex: 1;
        min-width: 0;
    }
}

/* ============================================
   Responsive - Small Tablet
   ============================================ */
@media (max-width: 1024px) {
    .trips-container[b-rbyyx103ty] {
        padding: 20px;
    }
}

/* ============================================
   Responsive - Mobile
   ============================================ */
@media (max-width: 768px) {
    /* Hide table, show cards on mobile */
    .trips-table-section[b-rbyyx103ty] {
        display: none;
    }

    .trips-cards-section[b-rbyyx103ty] {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .trips-container[b-rbyyx103ty] {
        padding: 16px;
        min-height: auto;
        height: auto;
    }

    .trips-title-row[b-rbyyx103ty] {
        flex-direction: column;
        align-items: stretch;
    }

    .trips-title[b-rbyyx103ty] {
        justify-content: center;
    }

    .trips-title-row .cp-btn[b-rbyyx103ty] {
        width: 100%;
        justify-content: center;
    }

    .trips-filter-bar[b-rbyyx103ty] {
        padding: 0;
        overflow: hidden;
    }

    /* Hide table empty state on mobile */
    .trips-table-section .trips-empty-state[b-rbyyx103ty] {
        display: none !important;
    }

    /* Mobile Filter Toggle Button */
    .trips-filter-toggle[b-rbyyx103ty] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 14px 16px;
        border: none;
        background: transparent;
        color: var(--cp-text);
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .trips-filter-toggle:hover[b-rbyyx103ty] {
        background: var(--cp-border-light, #F3F4F6);
    }

    .trips-filter-toggle i:first-child[b-rbyyx103ty] {
        margin-right: 8px;
        color: var(--cp-primary);
    }

    .trips-filter-toggle span[b-rbyyx103ty] {
        flex: 1;
        text-align: left;
    }

    .trips-filter-badge[b-rbyyx103ty] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        margin-right: 8px;
        background: var(--cp-primary);
        color: white;
        border-radius: 50px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .trips-filter-chevron[b-rbyyx103ty] {
        color: var(--cp-text-muted);
        font-size: 0.8rem;
        transition: transform 0.2s;
    }

    /* Collapsible filter content */
    .trips-filter-content[b-rbyyx103ty] {
        display: none;
        padding: 0 16px 16px 16px;
        border-top: 1px solid var(--cp-border-light, #F3F4F6);
        animation: slideDown-b-rbyyx103ty 0.2s ease-out;
    }

    .trips-filter-content.expanded[b-rbyyx103ty] {
        display: block;
    }

    @keyframes slideDown-b-rbyyx103ty {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .trips-filter-row[b-rbyyx103ty] {
        grid-template-columns: 1fr;
        padding-top: 12px;
    }

    .trips-filter-group[b-rbyyx103ty] {
        width: 100%;
    }

    .trips-filter-group label[b-rbyyx103ty] {
        min-width: 30px;
    }

    .trips-filter-select[b-rbyyx103ty] {
        flex: 1;
    }

    .trips-filter-summary[b-rbyyx103ty] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-top: 16px;
        padding-top: 16px;
    }

    .trips-result-count[b-rbyyx103ty] {
        text-align: center;
    }

    .trips-clear-filters[b-rbyyx103ty] {
        justify-content: center;
    }

    /* Compact card styling for mobile */
    .trip-card[b-rbyyx103ty] {
        padding: 10px 12px;
    }

    .trip-card-header[b-rbyyx103ty] {
        margin-bottom: 6px;
    }

    .trip-card-route[b-rbyyx103ty] {
        font-size: 0.85rem;
        gap: 6px;
    }

    .trip-card-route i[b-rbyyx103ty] {
        font-size: 0.8rem;
    }

    .trip-card-menu-btn[b-rbyyx103ty] {
        width: 26px;
        height: 26px;
    }

    .trip-card-body[b-rbyyx103ty] {
        gap: 0;
    }

    /* Single row layout for all details */
    .trip-card-details[b-rbyyx103ty] {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        flex-wrap: nowrap;
    }

    .trip-card-info-item[b-rbyyx103ty] {
        font-size: 0.7rem;
        gap: 3px;
        flex-shrink: 1;
        min-width: 0;
    }

    .trip-card-info-item span[b-rbyyx103ty] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 70px;
    }

    .trip-card-info-item i[b-rbyyx103ty] {
        font-size: 0.65rem;
        flex-shrink: 0;
    }

    .trip-card-status[b-rbyyx103ty] {
        padding: 2px 6px;
        font-size: 0.6rem;
        flex-shrink: 0;
    }

    .trip-card-amount[b-rbyyx103ty] {
        font-size: 0.8rem;
        flex-shrink: 0;
        font-weight: 600;
    }
}

/* ============================================
   Responsive - Small Mobile
   ============================================ */
@media (max-width: 480px) {
    .trips-container[b-rbyyx103ty] {
        padding: 10px;
    }

    .trips-title h2[b-rbyyx103ty] {
        font-size: 1.25rem;
    }

    .trips-title i[b-rbyyx103ty] {
        font-size: 1.25rem;
    }

    .trips-filter-toggle[b-rbyyx103ty] {
        padding: 12px;
        font-size: 0.9rem;
    }

    .trips-filter-content[b-rbyyx103ty] {
        padding: 0 12px 12px 12px;
    }

    .trips-search-box[b-rbyyx103ty] {
        padding: 8px 12px;
    }

    .trips-filter-select[b-rbyyx103ty] {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    /* Even more compact cards on small mobile */
    .trips-cards-section[b-rbyyx103ty] {
        gap: 6px;
    }

    .trip-card[b-rbyyx103ty] {
        padding: 8px 10px;
    }

    .trip-card-header[b-rbyyx103ty] {
        margin-bottom: 4px;
    }

    .trip-card-route[b-rbyyx103ty] {
        font-size: 0.8rem;
    }

    .trip-card-route i[b-rbyyx103ty] {
        font-size: 0.75rem;
    }

    .trip-card-menu-btn[b-rbyyx103ty] {
        width: 24px;
        height: 24px;
    }

    .trip-card-menu-btn i[b-rbyyx103ty] {
        font-size: 0.7rem;
    }

    /* Force single row on small mobile */
    .trip-card-details[b-rbyyx103ty] {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        gap: 4px;
    }

    .trip-card-info-item[b-rbyyx103ty] {
        font-size: 0.65rem;
        gap: 2px;
        flex-shrink: 1;
        min-width: 0;
    }

    .trip-card-info-item span[b-rbyyx103ty] {
        max-width: 55px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .trip-card-info-item i[b-rbyyx103ty] {
        font-size: 0.55rem;
        flex-shrink: 0;
    }

    .trip-card-status[b-rbyyx103ty] {
        padding: 2px 4px;
        font-size: 0.5rem;
        flex-shrink: 0;
    }

    .trip-card-amount[b-rbyyx103ty] {
        font-size: 0.7rem;
        flex-shrink: 0;
    }

    /* Hide more columns on very small screens */
    .e-grid .e-headercell:nth-child(3)[b-rbyyx103ty],
    .e-grid .e-rowcell:nth-child(3)[b-rbyyx103ty] {
        display: none;
    }
}

/* ============================================
   Card View (Mobile Only)
   ============================================ */

.trips-cards-section[b-rbyyx103ty] {
    display: none;
}

.trip-card[b-rbyyx103ty] {
    background: var(--cp-bg-card, white);
    border: 1px solid var(--cp-border, #E5E7EB);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.trip-card:hover[b-rbyyx103ty] {
    border-color: var(--cp-primary);
    box-shadow: 0 4px 12px rgba(59, 158, 255, 0.15);
}

.trip-card:active[b-rbyyx103ty] {
    transform: scale(0.98);
}

.trip-card-header[b-rbyyx103ty] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.trip-card-route[b-rbyyx103ty] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--cp-text);
    font-size: 0.95rem;
    flex: 1;
    min-width: 0;
}

.trip-card-route i[b-rbyyx103ty] {
    color: var(--cp-primary);
    flex-shrink: 0;
}

.trip-card-route span[b-rbyyx103ty] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trip-card-actions[b-rbyyx103ty] {
    position: relative;
}

.trip-card-menu-btn[b-rbyyx103ty] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: var(--cp-border-light, #F3F4F6);
    color: var(--cp-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.trip-card-menu-btn:hover[b-rbyyx103ty] {
    background: var(--cp-border);
    color: var(--cp-text);
}

.trip-card-menu[b-rbyyx103ty] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--cp-bg-card, white);
    border: 1px solid var(--cp-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    z-index: 100;
    min-width: 140px;
}

.trip-card-menu-item[b-rbyyx103ty] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 0.9rem;
    color: var(--cp-text);
    cursor: pointer;
    transition: background-color 0.15s;
}

.trip-card-menu-item:hover[b-rbyyx103ty] {
    background: var(--cp-border-light, #F3F4F6);
}

.trip-card-menu-item i[b-rbyyx103ty] {
    font-size: 0.85rem;
    width: 16px;
    text-align: center;
}

.trip-card-menu-danger[b-rbyyx103ty] {
    color: var(--cp-danger);
}

.trip-card-menu-danger:hover[b-rbyyx103ty] {
    background: var(--cp-danger-light);
}

.trip-card-body[b-rbyyx103ty] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.trip-card-details[b-rbyyx103ty] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.trip-card-info-item[b-rbyyx103ty] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--cp-text-secondary);
}

.trip-card-info-item i[b-rbyyx103ty] {
    font-size: 0.8rem;
    color: var(--cp-text-muted);
}

.trip-card-status[b-rbyyx103ty] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.trip-card-status.status-complete[b-rbyyx103ty] {
    background: rgba(34, 197, 94, 0.15);
    color: #16A34A;
}

.trip-card-status.status-started[b-rbyyx103ty] {
    background: rgba(59, 158, 255, 0.15);
    color: var(--cp-primary);
}

.trip-card-status.status-scheduled[b-rbyyx103ty] {
    background: rgba(245, 158, 11, 0.15);
    color: #D97706;
}

.trip-card-status.status-default[b-rbyyx103ty] {
    background: var(--cp-border-light, #F3F4F6);
    color: var(--cp-text-secondary);
}

.trip-card-amount[b-rbyyx103ty] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cp-text);
}

/* Empty state */
.trips-empty-state[b-rbyyx103ty] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    background: var(--cp-bg-card, white);
    border: 1px solid var(--cp-border);
    border-radius: 12px;
    color: var(--cp-text-muted);
}

.trips-empty-state i[b-rbyyx103ty] {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.trips-empty-state p[b-rbyyx103ty] {
    margin: 0;
    font-size: 1rem;
}

/* ============================================
   Simple Modal (replacing SfDialog temporarily)
   ============================================ */
.modal-overlay[b-rbyyx103ty] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-rbyyx103ty] {
    background: var(--cp-bg-card, white);
    border-radius: 12px;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.modal-header[b-rbyyx103ty] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--cp-border, #E5E7EB);
}

.modal-header h3[b-rbyyx103ty] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.modal-close[b-rbyyx103ty] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--cp-text-muted);
    line-height: 1;
}

.modal-body[b-rbyyx103ty] {
    padding: 20px;
}

.modal-footer[b-rbyyx103ty] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--cp-border, #E5E7EB);
}

/* Hide mobile empty state on tablet+ */
.trips-empty-state-mobile[b-rbyyx103ty] {
    display: none !important;
}

@media (max-width: 768px) {
    .trips-empty-state-mobile[b-rbyyx103ty] {
        display: flex !important;
    }
}

/* ============================================
   Schedule Trip Modal - Form Styles
   ============================================ */
.modal-content-lg[b-rbyyx103ty] {
    max-width: 500px;
}

.form-group[b-rbyyx103ty] {
    margin-bottom: 16px;
}

.form-label[b-rbyyx103ty] {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cp-text-secondary, #6B7280);
}

.form-select[b-rbyyx103ty],
.form-input[b-rbyyx103ty] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--cp-border, #E5E7EB);
    border-radius: 8px;
    background: var(--cp-bg-card, white);
    font-size: 0.9rem;
    color: var(--cp-text, #1F2937);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.form-select:focus[b-rbyyx103ty],
.form-input:focus[b-rbyyx103ty] {
    border-color: var(--cp-primary, #3B9EFF);
    box-shadow: 0 0 0 3px var(--cp-primary-light, rgba(59, 158, 255, 0.15));
}

/* Selected Routes */
.selected-routes[b-rbyyx103ty] {
    margin-bottom: 12px;
}

.route-tags[b-rbyyx103ty] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.route-tag[b-rbyyx103ty] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--cp-primary-light, rgba(59, 158, 255, 0.15));
    color: var(--cp-primary, #3B9EFF);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
}

.route-tag-remove[b-rbyyx103ty] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--cp-primary, #3B9EFF);
    color: white;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    transition: background-color 0.2s;
}

.route-tag-remove:hover[b-rbyyx103ty] {
    background: var(--cp-primary-hover, #2b8ae6);
}

.btn-sm[b-rbyyx103ty] {
    padding: 8px 14px;
    font-size: 0.85rem;
}

.error-message[b-rbyyx103ty] {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--cp-danger-light, rgba(239, 68, 68, 0.1));
    color: var(--cp-danger, #EF4444);
    border-radius: 8px;
    font-size: 0.85rem;
}

/* Disabled button state */
.cp-btn:disabled[b-rbyyx103ty] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/Pages/User.razor.rz.scp.css */
/* ============================================
   CrewPilot Brand Variables
   ============================================ */
:root[b-weu4l9jcmd] {
    --cp-primary: #3B9EFF;
    --cp-primary-hover: #2B8AE8;
    --cp-primary-light: #E8F4FF;
    --cp-dark: #1A1D2E;
    --cp-text: #1A1D2E;
    --cp-text-secondary: #6B7280;
    --cp-text-muted: #9CA3AF;
    --cp-bg-page: #EEF2F6;
    --cp-bg-card: #FFFFFF;
    --cp-border: #E5E7EB;
    --cp-border-light: #F3F4F6;
    --cp-success: #10B981;
    --cp-warning: #F59E0B;
    --cp-danger: #EF4444;
}

/* ============================================
   User Detail Page
   ============================================ */

.user-detail-page[b-weu4l9jcmd] {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
    background: var(--cp-bg-page);
    min-height: 100vh;
}

/* ============================================
   Loading & Error States
   ============================================ */
.loading-state[b-weu4l9jcmd],
.error-state[b-weu4l9jcmd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    color: var(--cp-text-secondary);
}

.loading-state i[b-weu4l9jcmd],
.error-state i[b-weu4l9jcmd] {
    font-size: 3rem;
    margin-bottom: 16px;
}

.loading-state i[b-weu4l9jcmd] {
    color: var(--cp-primary);
}

.error-state i[b-weu4l9jcmd] {
    color: var(--cp-text-muted);
}

.error-state h2[b-weu4l9jcmd] {
    margin: 0 0 8px;
    color: var(--cp-text);
}

.error-state p[b-weu4l9jcmd] {
    margin: 0 0 24px;
}

/* ============================================
   Page Header
   ============================================ */
.page-header[b-weu4l9jcmd] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.btn-back[b-weu4l9jcmd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--cp-bg-card);
    border: 1px solid var(--cp-border);
    border-radius: 50px;
    color: var(--cp-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-back:hover[b-weu4l9jcmd] {
    background: var(--cp-primary-light);
    color: var(--cp-primary);
    border-color: var(--cp-primary);
}

.header-content[b-weu4l9jcmd] {
    flex: 1;
}

.header-content h1[b-weu4l9jcmd] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--cp-text);
    margin: 0;
}

.header-subtitle[b-weu4l9jcmd] {
    color: var(--cp-text-secondary);
    font-size: 0.9rem;
    margin: 4px 0 0;
}

.header-actions[b-weu4l9jcmd] {
    display: flex;
    gap: 10px;
}

/* ============================================
   Profile Card
   ============================================ */
.profile-card[b-weu4l9jcmd] {
    background: var(--cp-bg-card);
    border: 1px solid var(--cp-border);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.profile-card:hover[b-weu4l9jcmd] {
    border-color: var(--cp-primary);
    box-shadow: 0 4px 12px rgba(59, 158, 255, 0.1);
}

.profile-header[b-weu4l9jcmd] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-avatar[b-weu4l9jcmd] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
    overflow: hidden;
}

.profile-avatar img[b-weu4l9jcmd] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-info[b-weu4l9jcmd] {
    flex: 1;
}

.profile-name[b-weu4l9jcmd] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--cp-text);
    margin: 0 0 4px;
}

.profile-email[b-weu4l9jcmd] {
    color: var(--cp-text-secondary);
    margin: 0 0 12px;
}

.profile-badges[b-weu4l9jcmd] {
    display: flex;
    gap: 8px;
}

/* ============================================
   Details Grid
   ============================================ */
.details-grid[b-weu4l9jcmd] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.detail-card[b-weu4l9jcmd] {
    background: var(--cp-bg-card);
    border: 1px solid var(--cp-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.detail-card:hover[b-weu4l9jcmd] {
    border-color: var(--cp-primary);
    box-shadow: 0 4px 12px rgba(59, 158, 255, 0.1);
}

.detail-card-header[b-weu4l9jcmd] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--cp-border);
    background: var(--cp-bg-page);
}

.detail-card-header i[b-weu4l9jcmd] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cp-primary-light);
    color: var(--cp-primary);
    border-radius: 8px;
    font-size: 0.85rem;
}

.detail-card-header h3[b-weu4l9jcmd] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cp-text);
}

.detail-card-content[b-weu4l9jcmd] {
    padding: 16px 20px;
}

.detail-row[b-weu4l9jcmd] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--cp-border-light);
}

.detail-row:last-child[b-weu4l9jcmd] {
    border-bottom: none;
}

.detail-label[b-weu4l9jcmd] {
    color: var(--cp-text-secondary);
    font-size: 0.9rem;
}

.detail-value[b-weu4l9jcmd] {
    color: var(--cp-text);
    font-size: 0.9rem;
    text-align: right;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.detail-value.mono[b-weu4l9jcmd] {
    font-family: ui-monospace, monospace;
    font-size: 0.8rem;
    color: var(--cp-text-secondary);
}

.detail-empty[b-weu4l9jcmd] {
    color: var(--cp-text-muted);
    font-style: italic;
}

.detail-note[b-weu4l9jcmd] {
    color: var(--cp-text-muted);
    font-size: 0.8rem;
}

.btn-link[b-weu4l9jcmd] {
    background: none;
    border: none;
    color: var(--cp-primary);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
    text-decoration: underline;
}

.btn-link:hover[b-weu4l9jcmd] {
    color: var(--cp-primary-hover);
}

/* ============================================
   Status Indicators
   ============================================ */
.status-indicator[b-weu4l9jcmd] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.status-indicator.active[b-weu4l9jcmd] {
    background: var(--cp-success);
}

.status-indicator.inactive[b-weu4l9jcmd] {
    background: var(--cp-text-muted);
}

.stale-warning[b-weu4l9jcmd] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--cp-danger);
    font-size: 0.8rem;
    font-weight: 500;
}

/* ============================================
   Permissions
   ============================================ */
.permission-row[b-weu4l9jcmd] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

.permission-check[b-weu4l9jcmd] {
    color: var(--cp-success);
    font-size: 0.8rem;
}

/* ============================================
   Quick Actions
   ============================================ */
.actions-content[b-weu4l9jcmd] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.action-btn[b-weu4l9jcmd] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: var(--cp-bg-page);
    border: 1px solid var(--cp-border);
    border-radius: 50px;
    color: var(--cp-text);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.action-btn:hover[b-weu4l9jcmd] {
    background: var(--cp-primary-light);
    border-color: var(--cp-primary);
    color: var(--cp-primary);
}

.action-btn i[b-weu4l9jcmd] {
    color: var(--cp-primary);
    width: 20px;
    text-align: center;
}

/* ============================================
   Buttons
   ============================================ */
.btn-primary[b-weu4l9jcmd] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--cp-primary);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.btn-primary:hover[b-weu4l9jcmd] {
    background: var(--cp-primary-hover);
    transform: translateY(-1px);
}

.btn-primary:disabled[b-weu4l9jcmd] {
    background: #B8D9FF;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary[b-weu4l9jcmd] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--cp-bg-card);
    color: var(--cp-text);
    border: 1px solid var(--cp-border);
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover[b-weu4l9jcmd] {
    background: var(--cp-primary-light);
    border-color: var(--cp-primary);
    color: var(--cp-primary);
}

.btn-danger[b-weu4l9jcmd] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--cp-danger);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-danger:hover[b-weu4l9jcmd] {
    background: #DC2626;
}

.btn-danger-outline[b-weu4l9jcmd] {
    background: var(--cp-bg-card);
    color: var(--cp-danger);
    border: 1px solid #FECACA;
}

.btn-danger-outline:hover[b-weu4l9jcmd] {
    background: #FEF2F2;
    border-color: var(--cp-danger);
}

/* ============================================
   Role Badges & Status Badges
   ============================================ */
.role-badge[b-weu4l9jcmd] {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.role-admin[b-weu4l9jcmd] {
    background: #EDE9FE;
    color: #6D28D9;
}

.role-business[b-weu4l9jcmd] {
    background: var(--cp-primary-light);
    color: var(--cp-primary);
}

.role-field[b-weu4l9jcmd] {
    background: #D1FAE5;
    color: #047857;
}

.role-default[b-weu4l9jcmd] {
    background: var(--cp-border-light);
    color: var(--cp-text-secondary);
}

.status-badge[b-weu4l9jcmd] {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-active[b-weu4l9jcmd] {
    background: #D1FAE5;
    color: #047857;
}

.status-inactive[b-weu4l9jcmd] {
    background: var(--cp-border-light);
    color: var(--cp-text-secondary);
}

/* ============================================
   Avatar Colors
   ============================================ */
.avatar-admin[b-weu4l9jcmd] {
    background: linear-gradient(135deg, #6D28D9, #8B5CF6);
}

.avatar-business[b-weu4l9jcmd] {
    background: linear-gradient(135deg, var(--cp-primary), #60B5FF);
}

.avatar-field[b-weu4l9jcmd] {
    background: linear-gradient(135deg, #10B981, #34D399);
}

.avatar-default[b-weu4l9jcmd] {
    background: linear-gradient(135deg, var(--cp-text-secondary), var(--cp-text-muted));
}

/* ============================================
   Dialogs
   ============================================ */
.dialog-header[b-weu4l9jcmd] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--cp-text);
}

.dialog-header i[b-weu4l9jcmd] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cp-primary-light);
    color: var(--cp-primary);
    border-radius: 10px;
}

.dialog-header-warning i[b-weu4l9jcmd] {
    background: #FEF3C7;
    color: var(--cp-warning);
}

.dialog-content[b-weu4l9jcmd] {
    padding: 8px 0;
    color: var(--cp-text-secondary);
}

.dialog-footer[b-weu4l9jcmd] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--cp-border);
    margin-top: 16px;
}

/* ============================================
   Form Elements
   ============================================ */
.form-group[b-weu4l9jcmd] {
    margin-bottom: 20px;
}

.form-label[b-weu4l9jcmd] {
    display: block;
    font-weight: 500;
    color: var(--cp-text);
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.form-input[b-weu4l9jcmd] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--cp-border);
    border-radius: 10px;
    font-size: 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus[b-weu4l9jcmd] {
    outline: none;
    border-color: var(--cp-primary);
    box-shadow: 0 0 0 3px rgba(59, 158, 255, 0.15);
}

/* ============================================
   Role Selector
   ============================================ */
.role-selector[b-weu4l9jcmd] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.role-option[b-weu4l9jcmd] {
    padding: 14px 16px;
    border: 2px solid var(--cp-border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

.role-option:hover[b-weu4l9jcmd] {
    border-color: #A8D4FF;
    background: var(--cp-primary-light);
}

.role-option.selected[b-weu4l9jcmd] {
    border-color: var(--cp-primary);
    background: var(--cp-primary-light);
}

.role-option.current[b-weu4l9jcmd] {
    border-color: var(--cp-border);
    background: var(--cp-bg-page);
}

.role-option-header[b-weu4l9jcmd] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.role-option-header i[b-weu4l9jcmd] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cp-primary-light);
    color: var(--cp-primary);
    border-radius: 8px;
    font-size: 0.85rem;
}

.role-option-name[b-weu4l9jcmd] {
    font-weight: 600;
    color: var(--cp-text);
}

.role-option-description[b-weu4l9jcmd] {
    margin: 6px 0 0 0;
    font-size: 0.85rem;
    color: var(--cp-text-secondary);
    line-height: 1.4;
}

.current-badge[b-weu4l9jcmd] {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--cp-text-secondary);
    background: var(--cp-border);
    padding: 2px 10px;
    border-radius: 50px;
}

/* ============================================
   Deactivate Warning
   ============================================ */
.deactivate-warning p[b-weu4l9jcmd] {
    margin: 0 0 12px 0;
    color: var(--cp-text);
}

.warning-list[b-weu4l9jcmd] {
    margin: 0;
    padding-left: 20px;
    color: var(--cp-text-secondary);
    font-size: 0.9rem;
}

.warning-list li[b-weu4l9jcmd] {
    margin-bottom: 6px;
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 900px) {
    .details-grid[b-weu4l9jcmd] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .user-detail-page[b-weu4l9jcmd] {
        padding: 16px;
    }

    .page-header[b-weu4l9jcmd] {
        flex-wrap: wrap;
    }

    .header-actions[b-weu4l9jcmd] {
        width: 100%;
        justify-content: flex-end;
    }

    .profile-header[b-weu4l9jcmd] {
        flex-direction: column;
        text-align: center;
    }

    .profile-badges[b-weu4l9jcmd] {
        justify-content: center;
    }

    .profile-header .btn-secondary[b-weu4l9jcmd] {
        width: 100%;
        justify-content: center;
    }

    .detail-row[b-weu4l9jcmd] {
        flex-direction: column;
        gap: 4px;
    }

    .detail-value[b-weu4l9jcmd] {
        text-align: left;
        justify-content: flex-start;
    }
}
/* /Components/Pages/Users.razor.rz.scp.css */
/* ============================================
   Users Page - Team Management
   CrewPilot Brand Styling
   ============================================ */

/* Brand Colors */
:root[b-ixy7rgt8ny] {
    --cp-primary: #3B9EFF;
    --cp-primary-hover: #2B8AE8;
    --cp-primary-light: #E8F4FF;
    --cp-dark: #1A1D2E;
    --cp-text: #1A1D2E;
    --cp-text-secondary: #6B7280;
    --cp-text-muted: #9CA3AF;
    --cp-bg-page: #EEF2F6;
    --cp-bg-card: #FFFFFF;
    --cp-border: #E5E7EB;
    --cp-border-light: #F3F4F6;
    --cp-success: #10B981;
    --cp-warning: #F59E0B;
    --cp-danger: #EF4444;
}

/* Page Container */
.users-page[b-ixy7rgt8ny] {
    padding: 24px 24px 80px 24px;
    max-width: 1400px;
    margin: 0 auto;
    background: var(--cp-bg-page);
    min-height: 100vh;
}

/* ============================================
   Header with Stats
   ============================================ */
.page-header[b-ixy7rgt8ny] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}

.header-content h1[b-ixy7rgt8ny] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--cp-dark);
    margin: 0 0 4px 0;
    letter-spacing: -0.02em;
}

.header-subtitle[b-ixy7rgt8ny] {
    color: var(--cp-text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.header-stats[b-ixy7rgt8ny] {
    display: flex;
    gap: 12px;
}

.stat-card[b-ixy7rgt8ny] {
    background: #FFFFFF;
    border: 1px solid var(--cp-border);
    border-radius: 12px;
    padding: 14px 24px;
    text-align: center;
    min-width: 110px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.stat-card.stat-pending[b-ixy7rgt8ny] {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-color: #FCD34D;
}

.stat-value[b-ixy7rgt8ny] {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--cp-dark);
    line-height: 1.2;
}

.stat-pending .stat-value[b-ixy7rgt8ny] {
    color: #92400E;
}

.stat-label[b-ixy7rgt8ny] {
    display: block;
    font-size: 0.7rem;
    color: var(--cp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
    font-weight: 600;
}

/* ============================================
   Search Container
   ============================================ */
.search-container[b-ixy7rgt8ny] {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    align-items: center;
}

.search-box[b-ixy7rgt8ny] {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.search-icon[b-ixy7rgt8ny] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cp-text-muted);
    font-size: 0.9rem;
}

.search-input[b-ixy7rgt8ny] {
    width: 100%;
    padding: 12px 44px 12px 46px;
    border: 1px solid var(--cp-border);
    border-radius: 50px;
    font-size: 0.9rem;
    background: #FFFFFF;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.search-input:focus[b-ixy7rgt8ny] {
    outline: none;
    border-color: var(--cp-primary);
    box-shadow: 0 0 0 3px rgba(59, 158, 255, 0.15);
}

.search-input[b-ixy7rgt8ny]::placeholder {
    color: var(--cp-text-muted);
}

.search-clear[b-ixy7rgt8ny] {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--cp-text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
}

.search-clear:hover[b-ixy7rgt8ny] {
    color: var(--cp-text-secondary);
    background: var(--cp-border-light);
}

/* ============================================
   Buttons - CrewPilot Style (Pill Shape)
   ============================================ */
.btn-primary[b-ixy7rgt8ny] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #3B9EFF;
    color: #FFFFFF !important;
    border: none;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    box-shadow: 0 2px 8px rgba(59, 158, 255, 0.3);
}

.btn-primary:hover[b-ixy7rgt8ny] {
    background: #2B8AE8;
}

.btn-primary:active[b-ixy7rgt8ny] {
    transform: scale(0.98);
}

.btn-primary:disabled[b-ixy7rgt8ny] {
    background: #A0C4FF;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-secondary[b-ixy7rgt8ny] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--cp-bg-card);
    color: var(--cp-text);
    border: 1px solid var(--cp-border);
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover[b-ixy7rgt8ny] {
    background: var(--cp-border-light);
    border-color: #D1D5DB;
}

.btn-secondary.btn-sm[b-ixy7rgt8ny] {
    padding: 8px 16px;
    font-size: 0.8rem;
}

.btn-danger[b-ixy7rgt8ny] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--cp-danger);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-danger:hover[b-ixy7rgt8ny] {
    background: #DC2626;
}

.btn-icon[b-ixy7rgt8ny] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--cp-text-secondary);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.btn-icon:hover[b-ixy7rgt8ny] {
    background: var(--cp-border-light);
    color: var(--cp-text);
}

.btn-icon.btn-danger:hover[b-ixy7rgt8ny] {
    background: #FEF2F2;
    color: var(--cp-danger);
}

.btn-menu[b-ixy7rgt8ny] {
    color: var(--cp-text-muted);
}

/* ============================================
   Collapsible Sections
   ============================================ */
.section[b-ixy7rgt8ny] {
    background: #FFFFFF;
    border: 1px solid var(--cp-border);
    border-radius: 16px;
    margin-bottom: 16px;
    overflow: visible;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.section.inactive-section[b-ixy7rgt8ny] {
    opacity: 0.75;
}

.section-header[b-ixy7rgt8ny] {
    padding: 18px 24px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
    border-radius: 16px;
}

.section-header:hover[b-ixy7rgt8ny] {
    background: var(--cp-border-light);
}

.section-title[b-ixy7rgt8ny] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: var(--cp-dark);
    font-size: 1rem;
}

.chevron-icon[b-ixy7rgt8ny] {
    font-size: 0.7rem;
    color: var(--cp-text-muted);
    transition: transform 0.2s;
}

.section.expanded .chevron-icon[b-ixy7rgt8ny] {
    transform: rotate(90deg);
}

.section-icon[b-ixy7rgt8ny] {
    font-size: 1.1rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #E8F4FF;
    color: #3B9EFF;
}

.section-icon.pending-icon[b-ixy7rgt8ny] {
    color: #3B9EFF;
    background: #E8F4FF;
}

.section-icon.active-icon[b-ixy7rgt8ny] {
    color: #3B9EFF;
    background: #E8F4FF;
}

.section-icon.inactive-icon[b-ixy7rgt8ny] {
    color: var(--cp-text-muted);
    background: var(--cp-border-light);
}

.section-count[b-ixy7rgt8ny] {
    background: var(--cp-primary-light);
    color: var(--cp-primary);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 50px;
    margin-left: auto;
}

.section-content[b-ixy7rgt8ny] {
    padding: 0 24px 24px;
    overflow: visible;
}

/* ============================================
   User Cards Grid
   ============================================ */
.user-cards-grid[b-ixy7rgt8ny] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 14px;
}

.user-card[b-ixy7rgt8ny] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    background: #FFFFFF;
    border: 1px solid var(--cp-border);
    border-radius: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.user-card:hover[b-ixy7rgt8ny] {
    border-color: var(--cp-primary);
    box-shadow: 0 4px 12px rgba(59, 158, 255, 0.15);
}

.user-card.invite-card[b-ixy7rgt8ny] {
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    border-color: #FDE68A;
}

.user-card.invite-card:hover[b-ixy7rgt8ny] {
    border-color: #FBBF24;
}

.user-card.active-card[b-ixy7rgt8ny] {
    background: linear-gradient(135deg, #EBF5FF 0%, #E0F2FE 100%);
    border-color: #BAE6FD;
}

.user-card.active-card:hover[b-ixy7rgt8ny] {
    border-color: var(--cp-primary);
}

.user-card.inactive-card[b-ixy7rgt8ny] {
    background: #F9FAFB;
    opacity: 0.8;
}

/* ============================================
   User Avatar
   ============================================ */
.user-avatar[b-ixy7rgt8ny] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    color: white;
    flex-shrink: 0;
    overflow: hidden;
}

.user-avatar img[b-ixy7rgt8ny] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-avatar-small[b-ixy7rgt8ny] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    color: white;
    flex-shrink: 0;
}

.avatar-admin[b-ixy7rgt8ny] {
    background: linear-gradient(135deg, #2563EB, #4F46E5);
}

.avatar-business[b-ixy7rgt8ny] {
    background: linear-gradient(135deg, #1D4ED8, #0284C7);
}

.avatar-field[b-ixy7rgt8ny] {
    background: linear-gradient(135deg, #10B981, #14B8A6);
}

.avatar-default[b-ixy7rgt8ny] {
    background: linear-gradient(135deg, #6B7280, #9CA3AF);
}

.pending-avatar[b-ixy7rgt8ny] {
    background: linear-gradient(135deg, #F59E0B, #FBBF24);
}

.inactive-avatar[b-ixy7rgt8ny] {
    background: #D1D5DB;
    color: #6B7280;
}

/* ============================================
   User Info
   ============================================ */
.user-info[b-ixy7rgt8ny] {
    flex: 1;
    min-width: 0;
}

.user-name[b-ixy7rgt8ny] {
    font-weight: 700;
    color: var(--cp-dark);
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-email[b-ixy7rgt8ny] {
    color: var(--cp-text-secondary);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.user-meta[b-ixy7rgt8ny] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.meta-item[b-ixy7rgt8ny] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: var(--cp-text-secondary);
}

.meta-item i[b-ixy7rgt8ny] {
    font-size: 0.7rem;
    color: var(--cp-text-muted);
}

.meta-item.stale-warning[b-ixy7rgt8ny] {
    color: var(--cp-danger);
    font-weight: 600;
}

.meta-item.stale-warning i[b-ixy7rgt8ny] {
    color: var(--cp-danger);
}

/* ============================================
   Role Badges
   ============================================ */
.role-badge[b-ixy7rgt8ny] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.role-admin[b-ixy7rgt8ny] {
    background: var(--cp-primary-light);
    color: var(--cp-primary);
}

.role-business[b-ixy7rgt8ny] {
    background: #DBEAFE;
    color: #1D4ED8;
}

.role-field[b-ixy7rgt8ny] {
    background: #D1FAE5;
    color: #047857;
}

.role-default[b-ixy7rgt8ny] {
    background: var(--cp-border-light);
    color: var(--cp-text-secondary);
}

.role-inactive[b-ixy7rgt8ny] {
    background: #E5E7EB;
    color: #6B7280;
}

/* ============================================
   Status Badges
   ============================================ */
.status-badge[b-ixy7rgt8ny] {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-pending[b-ixy7rgt8ny] {
    background: #FEF3C7;
    color: #92400E;
}

.user-status[b-ixy7rgt8ny] {
    flex-shrink: 0;
}

/* ============================================
   User Actions & Dropdown
   ============================================ */
.user-actions[b-ixy7rgt8ny] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.user-actions-dropdown[b-ixy7rgt8ny] {
    position: relative;
    flex-shrink: 0;
}

.dropdown-menu[b-ixy7rgt8ny] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    background: var(--cp-bg-card);
    border: 1px solid var(--cp-border);
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    min-width: 200px;
    z-index: 100;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.dropdown-menu.show[b-ixy7rgt8ny] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item[b-ixy7rgt8ny] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 18px;
    background: none;
    border: none;
    text-align: left;
    font-size: 0.9rem;
    color: var(--cp-text);
    cursor: pointer;
    transition: background-color 0.15s;
}

.dropdown-item:hover[b-ixy7rgt8ny] {
    background: var(--cp-border-light);
}

.dropdown-item i[b-ixy7rgt8ny] {
    width: 18px;
    text-align: center;
    color: var(--cp-text-secondary);
}

.dropdown-item-danger[b-ixy7rgt8ny] {
    color: var(--cp-danger);
}

.dropdown-item-danger i[b-ixy7rgt8ny] {
    color: var(--cp-danger);
}

.dropdown-item-danger:hover[b-ixy7rgt8ny] {
    background: #FEF2F2;
}

.dropdown-divider[b-ixy7rgt8ny] {
    height: 1px;
    background: var(--cp-border);
    margin: 6px 0;
}

/* ============================================
   Empty State
   ============================================ */
.empty-state[b-ixy7rgt8ny] {
    text-align: center;
    padding: 48px 20px;
    color: var(--cp-text-muted);
}

.empty-state i[b-ixy7rgt8ny] {
    font-size: 3rem;
    margin-bottom: 16px;
    color: var(--cp-border);
}

.empty-state p[b-ixy7rgt8ny] {
    margin: 0;
    font-size: 1rem;
    color: var(--cp-text-secondary);
}

/* ============================================
   Dialogs
   ============================================ */
.dialog-header[b-ixy7rgt8ny] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--cp-dark);
}

.dialog-header i[b-ixy7rgt8ny] {
    color: var(--cp-primary);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cp-primary-light);
    border-radius: 10px;
}

.dialog-header-warning i[b-ixy7rgt8ny] {
    color: var(--cp-warning);
    background: #FEF3C7;
}

.dialog-content[b-ixy7rgt8ny] {
    padding: 8px 0;
}

.dialog-footer[b-ixy7rgt8ny] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--cp-border);
    margin-top: 20px;
}

/* ============================================
   Form Elements
   ============================================ */
.form-group[b-ixy7rgt8ny] {
    margin-bottom: 20px;
}

.form-label[b-ixy7rgt8ny] {
    display: block;
    font-weight: 600;
    color: var(--cp-text);
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.form-label .required[b-ixy7rgt8ny] {
    color: var(--cp-danger);
}

.form-label .optional[b-ixy7rgt8ny] {
    color: var(--cp-text-muted);
    font-weight: 400;
}

.form-input[b-ixy7rgt8ny] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--cp-border);
    border-radius: 10px;
    font-size: 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus[b-ixy7rgt8ny] {
    outline: none;
    border-color: var(--cp-primary);
    box-shadow: 0 0 0 3px rgba(59, 158, 255, 0.15);
}

.form-textarea[b-ixy7rgt8ny] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--cp-border);
    border-radius: 10px;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-textarea:focus[b-ixy7rgt8ny] {
    outline: none;
    border-color: var(--cp-primary);
    box-shadow: 0 0 0 3px rgba(59, 158, 255, 0.15);
}

/* ============================================
   Role Selector
   ============================================ */
.role-selector[b-ixy7rgt8ny] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.role-option[b-ixy7rgt8ny] {
    padding: 16px 18px;
    border: 2px solid var(--cp-border);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

.role-option:hover[b-ixy7rgt8ny] {
    border-color: var(--cp-primary);
    background: var(--cp-primary-light);
}

.role-option.selected[b-ixy7rgt8ny] {
    border-color: var(--cp-primary);
    background: var(--cp-primary-light);
}

.role-option.current[b-ixy7rgt8ny] {
    border-color: var(--cp-border);
    background: var(--cp-border-light);
}

.role-option-header[b-ixy7rgt8ny] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.role-option-header i[b-ixy7rgt8ny] {
    color: var(--cp-primary);
    font-size: 1.1rem;
}

.role-option-name[b-ixy7rgt8ny] {
    font-weight: 700;
    color: var(--cp-dark);
}

.role-option-description[b-ixy7rgt8ny] {
    margin: 8px 0 0 0;
    font-size: 0.85rem;
    color: var(--cp-text-secondary);
    line-height: 1.5;
}

.current-badge[b-ixy7rgt8ny] {
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--cp-text-secondary);
    background: var(--cp-border);
    padding: 3px 10px;
    border-radius: 50px;
    letter-spacing: 0.5px;
}

/* ============================================
   User Context (in dialogs)
   ============================================ */
.user-context[b-ixy7rgt8ny] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--cp-border-light);
    border-radius: 14px;
    margin-bottom: 20px;
}

.user-context-name[b-ixy7rgt8ny] {
    font-weight: 700;
    color: var(--cp-dark);
}

.user-context-email[b-ixy7rgt8ny] {
    font-size: 0.85rem;
    color: var(--cp-text-secondary);
}

/* ============================================
   Error & Warning Messages
   ============================================ */
.error-message[b-ixy7rgt8ny] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 10px;
    color: var(--cp-danger);
    font-size: 0.9rem;
}

.deactivate-warning[b-ixy7rgt8ny] {
    padding: 8px 0;
}

.deactivate-warning p[b-ixy7rgt8ny] {
    margin: 0 0 14px 0;
    color: var(--cp-text);
    font-size: 1rem;
}

.warning-list[b-ixy7rgt8ny] {
    margin: 0;
    padding-left: 20px;
    color: var(--cp-text-secondary);
    font-size: 0.9rem;
}

.warning-list li[b-ixy7rgt8ny] {
    margin-bottom: 8px;
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 768px) {
    .users-page[b-ixy7rgt8ny] {
        padding: 16px;
    }

    .page-header[b-ixy7rgt8ny] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-stats[b-ixy7rgt8ny] {
        justify-content: space-between;
    }

    .stat-card[b-ixy7rgt8ny] {
        flex: 1;
        min-width: auto;
        padding: 12px 14px;
    }

    .search-container[b-ixy7rgt8ny] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box[b-ixy7rgt8ny] {
        max-width: none;
    }

    .btn-primary[b-ixy7rgt8ny] {
        justify-content: center;
    }

    .user-cards-grid[b-ixy7rgt8ny] {
        grid-template-columns: 1fr;
    }

    .user-card[b-ixy7rgt8ny] {
        flex-wrap: wrap;
    }

    .user-actions-dropdown[b-ixy7rgt8ny] {
        margin-left: auto;
    }
}

@media (max-width: 480px) {
    .stat-card[b-ixy7rgt8ny] {
        padding: 10px 12px;
    }

    .stat-value[b-ixy7rgt8ny] {
        font-size: 1.5rem;
    }

    .stat-label[b-ixy7rgt8ny] {
        font-size: 0.6rem;
    }

    .user-avatar[b-ixy7rgt8ny] {
        width: 44px;
        height: 44px;
        font-size: 0.85rem;
    }

    .user-meta[b-ixy7rgt8ny] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .section-header[b-ixy7rgt8ny] {
        padding: 14px 18px;
    }

    .section-content[b-ixy7rgt8ny] {
        padding: 0 18px 18px;
    }
}
/* /Components/Pages/VehicleDetail.razor.rz.scp.css */
/* ============================
   Vehicle Detail Page Layout
   ============================ */

/* ============================
   Navigation Sidebar
   ============================ */

.vehicle-nav[b-eulb6cpjbo] {
    width: 280px;
    min-width: 280px;
    height: calc(100vh - 112px);
    display: flex;
    flex-direction: column;
    background: white;
    border-right: 1px solid var(--cp-border, #E5E7EB);
    padding: 24px 16px;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
}

.nav-back[b-eulb6cpjbo] {
    margin-bottom: 20px;
}

.back-link[b-eulb6cpjbo] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--cp-text-secondary, #6B7280);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
}

.back-link:hover[b-eulb6cpjbo] {
    color: var(--cp-primary, #3B9EFF);
}

.nav-title[b-eulb6cpjbo] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--cp-dark, #1A1D2E);
    margin: 0 0 4px 0;
    letter-spacing: -0.01em;
}

.nav-subtitle[b-eulb6cpjbo] {
    font-size: 0.9rem;
    color: var(--cp-text-secondary, #6B7280);
    margin: 0 0 24px 0;
}

.nav-items[b-eulb6cpjbo] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-item[b-eulb6cpjbo] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--cp-text-secondary, #6B7280);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.nav-item:hover[b-eulb6cpjbo] {
    background: var(--cp-border-light, #F3F4F6);
    color: var(--cp-dark, #1A1D2E);
}

.nav-item i[b-eulb6cpjbo] {
    width: 20px;
    text-align: center;
    font-size: 1rem;
}

.nav-item-active[b-eulb6cpjbo] {
    background: linear-gradient(135deg, rgba(59, 158, 255, 0.1), rgba(37, 99, 235, 0.1));
    color: var(--cp-primary, #3B9EFF);
    font-weight: 600;
}

.nav-item-active:hover[b-eulb6cpjbo] {
    background: linear-gradient(135deg, rgba(59, 158, 255, 0.15), rgba(37, 99, 235, 0.15));
    color: var(--cp-primary, #3B9EFF);
}

.nav-item-active i[b-eulb6cpjbo] {
    color: var(--cp-primary, #3B9EFF);
}

/* ============================
   Content Area
   ============================ */

.vehicle-content[b-eulb6cpjbo] {
    padding: 24px;
    width: 100%;
    max-width: 1000px;
}

.detail-section[b-eulb6cpjbo] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.section-header[b-eulb6cpjbo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.section-header h2[b-eulb6cpjbo] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--cp-dark, #1A1D2E);
    margin: 0;
}

/* ============================
   Detail Cards
   ============================ */

.detail-cards[b-eulb6cpjbo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.detail-card[b-eulb6cpjbo] {
    padding: 16px;
    background: var(--cp-bg-light, #F9FAFB);
    border-radius: 8px;
    border: 1px solid var(--cp-border-light, #F3F4F6);
}

.detail-label[b-eulb6cpjbo] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--cp-text-secondary, #6B7280);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-value[b-eulb6cpjbo] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cp-dark, #1A1D2E);
}

/* Status badges */
.status-badge[b-eulb6cpjbo] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.status-badge-1[b-eulb6cpjbo] {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.status-badge-2[b-eulb6cpjbo] {
    background: rgba(245, 158, 11, 0.1);
    color: #D97706;
}

.status-badge-3[b-eulb6cpjbo] {
    background: rgba(239, 68, 68, 0.1);
    color: #DC2626;
}

/* Notes section */
.notes-section[b-eulb6cpjbo] {
    padding: 16px;
    background: var(--cp-bg-light, #F9FAFB);
    border-radius: 8px;
    border: 1px solid var(--cp-border-light, #F3F4F6);
}

.notes-content[b-eulb6cpjbo] {
    font-size: 0.95rem;
    color: var(--cp-dark, #1A1D2E);
    line-height: 1.5;
    white-space: pre-wrap;
}

/* ============================
   Maintenance Grid
   ============================ */

.maintenance-grid-container[b-eulb6cpjbo] {
    height: 400px;
    border: 1px solid var(--cp-border, #E5E7EB);
    border-radius: 8px;
    overflow: hidden;
}

.action-btn[b-eulb6cpjbo] {
    background: transparent;
    border: none;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn:hover[b-eulb6cpjbo] {
    background: var(--cp-border-light, #F3F4F6);
}

.delete-btn[b-eulb6cpjbo] {
    color: var(--cp-danger, #EF4444);
}

.delete-btn:hover[b-eulb6cpjbo] {
    background: rgba(239, 68, 68, 0.1);
}

/* ============================
   Empty State
   ============================ */

.empty-state[b-eulb6cpjbo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.empty-icon[b-eulb6cpjbo] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(59, 158, 255, 0.1), rgba(37, 99, 235, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.empty-icon i[b-eulb6cpjbo] {
    font-size: 2rem;
    color: var(--cp-primary, #3B9EFF);
}

.empty-state p[b-eulb6cpjbo] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cp-dark, #1A1D2E);
    margin: 0 0 8px 0;
}

.empty-state span[b-eulb6cpjbo] {
    font-size: 0.9rem;
    color: var(--cp-text-secondary, #6B7280);
    margin-bottom: 20px;
}

/* ============================
   Warning Banner
   ============================ */

.warning-banner[b-eulb6cpjbo] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    margin-bottom: 16px;
    color: #D97706;
    font-size: 0.9rem;
}

.warning-banner i[b-eulb6cpjbo] {
    font-size: 1rem;
}

/* Maintenance Overdue Banner */
.maintenance-overdue-banner[b-eulb6cpjbo] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 10px;
    margin-bottom: 20px;
    color: #D97706;
    font-size: 0.95rem;
    font-weight: 500;
}

.maintenance-overdue-banner i[b-eulb6cpjbo] {
    font-size: 1.1rem;
    color: #F59E0B;
}

/* ============================
   Dialog Styles (SfDialog)
   ============================ */

/* Dialog container - applies via cp-dialog CssClass */
[b-eulb6cpjbo] .e-dialog.cp-dialog {
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--cp-border, #E5E7EB);
    overflow: hidden;
}

[b-eulb6cpjbo] .e-dialog.cp-dialog .e-dlg-header-content {
    padding: 20px 24px;
    border-bottom: 1px solid var(--cp-border-light, #F3F4F6);
    background: var(--cp-bg-light, #F9FAFB);
}

[b-eulb6cpjbo] .e-dialog.cp-dialog .e-dlg-content {
    padding: 24px;
    background: white;
}

[b-eulb6cpjbo] .e-dialog.cp-dialog .e-footer-content {
    padding: 0;
    border-top: none;
    background: white;
}

/* Dialog header with icon */
.dialog-header[b-eulb6cpjbo] {
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--cp-dark, #1A1D2E);
}

.dialog-icon[b-eulb6cpjbo] {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
}

.dialog-icon i[b-eulb6cpjbo] {
    font-size: 1.1rem;
}

.dialog-icon-blue[b-eulb6cpjbo] {
    background: linear-gradient(135deg, #3B9EFF, #2563EB);
}

.dialog-icon-blue i[b-eulb6cpjbo] {
    color: white;
}

.dialog-icon-red[b-eulb6cpjbo] {
    background: linear-gradient(135deg, #EF4444, #DC2626);
}

.dialog-icon-red i[b-eulb6cpjbo] {
    color: white;
}

/* Dialog form layout */
.dialog-form[b-eulb6cpjbo] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Form sections within dialog */
.form-section[b-eulb6cpjbo] {
    margin-bottom: 8px;
}

.form-section-title[b-eulb6cpjbo] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cp-dark, #1A1D2E);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
}

.form-section-divider[b-eulb6cpjbo] {
    height: 1px;
    background: var(--cp-border-light, #F3F4F6);
    margin: 20px 0;
}

/* Form grid - 12 column system */
.form-grid[b-eulb6cpjbo] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.form-group[b-eulb6cpjbo] {
    margin-bottom: 16px;
}

.form-group.span-4[b-eulb6cpjbo] {
    grid-column: span 4;
}

.form-group.span-6[b-eulb6cpjbo] {
    grid-column: span 6;
}

.form-group.span-12[b-eulb6cpjbo] {
    grid-column: span 12;
}

/* Form labels */
.form-label[b-eulb6cpjbo] {
    display: block;
    font-weight: 600;
    color: var(--cp-text, #374151);
    margin-bottom: 8px;
    font-size: 0.875rem;
}

.form-label .required[b-eulb6cpjbo] {
    color: var(--cp-danger, #EF4444);
    margin-left: 2px;
}

/* Form inputs */
.form-input[b-eulb6cpjbo] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--cp-border, #E5E7EB);
    border-radius: 10px;
    font-size: 0.9rem;
    color: var(--cp-dark, #1A1D2E);
    background: white;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus[b-eulb6cpjbo] {
    outline: none;
    border-color: var(--cp-primary, #3B9EFF);
    box-shadow: 0 0 0 3px rgba(59, 158, 255, 0.12);
}

.form-input[b-eulb6cpjbo]::placeholder {
    color: var(--cp-text-muted, #9CA3AF);
}

.form-textarea[b-eulb6cpjbo] {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

/* Syncfusion input overrides for dialogs */
[b-eulb6cpjbo] .dialog-form .e-input-group {
    border-radius: 10px;
    border: 1px solid var(--cp-border, #E5E7EB);
    background: white;
}

[b-eulb6cpjbo] .dialog-form .e-input-group:not(.e-disabled):not(.e-float-icon-left) .e-input:focus {
    border-color: var(--cp-primary, #3B9EFF);
    box-shadow: 0 0 0 3px rgba(59, 158, 255, 0.12);
}

[b-eulb6cpjbo] .dialog-form .e-input-group .e-input {
    padding: 10px 14px;
    font-size: 0.9rem;
}

[b-eulb6cpjbo] .dialog-form .e-ddl.e-input-group {
    border-radius: 10px;
}

[b-eulb6cpjbo] .dialog-form .e-datepicker .e-input-group-icon {
    padding: 0 12px;
}

/* Dialog footer */
.dialog-footer[b-eulb6cpjbo] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 20px;
    margin-top: 8px;
}

/* Dialog content text */
.dialog-form p[b-eulb6cpjbo],
[b-eulb6cpjbo] .e-dlg-content p {
    margin: 0 0 12px 0;
    color: var(--cp-text, #374151);
    font-size: 0.95rem;
    line-height: 1.5;
}

.text-muted[b-eulb6cpjbo] {
    color: var(--cp-text-secondary, #6B7280);
    font-size: 0.9rem;
}

/* Danger button */
.cp-btn-danger[b-eulb6cpjbo] {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    color: white;
    border: none;
}

.cp-btn-danger:hover[b-eulb6cpjbo] {
    background: linear-gradient(135deg, #DC2626, #B91C1C);
}

/* Disabled button state */
.cp-btn:disabled[b-eulb6cpjbo],
.cp-btn-primary:disabled[b-eulb6cpjbo],
.cp-btn-danger:disabled[b-eulb6cpjbo] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Responsive dialog */
@media (max-width: 768px) {
    [b-eulb6cpjbo] .e-dialog.cp-dialog {
        margin: 10px;
        max-width: calc(100% - 20px) !important;
    }

    .form-grid[b-eulb6cpjbo] {
        grid-template-columns: 1fr;
    }

    .form-group.span-4[b-eulb6cpjbo],
    .form-group.span-6[b-eulb6cpjbo] {
        grid-column: span 1;
    }

    .dialog-footer[b-eulb6cpjbo] {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .dialog-footer .cp-btn[b-eulb6cpjbo] {
        width: 100%;
        justify-content: center;
    }
}

/* ============================
   Responsive - Tablet
   ============================ */

@media (max-width: 1024px) {
    .vehicle-nav[b-eulb6cpjbo] {
        width: 240px;
        min-width: 240px;
        padding: 20px 12px;
    }

    .vehicle-content[b-eulb6cpjbo] {
        padding: 20px;
    }

    .detail-cards[b-eulb6cpjbo] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================
   Responsive - Mobile
   ============================ */

@media (max-width: 768px) {
    .vehicle-nav[b-eulb6cpjbo] {
        width: 100%;
        min-width: 100%;
        height: auto;
        flex-direction: column;
        padding: 16px;
        border-right: none;
        border-bottom: 1px solid var(--cp-border, #E5E7EB);
    }

    .nav-items[b-eulb6cpjbo] {
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
    }

    .nav-item[b-eulb6cpjbo] {
        flex-shrink: 0;
        padding: 10px 20px;
        border-radius: 50px;
        background: var(--cp-border-light, #F3F4F6);
    }

    .nav-item-active[b-eulb6cpjbo] {
        background: linear-gradient(135deg, #3B9EFF, #2563EB);
        color: white;
    }

    .nav-item-active i[b-eulb6cpjbo] {
        color: white;
    }

    .vehicle-content[b-eulb6cpjbo] {
        padding: 16px;
    }

    .detail-cards[b-eulb6cpjbo] {
        grid-template-columns: 1fr;
    }

    .section-header[b-eulb6cpjbo] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .page-container[b-eulb6cpjbo] {
        flex-direction: column;
    }

    .financial-cards[b-eulb6cpjbo] {
        grid-template-columns: 1fr;
    }
}

/* ============================
   Financial Summary Section
   ============================ */

.financial-section[b-eulb6cpjbo] {
    margin-top: 24px;
}

.financial-section .section-header h2[b-eulb6cpjbo] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.financial-section .section-header h2 i[b-eulb6cpjbo] {
    color: var(--cp-primary, #3B9EFF);
}

.financial-cards[b-eulb6cpjbo] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.financial-card[b-eulb6cpjbo] {
    background: var(--cp-border-light, #F9FAFB);
    border: 1px solid var(--cp-border, #E5E7EB);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.financial-card-primary[b-eulb6cpjbo] {
    background: linear-gradient(135deg, rgba(59, 158, 255, 0.1), rgba(37, 99, 235, 0.08));
    border-color: rgba(59, 158, 255, 0.3);
}

.financial-value[b-eulb6cpjbo] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--cp-dark, #1A1D2E);
    margin-bottom: 4px;
}

.financial-card-primary .financial-value[b-eulb6cpjbo] {
    color: var(--cp-primary, #3B9EFF);
}

.financial-suffix[b-eulb6cpjbo] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--cp-text-secondary, #6B7280);
}

.financial-label[b-eulb6cpjbo] {
    font-size: 0.85rem;
    color: var(--cp-text-secondary, #6B7280);
    font-weight: 500;
}

.no-financial-data[b-eulb6cpjbo] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    background: var(--cp-border-light, #F9FAFB);
    border: 1px solid var(--cp-border, #E5E7EB);
    border-radius: 12px;
    margin-top: 16px;
}

.no-financial-data i[b-eulb6cpjbo] {
    color: var(--cp-text-muted, #9CA3AF);
    font-size: 1.2rem;
    margin-top: 2px;
}

.no-data-content p[b-eulb6cpjbo] {
    margin: 0 0 12px 0;
    color: var(--cp-text-secondary, #6B7280);
    font-size: 0.95rem;
}

.fully-depreciated-badge[b-eulb6cpjbo] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(59, 158, 255, 0.1);
    color: var(--cp-primary, #3B9EFF);
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 16px;
}

.disposed-badge[b-eulb6cpjbo] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(107, 114, 128, 0.1);
    color: #6B7280;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 16px;
}

.disposed-date[b-eulb6cpjbo], .disposed-value[b-eulb6cpjbo] {
    color: var(--cp-text-muted, #9CA3AF);
}

.cp-btn-sm[b-eulb6cpjbo] {
    padding: 6px 12px;
    font-size: 0.85rem;
}

/* Input with prefix (currency) */
.input-with-prefix[b-eulb6cpjbo] {
    position: relative;
    display: flex;
    align-items: stretch;
}

.input-prefix[b-eulb6cpjbo] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cp-text-muted, #9CA3AF);
    font-size: 0.9rem;
    font-weight: 500;
    pointer-events: none;
}

.input-with-prefix .form-input[b-eulb6cpjbo] {
    padding-left: 28px;
}

/* Form note/info */
.form-note[b-eulb6cpjbo] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(59, 158, 255, 0.08);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--cp-primary, #3B9EFF);
    margin-top: 8px;
}

.form-note i[b-eulb6cpjbo] {
    flex-shrink: 0;
}

/* Lifecycle section icon */
.form-section-title i[b-eulb6cpjbo] {
    margin-right: 6px;
    color: var(--cp-primary, #3B9EFF);
}

/* ============================
   Events Tab
   ============================ */

.date-range-selector[b-eulb6cpjbo] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.events-grid-container[b-eulb6cpjbo] {
    height: 450px;
    border: 1px solid var(--cp-border, #E5E7EB);
    border-radius: 8px;
    overflow: hidden;
}

.event-type-badge[b-eulb6cpjbo] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

.severity-badge[b-eulb6cpjbo] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.severity-1[b-eulb6cpjbo] {
    background: rgba(107, 114, 128, 0.1);
    color: #6B7280;
}

.severity-2[b-eulb6cpjbo] {
    background: rgba(245, 158, 11, 0.15);
    color: #D97706;
}

.severity-3[b-eulb6cpjbo] {
    background: rgba(239, 68, 68, 0.15);
    color: #DC2626;
}

.event-type-1[b-eulb6cpjbo] {
    background: rgba(59, 158, 255, 0.1);
    color: #2563EB;
}

.event-type-2[b-eulb6cpjbo] {
    background: rgba(245, 158, 11, 0.1);
    color: #D97706;
}

.event-type-3[b-eulb6cpjbo] {
    background: rgba(239, 68, 68, 0.1);
    color: #DC2626;
}

.cache-notice[b-eulb6cpjbo] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(107, 114, 128, 0.08);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--cp-text-secondary, #6B7280);
    margin-bottom: 12px;
}

.linked-status[b-eulb6cpjbo] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 8px;
    margin-top: 16px;
    font-size: 0.9rem;
    color: #059669;
}

.linked-status i[b-eulb6cpjbo] {
    color: #10B981;
}

.unlink-btn[b-eulb6cpjbo] {
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #DC2626;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.unlink-btn:hover[b-eulb6cpjbo] {
    background: rgba(239, 68, 68, 0.1);
}

.error-banner[b-eulb6cpjbo] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 10px;
    color: #DC2626;
    font-size: 0.95rem;
}

.error-banner i[b-eulb6cpjbo] {
    font-size: 1.1rem;
}

/* ============================
   Link Vehicle Dialog
   ============================ */

.link-description[b-eulb6cpjbo] {
    margin-bottom: 20px;
    color: var(--cp-text-secondary, #6B7280);
}

.loading-inline[b-eulb6cpjbo] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    color: var(--cp-text-secondary, #6B7280);
}

.loading-inline i[b-eulb6cpjbo] {
    color: var(--cp-primary, #3B9EFF);
}

.no-provider-vehicles[b-eulb6cpjbo] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 8px;
    color: #D97706;
    font-size: 0.9rem;
}

.provider-vehicle-item[b-eulb6cpjbo] {
    padding: 6px 0;
}

.pv-name[b-eulb6cpjbo] {
    font-weight: 600;
    color: var(--cp-dark, #1A1D2E);
}

.pv-details[b-eulb6cpjbo] {
    font-size: 0.8rem;
    color: var(--cp-text-secondary, #6B7280);
    margin-top: 2px;
}

.pv-vin[b-eulb6cpjbo] {
    margin-left: 8px;
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--cp-text-muted, #9CA3AF);
}

.selected-vehicle-preview[b-eulb6cpjbo] {
    margin-top: 16px;
    padding: 16px;
    background: var(--cp-border-light, #F9FAFB);
    border: 1px solid var(--cp-border, #E5E7EB);
    border-radius: 8px;
}

.selected-vehicle-preview h5[b-eulb6cpjbo] {
    margin: 0 0 12px 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cp-text-secondary, #6B7280);
    text-transform: uppercase;
}

.preview-grid[b-eulb6cpjbo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    font-size: 0.9rem;
}

.preview-grid div[b-eulb6cpjbo] {
    color: var(--cp-text, #374151);
}

.preview-grid strong[b-eulb6cpjbo] {
    color: var(--cp-dark, #1A1D2E);
}

/* ============================
   Media Tab
   ============================ */

.media-controls[b-eulb6cpjbo] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.media-type-filter[b-eulb6cpjbo] {
    min-width: 120px;
}

.cp-form-select-sm[b-eulb6cpjbo] {
    padding: 6px 30px 6px 12px;
    font-size: 0.85rem;
    border: 1px solid var(--cp-border, #E5E7EB);
    border-radius: 6px;
    background-color: white;
    cursor: pointer;
}

.cp-form-select-sm:focus[b-eulb6cpjbo] {
    outline: none;
    border-color: var(--cp-primary, #3B9EFF);
}

/* Media Grid */
.media-grid[b-eulb6cpjbo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.media-thumbnail[b-eulb6cpjbo] {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    background: var(--cp-border-light, #F3F4F6);
}

.media-thumbnail:hover[b-eulb6cpjbo] {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.media-thumbnail img[b-eulb6cpjbo] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-overlay[b-eulb6cpjbo] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 10px 10px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    color: white;
}

.media-overlay i[b-eulb6cpjbo] {
    font-size: 1.2rem;
}

.media-duration[b-eulb6cpjbo] {
    font-size: 0.75rem;
    background: rgba(0, 0, 0, 0.6);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
}

.media-time[b-eulb6cpjbo] {
    font-size: 0.75rem;
    opacity: 0.9;
}

/* Media Button in Events Grid */
.media-btn[b-eulb6cpjbo] {
    background: transparent;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--cp-primary, #3B9EFF);
    transition: all 0.2s;
}

.media-btn:hover[b-eulb6cpjbo] {
    background: rgba(59, 158, 255, 0.1);
}

/* Media Pagination */
.media-pagination[b-eulb6cpjbo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--cp-border-light, #F3F4F6);
}

.pagination-info[b-eulb6cpjbo] {
    font-size: 0.9rem;
    color: var(--cp-text-secondary, #6B7280);
}

/* ============================
   Media Viewer Modal
   ============================ */

.media-modal-overlay[b-eulb6cpjbo] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.media-modal[b-eulb6cpjbo] {
    background: #1A1D2E;
    border-radius: 12px;
    max-width: 1200px;
    max-height: 90vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.media-modal-header[b-eulb6cpjbo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.media-modal-info[b-eulb6cpjbo] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.media-modal-time[b-eulb6cpjbo] {
    font-size: 0.95rem;
    font-weight: 600;
    color: white;
}

.media-modal-desc[b-eulb6cpjbo] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.media-modal-close[b-eulb6cpjbo] {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.media-modal-close:hover[b-eulb6cpjbo] {
    background: rgba(255, 255, 255, 0.2);
}

.media-modal-content[b-eulb6cpjbo] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: black;
    min-height: 400px;
}

.media-video[b-eulb6cpjbo] {
    width: 100%;
    max-height: 70vh;
    outline: none;
}

.media-video:focus[b-eulb6cpjbo] {
    outline: none;
}

.media-image[b-eulb6cpjbo] {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
}

.media-loading[b-eulb6cpjbo],
.media-error[b-eulb6cpjbo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: rgba(255, 255, 255, 0.7);
    padding: 40px;
    text-align: center;
}

.media-error[b-eulb6cpjbo] {
    color: #F87171;
}

.media-error p[b-eulb6cpjbo] {
    margin: 0;
    max-width: 300px;
}

.media-modal-footer[b-eulb6cpjbo] {
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
}

.keyboard-hint[b-eulb6cpjbo] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.keyboard-hint kbd[b-eulb6cpjbo] {
    display: inline-block;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.75rem;
    margin: 0 2px;
}

.ms-2[b-eulb6cpjbo] {
    margin-left: 8px;
}

/* ============================
   Responsive Media Tab
   ============================ */

@media (max-width: 768px) {
    .media-controls[b-eulb6cpjbo] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .media-grid[b-eulb6cpjbo] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .media-modal[b-eulb6cpjbo] {
        margin: 10px;
        max-height: 95vh;
    }

    .keyboard-hint[b-eulb6cpjbo] {
        display: none;
    }
}
/* /Components/Pages/Vehicles.razor.rz.scp.css */
/* ============================
   Vehicles Page Layout
   ============================ */

.vehicles-page[b-hvpiept8sb] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 0;
    max-width: 1200px;
}

/* ============================
   Page Header
   ============================ */

.page-header[b-hvpiept8sb] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
}

.header-left[b-hvpiept8sb] {
    flex: 1;
    min-width: 200px;
}

.page-title[b-hvpiept8sb] {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--cp-dark);
    margin: 0 0 4px 0;
    letter-spacing: -0.02em;
}

.page-subtitle[b-hvpiept8sb] {
    font-size: 0.95rem;
    color: var(--cp-text-secondary);
    margin: 0;
}

.header-right[b-hvpiept8sb] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ============================
   Status Filter Chips
   ============================ */

.category-filter-section[b-hvpiept8sb] {
    margin-bottom: 8px;
}

.category-chips[b-hvpiept8sb] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.category-chip[b-hvpiept8sb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: white;
    border: 1px solid var(--cp-border);
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--cp-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.category-chip:hover[b-hvpiept8sb] {
    border-color: var(--cp-primary);
    color: var(--cp-primary);
    background: rgba(59, 158, 255, 0.05);
}

.category-chip-active[b-hvpiept8sb] {
    background: linear-gradient(135deg, #3B9EFF, #2563EB);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(59, 158, 255, 0.3);
}

.category-chip-active:hover[b-hvpiept8sb] {
    background: linear-gradient(135deg, #2563EB, #1D4ED8);
    color: white;
}

.category-chip-active .chip-count[b-hvpiept8sb] {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

.chip-count[b-hvpiept8sb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: var(--cp-border-light);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cp-text-secondary);
}

/* Status icons in filter */
.status-active[b-hvpiept8sb] { color: #22C55E; }
.status-inactive[b-hvpiept8sb] { color: #F59E0B; }
.status-outofservice[b-hvpiept8sb] { color: #EF4444; }

.category-chip-active .status-active[b-hvpiept8sb],
.category-chip-active .status-inactive[b-hvpiept8sb],
.category-chip-active .status-outofservice[b-hvpiept8sb] {
    color: white;
}

/* ============================
   Search Bar
   ============================ */

.search-actions-bar[b-hvpiept8sb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.cp-search-box[b-hvpiept8sb] {
    position: relative;
    flex: 1;
    max-width: 500px;
    min-width: 200px;
}

.cp-search-icon[b-hvpiept8sb] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cp-text-muted);
    font-size: 0.9rem;
}

.cp-search-input[b-hvpiept8sb] {
    width: 100%;
    padding: 10px 40px 10px 40px;
    font-size: 0.9rem;
    border: 1px solid var(--cp-border);
    border-radius: 8px;
    background: white;
    color: var(--cp-dark);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.cp-search-input:focus[b-hvpiept8sb] {
    outline: none;
    border-color: var(--cp-primary);
    box-shadow: 0 0 0 3px rgba(59, 158, 255, 0.15);
}

.cp-search-input[b-hvpiept8sb]::placeholder {
    color: var(--cp-text-muted);
}

.cp-search-clear[b-hvpiept8sb] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--cp-text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cp-search-clear:hover[b-hvpiept8sb] {
    color: var(--cp-dark);
}

/* ============================
   Vehicles Grid Container
   ============================ */

.vehicles-grid-container[b-hvpiept8sb] {
    background: white;
    border: 1px solid var(--cp-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.vehicles-grid-container[b-hvpiept8sb]  .e-grid {
    border: none;
}

.vehicles-grid-container[b-hvpiept8sb]  .e-gridheader {
    background: var(--cp-bg-page);
    border-bottom: 1px solid var(--cp-border);
}

.vehicles-grid-container[b-hvpiept8sb]  .e-headercell {
    background: transparent;
    font-weight: 600;
    color: var(--cp-text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vehicles-grid-container[b-hvpiept8sb]  .e-row {
    cursor: pointer;
    transition: background-color 0.15s;
}

.vehicles-grid-container[b-hvpiept8sb]  .e-row:hover {
    background: rgba(59, 158, 255, 0.04) !important;
}

.vehicles-grid-container[b-hvpiept8sb]  .e-selectionbackground {
    background: rgba(59, 158, 255, 0.08) !important;
}

.vehicles-grid-container[b-hvpiept8sb]  .e-rowcell {
    padding: 16px 12px;
    border-color: var(--cp-border-light);
}

/* Grid Cell Styling */
.vehicle-name-cell[b-hvpiept8sb] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vehicle-icon[b-hvpiept8sb] {
    color: var(--cp-text-muted);
    font-size: 1rem;
}

.vehicle-name[b-hvpiept8sb] {
    font-weight: 600;
    color: var(--cp-dark);
    font-size: 0.95rem;
}

.unassigned-text[b-hvpiept8sb] {
    color: var(--cp-text-muted);
    font-style: italic;
}

/* EOL Badges */
.eol-badge[b-hvpiept8sb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.eol-badge-warning[b-hvpiept8sb] {
    background: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
}

.eol-badge-disposed[b-hvpiept8sb] {
    background: rgba(107, 114, 128, 0.15);
    color: #6B7280;
}

.eol-badge-info[b-hvpiept8sb] {
    background: rgba(59, 158, 255, 0.15);
    color: var(--cp-primary);
}

/* Status Badge */
.status-badge[b-hvpiept8sb] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-badge-1[b-hvpiept8sb] {
    background: rgba(34, 197, 94, 0.15);
    color: #16A34A;
}

.status-badge-2[b-hvpiept8sb] {
    background: rgba(245, 158, 11, 0.15);
    color: #D97706;
}

.status-badge-3[b-hvpiept8sb] {
    background: rgba(239, 68, 68, 0.15);
    color: #DC2626;
}

/* Maintenance Warning */
.maintenance-warning[b-hvpiept8sb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(245, 158, 11, 0.15);
    color: #D97706;
    border-radius: 6px;
    font-weight: 500;
}

.maintenance-warning i[b-hvpiept8sb] {
    color: #F59E0B;
}

.no-service-text[b-hvpiept8sb] {
    color: var(--cp-text-muted);
}

/* ============================
   Empty States
   ============================ */

.empty-state[b-hvpiept8sb] {
    text-align: center;
    padding: 48px 24px;
    color: var(--cp-text-secondary);
    background: white;
    border: 1px solid var(--cp-border);
    border-radius: 12px;
}

.empty-state i[b-hvpiept8sb] {
    font-size: 2.5rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p[b-hvpiept8sb] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cp-dark);
    margin: 0 0 8px 0;
}

.empty-state span[b-hvpiept8sb] {
    font-size: 0.9rem;
    color: var(--cp-text-secondary);
}

.empty-state-actions[b-hvpiept8sb] {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.empty-state-large[b-hvpiept8sb] {
    padding: 80px 24px;
}

.empty-state-large .empty-icon[b-hvpiept8sb] {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cp-bg-page);
    border: 2px dashed var(--cp-border);
    border-radius: 16px;
}

.empty-state-large .empty-icon i[b-hvpiept8sb] {
    font-size: 2rem;
    margin: 0;
}

.empty-state-large h3[b-hvpiept8sb] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cp-dark);
    margin: 0 0 8px 0;
}

/* ============================
   Loading
   ============================ */

.loading-container[b-hvpiept8sb] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

/* ============================
   Button Styles
   ============================ */

.cp-btn[b-hvpiept8sb] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.cp-btn-primary[b-hvpiept8sb] {
    background: linear-gradient(135deg, #3B9EFF, #2563EB);
    color: white;
    box-shadow: 0 2px 8px rgba(59, 158, 255, 0.3);
}

.cp-btn-primary:hover[b-hvpiept8sb] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 158, 255, 0.4);
}

.cp-btn-primary:disabled[b-hvpiept8sb] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.cp-btn-secondary[b-hvpiept8sb] {
    background: white;
    color: var(--cp-text-secondary);
    border: 1px solid var(--cp-border);
}

.cp-btn-secondary:hover[b-hvpiept8sb] {
    border-color: var(--cp-primary);
    color: var(--cp-primary);
    background: rgba(59, 158, 255, 0.05);
}

.cp-btn-lg[b-hvpiept8sb] {
    padding: 14px 28px;
    font-size: 1rem;
}

/* ============================
   Dialog Styles
   ============================ */

.dialog-header[b-hvpiept8sb] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cp-dark);
}

.dialog-icon[b-hvpiept8sb] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.dialog-icon-blue[b-hvpiept8sb] {
    background: linear-gradient(135deg, #3B9EFF, #2563EB);
    color: white;
}

.dialog-form[b-hvpiept8sb] {
    padding: 8px 0;
}

.dialog-footer[b-hvpiept8sb] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 8px;
}

/* ============================
   Form Styles
   ============================ */

.form-section[b-hvpiept8sb] {
    margin-bottom: 8px;
}

.form-section-title[b-hvpiept8sb] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cp-dark);
    margin: 0 0 16px 0;
}

.form-grid[b-hvpiept8sb] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    margin-bottom: 12px;
}

.form-group[b-hvpiept8sb] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.span-12[b-hvpiept8sb] {
    grid-column: span 12;
}

.form-group.span-6[b-hvpiept8sb] {
    grid-column: span 6;
}

.form-group.span-4[b-hvpiept8sb] {
    grid-column: span 4;
}

.form-label[b-hvpiept8sb] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cp-text-secondary);
    margin: 0;
}

.form-label .required[b-hvpiept8sb] {
    color: var(--cp-danger, #EF4444);
}

.form-input[b-hvpiept8sb] {
    padding: 10px 14px;
    font-size: 0.9rem;
    border: 1px solid var(--cp-border);
    border-radius: 8px;
    background: white;
    color: var(--cp-dark);
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.form-input:focus[b-hvpiept8sb] {
    outline: none;
    border-color: var(--cp-primary);
    box-shadow: 0 0 0 3px rgba(59, 158, 255, 0.15);
}

.form-input[b-hvpiept8sb]::placeholder {
    color: var(--cp-text-muted);
}

.form-textarea[b-hvpiept8sb] {
    resize: vertical;
    font-family: inherit;
    min-height: 80px;
}

.form-section-divider[b-hvpiept8sb] {
    height: 1px;
    background: var(--cp-border-light);
    margin: 20px 0;
}

/* Input with prefix (currency) */
.input-with-prefix[b-hvpiept8sb] {
    position: relative;
    display: flex;
    align-items: stretch;
}

.input-prefix[b-hvpiept8sb] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cp-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    pointer-events: none;
}

.input-with-prefix .form-input[b-hvpiept8sb] {
    padding-left: 28px;
}

/* Form note/info */
.form-note[b-hvpiept8sb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(59, 158, 255, 0.08);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--cp-primary);
    margin-top: 8px;
}

.form-note i[b-hvpiept8sb] {
    flex-shrink: 0;
}

/* Lifecycle section icon */
.form-section-title i[b-hvpiept8sb] {
    margin-right: 6px;
    color: var(--cp-primary);
}

/* ============================
   Responsive Design
   ============================ */

@media (max-width: 900px) {
    .form-grid[b-hvpiept8sb] {
        grid-template-columns: 1fr;
    }

    .form-group.span-6[b-hvpiept8sb],
    .form-group.span-4[b-hvpiept8sb] {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .vehicles-page[b-hvpiept8sb] {
        gap: 16px;
        padding: 16px 0;
    }

    .page-header[b-hvpiept8sb] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-right[b-hvpiept8sb] {
        justify-content: flex-end;
    }

    .page-title[b-hvpiept8sb] {
        font-size: 1.5rem;
    }

    .category-chips[b-hvpiept8sb] {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }

    .category-chip[b-hvpiept8sb] {
        flex-shrink: 0;
    }

    .search-actions-bar[b-hvpiept8sb] {
        flex-direction: column;
        align-items: stretch;
    }

    .cp-search-box[b-hvpiept8sb] {
        max-width: 100%;
    }

    .btn-text[b-hvpiept8sb] {
        display: none;
    }

    .dialog-footer[b-hvpiept8sb] {
        flex-direction: column;
    }

    .dialog-footer .cp-btn[b-hvpiept8sb] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Support/CloseTicketButton.razor.rz.scp.css */
.cp-btn[b-4g2xq6bagz] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.cp-btn-outline-danger[b-4g2xq6bagz] {
    background-color: transparent;
    color: #dc3545;
    border: 1px solid #dc3545;
}

.cp-btn-outline-danger:hover:not(:disabled)[b-4g2xq6bagz] {
    background-color: #dc3545;
    color: white;
}

.cp-btn-outline-danger:disabled[b-4g2xq6bagz] {
    opacity: 0.65;
    cursor: not-allowed;
}

.cp-btn-secondary[b-4g2xq6bagz] {
    background-color: #6c757d;
    color: white;
}

.cp-btn-secondary:hover:not(:disabled)[b-4g2xq6bagz] {
    background-color: #5a6268;
}

.cp-btn-danger[b-4g2xq6bagz] {
    background-color: #dc3545;
    color: white;
}

.cp-btn-danger:hover:not(:disabled)[b-4g2xq6bagz] {
    background-color: #c82333;
}

.cp-btn-danger:disabled[b-4g2xq6bagz],
.cp-btn-secondary:disabled[b-4g2xq6bagz] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Dialog Overlay */
.dialog-overlay[b-4g2xq6bagz] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.dialog-content[b-4g2xq6bagz] {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    max-width: 400px;
    width: 90%;
    animation: dialogSlideIn-b-4g2xq6bagz 0.2s ease-out;
}

@keyframes dialogSlideIn-b-4g2xq6bagz {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dialog-header[b-4g2xq6bagz] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.dialog-title[b-4g2xq6bagz] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dialog-title i[b-4g2xq6bagz] {
    color: #dc3545;
}

.dialog-body[b-4g2xq6bagz] {
    padding: 1.5rem;
}

.dialog-body p[b-4g2xq6bagz] {
    margin: 0 0 0.5rem 0;
}

.dialog-body p:last-child[b-4g2xq6bagz] {
    margin-bottom: 0;
}

.dialog-hint[b-4g2xq6bagz] {
    color: #6c757d;
    font-size: 0.875rem;
}

.dialog-footer[b-4g2xq6bagz] {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.spinner-border-sm[b-4g2xq6bagz] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}
/* /Components/Support/NoteEditor.razor.rz.scp.css */
.reply-form[b-ee0aerrofx] {
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.reply-title[b-ee0aerrofx] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reply-title i[b-ee0aerrofx] {
    color: #1976d2;
}

.form-group[b-ee0aerrofx] {
    margin-bottom: 1rem;
}

/* Syncfusion Rich Text Editor styling */
.form-group[b-ee0aerrofx]  .e-richtexteditor {
    border-radius: 4px;
}

.form-group[b-ee0aerrofx]  .e-richtexteditor.e-rte-tb-expand {
    border: 1px solid #ced4da;
}

.form-group[b-ee0aerrofx]  .e-richtexteditor:focus-within {
    border-color: #1976d2;
    box-shadow: 0 0 0 0.2rem rgba(25, 118, 210, 0.25);
}

.form-group[b-ee0aerrofx]  .e-richtexteditor .e-rte-content {
    min-height: 100px;
}

.reply-actions[b-ee0aerrofx] {
    display: flex;
    justify-content: flex-end;
}

.cp-btn[b-ee0aerrofx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.cp-btn-primary[b-ee0aerrofx] {
    background-color: #1976d2;
    color: white;
}

.cp-btn-primary:hover:not(:disabled)[b-ee0aerrofx] {
    background-color: #1565c0;
}

.cp-btn-primary:disabled[b-ee0aerrofx] {
    background-color: #90caf9;
    cursor: not-allowed;
}

.spinner-border-sm[b-ee0aerrofx] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}
/* /Components/Support/TicketConversation.razor.rz.scp.css */
.conversation-thread[b-2qhu01p8l4] {
    max-height: 500px;
    overflow-y: auto;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.empty-conversation[b-2qhu01p8l4] {
    text-align: center;
    padding: 2rem;
    color: #6c757d;
}

.empty-conversation i[b-2qhu01p8l4] {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    display: block;
}

.empty-conversation p[b-2qhu01p8l4] {
    margin: 0;
}

.note[b-2qhu01p8l4] {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 8px;
    max-width: 85%;
}

.note-customer[b-2qhu01p8l4] {
    background-color: #e3f2fd;
    margin-left: auto;
    border-bottom-right-radius: 4px;
}

.note-agent[b-2qhu01p8l4] {
    background-color: #ffffff;
    margin-right: auto;
    border: 1px solid #e0e0e0;
    border-bottom-left-radius: 4px;
}

.note-header[b-2qhu01p8l4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.note-author[b-2qhu01p8l4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.note-author i[b-2qhu01p8l4] {
    color: #6c757d;
}

.agent-badge[b-2qhu01p8l4] {
    background-color: #1976d2;
    color: white;
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-weight: 500;
}

.note-time[b-2qhu01p8l4] {
    color: #6c757d;
    font-size: 0.75rem;
}

.note-content[b-2qhu01p8l4] {
    line-height: 1.5;
    word-wrap: break-word;
}

.note-content p[b-2qhu01p8l4] {
    margin: 0 0 0.5rem 0;
}

.note-content p:last-child[b-2qhu01p8l4] {
    margin-bottom: 0;
}