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

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

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

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

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

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

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

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

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

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

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

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

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

    .top-row[b-vr6ygllc33], article[b-vr6ygllc33] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-vr6ygllc33] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    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-vr6ygllc33] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-2faj67df03] {
    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-2faj67df03] {
    background-color: rgba(255, 255, 255, 0.5);
}

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

.navbar-brand[b-2faj67df03] {
    font-size: 1.1rem;
}

.bi[b-2faj67df03] {
    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-2faj67df03] {
    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-2faj67df03] {
    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-2faj67df03] {
    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-2faj67df03] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

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

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

    .nav-item[b-2faj67df03]  .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-2faj67df03]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

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

.nav-scrollable[b-2faj67df03] {
    display: none;
}

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

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

    .nav-scrollable[b-2faj67df03] {
        /* 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/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-7fdg4goocz],
.components-reconnect-repeated-attempt-visible[b-7fdg4goocz],
.components-reconnect-failed-visible[b-7fdg4goocz],
.components-pause-visible[b-7fdg4goocz],
.components-resume-failed-visible[b-7fdg4goocz],
.components-rejoining-animation[b-7fdg4goocz] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-7fdg4goocz],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-7fdg4goocz],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-7fdg4goocz],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-7fdg4goocz],
#components-reconnect-modal.components-reconnect-retrying[b-7fdg4goocz],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-7fdg4goocz],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-7fdg4goocz],
#components-reconnect-modal.components-reconnect-failed[b-7fdg4goocz],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-7fdg4goocz] {
    display: block;
}


#components-reconnect-modal[b-7fdg4goocz] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-7fdg4goocz 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-7fdg4goocz 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-7fdg4goocz 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-7fdg4goocz]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-7fdg4goocz 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-7fdg4goocz {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-7fdg4goocz {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-7fdg4goocz {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-7fdg4goocz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-7fdg4goocz] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-7fdg4goocz] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-7fdg4goocz] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-7fdg4goocz] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-7fdg4goocz] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-7fdg4goocz] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-7fdg4goocz 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-7fdg4goocz] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-7fdg4goocz {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Admin/AdminAccounts.razor.rz.scp.css */
.sub-wrapper[b-bgqulcnzje] {
    min-height: 100vh;
    background: linear-gradient(179deg, #f4f9f1 4%, #43e97b 24%);
    display: flex;
    flex-direction: column;
}

/* TOP NAV */
.topnav[b-bgqulcnzje] {
    background: white;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #10b981;
    box-shadow: 0 2px 8px rgba(16,185,129,.1);
}

.topnav-left h2[b-bgqulcnzje] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111;
    margin: 0;
}

.topnav-left p[b-bgqulcnzje] {
    font-size: .82rem;
    color: #059669;
    margin: 0;
}

.topnav-right[b-bgqulcnzje] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.avatar[b-bgqulcnzje] {
    width: 38px;
    height: 38px;
    background: #059669;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
}

/* PAGE CONTENT */
.page-content[b-bgqulcnzje] {
    padding: 32px;
    flex: 1;
}

/* TABLE CARD */
.table-card[b-bgqulcnzje] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

/* SEARCH */
.search-box[b-bgqulcnzje] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 8px 14px;
    width: 260px;
    background: white;
}

    .search-box input[b-bgqulcnzje] {
        border: none;
        outline: none;
        font-size: .9rem;
        width: 100%;
        color: #333;
    }

/* TABLE */
.sub-table[b-bgqulcnzje] {
    width: 100%;
    border-collapse: collapse;
}

    .sub-table thead tr[b-bgqulcnzje] {
        border-bottom: 2px solid #f3f4f6;
    }

    .sub-table th[b-bgqulcnzje] {
        text-align: left;
        padding: 10px 12px;
        font-size: .82rem;
        color: #888;
        font-weight: 600;
    }

    .sub-table td[b-bgqulcnzje] {
        padding: 14px 12px;
        border-bottom: 1px solid #f3f4f6;
        font-size: .9rem;
        color: #333;
    }

    .sub-table tbody tr:hover[b-bgqulcnzje] {
        background: #fafafa;
    }

/* STATUS BADGE */
.status-badge[b-bgqulcnzje] {
    background: #d1fae5;
    color: #059669;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
}

/* ACTION BUTTONS */
.action-btn[b-bgqulcnzje] {
    border: 1px solid #e5e7eb;
    background: white;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: .2s;
    font-size: .9rem;
}

.edit-btn:hover[b-bgqulcnzje] {
    background: #f0f0ff;
    border-color: #059669;
    color: #059669;
}

.delete-btn:hover[b-bgqulcnzje] {
    background: #fff0f0;
    border-color: #ef4444;
    color: #ef4444;
}

/* MODAL */
.modal-backdrop-custom[b-bgqulcnzje] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1040;
}

.modal-box[b-bgqulcnzje] {
    position: fixed;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 16px;
    padding: 2rem;
    width: 620px;
    max-width: 95vw;
    z-index: 1050;
    max-height: 90vh;
    overflow-y: auto;

    
}
/* MOBILE TABLE FIX */
.table-card[b-bgqulcnzje] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    overflow-x: auto;
}

.sub-table[b-bgqulcnzje] {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
}

@media (max-width: 768px) {
    .page-content[b-bgqulcnzje] {
        padding: 16px;
    }

    .search-box[b-bgqulcnzje] {
        width: 100%;
    }

    .sub-table th[b-bgqulcnzje],
    .sub-table td[b-bgqulcnzje] {
        white-space: nowrap;
        padding: 10px 8px;
        font-size: 0.8rem;
    }

    .modal-box[b-bgqulcnzje] {
        width: 95%;
        padding: 1rem;
    }
}


/* /Components/Pages/Admin/AdminBilling.razor.rz.scp.css */
.sub-wrapper[b-1qbive4qtu] {
    min-height: 100vh;
    background: linear-gradient(179deg, #f4f9f1 4%, #43e97b 24%);
    display: flex;
    flex-direction: column;
}

.topnav[b-1qbive4qtu] {
    background: white;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #10b981;
    box-shadow: 0 2px 8px rgba(16,185,129,.1);
}

.topnav-left h2[b-1qbive4qtu] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111;
    margin: 0;
}

.topnav-left p[b-1qbive4qtu] {
    font-size: .82rem;
    color: #059669;
    margin: 0;
}

.topnav-right[b-1qbive4qtu] {
    display: flex;
    align-items: center;
}

.page-content[b-1qbive4qtu] {
    padding: 32px;
    flex: 1;
}

.summary-cards[b-1qbive4qtu] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.summary-card[b-1qbive4qtu] {
    background: white;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    border-left: 4px solid #059669;
}

    .summary-card.green[b-1qbive4qtu] {
        border-left-color: #22c55e;
    }

    .summary-card.orange[b-1qbive4qtu] {
        border-left-color: #f59e0b;
    }

    .summary-card.blue[b-1qbive4qtu] {
        border-left-color: #059669;
    }
    .summary-card.red[b-1qbive4qtu] {
        border-left-color: #dc2626;
        color: #dc2626;
    }

.summary-label[b-1qbive4qtu] {
    font-size: .8rem;
    color: #888;
    margin-bottom: 4px;
}

.summary-value[b-1qbive4qtu] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #111;
}

.table-card[b-1qbive4qtu] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.search-box[b-1qbive4qtu] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 8px 14px;
    width: 260px;
    background: white;
}

    .search-box input[b-1qbive4qtu] {
        border: none;
        outline: none;
        font-size: .9rem;
        width: 100%;
    }

.sub-table[b-1qbive4qtu] {
    width: 100%;
    border-collapse: collapse;
}

    .sub-table thead tr[b-1qbive4qtu] {
        border-bottom: 2px solid #f3f4f6;
    }

    .sub-table th[b-1qbive4qtu] {
        text-align: left;
        padding: 10px 12px;
        font-size: .82rem;
        color: #888;
        font-weight: 600;
        white-space: nowrap;
    }

    .sub-table td[b-1qbive4qtu] {
        padding: 14px 12px;
        border-bottom: 1px solid #f3f4f6;
        font-size: .9rem;
        color: #333;
    }

    .sub-table tbody tr:hover[b-1qbive4qtu] {
        background: #fafafa;
    }

.status-badge[b-1qbive4qtu] {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
}

.badge-paid[b-1qbive4qtu] {
    background: #d1fae5;
    color: #059669;
}

.badge-pending[b-1qbive4qtu] {
    background: #fef3c7;
    color: #d97706;
}

.badge-overdue[b-1qbive4qtu] {
    background: #fee2e2;
    color: #dc2626;
}

.action-btn[b-1qbive4qtu] {
    border: 1px solid #e5e7eb;
    background: white;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: .2s;
    font-size: .9rem;
}

.edit-btn:hover[b-1qbive4qtu] {
    background: #f0f0ff;
    border-color: #059669;
    color: #059669;
}

.delete-btn:hover[b-1qbive4qtu] {
    background: #fff0f0;
    border-color: #ef4444;
    color: #ef4444;
}

.modal-backdrop-custom[b-1qbive4qtu] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1040;
}

.modal-box[b-1qbive4qtu] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 16px;
    padding: 2rem;
    width: 620px;
    max-width: 95vw;
    z-index: 1050;
    max-height: 90vh;
    overflow-y: auto;
}

@media (max-width: 800px) {
    .summary-cards[b-1qbive4qtu] {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-content[b-1qbive4qtu] {
        padding: 70px 12px 12px 12px;
    }
}


/* -- Bill Cards -- */
.bills-section[b-1qbive4qtu] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.bills-grid[b-1qbive4qtu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

.bill-card[b-1qbive4qtu] {
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    transition: box-shadow .2s, transform .2s;
}

.bill-card:hover[b-1qbive4qtu] {
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
    transform: translateY(-3px);
}

.bill-card.bill-overdue[b-1qbive4qtu] {
    border-color: #fca5a5;
    background: #fff8f8;
}

.bill-card.bill-paid[b-1qbive4qtu] {
    border-color: #86efac;
    background: #f0fdf4;
}

.bill-badge[b-1qbive4qtu] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 700;
    align-self: flex-start;
}

.bill-subscriber[b-1qbive4qtu] {
    font-size: 1rem;
    font-weight: 700;
    color: #111;
}

.bill-id[b-1qbive4qtu] {
    font-size: .8rem;
}

.bill-amount[b-1qbive4qtu] {
    font-size: 1.4rem;
    font-weight: 800;
    color: #111;
}

.bill-amount span[b-1qbive4qtu] {
    font-size: .8rem;
    font-weight: 400;
    color: #888;
}

.bill-meta[b-1qbive4qtu] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: .83rem;
    color: #555;
    flex: 1;
}

.bill-desc[b-1qbive4qtu] {
    color: #888;
    font-style: italic;
}

.bill-actions[b-1qbive4qtu] {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.bill-action-btn[b-1qbive4qtu] {
    flex: 1;
    padding: 7px;
    border-radius: 8px;
    border: 1.5px solid #e5e7eb;
    background: white;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.bill-action-btn.edit-btn:hover[b-1qbive4qtu] {
    background: #f0f0ff;
    border-color: #059669;
    color: #059669;
}

.bill-action-btn.delete-btn:hover[b-1qbive4qtu] {
    background: #fff0f0;
    border-color: #ef4444;
    color: #ef4444;
}

.bills-empty[b-1qbive4qtu] {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
}

.paid-btn[b-1qbive4qtu] {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.paid-btn:hover[b-1qbive4qtu] {
    background: #dcfce7;
    border-color: #16a34a;
}


/* /Components/Pages/Admin/AdminDashboard.razor.rz.scp.css */
*[b-7nc2b8bbze] {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', sans-serif;
}

.wrapper[b-7nc2b8bbze] {
    min-height: 100vh;
    background: linear-gradient(179deg, #f4f9f1 4%, #43e97b 24%);
    overflow-x: hidden;
}

/* TOP NAV */
.topnav[b-7nc2b8bbze] {
    background: white;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #10b981;
    box-shadow: 0 2px 8px rgba(16,185,129,.1);
    gap: 20px;
    flex-wrap: wrap;
}

.topnav-left h2[b-7nc2b8bbze] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111;
}

.topnav-left p[b-7nc2b8bbze] {
    font-size: .82rem;
    color: #059669;
}

.topnav-right[b-7nc2b8bbze] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Logout button (single definition only) */
.logout-btn[b-7nc2b8bbze] {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    color: #fff;
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: .2s ease;
}

    .logout-btn:hover[b-7nc2b8bbze] {
        background: linear-gradient(135deg, #059669, #047857);
        transform: translateY(-1px);
    }

.notif-dot[b-7nc2b8bbze] {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    background: red;
    border-radius: 50%;
}

.avatar[b-7nc2b8bbze] {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

/* CONTENT */
.content[b-7nc2b8bbze] {
    padding: 32px;
}

    .content h1[b-7nc2b8bbze] {
        font-size: 2rem;
        font-weight: 800;
        margin-bottom: 24px;
        color: #111;
    }

/* STAT CARDS */
.stat-cards[b-7nc2b8bbze] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.stat-card[b-7nc2b8bbze] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    box-shadow: 0 2px 10px rgba(16, 185, 129, .08);
    min-width: 0;
    border: 1px solid #f0fdf4;
}

    .stat-card .label[b-7nc2b8bbze] {
        font-size: .82rem;
        color: #888;
        margin-bottom: 6px;
    }

    .stat-card .value[b-7nc2b8bbze] {
        font-size: 2rem;
        font-weight: 800;
        color: #111;
        margin-bottom: 6px;
    }

    .stat-card .trend[b-7nc2b8bbze] {
        font-size: .8rem;
        color: #22c55e;
        font-weight: 600;
    }

.stat-icon[b-7nc2b8bbze] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.icon-blue[b-7nc2b8bbze] {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
}

.icon-green[b-7nc2b8bbze] {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
}

.icon-orange[b-7nc2b8bbze] {
    background: linear-gradient(135deg, #f0fdfa, #ccfbf1);
}

/* GRID */
.bottom-grid[b-7nc2b8bbze] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* CARD */
.card[b-7nc2b8bbze] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 10px rgba(16, 185, 129, .08);
    border: 1px solid #f0fdf4;
}

/* table scroll wrapper */
.table-wrap[b-7nc2b8bbze] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.card-title[b-7nc2b8bbze] {
    font-size: 1rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 4px;
}

.card-sub[b-7nc2b8bbze] {
    font-size: .82rem;
    color: #aaa;
    margin-bottom: 16px;
}

/* TABLE */
table[b-7nc2b8bbze] {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

thead tr[b-7nc2b8bbze] {
    background: #f0fdf4;
}

th[b-7nc2b8bbze] {
    text-align: left;
    padding: 12px;
    font-size: .82rem;
    color: #065f46;
}

td[b-7nc2b8bbze] {
    padding: 14px 12px;
    border-bottom: 1px solid #f3f4f6;
    color: #333;
}

.badge[b-7nc2b8bbze] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
}

/* NOTIFICATIONS */
.notif-item[b-7nc2b8bbze] {
    padding: 14px 0;
    border-bottom: 1px solid #f3f4f6;
}

    .notif-item:last-of-type[b-7nc2b8bbze] {
        border-bottom: none;
    }

    .notif-item p[b-7nc2b8bbze] {
        font-size: .9rem;
        color: #222;
        font-weight: 500;
        margin-bottom: 4px;
        line-height: 1.4;
    }

    .notif-item span[b-7nc2b8bbze] {
        font-size: .78rem;
        color: #aaa;
    }

.view-all-btn[b-7nc2b8bbze] {
    width: 100%;
    margin-top: 18px;
    padding: 11px;
    background: white;
    border: 1px solid #d1fae5;
    border-radius: 10px;
    font-weight: 600;
    color: #059669;
    cursor: pointer;
    transition: .2s;
}

    .view-all-btn:hover[b-7nc2b8bbze] {
        background: #f0fdf4;
    }

/* RESPONSIVE */
@media (max-width: 1100px) {
    .stat-cards[b-7nc2b8bbze] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .topnav[b-7nc2b8bbze] {
        padding: 12px 16px;
        flex-direction: column;
        align-items: flex-start;
    }

    .topnav-right[b-7nc2b8bbze] {
        width: 100%;
        justify-content: flex-end;
    }

    .content[b-7nc2b8bbze] {
        padding: 16px;
    }

        .content h1[b-7nc2b8bbze] {
            font-size: 1.5rem;
        }

    .stat-cards[b-7nc2b8bbze] {
        grid-template-columns: 1fr;
    }

    .stat-card[b-7nc2b8bbze] {
        padding: 16px;
    }

        .stat-card .value[b-7nc2b8bbze] {
            font-size: 1.5rem;
        }

    table[b-7nc2b8bbze] {
        min-width: 600px;
    }
}
/* /Components/Pages/Admin/AdminFinancialReport.razor.rz.scp.css */
.sub-wrapper[b-t8nq65o8kx] {
    min-height: 100vh;
    background: linear-gradient(179deg, #f4f9f1 4%, #43e97b 24%);
    display: flex;
    flex-direction: column;
}

.topnav[b-t8nq65o8kx] {
    background: white;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #10b981;
    box-shadow: 0 2px 8px rgba(16,185,129,.1);
}

.topnav-left h2[b-t8nq65o8kx] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111;
    margin: 0;
}

.topnav-left p[b-t8nq65o8kx] {
    font-size: .82rem;
    color: #059669;
    margin: 0;
}

.page-content[b-t8nq65o8kx] {
    padding: 32px;
    flex: 1;
}

/* Summary Cards */
.summary-cards[b-t8nq65o8kx] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.summary-card[b-t8nq65o8kx] {
    background: white;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    border-left: 4px solid #059669;
}

    .summary-card.green[b-t8nq65o8kx] {
        border-left-color: #22c55e;
    }

    .summary-card.orange[b-t8nq65o8kx] {
        border-left-color: #f59e0b;
    }

    .summary-card.red[b-t8nq65o8kx] {
        border-left-color: #ef4444;
    }

.summary-label[b-t8nq65o8kx] {
    font-size: .8rem;
    color: #888;
    margin-bottom: 4px;
}

.summary-value[b-t8nq65o8kx] {
    font-size: 1.4rem;
    font-weight: 800;
    color: #111;
}

/* Table Card */
.table-card[b-t8nq65o8kx] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.sub-table[b-t8nq65o8kx] {
    width: 100%;
    border-collapse: collapse;
}

    .sub-table thead tr[b-t8nq65o8kx] {
        border-bottom: 2px solid #f3f4f6;
    }

    .sub-table th[b-t8nq65o8kx] {
        text-align: left;
        padding: 10px 12px;
        font-size: .82rem;
        color: #888;
        font-weight: 600;
        white-space: nowrap;
    }

    .sub-table td[b-t8nq65o8kx] {
        padding: 14px 12px;
        border-bottom: 1px solid #f3f4f6;
        font-size: .9rem;
        color: #333;
    }

    .sub-table tbody tr:hover[b-t8nq65o8kx] {
        background: #fafafa;
    }

/* Status Badges */
.status-badge[b-t8nq65o8kx] {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
}

.badge-paid[b-t8nq65o8kx] {
    background: #d1fae5;
    color: #059669;
}

.badge-pending[b-t8nq65o8kx] {
    background: #fef3c7;
    color: #d97706;
}

.badge-overdue[b-t8nq65o8kx] {
    background: #fee2e2;
    color: #dc2626;
}

/* Search */
.search-box[b-t8nq65o8kx] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 8px 14px;
    width: 240px;
    background: white;
}

    .search-box input[b-t8nq65o8kx] {
        border: none;
        outline: none;
        font-size: .9rem;
        width: 100%;
    }

@media (max-width: 800px) {
    .summary-cards[b-t8nq65o8kx] {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-content[b-t8nq65o8kx] {
        padding: 70px 12px 12px 12px;
    }
}

@media print {
    /* Hide everything except the report content */
    .sidebar[b-t8nq65o8kx],
    .desktop-toggle[b-t8nq65o8kx],
    .mobile-topbar[b-t8nq65o8kx],
    .mobile-overlay[b-t8nq65o8kx],
    nav[b-t8nq65o8kx],
    .topnav[b-t8nq65o8kx],
    button[b-t8nq65o8kx],
    .btn[b-t8nq65o8kx],
    .search-box[b-t8nq65o8kx],
    .topnav-right[b-t8nq65o8kx],
    .summary-cards[b-t8nq65o8kx],
    [class*="gap-2"] > button[b-t8nq65o8kx],
    .form-select[b-t8nq65o8kx],
    input[type="date"][b-t8nq65o8kx] {
        display: none !important;
    }

    .admin-container[b-t8nq65o8kx] {
        display: block !important;
    }

    .main-content[b-t8nq65o8kx] {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .sub-wrapper[b-t8nq65o8kx] {
        background: white !important;
        min-height: unset !important;
    }

    .page-content[b-t8nq65o8kx] {
        padding: 16px !important;
    }

    .table-card[b-t8nq65o8kx] {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        margin-bottom: 16px !important;
        page-break-inside: avoid;
    }

    .sub-table td[b-t8nq65o8kx],
    .sub-table th[b-t8nq65o8kx] {
        font-size: 10px !important;
        padding: 6px 8px !important;
    }

    .status-badge[b-t8nq65o8kx] {
        padding: 2px 6px !important;
        font-size: 9px !important;
    }
}
/* Responsive */
@media (max-width: 768px) {

    .topnav[b-t8nq65o8kx] {
        padding: 12px 16px;
    }

    .page-content[b-t8nq65o8kx] {
        padding: 16px;
    }

    .table-card[b-t8nq65o8kx] {
        padding: 16px;
        overflow-x: auto;
    }

    .sub-table[b-t8nq65o8kx] {
        min-width: 700px;
    }

    .search-box[b-t8nq65o8kx] {
        width: 100%;
    }

        .search-box input[b-t8nq65o8kx] {
            width: 100%;
        }

    /* Filters */
    .filters[b-t8nq65o8kx],
    .table-header[b-t8nq65o8kx] {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

        .filters input[b-t8nq65o8kx],
        .filters select[b-t8nq65o8kx],
        .filters button[b-t8nq65o8kx] {
            width: 100%;
        }

    /* Monthly Breakdown */
    .monthly-header[b-t8nq65o8kx] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

        .monthly-header select[b-t8nq65o8kx] {
            width: 100%;
        }
}
/* /Components/Pages/Admin/AdminInternetPlans.razor.rz.scp.css */
.sub-wrapper[b-dirh7h54px] {
    min-height: 100vh;
    background: linear-gradient(179deg, #f4f9f1 4%, #43e97b 24%);
    display: flex;
    flex-direction: column;
}

.topnav[b-dirh7h54px] {
    background: white;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #10b981;
    box-shadow: 0 2px 8px rgba(16,185,129,.1);
}

.topnav-left h2[b-dirh7h54px] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111;
    margin: 0;
}

.topnav-left p[b-dirh7h54px] {
    font-size: .82rem;
    color: #059669;
    margin: 0;
}

.topnav-right[b-dirh7h54px] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.page-content[b-dirh7h54px] {
    padding: 32px;
    flex: 1;
}

.table-card[b-dirh7h54px] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.sub-table[b-dirh7h54px] {
    width: 100%;
    border-collapse: collapse;
}

    .sub-table thead tr[b-dirh7h54px] {
        border-bottom: 2px solid #f3f4f6;
    }

    .sub-table th[b-dirh7h54px] {
        text-align: left;
        padding: 10px 12px;
        font-size: .82rem;
        color: #888;
        font-weight: 600;
    }

    .sub-table td[b-dirh7h54px] {
        padding: 14px 12px;
        border-bottom: 1px solid #f3f4f6;
        font-size: .9rem;
        color: #333;
    }

    .sub-table tbody tr:hover[b-dirh7h54px] {
        background: #fafafa;
    }

.status-badge[b-dirh7h54px] {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
}

.badge-active[b-dirh7h54px] {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: white;
}

.badge-inactive[b-dirh7h54px] {
    background: #f3f4f6;
    color: #888;
}

.action-btn[b-dirh7h54px] {
    border: 1px solid #e5e7eb;
    background: white;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: .2s;
    font-size: .9rem;
}

.edit-btn:hover[b-dirh7h54px] {
    background: #f0f0ff;
    border-color: #059669;
    color: #059669;
}

.delete-btn:hover[b-dirh7h54px] {
    background: #fff0f0;
    border-color: #ef4444;
    color: #ef4444;
}

.modal-backdrop-custom[b-dirh7h54px] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1040;
}

.modal-box[b-dirh7h54px] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 16px;
    padding: 2rem;
    width: 620px;
    max-width: 95vw;
    z-index: 1050;
    max-height: 90vh;
    overflow-y: auto;
}

/* /Components/Pages/Admin/AdminNotifications.razor.rz.scp.css */
.sub-wrapper[b-nb20tg1hp4] {
    min-height: 100vh;
    background: linear-gradient(179deg, #f4f9f1 4%, #43e97b 24%);
    display: flex;
    flex-direction: column;
}

.topnav[b-nb20tg1hp4] {
    background: white;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #10b981;
    box-shadow: 0 2px 8px rgba(16,185,129,.1);
}

.topnav-left h2[b-nb20tg1hp4] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111;
    margin: 0;
}

.topnav-left p[b-nb20tg1hp4] {
    font-size: .82rem;
    color: #059669;
    margin: 0;
}

.page-content[b-nb20tg1hp4] {
    padding: 32px;
    flex: 1;
}

.form-card[b-nb20tg1hp4] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.form-card-title[b-nb20tg1hp4] {
    font-size: 1rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 20px;
}

.table-card[b-nb20tg1hp4] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.sub-table[b-nb20tg1hp4] {
    width: 100%;
    border-collapse: collapse;
}

    .sub-table thead tr[b-nb20tg1hp4] {
        border-bottom: 2px solid #f3f4f6;
    }

    .sub-table th[b-nb20tg1hp4] {
        text-align: left;
        padding: 10px 12px;
        font-size: .82rem;
        color: #888;
        font-weight: 600;
    }

    .sub-table td[b-nb20tg1hp4] {
        padding: 14px 12px;
        border-bottom: 1px solid #f3f4f6;
        font-size: .88rem;
        color: #333;
        vertical-align: middle;
    }

    .sub-table tbody tr:hover[b-nb20tg1hp4] {
        background: #fafafa;
    }

.status-badge[b-nb20tg1hp4] {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 700;
}

.badge-read[b-nb20tg1hp4] {
    background: #d1fae5;
    color: #059669;
}

.badge-unread[b-nb20tg1hp4] {
    background: #fef3c7;
    color: #d97706;
}

.btn-template[b-nb20tg1hp4] {
    background: #f3f4f6;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: .2s;
}

    .btn-template:hover[b-nb20tg1hp4] {
        background: #eef2ff;
        border-color: #059669;
        color: #059669;
    }

@media (max-width: 800px) {
    .page-content[b-nb20tg1hp4] {
        padding: 70px 12px 12px;
    }
}
/* /Components/Pages/Admin/AdminServiceRequest.razor.rz.scp.css */
.sub-wrapper[b-iu13bifi0v] {
    padding: 0;
    min-height: 100vh;
    background: linear-gradient(179deg, #f4f9f1 4%, #43e97b 24%);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.topnav[b-iu13bifi0v] {
    background: white;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    border-bottom: 3px solid #10b981;
    box-shadow: 0 2px 8px rgba(16,185,129,.1);
}

.topnav-left h2[b-iu13bifi0v] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 4px;
}

.topnav-left p[b-iu13bifi0v] {
    color: #059669;
    margin: 0;
    font-size: .9rem;
}

.page-content[b-iu13bifi0v] {
    flex: 1;
    padding: 20px;
    overflow-x: auto;
}

/* Summary Cards */
.summary-cards[b-iu13bifi0v] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.summary-card[b-iu13bifi0v] {
    background: white;
    border-radius: 14px;
    padding: 18px 22px;
    border: 1px solid #e5e7eb;
}

    .summary-card.green[b-iu13bifi0v] {
        border-left: 4px solid #16a34a;
    }

    .summary-card.orange[b-iu13bifi0v] {
        border-left: 4px solid #ea580c;
    }

    .summary-card.blue[b-iu13bifi0v] {
        border-left: 4px solid #059669;
    }

    .summary-card.red[b-iu13bifi0v] {
        border-left: 4px solid #dc2626;
    }

.summary-label[b-iu13bifi0v] {
    font-size: .8rem;
    color: #888;
    margin-bottom: 6px;
}

.summary-value[b-iu13bifi0v] {
    font-size: 1.8rem;
    font-weight: 800;
    color: #111;
}

/* Table */
.table-card[b-iu13bifi0v] {
    background: white;
    border-radius: 14px;
    padding: 20px;
    border: 1px solid #e5e7eb;
    overflow-x: auto;
}

.search-box[b-iu13bifi0v] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 12px;
    width: 100%;
    max-width: 320px;
}

    .search-box input[b-iu13bifi0v] {
        border: none;
        background: transparent;
        outline: none;
        width: 100%;
    }

.sub-table[b-iu13bifi0v] {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    font-size: .9rem;
}

    .sub-table thead tr[b-iu13bifi0v] {
        border-bottom: 2px solid #f3f4f6;
    }

    .sub-table th[b-iu13bifi0v] {
        padding: 10px 14px;
        font-size: .78rem;
        font-weight: 700;
        color: #888;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .sub-table td[b-iu13bifi0v] {
        padding: 12px 14px;
        color: #374151;
        vertical-align: middle;
    }

    .sub-table tbody tr[b-iu13bifi0v] {
        border-bottom: 1px solid #f3f4f6;
        transition: .2s;
    }

        .sub-table tbody tr:hover[b-iu13bifi0v] {
            background: #fafafa;
        }

/* Badges */
.status-badge[b-iu13bifi0v] {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 700;
}

.badge-paid[b-iu13bifi0v] {
    background: #d1fae5;
    color: #059669;
}

.badge-pending[b-iu13bifi0v] {
    background: #fef3c7;
    color: #d97706;
}

.badge-overdue[b-iu13bifi0v] {
    background: #fee2e2;
    color: #dc2626;
}

.badge-inprogress[b-iu13bifi0v] {
    background: #ede9fe;
    color: #7c3aed;
}

/* Buttons */
.action-btn[b-iu13bifi0v] {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.edit-btn[b-iu13bifi0v] {
    background: #f0fdf4;
    color: #059669;
}

    .edit-btn:hover[b-iu13bifi0v] {
        background: #d1fae5;
    }

/* Modal */
.modal-backdrop-custom[b-iu13bifi0v] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1040;
}

.modal-box[b-iu13bifi0v] {
    position: fixed;
    top: 55%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 480px;
    max-width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    background: white;
    border-radius: 16px;
    padding: 24px;
    z-index: 1050;
}

/* Responsive */
@media (max-width:768px) {

    .page-content[b-iu13bifi0v] {
        padding: 15px;
    }

    .topnav[b-iu13bifi0v] {
        flex-direction: column;
        align-items: flex-start;
    }

    .summary-value[b-iu13bifi0v] {
        font-size: 1.5rem;
    }

    .table-card[b-iu13bifi0v] {
        padding: 15px;
    }

    .search-box[b-iu13bifi0v] {
        max-width: 100%;
    }

    .sub-table[b-iu13bifi0v] {
        min-width: 700px;
    }

    .modal-box[b-iu13bifi0v] {
        width: 95%;
        padding: 18px;
    }

    .table-card .d-flex[b-iu13bifi0v] {
        flex-wrap: wrap;
        gap: 10px;
    }
}

@media (max-width:480px) {

    .page-content[b-iu13bifi0v] {
        padding: 10px;
    }

    .summary-cards[b-iu13bifi0v] {
        grid-template-columns: 1fr;
    }

    .topnav-left h2[b-iu13bifi0v] {
        font-size: 1rem;
    }

    .topnav-left p[b-iu13bifi0v] {
        font-size: .8rem;
    }

    .summary-value[b-iu13bifi0v] {
        font-size: 1.3rem;
    }

    .sub-table[b-iu13bifi0v] {
        min-width: 600px;
    }

    .modal-box[b-iu13bifi0v] {
        width: 96%;
        padding: 16px;
    }
}

/* Lightbox */
.lightbox-backdrop[b-iu13bifi0v] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.85);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-container[b-iu13bifi0v] {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.lightbox-img[b-iu13bifi0v] {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: 8px;
    object-fit: contain;
}

.lightbox-close[b-iu13bifi0v] {
    position: absolute;
    top: -36px;
    right: 0;
    background: transparent;
    border: none;
    color: white;
    font-size: 1.4rem;
    cursor: pointer;
}
/* /Components/Pages/Admin/AdminSubscriber.razor.rz.scp.css */
.sub-wrapper[b-dozc7la6k9] {
    min-height: 100vh;
    background: linear-gradient(179deg, #f4f9f1 4%, #43e97b 24%);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.topnav[b-dozc7la6k9] {
    background: white;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #10b981;
    box-shadow: 0 2px 8px rgba(16,185,129,.1);
}

.topnav-left h2[b-dozc7la6k9] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111;
    margin: 0;
}

.topnav-left p[b-dozc7la6k9] {
    font-size: .82rem;
    color: #059669;
    margin: 0;
}

.topnav-right[b-dozc7la6k9] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.avatar[b-dozc7la6k9] {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #065f46, #10b981);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.page-content[b-dozc7la6k9] {
    padding: 32px;
    flex: 1;
}

.table-card[b-dozc7la6k9] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(16, 185, 129, .08);
    border: 1px solid #e6f7ef;
}

.search-box[b-dozc7la6k9] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #d1fae5;
    border-radius: 10px;
    padding: 8px 14px;
    width: 260px;
    background: #f7fefb;
    transition: border-color .2s, box-shadow .2s;
}

    .search-box:focus-within[b-dozc7la6k9] {
        border-color: #10b981;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
    }

    .search-box input[b-dozc7la6k9] {
        border: none;
        outline: none;
        font-size: .9rem;
        width: 100%;
        color: #333;
        background: transparent;
    }

.sub-table[b-dozc7la6k9] {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

    .sub-table thead tr[b-dozc7la6k9] {
        border-bottom: 2px solid #e6f7ef;
    }

    .sub-table th[b-dozc7la6k9] {
        text-align: left;
        padding: 10px 12px;
        font-size: .82rem;
        color: #888;
        font-weight: 600;
        white-space: nowrap;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    .sub-table td[b-dozc7la6k9] {
        padding: 14px 12px;
        border-bottom: 1px solid #f0faf5;
        font-size: .9rem;
        color: #333;
        white-space: nowrap;
    }

    .sub-table tbody tr[b-dozc7la6k9] {
        transition: background .15s;
    }

        .sub-table tbody tr:hover[b-dozc7la6k9] {
            background: #f2fdf8;
        }

    .sub-table th:first-child[b-dozc7la6k9], .sub-table td:first-child[b-dozc7la6k9] {
        width: 80px;
    }

    .sub-table th:last-child[b-dozc7la6k9], .sub-table td:last-child[b-dozc7la6k9] {
        width: 96px;
    }

.status-badge[b-dozc7la6k9] {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
}

.badge-active[b-dozc7la6k9] {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: white;
}

.badge-expired[b-dozc7la6k9] {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: white;
}

.badge-inactive[b-dozc7la6k9] {
    background-color: #eef2f0;
    color: #8a938d;
}

.row-id-thumb[b-dozc7la6k9] {
    width: 60px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid #d1fae5;
}

.row-id-placeholder[b-dozc7la6k9] {
    width: 60px;
    height: 40px;
    border-radius: 6px;
    background: #f0faf5;
    color: #9ecbb0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    font-weight: 600;
    border: 1px dashed #b7e6cc;
}

.id-preview[b-dozc7la6k9] {
    width: 100%;
    max-width: 340px;
    max-height: 220px;
    border-radius: 10px;
    object-fit: contain;
    border: 1px solid #d1fae5;
    background: #fafffc;
    display: block;
    margin: 0 auto;
}

.id-preview-placeholder[b-dozc7la6k9] {
    width: 100%;
    max-width: 340px;
    height: 140px;
    border-radius: 10px;
    background: #f0faf5;
    color: #6b9d80;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    margin: 0 auto;
    border: 1px dashed #b7e6cc;
}

.action-btn[b-dozc7la6k9] {
    border: 1px solid #d1fae5;
    background: white;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: .2s;
    font-size: .9rem;
}

.edit-btn:hover[b-dozc7la6k9] {
    background: #f0fdf6;
    border-color: #10b981;
    color: #0f9b6c;
}

.delete-btn:hover[b-dozc7la6k9] {
    background: #fff0f0;
    border-color: #ef4444;
    color: #ef4444;
}

.modal-backdrop-custom[b-dozc7la6k9] {
    position: fixed;
    inset: 0;
    background: rgba(6, 78, 59, 0.45);
    z-index: 1040;
}

.modal-box[b-dozc7la6k9] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 16px;
    padding: 2rem;
    width: 680px;
    max-width: 95vw;
    z-index: 1050;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    border-top: 4px solid #10b981;
}

/* Lightbox */
.lightbox-backdrop[b-dozc7la6k9] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    animation: fadeIn-b-dozc7la6k9 .15s ease;
}

.lightbox-container[b-dozc7la6k9] {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-img[b-dozc7la6k9] {
    max-width: 90vw;
    max-height: 88vh;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    object-fit: contain;
}

.lightbox-close[b-dozc7la6k9] {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 36px;
    height: 36px;
    background: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #333;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: background .15s;
    z-index: 2001;
}

    .lightbox-close:hover[b-dozc7la6k9] {
        background: #f0fdf6;
    }

@keyframes fadeIn-b-dozc7la6k9 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* Table container */
.table-responsive[b-dozc7la6k9] {
    width: 100%;
    overflow-x: auto;
}

/* Search */
.search-box[b-dozc7la6k9] {
    width: 100%;
    max-width: 260px;
}

/* Table */
.sub-table[b-dozc7la6k9] {
    width: 100%;
    min-width: 900px; /* adjust kung ilan columns mo */
    border-collapse: collapse;
}

/* Para hindi lumabas sa card */
.table-card[b-dozc7la6k9] {
    overflow-x: auto;
}

/* Responsive */
@media (max-width: 768px) {

    .page-content[b-dozc7la6k9] {
        padding: 16px;
    }

    .topnav[b-dozc7la6k9] {
        padding: 12px 16px;
    }

    .search-box[b-dozc7la6k9] {
        max-width: 100%;
    }

    .modal-box[b-dozc7la6k9] {
        width: 95%;
        padding: 1.2rem;
    }
}

/* Inactive subscriber — yellow badge */
.badge-inactive-yellow[b-dozc7la6k9] {
    background: #fef3c7;
    color: #d97706;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
}
/* /Components/Pages/Admin/AdminTechnicians.razor.rz.scp.css */
.sub-wrapper[b-xrxxtmg4im] {
    min-height: 100vh;
    background: linear-gradient(179deg, #f4f9f1 4%, #43e97b 24%);
    display: flex;
    flex-direction: column;
}

.topnav[b-xrxxtmg4im] {
    background: white;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #10b981;
    box-shadow: 0 2px 8px rgba(16,185,129,.1);
}

.topnav-left h2[b-xrxxtmg4im] { font-size: 1.2rem; font-weight: 700; color: #111; margin: 0; }
.topnav-left p[b-xrxxtmg4im]  { font-size: .82rem; color: #059669; margin: 0; }
.topnav-right[b-xrxxtmg4im]   { display: flex; align-items: center; gap: 16px; }

.page-content[b-xrxxtmg4im] { padding: 32px; flex: 1; }

/* Stat Cards */
.tech-stats[b-xrxxtmg4im] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.tech-stat-card[b-xrxxtmg4im] {
    background: white;
    border-radius: 14px;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

.tech-stat-icon[b-xrxxtmg4im] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.icon-blue[b-xrxxtmg4im]  { background: #f0fdf4; color: #059669; }
.icon-green[b-xrxxtmg4im] { background: #f0fdf4; color: #16a34a; }
.icon-pin[b-xrxxtmg4im]   { background: #f0fdf4; color: #059669; }

.tech-stat-label[b-xrxxtmg4im] { font-size: .8rem; color: #888; margin-bottom: 4px; }
.tech-stat-value[b-xrxxtmg4im] { font-size: 1.8rem; font-weight: 800; color: #111; line-height: 1; }

/* Table Card */
.table-card[b-xrxxtmg4im] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.search-box[b-xrxxtmg4im] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 8px 14px;
    width: 260px;
    background: white;
}

.search-box input[b-xrxxtmg4im] { border: none; outline: none; font-size: .9rem; width: 100%; color: #333; }

.sub-table[b-xrxxtmg4im] { width: 100%; border-collapse: collapse; }
.sub-table thead tr[b-xrxxtmg4im] { border-bottom: 2px solid #f3f4f6; }
.sub-table th[b-xrxxtmg4im] { text-align: left; padding: 10px 12px; font-size: .82rem; color: #888; font-weight: 600; white-space: nowrap; }
.sub-table td[b-xrxxtmg4im] { padding: 14px 12px; border-bottom: 1px solid #f3f4f6; font-size: .9rem; color: #333; vertical-align: middle; }
.sub-table tbody tr:hover[b-xrxxtmg4im] { background: #fafafa; }

.tech-name[b-xrxxtmg4im] { font-weight: 600; color: #111; }

.action-btn[b-xrxxtmg4im] { border: 1px solid #e5e7eb; background: white; border-radius: 8px; padding: 6px 10px; cursor: pointer; transition: .2s; font-size: .9rem; }
.edit-btn:hover[b-xrxxtmg4im]   { background: #eff6ff; border-color: #059669; color: #059669; }
.delete-btn:hover[b-xrxxtmg4im] { background: #fff0f0; border-color: #ef4444; color: #ef4444; }

/* Modals */
.modal-backdrop-custom[b-xrxxtmg4im] { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1040; }

.modal-box[b-xrxxtmg4im] {
    position: fixed;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 16px;
    padding: 2rem;
    width: 620px;
    max-width: 95vw;
    z-index: 1050;
    max-height: 90vh;
    overflow-y: auto;
}

@media (max-width: 900px) {
    .tech-stats[b-xrxxtmg4im] { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .tech-stats[b-xrxxtmg4im] { grid-template-columns: 1fr; }
    .page-content[b-xrxxtmg4im] { padding: 16px; }
    .topnav[b-xrxxtmg4im] { padding: 12px 16px; flex-direction: column; align-items: flex-start; gap: 12px; }
}


/* /Components/Pages/Admin/AdminUpgradeRequests.razor.rz.scp.css */

.sub-wrapper[b-eseca6q4q2] {
    min-height: 100vh;
    background: linear-gradient(179deg, #f4f9f1 4%, #43e97b 24%);
    display: flex;
    flex-direction: column;
}

.topnav[b-eseca6q4q2] {
    background: white;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #10b981;
    box-shadow: 0 2px 8px rgba(16,185,129,.1);
}

.topnav-left h2[b-eseca6q4q2] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111;
    margin: 0;
}

.topnav-left p[b-eseca6q4q2] {
    font-size: .82rem;
    color: #059669;
    margin: 0;
}

.page-content[b-eseca6q4q2] {
    padding: 32px;
    flex: 1;
}

.table-card[b-eseca6q4q2] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.sub-table[b-eseca6q4q2] {
    width: 100%;
    border-collapse: collapse;
}

    .sub-table thead tr[b-eseca6q4q2] {
        border-bottom: 2px solid #f3f4f6;
    }

    .sub-table th[b-eseca6q4q2] {
        text-align: left;
        padding: 10px 12px;
        font-size: .82rem;
        color: #888;
        font-weight: 600;
        white-space: nowrap;
    }

    .sub-table td[b-eseca6q4q2] {
        padding: 14px 12px;
        border-bottom: 1px solid #f3f4f6;
        font-size: .9rem;
        color: #333;
        vertical-align: middle;
    }

    .sub-table tbody tr:hover[b-eseca6q4q2] {
        background: #fafafa;
    }

.status-badge[b-eseca6q4q2] {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
}

.badge-pending[b-eseca6q4q2] {
    background: #fef3c7;
    color: #d97706;
}

.badge-approved[b-eseca6q4q2] {
    background: #d1fae5;
    color: #059669;
}

.badge-rejected[b-eseca6q4q2] {
    background: #fee2e2;
    color: #dc2626;
}

/* /Components/Pages/Admin/SuperAdminAccounts.razor.rz.scp.css */
.sub-wrapper[b-tw7cwbb1kx] {
    min-height: 100vh;
    background: linear-gradient(179deg, #f4f9f1 4%, #43e97b 24%);
    display: flex;
    flex-direction: column;
}

/* TOP NAV */
.topnav[b-tw7cwbb1kx] {
    background: white;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #10b981;
    box-shadow: 0 2px 8px rgba(16,185,129,.1);
}

.topnav-left h2[b-tw7cwbb1kx] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111;
    margin: 0;
}

.topnav-left p[b-tw7cwbb1kx] {
    font-size: .82rem;
    color: #059669;
    margin: 0;
}

/* PAGE CONTENT */
.page-content[b-tw7cwbb1kx] {
    padding: 32px;
    flex: 1;
}

/* TABLE CARD */
.table-card[b-tw7cwbb1kx] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    overflow-x: auto;
}

/* SEARCH */
.search-box[b-tw7cwbb1kx] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 8px 14px;
    width: 260px;
    background: white;
}

    .search-box input[b-tw7cwbb1kx] {
        border: none;
        outline: none;
        font-size: .9rem;
        width: 100%;
        color: #333;
    }

/* TABLE */
.sub-table[b-tw7cwbb1kx] {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
}

    .sub-table thead tr[b-tw7cwbb1kx] {
        border-bottom: 2px solid #f3f4f6;
    }

    .sub-table th[b-tw7cwbb1kx] {
        text-align: left;
        padding: 10px 12px;
        font-size: .82rem;
        color: #888;
        font-weight: 600;
        white-space: nowrap;
    }

    .sub-table td[b-tw7cwbb1kx] {
        padding: 14px 12px;
        border-bottom: 1px solid #f3f4f6;
        font-size: .9rem;
        color: #333;
    }

    .sub-table tbody tr:hover[b-tw7cwbb1kx] {
        background: #fafafa;
    }

/* STATUS BADGE */
.status-badge[b-tw7cwbb1kx] {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
}

.badge-pending[b-tw7cwbb1kx] {
    background: #dbeafe;
    color: #2563eb;
}

.badge-overdue[b-tw7cwbb1kx] {
    background: #fef3c7;
    color: #d97706;
}

/* ACTION BUTTONS */
.action-btn[b-tw7cwbb1kx] {
    border: 1px solid #e5e7eb;
    background: white;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: .2s;
    font-size: .9rem;
}

.edit-btn:hover[b-tw7cwbb1kx] {
    background: #f0f0ff;
    border-color: #059669;
    color: #059669;
}

.delete-btn:hover[b-tw7cwbb1kx] {
    background: #fff0f0;
    border-color: #ef4444;
    color: #ef4444;
}

/* MODAL */
.modal-backdrop-custom[b-tw7cwbb1kx] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1040;
}

.modal-box[b-tw7cwbb1kx] {
    position: fixed;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 16px;
    padding: 2rem;
    width: 560px;
    max-width: 95vw;
    z-index: 1050;
    max-height: 90vh;
    overflow-y: auto;
}

/* MOBILE */
@media (max-width: 768px) {
    .page-content[b-tw7cwbb1kx] {
        padding: 16px;
    }

    .search-box[b-tw7cwbb1kx] {
        width: 100%;
    }

    .sub-table th[b-tw7cwbb1kx],
    .sub-table td[b-tw7cwbb1kx] {
        white-space: nowrap;
        padding: 10px 8px;
        font-size: 0.8rem;
    }

    .modal-box[b-tw7cwbb1kx] {
        width: 95%;
        padding: 1rem;
    }
}
/* /Components/Pages/LandingPage.razor.rz.scp.css */
*[b-sz0kyuql1b] {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', -apple-system, sans-serif;
}

html[b-sz0kyuql1b] {
    scroll-behavior: smooth;
}

body[b-sz0kyuql1b] {
    background: #f0fdf4;
    color: #111827;
    overflow-x: hidden;
}

@keyframes floatIcon-b-sz0kyuql1b {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes dotPing-b-sz0kyuql1b {
    0% {
        box-shadow: 0 0 0 0 rgba(5,150,105,0.7);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(5,150,105,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(5,150,105,0);
    }
}

@keyframes signalPulse-b-sz0kyuql1b {
    0%, 100% {
        opacity: var(--base-opacity,.4);
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

.navbar[b-sz0kyuql1b] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 48px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #d1fae5;
    z-index: 100;
    box-shadow: 0 2px 16px rgba(5,150,105,0.07);
}

    .navbar .brand[b-sz0kyuql1b] {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
    }

    .navbar .brand-texts[b-sz0kyuql1b] {
        display: flex;
        flex-direction: column;
        line-height: 1.15;
    }

    .navbar .brand-name[b-sz0kyuql1b] {
        font-size: 1.25rem;
        font-weight: 800;
        color: #065f46;
        letter-spacing: 0.5px;
    }

    .navbar .brand-imtech[b-sz0kyuql1b] {
        color: #065f46;
        font-weight: 900;
    }

    .navbar .brand-sub[b-sz0kyuql1b] {
        font-size: .72rem;
        font-weight: 700;
        color: #d97706;
        letter-spacing: 2.5px;
        text-transform: uppercase;
    }

    .navbar .brand-icon-wrap[b-sz0kyuql1b] {
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg,#059669,#34d399);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(5,150,105,.3);
    }

    .navbar .nav-links[b-sz0kyuql1b] {
        display: flex;
        gap: 36px;
        list-style: none;
    }

        .navbar .nav-links .nav-link-item[b-sz0kyuql1b] {
            color: #374151;
            text-decoration: none;
            font-size: .9rem;
            font-weight: 600;
            transition: color .2s;
            position: relative;
        }

            .navbar .nav-links .nav-link-item:hover[b-sz0kyuql1b] {
                color: #059669;
            }

    .navbar .nav-right[b-sz0kyuql1b] {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .navbar .nav-cta[b-sz0kyuql1b] {
        padding: 9px 26px;
        border-radius: 30px;
        background: linear-gradient(90deg,#059669,#34d399);
        color: #fff;
        border: none;
        font-size: .9rem;
        font-weight: 700;
        cursor: pointer;
        transition: all .3s;
        box-shadow: 0 4px 12px rgba(5,150,105,.25);
    }

        .navbar .nav-cta:hover[b-sz0kyuql1b] {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(5,150,105,.35);
        }

    .navbar .hamburger[b-sz0kyuql1b] {
        display: none;
        flex-direction: column;
        gap: 5px;
        width: 30px;
        background: none;
        border: none;
        cursor: pointer;
    }

        .navbar .hamburger span[b-sz0kyuql1b] {
            width: 100%;
            height: 2.5px;
            background: #065f46;
            border-radius: 4px;
        }

.hero[b-sz0kyuql1b] {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 40%, #a7f3d0 100%);
    padding: 140px 48px 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    overflow: hidden;
}

.hero-copy[b-sz0kyuql1b] {
    max-width: 600px;
    z-index: 2;
}

.eyebrow[b-sz0kyuql1b] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(5,150,105,.1);
    border: 1px solid rgba(5,150,105,.25);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #059669;
    margin-bottom: 24px;
}

    .eyebrow .dot[b-sz0kyuql1b] {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #059669;
        animation: dotPing-b-sz0kyuql1b 2s infinite;
        display: inline-block;
    }

.hero h1[b-sz0kyuql1b] {
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    margin-bottom: 20px;
    color: #064e3b;
}

    .hero h1 .accent[b-sz0kyuql1b] {
        color: #059669;
    }

.hero p[b-sz0kyuql1b] {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #065f46;
    opacity: .85;
    margin-bottom: 36px;
}

.hero-actions[b-sz0kyuql1b] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-btn[b-sz0kyuql1b] {
    padding: 14px 36px;
    background: #059669;
    color: #fff;
    border: none;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .3s;
    box-shadow: 0 8px 20px rgba(5,150,105,.3);
}

    .hero-btn:hover[b-sz0kyuql1b] {
        background: #047857;
        transform: translateY(-3px);
    }

.hero-btn-outline[b-sz0kyuql1b] {
    padding: 14px 34px;
    background: transparent;
    color: #065f46;
    border: 2px solid #059669;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .3s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

    .hero-btn-outline:hover[b-sz0kyuql1b] {
        background: #059669;
        color: white;
        transform: translateY(-3px);
    }

.signal-art[b-sz0kyuql1b] {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(520px, 48vw);
    height: min(520px, 48vw);
    z-index: 1;
    pointer-events: none;
    opacity: .7;
}

    .signal-art path[b-sz0kyuql1b] {
        transform-origin: bottom right;
        animation: signalPulse-b-sz0kyuql1b 3.5s ease-in-out infinite;
    }

        .signal-art path:nth-child(1)[b-sz0kyuql1b] {
            --base-opacity: .15;
            animation-delay: 0s;
        }

        .signal-art path:nth-child(2)[b-sz0kyuql1b] {
            --base-opacity: .3;
            animation-delay: .2s;
        }

        .signal-art path:nth-child(3)[b-sz0kyuql1b] {
            --base-opacity: .45;
            animation-delay: .4s;
        }

        .signal-art path:nth-child(4)[b-sz0kyuql1b] {
            --base-opacity: .6;
            animation-delay: .6s;
        }

        .signal-art path:nth-child(5)[b-sz0kyuql1b] {
            --base-opacity: .8;
            animation-delay: .8s;
        }

.stats-bar[b-sz0kyuql1b] {
    background: linear-gradient(90deg, #059669, #047857);
    padding: 28px 48px;
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}

.stat-item[b-sz0kyuql1b] {
    text-align: center;
    color: white;
}

    .stat-item .stat-val[b-sz0kyuql1b] {
        font-size: 2rem;
        font-weight: 800;
    }

    .stat-item .stat-lbl[b-sz0kyuql1b] {
        font-size: .82rem;
        opacity: .85;
        font-weight: 600;
        letter-spacing: 1px;
    }

.pricing-section[b-sz0kyuql1b] {
    padding: 100px 48px;
    text-align: center;
    background: #ffffff;
}

    .pricing-section h2[b-sz0kyuql1b] {
        font-size: 2.2rem;
        font-weight: 800;
        color: #064e3b;
        margin-bottom: 10px;
    }

    .pricing-section .sub[b-sz0kyuql1b] {
        color: #6b7280;
        margin-bottom: 50px;
        font-size: 1.05rem;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }

.pricing-cards[b-sz0kyuql1b] {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    max-width: 1100px;
    margin: 0 auto;
}

.pricing-card[b-sz0kyuql1b] {
    background: #f9fafb;
    border: 1.5px solid #d1fae5;
    border-radius: 20px;
    padding: 36px 28px;
    width: 270px;
    text-align: left;
    transition: all .3s;
}

    .pricing-card:hover[b-sz0kyuql1b] {
        transform: translateY(-10px);
        border-color: #059669;
        box-shadow: 0 16px 40px rgba(5,150,105,.15);
    }

    .pricing-card h3[b-sz0kyuql1b] {
        font-size: 1.15rem;
        color: #111827;
        margin-bottom: 8px;
        font-weight: 700;
    }

    .pricing-card .speed[b-sz0kyuql1b] {
        color: #059669;
        font-weight: 700;
        font-size: .85rem;
        margin-bottom: 20px;
        background: #d1fae5;
        padding: 4px 12px;
        border-radius: 12px;
        display: inline-block;
    }

    .pricing-card .price[b-sz0kyuql1b] {
        font-size: 1.9rem;
        font-weight: 800;
        color: #064e3b;
        margin-bottom: 20px;
    }

        .pricing-card .price span[b-sz0kyuql1b] {
            font-size: .85rem;
            color: #9ca3af;
            font-weight: 500;
        }

    .pricing-card ul[b-sz0kyuql1b] {
        list-style: none;
        border-top: 1px solid #e5e7eb;
        padding-top: 18px;
    }

        .pricing-card ul li[b-sz0kyuql1b] {
            font-size: .9rem;
            color: #374151;
            padding: 7px 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }

            .pricing-card ul li[b-sz0kyuql1b]::before {
                content: "✓";
                color: #059669;
                font-weight: 900;
            }

.roles-section[b-sz0kyuql1b] {
    padding: 100px 48px;
    text-align: center;
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
}

    .roles-section h2[b-sz0kyuql1b] {
        font-size: 2.2rem;
        font-weight: 800;
        color: #064e3b;
        margin-bottom: 10px;
    }

    .roles-section .sub[b-sz0kyuql1b] {
        color: #6b7280;
        margin-bottom: 50px;
        font-size: 1.05rem;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }

.role-cards[b-sz0kyuql1b] {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    max-width: 1100px;
    margin: 0 auto;
}

.role-card[b-sz0kyuql1b] {
    background: white;
    border: 1.5px solid #d1fae5;
    border-radius: 20px;
    padding: 32px 24px;
    width: 240px;
    text-align: left;
    transition: all .3s;
    box-shadow: 0 2px 12px rgba(5,150,105,.06);
}

    .role-card:hover[b-sz0kyuql1b] {
        transform: translateY(-8px);
        border-color: #059669;
        box-shadow: 0 16px 36px rgba(5,150,105,.15);
    }

        .role-card:hover .icon[b-sz0kyuql1b] {
            animation: floatIcon-b-sz0kyuql1b 1.2s ease-in-out infinite;
        }

    .role-card .icon[b-sz0kyuql1b] {
        font-size: 2.2rem;
        margin-bottom: 14px;
        display: inline-block;
    }

    .role-card h4[b-sz0kyuql1b] {
        font-size: 1.1rem;
        font-weight: 700;
        color: #111827;
        margin-bottom: 2px;
    }

    .role-card .subtitle[b-sz0kyuql1b] {
        color: #059669;
        font-size: .8rem;
        font-weight: 700;
        margin-bottom: 12px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .role-card p[b-sz0kyuql1b] {
        font-size: .88rem;
        color: #6b7280;
        margin-bottom: 20px;
        line-height: 1.6;
        min-height: 60px;
    }

.btn-login[b-sz0kyuql1b] {
    background: #f0fdf4;
    color: #059669;
    border: 1.5px solid #6ee7b7;
    border-radius: 12px;
    padding: 10px 0;
    width: 100%;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 700;
    transition: all .3s;
}

.role-card:hover .btn-login[b-sz0kyuql1b] {
    background: #059669;
    color: white;
    border-color: transparent;
}

.footer[b-sz0kyuql1b] {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
    color: #a7f3d0;
    text-align: center;
    padding: 60px 48px;
}

    .footer h3[b-sz0kyuql1b] {
        font-size: 1.6rem;
        font-weight: 800;
        margin-bottom: 8px;
        color: #fff;
    }

    .footer p[b-sz0kyuql1b] {
        font-size: .9rem;
        opacity: .7;
    }

    .footer .footer-brand[b-sz0kyuql1b] {
        font-size: .8rem;
        color: #f59e0b;
        font-weight: 700;
        letter-spacing: 2px;
        margin-bottom: 4px;
    }

.reveal[b-sz0kyuql1b] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
}

    .reveal.show[b-sz0kyuql1b] {
        opacity: 1;
        transform: translateY(0);
    }

.delay-1[b-sz0kyuql1b] {
    transition-delay: .1s;
}

.delay-2[b-sz0kyuql1b] {
    transition-delay: .2s;
}

.delay-3[b-sz0kyuql1b] {
    transition-delay: .3s;
}

.delay-4[b-sz0kyuql1b] {
    transition-delay: .4s;
}

@media (max-width: 900px) {
    .hero[b-sz0kyuql1b] {
        flex-direction: column;
        text-align: center;
        padding: 130px 24px 60px;
    }

    .hero-actions[b-sz0kyuql1b] {
        justify-content: center;
    }

    .signal-art[b-sz0kyuql1b] {
        position: relative;
        width: 65vw;
        height: 65vw;
        margin-top: 30px;
    }

    .stats-bar[b-sz0kyuql1b] {
        gap: 32px;
        padding: 24px;
    }
}

@media (max-width:700px) {

    .navbar[b-sz0kyuql1b] {
        padding: 12px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .navbar .brand[b-sz0kyuql1b] {
            flex: 1;
        }

        .navbar .brand-name[b-sz0kyuql1b] {
            font-size: 1.1rem;
        }

        .navbar .brand-sub[b-sz0kyuql1b] {
            font-size: .65rem;
            letter-spacing: 1px;
        }

        .navbar .brand-icon-wrap[b-sz0kyuql1b] {
            width: 42px;
            height: 42px;
        }

        .navbar .nav-right[b-sz0kyuql1b] {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .navbar .nav-cta[b-sz0kyuql1b] {
            padding: 8px 18px;
            font-size: .8rem;
        }

        .navbar .hamburger[b-sz0kyuql1b] {
            display: flex;
            width: 32px;
        }

        .navbar .nav-links[b-sz0kyuql1b] {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            flex-direction: column;
            background: #fff;
            border-top: 1px solid #e5e7eb;
            box-shadow: 0 10px 20px rgba(0,0,0,.08);
        }

            .navbar .nav-links.open[b-sz0kyuql1b] {
                display: flex;
            }

            .navbar .nav-links .nav-link-item[b-sz0kyuql1b] {
                padding: 16px 20px;
            }
}
/* /Components/Pages/Login.razor.rz.scp.css */
html[b-rhu2wyb0ec], body[b-rhu2wyb0ec] {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: "Segoe UI", Tahoma, sans-serif;
}

.page[b-rhu2wyb0ec] {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
    background: #06251c;
}

.bg-layer[b-rhu2wyb0ec] {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 12% 18%, rgba(16,185,129,.28), transparent 35%), radial-gradient(circle at 86% 80%, rgba(110,231,183,.20), transparent 34%), linear-gradient(145deg, #06251c 0%, #0b3d2e 55%, #0d2f24 100%);
}

.mesh[b-rhu2wyb0ec] {
    position: absolute;
    border-radius: 999px;
    filter: blur(60px);
    opacity: .35;
    pointer-events: none;
}

.mesh-1[b-rhu2wyb0ec] {
    width: 280px;
    height: 280px;
    background: rgba(16,185,129,.4);
    top: -70px;
    right: -40px;
}

.mesh-2[b-rhu2wyb0ec] {
    width: 240px;
    height: 240px;
    background: rgba(110,231,183,.3);
    bottom: -70px;
    left: -50px;
}

.card[b-rhu2wyb0ec] {
    width: 100%;
    max-width: 390px;
    background: rgba(255,255,255,.96);
    border: 1px solid #d1fae5;
    border-radius: 14px;
    box-shadow: 0 20px 45px rgba(6,37,28,.4);
    padding: 28px 24px 22px;
    position: relative;
    z-index: 2;
}

.brand[b-rhu2wyb0ec] {
    font-size: 1.55rem;
    font-weight: 700;
    text-align: center;
    color: #0b3d2e;
    margin-bottom: 4px;
    letter-spacing: .02em;
}

.subtitle[b-rhu2wyb0ec] {
    text-align: center;
    font-size: .92rem;
    color: #6b8f7f;
    margin-bottom: 20px;
}

.alert[b-rhu2wyb0ec] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: .9rem;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
}

.field[b-rhu2wyb0ec] {
    margin-bottom: 14px;
}

    .field label[b-rhu2wyb0ec] {
        display: block;
        font-size: .82rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: 6px;
    }

    .field input[b-rhu2wyb0ec] {
        width: 100%;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        padding: 11px 12px;
        font-size: .95rem;
        outline: none;
        background: #fff;
        color: #111827;
        transition: border-color .15s, box-shadow .15s;
    }

        .field input:focus[b-rhu2wyb0ec] {
            border-color: #10b981;
            box-shadow: 0 0 0 3px rgba(16,185,129,.18);
        }

.password-wrap[b-rhu2wyb0ec] {
    position: relative;
}

    .password-wrap input[b-rhu2wyb0ec] {
        padding-right: 48px;
    }

.toggle-pass[b-rhu2wyb0ec] {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #4b5563;
    display: grid;
    place-items: center;
    cursor: pointer;
}

    .toggle-pass:hover[b-rhu2wyb0ec] {
        background: #ecfdf5;
        color: #0b3d2e;
    }

.btn[b-rhu2wyb0ec] {
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: 11px 12px;
    font-size: .95rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    cursor: pointer;
    margin-top: 4px;
    transition: filter .15s, transform .15s, box-shadow .15s;
}

    .btn:hover[b-rhu2wyb0ec] {
        filter: brightness(1.05);
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(16,185,129,.35);
    }

.back[b-rhu2wyb0ec] {
    display: block;
    text-align: center;
    margin-top: 14px;
    font-size: .88rem;
    color: #10b981;
    text-decoration: none;
    font-weight: 500;
}

    .back:hover[b-rhu2wyb0ec] {
        text-decoration: underline;
        color: #059669;
    }

/* /Components/Pages/Staff/StaffBilling.razor.rz.scp.css */
.sub-wrapper[b-zoan1c8gyx] {
    min-height: 100vh;
    background: linear-gradient(179deg, #f4f9f1 4%, #43e97b 24%);
    display: flex;
    flex-direction: column;
}

.topnav[b-zoan1c8gyx] {
    background: white;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #10b981;
    box-shadow: 0 2px 8px rgba(16,185,129,.1);
}

.topnav-left h2[b-zoan1c8gyx] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111;
    margin: 0;
}

.topnav-left p[b-zoan1c8gyx] {
    font-size: .82rem;
    color: #059669;
    margin: 0;
}

.topnav-right[b-zoan1c8gyx] {
    display: flex;
    align-items: center;
}

.page-content[b-zoan1c8gyx] {
    padding: 32px;
    flex: 1;
}

.summary-cards[b-zoan1c8gyx] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.summary-card[b-zoan1c8gyx] {
    background: white;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    border-left: 4px solid #059669;
}

    .summary-card.green[b-zoan1c8gyx] {
        border-left-color: #22c55e;
    }

    .summary-card.orange[b-zoan1c8gyx] {
        border-left-color: #f59e0b;
    }

    .summary-card.blue[b-zoan1c8gyx] {
        border-left-color: #059669;
    }

    .summary-card.red[b-zoan1c8gyx] {
        border-left-color: #dc2626;
        color: #dc2626;
    }

.summary-label[b-zoan1c8gyx] {
    font-size: .8rem;
    color: #888;
    margin-bottom: 4px;
}

.summary-value[b-zoan1c8gyx] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #111;
}

.table-card[b-zoan1c8gyx] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.search-box[b-zoan1c8gyx] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 8px 14px;
    width: 260px;
    background: white;
}

    .search-box input[b-zoan1c8gyx] {
        border: none;
        outline: none;
        font-size: .9rem;
        width: 100%;
    }

.sub-table[b-zoan1c8gyx] {
    width: 100%;
    border-collapse: collapse;
}

    .sub-table thead tr[b-zoan1c8gyx] {
        border-bottom: 2px solid #f3f4f6;
    }

    .sub-table th[b-zoan1c8gyx] {
        text-align: left;
        padding: 10px 12px;
        font-size: .82rem;
        color: #888;
        font-weight: 600;
        white-space: nowrap;
    }

    .sub-table td[b-zoan1c8gyx] {
        padding: 14px 12px;
        border-bottom: 1px solid #f3f4f6;
        font-size: .9rem;
        color: #333;
    }

    .sub-table tbody tr:hover[b-zoan1c8gyx] {
        background: #fafafa;
    }

.status-badge[b-zoan1c8gyx] {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
}

.badge-paid[b-zoan1c8gyx] {
    background: #d1fae5;
    color: #059669;
}

.badge-pending[b-zoan1c8gyx] {
    background: #fef3c7;
    color: #d97706;
}

.badge-overdue[b-zoan1c8gyx] {
    background: #fee2e2;
    color: #dc2626;
}

.action-btn[b-zoan1c8gyx] {
    border: 1px solid #e5e7eb;
    background: white;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: .2s;
    font-size: .9rem;
}

.edit-btn:hover[b-zoan1c8gyx] {
    background: #f0f0ff;
    border-color: #059669;
    color: #059669;
}

.delete-btn:hover[b-zoan1c8gyx] {
    background: #fff0f0;
    border-color: #ef4444;
    color: #ef4444;
}

.modal-backdrop-custom[b-zoan1c8gyx] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1040;
}

.modal-box[b-zoan1c8gyx] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 16px;
    padding: 2rem;
    width: 620px;
    max-width: 95vw;
    z-index: 1050;
    max-height: 90vh;
    overflow-y: auto;
}

@media (max-width: 800px) {
    .summary-cards[b-zoan1c8gyx] {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-content[b-zoan1c8gyx] {
        padding: 70px 12px 12px 12px;
    }
}


/* -- Bill Cards -- */
.bills-section[b-zoan1c8gyx] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.bills-grid[b-zoan1c8gyx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

.bill-card[b-zoan1c8gyx] {
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    transition: box-shadow .2s, transform .2s;
}

    .bill-card:hover[b-zoan1c8gyx] {
        box-shadow: 0 6px 20px rgba(0,0,0,.08);
        transform: translateY(-3px);
    }

    .bill-card.bill-overdue[b-zoan1c8gyx] {
        border-color: #fca5a5;
        background: #fff8f8;
    }

    .bill-card.bill-paid[b-zoan1c8gyx] {
        border-color: #86efac;
        background: #f0fdf4;
    }

.bill-badge[b-zoan1c8gyx] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 700;
    align-self: flex-start;
}

.bill-subscriber[b-zoan1c8gyx] {
    font-size: 1rem;
    font-weight: 700;
    color: #111;
}

.bill-id[b-zoan1c8gyx] {
    font-size: .8rem;
}

.bill-amount[b-zoan1c8gyx] {
    font-size: 1.4rem;
    font-weight: 800;
    color: #111;
}

    .bill-amount span[b-zoan1c8gyx] {
        font-size: .8rem;
        font-weight: 400;
        color: #888;
    }

.bill-meta[b-zoan1c8gyx] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: .83rem;
    color: #555;
    flex: 1;
}

.bill-desc[b-zoan1c8gyx] {
    color: #888;
    font-style: italic;
}

.bill-actions[b-zoan1c8gyx] {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.bill-action-btn[b-zoan1c8gyx] {
    flex: 1;
    padding: 7px;
    border-radius: 8px;
    border: 1.5px solid #e5e7eb;
    background: white;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

    .bill-action-btn.edit-btn:hover[b-zoan1c8gyx] {
        background: #f0f0ff;
        border-color: #059669;
        color: #059669;
    }

    .bill-action-btn.delete-btn:hover[b-zoan1c8gyx] {
        background: #fff0f0;
        border-color: #ef4444;
        color: #ef4444;
    }

.bills-empty[b-zoan1c8gyx] {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
}

.paid-btn[b-zoan1c8gyx] {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

    .paid-btn:hover[b-zoan1c8gyx] {
        background: #dcfce7;
        border-color: #16a34a;
    }
/* /Components/Pages/Staff/StaffDashboard.razor.rz.scp.css */
*[b-gh739bnne4] {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', sans-serif;
}

.wrapper[b-gh739bnne4] {
    min-height: 100vh;
    background: linear-gradient(179deg, #f4f9f1 4%, #43e97b 24%);
    overflow-x: hidden;
}

/* TOP NAV */
.topnav[b-gh739bnne4] {
    background: white;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #10b981;
    box-shadow: 0 2px 8px rgba(16,185,129,.1);
    gap: 20px;
    flex-wrap: wrap;
}

.topnav-left h2[b-gh739bnne4] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111;
}

.topnav-left p[b-gh739bnne4] {
    font-size: .82rem;
    color: #059669;
}

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

/* Logout button (single definition only) */
.logout-btn[b-gh739bnne4] {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    color: #fff;
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: .2s ease;
}

    .logout-btn:hover[b-gh739bnne4] {
        background: linear-gradient(135deg, #059669, #047857);
        transform: translateY(-1px);
    }

.notif-dot[b-gh739bnne4] {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    background: red;
    border-radius: 50%;
}

.avatar[b-gh739bnne4] {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

/* CONTENT */
.content[b-gh739bnne4] {
    padding: 32px;
}

    .content h1[b-gh739bnne4] {
        font-size: 2rem;
        font-weight: 800;
        margin-bottom: 24px;
        color: #111;
    }

/* STAT CARDS */
.stat-cards[b-gh739bnne4] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.stat-card[b-gh739bnne4] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    box-shadow: 0 2px 10px rgba(16, 185, 129, .08);
    min-width: 0;
    border: 1px solid #f0fdf4;
}

    .stat-card .label[b-gh739bnne4] {
        font-size: .82rem;
        color: #888;
        margin-bottom: 6px;
    }

    .stat-card .value[b-gh739bnne4] {
        font-size: 2rem;
        font-weight: 800;
        color: #111;
        margin-bottom: 6px;
    }

    .stat-card .trend[b-gh739bnne4] {
        font-size: .8rem;
        color: #22c55e;
        font-weight: 600;
    }

.stat-icon[b-gh739bnne4] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.icon-blue[b-gh739bnne4] {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
}

.icon-green[b-gh739bnne4] {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
}

.icon-orange[b-gh739bnne4] {
    background: linear-gradient(135deg, #f0fdfa, #ccfbf1);
}

/* GRID */
.bottom-grid[b-gh739bnne4] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* CARD */
.card[b-gh739bnne4] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 10px rgba(16, 185, 129, .08);
    border: 1px solid #f0fdf4;
}

/* table scroll wrapper */
.table-wrap[b-gh739bnne4] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.card-title[b-gh739bnne4] {
    font-size: 1rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 4px;
}

.card-sub[b-gh739bnne4] {
    font-size: .82rem;
    color: #aaa;
    margin-bottom: 16px;
}

/* TABLE */
table[b-gh739bnne4] {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

thead tr[b-gh739bnne4] {
    background: #f0fdf4;
}

th[b-gh739bnne4] {
    text-align: left;
    padding: 12px;
    font-size: .82rem;
    color: #065f46;
}

td[b-gh739bnne4] {
    padding: 14px 12px;
    border-bottom: 1px solid #f3f4f6;
    color: #333;
}

.badge[b-gh739bnne4] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
}

/* NOTIFICATIONS */
.notif-item[b-gh739bnne4] {
    padding: 14px 0;
    border-bottom: 1px solid #f3f4f6;
}

    .notif-item:last-of-type[b-gh739bnne4] {
        border-bottom: none;
    }

    .notif-item p[b-gh739bnne4] {
        font-size: .9rem;
        color: #222;
        font-weight: 500;
        margin-bottom: 4px;
        line-height: 1.4;
    }

    .notif-item span[b-gh739bnne4] {
        font-size: .78rem;
        color: #aaa;
    }

.view-all-btn[b-gh739bnne4] {
    width: 100%;
    margin-top: 18px;
    padding: 11px;
    background: white;
    border: 1px solid #d1fae5;
    border-radius: 10px;
    font-weight: 600;
    color: #059669;
    cursor: pointer;
    transition: .2s;
}

    .view-all-btn:hover[b-gh739bnne4] {
        background: #f0fdf4;
    }

/* RESPONSIVE */
@media (max-width: 1100px) {
    .stat-cards[b-gh739bnne4] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .topnav[b-gh739bnne4] {
        padding: 12px 16px;
        flex-direction: column;
        align-items: flex-start;
    }

    .topnav-right[b-gh739bnne4] {
        width: 100%;
        justify-content: flex-end;
    }

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

        .content h1[b-gh739bnne4] {
            font-size: 1.5rem;
        }

    .stat-cards[b-gh739bnne4] {
        grid-template-columns: 1fr;
    }

    .stat-card[b-gh739bnne4] {
        padding: 16px;
    }

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

    table[b-gh739bnne4] {
        min-width: 600px;
    }
}
/* /Components/Pages/Staff/StaffInternetPlans.razor.rz.scp.css */
.sub-wrapper[b-95xgrw9hao] {
    min-height: 100vh;
    background: linear-gradient(179deg, #f4f9f1 4%, #43e97b 24%);
    display: flex;
    flex-direction: column;
}

.topnav[b-95xgrw9hao] {
    background: white;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #10b981;
    box-shadow: 0 2px 8px rgba(16,185,129,.1);
}

.topnav-left h2[b-95xgrw9hao] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111;
    margin: 0;
}

.topnav-left p[b-95xgrw9hao] {
    font-size: .82rem;
    color: #059669;
    margin: 0;
}

.topnav-right[b-95xgrw9hao] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.page-content[b-95xgrw9hao] {
    padding: 32px;
    flex: 1;
}

.table-card[b-95xgrw9hao] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.sub-table[b-95xgrw9hao] {
    width: 100%;
    border-collapse: collapse;
}

    .sub-table thead tr[b-95xgrw9hao] {
        border-bottom: 2px solid #f3f4f6;
    }

    .sub-table th[b-95xgrw9hao] {
        text-align: left;
        padding: 10px 12px;
        font-size: .82rem;
        color: #888;
        font-weight: 600;
    }

    .sub-table td[b-95xgrw9hao] {
        padding: 14px 12px;
        border-bottom: 1px solid #f3f4f6;
        font-size: .9rem;
        color: #333;
    }

    .sub-table tbody tr:hover[b-95xgrw9hao] {
        background: #fafafa;
    }

.status-badge[b-95xgrw9hao] {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
}

.badge-active[b-95xgrw9hao] {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: white;
}

.badge-inactive[b-95xgrw9hao] {
    background: #f3f4f6;
    color: #888;
}

.action-btn[b-95xgrw9hao] {
    border: 1px solid #e5e7eb;
    background: white;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: .2s;
    font-size: .9rem;
}

.edit-btn:hover[b-95xgrw9hao] {
    background: #f0f0ff;
    border-color: #059669;
    color: #059669;
}

.delete-btn:hover[b-95xgrw9hao] {
    background: #fff0f0;
    border-color: #ef4444;
    color: #ef4444;
}

.modal-backdrop-custom[b-95xgrw9hao] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1040;
}

.modal-box[b-95xgrw9hao] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 16px;
    padding: 2rem;
    width: 620px;
    max-width: 95vw;
    z-index: 1050;
    max-height: 90vh;
    overflow-y: auto;
}
/* /Components/Pages/Staff/StaffNotifications.razor.rz.scp.css */
.sub-wrapper[b-95dbzcd1fp] {
    min-height: 100vh;
    background: linear-gradient(179deg, #f4f9f1 4%, #43e97b 24%);
    display: flex;
    flex-direction: column;
}

.topnav[b-95dbzcd1fp] {
    background: white;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #10b981;
    box-shadow: 0 2px 8px rgba(16,185,129,.1);
}

.topnav-left h2[b-95dbzcd1fp] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111;
    margin: 0;
}

.topnav-left p[b-95dbzcd1fp] {
    font-size: .82rem;
    color: #059669;
    margin: 0;
}

.page-content[b-95dbzcd1fp] {
    padding: 32px;
    flex: 1;
}

.form-card[b-95dbzcd1fp] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.form-card-title[b-95dbzcd1fp] {
    font-size: 1rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 20px;
}

.table-card[b-95dbzcd1fp] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.sub-table[b-95dbzcd1fp] {
    width: 100%;
    border-collapse: collapse;
}

    .sub-table thead tr[b-95dbzcd1fp] {
        border-bottom: 2px solid #f3f4f6;
    }

    .sub-table th[b-95dbzcd1fp] {
        text-align: left;
        padding: 10px 12px;
        font-size: .82rem;
        color: #888;
        font-weight: 600;
    }

    .sub-table td[b-95dbzcd1fp] {
        padding: 14px 12px;
        border-bottom: 1px solid #f3f4f6;
        font-size: .88rem;
        color: #333;
        vertical-align: middle;
    }

    .sub-table tbody tr:hover[b-95dbzcd1fp] {
        background: #fafafa;
    }

.status-badge[b-95dbzcd1fp] {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 700;
}

.badge-read[b-95dbzcd1fp] {
    background: #d1fae5;
    color: #059669;
}

.badge-unread[b-95dbzcd1fp] {
    background: #fef3c7;
    color: #d97706;
}

.btn-template[b-95dbzcd1fp] {
    background: #f3f4f6;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: .2s;
}

    .btn-template:hover[b-95dbzcd1fp] {
        background: #eef2ff;
        border-color: #059669;
        color: #059669;
    }

@media (max-width: 800px) {
    .page-content[b-95dbzcd1fp] {
        padding: 70px 12px 12px;
    }
}
/* /Components/Pages/Staff/StaffServiceRequests.razor.rz.scp.css */
.sub-wrapper[b-flcb41dk5v] {
    padding: 0;
    min-height: 100vh;
    background: linear-gradient(179deg, #f4f9f1 4%, #43e97b 24%);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.topnav[b-flcb41dk5v] {
    background: white;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    border-bottom: 3px solid #10b981;
    box-shadow: 0 2px 8px rgba(16,185,129,.1);
}

.topnav-left h2[b-flcb41dk5v] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 4px;
}

.topnav-left p[b-flcb41dk5v] {
    color: #059669;
    margin: 0;
    font-size: .9rem;
}

.page-content[b-flcb41dk5v] {
    flex: 1;
    padding: 20px;
    overflow-x: auto;
}

/* Summary Cards */
.summary-cards[b-flcb41dk5v] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.summary-card[b-flcb41dk5v] {
    background: white;
    border-radius: 14px;
    padding: 18px 22px;
    border: 1px solid #e5e7eb;
}

    .summary-card.green[b-flcb41dk5v] {
        border-left: 4px solid #16a34a;
    }

    .summary-card.orange[b-flcb41dk5v] {
        border-left: 4px solid #ea580c;
    }

    .summary-card.blue[b-flcb41dk5v] {
        border-left: 4px solid #059669;
    }

    .summary-card.red[b-flcb41dk5v] {
        border-left: 4px solid #dc2626;
    }

.summary-label[b-flcb41dk5v] {
    font-size: .8rem;
    color: #888;
    margin-bottom: 6px;
}

.summary-value[b-flcb41dk5v] {
    font-size: 1.8rem;
    font-weight: 800;
    color: #111;
}

/* Table */
.table-card[b-flcb41dk5v] {
    background: white;
    border-radius: 14px;
    padding: 20px;
    border: 1px solid #e5e7eb;
    overflow-x: auto;
}

.search-box[b-flcb41dk5v] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 12px;
    width: 100%;
    max-width: 320px;
}

    .search-box input[b-flcb41dk5v] {
        border: none;
        background: transparent;
        outline: none;
        width: 100%;
    }

.sub-table[b-flcb41dk5v] {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    font-size: .9rem;
}

    .sub-table thead tr[b-flcb41dk5v] {
        border-bottom: 2px solid #f3f4f6;
    }

    .sub-table th[b-flcb41dk5v] {
        padding: 10px 14px;
        font-size: .78rem;
        font-weight: 700;
        color: #888;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .sub-table td[b-flcb41dk5v] {
        padding: 12px 14px;
        color: #374151;
        vertical-align: middle;
    }

    .sub-table tbody tr[b-flcb41dk5v] {
        border-bottom: 1px solid #f3f4f6;
        transition: .2s;
    }

        .sub-table tbody tr:hover[b-flcb41dk5v] {
            background: #fafafa;
        }

/* Badges */
.status-badge[b-flcb41dk5v] {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 700;
}

.badge-paid[b-flcb41dk5v] {
    background: #d1fae5;
    color: #059669;
}

.badge-pending[b-flcb41dk5v] {
    background: #fef3c7;
    color: #d97706;
}

.badge-overdue[b-flcb41dk5v] {
    background: #fee2e2;
    color: #dc2626;
}

.badge-inprogress[b-flcb41dk5v] {
    background: #ede9fe;
    color: #7c3aed;
}

/* Buttons */
.action-btn[b-flcb41dk5v] {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.edit-btn[b-flcb41dk5v] {
    background: #f0fdf4;
    color: #059669;
}

    .edit-btn:hover[b-flcb41dk5v] {
        background: #d1fae5;
    }

/* Modal */
.modal-backdrop-custom[b-flcb41dk5v] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1040;
}

.modal-box[b-flcb41dk5v] {
    position: fixed;
    top: 55%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 480px;
    max-width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    background: white;
    border-radius: 16px;
    padding: 24px;
    z-index: 1050;
}

/* Responsive */
@media (max-width:768px) {

    .page-content[b-flcb41dk5v] {
        padding: 15px;
    }

    .topnav[b-flcb41dk5v] {
        flex-direction: column;
        align-items: flex-start;
    }

    .summary-value[b-flcb41dk5v] {
        font-size: 1.5rem;
    }

    .table-card[b-flcb41dk5v] {
        padding: 15px;
    }

    .search-box[b-flcb41dk5v] {
        max-width: 100%;
    }

    .sub-table[b-flcb41dk5v] {
        min-width: 700px;
    }

    .modal-box[b-flcb41dk5v] {
        width: 95%;
        padding: 18px;
    }

    .table-card .d-flex[b-flcb41dk5v] {
        flex-wrap: wrap;
        gap: 10px;
    }
}

@media (max-width:480px) {

    .page-content[b-flcb41dk5v] {
        padding: 10px;
    }

    .summary-cards[b-flcb41dk5v] {
        grid-template-columns: 1fr;
    }

    .topnav-left h2[b-flcb41dk5v] {
        font-size: 1rem;
    }

    .topnav-left p[b-flcb41dk5v] {
        font-size: .8rem;
    }

    .summary-value[b-flcb41dk5v] {
        font-size: 1.3rem;
    }

    .sub-table[b-flcb41dk5v] {
        min-width: 600px;
    }

    .modal-box[b-flcb41dk5v] {
        width: 96%;
        padding: 16px;
    }
}
/* /Components/Pages/Staff/StaffSubscriber.razor.rz.scp.css */
.sub-wrapper[b-c4uo04xjec] {
    min-height: 100vh;
    background: linear-gradient(179deg, #f4f9f1 4%, #43e97b 24%);
    display: flex;
    flex-direction: column;
}

.topnav[b-c4uo04xjec] {
    background: white;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #10b981;
    box-shadow: 0 2px 8px rgba(16,185,129,.1);
}

.topnav-left h2[b-c4uo04xjec] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111;
    margin: 0;
}

.topnav-left p[b-c4uo04xjec] {
    font-size: .82rem;
    color: #059669;
    margin: 0;
}

.topnav-right[b-c4uo04xjec] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.avatar[b-c4uo04xjec] {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #065f46, #10b981);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.page-content[b-c4uo04xjec] {
    padding: 32px;
    flex: 1;
}

.table-card[b-c4uo04xjec] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(16, 185, 129, .08);
    border: 1px solid #e6f7ef;
}

.search-box[b-c4uo04xjec] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #d1fae5;
    border-radius: 10px;
    padding: 8px 14px;
    width: 260px;
    background: #f7fefb;
    transition: border-color .2s, box-shadow .2s;
}

    .search-box:focus-within[b-c4uo04xjec] {
        border-color: #10b981;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
    }

    .search-box input[b-c4uo04xjec] {
        border: none;
        outline: none;
        font-size: .9rem;
        width: 100%;
        color: #333;
        background: transparent;
    }

.sub-table[b-c4uo04xjec] {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

    .sub-table thead tr[b-c4uo04xjec] {
        border-bottom: 2px solid #e6f7ef;
    }

    .sub-table th[b-c4uo04xjec] {
        text-align: left;
        padding: 10px 12px;
        font-size: .82rem;
        color: #888;
        font-weight: 700;
        white-space: nowrap;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    .sub-table td[b-c4uo04xjec] {
        padding: 14px 12px;
        border-bottom: 1px solid #f0faf5;
        font-size: .9rem;
        color: #333;
        white-space: nowrap;
    }

    .sub-table tbody tr[b-c4uo04xjec] {
        transition: background .15s;
    }

        .sub-table tbody tr:hover[b-c4uo04xjec] {
            background: #f2fdf8;
        }

    .sub-table th:first-child[b-c4uo04xjec], .sub-table td:first-child[b-c4uo04xjec] {
        width: 80px;
    }

    .sub-table th:last-child[b-c4uo04xjec], .sub-table td:last-child[b-c4uo04xjec] {
        width: 96px;
    }

.status-badge[b-c4uo04xjec] {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
}

.badge-active[b-c4uo04xjec] {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: white;
}

.badge-expired[b-c4uo04xjec] {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: white;
}

.badge-inactive[b-c4uo04xjec] {
    background-color: #eef2f0;
    color: #8a938d;
}

.row-id-thumb[b-c4uo04xjec] {
    width: 60px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid #d1fae5;
}

.row-id-placeholder[b-c4uo04xjec] {
    width: 60px;
    height: 40px;
    border-radius: 6px;
    background: #f0faf5;
    color: #9ecbb0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    font-weight: 600;
    border: 1px dashed #b7e6cc;
}

.id-preview[b-c4uo04xjec] {
    width: 100%;
    max-width: 340px;
    max-height: 220px;
    border-radius: 10px;
    object-fit: contain;
    border: 1px solid #d1fae5;
    background: #fafffc;
    display: block;
    margin: 0 auto;
}

.id-preview-placeholder[b-c4uo04xjec] {
    width: 100%;
    max-width: 340px;
    height: 140px;
    border-radius: 10px;
    background: #f0faf5;
    color: #6b9d80;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    margin: 0 auto;
    border: 1px dashed #b7e6cc;
}

.action-btn[b-c4uo04xjec] {
    border: 1px solid #d1fae5;
    background: white;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: .2s;
    font-size: .9rem;
}

.edit-btn:hover[b-c4uo04xjec] {
    background: #f0fdf6;
    border-color: #10b981;
    color: #0f9b6c;
}

.delete-btn:hover[b-c4uo04xjec] {
    background: #fff0f0;
    border-color: #ef4444;
    color: #ef4444;
}

.modal-backdrop-custom[b-c4uo04xjec] {
    position: fixed;
    inset: 0;
    background: rgba(6, 78, 59, 0.45);
    z-index: 1040;
}

.modal-box[b-c4uo04xjec] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 16px;
    padding: 2rem;
    width: 680px;
    max-width: 95vw;
    z-index: 1050;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    border-top: 4px solid #10b981;
}

/* Lightbox */
.lightbox-backdrop[b-c4uo04xjec] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    animation: fadeIn-b-c4uo04xjec .15s ease;
}

.lightbox-container[b-c4uo04xjec] {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-img[b-c4uo04xjec] {
    max-width: 90vw;
    max-height: 88vh;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    object-fit: contain;
}

.lightbox-close[b-c4uo04xjec] {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 36px;
    height: 36px;
    background: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #333;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: background .15s;
    z-index: 2001;
}

    .lightbox-close:hover[b-c4uo04xjec] {
        background: #f0fdf6;
    }

@keyframes fadeIn-b-c4uo04xjec {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* Table container */
.table-responsive[b-c4uo04xjec] {
    width: 100%;
    overflow-x: auto;
}

/* Search */
.search-box[b-c4uo04xjec] {
    width: 100%;
    max-width: 260px;
}

/* Table */
.sub-table[b-c4uo04xjec] {
    width: 100%;
    min-width: 900px; /* adjust kung ilan columns mo */
    border-collapse: collapse;
}

/* Para hindi lumabas sa card */
.table-card[b-c4uo04xjec] {
    overflow-x: auto;
}

/* Responsive */
@media (max-width: 768px) {

    .page-content[b-c4uo04xjec] {
        padding: 16px;
    }

    .topnav[b-c4uo04xjec] {
        padding: 12px 16px;
    }

    .search-box[b-c4uo04xjec] {
        max-width: 100%;
    }

    .modal-box[b-c4uo04xjec] {
        width: 95%;
        padding: 1.2rem;
    }
}
/* /Components/Pages/Subscriber/SubBilling.razor.rz.scp.css */
 /* ===== Page Wrapper ===== */
.plans-wrapper[b-im7cmyss46] {
    padding: 32px;
    background: linear-gradient(179deg, #f4f9f1 4%, #43e97b 24%);
    min-height: 100vh;

}

/* White topnav style for billing header */
.plans-header[b-im7cmyss46] {
    background: white;
    padding: 16px 32px;
    border-bottom: 3px solid #10b981;
    box-shadow: 0 2px 8px rgba(16,185,129,.1);
    margin: -32px -32px 24px -32px;
}

    .plans-header h3[b-im7cmyss46] {
        color: #111;
        margin: 0;
        font-size: 1.2rem;
        font-weight: 700;
    }

    .plans-header p[b-im7cmyss46] {
        color: #059669;
        margin: 0;
        font-size: .82rem;
    }

/* ===== Current Bill Banner (same feel as internet plans) ===== */
.current-plan-banner[b-im7cmyss46] {
    background: #eef4ff;
    border: 1px solid #c7dcff;
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.current-plan-label[b-im7cmyss46] {
    font-size: .78rem;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 4px;
}

.current-plan-name[b-im7cmyss46] {
    font-size: 1.06rem;
    font-weight: 700;
    color: #1e293b;
}

.current-plan-price[b-im7cmyss46] {
    font-size: .95rem;
    color: #334155;
    margin-top: 2px;
}

.badge-pending-plan[b-im7cmyss46] {
    display: inline-flex;
    align-items: center;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: .75rem;
    font-weight: 700;
}

/* ===== Reusable Buttons (same naming as internet plans) ===== */
.btn-plan[b-im7cmyss46] {
    border: none;
    border-radius: 10px;
    padding: 9px 16px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
}

.btn-plan-switch[b-im7cmyss46] {
    background: #059669;
    color: #fff;
}

    .btn-plan-switch:hover[b-im7cmyss46] {
        opacity: .92;
        transform: translateY(-1px);
    }

/* ===== Table Card ===== */
.table-card[b-im7cmyss46] {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

.sub-table[b-im7cmyss46] {
    width: 100%;
    border-collapse: collapse;
}

    .sub-table thead tr[b-im7cmyss46] {
        border-bottom: 2px solid #f3f4f6;
    }

    .sub-table th[b-im7cmyss46] {
        text-align: left;
        padding: 10px 12px;
        font-size: .82rem;
        color: #888;
        font-weight: 600;
        white-space: nowrap;
    }

    .sub-table td[b-im7cmyss46] {
        padding: 14px 12px;
        border-bottom: 1px solid #f3f4f6;
        font-size: .9rem;
        color: #333;
    }

    .sub-table tbody tr:hover[b-im7cmyss46] {
        background: #fafafa;
    }

/* ===== Status Badges ===== */
.status-badge[b-im7cmyss46] {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
}

.badge-paid[b-im7cmyss46] {
    background: #d1fae5;
    color: #059669;
}

.badge-pending[b-im7cmyss46] {
    background: #fef3c7;
    color: #d97706;
}

.badge-overdue[b-im7cmyss46] {
    background: #fee2e2;
    color: #dc2626;
}

/* ===== Submitted Badge ===== */
.badge-submitted[b-im7cmyss46] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fef9c3;
    color: #854d0e;
    border: 1px solid #fde047;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ===== Modal ===== */
.modal-backdrop-custom[b-im7cmyss46] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1040;
}

.modal-box[b-im7cmyss46] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 16px;
    padding: 2rem;
    width: 500px;
    max-width: 95vw;
    z-index: 1050;
    max-height: 90vh;
    overflow-y: auto;
}

/* ===== Responsive ===== */
@media (max-width: 800px) {
    .plans-wrapper[b-im7cmyss46] {
        padding: 70px 16px 16px 16px;
    }

    .current-plan-banner[b-im7cmyss46] {
        padding: 14px;
    }

    .table-card[b-im7cmyss46] {
        padding: 14px;
    }
    .plans-header[b-im7cmyss46] {
        margin: -70px -32px 24px -32px;
    }
}
/* /Components/Pages/Subscriber/SubDashboard.razor.rz.scp.css */
.dashboard-container[b-4kmeujdscc] {
    min-height: 100vh;
    background: linear-gradient(179deg, #f4f9f1 4%, #43e97b 24%);
    display: flex;
    flex-direction: column;
}

.dashboard-topnav[b-4kmeujdscc] {
    background: white;
    padding: 16px 32px;
    border-bottom: 3px solid #10b981;
    box-shadow: 0 2px 8px rgba(16,185,129,.1);
}

    .dashboard-topnav h2[b-4kmeujdscc] {
        font-size: 1.2rem;
        font-weight: 700;
        color: #111;
        margin: 0;
    }

    .dashboard-topnav p[b-4kmeujdscc] {
        font-size: .82rem;
        color: #059669;
        margin: 0;
    }

.dashboard-content[b-4kmeujdscc] {
    padding: 20px;
    flex: 1;
}

.dashboard-header[b-4kmeujdscc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 10px;
}

    .dashboard-header h2[b-4kmeujdscc] {
        font-weight: 700;
        margin: 0;
        font-size: 1.35rem;
    }

.sub-text[b-4kmeujdscc] {
    color: #6c757d;
    margin-top: 3px;
    font-size: .88rem;
}

.logout-btn[b-4kmeujdscc] {
    background: #dc3545;
    border: none;
    color: white;
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: .85rem;
    transition: 0.25s;
}

    .logout-btn:hover[b-4kmeujdscc] {
        background: #bb2d3b;
    }

/* cards */
.cards-grid[b-4kmeujdscc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.dashboard-card[b-4kmeujdscc] {
    background: white;
    padding: 14px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
    transition: 0.2s;
}

    .dashboard-card:hover[b-4kmeujdscc] {
        transform: translateY(-2px);
    }

.card-icon[b-4kmeujdscc] {
    font-size: 24px;
    margin-bottom: 6px;
}

.dashboard-card h5[b-4kmeujdscc] {
    color: #6c757d;
    margin-bottom: 4px;
    font-size: .82rem;
    font-weight: 600;
}

.dashboard-card h3[b-4kmeujdscc] {
    font-weight: 700;
    margin-bottom: 2px;
    font-size: 1.1rem;
}

/* section */
.subscription-section[b-4kmeujdscc] {
    background: white;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
}

.section-header[b-4kmeujdscc] {
    margin-bottom: 12px;
}

    .section-header h4[b-4kmeujdscc] {
        font-weight: 700;
        font-size: 1rem;
        margin: 0;
    }

/* detail boxes */
.details-grid[b-4kmeujdscc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}

.detail-box[b-4kmeujdscc] {
    background: #f8f9fc;
    padding: 12px;
    border-radius: 10px;
}

    .detail-box span[b-4kmeujdscc] {
        display: block;
        color: #6c757d;
        margin-bottom: 4px;
        font-size: .78rem;
    }

    .detail-box strong[b-4kmeujdscc] {
        font-size: .95rem;
        font-weight: 700;
    }

.status-active[b-4kmeujdscc] {
    color: #198754;
}

.status-duedate[b-4kmeujdscc] {
    color: #d97706;
}

.status-inactive[b-4kmeujdscc] {
    color: #6b7280;
}

/* Fix blue icon */
.card-checklist[b-4kmeujdscc] {
    font-size: 24px;
    margin-bottom: 6px;
    display: block;
    color: #059669 !important;
}

/* ===== Responsive (merged into one block) ===== */
@media (max-width: 768px) {
    /* NOTE: no padding here on purpose. .dashboard-container wraps both the
       topnav and the content — giving IT padding insets the topnav too and
       breaks its full-bleed white bar look on mobile. Padding belongs on
       .dashboard-content only (below), never on the container. */

    .dashboard-topnav[b-4kmeujdscc] {
        padding: 12px 16px;
    }

    .dashboard-content[b-4kmeujdscc] {
        padding: 12px;
    }

    .dashboard-header[b-4kmeujdscc] {
        flex-direction: column;
        align-items: flex-start;
    }

        .dashboard-header h2[b-4kmeujdscc] {
            font-size: 1.15rem;
        }

    .logout-btn[b-4kmeujdscc] {
        width: 100%;
        font-size: .82rem;
    }

    .cards-grid[b-4kmeujdscc] {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}
/* /Components/Pages/Subscriber/SubInternetPlans.razor.rz.scp.css */
.plans-wrapper[b-f0br280k62] {
    padding: 32px;
    background: linear-gradient(179deg, #f4f9f1 4%, #43e97b 24%);
    min-height: 100vh;
}

.header[b-f0br280k62] {
    background: white;
    padding: 16px 32px;
    border-bottom: 3px solid #10b981;
    box-shadow: 0 2px 8px rgba(16,185,129,.1);
    margin: -32px -32px 24px -32px;
}

    .header h3[b-f0br280k62] {
        color: #111;
        margin: 0;
        font-size: 1.2rem;
        font-weight: 700;
    }

    .header p[b-f0br280k62] {
        color: #059669;
        margin: 0;
        font-size: .82rem;
    }

/* ── Current Plan Banner ── */
.current-plan-banner[b-f0br280k62] {
    background: white;
    border: 1.5px solid #a7f3d0;
    border-radius: 14px;
    padding: 20px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.current-plan-label[b-f0br280k62] {
    font-size: .8rem;
    color: #059669;
    font-weight: 600;
    margin-bottom: 4px;
}

.current-plan-name[b-f0br280k62] {
    font-size: 1.4rem;
    font-weight: 800;
    color: #111;
}

.current-plan-price[b-f0br280k62] {
    font-size: .88rem;
    color: #059669;
    font-weight: 500;
    margin-top: 2px;
}

.current-plan-status[b-f0br280k62] {
    background: #059669;
    color: white;
    font-size: .75rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
}

/* ── Cards Grid ── */
.plans-grid[b-f0br280k62] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.plan-card[b-f0br280k62] {
    background: white;
    border: 1.5px solid #e5e7eb;
    border-radius: 16px;
    padding: 28px 22px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow .2s, transform .2s;
}

    .plan-card:hover[b-f0br280k62] {
        box-shadow: 0 8px 28px rgba(5,150,105,.15);
        transform: translateY(-4px);
    }

.plan-current[b-f0br280k62] {
    border: 2px solid #059669;
    box-shadow: 0 4px 20px rgba(5,150,105,.15);
}

/* ── Top Badges ── */
.plan-top-badges[b-f0br280k62] {
    display: flex;
    justify-content: center;
    gap: 6px;
    min-height: 22px;
    margin-bottom: 4px;
}

.badge-current-plan[b-f0br280k62] {
    background: #059669;
    color: white;
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
}

.badge-pending-plan[b-f0br280k62] {
    background: #f59e0b;
    color: white;
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
}

/* ── Plan Info ── */
.plan-name[b-f0br280k62] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111;
    text-align: center;
}

.plan-speed-display[b-f0br280k62] {
    text-align: center;
    line-height: 1.1;
}

.speed-number[b-f0br280k62] {
    font-size: 2rem;
    font-weight: 800;
    color: #059669;
}

.speed-unit[b-f0br280k62] {
    font-size: 1rem;
    font-weight: 500;
    color: #059669;
}

.plan-price-display[b-f0br280k62] {
    font-size: 1.4rem;
    font-weight: 800;
    color: #111;
    text-align: center;
}

.price-period[b-f0br280k62] {
    font-size: .82rem;
    font-weight: 400;
    color: #888;
}

/* ── Features ── */
.plan-features[b-f0br280k62] {
    list-style: none;
    padding: 0;
    margin: 4px 0 8px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
}

    .plan-features li[b-f0br280k62] {
        font-size: .88rem;
        color: #444;
    }

.feature-check[b-f0br280k62] {
    color: #22c55e;
    font-weight: 700;
    margin-right: 4px;
}

/* ── Buttons ── */
.btn-plan[b-f0br280k62] {
    width: 100%;
    padding: 11px;
    border-radius: 10px;
    font-weight: 700;
    font-size: .92rem;
    cursor: pointer;
    border: none;
    transition: .2s;
    margin-top: auto;
}

.btn-plan-switch[b-f0br280k62] {
    background: white;
    color: #111;
    border: 1.5px solid #d1d5db;
}

    .btn-plan-switch:hover[b-f0br280k62] {
        background: #f3f4f6;
        border-color: #aaa;
    }

.btn-plan-upgrade[b-f0br280k62] {
    background: #059669;
    color: white;
}

    .btn-plan-upgrade:hover[b-f0br280k62] {
        background: #047857;
        transform: translateY(-2px);
    }

.btn-plan-current[b-f0br280k62] {
    background: transparent;
    color: #888;
    border: 1.5px solid #e5e7eb;
    cursor: default;
}

.btn-plan-pending[b-f0br280k62] {
    background: #fff7ed;
    color: #f59e0b;
    border: 1.5px solid #f59e0b;
    cursor: default;
}

.btn-plan-cancel[b-f0br280k62] {
    background: #fff0f0;
    color: #ef4444;
    border: 1.5px solid #ef4444;
    cursor: pointer;
}

    .btn-plan-cancel:hover[b-f0br280k62] {
        background: #ef4444;
        color: white;
    }

/* ── Modal ── */
.modal-backdrop-custom[b-f0br280k62] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 1040;
}

.modal-box[b-f0br280k62] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 16px;
    padding: 2rem;
    width: 500px;
    max-width: 95vw;
    z-index: 1050;
    max-height: 90vh;
    overflow-y: auto;
}

@media (max-width:1100px) {
    .plans-grid[b-f0br280k62] {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width:600px) {
    .plans-wrapper[b-f0br280k62] {
        padding: 70px 16px 16px;
    }

    .plans-grid[b-f0br280k62] {
        grid-template-columns: 1fr;
    }
    .header[b-f0br280k62] {
        margin: -70px -32px 24px -32px;
    }
    
}
/* /Components/Pages/Subscriber/SubMyAccount.razor.rz.scp.css */
.account-page[b-shdwab3puz] {
    padding: 20px;
    background: linear-gradient(179deg, #f4f9f1 4%, #43e97b 24%);
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
}

.account-header[b-shdwab3puz] {
    background: white;
    padding: 16px 32px;
    border-bottom: 3px solid #10b981;
    box-shadow: 0 2px 8px rgba(16, 185, 129, .1);
    margin: -20px -20px 24px -20px;
}

    .account-header h2[b-shdwab3puz],
    .account-header h3[b-shdwab3puz] {
        color: #111;
        margin: 0;
        font-size: 1.2rem;
        font-weight: 700;
    }

    .account-header p[b-shdwab3puz] {
        color: #059669;
        margin: 0;
        font-size: .82rem;
    }

.account-grid[b-shdwab3puz] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 16px;
    width: 100%;
}

.account-page .card[b-shdwab3puz] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    min-width: 0;
}

    .account-page .card h4[b-shdwab3puz] {
        margin: 0 0 4px;
        font-size: 1rem;
    }

.account-page .muted[b-shdwab3puz] {
    color: #6b7280;
    font-size: .9rem;
    margin-bottom: 12px;
}

.form-grid[b-shdwab3puz] {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
    width: 100%;
}

    .form-grid.two[b-shdwab3puz] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .form-grid.one[b-shdwab3puz] {
        grid-template-columns: minmax(0, 1fr);
    }

.account-page label[b-shdwab3puz] {
    font-size: .85rem;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.account-page .input[b-shdwab3puz] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border: 1px solid #dbe1ea;
    background: #f9fafb;
    border-radius: 8px;
    padding: 9px 10px;
    font-size: .9rem;
}

.account-page .btn[b-shdwab3puz] {
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: 600;
    cursor: pointer;
}

.account-page .btn-primary[b-shdwab3puz] {
    background: #059669;
    color: #fff;
}

.account-page .btn-light[b-shdwab3puz] {
    background: #f3f4f6;
    color: #111;
}

.summary-list > div[b-shdwab3puz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eef2f7;
    font-size: .92rem;
    gap: 10px;
}

    .summary-list > div:last-child[b-shdwab3puz] {
        border-bottom: none;
    }

.summary-list span[b-shdwab3puz] {
    color: #6b7280;
}

.badge-active[b-shdwab3puz] {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: .75rem;
    font-weight: 700;
}

.quick[b-shdwab3puz] {
    background: #f8fbff;
    border-color: #cfe0ff;
}

.qa-btn[b-shdwab3puz] {
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 9px 10px;
    margin-top: 8px;
    font-weight: 600;
}

    .qa-btn.danger[b-shdwab3puz] {
        color: #dc2626;
    }

/* Prevent uploaded images from breaking the card layout */
.account-page img[b-shdwab3puz] {
    max-width: 100%;
}

.account-page .profile-image[b-shdwab3puz],
.account-page .profile-preview[b-shdwab3puz],
.account-page .id-preview[b-shdwab3puz] {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* File upload */
.account-page input[type="file"][b-shdwab3puz] {
    width: 100%;
    max-width: 100%;
    font-size: .85rem;
}

/* Prevent long text/reference numbers from stretching the UI */
.account-page[b-shdwab3puz],
.account-page .card[b-shdwab3puz],
.account-page .account-grid[b-shdwab3puz] {
    overflow-wrap: anywhere;
}

    /* Make all elements inside the account page calculate width correctly */
    .account-page *[b-shdwab3puz],
    .account-page *[b-shdwab3puz]::before,
    .account-page *[b-shdwab3puz]::after {
        box-sizing: border-box;
    }

@media (max-width: 992px) {
    .account-grid[b-shdwab3puz] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .account-page[b-shdwab3puz] {
        padding: 12px;
    }

    .account-header[b-shdwab3puz] {
        margin: -12px -12px 18px -12px;
        padding: 14px 16px;
    }

    .form-grid.two[b-shdwab3puz] {
        grid-template-columns: minmax(0, 1fr);
    }

    .account-grid[b-shdwab3puz] {
        grid-template-columns: minmax(0, 1fr);
    }

    .account-page .card[b-shdwab3puz] {
        padding: 14px;
    }

    .summary-list > div[b-shdwab3puz] {
        align-items: flex-start;
        flex-wrap: wrap;
    }
}
/* /Components/Pages/Subscriber/SubNotification.razor.rz.scp.css */

.notif-wrapper[b-hyz33t5b3s] {
    padding: 32px;
    background: linear-gradient(179deg, #f4f9f1 4%, #43e97b 24%);
    min-height: 100vh;
}

.notif-header[b-hyz33t5b3s] {
    background: white;
    padding: 16px 32px;
    border-bottom: 3px solid #10b981;
    box-shadow: 0 2px 8px rgba(16,185,129,.1);
    margin: -32px -32px 24px -32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .notif-header h3[b-hyz33t5b3s] {
        color: #111;
        font-size: 1.2rem;
        font-weight: 700;
        margin: 0;
    }

.notif-count[b-hyz33t5b3s] {
    background: #ef4444;
    color: white;
    font-size: .8rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
}

.notif-empty[b-hyz33t5b3s] {
    text-align: center;
    padding: 60px 0;
}

.notif-list[b-hyz33t5b3s] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 720px;
}

.notif-item[b-hyz33t5b3s] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: white;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    border-left: 4px solid #e5e7eb;
    transition: transform .15s;
}

    .notif-item:hover[b-hyz33t5b3s] {
        transform: translateX(4px);
    }

    .notif-item.notif-danger[b-hyz33t5b3s] {
        border-left-color: #ef4444;
    }

    .notif-item.notif-warning[b-hyz33t5b3s] {
        border-left-color: #f59e0b;
    }

    .notif-item.notif-success[b-hyz33t5b3s] {
        border-left-color: #22c55e;
    }

    .notif-item.notif-info[b-hyz33t5b3s] {
        border-left-color: #3b82f6;
    }

    .notif-item.notif-purple[b-hyz33t5b3s] {
        border-left-color: #8b5cf6;
    }

.notif-icon[b-hyz33t5b3s] {
    font-size: 1.8rem;
    min-width: 40px;
    text-align: center;
}

.notif-body[b-hyz33t5b3s] {
    flex: 1;
}

.notif-title[b-hyz33t5b3s] {
    font-weight: 700;
    color: #111;
    font-size: .98rem;
    margin-bottom: 3px;
}

.notif-message[b-hyz33t5b3s] {
    font-size: .88rem;
    color: #555;
    line-height: 1.5;
}

.notif-time[b-hyz33t5b3s] {
    font-size: .78rem;
    color: #aaa;
    margin-top: 6px;
}

@media (max-width: 800px) {
    .notif-wrapper[b-hyz33t5b3s] {
        padding: 70px 16px 16px;
    }
    .notif-header[b-hyz33t5b3s] {
        margin: -70px -32px 24px -32px;
    }
}

.notif-item.notif-read[b-hyz33t5b3s] {
    border-left-color: #e5e7eb;
    opacity: 0.7;
}

.notif-section-label[b-hyz33t5b3s] {
    font-size: .82rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 10px;
}

.unread-dot[b-hyz33t5b3s] {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
}

border-left-color: #e5e7eb;
opacity: 0.7;[b-hyz33t5b3s]
}

.notif-section-label[b-hyz33t5b3s] {
    font-size: .82rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 10px;
}

.unread-dot[b-hyz33t5b3s] {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
}
/* /Components/Pages/Subscriber/SubSupport.razor.rz.scp.css */

.support-wrapper[b-179v0zgkkl] {
    padding: 32px;
    background: linear-gradient(179deg, #f4f9f1 4%, #43e97b 24%);
    min-height: 100vh;
}

.support-header[b-179v0zgkkl] {
    background: white;
    padding: 16px 32px;
    border-bottom: 3px solid #10b981;
    box-shadow: 0 2px 8px rgba(16,185,129,.1);
    margin: -32px -32px 24px -32px;
}

    .support-header h3[b-179v0zgkkl] {
        color: #111;
        font-size: 1.2rem;
        font-weight: 700;
        margin: 0;
    }

    .support-header p[b-179v0zgkkl] {
        color: #059669;
        margin: 0;
        font-size: .82rem;
    }

.support-grid[b-179v0zgkkl] {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 24px;
    align-items: start;
}

/* Form Card */
.form-card[b-179v0zgkkl] {
    background: white;
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

.form-card-title[b-179v0zgkkl] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 4px;
}

/* Requests Card */
.requests-card[b-179v0zgkkl] {
    background: white;
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

.requests-title[b-179v0zgkkl] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 4px;
}

.requests-list[b-179v0zgkkl] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 12px;
}

.request-item[b-179v0zgkkl] {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px 18px;
    transition: box-shadow .15s;
}

    .request-item:hover[b-179v0zgkkl] {
        box-shadow: 0 3px 12px rgba(0,0,0,.06);
    }

.request-top[b-179v0zgkkl] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.request-type[b-179v0zgkkl] {
    font-weight: 700;
    font-size: .95rem;
    color: #111;
}

.request-desc[b-179v0zgkkl] {
    font-size: .88rem;
    color: #555;
    margin-bottom: 8px;
    line-height: 1.5;
}

.request-meta[b-179v0zgkkl] {
    display: flex;
    gap: 16px;
    font-size: .78rem;
    color: #aaa;
    flex-wrap: wrap;
}

.request-assigned[b-179v0zgkkl] {
    font-size: .82rem;
    color: #6b7280;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
}

/* Status badges */
.status-badge[b-179v0zgkkl] {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 700;
}

.badge-open[b-179v0zgkkl] {
    background: #dbeafe;
    color: #1d4ed8;
}

.badge-inprogress[b-179v0zgkkl] {
    background: #ede9fe;
    color: #7c3aed;
}

.badge-resolved[b-179v0zgkkl] {
    background: #d1fae5;
    color: #059669;
}

.badge-closed[b-179v0zgkkl] {
    background: #f3f4f6;
    color: #6b7280;
}

/* Priority badges */
.priority-badge[b-179v0zgkkl] {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 700;
}

.priority-low[b-179v0zgkkl] {
    background: #d1fae5;
    color: #059669;
}

.priority-medium[b-179v0zgkkl] {
    background: #fef3c7;
    color: #d97706;
}

.priority-high[b-179v0zgkkl] {
    background: #fee2e2;
    color: #dc2626;
}

.priority-critical[b-179v0zgkkl] {
    background: #dc2626;
    color: white;
}

@media (max-width: 900px) {
    .support-grid[b-179v0zgkkl] {
        grid-template-columns: 1fr;
    }

    .support-wrapper[b-179v0zgkkl] {
        padding: 70px 16px 16px;
    }

    .support-header[b-179v0zgkkl] {
      
        margin: -70px -32px 24px -32px;
    }

}
/* /Components/Pages/Technician/TechDashboard.razor.rz.scp.css */

*[b-quoiufvgcc] {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', sans-serif;
}

.wrapper[b-quoiufvgcc] {
    min-height: 100vh;
    background: linear-gradient(179deg, #f4f9f1 4%, #43e97b 24%);
    overflow-x: hidden;
}

.topnav[b-quoiufvgcc] {
    background: white;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #10b981;
    box-shadow: 0 2px 8px rgba(16,185,129,.1);
    gap: 20px;
    flex-wrap: wrap;
}

.topnav-left h2[b-quoiufvgcc] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111;
}

.topnav-left p[b-quoiufvgcc] {
    font-size: .82rem;
    color: #059669;
}

.content[b-quoiufvgcc] {
    padding: 32px;
}

    .content h1[b-quoiufvgcc] {
        font-size: 2rem;
        font-weight: 800;
        margin-bottom: 24px;
        color: #111;
    }

.stat-cards[b-quoiufvgcc] {
    display: grid;
    /* Ang auto-fit ay kusang mag-aadjust ng columns base sa laki ng screen */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
    width: 100%; /* Siguraduhing sakop ang buong lapad */
}

.stat-card[b-quoiufvgcc] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    min-width: 0;
}

    .stat-card .label[b-quoiufvgcc] {
        font-size: .82rem;
        color: #888;
        margin-bottom: 6px;
    }

    .stat-card .value[b-quoiufvgcc] {
        font-size: 2rem;
        font-weight: 800;
        color: #111;
        margin-bottom: 6px;
    }

    .stat-card .trend[b-quoiufvgcc] {
        font-size: .8rem;
        color: #22c55e;
        font-weight: 600;
    }

.stat-icon[b-quoiufvgcc] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.icon-blue[b-quoiufvgcc] {
    background: #eff6ff;
}

.icon-green[b-quoiufvgcc] {
    background: #f0fdf4;
}

.icon-orange[b-quoiufvgcc] {
    background: #fff7ed;
}

.bottom-grid[b-quoiufvgcc] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.card[b-quoiufvgcc] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

.card-title[b-quoiufvgcc] {
    font-size: 1rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 4px;
}

.card-sub[b-quoiufvgcc] {
    font-size: .82rem;
    color: #aaa;
    margin-bottom: 16px;
}

.table-wrap[b-quoiufvgcc] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table[b-quoiufvgcc] {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

thead tr[b-quoiufvgcc] {
    background: #f9fafb;
}

th[b-quoiufvgcc] {
    text-align: left;
    padding: 12px;
    font-size: .82rem;
    color: #444;
}

td[b-quoiufvgcc] {
    padding: 14px 12px;
    border-bottom: 1px solid #f3f4f6;
    color: #333;
    font-size: .9rem;
}

.badge-priority[b-quoiufvgcc], .badge-status[b-quoiufvgcc] {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
}

.priority-high[b-quoiufvgcc] {
    background: #fee2e2;
    color: #dc2626;
}

.priority-medium[b-quoiufvgcc] {
    background: #fef9c3;
    color: #ca8a04;
}

.priority-low[b-quoiufvgcc] {
    background: #f0fdf4;
    color: #16a34a;
}

.status-pending[b-quoiufvgcc] {
    background: #fff7ed;
    color: #ea580c;
}

.status-inprogress[b-quoiufvgcc] {
    background: #eff6ff;
    color: #2563eb;
}

.status-resolved[b-quoiufvgcc] {
    background: #f0fdf4;
    color: #16a34a;
}

@media (max-width: 1100px) {
    .stat-cards[b-quoiufvgcc] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .content[b-quoiufvgcc] {
        padding: 16px;
    }

        .content h1[b-quoiufvgcc] {
            font-size: 1.5rem;
        }

    .stat-cards[b-quoiufvgcc] {
        grid-template-columns: 1fr;
    }

    .topnav[b-quoiufvgcc] {
        padding: 12px 16px;
    }
}

/* /Components/Pages/Technician/TechMyAccount.razor.rz.scp.css */

.account-page[b-mub9osgv43] {
    padding: 32px;
    background: linear-gradient(179deg, #f4f9f1 4%, #43e97b 24%);
    min-height: 100vh;
}

.account-header[b-mub9osgv43] {
    background: white;
    padding: 16px 32px;
    border-bottom: 3px solid #10b981;
    box-shadow: 0 2px 8px rgba(16,185,129,.1);
    margin: -32px -32px 24px -32px;
}

    .account-header h2[b-mub9osgv43] {
        font-size: 1.2rem;
        font-weight: 700;
        color: #111;
        margin: 0;
    }

    .account-header p[b-mub9osgv43] {
        color: #059669;
        margin: 0;
        font-size: .82rem;
    }

.account-grid[b-mub9osgv43] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.card[b-mub9osgv43] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    margin-bottom: 20px;
}

    .card h4[b-mub9osgv43] {
        font-size: 1rem;
        font-weight: 700;
        color: #111;
        margin-bottom: 4px;
    }

.muted[b-mub9osgv43] {
    font-size: .82rem;
    color: #aaa;
    margin-bottom: 20px;
}

.form-grid[b-mub9osgv43] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

    .form-grid .full[b-mub9osgv43] {
        grid-column: 1 / -1;
    }

    .form-grid label[b-mub9osgv43] {
        display: block;
        font-size: .82rem;
        font-weight: 600;
        color: #555;
        margin-bottom: 6px;
    }

.input[b-mub9osgv43] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: .9rem;
    outline: none;
    transition: border .2s;
}

    .input:focus[b-mub9osgv43] {
        border-color: #2563eb;
    }

.summary-list[b-mub9osgv43] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

    .summary-list div[b-mub9osgv43] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 14px;
        border-bottom: 1px solid #f3f4f6;
    }

        .summary-list div:last-child[b-mub9osgv43] {
            border-bottom: none;
            padding-bottom: 0;
        }

    .summary-list span:first-child[b-mub9osgv43] {
        color: #888;
        font-size: .88rem;
    }

.badge-role[b-mub9osgv43] {
    background: #eff6ff;
    color: #2563eb;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
}

@media (max-width: 800px) {
    .account-page[b-mub9osgv43] {
        padding: 20px 16px 7px ;
    }

    .account-grid[b-mub9osgv43] {
        grid-template-columns: 1fr;
    }

    .form-grid[b-mub9osgv43] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Technician/TechServiceRequests.razor.rz.scp.css */

.tickets-page[b-bo52ins88q] {
    min-height: 100vh;
    background: linear-gradient(179deg, #f4f9f1 4%, #43e97b 24%);
    padding-bottom: 40px;
}

.page-header[b-bo52ins88q] {
    background: white;
    padding: 16px 32px;
    border-bottom: 3px solid #10b981;
    box-shadow: 0 2px 8px rgba(16,185,129,.1);
    margin-bottom: 24px;
}

    .page-header h2[b-bo52ins88q] {
        font-size: 1.2rem;
        font-weight: 700;
        color: #111;
        margin: 0;
    }

    .page-header p[b-bo52ins88q] {
        font-size: .82rem;
        color: #059669;
        margin: 0;
    }

/* Stat Cards */
.stats-row[b-bo52ins88q] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    padding: 20px 32px 24px;
    border: 1px solid #d1fae5;
    border-radius: 16px;
    margin: 0 32px 24px;
    background: white;
    overflow: hidden;
}

/* Idagdag mo ito para maayos yung 4 na cards na nag-overlap */
.stat-cards[b-bo52ins88q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
    width: 100%;
}

.stat-card[b-bo52ins88q] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    gap: 12px;
    min-width: 0;
}

.stat-label[b-bo52ins88q] {
    font-size: .8rem;
    color: #888;
    margin-bottom: 4px;
}

.stat-value[b-bo52ins88q] {
    font-size: 1.8rem;
    font-weight: 800;
    color: #111;
}

.stat-icon[b-bo52ins88q] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.icon-blue[b-bo52ins88q] {
    background: #eff6ff;
    color: #2563eb;
}

.icon-green[b-bo52ins88q] {
    background: #f0fdf4;
    color: #16a34a;
}

.icon-yellow[b-bo52ins88q] {
    background: #fefce8;
    color: #ca8a04;
}

.icon-orange[b-bo52ins88q] {
    background: #fff7ed;
    color: #ea580c;
}

/* Tickets List */
.tickets-list[b-bo52ins88q] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 32px;
}

.ticket-card[b-bo52ins88q] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    border: 1px solid #f0f0f0;
}

.ticket-top[b-bo52ins88q] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.ticket-icon-wrap[b-bo52ins88q] {
    width: 48px;
    height: 48px;
    background: #eff6ff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.ticket-meta[b-bo52ins88q] {
    flex: 1;
}

.ticket-title-row[b-bo52ins88q] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.ticket-id[b-bo52ins88q] {
    font-size: .85rem;
    font-weight: 700;
    color: #374151;
}

.ticket-issue[b-bo52ins88q] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 2px;
}

.ticket-assigned[b-bo52ins88q] {
    font-size: .82rem;
    color: #888;
}

/* Badges */
.badge-status[b-bo52ins88q], .badge-priority[b-bo52ins88q] {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}

.status-pending[b-bo52ins88q] {
    background: #fff7ed;
    color: #ea580c;
}

.status-inprogress[b-bo52ins88q] {
    background: #eff6ff;
    color: #2563eb;
}

.status-resolved[b-bo52ins88q] {
    background: #f0fdf4;
    color: #16a34a;
}

.priority-high[b-bo52ins88q], .priority-urgent[b-bo52ins88q] {
    background: #fee2e2;
    color: #dc2626;
}

.priority-medium[b-bo52ins88q] {
    background: #fef9c3;
    color: #ca8a04;
}

.priority-low[b-bo52ins88q] {
    background: #f0fdf4;
    color: #16a34a;
}

/* Details */
.ticket-details[b-bo52ins88q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
    padding-top: 14px;
    border-top: 1px solid #f3f4f6;
}

.detail-item[b-bo52ins88q] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    color: #555;
}

    .detail-item i[b-bo52ins88q] {
        color: #9ca3af;
        font-size: .9rem;
    }

    .detail-item strong[b-bo52ins88q] {
        color: #111;
    }

.detail-right .detail-item i[b-bo52ins88q] {
    color: #2563eb;
}

/* Notes */
.ticket-notes[b-bo52ins88q] {
    background: #fefce8;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid #fde68a;
}

.notes-label[b-bo52ins88q] {
    font-size: .8rem;
    font-weight: 700;
    color: #92400e;
    margin-bottom: 4px;
}

.notes-text[b-bo52ins88q] {
    font-size: .88rem;
    color: #b45309;
    line-height: 1.5;
}

/* Actions */
.ticket-actions[b-bo52ins88q] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn-complete[b-bo52ins88q] {
    background: #16a34a;
    color: white;
    border: none;
    padding: 9px 20px;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background .2s;
}

    .btn-complete:hover[b-bo52ins88q] {
        background: #15803d;
    }

.btn-inprogress[b-bo52ins88q] {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    padding: 9px 20px;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background .2s;
}

    .btn-inprogress:hover[b-bo52ins88q] {
        background: #dbeafe;
    }

.resolved-label[b-bo52ins88q] {
    color: #16a34a;
    font-size: .88rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.empty-state[b-bo52ins88q] {
    text-align: center;
    padding: 60px 0;
    color: #aaa;
}

    .empty-state i[b-bo52ins88q] {
        font-size: 3rem;
        display: block;
        margin-bottom: 12px;
    }

    .empty-state p[b-bo52ins88q] {
        font-size: 1rem;
    }

/* Filter Bar */
.filter-bar[b-bo52ins88q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 32px 16px;
}

.tech-search-box[b-bo52ins88q] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 5px 12px;
    min-width: 200px;
}

    .tech-search-box input[b-bo52ins88q] {
        border: none;
        outline: none;
        font-size: .88rem;
        width: 100%;
        background: transparent;
    }

@media (max-width: 900px) {
    .stats-row[b-bo52ins88q] {
        grid-template-columns: repeat(2, 1fr);
        margin: 0 16px 20px;
        padding: 16px;
    }

    .tickets-list[b-bo52ins88q] {
        padding: 0 16px;
    }

    .page-header[b-bo52ins88q] {
        padding: 20px 16px 0;
    }

    .ticket-details[b-bo52ins88q] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 500px) {
    .stats-row[b-bo52ins88q] {
        grid-template-columns: 1fr 1fr;
    }
}