/*
 * DigiBillMate Cloud CRM — desktop browser presentation.
 *
 * This stylesheet is intentionally isolated behind a desktop breakpoint and is
 * also loaded with a matching media attribute. It changes presentation only:
 * existing markup, navigation handlers, validation and business logic remain
 * the source of truth.
 */

@media screen and (min-width: 1024px) {
    :root {
        --dbm-desktop-sidebar: 264px;
        --dbm-desktop-bg: #f3f6fb;
        --dbm-desktop-surface: #ffffff;
        --dbm-desktop-surface-soft: #f8fbff;
        --dbm-desktop-border: #dce6f2;
        --dbm-desktop-border-strong: #cbd9e9;
        --dbm-desktop-text: #172a47;
        --dbm-desktop-muted: #607492;
        --dbm-desktop-primary: #2563eb;
        --dbm-desktop-primary-strong: #1d4ed8;
        --dbm-desktop-teal: #0f9bac;
        --dbm-desktop-success: #16834a;
        --dbm-desktop-warning: #b26a08;
        --dbm-desktop-danger: #b42318;
        --dbm-desktop-radius: 16px;
        --dbm-desktop-shadow: 0 8px 24px rgba(28, 65, 112, 0.07);
        --dbm-desktop-shadow-raised: 0 16px 38px rgba(15, 35, 67, 0.13);
    }

    html {
        min-height: 100%;
        background: var(--dbm-desktop-bg);
    }

    body {
        min-height: 100vh;
        padding-left: var(--dbm-desktop-sidebar);
        overflow-x: hidden;
        color: var(--dbm-desktop-text);
        background:
            radial-gradient(900px 540px at 92% -10%, rgba(59, 130, 246, 0.08), transparent 65%),
            var(--dbm-desktop-bg) !important;
        font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    body.crm-login-visible {
        padding-left: 0;
    }

    html.dbm-desktop-restoring body {
        visibility: hidden !important;
    }

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

    /* ---------------------------------------------------------------------
       Slice 1 — Global layout, sidebar, header and desktop grid
       ------------------------------------------------------------------ */

    .page,
    #searchHubPage .page {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 28px 32px 44px !important;
    }

    body:not(.crm-login-visible) .bottom-nav {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        z-index: 20000 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        width: var(--dbm-desktop-sidebar) !important;
        height: 100vh !important;
        min-height: 0 !important;
        padding: 106px 16px 88px !important;
        border: 0 !important;
        border-radius: 0 !important;
        color: #c6d5ed !important;
        background: linear-gradient(180deg, #102a4b 0%, #172c50 62%, #0f1d35 100%) !important;
        box-shadow: 14px 0 32px rgba(15, 35, 67, 0.16) !important;
        backdrop-filter: none !important;
        transform: none !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    body:not(.crm-login-visible) .bottom-nav::before {
        content: "DigiBillMate CRM\A Cloud workspace";
        position: absolute;
        inset: 22px 16px auto;
        min-height: 68px;
        padding: 8px 8px 18px 62px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        color: #ffffff;
        background: url("assets/home.png") no-repeat 8px 6px / 43px 43px;
        white-space: pre;
        font-size: 17px;
        font-weight: 750;
        line-height: 1.35;
        letter-spacing: -0.15px;
    }

    body:not(.crm-login-visible) .bottom-nav::after {
        content: "●  Online workspace";
        position: absolute;
        inset: auto 22px 24px;
        padding-top: 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        color: #8fa9cd;
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: 0.15px;
    }

    body:not(.crm-login-visible) .bottom-nav .nav-item,
    body:not(.crm-login-visible) .bottom-nav .nav-center {
        position: static !important;
        inset: auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 13px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 46px !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border: 0 !important;
        border-radius: 11px !important;
        color: #c6d5ed !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
        text-align: left !important;
        text-decoration: none !important;
        font-size: 14px !important;
        font-weight: 650 !important;
        line-height: 1 !important;
        cursor: pointer;
        transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease;
    }

    body:not(.crm-login-visible) .bottom-nav .nav-item:hover,
    body:not(.crm-login-visible) .bottom-nav .nav-center:hover {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.08) !important;
    }

    body:not(.crm-login-visible) .bottom-nav .nav-item.active,
    body:not(.crm-login-visible) .bottom-nav .nav-item[aria-current="page"] {
        color: #ffffff !important;
        background: linear-gradient(90deg, #2563eb, #2b82d5) !important;
        box-shadow: 0 8px 18px rgba(4, 41, 109, 0.28) !important;
    }

    body:not(.crm-login-visible) .bottom-nav .nav-icon {
        display: flex !important;
        flex: 0 0 20px;
        align-items: center;
        justify-content: center;
        width: 20px !important;
        height: 20px !important;
        color: inherit;
        font-size: 0 !important;
        filter: none !important;
    }

    body:not(.crm-login-visible) .bottom-nav .nav-icon::before {
        content: "";
        display: block;
        width: 19px;
        height: 19px;
        background: currentColor;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
    }

    body:not(.crm-login-visible) #homeBtn .nav-icon::before {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m3 11 9-8 9 8v9a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
    }

    body:not(.crm-login-visible) #patientsBtn .nav-icon::before {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 3h12v18l-3-2-3 2-3-2-3 2zm3 5h6M9 12h6'/%3E%3C/svg%3E");
    }

    body:not(.crm-login-visible) #appointmentBtn .nav-icon::before {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    }

    body:not(.crm-login-visible) #reportBtn .nav-icon::before {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20V10h4v10zm6 0V4h4v16zm6 0v-7h4v7z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    body:not(.crm-login-visible) .bottom-nav .nav-center > span {
        display: inline-flex !important;
        flex: 0 0 24px;
        align-items: center;
        justify-content: center;
        width: 24px !important;
        height: 24px !important;
        border: 1px solid rgba(147, 197, 253, 0.46);
        border-radius: 8px;
        color: #bfdbfe;
        background: rgba(37, 99, 235, 0.24);
        position: relative;
        font-size: 0 !important;
        font-weight: 400;
        line-height: 1;
    }

    body:not(.crm-login-visible) .bottom-nav .nav-center > span::before,
    body:not(.crm-login-visible) .bottom-nav .nav-center > span::after {
        content: "";
        position: absolute;
        width: 12px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
    }

    body:not(.crm-login-visible) .bottom-nav .nav-center > span::after {
        transform: rotate(90deg);
    }

    body:not(.crm-login-visible) .bottom-nav .nav-center::after {
        content: "New entry";
        color: inherit;
        font-size: 14px;
        font-weight: 650;
    }

    .hero,
    #reportsScreen .reports-hero {
        position: relative !important;
        top: auto !important;
        z-index: 10;
        min-height: 82px !important;
        margin: 0 0 20px !important;
        padding: 18px 22px !important;
        overflow: visible !important;
        border: 1px solid var(--dbm-desktop-border) !important;
        border-radius: var(--dbm-desktop-radius) !important;
        color: var(--dbm-desktop-text) !important;
        background: linear-gradient(135deg, #ffffff, #f4f8ff) !important;
        box-shadow: var(--dbm-desktop-shadow) !important;
        backdrop-filter: none !important;
    }

    .hero .hero-top,
    .reports-hero .reports-app-header {
        min-height: 44px;
        align-items: center !important;
        gap: 22px !important;
    }

    .hero .dbm-brand-logo,
    .reports-hero .dbm-brand-logo {
        display: none !important;
    }

    body:not(.crm-login-visible) .hero .dbm-brand-group,
    body:not(.crm-login-visible) .reports-hero .dbm-brand-group {
        gap: 0 !important;
    }

    body:not(.crm-login-visible) .hero .dbm-brand-title,
    body:not(.crm-login-visible) .reports-hero .dbm-brand-title {
        width: auto !important;
        overflow: visible !important;
        font-size: 0 !important;
        white-space: normal !important;
    }

    body:not(.crm-login-visible) .hero .dbm-brand-title::after,
    body:not(.crm-login-visible) .reports-hero .dbm-brand-title::after {
        content: "Operations";
        display: block;
        color: var(--dbm-desktop-text);
        font-size: 22px;
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: -0.3px;
    }

    body:not(.crm-login-visible) .hero .dbm-brand-subtitle,
    body:not(.crm-login-visible) .reports-hero .dbm-brand-subtitle {
        width: auto !important;
        margin-top: 5px !important;
        overflow: visible !important;
        font-size: 0 !important;
        white-space: normal !important;
    }

    body:not(.crm-login-visible) .hero .dbm-brand-subtitle::after,
    body:not(.crm-login-visible) .reports-hero .dbm-brand-subtitle::after {
        content: "Add customers, manage service entries and review customer records";
        display: block;
        color: var(--dbm-desktop-muted);
        font-size: 13px;
        font-weight: 550;
        line-height: 1.4;
    }

    #appointmentsPage .hero .dbm-brand-title::after {
        content: "Appointments";
    }

    #appointmentsPage .hero .dbm-brand-subtitle::after {
        content: "Manage appointments and customer follow-ups";
    }

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

    #searchHubPage .hero .dbm-brand-title::after {
        content: "Customer Search";
    }

    #searchHubPage .hero .dbm-brand-subtitle::after {
        content: "Find customers, vehicles and service history";
    }

    #reportsScreen .reports-hero .dbm-brand-title::after {
        content: "Reports";
    }

    #reportsScreen .reports-hero .dbm-brand-subtitle::after {
        content: "Business performance, trends and exports";
    }

    body.dbm-page-documents #homeScreen .hero .dbm-brand-title::after {
        content: "Billing & Invoices";
    }

    body.dbm-page-documents #homeScreen .hero .dbm-brand-subtitle::after {
        content: "Create, share and track customer invoices";
    }

    body.dbm-page-documents #invoiceScreen .hero .dbm-brand-title::after {
        content: "Create Invoice";
    }

    body.dbm-page-documents #invoiceScreen .hero .dbm-brand-subtitle::after {
        content: "Prepare invoice details, items and payment";
    }

    body.dbm-page-invoice-preview .hero .dbm-brand-title::after {
        content: "Invoice Preview";
    }

    body.dbm-page-invoice-preview .hero .dbm-brand-subtitle::after {
        content: "Review the customer invoice before sharing";
    }

    body.dbm-page-push-message .hero .dbm-brand-title::after {
        content: "Push Messaging";
    }

    body.dbm-page-push-message .hero .dbm-brand-subtitle::after {
        content: "Prepare and manage customer message broadcasts";
    }

    body.dbm-page-shop-settings .hero .dbm-brand-title::after {
        content: "Shop Settings";
    }

    body.dbm-page-shop-settings .hero .dbm-brand-subtitle::after {
        content: "Business profile, branding and billing configuration";
    }

    body:not(.crm-login-visible) .hero .dbm-brand-title,
    body:not(.crm-login-visible) .reports-hero .dbm-brand-title {
        color: var(--dbm-desktop-text) !important;
        text-align: left !important;
        text-shadow: none !important;
        font-size: 0 !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        letter-spacing: -0.25px !important;
    }

    body:not(.crm-login-visible) .hero .hero-top .dbm-brand-copy .dbm-brand-title.dbm-brand-title,
    body:not(.crm-login-visible) #reportsScreen .reports-hero .dbm-brand-copy .dbm-brand-title.dbm-brand-title {
        color: var(--dbm-desktop-text) !important;
        font-size: 0 !important;
        text-shadow: none !important;
        opacity: 1 !important;
    }

    body:not(.crm-login-visible) .hero .dbm-brand-subtitle,
    body:not(.crm-login-visible) .reports-hero .dbm-brand-subtitle {
        margin-top: 4px !important;
        color: var(--dbm-desktop-muted) !important;
        text-align: left !important;
        text-shadow: none !important;
        font-size: 0 !important;
        font-weight: 550 !important;
        line-height: 1.35 !important;
    }

    body:not(.crm-login-visible) .hero .hero-top .dbm-brand-copy .dbm-brand-subtitle.dbm-brand-subtitle,
    body:not(.crm-login-visible) #reportsScreen .reports-hero .dbm-brand-copy .dbm-brand-subtitle.dbm-brand-subtitle {
        font-size: 0 !important;
        text-shadow: none !important;
        overflow: visible !important;
        white-space: normal !important;
    }

    .hero .app-header-action,
    .hero .hero-icon-btn,
    .hero .appointment-header-action,
    .hero .search-hub-action,
    .reports-hero .app-header-action {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        border: 1px solid var(--dbm-desktop-border-strong) !important;
        border-radius: 10px !important;
        color: #345272 !important;
        background: #ffffff !important;
        box-shadow: 0 5px 14px rgba(28, 65, 112, 0.08) !important;
        transform: none !important;
    }

    body .hero #searchBtn,
    body .hero #appointmentSearchBtn,
    body .hero #reportsRefreshBtn,
    body .hero #reportsSearchBtn,
    body .hero .app-refresh-btn,
    body .hero #menuBtn,
    body .hero [data-profile-menu],
    body #reportsScreen .reports-hero .app-header-action {
        border-color: var(--dbm-desktop-border-strong) !important;
        color: #345272 !important;
        background: #ffffff !important;
        box-shadow: 0 5px 14px rgba(28, 65, 112, 0.08) !important;
        opacity: 1 !important;
    }

    body .hero #searchBtn > span,
    body .hero #appointmentSearchBtn > span,
    body .hero #reportsRefreshBtn > span,
    body .hero #reportsSearchBtn > span,
    body .hero .app-refresh-btn > span,
    body .hero #menuBtn > span,
    body .hero [data-profile-menu] > span,
    body #reportsScreen .reports-hero .app-header-action > span {
        color: inherit !important;
        text-shadow: none !important;
        opacity: 1 !important;
    }

    body:not(.crm-login-visible) .hero #searchBtn > span,
    body:not(.crm-login-visible) .hero #appointmentSearchBtn > span,
    body:not(.crm-login-visible) .hero #reportsSearchBtn > span,
    body:not(.crm-login-visible) .hero [aria-label*="Search"] > span,
    body:not(.crm-login-visible) .reports-hero [aria-label*="Search"] > span {
        display: block !important;
        width: 18px;
        height: 18px;
        overflow: hidden;
        color: transparent !important;
        background: #345272;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m16.5 16.5 4 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    body:not(.crm-login-visible) .hero .refresh-symbol,
    body:not(.crm-login-visible) .reports-hero .refresh-symbol {
        display: block !important;
        width: 18px;
        height: 18px;
        overflow: hidden;
        color: transparent !important;
        background: #345272;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6v5h-5M4 18v-5h5M6.1 8A7 7 0 0 1 18 6l2 5M18 16a7 7 0 0 1-11.9 2L4 13' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    body:not(.crm-login-visible) .hero #menuBtn > span,
    body:not(.crm-login-visible) .hero [data-profile-menu] > span,
    body:not(.crm-login-visible) .reports-hero [data-profile-menu] > span {
        display: block !important;
        width: 18px;
        height: 18px;
        overflow: hidden;
        color: transparent !important;
        background: #345272;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M4.5 21a7.5 7.5 0 0 1 15 0' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .hero .app-header-action:hover,
    .hero .hero-icon-btn:hover,
    .hero .appointment-header-action:hover,
    .hero .search-hub-action:hover,
    .reports-hero .app-header-action:hover {
        border-color: #8fb4ee !important;
        color: #175ec1 !important;
        background: #f7fbff !important;
        transform: translateY(-1px) !important;
    }

    /* Desktop login follows the Offline CRM split-pane composition. */
    body.crm-login-visible {
        height: 100vh;
        overflow: hidden;
        background: #14325e !important;
    }

    body.crm-login-visible #loginContainer.page:not([style*="none"]) {
        display: flex !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: none !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.crm-login-visible #loginContainer .app-hero {
        display: flex !important;
        flex: 1 1 48%;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0;
        margin: 0 !important;
        padding: clamp(42px, 6vw, 84px) !important;
        border: 0 !important;
        border-radius: 0 !important;
        background:
            radial-gradient(820px 560px at 16% 6%, rgba(96, 165, 250, 0.5), transparent 62%),
            radial-gradient(620px 460px at 88% 96%, rgba(56, 189, 248, 0.26), transparent 60%),
            linear-gradient(158deg, #1d4ed8 0%, #1e50a8 42%, #16325f 100%) !important;
        box-shadow: none !important;
    }

    body.crm-login-visible #loginContainer .app-hero .hero-top {
        display: grid !important;
        grid-template-columns: 62px minmax(0, 1fr);
        align-items: center;
        column-gap: 18px;
    }

    body.crm-login-visible #loginContainer .app-hero img {
        position: static !important;
        width: 62px !important;
        height: 62px !important;
        margin: 0 !important;
    }

    body.crm-login-visible #loginContainer .app-hero .hero-top > .dbm-desktop-login-brand {
        position: static !important;
        inset: auto !important;
        display: block !important;
        grid-column: 2;
        padding: 0 !important;
    }

    body.crm-login-visible #loginContainer .app-hero .hero-top > .dbm-desktop-login-brand > span:first-child {
        color: #ffffff !important;
        text-align: left !important;
        font-size: clamp(28px, 2.2vw, 36px) !important;
        font-weight: 750 !important;
        line-height: 1.15 !important;
    }

    body.crm-login-visible #loginContainer .app-hero .hero-top > .dbm-desktop-login-brand > span:first-child {
        position: relative;
        color: transparent !important;
    }

    body.crm-login-visible #loginContainer .app-hero .hero-top > .dbm-desktop-login-brand > span:first-child::after {
        content: "DigiBillMate Cloud CRM";
        position: absolute;
        inset: 0;
        color: #ffffff;
        white-space: nowrap;
    }

    body.crm-login-visible #loginContainer .app-hero .hero-top > .dbm-desktop-login-brand > span:last-child {
        display: block;
        max-width: 42ch;
        margin-top: 14px !important;
        color: rgba(236, 244, 255, 0.82) !important;
        text-align: left !important;
        white-space: normal !important;
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    body.crm-login-visible #loginContainer .app-hero .hero-top > .dbm-desktop-login-brand > span:last-child {
        position: relative;
        color: transparent !important;
    }

    body.crm-login-visible #loginContainer .app-hero .hero-top > .dbm-desktop-login-brand > span:last-child::after {
        content: "One platform. Complete business control.";
        position: absolute;
        inset: 0;
        color: rgba(236, 244, 255, 0.82);
    }

    body.crm-login-visible #loginContainer .glass-card.form-card {
        display: flex !important;
        flex: 1 1 52%;
        flex-direction: column;
        justify-content: flex-start;
        min-width: 0;
        margin: 0 !important;
        padding: clamp(26px, 3vw, 48px) clamp(38px, 5vw, 84px) !important;
        overflow-y: auto;
        overflow: hidden;
        border: 0 !important;
        border-radius: 0 !important;
        background: #ffffff !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    body.crm-login-visible #loginContainer .form-grid {
        width: 100%;
        max-width: 410px;
        margin: 0 auto;
        gap: 10px !important;
    }

    body.crm-login-visible #loginContainer .field { margin: 0 !important; }
    body.crm-login-visible #loginContainer .field input { min-height: 48px !important; }
    body.crm-login-visible #loginContainer .action-row { margin: 0 !important; }
    body.crm-login-visible #loginContainer #quickLoginBox { margin-bottom: 2px !important; }

    body.crm-login-visible #loginContainer .app-hero .dbm-desktop-login-benefits {
        grid-column: 1 / -1;
    }

    @media (max-height: 760px) {
        body.crm-login-visible #loginContainer .glass-card.form-card {
            padding-top: 18px !important;
            padding-bottom: 18px !important;
        }

        body.crm-login-visible #loginContainer .form-grid { gap: 7px !important; }
        body.crm-login-visible #loginContainer .field input { min-height: 42px !important; }
        body.crm-login-visible #loginContainer #quickLoginBox { transform: scale(.9); transform-origin: center top; }
    }

    /* ---------------------------------------------------------------------
       Slice 2 — Dashboard, analytics cards and quick summaries
       ------------------------------------------------------------------ */

    #appContainer > .page {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        align-items: start;
        gap: 20px;
    }

    #appContainer > .page > .hero,
    #appContainer > .page > #homeAnnouncementSlot,
    #appContainer > .page > #announcementBannerHost,
    #appContainer > .page > #clinicGreetingCard,
    #appContainer > .page > .stats-row {
        grid-column: 1 / -1;
        width: 100%;
        margin: 0 !important;
    }

    #announcementBannerHost {
        gap: 12px !important;
    }

    #homeAnnouncementSlot {
        width: 100%;
        margin: 0 !important;
    }

    #clinicGreetingCard {
        min-height: 84px;
        padding: 18px 22px !important;
        border-radius: var(--dbm-desktop-radius) !important;
    }

    #clinicGreetingCard #greetingIcon {
        width: 46px !important;
        height: 46px !important;
        border-radius: 12px !important;
        font-size: 22px !important;
    }

    #clinicGreetingCard #greetingText {
        font-size: 12px !important;
        font-weight: 650 !important;
    }

    #clinicGreetingCard #greetingName {
        margin-top: 3px;
        font-size: 19px !important;
        font-weight: 750 !important;
    }

    #appContainer .stats-row,
    #reportsScreen .stats-row {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    #appContainer .stat-card,
    #reportsScreen .stat-card {
        position: relative;
        min-height: 112px !important;
        padding: 20px !important;
        overflow: hidden;
        border: 1px solid var(--dbm-desktop-border) !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        box-shadow: var(--dbm-desktop-shadow) !important;
    }

    #appContainer .stat-card::before,
    #reportsScreen .stat-card::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 4px;
        background: var(--dbm-desktop-primary);
    }

    #appContainer .stat-green::before,
    #reportsScreen .stat-green::before {
        background: #18a058;
    }

    #appContainer .stat-purple::before,
    #reportsScreen .stat-purple::before {
        background: #7c3aed;
    }

    #appContainer .stat-label,
    #reportsScreen .stat-label {
        color: var(--dbm-desktop-muted) !important;
        font-size: 11px !important;
        font-weight: 750 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase;
    }

    #appContainer .stat-value,
    #reportsScreen .stat-value {
        margin-top: 9px;
        color: var(--dbm-desktop-text) !important;
        font-size: 28px !important;
        font-weight: 800 !important;
        letter-spacing: -0.04em !important;
    }

    /* ---------------------------------------------------------------------
       Slice 3 — Start Service, appointments and payment workspace
       ------------------------------------------------------------------ */

    #appContainer > .page > .form-card {
        grid-column: span 5;
        width: 100%;
        margin: 0 !important;
    }

    #appContainer > .page > .list-card {
        grid-column: span 7;
        width: 100%;
        margin: 0 !important;
    }

    #appContainer > .page > .list-card:last-of-type {
        grid-column: 1 / -1;
    }

    .glass-card,
    .card,
    .form-card,
    .list-card {
        border: 1px solid var(--dbm-desktop-border) !important;
        border-radius: var(--dbm-desktop-radius) !important;
        background: var(--dbm-desktop-surface) !important;
        box-shadow: var(--dbm-desktop-shadow) !important;
        backdrop-filter: none !important;
    }

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

    #serviceForm .form-grid,
    #carwashFields,
    #clinicFields {
        gap: 15px !important;
    }

    #carwashFields,
    #clinicFields {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #serviceForm .field {
        min-width: 0;
        margin-top: 0 !important;
    }

    .field label,
    .field-label {
        color: #51647f !important;
        font-size: 12.5px !important;
        font-weight: 650 !important;
        letter-spacing: 0.1px;
    }

    .input-wrap input,
    .input-wrap select,
    .input-wrap textarea,
    .toolbar input,
    .entry-sort-control select {
        min-height: 44px !important;
        border: 1.5px solid #dce5f0 !important;
        border-radius: 10px !important;
        color: var(--dbm-desktop-text) !important;
        background: #fcfdff !important;
        box-shadow: none !important;
    }

    .input-wrap input:focus,
    .input-wrap select:focus,
    .input-wrap textarea:focus,
    .toolbar input:focus,
    .entry-sort-control select:focus {
        border-color: var(--dbm-desktop-primary) !important;
        background: #ffffff !important;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
    }

    .payment-filters {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px !important;
    }

    .payment-filter,
    .reason-chip,
    .appointment-type-chip {
        min-height: 34px !important;
        padding: 0 12px !important;
        border: 1px solid #d5e1ef !important;
        border-radius: 9px !important;
        color: #405b7a !important;
        background: #f8fbff !important;
        box-shadow: none !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
    }

    .payment-filter[aria-pressed="true"],
    .reason-chip[aria-pressed="true"],
    .appointment-type-chip[aria-pressed="true"],
    .appointment-type-chip.active {
        border-color: var(--dbm-desktop-primary) !important;
        color: #ffffff !important;
        background: var(--dbm-desktop-primary) !important;
    }

    .toolbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px !important;
    }

    .toolbar .input-wrap,
    .toolbar > div {
        min-width: 0;
    }

    #entryList {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px !important;
    }

    #entryList > * {
        min-width: 0;
        border: 1px solid var(--dbm-desktop-border) !important;
        border-radius: 13px !important;
        background: #ffffff !important;
        box-shadow: 0 5px 16px rgba(28, 65, 112, 0.05) !important;
    }

    #appointmentsPage,
    #appointmentAddPage {
        background: var(--dbm-desktop-bg) !important;
    }

    #appointmentsPage > .page,
    #appointmentAddPage > .page {
        width: min(100%, 1600px) !important;
        max-width: 1600px !important;
        padding: 24px 30px 48px !important;
    }

    #appointmentAddPage {
        position: fixed !important;
        inset: 0 0 0 var(--dbm-desktop-sidebar) !important;
        z-index: 18500 !important;
        width: auto !important;
        height: 100vh !important;
        overflow-y: auto !important;
    }

    #appointmentAddPage > .page {
        width: 100% !important;
        max-width: none !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding: 28px 32px 48px !important;
    }

    #appointmentAddPage .appointment-inline-title {
        min-height: 82px;
        margin: 0 0 20px !important;
        padding: 18px 22px !important;
        border: 1px solid var(--dbm-desktop-border) !important;
        border-radius: var(--dbm-desktop-radius) !important;
        background: linear-gradient(135deg, #ffffff, #f4f8ff) !important;
        box-shadow: var(--dbm-desktop-shadow) !important;
    }

    #appointmentAddPage .appointment-inline-title p {
        margin: 0 0 4px !important;
        color: var(--dbm-desktop-primary) !important;
        font-size: 10.5px !important;
        font-weight: 800 !important;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    #appointmentAddPage .appointment-inline-title h1 {
        font-size: 22px !important;
        letter-spacing: -.3px;
    }

    #closeAppointmentInlineBtn,
    #searchHubBackBtn {
        display: none !important;
    }

    #appointmentAddPage .appointment-form-card {
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 16px !important;
    }

    #appointmentsList {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    #appointmentsList > * {
        min-width: 0;
    }

    .appointment-form-card {
        max-width: 1040px !important;
        margin: 0 auto 18px !important;
        padding: 22px !important;
        border: 1px solid var(--dbm-desktop-border) !important;
        border-radius: var(--dbm-desktop-radius) !important;
        background: #ffffff !important;
        box-shadow: var(--dbm-desktop-shadow) !important;
    }

    .appointment-schedule-grid,
    .edit-fields-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 15px !important;
    }

    /* ---------------------------------------------------------------------
       Slice 4 — Search Hub, results, profile and history surfaces
       ------------------------------------------------------------------ */

    #searchHubPage {
        inset: 0 0 0 var(--dbm-desktop-sidebar) !important;
        overflow-y: auto !important;
        background: var(--dbm-desktop-bg) !important;
    }

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

    #searchHubPage .action-row {
        grid-column: 1 / -1;
        justify-content: flex-end !important;
    }

    #searchHubResults {
        margin-top: 18px !important;
    }

    #searchHubResultsBody {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px !important;
    }

    #searchHubResultsBody > * {
        min-width: 0;
        border: 1px solid var(--dbm-desktop-border) !important;
        border-radius: 13px !important;
        background: #ffffff !important;
        box-shadow: 0 5px 16px rgba(28, 65, 112, 0.05) !important;
    }

    .patient-picker-backdrop {
        left: var(--dbm-desktop-sidebar) !important;
        background: rgba(8, 25, 52, 0.48) !important;
        backdrop-filter: blur(6px) !important;
    }

    .patient-picker-dialog {
        width: min(760px, calc(100vw - var(--dbm-desktop-sidebar) - 64px)) !important;
        max-width: 760px !important;
        max-height: calc(100vh - 80px) !important;
        border: 1px solid var(--dbm-desktop-border) !important;
        border-radius: 18px !important;
        box-shadow: 0 28px 80px rgba(8, 25, 52, 0.3) !important;
    }

    /* ---------------------------------------------------------------------
       Slice 5 — Documents, invoices, preview and PDF workspace
       ------------------------------------------------------------------ */

    #homeScreen .dashboard-header {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 24px !important;
    }

    #homeScreen #btnNewInvoice {
        width: auto !important;
        min-height: 42px !important;
        padding: 0 20px !important;
    }

    .summary-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .summary-box {
        min-height: 122px !important;
        padding: 18px !important;
        border: 1px solid var(--dbm-desktop-border) !important;
        border-radius: 14px !important;
        color: var(--dbm-desktop-text) !important;
        background: #ffffff !important;
        box-shadow: var(--dbm-desktop-shadow) !important;
    }

    .summary-box.blue { border-left: 4px solid #2563eb !important; }
    .summary-box.green { border-left: 4px solid #18a058 !important; }
    .summary-box.purple { border-left: 4px solid #7c3aed !important; }
    .summary-box.orange { border-left: 4px solid #e58a10 !important; }

    .summary-title {
        color: var(--dbm-desktop-muted) !important;
        font-size: 11px !important;
        font-weight: 750 !important;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .summary-value {
        color: var(--dbm-desktop-text) !important;
        font-size: 28px !important;
        font-weight: 800 !important;
    }

    .search-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px !important;
    }

    #invoiceList {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px !important;
    }

    .invoice-card {
        min-width: 0;
        min-height: 112px;
        padding: 16px 18px !important;
        border: 1px solid var(--dbm-desktop-border) !important;
        border-radius: 13px !important;
        background: #ffffff !important;
        box-shadow: 0 5px 16px rgba(28, 65, 112, 0.05) !important;
    }

    #invoiceScreen > .card .form-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px 16px !important;
        margin-top: 10px !important;
    }

    /* Create Invoice — compact desktop workspace; mobile markup remains unchanged. */
    body.dbm-page-documents #invoiceScreen .invoice-editor-grid {
        display: grid;
        grid-template-columns: minmax(280px, 4fr) minmax(0, 8fr);
        gap: 14px;
        align-items: stretch;
    }

    body.dbm-page-documents #invoiceScreen .invoice-card-section {
        margin: 0 !important;
        padding: 20px 22px !important;
        border: 1px solid #dce6f3 !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 24px rgba(26, 62, 105, 0.06) !important;
    }

    body.dbm-page-documents #invoiceScreen .invoice-card-section > h3,
    body.dbm-page-documents #invoiceScreen .invoice-card-section .section-header h3 {
        margin: 0 0 14px !important;
        color: #12233d !important;
        font-size: 18px !important;
        line-height: 1.25 !important;
    }

    body.dbm-page-documents #invoiceScreen .invoice-meta-card .form-grid,
    body.dbm-page-documents #invoiceScreen .invoice-customer-card .form-grid {
        display: grid !important;
        margin: 0 !important;
        gap: 14px !important;
    }

    body.dbm-page-documents #invoiceScreen .invoice-meta-card .form-grid {
        grid-template-columns: 1fr !important;
    }

    body.dbm-page-documents #invoiceScreen .invoice-customer-card .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.dbm-page-documents #invoiceScreen .invoice-field {
        display: grid;
        gap: 6px;
        min-width: 0;
    }

    body.dbm-page-documents #invoiceScreen .invoice-field label {
        color: #475b78 !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        line-height: 1.3;
    }

    body.dbm-page-documents #invoiceScreen .invoice-field input {
        width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 13px !important;
        border: 1.5px solid #d7e2f0 !important;
        border-radius: 10px !important;
        background: #fbfdff !important;
        box-sizing: border-box;
    }

    body.dbm-page-documents #invoiceScreen .invoice-field input:focus {
        border-color: #2b68ed !important;
        box-shadow: 0 0 0 3px rgba(43, 104, 237, 0.12) !important;
        outline: none !important;
    }

    body.dbm-page-documents #invoiceScreen .invoice-items-card {
        grid-column: 1 / -1;
    }

    body.dbm-page-documents #invoiceScreen .invoice-total-card {
        grid-column: 1 / 2;
        align-self: stretch;
    }

    body.dbm-page-documents #invoiceScreen .invoice-total-card .section-header {
        height: 100%;
        min-height: 52px;
        align-items: center !important;
    }

    body.dbm-page-documents #invoiceScreen .invoice-total-card #grandTotal {
        margin: 0 !important;
        color: #1264b2 !important;
        font-size: 26px !important;
    }

    body.dbm-page-documents #invoiceScreen .invoice-actions-card {
        grid-column: 2 / 3;
        display: flex;
        align-items: center;
    }

    body.dbm-page-documents #invoiceScreen .invoice-actions-card .action-row {
        width: 100%;
        margin: 0 !important;
        justify-content: flex-end !important;
    }

    body.dbm-page-documents #invoiceScreen #invoiceFormStatus {
        grid-column: 1 / -1;
        margin: 0 !important;
    }

    body.dbm-page-push-message .push-message-back-btn {
        display: none !important;
    }

    @media (max-width: 1240px) {
        body.dbm-page-documents #invoiceScreen .invoice-editor-grid {
            grid-template-columns: minmax(260px, 5fr) minmax(0, 7fr);
        }
    }

    #invoiceScreen > .card {
        margin-bottom: 12px !important;
        padding: 16px 20px !important;
    }

    #invoiceScreen > .card h3 {
        margin-top: 0 !important;
        margin-bottom: 8px !important;
    }

    #invoiceScreen > .card .form-grid input {
        height: 42px !important;
        min-height: 42px !important;
    }

    #itemsContainer {
        display: grid;
        gap: 12px;
    }

    .preview-table {
        width: 100% !important;
        overflow: hidden;
        border: 1px solid var(--dbm-desktop-border) !important;
        border-radius: 12px !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    .preview-table th {
        padding: 12px 14px !important;
        color: #526985 !important;
        background: #f3f7fc !important;
        font-size: 11px !important;
        font-weight: 750 !important;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .preview-table td {
        padding: 13px 14px !important;
        border-top: 1px solid #e6edf6 !important;
    }

    .invoice-header {
        display: grid !important;
        grid-template-columns: 140px minmax(0, 1fr) 220px !important;
        align-items: center;
        gap: 24px !important;
    }

    .preview-buttons,
    .top-actions {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 9px !important;
    }

    /* ---------------------------------------------------------------------
       Slice 6 — Push Messaging campaign workspace
       ------------------------------------------------------------------ */

    #pushMessageScreen .page-content {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        align-items: start;
        gap: 18px;
        padding-bottom: 48px !important;
    }

    #pushMessageScreen .page-content > .card {
        grid-column: 1 / -1;
        width: 100%;
        margin: 0 !important;
        padding: 20px !important;
    }

    #pushMessageScreen .page-content > .card:has(#pm_date),
    #pushMessageScreen .page-content > .card:has(#pm_pending_count) {
        grid-column: span 6;
        min-height: 142px;
    }

    #pushMessageScreen .page-content > .card:has(#pm_search),
    #pushMessageScreen .page-content > .card:has(#pm_select_all_btn) {
        grid-column: span 6;
    }

    #pushMessageScreen input[type="text"],
    #pushMessageScreen input[type="date"] {
        min-height: 44px !important;
        border: 1.5px solid #dce5f0 !important;
        border-radius: 10px !important;
        color: var(--dbm-desktop-text) !important;
        background: #fcfdff !important;
    }

    #pm_list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px !important;
    }

    #pm_list > * {
        min-width: 0;
        border: 1px solid var(--dbm-desktop-border) !important;
        border-radius: 12px !important;
        background: #ffffff !important;
    }

    /* ---------------------------------------------------------------------
       Slice 7 — Reports, charts, tables and export surfaces
       ------------------------------------------------------------------ */

    #reportsScreen {
        width: min(100%, 1600px) !important;
        max-width: 1600px !important;
        margin: 0 auto !important;
        padding: 24px 30px 48px !important;
    }

    #reportsScreen .reports-workspace {
        margin: 0 0 18px !important;
        padding: 20px 22px !important;
        border: 1px solid var(--dbm-desktop-border) !important;
        border-radius: var(--dbm-desktop-radius) !important;
        color: var(--dbm-desktop-text) !important;
        background: #ffffff !important;
        box-shadow: var(--dbm-desktop-shadow) !important;
    }

    #reportsScreen .reports-title-row h1 {
        color: var(--dbm-desktop-text) !important;
        font-size: 24px !important;
        font-weight: 800 !important;
        letter-spacing: -0.3px;
    }

    #reportsScreen .reports-eyebrow {
        color: var(--dbm-desktop-primary) !important;
        font-size: 10.5px !important;
        font-weight: 800 !important;
        letter-spacing: 0.11em;
        text-transform: uppercase;
    }

    #reportsScreen .report-tabs {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px !important;
        margin-top: 16px !important;
    }

    #reportsScreen .report-tab,
    #reportsScreen .report-date-chip,
    #reportsScreen .report-section-tab {
        width: auto !important;
        min-width: 96px !important;
        min-height: 36px !important;
        padding: 0 14px !important;
        border: 1px solid #d5e1ef !important;
        border-radius: 9px !important;
        color: #405b7a !important;
        background: #f8fbff !important;
        box-shadow: none !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
    }

    #reportsScreen .report-tab.active,
    #reportsScreen .report-section-tab.active {
        border-color: var(--dbm-desktop-primary) !important;
        color: #ffffff !important;
        background: var(--dbm-desktop-primary) !important;
    }

    #reportsScreen .report-section-tabs {
        display: flex !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        margin: 0 0 16px !important;
        padding: 0 !important;
        background: transparent !important;
    }

    #reportsScreen .report-panel.active {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 16px;
    }

    #reportsScreen .report-panel.active > .stats-row,
    #reportsScreen .report-panel.active > .report-block:first-child {
        grid-column: 1 / -1;
    }

    #reportsScreen .report-block {
        min-width: 0;
        min-height: 100%;
        margin: 0 !important;
        padding: 20px !important;
        border: 1px solid var(--dbm-desktop-border) !important;
        border-radius: var(--dbm-desktop-radius) !important;
        background: #ffffff !important;
        box-shadow: var(--dbm-desktop-shadow) !important;
    }

    #reportsScreen .report-chart,
    #reportsScreen .weekday-chart,
    #reportsScreen .hourly-chart {
        min-height: 260px !important;
        padding: 16px !important;
        border: 1px solid #e6edf6;
        border-radius: 12px;
        background: #fbfdff;
    }

    #exportSheet .sheet {
        width: min(920px, calc(100vw - var(--dbm-desktop-sidebar) - 72px)) !important;
        max-width: 920px !important;
        max-height: calc(100vh - 64px) !important;
        border: 1px solid var(--dbm-desktop-border) !important;
        border-radius: 18px !important;
        box-shadow: 0 28px 80px rgba(8, 25, 52, 0.3) !important;
    }

    #exportSheet .sheet-form {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px !important;
    }

    /* ---------------------------------------------------------------------
       Slice 8 — Settings, forms and dialogs
       ------------------------------------------------------------------ */

    .settings-card {
        max-width: 1040px !important;
        margin: 0 auto !important;
        padding: 24px !important;
    }

    .settings-heading {
        margin-bottom: 22px !important;
        padding-bottom: 18px;
        border-bottom: 1px solid #e6edf6;
    }

    .settings-heading h1 {
        margin: 0;
        color: var(--dbm-desktop-text);
        font-size: 23px;
        font-weight: 800;
        letter-spacing: -0.3px;
    }

    .settings-heading p {
        margin: 6px 0 0;
        color: var(--dbm-desktop-muted);
        font-size: 13.5px;
        line-height: 1.5;
    }

    .settings-card .form-grid {
        display: grid !important;
        grid-template-columns: 200px minmax(0, 1fr) !important;
        align-items: start;
        gap: 14px 22px !important;
    }

    .settings-card .form-grid > label {
        padding-top: 11px;
        color: #51647f !important;
        font-size: 12.5px !important;
        font-weight: 650 !important;
    }

    .settings-card .form-grid > input,
    .settings-card .form-grid > textarea {
        width: 100%;
        min-height: 44px;
        padding: 11px 13px;
        border: 1.5px solid #dce5f0;
        border-radius: 10px;
        color: var(--dbm-desktop-text);
        background: #fcfdff;
    }

    .settings-card .settings-section-title,
    .settings-card .status-card,
    .settings-card .action-row {
        grid-column: 1 / -1;
    }

    #accountModal {
        left: var(--dbm-desktop-sidebar) !important;
        padding: 28px !important;
        background: rgba(8, 25, 52, 0.48) !important;
        backdrop-filter: blur(7px) !important;
    }

    #accountModal > div {
        width: min(940px, 100%) !important;
        max-width: 940px !important;
        max-height: calc(100vh - 56px) !important;
        margin: auto !important;
        padding: 22px !important;
        overflow-y: auto !important;
        border: 1px solid var(--dbm-desktop-border) !important;
        border-radius: 18px !important;
        background: #f7faff !important;
        box-shadow: 0 28px 80px rgba(8, 25, 52, 0.3) !important;
    }

    .account-menu-header {
        min-height: 76px !important;
        padding: 14px 16px !important;
        border-radius: 14px !important;
        background: linear-gradient(135deg, #173f73, #126b9a) !important;
    }

    .account-menu-identity,
    .account-menu-license,
    .settings-action {
        min-height: 68px !important;
        padding: 13px 16px !important;
        border: 1px solid var(--dbm-desktop-border) !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        box-shadow: 0 4px 14px rgba(28, 65, 112, 0.04) !important;
    }

    .account-menu-support-actions {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px !important;
        padding: 10px !important;
        border: 1px solid var(--dbm-desktop-border) !important;
        border-radius: 14px !important;
        background: #eef4fb !important;
    }

    .account-menu-support-actions .settings-action {
        margin: 0 !important;
    }

    /* ---------------------------------------------------------------------
       Slice 9 — Shared desktop components
       ------------------------------------------------------------------ */

    button,
    .btn,
    .primary-btn,
    .secondary-btn,
    .success-btn,
    .mini-btn,
    .link-btn {
        transition:
            color 150ms ease,
            border-color 150ms ease,
            background 150ms ease,
            box-shadow 150ms ease,
            transform 150ms ease;
    }

    .btn,
    .primary-btn,
    .secondary-btn,
    .success-btn,
    .mini-btn {
        min-height: 40px;
        padding: 0 15px;
        border-radius: 10px !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
    }

    .btn-primary,
    .primary-btn {
        border: 1px solid var(--dbm-desktop-primary) !important;
        color: #ffffff !important;
        background: var(--dbm-desktop-primary) !important;
        box-shadow: 0 7px 18px rgba(37, 99, 235, 0.2) !important;
    }

    .btn-primary:hover,
    .primary-btn:hover {
        border-color: var(--dbm-desktop-primary-strong) !important;
        background: var(--dbm-desktop-primary-strong) !important;
        box-shadow: 0 10px 22px rgba(37, 99, 235, 0.28) !important;
        transform: translateY(-1px);
    }

    .btn-secondary,
    .secondary-btn,
    .mini-btn {
        border: 1px solid var(--dbm-desktop-border-strong) !important;
        color: #385574 !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    .btn-secondary:hover,
    .secondary-btn:hover,
    .mini-btn:hover {
        border-color: #8fb4ee !important;
        color: #175ec1 !important;
        background: #f7fbff !important;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select,
    textarea {
        border-color: #dce5f0 !important;
        border-radius: 10px !important;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
    select:focus,
    textarea:focus {
        border-color: var(--dbm-desktop-primary) !important;
        outline: none !important;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
    }

    .sheet-backdrop,
    .app-popup,
    #logoutModal,
    #aboutModal {
        padding-left: var(--dbm-desktop-sidebar) !important;
        background: rgba(8, 25, 52, 0.48) !important;
        backdrop-filter: blur(7px) !important;
    }

    .app-popup-panel,
    #logoutModal > div,
    #aboutModal > div {
        width: min(520px, calc(100vw - var(--dbm-desktop-sidebar) - 64px)) !important;
        max-width: 520px !important;
        padding: 24px !important;
        border: 1px solid var(--dbm-desktop-border) !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 28px 80px rgba(8, 25, 52, 0.3) !important;
    }

    .app-popup-title {
        color: var(--dbm-desktop-text) !important;
        font-size: 20px !important;
        font-weight: 800 !important;
        letter-spacing: -0.2px;
    }

    .app-popup-message {
        color: var(--dbm-desktop-muted) !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    .status-card {
        border-radius: 10px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        border: 3px solid transparent;
        border-radius: 999px;
        background: #b9c7d8;
        background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #91a6bf;
        background-clip: content-box;
    }

    /* ---------------------------------------------------------------------
       Slice 10 — Final polish, accessibility and desktop responsiveness
       ------------------------------------------------------------------ */

    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    [tabindex]:focus-visible {
        outline: 3px solid rgba(37, 99, 235, 0.38) !important;
        outline-offset: 2px !important;
    }

    .section-title,
    .list-top .section-title {
        color: var(--dbm-desktop-text) !important;
        font-size: 19px !important;
        font-weight: 800 !important;
        letter-spacing: -0.25px !important;
    }

    .section-icon {
        width: 38px !important;
        height: 38px !important;
        border: 1px solid #d8e5f3 !important;
        border-radius: 10px !important;
        color: var(--dbm-desktop-primary) !important;
        background: #eef5ff !important;
        box-shadow: none !important;
    }

    .count-badge {
        min-width: 38px !important;
        height: 38px !important;
        border: 1px solid #d8e5f3 !important;
        border-radius: 10px !important;
        color: var(--dbm-desktop-primary) !important;
        background: #eef5ff !important;
    }

    /* The desktop shell owns navigation and refresh. The original bottom
       navigation remains untouched for mobile and is only hidden here. */
    body:not(.crm-login-visible) .bottom-nav {
        display: none !important;
    }

    .dbm-desktop-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 19000;
        display: flex;
        flex-direction: column;
        width: var(--dbm-desktop-sidebar);
        padding: 24px 16px;
        overflow: hidden;
        color: #c6d5ed;
        background: linear-gradient(180deg, #102a4b 0%, #172c50 62%, #0f1d35 100%);
        box-shadow: 14px 0 32px rgba(15, 35, 67, 0.16);
    }

    body.crm-login-visible .dbm-desktop-sidebar,
    body.crm-login-visible .dbm-desktop-floating-refresh {
        display: none !important;
    }

    .dbm-desktop-brand {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 58px;
        padding: 2px 10px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .dbm-desktop-brand img {
        flex: 0 0 auto;
        width: 43px;
        height: 43px;
        object-fit: contain;
    }

    .dbm-desktop-brand div {
        min-width: 0;
    }

    .dbm-desktop-brand strong,
    .dbm-desktop-brand span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dbm-desktop-brand strong {
        color: #ffffff;
        font-size: 17px;
        font-weight: 750;
        letter-spacing: -0.15px;
    }

    .dbm-desktop-brand span {
        margin-top: 3px;
        color: #8fa9cd;
        font-size: 11.5px;
        font-weight: 600;
    }

    .dbm-desktop-nav-heading {
        flex: 0 0 auto;
        margin: 17px 10px 7px;
        color: #8fa9cd;
        font-size: 10.5px;
        font-weight: 750;
        letter-spacing: .09em;
        text-transform: uppercase;
    }

    .dbm-desktop-nav {
        display: grid;
        flex: 1 1 220px;
        align-content: start;
        gap: 6px;
        min-height: 120px;
        margin-top: 0;
        padding-right: 3px;
        overflow-y: auto;
        scrollbar-color: rgba(143, 169, 205, .55) transparent;
        scrollbar-width: thin;
    }

    .dbm-desktop-nav button {
        display: flex;
        align-items: center;
        gap: 13px;
        width: 100%;
        min-height: 40px;
        padding: 0 14px;
        border: 0;
        border-radius: 11px;
        color: #c6d5ed;
        background: transparent;
        box-shadow: none;
        font: 650 14px/1 "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
        text-align: left;
        cursor: pointer;
    }

    .dbm-desktop-nav button:hover {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.08);
    }

    .dbm-desktop-nav button.active,
    .dbm-desktop-nav button[aria-current="page"] {
        color: #ffffff;
        background: linear-gradient(90deg, #2563eb, #2b82d5);
        box-shadow: 0 8px 18px rgba(4, 41, 109, 0.28);
    }

    .dbm-desktop-nav i {
        display: block;
        flex: 0 0 19px;
        width: 19px;
        height: 19px;
        background: currentColor;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
    }

    .dbm-desktop-nav i[data-icon="operations"] {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h10v3h3v15H4V6h3zM9 3v4h6V3M8 12h8M8 16h5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    .dbm-desktop-nav i[data-icon="billing"] {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 3h12v18l-3-2-3 2-3-2-3 2zm3 5h6M9 12h6'/%3E%3C/svg%3E");
    }

    .dbm-desktop-nav i[data-icon="search"] {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m16.5 16.5 4 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    }

    .dbm-desktop-nav i[data-icon="appointments"] {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    }

    .dbm-desktop-nav i[data-icon="dashboard"] {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20V10h4v10zm6 0V4h4v16zm6 0v-7h4v7z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    .dbm-desktop-nav i[data-icon="reports"] {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h9l4 4v14H6zM14 3v5h5M9 13h6M9 17h6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    .dbm-desktop-nav i[data-icon="settings"] {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-2.83 2.83-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.4 1.1V21h-4v-.09a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.88.34l-.06.06-2.83-2.83.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1.1-.4H3v-4h.09A1.7 1.7 0 0 0 4.6 8.5a1.7 1.7 0 0 0-.34-1.88l-.06-.06 2.83-2.83.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-.6 1.7 1.7 0 0 0 .4-1.1V3h4v.09A1.7 1.7 0 0 0 15.5 4.6a1.7 1.7 0 0 0 1.88-.34l.06-.06 2.83 2.83-.06.06A1.7 1.7 0 0 0 19.4 9c.4.3.6.6.6 1v.4h1v4h-.09A1.7 1.7 0 0 0 19.4 15z' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    .dbm-desktop-quick-actions {
        display: grid;
        flex: 0 1 175px;
        align-content: start;
        gap: 5px;
        min-height: 100px;
        margin-top: 17px;
        padding: 14px 3px 0 0;
        overflow-y: auto;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        scrollbar-color: rgba(143, 169, 205, .55) transparent;
        scrollbar-width: thin;
    }

    .dbm-desktop-quick-actions h2 {
        margin: 0 10px 5px;
        color: #8fa9cd;
        font-size: 10.5px;
        font-weight: 750;
        letter-spacing: .09em;
        text-transform: uppercase;
    }

    .dbm-desktop-quick-actions button {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 34px;
        padding: 0 11px;
        border: 1px solid transparent;
        border-radius: 9px;
        color: #b8c9e2;
        background: transparent;
        font: 620 12.5px/1 "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
        text-align: left;
        cursor: pointer;
    }

    .dbm-desktop-quick-actions button:hover,
    .dbm-desktop-quick-actions button:focus-visible {
        color: #ffffff;
        border-color: rgba(147, 197, 253, .25);
        background: rgba(37, 99, 235, .18);
        outline: none;
    }

    .dbm-desktop-quick-actions i {
        display: block;
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        background: currentColor;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
    }

    .dbm-desktop-nav::-webkit-scrollbar,
    .dbm-desktop-quick-actions::-webkit-scrollbar {
        width: 5px;
    }

    .dbm-desktop-nav::-webkit-scrollbar-thumb,
    .dbm-desktop-quick-actions::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(143, 169, 205, .5);
    }

    .dbm-desktop-quick-actions i[data-action-icon="customer"] {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='4' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M3 21v-2a6 6 0 0 1 12 0v2M19 8v6M16 11h6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    }

    .dbm-desktop-quick-actions i[data-action-icon="invoice"] {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2zM9 8h6M9 12h6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    .dbm-desktop-quick-actions i[data-action-icon="appointment"] {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18M12 13v5M9.5 15.5h5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    }

    .dbm-desktop-quick-actions i[data-action-icon="messages"] {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H8l-5 3 1.5-5A7 7 0 0 1 3 13V8a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4zM8 10h8M8 14h5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    .dbm-desktop-account {
        flex: 0 0 auto;
        margin-top: 14px;
        padding: 14px 4px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .dbm-desktop-account-copy {
        display: grid;
        gap: 3px;
        padding: 0 8px 11px;
    }

    .dbm-desktop-account-copy > span {
        color: #7894ba;
        font-size: 9.5px;
        font-weight: 750;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .dbm-desktop-account-copy > strong {
        overflow: hidden;
        color: #ffffff;
        font-size: 13px;
        font-weight: 750;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dbm-desktop-account-copy > small {
        color: #91a9ca;
        font-size: 10.5px;
        font-weight: 550;
    }

    .dbm-desktop-account-copy b {
        color: #cfe0f7;
        font-weight: 700;
    }

    .dbm-desktop-logout {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 38px;
        padding: 0 11px;
        border: 1px solid rgba(248, 113, 113, .28);
        border-radius: 9px;
        color: #fecaca;
        background: rgba(127, 29, 29, .16);
        font: 700 12.5px/1 "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
        cursor: pointer;
    }

    .dbm-desktop-logout:hover,
    .dbm-desktop-logout:focus-visible {
        border-color: rgba(248, 113, 113, .55);
        color: #ffffff;
        background: rgba(185, 28, 28, .3);
        outline: none;
    }

    .dbm-desktop-logout i {
        display: block;
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        background: currentColor;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m10 17 5-5-5-5M15 12H3m10-8V3h6a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-6v-1' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .dbm-desktop-sidebar-status {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: auto;
        padding: 18px 10px 4px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        color: #8fa9cd;
        font-size: 11.5px;
        font-weight: 600;
    }

    .dbm-desktop-sidebar-status i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #38d27a;
        box-shadow: 0 0 0 3px rgba(56, 210, 122, 0.12);
    }

    /* Operations workspace: one clear full-width row per task. */
    #appContainer > .page > .stats-row {
        display: none !important;
    }

    #appContainer > .page > .form-card,
    #appContainer > .page > .list-card,
    #appContainer > .page > .list-card:last-of-type {
        grid-column: 1 / -1 !important;
    }

    #accountPushMessagingAction {
        display: none !important;
    }

    /* Keep the desktop shell mounted while Billing and Invoice pages change. */
    .dbm-desktop-page-host {
        position: fixed;
        inset: 0 0 0 var(--dbm-desktop-sidebar);
        z-index: 18500;
        display: none;
        overflow: hidden;
        background: var(--dbm-desktop-bg);
    }

    .dbm-desktop-page-host.is-open {
        display: block;
    }

    .dbm-desktop-page-host::before {
        display: none;
    }

    .dbm-desktop-page-frame {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
        opacity: 0;
        background: var(--dbm-desktop-bg);
        transition: opacity 140ms ease;
    }

    .dbm-desktop-page-host.is-ready .dbm-desktop-page-frame {
        opacity: 1;
    }

    html.dbm-desktop-hosted-page,
    html.dbm-desktop-hosted-page body {
        min-height: 100%;
        background: var(--dbm-desktop-bg) !important;
    }

    html.dbm-desktop-hosted-page body {
        width: 100%;
        padding-left: 0 !important;
    }

    html.dbm-desktop-hosted-page .dbm-desktop-sidebar,
    html.dbm-desktop-hosted-page .dbm-desktop-floating-refresh {
        display: none !important;
    }

    body.dbm-page-documents #homeScreen > .card .dashboard-header {
        display: none !important;
    }

    body.dbm-page-documents #homeScreen > .card {
        margin-bottom: 18px !important;
        padding: 18px 22px !important;
    }

    body.dbm-page-documents #homeScreen .hero-actions .dbm-desktop-new-invoice {
        display: inline-flex !important;
    }

    body.dbm-page-documents #homeScreen .hero-actions #btnNewInvoice {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto !important;
        min-height: 42px;
        margin: 0 !important;
        padding: 0 18px !important;
        border: 1px solid #2563eb !important;
        border-radius: 11px !important;
        color: #ffffff !important;
        background: #2563eb !important;
        box-shadow: 0 8px 18px rgba(37, 99, 235, .22) !important;
        font-size: 13px !important;
        font-weight: 750 !important;
        white-space: nowrap;
    }

    body.dbm-page-documents #homeScreen .hero-actions #btnNewInvoice:hover {
        border-color: #1d4ed8 !important;
        background: #1d4ed8 !important;
    }

    #accountExportReportsAction {
        display: none !important;
    }

    #reportsScreen .reports-title-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center !important;
        gap: 10px !important;
    }

    #reportsScreen .desktop-report-export {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 124px;
        min-height: 36px;
        padding: 0 14px;
        border: 1px solid var(--dbm-desktop-primary);
        border-radius: 9px;
        color: #ffffff;
        background: var(--dbm-desktop-primary);
        box-shadow: 0 7px 18px rgba(37, 99, 235, 0.2);
        font-size: 12.5px;
        font-weight: 700;
        cursor: pointer;
    }

    #reportsScreen .desktop-report-export:hover {
        border-color: var(--dbm-desktop-primary-strong);
        background: var(--dbm-desktop-primary-strong);
        transform: translateY(-1px);
    }

    #reportsScreen .reports-hero .dbm-brand-title::after {
        content: "Shop Dashboard";
    }

    #reportsScreen .reports-hero .dbm-brand-subtitle::after {
        content: "Shop performance, collections and customer activity";
    }

    #reportsScreen .reports-eyebrow,
    #reportsScreen #reportsWorkspaceTitle {
        font-size: 0 !important;
    }

    #reportsScreen .reports-eyebrow::after {
        content: "Performance period";
        font-size: 10.5px;
    }

    #reportsScreen #reportsWorkspaceTitle::after {
        content: "Business Overview";
        font-size: 24px;
    }

    #reportsScreen .report-section-tabs {
        display: none !important;
    }

    #reportsScreen .reports-hero {
        display: none !important;
    }

    #reportsScreen .dashboard-welcome-card {
        display: block;
        min-height: 82px;
        margin: 0 0 20px;
        padding: 18px 22px;
        border: 1px solid var(--dbm-desktop-border);
        border-radius: var(--dbm-desktop-radius);
        background:
            linear-gradient(135deg, #ffffff 0%, #f4f8ff 62%, #eef7ff 100%);
        box-shadow: var(--dbm-desktop-shadow);
    }

    #reportsScreen .dashboard-welcome-kicker {
        margin: 0 0 2px;
        color: var(--dbm-desktop-primary);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    #reportsScreen .dashboard-welcome-card h1 {
        margin: 0;
        color: var(--dbm-desktop-text);
        font-size: 22px;
        line-height: 1.2;
        letter-spacing: -0.3px;
    }

    #reportsScreen .dashboard-welcome-copy {
        margin: 4px 0 0;
        color: var(--dbm-desktop-muted);
        font-size: 12.5px;
    }

    #reportsScreen .dashboard-announcement-slot {
        margin-bottom: 10px;
    }

    #reportsScreen .dashboard-announcement-slot #announcementBannerHost {
        gap: 8px !important;
        margin: 0 !important;
    }

    #reportsScreen .dashboard-announcement-slot #announcementBannerHost > article {
        padding: 12px 15px !important;
        border-radius: var(--dbm-desktop-radius) !important;
        box-shadow: var(--dbm-desktop-shadow) !important;
    }

    #reportsScreen .reports-panels {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px !important;
    }

    #reportsScreen .report-panel,
    #reportsScreen .report-panel.active {
        display: contents !important;
    }

    #reportsScreen .stats-row {
        grid-column: 1 / -1;
        gap: 12px !important;
        margin: 0 !important;
    }

    #reportsScreen #revenueGoalBlock,
    #reportsScreen #collectionsStrip {
        grid-column: span 1;
    }

    #reportsScreen .report-panel[data-panel="trends"] > .report-block {
        grid-column: 1 / -1;
    }

    #reportsScreen #businessAssistantBlock {
        grid-column: 1 / -1;
        margin: 0 !important;
    }

    #reportsScreen .business-insights-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        gap: 10px;
        margin-top: 10px;
    }

    #reportsScreen .business-insight {
        min-height: 100%;
    }

    #reportsScreen .reports-workspace {
        margin-bottom: 12px !important;
        padding: 16px 18px !important;
    }

    #reportsScreen .report-tabs {
        margin-top: 12px !important;
    }

    #reportsScreen .stat-card {
        min-height: 82px !important;
        padding: 12px 14px !important;
    }

    #reportsScreen .stat-label {
        font-size: 10px !important;
    }

    #reportsScreen .stat-value {
        margin-top: 4px !important;
        font-size: 22px !important;
    }

    #reportsScreen .report-block {
        min-height: 0 !important;
        padding: 14px !important;
    }

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

    #reportsScreen .goal-current {
        font-size: 28px !important;
    }

    #reportsScreen .goal-body {
        margin-top: 12px;
    }

    #reportsScreen .report-chart,
    #reportsScreen .weekday-chart,
    #reportsScreen .hourly-chart {
        height: 210px !important;
        min-height: 210px !important;
        padding: 10px !important;
    }

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

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

    @media (min-width: 1400px) {
        #reportsScreen .reports-panels {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        #reportsScreen .stats-row,
        #reportsScreen #revenueGoalBlock,
        #reportsScreen #collectionsStrip {
            grid-column: span 2;
        }

        #reportsScreen .stats-row {
            grid-column: 1 / -1;
        }

        #reportsScreen .report-panel[data-panel="trends"] > .report-block {
            grid-column: 1 / -1;
        }

        #reportsScreen .business-insights-list {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    #accountModal {
        inset: 0 0 0 var(--dbm-desktop-sidebar) !important;
        z-index: 18600 !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding: 28px 32px 44px !important;
        overflow-y: auto !important;
        background: var(--dbm-desktop-bg) !important;
        backdrop-filter: none !important;
    }

    #accountModal > div {
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        min-height: calc(100vh - 72px);
        margin: 0 !important;
        padding: 0 0 44px !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #accountModal .account-menu-header {
        min-height: 82px !important;
        margin-bottom: 20px !important;
        padding: 18px 22px !important;
        border: 1px solid var(--dbm-desktop-border) !important;
        border-radius: var(--dbm-desktop-radius) !important;
        color: var(--dbm-desktop-text) !important;
        background: linear-gradient(135deg, #ffffff, #f4f8ff) !important;
        box-shadow: var(--dbm-desktop-shadow) !important;
    }

    #accountModal .account-menu-logo {
        display: none !important;
    }

    #accountModal #accountModalTitle {
        color: var(--dbm-desktop-text) !important;
        font-size: 0 !important;
        text-shadow: none !important;
    }

    #accountModal #accountModalTitle::after {
        content: "Settings";
        display: block;
        font-size: 22px;
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: -0.3px;
    }

    #accountModal .account-menu-header .dbm-brand-subtitle {
        margin-top: 5px !important;
        color: var(--dbm-desktop-muted) !important;
        font-size: 13px !important;
        font-weight: 550 !important;
        text-shadow: none !important;
    }

    #accountModal .account-menu-identity,
    #accountModal .account-menu-license,
    #accountModal .settings-action {
        background: #ffffff !important;
        box-shadow: var(--dbm-desktop-shadow) !important;
    }

    #accountModal .account-menu-support-actions {
        display: none !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px !important;
    }

    #accountModal .account-menu-support-actions[style*="display: block"] {
        display: grid !important;
    }

    #accountModal .account-menu-support-actions a {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-height: 46px;
        margin: 0 !important;
        border: 1px solid var(--dbm-desktop-border);
        border-radius: 10px !important;
        box-shadow: 0 5px 14px rgba(28, 65, 112, 0.05);
    }

    #exportSheet.sheet-backdrop.show {
        position: fixed !important;
        inset: 0 0 0 var(--dbm-desktop-sidebar) !important;
        z-index: 18600 !important;
        display: block !important;
        padding: 28px 32px 44px !important;
        overflow-y: auto !important;
        background: var(--dbm-desktop-bg) !important;
        backdrop-filter: none !important;
    }

    #exportSheet.sheet-backdrop.show > .sheet {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: calc(100vh - 72px) !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 24px !important;
        overflow: visible !important;
        transform: none !important;
        animation: none !important;
        border: 1px solid var(--dbm-desktop-border) !important;
        border-radius: var(--dbm-desktop-radius) !important;
        background: #ffffff !important;
        box-shadow: var(--dbm-desktop-shadow) !important;
    }

    #exportSheet.sheet-backdrop.show .sheet-handle {
        display: none !important;
    }

    #exportSheet.sheet-backdrop.show .sheet-top {
        min-height: 82px !important;
        margin: 0 0 20px !important;
        padding: 18px 22px !important;
        border: 1px solid var(--dbm-desktop-border) !important;
        border-radius: var(--dbm-desktop-radius) !important;
        color: var(--dbm-desktop-text) !important;
        background: linear-gradient(135deg, #ffffff, #f4f8ff) !important;
        box-shadow: var(--dbm-desktop-shadow) !important;
    }

    #exportSheet.sheet-backdrop.show .sheet-title {
        color: var(--dbm-desktop-text) !important;
        font-size: 0 !important;
    }

    #exportSheet.sheet-backdrop.show .sheet-title::after {
        content: "Reports";
        font-size: 22px;
        font-weight: 800;
        letter-spacing: -.3px;
    }

    #exportSheet.sheet-backdrop.show .sheet-subtitle {
        margin-top: 5px !important;
        color: var(--dbm-desktop-muted) !important;
        font-size: 13px !important;
        font-weight: 550 !important;
    }

    #exportSheet.sheet-backdrop.show .sheet-top .icon-btn {
        display: none !important;
    }

    body:not(.crm-login-visible) .hero #searchBtn,
    body:not(.crm-login-visible) .hero #appointmentSearchBtn,
    body:not(.crm-login-visible) .hero #reportsSearchBtn,
    body:not(.crm-login-visible) .hero #btnBillingSearch,
    body:not(.crm-login-visible) .hero #menuBtn,
    body:not(.crm-login-visible) .hero [data-profile-menu],
    body:not(.crm-login-visible) .hero button[onclick*="openHomeMenu"],
    body:not(.crm-login-visible) .hero button[onclick*="openSharedAppMenu"],
    body.dbm-page-invoice-preview .hero button[onclick*="openInvoicePreviewMenu"],
    body:not(.crm-login-visible) .hero #reportsRefreshBtn,
    body:not(.crm-login-visible) .hero .app-refresh-btn,
    body:not(.crm-login-visible) .account-menu-header #accountRefreshBtn,
    body:not(.crm-login-visible) .account-menu-header #accountSearchBtn {
        display: none !important;
    }

    .dbm-desktop-floating-refresh {
        position: fixed;
        right: 28px;
        bottom: 28px;
        z-index: 20500;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        padding: 0;
        border: 1px solid #cbd9e9;
        border-radius: 50%;
        color: #2e4768;
        background: #ffffff;
        box-shadow: 0 12px 30px rgba(15, 35, 67, 0.2);
        cursor: pointer;
    }

    .dbm-desktop-floating-refresh:hover {
        border-color: #8fb4ee;
        color: #175ec1;
        background: #f7fbff;
        transform: translateY(-2px);
    }

    .dbm-desktop-floating-refresh:active {
        transform: scale(0.95);
    }

    .dbm-desktop-floating-refresh:disabled {
        cursor: wait;
        opacity: 0.82;
    }

    .dbm-desktop-floating-refresh span {
        display: block;
        width: 20px;
        height: 20px;
        background: currentColor;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6v5h-5M4 18v-5h5M6.1 8A7 7 0 0 1 18 6l2 5M18 16a7 7 0 0 1-11.9 2L4 13' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .dbm-desktop-floating-refresh.is-refreshing span {
        animation: dbm-desktop-refresh-spin 650ms linear infinite;
    }

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

    @media (max-width: 1240px) {
        :root {
            --dbm-desktop-sidebar: 224px;
        }

        .page,
        #searchHubPage .page,
        #appointmentsPage > .page,
        #appointmentAddPage > .page,
        #reportsScreen {
            padding-right: 22px !important;
            padding-left: 22px !important;
        }

        #entryList,
        #appointmentsList {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        #searchHubPage .form-card .form-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !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;
        }
    }

    /* Single-scroll desktop sidebar and expandable Settings section. */
    .dbm-desktop-sidebar {
        overflow: hidden;
    }

    .dbm-desktop-sidebar-scroll::-webkit-scrollbar { width: 5px; }
    .dbm-desktop-sidebar-scroll::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(143, 169, 205, .5);
    }

    .dbm-desktop-sidebar-scroll {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        overflow-y: auto;
        scrollbar-color: rgba(143, 169, 205, .55) transparent;
        scrollbar-width: thin;
    }

    .dbm-desktop-sidebar-footer {
        flex: 0 0 auto;
        background: linear-gradient(180deg, rgba(15, 29, 53, .96), #0f1d35);
    }

    .dbm-desktop-section {
        flex: 0 0 auto;
        margin-top: 17px;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .dbm-desktop-section summary {
        display: flex;
        align-items: center;
        min-height: 40px;
        padding: 0 10px;
        color: #8fa9cd;
        font-size: 10.5px;
        font-weight: 750;
        letter-spacing: .09em;
        text-transform: uppercase;
        cursor: pointer;
        list-style: none;
    }

    .dbm-desktop-section summary::-webkit-details-marker { display: none; }
    .dbm-desktop-section summary b {
        width: 7px;
        height: 7px;
        margin-left: auto;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg) translateY(-2px);
        transition: transform .18s ease;
    }

    .dbm-desktop-section[open] > summary b {
        transform: rotate(225deg) translate(-1px, -1px);
    }

    /* Keep the desktop sidebar compact: one separator between its two groups. */
    .dbm-desktop-sidebar {
        padding: 16px 12px;
    }

    .dbm-desktop-brand {
        min-height: 48px;
        padding: 0 8px 12px;
    }

    .dbm-desktop-section {
        margin-top: 10px;
        border-top: 0;
    }

    .dbm-desktop-section + .dbm-desktop-section {
        padding-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .dbm-desktop-section summary {
        min-height: 32px;
        padding: 0 8px;
    }

    .dbm-desktop-nav {
        gap: 2px;
    }

    .dbm-desktop-nav button {
        min-height: 36px;
        padding: 0 12px;
    }

    .dbm-desktop-quick-actions {
        display: block;
        margin-top: 10px;
        padding: 0;
        border-top: 0;
    }

    .dbm-desktop-quick-actions > div {
        gap: 2px;
    }

    .dbm-desktop-quick-actions button {
        min-height: 30px;
        padding: 0 10px;
    }

    .dbm-desktop-nav {
        flex: 0 0 auto;
        min-height: 0;
        overflow: visible;
    }

    .dbm-desktop-quick-actions {
        flex: 0 0 auto;
        min-height: 0;
        overflow: visible;
    }

    .dbm-desktop-quick-actions > div {
        display: grid;
        gap: 5px;
    }

    .dbm-desktop-account {
        display: flex;
        align-items: center;
        gap: 11px;
        margin-top: 0;
        padding: 16px 10px 11px;
    }

    .dbm-desktop-account-avatar {
        display: grid;
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        place-items: center;
        border-radius: 50%;
        color: #ffffff;
        background: linear-gradient(135deg, #2563eb, #4d8cff);
        font-size: 14px;
        font-weight: 800;
    }

    .dbm-desktop-account-copy {
        min-width: 0;
        padding: 0;
    }

    .dbm-desktop-account-copy > span { display: none; }

    .dbm-desktop-logout {
        width: calc(100% - 20px);
        min-height: 34px;
        margin: 0 10px 2px;
        padding: 0 11px;
        border: 0;
        border-radius: 8px;
        background: transparent;
    }

    .dbm-desktop-login-benefits {
        display: grid !important;
        gap: 0;
        max-width: 580px;
        margin-top: 34px;
        color: rgba(236, 244, 255, .92);
        font-size: 13px;
        line-height: 1.5;
    }

    .dbm-desktop-login-benefits p {
        max-width: 49ch;
        margin: 0;
        color: rgba(236, 244, 255, .82);
    }

    .dbm-desktop-login-benefits h2 {
        margin: 22px 0 12px;
        color: #ffffff;
        font-size: 16px;
        font-weight: 750;
    }

    .dbm-desktop-login-benefits ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 10px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .dbm-desktop-login-benefits li {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 34px;
        padding: 0 10px;
        border: 1px solid rgba(191, 219, 254, .16);
        border-radius: 9px;
        background: rgba(255, 255, 255, .055);
        color: rgba(236, 244, 255, .92);
        font-weight: 650;
    }

    .dbm-desktop-login-benefits li::before {
        content: "✓";
        color: #8ee7ff;
        font-size: 15px;
        font-weight: 800;
    }

    /* Hosted page workspaces retain a fixed header and scroll only content. */
    body.dbm-page-push-message,
    body.dbm-page-shop-settings {
        height: 100vh;
        overflow: hidden;
    }

    body.dbm-page-push-message > .page,
    body.dbm-page-shop-settings > .page {
        display: grid;
        height: 100%;
        grid-template-rows: minmax(0, 1fr);
        overflow: hidden;
    }

    #pushMessageScreen,
    #shopSettingsScreen {
        display: grid;
        min-height: 0;
        grid-template-rows: auto minmax(0, 1fr);
    }

    #pushMessageScreen > .hero,
    #shopSettingsScreen > .hero {
        position: relative;
        z-index: 1;
        margin-bottom: 0 !important;
    }

    #pushMessageScreen .page-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start;
        min-height: 0;
        padding: 18px 22px 36px !important;
        overflow-y: auto;
    }

    #pushMessageScreen .page-content > .card {
        grid-column: auto;
        min-width: 0;
    }

    #pushMessageScreen #pm_list {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        margin: 0 !important;
        padding-bottom: 24px !important;
    }

    #pushMessageScreen #pm_next_panel {
        left: calc(var(--dbm-desktop-sidebar) + 50%) !important;
    }

    body.dbm-page-documents #invoiceScreen > .hero {
        display: none !important;
    }

    body.dbm-page-shop-settings #shopSettingsScreen {
        width: 100%;
    }

    body.dbm-page-shop-settings .settings-card {
        width: 100%;
        max-width: none !important;
        min-height: 0;
        margin: 0 !important;
        overflow-y: auto;
    }

    #aboutModal {
        z-index: 30000 !important;
        padding-left: var(--dbm-desktop-sidebar) !important;
    }

    #aboutModal > div {
        width: min(760px, calc(100vw - var(--dbm-desktop-sidebar) - 72px)) !important;
        max-width: 760px !important;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
    }

    #aboutModal #aboutModalTitle {
        color: var(--dbm-desktop-text);
        font-size: 26px !important;
        letter-spacing: -.4px;
    }

    #aboutModal .about-dialog-details {
        display: grid;
        gap: 10px;
        margin: 18px 0;
    }

    #aboutModal .about-dialog-details > div {
        display: grid;
        gap: 4px;
        padding: 13px 14px;
        border: 1px solid #dce7f4;
        border-radius: 11px;
        background: #f8fbff;
    }

    #aboutModal .about-dialog-details b { color: #17345b; font-size: 13px; }
    #aboutModal .about-dialog-details span { color: #61738d; font-size: 12.5px; line-height: 1.5; }

    /* Compact fixed login form: no vertical scrolling on desktop. */
    body.crm-login-visible #loginContainer .glass-card.form-card {
        justify-content: center;
        padding-top: 16px !important;
        padding-bottom: 12px !important;
        overflow: hidden !important;
    }

    body.crm-login-visible #loginContainer .form-grid {
        max-width: 460px;
        padding: 18px 20px 14px;
        gap: 7px !important;
        border: 1px solid #e1e9f5;
        border-radius: 16px;
        background: linear-gradient(180deg, #ffffff, #fbfdff);
        box-shadow: 0 16px 36px rgba(38, 83, 151, .09);
        box-sizing: border-box;
    }

    body.crm-login-visible #loginContainer .field { margin-bottom: 0 !important; }
    body.crm-login-visible #loginContainer .field input { min-height: 44px !important; }
    body.crm-login-visible #loginContainer .field:has(#rememberShopId) { margin-top: 3px !important; }
    body.crm-login-visible #loginContainer .field:has(#rememberMe) { margin-top: -5px !important; }
    body.crm-login-visible #loginContainer #quickLoginBox { margin: -2px 0 0 !important; }
    body.crm-login-visible #loginContainer #quickLoginBox > div:first-child {
        padding: 8px 14px !important;
        font-size: 14px !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 8px !important; }
    body.crm-login-visible #loginContainer .glass-card.form-card > div[style*="text-align:center"] {
        max-width: 460px;
        margin: 5px auto 0 !important;
        font-size: 10px !important;
        line-height: 1.35 !important;
    }
}