/* ============================================================================
   SIP components — the building blocks both shells share: type, links, buttons,
   fields, alerts, cards, the page header, stats, segmented filters, chips, data
   tables, the list toolbar and pager, empty states, skeletons, toasts, the
   action menu, tabs, the combobox, code boxes and the setup checklist.

   Built on tokens.css. Loaded after Bootstrap and before app.css (the older
   page-level rules) and focus.css (the focused shell), so a page rule can still
   refine a component.

   The older page-prefixed class names (lic-, adm-, doc-, set-, dash-head,
   users-head) are ALIASES here: they share the rule of the component they were
   copies of, so existing pages pick up the new look today and can move to the
   component class (or the Razor component) when their owner next touches them.
   ========================================================================== */

/* ---------- base ---------- */

html {
    -webkit-text-size-adjust: 100%;
}

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

body {
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--sip-text);
    font-weight: 600;
    line-height: var(--leading-tight);
    letter-spacing: -0.005em;
    text-wrap: balance;
}

h1 { font-size: var(--text-2xl); letter-spacing: -0.01em; }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }
h4, h5, h6 { font-size: var(--text-md); }

@media (max-width: 640px) {
    h1 { font-size: 1.5rem; }
}

/* FocusOnNavigate puts focus on the page's h1 after a navigation, and the skip link on main: both
   are announcements, not controls, so they show no ring. */
h1:focus,
h1:focus-visible,
main:focus,
main:focus-visible {
    outline: none;
    box-shadow: none;
}

p {
    text-wrap: pretty;
}

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

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

code {
    color: var(--sip-text);
}

::selection {
    background: rgba(var(--sip-text-rgb), 0.28);
    color: var(--sip-text);
}

/* One focus treatment everywhere: keyboard focus only, a 2px ring in the text colour with a 2px gap
   of whatever the control sits on. Never the old amber glow on a mouse click. */
:focus-visible {
    outline: 2px solid var(--sip-text);
    outline-offset: 2px;
}

/* ---------- links ----------
   Links read as text with an underline, as in the focused shell: amber is kept for the one primary
   action. Components (buttons, cards, nav) style their own links. */

a {
    color: var(--sip-text);
    text-decoration: underline;
    text-decoration-color: var(--sip-muted);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

    a:hover {
        color: var(--sip-text);
        text-decoration-color: var(--sip-text);
    }

.btn-link {
    color: var(--sip-text-2);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--sip-line-strong);
    text-underline-offset: 3px;
}

    .btn-link:hover,
    .btn-link:focus-visible {
        color: var(--sip-text);
        text-decoration-color: var(--sip-text);
    }

/* ---------- text helpers ---------- */

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

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

.sip-hint,
.form-text {
    color: var(--sip-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

/* A visually hidden label that a keyboard user can still reach (the skip link uses it). */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---------- buttons ----------
   Bootstrap's button variables, set per variant, so its states (hover, active, disabled) follow. */

.btn {
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0;
    --bs-btn-font-family: var(--sip-font);
    --bs-btn-font-size: var(--text-sm);
    --bs-btn-font-weight: 600;
    --bs-btn-line-height: 1.2;
    --bs-btn-border-radius: 10px;
    --bs-btn-focus-box-shadow: none;
    --bs-btn-disabled-opacity: 0.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--control-h);
    text-align: center;
    white-space: normal;
    transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

    .btn:focus-visible {
        outline: 2px solid var(--sip-text);
        outline-offset: 2px;
        box-shadow: none;
    }

    .btn svg {
        width: 1.1em;
        height: 1.1em;
        flex: none;
    }

.btn-sm {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-font-size: var(--text-sm);
    --bs-btn-border-radius: 8px;
    min-height: var(--control-h-sm);
}

.btn-lg {
    --bs-btn-padding-x: 1.4rem;
    --bs-btn-font-size: var(--text-md);
    --bs-btn-border-radius: var(--radius-md);
    min-height: 52px;
}

/* The one primary action on a screen. */
.btn-primary {
    --bs-btn-color: var(--sip-on-amber);
    --bs-btn-bg: var(--sip-amber);
    --bs-btn-border-color: var(--sip-amber);
    --bs-btn-hover-color: var(--sip-on-amber);
    --bs-btn-hover-bg: var(--sip-amber-hover);
    --bs-btn-hover-border-color: var(--sip-amber-hover);
    --bs-btn-active-color: var(--sip-on-amber);
    --bs-btn-active-bg: var(--sip-amber-hover);
    --bs-btn-active-border-color: var(--sip-amber-hover);
    --bs-btn-disabled-color: var(--sip-on-amber);
    --bs-btn-disabled-bg: var(--sip-amber);
    --bs-btn-disabled-border-color: var(--sip-amber);
}

/* Every other action: neutral, so the primary stays the only colour on the screen. */
.btn-secondary,
.btn-outline-secondary,
.btn-outline-primary,
.btn-light,
.btn-outline-light,
.btn-dark,
.btn-outline-dark,
.btn-quiet {
    --bs-btn-color: var(--sip-text);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--sip-line-strong);
    --bs-btn-hover-color: var(--sip-text);
    --bs-btn-hover-bg: var(--sip-raise);
    --bs-btn-hover-border-color: var(--sip-muted-decor);
    --bs-btn-active-color: var(--sip-text);
    --bs-btn-active-bg: var(--sip-raise);
    --bs-btn-active-border-color: var(--sip-muted-decor);
    --bs-btn-disabled-color: var(--sip-text-2);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--sip-hairline);
}

.btn-secondary {
    --bs-btn-bg: var(--sip-card);
}

/* No border at all: toolbar icons, "Cancel" beside a filled button, the row "⋯". */
.btn-quiet {
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-color: var(--sip-text-2);
}

/* A destructive confirm, labelled with its verb ("Revoke access"). Filled #D63A33: white is 4.6:1. */
.btn-danger {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--sip-danger-strong);
    --bs-btn-border-color: var(--sip-danger-strong);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #C2302A;
    --bs-btn-hover-border-color: #C2302A;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #B02B26;
    --bs-btn-active-border-color: #B02B26;
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--sip-danger-strong);
    --bs-btn-disabled-border-color: var(--sip-danger-strong);
}

.btn-outline-danger {
    --bs-btn-color: var(--sip-danger);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(var(--sip-danger-rgb), 0.5);
    --bs-btn-hover-color: var(--sip-danger-text);
    --bs-btn-hover-bg: rgba(var(--sip-danger-rgb), 0.12);
    --bs-btn-hover-border-color: var(--sip-danger);
    --bs-btn-active-color: var(--sip-danger-text);
    --bs-btn-active-bg: rgba(var(--sip-danger-rgb), 0.18);
    --bs-btn-active-border-color: var(--sip-danger);
    --bs-btn-disabled-color: var(--sip-danger);
    --bs-btn-disabled-border-color: rgba(var(--sip-danger-rgb), 0.3);
}

.btn-success,
.btn-info,
.btn-warning,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning {
    --bs-btn-color: var(--sip-text);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--sip-line-strong);
    --bs-btn-hover-color: var(--sip-text);
    --bs-btn-hover-bg: var(--sip-raise);
    --bs-btn-hover-border-color: var(--sip-muted-decor);
}

/* A square button holding only an icon (the close ×, the menu, "⋯"). Give it an aria-label. */
.btn-icon {
    --bs-btn-padding-x: 0;
    width: var(--control-h);
    min-width: var(--control-h);
    padding: 0;
}

    .btn-icon.btn-sm {
        width: var(--control-h-sm);
        min-width: var(--control-h-sm);
    }

.btn-link {
    --bs-btn-color: var(--sip-text-2);
    --bs-btn-hover-color: var(--sip-text);
    --bs-btn-active-color: var(--sip-text);
    --bs-btn-disabled-color: var(--sip-muted);
}

/* A button that reads as a link, for "Send a new code" and similar quiet actions inside a form. */
.sip-link-button {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    color: var(--sip-text);
    font: inherit;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--sip-muted);
    text-underline-offset: 3px;
    cursor: pointer;
}

    .sip-link-button:hover {
        text-decoration-color: var(--sip-text);
    }

    .sip-link-button:disabled {
        color: var(--sip-muted);
        text-decoration: none;
        cursor: default;
    }

/* ---------- fields ---------- */

.form-label,
.field > label,
.dlg-field > label,
.dlg-row label {
    display: block;
    color: var(--sip-text);
    font-size: var(--text-sm);
    font-weight: 500;
    margin-bottom: 0.4rem;
}

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

.field,
.dlg-field {
    margin-bottom: var(--space-4);
}

.field-hint,
.dlg-hint,
.reg-hint {
    color: var(--sip-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    margin: 0.4rem 0 0;
}

.reg-hint {
    margin: -0.35rem 0 1rem;
}

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

.form-control,
.form-select {
    min-height: var(--control-h);
    padding: 0.5rem 0.85rem;
    background-color: var(--sip-input);
    border: 1px solid var(--sip-control-line);
    border-radius: 10px;
    color: var(--sip-text);
    font-family: var(--sip-font);
    font-size: var(--text-md); /* 16px: phones do not zoom into the field */
    line-height: 1.4;
    transition: border-color var(--dur-fast) ease;
}

textarea.form-control {
    min-height: calc(var(--control-h) * 2);
}

.form-control-sm,
.form-select-sm {
    min-height: var(--control-h-sm);
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    font-size: var(--text-sm);
}

@media (pointer: coarse) {
    .form-control-sm,
    .form-select-sm {
        font-size: var(--text-md);
    }
}

    .form-control:hover:not(:disabled):not([readonly]),
    .form-select:hover:not(:disabled) {
        border-color: var(--sip-muted);
    }

    .form-control:focus,
    .form-select:focus {
        background-color: var(--sip-input);
        border-color: var(--sip-text-2);
        color: var(--sip-text);
        box-shadow: none;
    }

    .form-control:focus-visible,
    .form-select:focus-visible {
        outline: 2px solid var(--sip-text);
        outline-offset: 1px;
    }

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

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

/* Every select shows its chevron, including the ones written with class="form-control". */
.form-select,
select.form-control {
    appearance: none;
    padding-right: 2.4rem;
    background-image: var(--bs-form-select-bg-img);
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 14px 14px;
}

    select.form-control[multiple],
    select.form-control[size]:not([size="1"]),
    .form-select[multiple],
    .form-select[size]:not([size="1"]) {
        padding-right: 0.85rem;
        background-image: none;
    }

select option {
    background-color: var(--sip-card);
    color: var(--sip-text);
}

/* The file picker's button: a dark, labelled button rather than the light system one. */
.form-control[type="file"] {
    padding: 0;
    overflow: hidden;
    line-height: calc(var(--control-h) - 2px);
}

    .form-control[type="file"]::file-selector-button {
        height: calc(var(--control-h) - 2px);
        margin: 0 0.85rem 0 0;
        padding: 0 1rem;
        border: 0;
        border-right: 1px solid var(--sip-control-line);
        border-radius: 0;
        background-color: var(--sip-raise);
        color: var(--sip-text);
        font-weight: 600;
        font-size: var(--text-sm);
    }

    .form-control[type="file"]:hover:not(:disabled):not([readonly])::file-selector-button {
        background-color: #2E3036;
    }

input[type="file"]:not(.form-control)::file-selector-button {
    min-height: var(--control-h-sm);
    margin-right: 0.75rem;
    padding: 0 1rem;
    border: 1px solid var(--sip-line-strong);
    border-radius: 8px;
    background-color: var(--sip-raise);
    color: var(--sip-text);
    font: inherit;
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
}

.input-group-text {
    background-color: var(--sip-card);
    border-color: var(--sip-control-line);
    color: var(--sip-text-2);
}

/* Checkboxes, radios and switches: selection is neutral (white), never blue or amber. */
.form-check-input {
    --bs-form-check-bg: var(--sip-input);
    border-color: var(--sip-control-line);
}

    .form-check-input:focus {
        border-color: var(--sip-text-2);
        box-shadow: none;
    }

    .form-check-input:focus-visible {
        outline: 2px solid var(--sip-text);
        outline-offset: 2px;
    }

    .form-check-input:checked,
    .form-check-input[type="checkbox"]:indeterminate {
        background-color: var(--sip-text);
        border-color: var(--sip-text);
    }

    .form-check-input:checked[type="checkbox"] {
        --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230C0D0F' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    }

    .form-check-input:checked[type="radio"] {
        --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230C0D0F'/%3e%3c/svg%3e");
    }

    .form-check-input[type="checkbox"]:indeterminate {
        --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230C0D0F' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
    }

.form-switch .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238A8E95'/%3e%3c/svg%3e");
}

    .form-switch .form-check-input:focus {
        --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23B4B7BC'/%3e%3c/svg%3e");
    }

    .form-switch .form-check-input:checked {
        --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230C0D0F'/%3e%3c/svg%3e");
    }

.form-range::-webkit-slider-thumb { background-color: var(--sip-text); }
.form-range::-moz-range-thumb { background-color: var(--sip-text); }
.form-range::-webkit-slider-runnable-track { background-color: var(--sip-hairline); }
.form-range::-moz-range-track { background-color: var(--sip-hairline); }
.form-range:focus::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
.form-range:focus::-moz-range-thumb { box-shadow: var(--focus-ring); }

/* Bootstrap's own focus treatments that hard-code its blue. */
.nav-link:focus-visible,
.page-link:focus,
.btn-close:focus,
.accordion-button:focus {
    box-shadow: none;
    outline: 2px solid var(--sip-text);
    outline-offset: 2px;
}

.accordion {
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-active-color: var(--sip-text);
    --bs-accordion-active-bg: var(--sip-raise);
    --bs-accordion-bg: var(--sip-card);
    --bs-accordion-border-color: var(--sip-hairline);
}

/* ---------- validation (Blazor's classes) ---------- */

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

.form-control.invalid,
.form-select.invalid {
    border-color: var(--sip-danger);
}

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

.validation-message {
    color: var(--sip-danger);
    font-size: var(--text-sm);
    margin-top: 0.35rem;
}

/* ---------- alerts ---------- */

.alert {
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: 0.85rem;
    --bs-alert-border-radius: 10px;
    --bs-alert-color: var(--sip-text-2);
    --bs-alert-bg: rgba(var(--sip-text-rgb), 0.04);
    --bs-alert-border-color: var(--sip-line-strong);
    --bs-alert-link-color: var(--sip-text);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

    .alert a,
    .alert .alert-link {
        color: inherit;
        font-weight: 600;
        text-decoration: underline;
        text-decoration-color: currentColor;
    }

.alert-danger {
    --bs-alert-color: var(--sip-danger-text);
    --bs-alert-bg: rgba(var(--sip-danger-rgb), 0.1);
    --bs-alert-border-color: rgba(var(--sip-danger-rgb), 0.38);
}

.alert-warning {
    --bs-alert-color: var(--sip-warning-text);
    --bs-alert-bg: rgba(var(--sip-warning-rgb), 0.1);
    --bs-alert-border-color: rgba(var(--sip-warning-rgb), 0.38);
}

.alert-success {
    --bs-alert-color: var(--sip-success-text);
    --bs-alert-bg: rgba(var(--sip-success-rgb), 0.1);
    --bs-alert-border-color: rgba(var(--sip-success-rgb), 0.38);
}

.alert-info,
.alert-primary {
    --bs-alert-color: var(--sip-info-text);
    --bs-alert-bg: rgba(var(--sip-info-rgb), 0.1);
    --bs-alert-border-color: rgba(var(--sip-info-rgb), 0.38);
}

.alert-secondary,
.alert-light,
.alert-dark {
    --bs-alert-color: var(--sip-text-2);
    --bs-alert-bg: rgba(var(--sip-text-rgb), 0.04);
    --bs-alert-border-color: var(--sip-line-strong);
}

/* ---------- cards and panels ---------- */

.sip-card {
    background-color: var(--sip-card);
    border: 1px solid var(--sip-hairline);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    min-width: 0;
}

    .sip-card > h2:first-child,
    .sip-card > header:first-child h2 {
        margin-top: 0;
    }

@media (max-width: 640px) {
    .sip-card {
        padding: var(--space-4);
        border-radius: var(--radius-md);
    }
}

/* A panel (Licensing/People/Commerce/Activity) is a section that holds its own toolbar and list. */
.sip-panel {
    min-width: 0;
    margin-bottom: var(--space-5);
}

.sip-section-title {
    font-size: var(--text-lg);
    margin: 0 0 var(--space-3);
}

/* Read-only label/value pairs. */
.sip-facts,
.dlg-facts {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    gap: 0.4rem 1rem;
    margin: 0.75rem 0 1rem;
    font-size: var(--text-sm);
}

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

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

/* ---------- page header ---------- */

.sip-page-header,
.lic-head,
.dash-head,
.users-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
}

    .sip-page-header h1,
    .lic-head h1,
    .dash-head h1,
    .users-head h1 {
        margin: 0;
    }

.sip-page-header-text {
    flex: 1 1 18rem;
    min-width: 0;
}

    .sip-page-header-text h1 {
        overflow-wrap: anywhere;
    }

.sip-page-header-sub {
    margin: 0.4rem 0 0;
    color: var(--sip-text-2);
    max-width: 70ch;
}

.sip-page-header-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
    margin-top: 0.6rem;
}

.sip-page-header-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
    color: var(--sip-text-2);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
}

    .sip-page-header-back:hover {
        color: var(--sip-text);
        text-decoration: underline;
    }

    .sip-page-header-back svg {
        width: 16px;
        height: 16px;
    }

.sip-page-header-actions,
.lic-actions,
.dash-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

@media (max-width: 640px) {
    .sip-page-header {
        align-items: stretch;
    }

    .sip-page-header-actions {
        width: 100%;
    }

        .sip-page-header-actions > .btn-primary,
        .sip-page-header-actions > a.btn-primary {
            flex: 1 1 auto;
        }
}

/* ---------- breadcrumbs (the top bar's title slot) ---------- */

.sip-crumbs {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    color: var(--sip-text-2);
}

    .sip-crumbs li {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        min-width: 0;
    }

        .sip-crumbs li + li::before {
            content: "/";
            color: var(--sip-muted-decor);
        }

    .sip-crumbs a {
        color: var(--sip-text-2);
        text-decoration: none;
        white-space: nowrap;
    }

        .sip-crumbs a:hover {
            color: var(--sip-text);
            text-decoration: underline;
        }

    .sip-crumbs [aria-current="page"] {
        color: var(--sip-text);
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* ---------- stats ---------- */

.sip-stats,
.adm-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

@media (max-width: 480px) {
    .sip-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.sip-stat,
.adm-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    padding: 1rem 1.1rem;
    background-color: var(--sip-card);
    border: 1px solid var(--sip-hairline);
    border-radius: var(--radius-lg);
    color: var(--sip-text);
    text-decoration: none;
}

a.sip-stat {
    padding-right: 2.25rem;
    transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

    a.sip-stat:hover {
        background-color: var(--sip-raise);
        border-color: var(--sip-line-strong);
        color: var(--sip-text);
    }

.sip-stat-go {
    position: absolute;
    top: 1rem;
    right: 0.9rem;
    width: 16px;
    height: 16px;
    color: var(--sip-muted-decor);
    transition: transform var(--dur-fast) ease, color var(--dur-fast) ease;
}

a.sip-stat:hover .sip-stat-go {
    color: var(--sip-text-2);
    transform: translateX(2px);
}

.sip-stat-label,
.adm-stat-label,
.stat-label {
    color: var(--sip-text-2);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.sip-stat-value,
.adm-stat-value {
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.sip-stat-hint,
.adm-stat-note {
    color: var(--sip-muted);
    font-size: var(--text-sm);
}

.sip-stat-info .sip-stat-value { color: var(--sip-info); }
.sip-stat-success .sip-stat-value { color: var(--sip-success); }
.sip-stat-warning .sip-stat-value { color: var(--sip-warning); }
.sip-stat-danger .sip-stat-value { color: var(--sip-danger); }

/* The older "primary" stat: an emphasised border, not amber (amber is the primary action only). */
.adm-stat-primary,
.stat-card-active {
    border-color: var(--sip-line-strong);
}

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

/* ---------- segmented filters ----------
   Selection is neutral: a lighter fill, never amber. Buttons carry aria-pressed (filters) or
   role="radio" with aria-checked (a choice between kinds). */

.seg,
.kind-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    width: fit-content;
    max-width: 100%;
    padding: 3px;
    border: 1px solid var(--sip-hairline);
    border-radius: 10px;
    background-color: var(--sip-surface);
    overflow: visible;
}

    .seg > button,
    .seg > a,
    .seg-btn,
    .kind-toggle > button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        flex: 1 1 auto;
        min-height: calc(var(--control-h-sm) - 4px);
        padding: 0 0.8rem;
        border: 0;
        border-radius: 7px;
        background: none;
        color: var(--sip-text-2);
        font: inherit;
        font-size: var(--text-sm);
        font-weight: 500;
        line-height: 1.2;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
    }

        .seg > button:hover,
        .seg > a:hover,
        .seg-btn:hover,
        .kind-toggle > button:hover:not(:disabled) {
            background-color: rgba(var(--sip-text-rgb), 0.05);
            color: var(--sip-text);
        }

        .seg > [aria-pressed="true"],
        .seg > [aria-checked="true"],
        .seg > [aria-current="true"],
        .seg > .is-active,
        .seg-btn[aria-pressed="true"],
        .kind-toggle > button.active,
        .kind-toggle > [aria-checked="true"] {
            background-color: rgba(var(--sip-text-rgb), 0.12);
            color: var(--sip-text);
            font-weight: 600;
        }

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

        .kind-toggle > button + button {
            border-left: 0;
        }

.seg-count {
    color: var(--sip-muted);
    font-size: var(--text-xs);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

[aria-pressed="true"] > .seg-count,
[aria-checked="true"] > .seg-count {
    color: var(--sip-text-2);
}

/* The older filter chips (a row of btn-sm, the selected one btn-primary): neutral selection too. */
.adm-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: var(--space-4);
}

    .adm-filters .btn-primary,
    .lic-seat-filters .btn-primary {
        --bs-btn-color: var(--sip-text);
        --bs-btn-bg: rgba(var(--sip-text-rgb), 0.12);
        --bs-btn-border-color: var(--sip-control-line);
        --bs-btn-hover-color: var(--sip-text);
        --bs-btn-hover-bg: rgba(var(--sip-text-rgb), 0.16);
        --bs-btn-hover-border-color: var(--sip-text-2);
        --bs-btn-active-color: var(--sip-text);
        --bs-btn-active-bg: rgba(var(--sip-text-rgb), 0.16);
        --bs-btn-active-border-color: var(--sip-text-2);
    }

/* ---------- chips ----------
   Sentence case, a dot, and one of five tones. No amber: that is the primary action's. */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    padding: 0.12rem 0.6rem 0.12rem 0.5rem;
    border: 1px solid var(--sip-line-strong);
    border-radius: var(--radius-pill);
    background-color: rgba(var(--sip-text-rgb), 0.05);
    color: var(--sip-text-2);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    vertical-align: middle;
}

    .chip::before {
        content: "";
        flex: none;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: var(--sip-muted-decor);
    }

.chip-info {
    border-color: rgba(var(--sip-info-rgb), 0.35);
    background-color: rgba(var(--sip-info-rgb), 0.1);
    color: var(--sip-info-text);
}

    .chip-info::before { background-color: var(--sip-info); }

.chip-success {
    border-color: rgba(var(--sip-success-rgb), 0.35);
    background-color: rgba(var(--sip-success-rgb), 0.1);
    color: var(--sip-success-text);
}

    .chip-success::before { background-color: var(--sip-success); }

.chip-warning {
    border-color: rgba(var(--sip-warning-rgb), 0.35);
    background-color: rgba(var(--sip-warning-rgb), 0.1);
    color: var(--sip-warning-text);
}

    .chip-warning::before { background-color: var(--sip-warning); }

.chip-danger {
    border-color: rgba(var(--sip-danger-rgb), 0.35);
    background-color: rgba(var(--sip-danger-rgb), 0.1);
    color: var(--sip-danger-text);
}

    .chip-danger::before { background-color: var(--sip-danger); }

/* "neutral" is the tone; "muted" and "amber" are the older variant names (Paid and Admin are
   neutral facts now, not amber ones). */
.chip-neutral,
.chip-muted,
.chip-amber {
    border-color: var(--sip-line-strong);
    background-color: rgba(var(--sip-text-rgb), 0.05);
    color: var(--sip-text-2);
}

/* The focused shell's chip, same shape. */
.fx-chip {
    font-size: var(--text-xs);
}

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

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--sip-text);
    --bs-table-border-color: var(--sip-hairline);
    --bs-table-striped-bg: rgba(var(--sip-text-rgb), 0.02);
    --bs-table-striped-color: var(--sip-text);
    --bs-table-hover-bg: rgba(var(--sip-text-rgb), 0.035);
    --bs-table-hover-color: var(--sip-text);
    --bs-table-active-bg: rgba(var(--sip-text-rgb), 0.05);
    --bs-table-active-color: var(--sip-text);
    color: var(--sip-text);
    border-color: var(--sip-hairline);
    margin-bottom: 0;
}

    .table > :not(caption) > * > * {
        padding: 0.7rem 0.75rem;
    }

    .table.table-sm > :not(caption) > * > * {
        padding: 0.45rem 0.6rem;
    }

    .table td {
        vertical-align: middle;
    }

    /* Sentence case, quiet, and never uppercase micro-labels. */
    .table thead th {
        color: var(--sip-text-2);
        font-size: var(--text-sm);
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
        white-space: nowrap;
        border-bottom: 1px solid var(--sip-line-strong);
    }

    .table td a:not([class]) {
        font-weight: 500;
        text-decoration: none;
    }

        .table td a:not([class]):hover {
            text-decoration: underline;
        }

    /* A row that a search result pointed at (?seat=). */
    .table tr.is-highlight > * {
        background-color: rgba(var(--sip-text-rgb), 0.06);
        box-shadow: inset 3px 0 0 var(--sip-text-2);
    }

/* Numbers and money line up on the right in tabular figures. */
.num,
.money,
.doc-num,
.table td.num,
.table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cell-actions,
.lic-actions-cell,
.doc-row-actions,
.users-actions-cell {
    text-align: end;
    white-space: nowrap;
    width: 1%;
}

/* Long names, emails and notes: one line with an ellipsis (put the full text in a title). */
.cell-truncate {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell-wrap,
.lic-email,
.users-email {
    overflow-wrap: anywhere;
}

.cell-sub {
    display: block;
    color: var(--sip-muted);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

/* A card holding a table scrolls it sideways rather than pushing the page wider. The row menus are
   fixed-position, so this cannot clip them. */
.sip-card:has(table),
.lic-table-card,
.users-table-card {
    overflow-x: auto;
}

.lic-table-card,
.users-table-card {
    padding: 0.5rem 1rem;
}

/* A data table: a sticky header on wide screens, and stacked cards on phones, each cell labelled from
   its data-label. Opt in with class="table data-table" and data-label on the cells; mark the cell that
   names the row with .cell-primary (no label, bold, first) and the row menu's cell with .cell-actions
   (top right). */
.data-table thead th {
    position: sticky;
    top: var(--sticky-offset, 0);
    z-index: 1;
    background-color: var(--sip-card);
}

@media (min-width: 1024px) {
    /* A scrolling card would make the header stick to the card, not the window. */
    .sip-card:has(> .data-table),
    .sip-card:has(> form > .data-table) {
        overflow: visible;
    }
}

@media (max-width: 640px) {
    .data-table,
    .data-table > tbody {
        display: block;
        width: 100%;
    }

        .data-table > thead {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
        }

        .data-table > tbody > tr {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            column-gap: 0.75rem;
            row-gap: 0.35rem;
            padding: 0.85rem 0;
            border-bottom: 1px solid var(--sip-hairline);
        }

            .data-table > tbody > tr:last-child {
                border-bottom: 0;
            }

            .data-table > tbody > tr > td {
                display: block;
                grid-column: 1;
                min-width: 0;
                padding: 0 !important;
                border: 0;
                text-align: left;
                white-space: normal;
                overflow-wrap: anywhere;
            }

                .data-table > tbody > tr > td[data-label]::before {
                    content: attr(data-label);
                    display: block;
                    color: var(--sip-muted);
                    font-size: var(--text-xs);
                    font-weight: 500;
                    line-height: 1.4;
                }

                .data-table > tbody > tr > td.cell-primary {
                    font-weight: 600;
                }

                    .data-table > tbody > tr > td.cell-primary::before,
                    .data-table > tbody > tr > td.cell-actions::before {
                        display: none;
                    }

                .data-table > tbody > tr > td.cell-actions {
                    grid-column: 2;
                    grid-row: 1 / span 2;
                    align-self: start;
                    width: auto;
                }

                .data-table > tbody > tr > td:empty {
                    display: none;
                }
}

/* ---------- list toolbar, pager, empty state ---------- */

.sip-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: var(--space-4);
}

.sip-toolbar-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 16rem;
    max-width: 24rem;
    min-width: 0;
}

@media (max-width: 640px) {
    .sip-toolbar-search {
        flex-basis: 100%;
        max-width: none;
    }
}

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

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


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

.sip-toolbar-sort {
    flex: 0 0 auto;
}

    .sip-toolbar-sort .form-select {
        width: auto;
        max-width: 100%;
    }

.sip-toolbar-count {
    margin-left: auto;
    color: var(--sip-muted);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sip-toolbar-searchall {
    flex-basis: 100%;
    margin: -0.25rem 0 0;
    color: var(--sip-text-2);
    font-size: var(--text-sm);
}

.sip-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin: var(--space-4) 0 var(--space-1);
}

.sip-pager-range,
.sip-pager-position {
    color: var(--sip-text-2);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.sip-pager-nav {
    display: flex;
    gap: 0.5rem;
}

.sip-pager-size {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--sip-text-2);
    font-size: var(--text-sm);
}

    .sip-pager-size .form-select {
        width: auto;
    }

.sip-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    max-width: 34rem;
    margin: 0 auto;
    padding: var(--space-6) var(--space-3);
    text-align: center;
}

.sip-empty-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 0.25rem;
    padding: 10px;
    border: 1px solid var(--sip-hairline);
    border-radius: 50%;
    color: var(--sip-text-2);
    background-color: var(--sip-surface);
}

.sip-empty-title {
    margin: 0;
    color: var(--sip-text);
    font-size: var(--text-lg);
    font-weight: 600;
}

.sip-empty-body {
    margin: 0;
    color: var(--sip-text-2);
    line-height: var(--leading-normal);
}

.sip-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.sip-empty-filtered,
.lic-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.9rem;
    margin: 0;
    color: var(--sip-text-2);
}

.sip-empty-clear {
    margin-left: 0;
}

/* ---------- skeleton ---------- */

.sip-skeleton {
    display: grid;
    gap: 0.7rem;
    padding: var(--space-2) 0;
}

    .sip-skeleton.sip-card {
        padding: var(--space-5);
    }

.sip-skeleton-line {
    height: 0.85rem;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--sip-raise) 0%, #2C2F35 45%, var(--sip-raise) 90%);
    background-size: 220% 100%;
    animation: sip-shimmer 1.4s ease-in-out infinite;
}

    .sip-skeleton-line:first-child {
        width: 45%;
        height: 1.1rem;
    }

    .sip-skeleton-line:nth-child(3n + 2) { width: 92%; }
    .sip-skeleton-line:nth-child(3n + 3) { width: 74%; }
    .sip-skeleton-line:nth-child(3n + 4) { width: 84%; }

@keyframes sip-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ---------- toasts ---------- */

.sip-toaster {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    width: min(26rem, calc(100vw - 2 * var(--space-4)));
    pointer-events: none;
}

    .sip-toaster:empty {
        display: none;
    }

.sip-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    width: 100%;
    padding: 0.8rem 0.6rem 0.8rem 0.9rem;
    border: 1px solid var(--sip-line-strong);
    border-radius: var(--radius-md);
    background-color: var(--sip-card);
    box-shadow: var(--shadow-pop);
    color: var(--sip-text);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    pointer-events: auto;
    animation: sip-toast-in var(--dur) var(--ease) both;
}

.sip-toast-icon {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.sip-toast-success .sip-toast-icon { color: var(--sip-success); }
.sip-toast-info .sip-toast-icon { color: var(--sip-info); }

.sip-toast-error {
    border-color: rgba(var(--sip-danger-rgb), 0.45);
}

    .sip-toast-error .sip-toast-icon { color: var(--sip-danger); }

.sip-toast-message {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.sip-toast-close {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: -0.35rem 0 -0.35rem 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--sip-text-2);
    cursor: pointer;
}

    .sip-toast-close:hover {
        background-color: var(--sip-raise);
        color: var(--sip-text);
    }

    .sip-toast-close svg {
        width: 16px;
        height: 16px;
    }

@keyframes sip-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
    .sip-toaster {
        right: var(--space-3);
        left: var(--space-3);
        bottom: var(--space-3);
        width: auto;
        align-items: stretch;
    }
}

/* ---------- action menu ----------
   The trigger opens a menu of menuitems (SipActionMenu.razor.js): fixed to the viewport so a table
   card's scrolling cannot clip it, and kept on screen near any edge. */

.sip-menu {
    position: relative;
    display: inline-flex;
}

.sip-menu-trigger {
    gap: 0.35rem;
}

    .sip-menu-trigger[aria-expanded="true"] {
        --bs-btn-bg: var(--sip-raise);
        --bs-btn-color: var(--sip-text);
        background-color: var(--sip-raise);
        color: var(--sip-text);
    }

    .sip-menu-trigger .sip-menu-chevron {
        width: 14px;
        height: 14px;
        transition: transform var(--dur-fast) ease;
    }

    .sip-menu-trigger[aria-expanded="true"] .sip-menu-chevron {
        transform: rotate(180deg);
    }

.sip-menu-list {
    position: fixed;
    z-index: var(--z-menu);
    display: flex;
    flex-direction: column;
    min-width: 13rem;
    max-width: min(20rem, calc(100vw - 1rem));
    max-height: min(22rem, calc(100vh - 1rem));
    overflow-y: auto;
    padding: 0.35rem;
    background-color: var(--sip-card);
    border: 1px solid var(--sip-line-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    text-align: left;
}

    .sip-menu-list[hidden] {
        display: none;
    }

.sip-action-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 38px;
    padding: 0.45rem 0.7rem;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--sip-text);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
}

@media (pointer: coarse) {
    .sip-action-item {
        min-height: 44px;
    }
}

    .sip-action-item:hover,
    .sip-action-item:focus {
        background-color: var(--sip-raise);
        color: var(--sip-text);
        outline: none;
    }

    .sip-action-item:focus-visible {
        outline: 2px solid var(--sip-text);
        outline-offset: -2px;
    }

    .sip-action-item.is-danger {
        color: var(--sip-danger);
    }

        .sip-action-item.is-danger:hover,
        .sip-action-item.is-danger:focus {
            background-color: rgba(var(--sip-danger-rgb), 0.12);
            color: var(--sip-danger-text);
        }

    .sip-action-item.is-disabled,
    .sip-action-item[aria-disabled="true"] {
        color: var(--sip-muted);
        cursor: not-allowed;
    }

        .sip-action-item.is-disabled:hover {
            background: none;
        }

/* A destructive item starts its own group. */
.sip-action-item:not(.is-danger) + .sip-action-item.is-danger {
    margin-top: 0.35rem;
    position: relative;
}

    .sip-action-item:not(.is-danger) + .sip-action-item.is-danger::before {
        content: "";
        position: absolute;
        top: -0.2rem;
        left: 0.4rem;
        right: 0.4rem;
        border-top: 1px solid var(--sip-hairline);
    }

/* ---------- tabs ---------- */

.sip-tabs {
    display: flex;
    gap: 0.25rem;
    margin: 0 0 var(--space-5);
    border-bottom: 1px solid var(--sip-hairline);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

    .sip-tabs::-webkit-scrollbar {
        display: none;
    }

.sip-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: none;
    min-height: 44px;
    padding: 0 0.85rem;
    color: var(--sip-text-2);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

    .sip-tab:hover {
        color: var(--sip-text);
    }

    .sip-tab[aria-current="page"],
    .sip-tab.is-active {
        color: var(--sip-text);
        font-weight: 600;
    }

        .sip-tab[aria-current="page"]::after,
        .sip-tab.is-active::after {
            content: "";
            position: absolute;
            right: 0.6rem;
            bottom: 0;
            left: 0.6rem;
            height: 2px;
            border-radius: 2px;
            background-color: var(--sip-text);
        }

    .sip-tab:focus-visible {
        outline-offset: -2px;
    }

.sip-tab-count {
    min-width: 1.4rem;
    padding: 0 0.4rem;
    border-radius: var(--radius-pill);
    background-color: rgba(var(--sip-text-rgb), 0.08);
    color: var(--sip-text-2);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ---------- combobox ---------- */

.sip-combobox {
    position: relative;
}

.sip-combobox-field {
    position: relative;
}

.sip-combobox-status {
    position: absolute;
    top: 50%;
    right: 0.85rem;
    transform: translateY(-50%);
    color: var(--sip-muted);
    font-size: var(--text-sm);
    pointer-events: none;
}

.sip-combobox-list {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    z-index: var(--z-menu);
    max-height: 18rem;
    margin: 0;
    padding: 0.35rem;
    overflow-y: auto;
    list-style: none;
    background-color: var(--sip-card);
    border: 1px solid var(--sip-line-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
}

    .sip-combobox-list [role="option"] {
        padding: 0.55rem 0.7rem;
        border-radius: 8px;
        color: var(--sip-text);
        font-size: var(--text-sm);
        cursor: pointer;
    }

        .sip-combobox-list [role="option"]:hover,
        .sip-combobox-list [role="option"].is-active {
            background-color: var(--sip-raise);
        }

        .sip-combobox-list [role="option"].is-active {
            box-shadow: inset 2px 0 0 var(--sip-text-2);
        }

.sip-combobox-empty {
    padding: 0.55rem 0.7rem;
    color: var(--sip-muted);
    font-size: var(--text-sm);
}

/* ---------- code box ----------
   An activation code shown on screen: big, monospaced, grouped for reading aloud, with Copy and
   Print. The same look as the focused shell's .fx-codebox. */

.sip-code-box {
    display: grid;
    gap: 0.6rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--sip-line-strong);
    border-radius: 14px;
    background-color: var(--sip-input);
}

.sip-code-box-label {
    margin: 0;
    color: var(--sip-text-2);
    font-size: var(--text-sm);
    font-weight: 500;
}

.sip-code-box-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.sip-code-box-value {
    margin: 0;
    color: var(--sip-text);
    font-family: var(--sip-mono);
    font-size: clamp(1.25rem, 4.4vw, 1.75rem);
    font-weight: 500;
    letter-spacing: 0.07em;
    word-break: break-all;
    user-select: all;
}

.sip-code-box-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sip-code-box-meta {
    margin: 0;
    color: var(--sip-muted);
    font-size: var(--text-sm);
}

    .sip-code-box-meta strong {
        color: var(--sip-text-2);
        font-weight: 500;
    }

[data-copy].is-copied {
    border-color: rgba(var(--sip-success-rgb), 0.55);
    color: var(--sip-success-text);
}

@media (max-width: 560px) {
    .sip-code-box-row {
        justify-content: center;
        text-align: center;
    }

    .sip-code-box-actions {
        width: 100%;
    }

        .sip-code-box-actions > * {
            flex: 1 1 auto;
        }
}

/* Older inline code displays. */
.sip-code {
    font-family: var(--sip-mono);
    letter-spacing: 0.08em;
}

/* The box for an emailed one-time code (CodeEntry): one wide field with spaced digits. */
.sip-otp {
    max-width: 18rem;
    font-family: var(--sip-mono);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.5em;
    text-align: center;
    padding-left: 1.1em;
}

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

/* "Send a new code (1:35)": a quiet button that is visibly waiting. */
.sip-resend:disabled {
    cursor: default;
}

.sip-resend-time {
    font-variant-numeric: tabular-nums;
}

/* ---------- setup checklist ---------- */

.sip-checklist h2 {
    margin: 0 0 0.25rem;
}

.sip-checklist-progress {
    height: 6px;
    margin: 0.6rem 0 1rem;
    border-radius: var(--radius-pill);
    background-color: var(--sip-hairline);
    overflow: hidden;
}

    .sip-checklist-progress > span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background-color: var(--sip-success);
    }

.sip-checklist-items {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--sip-hairline);
}

    .sip-checklist-items li {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr);
        column-gap: 0.75rem;
        align-items: start;
        padding: 0.8rem 0;
        border-bottom: 1px solid var(--sip-hairline);
    }

.sip-checklist-mark {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border: 1px solid var(--sip-control-line);
    border-radius: 50%;
    color: var(--sip-canvas);
}

    .sip-checklist-mark svg {
        width: 13px;
        height: 13px;
    }

.sip-checklist-items li.is-done .sip-checklist-mark {
    border-color: var(--sip-success);
    background-color: var(--sip-success);
}

.sip-checklist-items li.is-done .sip-checklist-title {
    color: var(--sip-text-2);
    text-decoration: line-through;
    text-decoration-color: var(--sip-muted-decor);
}

.sip-checklist-title {
    font-weight: 500;
}

    a.sip-checklist-title {
        text-decoration: none;
    }

        a.sip-checklist-title:hover {
            text-decoration: underline;
        }

.sip-checklist-hint {
    grid-column: 2;
    color: var(--sip-muted);
    font-size: var(--text-sm);
}

.sip-checklist-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.85rem;
}

/* ---------- dialogs (the parts inside SipModal's body) ---------- */

.dlg-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: var(--space-5);
}

/* Inside a dialog the footer stays in view while a long form scrolls under it. */
.sip-modal-body .dlg-footer {
    position: sticky;
    bottom: calc(-1 * var(--sip-modal-pad-b, 1.4rem));
    z-index: 2;
    margin-left: calc(-1 * var(--sip-modal-pad-x, 1.4rem));
    margin-right: calc(-1 * var(--sip-modal-pad-x, 1.4rem));
    margin-bottom: calc(-1 * var(--sip-modal-pad-b, 1.4rem));
    padding: 0.85rem var(--sip-modal-pad-x, 1.4rem) var(--sip-modal-pad-b, 1.4rem);
    background-color: var(--sip-card);
    border-top: 1px solid var(--sip-hairline);
}

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

@media (max-width: 640px) {
    .dlg-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

        .dlg-footer > .btn {
            width: 100%;
        }
}

/* Three-across fields inside a dialog; they stack when there is no room. */
.dlg-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
    gap: 0.6rem;
}

/* ---------- the "no access" notice ---------- */

.sip-noaccess {
    max-width: 36rem;
    margin: var(--space-6) auto;
    text-align: center;
}

    .sip-noaccess .sip-empty-icon {
        margin: 0 auto var(--space-3);
    }

    .sip-noaccess h1 {
        margin-bottom: var(--space-3);
    }

    .sip-noaccess p {
        color: var(--sip-text-2);
    }

.sip-noaccess-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-top: var(--space-5);
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .sip-skeleton-line {
        animation: none;
        background: var(--sip-raise);
    }
}