:root {
    --ink: #0b1f2a;
    --navy: #123047;
    --teal: #1a6b63;
    --teal-deep: #0f4f4a;
    --teal-soft: #d7ebe8;
    --sand: #f6f1e8;
    --sand-dark: #ebe3d4;
    --paper: #fffdf8;
    --muted: #5c6b73;
    --line: #d5cdc0;
    --danger: #9b2c2c;
    --success: #1f6b3a;
    --warn: #8a5a12;
    --radius: 10px;
    --shadow: 0 10px 30px rgba(11, 31, 42, 0.08);
    --font-display: "Fraunces", Georgia, serif;
    --font-body: "Source Sans 3", "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    font-family: var(--font-body);
    background:
        radial-gradient(circle at top right, rgba(26, 107, 99, 0.12), transparent 40%),
        linear-gradient(180deg, var(--sand) 0%, var(--sand-dark) 100%);
}

a {
    color: var(--teal-deep);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.app-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
    transition: grid-template-columns 0.18s ease;
}

.app-shell.sidebar-collapsed {
    grid-template-columns: 72px 1fr;
}

.sidebar {
    background: linear-gradient(180deg, var(--navy) 0%, var(--ink) 100%);
    color: #f3efe6;
    padding: 1.5rem 1rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.sidebar-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.35rem;
}

.brand {
    font-family: var(--font-display);
    font-size: 1.45rem;
    letter-spacing: 0.01em;
    padding: 0.25rem 0.5rem;
    min-width: 0;
    color: #f3efe6;
    text-decoration: none;
}

.brand:hover {
    color: #fff;
    text-decoration: none;
}

.brand .brand-sub {
    display: block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    opacity: 0.7;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 0.2rem;
}

.nav-group {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.nav-group-admin {
    padding: 0.4rem 0.3rem 0.45rem;
    border-radius: 10px;
    background: rgba(212, 168, 67, 0.14);
    border: 1px solid rgba(212, 168, 67, 0.32);
    margin-bottom: 0.35rem;
}

.nav-group-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.72;
    padding: 0.2rem 0.75rem 0.1rem;
    margin: 0;
}

.nav-group-admin .nav-group-label {
    color: #f0e2b8;
}

.nav a.nav-admin {
    color: #f0e2b8;
}

.nav a.nav-admin:hover,
.nav a.nav-admin.is-active {
    background: rgba(212, 168, 67, 0.28);
    color: #fff8e7;
}

.sidebar-collapse {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    margin-top: 0.15rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: #f3efe6;
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
}

.sidebar-collapse:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.sidebar-collapse .ui-icon {
    width: 1.15rem;
    height: 1.15rem;
}

.sidebar-collapse-icon-collapsed {
    display: none;
}

.app-shell.sidebar-collapsed .sidebar-collapse-icon-expanded {
    display: none;
}

.app-shell.sidebar-collapsed .sidebar-collapse-icon-collapsed {
    display: inline-flex;
}

.nav {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.nav a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #e7e1d5;
    text-decoration: none;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    font-weight: 500;
    min-width: 0;
}

.nav a .ui-icon {
    flex: 0 0 auto;
    width: 1.2rem;
    height: 1.2rem;
    opacity: 0.9;
}

.nav a .nav-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav a:hover,
.nav a.is-active {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    text-decoration: none;
}

.sidebar-footer {
    margin-top: auto;
    padding: 0.75rem 0.35rem;
    font-size: 0.9rem;
    opacity: 0.85;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.sidebar-footer a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #f3efe6;
    text-decoration: none;
}

.sidebar-footer .notif-bell-side {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    text-align: left;
}

.app-shell.sidebar-collapsed .brand {
    font-size: 0;
    padding: 0.25rem 0;
}

.app-shell.sidebar-collapsed .brand .brand-sub,
.app-shell.sidebar-collapsed .nav-label,
.app-shell.sidebar-collapsed .sidebar-user {
    display: none;
}

.app-shell.sidebar-collapsed .sidebar-top {
    flex-direction: column;
    align-items: center;
}

.app-shell.sidebar-collapsed .nav a,
.app-shell.sidebar-collapsed .sidebar-footer a {
    justify-content: center;
    padding: 0.6rem 0.45rem;
}

.app-shell.sidebar-collapsed .sidebar-footer {
    align-items: center;
    padding-left: 0;
    padding-right: 0;
}

.app-shell.sidebar-collapsed .notif-bell-side {
    justify-content: center;
    width: auto;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.main {
    min-width: 0;
    padding: 1.75rem 2rem 3rem;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.page-header h1 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 2rem;
    color: var(--navy);
}

.page-header p {
    margin: 0.35rem 0 0;
    color: var(--muted);
}

.panel {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem 1.4rem;
}

.panel + .panel {
    margin-top: 1.25rem;
}

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

.stat {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    box-shadow: var(--shadow);
}

.stat .label {
    color: var(--muted);
    font-size: 0.85rem;
}

.stat .value {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--teal-deep);
    margin-top: 0.2rem;
}

.table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table.data {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

table.data th,
table.data td {
    text-align: left;
    padding: 0.7rem 0.65rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    /* max-width:0 forces ellipsis under table-layout:fixed */
    max-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.data th {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

table.data tr:hover td {
    background: rgba(26, 107, 99, 0.04);
}

/* Never put display:flex on the <td> — it breaks table column layout. */
table.data th.col-actions,
table.data td.row-actions {
    display: table-cell;
    width: 11rem;
    min-width: 11rem;
    max-width: 12rem;
    white-space: nowrap;
    text-align: right;
    overflow: hidden;
}

table.data td.admin-row-actions {
    display: table-cell;
    width: 18rem;
    min-width: 14rem;
    max-width: 22rem;
    white-space: nowrap;
    text-align: right;
    overflow: hidden;
}

table.data td.cell-date {
    width: 10rem;
    font-variant-numeric: tabular-nums;
}

table.data td.cell-wrap {
    white-space: normal;
    overflow: hidden;
    word-break: break-word;
    text-overflow: unset;
}

table.data td.table-empty,
table.data td[colspan] {
    max-width: none;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    color: var(--muted);
}

a.doc-id,
span.doc-id,
strong.doc-id {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    letter-spacing: 0.01em;
    vertical-align: middle;
}

.cell-ellipsis {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--teal-soft);
    color: var(--teal-deep);
    font-size: 0.78rem;
    font-weight: 600;
}

.btn,
button.btn,
input.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0.55rem 0.95rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    background: var(--teal);
    color: #fff;
}

.btn:hover {
    background: var(--teal-deep);
    text-decoration: none;
    color: #fff;
}

.btn-secondary {
    background: transparent;
    color: var(--navy);
    border-color: var(--line);
}

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

.btn-danger {
    background: var(--danger);
}

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

.flash {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
}

.flash-success {
    border-color: #b7d8c2;
    background: #edf8f0;
    color: var(--success);
}

.flash-error {
    border-color: #e2b6b6;
    background: #fdf1f1;
    color: var(--danger);
}

.flash-warning {
    border-color: #e6d3a6;
    background: #fff8eb;
    color: var(--warn);
}

.flash-info {
    border-color: #b7d4e0;
    background: #eff7fb;
    color: var(--navy);
}

.support-banner {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    background: var(--navy);
    color: #f4f7f6;
    font-size: 0.95rem;
    position: sticky;
    top: 0;
    z-index: 45;
}

.support-banner a {
    color: #d7ebe8;
}

.support-banner-impersonate {
    background: #6b3a1e;
}

.support-banner .btn {
    margin: 0;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
}

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

.form-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-row label {
    font-weight: 600;
    color: var(--navy);
    font-size: 0.92rem;
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row input[type="number"],
.form-row input[type="date"],
.form-row input[type="datetime-local"],
.form-row select,
.form-row textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    font: inherit;
    background: #fff;
    color: var(--ink);
}

/* Tom Select internals are not form fields — don't restyle them as full inputs. */
.form-row .ts-wrapper input,
.form-row .ts-control input,
.form-row .dropdown-input {
    width: auto;
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    min-height: 0;
}

.form-row textarea {
    min-height: 110px;
    resize: vertical;
}

.form-row ul {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--danger);
    font-size: 0.85rem;
}

.meta-list {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 0.45rem 1rem;
}

.meta-list dt {
    color: var(--muted);
    font-weight: 600;
}

.meta-list dd {
    margin: 0;
}

.activity {
    border-left: 3px solid var(--teal);
    padding: 0.6rem 0 0.6rem 0.9rem;
    margin-bottom: 0.85rem;
}

.activity .when {
    color: var(--muted);
    font-size: 0.85rem;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
}

.calendar-cell {
    min-height: 110px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.45rem;
}

.calendar-cell .day {
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 0.35rem;
}

.calendar-cell.is-today {
    border-color: var(--teal-deep);
    box-shadow: inset 0 0 0 1px rgba(26, 107, 99, 0.25);
    background: rgba(26, 107, 99, 0.04);
}

.calendar-cell .today-mark {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--teal-deep);
    margin-left: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.calendar-cell .job-chip {
    display: block;
    font-size: 0.78rem;
    background: var(--teal-soft);
    color: var(--teal-deep);
    border-radius: 6px;
    padding: 0.2rem 0.35rem;
    margin-bottom: 0.25rem;
    text-decoration: none;
}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem;
    background:
        linear-gradient(135deg, rgba(18, 48, 71, 0.92), rgba(15, 79, 74, 0.88)),
        radial-gradient(circle at 20% 20%, #d7ebe8, transparent 45%),
        var(--sand);
}

.login-card {
    width: min(420px, 100%);
    background: var(--paper);
    border-radius: 14px;
    padding: 2rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

.login-card h1 {
    margin: 0 0 0.35rem;
    font-family: var(--font-display);
    color: var(--navy);
}

.login-card .sub {
    color: var(--muted);
    margin-bottom: 1.5rem;
}

.login-card .form-row {
    margin-bottom: 1rem;
}

.login-error {
    background: #fdf1f1;
    color: var(--danger);
    border: 1px solid #e2b6b6;
    border-radius: 8px;
    padding: 0.65rem 0.8rem;
    margin-bottom: 1rem;
}

.split-2 {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 1.25rem;
}

.admin-shell .sidebar {
    background: linear-gradient(180deg, #0d2436 0%, #07151f 100%);
}

.admin-icon,
.ui-icon {
    display: inline-flex;
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.15em;
    flex-shrink: 0;
}

.admin-icon svg,
.ui-icon svg {
    width: 100%;
    height: 100%;
}

.admin-nav a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.admin-nav-office {
    margin-top: 0.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 0.85rem !important;
}

.admin-user-chip {
    font-weight: 600;
    margin-bottom: 0.55rem;
}

.admin-logout-btn {
    width: 100%;
    justify-content: center;
}

.admin-actions,
.admin-chip-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.admin-actions .btn,
.admin-chip-nav .btn,
.admin-row-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.btn-sm {
    padding: 0.4rem 0.7rem;
    font-size: 0.88rem;
    border-radius: 8px;
}

.admin-panel-head {
    margin-bottom: 1rem;
    padding: 0;
}

.admin-panel-head h2 {
    margin: 0;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.admin-panel-head p {
    margin: 0.25rem 0 0;
}

.admin-stats .stat .label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.admin-status {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.admin-status.is-on {
    background: rgba(31, 107, 58, 0.12);
    color: var(--success);
}

.admin-status.is-off {
    background: rgba(155, 44, 44, 0.12);
    color: var(--danger);
}

.admin-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.admin-row-actions form {
    display: inline;
    margin: 0;
}

.admin-link-strong {
    font-weight: 700;
    text-decoration: none;
}

.admin-main .page-header h1 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.admin-main .panel h2 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.admin-mobile-topbar .nav-toggle,
.admin-mobile-topbar .mobile-logout {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.admin-mobile-bottom {
    display: none;
}

.portal-body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    color: var(--ink);
    background:
        radial-gradient(circle at top right, rgba(26, 107, 99, 0.14), transparent 42%),
        linear-gradient(180deg, var(--sand) 0%, var(--sand-dark) 100%);
}

.portal-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(180deg, var(--navy) 0%, var(--ink) 100%);
    color: #f3efe6;
    position: sticky;
    top: 0;
    z-index: 10;
}

.portal-brand strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.25rem;
}

.portal-brand span {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
}

.portal-nav {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.portal-nav a {
    color: #e7e1d5;
    text-decoration: none;
    font-weight: 600;
}

.portal-nav a.is-active,
.portal-nav a:hover {
    color: #fff;
    text-decoration: none;
}

.portal-user {
    opacity: 0.8;
    font-size: 0.9rem;
}

.portal-main {
    padding: 1.25rem 1.25rem 2.5rem;
    max-width: 920px;
    margin: 0 auto;
}

.portal-section-title {
    margin: 0 0 0.85rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--navy);
}

.portal-help {
    color: var(--muted);
    margin: 1.25rem 0 0;
    font-size: 0.95rem;
}

.mobile-topbar,
.mobile-bottom {
    display: none;
}

.hint {
    color: var(--muted);
    font-size: 0.9rem;
}

.stack-form .form-row {
    margin-bottom: 0.75rem;
}

.calendar-list {
    display: none;
}

.calendar-list .day-block {
    border-bottom: 1px solid var(--line);
    padding: 0.75rem 0;
}

.calendar-list .day-block strong {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--navy);
}

@media (max-width: 960px) {
    .app-shell,
    .app-shell.sidebar-collapsed {
        grid-template-columns: 1fr;
        padding-bottom: 0;
    }

    .sidebar-collapse {
        display: none;
    }

    .app-shell.sidebar-collapsed .brand {
        font-size: 1.45rem;
    }

    .app-shell.sidebar-collapsed .brand .brand-sub,
    .app-shell.sidebar-collapsed .nav-label,
    .app-shell.sidebar-collapsed .sidebar-user {
        display: block;
    }

    .app-shell.sidebar-collapsed .nav a,
    .app-shell.sidebar-collapsed .sidebar-footer a {
        justify-content: flex-start;
        padding: 0.55rem 0.75rem;
    }

    .admin-shell {
        padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px));
    }

    .support-banner {
        padding: 0.45rem 0.75rem;
        font-size: 0.82rem;
        gap: 0.45rem;
        top: 0;
    }

    .support-banner .btn {
        padding: 0.35rem 0.65rem;
        font-size: 0.8rem;
        min-height: 0;
    }

    .mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        position: sticky;
        top: 0;
        z-index: 30;
        padding: 0.55rem 0.75rem;
        background: var(--navy);
        color: #f3efe6;
    }

    /* When support banner is present, stick topbar below it */
    .app-shell:has(.support-banner) .mobile-topbar {
        top: 0;
    }

    .admin-mobile-topbar {
        background: linear-gradient(180deg, #0d2436 0%, #0a1c2b 100%);
    }

    .admin-mobile-bottom {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 35;
        background: #0d2436;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0.35rem 0.2rem calc(0.35rem + env(safe-area-inset-bottom));
    }

    .admin-mobile-bottom a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.15rem;
        color: #c9d4dc;
        text-decoration: none;
        font-size: 0.68rem;
        font-weight: 600;
        padding: 0.35rem 0.15rem;
    }

    .admin-mobile-bottom a .admin-icon {
        width: 1.25rem;
        height: 1.25rem;
    }

    .admin-mobile-bottom a.is-active,
    .admin-mobile-bottom a:hover {
        color: #fff;
    }

    .admin-main .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
    }

    .admin-main .page-header .actions,
    .admin-actions {
        width: 100%;
    }

    .admin-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
        min-height: 2.6rem;
    }

    .admin-chip-nav {
        margin-bottom: 1rem;
    }

    .admin-chip-nav .btn {
        flex: 1 1 calc(50% - 0.55rem);
        justify-content: center;
    }

    .admin-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .mobile-brand {
        font-family: var(--font-display);
        font-weight: 700;
        color: #fff;
        text-decoration: none;
    }

    .mobile-brand:hover {
        color: #fff;
        text-decoration: none;
    }

    .nav-toggle,
    .mobile-logout {
        border: 1px solid rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
        border-radius: 8px;
        padding: 0.4rem 0.7rem;
        font: inherit;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
    }

    .sidebar {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 50;
        height: 100dvh;
        max-height: none;
        overflow: auto;
        padding-top: 1rem;
        padding-bottom: 5rem;
    }

    .app-shell.nav-open .sidebar {
        display: flex;
    }

    .app-shell.nav-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(11, 31, 42, 0.45);
        z-index: 45;
    }

    .nav {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .mobile-bottom {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 35;
        background: var(--paper);
        border-top: 1px solid var(--line);
        box-shadow: 0 -8px 24px rgba(11, 31, 42, 0.08);
        padding: 0.3rem 0.2rem calc(0.3rem + env(safe-area-inset-bottom));
    }

    .mobile-bottom a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.12rem;
        text-align: center;
        font-size: 0.68rem;
        font-weight: 700;
        color: var(--muted);
        text-decoration: none;
        padding: 0.35rem 0.15rem;
        border-radius: 8px;
        min-width: 0;
    }

    .mobile-bottom a .ui-icon {
        width: 1.2rem;
        height: 1.2rem;
    }

    .mobile-bottom a .nav-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    .mobile-bottom a.is-active {
        color: var(--teal-deep);
        background: var(--teal-soft);
    }

    .main {
        /* Clear fixed bottom nav (icon + label + safe area) */
        padding: 0.85rem 0.8rem calc(5.75rem + env(safe-area-inset-bottom, 0px));
    }

    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
        margin-bottom: 1rem;
    }

    .page-header h1 {
        font-size: 1.45rem;
    }

    .page-header p {
        font-size: 0.9rem;
    }

    .page-header .actions,
    .admin-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    .page-header .btn,
    .page-header .actions .btn,
    .admin-actions .btn {
        flex: 1 1 calc(50% - 0.3rem);
        text-align: center;
        justify-content: center;
        min-height: 2.55rem;
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }

    .page-header .actions .btn:last-child:nth-child(odd) {
        flex: 1 1 100%;
    }

    .form-grid,
    .split-2 {
        grid-template-columns: 1fr;
    }

    .calendar-grid {
        display: none;
    }

    .calendar-list {
        display: block;
    }

    .portal-main {
        padding: 1rem;
    }

    .meta-list {
        grid-template-columns: 1fr;
    }

    .panel {
        padding: 0.9rem;
    }

    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .stat .value {
        font-size: 1.45rem;
    }

    .notif-bell {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.4rem;
        height: 2.4rem;
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
        flex: 0 0 auto;
    }

    .notif-panel[hidden],
    .notif-panel-float[hidden] {
        display: none !important;
    }

    .notif-panel-float {
        top: auto;
        bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
        right: 0.65rem;
        left: 0.65rem;
        width: auto;
        max-height: min(50vh, 320px);
    }

    .form-row input,
    .form-row select,
    .form-row textarea,
    .ts-wrapper {
        max-width: 100%;
    }

    .form-row .ts-wrapper input,
    .form-row .dropdown-input {
        max-width: none;
        width: auto;
        border: none;
        padding: 0;
        background: transparent;
    }

    .input-narrow,
    .form-row.compact-field input {
        max-width: 100%;
    }

}


/* —— Marketing site (MovingAdvisor greens / oranges) —— */
.site-body {
    --ma-green: #1fa85d;
    --ma-green-ui: #1d7d5a;
    --ma-green-deep: #13543c;
    --ma-orange: #dd6700;
    --ma-orange-logo: #f48c22;
    --ma-red: #da1b21;
    --ma-text: #333333;
    --ma-muted: #5c6b73;
    --ma-soft: #e8f1ed;
    --ma-bg: #f4f5f7;
    --ma-paper: #ffffff;
    --ma-font: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ma-display: "Source Serif 4", Georgia, serif;
    margin: 0;
    color: var(--ma-text);
    font-family: var(--ma-font);
    background:
        radial-gradient(circle at 12% 0%, rgba(31, 168, 93, 0.14), transparent 42%),
        linear-gradient(180deg, #f7faf8 0%, var(--ma-bg) 55%, #eef2f0 100%);
    min-height: 100vh;
}

.site-body a {
    color: var(--ma-green-ui);
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(19, 84, 60, 0.12);
}

.site-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    color: var(--ma-text);
}

.site-logo img,
.site-logo-mark {
    display: block;
    height: 36px;
    width: 36px;
}

.site-logo-word {
    font-family: var(--ma-display);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    color: var(--ma-text);
}

.site-logo-tag {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ma-green-ui);
    border: 1px solid rgba(29, 125, 90, 0.35);
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.site-nav a {
    font-weight: 600;
    text-decoration: none;
    color: var(--ma-text);
}

.site-nav a.is-active,
.site-nav a:hover {
    color: var(--ma-green-ui);
}

.site-nav-toggle {
    display: none;
    border: 1.5px solid var(--ma-green-ui);
    background: var(--ma-soft);
    color: var(--ma-green-deep);
    border-radius: 8px;
    padding: 0.5rem 0.85rem;
    font: inherit;
    font-weight: 700;
    margin-left: auto;
}

.site-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: var(--ma-orange);
    color: #fff !important;
    border: none;
    border-radius: 10px;
    padding: 0.7rem 1.15rem;
    font-weight: 700;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(221, 103, 0, 0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.site-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(221, 103, 0, 0.28);
}

.site-btn-ghost {
    background: transparent;
    color: var(--ma-green-deep) !important;
    border: 1.5px solid rgba(29, 125, 90, 0.45);
    box-shadow: none;
}

.site-btn-lg {
    padding: 0.9rem 1.35rem;
    font-size: 1.05rem;
}

.site-hero {
    position: relative;
    min-height: min(92vh, 760px);
    display: grid;
    align-items: end;
    color: #fff;
    overflow: hidden;
}

.site-hero-media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    animation: siteHeroZoom 18s ease-in-out infinite alternate;
}

.site-hero-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(14, 63, 45, 0.82) 0%, rgba(14, 63, 45, 0.45) 48%, rgba(14, 63, 45, 0.2) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.55));
}

.site-hero-copy {
    position: relative;
    z-index: 1;
    padding: 3.5rem 1.5rem 3rem;
    max-width: 40rem;
}

.site-kicker {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ma-orange-logo);
    margin: 0 0 0.75rem;
}

.site-hero h1,
.site-page-hero h1,
.site-section h2,
.site-closing h2 {
    font-family: var(--ma-display);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.site-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    margin: 0 0 0.85rem;
    color: #fff;
    max-width: 14ch;
    animation: siteFadeUp 0.7s ease both;
}

.site-lede {
    font-size: 1.125rem;
    line-height: 1.55;
    margin: 0 0 1.4rem;
    max-width: 38ch;
    opacity: 0.95;
}

.site-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.site-hero .site-btn-ghost {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.65);
}

.site-section {
    padding: 3.5rem 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.site-section-tint {
    background: var(--ma-soft);
    max-width: none;
    padding-left: max(1.5rem, calc((100% - 1100px) / 2 + 1.5rem));
    padding-right: max(1.5rem, calc((100% - 1100px) / 2 + 1.5rem));
}

.site-proof {
    text-align: center;
    padding-top: 2.25rem;
    padding-bottom: 1rem;
    color: var(--ma-muted);
    font-weight: 600;
}

.site-split {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 2.5rem;
    align-items: center;
}

.site-split-reverse {
    direction: rtl;
}

.site-split-reverse > * {
    direction: ltr;
}

.site-media {
    margin: 0;
    overflow: hidden;
    border-radius: 4px;
}

.site-media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.site-text-link {
    font-weight: 700;
    text-decoration: none;
}

.site-features {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem 1.5rem;
}

.site-features li {
    padding-top: 0.85rem;
    border-top: 2px solid var(--ma-green);
}

.site-features strong {
    display: block;
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
}

.site-features span {
    color: var(--ma-muted);
    line-height: 1.45;
}

.site-section-intro {
    color: var(--ma-muted);
    max-width: 42ch;
}

.site-closing {
    text-align: center;
    padding-bottom: 4.5rem;
}

.site-closing .site-btn {
    margin-top: 0.5rem;
}

.site-page-hero {
    padding: 3rem 1.5rem 1rem;
    max-width: 800px;
    margin: 0 auto;
}

.site-page-hero-compact {
    padding-bottom: 0;
}

.site-page-hero h1 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin: 0 0 0.75rem;
    color: var(--ma-green-deep);
}

.site-feature-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1.75rem;
}

.site-feature-list li {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(19, 84, 60, 0.12);
}

.site-feature-list h2 {
    margin: 0 0 0.4rem;
    font-size: 1.45rem;
    color: var(--ma-green-deep);
}

.site-price {
    max-width: 420px;
    margin: 0 auto;
    padding: 1.75rem 0;
}

.site-price-amount {
    font-family: var(--ma-display);
    font-size: 2.4rem;
    margin: 0 0 1rem;
    color: var(--ma-green-deep);
}

.site-price-amount span {
    color: var(--ma-orange);
}

.site-price ul {
    padding-left: 1.1rem;
    margin: 0 0 1.5rem;
    color: var(--ma-muted);
    line-height: 1.6;
}

.site-register {
    max-width: 560px;
}

.site-form {
    display: grid;
    gap: 0.9rem;
}

.site-form label {
    display: grid;
    gap: 0.35rem;
    font-weight: 600;
    font-size: 0.92rem;
}

.site-form input {
    border: 1px solid #c9d4ce;
    border-radius: 10px;
    padding: 0.7rem 0.8rem;
    font: inherit;
    background: #fff;
}

.site-form input:focus {
    outline: 2px solid rgba(31, 168, 93, 0.35);
    border-color: var(--ma-green);
}

.site-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
}

.site-captcha {
    border: 1px dashed rgba(29, 125, 90, 0.45);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    margin: 0;
    background: rgba(232, 241, 237, 0.65);
}

.site-captcha legend {
    font-weight: 700;
    padding: 0 0.35rem;
}

.site-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.site-errors {
    background: #fde8e8;
    border: 1px solid #f5c2c2;
    color: #8a1f1f;
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

.site-errors p {
    margin: 0.2rem 0;
}

.site-form-note {
    color: var(--ma-muted);
    font-size: 0.9rem;
}

.site-prose {
    max-width: 680px;
    line-height: 1.65;
    color: var(--ma-muted);
}

.site-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    justify-content: space-between;
    padding: 2.5rem 1.5rem 3rem;
    border-top: 1px solid rgba(19, 84, 60, 0.12);
    background: #fff;
}

.site-footer-brand {
    max-width: 28rem;
}

.site-footer-brand strong {
    color: var(--ma-green-deep);
}

.site-footer-brand p,
.site-footer-links {
    color: var(--ma-muted);
}

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.25rem;
    align-content: flex-start;
}

.site-footer-links a {
    font-weight: 600;
    text-decoration: none;
}

@keyframes siteHeroZoom {
    from { transform: scale(1.02); }
    to { transform: scale(1.08); }
}

@keyframes siteFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* —— Marketing interactive demo + docs —— */
.site-brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.75rem;
    font-family: var(--ma-display);
    font-weight: 700;
    font-size: 1.35rem;
    color: #fff;
}

.site-brand-lockup img {
    width: 40px;
    height: 40px;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}

.site-hero-demo {
    min-height: 72vh;
}

.site-demo-section {
    padding-top: 0.5rem;
}

.site-demo-head {
    text-align: center;
    max-width: 36rem;
    margin: 0 auto 1.5rem;
}

.site-demo-head h2 {
    margin-bottom: 0.4rem;
}

.site-demo {
    max-width: 920px;
    margin: 0 auto;
}

.site-demo-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.site-demo-steps button {
    border: 1px solid rgba(19, 84, 60, 0.2);
    background: #fff;
    color: var(--ma-text);
    border-radius: 999px;
    padding: 0.55rem 1rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.site-demo-steps button.is-active {
    background: var(--ma-green-ui);
    border-color: var(--ma-green-ui);
    color: #fff;
    transform: translateY(-1px);
}

.site-demo-stage {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(19, 84, 60, 0.14);
    background: #0f2433;
    box-shadow: 0 28px 60px rgba(15, 36, 51, 0.28);
    animation: siteFadeUp 0.7s ease both;
}

.site-demo-chrome {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 0.9rem;
    background: #162b3c;
    color: #9fb0bc;
    font-size: 0.78rem;
}

.site-demo-chrome span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #3d5566;
}

.site-demo-chrome span:nth-child(1) { background: #da1b21; }
.site-demo-chrome span:nth-child(2) { background: #f48c22; }
.site-demo-chrome span:nth-child(3) { background: #1fa85d; }

.site-demo-chrome em {
    margin-left: 0.5rem;
    font-style: normal;
}

.site-demo-panels {
    position: relative;
    min-height: 320px;
}

.site-demo-panel {
    display: none;
    grid-template-columns: 140px 1fr;
    min-height: 320px;
}

.site-demo-panel.is-active {
    display: grid;
    animation: siteFadeUp 0.45s ease both;
}

.demo-sidebar {
    background: #123047;
    color: #c9d4dc;
    padding: 1rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    font-size: 0.85rem;
}

.demo-sidebar strong {
    color: #fff;
    margin-bottom: 0.35rem;
}

.demo-sidebar .is-on {
    color: #fff;
    background: rgba(31, 168, 93, 0.25);
    border-radius: 8px;
    padding: 0.35rem 0.5rem;
    font-weight: 700;
}

.demo-main {
    background: #f7faf8;
    color: var(--ma-text);
    padding: 1.1rem 1.25rem 1.25rem;
}

.demo-main header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.demo-main h3 {
    margin: 0;
    font-size: 1.2rem;
}

.demo-pill {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(29, 125, 90, 0.15);
    color: var(--ma-green-deep);
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
}

.demo-pill-orange {
    background: rgba(221, 103, 0, 0.15);
    color: #a34d00;
}

.demo-pill-green {
    background: rgba(31, 168, 93, 0.18);
    color: #0f6e56;
}

.demo-form {
    display: grid;
    gap: 0.75rem;
}

.demo-form label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ma-muted);
}

.demo-form p {
    margin: 0.15rem 0 0;
    min-height: 1.35rem;
    font-weight: 600;
    font-size: 1.05rem;
}

.demo-bar {
    height: 8px;
    background: rgba(19, 84, 60, 0.1);
    border-radius: 999px;
    overflow: hidden;
}

.demo-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--ma-green-ui), var(--ma-orange));
    animation: demoBar 1.2s ease both;
}

@keyframes demoBar {
    from { width: 0 !important; }
}

.demo-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.35rem;
    border: none;
    border-radius: 10px;
    background: var(--ma-orange);
    color: #fff !important;
    font: inherit;
    font-weight: 700;
    padding: 0.7rem 1rem;
    cursor: pointer;
    text-decoration: none !important;
    box-shadow: 0 10px 22px rgba(221, 103, 0, 0.22);
}

.demo-lines {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.demo-lines li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(19, 84, 60, 0.1);
}

.demo-total {
    font-size: 1.1rem;
    border-bottom: none !important;
}

.demo-cal {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.demo-cal-day {
    background: #fff;
    border: 1px solid rgba(19, 84, 60, 0.12);
    border-radius: 12px;
    padding: 0.7rem;
    min-height: 96px;
}

.demo-cal-day.is-busy {
    border-color: rgba(31, 168, 93, 0.45);
    background: linear-gradient(180deg, #e8f7ef, #fff);
    animation: demoPulse 1.6s ease infinite alternate;
}

@keyframes demoPulse {
    from { transform: translateY(0); }
    to { transform: translateY(-3px); }
}

.demo-cal-day small {
    display: block;
    color: var(--ma-muted);
    font-weight: 700;
}

.demo-cal-day strong {
    display: block;
    margin-top: 0.35rem;
}

.demo-cal-day em {
    display: block;
    font-style: normal;
    font-size: 0.8rem;
    color: var(--ma-muted);
    margin-top: 0.2rem;
}

.site-docs-hero {
    padding-bottom: 0.5rem;
}

.site-docs h2 {
    margin-top: 2rem;
}

.site-docs-list {
    margin: 0.75rem 0 1rem;
    padding-left: 1.2rem;
}

.site-docs-list li {
    margin: 0.35rem 0;
}

.site-code {
    display: block;
    margin: 0.85rem 0 1.25rem;
    padding: 1rem 1.1rem;
    background: #0f2433;
    color: #d7ebe8;
    border-radius: 12px;
    overflow-x: auto;
    font-size: 0.85rem;
    line-height: 1.45;
    white-space: pre-wrap;
}

@media (max-width: 720px) {
    .site-demo-panel,
    .site-demo-panel.is-active {
        grid-template-columns: 1fr;
    }

    .demo-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .demo-cal {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .site-nav-toggle {
        display: inline-flex;
    }

    .site-nav {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #fff;
        border-bottom: 1px solid rgba(19, 84, 60, 0.12);
        padding: 0.5rem 0;
    }

    .site-nav.is-open {
        display: flex;
    }

    .site-nav a {
        padding: 0.85rem 1.25rem;
        border-top: 1px solid rgba(19, 84, 60, 0.08);
    }

    .site-split,
    .site-split-reverse,
    .site-features,
    .site-form-row {
        grid-template-columns: 1fr;
        direction: ltr;
    }

    .site-hero {
        min-height: 78vh;
    }

    .site-hero-copy {
        padding: 2.5rem 1.15rem 2.25rem;
    }
}


/* —— Office CRM polish —— */
/* Flex lives on an inner wrapper, never on the <td>. */
.row-actions-inner,
.admin-row-actions-inner {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    align-items: center;
    justify-content: flex-end;
    max-width: 100%;
}

.row-actions .btn,
.admin-row-actions .btn,
.page-header .btn,
.actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-top: 1rem;
    padding-top: 0.25rem;
}

.pager-meta {
    color: var(--muted);
    font-size: 0.9rem;
}

.pager-meta-alone {
    margin: 0.85rem 0 0;
}

.pager .btn.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.row-link {
    font-weight: 700;
    text-decoration: none;
}

.cell-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.cell-with-icon.cell-ellipsis {
    display: inline-flex;
}

.stat-accent .value {
    color: var(--teal-deep, var(--teal));
}

.chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.chart-panel h2 {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
}

.chart-wrap {
    position: relative;
    min-height: 180px;
}

.chart-wrap-sm {
    max-width: 320px;
    min-height: 240px;
    margin: 0 auto;
}

.api-key-box label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-bottom: 0.35rem;
}

.api-key-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.api-key-row input {
    flex: 1;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88rem;
}

.muted-note {
    margin: 0.55rem 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.code-block {
    display: block;
    margin: 0.65rem 0;
    padding: 0.75rem 0.9rem;
    background: #0f2433;
    color: var(--teal-soft);
    border-radius: 10px;
    overflow-x: auto;
    font-size: 0.85rem;
}

.leadsys-hint {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.leadsys-hint h3 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
}

@media (max-width: 960px) {
    .chart-grid {
        grid-template-columns: 1fr;
    }

    /* Beat table.data td { max-width:0 } (higher specificity) — was truncating cards to 1–2 letters. */
    table.data.office-table,
    table.data.admin-table {
        display: block;
        width: 100%;
        table-layout: auto;
    }

    table.data.office-table thead,
    table.data.admin-table thead {
        display: none;
    }

    table.data.office-table tbody,
    table.data.admin-table tbody,
    table.data.office-table tr,
    table.data.admin-table tr {
        display: block;
        width: 100%;
    }

    table.data.office-table tr,
    table.data.admin-table tr {
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 0.75rem 0.9rem;
        margin-bottom: 0.75rem;
        box-shadow: var(--shadow);
    }

    table.data.office-table tr:has(td[colspan]),
    table.data.admin-table tr:has(td[colspan]) {
        box-shadow: none;
        padding: 0.85rem;
    }

    table.data.office-table th,
    table.data.office-table td,
    table.data.admin-table th,
    table.data.admin-table td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.85rem;
        padding: 0.45rem 0;
        border: none;
        border-bottom: 1px solid rgba(11, 31, 42, 0.06);
        max-width: none !important;
        width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        text-align: left;
        vertical-align: top;
    }

    table.data.office-table td:last-child,
    table.data.admin-table td:last-child {
        border-bottom: none;
        padding-top: 0.65rem;
    }

    table.data.office-table td::before,
    table.data.admin-table td::before {
        content: attr(data-label);
        flex: 0 0 7.5rem;
        max-width: 42%;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--muted);
        white-space: normal;
        overflow: visible;
    }

    table.data.office-table td > *,
    table.data.admin-table td > * {
        flex: 1 1 auto;
        min-width: 0;
        text-align: right;
        max-width: none;
        overflow: visible;
        white-space: normal;
    }

    table.data.office-table td:not([data-label])::before,
    table.data.admin-table td:not([data-label])::before,
    table.data.office-table td[colspan]::before,
    table.data.admin-table td[colspan]::before {
        content: none;
        display: none;
    }

    table.data.office-table td[colspan],
    table.data.admin-table td[colspan],
    table.data.office-table td.table-empty,
    table.data.admin-table td.table-empty {
        display: block;
        text-align: left;
    }

    table.data.office-table td[colspan] > *,
    table.data.admin-table td[colspan] > *,
    table.data.office-table td.table-empty > *,
    table.data.admin-table td.table-empty > * {
        text-align: left;
    }

    table.data.office-table td.row-actions,
    table.data.admin-table td.admin-row-actions,
    table.data.office-table td.row-actions.col-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100% !important;
    }

    table.data.office-table td.row-actions::before,
    table.data.admin-table td.admin-row-actions::before {
        flex: none;
        max-width: none;
        margin-bottom: 0.25rem;
    }

    table.data.office-table td.row-actions > *,
    table.data.admin-table td.admin-row-actions > * {
        text-align: left;
        width: 100%;
    }

    table.data.office-table .row-actions-inner,
    table.data.admin-table .row-actions-inner,
    table.data.office-table .admin-row-actions,
    table.data.admin-table .admin-row-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        width: 100%;
    }

    table.data.office-table .row-actions .btn,
    table.data.admin-table .admin-row-actions .btn {
        flex: 1 1 calc(50% - 0.25rem);
        justify-content: center;
        min-height: 2.4rem;
    }

    table.data.office-table .cell-ellipsis,
    table.data.admin-table .cell-ellipsis,
    table.data.office-table .row-link,
    table.data.admin-table .row-link,
    table.data.office-table a.doc-id,
    table.data.office-table span.doc-id,
    table.data.office-table strong.doc-id,
    table.data.admin-table a.doc-id,
    table.data.admin-table span.doc-id,
    table.data.admin-table strong.doc-id {
        max-width: none !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    .table-wrap {
        overflow: visible;
    }

    .pulse-kpis,
    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kanban {
        display: flex;
        gap: 0.75rem;
        scroll-snap-type: x mandatory;
        padding-bottom: 0.5rem;
    }

    .kanban-col {
        flex: 0 0 min(82vw, 280px);
        scroll-snap-align: start;
        max-height: none;
    }

    .chip-select-options,
    .chip-radio {
        gap: 0.35rem;
    }

    .chip-option,
    .chip-radio label {
        padding: 0.4rem 0.7rem;
        font-size: 0.84rem;
    }

    .form-actions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .form-actions .btn {
        width: 100%;
        justify-content: center;
        min-height: 2.65rem;
    }
}

/* —— Forms: typeahead, chips, compact move fields —— */
.form-row.compact-field input,
.input-narrow {
    max-width: 8.5rem;
}

.form-row.move-detail-field {
    align-content: start;
}

.field-help {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: var(--muted);
}

/* Bootstrap5 Tom Select theme expects --bs-* vars we don't load. */
:root {
    --bs-body-bg: #fff;
    --bs-body-color: var(--ink);
    --bs-border-radius: 10px;
}

.ts-wrapper {
    width: 100%;
}

.ts-control {
    border: 1.5px solid var(--line) !important;
    border-radius: 10px !important;
    padding: 0.45rem 0.65rem !important;
    min-height: 2.6rem;
    background: #fff !important;
    box-shadow: none !important;
}

.ts-wrapper.focus .ts-control {
    border-color: var(--teal, var(--teal)) !important;
    box-shadow: 0 0 0 3px rgba(26, 107, 99, 0.12) !important;
}

.ts-dropdown {
    position: absolute;
    z-index: 90;
    margin-top: 0.2rem;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.ts-dropdown .ts-dropdown-content {
    max-height: 240px;
    overflow-y: auto;
    background: #fff;
}

.ts-dropdown .option {
    padding: 0.55rem 0.75rem;
    line-height: 1.35;
    color: var(--ink);
}

.ts-dropdown .option.active,
.ts-dropdown .option.selected {
    background: rgba(26, 107, 99, 0.12);
    color: var(--teal-deep, var(--navy));
}

.ts-dropdown .dropdown-input-wrap {
    padding: 0.45rem 0.55rem;
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.ts-dropdown .dropdown-input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.4rem 0.55rem;
    font: inherit;
    background: #fff;
}

select.is-chip-source {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
}

.chip-select {
    position: relative;
}

.chip-select-options,
.chip-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.chip-option,
.chip-radio label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1.5px solid var(--line);
    background: #fff;
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.chip-option:hover,
.chip-radio label:hover {
    border-color: rgba(26, 107, 99, 0.45);
}

.chip-option.is-selected {
    background: rgba(26, 107, 99, 0.12);
    border-color: var(--teal, var(--teal));
    color: var(--teal-deep, var(--teal));
}

.chip-radio input {
    accent-color: var(--teal, var(--teal));
}

.crew-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.35rem 0.75rem;
}

.company-logo-preview {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.company-logo-preview img {
    max-height: 56px;
    width: auto;
    object-fit: contain;
}

.human-date-today {
    color: var(--teal-deep, var(--teal));
    font-weight: 700;
}

/* —— Lead kanban + follow-ups —— */
.kanban {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
    align-items: start;
}
.kanban-col {
    background: rgba(26, 107, 99, 0.04);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.65rem;
    min-height: 180px;
}
.kanban-col header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.55rem;
    font-size: 0.85rem;
}
.kanban-col header span {
    background: #fff;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    font-weight: 700;
    color: var(--muted);
}
.kanban-cards {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.kanban-card {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.65rem 0.7rem;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow);
}
.kanban-card:hover {
    border-color: rgba(26, 107, 99, 0.35);
}
.kanban-card strong {
    font-size: 0.95rem;
}
.follow-up-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.follow-up-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(11, 31, 42, 0.06);
}
.follow-up-list li.is-done {
    opacity: 0.55;
}
.follow-up-list .muted-note {
    display: block;
}

/* Public quote CTA forms inline */
.site-cta-row form {
    display: inline;
    margin: 0;
}

/* Calendar capacity + DnD */
.capacity-bar {
    height: 4px;
    background: rgba(11, 31, 42, 0.08);
    border-radius: 99px;
    margin: 0.25rem 0 0.4rem;
    overflow: hidden;
}
.capacity-bar span {
    display: block;
    height: 100%;
    background: var(--teal);
}
.capacity-bar span.is-hot {
    background: #b45309;
}
.capacity-bar span.is-over {
    background: #b42318;
}
.calendar-drop.is-drop-target {
    outline: 2px dashed rgba(26, 107, 99, 0.45);
    background: rgba(26, 107, 99, 0.06);
}
.job-chip.is-dragging {
    opacity: 0.45;
}

.empty-state {
    padding: 1.25rem 0.25rem;
    display: grid;
    gap: 0.65rem;
    justify-items: start;
}

/* Crew today */
.crew-today-list {
    display: grid;
    gap: 0.85rem;
}
.crew-job-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    background: #fff;
}
.crew-job-card header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: center;
    margin-bottom: 0.35rem;
}
.crew-job-customer {
    font-weight: 600;
    margin: 0.2rem 0 0.45rem;
}
.crew-job-card .muted {
    color: var(--muted);
    font-size: 0.85rem;
}
.crew-notes,
.crew-eta {
    margin-top: 0.55rem;
    padding: 0.45rem 0.6rem;
    background: rgba(26, 107, 99, 0.06);
    border-radius: 8px;
    font-size: 0.92rem;
}

/* Cmd-K search */
.cmdk {
    position: fixed;
    inset: 0;
    z-index: 80;
}
.cmdk-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 31, 42, 0.45);
}
.cmdk-panel {
    position: relative;
    width: min(560px, calc(100% - 2rem));
    margin: 12vh auto 0;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(11, 31, 42, 0.28);
    padding: 0.85rem;
}
.cmdk-panel input {
    width: 100%;
    font-size: 1.05rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 10px;
}
#cmdk-results {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    max-height: 50vh;
    overflow: auto;
}
#cmdk-results li a {
    display: block;
    padding: 0.55rem 0.4rem;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
}
#cmdk-results li a:hover {
    background: rgba(26, 107, 99, 0.08);
}
.cmdk-hint {
    margin: 0.55rem 0 0;
    font-size: 0.8rem;
    color: var(--muted);
}

/* Mapbox address suggest */
.form-row:has(.address-suggest),
.form-row:has(input[data-address-suggest]) {
    position: relative;
}
.address-suggest {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 0.15rem);
    z-index: 90;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
    display: none;
    max-height: 220px;
    overflow: auto;
}
.address-suggest.is-open {
    display: block;
}
.address-suggest li {
    padding: 0.55rem 0.75rem;
    cursor: pointer;
    font-size: 0.92rem;
}
.address-suggest li:hover {
    background: rgba(26, 107, 99, 0.08);
}

/* Kanban DnD */
.kanban-col.is-drop-target {
    outline: 2px dashed rgba(26, 107, 99, 0.45);
    background: rgba(26, 107, 99, 0.05);
}
.kanban-card {
    position: relative;
    display: block;
}
.kanban-card.is-dragging {
    opacity: 0.45;
}
.kanban-card > a {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-decoration: none;
    color: inherit;
}
.kanban-check {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
}

/* Notifications */
.notif-bell {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    position: relative;
}
.notif-badge {
    display: inline-flex;
    min-width: 1.1rem;
    height: 1.1rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #b42318;
    color: #fff;
    font-size: 0.7rem;
    margin-left: 0.25rem;
    padding: 0 0.3rem;
}
.notif-panel {
    max-height: 280px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow);
}
.notif-panel-float {
    position: fixed;
    top: 3.5rem;
    right: 1rem;
    width: min(360px, calc(100% - 2rem));
    z-index: 70;
}
.notif-item {
    display: block;
    padding: 0.55rem 0.65rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid rgba(11, 31, 42, 0.06);
}
.notif-item.is-unread {
    background: rgba(26, 107, 99, 0.06);
}
.notif-item span {
    display: block;
    font-size: 0.85rem;
    color: var(--muted);
}
.row-alert td {
    background: rgba(180, 83, 9, 0.06);
}
.notif-item.is-unread {
    font-weight: 600;
}
.pipeline-hint-mobile,
.cal-hint-mobile {
    display: none;
}
.kanban {
    overflow-x: auto;
    padding-bottom: 0.25rem;
}
@media (max-width: 960px) {
    .pipeline-hint-desktop,
    .cal-hint-desktop {
        display: none;
    }
    .pipeline-hint-mobile,
    .cal-hint-mobile {
        display: block;
    }
    .pipeline-bulk {
        display: none !important;
    }
    .toast-container {
        bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    }
}
@media (min-width: 961px) {
    .toast-container {
        bottom: 1rem;
    }
}

/* Pulse KPIs */
.pulse-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}
.pulse-kpis .stat {
    padding: 0.65rem 0.85rem;
}
.pulse-kpis .stat .value {
    font-size: 1.45rem;
}

/* Status pills */
.status-pill {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    background: var(--teal-soft);
    color: var(--teal-deep);
    text-transform: capitalize;
}
.status-pill--binding { background: #e8f0f8; color: #1e4a6e; }
.status-pill--expired { background: #fde8e8; color: #9b1c1c; }
.status-pill--accepted,
.status-pill--booked,
.status-pill--completed { background: #d7f5e8; color: var(--teal); }
.status-pill--sent,
.status-pill--quote_sent { background: #e8eef2; color: #3d5260; }
.status-pill--draft,
.status-pill--new { background: #eef2f5; color: #5c6b73; }
.status-pill--lost,
.status-pill--declined { background: #fde8e8; color: #9b1c1c; }
.status-pill--confirmed { background: #dbeafe; color: #1d4ed8; }
.status-pill--crew_assigned { background: #d7f5e8; color: var(--teal); }
.status-pill--en_route,
.status-pill--in_transit { background: #ffedd5; color: #c2410c; }
.status-pill--loading,
.status-pill--unloading { background: #fef3c7; color: #b45309; }
.status-pill--issue_reported { background: #fde8e8; color: #7f1d1d; }

/* Dispatch board */
.dispatch-board { overflow-x: auto; }
.dispatch-grid {
    display: grid;
    grid-template-columns: 120px repeat(7, minmax(110px, 1fr));
    gap: 0.35rem;
    min-width: 900px;
}
.dispatch-col-head,
.dispatch-row-head {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    padding: 0.35rem;
}
.dispatch-row-head { align-self: start; }
.dispatch-cell {
    min-height: 72px;
    background: rgba(11, 31, 42, 0.03);
    border-radius: 8px;
    padding: 0.25rem;
}
.dispatch-card {
    display: block;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.35rem 0.45rem;
    margin-bottom: 0.25rem;
    text-decoration: none;
    color: inherit;
    font-size: 0.78rem;
    box-shadow: var(--shadow);
}
.dispatch-card-time { display: block; font-weight: 600; color: var(--teal-deep); }
.dispatch-card-num { display: block; }
.dispatch-card-meta { display: block; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Job timeline */
.job-timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1rem;
    border-left: 2px solid var(--line);
}
.job-timeline li {
    position: relative;
    padding: 0 0 1rem 1rem;
}
.job-timeline li::before {
    content: '';
    position: absolute;
    left: -1.35rem;
    top: 0.35rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--teal);
}
.job-timeline time {
    display: block;
    font-size: 0.82rem;
    color: var(--muted);
    margin-top: 0.2rem;
}

/* Public quote */
.public-quote .signature-canvas {
    width: 100%;
    max-width: 480px;
    border: 1px solid #d5ddd8;
    border-radius: 10px;
    background: #fff;
    touch-action: none;
    cursor: crosshair;
}
.public-quote .signature-preview {
    max-width: 280px;
    background: #fff;
    border: 1px solid #d5ddd8;
    border-radius: 8px;
    margin-top: 0.5rem;
}
.public-quote .signature-block {
    margin: 1rem 0;
    padding: 1rem;
    background: rgba(11, 31, 42, 0.03);
    border-radius: 10px;
}
.public-quote .accept-form { flex: 1 1 100%; }

/* Catalog picker */
.catalog-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.5rem;
}
.catalog-picker-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.catalog-picker-item:hover { border-color: var(--teal); background: var(--teal-soft); }
.catalog-picker-item span { font-size: 0.78rem; color: var(--muted); }

/* Skills chips */
.skill-chip {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    margin: 0.1rem 0.15rem 0.1rem 0;
    border-radius: 999px;
    background: var(--teal-soft);
    color: var(--teal-deep);
    font-size: 0.74rem;
}

/* Checklist */
.checklist-list { list-style: none; margin: 0; padding: 0; }
.checklist-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--line);
}
.checklist-status-form select { font-size: 0.85rem; }

/* Portal stepper */
.portal-stepper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1rem;
}
.portal-step {
    font-size: 0.72rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: rgba(11, 31, 42, 0.06);
    color: var(--muted);
}
.portal-step.is-current {
    background: var(--teal-soft);
    color: var(--teal-deep);
    font-weight: 600;
}

/* Toast notifications */
.toast-container {
    position: fixed;
    right: 1rem;
    bottom: 4.5rem;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 320px;
    pointer-events: none;
}
.toast {
    padding: 0.65rem 0.85rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--teal);
    border-radius: 10px;
    box-shadow: var(--shadow);
    font-size: 0.88rem;
    pointer-events: auto;
    animation: toast-in 0.25s ease;
}
@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Owner feature toggles */
.feature-toggle-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
}
.feature-toggle {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    cursor: pointer;
}
.feature-toggle input { margin-top: 0.25rem; }
.feature-toggle span { display: flex; flex-direction: column; gap: 0.15rem; }

/* Embed self-book slots */
.book-slots {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}
.book-slot a,
.book-slot > span {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border: 1px solid #d5ddd8;
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    color: inherit;
}
.book-slot.is-open a:hover {
    border-color: #1a7a6d;
    background: #eef7f5;
}
.book-slot.is-full > span {
    opacity: 0.55;
}
.book-slot span span {
    font-size: 0.85rem;
    color: #5a6b7a;
}


/* MovingAdvisor styles — split by surface; do not re-monolith. */