:root {
    --ink-950: #0f1318;
    --ink-800: #1b2734;
    --ink-700: #27384a;
    --slate-200: #c5d3e2;
    --slate-100: #deebf8;
    --paper: #f2f7fc;
    --white: #ffffff;
    --brand-700: #8e121f;
    --brand-600: #bb1a28;
    --brand-500: #d52835;
    --accent-700: #0f3f78;
    --accent-500: #1f66b2;
    --accent-300: #5ea1e3;
    --alert: #b4233c;
    --radius: 18px;
    --radius-sm: 12px;
    --shadow: 0 20px 45px rgba(17, 39, 59, 0.12);
}

/* Match desktop text to the customer reference font in both UI variants. */
body.desktop-crm-body {
    --app-body-font: "Rajdhani", sans-serif;
}

.customer-site-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.desktop-crm-body .customer-summary-panel .customer-callout-only-badge,
.desktop-crm-body .linked-accounts-panel .customer-callout-only-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border: 1px solid #e0b45a;
    border-radius: 999px;
    background: #fff3cd;
    color: #704b00;
    font-weight: 700;
    white-space: nowrap;
}

.desktop-crm-body .linked-accounts-panel .customer-callout-only-badge {
    padding: 1px 5px;
    font-size: 0.6rem;
    line-height: 1.2;
    vertical-align: middle;
}

.desktop-crm-body .customer-callout-only-field input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-height: 0;
    padding: 0;
    margin: 0;
    accent-color: var(--accent-700);
}

/* Desktop application layout: shares the mobile app's flat record language. */
@media (min-width: 801px) {
    body.desktop-crm-body .directory-toolbar {
        align-items: center;
        flex-wrap: wrap;
        gap: 8px 12px;
        padding: 6px 10px;
        margin-bottom: 8px;
    }

    .desktop-crm-body .directory-toolbar .customer-source-filter {
        gap: 6px;
    }

    .desktop-crm-body .directory-toolbar select {
        width: 130px;
        min-height: 34px;
        padding: 4px 8px;
    }

    body.desktop-crm-body .directory-toolbar .button {
        min-height: 34px;
        padding: 4px 10px;
    }

    .desktop-crm-body .header-customer-search input,
    .desktop-crm-body .header-customer-search .button {
        min-height: 34px;
        padding: 4px 8px;
    }

    .desktop-crm-body .customer-directory-panel .pagination {
        padding: 6px 10px;
        gap: 10px;
        border-top: 0;
        border-bottom: 1px solid #e3eaf0;
    }

    /* Enlarge rem-based typography while respecting the browser's font setting. */
    html.desktop-crm-root {
        font-size: 112.5%;
    }

    body.crm-body.desktop-crm-body,
    .desktop-crm-body::before {
        background: #fafbfd;
    }

    .desktop-crm-body .bg-orb {
        display: none;
    }

    .desktop-crm-body .app-header {
        min-height: 68px;
        padding: 0 clamp(20px, 3vw, 44px);
        border-bottom: 1px solid #dfe7ed;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 2px 12px rgba(20, 48, 70, 0.04);
        backdrop-filter: blur(16px);
    }

    .desktop-crm-body .brand-logo {
        width: 40px;
        height: 40px;
    }

    .desktop-crm-body .top-nav {
        align-self: stretch;
        align-items: stretch;
        gap: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .desktop-crm-body .top-nav a {
        display: flex;
        align-items: center;
        padding: 0 14px;
        border-radius: 0;
        color: #36536c;
        font-size: 0.82rem;
    }

    .desktop-crm-body .top-nav a + a {
        border-left: 1px solid #e1e8ee;
    }

    .desktop-crm-body .top-nav > * + * {
        border-left: 1px solid #e1e8ee;
    }

    .desktop-crm-body .top-nav a:hover,
    .desktop-crm-body .top-nav a:focus-visible,
    .desktop-crm-body .nav-dropdown-trigger:hover,
    .desktop-crm-body .nav-dropdown-trigger:focus-visible,
    .desktop-crm-body .nav-dropdown:focus-within > .nav-dropdown-trigger {
        background: #e7f0f8;
        color: var(--accent-700);
        transform: none;
    }

    .desktop-crm-body .app-shell {
        width: min(100% - 40px, 1380px);
        max-width: none;
        margin: 24px auto 48px;
        padding: 0 0 64px;
    }

    .desktop-crm-body .page-head {
        display: flex;
        align-items: baseline;
        gap: 14px;
        padding: 4px 2px 14px;
        border-bottom: 1px solid #dfe7ed;
    }

    .desktop-crm-body .page-head h1 {
        font-size: clamp(1.8rem, 2.4vw, 2.45rem);
        line-height: 1;
    }

    .desktop-crm-body .page-head > span,
    .desktop-crm-body .page-head p {
        margin: 0;
        color: #60778a;
        font-size: 0.95rem;
    }

    .desktop-crm-body .content-stack {
        margin-top: 16px;
    }

    .desktop-crm-body .content-stack > * + * {
        margin-top: 16px;
    }

    .desktop-crm-body .panel,
    .desktop-crm-body .kpi-card {
        overflow: hidden;
        padding: 0;
        border: 1px solid #dfe7ed;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 5px 18px rgba(24, 54, 76, 0.045);
    }

    .desktop-crm-body .panel-head {
        min-height: 54px;
        margin: 0;
        padding: 9px 14px 9px 18px;
        border-bottom: 1px solid #cbd7e0;
        background: #e3eaf0;
        box-shadow: none;
    }

    .desktop-crm-body .panel-head h3 {
        color: #173f63;
        font-size: 0.98rem;
    }

    .desktop-crm-body .customer-summary-content {
        gap: 0;
        padding: 0;
    }

    .desktop-crm-body .customer-address,
    .desktop-crm-body .customer-account-field {
        min-height: 112px;
        padding: 16px 18px;
        border: 0;
        border-right: 1px solid #e3eaf0;
        border-radius: 0;
        background: #fff;
    }

    .desktop-crm-body .customer-account-meta,
    .desktop-crm-body .customer-account-meta-row {
        gap: 0;
    }

    .desktop-crm-body .customer-account-meta-row .customer-account-field:last-child {
        border-right: 0;
    }

    .desktop-crm-body .customer-account-meta > .customer-account-memo {
        min-height: 72px;
        border-top: 1px solid #e3eaf0;
        border-right: 0;
    }

    .desktop-crm-body .detail-grid {
        gap: 16px;
        margin-top: 16px;
    }

    .desktop-crm-body .contact-list,
    .desktop-crm-body .stack-list,
    .desktop-crm-body .appliance-cards,
    .desktop-crm-body .work-cards {
        gap: 0;
    }

    .desktop-crm-body .contact-row,
    .desktop-crm-body .note-item,
    .desktop-crm-body .appliance-card,
    .desktop-crm-body .work-card {
        border: 0;
        border-bottom: 1px solid #e7edf2;
        border-radius: 0;
        background: #fff;
    }

    .desktop-crm-body .contact-row:last-child,
    .desktop-crm-body .note-item:last-child,
    .desktop-crm-body .appliance-card:last-child,
    .desktop-crm-body .work-card:last-child {
        border-bottom: 0;
    }

    .desktop-crm-body .contact-item summary {
        padding: 12px 18px;
    }

    .desktop-crm-body .contact-item summary:hover,
    .desktop-crm-body .contact-item[open] summary {
        background: #f6f9fb;
    }

    .desktop-crm-body .contact-item-body,
    .desktop-crm-body .appliance-card,
    .desktop-crm-body .work-card {
        padding: 14px 18px;
    }

    .desktop-crm-body .note-item {
        min-height: 54px;
        padding: 10px 14px 10px 18px;
    }

    .desktop-crm-body .customer-detail-page-head {
        gap: 9px;
        padding: 0 2px 8px;
    }

    .desktop-crm-body .customer-detail-page-head h1 {
        font-size: clamp(1.4rem, 1.8vw, 1.75rem);
    }

    .desktop-crm-body .customer-detail-page-head > span {
        font-size: 0.86rem;
    }

    .desktop-crm-body .customer-detail-stack {
        margin-top: 8px;
    }

    .desktop-crm-body .customer-detail-stack > * + * {
        margin-top: 8px;
    }

    .desktop-crm-body .customer-detail-stack .panel-head {
        min-height: 40px;
        padding: 5px 9px 5px 12px;
    }

    .desktop-crm-body .customer-detail-stack .panel-head h3 {
        font-size: 0.84rem;
    }

    .desktop-crm-body .customer-detail-stack .customer-address,
    .desktop-crm-body .customer-detail-stack .customer-account-field {
        min-height: 72px;
        padding: 8px 12px;
        font-size: 0.84rem;
        line-height: 1.3;
    }

    .desktop-crm-body .customer-detail-stack .customer-account-meta > .customer-account-memo {
        min-height: 46px;
    }

    .desktop-crm-body .customer-detail-stack .detail-grid {
        gap: 8px;
        margin-top: 8px;
    }

    .desktop-crm-body .customer-detail-stack .contact-item summary {
        padding: 7px 12px;
    }

    .desktop-crm-body .customer-detail-stack .contact-item-head {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        min-width: 0;
        align-items: center;
        gap: 16px;
        padding: 7px 9px 4px 12px;
    }

    .desktop-crm-body .customer-detail-stack .contact-item-head > strong {
        min-width: 0;
        grid-column: 1 / 4;
    }

    .desktop-crm-body .customer-detail-stack .contact-heading-email {
        display: grid;
        grid-column: 2 / 4;
        gap: 1px;
        min-width: 0;
        font-size: 0.8rem;
    }

    .desktop-crm-body .customer-detail-stack .contact-heading-email small {
        color: #718797;
        font-family: "Rajdhani", sans-serif;
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.045em;
        line-height: 1;
        text-transform: uppercase;
    }

    .desktop-crm-body .customer-detail-stack .contact-heading-email a {
        min-width: 0;
        color: #315f80;
        overflow: hidden;
        text-decoration: none;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .desktop-crm-body .customer-detail-stack .contact-heading-email a:hover {
        color: #173f60;
        text-decoration: underline;
    }

    .desktop-crm-body .customer-detail-stack .contact-head-actions {
        display: flex;
        grid-column: 4;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
    }

    .desktop-crm-body .customer-detail-stack .contact-item-head .button-edit {
        margin-left: 2px;
        min-height: 0;
        padding: 5px 9px;
        flex: 0 0 auto;
        font-size: 0.7rem;
        line-height: 1;
    }

    .desktop-crm-body .customer-detail-stack .contact-row:nth-child(even) {
        background: #f6f9fb;
    }

    .desktop-crm-body .customer-detail-stack .contact-summary-hint {
        width: 12ch;
    }

    .desktop-crm-body .customer-detail-stack .contact-summary-hint::before {
        content: "View all details";
    }

    .desktop-crm-body .customer-detail-stack .contact-item[open] .contact-summary-hint::before {
        content: "Hide details";
    }

    .desktop-crm-body .customer-detail-stack .contact-item summary:hover,
    .desktop-crm-body .customer-detail-stack .contact-item[open] summary {
        background: rgba(225, 235, 242, 0.55);
    }

    .desktop-crm-body .customer-detail-stack .contact-summary-main {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 16px;
    }

    .desktop-crm-body .customer-detail-stack .contact-summary-name {
        min-width: 150px;
    }

    .desktop-crm-body .customer-detail-stack .contact-summary-details {
        display: flex;
        flex-wrap: wrap;
        min-width: 0;
        align-items: center;
        gap: 6px 16px;
        font-size: 0.82rem;
        font-weight: 500;
    }

    .desktop-crm-body .customer-detail-stack .contact-summary-value {
        display: inline-flex;
        align-items: baseline;
        gap: 5px;
        white-space: nowrap;
    }

    .desktop-crm-body .customer-detail-stack .contact-summary-value small {
        color: #6a8091;
        font-family: "Rajdhani", sans-serif;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .desktop-crm-body .customer-detail-stack .contact-summary-details a,
    .desktop-crm-body .customer-detail-stack .contact-grid a {
        color: #315f80;
        text-decoration: none;
    }

    .desktop-crm-body .customer-detail-stack .contact-summary-details a:hover,
    .desktop-crm-body .customer-detail-stack .contact-grid a:hover {
        color: #173f60;
        text-decoration: underline;
    }

    .desktop-crm-body .customer-detail-stack .contact-grid:empty {
        display: none;
    }

    .desktop-crm-body .customer-detail-stack .contact-item-static .contact-item-body {
        padding: 0 12px 8px;
    }

    .desktop-crm-body .customer-detail-stack .contact-item-static {
        min-height: 0;
    }

    .desktop-crm-body .customer-detail-stack .contact-item-static .contact-grid {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        width: 100%;
        gap: 3px 0;
    }

    .desktop-crm-body .customer-detail-stack .contact-item-static .contact-grid p {
        display: inline-flex;
        min-width: 0;
        align-items: baseline;
        gap: 5px;
        font-size: 0.82rem;
    }

    .desktop-crm-body .customer-detail-stack .contact-item-static .contact-grid p:not(:last-child)::after {
        margin: 0 10px;
        color: #a9b8c3;
        content: "·";
    }

    .desktop-crm-body .customer-detail-stack .contact-item-static .field-label {
        display: inline;
        color: #718797;
        font-size: 0.66rem;
        letter-spacing: 0.045em;
    }

    .desktop-crm-body .customer-detail-stack .contact-item-static .contact-grid a {
        overflow-wrap: anywhere;
    }

    .desktop-crm-body .customer-detail-stack .contact-item-static .contact-address {
        display: grid;
        min-width: 0;
        gap: 2px;
        margin: 0;
        white-space: normal;
    }

    .desktop-crm-body .customer-detail-stack .contact-item-static .contact-address > span:last-child {
        display: block;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .desktop-crm-body .customer-detail-stack .contact-item-static .contact-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 7px 16px;
    }

    .desktop-crm-body .customer-detail-stack .contact-item-static .contact-grid p {
        display: grid;
        gap: 2px;
        font-size: 0.82rem;
    }

    .desktop-crm-body .customer-detail-stack .contact-item-static .contact-grid p::after {
        display: none;
    }

    .desktop-crm-body .customer-detail-stack .contact-secondary-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin-top: 7px;
        padding-top: 7px;
        border-top: 1px solid #e1e9ef;
    }

    .desktop-crm-body .customer-detail-stack .contact-secondary-row p {
        display: grid;
        min-width: 0;
        gap: 2px;
        margin: 0;
        font-size: 0.82rem;
    }

    .desktop-crm-body .customer-detail-stack .contact-secondary-row .contact-address {
        grid-column: 1 / -1;
    }

    .desktop-crm-body .customer-detail-stack .contact-email-field a {
        min-width: 0;
        color: #315f80;
        overflow: hidden;
        text-decoration: none;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .desktop-crm-body .customer-detail-stack .contact-email-field a:hover {
        color: #173f60;
        text-decoration: underline;
    }

    .desktop-crm-body .customer-detail-stack .contact-item-body,
    .desktop-crm-body .customer-detail-stack .appliance-card,
    .desktop-crm-body .customer-detail-stack .work-card {
        padding: 8px 12px;
        font-size: 0.88rem;
    }

    .desktop-crm-body .customer-detail-stack .note-item {
        min-height: 40px;
        padding: 6px 9px 6px 12px;
        font-size: 0.86rem;
    }

    .desktop-crm-body .customer-detail-stack .field-label {
        font-size: 0.68rem;
    }

    .desktop-crm-body .customer-detail-stack .panel-head .button {
        padding: 5px 8px;
        font-size: 0.7rem;
    }

    .desktop-crm-body .customer-detail-stack .appliance-card-head,
    .desktop-crm-body .customer-detail-stack .work-card-head {
        margin-bottom: 5px;
    }

    .desktop-crm-body .customer-detail-stack .appliance-meta-grid {
        gap: 6px 12px;
    }

    .desktop-crm-body .customer-detail-stack .appliance-actions,
    .desktop-crm-body .customer-detail-stack .work-card-footer {
        margin-top: 6px;
    }

    .desktop-crm-body .customer-detail-stack .work-description {
        font-size: 0.86rem;
        line-height: 1.35;
    }

    .desktop-crm-body .button {
        border-radius: 8px;
        padding: 9px 13px;
        background: var(--accent-500);
        box-shadow: none;
    }

    .desktop-crm-body .button:hover,
    .desktop-crm-body .button:focus-visible {
        background: var(--accent-700);
        box-shadow: none;
        transform: none;
    }

    .desktop-crm-body .button-ghost {
        border: 1px solid #cbd9e4;
        background: #fff;
        color: var(--accent-700);
    }

    .desktop-crm-body .button-ghost:hover,
    .desktop-crm-body .button-ghost:focus-visible {
        border-color: #aebfcd;
        background: #edf4fa;
        color: var(--accent-700);
    }

    .desktop-crm-body .search-row {
        padding: 10px;
        border: 1px solid #dfe7ed;
        border-radius: 12px;
        background: #fff;
    }

    .desktop-crm-body .directory-toolbar {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
    }

    .desktop-crm-body .directory-toolbar .button {
        padding: 12px 20px;
        font-size: 0.9rem;
    }

    .desktop-crm-body .page-actions {
        display: flex;
        justify-content: flex-end;
        margin: 16px 0 10px;
    }

    .desktop-crm-body .dashboard-actions .button {
        padding: 12px 20px;
        font-size: 0.9rem;
    }

    .desktop-crm-body .dashboard-actions + .dashboard-kpis {
        margin-top: 10px;
    }

    .desktop-crm-body input,
    .desktop-crm-body select,
    .desktop-crm-body textarea {
        border-radius: 8px;
        background-color: #fff;
    }

    .desktop-crm-body .table-wrap {
        background: #fff;
    }

    .desktop-crm-body th {
        padding: 10px 14px;
        border-bottom-color: #cbd7e0;
        background: #e3eaf0;
        color: #173f63;
        font-family: "Rajdhani", sans-serif;
        font-size: 0.8rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .desktop-crm-body td {
        padding: 12px 14px;
    }

    .desktop-crm-body tbody tr:hover {
        background: #f8fafc;
    }

    .desktop-crm-body .pagination {
        margin: 0;
        padding: 12px 14px;
        border-top: 1px solid #e3eaf0;
    }

    .desktop-crm-body .customer-ref-link {
        justify-content: flex-start;
        width: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--accent-700);
    }

    .desktop-crm-body .customer-ref-link:hover {
        background: transparent;
        transform: none;
        text-decoration: underline;
    }

    .desktop-crm-body .crm-modal {
        border-radius: 14px;
        box-shadow: 0 24px 70px rgba(15, 35, 52, 0.24);
    }

    .desktop-crm-body .modal-form {
        border: 0;
        border-radius: 14px;
        background: #fff;
    }

    .desktop-crm-body .modal-head {
        min-height: 56px;
        margin: -18px -18px 16px;
        padding: 12px 18px;
        border-bottom: 1px solid #cbd7e0;
        background: #e3eaf0;
    }

    .desktop-crm-body .modal-head h4 {
        margin: 0;
        color: #173f63;
        font-size: 1.02rem;
    }

    .desktop-crm-body .modal-head .button-plain {
        border-color: #bccbd6;
        border-radius: 7px;
        background: rgba(255, 255, 255, 0.72);
        color: #25496a;
    }

    .desktop-crm-body .modal-head .button-plain:hover,
    .desktop-crm-body .modal-head .button-plain:focus-visible {
        background: #fff;
    }
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background:
        radial-gradient(circle at 10% 5%, rgba(213, 40, 53, 0.16), transparent 40%),
        radial-gradient(circle at 95% 15%, rgba(31, 102, 178, 0.16), transparent 34%),
        linear-gradient(165deg, #edf2f9 0%, #f9fbff 52%, #edf3fb 100%);
}

body.crm-body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--app-body-font, "Space Grotesk", sans-serif);
    color: var(--ink-800);
    background:
        radial-gradient(circle at 10% 5%, rgba(213, 40, 53, 0.16), transparent 40%),
        radial-gradient(circle at 95% 15%, rgba(31, 102, 178, 0.16), transparent 34%),
        linear-gradient(165deg, #edf2f9 0%, #f9fbff 52%, #edf3fb 100%);
    overflow-x: hidden;
}

html.login-page-root,
body.crm-body.login-page {
    background: #eef1f4;
}

.login-page .bg-orb {
    display: none;
}

html:has(body.error-page) {
    background: #0b203a;
}

body.crm-body.error-page {
    background: linear-gradient(90deg, rgba(5, 23, 48, .72), rgba(8, 30, 59, .28)),
        #0b203a url("../img/van.483566eb18c2.jpg") center / cover no-repeat;
    background-attachment: fixed;
}

.error-page::before { display: none; }

@media (max-width: 640px) {
    body.crm-body.error-page {
        background-position: 65% center;
        background-attachment: scroll;
    }
}

.error-page-shell {
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    padding: calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
    place-items: center;
}

.error-card {
    width: min(100%, 520px);
    padding: 32px;
    border: 1px solid #d8e2ea;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(24, 54, 76, 0.09);
    text-align: center;
}

.error-card > img {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.error-code {
    display: block;
    margin-top: 18px;
    color: #537088;
    font-family: "Rajdhani", sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.error-card h1 {
    margin: 4px 0 8px;
    color: #173f63;
    font-family: "Rajdhani", sans-serif;
    font-size: clamp(1.8rem, 6vw, 2.4rem);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.error-card p {
    max-width: 420px;
    margin: 0 auto;
    color: #58738a;
    line-height: 1.6;
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}

.error-actions .button {
    min-width: 130px;
}

.error-actions form {
    margin: 0;
}

@media (max-width: 480px) {
    .error-card {
        padding: 26px 20px;
    }

    .error-actions {
        display: grid;
    }

    .error-actions .button {
        width: 100%;
    }

    .error-actions form {
        width: 100%;
    }
}

@media (max-width: 800px) {
    html.password-change-page-root,
    body.crm-body.password-change-page {
        background: #eef1f4;
    }

    .password-change-page .bg-orb {
        display: none;
    }
}

.password-change-card {
    margin-top: 20px;
}

.bg-orb {
    position: fixed;
    border-radius: 999px;
    filter: blur(40px);
    pointer-events: none;
    z-index: -1;
}

.orb-one {
    width: 320px;
    height: 320px;
    top: -120px;
    right: -80px;
    background: rgba(213, 40, 53, 0.22);
}

.orb-two {
    width: 280px;
    height: 280px;
    left: -80px;
    bottom: -110px;
    background: rgba(31, 102, 178, 0.2);
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 28px;
    background: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(27, 39, 52, 0.08);
    backdrop-filter: blur(8px);
}

.header-user-account {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.header-user-account > span {
    max-width: 160px;
    overflow: hidden;
    color: #526d83;
    font-size: 0.82rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--ink-950);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.brand span {
    font-family: "Rajdhani", sans-serif;
    text-transform: uppercase;
    font-size: 1.1rem;
}

.brand-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.auth-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.top-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.desktop-menu-toggle {
    display: none;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #cbd9e5;
    border-radius: 8px;
    background: #fff;
    color: #25496a;
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.desktop-menu-toggle:hover,
.desktop-menu-toggle:focus-visible {
    border-color: #9fb8cd;
    background: #e7f0f8;
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 0 14px;
    color: #36536c;
    font-family: "Rajdhani", sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    border: 0;
    background: transparent;
}

.nav-dropdown-trigger::after {
    content: "▾";
    font-size: 0.72rem;
    transition: transform 0.15s ease;
}

.nav-dropdown:hover .nav-dropdown-trigger::after,
.nav-dropdown:focus-within .nav-dropdown-trigger::after {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    z-index: 30;
    display: none;
    min-width: 190px;
    padding: 6px;
    border: 1px solid #d8e3ec;
    border-radius: 0 0 10px 10px;
    background: #fff;
    box-shadow: 0 14px 28px rgba(20, 48, 70, 0.14);
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    display: grid;
}

.desktop-crm-body .top-nav .nav-dropdown-menu a {
    min-height: 40px;
    padding: 8px 12px;
    border: 0;
    border-radius: 7px;
    white-space: nowrap;
}

.desktop-crm-body .top-nav .nav-dropdown-menu a + a {
    border-left: 0;
}

.nav-dropdown-divider {
    height: 1px;
    margin: 5px 7px;
    background: #d8e3ec;
}

.nav-dropdown-section-label {
    padding: 5px 12px 2px;
    color: #60788d;
    font-family: "Rajdhani", sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.top-nav a {
    font-family: "Rajdhani", sans-serif;
    text-decoration: none;
    color: var(--ink-700);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 9px 13px;
    border-radius: 999px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.top-nav a:hover {
    background: rgba(31, 102, 178, 0.13);
    transform: translateY(-1px);
}

.app-shell {
    max-width: 1200px;
    margin: 28px auto 40px;
    padding: 0 18px 72px;
}

.mobile-crm-body {
    position: relative;
    isolation: isolate;
    background: #f8fbff;
}

.mobile-crm-body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 10% 5%, rgba(213, 40, 53, 0.14), transparent 34%),
        radial-gradient(circle at 95% 15%, rgba(31, 102, 178, 0.13), transparent 30%),
        linear-gradient(165deg, #eff4fa 0%, #f8fbff 100%);
    z-index: -2;
    pointer-events: none;
}

.mobile-crm-body .bg-orb {
    display: none;
}

.mobile-shell {
    overflow-anchor: none;
    max-width: 760px;
    margin: 0 auto;
    padding: calc(16px + env(safe-area-inset-top)) 12px calc(56px + env(safe-area-inset-bottom));
}

.mobile-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.mobile-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

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

.mobile-brand h1 {
    margin-top: 2px;
}

.mobile-kicker {
    margin: 0 0 6px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-600);
}

.mobile-topbar h1,
.mobile-panel-head h2 {
    margin: 0;
    font-family: "Rajdhani", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-950);
}

.mobile-topbar h1 {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    line-height: 1;
}

.mobile-panel {
    padding: 14px;
}

.mobile-panel + .mobile-panel {
    margin-top: 16px;
}

.mobile-search-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--ink-700);
}

.mobile-search-row {
    display: flex;
    gap: 10px;
}

.mobile-search-row input {
    flex: 1;
}

.mobile-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.mobile-panel-head-tight {
    align-items: flex-start;
}

.mobile-panel-head h2 {
    font-size: 1rem;
}

.mobile-panel-head span,
.mobile-result-ref {
    font-size: 0.86rem;
    color: #4a657e;
}

.mobile-result-list,
.mobile-record-list {
    display: grid;
    gap: 12px;
}

.mobile-menu-grid {
    display: grid;
    gap: 12px;
}

.mobile-menu-card {
    display: grid;
    gap: 6px;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(242, 247, 252, 0.92));
    border: 1px solid rgba(27, 39, 52, 0.08);
    box-shadow: 0 14px 28px rgba(17, 39, 59, 0.08);
    color: inherit;
    text-decoration: none;
}

.mobile-menu-button {
    width: 100%;
    border: 0;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.mobile-menu-card strong {
    font-size: 1.02rem;
}

.mobile-menu-card span {
    color: #56718a;
    line-height: 1.45;
}

.mobile-result {
    color: inherit;
    text-decoration: none;
}

.mobile-customer-card {
    border: 1px solid #d9e6f2;
    border-radius: var(--radius-sm);
    background: #fbfdff;
    padding: 14px;
    color: inherit;
    text-decoration: none;
}

.mobile-customer-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.mobile-customer-card-head h4 {
    margin: 0;
    font-family: "Rajdhani", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1rem;
}

.mobile-customer-ref {
    font-size: 0.82rem;
    color: #4e6b85;
    font-weight: 600;
}

.mobile-customer-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
}

.mobile-customer-meta-grid p {
    margin: 0;
    display: grid;
    gap: 4px;
}

.mobile-customer-card:hover,
.mobile-customer-card:focus-visible {
    border-color: rgba(31, 102, 178, 0.3);
    transform: translateY(-1px);
}

@media (max-width: 640px) {
    .mobile-customer-meta-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 801px) and (max-width: 1050px) {
    .desktop-crm-body .detail-grid,
    .desktop-crm-body .customer-summary-content {
        grid-template-columns: 1fr;
    }

    .desktop-crm-body .customer-address {
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid #e3eaf0;
    }

}

@media (min-width: 801px) {
    .desktop-crm-body .empty-record-state {
        margin: 0;
        padding: 20px 18px;
        border-bottom: 0;
        color: #60778a;
        line-height: 1.45;
    }

    .desktop-crm-body .dashboard-kpis .kpi-card {
        padding: 18px 20px;
    }

    .desktop-crm-body .dashboard-panels .panel > header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 54px;
        padding: 14px 18px;
        border-bottom: 1px solid #cbd7e0;
        background: #e3eaf0;
        box-shadow: none;
    }

    .desktop-crm-body .dashboard-panels .panel > header h3 {
        margin: 0;
        color: #173f63;
    }

    .desktop-crm-body .dashboard-kpis .kpi-card > p a {
        color: inherit;
        text-decoration: none;
    }

    .desktop-crm-body .dashboard-panels .service-list li {
        padding: 13px 18px;
    }

    .desktop-crm-body .classification-overview-panel {
        gap: 16px;
        padding: 13px 16px;
    }

    .desktop-crm-body .classification-overview-panel .panel-head {
        min-height: 0;
        padding: 3px 16px 3px 2px;
        border-right: 1px solid #dbe5ec;
        border-bottom: 0;
        background: transparent;
        box-shadow: none;
    }

    .desktop-crm-body .classification-overview-grid {
        gap: 8px;
    }

    .desktop-crm-body .classification-overview-item {
        padding: 7px 10px;
    }
}

.mobile-empty {
    margin: 0;
    color: #45607a;
}

.mobile-back-link {
    display: inline-flex;
    margin: 0 0 14px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(27, 39, 52, 0.08);
    color: var(--ink-700);
    text-decoration: none;
    font-size: 0.92rem;
}

.mobile-back-link:hover,
.mobile-back-link:focus-visible {
    background: rgba(31, 102, 178, 0.1);
}

.mobile-eyebrow {
    margin: 0 0 4px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-600);
}

.mobile-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.5rem;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(31, 102, 178, 0.12);
    color: var(--accent-700);
    font-weight: 700;
    letter-spacing: 0.03em;
}

.mobile-customer-card {
    border: 1px solid #d9e6f2;
    border-radius: var(--radius-sm);
    background: #fbfdff;
    padding: 14px;
}

.mobile-customer-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.mobile-customer-card-head h4,
.mobile-customer-card-head strong {
    margin: 0;
    font-family: "Rajdhani", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1rem;
}

.mobile-customer-ref {
    font-size: 0.82rem;
    color: #4e6b85;
    font-weight: 600;
}

.mobile-customer-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
}

.mobile-customer-meta-grid p {
    margin: 0;
    display: grid;
    gap: 4px;
}

.mobile-customer-meta-grid .field-label {
    font-size: 0.77rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #5c748a;
}

.mobile-customer-meta-grid p,
.mobile-customer-meta-grid .mobile-customer-meta-wide {
    color: var(--ink-800);
    line-height: 1.5;
    word-break: break-word;
}

.mobile-customer-meta-grid-single {
    grid-template-columns: 1fr;
}

.mobile-customer-meta-wide {
    grid-column: 1 / -1;
}

.mobile-pagination {
    margin-top: 12px;
}

/* Read-only field app */
.mobile-crm-body {
    --mobile-nav-height: 76px;
    background: #f2f5f8;
}

.has-mobile-bottom-nav .mobile-shell {
    height: 100%;
    padding-bottom: calc(var(--mobile-nav-height) + 28px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

.mobile-crm-body.has-mobile-bottom-nav {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.mobile-section-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.mobile-section-actions .button {
    min-height: 34px;
    padding: 6px 11px;
}

.mobile-record-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.mobile-record-modal {
    position: fixed;
    inset: auto 0 0;
    width: min(100%, 760px);
    max-width: 100%;
    max-height: calc(100dvh - env(safe-area-inset-top) - 8px);
    margin: auto auto 0;
    border-radius: 18px 18px 0 0;
    overflow: auto;
}

.mobile-record-modal[open] {
    animation: mobile-drawer-enter 180ms ease-out;
}

.mobile-record-modal::backdrop {
    animation: mobile-drawer-backdrop 180ms ease-out;
}

.mobile-record-modal .modal-form {
    width: 100%;
    min-width: 0;
    border-radius: 18px 18px 0 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
}

.mobile-record-modal .editor-grid {
    grid-template-columns: 1fr;
    min-width: 0;
}

.mobile-record-modal .editor-field {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.mobile-record-modal .modal-head {
    position: sticky;
    top: -18px;
    z-index: 2;
    margin: -18px -18px 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid rgba(29, 58, 82, 0.1);
    background: #fff;
}

.mobile-record-modal input[type="date"] {
    display: block;
    box-sizing: border-box;
    height: 46px;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px;
    max-width: 100% !important;
    inline-size: 100%;
    block-size: 46px;
    min-inline-size: 0;
    max-inline-size: 100%;
    padding: 12px 14px;
    line-height: 20px;
    -webkit-appearance: none;
    appearance: none;
}

.mobile-record-modal input[type="date"]::-webkit-date-and-time-value {
    min-width: 0;
    text-align: left;
}

.mobile-record-modal .modal-actions .button {
    width: 100%;
}

@keyframes mobile-drawer-enter {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes mobile-drawer-backdrop {
    from { background: rgba(15, 24, 39, 0); }
    to { background: rgba(15, 24, 39, 0.48); }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-record-modal[open],
    .mobile-record-modal::backdrop {
        animation: none;
    }
}

.mobile-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    flex-wrap: wrap;
    margin: calc(-16px - env(safe-area-inset-top)) -12px 14px;
    padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
    border-bottom: 1px solid rgba(29, 58, 82, 0.1);
    background: rgba(248, 251, 255, 0.92);
    backdrop-filter: blur(18px);
}

.mobile-brand-logo {
    width: 36px;
    height: 36px;
}

.mobile-kicker {
    margin-bottom: 3px;
    font-size: 0.66rem;
}

.mobile-topbar h1 {
    max-width: min(68vw, 520px);
    overflow: hidden;
    font-size: 1.35rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-logout-form {
    flex: 0 0 auto;
    margin: 0 18px 0 auto;
}

.mobile-user-account {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-left: auto;
}

.mobile-install-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    min-height: 40px;
    margin: 8px 0 20px;
    padding: 0 10px;
    justify-content: center;
    border: 1px solid rgba(15, 63, 120, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    color: #0f3f78;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.mobile-install-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.mobile-install-button:hover,
.mobile-install-button:focus-visible {
    background: rgba(15, 63, 120, 0.09);
}

.mobile-signed-in-user {
    flex: 0 0 100%;
    margin-top: -7px;
    padding-left: 48px;
    color: #58738a;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
    text-align: left;
}

.mobile-header-icon {
    display: grid;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(187, 26, 40, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--brand-600);
    cursor: pointer;
}

.mobile-header-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.mobile-header-icon:hover,
.mobile-header-icon:focus-visible {
    background: rgba(213, 40, 53, 0.09);
    color: var(--brand-700);
}

.mobile-customer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.mobile-customer-toolbar .mobile-back-link {
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 7px 10px;
    background: #fff;
}

.mobile-customer-toolbar svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.mobile-record-identity {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    color: #61778a;
    font-size: 0.72rem;
}

.mobile-record-identity strong {
    color: var(--ink-900);
    font-size: 0.82rem;
}

.mobile-tab-page[hidden] {
    display: none;
}

.mobile-tab-page.is-active {
    animation: mobile-page-in 180ms ease-out both;
}

@keyframes mobile-page-in {
    from { opacity: 0; transform: translateX(8px); }
    to { opacity: 1; transform: translateX(0); }
}

.mobile-page-heading {
    position: relative;
    margin: 0 2px 16px;
}

.mobile-page-heading h2 {
    margin: 0;
    color: var(--ink-950);
    font-family: "Rajdhani", sans-serif;
    font-size: clamp(1.65rem, 7vw, 2.2rem);
    line-height: 1.05;
}

.mobile-page-heading > span {
    display: block;
    margin-top: 4px;
    color: #60778c;
    font-size: 0.82rem;
}

.mobile-app-card {
    padding: 15px;
    border: 1px solid rgba(37, 71, 99, 0.1);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(30, 57, 80, 0.07);
}

.mobile-app-card + .mobile-app-card {
    margin-top: 12px;
}

.mobile-app-card h3,
.mobile-app-card p {
    margin: 0;
}

.mobile-app-card h3 {
    color: var(--ink-950);
    font-size: 1rem;
}

.mobile-app-card-title,
.mobile-equipment-title {
    display: flex;
    align-items: center;
    gap: 11px;
}

.mobile-app-card-title > div,
.mobile-equipment-title > div {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.mobile-app-card-title span,
.mobile-equipment-title span {
    color: #657d91;
    font-size: 0.75rem;
}

.mobile-card-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 12px;
    background: #eaf3fb;
    color: var(--accent-700);
}

.mobile-card-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.mobile-site-card {
    background: linear-gradient(145deg, #fff, #f5f9fd);
}

.mobile-site-address {
    margin: 14px 0 0 49px;
    color: #29465f;
    font-style: normal;
    line-height: 1.55;
}

.mobile-summary-counts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid #e3eaf0;
    background: #fff;
}

.mobile-summary-counts > div {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    padding: 9px 4px;
    border-right: 1px solid #e3eaf0;
}

.mobile-summary-counts > div:last-child {
    border-right: 0;
}

.mobile-summary-counts strong {
    color: var(--accent-700);
    font-size: 0.9rem;
}

.mobile-summary-counts span {
    overflow: hidden;
    color: #61798d;
    font-size: 0.67rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0;
}

.mobile-summary-notes {
    margin-top: 16px;
}

.mobile-section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 3px 8px;
}

.mobile-section-label h3 {
    margin: 0;
    color: var(--ink-900);
    font-family: "Rajdhani", sans-serif;
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mobile-section-label span {
    display: grid;
    min-width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 999px;
    background: #eaf3fb;
    color: var(--accent-700);
    font-size: 0.72rem;
    font-weight: 700;
}

.mobile-summary-notes .mobile-note-card + .mobile-note-card {
    margin-top: 8px;
}

.mobile-empty-state-compact {
    margin: 12px 0 16px;
    font-size: 0.82rem;
}

.mobile-summary-grid .mobile-app-card {
    margin: 0;
}

.mobile-summary-stat {
    display: grid;
    align-items: center;
    justify-items: center;
    gap: 8px;
    padding: 12px 14px;
    text-align: center;
}

.mobile-summary-stat span {
    color: #61798d;
    font-size: 0.76rem;
}

.mobile-summary-stat strong {
    color: var(--accent-700);
    font-size: 1.2rem;
}

.mobile-app-list,
.mobile-timeline {
    display: grid;
    gap: 12px;
}

.mobile-app-list .mobile-app-card,
.mobile-timeline .mobile-app-card {
    margin: 0;
}

.mobile-contact-card > header,
.mobile-contact-card > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.mobile-contact-card > summary {
    cursor: pointer;
    list-style: none;
}

.mobile-contact-card > summary::-webkit-details-marker {
    display: none;
}

.mobile-contact-card > header span,
.mobile-contact-card > summary span {
    color: #61798d;
    font-size: 0.78rem;
}

.mobile-contact-chevron {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    fill: none;
    stroke: var(--accent-700);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    transition: transform 160ms ease;
}

.mobile-contact-toggle {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    color: var(--accent-700) !important;
    font-size: 0.72rem !important;
    font-weight: 600;
    text-align: right;
}

.mobile-contact-hide {
    display: none;
}

.mobile-contact-card[open] .mobile-contact-show {
    display: none;
}

.mobile-contact-card[open] .mobile-contact-hide {
    display: inline;
}

.mobile-contact-card[open] .mobile-contact-chevron {
    transform: rotate(180deg);
}

.mobile-contact-card:not([open]) > summary {
    margin-bottom: 0;
}

.mobile-contact-actions {
    display: grid;
    gap: 8px;
}

.mobile-contact-actions a,
.mobile-contact-actions .mobile-contact-detail {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 52px;
    padding: 8px 11px;
    border-radius: 14px;
    background: #f2f7fb;
    color: var(--ink-900);
    text-decoration: none;
}

.mobile-contact-actions svg {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    fill: none;
    stroke: var(--accent-700);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.mobile-contact-actions span {
    display: grid;
    min-width: 0;
    color: #647b8f;
    font-size: 0.7rem;
}

.mobile-contact-actions strong {
    overflow-wrap: anywhere;
    color: var(--ink-900);
    font-size: 0.88rem;
}

.mobile-detail-list {
    display: grid;
    gap: 0;
    margin: 0;
}

.mobile-detail-list > div {
    display: grid;
    grid-template-columns: minmax(92px, 0.7fr) minmax(0, 1.3fr);
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #e8eef4;
}

.mobile-detail-list > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.mobile-detail-list dt {
    color: #667e92;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.mobile-detail-list dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--ink-900);
    font-size: 0.88rem;
    text-align: right;
}

.mobile-contact-extra {
    margin-top: 10px;
}

.mobile-equipment-title {
    margin-bottom: 10px;
}

.mobile-history-card {
    position: relative;
    margin-left: 12px !important;
}

.mobile-history-card::before {
    content: "";
    position: absolute;
    top: 20px;
    left: -19px;
    width: 10px;
    height: 10px;
    border: 3px solid #dcecf8;
    border-radius: 50%;
    background: var(--accent-600);
}

.mobile-history-card header {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 7px;
    margin-bottom: 8px;
}

.mobile-history-card header span {
    color: #647b8f;
    font-size: 0.78rem;
}

.mobile-history-card p,
.mobile-note-card p {
    color: #29465f;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.mobile-history-engineer {
    color: #365b78 !important;
    font-family: "Rajdhani", sans-serif;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.mobile-history-engineer::before {
    content: "·";
    margin-right: 7px;
    color: #8ba0b1;
}

.mobile-history-card .mobile-history-work {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
}

.mobile-history-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 20px;
    margin: 10px 0 0;
    padding-top: 9px;
    border-top: 1px solid #e8eef4;
}

.mobile-history-meta > div {
    display: flex;
    gap: 6px;
    min-width: 0;
}

.mobile-history-meta dt {
    color: #698095;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mobile-history-meta dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: #36536c;
    font-size: 0.78rem;
    font-weight: 600;
}

.mobile-empty-state {
    margin: 24px 0;
    color: #60788d;
    text-align: center;
}

.mobile-bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    display: flex;
    align-items: stretch;
    justify-content: center;
    height: var(--mobile-nav-height);
    padding: 7px max(8px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    border-top: 1px solid rgba(31, 57, 79, 0.12);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -10px 30px rgba(27, 52, 74, 0.09);
    backdrop-filter: blur(20px);
}

.mobile-bottom-nav a,
.mobile-bottom-nav button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    flex-direction: column;
    gap: 3px;
    max-width: 145px;
    min-width: 0;
    padding: 4px 2px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--accent-500);
    cursor: pointer;
    font: inherit;
    text-decoration: none;
}

.mobile-bottom-nav svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.mobile-bottom-nav span {
    overflow: hidden;
    max-width: 100%;
    font-size: clamp(0.56rem, 2.5vw, 0.68rem);
    font-weight: 700;
    text-overflow: ellipsis;
}

.mobile-bottom-nav .is-active {
    background: rgba(31, 102, 178, 0.1);
    color: var(--accent-700);
}

.mobile-pagination-nav > a,
.mobile-pagination-nav > .mobile-pagination-control {
    max-width: 180px;
    gap: 1px;
    padding-top: 1px;
    padding-bottom: 1px;
}

.mobile-pagination-control {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 4px 2px;
    border-radius: 12px;
    color: var(--accent-500);
}

.mobile-pagination-control svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.mobile-pagination-control.is-disabled {
    opacity: 0.32;
}

.mobile-pagination-current {
    background: rgba(31, 102, 178, 0.1);
    color: var(--accent-700);
}

.mobile-pagination-current strong {
    font-size: 0.74rem;
    line-height: 1.1;
    white-space: nowrap;
}

.mobile-pagination-current > span {
    font-size: 0.57rem;
    line-height: 1.1;
}

@media (display-mode: standalone), (display-mode: fullscreen) {
    .mobile-crm-body {
        --mobile-nav-height: 62px;
    }

    .mobile-shell {
        padding-top: 0;
    }

    .mobile-topbar {
        margin-top: 0;
        padding-top: calc(10px + env(safe-area-inset-top));
    }

    .mobile-tab-page {
        scroll-margin-top: calc(64px + env(safe-area-inset-top));
    }

    .has-mobile-bottom-nav .mobile-shell {
        padding-bottom: calc(var(--mobile-nav-height) + 12px + min(16px, env(safe-area-inset-bottom)));
    }

    .mobile-bottom-nav {
        min-height: var(--mobile-nav-height);
        padding-top: 3px;
        padding-bottom: max(3px, min(16px, env(safe-area-inset-bottom)));
    }

    .mobile-bottom-nav a,
    .mobile-bottom-nav button {
        gap: 1px;
        padding-top: 2px;
        padding-bottom: 2px;
    }

    .mobile-bottom-nav svg {
        width: 21px;
        height: 21px;
    }
}

html.is-android .mobile-crm-body {
    --android-gesture-gutter: max(18px, env(safe-area-inset-bottom));
    --mobile-nav-height: calc(64px + var(--android-gesture-gutter));
}

html.is-android .mobile-bottom-nav {
    height: var(--mobile-nav-height);
    min-height: 0;
    padding-bottom: var(--android-gesture-gutter);
    background: #fff;
    backdrop-filter: none;
    transform: translateZ(0);
    pointer-events: none;
}

html.is-android .mobile-bottom-nav a,
html.is-android .mobile-bottom-nav button {
    pointer-events: auto;
    touch-action: manipulation;
}

.mobile-crm-body.mobile-pagination-page {
    --mobile-nav-height: 56px;
}

.mobile-pagination-page .mobile-shell {
    padding-bottom: calc(var(--mobile-nav-height) + 52px + env(safe-area-inset-bottom));
}

.mobile-pagination-page .mobile-bottom-nav {
    padding-top: 3px;
    padding-bottom: max(3px, min(16px, env(safe-area-inset-bottom)));
}

.mobile-pagination-page .mobile-pagination-nav svg {
    width: 18px;
    height: 18px;
}

html.is-android .mobile-crm-body.mobile-pagination-page {
    --mobile-nav-height: calc(48px + var(--android-gesture-gutter));
}

html.is-android .mobile-pagination-page .mobile-bottom-nav {
    padding-bottom: var(--android-gesture-gutter);
}

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

.mobile-search-hero {
    padding: 8px 2px 22px;
}

.mobile-search-hero h2 {
    margin: 0;
    color: var(--ink-950);
    font-family: "Rajdhani", sans-serif;
    font-size: clamp(1.8rem, 8vw, 2.5rem);
    line-height: 1.05;
}

.mobile-search-hero > p:not(.mobile-eyebrow) {
    margin: 7px 0 18px;
    color: #5d7589;
    font-size: 0.9rem;
}

.mobile-search-form label {
    margin: 0;
}

.mobile-search-row {
    position: relative;
    align-items: center;
    gap: 0;
    padding: 5px;
    border: 1px solid rgba(35, 69, 96, 0.13);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(31, 59, 82, 0.1);
}

.mobile-search-icon {
    display: grid;
    width: 38px;
    flex: 0 0 38px;
    place-items: center;
    color: #6b8193;
}

.mobile-search-icon svg,
.mobile-result-chevron {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.mobile-search-row input {
    min-width: 0;
    padding: 11px 6px;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 16px;
}

.mobile-search-row input:focus {
    outline: 0;
}

.mobile-search-row .mobile-search-clear {
    display: grid;
    width: 34px;
    min-height: 34px;
    flex: 0 0 34px;
    padding: 0;
    place-items: center;
    border-radius: 50%;
    background: transparent;
    color: #718596;
}

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

.mobile-search-row .mobile-search-clear:hover,
.mobile-search-row .mobile-search-clear:focus-visible {
    background: #e8eff5;
    color: var(--accent-700);
}

.mobile-search-clear svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.8;
}

.mobile-search-row button {
    min-height: 42px;
    padding: 0 14px;
    border: 0;
    border-radius: 13px;
    background: var(--accent-700);
    color: #fff;
    cursor: pointer;
    font-weight: 700;
}

.mobile-results-section {
    padding-bottom: 10px;
}

.mobile-result-list {
    gap: 10px;
}

.mobile-result-list .mobile-customer-card {
    padding: 15px;
    border: 1px solid rgba(35, 69, 96, 0.1);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(31, 59, 82, 0.06);
}

.mobile-result-list .mobile-customer-card-head {
    margin-bottom: 8px;
}

.mobile-result-list .mobile-customer-card-head > div {
    display: grid;
    gap: 2px;
}

.mobile-result-list .mobile-customer-card-head > .mobile-customer-identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    width: 100%;
}

.mobile-result-list .mobile-customer-ref {
    color: #263f55;
    font-family: "Rajdhani", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.035em;
}

.mobile-customer-inline-address {
    min-width: 0;
    overflow: hidden;
    color: #334b60;
    font-size: 0.92rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-customer-card-details {
    display: grid;
    gap: 7px;
}

.mobile-customer-memo {
    margin: 0;
}

.mobile-customer-identifiers {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    color: #60768a;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.015em;
    align-items: center;
}

.mobile-crm-body .mobile-customer-identifiers .customer-source-badge {
    width: 54px;
    min-width: 54px;
    min-height: 19px;
    padding: 2px 5px;
    font-size: 0.61rem;
}

.mobile-customer-memo {
    color: #5e7182;
    font-size: 0.86rem;
    font-style: italic;
    line-height: 1.35;
}

.mobile-result-list .mobile-customer-card-head h4 {
    font-size: 1.08rem;
    text-transform: none;
}

.mobile-result-chevron {
    flex: 0 0 auto;
    color: #8295a5;
}

/* Flat mobile record layout */
.mobile-crm-body,
.mobile-crm-body::before {
    background: #f8fafc;
}

.mobile-tab-stage {
    margin: 0 -12px;
}

.mobile-page-heading {
    margin: 0;
    padding: 8px 18px 18px;
}

.mobile-app-card {
    padding: 15px 18px;
    border: 0;
    border-bottom: 1px solid #e3eaf0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.mobile-app-card + .mobile-app-card,
.mobile-app-list .mobile-app-card,
.mobile-timeline .mobile-app-card {
    margin-top: 0;
}

.mobile-site-card {
    border-top: 1px solid #e3eaf0;
    background: #fff;
}

.mobile-card-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 50%;
    background: #eaf2f8;
}

.mobile-site-address {
    margin-left: 45px;
}

.mobile-site-meta {
    margin: 17px 0 0 45px;
    padding-top: 13px;
    border-top: 1px solid #e1e9ef;
}

.mobile-site-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 34px;
}

.mobile-site-meta-item {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.mobile-site-meta-item span,
.mobile-site-memo > span {
    color: #698095;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mobile-site-meta-item strong,
.mobile-site-meta-item a,
.mobile-site-memo > div {
    color: #294359;
    font-size: 0.93rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.mobile-site-meta a {
    color: #0b677e;
    text-decoration: none;
}

.mobile-site-memo {
    display: grid;
    gap: 2px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid #e1e9ef;
}

.mobile-summary-notes {
    margin-top: 14px;
    border-top: 1px solid #e3eaf0;
    background: #fff;
}

.mobile-section-label {
    margin: 0;
    padding: 11px 18px 8px;
    background: #f1f5f8;
}

.mobile-summary-notes .mobile-note-card + .mobile-note-card {
    margin-top: 0;
}

.mobile-summary-grid {
    gap: 0;
    margin: 22px 0 0;
    border-top: 1px solid #e3eaf0;
    border-bottom: 1px solid #e3eaf0;
    background: #fff;
}

.mobile-summary-grid .mobile-app-card {
    padding: 13px 6px;
    border-right: 1px solid #e3eaf0;
    border-bottom: 0;
    background: transparent;
}

.mobile-summary-grid .mobile-app-card:last-child {
    border-right: 0;
}

.mobile-summary-grid + .mobile-app-card {
    margin-top: 22px;
    border-top: 1px solid #e3eaf0;
}

.mobile-app-list,
.mobile-timeline {
    gap: 0;
    border-top: 1px solid #e3eaf0;
    background: #fff;
}

.mobile-contact-card > header,
.mobile-contact-card > summary {
    margin-bottom: 10px;
}

.mobile-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mobile-contact-actions a,
.mobile-contact-actions .mobile-contact-detail {
    flex: 1 1 145px;
    min-height: 46px;
    padding: 6px 8px;
    border: 1px solid #dbe6ee;
    border-radius: 10px;
    background: transparent;
}

.mobile-equipment-title .mobile-card-icon {
    background: transparent;
}

.mobile-history-card {
    margin-left: 0 !important;
    padding-left: 38px;
}

.mobile-history-card::before {
    top: 20px;
    left: 17px;
    width: 7px;
    height: 7px;
    border-width: 2px;
}

.mobile-empty-state {
    margin: 0;
    padding: 24px 18px;
    border-top: 1px solid #e3eaf0;
    border-bottom: 1px solid #e3eaf0;
    background: #fff;
}

.mobile-search-hero {
    padding-right: 6px;
    padding-left: 6px;
}

.mobile-search-row {
    border: 1px solid #d7e1e9;
    border-radius: 12px;
    box-shadow: none;
}

.mobile-results-section {
    margin: 0 -12px;
}

.mobile-results-section .mobile-panel-head {
    margin: 0;
    padding: 10px 18px;
    border-top: 1px solid #e3eaf0;
    border-bottom: 1px solid #e3eaf0;
    background: #f1f5f8;
}

.mobile-result-list {
    gap: 0;
    background: #fff;
}

.mobile-result-list .mobile-empty {
    padding: 24px 18px;
    border-top: 1px solid #e3eaf0;
    border-bottom: 1px solid #e3eaf0;
    background: #fff;
}

.mobile-result-list .mobile-customer-card {
    padding: 12px 18px;
    border: 0;
    border-bottom: 1px solid #e3eaf0;
    border-radius: 0;
    box-shadow: none;
}

.mobile-result-list .mobile-customer-card:hover,
.mobile-result-list .mobile-customer-card:focus-visible {
    border-color: #e3eaf0;
    background: #f4f8fb;
    transform: none;
}

.mobile-login-screen {
    width: min(420px, 100%);
    margin: clamp(28px, 10vh, 90px) auto 0;
}

.mobile-login-screen > header {
    margin-bottom: 24px;
}

.mobile-login-screen h2 {
    margin: 0;
    color: var(--ink-950);
    font-family: "Rajdhani", sans-serif;
    font-size: clamp(2rem, 9vw, 2.7rem);
    line-height: 1;
}

.mobile-login-screen > header > p:last-child {
    margin: 8px 0 0;
    color: #5d7589;
    line-height: 1.5;
}

.mobile-login-form {
    display: grid;
    gap: 8px;
}

.mobile-login-form label {
    margin-top: 8px;
    color: #526a7f;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mobile-login-form input {
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    border: 1px solid #d3dfe8;
    border-radius: 12px;
    background: #fff;
    font-size: 16px;
}

.mobile-login-form input:focus {
    border-color: var(--accent-500);
    outline: 3px solid rgba(31, 102, 178, 0.12);
}

.mobile-login-form button {
    min-height: 52px;
    margin-top: 16px;
    border: 0;
    border-radius: 12px;
    background: var(--brand-600);
    color: #fff;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 700;
}

.mobile-login-form button:hover,
.mobile-login-form button:focus-visible {
    background: var(--brand-700);
}

.mobile-login-error {
    margin: 0 0 6px;
    padding: 10px 12px;
    border-left: 3px solid var(--brand-500);
    background: rgba(213, 40, 53, 0.07);
    color: var(--brand-700);
    font-size: 0.84rem;
}

.auth-shell {
    display: grid;
    place-items: center;
    min-height: calc(100vh - 40px);
}

.page-head h1 {
    font-family: "Rajdhani", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    font-size: clamp(2rem, 3vw, 2.8rem);
    margin: 0;
    color: var(--ink-950);
}

.page-head p {
    margin: 8px 0 0;
    color: #365067;
}

.content-stack {
    margin-top: 24px;
}

.content-stack > * + * {
    margin-top: 24px;
}

.customer-summary-content {
    display: grid;
    grid-template-columns: minmax(260px, 1.1fr) minmax(0, 2fr);
    gap: 12px;
}

.customer-summary-panel .panel-head {
    margin-bottom: 10px;
}

.customer-address {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: #294b63;
    font-style: normal;
    line-height: 1.45;
    padding: 12px 14px;
    border: 1px solid #e0e9f1;
    border-radius: 10px;
    background: #f7fafc;
}

.customer-address strong {
    margin-top: 5px;
    color: #18364c;
    letter-spacing: 0.04em;
}

.customer-account-meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

.customer-account-meta-row {
    display: grid;
    grid-template-columns: minmax(100px, 0.7fr) minmax(200px, 1.6fr);
    gap: 12px;
}

.customer-account-field {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #e0e9f1;
    border-radius: 10px;
    background: #f7fafc;
}

.customer-account-meta dt {
    margin-bottom: 5px;
    color: #52728a;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.customer-account-meta dd {
    margin: 0;
    color: #18364c;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.customer-account-meta a {
    color: #0b677e;
    text-decoration: none;
}

.customer-account-meta a:hover {
    text-decoration: underline;
}

.kpi-grid,
.panel-grid,
.detail-grid {
    margin-top: 20px;
    display: grid;
    gap: 16px;
}

.kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-users {
    width: calc((100% - 48px) / 4);
    margin-top: 20px;
    padding: 12px 14px;
}

.desktop-crm-body .dashboard-users tbody tr:hover {
    background: transparent;
}

@media (min-width: 901px) {
    .desktop-ui-variant-v2 .dashboard-users tbody tr:nth-child(even):hover {
        background: #f7fafc;
    }
}

.dashboard-users th {
    padding: 6px 9px;
    font-size: 0.78rem;
    line-height: 1.2;
}

.dashboard-users td {
    padding: 4px 9px;
    font-size: 0.78rem;
    line-height: 1.2;
}

.session-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid;
    border-radius: 50%;
    vertical-align: middle;
}

.session-online {
    border-color: #2d8a5a;
    background: #45c477;
    box-shadow: 0 0 0 3px rgba(69, 196, 119, 0.16);
}

.session-offline {
    border-color: #9baab5;
    background: #c4cdd3;
}

.dashboard-users-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 10px;
    color: #60788d;
    font-size: 0.75rem;
}

.dashboard-users-pagination a {
    color: #0b677e;
    font-weight: 700;
    text-decoration: none;
}

.dashboard-users-pagination a:hover,
.dashboard-users-pagination a:focus-visible {
    text-decoration: underline;
}

@media (max-width: 960px) {
    .dashboard-users {
        width: 100%;
    }
}

.header-customer-search {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 260px;
    max-width: 400px;
    min-width: 160px;
    margin-left: auto;
}

.header-customer-search input {
    min-width: 0;
    width: 100%;
    min-height: 36px;
    padding: 7px 11px;
    border-color: #cedbe5;
    border-radius: 8px;
    background: #f8fafc;
    font-size: 0.82rem;
}

.header-customer-search .button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-height: 36px;
    padding: 7px;
}

.header-search-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

@media (max-width: 960px) {
    body.desktop-crm-body,
    html:has(body.desktop-crm-body) {
        background: #fafbfd;
    }

}

.desktop-crm-body .dashboard-kpis .kpi-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 12px;
    padding: 12px 14px;
}

.dashboard-kpis .kpi-card h2 {
    margin: 0;
    font-size: 1.65rem;
    line-height: 1;
}

.dashboard-kpis .kpi-subtitle {
    display: block;
    margin-top: 1px;
    color: #718596;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.15;
}

.dashboard-kpis .kpi-source-breakdown {
    grid-column: 1 / -1;
    gap: 6px;
    margin-top: 0;
    padding-top: 8px;
}

.dashboard-kpis .kpi-source-breakdown span {
    flex: 0 0 100px;
    width: 100px;
    min-width: 100px;
    gap: 8px;
    padding: 4px 7px;
}

.dashboard-kpis .kpi-source-with-action .kpi-report-button {
    margin-left: auto;
}

.mobile-source-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -4px 0 12px;
}

.mobile-source-filter label {
    margin: 0;
    color: #5d7589;
    font-size: 0.8rem;
    font-weight: 700;
}

.mobile-source-filter select {
    width: 132px;
    min-height: 40px;
    padding-top: 7px;
    padding-bottom: 7px;
}

.mobile-crm-body .customer-source-badge {
    width: 66px;
    min-width: 66px;
    min-height: 22px;
    justify-self: start;
    box-sizing: border-box;
    margin-left: 0;
    padding-right: 6px;
    padding-left: 6px;
    font-size: 0.69rem;
}

.recent-work-address {
    margin-left: 7px;
    color: #60778a;
    font-size: 0.82rem;
}

.dashboard-customer-cell .customer-source-badge {
    margin-right: 7px;
    margin-left: 0;
}

.desktop-crm-body .dashboard-panels .customer-source-badge {
    width: 92px;
    min-width: 92px;
    box-sizing: border-box;
    margin-left: 0;
}

.classification-kpis {
    grid-template-columns: repeat(7, minmax(105px, 145px));
    justify-content: start;
    gap: 10px;
    margin-top: 14px;
}

.classification-kpis .kpi-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    padding: 7px 10px;
    box-shadow: 0 8px 20px rgba(24, 54, 76, 0.07);
}

.classification-kpis .kpi-card p {
    font-size: 0.72rem;
    font-weight: 600;
}

.classification-kpis .kpi-card h2 {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1;
}

.classification-overview-panel {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 11px;
}

.classification-overview-panel .panel-head {
    flex: 0 0 auto;
    gap: 8px;
    margin: 0;
    padding-right: 14px;
    border-right: 1px solid #e0e9f1;
}

.classification-overview-total {
    color: #5b768d;
    font-size: 0.76rem;
    font-weight: 600;
}

.classification-overview-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.classification-overview-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid #e0e9f1;
    border-radius: 999px;
    background: #f8fbfd;
}

.classification-overview-item-head {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    color: #315875;
    font-size: 0.72rem;
    font-weight: 700;
}

.classification-overview-value {
    color: #587286;
    font-weight: 500;
    white-space: nowrap;
}

.classification-overview-value strong {
    color: #18364c;
}

.classification-overview-meter {
    flex: 0 0 48px;
    width: 48px;
    height: 4px;
    margin: 0;
    overflow: hidden;
    border-radius: 999px;
    background: #dce8f1;
}

.classification-overview-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-500), #315f8e);
}

.classification-type-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.classification-type-chip,
.classification-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border: 1px solid #cbdceb;
    border-radius: 999px;
    background: #f3f8fc;
    color: #315875;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.classification-status-pending {
    border-color: #e6cf8c;
    background: #fff8df;
    color: #785b08;
}

.classification-status-classified {
    border-color: #a9cbe5;
    background: #edf6fc;
    color: #285f87;
}

.classification-status-actioned {
    border-color: #91c5aa;
    background: #dff4e8;
    color: #205f3e;
}

.classification-status-error {
    border-color: #efb5ba;
    background: #fff0f1;
    color: #912d37;
}

.classification-status-rejected {
    border-color: #dc8790;
    background: #f9dfe2;
    color: #8f1f2a;
}

.classification-action-source {
    display: inline-flex;
    margin-top: 5px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.classification-action-source-auto {
    background: #e8edf1;
    color: #536675;
}

.classification-action-source-manual {
    background: #e8eef9;
    color: #31588b;
}

.classification-toolbar form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.classification-toolbar select {
    width: auto;
    min-width: 150px;
}

.classification-toolbar input[type="search"] {
    width: 150px;
    min-width: 150px;
}

.classification-table {
    min-width: 1180px;
}

.classification-table td {
    vertical-align: top;
}

.classification-table td:nth-child(5),
.classification-table td:nth-child(6),
.classification-table td:nth-child(7) {
    min-width: 220px;
    white-space: normal;
}

.classification-table th:last-child,
.classification-table td:last-child {
    position: sticky;
    right: 0;
    min-width: 205px;
    background: #fff;
    box-shadow: -8px 0 12px -12px rgba(25, 49, 67, 0.55);
}

.classification-table th:last-child {
    z-index: 3;
    background: #f4f7fa;
}

.classification-table td:last-child {
    z-index: 2;
}

.classification-table small {
    display: block;
    margin-top: 5px;
    color: #637d91;
}

.classification-table .classification-review-reason {
    color: var(--alert);
}

.classification-actions {
    position: relative;
}

.classification-row-actions {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    white-space: nowrap;
}

.classification-legacy-button {
    margin-bottom: 6px;
    white-space: nowrap;
}

.classification-actions > summary {
    list-style: none;
    white-space: nowrap;
}

.classification-actions > summary::-webkit-details-marker {
    display: none;
}

.classification-action-menu {
    position: absolute;
    z-index: 20;
    right: 0;
    width: 190px;
    margin-top: 5px;
    padding: 6px;
    border: 1px solid #cbd9e4;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(25, 49, 67, 0.18);
}

.classification-action-menu.is-floating {
    position: fixed;
    z-index: 1000;
    right: auto;
    margin: 0;
}

.classification-action-menu form,
.classification-action-menu .button-plain {
    width: 100%;
}

.classification-action-menu .button-plain {
    border: 0;
    text-align: left;
}

.desktop-crm-body .classification-reject-button {
    border: 1px solid #d88189;
    background: #fff0f1;
    color: #a1242f;
}

.desktop-crm-body .classification-reject-button:hover,
.desktop-crm-body .classification-reject-button:focus-visible {
    border-color: #b84c57;
    background: #f9dfe2;
    color: #891c26;
}

.desktop-crm-body .classification-undo-button {
    border-color: #e2a34d;
    background: #fff3df;
    color: #8a4d08;
    white-space: nowrap;
}

.desktop-crm-body .classification-undo-button:hover,
.desktop-crm-body .classification-undo-button:focus-visible {
    border-color: #c88124;
    background: #ffe7bf;
    color: #713b03;
}

.classification-original {
    margin: 8px 0 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #edf4f9;
}

.modal-form.classification-edit-form {
    max-height: min(82vh, 760px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0;
}

.classification-edit-form .modal-head {
    position: sticky;
    z-index: 2;
    top: 0;
    margin: 0;
    padding: 14px 18px;
    border-bottom: 1px solid #cfdeea;
    background: #e4eef6;
}

.classification-edit-form > .classification-original,
.classification-edit-form > .classification-contact-editor,
.classification-edit-form > .classification-editor-grid {
    margin-right: 18px;
    margin-left: 18px;
}

.classification-edit-form > .classification-original {
    margin-top: 16px;
}

.classification-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.classification-editor-full {
    grid-column: 1 / -1;
}

.classification-edit-form .editor-field > span {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: #4f6f88;
}

.classification-edit-form input,
.classification-edit-form select,
.classification-edit-form textarea {
    box-sizing: border-box;
    width: 100%;
}

.classification-note-editor {
    margin-bottom: 14px;
}

.classification-original-note-editor {
    margin-top: 18px;
}

.classification-edit-form .modal-actions {
    position: sticky;
    bottom: 0;
    margin-top: 4px;
    padding: 12px 18px;
    border-top: 1px solid #cfdeea;
    background: #fff;
}

.classification-contact-editor {
    margin: 0 0 14px;
    padding: 12px;
    border: 1px solid #cfdeea;
    border-radius: 10px;
}

.classification-contact-editor legend {
    padding: 0 6px;
    color: #355a78;
    font-weight: 700;
}

@media (max-width: 700px) {
    .classification-editor-grid {
        grid-template-columns: 1fr;
    }

    .classification-editor-full {
        grid-column: auto;
    }
}

.message-stack {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}

.app-message {
    padding: 10px 14px;
    border: 1px solid #b9d8c6;
    border-radius: 9px;
    background: #edf8f1;
    color: #205f3e;
}

.app-message-error {
    border-color: #efb5ba;
    background: #fff0f1;
    color: #912d37;
}

.classification-result-stack,
.classification-candidate {
    display: grid;
    gap: 5px;
}

.classification-candidate {
    margin-top: 7px;
    padding: 8px 10px;
    border-left: 3px solid #a9c7dc;
    background: #f7fafc;
}

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

.kpi-card,
.panel,
.auth-card {
    background: var(--white);
    border: 1px solid rgba(27, 39, 52, 0.08);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.kpi-card {
    padding: 18px;
}

.kpi-card p {
    margin: 0;
    color: #406078;
    font-size: 0.9rem;
}

.desktop-crm-body .kpi-card > p {
    font-weight: 700;
}

.kpi-card h2 {
    margin: 8px 0 0;
    font-family: "Rajdhani", sans-serif;
    letter-spacing: 0.02em;
    font-size: 2rem;
}

.kpi-source-breakdown {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e1e8ee;
}

.kpi-source-breakdown span {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-width: 100px;
    gap: 12px;
    padding: 5px 9px;
    border-radius: 7px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.kpi-source-breakdown strong {
    font-size: 0.9rem;
}

.kpi-source-anglo {
    background: #a63d46;
}

.dashboard-kpis .customer-kpi-breakdown {
    flex-wrap: wrap;
}

.dashboard-kpis .customer-kpi-breakdown .kpi-callout-only {
    flex: 0 0 auto;
    width: auto;
    background: #fff3cd;
    color: #704b00;
    border: 1px solid #e0b45a;
    white-space: nowrap;
}

.kpi-source-barlow {
    background: #356f9f;
}

.kpi-report-button.button {
    display: inline-flex;
    width: auto;
    min-width: 0;
    min-height: 30px;
    margin: 0;
    padding: 5px 8px;
    font-size: 0.68rem;
    text-align: center;
    white-space: nowrap;
}

.kpi-source-with-action {
    gap: 6px;
}

.kpi-source-with-action span {
    min-width: 0;
    flex: 1 1 auto;
    gap: 5px;
    padding-inline: 7px;
}

.panel {
    padding: 16px;
}

.panel h3 {
    font-family: "Rajdhani", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 12px;
    font-size: 1.05rem;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.panel-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.service-update-note-help {
    margin: 4px 0 0;
    color: #657886;
    font-size: 0.78rem;
}

.service-update-modal {
    width: min(1080px, calc(100vw - 32px));
}

.service-update-visit-fields {
    display: grid;
    grid-template-columns: minmax(180px, 320px);
    gap: 10px;
    max-width: 320px;
    margin-bottom: 10px;
}

.service-update-visit-fields label > span {
    display: block;
    margin-bottom: 3px;
    color: #657886;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.service-update-visit-fields input {
    min-height: 36px;
    padding: 7px 9px;
}

.service-update-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.service-update-row {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 10px;
    padding: 13px 15px;
    border: 1px solid #dfe7ed;
    border-radius: 8px;
    background: #f8fafc;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.service-update-row.is-included {
    border-color: #a9c9dc;
    background: #f2f8fb;
}

.service-update-row [hidden] {
    display: none !important;
}

.service-update-row input[type="checkbox"] {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 0;
    padding: 0;
}

.service-update-appliance,
.service-update-options,
.service-update-options label {
    display: flex;
    align-items: center;
}

.service-update-appliance {
    gap: 11px;
    min-width: 0;
    color: #294359;
    cursor: pointer;
    padding-bottom: 9px;
    border-bottom: 1px solid #dfe7ed;
}

.service-update-appliance span {
    min-width: 0;
}

.service-update-include-label {
    display: block;
    margin-bottom: 2px;
    color: #738897 !important;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.service-update-appliance strong {
    display: block;
    line-height: 1.2;
}

.service-update-serial {
    display: block;
    margin-top: 3px;
    color: #657886;
    font-size: 0.72rem;
}

.service-update-options {
    justify-content: flex-start;
    gap: 16px;
    min-height: 26px;
    padding: 0;
}

.service-update-options label {
    gap: 5px;
    color: #315c7c;
    font-size: 0.78rem;
    font-weight: 700;
}

.service-update-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 9px;
    min-width: 0;
}

.service-update-fields label {
    min-width: 0;
}

.service-update-action-date { grid-column: 1; grid-row: 1; }
.service-update-next-date { grid-column: 2; grid-row: 1; }
.service-update-gs { grid-column: 1; grid-row: 2; }
.service-update-cost { grid-column: 2; grid-row: 2; }

.service-update-fields label > span {
    display: block;
    margin-bottom: 2px;
    color: #657886;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
}

.service-update-fields input[type="date"],
.service-update-fields input[type="text"],
.service-update-fields textarea {
    width: 100%;
    min-width: 0;
    padding: 6px 8px;
    font-size: 0.78rem;
}

.service-update-fields .service-update-notes {
    grid-column: 1 / -1;
    grid-row: 3;
}

.service-update-fields textarea {
    min-height: 52px;
    resize: vertical;
}

.service-update-row-error {
    margin: 0;
}

@media (max-width: 900px) {
    .service-update-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

.panel-head h3 {
    margin: 0;
}

.panel-title-summary {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.panel-title-summary span {
    color: #60788d;
    font-size: 0.78rem;
}

.directory-toolbar {
    display: flex;
    align-items: end;
    gap: 12px;
    margin-bottom: 12px;
}

.directory-toolbar > .button-add {
    margin-inline-start: auto;
}

.table-wrap {
    overflow-x: auto;
}

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

th,
td {
    text-align: left;
    padding: 11px 10px;
    border-bottom: 1px solid #e5edf5;
    font-size: 0.92rem;
}

th {
    color: #406078;
    font-weight: 600;
}

td a,
.text-link {
    color: #0b677e;
    text-decoration: none;
    font-weight: 600;
}

.customer-ref-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #bfd3e7;
    background: #f3f9ff;
    color: #1d4f82;
    font-family: "Rajdhani", sans-serif;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* Leave room for the sticky header when returning to a report record. */
.customer-ref-link[id^="report-row-"],
.customer-ref-link[id^="directory-row-"] {
    scroll-margin-top: 96px;
}

.customer-ref-link:hover {
    background: #e8f3ff;
    border-color: #a9c6e2;
    transform: translateY(-1px);
}

.customer-source-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 23px;
    margin-left: 5px;
    padding: 2px 9px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    line-height: 1;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

.search-match-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.search-match-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    border: 1px solid #c7d8e6;
    border-radius: 999px;
    background: #eef6fb;
    color: #315c7c;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.customer-source-anglo {
    border-color: #7f252e;
    background: #a63d46;
    color: #fff;
}

.customer-source-barlow {
    border-color: #244f78;
    background: #356f9f;
    color: #fff;
}

.desktop-crm-body .page-head > .customer-source-badge {
    color: #fff;
    font-size: 0.68rem;
}

.desktop-crm-body .page-head > .customer-source-barlow {
    color: #fff;
}

.search-row {
    margin-top: 0;
    display: flex;
    gap: 10px;
}

.report-date-filter {
    align-items: end;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.report-date-field {
    display: grid;
    gap: 5px;
}

.report-date-field label {
    color: var(--ink-700);
    font-size: 0.8rem;
    font-weight: 700;
}

.report-date-field input {
    width: 180px;
}

@media (min-width: 801px) {
    .desktop-crm-body .search-row.report-date-filter {
        align-items: center;
        gap: 8px 12px;
        padding: 6px 10px;
        margin-bottom: 8px;
    }

    .desktop-crm-body .report-date-field {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .desktop-crm-body .report-date-field label {
        margin: 0;
        white-space: nowrap;
    }

    .desktop-crm-body .report-date-field input {
        width: 155px;
        min-height: 34px;
        padding: 4px 8px;
    }

    .desktop-crm-body .report-date-filter .button,
    .desktop-crm-body .report-sort-toggle button {
        min-height: 34px;
        padding: 4px 10px;
    }

    .desktop-crm-body .report-sort-toggle {
        margin: 0;
    }
}

.report-filter-error {
    flex-basis: 100%;
    margin: 0;
}

.report-sort-toggle {
    display: flex;
    align-items: stretch;
    padding: 0;
    border: 1px solid #bfd0dc;
    border-radius: 9px;
    overflow: hidden;
}

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

.report-sort-toggle button {
    min-height: 42px;
    padding: 7px 11px;
    border: 0;
    border-right: 1px solid #bfd0dc;
    background: #fff;
    color: #365a75;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.report-sort-toggle button:last-child {
    border-right: 0;
}

.report-sort-toggle button.is-active {
    background: #254f72;
    color: #fff;
}

.report-print-header {
    display: none;
}

.report-print-source {
    display: none;
}

.page-head .report-screen-actions {
    margin-left: auto !important;
    align-self: center;
    flex: 0 0 auto;
}

.all-appliances-report-table {
    min-width: 1250px;
    table-layout: fixed;
}

.all-appliances-report-table th,
.all-appliances-report-table td {
    padding: 8px 9px;
    vertical-align: top;
    font-size: 0.8rem;
    line-height: 1.3;
}

.all-appliances-report-table th {
    background: #e7eef4;
    color: #294d69;
    white-space: nowrap;
}

.all-appliances-report-table tbody tr:nth-child(even) {
    background: #f7f9fb;
}

.all-appliances-report-table th:nth-child(1) { width: 70px; }
.all-appliances-report-table th:nth-child(2) { width: 105px; }
.all-appliances-report-table th:nth-child(3) { width: 190px; }
.all-appliances-report-table th:nth-child(4) { width: 120px; }
.all-appliances-report-table th:nth-child(5) { width: 135px; }
.all-appliances-report-table th:nth-child(6) { width: 90px; }
.all-appliances-report-table th:nth-child(7),
.all-appliances-report-table th:nth-child(8),
.all-appliances-report-table th:nth-child(9) { width: 105px; }
.all-appliances-report-table th:nth-child(10) { width: 260px; }

.all-appliances-report-table td:nth-child(7),
.all-appliances-report-table td:nth-child(8),
.all-appliances-report-table td:nth-child(9) {
    white-space: nowrap;
}

.all-appliances-report-table td,
.all-appliances-report-table .appliance-report-memo {
    overflow-wrap: anywhere;
}

.all-appliances-report-table .appliance-reference-cell > div + div {
    margin-top: 3px;
}

.all-appliances-report-table .appliance-identity-cell > div + div {
    margin-top: 3px;
    color: #526d82;
}

.standing-order-match-separator {
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid #dce6ed;
}

.gdpr-retention-summary {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 18px 20px;
    border-bottom: 1px solid #dce6ed;
    background: #f3f7fa;
    color: #526d82;
}

.gdpr-retention-summary-label {
    flex: 0 0 auto;
    color: #234c6e;
    font-family: "Rajdhani", sans-serif;
    font-size: 0.92rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gdpr-retention-summary p {
    margin: 0;
    line-height: 1.45;
}

.gdpr-retention-cutoff {
    color: #234c6e;
    font-weight: 700;
}

@media screen {
    .report-scroll-hint {
        position: sticky;
        bottom: 0;
        z-index: 3;
        margin: 0;
        padding: 8px 16px;
        border-top: 1px solid #cbd7e0;
        background: #f3f9ff;
        color: #234c6e;
        font-size: .85rem;
        font-weight: 600;
        text-align: center;
    }

    .service-due-report-panel .table-wrap,
    .customer-directory-panel .table-wrap {
        max-height: calc(100vh - 120px);
        max-height: var(--table-viewport-height, calc(100dvh - 120px));
        overflow: auto;
    }

    .service-due-report-panel thead th,
    .customer-directory-panel thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #e3eaf0;
        box-shadow: 0 1px 0 #cbd7e0;
    }
}

@media print {
    .report-scroll-hint {
        display: none;
    }

    .service-due-report-panel,
    .service-due-report-panel *,
    .report-print-header,
    .report-print-header * {
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
        opacity: 1 !important;
        text-shadow: none !important;
    }

    @page {
        size: A4 landscape;
        margin: 10mm;
    }

    html,
    body {
        background: #fff !important;
    }

    .app-header,
    .bg-orb,
    .message-stack,
    .page-head,
    .report-date-filter,
    .report-screen-actions {
        display: none !important;
    }

    .app-shell {
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .report-print-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 8mm;
        padding-bottom: 4mm;
        border-bottom: 2px solid #234c6e;
    }

    .report-print-source {
        display: table-cell;
    }

    .report-print-header img {
        width: 22mm;
        height: auto;
    }

    .report-print-header h1,
    .report-print-header p {
        margin: 0;
    }

    .report-print-header h1 {
        font-size: 18pt;
    }

    .report-print-header p {
        font-size: 9pt;
    }

    .service-due-report-panel {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: visible !important;
        break-inside: auto;
        animation: none;
        transform: none;
    }

    .service-due-report-panel .panel-head {
        min-height: 0;
        padding: 0 0 3mm;
        border: 0;
        background: transparent;
    }

    .service-due-report-panel .table-wrap {
        overflow: visible !important;
        max-height: none;
    }

    .service-due-report-panel table {
        font-size: 8pt;
    }

    .service-due-report-panel .all-appliances-report-table {
        min-width: 0;
        table-layout: auto;
    }

    .service-due-report-panel .all-appliances-report-table th,
    .service-due-report-panel .all-appliances-report-table td {
        padding: 1.4mm 1.2mm;
        font-size: 6.5pt;
    }

    .service-due-report-panel th,
    .service-due-report-panel td {
        padding: 2.2mm 2mm;
        font-size: 8pt;
    }

    .service-due-report-panel thead {
        display: table-header-group;
        break-inside: avoid;
        break-after: avoid;
    }

    .service-due-report-panel thead th {
        position: static;
    }

    .service-due-report-panel tr {
        break-inside: avoid;
    }

    .service-due-report-panel a {
        color: #000;
        font-weight: inherit;
        text-decoration: none;
    }

    .service-due-report-panel .customer-ref-link {
        display: inline;
        width: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        font-family: inherit;
        letter-spacing: normal;
        text-transform: none;
    }

}

.customer-source-filter {
    display: flex;
    align-items: center;
    gap: 9px;
}

.customer-source-filter label {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink-700);
}

.customer-source-filter select {
    width: 150px;
    min-height: 42px;
}

input,
select,
textarea {
    width: 100%;
    border-radius: 12px;
    border: 1px solid #c6d8e8;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 0.95rem;
    background: #fbfdff;
    color: var(--ink-800);
}

select {
    -webkit-appearance: none;
    appearance: none;
    min-height: 46px;
    padding-right: 42px;
    background-image:
        linear-gradient(45deg, transparent 50%, #59758e 50%),
        linear-gradient(135deg, #59758e 50%, transparent 50%);
    background-position:
        calc(100% - 20px) calc(50% - 2px),
        calc(100% - 14px) calc(50% - 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

select::-ms-expand {
    display: none;
}

input:disabled,
select:disabled,
textarea:disabled,
input[readonly],
textarea[readonly] {
    border-color: #b8c5cf;
    background-color: #e9eef2;
    color: #5f7180;
    box-shadow: inset 3px 0 0 #a9b7c2;
    cursor: not-allowed;
    opacity: 1;
    -webkit-text-fill-color: #5f7180;
}

input[readonly],
textarea[readonly] {
    cursor: default;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 4px rgba(213, 40, 53, 0.16);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Rajdhani", sans-serif;
    border: none;
    border-radius: 12px;
    background: linear-gradient(145deg, var(--accent-700), var(--accent-500));
    color: white;
    padding: 12px 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(31, 102, 178, 0.25);
}

.button-ghost {
    background: transparent;
    color: var(--ink-700);
    border: 1px solid #cbdae9;
}

.button-small {
    padding: 8px 12px;
    font-size: 0.8rem;
}

.appliance-cards {
    display: grid;
    gap: 12px;
}

.appliance-card {
    border: 1px solid #d9e6f2;
    border-radius: var(--radius-sm);
    background: #fbfdff;
    padding: 14px;
}

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

.appliance-card-head h4 {
    margin: 0;
    font-family: "Rajdhani", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1rem;
}

.appliance-card-heading {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 0;
    min-width: 0;
}

.appliance-card-heading > span:not(.work-engineer) {
    display: inline-flex;
    align-items: baseline;
    color: #526d83;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.appliance-card-heading > span:not(.work-engineer)::before {
    content: "·";
    margin: 0 8px;
    color: #91a4b3;
}

.desktop-crm-body .appliance-card-head .button-edit {
    margin-left: auto;
    min-height: 0;
    padding: 5px 9px;
    flex: 0 0 auto;
    font-size: 0.7rem;
    line-height: 1;
}

.desktop-crm-body .note-item .button-edit {
    flex: 0 0 auto;
    min-height: 0;
    padding: 5px 9px;
    font-size: 0.7rem;
    line-height: 1;
}

.desktop-crm-body .stack-list .note-item:nth-child(odd) {
    background: #fff;
}

.desktop-crm-body .stack-list .note-item:nth-child(even) {
    background: #f3f8fb;
}

.appliance-meta-list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 7px 16px;
    margin: 0;
}

.appliance-meta-fitter { grid-column: 1; grid-row: 1; }
.appliance-meta-installed { grid-column: 2; grid-row: 1; }
.appliance-meta-last-service { grid-column: 3; grid-row: 1; }
.appliance-meta-next-service { grid-column: 4; grid-row: 1; }
.appliance-meta-value { grid-column: 5; grid-row: 1; }
.appliance-meta-warranty { grid-column: 6; grid-row: 1; }

.appliance-meta-list > div {
    min-width: 0;
}

.appliance-meta-list dt {
    color: #698095;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.appliance-meta-list dd {
    margin: 1px 0 0;
    overflow-wrap: anywhere;
    color: #294359;
    font-size: 0.84rem;
    font-weight: 600;
}

.appliance-card-memo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 9px;
    margin-top: 7px;
    padding-top: 6px;
    border-top: 1px solid #e7edf2;
    color: #36536c;
    font-size: 0.84rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.desktop-crm-body .appliance-cards .appliance-card:nth-child(even) {
    background: #f3f8fb;
}

.desktop-crm-body .appliance-cards .appliance-card:nth-child(odd) {
    background: #fff;
}

.appliance-serial {
    font-size: 0.82rem;
    color: #4e6b85;
    font-weight: 600;
}

.appliance-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 14px;
}

.appliance-meta-grid p {
    margin: 0;
    display: grid;
    gap: 4px;
}

.appliance-memo-row {
    grid-column: 1 / -1;
}

.appliance-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.work-cards {
    display: grid;
    gap: 12px;
}

.work-card {
    border: 1px solid #d9e6f2;
    border-radius: var(--radius-sm);
    background: #fbfdff;
    padding: 14px;
}

.work-card:nth-child(even) {
    background: #f6f9fc;
}

.work-card-head {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 7px;
    margin-bottom: 8px;
}

.work-card-head h4 {
    margin: 0;
    font-family: "Rajdhani", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1rem;
}

.desktop-crm-body .work-card-head .button-edit {
    margin-left: auto;
    min-height: 0;
    padding: 5px 9px;
    flex: 0 0 auto;
    align-self: center;
    font-size: 0.7rem;
    line-height: 1;
}

.work-engineer {
    color: #365b78;
    font-family: "Rajdhani", sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.work-engineer::before {
    content: "·";
    margin-right: 7px;
    color: #8ba0b1;
}

.work-description {
    color: #294359;
    font-size: 0.92rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.work-card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}

.work-meta-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 0;
}

.work-meta-list > div {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
}

.work-meta-list dt {
    color: #698095;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.work-meta-list dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: #36536c;
    font-size: 0.82rem;
    font-weight: 600;
}

.pagination {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.pagination a {
    color: #0b677e;
    text-decoration: none;
    font-weight: 700;
}

.work-history-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin: 0;
    padding: 11px 18px;
    border-top: 1px solid #cbd8e2;
    background: #edf3f7;
}

.work-history-pagination > span:nth-child(2) {
    padding: 3px 10px;
    border: 1px solid #d0dce5;
    border-radius: 999px;
    background: #fff;
    color: #526d83;
    font-size: 0.78rem;
    font-weight: 700;
}

.work-history-pagination a {
    font-size: 0.82rem;
}

.work-history-pagination > :last-child {
    justify-self: end;
}

.pagination-disabled {
    color: #9aabb8;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: default;
}

.mobile-work-history-pagination {
    margin: 0;
    padding: 12px 18px;
    border-top: 1px solid #cbd8e2;
    border-bottom: 1px solid #cbd8e2;
    background: #edf3f7;
}

.mobile-work-history-pagination > span:nth-child(2) {
    padding: 3px 10px;
    border: 1px solid #d0dce5;
    border-radius: 999px;
    background: #fff;
    color: #526d83;
    font-size: 0.78rem;
    font-weight: 700;
}

.mobile-results-section .mobile-pagination {
    margin-top: 0;
    padding: 16px max(28px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left));
}

.mobile-results-section .mobile-pagination span {
    min-width: 0;
    text-align: center;
}

.mobile-results-section .mobile-pagination a {
    flex: 0 0 auto;
}

.service-list,
.stack-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
}

.customer-search-address {
    display: grid;
    gap: 3px;
}

.customer-search-address span,
.customer-search-address strong {
    min-height: 1.2em;
}

.customer-result-row {
    cursor: pointer;
}

.customer-result-row:focus-visible {
    outline: 3px solid rgba(30, 96, 145, 0.35);
    outline-offset: -3px;
}

.customer-search-address strong,
.customer-search-az {
    color: #526d82;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
}

.customer-search-az {
    display: inline-block;
    min-height: 1.2em;
}

.contact-row {
    border: 1px solid #e1ecf6;
    background: #fbfdff;
    border-radius: var(--radius-sm);
    padding: 0;
    overflow: hidden;
}

.contact-item summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    cursor: pointer;
}

.contact-item summary:hover {
    background: #f5faff;
}

.contact-item summary::-webkit-details-marker {
    display: none;
}

.contact-item[open] summary {
    border-bottom: 1px solid #e1ecf6;
    background: #f5faff;
}

.contact-summary-main {
    font-weight: 700;
}

.contact-summary-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.contact-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 12px;
    border: 1px solid #1e4f82;
    border-radius: 999px;
    background: linear-gradient(145deg, #e8f2ff, #d9ebff);
    color: #163f6a;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.contact-type-badge:empty {
    display: none;
}

.user-group-labels {
    white-space: normal;
}

.user-group-badge {
    margin: 2px 4px 2px 0;
}

.user-group-engineer {
    border-color: #2770a8;
    background: linear-gradient(145deg, #e8f5ff, #d5ecfc);
    color: #17547f;
}

.user-group-office {
    border-color: #28857e;
    background: linear-gradient(145deg, #e2f6f2, #caebe5);
    color: #17635d;
}

.user-group-classification {
    border-color: #7662a8;
    background: linear-gradient(145deg, #f1edfb, #e2d9f5);
    color: #584587;
}

.user-group-payments {
    border-color: #a56832;
    background: linear-gradient(145deg, #fff0df, #f6ddc3);
    color: #78471e;
}

.user-group-audit-reports {
    border-color: #9b4f68;
    background: linear-gradient(145deg, #fbeaf0, #f2d5df);
    color: #73364b;
}

.user-group-superuser {
    border-color: #b27a20;
    background: linear-gradient(145deg, #fff5d9, #f8e3aa);
    color: #79500f;
}

.user-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 96px;
    padding: 6px 11px;
    border: 1px solid;
    border-radius: 8px;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.user-status-badge::before {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.user-status-active {
    border-color: #4d9d70;
    background: #dff4e8;
    color: #17633b;
}

.user-status-inactive {
    border-color: #cf6974;
    background: #fbe2e5;
    color: #982632;
}

.contact-summary-hint {
    display: inline-block;
    width: 15ch;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5f7d95;
    font-weight: 700;
    line-height: 1;
}

.contact-summary-hint::before {
    display: block;
    width: 100%;
    text-align: right;
    white-space: nowrap;
    content: "Click to expand";
}

.contact-summary-icon {
    width: 10px;
    height: 10px;
    border-right: 2px solid #4f6f88;
    border-bottom: 2px solid #4f6f88;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.contact-item[open] .contact-summary-icon {
    transform: rotate(225deg);
}

.contact-item[open] .contact-summary-hint::before {
    content: "Click to close";
}

.contact-item-body {
    padding: 12px;
}

.contact-actions {
    margin-top: 10px;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
}

.contact-grid p {
    margin: 0;
    display: grid;
    gap: 3px;
}

.contact-grid .contact-address {
    grid-column: 1 / -1;
}

.record-list {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.record-editor {
    border: 1px solid #d9e6f2;
    border-radius: var(--radius-sm);
    background: #fbfdff;
    padding: 14px;
}

.record-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    margin-bottom: 10px;
}

.record-summary-grid-wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.record-summary-grid p {
    margin: 0;
    display: grid;
    gap: 4px;
    word-break: break-word;
}


.note-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.note-card p {
    margin: 0;
    white-space: pre-wrap;
}

.note-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.note-item span {
    white-space: pre-wrap;
}

.note-date,
.mobile-note-date {
    display: block;
    margin-bottom: 4px;
    color: #60788d;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.record-editor h4 {
    margin: 0 0 10px;
    font-family: "Rajdhani", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #244867;
}

.add-editor {
    margin-bottom: 14px;
}

.editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    margin-bottom: 10px;
}

.editor-grid-wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.editor-field {
    display: grid;
    gap: 4px;
}

.editor-field[hidden] {
    display: none;
}

@media (min-width: 641px) {
    .editor-grid-wide .customer-name-expanded {
        grid-column: span 2;
    }
}

.editor-field-full {
    grid-column: 1 / -1;
}

.customer-add-address-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.customer-add-postcode-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

@media (min-width: 641px) {
    .customer-add-postcode-row .customer-add-website {
        grid-column: span 2;
        min-width: 0;
    }
}

.user-create-form .editor-field {
    align-content: start;
}

.user-create-form input,
.user-create-form select {
    height: 46px;
    min-height: 46px;
}

.user-create-password-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.user-create-submit {
    min-width: 190px;
    min-height: 50px;
    padding: 13px 24px;
    font-size: 1rem;
}

.temporary-credentials {
    max-width: 600px;
    margin: 20px auto 0;
    padding: 22px;
}

.desktop-crm-body .temporary-credentials {
    max-width: 600px;
    padding: 22px;
}

.temporary-credentials-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.temporary-credentials-head h3 {
    margin: 2px 0 0;
    font-size: 1.25rem;
}

.temporary-credentials-intro {
    margin: 12px 0 0;
    color: #49667e;
    font-size: 0.92rem;
    line-height: 1.5;
}

.temporary-credentials-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: 10px;
    margin: 16px 0;
}

.temporary-credentials-grid > div {
    display: grid;
    align-content: center;
    gap: 7px;
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid #c8d9e7;
    border-radius: 12px;
    background: #f4f8fc;
}

.temporary-credentials-grid span {
    color: #58738a;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.temporary-credentials-grid code {
    color: #173f63;
    font-size: 1.02rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.temporary-password-result {
    grid-template-columns: minmax(0, 1fr) auto;
}

.temporary-password-result > span {
    grid-column: 1 / -1;
}

.temporary-password-result .button {
    align-self: center;
    min-height: 36px;
    padding: 7px 10px;
    font-size: 0.78rem;
}

.temporary-credentials-note {
    margin: 0;
    color: #58738a;
    font-size: 0.82rem;
    line-height: 1.4;
}

.temporary-credentials-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-top: 16px;
    border-top: 1px solid #dfe7ed;
}

.temporary-credentials-footer .button {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 9px 14px;
    font-size: 0.82rem;
}

.user-edit-card {
    max-width: 760px;
    margin: 20px auto 0;
}

.desktop-crm-body .user-edit-card .user-edit-form {
    padding: 22px;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.user-edit-groups {
    min-width: 0;
    margin: 4px 0;
    padding: 14px;
    border: 1px solid #c6d8e8;
    border-radius: 12px;
}

.user-edit-groups legend {
    padding: 0 6px;
    color: #4f6f88;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.user-edit-groups label,
.user-edit-active label {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}

.user-edit-groups input[type="checkbox"],
.user-edit-active input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 0;
    padding: 0;
}

.user-edit-groups > div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
}

.user-edit-active {
    padding: 12px 14px;
    border: 1px solid #c6d8e8;
    border-radius: 12px;
    background: #f7fafc;
}

.user-edit-superuser-note {
    padding: 14px;
    border: 1px solid #a9c6e2;
    border-radius: 12px;
    background: #edf5fc;
    color: #315b7d;
}

.user-edit-superuser-note strong {
    color: #173f63;
    font-family: "Rajdhani", sans-serif;
    font-size: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.user-edit-card .user-edit-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    gap: 10px;
    margin-top: 16px;
}

.user-edit-delete-slot {
    justify-self: start;
}

.user-edit-save-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.editor-field label {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: #4f6f88;
}

.editor-field textarea,
.editor-field select,
.editor-field input {
    width: 100%;
}

.crm-modal {
    border: none;
    border-radius: var(--radius);
    width: min(880px, calc(100vw - 32px));
    padding: 0;
    background: transparent;
}

.crm-modal::backdrop {
    background: rgba(15, 24, 39, 0.48);
    backdrop-filter: blur(2px);
}

.modal-form {
    padding: 18px;
    margin: 0;
}

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

.modal-head h4 {
    margin: 0;
}

.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.modal-actions .button-delete-record {
    margin-right: auto;
}

.modal-section-title {
    margin: 8px 0 10px;
    font-family: "Rajdhani", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #355a78;
    font-weight: 700;
}

.customer-add-contact-title {
    margin-top: 22px;
}

.panel-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.button-legacy,
.desktop-crm-body .button.button-legacy {
    border: 1px solid #b7791f;
    background: #e5ad4f;
    color: #493000;
    box-shadow: 0 2px 5px rgba(117, 76, 0, 0.2);
}

.button-legacy:hover,
.button-legacy:focus-visible,
.desktop-crm-body .button.button-legacy:hover,
.desktop-crm-body .button.button-legacy:focus-visible {
    border-color: #9c6518;
    background: #d89a35;
    color: #3f2900;
    box-shadow: 0 2px 5px rgba(117, 76, 0, 0.24);
    transform: none;
}

.button-danger,
.desktop-crm-body .button.button-danger {
    border: 1px solid #8e121f;
    background: var(--brand-600);
    color: #fff;
}

.button-danger:hover,
.button-danger:focus-visible,
.desktop-crm-body .button.button-danger:hover,
.desktop-crm-body .button.button-danger:focus-visible {
    border-color: #70101a;
    background: var(--brand-700);
    color: #fff;
    transform: none;
}

.button-edit,
.desktop-crm-body .button.button-edit {
    border: 1px solid #506f87;
    background: #607f97;
    color: #fff;
    box-shadow: none;
}

.button-edit:hover,
.button-edit:focus-visible,
.desktop-crm-body .button.button-edit:hover,
.desktop-crm-body .button.button-edit:focus-visible {
    border-color: #405f77;
    background: #506f87;
    color: #fff;
    box-shadow: none;
    transform: none;
}

.button-view,
.button-add,
.desktop-crm-body .button.button-view,
.desktop-crm-body .button.button-add {
    border: 1px solid #2d716d;
    background: #3b8983;
    color: #fff;
    box-shadow: none;
}

.button-view:hover,
.button-view:focus-visible,
.button-add:hover,
.button-add:focus-visible,
.desktop-crm-body .button.button-view:hover,
.desktop-crm-body .button.button-view:focus-visible,
.desktop-crm-body .button.button-add:hover,
.desktop-crm-body .button.button-add:focus-visible {
    border-color: #245e5a;
    background: #30756f;
    color: #fff;
    box-shadow: none;
    transform: none;
}

.desktop-crm-body .modal-head [data-close-modal] {
    border-color: #d88189;
    background: #fff0f1;
    color: #a1242f;
}

.desktop-crm-body .modal-head [data-close-modal]:hover,
.desktop-crm-body .modal-head [data-close-modal]:focus-visible {
    border-color: #b84c57;
    background: #f9dfe2;
    color: #891c26;
}

.legacy-data-modal {
    width: min(1180px, calc(100vw - 32px));
    height: min(90vh, 900px);
    max-width: none;
    max-height: calc(100vh - 32px);
    overflow: hidden;
    background: #fff;
}

.legacy-data-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-height: none;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: none;
    font-size: 0.82rem;
}

.legacy-data-content > .modal-head {
    flex: 0 0 auto;
    margin: 0;
}

.legacy-data-window-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.desktop-crm-body .legacy-data-window-actions [data-popout-modal] {
    border-color: #6fb9b2;
    background: #e5f5f3;
    color: #176c66;
}

.legacy-data-popout-body {
    margin: 0;
    min-width: 720px;
    background: #fff;
}

.legacy-data-popout-body .legacy-data-content {
    min-height: 100vh;
    border-radius: 0;
}

.legacy-data-update-notice {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1200;
    padding: 10px 14px;
    border: 1px solid #69b6ae;
    border-radius: 8px;
    background: #e5f5f3;
    box-shadow: 0 8px 24px rgba(22, 74, 71, 0.18);
    color: #176c66;
    font-size: 0.86rem;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.legacy-data-update-notice.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.legacy-data-scroll {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.legacy-data-section {
    margin: 0;
    padding: 0 12px 10px;
    border: 0;
    border-bottom: 1px solid #d6e0e8;
    border-radius: 0;
    background: #fff;
}

.legacy-data-section:last-child {
    border-bottom: 0;
}

.legacy-data-section .modal-section-title {
    margin: 0 -12px 6px;
    padding: 5px 12px;
    border-bottom: 1px solid #dce5ec;
    background: #f3f6f8;
}

.legacy-data-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    border-top: 1px solid #e1e8ee;
    border-left: 1px solid #e1e8ee;
}

.legacy-data-grid div {
    min-width: 0;
    padding: 4px 6px;
    border: 0;
    border-right: 1px solid #e1e8ee;
    border-bottom: 1px solid #e1e8ee;
    border-radius: 0;
    background: #fff;
}

.legacy-data-grid dt {
    color: #5b768d;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.legacy-data-grid dd {
    margin: 1px 0 0;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.legacy-data-table-wrap {
    margin: 0;
    border: 1px solid #dce5ec;
    border-radius: 0;
}

.legacy-data-table-wrap table {
    min-width: 760px;
    table-layout: auto;
}

.legacy-data-table-wrap th,
.legacy-data-table-wrap td {
    padding: 6px 8px;
    vertical-align: top;
    border-right: 1px solid #e5edf3;
    font-size: 0.78rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.legacy-data-table-wrap th:last-child,
.legacy-data-table-wrap td:last-child {
    border-right: 0;
}

.legacy-data-table-wrap tbody tr:last-child td {
    border-bottom: 0;
}

.legacy-data-table-wrap th {
    white-space: nowrap;
}

.legacy-data-table-wrap td:first-child,
.legacy-data-table-wrap td:nth-child(4),
.legacy-data-table-wrap td:nth-child(5) {
    white-space: nowrap;
}

@media (max-width: 760px) {
    .legacy-data-modal {
        width: calc(100vw - 20px);
    }

    .legacy-data-grid {
        grid-template-columns: 1fr;
    }
}

.button-plain {
    border: 1px solid #cbdae9;
    background: #ffffff;
    color: #25496a;
    border-radius: 10px;
    padding: 6px 10px;
    cursor: pointer;
    font-family: "Rajdhani", sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.field-label {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.72rem;
    color: #5b768d;
    font-weight: 700;
}

.service-list li,
.stack-list li {
    padding: 10px 0;
    border-bottom: 1px solid #e5edf5;
}

.service-list li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.service-list a {
    color: inherit;
    text-decoration: none;
    display: grid;
    gap: 2px;
}

.service-list em {
    font-style: normal;
    color: #2f5780;
    white-space: nowrap;
}

.auth-card {
    width: min(860px, 100%);
    padding: 0;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    overflow: hidden;
}

.auth-brand {
    background: linear-gradient(145deg, #153e74, #c2202e);
    color: #f3f8ff;
    padding: 36px;
}

.auth-brand h1 {
    font-family: "Rajdhani", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 18px 0 6px;
    font-size: clamp(1.6rem, 2.5vw, 2.4rem);
}

.auth-brand p {
    color: #c6d8ea;
    line-height: 1.45;
}

.auth-form {
    padding: 36px;
    display: grid;
    gap: 10px;
}

.auth-form h2 {
    font-family: "Rajdhani", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 8px;
}

.auth-form label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #355066;
}

.form-error {
    color: var(--alert);
    margin: 2px 0 6px;
    font-size: 0.9rem;
}

.reveal {
    animation: rise 450ms ease both;
}

.stagger-1 {
    animation-delay: 80ms;
}

.stagger-2 {
    animation-delay: 140ms;
}

.stagger-3 {
    animation-delay: 200ms;
}

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

@media (max-width: 960px) {
    .kpi-grid,
    .panel-grid,
    .detail-grid,
    .auth-card {
        grid-template-columns: 1fr;
    }

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


    .app-header {
        position: relative;
        flex-wrap: wrap;
    }

    .desktop-menu-toggle {
        display: inline-flex;
        margin-left: auto;
    }

    .top-nav {
        position: absolute;
        top: calc(100% + 1px);
        right: 12px;
        left: 12px;
        z-index: 30;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 6px;
        border: 1px solid #d8e3ec;
        border-radius: 0 0 10px 10px;
        background: #fff;
        box-shadow: 0 14px 28px rgba(20, 48, 70, 0.14);
    }

    .desktop-crm-body .top-nav {
        background: #fff;
    }

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

    .desktop-crm-body .top-nav a,
    .desktop-crm-body .top-nav .nav-dropdown-trigger {
        min-height: 42px;
        justify-content: flex-start;
        padding: 8px 12px;
        border-left: 0;
        border-radius: 7px;
    }

    .nav-dropdown-menu {
        position: static;
        min-width: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown:focus-within .nav-dropdown-menu {
        display: grid;
    }

    .header-customer-search {
        display: none;
    }

    .editor-grid,
    .editor-grid-wide,
    .customer-add-address-grid,
    .customer-add-postcode-row,
    .user-create-password-grid,
    .record-summary-grid,
    .record-summary-grid-wide,
    .appliance-meta-grid,
    .work-meta-grid {
        grid-template-columns: 1fr;
    }

    .customer-summary-content {
        grid-template-columns: 1fr;
    }

}

@media (min-width: 961px) and (max-width: 1250px) {
    .dashboard-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .temporary-credentials-grid {
        grid-template-columns: 1fr;
    }

    .temporary-password-result {
        grid-template-columns: 1fr;
    }

    .temporary-password-result .button {
        width: 100%;
    }

    .temporary-credentials-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .temporary-credentials-footer .button {
        width: 100%;
        text-align: center;
    }

    .app-header {
        padding: 12px 14px;
    }

    .app-shell {
        margin-top: 18px;
        padding: 0 12px;
    }

    .search-row {
        flex-direction: column;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-summary-hint {
        display: none;
    }

    .content-stack {
        margin-top: 18px;
    }

    .content-stack > * + * {
        margin-top: 18px;
    }

    .customer-account-meta-row {
        grid-template-columns: 1fr;
    }

    .classification-kpis {
        grid-template-columns: 1fr;
    }

}

/* Customer references retain the exact casing stored in the database. */
.desktop-crm-body .customer-detail-page-head h1 {
    text-transform: none;
}

.service-update-visit-fields .service-update-certificate {
    display: flex;
    align-items: center;
    gap: 8px;
}

.service-update-certificate input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-height: 0;
    margin: 0;
}

.service-visit-table-wrap { overflow-x: auto; }
.service-visit-table { width: 100%; }
.service-visit-table th:first-child,
.service-visit-table td:first-child { width: 90px; text-align: center; }
.service-visit-table td:nth-child(2) { width: 38%; }
.service-visit-table input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; margin: 0; }
.service-visit-table textarea { min-height: 48px; padding: 6px 8px; }
.service-visit-table .service-update-serial { display: block; }

.service-update-visit-fields.service-visit-header {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
}
.service-visit-engineer { min-width: 0; }
@media (max-width: 600px) {
    .service-update-visit-fields.service-visit-header { grid-template-columns: 1fr; }
}

.master-account-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    border: 1px solid #a8c7dc;
    border-radius: 999px;
    background: #e3f0fa;
    color: #245678;
    font-size: .65rem;
    font-weight: 700;
    white-space: nowrap;
}

.desktop-crm-body .customer-detail-stack .panel-head .button.button-master-link {
    background: #21899a;
    border: 1px solid #1a7895;
    color: #fff;
}
.desktop-crm-body .customer-detail-stack .panel-head .button.button-master-link:hover,
.desktop-crm-body .customer-detail-stack .panel-head .button.button-master-link:focus-visible {
    background: #167889;
    border-color: #146d7d;
    color: #fff;
}
.customer-record-navigation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    flex: 0 0 100%;
}

.customer-record-navigation > :first-child {
    justify-self: start;
}

.customer-record-navigation > :last-child {
    justify-self: end;
}

.customer-record-heading {
    text-align: center;
}

.customer-record-heading h1 {
    margin: 0;
}

/* OTP setup, verification and restriction-test pages. */
.desktop-crm-body .panel.otp-panel {
    padding: clamp(20px, 3vw, 32px);
    max-width: 760px;
    width: 100%;
    box-sizing: border-box;
    display: grid;
    gap: 20px;
}

.otp-panel > p,
.otp-panel > h2 {
    margin: 0;
}

.otp-panel .otp-qr-code {
    display: block;
    max-width: 100%;
    height: auto;
}

.otp-setup-key code {
    overflow-wrap: anywhere;
}

.otp-panel .otp-form {
    display: grid;
    gap: 18px;
    width: 100%;
    max-width: 420px;
    min-width: 0;
}

.otp-form .editor-field {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.otp-form .errorlist {
    margin: 0;
    padding-left: 20px;
    color: var(--brand-700);
}