:root {
    --bg: #f5f7fb;
    --card: #ffffff;
    --ink: #182235;
    --muted: #65748b;
    --line: #dce3ef;
    --primary: #0b2447;
    --primary-2: #163e75;
    --accent: #f9b233;
    --danger: #b42318;
    --success: #047857;
    --warning: #a16207;
    --radius: 16px;
    --shadow: 0 18px 42px rgba(24, 34, 53, 0.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.5;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 28px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(10px);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 265px;
}

.brand:hover { text-decoration: none; }
.brand small { display: block; color: var(--muted); font-size: 12px; }

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--primary), var(--primary-2));
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 8px 20px rgba(11, 36, 71, 0.22);
}

.nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

.nav a {
    display: inline-block;
    padding: 9px 12px;
    border-radius: 999px;
    color: var(--muted);
    font-size: 14px;
}

.nav a:hover {
    background: #eef3fb;
    color: var(--primary);
    text-decoration: none;
}

.user-chip {
    padding: 8px 12px;
    background: #eef3fb;
    border-radius: 999px;
    color: var(--primary);
    font-weight: 700;
    font-size: 14px;
}

.container {
    width: min(1220px, calc(100% - 32px));
    margin: 28px auto 60px;
}

.footer {
    width: min(1220px, calc(100% - 32px));
    margin: 20px auto;
    color: var(--muted);
    font-size: 13px;
}

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 20px;
}

.page-head h1 {
    margin: 0 0 4px;
    font-size: clamp(28px, 4vw, 42px);
    letter-spacing: -0.03em;
}

.muted { color: var(--muted); }
.small { font-size: 13px; }

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px;
}

.card + .card { margin-top: 18px; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.stat-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
}

.stat-card strong {
    display: block;
    font-size: 30px;
    line-height: 1;
    margin-bottom: 8px;
}

.filter-card {
    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

label {
    display: block;
    font-weight: 700;
    font-size: 14px;
    color: var(--ink);
}

input, select, textarea {
    width: 100%;
    margin-top: 6px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 11px 12px;
    background: #fff;
    color: var(--ink);
    font: inherit;
}

textarea { min-height: 120px; resize: vertical; }

input:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(11, 36, 71, 0.12);
    outline: none;
}

.button,
button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 10px 16px;
    background: #fff;
    color: var(--primary);
    font-weight: 800;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.button:hover,
button:hover { text-decoration: none; background: #eef3fb; }

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

.button-primary:hover { background: var(--primary-2); color: #fff; }
.button-danger { border-color: #fecaca; color: var(--danger); }
.button-mini { min-height: 32px; padding: 6px 11px; font-size: 13px; }

.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.table-wrap {
    overflow-x: auto;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    text-align: left;
}

th {
    background: #f8fafc;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

tr:last-child td { border-bottom: 0; }

.status-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.status-blank { background: #eef2f7; color: #475569; }
.status-no-answer { background: #fef3c7; color: #92400e; }
.status-job-lost { background: #fee2e2; color: #991b1b; }
.status-requires-quote { background: #dcfce7; color: #166534; }

.quote-badge {
    display: inline-block;
    margin-top: 6px;
    border-radius: 9px;
    background: #e0f2fe;
    color: #075985;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 700;
}

.alert {
    margin: 0 0 16px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: #eef3fb;
}

.alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-info { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }

.login-page,
.install-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.login-card,
.install-card {
    width: min(520px, 100%);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow);
    padding: 30px;
}

.login-card h1,
.install-card h1 { margin: 14px 0 8px; }

.stacked-form { display: grid; gap: 15px; margin-top: 18px; }

.code-box {
    min-height: 170px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
}

.checklist { padding-left: 20px; }
.checklist li { margin: 8px 0; }

.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
    gap: 18px;
}

.form-section-title {
    margin: 0 0 14px;
    font-size: 20px;
}

.note-list { display: grid; gap: 12px; }
.note-item {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    background: #fbfdff;
}
.note-item p { white-space: pre-wrap; margin: 8px 0 0; }

.empty-state {
    text-align: center;
    padding: 34px 18px;
    color: var(--muted);
}

.client-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.client-title h1 { margin: 0; }

.call-box {
    background: linear-gradient(145deg, #0b2447, #163e75);
    border-radius: var(--radius);
    padding: 20px;
    color: #fff;
    box-shadow: var(--shadow);
}
.call-box a { color: #fff; text-decoration: underline; }
.call-box .button { background: #fff; color: var(--primary); border-color: #fff; }

.import-help code { background: #eef3fb; padding: 2px 6px; border-radius: 6px; }

@media (max-width: 980px) {
    .topbar { position: static; flex-direction: column; align-items: flex-start; padding: 16px; }
    .brand { min-width: auto; }
    .user-chip { align-self: flex-start; }
    .page-head, .detail-layout { display: block; }
    .page-head .actions { margin-top: 14px; }
    .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
    .card { padding: 18px; }
    th, td { padding: 12px; }
}

/* v3 layout updates: full-width call table, PBM logo, inline row editing, and spam handling. */
.brand-logo {
    display: block;
    width: 132px;
    height: auto;
    max-height: 58px;
    object-fit: contain;
}

.login-logo,
.install-logo {
    display: block;
    width: min(210px, 78%);
    height: auto;
    margin-bottom: 10px;
}

.container-wide {
    width: calc(100% - 24px);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

.footer {
    width: calc(100% - 24px);
    max-width: none;
}

.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stats-grid .stat-card { min-height: 100%; }

.filter-search { min-width: 300px; flex: 1 1 380px; }
.filter-select { min-width: 210px; flex: 0 0 220px; }

input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    margin-top: 0;
    font-weight: 800;
    white-space: nowrap;
}

.show-spam-toggle {
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
}

.table-wrap-wide {
    width: 100%;
}

.call-table {
    min-width: 1500px;
    table-layout: fixed;
}

.call-table th,
.call-table td {
    padding: 12px 12px;
}

.call-table .date-col { width: 145px; }
.call-table .client-col { width: 230px; }
.call-table .contact-col { width: 180px; }
.call-table .service-col { width: 190px; }
.call-table .status-col { width: 180px; }
.call-table .quote-when-col { width: 155px; }
.call-table .comment-col { width: 330px; }
.call-table .save-col { width: 92px; text-align: center; }

.inline-table-form select,
.inline-table-form input,
.inline-table-form textarea {
    margin-top: 0;
    border-radius: 10px;
    padding: 9px 10px;
}

.inline-table-form textarea {
    min-height: 72px;
}

.inline-spam-check {
    margin-top: 8px;
    color: var(--muted);
    font-size: 13px;
}

.latest-note-preview {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.status-spam {
    background: #e2e8f0;
    color: #334155;
}

.spam-row {
    background: #f8fafc;
    opacity: 0.88;
}

@media (max-width: 980px) {
    .container-wide { width: calc(100% - 16px); }
    .grid-6 { grid-template-columns: 1fr; }
    .brand-logo { width: 124px; }
    .filter-search,
    .filter-select { min-width: 100%; flex-basis: 100%; }
}


/* v4 updates: dark header, smaller PBM logo, and remember-login controls. */
.topbar {
    background: linear-gradient(135deg, #071a33, #0b2447);
    border-bottom-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 28px rgba(7, 26, 51, 0.22);
}

.topbar .brand,
.topbar .brand strong,
.topbar .nav a {
    color: #ffffff;
}

.topbar .brand small {
    color: rgba(255, 255, 255, 0.72);
}

.topbar .nav a {
    background: rgba(255, 255, 255, 0.06);
}

.topbar .nav a:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.topbar .user-chip {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.brand-logo {
    width: 92px;
    max-height: 42px;
    padding: 0;
}

.brand {
    min-width: 245px;
}

.remember-login {
    justify-content: flex-start;
}

.remember-help {
    margin: -8px 0 0;
}

@media (max-width: 980px) {
    .brand-logo { width: 88px; max-height: 40px; }
}

.login-logo,
.install-logo {
    width: min(160px, 62%);
}

/* v5 updates: dashboard, left category menu, quote value, ICS, and editable categories. */
.app-shell {
    display: flex;
    align-items: flex-start;
    gap: 0;
    width: 100%;
}

.side-menu {
    position: sticky;
    top: 74px;
    flex: 0 0 230px;
    min-height: calc(100vh - 74px);
    padding: 18px 12px;
    background: #ffffff;
    border-right: 1px solid var(--line);
    box-shadow: 12px 0 28px rgba(24, 34, 53, 0.04);
}

.side-menu-title {
    padding: 0 10px 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.side-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--ink);
    font-weight: 800;
}

.side-link strong {
    display: inline-flex;
    min-width: 28px;
    justify-content: center;
    border-radius: 999px;
    background: #eef3fb;
    color: var(--primary);
    padding: 2px 8px;
    font-size: 12px;
}

.side-link:hover,
.side-link.active {
    background: #eef3fb;
    text-decoration: none;
}

.side-manage {
    display: block;
    margin: 14px 10px 0;
    font-size: 13px;
    font-weight: 900;
}

.app-shell > .container {
    flex: 1 1 auto;
    min-width: 0;
    margin: 24px 16px 60px;
}

.app-shell > .container-wide {
    width: auto;
    max-width: none;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.metric-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow);
}

.metric-card span,
.metric-card small {
    display: block;
    color: var(--muted);
    font-weight: 800;
}

.metric-card strong {
    display: block;
    margin: 8px 0;
    font-size: clamp(28px, 3.5vw, 44px);
    line-height: 1;
    letter-spacing: -0.04em;
}

.metric-primary {
    background: linear-gradient(145deg, #0b2447, #163e75);
    color: #fff;
}

.metric-primary span,
.metric-primary small { color: rgba(255,255,255,0.78); }
.metric-value strong { font-size: clamp(24px, 3vw, 36px); }

.monthly-card { margin-bottom: 16px; }
.monthly-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.month-bars { display: grid; gap: 9px; }
.month-row { display: grid; grid-template-columns: 110px minmax(120px, 1fr) 45px; align-items: center; gap: 12px; }
.month-row span { color: var(--muted); font-weight: 800; }
.month-bar { height: 10px; overflow: hidden; border-radius: 999px; background: #eef3fb; }
.month-bar i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.month-row strong { text-align: right; }

.call-table { min-width: 1640px; }
.call-table .quote-value-col { width: 120px; }
.call-table .calendar-col { width: 86px; text-align: center; }
.call-table .comment-col { width: 300px; }
/* v7 update: quote date and quote time share one compact table cell. */
.quote-when-fields { display: grid; gap: 8px; }
.quote-when-fields input { width: 100%; }
.inline-money { text-align: right; }

.categories-table .sort-input { max-width: 90px; }
.categories-table small { display: block; margin-top: 5px; }
.add-category-form { align-items: end; }
.category-check { min-height: 44px; align-items: center; }
.status-custom { background: #ede9fe; color: #5b21b6; }

@media (max-width: 1180px) {
    .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .side-menu { flex-basis: 200px; }
}

@media (max-width: 980px) {
    .app-shell { display: block; }
    .side-menu {
        position: static;
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 12px;
    }
    .side-menu-title,
    .side-manage { display: none; }
    .side-link { flex: 0 0 auto; min-width: 145px; }
    .app-shell > .container { margin: 16px 8px 50px; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .month-row { grid-template-columns: 92px minmax(90px, 1fr) 36px; }
}

/* v8 updates: consistent compact table text, collapsible sidebar, quote-flow categories, and allocation controls. */
.call-table,
.call-table th,
.call-table td,
.call-table input,
.call-table select,
.call-table textarea,
.call-table .button,
.call-table button,
.call-table a,
.call-table label,
.inline-table-form {
    font-size: 13.5px;
}

.call-table th {
    font-size: 13px;
    letter-spacing: 0.045em;
}

.call-table .small,
.call-table .muted,
.call-table .latest-note-preview,
.call-table .inline-spam-check {
    font-size: 13.5px;
}

.call-table {
    min-width: 1560px;
}

.call-table th,
.call-table td {
    padding: 10px 10px;
}

.call-table .date-col { width: 128px; }
.call-table .client-col { width: 205px; }
.call-table .contact-col { width: 158px; }
.call-table .service-col { width: 165px; }
.call-table .alloc-col { width: 112px; }
.call-table .status-col { width: 150px; }
.call-table .quote-when-col { width: 138px; }
.call-table .quote-value-col { width: 104px; }
.call-table .calendar-col { width: 72px; }
.call-table .comment-col { width: 270px; }
.call-table .save-col { width: 76px; }

.inline-table-form select,
.inline-table-form input,
.inline-table-form textarea {
    padding: 8px 9px;
    line-height: 1.25;
}

.inline-table-form textarea {
    min-height: 66px;
}

.inline-alloc-check,
.inline-spam-check {
    display: flex;
    margin: 0 0 7px;
    gap: 6px;
    font-size: 13.5px;
}

.inline-alloc-check:last-child,
.inline-spam-check:last-child {
    margin-bottom: 0;
}

.status-new-lead { background: #e0f2fe; color: #075985; }

.side-menu,
.side-menu a,
.side-menu-title,
.side-link,
.side-manage {
    font-size: 13.5px;
}

.side-menu {
    flex-basis: 205px;
    transition: flex-basis 0.18s ease, width 0.18s ease, min-width 0.18s ease, padding 0.18s ease, opacity 0.18s ease;
}

.side-link {
    padding: 8px 10px;
    border-radius: 10px;
}

.side-link strong {
    min-width: 24px;
    padding: 1px 7px;
    font-size: 12px;
}

.sidebar-toggle {
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 13.5px;
    font-weight: 800;
}

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

body.sidebar-collapsed .side-menu {
    flex-basis: 0;
    width: 0;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    border-right: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

body.sidebar-collapsed .app-shell > .container,
body.sidebar-collapsed .app-shell > .container-wide {
    margin-left: 12px;
}

@media (max-width: 980px) {
    .call-table { min-width: 1500px; }
    .side-menu { transition: max-height 0.18s ease, padding 0.18s ease, opacity 0.18s ease; }
    body.sidebar-collapsed .side-menu {
        max-height: 0;
        width: auto;
        padding-top: 0;
        padding-bottom: 0;
        border-bottom: 0;
    }
    body.sidebar-collapsed .app-shell > .container,
    body.sidebar-collapsed .app-shell > .container-wide { margin-left: 8px; }
}

/* v9 compact CRM workspace updates. */
:root { --compact-font: 13.5px; }

body,
input,
select,
textarea,
button,
.button {
    font-size: var(--compact-font);
}

.button,
button {
    min-height: 34px;
    padding: 7px 12px;
    font-size: var(--compact-font);
    line-height: 1.2;
    border-radius: 999px;
    font-weight: 800;
}

.button-mini {
    min-height: 29px;
    padding: 5px 8px;
    font-size: var(--compact-font);
}

.topbar {
    padding: 10px 18px;
    gap: 14px;
}

.brand { min-width: 230px; }
.brand-logo { width: 82px; max-height: 38px; }
.brand strong { font-size: var(--compact-font); }
.brand small { font-size: 11.5px; }
.nav a { font-size: var(--compact-font); padding: 7px 10px; }
.user-chip,
.user-chip-link {
    font-size: var(--compact-font);
    padding: 7px 11px;
    line-height: 1.2;
}
.user-chip-link:hover { text-decoration: none; background: rgba(255, 255, 255, 0.2); }

.page-head-compact {
    margin-bottom: 12px;
}
.page-head-compact h1 {
    font-size: clamp(22px, 2.2vw, 30px);
}
.page-head-compact p {
    margin: 0;
    font-size: var(--compact-font);
}

.app-shell { min-height: calc(100vh - 60px); }
.side-menu {
    top: 59px;
    flex: 0 0 172px;
    min-height: calc(100vh - 59px);
    display: flex;
    flex-direction: column;
    padding: 10px 8px;
    gap: 8px;
    transition: flex-basis 0.18s ease, width 0.18s ease, min-width 0.18s ease, padding 0.18s ease;
}
.side-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.side-menu-title {
    padding: 0 6px;
    font-size: 10.5px;
    line-height: 1.2;
    letter-spacing: 0.06em;
}
.side-collapse-button {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border-radius: 9px;
    font-size: 20px;
    line-height: 1;
    font-weight: 900;
}
.side-links {
    display: grid;
    gap: 3px;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 6px;
}
.side-link {
    gap: 6px;
    min-height: 29px;
    padding: 6px 8px;
    border-radius: 9px;
    font-size: 12.5px;
    line-height: 1.15;
    font-weight: 800;
}
.side-link span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.side-link strong {
    min-width: 22px;
    padding: 1px 6px;
    font-size: 11px;
    line-height: 1.35;
}
.side-settings {
    margin-top: auto;
    border-top: 1px solid var(--line);
    padding: 8px 4px 0;
    font-size: 12.5px;
}
.side-settings summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 30px;
    padding: 6px 8px;
    border-radius: 9px;
    color: var(--primary);
    font-weight: 900;
}
.side-settings summary::-webkit-details-marker { display: none; }
.side-settings summary:hover { background: #eef3fb; }
.side-settings a {
    display: block;
    padding: 7px 10px;
    margin-top: 2px;
    border-radius: 9px;
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 800;
}
.side-settings a:hover { background: #eef3fb; text-decoration: none; }

body.sidebar-collapsed .side-menu,
html.sidebar-collapsed-preload .side-menu {
    flex-basis: 42px;
    width: 42px;
    min-width: 42px;
    padding: 10px 6px;
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
}
body.sidebar-collapsed .side-menu-title,
body.sidebar-collapsed .side-links,
body.sidebar-collapsed .side-settings,
html.sidebar-collapsed-preload .side-menu-title,
html.sidebar-collapsed-preload .side-links,
html.sidebar-collapsed-preload .side-settings {
    display: none;
}
body.sidebar-collapsed .side-top,
html.sidebar-collapsed-preload .side-top {
    justify-content: center;
}
body.sidebar-collapsed .side-collapse-button,
html.sidebar-collapsed-preload .side-collapse-button {
    width: 30px;
    flex-basis: 30px;
}
body.sidebar-collapsed .app-shell > .container,
body.sidebar-collapsed .app-shell > .container-wide,
html.sidebar-collapsed-preload .app-shell > .container,
html.sidebar-collapsed-preload .app-shell > .container-wide {
    margin-left: 12px;
}

.app-shell > .container { margin-top: 14px; }
.container-wide { width: calc(100% - 20px); }

.dashboard-grid-compact,
.dashboard-grid {
    grid-template-columns: repeat(5, minmax(128px, 1fr));
    gap: 9px;
    margin-bottom: 10px;
}
.metric-card {
    padding: 11px 12px;
    border-radius: 12px;
}
.metric-card span,
.metric-card small {
    font-size: 11.5px;
    line-height: 1.25;
}
.metric-card strong {
    margin: 5px 0 4px;
    font-size: clamp(22px, 2.1vw, 30px);
    letter-spacing: -0.03em;
}
.metric-value strong { font-size: clamp(18px, 1.9vw, 26px); }
.monthly-card {
    padding: 12px 14px;
    margin-bottom: 10px;
    border-radius: 12px;
}
.monthly-head { margin-bottom: 8px; }
.monthly-head .form-section-title {
    margin: 0;
    font-size: 15px;
}
.month-bars { gap: 6px; }
.month-row {
    grid-template-columns: 90px minmax(120px, 1fr) 34px;
    gap: 8px;
    font-size: 12.5px;
}
.month-bar { height: 8px; }

.filter-card {
    padding: 12px;
    gap: 9px;
    margin-bottom: 10px;
}
.filter-card label { font-size: 12.5px; }
.filter-card input,
.filter-card select {
    min-height: 32px;
    padding: 7px 9px;
    border-radius: 9px;
    font-size: var(--compact-font);
}
.show-spam-toggle { min-height: 32px; padding: 7px 10px; }

.call-table,
.call-table th,
.call-table td,
.call-table input,
.call-table select,
.call-table textarea,
.call-table .button,
.call-table button,
.call-table a,
.call-table label,
.inline-table-form {
    font-size: var(--compact-font) !important;
}
.call-table {
    min-width: 1320px;
    table-layout: fixed;
}
.call-table th {
    padding: 8px 8px;
    font-size: 11.5px !important;
    letter-spacing: 0.035em;
    line-height: 1.2;
}
.call-table td {
    padding: 8px 8px;
    line-height: 1.25;
}
.call-table .date-col { width: 88px; }
.call-table .client-col { width: 175px; }
.call-table .contact-col { width: 145px; }
.call-table .service-col { width: 132px; }
.call-table .alloc-col { width: 92px; }
.call-table .status-col { width: 130px; }
.call-table .quote-when-col { width: 126px; }
.call-table .quote-value-col { width: 86px; }
.call-table .calendar-col { width: 55px; }
.call-table .comment-col { width: 235px; }
.call-table .save-col { width: 62px; }

.entry-date-cell span,
.entry-date-line,
.entry-time-line {
    display: block;
    font-size: var(--compact-font) !important;
    line-height: 1.18;
}
.entry-date-line {
    font-weight: 800;
    color: var(--ink);
}
.entry-time-line {
    margin-top: 2px;
    color: var(--muted);
}
.client-name-link {
    display: block;
    font-size: var(--compact-font) !important;
    font-weight: 900;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.client-message-preview {
    display: block;
    margin-top: 5px;
    font-size: 12.2px !important;
    line-height: 1.25;
}
.contact-links a {
    display: inline-block;
    max-width: 100%;
    font-size: var(--compact-font) !important;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.category-suburb-cell .service-name,
.category-suburb-cell .suburb-name {
    display: block;
    font-size: var(--compact-font) !important;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.category-suburb-cell .service-name { font-weight: 900; }
.category-suburb-cell .suburb-name {
    margin-top: 3px;
    color: var(--muted);
}
.inline-table-form select,
.inline-table-form input,
.inline-table-form textarea {
    min-height: 31px;
    margin-top: 0;
    padding: 6px 7px;
    border-radius: 8px;
    line-height: 1.2;
    font-size: var(--compact-font) !important;
}
.inline-table-form input[type="date"],
.inline-table-form input[type="time"],
.inline-table-form input[type="number"] {
    height: 31px;
}
.inline-table-form textarea {
    min-height: 58px;
    resize: vertical;
}
.quote-when-fields { gap: 5px; }
.inline-money { text-align: right; }
.inline-alloc-check,
.inline-spam-check {
    margin: 0 0 6px;
    gap: 5px;
    font-size: var(--compact-font) !important;
    line-height: 1.2;
}
.inline-spam-check { margin-top: 6px; }
.latest-note-preview {
    margin-top: 6px;
    padding-top: 6px;
    font-size: 12.2px !important;
    line-height: 1.25;
}
.call-table .button-mini {
    min-height: 28px;
    padding: 4px 7px;
}

@media (max-width: 1180px) {
    .dashboard-grid-compact,
    .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .side-menu { flex-basis: 158px; }
}

@media (max-width: 980px) {
    .topbar { padding: 10px 12px; }
    .brand { min-width: auto; }
    .brand-logo { width: 76px; }
    .app-shell { display: block; }
    .side-menu {
        position: sticky;
        top: 0;
        min-height: auto;
        width: 100%;
        flex-basis: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .side-links {
        display: flex;
        overflow-x: auto;
        gap: 6px;
        padding-bottom: 0;
    }
    .side-link { flex: 0 0 auto; min-width: 110px; }
    .side-settings { margin-top: 0; }
    body.sidebar-collapsed .side-menu,
    html.sidebar-collapsed-preload .side-menu {
        width: 42px;
        min-width: 42px;
        padding: 8px 6px;
        display: flex;
    }
    body.sidebar-collapsed .side-links,
    body.sidebar-collapsed .side-settings,
    html.sidebar-collapsed-preload .side-links,
    html.sidebar-collapsed-preload .side-settings { display: none; }
    body.sidebar-collapsed .app-shell > .container,
    body.sidebar-collapsed .app-shell > .container-wide,
    html.sidebar-collapsed-preload .app-shell > .container,
    html.sidebar-collapsed-preload .app-shell > .container-wide { margin-left: 8px; }
    .dashboard-grid-compact,
    .dashboard-grid { grid-template-columns: 1fr; }
    .call-table { min-width: 1280px; }
}

/* v9 compact UI: sidebar arrow, settings menu, smaller dashboard/table controls. */
:root { --compact-font: 13.5px; }
body, input, select, textarea, button, .button { font-size: var(--compact-font); }
label { font-size: var(--compact-font); }
.button, button { min-height: 34px; padding: 7px 11px; border-radius: 999px; font-size: var(--compact-font); line-height: 1.2; font-weight: 800; }
.button-mini { min-height: 28px; padding: 5px 8px; font-size: var(--compact-font); }
input, select, textarea { padding: 8px 10px; border-radius: 10px; font-size: var(--compact-font); line-height: 1.25; }
.topbar { padding: 10px 18px; gap: 14px; }
.brand { min-width: 230px; }
.brand-logo { width: 82px; max-height: 38px; }
.nav a { padding: 7px 10px; font-size: var(--compact-font); }
a.user-chip, a.user-chip-link { display: inline-flex; align-items: center; min-height: 34px; text-decoration: none; }
a.user-chip:hover, a.user-chip-link:hover { background: rgba(255, 255, 255, 0.18); color: #fff; text-decoration: none; }
.app-shell { align-items: stretch; }
.side-menu { top: 59px; flex: 0 0 176px; min-height: calc(100vh - 59px); padding: 10px 8px; display: flex; flex-direction: column; gap: 10px; transition: flex-basis 0.18s ease, width 0.18s ease, min-width 0.18s ease, padding 0.18s ease, opacity 0.18s ease; }
.side-menu-main { min-height: 0; }
.side-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.side-menu-title { padding: 0 6px; font-size: 11.5px; letter-spacing: 0.07em; }
.side-collapse-button { width: 28px; min-width: 28px; min-height: 28px; padding: 0; border-radius: 9px; font-size: 15px; background: #eef3fb; }
.side-links { display: grid; gap: 3px; overflow-y: auto; max-height: calc(100vh - 190px); padding-right: 2px; }
.side-link { padding: 6px 8px; border-radius: 9px; gap: 7px; font-size: 12.5px; line-height: 1.15; }
.side-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-link strong { min-width: 22px; padding: 1px 6px; font-size: 11px; }
.side-bottom { margin-top: auto; position: relative; padding-top: 8px; border-top: 1px solid var(--line); }
.settings-menu { position: relative; }
.settings-menu summary { list-style: none; display: flex; align-items: center; justify-content: center; min-height: 32px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--primary); font-size: 12.5px; font-weight: 900; cursor: pointer; user-select: none; }
.settings-menu summary::-webkit-details-marker { display: none; }
.settings-links { position: absolute; left: 0; bottom: calc(100% + 8px); width: min(210px, calc(100vw - 24px)); display: grid; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); z-index: 20; }
.settings-menu:not([open]) .settings-links { display: none; }
.settings-links a { display: block; padding: 7px 9px; border-radius: 9px; color: var(--ink); font-size: 12.5px; font-weight: 800; }
.settings-links a:hover { background: #eef3fb; text-decoration: none; }
body.sidebar-collapsed .side-menu { flex-basis: 0; width: 0; min-width: 0; padding-left: 0; padding-right: 0; border-right: 0; opacity: 0; overflow: hidden; pointer-events: none; }
.app-shell > .container { margin-top: 14px; }
.page-head-compact { margin-bottom: 10px; }
.page-head-compact h1 { font-size: clamp(22px, 2.5vw, 31px); }
.page-head-compact p { margin-top: 2px; font-size: 13px; }
.dashboard-grid { gap: 9px; margin-bottom: 10px; }
.metric-card { padding: 11px 12px; border-radius: 13px; }
.metric-card span, .metric-card small { font-size: 12px; line-height: 1.25; }
.metric-card strong, .metric-value strong { margin: 4px 0; font-size: clamp(22px, 2.2vw, 31px); }
.monthly-card { margin-bottom: 10px; padding: 12px; border-radius: 13px; }
.monthly-head { margin-bottom: 6px; }
.monthly-head .form-section-title { margin-bottom: 0; font-size: 15px; }
.monthly-head .small, .month-row, .month-row span, .month-row strong { font-size: 12.5px; }
.month-bars { gap: 6px; }
.month-row { grid-template-columns: 88px minmax(90px, 1fr) 34px; gap: 8px; }
.month-bar { height: 7px; }
.filter-card { gap: 8px; padding: 12px; margin-bottom: 10px; align-items: end; }
.filter-search { min-width: 240px; flex-basis: 320px; }
.filter-select { min-width: 155px; flex-basis: 175px; }
.show-spam-toggle { min-height: 34px; padding: 7px 10px; }
.call-table, .call-table th, .call-table td, .call-table input, .call-table select, .call-table textarea, .call-table .button, .call-table button, .call-table a, .call-table label, .inline-table-form { font-size: var(--compact-font); }
.call-table { min-width: 1380px; }
.call-table th, .call-table td { padding: 8px 8px; }
.call-table th { font-size: 12px; letter-spacing: 0.035em; }
.call-table .date-col { width: 104px; }
.call-table .client-col { width: 178px; }
.call-table .contact-col { width: 154px; }
.call-table .service-col { width: 138px; }
.call-table .alloc-col { width: 94px; }
.call-table .status-col { width: 132px; }
.call-table .quote-when-col { width: 122px; }
.call-table .quote-value-col { width: 88px; }
.call-table .calendar-col { width: 60px; }
.call-table .comment-col { width: 238px; }
.call-table .save-col { width: 64px; }
.entry-date-cell, .client-col, .contact-links, .category-suburb-cell { line-height: 1.25; }
.entry-date-line, .entry-time-line, .category-suburb-cell .service-name, .category-suburb-cell .suburb-name, .client-message-preview { display: block; }
.entry-date-line, .client-name-link, .category-suburb-cell .service-name { font-weight: 800; }
.entry-time-line, .category-suburb-cell .suburb-name, .client-message-preview { color: var(--muted); }
.client-name-link, .contact-links a, .category-suburb-cell, .call-table .small, .call-table .muted, .call-table .latest-note-preview, .call-table .inline-spam-check { font-size: var(--compact-font); }
.client-message-preview { margin-top: 4px; font-size: 12.5px; }
.inline-table-form select, .inline-table-form input, .inline-table-form textarea { min-height: 30px; padding: 6px 7px; border-radius: 8px; font-size: var(--compact-font); }
.inline-table-form textarea { min-height: 58px; }
.quote-when-fields { gap: 5px; }
.inline-alloc-check, .inline-spam-check { margin-bottom: 5px; gap: 5px; font-size: var(--compact-font); }
.latest-note-preview { margin-top: 6px; padding-top: 6px; line-height: 1.25; }
@media (max-width: 1180px) { .side-menu { flex-basis: 168px; } }
@media (max-width: 980px) {
    .topbar { padding: 10px 12px; gap: 10px; }
    .brand { min-width: auto; }
    .brand-logo { width: 78px; max-height: 36px; }
    .side-menu { position: relative; top: auto; min-height: auto; display: flex; flex-direction: column; max-height: 55vh; }
    .side-links { max-height: 38vh; }
    .side-bottom { border-top: 0; }
    .settings-links { left: 0; bottom: auto; top: calc(100% + 8px); }
    .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .call-table { min-width: 1360px; }
}
@media (max-width: 680px) { .dashboard-grid { grid-template-columns: 1fr; } }

/* v9 final overrides: keep sidebar arrow visible when minimised and normalise actual table/header class names. */
:root { --compact-font: 13.5px; }

body,
input,
select,
textarea,
button,
.button,
.call-table,
.call-table th,
.call-table td,
.call-table a,
.call-table label {
    font-size: var(--compact-font) !important;
}

.button,
button {
    min-height: 34px !important;
    padding: 7px 11px !important;
    font-size: var(--compact-font) !important;
    line-height: 1.2 !important;
}

.button-mini {
    min-height: 28px !important;
    padding: 4px 8px !important;
}

.topbar {
    padding: 10px 18px !important;
}

.brand-logo {
    width: 82px !important;
    max-height: 38px !important;
}

.nav a,
.user-chip,
.user-chip-link {
    font-size: var(--compact-font) !important;
}

.user-chip-link {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 34px !important;
    text-decoration: none !important;
}

.side-menu {
    position: sticky !important;
    top: 59px !important;
    flex: 0 0 176px !important;
    width: 176px !important;
    min-width: 176px !important;
    min-height: calc(100vh - 59px) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px 8px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: visible !important;
    border-right: 1px solid var(--line) !important;
    transition: flex-basis 0.18s ease, width 0.18s ease, min-width 0.18s ease, padding 0.18s ease !important;
}

.side-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
}

.side-menu-title {
    padding: 0 4px !important;
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
}

.side-collapse-button {
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    border-radius: 9px !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

.side-links {
    display: grid !important;
    gap: 3px !important;
    max-height: calc(100vh - 180px) !important;
    overflow-y: auto !important;
    padding-right: 2px !important;
}

.side-link {
    padding: 6px 8px !important;
    border-radius: 9px !important;
    gap: 6px !important;
    font-size: 12.5px !important;
    line-height: 1.15 !important;
}

.side-link span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.side-link strong {
    min-width: 22px !important;
    padding: 1px 6px !important;
    font-size: 11px !important;
}

.side-settings {
    margin-top: auto !important;
    padding-top: 8px !important;
    border-top: 1px solid var(--line) !important;
    font-size: 12.5px !important;
}

.side-settings summary {
    min-height: 32px !important;
    padding: 7px 9px !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--primary) !important;
    font-size: 12.5px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    list-style: none !important;
}

.side-settings summary::-webkit-details-marker { display: none !important; }

.side-settings a {
    display: block !important;
    margin-top: 4px !important;
    padding: 6px 9px !important;
    border-radius: 9px !important;
    color: var(--ink) !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
}

.side-settings a:hover {
    background: #eef3fb !important;
    text-decoration: none !important;
}

body.sidebar-collapsed .side-menu,
html.sidebar-collapsed-preload .side-menu {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    min-height: calc(100vh - 59px) !important;
    padding: 10px 6px !important;
    border-right: 1px solid var(--line) !important;
    border-bottom: 0 !important;
    opacity: 1 !important;
    overflow: visible !important;
    pointer-events: auto !important;
}

body.sidebar-collapsed .side-menu-title,
body.sidebar-collapsed .side-links,
body.sidebar-collapsed .side-settings,
html.sidebar-collapsed-preload .side-menu-title,
html.sidebar-collapsed-preload .side-links,
html.sidebar-collapsed-preload .side-settings {
    display: none !important;
}

body.sidebar-collapsed .side-top,
html.sidebar-collapsed-preload .side-top {
    justify-content: center !important;
}

body.sidebar-collapsed .side-collapse-button,
html.sidebar-collapsed-preload .side-collapse-button {
    margin: 0 auto !important;
}

body.sidebar-collapsed .app-shell > .container,
body.sidebar-collapsed .app-shell > .container-wide,
html.sidebar-collapsed-preload .app-shell > .container,
html.sidebar-collapsed-preload .app-shell > .container-wide {
    margin-left: 10px !important;
}

.page-head-compact {
    margin-bottom: 10px !important;
}

.page-head-compact h1 {
    font-size: clamp(22px, 2.5vw, 31px) !important;
}

.page-head-compact p {
    margin-top: 2px !important;
    font-size: 13px !important;
}

.dashboard-grid,
.dashboard-grid-compact {
    gap: 9px !important;
    margin-bottom: 10px !important;
}

.metric-card {
    padding: 11px 12px !important;
    border-radius: 13px !important;
}

.metric-card span,
.metric-card small {
    font-size: 12px !important;
    line-height: 1.25 !important;
}

.metric-card strong,
.metric-value strong {
    margin: 4px 0 !important;
    font-size: clamp(22px, 2.2vw, 31px) !important;
}

.monthly-card {
    margin-bottom: 10px !important;
    padding: 12px !important;
    border-radius: 13px !important;
}

.monthly-head .form-section-title {
    margin-bottom: 0 !important;
    font-size: 15px !important;
}

.month-row,
.month-row span,
.month-row strong,
.monthly-head .small {
    font-size: 12.5px !important;
}

.month-row {
    grid-template-columns: 88px minmax(90px, 1fr) 34px !important;
    gap: 8px !important;
}

.month-bar { height: 7px !important; }

.filter-card {
    gap: 8px !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
}

.call-table {
    min-width: 1380px !important;
    table-layout: fixed !important;
}

.call-table th,
.call-table td {
    padding: 8px 8px !important;
}

.call-table th {
    font-size: 12px !important;
    letter-spacing: 0.035em !important;
}

.call-table .date-col { width: 104px !important; }
.call-table .client-col { width: 178px !important; }
.call-table .contact-col { width: 154px !important; }
.call-table .service-col { width: 138px !important; }
.call-table .alloc-col { width: 94px !important; }
.call-table .status-col { width: 132px !important; }
.call-table .quote-when-col { width: 122px !important; }
.call-table .quote-value-col { width: 88px !important; }
.call-table .calendar-col { width: 60px !important; }
.call-table .comment-col { width: 238px !important; }
.call-table .save-col { width: 64px !important; }

.entry-date-stack,
.entry-date-stack span,
.entry-date-stack small,
.client-name-link,
.client-message-preview,
.contact-info a,
.category-suburb-cell .service-main,
.category-suburb-cell .suburb-line {
    display: block !important;
    font-size: var(--compact-font) !important;
    line-height: 1.25 !important;
}

.entry-date-stack small,
.client-message-preview,
.category-suburb-cell .suburb-line {
    color: var(--muted) !important;
}

.client-name-link,
.category-suburb-cell .service-main {
    font-weight: 900 !important;
}

.client-message-preview,
.category-suburb-cell .suburb-line {
    margin-top: 4px !important;
}

.contact-info a {
    overflow-wrap: anywhere !important;
}

.inline-table-form select,
.inline-table-form input,
.inline-table-form textarea {
    min-height: 30px !important;
    margin-top: 0 !important;
    padding: 6px 7px !important;
    border-radius: 8px !important;
    font-size: var(--compact-font) !important;
    line-height: 1.2 !important;
}

.inline-table-form textarea {
    min-height: 58px !important;
}

.quote-when-fields {
    gap: 5px !important;
}

.inline-alloc-check,
.inline-spam-check {
    margin-bottom: 5px !important;
    gap: 5px !important;
    font-size: var(--compact-font) !important;
}

.latest-note-preview {
    margin-top: 6px !important;
    padding-top: 6px !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
}

@media (max-width: 980px) {
    .side-menu,
    body.sidebar-collapsed .side-menu,
    html.sidebar-collapsed-preload .side-menu {
        position: sticky !important;
        top: 0 !important;
        min-height: 100vh !important;
    }
    .call-table { min-width: 1360px !important; }
}

/* v9 final compact override. Keep this block last. */
:root { --pbm-compact-font: 13.5px; }
body, input, select, textarea, button, .button { font-size: var(--pbm-compact-font); }
button, .button { min-height: 34px; padding: 7px 11px; line-height: 1.2; }
.button-mini { min-height: 28px; padding: 4px 7px; font-size: var(--pbm-compact-font); }
.topbar { padding: 10px 18px; gap: 14px; }
.brand { min-width: 220px; }
.brand-logo { width: 82px; max-height: 38px; }
.nav a { padding: 7px 10px; font-size: var(--pbm-compact-font); }
.user-chip-link { text-decoration: none; }
.user-chip-link:hover { text-decoration: none; background: rgba(255,255,255,.2); color: #fff; }

.side-menu {
    top: 59px;
    flex: 0 0 166px;
    min-height: calc(100vh - 59px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 8px;
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
}
.side-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 30px; }
.side-menu-title { padding: 0 3px; font-size: 11px; line-height: 1.1; letter-spacing: .075em; }
.side-collapse-button { width: 28px; min-width: 28px; min-height: 28px; padding: 0; border-radius: 9px; font-size: 18px; line-height: 1; background: #eef3fb; }
.side-links { display: grid; gap: 3px; overflow-y: auto; max-height: calc(100vh - 172px); padding-right: 2px; }
.side-link { padding: 6px 7px; border-radius: 9px; gap: 6px; font-size: 12.5px; line-height: 1.15; }
.side-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-link strong { min-width: 22px; padding: 1px 6px; font-size: 11px; }
details.side-settings { margin-top: auto; position: relative; padding-top: 8px; border-top: 1px solid var(--line); }
details.side-settings summary { list-style: none; display: flex; align-items: center; justify-content: center; min-height: 32px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--primary); font-size: 12.5px; font-weight: 900; cursor: pointer; user-select: none; }
details.side-settings summary::-webkit-details-marker { display: none; }
details.side-settings a { display: block; padding: 7px 9px; border-radius: 9px; color: var(--ink); font-size: 12.5px; font-weight: 800; }
details.side-settings a:hover { background: #eef3fb; text-decoration: none; }
details.side-settings[open] { z-index: 30; }
details.side-settings[open]::before { content: ''; position: absolute; left: 0; bottom: calc(100% + 7px); width: min(210px, calc(100vw - 24px)); height: calc(100% + 128px); max-height: 180px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); z-index: -1; }
details.side-settings[open] a { position: relative; background: #fff; }

body.sidebar-collapsed .side-menu,
html.sidebar-collapsed-preload .side-menu {
    flex: 0 0 42px;
    width: 42px;
    min-width: 42px;
    padding: 10px 6px;
    border-right: 1px solid var(--line);
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
}
body.sidebar-collapsed .side-menu-title,
body.sidebar-collapsed .side-links,
body.sidebar-collapsed .side-settings,
html.sidebar-collapsed-preload .side-menu-title,
html.sidebar-collapsed-preload .side-links,
html.sidebar-collapsed-preload .side-settings { display: none; }
body.sidebar-collapsed .side-top,
html.sidebar-collapsed-preload .side-top { justify-content: center; }
body.sidebar-collapsed .app-shell > .container,
body.sidebar-collapsed .app-shell > .container-wide,
html.sidebar-collapsed-preload .app-shell > .container,
html.sidebar-collapsed-preload .app-shell > .container-wide { margin-left: 12px; }

.app-shell > .container, .app-shell > .container-wide { margin-top: 14px; }
.page-head-compact { margin-bottom: 10px; }
.page-head-compact h1 { font-size: clamp(22px, 2.5vw, 31px); }
.page-head-compact p { margin: 2px 0 0; font-size: 13px; }
.dashboard-grid { gap: 9px; margin-bottom: 10px; }
.metric-card { padding: 10px 12px; border-radius: 13px; }
.metric-card span, .metric-card small { font-size: 12px; line-height: 1.25; }
.metric-card strong, .metric-value strong { margin: 4px 0; font-size: clamp(22px, 2.2vw, 30px); }
.monthly-card { margin-bottom: 10px; padding: 12px; border-radius: 13px; }
.monthly-head { margin-bottom: 6px; }
.monthly-head .form-section-title { margin: 0; font-size: 15px; }
.monthly-head .small, .month-row, .month-row span, .month-row strong { font-size: 12.5px; }
.month-bars { gap: 6px; }
.month-row { grid-template-columns: 88px minmax(90px, 1fr) 34px; gap: 8px; }
.month-bar { height: 7px; }
.filter-card { gap: 8px; padding: 12px; margin-bottom: 10px; align-items: end; }
.filter-search { min-width: 240px; flex-basis: 320px; }
.filter-select { min-width: 155px; flex-basis: 175px; }
.filter-card input, .filter-card select { padding: 7px 8px; border-radius: 9px; }
.show-spam-toggle { min-height: 34px; padding: 7px 10px; }

.call-table, .call-table th, .call-table td, .call-table input, .call-table select, .call-table textarea, .call-table .button, .call-table button, .call-table a, .call-table label, .inline-table-form { font-size: var(--pbm-compact-font); }
.call-table { min-width: 1360px; table-layout: fixed; }
.call-table th, .call-table td { padding: 8px 8px; line-height: 1.25; }
.call-table th { font-size: 12px; letter-spacing: .035em; }
.call-table .date-col { width: 98px; }
.call-table .client-col { width: 178px; }
.call-table .contact-col { width: 150px; }
.call-table .service-col { width: 140px; }
.call-table .alloc-col { width: 94px; }
.call-table .status-col { width: 132px; }
.call-table .quote-when-col { width: 122px; }
.call-table .quote-value-col { width: 88px; }
.call-table .calendar-col { width: 60px; }
.call-table .comment-col { width: 238px; }
.call-table .save-col { width: 64px; }
.entry-date-stack, .entry-date-stack span, .entry-date-stack small, .client-name-link, .client-message-preview, .contact-info a, .category-suburb-cell .service-main, .category-suburb-cell .suburb-line { display: block; }
.entry-date-stack span { font-weight: 800; line-height: 1.15; }
.entry-date-stack small { margin-top: 2px; color: var(--muted); font-size: 12.5px; line-height: 1.15; }
.client-name-link { font-weight: 900; line-height: 1.18; overflow-wrap: anywhere; }
.client-message-preview { margin-top: 4px; font-size: 12.5px !important; line-height: 1.25; }
.contact-info a { font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
.category-suburb-cell .service-main { font-size: 13px; font-weight: 900; line-height: 1.2; }
.category-suburb-cell .suburb-line { margin-top: 3px; color: var(--muted); font-size: 12.5px; line-height: 1.2; }
.inline-table-form select, .inline-table-form input, .inline-table-form textarea { min-height: 30px; padding: 6px 7px; border-radius: 8px; line-height: 1.2; }
.inline-table-form textarea { min-height: 58px; }
.quote-when-fields { gap: 5px; }
.inline-alloc-check, .inline-spam-check { margin: 0 0 5px; gap: 5px; font-size: var(--pbm-compact-font); line-height: 1.2; }
.latest-note-preview { margin-top: 6px; padding-top: 6px; font-size: 12.5px !important; line-height: 1.25; }

@media (max-width: 1180px) { .side-menu { flex-basis: 158px; } }
@media (max-width: 980px) {
    .topbar { padding: 10px 12px; gap: 10px; }
    .brand { min-width: auto; }
    .brand-logo { width: 76px; max-height: 36px; }
    .app-shell { display: block; }
    .side-menu { position: sticky; top: 0; min-height: auto; width: 100%; flex-basis: auto; max-height: 55vh; border-right: 0; border-bottom: 1px solid var(--line); }
    .side-links { max-height: 38vh; }
    body.sidebar-collapsed .side-menu,
    html.sidebar-collapsed-preload .side-menu { width: 42px; min-width: 42px; padding: 8px 6px; display: flex; }
    body.sidebar-collapsed .side-links,
    body.sidebar-collapsed .side-settings,
    html.sidebar-collapsed-preload .side-links,
    html.sidebar-collapsed-preload .side-settings { display: none; }
    .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .call-table { min-width: 1340px; }
}
@media (max-width: 680px) { .dashboard-grid { grid-template-columns: 1fr; } }

/* v9 class aliases for compact stacked cells. */
.contact-links a { display: block; word-break: break-word; }
.category-suburb-cell .service-name,
.category-suburb-cell .suburb-name,
.entry-date-line,
.entry-time-line { display: block; }

/* v9 final polish and compatibility overrides. */
:root { --compact-font: 13.5px; }
.button,
button,
input,
select,
textarea,
label,
.nav a,
.user-chip,
.user-chip-link {
    font-size: var(--compact-font) !important;
}
.button,
button {
    min-height: 34px;
    padding: 7px 11px;
    line-height: 1.2;
}
.button-mini { min-height: 28px; padding: 5px 8px; }
.nav a.active { background: rgba(255,255,255,0.18); color: #fff; }
.user-chip-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.user-chip-link:hover { text-decoration: none; background: rgba(255,255,255,0.2); color: #fff; }

.side-menu-main { min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.side-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.side-bottom { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }
.settings-menu { position: relative; }
.settings-menu summary { list-style: none; display: flex; align-items: center; justify-content: center; min-height: 32px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--primary); font-size: 12.5px; font-weight: 900; cursor: pointer; user-select: none; }
.settings-menu summary::-webkit-details-marker { display: none; }
.settings-links { position: absolute; left: 0; bottom: calc(100% + 8px); width: min(210px, calc(100vw - 24px)); display: grid; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); z-index: 20; }
.settings-menu:not([open]) .settings-links { display: none; }
.settings-links a { display: block; padding: 7px 9px; border-radius: 9px; color: var(--ink); font-size: 12.5px; font-weight: 800; }
.settings-links a:hover { background: #eef3fb; text-decoration: none; }
body.sidebar-collapsed .side-menu,
html.sidebar-collapsed-preload .side-menu { flex-basis: 0; width: 0; min-width: 0; padding-left: 0; padding-right: 0; border-right: 0; opacity: 0; overflow: hidden; pointer-events: none; }
body.sidebar-collapsed .app-shell > .container,
body.sidebar-collapsed .app-shell > .container-wide,
html.sidebar-collapsed-preload .app-shell > .container,
html.sidebar-collapsed-preload .app-shell > .container-wide { margin-left: 8px; }

.call-table,
.call-table th,
.call-table td,
.call-table input,
.call-table select,
.call-table textarea,
.call-table a,
.call-table label,
.call-table .button,
.call-table button { font-size: var(--compact-font) !important; }
.call-table { min-width: 1360px; }
.call-table th,
.call-table td { padding: 8px 8px; }
.call-table th { font-size: 12px !important; }
.call-table .date-col { width: 98px; }
.call-table .client-col { width: 178px; }
.call-table .contact-col { width: 154px; }
.call-table .service-col { width: 138px; }
.call-table .alloc-col { width: 94px; }
.call-table .status-col { width: 132px; }
.call-table .quote-when-col { width: 122px; }
.call-table .quote-value-col { width: 88px; }
.call-table .calendar-col { width: 60px; }
.call-table .comment-col { width: 238px; }
.call-table .save-col { width: 64px; }
.entry-date-cell,
.contact-info,
.category-suburb-cell { line-height: 1.25; }
.entry-date-stack,
.entry-date-stack span,
.entry-date-stack small { display: block; line-height: 1.18; }
.entry-date-stack span { font-weight: 900; color: var(--ink); }
.entry-date-stack small { margin-top: 2px; color: var(--muted); font-size: 12.5px !important; }
.client-name-link { display: block; font-weight: 900; line-height: 1.15; overflow-wrap: anywhere; }
.client-message-preview { display: block; margin-top: 4px; font-size: 12.5px !important; line-height: 1.25; }
.contact-info a { display: block; max-width: 100%; line-height: 1.25; overflow-wrap: anywhere; }
.category-suburb-cell .service-main,
.category-suburb-cell .suburb-line { display: block; line-height: 1.2; overflow-wrap: anywhere; font-size: var(--compact-font) !important; }
.category-suburb-cell .service-main { font-weight: 900; }
.category-suburb-cell .suburb-line { margin-top: 3px; color: var(--muted); }
.inline-table-form select,
.inline-table-form input,
.inline-table-form textarea { min-height: 30px; padding: 6px 7px; border-radius: 8px; font-size: var(--compact-font) !important; }
.inline-table-form textarea { min-height: 58px; }
.quote-when-fields { gap: 5px; }
.inline-alloc-check,
.inline-spam-check { margin-bottom: 5px; gap: 5px; font-size: var(--compact-font) !important; }
.latest-note-preview { margin-top: 6px; padding-top: 6px; line-height: 1.25; font-size: 12.5px !important; }

@media (max-width: 980px) {
    .settings-links { left: 0; bottom: auto; top: calc(100% + 8px); }
    .call-table { min-width: 1360px; }
}


/* v10: one sidebar arrow only, and a full-width call-list table. */
.app-shell {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
}

.app-shell > main.container,
.app-shell > main.container-wide,
.app-shell > .container,
.app-shell > .container-wide {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 14px 10px 60px !important;
}

.inline-table-form,
.table-wrap,
.table-wrap-wide {
    width: 100% !important;
    max-width: none !important;
}

.table-wrap,
.table-wrap-wide {
    overflow-x: auto !important;
}

.call-table {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    table-layout: fixed !important;
}

.call-table th,
.call-table td {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

.call-table input,
.call-table select,
.call-table textarea,
.call-table .button,
.call-table button {
    max-width: 100% !important;
}

/* Collapsed sidebar remains as a slim rail so the same arrow can restore it. */
body.sidebar-collapsed .side-menu,
html.sidebar-collapsed-preload .side-menu {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    padding: 10px 6px !important;
    border-right: 1px solid var(--line) !important;
    opacity: 1 !important;
    overflow: visible !important;
    pointer-events: auto !important;
}

body.sidebar-collapsed .side-menu-main,
html.sidebar-collapsed-preload .side-menu-main {
    display: block !important;
}

body.sidebar-collapsed .side-menu-head,
html.sidebar-collapsed-preload .side-menu-head {
    display: flex !important;
    justify-content: center !important;
    margin: 0 !important;
}

body.sidebar-collapsed .side-menu-title,
body.sidebar-collapsed .side-links,
body.sidebar-collapsed .side-bottom,
html.sidebar-collapsed-preload .side-menu-title,
html.sidebar-collapsed-preload .side-links,
html.sidebar-collapsed-preload .side-bottom {
    display: none !important;
}

body.sidebar-collapsed .side-collapse-button,
html.sidebar-collapsed-preload .side-collapse-button {
    display: inline-flex !important;
    width: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    pointer-events: auto !important;
    opacity: 1 !important;
}

@media (max-width: 980px) {
    .app-shell {
        display: block !important;
    }

    .app-shell > main.container,
    .app-shell > main.container-wide,
    .app-shell > .container,
    .app-shell > .container-wide {
        width: calc(100% - 16px) !important;
        margin: 10px 8px 50px !important;
    }

    body.sidebar-collapsed .side-menu,
    html.sidebar-collapsed-preload .side-menu {
        width: 44px !important;
        min-width: 44px !important;
        min-height: auto !important;
        margin: 0 0 0 8px !important;
    }

    .call-table {
        min-width: 1180px !important;
    }
}


/* v11: compact ICS, VOIP settings, and suburb tags. Keep this block last. */
.brand small { display: none !important; }
.call-table .calendar-col { display: none !important; }
.call-table .save-col { width: 72px !important; text-align: center; }
.call-table .comment-col { width: 252px !important; }
.call-table .service-col { width: 132px !important; }
.call-table .contact-col { width: 150px !important; }
.call-table .client-col { width: 174px !important; }
.call-table .quote-when-col { width: 116px !important; }
.call-table .quote-value-col { width: 84px !important; }
.row-actions-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    align-items: stretch;
    justify-items: stretch;
}
.row-actions-stack .button,
.row-actions-stack button {
    width: 100%;
    min-height: 28px;
    padding-left: 6px;
    padding-right: 6px;
}
.button-disabled,
.button-disabled:hover {
    background: #e5e7eb !important;
    border-color: #d1d5db !important;
    color: #8b98aa !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    text-decoration: none !important;
}
.category-suburb-cell {
    display: flex !important;
    flex-direction: column !important;
    min-height: 76px;
    gap: 6px;
}
.category-suburb-cell .service-name,
.category-suburb-cell .service-main {
    display: block;
    font-weight: 900;
    line-height: 1.22;
}
.category-suburb-cell .suburb-tag {
    margin-top: auto !important;
    align-self: flex-start;
}
.suburb-tag {
    display: inline-flex !important;
    align-items: center;
    max-width: 100%;
    border: 1px solid #d8e2f1;
    border-radius: 999px;
    background: #eef3fb;
    color: var(--primary);
    padding: 3px 8px;
    font-size: 12.5px !important;
    font-weight: 900;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.show-spam-toggle { gap: 6px; padding-left: 10px; padding-right: 10px; }
.voip-settings-form code,
.voip-settings-form .code-box { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.call-recording-item .button { margin-top: 8px; }
@media (max-width: 980px) { .call-table { min-width: 1120px !important; } }
.provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.subtle-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8fafc;
    padding: 12px;
}
.rotate-secret-box {
    align-self: end;
    min-height: 42px;
}


/* v11.1 final compact table, ICS action stack, and VoIP/suburb cleanup. */
.brand small { display: none !important; }
.call-table { width: 100% !important; min-width: 100% !important; table-layout: fixed !important; }
.call-table th, .call-table td { white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; }
.call-table .calendar-col { display: none !important; }
.call-table .date-col { width: 88px !important; }
.call-table .client-col { width: 168px !important; }
.call-table .contact-col { width: 140px !important; }
.call-table .service-col { width: 124px !important; }
.call-table .alloc-col { width: 88px !important; }
.call-table .status-col { width: 126px !important; }
.call-table .quote-when-col { width: 108px !important; }
.call-table .quote-value-col { width: 78px !important; }
.call-table .comment-col { width: 230px !important; }
.call-table .save-col { width: 70px !important; text-align: center !important; }
.row-actions-stack { display: grid !important; grid-template-columns: 1fr !important; gap: 5px !important; align-items: stretch !important; justify-items: stretch !important; }
.row-actions-stack .button, .row-actions-stack button { width: 100% !important; min-height: 28px !important; padding: 5px 7px !important; font-size: 13.5px !important; }
.button-disabled, .button-disabled:hover { background: #e5e7eb !important; border-color: #d1d5db !important; color: #8b98aa !important; cursor: not-allowed !important; pointer-events: none !important; text-decoration: none !important; }
.category-suburb-cell { display: flex !important; flex-direction: column !important; min-height: 76px !important; gap: 6px !important; }
.category-suburb-cell .service-name, .category-suburb-cell .service-main { display: block !important; font-weight: 900 !important; line-height: 1.22 !important; }
.category-suburb-cell .suburb-tag { margin-top: auto !important; align-self: flex-start !important; }
.suburb-tag { display: inline-flex !important; align-items: center !important; max-width: 100% !important; border: 1px solid #d8e2f1 !important; border-radius: 999px !important; background: #eef3fb !important; color: var(--primary) !important; padding: 3px 8px !important; font-size: 12.5px !important; font-weight: 900 !important; line-height: 1.15 !important; overflow-wrap: anywhere !important; }
.show-spam-toggle { gap: 6px !important; padding-left: 10px !important; padding-right: 10px !important; }
.voip-settings-form code, .voip-settings-form .code-box { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important; }
.call-recording-item .button { margin-top: 8px !important; }
@media (max-width: 980px) { .call-table { min-width: 1120px !important; } }


/* v11.2: keep category at top and suburb tag anchored at bottom without forcing the table cell itself into flex layout. */
.category-suburb-cell { display: table-cell !important; min-height: 0 !important; }
.category-suburb-stack { display: flex !important; flex-direction: column !important; gap: 6px !important; min-height: 74px !important; height: 100% !important; }
.category-suburb-stack .suburb-tag { margin-top: auto !important; align-self: flex-start !important; text-transform: none !important; }
.button-ics[disabled] { background: #e5e7eb !important; border-color: #d1d5db !important; color: #8b98aa !important; cursor: not-allowed !important; }


/* v12: tighter inline controls, 2-digit year dates, sticky filters, and scrollable entries. Keep this block last. */
:root { --pbm-v12-compact-font: 13.5px; }

.filter-card {
    position: sticky !important;
    top: 60px !important;
    z-index: 8 !important;
    margin-bottom: 8px !important;
    box-shadow: 0 10px 24px rgba(24, 34, 53, 0.10) !important;
}

.filter-card .button,
.filter-card button,
.filter-card .show-spam-toggle {
    min-height: 34px !important;
    padding: 7px 12px !important;
    font-size: var(--pbm-v12-compact-font) !important;
    line-height: 1.2 !important;
}

.filter-card .show-spam-toggle {
    color: var(--ink) !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
}

.filter-card .show-spam-toggle input,
.inline-alloc-check input,
.inline-spam-check input {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
}

.table-wrap-wide {
    max-height: calc(100vh - 150px) !important;
    overflow: auto !important;
}

.call-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
}

.call-table,
.call-table th,
.call-table td,
.call-table input,
.call-table select,
.call-table textarea,
.call-table a,
.call-table label,
.call-table .button,
.call-table button {
    font-size: var(--pbm-v12-compact-font) !important;
}

.call-table th,
.call-table td {
    padding: 7px 7px !important;
}

.call-table .date-col { width: 76px !important; }
.call-table .client-col { width: 162px !important; }
.call-table .contact-col { width: 138px !important; }
.call-table .service-col { width: 122px !important; }
.call-table .alloc-col { width: 84px !important; }
.call-table .status-col { width: 95px !important; }
.call-table .quote-when-col { width: 82px !important; }
.call-table .quote-value-col { width: 86px !important; padding-left: 12px !important; }
.call-table .comment-col { width: 242px !important; }
.call-table .save-col { width: 68px !important; }

.call-table .status-col select.inline-status {
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 6px !important;
    padding-right: 18px !important;
}

.quote-when-fields {
    gap: 4px !important;
}

.quote-when-fields input,
.quote-when-fields .inline-date,
.quote-when-fields .inline-time {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    letter-spacing: -0.02em !important;
}

.compact-date-input::placeholder {
    color: #8b98aa !important;
    opacity: 1 !important;
}

.call-table .quote-value-col .inline-money {
    width: calc(100% - 4px) !important;
    margin-left: 4px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
}

.entry-date-cell {
    line-height: 1.18 !important;
}

.entry-date-line,
.entry-time-line {
    display: block !important;
    white-space: nowrap !important;
}

.inline-spam-check {
    color: var(--ink) !important;
}

.category-suburb-stack {
    min-height: 70px !important;
}

@media (max-width: 980px) {
    .filter-card {
        position: static !important;
        top: auto !important;
    }
    .table-wrap-wide {
        max-height: none !important;
    }
    .call-table { min-width: 1060px !important; }
}

/* v13: Gravity Forms diagnostics and security audit. */
.section-head-inline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.integration-settings-card code,
.import-help code,
.security-table code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.integration-log-wrap,
.security-table-wrap {
    box-shadow: none !important;
    border-radius: 12px !important;
}
.security-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.security-summary-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    padding: 14px 16px;
    box-shadow: var(--shadow);
}
.security-summary-card strong {
    display: block;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.04em;
}
.security-summary-card span {
    display: block;
    margin-top: 5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 12px;
}
.security-summary-card.critical { border-color: #fecaca; background: #fff5f5; color: #991b1b; }
.security-summary-card.warning { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.security-summary-card.good { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.security-table {
    min-width: 900px;
}
.security-table th,
.security-table td {
    font-size: 13.5px;
    padding: 10px 12px;
}
.audit-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.audit-good { background: #dcfce7; color: #166534; }
.audit-warning { background: #fef3c7; color: #92400e; }
.audit-critical { background: #fee2e2; color: #991b1b; }
.integration-log-table td:nth-child(5) { max-width: 460px; overflow-wrap: anywhere; }
@media (max-width: 760px) {
    .security-summary-grid { grid-template-columns: 1fr; }
    .security-table { min-width: 760px; }
}

/* v14: 12-month horizontal leads chart. */
.monthly-card-horizontal {
    padding: 10px 12px !important;
}
.monthly-card-horizontal .monthly-head {
    margin-bottom: 8px !important;
}
.month-timeline {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(52px, 1fr)) !important;
    gap: 7px !important;
    align-items: end !important;
    width: 100% !important;
}
.month-tile {
    display: grid !important;
    grid-template-rows: auto 56px auto !important;
    gap: 4px !important;
    min-width: 0 !important;
    text-align: center !important;
    align-items: end !important;
}
.month-tile strong {
    display: block !important;
    color: var(--ink) !important;
    font-size: 12.5px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
}
.month-column {
    position: relative !important;
    display: flex !important;
    align-items: end !important;
    width: 100% !important;
    height: 56px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    background: #eef3fb !important;
}
.month-column i {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    border-radius: 10px 10px 0 0 !important;
    background: var(--primary) !important;
}
.month-tile-empty .month-column i {
    background: transparent !important;
}
.month-tile span {
    display: block !important;
    color: var(--muted) !important;
    font-size: 11.5px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}
.no-month-history {
    margin: 8px 0 0 !important;
    font-size: 12.5px !important;
}
@media (max-width: 980px) {
    .month-timeline {
        grid-template-columns: repeat(12, minmax(58px, 1fr)) !important;
        overflow-x: auto !important;
        padding-bottom: 3px !important;
    }
    .month-tile { min-width: 58px !important; }
}

/* Scheduled leads and SMS. */
.schedule-overview-card,
.schedule-week-card,
.appointment-leads-card {
    overflow: visible;
}
.schedule-range-label,
.count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    background: #f8fafc;
    color: var(--ink);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 13.5px;
    font-weight: 900;
}
.schedule-tiles-14 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 9px;
}
.schedule-day-tile {
    display: grid;
    gap: 4px;
    min-height: 136px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    text-decoration: none !important;
    box-shadow: 0 8px 22px rgba(24,34,53,.05);
}
.schedule-day-tile:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
}
.schedule-day-tile.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(249,178,51,.18);
}
.schedule-day-name,
.schedule-day-tile em,
.tile-bookings span,
.slot-drop-hint,
.booking-chip span {
    font-size: 12.5px;
    color: var(--muted);
}
.schedule-day-tile strong {
    font-size: 17px;
    line-height: 1.1;
}
.tile-bookings {
    display: grid;
    gap: 3px;
    align-self: end;
}
.tile-bookings span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.schedule-week-grid {
    display: grid;
    grid-template-columns: 82px repeat(7, minmax(118px, 1fr));
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
}
.slot-corner,
.schedule-week-head,
.slot-time-label,
.schedule-slot {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}
.slot-corner,
.schedule-week-head,
.slot-time-label {
    padding: 8px;
    font-size: 13px;
    font-weight: 900;
}
.schedule-week-head {
    display: grid;
    gap: 2px;
    text-align: center;
}
.schedule-week-head span {
    color: var(--muted);
    font-size: 12.5px;
}
.schedule-week-head.selected {
    border-color: var(--accent);
    background: #fffbeb;
}
.slot-time-label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 92px;
    color: var(--primary);
}
.schedule-slot {
    position: relative;
    min-height: 92px;
    padding: 6px;
    display: grid;
    align-content: start;
    gap: 5px;
    background: #fbfdff;
}
.schedule-slot.slot-hover {
    outline: 2px dashed var(--primary);
    outline-offset: -5px;
    background: #eef6ff;
}
.slot-drop-hint {
    position: absolute;
    left: 8px;
    bottom: 5px;
    opacity: .58;
    pointer-events: none;
}
.booking-chip {
    display: grid;
    gap: 1px;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    border-radius: 10px;
    padding: 5px 6px;
    font-size: 12.5px;
    line-height: 1.2;
}
.booking-chip a {
    font-weight: 900;
}
.draggable-lead-row {
    cursor: grab;
}
.draggable-lead-row.dragging {
    opacity: .55;
}
.schedule-leads-table-wrap {
    max-height: 38vh;
    overflow: auto;
}
.booking-modal[hidden] {
    display: none !important;
}
.booking-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .45);
}
.booking-modal-card {
    position: relative;
    width: min(560px, 100%);
    padding: 22px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 80px rgba(15,23,42,.28);
}
.booking-modal-card h2 {
    margin-top: 0;
}
.booking-modal-card textarea {
    width: 100%;
    margin-top: 5px;
}
.modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: #eef2f7;
    color: var(--ink);
    font-size: 22px;
    cursor: pointer;
}
.button-sm8 {
    background: #334155 !important;
    color: #fff !important;
}
.inline-action-form {
    margin: 0;
}
.row-actions-stack .button-sm8 {
    width: 100%;
}
.sm8-detail-form {
    margin: 8px 0 0;
}
.compact-sms-form textarea {
    min-height: 94px;
}
.mini-heading {
    margin: 14px 0 8px;
    font-size: 14px;
}
.message-history-item p {
    margin-bottom: 0;
}
.mini-fieldset {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px;
    display: grid;
    gap: 10px;
}
.mini-fieldset legend {
    padding: 0 6px;
    font-weight: 900;
    color: var(--primary);
}
.voip-lines-grid label,
.mini-fieldset label {
    font-size: 13.5px;
}
@media (max-width: 1100px) {
    .schedule-tiles-14 { grid-template-columns: repeat(4, minmax(140px, 1fr)); }
    .schedule-week-grid { grid-template-columns: 82px repeat(7, 128px); }
}
@media (max-width: 760px) {
    .schedule-tiles-14 { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
    .booking-modal { align-items: flex-end; }
}

/* v17: settings page for favicon uploads. */
.favicon-settings-card .form-section-title {
    margin-bottom: 2px;
}
.favicon-preview-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.favicon-preview-box {
    width: 86px;
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(135deg, #071a33, #0b2447);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    overflow: hidden;
}
.favicon-preview-box img {
    max-width: 64px;
    max-height: 64px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.favicon-preview-box span {
    color: rgba(255,255,255,.78);
    font-weight: 900;
    font-size: 12.5px;
}


/* v19: automatic saves, compact date picker and filter controls. */
.filter-card .button,
.filter-card button,
.filter-card .show-spam-toggle {
    min-height: 34px !important;
    padding: 7px 12px !important;
    color: #111827 !important;
    box-sizing: border-box;
}
.filter-card .show-spam-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fff;
    line-height: 1.2;
}
.filter-card .show-spam-toggle input { margin: 0; }
.inline-spam-check { color: #111827 !important; }
.row-save-state {
    display: block;
    min-height: 14px;
    margin-top: 3px;
    font-size: 11px !important;
    line-height: 1.1;
    color: #4b5563;
    text-align: center;
}
.row-saving { opacity: .72; }
.row-saved button[name="save_client_id"] { background: #16a34a !important; color: #fff !important; }
.row-save-error button[name="save_client_id"] { background: #b91c1c !important; color: #fff !important; }
tr.row-archiving { opacity: .35; transform: scale(.995); transition: opacity .18s ease, transform .18s ease; }
.date-picker-wrap {
    position: relative;
    display: block;
    width: 100%;
}
.date-picker-wrap .compact-date-input {
    width: 100% !important;
    padding-right: 28px !important;
}
.native-date-picker {
    position: absolute;
    right: 0;
    top: 0;
    width: 28px !important;
    height: 30px !important;
    opacity: 0;
    pointer-events: none;
}
.date-picker-button {
    position: absolute;
    right: 2px;
    top: 2px;
    width: 24px !important;
    min-width: 24px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 !important;
    border: 0;
    background: transparent;
    font-size: 13px !important;
    line-height: 1;
    cursor: pointer;
}
.date-picker-button:hover { background: rgba(15, 23, 42, .06); border-radius: 6px; }
.latest-note-preview { display: none !important; }
.call-table .status-col { width: 118px !important; }
.call-table .quote-when-col { width: 112px !important; }
.call-table .quote-value-col { padding-left: 10px !important; }
.dedupe-group { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.dedupe-group:last-child { border-bottom: 0; }

/* v19: immediate autosave, compact date picker and cleaner spam filter. */
.filter-card .show-spam-toggle {
    padding: 0 !important;
    min-height: 34px !important;
    color: var(--ink) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.filter-card .show-spam-toggle input {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
}
.date-picker-wrap {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 22px !important;
    align-items: center !important;
    gap: 3px !important;
    width: 100% !important;
}
.date-picker-wrap .compact-date-input {
    grid-column: 1 / 2 !important;
}
.date-picker-button {
    grid-column: 2 / 3 !important;
    width: 22px !important;
    min-width: 22px !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    background: #eef3fb !important;
    color: var(--primary) !important;
}
.native-date-picker {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 24px !important;
    height: 28px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.call-table tr[data-client-row] {
    transition: opacity .16s ease, transform .16s ease, background-color .16s ease !important;
}
.call-table tr.autosave-saving td:first-child::before,
.call-table tr.autosave-saved td:first-child::before,
.call-table tr.autosave-error td:first-child::before {
    display: block !important;
    margin-bottom: 3px !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}
.call-table tr.autosave-saving td:first-child::before { content: 'Saving'; color: #64748b !important; }
.call-table tr.autosave-saved td:first-child::before { content: 'Saved'; color: #166534 !important; }
.call-table tr.autosave-error td:first-child::before { content: 'Error'; color: #991b1b !important; }
.call-table tr.row-archiving {
    opacity: 0 !important;
    transform: translateX(16px) !important;
}
.call-table tr.autosave-error {
    background: #fff5f5 !important;
}

/* v19: auto-save table, compact date picker, spam padding, duplicate-safe dashboard polish. */
.filter-card .button,
.filter-card button,
.filter-card .show-spam-toggle {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 12px !important;
    align-items: center !important;
}
.filter-card .show-spam-toggle {
    display: inline-flex !important;
    gap: 6px !important;
    color: var(--ink) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}
.filter-card .show-spam-toggle input {
    margin: 0 !important;
}
.call-table .save-col { width: 66px !important; }
.call-table .quote-when-col { width: 88px !important; }
.call-table .status-col { width: 96px !important; }
.row-actions-stack { gap: 4px !important; }
.autosave-state {
    display: block !important;
    min-height: 15px !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    text-align: center !important;
}
.autosave-state.is-saving { color: #a16207 !important; }
.autosave-state.is-saved { color: #047857 !important; }
.autosave-state.is-error { color: #b42318 !important; }
.row-archiving {
    opacity: .35 !important;
    transform: scale(.995) !important;
    transition: opacity .12s ease, transform .12s ease !important;
}
.date-picker-wrap {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}
.date-picker-wrap .compact-date-input {
    padding-right: 24px !important;
}
.date-picker-button {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    width: 23px !important;
    min-width: 23px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 !important;
    border-radius: 7px !important;
    border: 0 !important;
    background: #eef3fb !important;
    color: var(--primary) !important;
    font-size: 12px !important;
    line-height: 1 !important;
}
.native-date-picker {
    position: absolute !important;
    right: 0 !important;
    top: 100% !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.call-table .button-ics,
.call-table .button-sm8 {
    min-height: 25px !important;
    padding: 3px 5px !important;
    font-size: 12.5px !important;
}
.call-table .inline-comment {
    min-height: 52px !important;
}
.call-table .latest-note-preview {
    display: none !important;
}
@media (max-width: 980px) {
    .call-table { min-width: 1060px !important; }
}

/* v19: immediate autosave, compact date picker, sticky filters, spam archive, and default New Lead workflow. */
.filter-card {
    position: sticky !important;
    top: 60px !important;
    z-index: 9 !important;
}
.filter-card .button,
.filter-card button,
.filter-card .show-spam-toggle {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 13.5px !important;
    line-height: 1 !important;
}
.filter-card .show-spam-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: var(--ink) !important;
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    margin: 0 !important;
}
.filter-card .show-spam-toggle input,
.inline-spam-check input,
.inline-alloc-check input {
    margin: 0 !important;
    width: 15px !important;
    height: 15px !important;
    min-height: 15px !important;
    padding: 0 !important;
    flex: 0 0 15px !important;
}
.inline-spam-check { color: var(--ink) !important; }
.table-wrap-wide {
    max-height: calc(100vh - 152px) !important;
    overflow: auto !important;
}
.call-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 4 !important;
    background: #f8fafc !important;
}
.call-table .status-col { width: 92px !important; }
.call-table .quote-when-col { width: 86px !important; }
.call-table .quote-value-col { width: 88px !important; padding-left: 12px !important; }
.call-table .save-col { width: 64px !important; }
.call-table .comment-col { width: 240px !important; }
.date-picker-wrap {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 25px !important;
    gap: 3px !important;
    align-items: center !important;
    width: 100% !important;
}
.date-picker-wrap .compact-date-input {
    grid-column: 1 / 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 6px !important;
    padding-right: 5px !important;
}
.native-date-picker {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 25px !important;
    height: 30px !important;
    min-height: 30px !important;
    opacity: 0 !important;
    z-index: 2 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
}
.date-picker-button {
    grid-column: 2 / 3 !important;
    width: 25px !important;
    min-width: 25px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    background: #eef3fb !important;
    color: var(--primary) !important;
    border: 1px solid var(--line) !important;
}
.quote-when-fields {
    gap: 4px !important;
}
.quote-when-fields .inline-time {
    padding-left: 6px !important;
    padding-right: 4px !important;
}
.autosave-state {
    display: block !important;
    width: 100% !important;
    min-height: 20px !important;
    padding: 3px 4px !important;
    border-radius: 999px !important;
    background: #eef3fb !important;
    color: var(--muted) !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    text-align: center !important;
}
.autosave-state.is-saving { background: #fef3c7 !important; color: #92400e !important; }
.autosave-state.is-saved { background: #dcfce7 !important; color: #166534 !important; }
.autosave-state.is-error { background: #fee2e2 !important; color: #991b1b !important; }
.row-archiving {
    opacity: 0 !important;
    transform: scale(.985) !important;
    transition: opacity .14s ease, transform .14s ease !important;
}
.row-actions-stack {
    gap: 4px !important;
}
.row-actions-stack .button,
.row-actions-stack button {
    min-height: 27px !important;
    padding: 4px 6px !important;
}
@media (max-width: 980px) {
    .filter-card { position: static !important; }
    .table-wrap-wide { max-height: none !important; }
    .call-table { min-width: 1080px !important; }
}

/* v20: action booking controls, 7-day scheduler, address/travel checks and quotes. */
.call-table .action-col,
.call-table .quote-when-col.action-col {
    width: 168px !important;
    min-width: 168px !important;
}
.action-fields {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
    align-items: end !important;
}
.action-fields .mini-field {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
}
.action-fields .mini-field span {
    font-size: 10.5px !important;
    font-weight: 900 !important;
    color: var(--muted) !important;
    line-height: 1 !important;
}
.action-fields select,
.action-fields input,
.action-fields .native-date-picker {
    position: static !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 3px 5px !important;
    font-size: 13.5px !important;
    line-height: 1.1 !important;
    border: 1px solid var(--line) !important;
    border-radius: 7px !important;
    background: #fff !important;
}
.action-type-field,
.action-date-field,
.action-time-field,
.action-hours-field { min-width: 0 !important; }
.contact-links .address-link,
.contact-links a[href*="google.com/maps"] {
    display: block !important;
    margin-top: 2px !important;
    font-size: 12.5px !important;
    line-height: 1.2 !important;
    color: #475569 !important;
    word-break: break-word !important;
}
.schedule-controls {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.schedule-tiles-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 9px;
}
.schedule-overview-card.minimized .schedule-tiles-7,
.schedule-overview-card.minimized .schedule-overview-head p {
    display: none !important;
}
.schedule-overview-card.minimized {
    padding-bottom: 12px !important;
}
.schedule-week-card .slot-drop-hint { display: none !important; }
.booking-chip.travel-conflict {
    border-color: #dc2626 !important;
    background: #fee2e2 !important;
    color: #7f1d1d !important;
    box-shadow: 0 0 0 2px rgba(220,38,38,.12) !important;
}
.booking-chip.travel-conflict a { color: #7f1d1d !important; }
.booking-address-link {
    display: block;
    font-size: 11.5px;
    color: #475569;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.travel-check-status { margin: 10px 0 0 !important; }

.quote-modal[hidden],
.booking-modal[hidden] { display: none !important; }
.quote-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, .52);
}
.quote-modal-card {
    position: relative;
    width: min(1180px, 96vw);
    max-height: 92vh;
    overflow: auto;
    background: #fff;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 28px 90px rgba(15, 23, 42, .35);
}
.quote-modal-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: start;
    margin-bottom: 12px;
}
.quote-modal-head h2 { margin: 0 0 3px; }
.quote-company-mark {
    white-space: nowrap;
    background: #111827;
    color: #fff;
    border-radius: 999px;
    padding: 7px 11px;
    font-size: 13.5px;
}
.quote-form label { font-weight: 800; color: var(--ink); }
.quote-form input,
.quote-form select,
.quote-form textarea {
    font-size: 13.5px !important;
}
.quote-template-toolbar {
    display: flex;
    gap: 8px;
    align-items: end;
    flex-wrap: wrap;
    margin: 12px 0;
}
.quote-template-toolbar label { min-width: min(360px, 100%); }
.quote-items-wrap { max-height: 300px; overflow: auto; }
.quote-items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.quote-items-table th,
.quote-items-table td {
    border-bottom: 1px solid var(--line);
    padding: 6px;
    vertical-align: top;
}
.quote-items-table th { background: #f8fafc; text-align: left; }
.quote-items-table input,
.quote-items-table textarea { width: 100%; }
.quote-items-table textarea { min-height: 42px; }
.quote-items-table tfoot td { font-weight: 900; }
.quote-signature-box {
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px;
    background: #f8fafc;
}
#quote-signature-pad,
.signature-pad {
    width: 100%;
    max-width: 760px;
    height: 170px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #fff;
    touch-action: none;
    display: block;
}
.quote-form-actions { position: sticky; bottom: 0; background: #fff; padding-top: 10px; border-top: 1px solid var(--line); }

.public-quote-page {
    background: #eef2f7;
    color: #0f172a;
}
.public-quote-wrap {
    max-width: 980px;
    margin: 0 auto;
    padding: 24px 14px 42px;
}
.public-quote-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #dbe3ef;
    padding: 28px;
    box-shadow: 0 16px 45px rgba(15, 23, 42, .08);
}
.public-quote-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: start;
    border-bottom: 2px solid #111827;
    padding-bottom: 14px;
    margin-bottom: 18px;
}
.public-quote-logo { width: 150px; height: auto; background: #111827; padding: 8px; border-radius: 10px; }
.quote-info-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr .8fr;
    gap: 20px;
}
.quote-info-grid h1 { margin-top: 0; }
.quote-deposit-block,
.quote-terms-block,
.accepted-block,
.quote-accept-form {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fbfdff;
}
.public-quote-items {
    width: 100%;
    border-collapse: collapse;
    margin-top: 18px;
}
.public-quote-items th,
.public-quote-items td {
    padding: 10px;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
    vertical-align: top;
}
.public-quote-items th { background: #f8fafc; }
.public-quote-items td:nth-child(2),
.public-quote-items td:nth-child(3),
.public-quote-items td:nth-child(4),
.public-quote-items tfoot th { text-align: right; }
.quote-terms-block { font-size: 12.5px; line-height: 1.45; }
.quote-signature-preview {
    display: block;
    max-width: 420px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    margin-top: 8px;
}
.signature-pad-wrap { margin: 6px 0 10px; }
.quote-accept-form input,
.quote-accept-form textarea { width: 100%; }

@media (max-width: 980px) {
    .schedule-tiles-7 { grid-template-columns: repeat(4, minmax(140px, 1fr)); overflow-x: auto; }
    .quote-info-grid { grid-template-columns: 1fr; }
    .public-quote-header { display: grid; }
}
@media (max-width: 700px) {
    .schedule-tiles-7 { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
    .action-fields { grid-template-columns: 1fr !important; }
    .quote-modal { align-items: flex-end; padding: 8px; }
    .quote-modal-card { max-height: 96vh; width: 100%; border-radius: 16px 16px 0 0; }
    .quote-template-toolbar { display: grid; }
    .public-quote-card { padding: 16px; }
}
@media print {
    .no-print, .public-quote-actions, .quote-accept-form { display: none !important; }
    .public-quote-page { background: #fff !important; }
    .public-quote-wrap { padding: 0 !important; max-width: none !important; }
    .public-quote-card { box-shadow: none !important; border: 0 !important; padding: 0 !important; }
}

/* v23: widen Entry and add consistent 6px spacing above its status controls. */
.call-table .entry-status-col,
.call-table .date-col.entry-status-col {
    width: 176px !important;
    min-width: 176px !important;
    vertical-align: top !important;
}
.entry-date-time-stack {
    display: grid !important;
    gap: 1px !important;
}
.entry-status-stack {
    display: grid !important;
    gap: 0 !important;
    margin-top: 6px !important;
    padding-top: 6px !important;
    border-top: 1px solid var(--line) !important;
}
.entry-status-stack .inline-status {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 4px 24px 4px 7px !important;
    border: 1px solid var(--line) !important;
    border-radius: 7px !important;
    background-color: #fff !important;
    font-size: 13.5px !important;
    line-height: 1.1 !important;
}
.entry-status-stack .inline-spam-check {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
    padding-top: 6px !important;
    color: var(--ink) !important;
    font-size: 13.5px !important;
    line-height: 1.1 !important;
}
.call-table .action-col,
.call-table .quote-when-col.action-col {
    width: 252px !important;
    min-width: 252px !important;
}
.action-fields {
    grid-template-columns: minmax(112px, 1.15fr) minmax(96px, 1fr) !important;
    column-gap: 7px !important;
    row-gap: 6px !important;
}
.action-fields select,
.action-fields input,
.action-fields .native-date-picker {
    padding-left: 7px !important;
    padding-right: 7px !important;
}
@media (max-width: 980px) {
    .call-table { min-width: 1190px !important; }
}


/* v24: roomier Entry controls and an AU compact quote-date display. */
.call-table .entry-status-col,
.call-table .date-col.entry-status-col {
    width: 176px !important;
    min-width: 176px !important;
}
.entry-status-stack {
    margin-top: 0 !important;
    padding-top: 6px !important;
}
.native-date-display-wrap {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
}
.action-fields .native-date-display-wrap .native-date-picker {
    position: relative !important;
    z-index: 1 !important;
    color: transparent !important;
    caret-color: transparent !important;
    padding-right: 30px !important;
}
.action-fields .native-date-display-wrap .native-date-picker::-webkit-datetime-edit,
.action-fields .native-date-display-wrap .native-date-picker::-webkit-datetime-edit-fields-wrapper,
.action-fields .native-date-display-wrap .native-date-picker::-webkit-datetime-edit-text,
.action-fields .native-date-display-wrap .native-date-picker::-webkit-datetime-edit-month-field,
.action-fields .native-date-display-wrap .native-date-picker::-webkit-datetime-edit-day-field,
.action-fields .native-date-display-wrap .native-date-picker::-webkit-datetime-edit-year-field {
    color: transparent !important;
}
.action-fields .native-date-display-wrap .native-date-picker::-webkit-calendar-picker-indicator {
    position: relative !important;
    z-index: 3 !important;
    opacity: 1 !important;
    cursor: pointer !important;
}
.native-date-display {
    position: absolute !important;
    z-index: 2 !important;
    top: 50% !important;
    left: 8px !important;
    right: 30px !important;
    transform: translateY(-50%) !important;
    overflow: hidden !important;
    color: var(--ink) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}
.native-date-display.is-placeholder {
    color: var(--muted) !important;
    font-weight: 500 !important;
}
@media (max-width: 980px) {
    .call-table { min-width: 1190px !important; }
}

/* v25: mobile workspace for large-screen iPhones and other touch devices. */
:root {
    --mobile-header-height: calc(50px + env(safe-area-inset-top, 0px));
    --mobile-bottom-nav-height: calc(54px + env(safe-area-inset-bottom, 0px));
}

.mobile-view-title,
.mobile-top-actions,
.mobile-bottom-nav,
.mobile-drawer-backdrop,
.mobile-nav-head,
.mobile-nav-account,
.mobile-filter-toggle,
.mobile-stats-toggle,
.mobile-row-edit-button,
.mobile-schedule-handle,
.mobile-schedule-banner,
.mobile-drag-ghost {
    display: none !important;
}

.mobile-icon-button svg,
.mobile-bottom-nav svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.mobile-bottom-nav svg circle { fill: currentColor; stroke: none; }

@media (max-width: 980px) {
    html {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-x: clip !important;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        scroll-padding-top: calc(var(--mobile-header-height) + 54px);
    }
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-x: clip !important;
        overscroll-behavior-x: none;
    }
    body.mobile-drawer-lock {
        overflow: hidden !important;
    }

    /* Compact safe-area-aware top bar. */
    .topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 80 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        width: 100% !important;
        min-height: var(--mobile-header-height) !important;
        gap: 7px !important;
        padding-top: calc(6px + env(safe-area-inset-top, 0px)) !important;
        padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
        padding-bottom: 6px !important;
        padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
        box-shadow: 0 5px 18px rgba(7, 26, 51, .22) !important;
    }
    .topbar .brand {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        width: auto !important;
        gap: 0 !important;
    }
    .topbar .brand span { display: none !important; }
    .topbar .brand-logo {
        width: 68px !important;
        max-width: 68px !important;
        max-height: 32px !important;
        object-fit: contain !important;
    }
    .mobile-view-title {
        display: block !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        color: #fff !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1.1 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .desktop-user-chip { display: none !important; }
    .mobile-top-actions {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        gap: 5px !important;
    }
    .mobile-icon-button,
    .mobile-account-chip {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid rgba(255,255,255,.18) !important;
        border-radius: 10px !important;
        background: rgba(255,255,255,.10) !important;
        color: #fff !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        text-decoration: none !important;
        box-shadow: none !important;
    }
    .mobile-icon-button:active,
    .mobile-account-chip:active { background: rgba(255,255,255,.22) !important; }

    /* Main menu becomes an off-canvas sheet. */
    .topbar .nav {
        position: fixed !important;
        inset: 0 0 0 auto !important;
        z-index: 120 !important;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 5px !important;
        width: min(86vw, 340px) !important;
        height: 100vh !important;
        height: 100dvh !important;
        padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
        padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
        padding-left: 12px !important;
        overflow-y: auto !important;
        background: linear-gradient(165deg, #071a33, #0b2447) !important;
        box-shadow: -22px 0 48px rgba(7,26,51,.34) !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate3d(105%, 0, 0) !important;
        transition: transform .22s ease, visibility 0s linear .22s !important;
        overscroll-behavior: contain;
    }
    body.mobile-nav-open .topbar .nav {
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate3d(0, 0, 0) !important;
        transition-delay: 0s !important;
    }
    .topbar .nav a {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 11px 13px !important;
        border: 1px solid rgba(255,255,255,.08) !important;
        border-radius: 11px !important;
        background: rgba(255,255,255,.06) !important;
        color: #fff !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
    }
    .topbar .nav a.active {
        border-color: rgba(249,178,51,.48) !important;
        background: rgba(249,178,51,.16) !important;
        color: #fff !important;
    }
    .topbar .nav a:last-child {
        margin-top: auto !important;
        border-color: rgba(255,255,255,.16) !important;
    }
    .mobile-nav-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-bottom: 8px !important;
        padding: 4px 2px 12px !important;
        border-bottom: 1px solid rgba(255,255,255,.14) !important;
        color: #fff !important;
    }
    .mobile-nav-head > div { min-width: 0 !important; }
    .mobile-nav-head strong,
    .mobile-nav-head span { display: block !important; }
    .mobile-nav-head strong { font-size: 16px !important; }
    .mobile-nav-head span { color: rgba(255,255,255,.7) !important; font-size: 12px !important; }
    .mobile-drawer-close {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        border: 1px solid rgba(255,255,255,.16) !important;
        border-radius: 10px !important;
        background: rgba(255,255,255,.10) !important;
        color: #fff !important;
        font-size: 23px !important;
        line-height: 1 !important;
    }
    .mobile-nav-account { display: flex !important; }
    .mobile-drawer-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 105 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: rgba(15,23,42,.5) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity .18s ease !important;
    }
    body.mobile-nav-open .mobile-drawer-backdrop,
    body.mobile-sidebar-open .mobile-drawer-backdrop {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Fast thumb navigation. */
    .mobile-bottom-nav {
        position: fixed !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 70 !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        min-height: var(--mobile-bottom-nav-height) !important;
        padding: 4px max(4px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(4px, env(safe-area-inset-left, 0px)) !important;
        border-top: 1px solid rgba(15,23,42,.10) !important;
        background: rgba(255,255,255,.97) !important;
        box-shadow: 0 -8px 24px rgba(15,23,42,.12) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        backdrop-filter: blur(14px) !important;
    }
    .mobile-bottom-nav a,
    .mobile-bottom-nav button {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1px !important;
        min-width: 0 !important;
        min-height: 46px !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 3px 2px !important;
        border: 0 !important;
        border-radius: 9px !important;
        background: transparent !important;
        color: #64748b !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-decoration: none !important;
        box-shadow: none !important;
        white-space: nowrap !important;
    }
    .mobile-bottom-nav a.active {
        background: #eef3fb !important;
        color: var(--primary) !important;
    }
    .mobile-bottom-nav a.active::before {
        content: '';
        position: absolute;
        top: 2px;
        width: 24px;
        height: 3px;
        border-radius: 99px;
        background: var(--accent);
    }
    .mobile-bottom-nav a { position: relative !important; }
    .mobile-bottom-nav svg { width: 19px !important; height: 19px !important; }
    .mobile-bottom-nav span { display: block !important; font-size: 10px !important; }

    /* Categories/settings drawer. */
    .side-menu,
    body.sidebar-collapsed .side-menu,
    html.sidebar-collapsed-preload .side-menu {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 120 !important;
        display: flex !important;
        flex-direction: column !important;
        width: min(88vw, 320px) !important;
        min-width: min(88vw, 320px) !important;
        max-width: 320px !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        flex-basis: auto !important;
        gap: 8px !important;
        padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
        padding-right: 10px !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 0 18px 18px 0 !important;
        background: #fff !important;
        box-shadow: 22px 0 48px rgba(15,23,42,.24) !important;
        opacity: 1 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate3d(-105%,0,0) !important;
        transition: transform .22s ease, visibility 0s linear .22s !important;
    }
    body.mobile-sidebar-open .side-menu {
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate3d(0,0,0) !important;
        transition-delay: 0s !important;
    }
    .side-menu-main {
        display: flex !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        flex-direction: column !important;
    }
    .side-menu-head {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 42px !important;
        margin: 0 0 6px !important;
        padding: 0 2px 8px !important;
        border-bottom: 1px solid var(--line) !important;
    }
    .side-menu-title {
        display: block !important;
        padding: 0 6px !important;
        color: var(--ink) !important;
        font-size: 13px !important;
        letter-spacing: .04em !important;
    }
    .side-collapse-button {
        display: inline-flex !important;
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 10px !important;
        font-size: 22px !important;
    }
    body.sidebar-collapsed .side-menu-title,
    body.sidebar-collapsed .side-links,
    body.sidebar-collapsed .side-bottom,
    html.sidebar-collapsed-preload .side-menu-title,
    html.sidebar-collapsed-preload .side-links,
    html.sidebar-collapsed-preload .side-bottom {
        display: initial !important;
    }
    .side-links {
        display: grid !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        gap: 4px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 0 2px 8px 0 !important;
        -webkit-overflow-scrolling: touch;
    }
    .side-link {
        display: flex !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
        min-height: 40px !important;
        padding: 9px 10px !important;
        border-radius: 10px !important;
        font-size: 14px !important;
    }
    .side-link strong { font-size: 12px !important; }
    .side-bottom {
        display: block !important;
        flex: 0 0 auto !important;
        margin-top: 0 !important;
        padding-top: 8px !important;
    }
    .settings-menu summary {
        min-height: 40px !important;
        font-size: 14px !important;
    }
    .settings-links {
        position: static !important;
        width: 100% !important;
        max-height: 42vh !important;
        margin-top: 7px !important;
        overflow-y: auto !important;
        box-shadow: none !important;
    }
    .settings-links a { min-height: 38px !important; padding: 9px 10px !important; font-size: 13.5px !important; }

    /* Main workspace uses the complete viewport. */
    .app-shell {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: calc(100dvh - var(--mobile-header-height)) !important;
    }
    .app-shell > .container,
    .app-shell > .container-wide,
    body.sidebar-collapsed .app-shell > .container,
    body.sidebar-collapsed .app-shell > .container-wide,
    html.sidebar-collapsed-preload .app-shell > .container,
    html.sidebar-collapsed-preload .app-shell > .container-wide {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 7px 6px calc(var(--mobile-bottom-nav-height) + 12px) !important;
    }
    .footer { display: none !important; }
    .card {
        padding: 10px !important;
        border-radius: 12px !important;
        box-shadow: 0 7px 22px rgba(24,34,53,.06) !important;
    }
    .card + .card { margin-top: 8px !important; }
    .alert { margin-bottom: 7px !important; padding: 9px 10px !important; border-radius: 10px !important; font-size: 12.5px !important; }

    .page-head,
    .page-head-compact {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 7px !important;
        min-height: 37px !important;
        margin: 0 1px 6px !important;
    }
    .page-head > div:first-child { min-width: 0 !important; }
    /* The current view is already named in the mobile header; list pages keep only their actions. */
    .app-shell > .container-wide > .page-head > div:first-child { display: none !important; }
    .app-shell > .container-wide > .page-head {
        min-height: 32px !important;
        justify-content: flex-end !important;
        margin-bottom: 4px !important;
    }
    .page-head h1,
    .page-head-compact h1 {
        margin: 0 !important;
        overflow: hidden !important;
        font-size: 20px !important;
        line-height: 1.05 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .page-head p,
    .page-head-compact p { display: none !important; }
    .page-head .actions {
        display: flex !important;
        flex: 0 0 auto !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        margin: 0 !important;
        max-width: 62vw !important;
        overflow-x: auto !important;
        scrollbar-width: none;
    }
    .page-head .actions::-webkit-scrollbar { display: none !important; }
    .page-head .actions .button,
    .page-head .actions button {
        min-height: 32px !important;
        height: 32px !important;
        padding: 0 10px !important;
        font-size: 12.5px !important;
    }
    .mobile-stats-toggle {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        min-height: 32px !important;
        height: 32px !important;
        padding: 0 10px !important;
        border-radius: 999px !important;
        font-size: 12.5px !important;
    }
    body.mobile-stats-collapsed .dashboard-grid,
    body.mobile-stats-collapsed .dashboard-grid-compact,
    body.mobile-stats-collapsed .monthly-card { display: none !important; }

    .dashboard-grid,
    .dashboard-grid-compact {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 7px !important;
        width: 100% !important;
        margin: 0 0 7px !important;
        padding: 0 0 2px !important;
        overflow-x: auto !important;
        scroll-snap-type: x proximity !important;
        -webkit-overflow-scrolling: touch;
    }
    .metric-card {
        flex: 0 0 145px !important;
        min-width: 145px !important;
        min-height: 73px !important;
        padding: 9px 10px !important;
        scroll-snap-align: start !important;
    }
    .metric-card span,
    .metric-card small { font-size: 11px !important; }
    .metric-card strong,
    .metric-value strong { margin: 3px 0 !important; font-size: 22px !important; }
    .monthly-card { margin-bottom: 7px !important; padding: 9px !important; }
    .monthly-head { margin-bottom: 6px !important; }
    .monthly-head .small { display: none !important; }
    .month-timeline {
        grid-template-columns: repeat(12, 55px) !important;
        gap: 5px !important;
        overflow-x: auto !important;
        scroll-snap-type: x proximity !important;
        -webkit-overflow-scrolling: touch;
    }
    .month-tile { min-width: 55px !important; scroll-snap-align: start !important; }
    .month-column { height: 42px !important; }

    /* Compact sticky search/filter row. */
    .filter-card {
        position: sticky !important;
        top: var(--mobile-header-height) !important;
        z-index: 45 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        align-items: end !important;
        gap: 5px !important;
        width: 100% !important;
        margin: 0 0 6px !important;
        padding: 6px !important;
        border-radius: 10px !important;
        box-shadow: 0 5px 18px rgba(15,23,42,.10) !important;
    }
    .mobile-filter-toggle {
        display: inline-flex !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 62px !important;
        min-height: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 9px !important;
        border-radius: 9px !important;
        font-size: 12.5px !important;
    }
    .filter-card > .filter-search {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        width: auto !important;
        margin: 0 !important;
        font-size: 0 !important;
    }
    .filter-card > .filter-search input {
        min-width: 0 !important;
        width: 100% !important;
        height: 36px !important;
        min-height: 36px !important;
        margin: 0 !important;
        padding: 7px 10px !important;
        border-radius: 9px !important;
        font-size: 16px !important;
    }
    .filter-card > button[type="submit"] {
        grid-column: 3 !important;
        grid-row: 1 !important;
        min-width: 54px !important;
        min-height: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 9px !important;
        border-radius: 9px !important;
        font-size: 12.5px !important;
    }
    .filter-card:not(:has(.filter-search)) .mobile-filter-toggle {
        grid-column: 1 / 3 !important;
        justify-self: stretch !important;
    }
    .filter-card:not(.mobile-filters-open) > .filter-select,
    .filter-card:not(.mobile-filters-open) > .show-spam-toggle,
    .filter-card:not(.mobile-filters-open) > a.button { display: none !important; }
    .filter-card.mobile-filters-open {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-height: min(70dvh, 520px) !important;
        overflow-y: auto !important;
        padding: 8px !important;
    }
    .filter-card.mobile-filters-open > * {
        grid-column: auto !important;
        grid-row: auto !important;
        min-width: 0 !important;
    }
    .filter-card.mobile-filters-open > .filter-search { grid-column: 1 / -1 !important; }
    .filter-card.mobile-filters-open > .filter-select {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        font-size: 11.5px !important;
    }
    .filter-card.mobile-filters-open > .filter-select select {
        height: 40px !important;
        min-height: 40px !important;
        margin-top: 3px !important;
        padding: 6px 8px !important;
        font-size: 16px !important;
    }
    .filter-card.mobile-filters-open > .show-spam-toggle,
    .filter-card.mobile-filters-open > a.button,
    .filter-card.mobile-filters-open > button[type="submit"],
    .filter-card.mobile-filters-open > .mobile-filter-toggle {
        display: inline-flex !important;
        min-height: 38px !important;
        height: 38px !important;
        margin: 0 !important;
        border-radius: 9px !important;
    }

    /* iOS controls stay readable and do not trigger page zoom. */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px !important;
    }
    input,
    select,
    textarea,
    button,
    .button { touch-action: manipulation; }

    /* Incoming leads become compact expandable cards instead of a 1190px canvas. */
    .inline-table-form {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }
    .inline-table-form > .table-wrap-wide {
        width: calc(100% + 12px) !important;
        max-height: none !important;
        margin-right: -6px !important;
        margin-left: -6px !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .inline-table-form .call-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        table-layout: auto !important;
        border-collapse: separate !important;
    }
    .inline-table-form .call-table thead { display: none !important; }
    .inline-table-form .call-table tbody {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 7px !important;
        width: 100% !important;
        padding: 0 6px 2px !important;
    }
    .inline-table-form .call-table tbody > tr[data-client-row] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 126px !important;
        grid-template-areas:
            "client entry"
            "contact entry"
            "service service"
            "alloc alloc"
            "action action"
            "value value"
            "comment comment"
            "rowactions rowactions" !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        border: 1px solid var(--line) !important;
        border-radius: 12px !important;
        background: #fff !important;
        box-shadow: 0 5px 16px rgba(24,34,53,.06) !important;
    }
    .inline-table-form .call-table tbody > tr[data-client-row] > td {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 7px 8px !important;
        border: 0 !important;
        background: transparent !important;
        font-size: 13.5px !important;
        line-height: 1.25 !important;
    }
    .inline-table-form .call-table tbody > tr[data-client-row] > .client-col { grid-area: client !important; }
    .inline-table-form .call-table tbody > tr[data-client-row] > .entry-status-col {
        grid-area: entry !important;
        width: auto !important;
        min-width: 0 !important;
        border-left: 1px solid var(--line) !important;
        background: #f8fafc !important;
    }
    .inline-table-form .call-table tbody > tr[data-client-row] > .contact-col { grid-area: contact !important; padding-top: 0 !important; }
    .inline-table-form .call-table tbody > tr[data-client-row] > .service-col {
        grid-area: service !important;
        border-top: 1px solid var(--line) !important;
        background: #fbfdff !important;
    }
    .inline-table-form .call-table tbody > tr[data-client-row] > .alloc-col { grid-area: alloc !important; border-top: 1px solid var(--line) !important; }
    .inline-table-form .call-table tbody > tr[data-client-row] > .action-col { grid-area: action !important; border-top: 1px solid var(--line) !important; }
    .inline-table-form .call-table tbody > tr[data-client-row] > .quote-value-col { grid-area: value !important; border-top: 1px solid var(--line) !important; }
    .inline-table-form .call-table tbody > tr[data-client-row] > .comment-col { grid-area: comment !important; border-top: 1px solid var(--line) !important; }
    .inline-table-form .call-table tbody > tr[data-client-row] > .save-col {
        grid-area: rowactions !important;
        border-top: 1px solid var(--line) !important;
        background: #f8fafc !important;
    }
    .mobile-enhanced .inline-table-form .call-table tbody > tr[data-client-row]:not(.mobile-row-expanded) > .alloc-col,
    .mobile-enhanced .inline-table-form .call-table tbody > tr[data-client-row]:not(.mobile-row-expanded) > .action-col,
    .mobile-enhanced .inline-table-form .call-table tbody > tr[data-client-row]:not(.mobile-row-expanded) > .quote-value-col,
    .mobile-enhanced .inline-table-form .call-table tbody > tr[data-client-row]:not(.mobile-row-expanded) > .comment-col { display: none !important; }
    .mobile-row-edit-button { display: inline-flex !important; }
    .client-name-link {
        font-size: 15px !important;
        line-height: 1.15 !important;
    }
    .client-message-preview {
        display: -webkit-box !important;
        margin-top: 3px !important;
        overflow: hidden !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }
    .contact-links a {
        display: block !important;
        max-width: 100% !important;
        margin: 1px 0 !important;
        overflow: hidden !important;
        color: var(--primary) !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .contact-links .address-link,
    .contact-links a[href*="google.com/maps"] {
        display: -webkit-box !important;
        margin-top: 3px !important;
        overflow: hidden !important;
        font-size: 12px !important;
        white-space: normal !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }
    .entry-status-stack {
        margin: 0 !important;
        padding-top: 5px !important;
    }
    .entry-status-stack .inline-status {
        width: 100% !important;
        height: 37px !important;
        min-height: 37px !important;
        padding: 5px 24px 5px 7px !important;
        font-size: 16px !important;
    }
    .entry-status-stack .inline-spam-check {
        min-height: 25px !important;
        padding-top: 5px !important;
        font-size: 12.5px !important;
    }
    .category-suburb-stack {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 7px !important;
    }
    .category-suburb-stack .service-main {
        min-width: 0 !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
    }
    .suburb-tag { flex: 0 0 auto !important; }
    .inline-table-form .alloc-col {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        flex-wrap: wrap !important;
    }
    .inline-table-form .inline-alloc-check {
        margin: 0 !important;
        min-height: 30px !important;
        font-size: 13.5px !important;
    }
    .inline-table-form .action-col,
    .inline-table-form .quote-when-col.action-col {
        width: auto !important;
        min-width: 0 !important;
    }
    .inline-table-form .action-fields {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }
    .inline-table-form .action-fields .mini-field span { font-size: 11px !important; }
    .inline-table-form .action-fields select,
    .inline-table-form .action-fields input,
    .inline-table-form .action-fields .native-date-picker {
        width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 6px 8px !important;
        border-radius: 8px !important;
        font-size: 16px !important;
    }
    .native-date-display { font-size: 16px !important; }
    .inline-table-form .quote-value-col::before,
    .inline-table-form .comment-col::before {
        display: block !important;
        margin-bottom: 4px !important;
        color: var(--muted) !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        letter-spacing: .04em !important;
        text-transform: uppercase !important;
    }
    .inline-table-form .quote-value-col::before { content: 'Value'; }
    .inline-table-form .comment-col::before { content: 'Comment'; }
    .inline-table-form .inline-money {
        max-width: 150px !important;
        height: 40px !important;
        min-height: 40px !important;
        font-size: 16px !important;
        text-align: left !important;
    }
    .inline-table-form .inline-comment {
        width: 100% !important;
        min-height: 64px !important;
        padding: 8px 9px !important;
        font-size: 16px !important;
    }
    .row-actions-stack {
        display: grid !important;
        grid-template-columns: 46px repeat(4, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 4px !important;
        width: 100% !important;
    }
    .row-actions-stack .autosave-state {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 36px !important;
        height: 36px !important;
        padding: 2px !important;
        overflow: hidden !important;
        font-size: 10px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .row-actions-stack .button,
    .row-actions-stack button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 36px !important;
        height: 36px !important;
        padding: 0 4px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
    }
    .inline-table-form .call-table tbody > tr:not([data-client-row]) {
        display: block !important;
        width: 100% !important;
    }
    .inline-table-form .call-table tbody > tr:not([data-client-row]) > td {
        display: block !important;
        width: 100% !important;
        padding: 22px 12px !important;
        border: 1px solid var(--line) !important;
        border-radius: 12px !important;
        background: #fff !important;
    }

    /* Read-only tables become labelled mobile cards. */
    .mobile-card-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        table-layout: auto !important;
    }
    .mobile-card-table thead { display: none !important; }
    .mobile-card-table tbody {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 7px !important;
    }
    .mobile-card-table tbody > tr {
        display: block !important;
        overflow: hidden !important;
        border: 1px solid var(--line) !important;
        border-radius: 12px !important;
        background: #fff !important;
        box-shadow: 0 5px 16px rgba(24,34,53,.05) !important;
    }
    .mobile-card-table tbody > tr > td {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 35px !important;
        padding: 7px 8px 7px 96px !important;
        border: 0 !important;
        border-bottom: 1px solid #edf1f6 !important;
        font-size: 13.5px !important;
        overflow-wrap: anywhere !important;
    }
    .mobile-card-table tbody > tr > td:last-child { border-bottom: 0 !important; }
    .mobile-card-table tbody > tr > td[data-label]::before {
        content: attr(data-label);
        position: absolute !important;
        top: 8px !important;
        left: 8px !important;
        width: 80px !important;
        color: var(--muted) !important;
        font-size: 10.5px !important;
        font-weight: 900 !important;
        letter-spacing: .035em !important;
        line-height: 1.2 !important;
        text-transform: uppercase !important;
    }
    .mobile-card-table tbody > tr > td.empty-state {
        padding: 22px 12px !important;
        text-align: center !important;
    }
    .mobile-card-table tbody > tr > td.empty-state::before { display: none !important; }
    .mobile-card-table .copy-url-field {
        height: 38px !important;
        min-height: 38px !important;
        margin: 0 !important;
        font-size: 14px !important;
    }
    .mobile-card-table td.row-actions-stack {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }
    .mobile-card-table .inline-action-form .button { min-height: 36px !important; }

    /* Other admin tables remain full-width, touch-scrollable and do not squeeze the content. */
    .table-wrap {
        max-width: 100% !important;
        overflow-x: auto !important;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }
    .card > .table-wrap:not(.schedule-leads-table-wrap),
    .card > .security-table-wrap,
    .card > .integration-log-wrap {
        width: calc(100% + 20px) !important;
        margin-right: -10px !important;
        margin-left: -10px !important;
        border-right: 0 !important;
        border-left: 0 !important;
        border-radius: 0 !important;
    }
    .categories-table,
    .security-table,
    .integration-log-table:not(.mobile-card-table) { min-width: 720px !important; }

    /* Client/settings forms. */
    .detail-layout,
    .grid-2,
    .grid-3,
    .grid-4,
    .grid-5,
    .grid-6,
    .form-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .detail-layout { display: grid !important; gap: 8px !important; }
    .stacked-form { gap: 10px !important; }
    .stacked-form input,
    .stacked-form select,
    .stacked-form textarea,
    .form-grid input,
    .form-grid select,
    .form-grid textarea {
        min-height: 42px !important;
        padding: 8px 10px !important;
        font-size: 16px !important;
    }
    textarea { min-height: 92px !important; }
    .call-box { padding: 14px !important; }
    .login-page,
    .install-page { padding: max(12px, env(safe-area-inset-top, 0px)) 10px max(12px, env(safe-area-inset-bottom, 0px)) !important; }
    .login-card,
    .install-card { padding: 20px 16px !important; border-radius: 16px !important; }

    /* Scheduler: horizontal day strips, sticky time rail, touch drag and tap-to-slot fallback. */
    .schedule-overview-card,
    .schedule-week-card,
    .appointment-leads-card {
        width: 100% !important;
        padding: 8px !important;
        overflow: hidden !important;
    }
    .section-head-inline,
    .schedule-overview-head {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 7px !important;
        margin-bottom: 7px !important;
    }
    .section-head-inline p,
    .schedule-overview-head p { display: none !important; }
    .section-head-inline .form-section-title,
    .schedule-overview-head .form-section-title {
        margin: 0 !important;
        font-size: 15px !important;
        line-height: 1.15 !important;
    }
    .schedule-controls {
        flex-wrap: nowrap !important;
        gap: 4px !important;
        max-width: 68vw !important;
        overflow-x: auto !important;
        justify-content: flex-end !important;
        scrollbar-width: none;
    }
    .schedule-controls::-webkit-scrollbar { display: none !important; }
    .schedule-controls .button,
    .schedule-range-label {
        flex: 0 0 auto !important;
        min-height: 32px !important;
        height: 32px !important;
        padding: 0 8px !important;
        font-size: 11.5px !important;
    }
    .schedule-tiles-7 {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 6px !important;
        width: 100% !important;
        overflow-x: auto !important;
        padding: 1px 0 4px !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch;
    }
    .schedule-day-tile {
        flex: 0 0 118px !important;
        min-width: 118px !important;
        min-height: 104px !important;
        padding: 8px !important;
        border-radius: 11px !important;
        scroll-snap-align: start !important;
    }
    .schedule-day-tile strong { font-size: 15px !important; }
    .tile-bookings span { font-size: 10.5px !important; }
    .schedule-week-grid {
        grid-template-columns: 54px repeat(7, 132px) !important;
        gap: 4px !important;
        width: 100% !important;
        overflow-x: auto !important;
        padding: 0 0 5px !important;
        scroll-snap-type: x proximity !important;
        -webkit-overflow-scrolling: touch;
    }
    .slot-corner,
    .slot-time-label {
        position: sticky !important;
        left: 0 !important;
        z-index: 5 !important;
        background: #fff !important;
        box-shadow: 3px 0 8px rgba(15,23,42,.05) !important;
    }
    .slot-corner { z-index: 7 !important; }
    .schedule-week-head {
        position: sticky !important;
        top: 0 !important;
        z-index: 4 !important;
        scroll-snap-align: start !important;
    }
    .slot-corner,
    .schedule-week-head,
    .slot-time-label,
    .schedule-slot {
        border-radius: 9px !important;
    }
    .slot-corner,
    .schedule-week-head,
    .slot-time-label { padding: 6px 4px !important; font-size: 11.5px !important; }
    .slot-time-label,
    .schedule-slot { min-height: 80px !important; }
    .schedule-slot { padding: 4px !important; cursor: pointer !important; }
    body.mobile-lead-selected .schedule-slot:not(:has(.booking-chip)) {
        outline: 2px dashed rgba(11,36,71,.44) !important;
        outline-offset: -4px !important;
        background: #f0f7ff !important;
    }
    .booking-chip { padding: 4px !important; border-radius: 8px !important; font-size: 11.5px !important; }
    .booking-chip span,
    .booking-address-link { font-size: 10px !important; }
    .travel-check-status { font-size: 10.5px !important; }
    .schedule-leads-table-wrap {
        max-height: none !important;
        overflow: visible !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    .mobile-schedule-handle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 34px !important;
        height: 34px !important;
        margin: 6px 0 0 !important;
        padding: 0 10px !important;
        border: 1px solid #bfdbfe !important;
        border-radius: 8px !important;
        background: #eff6ff !important;
        color: var(--primary) !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        touch-action: none !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }
    .draggable-lead-row.selected-for-schedule {
        border-color: var(--accent) !important;
        box-shadow: 0 0 0 2px rgba(249,178,51,.18) !important;
    }
    .mobile-schedule-banner {
        position: fixed !important;
        right: 8px !important;
        bottom: calc(var(--mobile-bottom-nav-height) + 8px) !important;
        left: 8px !important;
        z-index: 95 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        min-height: 48px !important;
        padding: 7px 8px 7px 12px !important;
        border: 1px solid #bfdbfe !important;
        border-radius: 12px !important;
        background: #eff6ff !important;
        color: var(--primary) !important;
        box-shadow: 0 10px 30px rgba(15,23,42,.2) !important;
        font-size: 12.5px !important;
        font-weight: 800 !important;
    }
    .mobile-schedule-banner[hidden] { display: none !important; }
    .mobile-schedule-banner button {
        flex: 0 0 auto !important;
        min-height: 34px !important;
        height: 34px !important;
        padding: 0 9px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
    }
    .mobile-drag-ghost {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 160 !important;
        display: block !important;
        max-width: 190px !important;
        padding: 8px 10px !important;
        border: 1px solid #bfdbfe !important;
        border-radius: 10px !important;
        background: rgba(239,246,255,.96) !important;
        color: var(--primary) !important;
        box-shadow: 0 12px 32px rgba(15,23,42,.26) !important;
        font-size: 12.5px !important;
        font-weight: 900 !important;
        pointer-events: none !important;
        transform: translate3d(-999px,-999px,0);
    }
    body.touch-scheduling { user-select: none !important; -webkit-user-select: none !important; }

    /* Modals are thumb-friendly bottom sheets. */
    .booking-modal,
    .quote-modal {
        align-items: flex-end !important;
        padding: 8px 6px 0 !important;
    }
    .booking-modal-card,
    .quote-modal-card {
        width: 100% !important;
        max-width: none !important;
        max-height: calc(100dvh - 12px - env(safe-area-inset-top, 0px)) !important;
        padding: 18px 13px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
        overflow-y: auto !important;
        border-radius: 16px 16px 0 0 !important;
    }
    .booking-modal-card .actions,
    .quote-form-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
    .booking-modal-card .actions .button,
    .quote-form-actions .button,
    .quote-form-actions button { min-height: 42px !important; }
    .quote-items-wrap {
        width: calc(100% + 26px) !important;
        margin-right: -13px !important;
        margin-left: -13px !important;
        overflow-x: auto !important;
    }
    .quote-items-table { min-width: 720px !important; }

    .public-quote-wrap { padding: 8px 6px 24px !important; }
    .public-quote-card { padding: 13px !important; border-radius: 12px !important; }
    .public-quote-header { gap: 8px !important; }
    .public-quote-logo { width: 112px !important; }
    .public-quote-items { min-width: 620px !important; }
    .public-quote-card:has(.public-quote-items) { overflow-x: auto !important; }
}

/* Landscape iPhones use two lead cards side-by-side while keeping compact chrome. */
@media (min-width: 700px) and (max-width: 980px) and (orientation: landscape) {
    :root {
        --mobile-header-height: calc(44px + env(safe-area-inset-top, 0px));
        --mobile-bottom-nav-height: calc(48px + env(safe-area-inset-bottom, 0px));
    }
    .topbar { min-height: var(--mobile-header-height) !important; padding-top: calc(4px + env(safe-area-inset-top, 0px)) !important; padding-bottom: 4px !important; }
    .topbar .brand-logo { width: 60px !important; max-height: 28px !important; }
    .mobile-icon-button,
    .mobile-account-chip { width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; }
    .mobile-bottom-nav a,
    .mobile-bottom-nav button { min-height: 40px !important; height: 40px !important; }
    .inline-table-form .call-table tbody,
    .mobile-card-table tbody { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .page-head { min-height: 32px !important; }
    .page-head h1 { font-size: 18px !important; }
    .filter-card { top: var(--mobile-header-height) !important; }
    .booking-modal-card,
    .quote-modal-card { max-height: calc(100dvh - 4px) !important; }
}

@media (max-width: 390px) {
    .topbar .brand-logo { width: 60px !important; }
    .mobile-view-title { font-size: 12px !important; }
    .mobile-top-actions { gap: 3px !important; }
    .mobile-icon-button,
    .mobile-account-chip { width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; }
    .inline-table-form .call-table tbody > tr[data-client-row] { grid-template-columns: minmax(0, 1fr) 116px !important; }
    .row-actions-stack { grid-template-columns: 42px repeat(4, minmax(0, 1fr)) !important; }
    .row-actions-stack .button,
    .row-actions-stack button { font-size: 11px !important; }
}

/* v26 lead-specific notes and change history */
.lead-history-card { overflow: hidden; }
.lead-history-head { align-items: flex-start; }
.lead-history-head .form-section-title { margin-bottom: 3px; }
.history-count {
    display: inline-flex; align-items: center; justify-content: center; min-height: 25px;
    padding: 3px 8px; border: 1px solid #dbe3ee; border-radius: 999px;
    background: #f8fafc; color: #334155; font-size: 12px; font-weight: 800; white-space: nowrap;
}
.lead-history-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin: 10px 0 12px; }
.lead-history-summary > span {
    display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 7px 8px;
    border: 1px solid #e5eaf0; border-radius: 8px; background: #f8fafc;
    color: #334155; font-size: 12px; overflow-wrap: anywhere;
}
.lead-history-summary strong { color: #64748b; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.lead-history-list { max-height: 620px; overflow-y: auto; padding-right: 3px; }
.history-item { border-left: 3px solid #cbd5e1; }
.history-item.history-change { border-left-color: #2563eb; }
.history-item.history-sync { border-left-color: #16a34a; }
.history-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.history-item-head > div { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.history-kind {
    display: inline-flex; align-items: center; min-height: 20px; padding: 2px 7px; border-radius: 999px;
    background: #eef2f7; color: #475569; font-size: 10.5px; font-weight: 850; line-height: 1;
}
.history-kind-change { background: #dbeafe; color: #1d4ed8; }
.history-kind-sync { background: #dcfce7; color: #166534; }
.history-item p { margin-bottom: 0; white-space: normal; overflow-wrap: anywhere; }

/* v26 users administration */
.users-admin-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 390px); gap: 14px; align-items: start; }
.users-table .user-email { overflow-wrap: anywhere; }
.user-role-pill, .user-state-pill {
    display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 3px 8px;
    border-radius: 999px; font-size: 11px; font-weight: 850; text-transform: capitalize;
}
.user-role-admin { background: #dbeafe; color: #1d4ed8; }
.user-role-user { background: #eef2f7; color: #334155; }
.user-state-active { background: #dcfce7; color: #166534; }
.user-state-inactive { background: #fee2e2; color: #991b1b; }
.user-edit-card { scroll-margin-top: 80px; }
.user-edit-card .danger-note { margin: 0; padding: 8px 10px; border-radius: 8px; background: #fff7ed; color: #9a3412; font-size: 12px; }

@media (max-width: 900px) {
    .users-admin-layout { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .lead-history-summary { grid-template-columns: 1fr; gap: 5px; }
    .lead-history-list { max-height: none; overflow: visible; }
    .history-item-head { align-items: flex-start; }
    .users-table-wrap table, .users-table-wrap thead, .users-table-wrap tbody, .users-table-wrap tr, .users-table-wrap th, .users-table-wrap td { display: block; }
    .users-table-wrap thead { display: none; }
    .users-table-wrap tr { margin-bottom: 9px; padding: 10px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
    .users-table-wrap td { padding: 4px 0; border: 0; }
    .users-table-wrap td::before { content: attr(data-label); display: block; color: #64748b; font-size: 10px; font-weight: 800; text-transform: uppercase; }
}

/* v28 — area permissions and requested iPhone lead-card layout */
.mobile-control-label,
.mobile-quote-value-slot { display: none; }

.user-access-summary {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}
.users-permissions-layout {
    grid-template-columns: minmax(0, .9fr) minmax(500px, 1.1fr);
}
.user-core-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.user-core-fields > label { margin: 0; }
.user-core-fields .user-active-check {
    align-self: end;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}
.permission-editor {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.permission-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.permission-editor-head h3 { margin: 0 0 3px; font-size: 16px; }
.permission-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.permission-admin-note {
    margin: 0 0 10px;
    padding: 8px 10px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #1e40af;
    font-size: 12px;
}
.permission-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.permission-group {
    min-width: 0;
    margin: 0;
    padding: 9px;
    border: 1px solid #dfe5ed;
    border-radius: 10px;
    background: #fbfdff;
}
.permission-group legend {
    padding: 0 5px;
    color: #334155;
    font-size: 12px;
    font-weight: 900;
}
.permission-option {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 7px;
    align-items: flex-start;
    margin: 0 0 7px;
    padding: 7px;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
}
.permission-option:last-child { margin-bottom: 0; }
.permission-option:hover { border-color: #dbe5f3; background: #fff; }
.permission-option input { width: 17px; height: 17px; margin: 2px 0 0; }
.permission-option span,
.permission-option strong,
.permission-option small { display: block; min-width: 0; }
.permission-option strong { color: #1e293b; font-size: 12.5px; line-height: 1.2; }
.permission-option small { margin-top: 2px; color: #64748b; font-size: 10.5px; line-height: 1.3; }
.permission-editor.is-admin-role .permission-groups { opacity: .72; }

@media (max-width: 1100px) {
    .users-permissions-layout { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
    .mobile-bottom-nav {
        grid-template-columns: repeat(var(--mobile-nav-count, 5), minmax(0, 1fr)) !important;
    }

    /* Every mobile lead is a single full-width card with the requested three-column data groups. */
    .inline-table-form .call-table tbody > tr[data-client-row],
    .inline-table-form .call-table tbody > tr[data-client-row].mobile-row-expanded {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-template-areas:
            "client client client"
            "contact contact contact"
            "entry alloc service"
            "action action action"
            "comment comment comment"
            "rowactions rowactions rowactions" !important;
    }
    .mobile-enhanced .inline-table-form .call-table tbody > tr[data-client-row] > .alloc-col,
    .mobile-enhanced .inline-table-form .call-table tbody > tr[data-client-row] > .action-col,
    .mobile-enhanced .inline-table-form .call-table tbody > tr[data-client-row] > .comment-col {
        display: block !important;
    }
    .mobile-enhanced .inline-table-form .call-table tbody > tr[data-client-row] > .quote-value-col {
        display: none !important;
    }
    .mobile-row-edit-button { display: none !important; }

    .inline-table-form .call-table tbody > tr[data-client-row] > .client-col {
        grid-area: client !important;
        padding: 9px 9px 5px !important;
    }
    .inline-table-form .call-table tbody > tr[data-client-row] > .contact-col {
        grid-area: contact !important;
        padding: 2px 9px 9px !important;
        border-top: 0 !important;
    }
    .inline-table-form .call-table tbody > tr[data-client-row] > .entry-status-col {
        grid-area: entry !important;
        border-top: 1px solid var(--line) !important;
        border-left: 0 !important;
        background: #f8fafc !important;
    }
    .inline-table-form .call-table tbody > tr[data-client-row] > .alloc-col {
        grid-area: alloc !important;
        border-top: 1px solid var(--line) !important;
        border-left: 1px solid var(--line) !important;
        background: #fff !important;
    }
    .inline-table-form .call-table tbody > tr[data-client-row] > .service-col {
        grid-area: service !important;
        border-top: 1px solid var(--line) !important;
        border-left: 1px solid var(--line) !important;
        background: #fbfdff !important;
    }
    .inline-table-form .call-table tbody > tr[data-client-row] > .action-col {
        grid-area: action !important;
        padding: 8px !important;
        border-top: 1px solid var(--line) !important;
        background: #fff !important;
    }
    .inline-table-form .call-table tbody > tr[data-client-row] > .comment-col {
        grid-area: comment !important;
        border-top: 1px solid var(--line) !important;
        background: #fff !important;
    }
    .inline-table-form .call-table tbody > tr[data-client-row] > .save-col {
        grid-area: rowactions !important;
        border-top: 1px solid var(--line) !important;
        background: #f8fafc !important;
    }

    /* Full-width name, description, mobile/email and Google-linked address. */
    .client-name-link { font-size: 16px !important; }
    .client-message-preview {
        -webkit-line-clamp: 3 !important;
        font-size: 12.5px !important;
        line-height: 1.3 !important;
    }
    .contact-links {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 2px !important;
    }
    .contact-links a {
        width: fit-content !important;
        max-width: 100% !important;
        font-size: 13.5px !important;
    }
    .contact-links a:first-child {
        font-size: 14px !important;
        font-weight: 850 !important;
    }
    .contact-links .address-link,
    .contact-links a[href*="google.com/maps"] {
        width: 100% !important;
        margin-top: 3px !important;
        font-size: 12.5px !important;
        -webkit-line-clamp: 3 !important;
    }

    /* Row 1: Entry/status/spam | assignment | category/suburb. */
    .entry-date-time-stack { gap: 1px !important; }
    .entry-date-line { font-weight: 850 !important; }
    .entry-time-line { font-size: 12px !important; }
    .entry-status-stack {
        margin-top: 6px !important;
        padding-top: 0 !important;
    }
    .entry-status-stack .inline-status {
        height: 38px !important;
        min-height: 38px !important;
        padding: 5px 22px 5px 6px !important;
        font-size: 16px !important;
    }
    .entry-status-stack .inline-spam-check {
        min-height: 28px !important;
        padding-top: 6px !important;
        color: #111827 !important;
        font-size: 12.5px !important;
    }
    .inline-table-form .alloc-col {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 5px !important;
    }
    .inline-table-form .inline-alloc-check {
        width: 100% !important;
        min-height: 30px !important;
        margin: 0 !important;
        color: #111827 !important;
        font-size: 13px !important;
    }
    .category-suburb-stack {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 7px !important;
        height: 100% !important;
    }
    .category-suburb-stack .service-main {
        width: 100% !important;
        font-size: 12.5px !important;
        line-height: 1.25 !important;
        overflow-wrap: anywhere !important;
    }
    .suburb-tag {
        max-width: 100% !important;
        margin-top: auto !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Quote section: Type + Value | Date + Time | Booking Hours. */
    .inline-table-form .action-fields {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-template-rows: auto auto !important;
        gap: 7px !important;
        align-items: start !important;
    }
    .inline-table-form .action-fields .action-type-field {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    .mobile-quote-value-slot {
        display: block !important;
        grid-column: 1 !important;
        grid-row: 2 !important;
        min-width: 0 !important;
    }
    .inline-table-form .action-fields .action-date-field {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }
    .inline-table-form .action-fields .action-time-field {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }
    .inline-table-form .action-fields .action-hours-field {
        grid-column: 3 !important;
        grid-row: 1 / span 2 !important;
    }
    .mobile-control-label {
        display: block !important;
        margin-bottom: 3px !important;
        color: #64748b !important;
        font-size: 10.5px !important;
        font-weight: 850 !important;
        line-height: 1.1 !important;
    }
    .quote-value-control { min-width: 0 !important; }
    .mobile-quote-value-slot .inline-money {
        width: 100% !important;
        max-width: none !important;
        height: 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 6px 7px !important;
        font-size: 16px !important;
    }
    .inline-table-form .action-fields .mini-field > span {
        min-height: 22px !important;
        margin-bottom: 3px !important;
        font-size: 10.5px !important;
        line-height: 1.1 !important;
    }
    .inline-table-form .action-fields select,
    .inline-table-form .action-fields input,
    .inline-table-form .action-fields .native-date-picker {
        height: 40px !important;
        min-height: 40px !important;
        padding: 5px 6px !important;
        font-size: 16px !important;
    }
    .native-date-display { font-size: 14.5px !important; }

    /* Comments remain full width, followed by a full-width button bar. */
    .inline-table-form .comment-col::before {
        content: 'Comments' !important;
    }
    .inline-table-form .inline-comment {
        min-height: 70px !important;
        font-size: 16px !important;
    }
    .row-actions-stack {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
        gap: 6px !important;
    }
    .row-actions-stack .autosave-state {
        grid-column: 1 / -1 !important;
        min-height: 22px !important;
        height: 22px !important;
        justify-content: flex-start !important;
        padding: 0 2px !important;
        color: #64748b !important;
        font-size: 10.5px !important;
    }
    .row-actions-stack .button,
    .row-actions-stack button {
        min-height: 39px !important;
        height: 39px !important;
        padding: 0 6px !important;
        font-size: 13.5px !important;
    }

    .permission-editor-head { flex-direction: column; }
    .permission-actions { justify-content: flex-start; }
    .permission-groups { grid-template-columns: 1fr !important; }
    .user-core-fields { grid-template-columns: 1fr !important; }
}

@media (max-width: 390px) {
    .inline-table-form .call-table tbody > tr[data-client-row],
    .inline-table-form .call-table tbody > tr[data-client-row].mobile-row-expanded {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .inline-table-form .call-table tbody > tr[data-client-row] > td {
        padding-right: 6px !important;
        padding-left: 6px !important;
    }
    .inline-table-form .action-fields { gap: 5px !important; }
    .row-actions-stack { grid-template-columns: repeat(auto-fit, minmax(66px, 1fr)) !important; }
}

/* v29 — permanent user account removal */
.user-row-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.user-delete-zone {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fff7f7;
}
.user-delete-zone h3 {
    margin: 0 0 6px;
    color: #991b1b;
    font-size: 15px;
}
.user-delete-zone p {
    margin: 0 0 10px;
    color: #7f1d1d;
    font-size: 12.5px;
    line-height: 1.45;
}
.user-delete-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 10px;
    align-items: end;
}
.user-delete-form label { margin: 0; }
.user-delete-form input { margin-top: 5px; }
@media (max-width: 680px) {
    .user-row-actions .button { flex: 1 1 90px; }
    .user-delete-form { grid-template-columns: 1fr; }
    .user-delete-form .button { width: 100%; }
}

/* v30 — requested mobile-only lead-card sizing and alignment refinements. */
@media (max-width: 980px) {
    /* Keep the sticky filter bar and every lead card on the same usable width. */
    .filter-card,
    .inline-table-form,
    .inline-table-form > .table-wrap-wide,
    .inline-table-form .call-table,
    .inline-table-form .call-table tbody {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .inline-table-form > .table-wrap-wide {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    .inline-table-form .call-table tbody {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    .inline-table-form .call-table tbody > tr[data-client-row] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Match the Stats control to the compact Filters / Apply controls. */
    .mobile-stats-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 54px !important;
        min-height: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 9px !important;
        border: 1px solid var(--line) !important;
        border-radius: 9px !important;
        background: #fff !important;
        color: var(--primary) !important;
        font-size: 12.5px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        box-shadow: none !important;
    }

    /* Mobile lead data and entry controls use one consistent text size. */
    .inline-table-form .call-table tbody > tr[data-client-row] > td,
    .inline-table-form .client-name-link,
    .inline-table-form .entry-date-line,
    .inline-table-form .entry-time-line,
    .inline-table-form .entry-status-stack .inline-status,
    .inline-table-form .entry-status-stack .inline-spam-check,
    .inline-table-form .inline-alloc-check,
    .inline-table-form .category-suburb-stack .service-main,
    .inline-table-form .suburb-tag,
    .inline-table-form .action-fields select,
    .inline-table-form .action-fields input,
    .inline-table-form .action-fields .native-date-picker,
    .inline-table-form .native-date-display,
    .inline-table-form .mobile-quote-value-slot .inline-money,
    .inline-table-form .inline-comment,
    .inline-table-form .autosave-state,
    .filter-card label,
    .filter-card input:not([type="checkbox"]):not([type="radio"]),
    .filter-card select {
        font-size: 13px !important;
    }

    /* Contact details remain prominent and easy to tap. */
    .inline-table-form .contact-links a,
    .inline-table-form .contact-links a:first-child,
    .inline-table-form .contact-links .address-link,
    .inline-table-form .contact-links a[href*="google.com/maps"] {
        width: fit-content !important;
        max-width: 100% !important;
        padding-top: 3px !important;
        color: #0b2447 !important;
        font-size: 13.5px !important;
        font-weight: 800 !important;
    }

    /* Show up to five lines of the full enquiry while retaining the shorter desktop preview. */
    .inline-table-form .client-message-preview {
        display: block !important;
        margin-top: 4px !important;
        overflow: visible !important;
        font-size: 0 !important;
        line-height: 0 !important;
        -webkit-line-clamp: unset !important;
    }
    .inline-table-form .client-message-preview::after {
        content: attr(title);
        display: -webkit-box !important;
        overflow: hidden !important;
        color: var(--muted) !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 5 !important;
    }

    /* Bring back clear titles for the three lead-information columns. */
    .inline-table-form .entry-status-col::before,
    .inline-table-form .alloc-col::before,
    .inline-table-form .service-col::before,
    .inline-table-form .comment-col::before {
        display: block !important;
        width: 100% !important;
        min-height: 22px !important;
        margin: 0 0 3px !important;
        color: #000 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }
    .inline-table-form .entry-status-col::before { content: 'Entry'; }
    .inline-table-form .alloc-col::before { content: 'Allocated'; }
    .inline-table-form .service-col::before { content: 'Category / Suburb'; }
    .inline-table-form .comment-col::before { content: 'Comments'; }

    /* Quote labels use the same title treatment as the three lead columns. */
    .inline-table-form .action-fields .mini-field > span {
        min-height: 22px !important;
        margin-bottom: 3px !important;
        color: #000 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;
    }
    .inline-table-form .action-fields .native-date-display-wrap {
        margin-bottom: 0 !important;
    }
    .mobile-control-label {
        display: block !important;
        margin-bottom: 9px !important;
        color: #000 !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        line-height: 1.1 !important;
    }

    /* Align text consistently inside status, quote and booking controls. */
    .inline-table-form .entry-status-stack .inline-status,
    .inline-table-form .action-fields select {
        padding-top: 6px !important;
        padding-right: 28px !important;
        padding-bottom: 6px !important;
        padding-left: 9px !important;
    }
    .inline-table-form .action-fields input,
    .inline-table-form .mobile-quote-value-slot .inline-money,
    .inline-table-form .inline-comment {
        padding-right: 9px !important;
        padding-left: 9px !important;
    }
    .inline-table-form .action-fields .native-date-display-wrap .native-date-picker {
        padding-right: 32px !important;
        padding-left: 9px !important;
    }
    .inline-table-form .native-date-display {
        left: 9px !important;
        right: 32px !important;
    }
    .inline-table-form .action-fields .action-time-field {
        margin-top: -3px !important;
    }

    .inline-table-form .inline-comment {
        min-height: 70px !important;
        font-size: 13px !important;
    }
}

/* v30 mobile specificity fixes for the legacy expandable-card rules. */
@media (max-width: 980px) {
    .page-head .actions .mobile-stats-toggle {
        min-width: 54px !important;
        min-height: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 9px !important;
        border-radius: 9px !important;
        font-size: 12.5px !important;
    }
    .filter-card > .mobile-filter-toggle {
        min-height: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 9px !important;
        border-radius: 9px !important;
        font-size: 12.5px !important;
    }
    body.mobile-enhanced .inline-table-form .call-table tbody > tr[data-client-row]:not(.mobile-row-expanded) > .alloc-col,
    body.mobile-enhanced .inline-table-form .call-table tbody > tr[data-client-row]:not(.mobile-row-expanded) > .action-col,
    body.mobile-enhanced .inline-table-form .call-table tbody > tr[data-client-row]:not(.mobile-row-expanded) > .comment-col {
        display: block !important;
    }
    body.mobile-enhanced .inline-table-form .call-table tbody > tr[data-client-row]:not(.mobile-row-expanded) > .quote-value-col {
        display: none !important;
    }
    .inline-table-form .call-table tbody > tr[data-client-row] > .entry-status-col::before {
        content: 'Entry' !important;
        color: #000 !important;
    }
}

/* v31 — mobile-only lead field visibility and typography refinements. */
@media (max-width: 980px) {
    /* Keep the suburb visible directly beneath the category inside the third data column. */
    .inline-table-form .category-suburb-stack {
        height: auto !important;
        min-height: 0 !important;
        justify-content: flex-start !important;
    }
    .inline-table-form .category-suburb-stack .suburb-tag {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        align-self: flex-start !important;
        max-width: 100% !important;
        margin-top: 7px !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* Use the requested compact right padding on the native quote-date picker. */
    .inline-table-form .action-fields .native-date-display-wrap .native-date-picker {
        padding-right: 10px !important;
    }
    .inline-table-form .native-date-display {
        right: 10px !important;
    }

    /* Match all editable quote controls and comments to the New Lead status control. */
    .inline-table-form .entry-status-stack .inline-status,
    .inline-table-form .inline-action-type,
    .inline-table-form .native-date-display.is-placeholder,
    .inline-table-form .inline-date.native-date-picker,
    .inline-table-form .inline-hours,
    .inline-table-form .inline-money,
    .inline-table-form .inline-time,
    .inline-table-form .inline-comment {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
        font-size: 13px !important;
        font-style: normal !important;
        font-weight: 400 !important;
        font-variant: normal !important;
        letter-spacing: normal !important;
        line-height: 1.2 !important;
    }

    /* Short mobile title for the category/suburb column. */
    .inline-table-form .service-col::before {
        content: 'Cat / Sub' !important;
    }

    /* Display the complete enquiry message on mobile rather than a preview/clamp. */
    .inline-table-form .client-message-preview {
        display: block !important;
        margin-top: 5px !important;
        overflow: visible !important;
        color: #000000 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        white-space: normal !important;
        -webkit-line-clamp: unset !important;
    }
    .inline-table-form .client-message-preview::after {
        content: attr(title) !important;
        display: block !important;
        overflow: visible !important;
        color: #000000 !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
        font-size: 13px !important;
        font-style: normal !important;
        font-weight: 400 !important;
        letter-spacing: normal !important;
        line-height: 1.35 !important;
        overflow-wrap: anywhere !important;
        white-space: pre-wrap !important;
        -webkit-box-orient: initial !important;
        -webkit-line-clamp: unset !important;
    }

    /* Keep every phone, email and address line at 13px on mobile. */
    .inline-table-form .contact-col.contact-links a,
    .inline-table-form .contact-links a,
    .inline-table-form .contact-links a:first-child,
    .inline-table-form .contact-links .address-link,
    .inline-table-form .contact-links a[href*="google.com/maps"] {
        font-size: 13px !important;
    }

    /* Place the entry date and time on one line and emphasise the time. */
    .inline-table-form .entry-date-time-stack {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: baseline !important;
        gap: 5px !important;
    }
    .inline-table-form .entry-date-time-stack .entry-date-line,
    .inline-table-form .entry-date-time-stack .entry-time-line {
        display: inline !important;
    }
    .inline-table-form .entry-time-line {
        font-weight: 800 !important;
    }
}

/* v32 — mobile-only dashboard density, chart, sidebar and white data surfaces. */
@media (max-width: 980px) {
    /* Use a true two-column stats grid; the value card spans the full final row. */
    .dashboard-grid,
    .dashboard-grid-compact {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        width: 100% !important;
        margin: 0 0 7px !important;
        padding: 0 !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
    }
    .dashboard-grid .metric-card,
    .dashboard-grid-compact .metric-card {
        flex: none !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 78px !important;
        scroll-snap-align: none !important;
    }
    .dashboard-grid .metric-card.metric-value,
    .dashboard-grid-compact .metric-card.metric-value {
        grid-column: 1 / -1 !important;
    }

    /* Mobile 12-month vertical bar chart with a compact cross-grid backdrop. */
    .monthly-card-horizontal {
        overflow: hidden !important;
        background: #fff !important;
    }
    .month-timeline {
        position: relative !important;
        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        align-items: end !important;
        gap: 3px !important;
        width: 100% !important;
        min-height: 142px !important;
        margin: 0 !important;
        padding: 7px 2px 0 !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
        -webkit-overflow-scrolling: auto !important;
    }
    .month-timeline::before {
        content: '' !important;
        position: absolute !important;
        z-index: 0 !important;
        top: 22px !important;
        right: 2px !important;
        bottom: 42px !important;
        left: 2px !important;
        border-bottom: 1px solid #cbd5e1 !important;
        border-left: 1px solid #cbd5e1 !important;
        background-image:
            repeating-linear-gradient(to top, rgba(148, 163, 184, .24) 0, rgba(148, 163, 184, .24) 1px, transparent 1px, transparent 20px),
            repeating-linear-gradient(to right, rgba(203, 213, 225, .18) 0, rgba(203, 213, 225, .18) 1px, transparent 1px, transparent 8.333333%) !important;
        pointer-events: none !important;
    }
    .month-tile {
        position: relative !important;
        z-index: 1 !important;
        display: grid !important;
        grid-template-rows: 17px 80px 38px !important;
        gap: 2px !important;
        min-width: 0 !important;
        width: auto !important;
        align-items: end !important;
        scroll-snap-align: none !important;
    }
    .month-tile strong {
        font-size: 10px !important;
        line-height: 1 !important;
    }
    .month-column {
        display: flex !important;
        align-items: end !important;
        justify-content: center !important;
        width: 100% !important;
        height: 80px !important;
        overflow: visible !important;
        border-radius: 0 !important;
        background: transparent !important;
    }
    .month-column i {
        width: min(72%, 18px) !important;
        min-width: 4px !important;
        margin: 0 auto !important;
        border-radius: 4px 4px 0 0 !important;
    }
    .month-tile span {
        display: block !important;
        width: auto !important;
        height: 38px !important;
        margin: 0 auto !important;
        overflow: visible !important;
        color: #475569 !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-align: left !important;
        writing-mode: vertical-rl !important;
        text-orientation: mixed !important;
        transform: rotate(180deg) !important;
        white-space: nowrap !important;
    }

    /* Let category links occupy only the height they need instead of stretching. */
    .side-menu-main {
        flex: 0 1 auto !important;
    }
    .side-links {
        flex: 0 1 auto !important;
        align-content: start !important;
        grid-auto-rows: min-content !important;
        max-height: calc(100dvh - 178px) !important;
    }

    /* Use white data surfaces throughout mobile tables/cards. */
    .inline-table-form,
    .inline-table-form > .table-wrap-wide,
    .inline-table-form .call-table,
    .inline-table-form .call-table tbody,
    .inline-table-form .call-table tbody > tr[data-client-row],
    .inline-table-form .call-table tbody > tr[data-client-row] > td,
    .table-wrap,
    .table-wrap > table,
    .table-wrap > table > tbody,
    .table-wrap > table > tbody > tr,
    .table-wrap > table > tbody > tr > td,
    .mobile-card-table,
    .mobile-card-table tbody,
    .mobile-card-table tbody tr,
    .mobile-card-table tbody td,
    .categories-table tbody tr,
    .categories-table tbody td,
    .security-table tbody tr,
    .security-table tbody td,
    .quote-items-table tbody tr,
    .quote-items-table tbody td {
        background: #fff !important;
    }
}

/* v32 mobile white-surface specificity fix for the Incoming Leads card columns. */
@media (max-width: 980px) {
    .inline-table-form .call-table tbody > tr[data-client-row] > .client-col,
    .inline-table-form .call-table tbody > tr[data-client-row] > .contact-col,
    .inline-table-form .call-table tbody > tr[data-client-row] > .entry-status-col,
    .inline-table-form .call-table tbody > tr[data-client-row] > .alloc-col,
    .inline-table-form .call-table tbody > tr[data-client-row] > .service-col,
    .inline-table-form .call-table tbody > tr[data-client-row] > .action-col,
    .inline-table-form .call-table tbody > tr[data-client-row] > .quote-value-col,
    .inline-table-form .call-table tbody > tr[data-client-row] > .comment-col,
    .inline-table-form .call-table tbody > tr[data-client-row] > .save-col {
        background: #fff !important;
    }
}

/* v33: keep quote modal actions permanently visible. */
body.quote-modal-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

.quote-modal-card {
    display: flex !important;
    flex-direction: column !important;
    height: 92vh !important;
    max-height: 900px !important;
    overflow: hidden !important;
}

.quote-modal-head {
    flex: 0 0 auto !important;
    padding-right: 38px !important;
}

.quote-form {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.quote-form-scroll {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding-right: 4px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-gutter: stable;
}

.quote-form-actions {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 25 !important;
    flex: 0 0 auto !important;
    margin: 10px 0 0 !important;
    padding: 10px 0 0 !important;
    border-top: 1px solid var(--line) !important;
    background: #fff !important;
    box-shadow: 0 -8px 18px rgba(15, 23, 42, .08) !important;
}

@media (max-width: 980px) {
    body.quote-modal-open .mobile-bottom-nav {
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .quote-modal {
        z-index: 200 !important;
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: max(4px, env(safe-area-inset-top, 0px)) 0 0 !important;
        overflow: hidden !important;
        overscroll-behavior: contain !important;
    }

    .quote-modal-card {
        width: 100% !important;
        height: calc(100vh - 4px) !important;
        height: calc(100dvh - max(4px, env(safe-area-inset-top, 0px))) !important;
        max-height: calc(100vh - 4px) !important;
        max-height: calc(100dvh - max(4px, env(safe-area-inset-top, 0px))) !important;
        padding: 14px 13px 0 !important;
        border-radius: 16px 16px 0 0 !important;
        overflow: hidden !important;
        overscroll-behavior: contain !important;
    }

    .quote-modal-head {
        flex: 0 0 auto !important;
        margin-bottom: 8px !important;
        padding-right: 38px !important;
    }

    .quote-form-scroll {
        padding: 0 0 12px !important;
    }

    .quote-form-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        width: auto !important;
        margin: 0 -13px !important;
        padding: 10px 13px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        border-top: 1px solid #dbe3ee !important;
        background: #fff !important;
        box-shadow: 0 -10px 26px rgba(15, 23, 42, .14) !important;
    }

    .quote-form-actions .button,
    .quote-form-actions button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        height: 42px !important;
        margin: 0 !important;
    }

    .quote-form-actions .button-primary {
        grid-column: 1 / -1 !important;
    }
}

@media (min-width: 700px) and (max-width: 980px) and (orientation: landscape) {
    .quote-modal-card {
        height: calc(100vh - 4px) !important;
        height: calc(100dvh - 4px) !important;
        max-height: calc(100vh - 4px) !important;
        max-height: calc(100dvh - 4px) !important;
    }

    .quote-form-actions {
        grid-template-columns: 1.4fr 1fr 1fr !important;
    }

    .quote-form-actions .button-primary {
        grid-column: auto !important;
    }
}

/* v34: manual lead entry and quick-access controls. */
.nav-add-lead {
    font-weight: 800;
}

.mobile-add-lead-button {
    text-decoration: none;
}

.add-lead-button {
    white-space: nowrap;
}

.manual-lead-card {
    max-width: 1180px;
    margin-right: auto;
    margin-left: auto;
}

.manual-lead-form {
    margin-top: 0;
}

.manual-form-section {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}

.manual-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.manual-section-head .form-section-title {
    margin: 0;
}

.manual-section-head > .small {
    max-width: 620px;
    text-align: right;
}

.manual-lead-form label {
    margin: 0;
}

.manual-lead-actions {
    position: sticky;
    bottom: 10px;
    z-index: 18;
    width: fit-content;
    margin-left: auto;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .14);
    backdrop-filter: blur(10px);
}

.duplicate-lead-warning {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #f59e0b;
    border-radius: 12px;
    background: #fffbeb;
    color: #78350f;
}

.duplicate-lead-warning > div:first-child > strong {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
}

.duplicate-lead-warning p {
    margin: 0;
}

.duplicate-lead-list {
    display: grid;
    gap: 7px;
}

.duplicate-lead-list a {
    display: grid;
    gap: 2px;
    padding: 9px 10px;
    border: 1px solid #fcd34d;
    border-radius: 9px;
    background: #fff;
    color: #0b2447;
    text-decoration: none;
}

.duplicate-lead-list a:hover {
    border-color: #f59e0b;
}

.duplicate-lead-list span {
    color: #6b7280;
    font-size: 12.5px;
}

@media (max-width: 980px) {
    .mobile-top-actions .mobile-add-lead-button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .manual-lead-page-head {
        min-height: 36px !important;
    }

    .manual-lead-card {
        padding: 7px !important;
    }

    .manual-lead-form {
        gap: 7px !important;
    }

    .manual-form-section {
        gap: 9px !important;
        padding: 10px !important;
        border-radius: 10px !important;
    }

    .manual-section-head {
        display: block !important;
    }

    .manual-section-head > .small {
        display: block !important;
        margin-top: 3px !important;
        text-align: left !important;
    }

    .manual-booking-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .manual-booking-grid > label:last-child {
        grid-column: 1 / -1 !important;
    }

    .manual-lead-actions {
        bottom: calc(var(--mobile-bottom-nav-height) + 5px) !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 7px !important;
        border-radius: 10px !important;
    }

    .manual-lead-actions .button,
    .manual-lead-actions button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        min-height: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 8px !important;
    }

    .manual-lead-actions .button-primary {
        grid-column: 1 / -1 !important;
    }

    .duplicate-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .duplicate-actions .button,
    .duplicate-actions button {
        width: 100% !important;
    }
}

@media (max-width: 430px) {
    .manual-booking-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .manual-booking-grid > label:last-child {
        grid-column: auto !important;
    }
}

/* ==========================================================================
   Perth Tow Trucks CRM v35 — Quotient-style quote workbench + customer checklists
   ========================================================================== */
.eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--primary-2);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.grid-span-all { grid-column: 1 / -1; }
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.button-danger-soft {
    border-color: #fecaca !important;
    background: #fff1f2 !important;
    color: #9f1239 !important;
}
.side-link-primary {
    background: var(--primary) !important;
    color: #fff !important;
}
.side-link-primary span { color: inherit !important; }

/* Client quote preparation checklist */
.checklist-workspace {
    margin-top: 22px;
    padding: 22px;
}
.checklist-workspace-head,
.checklist-panel-head,
.checklist-admin-question-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.checklist-workspace-head h2,
.checklist-panel-head h3,
.checklist-admin-question-head h3 {
    margin: 0 0 4px;
}
.checklist-service-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0;
}
.checklist-service-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #fff;
    color: var(--primary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 750;
    transition: .16s ease;
}
.checklist-service-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.checklist-service-chip:hover { border-color: var(--primary); }
.checklist-service-chip.is-selected {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
    box-shadow: 0 6px 18px rgba(11, 36, 71, .16);
}
.checklist-panels { display: grid; gap: 14px; }
.checklist-panel {
    overflow: hidden;
    border: 1px solid #d7dfeb;
    border-radius: 14px;
    background: #fff;
}
.checklist-panel-head {
    padding: 15px 17px;
    border-bottom: 1px solid #e4e9f1;
    background: #f8fafc;
}
.checklist-panel-head p { margin: 0; }
.checklist-progress {
    min-width: 160px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-align: right;
}
.checklist-progress-track {
    display: block;
    width: 100%;
    height: 7px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #dfe7f1;
}
.checklist-progress-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary), #2563eb);
    transition: width .2s ease;
}
.checklist-question-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: checklist-question;
}
.checklist-question {
    counter-increment: checklist-question;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(240px, .75fr);
    gap: 18px;
    padding: 16px 17px;
    border-bottom: 1px solid #e7ebf2;
    transition: background .16s ease, opacity .16s ease;
}
.checklist-question:last-child { border-bottom: 0; }
.checklist-question.is-saving { opacity: .68; }
.checklist-question.is-complete { background: #f3fbf7; }
.checklist-question-check {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 9px;
    align-items: flex-start;
    color: var(--primary);
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.38;
}
.checklist-question-check::before {
    content: counter(checklist-question) ".";
    grid-column: 1 / -1;
    display: none;
}
.checklist-question-check input {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--success);
}
.checklist-question.is-complete .checklist-question-check span { color: #176847; }
.checklist-help { margin: 4px 0 8px 27px; }
.checklist-answer-control { margin: 9px 0 0 27px; }
.checklist-answer-control input,
.checklist-answer-control select,
.checklist-answer-control textarea {
    width: 100%;
    min-height: 39px;
    font-size: 13px;
}
.checklist-attachment-area {
    display: grid;
    align-content: start;
    gap: 7px;
}
.checklist-upload-zone {
    display: grid;
    place-items: center;
    min-height: 76px;
    padding: 10px;
    border: 1.5px dashed #9fb0c8;
    border-radius: 11px;
    background: #f8fafc;
    color: var(--primary);
    cursor: pointer;
    text-align: center;
}
.checklist-upload-zone:hover,
.checklist-upload-zone.is-dragging {
    border-color: var(--primary);
    background: #edf4ff;
}
.checklist-upload-zone input { display: none; }
.checklist-upload-zone span { display: grid; gap: 2px; }
.checklist-upload-zone strong { font-size: 13px; }
.checklist-upload-zone small { color: var(--muted); font-size: 11px; }
.checklist-upload-state {
    min-height: 16px;
    color: var(--muted);
    font-size: 11px;
}
.checklist-attachment-list { display: grid; gap: 5px; }
.checklist-attachment {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 28px;
    align-items: center;
    gap: 7px;
    padding: 7px 8px;
    border: 1px solid #dce3ed;
    border-radius: 9px;
    background: #fff;
    font-size: 12px;
}
.checklist-attachment a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}
.checklist-attachment small { color: var(--muted); }
.icon-button {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: #eef2f7;
    color: #9f1239;
    cursor: pointer;
    font-size: 18px;
}

/* Checklist template settings */
.checklist-admin-new,
.checklist-admin-template { margin-bottom: 14px; }
.checklist-admin-template > details > summary {
    display: flex;
    cursor: pointer;
    list-style: none;
    padding: 2px 0 14px;
}
.checklist-admin-template > details > summary::-webkit-details-marker { display: none; }
.checklist-admin-template > details > summary span { display: grid; }
.checklist-admin-template > details > summary strong { font-size: 18px; }
.checklist-admin-template > details > summary small { color: var(--muted); }
.checklist-template-form { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.checklist-admin-questions { display: grid; gap: 9px; margin-top: 16px; }
.checklist-admin-question-row {
    display: grid;
    grid-template-columns: minmax(260px, 2.3fr) minmax(120px, .8fr) 82px 100px 90px;
    gap: 9px;
    padding: 12px;
    border: 1px solid #dde4ee;
    border-radius: 12px;
    background: #fff;
}
.checklist-admin-question-row.is-inactive { opacity: .58; background: #f8fafc; }
.checklist-admin-question-row.is-new { border-style: dashed; background: #f7faff; }
.question-options-field { grid-column: span 2; }
.question-help-field { grid-column: span 2; }
.checklist-admin-question-row .actions { align-items: end; }

/* Quote dashboard */
.quote-dashboard-head { align-items: center; }
.quote-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 14px;
}
.quote-kpi-grid article,
.quote-detail-metrics article {
    display: grid;
    align-content: center;
    min-height: 112px;
    padding: 15px;
    border: 1px solid #dce3ef;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(24, 34, 53, .05);
}
.quote-kpi-grid article > span,
.quote-detail-metrics article > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.quote-kpi-grid article strong,
.quote-detail-metrics article strong {
    margin: 4px 0 2px;
    color: var(--primary);
    font-size: clamp(22px, 2.4vw, 31px);
    line-height: 1.1;
}
.quote-kpi-grid article small,
.quote-detail-metrics article small { color: var(--muted); font-size: 11px; }
.quote-kpi-grid .quote-kpi-attention { border-color: #f3c35c; background: #fffbeb; }
.quote-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, .7fr);
    gap: 14px;
    margin-bottom: 14px;
}
.quote-chart-card,
.quote-followup-card { min-height: 300px; }
.quote-chart-card h2,
.quote-followup-card h2,
.quote-list-card h2,
.quote-activity-card h2 { margin: 0; }
.quote-chart-legend { display: flex; gap: 14px; color: var(--muted); font-size: 11px; font-weight: 700; }
.quote-chart-legend span::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 5px;
    border-radius: 3px;
    background: #94a3b8;
}
.quote-chart-legend .quoted::before { background: #0b2447; }
.quote-chart-legend .accepted::before { background: #10b981; }
.quote-value-chart {
    display: grid;
    grid-template-columns: repeat(12, minmax(28px, 1fr));
    align-items: end;
    gap: 7px;
    height: 220px;
    margin-top: 18px;
    padding: 12px 4px 0;
    border-bottom: 1px solid #cbd5e1;
    background-image: linear-gradient(to top, rgba(148,163,184,.18) 1px, transparent 1px);
    background-size: 100% 25%;
}
.quote-chart-month { display: grid; grid-template-rows: 1fr 25px; height: 100%; min-width: 0; }
.quote-chart-bars { display: flex; align-items: end; justify-content: center; gap: 3px; min-height: 0; }
.quote-chart-bar { display: block; width: 38%; min-height: 2px; border-radius: 4px 4px 0 0; background: #0b2447; }
.quote-chart-bar.accepted { background: #10b981; }
.quote-chart-month > span { align-self: end; overflow: hidden; color: var(--muted); font-size: 9px; text-align: center; white-space: nowrap; }
.quote-followup-list { display: grid; gap: 7px; margin-top: 12px; }
.quote-followup-list a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px 11px;
    border: 1px solid #e0e6ef;
    border-radius: 10px;
    background: #fff;
}
.quote-followup-list a:hover { border-color: var(--primary); text-decoration: none; }
.quote-followup-list span { display: grid; min-width: 0; }
.quote-followup-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.quote-followup-list small { color: var(--muted); font-size: 10.5px; }
.quote-followup-list em { color: var(--primary); font-size: 12px; font-style: normal; font-weight: 800; }
.quote-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin: -2px 0 13px; }
.quote-tabs a {
    padding: 7px 10px;
    border-radius: 9px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}
.quote-tabs a.active { background: var(--primary); color: #fff; }
.quote-filter-bar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 170px 150px auto auto;
    gap: 8px;
    align-items: end;
    margin-bottom: 13px;
    padding: 10px;
    border-radius: 12px;
    background: #f4f7fb;
}
.quote-filter-bar label { display: grid; gap: 3px; color: var(--muted); font-size: 10px; font-weight: 750; }
.quote-filter-bar input,
.quote-filter-bar select { min-height: 38px; font-size: 12.5px; }
.quote-workbench-table td { vertical-align: middle; }
.quote-workbench-table td > small { display: block; color: var(--muted); font-size: 10.5px; }
.quote-number-link { display: block; font-size: 14px; font-weight: 850; }
.followup-due {
    display: inline-block;
    padding: 4px 7px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 10px;
    font-weight: 800;
}
.quote-activity-stream { display: grid; }
.quote-activity-stream > a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 2px;
    border-bottom: 1px solid #e7ebf2;
}
.quote-activity-stream > a:last-child { border-bottom: 0; }
.quote-activity-stream > a:hover { text-decoration: none; }
.quote-activity-stream span:nth-child(2) { display: grid; }
.quote-activity-stream small { color: var(--muted); font-size: 10.5px; }
.quote-activity-stream time { color: var(--muted); font-size: 10px; }
.quote-activity-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #e9f0fa;
    color: var(--primary);
    font-size: 11px;
    font-weight: 850;
}

/* Quote customer selector */
.quote-customer-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
    gap: 9px;
    margin-bottom: 14px;
}
.quote-customer-search label { display: grid; gap: 4px; font-weight: 750; }
.quote-customer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.quote-customer-card { display: grid; grid-template-rows: 1fr auto; gap: 14px; min-height: 210px; }
.quote-customer-card h2 { margin: 9px 0 3px; font-size: 18px; }
.quote-customer-card p { margin: 0 0 7px; }
.quote-customer-card small { display: block; color: var(--muted); }

/* Full quote editor */
.quote-editor-form { padding-bottom: 78px; }
.quote-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: 14px; align-items: start; }
.quote-editor-main { display: grid; gap: 14px; min-width: 0; }
.quote-editor-sidebar { position: sticky; top: 90px; display: grid; gap: 12px; }
.quote-editor-customer h2,
.quote-editor-items h2,
.quote-editor-terms h2,
.quote-editor-summary h2 { margin: 0; }
.quote-editor-items > .section-head-inline { align-items: end; }
.quote-editor-items > .section-head-inline .actions { flex-wrap: wrap; justify-content: flex-end; }
.quote-editor-items select { max-width: 220px; }
.quote-editor-item-list { display: grid; gap: 10px; margin-top: 15px; }
.quote-editor-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 7px;
    padding: 13px;
    border: 1px solid #d9e1ec;
    border-radius: 13px;
    background: #fff;
}
.quote-editor-item.is-optional { border-left: 4px solid #2563eb; }
.quote-editor-item.is-choice { border-left: 4px solid #8b5cf6; }
.quote-item-drag { padding-top: 28px; color: #94a3b8; font-weight: 800; cursor: grab; }
.quote-item-fields { display: grid; gap: 9px; min-width: 0; }
.quote-item-top-grid { display: grid; grid-template-columns: minmax(220px, 1.5fr) 145px minmax(150px, .8fr) 155px; gap: 8px; align-items: end; }
.quote-item-price-grid { display: grid; grid-template-columns: 130px repeat(4, minmax(105px, 1fr)) 120px; gap: 8px; align-items: end; }
.quote-item-fields label { display: grid; gap: 3px; color: #344256; font-size: 10.5px; font-weight: 750; }
.quote-item-fields input,
.quote-item-fields select,
.quote-item-fields textarea { width: 100%; font-size: 12.5px; }
.quote-item-default { align-self: center; padding-bottom: 9px; }
.quote-line-total { align-self: stretch; justify-content: end; padding: 7px 9px; border-radius: 9px; background: #f3f6fa; }
.quote-line-total strong { color: var(--primary); font-size: 15px; }
.quote-item-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.quote-item-footer > .checkbox-label { margin-right: auto; }
.quote-item-margin { color: var(--success); font-size: 11px; font-weight: 750; }
.quote-editor-summary dl { display: grid; gap: 0; margin: 10px 0; }
.quote-editor-summary dl div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #e7ebf2; }
.quote-editor-summary dl .total { padding-top: 13px; border-bottom: 0; color: var(--primary); font-size: 17px; font-weight: 850; }
.quote-editor-savebar {
    position: fixed;
    z-index: 28;
    right: 18px;
    bottom: 14px;
    left: calc(var(--sidebar-width, 220px) + 18px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid rgba(11,36,71,.18);
    border-radius: 14px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 14px 38px rgba(15,23,42,.16);
    backdrop-filter: blur(10px);
}
.sidebar-collapsed .quote-editor-savebar { left: 78px; }
.quote-editor-savebar > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.quote-item-type {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 3px 7px;
    border-radius: 999px;
    background: #e7edf6;
    color: var(--primary);
    font-size: 9.5px;
    font-weight: 850;
    text-transform: uppercase;
}
.quote-item-type-optional { background: #dbeafe; color: #1d4ed8; }
.quote-item-type-choice { background: #ede9fe; color: #6d28d9; }

/* Quote detail */
.quote-title-line { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.quote-title-line h1 { margin: 0; }
.quote-followup-alert { display: flex; align-items: center; gap: 8px; }
.quote-followup-alert .button { margin-left: auto; }
.quote-detail-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.quote-detail-metrics article { min-height: 86px; }
.quote-detail-metrics article strong { font-size: 17px; }
.quote-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 315px; gap: 14px; align-items: start; }
.quote-detail-main { display: grid; gap: 14px; min-width: 0; }
.quote-detail-sidebar { position: sticky; top: 90px; display: grid; gap: 12px; }
.quote-document-card h2,
.quote-message-thread h2,
.quote-attachments-card h2,
.quote-detail-sidebar h2 { margin: 0; }
.quote-detail-items { width: 100%; border-collapse: collapse; }
.quote-detail-items th,
.quote-detail-items td { padding: 11px 9px; border-bottom: 1px solid #e4e9f1; text-align: left; vertical-align: top; }
.quote-detail-items th { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.quote-detail-items td p { margin: 4px 0; color: #445066; font-size: 12px; }
.quote-detail-items td small { display: block; color: var(--muted); }
.quote-detail-items tr.is-unselected { opacity: .5; }
.quote-detail-items tfoot td { text-align: right; }
.quote-detail-items tfoot .total td { border-top: 2px solid var(--primary); color: var(--primary); font-size: 16px; font-weight: 850; }
.quote-decision-banner { display: grid; gap: 3px; margin-top: 15px; padding: 13px; border-radius: 11px; }
.quote-decision-banner.success { background: #ecfdf5; color: #065f46; }
.quote-decision-banner.danger { background: #fff1f2; color: #9f1239; }
.quote-message-thread { display: grid; gap: 8px; margin: 12px 0; }
.quote-message {
    padding: 11px 12px;
    border: 1px solid #dde4ee;
    border-radius: 11px;
    background: #fff;
}
.quote-message.is-private { border-color: #d8b4fe; background: #faf5ff; }
.quote-message > div { display: flex; align-items: center; gap: 7px; }
.quote-message > div span { padding: 2px 6px; border-radius: 999px; background: #edf2f7; color: var(--muted); font-size: 9px; font-weight: 800; }
.quote-message time { margin-left: auto; color: var(--muted); font-size: 10px; }
.quote-message p { margin: 7px 0 0; font-size: 12.5px; }
.quote-message-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quote-message-forms form { display: grid; gap: 8px; }
.quote-upload-form { display: grid; grid-template-columns: minmax(260px, 1fr) auto auto; align-items: center; gap: 9px; margin-top: 12px; }
.quote-upload-form .checklist-upload-zone { min-height: 66px; }
.quote-attachment-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.quote-attachment-card { display: grid; padding: 10px; border: 1px solid #dce3ed; border-radius: 10px; background: #fff; }
.quote-attachment-card:hover { border-color: var(--primary); text-decoration: none; }
.quote-attachment-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.quote-attachment-card small { color: var(--muted); font-size: 10px; }
.quote-timeline { display: grid; margin-top: 12px; }
.quote-timeline article { position: relative; display: grid; grid-template-columns: 20px 1fr; gap: 8px; padding: 0 0 15px; }
.quote-timeline article::before { content: ""; position: absolute; top: 12px; bottom: 0; left: 5px; width: 1px; background: #d9e1eb; }
.quote-timeline article:last-child::before { display: none; }
.quote-timeline-dot { position: relative; z-index: 1; width: 11px; height: 11px; margin-top: 4px; border: 3px solid #dce8f7; border-radius: 50%; background: var(--primary); }
.quote-timeline p { margin: 2px 0; font-size: 12px; }
.quote-timeline small { color: var(--muted); font-size: 10px; }
.copy-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.copy-field input { min-width: 0; font-size: 11px; }
.quote-action-buttons { display: grid; gap: 7px; }
.quote-action-buttons .button { width: 100%; }
.quote-version-list { display: grid; gap: 7px; }
.quote-version-list div { display: grid; padding: 7px 0; border-bottom: 1px solid #e5eaf1; }
.quote-version-list small { color: var(--muted); font-size: 10px; }

/* Quote template content library */
.quote-template-library { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.quote-template-card.is-inactive { opacity: .62; }
.quote-template-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.quote-template-card-head h2 { margin: 5px 0 0; font-size: 18px; }
.quote-template-card-head > strong { color: var(--primary); font-size: 18px; }
.quote-template-form { display: grid; gap: 10px; }

/* Customer-facing quote */
.public-quote-page { background: #eef2f6; color: #172033; }
.public-quote-top {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px max(18px, calc((100vw - 1060px) / 2));
    border-bottom: 1px solid #d7dee8;
    background: rgba(11,36,71,.97);
    color: #fff;
}
.public-quote-brand { display: flex; align-items: center; gap: 12px; }
.public-quote-brand img { width: auto; height: 48px; }
.public-quote-brand span { display: grid; }
.public-quote-brand small { color: #dce8f8; font-size: 10px; }
.public-quote-shell { width: min(1060px, calc(100% - 28px)); margin: 22px auto 50px; }
.public-quote-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 16px 2px; }
.public-quote-hero h1 { margin: 0; color: var(--primary); font-size: clamp(28px, 5vw, 46px); }
.public-quote-hero p { margin: 4px 0; }
.public-quote-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.public-quote-meta > div { display: grid; align-content: start; }
.public-quote-meta span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.public-quote-meta strong { margin: 4px 0; color: var(--primary); font-size: 15px; }
.public-quote-meta small { color: #4f5d72; }
.public-quote-form,
.public-quote-shell > section { margin-top: 14px; }
.public-quote-item-list { display: grid; gap: 8px; margin-top: 12px; }
.public-quote-item {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 155px;
    gap: 12px;
    align-items: start;
    padding: 13px;
    border: 1px solid #dae2ed;
    border-radius: 11px;
    background: #fff;
}
.public-quote-item.is-optional { border-left: 4px solid #2563eb; }
.public-quote-item.is-optional:not(.is-selected) { opacity: .58; background: #f8fafc; }
.public-option-control { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; }
.public-option-control input,
.public-choice-item input { width: 18px; height: 18px; accent-color: var(--primary); }
.public-standard-label { display: inline-flex; width: fit-content; padding: 4px 7px; border-radius: 999px; background: #e7edf6; color: var(--primary); font-size: 9px; font-weight: 850; text-transform: uppercase; }
.public-quote-item-copy p { margin: 4px 0 0; color: #4e5b70; font-size: 12.5px; }
.public-quote-item-amount { display: grid; justify-items: end; color: var(--muted); font-size: 11px; }
.public-quote-item-amount strong { color: var(--primary); font-size: 14px; }
.public-choice-group { display: grid; gap: 7px; margin: 12px 0 0; padding: 12px; border: 1px solid #c4b5fd; border-radius: 12px; background: #faf8ff; }
.public-choice-group legend { padding: 0 7px; color: #5b21b6; font-weight: 850; }
.public-choice-group legend small { display: block; color: var(--muted); font-size: 10px; font-weight: 600; }
.public-choice-item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 10px; border: 1px solid #e4def7; border-radius: 9px; background: #fff; cursor: pointer; }
.public-choice-item:has(input:checked) { border-color: #7c3aed; box-shadow: inset 0 0 0 1px #7c3aed; }
.public-choice-item > span { display: grid; }
.public-choice-item small { color: var(--muted); }
.public-choice-item em { color: var(--primary); font-style: normal; font-weight: 850; }
.public-quote-totals { width: min(430px, 100%); margin: 16px 0 0 auto; }
.public-quote-totals div { display: flex; justify-content: space-between; gap: 18px; padding: 7px 3px; border-bottom: 1px solid #e2e8f0; }
.public-quote-totals .total { margin-top: 5px; border-top: 2px solid var(--primary); border-bottom: 0; color: var(--primary); font-size: 20px; font-weight: 850; }
.public-quote-deposit p,
.public-quote-terms details > div { white-space: normal; font-size: 12.5px; }
.public-quote-terms summary { cursor: pointer; color: var(--primary); font-weight: 850; }
.public-quote-terms details > div { margin-top: 12px; max-height: 430px; overflow: auto; padding-right: 8px; }
.public-signature { margin: 12px 0; padding: 12px; border: 1px solid #cbd5e1; border-radius: 12px; background: #fff; }
.public-signature .section-head-inline small { display: block; color: var(--muted); }
.public-signature canvas { display: block; width: 100%; height: 160px; margin-top: 8px; border: 1px dashed #94a3b8; border-radius: 8px; background: #fff; touch-action: none; }
.public-accept-confirm { margin: 12px 0; }
.button-large { min-height: 48px !important; padding: 0 22px !important; font-size: 15px !important; }
.public-quote-accepted { background: #ecfdf5; border-color: #a7f3d0; }
.public-quote-accepted img { display: block; max-width: 360px; max-height: 150px; margin-top: 10px; }
.public-question-form { display: grid; gap: 10px; margin-top: 15px; padding-top: 15px; border-top: 1px solid #e4e9f1; }
.public-decline { margin: 16px 0; }
.public-decline summary { cursor: pointer; color: #9f1239; font-weight: 750; }
.public-decline form { display: grid; gap: 9px; margin-top: 10px; padding: 12px; border-radius: 10px; background: #fff1f2; }
.public-quote-footer { display: flex; justify-content: space-between; gap: 12px; padding: 20px 2px; color: var(--muted); font-size: 11px; }

@media (max-width: 1180px) {
    .quote-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .quote-kpi-grid article:last-child { grid-column: span 2; }
    .quote-item-top-grid { grid-template-columns: minmax(180px, 1fr) 130px 150px; }
    .quote-item-default { grid-column: 1 / -1; padding: 0; }
    .quote-item-price-grid { grid-template-columns: repeat(3, minmax(100px, 1fr)); }
}

@media (max-width: 980px) {
    .checklist-workspace { padding: 12px; }
    .checklist-workspace-head { display: grid; }
    .checklist-question { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 13px; }
    .checklist-answer-control,
    .checklist-help { margin-left: 0; }
    .checklist-progress { min-width: 130px; }
    .checklist-admin-question-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .question-text-field,
    .question-options-field,
    .question-help-field { grid-column: 1 / -1; }

    .quote-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quote-kpi-grid article:last-child { grid-column: 1 / -1; }
    .quote-dashboard-grid,
    .quote-detail-layout,
    .quote-editor-layout { grid-template-columns: minmax(0, 1fr); }
    .quote-editor-sidebar,
    .quote-detail-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quote-editor-savebar {
        right: 8px;
        bottom: calc(var(--mobile-bottom-nav-height, 64px) + 8px);
        left: 8px;
    }
    .quote-filter-bar { grid-template-columns: minmax(0, 1fr) repeat(2, 130px); }
    .quote-filter-bar .button { min-height: 38px; }
    .quote-filter-bar .button:last-child { display: none; }
    .quote-customer-grid,
    .quote-template-library { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quote-detail-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .quote-message-forms { grid-template-columns: minmax(0, 1fr); }
    .public-quote-top { padding: 10px 14px; }
}

@media (max-width: 680px) {
    .checklist-service-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .checklist-service-chip { justify-content: center; min-width: 0; text-align: center; }
    .checklist-panel-head { display: grid; }
    .checklist-progress { width: 100%; text-align: left; }
    .checklist-attachment { grid-template-columns: minmax(0, 1fr) 28px; }
    .checklist-attachment small { grid-column: 1; }
    .checklist-admin-question-row { grid-template-columns: minmax(0, 1fr); }
    .question-text-field,
    .question-options-field,
    .question-help-field { grid-column: auto; }

    .quote-dashboard-head { display: grid; }
    .quote-dashboard-head .actions { width: 100%; }
    .quote-dashboard-head .button { flex: 1; justify-content: center; }
    .quote-kpi-grid { gap: 7px; }
    .quote-kpi-grid article { min-height: 86px; padding: 11px; }
    .quote-kpi-grid article strong { font-size: 20px; }
    .quote-value-chart { gap: 3px; height: 180px; }
    .quote-chart-month > span { transform: rotate(-50deg); transform-origin: center; overflow: visible; }
    .quote-filter-bar { grid-template-columns: minmax(0, 1fr) auto; }
    .quote-filter-bar label:not(.quote-search) { display: none; }
    .quote-filter-bar .button { min-width: 64px; }
    .quote-customer-search { grid-template-columns: minmax(0, 1fr) auto; }
    .quote-customer-search .button:last-child { display: none; }
    .quote-customer-grid,
    .quote-template-library { grid-template-columns: minmax(0, 1fr); }
    .quote-customer-card { min-height: 0; }

    .quote-editor-head .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .quote-editor-head .actions .button { justify-content: center; }
    .quote-editor-form { padding-bottom: 160px; }
    .quote-editor-sidebar { grid-template-columns: minmax(0, 1fr); }
    .quote-editor-customer .grid,
    .quote-editor-terms .grid { grid-template-columns: minmax(0, 1fr) !important; }
    .quote-editor-items > .section-head-inline { display: grid; }
    .quote-editor-items > .section-head-inline .actions { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
    .quote-editor-items > .section-head-inline select { max-width: none; min-width: 0; }
    .quote-editor-item { grid-template-columns: minmax(0, 1fr); padding: 10px; }
    .quote-item-drag { display: none; }
    .quote-item-top-grid,
    .quote-item-price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quote-item-title,
    .quote-choice-group { grid-column: 1 / -1; }
    .quote-line-total { min-height: 58px; }
    .quote-item-footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quote-item-footer > .checkbox-label,
    .quote-item-margin { grid-column: 1 / -1; margin: 0; }
    .quote-item-footer .button { width: 100%; }
    .quote-editor-savebar { display: grid; gap: 7px; padding: 8px; }
    .quote-editor-savebar > span { display: none; }
    .quote-editor-savebar .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quote-editor-savebar .button-primary { grid-column: 1 / -1; grid-row: 1; }
    .quote-editor-savebar .button { width: 100%; justify-content: center; }

    .quote-detail-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quote-detail-metrics article:last-child { grid-column: 1 / -1; }
    .quote-detail-sidebar { grid-template-columns: minmax(0, 1fr); }
    .quote-followup-alert { display: grid; }
    .quote-followup-alert .button { margin-left: 0; }
    .quote-detail-items thead { display: none; }
    .quote-detail-items,
    .quote-detail-items tbody,
    .quote-detail-items tr,
    .quote-detail-items td { display: block; width: 100%; }
    .quote-detail-items tr { padding: 9px 0; border-bottom: 1px solid #dde4ee; }
    .quote-detail-items td { padding: 4px 0; border: 0; }
    .quote-detail-items tfoot { display: table; width: 100%; }
    .quote-detail-items tfoot tr { display: table-row; }
    .quote-detail-items tfoot td { display: table-cell; width: auto; }
    .quote-upload-form { grid-template-columns: minmax(0, 1fr); }
    .quote-attachment-grid { grid-template-columns: minmax(0, 1fr); }
    .quote-activity-stream > a { grid-template-columns: 30px minmax(0, 1fr); }
    .quote-activity-stream time { grid-column: 2; }

    .public-quote-top { position: static; }
    .public-quote-brand img { height: 39px; }
    .public-quote-brand small { display: none; }
    .public-quote-actions .button { padding: 0 8px !important; font-size: 11px !important; }
    .public-quote-shell { width: min(100% - 14px, 1060px); margin-top: 8px; }
    .public-quote-hero { padding: 10px 3px; }
    .public-quote-meta { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .public-quote-item { grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
    .public-quote-item > :first-child { grid-column: 1 / -1; }
    .public-quote-item-amount { min-width: 90px; }
    .public-choice-item { grid-template-columns: 20px minmax(0, 1fr); }
    .public-choice-item em { grid-column: 2; }
    .public-quote-meta.card,
    .public-quote-items.card,
    .public-quote-deposit.card,
    .public-quote-terms.card,
    .public-quote-accept.card,
    .public-quote-questions.card,
    .public-quote-attachments.card { padding: 13px; }
    .public-signature canvas { height: 140px; }
    .public-quote-footer { display: grid; }
}

@media print {
    .public-quote-page { background: #fff !important; }
    .public-quote-top,
    .public-question-form,
    .public-quote-questions form,
    .public-quote-accept,
    .public-decline,
    .public-quote-actions { display: none !important; }
    .public-quote-shell { width: 100%; margin: 0; }
    .public-quote-shell .card { box-shadow: none !important; break-inside: avoid; }
    .public-quote-terms details > div { max-height: none; overflow: visible; }
    .public-quote-terms details { display: block; }
    .public-quote-terms summary { display: none; }
    .public-quote-terms details:not([open]) > div { display: block; }
    a { color: inherit !important; text-decoration: none !important; }
}

/* Perth Tow Trucks CRM v36 — searchable quote price book */
.quote-template-autocomplete {
    position: relative;
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto;
    gap: 8px;
    align-items: end;
    width: min(760px, 100%);
}
.quote-template-search-label {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.quote-template-search-label > span {
    font-size: 12px;
    font-weight: 800;
    color: #0b2447;
}
.quote-template-search-label input {
    width: 100%;
}
.quote-template-selection {
    grid-column: 1 / -1;
    min-height: 18px;
}
.quote-template-results {
    position: absolute;
    z-index: 1200;
    top: calc(100% - 18px);
    left: 0;
    width: min(720px, calc(100vw - 32px));
    max-height: min(58vh, 480px);
    overflow-y: auto;
    padding: 6px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
}
.quote-template-result {
    display: grid;
    gap: 3px;
    width: 100%;
    padding: 10px 11px;
    border: 0;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    text-align: left;
    cursor: pointer;
}
.quote-template-result:last-child { border-bottom: 0; }
.quote-template-result:hover,
.quote-template-result:focus-visible { background: #f1f5f9; outline: 2px solid #facc15; outline-offset: -2px; }
.quote-template-result-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.quote-template-result-head strong { color: #0b2447; }
.quote-template-result-price { flex: 0 0 auto; font-weight: 800; color: #0b2447; }
.quote-template-result-meta { font-size: 12px; font-weight: 700; color: #475569; }
.quote-template-result-description {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.35;
    color: #334155;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.quote-template-result-empty { padding: 14px; color: #64748b; font-size: 13px; }
.quote-item-review-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 3px 7px;
    border: 1px solid #f59e0b;
    border-radius: 999px;
    background: #fffbeb;
    color: #92400e;
    font-size: 11px;
    font-weight: 800;
}
.quote-editor-item.requires-price-review {
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, .09);
}
.quote-editor-item.requires-price-review.price-confirmed {
    border-color: #cbd5e1;
    box-shadow: none;
}
.quote-template-catalog-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.quote-template-catalog-summary > div {
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}
.quote-template-catalog-summary strong { display: block; color: #0b2447; font-size: 20px; }
.quote-template-filter-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 280px) auto auto;
    gap: 8px;
    align-items: end;
    margin-bottom: 14px;
}
.quote-template-filter-form label { display: grid; gap: 4px; }
.quote-template-managed-badge,
.quote-template-review-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}
.quote-template-managed-badge { background: #e0f2fe; color: #075985; }
.quote-template-review-badge { background: #fef3c7; color: #92400e; }
.quote-template-pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 18px 0; }
.quote-template-pagination .is-current { background: #0b2447; color: #fff; }
.quote-template-card-note { padding: 8px 10px; border-radius: 8px; background: #fff7ed; color: #9a3412; font-size: 12px; }

@media (max-width: 760px) {
    .quote-template-autocomplete { grid-template-columns: 1fr auto; width: 100%; }
    .quote-template-results { position: fixed; top: auto; right: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); left: 10px; width: auto; max-height: 54vh; }
    .quote-template-catalog-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quote-template-filter-form { grid-template-columns: 1fr 1fr; }
    .quote-template-filter-form label:first-child { grid-column: 1 / -1; }
}
.quote-editor-items > .quote-template-autocomplete {
    margin: 12px 0 16px;
}
.quote-template-toolbar-v36 {
    align-items: end;
}
.quote-template-toolbar-v36 > .quote-template-autocomplete {
    flex: 1 1 620px;
}
.quote-items-table tr.requires-price-review td {
    background: #fffbeb;
}
.quote-items-table [data-modal-price-review] {
    margin-top: 4px;
}
.quote-editor-items-head {
    align-items: flex-start;
}
@media (max-width: 700px) {
    .quote-template-toolbar-v36 > .quote-template-autocomplete {
        width: 100%;
    }
    .quote-template-toolbar-v36 > #quote-add-row {
        width: 100%;
    }
}


/* v37 — blank quote rows and Xero accounting integration */
.quote-add-item-bottom,
.quote-modal-add-row-bottom {
    display: flex;
    justify-content: center;
    padding-top: 14px;
}
.quote-add-item-bottom .button,
.quote-modal-add-row-bottom .button {
    min-width: 190px;
}
.xero-settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 18px;
    align-items: start;
}
.xero-settings-main,
.xero-settings-sidebar {
    display: grid;
    gap: 16px;
}
.xero-settings-sidebar {
    position: sticky;
    top: 84px;
}
.xero-settings-form code,
.xero-mode-help code {
    overflow-wrap: anywhere;
}
.xero-connection-actions,
.xero-quote-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.settings-status-list,
.xero-document-numbers {
    display: grid;
    gap: 10px;
    margin: 0;
}
.settings-status-list > div,
.xero-document-numbers > div {
    display: grid;
    grid-template-columns: minmax(90px, auto) 1fr;
    gap: 4px 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid #e2e8f0;
}
.settings-status-list > div:last-child,
.xero-document-numbers > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.settings-status-list dt,
.xero-document-numbers dt {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}
.settings-status-list dd,
.xero-document-numbers dd {
    margin: 0;
    color: #0b2447;
    font-weight: 800;
    overflow-wrap: anywhere;
}
.xero-document-numbers small {
    grid-column: 1 / -1;
    color: #64748b;
}
.xero-quote-card .xero-quote-actions {
    display: grid;
    margin: 14px 0 10px;
}
.compact-steps {
    margin: 0;
    padding-left: 20px;
}
.compact-steps li + li {
    margin-top: 7px;
}
.quote-number-link + small {
    display: block;
}
@media (max-width: 900px) {
    .xero-settings-layout {
        grid-template-columns: 1fr;
    }
    .xero-settings-sidebar {
        position: static;
    }
}
@media (max-width: 700px) {
    .xero-connection-actions > .button,
    .xero-quote-actions > .button {
        width: 100%;
    }
    .quote-add-item-bottom,
    .quote-modal-add-row-bottom {
        padding-top: 10px;
    }
    .quote-add-item-bottom .button,
    .quote-modal-add-row-bottom .button {
        width: 100%;
        min-width: 0;
    }
}

/* ==========================================================================
   Perth Tow Trucks CRM v38 — persistent Light Mode / Dark Mode
   ========================================================================== */
.theme-mode-switch {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 3px;
    padding: 3px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.theme-mode-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    min-width: 92px !important;
    min-height: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: rgba(255,255,255,.72) !important;
    box-shadow: none !important;
    font-size: 11.5px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}
.theme-mode-button:hover {
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
}
.theme-mode-button.is-active,
.theme-mode-button[aria-pressed="true"] {
    background: #fff !important;
    color: #0b2447 !important;
    box-shadow: 0 3px 10px rgba(0,0,0,.16) !important;
}
.theme-mode-button svg,
.mobile-theme-button svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.theme-icon-sun,
.theme-icon-moon { display: none; }
html[data-theme="light"] .mobile-theme-button .theme-icon-moon,
html[data-theme="dark"] .mobile-theme-button .theme-icon-sun { display: block; }
.mobile-nav-theme-switch { display: none; }

/* Dark palette. */
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0f172a;
    --card: #111827;
    --ink: #f8fafc;
    --muted: #cbd5e1;
    --line: #475569;
    --primary: #b92429;
    --primary-2: #8f1d22;
    --accent: #b92429;
    --danger: #f87171;
    --success: #34d399;
    --warning: #fbbf24;
    --shadow: 0 18px 42px rgba(0, 0, 0, .28);
}
html[data-theme="dark"] body {
    background: #0f172a !important;
    color: #f8fafc !important;
}
html[data-theme="dark"] body,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] button,
html[data-theme="dark"] .button {
    color-scheme: dark;
}
html[data-theme="dark"] ::selection {
    background: rgba(185,36,41,.62);
    color: #fff;
}
html[data-theme="dark"] * {
    scrollbar-color: #64748b #0f172a;
}
html[data-theme="dark"] *::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] *::-webkit-scrollbar-track { background: #0f172a; }
html[data-theme="dark"] *::-webkit-scrollbar-thumb {
    border: 2px solid #0f172a;
    border-radius: 999px;
    background: #64748b;
}
html[data-theme="dark"] a { color: #fca5a5; }
html[data-theme="dark"] .muted,
html[data-theme="dark"] .small,
html[data-theme="dark"] small { color: #cbd5e1; }
html[data-theme="dark"] code,
html[data-theme="dark"] pre {
    border-color: #475569;
    background: #0b1220;
    color: #e2e8f0;
}
html[data-theme="dark"] hr { border-color: #475569; }

/* Header, navigation and mode switch. */
html[data-theme="dark"] .topbar {
    background: linear-gradient(135deg, #080f1d, #111827) !important;
    border-bottom-color: #374151 !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.34) !important;
}
html[data-theme="dark"] .topbar .brand,
html[data-theme="dark"] .topbar .brand strong,
html[data-theme="dark"] .topbar .nav a,
html[data-theme="dark"] .topbar .user-chip { color: #f8fafc !important; }
html[data-theme="dark"] .topbar .nav a {
    border-color: transparent !important;
    background: rgba(255,255,255,.045) !important;
}
html[data-theme="dark"] .topbar .nav a:hover,
html[data-theme="dark"] .topbar .nav a.active {
    background: rgba(185,36,41,.28) !important;
    color: #fff !important;
}
html[data-theme="dark"] .topbar .user-chip {
    border-color: #475569 !important;
    background: #1e293b !important;
}
html[data-theme="dark"] .theme-mode-switch {
    border-color: #475569;
    background: #0b1220;
}
html[data-theme="dark"] .theme-mode-button {
    color: #cbd5e1 !important;
}
html[data-theme="dark"] .theme-mode-button:hover {
    background: #1e293b !important;
    color: #fff !important;
}
html[data-theme="dark"] .theme-mode-button.is-active,
html[data-theme="dark"] .theme-mode-button[aria-pressed="true"] {
    background: #b92429 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(185,36,41,.28) !important;
}
html[data-theme="dark"] .mobile-icon-button,
html[data-theme="dark"] .mobile-account-chip {
    border-color: #475569 !important;
    background: #1e293b !important;
    color: #fff !important;
}

/* Main layout, panels and cards. */
html[data-theme="dark"] .app-shell,
html[data-theme="dark"] main,
html[data-theme="dark"] .container,
html[data-theme="dark"] .container-wide { background: transparent; }
html[data-theme="dark"] .side-menu {
    border-color: #374151 !important;
    background: #111827 !important;
    box-shadow: 12px 0 28px rgba(0,0,0,.18) !important;
}
html[data-theme="dark"] .side-menu-title { color: #94a3b8 !important; }
html[data-theme="dark"] .side-collapse-button {
    border-color: #475569 !important;
    background: #1e293b !important;
    color: #f8fafc !important;
}
html[data-theme="dark"] .side-link { color: #e5e7eb !important; }
html[data-theme="dark"] .side-link:hover,
html[data-theme="dark"] .side-link.active {
    background: rgba(185,36,41,.18) !important;
    color: #fff !important;
}
html[data-theme="dark"] .side-link strong {
    border: 1px solid #d45b60 !important;
    background: #b92429 !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(185,36,41,.22);
}
html[data-theme="dark"] .side-link-primary {
    border-color: #d45b60 !important;
    background: #b92429 !important;
    color: #fff !important;
}
html[data-theme="dark"] .side-bottom,
html[data-theme="dark"] .side-settings { border-color: #374151 !important; }
html[data-theme="dark"] .settings-menu summary,
html[data-theme="dark"] details.side-settings summary,
html[data-theme="dark"] .side-settings summary {
    border-color: #475569 !important;
    background: #1e293b !important;
    color: #f8fafc !important;
}
html[data-theme="dark"] .settings-links,
html[data-theme="dark"] details.side-settings[open]::before,
html[data-theme="dark"] details.side-settings[open] a {
    border-color: #475569 !important;
    background: #111827 !important;
    color: #e5e7eb !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.34) !important;
}
html[data-theme="dark"] .settings-links a,
html[data-theme="dark"] .side-settings a { color: #e5e7eb !important; }
html[data-theme="dark"] .settings-links a:hover,
html[data-theme="dark"] .side-settings a:hover {
    background: #1e293b !important;
    color: #fff !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .filter-card,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .install-card,
html[data-theme="dark"] .note-item,
html[data-theme="dark"] .security-summary-card,
html[data-theme="dark"] .favicon-settings-card,
html[data-theme="dark"] .mini-fieldset,
html[data-theme="dark"] .quote-kpi-grid article,
html[data-theme="dark"] .quote-detail-metrics article,
html[data-theme="dark"] .quote-customer-card,
html[data-theme="dark"] .quote-template-card,
html[data-theme="dark"] .quote-activity-item,
html[data-theme="dark"] .quote-attachment-card,
html[data-theme="dark"] .checklist-workspace,
html[data-theme="dark"] .checklist-panel,
html[data-theme="dark"] .checklist-admin-question-row,
html[data-theme="dark"] .quote-template-catalog-summary > div {
    border-color: #475569 !important;
    background: #111827 !important;
    color: #f8fafc !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.20) !important;
}
html[data-theme="dark"] .page-head h1,
html[data-theme="dark"] .form-section-title,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] legend,
html[data-theme="dark"] label { color: #f8fafc !important; }

/* Forms and buttons. */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    border-color: #475569 !important;
    background: #0b1220 !important;
    color: #f8fafc !important;
    box-shadow: none;
}
html[data-theme="dark"] select option {
    background: #0b1220;
    color: #f8fafc;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #94a3b8 !important; opacity: 1; }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
    border-color: #d45b60 !important;
    box-shadow: 0 0 0 3px rgba(185,36,41,.25) !important;
}
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] { accent-color: #b92429; }
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: #f8fafc;
    box-shadow: 0 0 0 1000px #0b1220 inset !important;
    caret-color: #f8fafc;
}
html[data-theme="dark"] .button,
html[data-theme="dark"] button {
    border-color: #475569 !important;
    background: #1e293b !important;
    color: #f8fafc !important;
}
html[data-theme="dark"] .button:hover,
html[data-theme="dark"] button:hover {
    border-color: #64748b !important;
    background: #334155 !important;
    color: #fff !important;
}
html[data-theme="dark"] .button-primary,
html[data-theme="dark"] button.button-primary,
html[data-theme="dark"] .button-sm8 {
    border-color: #b92429 !important;
    background: #b92429 !important;
    color: #fff !important;
}
html[data-theme="dark"] .button-primary:hover,
html[data-theme="dark"] button.button-primary:hover,
html[data-theme="dark"] .button-sm8:hover {
    border-color: #d45b60 !important;
    background: #981f24 !important;
}
html[data-theme="dark"] .button-danger,
html[data-theme="dark"] .button-danger-soft {
    border-color: #7f1d1d !important;
    background: rgba(127,29,29,.25) !important;
    color: #fecaca !important;
}
html[data-theme="dark"] .button-disabled,
html[data-theme="dark"] button:disabled,
html[data-theme="dark"] .button[aria-disabled="true"] {
    border-color: #334155 !important;
    background: #1e293b !important;
    color: #64748b !important;
    opacity: .75;
}
html[data-theme="dark"] .filter-card .button,
html[data-theme="dark"] .filter-card button,
html[data-theme="dark"] .filter-card .show-spam-toggle,
html[data-theme="dark"] .inline-spam-check,
html[data-theme="dark"] .inline-alloc-check { color: #e5e7eb !important; }
html[data-theme="dark"] .date-picker-button {
    border-color: #475569 !important;
    background: #1e293b !important;
    color: #f8fafc !important;
}
html[data-theme="dark"] .autosave-state {
    background: #1e293b !important;
    color: #cbd5e1 !important;
}
html[data-theme="dark"] .autosave-state.is-saving { background: #713f12 !important; color: #fde68a !important; }
html[data-theme="dark"] .autosave-state.is-saved { background: #064e3b !important; color: #a7f3d0 !important; }
html[data-theme="dark"] .autosave-state.is-error { background: #7f1d1d !important; color: #fecaca !important; }

/* Tables and data areas. */
html[data-theme="dark"] table { color: #e5e7eb; }
html[data-theme="dark"] th,
html[data-theme="dark"] .quote-items-table th,
html[data-theme="dark"] .public-quote-items th {
    border-color: #475569 !important;
    background: #1e293b !important;
    color: #cbd5e1 !important;
}
html[data-theme="dark"] td,
html[data-theme="dark"] tr,
html[data-theme="dark"] .quote-items-table td {
    border-color: #374151 !important;
    color: #e5e7eb;
}
html[data-theme="dark"] tbody tr:hover td { background-color: rgba(255,255,255,.018); }
html[data-theme="dark"] .spam-row {
    background: #0b1220 !important;
    opacity: .78;
}
html[data-theme="dark"] .empty-state { color: #94a3b8 !important; }
html[data-theme="dark"] .contact-links a,
html[data-theme="dark"] .client-name-link,
html[data-theme="dark"] .address-link,
html[data-theme="dark"] .booking-address-link { color: #fca5a5 !important; }
html[data-theme="dark"] .suburb-tag,
html[data-theme="dark"] .status-pill,
html[data-theme="dark"] .quote-badge,
html[data-theme="dark"] .count-pill,
html[data-theme="dark"] .schedule-range-label {
    border-color: #475569 !important;
    background: #1e293b !important;
    color: #e5e7eb !important;
}

/* Dashboard emphasis and graph colours. */
html[data-theme="dark"] .metric-card strong,
html[data-theme="dark"] .stat-card strong,
html[data-theme="dark"] .quote-kpi-grid article strong,
html[data-theme="dark"] .quote-detail-metrics article strong,
html[data-theme="dark"] .quote-template-catalog-summary strong {
    color: #ef7075 !important;
}
html[data-theme="dark"] .metric-primary {
    border-color: #d45b60 !important;
    background: linear-gradient(145deg, #b92429, #7f1d1d) !important;
    color: #fff !important;
}
html[data-theme="dark"] .metric-primary strong,
html[data-theme="dark"] .metric-primary span,
html[data-theme="dark"] .metric-primary small { color: #fff !important; }
html[data-theme="dark"] .month-column,
html[data-theme="dark"] .month-bar {
    border: 1px solid #475569 !important;
    background: #1e293b !important;
}
html[data-theme="dark"] .month-column i,
html[data-theme="dark"] .month-bar i,
html[data-theme="dark"] .quote-chart-bar,
html[data-theme="dark"] .checklist-progress-track i {
    background: #b92429 !important;
}
html[data-theme="dark"] .quote-chart-bar.accepted { background: #10b981 !important; }
html[data-theme="dark"] .quote-chart-legend .quoted::before { background: #b92429 !important; }
html[data-theme="dark"] .quote-value-chart {
    border-color: #475569 !important;
    background-color: #111827 !important;
    background-image: linear-gradient(to top, rgba(148,163,184,.22) 1px, transparent 1px) !important;
}
html[data-theme="dark"] .month-tile strong,
html[data-theme="dark"] .month-tile span,
html[data-theme="dark"] .quote-chart-month > span { color: #cbd5e1 !important; }

/* Alerts, status colours and call panel. */
html[data-theme="dark"] .alert {
    border-color: #475569 !important;
    background: #1e293b !important;
    color: #e5e7eb !important;
}
html[data-theme="dark"] .alert-success { border-color: #047857 !important; background: #063f33 !important; color: #a7f3d0 !important; }
html[data-theme="dark"] .alert-danger { border-color: #b91c1c !important; background: #4c1518 !important; color: #fecaca !important; }
html[data-theme="dark"] .alert-warning { border-color: #a16207 !important; background: #422b0a !important; color: #fde68a !important; }
html[data-theme="dark"] .alert-info { border-color: #2563eb !important; background: #172554 !important; color: #bfdbfe !important; }
html[data-theme="dark"] .status-blank,
html[data-theme="dark"] .status-spam { background: #334155 !important; color: #e2e8f0 !important; }
html[data-theme="dark"] .status-no-answer { background: #713f12 !important; color: #fde68a !important; }
html[data-theme="dark"] .status-job-lost { background: #7f1d1d !important; color: #fecaca !important; }
html[data-theme="dark"] .status-requires-quote { background: #064e3b !important; color: #a7f3d0 !important; }
html[data-theme="dark"] .call-box {
    border: 1px solid #d45b60;
    background: linear-gradient(145deg, #7f1d1d, #b92429) !important;
}
html[data-theme="dark"] .call-box .button {
    border-color: rgba(255,255,255,.3) !important;
    background: rgba(255,255,255,.13) !important;
    color: #fff !important;
}

/* Scheduler. */
html[data-theme="dark"] .schedule-day-tile,
html[data-theme="dark"] .slot-corner,
html[data-theme="dark"] .schedule-week-head,
html[data-theme="dark"] .slot-time-label,
html[data-theme="dark"] .schedule-slot,
html[data-theme="dark"] .booking-modal-card {
    border-color: #475569 !important;
    background: #111827 !important;
    color: #f8fafc !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.22) !important;
}
html[data-theme="dark"] .schedule-day-tile:hover,
html[data-theme="dark"] .schedule-day-tile.selected,
html[data-theme="dark"] .schedule-week-head.selected {
    border-color: #d45b60 !important;
    background: rgba(185,36,41,.16) !important;
    box-shadow: 0 0 0 2px rgba(185,36,41,.18) !important;
}
html[data-theme="dark"] .schedule-slot.slot-hover {
    outline-color: #d45b60 !important;
    background: rgba(185,36,41,.12) !important;
}
html[data-theme="dark"] .booking-chip {
    border-color: #475569 !important;
    background: #1e293b !important;
    color: #e5e7eb !important;
}
html[data-theme="dark"] .booking-chip.travel-conflict {
    border-color: #ef4444 !important;
    background: #4c1518 !important;
    color: #fecaca !important;
}
html[data-theme="dark"] .booking-chip.travel-conflict a { color: #fecaca !important; }
html[data-theme="dark"] .modal-close,
html[data-theme="dark"] .icon-button {
    background: #1e293b !important;
    color: #fca5a5 !important;
}

/* Quote modal, quote workbench and price book. */
html[data-theme="dark"] .quote-modal-card,
html[data-theme="dark"] .quote-form-actions,
html[data-theme="dark"] .quote-editor-savebar,
html[data-theme="dark"] .quote-signature-box,
html[data-theme="dark"] .quote-editor-item,
html[data-theme="dark"] .quote-detail-items,
html[data-theme="dark"] .quote-message,
html[data-theme="dark"] .quote-template-results,
html[data-theme="dark"] .quote-template-result {
    border-color: #475569 !important;
    background: #111827 !important;
    color: #f8fafc !important;
}
html[data-theme="dark"] .quote-form-actions,
html[data-theme="dark"] .quote-editor-savebar {
    box-shadow: 0 -12px 28px rgba(0,0,0,.28) !important;
}
html[data-theme="dark"] #quote-signature-pad,
html[data-theme="dark"] .signature-pad {
    border-color: #64748b !important;
    background: #f8fafc !important;
}
html[data-theme="dark"] .quote-items-table tr.requires-price-review td,
html[data-theme="dark"] .quote-kpi-grid .quote-kpi-attention,
html[data-theme="dark"] .quote-editor-item.requires-price-review {
    border-color: #a16207 !important;
    background: #422b0a !important;
    color: #fde68a !important;
}
html[data-theme="dark"] .quote-template-search-label > span,
html[data-theme="dark"] .quote-template-result-head strong,
html[data-theme="dark"] .quote-template-result-price,
html[data-theme="dark"] .quote-template-card-head > strong,
html[data-theme="dark"] .settings-status-list dd,
html[data-theme="dark"] .xero-document-numbers dd { color: #f8fafc !important; }
html[data-theme="dark"] .quote-template-result-meta,
html[data-theme="dark"] .quote-template-result-description,
html[data-theme="dark"] .quote-template-result-empty,
html[data-theme="dark"] .settings-status-list dt,
html[data-theme="dark"] .xero-document-numbers dt,
html[data-theme="dark"] .xero-document-numbers small { color: #cbd5e1 !important; }
html[data-theme="dark"] .quote-template-result:hover,
html[data-theme="dark"] .quote-template-result:focus-visible {
    background: #1e293b !important;
    outline-color: #d45b60 !important;
}
html[data-theme="dark"] .quote-template-managed-badge { background: #164e63 !important; color: #bae6fd !important; }
html[data-theme="dark"] .quote-template-review-badge,
html[data-theme="dark"] .quote-item-review-badge { background: #713f12 !important; color: #fde68a !important; }
html[data-theme="dark"] .quote-template-card-note { background: #431407 !important; color: #fed7aa !important; }
html[data-theme="dark"] .settings-status-list > div,
html[data-theme="dark"] .xero-document-numbers > div { border-color: #374151 !important; }

/* Checklist workspace. */
html[data-theme="dark"] .checklist-service-chip {
    border-color: #475569 !important;
    background: #1e293b !important;
    color: #e5e7eb !important;
}
html[data-theme="dark"] .checklist-service-chip:hover,
html[data-theme="dark"] .checklist-service-chip.is-selected {
    border-color: #d45b60 !important;
    background: #b92429 !important;
    color: #fff !important;
}
html[data-theme="dark"] .checklist-panel-head,
html[data-theme="dark"] .checklist-question.is-complete,
html[data-theme="dark"] .checklist-admin-question-row.is-inactive,
html[data-theme="dark"] .checklist-admin-question-row.is-new {
    border-color: #475569 !important;
    background: #1e293b !important;
}
html[data-theme="dark"] .checklist-question,
html[data-theme="dark"] .checklist-template-form { border-color: #374151 !important; }
html[data-theme="dark"] .checklist-question-check,
html[data-theme="dark"] .checklist-question.is-complete .checklist-question-check span { color: #f8fafc !important; }
html[data-theme="dark"] .checklist-progress-track { background: #334155 !important; }
html[data-theme="dark"] .checklist-upload-zone {
    border-color: #64748b !important;
    background: #0b1220 !important;
    color: #f8fafc !important;
}
html[data-theme="dark"] .checklist-upload-zone:hover,
html[data-theme="dark"] .checklist-upload-zone.is-dragging {
    border-color: #d45b60 !important;
    background: rgba(185,36,41,.14) !important;
}
html[data-theme="dark"] .checklist-attachment {
    border-color: #475569 !important;
    background: #1e293b !important;
}

/* User, permissions, history and settings pages. */
html[data-theme="dark"] .permission-option,
html[data-theme="dark"] .history-item,
html[data-theme="dark"] .message-history-item,
html[data-theme="dark"] .dedupe-group,
html[data-theme="dark"] .integration-log-item {
    border-color: #475569 !important;
    background: #111827 !important;
    color: #e5e7eb !important;
}
html[data-theme="dark"] .permission-option:hover { background: #1e293b !important; }
html[data-theme="dark"] .security-status-good { color: #6ee7b7 !important; }
html[data-theme="dark"] .security-status-warning { color: #fcd34d !important; }
html[data-theme="dark"] .security-status-critical { color: #fca5a5 !important; }

/* Footer. */
html[data-theme="dark"] .footer { color: #94a3b8 !important; }

/* Mobile dark-mode surfaces and navigation. */
@media (max-width: 980px) {
    .desktop-theme-switch { display: none !important; }
    .mobile-nav-theme-switch {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        width: 100%;
        margin: 0 0 8px;
        padding: 4px;
        border-radius: 12px;
    }
    .mobile-nav-theme-switch .theme-mode-button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 38px !important;
        height: 38px !important;
        font-size: 12px !important;
    }
    html[data-theme="dark"] .topbar .nav {
        background: linear-gradient(165deg, #080f1d, #111827) !important;
        box-shadow: -22px 0 48px rgba(0,0,0,.48) !important;
    }
    html[data-theme="dark"] .topbar .nav a {
        border-color: #374151 !important;
        background: #1e293b !important;
    }
    html[data-theme="dark"] .topbar .nav a.active {
        border-color: #d45b60 !important;
        background: rgba(185,36,41,.28) !important;
    }
    html[data-theme="dark"] .mobile-nav-head { border-color: #374151 !important; }
    html[data-theme="dark"] .mobile-bottom-nav {
        border-top-color: #374151 !important;
        background: rgba(11,18,32,.97) !important;
        box-shadow: 0 -8px 24px rgba(0,0,0,.34) !important;
    }
    html[data-theme="dark"] .mobile-bottom-nav a,
    html[data-theme="dark"] .mobile-bottom-nav button { color: #94a3b8 !important; }
    html[data-theme="dark"] .mobile-bottom-nav a.active {
        background: rgba(185,36,41,.20) !important;
        color: #fff !important;
    }
    html[data-theme="dark"] .mobile-bottom-nav a.active::before { background: #b92429 !important; }
    html[data-theme="dark"] .side-menu {
        border-color: #374151 !important;
        background: #111827 !important;
    }
    html[data-theme="dark"] .filter-card {
        border-color: #475569 !important;
        background: #111827 !important;
        box-shadow: 0 5px 18px rgba(0,0,0,.28) !important;
    }
    html[data-theme="dark"] .mobile-filter-toggle,
    html[data-theme="dark"] .mobile-stats-toggle,
    html[data-theme="dark"] .filter-card > button[type="submit"] {
        border-color: #475569 !important;
        background: #1e293b !important;
        color: #f8fafc !important;
    }
    html[data-theme="dark"] .inline-table-form > .table-wrap-wide { background: transparent !important; }
    html[data-theme="dark"] .inline-table-form .call-table tbody,
    html[data-theme="dark"] .inline-table-form .call-table { background: transparent !important; }
    html[data-theme="dark"] .inline-table-form .call-table tbody > tr[data-client-row] {
        border-color: #475569 !important;
        background: #111827 !important;
        box-shadow: 0 5px 16px rgba(0,0,0,.22) !important;
    }
    html[data-theme="dark"] .inline-table-form .call-table tbody > tr[data-client-row] > td {
        border-color: #374151 !important;
        background: #111827 !important;
        color: #e5e7eb !important;
    }
    html[data-theme="dark"] .inline-table-form .call-table tbody > tr[data-client-row] > .entry-status-col,
    html[data-theme="dark"] .inline-table-form .call-table tbody > tr[data-client-row] > .service-col,
    html[data-theme="dark"] .inline-table-form .call-table tbody > tr[data-client-row] > .alloc-col,
    html[data-theme="dark"] .inline-table-form .call-table tbody > tr[data-client-row] > .action-col,
    html[data-theme="dark"] .inline-table-form .call-table tbody > tr[data-client-row] > .quote-value-col,
    html[data-theme="dark"] .inline-table-form .call-table tbody > tr[data-client-row] > .comment-col,
    html[data-theme="dark"] .inline-table-form .call-table tbody > tr[data-client-row] > .save-col {
        border-color: #374151 !important;
        background: #111827 !important;
    }
    html[data-theme="dark"] .inline-table-form .call-table tbody > tr[data-client-row] > .entry-status-col,
    html[data-theme="dark"] .inline-table-form .call-table tbody > tr[data-client-row] > .service-col {
        background: #0b1220 !important;
    }
    html[data-theme="dark"] .monthly-card-horizontal { background: #111827 !important; }
    html[data-theme="dark"] .security-table tbody tr,
    html[data-theme="dark"] .security-table tbody td,
    html[data-theme="dark"] .quote-items-table tbody tr,
    html[data-theme="dark"] .quote-items-table tbody td,
    html[data-theme="dark"] .users-table-wrap tr {
        border-color: #475569 !important;
        background: #111827 !important;
        color: #e5e7eb !important;
    }
    html[data-theme="dark"] .schedule-week-grid .slot-time-label { background: #0b1220 !important; }
    html[data-theme="dark"] .quote-modal-card { background: #111827 !important; }
    html[data-theme="dark"] .quote-form-actions {
        border-color: #475569 !important;
        background: #111827 !important;
    }
}

@media (min-width: 981px) and (max-width: 1260px) {
    .theme-mode-button { min-width: 76px !important; padding: 0 7px !important; font-size: 10.5px !important; }
    .theme-mode-button svg { width: 14px; height: 14px; flex-basis: 14px; }
}

@media print {
    html[data-theme="dark"],
    html[data-theme="dark"] body {
        color-scheme: light !important;
        background: #fff !important;
        color: #111827 !important;
    }
    html[data-theme="dark"] .theme-mode-switch,
    html[data-theme="dark"] .mobile-theme-button { display: none !important; }
}

/* ==========================================================================
   v39 Communication centre, mailbox settings and Outlook-style composer
   ========================================================================== */

.nav-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    margin-left: 3px;
    border-radius: 999px;
    background: #b92429;
    color: #fff;
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
    box-shadow: 0 0 0 2px rgba(185,36,41,.13);
}
.nav-count-badge.is-zero { display: none; }
.nav-communication { display: inline-flex !important; align-items: center; gap: 4px; }
.mobile-communication-button { position: relative; }
.mobile-communication-button .nav-count-badge {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin: 0;
    font-size: 10px;
    box-shadow: 0 0 0 2px #fff;
}

.communication-page-head { margin-bottom: 14px; }
.communication-page-head .actions { align-items: center; }
.communication-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.communication-metrics article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card);
    box-shadow: 0 8px 24px rgba(24,34,53,.05);
}
.communication-metrics span { color: var(--muted); font-size: 12.5px; font-weight: 750; }
.communication-metrics strong { color: #b92429; font-size: 26px; line-height: 1; }

.communication-filter-card {
    position: sticky;
    top: 82px;
    z-index: 7;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 8px 24px rgba(24,34,53,.05);
    backdrop-filter: blur(12px);
}
.communication-tabs {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}
.communication-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 36px;
    padding: 8px 11px;
    border-radius: 9px;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 800;
}
.communication-tabs a:hover,
.communication-tabs a.active {
    background: #eef3fb;
    color: var(--primary);
    text-decoration: none;
}
.communication-tabs a.active { box-shadow: inset 0 0 0 1px #cbd7e8; }
.communication-tabs a span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #b92429;
    color: #fff;
    font-size: 10.5px;
}
.communication-search-form {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) minmax(145px, auto) auto;
    align-items: center;
    gap: 7px;
}
.communication-search-form label { margin: 0; }
.communication-search-form input,
.communication-search-form select {
    min-height: 36px;
    height: 36px;
    margin: 0;
    padding: 7px 10px;
    border-radius: 9px;
    font-size: 12.5px;
}
.communication-search-form .button { min-height: 36px; height: 36px; padding: 0 12px; border-radius: 9px; font-size: 12.5px; }

.communication-workspace {
    display: grid;
    grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
    min-height: min(690px, calc(100vh - 250px));
    max-height: calc(100vh - 185px);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--card);
    box-shadow: var(--shadow);
}
.communication-thread-list {
    min-width: 0;
    overflow-y: auto;
    border-right: 1px solid var(--line);
    background: #f8fafc;
}
.communication-thread-card {
    position: relative;
    display: block;
    padding: 14px 15px 13px 18px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    transition: background .15s ease, box-shadow .15s ease;
}
.communication-thread-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: transparent;
}
.communication-thread-card:hover,
.communication-thread-card.active {
    background: #fff;
    text-decoration: none;
}
.communication-thread-card.active { box-shadow: inset 0 0 0 1px rgba(11,36,71,.08); }
.communication-thread-card.needs-reply::before { background: #b92429; }
.communication-thread-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: baseline;
}
.communication-thread-card-head strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 13.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.communication-thread-card-head time { color: var(--muted); font-size: 10.5px; white-space: nowrap; }
.communication-thread-subject {
    margin-top: 3px;
    overflow: hidden;
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.communication-thread-card p {
    display: -webkit-box;
    margin: 5px 0 7px;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.communication-thread-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.communication-thread-meta span {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.communication-thread-meta em {
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 999px;
    background: #fee2e2;
    color: #991b1b;
    font-size: 10px;
    font-style: normal;
    font-weight: 850;
}
.communication-thread-meta em.replied { background: #dcfce7; color: #166534; }
.communication-thread-meta em.handled { background: #e2e8f0; color: #475569; }
.communication-next-page { display: flex; margin: 12px; border-radius: 10px; }
.communication-empty,
.communication-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    padding: 30px;
    color: var(--muted);
    text-align: center;
}
.communication-empty strong { color: var(--ink); }
.communication-empty span { margin-top: 4px; font-size: 13px; }
.communication-placeholder { min-height: 100%; }
.communication-placeholder > span { font-size: 42px; opacity: .35; }
.communication-placeholder h2 { margin: 7px 0 2px; color: var(--ink); }
.communication-placeholder p { margin: 0; }

.communication-conversation {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-width: 0;
    min-height: 0;
    background: #fff;
}
.communication-conversation-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
}
.communication-conversation-head h2 { margin: 2px 0 3px; font-size: 20px; line-height: 1.25; }
.communication-conversation-head .eyebrow { color: #b92429; font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.communication-conversation-head .actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.communication-conversation-head .actions form { margin: 0; }
.communication-conversation-head .button { min-height: 36px; padding: 7px 12px; border-radius: 9px; font-size: 12.5px; }
.communication-message-list {
    min-height: 0;
    overflow-y: auto;
    padding: 18px;
    background: linear-gradient(180deg, #f8fafc, #fff 120px);
}
.communication-message {
    width: min(88%, 820px);
    margin: 0 0 14px;
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-radius: 14px 14px 14px 4px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(24,34,53,.05);
}
.communication-message.is-outbound {
    margin-left: auto;
    border-color: #cbd7e8;
    border-radius: 14px 14px 4px 14px;
    background: #f1f5fb;
}
.communication-message > header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 0 0 8px;
    border: 0;
}
.communication-message > header div { min-width: 0; }
.communication-message > header strong { display: block; font-size: 13.5px; }
.communication-message > header span { display: block; color: var(--muted); font-size: 11px; }
.communication-message > header time { color: var(--muted); font-size: 10.5px; white-space: nowrap; }
.communication-message-addresses {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e8edf4;
    color: var(--muted);
    font-size: 11px;
}
.communication-message-body,
.client-email-body {
    overflow-wrap: anywhere;
    color: #111827;
    font-size: 13px;
    line-height: 1.55;
    white-space: normal;
}
.communication-attachment-note {
    margin-top: 12px;
    padding: 8px 10px;
    border-radius: 9px;
    background: #f8fafc;
    color: var(--muted);
    font-size: 11.5px;
}
.communication-reply-dock {
    display: flex;
    justify-content: flex-end;
    padding: 11px 16px;
    border-top: 1px solid var(--line);
    background: rgba(255,255,255,.96);
}
.communication-reply-dock .button { min-height: 38px; border-radius: 10px; font-size: 12.5px; }

/* Email account settings. */
.email-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(310px, .75fr);
    gap: 18px;
    margin-bottom: 18px;
}
.email-settings-grid > .card { margin: 0; }
.email-provider-fieldset {
    margin: 0 0 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
}
.email-provider-fieldset legend { padding: 0 7px; color: var(--primary); font-size: 13px; font-weight: 850; }
.email-provider-fieldset label + label { margin-top: 10px; }
.email-provider-fieldset input { font-size: 13px; }
.email-connect-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 16px; }
.copy-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    align-items: center;
    margin: 8px 0 14px;
}
.copy-field code {
    display: block;
    min-width: 0;
    padding: 10px 12px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    white-space: nowrap;
}
.copy-field-wrap code { white-space: normal; overflow-wrap: anywhere; }
.email-inline-options { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.email-inline-options .checkbox-label { margin: 0; }
.email-default-pill {
    display: inline-flex;
    margin-left: 7px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: 10px;
    font-weight: 850;
}
.email-spam-trash-option { margin: 3px 0 4px; }

/* User email signature. */
.email-signature-preview,
.email-compose-signature-preview {
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #f8fafc;
}
.email-signature-preview { margin-top: 12px; padding: 13px; }
.email-signature-preview strong { display: block; margin-bottom: 7px; font-size: 12px; }
.email-signature-preview pre,
.email-compose-signature-preview pre {
    margin: 0;
    color: #334155;
    font: 12px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    white-space: pre-wrap;
}

/* Outlook-style composer. */
body.email-compose-open { overflow: hidden !important; }
.email-compose-modal[hidden] { display: none !important; }
.email-compose-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 20px;
}
.email-compose-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(15,23,42,.42);
    cursor: default;
    backdrop-filter: blur(2px);
}
.email-compose-backdrop:hover { background: rgba(15,23,42,.42); }
.email-compose-window {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(720px, calc(100vw - 40px));
    height: min(760px, calc(100vh - 40px));
    overflow: hidden;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 30px 85px rgba(15,23,42,.34);
}
.email-compose-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 15px 12px 18px;
    background: #0b2447;
    color: #fff;
}
.email-compose-header h2 { margin: 1px 0 0; color: #fff; font-size: 17px; }
.email-compose-eyebrow { color: #cbd5e1; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.email-compose-close {
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-size: 24px;
    line-height: 1;
}
.email-compose-close:hover { background: rgba(255,255,255,.12); }
.email-compose-form {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    min-height: 0;
}
.email-compose-fields { border-bottom: 1px solid var(--line); }
.email-compose-row {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 43px;
    padding: 0 14px;
    border-bottom: 1px solid #e8edf4;
    font-size: 12.5px;
}
.email-compose-row:last-child { border-bottom: 0; }
.email-compose-row > span { color: #475569; font-weight: 750; }
.email-compose-row input,
.email-compose-row select {
    min-height: 41px;
    height: 41px;
    margin: 0;
    padding: 7px 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none !important;
    font-size: 13px;
}
.email-compose-row select { padding-right: 28px; }
.email-compose-cc-toggle {
    min-height: 28px;
    height: 28px;
    padding: 0 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #475569;
    font-size: 11px;
}
.email-compose-cc-toggle:hover { background: #eef3fb; }
.email-compose-optional-recipients[hidden] { display: none; }
.email-compose-editor {
    display: grid;
    grid-template-rows: minmax(180px, 1fr) auto;
    min-height: 0;
    overflow: hidden;
    background: #fff;
}
.email-compose-editor textarea {
    min-height: 0;
    height: 100%;
    margin: 0;
    padding: 18px;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none !important;
    resize: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
}
.email-compose-signature-preview {
    margin: 0 15px 12px;
    padding: 9px 11px;
}
.email-compose-signature-preview > span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10.5px; font-weight: 750; }
.email-compose-status {
    min-height: 0;
    padding: 0 16px;
    color: var(--muted);
    font-size: 11.5px;
}
.email-compose-status:not(:empty) { padding-top: 8px; padding-bottom: 8px; border-top: 1px solid var(--line); }
.email-compose-status.is-success { color: #047857; }
.email-compose-status.is-error { color: #b42318; }
.email-compose-status.is-working { color: #0b2447; }
.email-compose-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 58px;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    background: #f8fafc;
}
.email-compose-footer .button { min-height: 36px; height: 36px; padding: 0 14px; border-radius: 8px; font-size: 12.5px; }
.email-signature-option { margin-left: auto; color: #475569; font-size: 11.5px; }

/* Client correspondence panel. */
.client-email-correspondence .section-head-inline { align-items: flex-start; }
.client-email-list { display: grid; gap: 12px; }
.client-email-item {
    padding: 14px 15px;
    border: 1px solid var(--line);
    border-left: 4px solid #94a3b8;
    border-radius: 12px;
    background: #fff;
}
.client-email-item.is-outbound { border-left-color: #0b2447; background: #f8fafc; }
.client-email-item.is-inbound { border-left-color: #b92429; }
.client-email-item > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.client-email-item > header strong { display: block; font-size: 13px; }
.client-email-item > header span { display: block; color: var(--muted); font-size: 11px; }
.client-email-item > header time { color: var(--muted); font-size: 10.5px; white-space: nowrap; }
.client-email-address { margin: 7px 0; color: var(--muted); font-size: 11.5px; }
.client-email-item > footer { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }

/* Quote-view activity toast. */
.quote-view-toast-region {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 2500;
    display: grid;
    gap: 10px;
    width: min(390px, calc(100vw - 30px));
    pointer-events: none;
}
.quote-view-toast {
    pointer-events: auto;
    padding: 14px;
    border: 1px solid #d45b60;
    border-left: 5px solid #b92429;
    border-radius: 13px;
    background: #fff;
    color: #111827;
    box-shadow: 0 20px 50px rgba(15,23,42,.25);
    animation: quote-view-toast-in .22s ease-out both;
}
@keyframes quote-view-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.quote-view-toast strong { display: block; font-size: 13.5px; }
.quote-view-toast > span { display: block; margin: 3px 0 10px; color: #64748b; font-size: 11.5px; }
.quote-view-toast-actions { display: flex; gap: 7px; justify-content: flex-end; }
.quote-view-toast-actions .button { min-height: 34px; height: 34px; padding: 0 11px; border-radius: 8px; font-size: 11.5px; }

/* Dark mode for v39 communication. */
html[data-theme="dark"] .mobile-communication-button .nav-count-badge { box-shadow: 0 0 0 2px #0b1220; }
html[data-theme="dark"] .communication-metrics article,
html[data-theme="dark"] .communication-filter-card,
html[data-theme="dark"] .communication-workspace,
html[data-theme="dark"] .communication-conversation,
html[data-theme="dark"] .communication-message,
html[data-theme="dark"] .email-provider-fieldset,
html[data-theme="dark"] .email-signature-preview,
html[data-theme="dark"] .email-compose-signature-preview,
html[data-theme="dark"] .client-email-item,
html[data-theme="dark"] .quote-view-toast {
    border-color: #475569 !important;
    background: #111827 !important;
    color: #f8fafc !important;
}
html[data-theme="dark"] .communication-filter-card { background: rgba(17,24,39,.96) !important; }
html[data-theme="dark"] .communication-tabs a { color: #cbd5e1 !important; }
html[data-theme="dark"] .communication-tabs a:hover,
html[data-theme="dark"] .communication-tabs a.active { background: #1e293b !important; color: #fff !important; box-shadow: inset 0 0 0 1px #475569; }
html[data-theme="dark"] .communication-thread-list { border-color: #374151 !important; background: #0b1220 !important; }
html[data-theme="dark"] .communication-thread-card { border-color: #374151 !important; color: #e5e7eb !important; }
html[data-theme="dark"] .communication-thread-card:hover,
html[data-theme="dark"] .communication-thread-card.active { background: #1e293b !important; }
html[data-theme="dark"] .communication-thread-card-head strong,
html[data-theme="dark"] .communication-thread-subject,
html[data-theme="dark"] .communication-placeholder h2,
html[data-theme="dark"] .communication-empty strong,
html[data-theme="dark"] .communication-conversation-head h2,
html[data-theme="dark"] .communication-message-body,
html[data-theme="dark"] .client-email-body,
html[data-theme="dark"] .client-email-item > header strong,
html[data-theme="dark"] .quote-view-toast strong { color: #f8fafc !important; }
html[data-theme="dark"] .communication-thread-card p,
html[data-theme="dark"] .communication-thread-meta span,
html[data-theme="dark"] .communication-thread-card-head time,
html[data-theme="dark"] .communication-conversation-head .muted,
html[data-theme="dark"] .communication-message > header span,
html[data-theme="dark"] .communication-message > header time,
html[data-theme="dark"] .communication-message-addresses,
html[data-theme="dark"] .client-email-address,
html[data-theme="dark"] .client-email-item > header span,
html[data-theme="dark"] .client-email-item > header time,
html[data-theme="dark"] .quote-view-toast > span { color: #94a3b8 !important; }
html[data-theme="dark"] .communication-message-list { background: linear-gradient(180deg, #0b1220, #111827 130px) !important; }
html[data-theme="dark"] .communication-message.is-outbound,
html[data-theme="dark"] .client-email-item.is-outbound { background: #1e293b !important; }
html[data-theme="dark"] .communication-message-addresses,
html[data-theme="dark"] .communication-conversation-head,
html[data-theme="dark"] .communication-reply-dock,
html[data-theme="dark"] .email-compose-fields,
html[data-theme="dark"] .email-compose-row,
html[data-theme="dark"] .email-compose-footer,
html[data-theme="dark"] .email-compose-status:not(:empty) { border-color: #374151 !important; }
html[data-theme="dark"] .communication-reply-dock { background: #111827 !important; }
html[data-theme="dark"] .communication-attachment-note,
html[data-theme="dark"] .copy-field code { border-color: #475569 !important; background: #0b1220 !important; color: #cbd5e1 !important; }
html[data-theme="dark"] .email-compose-window { border-color: #64748b !important; background: #111827 !important; }
html[data-theme="dark"] .email-compose-editor { background: #111827 !important; }
html[data-theme="dark"] .email-compose-editor textarea,
html[data-theme="dark"] .email-compose-row input,
html[data-theme="dark"] .email-compose-row select { background: transparent !important; color: #f8fafc !important; }
html[data-theme="dark"] .email-compose-row > span,
html[data-theme="dark"] .email-compose-cc-toggle,
html[data-theme="dark"] .email-signature-option { color: #cbd5e1 !important; }
html[data-theme="dark"] .email-compose-cc-toggle:hover { background: #1e293b !important; }
html[data-theme="dark"] .email-compose-signature-preview pre,
html[data-theme="dark"] .email-signature-preview pre { color: #e2e8f0 !important; }
html[data-theme="dark"] .email-compose-footer { background: #0b1220 !important; }
html[data-theme="dark"] .email-compose-status.is-working { color: #cbd5e1 !important; }
html[data-theme="dark"] .quote-view-toast { border-color: #d45b60 !important; border-left-color: #b92429 !important; }

@media (max-width: 1180px) {
    .communication-filter-card { grid-template-columns: 1fr; }
    .communication-search-form { grid-template-columns: minmax(0, 1fr) minmax(150px, .45fr) auto; }
    .communication-workspace { grid-template-columns: minmax(275px, 34%) minmax(0, 1fr); }
}

@media (max-width: 980px) {
    .communication-page-head .actions { display: flex !important; }
    .communication-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .communication-metrics article { padding: 11px 12px; }
    .communication-metrics strong { font-size: 23px; }
    .communication-filter-card {
        position: sticky;
        top: var(--mobile-header-height, 58px);
        z-index: 8;
        width: 100%;
        margin-inline: 0;
        padding: 8px;
        border-radius: 12px;
    }
    .communication-search-form { grid-template-columns: minmax(0, 1fr) minmax(120px, .45fr) auto; }
    .communication-workspace {
        display: block;
        min-height: 0;
        max-height: none;
        overflow: visible;
        border-radius: 12px;
        background: transparent;
        box-shadow: none;
    }
    .communication-thread-list {
        max-height: none;
        overflow: visible;
        border: 1px solid var(--line);
        border-radius: 12px;
    }
    .communication-conversation {
        display: none;
        position: fixed;
        inset: calc(env(safe-area-inset-top, 0px) + 54px) 0 calc(58px + env(safe-area-inset-bottom, 0px));
        z-index: 80;
        border-top: 1px solid var(--line);
        background: #fff;
    }
    .communication-workspace.has-thread .communication-conversation { display: grid; }
    .communication-conversation-head { padding: 12px; }
    .communication-conversation-head .actions { flex: 0 0 auto; }
    .communication-conversation-head .actions form { display: none; }
    .communication-conversation-head h2 { font-size: 16px; }
    .communication-message-list { padding: 12px; }
    .communication-message { width: 94%; padding: 12px; }
    .communication-reply-dock { padding: 9px 12px; padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px)); }
    .email-settings-grid { grid-template-columns: 1fr; }
    .email-account-table .user-row-actions { justify-content: flex-start; }
    .email-compose-modal { align-items: stretch; justify-content: stretch; padding: 0; }
    .email-compose-window {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border: 0;
        border-radius: 0;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .email-compose-header { min-height: 54px; }
    .email-compose-row { grid-template-columns: 48px minmax(0, 1fr) auto; padding: 0 10px; }
    .email-compose-editor textarea { padding: 14px 12px; font-size: 16px; }
    .email-compose-signature-preview { margin: 0 10px 8px; max-height: 110px; overflow: auto; }
    .email-compose-footer { min-height: 58px; padding: 9px 10px; flex-wrap: wrap; }
    .email-compose-footer .email-compose-send { order: 0; flex: 1 1 120px; }
    .email-compose-footer > .button:not(.email-compose-send) { order: 1; }
    .email-signature-option { order: 2; width: 100%; margin: 2px 0 0; }
    .quote-view-toast-region {
        right: 10px;
        bottom: calc(68px + env(safe-area-inset-bottom, 0px));
        width: calc(100vw - 20px);
    }
    .quote-view-toast { padding: 12px; }
}

@media (max-width: 640px) {
    .communication-page-head { display: block; }
    .communication-page-head .actions { margin-top: 9px; overflow-x: auto; flex-wrap: nowrap; }
    .communication-page-head .actions .button { min-height: 36px; height: 36px; border-radius: 9px; padding: 0 11px; font-size: 12px; }
    .communication-metrics { gap: 7px; }
    .communication-metrics article { min-height: 58px; }
    .communication-metrics span { font-size: 11px; }
    .communication-metrics strong { font-size: 21px; }
    .communication-tabs { margin-bottom: 1px; }
    .communication-search-form { grid-template-columns: minmax(0, 1fr) auto; }
    .communication-search-form label:nth-of-type(2) { grid-column: 1 / -1; grid-row: 2; }
    .communication-search-form .button { grid-column: 2; grid-row: 1; }
    .communication-thread-card { padding: 12px 12px 11px 16px; }
    .copy-field { grid-template-columns: 1fr; }
    .copy-field .button { justify-self: start; }
    .email-provider-fieldset { padding: 11px; }
    .client-email-item > header { display: block; }
    .client-email-item > header time { display: block; margin-top: 4px; }
}
.communication-mobile-back { display: none; }
@media (max-width: 980px) {
    .communication-mobile-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        border: 1px solid var(--line);
        border-radius: 9px;
        color: var(--primary);
        font-size: 24px;
        line-height: 1;
    }
    .communication-mobile-back:hover { text-decoration: none; }
    html[data-theme="dark"] .communication-mobile-back { border-color: #475569 !important; color: #fff !important; }
}

/* ========================================================================
   Perth Tow Trucks CRM v40 — header order, Board, security controls and dark fixes
   ======================================================================== */

/* Desktop header order: brand | operating areas | account controls. */
.topbar-v40 {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 62px;
}
.topbar-v40 .brand { min-width: max-content; }
.topbar-v40 .nav-v40 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    min-width: 0;
    margin: 0;
}
.topbar-v40 .nav-v40 > a,
.topbar-v40 .top-nav-dropdown > summary,
.topbar-v40 .topbar-settings-link,
.topbar-v40 .topbar-logout-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}
.topbar-v40 .nav-v40 > a:hover,
.topbar-v40 .nav-v40 > a.active,
.topbar-v40 .top-nav-dropdown.is-active > summary,
.topbar-v40 .top-nav-dropdown[open] > summary,
.topbar-v40 .topbar-settings-link:hover,
.topbar-v40 .topbar-logout-link:hover {
    background: rgba(255,255,255,.16);
    color: #fff;
    text-decoration: none;
}
.topbar-v40 .nav-add-lead {
    border-color: rgba(255,255,255,.26) !important;
    background: #b92429 !important;
    color: #fff !important;
}
.topbar-v40 .nav-add-lead:hover { background: #981f24 !important; }
.topbar-right-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    min-width: max-content;
    margin-left: auto;
}
.topbar-v40 .topbar-logout-link {
    margin-right: 0;
    border-color: rgba(255,255,255,.22);
}
.topbar-v40 .desktop-user-chip { margin: 0; }

/* Top Categories dropdown. */
.top-nav-dropdown {
    position: relative;
    flex: 0 0 auto;
}
.top-nav-dropdown > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.top-nav-dropdown > summary::-webkit-details-marker { display: none; }
.top-nav-dropdown > summary::after {
    content: "▾";
    margin-left: 6px;
    font-size: 10px;
    transition: transform .16s ease;
}
.top-nav-dropdown[open] > summary::after { transform: rotate(180deg); }
.top-nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1200;
    display: grid;
    gap: 3px;
    width: 190px;
    padding: 7px;
    border: 1px solid #d8e0eb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(15,23,42,.22);
}
.top-nav-dropdown:not([open]) .top-nav-dropdown-menu { display: none; }
.top-nav-dropdown-menu a {
    display: block;
    padding: 9px 10px;
    border-radius: 8px;
    color: #0b2447 !important;
    font-size: 12.5px;
    font-weight: 750;
    text-decoration: none;
}
.top-nav-dropdown-menu a:hover,
.top-nav-dropdown-menu a.active {
    background: #eef3f8 !important;
    color: #0b2447 !important;
}

/* No left sidebar is required on Board, Emails, Settings and most detail pages. */
.app-shell-no-sidebar {
    display: block !important;
    width: 100%;
}
.app-shell-no-sidebar > main.container,
.app-shell-no-sidebar > main.container-wide,
.app-shell-no-sidebar > .container,
.app-shell-no-sidebar > .container-wide {
    width: auto !important;
    max-width: none !important;
    margin: 14px 12px 40px !important;
}

/* Settings landing dashboard. */
.settings-dashboard { display: grid; gap: 22px; }
.settings-dashboard-group > h2 {
    margin: 0 0 9px;
    color: #0b2447;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.settings-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
    gap: 10px;
}
.settings-dashboard-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: 6px;
    min-height: 132px;
    padding: 16px 42px 16px 16px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 7px 20px rgba(15,23,42,.06);
    text-decoration: none;
}
.settings-dashboard-card:hover {
    border-color: #b92429;
    box-shadow: 0 12px 30px rgba(15,23,42,.10);
    text-decoration: none;
    transform: translateY(-1px);
}
.settings-dashboard-card strong { color: #0b2447; font-size: 14px; }
.settings-dashboard-card p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.settings-dashboard-arrow {
    position: absolute;
    top: 13px;
    right: 14px;
    color: #b92429;
    font-size: 21px;
    font-weight: 800;
}

/* Trello-style lead board. */
.board-page .container-wide { overflow: visible; }
.board-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 10px;
}
.board-summary article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 58px;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}
.board-summary span { color: var(--muted); font-size: 11.5px; font-weight: 750; }
.board-summary strong { color: #b92429; font-size: 20px; font-weight: 900; }
.board-filter-bar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 155px auto auto;
    align-items: end;
    gap: 8px;
    margin-bottom: 10px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}
.board-filter-bar label { display: grid; gap: 3px; color: var(--muted); font-size: 10px; font-weight: 800; }
.board-filter-bar input,
.board-filter-bar select { min-height: 36px; height: 36px; font-size: 12.5px; }
.board-filter-bar .button { min-height: 36px; height: 36px; }
.board-feedback {
    position: fixed;
    right: 16px;
    bottom: 18px;
    z-index: 1500;
    max-width: min(360px, calc(100vw - 32px));
    padding: 0;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 750;
    pointer-events: none;
}
.board-feedback:not(:empty) { padding: 10px 12px; box-shadow: 0 14px 35px rgba(15,23,42,.22); }
.board-feedback.is-saved { background: #ecfdf5; color: #065f46; }
.board-feedback.is-error { background: #fef2f2; color: #991b1b; }
.kanban-board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(270px, 300px);
    align-items: start;
    gap: 10px;
    width: 100%;
    min-height: 440px;
    padding: 2px 2px 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
}
.kanban-column {
    display: grid;
    grid-template-rows: auto minmax(260px, 1fr);
    max-height: calc(100vh - 255px);
    border: 1px solid #d7dee8;
    border-radius: 13px;
    background: #eef2f6;
    scroll-snap-align: start;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.kanban-column.is-drag-over {
    border-color: #b92429;
    box-shadow: 0 0 0 3px rgba(185,36,41,.16);
}
.kanban-column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 12px 9px;
}
.kanban-column-head h2 { margin: 0; color: #0b2447; font-size: 13px; font-weight: 900; }
.kanban-column-head > span {
    display: grid;
    place-items: center;
    min-width: 25px;
    height: 23px;
    padding: 0 7px;
    border-radius: 999px;
    background: #b92429;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}
.kanban-column-body {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 260px;
    padding: 0 8px 8px;
    overflow-y: auto;
}
.kanban-card {
    display: grid;
    gap: 8px;
    padding: 11px;
    border: 1px solid #d7dee8;
    border-radius: 11px;
    background: #fff;
    color: #111827;
    box-shadow: 0 4px 12px rgba(15,23,42,.07);
    cursor: grab;
}
.kanban-card:active { cursor: grabbing; }
.kanban-card.is-dragging { opacity: .48; transform: rotate(1deg); }
.kanban-card.is-saving { box-shadow: 0 0 0 3px rgba(185,36,41,.14); }
.kanban-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.kanban-card-head > a { color: #0b2447; font-size: 13.5px; font-weight: 900; line-height: 1.25; }
.kanban-owner,
.kanban-card-tags span,
.kanban-booking {
    display: inline-flex;
    width: fit-content;
    padding: 4px 7px;
    border-radius: 999px;
    background: #eef3f8;
    color: #334155;
    font-size: 10px;
    font-weight: 800;
}
.kanban-owner { flex: 0 0 auto; background: #fef2f2; color: #991b1b; }
.kanban-card-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.kanban-card p { margin: 0; color: #334155; font-size: 11.5px; line-height: 1.42; }
.kanban-contact { display: grid; gap: 3px; }
.kanban-contact a { width: fit-content; max-width: 100%; overflow: hidden; color: #0b2447; font-size: 11.5px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.kanban-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 7px; border-top: 1px solid #e5e7eb; }
.kanban-card-meta time { color: #64748b; font-size: 10px; }
.kanban-card-meta strong { color: #b92429; font-size: 11.5px; }
.kanban-booking { border-radius: 7px; background: #eff6ff; color: #1e3a8a; }
.kanban-empty { padding: 18px 8px; color: #94a3b8; font-size: 11px; text-align: center; }
.kanban-mobile-status { display: none; }

/* Security Audit management panels. */
.security-management-card { margin-top: 14px; }
.security-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.security-section-head h2 { margin: 0 0 4px; font-size: 17px; }
.security-section-head p { margin: 0; max-width: 850px; font-size: 12.5px; }
.security-settings-form {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8fafc;
}
.security-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.security-form-grid label { display: grid; gap: 5px; font-size: 12px; font-weight: 800; }
.security-toggle-row { display: flex; flex-wrap: wrap; gap: 9px 20px; }
.security-toggle-row .checkbox-label { color: #111827; }
.security-inline-form { margin-top: 10px; }
.security-file-counts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.security-file-counts > span {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 5px 8px;
    border-radius: 999px;
    background: #eef2f7;
    color: #475569;
    font-size: 10.5px;
}
.security-file-counts > span.critical { background: #fef2f2; color: #991b1b; }
.security-file-counts > span.warning { background: #fffbeb; color: #92400e; }
.security-sanitizer-warning { margin-bottom: 12px; }
.security-last-report {
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8fafc;
}
.security-last-report > summary { cursor: pointer; color: #0b2447; font-size: 12px; font-weight: 850; }
.security-report-grid { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; color: var(--muted); font-size: 11.5px; }
.security-error-list { margin: 9px 0 0; color: #991b1b; font-size: 11.5px; }
.security-file-table { min-width: 820px; }
.security-file-table th,
.security-file-table td { vertical-align: top; font-size: 11.5px; }
.security-file-table code { display: block; width: fit-content; max-width: 420px; overflow-wrap: anywhere; }
.security-file-check { width: 52px; text-align: center; }
.security-file-check input { width: 18px; height: 18px; }
.security-file-category,
.security-review-only { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.security-review-only { color: #92400e; font-weight: 800; }
.security-sanitizer-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.security-clean-state { display: grid; gap: 4px; padding: 22px; }

/* Login reCAPTCHA. */
.login-recaptcha {
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 78px;
    overflow: hidden;
}
.login-form .button[type="submit"] { width: 100%; }

/* Explicit dark-mode readability fixes requested for lead/quote controls. */
html[data-theme="dark"] select.inline-status,
html[data-theme="dark"] .entry-status-stack select.inline-status {
    border-color: #64748b !important;
    background: #0b1220 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
    color-scheme: dark !important;
}
html[data-theme="dark"] select.inline-status option {
    background: #0b1220 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
html[data-theme="dark"] .show-spam-toggle,
html[data-theme="dark"] label.checkbox-label.show-spam-toggle {
    border: 1px solid #64748b !important;
    background: #1e293b !important;
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
}
html[data-theme="dark"] .show-spam-toggle input { accent-color: #b92429 !important; }
html[data-theme="dark"] .quote-filter-bar {
    border: 1px solid #475569 !important;
    background: #111827 !important;
    color: #f8fafc !important;
}
html[data-theme="dark"] .quote-filter-bar label,
html[data-theme="dark"] .quote-filter-bar label > span {
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
}
html[data-theme="dark"] .quote-filter-bar input,
html[data-theme="dark"] .quote-filter-bar select {
    border-color: #64748b !important;
    background: #0b1220 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
    color-scheme: dark !important;
}
html[data-theme="dark"] .quote-filter-bar option { background: #0b1220 !important; color: #fff !important; }
html[data-theme="dark"] .quote-filter-bar input::placeholder { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; }

/* v40 dark surfaces. */
html[data-theme="dark"] .top-nav-dropdown-menu {
    border-color: #475569;
    background: #111827;
    box-shadow: 0 18px 45px rgba(0,0,0,.42);
}
html[data-theme="dark"] .top-nav-dropdown-menu a { color: #f8fafc !important; }
html[data-theme="dark"] .top-nav-dropdown-menu a:hover,
html[data-theme="dark"] .top-nav-dropdown-menu a.active { background: #1e293b !important; color: #fff !important; }
html[data-theme="dark"] .settings-dashboard-group > h2,
html[data-theme="dark"] .settings-dashboard-card strong { color: #f8fafc !important; }
html[data-theme="dark"] .settings-dashboard-card,
html[data-theme="dark"] .board-summary article,
html[data-theme="dark"] .board-filter-bar,
html[data-theme="dark"] .security-settings-form,
html[data-theme="dark"] .security-last-report {
    border-color: #475569 !important;
    background: #111827 !important;
    color: #f8fafc !important;
}
html[data-theme="dark"] .settings-dashboard-card p,
html[data-theme="dark"] .board-summary span { color: #cbd5e1 !important; }
html[data-theme="dark"] .settings-dashboard-arrow,
html[data-theme="dark"] .board-summary strong { color: #f87171 !important; }
html[data-theme="dark"] .kanban-column { border-color: #475569; background: #1e293b; }
html[data-theme="dark"] .kanban-column-head h2 { color: #f8fafc; }
html[data-theme="dark"] .kanban-card { border-color: #475569; background: #111827; color: #f8fafc; }
html[data-theme="dark"] .kanban-card-head > a,
html[data-theme="dark"] .kanban-contact a { color: #fca5a5 !important; }
html[data-theme="dark"] .kanban-card p { color: #e2e8f0; }
html[data-theme="dark"] .kanban-owner,
html[data-theme="dark"] .kanban-card-tags span,
html[data-theme="dark"] .kanban-booking { background: #0b1220; color: #e2e8f0; }
html[data-theme="dark"] .kanban-card-meta { border-color: #374151; }
html[data-theme="dark"] .kanban-card-meta time { color: #94a3b8; }
html[data-theme="dark"] .security-toggle-row .checkbox-label,
html[data-theme="dark"] .security-last-report > summary { color: #f8fafc !important; }
html[data-theme="dark"] .security-file-counts > span { background: #1e293b; color: #cbd5e1; }
html[data-theme="dark"] .security-file-counts > span.critical { background: rgba(127,29,29,.34); color: #fecaca; }
html[data-theme="dark"] .security-file-counts > span.warning { background: rgba(146,64,14,.32); color: #fde68a; }

@media (max-width: 1180px) and (min-width: 981px) {
    .topbar-v40 { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; padding-inline: 12px; }
    .topbar-v40 .nav-v40 > a,
    .topbar-v40 .top-nav-dropdown > summary,
    .topbar-v40 .topbar-settings-link,
    .topbar-v40 .topbar-logout-link { padding-inline: 7px; font-size: 11.5px; }
    .desktop-theme-switch .theme-mode-button span { display: none; }
    .desktop-theme-switch .theme-mode-button { width: 32px; padding: 0; }
}

@media (max-width: 980px) {
    .topbar-v40 {
        display: flex;
        min-height: var(--mobile-header-height, 58px);
        padding-left: max(9px, env(safe-area-inset-left, 0px));
        padding-right: max(9px, env(safe-area-inset-right, 0px));
    }
    .topbar-v40 .topbar-right-actions { display: none !important; }
    .topbar-v40 .nav-v40 {
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
        gap: 5px;
        margin: 0;
    }
    .topbar-v40 .nav-v40 > a,
    .topbar-v40 .top-nav-dropdown > summary {
        justify-content: flex-start;
        width: 100%;
        min-height: 40px;
        padding: 10px 11px;
        font-size: 13px;
    }
    .top-nav-dropdown { width: 100%; }
    .top-nav-dropdown-menu {
        position: static;
        width: 100%;
        margin-top: 4px;
        padding: 5px;
        border-radius: 9px;
        box-shadow: none;
    }
    .top-nav-dropdown-menu a { padding: 9px 11px; font-size: 12.5px; }
    .app-shell-no-sidebar > main.container,
    .app-shell-no-sidebar > main.container-wide,
    .app-shell-no-sidebar > .container,
    .app-shell-no-sidebar > .container-wide {
        width: calc(100% - 16px) !important;
        margin: 8px 8px calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .settings-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .settings-dashboard-card { min-height: 122px; padding: 13px 34px 13px 13px; }
    .board-page-head { display: flex !important; }
    .board-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .board-summary article { display: grid; justify-items: start; min-height: 64px; padding: 9px; }
    .board-summary strong { font-size: 18px; }
    .board-filter-bar { grid-template-columns: minmax(0, 1fr) auto; position: sticky; top: var(--mobile-header-height, 58px); z-index: 8; }
    .board-filter-bar label:nth-of-type(2) { grid-column: 1 / -1; grid-row: 2; }
    .board-filter-bar .button { grid-row: 1; }
    .board-filter-bar .button:last-child { display: none; }
    .kanban-board { grid-auto-columns: minmax(82vw, 340px); min-height: calc(100vh - 280px); }
    .kanban-column { max-height: calc(100vh - 270px); }
    .kanban-card { cursor: default; }
    .kanban-mobile-status { display: grid; gap: 4px; padding-top: 7px; border-top: 1px solid var(--line); }
    .kanban-mobile-status span { color: var(--muted); font-size: 10px; font-weight: 800; }
    .kanban-mobile-status select { min-height: 36px; height: 36px; font-size: 13px; }
    .board-feedback { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
    .security-section-head { display: grid; gap: 9px; }
    .security-file-counts { justify-content: flex-start; }
    .security-form-grid { grid-template-columns: 1fr; }
    .security-sanitizer-actions { position: sticky; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); z-index: 5; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
    .security-sanitizer-actions .button { flex: 1 1 150px; }
    html[data-theme="dark"] .security-sanitizer-actions { background: #111827; }
}

@media (max-width: 640px) {
    .settings-dashboard-grid { grid-template-columns: 1fr; }
    .board-summary article:nth-child(2) { grid-column: span 2; }
    .board-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .board-filter-bar { grid-template-columns: minmax(0, 1fr) auto; }
    .kanban-board { grid-auto-columns: calc(100vw - 34px); }
    .security-toggle-row { display: grid; gap: 8px; }
    .security-sanitizer-actions { display: grid; }
    .login-recaptcha { justify-content: flex-start; }
}

@media (max-width: 350px) {
    .login-recaptcha .g-recaptcha { transform: scale(.88); transform-origin: left top; }
    .login-recaptcha { min-height: 70px; }
}

/* ==========================================================================
   Perth Tow Trucks CRM v41 — notes/task board, storage and quote follow-up controls
   ========================================================================== */
.board-scope-tabs {
    display: inline-flex;
    gap: 4px;
    margin: 0 0 12px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
}
.board-scope-tabs a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 8px;
    color: #475569;
    font-size: 13px;
    font-weight: 800;
}
.board-scope-tabs a.active { background: #0b2447; color: #fff; }
.notes-board-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.notes-board-filter { grid-template-columns: minmax(240px, 1fr) auto auto auto; }
.board-archive-toggle { min-height: 38px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: #0b2447; }
.notes-board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 1fr);
    gap: 12px;
    min-height: calc(100vh - 330px);
    overflow-x: auto;
    padding: 2px 2px 14px;
    scroll-snap-type: x proximity;
}
.notes-board-column {
    display: flex;
    min-width: 0;
    max-height: calc(100vh - 285px);
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #dbe2ea;
    border-radius: 13px;
    background: #f8fafc;
    scroll-snap-align: start;
}
.notes-board-column.is-drag-over { border-color: #b92429; box-shadow: 0 0 0 3px rgba(185,36,41,.13); }
.notes-board-column-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid #dbe2ea;
    background: #fff;
}
.notes-board-column-head h2 { margin: 0; color: #0b2447; font-size: 14px; font-weight: 900; }
.notes-board-column-head p { margin: 3px 0 0; color: #64748b; font-size: 11px; line-height: 1.35; }
.notes-board-column-head > span {
    display: inline-grid;
    min-width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 999px;
    background: #b92429;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}
.notes-board-column-body { min-height: 130px; display: grid; align-content: start; gap: 9px; padding: 9px; overflow-y: auto; }
.notes-board-card {
    display: grid;
    gap: 8px;
    padding: 11px;
    border: 1px solid #dbe2ea;
    border-left: 4px solid #64748b;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15,23,42,.05);
    cursor: grab;
}
.notes-board-card.priority-low { border-left-color: #94a3b8; }
.notes-board-card.priority-normal { border-left-color: #3b82f6; }
.notes-board-card.priority-high { border-left-color: #f59e0b; }
.notes-board-card.priority-urgent { border-left-color: #b92429; }
.notes-board-card.is-overdue { box-shadow: 0 0 0 2px rgba(185,36,41,.15); }
.notes-board-card.is-due-soon { box-shadow: 0 0 0 2px rgba(245,158,11,.15); }
.notes-board-card.is-dragging { opacity: .48; cursor: grabbing; }
.notes-board-card.is-saving { opacity: .72; }
.notes-board-card.is-archived { opacity: .72; }
.notes-board-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.board-card-type,
.board-card-priority {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 0 7px;
    border-radius: 999px;
    background: #eef2f7;
    color: #475569;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.notes-board-card h3 { margin: 0; color: #0b2447; font-size: 13.5px; line-height: 1.3; font-weight: 900; }
.notes-board-card > p { margin: 0; color: #334155; font-size: 12.5px; line-height: 1.45; white-space: pre-wrap; }
.notes-board-card-meta { display: grid; gap: 3px; padding-top: 7px; border-top: 1px solid #edf0f4; color: #64748b; font-size: 10.5px; }
.notes-board-card.is-overdue .notes-board-card-meta time { color: #b92429; font-weight: 850; }
.notes-board-card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.notes-board-card-actions .button { min-height: 30px; height: 30px; padding: 0 9px; font-size: 11px; }
.notes-board-mobile-column { display: none; }
.notes-board-empty { padding: 22px 8px; color: #94a3b8; font-size: 11.5px; text-align: center; }
.board-card-modal-card { width: min(720px, calc(100vw - 24px)); max-height: min(820px, calc(100vh - 24px)); overflow: auto; }
.board-card-modal .modal-actions { position: sticky; bottom: 0; margin: 8px -2px -2px; padding-top: 10px; background: #fff; }

.storage-metric-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.storage-settings-grid { align-items: start; }
.storage-recommendations { display: grid; gap: 11px; margin: 0; padding-left: 20px; color: #334155; font-size: 13px; line-height: 1.48; }
.cron-jobs-card { display: grid; gap: 12px; }
.cron-job-row { display: grid; grid-template-columns: minmax(190px, .4fr) minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.cron-job-row > div:first-child { display: grid; gap: 3px; }
.cron-job-row strong { color: #0b2447; font-size: 13.5px; }
.cron-job-row span { color: #64748b; font-size: 11.5px; }
.cron-job-row code { font-size: 11px; }

.sms-compose-modal[hidden] { display: none !important; }
.sms-compose-modal { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 14px; }
.sms-compose-backdrop { position: absolute; inset: 0; border: 0; background: rgba(2,6,23,.62); }
.sms-compose-window { position: relative; z-index: 1; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; border: 1px solid #cbd5e1; border-radius: 14px; background: #fff; box-shadow: 0 24px 70px rgba(2,6,23,.28); }
.sms-compose-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.sms-compose-header h2 { margin: 2px 0 0; color: #0b2447; font-size: 18px; }
.sms-compose-window form { padding: 16px; }
body.sms-compose-open { overflow: hidden; }

.quote-message.is-staff { margin-left: 8%; border-left: 4px solid #0b2447; background: #eff6ff; }
.quote-message.is-customer { margin-right: 8%; border-left: 4px solid #b92429; background: #fff7f7; }
.quote-view-toast-actions { flex-wrap: wrap; }
.quote-view-toast-actions a.button { text-decoration: none; }

html[data-theme="dark"] .board-scope-tabs,
html[data-theme="dark"] .notes-board-column-head,
html[data-theme="dark"] .notes-board-card,
html[data-theme="dark"] .board-archive-toggle,
html[data-theme="dark"] .board-card-modal .modal-actions,
html[data-theme="dark"] .sms-compose-window { background: #111827; border-color: #475569; }
html[data-theme="dark"] .board-scope-tabs a { color: #cbd5e1; }
html[data-theme="dark"] .board-scope-tabs a.active { background: #b92429; color: #fff; }
html[data-theme="dark"] .notes-board-column { border-color: #475569; background: #1e293b; }
html[data-theme="dark"] .notes-board-column-head { border-color: #475569; }
html[data-theme="dark"] .notes-board-column-head h2,
html[data-theme="dark"] .notes-board-card h3,
html[data-theme="dark"] .cron-job-row strong,
html[data-theme="dark"] .sms-compose-header h2 { color: #f8fafc; }
html[data-theme="dark"] .notes-board-column-head p,
html[data-theme="dark"] .notes-board-card-meta,
html[data-theme="dark"] .storage-recommendations,
html[data-theme="dark"] .cron-job-row span { color: #cbd5e1; }
html[data-theme="dark"] .notes-board-card { border-color: #475569; }
html[data-theme="dark"] .notes-board-card > p { color: #e2e8f0; }
html[data-theme="dark"] .board-card-type,
html[data-theme="dark"] .board-card-priority { background: #0f172a; color: #cbd5e1; }
html[data-theme="dark"] .notes-board-card-meta { border-color: #374151; }
html[data-theme="dark"] .quote-message.is-staff { background: #172554; border-left-color: #60a5fa; }
html[data-theme="dark"] .quote-message.is-customer { background: #3f1519; border-left-color: #f87171; }

@media (max-width: 980px) {
    .notes-board-head { display: flex !important; }
    .notes-board-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .notes-board-filter { grid-template-columns: minmax(0, 1fr) auto; }
    .notes-board-filter .board-archive-toggle { grid-column: 1; grid-row: 2; width: fit-content; }
    .notes-board-filter .button { grid-row: 1; }
    .notes-board-filter .button:last-child { display: none; }
    .notes-board { grid-auto-columns: minmax(82vw, 350px); min-height: calc(100vh - 325px); }
    .notes-board-column { max-height: calc(100vh - 285px); }
    .notes-board-card { cursor: default; }
    .notes-board-mobile-column { display: grid; gap: 4px; padding-top: 7px; border-top: 1px solid var(--line); }
    .notes-board-mobile-column span { color: var(--muted); font-size: 10px; font-weight: 800; }
    .notes-board-mobile-column select { min-height: 36px; height: 36px; font-size: 13px; }
    .storage-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .storage-metric-grid article:last-child { grid-column: 1 / -1; }
    .storage-settings-grid { grid-template-columns: 1fr; }
    .cron-job-row { grid-template-columns: 1fr; gap: 8px; }
    .sms-compose-modal { align-items: end; padding: 0; }
    .sms-compose-window { width: 100%; max-height: calc(100vh - env(safe-area-inset-top, 0px)); border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
    .quote-view-toast-actions .button { flex: 1 1 68px; }
}

@media (max-width: 640px) {
    .notes-board { grid-auto-columns: calc(100vw - 34px); }
    .board-card-modal { align-items: end; padding: 0; }
    .board-card-modal-card { width: 100%; max-height: calc(100vh - env(safe-area-inset-top, 0px)); border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
    .board-card-modal .grid-3 { grid-template-columns: 1fr; }
    .quote-message.is-staff { margin-left: 3%; }
    .quote-message.is-customer { margin-right: 3%; }
}
.board-card-modal[hidden] { display: none !important; }
.board-card-modal { position: fixed; inset: 0; z-index: 1290; display: grid; place-items: center; padding: 12px; background: rgba(2,6,23,.62); }
.board-card-modal-card { position: relative; padding: 18px; border: 1px solid #cbd5e1; border-radius: 14px; background: #fff; box-shadow: 0 24px 70px rgba(2,6,23,.28); }
.board-card-modal .modal-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 999px; background: #eef2f7; color: #0b2447; font-size: 22px; cursor: pointer; }
body.modal-open { overflow: hidden; }
html[data-theme="dark"] .board-card-modal-card { background: #111827; border-color: #475569; }
html[data-theme="dark"] .board-card-modal .modal-close { background: #1e293b; color: #f8fafc; }

/* v41 quote-view and customer-reply notification details. */
.quote-view-toast > p {
    margin: 7px 0 11px;
    color: #334155;
    font-size: 12px;
    line-height: 1.42;
}
.quote-view-toast .quote-toast-message {
    max-height: 86px;
    overflow: auto;
    padding: 8px 9px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    white-space: pre-wrap;
}
.quote-view-toast.is-quote-reply { border-left-color: #b92429; }
html[data-theme="dark"] .quote-view-toast > p { color: #e2e8f0 !important; }
html[data-theme="dark"] .quote-view-toast .quote-toast-message {
    border-color: #475569;
    background: #0f172a;
    color: #f8fafc;
}
@media (max-width: 640px) {
    .quote-view-toast-region { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
    .quote-view-toast-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quote-view-toast-actions .button { width: 100%; }
}
.quote-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }


/* Perth Tow Trucks CRM v42: compact email headers and disconnected mailbox cleanup. */
.communication-page-head {
    margin-bottom: 8px !important;
}
.email-disconnected-accounts {
    padding: 0 !important;
    overflow: hidden;
}
.email-disconnected-accounts > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    padding: 11px 14px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 850;
    cursor: pointer;
    list-style: none;
}
.email-disconnected-accounts > summary::-webkit-details-marker { display: none; }
.email-disconnected-accounts > summary::after {
    content: "Show";
    margin-left: auto;
    color: var(--muted);
    font-size: 11px;
    font-weight: 750;
}
.email-disconnected-accounts[open] > summary::after { content: "Hide"; }
.email-disconnected-accounts[open] > summary {
    border-bottom: 1px solid var(--line);
}
.email-disconnected-accounts > summary .history-count { margin-left: 0; }
.email-disconnected-accounts-body { padding: 12px 14px 14px; }
html[data-theme="dark"] .email-disconnected-accounts > summary {
    border-color: #475569 !important;
    color: #f8fafc !important;
}
html[data-theme="dark"] .email-disconnected-accounts > summary::after { color: #94a3b8 !important; }
@media (max-width: 980px) {
    .communication-page-head { margin-bottom: 4px !important; }
    .email-disconnected-accounts > summary { min-height: 42px; padding: 9px 10px; font-size: 13px; }
    .email-disconnected-accounts-body { padding: 9px 10px 10px; }
}


/* Perth Tow Trucks CRM v42: hidden-domain controls and reliable long-email scrolling. */
.communication-message-list,
.email-compose-editor textarea,
.communication-message-body,
.client-email-body {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}
.communication-message-list {
    scrollbar-gutter: stable;
}
.communication-message-body {
    max-height: min(64vh, 720px);
    overflow-y: auto;
    padding-right: 5px;
    scrollbar-gutter: stable;
}
.client-email-body {
    max-height: min(52vh, 520px);
    overflow-y: auto;
    padding-right: 5px;
}
.email-spam-domain-field {
    display: grid;
    gap: 6px;
    margin: 12px 0;
    font-weight: 750;
}
.email-spam-domain-field textarea {
    min-height: 94px;
    margin: 0;
    padding: 10px 11px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}
.email-spam-domain-field .small {
    font-weight: 500;
}
html[data-theme="dark"] .email-spam-domain-field textarea {
    border-color: #475569 !important;
    background: #0b1220 !important;
    color: #f8fafc !important;
}
@media (max-width: 980px) {
    .client-email-body { max-height: 44vh; }
}

/* ========================================================================
   Perth Tow Trucks CRM v44 — daily dashboard, mailbox archive/attachments,
   HTML signatures, + New menu and system statistics
   ======================================================================== */

/* Header controls and + New dropdown. */
.topbar-v40 .topbar-stats-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}
.topbar-v40 .topbar-stats-link:hover,
.topbar-v40 .topbar-stats-link.active,
.topbar-v40 .topbar-settings-link.active {
    background: rgba(255,255,255,.16);
    color: #fff;
    text-decoration: none;
}
.top-nav-new-dropdown > summary {
    border-color: rgba(255,255,255,.26) !important;
    background: #b92429 !important;
    color: #fff !important;
}
.top-nav-new-dropdown > summary:hover,
.top-nav-new-dropdown[open] > summary { background: #981f24 !important; }
.top-nav-new-menu { width: 240px; }
.top-nav-new-menu a,
.top-nav-new-menu button {
    display: grid !important;
    justify-items: start;
    gap: 2px;
    width: 100%;
    min-height: 48px;
    padding: 8px 10px !important;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #0b2447 !important;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.top-nav-new-menu a:hover,
.top-nav-new-menu a.active,
.top-nav-new-menu button:hover {
    background: #eef3f8 !important;
    color: #0b2447 !important;
}
.top-nav-new-menu span { font-size: 12.5px; font-weight: 850; }
.top-nav-new-menu small { color: #64748b; font-size: 10.5px; font-weight: 600; line-height: 1.3; }
.mobile-nav-stats.active,
.mobile-nav-settings.active { background: rgba(255,255,255,.15) !important; }

/* Daily landing dashboard. */
.daily-dashboard-head { align-items: center; }
.daily-refresh-state {
    align-self: center;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}
.daily-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
.daily-summary-grid > a {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 3px 8px;
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: #0b2447;
    text-decoration: none;
    box-shadow: 0 3px 11px rgba(15,23,42,.04);
}
.daily-summary-grid > a:hover { border-color: rgba(185,36,41,.4); box-shadow: 0 6px 18px rgba(15,23,42,.08); text-decoration: none; }
.daily-summary-grid span { align-self: center; font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .035em; }
.daily-summary-grid strong { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: #b92429; font-size: 26px; line-height: 1; }
.daily-summary-grid small { color: #64748b; font-size: 10.5px; line-height: 1.3; }
.daily-task-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.daily-task-card { min-width: 0; padding: 0; overflow: hidden; }
.daily-task-card-wide { grid-column: 1 / -1; }
.daily-task-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 66px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--line);
    background: #f8fafc;
}
.daily-task-card > header > div:first-child { display: flex; align-items: center; min-width: 0; gap: 10px; }
.daily-task-card h2 { margin: 0; color: #0b2447; font-size: 14px; font-weight: 900; }
.daily-task-card header p { margin: 2px 0 0; color: #64748b; font-size: 10.5px; line-height: 1.3; }
.daily-task-icon {
    display: inline-grid;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 9px;
    background: #b92429;
    color: #fff;
    font-size: 10.5px;
    font-weight: 900;
}
.daily-task-list { display: grid; }
.daily-task-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 11px 12px;
    border-bottom: 1px solid #edf0f4;
}
.daily-task-row:last-child { border-bottom: 0; }
.daily-task-main { display: grid; min-width: 0; gap: 3px; }
.daily-task-title { width: fit-content; max-width: 100%; overflow: hidden; color: #0b2447; font-size: 13px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.daily-task-main > span { color: #334155; font-size: 11.5px; line-height: 1.35; }
.daily-task-main > small { color: #64748b; font-size: 10.5px; }
.daily-task-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.daily-task-actions form { margin: 0; }
.daily-task-actions .button { min-height: 30px; height: 30px; padding: 0 8px; font-size: 11px; }
.daily-empty { padding: 22px 12px; color: #64748b; font-size: 12px; text-align: center; }

/* Email archive and provider-backed attachments. */
.email-archive-notice {
    margin: 9px 10px 0;
    padding: 9px 11px;
    border: 1px solid #f0c36b;
    border-radius: 9px;
    background: #fff8df;
    color: #6b4e0a;
    font-size: 11.5px;
    line-height: 1.4;
}
.communication-message-body {
    max-height: min(50vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 6px;
    scrollbar-gutter: stable;
}
.email-attachment-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}
.email-attachment-gallery.is-compact { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.email-attachment-image {
    display: grid;
    gap: 5px;
    min-width: 0;
    margin: 0;
    padding: 7px;
    border: 1px solid #dbe2ea;
    border-radius: 9px;
    background: #fff;
}
.email-attachment-image > a { display: block; min-height: 90px; overflow: hidden; border-radius: 6px; background: #eef2f7; }
.email-attachment-image img { display: block; width: 100%; height: 150px; object-fit: contain; }
.email-attachment-image figcaption { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; color: #475569; font-size: 10px; }
.email-attachment-image figcaption span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-attachment-image figcaption a { color: #0b2447; font-weight: 800; }
.email-attachment-file {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    min-height: 58px;
    padding: 8px 10px;
    border: 1px solid #dbe2ea;
    border-radius: 9px;
    background: #fff;
    color: #0b2447;
    text-decoration: none;
}
.email-attachment-file:hover { border-color: #b92429; text-decoration: none; }
.email-attachment-file-icon { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: #eef2f7; font-size: 17px; }
.email-attachment-file > span:last-child { display: grid; min-width: 0; gap: 2px; }
.email-attachment-file strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.email-attachment-file small { color: #64748b; font-size: 9.5px; }
.email-attachment-unavailable { margin-top: 9px; padding: 8px 9px; border: 1px dashed #cbd5e1; border-radius: 8px; color: #64748b; font-size: 10.5px; }

/* HTML signature management. */
.email-signature-html-preview {
    max-width: 100%;
    overflow: auto;
    color: #0f172a;
    font-size: 12px;
    line-height: 1.45;
}
.signature-html-panel {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}
.signature-html-panel iframe { width: 100%; min-height: 170px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }

/* Stats dashboard. */
.stats-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.stats-primary-card {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 11px rgba(15,23,42,.04);
}
.stats-primary-card span { color: #64748b; font-size: 10.5px; font-weight: 850; letter-spacing: .03em; text-transform: uppercase; }
.stats-primary-card strong { color: #b92429; font-size: 23px; line-height: 1.1; }
.stats-primary-card small { color: #64748b; font-size: 10.5px; line-height: 1.35; }
.stats-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; align-items: start; }
.stats-panel { min-width: 0; }
.stats-panel-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.stats-panel-head h2,
.stats-guidance h2 { margin: 0; color: #0b2447; font-size: 15px; font-weight: 900; }
.stats-panel-head p,
.stats-guidance p { margin: 3px 0 0; color: #64748b; font-size: 11px; }
.stats-panel-head > strong { color: #b92429; font-size: 11px; text-align: right; }
.stats-row-list { display: grid; }
.stats-row-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 8px 0; border-top: 1px solid #edf0f4; }
.stats-row-list span { color: #475569; font-size: 11.5px; }
.stats-row-list strong { color: #0b2447; font-size: 11.5px; text-align: right; }
.stats-health-meter { display: grid; gap: 6px; margin-top: 12px; }
.stats-health-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; }
.stats-health-label span { color: #475569; font-weight: 750; }
.stats-health-label strong { color: #0b2447; }
.stats-health-track { height: 8px; overflow: hidden; border-radius: 999px; background: #e2e8f0; }
.stats-health-track > span { display: block; height: 100%; border-radius: inherit; background: #15803d; }
.stats-health-meter.is-warning .stats-health-track > span { background: #d97706; }
.stats-health-meter.is-critical .stats-health-track > span { background: #b92429; }
.stats-note { margin: 12px 0 0; }
.stats-table-wrap { margin: 0; }
.stats-table th,
.stats-table td { padding: 8px 9px; font-size: 11px; }
.stats-table th:nth-child(2),
.stats-table td:nth-child(2),
.stats-table th:nth-child(3),
.stats-table td:nth-child(3) { text-align: right; }
.stats-table code { color: #0b2447; font-size: 10.5px; }
.stats-automation-list { display: grid; margin: 0; }
.stats-automation-list > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid #edf0f4; }
.stats-automation-list dt { color: #475569; font-size: 11.5px; font-weight: 800; }
.stats-automation-list dd { display: grid; gap: 2px; margin: 0; color: #0b2447; font-size: 11.5px; font-weight: 750; }
.stats-automation-list small { color: #64748b; font-size: 10px; font-weight: 500; line-height: 1.35; }
.stats-guidance { display: grid; grid-template-columns: minmax(180px, .35fr) minmax(0, 1fr); gap: 18px; }
.stats-guidance ul { display: grid; gap: 7px; margin: 0; padding-left: 20px; color: #334155; font-size: 11.5px; line-height: 1.4; }

/* Dark mode. */
html[data-theme="dark"] .top-nav-new-menu a,
html[data-theme="dark"] .top-nav-new-menu button { color: #f8fafc !important; }
html[data-theme="dark"] .top-nav-new-menu a:hover,
html[data-theme="dark"] .top-nav-new-menu a.active,
html[data-theme="dark"] .top-nav-new-menu button:hover { background: #1e293b !important; color: #fff !important; }
html[data-theme="dark"] .top-nav-new-menu small { color: #94a3b8; }
html[data-theme="dark"] .daily-summary-grid > a,
html[data-theme="dark"] .daily-task-card,
html[data-theme="dark"] .stats-primary-card,
html[data-theme="dark"] .stats-panel,
html[data-theme="dark"] .stats-guidance,
html[data-theme="dark"] .email-attachment-image,
html[data-theme="dark"] .email-attachment-file,
html[data-theme="dark"] .signature-html-panel { border-color: #475569; background: #111827; }
html[data-theme="dark"] .daily-task-card > header { border-color: #475569; background: #1e293b; }
html[data-theme="dark"] .daily-summary-grid span,
html[data-theme="dark"] .daily-task-card h2,
html[data-theme="dark"] .daily-task-title,
html[data-theme="dark"] .stats-panel-head h2,
html[data-theme="dark"] .stats-guidance h2,
html[data-theme="dark"] .stats-row-list strong,
html[data-theme="dark"] .stats-health-label strong,
html[data-theme="dark"] .stats-table code,
html[data-theme="dark"] .stats-automation-list dd,
html[data-theme="dark"] .email-attachment-file { color: #f8fafc; }
html[data-theme="dark"] .daily-summary-grid small,
html[data-theme="dark"] .daily-task-card header p,
html[data-theme="dark"] .daily-task-main > small,
html[data-theme="dark"] .daily-empty,
html[data-theme="dark"] .stats-primary-card span,
html[data-theme="dark"] .stats-primary-card small,
html[data-theme="dark"] .stats-panel-head p,
html[data-theme="dark"] .stats-guidance p,
html[data-theme="dark"] .stats-row-list span,
html[data-theme="dark"] .stats-health-label span,
html[data-theme="dark"] .stats-automation-list dt,
html[data-theme="dark"] .stats-automation-list small,
html[data-theme="dark"] .email-attachment-image figcaption,
html[data-theme="dark"] .email-attachment-file small { color: #cbd5e1; }
html[data-theme="dark"] .daily-task-main > span,
html[data-theme="dark"] .stats-guidance ul { color: #e2e8f0; }
html[data-theme="dark"] .daily-task-row,
html[data-theme="dark"] .stats-row-list > div,
html[data-theme="dark"] .stats-automation-list > div,
html[data-theme="dark"] .email-attachment-gallery { border-color: #374151; }
html[data-theme="dark"] .stats-health-track,
html[data-theme="dark"] .email-attachment-image > a,
html[data-theme="dark"] .email-attachment-file-icon { background: #0b1220; }
html[data-theme="dark"] .email-archive-notice { border-color: #92400e; background: #3f2b0a; color: #fde68a; }
html[data-theme="dark"] .email-attachment-unavailable { border-color: #475569; color: #cbd5e1; }
html[data-theme="dark"] .email-signature-html-preview { color: #e2e8f0; }

@media (max-width: 1180px) and (min-width: 981px) {
    .topbar-v40 .topbar-stats-link { padding-inline: 7px; font-size: 11.5px; }
    .daily-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .daily-summary-grid > a:nth-child(4),
    .daily-summary-grid > a:nth-child(5) { grid-column: span 1; }
}

@media (max-width: 980px) {
    .top-nav-new-menu { width: 100%; }
    .top-nav-new-menu a,
    .top-nav-new-menu button { min-height: 48px; }
    .daily-dashboard-head { display: grid !important; gap: 8px; }
    .daily-dashboard-head .actions { justify-content: space-between; }
    .daily-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .daily-summary-grid > a:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .daily-summary-grid > a { padding: 10px; }
    .daily-summary-grid strong { font-size: 22px; }
    .daily-task-grid { grid-template-columns: 1fr; gap: 9px; }
    .daily-task-card-wide { grid-column: auto; }
    .daily-task-card > header { min-height: 58px; padding: 9px 10px; }
    .daily-task-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px; }
    .daily-task-actions { justify-content: flex-start; }
    .daily-task-actions .button,
    .daily-task-actions form { flex: 1 1 85px; }
    .daily-task-actions form .button { width: 100%; }
    .communication-message-body { max-height: 58vh; }
    .email-attachment-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .email-attachment-image img { height: 120px; }
    .stats-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .stats-primary-card { padding: 11px; }
    .stats-primary-card strong { font-size: 20px; }
    .stats-detail-grid { grid-template-columns: 1fr; gap: 9px; }
    .stats-guidance { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 640px) {
    .daily-refresh-state { font-size: 10px; }
    .daily-summary-grid > a { min-height: 76px; }
    .daily-summary-grid small { font-size: 9.5px; }
    .daily-task-card > header .button { flex: 0 0 auto; }
    .email-attachment-gallery { grid-template-columns: 1fr; }
    .email-attachment-gallery.is-compact { grid-template-columns: 1fr; }
    .email-attachment-image { grid-template-columns: 92px minmax(0, 1fr); align-items: center; }
    .email-attachment-image > a { min-height: 70px; }
    .email-attachment-image img { height: 78px; }
    .email-attachment-image figcaption { grid-template-columns: minmax(0, 1fr); }
    .stats-overview-grid { grid-template-columns: 1fr 1fr; }
    .stats-overview-grid .stats-primary-card:nth-child(3),
    .stats-overview-grid .stats-primary-card:nth-child(4) { grid-column: span 1; }
    .stats-row-list > div { grid-template-columns: minmax(0, 1fr) minmax(92px, auto); }
    .stats-automation-list > div { grid-template-columns: 1fr; gap: 3px; }
}

/* ======================================================================
   Perth Tow Trucks CRM v43.1 — independent email pane scrolling
   Keep the conversation list and opened message thread inside the viewport,
   with each pane scrolling independently on desktop and mobile.
   ====================================================================== */
.communication-workspace {
    height: var(--pbm-email-workspace-height, clamp(480px, calc(100dvh - 230px), 900px)) !important;
    min-height: 420px !important;
    max-height: none !important;
    align-items: stretch !important;
    overflow: hidden !important;
}
.communication-thread-list {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #e2e8f0;
}
.communication-conversation {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
}
.communication-message-list {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #e2e8f0;
}
.communication-thread-list::-webkit-scrollbar,
.communication-message-list::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}
.communication-thread-list::-webkit-scrollbar-track,
.communication-message-list::-webkit-scrollbar-track {
    background: #eef2f7;
    border-left: 1px solid #dce3ef;
}
.communication-thread-list::-webkit-scrollbar-thumb,
.communication-message-list::-webkit-scrollbar-thumb {
    min-height: 44px;
    border: 2px solid #eef2f7;
    border-radius: 999px;
    background: #94a3b8;
}
.communication-thread-list::-webkit-scrollbar-thumb:hover,
.communication-message-list::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}
.communication-thread-list:focus-visible,
.communication-message-list:focus-visible {
    outline: 2px solid #b92429;
    outline-offset: -2px;
}
html[data-theme="dark"] .communication-thread-list,
html[data-theme="dark"] .communication-message-list {
    scrollbar-color: #64748b #111827;
}
html[data-theme="dark"] .communication-thread-list::-webkit-scrollbar-track,
html[data-theme="dark"] .communication-message-list::-webkit-scrollbar-track {
    border-left-color: #334155;
    background: #111827;
}
html[data-theme="dark"] .communication-thread-list::-webkit-scrollbar-thumb,
html[data-theme="dark"] .communication-message-list::-webkit-scrollbar-thumb {
    border-color: #111827;
    background: #64748b;
}
html[data-theme="dark"] .communication-thread-list::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .communication-message-list::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

@media (max-width: 980px) {
    .communication-workspace {
        display: block !important;
        height: var(--pbm-email-workspace-height, calc(100dvh - 168px)) !important;
        min-height: 300px !important;
        max-height: none !important;
        overflow: hidden !important;
    }
    .communication-thread-list {
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: scroll !important;
    }
    .communication-conversation {
        height: auto !important;
        max-height: none !important;
        overflow: hidden !important;
    }
    .communication-workspace.has-thread .communication-conversation {
        display: grid !important;
    }
    .communication-message-list {
        height: auto !important;
        max-height: none !important;
        overflow-y: scroll !important;
    }
}

/* ======================================================================
   Perth Tow Trucks CRM v43.2 — reliable user password reset
   ====================================================================== */
.user-password-reset-zone {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
    scroll-margin-top: 88px;
}
.user-password-reset-zone h3 {
    margin: 0 0 6px;
    color: #0b2447;
    font-size: 15px;
}
.user-password-reset-zone > p {
    margin: 0 0 12px;
    color: #334155;
    font-size: 12.5px;
    line-height: 1.45;
}
.user-password-reset-form .grid { margin-bottom: 0; }
.user-password-reset-form .button { justify-self: start; }
html[data-theme="dark"] .user-password-reset-zone {
    border-color: #475569;
    background: #111827;
}
html[data-theme="dark"] .user-password-reset-zone h3 { color: #f8fafc; }
html[data-theme="dark"] .user-password-reset-zone > p { color: #cbd5e1; }
@media (max-width: 680px) {
    .user-password-reset-zone { padding: 12px; }
    .user-password-reset-form .grid { grid-template-columns: 1fr; }
    .user-password-reset-form .button { width: 100%; }
}

/* ======================================================================
   Perth Tow Trucks CRM — quote response layout
   ====================================================================== */
.public-installation-preferences {
    display: grid;
    gap: 12px;
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
}
.public-installation-preferences h3,
.public-installation-preference-summary h3 { margin: 0; color: #0b2447; font-size: 16px; }
.public-installation-preferences .section-head-inline p { margin: 4px 0 0; max-width: 720px; line-height: 1.45; }
.required-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    background: #b92429;
    color: #fff;
    font-size: 10px;
    font-weight: 850;
    white-space: nowrap;
}
.public-installation-preference-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.public-installation-preference-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    min-width: 0;
    margin: 0;
    padding: 11px;
    border: 1px solid #d8e0eb;
    border-radius: 10px;
    background: #fff;
}
.public-installation-preference-row legend {
    padding: 0 5px;
    color: #0b2447;
    font-size: 12px;
    font-weight: 850;
}
.public-installation-preference-row label { display: grid; gap: 4px; min-width: 0; }
.public-installation-preference-row label > span {
    color: #334155;
    font-size: 11px;
    font-weight: 800;
}
.public-installation-preference-row input,
.public-installation-preference-row select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0 11px;
    border: 1px solid #aebccc;
    border-radius: 9px;
    background: #fff;
    color: #172033;
    font: inherit;
    font-size: 14px;
}
.public-installation-preference-row input:focus,
.public-installation-preference-row select:focus {
    border-color: #b92429;
    outline: 2px solid rgba(185,36,41,.16);
    outline-offset: 1px;
}
.public-installation-preference-summary {
    margin: 14px 0 4px;
    padding: 12px;
    border: 1px solid #86efac;
    border-radius: 10px;
    background: rgba(255,255,255,.7);
}
.public-installation-preference-summary ol { display: grid; gap: 5px; margin: 9px 0; padding-left: 22px; }
.public-installation-preference-summary li { color: #14532d; font-weight: 750; }
.public-installation-preference-summary small { color: #166534; }
.quote-installation-preferences-card { border-left: 4px solid #b92429; }
.quote-installation-preference-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 12px;
}
.quote-installation-preference-list article {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 12px;
    border: 1px solid #dbe3ed;
    border-radius: 10px;
    background: #f8fafc;
}
.quote-installation-preference-list span {
    color: #64748b;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.quote-installation-preference-list strong { color: #0b2447; font-size: 13.5px; line-height: 1.35; }
html[data-theme="dark"] .quote-installation-preferences-card,
html[data-theme="dark"] .quote-installation-preference-list article {
    border-color: #475569;
    background: #111827;
}
html[data-theme="dark"] .quote-installation-preference-list span { color: #94a3b8; }
html[data-theme="dark"] .quote-installation-preference-list strong { color: #f8fafc; }

@media (max-width: 760px) {
    .public-installation-preferences { padding: 11px; }
    .public-installation-preferences .section-head-inline { display: grid; gap: 8px; }
    .required-pill { justify-self: start; }
    .public-installation-preference-grid,
    .quote-installation-preference-list { grid-template-columns: minmax(0, 1fr); }
    .public-installation-preference-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: end;
    }
    .public-installation-preference-row legend { grid-column: 1 / -1; }
    .public-installation-preference-row input,
    .public-installation-preference-row select { min-height: 44px; font-size: 16px; }
}

@media (max-width: 430px) {
    .public-installation-preference-row { grid-template-columns: minmax(0, 1fr); }
}

@media print {
    .public-installation-preference-summary { break-inside: avoid; }
}

/* Perth Tow Trucks CRM v43.6 — restore established header styling. */
.topbar-v40 .top-nav-categories-dropdown > summary,
.topbar-v40 .topbar-stats-link {
    border-color: transparent !important;
    background: transparent !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: none !important;
}
.topbar-v40 .top-nav-categories-dropdown > summary:hover,
.topbar-v40 .top-nav-categories-dropdown[open] > summary,
.topbar-v40 .top-nav-categories-dropdown.is-active > summary,
.topbar-v40 .topbar-stats-link:hover,
.topbar-v40 .topbar-stats-link.active {
    border-color: transparent !important;
    background: rgba(255,255,255,.16) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
@media (max-width: 980px) {
    .topbar-v40 .top-nav-categories-dropdown > summary {
        width: 100% !important;
        justify-content: flex-start !important;
    }
    .mobile-nav-stats {
        border-color: transparent !important;
        background: transparent !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }
    .mobile-nav-stats:hover, .mobile-nav-stats.active {
        background: rgba(255,255,255,.15) !important;
    }
}

/* ========================================================================
   Perth Tow Trucks CRM v43.7 — visual recovery for Dashboard, Stats and Users
   Restores the established PBM card/grid presentation after mixed CSS builds.
   ======================================================================== */

/* Daily landing Dashboard. */
.daily-dashboard-head {
    align-items: center !important;
}
.daily-dashboard-refresh {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--muted) !important;
    font-size: 13px !important;
}
.daily-task-summary {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 0 18px !important;
}
.daily-task-summary > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-width: 0 !important;
    min-height: 70px !important;
    padding: 14px 16px !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    background: var(--card) !important;
    box-shadow: var(--shadow) !important;
    color: var(--ink) !important;
    text-decoration: none !important;
}
.daily-task-summary > a:hover {
    border-color: #b92429 !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}
.daily-task-summary span {
    min-width: 0 !important;
    color: var(--ink) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}
.daily-task-summary strong {
    flex: 0 0 auto !important;
    color: #b92429 !important;
    font-size: 27px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}
.daily-task-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: start !important;
}
.daily-task-panel {
    min-width: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.daily-task-panel + .daily-task-panel {
    margin-top: 0 !important;
}
.daily-task-panel > header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 56px !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--line) !important;
    background: #f8fafc !important;
}
.daily-task-panel > header > div {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
}
.daily-task-panel h2 {
    margin: 0 !important;
    color: var(--ink) !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
}
.daily-task-panel > header > a {
    flex: 0 0 auto !important;
    color: var(--primary) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}
.daily-task-panel > header > a:hover {
    color: #b92429 !important;
    text-decoration: underline !important;
}
.task-number {
    display: inline-flex !important;
    flex: 0 0 26px !important;
    width: 26px !important;
    height: 26px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background: #b92429 !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}
.daily-task-hint {
    margin: 0 !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--line) !important;
    color: var(--muted) !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
}
.daily-task-panel .daily-task-row {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-width: 0 !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--line) !important;
}
.daily-task-panel .daily-task-row:last-child {
    border-bottom: 0 !important;
}
.daily-task-panel .daily-task-row > div:first-child {
    min-width: 0 !important;
}
.daily-task-panel .daily-task-row strong {
    display: block !important;
    min-width: 0 !important;
    color: var(--ink) !important;
    font-size: 13.5px !important;
    font-weight: 850 !important;
    line-height: 1.3 !important;
}
.daily-task-panel .daily-task-row strong a {
    color: var(--ink) !important;
    text-decoration: none !important;
}
.daily-task-panel .daily-task-row strong a:hover {
    color: #b92429 !important;
    text-decoration: underline !important;
}
.daily-task-panel .daily-task-row span {
    display: block !important;
    max-width: 52ch !important;
    overflow: hidden !important;
    color: var(--muted) !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.daily-task-panel .daily-task-row .actions {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 6px !important;
}
.daily-task-panel .daily-task-row > form {
    flex: 0 0 auto !important;
    margin: 0 !important;
}
.daily-task-panel .daily-empty {
    padding: 20px 16px !important;
    color: var(--muted) !important;
    font-size: 13px !important;
    text-align: left !important;
}

/* System Stats page. */
.stats-dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin: 0 0 18px !important;
}
.stats-dashboard-grid .metric {
    display: grid !important;
    gap: 5px !important;
    min-width: 0 !important;
    min-height: 116px !important;
    padding: 16px !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    background: var(--card) !important;
    box-shadow: var(--shadow) !important;
}
.stats-dashboard-grid .metric span {
    color: var(--muted) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}
.stats-dashboard-grid .metric strong {
    color: #b92429 !important;
    font-size: clamp(23px, 2.5vw, 32px) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere !important;
}
.stats-dashboard-grid .metric small {
    align-self: end !important;
    color: var(--muted) !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
}
.stats-operations-card {
    margin: 0 0 18px !important;
}
.stats-operations-grid {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 10px !important;
}
.stats-operations-grid > div {
    min-width: 0 !important;
    padding: 12px !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    background: var(--card) !important;
}
.stats-operations-grid span {
    display: block !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}
.stats-operations-grid strong {
    display: block !important;
    margin-top: 6px !important;
    color: var(--ink) !important;
    font-size: 21px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}
.stats-operations-grid .is-warning {
    border-color: #f59e0b !important;
    background: #fff7ed !important;
}
.stats-operations-grid .is-warning strong {
    color: #b45309 !important;
}
.stats-detail-grid {
    align-items: start !important;
    gap: 16px !important;
}
.stats-detail-grid > .card {
    min-width: 0 !important;
    margin-top: 0 !important;
}
.stats-capacity-bar {
    height: 14px !important;
    margin: 14px 0 18px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: #e2e8f0 !important;
}
.stats-capacity-bar span {
    display: block !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: #b92429 !important;
}
.stats-table-list {
    display: grid !important;
    gap: 0 !important;
}
.stats-table-list > div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--line) !important;
    color: var(--ink) !important;
    font-size: 13px !important;
}
.stats-table-list > div:last-child {
    border-bottom: 0 !important;
}
.stats-table-list > div span {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}
.stats-table-list > div strong {
    flex: 0 0 auto !important;
    color: var(--ink) !important;
}
.stats-quota-form {
    display: grid !important;
    grid-template-columns: minmax(180px, 1fr) auto !important;
    align-items: end !important;
    gap: 10px !important;
    margin-top: 14px !important;
}
.stats-quota-form label {
    margin: 0 !important;
}
.stats-quota-form .button {
    min-height: 38px !important;
}

/* Stack the Users & Permissions row actions in the requested order. */
.users-table .user-row-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 6px !important;
    min-width: 126px !important;
}
.users-table .user-row-actions .button {
    display: inline-flex !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

/* Dark-mode parity. */
html[data-theme="dark"] .daily-task-summary > a,
html[data-theme="dark"] .daily-task-panel,
html[data-theme="dark"] .stats-dashboard-grid .metric,
html[data-theme="dark"] .stats-operations-grid > div,
html[data-theme="dark"] .stats-detail-grid > .card {
    border-color: #475569 !important;
    background: #111827 !important;
    color: #f8fafc !important;
}
html[data-theme="dark"] .daily-task-panel > header {
    border-color: #475569 !important;
    background: #1e293b !important;
}
html[data-theme="dark"] .daily-task-summary span,
html[data-theme="dark"] .daily-task-panel h2,
html[data-theme="dark"] .daily-task-panel .daily-task-row strong,
html[data-theme="dark"] .daily-task-panel .daily-task-row strong a,
html[data-theme="dark"] .stats-operations-grid strong,
html[data-theme="dark"] .stats-table-list > div,
html[data-theme="dark"] .stats-table-list > div strong {
    color: #f8fafc !important;
}
html[data-theme="dark"] .daily-task-hint,
html[data-theme="dark"] .daily-task-panel .daily-task-row {
    border-color: #374151 !important;
}
html[data-theme="dark"] .daily-task-panel .daily-task-row span,
html[data-theme="dark"] .daily-task-hint,
html[data-theme="dark"] .daily-task-panel .daily-empty,
html[data-theme="dark"] .stats-dashboard-grid .metric span,
html[data-theme="dark"] .stats-dashboard-grid .metric small,
html[data-theme="dark"] .stats-operations-grid span {
    color: #cbd5e1 !important;
}
html[data-theme="dark"] .stats-capacity-bar {
    background: #334155 !important;
}
html[data-theme="dark"] .stats-operations-grid .is-warning {
    border-color: #d97706 !important;
    background: #422006 !important;
}
html[data-theme="dark"] .stats-operations-grid .is-warning strong {
    color: #fbbf24 !important;
}

@media (max-width: 1280px) {
    .stats-operations-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 980px) {
    .daily-task-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }
    .daily-task-summary > a:last-child {
        grid-column: 1 / -1 !important;
    }
    .daily-task-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .daily-task-panel .daily-task-row {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
    .daily-task-panel .daily-task-row .actions {
        width: 100% !important;
        justify-content: stretch !important;
    }
    .daily-task-panel .daily-task-row .actions .button,
    .daily-task-panel .daily-task-row > .button,
    .daily-task-panel .daily-task-row > form {
        flex: 1 1 0 !important;
    }
    .daily-task-panel .daily-task-row > form .button {
        width: 100% !important;
    }
    .daily-task-panel .daily-task-row span {
        max-width: 100% !important;
        white-space: normal !important;
    }
    .stats-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .stats-detail-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 720px) {
    .stats-operations-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    .stats-operations-grid > div {
        padding: 10px !important;
    }
    .stats-quota-form {
        grid-template-columns: 1fr !important;
    }
    .stats-quota-form .button {
        width: 100% !important;
    }
}

@media (max-width: 520px) {
    .daily-dashboard-head {
        align-items: flex-start !important;
    }
    .daily-dashboard-refresh span {
        display: none !important;
    }
    .daily-task-summary > a {
        min-height: 60px !important;
        padding: 11px 12px !important;
    }
    .daily-task-summary strong {
        font-size: 23px !important;
    }
    .daily-task-panel > header {
        padding: 12px !important;
    }
    .daily-task-hint,
    .daily-task-panel .daily-task-row,
    .daily-task-panel .daily-empty {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }
    .stats-dashboard-grid .metric {
        min-height: 104px !important;
        padding: 13px !important;
    }
    .users-table .user-row-actions {
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* v43.7 — keep drawer-only controls out of the desktop navigation. */
.mobile-nav-stats,
.mobile-nav-settings,
.mobile-nav-logout {
    display: none !important;
}
@media (max-width: 980px) {
    .mobile-nav-stats,
    .mobile-nav-settings,
    .mobile-nav-logout {
        display: flex !important;
    }
}

/* Perth Tow Trucks — live GPS towing quote calculator */
.tow-quote-calculator {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    background: linear-gradient(145deg, var(--card), color-mix(in srgb, var(--accent) 7%, var(--card)));
}
.tow-calculator-head { align-items: flex-start; }
.tow-calculator-head h2 { margin: 2px 0 4px; }
.tow-gps-status {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.tow-gps-status[data-state="ready"] { color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, var(--line)); }
.tow-gps-status[data-state="error"] { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.tow-calculator-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(220px, .8fr);
    gap: 12px;
}
.tow-extra-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px 14px;
    margin: 14px 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--card) 92%, transparent);
}
.tow-extra-options .checkbox-label { margin: 0; align-items: flex-start; }
.tow-calculator-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.tow-calculator-result {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--success) 10%, var(--card));
    color: var(--success);
    font-weight: 750;
}
.tow-calculator-result.is-error { background: color-mix(in srgb, var(--danger) 9%, var(--card)); color: var(--danger); }
.tow-quote-calculator.is-compact { margin: 16px 0; box-shadow: none; }
.tow-quote-calculator.is-compact .tow-calculator-head h2 { font-size: 18px; }
@media (max-width: 900px) {
    .tow-calculator-grid { grid-template-columns: 1fr; }
    .tow-gps-status { white-space: normal; }
}
.tow-rate-settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.settings-fieldset { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.settings-fieldset legend { padding: 0 6px; font-weight: 850; }
.settings-fieldset label { display: block; margin-top: 10px; }
@media (max-width: 850px) { .tow-rate-settings-grid { grid-template-columns: 1fr; } }