* { box-sizing: border-box; margin: 0; padding: 0; }
html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

:root {
    /* Brand palette: calm cobalt with brighter, friendlier surfaces */
    --color-bg: #eef5ff;
    --color-surface: #ffffff;
    --color-bg-elevated: #ffffff;
    --color-surface-alt: #f3f8ff;
    --color-border: #d4e0f2;
    --color-border-subtle: #e7effb;
    --main-page-card-bg: rgba(255, 255, 255, 0.94);
    --main-page-card-bg-hover: #ffffff;
    --main-page-card-border: rgba(36, 88, 211, 0.13);
    --main-page-card-shadow: var(--surface-highlight), 0 6px 18px rgba(24, 61, 124, 0.08);

    /* Text colors - higher contrast with a softer brand tint */
    --color-text-primary: #17253b;
    --color-text-secondary: #485a74;
    --color-text-tertiary: #64748b;
    --color-text: var(--color-text-primary);

    /* Brand family */
    --color-brand: #2458d3;
    --color-brand-strong: #1a43a2;
    --color-brand-soft: #e6f0ff;
    --color-brand-muted: #bfd2ff;
    --color-accent: #2458d3;
    --color-accent-soft: #e6f0ff;
    --color-brand-start: var(--color-brand);
    --color-brand-contrast: #ffffff;
    --gradient-brand: linear-gradient(135deg, #336fe8 0%, #1f56ca 100%);
    --gradient-brand-soft: linear-gradient(180deg, rgba(36, 88, 211, 0.14) 0%, rgba(36, 88, 211, 0.025) 100%);
    --focus-ring: 0 0 0 3px rgba(36, 88, 211, 0.18);

    /* Status colors - aligned with the accent family */
    --color-success: #179b63;
    --color-success-soft: #e2f6ec;
    --color-warning: #b7791f;
    --color-warning-soft: #fff2dc;
    --color-danger: #d92d20;
    --color-danger-soft: #fff0ef;
    --color-neutral: #64748b;
    --color-neutral-soft: #eef4fa;
    --color-info: #2458d3;
    --color-info-soft: #e9f1ff;

    /* Semantic state pairings */
    --state-info-bg: #e9f1ff;
    --state-info-fg: #2458d3;
    --state-attention-bg: #fff2dc;
    --state-attention-fg: #9a670d;
    --state-priority-bg: #fff1e6;
    --state-priority-fg: #b54708;
    --state-priority-border: #f3c39c;
    --state-success-bg: #e2f6ec;
    --state-success-fg: #126747;
    --state-danger-bg: #fff0ef;
    --state-danger-fg: #b42318;
    --state-danger-border: #f3b7b1;
    --state-neutral-bg: #eef4fa;
    --state-neutral-fg: #5b6b82;
    --state-scheduled-bg: #eef4fa;
    --state-scheduled-fg: #526277;
    --state-scheduled-border: #d4dfeb;
    --state-cancelled-bg: #fff3f1;
    --state-cancelled-fg: #a83f35;
    --state-cancelled-border: #efc2bd;
    --state-progress-bg: #e9f1ff;
    --state-progress-fg: #2458d3;
    --state-progress-border: #b8ccff;

    /* Shadows - softer, with a slight blue cast */
    --shadow-sm: 0 1px 2px rgba(17, 34, 68, 0.06);
    --shadow-md: 0 10px 24px rgba(24, 46, 84, 0.09);
    --shadow-lg: 0 20px 44px rgba(20, 34, 64, 0.14);
    --surface-highlight: inset 0 1px 0 rgba(255,255,255,0.72);

    /* Radius - slightly smaller for cleaner look */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    /* Typography */
    --font-size-xs: 13px;
    --font-size-sm: 14px;
    --font-size-base: 15px;
    --font-size-md: 17px;
    --font-size-lg: 20px;
    --app-font-family: 'Avenir Next', Avenir, Aptos, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
    --motion-fast: 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --motion-base: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --motion-slow: 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --motion-spring: 260ms cubic-bezier(0.22, 1, 0.36, 1);
    --bottom-nav-height: 102px;
    --detail-actions-height: 92px;
    --bg-secondary: var(--color-surface-alt);
    --text-secondary: var(--color-text-secondary);
}

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

/* Dark mode */
[data-theme="dark"] {
    --color-bg: #091321;
    --color-surface: #121d30;
    --color-bg-elevated: #17243a;
    --color-surface-alt: #1a2943;
    --color-border: #2d3d58;
    --color-border-subtle: #22324d;
    --main-page-card-bg: rgba(24, 36, 57, 0.97);
    --main-page-card-bg-hover: rgba(30, 44, 68, 0.96);
    --main-page-card-border: rgba(184, 205, 255, 0.18);
    --main-page-card-shadow: 0 8px 20px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255,255,255,0.06);

    --color-text-primary: #f6f9ff;
    --color-text-secondary: #d3deee;
    --color-text-tertiary: #aebfd6;

    --color-brand: #8fb1ff;
    --color-brand-strong: #b2cbff;
    --color-brand-soft: #16294b;
    --color-brand-muted: #224272;
    --color-accent: #8fb1ff;
    --color-accent-soft: #16294b;
    --color-brand-start: #8fb1ff;
    --color-brand-contrast: #ffffff;
    --gradient-brand: linear-gradient(135deg, #3f73e6 0%, #2458d3 100%);
    --gradient-brand-soft: linear-gradient(180deg, rgba(143, 177, 255, 0.14) 0%, rgba(143, 177, 255, 0.03) 100%);
    --focus-ring: 0 0 0 3px rgba(143, 177, 255, 0.24);

    --color-success-soft: #123a2d;
    --color-warning-soft: #4f360c;
    --color-danger-soft: #4a1d1a;
    --color-neutral-soft: #162336;
    --color-info-soft: #122a5c;

    --state-info-bg: #122a5c;
    --state-info-fg: #a8c2ff;
    --state-attention-bg: #4f360c;
    --state-attention-fg: #ffd27a;
    --state-priority-bg: #4d2610;
    --state-priority-fg: #ffbf86;
    --state-priority-border: #7c4520;
    --state-success-bg: #123a2d;
    --state-success-fg: #8fe0bd;
    --state-danger-bg: #4a1d1a;
    --state-danger-fg: #ffb8b1;
    --state-danger-border: #7f3029;
    --state-neutral-bg: #162336;
    --state-neutral-fg: #d0d9e8;
    --state-scheduled-bg: #162336;
    --state-scheduled-fg: #d0d9e8;
    --state-scheduled-border: #2b3b56;
    --state-cancelled-bg: #351f24;
    --state-cancelled-fg: #f0a7a0;
    --state-cancelled-border: #6a3434;
    --state-progress-bg: #122a5c;
    --state-progress-fg: #a8c2ff;
    --state-progress-border: #2f66da;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.34);
    --shadow-md: 0 12px 24px rgba(0,0,0,0.32);
    --shadow-lg: 0 24px 50px rgba(0,0,0,0.4);
    --surface-highlight: inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Dark mode overrides for inline styles */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--color-text-tertiary) !important;
}
[data-theme="dark"] .auth-container {
    background: rgba(15, 23, 40, 0.92);
}
[data-theme="dark"] .modal-content {
    background: var(--color-surface);
}
[data-theme="dark"] .detail-section {
    background: rgba(19, 29, 49, 0.86);
    border-color: var(--color-border);
}
[data-theme="dark"] .detail-section--overview {
    background: var(--main-page-card-bg);
    border-color: var(--main-page-card-border);
}
[data-theme="dark"] .detail-section--secondary {
    background: rgba(19, 29, 49, 0.72);
    border-color: rgba(143, 177, 255, 0.08);
}
[data-theme="dark"] .settings-btn,
[data-theme="dark"] .notification-btn {
    background: rgba(19, 29, 49, 0.88);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}
[data-theme="dark"] .filter-tab.active {
    background: var(--gradient-brand);
    color: var(--color-brand-contrast);
    border-color: transparent;
}
/* Dark mode: Job action buttons */
[data-theme="dark"] .job-action-btn.call {
    background: var(--state-success-bg);
    color: var(--state-success-fg);
}
[data-theme="dark"] .job-action-btn.call:hover {
    background: rgba(18, 58, 45, 0.92);
}
[data-theme="dark"] .job-action-btn.text {
    background: var(--state-info-bg);
    color: var(--state-info-fg);
}
[data-theme="dark"] .job-action-btn.text:hover {
    background: rgba(18, 42, 92, 0.96);
}
[data-theme="dark"] .job-action-btn.complete {
    background: var(--gradient-brand);
    color: var(--color-brand-contrast);
}
/* Dark mode: Followup tip in customer cards */
[data-theme="dark"] .followup-tip {
    background: var(--state-attention-bg);
    color: var(--state-attention-fg);
    border-left-color: var(--state-attention-fg);
}
[data-theme="dark"] .followup-tip.scheduled {
    background: var(--state-success-bg);
    color: var(--state-success-fg);
    border-left-color: var(--state-success-fg);
}
/* Dark mode: Auto-response text */
[data-theme="dark"] .suggested-response {
    color: var(--state-success-fg);
}
/* Dark mode: Lead score pills */
[data-theme="dark"] .lead-score-pill.high {
    background: var(--state-success-bg);
    color: var(--state-success-fg);
}
[data-theme="dark"] .lead-score-pill.medium {
    background: var(--state-attention-bg);
    color: var(--state-attention-fg);
}
[data-theme="dark"] .lead-score-pill.low {
    background: var(--state-neutral-bg);
    color: var(--state-neutral-fg);
}
/* Dark mode: Detail action buttons (voicemail/customer detail views) */
[data-theme="dark"] .detail-action-btn.text {
    background: var(--gradient-brand);
    color: white;
}
/* Dark mode: Status button archive state */
[data-theme="dark"] .status-btn.archive {
    background: var(--state-neutral-bg);
    color: var(--color-text-primary);
}
[data-theme="dark"] .status-btn.archive.selected,
[data-theme="dark"] .status-btn.archive:hover {
    border-color: var(--color-brand);
}
/* Dark mode: Calendar view toggle buttons (Today/Week/Month) */
[data-theme="dark"] .view-toggle-btn {
    color: rgba(246, 249, 255, 0.92);
}
[data-theme="dark"] .view-toggle-btn.active {
    background: var(--gradient-brand);
    color: #ffffff;
}
[data-theme="dark"] .view-toggle-btn:hover {
    color: #ffffff;
}
[data-theme="dark"] .calendar-add-btn {
    color: #ffffff;
}
/* Dark mode: Selected calendar day */
[data-theme="dark"] .calendar-day.selected {
    background: var(--gradient-brand);
    color: var(--color-brand-contrast);
    border-color: transparent;
}
/* Dark mode: Book Appointment button */
[data-theme="dark"] .book-appointment-btn {
    background: var(--gradient-brand) !important;
    color: var(--color-brand-contrast) !important;
}
/* Dark mode: Save notes button */
[data-theme="dark"] .save-notes-btn {
    background: var(--gradient-brand) !important;
    color: #ffffff !important;
}
/* Dark mode: Stat cards when selected */
[data-theme="dark"] .stat-card.selected {
    background: var(--gradient-brand);
    border-color: transparent;
}
[data-theme="dark"] .stat-card.selected .stat-number,
[data-theme="dark"] .stat-card.selected .stat-label {
    color: white;
}
/* Dark mode: Urgency badges */
[data-theme="dark"] .urgency-badge.high {
    background: var(--state-attention-bg);
    color: var(--state-attention-fg);
}
[data-theme="dark"] .urgency-badge.medium {
    background: var(--state-attention-bg);
    color: var(--state-attention-fg);
}
/* Dark mode: Lead badge */
[data-theme="dark"] .lead-badge {
    background: var(--state-success-bg);
    color: var(--state-success-fg);
}
/* Dark mode: Channel badges */
[data-theme="dark"] .channel-badge.voice-ai {
    background: rgba(86, 43, 189, 0.34);
    color: #d4c2ff;
    border-color: rgba(196, 181, 253, 0.18);
}
[data-theme="dark"] .channel-badge.voicemail {
    background: rgba(79, 54, 12, 0.88);
    color: #ffd27a;
    border-color: rgba(255, 210, 122, 0.16);
}
[data-theme="dark"] .channel-badge.booking {
    background: rgba(8, 52, 68, 0.88);
    color: #8ee7ff;
    border-color: rgba(142, 231, 255, 0.14);
}
/* Dark mode: Insight cards with --color-text-primary background */
[data-theme="dark"] .insight-card[style*="background: var(--color-text-primary)"] {
    background: var(--gradient-brand) !important;
}
[data-theme="dark"] .insight-card[style*="background: var(--color-text-primary)"] .insight-card-title,
[data-theme="dark"] .insight-card[style*="background: var(--color-text-primary)"] .insight-subtitle {
    color: rgba(255,255,255,0.82) !important;
}
[data-theme="dark"] .insight-card[style*="background: var(--color-text-primary)"] .insight-big-number {
    color: white !important;
}
/* Dark mode: Interaction type badges */
[data-theme="dark"] .interaction-type.voicemail {
    background: rgba(79, 54, 12, 0.88);
    color: #ffd27a;
    border-color: rgba(255, 210, 122, 0.16);
}
[data-theme="dark"] .interaction-type.voice-ai {
    background: rgba(86, 43, 189, 0.34);
    color: #d4c2ff;
    border-color: rgba(196, 181, 253, 0.18);
}
[data-theme="dark"] .interaction-type.sms {
    background: rgba(18, 42, 92, 0.92);
    color: #a8c2ff;
    border-color: rgba(168, 194, 255, 0.16);
}
[data-theme="dark"] .interaction-type.chat {
    background: rgba(34, 66, 114, 0.82);
    color: #d0defd;
    border-color: rgba(168, 194, 255, 0.16);
}
/* Dark mode: Status badges */
[data-theme="dark"] .status-badge.pending {
    background: var(--state-attention-bg);
    color: var(--state-attention-fg);
}
[data-theme="dark"] .status-badge.confirmed {
    background: var(--state-success-bg);
    color: var(--state-success-fg);
}
[data-theme="dark"] .status-badge.cancelled {
    background: var(--state-cancelled-bg);
    color: var(--state-cancelled-fg);
}
/* Dark mode: Schedule status badges */
[data-theme="dark"] .schedule-status.pending {
    background: var(--state-attention-bg);
    color: var(--state-attention-fg);
}
[data-theme="dark"] .schedule-status.scheduled {
    background: var(--state-success-bg);
    color: var(--state-success-fg);
}
[data-theme="dark"] .schedule-status.completed {
    background: var(--state-danger-bg);
    color: var(--state-danger-fg);
}
/* Dark mode: Spam section */
[data-theme="dark"] #detail-spam-section {
    background: var(--state-danger-bg) !important;
    border-color: var(--state-danger-border) !important;
}
[data-theme="dark"] #detail-spam-section .detail-label {
    color: var(--state-danger-fg) !important;
}
[data-theme="dark"] #detail-spam-reason {
    color: var(--state-danger-fg) !important;
}
/* Dark mode: Pending booking section */
[data-theme="dark"] #detail-pending-section {
    background: rgba(109, 40, 217, 0.14) !important;
    border-color: rgba(167, 139, 250, 0.32) !important;
}
[data-theme="dark"] #detail-pending-section .detail-label {
    color: #d8b4fe !important;
}
[data-theme="dark"] #detail-pending-info {
    color: #d8b4fe !important;
}
/* Dark mode: Settings descriptive text */
[data-theme="dark"] .settings-view span[style*="color: #6b7280"],
[data-theme="dark"] .settings-view p[style*="color: #6b7280"] {
    color: var(--color-text-tertiary) !important;
}
/* Dark mode: Booking URL input and copy button */
[data-theme="dark"] #booking-url-input {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}
[data-theme="dark"] #copy-booking-url-btn {
    background: var(--color-accent) !important;
    color: white !important;
}
/* Dark mode: Job action buttons text colors */
[data-theme="dark"] .job-action-btn.call {
    color: #86efac;
}
[data-theme="dark"] .job-action-btn.text {
    color: #93c5fd;
}

/* Billing buttons dark mode */
[data-theme="dark"] #job-mark-invoice-sent-btn {
    background: var(--gradient-brand);
    color: var(--color-brand-contrast);
}
/* Booking modal dark mode fixes */
[data-theme="dark"] .modal-btn.primary {
    background: var(--gradient-brand);
    color: var(--color-brand-contrast);
}
[data-theme="dark"] .jobs-header-controls .modal-btn.primary,
[data-theme="dark"] .customers-header-controls .modal-btn.primary {
    color: #ffffff;
}
[data-theme="dark"] .modal-btn.primary:hover {
    opacity: 0.94;
}
[data-theme="dark"] .booking-day.selected {
    background: #3b82f6;
    color: white;
}
[data-theme="dark"] .booking-day.has-slots {
    background: rgba(34, 197, 94, 0.2);
}
[data-theme="dark"] .time-slot.selected {
    background: #3b82f6;
    color: white;
}

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

body {
    font-family: var(--app-font-family);
    background: var(--color-bg);
    background-image:
        radial-gradient(900px 520px at 8% -12%, rgba(36, 88, 211, 0.15), transparent 62%),
        radial-gradient(760px 460px at 92% -8%, rgba(83, 148, 255, 0.13), transparent 60%),
        linear-gradient(180deg, #edf5ff 0%, #f5f9ff 42%, var(--color-bg) 100%);
    background-attachment: fixed;
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

button,
input,
select,
textarea,
option,
optgroup,
.modal-btn,
.btn-primary,
.btn-secondary,
.btn-soft,
.btn-danger-soft,
.context-menu-item,
.period-btn,
.jobs-workspace-tab,
.filter-dropdown select,
.job-status-select,
.assigned-to-select,
.form-input,
.form-control,
.native-picker-display,
.native-picker-input,
.toast,
.toast-action,
.app-dialog,
.settings-disclosure-summary {
    font-family: var(--app-font-family);
    letter-spacing: -0.01em;
}

select,
input,
textarea,
.form-input,
.form-control,
.job-status-select,
.assigned-to-select {
    font-size: var(--font-size-base);
    line-height: 1.35;
}

.field-help,
.settings-section-description,
.detail-supporting-text,
.muted-text-sm,
.toast-message,
.app-dialog-details,
.context-menu-item,
.settings-disclosure-meta {
    font-size: var(--font-size-sm);
    line-height: 1.45;
    font-weight: 500;
}

a,
button,
select,
label,
[role="button"],
.touchable,
.activity-card,
.customer-card,
.job-card,
.stat-card,
.nav-item,
.context-menu-item,
.activity-header,
.action-btn,
.call-action-card {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
}

.caller-name,
.customer-name,
.customer-phone,
.customer-meta,
.card-summary,
.card-next-action,
.detail-caller-name,
.detail-caller-phone,
.detail-value,
.job-customer,
.job-address,
.job-address a,
.customer-job-address,
.customer-job-address a,
.job-issue,
.job-notes,
.notification-name,
.notification-preview,
.status-pill,
.interaction-date,
.interaction-summary,
.activity-description,
.conversation-header-name,
.conversation-header-phone,
.message-bubble {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

.caller-name,
.customer-name,
.job-customer {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
[data-theme="dark"] body {
    background-image:
        radial-gradient(860px 520px at 8% -10%, rgba(188, 207, 255, 0.16), transparent 62%),
        radial-gradient(740px 460px at 92% -8%, rgba(102, 151, 255, 0.13), transparent 58%),
        linear-gradient(180deg, #101d31 0%, #0b1627 44%, var(--color-bg) 100%);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Touch-friendly interactive elements */
.touchable {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    transition: transform 0.1s ease, opacity 0.1s ease, background-color 0.15s ease;
}
.touchable:active {
    transform: scale(0.97);
    opacity: 0.85;
}

/* Prevent text selection on interactive items during touch */
button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.btn-primary,
.btn-secondary,
.btn-soft,
.btn-danger-soft,
.btn-outline,
.delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1.2;
    min-height: 48px;
    padding: 11px 16px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--surface-highlight), var(--shadow-sm);
    transition: transform 0.12s ease, opacity 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover,
.btn-secondary:hover,
.btn-soft:hover,
.btn-danger-soft:hover,
.btn-outline:hover,
.delete-btn:hover {
    opacity: 0.95;
    transform: translateY(-1px);
}
.btn-primary:active,
.btn-secondary:active,
.btn-soft:active,
.btn-danger-soft:active,
.btn-outline:active,
.delete-btn:active {
    transform: scale(0.98);
}
.btn-primary {
    background: var(--gradient-brand);
    color: var(--color-brand-contrast);
    border-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-secondary,
.btn-soft {
    background: rgba(255,255,255,0.84);
    color: var(--color-text-primary);
    border-color: var(--color-border);
}
.btn-soft {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border-color: rgba(36, 88, 211, 0.16);
}
[data-theme="dark"] .btn-secondary {
    background: rgba(19, 29, 49, 0.9);
    color: var(--color-text-primary);
    border-color: rgba(143, 177, 255, 0.12);
}
[data-theme="dark"] .btn-soft {
    background: rgba(18, 42, 92, 0.88);
    color: var(--state-info-fg);
    border-color: rgba(143, 177, 255, 0.16);
}
.btn-outline {
    background: transparent;
    color: var(--color-text-secondary);
    border-color: var(--color-border);
    border-style: solid;
}
.btn-danger-soft,
.delete-btn {
    background: var(--state-danger-bg);
    color: var(--state-danger-fg);
    border-color: var(--state-danger-border);
}
.btn-sm {
    padding: 8px 12px;
    min-height: 44px;
}
.btn-md {
    padding: 10px 16px;
    min-height: 44px;
    font-size: var(--font-size-base);
}
.btn-full {
    width: 100%;
    padding: 12px 16px;
    min-height: 48px;
    font-size: var(--font-size-base);
}
.btn-outline-danger {
    color: var(--state-danger-fg);
    border-color: var(--state-danger-border);
    background: transparent;
}
.btn-outline-danger:hover {
    background: var(--state-danger-bg);
}
.btn-session-action {
    background: color-mix(in srgb, var(--color-brand-soft) 66%, var(--main-page-card-bg));
    color: var(--color-brand-strong);
    border-color: color-mix(in srgb, var(--color-brand-muted) 70%, var(--color-border));
    box-shadow: var(--surface-highlight), var(--shadow-sm);
}
.btn-session-action:hover {
    background: color-mix(in srgb, var(--color-brand-soft) 82%, var(--main-page-card-bg-hover));
    border-color: var(--color-brand-muted);
    color: var(--color-brand-strong);
}
[data-theme="dark"] .btn-session-action {
    background: rgba(31, 48, 82, 0.92);
    color: #dce7ff;
    border-color: rgba(143, 177, 255, 0.24);
    box-shadow: var(--surface-highlight), var(--shadow-sm);
}
[data-theme="dark"] .btn-session-action:hover {
    background: rgba(40, 62, 104, 0.96);
    border-color: rgba(143, 177, 255, 0.34);
    color: #ffffff;
}
.btn-primary svg,
.btn-secondary svg,
.btn-soft svg,
.btn-danger-soft svg,
.btn-outline svg,
.delete-btn svg {
    flex-shrink: 0;
}

/* Header - Branded tint without changing layout */
.header {
    background: linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.58) 100%);
    color: var(--color-text-primary);
    padding: 17px 20px 13px;
    padding-top: max(17px, env(safe-area-inset-top));
    position: relative;
    border-bottom: 1px solid var(--color-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.56);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
[data-theme="dark"] .header {
    background: linear-gradient(180deg, rgba(15, 23, 40, 0.88) 0%, rgba(15, 23, 40, 0.72) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}
.logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
}
.logo-icon {
    height: 30px;
    width: auto;
}
.logo-text {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.2;
    color: var(--color-text-primary);
}
.greeting {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.2;
    color: var(--color-text-primary);
}
.business-name {
    font-size: 13px;
    color: var(--color-text-tertiary);
    margin-top: 2px;
    font-weight: 500;
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Compact logo bar for inner views */
.compact-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 16px;
    padding-top: max(6px, env(safe-area-inset-top));
    background: rgba(255,255,255,0.78);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
[data-theme="dark"] .compact-header {
    background: rgba(15, 23, 40, 0.86);
}
.compact-logo {
    cursor: pointer;
    display: flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    padding: 4px 0;
}
.compact-logo svg {
    height: 24px;
    width: auto;
}
.compact-header .header-actions {
    gap: 6px;
}
.compact-header .settings-btn,
.compact-header .notification-btn {
    width: 44px;
    height: 44px;
}

#jobs-view > .compact-header,
#calendar-view > .compact-header,
#customers-view > .compact-header {
    min-height: calc(64px + env(safe-area-inset-top));
    padding: 10px 16px;
    padding-top: max(10px, env(safe-area-inset-top));
    gap: 12px;
}

#jobs-view > .compact-header .compact-logo,
#calendar-view > .compact-header .compact-logo,
#customers-view > .compact-header .compact-logo {
    flex: 0 0 auto;
    min-width: 0;
}

#jobs-view > .compact-header .compact-logo svg,
#calendar-view > .compact-header .compact-logo svg,
#customers-view > .compact-header .compact-logo svg {
    height: 23px;
    max-width: 142px;
}
.compact-header .settings-btn svg,
.compact-header .notification-btn svg {
    width: 18px;
    height: 18px;
}

.notification-wrapper {
    position: relative;
}
.settings-btn,
.notification-btn {
    width: 46px;
    height: 46px;
    background: var(--main-page-card-bg);
    border: 1px solid var(--main-page-card-border);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-secondary);
    box-shadow: var(--surface-highlight), var(--shadow-sm);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast);
    position: relative;
}
.settings-btn:hover,
.notification-btn:hover {
    background: var(--main-page-card-bg-hover);
    border-color: var(--color-brand-muted);
    color: var(--color-accent);
}
.settings-btn:active,
.notification-btn:active {
    transform: scale(0.97);
}
.settings-btn svg,
.notification-btn svg { width: 19px; height: 19px; }

/* Notification Badge */
.notification-badge {
    position: absolute;
    top: 7px;
    right: 7px;
    background: var(--color-danger);
    width: 10px;
    height: 10px;
    border-radius: 999px;
    box-shadow: 0 0 0 2px var(--color-surface), 0 4px 10px rgba(217, 45, 32, 0.24);
}
.notification-badge.hidden { display: none; }
[data-theme="dark"] .notification-badge {
    box-shadow: 0 0 0 2px rgba(15, 23, 40, 0.92), 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Notification Overlay */
.notification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s, visibility 0.2s;
}
.notification-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Notification Dropdown - Fixed position */
.notification-dropdown {
    position: fixed;
    top: 70px;
    right: 20px;
    width: 320px;
    max-width: calc(100vw - 40px);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--surface-highlight), var(--shadow-lg), 0 0 0 1px rgba(17, 34, 68, 0.06);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transition: opacity var(--motion-fast), visibility var(--motion-fast), transform var(--motion-base);
}
.notification-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.notification-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border-subtle);
}
.notification-dropdown-title {
    font-weight: 700;
    font-size: 16px;
    color: var(--color-text-primary);
}
.notification-clear-btn {
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    color: var(--color-text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
}
.notification-clear-btn:hover {
    background: var(--color-brand-soft);
    border-color: var(--color-brand-muted);
    color: var(--color-accent);
}
.notification-clear-btn:active {
    transform: scale(0.97);
}
[data-theme="dark"] .notification-clear-btn {
    background: rgba(18, 28, 45, 0.92);
    border-color: rgba(143, 177, 255, 0.18);
    color: var(--color-text-secondary);
}
[data-theme="dark"] .notification-clear-btn:hover {
    background: rgba(18, 42, 92, 0.72);
    border-color: rgba(143, 177, 255, 0.34);
    color: #dbe7ff;
}
.notification-list {
    max-height: 360px;
    overflow-y: auto;
}
.notification-item {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background-color var(--motion-fast);
    border-bottom: 1px solid var(--color-border-subtle);
}
.notification-item:last-child {
    border-bottom: none;
}
.notification-item:hover {
    background: var(--color-bg);
}
.notification-item:active {
    background: var(--color-border-subtle);
}
.notification-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text-primary);
    flex-shrink: 0;
    margin-top: 6px;
}
.notification-content {
    flex: 1;
    min-width: 0;
}
.notification-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}
.notification-date {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-tertiary);
    margin-bottom: 8px;
}
.notification-action {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin-bottom: 6px;
    padding: 3px 9px;
    border-radius: var(--radius-xl);
    background: var(--state-attention-bg);
    color: var(--state-attention-fg);
    border: 1px solid rgba(183, 121, 31, 0.18);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}
.notification-preview {
    font-size: 14px;
    color: var(--color-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.notification-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.notification-priority-tag {
    min-height: 26px;
    padding: 4px 9px;
    line-height: 1.15;
    white-space: nowrap;
}
.notification-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--color-text-tertiary);
}
.notification-empty svg {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
    opacity: 0.4;
}
.notification-empty-text {
    font-size: 14px;
}

/* Stats Cards - Clean, minimal */
.stats-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}
.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--main-page-card-bg);
    border: 1px solid var(--main-page-card-border);
    border-radius: var(--radius-md);
    min-height: 80px;
    padding: 14px 12px;
    text-align: center;
    box-shadow: var(--main-page-card-shadow);
    transition: transform var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast);
    cursor: pointer;
}
.stat-card--today-brief {
    align-items: flex-start;
    justify-content: space-between;
    text-align: left;
    padding: 16px;
    min-height: 112px;
    cursor: default;
}
.stat-card--today-brief:hover {
    border-color: var(--main-page-card-border);
    background: var(--main-page-card-bg);
}
.home-brief-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 114px;
    margin-bottom: 0;
    padding: 22px 62px 22px 22px;
    overflow: hidden;
    border-radius: calc(var(--radius-md) + 4px);
    border: 1px solid var(--main-page-card-border);
    background:
        linear-gradient(135deg, rgba(82, 126, 226, 0.15), rgba(82, 126, 226, 0.02) 42%, transparent 70%),
        var(--main-page-card-bg);
    box-shadow: var(--main-page-card-shadow);
}
.home-brief-info {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid color-mix(in srgb, var(--color-brand) 18%, var(--main-page-card-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-brand) 7%, var(--main-page-card-bg));
    color: var(--color-brand);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.home-brief-info span {
    display: block;
    transform: translateY(1px);
    font-size: 18px;
    font-weight: 700;
    font-family: var(--app-font-family);
    line-height: 1;
}
.home-brief-info:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-brand) 54%, transparent);
    outline-offset: 3px;
}
.home-brief-main {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    border-radius: calc(var(--radius-md) - 4px);
    cursor: pointer;
    touch-action: manipulation;
}
.home-brief-main:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-brand) 54%, transparent);
    outline-offset: 5px;
}
.today-brief-title {
    color: var(--color-text-primary);
    max-width: 94%;
    font-size: clamp(20px, 4.7vw, 27px);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.14;
    margin-top: 0;
}
.today-brief-summary {
    color: var(--color-text-secondary);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.36;
    margin-top: 10px;
}
.home-week-proof {
    margin-top: 16px;
    color: var(--color-brand);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.34;
    letter-spacing: -0.01em;
}
.stat-card:hover {
    border-color: var(--color-brand-muted);
    background: var(--main-page-card-bg-hover);
}
.stat-card:active {
    transform: scale(0.985);
}
.stat-card.selected {
    background: var(--gradient-brand);
    border-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}
.stat-card.selected .stat-number,
.stat-card.selected .stat-label,
.stat-card.selected .stat-sublabel {
    color: white;
}
.stat-number {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 1;
    color: var(--color-text-primary);
}
.stat-number--time {
    font-size: 24px;
    letter-spacing: -0.03em;
    line-height: 1.1;
}
.stat-number.attention {
    color: var(--color-warning);
}
.stat-number.booked {
    color: var(--color-success);
}
.stat-card--insight .stat-number {
    color: var(--color-accent);
}
.stat-label {
    font-size: 13px;
    color: var(--color-text-tertiary);
    margin-top: 6px;
    font-weight: 600;
}
.stat-sublabel {
    font-size: 11px;
    color: var(--color-text-tertiary);
    margin-top: 2px;
    line-height: 1.2;
}
[data-theme="dark"] .stat-sublabel {
    color: var(--color-text-secondary);
}
[data-theme="dark"] .stat-card--insight .stat-number {
    color: var(--color-brand);
}
[data-theme="dark"] .home-brief-panel {
    background:
        linear-gradient(135deg, rgba(98, 137, 236, 0.18), rgba(98, 137, 236, 0.04) 42%, transparent 72%),
        var(--main-page-card-bg);
}
[data-theme="dark"] .home-brief-info {
    border-color: rgba(156, 184, 255, 0.22);
    background: rgba(98, 137, 236, 0.1);
    color: #aac2ff;
}
[data-theme="dark"] .stat-card,
[data-theme="dark"] .insights-banner {
    background: var(--main-page-card-bg);
    border-color: var(--main-page-card-border);
    box-shadow: var(--main-page-card-shadow);
}
[data-theme="dark"] .stat-card:hover,
[data-theme="dark"] .insights-banner:hover {
    background: var(--main-page-card-bg-hover);
    border-color: var(--color-brand-muted);
}
[data-theme="dark"] .insights-content svg,
[data-theme="dark"] .insights-text,
[data-theme="dark"] .insights-arrow {
    color: var(--color-text-secondary);
}

/* Insights Banner */
.insights-banner {
    background: var(--main-page-card-bg);
    border: 1px solid var(--main-page-card-border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    box-shadow: var(--main-page-card-shadow);
    transition: background-color var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast);
}
.insights-banner:hover {
    border-color: var(--color-brand-muted);
}
.insights-banner:active {
    background: var(--color-accent-soft);
}
.insights-content {
    display: flex;
    align-items: center;
    gap: 10px;
}
.insights-content svg {
    color: var(--color-text-secondary);
}
.insights-text {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-secondary);
}
.insights-value {
    font-weight: 600;
    color: var(--color-text-primary);
}
.insights-arrow {
    color: var(--color-text-tertiary);
    font-size: 16px;
}

/* Main Content */
.content {
    padding: 24px 20px;
    padding-top: 22px;
}
#main-view > .content:first-of-type {
    padding-top: 9px;
}

/* Section Header */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.section-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-primary);
    letter-spacing: -0.4px;
}
.section-subtitle {
    margin-top: 3px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.35;
}
.section-subtitle:empty,
.section-subtitle[hidden] {
    display: none;
}

/* Sort Selector */
.sort-selector {
    position: relative;
    display: block;
    font-size: 13px;
    color: var(--color-text-tertiary);
}
.sort-selector select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--main-page-card-bg);
    border: 1px solid var(--main-page-card-border);
    border-radius: 16px;
    min-height: 44px;
    padding: 10px 36px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    cursor: pointer;
    box-shadow: var(--surface-highlight), var(--shadow-sm);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background-image: none;
    transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
    text-align: center;
    text-align-last: center;
    -moz-text-align-last: center;
}
.sort-selector select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}
.sort-selector--chip::before,
.sort-selector--chip::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.sort-selector--chip::before {
    left: 12px;
    width: 14px;
    height: 14px;
    opacity: 0.78;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}
.sort-selector--chip::after {
    right: 12px;
    width: 10px;
    height: 10px;
    opacity: 0.72;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238899a8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}
.sort-selector--sort::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5h10'/%3E%3Cpath d='M11 12h7'/%3E%3Cpath d='M11 19h4'/%3E%3Cpath d='M4 7l2-2 2 2'/%3E%3Cpath d='M6 5v14'/%3E%3C/svg%3E");
}
.sort-selector--filter::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='3 4 21 4 14 12 14 19 10 21 10 12 3 4'/%3E%3C/svg%3E");
}

/* Filter Dropdowns - Pill Style */
.filter-dropdowns {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: stretch;
}
.filter-dropdown {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}
.filter-dropdown--status {
    flex: 1 1 100%;
}
.filter-dropdown::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}
.filter-dropdown::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 12px;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0;
}
.filter-dropdown select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background: var(--main-page-card-bg);
    border: 1px solid var(--main-page-card-border);
    border-radius: 16px;
    min-height: 44px;
    padding: 9px 30px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    cursor: pointer;
    touch-action: manipulation;
    box-shadow: var(--surface-highlight), var(--shadow-sm);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background-image: none;
    transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
    text-align: center;
    text-align-last: center;
    -moz-text-align-last: center;
}
.filter-dropdown--status select {
    min-height: 56px;
    padding: 13px 42px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.filter-dropdown select:hover {
    border-color: var(--color-brand-muted);
    box-shadow: var(--shadow-sm);
}
.filter-dropdown select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}
.filter-dropdown select.active {
    background: var(--gradient-brand);
    border-color: transparent;
    color: white;
    box-shadow: none;
    animation: none;
}
.filter-dropdown:has(select.active)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
[data-theme="dark"] .filter-dropdown select {
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
[data-theme="dark"] .filter-dropdown select:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
[data-theme="dark"] .filter-dropdown select.active {
    box-shadow: none;
}

/* Filter Tabs - pill style */
.filter-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab {
    padding: 10px 20px;
    border-radius: var(--radius-xl);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    box-shadow: none;
    transition: transform 0.1s ease, background-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.filter-tab:hover {
    background: var(--color-bg);
    border-color: var(--color-border);
}
.filter-tab:active {
    transform: scale(0.96);
}
.filter-tab.active {
    background: var(--gradient-brand);
    color: white;
    border-color: transparent;
    box-shadow: none;
}

/* Billing sub-filter buttons */
.payment-filter-btn {
    min-height: 42px;
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 100px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
}
.payment-filter-btn:hover {
    background: var(--color-bg);
    border-color: var(--color-text-tertiary);
}
.payment-filter-btn.active {
    background: var(--color-brand-soft);
    color: var(--color-brand);
    border-color: var(--color-brand);
}
.payment-filter-btn[data-payment-filter="unpaid"].active {
    background: var(--color-warning-soft);
    color: var(--color-warning);
    border-color: var(--color-warning);
}
.payment-filter-btn[data-payment-filter="paid"].active {
    background: var(--color-success-soft);
    color: var(--color-success);
    border-color: var(--color-success);
}
.payment-filter-row {
    padding: 8px 0 4px;
}
.payment-filter-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Activity List */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.activity-list .job-card {
    margin-bottom: 0;
}

/* Activity Card - Clean, minimal */
.activity-card {
    background: var(--main-page-card-bg);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--main-page-card-border);
    box-shadow: var(--main-page-card-shadow);
    transition: transform var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast);
    position: relative;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.activity-card:hover {
    border-color: var(--color-brand-muted);
    background: var(--main-page-card-bg-hover);
    box-shadow: var(--shadow-md);
}
.activity-card:active {
    transform: scale(0.985);
}
.activity-card-inner {
    min-height: 150px;
    padding: 22px 20px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    position: relative;
}
.activity-group-header {
    margin: 18px 2px 8px;
    padding: 0 2px;
}
.activity-group-header:first-child {
    margin-top: 0;
}
.activity-group-title {
    color: var(--color-text-primary);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.4px;
    line-height: 1.2;
}
.activity-group-subtitle {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    line-height: 1.35;
    margin-top: 2px;
}

/* Card Content */
.card-content { flex: 1; min-width: 0; }
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.card-header-left { flex: 1; min-width: 0; }
.caller-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--color-text-primary);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    flex-wrap: wrap;
}
.card-time {
    font-size: 13px;
    color: var(--color-text-secondary);
    font-weight: 500;
}
.card-summary {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: 8px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-badges {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 12px;
    max-width: 100%;
    overflow: hidden;
}
.activity-card .card-badges,
.customer-card .card-badges {
    gap: 6px;
    padding-right: 0;
}
.job-card .card-badges {
    gap: 6px;
}
.card-tag {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    max-width: min(100%, 180px);
    padding: 5px 10px;
    border-radius: var(--radius-xl);
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
    min-width: 0;
}
.card-badges .card-tag {
    max-width: calc((100% - 16px) / 3);
}
.card-badges:not(:has(.card-tag:nth-child(3))) .card-tag {
    max-width: calc((100% - 8px) / 2);
}
.activity-card .card-tag,
.customer-card .card-tag,
.job-card .card-tag {
    min-height: 26px;
    padding: 4px 9px;
    line-height: 1.15;
}
.card-tag--neutral {
    background: var(--state-neutral-bg);
    color: var(--state-neutral-fg);
    border-color: var(--state-scheduled-border);
}
.card-tag--attention {
    background: var(--state-attention-bg);
    color: var(--state-attention-fg);
    border-color: rgba(183, 121, 31, 0.18);
}
.card-tag--priority {
    background: var(--state-priority-bg);
    color: var(--state-priority-fg);
    border-color: var(--state-priority-border);
}
.card-tag--danger {
    background: var(--state-danger-bg);
    color: var(--state-danger-fg);
    border-color: var(--state-danger-border);
}
.card-tag--scheduled {
    background: var(--state-scheduled-bg);
    color: var(--state-scheduled-fg);
    border-color: var(--state-scheduled-border);
}
.card-tag--info {
    background: var(--state-info-bg);
    color: var(--state-info-fg);
    border-color: rgba(36, 88, 211, 0.18);
}
.card-tag--service {
    background: rgba(36, 88, 211, 0.1);
    border-color: rgba(36, 88, 211, 0.22);
}
.card-tag--context {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.08);
}
.card-tag--trust {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.card-tag--success {
    background: var(--state-success-bg);
    color: var(--state-success-fg);
    border-color: rgba(23, 155, 99, 0.18);
}
.card-tag--next-reply {
    background: rgba(36, 88, 211, 0.12);
    color: #2458d3;
    border-color: rgba(36, 88, 211, 0.28);
}
.card-tag--next-approval {
    background: rgba(124, 58, 237, 0.12);
    color: #6d28d9;
    border-color: rgba(124, 58, 237, 0.26);
}
.card-tag--next-review {
    background: rgba(183, 121, 31, 0.13);
    color: var(--state-attention-fg);
    border-color: rgba(183, 121, 31, 0.26);
}
.card-tag--next-callback {
    background: rgba(21, 128, 61, 0.12);
    color: #15803d;
    border-color: rgba(21, 128, 61, 0.24);
}
.card-tag--next-billing {
    background: rgba(161, 98, 7, 0.13);
    color: #a16207;
    border-color: rgba(161, 98, 7, 0.28);
}
.card-tag--next-complete {
    background: rgba(22, 163, 74, 0.1);
    color: var(--state-success-fg);
    border-color: rgba(22, 163, 74, 0.22);
}
.card-tag--source {
    background: var(--color-brand-soft);
    color: var(--color-brand);
    border-color: var(--color-brand-muted);
}
[data-theme="dark"] .card-tag--attention {
    border-color: rgba(255, 210, 122, 0.22);
}
[data-theme="dark"] .card-tag--priority {
    border-color: var(--state-priority-border);
}
[data-theme="dark"] .card-tag--service {
    background: rgba(54, 109, 237, 0.2);
    border-color: rgba(143, 177, 255, 0.3);
}
[data-theme="dark"] .card-tag--context {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .card-tag--next-reply {
    background: rgba(96, 165, 250, 0.18);
    color: #bfdbfe;
    border-color: rgba(147, 197, 253, 0.34);
}
[data-theme="dark"] .card-tag--next-approval {
    background: rgba(167, 139, 250, 0.18);
    color: #ddd6fe;
    border-color: rgba(196, 181, 253, 0.34);
}
[data-theme="dark"] .card-tag--next-review {
    background: rgba(245, 158, 11, 0.18);
    color: #fde68a;
    border-color: rgba(251, 191, 36, 0.32);
}
[data-theme="dark"] .card-tag--next-callback {
    background: rgba(34, 197, 94, 0.18);
    color: #bbf7d0;
    border-color: rgba(74, 222, 128, 0.32);
}
[data-theme="dark"] .card-tag--next-billing {
    background: rgba(217, 119, 6, 0.2);
    color: #fed7aa;
    border-color: rgba(251, 146, 60, 0.34);
}
[data-theme="dark"] .card-tag--next-complete {
    background: rgba(22, 163, 74, 0.18);
    color: #bbf7d0;
    border-color: rgba(74, 222, 128, 0.28);
}
[data-theme="dark"] .card-tag--source {
    background: rgba(143, 177, 255, 0.12);
    color: var(--color-brand);
    border-color: rgba(143, 177, 255, 0.24);
}

/* Action Buttons */
.card-actions {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.action-btn {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--surface-highlight), var(--shadow-sm);
    transition: opacity var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast);
}
.action-btn:hover {
    opacity: 0.94;
    transform: translateY(-1px);
}
.action-btn:active {
    opacity: 0.82;
    transform: scale(0.97);
}
.action-btn.call {
    background: var(--color-success);
    color: white;
}
.action-btn.call svg { width: 17px; height: 17px; }
.action-btn.text {
    background: var(--gradient-brand);
    border-color: rgba(82, 126, 226, 0.2);
    color: white;
}
.action-btn.text:hover {
    border-color: rgba(82, 126, 226, 0.32);
    opacity: 0.96;
}
.action-btn.more {
    background: var(--main-page-card-bg);
    color: var(--color-text-secondary);
    border-color: var(--main-page-card-border);
}
.action-btn.more:hover {
    background: var(--main-page-card-bg-hover);
    border-color: var(--color-brand-muted);
    color: var(--color-accent);
    opacity: 1;
}
.action-btn.more svg {
    width: 17px;
    height: 17px;
}
[data-theme="dark"] .action-btn.more {
    background: rgba(23, 35, 58, 0.86);
    color: var(--color-text-secondary);
    border-color: rgba(143, 177, 255, 0.16);
}
[data-theme="dark"] .action-btn.text {
    background: var(--gradient-brand);
    color: #ffffff;
    border-color: transparent;
}

/* Detail View */
.detail-view {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg);
    z-index: 100;
    overflow: hidden;
    height: 100dvh;
}
.detail-view.active {
    display: flex;
    flex-direction: column;
}
.customer-detail-view {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg);
    z-index: 100;
    overflow: hidden;
    height: 100dvh;
}
.customer-detail-view.active {
    display: flex;
    flex-direction: column;
}
.detail-view .detail-header {
    flex-shrink: 0;
}
.detail-header {
    background: var(--color-surface);
    color: var(--color-text-primary);
    padding: 16px 20px;
    padding-top: max(16px, env(safe-area-inset-top));
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--color-border);
}
.back-btn {
    background: var(--main-page-card-bg);
    border: 1px solid var(--main-page-card-border);
    color: var(--color-text-secondary);
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--surface-highlight), var(--shadow-sm);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast);
}
.back-btn:hover {
    background: var(--main-page-card-bg-hover);
    border-color: var(--color-brand-muted);
    color: var(--color-accent);
    transform: translateY(-1px);
}
.back-btn:active {
    transform: scale(0.97);
}
.back-btn svg { width: 20px; height: 20px; }
.detail-header .back-btn {
    order: 2;
    flex-shrink: 0;
    margin-left: auto;
}
.detail-caller {
    flex: 1;
    min-width: 0;
    order: 1;
}
.detail-caller-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
}
.detail-caller-phone {
    font-size: 15px;
    color: var(--color-text-tertiary);
    margin-top: 2px;
}
.job-detail-phone {
    font-size: 15px;
    color: var(--color-text-secondary);
    text-decoration: none;
    display: block;
    margin-top: 2px;
}
.job-detail-phone:hover {
    color: var(--color-accent);
    text-decoration: underline;
}
.detail-content {
    padding: 20px;
    padding-bottom: calc(var(--detail-actions-height) + 28px + env(safe-area-inset-bottom));
}
.detail-view .detail-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-bottom: 24px;
}
.customer-detail-view .detail-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-bottom: 24px;
}
.detail-section {
    background: var(--main-page-card-bg);
    border-radius: var(--radius-md);
    padding: 18px;
    margin-bottom: 14px;
    border: 1px solid var(--main-page-card-border);
    box-shadow: var(--surface-highlight), var(--main-page-card-shadow);
}
.detail-section--overview {
    padding: 20px;
    border-color: var(--main-page-card-border);
    background: var(--main-page-card-bg);
    box-shadow: var(--surface-highlight), var(--main-page-card-shadow);
}
.detail-section--primary-actions {
    border-color: rgba(82, 126, 226, 0.2);
}
.detail-section--secondary {
    background: var(--main-page-card-bg);
    border-color: var(--main-page-card-border);
    box-shadow: var(--surface-highlight), var(--shadow-sm);
}
.detail-disclosure {
    margin-bottom: 14px;
    border: 1px solid var(--main-page-card-border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--main-page-card-bg) 86%, transparent);
    box-shadow: var(--surface-highlight), var(--shadow-sm);
    overflow: hidden;
}
.detail-disclosure-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    padding: 14px 18px;
    color: var(--color-text-primary);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.detail-disclosure-summary::-webkit-details-marker {
    display: none;
}
.detail-disclosure-summary::after {
    content: '';
    width: 9px;
    height: 9px;
    margin-left: 2px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: 0.68;
    transform: rotate(45deg);
    transition: transform var(--motion-fast), opacity var(--motion-fast);
}
.detail-disclosure[open] .detail-disclosure-summary::after {
    transform: rotate(225deg);
    opacity: 1;
}
.detail-disclosure-meta {
    margin-left: auto;
    color: var(--color-text-tertiary);
    font-size: 0.78rem;
    font-weight: 500;
}
.detail-disclosure-body {
    padding: 0 14px 14px;
}
.detail-disclosure-body .detail-section {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--color-border-subtle);
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 10px;
    padding: 14px 0;
}
.detail-disclosure-body .detail-section:first-child {
    border-top: 0;
    padding-top: 4px;
}
.detail-disclosure-body .detail-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}
.detail-disclosure[open] .transcript-box {
    display: block;
}
.detail-more-label {
    margin: 2px 2px 8px;
    color: var(--color-text-tertiary);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.detail-field-list {
    display: grid;
    gap: 2px;
}
.detail-field-row {
    display: grid;
    grid-template-columns: minmax(72px, 0.32fr) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--color-border-subtle);
}
.detail-field-row:first-child {
    border-top: 0;
    padding-top: 2px;
}
.detail-field-row:last-child {
    padding-bottom: 0;
}
.detail-field-label {
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}
.customer-detail-collapsible,
.communications-list,
.detail-disclosure-body {
    transition: max-height var(--motion-base), opacity var(--motion-fast);
}
.activity-header + .customer-detail-collapsible:not(.collapsed) {
    margin-top: 12px;
}
.customer-detail-collapsible.collapsed {
    display: none;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}
.communications-list.collapsed,
.detail-disclosure-body.collapsed {
    display: none;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
}
.detail-disclosure-body {
    margin-top: 12px;
}
.detail-section--subdivided {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border-subtle);
}
.detail-label {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: none;
    letter-spacing: 0.01em;
    margin-bottom: 8px;
}
.detail-helper-text {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.45;
    margin: -2px 0 12px;
    max-width: 54ch;
}
.detail-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    max-height: 64px;
    overflow: hidden;
}
.detail-trust-badges .card-tag {
    max-width: min(100%, 188px);
    flex: 0 1 auto;
}
.detail-trust-badges.card-badges .card-tag {
    max-width: min(100%, 188px);
}
.detail-call-meta {
    color: var(--color-text-secondary);
}
.detail-subsection {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border-subtle);
}
.detail-value {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    line-height: 1.5;
    min-width: 0;
}
.detail-row-between {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.detail-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.detail-inline-badge {
    margin-right: 8px;
}
.inline-action-link {
    font-size: 12px;
    color: var(--color-text-tertiary);
    margin-left: 8px;
    display: none;
    font-weight: 600;
    text-decoration: none;
}
.inline-action-link:hover {
    color: var(--color-accent);
}
.detail-supporting-text {
    font-size: 15px;
    color: var(--color-text-secondary);
    line-height: 1.45;
}
.settings-header {
    padding-bottom: 20px;
}
.settings-section-block {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border-subtle);
}
.settings-section-block--framed {
    margin: 24px 0;
    padding: 24px 0;
    border-top: 1px solid var(--color-border-subtle);
    border-bottom: 1px solid var(--color-border-subtle);
}
.settings-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.settings-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--font-size-lg);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}
.settings-section-title:last-child {
    margin-bottom: 0;
}
.settings-section-title__label {
    min-width: 0;
}
.section-title-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(36, 88, 211, 0.14);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.74) 100%),
        var(--icon-bg, var(--gradient-brand-soft));
    color: var(--icon-fg, var(--color-accent));
    box-shadow: 0 10px 20px rgba(36, 88, 211, 0.08);
}
.section-title-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}
.section-title-icon--billing {
    --icon-bg: linear-gradient(180deg, rgba(36, 88, 211, 0.14) 0%, rgba(36, 88, 211, 0.06) 100%);
    --icon-fg: #2458d3;
}
.section-title-icon--profile {
    --icon-bg: linear-gradient(180deg, rgba(22, 163, 74, 0.15) 0%, rgba(22, 163, 74, 0.06) 100%);
    --icon-fg: #15803d;
}
.section-title-icon--greeting {
    --icon-bg: linear-gradient(180deg, rgba(249, 115, 22, 0.15) 0%, rgba(249, 115, 22, 0.05) 100%);
    --icon-fg: #c2410c;
}
.section-title-icon--calls {
    --icon-bg: linear-gradient(180deg, rgba(8, 145, 178, 0.15) 0%, rgba(8, 145, 178, 0.05) 100%);
    --icon-fg: #0f766e;
}
.section-title-icon--ai {
    --icon-bg: linear-gradient(180deg, rgba(124, 58, 237, 0.16) 0%, rgba(124, 58, 237, 0.05) 100%);
    --icon-fg: #6d28d9;
}
.section-title-icon--booking {
    --icon-bg: linear-gradient(180deg, rgba(2, 132, 199, 0.15) 0%, rgba(2, 132, 199, 0.05) 100%);
    --icon-fg: #0369a1;
}
.section-title-icon--reviews {
    --icon-bg: linear-gradient(180deg, rgba(234, 179, 8, 0.18) 0%, rgba(234, 179, 8, 0.06) 100%);
    --icon-fg: #a16207;
}
.section-title-icon--campaigns {
    --icon-bg: linear-gradient(180deg, rgba(236, 72, 153, 0.16) 0%, rgba(236, 72, 153, 0.05) 100%);
    --icon-fg: #be185d;
}
.section-title-icon--appearance {
    --icon-bg: linear-gradient(180deg, rgba(79, 70, 229, 0.16) 0%, rgba(79, 70, 229, 0.05) 100%);
    --icon-fg: #4f46e5;
}
.section-title-icon--team {
    --icon-bg: linear-gradient(180deg, rgba(20, 184, 166, 0.16) 0%, rgba(20, 184, 166, 0.05) 100%);
    --icon-fg: #0f766e;
}
.section-title-icon--security {
    --icon-bg: linear-gradient(180deg, rgba(220, 38, 38, 0.14) 0%, rgba(220, 38, 38, 0.05) 100%);
    --icon-fg: #b91c1c;
}
[data-theme="dark"] .section-title-icon {
    background:
        linear-gradient(180deg, rgba(19, 29, 49, 0.96) 0%, rgba(12, 21, 37, 0.86) 100%),
        var(--icon-bg, var(--gradient-brand-soft));
    border-color: rgba(143, 177, 255, 0.14);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.24);
}
.settings-section-description {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 20px;
    max-width: 52ch;
}
.mfa-method-card {
    padding: 16px;
}
.mfa-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 12px;
}
.mfa-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
    min-width: 0;
}
.mfa-actions .btn-sm {
    min-width: 128px;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
}
.field-help {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.45;
    margin-top: 6px;
}
.field-help--inline {
    margin: 0;
    flex: 1;
}
.field-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}
.field-actions--end {
    justify-content: flex-end;
}
.form-control {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    line-height: 1.45;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.form-control::placeholder {
    color: var(--color-text-tertiary);
}
.form-control:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}
.form-control--select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 38px;
}
.form-control--textarea {
    resize: vertical;
}
.form-control--textarea-lg {
    min-height: 100px;
}
.form-control--textarea-md {
    min-height: 80px;
}
.audio-status {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--main-page-card-border);
    background: var(--main-page-card-bg);
    box-shadow: var(--surface-highlight), var(--shadow-sm);
}
.audio-status--success {
    background: linear-gradient(180deg, rgba(23, 155, 99, 0.1) 0%, rgba(23, 155, 99, 0.04) 100%);
    border-color: rgba(23, 155, 99, 0.18);
}
[data-theme="dark"] .audio-status {
    background: rgba(19, 29, 49, 0.88);
    border-color: var(--color-border);
}
[data-theme="dark"] .audio-status--success {
    background: rgba(18, 58, 45, 0.72);
    border-color: rgba(143, 224, 189, 0.18);
}
.audio-status-badge {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--color-brand-soft);
    color: var(--color-accent);
    border: 1px solid rgba(36, 88, 211, 0.14);
}
.audio-status--success .audio-status-badge {
    background: var(--state-success-bg);
    color: var(--state-success-fg);
    border-color: rgba(23, 155, 99, 0.18);
}
[data-theme="dark"] .audio-status-badge {
    border-color: rgba(143, 177, 255, 0.16);
}
.audio-status-badge svg {
    width: 18px;
    height: 18px;
}
.audio-status-message {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.45;
}
.audio-status-message--success {
    color: var(--state-success-fg);
    font-weight: 600;
}
.upload-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.status-pill--sm {
    padding: 4px 10px;
    font-size: 13px;
}
.status-pill--info {
    background: var(--state-info-bg);
    color: var(--state-info-fg);
}
.status-pill--attention {
    background: var(--state-attention-bg);
    color: var(--state-attention-fg);
}
.status-pill--success {
    background: var(--state-success-bg);
    color: var(--state-success-fg);
}
.status-pill--danger {
    background: var(--state-danger-bg);
    color: var(--state-danger-fg);
}
.status-pill--neutral {
    background: var(--state-neutral-bg);
    color: var(--state-neutral-fg);
    border: 1px solid var(--color-border);
}
.info-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-radius: 12px;
    padding: 12px 16px;
    margin-top: 12px;
    box-shadow: var(--surface-highlight), var(--shadow-sm);
}
.info-banner--danger {
    background: var(--state-danger-bg);
    border: 1px solid var(--state-danger-border);
}
.info-banner__body {
    min-width: 0;
}
.feedback-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(255,255,255,0.4);
}
.feedback-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}
.feedback-icon--danger {
    color: var(--state-danger-fg);
}
[data-theme="dark"] .feedback-icon {
    background: rgba(8, 16, 29, 0.34);
    border-color: rgba(255,255,255,0.12);
}
.info-banner-title {
    color: var(--state-danger-fg);
    font-size: var(--font-size-base);
    font-weight: 600;
}
.info-banner-text {
    color: var(--state-danger-fg);
    font-size: var(--font-size-sm);
    margin-top: 4px;
    line-height: 1.45;
}
.stack-gap-sm {
    display: grid;
    gap: 8px;
}
.stack-gap-bottom-sm {
    margin-bottom: 12px;
}
.stack-gap-md {
    display: grid;
    gap: 12px;
}
.stack-gap-lg {
    display: grid;
    gap: 16px;
}
.section-cta {
    margin-top: 16px;
}
.section-cta-md {
    margin-top: 12px;
}
.section-cta-sm {
    margin-top: 8px;
}
.button-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.button-row > * {
    flex: 1 1 0;
}
.detail-section--danger {
    background: var(--state-danger-bg);
    border-color: var(--state-danger-border);
}
.detail-section--danger .detail-label {
    color: var(--state-danger-fg);
}
.detail-section--danger .detail-value {
    color: var(--state-danger-fg);
}
.detail-section--highlight {
    background: linear-gradient(180deg, rgba(124, 58, 237, 0.08) 0%, rgba(124, 58, 237, 0.04) 100%);
    border-color: rgba(124, 58, 237, 0.22);
}
.detail-section--highlight .detail-label {
    color: #6d28d9;
}
.detail-section--highlight .detail-value {
    color: #5b21b6;
}
[data-theme="dark"] .detail-section--highlight {
    background: rgba(109, 40, 217, 0.14);
    border-color: rgba(167, 139, 250, 0.32);
}
[data-theme="dark"] .detail-section--highlight .detail-label,
[data-theme="dark"] .detail-section--highlight .detail-value {
    color: #d8b4fe;
}
.trust-correction-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 8px;
    margin: 14px 0 2px;
}
.trust-correction-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid rgba(36, 88, 211, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1.2;
    box-shadow: var(--surface-highlight), var(--shadow-sm);
    cursor: pointer;
    transition: transform var(--motion-fast), border-color var(--motion-fast), background-color var(--motion-fast), color var(--motion-fast);
    -webkit-tap-highlight-color: transparent;
}
.trust-correction-btn:active {
    transform: scale(0.98);
}
[data-theme="dark"] .trust-correction-btn {
    border-color: rgba(184, 205, 255, 0.18);
    background: rgba(19, 29, 49, 0.82);
    color: var(--color-text-primary);
}
.detail-section--divider-top {
    border-top: 1px solid var(--color-border);
    padding-top: 16px;
    margin-top: 4px;
}
.detail-section :is(.btn-primary, .btn-secondary, .btn-soft, .btn-danger-soft, .btn-outline, .delete-btn) {
    font-size: var(--font-size-sm);
    font-weight: 600;
    min-height: 44px;
    padding: 9px 14px;
}
.detail-section--action-stack .detail-helper-text {
    margin-bottom: 14px;
}
.call-action-stack {
    display: grid;
    gap: 10px;
}
.call-action-card {
    width: 100%;
    min-height: 72px;
    padding: 14px 16px;
    text-align: left;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 14px;
    border: 1px solid var(--color-border);
    background: rgba(255,255,255,0.9);
    box-shadow: var(--surface-highlight), var(--shadow-sm);
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.call-action-card:hover {
    border-color: var(--color-brand-muted);
    box-shadow: var(--surface-highlight), var(--shadow-md);
}
.call-action-card:active {
    transform: scale(0.985);
}
.call-action-card .status-choice-title {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
}
.call-action-card .status-choice-text {
    font-size: 13px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.82);
}
.call-action-card--primary {
    border-color: rgba(255, 255, 255, 0.16);
    background: var(--gradient-brand);
    color: #ffffff;
}
.call-action-card--primary .status-choice-title,
.call-action-card--primary .status-choice-text {
    color: #ffffff;
}
.status-btn.status-choice.handled.call-action-card {
    border-color: rgba(255, 255, 255, 0.16);
    background: #14845a;
    color: #ffffff;
}
.status-btn.status-choice.handled.call-action-card .status-choice-title,
.status-btn.status-choice.handled.call-action-card .status-choice-text {
    color: #ffffff;
}
.call-action-card--danger {
    border-color: rgba(255, 255, 255, 0.16);
    background: #b8322a;
    color: #ffffff;
}
.call-action-card--danger .status-choice-title,
.call-action-card--danger .status-choice-text {
    color: #ffffff;
}
.call-action-card.status-btn.archive {
    background: #4b5f7a;
    border-color: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    box-shadow: var(--surface-highlight), var(--shadow-sm);
}
.call-action-card.status-btn.archive .status-choice-title {
    color: #ffffff;
}
.call-action-card.status-btn.archive .status-choice-text {
    color: rgba(255, 255, 255, 0.82);
}
.call-action-card.status-btn.archive.selected,
.call-action-card.status-btn.archive:hover {
    background: #40536e;
    border-color: rgba(255, 255, 255, 0.24);
}
[data-theme="dark"] .call-action-card {
    background: rgba(19, 29, 49, 0.93);
    border-color: rgba(143, 177, 255, 0.14);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}
[data-theme="dark"] .call-action-card:hover {
    border-color: rgba(143, 177, 255, 0.26);
}
[data-theme="dark"] .call-action-card--primary {
    background: var(--gradient-brand);
    border-color: rgba(143, 177, 255, 0.26);
}
[data-theme="dark"] .call-action-card--primary .status-choice-title,
[data-theme="dark"] .call-action-card--primary .status-choice-text {
    color: #ffffff;
}
[data-theme="dark"] .status-btn.status-choice.handled.call-action-card {
    background: #14845a;
    border-color: rgba(143, 224, 189, 0.42);
    color: #ffffff;
}
[data-theme="dark"] .status-btn.status-choice.handled.call-action-card .status-choice-title,
[data-theme="dark"] .status-btn.status-choice.handled.call-action-card .status-choice-text {
    color: #ffffff;
}
[data-theme="dark"] .call-action-card--danger {
    background: #b8322a;
    border-color: rgba(248, 113, 113, 0.42);
}
[data-theme="dark"] .call-action-card--danger .status-choice-title,
[data-theme="dark"] .call-action-card--danger .status-choice-text {
    color: #ffffff;
}
[data-theme="dark"] .call-action-card.status-btn.archive {
    background: #4b5f7a;
    border-color: rgba(125, 145, 174, 0.42);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}
[data-theme="dark"] .call-action-card.status-btn.archive .status-choice-title {
    color: #ffffff;
}
[data-theme="dark"] .call-action-card.status-btn.archive .status-choice-text {
    color: rgba(255, 255, 255, 0.82);
}
[data-theme="dark"] .call-action-card.status-btn.archive.selected,
[data-theme="dark"] .call-action-card.status-btn.archive:hover {
    background: #40536e;
    border-color: rgba(128, 159, 220, 0.34);
}
.detail-link-btn {
    justify-content: space-between;
    color: var(--color-text-primary);
}
.detail-inline-link {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}
.detail-address-link {
    color: var(--color-accent);
    text-decoration-thickness: 1.5px;
}
.detail-address-block {
    display: grid;
    gap: 6px;
}
.detail-address-note {
    color: var(--color-text-tertiary);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}
[data-theme="dark"] .detail-address-link {
    color: #e7efff;
    text-decoration-color: rgba(231, 239, 255, 0.62);
}
[data-theme="dark"] .detail-address-note {
    color: #b9c8de;
}
.detail-link-btn__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    width: 100%;
    flex: 1;
}
.detail-link-btn__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}
.detail-link-btn__status {
    flex-shrink: 0;
    justify-self: end;
    max-width: none;
    white-space: nowrap;
    overflow-wrap: normal;
}
.notes-input {
    width: 100%;
}
.detail-section:has(.notes-input) .section-cta-sm {
    width: 100%;
    margin-top: 12px;
}
.top-banner {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-bottom: 1px solid var(--state-danger-border);
    text-align: center;
    box-shadow: var(--surface-highlight);
}
.top-banner__message {
    color: var(--state-danger-fg);
    font-size: var(--font-size-sm);
    font-weight: 600;
}
.top-banner__action {
    min-height: 40px;
    padding: 8px 14px;
    font-size: var(--font-size-sm);
}
.top-banner--warning {
    background: #fffbeb;
    border-bottom: 2px solid #fde68a;
    z-index: 999;
}
.top-banner__message--warning {
    color: #92400e;
    font-size: 13px;
    font-weight: 500;
}
.muted-text {
    color: var(--color-text-secondary);
}
.icon-muted {
    opacity: 0.7;
}
.field-help--spaced-sm {
    margin-top: 8px;
}
.field-help--spaced-md {
    margin-top: 12px;
}
.flex-fill {
    flex: 1 1 0;
    min-width: 0;
}
.detail-label--between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.detail-label--flush {
    margin-bottom: 0;
}
.detail-section--inline-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 48%);
    align-items: center;
    gap: 14px;
}
.detail-caller-link {
    color: var(--color-text-secondary);
    text-decoration: none;
    cursor: pointer;
}
.detail-caller-link:hover,
.detail-caller-link:focus-visible {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.job-payment-section {
    background: var(--main-page-card-bg);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-top: 4px;
    border: 1px solid var(--main-page-card-border);
    box-shadow: var(--surface-highlight), var(--shadow-sm);
}
.job-payment-section .button-row > button,
.job-payment-section .btn-primary,
.job-payment-section .btn-secondary,
.job-payment-section .btn-soft,
.job-payment-section .btn-danger-soft,
.job-payment-section .btn-outline {
    font-size: var(--font-size-sm);
    min-height: 42px;
    padding: 9px 14px;
}
.job-reschedule-btn {
    background: var(--state-info-bg);
    color: var(--state-info-fg);
    border-color: rgba(36, 88, 211, 0.22);
}
.job-reschedule-btn:hover {
    background: rgba(36, 88, 211, 0.14);
    border-color: rgba(36, 88, 211, 0.3);
}
[data-theme="dark"] .job-reschedule-btn {
    background: rgba(18, 42, 92, 0.94);
    color: #dbe7ff;
    border-color: rgba(143, 177, 255, 0.22);
}
[data-theme="dark"] .job-reschedule-btn:hover {
    background: rgba(24, 54, 116, 0.98);
    border-color: rgba(143, 177, 255, 0.3);
}
.communications-list {
    max-height: 200px;
    overflow-y: auto;
}
.btn-icon-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.calendar-fixed-section {
    flex-shrink: 0;
}
.manual-job-customer-row {
    display: grid;
    grid-template-columns: minmax(0, 65fr) minmax(84px, 35fr);
    gap: 8px;
}
.manual-job-customer-select {
    min-width: 0;
}
.manual-new-customer-btn {
    width: 100%;
    min-width: 0;
    padding: 0 10px;
}
.modal-warning-text,
.form-error-text {
    color: var(--color-danger);
}
.modal-warning-text {
    font-weight: 500;
    margin-bottom: 16px;
}
.form-error-text {
    font-size: 13px;
    margin-top: 8px;
}
.muted-text-sm {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
    line-height: 1.45;
}
.feature-list {
    display: grid;
    gap: 8px;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}
.feature-list__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.feature-list__check {
    color: var(--color-success);
    font-weight: 700;
    flex-shrink: 0;
}
.danger-zone {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
}
.danger-zone__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--state-danger-fg);
    margin-bottom: 16px;
}
.danger-zone__copy {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: 16px;
}
.admin-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
}
.admin-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.admin-toggle-btn {
    min-height: 40px;
    padding: 8px 16px;
}
.admin-panel {
    display: grid;
    gap: 16px;
}
.admin-card {
    background: var(--main-page-card-bg);
    border: 1px solid var(--main-page-card-border);
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: var(--surface-highlight), var(--shadow-sm);
}
[data-theme="dark"] .admin-card {
    background: rgba(19, 29, 49, 0.82);
}
.admin-card__title {
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--color-text-primary);
}
.admin-card__copy {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.45;
}
.admin-business-list {
    display: grid;
    gap: 10px;
    margin-bottom: 20px;
}
.admin-business-card {
    background: var(--main-page-card-bg);
    border: 1px solid var(--main-page-card-border);
    border-radius: 12px;
    padding: 14px;
    box-shadow: var(--surface-highlight), var(--shadow-sm);
}
[data-theme="dark"] .admin-business-card {
    background: rgba(19, 29, 49, 0.84);
}
.admin-business-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.admin-business-card__title {
    font-weight: 700;
    font-size: 15px;
    color: var(--color-text-primary);
}
.admin-business-card__meta {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}
.admin-business-card__meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-secondary);
}
.admin-business-card__meta-label {
    font-weight: 600;
    color: var(--color-text-tertiary);
}
.admin-business-card__status {
    margin-top: 10px;
}
.admin-empty-state {
    padding: 18px;
    border-radius: 12px;
    border: 1px dashed var(--color-border);
    background: var(--main-page-card-bg);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}
[data-theme="dark"] .admin-empty-state {
    background: rgba(19, 29, 49, 0.55);
}
.admin-form {
    display: grid;
    gap: 12px;
}
.admin-form .form-group {
    margin-bottom: 0;
}
.job-payment-amount-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
}
.job-payment-currency {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-secondary);
}
.job-payment-input {
    flex: 1;
    min-height: 48px;
    font-size: 20px;
    font-weight: 700;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text-primary);
}
.job-payment-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}
.job-payment-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-primary);
}
.job-payment-value--success {
    color: var(--color-success);
}
.job-payment-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin-top: 4px;
}
.job-payment-edit-btn {
    margin-top: 12px;
    width: auto;
    min-width: 86px;
}
.job-review-section {
    background: var(--main-page-card-bg);
    margin-top: 4px;
    border: 1px solid var(--main-page-card-border);
    box-shadow: var(--surface-highlight), var(--shadow-sm);
}
.job-review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.job-review-badge {
    display: none;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    align-items: center;
}
.job-review-badge--attention {
    background: var(--state-attention-bg);
    color: var(--state-attention-fg);
    border-color: rgba(183, 121, 31, 0.18);
}
.job-review-badge--success {
    background: var(--state-success-bg);
    color: var(--state-success-fg);
    border-color: rgba(23, 155, 99, 0.18);
}
.job-review-badge--neutral {
    background: var(--state-neutral-bg);
    color: var(--state-neutral-fg);
    border-color: var(--color-border);
}
.job-review-copy {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 8px 0 12px;
}
.job-review-block {
    margin: 8px 0;
}
.job-review-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}
.job-review-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin-top: 4px;
}
.job-review-stars {
    font-size: 28px;
    margin-bottom: 4px;
}
.job-review-google-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: 4px;
    display: none;
}
.review-breakdown-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.review-breakdown-label,
.review-breakdown-count {
    width: 30px;
    font-size: 13px;
}
.review-breakdown-count {
    color: var(--color-text-tertiary);
    text-align: right;
}
.review-breakdown-track {
    flex: 1 1 0;
    min-width: 0;
    height: 8px;
    background: var(--color-border);
    border-radius: 4px;
    overflow: hidden;
}
.review-breakdown-fill {
    height: 100%;
}
.review-breakdown-fill.good {
    background: var(--color-success);
}
.review-breakdown-fill.ok {
    background: var(--color-warning);
}
.review-breakdown-fill.poor {
    background: var(--color-danger);
}
.detail-value.editable-field {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 9px 12px;
    margin: -8px -12px;
    border-radius: 14px;
    border: 1px solid transparent;
    transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
}
.detail-value.editable-field:hover {
    background: var(--main-page-card-bg);
    border-color: var(--main-page-card-border);
}
.detail-value.editable-field:active {
    background: var(--main-page-card-bg-hover);
}
.detail-value.editable-field .edit-icon {
    opacity: 0.72;
    flex-shrink: 0;
    color: var(--color-text-tertiary);
    transition: color var(--motion-fast), opacity var(--motion-fast), transform var(--motion-fast);
}
.detail-value.editable-field:hover .edit-icon {
    opacity: 1;
    color: var(--color-accent);
    transform: translateX(1px);
}
.detail-value.editable-field span {
    flex: 1;
}
.detail-value.editable-field span:empty::before {
    content: 'Add...';
    color: var(--color-text-tertiary);
    font-style: italic;
}

/* Activity Log */
.activity-section {
    margin-top: 16px;
}
.activity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    margin: -6px -8px 0;
    padding: 4px 8px;
    border-radius: 14px;
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
    transition: background-color var(--motion-fast), color var(--motion-fast);
}
.activity-header:hover {
    background: rgba(82, 126, 226, 0.08);
}
.activity-header:active {
    color: var(--color-text-primary);
    background: rgba(82, 126, 226, 0.12);
}
.activity-log {
    max-height: 300px;
    overflow-y: auto;
    margin-top: 12px;
}
.activity-log.collapsed {
    display: none;
}
.activity-entry {
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--color-bg-tertiary);
    border-radius: 8px;
}
.activity-entry:last-child {
    margin-bottom: 0;
}
.activity-description {
    font-size: 14px;
    color: var(--color-text-primary);
    line-height: 1.4;
}
.activity-user {
    font-weight: 500;
    color: var(--color-text-primary);
}
.activity-status-text { font-weight: 600; }
.activity-status-text.scheduled { color: var(--state-scheduled-fg); }
.activity-status-text.in_progress { color: var(--state-progress-fg); }
.activity-status-text.on_hold { color: var(--state-attention-fg); }
.activity-status-text.completed { color: var(--state-success-fg); }
.activity-status-text.cancelled { color: var(--state-cancelled-fg); }
.activity-time {
    font-size: 13px;
    color: var(--color-text-tertiary);
    margin-top: 2px;
}
.job-comm-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border-subtle);
}
.job-comm-item:last-child {
    border-bottom: none;
}
.job-comm-meta {
    font-size: 13px;
    color: var(--color-text-tertiary);
}
.job-comm-body {
    font-size: 13px;
    color: var(--color-text-primary);
    line-height: 1.45;
    margin-top: 4px;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.activity-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid var(--main-page-card-border);
    background: var(--main-page-card-bg);
    color: var(--color-text-tertiary);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    margin-left: auto;
    box-shadow: var(--surface-highlight);
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    flex-shrink: 0;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.2s;
    border-radius: 28px;
}
.toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.2s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-slider {
    background-color: var(--color-success);
}
.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(22px);
}

.transcript-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 10px 0;
    margin-bottom: 0;
    user-select: none;
}
.transcript-toggle::after {
    content: '';
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: 0.72;
    transform: rotate(45deg);
    transition: transform var(--motion-fast), opacity var(--motion-fast);
}
.transcript-expanded .transcript-toggle::after {
    transform: rotate(225deg);
    opacity: 1;
}
.transcript-box {
    background: var(--color-border-subtle);
    border-radius: var(--radius-sm);
    margin-top: 8px;
    padding: 14px;
    font-style: italic;
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.5;
    display: none;
}
.transcript-expanded .transcript-box {
    display: block;
}
.suggested-response {
    background: var(--color-success-soft);
    border-radius: var(--radius-sm);
    padding: 14px;
    color: #065f46;
    font-size: 14px;
    line-height: 1.5;
}
.suggested-response-copy-btn {
    width: auto;
    min-width: 126px;
    margin-top: 12px;
    margin-left: auto;
    font-size: 13px;
    padding: 9px 14px;
}

/* Status Buttons */
.status-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.status-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.status-btn {
    min-height: 44px;
    padding: 11px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.1s ease, border-color 0.15s ease, background-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.status-btn:active {
    transform: scale(0.95);
}
.status-choice {
    min-height: 78px;
    padding: 12px;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    line-height: 1.25;
}
.status-choice-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}
.status-choice-text {
    display: block;
    color: var(--color-text-secondary);
    font-size: 12.5px;
    font-weight: 500;
    opacity: 1;
}
.status-btn.needs_callback {
    background: var(--state-attention-bg);
    color: var(--state-attention-fg);
}
.status-btn.needs_callback.selected,
.status-btn.needs_callback:hover {
    border-color: var(--state-attention-fg);
}
.status-btn.booked {
    background: var(--state-info-bg);
    color: var(--state-info-fg);
}
.status-btn.booked.selected,
.status-btn.booked:hover {
    border-color: var(--state-info-fg);
}
.status-btn.handled {
    background: var(--state-neutral-bg);
    color: var(--state-neutral-fg);
}
.status-btn.handled.selected,
.status-btn.handled:hover {
    border-color: var(--state-neutral-fg);
}
.status-btn.spam {
    background: var(--state-neutral-bg);
    color: var(--state-neutral-fg);
}
.status-btn.spam.selected,
.status-btn.spam:hover {
    border-color: var(--state-neutral-fg);
}
.status-btn.archive {
    background: #edf3fb;
    color: var(--color-text-primary);
    border-color: #cdd8e7;
}
.status-btn.archive.selected,
.status-btn.archive:hover {
    border-color: var(--color-brand);
    background: #e3ecfb;
}
.status-btn.status-choice.handled {
    background: var(--color-neutral-soft);
    color: var(--color-text-primary);
}
.status-btn.status-choice.handled.selected,
.status-btn.status-choice.handled:hover {
    border-color: var(--state-success-fg);
}
.status-btn.status-choice.spam {
    background: var(--state-neutral-bg);
    color: var(--color-text-primary);
}
.status-btn.status-choice.spam.selected,
.status-btn.status-choice.spam:hover {
    border-color: var(--state-neutral-fg);
}
.status-btn.status-choice.handled .status-choice-title {
    color: var(--color-text-primary);
}
.status-btn.status-choice.archive .status-choice-text {
    color: #3d526e;
}
.status-btn.status-choice.archive .status-choice-title,
.status-btn.status-choice.spam .status-choice-title {
    color: var(--color-text-primary);
}

/* Job Status Select */
#job-detail-status-section {
    --job-status-bg: var(--state-scheduled-bg);
    --job-status-fg: var(--state-scheduled-fg);
    --job-status-border: var(--state-scheduled-border);
}
#job-detail-status-section[data-status="scheduled"] {
    --job-status-bg: var(--state-scheduled-bg);
    --job-status-fg: var(--state-scheduled-fg);
    --job-status-border: var(--state-scheduled-border);
}
#job-detail-status-section[data-status="in_progress"] {
    --job-status-bg: var(--state-progress-bg);
    --job-status-fg: var(--state-progress-fg);
    --job-status-border: var(--state-progress-border);
}
#job-detail-status-section[data-status="on_hold"] {
    --job-status-bg: var(--state-attention-bg);
    --job-status-fg: var(--state-attention-fg);
    --job-status-border: #e5c06f;
}
#job-detail-status-section[data-status="completed"] {
    --job-status-bg: var(--state-success-bg);
    --job-status-fg: var(--state-success-fg);
    --job-status-border: rgba(23, 155, 99, 0.28);
}
#job-detail-status-section[data-status="cancelled"] {
    --job-status-bg: var(--state-cancelled-bg);
    --job-status-fg: var(--state-cancelled-fg);
    --job-status-border: var(--state-cancelled-border);
}
.job-status-select {
    width: 100%;
    min-height: 48px;
    padding: 10px 38px 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    -webkit-tap-highlight-color: transparent;
}
#job-detail-status-section[data-status] .job-status-select {
    background-color: color-mix(in srgb, var(--job-status-bg) 78%, var(--color-surface));
    border-color: var(--job-status-border);
    color: var(--job-status-fg);
}
.job-status-select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}
[data-theme="dark"] .job-status-select {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
[data-theme="dark"] #job-detail-status-section[data-status] .job-status-select {
    background-color: color-mix(in srgb, var(--job-status-bg) 76%, var(--color-surface)) !important;
    border-color: var(--job-status-border) !important;
    color: var(--job-status-fg) !important;
}

/* Assigned To Select */
.assigned-to-select {
    width: 100%;
    min-height: 44px;
    padding: 10px 36px 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: 500;
    line-height: 1.25;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.assigned-to-select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}
[data-theme="dark"] .assigned-to-select {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
[data-theme="dark"] .app-dialog-details {
    background: rgba(19, 29, 49, 0.82);
    border-color: rgba(143, 177, 255, 0.12);
    color: var(--color-text-secondary);
}
[data-theme="dark"] .job-payment-section,
[data-theme="dark"] .job-review-section {
    background: rgba(19, 29, 49, 0.76);
    border-color: rgba(143, 177, 255, 0.12);
}
[data-theme="dark"] .interaction-item,
[data-theme="dark"] .customer-job-item {
    background: var(--main-page-card-bg);
    border-color: var(--main-page-card-border);
    box-shadow: var(--main-page-card-shadow);
}
[data-theme="dark"] .activity-card,
[data-theme="dark"] .customer-card,
[data-theme="dark"] .job-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .insight-card:not(.insight-card--success):not(.insight-card--brand):not(.insight-card--warning) {
    background: var(--main-page-card-bg);
    border-color: var(--main-page-card-border);
    box-shadow: var(--main-page-card-shadow);
}
[data-theme="dark"] .followup-tip {
    background: rgba(66, 50, 21, 0.4);
    border-color: rgba(255, 210, 122, 0.16);
}
[data-theme="dark"] .followup-tip.scheduled {
    background: rgba(20, 59, 41, 0.5);
    border-color: rgba(116, 214, 164, 0.14);
}
[data-theme="dark"] .sort-selector select {
    background: rgba(19, 29, 49, 0.9);
    border-color: rgba(143, 177, 255, 0.16);
    color: var(--color-text-primary);
}
[data-theme="dark"] .sort-selector--chip::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23b9c7dd' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
[data-theme="dark"] .sort-selector--sort::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b9c7dd' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5h10'/%3E%3Cpath d='M11 12h7'/%3E%3Cpath d='M11 19h4'/%3E%3Cpath d='M4 7l2-2 2 2'/%3E%3Cpath d='M6 5v14'/%3E%3C/svg%3E");
}
[data-theme="dark"] .sort-selector--filter::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b9c7dd' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='3 4 21 4 14 12 14 19 10 21 10 12 3 4'/%3E%3C/svg%3E");
}
[data-theme="dark"] .bottom-nav {
    background: rgba(15, 23, 40, 0.9);
    border-top-color: rgba(143, 177, 255, 0.12);
    box-shadow: 0 -16px 34px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Job Status Badge (for job cards) */
.job-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 20px;
    border: 1px solid transparent;
    text-transform: capitalize;
    letter-spacing: 0.02em;
    max-width: 100%;
    line-height: 1.1;
    white-space: nowrap;
    overflow-wrap: normal;
}
.job-status-badge.scheduled {
    background: var(--state-scheduled-bg);
    color: var(--state-scheduled-fg);
    border: 1px solid var(--state-scheduled-border);
}
.job-status-badge.in_progress {
    background: var(--state-progress-bg);
    color: var(--state-progress-fg);
    border: 1px solid var(--state-progress-border);
}
.job-status-badge.on_hold {
    background: var(--state-attention-bg);
    color: var(--state-attention-fg);
    border: 1px solid rgba(183, 121, 31, 0.18);
}
.job-status-badge.completed {
    background: var(--state-success-bg);
    color: var(--state-success-fg);
    border: 1px solid rgba(23, 155, 99, 0.18);
}
.job-status-badge.cancelled {
    background: var(--state-cancelled-bg);
    color: var(--state-cancelled-fg);
    border: 1px solid var(--state-cancelled-border);
}
.job-assigned-badge {
    font-size: 13px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 4px;
    background: var(--color-neutral-soft);
    color: var(--color-text-secondary);
    text-transform: capitalize;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Detail Actions */
.detail-actions {
    display: flex;
    gap: 10px;
    padding-top: 16px;
    padding-right: max(30px, calc(24px + env(safe-area-inset-right)));
    padding-bottom: max(16px, calc(16px + env(safe-area-inset-bottom)));
    padding-left: max(30px, calc(24px + env(safe-area-inset-left)));
    background: var(--color-surface);
    position: sticky;
    bottom: 0;
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -10px 24px rgba(0,0,0,0.06);
}
.detail-view .detail-actions {
    position: relative;
    bottom: auto;
    flex-shrink: 0;
    margin-top: auto;
}
.customer-detail-view .detail-actions {
    position: relative;
    bottom: auto;
    flex-shrink: 0;
    margin-top: auto;
}
.detail-action-btn {
    flex: 1;
    min-height: 52px;
    padding: 15px;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.1s ease, opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.detail-action-btn:hover { opacity: 0.9; }
.detail-action-btn:active { opacity: 0.8; transform: scale(0.96); }
.detail-action-btn.call {
    background: linear-gradient(135deg, #21b874 0%, #168c56 100%);
    color: white;
}
.detail-action-btn.text {
    background: var(--gradient-brand);
    color: white;
}
.detail-action-btn.calendar {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
}

/* Edit name button */
.edit-name-btn {
    background: var(--main-page-card-bg);
    border: 1px solid var(--main-page-card-border);
    color: var(--color-text-tertiary);
    cursor: pointer;
    min-width: 42px;
    min-height: 42px;
    padding: 8px;
    margin-left: 8px;
    border-radius: 14px;
    box-shadow: var(--surface-highlight), var(--shadow-sm);
    transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
}
.edit-name-btn svg {
    width: 16px;
    height: 16px;
}
.edit-name-btn:hover {
    background: var(--main-page-card-bg-hover);
    border-color: var(--color-brand-muted);
    color: var(--color-accent);
}
.edit-name-btn:active {
    transform: scale(0.97);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-tertiary);
    max-width: 360px;
    margin: 0 auto;
}
.empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    padding: 16px;
    border-radius: 20px;
    color: var(--color-accent);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.74) 100%),
        var(--gradient-brand-soft);
    border: 1px solid rgba(36, 88, 211, 0.16);
    box-shadow: 0 14px 26px rgba(36, 88, 211, 0.1);
    opacity: 1;
}
[data-theme="dark"] .empty-icon {
    background:
        linear-gradient(180deg, rgba(19, 29, 49, 0.96) 0%, rgba(12, 21, 37, 0.9) 100%),
        var(--gradient-brand-soft);
    border-color: rgba(143, 177, 255, 0.16);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.28);
}
.empty-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 6px;
}
.empty-text {
    font-size: 15px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}
.empty-state--compact {
    max-width: none;
    padding: 28px 16px;
}
.empty-state--compact .empty-icon {
    width: 56px;
    height: 56px;
    padding: 14px;
    margin-bottom: 14px;
}
.reviews-empty-state {
    display: none;
}

/* Loading */
.loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-tertiary);
    font-size: 15px;
}

/* Bottom Nav - Clean, minimal */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.88);
    border-top: 1px solid var(--color-border);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-top: 10px;
    padding-right: max(16px, calc(16px + env(safe-area-inset-right)));
    padding-bottom: max(16px, calc(16px + env(safe-area-inset-bottom)));
    padding-left: max(16px, calc(16px + env(safe-area-inset-left)));
    z-index: 100;
    box-shadow: 0 -12px 26px rgba(17, 34, 68, 0.08), inset 0 1px 0 rgba(255,255,255,0.74);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    gap: 6px;
}
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    color: var(--color-text-tertiary);
    font-size: 13px;
    font-weight: 600;
    border: none;
    background: none;
    min-height: 56px;
    width: 100%;
    min-width: 0;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    transition: color var(--motion-fast), background-color var(--motion-fast), transform var(--motion-fast);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    position: relative;
    margin: 0;
}
.nav-item:hover {
    color: var(--color-text-primary);
    background: rgba(36, 88, 211, 0.06);
}
.nav-item:active {
    opacity: 0.7;
}
.nav-item.active {
    color: var(--color-accent);
    background: rgba(36, 88, 211, 0.1);
    box-shadow: inset 0 0 0 1px rgba(36, 88, 211, 0.08);
}
.nav-item.active .nav-icon {
    stroke-width: 2.5;
}
.nav-item.active .nav-icon,
.nav-item.active .nav-label {
    color: var(--color-accent);
}
.nav-icon {
    width: 24px;
    height: 24px;
}
/* Badges - vibrant with subtle glow */
.urgency-badge,
.lead-badge,
.spam-badge,
.scheduled-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: var(--radius-xl);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.2px;
    border: 1px solid transparent;
}
.urgency-badge {
    font-size: var(--font-size-xs);
}
.urgency-badge.emergency {
    background: var(--state-danger-bg);
    color: var(--state-danger-fg);
    border-color: var(--state-danger-border);
}
.urgency-badge.high {
    background: var(--state-attention-bg);
    color: var(--state-attention-fg);
}
.urgency-badge.medium {
    background: var(--state-attention-bg);
    color: var(--state-attention-fg);
}
.lead-badge {
    background: var(--state-success-bg);
    color: var(--state-success-fg);
}
.spam-badge {
    background: var(--state-neutral-bg);
    color: var(--state-neutral-fg);
}
.scheduled-badge {
    background: var(--state-info-bg);
    color: var(--state-info-fg);
}
.channel-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-xl);
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
    border: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.24);
}
.channel-badge.voice-ai {
    background: rgba(36, 88, 211, 0.09);
    color: var(--color-accent);
    border-color: rgba(36, 88, 211, 0.14);
}
.channel-badge.voicemail {
    background: rgba(245, 158, 11, 0.13);
    color: #9a670d;
    border-color: rgba(183, 121, 31, 0.18);
}
.channel-badge.booking {
    background: rgba(2, 132, 199, 0.11);
    color: #036b9a;
    border-color: rgba(2, 132, 199, 0.16);
}
.followup-tip {
    background: rgba(250, 245, 234, 0.88);
    border: 1px solid rgba(183, 121, 31, 0.14);
    border-left: 3px solid var(--state-attention-fg);
    padding: 10px 12px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 13px;
    color: var(--state-attention-fg);
    margin-top: 10px;
    line-height: 1.45;
}
.followup-tip.scheduled {
    background: rgba(237, 248, 242, 0.92);
    border-color: rgba(23, 155, 99, 0.16);
    border-left-color: var(--state-success-fg);
    color: var(--state-success-fg);
}

/* Customers View */
.customers-view { display: none; }
.customers-view.active { display: block; }
.customer-card {
    background: var(--main-page-card-bg);
    border-radius: var(--radius-md);
    padding: 0;
    margin-bottom: 16px;
    cursor: pointer;
    box-shadow: var(--main-page-card-shadow);
    transition: transform var(--motion-fast), border-color var(--motion-fast), background-color var(--motion-fast);
    position: relative;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    border: 1px solid var(--main-page-card-border);
    overflow: hidden;
}
.customer-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    border-color: var(--color-brand-muted);
}
.customer-card:active {
    transform: scale(0.985);
    box-shadow: var(--shadow-sm);
}
.customer-card-shell {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 21px 20px;
    position: relative;
}
.customer-card-content {
    min-width: 0;
    flex: 1;
}
.customer-card-topline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.customer-card-topline-copy {
    flex: 1;
    min-width: 0;
}
.customer-card-controls {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    margin-left: 2px;
}
.customer-card-text-action,
.customer-card-primary-action {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}
.customer-card-primary-action svg,
.customer-card-text-action svg {
    width: 17px;
    height: 17px;
}
.customer-name {
    font-weight: 600;
    font-size: 17px;
    color: var(--color-text-primary);
    line-height: 1.35;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.customer-meta-row {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: var(--color-text-secondary);
}
.customer-phone {
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.4;
}
.customer-summary {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-top: 8px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.customer-card-tags {
    margin-top: 12px;
}
.lead-score-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: var(--radius-xl);
    font-size: 13px;
    font-weight: 700;
}
.lead-score-pill.high {
    background: var(--state-success-bg);
    color: var(--state-success-fg);
}
.lead-score-pill.medium {
    background: var(--state-attention-bg);
    color: var(--state-attention-fg);
}
.lead-score-pill.low {
    background: var(--state-neutral-bg);
    color: var(--state-neutral-fg);
}

.interaction-item {
    background: var(--main-page-card-bg);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    margin-bottom: 10px;
    box-shadow: var(--main-page-card-shadow);
    transition: transform var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast);
    border: 1px solid var(--main-page-card-border);
}
.interaction-item.clickable {
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.interaction-item.clickable:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.interaction-item.clickable:active {
    transform: translateY(0);
}
.interaction-item-body {
    min-width: 0;
    flex: 1;
}
.interaction-type {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--state-neutral-fg);
    background: var(--state-neutral-bg);
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    margin-right: 6px;
}
.interaction-type.voicemail {
    background: rgba(245, 158, 11, 0.13);
    color: #9a670d;
    border-color: rgba(183, 121, 31, 0.18);
}
.interaction-type.voice-ai {
    background: rgba(36, 88, 211, 0.09);
    color: var(--color-accent);
    border-color: rgba(36, 88, 211, 0.14);
}
.interaction-type.sms {
    background: var(--state-info-bg);
    color: var(--state-info-fg);
    border-color: rgba(36, 88, 211, 0.14);
}
.interaction-type.chat {
    background: var(--state-neutral-bg);
    color: var(--state-neutral-fg);
    border-color: var(--color-border);
}
.interaction-date { font-size: 13px; color: var(--color-text-secondary); line-height: 1.4; }
.interaction-summary {
    font-size: 14px;
    margin-top: 6px;
    line-height: 1.5;
    color: var(--color-text-primary);
}
.customer-job-item {
    background: var(--main-page-card-bg);
    cursor: pointer;
    padding: 16px 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    box-shadow: var(--main-page-card-shadow);
}
.customer-job-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.customer-job-item:active {
    transform: translateY(0);
}
.customer-job-item--scheduled {
    border-color: var(--state-scheduled-border);
}
.customer-job-item--in_progress {
    border-color: rgba(36, 88, 211, 0.18);
}
.customer-job-item--on_hold {
    border-color: rgba(183, 121, 31, 0.18);
}
.customer-job-item--completed {
    border-color: rgba(23, 155, 99, 0.18);
}
.customer-job-item--cancelled {
    border-color: var(--color-border);
}
.customer-job-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.35;
}
.customer-job-summary {
    color: var(--color-text-secondary);
}
.customer-job-tags {
    margin-top: 10px;
}

/* Scrollable area accounting for bottom nav */
.main-scroll {
    padding-bottom: calc(var(--bottom-nav-height) + 28px + env(safe-area-inset-bottom));
}

/* Settings View */
.settings-view { display: none; }
.settings-view.active { display: block; }
.settings-view .content.main-scroll {
    padding-top: 14px;
}
.settings-view .compact-logo svg {
    height: 24px;
    width: auto;
}
.settings-view .detail-section {
    padding: 20px 18px;
    margin-bottom: 14px;
}
.settings-disclosure {
    margin: 16px 0;
    border: 1px solid var(--main-page-card-border);
    border-radius: var(--radius-lg);
    background: var(--main-page-card-bg);
    box-shadow: var(--main-page-card-shadow);
    overflow: hidden;
}
.settings-disclosure--nested {
    margin: 10px 0 8px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--main-page-card-bg) 88%, transparent);
    box-shadow: none;
}
.settings-disclosure-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 15px 18px;
    color: var(--color-text-primary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.settings-disclosure-summary::-webkit-details-marker {
    display: none;
}
.settings-disclosure-summary::after {
    content: '+';
    color: var(--color-text-secondary);
    font-size: 18px;
    font-weight: 500;
}
.settings-disclosure[open] .settings-disclosure-summary::after {
    content: '-';
}
.settings-disclosure-meta {
    margin-left: auto;
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 500;
}
.settings-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    margin: 16px 0;
    padding: 15px 18px;
    border: 1px solid var(--main-page-card-border);
    border-radius: var(--radius-lg);
    background: var(--main-page-card-bg);
    box-shadow: var(--main-page-card-shadow);
    color: var(--color-text-primary);
    font-size: 15px;
    font-weight: 600;
}
.settings-info-row__meta {
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.settings-legal-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 14px auto 4px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
}
.settings-legal-links a {
    color: var(--color-accent-strong);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}
[data-theme="dark"] .settings-legal-links {
    color: rgba(230, 237, 248, 0.82);
}
[data-theme="dark"] .settings-legal-links a {
    color: #a9c2ff;
}
.settings-disclosure-body {
    padding: 0 18px 6px;
}
.settings-disclosure--nested .settings-disclosure-body {
    padding-bottom: 10px;
}
.settings-disclosure-body .detail-section:last-child {
    margin-bottom: 0;
}
[data-theme="dark"] .settings-disclosure {
    background: var(--main-page-card-bg);
    border-color: var(--main-page-card-border);
}
[data-theme="dark"] .settings-info-row {
    background: var(--main-page-card-bg);
    border-color: var(--main-page-card-border);
}
.settings-view .detail-label {
    margin-bottom: 9px;
    font-size: 13px;
    line-height: 1.35;
    letter-spacing: 0.02em;
}
.settings-view .detail-value {
    line-height: 1.5;
}
.settings-view .detail-supporting-text,
.settings-view .field-help,
.settings-view .settings-section-description {
    line-height: 1.45;
}
.settings-view .detail-supporting-text--empty {
    display: block;
    min-height: 1px;
}
.settings-view .detail-inline,
.settings-view .detail-row-between {
    gap: 14px;
}
.settings-view .detail-row-between {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 10px;
}
.settings-view .detail-inline {
    flex-wrap: wrap;
}
.settings-view .detail-inline > :first-child,
.settings-view .detail-row-between > :first-child {
    flex: 1 1 220px;
    min-width: 0;
}
.settings-view .detail-inline > .btn-soft,
.settings-view .detail-inline > .btn-sm,
.settings-view .detail-inline > .btn-md,
.settings-view .detail-row-between > .toggle-switch,
.settings-view .detail-row-between > .status-pill {
    flex: 0 0 auto;
    justify-self: end;
}
.settings-view .detail-row-between .toggle-switch {
    flex-shrink: 0;
    margin-left: auto;
}
.settings-view .detail-section--toggle-inline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
}
.settings-view .detail-section--toggle-inline .detail-label {
    margin-bottom: 0;
}
.settings-view .detail-section--toggle-inline .detail-row-between {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0;
}
.settings-view .detail-section--toggle-inline .detail-row-between > .toggle-switch {
    flex: 0 0 50px;
    width: 50px;
    margin-left: 0;
}
.settings-plan-badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}
.settings-plan-row {
    grid-template-columns: minmax(150px, 1fr) minmax(0, auto);
}
.settings-plan-name {
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
    white-space: nowrap;
}
.settings-view .btn-sm,
.settings-view .btn-md {
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.settings-view .btn-sm {
    min-height: 40px;
    padding: 8px 12px;
}
.settings-view .btn-md {
    min-height: 44px;
    padding: 10px 14px;
}
.settings-view .settings-header {
    padding-bottom: 18px;
}
.settings-view .settings-section-block {
    margin: 16px 0;
    padding: 18px 18px 6px;
    background: var(--main-page-card-bg);
    border: 1px solid var(--main-page-card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--main-page-card-shadow);
}
.settings-view .settings-section-block--framed {
    margin: 16px 0;
    padding: 18px 18px 6px;
    background: var(--main-page-card-bg);
    border: 1px solid var(--main-page-card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--main-page-card-shadow);
}
.settings-view .settings-section-block--top {
    margin-top: 0;
}
.settings-group-label {
    margin: 30px 2px 12px;
    padding-top: 4px;
    color: var(--color-text-primary);
    font-size: 21px;
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.15;
    text-transform: none;
}
.settings-view .settings-section-title {
    gap: 12px;
    margin-bottom: 8px;
    font-size: 17px;
    font-weight: 600;
}
.settings-view .settings-section-title__label {
    line-height: 1.2;
}
.settings-view .section-title-icon {
    width: 40px;
    height: 40px;
    border-radius: 13px;
}
.settings-view .settings-section-description {
    margin-bottom: 4px;
    max-width: 58ch;
    font-size: 14px;
}
.settings-view .settings-section-block .detail-section,
.settings-view .settings-disclosure-body .detail-section {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 15px 0;
}
.settings-view .settings-section-block .detail-section + .detail-section,
.settings-view .settings-disclosure-body .detail-section + .detail-section {
    border-top: 1px solid var(--color-border-subtle);
}
.settings-view .settings-section-block .detail-section:first-of-type {
    margin-top: 2px;
}
.settings-view .settings-section-block .detail-section:last-child,
.settings-view .settings-disclosure-body .detail-section:last-child {
    padding-bottom: 12px;
}
.settings-disclosure--compact .detail-value {
    color: var(--color-text-secondary);
}
.settings-disclosure--danger {
    border-color: rgba(217, 45, 32, 0.22);
}
.settings-disclosure--danger .settings-disclosure-summary,
.settings-disclosure--danger .settings-disclosure-meta {
    color: var(--state-danger-fg);
}
.settings-disclosure-body.danger-zone {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.settings-disclosure-body.danger-zone .danger-zone__copy {
    margin: 0;
    padding: 0 0 14px;
}
.settings-view .form-control {
    min-height: 50px;
    border-radius: 10px;
    line-height: 1.5;
}
.settings-view .form-control--textarea-lg {
    min-height: 112px;
}
.settings-view .form-control--textarea-md {
    min-height: 88px;
}
.settings-view .field-actions {
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    margin-bottom: 2px;
}
.settings-view .field-actions .field-help--inline {
    line-height: 1.5;
}
.settings-view .field-actions .btn-sm {
    flex-shrink: 0;
}
.settings-view .upload-actions,
.settings-view .mfa-actions {
    align-items: center;
    gap: 10px;
}
.settings-view .upload-actions .btn-sm,
.settings-view .mfa-actions .btn-sm {
    min-width: 128px;
}
.settings-view .section-cta,
.settings-view .section-cta-md,
.settings-view .section-cta-sm {
    margin-bottom: 14px;
}

@media (max-width: 640px) {
    .settings-view .detail-section {
        padding: 17px 16px;
        margin-bottom: 12px;
    }
    .settings-view .settings-header {
        padding-bottom: 16px;
    }
    .settings-view .settings-section-block,
    .settings-view .settings-section-block--framed {
        margin: 14px 0;
        padding: 18px 18px 12px;
    }
    .settings-view .settings-section-title {
        gap: 12px;
        font-size: 17px;
    }
    .settings-view .section-title-icon {
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }
    .settings-view .settings-section-description {
        margin-bottom: 12px;
    }
    .settings-view .settings-section-block .detail-section,
    .settings-view .settings-disclosure-body .detail-section {
        padding: 16px 0;
        margin: 0;
    }
    .settings-view .settings-section-block .detail-section:last-child,
    .settings-view .settings-disclosure-body .detail-section:last-child {
        padding-bottom: 16px;
    }
    .settings-disclosure-summary {
        padding: 15px 18px;
    }
    .settings-disclosure-body {
        padding: 0 18px 12px;
    }
    .settings-view .field-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-top: 12px;
        margin-bottom: 6px;
    }
    .settings-view .field-actions .btn-sm,
    .settings-view .detail-inline > .btn-soft,
    .settings-view .detail-inline > .btn-sm,
    .settings-view .detail-inline > .btn-md,
    .settings-view .upload-actions .btn-sm,
    .settings-view .mfa-actions .btn-sm {
        width: 100%;
        min-height: 44px;
    }
    .settings-view .detail-inline,
    .settings-view .detail-row-between {
        gap: 12px;
    }
    .settings-view .detail-row-between {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 16px;
        row-gap: 12px;
    }
    .settings-view .settings-plan-row {
        grid-template-columns: 1fr;
    }
    .settings-view .settings-plan-badges {
        justify-content: flex-start;
    }
    .settings-view .detail-inline > :first-child,
    .settings-view .detail-row-between > :first-child {
        flex-basis: 0;
        min-width: 0;
    }
    .settings-view .upload-actions,
    .settings-view .mfa-actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }
    .settings-view .mfa-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .settings-view .section-cta,
    .settings-view .section-cta-md,
    .settings-view .section-cta-sm {
        margin-bottom: 16px;
    }
}

/* Team List Styles */
.team-list {
    margin: 16px 0;
}
.team-member {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}
.team-member-info {
    display: flex;
    flex-direction: column;
}
.team-member-name {
    font-weight: 500;
    color: var(--color-text-primary);
}
.team-member-role {
    font-size: 13px;
    color: var(--color-text-tertiary);
    margin-left: 8px;
}
.team-member-email {
    font-size: 13px;
    color: var(--color-text-secondary);
}
.team-edit-btn {
    padding: 6px 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-text-secondary);
}
.team-edit-btn:hover {
    background: var(--color-border);
}
.add-employee-btn {
    width: 100%;
    padding: 12px;
    margin-bottom: 24px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-text-secondary);
}
.add-employee-btn:hover {
    background: var(--color-bg);
}

/* Slot Time Buttons */
#booking-slot-times {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
    align-items: stretch;
    gap: 10px;
    width: 100%;
}
.slot-time-btn {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
    color: var(--color-text-secondary);
    white-space: nowrap;
}
.slot-time-btn:hover {
    border-color: var(--color-accent);
}
.slot-time-btn.selected {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.service-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(128px, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--main-page-card-border);
    background: var(--main-page-card-bg);
    box-shadow: var(--surface-highlight), var(--shadow-sm);
}
.service-row .form-control {
    min-width: 0;
}
[data-theme="dark"] .service-row {
    background: rgba(19, 29, 49, 0.82);
}
.service-row__remove {
    width: 44px;
    min-width: 44px;
    padding: 0;
}
.service-row__remove svg {
    width: 16px;
    height: 16px;
}

.business-hours-row {
    display: grid;
    grid-template-columns: minmax(76px, 96px) minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border-subtle);
}
.business-hours-row:last-child {
    border-bottom: none;
}
.business-hours-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    cursor: pointer;
}
.business-hours-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent);
}
.business-hours-day {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}
.business-hours-inputs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
    transition: opacity var(--motion-fast);
}
.business-hours-inputs.is-disabled {
    opacity: 0.45;
}
.business-hours-time {
    width: 100%;
    min-width: 0;
    text-align: center;
    box-sizing: border-box;
}
.business-hours-separator {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    font-weight: 600;
}

/* Insights View */
.insights-view { display: none; }
.insights-view.active { display: block; }
.insights-view .content.main-scroll {
    padding-top: 12px;
}
.insights-view .compact-logo svg {
    height: 24px;
    width: auto;
}
.insights-tab-toggle {
    display: flex;
    gap: 0;
    margin-top: 16px;
    background: var(--main-page-card-bg);
    border: 1px solid var(--main-page-card-border);
    border-radius: var(--radius-md);
    padding: 4px;
    box-shadow: var(--surface-highlight), var(--shadow-sm);
}
.insights-tab-btn {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background-color var(--motion-fast), color var(--motion-fast);
}
.insights-tab-btn:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-alt);
}
.insights-tab-btn.active {
    background: var(--gradient-brand);
    color: white;
}
.insights-tab-content {
    display: none;
}
.insights-tab-content.active {
    display: block;
}
.insights-period-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}
.period-btn {
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--main-page-card-border);
    background: var(--main-page-card-bg);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
}
.period-btn:hover {
    border-color: var(--color-brand-muted);
    background: var(--color-accent-soft);
}
.period-btn.active {
    background: var(--gradient-brand);
    color: var(--color-brand-contrast);
    border-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}
[data-theme="dark"] .insights-tab-toggle {
    background: rgba(19, 29, 49, 0.9);
    border-color: var(--color-border);
}
[data-theme="dark"] .insights-tab-btn {
    color: var(--color-text-primary);
    background: transparent;
}
[data-theme="dark"] .insights-tab-btn:hover {
    background: rgba(143, 177, 255, 0.14);
}
[data-theme="dark"] .period-btn {
    background: rgba(23, 35, 58, 0.94);
    color: var(--color-text-primary);
    border-color: rgba(143, 177, 255, 0.16);
}
[data-theme="dark"] .period-btn:hover {
    background: rgba(143, 177, 255, 0.12);
    border-color: rgba(143, 177, 255, 0.3);
}
[data-theme="dark"] .period-btn.active {
    background: var(--gradient-brand);
    border-color: transparent;
    color: var(--color-brand-contrast);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}
.insight-card {
    background: var(--main-page-card-bg);
    border: 1px solid var(--main-page-card-border);
    border-radius: var(--radius-md);
    padding: 18px;
    margin-bottom: 14px;
    box-shadow: var(--main-page-card-shadow);
    min-width: 0;
    overflow: hidden;
}
.insights-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
    min-width: 0;
}
.insights-card-grid .insight-card {
    margin-bottom: 0;
    height: 100%;
}
.insight-card--metric {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 164px;
}
.insight-card--metric .insight-card-title {
    margin-bottom: 0;
}
.insight-card--metric .insight-big-number {
    margin-top: auto;
}
.insight-card--metric .insight-subtitle {
    margin-top: 0;
    min-height: 38px;
    line-height: 1.35;
    white-space: normal;
    overflow: hidden;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.insight-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    letter-spacing: -0.01em;
    margin-bottom: 10px;
    min-width: 0;
    overflow-wrap: anywhere;
}
.insight-big-number {
    font-size: 40px;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1;
    letter-spacing: -1px;
    min-width: 0;
    overflow-wrap: anywhere;
}
.insight-big-number.green { color: var(--color-success); }
.insight-big-number.blue { color: var(--color-accent); }
.insight-subtitle {
    font-size: 14px;
    color: var(--color-text-tertiary);
    margin-top: 4px;
    min-width: 0;
    overflow-wrap: anywhere;
}
.insight-card--hero {
    padding: 20px;
}
.insight-card--hero .insight-big-number {
    margin-bottom: 8px;
}
.insight-card--hero .insight-subtitle {
    max-width: 34ch;
    line-height: 1.5;
}
.insight-card--success,
.insight-card--brand,
.insight-card--warning {
    color: white;
    border-color: transparent;
}
.insight-card--success {
    background: linear-gradient(135deg, #24b86d 0%, #178a55 100%);
}
.insight-card--brand {
    background: var(--gradient-brand);
}
.insight-card--warning {
    background: linear-gradient(135deg, #f0ad32 0%, #cf7b12 100%);
}
.insight-card--success .insight-card-title,
.insight-card--success .insight-subtitle,
.insight-card--brand .insight-card-title,
.insight-card--brand .insight-subtitle,
.insight-card--warning .insight-card-title,
.insight-card--warning .insight-subtitle {
    color: rgba(255,255,255,0.82);
}
.insight-card--success .insight-big-number,
.insight-card--brand .insight-big-number,
.insight-card--warning .insight-big-number {
    color: white;
}
.insight-content-spacer {
    margin-top: 12px;
}
.insight-row {
    display: flex;
    gap: 10px;
}
.insight-row .insight-card {
    flex: 1;
}
@media (max-width: 380px) {
    .insights-card-grid {
        grid-template-columns: 1fr;
    }
    .insight-card--metric {
        min-height: 0;
    }
    .insight-card--metric .insight-subtitle {
        min-height: 0;
    }
}
.insight-section-header {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
    margin: 20px 0 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}
.insight-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border-subtle);
}
.insight-stat-row:last-child {
    border-bottom: none;
}
.insight-stat-label {
    font-size: 14px;
    color: var(--color-text-secondary);
}
.insight-stat-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
}
.insight-bar-container {
    margin-top: 8px;
}
.insight-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.insight-bar-label {
    font-size: 13px;
    color: var(--color-text-secondary);
    width: 80px;
    flex-shrink: 0;
}
.insight-bar-bg {
    flex: 1;
    height: 6px;
    background: var(--color-border);
    border-radius: 3px;
    overflow: hidden;
}
.insight-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}
.insight-bar-fill.green { background: var(--color-success); }
.insight-bar-fill.yellow { background: var(--color-warning); }
.insight-bar-fill.red { background: var(--color-danger); }
.insight-bar-fill.blue { background: var(--color-accent); }
.insight-bar-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    width: 30px;
    text-align: right;
}
.clickable {
    cursor: pointer;
    transition: transform 0.1s;
}
.clickable:active {
    transform: scale(0.98);
}

/* Schedule Modal */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26,43,60,0.6);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.modal-overlay.active {
    display: flex;
}
.modal {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-x: hidden;
    overflow-y: auto;
    box-shadow: 0 25px 60px rgba(0,0,0,0.25);
    animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
}
.modal-close {
    background: var(--main-page-card-bg);
    border: 1px solid var(--main-page-card-border);
    width: 42px;
    height: 42px;
    border-radius: 14px;
    font-size: 22px;
    color: var(--color-text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--surface-highlight), var(--shadow-sm);
    transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
}
.modal-close:hover {
    background: var(--main-page-card-bg-hover);
    border-color: var(--color-brand-muted);
    color: var(--color-accent);
}
.modal-close:active {
    transform: scale(0.97);
}
.modal-body {
    padding: 24px;
}
.app-dialog-overlay {
    z-index: 260;
}
.app-dialog {
    max-width: 460px;
}
.app-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.app-dialog-message {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-text-primary);
}
.app-dialog-details {
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-alt);
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.app-dialog-details--code {
    font-family: var(--app-font-family);
    font-size: var(--font-size-sm);
    line-height: 1.45;
}
.app-dialog-input-wrap {
    margin-bottom: 0;
}
.app-dialog-input-wrap .form-error-text {
    margin-top: 10px;
}
.app-dialog-input-wrap textarea.form-input {
    min-height: 180px;
    resize: vertical;
    line-height: 1.45;
}
.form-group {
    margin-bottom: 18px;
}
.form-row {
    display: grid;
    gap: 12px;
}
.form-row--schedule {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}
.form-row--schedule .form-group {
    min-width: 0;
    overflow: hidden;
}
.form-group--spaced {
    margin-top: 16px;
}
.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 10px;
}
.form-input {
    width: 100%;
    min-height: 48px;
    padding: 13px 14px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 16px;
    font-family: inherit;
    color: var(--color-text-primary);
    transition: border-color var(--motion-fast), background-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast);
    background: var(--color-surface);
}
.address-entry-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(104px, 0.42fr);
    gap: 10px;
}
.address-entry-grid .form-input {
    min-width: 0;
    margin: 0;
}
.address-entry-street,
.address-entry-grid input[id$="-city"] {
    grid-column: 1 / -1;
}
.address-entry-grid input[id$="-state"] {
    text-transform: uppercase;
}
.native-picker-shell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 56px;
    padding: 13px 16px;
    overflow: hidden;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-primary);
    transition: border-color var(--motion-fast), background-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast);
}
.native-picker-shell:focus-within {
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}
.native-picker-display {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    text-align: center;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.25;
    color: var(--color-text-primary);
    white-space: normal;
    overflow-wrap: anywhere;
    pointer-events: none;
}
.native-picker-input {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    opacity: 0;
    font-size: 16px;
    color: transparent;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
}
.form-input--date-time {
    width: 100%;
    inline-size: 100%;
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}
.form-row--schedule input[type="date"],
.form-row--schedule input[type="time"] {
    width: 100%;
    inline-size: 100%;
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.form-row--schedule input[type="date"]::-webkit-datetime-edit,
.form-row--schedule input[type="time"]::-webkit-datetime-edit,
.form-row--schedule input[type="date"]::-webkit-date-and-time-value,
.form-row--schedule input[type="time"]::-webkit-date-and-time-value {
    min-width: 0;
    padding: 0;
}
.form-row--schedule input[type="date"]::-webkit-calendar-picker-indicator,
.form-row--schedule input[type="time"]::-webkit-calendar-picker-indicator {
    margin: 0;
    padding: 0;
}
.form-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}
.modal-footer {
    padding: 18px 24px;
    border-top: 1px solid var(--color-border-subtle);
    display: flex;
    gap: 12px;
}
.modal-footer--split {
    align-items: center;
    justify-content: space-between;
}
.modal-footer--split > .modal-btn {
    flex: 0 0 auto;
}
.modal-footer-actions {
    display: flex;
    flex: 1;
    gap: 12px;
    justify-content: flex-end;
}
.modal-btn {
    flex: 1;
    min-height: 48px;
    padding: 13px 18px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    box-shadow: var(--surface-highlight), var(--shadow-sm);
    transition: transform var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), opacity var(--motion-fast);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.modal-btn:active { transform: scale(0.95); }
.modal-btn.cancel {
    background: var(--main-page-card-bg);
    border-color: var(--main-page-card-border);
    color: var(--color-text-secondary);
}
.modal-btn.cancel:hover {
    background: var(--main-page-card-bg-hover);
    border-color: var(--color-brand-muted);
    color: var(--color-accent);
}
.modal-btn.primary {
    background: var(--gradient-brand);
    color: var(--color-brand-contrast);
}
.modal-btn.primary:hover {
    opacity: 0.94;
}
.modal-btn.danger {
    background: var(--color-danger);
    color: white;
}
.modal-btn.danger:hover {
    opacity: 0.9;
}
.modal-btn.danger-soft {
    background: var(--state-danger-bg);
    color: var(--state-danger-fg);
    border: 1px solid var(--state-danger-border);
}
.modal-btn.danger-soft:hover {
    background: #fee2e2;
}

.credentials-box {
    background: var(--color-bg);
    padding: 16px;
    border-radius: var(--radius-sm);
    margin: 16px 0;
    font-family: var(--app-font-family);
    font-size: var(--font-size-sm);
    line-height: 1.45;
}
.credentials-note {
    font-size: 13px;
    color: var(--color-text-secondary);
}

@media (max-width: 520px) {
    .detail-field-row {
        grid-template-columns: 1fr;
        gap: 6px;
        align-items: stretch;
    }
    .modal-footer--split {
        align-items: stretch;
        flex-direction: column-reverse;
    }
    .modal-footer-actions {
        width: 100%;
    }
}

/* Appointment Booking Style Modal */
.booking-calendar {
    margin-bottom: 20px;
}
.booking-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.booking-calendar-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.booking-calendar-month {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
}
.booking-calendar-year {
    font-size: 18px;
    font-weight: 400;
    color: var(--color-text-tertiary);
}
.booking-calendar-nav {
    display: flex;
    gap: 6px;
}
.booking-nav-btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 16px;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast);
}
.booking-nav-btn:hover {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    box-shadow: var(--shadow-md);
}
.booking-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin-bottom: 8px;
}
.booking-weekday {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    padding: 6px 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.booking-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}
.booking-day {
    aspect-ratio: 1;
    min-width: 0;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    cursor: pointer;
    border-radius: 50%;
    transition: background-color var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.booking-day:hover {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}
.booking-day.other-month {
    color: var(--color-text-tertiary);
    opacity: 0.5;
}
.booking-day.today {
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
    font-weight: 700;
}
.booking-day.selected {
    background: var(--color-text-primary);
    color: white;
}
.booking-day.selected.today {
    border: none;
}
.booking-day.past {
    color: var(--color-text-tertiary);
    opacity: 0.4;
    cursor: not-allowed;
}
.booking-day.past:hover {
    background: transparent;
    color: var(--color-text-tertiary);
}
.booking-day.has-slots {
    background: var(--color-success-soft);
}
.booking-day.has-slots:hover {
    background: var(--color-success-soft);
    border-color: var(--color-success);
}

/* Selected date display */
.booking-selected-date {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}
.booking-timezone {
    font-size: 14px;
    color: var(--color-text-tertiary);
    margin-bottom: 16px;
}

/* Time slots */
.time-slots-section {
    margin-bottom: 16px;
}
.time-slots-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 10px;
}
.time-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.time-slot {
    min-height: 44px;
    padding: 11px 16px;
    border: none;
    border-radius: var(--radius-xl);
    background: var(--color-neutral-soft);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--motion-fast), color var(--motion-fast);
    color: var(--color-text-secondary);
}
.time-slot:hover {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}
.time-slot.selected {
    background: var(--color-text-primary);
    color: white;
}
.time-slot.disabled, .time-slot:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
}
.time-slot.disabled:hover, .time-slot:disabled:hover {
    background: var(--color-neutral-soft);
    color: var(--color-text-secondary);
}
.time-slots .form-input {
    max-width: 100%;
    min-width: 0;
}
.custom-time-input {
    width: 100%;
    max-width: none;
    flex: 1 1 100%;
    padding: 10px 12px;
}
.schedule-empty-state {
    padding: 18px;
    text-align: center;
    color: var(--color-text-secondary);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: 14px;
}
.schedule-empty-state span {
    display: inline-block;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
    margin-top: 4px;
}

/* Search Bar */
.search-bar {
    display: flex;
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast), background-color var(--motion-fast);
}
.search-bar--header {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 520px;
    min-height: 48px;
    margin-bottom: 0;
    padding: 10px 12px;
    border-radius: 17px;
    box-shadow: var(--surface-highlight);
}
.search-bar--header input {
    font-size: 16px;
    font-weight: 500;
}
.search-bar--header .search-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}
.search-bar--header .search-clear {
    min-width: 36px;
    min-height: 36px;
    border-radius: 12px;
}
.search-bar:focus-within {
    border-color: var(--color-brand-muted);
    box-shadow: var(--shadow-md), 0 0 0 3px rgba(30,58,95,0.15);
}
.search-bar--header:focus-within {
    border-color: color-mix(in srgb, var(--color-brand-muted) 72%, var(--color-border));
    box-shadow: var(--surface-highlight);
}
.search-bar--calendar:focus-within {
    border-color: color-mix(in srgb, var(--color-brand-muted) 72%, var(--color-border));
    box-shadow: var(--surface-highlight);
}
.search-bar input {
    flex: 1;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.01em;
    background: transparent;
    color: var(--color-text-primary);
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
}
.search-bar input::placeholder {
    color: var(--color-text-tertiary);
    font-weight: 500;
    letter-spacing: -0.01em;
}
.search-icon {
    color: var(--color-text-tertiary);
    margin-right: 10px;
    width: 16px;
    height: 16px;
}
.search-clear {
    background: var(--main-page-card-bg);
    border: 1px solid var(--main-page-card-border);
    color: var(--color-text-tertiary);
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    display: none;
    line-height: 1;
    border-radius: 14px;
    box-shadow: var(--surface-highlight);
    transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
}
.search-clear:hover {
    background: var(--main-page-card-bg-hover);
    border-color: var(--color-brand-muted);
    color: var(--color-accent);
}
.search-clear:active {
    transform: scale(0.97);
}
.search-clear.visible {
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-bar--header .search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.search-bar--header .search-clear.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.calendar-search-row {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    margin: 0;
}
.search-bar--calendar {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 520px;
    min-height: 48px;
    margin-bottom: 0;
    padding: 10px 12px;
    border-radius: 17px;
    box-shadow: var(--surface-highlight);
}
.search-bar--calendar input {
    font-size: 16px;
    font-weight: 500;
}
.search-bar--calendar .search-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}
.search-bar--calendar .search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 12px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.search-bar--calendar .search-clear.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
[data-theme="dark"] .search-bar {
    background: rgba(19, 29, 49, 0.92);
    border-color: rgba(143, 177, 255, 0.18);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
[data-theme="dark"] .search-bar--header {
    box-shadow: none;
}
[data-theme="dark"] .search-bar--calendar {
    box-shadow: none;
}
[data-theme="dark"] .search-bar input {
    background: transparent !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}
[data-theme="dark"] .search-bar:focus-within {
    border-color: rgba(143, 177, 255, 0.34);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24), 0 0 0 3px rgba(143, 177, 255, 0.12);
}
[data-theme="dark"] .search-bar--header:focus-within {
    border-color: rgba(143, 177, 255, 0.28);
    box-shadow: none;
}
[data-theme="dark"] .search-bar--calendar:focus-within {
    border-color: rgba(143, 177, 255, 0.28);
    box-shadow: none;
}
[data-theme="dark"] .search-bar input::placeholder,
[data-theme="dark"] .search-icon {
    color: #a9b8d2;
}
[data-theme="dark"] .search-clear {
    background: rgba(255,255,255,0.08);
    color: #c7d3e7;
}
[data-theme="dark"] .search-clear:hover {
    background: rgba(255,255,255,0.14);
    color: white;
}

/* Jobs View */
.jobs-view { display: none; }
.jobs-view.active { display: block; }
.customers-section-header {
    margin: 6px 0 14px;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}
.customers-header-controls {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
    width: 100%;
}
.customers-header-controls .modal-btn {
    width: 100%;
    margin: 0;
    min-height: 46px;
    padding: 11px 14px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
}
.customers-sort-selector {
    display: block;
    white-space: nowrap;
    margin: 0;
}
.customers-sort-selector span {
    display: none;
}
.customers-sort-selector select {
    min-width: 0;
    width: 100%;
    height: 100%;
    min-height: 46px;
    padding: 11px 38px;
    font-size: 14px;
    box-shadow: var(--surface-highlight), var(--shadow-sm);
    border-radius: 16px;
}
.jobs-section-header {
    margin: 6px 0 14px;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}
#jobs-view > .content.main-scroll {
    padding-top: 12px;
}
#jobs-view .jobs-section-header {
    margin-top: 0;
}
.jobs-header-controls {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
    width: 100%;
}
.jobs-header-controls .modal-btn {
    width: 100%;
    margin: 0;
    min-height: 46px;
    padding: 11px 14px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
}
.jobs-filter-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
}
.jobs-header-controls.assigned-filter-enabled .jobs-filter-row {
    grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
}
.jobs-assigned-filter-selector[hidden] {
    display: none !important;
}
.jobs-filter-selector {
    display: block;
    white-space: nowrap;
    margin: 0;
}
.jobs-filter-selector span {
    display: none;
}
.jobs-filter-selector select {
    min-width: 0;
    width: 100%;
    height: 100%;
    min-height: 46px;
    padding: 11px 38px;
    font-size: 14px;
    box-shadow: var(--surface-highlight), var(--shadow-sm);
    border-radius: 16px;
}
.job-card {
    background: var(--main-page-card-bg);
    border: 1px solid var(--main-page-card-border);
    border-radius: var(--radius-md);
    padding: 0;
    margin-bottom: 16px;
    cursor: pointer;
    box-shadow: var(--main-page-card-shadow);
    transition: transform var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast), opacity var(--motion-fast);
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    overflow: hidden;
}
.job-card:hover {
    border-color: var(--color-brand-muted);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
/* Past and completed appointments - dimmed */
.job-card.past,
.job-card.status-completed,
.job-card.status-cancelled {
    opacity: 1;
}
.job-card.status-cancelled .job-card-subline,
.job-card.status-cancelled .job-summary {
    color: var(--color-text-tertiary);
}
.job-card.past .job-actions,
.job-card.status-completed .job-actions,
.job-card.status-cancelled .job-actions {
    display: none;
}
.job-date-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin: 22px 0 12px;
    padding: 0 14px;
    border: 1px solid rgba(61, 92, 150, 0.14);
    border-radius: 999px;
    background: rgba(47, 102, 214, 0.08);
    color: var(--color-text-primary);
    font-size: 17px;
    font-weight: 650;
    line-height: 1;
    box-shadow: 0 10px 22px rgba(31, 68, 132, 0.06);
    text-transform: none;
    letter-spacing: -0.02em;
}
.job-date-header:first-child {
    margin-top: 0;
}
[data-theme="dark"] .job-date-header {
    border-color: rgba(146, 170, 220, 0.2);
    background: rgba(125, 160, 255, 0.11);
    color: rgba(242, 247, 255, 0.96);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14);
}
.job-card-shell {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 21px 20px;
    position: relative;
}
.job-card-content {
    flex: 1;
    min-width: 0;
}
.job-card-topline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.job-card-controls {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}
.job-card-quick-call {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}
.job-card-quick-call svg {
    width: 17px;
    height: 17px;
}
.job-card-more {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}
.job-card-more svg {
    width: 17px;
    height: 17px;
}
.job-card-topline-copy {
    flex: 1;
    min-width: 0;
}
.job-customer {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.35;
    letter-spacing: -0.01em;
}
.job-card-subline {
    margin-top: 5px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
    line-height: 1.4;
}
.job-summary {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-top: 8px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.calendar-jobs-list .job-summary {
    -webkit-line-clamp: 1;
    margin-top: 6px;
}
.job-card-tags {
    margin-top: 12px;
}
.job-actions {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.job-action-btn {
    flex: 1;
    min-width: 84px;
    min-height: 44px;
    padding: 11px 12px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast), border-color var(--motion-fast);
}
.job-action-btn:active { transform: scale(0.97); }
.job-action-btn.call {
    background: var(--state-success-bg);
    color: var(--state-success-fg);
}
.job-action-btn.call:hover {
    background: rgba(23, 155, 99, 0.16);
}
.job-action-btn.text {
    background: var(--state-info-bg);
    color: var(--state-info-fg);
}
.job-action-btn.text:hover {
    background: rgba(36, 88, 211, 0.14);
}
.job-action-btn.complete {
    background: var(--color-text-primary);
    color: white;
}
.job-action-btn.complete:hover {
    opacity: 0.9;
}

/* Scheduled badge on voicemail cards */
.scheduled-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: var(--radius-xl);
    font-size: var(--font-size-xs);
    font-weight: 600;
    margin-left: 6px;
    vertical-align: middle;
    background: var(--state-info-bg);
    border: 1px solid transparent;
    color: var(--state-info-fg);
}

.jobs-workspace-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin: 12px 20px 2px;
    padding: 4px;
    border: none;
    border-radius: 18px;
    background: color-mix(in srgb, var(--control-bg) 72%, var(--color-brand-soft));
    box-shadow: none;
}

.jobs-workspace-tab {
    min-height: 44px;
    border: none;
    border-radius: 14px;
    background: transparent;
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
    transition: background-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast), border-color var(--motion-fast);
}

.jobs-workspace-tab:hover {
    color: var(--color-text-primary);
    background: color-mix(in srgb, var(--color-surface) 88%, var(--color-brand-soft));
}

.jobs-workspace-tab.active {
    color: var(--color-brand-contrast);
    background: var(--gradient-brand);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}

[data-theme="dark"] .jobs-workspace-tabs {
    background: rgba(255,255,255,0.09);
}

[data-theme="dark"] .jobs-workspace-tab {
    background: transparent;
    border-color: transparent;
    color: #dbe6f8;
    box-shadow: none;
}

[data-theme="dark"] .jobs-workspace-tab:hover {
    background: rgba(143, 177, 255, 0.12);
    color: #f6f9ff;
}

[data-theme="dark"] .jobs-workspace-tab.active {
    color: var(--color-brand-contrast);
    background: var(--gradient-brand);
    border-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}

/* Calendar View */
.calendar-view { display: none; position: relative; }
.calendar-view.active { display: block; padding-bottom: calc(var(--bottom-nav-height) + 28px + env(safe-area-inset-bottom, 0px)); }
.calendar-view.transitioning-from-day .calendar-date-header {
    visibility: hidden;
}

.calendar-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    padding: 12px;
    background: var(--color-surface);
    border-bottom: none;
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 10;
    gap: 10px;
}
.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}
.calendar-nav-btn {
    background: var(--color-neutral-soft);
    border: none;
    font-size: 18px;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    cursor: pointer;
    color: var(--color-text-secondary);
    border-radius: var(--radius-sm);
    position: relative;
    z-index: 999;
    transition: background-color var(--motion-fast), color var(--motion-fast);
}
.calendar-nav-btn:hover {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}
.calendar-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text-primary);
    min-width: 120px;
    text-align: center;
    flex-shrink: 1;
}
.calendar-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.calendar-today-btn {
    min-height: 44px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: none;
    background: var(--color-accent-soft);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: var(--color-accent);
    transition: background-color var(--motion-fast), color var(--motion-fast);
}
.calendar-today-btn:hover {
    background: var(--color-accent);
    color: white;
}
.calendar-add-btn {
    background: var(--gradient-brand);
    color: var(--color-brand-contrast);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
    width: 100%;
}
.calendar-add-btn:hover {
    background: var(--gradient-brand);
    color: var(--color-brand-contrast);
    filter: brightness(1.04);
}
.view-toggle {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--color-neutral-soft);
    border-radius: var(--radius-md);
    padding: 3px;
    gap: 2px;
    flex-shrink: 0;
    min-width: 160px;
}
.view-toggle-btn {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: var(--color-text-tertiary);
    border-radius: var(--radius-sm);
    transition: background-color var(--motion-fast), color var(--motion-fast);
    white-space: nowrap;
}
.view-toggle-btn.active {
    background: var(--gradient-brand);
    color: var(--color-brand-contrast);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}
.calendar-weekdays.day-view {
    grid-template-columns: 1fr;
}
.calendar-grid.day-view {
    grid-template-columns: 1fr;
    justify-items: center;
}
.calendar-grid.day-view .calendar-day {
    width: 90px;
}

/* Desktop: constrain calendar grid and shrink day cells */
@media (min-width: 901px) {
    #calendar-view:not(.day-view-mode) .calendar-header,
    #calendar-view:not(.day-view-mode) .calendar-jobs-list,
    #calendar-view:not(.day-view-mode) .calendar-weekdays,
    #calendar-view:not(.day-view-mode) .calendar-grid {
        max-width: none;
        width: auto;
        margin-right: 20px;
        margin-left: 20px;
    }
    #calendar-view.day-view-mode .calendar-header {
        max-width: 480px;
        justify-content: flex-end;
    }
    #calendar-view.day-view-mode .calendar-actions {
        margin-left: auto;
    }
    #calendar-view.day-view-mode .calendar-jobs-list {
        max-width: 480px;
    }
    .calendar-grid {
        max-width: 480px;
        margin: 0 auto;
        gap: 4px;
        padding: 8px 12px;
    }
    .calendar-grid .calendar-day {
        aspect-ratio: auto;
        min-height: 42px;
        padding: 6px 0;
    }
    .calendar-grid .calendar-day-number {
        font-size: 14px;
    }
    .calendar-weekdays {
        max-width: 480px;
        margin: 0 auto;
    }
    .calendar-header {
        max-width: 700px;
        margin: 0 auto;
        width: 100%;
    }
    .calendar-jobs-list {
        max-width: 700px;
        margin: 0 auto;
    }
}

/* Tablet/mobile layout tuning for jobs and calendar controls */
@media (max-width: 900px) {
    .calendar-header {
        padding: 10px;
        gap: 10px;
        align-items: stretch;
    }
    .calendar-nav {
        width: 100%;
        justify-content: space-between;
        gap: 6px;
    }
    .calendar-title {
        min-width: 0;
        flex: 1;
        font-size: 16px;
        padding: 0 6px;
    }
    .calendar-nav-btn {
        padding: 9px;
    }
    .calendar-today-btn {
        width: 100%;
        min-width: 0;
        padding: 8px 10px;
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .customers-section-header {
        margin: 6px 0 12px;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
    }
    .customers-header-controls {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .jobs-section-header {
        margin: 6px 0 12px;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
    }
    #jobs-view > .content.main-scroll {
        padding-top: 10px;
    }
    #jobs-view .jobs-section-header {
        margin-top: 0;
    }
    .jobs-header-controls {
        width: 100%;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .form-row--schedule {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

@media (max-width: 480px) {
    .address-entry-grid {
        grid-template-columns: minmax(0, 1fr) minmax(88px, 0.42fr);
        gap: 9px;
    }

    .bottom-nav {
        gap: 4px;
        padding-right: max(10px, calc(10px + env(safe-area-inset-right)));
        padding-left: max(10px, calc(10px + env(safe-area-inset-left)));
    }
    .nav-item {
        min-height: 54px;
        padding: 7px 8px;
        margin: 0;
        font-size: 12px;
        border-radius: 14px;
    }
    .nav-icon {
        width: 23px;
        height: 23px;
    }
    .detail-section--inline-field {
        grid-template-columns: minmax(0, 0.85fr) minmax(140px, 1.15fr);
        gap: 10px;
    }
    .calendar-header {
        padding: 10px;
        gap: 8px;
    }
    .calendar-nav-btn {
        min-width: 42px;
        min-height: 42px;
    }
    .calendar-today-btn,
    .view-toggle-btn {
        min-height: 42px;
    }
    .calendar-weekdays {
        padding: 8px 12px;
    }
    .calendar-grid {
        padding: 10px 12px 12px;
        gap: 5px;
    }
    .calendar-day {
        min-height: 44px;
    }
    .calendar-empty {
        padding-top: 28px;
    }
    .filter-dropdowns {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        align-items: stretch;
    }
    .filter-dropdown {
        min-width: 0;
    }
    .filter-dropdown::after {
        right: 9px;
    }
    .filter-dropdown select {
        min-height: 44px;
        padding: 8px 22px;
        font-size: 13px;
    }
    .filter-dropdown--status select {
        min-height: 54px;
        padding: 12px 34px;
    }
    .section-subtitle {
        font-size: 13px;
    }
    .activity-card-inner {
        min-height: 150px;
        padding: 17px 16px;
        gap: 11px;
    }
    .card-meta {
        gap: 7px;
        flex-wrap: wrap;
    }
    .card-badges {
        gap: 6px;
        margin-top: 14px;
    }
    .activity-card .card-badges,
    .customer-card .card-badges {
        padding-right: 0;
    }
    .card-tag {
        min-height: 26px;
        padding: 5px 9px;
        font-size: 12px;
    }
    .job-card-shell,
    .customer-card-shell {
        padding: 16px 18px;
        gap: 12px;
    }
    .customer-card-topline,
    .job-card-topline,
    .card-header {
        gap: 10px;
    }
    .customer-card-controls,
    .job-card-controls,
    .card-actions {
        gap: 6px;
    }
    .job-customer,
    .customer-name {
        font-size: 16px;
    }
    .job-card-subline,
    .customer-meta-row,
    .customer-phone,
    .job-summary,
    .customer-summary {
        font-size: 14px;
    }
    .status-choice-grid {
        grid-template-columns: 1fr;
    }
    .status-choice {
        min-height: 64px;
    }
    .call-action-card {
        min-height: 72px;
        padding: 14px;
    }
    .stats-row {
        gap: 6px;
        margin-bottom: 10px;
    }
    .home-brief-panel {
        min-height: 110px;
        margin-bottom: 0;
        padding: 18px 54px 18px 18px;
        border-radius: 22px;
    }
    .home-brief-info {
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
    }
    .home-week-proof {
        margin-top: 13px;
        font-size: 12.5px;
        line-height: 1.32;
    }
    .stat-card {
        min-height: 76px;
        padding: 12px 8px;
    }
    .stat-card--today-brief {
        min-height: 104px;
        padding: 14px;
    }
    .today-brief-title {
        font-size: 20px;
        line-height: 1.16;
    }
    .today-brief-summary {
        font-size: 14px;
        line-height: 1.34;
    }
    .stat-number {
        font-size: 26px;
    }
    .stat-number--time {
        font-size: 22px;
    }
    .stat-label {
        font-size: 12px;
        line-height: 1.2;
    }
    .modal-overlay {
        padding: 12px;
    }
    .modal-body {
        padding: 18px;
    }
    .booking-calendar-header {
        margin-bottom: 12px;
    }
    .booking-weekdays {
        margin-bottom: 4px;
    }
    .booking-weekday {
        font-size: 11px;
        padding: 4px 0;
        letter-spacing: 0.03em;
    }
    .booking-days {
        gap: 3px;
    }
    .booking-day {
        font-size: 14px;
    }
    .booking-nav-btn {
        width: 38px;
        height: 38px;
    }
    .time-slots {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }
    .time-slot {
        width: 100%;
        min-height: 44px;
        padding: 10px 8px;
    }
    .custom-time-input {
        width: 100%;
    }
    .mfa-method-card {
        padding: 12px 14px;
    }
    .mfa-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .mfa-actions {
        justify-content: stretch;
        flex-wrap: wrap;
        width: 100%;
    }
    .mfa-actions .btn-sm {
        flex: 1 1 160px;
        width: 100%;
        min-width: 0;
        min-height: 46px;
        padding: 11px 14px;
        font-size: 14px;
    }
    .calendar-today-btn {
        padding: 8px 8px;
        font-size: 13px;
    }
    .calendar-title {
        font-size: 15px;
    }
    .customers-header-controls,
    .jobs-header-controls {
        grid-template-columns: 1fr;
    }
    .jobs-header-controls.assigned-filter-enabled .jobs-filter-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .detail-actions {
        gap: 8px;
        padding-top: 14px;
        padding-right: max(28px, calc(22px + env(safe-area-inset-right)));
        padding-bottom: max(14px, calc(14px + env(safe-area-inset-bottom)));
        padding-left: max(28px, calc(22px + env(safe-area-inset-left)));
    }
    .detail-action-btn {
        min-height: 54px;
        padding: 14px 10px;
        font-size: 15px;
    }
    .service-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .service-row .form-control:first-child {
        grid-column: 1 / -1;
    }
    .service-row .form-control--select {
        grid-column: 1 / 2;
    }
    .service-row__remove {
        grid-column: 2 / 3;
    }
    .business-hours-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .business-hours-toggle {
        width: auto;
        justify-content: flex-start;
    }
    .business-hours-inputs {
        width: 100%;
        gap: 8px;
    }
    .business-hours-time {
        min-height: 44px;
        font-size: 14px;
    }
    .business-hours-separator {
        font-size: 14px;
    }
}

@media (max-width: 360px) {
    .content {
        padding-left: 14px;
        padding-right: 14px;
    }
    .filter-dropdowns {
        gap: 5px;
    }
    .filter-dropdown select {
        font-size: 12px;
        padding-left: 18px;
        padding-right: 18px;
    }
    .stat-card {
        padding-left: 6px;
        padding-right: 6px;
    }
    .caller-name {
        font-size: 15px;
    }
    .job-card,
    .activity-card {
        border-radius: var(--radius-md);
    }
    .job-card-shell,
    .customer-card-shell {
        padding: 14px 16px;
        gap: 10px;
    }
    .detail-disclosure-meta,
    .settings-disclosure-meta {
        display: none;
    }
    .customer-card-controls,
    .job-card-controls,
    .card-actions {
        gap: 5px;
    }
    .job-customer,
    .customer-name {
        font-size: 15px;
    }
    .job-status-badge,
    .job-assigned-badge,
    .status-pill--sm {
        font-size: 12px;
        padding: 5px 8px;
    }
    .customers-header-controls {
        grid-template-columns: 1fr;
    }
    .jobs-header-controls {
        grid-template-columns: 1fr;
    }
    .detail-actions {
        flex-wrap: wrap;
    }
    .detail-action-btn {
        flex: 1 1 calc(50% - 4px);
    }
    .detail-action-btn.calendar {
        flex-basis: 100%;
    }
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 8px 12px;
    background: var(--color-bg);
    flex-shrink: 0;
}
.calendar-weekday {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    padding: 12px;
    background: var(--color-surface);
    flex-shrink: 0;
    will-change: transform, opacity;
    transform-origin: center;
    touch-action: pan-y;
}
.calendar-grid.calendar-page-turn-next {
    animation: calendarPageTurnNext 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.calendar-grid.calendar-page-turn-prev {
    animation: calendarPageTurnPrev 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes calendarPageTurnNext {
    from {
        opacity: 0.55;
        transform: translateX(18px) scale(0.992);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}
@keyframes calendarPageTurnPrev {
    from {
        opacity: 0.55;
        transform: translateX(-18px) scale(0.992);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}
@media (prefers-reduced-motion: reduce) {
    .calendar-grid.calendar-page-turn-next,
    .calendar-grid.calendar-page-turn-prev {
        animation: none;
    }
}
.calendar-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
    position: relative;
    min-height: 48px;
}
.calendar-day:hover {
    background: var(--color-accent-soft);
}
.calendar-day:active {
    background: var(--gradient-brand);
    border-color: transparent;
    color: var(--color-brand-contrast);
    transform: scale(0.98);
}
.calendar-day.today {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
}
.calendar-day.selected {
    background: var(--gradient-brand);
    border-color: transparent;
    color: var(--color-brand-contrast);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}
.calendar-day.selected:hover {
    background: var(--gradient-brand);
    color: var(--color-brand-contrast);
    opacity: 0.96;
}
.calendar-day.other-month {
    opacity: 0.3;
}
.calendar-day-number {
    font-size: 16px;
    font-weight: 600;
}
.calendar-day-indicator {
    position: absolute;
    bottom: 6px;
    display: flex;
    gap: 3px;
}
.calendar-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-success);
}
.calendar-dot.urgent {
    background: var(--color-danger);
}
.calendar-day.selected .calendar-dot {
    background: white;
    box-shadow: 0 0 6px rgba(255,255,255,0.5);
}
.calendar-day.selected .calendar-dot.urgent {
    background: #fca5a5;
    box-shadow: 0 0 6px rgba(252,165,165,0.5);
}
.calendar-selected-date {
    display: none; /* Hidden - date headers now inline with jobs */
}
.calendar-jobs-list {
    padding: 0 16px calc(var(--bottom-nav-height) + 24px + env(safe-area-inset-bottom));
    position: relative;
}

#activity-list .activity-card:nth-child(n + 9),
#customers-list .customer-card:nth-child(n + 9),
#jobs-list .job-card:nth-of-type(n + 9),
#cust-jobs-list .interaction-item:nth-child(n + 9),
.calendar-jobs-list .job-card:nth-of-type(n + 9) {
    animation: none;
}
@supports (content-visibility: auto) {
    #activity-list .activity-card:nth-child(n + 7),
    #customers-list .customer-card:nth-child(n + 7),
    #jobs-list .job-card:nth-of-type(n + 7),
    #cust-jobs-list .interaction-item:nth-child(n + 7),
    .calendar-jobs-list .job-card:nth-of-type(n + 7) {
        content-visibility: auto;
        contain-intrinsic-size: 112px;
    }
}
.calendar-date-group {
    scroll-margin-top: 10px;
}
.calendar-date-group > .job-card:first-of-type {
    margin-top: 12px;
}
.calendar-date-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    margin: 18px 0 10px;
    padding: 0 14px;
    border: 1px solid rgba(61, 92, 150, 0.14);
    border-radius: 999px;
    background: rgba(47, 102, 214, 0.08);
    color: var(--color-text-primary);
    font-size: 17px;
    font-weight: 650;
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: none;
    box-shadow: 0 10px 22px rgba(31, 68, 132, 0.06);
}
.calendar-date-header.today {
    background: rgba(47, 102, 214, 0.08);
    color: var(--color-text-primary);
    border-color: rgba(61, 92, 150, 0.14);
}
.calendar-date-group:first-child .calendar-date-header {
    margin-top: 0;
}
[data-theme="dark"] .calendar-date-header,
[data-theme="dark"] .calendar-date-header.today {
    border-color: rgba(146, 170, 220, 0.2);
    background: rgba(125, 160, 255, 0.11);
    color: rgba(242, 247, 255, 0.96);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14);
}
.calendar-empty {
    text-align: center;
    padding: 30px 20px 42px;
    color: var(--color-text-tertiary);
}
.calendar-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    opacity: 0.3;
}
.calendar-empty-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 6px;
}
.calendar-empty-text {
    font-size: 13px;
    color: var(--color-text-tertiary);
}

/* Month view specific — compact to leave room for job list */
.calendar-grid.month-view {
    gap: 4px;
    padding: 8px 12px;
}
.calendar-grid.month-view .calendar-day {
    aspect-ratio: auto;
    min-height: 40px;
    padding: 5px 0;
    border-radius: var(--radius-sm);
}
.calendar-grid.month-view .calendar-day-number {
    font-size: 15px;
}

/* Conversation View - iOS-style chat UI */
.conversation-view {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg);
    z-index: 150;
    flex-direction: column;
}
.conversation-view.active {
    display: flex;
}
.conversation-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    padding-top: max(12px, env(safe-area-inset-top));
    gap: 12px;
    border-bottom: 1px solid var(--color-border);
}
.conversation-header .back-btn {
    order: 2;
    flex-shrink: 0;
    margin-left: auto;
    width: 44px;
    height: 44px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-secondary);
}
.conversation-header-info {
    flex: 1;
    min-width: 0;
    order: 1;
}
.conversation-header-name {
    font-weight: 700;
    font-size: 17px;
    color: var(--color-text-primary);
    line-height: 1.3;
}
.conversation-header-phone {
    font-size: 13px;
    color: var(--color-text-tertiary);
}
.messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--color-bg);
}
.message-bubble {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 15px;
    line-height: 1.4;
    position: relative;
    box-shadow: var(--surface-highlight), var(--shadow-sm);
}
.message-bubble.inbound {
    align-self: flex-start;
    background: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-bottom-left-radius: 4px;
}
.message-bubble.outbound {
    align-self: flex-end;
    background: var(--gradient-brand);
    color: white;
    border-bottom-right-radius: 4px;
}
.message-bubble.outbound.auto {
    background: var(--state-info-bg);
    color: var(--state-info-fg);
    border: 1px solid rgba(36, 88, 211, 0.18);
}
.message-bubble.outbound .message-time {
    color: rgba(255,255,255,0.82);
}
.message-bubble.outbound.auto .message-time {
    color: inherit;
}
.message-time {
    font-size: 13px;
    margin-top: 4px;
    opacity: 0.7;
}
.message-sender-type {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
    margin-bottom: 2px;
}
.message-input-area {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: 12px 16px max(22px, calc(env(safe-area-inset-bottom, 0px) + 10px));
    flex-shrink: 0;
}
.quick-responses {
    margin-bottom: 12px;
}
.quick-response-chip {
    width: 100%;
    min-height: 68px;
    padding: 13px 15px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: transform var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast), opacity var(--motion-fast);
    color: var(--color-text-primary);
    box-shadow: var(--surface-highlight), var(--shadow-sm);
    text-align: left;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    display: grid;
    gap: 5px;
}
.quick-response-chip:hover {
    border-color: var(--color-brand-muted);
    box-shadow: var(--surface-highlight), var(--shadow-md);
}
.quick-response-chip:active {
    transform: scale(0.99);
}
.quick-response-chip:disabled,
.quick-response-chip.is-sending {
    cursor: wait;
    opacity: 0.66;
}
.quick-response-kicker {
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.quick-response-text {
    color: var(--color-text-primary);
    font-size: 14px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.quick-response-hint {
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 500;
}
.message-input-container {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.message-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    font-size: 16px;
    outline: none;
    resize: none;
    min-height: 48px;
    max-height: 100px;
    font-family: inherit;
    line-height: 1.4;
}
.message-input:focus {
    border-color: var(--color-brand-start);
}
.send-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient-brand);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.send-btn:hover {
    opacity: 0.85;
}
.send-btn:active {
    opacity: 0.7;
}
.send-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.send-btn svg {
    width: 20px;
    height: 20px;
}

[data-theme="dark"] .conversation-header,
[data-theme="dark"] .message-input-area {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .messages-container {
    background: var(--color-bg);
}
[data-theme="dark"] .message-bubble.inbound {
    background: var(--color-surface-alt);
    color: var(--color-text-primary);
    border-color: var(--color-border);
}
[data-theme="dark"] .message-bubble.outbound {
    background: linear-gradient(135deg, #3f73e6 0%, #2458d3 100%);
    color: #ffffff;
}
[data-theme="dark"] .message-bubble.outbound.auto {
    background: rgba(18, 42, 92, 0.92);
    color: #dbe7ff;
    border-color: rgba(143, 177, 255, 0.22);
}
[data-theme="dark"] .quick-response-chip {
    background: rgba(19, 29, 49, 0.92);
    border-color: rgba(143, 177, 255, 0.16);
    color: var(--color-text-primary);
}
[data-theme="dark"] .quick-response-chip:hover {
    border-color: rgba(143, 177, 255, 0.3);
}
[data-theme="dark"] .quick-response-kicker {
    color: var(--color-brand);
}
[data-theme="dark"] .quick-response-text {
    color: var(--color-text-primary);
}
[data-theme="dark"] .quick-response-hint {
    color: var(--color-text-secondary);
}
.messages-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-text-tertiary);
    text-align: center;
    padding: 20px;
}
.messages-empty-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    opacity: 0.4;
}
.messages-empty-text {
    font-size: 14px;
}
.messages-date-divider {
    text-align: center;
    font-size: 13px;
    color: var(--color-text-tertiary);
    margin: 16px 0 8px;
    font-weight: 500;
}

/* Auth Screen */
.auth-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at top left, rgba(36, 88, 211, 0.16), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,0.78) 0%, var(--color-bg) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
[data-theme="dark"] .auth-screen {
    background:
        radial-gradient(circle at top left, rgba(143, 177, 255, 0.18), transparent 28%),
        linear-gradient(180deg, rgba(8, 16, 29, 0.72) 0%, var(--color-bg) 100%);
}

.auth-container {
    background: rgba(255,255,255,0.9);
    padding: 40px;
    border-radius: 18px;
    border: 1px solid rgba(36, 88, 211, 0.12);
    box-shadow: 0 24px 48px rgba(17, 34, 68, 0.14);
    backdrop-filter: blur(12px);
    width: 100%;
    max-width: 400px;
    text-align: center;
    margin: 20px;
}
[data-theme="dark"] .auth-container {
    background: rgba(15, 23, 40, 0.92);
    border-color: rgba(143, 177, 255, 0.14);
}
.auth-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    min-height: 52px;
}
.auth-logo {
    display: block;
    width: min(280px, 100%);
    height: auto;
}
[data-theme="dark"] .auth-brand {
    background: transparent;
    padding: 0;
    box-shadow: none;
}
[data-theme="dark"] .auth-logo {
    filter: invert(1) brightness(1.18);
}

.auth-title {
    font-size: 34px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.03em;
    line-height: 1.1;
}
[data-theme="dark"] .auth-title {
    color: var(--color-text-primary);
}

.auth-form h2 {
    font-size: 20px;
    margin-bottom: 20px;
    color: var(--color-text-primary);
}

.auth-form input {
    width: 100%;
    padding: 14px 16px;
    margin-bottom: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
}

.auth-form input:focus {
    outline: none;
    border-color: var(--color-brand-start);
    box-shadow: var(--focus-ring);
}

.auth-form .auth-tos-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 16px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.auth-form .auth-tos-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    padding: 0;
    border-radius: 4px;
    flex: 0 0 auto;
    cursor: pointer;
}

.auth-form .auth-tos-row a {
    color: var(--color-brand-start);
    text-decoration: underline;
}

.auth-form .btn-primary {
    width: 100%;
    padding: 14px;
    margin-top: 8px;
    font-size: 16px;
    color: var(--color-brand-contrast);
}

.auth-switch {
    margin-top: 20px;
    color: var(--color-text-secondary);
    font-size: 14px;
}

.auth-switch a {
    color: var(--color-brand-start);
    text-decoration: none;
    font-weight: 600;
}

.auth-error {
    color: #dc3545;
    margin-top: 12px;
    font-size: 14px;
    min-height: 20px;
}

/* Long-press Context Menu */
.context-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.15s ease;
}
.context-menu-overlay.active {
    display: block;
    opacity: 1;
}
.context-menu {
    position: fixed;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--main-page-card-border);
    border-radius: 18px;
    box-shadow: var(--surface-highlight), 0 18px 48px rgba(17, 34, 68, 0.2);
    min-width: 184px;
    max-width: min(256px, calc(100vw - 32px));
    max-height: calc(100dvh - var(--bottom-nav-height) - 40px - env(safe-area-inset-bottom, 0px));
    padding: 8px;
    transform: scale(0.9);
    opacity: 0;
    transition: transform var(--motion-fast), opacity var(--motion-fast);
    overflow-y: auto;
    overscroll-behavior: contain;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.context-menu::-webkit-scrollbar {
    display: none;
}
[data-theme="dark"] .context-menu {
    border-color: rgba(143, 177, 255, 0.16);
    background: rgba(19, 29, 49, 0.94);
}
.context-menu-overlay.active .context-menu {
    transform: scale(1);
    opacity: 1;
}
.context-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 13px 14px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background-color var(--motion-fast), color var(--motion-fast);
    -webkit-tap-highlight-color: transparent;
}
.context-menu-item:hover,
.context-menu-item:active {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}
.context-menu-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

@media (hover: none) and (pointer: coarse) {
    .activity-card:hover,
    .customer-card:hover,
    .job-card:hover {
        background: var(--main-page-card-bg);
        border-color: var(--main-page-card-border);
        box-shadow: var(--main-page-card-shadow);
        transform: none;
    }

    .stat-card:hover {
        background: var(--main-page-card-bg);
        border-color: var(--main-page-card-border);
    }

    .stat-card.selected:hover {
        background: var(--gradient-brand);
        border-color: transparent;
    }

    .settings-btn:hover,
    .notification-btn:hover {
        background: var(--main-page-card-bg);
        border-color: var(--main-page-card-border);
        color: var(--color-text-secondary);
    }

    .action-btn.more:hover {
        background: var(--main-page-card-bg);
        border-color: var(--main-page-card-border);
        color: var(--color-text-secondary);
        transform: none;
    }

    .filter-tab:hover {
        background: var(--color-surface);
        border-color: var(--color-border);
    }

    .activity-header:hover,
    .notification-item:hover,
    .context-menu-item:hover,
    .context-menu-item:active {
        background: transparent;
    }

    .call-action-card:hover {
        background: rgba(255,255,255,0.9);
        border-color: var(--color-border);
        box-shadow: var(--surface-highlight), var(--shadow-sm);
        transform: none;
    }
    .call-action-card--primary:hover {
        background: var(--gradient-brand);
        border-color: rgba(255, 255, 255, 0.16);
    }
    .status-btn.status-choice.handled.call-action-card:hover {
        background: #14845a;
        border-color: rgba(255, 255, 255, 0.16);
    }
    .call-action-card.status-btn.archive:hover {
        background: #4b5f7a;
        border-color: rgba(255, 255, 255, 0.16);
    }
    .call-action-card.status-btn.archive.selected:hover {
        background: #40536e;
        border-color: rgba(255, 255, 255, 0.24);
    }
    .call-action-card--danger:hover {
        background: #b8322a;
        border-color: rgba(255, 255, 255, 0.16);
    }

    [data-theme="dark"] .call-action-card:hover {
        background: rgba(19, 29, 49, 0.93);
        border-color: rgba(143, 177, 255, 0.14);
        transform: none;
    }
    [data-theme="dark"] .call-action-card--primary:hover {
        background: var(--gradient-brand);
        border-color: rgba(143, 177, 255, 0.26);
    }
    [data-theme="dark"] .status-btn.status-choice.handled.call-action-card:hover {
        background: #14845a;
        border-color: rgba(143, 224, 189, 0.42);
    }
    [data-theme="dark"] .call-action-card.status-btn.archive:hover {
        background: #4b5f7a;
        border-color: rgba(125, 145, 174, 0.42);
    }
    [data-theme="dark"] .call-action-card.status-btn.archive.selected:hover {
        background: #40536e;
        border-color: rgba(128, 159, 220, 0.34);
    }
    [data-theme="dark"] .call-action-card--danger:hover {
        background: #b8322a;
        border-color: rgba(248, 113, 113, 0.42);
    }

    [data-theme="dark"] .settings-btn:hover,
    [data-theme="dark"] .notification-btn:hover {
        background: var(--main-page-card-bg);
        border-color: var(--main-page-card-border);
        color: var(--color-text-secondary);
    }

    [data-theme="dark"] .action-btn.more:hover {
        background: rgba(23, 35, 58, 0.86);
        border-color: rgba(143, 177, 255, 0.16);
        color: var(--color-text-secondary);
    }

    [data-theme="dark"] .filter-tab:hover {
        background: var(--color-surface);
        border-color: var(--color-border);
    }

    [data-theme="dark"] .activity-header:hover,
    [data-theme="dark"] .notification-item:hover,
    [data-theme="dark"] .context-menu-item:hover,
    [data-theme="dark"] .context-menu-item:active {
        background: transparent;
    }
}
.context-menu-item.handled {
    color: var(--color-accent);
}
.context-menu-item.spam {
    color: var(--color-neutral);
}
.context-menu-item.archive {
    color: #666;
}
[data-theme="dark"] .context-menu-item.archive {
    color: #aaa;
}
.context-menu-divider {
    height: 1px;
    background: var(--color-border);
    margin: 8px;
}

@media (max-width: 640px) {
    .context-menu-overlay {
        background: rgba(6, 12, 24, 0.28);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    .context-menu {
        left: auto !important;
        top: auto !important;
        right: max(16px, env(safe-area-inset-right, 0px)) !important;
        bottom: calc(var(--bottom-nav-height) + 12px + env(safe-area-inset-bottom, 0px)) !important;
        width: min(244px, calc(100vw - 32px));
        min-width: 0;
        max-width: calc(100vw - 32px);
        max-height: min(62dvh, calc(100dvh - var(--bottom-nav-height) - 96px - env(safe-area-inset-bottom, 0px)));
        padding: 12px;
        border-radius: 26px;
        transform: translateY(18px) scale(0.98);
        transform-origin: bottom right;
        box-shadow: var(--surface-highlight), 0 24px 60px rgba(7, 18, 40, 0.24);
    }

    .context-menu::before {
        content: '';
        display: block;
        width: 42px;
        height: 4px;
        margin: 2px auto 10px;
        border-radius: 999px;
        background: rgba(109, 124, 150, 0.28);
    }

    .context-menu-overlay.active .context-menu {
        transform: translateY(0) scale(1);
    }

    .context-menu-item {
        min-height: 56px;
        padding: 14px 15px;
        border-radius: 15px;
        font-size: 16px;
    }

    .context-menu-item svg {
        width: 22px;
        height: 22px;
    }

    .context-menu-divider {
        margin: 10px 8px;
    }

    [data-theme="dark"] .context-menu::before {
        background: rgba(211, 224, 255, 0.24);
    }
}

/* Pull-to-refresh indicator */
.pull-refresh-indicator {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}
.pull-refresh-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}
.pull-refresh-indicator.ready .pull-refresh-spinner {
    border-top-color: var(--color-success);
}
.pull-refresh-indicator.refreshing .pull-refresh-spinner {
    animation: pullRefreshSpin 0.6s linear infinite;
}
@keyframes pullRefreshSpin {
    to { transform: rotate(360deg); }
}

/* Long-press visual feedback */
.activity-card.long-pressing {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}
.toast-stack {
    position: fixed;
    top: max(16px, env(safe-area-inset-top, 0px) + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: min(420px, calc(100% - 24px));
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 320;
    pointer-events: none;
}
.toast {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px;
    align-items: center;
    column-gap: 12px;
    min-height: 56px;
    padding: 12px 12px 12px 16px;
    border-radius: 16px;
    border: 1px solid var(--color-border-subtle);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 40px rgba(16, 24, 40, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: auto;
}
.toast--has-action {
    grid-template-columns: minmax(0, 1fr) auto 32px;
}
.toast.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.toast-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    grid-column: 1;
    min-height: 32px;
    min-width: 0;
}
.toast--single-line .toast-copy {
    min-height: 34px;
}
.toast-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin-bottom: 2px;
}
.toast-message {
    font-size: 14px;
    line-height: 1.35;
    color: var(--color-text-primary);
    margin: 0;
}
.toast-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-column: 2;
    flex-shrink: 0;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(82, 126, 226, 0.22);
    background: rgba(82, 126, 226, 0.1);
    color: var(--color-accent);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.toast-action:hover {
    background: rgba(82, 126, 226, 0.16);
}
.toast-action:disabled {
    cursor: default;
    opacity: 0.7;
}
.toast-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-column: 2;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--color-text-tertiary);
    line-height: 1;
    cursor: pointer;
}
.toast--has-action .toast-close {
    grid-column: 3;
}
.toast-close svg {
    display: block;
    width: 15px;
    height: 15px;
}
.toast-close:hover {
    background: var(--color-neutral-soft);
    color: var(--color-text-primary);
}
.toast--success {
    border-color: rgba(36, 143, 93, 0.16);
    background: rgba(247, 253, 249, 0.96);
}
.toast--info {
    border-color: rgba(56, 92, 196, 0.16);
    background: rgba(247, 249, 255, 0.96);
}
.toast--danger {
    border-color: rgba(192, 66, 66, 0.16);
    background: rgba(255, 248, 248, 0.97);
}
.toast--success .toast-title,
.toast--success .toast-message {
    color: var(--state-success-fg);
}
.toast--info .toast-title,
.toast--info .toast-message {
    color: var(--state-info-fg);
}
.toast--danger .toast-title,
.toast--danger .toast-message {
    color: var(--state-danger-fg);
}
[data-theme="dark"] .toast {
    background: rgba(15, 23, 40, 0.94);
    border-color: rgba(143, 177, 255, 0.14);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.42);
}
[data-theme="dark"] .toast-close:hover {
    background: rgba(255,255,255,0.08);
}
[data-theme="dark"] .toast-action {
    border-color: rgba(143, 177, 255, 0.28);
    background: rgba(143, 177, 255, 0.14);
    color: #dce7ff;
}
[data-theme="dark"] .toast-action:hover {
    background: rgba(143, 177, 255, 0.2);
}
[data-theme="dark"] .toast--success {
    background: rgba(17, 40, 30, 0.95);
    border-color: rgba(98, 214, 156, 0.18);
}
[data-theme="dark"] .toast--info {
    background: rgba(18, 33, 56, 0.96);
    border-color: rgba(143, 177, 255, 0.2);
}
[data-theme="dark"] .toast--danger {
    background: rgba(56, 20, 28, 0.96);
    border-color: rgba(255, 152, 152, 0.18);
}


/* =========================================================================
   Platform Admin View
   ========================================================================= */

.admin-view { display: none; }
.admin-view.active {
    display: block;
    padding: 16px 16px calc(var(--bottom-nav-height, 70px) + 24px + env(safe-area-inset-bottom));
    max-width: 1100px;
    margin: 0 auto;
}
.admin-view .content-block {
    padding: 0;
}

.admin-view__header { margin-bottom: 16px; }
.admin-view__header .page-title {
    margin: 0 0 4px;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
}
.admin-view .admin-filters .form-input {
    padding: 8px 10px;
    font-size: 0.9rem;
    height: auto;
    min-height: 36px;
}

.admin-view__tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.admin-tab {
    background: transparent;
    border: none;
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 500;
    color: var(--color-text-tertiary, #64748b);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    border-radius: 0;
}
.admin-tab:hover {
    color: var(--color-text-primary, #17253b);
}
.admin-tab.active {
    color: var(--color-text-primary, #17253b);
    border-bottom-color: var(--color-brand, #2458d3);
    background: transparent;
}
.admin-tab:focus { outline: none; }
.admin-tab:focus-visible {
    outline: 2px solid var(--color-brand, #2458d3);
    outline-offset: 2px;
}

.admin-tab-panel { display: none; }
.admin-tab-panel.active { display: block; }

.admin-filters {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
@media (max-width: 700px) {
    .admin-filters { grid-template-columns: 1fr; }
}

.admin-businesses-list { display: flex; flex-direction: column; gap: 8px; }

.admin-biz-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.admin-biz-card:hover {
    border-color: var(--accent-color, #2563eb);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
[data-theme="dark"] .admin-biz-card {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
}
.admin-biz-card__row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.admin-biz-card__title { font-weight: 600; flex: 1; }
.admin-biz-card__meta {
    display: flex;
    gap: 14px;
    font-size: 0.85rem;
    color: var(--muted-text, #6b7280);
    flex-wrap: wrap;
}
.admin-biz-card__meta .meta-label,
.admin-detail-grid .meta-label {
    color: var(--muted-text-strong, #374151);
    font-weight: 500;
}

.lifecycle-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    background: rgba(0,0,0,0.04);
    color: var(--muted-text-strong, #374151);
}
.lifecycle-badge--success {
    background: rgba(34,197,94,0.12);
    color: #15803d;
}
.lifecycle-badge--attention {
    background: rgba(234,179,8,0.16);
    color: #92400e;
}
.lifecycle-badge--danger {
    background: rgba(239,68,68,0.14);
    color: #b91c1c;
}
.lifecycle-badge--neutral {
    background: rgba(0,0,0,0.06);
    color: var(--muted-text-strong, #374151);
}
[data-theme="dark"] .lifecycle-badge { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .lifecycle-badge--success { background: rgba(34,197,94,0.18); color: #6ee7b7; }
[data-theme="dark"] .lifecycle-badge--attention { background: rgba(234,179,8,0.20); color: #fde68a; }
[data-theme="dark"] .lifecycle-badge--danger { background: rgba(239,68,68,0.20); color: #fca5a5; }

/* Business detail */
.admin-business-detail { padding-bottom: 90px; }
.admin-detail__header { margin-bottom: 16px; }
.admin-detail__title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 4px;
}
.admin-detail__title-row h2 { margin: 0; font-size: 1.4rem; }

.admin-detail-section {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
    background: var(--card-bg, #fff);
}
[data-theme="dark"] .admin-detail-section {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
}
.admin-detail-section__title {
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 0.95rem;
}
.admin-detail-section--danger {
    border-color: rgba(239,68,68,0.3);
    background: rgba(239,68,68,0.04);
}
[data-theme="dark"] .admin-detail-section--danger {
    background: rgba(239,68,68,0.07);
    border-color: rgba(239,68,68,0.35);
}

.admin-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px 16px;
    font-size: 0.9rem;
}

.admin-detail-field { margin-bottom: 10px; }
.admin-detail-field__label {
    font-size: 0.8rem;
    color: var(--muted-text, #6b7280);
    margin-bottom: 2px;
}
.admin-detail-field__row {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}
.admin-detail-field__value {
    flex: 1;
    word-break: break-word;
}

.admin-danger-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Users + audit tables */
.admin-users-table,
.admin-audit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.admin-users-table th,
.admin-audit-table th,
.admin-users-table td,
.admin-audit-table td {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    vertical-align: top;
}
.admin-users-table th,
.admin-audit-table th {
    color: var(--muted-text-strong, #374151);
    font-weight: 500;
    font-size: 0.8rem;
}
[data-theme="dark"] .admin-users-table th,
[data-theme="dark"] .admin-audit-table th,
[data-theme="dark"] .admin-users-table td,
[data-theme="dark"] .admin-audit-table td {
    border-bottom-color: rgba(255,255,255,0.08);
}

.admin-audit-mini { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.admin-audit-mini li {
    border-left: 2px solid var(--border-color, #e5e7eb);
    padding-left: 10px;
    font-size: 0.85rem;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.admin-audit-mini__reason {
    width: 100%;
    color: var(--muted-text, #6b7280);
    margin-top: 2px;
}