/*
 * 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;
    }

    *,
    *::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: "Dashboard";
        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: "Daily operations and customer activity";
        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";
    }

    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: block !important;
    }

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

    body.crm-login-visible #loginContainer .app-hero .hero-top > div {
        position: static !important;
        inset: auto !important;
        display: block !important;
        padding: 0 !important;
    }

    body.crm-login-visible #loginContainer .app-hero .hero-top > div > 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 > div > 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 .glass-card.form-card {
        display: flex !important;
        flex: 1 1 52%;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        margin: 0 !important;
        padding: clamp(38px, 5vw, 84px) !important;
        overflow-y: auto;
        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: 14px !important;
    }

    /* ---------------------------------------------------------------------
       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 > #announcementBannerHost,
    #appContainer > .page > #clinicGreetingCard,
    #appContainer > .page > .stats-row {
        grid-column: 1 / -1;
        width: 100%;
        margin: 0 !important;
    }

    #announcementBannerHost {
        gap: 12px !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 {
        inset: 0 0 0 var(--dbm-desktop-sidebar) !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: 12px 18px !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;
    }

    @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;
        }
    }
}