/* /Components/Billing/CreateInvoices/CreateInvoice.razor.rz.scp.css */
/* =========================================================
   PURPOSE:
   Scoped styles for CreateInvoice.razor.

   RESPONSIBILITIES:
   - Improve visual hierarchy for the invoice creation form
   - Style the form grid and field blocks
   - Keep the nested "Important" panel visually distinct
   - Align the action buttons with the rest of the control plane

   IMPORTANT NOTES:
   - Scoped to CreateInvoice.razor only
   - Keep styles light, clean, and enterprise-oriented
   - Reuse established vx-* patterns where possible
   ========================================================= */


/* MAIN PANEL */
.vx-panel[b-n5d4rv4c0u] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}


/* NESTED INFO PANEL */
.vx-panel--nested[b-n5d4rv4c0u] {
    margin-top: 20px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}


/* SECTION HEADER */
.vx-section-header[b-n5d4rv4c0u] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.vx-section-title[b-n5d4rv4c0u] {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.vx-section-subtitle[b-n5d4rv4c0u] {
    margin: 0;
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
}


/* FORM GRID */
.vx-form-grid[b-n5d4rv4c0u] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}


/* FIELD BLOCKS */
.vx-field[b-n5d4rv4c0u] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vx-label[b-n5d4rv4c0u] {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
}

.vx-input[b-n5d4rv4c0u] {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    color: #0f172a;
    font-size: 14px;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

    .vx-input:focus[b-n5d4rv4c0u] {
        border-color: #94a3b8;
        box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.16);
        background: #ffffff;
    }

    .vx-input[b-n5d4rv4c0u]::placeholder {
        color: #94a3b8;
    }


/* DETAILS GRID INSIDE IMPORTANT PANEL */
.vx-details-grid[b-n5d4rv4c0u] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.vx-detail-item[b-n5d4rv4c0u] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
}

.vx-detail-item__label[b-n5d4rv4c0u] {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.vx-detail-item__value[b-n5d4rv4c0u] {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    word-break: break-word;
}


/* ACTION BAR */
.vx-actions[b-n5d4rv4c0u] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    padding-top: 4px;
}


/* BUTTON BASE */
.vx-button[b-n5d4rv4c0u] {
    min-height: 42px;
    padding: 0 16px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease, transform 0.12s ease;
}

    .vx-button:hover:not(:disabled)[b-n5d4rv4c0u] {
        transform: translateY(-1px);
    }

    .vx-button:disabled[b-n5d4rv4c0u] {
        opacity: 0.6;
        cursor: not-allowed;
    }


/* PRIMARY BUTTON */
.vx-button--primary[b-n5d4rv4c0u] {
    background: #0f172a;
    color: #ffffff;
}

    .vx-button--primary:hover:not(:disabled)[b-n5d4rv4c0u] {
        background: #020617;
    }


/* SECONDARY BUTTON */
.vx-button--secondary[b-n5d4rv4c0u] {
    background: #e2e8f0;
    color: #0f172a;
}

    .vx-button--secondary:hover:not(:disabled)[b-n5d4rv4c0u] {
        background: #cbd5e1;
    }


/* SMALL VISUAL IMPROVEMENTS FOR FORM ELEMENTS IN NESTED PANEL */
:deep(.vx-panel--nested .vx-section-title)[b-n5d4rv4c0u] {
    font-size: 18px;
}

:deep(.vx-panel--nested .vx-section-subtitle)[b-n5d4rv4c0u] {
    font-size: 13px;
}


/* RESPONSIVE */
@media (max-width: 900px) {
    .vx-form-grid[b-n5d4rv4c0u],
    .vx-details-grid[b-n5d4rv4c0u] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .vx-panel[b-n5d4rv4c0u] {
        padding: 18px;
    }

    .vx-section-title[b-n5d4rv4c0u] {
        font-size: 22px;
    }

    .vx-actions[b-n5d4rv4c0u] {
        flex-direction: column;
        align-items: stretch;
    }

    .vx-button[b-n5d4rv4c0u] {
        width: 100%;
    }
}
/* /Components/Billing/GetInvoices/InvoiceList.razor.rz.scp.css */
/* =========================================================
   PURPOSE:
   Scoped styles for InvoiceList table component.

   RESPONSIBILITIES:
   - Improve invoice table readability and structure
   - Add clean visual hierarchy for invoice data
   - Provide row hover and clickable-row affordance
   - Style invoice status badges consistently

   IMPORTANT NOTES:
   - Scoped to InvoiceList only
   - Keep styles light and enterprise-oriented
   ========================================================= */


/* EMPTY STATE */
.vx-placeholder-card__text[b-m90k9v3xak] {
    margin: 0;
    padding: 16px;
    border-radius: 12px;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    color: #64748b;
    font-size: 14px;
}


/* TABLE WRAPPER */
.vx-table-wrap[b-m90k9v3xak] {
    margin-top: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}


/* BASE TABLE */
.vx-table[b-m90k9v3xak] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
}


    /* TABLE HEADER */
    .vx-table thead th[b-m90k9v3xak] {
        padding: 14px 16px;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        color: #475569;
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-align: left;
        white-space: nowrap;
    }


    /* TABLE BODY */
    .vx-table tbody td[b-m90k9v3xak] {
        padding: 16px;
        border-bottom: 1px solid #eef2f7;
        color: #0f172a;
        font-size: 14px;
        vertical-align: middle;
        background: #ffffff;
    }

    .vx-table tbody tr:last-child td[b-m90k9v3xak] {
        border-bottom: none;
    }


/* CLICKABLE ROW */
.vx-table__row-link[b-m90k9v3xak] {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .vx-table__row-link:hover td[b-m90k9v3xak] {
        background: #f8fafc;
    }


/* PRIMARY COLUMN */
.vx-table__primary[b-m90k9v3xak] {
    font-weight: 700;
    color: #0f172a;
    word-break: break-word;
}


/* NUMERIC COLUMNS */
.vx-table__numeric[b-m90k9v3xak] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}


/* BADGES */
.vx-badge[b-m90k9v3xak] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    background: #e2e8f0;
    color: #334155;
    white-space: nowrap;
}


/* STATUS VARIANTS */
.vx-badge--paid[b-m90k9v3xak] {
    background: #dcfce7;
    color: #166534;
}

.vx-badge--partial[b-m90k9v3xak] {
    background: #fef3c7;
    color: #92400e;
}

.vx-badge--issued[b-m90k9v3xak] {
    background: #dbeafe;
    color: #1d4ed8;
}

.vx-badge--draft[b-m90k9v3xak] {
    background: #e2e8f0;
    color: #475569;
}

.vx-badge--danger[b-m90k9v3xak] {
    background: #fee2e2;
    color: #991b1b;
}


/* RESPONSIVE */
@media (max-width: 980px) {
    .vx-table-wrap[b-m90k9v3xak] {
        overflow-x: auto;
    }

    .vx-table[b-m90k9v3xak] {
        min-width: 760px;
    }
}
/* /Components/Billing/GetInvoices/TenantBillingSection.razor.rz.scp.css */
/* =========================================================
   PURPOSE:
   Scoped styles for TenantBillingSection.

   RESPONSIBILITIES:
   - Provide structure and spacing for billing section
   - Align action buttons consistently
   - Match licensing + subscription visual style
   - Keep layout clean and minimal (no KPI cards)

   IMPORTANT NOTES:
   - This is a lightweight wrapper around InvoiceList
   - Table styling belongs to InvoiceList.css
   ========================================================= */


/* PANEL BASE (inherits global vx-panel look) */
.vx-panel[b-ay0qpod94a] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}


/* HEADER */
.vx-section-header[b-ay0qpod94a] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.vx-section-title[b-ay0qpod94a] {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
}

.vx-section-subtitle[b-ay0qpod94a] {
    margin: 0;
    font-size: 14px;
    color: #64748b;
}


/* ACTION BAR */
.vx-actions[b-ay0qpod94a] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}


/* BUTTON */
.vx-button[b-ay0qpod94a] {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}


/* PRIMARY BUTTON */
.vx-button--primary[b-ay0qpod94a] {
    background: #0f172a;
    color: #ffffff;
}

    .vx-button--primary:hover[b-ay0qpod94a] {
        background: #020617;
    }


/* DISABLED */
.vx-button:disabled[b-ay0qpod94a] {
    opacity: 0.6;
    cursor: not-allowed;
}


/* INFO TEXT (used when no subscription) */
.vx-toolbar-count[b-ay0qpod94a] {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}


/* LOADING */
.vx-loading[b-ay0qpod94a] {
    padding: 12px 0;
    font-size: 14px;
    color: #475569;
}


/* EMPTY STATE */
.vx-placeholder-card__text[b-ay0qpod94a] {
    padding: 16px;
    border-radius: 12px;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    color: #64748b;
    font-size: 14px;
}


/* TABLE SPACING (important) */
:deep(.vx-table-wrap)[b-ay0qpod94a] {
    margin-top: 6px;
}


/* RESPONSIVE */
@media (max-width: 768px) {
    .vx-actions[b-ay0qpod94a] {
        flex-direction: column;
        align-items: stretch;
    }

    .vx-button[b-ay0qpod94a] {
        width: 100%;
    }
}
/* /Components/Billing/RegisterPayment/RegisterPayment.razor.rz.scp.css */
body[b-5zjphna0wy] {
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-ncwm9g6dmf],
.components-reconnect-repeated-attempt-visible[b-ncwm9g6dmf],
.components-reconnect-failed-visible[b-ncwm9g6dmf],
.components-pause-visible[b-ncwm9g6dmf],
.components-resume-failed-visible[b-ncwm9g6dmf],
.components-rejoining-animation[b-ncwm9g6dmf] {
    display: none;
}

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


#components-reconnect-modal[b-ncwm9g6dmf] {
    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-ncwm9g6dmf 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-ncwm9g6dmf {
    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/Licenses/LicenseList.razor.rz.scp.css */
/* =========================================================
   PURPOSE:
   Scoped styles for LicenseList table component.

   RESPONSIBILITIES:
   - Improve table readability and spacing
   - Align content for enterprise UI clarity
   - Provide clean hover + visual hierarchy
   - Standardize badge and action styling

   IMPORTANT NOTES:
   - Scoped to LicenseList only
   - Do not move to global styles unless reused
   ========================================================= */


/* TABLE WRAPPER */
.vx-table-wrap[b-ohecvb7lo2] {
    margin-top: 8px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #ffffff;
}


/* TABLE BASE */
.vx-table[b-ohecvb7lo2] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}


    /* HEADER */
    .vx-table thead th[b-ohecvb7lo2] {
        padding: 14px 16px;
        text-align: left;
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #334155;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
    }


    /* BODY CELLS */
    .vx-table tbody td[b-ohecvb7lo2] {
        padding: 14px 16px;
        border-bottom: 1px solid #eef2f7;
        color: #0f172a;
        vertical-align: middle;
    }


    /* LAST ROW CLEANUP */
    .vx-table tbody tr:last-child td[b-ohecvb7lo2] {
        border-bottom: none;
    }


    /* ROW HOVER */
    .vx-table tbody tr:hover td[b-ohecvb7lo2] {
        background: #f8fafc;
    }


/* PRIMARY COLUMN (LICENSE) */
.vx-table__primary[b-ohecvb7lo2] {
    font-weight: 700;
    color: #0f172a;
}


/* MUTED CELL */
.vx-table__muted[b-ohecvb7lo2] {
    color: #94a3b8;
    font-weight: 600;
}


/* ACTION COLUMN */
.vx-table__actions[b-ohecvb7lo2] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}


/* BADGES */
.vx-badge[b-ohecvb7lo2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    background: #e2e8f0;
    color: #334155;
}


/* STATUS COLORS */
.vx-badge--active[b-ohecvb7lo2] {
    background: #dcfce7;
    color: #166534;
}

.vx-badge--warning[b-ohecvb7lo2] {
    background: #fef3c7;
    color: #92400e;
}

.vx-badge--inactive[b-ohecvb7lo2] {
    background: #e2e8f0;
    color: #475569;
}


/* BUTTONS */
.vx-button[b-ohecvb7lo2] {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}


/* BUTTON VARIANTS */
.vx-button--secondary[b-ohecvb7lo2] {
    background: #e2e8f0;
    color: #0f172a;
}

    .vx-button--secondary:hover[b-ohecvb7lo2] {
        background: #cbd5e1;
    }

.vx-button--danger[b-ohecvb7lo2] {
    background: #fee2e2;
    color: #991b1b;
}

    .vx-button--danger:hover[b-ohecvb7lo2] {
        background: #fecaca;
    }

.vx-button--success[b-ohecvb7lo2] {
    background: #dcfce7;
    color: #166534;
}

    .vx-button--success:hover[b-ohecvb7lo2] {
        background: #bbf7d0;
    }


/* DISABLED */
.vx-button:disabled[b-ohecvb7lo2] {
    opacity: 0.6;
    cursor: not-allowed;
}


/* EMPTY STATE */
.vx-placeholder-card__text[b-ohecvb7lo2] {
    padding: 16px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    font-size: 14px;
}
/* /Components/Licenses/TenantLicensingSection.razor.rz.scp.css */
/* =========================================================
   PURPOSE:
   Scoped styles for TenantLicensingSection.

   RESPONSIBILITIES:
   - Improve visual hierarchy for the licensing panel
   - Style the filter toolbar
   - Keep the section aligned with the light enterprise UI
   - Provide responsive behavior for smaller widths

   IMPORTANT NOTES:
   - This file is scoped to TenantLicensingSection.razor
   - Keep styles light, clean, and production-oriented
   - Do not push styles into app.css unless truly shared
   ========================================================= */

/* Main section spacing */
.vx-panel[b-jlrvhbdyz8] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

/* Nested panel used around the list area */
.vx-panel--nested[b-jlrvhbdyz8] {
    margin-top: 20px;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Section header polish */
.vx-section-header[b-jlrvhbdyz8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.vx-section-title[b-jlrvhbdyz8] {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.vx-section-subtitle[b-jlrvhbdyz8] {
    margin: 0;
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
}

/* Loading / placeholder text */
.vx-loading[b-jlrvhbdyz8] {
    margin: 0;
    padding: 16px 0 4px 0;
    font-size: 14px;
    color: #475569;
}

.vx-placeholder-card__text[b-jlrvhbdyz8] {
    margin: 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    font-size: 14px;
}

/* Toolbar layout */
.vx-license-toolbar[b-jlrvhbdyz8] {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 18px;
    padding: 16px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.vx-license-toolbar__filters[b-jlrvhbdyz8] {
    display: grid;
    grid-template-columns: 160px 170px minmax(240px, 1fr);
    gap: 14px;
    width: 100%;
    align-items: end;
}

.vx-license-toolbar__meta[b-jlrvhbdyz8] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 140px;
}

/* Field styling */
.vx-field[b-jlrvhbdyz8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vx-field--compact .vx-label[b-jlrvhbdyz8] {
    margin-bottom: 0;
}

.vx-field--search[b-jlrvhbdyz8] {
    min-width: 240px;
}

.vx-label[b-jlrvhbdyz8] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
}

.vx-input[b-jlrvhbdyz8] {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    color: #0f172a;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

    .vx-input:focus[b-jlrvhbdyz8] {
        border-color: #94a3b8;
        box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.16);
        background: #ffffff;
    }

    .vx-input[b-jlrvhbdyz8]::placeholder {
        color: #94a3b8;
    }

/* Metadata pill */
.vx-toolbar-count[b-jlrvhbdyz8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

/* Help the embedded list breathe visually */
:deep(.vx-table-wrap)[b-jlrvhbdyz8] {
    margin-top: 4px;
}

:deep(.vx-table)[b-jlrvhbdyz8] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
}

:deep(.vx-table thead th)[b-jlrvhbdyz8] {
    padding: 14px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
}

:deep(.vx-table tbody td)[b-jlrvhbdyz8] {
    padding: 14px 12px;
    border-bottom: 1px solid #eef2f7;
    color: #0f172a;
    font-size: 14px;
    vertical-align: middle;
}

:deep(.vx-table tbody tr:last-child td)[b-jlrvhbdyz8] {
    border-bottom: none;
}

:deep(.vx-table tbody tr:hover td)[b-jlrvhbdyz8] {
    background: #f8fafc;
}

/* Make common badges look cleaner if LicenseList uses them */
:deep(.vx-badge)[b-jlrvhbdyz8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* Make action buttons inside the child component feel more polished */
:deep(.vx-button)[b-jlrvhbdyz8] {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    font-weight: 700;
}

/* Responsive behavior */
@media (max-width: 1100px) {
    .vx-license-toolbar[b-jlrvhbdyz8] {
        flex-direction: column;
        align-items: stretch;
    }

    .vx-license-toolbar__filters[b-jlrvhbdyz8] {
        grid-template-columns: 1fr 1fr;
    }

    .vx-field--search[b-jlrvhbdyz8] {
        grid-column: 1 / -1;
    }

    .vx-license-toolbar__meta[b-jlrvhbdyz8] {
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .vx-section-title[b-jlrvhbdyz8] {
        font-size: 22px;
    }

    .vx-license-toolbar[b-jlrvhbdyz8] {
        padding: 14px;
    }

    .vx-license-toolbar__filters[b-jlrvhbdyz8] {
        grid-template-columns: 1fr;
    }

    .vx-field--search[b-jlrvhbdyz8] {
        min-width: 0;
        grid-column: auto;
    }

    .vx-toolbar-count[b-jlrvhbdyz8] {
        white-space: normal;
        border-radius: 12px;
        justify-content: flex-start;
        padding: 10px 12px;
    }
}
/* /Components/Pages/Auth/ForgotPassword.razor.rz.scp.css */
/* =========================================================
   FILE: ForgotPassword.razor.css

   PURPOSE:
   Scoped styling for the Vixly Control Plane password
   recovery request page.

   RESPONSIBILITIES:
   - Style the password recovery card
   - Keep recovery UI aligned with ControlPlane login visuals
   - Style recovery form and navigation actions

   IMPORTANT NOTES:
   - This file must sit beside ForgotPassword.razor
   - This page is for PlatformUser recovery only
   - Backend reset-token workflow will be added next
   ========================================================= */

.vx-auth-recovery[b-fpan3uts9c] {
    display: grid;
    place-items: center;
    min-height: 70vh;
}

.vx-auth-recovery__card[b-fpan3uts9c] {
    width: min(520px, 100%);
    padding: 42px;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.94));
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 34px 80px rgba(15, 23, 42, 0.10);
}

.vx-auth-recovery__badge[b-fpan3uts9c] {
    display: inline-flex;
    margin-bottom: 18px;
    padding: 6px 12px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.12);
}

.vx-auth-recovery__title[b-fpan3uts9c] {
    margin: 0;
    color: #0f172a;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.07em;
}

.vx-auth-recovery__subtitle[b-fpan3uts9c] {
    margin: 18px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.8;
}

.vx-auth-recovery__form[b-fpan3uts9c] {
    display: grid;
    gap: 20px;
    margin-top: 30px;
}

.vx-auth-recovery__field[b-fpan3uts9c] {
    display: grid;
    gap: 8px;
}

.vx-auth-recovery__label[b-fpan3uts9c] {
    color: #334155;
    font-size: 13px;
    font-weight: 850;
}

.vx-auth-recovery__back[b-fpan3uts9c] {
    margin-top: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: #2563eb;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 850;
}

    .vx-auth-recovery__back:hover[b-fpan3uts9c] {
        text-decoration: underline;
    }

@media (max-width: 640px) {
    .vx-auth-recovery__card[b-fpan3uts9c] {
        padding: 30px;
        border-radius: 24px;
    }
}
/* =========================================================
   SUCCESS MESSAGE
   ========================================================= */

.vx-auth-recovery__success[b-fpan3uts9c] {
    margin-top: 22px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(34, 197, 94, 0.18);
    background: rgba(34, 197, 94, 0.08);
    color: #166534;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
}
/* /Components/Pages/Auth/ResetPassword.razor.rz.scp.css */
/* =========================================================
   FILE: ResetPassword.razor.css

   PURPOSE:
   Scoped styling for the Vixly Control Plane password
   recovery request page.

   RESPONSIBILITIES:
   - Style the password recovery card
   - Keep recovery UI aligned with ControlPlane login visuals
   - Style recovery form and navigation actions

   IMPORTANT NOTES:
   - This file must sit beside ForgotPassword.razor
   - This page is for PlatformUser recovery only
   - Backend reset-token workflow will be added next
   ========================================================= */

.vx-auth-recovery[b-8nlqmj9uzr] {
    display: grid;
    place-items: center;
    min-height: 70vh;
}

.vx-auth-recovery__card[b-8nlqmj9uzr] {
    width: min(520px, 100%);
    padding: 42px;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.94));
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 34px 80px rgba(15, 23, 42, 0.10);
}

.vx-auth-recovery__badge[b-8nlqmj9uzr] {
    display: inline-flex;
    margin-bottom: 18px;
    padding: 6px 12px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.12);
}

.vx-auth-recovery__title[b-8nlqmj9uzr] {
    margin: 0;
    color: #0f172a;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.07em;
}

.vx-auth-recovery__subtitle[b-8nlqmj9uzr] {
    margin: 18px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.8;
}

.vx-auth-recovery__form[b-8nlqmj9uzr] {
    display: grid;
    gap: 20px;
    margin-top: 30px;
}

.vx-auth-recovery__field[b-8nlqmj9uzr] {
    display: grid;
    gap: 8px;
}

.vx-auth-recovery__label[b-8nlqmj9uzr] {
    color: #334155;
    font-size: 13px;
    font-weight: 850;
}

.vx-auth-recovery__back[b-8nlqmj9uzr] {
    margin-top: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: #2563eb;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 850;
}

    .vx-auth-recovery__back:hover[b-8nlqmj9uzr] {
        text-decoration: underline;
    }

@media (max-width: 640px) {
    .vx-auth-recovery__card[b-8nlqmj9uzr] {
        padding: 30px;
        border-radius: 24px;
    }
}
/* =========================================================
   SUCCESS MESSAGE
   ========================================================= */

.vx-auth-recovery__success[b-8nlqmj9uzr] {
    margin-top: 22px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(34, 197, 94, 0.18);
    background: rgba(34, 197, 94, 0.08);
    color: #166534;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
}
/* =========================================================
   ERROR MESSAGE
   ========================================================= */

.vx-auth-recovery__error[b-8nlqmj9uzr] {
    margin-top: 22px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(239, 68, 68, 0.18);
    background: rgba(239, 68, 68, 0.08);
    color: #991b1b;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
}
/* /Components/Pages/Billing/Components/CreateInvoice.razor.rz.scp.css */
/* =========================================================
   MODULE: Create Invoice Page

   PURPOSE:
   Scoped styling for the tenant-scoped invoice creation page.

   RESPONSIBILITIES:
   - Style the page shell and section panels
   - Style form fields and action buttons
   - Style summary cards and totals
   - Keep the page aligned with the VX control-plane UI language

   IMPORTANT NOTES:
   - This file must sit beside CreateInvoice.razor
   - The file name must match exactly for scoped CSS to apply
   - Do NOT move these rules into app.css
   ========================================================= */


/* =========================================================
   PAGE LAYOUT
   ========================================================= */

.vx-page[b-cxq30uu0er] {
    padding: 24px;
    background: #f8fafc;
    min-height: 100%;
}

.vx-page__header[b-cxq30uu0er] {
    margin-bottom: 20px;
}

.vx-page__header-top[b-cxq30uu0er] {
    margin-bottom: 12px;
}

.vx-page__title[b-cxq30uu0er] {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
}

.vx-page__subtitle[b-cxq30uu0er] {
    margin-top: 8px;
    color: #64748b;
    font-size: 1rem;
}


/* =========================================================
   PANEL CONTAINER
   ========================================================= */

.vx-panel[b-cxq30uu0er] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.vx-panel--nested[b-cxq30uu0er] {
    margin-top: 16px;
    margin-bottom: 0;
    background: #f8fafc;
}


/* =========================================================
   SECTION HEADERS
   ========================================================= */

.vx-section-header[b-cxq30uu0er] {
    margin-bottom: 16px;
}

.vx-section-title[b-cxq30uu0er] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
}

.vx-section-subtitle[b-cxq30uu0er] {
    margin-top: 6px;
    color: #64748b;
    line-height: 1.5;
}


/* =========================================================
   FORM LAYOUT
   ========================================================= */

.vx-form-grid[b-cxq30uu0er] {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 16px;
}

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

.vx-field--full[b-cxq30uu0er] {
    grid-column: 1 / -1;
}

.vx-label[b-cxq30uu0er] {
    margin-bottom: 6px;
    font-weight: 600;
    color: #334155;
}

.vx-input[b-cxq30uu0er] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    font-size: 0.95rem;
    box-sizing: border-box;
}

    .vx-input:focus[b-cxq30uu0er] {
        outline: none;
        border-color: #94a3b8;
        box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.15);
    }

    .vx-input[type="number"][b-cxq30uu0er] {
        text-align: right;
    }


/* =========================================================
   BUTTONS
   ========================================================= */

.vx-button[b-cxq30uu0er] {
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.18s ease-in-out;
}

    .vx-button:disabled[b-cxq30uu0er] {
        opacity: 0.65;
        cursor: not-allowed;
    }

.vx-button--primary[b-cxq30uu0er] {
    background: #0f172a;
    color: #ffffff;
}

    .vx-button--primary:hover:not(:disabled)[b-cxq30uu0er] {
        background: #1e293b;
    }

.vx-button--secondary[b-cxq30uu0er] {
    background: #e2e8f0;
    color: #0f172a;
}

    .vx-button--secondary:hover:not(:disabled)[b-cxq30uu0er] {
        background: #cbd5e1;
    }

.vx-back-button[b-cxq30uu0er] {
    min-width: 120px;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.vx-actions[b-cxq30uu0er] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 16px;
}


/* =========================================================
   SUMMARY GRID
   ========================================================= */

.vx-summary-grid[b-cxq30uu0er] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.vx-summary-card[b-cxq30uu0er] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
}

.vx-summary-card__label[b-cxq30uu0er] {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 8px;
}

.vx-summary-card__value[b-cxq30uu0er] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    word-break: break-word;
}


/* =========================================================
   FEEDBACK STATES
   ========================================================= */

.vx-error[b-cxq30uu0er] {
    color: #b91c1c;
    font-weight: 600;
}

.vx-success[b-cxq30uu0er] {
    color: #166534;
    font-weight: 600;
}

.vx-loading[b-cxq30uu0er] {
    color: #475569;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .vx-form-grid[b-cxq30uu0er] {
        grid-template-columns: 1fr;
    }

    .vx-page[b-cxq30uu0er] {
        padding: 16px;
    }

    .vx-panel[b-cxq30uu0er] {
        padding: 16px;
    }
}
/* /Components/Pages/Billing/Components/InvoiceDetails.razor.rz.scp.css */
/* =========================================================
   PAGE LAYOUT
========================================================= */
.vx-page[b-arkkbcvpnr] {
    padding: 24px;
    background: #f8fafc;
    min-height: 100%;
}

.vx-page__stack[b-arkkbcvpnr] {
    display: grid;
    gap: 20px;
}

/* =========================================================
   PANELS (CARDS)
========================================================= */
.vx-panel[b-arkkbcvpnr] {
    background: #ffffff;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* =========================================================
   SUMMARY GRID
========================================================= */
.vx-summary-grid[b-arkkbcvpnr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.vx-summary-card[b-arkkbcvpnr] {
    background: #f1f5f9;
    border-radius: 10px;
    padding: 14px;
}

.vx-summary-card__label[b-arkkbcvpnr] {
    font-size: 12px;
    color: #64748b;
}

.vx-summary-card__value[b-arkkbcvpnr] {
    font-size: 18px;
    font-weight: 600;
    margin-top: 4px;
    color: #0f172a;
}

/* =========================================================
   TABLE
========================================================= */
.vx-table[b-arkkbcvpnr] {
    width: 100%;
    border-collapse: collapse;
}

    .vx-table th[b-arkkbcvpnr] {
        text-align: left;
        font-size: 13px;
        color: #64748b;
        padding-bottom: 10px;
    }

    .vx-table td[b-arkkbcvpnr] {
        padding: 10px 0;
        border-top: 1px solid #e2e8f0;
    }

/* =========================================================
   FORM
========================================================= */
.vx-form-grid[b-arkkbcvpnr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

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

.vx-label[b-arkkbcvpnr] {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 6px;
}

.vx-input[b-arkkbcvpnr] {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    box-sizing: border-box;
}

.vx-actions[b-arkkbcvpnr] {
    margin-top: 16px;
}

/* =========================================================
   BUTTONS
========================================================= */
.vx-button[b-arkkbcvpnr] {
    padding: 10px 16px;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    cursor: pointer;
}

.vx-button--primary[b-arkkbcvpnr] {
    background: #2563eb;
    color: white;
}

.vx-button--success[b-arkkbcvpnr] {
    background: #16a34a;
    color: white;
}

/* =========================================================
   STATUS BADGES
========================================================= */
.vx-badge[b-arkkbcvpnr] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.vx-badge--draft[b-arkkbcvpnr] {
    background: #e2e8f0;
    color: #334155;
}

.vx-badge--issued[b-arkkbcvpnr] {
    background: #dbeafe;
    color: #1d4ed8;
}

.vx-badge--partial[b-arkkbcvpnr] {
    background: #fef3c7;
    color: #92400e;
}

.vx-badge--paid[b-arkkbcvpnr] {
    background: #dcfce7;
    color: #166534;
}

.vx-badge--cancelled[b-arkkbcvpnr] {
    background: #fee2e2;
    color: #991b1b;
}

/* =========================================================
   PAYMENT LAYOUT
========================================================= */
.vx-payment-layout[b-arkkbcvpnr] {
    display: flex;
    justify-content: flex-end;
}

.vx-payment-form[b-arkkbcvpnr] {
    width: 25%;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 768px) {
    .vx-payment-form[b-arkkbcvpnr] {
        width: 100%;
        min-width:0;
    }
}

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

    .vx-panel[b-arkkbcvpnr] {
        padding: 16px;
    }

    .vx-summary-grid[b-arkkbcvpnr],
    .vx-form-grid[b-arkkbcvpnr] {
        grid-template-columns: 1fr;
    }

    .vx-payment-form[b-arkkbcvpnr] {
        width: 100%;
        min-width: 0;
    }

    .vx-table[b-arkkbcvpnr] {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}
/* /Components/Pages/Billing/Components/Invoices/InvoiceFilterBar.razor.rz.scp.css */
/* =========================================================
   FILE: InvoiceFilterBar.razor.css

   PURPOSE:
   Provides styling for invoice filtering and searching UI.

   RESPONSIBILITIES:
   - Render enterprise-grade toolbar layout
   - Maintain reusable filter field spacing
   - Support responsive invoice filtering controls

   IMPORTANT NOTES:
   - This stylesheet is Billing-specific
   - Intended for invoice workspace filtering UI
   ========================================================= */

.vx-filter-bar[b-05hwzv2sgx] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 24px;
}

.vx-filter-field[b-05hwzv2sgx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vx-filter-field--compact[b-05hwzv2sgx] {
    min-width: 180px;
}

.vx-filter-field--search[b-05hwzv2sgx] {
    flex: 1;
    min-width: 260px;
}

.vx-filter-label[b-05hwzv2sgx] {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
}

.vx-filter-input[b-05hwzv2sgx] {
    height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: #ffffff;
    font-size: 0.92rem;
}

    .vx-filter-input:focus[b-05hwzv2sgx] {
        outline: none;
        border-color: rgba(59, 130, 246, 0.45);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }
/* /Components/Pages/Billing/Components/Invoices/InvoicePageHeader.razor.rz.scp.css */
/* =========================================================
   FILE: InvoicePageHeader.razor.css

   PURPOSE:
   Provides styling for the invoice workspace header section.

   RESPONSIBILITIES:
   - Render enterprise-grade workspace header visuals
   - Maintain reusable spacing and typography
   - Support consistent billing workspace presentation

   IMPORTANT NOTES:
   - This stylesheet is Billing-specific
   - Intended for invoice workspace UI composition
   ========================================================= */

.vx-page-header[b-duhalfsv00] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.vx-page-header__title[b-duhalfsv00] {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
}

.vx-page-header__subtitle[b-duhalfsv00] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.68);
    max-width: 720px;
}
/* /Components/Pages/Billing/Components/Invoices/Invoices.razor.rz.scp.css */
/* =========================================================
   FILE: Invoices.razor.css

   PURPOSE:
   Provides layout styling for the invoice UI composition
   component inside the Billing workspace.

   RESPONSIBILITIES:
   - Control spacing between invoice UI sections
   - Keep invoice composition layout consistent
   - Avoid placing table, filter, or header-specific styling here

   IMPORTANT NOTES:
   - This stylesheet belongs to the new invoice composition component
   - Header, filter, table, badge, loading, error, and empty styles
     remain in their own scoped component stylesheets
   ========================================================= */

.vx-billing-invoices[b-80e47hsvcg] {
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* /Components/Pages/Billing/Components/Invoices/InvoiceTable.razor.rz.scp.css */
/* =========================================================
   FILE: InvoiceTable.razor.css

   PURPOSE:
   Provides styling for the Billing invoice table UI.

   RESPONSIBILITIES:
   - Render enterprise-grade invoice table visuals
   - Support responsive overflow handling
   - Maintain reusable table spacing and typography

   IMPORTANT NOTES:
   - This stylesheet is Billing-specific
   - Intended for invoice table rendering only
   ========================================================= */

.vx-table-wrap[b-w48lkh8ri3] {
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01) );
}

.vx-table[b-w48lkh8ri3] {
    width: 100%;
    border-collapse: collapse;
    min-width: 920px;
}

    .vx-table thead[b-w48lkh8ri3] {
        background: rgba(255, 255, 255, 0.03);
    }

    .vx-table th[b-w48lkh8ri3] {
        padding: 16px 18px;
        text-align: left;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.58);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .vx-table td[b-w48lkh8ri3] {
        padding: 18px;
        font-size: 0.92rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.82);
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

    .vx-table tbody tr[b-w48lkh8ri3] {
        transition: background-color 0.2s ease;
    }

        .vx-table tbody tr:hover[b-w48lkh8ri3] {
            background: rgba(255, 255, 255, 0.025);
        }

.vx-table__primary[b-w48lkh8ri3] {
    font-weight: 700;
    color: #ffffff;
}

.vx-table-placeholder[b-w48lkh8ri3] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    border-radius: 18px;
    border: 1px dashed rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.92rem;
    font-weight: 500;
}
/* /Components/Pages/Error.razor.rz.scp.css */
/* =========================================================
   FILE: Error.razor.css

   PURPOSE:
   Scoped styling for the Vixly Control Plane error page.

   RESPONSIBILITIES:
   - Style the branded error page
   - Present production-safe error messaging
   - Style request diagnostics
   - Style safe recovery actions

   IMPORTANT NOTES:
   - This file must sit beside Error.razor
   - This page uses MainLayout intentionally
   - Do not expose exception details in the UI
   ========================================================= */

/* =========================================================
   1. PAGE SHELL
   ========================================================= */

.vx-error-page[b-9ox2u6628v] {
    display: grid;
    place-items: center;
    min-height: calc(100vh - 180px);
}

/* =========================================================
   2. CARD
   ========================================================= */

.vx-error-card[b-9ox2u6628v] {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 28px;
    width: min(920px, 100%);
    padding: 34px;
    border: 1px solid rgba(248, 113, 113, 0.18);
    border-radius: 32px;
    background: radial-gradient(circle at top right, rgba(239, 68, 68, 0.12), transparent 22rem), linear-gradient(135deg, #ffffff 0%, #f8fafc 55%, #fff1f2 100%);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.08);
}

    .vx-error-card[b-9ox2u6628v]::before {
        position: absolute;
        right: -5rem;
        bottom: -5rem;
        width: 16rem;
        height: 16rem;
        content: "";
        border-radius: 999px;
        background: rgba(239, 68, 68, 0.08);
    }

/* =========================================================
   3. VISUAL
   ========================================================= */

.vx-error-card__visual[b-9ox2u6628v] {
    position: relative;
    z-index: 1;
}

.vx-error-card__code[b-9ox2u6628v] {
    display: grid;
    place-items: center;
    min-height: 220px;
    color: #ffffff;
    font-size: clamp(4rem, 9vw, 7rem);
    font-weight: 900;
    line-height: 1;
    border-radius: 26px;
    background: radial-gradient(circle at top right, rgba(252, 165, 165, 0.34), transparent 12rem), linear-gradient(135deg, #450a0a 0%, #991b1b 45%, #dc2626 100%);
    box-shadow: 0 24px 54px rgba(127, 29, 29, 0.18);
}

/* =========================================================
   4. CONTENT
   ========================================================= */

.vx-error-card__content[b-9ox2u6628v] {
    position: relative;
    z-index: 1;
    align-self: center;
}

.vx-error-card__badge[b-9ox2u6628v] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 7px 13px;
    color: #b91c1c;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid rgba(239, 68, 68, 0.16);
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.08);
}

.vx-error-card__title[b-9ox2u6628v] {
    margin: 0;
    color: #0f172a;
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.08em;
}

.vx-error-card__message[b-9ox2u6628v] {
    max-width: 560px;
    margin: 18px 0 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.8;
}

/* =========================================================
   5. REQUEST ID
   ========================================================= */

.vx-error-card__request[b-9ox2u6628v] {
    display: grid;
    gap: 6px;
    margin-top: 22px;
    padding: 14px 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
}

    .vx-error-card__request span[b-9ox2u6628v] {
        color: #64748b;
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .vx-error-card__request code[b-9ox2u6628v] {
        color: #0f172a;
        font-size: 13px;
        word-break: break-all;
    }

/* =========================================================
   6. ACTIONS
   ========================================================= */

.vx-error-card__actions[b-9ox2u6628v] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.vx-error-card__button[b-9ox2u6628v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 16px;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

    .vx-error-card__button:hover[b-9ox2u6628v] {
        transform: translateY(-1px);
    }

.vx-error-card__button--primary[b-9ox2u6628v] {
    color: #ffffff;
    border: none;
    background: linear-gradient(135deg, #dc2626, #991b1b);
    box-shadow: 0 18px 34px rgba(220, 38, 38, 0.20);
}

.vx-error-card__button--secondary[b-9ox2u6628v] {
    color: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.88);
}

/* =========================================================
   7. RESPONSIVE
   ========================================================= */

@media (max-width: 820px) {
    .vx-error-card[b-9ox2u6628v] {
        grid-template-columns: 1fr;
    }

    .vx-error-card__code[b-9ox2u6628v] {
        min-height: 180px;
    }
}

@media (max-width: 640px) {
    .vx-error-page[b-9ox2u6628v] {
        min-height: auto;
    }

    .vx-error-card[b-9ox2u6628v] {
        padding: 24px;
        border-radius: 26px;
    }

    .vx-error-card__actions[b-9ox2u6628v] {
        flex-direction: column;
    }

    .vx-error-card__button[b-9ox2u6628v] {
        width: 100%;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* =========================================================
   FILE: Home.razor.css

   PURPOSE:
   Scoped styling for the Vixly Hub Control Plane landing page.

   RESPONSIBILITIES:
   - Style the platform dashboard landing page
   - Style command-center hero section
   - Style KPI cards, module cards, panels, and notes
   - Keep Home.razor styling scoped to this page

   IMPORTANT NOTES:
   - This file must sit beside Home.razor
   - Scoped CSS requires exact filename pairing
   - Do NOT move these rules into app.css
   - This page belongs to ControlPlane, not Operations
   ========================================================= */

/* =========================================================
   1. PAGE SHELL
   ========================================================= */

.vx-hub-page[b-f58g8xfd6k] {
    display: grid;
    gap: 24px;
}

/* =========================================================
   2. HERO
   ========================================================= */

.vx-hub-hero[b-f58g8xfd6k] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 34px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 32px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.16), transparent 24rem), linear-gradient(135deg, #ffffff 0%, #f8fafc 52%, #eef2ff 100%);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.08);
}

    .vx-hub-hero[b-f58g8xfd6k]::before {
        position: absolute;
        right: -5rem;
        top: -5rem;
        width: 16rem;
        height: 16rem;
        content: "";
        border-radius: 999px;
        background: rgba(37, 99, 235, 0.08);
    }

.vx-hub-hero__content[b-f58g8xfd6k] {
    position: relative;
    z-index: 1;
    max-width: 760px;
}

.vx-hub-hero__badge[b-f58g8xfd6k] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 7px 13px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
}

.vx-hub-hero__title[b-f58g8xfd6k] {
    margin: 0;
    color: #0f172a;
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.08em;
}

.vx-hub-hero__subtitle[b-f58g8xfd6k] {
    max-width: 720px;
    margin: 18px 0 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.85;
}

.vx-hub-hero__status[b-f58g8xfd6k] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 12px 16px;
    color: #166534;
    font-size: 13px;
    font-weight: 850;
    border: 1px solid rgba(34, 197, 94, 0.18);
    border-radius: 999px;
    background: rgba(240, 253, 244, 0.92);
}

.vx-hub-hero__status-dot[b-f58g8xfd6k] {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.14);
}

/* =========================================================
   3. KPI GRID
   ========================================================= */

.vx-hub-kpi-grid[b-f58g8xfd6k] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.vx-hub-kpi-card[b-f58g8xfd6k] {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 24px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 10rem), rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}

.vx-hub-kpi-card__label[b-f58g8xfd6k] {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.vx-hub-kpi-card__value[b-f58g8xfd6k] {
    display: block;
    margin-top: 14px;
    color: #0f172a;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.06em;
}

.vx-hub-kpi-card__meta[b-f58g8xfd6k] {
    display: block;
    margin-top: 10px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}

/* =========================================================
   4. CONTENT GRID
   ========================================================= */

.vx-hub-content-grid[b-f58g8xfd6k] {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 20px;
}

.vx-hub-panel[b-f58g8xfd6k] {
    padding: 24px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}

.vx-hub-panel__header[b-f58g8xfd6k] {
    margin-bottom: 20px;
}

.vx-hub-panel__eyebrow[b-f58g8xfd6k] {
    display: inline-flex;
    margin-bottom: 8px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.vx-hub-panel__title[b-f58g8xfd6k] {
    margin: 0;
    color: #0f172a;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.vx-hub-panel__subtitle[b-f58g8xfd6k] {
    max-width: 640px;
    margin: 8px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.65;
}

/* =========================================================
   5. MODULE CARDS
   ========================================================= */

.vx-hub-module-grid[b-f58g8xfd6k] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.vx-hub-module-card[b-f58g8xfd6k] {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 94px;
    padding: 16px;
    text-align: left;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    cursor: pointer;
    appearance: none;
    font: inherit;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

    .vx-hub-module-card:hover[b-f58g8xfd6k] {
        transform: translateY(-1px);
        border-color: rgba(37, 99, 235, 0.24);
        background: #ffffff;
        box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
    }

.vx-hub-module-card__icon[b-f58g8xfd6k] {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: 17px;
    background: #eff6ff;
    font-size: 22px;
}

.vx-hub-module-card__content[b-f58g8xfd6k] {
    display: grid;
    gap: 5px;
    min-width: 0;
}

    .vx-hub-module-card__content strong[b-f58g8xfd6k] {
        color: #0f172a;
        font-size: 15px;
        font-weight: 900;
    }

    .vx-hub-module-card__content small[b-f58g8xfd6k] {
        color: #64748b;
        font-size: 12px;
        line-height: 1.45;
    }

/* =========================================================
   6. NOTES
   ========================================================= */

.vx-hub-notes-list[b-f58g8xfd6k] {
    display: grid;
    gap: 12px;
}

.vx-hub-note[b-f58g8xfd6k] {
    display: flex;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

    .vx-hub-note span[b-f58g8xfd6k] {
        width: 10px;
        height: 10px;
        margin-top: 5px;
        flex: 0 0 auto;
        border-radius: 999px;
        background: #2563eb;
        box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.1);
    }

    .vx-hub-note p[b-f58g8xfd6k] {
        margin: 0;
        color: #475569;
        font-size: 13px;
        line-height: 1.55;
    }

/* =========================================================
   7. RESPONSIVE
   ========================================================= */

@media (max-width: 1080px) {
    .vx-hub-hero[b-f58g8xfd6k],
    .vx-hub-content-grid[b-f58g8xfd6k] {
        grid-template-columns: 1fr;
    }

    .vx-hub-hero[b-f58g8xfd6k] {
        flex-direction: column;
        align-items: flex-start;
    }

    .vx-hub-kpi-grid[b-f58g8xfd6k] {
        grid-template-columns: 1fr;
    }

    .vx-hub-module-grid[b-f58g8xfd6k] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .vx-hub-hero[b-f58g8xfd6k],
    .vx-hub-panel[b-f58g8xfd6k] {
        padding: 22px;
        border-radius: 24px;
    }

    .vx-hub-hero__title[b-f58g8xfd6k] {
        font-size: 3rem;
    }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
/* =========================================================
   FILE: NotFoundPage.razor.css

   PURPOSE:
   Scoped styling for the Vixly Control Plane not-found page.

   RESPONSIBILITIES:
   - Style the branded 404 page
   - Provide polished empty-route presentation
   - Style not-found navigation actions
   - Keep not-found styling scoped to this page

   IMPORTANT NOTES:
   - This file must sit beside NotFoundPage.razor
   - This page uses MainLayout intentionally
   - Styling belongs to ControlPlane only
   ========================================================= */

/* =========================================================
   1. PAGE SHELL
   ========================================================= */

.vx-not-found[b-ktf1064red] {
    display: grid;
    place-items: center;
    min-height: calc(100vh - 180px);
}

/* =========================================================
   2. CARD
   ========================================================= */

.vx-not-found__card[b-ktf1064red] {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 28px;
    width: min(920px, 100%);
    padding: 34px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 32px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.14), transparent 22rem), linear-gradient(135deg, #ffffff 0%, #f8fafc 55%, #eef2ff 100%);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.08);
}

    .vx-not-found__card[b-ktf1064red]::before {
        position: absolute;
        right: -5rem;
        bottom: -5rem;
        width: 16rem;
        height: 16rem;
        content: "";
        border-radius: 999px;
        background: rgba(37, 99, 235, 0.08);
    }

/* =========================================================
   3. ERROR CODE
   ========================================================= */

.vx-not-found__code[b-ktf1064red] {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    min-height: 220px;
    color: #ffffff;
    font-size: clamp(4rem, 9vw, 7rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.09em;
    border-radius: 26px;
    background: radial-gradient(circle at top right, rgba(96, 165, 250, 0.34), transparent 12rem), linear-gradient(135deg, #020617 0%, #0f172a 45%, #1d4ed8 100%);
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.18);
}

/* =========================================================
   4. CONTENT
   ========================================================= */

.vx-not-found__content[b-ktf1064red] {
    position: relative;
    z-index: 1;
    align-self: center;
}

.vx-not-found__badge[b-ktf1064red] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 7px 13px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
}

.vx-not-found__title[b-ktf1064red] {
    margin: 0;
    color: #0f172a;
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.08em;
}

.vx-not-found__subtitle[b-ktf1064red] {
    max-width: 560px;
    margin: 18px 0 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.8;
}

/* =========================================================
   5. ACTIONS
   ========================================================= */

.vx-not-found__actions[b-ktf1064red] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.vx-not-found__button[b-ktf1064red] {
    min-height: 48px;
    padding: 0 18px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

    .vx-not-found__button:hover[b-ktf1064red] {
        transform: translateY(-1px);
    }

.vx-not-found__button--primary[b-ktf1064red] {
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.20);
}

.vx-not-found__button--secondary[b-ktf1064red] {
    color: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.88);
}

/* =========================================================
   6. RESPONSIVE
   ========================================================= */

@media (max-width: 820px) {
    .vx-not-found__card[b-ktf1064red] {
        grid-template-columns: 1fr;
    }

    .vx-not-found__code[b-ktf1064red] {
        min-height: 180px;
    }
}

@media (max-width: 640px) {
    .vx-not-found[b-ktf1064red] {
        min-height: auto;
    }

    .vx-not-found__card[b-ktf1064red] {
        padding: 24px;
        border-radius: 26px;
    }

    .vx-not-found__actions[b-ktf1064red] {
        flex-direction: column;
    }

    .vx-not-found__button[b-ktf1064red] {
        width: 100%;
    }
}
/* /Components/Pages/Subscriptions/EditSubscriptionPlan.razor.rz.scp.css */
/* =========================================================
   FILE: SubscriptionsEdit.razor.css

   PURPOSE:
   Styles the Edit Subscription Plan page in the Control Plane.

   RESPONSIBILITIES:
   - Provide a clean enterprise page shell
   - Style the edit subscription form sections
   - Style inputs, selects, and number fields with the current
     Vixly UI language
   - Keep actions and feedback visually consistent
   - Preserve responsive behavior for smaller screens

   IMPORTANT NOTES:
   - This file belongs beside the edit subscription page:
     SubscriptionsEdit.razor or the matching page component
     for /subscriptions/edit/{Id}
   - Uses normal selectors plus ::deep selectors so Blazor
     InputText, InputNumber, and InputSelect are styled
     reliably under CSS isolation
   ========================================================= */

/* =========================================================
   PAGE LAYOUT
   ========================================================= */

.vx-page[b-44b4erokxs] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-height: 100%;
    padding: 1.25rem;
    background: #f8fafc;
}

.vx-page__header[b-44b4erokxs] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.vx-page__title[b-44b4erokxs] {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}

.vx-page__subtitle[b-44b4erokxs] {
    margin: 0;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.55;
}

/* =========================================================
   MESSAGE
   ========================================================= */

.vx-message[b-44b4erokxs] {
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 0.92rem;
    line-height: 1.45;
    font-weight: 700;
}

/* =========================================================
   PANEL / CARD
   ========================================================= */

.vx-panel[b-44b4erokxs] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: #ffffff;
    border: 1px solid #dbe5f0;
    border-radius: 18px;
    padding: 1.25rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

/* =========================================================
   SECTION HEADERS
   ========================================================= */

.vx-section-header[b-44b4erokxs] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.vx-section-header--compact[b-44b4erokxs] {
    margin-top: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid #edf2f7;
}

.vx-section-title[b-44b4erokxs] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
}

/* =========================================================
   FORM GRID / FIELD SYSTEM
   ========================================================= */

.vx-form-grid[b-44b4erokxs] {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 1rem;
}

.vx-field[b-44b4erokxs] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.vx-field--full[b-44b4erokxs] {
    grid-column: 1 / -1;
}

.vx-label[b-44b4erokxs] {
    font-size: 0.9rem;
    color: #1e293b;
    font-weight: 700;
    line-height: 1.35;
}

/* =========================================================
   INPUTS / SELECTS
   ========================================================= */

.vx-input[b-44b4erokxs],
[b-44b4erokxs] .vx-input {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0 0.9rem;
    font: inherit;
    font-size: 0.94rem;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

    .vx-input:hover:not(:disabled)[b-44b4erokxs],
    [b-44b4erokxs] .vx-input:hover:not(:disabled) {
        border-color: #94a3b8;
    }

    .vx-input:focus[b-44b4erokxs],
    [b-44b4erokxs] .vx-input:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }

    .vx-input:disabled[b-44b4erokxs],
    [b-44b4erokxs] .vx-input:disabled {
        color: #64748b;
        background: #f8fafc;
        border-color: #dbe5f0;
        cursor: not-allowed;
    }

    .vx-input[b-44b4erokxs]::placeholder,
    [b-44b4erokxs] .vx-input::placeholder {
        color: #94a3b8;
    }

select.vx-input[b-44b4erokxs],
[b-44b4erokxs] select.vx-input {
    cursor: pointer;
    padding-right: 2.75rem;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

/* =========================================================
   ACTIONS
   ========================================================= */

.vx-actions[b-44b4erokxs] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid #edf2f7;
}

.vx-button[b-44b4erokxs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    height: 42px;
    padding: 0 1rem;
    border-radius: 10px;
    border: none;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
}

    .vx-button:hover:not(:disabled)[b-44b4erokxs] {
        transform: translateY(-1px);
    }

    .vx-button:disabled[b-44b4erokxs] {
        opacity: 0.6;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }

.vx-button--primary[b-44b4erokxs] {
    color: #ffffff;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
}

    .vx-button--primary:hover:not(:disabled)[b-44b4erokxs] {
        box-shadow: 0 12px 22px rgba(37, 99, 235, 0.3);
    }

.vx-button--secondary[b-44b4erokxs] {
    color: #334155;
    background: #f8fafc;
    border: 1px solid #d6e0ea;
}

    .vx-button--secondary:hover:not(:disabled)[b-44b4erokxs] {
        color: #0f172a;
        background: #f1f5f9;
        border-color: #cbd5e1;
    }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .vx-form-grid[b-44b4erokxs] {
        grid-template-columns: 1fr;
    }

    .vx-field--full[b-44b4erokxs] {
        grid-column: auto;
    }
}

@media (max-width: 640px) {
    .vx-page[b-44b4erokxs] {
        padding: 1rem;
    }

    .vx-panel[b-44b4erokxs] {
        padding: 1rem;
        border-radius: 16px;
    }

    .vx-page__title[b-44b4erokxs] {
        font-size: 1.35rem;
    }

    .vx-section-title[b-44b4erokxs] {
        font-size: 1.05rem;
    }

    .vx-actions[b-44b4erokxs] {
        align-items: stretch;
        flex-direction: column;
    }

    .vx-button[b-44b4erokxs] {
        width: 100%;
    }
}
/* /Components/Pages/Subscriptions/Subscriptions.razor.rz.scp.css */
/* =========================================================
   FILE: Subscriptions.razor.css

   PURPOSE:
   Scoped styling for the Vixly Control Plane subscriptions page.

   RESPONSIBILITIES:
   - Style commercial subscription management workspace
   - Style metrics strip, plan composer, commercial engine,
     simulation output, and existing plan registry
   - Keep subscription-plan management visually aligned with
     the ControlPlane executive/platform design language

   IMPORTANT NOTES:
   - This stylesheet is scoped to Subscriptions.razor
   - Do NOT move these rules to app.css
   - This is visual-only styling
   - Business behavior remains in Subscriptions.razor
   ========================================================= */

/* =========================================================
   1. PAGE SHELL
   ========================================================= */

.vx-subscriptions-page[b-gv30gm4ybd] {
    display: grid;
    gap: 22px;
}

/* =========================================================
   2. TOP ACTION ROW
   ========================================================= */

.vx-subscriptions-toolbar[b-gv30gm4ybd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

/* =========================================================
   3. SHARED BUTTONS
   ========================================================= */

.vx-subscriptions-button[b-gv30gm4ybd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 15px;
    border-radius: 14px;
    border: 1px solid transparent;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease, opacity 160ms ease;
}

    .vx-subscriptions-button:hover:not(:disabled)[b-gv30gm4ybd] {
        transform: translateY(-1px);
    }

    .vx-subscriptions-button:disabled[b-gv30gm4ybd] {
        cursor: not-allowed;
        opacity: 0.56;
        box-shadow: none;
    }

.vx-subscriptions-button--primary[b-gv30gm4ybd] {
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.18);
}

.vx-subscriptions-button--secondary[b-gv30gm4ybd] {
    color: #0f172a;
    background: #ffffff;
    border-color: rgba(148, 163, 184, 0.26);
}

    .vx-subscriptions-button--secondary:hover:not(:disabled)[b-gv30gm4ybd] {
        background: #f8fafc;
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
    }

.vx-subscriptions-button--danger[b-gv30gm4ybd] {
    color: #ffffff;
    background: linear-gradient(135deg, #dc2626, #991b1b);
    box-shadow: 0 14px 28px rgba(220, 38, 38, 0.16);
}

/* =========================================================
   4. METRICS STRIP
   ========================================================= */

.vx-subscriptions-metrics[b-gv30gm4ybd] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.vx-subscriptions-metric-card[b-gv30gm4ybd] {
    position: relative;
    overflow: hidden;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 22px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.07), transparent 9rem), rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.055);
}

.vx-subscriptions-metric-card__label[b-gv30gm4ybd] {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.vx-subscriptions-metric-card__value[b-gv30gm4ybd] {
    display: block;
    margin-top: 12px;
    color: #0f172a;
    font-size: clamp(1.5rem, 2vw, 2.1rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
}

/* =========================================================
   5. MESSAGE
   ========================================================= */

.vx-subscriptions-message[b-gv30gm4ybd] {
    padding: 15px 17px;
    border-radius: 18px;
    color: #1d4ed8;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.16);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.55;
}

/* =========================================================
   6. COMMERCIAL PLAN COMPOSER
   ========================================================= */

.vx-plan-composer[b-gv30gm4ybd] {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 28px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.10), transparent 22rem), linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.94));
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.07);
}

    .vx-plan-composer[b-gv30gm4ybd]::before {
        position: absolute;
        right: -5rem;
        top: -5rem;
        width: 15rem;
        height: 15rem;
        content: "";
        border-radius: 999px;
        background: rgba(37, 99, 235, 0.06);
        pointer-events: none;
    }

.vx-plan-composer__header[b-gv30gm4ybd] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.vx-plan-composer__eyebrow[b-gv30gm4ybd] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 6px 12px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.12);
}

.vx-plan-composer__title[b-gv30gm4ybd] {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.06em;
}

.vx-plan-composer__subtitle[b-gv30gm4ybd] {
    max-width: 760px;
    margin: 12px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.75;
}

.vx-plan-composer__status[b-gv30gm4ybd] {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.vx-plan-composer__status--valid[b-gv30gm4ybd] {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.vx-plan-composer__status--invalid[b-gv30gm4ybd] {
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
}

.vx-plan-composer__grid[b-gv30gm4ybd] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
    gap: 22px;
    align-items: start;
}

.vx-plan-composer__configuration[b-gv30gm4ybd] {
    display: grid;
    gap: 16px;
}

.vx-plan-composer__section[b-gv30gm4ybd] {
    padding: 20px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.045);
}

.vx-plan-composer__section-header[b-gv30gm4ybd] {
    display: flex;
    gap: 13px;
    margin-bottom: 18px;
}

.vx-plan-composer__section-index[b-gv30gm4ybd] {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 15px;
    color: #2563eb;
    background: #eff6ff;
    font-size: 12px;
    font-weight: 900;
}

.vx-plan-composer__section-title[b-gv30gm4ybd] {
    margin: 0;
    color: #0f172a;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.vx-plan-composer__section-subtitle[b-gv30gm4ybd] {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
}

/* =========================================================
   7. FORM FIELDS
   ========================================================= */

.vx-subscriptions-form-grid[b-gv30gm4ybd] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.vx-subscriptions-field[b-gv30gm4ybd] {
    display: grid;
    gap: 8px;
}

.vx-subscriptions-field--active[b-gv30gm4ybd] {
    padding: 12px;
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 18px;
    background: rgba(239, 246, 255, 0.78);
}

.vx-subscriptions-label[b-gv30gm4ybd] {
    color: #334155;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.vx-subscriptions-input[b-gv30gm4ybd],
[b-gv30gm4ybd] .vx-subscriptions-input {
    width: 100%;
    min-height: 54px;
    padding: 0 16px;
    color: #0f172a;
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.96);
    outline: none;
    box-sizing: border-box;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

    .vx-subscriptions-input:focus[b-gv30gm4ybd],
    [b-gv30gm4ybd] .vx-subscriptions-input:focus {
        border-color: rgba(37, 99, 235, 0.42);
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10);
    }

.vx-subscriptions-select[b-gv30gm4ybd],
[b-gv30gm4ybd] .vx-subscriptions-select {
    cursor: pointer;
}

/* =========================================================
   8. COMMERCIAL ENGINE
   ========================================================= */

.vx-commercial-engine[b-gv30gm4ybd] {
    position: sticky;
    top: 112px;
    display: grid;
    gap: 16px;
    padding: 20px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 24px;
    background: radial-gradient(circle at top right, rgba(96, 165, 250, 0.22), transparent 14rem), linear-gradient(135deg, #020617 0%, #0f172a 48%, #1d4ed8 100%);
    color: #ffffff;
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.18);
}

.vx-commercial-engine__header[b-gv30gm4ybd] {
    display: flex;
    gap: 13px;
    align-items: center;
}

.vx-commercial-engine__icon[b-gv30gm4ybd] {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.10);
    font-size: 22px;
}

.vx-commercial-engine__title[b-gv30gm4ybd] {
    margin: 0;
    color: #ffffff;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.vx-commercial-engine__subtitle[b-gv30gm4ybd] {
    margin: 5px 0 0;
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1.45;
}

.vx-commercial-engine__validity[b-gv30gm4ybd] {
    padding: 12px 14px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.45;
}

.vx-commercial-engine__validity--valid[b-gv30gm4ybd] {
    color: #bbf7d0;
    background: rgba(22, 163, 74, 0.14);
    border: 1px solid rgba(187, 247, 208, 0.18);
}

.vx-commercial-engine__validity--invalid[b-gv30gm4ybd] {
    color: #fde68a;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(253, 230, 138, 0.18);
}

.vx-commercial-engine__preview-grid[b-gv30gm4ybd] {
    display: grid;
    gap: 10px;
}

.vx-commercial-engine__preview-item[b-gv30gm4ybd] {
    display: grid;
    gap: 6px;
    padding: 14px;
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.075);
    border: 1px solid rgba(255, 255, 255, 0.09);
}

.vx-commercial-engine__preview-item--active[b-gv30gm4ybd] {
    background: rgba(37, 99, 235, 0.28);
    border-color: rgba(147, 197, 253, 0.28);
}

.vx-commercial-engine__preview-item span[b-gv30gm4ybd] {
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vx-commercial-engine__preview-item strong[b-gv30gm4ybd] {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.vx-commercial-engine__preview-item small[b-gv30gm4ybd] {
    color: #cbd5e1;
    font-size: 11px;
}

/* =========================================================
   9. COMMERCIAL RESULT
   ========================================================= */

.vx-commercial-result[b-gv30gm4ybd] {
    display: grid;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.vx-commercial-result__header[b-gv30gm4ybd] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 800;
}

    .vx-commercial-result__header strong[b-gv30gm4ybd] {
        color: #bbf7d0;
    }

.vx-commercial-result__total[b-gv30gm4ybd] {
    display: grid;
    gap: 6px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

    .vx-commercial-result__total span[b-gv30gm4ybd] {
        color: #cbd5e1;
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .vx-commercial-result__total strong[b-gv30gm4ybd] {
        color: #ffffff;
        font-size: 2rem;
        font-weight: 900;
        line-height: 1;
        letter-spacing: -0.06em;
    }

.vx-commercial-result__grid[b-gv30gm4ybd],
.vx-commercial-result__meta[b-gv30gm4ybd] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

    .vx-commercial-result__item[b-gv30gm4ybd],
    .vx-commercial-result__meta div[b-gv30gm4ybd] {
        display: grid;
        gap: 5px;
        padding: 11px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.07);
    }

        .vx-commercial-result__item span[b-gv30gm4ybd],
        .vx-commercial-result__meta span[b-gv30gm4ybd] {
            color: #cbd5e1;
            font-size: 10px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.07em;
        }

        .vx-commercial-result__item strong[b-gv30gm4ybd],
        .vx-commercial-result__meta strong[b-gv30gm4ybd] {
            color: #ffffff;
            font-size: 12px;
            font-weight: 900;
        }

/* =========================================================
   10. ACTION ROWS
   ========================================================= */

.vx-subscriptions-actions[b-gv30gm4ybd] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.vx-subscriptions-actions--composer[b-gv30gm4ybd] {
    margin-top: 0;
}

/* =========================================================
   11. PLAN REGISTRY
   ========================================================= */

.vx-plan-registry[b-gv30gm4ybd] {
    padding: 24px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.07);
}

.vx-plan-registry__header[b-gv30gm4ybd] {
    margin-bottom: 20px;
}

.vx-plan-registry__eyebrow[b-gv30gm4ybd] {
    display: inline-flex;
    margin-bottom: 8px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.vx-plan-registry__title[b-gv30gm4ybd] {
    margin: 0;
    color: #0f172a;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.vx-plan-registry__subtitle[b-gv30gm4ybd] {
    max-width: 680px;
    margin: 8px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.65;
}

.vx-subscriptions-empty[b-gv30gm4ybd] {
    padding: 28px;
    border: 1px dashed rgba(148, 163, 184, 0.34);
    border-radius: 22px;
    background: rgba(248, 250, 252, 0.86);
    color: #64748b;
    font-size: 14px;
    font-weight: 800;
}

/* =========================================================
   12. PLAN TABLE
   ========================================================= */

.vx-plan-table-shell[b-gv30gm4ybd] {
    overflow-x: auto;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
}

.vx-plan-table[b-gv30gm4ybd] {
    width: 100%;
    min-width: 1120px;
    border-collapse: separate;
    border-spacing: 0;
}

    .vx-plan-table thead th[b-gv30gm4ybd] {
        padding: 16px;
        color: #64748b;
        font-size: 11px;
        font-weight: 900;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        white-space: nowrap;
        border-bottom: 1px solid rgba(226, 232, 240, 0.95);
        background: linear-gradient(180deg, #f8fafc, #f1f5f9);
    }

    .vx-plan-table tbody td[b-gv30gm4ybd] {
        padding: 17px 16px;
        color: #0f172a;
        font-size: 14px;
        line-height: 1.45;
        vertical-align: middle;
        border-bottom: 1px solid rgba(226, 232, 240, 0.76);
        background: rgba(255, 255, 255, 0.96);
    }

    .vx-plan-table tbody tr:last-child td[b-gv30gm4ybd] {
        border-bottom: none;
    }

.vx-plan-table__row:hover td[b-gv30gm4ybd] {
    background: #f8fafc;
}

.vx-plan-table__row--invalid td[b-gv30gm4ybd] {
    background: rgba(254, 242, 242, 0.68);
}

.vx-plan-table__money[b-gv30gm4ybd] {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    white-space: nowrap;
}

.vx-plan-table__actions[b-gv30gm4ybd] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    white-space: nowrap;
}

/* =========================================================
   13. TABLE CONTENT / BADGES
   ========================================================= */

.vx-plan-code[b-gv30gm4ybd] {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 11px;
    border-radius: 999px;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.12);
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.vx-plan-name[b-gv30gm4ybd] {
    display: grid;
    gap: 5px;
}

    .vx-plan-name strong[b-gv30gm4ybd] {
        color: #0f172a;
        font-size: 14px;
        font-weight: 900;
    }

    .vx-plan-name span[b-gv30gm4ybd] {
        color: #64748b;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.07em;
    }

.vx-plan-pill[b-gv30gm4ybd],
.vx-plan-badge[b-gv30gm4ybd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.vx-plan-pill[b-gv30gm4ybd] {
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.vx-plan-badge--active[b-gv30gm4ybd],
.vx-plan-badge--valid[b-gv30gm4ybd] {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.vx-plan-badge--inactive[b-gv30gm4ybd] {
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.vx-plan-badge--danger[b-gv30gm4ybd] {
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fecaca;
}

/* =========================================================
   14. RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {
    .vx-subscriptions-metrics[b-gv30gm4ybd] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vx-plan-composer__grid[b-gv30gm4ybd] {
        grid-template-columns: 1fr;
    }

    .vx-commercial-engine[b-gv30gm4ybd] {
        position: relative;
        top: auto;
    }
}

@media (max-width: 760px) {
    .vx-subscriptions-toolbar[b-gv30gm4ybd] {
        flex-direction: column;
        align-items: stretch;
    }

    .vx-subscriptions-metrics[b-gv30gm4ybd],
    .vx-subscriptions-form-grid[b-gv30gm4ybd],
    .vx-commercial-result__grid[b-gv30gm4ybd],
    .vx-commercial-result__meta[b-gv30gm4ybd] {
        grid-template-columns: 1fr;
    }

    .vx-plan-composer[b-gv30gm4ybd],
    .vx-plan-registry[b-gv30gm4ybd] {
        padding: 18px;
        border-radius: 22px;
    }

    .vx-plan-composer__header[b-gv30gm4ybd] {
        flex-direction: column;
    }

    .vx-subscriptions-button[b-gv30gm4ybd] {
        width: 100%;
    }
}
/* /Components/Pages/Tenants/Components/Details/Subscriptions/AssignTenantSubscription.razor.rz.scp.css */
/* =========================================================
   FILE: AssignTenantSubscription.razor.css

   PURPOSE:
   Scoped styles for the AssignTenantSubscription component.

   RESPONSIBILITIES:
   - Style subscription assignment surface
   - Style plan selection and assignment setup cards
   - Style assignment form fields and preview summary
   - Style validation/error messaging
   - Style assignment action buttons
   - Keep visual language aligned with ControlPlane UI

   IMPORTANT NOTES:
   - This file is scoped to AssignTenantSubscription.razor
   - Business behavior remains in the Razor component
   - Do NOT move these styles to app.css
   - Blazor InputSelect/InputNumber/InputDate require ::deep
     so scoped CSS can style their rendered form elements
   ========================================================= */

.vx-assign-subscription[b-pax04kdxna] {
    position: relative;
    overflow: hidden;
    padding: 28px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 30px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.10), transparent 24rem), linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.07);
}

    .vx-assign-subscription[b-pax04kdxna]::before {
        position: absolute;
        right: -5rem;
        top: -5rem;
        width: 16rem;
        height: 16rem;
        content: "";
        border-radius: 999px;
        background: rgba(37, 99, 235, 0.06);
        pointer-events: none;
    }

.vx-assign-subscription__header[b-pax04kdxna] {
    position: relative;
    z-index: 1;
    margin-bottom: 26px;
}

.vx-assign-subscription__eyebrow[b-pax04kdxna] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 12px;
    padding: 6px 12px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.12);
}

.vx-assign-subscription__title[b-pax04kdxna] {
    margin: 0;
    color: #0f172a;
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.06em;
}

.vx-assign-subscription__subtitle[b-pax04kdxna] {
    max-width: 860px;
    margin: 14px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.75;
}

.vx-assign-subscription__grid[b-pax04kdxna] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    gap: 24px;
    align-items: start;
}

.vx-assign-subscription__card[b-pax04kdxna] {
    min-width: 0;
    padding: 24px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}

.vx-assign-subscription__card-header[b-pax04kdxna] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.vx-assign-subscription__card-icon[b-pax04kdxna] {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 18px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 22px;
}

.vx-assign-subscription__card-title[b-pax04kdxna] {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.vx-assign-subscription__card-subtitle[b-pax04kdxna] {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
}

.vx-assign-subscription__form[b-pax04kdxna] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.vx-assign-subscription__field[b-pax04kdxna] {
    display: grid;
    gap: 8px;
}

.vx-assign-subscription__label[b-pax04kdxna] {
    color: #475569;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

[b-pax04kdxna] .vx-assign-subscription__input {
    width: 100%;
    min-height: 56px;
    padding: 0 16px;
    color: #0f172a;
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    outline: none;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.035);
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

    [b-pax04kdxna] .vx-assign-subscription__input:focus {
        border-color: rgba(37, 99, 235, 0.42);
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10);
    }

.vx-assign-subscription__empty[b-pax04kdxna] {
    margin-top: 18px;
    padding: 18px;
    border: 1px dashed rgba(148, 163, 184, 0.34);
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.86);
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.65;
}

.vx-assign-subscription__preview-stack[b-pax04kdxna] {
    display: grid;
    gap: 12px;
    margin-top: 20px;
}

.vx-assign-subscription__preview-row[b-pax04kdxna] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

    .vx-assign-subscription__preview-row:last-child[b-pax04kdxna] {
        padding-bottom: 0;
        border-bottom: none;
    }

.vx-assign-subscription__preview-label[b-pax04kdxna] {
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
}

.vx-assign-subscription__preview-value[b-pax04kdxna] {
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
    text-align: right;
    overflow-wrap: anywhere;
}

.vx-assign-subscription__message[b-pax04kdxna] {
    position: relative;
    z-index: 1;
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 750;
}

.vx-assign-subscription__message--error[b-pax04kdxna] {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.16);
}

.vx-assign-subscription__actions[b-pax04kdxna] {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 12px;
    margin-top: 22px;
}

.vx-assign-subscription__button[b-pax04kdxna] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    min-width: 170px;
    padding: 0 20px;
    border-radius: 16px;
    border: 1px solid transparent;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease, opacity 160ms ease;
}

    .vx-assign-subscription__button:hover:not(:disabled)[b-pax04kdxna] {
        transform: translateY(-1px);
    }

    .vx-assign-subscription__button:disabled[b-pax04kdxna] {
        cursor: not-allowed;
        opacity: 0.56;
        box-shadow: none;
    }

.vx-assign-subscription__button--primary[b-pax04kdxna] {
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.20);
}

.vx-assign-subscription__button--secondary[b-pax04kdxna] {
    color: #0f172a;
    background: #ffffff;
    border-color: rgba(148, 163, 184, 0.26);
}

    .vx-assign-subscription__button--secondary:hover:not(:disabled)[b-pax04kdxna] {
        background: #f8fafc;
        box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
    }

@media (max-width: 980px) {
    .vx-assign-subscription__grid[b-pax04kdxna] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .vx-assign-subscription[b-pax04kdxna] {
        padding: 18px;
        border-radius: 22px;
    }

    .vx-assign-subscription__card[b-pax04kdxna] {
        padding: 18px;
        border-radius: 20px;
    }

    .vx-assign-subscription__form[b-pax04kdxna] {
        grid-template-columns: 1fr;
    }

    .vx-assign-subscription__actions[b-pax04kdxna] {
        flex-direction: column;
    }

    .vx-assign-subscription__button[b-pax04kdxna] {
        width: 100%;
        min-width: 0;
    }
}
/* /Components/Pages/Tenants/Components/Details/Subscriptions/TenantInvoices.razor.rz.scp.css */
/* =========================================================
   FILE: TenantInvoices.razor.css

   PURPOSE:
   Provides styling for the tenant invoice visibility surface.

   RESPONSIBILITIES:
   - Render tenant invoice panel visuals
   - Render invoice table, status badges, and action buttons
   - Render dismiss action
   - Preserve Vixly ControlPlane enterprise visual language

   IMPORTANT NOTES:
   - This stylesheet is scoped to TenantInvoices.razor
   ========================================================= */

.vx-tenant-invoices[b-eri6hx3fw9] {
    padding: 24px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.07);
}

/* =========================================================
   TOPBAR
   ========================================================= */

.vx-tenant-invoices__topbar[b-eri6hx3fw9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.vx-tenant-invoices__topbar-actions[b-eri6hx3fw9] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.vx-tenant-invoices__header[b-eri6hx3fw9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.vx-tenant-invoices__eyebrow[b-eri6hx3fw9] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 6px 12px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
}

.vx-tenant-invoices__title[b-eri6hx3fw9] {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.vx-tenant-invoices__subtitle[b-eri6hx3fw9] {
    max-width: 760px;
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}

/* =========================================================
   SUMMARY
   ========================================================= */

.vx-tenant-invoices__summary[b-eri6hx3fw9] {
    display: grid;
    gap: 6px;
    width: fit-content;
    min-width: 120px;
    padding: 16px 18px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
}

.vx-tenant-invoices__summary-label[b-eri6hx3fw9] {
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vx-tenant-invoices__summary-value[b-eri6hx3fw9] {
    color: #0f172a;
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1;
}

/* =========================================================
   CLOSE ACTION
   ========================================================= */

.vx-tenant-invoices__close[b-eri6hx3fw9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    color: #475569;
    cursor: pointer;
    font: inherit;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

    .vx-tenant-invoices__close:hover[b-eri6hx3fw9] {
        transform: translateY(-1px);
        color: #b91c1c;
        border-color: rgba(239, 68, 68, 0.22);
        background: rgba(254, 242, 242, 0.96);
        box-shadow: 0 12px 26px rgba(239, 68, 68, 0.08);
    }

/* =========================================================
   TABLE
   ========================================================= */

.vx-tenant-invoices__table-shell[b-eri6hx3fw9] {
    overflow-x: auto;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
}

.vx-tenant-invoices__table[b-eri6hx3fw9] {
    width: 100%;
    min-width: 1100px;
    border-collapse: collapse;
}

    .vx-tenant-invoices__table thead[b-eri6hx3fw9] {
        background: rgba(248, 250, 252, 0.92);
    }

    .vx-tenant-invoices__table th[b-eri6hx3fw9] {
        padding: 15px 18px;
        color: #64748b;
        font-size: 11px;
        font-weight: 900;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        border-bottom: 1px solid rgba(226, 232, 240, 0.95);
    }

    .vx-tenant-invoices__table td[b-eri6hx3fw9] {
        padding: 16px 18px;
        vertical-align: middle;
        border-bottom: 1px solid rgba(226, 232, 240, 0.75);
    }

    .vx-tenant-invoices__table tbody tr:last-child td[b-eri6hx3fw9] {
        border-bottom: none;
    }

    .vx-tenant-invoices__table tbody tr[b-eri6hx3fw9] {
        transition: background 160ms ease;
    }

        .vx-tenant-invoices__table tbody tr:hover[b-eri6hx3fw9] {
            background: rgba(248, 250, 252, 0.72);
        }

/* =========================================================
   NUMBER
   ========================================================= */

.vx-tenant-invoices__number[b-eri6hx3fw9] {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

/* =========================================================
   MONEY
   ========================================================= */

.vx-tenant-invoices__money[b-eri6hx3fw9] {
    color: #0f172a;
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
}

.vx-tenant-invoices__money--balance[b-eri6hx3fw9] {
    color: #b91c1c;
}

/* =========================================================
   DATE
   ========================================================= */

.vx-tenant-invoices__date[b-eri6hx3fw9] {
    color: #475569;
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
}

/* =========================================================
   BADGES
   ========================================================= */

.vx-tenant-invoice-badge[b-eri6hx3fw9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 11px;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.95);
    color: #475569;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.vx-tenant-invoice-badge--paid[b-eri6hx3fw9] {
    color: #15803d;
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(34, 197, 94, 0.10);
}

.vx-tenant-invoice-badge--issued[b-eri6hx3fw9] {
    color: #2563eb;
    border-color: rgba(37, 99, 235, 0.22);
    background: rgba(37, 99, 235, 0.10);
}

.vx-tenant-invoice-badge--pending[b-eri6hx3fw9] {
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.22);
    background: rgba(245, 158, 11, 0.10);
}

.vx-tenant-invoice-badge--overdue[b-eri6hx3fw9],
.vx-tenant-invoice-badge--cancelled[b-eri6hx3fw9] {
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.22);
    background: rgba(239, 68, 68, 0.10);
}

.vx-tenant-invoice-badge--unknown[b-eri6hx3fw9] {
    color: #334155;
    border-color: rgba(51, 65, 85, 0.18);
    background: rgba(241, 245, 249, 0.96);
}

/* =========================================================
   ACTIONS
   ========================================================= */

.vx-tenant-invoices__actions[b-eri6hx3fw9] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vx-tenant-invoices__action-button[b-eri6hx3fw9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

    .vx-tenant-invoices__action-button:hover[b-eri6hx3fw9] {
        transform: translateY(-1px);
    }

.vx-tenant-invoices__action-button--view[b-eri6hx3fw9] {
    color: #2563eb;
    border-color: rgba(37, 99, 235, 0.22);
    background: rgba(37, 99, 235, 0.10);
}

.vx-tenant-invoices__action-button--print[b-eri6hx3fw9] {
    color: #166534;
    border-color: rgba(34, 197, 94, 0.22);
    background: rgba(34, 197, 94, 0.10);
}

/* =========================================================
   EMPTY STATE
   ========================================================= */

.vx-tenant-invoices__empty[b-eri6hx3fw9] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 1px dashed rgba(148, 163, 184, 0.30);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(241, 245, 249, 0.86));
}

.vx-tenant-invoices__empty-icon[b-eri6hx3fw9] {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 18px;
    background: rgba(37, 99, 235, 0.08);
    font-size: 24px;
}

.vx-tenant-invoices__empty-content[b-eri6hx3fw9] {
    display: grid;
    gap: 6px;
}

.vx-tenant-invoices__empty-title[b-eri6hx3fw9] {
    color: #0f172a;
    font-size: 15px;
    font-weight: 900;
}

.vx-tenant-invoices__empty-text[b-eri6hx3fw9] {
    max-width: 720px;
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 640px) {

    .vx-tenant-invoices[b-eri6hx3fw9] {
        padding: 18px;
        border-radius: 22px;
    }

    .vx-tenant-invoices__topbar[b-eri6hx3fw9],
    .vx-tenant-invoices__header[b-eri6hx3fw9],
    .vx-tenant-invoices__empty[b-eri6hx3fw9] {
        flex-direction: column;
    }

    .vx-tenant-invoices__topbar-actions[b-eri6hx3fw9] {
        width: 100%;
        justify-content: space-between;
    }

    .vx-tenant-invoices__summary[b-eri6hx3fw9] {
        width: 100%;
    }
}
/* /Components/Pages/Tenants/Components/Details/Subscriptions/TenantLicenses.razor.rz.scp.css */
/* =========================================================
   FILE: TenantLicenses.razor.css

   PURPOSE:
   Provides styling for the tenant license/device visibility
   surface inside the ControlPlane tenant subscription workflow.

   RESPONSIBILITIES:
   - Render tenant license section visuals
   - Render license table and lifecycle badges
   - Render empty license state
   - Render dismiss action
   - Preserve Vixly ControlPlane enterprise visual language

   IMPORTANT NOTES:
   - This stylesheet is scoped to TenantLicenses.razor
   - License data is supplied by parent orchestration
   ========================================================= */

.vx-tenant-licenses[b-uazk18jbl8] {
    padding: 24px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.07);
}

.vx-tenant-licenses__header[b-uazk18jbl8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.vx-tenant-licenses__eyebrow[b-uazk18jbl8] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 6px 12px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
}

.vx-tenant-licenses__title[b-uazk18jbl8] {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.vx-tenant-licenses__subtitle[b-uazk18jbl8] {
    max-width: 760px;
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}

.vx-tenant-licenses__summary[b-uazk18jbl8] {
    display: grid;
    gap: 6px;
    width: fit-content;
    min-width: 120px;
    padding: 16px 18px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
}

.vx-tenant-licenses__summary-label[b-uazk18jbl8] {
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vx-tenant-licenses__summary-value[b-uazk18jbl8] {
    color: #0f172a;
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1;
}

/* =========================================================
   CLOSE ACTION
   ========================================================= */

.vx-tenant-licenses__close[b-uazk18jbl8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    color: #475569;
    cursor: pointer;
    font: inherit;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

    .vx-tenant-licenses__close:hover[b-uazk18jbl8] {
        transform: translateY(-1px);
        color: #b91c1c;
        border-color: rgba(239, 68, 68, 0.22);
        background: rgba(254, 242, 242, 0.96);
        box-shadow: 0 12px 26px rgba(239, 68, 68, 0.08);
    }

/* =========================================================
   TABLE
   ========================================================= */

.vx-tenant-licenses__table-shell[b-uazk18jbl8] {
    overflow-x: auto;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
}

.vx-tenant-licenses__table[b-uazk18jbl8] {
    width: 100%;
    min-width: 1040px;
    border-collapse: collapse;
}

    .vx-tenant-licenses__table thead[b-uazk18jbl8] {
        background: rgba(248, 250, 252, 0.92);
    }

    .vx-tenant-licenses__table th[b-uazk18jbl8] {
        padding: 15px 18px;
        color: #64748b;
        font-size: 11px;
        font-weight: 900;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        border-bottom: 1px solid rgba(226, 232, 240, 0.95);
    }

    .vx-tenant-licenses__table td[b-uazk18jbl8] {
        padding: 16px 18px;
        vertical-align: middle;
        border-bottom: 1px solid rgba(226, 232, 240, 0.75);
    }

    .vx-tenant-licenses__table tbody tr:last-child td[b-uazk18jbl8] {
        border-bottom: none;
    }

    .vx-tenant-licenses__table tbody tr[b-uazk18jbl8] {
        transition: background 160ms ease;
    }

        .vx-tenant-licenses__table tbody tr:hover[b-uazk18jbl8] {
            background: rgba(248, 250, 252, 0.72);
        }

.vx-tenant-licenses__code[b-uazk18jbl8] {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.vx-tenant-licenses__device[b-uazk18jbl8] {
    display: grid;
    gap: 4px;
}

    .vx-tenant-licenses__device strong[b-uazk18jbl8] {
        color: #0f172a;
        font-size: 13px;
        font-weight: 900;
        overflow-wrap: anywhere;
    }

    .vx-tenant-licenses__device span[b-uazk18jbl8] {
        color: #64748b;
        font-size: 12px;
        font-weight: 700;
        overflow-wrap: anywhere;
    }

.vx-tenant-licenses__date[b-uazk18jbl8] {
    color: #475569;
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
}

/* =========================================================
   BADGES
   ========================================================= */

.vx-tenant-license-badge[b-uazk18jbl8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 11px;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.95);
    color: #475569;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.vx-tenant-license-badge--open[b-uazk18jbl8],
.vx-tenant-license-badge--available[b-uazk18jbl8] {
    color: #15803d;
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(34, 197, 94, 0.10);
}

.vx-tenant-license-badge--bound[b-uazk18jbl8] {
    color: #2563eb;
    border-color: rgba(37, 99, 235, 0.22);
    background: rgba(37, 99, 235, 0.10);
}

.vx-tenant-license-badge--revoked[b-uazk18jbl8],
.vx-tenant-license-badge--requested[b-uazk18jbl8] {
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.22);
    background: rgba(239, 68, 68, 0.10);
}

.vx-tenant-license-badge--unavailable[b-uazk18jbl8],
.vx-tenant-license-badge--neutral[b-uazk18jbl8],
.vx-tenant-license-badge--unknown[b-uazk18jbl8] {
    color: #334155;
    border-color: rgba(51, 65, 85, 0.18);
    background: rgba(241, 245, 249, 0.96);
}

/* =========================================================
   EMPTY STATE
   ========================================================= */

.vx-tenant-licenses__empty[b-uazk18jbl8] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 1px dashed rgba(148, 163, 184, 0.30);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(241, 245, 249, 0.86));
}

.vx-tenant-licenses__empty-icon[b-uazk18jbl8] {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 18px;
    background: rgba(37, 99, 235, 0.08);
    font-size: 24px;
}

.vx-tenant-licenses__empty-content[b-uazk18jbl8] {
    display: grid;
    gap: 6px;
}

.vx-tenant-licenses__empty-title[b-uazk18jbl8] {
    color: #0f172a;
    font-size: 15px;
    font-weight: 900;
}

.vx-tenant-licenses__empty-text[b-uazk18jbl8] {
    max-width: 720px;
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 640px) {

    .vx-tenant-licenses[b-uazk18jbl8] {
        padding: 18px;
        border-radius: 22px;
    }

    .vx-tenant-licenses__topbar[b-uazk18jbl8],
    .vx-tenant-licenses__header[b-uazk18jbl8],
    .vx-tenant-licenses__empty[b-uazk18jbl8] {
        flex-direction: column;
    }

    .vx-tenant-licenses__topbar-actions[b-uazk18jbl8] {
        width: 100%;
        justify-content: space-between;
    }

    .vx-tenant-licenses__summary[b-uazk18jbl8] {
        width: 100%;
    }
}
/* =========================================================
   TOPBAR
   ========================================================= */

.vx-tenant-licenses__topbar[b-uazk18jbl8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.vx-tenant-licenses__topbar-actions[b-uazk18jbl8] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

/* =========================================================
   ACTIONS
   ========================================================= */

.vx-tenant-licenses__actions[b-uazk18jbl8] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vx-tenant-licenses__action-button[b-uazk18jbl8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.01em;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
}

    .vx-tenant-licenses__action-button:hover[b-uazk18jbl8] {
        transform: translateY(-1px);
    }

/* =========================================================
   ACCEPT
   ========================================================= */

.vx-tenant-licenses__action-button--accept[b-uazk18jbl8] {
    color: #166534;
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(34, 197, 94, 0.12);
}

    .vx-tenant-licenses__action-button--accept:hover[b-uazk18jbl8] {
        background: rgba(34, 197, 94, 0.18);
        box-shadow: 0 10px 22px rgba(34, 197, 94, 0.12);
    }

/* =========================================================
   DENY
   ========================================================= */

.vx-tenant-licenses__action-button--deny[b-uazk18jbl8] {
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.22);
    background: rgba(239, 68, 68, 0.12);
}

    .vx-tenant-licenses__action-button--deny:hover[b-uazk18jbl8] {
        background: rgba(239, 68, 68, 0.18);
        box-shadow: 0 10px 22px rgba(239, 68, 68, 0.12);
    }
/* /Components/Pages/Tenants/Components/Details/Subscriptions/TenantSubscriptionDetail.razor.rz.scp.css */
/* =========================================================
   FILE: TenantSubscriptionDetail.razor.css

   PURPOSE:
   Provides styling for the tenant subscription detail surface
   inside the ControlPlane tenant details view.

   RESPONSIBILITIES:
   - Render current subscription summary visuals
   - Render plan, billing, and license allocation cards
   - Render subscription action buttons
   - Preserve Vixly ControlPlane enterprise visual language

   IMPORTANT NOTES:
   - This stylesheet is scoped to TenantSubscriptionDetail.razor
   - This component is presentation-only
   - License and invoice sections will be wired later
   ========================================================= */

.vx-tenant-subscription-detail[b-hz3h69f0g2] {
    padding: 24px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 28px;
    background: radial-gradient( circle at top right, rgba(37, 99, 235, 0.08), transparent 22rem ), linear-gradient( 180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94) );
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.07);
}

.vx-tenant-subscription-detail__header[b-hz3h69f0g2] {
    margin-bottom: 22px;
}

.vx-tenant-subscription-detail__eyebrow[b-hz3h69f0g2] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 6px 12px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
}

.vx-tenant-subscription-detail__title[b-hz3h69f0g2] {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.vx-tenant-subscription-detail__subtitle[b-hz3h69f0g2] {
    max-width: 760px;
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}

.vx-tenant-subscription-detail__grid[b-hz3h69f0g2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.vx-tenant-subscription-detail__card[b-hz3h69f0g2] {
    display: grid;
    gap: 8px;
    min-height: 116px;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 22px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94) );
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

    .vx-tenant-subscription-detail__card:hover[b-hz3h69f0g2] {
        transform: translateY(-1px);
        border-color: rgba(37, 99, 235, 0.16);
        box-shadow: 0 16px 34px rgba(15, 23, 42, 0.05);
    }

.vx-tenant-subscription-detail__label[b-hz3h69f0g2] {
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vx-tenant-subscription-detail__value[b-hz3h69f0g2] {
    color: #0f172a;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.vx-tenant-subscription-detail__hint[b-hz3h69f0g2] {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

.vx-tenant-subscription-detail__empty[b-hz3h69f0g2] {
    display: grid;
    gap: 10px;
    padding: 20px;
    border: 1px dashed rgba(148, 163, 184, 0.30);
    border-radius: 22px;
    background: linear-gradient( 180deg, rgba(248, 250, 252, 0.92), rgba(241, 245, 249, 0.86) );
}

    .vx-tenant-subscription-detail__empty strong[b-hz3h69f0g2] {
        color: #0f172a;
        font-size: 15px;
        font-weight: 900;
    }

    .vx-tenant-subscription-detail__empty p[b-hz3h69f0g2] {
        max-width: 720px;
        margin: 0;
        color: #64748b;
        font-size: 14px;
        line-height: 1.7;
    }

.vx-tenant-subscription-detail__actions[b-hz3h69f0g2] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.vx-tenant-subscription-detail__button[b-hz3h69f0g2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 16px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
}

    .vx-tenant-subscription-detail__button:hover[b-hz3h69f0g2] {
        transform: translateY(-1px);
    }

.vx-tenant-subscription-detail__button--primary[b-hz3h69f0g2] {
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 16px 32px rgba(37, 99, 235, 0.18);
}

.vx-tenant-subscription-detail__button--secondary[b-hz3h69f0g2] {
    color: #0f172a;
    border-color: rgba(148, 163, 184, 0.26);
    background: #ffffff;
}

    .vx-tenant-subscription-detail__button--secondary:hover[b-hz3h69f0g2] {
        background: #f8fafc;
        box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
    }

@media (max-width: 640px) {
    .vx-tenant-subscription-detail[b-hz3h69f0g2] {
        padding: 18px;
        border-radius: 22px;
    }

    .vx-tenant-subscription-detail__grid[b-hz3h69f0g2] {
        grid-template-columns: 1fr;
    }

    .vx-tenant-subscription-detail__actions[b-hz3h69f0g2] {
        flex-direction: column;
    }

    .vx-tenant-subscription-detail__button[b-hz3h69f0g2] {
        width: 100%;
    }
}
/* /Components/Pages/Tenants/Components/Details/TenantCompanyProfilePanel.razor.rz.scp.css */
/* =========================================================
   FILE: TenantCompanyProfilePanel.razor.css

   PURPOSE:
   Provides styling for the tenant company profile content
   inside the tenant details workspace.

   RESPONSIBILITIES:
   - Style the company profile detail grid
   - Style individual company profile detail cards
   - Preserve Vixly ControlPlane light enterprise visuals
   - Keep only company-profile-specific CSS in this file

   IMPORTANT NOTES:
   - Shared panel shell styles are defined globally in:
     Components/Shared/Display/SharedPanels.css
   - This stylesheet should not duplicate .vx-tenant-panel styles
   - This panel displays company profile information only
   ========================================================= */

/* =========================================================
   1. COMPANY PROFILE GRID
   ========================================================= */

.vx-tenant-details-grid[b-rsqkqvq82q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

/* =========================================================
   2. COMPANY PROFILE DETAIL CARD
   ========================================================= */

.vx-tenant-detail-card[b-rsqkqvq82q] {
    display: grid;
    gap: 10px;
    min-height: 120px;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 22px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94) );
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

    .vx-tenant-detail-card:hover[b-rsqkqvq82q] {
        transform: translateY(-1px);
        border-color: rgba(37, 99, 235, 0.16);
        box-shadow: 0 16px 34px rgba(15, 23, 42, 0.05);
    }

/* =========================================================
   3. COMPANY PROFILE DETAIL TYPOGRAPHY
   ========================================================= */

.vx-tenant-detail-card__label[b-rsqkqvq82q] {
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vx-tenant-detail-card__value[b-rsqkqvq82q] {
    color: #0f172a;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* =========================================================
   4. RESPONSIVE
   ========================================================= */

@media (max-width: 640px) {
    .vx-tenant-details-grid[b-rsqkqvq82q] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Tenants/Components/Details/TenantDetails.razor.rz.scp.css */
/* =========================================================
   FILE: TenantDetails.razor.css

   PURPOSE:
   Provides layout styling for the tenant details composition
   component inside the ControlPlane tenant workspace.

   RESPONSIBILITIES:
   - Control tenant details page spacing
   - Maintain enterprise-grade section rhythm
   - Preserve Vixly ControlPlane visual consistency
   - Support responsive details composition layouts
   - Control the 60/40 company/owner information layout
   - Visually group commercial workflow surfaces

   IMPORTANT NOTES:
   - Child components own their isolated visual styling
   - This stylesheet controls composition/layout only
   ========================================================= */

.vx-tenant-details-page[b-r6b5ec5msq] {
    display: grid;
    gap: 24px;
}

/* =========================================================
   DETAILS LAYOUT
   ========================================================= */

.vx-tenant-details-layout[b-r6b5ec5msq] {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
    gap: 24px;
    align-items: start;
}

/* =========================================================
   COMMERCIAL WORKSPACE
   ========================================================= */

.vx-tenant-details-commercial-workspace[b-r6b5ec5msq] {
    display: grid;
    gap: 18px;
}
/* =========================================================
   DEVICE REGISTRATION LINK
   ========================================================= */

.vx-tenant-device-registration-link[b-r6b5ec5msq] {
    display: grid;
    gap: 14px;
    padding: 20px;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 22px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.10), transparent 18rem), linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}

.vx-tenant-device-registration-link__title[b-r6b5ec5msq] {
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
}

.vx-tenant-device-registration-link__input[b-r6b5ec5msq] {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    color: #334155;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    background: #ffffff;
    outline: none;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
    .vx-tenant-details-layout[b-r6b5ec5msq] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .vx-tenant-details-page[b-r6b5ec5msq] {
        gap: 20px;
    }

    .vx-tenant-details-layout[b-r6b5ec5msq],
    .vx-tenant-details-commercial-workspace[b-r6b5ec5msq] {
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .vx-tenant-details-page[b-r6b5ec5msq] {
        gap: 18px;
    }

    .vx-tenant-details-layout[b-r6b5ec5msq],
    .vx-tenant-details-commercial-workspace[b-r6b5ec5msq] {
        gap: 18px;
    }
}
/* /Components/Pages/Tenants/Components/Details/TenantDetailsTopBar.razor.rz.scp.css */
/* =========================================================
   FILE: TenantDetailsTopBar.razor.css

   PURPOSE:
   Provides styling for the tenant details top navigation bar.

   RESPONSIBILITIES:
   - Render the tenant details back action
   - Maintain Vixly ControlPlane button language
   - Keep topbar spacing aligned with tenant workspace UI

   IMPORTANT NOTES:
   - This stylesheet is Tenant Details-specific
   - Parent workspace owns view switching
   ========================================================= */

.vx-tenant-details-topbar[b-hqtlc9s133] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.vx-tenant-details-topbar__back-button[b-hqtlc9s133] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    color: #2563eb;
    font-size: 13px;
    font-weight: 900;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

    .vx-tenant-details-topbar__back-button:hover[b-hqtlc9s133] {
        transform: translateY(-1px);
        border-color: rgba(37, 99, 235, 0.20);
        background: rgba(37, 99, 235, 0.12);
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    }
/* /Components/Pages/Tenants/Components/Details/TenantIdentityStrip.razor.rz.scp.css */
/* =========================================================
   FILE: TenantIdentityStrip.razor.css

   PURPOSE:
   Provides styling for the tenant details identity strip.

   RESPONSIBILITIES:
   - Render primary tenant identity information
   - Display tenant code, portal, and country metadata
   - Preserve Vixly ControlPlane light enterprise language

   IMPORTANT NOTES:
   - This stylesheet is Tenant Details-specific
   - Identity data is provided by the parent details component
   ========================================================= */

.vx-tenant-identity[b-ic86uanlvz] {
    padding: 24px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 28px;
    background: radial-gradient( circle at top right, rgba(37, 99, 235, 0.10), transparent 20rem ), linear-gradient( 180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.94) );
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.07);
}

.vx-tenant-identity__main[b-ic86uanlvz] {
    display: grid;
    gap: 12px;
}

.vx-tenant-identity__eyebrow[b-ic86uanlvz] {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    padding: 6px 12px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
}

.vx-tenant-identity__name[b-ic86uanlvz] {
    margin: 0;
    color: #0f172a;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.05em;
}

.vx-tenant-identity__meta[b-ic86uanlvz] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vx-tenant-identity__meta-pill[b-ic86uanlvz] {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 11px;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .vx-tenant-identity[b-ic86uanlvz] {
        padding: 18px;
        border-radius: 22px;
    }

    .vx-tenant-identity__name[b-ic86uanlvz] {
        font-size: 1.6rem;
    }
}
/* /Components/Pages/Tenants/Components/Details/TenantOwnerPanel.razor.rz.scp.css */
/* =========================================================
   FILE: TenantOwnerPanel.razor.css

   PURPOSE:
   Provides styling for the tenant owner section inside
   the tenant details workspace.

   RESPONSIBILITIES:
   - Render tenant owner section visuals
   - Maintain Vixly ControlPlane enterprise consistency
   - Support owner detail card rendering
   - Support placeholder rendering when owner data is unavailable

   IMPORTANT NOTES:
   - This stylesheet is Tenant Details-specific
   - Shared panel shell styling lives in app.css
   - This file focuses only on owner-specific visuals
   ========================================================= */

/* =========================================================
   OWNER GRID
   ========================================================= */

.vx-tenant-owner-grid[b-89kq4sm7z3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

/* =========================================================
   OWNER CARD
   ========================================================= */

.vx-tenant-owner-card[b-89kq4sm7z3] {
    display: grid;
    gap: 10px;
    min-height: 120px;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 22px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94) );
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

    .vx-tenant-owner-card:hover[b-89kq4sm7z3] {
        transform: translateY(-1px);
        border-color: rgba(37, 99, 235, 0.16);
        box-shadow: 0 16px 34px rgba(15, 23, 42, 0.05);
    }

.vx-tenant-owner-card__label[b-89kq4sm7z3] {
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vx-tenant-owner-card__value[b-89kq4sm7z3] {
    color: #0f172a;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* =========================================================
   OWNER PLACEHOLDER
   ========================================================= */

.vx-tenant-owner-placeholder[b-89kq4sm7z3] {
    display: grid;
    gap: 10px;
    padding: 20px;
    border: 1px dashed rgba(148, 163, 184, 0.30);
    border-radius: 22px;
    background: linear-gradient( 180deg, rgba(248, 250, 252, 0.92), rgba(241, 245, 249, 0.86) );
}

    .vx-tenant-owner-placeholder strong[b-89kq4sm7z3] {
        color: #0f172a;
        font-size: 15px;
        font-weight: 900;
    }

    .vx-tenant-owner-placeholder p[b-89kq4sm7z3] {
        max-width: 720px;
        margin: 0;
        color: #64748b;
        font-size: 14px;
        line-height: 1.7;
    }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 640px) {
    .vx-tenant-owner-grid[b-89kq4sm7z3] {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   PLAN ACTION BUTTON
   ========================================================= */

.vx-tenant-owner-plan-button[b-89kq4sm7z3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    width: 100%;
    padding: 0 16px;
    color: #2563eb;
    font-size: 13px;
    font-weight: 900;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 16px;
    background: linear-gradient( 180deg, rgba(239, 246, 255, 0.96), rgba(219, 234, 254, 0.92) );
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

    .vx-tenant-owner-plan-button:hover[b-89kq4sm7z3] {
        transform: translateY(-1px);
        border-color: rgba(37, 99, 235, 0.24);
        box-shadow: 0 16px 34px rgba(37, 99, 235, 0.14);
        background: linear-gradient( 180deg, rgba(219, 234, 254, 0.98), rgba(191, 219, 254, 0.94) );
    }

    .vx-tenant-owner-plan-button:active[b-89kq4sm7z3] {
        transform: translateY(0);
    }
/* /Components/Pages/Tenants/Components/Registry/TenantPageHeader.razor.rz.scp.css */
/* =========================================================
   FILE: TenantPageHeader.razor.css

   PURPOSE:
   Provides styling for the tenant registry workspace header.

   RESPONSIBILITIES:
   - Render enterprise-grade tenant workspace header visuals
   - Maintain reusable typography and spacing
   - Support responsive summary presentation

   IMPORTANT NOTES:
   - This stylesheet is Tenant Registry-specific
   - Intended for tenant workspace header rendering
   ========================================================= */

.vx-tenants-toolbar[b-oqyln7xep3] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 24px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 28px;
    background: radial-gradient( circle at top right, rgba(37, 99, 235, 0.10), transparent 20rem ), linear-gradient( 180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.94) );
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.07);
}

.vx-tenants-toolbar__eyebrow[b-oqyln7xep3] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 6px 12px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
}

.vx-tenants-toolbar__subtitle[b-oqyln7xep3] {
    max-width: 720px;
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.75;
}

.vx-tenants-toolbar__summary[b-oqyln7xep3] {
    display: grid;
    gap: 8px;
    min-width: 132px;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

    .vx-tenants-toolbar__summary span[b-oqyln7xep3] {
        color: #64748b;
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.09em;
    }

    .vx-tenants-toolbar__summary strong[b-oqyln7xep3] {
        color: #0f172a;
        font-size: 2rem;
        font-weight: 900;
        line-height: 1;
        letter-spacing: -0.06em;
    }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .vx-tenants-toolbar[b-oqyln7xep3] {
        flex-direction: column;
        align-items: stretch;
    }

    .vx-tenants-toolbar__summary[b-oqyln7xep3] {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .vx-tenants-toolbar[b-oqyln7xep3] {
        padding: 18px;
        border-radius: 22px;
    }
}
/* /Components/Pages/Tenants/Components/Registry/TenantRow.razor.rz.scp.css */
/* =========================================================
   FILE: TenantRow.razor.css

   PURPOSE:
   Provides styling for reusable tenant table rows.

   RESPONSIBILITIES:
   - Render enterprise-grade tenant row visuals
   - Support row hover interactions
   - Maintain reusable tenant typography and spacing

   IMPORTANT NOTES:
   - This stylesheet is Tenant Registry-specific
   - Intended for tenant row rendering only
   ========================================================= */

.vx-tenants-table__row[b-495rngaf2j] {
    cursor: pointer;
}

    .vx-tenants-table__row:hover td[b-495rngaf2j] {
        background: #f8fafc;
    }

    .vx-tenants-table__row td[b-495rngaf2j] {
        padding: 17px 16px;
        color: #0f172a;
        font-size: 14px;
        line-height: 1.45;
        vertical-align: middle;
        border-bottom: 1px solid rgba(226, 232, 240, 0.76);
        background: rgba(255, 255, 255, 0.96);
    }

.vx-tenants-code[b-495rngaf2j] {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 11px;
    border-radius: 999px;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.12);
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.vx-tenants-company[b-495rngaf2j] {
    display: grid;
    gap: 5px;
}

    .vx-tenants-company strong[b-495rngaf2j] {
        color: #0f172a;
        font-size: 14px;
        font-weight: 900;
    }

    .vx-tenants-company span[b-495rngaf2j] {
        color: #64748b;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.07em;
    }

.vx-tenants-pill[b-495rngaf2j] {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 11px;
    border-radius: 999px;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.vx-tenants-muted[b-495rngaf2j] {
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.vx-tenants-date[b-495rngaf2j] {
    color: #475569;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}
/* /Components/Pages/Tenants/Components/Registry/Tenants.razor.rz.scp.css */
/* =========================================================
   FILE: Tenants.razor.css

   PURPOSE:
   Provides layout styling for the tenant registry
   composition component.

   RESPONSIBILITIES:
   - Control tenant workspace layout spacing
   - Provide tenant panel structure styling
   - Maintain reusable registry composition layout

   IMPORTANT NOTES:
   - Header, table, row, and search styling remain isolated
     in their own scoped component stylesheets
   ========================================================= */

.vx-tenants-page[b-9329fb0jwi] {
    display: grid;
    gap: 22px;
}

.vx-tenants-panel[b-9329fb0jwi] {
    padding: 24px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.07);
}

.vx-tenants-panel__header[b-9329fb0jwi] {
    margin-bottom: 18px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .vx-tenants-panel[b-9329fb0jwi] {
        padding: 20px;
        border-radius: 24px;
    }
}

@media (max-width: 640px) {
    .vx-tenants-panel[b-9329fb0jwi] {
        padding: 18px;
        border-radius: 22px;
    }
}
/* /Components/Pages/Tenants/Components/Registry/TenantSearchBar.razor.rz.scp.css */
/* =========================================================
   FILE: TenantSearchBar.razor.css

   PURPOSE:
   Provides styling for the tenant registry search component.

   RESPONSIBILITIES:
   - Render enterprise-grade search visuals
   - Maintain reusable input spacing and typography
   - Support responsive tenant filtering UI

   IMPORTANT NOTES:
   - This stylesheet is Tenant Registry-specific
   - Intended for tenant search rendering only
   ========================================================= */

.vx-tenants-search[b-uzv6c7aqxo] {
    position: relative;
    max-width: 620px;
}

.vx-tenants-search__icon[b-uzv6c7aqxo] {
    position: absolute;
    left: 17px;
    top: 50%;
    color: #94a3b8;
    font-size: 18px;
    transform: translateY(-50%);
}

.vx-tenants-search__input[b-uzv6c7aqxo] {
    width: 100%;
    min-height: 54px;
    padding: 0 18px 0 46px;
    color: #0f172a;
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

    .vx-tenants-search__input:focus[b-uzv6c7aqxo] {
        border-color: rgba(37, 99, 235, 0.42);
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10);
    }

    .vx-tenants-search__input[b-uzv6c7aqxo]::placeholder {
        color: #94a3b8;
    }
/* /Components/Pages/Tenants/Components/Registry/TenantSummaryCard.razor.rz.scp.css */
/* =========================================================
   FILE: TenantSummaryCard.razor.css

   PURPOSE:
   Provides styling for reusable tenant summary cards.

   RESPONSIBILITIES:
   - Render enterprise-grade metric card visuals
   - Maintain reusable typography and spacing
   - Support responsive tenant dashboard layouts

   IMPORTANT NOTES:
   - This stylesheet is Tenant Registry-specific
   - Intended for tenant summary metric rendering
   ========================================================= */

.vx-tenant-summary-card[b-i454eb7mpu] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 140px;
    padding: 22px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 24px;
    background: radial-gradient( circle at top right, rgba(37, 99, 235, 0.08), transparent 18rem ), linear-gradient( 180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.94) );
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

    .vx-tenant-summary-card:hover[b-i454eb7mpu] {
        transform: translateY(-2px);
        border-color: rgba(37, 99, 235, 0.18);
        box-shadow: 0 24px 54px rgba(15, 23, 42, 0.08);
    }

.vx-tenant-summary-card__header[b-i454eb7mpu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vx-tenant-summary-card__label[b-i454eb7mpu] {
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-tenant-summary-card__body[b-i454eb7mpu] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vx-tenant-summary-card__value[b-i454eb7mpu] {
    color: #0f172a;
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.06em;
}

.vx-tenant-summary-card__description[b-i454eb7mpu] {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.65;
}
/* /Components/Pages/Tenants/Components/Registry/TenantTable.razor.rz.scp.css */
/* =========================================================
   FILE: TenantTable.razor.css

   PURPOSE:
   Provides styling for the tenant registry table.

   RESPONSIBILITIES:
   - Render enterprise-grade tenant table visuals
   - Support responsive table overflow handling
   - Maintain reusable table spacing and typography

   IMPORTANT NOTES:
   - This stylesheet is Tenant Registry-specific
   - Intended for tenant table rendering only
   ========================================================= */

.vx-tenants-table-shell[b-vqo2dcieaw] {
    overflow-x: auto;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
}

.vx-tenants-table[b-vqo2dcieaw] {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
}

    .vx-tenants-table thead th[b-vqo2dcieaw] {
        padding: 16px;
        color: #64748b;
        font-size: 11px;
        font-weight: 900;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        white-space: nowrap;
        border-bottom: 1px solid rgba(226, 232, 240, 0.95);
        background: linear-gradient( 180deg, #f8fafc, #f1f5f9 );
    }
/* /Components/Pages/Tenants/TenantSubscriptionList.razor.rz.scp.css */
/* =========================================================
   FILE: TenantSubscriptionList.razor.css

   PURPOSE:
   Scoped styles for the tenant subscription list component.

   RESPONSIBILITIES:
   - Style the subscription list as a premium ControlPlane surface
   - Style table, row states, badges, actions, and empty states
   - Preserve a calm executive/platform administration visual style
   - Keep subscription-list styling isolated to this component

   IMPORTANT NOTES:
   - This file is presentation-only
   - Business behavior remains in the Razor component
   - This component belongs to ControlPlane visual language
   - Do not make this look like Operations Plane workflow UI
   ========================================================= */

/* =========================================================
   1. COMPONENT SHELL
   ========================================================= */

.vx-subscription-list[b-142qp2xv4n] {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 28px;
    background: radial-gradient( circle at top right, rgba(37, 99, 235, 0.10), transparent 22rem ), linear-gradient( 180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.94) );
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.07);
}

    .vx-subscription-list[b-142qp2xv4n]::before {
        position: absolute;
        right: -5rem;
        top: -5rem;
        width: 15rem;
        height: 15rem;
        content: "";
        border-radius: 999px;
        background: rgba(37, 99, 235, 0.06);
        pointer-events: none;
    }

/* =========================================================
   2. HEADER
   ========================================================= */

.vx-subscription-list__header[b-142qp2xv4n] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.vx-subscription-list__header-content[b-142qp2xv4n] {
    max-width: 760px;
}

.vx-subscription-list__eyebrow[b-142qp2xv4n] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 6px 12px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.12);
}

.vx-subscription-list__title[b-142qp2xv4n] {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.06em;
}

.vx-subscription-list__subtitle[b-142qp2xv4n] {
    max-width: 760px;
    margin: 12px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.75;
}

.vx-subscription-list__summary[b-142qp2xv4n] {
    display: grid;
    gap: 8px;
    min-width: 132px;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.vx-subscription-list__summary-label[b-142qp2xv4n] {
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.vx-subscription-list__summary-value[b-142qp2xv4n] {
    color: #0f172a;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.06em;
}

/* =========================================================
   3. TABLE SHELL
   ========================================================= */

.vx-subscription-list__table-shell[b-142qp2xv4n] {
    position: relative;
    z-index: 1;
    width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
}

/* =========================================================
   4. TABLE BASE
   ========================================================= */

.vx-subscription-table[b-142qp2xv4n] {
    width: 100%;
    min-width: 1240px;
    border-collapse: separate;
    border-spacing: 0;
}

    .vx-subscription-table thead th[b-142qp2xv4n] {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 16px;
        color: #64748b;
        font-size: 11px;
        font-weight: 900;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        white-space: nowrap;
        border-bottom: 1px solid rgba(226, 232, 240, 0.95);
        background: linear-gradient( 180deg, #f8fafc, #f1f5f9 );
    }

    .vx-subscription-table tbody td[b-142qp2xv4n] {
        padding: 17px 16px;
        color: #0f172a;
        font-size: 14px;
        line-height: 1.45;
        vertical-align: middle;
        border-bottom: 1px solid rgba(226, 232, 240, 0.76);
        background: rgba(255, 255, 255, 0.96);
    }

    .vx-subscription-table tbody tr:last-child td[b-142qp2xv4n] {
        border-bottom: none;
    }

/* =========================================================
   5. ROW STATES
   ========================================================= */

.vx-subscription-table__row[b-142qp2xv4n] {
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

    .vx-subscription-table__row:hover td[b-142qp2xv4n] {
        background: #f8fafc;
    }

.vx-subscription-table__row--current td[b-142qp2xv4n] {
    background: linear-gradient( 180deg, rgba(239, 246, 255, 0.62), rgba(255, 255, 255, 0.96) );
}

    .vx-subscription-table__row--current td:first-child[b-142qp2xv4n] {
        box-shadow: inset 4px 0 0 #2563eb;
    }

/* =========================================================
   6. PLAN / TEXT CELLS
   ========================================================= */

.vx-subscription-table__plan-cell[b-142qp2xv4n] {
    min-width: 220px;
}

.vx-subscription-table__plan-name[b-142qp2xv4n] {
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
}

.vx-subscription-table__plan-code[b-142qp2xv4n] {
    margin-top: 5px;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vx-subscription-table__device-count[b-142qp2xv4n] {
    color: #0f172a;
    font-size: 1.1rem;
    font-weight: 900;
}

.vx-subscription-table__date[b-142qp2xv4n] {
    color: #475569;
    font-size: 13px;
    font-weight: 700;
}

.vx-subscription-table__pricing[b-142qp2xv4n] {
    min-width: 190px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 750;
}

.vx-subscription-table__muted[b-142qp2xv4n] {
    color: #94a3b8;
    font-size: 13px;
    font-weight: 800;
}

/* =========================================================
   7. BADGES
   ========================================================= */

.vx-subscription-badge[b-142qp2xv4n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: #f8fafc;
    color: #475569;
}

.vx-subscription-badge--current[b-142qp2xv4n],
.vx-subscription-badge--active[b-142qp2xv4n] {
    color: #166534;
    background: #dcfce7;
    border-color: #bbf7d0;
}

.vx-subscription-badge--past[b-142qp2xv4n] {
    color: #475569;
    background: #f1f5f9;
    border-color: #e2e8f0;
}

.vx-subscription-badge--warning[b-142qp2xv4n] {
    color: #92400e;
    background: #fef3c7;
    border-color: #fde68a;
}

.vx-subscription-badge--danger[b-142qp2xv4n] {
    color: #991b1b;
    background: #fee2e2;
    border-color: #fecaca;
}

/* =========================================================
   8. PENDING CHANGE
   ========================================================= */

.vx-subscription-table__pending[b-142qp2xv4n] {
    display: grid;
    gap: 5px;
    min-width: 180px;
    padding: 10px 12px;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 14px;
    background: rgba(239, 246, 255, 0.78);
}

.vx-subscription-table__pending-name[b-142qp2xv4n] {
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
}

.vx-subscription-table__pending-date[b-142qp2xv4n] {
    color: #64748b;
    font-size: 11px;
    font-weight: 750;
}

/* =========================================================
   9. ACTIONS
   ========================================================= */

.vx-subscription-table__actions-header[b-142qp2xv4n] {
    min-width: 230px;
}

.vx-subscription-table__actions[b-142qp2xv4n] {
    white-space: nowrap;
}

.vx-subscription-table__actions[b-142qp2xv4n] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.vx-subscription-list__button[b-142qp2xv4n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 13px;
    border-radius: 12px;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease, opacity 160ms ease;
}

    .vx-subscription-list__button:hover:not(:disabled)[b-142qp2xv4n] {
        transform: translateY(-1px);
    }

    .vx-subscription-list__button:disabled[b-142qp2xv4n] {
        cursor: not-allowed;
        opacity: 0.56;
    }

.vx-subscription-list__button--primary[b-142qp2xv4n] {
    color: #ffffff;
    background: linear-gradient( 135deg, #2563eb, #1d4ed8 );
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18);
}

.vx-subscription-list__button--secondary[b-142qp2xv4n] {
    color: #0f172a;
    background: #ffffff;
    border-color: rgba(148, 163, 184, 0.26);
}

    .vx-subscription-list__button--secondary:hover:not(:disabled)[b-142qp2xv4n] {
        background: #f8fafc;
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
    }

.vx-subscription-list__button--success[b-142qp2xv4n] {
    color: #ffffff;
    background: linear-gradient( 135deg, #16a34a, #15803d );
    box-shadow: 0 12px 24px rgba(22, 163, 74, 0.18);
}

/* =========================================================
   10. LOADING / EMPTY STATES
   ========================================================= */

.vx-subscription-list__state[b-142qp2xv4n],
.vx-subscription-list__empty[b-142qp2xv4n] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 28px;
    border: 1px dashed rgba(148, 163, 184, 0.34);
    border-radius: 22px;
    background: rgba(248, 250, 252, 0.86);
}

.vx-subscription-list__state-icon[b-142qp2xv4n],
.vx-subscription-list__empty-icon[b-142qp2xv4n] {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    border-radius: 20px;
    background: #eff6ff;
    font-size: 26px;
}

.vx-subscription-list__state strong[b-142qp2xv4n],
.vx-subscription-list__empty-title[b-142qp2xv4n] {
    margin: 0;
    color: #0f172a;
    font-size: 16px;
    font-weight: 900;
}

.vx-subscription-list__state p[b-142qp2xv4n],
.vx-subscription-list__empty-text[b-142qp2xv4n] {
    max-width: 560px;
    margin: 6px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.65;
}

.vx-subscription-list__empty-content[b-142qp2xv4n] {
    display: grid;
    gap: 14px;
}

/* =========================================================
   11. RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .vx-subscription-list[b-142qp2xv4n] {
        padding: 20px;
        border-radius: 24px;
    }

    .vx-subscription-list__header[b-142qp2xv4n] {
        flex-direction: column;
    }

    .vx-subscription-list__summary[b-142qp2xv4n] {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .vx-subscription-list[b-142qp2xv4n] {
        padding: 18px;
        border-radius: 22px;
    }

    .vx-subscription-list__state[b-142qp2xv4n],
    .vx-subscription-list__empty[b-142qp2xv4n] {
        flex-direction: column;
        align-items: flex-start;
    }

    .vx-subscription-list__button[b-142qp2xv4n] {
        width: 100%;
    }
}
/* /Components/Pages/Tenants/TenantWorkspace.razor.rz.scp.css */
/* =========================================================
   FILE: TenantWorkspace.razor.css

   PURPOSE:
   Provides top-level layout styling for the tenant workspace
   orchestrator inside the ControlPlane.

   RESPONSIBILITIES:
   - Control workspace page spacing
   - Maintain consistent ControlPlane content width
   - Preserve unified registry/details visual rhythm
   - Support responsive tenant workspace layouts

   IMPORTANT NOTES:
   - Child components own isolated visual styling
   - This stylesheet controls workspace-level layout only
   ========================================================= */

.vx-page[b-93t6pdgfl2] {
    display: grid;
    gap: 24px;
    width: 100%;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .vx-page[b-93t6pdgfl2] {
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .vx-page[b-93t6pdgfl2] {
        gap: 18px;
    }
}
/* /Components/Shared/Display/StatusBadge.razor.rz.scp.css */
/* =========================================================
   FILE: StatusBadge.razor.css

   PURPOSE:
   Provides consistent shared styling for status badges
   across the ControlPlane UI.

   RESPONSIBILITIES:
   - Render enterprise-grade badge visuals
   - Support status-specific visual variations
   - Maintain reusable consistent badge sizing and spacing

   IMPORTANT NOTES:
   - This stylesheet is shared across ControlPlane features
   - Status naming is normalized in StatusBadge.razor
   - Additional statuses can be added safely later
   ========================================================= */

.vx-status-badge[b-c0d1j1ukfl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

/* =========================================================
   DEFAULT
   ========================================================= */

.vx-status-badge--unknown[b-c0d1j1ukfl] {
    color: #64748b;
    background: #f1f5f9;
    border-color: #e2e8f0;
}

/* =========================================================
   SUCCESS STATES
   ========================================================= */

.vx-status-badge--active[b-c0d1j1ukfl],
.vx-status-badge--paid[b-c0d1j1ukfl],
.vx-status-badge--completed[b-c0d1j1ukfl],
.vx-status-badge--approved[b-c0d1j1ukfl] {
    color: #15803d;
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(34, 197, 94, 0.16);
}

/* =========================================================
   WARNING STATES
   ========================================================= */

.vx-status-badge--pending[b-c0d1j1ukfl],
.vx-status-badge--processing[b-c0d1j1ukfl],
.vx-status-badge--collect[b-c0d1j1ukfl] {
    color: #b45309;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.18);
}

/* =========================================================
   DANGER STATES
   ========================================================= */

.vx-status-badge--overdue[b-c0d1j1ukfl],
.vx-status-badge--cancelled[b-c0d1j1ukfl],
.vx-status-badge--failed[b-c0d1j1ukfl],
.vx-status-badge--rejected[b-c0d1j1ukfl],
.vx-status-badge--inactive[b-c0d1j1ukfl] {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.16);
}

/* =========================================================
   INFO STATES
   ========================================================= */

.vx-status-badge--draft[b-c0d1j1ukfl],
.vx-status-badge--issued[b-c0d1j1ukfl],
.vx-status-badge--in-transit[b-c0d1j1ukfl] {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.12);
}
/* /Components/Shared/State/EmptyState.razor.rz.scp.css */
/* =========================================================
   FILE: EmptyState.razor.css

   PURPOSE:
   Provides shared styling for reusable empty states
   across the ControlPlane UI.

   RESPONSIBILITIES:
   - Render consistent placeholder visuals
   - Maintain reusable spacing and typography
   - Support enterprise-grade empty-state presentation

   IMPORTANT NOTES:
   - Shared across all ControlPlane features
   - Intended for workspace and component placeholder states
   ========================================================= */

.vx-empty-state[b-51zrgcs5j9] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    padding: 28px;
    border: 1px dashed rgba(148, 163, 184, 0.34);
    border-radius: 22px;
    background: rgba(248, 250, 252, 0.86);
}

.vx-empty-state__text[b-51zrgcs5j9] {
    max-width: 560px;
    margin: 0;
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.65;
    text-align: center;
}
/* /Components/Shared/State/ErrorPanel.razor.rz.scp.css */
/* =========================================================
   FILE: ErrorPanel.razor.css

   PURPOSE:
   Provides shared styling for reusable error panels
   across the ControlPlane UI.

   RESPONSIBILITIES:
   - Render consistent error state visuals
   - Maintain reusable spacing and typography
   - Support enterprise-grade error presentation

   IMPORTANT NOTES:
   - Shared across all ControlPlane features
   - Intended for workspace and component error states
   ========================================================= */

.vx-state-panel[b-loq4pbmtw5] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    padding: 32px;
    border: 1px solid rgba(239, 68, 68, 0.16);
    border-radius: 22px;
    background: linear-gradient( 180deg, rgba(254, 242, 242, 0.96), rgba(254, 226, 226, 0.92) );
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.04);
}

.vx-state-panel--error[b-loq4pbmtw5] {
    position: relative;
}

.vx-state-panel__text[b-loq4pbmtw5] {
    max-width: 640px;
    margin: 0;
    color: #b91c1c;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
    text-align: center;
}
/* /Components/Shared/State/LoadingPanel.razor.rz.scp.css */
/* =========================================================
   FILE: LoadingPanel.razor.css

   PURPOSE:
   Provides shared styling for reusable loading panels
   across the ControlPlane UI.

   RESPONSIBILITIES:
   - Render consistent loading state visuals
   - Maintain reusable spacing and typography
   - Support enterprise-grade visual consistency

   IMPORTANT NOTES:
   - Shared across all ControlPlane features
   - Intended for workspace and component loading states
   ========================================================= */

.vx-state-panel[b-9b8weh172n] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    padding: 32px;
    border: 1px dashed rgba(148, 163, 184, 0.28);
    border-radius: 22px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92) );
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.04);
}

.vx-state-panel--loading[b-9b8weh172n] {
    position: relative;
}

.vx-state-panel__text[b-9b8weh172n] {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
    text-align: center;
}