:root {
    /* What a phone's display cutouts leave unusable at the top and bottom edges: the status bar the page runs
       under, and the home indicator it runs behind. Non-zero only once the document opts into painting under
       them (`viewport-fit=cover`, App.razor) AND the platform reports insets, so edge-anchored surfaces can key
       off them unconditionally — in an ordinary browser tab both resolve to 0px and nothing moves.

       Declared once here rather than repeating env() (and its 0px fallback) at each site, so the whole app
       agrees on what "the usable edge" means. Consumers: the nav bar (NavMenu), the toast stack, the floating
       page-footer bar and the reading column above it, the dialog sheet, the error strip (MainLayout) and the
       pull-to-refresh puck.

       There is deliberately NO horizontal pair. `safe-area-inset-left`/`-right` are the rounded-corner and
       camera cut-out, and iOS reports them ONLY in landscape — symmetrically, ~59px on each side even though
       the hardware is on one side alone. Paying both would letterbox a grid that is already tight for width
       into two dead bands. The page therefore runs edge to edge, and every surface agrees. */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    --primary-bg-color-dark: #1f2937;
    --primary-color: #e0b72e;
    --primary-color-dark: #b89121;
    --primary-color-light: #f9f1d6;
    --primary-color-rgb: 224, 183, 46;
    --special-color: #7c3aed;
    --special-color-dark: #6d28d9;
    --warning-color: #fd7e14;
    --warning-color-dark: #c35a02;

    /* Keyboard focus for the bar's round icon controls: a gap in the bar's own slate, then a white ring. */
    --nav-icon-focus-ring: 0 0 0 2px var(--primary-bg-color-dark), 0 0 0 4px rgba(255, 255, 255, 0.55);
}

@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/fonts/Lexend-variable.woff2') format('woff2');
}

html, body {
    font-family: 'Lexend', sans-serif;
    color: #000;
    background-color: #e3e6ed;
}

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

.app-dialog {
    padding: 0;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    /* 90% of the viewport less whatever the display cutouts claim of it: centred, a dialog taller than that
       would run under the status bar and the home indicator at once. Both are 0px in a browser tab. */
    max-height: calc(90vh - var(--safe-top) - var(--safe-bottom));
    flex-direction: column;
    position: relative;
}

.app-dialog[open] {
    display: flex;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

.app-dialog::backdrop {
    background: rgba(20, 30, 25, 0.55);
    backdrop-filter: blur(3px);
}

.app-dialog-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    color: #fff;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
    flex-shrink: 0;
}

.app-dialog-header.info    { background: linear-gradient(135deg, #0d6efd 0%, #0856c9 100%); }
.app-dialog-header.warning { background: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-color-dark) 100%); }
.app-dialog-header.error   { background: linear-gradient(135deg, #dc3545 0%, #b02a37 100%); }
.app-dialog-header.special { background: linear-gradient(135deg, var(--special-color) 0%, var(--special-color-dark) 100%); }

.app-dialog-header i {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.app-dialog-title {
    font-size: 1.05rem;
    font-weight: 600;
}

.app-dialog-body {
    padding: 1.25rem 1.5rem 0.5rem;
    overflow-y: auto;
    min-height: 0;
}

.app-dialog-message {
    color: #444;
    font-size: 0.95rem;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.app-dialog-footer {
    padding: 0.75rem 1.5rem 1.25rem;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    flex-shrink: 0;
}

.app-dialog-footer .btn {
    min-width: 90px;
}

.btn-primary {
    color: var(--primary-bg-color-dark);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--primary-color-dark);
    border-color: var(--primary-color-dark);
    color: var(--primary-bg-color-dark);
}

.btn-primary:disabled, .btn-primary.disabled {
    background-color: var(--primary-color-light);
    border-color: var(--primary-color-light);
    color: var(--primary-bg-color-dark);
    opacity: 1;
}

.btn-outline-primary {
    color: var(--primary-color-dark);
    border-color: var(--primary-color);
    background-color: transparent;
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
    color: var(--primary-bg-color-dark);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline-primary:disabled, .btn-outline-primary.disabled {
    color: var(--primary-color-light);
    border-color: var(--primary-color-light);
    background-color: transparent;
    opacity: 1;
}

.btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

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

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

.btn-warning:hover, .btn-warning:focus {
    color: #fff;
    background-color: var(--warning-color-dark);
    border-color: var(--warning-color-dark);
}

.btn-special:hover,
.btn-special:focus {
    color: #fff;
    background-color: var(--special-color-dark);
    border-color: var(--special-color-dark);
}

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

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

a:hover {
    color: var(--primary-color-dark);
}

.btn:focus, .btn:active:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--primary-color);
}

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

.btn:has(> .bi) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ── Underline form theme ── */
.form-label {
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 2px;
}

.form-control,
.form-select {
    border: none;
    border-bottom: 1.5px solid #d1d5db;
    border-radius: 0;
    background-color: transparent;
    padding-left: 0;
    box-shadow: none;
    font-weight: 300;
    font-size: inherit;
}

.form-control:focus,
.form-select:focus {
    border-bottom-color: var(--primary-color);
    background-color: transparent;
    box-shadow: none;
}

.form-control:disabled,
.form-select:disabled {
    background-color: transparent;
    border-bottom-style: dashed;
}

.input-group-text {
    border: none;
    background: transparent;
    padding-left: 0.25rem;
}

.drop-zone {
    position: relative;
    border: 1.5px dashed var(--primary-bg-color-dark);
    border-radius: 4px;
    padding: 8px 8px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    color: var(--primary-bg-color-dark);
    font-size: 0.85rem;
    user-select: none;
}

.drop-zone.drag-over {
    background-color: var(--primary-color-light);
    border-color: var(--primary-bg-color-dark);
    border-width: 2px;
}

.drop-zone-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}

.drop-zone-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    pointer-events: none;
    width: 100%;
    color: var(--primary-bg-color-dark);
    font-size: 0.8rem;
}

.drop-zone-progress .progress {
    width: 80%;
}

.drop-zone-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.section-title {
    font-size: 1rem;
    font-weight: 300;
    color: #1a1a1a;
    padding-left: 9px;
    border-left: 3px solid var(--primary-color);
    line-height: 1.2;
    margin-bottom: 0.6rem;
}

/* ── Text input (span + edit icon, becomes input on click) ── */
/* When combined with form-control, box-model (padding/border/line-height) matches
   the input exactly — so switching to edit mode causes zero layout shift. */
.text-input-display {
    position: relative;
    padding-right: 2rem !important;
    background: transparent;
    border-color: transparent;
    cursor: pointer;
}

.text-input-display:hover {
    border-color: #d1d5db;
}

.text-input-value {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.text-input-value:empty::before {
    content: "\2014";
    color: #9ca3af;
}

.text-input-placeholder,
.text-input-textarea::placeholder {
    color: #9ca3af;
    font-style: italic;
    font-weight: 100;
}

.text-input-edit-icon {
    position: absolute !important; /* beats tooltip's [title] position:relative */
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 1rem;
    line-height: 1;
}

.text-input-display:hover .text-input-edit-icon {
    color: var(--primary-color);
}

.text-input-textarea {
    resize: none;
    overflow: hidden;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    min-height: 0 !important;
}

/* ── Property status badge colors ── */
.status-draft { background-color: #cfe2ff; color: #084298; }
.status-available { background-color: #198754; color: #ffffff; }
.status-reserved { background-color: #fd7e14; color: #ffffff; }
.status-sold { background-color: #d4a017; color: #ffffff; }
.status-inactive { background-color: #6c757d; color: #ffffff; }

/* Status <select> rendered as a colored pill — strips the form-select underline.
   Combine with a .status-* class to get the correct background/text colors. */
.status-select {
    border: none;
    border-radius: 20px;
    padding: 0.35rem 2rem 0.35rem 0.9rem;
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 14px;
}

.status-select.status-draft {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23084298'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

.status-select:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--primary-color);
    outline: none;
}

.status-select option {
    background-color: #fff;
    color: #1f2937;
    font-weight: 400;
}

/* ── Tab control ── */
.tab-control {
    display: block;
    width: 100%;
}

/* ── Island: white card with shadow. Reusable content container. ── */
.island {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 2px 10px rgba(0, 0, 0, 0.04);
    padding: 18px 22px;
    margin-bottom: 1.25rem;
}

.island-title {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #64748b;
    display: block;
    margin: 5px 0;
}

.island p {
    margin: 0;
    white-space: pre-wrap;
    line-height: 1.7;
    color: #334155;
    font-size: 0.92rem;
}

/* ── Picture thumb placeholder background ──
   Shown behind <img> thumbs while the picture loads, and inside explicit
   "no picture" placeholder divs. Uses the Bootstrap Icons bi-image glyph
   inline as an SVG so it renders even before the icon font is available. */
.picture-thumb-bg {
    background-color: #f3f4f6;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23c9ccd1' viewBox='0 0 16 16'%3E%3Cpath d='M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0'/%3E%3Cpath d='M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 40%;
    background-origin: content-box;
}

/* ── Section tabs (pill style) ── */
.section-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    background: #dbdee1;
    padding: 0.35rem;
    border-radius: 20px;
    margin-bottom: 1.5rem;
    list-style: none;
    width: 100%;
}

.section-tabs .nav-item {
    display: inline-flex;
}

.section-tabs button.nav-link {
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.45rem 1rem;
    border: none;
    border-radius: 999px;
    white-space: nowrap;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.15s, background 0.15s;
}

.section-tabs button.nav-link:hover:not(.active) {
    color: #111827;
    background: #ffffff;
}

    .section-tabs button.nav-link.active {
        background: white;
        color: black;
        box-shadow: 0 1px 4px var(--primary-bg-color-dark);
    }

@media (max-width: 576px) {
    .section-tabs button.nav-link {
        padding: 0.4rem 0.75rem;
        font-size: 0.72rem;
    }
}

.count-badge {
    background: #e5e7eb;
    color: #6b7280;
    font-size: 0.62rem;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 700;
    display: inline-block;
}

.nav-link.has-error {
    color: #dc3545;
}

.error-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 6px;
    border-radius: 50%;
    background: #dc3545;
    vertical-align: middle;
}

.btn-primary,
.btn-secondary {
    border-radius: 20px;
}

/* ── Page footer (sticky dark pill, centered) ── */
.page-footer {
    position: fixed;
    left: 50%;
    /* Clear of the home indicator when installed standalone; 0px in a browser tab. */
    bottom: calc(1rem + var(--safe-bottom));
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--primary-bg-color-dark);
    color: #fff;
    border-radius: 12px;
    padding: 0.55rem 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    animation: page-footer-slide-up 0.25s ease-out;
    max-width: calc(100% - 2rem);
}

@keyframes page-footer-slide-up {
    from { transform: translate(-50%, 20px); opacity: 0; }
    to   { transform: translate(-50%, 0); opacity: 1; }
}

.page-footer-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

.page-footer-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 0.25rem;
}

.page-footer-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.page-footer .btn {
    border-radius: 8px;
    font-size: 0.85rem;
    padding: 0.4rem 1.1rem;
    font-weight: 500;
}

.btn-ghost {
    background: transparent;
    color: rgba(0, 0, 0, 0.65);
    border: none;
}

.btn-ghost:hover,
.btn-ghost:focus {
    color: #000;
    background: rgba(0, 0, 0, 0.08);
}

.page-footer .btn-ghost {
    color: rgba(255, 255, 255, 0.85);
}

.page-footer .btn-ghost:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 576px) {
    .page-footer .btn {
        font-size: 0;
        padding: 0.4rem 0.7rem;
        gap: 0;
    }
    .page-footer .btn .bi {
        font-size: 1rem;
    }
}

@media (min-width: 992px) {
    .page-footer .notes-footer-btn {
        display: none;
    }
}

dialog.property-notes-dialog .notes-panel-header {
    padding: 1rem 1.25rem;
    gap: 0.75rem;
}

.page-footer-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fbbf24;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.25);
    display: inline-block;
}

.content {
    padding-top: 0.5rem;
    /* 1.5rem of gutter is 12% of a 390px phone before anything inside has drawn a border. Narrow screens buy
       that back for the content; wider ones keep the roomier margin. */
    padding-inline: 0.75rem;
    overflow-x: auto;
    overflow-y: clip;
    min-height: 50vh;
    /* The room the floating .page-footer bar hovers in — raised by the same inset the bar is, so the last row
       of a page still clears it when installed standalone. */
    padding-bottom: calc(5rem + var(--safe-bottom));
}

@media (min-width: 577px) {
    .content {
        padding-inline: 1.5rem;
    }
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    border-bottom-color: var(--primary-color);
}

.invalid,
.form-control.invalid,
.form-select.invalid {
    border-bottom-color: #dc3545;
}

.validation-message {
    padding: 0.15rem 0.4rem;
    border-radius: 0 0 4px 4px;
    font-size: 0.85em;
    display: block;
    background-color: #dc3545;
    color: #fff;
}

.validation-error   { background-color: #dc3545; color: #fff; }
.validation-warning { background-color: #f0ad4e; color: #fff; }
.validation-info    { background-color: #1a73e8; color: #fff; }
.validation-success { background-color: var(--primary-color); color: #fff; }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

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

.progress {
    background-color: transparent;
}

.toast-container {
    position: fixed;
    /* Clear of the status bar the page runs under when installed standalone; 0px in a browser tab. */
    top: calc(1.5rem + var(--safe-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 280px;
    max-width: 480px;
    pointer-events: all;
}

.toast-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.25rem;
    border-radius: 8px;
    font-size: 1.05rem;
    color: #fff;
    animation: toast-in 0.2s ease;
}

.toast-success { background-color: rgba(var(--primary-color-rgb), 0.88); }
.toast-error   { background-color: rgba(220, 53, 69, 0.88); }
.toast-info    { background-color: rgba(26, 115, 232, 0.88); }

.toast-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    opacity: 0.8;
    flex-shrink: 0;
}

.toast-close:hover { opacity: 1; }

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

.message-board {
    z-index: 99;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.message-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    color: #fff;
    animation: toast-in 0.2s ease;
}

.message-info    { background-color: rgba(var(--primary-color-rgb), 0.92); color: var(--primary-bg-color-dark); }
.message-warning { background-color: rgba(200, 120, 0, 0.92); }
.message-error   { background-color: rgba(220, 53, 69, 0.92); }

.message-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    opacity: 0.8;
    flex-shrink: 0;
}

.message-close:hover { opacity: 1; }

.quickgrid td {
    vertical-align: middle;
    border: 0;
}

.quickgrid th {
    border: 0;
    background: none;
}

.quickgrid tbody tr:nth-child(odd) td {
    background-color: #f8fafb;
}

.quickgrid tbody tr:nth-child(even) td {
    background-color: #fff;
}

.quickgrid[theme=default] .col-title {
    font-weight: 300 !important;
}

.quickgrid[theme=default] th .col-options-button {
    --filter-icon-color: #1a1a1a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231a1a1a'%3E%3Cpath d='M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E") !important;
}

.quickgrid[theme=default] th.active-filter .col-options-button {
    --filter-icon-color: #1a1a1a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231a1a1a'%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M3.5 5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1 0-1' fill='white'/%3E%3Cpath d='M5 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m2 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5' fill='white'/%3E%3C/svg%3E") !important;
}

.quickgrid[theme=default] > tbody > tr {
    --col-gap: 0;
}

.quickgrid[theme=default] > tbody > tr > td {
    padding: 0;
}

.quickgrid[theme=default] > tbody > tr[aria-rowindex] > td {
    padding: 4px;
}


.form-info {
    font-size: 0.88rem;
    color: #6b7280;
    padding: 0.2rem 0;
    border-bottom: 1.5px dashed #d1d5db;
}

/* ── App header items ── */
.header-link {
    font-family: 'Lexend', sans-serif;
    font-size: 0.86rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    padding: 0;
}

.header-link:hover,
.header-link.active {
    color: #fff;
}

/* The round outlined target the bar's two icon controls share — the account avatar and the hamburger. Stated
   once here, in a global sheet, because neither component's scoped sheet can be seen from the other and the
   two are supposed to be indistinguishable. Size stays with the caller: the avatar has a larger variant for
   the account sheet. */
.nav-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border-radius: 50%;
    background: none;
    border: 2px solid rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.7);
    transition: border-color .15s ease, color .15s ease;
}

/* Hover and the open state read the same. The hamburger carries `aria-expanded` itself; the avatar's sits on
   the button wrapping it, so UserAccountMenu hands the avatar the class instead. */
.nav-icon-circle:hover,
.nav-icon-circle[aria-expanded="true"],
.nav-icon-circle-active {
    border-color: #fff;
    color: #fff;
}

.nav-icon-circle:focus-visible {
    outline: none;
    box-shadow: var(--nav-icon-focus-ring);
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 100;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.8rem;
}
h3 {
    font-size: 1.6rem;
}

.badge {
    font-weight: 100;
}

.app-card {
    border: none;
    border-top: 3px solid var(--primary-color);
    border-radius: 0 0 12px 12px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

@supports not (backdrop-filter: blur(1px)) {
    .app-card {
        background: rgba(255, 255, 255, 0.97);
    }
}

dt {
    font-weight: 100;
}

p, dd {
    font-weight: 400;
}

.fst-italic {
    font-weight: 100;
}

/* ── Tooltips ────────────────────────────────────────────────────── */
/* Excludes .bi (Bootstrap Icons) — they use ::before for the glyph, and
   overriding it here would replace the icon with the tooltip text. To show a
   tooltip on an icon, wrap it in a span carrying the title attribute. */
[title]:not([title=""]):not(.bi):not([class*=" bi-"]):not([class^="bi-"]) {
    position: relative;
}

    [title]:not([title=""]):not(.bi):not([class*=" bi-"]):not([class^="bi-"])::before {
        content: attr(title);
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        background: #1a2333;
        color: #fff;
        font-size: 0.775rem;
        font-family: Lexend, sans-serif;
        font-weight: 400;
        padding: 0.3rem 0.65rem;
        border-radius: 5px;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.12s ease;
        z-index: 10000;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
        letter-spacing: 0.01em;
        overflow: visible;
    }

[title]:not([title=""]):not(.bi):not([class*=" bi-"]):not([class^="bi-"])::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1a2333;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
    z-index: 10000;
}

[title]:not([title=""]):not(.bi):not([class*=" bi-"]):not([class^="bi-"]):hover::before,
[title]:not([title=""]):not(.bi):not([class*=" bi-"]):not([class^="bi-"]):hover::after {
    opacity: 1;
}

/* Flip tooltip below for PageHeader Back button (clipped by .content overflow otherwise) */
.page-header-back [title]:not([title=""])::before {
    bottom: auto;
    top: calc(100% + 8px);
}

.page-header-back [title]:not([title=""])::after {
    bottom: auto;
    top: calc(100% + 2px);
    border-top-color: transparent;
    border-bottom-color: #1a2333;
}

.text-warning {
    color: #f0ad4e;
}

/* ── Status pages (Error, NotFound) ── */
.status-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.status-card {
    background: white;
    border: 1px solid #cce5f6;
    border-radius: 16px;
    padding: 3rem 4rem;
    text-align: center;
    max-width: 680px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.status-icon {
    font-size: 5rem;
    margin-bottom: 1rem;
}

.status-card h1 {
    font-size: 1.8rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 0.75rem;
}

.status-subtitle {
    color: #555;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.status-actions {
    margin-bottom: 1.5rem;
}

/* On a phone the card's 2rem surround and its own 4rem gutters leave a 12rem reading column: the sentence
   breaks every three words and the button's label wraps onto two lines. Both give most of their width back. */
@media (max-width: 576px) {
    .status-page {
        padding: 1rem 0.75rem;
    }

    .status-card {
        padding: 2rem 1.25rem;
    }
}

/* ── A table too wide for the screen ──
   A table with more columns than a phone can hold scrolls sideways inside its own box, so the page around it —
   header, tab strip, row count, the floating footer bar — stays where the reader left it instead of sliding
   out of the viewport with the table. Wrap every table in one of these; `.content`'s own sideways scroll is
   then only the last resort for whatever is not wrapped. */
.table-scroll {
    overflow-x: auto;
    /* Swiping past the last column pans the grid, never the page behind it. */
    overscroll-behavior-x: contain;
}

/* A box that scrolls on one axis cannot stay `visible` on the other, so this one clips vertically too — and
   QuickGrid hangs its column-options popup out of the header row into exactly that space. The two rules below
   are what keep an open filter whole: the popup itself never grows past a screenful however many options the
   column has, and the box holding it is at least tall enough for one (the longest today measures 251px from
   the top of the grid, and a grid of two rows is shorter than that). */
.table-scroll .col-options {
    max-height: 15rem;
    overflow-y: auto;
}

.table-scroll:has(.col-options) {
    min-height: 17rem;
}

.centered-grid-wrapper {
    display: flex;
    flex-direction: column;
}

/* Centring is the table's own margin, never the flex line's: a table wider than the line is centred by
   hanging off BOTH edges, and a scroll container cannot reach what starts left of its content — those columns
   are simply unreachable. `auto` resolves to 0 at that width, so the scroll starts at the first column. */
.centered-grid-wrapper table.table {
    width: auto;
    margin-inline: auto;
}