@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lcdo7z9xd2.bundle.scp.css';

/* /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-83dln2qdvv] {
    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-83dln2qdvv] {
    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-83dln2qdvv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

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

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


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


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

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

.vx-input[b-83dln2qdvv] {
    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-83dln2qdvv] {
        border-color: #94a3b8;
        box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.16);
        background: #ffffff;
    }

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


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

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

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

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


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


/* BUTTON BASE */
.vx-button[b-83dln2qdvv] {
    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-83dln2qdvv] {
        transform: translateY(-1px);
    }

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


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

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


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

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


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

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


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

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

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

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

    .vx-button[b-83dln2qdvv] {
        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-b9sq0uvxl9] {
    margin: 0;
    padding: 16px;
    border-radius: 12px;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    color: #64748b;
    font-size: 14px;
}


/* TABLE WRAPPER */
.vx-table-wrap[b-b9sq0uvxl9] {
    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-b9sq0uvxl9] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
}


    /* TABLE HEADER */
    .vx-table thead th[b-b9sq0uvxl9] {
        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-b9sq0uvxl9] {
        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-b9sq0uvxl9] {
        border-bottom: none;
    }


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

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


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


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


/* BADGES */
.vx-badge[b-b9sq0uvxl9] {
    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-b9sq0uvxl9] {
    background: #dcfce7;
    color: #166534;
}

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

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

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

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


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

    .vx-table[b-b9sq0uvxl9] {
        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-m3fk8r2ir2] {
    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-m3fk8r2ir2] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

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

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


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


/* BUTTON */
.vx-button[b-m3fk8r2ir2] {
    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-m3fk8r2ir2] {
    background: #0f172a;
    color: #ffffff;
}

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


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


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


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


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


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


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

    .vx-button[b-m3fk8r2ir2] {
        width: 100%;
    }
}
/* /Components/Billing/RegisterPayment/RegisterPayment.razor.rz.scp.css */
body[b-2e4hbnzsoq] {
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* =========================================================
   FILE: MainLayout.razor.css

   PURPOSE:
   Provides scoped styling for layout-owned Control Plane
   interface elements and topbar controls.
   ========================================================= */

/* Topbar Alignment */
.vx-topbar-left[b-liqemi9smr],
.vx-topbar-right[b-liqemi9smr] {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.vx-mobile-toggle[b-liqemi9smr] {
  display: none;
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  cursor: pointer;
}

.vx-drawer-backdrop[b-liqemi9smr] {
  display: none;
}

/* Mobile Responsive Drawer Overlay */
@media (max-width: 768px) {
  .vx-mobile-toggle[b-liqemi9smr] {
    display: flex;
  }

  .vx-drawer-backdrop[b-liqemi9smr] {
    display: block;
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 95;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal);
  }

  :global(.vx-platform-shell.mobile-open) .vx-drawer-backdrop[b-liqemi9smr] {
    opacity: 1;
    pointer-events: auto;
  }
}

/* =========================================================
   SESSION WARNING OVERLAY
   ========================================================= */

.vx-session-warning[b-liqemi9smr] {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    overflow-y: auto;
}

.vx-session-warning__backdrop[b-liqemi9smr] {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.16), transparent 34rem), rgba(15, 23, 42, 0.68);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.vx-session-warning__dialog[b-liqemi9smr] {
    position: relative;
    z-index: 1;
    width: min(100%, 520px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 2rem;
    color: #0f172a;
    text-align: center;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 28px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.1), transparent 18rem), linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 250, 252, 0.98) 100%);
    box-shadow: 0 40px 100px rgba(15, 23, 42, 0.28), 0 12px 32px rgba(15, 23, 42, 0.12);
    animation: vx-session-warning-enter-b-liqemi9smr 180ms ease-out;
}

.vx-session-warning__icon[b-liqemi9smr] {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.24);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 251, 235, 1) 0%, rgba(254, 243, 199, 0.92) 100%);
    box-shadow: 0 18px 38px rgba(245, 158, 11, 0.18);
}

.vx-session-warning__icon svg[b-liqemi9smr] {
    width: 36px;
    height: 36px;
}

.vx-session-warning__content[b-liqemi9smr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.vx-session-warning__eyebrow[b-liqemi9smr] {
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.78rem;
    color: #b45309;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.1);
}

.vx-session-warning__title[b-liqemi9smr] {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.55rem, 4vw, 2rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.vx-session-warning__description[b-liqemi9smr] {
    max-width: 430px;
    margin: 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.7;
}

.vx-session-warning__actions[b-liqemi9smr] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding-top: 0.25rem;
}

.vx-session-warning__button[b-liqemi9smr] {
    min-width: 150px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.2rem;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 850;
    border-radius: 14px;
    cursor: pointer;
    transition: all 160ms ease;
}

.vx-session-warning__button--primary[b-liqemi9smr] {
    color: #ffffff;
    border: 1px solid rgba(37, 99, 235, 0.28);
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.24);
}

.vx-session-warning__button--primary:hover:not(:disabled)[b-liqemi9smr] {
    transform: translateY(-1px);
    box-shadow: 0 18px 36px rgba(37, 99, 235, 0.3);
}

.vx-session-warning__button--secondary[b-liqemi9smr] {
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.2);
    background: rgba(239, 68, 68, 0.08);
}

.vx-session-warning__button--secondary:hover:not(:disabled)[b-liqemi9smr] {
    color: #991b1b;
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.28);
    transform: translateY(-1px);
}

@keyframes vx-session-warning-enter-b-liqemi9smr {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media print {
    .vx-platform-shell__sidebar[b-liqemi9smr],
    .vx-platform-shell__topbar[b-liqemi9smr],
    .vx-session-warning[b-liqemi9smr] {
        display: none !important;
    }

    .vx-platform-shell[b-liqemi9smr],
    .vx-platform-shell__main[b-liqemi9smr],
    .vx-platform-shell__content[b-liqemi9smr] {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
    }
}
/* /Components/Layout/PlatformMenu.razor.rz.scp.css */
/* =========================================================
   PLATFORM MENU SCOPED STYLES (PlatformMenu.razor.css)
   VIXLY Control Plane Executive Navigation System
   ========================================================= */

.vx-platform-nav[b-xwbfpvw6h7] {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.vx-platform-nav__section[b-xwbfpvw6h7] {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vx-platform-nav__section:not(:last-child)[b-xwbfpvw6h7] {
  margin-bottom: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.vx-platform-nav__section-title[b-xwbfpvw6h7] {
  display: flex;
  align-items: center;
  padding: 0 12px;
  margin-bottom: 4px;
}

.vx-platform-nav__section-title span[b-xwbfpvw6h7] {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.vx-platform-nav__list[b-xwbfpvw6h7] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vx-platform-nav__item[b-xwbfpvw6h7] {
  margin: 0;
  padding: 0;
}

/* Base Navigation Link */
.vx-platform-nav__link[b-xwbfpvw6h7] {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px; /* Ergonomic 44px hit target */
  padding: 0 14px;
  color: #475569 !important;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none !important;
  border-radius: 14px;
  border: 1px solid transparent;
  overflow: hidden;
  transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
}

/* Hover State */
.vx-platform-nav__link:hover[b-xwbfpvw6h7] {
  color: #0f172a !important;
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(148, 163, 184, 0.2);
  transform: translateX(4px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

/* Active Navigation Link State */
[b-xwbfpvw6h7] .vx-platform-nav__link--active,
.vx-platform-nav__link--active[b-xwbfpvw6h7] {
  color: #ffffff !important;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  border-color: rgba(37, 99, 235, 0.35) !important;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.26) !important;
  font-weight: 800;
}

/* Active Bar Accent Indicator */
.vx-platform-nav__active-bar[b-xwbfpvw6h7] {
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: #ffffff;
  opacity: 0;
  transition: opacity 180ms ease;
}

[b-xwbfpvw6h7] .vx-platform-nav__link--active .vx-platform-nav__active-bar,
.vx-platform-nav__link--active .vx-platform-nav__active-bar[b-xwbfpvw6h7] {
  opacity: 1;
}

/* Icon Container Box */
.vx-platform-nav__icon-box[b-xwbfpvw6h7] {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.1);
  color: #64748b;
  transition: all 180ms ease;
}

.vx-platform-nav__link:hover .vx-platform-nav__icon-box[b-xwbfpvw6h7] {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}

[b-xwbfpvw6h7] .vx-platform-nav__link--active .vx-platform-nav__icon-box,
.vx-platform-nav__link--active .vx-platform-nav__icon-box[b-xwbfpvw6h7] {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.vx-platform-nav__link-text[b-xwbfpvw6h7] {
  min-width: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-yalbp31m3c],
.components-reconnect-repeated-attempt-visible[b-yalbp31m3c],
.components-reconnect-failed-visible[b-yalbp31m3c],
.components-pause-visible[b-yalbp31m3c],
.components-resume-failed-visible[b-yalbp31m3c],
.components-rejoining-animation[b-yalbp31m3c] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-yalbp31m3c {
    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-vkjsblk6q8] {
    margin-top: 8px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #ffffff;
}


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


    /* HEADER */
    .vx-table thead th[b-vkjsblk6q8] {
        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-vkjsblk6q8] {
        padding: 14px 16px;
        border-bottom: 1px solid #eef2f7;
        color: #0f172a;
        vertical-align: middle;
    }


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


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


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


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


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


/* BADGES */
.vx-badge[b-vkjsblk6q8] {
    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-vkjsblk6q8] {
    background: #dcfce7;
    color: #166534;
}

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

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


/* BUTTONS */
.vx-button[b-vkjsblk6q8] {
    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-vkjsblk6q8] {
    background: #e2e8f0;
    color: #0f172a;
}

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

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

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

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

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


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


/* EMPTY STATE */
.vx-placeholder-card__text[b-vkjsblk6q8] {
    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-r8nxxke889] {
    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-r8nxxke889] {
    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-r8nxxke889] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

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

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

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

.vx-placeholder-card__text[b-r8nxxke889] {
    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-r8nxxke889] {
    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-r8nxxke889] {
    display: grid;
    grid-template-columns: 160px 170px minmax(240px, 1fr);
    gap: 14px;
    width: 100%;
    align-items: end;
}

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

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

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

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

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

.vx-input[b-r8nxxke889] {
    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-r8nxxke889] {
        border-color: #94a3b8;
        box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.16);
        background: #ffffff;
    }

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

/* Metadata pill */
.vx-toolbar-count[b-r8nxxke889] {
    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-r8nxxke889] {
    margin-top: 4px;
}

:deep(.vx-table)[b-r8nxxke889] {
    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-r8nxxke889] {
    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-r8nxxke889] {
    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-r8nxxke889] {
    border-bottom: none;
}

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

/* Make common badges look cleaner if LicenseList uses them */
:deep(.vx-badge)[b-r8nxxke889] {
    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-r8nxxke889] {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    font-weight: 700;
}

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

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

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

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

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

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

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

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

    .vx-toolbar-count[b-r8nxxke889] {
        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-xua5k8gv5c] {
    display: grid;
    place-items: center;
    min-height: 70vh;
}

.vx-auth-recovery__card[b-xua5k8gv5c] {
    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-xua5k8gv5c] {
    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-xua5k8gv5c] {
    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-xua5k8gv5c] {
    margin: 18px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.8;
}

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

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

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

.vx-auth-recovery__back[b-xua5k8gv5c] {
    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-xua5k8gv5c] {
        text-decoration: underline;
    }

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

.vx-auth-recovery__success[b-xua5k8gv5c] {
    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-kjrqiin79z] {
    display: grid;
    place-items: center;
    min-height: 70vh;
}

.vx-auth-recovery__card[b-kjrqiin79z] {
    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-kjrqiin79z] {
    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-kjrqiin79z] {
    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-kjrqiin79z] {
    margin: 18px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.8;
}

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

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

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

.vx-auth-recovery__back[b-kjrqiin79z] {
    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-kjrqiin79z] {
        text-decoration: underline;
    }

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

.vx-auth-recovery__success[b-kjrqiin79z] {
    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-kjrqiin79z] {
    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/Auth/SetupAccount.razor.rz.scp.css */
/*
    File: SetupAccount.razor.css

    Purpose:
    Provides scoped presentation styles for the Platform account-setup page.

    Responsibilities:
    - Present a focused public authentication experience.
    - Follow Vixly's restrained enterprise visual language.
    - Support responsive desktop and mobile layouts.
    - Provide accessible focus, validation, success, and error states.

    Important Notes:
    - These styles are scoped to SetupAccount.razor.
    - Shared primitives such as vx-button and vx-input remain compatible
      with the broader Vixly design language.
*/

.vx-auth-recovery[b-sogytjrq2s] {
    min-height: calc(100vh - 1px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 3rem 1.25rem;
    background: radial-gradient( circle at top left, rgba(51, 94, 234, 0.09), transparent 34rem), linear-gradient( 180deg, #f7f9fc 0%, #eef2f7 100%);
}

.vx-auth-recovery__card[b-sogytjrq2s] {
    width: min(100%, 31rem);
    padding: 2.5rem;
    border: 1px solid #dfe5ee;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 1.5rem 4rem rgba(18, 31, 53, 0.09), 0 0.25rem 1rem rgba(18, 31, 53, 0.04);
}

.vx-auth-recovery__header[b-sogytjrq2s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.vx-auth-recovery__brand[b-sogytjrq2s] {
    margin-bottom: 1.5rem;
    color: #182135;
    font-size: 1.25rem;
    font-weight: 750;
    letter-spacing: -0.025em;
}

.vx-auth-recovery__icon[b-sogytjrq2s] {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1rem;
    place-items: center;
    border: 1px solid #dce4ff;
    border-radius: 1rem;
    background: #eef2ff;
    color: #335eea;
}

    .vx-auth-recovery__icon svg[b-sogytjrq2s] {
        width: 1.65rem;
        height: 1.65rem;
        fill: currentColor;
    }

.vx-auth-recovery__badge[b-sogytjrq2s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.75rem;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0.65rem;
    border: 1px solid #d9e1ff;
    border-radius: 999px;
    background: #f4f6ff;
    color: #335eea;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.075em;
    line-height: 1;
    text-transform: uppercase;
}

.vx-auth-recovery__title[b-sogytjrq2s] {
    margin: 0;
    color: #172033;
    font-size: clamp(1.75rem, 4vw, 2.1rem);
    font-weight: 750;
    letter-spacing: -0.04em;
    line-height: 1.15;
}

.vx-auth-recovery__subtitle[b-sogytjrq2s] {
    max-width: 26rem;
    margin: 0.85rem 0 0;
    color: #667085;
    font-size: 0.95rem;
    line-height: 1.65;
}

.vx-auth-recovery__message[b-sogytjrq2s] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 0.9rem 1rem;
    border-radius: 0.65rem;
    font-size: 0.88rem;
    line-height: 1.5;
}

.vx-auth-recovery__message--error[b-sogytjrq2s] {
    border: 1px solid #f4c7c3;
    background: #fff4f2;
    color: #9b2c2c;
}

.vx-auth-recovery__message-icon[b-sogytjrq2s] {
    display: inline-grid;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    place-items: center;
    border-radius: 50%;
    background: #c43d36;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
}

.vx-auth-recovery__form[b-sogytjrq2s] {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    margin-top: 1.75rem;
}

.vx-auth-recovery__field[b-sogytjrq2s] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.vx-auth-recovery__label[b-sogytjrq2s] {
    color: #273248;
    font-size: 0.86rem;
    font-weight: 650;
}

.vx-input[b-sogytjrq2s] {
    width: 100%;
    min-height: 2.85rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid #cfd7e3;
    border-radius: 0.55rem;
    outline: none;
    background: #ffffff;
    color: #172033;
    font: inherit;
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

    .vx-input[b-sogytjrq2s]::placeholder {
        color: #98a2b3;
    }

    .vx-input:hover:not(:disabled)[b-sogytjrq2s] {
        border-color: #aeb9c9;
    }

    .vx-input:focus[b-sogytjrq2s] {
        border-color: #335eea;
        box-shadow: 0 0 0 0.2rem rgba(51, 94, 234, 0.13);
    }

    .vx-input:disabled[b-sogytjrq2s] {
        cursor: not-allowed;
        background: #f4f6f8;
        color: #8a94a5;
    }

.vx-auth-recovery__validation[b-sogytjrq2s] {
    color: #b42318;
    font-size: 0.78rem;
    line-height: 1.4;
}

.vx-auth-recovery__requirements[b-sogytjrq2s] {
    padding: 0.9rem 1rem;
    border: 1px solid #e1e6ee;
    border-radius: 0.65rem;
    background: #f8fafc;
}

.vx-auth-recovery__requirements-title[b-sogytjrq2s] {
    margin: 0 0 0.45rem;
    color: #344054;
    font-size: 0.8rem;
    font-weight: 700;
}

.vx-auth-recovery__requirements-list[b-sogytjrq2s] {
    display: grid;
    gap: 0.3rem;
    margin: 0;
    padding-left: 1.15rem;
    color: #667085;
    font-size: 0.78rem;
    line-height: 1.45;
}

.vx-button[b-sogytjrq2s] {
    display: inline-flex;
    min-height: 2.9rem;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.7rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.55rem;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.vx-button--primary[b-sogytjrq2s] {
    border-color: #335eea;
    background: #335eea;
    color: #ffffff;
    box-shadow: 0 0.35rem 0.8rem rgba(51, 94, 234, 0.18);
}

    .vx-button--primary:hover:not(:disabled)[b-sogytjrq2s] {
        border-color: #294fcf;
        background: #294fcf;
        transform: translateY(-1px);
    }

    .vx-button--primary:focus-visible[b-sogytjrq2s] {
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(51, 94, 234, 0.2), 0 0.35rem 0.8rem rgba(51, 94, 234, 0.18);
    }

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

.vx-auth-recovery__submit[b-sogytjrq2s] {
    width: 100%;
}

.vx-auth-recovery__spinner[b-sogytjrq2s] {
    width: 1rem;
    height: 1rem;
    border: 0.14rem solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: vx-auth-recovery-spin-b-sogytjrq2s 700ms linear infinite;
}

.vx-auth-recovery__back[b-sogytjrq2s] {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 1.4rem;
    padding: 0.35rem;
    border: 0;
    background: transparent;
    color: #667085;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

    .vx-auth-recovery__back:hover[b-sogytjrq2s] {
        color: #335eea;
    }

    .vx-auth-recovery__back:focus-visible[b-sogytjrq2s] {
        border-radius: 0.35rem;
        outline: 0.15rem solid rgba(51, 94, 234, 0.25);
        outline-offset: 0.15rem;
    }

.vx-auth-recovery__completion[b-sogytjrq2s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1.75rem;
    text-align: center;
}

.vx-auth-recovery__completion-icon[b-sogytjrq2s] {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1rem;
    place-items: center;
    border-radius: 50%;
    background: #e9f8ef;
    color: #16834b;
}

    .vx-auth-recovery__completion-icon svg[b-sogytjrq2s] {
        width: 2rem;
        height: 2rem;
        fill: currentColor;
    }

.vx-auth-recovery__completion-title[b-sogytjrq2s] {
    margin: 0;
    color: #172033;
    font-size: 1.25rem;
    font-weight: 750;
    letter-spacing: -0.025em;
}

.vx-auth-recovery__completion-text[b-sogytjrq2s] {
    margin: 0.65rem 0 1.35rem;
    color: #667085;
    font-size: 0.9rem;
    line-height: 1.6;
}

.vx-auth-recovery__footer[b-sogytjrq2s] {
    margin: 0;
    color: #7b8494;
    font-size: 0.76rem;
    text-align: center;
}

@keyframes vx-auth-recovery-spin-b-sogytjrq2s {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 36rem) {
    .vx-auth-recovery[b-sogytjrq2s] {
        justify-content: flex-start;
        padding: 1.5rem 0.85rem;
    }

    .vx-auth-recovery__card[b-sogytjrq2s] {
        padding: 1.75rem 1.25rem;
        border-radius: 0.8rem;
    }

    .vx-auth-recovery__brand[b-sogytjrq2s] {
        margin-bottom: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vx-input[b-sogytjrq2s],
    .vx-button[b-sogytjrq2s] {
        transition: none;
    }

    .vx-auth-recovery__spinner[b-sogytjrq2s] {
        animation-duration: 1.4s;
    }
}
/* /Components/Pages/BillingOperations/Billing/Components/CreateInvoice.razor.rz.scp.css */
/* =========================================================
   FILE: CreateInvoice.razor.css

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

   RESPONSIBILITIES:
   - Style the invoice creation page shell
   - Style section panels and nested panels
   - Style invoice form fields and action buttons
   - Style summary cards and invoice totals
   - Preserve Vixly ControlPlane visual consistency
   - Support responsive invoice creation workflows

   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
   - This stylesheet owns visual styling for CreateInvoice only
   ========================================================= */

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

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

.vx-page__header[b-dju08pwrwk] {
    display: grid;
    gap: 10px;
}

.vx-page__header-top[b-dju08pwrwk] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.vx-page__title[b-dju08pwrwk] {
    margin: 0;
    color: #0f172a;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
}

.vx-page__subtitle[b-dju08pwrwk] {
    max-width: 760px;
    margin: 0;
    color: #64748b;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.65;
}

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

.vx-panel[b-dju08pwrwk] {
    display: grid;
    gap: 20px;
    padding: 22px;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 22px;
    background: radial-gradient( circle at top right, rgba(37, 99, 235, 0.08), 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-panel--nested[b-dju08pwrwk] {
    gap: 18px;
    padding: 20px;
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(248, 250, 252, 0.78);
    box-shadow: none;
}

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

.vx-section-header[b-dju08pwrwk] {
    display: grid;
    gap: 6px;
}

.vx-section-title[b-dju08pwrwk] {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.vx-section-subtitle[b-dju08pwrwk] {
    max-width: 760px;
    margin: 0;
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
}

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

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

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

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

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

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

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

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

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

.vx-button[b-dju08pwrwk] {
    min-height: 44px;
    padding: 0 16px;
    border: none;
    border-radius: 16px;
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

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

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

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

    .vx-button--primary:hover:not(:disabled)[b-dju08pwrwk] {
        box-shadow: 0 18px 32px rgba(37, 99, 235, 0.28);
    }

.vx-button--secondary[b-dju08pwrwk] {
    color: #0f172a;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
}

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

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

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

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

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

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

.vx-summary-card[b-dju08pwrwk] {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.vx-summary-card__label[b-dju08pwrwk] {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-summary-card__value[b-dju08pwrwk] {
    color: #0f172a;
    font-size: 18px;
    font-weight: 900;
    word-break: break-word;
}

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

.vx-error[b-dju08pwrwk] {
    color: #b91c1c;
    font-size: 14px;
    font-weight: 800;
}

.vx-success[b-dju08pwrwk] {
    color: #166534;
    font-size: 14px;
    font-weight: 800;
}

.vx-loading[b-dju08pwrwk] {
    color: #475569;
    font-size: 14px;
    font-weight: 700;
}

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

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

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

    .vx-panel[b-dju08pwrwk] {
        padding: 20px;
    }
}

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

    .vx-page__title[b-dju08pwrwk] {
        font-size: 32px;
    }

    .vx-page__subtitle[b-dju08pwrwk] {
        font-size: 15px;
    }

    .vx-panel[b-dju08pwrwk] {
        padding: 18px;
        border-radius: 20px;
    }

    .vx-panel--nested[b-dju08pwrwk] {
        padding: 18px;
    }

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

    .vx-button[b-dju08pwrwk] {
        width: 100%;
    }
}
/* /Components/Pages/BillingOperations/Billing/Components/Invoices/InvoiceDetails.razor.rz.scp.css */
/* =========================================================
   FILE: InvoiceDetails.razor.css

   PURPOSE:
   Provides styling for invoice detail rendering inside the
   Billing workspace.

   RESPONSIBILITIES:
   - Render invoice detail workspace visuals
   - Display invoice summary metrics
   - Display invoice line items
   - Display payment history
   - Maintain Vixly ControlPlane visual consistency
   - Support responsive layouts

   IMPORTANT NOTES:
   - This stylesheet owns invoice detail visual styling
   - Parent components own orchestration and state
   - Uses the Vixly ControlPlane visual language
   ========================================================= */

.vx-invoice-details[b-d49jsfvwee] {
    display: grid;
    gap: 24px;
    padding: 24px;
    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);
}

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

.vx-invoice-details__topbar[b-d49jsfvwee] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.vx-invoice-details__topbar-actions[b-d49jsfvwee] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vx-invoice-details__print[b-d49jsfvwee] {
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid #2563eb;
    border-radius: 14px;
    background: #2563eb;
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
}

.vx-invoice-details__print:hover[b-d49jsfvwee] {
    background: #1d4ed8;
}

.vx-invoice-details__eyebrow[b-d49jsfvwee] {
    display: block;
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.vx-invoice-details__title[b-d49jsfvwee] {
    margin: 0;
    color: #0f172a;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.1;
}

.vx-invoice-details__subtitle[b-d49jsfvwee] {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
}

.vx-invoice-details__close[b-d49jsfvwee] {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 14px;
    background: #ffffff;
    color: #475569;
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    transition: all .18s ease;
}

    .vx-invoice-details__close:hover[b-d49jsfvwee] {
        background: #f8fafc;
        border-color: rgba(37, 99, 235, 0.25);
    }

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

.vx-invoice-details__summary-grid[b-d49jsfvwee] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.vx-invoice-details__summary-card[b-d49jsfvwee] {
    display: grid;
    gap: 8px;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    background: #ffffff;
}

    .vx-invoice-details__summary-card span[b-d49jsfvwee] {
        color: #64748b;
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .vx-invoice-details__summary-card strong[b-d49jsfvwee] {
        color: #0f172a;
        font-size: 20px;
        font-weight: 900;
    }

/* =========================================================
   SECTIONS
   ========================================================= */

.vx-invoice-details__section[b-d49jsfvwee] {
    display: grid;
    gap: 16px;
}

.vx-invoice-details__section-title[b-d49jsfvwee] {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    font-weight: 900;
}

.vx-invoice-details__empty[b-d49jsfvwee] {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
}

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

.vx-invoice-details__table-shell[b-d49jsfvwee] {
    overflow-x: auto;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 22px;
    background: #ffffff;
}

.vx-invoice-details__table[b-d49jsfvwee] {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
}

    .vx-invoice-details__table thead th[b-d49jsfvwee] {
        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-invoice-details__table tbody td[b-d49jsfvwee] {
        padding: 16px;
        color: #334155;
        font-size: 14px;
        font-weight: 700;
        border-bottom: 1px solid rgba(226, 232, 240, 0.65);
    }

    .vx-invoice-details__table tbody tr:last-child td[b-d49jsfvwee] {
        border-bottom: none;
    }

    .vx-invoice-details__table tbody tr:hover[b-d49jsfvwee] {
        background: rgba(37, 99, 235, 0.03);
    }

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

@media (max-width: 1100px) {
    .vx-invoice-details__summary-grid[b-d49jsfvwee] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .vx-invoice-details[b-d49jsfvwee] {
        padding: 20px;
        gap: 20px;
    }

    .vx-invoice-details__topbar[b-d49jsfvwee] {
        flex-direction: column;
        align-items: stretch;
    }

    .vx-invoice-details__summary-grid[b-d49jsfvwee] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .vx-invoice-details[b-d49jsfvwee] {
        padding: 18px;
        border-radius: 20px;
    }
}
/* /Components/Pages/BillingOperations/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 filter workspace
   - Maintain Vixly Billing filter consistency
   - Support responsive filtering controls
   - Provide search and status filtering surfaces

   IMPORTANT NOTES:
   - This stylesheet owns filter bar visual styling
   - Layout remains responsive across desktop and mobile
   - Uses the Vixly ControlPlane visual language
   ========================================================= */

.vx-filter-bar[b-fbomynar53] {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 18px;
    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-filter-field[b-fbomynar53] {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.vx-filter-field--compact[b-fbomynar53] {
    min-width: 0;
}

.vx-filter-field--search[b-fbomynar53] {
    min-width: 0;
}

.vx-filter-label[b-fbomynar53] {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

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

.vx-filter-field input[b-fbomynar53],
.vx-filter-field select[b-fbomynar53],
.vx-filter-field .form-control[b-fbomynar53],
.vx-filter-input[b-fbomynar53] {
    width: 100%;
    min-height: 44px;
    height: 44px;
    box-sizing: border-box;
    padding: 0 0.9rem;
    border: 1px solid #dbe2ea;
    border-radius: 12px;
    background-color: #ffffff;
    color: #0f172a;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 44px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.vx-filter-field select[b-fbomynar53] {
    cursor: pointer;
}

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

.vx-filter-field input:focus[b-fbomynar53],
.vx-filter-field select:focus[b-fbomynar53],
.vx-filter-field .form-control:focus[b-fbomynar53],
.vx-filter-input:focus[b-fbomynar53] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
}

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

@media (max-width: 900px) {
    .vx-filter-bar[b-fbomynar53] {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 640px) {
    .vx-filter-bar[b-fbomynar53] {
        gap: 14px;
        padding: 18px;
        border-radius: 20px;
    }
}
/* /Components/Pages/BillingOperations/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 Vixly Billing header consistency
   - Support reusable spacing and typography
   - Preserve ControlPlane presentation language

   IMPORTANT NOTES:
   - This stylesheet owns invoice page header visual styling
   - This stylesheet is Billing-specific
   - Uses the Vixly ControlPlane visual language
   ========================================================= */

.vx-page-header[b-q3q4xxai12] {
    display: grid;
    gap: 10px;
}

.vx-page-header__title[b-q3q4xxai12] {
    margin: 0;
    color: #0f172a;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
}

.vx-page-header__subtitle[b-q3q4xxai12] {
    max-width: 760px;
    margin: 0;
    color: #64748b;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.65;
}

@media (max-width: 640px) {
    .vx-page-header__title[b-q3q4xxai12] {
        font-size: 32px;
    }

    .vx-page-header__subtitle[b-q3q4xxai12] {
        font-size: 15px;
    }
}
/* /Components/Pages/BillingOperations/Billing/Components/Invoices/Invoices.razor.rz.scp.css */
/* =========================================================
   FILE: Invoices.razor.css

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

   RESPONSIBILITIES:
   - Control invoice page composition spacing
   - Maintain enterprise-grade section rhythm
   - Preserve Vixly ControlPlane visual consistency
   - Support responsive invoice workspace layouts
   - Coordinate invoice header, filters, and table sections
   - Keep layout concerns separated from child component styling

   IMPORTANT NOTES:
   - Child components own their isolated visual styling
   - This stylesheet controls composition/layout only
   - InvoicePageHeader owns header styling
   - InvoiceFilterBar owns filter styling
   - InvoiceTable owns table styling
   - Loading, error, and empty states own their styling
   ========================================================= */

.vx-billing-invoices[b-73i14ed8jf] {
    display: grid;
    gap: 24px;
}

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

@media (max-width: 900px) {
    .vx-billing-invoices[b-73i14ed8jf] {
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .vx-billing-invoices[b-73i14ed8jf] {
        gap: 18px;
    }
}
/* /Components/Pages/BillingOperations/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
   - Preserve Vixly ControlPlane table consistency

   IMPORTANT NOTES:
   - This stylesheet owns invoice table visual styling
   - This stylesheet is Billing-specific
   - TenantTable.razor.css is the canonical table standard
   ========================================================= */

.vx-table-wrap[b-rx3m3eqjad] {
    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-table[b-rx3m3eqjad] {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
}

    .vx-table thead th[b-rx3m3eqjad] {
        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-table tbody td[b-rx3m3eqjad] {
        padding: 16px;
        color: #334155;
        font-size: 14px;
        font-weight: 700;
        vertical-align: middle;
        border-bottom: 1px solid rgba(226, 232, 240, 0.75);
        background: #ffffff;
    }

    .vx-table tbody tr[b-rx3m3eqjad] {
        transition: background-color 0.18s ease, box-shadow 0.18s ease;
    }

        .vx-table tbody tr:hover td[b-rx3m3eqjad] {
            background: #f8fafc;
        }

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

.vx-table__primary[b-rx3m3eqjad] {
    color: #0f172a;
    font-weight: 900;
    white-space: nowrap;
}

.vx-table__action-button[b-rx3m3eqjad] {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 999px;
    color: #1d4ed8;
    background: rgba(37, 99, 235, 0.06);
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

    .vx-table__action-button:hover[b-rx3m3eqjad] {
        border-color: rgba(37, 99, 235, 0.28);
        background: rgba(37, 99, 235, 0.10);
        transform: translateY(-1px);
    }

.vx-table-placeholder[b-rx3m3eqjad] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    border: 1px dashed rgba(226, 232, 240, 0.95);
    border-radius: 22px;
    background: #ffffff;
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.04);
}

@media (max-width: 900px) {
    .vx-table thead th[b-rx3m3eqjad],
    .vx-table tbody td[b-rx3m3eqjad] {
        padding: 14px;
    }
}

@media (max-width: 640px) {
    .vx-table-placeholder[b-rx3m3eqjad] {
        min-height: 160px;
    }
}
/* /Components/Pages/BillingOperations/Billing/Components/Payments/TenantBillingLookup.razor.rz.scp.css */
/* =========================================================
   FILE: TenantBillingLookup.razor.css

   PURPOSE:
   Styles the tenant lookup surface for Billing Payments.

   RESPONSIBILITIES:
   - Style billing lookup layout
   - Style search card
   - Style tenant summary card
   - Keep consistent Vixly UI language
   - Reduce wasted vertical space
   - Preserve responsive behavior

   IMPORTANT NOTES:
   - Presentation only
   - Matches Billing, Subscription, and Control Plane styling
   ========================================================= */

/* =========================================================
   ROOT
   ========================================================= */

.vx-billing-lookup[b-ajlfozf0pc] {
    display: grid;
    gap: 1.25rem;
}

/* =========================================================
   HEADER
   ========================================================= */

.vx-billing-lookup__header[b-ajlfozf0pc] {
    display: grid;
    gap: 0.45rem;
}

.vx-billing-lookup__eyebrow[b-ajlfozf0pc] {
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-billing-lookup__title[b-ajlfozf0pc] {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.85rem, 3vw, 2.4rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.05em;
}

.vx-billing-lookup__subtitle[b-ajlfozf0pc] {
    max-width: 760px;
    margin: 0;
    color: #64748b;
    font-size: 1rem;
    line-height: 1.6;
}

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

.vx-billing-lookup__grid[b-ajlfozf0pc] {
    display: grid;
    grid-template-columns: minmax(360px, 0.85fr) minmax(520px, 1.15fr);
    gap: 1.25rem;
    align-items: stretch;
}

.vx-billing-card[b-ajlfozf0pc] {
    height: 100%;
}

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

.vx-billing-card[b-ajlfozf0pc] {
    display: grid;
    gap: 1rem;
    min-height: 0;
    padding: 1.35rem;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 22px;
    background: radial-gradient( circle at top right, rgba(37, 99, 235, 0.05), transparent 16rem), #ffffff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.vx-billing-card__header[b-ajlfozf0pc] {
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

/* =========================================================
   FIELD
   ========================================================= */

.vx-field[b-ajlfozf0pc] {
    display: grid;
    gap: 0.5rem;
}

.vx-label[b-ajlfozf0pc] {
    color: #334155;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-input[b-ajlfozf0pc],
[b-ajlfozf0pc] .vx-input {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    padding: 0 1rem;
    color: #0f172a;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    background: #ffffff;
    font: inherit;
    font-size: 0.98rem;
    font-weight: 800;
    outline: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

    .vx-input:focus[b-ajlfozf0pc],
    [b-ajlfozf0pc] .vx-input:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10);
    }

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

.vx-actions[b-ajlfozf0pc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
}

.vx-button[b-ajlfozf0pc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 1.15rem;
    border-radius: 14px;
    border: 1px solid transparent;
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 900;
    transition: transform 0.15s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

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

.vx-button--primary[b-ajlfozf0pc] {
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.20);
}

.vx-button--secondary[b-ajlfozf0pc] {
    min-width: 120px;
    color: #334155;
    background: #ffffff;
    border-color: #cbd5e1;
}

    .vx-button--secondary:hover[b-ajlfozf0pc] {
        color: #0f172a;
        background: #f8fafc;
    }

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

.vx-summary[b-ajlfozf0pc] {
    display: grid;
    gap: 0.75rem;
}

.vx-summary__row[b-ajlfozf0pc] {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

    .vx-summary__row span[b-ajlfozf0pc] {
        color: #64748b;
        font-size: 0.76rem;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .vx-summary__row strong[b-ajlfozf0pc] {
        min-width: 0;
        color: #0f172a;
        font-size: 0.98rem;
        font-weight: 900;
        text-align: right;
        overflow-wrap: anywhere;
    }

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

.vx-billing-empty[b-ajlfozf0pc] {
    display: grid;
    place-items: center;
    min-height: 170px;
    padding: 1.5rem;
    color: #64748b;
    text-align: center;
    border: 1px dashed rgba(148, 163, 184, 0.55);
    border-radius: 18px;
    background: radial-gradient( circle at center, rgba(37, 99, 235, 0.06), transparent 12rem), #f8fafc;
    font-weight: 800;
}

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

@media (max-width: 1180px) {
    .vx-billing-lookup__grid[b-ajlfozf0pc] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .vx-billing-card[b-ajlfozf0pc] {
        padding: 1rem;
        border-radius: 18px;
    }

    .vx-actions[b-ajlfozf0pc] {
        grid-template-columns: 1fr;
    }

    .vx-button[b-ajlfozf0pc],
    .vx-button--secondary[b-ajlfozf0pc] {
        width: 100%;
        min-width: 0;
    }

    .vx-summary__row[b-ajlfozf0pc] {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

        .vx-summary__row strong[b-ajlfozf0pc] {
            text-align: left;
        }
}
/* =========================================================
   LOOKUP HELP
   ========================================================= */

.vx-billing-help[b-ajlfozf0pc] {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.vx-billing-help__icon[b-ajlfozf0pc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-weight: 900;
}

.vx-billing-help__content[b-ajlfozf0pc] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

    .vx-billing-help__content strong[b-ajlfozf0pc] {
        color: #0f172a;
        font-size: 0.92rem;
        font-weight: 900;
    }

    .vx-billing-help__content p[b-ajlfozf0pc] {
        margin: 0;
        color: #64748b;
        font-size: 0.88rem;
        line-height: 1.6;
    }
/* /Components/Pages/BillingOperations/Billing/Components/Payments/TenantInvoicePaymentPanel.razor.rz.scp.css */
/* =========================================================
   FILE: TenantInvoicePaymentPanel.razor.css

   PURPOSE:
   Styles the invoice payment registration panel.

   RESPONSIBILITIES:
   - Match the dark Commercial Engine visual language
   - Present invoice payment context clearly
   - Style payment input fields and actions
   - Preserve responsive behavior

   IMPORTANT NOTES:
   - Presentation only
   - BillingWorkspace owns payment orchestration
   ========================================================= */


.vx-payment-panel__form[b-08z8yj2ykb] { border: 0; padding: 0; margin: 0; min-width: 0; }
.zelle-details[b-08z8yj2ykb] { padding: 18px; margin: 16px 0; border: 1px solid #8bb5e9; border-radius: 12px; background: #f5f9ff; color: #142238; }
.zelle-details img[b-08z8yj2ykb] { display: block; width: 220px; height: 220px; max-width: 100%; object-fit: contain; background: white; padding: 10px; }
.vx-payment-panel[b-08z8yj2ykb] {
    width: calc((100% - 1.25rem) * 1.15 / 2);
    margin-top: 1.25rem;
    margin-left: auto;
    display: grid;
    gap: 1rem;
    padding: 1.35rem;
    border-radius: 22px;
    background: linear-gradient(135deg, #020617 0%, #082f6b 100%);
    box-shadow: 0 18px 40px rgba(15,23,42,.18);
    color: #ffffff;
    transform-origin: right top;
    transform: translateY(0) scale(1);
    opacity: 1;
    transition: transform 220ms cubic-bezier(.2,.9,.3,1), opacity 220ms ease;
}

    .vx-payment-panel.vx-payment-panel--enter[b-08z8yj2ykb] {
        animation: vx-payment-panel-enter-b-08z8yj2ykb 220ms cubic-bezier(.2,.9,.3,1);
    }

@keyframes vx-payment-panel-enter-b-08z8yj2ykb {
    from {
        transform: translateY(8px) scale(0.98);
        opacity: 0;
    }

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

.vx-payment-panel.vx-payment-panel--enter[b-08z8yj2ykb] {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.vx-payment-panel__header[b-08z8yj2ykb] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.vx-payment-panel__eyebrow[b-08z8yj2ykb] {
    display: inline-flex;
    margin-bottom: 0.55rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    color: #bfdbfe;
    background: rgba(255,255,255,.08);
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.vx-payment-panel__title[b-08z8yj2ykb] {
    margin: 0;
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.15;
}

.vx-payment-panel__subtitle[b-08z8yj2ykb] {
    margin: .35rem 0 0;
    color: rgba(226,232,240,.86);
    font-size: .82rem;
    line-height: 1.45;
}

.vx-payment-panel__close[b-08z8yj2ykb] {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    color: #ffffff;
    cursor: pointer;
    font-size: 1.25rem;
    font-weight: 900;
}

.vx-payment-panel__summary[b-08z8yj2ykb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.vx-payment-panel__summary-item[b-08z8yj2ykb] {
    padding: .85rem;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.14));
    border: 1px solid rgba(255,255,255,.12);
}

    .vx-payment-panel__summary-item span[b-08z8yj2ykb] {
        display: block;
        margin-bottom: .35rem;
        color: rgba(226,232,240,.82);
        font-size: .65rem;
        font-weight: 900;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .vx-payment-panel__summary-item strong[b-08z8yj2ykb] {
        color: #ffffff;
        font-size: .92rem;
        font-weight: 900;
        overflow-wrap: anywhere;
    }

.vx-payment-panel__summary-item--balance[b-08z8yj2ykb] {
    border-color: rgba(96,165,250,.42);
    background: rgba(37,99,235,.28);
}

.vx-payment-panel__form[b-08z8yj2ykb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem;
}

.vx-payment-panel__field[b-08z8yj2ykb] {
    display: grid;
    gap: .35rem;
}

.vx-payment-panel__field--full[b-08z8yj2ykb] {
    grid-column: 1 / -1;
}

.vx-payment-panel__field label[b-08z8yj2ykb] {
    color: rgba(226,232,240,.82);
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.vx-payment-panel__input[b-08z8yj2ykb],
.vx-payment-panel__textarea[b-08z8yj2ykb],
[b-08z8yj2ykb] .vx-payment-panel__input,
[b-08z8yj2ykb] .vx-payment-panel__textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(203,213,225,.24);
    border-radius: 14px;
    background: #f8fafc;
    color: #0f172a;
    font: inherit;
    font-weight: 900;
    outline: none;
}

.vx-payment-panel__input[b-08z8yj2ykb],
[b-08z8yj2ykb] .vx-payment-panel__input {
    height: 44px;
    padding: 0 .85rem;
}

.vx-payment-panel__textarea[b-08z8yj2ykb],
[b-08z8yj2ykb] .vx-payment-panel__textarea {
    min-height: 76px;
    padding: .75rem .85rem;
    resize: vertical;
}

.vx-payment-panel__actions[b-08z8yj2ykb] {
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
}

.vx-payment-panel__button[b-08z8yj2ykb] {
    min-width: 130px;
    height: 42px;
    padding: 0 1rem;
    border-radius: 14px;
    border: 1px solid transparent;
    cursor: pointer;
    font: inherit;
    font-size: .82rem;
    font-weight: 900;
}

.vx-payment-panel__button--primary[b-08z8yj2ykb] {
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.vx-payment-panel__button--secondary[b-08z8yj2ykb] {
    color: #0f172a;
    background: #ffffff;
}

@media (max-width: 1180px) {
    .vx-payment-panel[b-08z8yj2ykb] {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 640px) {
    .vx-payment-panel[b-08z8yj2ykb] {
        padding: 1rem;
        border-radius: 18px;
    }

    .vx-payment-panel__summary[b-08z8yj2ykb],
    .vx-payment-panel__form[b-08z8yj2ykb] {
        grid-template-columns: 1fr;
    }

    .vx-payment-panel__actions[b-08z8yj2ykb] {
        flex-direction: column;
    }

    .vx-payment-panel__button[b-08z8yj2ykb] {
        width: 100%;
    }
}
/* /Components/Pages/BillingOperations/Billing/Components/Payments/TenantPaymentReceiptPanel.razor.rz.scp.css */
.vx-payment-receipt-shell[b-qlj7zxwx9g] { margin-top: 20px; }
.vx-payment-receipt[b-qlj7zxwx9g] { max-width: 880px; margin-left: auto; padding: 28px; border: 1px solid #cbd9ec; border-radius: 22px; background: #fff; box-shadow: 0 18px 44px rgba(15, 35, 75, .10); color: #07152e; }
.vx-payment-receipt__header[b-qlj7zxwx9g] { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; padding-bottom: 20px; border-bottom: 1px solid #e2e8f0; }
.vx-payment-receipt__eyebrow[b-qlj7zxwx9g] { color: #1f5fe5; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.vx-payment-receipt h2[b-qlj7zxwx9g] { margin: 5px 0 4px; font-size: 1.65rem; }
.vx-payment-receipt p[b-qlj7zxwx9g] { margin: 0; color: #52627b; }
.vx-payment-receipt__status[b-qlj7zxwx9g] { padding: 8px 14px; border: 1px solid #9ee6b4; border-radius: 999px; background: #ecfdf3; color: #08752e; font-weight: 800; text-transform: uppercase; }
.vx-payment-receipt__grid[b-qlj7zxwx9g] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
.vx-payment-receipt__grid > div[b-qlj7zxwx9g] { min-width: 0; padding: 14px 16px; border-radius: 14px; background: #f5f8fc; }
.vx-payment-receipt dt[b-qlj7zxwx9g] { margin-bottom: 5px; color: #60718d; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.vx-payment-receipt dd[b-qlj7zxwx9g] { margin: 0; overflow-wrap: anywhere; font-weight: 800; }
.vx-payment-receipt__footer[b-qlj7zxwx9g] { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.vx-payment-receipt__identity[b-qlj7zxwx9g] { color: #60718d; font-size: .78rem; overflow-wrap: anywhere; }
.vx-payment-receipt__actions[b-qlj7zxwx9g] { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.vx-payment-receipt__button[b-qlj7zxwx9g] { min-height: 42px; padding: 0 18px; border-radius: 12px; font-weight: 800; cursor: pointer; }
.vx-payment-receipt__button--secondary[b-qlj7zxwx9g] { border: 1px solid #b9c8df; background: #fff; color: #12305d; }
.vx-payment-receipt__button--primary[b-qlj7zxwx9g] { border: 1px solid #2563eb; background: #2563eb; color: #fff; }
.vx-payment-receipt__message[b-qlj7zxwx9g] { margin-top: 16px !important; padding: 12px 14px; border-radius: 12px; background: #ecfdf3; color: #08752e !important; font-weight: 700; }
.vx-payment-receipt__message--error[b-qlj7zxwx9g] { background: #fff1f2; color: #b42318 !important; }
@media (max-width: 760px) { .vx-payment-receipt__grid[b-qlj7zxwx9g] { grid-template-columns: 1fr 1fr; } .vx-payment-receipt__footer[b-qlj7zxwx9g] { align-items: stretch; flex-direction: column; } .vx-payment-receipt__actions[b-qlj7zxwx9g] { justify-content: stretch; } .vx-payment-receipt__button[b-qlj7zxwx9g] { flex: 1; } }
/* /Components/Pages/BillingOperations/Collections/CollectionsWorkspace.razor.rz.scp.css */
/* =========================================================
   FILE: CollectionsWorkspace.razor.css

   PURPOSE:
   Provides top-level layout styling for the Collections
   Operations workspace orchestrator inside the Control Plane.

   RESPONSIBILITIES:
   - Control workspace page spacing
   - Maintain consistent Control Plane content width
   - Preserve unified dashboard/details visual rhythm
   - Support responsive Collections Operations layouts

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

.vx-page[b-224p47aste] {
    display: grid;
    gap: 24px;
    width: 100%;
}

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

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

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

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

.collections-refresh-button[b-224p47aste] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 12px;
    background: linear-gradient( 180deg, #2563eb, #1d4ed8);
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, opacity 140ms ease;
}

    .collections-refresh-button:hover:not(:disabled)[b-224p47aste] {
        transform: translateY(-1px);
        background: linear-gradient( 180deg, #3b82f6, #2563eb);
        box-shadow: 0 12px 24px rgba(37, 99, 235, 0.24);
    }

    .collections-refresh-button:active:not(:disabled)[b-224p47aste] {
        transform: translateY(0);
        box-shadow: 0 6px 14px rgba(37, 99, 235, 0.18);
    }

    .collections-refresh-button:focus-visible[b-224p47aste] {
        outline: none;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14), 0 10px 22px rgba(37, 99, 235, 0.2);
    }

    .collections-refresh-button:disabled[b-224p47aste] {
        cursor: not-allowed;
        opacity: 0.58;
        box-shadow: none;
    }
.collections-refresh-button[b-224p47aste] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 38px;
    padding: 0.65rem 1.1rem;
    border: 1px solid rgba(37, 99, 235, 0.22);
    border-radius: 11px;
    background: linear-gradient( 135deg, #2563eb 0%, #1d4ed8 100% );
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.2);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, border-color 150ms ease;
}

    .collections-refresh-button:hover:not(:disabled)[b-224p47aste] {
        background: linear-gradient( 135deg, #1d4ed8 0%, #1e40af 100% );
        border-color: rgba(29, 78, 216, 0.32);
        box-shadow: 0 10px 22px rgba(37, 99, 235, 0.28);
        transform: translateY(-1px);
    }

    .collections-refresh-button:active:not(:disabled)[b-224p47aste] {
        transform: translateY(0);
        box-shadow: 0 5px 12px rgba(37, 99, 235, 0.22);
    }

    .collections-refresh-button:focus-visible[b-224p47aste] {
        outline: 3px solid rgba(59, 130, 246, 0.28);
        outline-offset: 3px;
    }

    .collections-refresh-button:disabled[b-224p47aste] {
        opacity: 0.65;
        cursor: not-allowed;
        transform: none;
        box-shadow: 0 5px 12px rgba(37, 99, 235, 0.12);
    }

.collections-refresh-button__icon[b-224p47aste] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: currentColor;
    transform-origin: center;
}

.collections-refresh-button__icon--spinning[b-224p47aste] {
    animation: collections-refresh-spin-b-224p47aste 1.1s linear infinite;
}

@keyframes collections-refresh-spin-b-224p47aste {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .collections-refresh-button[b-224p47aste],
    .collections-refresh-button__icon--spinning[b-224p47aste] {
        transition: none;
        animation: none;
    }
}
/* /Components/Pages/BillingOperations/Collections/Components/CollectionCaseDetail.razor.rz.scp.css */
/* =========================================================
   FILE: CollectionCaseDetail.razor.css

   PURPOSE:
   Provides isolated visual styling for the selected
   collections-case detail component.

   RESPONSIBILITIES:
   - Style the selected-case header
   - Style lifecycle status badges
   - Arrange identity and lifecycle details
   - Style suspension and resolution states
   - Style action-summary metrics
   - Preserve spacing around the durable action timeline
   - Support responsive detail layouts

   IMPORTANT NOTES:
   - This stylesheet belongs only to
     CollectionCaseDetail.razor
   - Child timeline styling belongs to
     CollectionTimeline.razor.css
   - Visual states do not enforce collections lifecycle rules
   ========================================================= */

.collection-case-detail[b-n2lmqkun9z] {
    display: grid;
    gap: 24px;
    min-width: 0;
    padding: 24px;
    border: 1px solid #e4e7ec;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.03);
}

.collection-case-detail-header[b-n2lmqkun9z] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eaecf0;
}

    .collection-case-detail-header h2[b-n2lmqkun9z] {
        margin: 0;
        color: #101828;
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -0.025em;
    }

.collection-case-eyebrow[b-n2lmqkun9z] {
    margin: 0 0 6px;
    color: #6941c6;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.collection-case-subtitle[b-n2lmqkun9z] {
    max-width: 520px;
    margin: 7px 0 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.5;
}

.collection-case-status[b-n2lmqkun9z] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

    .collection-case-status.is-open[b-n2lmqkun9z] {
        background: #eff8ff;
        color: #175cd3;
    }

    .collection-case-status.is-suspended[b-n2lmqkun9z] {
        background: #fef3f2;
        color: #b42318;
    }

    .collection-case-status.is-pending[b-n2lmqkun9z] {
        background: #fffaeb;
        color: #b54708;
    }

    .collection-case-status.is-resolved[b-n2lmqkun9z] {
        background: #ecfdf3;
        color: #027a48;
    }

.collection-case-detail-grid[b-n2lmqkun9z] {
    display: grid;
    grid-template-columns: repeat( 2, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
}

    .collection-case-detail-grid > div[b-n2lmqkun9z] {
        min-width: 0;
        padding: 16px;
        border: 1px solid #eaecf0;
        border-radius: 12px;
        background: #f9fafb;
    }

    .collection-case-detail-grid dt[b-n2lmqkun9z] {
        margin: 0 0 6px;
        color: #667085;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .collection-case-detail-grid dd[b-n2lmqkun9z] {
        margin: 0;
        overflow-wrap: anywhere;
        color: #344054;
        font-size: 13px;
        font-weight: 550;
        line-height: 1.5;
    }

.collection-case-state[b-n2lmqkun9z] {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 11px;
    font-weight: 700;
}

    .collection-case-state.is-active[b-n2lmqkun9z] {
        background: #ecfdf3;
        color: #027a48;
    }

.collection-case-action-summary[b-n2lmqkun9z] {
    display: grid;
    grid-template-columns: repeat( 3, minmax(0, 1fr));
    gap: 12px;
}

.collection-case-summary-item[b-n2lmqkun9z] {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 16px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: #ffffff;
}

    .collection-case-summary-item.is-warning[b-n2lmqkun9z] {
        border-color: #fecdca;
        background: #fff6f5;
    }

    .collection-case-summary-item span[b-n2lmqkun9z] {
        color: #667085;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .collection-case-summary-item strong[b-n2lmqkun9z] {
        color: #101828;
        font-size: 24px;
        font-weight: 750;
        letter-spacing: -0.035em;
    }

    .collection-case-summary-item.is-warning strong[b-n2lmqkun9z] {
        color: #b42318;
    }

.collection-case-timeline[b-n2lmqkun9z] {
    padding-top: 4px;
}

.collection-case-extension[b-n2lmqkun9z] {
    display: grid;
    gap: 10px;
    padding: 20px;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    background: #eff6ff;
}

.collection-case-extension h3[b-n2lmqkun9z],
.collection-case-extension p[b-n2lmqkun9z] {
    margin: 0;
}

.collection-case-extension label[b-n2lmqkun9z] {
    color: #344054;
    font-size: 13px;
    font-weight: 700;
}

.collection-case-extension input[b-n2lmqkun9z],
.collection-case-extension textarea[b-n2lmqkun9z] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d0d5dd;
    border-radius: 9px;
    background: #ffffff;
}

.collection-case-extension textarea[b-n2lmqkun9z] {
    min-height: 88px;
    resize: vertical;
}

.collection-case-extension button[b-n2lmqkun9z] {
    justify-self: start;
    padding: 10px 16px;
    border: 0;
    border-radius: 9px;
    color: #ffffff;
    background: #0969da;
    font-weight: 700;
    cursor: pointer;
}

.collection-case-extension button:disabled[b-n2lmqkun9z] {
    cursor: not-allowed;
    opacity: 0.55;
}

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

@media (max-width: 760px) {
    .collection-case-detail[b-n2lmqkun9z] {
        padding: 20px;
    }

    .collection-case-detail-header[b-n2lmqkun9z] {
        align-items: flex-start;
        flex-direction: column;
    }

    .collection-case-detail-grid[b-n2lmqkun9z] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .collection-case-action-summary[b-n2lmqkun9z] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/BillingOperations/Collections/Components/CollectionsCaseList.razor.rz.scp.css */
/* =========================================================
   FILE: CollectionsCaseList.razor.css

   PURPOSE:
   Provides scoped presentation styling for the Control Plane
   Collections Operations case registry.

   RESPONSIBILITIES:
   - Style the collections registry panel
   - Style search and lifecycle filters
   - Style the active collections-case table
   - Style selectable and selected table rows
   - Style lifecycle status badges
   - Style failure and activity indicators
   - Preserve the Vixly Control Plane visual language
   - Provide responsive table behavior

   IMPORTANT NOTES:
   - This stylesheet belongs exclusively to
     CollectionsCaseList
   - Workspace layout belongs to
     CollectionsWorkspace.razor.css
   - Collection-case detail styling belongs to
     CollectionCaseDetail.razor.css
   - Selectors match the vx-collections-list Razor contract
   ========================================================= */


/* =========================================================
   1. LIST PANEL
   ========================================================= */

.vx-collections-list[b-8247lkhppn] {
    display: grid;
    gap: 20px;
    width: 100%;
    min-width: 0;
    padding: 24px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 26px;
    background: radial-gradient( circle at top right, rgba(37, 99, 235, 0.07), transparent 20rem), linear-gradient( 180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.045);
}


/* =========================================================
   2. HEADER
   ========================================================= */

.vx-collections-list__header[b-8247lkhppn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

    .vx-collections-list__header > div[b-8247lkhppn] {
        display: grid;
        gap: 7px;
        min-width: 0;
    }

.vx-collections-list__eyebrow[b-8247lkhppn] {
    color: #2563eb;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-collections-list__title[b-8247lkhppn] {
    margin: 0;
    color: #0f172a;
    font-size: 28px;
    font-weight: 950;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

.vx-collections-list__subtitle[b-8247lkhppn] {
    max-width: 720px;
    margin: 0;
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.65;
}

.vx-collections-list__count[b-8247lkhppn] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 7px 11px;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 999px;
    background: rgba(239, 246, 255, 0.94);
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}


/* =========================================================
   3. FILTERS
   ========================================================= */

.vx-collections-list__filters[b-8247lkhppn] {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(190px, 240px);
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.78);
}

.vx-collections-list__field[b-8247lkhppn] {
    display: grid;
    gap: 7px;
    min-width: 0;
}

    .vx-collections-list__field > span[b-8247lkhppn] {
        color: #475569;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.055em;
        text-transform: uppercase;
    }

    .vx-collections-list__field input[b-8247lkhppn],
    .vx-collections-list__field select[b-8247lkhppn] {
        width: 100%;
        min-height: 42px;
        padding: 10px 12px;
        border: 1px solid rgba(148, 163, 184, 0.24);
        border-radius: 11px;
        outline: none;
        background: #ffffff;
        color: #0f172a;
        font: inherit;
        font-size: 13px;
        font-weight: 750;
        transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
    }

        .vx-collections-list__field input[b-8247lkhppn]::placeholder {
            color: #94a3b8;
            font-weight: 650;
        }

        .vx-collections-list__field input:focus[b-8247lkhppn],
        .vx-collections-list__field select:focus[b-8247lkhppn] {
            border-color: rgba(37, 99, 235, 0.55);
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.09);
        }


/* =========================================================
   4. FEEDBACK / EMPTY STATE
   ========================================================= */

.vx-collections-list__message[b-8247lkhppn] {
    display: grid;
    justify-items: center;
    gap: 10px;
    min-height: 220px;
    padding: 34px 24px;
    border: 1px dashed rgba(148, 163, 184, 0.3);
    border-radius: 22px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.9));
    color: #64748b;
    text-align: center;
}

    .vx-collections-list__message strong[b-8247lkhppn] {
        color: #0f172a;
        font-size: 17px;
        font-weight: 950;
    }

    .vx-collections-list__message span[b-8247lkhppn] {
        max-width: 440px;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.65;
    }

.vx-collections-list__empty-icon[b-8247lkhppn] {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 4px;
    border-radius: 17px;
    background: linear-gradient( 135deg, #2563eb, #4f46e5);
    color: #ffffff;
    font-size: 18px;
    font-weight: 950;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.2);
}


/* =========================================================
   5. TABLE WRAPPER
   ========================================================= */

.vx-collections-list__table-wrapper[b-8247lkhppn] {
    width: 100%;
    overflow-x: auto;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
}

    .vx-collections-list__table-wrapper[b-8247lkhppn]::-webkit-scrollbar {
        height: 8px;
    }

    .vx-collections-list__table-wrapper[b-8247lkhppn]::-webkit-scrollbar-track {
        background: transparent;
    }

    .vx-collections-list__table-wrapper[b-8247lkhppn]::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(148, 163, 184, 0.4);
    }


/* =========================================================
   6. TABLE
   ========================================================= */

.vx-collections-list__table[b-8247lkhppn] {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
}

    .vx-collections-list__table thead[b-8247lkhppn] {
        background: linear-gradient( 180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.92));
    }

    .vx-collections-list__table th[b-8247lkhppn] {
        padding: 14px 16px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.14);
        color: #64748b;
        font-size: 11px;
        font-weight: 950;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.075em;
        white-space: nowrap;
    }

        .vx-collections-list__table th:first-child[b-8247lkhppn] {
            padding-left: 20px;
        }

        .vx-collections-list__table th:last-child[b-8247lkhppn] {
            padding-right: 20px;
        }


/* =========================================================
   7. ROWS
   ========================================================= */

.vx-collections-list__row[b-8247lkhppn] {
    cursor: pointer;
    outline: none;
    transition: background 160ms ease, box-shadow 160ms ease;
}

    .vx-collections-list__row:hover[b-8247lkhppn] {
        background: rgba(239, 246, 255, 0.72);
    }

    .vx-collections-list__row:focus[b-8247lkhppn],
    .vx-collections-list__row:focus-visible[b-8247lkhppn] {
        background: rgba(239, 246, 255, 0.9);
        box-shadow: inset 4px 0 0 #2563eb;
    }

.vx-collections-list__row--selected[b-8247lkhppn] {
    background: rgba(239, 246, 255, 0.94);
    box-shadow: inset 4px 0 0 #2563eb;
}

.vx-collections-list__row td[b-8247lkhppn] {
    padding: 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    color: #334155;
    font-size: 13px;
    font-weight: 800;
    vertical-align: middle;
}

.vx-collections-list__row:last-child td[b-8247lkhppn] {
    border-bottom: 0;
}

.vx-collections-list__row td:first-child[b-8247lkhppn] {
    padding-left: 20px;
}

.vx-collections-list__row td:last-child[b-8247lkhppn] {
    padding-right: 20px;
}


/* =========================================================
   8. CASE LINK / IDENTIFIERS
   ========================================================= */

.vx-collections-list__case-link[b-8247lkhppn] {
    display: block;
    min-height: 28px;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #1d4ed8;
    font: inherit;
    font-size: 13px;
    font-weight: 950;
    text-align: left;
    cursor: pointer;
    transition: color 150ms ease, transform 150ms ease;
}

    .vx-collections-list__case-link:hover[b-8247lkhppn] {
        color: #2563eb;
        transform: translateX(1px);
    }

    .vx-collections-list__case-link:focus-visible[b-8247lkhppn] {
        border-radius: 6px;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.09);
    }

.vx-collections-list__identifier[b-8247lkhppn] {
    display: block;
    max-width: 190px;
    overflow: hidden;
    color: #475569;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   9. STATUS
   ========================================================= */

.vx-collections-status[b-8247lkhppn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.vx-collections-status--open[b-8247lkhppn] {
    border-color: rgba(37, 99, 235, 0.15);
    background: #eff6ff;
    color: #1d4ed8;
}

.vx-collections-status--suspended[b-8247lkhppn] {
    border-color: rgba(220, 38, 38, 0.14);
    background: #fef2f2;
    color: #b91c1c;
}

.vx-collections-status--pending[b-8247lkhppn] {
    border-color: rgba(217, 119, 6, 0.16);
    background: #fffbeb;
    color: #b45309;
}

.vx-collections-status--resolved[b-8247lkhppn] {
    border-color: rgba(22, 163, 74, 0.15);
    background: #f0fdf4;
    color: #15803d;
}


/* =========================================================
   10. ACTIVITY / FAILURE
   ========================================================= */

.vx-collections-list__action-count[b-8247lkhppn] {
    color: #1d4ed8;
    font-size: 14px;
    font-weight: 950;
}

.vx-collections-list__activity[b-8247lkhppn] {
    display: grid;
    gap: 3px;
}

    .vx-collections-list__activity > span[b-8247lkhppn] {
        color: #475569;
        font-size: 12px;
        font-weight: 850;
        white-space: nowrap;
    }

    .vx-collections-list__activity small[b-8247lkhppn] {
        color: #64748b;
        font-size: 11px;
        font-weight: 700;
    }

.vx-collections-list__failure[b-8247lkhppn] {
    display: block;
    width: fit-content;
    margin-top: 5px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 10px;
    font-weight: 900;
}


/* =========================================================
   11. RESPONSIVE
   ========================================================= */

@media (max-width: 760px) {
    .vx-collections-list[b-8247lkhppn] {
        padding: 18px;
        border-radius: 22px;
    }

    .vx-collections-list__header[b-8247lkhppn] {
        align-items: stretch;
        flex-direction: column;
    }

    .vx-collections-list__count[b-8247lkhppn] {
        width: fit-content;
    }

    .vx-collections-list__title[b-8247lkhppn] {
        font-size: 24px;
    }

    .vx-collections-list__filters[b-8247lkhppn] {
        grid-template-columns: 1fr;
    }

    .vx-collections-list__table-wrapper[b-8247lkhppn] {
        padding: 14px;
        border-radius: 18px;
    }
}

@media (max-width: 520px) {
    .vx-collections-list[b-8247lkhppn] {
        gap: 16px;
        padding: 16px;
        border-radius: 20px;
    }

    .vx-collections-list__title[b-8247lkhppn] {
        font-size: 21px;
    }

    .vx-collections-list__subtitle[b-8247lkhppn] {
        font-size: 13px;
    }

    .vx-collections-list__filters[b-8247lkhppn] {
        padding: 13px;
        border-radius: 16px;
    }

    .vx-collections-list__message[b-8247lkhppn] {
        min-height: 190px;
        padding: 26px 18px;
        border-radius: 18px;
    }
}
/* /Components/Pages/BillingOperations/Collections/Components/CollectionsDashboard.razor.rz.scp.css */
/* =========================================================
   FILE: CollectionsDashboard.razor.css

   PURPOSE:
   Provides isolated visual styling for the Collections
   Operations dashboard summary.

   RESPONSIBILITIES:
   - Arrange dashboard metrics in a responsive grid
   - Style metric cards, labels, values, and context
   - Highlight dashboard metrics requiring review
   - Preserve the Vixly Control Plane visual rhythm

   IMPORTANT NOTES:
   - This stylesheet belongs only to
     CollectionsDashboard.razor
   - Dashboard values are calculated by the Application layer
   - Visual warning states do not enforce business rules
   ========================================================= */

.collections-dashboard[b-1xpmbyoxvx] {
    display: grid;
    grid-template-columns: repeat( 4, minmax(0, 1fr));
    gap: 16px;
}

.collections-metric-card[b-1xpmbyoxvx] {
    display: grid;
    align-content: space-between;
    gap: 12px;
    min-width: 0;
    min-height: 132px;
    padding: 20px;
    border: 1px solid #e3e8ef;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.035);
}

.collections-metric-card-warning[b-1xpmbyoxvx] {
    border-color: #f5c2a9;
    background: #fffaf7;
}

.collections-metric-label[b-1xpmbyoxvx] {
    color: #667085;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-transform: uppercase;
}

.collections-metric-value[b-1xpmbyoxvx] {
    overflow-wrap: anywhere;
    color: #101828;
    font-size: 32px;
    font-weight: 750;
    letter-spacing: -0.04em;
    line-height: 1;
}

.collections-metric-date[b-1xpmbyoxvx] {
    font-size: 20px;
    line-height: 1.2;
}

.collections-metric-unit[b-1xpmbyoxvx] {
    color: #475467;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: 0;
}

.collections-metric-context[b-1xpmbyoxvx] {
    color: #667085;
    font-size: 13px;
    line-height: 1.45;
}

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

@media (max-width: 1200px) {
    .collections-dashboard[b-1xpmbyoxvx] {
        grid-template-columns: repeat( 2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .collections-dashboard[b-1xpmbyoxvx] {
        grid-template-columns: 1fr;
    }

    .collections-metric-card[b-1xpmbyoxvx] {
        min-height: 118px;
        padding: 18px;
    }

    .collections-metric-value[b-1xpmbyoxvx] {
        font-size: 28px;
    }
}
/* /Components/Pages/BillingOperations/Collections/Components/CollectionSubscriptionAccess.razor.rz.scp.css */
.subscription-access[b-g81jmzr0bs]{grid-column:1/-1;background:white;border:1px solid #dce5f2;border-radius:18px;padding:22px;display:grid;gap:14px}.subscription-access h2[b-g81jmzr0bs]{margin:0;font-size:1.2rem}.subscription-access p[b-g81jmzr0bs]{margin:0;color:#526785}.subscription-access select[b-g81jmzr0bs]{font:inherit;padding:12px;border:1px solid #cbd9ee;border-radius:10px;width:100%;max-width:650px}.subscription-access [role=alert][b-g81jmzr0bs]{color:#a61726}
/* /Components/Pages/BillingOperations/Collections/Components/CollectionTimeline.razor.rz.scp.css */
body[b-hral1pjf9g] {
}
/* /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-uinn0mrcez] {
    display: grid;
    place-items: center;
    min-height: calc(100vh - 180px);
}

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

.vx-error-card[b-uinn0mrcez] {
    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-uinn0mrcez]::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-uinn0mrcez] {
    position: relative;
    z-index: 1;
}

.vx-error-card__code[b-uinn0mrcez] {
    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-uinn0mrcez] {
    position: relative;
    z-index: 1;
    align-self: center;
}

.vx-error-card__badge[b-uinn0mrcez] {
    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-uinn0mrcez] {
    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-uinn0mrcez] {
    max-width: 560px;
    margin: 18px 0 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.8;
}

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

.vx-error-card__request[b-uinn0mrcez] {
    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-uinn0mrcez] {
        color: #64748b;
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

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

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

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

.vx-error-card__button[b-uinn0mrcez] {
    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-uinn0mrcez] {
        transform: translateY(-1px);
    }

.vx-error-card__button--primary[b-uinn0mrcez] {
    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-uinn0mrcez] {
    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-uinn0mrcez] {
        grid-template-columns: 1fr;
    }

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

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

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

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

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

   PURPOSE:
   Scoped styling for the Vixly Control Plane landing page.
   ========================================================= */

.vx-hub-page[b-5tw53r9p1e] {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  width: 100%;
}

/* Hero Command Center Section */
.vx-hub-hero[b-5tw53r9p1e] {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: 34px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.14), transparent 24rem), linear-gradient(135deg, #ffffff 0%, #f8fafc 52%, #eef2ff 100%);
  box-shadow: var(--elevation-card);
}

.vx-hub-hero[b-5tw53r9p1e]::before {
  position: absolute;
  right: -5rem;
  top: -5rem;
  width: 16rem;
  height: 16rem;
  content: "";
  border-radius: var(--radius-full);
  background: rgba(37, 99, 235, 0.08);
  pointer-events: none;
}

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

.vx-hub-hero__badge[b-5tw53r9p1e] {
  display: inline-flex;
  align-items: center;
  margin-bottom: 14px;
  padding: 6px 14px;
  color: var(--vixly-blue-600);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: var(--radius-full);
  background: rgba(37, 99, 235, 0.08);
}

.vx-hub-hero__title[b-5tw53r9p1e] {
  margin: 0;
  color: var(--color-text-main);
  font-size: var(--font-size-3xl);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
}

.vx-hub-hero__subtitle[b-5tw53r9p1e] {
  max-width: 720px;
  margin: 14px 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  line-height: 1.7;
}

.vx-hub-hero__status[b-5tw53r9p1e] {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 10px 16px;
  color: #047857;
  font-size: 13px;
  font-weight: 800;
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-radius: var(--radius-full);
  background: rgba(240, 253, 244, 0.95);
}

.vx-hub-hero__status-dot[b-5tw53r9p1e] {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--vixly-success);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}

/* KPI Cards Grid */
.vx-hub-kpi-grid[b-5tw53r9p1e] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
}

/* Content Grid */
.vx-hub-content-grid[b-5tw53r9p1e] {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-lg);
}

.vx-hub-panel[b-5tw53r9p1e] {
  padding: 28px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  background: var(--color-bg-surface);
  box-shadow: var(--elevation-card);
}

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

.vx-hub-panel__eyebrow[b-5tw53r9p1e] {
  display: inline-flex;
  margin-bottom: 6px;
  color: var(--vixly-blue-600);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.vx-hub-panel__title[b-5tw53r9p1e] {
  margin: 0;
  color: var(--color-text-main);
  font-size: var(--font-size-xl);
  font-weight: 900;
  letter-spacing: -0.03em;
}

.vx-hub-panel__subtitle[b-5tw53r9p1e] {
  max-width: 640px;
  margin: 6px 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

/* Module Action Cards */
.vx-hub-module-grid[b-5tw53r9p1e] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
}

.vx-hub-module-card[b-5tw53r9p1e] {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 90px;
  padding: 18px;
  text-align: left;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  cursor: pointer;
  appearance: none;
  font: inherit;
  transition: all var(--transition-fast);
}

.vx-hub-module-card:hover[b-5tw53r9p1e] {
  transform: translateY(-2px);
  border-color: rgba(37, 99, 235, 0.3);
  background: #ffffff;
  box-shadow: var(--elevation-border-hover);
}

.vx-hub-module-card__icon[b-5tw53r9p1e] {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  background: var(--vixly-blue-50);
  color: var(--vixly-blue-600);
}

.vx-hub-module-card__content[b-5tw53r9p1e] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.vx-hub-module-card__content strong[b-5tw53r9p1e] {
  color: var(--color-text-main);
  font-size: var(--font-size-sm);
  font-weight: 800;
}

.vx-hub-module-card__content small[b-5tw53r9p1e] {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: 1.45;
}

/* System Notes List */
.vx-hub-notes-list[b-5tw53r9p1e] {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.vx-hub-note[b-5tw53r9p1e] {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.note-bullet[b-5tw53r9p1e] {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  flex: 0 0 auto;
  border-radius: var(--radius-full);
  background: var(--vixly-blue-600);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.note-body[b-5tw53r9p1e] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.note-body strong[b-5tw53r9p1e] {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text-main);
}

.note-body p[b-5tw53r9p1e] {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}

/* Responsive Media Queries */
@media (max-width: 1080px) {
  .vx-hub-hero[b-5tw53r9p1e] {
    flex-direction: column;
    align-items: flex-start;
  }

  .vx-hub-content-grid[b-5tw53r9p1e] {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .vx-hub-hero[b-5tw53r9p1e],
  .vx-hub-panel[b-5tw53r9p1e] {
    padding: 20px;
    border-radius: var(--radius-lg);
  }

  .vx-hub-hero__title[b-5tw53r9p1e] {
    font-size: 2.25rem;
  }
}
/* /Components/Pages/Legal/TenantTermsDetail.razor.rz.scp.css */
.vx-legal-detail[b-cm3nxrlua8] { display:grid; gap:20px; max-width:1050px; margin:0 auto; padding:28px; border:1px solid #dbe4f0; border-radius:28px; background:#fff; box-shadow:0 20px 50px rgba(15,23,42,.06); color:#0f172a; }
header[b-cm3nxrlua8] { display:flex; justify-content:space-between; gap:20px; } header p[b-cm3nxrlua8] { margin:0;color:#2563eb;font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.1em } header h1[b-cm3nxrlua8] { margin:5px 0;font-size:32px;letter-spacing:-.04em } header span[b-cm3nxrlua8] { color:#64748b }.actions[b-cm3nxrlua8]{display:flex;gap:9px;align-items:flex-start}.actions a[b-cm3nxrlua8],.actions button[b-cm3nxrlua8]{padding:10px 14px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:#1d4ed8;font:inherit;font-size:12px;font-weight:900;text-decoration:none;cursor:pointer}.actions button[b-cm3nxrlua8]{background:#1d4ed8;color:#fff;border-color:#1d4ed8}
.decision[b-cm3nxrlua8] { display:grid;gap:4px;padding:17px 19px;border-radius:15px}.decision span[b-cm3nxrlua8]{font-size:10px;font-weight:900;text-transform:uppercase}.decision strong[b-cm3nxrlua8]{font-size:20px}.decision small[b-cm3nxrlua8]{line-height:1.5}.decision.approved[b-cm3nxrlua8]{background:#f0fdf4;color:#166534}.decision.pending[b-cm3nxrlua8]{background:#fffbeb;color:#92400e}.decision.denied[b-cm3nxrlua8]{background:#fef2f2;color:#991b1b}
.grid[b-cm3nxrlua8]{display:grid;grid-template-columns:1fr 1fr;gap:16px}article[b-cm3nxrlua8]{padding:21px;border:1px solid #e2e8f0;border-radius:17px;background:#fff}article h2[b-cm3nxrlua8]{margin:0 0 15px;font-size:17px}dl[b-cm3nxrlua8]{display:grid;grid-template-columns:145px 1fr;gap:9px 14px;margin:0}dt[b-cm3nxrlua8]{color:#64748b;font-size:11px;font-weight:900;text-transform:uppercase}dd[b-cm3nxrlua8]{margin:0;font-size:13px;font-weight:700}.hash[b-cm3nxrlua8],.break[b-cm3nxrlua8]{overflow-wrap:anywhere;font-family:ui-monospace,monospace;font-size:10px}article>a[b-cm3nxrlua8]{display:inline-flex;margin-top:16px;color:#1d4ed8;font-weight:900;text-decoration:none}.evidence p[b-cm3nxrlua8]{color:#475569;line-height:1.6}footer[b-cm3nxrlua8]{color:#64748b;font-size:10px}.empty[b-cm3nxrlua8]{padding:24px;border:1px dashed #cbd5e1;border-radius:16px}
.incorporated>p[b-cm3nxrlua8]{color:#475569;line-height:1.55}.document-list[b-cm3nxrlua8]{display:grid;gap:10px}.document-row[b-cm3nxrlua8]{display:grid;grid-template-columns:1fr auto;gap:5px 16px;padding:14px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc}.document-row div[b-cm3nxrlua8]{display:grid;gap:3px}.document-row span[b-cm3nxrlua8]{color:#64748b;font-size:11px;font-weight:700}.document-row a[b-cm3nxrlua8]{align-self:center;color:#1d4ed8;font-size:12px;font-weight:900;text-decoration:none}.document-row small[b-cm3nxrlua8]{grid-column:1/-1;color:#64748b;font-family:ui-monospace,monospace;overflow-wrap:anywhere}
@media(max-width:760px){.vx-legal-detail[b-cm3nxrlua8]{padding:18px}.grid[b-cm3nxrlua8]{grid-template-columns:1fr}header[b-cm3nxrlua8]{flex-direction:column}dl[b-cm3nxrlua8]{grid-template-columns:1fr}.actions[b-cm3nxrlua8]{flex-wrap:wrap}}
.remediation[b-cm3nxrlua8]{display:grid;gap:12px;border-color:#fed7aa;background:#fffaf5}.remediation p[b-cm3nxrlua8]{margin:0;color:#64748b}.remediation label[b-cm3nxrlua8]{display:grid;gap:7px;color:#334155;font-size:12px;font-weight:900}.remediation label small[b-cm3nxrlua8]{color:#64748b}.remediation textarea[b-cm3nxrlua8]{padding:12px;border:1px solid #cbd5e1;border-radius:11px;font:inherit;resize:vertical}.remediation button[b-cm3nxrlua8]{width:max-content;padding:11px 17px;border:0;border-radius:11px;background:#1d4ed8;color:#fff;font:inherit;font-weight:900;cursor:pointer}.remediation button:disabled[b-cm3nxrlua8]{background:#cbd5e1;color:#64748b;cursor:not-allowed}.message[b-cm3nxrlua8]{padding:11px;border-radius:10px;font-size:12px;font-weight:800}.message.sent[b-cm3nxrlua8]{background:#dcfce7;color:#166534}.message.failed[b-cm3nxrlua8]{background:#fee2e2;color:#991b1b}.history[b-cm3nxrlua8]{overflow:auto}.history table[b-cm3nxrlua8]{width:100%;border-collapse:collapse;font-size:11px}.history th[b-cm3nxrlua8],.history td[b-cm3nxrlua8]{padding:10px;border-bottom:1px solid #e2e8f0;text-align:left;vertical-align:top}.history th[b-cm3nxrlua8]{color:#64748b;text-transform:uppercase}.history td small[b-cm3nxrlua8]{display:block;color:#b91c1c;margin-top:3px}
@media print{.no-print[b-cm3nxrlua8]{display:none!important}.vx-legal-detail[b-cm3nxrlua8]{max-width:none;padding:0;border:0;box-shadow:none}.grid[b-cm3nxrlua8]{grid-template-columns:1fr 1fr}article[b-cm3nxrlua8]{break-inside:avoid}footer[b-cm3nxrlua8]{margin-top:20px}}
/* /Components/Pages/Legal/TenantTermsRegister.razor.rz.scp.css */
.vx-legal-register[b-1si1ef0j70] { display:grid; gap:20px; max-width:1200px; margin:0 auto; padding:28px; border:1px solid #dbe4f0; border-radius:28px; background:#fff; box-shadow:0 20px 50px rgba(15,23,42,.06); color:#0f172a; }
header[b-1si1ef0j70] { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
header h1[b-1si1ef0j70] { margin:4px 0; font-size:34px; letter-spacing:-.04em; } header p[b-1si1ef0j70] { margin:0; color:#64748b; }
.eyebrow[b-1si1ef0j70] { color:#2563eb; font-size:11px; font-weight:950; letter-spacing:.1em; text-transform:uppercase; }
.print[b-1si1ef0j70] { padding:11px 17px; border:0; border-radius:11px; background:#1d4ed8; color:#fff; font-weight:900; cursor:pointer; }
.document[b-1si1ef0j70] { display:flex; flex-wrap:wrap; gap:10px 20px; padding:15px 18px; border-radius:14px; background:#eff6ff; color:#1e40af; }
.summary[b-1si1ef0j70] { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.summary button[b-1si1ef0j70] { display:grid; gap:6px; padding:16px; border:1px solid #e2e8f0; border-radius:15px; background:#f8fafc; text-align:left; cursor:pointer; }.summary span[b-1si1ef0j70] { color:#64748b; font-size:12px; font-weight:850; }.summary strong[b-1si1ef0j70] { font-size:24px; }.summary .approved strong[b-1si1ef0j70] { color:#15803d; }.summary .pending strong[b-1si1ef0j70] { color:#b45309; }.summary .denied strong[b-1si1ef0j70] { color:#b91c1c; }
.filters[b-1si1ef0j70] { display:grid; grid-template-columns:minmax(240px,.8fr) minmax(260px,1.2fr) 220px; gap:14px; }.filters label[b-1si1ef0j70] { display:grid; gap:6px; color:#334155; font-size:12px; font-weight:900; }.filters input[b-1si1ef0j70],.filters select[b-1si1ef0j70] { min-height:43px; padding:9px 11px; border:1px solid #cbd5e1; border-radius:10px; background:#fff; font:inherit; }
.table-wrap[b-1si1ef0j70] { overflow:auto; border:1px solid #e2e8f0; border-radius:16px; } table[b-1si1ef0j70] { width:100%; border-collapse:collapse; font-size:13px; } th[b-1si1ef0j70] { padding:12px 14px; background:#f8fafc; color:#64748b; text-align:left; text-transform:uppercase; font-size:10px; letter-spacing:.06em; } td[b-1si1ef0j70] { padding:14px; border-top:1px solid #edf2f7; } td a[b-1si1ef0j70] { color:#1d4ed8; font-weight:850; text-decoration:none; }.status[b-1si1ef0j70] { display:inline-flex; padding:6px 9px; border-radius:999px; font-size:11px; font-weight:900; }.status.approved[b-1si1ef0j70] { background:#dcfce7;color:#166534; }.status.pending[b-1si1ef0j70] { background:#fef3c7;color:#92400e; }.status.denied[b-1si1ef0j70] { background:#fee2e2;color:#991b1b; }
.empty[b-1si1ef0j70] { padding:24px; border:1px dashed #cbd5e1; border-radius:16px; color:#64748b; } footer[b-1si1ef0j70] { color:#64748b; font-size:10px; }
@media(max-width:800px){.summary[b-1si1ef0j70]{grid-template-columns:1fr 1fr}.filters[b-1si1ef0j70]{grid-template-columns:1fr}header[b-1si1ef0j70]{flex-direction:column}.vx-legal-register[b-1si1ef0j70]{padding:18px}}
@media print { .no-print[b-1si1ef0j70]{display:none!important}.vx-legal-register[b-1si1ef0j70]{max-width:none;padding:0;border:0;box-shadow:none}.summary[b-1si1ef0j70]{grid-template-columns:repeat(4,1fr)}.table-wrap[b-1si1ef0j70]{overflow:visible}table[b-1si1ef0j70]{font-size:10pt} }
/* /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-zl3gl4rh6i] {
    display: grid;
    place-items: center;
    min-height: calc(100vh - 180px);
}

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

.vx-not-found__card[b-zl3gl4rh6i] {
    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-zl3gl4rh6i]::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-zl3gl4rh6i] {
    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-zl3gl4rh6i] {
    position: relative;
    z-index: 1;
    align-self: center;
}

.vx-not-found__badge[b-zl3gl4rh6i] {
    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-zl3gl4rh6i] {
    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-zl3gl4rh6i] {
    max-width: 560px;
    margin: 18px 0 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.8;
}

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

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

.vx-not-found__button[b-zl3gl4rh6i] {
    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-zl3gl4rh6i] {
        transform: translateY(-1px);
    }

.vx-not-found__button--primary[b-zl3gl4rh6i] {
    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-zl3gl4rh6i] {
    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-zl3gl4rh6i] {
        grid-template-columns: 1fr;
    }

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

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

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

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

    .vx-not-found__button[b-zl3gl4rh6i] {
        width: 100%;
    }
}
/* /Components/Pages/Registrants/RegistrantsWorkspace.razor.rz.scp.css */
/* =========================================================
   FILE: RegistrantsWorkspace.razor.css

   PURPOSE:
   Styles the Registrants workspace placeholder.

   RESPONSIBILITIES:
   - Present future functionality professionally
   - Maintain Vixly Control Plane visual language
   - Provide executive-style workspace appearance
   - Support responsive layouts

   IMPORTANT NOTES:
   - Temporary until Registrants workspace is implemented
   ========================================================= */

.vx-page[b-xxcieobbpd] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 180px);
    padding: 2rem;
}

.vx-under-construction[b-xxcieobbpd] {
    width: 100%;
    max-width: 980px;
    padding: 3rem;
    border-radius: 28px;
    border: 1px solid rgba(37, 99, 235, 0.12);
    background: radial-gradient( circle at top right, rgba(37, 99, 235, 0.10), transparent 22rem ), linear-gradient( 180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96) );
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.vx-under-construction__badge[b-xxcieobbpd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.10);
    color: #2563eb;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-under-construction__title[b-xxcieobbpd] {
    margin: 1.25rem 0 0.75rem;
    font-size: 2.5rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.15;
}

.vx-under-construction__subtitle[b-xxcieobbpd] {
    max-width: 700px;
    margin: 0;
    color: #475569;
    font-size: 1.05rem;
    line-height: 1.75;
}

.vx-roadmap[b-xxcieobbpd] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.vx-roadmap-card[b-xxcieobbpd] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.vx-roadmap-card__title[b-xxcieobbpd] {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.vx-roadmap-card ul[b-xxcieobbpd] {
    margin: 0;
    padding-left: 1.2rem;
    color: #475569;
    line-height: 1.8;
}

.vx-roadmap-card li + li[b-xxcieobbpd] {
    margin-top: 0.35rem;
}

.vx-status-panel[b-xxcieobbpd] {
    margin-top: 2rem;
    padding: 1.25rem;
    border-radius: 18px;
    background: rgba(37, 99, 235, 0.05);
    border: 1px solid rgba(37, 99, 235, 0.12);
}

.vx-status-panel__title[b-xxcieobbpd] {
    margin: 0 0 0.5rem;
    color: #1e3a8a;
    font-size: 0.95rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vx-status-panel__text[b-xxcieobbpd] {
    margin: 0;
    color: #334155;
    line-height: 1.7;
}

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

    .vx-under-construction[b-xxcieobbpd] {
        padding: 2rem;
    }

    .vx-under-construction__title[b-xxcieobbpd] {
        font-size: 2rem;
    }
}
/* /Components/Pages/Settings/MerchantConfiguration/MerchantConfigurationWorkspace.razor.rz.scp.css */
/* =========================================================
   FILE: MerchantConfigurationWorkspace.razor.css
   PURPOSE: Styles the secured merchant configuration workspace.
   RESPONSIBILITIES: Provide readable form and status presentation.
   IMPORTANT NOTES: Contains no authorization or business logic.
   ========================================================= */

.merchant-page[b-9bjt2jv6m4] { display: grid; gap: 24px; padding: 32px; }
.payment-tabs[b-9bjt2jv6m4] { display: flex; gap: 8px; flex-wrap: wrap; }
.payment-tabs button[b-9bjt2jv6m4] { padding: 12px 18px; border: 1px solid #d0dced; border-radius: 9px; color: #21416e; background: white; cursor: pointer; font: inherit; }
.payment-tabs button.selected[b-9bjt2jv6m4] { background: #2256d9; color: white; border-color: #2256d9; }
.payment-tabs button:focus-visible[b-9bjt2jv6m4] { outline: 3px solid #80b7ff; outline-offset: 2px; }
.merchant-page h1[b-9bjt2jv6m4] { margin: 0; color: #101828; font-size: 42px; }
.merchant-page header > p:last-child[b-9bjt2jv6m4] { color: #667085; }
.merchant-eyebrow[b-9bjt2jv6m4] { margin: 0; color: #0969da; font-weight: 800; text-transform: uppercase; }
.merchant-card[b-9bjt2jv6m4] { display: grid; gap: 20px; max-width: 960px; padding: 28px; border: 1px solid #e4e7ec; border-radius: 18px; background: #fff; }
.merchant-card label[b-9bjt2jv6m4] { display: grid; gap: 8px; color: #344054; font-weight: 700; }
.merchant-card input[b-9bjt2jv6m4], .merchant-card select[b-9bjt2jv6m4] { padding: 12px 14px; border: 1px solid #d0d5dd; border-radius: 9px; background: #fff; }
.merchant-card small[b-9bjt2jv6m4] { color: #667085; font-weight: 400; }
.merchant-warning[b-9bjt2jv6m4] { padding: 14px; border: 1px solid #fedf89; border-radius: 10px; color: #93370d; background: #fffaeb; }
.merchant-alert[b-9bjt2jv6m4] { padding: 14px; border-radius: 10px; color: #175cd3; background: #eff8ff; }
.merchant-actions button[b-9bjt2jv6m4] { padding: 12px 18px; border: 0; border-radius: 9px; color: #fff; background: #0969da; font-weight: 750; }
.merchant-actions button:disabled[b-9bjt2jv6m4] { opacity: .55; }
/* /Components/Pages/Settings/MerchantConfiguration/PlatformZelleSettingsPanel.razor.rz.scp.css */
.zelle-card[b-pvlkuq771m] { max-width: 960px; padding: 28px; border: 1px solid #d8e3f2; border-radius: 18px; background: white; color: #142238; }
h2[b-pvlkuq771m], h3[b-pvlkuq771m] { margin-top: 0; } p[b-pvlkuq771m], small[b-pvlkuq771m] { color: #53667e; } small[b-pvlkuq771m] { font-weight: 400; font-size: .8rem; }
fieldset[b-pvlkuq771m] { border: 0; padding: 0; margin: 0; min-width: 0; }
.grid[b-pvlkuq771m] { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
label[b-pvlkuq771m] { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; font-weight: 600; }
input:not([type=checkbox])[b-pvlkuq771m], textarea[b-pvlkuq771m] { box-sizing: border-box; width: 100%; padding: 12px; border: 1px solid #c5d5eb; border-radius: 8px; font: inherit; }
.qr-upload[b-pvlkuq771m] { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; padding: 18px; border: 1px dashed #b7cbe8; border-radius: 12px; background: #f8fbff; }
.qr-upload > div[b-pvlkuq771m] { flex: 1 1 300px; }
.qr-preview[b-pvlkuq771m] { width: 200px; height: 200px; max-width: 100%; object-fit: contain; background: white; padding: 12px; border: 1px solid #d8e3f2; border-radius: 8px; }
.toggle[b-pvlkuq771m] { flex-direction: row; align-items: center; background: #f4f8ff; padding: 16px; border-radius: 10px; } .toggle input[b-pvlkuq771m] { width: 20px; height: 20px; }
button[b-pvlkuq771m] { border: 1px solid #d0dced; border-radius: 9px; background: white; padding: 11px 20px; color: #21416e; font: inherit; cursor: pointer; }
button.primary[b-pvlkuq771m] { background: #2256d9; color: white; border-color: #2256d9; }
button:disabled[b-pvlkuq771m] { opacity: .6; cursor: not-allowed; } button:focus-visible[b-pvlkuq771m], input:focus-visible[b-pvlkuq771m], textarea:focus-visible[b-pvlkuq771m] { outline: 3px solid #80b7ff; outline-offset: 2px; }
footer[b-pvlkuq771m] { display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid #e4ebf5; padding-top: 20px; margin-top: 24px; }
.notice[b-pvlkuq771m] { padding: 16px; background: #edf5ff; border: 1px solid #c5daf8; border-radius: 10px; margin-bottom: 16px; }
@media(max-width: 650px) { .grid[b-pvlkuq771m] { grid-template-columns: 1fr; gap: 0; } .zelle-card[b-pvlkuq771m] { padding: 16px; } footer[b-pvlkuq771m] { flex-wrap: wrap; } }
/* /Components/Pages/Settings/PlatformCompanyProfile/Components/PlatformCompanyProfileForm.razor.rz.scp.css */
/* =========================================================
   FILE: PlatformCompanyProfileForm.razor.css

   PURPOSE:
   Provides styling for the editable platform company profile
   form inside the ControlPlane settings workspace.

   RESPONSIBILITIES:
   - Style platform company profile shell
   - Style brand identity and logo upload area
   - Style grouped editable profile sections
   - Style validation and save feedback messages
   - Preserve Vixly ControlPlane light enterprise visuals

   IMPORTANT NOTES:
   - This stylesheet follows the Vixly ControlPlane card
     language
   - Shared layout styles should remain global
   - This stylesheet should not define unrelated settings page
     styles
   ========================================================= */

/* =========================================================
   1. PANEL
   ========================================================= */

.vx-platform-profile-panel[b-si9c2rjwqe] {
    display: grid;
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
}

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

.vx-platform-profile-hero[b-si9c2rjwqe] {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 22px;
    align-items: center;
    padding: 24px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(239,246,255,0.72));
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.vx-platform-profile-logo-card[b-si9c2rjwqe] {
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 26px;
    background: rgba(255,255,255,0.94);
}

.vx-platform-profile-logo[b-si9c2rjwqe] {
    max-width: 84px;
    max-height: 84px;
    object-fit: contain;
}

.vx-platform-profile-logo-placeholder[b-si9c2rjwqe] {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 24px;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.09);
    font-size: 32px;
    font-weight: 950;
}

.vx-platform-profile-hero__content[b-si9c2rjwqe] {
    display: grid;
    gap: 8px;
}

.vx-platform-profile-hero__eyebrow[b-si9c2rjwqe] {
    color: #2563eb;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.vx-platform-profile-hero__title[b-si9c2rjwqe] {
    margin: 0;
    color: #0f172a;
    font-size: 30px;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.vx-platform-profile-hero__subtitle[b-si9c2rjwqe] {
    max-width: 780px;
    margin: 0;
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.75;
}

/* =========================================================
   3. FEEDBACK
   ========================================================= */

.vx-platform-profile-message[b-si9c2rjwqe],
.vx-platform-profile-alert[b-si9c2rjwqe] {
    padding: 14px 16px;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 800;
}

.vx-platform-profile-message[b-si9c2rjwqe] {
    border: 1px solid rgba(148, 163, 184, 0.14);
    color: #475569;
    background: rgba(248, 250, 252, 0.92);
}

.vx-platform-profile-alert--error[b-si9c2rjwqe] {
    border: 1px solid rgba(220, 38, 38, 0.18);
    color: #991b1b;
    background: rgba(254, 242, 242, 0.92);
}

.vx-platform-profile-alert--success[b-si9c2rjwqe] {
    border: 1px solid rgba(22, 163, 74, 0.18);
    color: #166534;
    background: rgba(240, 253, 244, 0.92);
}

/* =========================================================
   4. SECTIONS
   ========================================================= */

.vx-platform-profile-section[b-si9c2rjwqe] {
    display: grid;
    gap: 18px;
    padding: 22px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 26px;
    background: rgba(255,255,255,0.96);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.045);
}

.vx-platform-profile-section__header[b-si9c2rjwqe] {
    display: grid;
    gap: 6px;
}

    .vx-platform-profile-section__header h3[b-si9c2rjwqe] {
        margin: 0;
        color: #0f172a;
        font-size: 17px;
        font-weight: 950;
        letter-spacing: -0.02em;
    }

    .vx-platform-profile-section__header p[b-si9c2rjwqe] {
        max-width: 720px;
        margin: 0;
        color: #64748b;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.65;
    }

/* =========================================================
   5. BRAND IDENTITY
   ========================================================= */

.vx-platform-brand-grid[b-si9c2rjwqe] {
    display: grid;
    grid-template-columns: 420px 1fr 1fr;
    gap: 18px;
    align-items: stretch;
}

.vx-platform-brand-card[b-si9c2rjwqe] {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 18px;
    align-items: center;
    min-height: 164px;
    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));
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.04);
}

..vx-platform-brand-preview[b-si9c2rjwqe] {
    width: 88px;
    height: 88px;
}

.vx-platform-brand-preview__image[b-si9c2rjwqe] {
    max-width: 86px;
    max-height: 86px;
    object-fit: contain;
}

.vx-platform-brand-preview__placeholder[b-si9c2rjwqe] {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 22px;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.09);
    font-size: 32px;
    font-weight: 950;
}

.vx-platform-brand-card__content[b-si9c2rjwqe] {
    display: grid;
    gap: 8px;
}

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

.vx-platform-brand-card__title[b-si9c2rjwqe] {
    color: #0f172a;
    font-size: 17px;
    font-weight: 950;
}

.vx-platform-brand-card__text[b-si9c2rjwqe] {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
}

.vx-platform-profile-upload-button[b-si9c2rjwqe] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.09);
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
    overflow: hidden;
    transition: background 160ms ease, transform 160ms ease;
}

    .vx-platform-profile-upload-button:hover[b-si9c2rjwqe] {
        transform: translateY(-1px);
        background: rgba(37, 99, 235, 0.14);
    }

.vx-platform-profile-upload-shell[b-si9c2rjwqe] {
    display: flex;
    width: fit-content;
}

.vx-platform-profile-upload-button[b-si9c2rjwqe] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(37,99,235,.18);
}

    .vx-platform-profile-upload-button:hover[b-si9c2rjwqe] {
        background: #1d4ed8;
    }

    .vx-platform-profile-upload-button span[b-si9c2rjwqe] {
        pointer-events: none;
    }

[b-si9c2rjwqe] .vx-platform-profile-upload-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* =========================================================
   6. GRID
   ========================================================= */

.vx-platform-profile-grid[b-si9c2rjwqe] {
    display: grid;
    gap: 18px;
}

.vx-platform-profile-grid--two[b-si9c2rjwqe] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vx-platform-profile-grid--three[b-si9c2rjwqe] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* =========================================================
   7. EDITABLE CARD
   ========================================================= */

.vx-platform-profile-card[b-si9c2rjwqe] {
    display: grid;
    gap: 10px;
    min-height: 118px;
    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-platform-profile-card:hover[b-si9c2rjwqe] {
        transform: translateY(-1px);
        border-color: rgba(37, 99, 235, 0.16);
        box-shadow: 0 16px 34px rgba(15, 23, 42, 0.05);
    }

.vx-platform-profile-card--wide[b-si9c2rjwqe] {
    grid-column: span 2;
}

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

.vx-platform-profile-card__input[b-si9c2rjwqe] {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    color: #0f172a;
    background: rgba(255,255,255,0.94);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

    .vx-platform-profile-card__input:focus[b-si9c2rjwqe] {
        border-color: rgba(37, 99, 235, 0.42);
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
    }

/* =========================================================
   8. FOOTER
   ========================================================= */

.vx-platform-profile-footer[b-si9c2rjwqe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(239,246,255,0.86), rgba(255,255,255,0.96));
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.045);
}

    .vx-platform-profile-footer div[b-si9c2rjwqe] {
        display: grid;
        gap: 4px;
    }

    .vx-platform-profile-footer strong[b-si9c2rjwqe] {
        color: #0f172a;
        font-size: 14px;
        font-weight: 950;
    }

    .vx-platform-profile-footer span[b-si9c2rjwqe] {
        color: #64748b;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.5;
    }

.vx-platform-profile-button[b-si9c2rjwqe] {
    min-height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    color: #ffffff;
    background: #2563eb;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.18);
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

    .vx-platform-profile-button:hover[b-si9c2rjwqe] {
        transform: translateY(-1px);
        background: #1d4ed8;
        box-shadow: 0 18px 34px rgba(37, 99, 235, 0.22);
    }

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

@media (max-width: 900px) {
    .vx-platform-profile-hero[b-si9c2rjwqe],
    .vx-platform-brand-grid[b-si9c2rjwqe],
    .vx-platform-brand-card[b-si9c2rjwqe] {
        grid-template-columns: 1fr;
    }

    .vx-platform-profile-grid--two[b-si9c2rjwqe],
    .vx-platform-profile-grid--three[b-si9c2rjwqe] {
        grid-template-columns: 1fr;
    }

    .vx-platform-profile-card--wide[b-si9c2rjwqe] {
        grid-column: auto;
    }

    .vx-platform-profile-footer[b-si9c2rjwqe] {
        display: grid;
    }

    .vx-platform-profile-button[b-si9c2rjwqe] {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .vx-platform-profile-hero[b-si9c2rjwqe],
    .vx-platform-profile-section[b-si9c2rjwqe],
    .vx-platform-profile-footer[b-si9c2rjwqe] {
        border-radius: 22px;
        padding: 18px;
    }

    .vx-platform-profile-hero__title[b-si9c2rjwqe] {
        font-size: 24px;
    }
}
/* /Components/Pages/Settings/PlatformDepartments/Components/PlatformDepartmentAssignmentsEditor.razor.rz.scp.css */
/* =========================================================
   FILE: PlatformDepartmentAssignmentsEditor.razor.css

   PURPOSE:
   Provides compact scoped styling for managing Platform
   department staff assignments.

   RESPONSIBILITIES:
   - Present the assignment workflow as a right-side drawer
   - Separate assigned staff from available staff
   - Present each Platform user as one compact registry row
   - Keep the drawer header and search toolbar visible
   - Display assignment totals
   - Keep assignment actions compact and easy to scan
   - Restrict scrolling to the central registry region
   - Present loading, error, empty, and operation states
   - Adapt the assignment registry responsively

   IMPORTANT NOTES:
   - This stylesheet belongs exclusively to
     PlatformDepartmentAssignmentsEditor
   - Workspace layout belongs to
     PlatformDepartmentsWorkspace.razor.css
   - Parent orchestration remains unchanged
   - This stylesheet expects the redesigned registry markup
   - Scrolling is limited to the roster when required
   - No ::deep selectors are used
   - No Bootstrap dependencies are introduced
   ========================================================= */


/* =========================================================
   1. OVERLAY
   ========================================================= */

.vx-platform-department-assignments-editor[b-796neyyqz1] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}


/* =========================================================
   2. BACKDROP
   ========================================================= */

.vx-platform-department-assignments-editor__backdrop[b-796neyyqz1] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.46);
    cursor: pointer;
}

    .vx-platform-department-assignments-editor__backdrop:hover:not(:disabled)[b-796neyyqz1] {
        background: rgba(15, 23, 42, 0.5);
    }

    .vx-platform-department-assignments-editor__backdrop:focus-visible[b-796neyyqz1] {
        outline: 3px solid rgba(96, 165, 250, 0.82);
        outline-offset: -3px;
    }

    .vx-platform-department-assignments-editor__backdrop:disabled[b-796neyyqz1] {
        cursor: not-allowed;
    }


/* =========================================================
   3. DRAWER PANEL
   ========================================================= */

.vx-platform-department-assignments-editor__panel[b-796neyyqz1] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    width: min(980px, 96vw);
    height: 100vh;
    height: 100dvh;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-left: 1px solid rgba(148, 163, 184, 0.3);
    background: #ffffff;
    box-shadow: -16px 0 42px rgba(15, 23, 42, 0.18);
}


/* =========================================================
   4. HEADER
   ========================================================= */

.vx-platform-department-assignments-editor__header[b-796neyyqz1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    padding: 14px 18px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
    background: #ffffff;
}

.vx-platform-department-assignments-editor__heading[b-796neyyqz1] {
    min-width: 0;
}

.vx-platform-department-assignments-editor__eyebrow[b-796neyyqz1] {
    margin-bottom: 2px;
    color: #2563eb;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.vx-platform-department-assignments-editor__title-row[b-796neyyqz1] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    min-width: 0;
}

.vx-platform-department-assignments-editor__title[b-796neyyqz1] {
    margin: 0;
    color: #0f172a;
    font-size: 19px;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.vx-platform-department-assignments-editor__department[b-796neyyqz1] {
    display: inline-flex;
    align-items: center;
    max-width: 320px;
    min-height: 24px;
    padding: 3px 9px;
    overflow: hidden;
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 999px;
    color: #1d4ed8;
    background: #eff6ff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vx-platform-department-assignments-editor__close[b-796neyyqz1] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #475569;
    background: transparent;
    font-family: Arial, sans-serif;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

    .vx-platform-department-assignments-editor__close:hover:not(:disabled)[b-796neyyqz1] {
        border-color: rgba(148, 163, 184, 0.3);
        color: #0f172a;
        background: #f1f5f9;
    }

    .vx-platform-department-assignments-editor__close:focus-visible[b-796neyyqz1] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    .vx-platform-department-assignments-editor__close:disabled[b-796neyyqz1] {
        color: #94a3b8;
        cursor: not-allowed;
    }


/* =========================================================
   5. TOOLBAR
   ========================================================= */

.vx-platform-department-assignments-editor__toolbar[b-796neyyqz1] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 10px 18px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    background: #f8fafc;
}

.vx-platform-department-assignments-editor__search[b-796neyyqz1] {
    min-width: 0;
}

.vx-platform-department-assignments-editor .vx-input[b-796neyyqz1] {
    display: block;
    width: 100%;
    min-height: 38px;
    padding: 7px 11px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #0f172a;
    background: #ffffff;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
    font: inherit;
    font-size: 12px;
    line-height: 1.4;
    transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

    .vx-platform-department-assignments-editor .vx-input[b-796neyyqz1]::placeholder {
        color: #94a3b8;
    }

    .vx-platform-department-assignments-editor .vx-input:hover:not(:disabled)[b-796neyyqz1] {
        border-color: #94a3b8;
    }

    .vx-platform-department-assignments-editor .vx-input:focus[b-796neyyqz1] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    .vx-platform-department-assignments-editor .vx-input:disabled[b-796neyyqz1] {
        color: #64748b;
        background: #f1f5f9;
        cursor: not-allowed;
    }

.vx-platform-department-assignments-editor__summary[b-796neyyqz1] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

    .vx-platform-department-assignments-editor__summary strong[b-796neyyqz1] {
        color: #0f172a;
        font-weight: 900;
    }


/* =========================================================
   6. BODY
   ========================================================= */

.vx-platform-department-assignments-editor__body[b-796neyyqz1] {
    min-width: 0;
    min-height: 0;
    padding: 10px 14px;
    overflow: hidden;
    background: #f8fafc;
}

    .vx-platform-department-assignments-editor__body > .vx-alert[b-796neyyqz1] {
        margin-bottom: 10px;
    }


/* =========================================================
   7. LOADING AND EMPTY STATES
   ========================================================= */

.vx-platform-department-assignments-editor__state[b-796neyyqz1] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 100px;
    padding: 18px;
    border: 1px dashed rgba(148, 163, 184, 0.42);
    border-radius: 9px;
    color: #64748b;
    background: #ffffff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}


/* =========================================================
   8. REGISTRY
   ========================================================= */

.vx-platform-department-assignments-editor__registry[b-796neyyqz1] {
    display: grid;
    align-content: start;
    gap: 10px;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 3px;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

    .vx-platform-department-assignments-editor__registry[b-796neyyqz1]::-webkit-scrollbar {
        width: 10px;
    }

    .vx-platform-department-assignments-editor__registry[b-796neyyqz1]::-webkit-scrollbar-track {
        background: transparent;
    }

    .vx-platform-department-assignments-editor__registry[b-796neyyqz1]::-webkit-scrollbar-thumb {
        border: 3px solid transparent;
        border-radius: 999px;
        background: rgba(100, 116, 139, 0.42);
        background-clip: padding-box;
    }

        .vx-platform-department-assignments-editor__registry[b-796neyyqz1]::-webkit-scrollbar-thumb:hover {
            background: rgba(71, 85, 105, 0.58);
            background-clip: padding-box;
        }


/* =========================================================
   9. REGISTRY SECTIONS
   ========================================================= */

.vx-platform-department-assignments-editor__section[b-796neyyqz1] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 9px;
    background: #ffffff;
}

.vx-platform-department-assignments-editor__section-header[b-796neyyqz1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 8px 11px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    background: #f8fafc;
}

    .vx-platform-department-assignments-editor__section-header > div[b-796neyyqz1] {
        min-width: 0;
    }

.vx-platform-department-assignments-editor__section-title[b-796neyyqz1] {
    margin: 0;
    color: #0f172a;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.3;
}

.vx-platform-department-assignments-editor__section-description[b-796neyyqz1] {
    margin-top: 1px;
    overflow: hidden;
    color: #64748b;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vx-platform-department-assignments-editor__count[b-796neyyqz1] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 25px;
    height: 25px;
    padding: 0 7px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 999px;
    color: #475569;
    background: #ffffff;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

.vx-platform-department-assignments-editor__section-empty[b-796neyyqz1] {
    padding: 12px;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
}


/* =========================================================
   10. TABLE STRUCTURE
   ========================================================= */

.vx-platform-department-assignments-editor__table[b-796neyyqz1] {
    min-width: 0;
}

.vx-platform-department-assignments-editor__table-header[b-796neyyqz1],
.vx-platform-department-assignments-editor__row[b-796neyyqz1] {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 100px minmax(250px, auto);
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.vx-platform-department-assignments-editor__table-header[b-796neyyqz1] {
    min-height: 30px;
    padding: 5px 11px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    color: #64748b;
    background: #ffffff;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

    .vx-platform-department-assignments-editor__table-header > span:last-child[b-796neyyqz1] {
        text-align: right;
    }


/* =========================================================
   11. USER ROW
   ========================================================= */

.vx-platform-department-assignments-editor__row[b-796neyyqz1] {
    min-height: 50px;
    padding: 6px 11px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.13);
    background: #ffffff;
    transition: background-color 120ms ease, box-shadow 120ms ease;
}

    .vx-platform-department-assignments-editor__row:last-child[b-796neyyqz1] {
        border-bottom: 0;
    }

    .vx-platform-department-assignments-editor__row:hover[b-796neyyqz1] {
        background: #f8fafc;
    }

    .vx-platform-department-assignments-editor__row:focus-within[b-796neyyqz1] {
        position: relative;
        z-index: 1;
        background: #f8fafc;
        box-shadow: inset 3px 0 0 #2563eb, inset 0 0 0 1px rgba(37, 99, 235, 0.08);
    }


/* =========================================================
   12. USER IDENTITY
   ========================================================= */

.vx-platform-department-assignments-editor__identity[b-796neyyqz1] {
    min-width: 0;
}

.vx-platform-department-assignments-editor__user-name[b-796neyyqz1] {
    min-width: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vx-platform-department-assignments-editor__user-details[b-796neyyqz1] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-top: 2px;
    color: #64748b;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.25;
}

    .vx-platform-department-assignments-editor__user-details span[b-796neyyqz1] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .vx-platform-department-assignments-editor__user-details span:first-child[b-796neyyqz1] {
            max-width: 360px;
        }

        .vx-platform-department-assignments-editor__user-details span + span[b-796neyyqz1]::before {
            margin-right: 6px;
            content: "•";
            color: #94a3b8;
        }


/* =========================================================
   13. STATUS
   ========================================================= */

.vx-platform-department-assignments-editor__status[b-796neyyqz1] {
    display: flex;
    align-items: center;
    min-width: 0;
}

    .vx-platform-department-assignments-editor__status .vx-badge[b-796neyyqz1] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 22px;
        padding: 3px 8px;
        border: 1px solid transparent;
        border-radius: 999px;
        font-size: 9px;
        font-weight: 900;
        line-height: 1;
        white-space: nowrap;
    }

    .vx-platform-department-assignments-editor__status .vx-badge--primary[b-796neyyqz1] {
        border-color: rgba(37, 99, 235, 0.2);
        color: #1d4ed8;
        background: #eff6ff;
    }

    .vx-platform-department-assignments-editor__status .vx-badge--neutral[b-796neyyqz1] {
        border-color: rgba(148, 163, 184, 0.24);
        color: #475569;
        background: #f1f5f9;
    }


/* =========================================================
   14. ACTIONS
   ========================================================= */

.vx-platform-department-assignments-editor__actions[b-796neyyqz1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    min-width: 0;
}

    .vx-platform-department-assignments-editor__actions .vx-button[b-796neyyqz1] {
        display: inline-flex;
        width: auto;
        min-width: 78px;
        min-height: 30px;
        height: 30px;
        padding: 4px 9px;
        align-items: center;
        justify-content: center;
        border-radius: 7px;
        font-size: 10px;
        line-height: 1;
        white-space: nowrap;
    }

    .vx-platform-department-assignments-editor__actions .vx-button--primary[b-796neyyqz1] {
        min-width: 106px;
    }

.vx-platform-department-assignments-editor__operation[b-796neyyqz1] {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    color: #2563eb;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.vx-platform-department-assignments-editor__primary-note[b-796neyyqz1] {
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}


/* =========================================================
   15. FOOTER
   ========================================================= */

.vx-platform-department-assignments-editor__footer[b-796neyyqz1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    padding: 8px 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
    background: #ffffff;
}

    .vx-platform-department-assignments-editor__footer .vx-button[b-796neyyqz1] {
        display: inline-flex;
        width: auto;
        min-width: 92px;
        min-height: 34px;
        height: 34px;
        padding: 5px 14px;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }


/* =========================================================
   16. ACCESSIBILITY
   ========================================================= */

.vx-sr-only[b-796neyyqz1] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}


/* =========================================================
   17. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .vx-platform-department-assignments-editor__close[b-796neyyqz1],
    .vx-platform-department-assignments-editor .vx-input[b-796neyyqz1],
    .vx-platform-department-assignments-editor__row[b-796neyyqz1] {
        transition: none;
    }
}


/* =========================================================
   18. MEDIUM VIEWPORT
   ========================================================= */

@media (max-width: 900px) {
    .vx-platform-department-assignments-editor__panel[b-796neyyqz1] {
        width: min(820px, 98vw);
    }

    .vx-platform-department-assignments-editor__table-header[b-796neyyqz1],
    .vx-platform-department-assignments-editor__row[b-796neyyqz1] {
        grid-template-columns: minmax(210px, 1fr) 90px minmax(220px, auto);
        gap: 9px;
    }

    .vx-platform-department-assignments-editor__user-details span:first-child[b-796neyyqz1] {
        max-width: 280px;
    }

    .vx-platform-department-assignments-editor__actions .vx-button[b-796neyyqz1] {
        min-width: 72px;
        padding-right: 8px;
        padding-left: 8px;
    }

    .vx-platform-department-assignments-editor__actions .vx-button--primary[b-796neyyqz1] {
        min-width: 100px;
    }
}


/* =========================================================
   19. TABLET VIEWPORT
   ========================================================= */

@media (max-width: 720px) {
    .vx-platform-department-assignments-editor__panel[b-796neyyqz1] {
        width: 100%;
        border-left: 0;
    }

    .vx-platform-department-assignments-editor__header[b-796neyyqz1] {
        padding: 12px 14px 10px;
    }

    .vx-platform-department-assignments-editor__toolbar[b-796neyyqz1] {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 8px 12px;
    }

    .vx-platform-department-assignments-editor__summary[b-796neyyqz1] {
        justify-content: flex-end;
    }

    .vx-platform-department-assignments-editor__body[b-796neyyqz1] {
        padding: 8px;
    }

    .vx-platform-department-assignments-editor__table-header[b-796neyyqz1] {
        display: none;
    }

    .vx-platform-department-assignments-editor__row[b-796neyyqz1] {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "identity status"
            "actions actions";
        gap: 5px 8px;
        min-height: 58px;
        padding: 7px 9px;
    }

    .vx-platform-department-assignments-editor__identity[b-796neyyqz1] {
        grid-area: identity;
    }

    .vx-platform-department-assignments-editor__status[b-796neyyqz1] {
        grid-area: status;
        justify-content: flex-end;
    }

    .vx-platform-department-assignments-editor__actions[b-796neyyqz1] {
        grid-area: actions;
    }

    .vx-platform-department-assignments-editor__user-details span:first-child[b-796neyyqz1] {
        max-width: 420px;
    }
}


/* =========================================================
   20. MOBILE VIEWPORT
   ========================================================= */

@media (max-width: 480px) {
    .vx-platform-department-assignments-editor__header[b-796neyyqz1] {
        padding: 11px 12px 10px;
    }

    .vx-platform-department-assignments-editor__title-row[b-796neyyqz1] {
        display: grid;
        gap: 4px;
    }

    .vx-platform-department-assignments-editor__title[b-796neyyqz1] {
        font-size: 17px;
    }

    .vx-platform-department-assignments-editor__department[b-796neyyqz1] {
        max-width: 210px;
    }

    .vx-platform-department-assignments-editor__close[b-796neyyqz1] {
        width: 32px;
        height: 32px;
    }

    .vx-platform-department-assignments-editor__summary[b-796neyyqz1] {
        justify-content: flex-start;
    }

    .vx-platform-department-assignments-editor__section-header[b-796neyyqz1] {
        padding: 8px 9px;
    }

    .vx-platform-department-assignments-editor__section-description[b-796neyyqz1] {
        white-space: normal;
    }

    .vx-platform-department-assignments-editor__row[b-796neyyqz1] {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 8px 9px;
    }

    .vx-platform-department-assignments-editor__user-details[b-796neyyqz1] {
        display: grid;
        gap: 1px;
    }

        .vx-platform-department-assignments-editor__user-details span[b-796neyyqz1] {
            max-width: 100%;
        }

            .vx-platform-department-assignments-editor__user-details span + span[b-796neyyqz1]::before {
                display: none;
            }

    .vx-platform-department-assignments-editor__actions[b-796neyyqz1] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

        .vx-platform-department-assignments-editor__actions .vx-button[b-796neyyqz1] {
            width: 100%;
            min-width: 0;
        }

    .vx-platform-department-assignments-editor__operation[b-796neyyqz1],
    .vx-platform-department-assignments-editor__primary-note[b-796neyyqz1] {
        grid-column: 1 / -1;
        width: 100%;
        text-align: right;
    }

    .vx-platform-department-assignments-editor__footer[b-796neyyqz1] {
        padding: 7px 10px;
    }

        .vx-platform-department-assignments-editor__footer .vx-button[b-796neyyqz1] {
            width: 100%;
        }
}


/* =========================================================
   21. VERY SMALL VIEWPORT
   ========================================================= */

@media (max-width: 360px) {
    .vx-platform-department-assignments-editor__summary[b-796neyyqz1] {
        flex-wrap: wrap;
    }

    .vx-platform-department-assignments-editor__row[b-796neyyqz1] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "identity"
            "status"
            "actions";
    }

    .vx-platform-department-assignments-editor__status[b-796neyyqz1] {
        justify-content: flex-start;
    }

    .vx-platform-department-assignments-editor__actions[b-796neyyqz1] {
        grid-template-columns: 1fr;
    }

    .vx-platform-department-assignments-editor__operation[b-796neyyqz1],
    .vx-platform-department-assignments-editor__primary-note[b-796neyyqz1] {
        text-align: left;
    }
}
/* /Components/Pages/Settings/PlatformDepartments/Components/PlatformDepartmentEditor.razor.rz.scp.css */
/* =========================================================
   FILE: PlatformDepartmentEditor.razor.css

   PURPOSE:
   Provides scoped presentation styling for the selected
   Platform department inside the Platform Departments
   workspace.

   RESPONSIBILITIES:
   - Arrange the department editor content
   - Style the editor-owned heading
   - Improve editable control visibility
   - Provide a larger description editor
   - Present loading and empty states
   - Keep editor action buttons compact
   - Adapt the editor presentation responsively

   IMPORTANT NOTES:
   - This stylesheet belongs exclusively to
     PlatformDepartmentEditor
   - Workspace structure and column layout belong to
     PlatformDepartmentsWorkspace.razor.css
   - Assigned-staff presentation belongs to
     PlatformUserDepartmentsEditor.razor.css
   - Existing component markup is preserved
   - No ::deep selectors are used
   ========================================================= */


/* =========================================================
   1. EDITOR
   ========================================================= */

.vx-platform-department-editor[b-6m7keziep0] {
    display: grid;
    align-content: start;
    gap: 24px;
    width: 100%;
    min-width: 0;
}


/* =========================================================
   2. HEADER
   ========================================================= */

.vx-platform-department-editor__header[b-6m7keziep0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.vx-platform-department-editor__title[b-6m7keziep0] {
    min-width: 0;
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: -0.02em;
}


/* =========================================================
   3. BODY
   ========================================================= */

.vx-platform-department-editor__body[b-6m7keziep0] {
    display: grid;
    align-content: start;
    gap: 22px;
    min-width: 0;
}


/* =========================================================
   4. FORM CONTROLS
   ========================================================= */

.vx-platform-department-editor .vx-input[b-6m7keziep0],
.vx-platform-department-editor .vx-textarea[b-6m7keziep0] {
    display: block;
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    color: #0f172a;
    background-color: #ffffff;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
    font: inherit;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.vx-platform-department-editor .vx-input[b-6m7keziep0] {
    min-height: 46px;
    padding: 10px 14px;
}

.vx-platform-department-editor .vx-textarea[b-6m7keziep0] {
    min-height: 150px;
    padding: 12px 14px;
    line-height: 1.55;
    resize: vertical;
}

    .vx-platform-department-editor .vx-input:hover:not(:disabled)[b-6m7keziep0],
    .vx-platform-department-editor .vx-textarea:hover:not(:disabled)[b-6m7keziep0] {
        border-color: #94a3b8;
    }

    .vx-platform-department-editor .vx-input:focus[b-6m7keziep0],
    .vx-platform-department-editor .vx-textarea:focus[b-6m7keziep0] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
    }

    .vx-platform-department-editor .vx-input:disabled[b-6m7keziep0],
    .vx-platform-department-editor .vx-textarea:disabled[b-6m7keziep0] {
        color: #64748b;
        background-color: #f8fafc;
        cursor: not-allowed;
        opacity: 1;
    }


/* =========================================================
   5. LOADING AND EMPTY STATES
   ========================================================= */

.vx-platform-department-editor__state[b-6m7keziep0] {
    display: flex;
    align-items: center;
    min-height: 120px;
    margin: 0;
    padding: 24px;
    border: 1px dashed rgba(148, 163, 184, 0.4);
    border-radius: 12px;
    color: #64748b;
    background: rgba(248, 250, 252, 0.72);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
}


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

.vx-platform-department-editor__actions[b-6m7keziep0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
    padding-top: 4px;
}

    .vx-platform-department-editor__actions .vx-button[b-6m7keziep0] {
        width: auto;
        min-width: 112px;
        min-height: 42px;
        height: 42px;
        padding: 8px 20px;
        justify-content: center;
        line-height: 1;
    }


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

@media (max-width: 760px) {
    .vx-platform-department-editor[b-6m7keziep0] {
        gap: 20px;
    }

    .vx-platform-department-editor__header[b-6m7keziep0] {
        align-items: flex-start;
        padding-bottom: 16px;
    }

    .vx-platform-department-editor__body[b-6m7keziep0] {
        gap: 18px;
    }

    .vx-platform-department-editor .vx-textarea[b-6m7keziep0] {
        min-height: 140px;
    }

    .vx-platform-department-editor__state[b-6m7keziep0] {
        min-height: 100px;
        padding: 20px;
    }

    .vx-platform-department-editor__actions[b-6m7keziep0] {
        justify-content: stretch;
    }

        .vx-platform-department-editor__actions .vx-button[b-6m7keziep0] {
            flex: 1 1 150px;
            min-width: 0;
        }
}

@media (max-width: 520px) {
    .vx-platform-department-editor__header[b-6m7keziep0] {
        display: grid;
        gap: 12px;
    }

    .vx-platform-department-editor__title[b-6m7keziep0] {
        font-size: 17px;
    }

    .vx-platform-department-editor .vx-textarea[b-6m7keziep0] {
        min-height: 130px;
    }

    .vx-platform-department-editor__actions[b-6m7keziep0] {
        display: grid;
        grid-template-columns: 1fr;
    }

        .vx-platform-department-editor__actions .vx-button[b-6m7keziep0] {
            width: 100%;
        }
}
/* /Components/Pages/Settings/PlatformDepartments/Components/PlatformDepartmentList.razor.rz.scp.css */
/* =========================================================
   FILE: PlatformDepartmentList.razor.css

   PURPOSE:
   Provides scoped presentation styling for the Control Plane
   Platform-department registry.

   RESPONSIBILITIES:
   - Style the Platform Departments registry panel
   - Style the registry heading and create action
   - Style loading, empty, and error states
   - Style the Platform-department table
   - Style selectable and selected department rows
   - Style department links and descriptions
   - Preserve the Vixly Control Plane visual language
   - Provide responsive table behavior

   IMPORTANT NOTES:
   - This stylesheet belongs exclusively to
     PlatformDepartmentList
   - Workspace layout belongs to
     PlatformDepartmentsWorkspace.razor.css
   - Department profile styling belongs to
     PlatformDepartmentEditor.razor.css
   - Assigned-staff styling belongs to
     PlatformUserDepartmentsEditor.razor.css
   - Shared status styling remains global
   - No ::deep selectors are required
   ========================================================= */


/* =========================================================
   1. LIST PANEL
   ========================================================= */

.vx-platform-departments[b-856mqyrdr8] {
    display: grid;
    gap: 20px;
    width: 100%;
    padding: 24px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 26px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95) );
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.045);
}


/* =========================================================
   2. HEADER
   ========================================================= */

.vx-platform-departments__header[b-856mqyrdr8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

    .vx-platform-departments__header > div[b-856mqyrdr8] {
        display: grid;
        gap: 8px;
        min-width: 0;
    }

.vx-platform-departments__title[b-856mqyrdr8] {
    margin: 0;
    color: #0f172a;
    font-size: 30px;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.vx-platform-departments__subtitle[b-856mqyrdr8] {
    max-width: 780px;
    margin: 0;
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
}


/* =========================================================
   3. ACTIONS
   ========================================================= */

.vx-platform-departments__actions[b-856mqyrdr8] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vx-platform-departments__button[b-856mqyrdr8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    color: #0f172a;
    background: linear-gradient( 180deg, #ffffff, #f3f7ff );
    font: inherit;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

    .vx-platform-departments__button:hover:not(:disabled)[b-856mqyrdr8] {
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
    }

    .vx-platform-departments__button:active:not(:disabled)[b-856mqyrdr8] {
        transform: translateY(0);
    }

    .vx-platform-departments__button:focus-visible[b-856mqyrdr8] {
        outline: none;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.09);
    }

    .vx-platform-departments__button:disabled[b-856mqyrdr8] {
        color: #94a3b8;
        background: #f8fafc;
        cursor: not-allowed;
    }


/* =========================================================
   4. FEEDBACK STATES
   ========================================================= */

.vx-platform-departments__message[b-856mqyrdr8] {
    padding: 16px 18px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    color: #475569;
    background: rgba(248, 250, 252, 0.92);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.55;
}

.vx-platform-departments__message--error[b-856mqyrdr8] {
    border-color: rgba(220, 38, 38, 0.18);
    color: #991b1b;
    background: rgba(254, 242, 242, 0.92);
}


/* =========================================================
   5. TABLE WRAPPER
   ========================================================= */

.vx-platform-departments__table-wrapper[b-856mqyrdr8] {
    width: 100%;
    overflow-x: auto;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
}

    .vx-platform-departments__table-wrapper[b-856mqyrdr8]::-webkit-scrollbar {
        height: 8px;
    }

    .vx-platform-departments__table-wrapper[b-856mqyrdr8]::-webkit-scrollbar-track {
        background: transparent;
    }

    .vx-platform-departments__table-wrapper[b-856mqyrdr8]::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(148, 163, 184, 0.4);
    }


/* =========================================================
   6. TABLE
   ========================================================= */

.vx-platform-departments__table[b-856mqyrdr8] {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
}

    .vx-platform-departments__table thead[b-856mqyrdr8] {
        background: linear-gradient( 180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.92) );
    }

    .vx-platform-departments__table th[b-856mqyrdr8] {
        padding: 14px 16px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.14);
        color: #64748b;
        font-size: 11px;
        font-weight: 950;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.075em;
        white-space: nowrap;
    }

        .vx-platform-departments__table th:first-child[b-856mqyrdr8] {
            padding-left: 20px;
        }

        .vx-platform-departments__table th:last-child[b-856mqyrdr8] {
            padding-right: 20px;
        }


/* =========================================================
   7. TABLE ROWS
   ========================================================= */

.vx-platform-departments__row[b-856mqyrdr8] {
    cursor: pointer;
    outline: none;
    transition: background 160ms ease, box-shadow 160ms ease;
}

    .vx-platform-departments__row:hover[b-856mqyrdr8] {
        background: rgba(239, 246, 255, 0.72);
    }

    .vx-platform-departments__row:focus[b-856mqyrdr8],
    .vx-platform-departments__row:focus-visible[b-856mqyrdr8] {
        background: rgba(239, 246, 255, 0.9);
        box-shadow: inset 4px 0 0 #2563eb;
    }

.vx-platform-departments__row--selected[b-856mqyrdr8] {
    background: rgba(239, 246, 255, 0.9);
    box-shadow: inset 4px 0 0 #2563eb;
}

.vx-platform-departments__row td[b-856mqyrdr8] {
    padding: 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    color: #334155;
    font-size: 13px;
    font-weight: 800;
    vertical-align: middle;
}

.vx-platform-departments__row:last-child td[b-856mqyrdr8] {
    border-bottom: 0;
}

.vx-platform-departments__row td:first-child[b-856mqyrdr8] {
    padding-left: 20px;
}

.vx-platform-departments__row td:last-child[b-856mqyrdr8] {
    padding-right: 20px;
}

.vx-platform-departments__row time[b-856mqyrdr8] {
    color: #475569;
    font: inherit;
    white-space: nowrap;
}


/* =========================================================
   8. DEPARTMENT LINK
   ========================================================= */

.vx-platform-departments__department-link[b-856mqyrdr8] {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0;
    border: 0;
    color: #0f172a;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 950;
    text-align: left;
    cursor: pointer;
    transition: color 160ms ease, transform 160ms ease;
}

    .vx-platform-departments__department-link:hover:not(:disabled)[b-856mqyrdr8] {
        transform: translateX(1px);
        color: #2563eb;
    }

    .vx-platform-departments__department-link:focus-visible[b-856mqyrdr8] {
        outline: none;
        border-radius: 8px;
        color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.09);
    }

    .vx-platform-departments__department-link:disabled[b-856mqyrdr8] {
        cursor: not-allowed;
    }


/* =========================================================
   9. DESCRIPTION
   ========================================================= */

.vx-platform-departments__description[b-856mqyrdr8] {
    max-width: 440px;
    color: #475569;
    line-height: 1.55;
}


/* =========================================================
   10. RESPONSIVE
   ========================================================= */

@media (max-width: 760px) {
    .vx-platform-departments[b-856mqyrdr8] {
        padding: 18px;
        border-radius: 22px;
    }

    .vx-platform-departments__header[b-856mqyrdr8] {
        display: grid;
    }

    .vx-platform-departments__title[b-856mqyrdr8] {
        font-size: 24px;
    }

    .vx-platform-departments__actions[b-856mqyrdr8] {
        align-items: stretch;
    }

    .vx-platform-departments__button[b-856mqyrdr8] {
        width: 100%;
    }

    .vx-platform-departments__table-wrapper[b-856mqyrdr8] {
        padding: 14px;
        border-radius: 18px;
    }
}

@media (max-width: 520px) {
    .vx-platform-departments[b-856mqyrdr8] {
        gap: 16px;
        padding: 16px;
        border-radius: 20px;
    }

    .vx-platform-departments__title[b-856mqyrdr8] {
        font-size: 21px;
    }

    .vx-platform-departments__subtitle[b-856mqyrdr8] {
        font-size: 13px;
    }

    .vx-platform-departments__message[b-856mqyrdr8] {
        padding: 14px 15px;
        border-radius: 16px;
        font-size: 13px;
    }
}
/* /Components/Pages/Settings/PlatformDepartments/Components/PlatformUserDepartmentsEditor.razor.rz.scp.css */
/* =========================================================
   FILE: PlatformUserDepartmentsEditor.razor.css

   PURPOSE:
   Provides scoped presentation styling for the Platform
   users assigned to the selected Control Plane department.

   RESPONSIBILITIES:
   - Style the assigned-staff panel
   - Style the component header and title
   - Arrange search and staff-list content
   - Style loading, empty, and no-selection states
   - Style assigned-user rows and metadata
   - Arrange the assignment-management action
   - Provide responsive presentation

   IMPORTANT NOTES:
   - This stylesheet belongs exclusively to
     PlatformUserDepartmentsEditor
   - Workspace layout belongs to
     PlatformDepartmentsWorkspace.razor.css
   - Department profile styling belongs to
     PlatformDepartmentEditor.razor.css
   - Shared input, button, alert, badge, and accessibility
     styling remains global
   - This stylesheet must not style another component
   - No ::deep selectors are required
   ========================================================= */


/* =========================================================
   1. EDITOR PANEL
   ========================================================= */

.vx-platform-department-users-editor[b-j4g6041pyw] {
    display: grid;
    gap: 18px;
    width: 100%;
    padding: 22px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 26px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.99), rgba(239, 246, 255, 0.72) );
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.055);
}


/* =========================================================
   2. HEADER
   ========================================================= */

.vx-platform-department-users-editor__header[b-j4g6041pyw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.vx-platform-department-users-editor__title[b-j4g6041pyw] {
    margin: 0;
    color: #0f172a;
    font-size: 22px;
    font-weight: 950;
    letter-spacing: -0.035em;
}


/* =========================================================
   3. BODY
   ========================================================= */

.vx-platform-department-users-editor__body[b-j4g6041pyw] {
    display: grid;
    gap: 16px;
    min-width: 0;
}


/* =========================================================
   4. SEARCH
   ========================================================= */

.vx-platform-department-users-editor__search[b-j4g6041pyw] {
    min-width: 0;
}

    .vx-platform-department-users-editor__search .vx-input[b-j4g6041pyw] {
        width: 100%;
    }


/* =========================================================
   5. FEEDBACK STATES
   ========================================================= */

.vx-platform-department-users-editor__state[b-j4g6041pyw] {
    padding: 16px 18px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    color: #475569;
    background: rgba(248, 250, 252, 0.92);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.55;
}


/* =========================================================
   6. STAFF LIST
   ========================================================= */

.vx-platform-department-users-editor__list[b-j4g6041pyw] {
    display: grid;
    gap: 10px;
    min-width: 0;
}


/* =========================================================
   7. STAFF ROW
   ========================================================= */

.vx-platform-department-users-editor__user[b-j4g6041pyw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

    .vx-platform-department-users-editor__user:hover[b-j4g6041pyw] {
        transform: translateY(-1px);
        border-color: rgba(37, 99, 235, 0.14);
        box-shadow: 0 12px 26px rgba(15, 23, 42, 0.04);
    }


/* =========================================================
   8. STAFF IDENTITY
   ========================================================= */

.vx-platform-department-users-editor__user-main[b-j4g6041pyw] {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.vx-platform-department-users-editor__user-name[b-j4g6041pyw] {
    overflow: hidden;
    color: #0f172a;
    font-size: 14px;
    font-weight: 950;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vx-platform-department-users-editor__user-assigned[b-j4g6041pyw] {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
}

    .vx-platform-department-users-editor__user-assigned time[b-j4g6041pyw] {
        color: inherit;
        font: inherit;
    }


/* =========================================================
   9. STAFF STATUS
   ========================================================= */

.vx-platform-department-users-editor__user-status[b-j4g6041pyw] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
}


/* =========================================================
   10. ACTIONS
   ========================================================= */

.vx-platform-department-users-editor__actions[b-j4g6041pyw] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 2px;
}


/* =========================================================
   11. RESPONSIVE
   ========================================================= */

@media (max-width: 760px) {
    .vx-platform-department-users-editor[b-j4g6041pyw] {
        padding: 18px;
        border-radius: 22px;
    }

    .vx-platform-department-users-editor__user[b-j4g6041pyw] {
        align-items: flex-start;
    }

    .vx-platform-department-users-editor__actions[b-j4g6041pyw] {
        align-items: stretch;
    }

        .vx-platform-department-users-editor__actions .vx-button[b-j4g6041pyw] {
            width: 100%;
        }
}

@media (max-width: 520px) {
    .vx-platform-department-users-editor[b-j4g6041pyw] {
        gap: 16px;
        padding: 16px;
        border-radius: 20px;
    }

    .vx-platform-department-users-editor__title[b-j4g6041pyw] {
        font-size: 19px;
    }

    .vx-platform-department-users-editor__user[b-j4g6041pyw] {
        display: grid;
        gap: 10px;
        padding: 14px;
        border-radius: 16px;
    }

    .vx-platform-department-users-editor__user-name[b-j4g6041pyw] {
        white-space: normal;
    }

    .vx-platform-department-users-editor__user-status[b-j4g6041pyw] {
        justify-content: flex-start;
    }

    .vx-platform-department-users-editor__state[b-j4g6041pyw] {
        padding: 14px 15px;
        border-radius: 16px;
        font-size: 13px;
    }
}
/* /Components/Pages/Settings/PlatformDepartments/PlatformDepartmentsWorkspace.razor.rz.scp.css */
/* =========================================================
   FILE: PlatformDepartmentsWorkspace.razor.css

   PURPOSE:
   Provides scoped layout styling for the Control Plane
   Platform Departments workspace.

   RESPONSIBILITIES:
   - Style the workspace-owned department header
   - Arrange the department title and lifecycle metadata
   - Keep the department label and selector on one row
   - Center the create action within the right control region
   - Arrange the department and assigned-staff regions
   - Provide the divider between workspace regions
   - Collapse the workspace responsively

   IMPORTANT NOTES:
   - This stylesheet belongs exclusively to
     PlatformDepartmentsWorkspace
   - PlatformDepartmentEditor owns its internal styling
   - PlatformUserDepartmentsEditor owns its internal styling
   - Shared alert, status, and button styling remains global
   - Child components must not be styled through ::deep
   - No child-component selectors are used here
   ========================================================= */


/* =========================================================
   1. WORKSPACE
   ========================================================= */

.vx-platform-departments-workspace[b-gcwgrytp3o] {
    display: grid;
    gap: 24px;
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
}


/* =========================================================
   2. WORKSPACE HEADER
   ========================================================= */

.vx-platform-departments-workspace__header[b-gcwgrytp3o] {
    display: grid;
    gap: 22px;
    width: 100%;
    padding: 24px 28px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.04);
}


/* =========================================================
   3. HEADING
   ========================================================= */

.vx-platform-departments-workspace__heading-row[b-gcwgrytp3o] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    min-width: 0;
}

.vx-platform-departments-workspace__heading[b-gcwgrytp3o] {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.vx-platform-departments-workspace__eyebrow[b-gcwgrytp3o] {
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.075em;
}

.vx-platform-departments-workspace__title[b-gcwgrytp3o] {
    margin: 0;
    color: #0f172a;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.035em;
}


/* =========================================================
   4. DEPARTMENT METADATA
   ========================================================= */

.vx-platform-departments-workspace__metadata[b-gcwgrytp3o] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    min-height: 28px;
    padding-top: 8px;
    color: #475569;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.4;
    text-align: right;
}

    .vx-platform-departments-workspace__metadata time[b-gcwgrytp3o] {
        color: inherit;
        font: inherit;
    }


/* =========================================================
   5. CONTROL ROW
   ========================================================= */

.vx-platform-departments-workspace__toolbar[b-gcwgrytp3o] {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(280px, 0.9fr);
    gap: 28px;
    align-items: center;
    width: 100%;
    padding-top: 20px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}


/* =========================================================
   6. SELECTOR GROUP
   ========================================================= */

.vx-platform-departments-workspace__selector-group[b-gcwgrytp3o] {
    display: grid;
    grid-template-columns: 150px minmax(300px, 520px);
    gap: 20px;
    align-items: center;
    min-width: 0;
}

.vx-platform-departments-workspace__selector-label[b-gcwgrytp3o] {
    margin: 0;
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
}

/* =========================================================
   5. LIFECYCLE INDICATOR
   ========================================================= */

.vx-platform-departments-workspace__metadata .vx-status[b-gcwgrytp3o] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.vx-platform-departments-workspace__lifecycle-dot[b-gcwgrytp3o] {
    display: inline-block;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.vx-platform-departments-workspace__metadata
.vx-status--active
.vx-platform-departments-workspace__lifecycle-dot[b-gcwgrytp3o] {
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}

.vx-platform-departments-workspace__metadata
.vx-status--inactive
.vx-platform-departments-workspace__lifecycle-dot[b-gcwgrytp3o] {
    background: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}


/* =========================================================
   7. DEPARTMENT SELECTOR
   ========================================================= */

.vx-platform-departments-workspace__selector[b-gcwgrytp3o] {
    width: 100%;
    min-height: 46px;
    padding: 10px 42px 10px 14px;
    border: 1px solid rgba(100, 116, 139, 0.38);
    border-radius: 10px;
    color: #0f172a;
    background-color: #ffffff;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

    .vx-platform-departments-workspace__selector:hover:not(:disabled)[b-gcwgrytp3o] {
        border-color: #64748b;
    }

    .vx-platform-departments-workspace__selector:focus[b-gcwgrytp3o] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
    }

    .vx-platform-departments-workspace__selector:disabled[b-gcwgrytp3o] {
        color: #94a3b8;
        background: #f8fafc;
        cursor: not-allowed;
    }


/* =========================================================
   8. CREATE ACTION
   ========================================================= */

.vx-platform-departments-workspace__create-action[b-gcwgrytp3o] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

    .vx-platform-departments-workspace__create-action .vx-button[b-gcwgrytp3o] {
        width: auto;
        min-width: 200px;
        min-height: 46px;
        padding-right: 24px;
        padding-left: 24px;
        justify-content: center;
    }


/* =========================================================
   9. WORKSPACE CONTENT
   ========================================================= */

.vx-platform-departments-workspace__content[b-gcwgrytp3o] {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(320px, 0.9fr);
    gap: 0;
    align-items: start;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.035);
}


/* =========================================================
   10. WORKSPACE REGIONS
   ========================================================= */

.vx-platform-departments-workspace__department[b-gcwgrytp3o],
.vx-platform-departments-workspace__staff[b-gcwgrytp3o] {
    min-width: 0;
    padding: 26px;
}

.vx-platform-departments-workspace__staff[b-gcwgrytp3o] {
    border-left: 1px solid rgba(148, 163, 184, 0.13);
}


/* =========================================================
   11. RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {
    .vx-platform-departments-workspace__toolbar[b-gcwgrytp3o] {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 0.55fr);
    }

    .vx-platform-departments-workspace__content[b-gcwgrytp3o] {
        grid-template-columns: 1fr;
    }

    .vx-platform-departments-workspace__staff[b-gcwgrytp3o] {
        border-top: 1px solid rgba(148, 163, 184, 0.13);
        border-left: 0;
    }
}

@media (max-width: 900px) {
    .vx-platform-departments-workspace__heading-row[b-gcwgrytp3o] {
        display: grid;
        gap: 14px;
    }

    .vx-platform-departments-workspace__metadata[b-gcwgrytp3o] {
        justify-content: flex-start;
        padding-top: 0;
        text-align: left;
    }

    .vx-platform-departments-workspace__toolbar[b-gcwgrytp3o] {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .vx-platform-departments-workspace__create-action[b-gcwgrytp3o] {
        justify-content: flex-start;
        padding-left: 140px;
    }
}

@media (max-width: 760px) {
    .vx-platform-departments-workspace[b-gcwgrytp3o] {
        gap: 20px;
    }

    .vx-platform-departments-workspace__header[b-gcwgrytp3o] {
        gap: 20px;
        padding: 20px;
        border-radius: 20px;
    }

    .vx-platform-departments-workspace__title[b-gcwgrytp3o] {
        font-size: 24px;
    }

    .vx-platform-departments-workspace__selector-group[b-gcwgrytp3o] {
        grid-template-columns: 120px minmax(0, 1fr);
        gap: 16px;
    }

    .vx-platform-departments-workspace__create-action[b-gcwgrytp3o] {
        padding-left: 136px;
    }

    .vx-platform-departments-workspace__department[b-gcwgrytp3o],
    .vx-platform-departments-workspace__staff[b-gcwgrytp3o] {
        padding: 20px;
    }

    .vx-platform-departments-workspace__content[b-gcwgrytp3o] {
        border-radius: 20px;
    }
}

@media (max-width: 560px) {
    .vx-platform-departments-workspace__selector-group[b-gcwgrytp3o] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .vx-platform-departments-workspace__create-action[b-gcwgrytp3o] {
        justify-content: flex-start;
        padding-left: 0;
    }

        .vx-platform-departments-workspace__create-action .vx-button[b-gcwgrytp3o] {
            width: 100%;
            min-width: 0;
        }
}

@media (max-width: 520px) {
    .vx-platform-departments-workspace__header[b-gcwgrytp3o] {
        padding: 18px;
        border-radius: 18px;
    }

    .vx-platform-departments-workspace__title[b-gcwgrytp3o] {
        font-size: 21px;
    }

    .vx-platform-departments-workspace__metadata[b-gcwgrytp3o] {
        gap: 8px;
        font-size: 12px;
    }

    .vx-platform-departments-workspace__department[b-gcwgrytp3o],
    .vx-platform-departments-workspace__staff[b-gcwgrytp3o] {
        padding: 18px;
    }

    .vx-platform-departments-workspace__content[b-gcwgrytp3o] {
        border-radius: 18px;
    }
}
/* /Components/Pages/Settings/PlatformMaintenance/Components/PlatformAuthorityRepairPanel.razor.rz.scp.css */
/* =========================================================
   FILE: PlatformAuthorityRepairPanel.razor.css

   PURPOSE:
   Provides scoped Presentation styling for the Platform
   authority synchronization repair maintenance panel.

   RESPONSIBILITIES:
   - Style the authority repair maintenance card
   - Style the panel header and environment indicator
   - Style the environment-specific operation notice
   - Style the repair operation detail list
   - Style success and error feedback
   - Style the explicit repair confirmation surface
   - Style maintenance action buttons
   - Style operation progress indication
   - Provide responsive maintenance-panel presentation

   IMPORTANT NOTES:
   - This stylesheet belongs exclusively to
     PlatformAuthorityRepairPanel
   - Workspace layout belongs to
     PlatformMaintenanceWorkspace.razor.css
   - No Application orchestration is represented here
   - Shared page-shell styling remains global
   - No ::deep selectors are required because this
     stylesheet is scoped directly to the component
   - The visual language follows the established Vixly
     Control Plane Platform Role Management presentation
   ========================================================= */


/* =========================================================
   1. PANEL ROOT
   ========================================================= */

.vx-maintenance-panel[b-5zmuaer98z] {
    display: grid;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 26px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.99), rgba(239, 246, 255, 0.72) );
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.055);
}


/* =========================================================
   2. PANEL HEADER
   ========================================================= */

.vx-maintenance-panel__header[b-5zmuaer98z] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 22px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.vx-maintenance-panel__heading[b-5zmuaer98z] {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.vx-maintenance-panel__eyebrow[b-5zmuaer98z] {
    color: #2563eb;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.vx-maintenance-panel__title[b-5zmuaer98z] {
    margin: 0;
    overflow-wrap: anywhere;
    color: #0f172a;
    font-size: 22px;
    font-weight: 950;
    letter-spacing: -0.035em;
}

.vx-maintenance-panel__description[b-5zmuaer98z] {
    max-width: 720px;
    margin: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.65;
}


/* =========================================================
   3. ENVIRONMENT STATUS
   ========================================================= */

.vx-maintenance-panel__status[b-5zmuaer98z] {
    display: grid;
    flex: 0 0 auto;
    gap: 5px;
    min-width: 150px;
    padding: 12px 14px;
    border: 1px solid rgba(37, 99, 235, 0.13);
    border-radius: 16px;
    background: rgba(239, 246, 255, 0.82);
}

.vx-maintenance-panel__environment-label[b-5zmuaer98z] {
    color: #64748b;
    font-size: 9px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.075em;
}

.vx-maintenance-panel__environment-value[b-5zmuaer98z] {
    overflow-wrap: anywhere;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 950;
}


/* =========================================================
   4. PANEL BODY
   ========================================================= */

.vx-maintenance-panel__body[b-5zmuaer98z] {
    display: grid;
    gap: 18px;
    padding: 22px;
}


/* =========================================================
   5. ENVIRONMENT NOTICE
   ========================================================= */

.vx-maintenance-panel__notice[b-5zmuaer98z] {
    display: grid;
    gap: 5px;
    padding: 15px 17px;
    border: 1px solid rgba(245, 158, 11, 0.18);
    border-radius: 18px;
    color: #92400e;
    background: linear-gradient( 135deg, rgba(255, 251, 235, 0.96), rgba(255, 255, 255, 0.92) );
}

.vx-maintenance-panel__notice-title[b-5zmuaer98z] {
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.vx-maintenance-panel__notice-text[b-5zmuaer98z] {
    margin: 0;
    color: #a16207;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.55;
}

    .vx-maintenance-panel__notice-text strong[b-5zmuaer98z] {
        color: #92400e;
        font-weight: 950;
    }


/* =========================================================
   6. OPERATION DETAILS
   ========================================================= */

.vx-maintenance-panel__details[b-5zmuaer98z] {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 20px;
    background: rgba(248, 250, 252, 0.72);
}

.vx-maintenance-panel__details-title[b-5zmuaer98z] {
    margin: 0;
    color: #0f172a;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: -0.01em;
}

.vx-maintenance-panel__details-list[b-5zmuaer98z] {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .vx-maintenance-panel__details-list li[b-5zmuaer98z] {
        position: relative;
        padding-left: 22px;
        color: #475569;
        font-size: 13px;
        font-weight: 750;
        line-height: 1.55;
    }

        .vx-maintenance-panel__details-list li[b-5zmuaer98z]::before {
            content: "";
            position: absolute;
            top: 0.56em;
            left: 2px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: linear-gradient( 135deg, #2563eb, #7c3aed );
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
        }


/* =========================================================
   7. FEEDBACK
   ========================================================= */

.vx-maintenance-panel__message[b-5zmuaer98z] {
    padding: 16px 18px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    color: #475569;
    background: rgba(248, 250, 252, 0.92);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.55;
}

.vx-maintenance-panel__message--error[b-5zmuaer98z] {
    border-color: rgba(220, 38, 38, 0.18);
    color: #991b1b;
    background: rgba(254, 242, 242, 0.92);
}

.vx-maintenance-panel__message--success[b-5zmuaer98z] {
    border-color: rgba(22, 163, 74, 0.18);
    color: #166534;
    background: rgba(240, 253, 244, 0.94);
}


/* =========================================================
   8. CONFIRMATION SURFACE
   ========================================================= */

.vx-maintenance-panel__confirmation[b-5zmuaer98z] {
    display: grid;
    gap: 18px;
    padding: 18px;
    border: 1px solid rgba(220, 38, 38, 0.18);
    border-radius: 20px;
    background: linear-gradient( 145deg, rgba(254, 242, 242, 0.96), rgba(255, 255, 255, 0.94) );
    box-shadow: 0 14px 30px rgba(127, 29, 29, 0.07);
}

.vx-maintenance-panel__confirmation-content[b-5zmuaer98z] {
    display: grid;
    gap: 8px;
}

.vx-maintenance-panel__confirmation-title[b-5zmuaer98z] {
    margin: 0;
    color: #991b1b;
    font-size: 16px;
    font-weight: 950;
    letter-spacing: -0.02em;
}

.vx-maintenance-panel__confirmation-text[b-5zmuaer98z] {
    max-width: 760px;
    margin: 0;
    color: #7f1d1d;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.6;
}

    .vx-maintenance-panel__confirmation-text strong[b-5zmuaer98z] {
        font-weight: 950;
    }

.vx-maintenance-panel__confirmation-actions[b-5zmuaer98z] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}


/* =========================================================
   9. PANEL FOOTER
   ========================================================= */

.vx-maintenance-panel__footer[b-5zmuaer98z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 18px 22px 22px;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.vx-maintenance-panel__footer-note[b-5zmuaer98z] {
    flex: 1 1 360px;
    max-width: 620px;
    color: #64748b;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.55;
}


/* =========================================================
   10. BUTTONS
   ========================================================= */

.vx-button[b-5zmuaer98z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 8px;
    width: auto;
    min-width: 176px;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

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

    .vx-button:focus-visible[b-5zmuaer98z] {
        outline: none;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
    }

    .vx-button:disabled[b-5zmuaer98z] {
        opacity: 0.58;
        cursor: not-allowed;
        transform: none;
    }

.vx-button--primary[b-5zmuaer98z] {
    border-color: rgba(37, 99, 235, 0.12);
    color: #ffffff;
    background: linear-gradient( 180deg, #2563eb, #1d4ed8 );
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.16);
}

    .vx-button--primary:hover:not(:disabled)[b-5zmuaer98z] {
        background: linear-gradient( 180deg, #1d4ed8, #1e40af );
        box-shadow: 0 13px 28px rgba(37, 99, 235, 0.2);
    }

.vx-button--secondary[b-5zmuaer98z] {
    border-color: rgba(148, 163, 184, 0.18);
    color: #334155;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98) );
}

    .vx-button--secondary:hover:not(:disabled)[b-5zmuaer98z] {
        border-color: rgba(37, 99, 235, 0.18);
        color: #1d4ed8;
        background: rgba(239, 246, 255, 0.92);
    }

.vx-button--danger[b-5zmuaer98z] {
    border-color: rgba(220, 38, 38, 0.12);
    color: #ffffff;
    background: linear-gradient( 180deg, #dc2626, #b91c1c );
    box-shadow: 0 10px 24px rgba(220, 38, 38, 0.14);
}

    .vx-button--danger:hover:not(:disabled)[b-5zmuaer98z] {
        background: linear-gradient( 180deg, #b91c1c, #991b1b );
        box-shadow: 0 13px 28px rgba(220, 38, 38, 0.18);
    }


/* =========================================================
   11. BUTTON SPINNER
   ========================================================= */

.vx-button__spinner[b-5zmuaer98z] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.42);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: vx-platform-maintenance-spin-b-5zmuaer98z 700ms linear infinite;
}

@keyframes vx-platform-maintenance-spin-b-5zmuaer98z {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   12. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .vx-button[b-5zmuaer98z] {
        transition: none;
    }

    .vx-button__spinner[b-5zmuaer98z] {
        animation-duration: 1400ms;
    }
}


/* =========================================================
   13. RESPONSIVE
   ========================================================= */

@media (max-width: 760px) {
    .vx-maintenance-panel[b-5zmuaer98z] {
        border-radius: 22px;
    }

    .vx-maintenance-panel__header[b-5zmuaer98z] {
        display: grid;
        padding: 18px;
    }

    .vx-maintenance-panel__status[b-5zmuaer98z] {
        width: 100%;
        min-width: 0;
    }

    .vx-maintenance-panel__body[b-5zmuaer98z] {
        padding: 18px;
    }

    .vx-maintenance-panel__footer[b-5zmuaer98z] {
        padding: 16px 18px 18px;
    }
}

@media (max-width: 520px) {
    .vx-maintenance-panel[b-5zmuaer98z] {
        border-radius: 20px;
    }

    .vx-maintenance-panel__header[b-5zmuaer98z] {
        gap: 16px;
        padding: 16px;
    }

    .vx-maintenance-panel__title[b-5zmuaer98z] {
        font-size: 19px;
    }

    .vx-maintenance-panel__description[b-5zmuaer98z] {
        font-size: 12px;
    }

    .vx-maintenance-panel__body[b-5zmuaer98z] {
        gap: 16px;
        padding: 16px;
    }

    .vx-maintenance-panel__notice[b-5zmuaer98z],
    .vx-maintenance-panel__details[b-5zmuaer98z],
    .vx-maintenance-panel__confirmation[b-5zmuaer98z] {
        padding: 14px 15px;
        border-radius: 16px;
    }

    .vx-maintenance-panel__message[b-5zmuaer98z] {
        padding: 14px 15px;
        border-radius: 16px;
        font-size: 13px;
    }

    .vx-maintenance-panel__confirmation-actions[b-5zmuaer98z] {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vx-maintenance-panel__footer[b-5zmuaer98z] {
        display: grid;
        grid-template-columns: 1fr;
        padding: 15px 16px 16px;
    }

    .vx-button[b-5zmuaer98z] {
        width: 100%;
        min-width: 0;
    }
}
/* /Components/Pages/Settings/PlatformMaintenance/Components/PlatformInvariantValidationPanel.razor.rz.scp.css */
body[b-yicgl8t2o6] {
}
/* /Components/Pages/Settings/PlatformMaintenance/Components/PlatformPermissionSynchronizationPanel.razor.rz.scp.css */
body[b-35wokyqjhd] {
}
/* /Components/Pages/Settings/PlatformMaintenance/Components/PlatformRoleSynchronizationPanel.razor.rz.scp.css */
body[b-lsjcaai75j] {
}
/* /Components/Pages/Settings/PlatformMaintenance/PlatformMaintenanceWorkspace.razor.rz.scp.css */
/* =========================================================
   FILE: PlatformMaintenanceWorkspace.razor.css

   PURPOSE:
   Provides layout styling for the Control Plane Platform
   Maintenance workspace.

   RESPONSIBILITIES:
   - Constrain maintenance content to a readable width
   - Define workspace header spacing
   - Define maintenance section spacing
   - Arrange maintenance panels vertically
   - Preserve clear separation between page-level and
     operation-level information
   - Provide responsive workspace presentation

   IMPORTANT NOTES:
   - This stylesheet owns workspace layout only
   - PlatformAuthorityRepairPanel owns its visual styling
   - Future maintenance panels must own their own scoped CSS
   - Child components are not styled through ::deep
   - Environment presentation belongs to each operation
     panel rather than the workspace header
   - Shared page-shell styling remains global
   ========================================================= */


/* =========================================================
   1. WORKSPACE ROOT
   ========================================================= */

.vx-platform-maintenance-workspace[b-wq78s8g86k] {
    display: grid;
    gap: 30px;
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
}


/* =========================================================
   2. WORKSPACE HEADER
   ========================================================= */

.vx-platform-maintenance-workspace__header[b-wq78s8g86k] {
    display: block;
    width: 100%;
}

.vx-platform-maintenance-workspace__heading[b-wq78s8g86k] {
    display: grid;
    gap: 8px;
    max-width: 820px;
}

.vx-platform-maintenance-workspace__eyebrow[b-wq78s8g86k] {
    color: #2563eb;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.vx-platform-maintenance-workspace__title[b-wq78s8g86k] {
    margin: 0;
    color: #0f172a;
    font-size: 30px;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.vx-platform-maintenance-workspace__description[b-wq78s8g86k] {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.65;
}


/* =========================================================
   3. WORKSPACE CONTENT
   ========================================================= */

.vx-platform-maintenance-workspace__content[b-wq78s8g86k] {
    display: grid;
    gap: 30px;
    width: 100%;
}


/* =========================================================
   4. MAINTENANCE SECTIONS
   ========================================================= */

.vx-platform-maintenance-workspace__section[b-wq78s8g86k] {
    display: grid;
    gap: 16px;
    width: 100%;
    min-width: 0;
}

.vx-platform-maintenance-workspace__section-header[b-wq78s8g86k] {
    display: grid;
    gap: 6px;
    max-width: 760px;
}

.vx-platform-maintenance-workspace__section-title[b-wq78s8g86k] {
    margin: 0;
    color: #0f172a;
    font-size: 21px;
    font-weight: 950;
    letter-spacing: -0.025em;
}

.vx-platform-maintenance-workspace__section-description[b-wq78s8g86k] {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
}


/* =========================================================
   5. RESPONSIVE
   ========================================================= */

@media (max-width: 760px) {
    .vx-platform-maintenance-workspace[b-wq78s8g86k] {
        gap: 24px;
    }

    .vx-platform-maintenance-workspace__title[b-wq78s8g86k] {
        font-size: 26px;
    }

    .vx-platform-maintenance-workspace__content[b-wq78s8g86k] {
        gap: 24px;
    }
}

@media (max-width: 520px) {
    .vx-platform-maintenance-workspace[b-wq78s8g86k] {
        gap: 20px;
    }

    .vx-platform-maintenance-workspace__heading[b-wq78s8g86k] {
        gap: 7px;
    }

    .vx-platform-maintenance-workspace__title[b-wq78s8g86k] {
        font-size: 23px;
    }

    .vx-platform-maintenance-workspace__description[b-wq78s8g86k] {
        font-size: 13px;
    }

    .vx-platform-maintenance-workspace__section[b-wq78s8g86k] {
        gap: 14px;
    }

    .vx-platform-maintenance-workspace__section-title[b-wq78s8g86k] {
        font-size: 19px;
    }

    .vx-platform-maintenance-workspace__section-description[b-wq78s8g86k] {
        font-size: 12px;
    }
}
.vx-maintenance-schedule[b-wq78s8g86k] {
    display: grid;
    gap: .75rem;
    padding: 1.25rem;
    border: 1px solid #bfdbfe;
    border-radius: 1rem;
    background: #f8fbff;
}

.vx-maintenance-schedule__status[b-wq78s8g86k],
.vx-maintenance-schedule__actions[b-wq78s8g86k] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}

.vx-maintenance-schedule input[b-wq78s8g86k],
.vx-maintenance-schedule textarea[b-wq78s8g86k] {
    width: 100%;
    padding: .75rem;
    border: 1px solid #cbd5e1;
    border-radius: .6rem;
}

.vx-maintenance-schedule button[b-wq78s8g86k] {
    padding: .7rem 1rem;
    border: 1px solid #2563eb;
    border-radius: .6rem;
    background: #2563eb;
    color: white;
    font-weight: 700;
}
/* /Components/Pages/Settings/PlatformRoles/Components/PlatformRoleEditor.razor.rz.scp.css */
/* =========================================================
   FILE: PlatformRoleEditor.razor.css

   PURPOSE:
   Provides scoped presentation styling for the selected
   Platform role inside Platform Role Management.

   RESPONSIBILITIES:
   - Style the Platform role editor panel
   - Style create, view, and edit modes
   - Style the editor header and close action
   - Style success and error feedback
   - Style role identity and lifecycle information
   - Style the protected-system-role notice
   - Style Platform role form fields
   - Style role details and action controls
   - Style loading and empty states
   - Provide responsive editor presentation

   IMPORTANT NOTES:
   - This stylesheet belongs exclusively to
     PlatformRoleEditor
   - Workspace layout belongs to
     PlatformRolesWorkspace.razor.css
   - Permission-editor styling belongs to
     PlatformRolePermissionEditor.razor.css
   - Shared page-shell styling remains global
   - The department-scope field currently accepts a raw
     ScopedDepartmentId value because a department lookup
     selector has not yet been connected
   - When department lookup options become available, the
     field may be replaced with a selector without changing
     the surrounding editor layout
   - No ::deep selectors are required because this
     stylesheet is scoped directly to the component
   ========================================================= */


/* =========================================================
   1. EDITOR ROOT
   ========================================================= */

.vx-platform-role-editor[b-qxqsek2gbr] {
    display: grid;
    gap: 18px;
    width: 100%;
}


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

.vx-editor-card[b-qxqsek2gbr] {
    display: grid;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 26px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.99), rgba(239, 246, 255, 0.72) );
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.055);
}


/* =========================================================
   3. HEADER
   ========================================================= */

.vx-editor-card__header[b-qxqsek2gbr] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 22px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

    .vx-editor-card__header > div[b-qxqsek2gbr] {
        display: grid;
        gap: 6px;
        min-width: 0;
        width: 100%;
    }

.vx-editor-card__heading-row[b-qxqsek2gbr] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

    .vx-editor-card__heading-row > div[b-qxqsek2gbr] {
        display: grid;
        gap: 6px;
        min-width: 0;
    }

.vx-editor-card__eyebrow[b-qxqsek2gbr] {
    color: #2563eb;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.vx-editor-card__title[b-qxqsek2gbr] {
    margin: 0;
    overflow-wrap: anywhere;
    color: #0f172a;
    font-size: 22px;
    font-weight: 950;
    letter-spacing: -0.035em;
}

.vx-editor-card__subtitle[b-qxqsek2gbr] {
    max-width: 620px;
    margin: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.65;
}


/* =========================================================
   4. CLOSE ACTION
   ========================================================= */

.vx-icon-button[b-qxqsek2gbr] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 13px;
    color: #64748b;
    background: rgba(255, 255, 255, 0.94);
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

    .vx-icon-button:hover:not(:disabled)[b-qxqsek2gbr] {
        transform: translateY(-1px);
        border-color: rgba(220, 38, 38, 0.18);
        color: #b91c1c;
        background: rgba(254, 242, 242, 0.96);
    }

    .vx-icon-button:focus-visible[b-qxqsek2gbr] {
        outline: none;
        border-color: rgba(37, 99, 235, 0.42);
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.09);
    }

    .vx-icon-button:disabled[b-qxqsek2gbr] {
        opacity: 0.55;
        cursor: not-allowed;
    }


/* =========================================================
   5. FEEDBACK
   ========================================================= */

.vx-alert[b-qxqsek2gbr] {
    padding: 16px 18px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    color: #475569;
    background: rgba(248, 250, 252, 0.92);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.55;
}

.vx-alert--error[b-qxqsek2gbr] {
    border-color: rgba(220, 38, 38, 0.18);
    color: #991b1b;
    background: rgba(254, 242, 242, 0.92);
}

.vx-alert--success[b-qxqsek2gbr] {
    border-color: rgba(22, 163, 74, 0.18);
    color: #166534;
    background: rgba(240, 253, 244, 0.94);
}


/* =========================================================
   6. PROTECTED-ROLE NOTICE
   ========================================================= */

.vx-editor-notice[b-qxqsek2gbr] {
    display: grid;
    gap: 5px;
    margin: 18px 22px 0;
    padding: 15px 17px;
    border: 1px solid rgba(245, 158, 11, 0.18);
    border-radius: 18px;
    color: #92400e;
    background: linear-gradient( 135deg, rgba(255, 251, 235, 0.96), rgba(255, 255, 255, 0.92) );
}

    .vx-editor-notice strong[b-qxqsek2gbr] {
        font-size: 12px;
        font-weight: 950;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .vx-editor-notice span[b-qxqsek2gbr] {
        color: #a16207;
        font-size: 13px;
        font-weight: 750;
        line-height: 1.55;
    }


/* =========================================================
   7. EDITOR BODY
   ========================================================= */

.vx-editor-card__body[b-qxqsek2gbr] {
    display: grid;
    gap: 18px;
    padding: 22px;
}


/* =========================================================
   8. FORM
   ========================================================= */

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

.vx-field[b-qxqsek2gbr] {
    display: grid;
    gap: 8px;
    min-width: 0;
}

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

.vx-field__label[b-qxqsek2gbr] {
    color: #0f172a;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.015em;
}

.vx-field__hint[b-qxqsek2gbr] {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
}

.vx-input[b-qxqsek2gbr] {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    color: #0f172a;
    background: rgba(255, 255, 255, 0.96);
    font-family: inherit;
    font-size: 13px;
    font-weight: 750;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, opacity 160ms ease;
}

    .vx-input[b-qxqsek2gbr]::placeholder {
        color: #94a3b8;
        font-weight: 650;
    }

    .vx-input:hover:not(:disabled)[b-qxqsek2gbr] {
        border-color: rgba(37, 99, 235, 0.24);
    }

    .vx-input:focus[b-qxqsek2gbr] {
        border-color: rgba(37, 99, 235, 0.48);
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
    }

    .vx-input:disabled[b-qxqsek2gbr] {
        color: #64748b;
        background: rgba(241, 245, 249, 0.86);
        opacity: 0.7;
        cursor: not-allowed;
    }


/* =========================================================
   9. VALIDATION
   ========================================================= */

.validation-message[b-qxqsek2gbr] {
    margin-top: 1px;
    color: #b91c1c;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.45;
}

.invalid[b-qxqsek2gbr] {
    border-color: rgba(220, 38, 38, 0.42);
    background: rgba(254, 242, 242, 0.5);
}

    .invalid:focus[b-qxqsek2gbr] {
        border-color: rgba(220, 38, 38, 0.55);
        box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.08);
    }


/* =========================================================
   10. DETAIL LIST
   ========================================================= */

.vx-detail-list[b-qxqsek2gbr] {
    display: grid;
    gap: 0;
    margin: 0;
}

.vx-detail-list__item[b-qxqsek2gbr] {
    display: grid;
    grid-template-columns: minmax(140px, 0.8fr) minmax(0, 1.2fr);
    gap: 18px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

    .vx-detail-list__item:first-child[b-qxqsek2gbr] {
        padding-top: 0;
    }

    .vx-detail-list__item:last-child[b-qxqsek2gbr] {
        padding-bottom: 0;
        border-bottom: 0;
    }

.vx-detail-list__label[b-qxqsek2gbr] {
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.055em;
}

.vx-detail-list__value[b-qxqsek2gbr] {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    color: #1e293b;
    font-size: 13px;
    font-weight: 850;
    text-align: right;
}


/* =========================================================
   11. BADGES
   ========================================================= */

.vx-badge[b-qxqsek2gbr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 28px;
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.055em;
    white-space: nowrap;
}

.vx-badge--success[b-qxqsek2gbr] {
    border-color: rgba(22, 163, 74, 0.15);
    color: #15803d;
    background: rgba(22, 163, 74, 0.09);
}

.vx-badge--neutral[b-qxqsek2gbr] {
    border-color: rgba(100, 116, 139, 0.16);
    color: #475569;
    background: rgba(100, 116, 139, 0.09);
}


/* =========================================================
   12. FOOTER
   ========================================================= */

.vx-editor-card__footer[b-qxqsek2gbr] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 22px 22px;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}


/* =========================================================
   13. BUTTONS
   ========================================================= */

.vx-button[b-qxqsek2gbr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 132px;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

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

    .vx-button:focus-visible[b-qxqsek2gbr] {
        outline: none;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
    }

    .vx-button:disabled[b-qxqsek2gbr] {
        opacity: 0.58;
        cursor: not-allowed;
        transform: none;
    }

.vx-button--primary[b-qxqsek2gbr] {
    border-color: rgba(37, 99, 235, 0.12);
    color: #ffffff;
    background: linear-gradient( 180deg, #2563eb, #1d4ed8 );
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.16);
}

    .vx-button--primary:hover:not(:disabled)[b-qxqsek2gbr] {
        background: linear-gradient( 180deg, #1d4ed8, #1e40af );
        box-shadow: 0 13px 28px rgba(37, 99, 235, 0.2);
    }

.vx-button--secondary[b-qxqsek2gbr] {
    border-color: rgba(148, 163, 184, 0.18);
    color: #334155;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98) );
}

    .vx-button--secondary:hover:not(:disabled)[b-qxqsek2gbr] {
        border-color: rgba(37, 99, 235, 0.18);
        color: #1d4ed8;
        background: rgba(239, 246, 255, 0.92);
    }

.vx-button--danger[b-qxqsek2gbr] {
    border-color: rgba(220, 38, 38, 0.12);
    color: #ffffff;
    background: linear-gradient( 180deg, #dc2626, #b91c1c );
    box-shadow: 0 10px 24px rgba(220, 38, 38, 0.14);
}

    .vx-button--danger:hover:not(:disabled)[b-qxqsek2gbr] {
        background: linear-gradient( 180deg, #b91c1c, #991b1b );
        box-shadow: 0 13px 28px rgba(220, 38, 38, 0.18);
    }


/* =========================================================
   14. BUTTON SPINNER
   ========================================================= */

.vx-button__spinner[b-qxqsek2gbr] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.42);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: vx-platform-role-spin-b-qxqsek2gbr 700ms linear infinite;
}

@keyframes vx-platform-role-spin-b-qxqsek2gbr {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   15. EMPTY STATE
   ========================================================= */

.vx-editor-empty-state[b-qxqsek2gbr] {
    display: grid;
    place-items: center;
    gap: 10px;
    width: 100%;
    min-height: 330px;
    padding: 34px;
    border: 1px dashed rgba(148, 163, 184, 0.28);
    border-radius: 26px;
    text-align: center;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.82) );
}

.vx-editor-empty-state__icon[b-qxqsek2gbr] {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(37, 99, 235, 0.13);
    border-radius: 20px;
    color: #ffffff;
    background: linear-gradient( 135deg, #2563eb, #7c3aed );
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.16);
    font-size: 20px;
    font-weight: 950;
}

.vx-editor-empty-state__title[b-qxqsek2gbr] {
    margin: 6px 0 0;
    color: #0f172a;
    font-size: 19px;
    font-weight: 950;
    letter-spacing: -0.025em;
}

.vx-editor-empty-state__text[b-qxqsek2gbr] {
    max-width: 430px;
    margin: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.65;
}


/* =========================================================
   16. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .vx-icon-button[b-qxqsek2gbr],
    .vx-input[b-qxqsek2gbr],
    .vx-button[b-qxqsek2gbr] {
        transition: none;
    }

    .vx-button__spinner[b-qxqsek2gbr] {
        animation-duration: 1400ms;
    }
}


/* =========================================================
   17. RESPONSIVE
   ========================================================= */

@media (max-width: 760px) {
    .vx-editor-card[b-qxqsek2gbr],
    .vx-editor-empty-state[b-qxqsek2gbr] {
        border-radius: 22px;
    }

    .vx-editor-card__header[b-qxqsek2gbr] {
        padding: 18px;
    }

    .vx-editor-card__body[b-qxqsek2gbr] {
        padding: 18px;
    }

    .vx-editor-card__footer[b-qxqsek2gbr] {
        padding: 16px 18px 18px;
    }

    .vx-editor-notice[b-qxqsek2gbr] {
        margin: 16px 18px 0;
    }

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

    .vx-detail-list__item[b-qxqsek2gbr] {
        grid-template-columns: 1fr;
        gap: 5px;
        align-items: start;
    }

    .vx-detail-list__value[b-qxqsek2gbr] {
        text-align: left;
    }
}

@media (max-width: 520px) {
    .vx-platform-role-editor[b-qxqsek2gbr] {
        gap: 16px;
    }

    .vx-editor-card[b-qxqsek2gbr],
    .vx-editor-empty-state[b-qxqsek2gbr] {
        border-radius: 20px;
    }

    .vx-editor-card__header[b-qxqsek2gbr] {
        gap: 12px;
        padding: 16px;
    }

    .vx-editor-card__heading-row[b-qxqsek2gbr] {
        display: grid;
        gap: 10px;
    }

    .vx-editor-card__title[b-qxqsek2gbr] {
        font-size: 19px;
    }

    .vx-editor-card__subtitle[b-qxqsek2gbr] {
        font-size: 12px;
    }

    .vx-editor-card__body[b-qxqsek2gbr] {
        padding: 16px;
    }

    .vx-editor-card__footer[b-qxqsek2gbr] {
        display: grid;
        grid-template-columns: 1fr;
        padding: 15px 16px 16px;
    }

    .vx-editor-notice[b-qxqsek2gbr] {
        margin: 14px 16px 0;
        padding: 14px 15px;
        border-radius: 16px;
    }

    .vx-alert[b-qxqsek2gbr] {
        padding: 14px 15px;
        border-radius: 16px;
        font-size: 13px;
    }

    .vx-button[b-qxqsek2gbr] {
        width: 100%;
        min-width: 0;
    }

    .vx-editor-empty-state[b-qxqsek2gbr] {
        min-height: 280px;
        padding: 26px 18px;
    }

    .vx-editor-empty-state__icon[b-qxqsek2gbr] {
        width: 54px;
        height: 54px;
        border-radius: 17px;
        font-size: 18px;
    }

    .vx-editor-empty-state__title[b-qxqsek2gbr] {
        font-size: 17px;
    }

    .vx-editor-empty-state__text[b-qxqsek2gbr] {
        font-size: 12px;
    }
}
/* /Components/Pages/Settings/PlatformRoles/Components/PlatformRoleList.razor.rz.scp.css */
/* =========================================================
   FILE: PlatformRoleList.razor.css

   PURPOSE:
   Provides scoped presentation styling for the Control Plane
   Platform role registry.

   RESPONSIBILITIES:
   - Style the Role Management registry panel
   - Style loading, empty, and error states
   - Style the Platform role table
   - Style selectable rows and role links
   - Preserve the Vixly Control Plane visual language
   - Provide responsive table behavior

   IMPORTANT NOTES:
   - This stylesheet belongs exclusively to
     PlatformRoleList
   - Workspace layout belongs to
     PlatformRolesWorkspace.razor.css
   - Platform role editor styling belongs to
     PlatformRoleEditor.razor.css
   - Selectors intentionally match the existing
     vx-platform-roles Razor class contract
   ========================================================= */


/* =========================================================
   1. LIST PANEL
   ========================================================= */

.vx-platform-roles[b-ctwir86xbn] {
    display: grid;
    gap: 20px;
    width: 100%;
    padding: 24px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 26px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95) );
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.045);
}


/* =========================================================
   2. HEADER
   ========================================================= */

.vx-platform-roles__header[b-ctwir86xbn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

    .vx-platform-roles__header > div[b-ctwir86xbn] {
        display: grid;
        gap: 8px;
        min-width: 0;
    }

.vx-platform-roles__title[b-ctwir86xbn] {
    margin: 0;
    color: #0f172a;
    font-size: 30px;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.vx-platform-roles__table-wrapper[b-ctwir86xbn] {
    padding: 18px;
}

.vx-platform-roles__subtitle[b-ctwir86xbn] {
    max-width: 780px;
    margin: 0;
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
}

/* =========================================================
   3a. ACTIONS: New Role Button
   ========================================================= */

.vx-platform-roles__actions[b-ctwir86xbn] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vx-platform-roles__button[b-ctwir86xbn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(15,23,42,0.08);
    background: linear-gradient(180deg,#fff,#f3f7ff);
    color: #0f172a;
    font-weight: 800;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.vx-platform-roles__button:hover[b-ctwir86xbn] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(15,23,42,0.06);
}

.vx-platform-roles__button:active[b-ctwir86xbn] {
    transform: translateY(0);
}


/* =========================================================
   3. FEEDBACK STATES
   ========================================================= */

.vx-platform-roles__message[b-ctwir86xbn] {
    padding: 16px 18px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    color: #475569;
    background: rgba(248, 250, 252, 0.92);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.55;
}

.vx-platform-roles__message--error[b-ctwir86xbn] {
    border-color: rgba(220, 38, 38, 0.18);
    color: #991b1b;
    background: rgba(254, 242, 242, 0.92);
}


/* =========================================================
   4. TABLE WRAPPER
   ========================================================= */

.vx-platform-roles__table-wrapper[b-ctwir86xbn] {
    width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
}

    .vx-platform-roles__table-wrapper[b-ctwir86xbn]::-webkit-scrollbar {
        height: 8px;
    }

    .vx-platform-roles__table-wrapper[b-ctwir86xbn]::-webkit-scrollbar-track {
        background: transparent;
    }

    .vx-platform-roles__table-wrapper[b-ctwir86xbn]::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(148, 163, 184, 0.4);
    }


/* =========================================================
   5. TABLE
   ========================================================= */

.vx-platform-roles__table[b-ctwir86xbn] {
    width: 100%;
    min-width: 680px;
    border-collapse: separate;
    border-spacing: 0;
}

    .vx-platform-roles__table thead[b-ctwir86xbn] {
        background: linear-gradient( 180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.92) );
    }

    .vx-platform-roles__table th[b-ctwir86xbn] {
        padding: 14px 16px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.14);
        color: #64748b;
        font-size: 11px;
        font-weight: 950;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.075em;
        white-space: nowrap;
    }

        .vx-platform-roles__table th:first-child[b-ctwir86xbn] {
            padding-left: 20px;
        }

        .vx-platform-roles__table th:last-child[b-ctwir86xbn] {
            padding-right: 20px;
        }


/* =========================================================
   6. TABLE ROWS
   ========================================================= */

.vx-platform-roles__row[b-ctwir86xbn] {
    cursor: pointer;
    outline: none;
    transition: background 160ms ease, box-shadow 160ms ease;
}

    .vx-platform-roles__row:hover[b-ctwir86xbn] {
        background: rgba(239, 246, 255, 0.72);
    }

    .vx-platform-roles__row:focus[b-ctwir86xbn] {
        background: rgba(239, 246, 255, 0.9);
        box-shadow: inset 4px 0 0 #2563eb;
    }

    .vx-platform-roles__row td[b-ctwir86xbn] {
        padding: 16px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.08);
        color: #334155;
        font-size: 14px;
        font-weight: 800;
        white-space: nowrap;
    }

        .vx-platform-roles__row td:first-child[b-ctwir86xbn] {
            padding-left: 20px;
        }

        .vx-platform-roles__row td:last-child[b-ctwir86xbn] {
            padding-right: 20px;
        }

    .vx-platform-roles__row:last-child td[b-ctwir86xbn] {
        border-bottom: none;
    }


/* =========================================================
   7. ROLE LINK
   ========================================================= */

.vx-platform-roles__role-link[b-ctwir86xbn] {
    display: inline;
    padding: 0;
    border: none;
    background: none;
    color: #2563eb;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: color 140ms ease, text-decoration 140ms ease;
}

    .vx-platform-roles__role-link:hover[b-ctwir86xbn] {
        color: #1d4ed8;
        text-decoration: underline;
    }

    .vx-platform-roles__role-link:active[b-ctwir86xbn] {
        color: #1e40af;
    }


/* =========================================================
   8. STATUS BADGES
   ========================================================= */

.vx-status-badge[b-ctwir86xbn] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.vx-status-badge--active[b-ctwir86xbn] {
    border: 1px solid rgba(34, 197, 94, 0.2);
    background: rgba(240, 253, 244, 0.95);
    color: #166534;
}

.vx-status-badge--inactive[b-ctwir86xbn] {
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(248, 250, 252, 0.95);
    color: #64748b;
}
/* /Components/Pages/Settings/PlatformRoles/Components/PlatformRolePermissionEditor.razor.rz.scp.css */
/* =========================================================
   FILE: PlatformRolePermissionEditor.razor.css

   PURPOSE:
   Provides scoped styling for the Platform Role permission
   assignment editor.

   RESPONSIBILITIES:
   - Style the permission editor container
   - Style the editor header and close action
   - Style loading, empty, notice, success, and error states
   - Style permission summary metrics
   - Style the search and action toolbar
   - Style grouped permission categories
   - Style active, inactive, assigned, and disabled
     permission states
   - Style editor actions and footer
   - Provide responsive layouts for smaller screens

   IMPORTANT NOTES:
   - This stylesheet is scoped to
     PlatformRolePermissionEditor.razor
   - Class names follow the existing Vixly BEM-style CSS
     naming convention
   - The component remains compatible with the existing
     Vixly Control Plane visual language
   - Inactive permissions remain visible for administrative
     transparency
   - Existing assignments to inactive permissions are shown
     without presenting them as editable
   ========================================================= */


/* =========================================================
   EDITOR SHELL
   ========================================================= */

.vx-platform-role-permission-editor[b-x2ezh95pwy] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--vx-surface, #ffffff);
    border: 1px solid var(--vx-border-color, #dce2ea);
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}


/* =========================================================
   HEADER
   ========================================================= */

.vx-platform-role-permission-editor__header[b-x2ezh95pwy] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 26px 22px;
    border-bottom: 1px solid var(--vx-border-color, #dce2ea);
    background: linear-gradient( 135deg, rgba(30, 64, 175, 0.06), rgba(14, 116, 144, 0.03) );
}

.vx-platform-role-permission-editor__heading[b-x2ezh95pwy] {
    min-width: 0;
}

.vx-platform-role-permission-editor__eyebrow[b-x2ezh95pwy] {
    display: block;
    margin-bottom: 6px;
    color: var(--vx-primary, #1d4ed8);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    line-height: 1.2;
    text-transform: uppercase;
}

.vx-platform-role-permission-editor__title[b-x2ezh95pwy] {
    margin: 0;
    color: var(--vx-text-primary, #0f172a);
    font-size: 1.45rem;
    font-weight: 750;
    line-height: 1.25;
}

.vx-platform-role-permission-editor__subtitle[b-x2ezh95pwy] {
    max-width: 760px;
    margin: 8px 0 0;
    color: var(--vx-text-secondary, #64748b);
    font-size: 0.94rem;
    line-height: 1.55;
}

    .vx-platform-role-permission-editor__subtitle strong[b-x2ezh95pwy] {
        color: var(--vx-text-primary, #0f172a);
        font-weight: 700;
    }

.vx-platform-role-permission-editor__close[b-x2ezh95pwy] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--vx-text-secondary, #64748b);
    font-size: 1.65rem;
    line-height: 1;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--vx-border-color, #dce2ea);
    border-radius: 10px;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

    .vx-platform-role-permission-editor__close:hover:not(:disabled)[b-x2ezh95pwy] {
        color: var(--vx-danger, #b91c1c);
        background: #ffffff;
        border-color: rgba(185, 28, 28, 0.3);
        transform: translateY(-1px);
    }

    .vx-platform-role-permission-editor__close:focus-visible[b-x2ezh95pwy] {
        outline: 3px solid rgba(37, 99, 235, 0.2);
        outline-offset: 2px;
    }

    .vx-platform-role-permission-editor__close:disabled[b-x2ezh95pwy] {
        cursor: not-allowed;
        opacity: 0.55;
    }


/* =========================================================
   FEEDBACK MESSAGES
   ========================================================= */

.vx-platform-role-permission-editor__message[b-x2ezh95pwy] {
    margin: 20px 26px 0;
    padding: 14px 16px;
    font-size: 0.91rem;
    font-weight: 600;
    line-height: 1.5;
    border: 1px solid transparent;
    border-radius: 12px;
}

.vx-platform-role-permission-editor__message--error[b-x2ezh95pwy] {
    color: #991b1b;
    background: #fef2f2;
    border-color: #fecaca;
}

.vx-platform-role-permission-editor__message--success[b-x2ezh95pwy] {
    color: #166534;
    background: #f0fdf4;
    border-color: #bbf7d0;
}


/* =========================================================
   LOADING STATE
   ========================================================= */

.vx-platform-role-permission-editor__loading[b-x2ezh95pwy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 230px;
    padding: 36px;
    color: var(--vx-text-secondary, #64748b);
    font-size: 0.94rem;
    font-weight: 600;
}

.vx-platform-role-permission-editor__spinner[b-x2ezh95pwy],
.vx-platform-role-permission-editor__button-spinner[b-x2ezh95pwy] {
    display: inline-block;
    border-style: solid;
    border-radius: 50%;
    animation: vx-platform-role-permission-spin-b-x2ezh95pwy 700ms linear infinite;
}

.vx-platform-role-permission-editor__spinner[b-x2ezh95pwy] {
    width: 22px;
    height: 22px;
    border-width: 3px;
    border-color: rgba(37, 99, 235, 0.18) rgba(37, 99, 235, 0.18) rgba(37, 99, 235, 0.18) var(--vx-primary, #2563eb);
}

.vx-platform-role-permission-editor__button-spinner[b-x2ezh95pwy] {
    width: 15px;
    height: 15px;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.35) #ffffff;
}

@keyframes vx-platform-role-permission-spin-b-x2ezh95pwy {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   EMPTY STATES
   ========================================================= */

.vx-platform-role-permission-editor__empty[b-x2ezh95pwy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 270px;
    padding: 42px 28px;
    text-align: center;
}

.vx-platform-role-permission-editor__empty-icon[b-x2ezh95pwy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
    color: var(--vx-primary, #1d4ed8);
    font-size: 1.2rem;
    font-weight: 800;
    background: rgba(37, 99, 235, 0.09);
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 16px;
}

.vx-platform-role-permission-editor__empty-title[b-x2ezh95pwy] {
    margin: 0;
    color: var(--vx-text-primary, #0f172a);
    font-size: 1.08rem;
    font-weight: 750;
}

.vx-platform-role-permission-editor__empty-text[b-x2ezh95pwy] {
    max-width: 520px;
    margin: 8px 0 0;
    color: var(--vx-text-secondary, #64748b);
    font-size: 0.92rem;
    line-height: 1.55;
}


/* =========================================================
   READ-ONLY NOTICE
   ========================================================= */

.vx-platform-role-permission-editor__notice[b-x2ezh95pwy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 22px 26px 0;
    padding: 14px 16px;
    color: #854d0e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
}

    .vx-platform-role-permission-editor__notice strong[b-x2ezh95pwy] {
        font-size: 0.91rem;
    }

    .vx-platform-role-permission-editor__notice span[b-x2ezh95pwy] {
        font-size: 0.88rem;
        line-height: 1.5;
    }


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

.vx-platform-role-permission-editor__summary[b-x2ezh95pwy] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 22px 26px 0;
}

.vx-platform-role-permission-editor__summary-item[b-x2ezh95pwy] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    padding: 15px 16px;
    background: var(--vx-surface-muted, #f8fafc);
    border: 1px solid var(--vx-border-color, #dce2ea);
    border-radius: 12px;
}

.vx-platform-role-permission-editor__summary-label[b-x2ezh95pwy] {
    overflow: hidden;
    color: var(--vx-text-secondary, #64748b);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.vx-platform-role-permission-editor__summary-value[b-x2ezh95pwy] {
    color: var(--vx-text-primary, #0f172a);
    font-size: 1.13rem;
    font-weight: 780;
    line-height: 1.25;
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.vx-platform-role-permission-editor__toolbar[b-x2ezh95pwy] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 26px;
}

.vx-platform-role-permission-editor__search[b-x2ezh95pwy] {
    display: flex;
    flex: 1 1 420px;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.vx-platform-role-permission-editor__search-label[b-x2ezh95pwy] {
    color: var(--vx-text-primary, #0f172a);
    font-size: 0.79rem;
    font-weight: 700;
}

.vx-platform-role-permission-editor__search-input[b-x2ezh95pwy] {
    width: 100%;
    min-height: 42px;
    padding: 10px 13px;
    color: var(--vx-text-primary, #0f172a);
    font: inherit;
    font-size: 0.9rem;
    background: #ffffff;
    border: 1px solid var(--vx-border-color, #cbd5e1);
    border-radius: 10px;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

    .vx-platform-role-permission-editor__search-input[b-x2ezh95pwy]::placeholder {
        color: #94a3b8;
    }

    .vx-platform-role-permission-editor__search-input:hover:not(:disabled)[b-x2ezh95pwy] {
        border-color: #94a3b8;
    }

    .vx-platform-role-permission-editor__search-input:focus[b-x2ezh95pwy] {
        border-color: var(--vx-primary, #2563eb);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.13);
    }

    .vx-platform-role-permission-editor__search-input:disabled[b-x2ezh95pwy] {
        cursor: not-allowed;
        background: #f1f5f9;
        opacity: 0.7;
    }

.vx-platform-role-permission-editor__toolbar-actions[b-x2ezh95pwy],
.vx-platform-role-permission-editor__footer-actions[b-x2ezh95pwy] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}


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

.vx-platform-role-permission-editor__button[b-x2ezh95pwy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 15px;
    font: inherit;
    font-size: 0.87rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

    .vx-platform-role-permission-editor__button:hover:not(:disabled)[b-x2ezh95pwy] {
        transform: translateY(-1px);
    }

    .vx-platform-role-permission-editor__button:focus-visible[b-x2ezh95pwy] {
        outline: 3px solid rgba(37, 99, 235, 0.2);
        outline-offset: 2px;
    }

    .vx-platform-role-permission-editor__button:disabled[b-x2ezh95pwy] {
        cursor: not-allowed;
        opacity: 0.53;
        transform: none;
    }

.vx-platform-role-permission-editor__button--primary[b-x2ezh95pwy] {
    color: #ffffff;
    background: var(--vx-primary, #2563eb);
    border-color: var(--vx-primary, #2563eb);
    box-shadow: 0 7px 16px rgba(37, 99, 235, 0.18);
}

    .vx-platform-role-permission-editor__button--primary:hover:not(:disabled)[b-x2ezh95pwy] {
        background: var(--vx-primary-dark, #1d4ed8);
        border-color: var(--vx-primary-dark, #1d4ed8);
        box-shadow: 0 9px 20px rgba(37, 99, 235, 0.23);
    }

.vx-platform-role-permission-editor__button--secondary[b-x2ezh95pwy] {
    color: var(--vx-text-primary, #0f172a);
    background: #ffffff;
    border-color: var(--vx-border-color, #cbd5e1);
}

    .vx-platform-role-permission-editor__button--secondary:hover:not(:disabled)[b-x2ezh95pwy] {
        background: #f8fafc;
        border-color: #94a3b8;
    }


/* =========================================================
   CATEGORY COLLECTION
   ========================================================= */

.vx-platform-role-permission-editor__categories[b-x2ezh95pwy] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 26px 26px;
}

.vx-platform-role-permission-editor__category[b-x2ezh95pwy] {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--vx-border-color, #dce2ea);
    border-radius: 14px;
}

.vx-platform-role-permission-editor__category-header[b-x2ezh95pwy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 17px;
    background: var(--vx-surface-muted, #f8fafc);
    border-bottom: 1px solid var(--vx-border-color, #dce2ea);
}

.vx-platform-role-permission-editor__category-heading[b-x2ezh95pwy] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.vx-platform-role-permission-editor__category-title[b-x2ezh95pwy] {
    margin: 0;
    overflow: hidden;
    color: var(--vx-text-primary, #0f172a);
    font-size: 0.98rem;
    font-weight: 760;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vx-platform-role-permission-editor__category-count[b-x2ezh95pwy] {
    color: var(--vx-text-secondary, #64748b);
    font-size: 0.78rem;
    font-weight: 600;
}

.vx-platform-role-permission-editor__category-actions[b-x2ezh95pwy] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.vx-platform-role-permission-editor__category-action[b-x2ezh95pwy] {
    padding: 6px 9px;
    color: var(--vx-primary, #1d4ed8);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    background: #ffffff;
    border: 1px solid rgba(37, 99, 235, 0.22);
    border-radius: 8px;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

    .vx-platform-role-permission-editor__category-action:hover:not(:disabled)[b-x2ezh95pwy] {
        color: #ffffff;
        background: var(--vx-primary, #2563eb);
        border-color: var(--vx-primary, #2563eb);
    }

    .vx-platform-role-permission-editor__category-action:focus-visible[b-x2ezh95pwy] {
        outline: 3px solid rgba(37, 99, 235, 0.18);
        outline-offset: 2px;
    }

    .vx-platform-role-permission-editor__category-action:disabled[b-x2ezh95pwy] {
        cursor: not-allowed;
        opacity: 0.45;
    }


/* =========================================================
   PERMISSION LIST
   ========================================================= */

.vx-platform-role-permission-editor__permission-list[b-x2ezh95pwy] {
    display: flex;
    flex-direction: column;
}

.vx-platform-role-permission-editor__permission[b-x2ezh95pwy] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 13px;
    padding: 15px 17px;
    background: #ffffff;
    border-bottom: 1px solid #edf1f6;
    transition: background-color 150ms ease, box-shadow 150ms ease;
}

    .vx-platform-role-permission-editor__permission:last-child[b-x2ezh95pwy] {
        border-bottom: 0;
    }

    .vx-platform-role-permission-editor__permission:hover[b-x2ezh95pwy] {
        background: #fbfdff;
    }

.vx-platform-role-permission-editor__permission--assigned[b-x2ezh95pwy] {
    background: linear-gradient( 90deg, rgba(37, 99, 235, 0.055), rgba(37, 99, 235, 0.015) );
    box-shadow: inset 3px 0 0 var(--vx-primary, #2563eb);
}

    .vx-platform-role-permission-editor__permission--assigned:hover[b-x2ezh95pwy] {
        background: linear-gradient( 90deg, rgba(37, 99, 235, 0.08), rgba(37, 99, 235, 0.025) );
    }

.vx-platform-role-permission-editor__permission--inactive[b-x2ezh95pwy] {
    background: #f8fafc;
}

    .vx-platform-role-permission-editor__permission--inactive:hover[b-x2ezh95pwy] {
        background: #f8fafc;
    }

.vx-platform-role-permission-editor__permission-control[b-x2ezh95pwy] {
    display: flex;
    align-items: flex-start;
    padding-top: 3px;
}

.vx-platform-role-permission-editor__checkbox[b-x2ezh95pwy] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--vx-primary, #2563eb);
    cursor: pointer;
}

    .vx-platform-role-permission-editor__checkbox:focus-visible[b-x2ezh95pwy] {
        outline: 3px solid rgba(37, 99, 235, 0.2);
        outline-offset: 2px;
    }

    .vx-platform-role-permission-editor__checkbox:disabled[b-x2ezh95pwy] {
        cursor: not-allowed;
        opacity: 0.55;
    }

.vx-platform-role-permission-editor__permission-content[b-x2ezh95pwy] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    cursor: pointer;
}

.vx-platform-role-permission-editor__permission--inactive
.vx-platform-role-permission-editor__permission-content[b-x2ezh95pwy] {
    cursor: default;
}

.vx-platform-role-permission-editor__permission-heading[b-x2ezh95pwy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.vx-platform-role-permission-editor__permission-name[b-x2ezh95pwy] {
    min-width: 0;
    overflow: hidden;
    color: var(--vx-text-primary, #0f172a);
    font-size: 0.92rem;
    font-weight: 720;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vx-platform-role-permission-editor__permission-key[b-x2ezh95pwy] {
    overflow-wrap: anywhere;
    color: var(--vx-primary, #1d4ed8);
    font-family: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 0.74rem;
    font-weight: 650;
    line-height: 1.45;
}

.vx-platform-role-permission-editor__permission-description[b-x2ezh95pwy] {
    color: var(--vx-text-secondary, #64748b);
    font-size: 0.84rem;
    line-height: 1.5;
}

.vx-platform-role-permission-editor__permission-warning[b-x2ezh95pwy] {
    margin-top: 3px;
    padding: 8px 10px;
    color: #854d0e;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.45;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
}


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

.vx-platform-role-permission-editor__status[b-x2ezh95pwy] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    line-height: 1;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: 999px;
}

.vx-platform-role-permission-editor__status--active[b-x2ezh95pwy] {
    color: #166534;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.vx-platform-role-permission-editor__status--inactive[b-x2ezh95pwy] {
    color: #475569;
    background: #f1f5f9;
    border-color: #cbd5e1;
}


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

.vx-platform-role-permission-editor__search-empty[b-x2ezh95pwy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 34px 24px;
    color: var(--vx-text-secondary, #64748b);
    text-align: center;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
}

    .vx-platform-role-permission-editor__search-empty strong[b-x2ezh95pwy] {
        color: var(--vx-text-primary, #0f172a);
        font-size: 0.94rem;
    }

    .vx-platform-role-permission-editor__search-empty span[b-x2ezh95pwy] {
        max-width: 520px;
        font-size: 0.84rem;
        line-height: 1.5;
    }


/* =========================================================
   FOOTER
   ========================================================= */

.vx-platform-role-permission-editor__footer[b-x2ezh95pwy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 26px;
    background: var(--vx-surface-muted, #f8fafc);
    border-top: 1px solid var(--vx-border-color, #dce2ea);
}

.vx-platform-role-permission-editor__footer-status[b-x2ezh95pwy] {
    min-width: 0;
    color: var(--vx-text-secondary, #64748b);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.45;
}


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

@media (max-width: 980px) {
    .vx-platform-role-permission-editor__summary[b-x2ezh95pwy] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vx-platform-role-permission-editor__toolbar[b-x2ezh95pwy] {
        align-items: stretch;
        flex-direction: column;
    }

    .vx-platform-role-permission-editor__toolbar-actions[b-x2ezh95pwy] {
        justify-content: flex-end;
    }
}

@media (max-width: 680px) {
    .vx-platform-role-permission-editor[b-x2ezh95pwy] {
        border-radius: 14px;
    }

    .vx-platform-role-permission-editor__header[b-x2ezh95pwy] {
        padding: 20px 18px;
    }

    .vx-platform-role-permission-editor__message[b-x2ezh95pwy],
    .vx-platform-role-permission-editor__notice[b-x2ezh95pwy] {
        margin-right: 18px;
        margin-left: 18px;
    }

    .vx-platform-role-permission-editor__summary[b-x2ezh95pwy] {
        grid-template-columns: minmax(0, 1fr);
        padding-right: 18px;
        padding-left: 18px;
    }

    .vx-platform-role-permission-editor__toolbar[b-x2ezh95pwy] {
        padding-right: 18px;
        padding-left: 18px;
    }

    .vx-platform-role-permission-editor__toolbar-actions[b-x2ezh95pwy] {
        align-items: stretch;
        flex-direction: column-reverse;
    }

        .vx-platform-role-permission-editor__toolbar-actions
        .vx-platform-role-permission-editor__button[b-x2ezh95pwy] {
            width: 100%;
        }

    .vx-platform-role-permission-editor__categories[b-x2ezh95pwy] {
        padding-right: 18px;
        padding-left: 18px;
    }

    .vx-platform-role-permission-editor__category-header[b-x2ezh95pwy] {
        align-items: flex-start;
        flex-direction: column;
    }

    .vx-platform-role-permission-editor__category-actions[b-x2ezh95pwy] {
        width: 100%;
    }

    .vx-platform-role-permission-editor__category-action[b-x2ezh95pwy] {
        flex: 1 1 0;
    }

    .vx-platform-role-permission-editor__permission[b-x2ezh95pwy] {
        gap: 11px;
        padding: 14px;
    }

    .vx-platform-role-permission-editor__permission-heading[b-x2ezh95pwy] {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .vx-platform-role-permission-editor__permission-name[b-x2ezh95pwy] {
        white-space: normal;
    }

    .vx-platform-role-permission-editor__footer[b-x2ezh95pwy] {
        align-items: stretch;
        flex-direction: column;
        padding-right: 18px;
        padding-left: 18px;
    }

    .vx-platform-role-permission-editor__footer-actions[b-x2ezh95pwy] {
        align-items: stretch;
        flex-direction: column-reverse;
    }

        .vx-platform-role-permission-editor__footer-actions
        .vx-platform-role-permission-editor__button[b-x2ezh95pwy] {
            width: 100%;
        }
}
/* /Components/Pages/Settings/PlatformRoles/PlatformRolesWorkspace.razor.rz.scp.css */
/* =========================================================
   FILE: PlatformRolesWorkspace.razor.css

   PURPOSE:
   Provides layout styling for the Control Plane Role
   Management workspace.

   RESPONSIBILITIES:
   - Arrange the Platform role registry and editor pane
   - Define workspace spacing and column proportions
   - Provide sufficient width for role details and permissions
     panels
   - Keep the editor pane visible on wider screens
   - Collapse the workspace into one column responsively
   - Style the right-pane navigation tabs

   IMPORTANT NOTES:
   - This stylesheet owns workspace layout only
   - PlatformRoleList owns its own visual styling
   - PlatformRoleEditor owns its own visual styling
   - PlatformRolePermissionEditor owns its own visual styling
   - Child components are not styled through ::deep here
   - Shared page-shell styling remains global
   ========================================================= */


/* =========================================================
   1. WORKSPACE
   ========================================================= */

.vx-platform-roles-workspace[b-z6fao0yc6u] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(480px, 540px);
    gap: 24px;
    align-items: start;
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
}


/* =========================================================
   2. WORKSPACE REGIONS
   ========================================================= */

.vx-platform-roles-workspace__list[b-z6fao0yc6u],
.vx-platform-roles-workspace__editor[b-z6fao0yc6u] {
    min-width: 0;
}

.vx-platform-roles-workspace__editor[b-z6fao0yc6u] {
    position: sticky;
    top: 24px;
    width: 100%;
    min-width: 0;
}


/* =========================================================
   3. RIGHT PANE
   ========================================================= */

.vx-right-pane[b-z6fao0yc6u] {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 12px;
}

.vx-right-pane__tabs[b-z6fao0yc6u] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.vx-right-pane__tab[b-z6fao0yc6u] {
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #475569;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: box-shadow 160ms ease, transform 120ms ease;
}

    .vx-right-pane__tab:focus-visible[b-z6fao0yc6u] {
        outline: none;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, .14);
    }

.vx-right-pane__tab--active[b-z6fao0yc6u] {
    border-color: rgba(37, 99, 235, .18);
    background: linear-gradient( 135deg, #2563eb, #1d4ed8 );
    color: #fff;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .12);
}

.vx-right-pane__content[b-z6fao0yc6u] {
    display: block;
    width: 100%;
    min-width: 0;
    padding-top: 6px;
}


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

@media (max-width: 1320px) {
    .vx-platform-roles-workspace[b-z6fao0yc6u] {
        grid-template-columns: 1fr;
    }

    .vx-platform-roles-workspace__editor[b-z6fao0yc6u] {
        position: static;
    }
}

@media (max-width: 760px) {
    .vx-platform-roles-workspace[b-z6fao0yc6u] {
        gap: 18px;
    }

    .vx-right-pane__tabs[b-z6fao0yc6u] {
        align-items: stretch;
    }

    .vx-right-pane__tab[b-z6fao0yc6u] {
        flex: 1 1 auto;
        text-align: center;
    }
}
/* /Components/Pages/Settings/PlatformSettings/Components/BillingSettings/PlatformBillingSettingsEditor.razor.rz.scp.css */
/* =========================================================
   FILE: PlatformBillingSettingsEditor.razor.css

   PURPOSE:
   Provides scoped presentation styling for the Platform
   Billing Settings editor.

   RESPONSIBILITIES:
   - Style the billing editor panel
   - Style the editor header
   - Style billing information cards
   - Style billing configuration fields
   - Style tax configuration
   - Style currency configuration
   - Style action buttons
   - Provide responsive presentation

   IMPORTANT NOTES:
   - This stylesheet belongs exclusively to
     PlatformBillingSettingsEditor
   - Workspace layout belongs to
     PlatformSettingsWorkspace.razor.css
   - Shared page-shell styling remains global
   - No ::deep selectors are required
   ========================================================= */

/* =========================================================
   1. EDITOR PANEL
   ========================================================= */

.platform-settings-editor[b-bl7i7668o5] {
    display: grid;
    gap: 18px;
    width: 100%;
    padding: 22px;
    border: 1px solid rgba(148,163,184,.12);
    border-radius: 26px;
    background: linear-gradient( 145deg, rgba(255,255,255,.99), rgba(239,246,255,.72));
    box-shadow: 0 18px 40px rgba(15,23,42,.055);
}

/* =========================================================
   2. HEADER
   ========================================================= */

.platform-settings-editor__header[b-bl7i7668o5] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
}

    .platform-settings-editor__header > div[b-bl7i7668o5] {
        display: grid;
        gap: 6px;
        min-width: 0;
    }

.platform-settings-editor__title[b-bl7i7668o5] {
    margin: 0;
    color: #0f172a;
    font-size: 22px;
    font-weight: 950;
    letter-spacing: -.035em;
}

.platform-settings-editor__description[b-bl7i7668o5] {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.65;
}

/* =========================================================
   3. BODY
   ========================================================= */

.platform-settings-editor__body[b-bl7i7668o5] {
    display: grid;
    gap: 18px;
}

/* =========================================================
   4. FORM GRID
   ========================================================= */

.platform-settings-form-grid[b-bl7i7668o5] {
    display: grid;
    gap: 18px;
}

.platform-settings-field[b-bl7i7668o5] {
    display: grid;
    gap: 8px;
}

    .platform-settings-field label[b-bl7i7668o5] {
        color: #0f172a;
        font-size: 13px;
        font-weight: 800;
    }

.platform-settings-input[b-bl7i7668o5] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 10px;
    background: #fff;
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
}

    .platform-settings-input:focus[b-bl7i7668o5] {
        outline: none;
        border-color: rgba(37,99,235,.45);
        box-shadow: 0 0 0 4px rgba(37,99,235,.10);
    }

.platform-settings-input--short[b-bl7i7668o5] {
    max-width: 90px;
}

.platform-settings-field__help[b-bl7i7668o5] {
    color: #64748b;
    font-size: 12px;
}

/* =========================================================
   5. NUMBER CONTROL
   ========================================================= */

.platform-settings-number-control[b-bl7i7668o5] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.platform-settings-number-control__suffix[b-bl7i7668o5] {
    color: #64748b;
    font-weight: 900;
}

/* =========================================================
   6. TOGGLE
   ========================================================= */

.platform-settings-toggle-row[b-bl7i7668o5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(148,163,184,.12);
    border-radius: 16px;
    background: rgba(248,250,252,.75);
}

.platform-settings-toggle-row__content[b-bl7i7668o5] {
    display: grid;
    gap: 4px;
}

.platform-settings-toggle-row__label[b-bl7i7668o5] {
    font-weight: 800;
    color: #0f172a;
}

.platform-settings-toggle-row__description[b-bl7i7668o5] {
    margin: 0;
    color: #64748b;
    font-size: 13px;
}

.platform-settings-toggle[b-bl7i7668o5] {
    width: 18px;
    height: 18px;
}

/* =========================================================
   7. FOOTER
   ========================================================= */

.platform-settings-editor__footer[b-bl7i7668o5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.platform-settings-editor__read-only[b-bl7i7668o5] {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.platform-settings-primary-button[b-bl7i7668o5] {
    min-width: 170px;
    height: 46px;
    padding: 0 24px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(180deg,#2563eb,#1d4ed8);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(37,99,235,.18);
}

    .platform-settings-primary-button:hover:not(:disabled)[b-bl7i7668o5] {
        transform: translateY(-2px);
        box-shadow: 0 16px 30px rgba(37,99,235,.24);
    }

    .platform-settings-primary-button:disabled[b-bl7i7668o5] {
        opacity: .55;
        cursor: not-allowed;
    }

/* =========================================================
   8. RESPONSIVE
   ========================================================= */

@media (max-width:760px) {

    .platform-settings-editor[b-bl7i7668o5] {
        padding: 18px;
    }

    .platform-settings-toggle-row[b-bl7i7668o5] {
        flex-direction: column;
        align-items: stretch;
    }

    .platform-settings-editor__footer[b-bl7i7668o5] {
        flex-direction: column;
        align-items: stretch;
    }

    .platform-settings-primary-button[b-bl7i7668o5] {
        width: 100%;
    }
}
/* /Components/Pages/Settings/PlatformSettings/Components/CollectionSettings/PlatformCollectionsSettingsEditor.razor.rz.scp.css */
/* =========================================================
   FILE: PlatformCollectionsSettingsEditor.razor.css

   PURPOSE:
   Provides scoped presentation styling for the Platform
   Collections Settings editor.

   RESPONSIBILITIES:
   - Style the collections editor panel
   - Style the collections configuration form
   - Style reminder schedule inputs
   - Style toggle sections
   - Style footer actions
   - Provide responsive presentation

   IMPORTANT NOTES:
   - This stylesheet targets the actual class names rendered
     by PlatformCollectionsSettingsEditor.razor
   - PlatformSettingsWorkspace owns workspace layout
   ========================================================= */


/* =========================================================
   1. EDITOR
   ========================================================= */

.platform-settings-editor[b-hicd96u5i9] {
    display: grid;
    gap: 22px;
    width: 100%;
    padding: 24px;
    border: 1px solid rgba(148,163,184,.12);
    border-radius: 24px;
    background: linear-gradient( 145deg, rgba(255,255,255,.99), rgba(248,250,252,.95));
    box-shadow: 0 18px 40px rgba(15,23,42,.05);
}


/* =========================================================
   2. HEADER
   ========================================================= */

.platform-settings-editor__header[b-hicd96u5i9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

    .platform-settings-editor__header > div[b-hicd96u5i9] {
        display: grid;
        gap: 6px;
    }

.platform-settings-editor__eyebrow[b-hicd96u5i9] {
    margin: 0;
    color: #2563eb;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.platform-settings-editor__title[b-hicd96u5i9] {
    margin: 0;
    color: #0f172a;
    font-size: 24px;
    font-weight: 950;
    letter-spacing: -.03em;
}

.platform-settings-editor__description[b-hicd96u5i9] {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   3. BODY
   ========================================================= */

.platform-settings-editor__body[b-hicd96u5i9] {
    display: grid;
    gap: 20px;
}


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

.platform-settings-form-grid[b-hicd96u5i9] {
    display: grid;
    gap: 18px;
}

.platform-settings-field[b-hicd96u5i9] {
    display: grid;
    gap: 8px;
}

    .platform-settings-field label[b-hicd96u5i9] {
        color: #0f172a;
        font-size: 13px;
        font-weight: 800;
    }


/* =========================================================
   5. INPUTS
   ========================================================= */

.platform-settings-input[b-hicd96u5i9] {
    width: 100%;
    min-width: 0;
    padding: 11px 14px;
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 10px;
    background: #fff;
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
}

    .platform-settings-input:focus[b-hicd96u5i9] {
        outline: none;
        border-color: rgba(37,99,235,.45);
        box-shadow: 0 0 0 4px rgba(37,99,235,.10);
    }

.platform-settings-number-control[b-hicd96u5i9] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.platform-settings-number-control__suffix[b-hicd96u5i9] {
    color: #64748b;
    font-size: 13px;
    font-weight: 900;
}


/* =========================================================
   6. TOGGLES
   ========================================================= */

.platform-settings-toggle-row[b-hicd96u5i9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 16px;
    border: 1px solid rgba(148,163,184,.12);
    border-radius: 16px;
    background: rgba(248,250,252,.70);
}

.platform-settings-toggle-row__content[b-hicd96u5i9] {
    display: grid;
    gap: 4px;
}

.platform-settings-toggle-row__label[b-hicd96u5i9] {
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
}

.platform-settings-toggle-row__description[b-hicd96u5i9] {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}

.platform-settings-toggle[b-hicd96u5i9] {
    width: 18px;
    height: 18px;
}


/* =========================================================
   7. FOOTER
   ========================================================= */

.platform-settings-editor__footer[b-hicd96u5i9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.platform-settings-editor__read-only[b-hicd96u5i9] {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.platform-settings-primary-button[b-hicd96u5i9] {
    min-width: 220px;
    height: 46px;
    padding: 0 24px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient( 180deg, #2563eb, #1d4ed8);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(37,99,235,.18);
    transition: transform .18s ease, box-shadow .18s ease;
}

    .platform-settings-primary-button:hover:not(:disabled)[b-hicd96u5i9] {
        transform: translateY(-2px);
        box-shadow: 0 16px 30px rgba(37,99,235,.24);
    }

    .platform-settings-primary-button:disabled[b-hicd96u5i9] {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }


/* =========================================================
   8. RESPONSIVE
   ========================================================= */

@media (max-width:760px) {

    .platform-settings-editor[b-hicd96u5i9] {
        padding: 18px;
    }

    .platform-settings-toggle-row[b-hicd96u5i9] {
        flex-direction: column;
        align-items: stretch;
    }

    .platform-settings-editor__footer[b-hicd96u5i9] {
        flex-direction: column;
        align-items: stretch;
    }

    .platform-settings-primary-button[b-hicd96u5i9] {
        width: 100%;
    }
}

@media (max-width:520px) {

    .platform-settings-editor[b-hicd96u5i9] {
        padding: 16px;
        gap: 18px;
    }

    .platform-settings-editor__title[b-hicd96u5i9] {
        font-size: 20px;
    }

    .platform-settings-editor__description[b-hicd96u5i9] {
        font-size: 13px;
    }
}
/* /Components/Pages/Settings/PlatformSettings/PlatformSettingsWorkspace.razor.rz.scp.css */
/* =========================================================
   FILE: PlatformSettingsWorkspace.razor.css

   PURPOSE:
   Provides scoped layout and presentation styling for the
   Control Plane Platform Settings workspace.

   RESPONSIBILITIES:
   - Style the Platform Settings workspace container
   - Style the workspace heading and description
   - Style the Billing and Collections navigation tabs
   - Style loading, error, and success states
   - Style retry actions
   - Provide a stable content surface for child editors
   - Provide responsive behavior for smaller viewports

   IMPORTANT NOTES:
   - This stylesheet belongs exclusively to
     PlatformSettingsWorkspace
   - PlatformBillingSettingsEditor owns its editor styling
   - PlatformCollectionsSettingsEditor owns its editor styling
   - This stylesheet targets the exact class names rendered
     by PlatformSettingsWorkspace.razor
   - Shared page-shell styling remains global
   - Child editor internals are not styled through ::deep
   ========================================================= */


/* =========================================================
   1. WORKSPACE
   ========================================================= */

.vx-platform-settings-workspace[b-ahkvzrkp3y] {
    display: grid;
    gap: 22px;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 28px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, .99), rgba(248, 250, 252, .96));
    box-shadow: 0 22px 52px rgba(15, 23, 42, .055);
}


/* =========================================================
   2. HEADER
   ========================================================= */

.vx-platform-settings-workspace__header[b-ahkvzrkp3y] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    min-width: 0;
}

.vx-platform-settings-workspace__heading[b-ahkvzrkp3y] {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.vx-platform-settings-workspace__eyebrow[b-ahkvzrkp3y] {
    margin: 0;
    color: #2563eb;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.vx-platform-settings-workspace__title[b-ahkvzrkp3y] {
    margin: 0;
    color: #0f172a;
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 950;
    line-height: 1.1;
    letter-spacing: -.045em;
}

.vx-platform-settings-workspace__description[b-ahkvzrkp3y] {
    max-width: 720px;
    margin: 0;
    color: #64748b;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.7;
}


/* =========================================================
   3. TABS
   ========================================================= */

.vx-platform-settings-workspace__tabs[b-ahkvzrkp3y] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    padding: 5px;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 14px;
    background: rgba(248, 250, 252, .92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.vx-platform-settings-workspace__tab[b-ahkvzrkp3y] {
    min-height: 38px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #64748b;
    font-family: inherit;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 120ms ease;
}

    .vx-platform-settings-workspace__tab:hover[b-ahkvzrkp3y] {
        color: #1e40af;
        background: rgba(255, 255, 255, .88);
    }

    .vx-platform-settings-workspace__tab:focus-visible[b-ahkvzrkp3y] {
        outline: none;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, .14);
    }

    .vx-platform-settings-workspace__tab:active[b-ahkvzrkp3y] {
        transform: translateY(1px);
    }

.vx-platform-settings-workspace__tab--active[b-ahkvzrkp3y] {
    border-color: rgba(37, 99, 235, .16);
    background: linear-gradient( 135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .18);
}

    .vx-platform-settings-workspace__tab--active:hover[b-ahkvzrkp3y] {
        color: #ffffff;
        background: linear-gradient( 135deg, #2563eb, #1d4ed8);
    }


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

.vx-platform-settings-workspace__content[b-ahkvzrkp3y] {
    display: block;
    width: 100%;
    min-width: 0;
}

    .vx-platform-settings-workspace__content [role="tabpanel"][b-ahkvzrkp3y] {
        display: grid;
        gap: 14px;
        min-width: 0;
        outline: none;
    }

        .vx-platform-settings-workspace__content [role="tabpanel"]:focus-visible[b-ahkvzrkp3y] {
            border-radius: 20px;
            box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
        }


/* =========================================================
   5. LOADING STATE
   ========================================================= */

.vx-platform-settings-workspace__state[b-ahkvzrkp3y] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 180px;
    padding: 28px;
    border: 1px dashed rgba(148, 163, 184, .24);
    border-radius: 22px;
    background: rgba(248, 250, 252, .72);
    color: #475569;
    text-align: center;
}

    .vx-platform-settings-workspace__state p[b-ahkvzrkp3y] {
        margin: 0;
        font-size: 14px;
        font-weight: 800;
    }

.vx-platform-settings-workspace__spinner[b-ahkvzrkp3y] {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border: 3px solid rgba(37, 99, 235, .18);
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: vx-platform-settings-spin-b-ahkvzrkp3y 800ms linear infinite;
}

@keyframes vx-platform-settings-spin-b-ahkvzrkp3y {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   6. ALERTS
   ========================================================= */

.vx-platform-settings-workspace__alert[b-ahkvzrkp3y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 16px;
    background: rgba(248, 250, 252, .94);
    color: #475569;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
}

.vx-platform-settings-workspace__alert--error[b-ahkvzrkp3y] {
    border-color: rgba(220, 38, 38, .18);
    background: rgba(254, 242, 242, .96);
    color: #991b1b;
}

.vx-platform-settings-workspace__alert--success[b-ahkvzrkp3y] {
    border-color: rgba(22, 163, 74, .18);
    background: rgba(240, 253, 244, .96);
    color: #166534;
}


/* =========================================================
   7. RETRY BUTTON
   ========================================================= */

.vx-platform-settings-workspace__retry[b-ahkvzrkp3y] {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 7px 14px;
    border: 1px solid rgba(220, 38, 38, .22);
    border-radius: 10px;
    background: #ffffff;
    color: #991b1b;
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 5px 14px rgba(127, 29, 29, .07);
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 120ms ease;
}

    .vx-platform-settings-workspace__retry:hover:not(:disabled)[b-ahkvzrkp3y] {
        border-color: rgba(220, 38, 38, .38);
        box-shadow: 0 8px 18px rgba(127, 29, 29, .11);
        transform: translateY(-1px);
    }

    .vx-platform-settings-workspace__retry:focus-visible[b-ahkvzrkp3y] {
        outline: none;
        box-shadow: 0 0 0 4px rgba(220, 38, 38, .12);
    }

    .vx-platform-settings-workspace__retry:disabled[b-ahkvzrkp3y] {
        opacity: .55;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }


/* =========================================================
   8. RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .vx-platform-settings-workspace[b-ahkvzrkp3y] {
        gap: 20px;
        padding: 20px;
        border-radius: 24px;
    }

    .vx-platform-settings-workspace__header[b-ahkvzrkp3y] {
        display: grid;
    }
}

@media (max-width: 640px) {
    .vx-platform-settings-workspace[b-ahkvzrkp3y] {
        gap: 18px;
        padding: 16px;
        border-radius: 20px;
    }

    .vx-platform-settings-workspace__title[b-ahkvzrkp3y] {
        font-size: 26px;
    }

    .vx-platform-settings-workspace__description[b-ahkvzrkp3y] {
        font-size: 13px;
    }

    .vx-platform-settings-workspace__tabs[b-ahkvzrkp3y] {
        width: 100%;
    }

    .vx-platform-settings-workspace__tab[b-ahkvzrkp3y] {
        flex: 1 1 0;
        padding-right: 12px;
        padding-left: 12px;
        text-align: center;
    }

    .vx-platform-settings-workspace__alert[b-ahkvzrkp3y] {
        align-items: stretch;
        flex-direction: column;
    }

    .vx-platform-settings-workspace__retry[b-ahkvzrkp3y] {
        width: 100%;
    }

    .vx-platform-settings-workspace__state[b-ahkvzrkp3y] {
        min-height: 150px;
        padding: 22px 16px;
    }
}

@media (max-width: 420px) {
    .vx-platform-settings-workspace[b-ahkvzrkp3y] {
        padding: 14px;
        border-radius: 18px;
    }

    .vx-platform-settings-workspace__tabs[b-ahkvzrkp3y] {
        gap: 5px;
        padding: 4px;
    }

    .vx-platform-settings-workspace__tab[b-ahkvzrkp3y] {
        min-height: 36px;
        font-size: 12px;
    }
}


/* =========================================================
   9. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .vx-platform-settings-workspace__tab[b-ahkvzrkp3y],
    .vx-platform-settings-workspace__retry[b-ahkvzrkp3y] {
        transition: none;
    }

    .vx-platform-settings-workspace__spinner[b-ahkvzrkp3y] {
        animation-duration: 1400ms;
    }
}
/* /Components/Pages/Settings/PlatformUsers/Components/PlatformUserAccountPanel.razor.rz.scp.css */
/* =========================================================
   FILE: PlatformUserAccountPanel.razor.css

   PURPOSE:
   Provides scoped presentation styling for the selected
   Platform-user authentication account inside Staff
   Management.

   RESPONSIBILITIES:
   - Style the Platform-user account panel
   - Style account lifecycle information
   - Style account status presentation
   - Style password workflow
   - Style action buttons
   - Style loading, empty, and error feedback
   - Provide responsive account presentation

   IMPORTANT NOTES:
   - This stylesheet belongs exclusively to
     PlatformUserAccountPanel
   - Workspace layout belongs to
     PlatformUsersWorkspace.razor.css
   - Platform-user profile styling belongs to
     PlatformUserEditor.razor.css
   - Shared page-shell styling remains global
   - No ::deep selectors are required because this
     stylesheet is scoped directly to the component
   ========================================================= */


/* =========================================================
   1. ACCOUNT PANEL
   ========================================================= */

.vx-platform-user-account[b-ldnq6d1801] {
    display: grid;
    gap: 18px;
    width: 100%;
    padding: 22px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 26px;
    background: linear-gradient( 145deg, rgba(255,255,255,0.99), rgba(239,246,255,0.72));
    box-shadow: 0 18px 40px rgba(15,23,42,.055);
}


/* =========================================================
   2. HEADER
   ========================================================= */

.vx-platform-user-account__header[b-ldnq6d1801] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

    .vx-platform-user-account__header > div[b-ldnq6d1801] {
        display: grid;
        gap: 6px;
    }

.vx-platform-user-account__title[b-ldnq6d1801] {
    margin: 0;
    color: #0f172a;
    font-size: 22px;
    font-weight: 950;
    letter-spacing: -.035em;
}

.vx-platform-user-account__subtitle[b-ldnq6d1801] {
    max-width: 560px;
    margin: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.65;
}


/* =========================================================
   3. FEEDBACK
   ========================================================= */

.vx-platform-user-account__message[b-ldnq6d1801] {
    padding: 16px 18px;
    border: 1px solid rgba(148,163,184,.14);
    border-radius: 18px;
    color: #475569;
    background: rgba(248,250,252,.92);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.55;
}

.vx-platform-user-account__message--error[b-ldnq6d1801] {
    border-color: rgba(220,38,38,.18);
    color: #991b1b;
    background: rgba(254,242,242,.92);
}


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

.vx-platform-user-account__content[b-ldnq6d1801] {
    display: grid;
    gap: 18px;
}


/* =========================================================
   5. ACCOUNT SECTION
   ========================================================= */

.vx-platform-user-account__section[b-ldnq6d1801] {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(148,163,184,.12);
    border-radius: 22px;
    background: rgba(255,255,255,.92);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

    .vx-platform-user-account__section:hover[b-ldnq6d1801] {
        transform: translateY(-1px);
        border-color: rgba(37,99,235,.14);
        box-shadow: 0 14px 30px rgba(15,23,42,.035);
    }

.vx-platform-user-account__section-title[b-ldnq6d1801] {
    margin: 0;
    color: #0f172a;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .075em;
}


/* =========================================================
   6. DETAILS
   ========================================================= */

.vx-platform-user-account__details[b-ldnq6d1801] {
    display: grid;
    gap: 0;
    margin: 0;
}

.vx-platform-user-account__detail[b-ldnq6d1801] {
    display: grid;
    grid-template-columns: minmax(130px,.8fr) minmax(0,1.2fr);
    gap: 16px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid rgba(148,163,184,.10);
}

    .vx-platform-user-account__detail:first-child[b-ldnq6d1801] {
        padding-top: 0;
    }

    .vx-platform-user-account__detail:last-child[b-ldnq6d1801] {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .vx-platform-user-account__detail dt[b-ldnq6d1801] {
        color: #64748b;
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .055em;
    }

    .vx-platform-user-account__detail dd[b-ldnq6d1801] {
        margin: 0;
        overflow-wrap: anywhere;
        color: #1e293b;
        font-size: 13px;
        font-weight: 850;
        text-align: right;
    }

    .vx-platform-user-account__detail time[b-ldnq6d1801] {
        color: inherit;
        font: inherit;
    }


/* =========================================================
   7. STATUS BADGE
   ========================================================= */

.vx-platform-user-account__status[b-ldnq6d1801] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid rgba(37,99,235,.12);
    background: rgba(37,99,235,.08);
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 950;
    white-space: nowrap;
}


/* =========================================================
   8. PASSWORD WORKFLOW
   ========================================================= */

.vx-platform-user-account__password[b-ldnq6d1801] {
    display: grid;
    gap: 18px;
    padding-top: 6px;
}

.vx-platform-user-account__field[b-ldnq6d1801] {
    display: grid;
    gap: 8px;
}

    .vx-platform-user-account__field label[b-ldnq6d1801] {
        color: #475569;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

.vx-platform-user-account__input[b-ldnq6d1801] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 14px;
    background: #fff;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

    .vx-platform-user-account__input:focus[b-ldnq6d1801] {
        outline: none;
        border-color: rgba(37,99,235,.35);
        box-shadow: 0 0 0 4px rgba(37,99,235,.08);
    }

    .vx-platform-user-account__input:disabled[b-ldnq6d1801] {
        background: rgba(248,250,252,.90);
        cursor: not-allowed;
    }


/* =========================================================
   9. ACTIONS
   ========================================================= */

.vx-platform-user-account__actions[b-ldnq6d1801] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.vx-platform-user-account__button[b-ldnq6d1801] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    min-height: 46px;
    padding: 8px 20px;
    border: 0;
    border-radius: 14px;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-sizing: border-box;
    /* Preferred gradient with a solid-color fallback for environments that don't support gradients */
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    background-color: #1d4ed8;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .02em;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

    .vx-platform-user-account__button:hover:not(:disabled)[b-ldnq6d1801] {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(37,99,235,.20);
    }

    .vx-platform-user-account__button:disabled[b-ldnq6d1801] {
        opacity: .55;
        cursor: not-allowed;
    }

    .vx-platform-user-account__button:focus-visible[b-ldnq6d1801] {
        outline: none;
        box-shadow: 0 0 0 4px rgba(37,99,235,.12);
        transform: translateY(-1px);
    }


/* =========================================================
   10. RESPONSIVE
   ========================================================= */

@media (max-width:760px) {

    .vx-platform-user-account[b-ldnq6d1801] {
        padding: 18px;
        border-radius: 22px;
    }

    .vx-platform-user-account__detail[b-ldnq6d1801] {
        grid-template-columns: 1fr;
        gap: 5px;
        align-items: start;
    }

        .vx-platform-user-account__detail dd[b-ldnq6d1801] {
            text-align: left;
        }

    .vx-platform-user-account__actions[b-ldnq6d1801] {
        flex-direction: column;
    }

    .vx-platform-user-account__button[b-ldnq6d1801] {
        width: 100%;
    }
}

@media (max-width:520px) {

    .vx-platform-user-account[b-ldnq6d1801] {
        gap: 16px;
        padding: 16px;
        border-radius: 20px;
    }

    .vx-platform-user-account__title[b-ldnq6d1801] {
        font-size: 19px;
    }

    .vx-platform-user-account__subtitle[b-ldnq6d1801] {
        font-size: 12px;
    }

    .vx-platform-user-account__section[b-ldnq6d1801] {
        padding: 16px;
        border-radius: 19px;
    }

    .vx-platform-user-account__message[b-ldnq6d1801] {
        padding: 14px 15px;
        border-radius: 16px;
        font-size: 13px;
    }
}
/* /Components/Pages/Settings/PlatformUsers/Components/PlatformUserEditor.razor.rz.scp.css */
/* =========================================================
   FILE: PlatformUserEditor.razor.css

   PURPOSE:
   Provides scoped presentation styling for the selected
   Platform-user profile inside Staff Management.

   RESPONSIBILITIES:
   - Style the Platform-user profile panel
   - Style the profile header and close action
   - Style loading, empty, and error feedback
   - Style the Platform-user identity summary
   - Style profile, authorization, and audit sections
   - Style authority and role information
   - Provide responsive profile presentation

   IMPORTANT NOTES:
   - This stylesheet belongs exclusively to
     PlatformUserEditor
   - Workspace layout belongs to
     PlatformUsersWorkspace.razor.css
   - Platform-user registry styling belongs to
     PlatformUserList.razor.css
   - Shared page-shell styling remains global
   - No ::deep selectors are required because this
     stylesheet is scoped directly to the component
   ========================================================= */


/* =========================================================
   1. EDITOR PANEL
   ========================================================= */

.vx-platform-user-editor[b-vn1xutmmk9] {
    display: grid;
    gap: 18px;
    width: 100%;
    padding: 22px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 26px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.99), rgba(239, 246, 255, 0.72) );
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.055);
}


/* =========================================================
   2. HEADER
   ========================================================= */

.vx-platform-user-editor__header[b-vn1xutmmk9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

    .vx-platform-user-editor__header > div[b-vn1xutmmk9] {
        display: grid;
        gap: 6px;
        min-width: 0;
    }

.vx-platform-user-editor__title[b-vn1xutmmk9] {
    margin: 0;
    color: #0f172a;
    font-size: 22px;
    font-weight: 950;
    letter-spacing: -0.035em;
}

.vx-platform-user-editor__subtitle[b-vn1xutmmk9] {
    max-width: 560px;
    margin: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.65;
}


/* =========================================================
   3. CLOSE ACTION
   ========================================================= */

.vx-platform-user-editor__close[b-vn1xutmmk9] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 13px;
    color: #64748b;
    background: rgba(255, 255, 255, 0.94);
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

    .vx-platform-user-editor__close:hover[b-vn1xutmmk9] {
        transform: translateY(-1px);
        border-color: rgba(220, 38, 38, 0.18);
        color: #b91c1c;
        background: rgba(254, 242, 242, 0.96);
    }

    .vx-platform-user-editor__close:focus-visible[b-vn1xutmmk9] {
        outline: none;
        border-color: rgba(37, 99, 235, 0.42);
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.09);
    }


/* =========================================================
   4. FEEDBACK STATES
   ========================================================= */

.vx-platform-user-editor__message[b-vn1xutmmk9] {
    padding: 16px 18px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    color: #475569;
    background: rgba(248, 250, 252, 0.92);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.55;
}

.vx-platform-user-editor__message--error[b-vn1xutmmk9] {
    border-color: rgba(220, 38, 38, 0.18);
    color: #991b1b;
    background: rgba(254, 242, 242, 0.92);
}


/* =========================================================
   5. CONTENT
   ========================================================= */

.vx-platform-user-editor__content[b-vn1xutmmk9] {
    display: grid;
    gap: 18px;
}


/* =========================================================
   6. IDENTITY
   ========================================================= */

.vx-platform-user-editor__identity[b-vn1xutmmk9] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(37, 99, 235, 0.1);
    border-radius: 22px;
    background: linear-gradient( 135deg, rgba(239, 246, 255, 0.92), rgba(255, 255, 255, 0.96) );
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.035);
}

    .vx-platform-user-editor__identity > div:last-child[b-vn1xutmmk9] {
        display: grid;
        gap: 4px;
        min-width: 0;
    }

.vx-platform-user-editor__avatar[b-vn1xutmmk9] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 19px;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.1);
    font-size: 18px;
    font-weight: 950;
    letter-spacing: 0.025em;
}

.vx-platform-user-editor__name[b-vn1xutmmk9] {
    margin: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 20px;
    font-weight: 950;
    letter-spacing: -0.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vx-platform-user-editor__employee-number[b-vn1xutmmk9] {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
}


/* =========================================================
   7. PROFILE SECTIONS
   ========================================================= */

.vx-platform-user-editor__section[b-vn1xutmmk9] {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

    .vx-platform-user-editor__section:hover[b-vn1xutmmk9] {
        transform: translateY(-1px);
        border-color: rgba(37, 99, 235, 0.14);
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.035);
    }

.vx-platform-user-editor__section-title[b-vn1xutmmk9] {
    margin: 0;
    color: #0f172a;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.075em;
}


/* =========================================================
   8. DETAIL LIST
   ========================================================= */

.vx-platform-user-editor__details[b-vn1xutmmk9] {
    display: grid;
    gap: 0;
    margin: 0;
}

.vx-platform-user-editor__detail[b-vn1xutmmk9] {
    display: grid;
    grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr);
    gap: 16px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

    .vx-platform-user-editor__detail:first-child[b-vn1xutmmk9] {
        padding-top: 0;
    }

    .vx-platform-user-editor__detail:last-child[b-vn1xutmmk9] {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .vx-platform-user-editor__detail dt[b-vn1xutmmk9] {
        color: #64748b;
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.055em;
    }

    .vx-platform-user-editor__detail dd[b-vn1xutmmk9] {
        min-width: 0;
        margin: 0;
        overflow-wrap: anywhere;
        color: #1e293b;
        font-size: 13px;
        font-weight: 850;
        text-align: right;
    }

    .vx-platform-user-editor__detail time[b-vn1xutmmk9] {
        color: inherit;
        font: inherit;
    }

/* =========================================================
   FORM (CREATE MODE)
   ========================================================= */

.vx-platform-user-editor .vx-form[b-vn1xutmmk9] {
    display: grid;
    gap: 12px;
}

.vx-platform-user-editor .vx-form__row[b-vn1xutmmk9] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vx-platform-user-editor .vx-form__row label[b-vn1xutmmk9] {
    min-width: 120px;
    color: #0f172a;
    font-weight: 800;
}

/* Tighter profile card and stronger visual hierarchy */
.vx-platform-user-editor__identity[b-vn1xutmmk9] {
    display: flex;
    gap: 14px;
    align-items: center;
}

.vx-platform-user-editor__avatar[b-vn1xutmmk9] {
    width: 64px;
    height: 64px;
    font-size: 20px;
    border-radius: 12px;
    background: linear-gradient(135deg,#2563eb,#7c3aed);
    box-shadow: 0 12px 28px rgba(37,99,235,0.12);
    color: #fff;
    display: grid;
    place-items: center;
}

.vx-platform-user-editor__name[b-vn1xutmmk9] {
    margin: 0;
    font-size: 20px;
    font-weight: 950;
}

.vx-platform-user-editor__employee-number[b-vn1xutmmk9] {
    margin: 0;
    color: #64748b;
    font-weight: 900;
}

.vx-platform-user-editor .vx-form__row input[b-vn1xutmmk9],
.vx-platform-user-editor .vx-form__row select[b-vn1xutmmk9] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid rgba(148,163,184,0.18);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
}

.vx-platform-user-editor__actions[b-vn1xutmmk9] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 12px;
}

.vx-platform-user-editor__actions .vx-button[b-vn1xutmmk9] {
    min-width: 130px;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 900;
    cursor: pointer;
    border: 0;
}

.vx-platform-user-editor__actions .vx-button--secondary[b-vn1xutmmk9] {
    background: linear-gradient(180deg, #fff2f2, #fff5f5);
    color: #b91c1c;
    border: 1px solid rgba(220,38,38,0.08);
}

.vx-platform-user-editor__actions .vx-button:not(.vx-button--secondary)[b-vn1xutmmk9] {
    background: linear-gradient(180deg,#2563eb,#1e40af);
    color: #fff;
}

/* Note: global fallbacks were moved to app.css to avoid pseudo-class warnings
   in the scoped CSS analyzer. Keep component-scoped styles above for normal
   operation; global overrides are available in src/Vixly.Platform.Web/wwwroot/app.css. */


/* =========================================================
   9. AUTHORITY BADGE
   ========================================================= */

.vx-platform-user-editor__authority[b-vn1xutmmk9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 11px;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 999px;
    color: #1d4ed8;
    background: rgba(37, 99, 235, 0.08);
    font-size: 11px;
    font-weight: 950;
    white-space: nowrap;
}


/* =========================================================
   10. RESPONSIVE
   ========================================================= */

@media (max-width: 760px) {
    .vx-platform-user-editor[b-vn1xutmmk9] {
        padding: 18px;
        border-radius: 22px;
    }

    .vx-platform-user-editor__detail[b-vn1xutmmk9] {
        grid-template-columns: 1fr;
        gap: 5px;
        align-items: start;
    }

        .vx-platform-user-editor__detail dd[b-vn1xutmmk9] {
            text-align: left;
        }
}

@media (max-width: 520px) {
    .vx-platform-user-editor[b-vn1xutmmk9] {
        gap: 16px;
        padding: 16px;
        border-radius: 20px;
    }

    .vx-platform-user-editor__header[b-vn1xutmmk9] {
        gap: 12px;
    }

    .vx-platform-user-editor__title[b-vn1xutmmk9] {
        font-size: 19px;
    }

    .vx-platform-user-editor__subtitle[b-vn1xutmmk9] {
        font-size: 12px;
    }

    .vx-platform-user-editor__identity[b-vn1xutmmk9] {
        align-items: flex-start;
        padding: 16px;
        border-radius: 19px;
    }

    .vx-platform-user-editor__avatar[b-vn1xutmmk9] {
        width: 50px;
        height: 50px;
        border-radius: 16px;
        font-size: 16px;
    }

    .vx-platform-user-editor__name[b-vn1xutmmk9] {
        font-size: 17px;
        white-space: normal;
    }

    .vx-platform-user-editor__section[b-vn1xutmmk9] {
        padding: 16px;
        border-radius: 19px;
    }

    .vx-platform-user-editor__message[b-vn1xutmmk9] {
        padding: 14px 15px;
        border-radius: 16px;
        font-size: 13px;
    }
}
/* =========================================================
   EDIT PROFILE BUTTON
   ========================================================= */

.vx-platform-user-editor__edit-button[b-vn1xutmmk9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 168px;
    height: 46px;
    padding: 0 24px;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 14px;
    background: linear-gradient( 180deg, #ffffff, #f8fbff);
    color: #1e3a8a;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(15,23,42,.06);
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

    .vx-platform-user-editor__edit-button:hover[b-vn1xutmmk9] {
        transform: translateY(-2px);
        border-color: rgba(37,99,235,.30);
        background: linear-gradient( 180deg, #2563eb, #1d4ed8);
        color: #ffffff;
        box-shadow: 0 14px 28px rgba(37,99,235,.22);
    }

    .vx-platform-user-editor__edit-button:active[b-vn1xutmmk9] {
        transform: translateY(0);
    }

    .vx-platform-user-editor__edit-button:focus-visible[b-vn1xutmmk9] {
        outline: none;
        box-shadow: 0 0 0 4px rgba(37,99,235,.14), 0 12px 24px rgba(37,99,235,.18);
    }

    .vx-platform-user-editor__edit-button:disabled[b-vn1xutmmk9] {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }
/* /Components/Pages/Settings/PlatformUsers/Components/PlatformUserList.razor.rz.scp.css */
/* =========================================================
   FILE: PlatformUserList.razor.css

   PURPOSE:
   Provides scoped presentation styling for the Control Plane
   Platform-user registry.

   RESPONSIBILITIES:
   - Style the Staff Management registry panel
   - Style loading, empty, and error states
   - Style the Platform-user table
   - Style selectable rows and user links
   - Preserve the Vixly Control Plane visual language
   - Provide responsive table behavior

   IMPORTANT NOTES:
   - This stylesheet belongs exclusively to
     PlatformUserList
   - Workspace layout belongs to
     PlatformUsersWorkspace.razor.css
   - Platform-user profile styling belongs to
     PlatformUserEditor.razor.css
   - Selectors intentionally match the existing
     vx-platform-users Razor class contract
   ========================================================= */


/* =========================================================
   1. LIST PANEL
   ========================================================= */

.vx-platform-users[b-082vom63gw] {
    display: grid;
    gap: 20px;
    width: 100%;
    padding: 24px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 26px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95) );
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.045);
}


/* =========================================================
   2. HEADER
   ========================================================= */

.vx-platform-users__header[b-082vom63gw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

    .vx-platform-users__header > div[b-082vom63gw] {
        display: grid;
        gap: 8px;
        min-width: 0;
    }

.vx-platform-users__title[b-082vom63gw] {
    margin: 0;
    color: #0f172a;
    font-size: 30px;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.vx-platform-users__table-wrapper[b-082vom63gw] {
    padding: 18px;
}

.vx-platform-users__subtitle[b-082vom63gw] {
    max-width: 780px;
    margin: 0;
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
}

/* =========================================================
   3a. ACTIONS: New Staff Button
   ========================================================= */

.vx-platform-users__actions[b-082vom63gw] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vx-platform-users__button[b-082vom63gw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(15,23,42,0.08);
    background: linear-gradient(180deg,#fff,#f3f7ff);
    color: #0f172a;
    font-weight: 800;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.vx-platform-users__button:hover[b-082vom63gw] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(15,23,42,0.06);
}

.vx-platform-users__button:active[b-082vom63gw] {
    transform: translateY(0);
}

/* Global fallbacks moved to app.css to avoid pseudo-class warnings.
   Keep this file focused on scoped styles. */


/* =========================================================
   3. FEEDBACK STATES
   ========================================================= */

.vx-platform-users__message[b-082vom63gw] {
    padding: 16px 18px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    color: #475569;
    background: rgba(248, 250, 252, 0.92);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.55;
}

.vx-platform-users__message--error[b-082vom63gw] {
    border-color: rgba(220, 38, 38, 0.18);
    color: #991b1b;
    background: rgba(254, 242, 242, 0.92);
}


/* =========================================================
   4. TABLE WRAPPER
   ========================================================= */

.vx-platform-users__table-wrapper[b-082vom63gw] {
    width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
}

    .vx-platform-users__table-wrapper[b-082vom63gw]::-webkit-scrollbar {
        height: 8px;
    }

    .vx-platform-users__table-wrapper[b-082vom63gw]::-webkit-scrollbar-track {
        background: transparent;
    }

    .vx-platform-users__table-wrapper[b-082vom63gw]::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(148, 163, 184, 0.4);
    }


/* =========================================================
   5. TABLE
   ========================================================= */

.vx-platform-users__table[b-082vom63gw] {
    width: 100%;
    min-width: 860px;
    border-collapse: separate;
    border-spacing: 0;
}

    .vx-platform-users__table thead[b-082vom63gw] {
        background: linear-gradient( 180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.92) );
    }

    .vx-platform-users__table th[b-082vom63gw] {
        padding: 14px 16px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.14);
        color: #64748b;
        font-size: 11px;
        font-weight: 950;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.075em;
        white-space: nowrap;
    }

        .vx-platform-users__table th:first-child[b-082vom63gw] {
            padding-left: 20px;
        }

        .vx-platform-users__table th:last-child[b-082vom63gw] {
            padding-right: 20px;
        }


/* =========================================================
   6. TABLE ROWS
   ========================================================= */

.vx-platform-users__row[b-082vom63gw] {
    cursor: pointer;
    outline: none;
    transition: background 160ms ease, box-shadow 160ms ease;
}

    .vx-platform-users__row:hover[b-082vom63gw] {
        background: rgba(239, 246, 255, 0.72);
    }

    .vx-platform-users__row:focus[b-082vom63gw] {
        background: rgba(239, 246, 255, 0.9);
        box-shadow: inset 4px 0 0 #2563eb;
    }

    .vx-platform-users__row:focus-visible[b-082vom63gw] {
        background: rgba(239, 246, 255, 0.9);
        box-shadow: inset 4px 0 0 #2563eb, inset 0 0 0 2px rgba(37, 99, 235, 0.08);
    }

    .vx-platform-users__row td[b-082vom63gw] {
        padding: 16px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.1);
        color: #334155;
        font-size: 13px;
        font-weight: 800;
        vertical-align: middle;
    }

    .vx-platform-users__row:last-child td[b-082vom63gw] {
        border-bottom: 0;
    }

    .vx-platform-users__row td:first-child[b-082vom63gw] {
        padding-left: 20px;
    }

    .vx-platform-users__row td:last-child[b-082vom63gw] {
        padding-right: 20px;
    }

    .vx-platform-users__row td:nth-child(3)[b-082vom63gw] {
        color: #1d4ed8;
        font-weight: 850;
    }

    .vx-platform-users__row td:nth-child(4)[b-082vom63gw],
    .vx-platform-users__row td:nth-child(6)[b-082vom63gw] {
        color: #475569;
        white-space: nowrap;
    }

    .vx-platform-users__row td:nth-child(5)[b-082vom63gw] {
        white-space: nowrap;
    }


/* =========================================================
   7. STAFF MEMBER LINK
   ========================================================= */

.vx-platform-users__user-link[b-082vom63gw] {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0;
    border: 0;
    color: #0f172a;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 950;
    text-align: left;
    cursor: pointer;
    transition: color 160ms ease, transform 160ms ease;
}

    .vx-platform-users__user-link:hover[b-082vom63gw] {
        transform: translateX(1px);
        color: #2563eb;
    }

    .vx-platform-users__user-link:focus-visible[b-082vom63gw] {
        outline: none;
        border-radius: 8px;
        color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.09);
    }


/* =========================================================
   8. AUTHORITY VALUE
   ========================================================= */

.vx-platform-users__row td:nth-child(5)[b-082vom63gw] {
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 950;
}


/* =========================================================
   9. DATE
   ========================================================= */

.vx-platform-users__row time[b-082vom63gw] {
    color: inherit;
    font: inherit;
}


/* =========================================================
   10. RESPONSIVE
   ========================================================= */

@media (max-width: 760px) {
    .vx-platform-users[b-082vom63gw] {
        padding: 18px;
        border-radius: 22px;
    }

    .vx-platform-users__title[b-082vom63gw] {
        font-size: 24px;
    }

    .vx-platform-users__table-wrapper[b-082vom63gw] {
        border-radius: 18px;
    }
}

@media (max-width: 520px) {
    .vx-platform-users[b-082vom63gw] {
        gap: 16px;
        padding: 16px;
        border-radius: 20px;
    }

    .vx-platform-users__title[b-082vom63gw] {
        font-size: 21px;
    }

    .vx-platform-users__subtitle[b-082vom63gw] {
        font-size: 13px;
    }

    .vx-platform-users__message[b-082vom63gw] {
        padding: 14px 15px;
        border-radius: 16px;
        font-size: 13px;
    }
}
/* /Components/Pages/Settings/PlatformUsers/Components/PlatformUserRolesEditor.razor.rz.scp.css */
/* ==========================================================
   FILE: PlatformUserRolesEditor.razor.css

   PURPOSE:
   Provides scoped presentation styling for the Platform-user
   Roles editor inside Staff Management.

   RESPONSIBILITIES:
   - Style the Platform-user Roles panel
   - Style the Roles header and descriptive content
   - Style loading, empty, success, and error feedback
   - Style the role-assignment form
   - Style active and historical role-assignment cards
   - Style assignment status indicators and actions
   - Provide responsive Roles presentation

   IMPORTANT NOTES:
   - This stylesheet belongs exclusively to
     PlatformUserRolesEditor
   - Workspace layout belongs to
     PlatformUsersWorkspace.razor.css
   - Platform-user profile styling belongs to
     PlatformUserEditor.razor.css
   - Shared page-shell styling remains global
   - No ::deep selectors are required because this
     stylesheet is scoped directly to the component
   ========================================================== */


/* ==========================================================
   1. ROLES EDITOR PANEL
   ========================================================== */

.vx-platform-user-roles-editor[b-4yqljx1ti8] {
    display: grid;
    gap: 18px;
    width: 100%;
    min-width: 0;
    padding: 22px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 26px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.99), rgba(239, 246, 255, 0.72) );
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.055);
}


/* ==========================================================
   2. HEADER
   ========================================================== */

.vx-platform-user-roles-editor__header[b-4yqljx1ti8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

    .vx-platform-user-roles-editor__header > div[b-4yqljx1ti8] {
        display: grid;
        gap: 6px;
        min-width: 0;
    }

.vx-platform-user-roles-editor__title[b-4yqljx1ti8] {
    margin: 0;
    color: #0f172a;
    font-size: 22px;
    font-weight: 950;
    letter-spacing: -0.035em;
}

.vx-platform-user-roles-editor__subtitle[b-4yqljx1ti8] {
    max-width: 560px;
    margin: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.65;
}


/* ==========================================================
   3. FEEDBACK STATES
   ========================================================== */

.vx-platform-user-roles-editor__message[b-4yqljx1ti8] {
    padding: 16px 18px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    color: #475569;
    background: rgba(248, 250, 252, 0.92);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.55;
}

.vx-platform-user-roles-editor__message--error[b-4yqljx1ti8] {
    border-color: rgba(220, 38, 38, 0.18);
    color: #991b1b;
    background: rgba(254, 242, 242, 0.92);
}

.vx-platform-user-roles-editor__message--success[b-4yqljx1ti8] {
    border-color: rgba(22, 163, 74, 0.18);
    color: #166534;
    background: rgba(240, 253, 244, 0.94);
}


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

.vx-platform-user-roles-editor__content[b-4yqljx1ti8] {
    display: grid;
    gap: 18px;
    min-width: 0;
}


/* ==========================================================
   5. ROLE SECTIONS
   ========================================================== */

.vx-platform-user-roles-editor__section[b-4yqljx1ti8] {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

    .vx-platform-user-roles-editor__section:hover[b-4yqljx1ti8] {
        transform: translateY(-1px);
        border-color: rgba(37, 99, 235, 0.14);
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.035);
    }

.vx-platform-user-roles-editor__section-header[b-4yqljx1ti8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
}

    .vx-platform-user-roles-editor__section-header > div[b-4yqljx1ti8] {
        display: grid;
        gap: 5px;
        min-width: 0;
    }

.vx-platform-user-roles-editor__section-title[b-4yqljx1ti8] {
    margin: 0;
    color: #0f172a;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.075em;
}

.vx-platform-user-roles-editor__section-subtitle[b-4yqljx1ti8] {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
}

.vx-platform-user-roles-editor__count[b-4yqljx1ti8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 11px;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 999px;
    color: #1d4ed8;
    background: rgba(37, 99, 235, 0.08);
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
}


/* ==========================================================
   6. ROLE ASSIGNMENT FORM
   ========================================================== */

.vx-platform-user-roles-editor__assignment[b-4yqljx1ti8] {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.vx-platform-user-roles-editor__field[b-4yqljx1ti8] {
    display: grid;
    gap: 7px;
    min-width: 0;
}

    .vx-platform-user-roles-editor__field label[b-4yqljx1ti8] {
        color: #0f172a;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.025em;
    }

    .vx-platform-user-roles-editor__field select[b-4yqljx1ti8] {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 10px 40px 10px 12px;
        border: 1px solid rgba(148, 163, 184, 0.18);
        border-radius: 12px;
        color: #1e293b;
        background: #fff;
        font-size: 13px;
        font-weight: 750;
        line-height: 1.35;
        cursor: pointer;
        transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
    }

        .vx-platform-user-roles-editor__field select:hover:not(:disabled)[b-4yqljx1ti8] {
            border-color: rgba(37, 99, 235, 0.3);
        }

        .vx-platform-user-roles-editor__field select:focus[b-4yqljx1ti8] {
            outline: none;
            border-color: rgba(37, 99, 235, 0.46);
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.09);
        }

        .vx-platform-user-roles-editor__field select:disabled[b-4yqljx1ti8] {
            color: #94a3b8;
            background: rgba(248, 250, 252, 0.92);
            cursor: not-allowed;
        }

.vx-platform-user-roles-editor__assign[b-4yqljx1ti8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(180deg, #2563eb, #1e40af);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.14);
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

    .vx-platform-user-roles-editor__assign:hover:not(:disabled)[b-4yqljx1ti8] {
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(37, 99, 235, 0.18);
    }

    .vx-platform-user-roles-editor__assign:focus-visible[b-4yqljx1ti8] {
        outline: none;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.11), 0 14px 28px rgba(37, 99, 235, 0.18);
    }

    .vx-platform-user-roles-editor__assign:disabled[b-4yqljx1ti8] {
        color: #94a3b8;
        background: rgba(226, 232, 240, 0.88);
        box-shadow: none;
        cursor: not-allowed;
    }


/* ==========================================================
   7. EMPTY STATE
   ========================================================== */

.vx-platform-user-roles-editor__empty[b-4yqljx1ti8] {
    padding: 18px;
    border: 1px dashed rgba(148, 163, 184, 0.24);
    border-radius: 18px;
    color: #64748b;
    background: rgba(248, 250, 252, 0.78);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.55;
    text-align: center;
}


/* ==========================================================
   8. ASSIGNMENT LIST
   ========================================================== */

.vx-platform-user-roles-editor__assignments[b-4yqljx1ti8] {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.vx-platform-user-roles-editor__role[b-4yqljx1ti8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 20px;
    background: linear-gradient( 135deg, rgba(239, 246, 255, 0.84), rgba(255, 255, 255, 0.96) );
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.03);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

    .vx-platform-user-roles-editor__role:hover[b-4yqljx1ti8] {
        transform: translateY(-1px);
        border-color: rgba(37, 99, 235, 0.14);
        box-shadow: 0 16px 32px rgba(15, 23, 42, 0.045);
    }

.vx-platform-user-roles-editor__role-main[b-4yqljx1ti8] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.vx-platform-user-roles-editor__role-icon[b-4yqljx1ti8] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
    font-size: 16px;
    font-weight: 950;
    letter-spacing: 0.025em;
}

.vx-platform-user-roles-editor__role-details[b-4yqljx1ti8] {
    display: grid;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.vx-platform-user-roles-editor__role-heading[b-4yqljx1ti8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.vx-platform-user-roles-editor__role-name[b-4yqljx1ti8] {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 16px;
    font-weight: 950;
    letter-spacing: -0.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==========================================================
   9. ROLE STATUS
   ========================================================== */

.vx-platform-user-roles-editor__status[b-4yqljx1ti8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 22px;
    padding: 2px 10px;
    border-radius: 999px;
    border: none;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: default;
    user-select: none;
    box-shadow: none;
}

.vx-platform-user-roles-editor__status--active[b-4yqljx1ti8] {
    border-color: rgba(22, 163, 74, 0.14);
    color: #166534;
    background: rgba(220, 252, 231, 0.86);
}

.vx-platform-user-roles-editor__status--inactive[b-4yqljx1ti8] {
    border-color: rgba(217, 119, 6, 0.14);
    color: #92400e;
    background: rgba(254, 243, 199, 0.88);
}

.vx-platform-user-roles-editor__status--revoked[b-4yqljx1ti8] {
    color: #b91c1c;
    background: rgba(254,226,226,.75);
}


/* ==========================================================
   10. ASSIGNMENT METADATA
   ========================================================== */

.vx-platform-user-roles-editor__metadata[b-4yqljx1ti8] {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(min(100%, 150px), 1fr) );
    gap: 10px 16px;
    min-width: 0;
    margin: 0;
}

    .vx-platform-user-roles-editor__metadata > div[b-4yqljx1ti8] {
        display: grid;
        gap: 4px;
        min-width: 0;
    }

    .vx-platform-user-roles-editor__metadata dt[b-4yqljx1ti8] {
        color: #64748b;
        font-size: 10px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.055em;
    }

    .vx-platform-user-roles-editor__metadata dd[b-4yqljx1ti8] {
        min-width: 0;
        margin: 0;
        overflow-wrap: anywhere;
        color: #1e293b;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.4;
    }

    .vx-platform-user-roles-editor__metadata time[b-4yqljx1ti8] {
        color: inherit;
        font: inherit;
    }


/* ==========================================================
   11. REVOKE ACTION
   ========================================================== */

.vx-platform-user-roles-editor__revoke[b-4yqljx1ti8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 96px;
    min-height: 38px;
    padding: 9px 14px;
    border: 1px solid rgba(220, 38, 38, 0.08);
    border-radius: 12px;
    color: #b91c1c;
    background: linear-gradient(180deg, #fff2f2, #fff5f5);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

    .vx-platform-user-roles-editor__revoke:hover:not(:disabled)[b-4yqljx1ti8] {
        transform: translateY(-1px);
        border-color: rgba(220, 38, 38, 0.16);
        background: rgba(254, 242, 242, 0.98);
        box-shadow: 0 10px 22px rgba(220, 38, 38, 0.08);
    }

    .vx-platform-user-roles-editor__revoke:focus-visible[b-4yqljx1ti8] {
        outline: none;
        box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.08);
    }

    .vx-platform-user-roles-editor__revoke:disabled[b-4yqljx1ti8] {
        opacity: 0.58;
        cursor: not-allowed;
    }


/* ==========================================================
   12. RESPONSIVE
   ========================================================== */

@media (max-width: 760px) {
    .vx-platform-user-roles-editor[b-4yqljx1ti8] {
        padding: 18px;
        border-radius: 22px;
    }

    .vx-platform-user-roles-editor__section-header[b-4yqljx1ti8] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .vx-platform-user-roles-editor__count[b-4yqljx1ti8] {
        justify-self: start;
    }

    .vx-platform-user-roles-editor__role[b-4yqljx1ti8] {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .vx-platform-user-roles-editor__revoke[b-4yqljx1ti8] {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .vx-platform-user-roles-editor[b-4yqljx1ti8] {
        gap: 16px;
        padding: 16px;
        border-radius: 20px;
    }

    .vx-platform-user-roles-editor__title[b-4yqljx1ti8] {
        font-size: 19px;
    }

    .vx-platform-user-roles-editor__subtitle[b-4yqljx1ti8] {
        font-size: 12px;
    }

    .vx-platform-user-roles-editor__section[b-4yqljx1ti8] {
        padding: 16px;
        border-radius: 19px;
    }

    .vx-platform-user-roles-editor__message[b-4yqljx1ti8],
    .vx-platform-user-roles-editor__empty[b-4yqljx1ti8] {
        padding: 14px 15px;
        border-radius: 16px;
        font-size: 13px;
    }

    .vx-platform-user-roles-editor__role[b-4yqljx1ti8] {
        padding: 14px;
        border-radius: 18px;
    }

    .vx-platform-user-roles-editor__role-main[b-4yqljx1ti8] {
        gap: 12px;
    }

    .vx-platform-user-roles-editor__role-icon[b-4yqljx1ti8] {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        font-size: 15px;
    }

    .vx-platform-user-roles-editor__role-heading[b-4yqljx1ti8] {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .vx-platform-user-roles-editor__role-name[b-4yqljx1ti8] {
        font-size: 15px;
        white-space: normal;
    }
}
/* /Components/Pages/Settings/PlatformUsers/PlatformUsersWorkspace.razor.rz.scp.css */
/* =========================================================
   FILE: PlatformUsersWorkspace.razor.css

   PURPOSE:
   Provides layout styling for the Control Plane Staff
   Management workspace.

   RESPONSIBILITIES:
   - Arrange the Platform-user registry and editor pane
   - Define workspace spacing and column proportions
   - Provide sufficient width for profile, account, and role
     management panels
   - Keep the editor pane visible on wider screens
   - Collapse the workspace into one column responsively
   - Style the right-pane navigation tabs

   IMPORTANT NOTES:
   - This stylesheet owns workspace layout only
   - PlatformUserList owns its own visual styling
   - PlatformUserEditor owns its own visual styling
   - PlatformUserRolesEditor owns its own visual styling
   - Child components are not styled through ::deep here
   - Shared page-shell styling remains global
   ========================================================= */


/* =========================================================
   1. WORKSPACE
   ========================================================= */

.vx-platform-users-workspace[b-9a4dy8rug9] {
    display: grid;
    /*
       The registry receives the remaining available width.

       The editor pane maintains enough horizontal room for:
       - Account forms
       - Role assignment controls
       - Assignment counts
       - Action buttons
    */
    grid-template-columns: minmax(0, 1fr) minmax(480px, 540px);
    gap: 24px;
    align-items: start;
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
}


/* =========================================================
   2. WORKSPACE REGIONS
   ========================================================= */

.vx-platform-users-workspace__list[b-9a4dy8rug9],
.vx-platform-users-workspace__editor[b-9a4dy8rug9] {
    min-width: 0;
}

.vx-platform-users-workspace__editor[b-9a4dy8rug9] {
    position: sticky;
    top: 24px;
    width: 100%;
    min-width: 0;
}


/* =========================================================
   3. RIGHT PANE
   ========================================================= */

.vx-right-pane[b-9a4dy8rug9] {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 12px;
}

.vx-right-pane__tabs[b-9a4dy8rug9] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.vx-right-pane__tab[b-9a4dy8rug9] {
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #475569;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: box-shadow 160ms ease, transform 120ms ease;
}

    .vx-right-pane__tab:focus-visible[b-9a4dy8rug9] {
        outline: none;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, .14);
    }

.vx-right-pane__tab--active[b-9a4dy8rug9] {
    border-color: rgba(37, 99, 235, .18);
    background: linear-gradient( 135deg, #2563eb, #1d4ed8 );
    color: #fff;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .12);
}

.vx-right-pane__content[b-9a4dy8rug9] {
    display: block;
    width: 100%;
    min-width: 0;
    padding-top: 6px;
}


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

/*
   The application navigation sidebar reduces the actual
   content width available to this workspace. Collapse before
   the editor pane becomes compressed.
*/
@media (max-width: 1320px) {
    .vx-platform-users-workspace[b-9a4dy8rug9] {
        grid-template-columns: 1fr;
    }

    .vx-platform-users-workspace__editor[b-9a4dy8rug9] {
        position: static;
    }
}

@media (max-width: 760px) {
    .vx-platform-users-workspace[b-9a4dy8rug9] {
        gap: 18px;
    }

    .vx-right-pane__tabs[b-9a4dy8rug9] {
        align-items: stretch;
    }

    .vx-right-pane__tab[b-9a4dy8rug9] {
        flex: 1 1 auto;
        text-align: center;
    }
}
/* /Components/Pages/Settings/Terms/TermsWorkspace.razor.rz.scp.css */
.vx-terms[b-bgbjtfbt8j] {
    display: grid;
    gap: 22px;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 28px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 28px;
    background: linear-gradient(145deg, #fff, #f8fafc);
    box-shadow: 0 22px 52px rgba(15, 23, 42, .06);
}

.vx-terms__header[b-bgbjtfbt8j] { display: grid; gap: 7px; }
.vx-terms__eyebrow[b-bgbjtfbt8j], .vx-terms__section-label[b-bgbjtfbt8j] { margin: 0; color: #2563eb; font-size: 11px; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; }
.vx-terms__title[b-bgbjtfbt8j] { margin: 0; color: #0f172a; font-size: clamp(28px, 3vw, 36px); font-weight: 950; letter-spacing: -.045em; }
.vx-terms__description[b-bgbjtfbt8j] { max-width: 760px; margin: 0; color: #64748b; font-size: 14px; font-weight: 650; line-height: 1.65; }
.vx-terms__tabs[b-bgbjtfbt8j] { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; padding: 6px; border-radius: 15px; background: #eef3fa; }
.vx-terms__tab[b-bgbjtfbt8j] { min-height: 44px; padding: 10px 14px; border: 0; border-radius: 11px; background: transparent; color: #52637d; font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; }
.vx-terms__tab--active[b-bgbjtfbt8j] { background: #fff; color: #1d4ed8; box-shadow: 0 5px 15px rgba(15,23,42,.09); }

.vx-terms__current[b-bgbjtfbt8j], .vx-terms__publisher[b-bgbjtfbt8j], .vx-terms__empty[b-bgbjtfbt8j] {
    padding: 24px;
    border: 1px solid #dbe4f0;
    border-radius: 22px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 12px 30px rgba(15,23,42,.045);
}

.vx-terms__current-heading[b-bgbjtfbt8j] { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.vx-terms__current-heading h2[b-bgbjtfbt8j], .vx-terms__publisher-heading h2[b-bgbjtfbt8j] { margin: 5px 0 0; color: #0f172a; font-size: 21px; font-weight: 950; }
.vx-terms__version[b-bgbjtfbt8j] { padding: 7px 12px; border-radius: 999px; background: #e8f0ff; color: #1d4ed8; font-size: 12px; font-weight: 900; }
.vx-terms__metrics[b-bgbjtfbt8j] { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 20px; }
.vx-terms__metrics div[b-bgbjtfbt8j] { display: grid; gap: 5px; padding: 15px; border-radius: 14px; background: #f8fafc; }
.vx-terms__metrics span[b-bgbjtfbt8j] { color: #64748b; font-size: 11px; font-weight: 850; text-transform: uppercase; }
.vx-terms__metrics strong[b-bgbjtfbt8j] { color: #0f172a; font-size: 13px; }
.vx-terms__document-link[b-bgbjtfbt8j] { display: inline-flex; color: #1d4ed8; font-size: 13px; font-weight: 900; text-decoration: none; }
.vx-terms__document-link:hover[b-bgbjtfbt8j] { text-decoration: underline; }
.vx-terms__inline-actions[b-bgbjtfbt8j] { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; }

.vx-terms__empty[b-bgbjtfbt8j] { display: grid; gap: 5px; border-style: dashed; color: #475569; }
.vx-terms__empty strong[b-bgbjtfbt8j] { color: #0f172a; }
.vx-terms__publisher[b-bgbjtfbt8j] { display: grid; gap: 20px; }
.vx-terms__publisher-heading[b-bgbjtfbt8j] { display: grid; gap: 4px; }
.vx-terms__publisher-heading p:last-child[b-bgbjtfbt8j] { margin: 4px 0 0; color: #64748b; font-size: 13px; }
.vx-terms__form-grid[b-bgbjtfbt8j] { display: grid; grid-template-columns: minmax(180px,.6fr) minmax(280px,1.4fr); gap: 16px; }
.vx-terms__field[b-bgbjtfbt8j] { display: grid; align-content: start; gap: 7px; min-width: 0; color: #334155; font-size: 13px; font-weight: 900; }
.vx-terms__field--wide[b-bgbjtfbt8j] { grid-column: 1 / -1; }
.vx-terms__field small[b-bgbjtfbt8j] { margin-top: -4px; color: #64748b; font-size: 11px; font-weight: 650; }
.vx-terms__field input[b-bgbjtfbt8j], .vx-terms__field select[b-bgbjtfbt8j], .vx-terms__file-input[b-bgbjtfbt8j] { box-sizing: border-box; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 11px; background: #fff; color: #0f172a; font: inherit; font-weight: 650; }
.vx-terms__field input:focus[b-bgbjtfbt8j], .vx-terms__field select:focus[b-bgbjtfbt8j], .vx-terms__file-input:focus[b-bgbjtfbt8j] { outline: none; border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,.12); }
.vx-terms__selected-file[b-bgbjtfbt8j] { padding: 11px 13px; border-radius: 11px; background: #eff6ff; color: #1e40af; font-size: 12px; }
.vx-terms__date-grid[b-bgbjtfbt8j] { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.vx-terms__confirmation[b-bgbjtfbt8j] { display: flex; align-items: flex-start; gap: 11px; padding: 16px; border: 1px solid #dbeafe; border-radius: 14px; background: #f5f9ff; color: #334155; font-size: 13px; font-weight: 750; line-height: 1.5; }
.vx-terms__confirmation input[b-bgbjtfbt8j] { width: 18px; height: 18px; margin-top: 1px; accent-color: #2563eb; }
.vx-terms__actions[b-bgbjtfbt8j] { display: flex; justify-content: flex-end; }
.vx-terms__actions[b-bgbjtfbt8j] { gap: 10px; }
.vx-terms__secondary[b-bgbjtfbt8j] { min-height: 44px; padding: 10px 16px; border: 1px solid #cbd5e1; border-radius: 11px; background: #fff; color: #1d4ed8; font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; }
.vx-terms__empty .vx-terms__secondary[b-bgbjtfbt8j] { width: max-content; margin-top: 8px; }
.vx-terms__document-class[b-bgbjtfbt8j] { max-width: 480px; }
.vx-terms__publisher--focused[b-bgbjtfbt8j] { gap: 16px; }
.vx-terms__publish[b-bgbjtfbt8j] { min-height: 44px; padding: 11px 22px; border: 0; border-radius: 12px; background: linear-gradient(135deg,#2563eb,#1d4ed8); color: #fff; font-family: inherit; font-size: 13px; font-weight: 950; cursor: pointer; box-shadow: 0 10px 22px rgba(37,99,235,.2); }
.vx-terms__publish:disabled[b-bgbjtfbt8j] { background: #cbd5e1; color: #64748b; cursor: not-allowed; box-shadow: none; }
.vx-terms__alert[b-bgbjtfbt8j] { padding: 14px 16px; border: 1px solid; border-radius: 14px; font-size: 13px; font-weight: 750; }
.vx-terms__alert--success[b-bgbjtfbt8j] { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.vx-terms__alert--error[b-bgbjtfbt8j] { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.vx-terms__alert--info[b-bgbjtfbt8j] { border-color: #bfdbfe; background: #eff6ff; color: #1e40af; }
.vx-terms__manifest[b-bgbjtfbt8j], .vx-terms__incorporation[b-bgbjtfbt8j] { display: grid; gap: 9px; margin-top: 18px; padding: 15px; border: 1px solid #dbeafe; border-radius: 14px; background: #f8fbff; }
.vx-terms__manifest a[b-bgbjtfbt8j] { color: #1d4ed8; font-size: 12px; font-weight: 800; text-decoration: none; }
.vx-terms__manifest a:hover[b-bgbjtfbt8j] { text-decoration: underline; }
.vx-terms__incorporation > small[b-bgbjtfbt8j] { color: #64748b; }
.vx-terms__incorporation label[b-bgbjtfbt8j] { display: flex; align-items: flex-start; gap: 10px; color: #334155; font-size: 13px; font-weight: 800; }
.vx-terms__incorporation label input[b-bgbjtfbt8j] { width: 17px; height: 17px; accent-color: #2563eb; }
.vx-terms__incorporation label small[b-bgbjtfbt8j] { display: block; color: #64748b; font-weight: 650; }
.vx-terms__policy-list[b-bgbjtfbt8j] { display: grid; gap: 9px; }
.vx-terms__policy-list > div[b-bgbjtfbt8j] { display: flex; justify-content: space-between; gap: 18px; padding: 13px 15px; border: 1px solid #e2e8f0; border-radius: 13px; background: #f8fafc; }
.vx-terms__policy-list span[b-bgbjtfbt8j] { display: grid; gap: 3px; }
.vx-terms__policy-list span:last-child[b-bgbjtfbt8j] { justify-items: end; text-align: right; }
.vx-terms__policy-list small[b-bgbjtfbt8j] { color: #64748b; }
.vx-terms__policy-list a[b-bgbjtfbt8j] { color: #1d4ed8; font-size: 12px; font-weight: 850; text-decoration: none; }

@media (max-width: 760px) {
    .vx-terms[b-bgbjtfbt8j] { padding: 18px; border-radius: 20px; }
    .vx-terms__tabs[b-bgbjtfbt8j] { grid-template-columns: 1fr; }
    .vx-terms__metrics[b-bgbjtfbt8j], .vx-terms__date-grid[b-bgbjtfbt8j], .vx-terms__form-grid[b-bgbjtfbt8j] { grid-template-columns: 1fr; }
    .vx-terms__field--wide[b-bgbjtfbt8j] { grid-column: auto; }
    .vx-terms__current-heading[b-bgbjtfbt8j] { flex-direction: column; }
    .vx-terms__policy-list > div[b-bgbjtfbt8j] { flex-direction: column; }
    .vx-terms__policy-list span:last-child[b-bgbjtfbt8j] { justify-items: start; text-align: left; }
    .vx-terms__actions[b-bgbjtfbt8j], .vx-terms__publish[b-bgbjtfbt8j] { width: 100%; }
    .vx-terms__actions[b-bgbjtfbt8j] { flex-direction: column-reverse; }
    .vx-terms__secondary[b-bgbjtfbt8j] { width: 100%; }
    .vx-terms__inline-actions[b-bgbjtfbt8j] { align-items:stretch; flex-direction:column; }
}
/* /Components/Pages/Subscriptions/Components/EditSubscriptionPlanForm.razor.rz.scp.css */
/* =========================================================
   FILE: EditSubscriptionPlanForm.razor.css

   PURPOSE:
   Styles the edit subscription plan form component inside
   the Subscription workspace.

   RESPONSIBILITIES:
   - Style the edit subscription form panel
   - Style form sections, fields, inputs, and selects
   - Style subscription limit inputs
   - Style save and cancel actions
   - Preserve Vixly ControlPlane visual consistency
   - Preserve responsive behavior for smaller screens

   IMPORTANT NOTES:
   - This file belongs beside EditSubscriptionPlanForm.razor
   - This is component-scoped CSS
   - Parent workspace owns orchestration and messages
   - Uses ::deep selectors so Blazor InputText, InputNumber,
     and InputSelect are styled reliably under CSS isolation
   ========================================================= */

.vx-panel[b-1lq3wuxwab] {
    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-1lq3wuxwab] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

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

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

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

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

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

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

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

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

.vx-input[b-1lq3wuxwab],
[b-1lq3wuxwab] .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-1lq3wuxwab],
    [b-1lq3wuxwab] .vx-input:hover:not(:disabled) {
        border-color: #94a3b8;
    }

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

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

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

select.vx-input[b-1lq3wuxwab],
[b-1lq3wuxwab] 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-1lq3wuxwab] {
    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-1lq3wuxwab] {
    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-1lq3wuxwab] {
        transform: translateY(-1px);
    }

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

.vx-button--primary[b-1lq3wuxwab] {
    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-1lq3wuxwab] {
        box-shadow: 0 12px 22px rgba(37, 99, 235, 0.3);
    }

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

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

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

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

    .vx-field--full[b-1lq3wuxwab] {
        grid-column: auto;
    }
}

@media (max-width: 640px) {
    .vx-panel[b-1lq3wuxwab] {
        padding: 1rem;
        border-radius: 16px;
    }

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

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

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

   PURPOSE:
   Provides styling for the commercial subscription plan
   composer component.

   RESPONSIBILITIES:
   - Style the plan composer workspace
   - Style plan identity, pricing, and simulation sections
   - Style subscription form fields
   - Style the commercial engine panel
   - Style pricing preview and simulation output
   - Preserve Vixly ControlPlane visual consistency

   IMPORTANT NOTES:
   - This stylesheet is scoped to PlanComposer.razor
   - This file owns composer visual styling only
   - Parent workspace owns orchestration and persistence
   ========================================================= */

/* =========================================================
   PLAN COMPOSER
   ========================================================= */

.vx-plan-composer[b-1uh1cwf33z] {
    position: relative;
    overflow: hidden;
    padding: 22px;
    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-1uh1cwf33z]::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-1uh1cwf33z] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.vx-plan-composer__eyebrow[b-1uh1cwf33z] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 8px;
    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-1uh1cwf33z] {
    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-1uh1cwf33z] {
    max-width: 760px;
    margin: 10px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.65;
}

.vx-plan-composer__status[b-1uh1cwf33z] {
    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-1uh1cwf33z] {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

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

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

.vx-plan-composer__configuration[b-1uh1cwf33z] {
    display: grid;
    gap: 14px;
}

.vx-plan-composer__section[b-1uh1cwf33z] {
    padding: 18px;
    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-1uh1cwf33z] {
    display: flex;
    gap: 13px;
    margin-bottom: 14px;
}

.vx-plan-composer__section-index[b-1uh1cwf33z] {
    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-1uh1cwf33z] {
    margin: 0;
    color: #0f172a;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.vx-plan-composer__section-subtitle[b-1uh1cwf33z] {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}

/* =========================================================
   FORM FIELDS
   ========================================================= */

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

.vx-subscriptions-field[b-1uh1cwf33z] {
    display: grid;
    gap: 7px;
}

.vx-subscriptions-field--active[b-1uh1cwf33z] {
    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-1uh1cwf33z] {
    color: #334155;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.vx-subscriptions-input[b-1uh1cwf33z],
[b-1uh1cwf33z] .vx-subscriptions-input {
    width: 100%;
    min-height: 48px;
    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-1uh1cwf33z],
    [b-1uh1cwf33z] .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-1uh1cwf33z],
[b-1uh1cwf33z] .vx-subscriptions-select {
    cursor: pointer;
}

/* =========================================================
   COMMERCIAL ENGINE
   ========================================================= */

.vx-commercial-engine[b-1uh1cwf33z] {
    align-self: center;
    display: flex;
    flex-direction: column;
    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__simulation[b-1uh1cwf33z] {
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.vx-commercial-engine__simulation-title[b-1uh1cwf33z] {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

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

.vx-commercial-engine__icon[b-1uh1cwf33z] {
    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-1uh1cwf33z] {
    margin: 0;
    color: #ffffff;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

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

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

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

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

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

.vx-commercial-engine__preview-item[b-1uh1cwf33z] {
    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-1uh1cwf33z] {
    background: rgba(37, 99, 235, 0.28);
    border-color: rgba(147, 197, 253, 0.28);
}

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

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

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

/* =========================================================
   COMMERCIAL RESULT
   ========================================================= */

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

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

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

.vx-commercial-result__total[b-1uh1cwf33z] {
    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-1uh1cwf33z] {
        color: #cbd5e1;
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

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

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

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

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

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

/* =========================================================
   ACTION ROWS
   ========================================================= */

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

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

.vx-subscriptions-button[b-1uh1cwf33z] {
    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-1uh1cwf33z] {
        transform: translateY(-1px);
    }

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

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

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

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

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

@media (max-width: 1180px) {
    .vx-plan-composer__grid[b-1uh1cwf33z] {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 760px) {
    .vx-subscriptions-form-grid[b-1uh1cwf33z],
    .vx-commercial-result__grid[b-1uh1cwf33z],
    .vx-commercial-result__meta[b-1uh1cwf33z] {
        grid-template-columns: 1fr;
    }

    .vx-plan-composer[b-1uh1cwf33z] {
        padding: 18px;
        border-radius: 22px;
    }

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

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

   PURPOSE:
   Provides styling for subscription registry and plan list.

   RESPONSIBILITIES:
   - Render toolbar
   - Render plan registry
   - Render plan table
   - Render badges and actions
   ========================================================= */

/* =========================================================
   TOOLBAR
   ========================================================= */

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

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

.vx-subscriptions-button[b-sw2uiok55d] {
    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;
}

.vx-subscriptions-button--primary[b-sw2uiok55d] {
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

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

.vx-subscriptions-button--danger[b-sw2uiok55d] {
    color: #ffffff;
    background: linear-gradient(135deg, #dc2626, #991b1b);
}

/* =========================================================
   PLAN REGISTRY
   ========================================================= */

.vx-plan-registry[b-sw2uiok55d] {
    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-sw2uiok55d] {
    margin-bottom: 20px;
}

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

.vx-plan-registry__title[b-sw2uiok55d] {
    margin: 0;
    color: #0f172a;
    font-size: 22px;
    font-weight: 900;
}

.vx-plan-registry__subtitle[b-sw2uiok55d] {
    margin-top: 8px;
    color: #64748b;
    font-size: 14px;
}

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

.vx-plan-table-shell[b-sw2uiok55d] {
    overflow-x: auto;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 22px;
    background: #ffffff;
}

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

    .vx-plan-table thead th[b-sw2uiok55d] {
        padding: 16px;
        color: #64748b;
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
        background: linear-gradient(180deg,#f8fafc,#f1f5f9);
    }

    .vx-plan-table tbody td[b-sw2uiok55d] {
        padding: 17px 16px;
        border-bottom: 1px solid rgba(226,232,240,.76);
    }

.vx-plan-table__actions[b-sw2uiok55d] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

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

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

.vx-plan-badge--active[b-sw2uiok55d],
.vx-plan-badge--valid[b-sw2uiok55d] {
    color: #166534;
    background: #dcfce7;
}

.vx-plan-badge--inactive[b-sw2uiok55d] {
    color: #475569;
    background: #f1f5f9;
}

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

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

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

   PURPOSE:
   Provides styling for subscription metrics cards.

   RESPONSIBILITIES:
   - Render executive summary metrics
   - Maintain ControlPlane dashboard language
   ========================================================= */

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

.vx-subscriptions-metric-card[b-rfkgb2ipau] {
    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-rfkgb2ipau] {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.vx-subscriptions-metric-card__value[b-rfkgb2ipau] {
    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;
}

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

@media (max-width: 760px) {
    .vx-subscriptions-metrics[b-rfkgb2ipau] {
        grid-template-columns: 1fr;
    }
}
/* /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-bq0zm6ho3k] {
    display: grid;
    gap: 22px;
}

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

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

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

.vx-subscriptions-button[b-bq0zm6ho3k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    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-bq0zm6ho3k] {
        transform: translateY(-1px);
    }

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

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

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

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

.vx-subscriptions-button--danger[b-bq0zm6ho3k] {
    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-bq0zm6ho3k] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.vx-subscriptions-metric-card[b-bq0zm6ho3k] {
    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-bq0zm6ho3k] {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.vx-subscriptions-metric-card__value[b-bq0zm6ho3k] {
    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-bq0zm6ho3k] {
    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-bq0zm6ho3k] {
    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-bq0zm6ho3k]::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-bq0zm6ho3k] {
    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-bq0zm6ho3k] {
    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-bq0zm6ho3k] {
    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-bq0zm6ho3k] {
    max-width: 760px;
    margin: 12px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.75;
}

.vx-plan-composer__status[b-bq0zm6ho3k] {
    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-bq0zm6ho3k] {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

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

.vx-plan-composer__grid[b-bq0zm6ho3k] {
    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-bq0zm6ho3k] {
    display: grid;
    gap: 16px;
}

.vx-plan-composer__section[b-bq0zm6ho3k] {
    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-bq0zm6ho3k] {
    display: flex;
    gap: 13px;
    margin-bottom: 18px;
}

.vx-plan-composer__section-index[b-bq0zm6ho3k] {
    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-bq0zm6ho3k] {
    margin: 0;
    color: #0f172a;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

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

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

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

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

.vx-subscriptions-field--active[b-bq0zm6ho3k] {
    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-bq0zm6ho3k] {
    color: #334155;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.vx-subscriptions-input[b-bq0zm6ho3k],
[b-bq0zm6ho3k] .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-bq0zm6ho3k],
    [b-bq0zm6ho3k] .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-bq0zm6ho3k],
[b-bq0zm6ho3k] .vx-subscriptions-select {
    cursor: pointer;
}

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

.vx-commercial-engine[b-bq0zm6ho3k] {
    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-bq0zm6ho3k] {
    display: flex;
    gap: 13px;
    align-items: center;
}

.vx-commercial-engine__icon[b-bq0zm6ho3k] {
    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-bq0zm6ho3k] {
    margin: 0;
    color: #ffffff;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

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

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

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

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

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

.vx-commercial-engine__preview-item[b-bq0zm6ho3k] {
    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-bq0zm6ho3k] {
    background: rgba(37, 99, 235, 0.28);
    border-color: rgba(147, 197, 253, 0.28);
}

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

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

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

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

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

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

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

.vx-commercial-result__total[b-bq0zm6ho3k] {
    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-bq0zm6ho3k] {
        color: #cbd5e1;
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

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

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

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

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

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

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

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

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

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

.vx-plan-registry[b-bq0zm6ho3k] {
    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-bq0zm6ho3k] {
    margin-bottom: 20px;
}

.vx-plan-registry__eyebrow[b-bq0zm6ho3k] {
    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-bq0zm6ho3k] {
    margin: 0;
    color: #0f172a;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.04em;
}

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

.vx-subscriptions-empty[b-bq0zm6ho3k] {
    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-bq0zm6ho3k] {
    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-bq0zm6ho3k] {
    width: 100%;
    min-width: 1120px;
    border-collapse: separate;
    border-spacing: 0;
}

    .vx-plan-table thead th[b-bq0zm6ho3k] {
        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-bq0zm6ho3k] {
        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-bq0zm6ho3k] {
        border-bottom: none;
    }

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

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

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

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

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

.vx-plan-code[b-bq0zm6ho3k] {
    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-bq0zm6ho3k] {
    display: grid;
    gap: 5px;
}

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

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

.vx-plan-pill[b-bq0zm6ho3k],
.vx-plan-badge[b-bq0zm6ho3k] {
    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-bq0zm6ho3k] {
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

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

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

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

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

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

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

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

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

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

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

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

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

   PURPOSE:
   Provides page composition styling for the Subscription
   workspace orchestrator.

   RESPONSIBILITIES:
   - Control workspace layout
   - Control section spacing
   - Keep orchestration layout separate from child styling

   IMPORTANT NOTES:
   - Child components own visual styling
   - This file owns layout only
   ========================================================= */

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

.vx-subscriptions-message[b-u4j4l30l5a] {
    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;
}
/* /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-tcngerxp9e] {
    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-tcngerxp9e]::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-tcngerxp9e] {
    position: relative;
    z-index: 1;
    margin-bottom: 26px;
}

.vx-assign-subscription__eyebrow[b-tcngerxp9e] {
    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-tcngerxp9e] {
    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-tcngerxp9e] {
    max-width: 860px;
    margin: 14px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.75;
}

.vx-assign-subscription__grid[b-tcngerxp9e] {
    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-tcngerxp9e] {
    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-tcngerxp9e] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.vx-assign-subscription__card-icon[b-tcngerxp9e] {
    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-tcngerxp9e] {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.04em;
}

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

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

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

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

[b-tcngerxp9e] .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-tcngerxp9e] .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-tcngerxp9e] {
    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-tcngerxp9e] {
    display: grid;
    gap: 12px;
    margin-top: 20px;
}

.vx-assign-subscription__preview-row[b-tcngerxp9e] {
    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-tcngerxp9e] {
        padding-bottom: 0;
        border-bottom: none;
    }

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

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

.vx-assign-subscription__message[b-tcngerxp9e] {
    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-tcngerxp9e] {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.16);
}

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

.vx-assign-subscription__button[b-tcngerxp9e] {
    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-tcngerxp9e] {
        transform: translateY(-1px);
    }

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

.vx-assign-subscription__button--primary[b-tcngerxp9e] {
    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-tcngerxp9e] {
    color: #0f172a;
    background: #ffffff;
    border-color: rgba(148, 163, 184, 0.26);
}

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

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

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

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

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

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

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

   PURPOSE:
   Provides scoped styling for the ManageTenantLicenses
   Presentation component.

   RESPONSIBILITIES:
   - Style the tenant license management surface
   - Style current, maximum, and remaining allocation metrics
   - Style the additional-license quantity field
   - Style projected allocation information
   - Style warning and validation messages
   - Style license management action buttons
   - Preserve responsive behavior across desktop and mobile
   - Align the component with the Control Plane commercial UI

   IMPORTANT NOTES:
   - This file is scoped to ManageTenantLicenses.razor
   - Business behavior remains in the Razor component
   - Do not move these styles into app.css
   - The component uses a native number input, so ::deep is
     not required for its current implementation
   ========================================================= */

.vx-manage-tenant-licenses[b-1u5fwb6t75] {
    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-manage-tenant-licenses[b-1u5fwb6t75]::before {
        position: absolute;
        top: -5rem;
        right: -5rem;
        width: 16rem;
        height: 16rem;
        content: "";
        border-radius: 999px;
        background: rgba(37, 99, 235, 0.06);
        pointer-events: none;
    }

/* =========================================================
   HEADER
   ========================================================= */

.vx-manage-tenant-licenses__header[b-1u5fwb6t75] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}

.vx-manage-tenant-licenses__heading[b-1u5fwb6t75] {
    min-width: 0;
}

.vx-manage-tenant-licenses__eyebrow[b-1u5fwb6t75] {
    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: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
}

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

.vx-manage-tenant-licenses__subtitle[b-1u5fwb6t75] {
    max-width: 860px;
    margin: 14px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.75;
}

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

.vx-manage-tenant-licenses__summary[b-1u5fwb6t75] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.vx-manage-tenant-licenses__metric[b-1u5fwb6t75] {
    position: relative;
    min-width: 0;
    padding: 22px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05);
}

.vx-manage-tenant-licenses__metric-label[b-1u5fwb6t75] {
    display: block;
    margin-bottom: 12px;
    color: #475569;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.vx-manage-tenant-licenses__metric-value[b-1u5fwb6t75] {
    display: block;
    color: #0f172a;
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
}

.vx-manage-tenant-licenses__metric-caption[b-1u5fwb6t75] {
    display: block;
    margin-top: 10px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

/* =========================================================
   FORM SURFACE
   ========================================================= */

.vx-manage-tenant-licenses__form[b-1u5fwb6t75] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
    gap: 24px;
    align-items: start;
}

.vx-manage-tenant-licenses .vx-form-field[b-1u5fwb6t75] {
    display: grid;
    gap: 9px;
    min-width: 0;
}

.vx-manage-tenant-licenses .vx-form-label[b-1u5fwb6t75] {
    color: #475569;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.vx-manage-tenant-licenses .vx-form-input[b-1u5fwb6t75] {
    width: 100%;
    min-height: 56px;
    box-sizing: border-box;
    padding: 0 16px;
    color: #0f172a;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    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;
}

    .vx-manage-tenant-licenses .vx-form-input:focus[b-1u5fwb6t75] {
        border-color: rgba(37, 99, 235, 0.42);
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10);
    }

.vx-manage-tenant-licenses .vx-form-help[b-1u5fwb6t75] {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
}

/* =========================================================
   ALLOCATION PREVIEW
   ========================================================= */

.vx-manage-tenant-licenses__allocation-preview[b-1u5fwb6t75] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 56px;
    padding: 16px 18px;
    border: 1px dashed rgba(37, 99, 235, 0.26);
    border-radius: 18px;
    background: rgba(37, 99, 235, 0.045);
}

.vx-manage-tenant-licenses__allocation-preview-label[b-1u5fwb6t75] {
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.5;
}

.vx-manage-tenant-licenses__allocation-preview-value[b-1u5fwb6t75] {
    flex: 0 0 auto;
    color: #0f172a;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

/* =========================================================
   MESSAGES
   ========================================================= */

.vx-manage-tenant-licenses__message[b-1u5fwb6t75] {
    position: relative;
    z-index: 1;
    margin: 18px 0;
    padding: 15px 17px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.65;
}

.vx-manage-tenant-licenses__message--error[b-1u5fwb6t75] {
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.16);
    background: rgba(239, 68, 68, 0.08);
}

.vx-manage-tenant-licenses__message--warning[b-1u5fwb6t75] {
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.20);
    background: rgba(245, 158, 11, 0.09);
}

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

.vx-manage-tenant-licenses__actions[b-1u5fwb6t75] {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 4px;
}

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

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

    .vx-manage-tenant-licenses .vx-button:disabled[b-1u5fwb6t75] {
        cursor: not-allowed;
        opacity: 0.56;
        box-shadow: none;
    }

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

.vx-manage-tenant-licenses .vx-button--secondary[b-1u5fwb6t75] {
    color: #0f172a;
    border-color: rgba(148, 163, 184, 0.26);
    background: #ffffff;
}

    .vx-manage-tenant-licenses .vx-button--secondary:hover:not(:disabled)[b-1u5fwb6t75] {
        background: #f8fafc;
        box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
    }

/* The header contains a second cancel action in the current
   Razor component. Keep it compact instead of full width. */

.vx-manage-tenant-licenses__header > .vx-button[b-1u5fwb6t75] {
    min-width: 120px;
    flex: 0 0 auto;
}

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

@media (max-width: 980px) {
    .vx-manage-tenant-licenses__summary[b-1u5fwb6t75] {
        grid-template-columns: 1fr;
    }

    .vx-manage-tenant-licenses__form[b-1u5fwb6t75] {
        grid-template-columns: 1fr;
    }
}

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

    .vx-manage-tenant-licenses__header[b-1u5fwb6t75] {
        flex-direction: column;
    }

        .vx-manage-tenant-licenses__header > .vx-button[b-1u5fwb6t75] {
            width: 100%;
        }

    .vx-manage-tenant-licenses__metric[b-1u5fwb6t75],
    .vx-manage-tenant-licenses__form[b-1u5fwb6t75] {
        padding: 18px;
        border-radius: 20px;
    }

    .vx-manage-tenant-licenses__allocation-preview[b-1u5fwb6t75] {
        align-items: flex-start;
        flex-direction: column;
    }

    .vx-manage-tenant-licenses__actions[b-1u5fwb6t75] {
        flex-direction: column-reverse;
    }

    .vx-manage-tenant-licenses .vx-button[b-1u5fwb6t75] {
        width: 100%;
        min-width: 0;
    }
}
.vx-manage-tenant-licenses__allocation-preview[b-1u5fwb6t75] {
    align-self: start;
    margin-top: 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-nh3rqhkh4m] {
    min-width: 0;
    padding: var(--surface-padding);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: var(--surface-radius);
    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-nh3rqhkh4m] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

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

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

.vx-tenant-invoices__eyebrow[b-nh3rqhkh4m] {
    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-nh3rqhkh4m] {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.04em;
}

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

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

.vx-tenant-invoices__summary[b-nh3rqhkh4m] {
    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-nh3rqhkh4m] {
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

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

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

.vx-tenant-invoices__close[b-nh3rqhkh4m] {
    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-nh3rqhkh4m] {
        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-nh3rqhkh4m] {
    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-nh3rqhkh4m] {
    width: 100%;
    min-width: 1100px;
    border-collapse: collapse;
}

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

    .vx-tenant-invoices__table th[b-nh3rqhkh4m] {
        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-nh3rqhkh4m] {
        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-nh3rqhkh4m] {
        border-bottom: none;
    }

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

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

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

.vx-tenant-invoices__number[b-nh3rqhkh4m] {
    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-nh3rqhkh4m] {
    color: #0f172a;
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
}

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

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

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

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

.vx-tenant-invoice-badge[b-nh3rqhkh4m] {
    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-nh3rqhkh4m] {
    color: #15803d;
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(34, 197, 94, 0.10);
}

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

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

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

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

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

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

.vx-tenant-invoices__action-button[b-nh3rqhkh4m] {
    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-nh3rqhkh4m] {
        transform: translateY(-1px);
    }

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

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

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

.vx-tenant-invoices__empty[b-nh3rqhkh4m] {
    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-nh3rqhkh4m] {
    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-nh3rqhkh4m] {
    display: grid;
    gap: 6px;
}

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

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

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

@container (max-width: 680px) {

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

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

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

    .vx-tenant-invoices__summary[b-nh3rqhkh4m] {
        width: 100%;
    }

    .vx-tenant-invoices__table-shell[b-nh3rqhkh4m] {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .vx-tenant-invoices__table[b-nh3rqhkh4m],
    .vx-tenant-invoices__table tbody[b-nh3rqhkh4m],
    .vx-tenant-invoices__table tr[b-nh3rqhkh4m],
    .vx-tenant-invoices__table td[b-nh3rqhkh4m] {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .vx-tenant-invoices__table thead[b-nh3rqhkh4m] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .vx-tenant-invoices__table tr[b-nh3rqhkh4m] {
        margin-bottom: 12px;
        overflow: hidden;
        border: 1px solid rgba(148, 163, 184, 0.2);
        border-radius: 16px;
        background: #fff;
    }

    .vx-tenant-invoices__table td[b-nh3rqhkh4m] {
        display: grid;
        grid-template-columns: minmax(88px, .45fr) minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        padding: 11px 14px;
        text-align: right;
    }

    .vx-tenant-invoices__table td[b-nh3rqhkh4m]::before {
        content: attr(data-label);
        color: #64748b;
        font-size: 10px;
        font-weight: 900;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .vx-tenant-invoices__actions[b-nh3rqhkh4m] {
        justify-content: flex-end;
        flex-wrap: wrap;
    }
}
[b-nh3rqhkh4m] .vx-tenant-invoices__action-button--pay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    color: #ffffff;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 10px 24px rgba(34, 197, 94, 0.20);
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

    [b-nh3rqhkh4m] .vx-tenant-invoices__action-button--pay:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 30px rgba(34, 197, 94, 0.28);
    }

[b-nh3rqhkh4m] .vx-tenant-invoices__action-button--view-payment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(14, 116, 144, 0.28);
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    color: #0e7490;
    background: rgba(6, 182, 212, 0.10);
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

    [b-nh3rqhkh4m] .vx-tenant-invoices__action-button--view-payment:hover {
        transform: translateY(-1px);
        background: rgba(6, 182, 212, 0.16);
        box-shadow: 0 10px 22px rgba(14, 116, 144, 0.14);
    }
/* /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-ez70z4pzpi] {
    min-width: 0;
    padding: var(--surface-padding);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: var(--surface-radius);
    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-ez70z4pzpi] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.vx-tenant-licenses__eyebrow[b-ez70z4pzpi] {
    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-ez70z4pzpi] {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.04em;
}

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

.vx-tenant-licenses__summary[b-ez70z4pzpi] {
    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-ez70z4pzpi] {
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

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

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

.vx-tenant-licenses__close[b-ez70z4pzpi] {
    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-ez70z4pzpi] {
        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-ez70z4pzpi] {
    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-ez70z4pzpi] {
    width: 100%;
    min-width: 1040px;
    border-collapse: collapse;
}

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

    .vx-tenant-licenses__table th[b-ez70z4pzpi] {
        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-ez70z4pzpi] {
        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-ez70z4pzpi] {
        border-bottom: none;
    }

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

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

.vx-tenant-licenses__code[b-ez70z4pzpi] {
    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-ez70z4pzpi] {
    display: grid;
    gap: 4px;
}

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

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

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

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

.vx-tenant-license-badge[b-ez70z4pzpi] {
    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-ez70z4pzpi],
.vx-tenant-license-badge--available[b-ez70z4pzpi] {
    color: #15803d;
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(34, 197, 94, 0.10);
}

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

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

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

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

.vx-tenant-licenses__empty[b-ez70z4pzpi] {
    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-ez70z4pzpi] {
    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-ez70z4pzpi] {
    display: grid;
    gap: 6px;
}

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

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

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

@container (max-width: 680px) {

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

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

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

    .vx-tenant-licenses__summary[b-ez70z4pzpi] {
        width: 100%;
    }

    .vx-tenant-licenses__table-shell[b-ez70z4pzpi] {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .vx-tenant-licenses__table[b-ez70z4pzpi],
    .vx-tenant-licenses__table tbody[b-ez70z4pzpi],
    .vx-tenant-licenses__table tr[b-ez70z4pzpi],
    .vx-tenant-licenses__table td[b-ez70z4pzpi] {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .vx-tenant-licenses__table thead[b-ez70z4pzpi] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .vx-tenant-licenses__table tr[b-ez70z4pzpi] {
        margin-bottom: 12px;
        overflow: hidden;
        border: 1px solid rgba(148, 163, 184, 0.2);
        border-radius: 16px;
        background: #fff;
    }

    .vx-tenant-licenses__table td[b-ez70z4pzpi] {
        display: grid;
        grid-template-columns: minmax(100px, .45fr) minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        padding: 11px 14px;
        text-align: right;
    }

    .vx-tenant-licenses__table td[b-ez70z4pzpi]::before {
        content: attr(data-label);
        color: #64748b;
        font-size: 10px;
        font-weight: 900;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .vx-tenant-licenses__actions[b-ez70z4pzpi] {
        justify-content: flex-end;
        flex-wrap: wrap;
    }
}
/* =========================================================
   TOPBAR
   ========================================================= */

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

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

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

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

.vx-tenant-licenses__action-button[b-ez70z4pzpi] {
    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-ez70z4pzpi] {
        transform: translateY(-1px);
    }

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

.vx-tenant-licenses__action-button--accept[b-ez70z4pzpi] {
    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-ez70z4pzpi] {
        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-ez70z4pzpi] {
    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-ez70z4pzpi] {
        background: rgba(239, 68, 68, 0.18);
        box-shadow: 0 10px 22px rgba(239, 68, 68, 0.12);
    }
/* /Components/Pages/Tenants/Components/Details/Subscriptions/TenantSubscriptionAccessPanel.razor.rz.scp.css */
/* =========================================================
   FILE: TenantSubscriptionAccessPanel.razor.css
   PURPOSE: Styles tenant subscription restriction and recovery controls.
   RESPONSIBILITIES: Keep restricted state prominent, readable, and responsive.
   IMPORTANT NOTES: Scoped to TenantSubscriptionAccessPanel.razor.
   ========================================================= */

.vx-access-panel[b-5ajvziv9a4] { display:flex; flex-direction:column; gap:14px; padding:24px; border:1px solid #fecaca; border-radius:22px; background:#fff7f7; box-shadow:0 14px 36px rgba(127,29,29,.07); }
.vx-access-panel__heading[b-5ajvziv9a4] { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.vx-access-panel__eyebrow[b-5ajvziv9a4] { color:#b91c1c; font-size:11px; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
h3[b-5ajvziv9a4] { margin:4px 0 0; color:#7f1d1d; font-size:1.25rem; font-weight:900; }
p[b-5ajvziv9a4] { margin:0; color:#7f1d1d; line-height:1.55; }
.vx-access-panel__badge[b-5ajvziv9a4] { padding:7px 11px; border-radius:999px; background:#fee2e2; color:#b91c1c; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
dl[b-5ajvziv9a4] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; overflow:hidden; border:1px solid #fecaca; border-radius:14px; background:#fecaca; gap:1px; }
dl div[b-5ajvziv9a4] { padding:12px 14px; background:#fff; }
dt[b-5ajvziv9a4] { color:#64748b; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
dd[b-5ajvziv9a4] { margin:4px 0 0; color:#0f172a; font-size:13px; font-weight:800; }
label[b-5ajvziv9a4] { color:#334155; font-size:12px; font-weight:800; }
textarea[b-5ajvziv9a4] { min-height:82px; resize:vertical; padding:12px 14px; border:1px solid #cbd5e1; border-radius:12px; font:inherit; }
button[b-5ajvziv9a4] { min-height:44px; border:0; border-radius:12px; background:#b91c1c; color:#fff; cursor:pointer; font:inherit; font-weight:900; }
button:disabled[b-5ajvziv9a4] { cursor:not-allowed; opacity:.55; }
.vx-access-panel__message[b-5ajvziv9a4] { padding:10px 12px; border-radius:10px; font-size:12px; font-weight:700; }
.vx-access-panel__message--error[b-5ajvziv9a4] { background:#fee2e2; color:#991b1b; }
.vx-access-panel__message--success[b-5ajvziv9a4] { padding:14px 16px; border:1px solid #bbf7d0; background:#dcfce7; color:#166534; }
@container (max-width:480px) { dl[b-5ajvziv9a4] { grid-template-columns:1fr; } .vx-access-panel__heading[b-5ajvziv9a4] { flex-direction:column; } }
/* /Components/Pages/Tenants/Components/Details/Subscriptions/TenantSubscriptionDetail.razor.rz.scp.css */
/* =========================================================
   FILE: TenantSubscriptionDetail.razor.css
   VIXLY Control Plane - Modernized Subscription Details Surface
   ========================================================= */

.vx-tenant-subscription-detail[b-ffgrkd10ij] {
    min-width: 0;
    padding: var(--surface-padding);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: var(--surface-radius);
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 22rem), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.04);
}

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

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

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

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

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

.vx-tenant-subscription-detail__card[b-ffgrkd10ij] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 20px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.02);
    transition: all 160ms ease;
}

.vx-tenant-subscription-detail__card:hover[b-ffgrkd10ij] {
    border-color: rgba(37, 99, 235, 0.25);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

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

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

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

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

.vx-tenant-subscription-detail__button[b-ffgrkd10ij] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    transition: all 160ms ease;
}

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

.vx-tenant-subscription-detail__button--primary:hover[b-ffgrkd10ij] {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.3);
}

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

.vx-tenant-subscription-detail__button--secondary:hover[b-ffgrkd10ij] {
    background: #f8fafc;
    border-color: rgba(37, 99, 235, 0.3);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
    transform: translateY(-1px);
}

@container (max-width: 520px) {
    .vx-tenant-subscription-detail[b-ffgrkd10ij] {
        padding: 20px;
        border-radius: 20px;
    }

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

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

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

   PURPOSE:
   Provides scoped styling for tenant company-profile
   information inside the Control Plane tenant details view.

   RESPONSIBILITIES:
   - Style the Company Profile panel
   - Style the authoritative tenant operational status
   - Style company identity and location properties
   - Style the current-plan action
   - Reduce property-row height for a balanced layout
   - Support responsive Control Plane layouts

   IMPORTANT NOTES:
   - This file is scoped to TenantCompanyProfilePanel.razor
   - Operational status is displayed in the panel header
   - The property card uses content-driven height
   - Do not move these styles into app.css
   ========================================================= */

.vx-tenant-panel[b-67j7gj4xvu] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    padding: var(--surface-padding);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: var(--surface-radius);
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.04);
}

/* =========================================================
   PANEL HEADER
   ========================================================= */

.vx-tenant-panel__header[b-67j7gj4xvu] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.vx-tenant-panel__title-group[b-67j7gj4xvu] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.vx-tenant-panel__icon-box[b-67j7gj4xvu] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
    color: #2563eb;
}

.vx-tenant-panel__title[b-67j7gj4xvu] {
    margin: 0;
    color: #0f172a;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.vx-tenant-panel__subtitle[b-67j7gj4xvu] {
    margin: 2px 0 0;
    color: #64748b;
    font-size: 13.5px;
    font-weight: 500;
}

/* =========================================================
   OPERATIONAL STATUS
   ========================================================= */

.vx-tenant-operational-status[b-67j7gj4xvu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    flex: 0 0 auto;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vx-tenant-operational-status--draft[b-67j7gj4xvu] {
    border-color: rgba(148, 163, 184, 0.28);
    background: rgba(241, 245, 249, 0.92);
    color: #475569;
}

.vx-tenant-operational-status--pendingactivation[b-67j7gj4xvu] {
    border-color: rgba(251, 146, 60, 0.30);
    background: rgba(255, 247, 237, 0.96);
    color: #9a3412;
}

.vx-tenant-operational-status--active[b-67j7gj4xvu] {
    border-color: rgba(52, 211, 153, 0.34);
    background: rgba(236, 253, 245, 0.96);
    color: #047857;
}

.vx-tenant-operational-status--suspended[b-67j7gj4xvu] {
    border-color: rgba(250, 204, 21, 0.34);
    background: rgba(254, 252, 232, 0.96);
    color: #a16207;
}

.vx-tenant-operational-status--deactivated[b-67j7gj4xvu] {
    border-color: rgba(248, 113, 113, 0.30);
    background: rgba(254, 242, 242, 0.96);
    color: #b91c1c;
}

.vx-tenant-operational-status--banned[b-67j7gj4xvu] {
    border-color: rgba(69, 10, 10, 0.92);
    background: linear-gradient( 135deg, #7f1d1d, #450a0a);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(127, 29, 29, 0.18);
}

/* =========================================================
   COMPANY PROPERTY CARD
   ========================================================= */

.vx-property-card[b-67j7gj4xvu] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 18px;
    background: #ffffff;
}

.vx-property-grid[b-67j7gj4xvu] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: rgba(226, 232, 240, 0.8);
}

.vx-property-item[b-67j7gj4xvu] {
    display: flex;
    min-width: 0;
    min-height: 66px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 12px 20px;
    background: #ffffff;
    transition: background 140ms ease;
}

    .vx-property-item:hover[b-67j7gj4xvu] {
        background: #f8fafc;
    }

.vx-property-item__label[b-67j7gj4xvu] {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.vx-property-item__value[b-67j7gj4xvu] {
    color: #0f172a;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.4;
    word-break: break-word;
}

.vx-property-item__value--link[b-67j7gj4xvu] {
    color: #2563eb;
}

.vx-property-item__value--mono[b-67j7gj4xvu] {
    font-family: var(--font-family-mono);
}

/* =========================================================
   CURRENT PLAN
   ========================================================= */

.vx-tenant-company-plan-button[b-67j7gj4xvu] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    background: #eff6ff;
    color: #2563eb;
    cursor: pointer;
    font: inherit;
    font-size: 12.5px;
    font-weight: 800;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

    .vx-tenant-company-plan-button:hover[b-67j7gj4xvu] {
        transform: translateY(-1px);
        border-color: #2563eb;
        background: #2563eb;
        color: #ffffff;
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.22);
    }

    .vx-tenant-company-plan-button span[b-67j7gj4xvu] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .vx-tenant-company-plan-button svg[b-67j7gj4xvu] {
        flex-shrink: 0;
    }

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

@container (max-width: 600px) {
    .vx-tenant-panel__header[b-67j7gj4xvu] {
        flex-direction: column;
    }
}

@container (max-width: 480px) {
    .vx-property-grid[b-67j7gj4xvu] {
        grid-template-columns: 1fr;
    }

    .vx-property-item[b-67j7gj4xvu] {
        min-height: 62px;
    }
}
/* /Components/Pages/Tenants/Components/Details/TenantDetails.razor.rz.scp.css */
/* =========================================================
   FILE: TenantDetails.razor.css

   PURPOSE:
   Provides scoped layout styling for the Control Plane
   tenant details composition.

   RESPONSIBILITIES:
   - Arrange Company Profile and tenant administration
   - Compose Account Owner above Operational Lifecycle
   - Place subscription access beneath both desktop columns
     at full available width
   - Preserve the established executive 60/40 layout
   - Align the lifecycle card with the Company Profile bottom
   - Prevent detail panels from stretching unnecessarily
   - Style tenant commercial workflow containers
   - Style device registration link output
   - Support responsive Control Plane layouts

   IMPORTANT NOTES:
   - This file is scoped to TenantDetails.razor
   - Company Profile occupies the primary left column
   - Account Owner and lifecycle controls share the right
     column
   - Subscription access is a direct page-grid child and
     therefore spans the full content width
   - The desktop right-column gap is intentionally compact
   - Responsive single-column layouts restore normal spacing
   - Do not move these styles into app.css
   ========================================================= */

.vx-tenant-details-page[b-zeo9uu6fom] {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: clamp(16px, 2vw, 24px);
    container-type: inline-size;
}

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

.vx-tenant-details-layout[b-zeo9uu6fom] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr);
    align-items: start;
    gap: 24px;
}

.vx-tenant-details-side-column[b-zeo9uu6fom] {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 4px;
}

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

.vx-tenant-details-commercial-workspace[b-zeo9uu6fom] {
    display: grid;
    min-width: 0;
    gap: 18px;
}

/* =========================================================
   DEVICE REGISTRATION LINK
   ========================================================= */

.vx-tenant-device-registration-link[b-zeo9uu6fom] {
    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-zeo9uu6fom] {
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
}

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

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

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

    .vx-tenant-details-side-column[b-zeo9uu6fom] {
        gap: 20px;
    }
}

@container (max-width: 760px) {
    .vx-tenant-details-page[b-zeo9uu6fom] {
        gap: 20px;
    }

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

@container (max-width: 520px) {
    .vx-tenant-details-page[b-zeo9uu6fom] {
        gap: 18px;
    }

    .vx-tenant-details-layout[b-zeo9uu6fom],
    .vx-tenant-details-side-column[b-zeo9uu6fom],
    .vx-tenant-details-commercial-workspace[b-zeo9uu6fom] {
        gap: 18px;
    }

    .vx-tenant-device-registration-link[b-zeo9uu6fom] {
        padding: 16px;
        border-radius: 16px;
    }
}
/* /Components/Pages/Tenants/Components/Details/TenantDetailsTopBar.razor.rz.scp.css */
/* =========================================================
   FILE: TenantDetailsTopBar.razor.css
   VIXLY Control Plane - Modernized Details Top Navigation Bar
   ========================================================= */

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

.vx-tenant-details-topbar__back-button[b-u77u310s23] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 18px;
    color: #2563eb;
    font-size: 13.5px;
    font-weight: 800;
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 14px;
    background: #ffffff;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.08);
    transition: all 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.vx-tenant-details-topbar__back-button:hover[b-u77u310s23] {
    transform: translateY(-1px);
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.16);
}
/* /Components/Pages/Tenants/Components/Details/TenantIdentityStrip.razor.rz.scp.css */
/* =========================================================
   FILE: TenantIdentityStrip.razor.css
   VIXLY Control Plane - Modernized Tenant Identity Header
   ========================================================= */

.vx-tenant-identity[b-7ci403d2rd] {
    min-width: 0;
    padding: var(--surface-padding);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: var(--surface-radius);
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.1), transparent 24rem), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.04);
}

.vx-tenant-identity__main[b-7ci403d2rd] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

.vx-tenant-identity__name[b-7ci403d2rd] {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.05em;
    border: none !important;
    outline: none !important;
}

.vx-tenant-identity__meta[b-7ci403d2rd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.vx-tenant-identity__meta-pill[b-7ci403d2rd] {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 12px;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    font-family: var(--font-family-mono);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

@container (max-width: 520px) {
    .vx-tenant-identity[b-7ci403d2rd] {
        padding: 18px;
        border-radius: 16px;
    }

    .vx-tenant-identity__meta[b-7ci403d2rd] {
        align-items: stretch;
        flex-direction: column;
    }

    .vx-tenant-identity__meta-pill[b-7ci403d2rd] {
        width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}
/* /Components/Pages/Tenants/Components/Details/TenantLifecycleControls.razor.rz.scp.css */
/* =========================================================
   FILE: TenantLifecycleControls.razor.css

   PURPOSE:
   Provides scoped styling for tenant lifecycle controls and
   lifecycle administration modals in the Control Plane.

   RESPONSIBILITIES:
   - Style tenant lifecycle summary information
   - Style lifecycle action buttons
   - Style the lifecycle administration modal
   - Style administrative reason and notes fields
   - Style high-impact confirmation controls
   - Style timed success and failure indicators
   - Style error, permission, and terminal messages
   - Support responsive Control Plane layouts

   IMPORTANT NOTES:
   - This file is scoped to TenantLifecycleControls.razor
   - Lifecycle forms render inside a fixed modal
   - Opening a form does not resize the lifecycle card
   - Success uses a green circled check
   - Failure uses a red circled X
   - Feedback indicators do not affect component height
   - Business behavior remains in Application and Domain
   - Do not move these styles into app.css
   ========================================================= */

.vx-tenant-lifecycle[b-tpm9x5mcvp] {
    position: relative;
    display: grid;
    gap: 18px;
    overflow: hidden;
    padding: 20px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    background: radial-gradient( circle at top right, rgba(37, 99, 235, 0.08), transparent 18rem), linear-gradient( 180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
}

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

.vx-tenant-lifecycle__summary[b-tpm9x5mcvp] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-right: 56px;
}

.vx-tenant-lifecycle__eyebrow[b-tpm9x5mcvp] {
    display: inline-flex;
    margin-bottom: 6px;
    color: #2563eb;
    font-size: 10.5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.vx-tenant-lifecycle__title[b-tpm9x5mcvp] {
    margin: 0;
    color: #0f172a;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -0.035em;
}

.vx-tenant-lifecycle__description[b-tpm9x5mcvp] {
    max-width: 560px;
    margin: 6px 0 0;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.6;
}

/* =========================================================
   TIMED FEEDBACK INDICATORS
   ========================================================= */

.vx-tenant-lifecycle__feedback[b-tpm9x5mcvp] {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border: 1px solid transparent;
    border-radius: 50%;
    animation: vx-tenant-lifecycle-feedback-enter-b-tpm9x5mcvp 240ms ease-out;
}

.vx-tenant-lifecycle > .vx-tenant-lifecycle__feedback[b-tpm9x5mcvp] {
    position: absolute;
    z-index: 3;
    top: 18px;
    right: 18px;
}

.vx-tenant-lifecycle__feedback--success[b-tpm9x5mcvp] {
    border-color: rgba(52, 211, 153, 0.44);
    background: linear-gradient( 135deg, #ecfdf5, #d1fae5);
    color: #047857;
    box-shadow: 0 12px 28px rgba(5, 150, 105, 0.18), 0 0 0 5px rgba(52, 211, 153, 0.08);
}

.vx-tenant-lifecycle__feedback--failure[b-tpm9x5mcvp] {
    border-color: rgba(248, 113, 113, 0.48);
    background: linear-gradient( 135deg, #fef2f2, #fee2e2);
    color: #b91c1c;
    box-shadow: 0 12px 28px rgba(220, 38, 38, 0.18), 0 0 0 5px rgba(248, 113, 113, 0.08);
}

.vx-tenant-lifecycle__visually-hidden[b-tpm9x5mcvp] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

@keyframes vx-tenant-lifecycle-feedback-enter-b-tpm9x5mcvp {
    from {
        opacity: 0;
        transform: scale(0.72);
    }

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

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

.vx-tenant-lifecycle__actions[b-tpm9x5mcvp] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vx-tenant-lifecycle__button[b-tpm9x5mcvp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 13px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, border-color 150ms ease, opacity 150ms ease;
}

    .vx-tenant-lifecycle__button:hover:not(:disabled)[b-tpm9x5mcvp] {
        transform: translateY(-1px);
    }

    .vx-tenant-lifecycle__button:disabled[b-tpm9x5mcvp] {
        cursor: not-allowed;
        opacity: 0.56;
        box-shadow: none;
    }

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

.vx-tenant-lifecycle__button--warning[b-tpm9x5mcvp] {
    border-color: rgba(234, 179, 8, 0.34);
    background: rgba(254, 249, 195, 0.82);
    color: #854d0e;
}

    .vx-tenant-lifecycle__button--warning:hover:not(:disabled)[b-tpm9x5mcvp] {
        background: rgba(254, 240, 138, 0.92);
        box-shadow: 0 12px 24px rgba(202, 138, 4, 0.12);
    }

.vx-tenant-lifecycle__button--danger[b-tpm9x5mcvp] {
    border-color: rgba(248, 113, 113, 0.30);
    background: rgba(254, 242, 242, 0.94);
    color: #b91c1c;
}

    .vx-tenant-lifecycle__button--danger:hover:not(:disabled)[b-tpm9x5mcvp] {
        background: rgba(254, 226, 226, 0.96);
        box-shadow: 0 12px 24px rgba(220, 38, 38, 0.10);
    }

.vx-tenant-lifecycle__button--terminal[b-tpm9x5mcvp] {
    background: linear-gradient( 135deg, #991b1b, #450a0a);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(127, 29, 29, 0.20);
}

.vx-tenant-lifecycle__button--secondary[b-tpm9x5mcvp] {
    border-color: rgba(148, 163, 184, 0.28);
    background: #ffffff;
    color: #0f172a;
}

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

/* =========================================================
   MODAL BACKDROP
   ========================================================= */

.vx-tenant-lifecycle-modal-backdrop[b-tpm9x5mcvp] {
    position: fixed;
    z-index: 2000;
    inset: 0;
    display: grid;
    place-items: center;
    overflow-y: auto;
    padding: 24px;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(4px);
    overscroll-behavior: contain;
}

/* =========================================================
   MODAL CONTAINER
   ========================================================= */

.vx-tenant-lifecycle-modal[b-tpm9x5mcvp] {
    display: grid;
    width: min(620px, 100%);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 24px;
    background: radial-gradient( circle at top right, rgba(37, 99, 235, 0.09), transparent 20rem), linear-gradient( 180deg, #ffffff, #f8fafc);
    box-shadow: 0 32px 80px rgba(15, 23, 42, 0.32), 0 12px 32px rgba(15, 23, 42, 0.16);
    overscroll-behavior: contain;
}

/* =========================================================
   MODAL HEADER
   ========================================================= */

.vx-tenant-lifecycle-modal__header[b-tpm9x5mcvp] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 24px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.92);
}

.vx-tenant-lifecycle-modal__header-actions[b-tpm9x5mcvp] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 10px;
}

.vx-tenant-lifecycle-modal__close[b-tpm9x5mcvp] {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    color: #64748b;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease, transform 150ms ease, opacity 150ms ease;
}

    .vx-tenant-lifecycle-modal__close:hover:not(:disabled)[b-tpm9x5mcvp] {
        transform: translateY(-1px);
        border-color: rgba(248, 113, 113, 0.34);
        background: #fef2f2;
        color: #b91c1c;
    }

    .vx-tenant-lifecycle-modal__close:disabled[b-tpm9x5mcvp] {
        cursor: not-allowed;
        opacity: 0.5;
    }

/* =========================================================
   MODAL FORM
   ========================================================= */

.vx-tenant-lifecycle__form[b-tpm9x5mcvp] {
    display: grid;
    gap: 18px;
    padding: 24px;
}

.vx-tenant-lifecycle__form-header[b-tpm9x5mcvp] {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.vx-tenant-lifecycle__form-title[b-tpm9x5mcvp] {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.035em;
}

.vx-tenant-lifecycle__form-description[b-tpm9x5mcvp] {
    max-width: 500px;
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}

.vx-tenant-lifecycle__field[b-tpm9x5mcvp],
.vx-tenant-lifecycle__confirmation[b-tpm9x5mcvp] {
    display: grid;
    gap: 8px;
}

.vx-tenant-lifecycle__label[b-tpm9x5mcvp] {
    color: #475569;
    font-size: 10.5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vx-tenant-lifecycle__input[b-tpm9x5mcvp] {
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.98);
    color: #0f172a;
    outline: none;
    resize: vertical;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.5;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.03);
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

    .vx-tenant-lifecycle__input:focus[b-tpm9x5mcvp] {
        border-color: rgba(37, 99, 235, 0.46);
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.09);
    }

    .vx-tenant-lifecycle__input:disabled[b-tpm9x5mcvp] {
        cursor: not-allowed;
        background: #f8fafc;
        color: #94a3b8;
    }

.vx-tenant-lifecycle__hint[b-tpm9x5mcvp] {
    color: #94a3b8;
    font-size: 10.5px;
    font-weight: 650;
}

.vx-tenant-lifecycle__confirmation[b-tpm9x5mcvp] {
    padding: 14px;
    border: 1px solid rgba(248, 113, 113, 0.24);
    border-radius: 14px;
    background: rgba(254, 242, 242, 0.76);
}

.vx-tenant-lifecycle__form-actions[b-tpm9x5mcvp] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px;
}

/* =========================================================
   ERROR AND NOTICES
   ========================================================= */

.vx-tenant-lifecycle__message[b-tpm9x5mcvp],
.vx-tenant-lifecycle__permission-notice[b-tpm9x5mcvp],
.vx-tenant-lifecycle__terminal-notice[b-tpm9x5mcvp] {
    position: relative;
    z-index: 1;
    padding: 13px 14px;
    border-radius: 13px;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.55;
}

.vx-tenant-lifecycle__message--error[b-tpm9x5mcvp] {
    border: 1px solid rgba(248, 113, 113, 0.26);
    background: rgba(254, 242, 242, 0.94);
    color: #b91c1c;
}

.vx-tenant-lifecycle__permission-notice[b-tpm9x5mcvp] {
    border: 1px dashed rgba(148, 163, 184, 0.34);
    background: rgba(248, 250, 252, 0.86);
    color: #64748b;
}

.vx-tenant-lifecycle__terminal-notice[b-tpm9x5mcvp] {
    border: 1px solid rgba(127, 29, 29, 0.22);
    background: linear-gradient( 135deg, rgba(254, 242, 242, 0.98), rgba(254, 226, 226, 0.78));
    color: #991b1b;
}

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

@media (max-width: 700px) {
    .vx-tenant-lifecycle[b-tpm9x5mcvp] {
        padding: 16px;
    }

    .vx-tenant-lifecycle__summary[b-tpm9x5mcvp] {
        flex-direction: column;
        padding-right: 50px;
    }

    .vx-tenant-lifecycle >
    .vx-tenant-lifecycle__feedback[b-tpm9x5mcvp] {
        top: 14px;
        right: 14px;
    }

    .vx-tenant-lifecycle__actions[b-tpm9x5mcvp] {
        flex-direction: column;
    }

        .vx-tenant-lifecycle__actions
        .vx-tenant-lifecycle__button[b-tpm9x5mcvp] {
            width: 100%;
        }

    .vx-tenant-lifecycle-modal-backdrop[b-tpm9x5mcvp] {
        place-items: start center;
        padding: 12px;
    }

    .vx-tenant-lifecycle-modal[b-tpm9x5mcvp] {
        max-height: calc(100dvh - 24px);
        border-radius: 20px;
    }

    .vx-tenant-lifecycle-modal__header[b-tpm9x5mcvp],
    .vx-tenant-lifecycle__form[b-tpm9x5mcvp] {
        padding: 20px;
    }

    .vx-tenant-lifecycle-modal__header[b-tpm9x5mcvp] {
        gap: 14px;
    }

    .vx-tenant-lifecycle-modal__header-actions[b-tpm9x5mcvp] {
        gap: 8px;
    }

    .vx-tenant-lifecycle__feedback[b-tpm9x5mcvp] {
        width: 40px;
        height: 40px;
    }

    .vx-tenant-lifecycle__form-actions[b-tpm9x5mcvp] {
        flex-direction: column;
    }

        .vx-tenant-lifecycle__form-actions
        .vx-tenant-lifecycle__button[b-tpm9x5mcvp] {
            width: 100%;
        }
}

@media (prefers-reduced-motion: reduce) {
    .vx-tenant-lifecycle__feedback[b-tpm9x5mcvp] {
        animation: none;
    }
}
/* /Components/Pages/Tenants/Components/Details/TenantOwnerPanel.razor.rz.scp.css */
/* =========================================================
   FILE: TenantOwnerPanel.razor.css

   PURPOSE:
   Provides scoped styling for tenant owner information
   inside the Control Plane tenant details view.

   RESPONSIBILITIES:
   - Style the Account Owner panel
   - Style tenant owner identity information
   - Style tenant owner contact information
   - Style the missing-owner placeholder
   - Support responsive Control Plane layouts

   IMPORTANT NOTES:
   - This file is scoped to TenantOwnerPanel.razor
   - Subscription and plan presentation do not belong here
   - The panel uses content-driven height
   - Do not move these styles into app.css
   ========================================================= */

.vx-tenant-panel[b-vvzjk4f6fc] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    padding: var(--surface-padding);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: var(--surface-radius);
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.04);
}

.vx-tenant-panel__header[b-vvzjk4f6fc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vx-tenant-panel__title-group[b-vvzjk4f6fc] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vx-tenant-panel__icon-box[b-vvzjk4f6fc] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
    color: #2563eb;
}

.vx-tenant-panel__title[b-vvzjk4f6fc] {
    margin: 0;
    color: #0f172a;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.vx-tenant-panel__subtitle[b-vvzjk4f6fc] {
    margin: 2px 0 0;
    color: #64748b;
    font-size: 13.5px;
    font-weight: 500;
}

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

.vx-owner-card[b-vvzjk4f6fc] {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
}

/* =========================================================
   OWNER IDENTITY
   ========================================================= */

.vx-owner-profile-strip[b-vvzjk4f6fc] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    background: linear-gradient( 180deg, #f8fafc 0%, #f1f5f9 100%);
}

.vx-owner-avatar[b-vvzjk4f6fc] {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 14px;
    background: linear-gradient( 135deg, #2563eb 0%, #0ea5e9 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
}

.vx-owner-identity[b-vvzjk4f6fc] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.vx-owner-name[b-vvzjk4f6fc] {
    color: #0f172a;
    font-size: 16px;
    font-weight: 900;
    word-break: break-word;
}

.vx-owner-role-badge[b-vvzjk4f6fc] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* =========================================================
   OWNER CONTACT INFORMATION
   ========================================================= */

.vx-owner-property-grid[b-vvzjk4f6fc] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: rgba(226, 232, 240, 0.8);
}

.vx-owner-property-item[b-vvzjk4f6fc] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 14px 20px;
    background: #ffffff;
    transition: background 140ms ease;
}

    .vx-owner-property-item:hover[b-vvzjk4f6fc] {
        background: #f8fafc;
    }

.vx-owner-property-item__label[b-vvzjk4f6fc] {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.vx-owner-property-item__value[b-vvzjk4f6fc] {
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    word-break: break-word;
}

.vx-owner-property-item__value--link[b-vvzjk4f6fc] {
    color: #2563eb;
}

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

.vx-tenant-owner-placeholder[b-vvzjk4f6fc] {
    padding: 20px;
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
    background: #f8fafc;
    color: #64748b;
}

    .vx-tenant-owner-placeholder p[b-vvzjk4f6fc] {
        margin: 6px 0 0;
    }

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

@container (max-width: 480px) {
    .vx-owner-property-grid[b-vvzjk4f6fc] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Tenants/Components/Registry/TenantPageHeader.razor.rz.scp.css */
/* =========================================================
   FILE: TenantPageHeader.razor.css
   VIXLY Control Plane - Modernized Tenant Page Header
   ========================================================= */

.vx-tenants-toolbar[b-xo13ic4epl] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 28px 32px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 24px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 22rem), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.04);
}

.vx-tenants-toolbar__eyebrow[b-xo13ic4epl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 6px 14px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 999px;
    background: #eff6ff;
}

.vx-tenants-toolbar__subtitle[b-xo13ic4epl] {
    max-width: 720px;
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.75;
    font-weight: 500;
}

.vx-tenants-toolbar__summary[b-xo13ic4epl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 140px;
    padding: 18px 22px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.vx-tenants-toolbar__summary span[b-xo13ic4epl] {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.vx-tenants-toolbar__summary strong[b-xo13ic4epl] {
    color: #0f172a;
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.06em;
}

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

    .vx-tenants-toolbar__summary[b-xo13ic4epl] {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .vx-tenants-toolbar[b-xo13ic4epl] {
        padding: 20px;
        border-radius: 20px;
    }
}
/* /Components/Pages/Tenants/Components/Registry/TenantRow.razor.rz.scp.css */
/* =========================================================
   FILE: TenantRow.razor.css
   VIXLY Control Plane - Modernized Registry Table Rows
   ========================================================= */

.vx-tenants-table__row[b-lk8a4n7k96] {
    cursor: pointer;
    transition: all 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.vx-tenants-table__row:hover td[b-lk8a4n7k96] {
    background: #f1f5f9;
}

.vx-tenants-table__row td[b-lk8a4n7k96] {
    padding: 18px 20px;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.45;
    vertical-align: middle;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    background: #ffffff;
    transition: background 160ms ease;
}

.vx-tenants-code[b-lk8a4n7k96] {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 8px;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    font-family: var(--font-family-mono);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.vx-tenants-company[b-lk8a4n7k96] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vx-tenants-company strong[b-lk8a4n7k96] {
    color: #0f172a;
    font-size: 14.5px;
    font-weight: 800;
}

.vx-tenants-company span[b-lk8a4n7k96] {
    color: #64748b;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vx-tenants-pill[b-lk8a4n7k96] {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 10px;
    border-radius: 999px;
    color: #334155;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.vx-tenants-muted[b-lk8a4n7k96] {
    color: #475569;
    font-size: 13.5px;
    font-weight: 600;
}

.vx-tenants-date[b-lk8a4n7k96] {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    font-family: var(--font-family-mono);
}
/* /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-f9cnaa511a] {
    display: grid;
    gap: 22px;
}

.vx-tenants-panel[b-f9cnaa511a] {
    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-f9cnaa511a] {
    margin-bottom: 18px;
}

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

@media (max-width: 900px) {
    .vx-tenants-panel[b-f9cnaa511a] {
        padding: 20px;
        border-radius: 24px;
    }
}

@media (max-width: 640px) {
    .vx-tenants-panel[b-f9cnaa511a] {
        padding: 18px;
        border-radius: 22px;
    }
}
/* /Components/Pages/Tenants/Components/Registry/TenantSearchBar.razor.rz.scp.css */
/* =========================================================
   FILE: TenantSearchBar.razor.css
   VIXLY Control Plane - Modernized Search Input Component
   ========================================================= */

.vx-tenants-search[b-kowwd85mfb] {
    position: relative;
    max-width: 680px;
    width: 100%;
}

.vx-tenants-search__icon[b-kowwd85mfb] {
    position: absolute;
    left: 18px;
    top: 50%;
    color: #64748b;
    font-size: 16px;
    transform: translateY(-50%);
    pointer-events: none;
}

.vx-tenants-search__input[b-kowwd85mfb] {
    width: 100%;
    min-height: 52px;
    padding: 0 20px 0 48px;
    color: #0f172a;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    background: #ffffff;
    outline: none !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
    transition: all 180ms ease;
}

.vx-tenants-search__input:focus[b-kowwd85mfb] {
    border-color: #2563eb;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12), 0 8px 24px rgba(15, 23, 42, 0.06);
}

.vx-tenants-search__input[b-kowwd85mfb]::placeholder {
    color: #94a3b8;
    font-weight: 500;
}
/* /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-favd2kzgli] {
    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-favd2kzgli] {
        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-favd2kzgli] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

.vx-tenant-summary-card__body[b-favd2kzgli] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vx-tenant-summary-card__value[b-favd2kzgli] {
    color: #0f172a;
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.06em;
}

.vx-tenant-summary-card__description[b-favd2kzgli] {
    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
   VIXLY Control Plane - Modernized Registry Table Shell
   ========================================================= */

.vx-tenants-table-shell[b-9nd2pucf89] {
    overflow-x: auto;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
}

.vx-tenants-table[b-9nd2pucf89] {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
}

.vx-tenants-table thead th[b-9nd2pucf89] {
    padding: 16px 20px;
    color: #475569;
    font-size: 11px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    background: #f8fafc;
}
/* /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-x7nror5h03] {
    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-x7nror5h03]::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-x7nror5h03] {
    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-x7nror5h03] {
    max-width: 760px;
}

.vx-subscription-list__eyebrow[b-x7nror5h03] {
    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-x7nror5h03] {
    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-x7nror5h03] {
    max-width: 760px;
    margin: 12px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.75;
}

.vx-subscription-list__summary[b-x7nror5h03] {
    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-x7nror5h03] {
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.vx-subscription-list__summary-value[b-x7nror5h03] {
    color: #0f172a;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.06em;
}

/* =========================================================
   3. TABLE SHELL
   ========================================================= */

.vx-subscription-list__table-shell[b-x7nror5h03] {
    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-x7nror5h03] {
    width: 100%;
    min-width: 1240px;
    border-collapse: separate;
    border-spacing: 0;
}

    .vx-subscription-table thead th[b-x7nror5h03] {
        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-x7nror5h03] {
        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-x7nror5h03] {
        border-bottom: none;
    }

/* =========================================================
   5. ROW STATES
   ========================================================= */

.vx-subscription-table__row[b-x7nror5h03] {
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

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

.vx-subscription-table__row--current td[b-x7nror5h03] {
    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-x7nror5h03] {
        box-shadow: inset 4px 0 0 #2563eb;
    }

/* =========================================================
   6. PLAN / TEXT CELLS
   ========================================================= */

.vx-subscription-table__plan-cell[b-x7nror5h03] {
    min-width: 220px;
}

.vx-subscription-table__plan-name[b-x7nror5h03] {
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
}

.vx-subscription-table__plan-code[b-x7nror5h03] {
    margin-top: 5px;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vx-subscription-table__device-count[b-x7nror5h03] {
    color: #0f172a;
    font-size: 1.1rem;
    font-weight: 900;
}

.vx-subscription-table__date[b-x7nror5h03] {
    color: #475569;
    font-size: 13px;
    font-weight: 700;
}

.vx-subscription-table__pricing[b-x7nror5h03] {
    min-width: 190px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 750;
}

.vx-subscription-table__muted[b-x7nror5h03] {
    color: #94a3b8;
    font-size: 13px;
    font-weight: 800;
}

/* =========================================================
   7. BADGES
   ========================================================= */

.vx-subscription-badge[b-x7nror5h03] {
    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-x7nror5h03],
.vx-subscription-badge--active[b-x7nror5h03] {
    color: #166534;
    background: #dcfce7;
    border-color: #bbf7d0;
}

.vx-subscription-badge--past[b-x7nror5h03] {
    color: #475569;
    background: #f1f5f9;
    border-color: #e2e8f0;
}

.vx-subscription-badge--warning[b-x7nror5h03] {
    color: #92400e;
    background: #fef3c7;
    border-color: #fde68a;
}

.vx-subscription-badge--danger[b-x7nror5h03] {
    color: #991b1b;
    background: #fee2e2;
    border-color: #fecaca;
}

/* =========================================================
   8. PENDING CHANGE
   ========================================================= */

.vx-subscription-table__pending[b-x7nror5h03] {
    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-x7nror5h03] {
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
}

.vx-subscription-table__pending-date[b-x7nror5h03] {
    color: #64748b;
    font-size: 11px;
    font-weight: 750;
}

/* =========================================================
   9. ACTIONS
   ========================================================= */

.vx-subscription-table__actions-header[b-x7nror5h03] {
    min-width: 230px;
}

.vx-subscription-table__actions[b-x7nror5h03] {
    white-space: nowrap;
}

.vx-subscription-table__actions[b-x7nror5h03] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.vx-subscription-list__button[b-x7nror5h03] {
    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-x7nror5h03] {
        transform: translateY(-1px);
    }

    .vx-subscription-list__button:disabled[b-x7nror5h03] {
        cursor: not-allowed;
        opacity: 0.56;
    }

.vx-subscription-list__button--primary[b-x7nror5h03] {
    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-x7nror5h03] {
    color: #0f172a;
    background: #ffffff;
    border-color: rgba(148, 163, 184, 0.26);
}

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

.vx-subscription-list__button--success[b-x7nror5h03] {
    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-x7nror5h03],
.vx-subscription-list__empty[b-x7nror5h03] {
    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-x7nror5h03],
.vx-subscription-list__empty-icon[b-x7nror5h03] {
    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-x7nror5h03],
.vx-subscription-list__empty-title[b-x7nror5h03] {
    margin: 0;
    color: #0f172a;
    font-size: 16px;
    font-weight: 900;
}

.vx-subscription-list__state p[b-x7nror5h03],
.vx-subscription-list__empty-text[b-x7nror5h03] {
    max-width: 560px;
    margin: 6px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.65;
}

.vx-subscription-list__empty-content[b-x7nror5h03] {
    display: grid;
    gap: 14px;
}

/* =========================================================
   11. RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .vx-subscription-list[b-x7nror5h03] {
        padding: 20px;
        border-radius: 24px;
    }

    .vx-subscription-list__header[b-x7nror5h03] {
        flex-direction: column;
    }

    .vx-subscription-list__summary[b-x7nror5h03] {
        width: 100%;
    }
}

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

    .vx-subscription-list__state[b-x7nror5h03],
    .vx-subscription-list__empty[b-x7nror5h03] {
        flex-direction: column;
        align-items: flex-start;
    }

    .vx-subscription-list__button[b-x7nror5h03] {
        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-xxnm8qch2z] {
    display: grid;
    gap: 24px;
    width: 100%;
}

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

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

@media (max-width: 640px) {
    .vx-page[b-xxnm8qch2z] {
        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-yralq6bjfv] {
    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-yralq6bjfv] {
    color: #64748b;
    background: #f1f5f9;
    border-color: #e2e8f0;
}

/* =========================================================
   SUCCESS STATES
   ========================================================= */

.vx-status-badge--active[b-yralq6bjfv],
.vx-status-badge--paid[b-yralq6bjfv],
.vx-status-badge--completed[b-yralq6bjfv],
.vx-status-badge--approved[b-yralq6bjfv] {
    color: #15803d;
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(34, 197, 94, 0.16);
}

/* =========================================================
   WARNING STATES
   ========================================================= */

.vx-status-badge--pending[b-yralq6bjfv],
.vx-status-badge--processing[b-yralq6bjfv],
.vx-status-badge--collect[b-yralq6bjfv] {
    color: #b45309;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.18);
}

/* =========================================================
   DANGER STATES
   ========================================================= */

.vx-status-badge--overdue[b-yralq6bjfv],
.vx-status-badge--cancelled[b-yralq6bjfv],
.vx-status-badge--failed[b-yralq6bjfv],
.vx-status-badge--rejected[b-yralq6bjfv],
.vx-status-badge--inactive[b-yralq6bjfv] {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.16);
}

/* =========================================================
   INFO STATES
   ========================================================= */

.vx-status-badge--draft[b-yralq6bjfv],
.vx-status-badge--issued[b-yralq6bjfv],
.vx-status-badge--in-transit[b-yralq6bjfv] {
    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-bcq2r5jygt] {
    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-bcq2r5jygt] {
    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-uyjx176dai] {
    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-uyjx176dai] {
    position: relative;
}

.vx-state-panel__text[b-uyjx176dai] {
    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-5vqk5aoxb8] {
    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-5vqk5aoxb8] {
    position: relative;
}

.vx-state-panel__text[b-5vqk5aoxb8] {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
    text-align: center;
}
/* /Components/Shared/VixlyCard.razor.rz.scp.css */
/* =========================================================
   VIXLY CARD SCOPED STYLES (VixlyCard.razor.css)
   ========================================================= */

.vx-card-wrapper[b-o0o1fvjcby] {
  width: 100%;
}

.vx-card[b-o0o1fvjcby] {
  background-color: var(--color-bg-surface);
  box-shadow: var(--elevation-card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
}

.vx-card:hover[b-o0o1fvjcby] {
  box-shadow: var(--elevation-border-hover);
  border-color: rgba(37, 99, 235, 0.25);
  transform: translateY(-2px);
}

.vx-card__header[b-o0o1fvjcby] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
}

.vx-card__title-group[b-o0o1fvjcby] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vx-card__title[b-o0o1fvjcby] {
  font-size: var(--font-size-base);
  font-weight: 800;
  color: var(--color-text-main);
  letter-spacing: -0.02em;
}

.vx-card__subtitle[b-o0o1fvjcby] {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.vx-card__actions[b-o0o1fvjcby] {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.vx-card__metric-row[b-o0o1fvjcby] {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-top: 2px;
}

.vx-card__metric-val[b-o0o1fvjcby] {
  font-size: var(--font-size-2xl);
  font-weight: 900;
  color: var(--color-text-main);
  letter-spacing: -0.04em;
  line-height: 1;
}

.vx-card__metric-trend[b-o0o1fvjcby] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.vx-card__metric-trend.trend-up[b-o0o1fvjcby] {
  color: #047857;
  background-color: var(--vixly-success-bg);
}

.vx-card__metric-trend.trend-down[b-o0o1fvjcby] {
  color: var(--vixly-danger);
  background-color: var(--vixly-danger-bg);
}

.vx-card__body[b-o0o1fvjcby] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.vx-card__footer[b-o0o1fvjcby] {
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@container (min-width: 440px) {
  .vx-card[b-o0o1fvjcby] {
    padding: var(--space-lg);
  }

  .vx-card__metric-val[b-o0o1fvjcby] {
    font-size: var(--font-size-3xl);
  }
}