/* Tokens */
:root {
    color-scheme: light;
    --app-bg: #eff4fb;
    --app-surface: #ffffff;
    --app-surface-soft: #f7faff;
    --app-surface-hover: #f0f6ff;
    --app-sidebar: #ffffff;
    --app-input-bg: #ffffff;
    --app-table-head: #f7faff;
    --app-hover: #f0f6ff;
    --app-topbar: #1269d4;
    --app-topbar-text: #ffffff;
    --app-topbar-muted: #dceaff;
    --app-text: #10255a;
    --app-heading: #0d2861;
    --app-muted: #5d79ab;
    --app-text-muted: #5d79ab;
    --app-subtle: #8da5ca;
    --app-border: #d9e5f4;
    --app-primary: #1674e8;
    --app-primary-strong: #075fcc;
    --app-primary-soft: #eaf3ff;
    --app-success: #16845d;
    --app-success-soft: #e4f7ee;
    --app-warning: #b86a1d;
    --app-warning-soft: #fff3e6;
    --app-danger: #be4d57;
    --app-danger-soft: #fff0f1;
    --app-shadow: 0 10px 26px rgba(35, 77, 141, 0.09);
    --app-shadow-hover: 0 16px 32px rgba(35, 77, 141, 0.14);
    --app-radius: 12px;
    --app-radius-small: 9px;
    --app-spacing: 28px;
    --app-sidebar-width: 208px;
    --app-input-height: 42px;
    --app-button-height: 40px;
}

:root[data-app-theme="dark"] {
    color-scheme: dark;
    --app-bg: #071426;
    --app-surface: #122541;
    --app-surface-soft: #162b49;
    --app-surface-hover: #182f50;
    --app-sidebar: #0d1d35;
    --app-input-bg: #122541;
    --app-table-head: #162b49;
    --app-hover: #182f50;
    --app-topbar: #0a1c36;
    --app-topbar-text: #edf4ff;
    --app-topbar-muted: #a7bee4;
    --app-text: #e3ebfa;
    --app-heading: #f3f7ff;
    --app-muted: #a6badc;
    --app-text-muted: #a6badc;
    --app-subtle: #7792ba;
    --app-border: #294363;
    --app-primary: #6e9cf4;
    --app-primary-strong: #9bbaff;
    --app-primary-soft: #1a3762;
    --app-success: #69d4ab;
    --app-success-soft: #183d3b;
    --app-warning: #e6ac71;
    --app-warning-soft: #432f21;
    --app-danger: #f1979d;
    --app-danger-soft: #432b3b;
    --app-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
    --app-shadow-hover: 0 17px 34px rgba(0, 0, 0, 0.28);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-app-theme]) {
        color-scheme: dark;
        --app-bg: #071426;
        --app-surface: #122541;
        --app-surface-soft: #162b49;
        --app-surface-hover: #182f50;
        --app-sidebar: #0d1d35;
        --app-input-bg: #122541;
        --app-table-head: #162b49;
        --app-hover: #182f50;
        --app-topbar: #0a1c36;
        --app-topbar-text: #edf4ff;
        --app-topbar-muted: #a7bee4;
        --app-text: #e3ebfa;
        --app-heading: #f3f7ff;
        --app-muted: #a6badc;
        --app-text-muted: #a6badc;
        --app-subtle: #7792ba;
        --app-border: #294363;
        --app-primary: #6e9cf4;
        --app-primary-strong: #9bbaff;
        --app-primary-soft: #1a3762;
        --app-success: #69d4ab;
        --app-success-soft: #183d3b;
        --app-warning: #e6ac71;
        --app-warning-soft: #432f21;
        --app-danger: #f1979d;
        --app-danger-soft: #432b3b;
        --app-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
        --app-shadow-hover: 0 17px 34px rgba(0, 0, 0, 0.28);
    }
}

/* Base */
body:not(.owner-dashboard) {
    min-width: 320px;
    overflow-x: hidden;
    background: var(--app-bg);
    color: var(--app-text);
    font-family: Arial, Helvetica, sans-serif;
}

body:not(.owner-dashboard) ::selection {
    background: var(--app-primary-soft);
    color: var(--app-heading);
}

body:not(.owner-dashboard) button,
body:not(.owner-dashboard) input,
body:not(.owner-dashboard) select,
body:not(.owner-dashboard) textarea {
    font: inherit;
}

body:not(.owner-dashboard) a {
    color: inherit;
}

body:not(.owner-dashboard) :focus-visible {
    outline: 3px solid rgba(22, 116, 232, 0.28);
    outline-offset: 2px;
}

:root[data-app-theme="dark"] body:not(.owner-dashboard) :focus-visible {
    outline-color: rgba(155, 186, 255, 0.45);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-app-theme]) body:not(.owner-dashboard) :focus-visible {
        outline-color: rgba(155, 186, 255, 0.45);
    }
}

/* Shared shell */
body:not(.owner-dashboard) .sidebar {
    width: 256px;
    padding: 22px 14px 16px;
    background: var(--app-surface);
    border-right: 1px solid var(--app-border);
    box-shadow: 3px 0 16px rgba(35, 77, 141, 0.03);
}

body:not(.owner-dashboard) .brand {
    padding: 5px 10px 24px;
    margin: 0;
}

body:not(.owner-dashboard) .brand h1 {
    color: var(--app-heading);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.055em;
}

body:not(.owner-dashboard) .brand p {
    margin-top: 3px;
    color: var(--app-muted);
    font-size: 11px;
}

body:not(.owner-dashboard) .menu-title {
    margin: 0 10px 9px;
    padding: 0;
    color: var(--app-subtle);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

body:not(.owner-dashboard) .menu {
    gap: 3px;
}

body:not(.owner-dashboard) .menu-item {
    min-height: 42px;
    gap: 12px;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: var(--app-radius-small);
    color: var(--app-muted);
    font-size: 13px;
    font-weight: 700;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

body:not(.owner-dashboard) .menu-item .icon {
    display: grid;
    width: 19px;
    flex: 0 0 19px;
    place-items: center;
    color: var(--app-subtle);
    font-size: 15px;
}

body:not(.owner-dashboard) .menu-item:hover {
    background: var(--app-surface-hover);
    color: var(--app-primary-strong);
}

body:not(.owner-dashboard) .menu-item:hover .icon,
body:not(.owner-dashboard) .menu-item.active .icon {
    color: var(--app-primary-strong);
}

body:not(.owner-dashboard) .menu-item.active {
    border-color: #bdd8ff;
    background: var(--app-primary-soft);
    color: var(--app-primary-strong);
    font-weight: 800;
}

body:not(.owner-dashboard) .system-status {
    padding-top: 20px;
}

body:not(.owner-dashboard) .status-online {
    color: var(--app-success);
    font-size: 12px;
    font-weight: 800;
}

body:not(.owner-dashboard) .status-dot {
    background: var(--app-success);
    box-shadow: 0 0 0 3px rgba(22, 132, 93, 0.12);
}

body:not(.owner-dashboard) .system-info {
    padding: 11px;
    border-color: var(--app-border);
    border-radius: var(--app-radius-small);
    background: var(--app-surface-soft);
}

body:not(.owner-dashboard) .system-info p,
body:not(.owner-dashboard) .sidebar-footer {
    color: var(--app-muted);
}

body:not(.owner-dashboard) .system-info b {
    color: var(--app-text);
}

body:not(.owner-dashboard) .sidebar-footer {
    border-color: var(--app-border);
    font-size: 10px;
}

body:not(.owner-dashboard) .main-content {
    margin-left: 256px;
    background: var(--app-bg);
}

body:not(.owner-dashboard) .topbar {
    min-height: 68px;
    height: 68px;
    padding: 0 26px;
    background: var(--app-topbar);
    border-bottom-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 3px 14px rgba(11, 44, 100, 0.08);
}

body:not(.owner-dashboard) .menu-toggle,
body:not(.owner-dashboard) .notification-btn {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--app-radius-small);
    background: rgba(255, 255, 255, 0.08);
    color: var(--app-topbar-muted);
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

body:not(.owner-dashboard) .menu-toggle:hover,
body:not(.owner-dashboard) .notification-btn:hover,
body:not(.owner-dashboard) .profile-arrow:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

body:not(.owner-dashboard) .topbar-right {
    gap: 12px;
}

body:not(.owner-dashboard) .theme-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    gap: 6px;
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--app-radius-small);
    background: rgba(255, 255, 255, 0.08);
    color: var(--app-topbar-muted);
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

body:not(.owner-dashboard) .theme-toggle:hover {
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.15);
    color: var(--app-topbar-text);
}

body:not(.owner-dashboard) .theme-toggle-icon {
    font-size: 14px;
    line-height: 1;
}

body:not(.owner-dashboard) .user-profile {
    gap: 8px;
    padding: 4px 6px;
    border-radius: var(--app-radius-small);
    color: var(--app-topbar-text);
    font-size: 12px;
    font-weight: 800;
}

body:not(.owner-dashboard) .user-profile:hover {
    background: rgba(255, 255, 255, 0.1);
}

body:not(.owner-dashboard) .avatar {
    width: 31px;
    height: 31px;
    border: 2px solid rgba(255, 255, 255, 0.55);
    background: #d4e8ff;
    color: #184a8c;
    font-size: 10px;
}

body:not(.owner-dashboard) .profile-arrow,
body:not(.owner-dashboard) .user-profile .user-role {
    color: var(--app-topbar-muted);
}

/* Pages and cards */
body:not(.owner-dashboard) .app-page-content,
body:not(.owner-dashboard) .main-content > .container {
    width: min(1320px, 100%);
    padding: 28px;
}

body:not(.owner-dashboard) .page-heading,
body:not(.owner-dashboard) .page-header {
    margin-bottom: 22px;
}

body:not(.owner-dashboard) .page-heading h1,
body:not(.owner-dashboard) .page-header h1,
body:not(.owner-dashboard) .container > h1 {
    color: var(--app-heading);
    letter-spacing: -0.02em;
}

body:not(.owner-dashboard) .page-heading p,
body:not(.owner-dashboard) .page-header .subtitle,
body:not(.owner-dashboard) .subtitle {
    color: var(--app-muted);
}

body:not(.owner-dashboard) .page-card,
body:not(.owner-dashboard) .customer-form-section,
body:not(.owner-dashboard) .payment-entry-card,
body:not(.owner-dashboard) .payment-result,
body:not(.owner-dashboard) .detail-card {
    background: var(--app-surface);
    border-color: var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
}

body:not(.owner-dashboard) .page-card h2,
body:not(.owner-dashboard) .customer-form-section h2,
body:not(.owner-dashboard) .payment-entry-heading h2,
body:not(.owner-dashboard) .payment-result h2,
body:not(.owner-dashboard) .detail-card h3 {
    color: var(--app-heading);
}

body:not(.owner-dashboard) .empty-state,
body:not(.owner-dashboard) .collector-empty-state,
body:not(.owner-dashboard) .technician-empty-state {
    border-color: var(--app-border);
    background: var(--app-surface-soft);
    color: var(--app-muted);
}

/* Forms and actions */
body:not(.owner-dashboard) input:not([type="checkbox"]):not([type="radio"]),
body:not(.owner-dashboard) select,
body:not(.owner-dashboard) textarea {
    min-height: var(--app-input-height);
    border-color: var(--app-border);
    border-radius: var(--app-radius-small);
    background: var(--app-input-bg);
    color: var(--app-text);
}

body:not(.owner-dashboard) input:not([type="checkbox"]):not([type="radio"])::placeholder,
body:not(.owner-dashboard) textarea::placeholder {
    color: var(--app-subtle);
}

body:not(.owner-dashboard) input:not([type="checkbox"]):not([type="radio"]):focus,
body:not(.owner-dashboard) select:focus,
body:not(.owner-dashboard) textarea:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px rgba(22, 116, 232, 0.14);
    outline: 0;
}

body:not(.owner-dashboard) input[type="checkbox"],
body:not(.owner-dashboard) input[type="radio"] {
    accent-color: var(--app-primary);
}

body:not(.owner-dashboard) .btn-primary,
body:not(.owner-dashboard) .primary-action,
body:not(.owner-dashboard) .payment-form-actions button,
body:not(.owner-dashboard) .report-actions button:not(.secondary),
body:not(.owner-dashboard) .ai-compose [data-ai-send],
body:not(.owner-dashboard) .legacy-upload-form > button {
    min-height: var(--app-button-height);
    border-color: var(--app-primary);
    border-radius: var(--app-radius-small);
    background: var(--app-primary);
    color: #ffffff;
    box-shadow: 0 5px 12px rgba(22, 116, 232, 0.14);
}

body:not(.owner-dashboard) .btn-primary:hover:not(:disabled),
body:not(.owner-dashboard) .primary-action:hover:not(:disabled),
body:not(.owner-dashboard) .payment-form-actions button:hover:not(:disabled),
body:not(.owner-dashboard) .report-actions button:not(.secondary):hover:not(:disabled),
body:not(.owner-dashboard) .ai-compose [data-ai-send]:hover:not(:disabled),
body:not(.owner-dashboard) .legacy-upload-form > button:hover:not(:disabled) {
    background: var(--app-primary-strong);
    box-shadow: 0 8px 16px rgba(22, 116, 232, 0.2);
}

body:not(.owner-dashboard) .btn-secondary,
body:not(.owner-dashboard) .secondary,
body:not(.owner-dashboard) .status-action,
body:not(.owner-dashboard) .btn-filter-reset,
body:not(.owner-dashboard) .ai-new-conversation,
body:not(.owner-dashboard) .ai-document-download,
body:not(.owner-dashboard) .legacy-download,
body:not(.owner-dashboard) .book-customers-button {
    min-height: var(--app-button-height);
    border-color: var(--app-border);
    border-radius: var(--app-radius-small);
    background: var(--app-surface-soft);
    color: var(--app-primary-strong);
}

body:not(.owner-dashboard) .btn-secondary:hover:not(:disabled),
body:not(.owner-dashboard) .secondary:hover:not(:disabled),
body:not(.owner-dashboard) .status-action:hover:not(:disabled),
body:not(.owner-dashboard) .btn-filter-reset:hover:not(:disabled),
body:not(.owner-dashboard) .ai-new-conversation:hover:not(:disabled),
body:not(.owner-dashboard) .ai-document-download:hover:not(:disabled),
body:not(.owner-dashboard) .legacy-download:hover:not(:disabled),
body:not(.owner-dashboard) .book-customers-button:hover:not(:disabled) {
    border-color: var(--app-primary);
    background: var(--app-primary-soft);
    color: var(--app-primary-strong);
}

body:not(.owner-dashboard) button:disabled,
body:not(.owner-dashboard) input:disabled,
body:not(.owner-dashboard) select:disabled,
body:not(.owner-dashboard) textarea:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

/* Tables */
body:not(.owner-dashboard) .table-wrapper,
body:not(.owner-dashboard) .staff-table-wrapper,
body:not(.owner-dashboard) .report-table-wrapper,
body:not(.owner-dashboard) .legacy-table-wrap,
body:not(.owner-dashboard) .allocation-table-wrapper {
    border-color: var(--app-border);
    border-radius: var(--app-radius-small);
    background: var(--app-surface);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

body:not(.owner-dashboard) .table-wrapper th,
body:not(.owner-dashboard) .table-wrapper td,
body:not(.owner-dashboard) .staff-table-wrapper th,
body:not(.owner-dashboard) .staff-table-wrapper td,
body:not(.owner-dashboard) .report-table-wrapper th,
body:not(.owner-dashboard) .report-table-wrapper td,
body:not(.owner-dashboard) .legacy-table th,
body:not(.owner-dashboard) .legacy-table td,
body:not(.owner-dashboard) .allocation-table th,
body:not(.owner-dashboard) .allocation-table td {
    border-color: var(--app-border);
    color: var(--app-text);
}

body:not(.owner-dashboard) .table-wrapper th,
body:not(.owner-dashboard) .staff-table-wrapper th,
body:not(.owner-dashboard) .report-table-wrapper th,
body:not(.owner-dashboard) .legacy-table th,
body:not(.owner-dashboard) .allocation-table th {
    background: var(--app-table-head);
    color: var(--app-muted);
    font-weight: 800;
}

body:not(.owner-dashboard) .table-wrapper tbody tr:hover,
body:not(.owner-dashboard) .staff-table-wrapper tbody tr:hover,
body:not(.owner-dashboard) .report-table-wrapper tbody tr:hover,
body:not(.owner-dashboard) .legacy-table tbody tr:hover,
body:not(.owner-dashboard) .allocation-table tbody tr:hover {
    background: var(--app-hover);
}

body:not(.owner-dashboard) .account-status.active,
body:not(.owner-dashboard) .status.active,
body:not(.owner-dashboard) .success {
    background: var(--app-success-soft);
    color: var(--app-success);
}

body:not(.owner-dashboard) .account-status.inactive,
body:not(.owner-dashboard) .status.inactive,
body:not(.owner-dashboard) .error {
    background: var(--app-danger-soft);
    color: var(--app-danger);
}

/* Customer and payment legacy surfaces */
body:not(.owner-dashboard) .customer-filters {
    border-color: var(--app-border);
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
}

body:not(.owner-dashboard) .customer-filters .filter-group label,
body:not(.owner-dashboard) .payment-field label,
body:not(.owner-dashboard) .form-group label,
body:not(.owner-dashboard) .location-data-grid dt,
body:not(.owner-dashboard) .payment-result-summary dt {
    color: var(--app-text-muted);
}

body:not(.owner-dashboard) .main-content > .container > .table-wrapper thead th,
body:not(.owner-dashboard) .customer-detail-dialog .table-wrapper thead th,
body:not(.owner-dashboard) .allocation-table th {
    border-color: var(--app-border);
    background: var(--app-table-head);
    color: var(--app-text-muted);
}

body:not(.owner-dashboard) .main-content > .container > .table-wrapper tbody td,
body:not(.owner-dashboard) .customer-detail-dialog .table-wrapper tbody td,
body:not(.owner-dashboard) .allocation-table td,
body:not(.owner-dashboard) .location-data-grid dd,
body:not(.owner-dashboard) .payment-allocation-summary,
body:not(.owner-dashboard) .payment-period-inline {
    border-color: var(--app-border);
    color: var(--app-text);
}

body:not(.owner-dashboard) .customer-row:hover td,
body:not(.owner-dashboard) .table-wrapper tbody tr:hover td,
body:not(.owner-dashboard) .customer-search-result:hover,
body:not(.owner-dashboard) .customer-search-result:focus {
    background: var(--app-hover);
}

body:not(.owner-dashboard) .customer-search-result {
    border-color: var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
}

body:not(.owner-dashboard) .customer-search-result:last-child {
    border-color: var(--app-border);
}

body:not(.owner-dashboard) .customer-location-panel h4,
body:not(.owner-dashboard) .customer-photo-panel h4,
body:not(.owner-dashboard) .payment-period-range,
body:not(.owner-dashboard) .payment-allocation-details li strong,
body:not(.owner-dashboard) .transaction-detail-grid dd {
    color: var(--app-heading);
}

body:not(.owner-dashboard) .payment-allocation-details ul {
    border-color: var(--app-border);
    background: var(--app-surface-soft);
}

body:not(.owner-dashboard) .payment-allocation-details li,
body:not(.owner-dashboard) .payment-period-count,
body:not(.owner-dashboard) .transaction-detail-grid dt {
    color: var(--app-text-muted);
}

body:not(.owner-dashboard) .payment-detail-section,
body:not(.owner-dashboard) .allocation-table-wrapper {
    border-color: var(--app-border);
    background: var(--app-surface);
}

/* Dialogs */
body:not(.owner-dashboard) .modal,
body:not(.owner-dashboard) .customer-detail-modal {
    background: rgba(7, 20, 38, 0.58);
}

body:not(.owner-dashboard) .modal-content,
body:not(.owner-dashboard) .customer-detail-dialog,
body:not(.owner-dashboard) .bonus-service-dialog {
    border-color: var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    color: var(--app-text);
    box-shadow: 0 24px 70px rgba(7, 20, 38, 0.3);
}

body:not(.owner-dashboard) .payment-modal-header,
body:not(.owner-dashboard) .customer-detail-dialog .detail-header,
body:not(.owner-dashboard) .bonus-service-dialog .detail-header {
    border-color: var(--app-border);
    background: var(--app-surface);
}

body:not(.owner-dashboard) .payment-modal-header h2,
body:not(.owner-dashboard) .customer-detail-dialog .detail-header h2,
body:not(.owner-dashboard) .bonus-service-dialog .detail-header h2,
body:not(.owner-dashboard) .customer-form-section > .detail-header h2,
body:not(.owner-dashboard) .payment-detail-section h3,
body:not(.owner-dashboard) .payment-result h3,
body:not(.owner-dashboard) .detail-card-heading h3 {
    color: var(--app-heading);
}

body:not(.owner-dashboard) .payment-modal-header p,
body:not(.owner-dashboard) .customer-detail-dialog .detail-header > div > div,
body:not(.owner-dashboard) .bonus-service-dialog .detail-header > div > div,
body:not(.owner-dashboard) .bonus-service-form small,
body:not(.owner-dashboard) .payment-entry-heading p,
body:not(.owner-dashboard) .payment-submit-status,
body:not(.owner-dashboard) .field-help {
    color: var(--app-muted);
}

body:not(.owner-dashboard) .customer-location-panel,
body:not(.owner-dashboard) .customer-photo-panel,
body:not(.owner-dashboard) .customer-form-section .detail-card,
body:not(.owner-dashboard) .payment-result-summary > div,
body:not(.owner-dashboard) .payment-allocation-summary,
body:not(.owner-dashboard) .payment-allocation-details {
    border-color: var(--app-border);
    background: var(--app-surface-soft);
}

body:not(.owner-dashboard) .bonus-service-action,
body:not(.owner-dashboard) .bonus-service-submit {
    border-color: var(--app-primary);
    background: var(--app-primary);
}

body:not(.owner-dashboard) .bonus-service-action:hover:not(:disabled),
body:not(.owner-dashboard) .bonus-service-submit:hover:not(:disabled) {
    background: var(--app-primary-strong);
}

body:not(.owner-dashboard) .bonus-service-cancel,
body:not(.owner-dashboard) .photo-action {
    border-color: var(--app-border);
    background: var(--app-surface-soft);
    color: var(--app-text);
}

body:not(.owner-dashboard) .bonus-service-cancel:hover:not(:disabled),
body:not(.owner-dashboard) .photo-action:hover:not(:disabled) {
    border-color: var(--app-primary);
    background: var(--app-primary-soft);
    color: var(--app-primary-strong);
}

body:not(.owner-dashboard) .modal-close-button,
body:not(.owner-dashboard) .btn-close-detail {
    border-color: var(--app-border);
    background: var(--app-surface-soft);
    color: var(--app-muted);
}

body:not(.owner-dashboard) .modal-close-button:hover,
body:not(.owner-dashboard) .btn-close-detail:hover {
    background: var(--app-surface-hover);
    color: var(--app-heading);
}

/* AI surfaces */
body:not(.owner-dashboard) .ai-chat-shell,
body:not(.owner-dashboard) .legacy-workspace,
body:not(.owner-dashboard) .it-diagnostics,
body:not(.owner-dashboard) .ai-agent-intro,
body:not(.owner-dashboard) .safety-section,
body:not(.owner-dashboard) .monitoring-section {
    border-color: var(--app-border);
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
}

body:not(.owner-dashboard) .ai-chat-header,
body:not(.owner-dashboard) .ai-message-list,
body:not(.owner-dashboard) .ai-compose,
body:not(.owner-dashboard) .ai-message-content,
body:not(.owner-dashboard) .monitoring-card {
    border-color: var(--app-border);
    background: var(--app-surface-soft);
    color: var(--app-text);
}

body:not(.owner-dashboard) .ai-assistant-mark,
body:not(.owner-dashboard) .ai-message-badge {
    background: var(--app-primary-soft);
    color: var(--app-primary-strong);
}

body:not(.owner-dashboard) .accounting-mark,
body:not(.owner-dashboard) .it-mark,
body:not(.owner-dashboard) .ai-message.user .ai-message-badge {
    background: var(--app-primary);
    color: #ffffff;
}

body:not(.owner-dashboard) .ai-chat-header h2,
body:not(.owner-dashboard) .legacy-workspace h2,
body:not(.owner-dashboard) .it-diagnostics h2,
body:not(.owner-dashboard) .ai-agent-intro h2,
body:not(.owner-dashboard) .safety-section h2,
body:not(.owner-dashboard) .section-heading h2,
body:not(.owner-dashboard) .monitoring-card h3 {
    color: var(--app-heading);
}

body:not(.owner-dashboard) .ai-chat-header p,
body:not(.owner-dashboard) .ai-message-list,
body:not(.owner-dashboard) .ai-compose-hint,
body:not(.owner-dashboard) .ai-attachment-file,
body:not(.owner-dashboard) .ai-document-card > span,
body:not(.owner-dashboard) .ai-document-card > small,
body:not(.owner-dashboard) .ai-agent-intro p,
body:not(.owner-dashboard) .safety-section p,
body:not(.owner-dashboard) .monitoring-card p,
body:not(.owner-dashboard) .monitoring-card small,
body:not(.owner-dashboard) .it-diagnostic-note {
    color: var(--app-muted);
}

body:not(.owner-dashboard) .ai-agent-icon {
    background: var(--app-primary-soft);
    color: var(--app-primary-strong);
}

body:not(.owner-dashboard) .monitoring-status {
    background: var(--app-surface-hover);
    color: var(--app-muted);
}

body:not(.owner-dashboard) .ai-message.user .ai-message-content {
    background: var(--app-primary);
    color: #ffffff;
}

body:not(.owner-dashboard) .ai-message.is-welcome .ai-message-content {
    border-color: var(--app-border);
    background: var(--app-surface-soft);
}

body:not(.owner-dashboard) .ai-message.is-error .ai-message-content {
    border-color: var(--app-danger);
    background: var(--app-danger-soft);
    color: var(--app-danger);
}

body:not(.owner-dashboard) .ai-message.is-error .ai-message-badge {
    background: var(--app-danger-soft);
    color: var(--app-danger);
}

body:not(.owner-dashboard) .ai-message-content pre {
    background: #0b1b32;
    color: #e5eefc;
}

body:not(.owner-dashboard) .ai-message-content code {
    background: var(--app-primary-soft);
    color: var(--app-text);
}

body:not(.owner-dashboard) .ai-message.user .ai-message-content code {
    background: rgba(255, 255, 255, 0.16);
    color: inherit;
}

body:not(.owner-dashboard) .ai-attachment label,
body:not(.owner-dashboard) .ai-attachment-remove {
    border-color: var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
}

body:not(.owner-dashboard) .ai-attachment[data-has-file="true"] {
    border-color: var(--app-border);
    background: var(--app-surface-soft);
}

body:not(.owner-dashboard) .legacy-upload-form,
body:not(.owner-dashboard) .legacy-summary-grid article,
body:not(.owner-dashboard) .it-diagnostic-grid article {
    border-color: var(--app-border);
    background: var(--app-surface-soft);
}

body:not(.owner-dashboard) .legacy-upload-form label,
body:not(.owner-dashboard) .legacy-preview h3,
body:not(.owner-dashboard) .legacy-summary-grid strong,
body:not(.owner-dashboard) .it-diagnostic-grid strong {
    color: var(--app-heading);
}

body:not(.owner-dashboard) .legacy-notes,
body:not(.owner-dashboard) .legacy-upload-form small,
body:not(.owner-dashboard) .legacy-message,
body:not(.owner-dashboard) .it-diagnostic-grid span {
    color: var(--app-muted);
}

/* Reports */
body:not(.owner-dashboard) .report-controls-heading,
body:not(.owner-dashboard) .report-actions,
body:not(.owner-dashboard) .report-table-section,
body:not(.owner-dashboard) .legacy-preview-header {
    border-color: var(--app-border);
}

body:not(.owner-dashboard) .report-controls-heading h2,
body:not(.owner-dashboard) .report-result-heading h2,
body:not(.owner-dashboard) .report-table-heading h3 {
    color: var(--app-heading);
}

body:not(.owner-dashboard) .report-controls-heading p,
body:not(.owner-dashboard) .report-table-heading p,
body:not(.owner-dashboard) .report-controls label,
body:not(.owner-dashboard) .report-result-heading time,
body:not(.owner-dashboard) #reportTable .report-cell-date,
body:not(.owner-dashboard) #reportTable .report-empty-cell {
    color: var(--app-muted);
}

body:not(.owner-dashboard) .report-result-heading time,
body:not(.owner-dashboard) .report-summary-card,
body:not(.owner-dashboard) .report-table-wrapper {
    border-color: var(--app-border);
    background: var(--app-surface-soft);
}

body:not(.owner-dashboard) .report-summary-card strong {
    color: var(--app-heading);
}

body:not(.owner-dashboard) .report-summary-card.is-currency strong {
    color: var(--app-primary-strong);
}

body:not(.owner-dashboard) .report-summary-card span {
    color: var(--app-muted);
}

body:not(.owner-dashboard) .report-limitation {
    border-color: var(--app-warning);
    background: var(--app-warning-soft);
    color: var(--app-warning);
}

body:not(.owner-dashboard) #reportTable th,
body:not(.owner-dashboard) #reportTable td,
body:not(.owner-dashboard) #reportTable tbody tr {
    border-color: var(--app-border);
    color: var(--app-text);
}

body:not(.owner-dashboard) #reportTable th {
    background: var(--app-surface-soft);
    color: var(--app-muted);
}

body:not(.owner-dashboard) #reportTable tbody tr,
body:not(.owner-dashboard) #reportTable tbody tr:hover td {
    background: var(--app-surface);
}

body:not(.owner-dashboard) #reportTable tbody tr:hover td {
    background: var(--app-surface-hover);
}

/* Role dashboards */
body:not(.owner-dashboard) .dashboard {
    width: min(100%, 1440px);
    padding: 30px 28px 22px;
}

body:not(.owner-dashboard) .dashboard-header h2 {
    color: var(--app-heading);
    font-size: clamp(26px, 3vw, 34px);
}

body:not(.owner-dashboard) .last-opened,
body:not(.owner-dashboard) .dashboard-footer,
body:not(.owner-dashboard) .stat-description {
    color: var(--app-subtle);
}

body:not(.owner-dashboard) .date-card,
body:not(.owner-dashboard) .stat-card,
body:not(.owner-dashboard) .activity-section {
    border-color: var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
}

body:not(.owner-dashboard) .stat-card {
    min-height: 138px;
    padding: 20px;
}

body:not(.owner-dashboard) .stat-card:hover {
    border-color: var(--app-primary);
    box-shadow: var(--app-shadow-hover);
}

body:not(.owner-dashboard) .stat-title,
body:not(.owner-dashboard) .activity-column h4 {
    color: var(--app-muted);
}

body:not(.owner-dashboard) .stat-value,
body:not(.owner-dashboard) .activity-section > h3 {
    color: var(--app-heading);
}

body:not(.owner-dashboard) .collector-empty-state,
body:not(.owner-dashboard) .technician-empty-state {
    border-color: var(--app-border);
}

/* Popovers */
body:not(.owner-dashboard) .topbar-popover {
    border-color: var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
    box-shadow: var(--app-shadow-hover);
}

body:not(.owner-dashboard) .popover-user-info {
    border-color: var(--app-border);
}

body:not(.owner-dashboard) .popover-user-info strong,
body:not(.owner-dashboard) .user-popover a,
body:not(.owner-dashboard) .logout-button {
    color: var(--app-text);
}

body:not(.owner-dashboard) .popover-user-info span,
body:not(.owner-dashboard) .user-role {
    color: var(--app-muted);
}

body:not(.owner-dashboard) .user-popover a:hover,
body:not(.owner-dashboard) .logout-button:hover {
    background: var(--app-surface-hover);
}

@media (max-width: 1100px) {
    body:not(.owner-dashboard) .sidebar {
        width: 236px;
    }

    body:not(.owner-dashboard) .main-content {
        margin-left: 236px;
    }
}

@media (max-width: 800px) {
    body:not(.owner-dashboard) .sidebar {
        width: 256px;
        box-shadow: 10px 0 28px rgba(7, 20, 38, 0.2);
    }

    body:not(.owner-dashboard) .main-content {
        margin-left: 0;
    }

    body:not(.owner-dashboard) .topbar {
        padding: 0 16px;
    }

    body:not(.owner-dashboard) .app-page-content,
    body:not(.owner-dashboard) .main-content > .container,
    body:not(.owner-dashboard) .dashboard {
        padding: 22px 16px 18px;
    }
}

@media (max-width: 560px) {
    body:not(.owner-dashboard) .topbar {
        min-height: 62px;
        height: 62px;
    }

    body:not(.owner-dashboard) .app-page-content,
    body:not(.owner-dashboard) .main-content > .container,
    body:not(.owner-dashboard) .dashboard {
        padding: 20px 14px 16px;
    }

    body:not(.owner-dashboard) .page-card,
    body:not(.owner-dashboard) .customer-form-section,
    body:not(.owner-dashboard) .payment-entry-card,
    body:not(.owner-dashboard) .payment-result {
        border-radius: 10px;
    }

    body:not(.owner-dashboard) .theme-toggle {
        display: grid;
        width: 38px;
        height: 38px;
        min-height: 38px;
        padding: 0;
        place-items: center;
    }

    body:not(.owner-dashboard) .theme-toggle [data-app-theme-label] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.owner-dashboard) *,
    body:not(.owner-dashboard) *::before,
    body:not(.owner-dashboard) *::after {
        scroll-behavior: auto;
        transition-duration: 0.01ms !important;
    }
}