/* ── Material Icons (self-hosted) ── */
@font-face {
    font-family: "Material Icons";
    font-style: normal;
    font-weight: 400;
    src: url("/fonts/MaterialIcons-Regular.woff2") format("woff2");
    font-display: block;
}

.material-icons {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    font-size: 1.25rem;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    user-select: none;
    vertical-align: middle;
}

/* ── Design Tokens ── */
:root {
    --color-primary: #3b5bdb;
    --color-primary-hover: #1e3a8a;
    --color-danger: #dc2626;
    --color-danger-hover: #b91c1c;
    --color-success: #166534;
    --color-success-bg: #dcfce7;
    --color-warning: #92400e;
    --color-warning-bg: #fef3c7;
    --color-muted: #64748b;
    --color-subtle: #475569;
    --color-border: #e2e8f0;
    --color-border-input: #cbd5e1;
    --color-bg: #f5f6f8;
    --color-card-bg: #ffffff;
    --color-sidebar-bg: #17212d;
    --color-text: #111827;
    --color-link: #3b5bdb;

    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.5rem;
    --radius-xl: 1rem;
    --radius-btn: 0.5rem;

    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

    --font-sans: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --font-size-base: 1rem;
    --font-size-sm: 0.9rem;
    --font-size-xs: 0.8rem;
}

[data-bs-theme="dark"] {
    --bs-body-bg: #15191f;
    --bs-body-color: #f3f6fb;
    --bs-border-color: #343b46;
    --bs-secondary-bg: #20262d;
    --bs-tertiary-bg: #252c35;

    --color-primary: #748ffc;
    --color-primary-hover: #a3b4ff;
    --color-danger: #f87171;
    --color-danger-hover: #fca5a5;
    --color-success: #86efac;
    --color-success-bg: #14532d;
    --color-warning: #fbbf24;
    --color-warning-bg: #451a03;
    --color-muted: #a8b0bb;
    --color-subtle: #d7dce3;
    --color-border: #3a424d;
    --color-border-input: #4c5663;
    --color-bg: #20262d;
    --color-card-bg: #15191f;
    --color-sidebar-bg: #101419;
    --color-text: #f3f6fb;
    --color-link: #748ffc;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3);

    color-scheme: dark;
}

/* ── Base ── */
html,
body {
    font-family: var(--font-sans);
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
}

a,
.btn-link {
    color: var(--color-link);
}

h1:focus {
    outline: none;
}

code {
    color: #c02d76;
}

/* ── Auth layout ── */
.auth-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    padding: 1.5rem;
}

.auth-card {
    width: 100%;
    max-width: 420px;
}

.auth-brand {
    text-align: center;
    margin-bottom: 1.75rem;
}

.auth-brand::before {
    content: "";
    display: block;
    width: 52px;
    height: 52px;
    margin: 0 auto 0.6rem;
    background: url("/favicon.svg") center / contain no-repeat;
}

.auth-brand-name {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.5px;
}

.auth-brand-tagline {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 0.2rem;
}

/* ── Page header (TechWork.Components PageHeader overrides) ──
   PageHeader is now TechWork.Components' shared component (twc-page-* classes,
   techwork-components.css, loaded before this file in index.html). Its base rules match
   Stayant's former bespoke .page-header* rules almost exactly, except for the gaps below —
   patch only the delta so the rendered result stays visually unchanged. */

/* Missing entirely from the library: without min-width:0 a long title can't shrink inside
   the flex row and will overflow instead of wrapping/truncating. */
.twc-page-header-main {
    flex: 1;
    min-width: 0;
}

/* Missing from the library: actions shrinking instead of holding their width. */
.twc-page-header-actions {
    flex-shrink: 0;
}

/* Library hardcodes #111827/#64748b; route through Stayant's design tokens so both apps'
   light/dark theming stays consistent (see also the [data-bs-theme="dark"] overrides below —
   those hardcoded colors are declared via [data-bs-theme="dark"] .twc-page-title, which is
   MORE specific than a plain .twc-page-title rule, so a plain override here would lose to
   them in dark mode without the explicit selector below). */
.twc-page-title {
    color: var(--color-text);
}

.twc-page-subtitle {
    margin: 0.3rem 0 0;
    color: var(--color-muted);
    font-size: var(--font-size-sm);
}

[data-bs-theme="dark"] .twc-page-title {
    color: var(--color-text);
}

[data-bs-theme="dark"] .twc-page-subtitle {
    color: var(--color-muted);
}

/* Missing entirely from the library: on narrow viewports, drop the actions onto their own
   row so the title isn't squeezed. */
@media (max-width: 575.98px) {
    .twc-page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .twc-page-header-actions {
        justify-content: flex-start;
        width: 100%;
    }
}

/* ── State messages ── */
.state-message {
    padding: 1rem;
    color: var(--color-muted);
}

.state-loading {
    font-style: italic;
}

.state-error {
    color: var(--color-danger-hover);
    background: #fef2f2;
    border-radius: var(--radius-md);
}

.state-empty {
    color: var(--color-muted);
}

/* ── Back button ── */
.back-button {
    background: none;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    padding: 0 0 0.5rem;
    margin-bottom: 0.5rem;
    font-size: var(--font-size-sm);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.back-button:hover {
    text-decoration: underline;
}

/* ── Detail section ── */
.detail-section {
    margin-bottom: 1.25rem;
}

.detail-section h3 {
    margin: 0 0 0.5rem;
    font-size: var(--font-size-base);
    color: var(--color-subtle);
}

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-btn);
    font-size: var(--font-size-sm);
    font-family: var(--font-sans);
    cursor: pointer;
    border: 1px solid transparent;
    line-height: 1.4;
    white-space: nowrap;
}

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

.btn-primary:hover:not(:disabled) {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary {
    background: #f1f5f9;
    color: #334155;
    border-color: var(--color-border);
}

.btn-secondary:hover {
    background: var(--color-border);
}

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

.btn-danger:hover:not(:disabled) {
    background: var(--color-danger-hover);
    border-color: var(--color-danger-hover);
}

.btn-info {
    background: #e0f2fe;
    color: #075985;
    border-color: #bae6fd;
}

.btn-info:hover:not(:disabled) {
    background: #bae6fd;
    border-color: #7dd3fc;
    color: #0c4a6e;
}

.btn-outline-warning {
    color: #b45309;
    border-color: #f59e0b;
}

.btn-outline-warning:hover:not(:disabled) {
    background: #f59e0b;
    color: #111827;
}

.btn-sm {
    padding: 0.3rem 0.65rem;
    font-size: var(--font-size-xs);
}

/* ── Forms ── */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 500;
    font-size: var(--font-size-sm);
}

.form-control,
.form-select {
    width: 100%;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-family: var(--font-sans);
    box-sizing: border-box;
}

/* .form-select keeps extra right padding so text never sits under the arrow. */
.form-control {
    padding: 0.5rem 0.75rem;
}

.form-select {
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
}

.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.form-control,
.form-select,
.input-group-text {
    min-height: 2.35rem;
}

.form-error {
    background: #fef2f2;
    color: var(--color-danger-hover);
    padding: 0.75rem;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    font-size: var(--font-size-sm);
}

.form-success {
    padding: 0.75rem;
    background: var(--color-success-bg);
    color: var(--color-success);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.form-hint {
    margin: 0.25rem 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-muted);
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-start;
}

.form-section-title {
    margin: 1rem 0 0.5rem;
    font-size: var(--font-size-base);
    color: var(--color-subtle);
}

.form-group.flex-1 {
    flex: 1;
    min-width: 6rem;
}

.form-group.flex-2 {
    flex: 2;
    min-width: 10rem;
}

/* ── Validation ── */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

/* ── Cards ── */
.page-card {
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
    padding: 1.25rem;
}

.content-narrow {
    max-width: 980px;
}

.content-medium {
    max-width: 1160px;
}

.section-stack {
    display: grid;
    gap: 1rem;
}

.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-card-bg) 84%, var(--color-bg));
}

.table-toolbar-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
}

.table-toolbar-meta {
    color: var(--color-muted);
    font-size: var(--font-size-xs);
}

.action-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.danger-zone {
    margin-left: 0.5rem;
    padding-left: 0.65rem;
    border-left: 1px solid var(--color-border);
}

.empty-panel {
    min-height: 12rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    color: var(--color-muted);
    background: color-mix(in srgb, var(--color-card-bg) 88%, var(--color-bg));
}

.empty-panel strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-text);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.9rem 1.5rem;
}

.detail-item-label {
    color: var(--color-muted);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0;
    margin-bottom: 0.15rem;
}

.detail-item-value {
    font-weight: 600;
}

.grid-column-full {
    grid-column: 1 / -1;
}

.settings-shell {
    max-width: 1280px;
}

.settings-layout {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.settings-rail {
    position: sticky;
    top: 5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.settings-rail-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.settings-rail-heading {
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted);
    padding: 0 0.5rem;
    margin-bottom: 0.125rem;
}

.settings-rail-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.settings-rail-link {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--color-text);
    text-decoration: none;
    padding: 0.4rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1.25;
    transition: background 0.12s, color 0.12s;
    cursor: pointer;
    outline: none;
}

.settings-rail-link:hover,
.settings-rail-link:focus-visible {
    background: var(--color-bg);
    color: var(--color-text);
}

.settings-rail-link.active,
.settings-rail-link.active:hover {
    background: var(--color-primary);
    color: #ffffff;
}

.settings-rail-link:focus-visible {
    box-shadow: 0 0 0 2px var(--color-primary);
}

.settings-content {
    min-width: 0;
    max-width: 56rem;
}

@media (max-width: 767.98px) {
    .settings-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .settings-rail {
        position: static;
        gap: 0.75rem;
    }

    .settings-rail-group {
        gap: 0.125rem;
    }

    .settings-rail-heading {
        padding: 0;
    }

    .settings-rail-link {
        padding: 0.625rem 0.75rem;
        font-size: var(--font-size-base);
    }
}

/* Bootstrap card overrides */
.card {
    border-radius: var(--radius-lg) !important;
    border-color: var(--color-border);
    box-shadow: var(--shadow-card);
}

.card-header {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    background: var(--color-bg);
    font-weight: 600;
    border-bottom-color: var(--color-border);
}

/* Bootstrap alert overrides */
.alert {
    border-radius: var(--radius-md) !important;
}

/* Bootstrap badge overrides */
.badge {
    border-radius: var(--radius-sm) !important;
}

/* Long single-token badges (e.g. enum values like "PercentageOfAccommodation")
   must wrap inside a table cell rather than overflow into the next column. */
.table td .badge,
.table th .badge {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ── Nav Tabs ── */
/*
 * Underline-style: bottom-border indicator only, no 3-sided border connecting trick.
 * Works reliably inside modals, cards, and any background context.
 */
.nav-tabs {
    border-bottom: 1px solid var(--color-border);
    gap: 0.125rem;
}

.nav-tabs .nav-link {
    color: var(--color-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.5rem 1rem 0.375rem;
    margin-bottom: -1px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    outline: none;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:focus-visible {
    outline: none;
    box-shadow: none;
}

.nav-tabs .nav-link:hover {
    color: var(--color-text);
    background: var(--color-bg);
    border-bottom-color: var(--color-border);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover {
    color: var(--color-primary);
    background: transparent;
    border-bottom: 2px solid var(--color-primary);
    font-weight: 600;
}

/*
 * Mobile: stack tabs full-width. Each tab becomes a row in a vertical list so
 * nothing overflows on narrow screens. The active indicator switches from a
 * bottom underline to a left border so it remains visible when stacked.
 */
@media (max-width: 575.98px) {
    .nav-tabs {
        flex-direction: column;
        border-bottom: none;
        gap: 0;
    }

    .nav-tabs .nav-item {
        width: 100%;
    }

    .nav-tabs .nav-link {
        width: 100%;
        text-align: left;
        margin-bottom: 0;
        padding: 0.625rem 0.75rem;
        border: none;
        border-left: 3px solid transparent;
        border-bottom: 1px solid var(--color-border);
        border-radius: 0;
    }

    .nav-tabs .nav-link:hover {
        background: var(--color-bg);
        border-radius: 0;
        border-bottom-color: var(--color-border);
    }

    .nav-tabs .nav-link.active,
    .nav-tabs .nav-link.active:hover {
        background: var(--color-bg);
        border-left-color: var(--color-primary);
        border-bottom-color: var(--color-border);
    }
}

/* ── Modals ── */
/*
 * Standard sizes:
 *   Small      .modal-dialog.modal-sm          — 440px  — confirmation / delete dialogs
 *   Medium     .modal-dialog (default)          — 600px  — forms / settings
 *   Full-screen .modal-dialog.modal-fullscreen  — 100vw/100vh — booking detail / page editor
 */

/* Override Bootstrap default modal width (500px → 600px medium) */
@media (min-width: 576px) {
    .modal-dialog {
        padding: 50px;
    }

    .modal-dialog.modal-sm {
        max-width: 440px;
    }
}

/* Modal content — apply design tokens */
.modal-content {
    border-radius: var(--radius-lg) !important;
    border: none;
    box-shadow: var(--shadow-modal);
}

.modal-header {
    border-bottom-color: var(--color-border);
    padding: 1rem 1.25rem;
}

.modal-footer {
    border-top-color: var(--color-border);
    padding: 0.75rem 1.25rem;
}

.modal-body {
    padding: 1.25rem;
}

/* Full-screen DeepLinkDialogs (booking detail) host panels whose inner section flex-grows
   to fill the height and pin its compose bar. DeepLinkDialog used to render the .modal-body
   element itself and put "d-flex flex-column; min-height:0" straight on it (PR #308); the
   shared TechWork.Components Dialog owns that element now, and its BodyClass parameter puts
   those same classes straight back onto .modal-body (see DeepLinkDialog.razor's
   ModalBodyClass) — no CSS reach-in needed for that part any more. d-flex, flex-column and
   p-3 (reproducing the old p-3 padding) are plain Bootstrap classes carried in that value;
   .deep-link-dialog-min-h-0 below exists only because Bootstrap ships no min-height utility.

   What still has to live here is the one thing BodyClass cannot reach: DeepLinkDialog's own
   inner wrapper (.deep-link-dialog-fill, applied via InnerBodyClass), one level inside
   .modal-body, which needs to flex-fill that body. .deep-link-dialog-fill is a name owned
   solely by this component, so — unlike the old bare .modal-body selector this replaced,
   which matched every nested modal's body too (BookingDetailPanel alone hand-rolls ten, and
   restyling them was the regression this file caused before it was caught in review) — this
   chain cannot leak onto them. */
.deep-link-dialog-min-h-0 {
    min-height: 0;
}

.deep-link-dialog-fullscreen > .modal-dialog > .modal-content > .modal-body > .deep-link-dialog-fill {
    flex: 1 1 auto;
    min-height: 0;
}

/* ── Badges ── */
.badge-inactive {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: #f1f5f9;
    color: var(--color-muted);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.signed-off-badge {
    display: inline-block;
    margin: 0.5rem 0 0;
    padding: 0.25rem 0.6rem;
    background: var(--color-success-bg);
    color: var(--color-success);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

/* ── Utilities ── */
.text-muted {
    color: var(--color-muted) !important;
}

.required {
    color: var(--color-danger-hover);
}

.mt-1 {
    margin-top: 0.5rem;
}

/* ── Channex admin JSON viewers ── */
.channex-expand-row {
    background-color: var(--color-bg);
}

.webhook-json-textarea {
    min-height: 12rem;
    max-height: 24rem;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.85rem;
    line-height: 1.35;
    white-space: pre;
    overflow: auto;
    background-color: var(--bs-secondary-bg) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border-input) !important;
}

.webhook-json-textarea:focus {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--color-text) !important;
}

.channex-json-viewer {
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.85rem;
    line-height: 1.35;
    white-space: pre-wrap;
    word-wrap: break-word;
    background-color: var(--bs-secondary-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border-input);
}

/* ── Blazor error UI ── */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.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;
}

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

/* Align table column text with card-header/card-body padding */
.card-body.p-0 .table> :not(caption)>*>*:first-child {
    padding-left: 1rem;
}

.card-body.p-0 .table> :not(caption)>*>*:last-child {
    padding-right: 1rem;
}

/* ── Responsive list tables ── */
/* The .rtable* DataGrid/DataTableCard styles now ship with the TechWork.Components
   package (loaded via _content/TechWork.Components/techwork-components.css in index.html),
   including the mobile stacked-row dark-mode border override. */

/* ── Dark Mode ──────────────────────────────────────────────────────────────
   Keyed on [data-bs-theme="dark"], NOT @media (prefers-color-scheme: dark).
   index.html resolves the theme before first paint — a stored 'theme' choice wins,
   otherwise the OS preference — and writes the result to documentElement[data-bs-theme].
   The attribute is therefore authoritative for BOTH branches, while the media query only
   ever saw the OS one: a user who picked dark on an OS-light machine got Bootstrap's light
   chrome under dark-mode body text. Scoping by the attribute makes the manual choice work
   and keeps the OS choice behaving exactly as before. */

[data-bs-theme="dark"],
[data-bs-theme="dark"] body {
    --bs-body-bg: #15191f;
    --bs-body-color: #f3f6fb;
    --bs-border-color: #343b46;
    --bs-secondary-bg: #20262d;
    --bs-tertiary-bg: #252c35;
    --bs-table-striped-bg: #1b2027;
    color-scheme: dark;
}

[data-bs-theme="dark"] {
    --color-primary: #748ffc;
    --color-primary-hover: #a3b4ff;
    --color-danger: #f87171;
    --color-danger-hover: #fca5a5;
    --color-success: #86efac;
    --color-success-bg: #14532d;
    --color-warning: #fbbf24;
    --color-warning-bg: #451a03;
    --color-muted: #a8b0bb;
    --color-subtle: #d7dce3;
    --color-border: #3a424d;
    --color-border-input: #4c5663;
    --color-bg: #20262d;
    --color-card-bg: #15191f;
    --color-sidebar-bg: #101419;
    --color-text: #f3f6fb;
    --color-link: #748ffc;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
}

/* Base */
[data-bs-theme="dark"] code {
    color: #f472b6;
}

/* Buttons */
[data-bs-theme="dark"] .btn-secondary {
    background: #252c35;
    color: #d7dce3;
    border-color: var(--color-border);
}

[data-bs-theme="dark"] .btn-secondary:hover {
    background: #303946;
}

[data-bs-theme="dark"] .btn-info {
    background: #164e63;
    border-color: #155e75;
    color: #cffafe;
}

[data-bs-theme="dark"] .btn-info:hover:not(:disabled) {
    background: #155e75;
    border-color: #0e7490;
    color: #ecfeff;
}

/* Forms */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] input.form-control,
[data-bs-theme="dark"] textarea.form-control {
    background-color: #202733 !important;
    color: #f1f5f9 !important;
    border-color: var(--color-border-input);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] input.form-control:focus,
[data-bs-theme="dark"] textarea.form-control:focus {
    background-color: #252e3a !important;
    color: #f1f5f9 !important;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

/* Fix browser autofill dark bg */
[data-bs-theme="dark"] .form-control:-webkit-autofill,
[data-bs-theme="dark"] .form-control:-webkit-autofill:hover,
[data-bs-theme="dark"] .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #f1f5f9;
    -webkit-box-shadow: 0 0 0px 1000px #202733 inset;
    transition: background-color 5000s ease-in-out 0s;
}

[data-bs-theme="dark"] .form-error {
    background: #2d1515;
    color: var(--color-danger-hover);
}

/* State messages */
[data-bs-theme="dark"] .state-error {
    background: #2d1515;
}

/* Badges */
[data-bs-theme="dark"] .badge-inactive {
    background: #334155;
    color: var(--color-muted);
}

/* Bootstrap overrides */
[data-bs-theme="dark"] .card {
    background-color: var(--color-card-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text);
}

[data-bs-theme="dark"] .card-header {
    background: var(--color-bg) !important;
    border-bottom-color: var(--color-border) !important;
    color: var(--color-text);
}

[data-bs-theme="dark"] .card-body {
    color: var(--color-text);
}

[data-bs-theme="dark"] .modal-content {
    background: var(--color-card-bg);
    color: var(--color-text);
}

[data-bs-theme="dark"] .modal-header {
    border-bottom-color: var(--color-border);
}

[data-bs-theme="dark"] .modal-footer {
    border-top-color: var(--color-border);
}

[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.75;
}

[data-bs-theme="dark"] .btn-close:hover {
    opacity: 1;
}

[data-bs-theme="dark"] .btn-close:focus {
    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.35);
}

[data-bs-theme="dark"] .table {
    --bs-table-bg: var(--color-card-bg);
    --bs-table-color: var(--color-text);
    --bs-table-border-color: var(--color-border);
    --bs-table-striped-bg: #1b2027;
    --bs-table-striped-color: var(--color-text);
    --bs-table-hover-bg: #252c35;
    --bs-table-hover-color: var(--color-text);
}

[data-bs-theme="dark"] .nav-tabs {
    border-bottom-color: var(--color-border);
}

[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
    background: #252c35;
}

[data-bs-theme="dark"] .dropdown-menu {
    background: var(--color-card-bg);
    border-color: var(--color-border);
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--color-text);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background: #252c35;
    color: var(--color-text);
}

[data-bs-theme="dark"] .dropdown-divider {
    border-color: var(--color-border);
}

[data-bs-theme="dark"] .list-group-item {
    background: var(--color-card-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-bs-theme="dark"] .input-group-text {
    background: #252c35;
    border-color: var(--color-border-input);
    color: var(--color-text);
}

[data-bs-theme="dark"] select.form-control,
[data-bs-theme="dark"] select.form-select {
    background-color: #202733;
    color: var(--color-text);
    border-color: var(--color-border-input);
}

[data-bs-theme="dark"] .form-select {
    background-color: #202733;
    color: var(--color-text);
    border-color: var(--color-border-input);
}

/* Alert variants */
[data-bs-theme="dark"] .alert-info {
    background: #0c2d48;
    border-color: #1e4e6e;
    color: #bae6fd;
}

[data-bs-theme="dark"] .alert-success {
    background: var(--color-success-bg);
    border-color: #166534;
    color: var(--color-success);
}

[data-bs-theme="dark"] .alert-warning {
    background: var(--color-warning-bg);
    border-color: #78350f;
    color: var(--color-warning);
}

[data-bs-theme="dark"] .alert-danger {
    background: #2d1515;
    border-color: #7f1d1d;
    color: var(--color-danger-hover);
}

/* Neutral "light" surfaces — Bootstrap's .bg-light is a hard-coded
   near-white, so neutral chips/boxes that use it render as bright white
   blocks in dark mode. Re-point them at the theme tokens so they stay
   cohesive. (.bg-white is left alone: on card-headers it is already
   handled above, and the website builder canvas relies on it.) */
[data-bs-theme="dark"] .bg-light {
    background-color: var(--color-bg) !important;
    color: var(--color-text);
}

[data-bs-theme="dark"] .card.bg-light {
    background-color: var(--color-card-bg) !important;
}

[data-bs-theme="dark"] .badge.bg-light {
    background-color: #252c35 !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

/* Page cards */
[data-bs-theme="dark"] .page-card {
    background: var(--color-card-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

/* Sticky column cells (Pricing, Reports) */
[data-bs-theme="dark"] .sticky-col,
[data-bs-theme="dark"] th.sticky-col,
[data-bs-theme="dark"] td.sticky-col {
    background: var(--color-card-bg) !important;
    color: var(--color-text) !important;
}

/* Generic tables not using .table class */
[data-bs-theme="dark"] table {
    color: var(--color-text);
}

[data-bs-theme="dark"] table thead th,
[data-bs-theme="dark"] table tbody td,
[data-bs-theme="dark"] table tfoot td {
    border-color: var(--color-border);
}

/* Bootstrap table head */
[data-bs-theme="dark"] .table thead th,
[data-bs-theme="dark"] .table>thead>tr>th {
    background: var(--bs-card-cap-bg) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

/* Date inputs */
[data-bs-theme="dark"] input[type="date"],
[data-bs-theme="dark"] input[type="time"],
[data-bs-theme="dark"] input[type="datetime-local"],
[data-bs-theme="dark"] input[type="number"],
[data-bs-theme="dark"] input[type="text"],
[data-bs-theme="dark"] input[type="email"],
[data-bs-theme="dark"] input[type="password"],
[data-bs-theme="dark"] input[type="search"],
[data-bs-theme="dark"] input[type="tel"],
[data-bs-theme="dark"] input[type="url"],
[data-bs-theme="dark"] textarea,
[data-bs-theme="dark"] select {
    background-color: #202733 !important;
    color: #f1f5f9 !important;
    border-color: #475569;
    color-scheme: dark;
}

/* Checkbox & radio */
[data-bs-theme="dark"] input[type="checkbox"],
[data-bs-theme="dark"] input[type="radio"] {
    accent-color: var(--color-primary);
}

/* Progress bars */
[data-bs-theme="dark"] .progress {
    background: #2c3542;
}

/* Accordion */
[data-bs-theme="dark"] .accordion-item {
    background: var(--color-card-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-bs-theme="dark"] .accordion-button {
    background: var(--color-card-bg) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border);
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    background: #252c35 !important;
    color: var(--color-primary) !important;
}

/* Popover / tooltip */
[data-bs-theme="dark"] .popover {
    background: var(--color-card-bg);
    border-color: var(--color-border);
}

[data-bs-theme="dark"] .popover-header {
    background: #162032;
    color: var(--color-text);
    border-bottom-color: var(--color-border);
}

[data-bs-theme="dark"] .popover-body {
    color: var(--color-text);
}

[data-bs-theme="dark"] .tooltip-inner {
    background: #0f172a;
    color: #f1f5f9;
}

/* Pagination */
[data-bs-theme="dark"] .page-link {
    background: var(--color-card-bg);
    border-color: var(--color-border);
    color: var(--color-link);
}

[data-bs-theme="dark"] .page-link:hover {
    background: #252c35;
    border-color: var(--color-border);
    color: var(--color-primary);
}

[data-bs-theme="dark"] .page-item.active .page-link {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

[data-bs-theme="dark"] .page-item.disabled .page-link {
    background: var(--color-card-bg);
    color: var(--color-muted);
}

/* Offcanvas */
[data-bs-theme="dark"] .offcanvas {
    background: var(--color-card-bg);
    color: var(--color-text);
}

/* Reports occupancy table white cells */
[data-bs-theme="dark"] .table td,
[data-bs-theme="dark"] .table th {
    background-color: transparent;
}

/* Ensure plain white divs / panels pick up dark bg */
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] [class*="bg-light"] {
    background-color: var(--color-card-bg) !important;
    color: var(--color-text) !important;
}

/* Signed-off badge in dark */
[data-bs-theme="dark"] .signed-off-badge {
    background: var(--color-success-bg);
    color: var(--color-success);
}

[data-bs-theme="dark"] .rule-badge {
    color: #789bff;
}

[data-bs-theme="dark"] thead tr {
    border-style: none;
}

[data-bs-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-color-type: var(--bs-table-striped-color);
    --bs-table-bg-type: #1b2027;
}

[data-bs-theme="dark"] input[type="date"],
[data-bs-theme="dark"] input[type="time"],
[data-bs-theme="dark"] input[type="datetime-local"],
[data-bs-theme="dark"] input[type="number"],
[data-bs-theme="dark"] input[type="text"],
[data-bs-theme="dark"] input[type="email"],
[data-bs-theme="dark"] input[type="password"],
[data-bs-theme="dark"] input[type="search"],
[data-bs-theme="dark"] input[type="tel"],
[data-bs-theme="dark"] input[type="url"],
[data-bs-theme="dark"] textarea,
[data-bs-theme="dark"] select {
    background-color: var(--bs-secondary-bg) !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] input.form-control:focus,
[data-bs-theme="dark"] textarea.form-control:focus {
    background-color: var(--bs-tertiary-bg) !important;
}

/* ── Quill editor dark mode ── */
@media (prefers-color-scheme: dark) {
    .ql-toolbar.ql-snow {
        background: #20262d;
        border-color: #343b46;
    }

    .ql-container.ql-snow {
        background: #15191f;
        border-color: #343b46;
        color: #f3f6fb;
    }

    .ql-editor {
        color: #f3f6fb;
    }

    .ql-editor.ql-blank::before {
        color: #a8b0bb;
    }

    /* SVG icon colours */
    .ql-toolbar .ql-stroke {
        stroke: #d7dce3;
    }

    .ql-toolbar .ql-fill,
    .ql-toolbar .ql-stroke.ql-fill {
        fill: #d7dce3;
    }

    .ql-toolbar .ql-picker-label,
    .ql-toolbar .ql-picker-item {
        color: #d7dce3;
    }

    .ql-toolbar .ql-picker-options {
        background: #252c35;
        border-color: #343b46;
    }

    .ql-toolbar button:hover .ql-stroke,
    .ql-toolbar button.ql-active .ql-stroke {
        stroke: #60a5fa;
    }

    .ql-toolbar button:hover .ql-fill,
    .ql-toolbar button.ql-active .ql-fill {
        fill: #60a5fa;
    }

    .ql-toolbar button:hover,
    .ql-toolbar button.ql-active {
        color: #60a5fa;
    }
}

/* Also target Bootstrap data-bs-theme="dark" (manual dark mode toggle) */

/* Neutral "light" surfaces — Bootstrap's .bg-light is a hard-coded near-white,
   so neutral chips/boxes that use it render as bright white blocks in dark mode.
   Bootstrap's native dark mode does NOT restyle .bg-light, so re-point it at the
   theme tokens here for the manual data-bs-theme toggle. (.bg-white is left
   alone: on card-headers it is already handled, and the website builder canvas
   relies on it.) */
[data-bs-theme="dark"] .bg-light {
    background-color: var(--color-bg) !important;
    color: var(--color-text);
}

[data-bs-theme="dark"] .card.bg-light {
    background-color: var(--color-card-bg) !important;
}

[data-bs-theme="dark"] .badge.bg-light {
    background-color: #252c35 !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

[data-bs-theme="dark"] .ql-toolbar.ql-snow {
    background: #20262d;
    border-color: #343b46;
}

[data-bs-theme="dark"] .ql-container.ql-snow {
    background: #15191f;
    border-color: #343b46;
    color: #f3f6fb;
}

[data-bs-theme="dark"] .ql-editor {
    color: #f3f6fb;
}

[data-bs-theme="dark"] .ql-editor.ql-blank::before {
    color: #a8b0bb;
}

[data-bs-theme="dark"] .ql-toolbar .ql-stroke {
    stroke: #d7dce3;
}

[data-bs-theme="dark"] .ql-toolbar .ql-fill,
[data-bs-theme="dark"] .ql-toolbar .ql-stroke.ql-fill {
    fill: #d7dce3;
}

[data-bs-theme="dark"] .ql-toolbar .ql-picker-label,
[data-bs-theme="dark"] .ql-toolbar .ql-picker-item {
    color: #d7dce3;
}

[data-bs-theme="dark"] .ql-toolbar .ql-picker-options {
    background: #252c35;
    border-color: #343b46;
}

[data-bs-theme="dark"] .ql-toolbar button:hover .ql-stroke,
[data-bs-theme="dark"] .ql-toolbar button.ql-active .ql-stroke {
    stroke: #60a5fa;
}

[data-bs-theme="dark"] .ql-toolbar button:hover .ql-fill,
[data-bs-theme="dark"] .ql-toolbar button.ql-active .ql-fill {
    fill: #60a5fa;
}

[data-bs-theme="dark"] .ql-toolbar button:hover,
[data-bs-theme="dark"] .ql-toolbar button.ql-active {
    color: #60a5fa;
}

/* ──────────────────────────────────────────────────────────────────────────
   Phase 5a: Rooms tab — per-room editor cards.
   Uses the shared theme tokens (--color-card-bg / --color-border / ...) so
   light + dark mode work without a second ruleset. Mobile-first; the cards
   stack into a single column on narrow viewports via the grid auto-fit.
   ──────────────────────────────────────────────────────────────────────── */

.room-card-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

@media (min-width: 768px) {
    .room-card-list {
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    }
}

.room-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    box-shadow: var(--shadow-card);
}

.room-card--editing {
    border-color: color-mix(in srgb, var(--color-primary, #2563eb) 50%, var(--color-border));
}

.room-card--inactive {
    background: color-mix(in srgb, var(--color-card-bg) 85%, var(--color-bg));
    opacity: 0.85;
}

/* Ensure the multi-room notice in the General tab keeps adequate spacing
   from sibling sections and stays readable in both themes. */
.rooms-multi-notice {
    background: color-mix(in srgb, var(--color-card-bg) 90%, var(--color-bg));
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    color: var(--color-muted);
}

.rooms-multi-notice strong {
    color: var(--color-text);
}

/* Phase 5f-1: per-room rate plans section. Intentionally low-chrome — when a room
   has a single active plan only the "Add a rate plan" link renders. The full list
   only appears once the user has explicitly opted in by adding a 2nd plan. */
.rate-plans-section {
    /* The section sits inside a .room-card; no extra background of its own so the
       single-plan path looks pixel-identical to today's room card. */
}

.rate-plans-block {
    border-top: 1px dashed var(--color-border);
    padding-top: 0.75rem;
}

.rate-plan-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rate-plan-item {
    background: color-mix(in srgb, var(--color-card-bg) 96%, var(--color-bg));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 0.5rem);
    padding: 0.6rem 0.75rem;
}

.rate-plan-item--inactive {
    opacity: 0.7;
}

.rate-plan-edit {
    /* When inline-editing a plan, keep the form visually anchored to the row it
       replaced — same padding, no chrome bump. */
}

.rate-plan-add-btn {
    /* Understated link-style button so the single-plan path doesn't grow new chrome.
       Tap target stays >=44px thanks to btn-sm + .py-2 padding via app.css base rules. */
    text-decoration: none;
    font-weight: 500;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.rate-plan-add-btn:hover,
.rate-plan-add-btn:focus {
    text-decoration: underline;
}

.rate-plan-add-form {
    background: color-mix(in srgb, var(--color-card-bg) 96%, var(--color-bg));
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md, 0.5rem);
    padding: 0.75rem;
}

/* Phase 6: per-channel rate-plan markups. The section is deliberately understated —
   most tenants will only ever see the "+ Add a channel markup" link, and even when
   markups exist the row should look like a small annotation, not a separate feature. */
.rate-plan-markups {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed color-mix(in srgb, var(--color-border) 70%, transparent);
}

.channel-markup-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.channel-markup-item {
    /* Compact inline row — channel name, percent input, delete X all on one line. */
    line-height: 1.4;
}

.channel-markup-input {
    /* Bound the width so the input doesn't stretch across the row on desktop. */
    max-width: 5.5rem;
    /* Keep tap target ≥44px on mobile per CLAUDE.md UI rule. */
    min-height: 44px;
}

.channel-markup-delete {
    /* Plain X button — make it big enough to tap reliably without crowding the input. */
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
}

.channel-markup-add-btn {
    /* Match the rate-plan-add-btn understated treatment so the two affordances feel
       consistent — "+ Add a rate plan" and "+ Add a channel markup" are both opt-ins. */
    text-decoration: none;
    font-weight: 500;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.channel-markup-add-btn:hover,
.channel-markup-add-btn:focus {
    text-decoration: underline;
}

.channel-markup-add-form {
    background: color-mix(in srgb, var(--color-card-bg) 96%, var(--color-bg));
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md, 0.5rem);
    padding: 0.5rem 0.75rem;
}

.channel-markup-add-select {
    max-width: 12rem;
    min-height: 44px;
}

.channel-markup-add-input {
    max-width: 6rem;
    min-height: 44px;
}

/* ─── Guidebook page list ──────────────────────────────────────────────────
   Shared by GuidebookEditor and GuidebookPageEditor, so these live here rather
   than in a scoped .razor.css (scoped styles don't cross component boundaries).
   All colours come from the theme variables, so both themes are covered. */

.guidebook-page-row {
    /* The row stacks title, phase toggles and targeting; give them breathing room. */
    padding-block: 0.75rem;
}

.guidebook-page-title {
    /* Grow into the row on desktop but wrap to its own line before it gets
       unusably narrow at 375px. */
    flex: 1 1 12rem;
    min-width: 0;
    min-height: 44px;
}

.guidebook-icon-btn,
.guidebook-tap-target {
    /* Tap target ≥44px (WKWebView-friendly) — icon-only buttons would otherwise
       be well under it at btn-sm. */
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.guidebook-check {
    /* Keeps each checkbox row tappable without stretching the label's hit area
       into its neighbour. The flex container wraps these at narrow widths.
       Bootstrap indents .form-check by padding-left and pulls the input back out
       with a negative margin — that pairing assumes the input floats, which it
       no longer does as a flex item, so reset both. */
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-left: 0;
}

.guidebook-check .form-check-input {
    /* Bootstrap's default 1em box is too small to hit reliably on a phone. */
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0;
    margin-left: 0;
    float: none;
    flex: 0 0 auto;
}

.guidebook-check .form-check-label {
    /* The label is what makes these tappable: a checkbox glyph is ~20px, well under the 44px
       rule, so the label stretches to fill the full height and remaining width of the row and
       toggles the input via its for=. Tapping anywhere in the 44px band hits the control. */
    padding-left: 0.5rem;
    display: flex;
    align-items: center;
    align-self: stretch;
    flex: 1 1 auto;
    min-height: 44px;
    cursor: pointer;
}

.guidebook-check.form-switch .form-check-input {
    width: 2.25rem;
}

.guidebook-image-field .iuf-controls {
    /* The paste-a-URL input and its Upload button are 42px at btn-sm/form-control-sm — two
       pixels under the 44px tap rule. .iuf-controls stretches its children, so raising the
       row raises both. Scoped to the guidebook so the website builder's own layout is
       untouched by a guidebook change. */
    min-height: 44px;
}

/* Quill's own toolbar buttons are 28×24 — fine for a mouse, well under the 44px rule for a
   thumb. Enlarge them only where that matters: a phone-sized viewport or a coarse pointer
   (the WKWebView case). Desktop keeps the compact toolbar, so the property-description
   editor that shares this component is unchanged there.
   quill.snow.css is linked AFTER app.css in index.html, so `.ql-snow` has to be carried into
   these selectors — without it `.ql-snow.ql-toolbar button { height: 24px }` ties on
   specificity and wins on source order. */
@media (max-width: 575.98px), (pointer: coarse) {
    .rich-text-field .ql-snow.ql-toolbar button {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .rich-text-field .ql-snow.ql-toolbar .ql-picker {
        height: 44px;
    }

    .rich-text-field .ql-snow.ql-toolbar .ql-picker-label {
        display: flex;
        align-items: center;
        height: 44px;
    }

    /* Quill's 15px gap between groups costs a whole extra wrapped row at 375px once the
       buttons are full size. Tighten it so the toolbar stays about three rows tall. */
    .rich-text-field .ql-snow.ql-toolbar .ql-formats {
        margin-right: 4px;
    }
}

.guidebook-scope-select {
    max-width: 20rem;
    min-height: 44px;
}

.guidebook-warning-badge {
    /* Full sentence, not a short label — let it wrap instead of running off a
       narrow viewport. */
    white-space: normal;
    text-align: left;
}

.legal-doc {
    font-size: 16px;
    line-height: 1.7;
}
.legal-doc-body h1 { font-size: 1.6rem; margin: 2rem 0 1rem; }
.legal-doc-body h2 { font-size: 1.3rem; margin: 1.8rem 0 .8rem; }
.legal-doc-body h3 { font-size: 1.1rem; margin: 1.4rem 0 .6rem; }
.legal-doc-body p, .legal-doc-body li { margin-bottom: .6rem; }
.legal-doc-body table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.legal-doc-body th, .legal-doc-body td { border: 1px solid var(--bs-border-color, #dee2e6); padding: .5rem .75rem; text-align: left; vertical-align: top; }
@media (max-width: 575.98px) {
    .legal-doc { font-size: 15px; }
}

/* ImageUploadField — paste-or-upload widget used across the website builder.
   Lives in the shared stylesheet so the rules are emitted once instead of
   once per <ImageUploadField> instance (e.g. one per ImageGallery row). */
.iuf-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.iuf-preview {
    width: 100%;
    height: 120px;
    border: 1.5px dashed #dee2e6;
    border-radius: 0.375rem;
    overflow: hidden;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
}
.iuf-preview-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.iuf-preview-empty {
    font-size: 2.5rem;
    color: #adb5bd;
}
.iuf-controls {
    display: flex;
    gap: 0.4rem;
    align-items: stretch;
}
.iuf-controls .form-control {
    flex: 1;
    min-width: 0;
}
.iuf-upload-btn {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
}

/* The preview well's default surface is a hard-coded near-white, which renders as a bright
   block on a dark card. Restated for both dark hooks the app uses — the OS preference and
   the manual data-bs-theme toggle — the same way the Quill rules above are. */
@media (prefers-color-scheme: dark) {
    .iuf-preview {
        background: #20262d;
        border-color: #3a424d;
    }

    .iuf-preview-empty {
        color: #6b7480;
    }
}

[data-bs-theme="dark"] .iuf-preview {
    background: #20262d;
    border-color: #3a424d;
}

[data-bs-theme="dark"] .iuf-preview-empty {
    color: #6b7480;
}

/* ── HelpBar screenshot lightbox ─────────────────────────────────────────────
   Full-screen viewer for help-article screenshots, opened from the HelpBar via
   js/helpLightbox.js. The overlay is appended to <body> (outside Blazor's render
   tree and component CSS isolation), so these rules live here in the global sheet.
   Dark backdrop is intentional in both themes — it's a media viewer. */
.help-lightbox-open { overflow: hidden; }

.help-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000; /* above the HelpBar panel (1050) and its backdrop (1040) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vmin;
    cursor: zoom-out;
    /* Fade the backdrop in via background-color (a main-thread paint property)
       rather than the element's own `opacity`. Animating opacity on a full-screen
       element promotes it to a compositor layer that some renderers (and headless
       screenshots) fail to paint; background-color avoids that and looks identical. */
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.help-lightbox-overlay.is-open { background-color: rgba(0, 0, 0, 0.82); }

.help-lightbox-img {
    max-width: 92vw;
    max-height: 92vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
    /* Zoom-in on open. */
    transform: scale(0.92);
    opacity: 0;
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.2s ease;
}
.help-lightbox-overlay.is-open .help-lightbox-img {
    transform: scale(1);
    opacity: 1;
}

.help-lightbox-close {
    position: fixed;
    top: max(0.75rem, env(safe-area-inset-top));
    right: max(0.75rem, env(safe-area-inset-right));
    /* Tap target ≥44px (WKWebView-friendly). */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1.75rem;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s;
}
.help-lightbox-close:hover,
.help-lightbox-close:focus-visible {
    background: rgba(255, 255, 255, 0.22);
}
.help-lightbox-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Respect reduced-motion: show/hide instantly, no zoom. */
@media (prefers-reduced-motion: reduce) {
    .help-lightbox-overlay,
    .help-lightbox-img { transition: none; }
    .help-lightbox-img { transform: none; }
}

/* ── Native shell mode (docs/mobile-wrapper.md) ──────────────────────────────
   html.native-shell is added by the wrapper's injected script; --shell-tab-height
   is set by the shell (49pt UITabBar on iOS, Material bar height on Android).
   Bottom padding keeps content and sticky footers clear of the native tab bar. */
html.native-shell .content-area {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--shell-tab-height, 49px));
}

/* /more page (native shell only) */
.more-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
}
.more-list li + li { border-top: 1px solid var(--bs-border-color); }
.more-list-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 48px;
    padding: 0.5rem 1rem;
    color: var(--bs-body-color);
    text-decoration: none;
}
.more-list-link:active { background: var(--bs-tertiary-bg); }
.more-list-icon { color: var(--bs-secondary-color); }
.more-list-chevron { margin-left: auto; color: var(--bs-secondary-color); }