:root {
    --dbm-bg: #ffffff;
    --dbm-surface: rgba(255, 255, 255, 0.94);
    --dbm-surface-muted: #f8fafc;
    --dbm-border: #dbe5f0;
    --dbm-text: #102033;
    --dbm-muted: #64748b;
    --dbm-primary: #0f6cbd;
    --dbm-primary-strong: #07599f;
    --dbm-accent: #12a3b4;
    --dbm-success: #15803d;
    --dbm-danger: #c2413b;
    --dbm-focus: #f8cf57;
    --dbm-shadow: 0 12px 32px rgba(15, 48, 79, 0.08);
    --dbm-shadow-strong: 0 20px 52px rgba(15, 48, 79, 0.14);
    --dbm-radius: 18px;
}

html {
    background: #ffffff;
    scroll-behavior: smooth;
}

body {
    color: var(--dbm-text);
    background: #ffffff;
}

/* Login entry card: credentials stay one deliberate tap away while the saved
   one-click account remains available inside the same form grid. */
#loginContainer .login-reveal-card {
    position: relative;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 88px;
    padding: 14px 16px;
    overflow: hidden;
    border: 1px solid #cfe0f2;
    border-radius: 18px;
    color: #123154;
    background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 55%, #f3fbff 100%);
    box-shadow: 0 12px 28px rgba(25, 84, 140, 0.1);
    cursor: pointer;
    text-align: left;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

#loginContainer .login-reveal-card:hover {
    border-color: #8fc4ef;
    box-shadow: 0 16px 34px rgba(25, 84, 140, 0.16);
    transform: translateY(-1px);
}

#loginContainer .login-remember-options {
    display: grid;
    gap: 6px;
}

#loginContainer .login-remember-options > .field {
    margin: 0;
}

#loginContainer .login-reveal-visual {
    position: relative;
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border-radius: 17px;
    background: linear-gradient(145deg, #0f6cbd, #159aae);
    box-shadow: 0 9px 20px rgba(15, 108, 189, 0.24);
}

#loginContainer .login-reveal-orbit {
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    animation: dbmLoginOrbit 3.2s linear infinite;
}

#loginContainer .login-reveal-orbit::after {
    content: "";
    position: absolute;
    top: -3px;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
}

#loginContainer .login-reveal-lock {
    position: relative;
    width: 20px;
    height: 16px;
    margin-top: 7px;
    border-radius: 5px;
    background: #ffffff;
}

#loginContainer .login-reveal-lock::before {
    content: "";
    position: absolute;
    left: 4px;
    bottom: 12px;
    width: 10px;
    height: 10px;
    border: 2px solid #ffffff;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}

#loginContainer .login-reveal-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

#loginContainer .login-reveal-copy strong {
    font-size: 17px;
    line-height: 1.2;
}

#loginContainer .login-reveal-copy small {
    color: #60758e;
    font-size: 12px;
    line-height: 1.4;
}

#loginContainer .login-reveal-arrow {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    color: #0f6cbd;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 108, 189, 0.12);
    transition: transform 180ms ease;
}

#loginContainer .login-reveal-arrow::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    border-radius: 1px;
    transform: rotate(45deg);
}

#loginContainer .form-card:not(.login-credentials-collapsed) .login-reveal-arrow {
    transform: rotate(180deg);
}

#loginContainer .login-credentials-collapsed .form-grid > :not(.login-reveal-card):not(#quickLoginBox) {
    display: none !important;
}

@keyframes dbmLoginOrbit {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    #loginContainer .login-reveal-orbit { animation: none; }
    #loginContainer .login-reveal-card,
    #loginContainer .login-reveal-arrow { transition: none; }
}

@media (min-width: 1024px) {
    #loginContainer .login-remember-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
        gap: 12px;
    }

    #loginContainer .login-remember-options > .field label {
        justify-content: center;
        min-height: 38px;
        padding: 7px 10px;
        border: 1px solid #dde7f2;
        border-radius: 10px;
        background: #fbfdff;
        white-space: nowrap;
    }
}

@media (max-width: 600px) {
    /* Mobile login opens ready for use; desktop keeps the deliberate reveal. */
    #loginContainer .login-credentials-collapsed .form-grid > :not(.login-reveal-card):not(#quickLoginBox) {
        display: block !important;
    }

    #loginContainer .login-reveal-card {
        grid-template-columns: 50px minmax(0, 1fr) 28px;
        min-height: 68px;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 15px;
    }

    #loginContainer .login-reveal-visual {
        width: 48px;
        height: 48px;
        border-radius: 15px;
    }

    #loginContainer .login-reveal-visual::before {
        content: "";
        position: absolute;
        inset: 3px;
        z-index: 0;
        border: 1px dashed rgba(255, 255, 255, 0.76);
        border-top-color: #a5f3fc;
        border-right-color: rgba(165, 243, 252, 0.28);
        border-radius: 50%;
        filter: drop-shadow(0 0 4px rgba(165, 243, 252, 0.55));
        animation: dbmMobileProtectionOrbit 4.2s linear infinite;
    }

    #loginContainer .login-reveal-orbit {
        display: block;
        inset: 6px 7px 7px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.72);
        border-radius: 12px 12px 16px 16px;
        clip-path: polygon(50% 0, 92% 16%, 86% 68%, 50% 100%, 14% 68%, 8% 16%);
        animation: dbmMobileSecurityShield 2.8s ease-in-out infinite;
    }

    #loginContainer .login-reveal-orbit::before {
        content: "";
        position: absolute;
        inset: -45% 2px auto;
        height: 40%;
        border-radius: 50%;
        background: linear-gradient(180deg, transparent, rgba(151, 244, 255, 0.82), transparent);
        filter: blur(1px);
        animation: dbmMobileSecurityScan 2.8s ease-in-out infinite;
    }

    #loginContainer .login-reveal-orbit::after {
        top: auto;
        bottom: 4px;
        left: 50%;
        width: 5px;
        height: 5px;
        transform: translateX(-50%);
        background: #9ff6ff;
        box-shadow: 0 0 0 3px rgba(159, 246, 255, 0.15), 0 0 12px rgba(159, 246, 255, 0.95);
        animation: dbmMobileSecuritySignal 2.8s ease-in-out infinite;
    }

    #loginContainer .login-reveal-lock {
        width: 17px;
        height: 14px;
        margin-top: 6px;
        animation: dbmMobileLockTrust 2.8s ease-in-out infinite;
    }

    #loginContainer .login-reveal-lock::before {
        left: 3px;
        bottom: 11px;
        width: 9px;
        height: 9px;
    }

    #loginContainer .login-reveal-copy strong {
        font-size: 15px;
    }

    #loginContainer .login-reveal-copy small {
        font-size: 11px;
    }

    #loginContainer .login-reveal-arrow {
        width: 28px;
        height: 28px;
    }

    #loginContainer .form-card:not(.login-credentials-collapsed) .login-reveal-arrow {
        animation: none;
    }

    #loginContainer .form-card:not(.login-credentials-collapsed) .form-grid {
        gap: 10px !important;
    }

    #loginContainer .form-card:not(.login-credentials-collapsed) .field {
        margin-bottom: 2px !important;
    }

    #loginContainer .form-card:not(.login-credentials-collapsed) .login-reveal-card {
        min-height: 54px;
    }
}

@keyframes dbmMobileSecurityShield {
    0%, 100% { opacity: 0.72; transform: scale(0.94); }
    45%, 60% { opacity: 1; transform: scale(1); }
}

@keyframes dbmMobileProtectionOrbit {
    to { transform: rotate(360deg); }
}

@keyframes dbmMobileSecurityScan {
    0%, 18% { transform: translateY(0); opacity: 0; }
    35% { opacity: 0.9; }
    68%, 100% { transform: translateY(42px); opacity: 0; }
}

@keyframes dbmMobileSecuritySignal {
    0%, 58% { opacity: 0.35; transform: translateX(-50%) scale(0.72); }
    72%, 88% { opacity: 1; transform: translateX(-50%) scale(1.12); }
    100% { opacity: 0.35; transform: translateX(-50%) scale(0.72); }
}

@keyframes dbmMobileLockTrust {
    0%, 42%, 100% { transform: scale(1); }
    55% { transform: scale(1.08); }
    68% { transform: scale(1); }
}

@keyframes dbmMobileLoginSheen {
    0%, 100% { background-position: 0 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes dbmMobileLoginPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 7px 16px rgba(15, 108, 189, 0.2); }
    50% { transform: scale(1.05); box-shadow: 0 9px 22px rgba(15, 108, 189, 0.3); }
}

@keyframes dbmMobileLoginArrow {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3px); }
}

@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
    #loginContainer .login-reveal-card,
    #loginContainer .login-reveal-visual,
    #loginContainer .login-reveal-visual::before,
    #loginContainer .login-reveal-arrow,
    #loginContainer .login-reveal-orbit,
    #loginContainer .login-reveal-orbit::before,
    #loginContainer .login-reveal-orbit::after,
    #loginContainer .login-reveal-lock {
        animation: none;
    }
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--dbm-focus) !important;
    outline-offset: 2px;
}

.page,
#searchHubPage .page {
    width: min(100%, 1180px);
    max-width: 1180px !important;
    padding: 14px clamp(14px, 3vw, 32px) 112px !important;
}

.hero {
    top: max(8px, env(safe-area-inset-top));
    border: 1px solid rgba(255, 255, 255, 0.22);
    background:
        radial-gradient(circle at 12% -20%, rgba(255, 255, 255, 0.24), transparent 42%),
        linear-gradient(125deg, #07599f 0%, #0f6cbd 52%, #0d8797 100%);
    box-shadow: 0 16px 38px rgba(7, 89, 159, 0.2);
}

.glass-card,
.card,
.sheet,
#accountModal > div,
#logoutModal > div {
    border: 1px solid rgba(219, 229, 240, 0.9) !important;
    background: var(--dbm-surface) !important;
    box-shadow: var(--dbm-shadow) !important;
    backdrop-filter: blur(18px);
}

.glass-card,
.card,
.form-card,
.list-card {
    border-radius: var(--dbm-radius) !important;
}

.card {
    padding: clamp(16px, 2.5vw, 26px);
}

.form-card,
.list-card {
    padding: clamp(16px, 2.4vw, 24px) !important;
}

.section-head,
.list-top {
    margin-bottom: 18px;
}

.section-title {
    color: var(--dbm-text);
    font-size: clamp(18px, 2vw, 22px);
    letter-spacing: -0.02em;
}

.section-icon {
    border: 1px solid #d7e7f7;
    background: #edf6ff;
    color: var(--dbm-primary);
    box-shadow: none;
}

.stats-row {
    gap: 12px;
    margin: 14px 0 18px;
}

.stat-card {
    min-height: 126px;
    justify-content: center;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.86);
    box-shadow: 0 10px 24px rgba(15, 48, 79, 0.07);
}

.stat-label {
    color: var(--dbm-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.stat-value,
.stat-blue .stat-value,
.stat-green .stat-value {
    color: var(--dbm-text);
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 800;
    letter-spacing: -0.04em;
}

.stat-sub {
    color: var(--dbm-muted);
}

#rNewCustomers {
    color: var(--dbm-primary-strong);
    font-size: clamp(26px, 3vw, 34px);
}

#rNewCustomersChange {
    min-height: 20px;
    margin-top: 7px;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.4;
}

.stat-blue {
    background: linear-gradient(145deg, #f4f9ff, #e5f2ff);
}

.stat-green {
    background: linear-gradient(145deg, #f2fbf7, #e1f5ec);
}

.stat-purple {
    background: linear-gradient(145deg, #faf7ff, #eee8ff);
}

.field {
    gap: 7px;
}

.field label {
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.input-wrap input,
.input-wrap select,
.field > input,
.field > select,
.field textarea,
.toolbar input {
    min-height: 48px;
    border: 1px solid #cbd8e6 !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: var(--dbm-text);
    box-shadow: 0 1px 2px rgba(15, 48, 79, 0.03);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.input-wrap input:hover,
.input-wrap select:hover,
.field > input:hover,
.field > select:hover,
.field textarea:hover,
.toolbar input:hover {
    border-color: #9fb8d2 !important;
}

.input-wrap input:focus,
.input-wrap select:focus,
.field > input:focus,
.field > select:focus,
.field textarea:focus,
.toolbar input:focus {
    border-color: var(--dbm-primary) !important;
    box-shadow: 0 0 0 4px rgba(15, 108, 189, 0.12) !important;
}

.input-icon {
    color: #557089;
    filter: grayscale(0.15);
}

.btn,
.primary-btn,
.secondary-btn,
.hero-icon-btn,
.mini-btn,
.icon-btn {
    border-radius: 12px;
    font-weight: 750;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.btn-primary {
    background: linear-gradient(135deg, var(--dbm-primary), var(--dbm-primary-strong));
    box-shadow: 0 10px 22px rgba(15, 108, 189, 0.2);
}

.primary-btn {
    border: 0;
    background: linear-gradient(135deg, var(--dbm-primary), var(--dbm-primary-strong));
    color: #fff;
    box-shadow: 0 10px 22px rgba(15, 108, 189, 0.2);
}

.secondary-btn {
    border: 1px solid var(--dbm-border);
    background: #fff;
    color: #334155;
}

.hero-icon-btn {
    min-width: 44px;
    min-height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.btn-secondary,
.mini-btn,
.icon-btn {
    border: 1px solid var(--dbm-border);
    background: #fff;
    color: #334155;
    box-shadow: 0 4px 12px rgba(15, 48, 79, 0.05);
}

.card input:not([type="checkbox"]):not([type="radio"]),
.card select,
.card textarea {
    border: 1px solid #cbd8e6;
    border-radius: 12px;
    background: #fff;
    color: var(--dbm-text);
}

.card input:not([type="checkbox"]):not([type="radio"]):focus,
.card select:focus,
.card textarea:focus {
    border-color: var(--dbm-primary);
    box-shadow: 0 0 0 4px rgba(15, 108, 189, 0.12);
}

.btn:hover:not(:disabled),
.mini-btn:hover:not(:disabled),
.icon-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #1178cf, var(--dbm-primary));
}

.status-card.show {
    border-radius: 12px;
    box-shadow: none;
}

.toolbar {
    gap: 10px;
}

.toolbar .input-wrap {
    width: 100%;
}

.entry-list,
#appointmentsList {
    gap: 14px;
}

.payment-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 2px;
    scrollbar-width: thin;
}

.payment-filter {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 7px 11px;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    background: #eef2ff;
    color: #334155;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.payment-filter:hover {
    border-color: #91b8dc;
    background: #e4f1ff;
}

.payment-filter[aria-pressed="true"] {
    border-color: var(--dbm-primary);
    background: var(--dbm-primary);
    color: #fff;
    box-shadow: 0 5px 14px rgba(15, 108, 189, 0.2);
}

.payment-filter[aria-pressed="true"]::before {
    content: "✓ ";
}

.payment-filter:active {
    transform: scale(0.98);
}

.reason-chip {
    min-height: 38px;
    cursor: pointer;
}

.reason-chip[aria-pressed="true"] {
    border-color: var(--dbm-primary) !important;
    background: var(--dbm-primary) !important;
    color: #fff !important;
    box-shadow: 0 5px 14px rgba(15, 108, 189, 0.18);
}

#serviceForm .field > label,
#serviceForm #reasonLabel {
    color: #334155;
    font-size: 13px;
    font-weight: 750;
}

#serviceForm input[aria-invalid="true"],
#serviceForm select[aria-invalid="true"],
#editForm input[aria-invalid="true"],
#editForm select[aria-invalid="true"] {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1) !important;
}

.entry-card,
.entry-item,
.search-result-row {
    border: 1px solid var(--dbm-border) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 7px 20px rgba(15, 48, 79, 0.06);
}

.entry-card:hover,
.entry-item:hover,
.search-result-row:hover {
    border-color: #b8cde2 !important;
    box-shadow: 0 12px 28px rgba(15, 48, 79, 0.1);
}

.entry-item[role="listitem"] {
    min-width: 0;
}

.entry-item .edit-btn:focus-visible,
.entry-item .action-btn:focus-visible,
.entry-item .cost-btn:focus-visible,
.payment-filter:focus-visible {
    outline: 3px solid rgba(15, 108, 189, 0.28);
    outline-offset: 2px;
}

#searchHubResults {
    min-height: 220px;
    overflow-x: auto;
}

.search-results-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.search-results-list:not(.search-results-list--carwash) {
    --search-results-columns:
        minmax(112px, 1.1fr)
        minmax(128px, 1.25fr)
        minmax(108px, 1fr)
        minmax(112px, 1fr)
        minmax(92px, 0.85fr)
        minmax(112px, 0.95fr);
}

.search-results-list--carwash {
    --search-results-columns:
        minmax(108px, 1.05fr)
        minmax(120px, 1.15fr)
        minmax(108px, 0.95fr)
        minmax(92px, 0.85fr)
        minmax(168px, 1.55fr)
        minmax(108px, 0.95fr)
        minmax(92px, 0.8fr)
        minmax(112px, 0.95fr);
}

.search-results-head {
    display: none;
}

.search-result-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 16px;
    align-items: center;
}

.search-result-cell {
    min-width: 0;
    color: #40546a;
    font-size: 14px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-cell--vehicle {
    color: var(--dbm-text);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.search-result-cell--service {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.membership-expiry-badge {
    display: block;
    margin-top: 3px;
    color: #0f766e;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
}

.search-result-cell--amount {
    color: var(--dbm-success);
    font-size: 16px;
    font-weight: 800;
}

.search-result-cell--payment {
    justify-self: start;
}

.search-result-payment {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    background: #edf6ff;
    color: var(--dbm-primary-strong);
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .search-results-list:not(.search-results-list--carwash) {
        min-width: 820px;
    }

    .search-results-list--carwash {
        min-width: 1080px;
    }

    .search-results-head,
    .search-result-row {
        display: grid;
        grid-template-columns: var(--search-results-columns);
        gap: 12px;
        align-items: center;
        padding: 12px 16px;
    }

    .search-results-head {
        display: grid;
        padding: 0 16px 6px;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .search-results-head .search-result-cell {
        color: #64748b;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .search-results-head .search-result-cell--vehicle,
    .search-results-head .search-result-cell--amount {
        color: #64748b;
        font-size: 11px;
        font-weight: 800;
    }

    .search-result-cell--vehicle {
        font-size: 15px;
    }

    .search-result-cell--payment {
        justify-self: end;
    }
}

.empty-state {
    min-height: 180px;
    display: grid;
    place-content: center;
    border: 1px dashed #b9cadc;
    background: #f9fbfd;
}

.loading-state {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--dbm-muted);
    font-weight: 700;
}

.loading-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid #d8e6f3;
    border-top-color: var(--dbm-primary);
    border-radius: 50%;
    animation: dbm-spin 0.8s linear infinite;
}

@keyframes dbm-spin {
    to {
        transform: rotate(360deg);
    }
}

.count-badge,
.pill,
.pending-pill {
    border: 1px solid #d7e7f7;
    background: #edf6ff;
    color: var(--dbm-primary-strong);
}

.report-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scrollbar-width: thin;
}

.report-tab {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.report-tab.active {
    border-color: #fff;
    background: #fff;
    color: var(--dbm-primary-strong);
    box-shadow: 0 6px 18px rgba(7, 89, 159, 0.18);
}

.report-tab:disabled {
    cursor: progress;
    opacity: 0.72;
}

#reportsScreen[aria-busy="true"] .glass-card,
#reportsScreen[aria-busy="true"] .stats-row {
    opacity: 0.62;
    pointer-events: none;
}

#collectionsStrip {
    border-radius: 16px !important;
}

#revenueChart,
#visitorChart {
    border-bottom: 1px solid var(--dbm-border);
    background:
        repeating-linear-gradient(
            to top,
            transparent 0,
            transparent 49px,
            rgba(148, 163, 184, 0.12) 50px
        );
}

#searchHubPage,
#appointmentAddPage {
    background: #ffffff !important;
}

#searchHubPage .form-card {
    margin-top: 16px;
}

#searchHubPage .search-payment-field { min-width:0; }
#searchHubPage .search-payment-filters { width:100%; }
#searchHubPage .search-payment-filters .payment-filter { min-width:82px; }

.app-header-action,
.search-hub-action,
.search-export-action,
#appointmentsDatePickerBtn {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    cursor: pointer;
}

.search-export-action,
#appointmentsDatePickerBtn {
    border-color: var(--dbm-border);
    background: #fff;
    color: var(--dbm-primary);
    box-shadow: 0 5px 14px rgba(15, 48, 79, 0.07);
}

#appointmentFilters {
    border-color: var(--dbm-border) !important;
    border-radius: 14px !important;
    background: #f4f7fa !important;
}

#appointmentFilters .chip {
    min-height: 54px;
}

.appointment-type-chip {
    min-height: 42px;
    border-color: var(--dbm-border);
    background: #fff;
}

.appointment-search-toolbar {
    position: relative;
    display: block;
}

.appointment-search-toolbar #appointmentSearch {
    width: 100%;
    min-height: 48px;
    padding-right: 50px;
}

.appointment-search-clear {
    position: absolute;
    top: 50%;
    right: 7px;
    width: 36px;
    height: 36px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 10px;
    background: #e8eef5;
    color: var(--dbm-text);
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
}

.appointment-search-clear[hidden] {
    display: none;
}

.appointment-result-count {
    flex: 0 0 auto;
    color: var(--dbm-muted);
    font-size: 13px;
    font-weight: 700;
}

.appointment-item[aria-busy="true"] {
    opacity: 0.62;
    pointer-events: none;
}

.appointment-item .action-btn {
    min-height: 44px;
}

.appointment-item .action-btn:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.appointment-clear-filters,
.appointment-retry {
    width: auto;
    min-height: 42px;
    margin-top: 14px;
    padding: 9px 16px;
}

#appointmentAddPage .page {
    max-width: 760px !important;
}

.appointment-header-action {
    appearance: none;
    flex: 0 0 38px;
    padding: 0;
}

.appointment-header-action:disabled,
#appointmentAddPage .btn:disabled {
    cursor: wait !important;
    opacity: 0.65;
}

.appointment-form-card {
    border-radius: 22px !important;
    box-shadow: var(--dbm-shadow) !important;
}

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

.appointment-weekday {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px;
    border: 1px solid var(--dbm-border);
    border-radius: 12px;
    background: #f8fafc;
    color: var(--dbm-text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.appointment-weekday input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--dbm-primary);
}

.appointment-field-error {
    color: var(--dbm-danger) !important;
}

.appointment-form-status {
    margin: 14px 4px 0;
    padding: 12px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 13px;
    background: #f8fafc;
    color: var(--dbm-muted);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.4;
}

.appointment-form-status:empty {
    display: none;
}

.appointment-form-status.appointment-status-error {
    border-color: #fecaca;
    background: #fff1f2;
    color: #b42318;
}

.appointment-form-status.appointment-status-success {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: var(--dbm-success);
}

#appointmentAddPage [aria-invalid="true"] {
    border-color: var(--dbm-danger) !important;
    box-shadow: 0 0 0 3px rgba(194, 65, 59, 0.12);
}

.appointment-action-bar {
    position: sticky;
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 5;
}

#accountModal,
#logoutModal,
.sheet-backdrop {
    background: rgba(15, 32, 51, 0.5) !important;
    backdrop-filter: blur(8px);
}

#accountModal > div {
    width: min(92%, 560px) !important;
    border-radius: 22px !important;
    padding: 20px 20px max(28px, env(safe-area-inset-bottom)) !important;
}

.settings-action {
    border: 1px solid var(--dbm-border) !important;
    background: #f8fafc !important;
    box-shadow: 0 1px 2px rgba(15, 48, 79, 0.03);
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.settings-action:hover,
.settings-action:focus-visible {
    border-color: #a9bfd5 !important;
    background: #f1f7fd !important;
}

.settings-action:active {
    transform: scale(0.995);
}

#accountDealerMasterAction {
    align-items:center;
    justify-content:space-between;
    gap:12px;
    cursor:pointer;
}

#accountDealerMasterAction:not([hidden]) { display:flex; }
#accountDealerMasterAction .settings-action-icon {
    display:grid;
    place-items:center;
    flex:0 0 42px;
    width:42px;
    height:42px;
    border-radius:12px;
    background:linear-gradient(135deg,#dbeafe,#eff6ff);
    font-size:20px;
}
#accountDealerMasterAction > div:nth-child(2) { display:grid; flex:1; min-width:0; gap:4px; }
#accountDealerMasterAction strong { color:#0f172a; font-size:14px; line-height:1.2; }
#accountDealerMasterAction small { display:block; color:#64748b; font-size:12px; line-height:1.4; }
#accountDealerMasterAction > span { flex:0 0 auto; color:#94a3b8; font-size:20px; }

.settings-card {
    margin: 18px auto 0;
    padding: clamp(18px, 3vw, 30px) !important;
    border: 1px solid var(--dbm-border) !important;
    border-radius: 22px !important;
    background: var(--dbm-surface) !important;
    box-shadow: var(--dbm-shadow) !important;
}

.settings-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--dbm-border);
}

.settings-heading h1 {
    margin: 0;
    color: var(--dbm-text);
    font-size: clamp(22px, 3vw, 30px);
    letter-spacing: -0.035em;
}

.settings-heading p {
    max-width: 620px;
    margin: 7px 0 0;
    color: var(--dbm-muted);
    line-height: 1.55;
}

#shopSettingsForm {
    display: grid;
    gap: 10px;
}

#shopSettingsForm label {
    margin-top: 8px;
    color: #334155;
    font-size: 13px;
    font-weight: 750;
}

#shopSettingsForm input,
#shopSettingsForm textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #cbd8e6;
    border-radius: 12px;
    background: #fff;
    color: var(--dbm-text);
}

#shopSettingsForm textarea {
    min-height: 112px;
    resize: vertical;
}

#shopSettingsForm input:focus,
#shopSettingsForm textarea:focus {
    border-color: var(--dbm-primary);
    box-shadow: 0 0 0 4px rgba(15, 108, 189, 0.12);
}

#shopSettingsForm .settings-section-title {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--dbm-border);
    color: var(--dbm-text);
    font-size: 16px;
    font-weight: 800;
}

#shopSettingsForm #logoPreview {
    width: 140px !important;
    height: 140px !important;
    padding: 10px;
    border: 1px solid var(--dbm-border) !important;
    border-radius: 14px !important;
    background: #f8fafc;
}

#shopSettingsForm .settings-logo-control {
    display:grid;
    gap:10px;
    min-width:0;
}

#shopSettingsForm .settings-logo-control > input[type="file"] {
    width:100%;
    min-height:44px;
}

#shopSettingsForm .settings-logo-control #logoPreview {
    margin-top:0 !important;
}

#shopSettingsForm .action-row {
    margin-top: 18px;
}

.lift-spec-category {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}

.lift-spec-option-list {
    display: grid;
    gap: 8px;
}

.lift-spec-option-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--dbm-border);
    border-radius: 10px;
    background: #f8fafc;
}

.lift-spec-option-row input[type="text"] {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--dbm-border);
    border-radius: 8px;
}

.lift-spec-option-row.is-disabled {
    opacity: 0.55;
}

.lift-spec-option-row .lift-spec-default-radio {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    white-space: nowrap;
}

.lift-spec-option-row .lift-spec-move-btn,
.lift-spec-option-row .lift-spec-enable-toggle {
    min-width: 32px;
    min-height: 32px;
    padding: 0 8px;
    font-size: 13px;
}

.lift-spec-add-btn {
    justify-self: start;
}

body.dbm-page-shop-settings .settings-card {
    max-width: 1120px;
    background: #f3f7fb !important;
}

body.dbm-page-shop-settings #shopSettingsForm {
    gap: 18px;
}

body.dbm-page-shop-settings .settings-form-section,
body.dbm-page-shop-settings #liftSettingsSection {
    grid-column: 1 / -1;
    min-width: 0;
}

body.dbm-page-shop-settings #liftSettingsSection {
    display: grid;
    gap: 18px;
}

body.dbm-page-shop-settings .settings-form-section {
    padding: 18px;
    border: 1px solid #d8e4f0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(27, 65, 110, .055);
}

/* Settings is a long page and most of it is set once and never touched again.
   Each block is a details element, so the browser handles the open and shut of
   it, along with the keyboard and the screen reader - none of which a hand
   written accordion gets right for free.

   The rule below is what a header looks like while its block is open. Closed,
   it loses its underline and its lower margin, so shut blocks stack up as a
   list rather than as a column of empty boxes. */
body.dbm-page-shop-settings .settings-form-section__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e4ecf4;
    cursor: pointer;
    list-style: none;
    /* Safari draws its own triangle through this pseudo-element. */
    -webkit-tap-highlight-color: transparent;
}

body.dbm-page-shop-settings .settings-form-section__header::-webkit-details-marker {
    display: none;
}

body.dbm-page-shop-settings .settings-form-section:not([open]) .settings-form-section__header {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

/* A chevron of its own, since the native marker is gone. Pushed to the far
   edge, where a row of them lines up down the page and reads as a list of
   things that open. */
body.dbm-page-shop-settings .settings-form-section__header::after {
    content: "";
    flex: 0 0 auto;
    align-self: center;
    width: 9px;
    height: 9px;
    margin-left: auto;
    border-right: 2px solid #7d93ad;
    border-bottom: 2px solid #7d93ad;
    border-radius: 1px;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease;
}

body.dbm-page-shop-settings .settings-form-section[open] .settings-form-section__header::after {
    transform: rotate(225deg) translate(-2px, -2px);
}

body.dbm-page-shop-settings .settings-form-section:not([open]):hover {
    border-color: #b7cee6;
}

/* The header owns the whole row, so the text beside the icon does not stretch
   into the chevron and leave it floating in the middle of a long description. */
body.dbm-page-shop-settings .settings-form-section__header > div {
    min-width: 0;
    flex: 1 1 auto;
}

body.dbm-page-shop-settings .settings-form-section__icon {
    display: inline-flex;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #e9f3ff;
    color: #0f6cbd;
    font-size: 16px;
    font-weight: 850;
}

body.dbm-page-shop-settings .settings-form-section__header h2 {
    margin: 0;
    color: #132a44;
    font-size: 18px;
    line-height: 1.25;
}

body.dbm-page-shop-settings .settings-form-section__header p {
    margin: 4px 0 0;
    color: #60758d;
    font-size: 13px;
    line-height: 1.45;
}

body.dbm-page-shop-settings .settings-section-grid {
    display: grid;
    grid-template-columns: minmax(130px, 190px) minmax(0, 1fr);
    align-items: start;
    gap: 13px 18px;
}

body.dbm-page-shop-settings .settings-section-grid > label {
    margin: 0;
    padding-top: 12px;
}

body.dbm-page-shop-settings .settings-section-grid > input,
body.dbm-page-shop-settings .settings-section-grid > textarea,
body.dbm-page-shop-settings .settings-section-grid > select,
body.dbm-page-shop-settings .settings-section-grid > .settings-logo-control {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

body.dbm-page-shop-settings .settings-section-grid > .settings-field-note {
    grid-column: 2;
    margin: 0;
}

body.dbm-page-shop-settings .lift-spec-categories-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

body.dbm-page-shop-settings .lift-spec-category {
    align-content: start;
    gap: 12px;
    margin: 0;
    padding: 16px;
    border: 1px solid #dfe8f2;
    border-radius: 13px;
    background: #f9fbfe;
}

body.dbm-page-shop-settings .lift-spec-category > label {
    margin: 0;
    color: #183654;
    font-size: 14px;
    font-weight: 800;
}

body.dbm-page-shop-settings .lift-spec-option-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    padding: 10px;
    border-color: #d9e5f1;
    border-radius: 12px;
    background: #fff;
}

body.dbm-page-shop-settings .lift-spec-option-row > input[type="text"] {
    grid-column: 1 / -1;
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding: 0 12px;
    border-color: #cfddea;
    background: #fff;
    font-size: 15px;
}

body.dbm-page-shop-settings .lift-spec-option-row .lift-spec-default-radio {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0 4px;
    color: #334a62;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
}

body.dbm-page-shop-settings .lift-spec-option-row .lift-spec-default-radio input[type="radio"] {
    appearance: auto;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    accent-color: #0f6cbd;
}

body.dbm-page-shop-settings .lift-spec-option-row .lift-spec-move-btn {
    display: none;
}

body.dbm-page-shop-settings .lift-spec-remove-btn {
    min-width: 82px;
    min-height: 36px;
    padding: 0 12px;
    border-color: #f1b6b6;
    background: #fff8f8;
    color: #b42318;
    font-size: 13px;
    font-weight: 750;
}

body.dbm-page-shop-settings .lift-spec-remove-btn:disabled {
    border-color: #d9e2ec;
    background: #f2f5f8;
    color: #8a9aab;
}

body.dbm-page-shop-settings .lift-spec-enable-toggle {
    min-width: 78px;
    min-height: 36px;
    padding: 0 12px;
    border-color: #bfd3e6;
    background: #f7fbff;
    color: #294a69;
    font-size: 13px;
    font-weight: 750;
}

body.dbm-page-shop-settings .lift-spec-option-row.is-disabled {
    opacity: 1;
    border-style: dashed;
    background: #f5f7fa;
}

body.dbm-page-shop-settings .lift-spec-option-row.is-disabled > input[type="text"] {
    color: #718399;
    background: #f2f5f8;
}

body.dbm-page-shop-settings .lift-spec-add-btn {
    display: inline-flex;
    width: fit-content;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    padding: 0 14px;
    border: 1px solid #b9d1e7;
    border-radius: 10px;
    background: #f5faff;
    color: #145f9f;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
}

body.dbm-page-shop-settings .lift-spec-add-btn:hover {
    border-color: #0f6cbd;
    background: #eaf5ff;
}

body.dbm-page-shop-settings #liftSettingsSection > .action-row,
body.dbm-page-shop-settings #shopSettingsForm > .action-row {
    justify-content: flex-end;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid #d8e4f0;
    border-radius: 14px;
    background: #fff;
}

@media(max-width:700px) {
    body.dbm-page-shop-settings .settings-card {
        padding: 14px !important;
        background: #eef4fa !important;
    }
    body.dbm-page-shop-settings .settings-heading {
        margin-bottom: 14px;
        padding: 4px 2px 14px;
    }
    body.dbm-page-shop-settings .settings-form-section {
        padding: 15px;
        border-radius: 15px;
    }
    body.dbm-page-shop-settings .settings-section-grid,
    body.dbm-page-shop-settings .lift-spec-categories-grid {
        grid-template-columns: 1fr;
    }
    body.dbm-page-shop-settings .settings-section-grid > label {
        padding-top: 0;
    }
    body.dbm-page-shop-settings .settings-section-grid > .settings-field-note {
        grid-column: 1;
    }
    body.dbm-page-shop-settings .settings-form-section__icon {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }
    body.dbm-page-shop-settings .lift-spec-option-row {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }
    body.dbm-page-shop-settings .lift-spec-option-row > input[type="text"] {
        grid-column: 1 / -1;
    }
    body.dbm-page-shop-settings .lift-spec-option-row .lift-spec-default-radio {
        grid-column: 1;
    }
    body.dbm-page-shop-settings .lift-spec-enable-toggle,
    body.dbm-page-shop-settings .lift-spec-remove-btn {
        width: auto;
        min-width: 72px;
        padding-inline: 9px;
    }
    body.dbm-page-shop-settings .lift-spec-add-btn {
        width: 100%;
    }
}

@media(max-width:430px) {
    body.dbm-page-shop-settings .lift-spec-option-row {
        grid-template-columns: 1fr 1fr;
    }
    body.dbm-page-shop-settings .lift-spec-option-row .lift-spec-default-radio {
        grid-column: 1 / -1;
    }
    body.dbm-page-shop-settings .lift-spec-enable-toggle,
    body.dbm-page-shop-settings .lift-spec-remove-btn {
        width: 100%;
    }
}

.lift-quotation-summary,
.lift-quotation-totals {
    display: grid;
    gap: 6px;
    padding: 12px;
    margin-bottom: 14px;
    border: 1px solid var(--dbm-border);
    border-radius: 10px;
    background: #f8fafc;
}

.lift-quotation-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

.lift-quotation-summary-row span {
    text-align: right;
    color: #475569;
}

.lift-quotation-grand-total {
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid var(--dbm-border);
    font-size: 15px;
}

.lift-quotation-grand-total span {
    color: var(--dbm-primary);
    font-weight: 800;
}

.lift-quotations-list {
    display: grid;
    gap: 10px;
}

.lift-workspace-tabs {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
    margin:4px 0 18px;
    padding:5px;
    border:1px solid #d7e2ee;
    border-radius:14px;
    background:#eef4fa;
}

.lift-workspace-tabs a {
    display:flex;
    min-height:44px;
    align-items:center;
    justify-content:center;
    border:1px solid transparent;
    border-radius:10px;
    color:#526b84;
    font-weight:750;
    text-decoration:none;
}

.lift-workspace-tabs a.active {
    border-color:#0f6cbd;
    color:#fff;
    background:#0f6cbd;
    box-shadow:0 7px 16px rgba(15,108,189,.2);
}

.lift-list-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 240px);
    align-items: end;
    gap: 12px;
    margin-bottom: 8px;
    padding: 14px;
    border: 1px solid var(--dbm-border);
    border-radius: 14px;
    background: #f8fbff;
}

.lift-list-filters .lift-dashboard-periods {
    margin-bottom: 0;
}

.lift-list-status-filter {
    display: grid;
    gap: 6px;
    color: #526b84;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.lift-list-status-filter select {
    width: 100%;
    min-height: 44px;
    padding: 0 38px 0 12px;
    border: 1px solid var(--dbm-border);
    border-radius: 12px;
    outline: 0;
    background: #fff;
    color: var(--dbm-text);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
}

.lift-list-status-filter select:focus {
    border-color: var(--dbm-primary);
    box-shadow: 0 0 0 3px rgba(15, 108, 189, .12);
}

.lift-list-result-count {
    min-height: 24px;
    margin: 4px 2px 8px;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.lift-quotation-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--dbm-border);
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    color: inherit;
}

.lift-quotation-list-item:hover {
    border-color: var(--dbm-primary);
}

.lift-quotation-list-item-main {
    display: grid;
    gap: 2px;
}

.lift-quotation-list-item-main span {
    color: #64748b;
    font-size: 13px;
}

.lift-quotation-list-item-side {
    text-align: right;
    display: grid;
    gap: 2px;
}

.lift-quotation-list-item-side span {
    font-weight: 700;
}

.lift-quotation-list-item-side small {
    color: #94a3b8;
}

.lift-dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.lift-dashboard-card {
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--dbm-border);
    border-radius: 12px;
    background: #f8fafc;
}

.lift-dashboard-card strong {
    font-size: 18px;
    color: var(--dbm-primary);
}

.lift-dashboard-card span {
    font-size: 12px;
    color: #64748b;
}

.lift-dashboard-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.lift-dashboard-heading-copy {
    min-width: 0;
}

.lift-dashboard-selected-date {
    display: block;
    margin: 4px 0 0;
    color: #64748b;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.4;
}

.lift-dashboard-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--dbm-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.lift-dashboard-date-control {
    position: relative;
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--dbm-border);
    border-radius: 12px;
    background: #f8fbff;
    color: var(--dbm-primary);
    font-weight: 750;
}

.lift-dashboard-date-control > span {
    position: relative;
    width: 18px;
    height: 17px;
    flex: 0 0 18px;
    border: 2px solid currentColor;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 0;
}

.lift-dashboard-date-control > span::before {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    top: 3px;
    border-top: 2px solid currentColor;
}

.lift-dashboard-date-control > span::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 7px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 5px 0 currentColor, 0 4px currentColor, 5px 4px currentColor;
}

.lift-dashboard-date-control input {
    width: 128px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--dbm-text);
    font: inherit;
}

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

.lift-dashboard-period {
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid var(--dbm-border);
    border-radius: 12px;
    background: #f8fbff;
    color: #294560;
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
}

.lift-dashboard-period.active {
    border-color: var(--dbm-primary);
    background: var(--dbm-primary);
    color: #fff;
    box-shadow: 0 8px 18px rgba(15, 108, 189, .18);
}

.lift-dashboard-report-section {
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid var(--dbm-border);
    border-radius: 14px;
    background: #fff;
}

.lift-dashboard-report-toggle {
    display: flex;
    width: 100%;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border: 0;
    background: #f8fbff;
    color: var(--dbm-text);
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.lift-dashboard-report-toggle:hover {
    background: #f0f7ff;
}

.lift-dashboard-report-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.lift-dashboard-report-meta strong {
    display: inline-grid;
    min-width: 34px;
    height: 28px;
    place-items: center;
    padding: 0 8px;
    border-radius: 999px;
    background: #e9f3ff;
    color: var(--dbm-primary);
    font-size: 13px;
}

.lift-dashboard-report-chevron {
    color: #60758c;
    transition: transform .18s ease;
}

.lift-dashboard-report-toggle[aria-expanded="true"] .lift-dashboard-report-chevron {
    transform: rotate(180deg);
}

.lift-dashboard-report-section > .lift-quotations-list {
    padding: 12px;
}

.lift-dashboard-report-section .lift-quotation-list-item {
    position: relative;
    padding-right: 38px;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.lift-dashboard-report-section a.lift-quotation-list-item:hover,
.lift-dashboard-report-section a.lift-quotation-list-item:focus-visible {
    border-color: var(--dbm-primary);
    box-shadow: 0 8px 18px rgba(15, 108, 189, .1);
    transform: translateY(-1px);
    outline: none;
}

.lift-dashboard-report-open {
    position: absolute;
    top: 50%;
    right: 14px;
    color: var(--dbm-primary);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    transform: translateY(-50%);
}

.lift-dashboard-report-section > .lift-quotations-list[hidden] {
    display: none !important;
}

.lift-dashboard-analytics {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--dbm-border);
}

.lift-dashboard-analytics-heading h2,
.lift-dashboard-analytics-heading p {
    margin: 0;
}

.lift-dashboard-analytics-heading h2 {
    color: var(--dbm-text);
    font-size: 22px;
}

.lift-dashboard-analytics-heading p {
    margin-top: 4px;
    color: var(--dbm-muted);
    font-size: 13px;
}

.lift-dashboard-insight-tabs {
    display: grid;
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 16px 0 12px;
}

.lift-dashboard-insight-tabs .report-section-tab {
    width: 100%;
}

.lift-dashboard-insight-panel[hidden] {
    display: none !important;
}

.lift-dashboard-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 12px;
}

.lift-dashboard-insight-panel[data-lift-insight-panel="trends"] {
    display: grid;
    gap: 12px;
}

.lift-analytics-card {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--dbm-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 48, 79, .05);
}

.lift-analytics-card .section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.lift-analytics-card .section-title {
    margin: 0;
    font-size: 18px;
}

.lift-analytics-card .business-insights-list {
    grid-template-columns: minmax(0, 1fr);
}

.lift-goal-editor {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid #d7e4f0;
    border-radius: 12px;
    background: #f8fbff;
}

.lift-goal-editor[hidden] {
    display: none !important;
}

.lift-goal-editor label {
    display: block;
    margin-bottom: 7px;
    color: #415b73;
    font-size: 12px;
    font-weight: 800;
}

.lift-goal-editor > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
}

.lift-goal-editor input {
    min-width: 0;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--dbm-border);
    border-radius: 10px;
    background: #fff;
    color: var(--dbm-text);
    font: inherit;
}

.lift-revenue-svg {
    display: block;
    width: 100%;
    height: 210px;
}

.lift-chart-empty {
    display: grid;
    min-height: 180px;
    place-items: center;
    margin: 0;
    color: var(--dbm-muted);
    font-size: 13px;
}

.lift-pipeline-chart {
    display: grid;
    gap: 9px;
    margin-top: 12px;
}

.lift-pipeline-row {
    display: grid;
    grid-template-columns: minmax(130px, 190px) minmax(100px, 1fr) 34px;
    align-items: center;
    gap: 10px;
}

.lift-pipeline-row > span {
    overflow: hidden;
    color: #52677d;
    font-size: 12px;
    font-weight: 750;
    text-overflow: ellipsis;
    text-transform: capitalize;
    white-space: nowrap;
}

.lift-pipeline-row > strong {
    color: var(--dbm-text);
    font-size: 13px;
    text-align: right;
}

.lift-pipeline-track {
    height: 20px;
    overflow: hidden;
    border-radius: 8px;
    background: #edf2f7;
}

.lift-pipeline-fill {
    height: 100%;
    min-width: 3px;
    border-radius: inherit;
    background: linear-gradient(90deg, #0f6cbd, #38bdf8);
}

@media (max-width: 700px) {
    .lift-list-filters {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .lift-dashboard-heading {
        align-items: flex-start;
        flex-direction: row;
    }

    .lift-dashboard-heading-copy,
    .lift-dashboard-heading > div:first-child {
        min-width: 0;
        flex: 1 1 auto;
    }

    .lift-dashboard-description {
        display: none;
    }

    .lift-dashboard-selected-date {
        display: block;
        margin-top: 4px;
        color: #64748b;
        font-size: 14px;
        font-weight: 650;
        line-height: 1.35;
    }

    .lift-dashboard-date-control {
        width: 48px;
        min-width: 48px;
        height: 48px;
        min-height: 48px;
        flex: 0 0 48px;
        justify-content: center;
        padding: 0;
        border-radius: 15px;
    }

    .lift-dashboard-date-control input {
        position: absolute;
        inset: 0;
        width: 100%;
        min-width: 0;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

    .lift-dashboard-periods {
        display: flex;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .lift-dashboard-periods::-webkit-scrollbar {
        display: none;
    }

    .lift-dashboard-period {
        min-width: 104px;
        flex: 0 0 auto;
    }

    .lift-dashboard-overview-grid {
        grid-template-columns: 1fr;
    }

    .lift-dashboard-insight-tabs {
        max-width: none;
    }

    .lift-analytics-card .business-insights-list {
        grid-template-columns: 1fr;
    }

    .lift-goal-editor > div {
        grid-template-columns: 1fr 1fr;
    }

    .lift-goal-editor input {
        grid-column: 1 / -1;
    }

    .lift-pipeline-row {
        grid-template-columns: 105px minmax(80px, 1fr) 28px;
    }
}

/* Lift Home: compact collapse/expand block for Customer + Site (#serviceForm
   itself never collapses for Lift — only this inner block does, keyed on its
   own header click, not typing in the name field). */
.lift-home-block {
    border: 1px solid var(--dbm-border);
    border-radius: 14px;
    padding: 12px;
    background: #f8fafc;
}

.lift-home-block-header {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.lift-home-block-toggle {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 1px solid var(--dbm-border);
    border-radius: 10px;
    background: #fff;
    font-size: 16px;
    line-height: 1;
    color: var(--dbm-primary);
    transition: transform 0.15s ease;
}

.lift-home-block-toggle[aria-expanded="true"] span {
    display: inline-block;
    transform: rotate(180deg);
}

.lift-home-block-details {
    margin-top: 4px;
}

.sheet {
    border-radius: 24px 24px 0 0 !important;
}

#editSheetBackdrop .sheet {
    width: min(100%, 820px);
    max-height: min(90vh, 860px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

#editForm {
    display: grid;
    gap: 16px;
}

.edit-fields-grid {
    display: grid;
    gap: 14px;
}

.edit-industry-fields {
    display: grid;
    gap: 16px;
    padding-top: 2px;
}

.edit-treatment-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 7px;
}

#editForm .field-label,
#editForm .field > label {
    color: #334155;
    font-size: 13px;
    font-weight: 750;
}

#editForm select {
    width: 100%;
    min-height: 52px;
    padding: 0 12px 0 38px;
    border: 1px solid #cbd8e6;
    border-radius: 14px;
    background: #fff;
    color: var(--dbm-text);
    font-weight: 650;
}

#editStatusCard {
    margin: 0;
}

#editForm .sheet-actions {
    position: sticky;
    bottom: -1px;
    z-index: 2;
    margin: 2px -2px -2px;
    padding: 14px 2px 2px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 28%);
}

.bottom-nav {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    justify-items: stretch;
    justify-content: normal !important;
    gap: 0 !important;
    height: calc(72px + env(safe-area-inset-bottom));
    min-height: calc(72px + env(safe-area-inset-bottom));
    max-height: calc(72px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    padding: 8px 12px max(8px, env(safe-area-inset-bottom));
    border: 1px solid rgba(203, 216, 230, 0.92);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 -12px 34px rgba(15, 48, 79, 0.11);
    backdrop-filter: blur(22px);
}

body.crm-login-visible .bottom-nav {
    display: none !important;
}

.nav-item {
    appearance: none;
    width: min(100%, 88px);
    min-width: 0 !important;
    min-height: 52px;
    padding: 5px 8px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: #708196;
    cursor: pointer;
    justify-self: center;
}

.bottom-nav .nav-item {
    height:52px;
    max-height:52px;
    box-sizing:border-box;
}

body.dbm-lift-active .hero,
body[class*="dbm-page-lift-"] .hero {
    min-height:72px;
    margin-bottom:10px;
    padding:10px 16px;
    border-radius:18px;
}

body.dbm-lift-active .hero .hero-top,
body[class*="dbm-page-lift-"] .hero .hero-top {
    min-height:52px;
    align-items:center;
}

body.dbm-lift-active .hero .hero-left,
body[class*="dbm-page-lift-"] .hero .hero-left {
    min-width:0;
    gap:10px;
}

body.dbm-lift-active .hero .hero-actions,
body[class*="dbm-page-lift-"] .hero .hero-actions {
    display:flex;
    align-items:center;
    gap:8px;
}

body.dbm-lift-active .hero .hero-actions .hero-icon-btn,
body.dbm-lift-active .hero .hero-actions .app-header-action,
body[class*="dbm-page-lift-"] .hero .hero-actions .hero-icon-btn,
body[class*="dbm-page-lift-"] .hero .hero-actions .app-header-action {
    width:38px;
    height:38px;
    min-width:38px;
    min-height:38px;
    padding:0;
    border-radius:12px;
}

.nav-item > .nav-icon {
    font-size: 20px;
    line-height: 1;
}

.nav-item.active {
    background: #eaf4ff;
    color: var(--dbm-primary-strong);
}

.nav-item.active::before {
    display: none;
}

.bottom-nav .nav-center {
    appearance: none;
    justify-self: center;
    width: 58px;
    height: 58px;
    border: 5px solid var(--dbm-bg) !important;
    background: linear-gradient(135deg, var(--dbm-primary), var(--dbm-accent)) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 26px rgba(15, 108, 189, 0.3) !important;
    cursor: pointer;
}

@media (min-width: 768px) {
    .bottom-nav .nav-item {
        width: min(100%, 120px);
    }
}

body.patient-picker-open {
    overflow: hidden;
}

.patient-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 4vw, 32px);
    background: rgba(15, 32, 51, 0.52);
    backdrop-filter: blur(4px);
}

.patient-picker-backdrop.is-open {
    display: flex;
}

.patient-picker-dialog {
    width: min(100%, 600px);
    max-height: min(680px, calc(100dvh - 32px));
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: clamp(18px, 3vw, 26px);
    overflow: hidden;
    border: 1px solid var(--dbm-border);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: var(--dbm-shadow-strong);
}

.patient-picker-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.patient-picker-header h2 {
    margin: 0;
    color: var(--dbm-text);
    font-size: clamp(20px, 3vw, 24px);
    line-height: 1.2;
}

.patient-picker-header p {
    max-width: 46ch;
    margin: 6px 0 0;
    color: var(--dbm-muted);
    font-size: 14px;
    line-height: 1.45;
}

.patient-picker-close {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--dbm-border);
    border-radius: 13px;
    background: var(--dbm-surface-muted);
    color: var(--dbm-text);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.patient-picker-list {
    display: grid;
    gap: 10px;
    min-height: 0;
    overflow-y: auto;
    padding: 2px;
    overscroll-behavior: contain;
}

.patient-picker-option {
    width: 100%;
    min-height: 66px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 13px 16px;
    border: 1px solid var(--dbm-border);
    border-radius: 16px;
    background: #ffffff;
    color: var(--dbm-text);
    text-align: left;
    cursor: pointer;
    transition:
        border-color 160ms ease,
        background-color 160ms ease,
        transform 160ms ease;
}

.patient-picker-option:hover {
    border-color: rgba(15, 108, 189, 0.55);
    background: #f4f9ff;
    transform: translateY(-1px);
}

.patient-picker-option-name {
    font-size: 16px;
    font-weight: 750;
}

.patient-picker-option-id {
    color: var(--dbm-muted);
    font-size: 13px;
    font-weight: 600;
}

.patient-picker-add {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(15, 108, 189, 0.2);
    border-radius: 15px;
    background: #eaf4ff;
    color: var(--dbm-primary-strong);
    font-weight: 750;
    cursor: pointer;
}

.patient-picker-add > span {
    font-size: 22px;
    line-height: 1;
}

@media (max-width: 640px) {
    .page,
    #searchHubPage .page {
        padding: 8px 10px 104px !important;
    }

    .hero {
        border-radius: 16px;
        margin-bottom: 10px;
    }

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

    .stats-row .stat-card:last-child {
        grid-column: 1 / -1;
        min-height: 92px;
    }

    .stat-card {
        min-height: 110px;
        padding: 14px;
    }

    .stat-value,
    .stat-blue .stat-value,
    .stat-green .stat-value {
        font-size: 23px;
    }

    .form-card,
    .list-card {
        padding: 15px !important;
    }

    .toolbar {
        display: grid;
        grid-template-columns: 1fr auto;
    }

    .toolbar .input-wrap {
        grid-column: 1 / -1;
    }

    .action-row {
        gap: 10px;
    }

    .bottom-nav {
        width: calc(100% - 12px);
        border-radius: 18px 18px 0 0;
    }

    .nav-item {
        min-width: 0;
        font-size: 10px;
    }

    .nav-item > .nav-icon {
        font-size: 19px;
    }

    #collectionsStrip {
        align-items: flex-start !important;
    }

    #collectionsStrip > div:last-child {
        align-items: flex-start !important;
        flex-direction: column;
        gap: 8px !important;
    }

    #collectionsStrip > div:last-child > div[style*="width:1px"] {
        display: none !important;
    }

    .patient-picker-backdrop {
        align-items: flex-end;
        padding: 0;
    }

    .patient-picker-dialog {
        width: 100%;
        max-height: min(82dvh, 680px);
        padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
        border-radius: 24px 24px 0 0;
    }

    .appointment-form-card {
        padding: 18px 14px !important;
        border-radius: 18px !important;
    }

    .appointment-schedule-grid {
        grid-template-columns: 1fr !important;
    }

    .appointment-weekdays {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Reports is deliberately split into a brand header and a working range panel. */
.reports-hero {
    min-height: 76px;
    padding: 10px 16px !important;
    margin-bottom: 12px !important;
}

.reports-hero .reports-app-header {
    min-height: 56px;
}

/* Keep header actions above all report and appointment content layers. */
#reportsScreen .reports-hero {
    position: sticky !important;
    z-index: 40 !important;
    overflow: visible !important;
}

#appointmentsPage .hero,
#appointmentAddPage .hero {
    position: relative !important;
    z-index: 40 !important;
    overflow: visible !important;
}

#appointmentsPage .hero {
    top: auto !important;
}

#reportsScreen .reports-app-header,
#reportsScreen .reports-header-actions,
#appointmentsPage .hero-top,
#appointmentAddPage .hero-top {
    position: relative !important;
    z-index: 45 !important;
}

#reportsScreen .reports-header-actions,
#appointmentsPage .hero-top > div:last-child,
#appointmentAddPage .hero-top > div:last-child {
    pointer-events: auto !important;
}

#reportsScreen .reports-header-actions .app-header-action,
#appointmentsPage .hero-top .app-header-action,
#appointmentAddPage .hero-top .appointment-header-action {
    position: relative !important;
    z-index: 46 !important;
    isolation: isolate;
}

.reports-workspace {
    margin: 0 0 16px;
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid #c9d9e9;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: var(--dbm-shadow);
}

.reports-workspace .reports-title-row {
    margin-top: 0;
    align-items: center;
}

.reports-workspace .reports-eyebrow {
    color: var(--dbm-primary);
}

.reports-workspace .reports-title-row h1 {
    color: var(--dbm-text);
}

.reports-workspace .report-date-chip {
    border-color: #b9cee2;
    background: #eef6ff;
    color: var(--dbm-primary-strong);
}

.reports-workspace .report-tabs-primary {
    margin-top: 20px;
}

.reports-workspace .report-tab {
    border-color: #c6d8e9 !important;
    background: #f7fbff !important;
    color: #36516d !important;
}

.reports-workspace .report-tab.active {
    border-color: var(--dbm-primary) !important;
    background: var(--dbm-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(15,108,189,.2) !important;
}

@media (max-width: 640px) {
    .reports-workspace {
        padding: 18px 14px;
        border-radius: 18px;
    }

    .reports-workspace .reports-title-row {
        align-items: flex-start;
    }
}

/* Date-range chips scroll horizontally instead of wrapping onto extra rows. */
.report-tabs-primary {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}

.report-tabs-primary::-webkit-scrollbar { display: none; }

/* Chips size to their label; the ID-scoped width:100% rule below would otherwise
   stretch each one to a full row and hide the rest. */
#reportsScreen .report-tabs-primary .report-tab {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 0;
    white-space: nowrap;
    scroll-snap-align: start;
}

/* Mobile keeps the three-tab split; desktop shows every block stacked. */
.report-section-tabs {
    display: flex;
    gap: 6px;
    margin: 14px 0 4px;
    padding: 4px;
    border: 1px solid var(--dbm-border);
    border-radius: 14px;
    background: #eef4fa;
}

.report-section-tab {
    flex: 1 1 0;
    min-height: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #4b6377;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.report-section-tab.active {
    background: #ffffff;
    color: var(--dbm-primary-strong);
    box-shadow: 0 6px 14px rgba(15,48,79,.1);
}

.report-panel { display: none; }
.report-panel.active { display: block; }

@media (max-width:899px) {
    #reportsScreen .report-section-tabs {
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr));
        width:100%;
        overflow:visible !important;
    }

    #reportsScreen .report-section-tab {
        display:flex !important;
        align-items:center;
        justify-content:center;
        width:100% !important;
        min-width:0 !important;
    }
}

/* Every report is a full-width block, stacked one after another. */
.reports-panels {
    margin-top: 10px;
}

.report-block {
    margin-top: 10px;
}

.report-chart {
    height: 220px;
    position: relative;
}

.report-block-note {
    margin: 8px 0 0;
    color: var(--dbm-muted);
    font-size: 12px;
    line-height: 1.5;
}

#reportsScreen .stats-row {
    gap: 10px;
    margin: 10px 0;
}

#reportsScreen .report-block {
    padding: 14px;
}

#reportsScreen .section-head {
    gap: 10px;
}

#reportsScreen .section-title {
    font-size: 18px;
}

#reportsScreen .report-tab,
#reportsScreen .goal-edit-btn,
#reportsScreen .report-date-chip {
    min-height: 36px;
}

.chart-best-row {
    margin-top: 8px;
    min-height: 34px;
}

.chart-best-summary {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid #dbe7f3;
    border-radius: 10px;
    background: #f8fbff;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
}

.chart-best-summary > span:first-child,
.chart-best-summary strong {
    color: var(--dbm-primary);
}

.chart-best-label {
    color: var(--dbm-muted);
}

.dashboard-welcome-card {
    display: none;
}

.dashboard-announcement-slot:empty {
    display: none;
}

.business-insights-block {
    margin-top: 10px;
}

.business-insights-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.business-insights-kicker {
    margin: 0 0 3px;
    color: var(--dbm-primary);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.business-insights-subtitle {
    margin: 4px 0 0;
    color: var(--dbm-muted);
    font-size: 12px;
    line-height: 1.45;
}

.business-insights-list {
    display: grid;
    gap: 9px;
    margin-top: 12px;
}

.business-assistant-summary {
    margin: 10px 0 0;
    padding: 9px 11px;
    border: 1px solid #dbe5ef;
    border-radius: 10px;
    background: #f8fafc;
    color: #334155;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
}

.business-assistant-summary-critical {
    border-color: #fecaca;
    background: #fff7f7;
    color: #991b1b;
}

.business-assistant-summary-warning {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.business-assistant-summary-positive {
    border-color: #bbf7d0;
    background: #f3fbf6;
    color: #166534;
}

.business-assistant-summary-observation {
    border-color: #bfdbfe;
    background: #f5faff;
    color: #1e40af;
}

.business-insight {
    --insight-accent: #64748b;
    --insight-bg: #f8fafc;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid #dbe5ef;
    border-left: 4px solid var(--insight-accent);
    border-radius: 12px;
    background: var(--insight-bg);
}

.business-insight-critical {
    --insight-accent: #dc2626;
    --insight-bg: #fff7f7;
}

.business-insight-warning {
    --insight-accent: #d97706;
    --insight-bg: #fffbeb;
}

.business-insight-opportunity {
  --insight-accent: #d97706;
  --insight-bg: #fffbeb;
}

.business-insight-positive {
    --insight-accent: #15803d;
    --insight-bg: #f3fbf6;
}

.business-insight-information {
    --insight-accent: #0f6cbd;
    --insight-bg: #f5faff;
}

.business-insight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--insight-accent);
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
}

.business-insight-category,
.business-insight-content h3,
.business-insight-description,
.business-insight-recommendation {
    margin: 0;
}

.business-insight-category {
    color: var(--insight-accent);
    font-size: 9.5px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Wraps for the same reason the action does: the title says what the card is
   about, and a phone is narrow enough that holding it to one line cut the end
   off headings that were only a few words long. */
.business-insight-content h3 {
    margin-top: 2px;
    color: var(--dbm-text);
    font-size: 14px;
    line-height: 1.3;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.business-insight-description {
    margin-top: 4px;
    color: #52657a;
    font-size: 12px;
    line-height: 1.45;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* The one line on the card that says what to do about it, so cutting it short
   removes the only part worth reading. It was held to a single line with an
   ellipsis, which on a phone left every card ending in "..." - the advice
   present, and unreadable.

   It wraps now. The label keeps its own line so the action starts at the left
   margin rather than beginning halfway across and running under itself, and
   long words break rather than pushing the card sideways. */
.business-insight-recommendation {
    margin-top: 6px;
    color: #334155;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.business-insight-recommendation::before {
    content: "Today's action: ";
    color: var(--insight-accent);
}

/* Only where the room ran out. A desktop card is wide enough to carry the
   label and the sentence on one line, and it has always read well there, so
   nothing changes above this width. Below it the label takes its own line, so
   the action starts at the left margin instead of a few words in. */
@media (max-width: 1023px) {
    .business-insight-recommendation::before {
        content: "Today's action";
        display: block;
        margin-bottom: 1px;
        font-size: 9.5px;
        font-weight: 850;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
}

.business-insights-empty {
    margin: 0;
    padding: 16px;
    border: 1px dashed #cbd8e6;
    border-radius: 12px;
    color: var(--dbm-muted);
    background: #f8fafc;
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 640px) {
    #reportsScreen .reports-workspace {
        margin-bottom: 10px;
        padding: 14px 12px;
    }

    #reportsScreen .reports-workspace .report-tabs-primary {
        margin-top: 12px;
    }

    #reportsScreen .report-section-tabs {
        margin-top: 10px;
    }

    #reportsScreen .report-chart {
        height: 190px;
    }

    #reportsScreen .payment-method-grid {
        gap: 8px;
        margin-top: 12px;
    }

    #reportsScreen .payment-method-tile {
        padding: 10px;
        border-radius: 12px;
    }

    #businessAssistantBlock {
        margin-top: 10px;
    }

    .business-insights-head {
        align-items: flex-start;
    }
}

@media (min-width: 900px) {
    .report-chart {
        height: 300px;
    }

    /* No tab switching on desktop — there is room for the whole dashboard. */
    .report-section-tabs {
        display: none;
    }

    .report-panel {
        display: block !important;
    }
}

/* Payment breakdown visualization. */
.payment-split-bar {
    display: flex;
    height: 10px;
    margin-top: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef2f7;
}

.payment-split-upi {
    background: linear-gradient(90deg, #2563eb, #38bdf8);
    transition: width .3s ease;
}

.payment-split-cash {
    background: linear-gradient(90deg, #15803d, #4ade80);
    transition: width .3s ease;
}

.payment-split-pending {
    background: linear-gradient(90deg, #f59e0b, #f97316);
    transition: width .3s ease;
}

.payment-method-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.payment-method-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--dbm-border);
    border-radius: 16px;
    background: #f8fafc;
}

.payment-method-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 12px;
    font-size: 17px;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(15,48,79,.08);
}

.payment-method-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--dbm-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.payment-method-amount {
    margin-top: 2px;
    font-size: 17px;
    font-weight: 800;
    color: var(--dbm-text);
}

.payment-method-count {
    margin-top: 1px;
    font-size: 12px;
    color: var(--dbm-muted);
}

.payment-method-pending .payment-method-amount { color: #b45309; }

/* Weekday performance: horizontal bars keep long day labels readable on phones. */
.weekday-chart {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.weekday-row {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 10px;
}

.weekday-name {
    color: var(--dbm-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.weekday-track {
    height: 22px;
    overflow: hidden;
    border-radius: 8px;
    background: #eef2f7;
}

.weekday-fill {
    height: 100%;
    min-width: 2px;
    border-radius: 8px;
    background: linear-gradient(90deg, #6d28d9, #a78bfa);
    transition: width .3s ease;
}

.weekday-row.is-best .weekday-fill {
    background: linear-gradient(90deg, #07599f, #38bdf8);
}

.weekday-value {
    min-width: 68px;
    color: var(--dbm-text);
    font-size: 13px;
    font-weight: 700;
    text-align: right;
}

/* Billing activity heatmap. */
.hourly-chart {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
}

.hour-cell {
    display: flex;
    flex: 1 1 52px;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 44px;
    padding: 8px 4px;
    border: 1px solid var(--dbm-border);
    border-radius: 10px;
    background: #f8fafc;
    transition: transform .18s ease, box-shadow .18s ease;
}

.hour-cell.heat-low {
    border-color: #d9e7dc;
    background: #edf8f0;
}

.hour-cell.heat-medium {
    border-color: #fde68a;
    background: #fef3c7;
}

.hour-cell.heat-high {
    border-color: #fdba74;
    background: #fed7aa;
}

.hour-cell.heat-peak {
    border-color: #f97316;
    background: linear-gradient(145deg, #f97316, #dc2626);
    box-shadow: 0 8px 18px rgba(220, 38, 38, .18);
}

.hour-cell.heat-peak .hour-label {
    color: rgba(255, 255, 255, .86);
}

.hour-cell.heat-peak .hour-count {
    color: #ffffff;
}

.hour-label {
    color: var(--dbm-muted);
    font-size: 11px;
    font-weight: 700;
}

.hour-count {
    color: var(--dbm-text);
    font-size: 14px;
    font-weight: 800;
}

.visitor-trend-svg circle {
    transition: r .15s ease;
}

.visitor-trend-svg circle:hover {
    r: 5px;
}

/* Revenue goal. */
.goal-edit-btn {
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid #b9cee2;
    border-radius: 10px;
    background: #eef6ff;
    color: var(--dbm-primary-strong);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.goal-body {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
}

.goal-current {
    color: var(--dbm-text);
    font-size: clamp(26px, 4vw, 34px);
    font-weight: 800;
    line-height: 1.1;
}

.goal-target {
    margin-top: 4px;
    color: var(--dbm-muted);
    font-size: 13px;
}

.goal-percent {
    color: var(--dbm-primary-strong);
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 800;
}

.goal-track {
    height: 14px;
    margin-top: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef2f7;
}

.goal-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #15803d, #4ade80);
    transition: width .35s ease;
}

.goal-fill.is-behind {
    background: linear-gradient(90deg, #b45309, #fbbf24);
}

/* Premium application dialog. */
#appPopup.app-popup {
    padding: 20px !important;
    background:
        radial-gradient(circle at 50% 35%, rgba(15,108,189,.18), transparent 28rem),
        rgba(8, 24, 42, .66) !important;
    backdrop-filter: blur(14px) saturate(120%) !important;
}

#appPopup .app-popup-panel {
    position: relative;
    width: min(100%, 480px) !important;
    max-width: 480px !important;
    padding: 32px !important;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.92) !important;
    border-radius: 26px !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
    box-shadow:
        0 32px 90px rgba(3,18,35,.38),
        0 2px 0 rgba(255,255,255,.9) inset !important;
    text-align: left !important;
}

#appPopup .app-popup-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #07599f, #0f6cbd, #12a3b4);
}

#appPopup .app-popup-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border: 1px solid #b9d9f5;
    border-radius: 16px;
    background: linear-gradient(145deg, #eaf5ff, #dceeff);
    color: #07599f;
    font-size: 25px;
    font-weight: 900;
    box-shadow: 0 8px 20px rgba(15,108,189,.14);
}

#appPopup .app-popup-title {
    margin-top: 4px;
    margin-bottom: 8px;
    color: #102033;
    font-size: 22px;
    font-weight: 850;
    letter-spacing: -.02em;
}

#appPopup .app-popup-message {
    margin: 0 0 26px !important;
    color: #52657a !important;
    font-size: 15px !important;
    font-weight: 550 !important;
    line-height: 1.6 !important;
    text-align: left !important;
}

/* Inline input variant of the application dialog. */
#appPopup .app-popup-input-label {
    display: block;
    margin-bottom: 8px;
    color: var(--dbm-text);
    font-size: 14px;
    font-weight: 800;
}

#appPopup .app-popup-input {
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid #b9d1e7;
    border-radius: 12px;
    background: #ffffff;
    color: var(--dbm-text);
    font-size: 17px;
    font-weight: 700;
}

#appPopup .app-popup-input:focus {
    border-color: var(--dbm-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(15,108,189,.14);
}

#appPopup .app-popup-input-hint {
    margin: 10px 0 0;
    color: var(--dbm-muted);
    font-size: 13px;
    font-weight: 500;
}

#appPopup .app-popup-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#appPopup .app-popup-actions .btn {
    width: 100%;
    min-height: 50px !important;
    border-radius: 14px !important;
    font-size: 15px;
    font-weight: 800;
}

#appPopup .app-popup-actions .btn-primary {
    box-shadow: 0 10px 24px rgba(37,99,235,.24);
}

/* Customer sorting works alongside search and payment filters. */
.entry-sort-control {
    min-width: 210px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 7px 6px 13px;
    border: 1px solid #c9d9e9;
    border-radius: 14px;
    background: #f8fbff;
    color: #52657a;
    font-size: 12px;
    font-weight: 800;
}

.entry-sort-control select {
    min-width: 0;
    flex: 1;
    height: 38px;
    padding: 0 34px 0 11px;
    border: 1px solid #b9cee2;
    border-radius: 10px;
    background: #ffffff;
    color: #102033;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
}

.entry-sort-control select:hover {
    border-color: #6ea8d8;
}

@media (max-width: 640px) {
    .list-top:has(.entry-sort-control) {
        align-items: stretch;
        flex-direction: column;
    }

    .entry-sort-control {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    #appPopup .app-popup-panel {
        padding: 26px 22px 22px !important;
        border-radius: 22px !important;
    }
}

@media (min-width: 768px) {
    .hero {
        top: 12px;
    }

    .stats-row {
        gap: 16px;
    }

    .entry-list,
    #appointmentsList {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 16px;
    }

    #searchHubPage .form-card {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    #editSheetBackdrop {
        align-items: center;
        padding: 24px;
    }

    #editSheetBackdrop .sheet {
        border-radius: 24px !important;
    }

    .edit-fields-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #searchHubPage .form-card > .action-row {
        grid-column: 1 / -1;
    }

    #searchHubPage .search-payment-field {
        grid-column: 1 / -1;
    }

    .bottom-nav {
        width: min(calc(100% - 48px), 1120px);
        border-radius: 18px 18px 0 0;
    }
}

@media (min-width: 1100px) {
    .entry-list,
    #appointmentsList {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #reportsScreen .glass-card {
        margin-top: 16px !important;
    }
}

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

/* Shared 2.0 page shell corrections. */
[data-profile-menu],
#menuBtn,
.app-header-action,
.appointment-header-action {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 13px !important;
}

.reports-hero {
    padding: 10px 16px !important;
    margin-bottom: 10px !important;
}

.reports-app-header,
.reports-title-row,
.reports-header-actions,
.reports-brand {
    display: flex;
    align-items: center;
}

.reports-app-header,
.reports-title-row {
    justify-content: space-between;
    gap: 14px;
}

.reports-brand {
    min-width: 0;
    gap: 10px;
}

.reports-brand-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex: 0 0 auto;
}

.reports-brand-name {
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
}

.reports-brand-shop {
    margin-top: 3px;
    color: #dbeafe;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dbm-brand-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
}

.dbm-brand-group {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px !important;
}

.dbm-brand-logo {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain;
    flex: 0 0 auto;
}

.dbm-brand-title,
body .hero .hero-top .dbm-brand-copy .dbm-brand-title.dbm-brand-title {
    width: 100%;
    color: #eef4ff !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.dbm-brand-subtitle,
body .hero .hero-top .dbm-brand-copy .dbm-brand-subtitle.dbm-brand-subtitle {
    width: 100%;
    margin-top: 3px;
    color: #dbeafe;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.25;
    text-align: left !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

@media (max-width: 480px) {
    .reports-hero {
        min-height: 68px;
        padding: 8px 10px !important;
    }

    .reports-hero .reports-app-header {
        min-height: 52px;
    }

    .dbm-brand-logo {
        width: 34px !important;
        height: 34px !important;
    }

    .dbm-brand-title,
    body .hero .hero-top .dbm-brand-copy .dbm-brand-title.dbm-brand-title {
        font-size: 15px !important;
    }

    .dbm-brand-subtitle,
    body .hero .hero-top .dbm-brand-copy .dbm-brand-subtitle.dbm-brand-subtitle {
        font-size: 12px !important;
    }
}

.reports-header-actions {
    gap: 8px;
    flex: 0 0 auto;
}

.reports-title-row {
    margin-top: 16px;
    align-items: flex-end;
}

.reports-eyebrow,
.appointment-inline-title p {
    margin: 0 0 4px;
    color: #bfdbfe;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.reports-title-row h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(24px, 4vw, 32px);
    line-height: 1;
}

.report-date-chip {
    max-width: min(54vw, 330px);
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,.36);
    border-radius: 12px;
    background: rgba(255,255,255,.16);
    color: #fff;
    font-size: 12px;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#reportsScreen > .hero:not(.reports-hero) {
    display: none !important;
}

#reportsScreen > .hero:not(.reports-hero) > div:first-child {
    display: none !important;
}

#reportsScreen .report-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 8px;
    overflow: visible;
    padding: 0;
}

.report-tabs-primary { margin-top: 16px; }

#reportsScreen .report-tabs-primary .report-tab {
    border-color: rgba(255,255,255,.35);
    background: rgba(255,255,255,.13);
    color: #ffffff;
    text-shadow: none;
}

#reportsScreen .report-tabs-primary .report-tab.active {
    border-color: #ffffff;
    background: #ffffff;
    color: #07599f;
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

/* One consistent, readable confirmation surface throughout the CRM. */
#appPopup {
    position: fixed !important;
    inset: 0 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box;
    z-index: 2147483600 !important;
    padding: 20px;
    background: rgba(15, 23, 42, .58) !important;
    backdrop-filter: blur(10px) !important;
}

#appPopup > div {
    width: min(100%, 420px) !important;
    max-width: 420px !important;
    padding: 28px !important;
    border: 1px solid rgba(255,255,255,.82) !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    box-shadow: 0 28px 72px rgba(15,23,42,.3) !important;
}

#popupMessage {
    margin-bottom: 22px !important;
    color: var(--dbm-text) !important;
    font-size: 16px !important;
    font-weight: 650 !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

#appPopup #popupOk,
#appPopup #popupCancel {
    min-height: 46px;
}

#appPopup .app-popup-actions.single-action {
    grid-template-columns: minmax(0, 1fr);
}

#appPopup.announcement-popup > .app-popup-panel {
    width: min(100%, 540px) !important;
    max-width: 540px !important;
    padding: clamp(26px, 4vw, 36px) !important;
}

#appPopup.announcement-popup .app-popup-title {
    margin: 2px 0 16px !important;
    line-height: 1.25;
}

#appPopup.announcement-popup #popupMessage {
    max-height: min(55vh, 520px) !important;
    margin: 0 0 28px !important;
    padding-right: 4px;
    overflow-y: auto !important;
    overflow-wrap: anywhere;
    white-space: pre-wrap !important;
    color: #52657a !important;
    font-size: clamp(15px, 2vw, 16px) !important;
    font-weight: 550 !important;
    line-height: 1.7 !important;
    text-align: left !important;
}

#appPopup.announcement-popup .app-popup-actions {
    margin-top: 4px;
}

/* Announcement severity is unmistakable while reusing the shared CRM dialog. */
#appPopup.announcement-popup-warning {
    background: rgba(69, 45, 5, .64) !important;
}

#appPopup.announcement-popup-warning > .app-popup-panel {
    border-color: #f4c46c !important;
    background: linear-gradient(180deg, #fffdf5 0%, #fff7df 100%) !important;
    box-shadow: 0 28px 72px rgba(91, 57, 5, .34) !important;
}

#appPopup.announcement-popup-warning .app-popup-panel::before {
    background: linear-gradient(90deg, #b54708, #f59e0b) !important;
}

#appPopup.announcement-popup-warning .app-popup-title {
    color: #7a2e0e !important;
}

#appPopup.announcement-popup-warning .app-popup-title::before,
#appPopup.announcement-popup-critical .app-popup-title::before {
    display: block;
    margin-bottom: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

#appPopup.announcement-popup-warning .app-popup-title::before {
    content: "Warning announcement";
    color: #b54708;
}

#appPopup.announcement-popup-warning #popupOk {
    border-color: #b54708 !important;
    background: #b54708 !important;
}

#appPopup.announcement-popup-critical {
    background: rgba(74, 12, 12, .7) !important;
}

#appPopup.announcement-popup-critical > .app-popup-panel {
    border-color: #f29b94 !important;
    background: linear-gradient(180deg, #fffafa 0%, #fff0ef 100%) !important;
    box-shadow: 0 28px 72px rgba(101, 18, 18, .4) !important;
}

#appPopup.announcement-popup-critical .app-popup-panel::before {
    height: 7px;
    background: linear-gradient(90deg, #8f1d18, #d92d20) !important;
}

#appPopup.announcement-popup-critical .app-popup-title {
    color: #8f1d18 !important;
}

#appPopup.announcement-popup-critical .app-popup-title::before {
    content: "Critical announcement";
    color: #d92d20;
}

#appPopup.announcement-popup-critical #popupOk {
    border-color: #b42318 !important;
    background: #b42318 !important;
    box-shadow: 0 10px 24px rgba(180,35,24,.28) !important;
}

/* Export is a focused workspace rather than a small bottom sheet. */
#exportSheet {
    z-index: 2300 !important;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    background: #eef5fb !important;
    backdrop-filter: none;
}

#exportSheet.show { display: flex; }

#exportSheet .sheet {
    width: 100% !important;
    max-width: none !important;
    min-height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: max(28px, env(safe-area-inset-top)) clamp(20px, 6vw, 96px) calc(28px + env(safe-area-inset-bottom));
    overflow-y: auto;
    border: 0 !important;
    border-radius: 0 !important;
    background: radial-gradient(circle at 92% 0%, rgba(18,163,180,.15), transparent 28rem), linear-gradient(135deg,#f8fbff,#eaf3fb) !important;
}

#exportSheet .sheet-handle { display: none; }
#exportSheet .sheet-top,
#exportSheet .field,
#exportSheet .sheet-actions {
    width: min(100%, 1180px);
    margin-left: auto;
    margin-right: auto;
}

#exportSheet .sheet-top {
    position: sticky;
    top: 0;
    z-index: 5;
    align-items: flex-start;
    padding: 20px 24px;
    margin-bottom: 4px;
    border-radius: 20px;
    background: linear-gradient(120deg,#07599f,#0f6cbd 55%,#0b9aaa);
    box-shadow: 0 20px 48px rgba(7,89,159,.2);
}

#exportSheet .sheet-title { color: #fff; font-size: 0; }
#exportSheet .sheet-title::after { content: "Export reports"; font-size: clamp(24px, 3vw, 30px); }
#exportSheet .sheet-subtitle { color: #e3f3ff; font-size: 14px; }
#exportSheet .sheet-top .icon-btn { min-width: 44px; min-height: 44px; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.14); color: #fff; font-size: 0; }
#exportSheet .sheet-top .icon-btn::after { content: "×"; font-size: 28px; font-weight: 400; line-height: 1; }

#exportSheet .field {
    display: block;
    box-sizing: border-box;
    margin-top: 24px !important;
    padding: 24px;
    border: 1px solid #d7e5f2;
    border-radius: 20px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 10px 28px rgba(30,64,105,.07);
}

#exportSheet .field label { display: block; margin-bottom: 9px; color: #102033; font-size: 17px; font-weight: 800; }
#exportSheet .field select { min-height: 48px; border-color: #b9d1e7; border-radius: 12px; }
#exportSheet .sheet-actions { margin-top: 24px; border: 0 !important; }
#exportSheet .sheet-actions .btn { min-height: 50px; }

#exportSheet #exportPdfBtn,
#exportSheet #exportExcelBtn,
#exportSheet #deliveryDownload,
#exportSheet #deliveryShare {
    min-height: 108px;
    border: 1px solid #cfe0ef !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 8px 20px rgba(30,64,105,.06);
}

#exportSheet #exportPdfBtn { border-color: #75b9e7 !important; background: #f4faff !important; }
#exportSheet #exportPdfBtn > div:first-child,
#exportSheet #exportExcelBtn > div:first-child,
#exportSheet #deliveryDownload > div:first-child,
#exportSheet #deliveryShare > div:first-child { font-size: 0 !important; }
#exportSheet #exportPdfBtn > div:first-child::after { content: "PDF"; font-size: 15px; font-weight: 900; color: #07599f; letter-spacing: .08em; }
#exportSheet #exportExcelBtn > div:first-child::after { content: "XLS"; font-size: 15px; font-weight: 900; color: #07599f; letter-spacing: .08em; }
#exportSheet #deliveryDownload > div:first-child::after { content: "SAVE"; font-size: 12px; font-weight: 900; color: #07599f; letter-spacing: .08em; }
#exportSheet #deliveryShare > div:first-child::after { content: "SHARE"; font-size: 12px; font-weight: 900; color: #07599f; letter-spacing: .08em; }
#exportSheet .export-range-btn { min-height: 48px; border-radius: 12px; }

/* Keep export controls compact and aligned like the CRM's regular page controls. */
#exportSheet .sheet > div:not(.sheet-handle):not(.sheet-top):not(.sheet-actions) {
    width: min(100%, 1180px);
    margin-left: auto !important;
    margin-right: auto !important;
}

#exportSheet div:has(> #rangeTodayBtn) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

#exportSheet .export-range-btn {
    min-height: 42px;
    padding: 0 10px;
    font-size: 14px;
    border-radius: 10px;
}

#exportSheet #exportPdfBtn,
#exportSheet #exportExcelBtn {
    height: 108px !important;
    padding: 14px !important;
}

#exportSheet #deliveryDownload,
#exportSheet #deliveryShare {
    min-height: 98px;
    padding: 13px !important;
}

#exportSheet #exportPdfBtn > div:nth-child(2),
#exportSheet #exportExcelBtn > div:nth-child(2) { margin-top: 8px !important; font-size: 16px !important; }
#exportSheet #exportPdfBtn > div:nth-child(3),
#exportSheet #exportExcelBtn > div:nth-child(3) { margin-top: 3px !important; }

/* _LIFT export workspace: restrained, icon-free and aligned to the standard
   application content width. Export behavior remains shared and unchanged. */
body.dbm-lift-active #exportSheet { background: #f3f7fb !important; }
body.dbm-lift-active #exportSheet .sheet {
    padding: max(18px, env(safe-area-inset-top)) 18px calc(22px + env(safe-area-inset-bottom)) !important;
    background: #f3f7fb !important;
}
body.dbm-lift-active #exportSheet .sheet-top,
body.dbm-lift-active #exportSheet .field,
body.dbm-lift-active #exportSheet .sheet-actions,
body.dbm-lift-active #exportSheet .sheet > div:not(.sheet-handle):not(.sheet-top):not(.sheet-actions) {
    width: min(100%, 960px) !important;
    box-sizing: border-box;
}
body.dbm-lift-active #exportSheet .sheet-top {
    position: static;
    align-items: center;
    margin-bottom: 18px !important;
    padding: 18px 20px !important;
    border: 1px solid #d5e1ee;
    border-radius: 16px;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(30,64,105,.07);
}
body.dbm-lift-active #exportSheet .sheet-title { color: #10233d !important; }
body.dbm-lift-active #exportSheet .sheet-title::after { content: "Export reports"; font-size: 24px; }
body.dbm-lift-active #exportSheet .sheet-subtitle { margin-top: 4px; color: #64748b !important; }
body.dbm-lift-active #exportSheet .sheet-top .icon-btn {
    width: auto; min-width: 72px; min-height: 40px; padding: 0 14px;
    border: 1px solid #cbd8e7 !important; border-radius: 10px;
    background: #fff !important; color: #334155 !important;
}
body.dbm-lift-active #exportSheet .sheet-top .icon-btn::after {
    content: "Close"; font-size: 13px; font-weight: 750;
}
body.dbm-lift-active #exportSheet #exportPdfBtn,
body.dbm-lift-active #exportSheet #exportExcelBtn,
body.dbm-lift-active #exportSheet #deliveryDownload,
body.dbm-lift-active #exportSheet #deliveryShare {
    min-height: 76px !important; height: 76px !important; padding: 12px 16px !important;
    border: 1px solid #cedbea !important; border-radius: 12px !important;
    background: #fff !important; box-shadow: none !important;
}
body.dbm-lift-active #exportSheet #exportPdfBtn > div:first-child,
body.dbm-lift-active #exportSheet #exportExcelBtn > div:first-child,
body.dbm-lift-active #exportSheet #deliveryDownload > div:first-child,
body.dbm-lift-active #exportSheet #deliveryShare > div:first-child,
body.dbm-lift-active #exportSheet #customExportDates .input-icon { display: none !important; }
body.dbm-lift-active #exportSheet[data-export-type="pdf"] #exportPdfBtn,
body.dbm-lift-active #exportSheet[data-export-type="excel"] #exportExcelBtn,
body.dbm-lift-active #exportSheet[data-delivery-mode="download"] #deliveryDownload,
body.dbm-lift-active #exportSheet[data-delivery-mode="share"] #deliveryShare {
    border-color: #4388c7 !important; background: #f2f8fd !important;
    box-shadow: inset 3px 0 0 #0f6cbd !important;
}
body.dbm-lift-active #exportSheet #exportPdfBtn > div:nth-child(2),
body.dbm-lift-active #exportSheet #exportExcelBtn > div:nth-child(2) {
    margin-top: 0 !important; font-size: 15px !important;
}
body.dbm-lift-active #exportSheet .export-range-btn {
    min-height: 42px; font-size: 0;
    border: 1px solid #cbd8e7 !important; background: #fff !important; color: #334155 !important;
}
body.dbm-lift-active #exportSheet .export-range-btn.active {
    border-color: #4388c7 !important; background: #eef6fd !important;
    color: #0f5fa7 !important; box-shadow: inset 0 -2px 0 #0f6cbd;
}
body.dbm-lift-active #exportSheet .export-range-btn { font-size: 14px !important; }
body.dbm-lift-active #exportSheet #previewStatus,
body.dbm-lift-active #exportSheet #exportActionBtn { font-size: 0 !important; }
body.dbm-lift-active #exportSheet #previewStatus::after { content: "Ready to export"; font-size: 14px; }
body.dbm-lift-active #exportSheet[data-delivery-mode="download"] #exportActionBtn::after {
    content: "Export report"; font-size: 16px;
}
body.dbm-lift-active #exportSheet[data-delivery-mode="share"] #exportActionBtn::after {
    content: "Share report"; font-size: 16px;
}
body.dbm-lift-active #exportSheet #exportActionBtn { height: 48px !important; border-radius: 11px !important; }

/* All application feedback must sit above full-screen workspaces and sheets. */
#successPopup {
    z-index: 2147483600 !important;
}
@media (max-width: 600px) {
    body.dbm-lift-active #exportSheet .sheet { padding-inline: 12px !important; }
    body.dbm-lift-active #exportSheet .sheet-top { padding: 15px 16px !important; }
    body.dbm-lift-active #exportSheet .sheet-title::after { font-size: 21px; }
}

/* About must stay above the full-screen Account & Settings workspace. */
#aboutModal.about-dialog {
    z-index: 2400 !important;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(8,24,42,.66) !important;
    backdrop-filter: blur(14px) saturate(120%);
}

#aboutModal.about-dialog > div {
    width: min(100%, 420px) !important;
    max-width: 420px !important;
    padding: 28px !important;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 24px !important;
    box-shadow: 0 32px 90px rgba(3,18,35,.38) !important;
}

@media (max-width: 600px) {
    #exportSheet .sheet-top { padding: 22px; }
    #exportSheet .field { padding: 20px; }
    #exportSheet div:has(> #rangeTodayBtn) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Compact, consistent hero actions. */
.hero #searchBtn,
.hero #appointmentSearchBtn,
.hero #reportsRefreshBtn,
.hero #reportsSearchBtn,
.hero .app-refresh-btn,
.hero #menuBtn,
.hero [data-profile-menu] {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.3) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.14) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    font-size: 19px !important;
}

.hero #searchBtn::after,
.hero #appointmentSearchBtn::after,
.hero #reportsRefreshBtn::after,
.hero #reportsSearchBtn::after,
.hero .app-refresh-btn::after,
.hero #menuBtn::after,
.hero [data-profile-menu]::after {
    display: none !important;
    content: none !important;
}

.hero #searchBtn:hover,
.hero #appointmentSearchBtn:hover,
.hero #reportsRefreshBtn:hover,
.hero #reportsSearchBtn:hover,
.hero .app-refresh-btn:hover,
.hero #menuBtn:hover,
.hero [data-profile-menu]:hover {
    background: rgba(255,255,255,.24) !important;
    transform: translateY(-1px);
}

#aboutModal .about-dialog-panel {
    display: grid;
    width: min(100%, 720px) !important;
    max-width: 720px !important;
    max-height: min(90dvh, 820px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 0 !important;
    overflow: hidden;
}

#aboutModal .about-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid #e1eaf3;
    background: linear-gradient(135deg, #f8fbff, #eef7ff);
}

#aboutModal .about-version-badge {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid #bfdbf4;
    border-radius: 999px;
    background: #fff;
    color: #0f6cbd;
    font-size: 12px;
    font-weight: 800;
}

#aboutModal .about-dialog-scroll {
    min-height: 0;
    padding: 20px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

#aboutModal .about-intro-card {
    padding: 16px;
    border: 1px solid #dbe7f2;
    border-radius: 15px;
    background: #f8fbff;
}

#aboutModal .about-intro-card p {
    margin: 0;
    color: #51677e;
    font-size: 14px;
    line-height: 1.6;
}

#aboutModal .about-link-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

#aboutModal .about-link-grid a {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid #cfe0f0;
    border-radius: 11px;
    background: #fff;
    color: #0f6cbd;
    text-decoration: none;
}

#aboutModal .about-link-grid span {
    color: #65798e;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

#aboutModal .about-link-grid strong {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#aboutModal .about-legal-section {
    margin-top: 20px;
    outline: none;
}

#aboutModal .about-legal-section h2 {
    margin: 0;
    color: #132a44;
    font-size: 20px;
}

#aboutModal .about-effective-date {
    margin: 4px 0 16px;
    color: #718399;
    font-size: 12px;
    font-weight: 700;
}

#aboutModal .about-legal-section h3 {
    margin: 17px 0 5px;
    color: #183654;
    font-size: 14px;
}

#aboutModal .about-legal-section p {
    margin: 0;
    color: #586d83;
    font-size: 13px;
    line-height: 1.58;
}

#aboutModal .about-legal-section a {
    color: #0f6cbd;
    font-weight: 750;
}

#aboutModal .about-legal-note {
    margin-top: 18px !important;
    padding: 12px 13px;
    border-left: 3px solid #f59e0b;
    border-radius: 8px;
    background: #fff8e8;
    color: #694d13 !important;
}

#aboutModal .about-copyright {
    margin: 20px 0 0;
    color: #8a9aad;
    font-size: 11px;
    text-align: center;
}

#aboutModal .about-dialog-footer {
    padding: 14px 24px;
    border-top: 1px solid #e1eaf3;
    background: #fff;
}

#aboutModal .about-dialog-footer .btn {
    width: 100%;
    min-height: 46px;
}

@media (max-width: 600px) {
    #aboutModal.about-dialog {
        padding: 10px;
    }
    #aboutModal .about-dialog-panel {
        width: 100% !important;
        max-height: calc(100dvh - 20px);
        border-radius: 20px !important;
    }
    #aboutModal .about-dialog-header {
        padding: 18px 18px 14px;
    }
    #aboutModal .about-dialog-scroll {
        padding: 16px 18px;
    }
    #aboutModal .about-link-grid {
        grid-template-columns: 1fr;
    }
    #aboutModal .about-dialog-footer {
        padding: 12px 18px;
    }
}

/* Standard vector Search icon. Unlike the former colour emoji, this renders
   identically on Android, iOS and desktop without a font baseline artifact. */
.dbm-standard-search-icon {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

/* Quiet appointment attention indicator: shown only for today/overdue work. */
.bottom-nav #appointmentBtn,
.bottom-nav [data-app-page="appointments"] {
    position: relative;
}

.appointment-nav-indicator {
    position: absolute;
    top: 5px;
    left: calc(50% + 8px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 10px;
    font-weight: 850;
    line-height: 1;
    box-shadow: 0 3px 8px rgba(185, 28, 28, .28);
    pointer-events: none;
}

.refresh-symbol {
    display: inline-block;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

/* Account menu is a true full-screen workspace. */
#accountModal {
    z-index: 2200 !important;
    padding: 0 !important;
    background: var(--dbm-bg) !important;
    align-items: stretch !important;
    overflow: hidden !important;
}

#accountModal > div {
    position: relative;
    width: 100% !important;
    max-width: none !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: max(24px, env(safe-area-inset-top)) clamp(18px, 5vw, 72px) calc(36px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    box-shadow: none !important;
}

#accountModal > div > * {
    width: min(100%, 900px);
    margin-left: auto;
    margin-right: auto;
}

.account-menu-close {
    flex-shrink: 0;
    width: 46px !important;
    height: 46px;
    margin: 0 !important;
    border: 1px solid var(--dbm-border);
    border-radius: 14px;
    background: #ffffff;
    color: var(--dbm-text);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--dbm-shadow);
}

body.account-menu-active .bottom-nav {
    visibility: hidden;
}

/* Account workspace: clear hierarchy, grouped controls, strong state visibility. */
#accountModal > div {
    background:
        radial-gradient(circle at 10% 0%, rgba(15,108,189,.12), transparent 32rem),
        linear-gradient(180deg, #edf4fb 0%, #f7faff 38%, #eef4f9 100%) !important;
}

#accountModal > div > * {
    width: min(100%, 1120px);
    box-sizing: border-box;
}

.account-menu-header {
    position: sticky;
    top: 0;
    z-index: 3;
    min-height: 76px;
    padding: 10px 16px !important;
    margin-bottom: 12px !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at 12% -20%, rgba(255,255,255,.24), transparent 42%),
        linear-gradient(125deg, #07599f 0%, #0f6cbd 52%, #0d8797 100%) !important;
    box-shadow: 0 18px 42px rgba(7,89,159,.22) !important;
}

.account-menu-header .account-menu-logo {
    width: 48px !important;
    height: 48px !important;
    border: 0;
    background: transparent !important;
    object-fit: contain;
    box-shadow: none !important;
}

.account-menu-header #accountModalTitle,
.account-menu-header #accountModalTitle + div {
    color: #ffffff !important;
}

.account-menu-header #accountModalTitle {
    color: #eef4ff !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}

.account-menu-header #accountModalTitle + div {
    margin-top: 3px;
    color: #dbeafe !important;
    font-size: 14px !important;
}

.account-menu-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.account-menu-action {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 14px !important;
    background: rgba(255,255,255,.14);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(12px);
}

.account-menu-action.account-menu-close {
    font-size: 26px;
}

.account-menu-action:hover {
    background: rgba(255,255,255,.24);
    transform: translateY(-1px);
}

.account-menu-identity,
.account-menu-license {
    display: flex !important;
    align-items: center;
    width: min(100%, 1120px) !important;
    min-height: 62px;
    padding: 10px 12px !important;
    margin-bottom: 10px !important;
    box-sizing: border-box;
    border: 1px solid #c8d9ea !important;
    background: #ffffff !important;
    box-shadow: 0 8px 22px rgba(15,48,79,.07);
}

.account-menu-identity {
    margin-top: 18px !important;
    border-left: 5px solid var(--dbm-primary) !important;
}

.account-menu-license {
    margin-left: auto !important;
    margin-right: auto !important;
    border-left: 5px solid #12a3b4 !important;
}

.account-menu-section-title {
    width: min(100%, 1120px) !important;
    margin: 28px auto 12px !important;
    color: #334155;
    font-size: 13px;
    letter-spacing: .09em;
    text-transform: uppercase;
}

#accountModal .settings-action,
.account-menu-automation,
.account-menu-support {
    width: min(100%, 1120px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 10px !important;
    border: 1px solid #c8d9ea !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 7px 20px rgba(15,48,79,.06) !important;
}

#accountModal .settings-action {
    min-height: 62px;
    padding: 10px 12px !important;
    border-left: 4px solid #6ea8d8 !important;
}

#accountModal .settings-action:hover,
#accountModal .settings-action:focus-visible {
    border-color: #7eafd7 !important;
    border-left-color: var(--dbm-primary) !important;
    background: #f7fbff !important;
    box-shadow: 0 12px 28px rgba(15,108,189,.12) !important;
    transform: translateY(-1px);
}

.account-menu-automation {
    padding: 10px 12px !important;
    border-left: 4px solid #18a67a !important;
    background: linear-gradient(90deg, #f0fdf8, #ffffff 42%) !important;
}

#accountModal .switch {
    width: 78px !important;
    height: 34px !important;
    cursor: pointer;
}

#accountModal .slider {
    border: 1px solid #94a3b8;
    background: #cbd5e1 !important;
}

#accountModal .slider::before {
    width: 26px;
    height: 26px;
    left: 3px;
    bottom: 3px;
}

#accountModal .slider::after {
    content: "OFF";
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: #334155;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
}

#accountModal .switch input:checked + .slider {
    border-color: #15803d;
    background: #16a34a !important;
}

#accountModal .switch input:checked + .slider::before {
    transform: translateX(43px);
}

#accountModal .switch input:checked + .slider::after {
    content: "ON";
    right: auto;
    left: 12px;
    color: #ffffff;
}

.account-menu-support {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.account-menu-support > div:first-child {
    margin-bottom: 10px !important;
    border: 0 !important;
    border-radius: 14px !important;
    overflow: visible !important;
}

#accountModal .account-menu-support .account-menu-secondary-action {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100% !important;
    min-height: 62px;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid #c8d9ea !important;
    border-left: 4px solid #6ea8d8 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 7px 20px rgba(15,48,79,.06) !important;
    color: var(--dbm-text) !important;
    text-align: left !important;
}

#accountModal .account-menu-support .account-menu-secondary-action::before {
    content: "";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
    color: var(--dbm-primary-strong);
    font-size: 20px;
    line-height: 1;
}

#accountModal .account-menu-support .account-menu-help::before {
    content: "\1F3A7";
}

#accountModal .account-menu-support .account-menu-help {
    border-left-color: #0d8797 !important;
}

#accountModal .account-menu-support .account-menu-about::before {
    content: "\2139";
}

#accountModal .account-menu-support .account-menu-about {
    border-left-color: var(--dbm-primary) !important;
}

#accountModal .account-menu-support .account-menu-logout::before {
    content: "\21AA";
    border: 1px solid #fecaca;
    background: linear-gradient(135deg, #fee2e2, #fff1f2);
    color: #b42318;
    font-weight: 900;
}

.account-menu-support-actions {
    margin-top: 8px;
    border: 1px solid #c8d9ea;
    border-radius: 12px;
}

#accountModal .account-menu-logout {
    border-color: #fecaca !important;
    border-left-color: #dc2626 !important;
    background: #fff1f2 !important;
    color: #b42318 !important;
    text-align: left !important;
    font-weight: 400 !important;
}

#accountModal .account-menu-support .account-menu-secondary-action.account-menu-logout {
    margin-top: 10px !important;
}

@media (min-width: 800px) {
    .account-menu-identity,
    .account-menu-license {
        display: flex !important;
        width: min(100%, 1120px) !important;
        min-height: 62px;
    }
}

@media (max-width: 640px) {
    #accountModal > div {
        padding: max(12px, env(safe-area-inset-top)) 12px calc(24px + env(safe-area-inset-bottom)) !important;
    }

    .account-menu-header {
        min-height: 68px;
        padding: 8px 10px !important;
        border-radius: 18px !important;
    }

    .account-menu-header .account-menu-logo {
        width: 34px !important;
        height: 34px !important;
        font-size: 16px !important;
    }

    .account-menu-header #accountModalTitle {
        font-size: 15px !important;
    }

    .account-menu-header #accountModalTitle + div {
        font-size: 12px !important;
    }
}

#reportsScreen .report-tab {
    width: 100%;
    min-width: 0;
    padding: 0 10px;
    white-space: nowrap;
}

/* The add form uses the same appointment design, without extending the list page. */
#appointmentAddPage {
    position: fixed !important;
    inset: 0 !important;
    z-index: 950 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    background: #ffffff !important;
}

#appointmentAddPage .page {
    max-width: 1180px !important;
    padding-top: 14px !important;
}

#appointmentAddPage .hero {
    display: none !important;
}

.appointment-inline-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: 8px 0 12px;
    padding: 18px;
    border: 1px solid var(--dbm-border);
    border-radius: 18px;
    background: var(--dbm-surface);
    box-shadow: var(--dbm-shadow);
}

.appointment-inline-title p {
    color: var(--dbm-primary);
}

.appointment-inline-title h1 {
    margin: 0;
    color: var(--dbm-text);
    font-size: 24px;
}

.appointment-inline-title span {
    display: block;
    margin-top: 5px;
    color: var(--dbm-muted);
    font-size: 14px;
}

.appointment-inline-title button {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid var(--dbm-border);
    border-radius: 12px;
    background: var(--dbm-surface-muted);
    color: var(--dbm-text);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

@media (max-width: 640px) {
    .reports-title-row {
        align-items: center;
    }

    .reports-title-row h1 {
        font-size: 26px;
    }

    #reportsScreen .report-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.customer-type-field { display:flex; flex-wrap:wrap; gap:10px 18px; margin:0 0 14px; padding:12px 14px; border:1px solid #d7e2f0; border-radius:13px; background:#f8fbff; }
.customer-type-field[hidden] { display:none !important; }
.customer-type-field legend { padding:0 6px; color:#334155; font-size:13px; font-weight:800; }
.customer-type-field label { display:flex; align-items:center; gap:7px; color:#263b56; font-weight:700; cursor:pointer; }
.customer-type-field input { accent-color:#2563eb; }
#carwashFields.dealer-mode { display:flex; flex-direction:column; }
#carwashFields.dealer-mode #customerTypeField { order:0; }
#carwashFields.dealer-mode #vehicleField { order:1; }
#carwashFields.dealer-mode #serviceCustomerNameField { order:2; }
#carwashFields.dealer-mode #serviceMobileField { order:3; }
#carwashFields.dealer-mode > .field:not(#vehicleField):not(#serviceCustomerNameField):not(#serviceMobileField) { order:4; }

/* Do not render a default industry form before the authenticated shop has
   been classified. syncIndustry() reveals the correct shared form only. */
#serviceForm[data-industry=""] {
    visibility: hidden;
}

.dbm-page-lift-search .settings-card {
    width: min(100%, 980px);
    margin-inline: auto;
    padding: clamp(20px, 3vw, 32px);
    border: 1px solid #d8e3f0;
    box-shadow: 0 14px 34px rgba(30, 64, 110, .08);
}

.lift-search-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}

.lift-search-form .field {
    margin: 0;
}

.lift-search-form .field label {
    display: block;
    margin: 0 0 7px;
    color: #334155;
    font-size: 13px;
    font-weight: 750;
}

.lift-search-form .input-wrap {
    min-height: 50px;
    border: 1px solid #cad8e8;
    border-radius: 12px;
    background: #fff;
}

.lift-search-form .input-wrap:focus-within {
    border-color: var(--dbm-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.lift-search-form .input-wrap input,
.lift-search-form .input-wrap select {
    min-height: 48px;
    padding: 0 14px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lift-search-form .input-wrap input:focus,
.lift-search-form .input-wrap select:focus {
    border: 0 !important;
    box-shadow: none !important;
}

.lift-search-kicker {
    margin: 0 0 5px !important;
    color: var(--dbm-primary) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: .09em;
}

.lift-search-type-dialog {
    grid-column: 1 / -1;
    min-width: 0;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--dbm-border);
    border-radius: 14px;
    background: #f8fbff;
}

.lift-search-type-dialog legend {
    padding: 0 7px;
    color: var(--dbm-text);
    font-size: 14px;
    font-weight: 800;
}

.lift-search-type-options {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 6px;
    padding: 4px;
    border: 1px solid #d5e0ed;
    border-radius: 11px;
    background: #eaf1f8;
}

.lift-search-type-options label {
    position: relative;
    min-width: 0;
    cursor: pointer;
}

.lift-search-type-options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.lift-search-type-options span {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #294560;
    font-weight: 800;
    transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}

.lift-search-type-options input:checked + span {
    border-color: #c5d6e8;
    background: #fff;
    color: #0f5fa7;
    box-shadow: 0 2px 7px rgba(30, 64, 110, .09);
}

.lift-search-type-options input:focus-visible + span {
    outline: 3px solid rgba(37, 99, 235, .22);
    outline-offset: 2px;
}

.lift-search-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 2px;
}

.lift-search-actions .btn {
    width: auto;
    min-width: 116px;
    min-height: 44px;
    border-radius: 10px;
}

.lift-search-actions .btn-secondary {
    border: 1px solid #cbd8e7;
    background: #fff;
    color: #334155;
}

.lift-search-results-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
}

.lift-search-results-heading .settings-section-title {
    margin: 0;
}

.lift-calendar-glyph {
    position: relative;
    width: 17px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 4px;
    box-sizing: border-box;
}

.lift-calendar-glyph::before {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    top: 3px;
    border-top: 2px solid currentColor;
}

@media (max-width: 700px) {
    .dbm-page-lift-search .settings-card {
        padding: 16px;
    }

    .lift-search-heading {
        margin-bottom: 14px;
    }

    .lift-search-form {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .lift-search-type-dialog,
    .lift-search-actions {
        grid-column: 1;
    }

    .lift-search-type-options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lift-search-type-options span {
        min-height: 42px;
    }

    .lift-search-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .lift-search-actions .btn {
        width: 100%;
        min-width: 0;
    }
}

/* Keep the shared summary hidden until the authenticated shop industry is
   known. Lift then reuses it with Lift-only labels and quotation data. */
body:not([data-industry]) #appContainer .stats-row {
    display: none !important;
}

body.lift-enquiry-open #carwashFields,
body.lift-enquiry-open #clinicFields {
    display: none !important;
}

body.lift-enquiry-open #liftFields {
    display: block !important;
}
.dealer-suggestions { position:absolute; z-index:80; top:calc(100% + 6px); left:0; right:0; max-height:230px; overflow:auto; padding:6px; border:1px solid #cbd9ea; border-radius:12px; background:#fff; box-shadow:0 18px 38px rgba(25,52,88,.18); }
.dealer-suggestions[hidden] { display:none !important; }
.dealer-dropdown-button { position:absolute; z-index:2; top:5px; right:3px; bottom:5px; display:grid; place-items:center; width:44px; height:auto; padding:0; border:0; border-left:1px solid #d7e2f0; border-radius:0 10px 10px 0; background:transparent; color:#315575; box-shadow:none; font-size:0; cursor:pointer; }
.dealer-dropdown-button[hidden] { display:none !important; }
.dealer-dropdown-button:hover,.dealer-dropdown-button:focus-visible { border-left-color:#82b7ef; background:#edf6ff; outline:0; }
.dealer-dropdown-button::before { content:""; width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transform-origin:center; transition:transform .18s ease; }
.dealer-dropdown-button[aria-expanded="true"]::before { transform:rotate(225deg); }
#serviceCustomerNameField .input-wrap:has(.dealer-dropdown-button:not([hidden])) #customerName { padding-right:56px; }

.report-custom-tab,
.report-custom-range-panel { display:none; }
.dealer-suggestion { display:grid; grid-template-columns:1fr auto; gap:12px; width:100%; padding:10px 12px; border:0; border-radius:9px; background:transparent; color:#172b46; text-align:left; cursor:pointer; }
.dealer-suggestion:hover,.dealer-suggestion:focus,.dealer-suggestion.is-active { background:#edf5ff; outline:none; }
.dealer-suggestion strong { font-size:14px; }.dealer-suggestion span { color:#64748b; font-size:12px; }

/* Service Type search - a page-drawn dropdown rather than a native
   <datalist>, which on several Android keyboards opened above the on-screen
   keyboard, half hidden behind it and not scrollable. */
.search-service-suggestions { position:absolute; z-index:80; top:calc(100% + 6px); left:0; right:0; max-height:230px; overflow:auto; padding:6px; border:1px solid #cbd9ea; border-radius:12px; background:#fff; box-shadow:0 18px 38px rgba(25,52,88,.18); }
.search-service-suggestions[hidden] { display:none !important; }
.search-service-dropdown-button { position:absolute; z-index:2; top:5px; right:3px; bottom:5px; display:grid; place-items:center; width:44px; height:auto; padding:0; border:0; border-left:1px solid #d7e2f0; border-radius:0 10px 10px 0; background:transparent; color:#315575; box-shadow:none; font-size:0; cursor:pointer; }
.search-service-dropdown-button:hover,.search-service-dropdown-button:focus-visible { border-left-color:#82b7ef; background:#edf6ff; outline:0; }
.search-service-dropdown-button::before { content:""; width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transform-origin:center; transition:transform .18s ease; }
.search-service-dropdown-button[aria-expanded="true"]::before { transform:rotate(225deg); }
#searchServiceField .input-wrap #searchService { padding-right:56px; }
.search-service-suggestion { display:block; width:100%; padding:10px 12px; border:0; border-radius:9px; background:transparent; color:#172b46; text-align:left; font-size:14px; cursor:pointer; }
.search-service-suggestion:hover,.search-service-suggestion:focus,.search-service-suggestion.is-active { background:#edf5ff; outline:none; }
.search-service-suggestion.is-membership { font-weight:700; color:#0f3d2e; }
.search-service-suggestion.is-membership span { display:block; font-size:11.5px; font-weight:500; color:#3f7360; margin-top:1px; }

.dealer-master-page { position:fixed; inset:0; z-index:970; overflow:auto; padding:16px 16px 110px; box-sizing:border-box; background:linear-gradient(180deg,#eef4ff,#f8fbff); }
.dealer-master-page[hidden], .dealer-form[hidden] { display:none !important; }
.dealer-master-shell { width:min(100%,980px); margin:auto; }
.dealer-master-header,.dealer-master-toolbar,.dealer-form,.dealer-list { border:1px solid #d7e2f0; border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(30,64,110,.07); }
.dealer-master-header { display:flex; align-items:center; justify-content:space-between; padding:18px; }
.dealer-master-header p { margin:0 0 3px; color:#2563eb; font-size:11px; font-weight:850; letter-spacing:.08em; }
.dealer-master-header h1 { margin:0; color:#12233d; font-size:24px; }
.dealer-master-header span { color:#64748b; font-size:13px; }
.dealer-master-header button { width:42px; height:42px; border:1px solid #d7e2f0; border-radius:12px; background:#f8fbff; font-size:24px; }
.dealer-master-toolbar { display:grid; grid-template-columns:1fr auto; gap:10px; margin-top:12px; padding:14px; }
.dealer-master-toolbar input,.dealer-form input { width:100%; min-height:44px; padding:0 13px; box-sizing:border-box; border:1.5px solid #d7e2f0; border-radius:10px; font:inherit; }
.dealer-master-toolbar button,.dealer-form button { min-height:44px; padding:0 18px; border:0; border-radius:10px; font-weight:800; }
.dealer-master-toolbar button,.dealer-form .primary-btn { color:#fff; background:#2563eb; }
.dealer-form { display:grid; grid-template-columns:1fr 1fr auto; gap:12px; align-items:end; margin-top:12px; padding:16px; }
.dealer-form label { display:block; margin-bottom:6px; color:#475b78; font-size:12px; font-weight:750; }
.dealer-prefix-input { display:flex; align-items:center; overflow:hidden; border:1.5px solid #d7e2f0; border-radius:10px; background:#f8fbff; }
.dealer-prefix-input span { padding:0 0 0 13px; color:#2563eb; font-weight:850; }
.dealer-prefix-input input { border:0; background:#fff; }
.dealer-form-actions,.dealer-row-actions { display:flex; gap:8px; }
.dealer-form-actions button:first-child { color:#334155; background:#e8eef7; }
.dealer-master-status { min-height:20px; padding:8px 4px; color:#64748b; font-size:13px; }
.dealer-list { overflow:hidden; }
.dealer-row { display:grid; grid-template-columns:1fr minmax(130px,220px) auto; gap:14px; align-items:center; padding:14px 16px; border-bottom:1px solid #e8eef6; }
.dealer-row:last-child { border-bottom:0; }
.dealer-row strong { color:#12233d; }.dealer-row span { color:#64748b; }
.dealer-row-actions button { min-height:36px; padding:0 12px; border:1px solid #d7e2f0; border-radius:9px; background:#f8fbff; font-weight:750; }
.dealer-row-actions button[data-action="delete"] { color:#b42318; }
.dealer-empty { padding:32px 16px; color:#64748b; text-align:center; }
@media(max-width:640px){.dealer-master-toolbar,.dealer-form{grid-template-columns:1fr}.dealer-row{grid-template-columns:1fr auto}.dealer-row>span{grid-column:1}.dealer-row-actions{grid-column:2;grid-row:1/span 2}}

/* Mobile resilience audit: keep shared controls usable on compact Android and
   iPhone widths without changing desktop layout or application behavior. */
@media (max-width: 480px) {
    #paymentFiltersRow .payment-filters {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        overflow: visible;
        padding: 0;
        scrollbar-width: none;
    }

    #paymentFiltersRow .payment-filter {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        padding: 6px 3px;
        /* Was 10px, which is below what these counts can be read at. The three
           chips share the row in equal thirds, so the width is what held the
           size down; trimming the side padding buys back what the larger text
           needs, and letting the label wrap keeps the longest of them - "UPI /
           Card" - intact on a narrow phone rather than clipping the count off
           the end. */
        font-size: 13px;
        line-height: 1.25;
        white-space: normal;
    }

    #searchHubPage .search-payment-filters {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
        padding: 0;
    }

    #searchHubPage .search-payment-filters .payment-filter {
        width: 100%;
        min-width: 0;
        min-height: 44px;
    }
}

@media (max-width: 340px) {
    body.dbm-lift-active .lift-dashboard-cards,
    body[class*="dbm-page-lift-"] .lift-dashboard-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.dbm-lift-active .lift-dashboard-card,
    body[class*="dbm-page-lift-"] .lift-dashboard-card {
        min-width: 0;
        padding: 12px 10px;
    }

    body.dbm-lift-active .lift-dashboard-card strong,
    body[class*="dbm-page-lift-"] .lift-dashboard-card strong {
        min-width: 0;
        overflow-wrap: anywhere;
        font-size: 15px;
        line-height: 1.25;
    }

    body.dbm-lift-active .lift-dashboard-card span,
    body[class*="dbm-page-lift-"] .lift-dashboard-card span {
        font-size: 11px;
        line-height: 1.3;
    }

    body.dbm-lift-active .lift-dashboard-periods,
    body[class*="dbm-page-lift-"] .lift-dashboard-periods {
        gap: 6px;
    }

    body.dbm-lift-active .lift-dashboard-period,
    body[class*="dbm-page-lift-"] .lift-dashboard-period {
        min-width: 86px;
        padding-inline: 6px;
        font-size: 12px;
    }

    .bottom-nav {
        width: calc(100% - 8px);
        padding-inline: 4px;
    }

    .bottom-nav .nav-item {
        overflow: hidden;
        padding-inline: 1px;
        font-size: 9px;
    }

    .bottom-nav .nav-item > span:not(.nav-icon) {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bottom-nav .nav-center {
        width: 54px;
        height: 54px;
        border-width: 4px !important;
    }

    #appointmentsPage .list-card > div:first-child {
        gap: 7px !important;
    }

    #appointmentsPage .list-card > div:first-child > div:first-child {
        min-width: 0;
    }

    #appointmentsPage .list-card > div:first-child > div:first-child > div:first-child {
        font-size: 21px !important;
    }

    #appointmentsPage .list-card > div:first-child > div:last-child {
        gap: 6px !important;
    }

    #appointmentsDatePickerBtn {
        width: 42px !important;
        min-width: 42px !important;
        height: 44px !important;
        min-height: 44px !important;
        border-radius: 13px !important;
    }

    #openAppointmentAddBtn {
        min-height: 44px !important;
        padding-inline: 9px !important;
        border-radius: 13px !important;
        font-size: 12px !important;
    }

    .hero .dbm-brand-subtitle {
        display: none !important;
    }

    .hero .dbm-brand-title {
        font-size: 13px !important;
    }

    .hero .dbm-brand-logo {
        width: 30px !important;
        height: 30px !important;
    }
}


/* Shared mobile application header. Every current and future industry should
   reuse these brand/action classes instead of defining device-specific sizes. */
@media (max-width: 767px) {
    .hero,
    .reports-hero {
        min-height: 68px !important;
        box-sizing: border-box;
        padding: 8px 10px !important;
        border-radius: 18px !important;
    }

    .hero .hero-top,
    .reports-hero .reports-app-header,
    .account-menu-header {
        min-width: 0;
        min-height: 52px;
        gap: 6px !important;
    }

    .hero .dbm-brand-group,
    .reports-hero .dbm-brand-group,
    .account-menu-header .dbm-brand-group {
        min-width: 0;
        flex: 1 1 auto;
        gap: 6px !important;
        overflow: hidden;
    }

    .hero .dbm-brand-logo,
    .reports-hero .dbm-brand-logo,
    .account-menu-header .dbm-brand-logo {
        width: 28px !important;
        height: 28px !important;
        flex: 0 0 28px;
    }

    .hero .dbm-brand-copy,
    .reports-hero .dbm-brand-copy,
    .account-menu-header .dbm-brand-copy {
        width: auto !important;
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
    }

    .hero .dbm-brand-title,
    .reports-hero .dbm-brand-title,
    .account-menu-header .dbm-brand-title,
    body .hero .hero-top .dbm-brand-copy .dbm-brand-title.dbm-brand-title {
        width: 100%;
        font-size: 14px !important;
        line-height: 1.15 !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hero .dbm-brand-subtitle,
    .reports-hero .dbm-brand-subtitle,
    .account-menu-header .dbm-brand-subtitle,
    body .hero .hero-top .dbm-brand-copy .dbm-brand-subtitle.dbm-brand-subtitle {
        width: 100%;
        margin-top: 2px;
        font-size: 11px !important;
        line-height: 1.2 !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hero .hero-actions,
    .hero .hero-top > div:last-child,
    .reports-hero .reports-header-actions,
    .account-menu-header-actions {
        min-width: max-content;
        flex: 0 0 auto;
        gap: 4px !important;
    }

    .hero .hero-actions > .hero-icon-btn,
    .hero .hero-actions > .app-header-action,
    .hero .hero-top > div:last-child > .hero-icon-btn,
    .hero .hero-top > div:last-child > .app-header-action,
    .hero .hero-top > div:last-child > #searchBtn,
    .hero .hero-top > div:last-child > #menuBtn,
    .reports-hero .reports-header-actions > .app-header-action,
    .account-menu-header-actions > .app-header-action {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        border-radius: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 42px;
        font-size: 19px !important;
        line-height: 1 !important;
    }

    .hero .dbm-standard-search-icon,
    .reports-hero .dbm-standard-search-icon,
    .account-menu-header .dbm-standard-search-icon {
        width: 19px;
        height: 19px;
    }

    .hero .refresh-symbol,
    .reports-hero .refresh-symbol,
    .account-menu-header .refresh-symbol {
        font-size: 19px !important;
        line-height: 1 !important;
    }
}

@media (max-width: 340px) {
    .hero,
    .reports-hero {
        padding-inline: 7px !important;
    }

    .hero .dbm-brand-logo,
    .reports-hero .dbm-brand-logo,
    .account-menu-header .dbm-brand-logo {
        width: 24px !important;
        height: 24px !important;
        flex-basis: 24px;
    }

    .hero .dbm-brand-title,
    .reports-hero .dbm-brand-title,
    .account-menu-header .dbm-brand-title,
    body .hero .hero-top .dbm-brand-copy .dbm-brand-title.dbm-brand-title {
        font-size: 12px !important;
    }

    .hero .dbm-brand-subtitle,
    .reports-hero .dbm-brand-subtitle,
    .account-menu-header .dbm-brand-subtitle {
        display: none !important;
    }

    .hero .hero-actions > .hero-icon-btn,
    .hero .hero-actions > .app-header-action,
    .hero .hero-top > div:last-child > .hero-icon-btn,
    .hero .hero-top > div:last-child > .app-header-action,
    .hero .hero-top > div:last-child > #searchBtn,
    .hero .hero-top > div:last-child > #menuBtn,
    .reports-hero .reports-header-actions > .app-header-action,
    .account-menu-header-actions > .app-header-action {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        flex-basis: 40px;
    }
}
/* Shared customer contact actions: one responsive treatment for every industry. */
.dbm-contact-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.dbm-contact-actions .dbm-contact-action {
    min-width: 0;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 750;
}

.dbm-contact-actions .dbm-contact-action span:first-child {
    font-size: 18px;
    line-height: 1;
}

.dbm-contact-actions .dbm-contact-whatsapp {
    border-color: #86d5a9;
    color: #08783e;
    background: #f3fff8;
}

@media (max-width: 420px) {
    .dbm-contact-actions { gap: 7px; }
    .dbm-contact-actions .dbm-contact-action {
        min-height: 44px;
        padding-inline: 8px;
        font-size: 13px;
        gap: 5px;
    }
}

/* Login experience: light motion only, with no authentication dependency. */
body.crm-login-visible #loginContainer.page:not([style*="none"]) .app-hero {
    isolation: isolate;
}

body.crm-login-visible #loginContainer.page:not([style*="none"]) .app-hero::before,
body.crm-login-visible #loginContainer.page:not([style*="none"]) .app-hero::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: clamp(180px, 30vw, 420px);
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(3px);
    opacity: .22;
}

body.crm-login-visible #loginContainer.page:not([style*="none"]) .app-hero::before {
    top: -18%;
    left: -12%;
    background: radial-gradient(circle, rgba(255,255,255,.82), rgba(125,211,252,.08) 66%, transparent 70%);
    animation: dbmLoginGlowOne 11s ease-in-out infinite alternate;
}

body.crm-login-visible #loginContainer.page:not([style*="none"]) .app-hero::after {
    right: -16%;
    bottom: -24%;
    background: radial-gradient(circle, rgba(103,232,249,.72), rgba(59,130,246,.08) 64%, transparent 70%);
    animation: dbmLoginGlowTwo 13s ease-in-out infinite alternate;
}

body.crm-login-visible #loginContainer.page:not([style*="none"]) .app-hero .hero-top,
body.crm-login-visible #loginContainer.page:not([style*="none"]) .dbm-desktop-login-benefits {
    position: relative;
    z-index: 1;
}

body.crm-login-visible #loginContainer.page:not([style*="none"]) .app-hero .hero-top {
    animation: dbmLoginBrandEnter .65s cubic-bezier(.22,.8,.26,1) both;
}

body.crm-login-visible #loginContainer.page:not([style*="none"]) .app-hero img {
    animation: dbmLoginLogoFloat 5s ease-in-out .7s infinite;
}

body.crm-login-visible #loginContainer.page:not([style*="none"]) .dbm-desktop-login-benefits > p,
body.crm-login-visible #loginContainer.page:not([style*="none"]) .dbm-desktop-login-benefits > h2,
body.crm-login-visible #loginContainer.page:not([style*="none"]) .dbm-desktop-login-benefits li {
    animation: dbmLoginBenefitEnter .5s cubic-bezier(.22,.8,.26,1) both;
}

body.crm-login-visible #loginContainer.page:not([style*="none"]) .dbm-desktop-login-benefits > p { animation-delay: .16s; }
body.crm-login-visible #loginContainer.page:not([style*="none"]) .dbm-desktop-login-benefits > h2 { animation-delay: .23s; }
body.crm-login-visible #loginContainer.page:not([style*="none"]) .dbm-desktop-login-benefits li:nth-child(1) { animation-delay: .30s; }
body.crm-login-visible #loginContainer.page:not([style*="none"]) .dbm-desktop-login-benefits li:nth-child(2) { animation-delay: .36s; }
body.crm-login-visible #loginContainer.page:not([style*="none"]) .dbm-desktop-login-benefits li:nth-child(3) { animation-delay: .42s; }
body.crm-login-visible #loginContainer.page:not([style*="none"]) .dbm-desktop-login-benefits li:nth-child(4) { animation-delay: .48s; }
body.crm-login-visible #loginContainer.page:not([style*="none"]) .dbm-desktop-login-benefits li:nth-child(5) { animation-delay: .54s; }
body.crm-login-visible #loginContainer.page:not([style*="none"]) .dbm-desktop-login-benefits li:nth-child(6) { animation-delay: .60s; }

body.crm-login-visible #loginContainer.page:not([style*="none"]) .glass-card.form-card {
    animation: dbmLoginFormEnter .7s cubic-bezier(.22,.8,.26,1) .08s both;
}

body.crm-login-visible #loginContainer.page:not([style*="none"]) .form-grid > h1,
body.crm-login-visible #loginContainer.page:not([style*="none"]) .form-grid > p,
body.crm-login-visible #loginContainer.page:not([style*="none"]) .form-grid > .field,
body.crm-login-visible #loginContainer.page:not([style*="none"]) .form-grid > .action-row {
    animation: dbmLoginControlEnter .42s ease-out both;
}

body.crm-login-visible #loginContainer.page:not([style*="none"]) .form-grid > h1 { animation-delay: .22s; }
body.crm-login-visible #loginContainer.page:not([style*="none"]) .form-grid > p { animation-delay: .27s; }
body.crm-login-visible #loginContainer.page:not([style*="none"]) .form-grid > .field:nth-of-type(1) { animation-delay: .32s; }
body.crm-login-visible #loginContainer.page:not([style*="none"]) .form-grid > .field:nth-of-type(2) { animation-delay: .37s; }
body.crm-login-visible #loginContainer.page:not([style*="none"]) .form-grid > .field:nth-of-type(3) { animation-delay: .42s; }
body.crm-login-visible #loginContainer.page:not([style*="none"]) .form-grid > .action-row { animation-delay: .47s; }

body.crm-login-visible #loginContainer .input-wrap input {
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease;
}

body.crm-login-visible #loginContainer .input-wrap:focus-within input {
    border-color: #4f8df5 !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(37,99,235,.11), 0 8px 18px rgba(37,99,235,.08);
    transform: translateY(-1px);
}

body.crm-login-visible #loginContainer .input-wrap .input-icon {
    transition: opacity .18s ease, transform .18s ease;
}

body.crm-login-visible #loginContainer .input-wrap:focus-within .input-icon {
    opacity: 1;
    transform: translateY(-50%) scale(1.08);
}

body.crm-login-visible #loginContainer #loginBtn {
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

body.crm-login-visible #loginContainer #loginBtn:hover {
    box-shadow: 0 12px 24px rgba(37,99,235,.24);
    filter: saturate(1.08);
    transform: translateY(-2px);
}

body.crm-login-visible #loginContainer #loginBtn:active {
    transform: translateY(0) scale(.99);
}

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

@keyframes dbmLoginBenefitEnter {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes dbmLoginFormEnter {
    from { opacity: 0; transform: translateX(18px); }
    to { opacity: 1; transform: translateX(0); }
}

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

@keyframes dbmLoginLogoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes dbmLoginGlowOne {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(34px, 24px, 0) scale(1.12); }
}

@keyframes dbmLoginGlowTwo {
    from { transform: translate3d(0, 0, 0) scale(1.05); }
    to { transform: translate3d(-28px, -20px, 0) scale(.92); }
}

@media (prefers-reduced-motion: reduce) {
    body.crm-login-visible #loginContainer.page:not([style*="none"]) *,
    body.crm-login-visible #loginContainer.page:not([style*="none"]) *::before,
    body.crm-login-visible #loginContainer.page:not([style*="none"]) *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        transition-duration: .01ms !important;
    }
}

/* Premium mobile sign-in card. Desktop split-pane rules remain untouched. */
@media (max-width: 767px) {
    body.crm-login-visible {
        min-height: 100dvh;
        overflow-x: hidden;
        background:
            radial-gradient(circle at 8% 2%, rgba(96,165,250,.24), transparent 32%),
            radial-gradient(circle at 96% 26%, rgba(34,211,238,.16), transparent 30%),
            linear-gradient(180deg, #eaf4ff 0%, #f7fbff 43%, #eef4fb 100%) !important;
    }

    body.crm-login-visible #loginContainer.page:not([style*="none"]) {
        display: grid !important;
        width: 100%;
        max-width: 520px;
        min-height: 100dvh;
        align-content: start;
        gap: 14px;
        margin: 0 auto;
        padding: max(14px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
        box-sizing: border-box;
    }

    body.crm-login-visible #loginContainer .app-hero {
        position: relative !important;
        top: auto !important;
        display: block !important;
        min-height: 174px !important;
        margin: 0 !important;
        padding: 24px 18px 20px !important;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,.3) !important;
        border-radius: 24px !important;
        background:
            radial-gradient(circle at 10% 10%, rgba(125,211,252,.55), transparent 34%),
            radial-gradient(circle at 88% 96%, rgba(45,212,191,.25), transparent 38%),
            linear-gradient(135deg, #1559b7 0%, #087fa3 100%) !important;
        box-shadow: 0 18px 42px rgba(15,79,145,.22) !important;
    }

    body.crm-login-visible #loginContainer .app-hero .hero-top {
        display: grid !important;
        min-height: 128px !important;
        grid-template-columns: 1fr !important;
        place-items: center;
        align-content: center;
        gap: 10px !important;
        text-align: center;
    }

    body.crm-login-visible #loginContainer .app-hero img {
        position: static !important;
        width: 64px !important;
        height: 58px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        object-fit: contain;
        box-shadow: 0 12px 26px rgba(2,32,71,.24) !important;
    }

    body.crm-login-visible #loginContainer .app-hero .dbm-desktop-login-brand {
        position: static !important;
        inset: auto !important;
        display: grid !important;
        width: 100% !important;
        min-width: 0;
        gap: 5px;
        padding: 0 !important;
        pointer-events: none;
    }

    body.crm-login-visible #loginContainer .app-hero .dbm-desktop-login-brand > span:first-child {
        color: #fff !important;
        font-size: clamp(22px, 7vw, 29px) !important;
        font-weight: 850 !important;
        line-height: 1.12 !important;
        letter-spacing: -.02em !important;
        white-space: normal !important;
        text-shadow: 0 3px 14px rgba(2,35,72,.2);
    }

    body.crm-login-visible #loginContainer .app-hero .dbm-desktop-login-brand > span:last-child {
        margin: 0 !important;
        color: rgba(239,249,255,.9) !important;
        font-size: 12px !important;
        font-weight: 650;
        line-height: 1.35 !important;
        letter-spacing: .04em !important;
    }

    body.crm-login-visible #loginContainer .app-hero .dbm-desktop-login-brand > span:last-child {
        font-size: 0 !important;
    }

    body.crm-login-visible #loginContainer .app-hero .dbm-desktop-login-brand > span:last-child::after {
        content: "Secure cloud business workspace";
        font-size: 12px;
    }

    body.crm-login-visible #loginContainer .dbm-desktop-login-benefits {
        display: none !important;
    }

    body.crm-login-visible #loginContainer .glass-card.form-card {
        display: block;
        margin: 0 !important;
        padding: 17px !important;
        overflow: visible;
        border: 1px solid rgba(206,221,237,.92) !important;
        border-radius: 24px !important;
        background: rgba(255,255,255,.94) !important;
        box-shadow: 0 18px 44px rgba(28,69,111,.12) !important;
        backdrop-filter: blur(18px);
    }

    body.crm-login-visible #loginContainer .form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px 10px !important;
    }

    body.crm-login-visible #loginContainer .form-grid > * {
        grid-column: 1 / -1;
    }

    body.crm-login-visible #loginContainer .form-grid > h1 {
        margin: 0 !important;
        font-size: 25px !important;
        line-height: 1.15;
    }

    body.crm-login-visible #loginContainer .form-grid > p {
        margin: -3px 0 3px !important;
        color: #64748b;
        font-size: 13px !important;
        opacity: 1 !important;
    }

    body.crm-login-visible #loginContainer .field {
        display: grid;
        gap: 6px;
        margin: 0 !important;
    }

    body.crm-login-visible #loginContainer .field label {
        margin: 0 !important;
        color: #334155;
        font-size: 12px;
        font-weight: 750;
    }

    body.crm-login-visible #loginContainer .field input[type="text"],
    body.crm-login-visible #loginContainer .field input[type="password"] {
        width: 100% !important;
        height: 50px !important;
        min-height: 50px !important;
        padding: 0 13px 0 42px !important;
        border: 1px solid #d3dfec !important;
        border-radius: 14px !important;
        background: #f8fbff !important;
        color: #10253e;
        font-size: 15px !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
    }

    body.crm-login-visible #loginContainer .field:has(#rememberShopId),
    body.crm-login-visible #loginContainer .field:has(#rememberMe) {
        grid-column: span 1;
        align-self: stretch;
    }

    body.crm-login-visible #loginContainer .field:has(#rememberShopId) > label,
    body.crm-login-visible #loginContainer .field:has(#rememberMe) > label {
        display: flex !important;
        min-height: 42px;
        align-items: center !important;
        gap: 7px !important;
        padding: 8px 9px;
        border: 1px solid #dce6f1;
        border-radius: 12px;
        background: #f7faff;
        box-sizing: border-box;
        font-size: 11px !important;
        line-height: 1.25;
    }

    body.crm-login-visible #loginContainer #rememberShopId,
    body.crm-login-visible #loginContainer #rememberMe {
        width: 17px !important;
        min-width: 17px !important;
        height: 17px !important;
        margin: 0;
        accent-color: #2563eb;
    }

    body.crm-login-visible #loginContainer #quickLoginBox {
        margin: 2px 0 0 !important;
        padding: 10px;
        border: 1px solid #dce7f4;
        border-radius: 15px;
        background: #f8fbff;
    }

    body.crm-login-visible #loginContainer #quickLoginBox > div:first-child {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
        border-radius: 13px !important;
        box-shadow: none !important;
    }

    body.crm-login-visible #loginContainer .action-row {
        margin: 0 !important;
    }

    body.crm-login-visible #loginContainer #loginBtn {
        width: 100%;
        min-height: 50px;
        border: 0;
        border-radius: 14px;
        background: linear-gradient(135deg, #2563eb, #1377ce);
        box-shadow: 0 12px 26px rgba(37,99,235,.22);
        font-size: 15px;
        font-weight: 800;
    }

    body.crm-login-visible #loginContainer .login-forgot-action {
        margin-top: 0 !important;
    }

    body.crm-login-visible #loginContainer .login-forgot-action button {
        font-size: 13px !important;
    }

    body.crm-login-visible #loginContainer .login-legal-copy {
        margin: 0 !important;
        padding: 2px 12px 0 !important;
        color: #60758c;
        font-size: 10px !important;
        line-height: 1.5 !important;
    }

    body.crm-login-visible #loginContainer .login-copyright {
        margin: -5px 0 0 !important;
        color: #8293a8 !important;
        font-size: 10px !important;
    }
}

@media (max-width: 360px) {
    body.crm-login-visible #loginContainer.page:not([style*="none"]) {
        gap: 10px;
        padding-inline: 10px;
    }

    body.crm-login-visible #loginContainer .app-hero {
        min-height: 150px !important;
        padding: 17px 14px !important;
        border-radius: 21px !important;
    }

    body.crm-login-visible #loginContainer .app-hero .hero-top {
        min-height: 116px !important;
    }

    body.crm-login-visible #loginContainer .app-hero img {
        width: 54px !important;
        height: 49px !important;
    }

    body.crm-login-visible #loginContainer .glass-card.form-card {
        padding: 14px !important;
        border-radius: 21px !important;
    }

    body.crm-login-visible #loginContainer .field:has(#rememberShopId) > label,
    body.crm-login-visible #loginContainer .field:has(#rememberMe) > label {
        padding-inline: 7px;
        font-size: 10px !important;
    }
}

/* Fixed mobile login viewport: clean white canvas and horizontal brand row. */
@media (max-width: 767px) {
    html:has(body.crm-login-visible) {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #fff;
    }

    body.crm-login-visible {
        width: 100%;
        height: 100dvh;
        min-height: 0;
        overflow: hidden !important;
        overscroll-behavior: none;
        background: #fff !important;
    }

    body.crm-login-visible #loginContainer.page:not([style*="none"]) {
        height: 100dvh;
        min-height: 0;
        grid-template-rows: auto minmax(0, 1fr);
        align-content: stretch;
        gap: 10px;
        padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom));
        overflow: hidden;
        background: #fff;
    }

    body.crm-login-visible #loginContainer .app-hero {
        min-height: 104px !important;
        padding: 16px !important;
        border-radius: 20px !important;
        box-shadow: 0 12px 28px rgba(15,79,145,.17) !important;
    }

    body.crm-login-visible #loginContainer .app-hero .hero-top {
        display: grid !important;
        min-height: 70px !important;
        grid-template-columns: 56px minmax(0, 1fr) !important;
        place-items: center start;
        align-content: center;
        gap: 12px !important;
        text-align: left;
    }

    body.crm-login-visible #loginContainer .app-hero img {
        width: 56px !important;
        height: 54px !important;
        grid-column: 1;
        border-radius: 12px !important;
    }

    body.crm-login-visible #loginContainer .app-hero .dbm-desktop-login-brand {
        grid-column: 2;
        justify-items: start;
        gap: 4px;
        text-align: left;
    }

    body.crm-login-visible #loginContainer .app-hero .dbm-desktop-login-brand > span:first-child {
        width: 100%;
        font-size: clamp(20px, 6.4vw, 27px) !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    body.crm-login-visible #loginContainer .app-hero .dbm-desktop-login-brand > span:last-child::after {
        font-size: 11px;
    }

    body.crm-login-visible #loginContainer .glass-card.form-card {
        min-height: 0;
        height: 100%;
        padding: 14px 16px 11px !important;
        overflow: hidden;
        border-radius: 20px !important;
        background: #fff !important;
        box-shadow: 0 12px 30px rgba(28,69,111,.1) !important;
    }

    body.crm-login-visible #loginContainer .form-grid {
        gap: 8px 9px !important;
    }

    body.crm-login-visible #loginContainer .form-grid > h1 {
        font-size: 23px !important;
    }

    body.crm-login-visible #loginContainer .field {
        gap: 4px;
    }

    body.crm-login-visible #loginContainer .field input[type="text"],
    body.crm-login-visible #loginContainer .field input[type="password"] {
        height: 46px !important;
        min-height: 46px !important;
        border-radius: 12px !important;
    }

    body.crm-login-visible #loginContainer .field:has(#rememberShopId) > label,
    body.crm-login-visible #loginContainer .field:has(#rememberMe) > label {
        min-height: 36px;
        padding: 6px 8px;
        border-radius: 10px;
    }

    body.crm-login-visible #loginContainer #quickLoginBox {
        margin: 0 !important;
        padding: 6px;
        border-radius: 12px;
    }

    body.crm-login-visible #loginContainer #quickLoginBox > div:first-child {
        min-height: 40px;
        padding: 6px 12px !important;
    }

    body.crm-login-visible #loginContainer #quickLoginBox > div[style*="height:10px"] {
        display: none !important;
    }

    body.crm-login-visible #loginContainer #quickLoginBox > div:last-child {
        padding: 2px 7px !important;
    }

    body.crm-login-visible #loginContainer #loginBtn {
        min-height: 46px;
        border-radius: 12px;
    }

    body.crm-login-visible #loginContainer .login-forgot-action button {
        padding-block: 3px !important;
    }

    body.crm-login-visible #loginContainer .login-legal-copy {
        width: min(100%, 360px);
        margin: 8px auto 0 !important;
        padding: 0 8px !important;
        color: #64748b !important;
        font-size: 10px !important;
        line-height: 1.45 !important;
        box-sizing: border-box;
    }

    body.crm-login-visible #loginContainer .login-copyright {
        width: 100%;
        margin: 5px 0 0 !important;
        padding: 0 8px;
        font-size: 9px !important;
        line-height: 1.35 !important;
        box-sizing: border-box;
    }
}

@media (max-width: 767px) and (max-height: 700px) {
    body.crm-login-visible #loginContainer.page:not([style*="none"]) {
        gap: 7px;
        padding-top: max(7px, env(safe-area-inset-top));
        padding-bottom: max(7px, env(safe-area-inset-bottom));
    }

    body.crm-login-visible #loginContainer .app-hero {
        min-height: 82px !important;
        padding: 10px 14px !important;
        border-radius: 17px !important;
    }

    body.crm-login-visible #loginContainer .app-hero .hero-top {
        min-height: 60px !important;
        grid-template-columns: 47px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    body.crm-login-visible #loginContainer .app-hero img {
        width: 47px !important;
        height: 45px !important;
    }

    body.crm-login-visible #loginContainer .app-hero .dbm-desktop-login-brand > span:first-child {
        font-size: clamp(18px, 5.8vw, 23px) !important;
    }

    body.crm-login-visible #loginContainer .app-hero .dbm-desktop-login-brand > span:last-child::after {
        font-size: 10px;
    }

    body.crm-login-visible #loginContainer .glass-card.form-card {
        padding: 10px 13px 8px !important;
        border-radius: 17px !important;
    }

    body.crm-login-visible #loginContainer .form-grid {
        gap: 5px 8px !important;
    }

    body.crm-login-visible #loginContainer .form-grid > h1 {
        font-size: 20px !important;
    }

    body.crm-login-visible #loginContainer .form-grid > p {
        margin-bottom: 0 !important;
        font-size: 11px !important;
    }

    body.crm-login-visible #loginContainer .field input[type="text"],
    body.crm-login-visible #loginContainer .field input[type="password"] {
        height: 40px !important;
        min-height: 40px !important;
        font-size: 14px !important;
    }

    body.crm-login-visible #loginContainer .field label {
        font-size: 11px;
    }

    body.crm-login-visible #loginContainer .field:has(#rememberShopId) > label,
    body.crm-login-visible #loginContainer .field:has(#rememberMe) > label {
        min-height: 30px;
        padding-block: 4px;
    }

    body.crm-login-visible #loginContainer #loginBtn {
        min-height: 40px;
    }

    body.crm-login-visible #loginContainer .login-forgot-action button {
        font-size: 11px !important;
    }

    body.crm-login-visible #loginContainer .login-legal-copy {
        margin-top: 3px !important;
        font-size: 8px !important;
        line-height: 1.3 !important;
    }

    body.crm-login-visible #loginContainer .login-copyright {
        display: none;
    }
}

@media (max-width: 340px) {
    body.crm-login-visible #loginContainer .app-hero .hero-top {
        grid-template-columns: 42px minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    body.crm-login-visible #loginContainer .app-hero img {
        width: 42px !important;
        height: 40px !important;
    }

    body.crm-login-visible #loginContainer .app-hero .dbm-desktop-login-brand > span:first-child {
        font-size: 17px !important;
    }
}

/* Login navigation safety: allow the complete sign-in surface to remain
   reachable on every mobile viewport, including browser chrome and keyboards. */
@media (max-width: 767px) {
    /* The document scrolls, not a box inside it.

       This used to lock html and body to the viewport and make the login
       container the only scroller. That works right up until the selector
       picking the scroller does not match - it tests an inline style for the
       substring "none" - and then nothing on the page scrolls at all and the
       sign-in button is stranded below the fold with no way to reach it.
       Reported on a OnePlus, where a taller browser chrome and a larger
       display size leave less room than the layout assumed.

       Ordinary document scrolling has none of that fragility: it survives the
       URL bar appearing, the keyboard opening, and any display scale the phone
       is set to, because the browser is doing the work rather than a rule. */
    html:has(body.crm-login-visible),
    body.crm-login-visible {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.crm-login-visible #loginContainer.page:not([style*="none"]) {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        /* Fills the screen when the form is short, grows past it when it is
           not. Never caps it. */
        min-height: 100dvh !important;
        max-height: none !important;
        grid-template-rows: auto auto !important;
        align-content: start !important;
        overflow: visible !important;
        box-sizing: border-box;
        padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 24px)) !important;
    }

    body.crm-login-visible #loginContainer .app-hero {
        width: calc(100% - 18px) !important;
        max-width: 430px !important;
        min-height: 76px !important;
        margin-inline: auto !important;
        padding: 9px 13px !important;
        box-sizing: border-box;
    }

    body.crm-login-visible #loginContainer .app-hero .hero-top {
        min-height: 56px !important;
    }

    body.crm-login-visible #loginContainer #installBtn {
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    body.crm-login-visible #loginContainer .glass-card.form-card {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

}

/* Money on an entry that has already been invoiced. The invoice is the record
   of what was charged, so these show the figure but no longer set it. */
.entry-money-locked{
    opacity:.55;
    cursor:not-allowed;
}

/* ✨ Ask DigiBillMate. Sits with the report blocks, so it inherits their card
   styling and only the row, chips and answer need describing here. */
.ai-ask-row{
    display:flex;
    gap:10px;
    margin-top:14px;
}

.ai-ask-row input{
    flex:1;
    min-width:0;
    padding:12px 14px;
    border:1px solid #d8e3f5;
    border-radius:12px;
    font:inherit;
}

.ai-ask-row button{
    flex:0 0 auto;
    padding:12px 22px;
}

.ai-ask-suggestions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
}

/* The example questions. Quieter than before, because they are a prompt for
   somebody who does not know what to ask, not a menu of the main actions - and
   eight loud pills competing with the answer above them is what made the panel
   feel busy. */
.ai-ask-chip{
    padding:7px 13px;
    border:1px solid #e3ebf7;
    border-radius:999px;
    background:#fbfdff;
    color:#5a6d87;
    font:inherit;
    font-size:12.5px;
    font-weight:600;
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease, color .15s ease;
}

.ai-ask-chip:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(29,78,216,.10);
    border-color:#2563eb;
    color:#2563eb;
}

/* The answer card. Raised off the panel rather than tinted into it, so the
   thing that was asked for is plainly the subject of the screen and the
   examples below it are plainly not. */
.ai-ask-answer{
    margin-top:14px;
    padding:16px 17px;
    border:1px solid #e3ebf7;
    border-radius:16px;
    background:#fff;
    box-shadow:0 6px 18px rgba(24,56,102,.07);
    line-height:1.5;
    animation:aiAskAnswerIn .22s ease-out;
}

/* Rises a few pixels as it arrives, which reads as the answer settling rather
   than the layout jumping. */
@keyframes aiAskAnswerIn{
    from{ opacity:0; transform:translateY(4px); }
    to{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion: reduce){
    .ai-ask-answer{ animation:none; }
}

.ai-ask-answer strong{
    display:block;
    margin-bottom:4px;
    color:#172033;
    font-size:16px;
}

.ai-ask-answer small{
    color:#64748b;
}

.ai-ask-answer.is-error{
    border-color:#f0c2bd;
    background:#fff6f5;
    color:#b42318;
}

/* ---------------------------------------------------------------------------
   Ask DigiBillMate: the floating launcher and its window.

   The launcher clears the bottom bar rather than sitting on it - 72px plus the
   phone's own safe area, which is what the bar itself is built from, so the two
   cannot come apart on a handset with a home indicator.

   It sits below the bar in the stack (9999) despite being above it on screen,
   so that if a short viewport ever brings them together the navigation stays
   reachable. The window itself goes above everything, including the desktop
   sidebar at 20000.
--------------------------------------------------------------------------- */

.ai-fab{
    position:fixed;
    right:16px;
    bottom:calc(72px + env(safe-area-inset-bottom) + 16px);
    z-index:9990;
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 18px 12px 15px;
    border:0;
    border-radius:999px;
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    color:#fff;
    font:700 15px/1 inherit;
    box-shadow:0 10px 26px rgba(37,99,235,.42);
    cursor:pointer;
    /* Held above the keyboard and any sticky footer on iOS. */
    -webkit-tap-highlight-color:transparent;
}

.ai-fab:active{
    transform:translateY(1px);
}

/* A ring that breathes out of the button every few seconds. Long gap, low
   opacity, and gone entirely for anyone who has asked not to be moved: it is
   there to be noticed once by somebody who has not opened the assistant yet,
   not to compete with the screen behind it all day. */
.ai-fab::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    box-shadow:0 0 0 0 rgba(37,99,235,.45);
    animation:aiFabPulse 4.5s ease-out infinite;
    pointer-events:none;
}

@keyframes aiFabPulse{
    0%{ box-shadow:0 0 0 0 rgba(37,99,235,.45); }
    22%{ box-shadow:0 0 0 12px rgba(37,99,235,0); }
    100%{ box-shadow:0 0 0 0 rgba(37,99,235,0); }
}

@media (prefers-reduced-motion: reduce){
    .ai-fab::after{ animation:none; }
}

/* A highlight along the top edge, which is what stops a solid gradient pill
   looking flat. */
.ai-fab{
    position:fixed;
    background-image:linear-gradient(135deg,#2f6fe4 0%,#1d4ed8 55%,#1740b4 100%);
    box-shadow:0 10px 26px rgba(29,78,216,.42), inset 0 1px 0 rgba(255,255,255,.28);
}

.ai-fab-icon{
    font-size:18px;
    line-height:1;
}

.ai-fab[hidden]{
    display:none;
}

/* ---------------------------------------------------------------------------
   What support staff do not see.

   Absent, not refused. A disabled button with a padlock names exactly what is
   being withheld and invites someone to go looking for it; a screen without the
   button raises no question at all.

   Done here rather than by hiding each one in script, so a control added to one
   of these areas later is covered by where it sits rather than by whoever adds
   it remembering. The worker refuses these routes regardless - none of this is
   the control, only the courtesy.
--------------------------------------------------------------------------- */
body[data-role="support"] #exportBtn,
body[data-role="support"] #searchHubBtn,
body[data-role="support"] #revenueGoalBlock,
body[data-role="support"] #businessAssistantBlock,
body[data-role="support"] .report-block,
body[data-role="support"] .dbm-owner-only,
body[data-role="support"] [data-owner-only]{
    display:none !important;
}

/* Support sees the outstanding count in Service Entries, but not collected
   payment methods. Keep the Customer Search payment filters unaffected. */
body[data-role="support"] .stats-row{
    display:none !important;
}

body[data-role="support"] #paymentFiltersRow .payment-filters{
    display:flex !important;
}

body[data-role="support"] #paymentFiltersRow .payment-filter[data-filter="gpay"],
body[data-role="support"] #paymentFiltersRow .payment-filter[data-filter="cash"]{
    display:none !important;
}

/* Nothing before today, so there is no date to pick. Hidden rather than
   disabled: a date field that refuses most dates invites somebody to find out
   which ones it accepts. */
body[data-role="support"] #serviceDateToolbar{
    display:none !important;
}

/* The bar sets display on its buttons, which beats the hidden attribute - so a
   nav item marked hidden in script went on rendering anyway. Restores what
   hidden is supposed to mean, for every caller rather than only this one. */
.bottom-nav .nav-item[hidden],
.bottom-nav .nav-center[hidden]{
    display:none !important;
}

/* The desktop sidebar, which is its own list and not the phone bar restyled -
   so hiding the bar's buttons left every one of these standing. A support user
   was offered Dashboard, Billing, Search, Reports, Settings, an invoice and a
   bulk message, none of which they can open.

   Listed by what each item is rather than by where it sits, so an item moved or
   reordered keeps its answer. Operations, Appointments, Add customer and Add
   appointment are what remains: their work, and nothing else. */
body[data-role="support"] [data-desktop-nav="reports"],
body[data-role="support"] [data-desktop-nav="billing"],
body[data-role="support"] [data-desktop-nav="liftBilling"],
body[data-role="support"] [data-desktop-nav="search"],
body[data-role="support"] [data-desktop-nav="export"],
body[data-role="support"] [data-desktop-nav="settings"],
body[data-role="support"] [data-desktop-action="invoice"],
body[data-role="support"] [data-desktop-action="messages"],
body[data-role="support"] [data-desktop-action="dealers"]{
    display:none !important;
}

/* Dealers are a standing trade relationship - part of how the shop is set up,
   not part of a day's work - so adding and amending them is the owner's.
   Selecting one is not: the entry form has a dealer picker on it, and a car
   wash that serves dealers needs staff to record their vehicles. The picker
   stays; the master list and its Add button go. */
body[data-role="support"] #dealerMasterPage,
body[data-role="support"] #dealerAddButton,
body[data-role="support"] #dealerForm{
    display:none !important;
}

/* Removal is the owner's - a deleted customer takes its history with it, and
   there is nothing to undo it with. */
body[data-role="support"] .danger-btn,
body[data-role="support"] .delete-btn,
body[data-role="support"] [data-action="delete"]{
    display:none !important;
}

/* Raising an invoice from an entry card. The card itself is support's work and
   stays; this one button on it leads to Billing, which is not. Left visible it
   was the worst of both - a button that looked available, opened a page that
   turned them round, and so appeared simply to do nothing. */
body[data-role="support"] [data-invoice-visit]{
    display:none !important;
}

/* Nothing floats over the login screen. Done in CSS rather than by remembering
   to hide it at every place a session can end. */
body.crm-login-visible .ai-fab,
body.crm-login-visible .ai-dock,
body.crm-login-visible .ai-dock-backdrop{
    display:none !important;
}

.ai-dock-backdrop{
    position:fixed;
    inset:0;
    z-index:20040;
    background:rgba(9,20,40,.44);
    backdrop-filter:blur(2px);
}

.ai-dock-backdrop[hidden],
.ai-dock[hidden]{
    display:none;
}

/* On a phone it is a sheet: full width, rising from the bottom, capped so the
   screen behind stays visible and the window never feels like a page change. */
.ai-dock{
    position:fixed;
    right:0;
    bottom:0;
    left:0;
    z-index:20050;
    display:flex;
    flex-direction:column;
    max-height:min(82vh,720px);
    border-radius:20px 20px 0 0;
    /* Clips the header to whatever corner the panel has, rather than the header
       carrying its own copy of that number - on a desktop the panel is 18px and
       the header was 20px, and the difference showed. The body does its own
       scrolling, so nothing here needs to overflow. */
    overflow:hidden;
    background:#fff;
    box-shadow:0 -18px 48px rgba(15,35,67,.28);
}

/* The assistant reads as its own thing rather than another card in the CRM.
   A deep header is the cheapest way to say that: the rest of the app is white
   on pale blue, so anything that is not signals a different kind of surface -
   and this one is the reason somebody opens the panel. */
.ai-dock-head{
    position:relative;
    /* Does not shrink. The panel is a flex column, and a flex item's default is
       to give up height when the ones beside it want more - so a long answer
       squeezed the header, crushing the title against the top edge. The middle
       is the part that should absorb it, and it already scrolls. */
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:16px 18px;
    overflow:hidden;
    background:linear-gradient(135deg,#123a72 0%,#1d4ed8 52%,#2f6fe4 100%);
}

/* A soft light thrown from behind the mark. Sits under the text at very low
   opacity, so it reads as depth rather than as a shape. */
.ai-dock-head::after{
    content:"";
    position:absolute;
    top:-70px;
    left:-30px;
    width:190px;
    height:190px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 68%);
    pointer-events:none;
}

.ai-dock-heading{
    position:relative;
    z-index:1;
    min-width:0;
    flex:1 1 auto;
}

.ai-dock-mark{
    position:relative;
    z-index:1;
    display:inline-flex;
    flex:0 0 auto;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:12px;
    background:rgba(255,255,255,.16);
    font-size:18px;
    line-height:1;
}

.ai-dock-kicker{
    margin:0 0 1px;
    /* Light enough to read on the gradient, quiet enough to stay a label. */
    color:rgba(226,238,255,.82);
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.ai-dock-title{
    margin:0;
    color:#fff;
    font-size:17.5px;
    font-weight:800;
    letter-spacing:-.01em;
}

.ai-dock-close{
    position:relative;
    z-index:1;
    flex:0 0 auto;
    width:34px;
    height:34px;
    border:1px solid rgba(255,255,255,.26);
    border-radius:10px;
    background:rgba(255,255,255,.12);
    color:#fff;
    font-size:15px;
    cursor:pointer;
    transition:background .15s ease;
}

.ai-dock-close:hover{
    background:rgba(255,255,255,.24);
}

.ai-dock-body{
    flex:1 1 auto;
    /* Without this a flex item refuses to shrink past its content, so a tall
       answer pushed the panel open and took the height from its neighbours
       instead of scrolling. */
    min-height:0;
    padding:14px 18px 4px;
    overflow-y:auto;
    overscroll-behavior:contain;
}

.ai-dock-hint{
    margin:0 0 12px;
    color:#64748b;
    font-size:13px;
    line-height:1.5;
}

.ai-dock-foot{
    flex:0 0 auto;
    padding:12px 18px max(14px,env(safe-area-inset-bottom));
    border-top:1px solid #e8eef8;
    background:#fff;
}

/* The answer already carries its own margin inside the card. */
.ai-dock-body .ai-ask-answer{
    margin-top:0;
}

@media (min-width:1024px){
    /* The bottom bar becomes a left sidebar on desktop, freeing the corner -
       but the desktop shell already keeps a refresh button there, at 28px in
       from each edge and 50px across. The launcher sits to its left on the same
       baseline, so the two read as a pair rather than one covering the other.

       Left rather than above, because a column of round buttons in a corner
       gives no clue which is which, while a row along the bottom edge is a
       shape people already read as a toolbar. */
    .ai-fab{
        right:calc(28px + 50px + 14px);
        bottom:28px;
        height:50px;
        padding:0 20px;
    }

    /* A panel rather than a sheet: anchored in the same corner it was opened
       from, so it reads as that button expanding rather than as a new page. */
    .ai-dock{
        top:auto;
        right:28px;
        bottom:28px;
        left:auto;
        width:min(430px,calc(100vw - 56px));
        max-height:min(76vh,680px);
        border-radius:18px;
        box-shadow:0 26px 64px rgba(15,35,67,.32);
    }

    /* The refresh button sits above everything at 20500, which put it on top of
       the assistant window and inside its backdrop - clickable, over a dialog
       that was meant to be modal. Hidden while the window is open rather than
       fought with over z-index, since refreshing the page behind is not
       something anyone reaches for mid-question. */
    body.ai-dock-open .dbm-desktop-floating-refresh{
        display:none !important;
    }
}

/* A listing answer is a column of like things - a plate and a count, a customer
   and what they spent - so it is a table, and reading down a column is the
   point.

   Sideways only. A table with its own vertical scrollbar inside a panel that
   also scrolls traps the drag: the table consumes it and the panel below cannot
   be reached on a touch screen. So it grows as tall as it likes and the panel
   does the scrolling, while a wide one still scrolls within its own box rather
   than pushing the panel out from under itself. The sticky header holds either
   way, since it sticks to whichever ancestor is doing the scrolling. */
.ai-ask-tablewrap{
    margin:10px 0 12px;
    overflow-x:auto;
    border:1px solid #e4ecf7;
    border-radius:12px;
}

.ai-ask-table{
    width:100%;
    border-collapse:collapse;
    font-size:13.5px;
}

.ai-ask-table th{
    position:sticky;
    top:0;
    background-image:linear-gradient(180deg,#f6faff 0%,#eef4fc 100%);
    /* The header stays put while the rows move under it, which is what makes a
       long list readable without scrolling back to remember the columns. */
    z-index:1;
    padding:9px 12px;
    border-bottom:1px solid #dde7f4;
    background:#f4f8fd;
    color:#52627a;
    font-size:11.5px;
    font-weight:800;
    letter-spacing:.05em;
    text-align:left;
    text-transform:uppercase;
    white-space:nowrap;
}

.ai-ask-table td{
    padding:9px 12px;
    border-bottom:1px solid #eef3fa;
    color:#172033;
    vertical-align:top;
}

.ai-ask-table tbody tr:last-child td{
    border-bottom:0;
}

.ai-ask-table tbody tr:nth-child(even) td{
    background:#fbfdff;
}

/* Numbers right-aligned and tabular, so digits line up down the column and a
   total can be read at a glance rather than counted. */
.ai-ask-table .is-num{
    text-align:right;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}

.ai-ask-table td.is-num{
    font-weight:700;
}

.ai-ask-more{
    margin:0 0 10px;
    color:#64748b;
    font-size:12.5px;
}

/* Announced to a screen reader without taking space. The waiting state is a
   row of grey blocks, which says nothing at all when it is read aloud. */
.visually-hidden{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
    border:0;
}

/* The figure, given the size it earns. A single-figure answer is read for its
   number, and a number in the middle of a sentence has to be found rather than
   seen. Tabular, so a column of them lines up and a change in the last digit
   does not move the ones before it. */
/* A wash behind the figure, fading out before the caption. Gives the number a
   surface of its own without drawing a second box around it. */
.ai-ask-figures{
    position:relative;
    display:flex;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:14px;
    margin:-4px -6px 6px;
    padding:8px 6px 6px;
    border-radius:12px;
    background:linear-gradient(180deg,rgba(37,99,235,.06) 0%,rgba(37,99,235,0) 100%);
}

.ai-ask-figure{
    display:flex;
    flex-direction:column;
    gap:1px;
    min-width:0;
}

.ai-ask-figure-value{
    color:#0f2d52;
    font-size:27px;
    font-weight:800;
    font-variant-numeric:tabular-nums;
    letter-spacing:-.02em;
    line-height:1.1;
}

.ai-ask-figure-label{
    color:#7286a0;
    font-size:11px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
}

/* Between the two halves of a comparison, so they read as being set against
   each other rather than as two answers that happen to be adjacent. */
.ai-ask-figure-versus{
    padding-bottom:6px;
    color:#a9b8cc;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
}

/* The difference, coloured by which way it went. Colour alone never carries
   the meaning - the words "more" and "less" are in the text - because a shop
   owner who cannot separate red from green still has to read this. */
.ai-ask-change{
    font-weight:800;
}

/* The heading over the chips. Says "try asking" to somebody who has asked
   nothing, and "ask again" once the list is their own. */
.ai-ask-suggestions-title{
    margin:14px 0 8px;
    color:#7286a0;
    font-size:11px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}

/* A question this shop asked before, as against an example it has not. Marked
   by weight and a tinted edge rather than by an icon, so a row of them still
   reads as one list. */
.ai-ask-chip.is-mine{
    border-color:#cddffa;
    background:#f2f7ff;
    color:#2f4f7a;
}

/* Questions offered after a refusal. Inside the answer card rather than beside
   the standing examples below it, so they read as a reply to what was just
   asked instead of as the panel resetting itself. */
.ai-ask-suggestions.is-recovery{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:10px;
}

.ai-ask-change.is-more{ color:#1a7f4f; }
.ai-ask-change.is-less{ color:#b4442d; }

/* The sentence under a figure: the same words as before, now supporting the
   number rather than carrying it. */
.ai-ask-sentence{
    margin:0;
    color:#4a5c73;
    font-size:13px;
    line-height:1.5;
}

/* What is coming, greyed out, so the panel does not jump when it arrives. */
.ai-ask-waiting{
    display:flex;
    flex-direction:column;
    gap:9px;
}

.ai-ask-skeleton{
    display:block;
    height:11px;
    border-radius:6px;
    background:linear-gradient(90deg,#e8eef7 0%,#f4f8fd 50%,#e8eef7 100%);
    background-size:200% 100%;
    animation:aiAskShimmer 1.15s ease-in-out infinite;
}

.ai-ask-skeleton.is-figure{
    width:44%;
    height:26px;
}

.ai-ask-skeleton.is-line{ width:100%; }
.ai-ask-skeleton.is-short{ width:62%; }

@keyframes aiAskShimmer{
    from{ background-position:200% 0; }
    to{ background-position:-200% 0; }
}

/* Someone who has asked not to be moved is not moved. */
@media (prefers-reduced-motion: reduce){
    .ai-ask-skeleton{ animation:none; }
}

/* The answer itself, given room to be the thing that is read first. */
.ai-ask-headline{
    margin:0;
    color:#132a44;
    font-size:15.5px;
    font-weight:700;
    line-height:1.45;
}

/* What was actually counted, as chips rather than a run of small print - two
   periods in a comparison then read as two, not as one sentence that wrapped. */
.ai-ask-periods{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:10px;
}

.ai-ask-period{
    padding:3px 9px;
    border:1px solid #e2eaf6;
    border-radius:999px;
    background:#f7fafe;
    color:#64748b;
    font-size:11.5px;
    font-weight:600;
}

.ai-ask-period.is-ai{
    border-color:#ddd3f6;
    background:#f6f2ff;
    color:#6d43c8;
}

.ai-ask-period.is-local{
    border-color:#c7ead6;
    background:#f0fdf4;
    color:#166534;
}

/* Premium announcement ticker */
.announcement-ticker-card {
    --announcement-accent: #2563eb;
    --announcement-duration: 30s;
    position: relative;
    display: grid;
    gap: 8px;
    overflow: hidden;
    padding: 14px 16px 15px;
    border: 1px solid color-mix(in srgb, var(--announcement-accent) 18%, #dbe7f3);
    border-left: 4px solid var(--announcement-accent);
    border-radius: 16px;
    background: linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, var(--announcement-accent) 5%, #f8fbff) 100%);
    box-shadow: 0 10px 24px rgba(15, 35, 60, 0.08);
}

.announcement-ticker-card-warning {
    --announcement-accent: #d97706;
    background: linear-gradient(135deg, #ffffff 0%, #fffaf0 100%);
}

.announcement-ticker-card-critical {
    --announcement-accent: #dc2626;
    background: linear-gradient(135deg, #ffffff 0%, #fff6f6 100%);
}

.announcement-ticker-head,
.announcement-ticker-identity,
.announcement-ticker-controls {
    display: flex;
    align-items: center;
}

.announcement-ticker-head {
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.announcement-ticker-identity,
.announcement-ticker-controls {
    gap: 8px;
}

.announcement-ticker-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 999px;
    background: var(--announcement-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--announcement-accent) 13%, transparent);
}

.announcement-ticker-meta {
    color: var(--announcement-accent);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.announcement-ticker-title {
    margin: 0;
    color: #102033;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
}

.announcement-ticker-viewport {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 3px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}

.announcement-ticker-track {
    display: inline-flex;
    min-width: max-content;
    animation: dbm-announcement-roll var(--announcement-duration) linear infinite;
    will-change: transform;
}

.announcement-ticker-item {
    display: inline-block;
    min-width: 50vw;
    padding-right: 64px;
    color: #52657a;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
    white-space: nowrap;
}

.announcement-ticker-card:hover .announcement-ticker-track,
.announcement-ticker-card:focus-within .announcement-ticker-track {
    animation-play-state: paused;
}

.announcement-ticker-toggle {
    display: none !important;
}

.announcement-ticker-dismiss {
    min-height: 30px;
    border: 1px solid #d8e3ef;
    border-radius: 9px;
    background: rgba(255, 255, 255, .82);
    color: #35516f;
    cursor: pointer;
    font-size: 11px;
    font-weight: 750;
    padding: 5px 9px;
    transition: background-color 160ms ease-out, border-color 160ms ease-out, transform 160ms ease-out;
}

.announcement-ticker-dismiss {
    border-color: color-mix(in srgb, var(--announcement-accent) 25%, #d8e3ef);
    color: var(--announcement-accent);
}

.announcement-ticker-dismiss:hover {
    border-color: var(--announcement-accent);
    background: #fff;
}

.announcement-ticker-dismiss:active {
    transform: scale(.97);
}

.announcement-ticker-dismiss:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--announcement-accent) 28%, transparent);
    outline-offset: 2px;
}

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

@keyframes dbm-announcement-roll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* On a phone this sits above everything the shop actually came here to do, so
   it is packed down to roughly three quarters of its desktop height: tighter
   padding, tighter row gaps, and line heights that suit the smaller type. The
   desktop card is left alone - there is room for it there. */
@media (max-width: 640px) {
    .announcement-ticker-card {
        gap: 5px;
        padding: 8px 12px 9px;
        border-radius: 12px;
        border-left-width: 3px;
        box-shadow: 0 6px 16px rgba(15, 35, 60, 0.06);
    }

    .announcement-ticker-meta {
        font-size: 9px;
        letter-spacing: .08em;
    }

    .announcement-ticker-dot {
        width: 6px;
        height: 6px;
        flex: 0 0 6px;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--announcement-accent) 13%, transparent);
    }

    .announcement-ticker-head {
        gap: 8px;
    }

    .announcement-ticker-identity {
        gap: 6px;
    }

    .announcement-ticker-title {
        font-size: 13px;
        line-height: 1.25;
    }

    .announcement-ticker-viewport {
        padding: 0;
    }

    .announcement-ticker-item {
        min-width: 94vw;
        padding-right: 42px;
        font-size: 12px;
        line-height: 1.4;
    }

    .announcement-ticker-toggle,
    .announcement-ticker-dismiss {
        min-height: 24px;
        padding: 3px 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .announcement-ticker-track {
        animation: none;
        white-space: normal;
    }

    .announcement-ticker-item {
        min-width: 0;
        white-space: normal;
    }
}
 
 

 
.announcement-ticker-controls button:not(.announcement-ticker-dismiss) { 
    display: none !important; 
}
@media screen and (max-width:1023px) { .announcement-ticker-controls .announcement-ticker-toggle, .announcement-ticker-controls button:not(.announcement-ticker-dismiss) { display:none!important; visibility:hidden!important; width:0!important; min-width:0!important; max-width:0!important; padding:0!important; border:0!important; overflow:hidden!important; } }

/* Camera and contact-book shortcuts inside the Vehicle and Mobile fields.
   Phones only: a desktop browser has neither a rear camera worth pointing at a
   number plate nor a contact picker, so the buttons are not drawn there and the
   inputs keep their full width. */
.field-capture-button { display: none; }
.field-capture-note { display: none; }

@media (max-width: 1023px) {
    .field-capture-button {
        position: absolute;
        z-index: 2;
        top: 5px;
        right: 3px;
        bottom: 5px;
        display: grid;
        place-items: center;
        width: 46px;
        height: auto;
        padding: 0;
        border: 0;
        border-left: 1px solid #d7e2f0;
        border-radius: 0 10px 10px 0;
        background: transparent;
        font-size: 19px;
        line-height: 1;
        cursor: pointer;
    }

    .field-capture-button:hover,
    .field-capture-button:focus-visible {
        border-left-color: #82b7ef;
        background: #edf6ff;
        outline: 0;
    }

    .field-capture-button:disabled { opacity: .5; cursor: progress; }

    /* Still visible, still tappable, still explains itself - just honest about
       being something this phone cannot do. */
    .field-capture-button[data-capable="no"] { opacity: .4; }

    #vehicleField .input-wrap #vehicleNumber,
    #serviceMobileField .input-wrap #mobile { padding-right: 58px; }

    .field-capture-note {
        display: block;
        margin: 7px 2px 0;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.5;
    }

    .field-capture-note[hidden] { display: none; }
    .field-capture-note[data-tone="info"] { color: #52627a; }
    .field-capture-note[data-tone="ok"] { color: #166534; }
    .field-capture-note[data-tone="warn"] { color: #9a3412; }
}

/* Vehicle, Mobile and Customer Name sit together and must read as one set.
   The Mobile field looked darker than its neighbours because it carries
   inputmode="numeric" for the number keypad, and an existing fee-input fix in
   index.html matches that attribute:

       input[inputmode="numeric"] { color: #111827 !important;
                                    -webkit-text-fill-color: #111827 !important }

   -webkit-text-fill-color wins over color in Chrome and applies to the
   placeholder as well, so the hint text painted at near-black instead of grey.
   The fee fields still need that rule, so it is left alone and these three are
   given their own, which has to set the fill colour too in order to win. */
#vehicleField .input-wrap input,
#serviceMobileField .input-wrap input,
#serviceCustomerNameField .input-wrap input {
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: normal;
    color: #102033 !important;
    -webkit-text-fill-color: #102033 !important;
}

#vehicleField .input-wrap input::placeholder,
#serviceMobileField .input-wrap input::placeholder,
#serviceCustomerNameField .input-wrap input::placeholder {
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    opacity: 1;
    color: #757575 !important;
    -webkit-text-fill-color: #757575 !important;
}

/* Opening DigiBillMate Finance instead of the CRM.

   Small, off, and to one side. This screen is the CRM; Finance is a separate
   application most shops have not bought, and presenting the two as equal
   choices only made customers hesitate over which was meant for them. It reads
   as a setting rather than a fork in the road. */
.login-mode {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    margin: 2px 0 -4px;
}

.login-mode__label {
    font-size: 12.5px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: .01em;
    transition: color 0.25s ease;
}

.login-mode__switch {
    position: relative;
    flex: none;
    width: 42px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #d7dee8;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.28s ease;
}

.login-mode__knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 44, 107, .3);
    transition: transform 0.28s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.login-mode__switch:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* On: the knob travels, the label lights up, and the card takes the colour of
   the product it is now the door to. */
.is-finance .login-mode__switch { background: #0f3d2e; }
.is-finance .login-mode__knob { transform: translateX(18px); }
.is-finance .login-mode__label { color: #0f3d2e; }


/* ===================================================== the sign-in heading

   The title and the Finance switch share one row. The switch belongs to this
   heading - it changes which product the heading names - and floating it on
   its own line underneath read as a stray control nobody had placed.       */

.login-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0;
}

.login-title-row__copy { min-width: 0; }

.login-headline {
    margin: 0;
    font-size: clamp(21px, 5.2vw, 25px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    background: linear-gradient(90deg, #2563eb, #3b82f6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background .3s ease;
}

/* The heading takes the colour of the product it now opens, so the switch has
   a visible consequence beyond the words changing. */
.is-finance .login-headline {
    background: linear-gradient(90deg, #0f3d2e, #17795c);
    -webkit-background-clip: text;
    background-clip: text;
}

.login-subline {
    margin: 4px 0 0;
    font-size: clamp(12.5px, 3.4vw, 14px);
    line-height: 1.45;
    color: #64748b;
}

/* The switch, vertically centred against the two lines beside it. */
.login-mode {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: none;
    margin: 0;
    padding: 6px 10px 6px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    transition: border-color .25s ease, background .25s ease;
}

.is-finance .login-mode { border-color: #bfe0d2; background: #f1f9f5; }

.login-mode__label {
    font-size: 12px;
    font-weight: 750;
    color: #94a3b8;
    letter-spacing: .01em;
    white-space: nowrap;
    transition: color .25s ease;
}

/* ============================================================ the card

   A sign-in screen is the first thing a shop sees every morning, so it is
   worth more than a plain box: a soft ground, a card that lifts off it, and
   fields that respond when touched.                                      */

body.crm-login-visible #loginContainer .glass-card.form-card {
    border: 1px solid rgba(226, 232, 240, .9) !important;
    border-radius: 20px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .99)) !important;
    box-shadow:
        0 1px 2px rgba(15, 44, 107, .04),
        0 14px 40px rgba(15, 44, 107, .10) !important;
}

body.crm-login-visible #loginContainer.is-finance .glass-card.form-card,
body.crm-login-visible #loginContainer .form-card.is-finance {
    border-color: rgba(191, 224, 210, .95) !important;
    box-shadow:
        0 1px 2px rgba(13, 61, 46, .05),
        0 14px 40px rgba(13, 61, 46, .12) !important;
}

/* Inputs: a real focus state rather than the browser's, and a border that
   answers the product the switch has chosen. */
body.crm-login-visible #loginContainer .input-wrap input {
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

body.crm-login-visible #loginContainer .input-wrap input:focus {
    border-color: #93b4f5 !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .13);
    background: #fff !important;
}

body.crm-login-visible .is-finance .input-wrap input:focus {
    border-color: #7cc0a4 !important;
    box-shadow: 0 0 0 3px rgba(15, 61, 46, .13);
}

body.crm-login-visible #loginContainer .field label {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .01em;
    color: #475569;
}

/* The button carries the weight of the screen, so it gets the depth. */
body.crm-login-visible #loginContainer #loginBtn {
    min-height: 50px;
    border-radius: 13px !important;
    font-size: 15.5px;
    font-weight: 750;
    letter-spacing: .01em;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .26);
    transition: transform .14s ease, box-shadow .2s ease, background .25s ease;
}

body.crm-login-visible #loginContainer #loginBtn:active { transform: translateY(1px); }
body.crm-login-visible .is-finance #loginBtn { box-shadow: 0 8px 20px rgba(15, 61, 46, .26); }


.quick-login__who { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.quick-login__target { font-size: 11.5px; font-weight: 650; color: #6366f1; letter-spacing: .01em; }
.quick-login__target.is-finance { color: #0f3d2e; }

.login-app__hint { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; text-align: center; color: #0f3d2e; font-weight: 650; }
.login-app__hint[hidden] { display: none; }

.is-finance #loginBtn {
    background: linear-gradient(135deg, #0f3d2e, #165c45) !important;
    border-color: #0f3d2e !important;
}

/* The heading is the CRM's until the switch says otherwise.

   Flat colour rather than a second gradient: the heading is painted with
   background-clip on transparent text, and the `background` shorthand resets
   the clip - which paints the whole box green and leaves the words invisible.
   Undoing all three is clearer than fighting the shorthand. */
.is-finance .login-headline {
    background: none !important;
    -webkit-text-fill-color: #0f3d2e !important;
    color: #0f3d2e !important;
}

/* The panel slides in, the way a window does when it opens. */
@keyframes dbmAppSlideIn {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

.login-app-slide { animation: dbmAppSlideIn 0.32s cubic-bezier(0.22, 0.9, 0.3, 1); }

/* The hero banner sits outside the form card, so the card's own is-finance
   class never reaches it - this repeats the switch's colour on the shared
   #loginContainer ancestor instead, at whatever specificity each breakpoint's
   own hero rule above used, so it wins in every one of them. */
body.crm-login-visible #loginContainer.is-finance .app-hero {
    background:
        radial-gradient(circle at 10% 10%, rgba(122,224,178,.5), transparent 34%),
        radial-gradient(circle at 88% 96%, rgba(45,212,191,.3), transparent 38%),
        linear-gradient(135deg, #0f3d2e 0%, #17795c 100%) !important;
    box-shadow: 0 18px 42px rgba(15,61,46,.24) !important;
}

@media (prefers-reduced-motion: reduce) {
    .login-mode__knob, .login-mode__switch, .login-mode__label { transition: none; }
    .login-app-slide { animation: none; }
}