/* ============================================================================
   SIP portal theme — ink-navy canvas, amber interactive colour.
   Custom properties below are the single source of truth; bootstrap is loaded
   first and overridden here. Fonts: IBM Plex Sans (UI) / IBM Plex Mono (codes),
   loaded in App.razor.
   ========================================================================== */

:root {
    --sip-canvas: #0C0D0F;
    --sip-surface: #131417;
    --sip-card: #1C1E22;
    --sip-hairline: #2C2E33;
    --sip-amber: #F2B233;
    --sip-on-amber: #241800;
    --sip-text: #F4F5F6;
    --sip-text-2: #B4B7BC;
    --sip-muted: #75787E;
    --sip-danger: #FF5A52;
    --sip-success: #3FD07A;
    --sip-info: #4AA8FF;
    --sip-radius: 16px;
    --sip-radius-sm: 10px;
    --sip-font: 'IBM Plex Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
    --sip-mono: 'IBM Plex Mono', Consolas, 'Courier New', monospace;

    color-scheme: dark;
}

html, body {
    font-family: var(--sip-font);
    background-color: var(--sip-canvas);
    color: var(--sip-text);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--sip-text);
    font-weight: 600;
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

h1:focus {
    outline: none;
}

hr {
    border-color: var(--sip-hairline);
    opacity: 1;
}

a, .btn-link {
    color: var(--sip-amber);
    text-decoration: none;
}

    a:hover, .btn-link:hover {
        color: #f7c65e;
        text-decoration: underline;
    }

code, kbd, pre, .sip-mono {
    font-family: var(--sip-mono);
}

.text-secondary, .text-muted {
    color: var(--sip-muted) !important;
}

.text-danger {
    color: var(--sip-danger) !important;
}

.text-success {
    color: var(--sip-success) !important;
}

/* ---------- buttons ---------- */

.btn {
    border-radius: var(--sip-radius-sm);
    font-weight: 600;
}

.btn-primary {
    color: var(--sip-on-amber);
    background-color: var(--sip-amber);
    border-color: var(--sip-amber);
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active,
    .btn-primary:first-child:active, :not(.btn-check) + .btn-primary:active {
        color: var(--sip-on-amber);
        background-color: #f7c65e;
        border-color: #f7c65e;
    }

.btn-secondary, .btn-outline-secondary {
    color: var(--sip-text);
    background-color: var(--sip-card);
    border-color: var(--sip-hairline);
}

    .btn-secondary:hover, .btn-outline-secondary:hover {
        color: var(--sip-text);
        background-color: #24262b;
        border-color: var(--sip-muted);
    }

.btn-danger {
    color: #fff;
    background-color: var(--sip-danger);
    border-color: var(--sip-danger);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--sip-canvas), 0 0 0 0.25rem var(--sip-amber);
}

/* ---------- forms ---------- */

.form-control, .form-select {
    background-color: var(--sip-surface);
    border: 1px solid var(--sip-hairline);
    border-radius: var(--sip-radius-sm);
    color: var(--sip-text);
}

    .form-control:focus, .form-select:focus {
        background-color: var(--sip-surface);
        border-color: var(--sip-amber);
        color: var(--sip-text);
    }

    .form-control::placeholder {
        color: var(--sip-muted);
    }

    .form-control:disabled, .form-control[readonly] {
        background-color: var(--sip-card);
        color: var(--sip-text-2);
        opacity: 1;
    }

.form-label, .form-check-label, label {
    color: var(--sip-text-2);
}

.form-floating > label {
    color: var(--sip-muted);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--sip-text-2);
}

    .form-floating > .form-control:focus ~ label::after,
    .form-floating > .form-control:not(:placeholder-shown) ~ label::after {
        background-color: transparent;
    }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--sip-muted);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.form-check-input {
    background-color: var(--sip-surface);
    border-color: var(--sip-hairline);
}

    .form-check-input:checked {
        background-color: var(--sip-amber);
        border-color: var(--sip-amber);
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--sip-muted);
}

/* ---------- validation ---------- */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--sip-success);
}

.invalid {
    outline: 1px solid var(--sip-danger);
}

.validation-message {
    color: var(--sip-danger);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* ---------- alerts (StatusMessage) ---------- */

.alert {
    border-radius: var(--sip-radius-sm);
    border: 1px solid var(--sip-hairline);
}

.alert-danger {
    background-color: rgba(255, 90, 82, 0.12);
    border-color: rgba(255, 90, 82, 0.4);
    color: var(--sip-danger);
}

.alert-success {
    background-color: rgba(63, 208, 122, 0.12);
    border-color: rgba(63, 208, 122, 0.4);
    color: var(--sip-success);
}

.alert-info {
    background-color: rgba(74, 168, 255, 0.12);
    border-color: rgba(74, 168, 255, 0.4);
    color: var(--sip-info);
}

/* ---------- tables ---------- */

.table {
    color: var(--sip-text);
    border-color: var(--sip-hairline);
    --bs-table-bg: transparent;
    --bs-table-color: var(--sip-text);
    --bs-table-border-color: var(--sip-hairline);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
    --bs-table-striped-color: var(--sip-text);
    --bs-table-hover-bg: rgba(242, 178, 51, 0.05);
    --bs-table-hover-color: var(--sip-text);
}

    .table thead th {
        color: var(--sip-text-2);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        border-bottom: 1px solid var(--sip-hairline);
    }

/* ---------- cards / shared building blocks ---------- */

.sip-card {
    background-color: var(--sip-card);
    border: 1px solid var(--sip-hairline);
    border-radius: var(--sip-radius);
    padding: 1.5rem;
}

/* Centred single-card page (Identity login/register). */
.sip-auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1rem;
}

    .sip-auth .sip-auth-mark {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
    }

    .sip-auth .sip-auth-wordmark {
        font-weight: 700;
        font-size: 1.3rem;
        letter-spacing: 0.35em;
        margin-right: -0.35em; /* optically recentre the tracked-out text */
        color: var(--sip-text);
    }

    .sip-auth .sip-auth-card {
        background-color: var(--sip-card);
        border: 1px solid var(--sip-hairline);
        border-radius: var(--sip-radius);
        padding: 2rem;
        width: 100%;
        max-width: 440px;
    }

    .sip-auth h1 {
        font-size: 1.3rem;
        margin-bottom: 1.25rem;
        text-align: center;
    }

    .sip-auth .sip-auth-links {
        margin-top: 1.25rem;
        text-align: center;
        font-size: 0.9rem;
    }

        .sip-auth .sip-auth-links p {
            margin-bottom: 0.4rem;
        }

/* Activation / device codes rendered in the UI. */
.sip-code {
    font-family: var(--sip-mono);
    letter-spacing: 0.08em;
}

.content {
    padding-top: 1.1rem;
}

/* ---------- shared admin surfaces ----------
   These were scoped to Licenses.razor until the quotation, invoice and operator pages needed
   the same tables, dialogs and toggles. Blazor's scoped CSS does not cross components, so the
   choice was one global copy or five identical scoped ones. */

.lic-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

    .lic-head h1 {
        margin: 0;
    }

.lic-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.lic-capacity {
    color: var(--sip-text-2);
    font-size: 0.9rem;
    margin: 0.3rem 0 0;
}

    .lic-capacity strong {
        color: var(--sip-text);
        font-size: 1.05rem;
    }

.lic-empty {
    margin-bottom: 0;
}

/* ---------- purchases strip ---------- */

.lic-purchases-card {
    margin-bottom: 1.25rem;
}

    .lic-purchases-card h2 {
        margin-bottom: 0.85rem;
    }

.lic-purchase-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.lic-purchase {
    background-color: var(--sip-surface);
    border: 1px solid var(--sip-hairline);
    border-radius: var(--sip-radius-sm);
    padding: 0.7rem 0.9rem;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* Expired purchases stay on record but visibly step back. */
.lic-purchase-expired {
    opacity: 0.5;
}

.lic-purchase-qty {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
}

.lic-purchase-count {
    font-size: 1.15rem;
    font-weight: 700;
}

.lic-purchase-count-label {
    color: var(--sip-text-2);
    font-size: 0.85rem;
}

.lic-purchase-term {
    margin-left: auto;
    color: var(--sip-amber);
    font-size: 0.78rem;
    font-weight: 600;
}

.lic-purchase-meta {
    color: var(--sip-muted);
    font-size: 0.78rem;
}

.lic-purchase-used {
    color: var(--sip-text-2);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* ---------- seats section ---------- */

.lic-seats-title {
    margin: 0 0 0.75rem;
}

/* ---------- seats table ---------- */

.lic-table-card {
    padding: 0.5rem 1rem;
    overflow-x: auto;
}

/* Any card holding a table scrolls it, rather than letting the table push the whole page sideways.
   Twenty cards across the app hold one and only a few had the wrapper class, so this is a rule
   rather than a class — the next table someone adds is covered without them having to know.

   Safe now in a way it would not have been before: the row action menus are position:fixed, so the
   overflow-y:auto that overflow-x implies no longer clips them. */
.sip-card:has(table) {
    overflow-x: auto;
}

.lic-table {
    margin-bottom: 0.25rem;
}

    .lic-table td {
        vertical-align: middle;
    }

.lic-email {
    overflow-wrap: anywhere;
}

.lic-expiry-past {
    color: var(--sip-danger);
}

.lic-expiry-soon {
    color: var(--sip-amber);
}

/* ---------- row action menu ---------- */

.lic-actions-cell {
    position: relative;
    text-align: end;
    white-space: nowrap;
}

/* The row-action "⋯". Sized to stay a comfortable target in a dense table — at the old padding it
   came out 32×24, which is a small thing to hit accurately on every row of a long list. */
.lic-menu-btn {
    line-height: 1;
    padding: 0.4rem 0.65rem;
}

.lic-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

/* Fixed, not absolute, and deliberately so: .lic-table-card sets overflow-x, which per spec makes
   overflow-y compute to auto as well, so an absolutely-positioned menu is clipped on the last rows
   of any table — which used to hide "Void…" entirely. A fixed element escapes the scroll container.

   The anchor comes from the click itself (MouseEventArgs.ClientX/Y written into these custom
   properties), so no JS interop is needed. clamp() keeps the panel on screen near any edge. */
.lic-menu {
    position: fixed;
    top: min(var(--sip-menu-y, 0px), calc(100vh - 16rem));
    left: clamp(0.5rem, calc(var(--sip-menu-x, 0px) - 15rem + 1rem), calc(100vw - 15.5rem));
    width: 15rem;
    z-index: 1041;
    min-width: 220px;
    max-height: 15rem;
    overflow-y: auto;
    background-color: var(--sip-card);
    border: 1px solid var(--sip-hairline);
    border-radius: var(--sip-radius-sm);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
}

/* Opened from the keyboard, where the click carries no coordinates to anchor to. Centred rather
   than pinned to the top-left corner, which is where (0,0) would otherwise put it. */
.lic-menu-centred {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.lic-menu-item {
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--sip-text);
    text-align: left;
    font-size: 0.88rem;
    padding: 0.45rem 0.7rem;
    cursor: pointer;
    white-space: nowrap;
}

    .lic-menu-item:hover {
        background-color: rgba(255, 255, 255, 0.06);
    }

.lic-menu-danger {
    color: var(--sip-danger);
}

    .lic-menu-danger:hover {
        background-color: rgba(255, 90, 82, 0.12);
    }

/* ---------- dialogs ---------- */

.dlg-field {
    margin-bottom: 1rem;
}

    .dlg-field > label {
        display: block;
        margin-bottom: 0.35rem;
        font-size: 0.85rem;
    }

.dlg-hint {
    color: var(--sip-muted);
    font-size: 0.8rem;
    margin: 0.35rem 0 0;
}

.dlg-error {
    color: var(--sip-danger);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.dlg-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.dlg-footnote {
    color: var(--sip-muted);
    font-size: 0.78rem;
    text-align: right;
    margin: 0.75rem 0 0;
}

/* Paid/Trial segmented toggle. */
.kind-toggle {
    display: inline-flex;
    border: 1px solid var(--sip-hairline);
    border-radius: var(--sip-radius-sm);
    overflow: hidden;
}

    .kind-toggle button {
        background-color: var(--sip-surface);
        border: none;
        color: var(--sip-text-2);
        font-weight: 600;
        font-size: 0.88rem;
        padding: 0.45rem 1.4rem;
        cursor: pointer;
    }

        .kind-toggle button + button {
            border-left: 1px solid var(--sip-hairline);
        }

        .kind-toggle button.active {
            background-color: rgba(242, 178, 51, 0.15);
            color: var(--sip-amber);
        }

        .kind-toggle button:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

    /* Four term options need tighter padding than the two-way kind toggle. */
    .kind-toggle.term-toggle button {
        padding: 0.45rem 1rem;
    }

/* Live "will be valid until…" line under the term/kind pickers. */
.lic-computed {
    color: var(--sip-text-2);
    font-size: 0.875rem;
    margin: 0.25rem 0 1rem;
}

/* Device-code input + issued-code display (direct licence dialog). */
.lic-code-input {
    font-family: var(--sip-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lic-issued-code {
    font-size: 1.7rem;
    letter-spacing: 0.1em;
    text-align: center;
    background-color: var(--sip-surface);
    border: 1px solid var(--sip-hairline);
    border-radius: var(--sip-radius-sm);
    padding: 1rem;
    margin: 0.75rem 0;
    user-select: all;
}

.lic-issued-actions {
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.lic-issued-expiry {
    text-align: center;
}

.lic-email-row {
    display: flex;
    gap: 0.5rem;
}

    .lic-email-row .form-control {
        flex: 1;
    }

/* ---------- template plumbing (kept from the scaffold, recoloured) ---------- */

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: var(--sip-radius-sm);
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }

/* ---------- commerce documents (quotations, invoices) ---------- */

.doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.doc-party {
    color: var(--sip-text-2);
    line-height: 1.65;
    margin-bottom: 0;
}

    .doc-party strong {
        color: var(--sip-text);
    }

.doc-number {
    font-family: var(--sip-mono);
    font-size: 0.88rem;
    white-space: nowrap;
}

.doc-num {
    text-align: right;
    white-space: nowrap;
}

.doc-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.doc-lines tfoot td {
    border-top: 1px solid var(--sip-hairline);
    color: var(--sip-text-2);
}

.doc-total-row td {
    color: var(--sip-text);
    font-size: 1.05rem;
    font-weight: 700;
}

.doc-footnote {
    color: var(--sip-muted);
    font-size: 0.8rem;
    margin: 0.6rem 0 0;
}

/* A missing PO number is the usual reason an invoice sits unpaid — say so, quietly. */
.doc-missing {
    color: var(--sip-amber);
    font-size: 0.85rem;
}

.doc-days {
    color: var(--sip-muted);
    font-size: 0.78rem;
    margin-left: 0.4rem;
}

.doc-row-actions {
    text-align: end;
    white-space: nowrap;
}

.doc-pay {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
}

    .doc-pay dt {
        color: var(--sip-muted);
        font-size: 0.85rem;
        font-weight: 400;
    }

    .doc-pay dd {
        margin: 0;
        font-family: var(--sip-mono);
        font-size: 0.9rem;
    }

/* ---------- operator dashboard ---------- */

.adm-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.adm-stat {
    background-color: var(--sip-card);
    border: 1px solid var(--sip-hairline);
    border-radius: var(--sip-radius);
    padding: 1rem 1.1rem;
}

.adm-stat-primary {
    border-color: rgba(242, 178, 51, 0.45);
}

.adm-stat-label {
    color: var(--sip-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.adm-stat-value {
    font-size: 1.65rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin: 0.25rem 0 0.15rem;
}

.adm-stat-primary .adm-stat-value {
    color: var(--sip-amber);
}

.adm-stat-note {
    color: var(--sip-text-2);
    font-size: 0.8rem;
}

.adm-stat-warn {
    color: var(--sip-danger);
}

.adm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

/* "See all" beside a panel heading, for cards that show a capped slice of a longer list. */
.adm-card-link {
    float: right;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

    .adm-grid .sip-card {
        overflow-x: auto;
    }

    .adm-grid h2 {
        font-size: 1.05rem;
        margin-bottom: 0.75rem;
    }

.adm-filters {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.adm-activity {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
}

    .adm-activity li {
        display: flex;
        gap: 0.75rem;
        padding: 0.4rem 0;
        border-bottom: 1px solid var(--sip-hairline);
        flex-wrap: wrap;
    }

    .adm-activity li:last-child {
        border-bottom: none;
    }

.adm-activity-when {
    color: var(--sip-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.adm-activity-action {
    color: var(--sip-amber);
    font-family: var(--sip-mono);
    font-size: 0.78rem;
    white-space: nowrap;
}

.adm-activity-detail {
    color: var(--sip-text-2);
    flex: 1;
    min-width: 200px;
}

.adm-users {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .adm-users li {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
        padding: 0.35rem 0;
    }

/* ---------- licence handouts ---------- */

.lic-capacity-trial {
    color: var(--sip-muted);
}

.lic-recipient-name {
    color: var(--sip-muted);
    font-size: 0.8rem;
    margin-left: 0.4rem;
}

.lic-remaining {
    color: var(--sip-amber);
    font-size: 0.78rem;
    margin-left: 0.4rem;
}

.lic-quote-total {
    background-color: var(--sip-surface);
    border: 1px solid var(--sip-hairline);
    border-radius: var(--sip-radius-sm);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

.lic-quote-line {
    color: var(--sip-text-2);
    font-size: 0.85rem;
}

.lic-quote-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sip-amber);
    font-variant-numeric: tabular-nums;
    margin: 0.2rem 0;
}

.lic-quote-note {
    color: var(--sip-muted);
    font-size: 0.78rem;
}

/* Three-across address fields inside a dialog; stacks on narrow screens. */
.dlg-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.6rem;
}

    .dlg-row label {
        display: block;
        margin-bottom: 0.35rem;
        font-size: 0.85rem;
    }

/* ---------- account pages ---------- */

.sip-auth-wide .sip-auth-card {
    max-width: 34rem;
}

.sip-auth-blurb {
    color: var(--sip-text-2);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

/* ---------- role chooser ---------- */

.sip-role-choices {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0.5rem 0 0.25rem;
}

.sip-role {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid var(--sip-hairline);
    border-radius: var(--sip-radius-sm);
    background-color: rgba(255, 255, 255, 0.02);
    color: var(--sip-text);
    text-decoration: none;
    transition: border-color 120ms ease, background-color 120ms ease;
}

    .sip-role:hover {
        border-color: var(--sip-amber);
        background-color: rgba(242, 178, 51, 0.06);
        color: var(--sip-text);
    }

    .sip-role:focus-visible {
        outline: 2px solid var(--sip-amber);
        outline-offset: 2px;
    }

.sip-role-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background-color: rgba(242, 178, 51, 0.12);
    color: var(--sip-amber);
}

    .sip-role-icon svg {
        width: 19px;
        height: 19px;
    }

.sip-role-title {
    font-weight: 600;
    font-size: 1rem;
}

.sip-role-chevron {
    margin-left: auto;
    color: var(--sip-muted);
    display: grid;
    place-items: center;
}

    .sip-role-chevron svg {
        width: 14px;
        height: 14px;
    }

.reg-section {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--sip-muted);
    margin: 1.5rem 0 0.75rem;
}

/* Read-only label/value pairs: the facts a confirm dialog states before you commit to an action,
   and the same details shown to someone who may look but not edit. */
.dlg-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem 1rem;
    margin: 0.75rem 0 1rem;
    font-size: 0.9rem;
}

    .dlg-facts dt {
        color: var(--sip-muted);
        font-weight: 500;
    }

    .dlg-facts dd {
        margin: 0;
        overflow-wrap: anywhere;
    }

/* A form laid out on a page rather than inside a dialog — same fields, more room. */
.lic-form-card {
    max-width: 46rem;
    padding: 1.25rem 1.5rem;
}

/* Explains a field whose purpose is not obvious from its label — the unit/area one. */
.reg-hint {
    color: var(--sip-muted);
    font-size: 0.83rem;
    margin: -0.35rem 0 1rem;
}

.reg-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 0.6rem;
}

@media (max-width: 480px) {
    .reg-row {
        grid-template-columns: 1fr;
    }
}

.sip-captcha {
    margin: 1.25rem 0;
}

.sip-captcha-image {
    display: block;
    width: 220px;
    max-width: 100%;
    height: auto;
    border-radius: var(--sip-radius-sm);
    border: 1px solid var(--sip-hairline);
    /* The PNG is dark-on-white; invert it so it belongs in the dark auth card. */
    filter: invert(1) hue-rotate(180deg);
    margin-bottom: 0.6rem;
}

.sip-captcha-hint {
    color: var(--sip-muted);
    font-size: 0.78rem;
    margin: 0.4rem 0 0;
}

.sip-code-input {
    font-family: var(--sip-mono);
    font-size: 1.3rem;
    letter-spacing: 0.35em;
    text-align: center;
}

/* Operator group heading in the sidebar. */
.nav-section {
    color: var(--sip-muted);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    padding: 1rem 1.5rem 0.35rem;
}

/* ---------- operator search ---------- */

.nav-search {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0.15rem 0 0.5rem;
}

.nav-search-icon {
    position: absolute;
    left: 0.6rem;
    width: 15px;
    height: 15px;
    color: var(--sip-muted);
    pointer-events: none;
}

.nav-search-input {
    width: 100%;
    padding: 0.4rem 0.6rem 0.4rem 1.9rem;
    font-size: 0.86rem;
    color: var(--sip-text);
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--sip-hairline);
    border-radius: var(--sip-radius-sm);
}

    .nav-search-input::placeholder {
        color: var(--sip-muted);
    }

    .nav-search-input:focus {
        outline: 2px solid var(--sip-amber);
        outline-offset: 1px;
        background-color: rgba(255, 255, 255, 0.08);
    }

/* ---------- bulk import ---------- */

.lic-csv-help {
    border: 1px solid var(--sip-hairline);
    border-radius: var(--sip-radius-sm);
    padding: 0.75rem 0.9rem;
    background-color: rgba(255, 255, 255, 0.02);
}

.lic-csv-sample {
    margin: 0 0 0.6rem;
    padding: 0.6rem 0.75rem;
    background-color: rgba(0, 0, 0, 0.35);
    border-radius: var(--sip-radius-sm);
    color: var(--sip-text);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    overflow-x: auto;
}

.lic-csv-rules {
    margin: 0 0 0.7rem;
    padding-left: 1.1rem;
    color: var(--sip-muted);
    font-size: 0.85rem;
    line-height: 1.65;
}

.lic-csv-input {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.82rem;
}

.lic-csv-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.25rem 0 0.75rem;
}

.lic-csv-stat {
    flex: 1 1 8rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--sip-hairline);
    border-radius: var(--sip-radius-sm);
    color: var(--sip-muted);
    font-size: 0.82rem;
}

.lic-csv-ok {
    border-color: var(--sip-success);
    color: var(--sip-text);
}

.lic-csv-bad {
    border-color: var(--sip-danger);
    color: var(--sip-text);
}

/* Capped so a file with 400 bad rows cannot make the dialog itself the problem. */
.lic-csv-problems {
    max-height: 16rem;
    overflow: auto;
    border: 1px solid var(--sip-hairline);
    border-radius: var(--sip-radius-sm);
    padding: 0 0.6rem;
}

.lic-csv-problem {
    color: var(--sip-danger);
    font-size: 0.83rem;
}

.lic-seat-filters {
    margin-top: 0.35rem;
}

/* "Nobody yet" reads as a state; an em dash reads as missing data. */
.lic-unassigned {
    color: var(--sip-muted);
    font-style: italic;
}

/* ---------- list toolbar / pager / empty ---------- */

.sip-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.sip-toolbar-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 15rem;
    max-width: 22rem;
}

.sip-toolbar-icon {
    position: absolute;
    left: 0.65rem;
    width: 15px;
    height: 15px;
    color: var(--sip-muted);
    pointer-events: none;
}

.sip-toolbar-input {
    padding-left: 2rem;
}

.sip-toolbar-filters {
    margin-bottom: 0;
}

.sip-toolbar-count {
    margin-left: auto;
    color: var(--sip-muted);
    font-size: 0.83rem;
    white-space: nowrap;
}

.sip-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 0.85rem 0 0.25rem;
}

.sip-pager-position {
    color: var(--sip-muted);
    font-size: 0.85rem;
}

.sip-empty-clear {
    margin-left: 0.6rem;
}

.adm-search-card {
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

.adm-search-input {
    font-size: 1rem;
}

.adm-search-results {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .adm-search-results li + li {
        border-top: 1px solid var(--sip-hairline);
    }

    .adm-search-results a {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        padding: 0.6rem 0.35rem;
        text-decoration: none;
        border-radius: var(--sip-radius-sm);
    }

        .adm-search-results a:hover {
            background-color: rgba(255, 255, 255, 0.04);
        }

.adm-search-title {
    color: var(--sip-text);
    font-weight: 600;
}

.adm-search-subtitle {
    color: var(--sip-muted);
    font-size: 0.83rem;
    overflow-wrap: anywhere;
}

/* ---------- billing settings ---------- */

.set-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    align-items: start;
    margin-bottom: 1.25rem;
}

/* The pricing table needs the full width whatever the grid does around it. */
.set-wide {
    grid-column: 1 / -1;
}

.set-note {
    color: var(--sip-muted);
    font-size: 0.82rem;
    margin: 0 0 1rem;
}

.set-short {
    max-width: 10rem;
}

/* A dropdown has to be wide enough for its longest option. Squeezed into the line editor's column
   inside a 480px dialog this came out 37px, which cannot show "5 years" — the control looked like
   a stub and the chosen term was unreadable. */
select.set-short {
    min-width: 6.5rem;
}

/* The line editor's five columns do not fit a dialog at every width. Scroll them rather than
   letting the table push out of the modal, where there is nowhere for the excess to go. */
.doc-line-scroll {
    overflow-x: auto;
    margin-bottom: 0.5rem;
}

.set-price {
    max-width: 9rem;
    margin-left: auto;
    text-align: right;
}

.set-brackets td {
    vertical-align: middle;
}

.set-range {
    color: var(--sip-text-2);
    font-size: 0.85rem;
    white-space: nowrap;
}

.set-preview {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--sip-hairline);
}

    .set-preview h3 {
        font-size: 0.95rem;
        margin-bottom: 0.75rem;
    }

.set-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-bottom: 2rem;
}

/* The plan cards in the agency's quote dialog (once volume brackets, hence the names). */
.lic-brackets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.lic-bracket {
    flex: 1 1 8rem;
    background-color: var(--sip-surface);
    border: 1px solid var(--sip-hairline);
    border-radius: var(--sip-radius-sm);
    padding: 0.55rem 0.7rem;
    text-align: center;
}

/* The bracket this order actually lands in. */
.lic-bracket-active {
    border-color: var(--sip-amber);
    background-color: rgba(242, 178, 51, 0.12);
}

.lic-bracket-range {
    display: block;
    font-size: 0.75rem;
    color: var(--sip-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lic-bracket-price {
    display: block;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lic-bracket-active .lic-bracket-price {
    color: var(--sip-amber);
}

.lic-bracket-unit {
    display: block;
    font-size: 0.7rem;
    color: var(--sip-muted);
}

/* As a picker: a card is a button, so it needs the page's type and a visible keyboard focus. */
button.lic-bracket {
    color: inherit;
    font: inherit;
    cursor: pointer;
}

    button.lic-bracket:focus-visible {
        outline: 2px solid var(--sip-amber);
        outline-offset: 2px;
    }

.lic-bracket-devices {
    display: block;
    font-size: 0.8rem;
    color: var(--sip-text-2);
    margin: 0.1rem 0 0.25rem;
}