[data-theme="dark"] .card-item.card-default {
    border-color: rgba(99, 118, 117, 0.6);
    background: linear-gradient(135deg, rgba(99, 118, 117, 0.35) 0%, rgba(10, 12, 15, 0.85) 70%, var(--card-bg) 100%);
    box-shadow: 0 0 0 1px rgba(99, 118, 117, 0.4);
}
/* ═══════════════════════════════════════════════════════════════════════════
   HAWX CENTRAL - Customer Panel v5
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Primary Brand - aligned with main page */
    --hawx-teal: #637675;
    --hawx-teal-dark: #546463;
    --hawx-teal-light: #e8eeee;
    --hawx-gold: #EAB749;
    --hawx-gold-dark: #DFAA3A;

    /* Grays */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;

    /* Status Colors - aligned with main page */
    --success: #57c95a;
    --success-dark: #4caf50;
    --success-bg: #e8f5e9;
    --warning: #ff9800;
    --warning-dark: #f57c00;
    --warning-bg: #fff3e0;
    --error: #e96666;
    --error-dark: #cf5a5a;
    --error-bg: #ffebee;
    --info: #2196f3;
    --info-dark: #1976d2;
    --info-bg: #e3f2fd;
    --purple: #7c3aed;
    --purple-bg: #ede9fe;

    /* Highlighting System - for scannable data */
    --highlight-date: #f0f9ff;
    --highlight-date-border: #bae6fd;
    --highlight-date-text: #0c4a6e;
    --highlight-amount: #fffbeb;
    --highlight-amount-border: #fde68a;
    --highlight-amount-text: #92400e;
    --highlight-next: #f0fdf4;
    --highlight-next-border: #bbf7d0;
    --highlight-next-text: #166534;

    /* Typography */
    --font: 'DM Sans', system-ui, sans-serif;
    --mono: 'JetBrains Mono', monospace;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-focus: 0 0 0 2px rgba(99, 118, 117, 0.2);

    /* Background colors for dark mode transitions */
    --bg-primary: #ffffff;
    --bg-secondary: var(--gray-50);
    --bg-tertiary: var(--gray-100);
    --text-primary: var(--gray-800);
    --text-secondary: var(--gray-700);
    --text-muted: var(--gray-500);
    --border-color: var(--gray-200);
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --modal-bg: #ffffff;
    --overlay-bg: rgba(0, 0, 0, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE - Theme Override
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    /* Grays - Inverted for dark mode */
    --gray-50: #1a1a1a;
    --gray-100: #242424;
    --gray-200: #2d2d2d;
    --gray-300: #404040;
    --gray-400: #6b7280;
    --gray-500: #9ca3af;
    --gray-600: #d1d5db;
    --gray-700: #e5e7eb;
    --gray-800: #f3f4f6;

    /* Adjusted brand colors for dark mode */
    --hawx-teal: #7a9392;
    --hawx-teal-dark: #8ca8a7;
    --hawx-teal-light: #2d3b3a;
    --hawx-gold: #EAB749;
    --hawx-gold-dark: #f5c661;

    /* Status Colors - darker backgrounds for dark mode */
    --success-bg: #1a2e1a;
    --warning-bg: #2e2418;
    --error-bg: #2e1a1a;
    --info-bg: #1a2430;
    --purple-bg: #261a36;

    /* Highlighting System - dark mode */
    --highlight-date: #1a2e3a;
    --highlight-date-border: #2d4a5a;
    --highlight-date-text: #7dd3fc;
    --highlight-amount: #2e2a1a;
    --highlight-amount-border: #4a4020;
    --highlight-amount-text: #fde68a;
    --highlight-next: #1a2e1a;
    --highlight-next-border: #2d4a2d;
    --highlight-next-text: #86efac;

    /* Background colors */
    --bg-primary: #121212;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #242424;
    --text-primary: #f3f4f6;
    --text-secondary: #e5e7eb;
    --text-muted: #9ca3af;
    --border-color: #2d2d2d;
    --card-bg: #1a1a1a;
    --input-bg: #242424;
    --modal-bg: #1a1a1a;
    --overlay-bg: rgba(0, 0, 0, 0.7);

    /* Shadows - more subtle in dark mode */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-focus: 0 0 0 2px rgba(122, 147, 146, 0.4);
}

/* Dark mode specific overrides */
[data-theme="dark"] body {
    background: var(--bg-primary);
    color: var(--text-secondary);
}

[data-theme="dark"] .global-header {
    background: linear-gradient(135deg, var(--gray-100), var(--gray-50));
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .customer-panel {
    background: var(--bg-primary);
}

[data-theme="dark"] .tab-nav {
    background: var(--bg-secondary);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .tab-btn {
    color: var(--text-muted);
}

[data-theme="dark"] .tab-btn:hover {
    color: var(--text-secondary);
}

[data-theme="dark"] .tab-btn.active {
    color: var(--hawx-teal);
}

[data-theme="dark"] .tab-pane {
    background: var(--bg-primary);
}

[data-theme="dark"] .search-input-container input,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .search-input-container input::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] .search-results-dropdown {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .search-result-item:hover {
    background: var(--gray-200);
}

[data-theme="dark"] .search-result-item.selected {
    background: var(--hawx-teal-light);
}

[data-theme="dark"] .search-result-name {
    color: var(--text-primary);
}

/* Sidebar dark mode */
[data-theme="dark"] .kb-sidebar {
    background: var(--bg-secondary);
}

[data-theme="dark"] .kb-sidebar-header {
    background: linear-gradient(135deg, #4a5c5b, #3d4c4b);
}

[data-theme="dark"] .sidebar-section {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .sidebar-section-header {
    background: var(--bg-secondary);
}

[data-theme="dark"] .sidebar-section-header:hover {
    background: var(--gray-200);
}

[data-theme="dark"] .sidebar-section-header h4 {
    color: var(--text-secondary);
}

[data-theme="dark"] .sidebar-section-content {
    background: var(--bg-secondary);
}

[data-theme="dark"] .zip-code-input-wrapper,
[data-theme="dark"] .kb-search-input-wrapper {
    background: var(--input-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .kb-empty-state {
    color: var(--text-muted);
}

[data-theme="dark"] .kb-empty-state svg {
    color: var(--gray-400);
}

/* Cards and sections dark mode */
[data-theme="dark"] .ci-card,
[data-theme="dark"] .card-item,
[data-theme="dark"] .card,
[data-theme="dark"] .subs-card,
[data-theme="dark"] .sop-results,
[data-theme="dark"] .ticket-item,
[data-theme="dark"] .payment-item,
[data-theme="dark"] .timeline-item {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .ci-card:hover,
[data-theme="dark"] .card-item:hover,
[data-theme="dark"] .card:hover {
    background: var(--gray-200);
}

/* Modal dark mode */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .modal {
    background: var(--modal-bg);
    color: var(--text-secondary);
}

[data-theme="dark"] .modal-header {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .modal-footer {
    border-top-color: var(--border-color);
}

/* Buttons dark mode */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] button:not(.tab-btn):not(.hamburger-menu-btn):not(.kb-close-btn):not(.insp-pill-sm):not(.pill):not(.tl-type-badge) {
    background: #2a2a2a;
    border-color: #444;
    color: var(--gray-700);
}

[data-theme="dark"] button.sched-btn-sm,
[data-theme="dark"] button.sched-btn,
[data-theme="dark"] .sched-btn-sm,
[data-theme="dark"] .sched-btn {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(17, 24, 39, 0.65));
    border-color: rgba(148, 163, 184, 0.4);
    color: var(--text-primary);
}

[data-theme="dark"] button.sched-btn-sm:hover,
[data-theme="dark"] button.sched-btn:hover,
[data-theme="dark"] .sched-btn-sm:hover,
[data-theme="dark"] .sched-btn:hover {
    border-color: rgba(99, 118, 117, 0.8);
    color: var(--text-primary);
    background: linear-gradient(135deg, rgba(99, 118, 117, 0.35), rgba(30, 41, 59, 0.7));
}

[data-theme="dark"] button.sched-btn-sm.selected,
[data-theme="dark"] button.sched-btn.selected,
[data-theme="dark"] .sched-btn-sm.selected,
[data-theme="dark"] .sched-btn.selected {
    background: linear-gradient(135deg, rgba(99, 118, 117, 0.9), rgba(71, 85, 75, 0.95));
    border-color: var(--hawx-teal);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(99, 118, 117, 0.6);
}

[data-theme="dark"] .btn-secondary:hover {
    background: #3a3a3a;
    border-color: #555;
}

/* Tables dark mode */
[data-theme="dark"] table {
    border-color: var(--border-color);
}

[data-theme="dark"] th {
    background: var(--gray-200);
    color: var(--text-secondary);
}

[data-theme="dark"] td {
    border-color: var(--border-color);
}

[data-theme="dark"] tr:hover {
    background: var(--gray-200);
}

/* Customer top row dark mode */
[data-theme="dark"] .customer-top-row {
    background: var(--bg-secondary);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] #customer-name {
    color: var(--text-primary);
}

/* Scrollbar dark mode */
[data-theme="dark"] ::-webkit-scrollbar {
    background: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--gray-300);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

/* Tab scroll area dark mode */
[data-theme="dark"] .tab-scroll-area {
    background: var(--bg-primary);
}

/* Payment summary dark mode */
[data-theme="dark"] .pay-summary {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

/* Sub tabs dark mode */
[data-theme="dark"] .sub-tabs {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .sub-tab {
    color: var(--text-muted);
}

[data-theme="dark"] .sub-tab.active {
    color: var(--hawx-teal);
    background: var(--bg-primary);
}

/* History bar dark mode */
[data-theme="dark"] .history-bar,
[data-theme="dark"] .sched-toolbar,
[data-theme="dark"] .templates-bar,
[data-theme="dark"] .retention-bar {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

/* Toggle pills dark mode */
[data-theme="dark"] .filter-toggle {
    background: var(--gray-200);
    color: var(--text-muted);
}

[data-theme="dark"] .filter-toggle.active {
    background: var(--hawx-teal);
    color: white;
}

/* Knowledge base results dark mode */
[data-theme="dark"] .kb-results-wrapper {
    background: var(--bg-secondary);
}

[data-theme="dark"] .knowledge-search-result {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .knowledge-search-result:hover {
    background: var(--gray-200);
}

/* Skeleton loading dark mode */
[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-300) 50%, var(--gray-200) 75%);
}

/* Modal overlays and containers dark mode */
[data-theme="dark"] .modal-overlay .modal-backdrop {
    background: rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .modal-content {
    background: var(--modal-bg);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .modal-header {
    background: linear-gradient(135deg, var(--gray-100), var(--gray-50));
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .modal-header h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .modal-close {
    background: var(--gray-200);
    color: var(--text-muted);
}

[data-theme="dark"] .modal-close:hover {
    background: var(--gray-300);
    color: var(--text-secondary);
}

[data-theme="dark"] .modal-body {
    background: var(--modal-bg);
}

[data-theme="dark"] .modal-footer {
    background: var(--bg-secondary);
    border-top-color: var(--border-color);
}

/* Slot details modal dark mode */
[data-theme="dark"] .slot-details-modal {
    background: var(--card-bg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .slot-details-content {
    background: var(--card-bg);
}

[data-theme="dark"] .slot-response {
    border-color: var(--border-color);
}

[data-theme="dark"] .slot-response .response-header {
    background: var(--gray-100);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .slot-response.success .response-header {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(134, 239, 172, 0.4);
}

[data-theme="dark"] .slot-response.error .response-header {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(252, 165, 165, 0.4);
}

[data-theme="dark"] .slot-response .response-body {
    background: var(--card-bg);
}

[data-theme="dark"] .route-id {
    color: var(--text-secondary);
}

[data-theme="dark"] .response-label {
    color: var(--text-secondary);
}

[data-theme="dark"] .response-value {
    color: var(--text-primary);
}

[data-theme="dark"] .response-row:not(:last-child) {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .slot-details-footer {
    background: var(--gray-100);
    border-top-color: var(--border-color);
}

[data-theme="dark"] .slot-details-close-btn {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .slot-details-close-btn:hover {
    background: var(--gray-200);
}

/* Dropdown and select dark mode */
[data-theme="dark"] select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

[data-theme="dark"] select option {
    background: var(--card-bg);
    color: var(--text-primary);
}

/* Label and form text dark mode */
[data-theme="dark"] label {
    color: var(--text-primary);
}

[data-theme="dark"] .form-group label,
[data-theme="dark"] .edit-row label {
    color: var(--text-primary);
}

/* Status badges dark mode - ensure visibility */
[data-theme="dark"] .status-badge {
    border-color: var(--border-color);
}

/* Alert sections dark mode */
[data-theme="dark"] .alert-section {
    background: var(--card-bg);
    border-color: var(--border-color);
}

/* Date picker dark mode */
[data-theme="dark"] .daterangepicker {
    background: var(--modal-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .daterangepicker .calendar-table {
    background: var(--modal-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .daterangepicker td.off,
[data-theme="dark"] .daterangepicker td.off.in-range,
[data-theme="dark"] .daterangepicker td.off.start-date,
[data-theme="dark"] .daterangepicker td.off.end-date {
    background: var(--gray-200);
    color: var(--text-muted);
}

[data-theme="dark"] .daterangepicker td.available:hover,
[data-theme="dark"] .daterangepicker th.available:hover {
    background: var(--hawx-teal-light);
}

[data-theme="dark"] .daterangepicker td.active,
[data-theme="dark"] .daterangepicker td.active:hover {
    background: var(--hawx-teal);
}

/* Hamburger menu button dark mode */
[data-theme="dark"] .hamburger-menu-btn {
    color: var(--text-secondary);
}

[data-theme="dark"] .hamburger-menu-btn:hover {
    background: var(--gray-200);
}

/* Links dark mode */
[data-theme="dark"] a {
    color: var(--hawx-teal);
}

[data-theme="dark"] a:hover {
    color: var(--hawx-teal-dark);
}

/* Tooltips dark mode */
[data-theme="dark"] [data-tooltip]:before {
    background: var(--gray-800);
    color: var(--gray-100);
}

/* Primary button styles preserved in dark mode */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] button.primary {
    background: var(--hawx-teal);
    color: white;
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] button.primary:hover {
    background: var(--hawx-teal-dark);
}

/* Dividers and separators */
[data-theme="dark"] hr {
    border-color: var(--border-color);
}

/* Code and monospace text */
[data-theme="dark"] code,
[data-theme="dark"] .mono {
    background: var(--gray-200);
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE - Component Specific Overrides
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tab button active state */
[data-theme="dark"] .tab-btn.active {
    color: var(--hawx-teal);
    background: var(--bg-primary);
}

/* Section Card */
[data-theme="dark"] .section-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .section-head h4 {
    color: var(--text-secondary);
}

/* Sub-card compact & BAS styling */
[data-theme="dark"] .sub-card-compact {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .sub-card-compact:hover {
    border-color: var(--gray-400);
    background: var(--gray-200);
}

[data-theme="dark"] .sub-card-compact.sub-card-bas {
    background: linear-gradient(to right, #3d3520 0%, var(--card-bg) 12%);
    border-left-color: #f59e0b;
}

[data-theme="dark"] .sub-card-compact.sub-card-bas:hover {
    background: linear-gradient(to right, #4a4025 0%, var(--gray-200) 12%);
}

[data-theme="dark"] .sub-card-compact.sub-frozen {
    background: linear-gradient(to right, #3d3520 0%, var(--card-bg) 12%);
}

[data-theme="dark"] .sub-card-compact.sub-cancelled {
    background: linear-gradient(to right, #3d2020 0%, var(--card-bg) 12%);
}

[data-theme="dark"] .scc-name {
    color: var(--text-primary);
}

[data-theme="dark"] .scc-icon {
    background: var(--gray-200);
}

/* Scheduling Sub Tile */
[data-theme="dark"] .sched-sub-tile {
    background: var(--card-bg);
    border-color: var(--border-color);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

[data-theme="dark"] .sched-sub-bas {
    background: linear-gradient(to right, rgba(245, 158, 11, 0.25) 0%, var(--card-bg) 20%);
}

[data-theme="dark"] .sst-bas-info {
    background: linear-gradient(135deg, #4a4025 0%, #3d3520 100%);
    border-bottom-color: #d97706;
    color: #fde68a;
}

[data-theme="dark"] .sst-name {
    color: var(--text-secondary);
}

[data-theme="dark"] .sched-sub-active,
[data-theme="dark"] .sched-sub-tile.selected {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(5, 46, 34, 0.85));
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .sched-sub-active {
    border-left-color: rgba(16, 185, 129, 0.8);
}

/* Pending Card */
[data-theme="dark"] .pending-card {
    background: linear-gradient(135deg, rgba(12, 20, 24, 0.95), rgba(20, 28, 32, 0.85));
    border-color: rgba(148, 163, 184, 0.3);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .pending-card.selected {
    background: linear-gradient(135deg, rgba(99, 118, 117, 0.55), rgba(18, 32, 34, 0.9));
    border-color: rgba(99, 118, 117, 0.9);
    box-shadow: 0 0 0 2px rgba(99, 118, 117, 0.6), 0 12px 24px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .pending-card.warranty {
    background: linear-gradient(135deg, #3d3520 0%, var(--card-bg) 100%);
}

[data-theme="dark"] .pc-date {
    background: var(--info-bg);
}

[data-theme="dark"] .pc-date-pending {
    background: var(--warning-bg);
}

[data-theme="dark"] .pc-day {
    color: var(--text-primary);
}

[data-theme="dark"] .pc-title {
    color: var(--text-primary);
}

/* Payment Column */
[data-theme="dark"] .pay-column {
    background: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .pay-column-head {
    background: linear-gradient(180deg, var(--gray-100) 0%, var(--card-bg) 100%);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .pay-column-head h4 {
    color: var(--text-secondary);
}

/* Ticket Item hover states */
[data-theme="dark"] .ticket-item {
    background: var(--card-bg);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .ticket-item:first-child {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .ticket-item:hover {
    background: var(--gray-200);
}

[data-theme="dark"] .ticket-item.ticket-unpaid {
    background: #2e2418;
    border-left-color: var(--warning);
}

[data-theme="dark"] .ticket-item.ticket-unpaid:hover {
    background: #3d3020;
}

[data-theme="dark"] .ticket-item.ticket-pending {
    background: #1a2430;
    border-left-color: var(--info);
}

[data-theme="dark"] .ticket-item.ticket-pending:hover {
    background: #243040;
}

[data-theme="dark"] .ticket-item.ticket-template {
    background: var(--gray-100);
}

[data-theme="dark"] .ticket-item.ticket-template:hover {
    background: var(--gray-200);
}

/* Alert Items */
[data-theme="dark"] .alert-item {
    border-color: var(--border-color);
}

[data-theme="dark"] .alert-warn {
    background: var(--warning-bg);
    border-color: var(--warning);
}

[data-theme="dark"] .alert-info {
    background: var(--highlight-next);
    border-color: var(--highlight-next-border);
}

[data-theme="dark"] .alert-success {
    background: var(--success-bg);
    border-color: var(--success);
}

/* Note Items */
[data-theme="dark"] .note-item {
    background: var(--gray-200);
    border-left-color: var(--gray-400);
}

[data-theme="dark"] .note-item:hover {
    border-left-color: var(--hawx-teal);
}

[data-theme="dark"] .note-item p {
    color: var(--text-secondary);
}

[data-theme="dark"] .note-meta strong {
    color: var(--text-secondary);
}

/* Red Notes Section */
[data-theme="dark"] .red-notes-section {
    background: linear-gradient(135deg, #3d1a1a 0%, #2e1a1a 100%);
    border-color: #b91c1c;
}

[data-theme="dark"] .red-notes-header {
    border-bottom-color: #b91c1c;
}

[data-theme="dark"] .red-notes-title {
    color: #fca5a5;
}

/* Contact Card */
[data-theme="dark"] .contact-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .contact-title {
    color: var(--text-muted);
}

/* Contact Section */
[data-theme="dark"] .contact-section {
    border-bottom-color: var(--border-color);
}

/* Sub-tabs */
[data-theme="dark"] .sub-tabs {
    background: var(--bg-secondary);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .sub-tab {
    color: var(--text-muted);
}

[data-theme="dark"] .sub-tab:hover {
    background: var(--gray-200);
    color: var(--text-secondary);
}

[data-theme="dark"] .sub-tab.active {
    background: var(--hawx-teal);
    color: white;
}

/* Payment App Chip */
[data-theme="dark"] .pay-app-chip {
    background: var(--gray-200);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .pay-app-chip:hover {
    background: var(--hawx-teal-light);
    border-color: var(--hawx-teal);
    color: var(--hawx-teal);
}

[data-theme="dark"] .ticket-payments .pay-app-chip {
    background: var(--gray-200);
    border-color: #6b5b9a;
    color: #a78bfa;
}

[data-theme="dark"] .ticket-payments .pay-app-chip:hover {
    background: var(--purple-bg);
    border-color: var(--purple);
}

/* Card display (payment cards) */
[data-theme="dark"] .card-display {
    background: var(--gray-200);
    border-color: var(--border-color);
}

[data-theme="dark"] .card-name {
    color: var(--text-primary);
}

/* Subs overview */
[data-theme="dark"] .subs-overview {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

/* Forms and inputs in cards */
[data-theme="dark"] .form-row input,
[data-theme="dark"] .form-row select,
[data-theme="dark"] .edit-input {
    background: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Timeline events */
[data-theme="dark"] .timeline-event {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .timeline-event:hover {
    background: var(--gray-200);
}

/* Slot cards for scheduling */
[data-theme="dark"] .slot-card,
[data-theme="dark"] .time-slot {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .slot-card:hover,
[data-theme="dark"] .time-slot:hover {
    background: var(--gray-200);
    border-color: var(--hawx-teal);
}

[data-theme="dark"] .slot-card.selected,
[data-theme="dark"] .time-slot.selected {
    background: var(--hawx-teal-light);
    border-color: var(--hawx-teal);
}

/* Templates section */
[data-theme="dark"] .template-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .template-card:hover {
    background: var(--gray-200);
}

/* Retention section */
[data-theme="dark"] .retention-card,
[data-theme="dark"] .proactive-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

/* Analysis/AI section */
[data-theme="dark"] .analysis-box,
[data-theme="dark"] .ai-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

/* Appointment cards */
[data-theme="dark"] .appt-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .appt-card:hover {
    background: var(--gray-200);
}

/* Call items */
[data-theme="dark"] .call-item {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .call-item:hover {
    background: var(--gray-200);
}

/* Subs card (main subscription list) */
[data-theme="dark"] .subs-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

/* CI Card (Customer Info) */
[data-theme="dark"] .ci-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .ci-card:hover {
    background: var(--gray-200);
}

/* Inspection tiles */
[data-theme="dark"] .inspection-tile {
    background: var(--card-bg);
    border-color: var(--border-color);
}

/* Date pickers in dark mode */
[data-theme="dark"] .daterangepicker {
    background: var(--modal-bg);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .daterangepicker .drp-buttons {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .daterangepicker .calendar-table th,
[data-theme="dark"] .daterangepicker .calendar-table td {
    color: var(--text-secondary);
}

[data-theme="dark"] .daterangepicker select.monthselect,
[data-theme="dark"] .daterangepicker select.yearselect {
    background: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

/* Customer panel empty state */
[data-theme="dark"] .customer-panel.no-customer::before {
    color: var(--text-muted);
}

/* Scrollbar track in all areas */
[data-theme="dark"] .subs-cards-compact::-webkit-scrollbar-thumb,
[data-theme="dark"] .notes-list::-webkit-scrollbar-thumb,
[data-theme="dark"] .tab-scroll-area::-webkit-scrollbar-thumb {
    background: var(--gray-400);
}

/* Flag items */
[data-theme="dark"] .flag-item {
    background: var(--gray-200);
    border-color: var(--border-color);
}

/* Warranty indicators */
[data-theme="dark"] .warranty-badge {
    background: var(--warning-bg);
    color: var(--warning);
}

/* Quick action buttons */
[data-theme="dark"] .quick-action-btn {
    background: var(--gray-200);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .quick-action-btn:hover {
    background: var(--gray-300);
    color: var(--text-primary);
}

/* Subscription history expansion */
[data-theme="dark"] .sub-history-item {
    background: var(--gray-200);
    border-color: var(--border-color);
}

/* Payment summary section */
[data-theme="dark"] .pay-summary {
    background: linear-gradient(180deg, var(--gray-100) 0%, var(--bg-primary) 100%);
    border-color: var(--border-color);
}

[data-theme="dark"] .pay-summary-stat {
    color: var(--text-secondary);
}

[data-theme="dark"] .pay-summary-value {
    color: var(--text-primary);
}

/* Auth section */
[data-theme="dark"] .auth-section {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .auth-section-title {
    color: var(--text-muted);
}

/* Edit modals and forms */
[data-theme="dark"] .edit-modal-content {
    background: var(--modal-bg);
}

[data-theme="dark"] .edit-form-group input,
[data-theme="dark"] .edit-form-group select,
[data-theme="dark"] .edit-form-group textarea {
    background: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Badge variations */
[data-theme="dark"] .badge,
[data-theme="dark"] .status-pill {
    border-color: var(--border-color);
}

/* Gradients in dark - soften the white endpoints */
[data-theme="dark"] .subs-cards-compact {
    background: var(--bg-secondary);
}

/* Appointment Edit Modal */
[data-theme="dark"] .appt-edit-summary {
    background: var(--info-bg);
    border-color: var(--info);
}

[data-theme="dark"] .appt-edit-title {
    color: var(--text-primary);
}

[data-theme="dark"] .appt-edit-label {
    color: var(--text-muted);
}

[data-theme="dark"] .appt-edit-toggles {
    background: var(--gray-200);
}

[data-theme="dark"] .appt-edit-textarea {
    background: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Pest Pills */
[data-theme="dark"] .pest-pill {
    background: var(--gray-200);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .pest-pill:hover {
    border-color: var(--hawx-teal);
    color: var(--hawx-teal);
}

[data-theme="dark"] .pest-pill.selected {
    background: var(--hawx-teal);
    border-color: var(--hawx-teal);
    color: white;
}

/* CI Change Button */
[data-theme="dark"] .ci-change-btn {
    background: var(--gray-200);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .ci-change-btn:hover {
    border-color: var(--hawx-teal);
    color: var(--hawx-teal);
}

/* Status Badge variations */
[data-theme="dark"] .status-badge.active {
    background: var(--success-bg);
    color: var(--success);
}

[data-theme="dark"] .status-badge.frozen,
[data-theme="dark"] .status-badge.suspended {
    background: var(--info-bg);
    color: var(--info);
}

[data-theme="dark"] .status-badge.cancelled,
[data-theme="dark"] .status-badge.inactive {
    background: var(--error-bg);
    color: var(--error);
}

[data-theme="dark"] .status-badge.pending {
    background: var(--warning-bg);
    color: var(--warning);
}

[data-theme="dark"] .status-scheduled {
    background: var(--info-bg) !important;
    color: var(--info) !important;
}

/* Toggle Items in forms */
[data-theme="dark"] .appt-toggle-item {
    color: var(--text-secondary);
}

[data-theme="dark"] .toggle-label-text {
    color: var(--text-secondary);
}

/* Sched buttons */
[data-theme="dark"] .sched-btn,
[data-theme="dark"] .sched-btn-sm {
    background: var(--gray-200);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .sched-btn:hover,
[data-theme="dark"] .sched-btn-sm:hover {
    background: var(--gray-300);
    color: var(--text-primary);
}

[data-theme="dark"] .sched-btn.selected,
[data-theme="dark"] .sched-btn-sm.selected {
    background: var(--hawx-teal);
    border-color: var(--hawx-teal);
    color: white;
}

/* Slot selection UI */
[data-theme="dark"] .slot-date-header {
    background: var(--gray-200);
    color: var(--text-secondary);
}

[data-theme="dark"] .slot-time {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .slot-time:hover {
    background: var(--gray-200);
    border-color: var(--hawx-teal);
}

[data-theme="dark"] .slot-time.selected {
    background: var(--hawx-teal);
    color: white;
}

/* SMS Modal */
[data-theme="dark"] .sms-template-btn {
    background: var(--gray-200);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .sms-template-btn:hover {
    background: var(--gray-300);
    border-color: var(--hawx-teal);
}

[data-theme="dark"] .sms-template-btn.selected {
    background: var(--hawx-teal-light);
    border-color: var(--hawx-teal);
    color: var(--hawx-teal);
}

[data-theme="dark"] .sms-preview {
    background: var(--gray-200);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

/* Add-on pills */
[data-theme="dark"] .addon-pill {
    background: var(--gray-200);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .addon-pill.selected {
    background: var(--purple-bg);
    border-color: var(--purple);
    color: var(--purple);
}

/* Card type icons (visa, mastercard, etc) */
[data-theme="dark"] .card-type-icon {
    background: var(--gray-200);
}

/* Empty states */
[data-theme="dark"] .empty-state {
    color: var(--text-muted);
}

[data-theme="dark"] .empty-state svg {
    color: var(--gray-400);
}

/* Loading spinners */
[data-theme="dark"] .spinner {
    border-color: var(--gray-300);
    border-top-color: var(--hawx-teal);
}

/* Info boxes and callouts */
[data-theme="dark"] .info-box {
    background: var(--info-bg);
    border-color: var(--info);
    color: var(--text-secondary);
}

[data-theme="dark"] .warning-box {
    background: var(--warning-bg);
    border-color: var(--warning);
    color: var(--text-secondary);
}

[data-theme="dark"] .error-box {
    background: var(--error-bg);
    border-color: var(--error);
    color: var(--text-secondary);
}

/* Checkbox and radio styling */
[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"] {
    background: var(--input-bg);
    border-color: var(--border-color);
}

/* Toggle slider background update for dark mode */
[data-theme="dark"] .toggle-slider {
    background-color: var(--gray-400);
}

/* Knowledge base answer section */
[data-theme="dark"] .kb-answer-section {
    background: var(--card-bg);
    border-color: var(--border-color);
}

/* Schedule confirm section */
[data-theme="dark"] .sched-confirm {
    background: var(--card-bg);
    border-color: var(--border-color);
}

/* Payment forms */
[data-theme="dark"] .payment-form-section {
    background: var(--card-bg);
    border-color: var(--border-color);
}

/* Customer panel header/top row text */
[data-theme="dark"] .ci-main h2 {
    color: var(--text-primary);
}

[data-theme="dark"] .ci-id {
    color: var(--text-muted);
}

/* Pills and filter toggles */
[data-theme="dark"] .pill {
    background: var(--gray-200);
    border-color: var(--border-color);
    color: var(--text-muted);
}

[data-theme="dark"] .pill:hover {
    background: var(--gray-300);
    border-color: var(--gray-400);
    color: var(--text-secondary);
}

[data-theme="dark"] .pill.active {
    background: var(--hawx-teal);
    border-color: var(--hawx-teal);
    color: white;
}

/* Toggle pills in dark mode - inactive state is muted/dimmed */
[data-theme="dark"] .filter-toggles .toggle-pill:not(.active) {
    background: var(--gray-200);
    border-color: var(--border-color);
    color: var(--text-muted);
    opacity: 0.5;
}

[data-theme="dark"] .filter-toggles .toggle-pill:not(.active) .pill-dot {
    opacity: 0.4;
}

[data-theme="dark"] .filter-toggles .toggle-pill:not(.active):hover {
    background: var(--gray-300);
    opacity: 0.7;
}

/* Active toggle pills in dark mode - use colored borders with subtle tinted backgrounds */
[data-theme="dark"] .filter-toggles .toggle-pill.active {
    background: var(--card-bg);
    color: var(--text-primary);
    border-width: 2px;
    opacity: 1;
}

[data-theme="dark"] .filter-toggles .toggle-pill.active[data-filter="appointment"] {
    background: rgba(34, 197, 94, 0.15);
    border-color: var(--success);
    color: var(--success);
}

[data-theme="dark"] .filter-toggles .toggle-pill.active[data-filter="note"] {
    background: rgba(156, 163, 175, 0.15);
    border-color: var(--gray-400);
    color: var(--text-secondary);
}

[data-theme="dark"] .filter-toggles .toggle-pill.active[data-filter="sms"] {
    background: rgba(59, 130, 246, 0.15);
    border-color: var(--info);
    color: var(--info);
}

[data-theme="dark"] .filter-toggles .toggle-pill.active[data-filter="email"] {
    background: rgba(245, 158, 11, 0.15);
    border-color: #f59e0b;
    color: #f59e0b;
}

[data-theme="dark"] .filter-toggles .toggle-pill.active[data-filter="call"] {
    background: rgba(124, 58, 237, 0.15);
    border-color: var(--purple);
    color: var(--purple);
}

[data-theme="dark"] .filter-toggles .toggle-pill.active[data-filter="ai"] {
    background: rgba(139, 92, 246, 0.15);
    border-color: #8b5cf6;
    color: #8b5cf6;
}

[data-theme="dark"] .filter-toggles .toggle-pill.active[data-filter="payment"] {
    background: rgba(234, 183, 73, 0.15);
    border-color: var(--hawx-gold);
    color: var(--hawx-gold);
}

[data-theme="dark"] .filter-toggles .toggle-pill.active[data-filter="subscription"] {
    background: rgba(99, 118, 117, 0.2);
    border-color: var(--hawx-teal);
    color: var(--hawx-teal);
}

[data-theme="dark"] .filter-toggles .toggle-pill.active[data-filter="flag"] {
    background: rgba(245, 158, 11, 0.15);
    border-color: var(--warning);
    color: var(--warning);
}

/* Toggle all button */
[data-theme="dark"] .toggle-all-btn {
    background: var(--gray-200);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .toggle-all-btn:hover {
    background: var(--gray-300);
}

/* Inspection checkbox */
[data-theme="dark"] .inspection-checkbox {
    background: var(--gray-200);
    border-color: var(--border-color);
}

/* SST (Scheduling sub tile) elements */
[data-theme="dark"] .sst-status {
    background: var(--gray-200);
    color: var(--text-muted);
}

/* Payment list items */
[data-theme="dark"] .payment-item {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .payment-item:hover {
    background: var(--gray-200);
}

/* Ticket info rows */
[data-theme="dark"] .ticket-service,
[data-theme="dark"] .ticket-date,
[data-theme="dark"] .ticket-total {
    color: var(--text-secondary);
}

/* PC Actions (pending card actions) */
[data-theme="dark"] .pc-actions button {
    background: var(--gray-200);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .pc-actions button:hover {
    background: var(--gray-300);
}

/* Call record styling */
[data-theme="dark"] .call-record {
    background: var(--card-bg);
    border-color: var(--border-color);
}

/* Quick stats */
[data-theme="dark"] .quick-stat {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .quick-stat-value {
    color: var(--text-primary);
}

[data-theme="dark"] .quick-stat-label {
    color: var(--text-muted);
}

/* Out of season styling */
[data-theme="dark"] .sub-card-compact.sub-out-of-season {
    background: var(--gray-200);
}

[data-theme="dark"] .sub-card-compact.sub-out-of-season .scc-header {
    opacity: 0.7;
}

/* Has pending highlight */
[data-theme="dark"] .sub-card-compact.has-pending {
    box-shadow: 0 0 0 2px var(--info);
}

/* Search input container */
[data-theme="dark"] .search-input-container input {
    background: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .search-input-container input::placeholder {
    color: var(--text-muted);
}

/* Search results dropdown */
[data-theme="dark"] .search-results-dropdown {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .search-result-item {
    border-color: var(--border-color);
}

[data-theme="dark"] .search-result-item:hover {
    background: var(--gray-200);
}

/* Customer panel background */
[data-theme="dark"] .customer-panel {
    background: var(--bg-primary);
}

[data-theme="dark"] .customer-panel.no-customer::before {
    color: var(--text-muted);
}

/* Tab navigation */
[data-theme="dark"] .tab-nav {
    background: var(--gray-100);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .tab-btn {
    color: var(--text-muted);
}

[data-theme="dark"] .tab-btn:hover {
    color: var(--text-primary);
}

[data-theme="dark"] .tab-btn.active {
    background: var(--bg-primary);
    color: var(--hawx-teal);
}

/* Ghost button */
[data-theme="dark"] .btn-ghost {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .btn-ghost:hover {
    background: var(--gray-200);
    border-color: var(--gray-400);
}

/* Extra small buttons */
[data-theme="dark"] .btn-xs {
    background: var(--gray-200);
    color: var(--text-secondary);
}

[data-theme="dark"] .btn-xs:hover {
    background: var(--gray-300);
}

[data-theme="dark"] .btn-xs:disabled {
    background: var(--gray-200);
    color: var(--text-muted);
}

/* Customer top row */
[data-theme="dark"] .customer-top-row {
    background: linear-gradient(135deg, var(--gray-100), var(--bg-primary));
    border-bottom-color: var(--border-color);
}

/* Contact card */
[data-theme="dark"] .contact-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .contact-row-inline span {
    color: var(--text-secondary);
}

[data-theme="dark"] .contact-row-inline .contact-label {
    color: var(--text-muted);
}

/* Auth contacts card */
[data-theme="dark"] .auth-contacts-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .auth-head {
    background: var(--gray-200);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .auth-item {
    background: var(--gray-200);
}

[data-theme="dark"] .auth-name {
    color: var(--text-primary);
}

/* Customer notes card */
[data-theme="dark"] .customer-notes-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .notes-head {
    background: var(--gray-200);
    border-bottom-color: var(--border-color);
}

/* Chip */
[data-theme="dark"] .chip {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .chip:hover {
    border-color: var(--hawx-teal);
    color: var(--hawx-teal);
}

/* Sub card compact - frozen variant */
[data-theme="dark"] .sub-card-compact.sub-frozen {
    background: linear-gradient(to right, rgba(245, 158, 11, 0.2) 0%, var(--card-bg) 8%);
}

/* SCC schedule button danger */
[data-theme="dark"] .scc-schedule-btn-danger {
    background: var(--card-bg);
}

/* Pending loading */
[data-theme="dark"] .scc-pending-loading {
    background: var(--gray-200);
}

/* Sched toolbar */
[data-theme="dark"] .sched-toolbar {
    background: var(--gray-100);
    border-bottom-color: var(--border-color);
}

/* Sched btn sm */
[data-theme="dark"] .sched-btn-sm {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .sched-btn-sm:hover {
    border-color: var(--hawx-teal);
    color: var(--hawx-teal);
}

/* Inspection pills compact container */
[data-theme="dark"] .insp-pills-compact {
    background: var(--gray-200);
    border-color: var(--border-color);
}

/* Inspection pill small */
[data-theme="dark"] .insp-pill-sm {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .insp-pill-sm:hover {
    border-color: var(--hawx-teal);
    color: var(--hawx-teal);
}

[data-theme="dark"] .insp-pill-sm.selected,
[data-theme="dark"] .insp-pill-sm.active {
    background: var(--hawx-teal);
    border-color: var(--hawx-teal);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Schedule option button */
[data-theme="dark"] button.sched-opt-btn,
[data-theme="dark"] .sched-opt-btn {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] button.sched-opt-btn:hover,
[data-theme="dark"] .sched-opt-btn:hover {
    border-color: var(--hawx-teal);
    color: var(--hawx-teal);
}

[data-theme="dark"] button.sched-opt-btn.selected,
[data-theme="dark"] button.sched-opt-btn.active,
[data-theme="dark"] .sched-opt-btn.selected,
[data-theme="dark"] .sched-opt-btn.active {
    background: var(--hawx-teal);
    border-color: #7dd3d0;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(125, 211, 208, 0.4), 0 4px 12px rgba(0, 0, 0, 0.45);
}

/* SST frozen/disabled states */
[data-theme="dark"] .sst-frozen {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

[data-theme="dark"] .sst-disabled {
    background: var(--gray-200);
    color: var(--text-muted);
}

/* Target pest pills dark mode */
[data-theme="dark"] .target-pest {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .target-pest:hover {
    border-color: var(--hawx-teal);
    background: rgba(99, 118, 117, 0.25);
    color: #fff;
}

[data-theme="dark"] .target-pest.selected {
    background: var(--hawx-teal);
    border-color: var(--hawx-teal);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* SOP confirm box */
[data-theme="dark"] .sop-confirm-box {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .sop-confirm-text {
    color: var(--text-primary);
}

[data-theme="dark"] .sop-confirm-dropdown select {
    background: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* SOP date input */
[data-theme="dark"] .sop-date-input {
    background: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .sop-date-input:hover {
    border-color: var(--gray-400);
}

/* SOP Top Picks dark mode */
[data-theme="dark"] .sop-top-picks {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(17, 24, 39, 0.4) 100%);
    border-color: var(--border-color);
}

[data-theme="dark"] .sop-top-picks-label {
    color: var(--text-secondary);
    border-right-color: var(--border-color);
}

/* Appointment grid dark mode */
[data-theme="dark"] .sop-appt-grid-wrapper {
    border-color: var(--border-color);
    background: var(--card-bg);
}

[data-theme="dark"] .sop-appt-grid-wrapper::-webkit-scrollbar-thumb {
    background: var(--gray-400);
}

[data-theme="dark"] .sop-appt-grid {
    background: var(--border-color);
}

[data-theme="dark"] .appt-day-wrapper {
    background: var(--card-bg);
}

[data-theme="dark"] .appt-day-wrapper:hover {
    background: var(--gray-100);
}

[data-theme="dark"] .appt-day-header {
    background: var(--gray-100);
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

/* Appointment option dark mode */
[data-theme="dark"] .appt-option {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .appt-option:hover:not(.unavailable):not(.disabled) {
    background: rgba(99, 118, 117, 0.25);
    border-color: var(--hawx-teal);
    color: #fff;
}

[data-theme="dark"] .appt-option.selected {
    background: linear-gradient(135deg, var(--hawx-teal) 0%, #5a8a87 100%);
    border-color: var(--hawx-teal);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .appt-option.selected:hover {
    background: linear-gradient(135deg, var(--hawx-teal-dark) 0%, #4a7a77 100%);
}

[data-theme="dark"] .appt-option.unavailable,
[data-theme="dark"] .appt-option.disabled {
    background: var(--gray-100);
    border-color: var(--border-color);
    color: var(--gray-400);
}

[data-theme="dark"] .appt-option.no-preference {
    background: var(--gray-100);
}

/* Top pick chip dark mode */
[data-theme="dark"] .appt-top-pick {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .appt-top-pick:hover:not(.unavailable) {
    border-color: var(--hawx-teal);
    background: rgba(99, 118, 117, 0.2);
}

[data-theme="dark"] .appt-top-pick.selected {
    background: var(--hawx-teal);
    border-color: var(--hawx-teal);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .appt-top-pick-time {
    color: var(--text-secondary);
}

[data-theme="dark"] .appt-top-pick.selected .appt-top-pick-time {
    color: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .sop-grid-info {
    background: var(--gray-100);
    border-bottom-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .sop-empty-state {
    color: var(--text-secondary);
}

/* Payment summary */
[data-theme="dark"] .pay-summary {
    background: linear-gradient(135deg, var(--gray-100) 0%, var(--bg-primary) 100%);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .pay-balance-amount {
    color: var(--text-primary);
}

/* Pay info block */
[data-theme="dark"] .pay-info-block {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .pay-info-value {
    color: var(--text-primary);
}

[data-theme="dark"] .pay-info-divider {
    background: var(--border-color);
}

/* Pay action btn */
[data-theme="dark"] .pay-action-btn {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .pay-action-btn:hover {
    background: var(--gray-200);
    border-color: var(--gray-400);
}

/* Pay column */
[data-theme="dark"] .pay-column {
    background: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .pay-column-head {
    background: linear-gradient(180deg, var(--gray-200) 0%, var(--card-bg) 100%);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .pay-column-head h4 {
    color: var(--text-primary);
}

[data-theme="dark"] .pay-column-title {
    color: var(--text-primary);
}

/* Sub tabs */
[data-theme="dark"] .sub-tabs {
    background: var(--card-bg);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .sub-tab {
    color: var(--text-muted);
}

[data-theme="dark"] .sub-tab:hover {
    background: var(--gray-200);
    color: var(--text-primary);
}

/* Pay list scrollbar */
[data-theme="dark"] .pay-list::-webkit-scrollbar-track {
    background: var(--gray-200);
}

[data-theme="dark"] .pay-list::-webkit-scrollbar-thumb {
    background: var(--gray-400);
}

/* Pay item */
[data-theme="dark"] .pay-item {
    background: var(--card-bg);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .pay-item:first-child {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .pay-item:hover {
    background: var(--gray-200);
}

[data-theme="dark"] .pay-item-failed {
    background: rgba(239, 68, 68, 0.1);
}

[data-theme="dark"] .pay-item-failed:hover {
    background: rgba(239, 68, 68, 0.15);
}

/* Ticket item */
[data-theme="dark"] .ticket-item {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .ticket-item:hover {
    background: var(--gray-200);
}

[data-theme="dark"] .ticket-left {
    border-right-color: var(--border-color);
}

[data-theme="dark"] .ticket-date {
    color: var(--text-primary);
}

[data-theme="dark"] .ticket-service {
    color: var(--text-primary);
}

[data-theme="dark"] .ticket-total {
    color: var(--text-primary);
}

[data-theme="dark"] .ticket-items-summary strong {
    color: var(--text-secondary);
}

[data-theme="dark"] .ticket-category {
    background: var(--gray-200);
    color: var(--text-muted);
}

/* Ticket pending/template badges */
[data-theme="dark"] .ticket-pending-badge {
    background: rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .ticket-template-badge {
    background: var(--gray-300);
}

[data-theme="dark"] .ticket-balance.balance-pending {
    background: rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .ticket-balance.balance-template {
    background: var(--gray-200);
}

/* Appointment slots */
[data-theme="dark"] .appt-slot {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .appt-slot:hover:not(.unavailable) {
    background: rgba(99, 118, 117, 0.2);
}

[data-theme="dark"] .appt-slot.unavailable {
    background: var(--gray-200);
}

[data-theme="dark"] .appt-slot-time {
    color: var(--text-secondary);
}

[data-theme="dark"] .appt-slot-score.score-low {
    background: var(--gray-200);
    color: var(--text-muted);
}

/* Appointment history */
[data-theme="dark"] .appt-hist-row {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .ahr-main:hover {
    background: var(--gray-200);
}

[data-theme="dark"] .ahr-title {
    color: var(--text-primary);
}

/* Alert bar */
[data-theme="dark"] .alert-bar {
    background: var(--gray-100);
    border-bottom-color: var(--border-color);
}

/* Day slots in scheduling */
[data-theme="dark"] .appt-day-label {
    color: var(--text-muted);
}

/* Make sure all scrollbars are styled */
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--gray-200);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--gray-400);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

/* Form select elements */
[data-theme="dark"] select {
    background: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] select:focus {
    border-color: var(--hawx-teal);
}

/* Make sure all white backgrounds adapt */
[data-theme="dark"] .alert-unattached {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, var(--card-bg) 100%) !important;
}

/* SCC elements */
[data-theme="dark"] .scc-header h5 {
    color: var(--text-primary);
}

[data-theme="dark"] .scc-body {
    color: var(--text-secondary);
}

/* All inputs should have dark styling */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]) {
    background: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] input::placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] textarea {
    background: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted);
}

/* Card type display */
[data-theme="dark"] .card-type {
    background: var(--gray-200);
    border-color: var(--border-color);
}

[data-theme="dark"] .card-name {
    color: var(--text-primary);
}

/* Ticket lines */
[data-theme="dark"] .ticket-lines {
    background: linear-gradient(180deg, var(--gray-200) 0%, var(--card-bg) 100%);
    border-color: var(--border-color);
}

[data-theme="dark"] .ticket-line:not(:last-child) {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .ticket-line .tl-desc {
    color: var(--text-primary);
}

[data-theme="dark"] .ticket-line .tl-amt {
    color: var(--text-primary);
}

/* Payment application chips */
[data-theme="dark"] .pay-app-chip {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .pay-app-chip:hover {
    background: rgba(99, 118, 117, 0.2);
}

[data-theme="dark"] .ticket-payments {
    background: rgba(124, 58, 237, 0.15);
    border-color: rgba(124, 58, 237, 0.3);
}

[data-theme="dark"] .ticket-payments .pay-app-chip {
    background: var(--card-bg);
    border-color: rgba(124, 58, 237, 0.3);
}

/* Subscription notes */
[data-theme="dark"] .sub-notes-section {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .sub-note-compact {
    background: var(--gray-200);
}

[data-theme="dark"] .snc-text {
    color: var(--text-secondary);
}

/* Subscription section cards */
[data-theme="dark"] .sub-section-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .sub-section-head {
    background: var(--gray-200);
    border-bottom-color: var(--border-color);
}

/* BAS (Billing Account Status) dark mode */
[data-theme="dark"] .bas-banner {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.15) 100%);
    border-bottom-color: rgba(245, 158, 11, 0.5);
    color: #fbbf24;
}

[data-theme="dark"] .sub-section-card-bas {
    border-color: rgba(245, 158, 11, 0.6);
}

[data-theme="dark"] .sub-section-card-bas .sub-section-head {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.1) 100%);
}

[data-theme="dark"] .sub-section-subhead {
    background: var(--gray-200);
    border-color: var(--border-color);
}

/* Billing grid */
[data-theme="dark"] .billing-grid .billing-item span {
    color: var(--text-primary);
}

/* Status badges in billing grid - must override span color */
[data-theme="dark"] .billing-grid .billing-item span.status-failed,
[data-theme="dark"] .billing-item span.status-failed,
[data-theme="dark"] .status-failed {
    background: rgba(239, 68, 68, 0.25);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.5);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}

/* AHR notes */
[data-theme="dark"] .ahr-notes {
    background: var(--card-bg);
}

[data-theme="dark"] .ahr-notes strong {
    color: var(--text-muted);
}

[data-theme="dark"] .ahr-detail-grid {
    color: var(--text-secondary);
}

/* Sub note items */
[data-theme="dark"] .sub-note-item {
    background: var(--gray-200);
}

[data-theme="dark"] .sub-note-item p {
    color: var(--text-secondary);
}

/* History bar */
[data-theme="dark"] .history-bar {
    background: var(--card-bg);
    border-bottom-color: var(--border-color);
}

/* Date preset buttons */
[data-theme="dark"] .date-preset-btn {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .date-preset-btn:hover {
    border-color: var(--hawx-teal);
    color: var(--hawx-teal);
}

/* SOP date display */
[data-theme="dark"] .sop-date-display {
    background: var(--gray-200);
    border-color: var(--border-color);
}

[data-theme="dark"] .sop-date-text {
    color: var(--text-primary);
}

/* SOP section headings */
[data-theme="dark"] .sop-section h4 {
    color: var(--text-primary);
}

/* Sub card (subscription selector) */
[data-theme="dark"] .sub-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .sub-card:hover {
    border-color: var(--gray-400);
}

[data-theme="dark"] .sub-card.active {
    background: linear-gradient(135deg, rgba(99, 118, 117, 0.15), var(--card-bg));
    border-color: var(--hawx-teal);
}

/* Initial template breakdown total */
[data-theme="dark"] .initial-template-breakdown {
    background: linear-gradient(180deg, rgba(10, 15, 20, 0.65) 0%, rgba(10, 15, 20, 0.35) 50%, var(--card-bg) 100%);
}

[data-theme="dark"] .initial-template-breakdown .template-total {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.28) 0%, rgba(59, 130, 246, 0.12) 100%), var(--card-bg);
    border-top-color: rgba(59, 130, 246, 0.45);
}

/* Standard template totals */
[data-theme="dark"] .template-total {
    background: linear-gradient(180deg, rgba(99, 118, 117, 0.3) 0%, rgba(99, 118, 117, 0.12) 100%), var(--card-bg);
    border-top-color: rgba(99, 118, 117, 0.55);
}

/* Template line items */
[data-theme="dark"] .template-line {
    background: linear-gradient(90deg, rgba(99, 118, 117, 0.2) 0%, rgba(18, 24, 28, 0) 85%), var(--card-bg);
    border-bottom-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .template-line .tl-desc {
    color: var(--text-primary);
}

[data-theme="dark"] .template-line .tl-qty {
    color: var(--text-muted);
}

[data-theme="dark"] .template-line .tl-amt {
    color: var(--text-primary);
}

/* Search sm */
[data-theme="dark"] .search-sm {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .search-sm input {
    color: var(--text-primary);
}

/* Timeline content headers - dark mode */
[data-theme="dark"] .tl-content.tl-header-subscription {
    background: linear-gradient(180deg, rgba(99, 118, 117, 0.15) 0%, var(--card-bg) 40px);
}

[data-theme="dark"] .tl-content.tl-header-pending {
    background: linear-gradient(180deg, rgba(33, 150, 243, 0.15) 0%, var(--card-bg) 40px);
}

[data-theme="dark"] .tl-content.tl-header-completed {
    background: linear-gradient(180deg, rgba(87, 201, 90, 0.15) 0%, var(--card-bg) 40px);
}

[data-theme="dark"] .tl-content.tl-header-cancelled {
    background: linear-gradient(180deg, rgba(233, 102, 102, 0.15) 0%, var(--card-bg) 40px);
}

[data-theme="dark"] .tl-content.tl-header-rescheduled {
    background: linear-gradient(180deg, rgba(255, 152, 0, 0.15) 0%, var(--card-bg) 40px);
}

[data-theme="dark"] .tl-content.tl-header-payment {
    background: linear-gradient(180deg, rgba(234, 183, 73, 0.15) 0%, var(--card-bg) 40px);
}

[data-theme="dark"] .tl-content.tl-header-alert {
    background: linear-gradient(180deg, rgba(233, 102, 102, 0.12) 0%, var(--card-bg) 40px);
}

[data-theme="dark"] .tl-content.tl-header-flag {
    background: linear-gradient(180deg, rgba(255, 152, 0, 0.15) 0%, var(--card-bg) 40px);
}

[data-theme="dark"] .tl-content.tl-header-flag-removed {
    background: linear-gradient(180deg, rgba(87, 201, 90, 0.12) 0%, var(--card-bg) 40px);
}

[data-theme="dark"] .tl-content.tl-header-call-in {
    background: linear-gradient(180deg, rgba(35, 179, 172, 0.12) 0%, var(--card-bg) 40px);
}

[data-theme="dark"] .tl-content.tl-header-call-out {
    background: linear-gradient(180deg, rgba(245, 198, 98, 0.15) 0%, var(--card-bg) 40px);
}

[data-theme="dark"] .tl-content.tl-header-sms {
    background: linear-gradient(180deg, rgba(33, 150, 243, 0.12) 0%, var(--card-bg) 40px);
}

[data-theme="dark"] .tl-content.tl-header-email {
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.12) 0%, var(--card-bg) 40px);
}

[data-theme="dark"] .tl-content.tl-header-ai {
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.15) 0%, var(--card-bg) 40px);
}

/* Timeline note content */
[data-theme="dark"] .tl-note .tl-content {
    background: var(--card-bg);
}

/* Template item */
[data-theme="dark"] .template-item {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .template-item:hover {
    border-color: var(--hawx-teal);
}

[data-theme="dark"] .tpl-name {
    color: var(--text-secondary);
}

/* Retention row */
[data-theme="dark"] .ret-row {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .ret-offer {
    color: var(--text-primary);
}

[data-theme="dark"] .ret-options label {
    color: var(--text-primary);
}

/* Offer items */
[data-theme="dark"] .offer-item {
    background: var(--gray-200);
    border-color: var(--border-color);
}

[data-theme="dark"] .offer-item.offer-eligible {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.4);
}

[data-theme="dark"] .offer-item.offer-ineligible {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
}

[data-theme="dark"] .offer-name {
    color: var(--text-primary);
}

[data-theme="dark"] .offer-price {
    color: var(--text-muted);
}

/* Initial template breakdown service charge */
[data-theme="dark"] .initial-template-breakdown .template-service-charge {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.35), rgba(59, 130, 246, 0.1)), var(--card-bg);
    border: 1px solid rgba(59, 130, 246, 0.35);
}

/* Base timeline content */
[data-theme="dark"] .tl-content {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .tl-content:hover {
    border-color: var(--gray-400);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .tl-clickable:hover .tl-content {
    background: var(--gray-200);
}

/* Timeline SMS backgrounds */
[data-theme="dark"] .tl-sms .tl-content {
    background: linear-gradient(to right, rgba(59, 130, 246, 0.15) 0%, var(--card-bg) 100%);
}

[data-theme="dark"] .tl-sms-out .tl-content {
    background: linear-gradient(to right, rgba(99, 118, 117, 0.2) 0%, var(--card-bg) 100%);
}

/* Timeline payment backgrounds */
[data-theme="dark"] .tl-payment-success .tl-content,
[data-theme="dark"] .tl-payment:not(.tl-payment-failed) .tl-content {
    background: linear-gradient(to right, rgba(234, 183, 73, 0.2) 0%, var(--card-bg) 100%);
}

[data-theme="dark"] .tl-payment-failed .tl-content {
    background: linear-gradient(to right, rgba(239, 68, 68, 0.2) 0%, var(--card-bg) 100%);
}

/* Timeline call background */
[data-theme="dark"] .tl-call .tl-content {
    background: linear-gradient(to right, rgba(124, 58, 237, 0.15) 0%, var(--card-bg) 100%);
}

/* Timeline subscription background */
[data-theme="dark"] .tl-subscription .tl-content {
    background: linear-gradient(to right, rgba(99, 118, 117, 0.15) 0%, var(--card-bg) 100%);
}

/* Timeline scheduled background */
[data-theme="dark"] .tl-scheduled .tl-content {
    background: linear-gradient(to right, rgba(59, 130, 246, 0.15) 0%, var(--card-bg) 100%);
}

/* Timeline warranty background */
[data-theme="dark"] .tl-appt-warranty .tl-content {
    background: linear-gradient(to right, rgba(124, 58, 237, 0.15) 0%, var(--card-bg) 100%);
}

/* Clickable appointment hover */
[data-theme="dark"] .clickable-appt:hover {
    background-color: var(--gray-200);
}

/* Addon modal dark theme */
[data-theme="dark"] #addon-modal .addon-sub-info {
    background: #1a1a1a;
}

[data-theme="dark"] #addon-modal .addon-sub-info h4 {
    color: var(--gray-100);
}

[data-theme="dark"] #addon-modal .addon-sub-info p {
    color: var(--gray-400);
}

[data-theme="dark"] #addon-modal .addon-option-item {
    border-color: #333;
    background: #1a1a1a;
    color: var(--gray-100);
}

[data-theme="dark"] #addon-modal .addon-option-item:hover {
    border-color: var(--primary);
    background: #252525;
}

[data-theme="dark"] #addon-modal .addon-option-item.selected {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] #addon-modal .addon-option-item.unavailable {
    opacity: 0.5;
    background: var(--gray-900);
}

[data-theme="dark"] #addon-modal .addon-option-item.unavailable:hover {
    border-color: var(--gray-700);
    background: var(--gray-900);
}

[data-theme="dark"] #addon-modal .addon-option-name {
    color: var(--text-primary);
}

[data-theme="dark"] #addon-modal .addon-option-price {
    color: var(--text-muted);
}

[data-theme="dark"] #addon-modal .addon-option-status.available {
    background: rgba(34, 197, 94, 0.2);
    color: var(--success-light);
}

[data-theme="dark"] #addon-modal .addon-option-status.already-active {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning-light);
}

[data-theme="dark"] #addon-modal .addon-selected-details {
    background: rgba(59, 130, 246, 0.1);
    border-color: var(--primary-dark);
}

[data-theme="dark"] #addon-modal .addon-selected-details h5 {
    color: var(--primary-light);
}

[data-theme="dark"] #addon-modal .addon-selected-details p {
    color: var(--primary);
}

[data-theme="dark"] .addon-tag {
    background: rgba(14, 165, 233, 0.2);
    color: var(--info-light);
}

[data-theme="dark"] .addon-tag.active {
    background: rgba(34, 197, 94, 0.2);
    color: var(--success-light);
}

/* SMS modal header */
[data-theme="dark"] #sms-modal .modal-header {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), var(--card-bg));
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] #sms-modal .modal-header h3 {
    color: var(--success);
}

/* Appt history row */
[data-theme="dark"] .appt-hist-row {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .ahr-title {
    color: var(--text-primary);
}

[data-theme="dark"] .ahr-date {
    color: var(--text-muted);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 12px;
    line-height: 1.4;
    color: var(--gray-700);
    background: var(--gray-100);
}

button {
    font-family: inherit;
    cursor: pointer;
}

input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}

/* Utility Classes */
.hide {
    display: none !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
Main Layout Wrapper - Hawx Coach Sidebar Support
───────────────────────────────────────────────────────────────────────────── */
#main-layout-wrapper {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

/* Customer panel takes remaining space when coach is visible */
#main-layout-wrapper > .global-header {
    position: fixed;
    width: 100%;
    z-index: 200;
}

#main-layout-wrapper > #customer-panel {
    flex: 1;
    min-width: 0;
}

/* Hawx Coach Sidebar Overrides for Customer Panel */
#main-layout-wrapper > #hawx-coach-container {
    height: calc(100vh - 48px);
    margin-top: 48px;
    position: sticky;
    top: 48px;
    right: 0;
    flex-shrink: 0;
    z-index: 100;
    background: var(--bg-primary, #fff);
    max-width: 25%;
}

/* Customer panel automatically takes full width when coach is hidden via flex: 1 */


/* ─────────────────────────────────────────────────────────────────────────────
Global Header - Search & Utilities
───────────────────────────────────────────────────────────────────────────── */
.global-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: linear-gradient(135deg, var(--gray-50), #fff);
    border-bottom: 1px solid var(--gray-200);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 200;
    height: 48px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Customer Search in Header */
.customer-search-wrapper {
    position: relative;
    width: 320px;
}

.search-input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-container .search-icon {
    position: absolute;
    left: 10px;
    width: 16px;
    height: 16px;
    color: var(--gray-400);
    pointer-events: none;
}

.search-input-container input {
    width: 100%;
    padding: 8px 36px 8px 34px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    color: var(--gray-700);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.search-input-container input:focus {
    outline: none;
    border-color: var(--hawx-teal);
    box-shadow: var(--shadow-focus);
}

.search-input-container input::placeholder {
    color: var(--gray-400);
}

.search-spinner {
    position: absolute;
    right: 10px;
}

.search-spinner .spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--gray-200);
    border-top-color: var(--hawx-teal);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.search-clear {
    position: absolute;
    right: 8px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: var(--gray-200);
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    color: var(--gray-500);
    cursor: pointer;
    transition: background 0.15s;
}

.search-clear:hover {
    background: var(--gray-300);
    color: var(--gray-700);
}

/* Search Results Dropdown */
.search-results-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 400px;
    max-height: 400px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    z-index: 300;
}

.search-results-list {
    padding: 4px;
}

.search-result-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.search-result-item:hover {
    background: var(--gray-50);
}

.search-result-item.selected {
    background: var(--hawx-teal-light);
}

.search-result-primary {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-result-name {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 13px;
}

.search-result-status {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.search-result-status.active {
    background: var(--success-bg);
    color: var(--success-dark);
}

.search-result-status.frozen,
.search-result-status.suspended {
    background: var(--info-bg);
    color: var(--info-dark);
}

.search-result-status.cancelled,
.search-result-status.inactive {
    background: var(--error-bg);
    color: var(--error-dark);
}

.search-result-status.pending {
    background: var(--warning-bg);
    color: var(--warning-dark);
}

.search-result-id {
    font-size: 11px;
    color: var(--gray-400);
    font-family: var(--mono);
}

.search-result-secondary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 11px;
    color: var(--gray-500);
}

.search-result-phone,
.search-result-email,
.search-result-address {
    display: flex;
    align-items: center;
    gap: 4px;
}

.search-result-phone::before {
    content: '📞';
    font-size: 10px;
}

.search-result-email::before {
    content: '✉️';
    font-size: 10px;
}

.search-result-address::before {
    content: '📍';
    font-size: 10px;
}

.search-no-results {
    padding: 20px;
    text-align: center;
    color: var(--gray-500);
}

.search-loading {
    padding: 20px;
    text-align: center;
    color: var(--gray-500);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Global Header - Mobile Responsive
   ───────────────────────────────────────────────────────────────────────────── */

/* Tablet breakpoint */
@media (max-width: 900px) {
    .global-header {
        padding: 6px 10px;
    }
    
    .header-left {
        gap: 10px;
    }
    
    .header-right {
        gap: 8px;
    }
    
    .customer-search-wrapper {
        width: 260px;
    }
    
    .search-results-dropdown {
        width: 340px;
    }
}

/* Small tablet / large phone */
@media (max-width: 768px) {
    .global-header {
        padding: 6px 8px;
        gap: 8px;
    }
    
    .header-left {
        gap: 8px;
        flex: 1;
        min-width: 0;
    }
    
    .header-right {
        gap: 6px;
        flex-shrink: 0;
    }
    
    .customer-search-wrapper {
        width: 100%;
        max-width: 220px;
        flex: 1;
        min-width: 120px;
    }
    
    .search-input-container input {
        padding: 6px 32px 6px 30px;
        font-size: 12px;
    }
    
    .search-input-container .search-icon {
        width: 14px;
        height: 14px;
        left: 8px;
    }
    
    .search-results-dropdown {
        width: calc(100vw - 24px);
        max-width: 380px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .search-result-item {
        padding: 8px 10px;
    }
    
    .search-result-name {
        font-size: 12px;
    }
    
    .search-result-secondary {
        gap: 8px;
        font-size: 10px;
    }
}

/* Phone breakpoint */
@media (max-width: 600px) {
    .global-header {
        padding: 5px 8px;
        height: 44px;
    }
    
    .header-left {
        gap: 6px;
    }
    
    .header-right {
        gap: 4px;
    }
    
    .customer-search-wrapper {
        max-width: 180px;
        min-width: 100px;
    }
    
    .search-input-container input {
        padding: 5px 28px 5px 28px;
        font-size: 11px;
        border-radius: 5px;
    }
    
    .search-input-container .search-icon {
        width: 12px;
        height: 12px;
        left: 8px;
    }
    
    .search-clear {
        width: 16px;
        height: 16px;
        font-size: 11px;
        right: 6px;
    }
    
    .search-results-dropdown {
        position: fixed;
        top: 48px;
        left: 8px;
        right: 8px;
        width: auto;
        max-width: none;
        transform: none;
        max-height: calc(100vh - 60px);
        border-radius: 6px;
    }
    
    .search-result-item {
        padding: 10px;
    }
    
    .search-result-primary {
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .search-result-secondary {
        flex-direction: column;
        gap: 4px;
    }
    
    .search-result-address {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    
    /* Adjust customer panel margin for smaller header */
    .customer-panel {
        margin-top: 44px;
    }
    
    #main-layout-wrapper > #hawx-coach-container {
        height: calc(100vh - 44px);
        margin-top: 44px;
        top: 44px;
    }
}

/* Small phone breakpoint */
@media (max-width: 400px) {
    .global-header {
        padding: 4px 6px;
        height: 40px;
    }
    
    .header-left {
        gap: 4px;
    }
    
    .header-right {
        gap: 3px;
    }
    
    .customer-search-wrapper {
        max-width: 140px;
        min-width: 80px;
    }
    
    .search-input-container input {
        padding: 4px 24px 4px 24px;
        font-size: 10px;
    }
    
    .search-input-container .search-icon {
        width: 11px;
        height: 11px;
        left: 6px;
    }
    
    .search-clear {
        width: 14px;
        height: 14px;
        font-size: 10px;
        right: 4px;
    }
    
    .search-results-dropdown {
        top: 44px;
        left: 4px;
        right: 4px;
        max-height: calc(100vh - 52px);
    }
    
    .search-result-name {
        font-size: 11px;
    }
    
    .search-result-status {
        padding: 1px 6px;
        font-size: 9px;
    }
    
    .search-result-id {
        font-size: 10px;
    }
    
    .search-result-secondary {
        font-size: 9px;
    }
    
    /* Adjust customer panel margin for smaller header */
    .customer-panel {
        margin-top: 40px;
    }
    
    #main-layout-wrapper > #hawx-coach-container {
        height: calc(100vh - 40px);
        margin-top: 40px;
        top: 40px;
    }
}

/* Touch-friendly tap targets for mobile */
@media (hover: none) and (pointer: coarse) {
    .search-clear {
        min-width: 36px;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: -8px;
        padding: 8px;
        background: transparent;
    }
    
    .search-clear:active {
        background: rgba(0, 0, 0, 0.05);
        border-radius: 50%;
    }
    
    .search-result-item {
        min-height: 48px;
        padding: 12px;
    }
    
    .search-input-container input {
        min-height: 40px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
Customer Panel
───────────────────────────────────────────────────────────────────────────── */
.customer-panel {
    display: flex;
    flex-direction: column;
    background: #fff;
    margin-top: 48px; /* Account for fixed header */
}

/* Hide customer panel content when no customer selected */
.customer-panel.no-customer .customer-top-row,
.customer-panel.no-customer .tab-nav,
.customer-panel.no-customer .tab-content {
    display: none;
}

.customer-panel.no-customer::before {
    content: 'Search for a customer to get started';
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 48px);
    font-size: 16px;
    color: var(--gray-400);
}

/* ─────────────────────────────────────────────────────────────────────────────
Tab Nav
───────────────────────────────────────────────────────────────────────────── */
.tab-nav {
    display: flex;
    padding: 0 8px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0;
    overflow-x: auto;
    position: fixed;
    top: 92px; /* Account for header (48px) + identity row (44px) */
    left: 0;
    width: 100%;
    z-index: 100;
}

.tab-btn {
    padding: 8px 10px;
    border: none;
    background: none;
    color: var(--gray-500);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    position: relative;
}

.tab-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
}

.tab-btn:hover {
    color: var(--gray-700);
}

.tab-btn.active {
    color: var(--hawx-teal);
    background: #fff;
}

.tab-btn.active::after {
    background: var(--hawx-gold);
}

/* ─────────────────────────────────────────────────────────────────────────────
Tab Content
───────────────────────────────────────────────────────────────────────────── */
.tab-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-top: 75px;
}

.tab-pane {
    display: none;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.tab-pane.active {
    display: flex;
}

.tab-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.tab-scroll-area::-webkit-scrollbar {
    width: 5px;
}

.tab-scroll-area::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 3px;
}

/* ─────────────────────────────────────────────────────────────────────────────
Status Badges - high contrast for quick scanning
───────────────────────────────────────────────────────────────────────────── */
.status-active {
    background: var(--success-bg);
    color: var(--success-dark);
    border: 1px solid var(--success);
}

.status-pending {
    background: var(--warning-bg);
    color: var(--warning-dark);
    border: 1px solid var(--warning);
}

.status-scheduled {
    background: var(--info-bg);
    color: var(--info-dark);
    border: 1px solid var(--info);
}

.status-completed {
    background: var(--success-bg);
    color: var(--success-dark);
}

.status-failed {
    background: var(--error-bg);
    color: var(--error-dark);
    border: 1px solid var(--error);
}

/* ─────────────────────────────────────────────────────────────────────────────
Buttons
───────────────────────────────────────────────────────────────────────────── */
.btn-primary {
    padding: 6px 12px;
    border: none;
    border-radius: 5px;
    background: var(--hawx-teal);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
}

.btn-primary:hover {
    background: var(--hawx-teal-dark);
}

.btn-primary:disabled {
    background: var(--gray-300);
    cursor: not-allowed;
}

.btn-ghost {
    padding: 6px 12px;
    border: 1px solid var(--gray-200);
    border-radius: 5px;
    background: #fff;
    color: var(--gray-600);
    font-size: 11px;
    font-weight: 500;
}

.btn-ghost:hover {
    border-color: var(--gray-300);
    background: var(--gray-50);
}

.btn-sm {
    padding: 4px 8px;
    font-size: 11px;
}

.btn-xs {
    padding: 2px 6px;
    border: none;
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 10px;
    border-radius: 3px;
    width: fit-content;
    box-sizing: border-box;
    min-width: 48px;
}

.btn-xs:hover {
    background: var(--gray-200);
}

.btn-xs:disabled {
    background: var(--gray-100);
    color: var(--gray-400);
    cursor: not-allowed;
}

.btn-xs:disabled:hover {
    background: var(--gray-100);
}

.btn-xs.btn-danger {
    color: var(--error);
}

.btn-xs.btn-danger:hover {
    background: var(--error-bg);
}

.btn-xs.btn-icon {
    padding: 2px 4px;
    min-width: 18px;
}

/* ─────────────────────────────────────────────────────────────────────────────
CUSTOMER TAB - Two Column Layout
───────────────────────────────────────────────────────────────────────────── */

/* Alert Bar - legacy, keep for compatibility */
.alert-bar {
    display: flex;
    gap: 8px;
    padding: 6px 10px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Customer Top Row - Identity only (Alerts moved to Customer tab) */
.customer-top-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 12px;
    background: linear-gradient(135deg, var(--gray-50), #fff);
    border-bottom: 1px solid var(--gray-200);
    position: fixed;
    top: 48px; /* Below global header */
    left: 0;
    width: 100%;
    z-index: 100;
    min-height: 44px;
}

.ci-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ci-main h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-800);
}

.ci-main .status-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ci-id {
    font-size: 11px;
    color: var(--gray-400);
    font-family: var(--mono);
}

/* Refresh PestRoutes Button */
.refresh-pr-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    padding: 4px;
    width: 26px;
    height: 26px;
    border: 1px solid var(--gray-300);
    border-radius: 5px;
    background: #fff;
    color: var(--gray-500);
    cursor: pointer;
    transition: all 0.15s;
}

.refresh-pr-btn:hover {
    background: var(--gray-100);
    color: var(--primary);
    border-color: var(--primary-light);
}

.refresh-pr-btn:active {
    transform: scale(0.95);
}

.refresh-pr-btn .refresh-icon {
    width: 14px;
    height: 14px;
}

.refresh-pr-btn.refreshing {
    pointer-events: none;
    opacity: 0.7;
}

.refresh-pr-btn .refresh-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--gray-300);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.refresh-pr-btn .hide {
    display: none;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

[data-theme="dark"] .refresh-pr-btn {
    background: var(--gray-700);
    border-color: var(--gray-600);
    color: var(--gray-300);
}

[data-theme="dark"] .refresh-pr-btn:hover {
    background: var(--gray-600);
    color: var(--primary-light);
    border-color: var(--primary);
}

[data-theme="dark"] .refresh-pr-btn .refresh-spinner {
    border-color: var(--gray-500);
    border-top-color: var(--primary-light);
}

/* Change Customer Button */
.ci-change-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 12px;
    padding: 4px 10px;
    border: 1px solid var(--gray-300);
    border-radius: 5px;
    background: #fff;
    color: var(--gray-600);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.ci-change-btn svg {
    width: 12px;
    height: 12px;
}

.ci-change-btn:hover {
    border-color: var(--hawx-teal);
    color: var(--hawx-teal);
    background: var(--hawx-teal-light);
}

/* Alerts Section Card - Inside Customer Tab */
.alerts-section-card {
    margin-bottom: 12px;
}

.alerts-section-card .section-head h4 {
    color: var(--warning-dark);
}

.alerts-content {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px 0;
}

.alerts-content:empty::after {
    content: 'No alerts';
    color: var(--gray-400);
    font-size: 12px;
    font-style: italic;
}

/* Good standing state - hide alerts section or make it minimal */
.alerts-section-card.good-standing {
    background: var(--success-bg);
    border-color: var(--success);
}

.alerts-section-card.good-standing .section-head h4 {
    color: var(--success);
}

/* Legacy ci-alerts - keep for any remaining uses */
.ci-alerts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Alert items - more prominent */
.alert-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
}

.alert-warn {
    background: var(--warning-bg);
    border: 1px solid var(--warning);
}

.alert-warn strong {
    color: var(--warning-dark);
    font-size: 13px;
}

.alert-info {
    background: var(--highlight-next);
    border: 1px solid var(--highlight-next-border);
}

.alert-info strong {
    color: var(--highlight-next-text);
    font-size: 13px;
}

.alert-success {
    background: var(--success-bg);
    border: 1px solid var(--success);
    color: var(--success);
}

.alert-success strong {
    color: var(--success);
    font-size: 13px;
}

.alert-btn {
    padding: 3px 8px;
    border: none;
    background: var(--warning);
    color: #fff;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: background 0.15s;
}

.alert-btn:hover {
    background: var(--warning-dark);
}

/* Flags Section */
.flags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
}

.flag-warn {
    background: var(--warning-bg);
    color: #92400e;
}

.flag-info {
    background: var(--info-bg);
    color: #1e40af;
}

[data-theme="dark"] .flag-info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(12, 25, 46, 0.9));
    color: rgba(173, 205, 255, 0.95);
    border: 1px solid rgba(59, 130, 246, 0.4);
}

.flag-remove {
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font-size: 12px;
    line-height: 1;
    opacity: 0.6;
    cursor: pointer;
}

.flag-remove:hover {
    opacity: 1;
}

/* Two Column Layout */
.customer-two-col {
    display: flex;
    gap: 10px;
}

.cust-col-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cust-col-right {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Section Card - Unified styling for all sections */
.section-card {
    padding: 10px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.section-head h4 {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-700);
}

/* Contact Section inside combined card */
.contact-section {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gray-100);
}

/* Auth Section inside combined card */
.auth-section {
    margin-top: 8px;
}

.auth-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.auth-section-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Contact Card - Condensed Inline */
.contact-card {
    padding: 8px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
}

.contact-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.contact-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.contact-edit {
    padding: 2px 6px;
    border: none;
    background: none;
    color: var(--hawx-teal);
    font-size: 10px;
    font-weight: 500;
}

.contact-edit:hover {
    text-decoration: underline;
}

.contact-compact {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contact-row-inline {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 10px;
    flex-wrap: wrap;
}

.contact-row-inline .contact-label {
    color: var(--gray-400);
    font-weight: 500;
    min-width: 45px;
}

.contact-row-inline span {
    color: var(--gray-700);
}

.contact-row-inline span.empty {
    color: var(--gray-400);
}

/* Authorized Contacts - Condensed */
.auth-contacts-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    overflow: hidden;
}

.auth-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
}

.auth-head h4 {
    margin: 0;
    font-size: 10px;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.auth-list {
    padding: 0;
}

.auth-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    background: var(--gray-50);
    border-radius: 4px;
    margin-bottom: 3px;
}

.auth-item:last-child {
    margin-bottom: 0;
}

.auth-name {
    font-size: 10px;
    font-weight: 500;
    color: var(--gray-700);
}

.auth-rel {
    font-size: 9px;
    color: var(--gray-400);
}

.auth-phone {
    font-size: 9px;
    color: var(--gray-500);
    margin-left: auto;
}

/* Customer Notes - Condensed */
.customer-notes-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    overflow: hidden;
}

.notes-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
}

.notes-head h4 {
    margin: 0;
    font-size: 10px;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.notes-list {
    padding: 0;
    max-height: 140px;
    overflow-y: auto;
}

.notes-list::-webkit-scrollbar {
    width: 4px;
}

.notes-list::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 2px;
}

.note-item {
    padding: 8px 10px;
    background: var(--gray-50);
    border-radius: 6px;
    margin-bottom: 4px;
    border-left: 3px solid var(--gray-200);
    transition: border-color 0.15s;
}

.note-item:hover {
    border-left-color: var(--hawx-teal);
}

.note-item:last-child {
    margin-bottom: 0;
}

.note-meta {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--gray-400);
    margin-bottom: 3px;
}

.note-meta strong {
    color: var(--gray-600);
    font-weight: 600;
}

.note-item p {
    margin: 0;
    font-size: 11px;
    color: var(--gray-700);
    line-height: 1.4;
}

/* Red Notes Section - Important customer notes highlighted */
.red-notes-section {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
}

.red-notes-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #fca5a5;
}

.red-notes-icon {
    font-size: 14px;
}

.red-notes-title {
    font-size: 12px;
    font-weight: 700;
    color: #b91c1c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.red-notes-list {
    max-height: 120px;
    overflow-y: auto;
}

.red-notes-list::-webkit-scrollbar {
    width: 4px;
}

.red-notes-list::-webkit-scrollbar-thumb {
    background: #fca5a5;
    border-radius: 2px;
}

.red-note-item {
    background: rgba(255, 255, 255, 0.7) !important;
    border-left: 3px solid #dc2626 !important;
    margin-bottom: 6px;
}

.red-note-item:hover {
    border-left-color: #b91c1c !important;
    background: rgba(255, 255, 255, 0.9) !important;
}

.red-note-item:last-child {
    margin-bottom: 0;
}

.red-note-item p {
    color: #7f1d1d;
    font-weight: 500;
}

/* AI Box - Condensed */
.ai-box {
    padding: 8px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 6px;
}

.ai-input {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.ai-input input {
    flex: 1;
    padding: 5px 8px;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    font-size: 10px;
}

.ai-input input:focus {
    outline: none;
    border-color: var(--hawx-teal);
}

.ai-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.chip {
    padding: 2px 8px;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: #fff;
    color: var(--gray-600);
    font-size: 9px;
}

.chip:hover {
    border-color: var(--hawx-teal);
    color: var(--hawx-teal);
}

/* Subscriptions Column (Right) */
.section-head {
    margin-bottom: 6px;
}

.section-head h4 {
    margin: 0;
    font-size: 10px;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.subs-cards-compact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
}

.subs-cards-compact::-webkit-scrollbar {
    width: 4px;
}

.subs-cards-compact::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 2px;
}

.sub-card-compact {
    padding: 10px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-left: 3px solid var(--success);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.sub-card-compact:hover {
    border-color: var(--gray-300);
    border-left-color: var(--hawx-teal);
    box-shadow: var(--shadow-md);
}

.sub-card-compact.sub-frozen {
    border-left-color: var(--warning);
    background: linear-gradient(to right, var(--warning-bg) 0%, #fff 8%);
}

.sub-card-compact.sub-frozen .scc-name {
    color: var(--gray-500);
}

.sub-card-compact.sub-cancelled {
    border-left-color: var(--error);
    background: linear-gradient(to right, var(--error-bg) 0%, #fff 8%);
    opacity: 0.7;
}

/* Bill After Service (BAS) compact card styling */
.sub-card-compact.sub-card-bas {
    border-left-color: #f59e0b;
    background: linear-gradient(to right, #fef3c7 0%, #fff 8%);
}

.sub-card-compact.sub-card-bas:hover {
    border-left-color: #d97706;
}

.scc-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.scc-icon {
    font-size: 16px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-50);
    border-radius: 6px;
}

.scc-title {
    flex: 1;
    min-width: 0;
}

.scc-name {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-800);
    line-height: 1.2;
}

.scc-id {
    display: block;
    font-size: 10px;
    color: var(--gray-400);
    font-family: var(--mono);
    margin-top: 1px;
}

.scc-status {
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.scc-body {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 12px;
}

.scc-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.scc-addons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.addon-mini {
    padding: 2px 6px;
    background: var(--purple-bg);
    border-radius: 8px;
    font-size: 9px;
    font-weight: 500;
    color: var(--info);
    white-space: nowrap;
}

.addon-none {
    font-size: 10px;
    color: var(--gray-400);
    font-style: italic;
}

.addon-loading {
    font-size: 10px;
    color: var(--gray-400);
    font-style: italic;
    animation: addon-pulse 1.2s ease-in-out infinite;
}

@keyframes addon-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Contract dates row */
.scc-contract {
    display: flex;
    gap: 12px;
    font-size: 10px;
    color: var(--gray-500);
}

.scc-contract span {
    display: flex;
    gap: 4px;
}

.scc-contract strong {
    color: var(--gray-700);
    font-weight: 500;
}

/* Date display - the key improvement */
.scc-dates {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-self: flex-end;
}

.scc-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 8px;
    background: var(--gray-50);
    border-radius: 6px;
    min-width: 54px;
}

.scc-date label {
    font-size: 8px;
    font-weight: 600;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 1px;
}

.scc-date-value {
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-600);
}

/* Next date gets special highlighting */
.scc-date.scc-next {
    background: var(--highlight-next);
    border: 1px solid var(--highlight-next-border);
}

.scc-date.scc-next label {
    color: var(--highlight-next-text);
}

.scc-date.scc-next .scc-date-value {
    color: var(--highlight-next-text);
    font-size: 12px;
}

.scc-date .empty {
    color: var(--gray-300);
}

/* Out of Season Subscription Cards */
.sub-card-compact.sub-out-of-season {
    border-left: 3px solid var(--gray-400);
}

.sub-card-compact.sub-out-of-season .scc-header {
    opacity: 0.8;
}

.scc-season-banner {
    font-size: 11px;
    padding: 6px 10px;
    margin: -10px -10px 8px -10px;
    border-radius: 6px 6px 0 0;
}

.scc-season-banner.scc-out-of-season {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, var(--gray-50) 100%);
    color: var(--gray-600);
    border-bottom: 1px solid var(--gray-200);
}

/* Pending Appointments on Subscription Cards */
.sub-card-compact.has-pending {
    border-left-color: var(--info);
}

.scc-pending-appointments {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--gray-100);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.scc-pending-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: var(--info-bg, #e8f4fd);
    border-radius: 6px;
    border-left: 3px solid var(--info);
}

.scc-pending-info {
    font-size: 11px;
    color: var(--gray-700);
}

.scc-pending-info strong {
    color: var(--gray-800);
    font-weight: 600;
}

.scc-pending-actions {
    display: flex;
    gap: 6px;
}

.scc-schedule-btn {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.scc-schedule-btn:hover {
    background: var(--gray-200);
    border-color: var(--gray-300);
}

.scc-schedule-btn-confirm {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

.scc-schedule-btn-confirm:hover {
    background: #1e7e34;
    border-color: #1e7e34;
}

.scc-schedule-btn-danger {
    background: #fff;
    border-color: var(--error);
    color: var(--error);
}

.scc-schedule-btn-danger:hover {
    background: var(--error);
    border-color: var(--error);
    color: #fff;
}

.scc-pending-loading {
    padding: 8px;
    background: var(--gray-50, #f8f9fa);
    border-radius: 6px;
}

.scc-loading-indicator {
    font-size: 11px;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 6px;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.scc-pending-more {
    font-size: 10px;
    color: var(--gray-500);
    font-style: italic;
    padding-left: 4px;
}

/* Unattached appointment alert styling */
.alert-unattached {
    background: linear-gradient(135deg, #fff7ed 0%, #fff 100%) !important;
    border-color: #f59e0b !important;
}

.alert-note {
    font-size: 10px;
    color: var(--gray-500);
    font-style: italic;
    margin-left: 4px;
}

/* ─────────────────────────────────────────────────────────────────────────────
SCHEDULING TAB - 3-Column Grid Layout (~250px tiles)
───────────────────────────────────────────────────────────────────────────── */
.sched-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0;
}

.sched-hint {
    font-size: 10px;
    color: var(--gray-500);
}

/* Compact Section Layout */
.sched-section-compact {
    margin-bottom: 8px;
}

.sched-section-head-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.sched-section-head-inline h4 {
    margin: 0;
    font-size: 10px;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.sched-count {
    padding: 1px 5px;
    background: var(--hawx-teal);
    color: #fff;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 500;
}

/* Pending Appointments - Grid */
.pending-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 6px;
}

.pending-card {
    padding: 8px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 5px;
}

.pc-top {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}

.pc-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--info-bg);
    border-radius: 4px;
    flex-shrink: 0;
}

.pc-date-pending {
    background: var(--warning-bg);
}

.pc-month {
    font-size: 8px;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    line-height: 1;
}

.pc-day {
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-800);
    line-height: 1;
}

.pc-info {
    flex: 1;
    min-width: 0;
}

.pc-title {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-800);
    line-height: 1.2;
}

.pc-meta {
    display: block;
    font-size: 9px;
    color: var(--gray-500);
}

.pc-time {
    display: block;
    font-size: 9px;
    color: var(--gray-400);
}

.pc-status {
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 8px;
    font-weight: 500;
    flex-shrink: 0;
}

.pc-actions {
    display: flex;
    gap: 4px;
}

/* Compact Schedule Buttons */
.sched-btn-sm {
    padding: 3px 8px;
    border: 1px solid var(--gray-300);
    border-radius: 3px;
    background: #fff;
    color: var(--gray-600);
    font-size: 9px;
    font-weight: 500;
    transition: all 0.15s;
}

.sched-btn-sm:hover {
    border-color: var(--hawx-teal);
    color: var(--hawx-teal);
}

.sched-btn-sm.active {
    background: var(--hawx-teal);
    border-color: var(--hawx-teal);
    color: #fff;
}

.sched-btn-sm.selected {
    background: var(--hawx-teal);
    border-color: var(--hawx-teal);
    color: #fff;
    box-shadow: 0 2px 6px rgba(99, 118, 117, 0.3);
    transform: translateY(-1px);
}

.sched-btn-sm.sched-btn-danger:hover {
    border-color: var(--error);
    color: var(--error);
}

.sched-btn-sm.sched-btn-danger.active {
    background: var(--error);
    border-color: var(--error);
}

/* Inspection Pills - Compact */
.insp-pills-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 8px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 5px;
}

.insp-pill-sm {
    padding: 4px 10px;
    border: 1px solid var(--gray-300);
    border-radius: 3px;
    background: #fff;
    color: var(--gray-600);
    font-size: 10px;
    font-weight: 500;
    transition: all 0.15s;
}

.insp-pill-sm:hover {
    border-color: var(--hawx-teal);
    color: var(--hawx-teal);
}

.insp-pill-sm.active {
    background: var(--hawx-teal);
    border-color: var(--hawx-teal);
    color: #fff;
}

.insp-pill-sm.selected {
    background: var(--hawx-teal);
    border-color: var(--hawx-teal);
    color: #fff;
    box-shadow: 0 2px 6px rgba(99, 118, 117, 0.25);
}

/* Subscription Services - 3 Column Grid */
.sched-subs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.sched-sub-tile {
    padding: 8px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 5px;
    min-width: 0;
}

.sched-sub-active {
    border-left: 3px solid var(--success);
}

.sched-sub-frozen {
    border-left: 3px solid var(--warning);
    opacity: 0.7;
}

/* Bill After Service (BAS) scheduling tile */
.sched-sub-bas {
    border-left: 3px solid #f59e0b;
    background: linear-gradient(to right, #fef3c7 0%, #fff 15%);
}

.sched-sub-bas.sched-sub-active {
    border-left-color: #f59e0b;
}

.sst-bas-info {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    margin: -4px -8px 6px -8px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-bottom: 1px solid #f59e0b;
    font-size: 10px;
    font-weight: 600;
    color: #92400e;
    border-radius: 4px 4px 0 0;
}

.sst-header {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.sst-icon {
    font-size: 14px;
}

.sst-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-700);
    flex: 1;
    min-width: 0;
}

.sst-status {
    padding: 2px 5px;
    border-radius: 6px;
    font-size: 8px;
    font-weight: 500;
}

.sst-dates {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 9px;
    color: var(--gray-500);
    margin-bottom: 6px;
}

.sst-dates strong {
    color: var(--hawx-teal);
}

.sst-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sched-opt-btn {
    padding: 5px 8px;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    background: #fff;
    color: var(--gray-600);
    font-size: 10px;
    font-weight: 500;
    transition: all 0.15s;
    text-align: left;
}

.sched-opt-btn:hover {
    border-color: var(--hawx-teal);
    color: var(--hawx-teal);
}

.sched-opt-btn.active {
    background: var(--hawx-teal);
    border-color: var(--hawx-teal);
    color: #fff;
}

.sst-frozen {
    padding: 8px 4px;
    text-align: center;
    font-size: 9px;
    color: #92400e;
    background: var(--warning-bg);
    border-radius: 4px;
    margin-top: 4px;
}

/* Additional Scheduling Tab Styles */
.sst-disabled {
    padding: 8px 4px;
    text-align: center;
    font-size: 9px;
    color: var(--gray-500);
    background: var(--gray-100);
    border-radius: 4px;
    margin-top: 4px;
}

.sst-season {
    display: block;
    font-size: 9px;
    color: var(--gray-500);
    margin-bottom: 4px;
}

.sst-addons {
    font-size: 9px;
    color: var(--gray-400);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sst-options .empty {
    font-size: 9px;
    color: var(--gray-400);
    font-style: italic;
}

.out-of-season {
    opacity: 0.6;
}

/* Scheduling Alert Banners */
.sched-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    margin: 8px;
    border-radius: 6px;
    border: 1px solid;
}

.sched-alert-danger {
    background: var(--error-bg);
    border-color: var(--error);
}

.sched-alert-warning {
    background: var(--warning-bg);
    border-color: var(--warning);
}

.sched-alert-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.sched-alert-content {
    flex: 1;
    min-width: 0;
}

.sched-alert-content strong {
    display: block;
    font-size: 12px;
    color: var(--gray-800);
    margin-bottom: 4px;
}

.sched-alert-content p {
    margin: 2px 0;
    font-size: 11px;
    color: var(--gray-600);
}

.sched-alert-content p b {
    color: var(--error-dark);
}

.sched-alert-btn {
    padding: 6px 12px;
    border: 1px solid var(--hawx-teal);
    border-radius: 4px;
    background: var(--hawx-teal);
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.sched-alert-btn:hover {
    background: var(--hawx-teal-dark);
}

/* Risk and Status Badges */
.risk-badge,
.billing-badge,
.lock-badge {
    font-size: 10px;
    margin-left: 4px;
}

.risk-badge.high {
    color: var(--error);
}

.risk-badge.medium {
    color: var(--warning);
}

/* Bill After Service (BAS) Badges and Indicators */
.bas-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #92400e;
    margin-left: 6px;
}

.bas-badge-sm {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 4px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 600;
    color: #92400e;
    margin-left: 4px;
}

[data-theme="dark"] .bas-badge-sm {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.5);
    color: #fbbf24;
}

.bas-tag {
    display: inline-block;
    padding: 1px 4px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 600;
    color: #92400e;
    margin-left: 4px;
}

[data-theme="dark"] .bas-tag {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.5);
    color: #fbbf24;
}

.bas-banner {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-bottom: 1px solid #f59e0b;
    font-size: 10px;
    font-weight: 500;
    color: #92400e;
}

[data-theme="dark"] .bas-banner {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.25) 100%);
    border-bottom-color: rgba(245, 158, 11, 0.5);
    color: #fbbf24;
}

.bas-banner-icon {
    font-size: 12px;
}

/* BAS styling for subscription cards */
.sub-card-bas {
    border-left: 3px solid #f59e0b;
}

.sub-section-card-bas {
    border-color: #f59e0b;
}

.sub-section-card-bas .sub-section-head {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

[data-theme="dark"] .sub-section-card-bas {
    border-color: rgba(245, 158, 11, 0.5);
}

[data-theme="dark"] .sub-section-card-bas .sub-section-head {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.2) 100%);
}

/* Lock Button Styles */
.sched-btn-sm.sched-btn-lock {
    background: var(--info-bg);
    border-color: var(--info);
    color: var(--info);
}

.sched-btn-sm.sched-btn-lock:hover {
    background: var(--info);
    color: #fff;
}

/* Warranty Card Styles */
.pending-card.warranty {
    border-left: 3px solid var(--info);
}

/* Disabled pill/button states */
.insp-pill-sm.disabled,
.sched-opt-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.sched-btn-sm[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────────────────────────
SCHEDULING OPTIONS PANEL - Shows when options are selected
───────────────────────────────────────────────────────────────────────────── */
.scheduling-options-panel {
    margin: 12px;
    padding: 16px;
    background: var(--gray-50);
    border: 1px solid var(--hawx-teal-light);
    border-radius: 8px;
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.scheduling-options-panel.hide {
    display: none;
}

/* Selection Header */
.sop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--gray-200);
}

.sop-count {
    font-weight: 600;
    font-size: 13px;
    color: var(--hawx-teal-dark);
}

/* Confirmation Boxes */
.sop-confirm-box {
    padding: 16px;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    text-align: center;
}

.sop-confirm-box.hide {
    display: none;
}

.sop-confirm-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 12px;
}

.sop-confirm-dropdown {
    margin-bottom: 12px;
}

.sop-confirm-dropdown select {
    width: 100%;
    max-width: 300px;
    padding: 8px 12px;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    font-size: 12px;
    background: #fff;
}

.sop-confirm-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Sections */
.sop-section {
    margin-bottom: 16px;
}

.sop-section h4 {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0 0 8px 0;
}

/* Date Range Section */
.sop-date-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.sop-date-input-wrapper {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.sop-date-input-wrapper .calendar-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--gray-400);
    pointer-events: none;
}

.sop-date-input {
    width: 100%;
    padding: 10px 12px 10px 34px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font-size: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.sop-date-input:hover {
    border-color: var(--gray-300);
}

.sop-date-input:focus {
    outline: none;
    border-color: var(--hawx-teal);
    box-shadow: var(--shadow-focus);
}

/* Fixed date range display (non-interactive) */
.sop-date-display {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    min-width: 200px;
}

.sop-date-display .calendar-icon {
    width: 16px;
    height: 16px;
    color: var(--hawx-teal);
    flex-shrink: 0;
}

.sop-date-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-700);
}

.sop-date-presets {
    display: flex;
    gap: 4px;
}

.date-preset-btn {
    padding: 6px 10px;
    font-size: 11px;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    background: #fff;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.date-preset-btn:hover {
    border-color: var(--hawx-teal);
    color: var(--hawx-teal);
}

.date-preset-btn.active {
    background: var(--hawx-teal);
    border-color: var(--hawx-teal);
    color: #fff;
}

/* Target Pests Grid */
.target-pests-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.target-pest {
    padding: 6px 10px;
    font-size: 11px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.target-pest:hover {
    border-color: var(--hawx-teal);
    background: var(--hawx-teal-light);
}

.target-pest.selected {
    background: var(--hawx-teal);
    border-color: var(--hawx-teal);
    color: #fff;
}

.target-pest.hide {
    display: none;
}

/* Appointment Notes */
#appt-notes-input {
    width: 100%;
    min-height: 60px;
    padding: 10px;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    font-size: 12px;
    resize: vertical;
}

#appt-notes-input:focus {
    outline: none;
    border-color: var(--hawx-teal);
    box-shadow: var(--shadow-focus);
}

/* Toggle Options Row */
.sop-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 16px;
}

.sop-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sop-toggle.hide {
    display: none;
}

.sop-toggle .toggle-text {
    font-size: 11px;
    color: var(--gray-600);
}

/* Toggle Switch */
.toggle-container {
    position: relative;
    width: 36px;
    height: 20px;
}

.toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-label {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--gray-300);
    border-radius: 20px;
    transition: 0.3s;
}

.toggle-label::before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: 0.3s;
}

.toggle-input:checked + .toggle-label {
    background-color: var(--hawx-teal);
}

.toggle-input:checked + .toggle-label::before {
    transform: translateX(16px);
}

.toggle-input:disabled + .toggle-label {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Call Ahead Options */
.call-ahead-options {
    display: flex;
    gap: 4px;
}

.call-ahead-opt {
    width: 32px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    background: var(--gray-50);
    font-size: 11px;
    color: var(--gray-600);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.call-ahead-opt:hover {
    border-color: var(--hawx-teal);
    color: var(--hawx-teal);
}

.call-ahead-opt.selected {
    background: var(--hawx-teal);
    border-color: var(--hawx-teal);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(99, 118, 117, 0.35), 0 0 0 1px rgba(99, 118, 117, 0.4);
    transform: translateY(-1px);
}

.call-ahead-opt.hide {
    display: none;
}

/* Appointment Results */
.sop-results {
    margin-bottom: 16px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
}

.sop-results.hide {
    display: none;
}

.sop-loading {
    text-align: center;
    padding: 20px;
}

.sop-loading.hide {
    display: none;
}

.progress-bar-container {
    width: 100%;
    height: 4px;
    background: var(--gray-200);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-bar {
    height: 100%;
    background: var(--hawx-teal);
    width: 0%;
    transition: width 0.3s;
    animation: progress-pulse 1.5s ease-in-out infinite;
}

@keyframes progress-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.sop-slots {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Appointment Day Rows */
.appt-day-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-100);
}

.appt-day-row:last-child {
    border-bottom: none;
}

.appt-day-label {
    min-width: 100px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-700);
}

.appt-day-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}

/* Individual Appointment Slots */
.appt-slot {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.appt-slot:hover:not(.unavailable) {
    border-color: var(--hawx-teal);
    background: var(--hawx-teal-light);
}

.appt-slot.selected {
    background: var(--hawx-teal);
    border-color: var(--hawx-teal);
    color: #fff;
}

.appt-slot.selected .appt-slot-time {
    color: #fff;
}

.appt-slot.selected .appt-slot-score {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.appt-slot.unavailable {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--gray-50);
}

.appt-slot-time {
    font-size: 11px;
    color: var(--gray-700);
}

.appt-slot-score {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 26px;
    text-align: center;
}

.appt-slot-score.score-high {
    background: var(--success-bg);
    color: var(--success-dark);
}

.appt-slot-score.score-medium {
    background: var(--warning-bg);
    color: var(--warning-dark);
}

.appt-slot-score.score-low {
    background: var(--gray-100);
    color: var(--gray-500);
}

/* Submit Section */
#submit-scheduling-section {
    text-align: center;
}

#submit-scheduling-btn {
    min-width: 200px;
}

#submit-scheduling-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sop-status {
    margin-top: 12px;
}

.sop-status.hide {
    display: none;
}

.status-success {
    color: var(--success);
    font-weight: 500;
}

.status-error {
    color: var(--error);
    font-weight: 500;
}

/* Selected state for scheduling option buttons and inspection pills */
.sched-opt-btn.selected,
.insp-pill-sm.selected {
    background: var(--hawx-teal);
    border-color: var(--hawx-teal);
    color: #fff;
}

/* Selected pending appointment card */
.pending-card.selected {
    border-color: var(--hawx-teal);
    box-shadow: 0 0 0 2px rgba(99, 118, 117, 0.2);
}

.pending-card .pc-actions .sched-btn-sm.selected {
    background: var(--hawx-teal);
    border-color: var(--hawx-teal);
    color: #fff;
}

/* ─────────────────────────────────────────────────────────────────────────────
PAYMENTS TAB - Financial Dashboard Aesthetic
───────────────────────────────────────────────────────────────────────────── */

/* Payment Summary - Hero Section */
/* ═══════════════════════════════════════════════════════════════════════════
   Payment Summary - Unified Hero Section
   ═══════════════════════════════════════════════════════════════════════════ */
.pay-summary {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #fafbfc 0%, #f4f6f8 100%);
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0;
    position: relative;
    flex-wrap: wrap;
    justify-content: space-around;
}

.pay-summary::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--hawx-teal) 0%, var(--hawx-gold) 100%);
}

/* Balance Block - Prominent left section */
.pay-balance-block {
    flex-shrink: 0;
    min-width: 120px;
}

.pay-balance-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.pay-balance-amount {
    font-size: 28px;
    font-weight: 700;
    color: var(--gray-800);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}

.pay-balance-amount.has-balance {
    color: var(--error);
}

.pay-balance-amount.zero-balance {
    color: var(--success-dark);
}

/* Info Block - Card & AutoPay side by side */
.pay-info-block {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    flex-shrink: 0;
}

.pay-info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pay-info-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pay-info-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-700);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pay-card-value::before {
    content: '💳';
    font-size: 12px;
}

.pay-info-divider {
    width: 1px;
    height: 28px;
    background: var(--gray-200);
}

/* AutoPay status badges */
.autopay-status {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
}

.autopay-status-none {
    color: #c62828;
    background: var(--error-bg);
}

.autopay-status-none::before {
    content: '⚠ ';
}

.autopay-status-active {
    color: #2e7d32;
    background: var(--success-bg);
}

.autopay-status-active::before {
    content: '✓ ';
}

/* Actions Block - Right aligned */
.pay-actions-block {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.pay-action-btn {
    padding: 7px 12px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    background: #fff;
    color: var(--gray-600);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.pay-action-btn:hover {
    border-color: var(--gray-300);
    background: var(--gray-50);
    color: var(--gray-700);
}

.pay-action-btn.pay-action-primary {
    background: var(--hawx-teal);
    border-color: var(--hawx-teal);
    color: #fff;
    font-weight: 600;
    padding: 8px 14px;
}

.pay-action-btn.pay-action-primary:hover {
    background: var(--hawx-teal-dark);
    border-color: var(--hawx-teal-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99, 118, 117, 0.25);
}

.pay-action-btn:disabled,
.pay-action-btn.pay-action-primary:disabled {
    background: var(--gray-200);
    border-color: var(--gray-200);
    color: var(--gray-400);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.pay-action-btn.pay-action-primary svg {
    stroke: #fff;
}

.pay-actions-secondary {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: space-around;
}

/* Legacy support for autopay-section if still referenced */
.autopay-section {
    display: none;
}

/* Payments Grid Layout */
.pay-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    padding: 20px 24px;
    min-height: 0;
}

@media (max-width: 900px) {
    .pay-grid {
        grid-template-columns: 1fr;
    }
}

.pay-column {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pay-column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
    border-bottom: 1px solid var(--gray-100);
}

.pay-column-head h4 {
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-700);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pay-column-head h4::before {
    content: '';
    width: 3px;
    height: 14px;
    background: var(--hawx-teal);
    border-radius: 2px;
}

#pay-tickets-column .pay-column-head:last-of-type h4::before {
    background: var(--hawx-gold);
}

.pay-column-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-700);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pay-column-meta {
    font-size: 11px;
    color: var(--gray-400);
    font-weight: 500;
}

/* Sub-tabs */
.sub-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0;
}

.sub-tab {
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--gray-500);
    font-size: 12px;
    font-weight: 500;
    transition: all 0.15s ease;
}

.sub-tab:hover {
    background: var(--gray-100);
    color: var(--gray-700);
}

.sub-tab.active {
    background: var(--hawx-teal);
    color: #fff;
    box-shadow: 0 2px 4px rgba(99, 118, 117, 0.2);
}

.subtab-pane {
    display: none;
}

.subtab-pane.active {
    display: block;
}

/* Payment List - Refined Transaction Ledger */
.pay-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.pay-list::-webkit-scrollbar {
    width: 6px;
}

.pay-list::-webkit-scrollbar-track {
    background: var(--gray-50);
}

.pay-list::-webkit-scrollbar-thumb {
    background: var(--gray-200);
    border-radius: 3px;
}

.pay-list::-webkit-scrollbar-thumb:hover {
    background: var(--gray-300);
}

/* Payment Item - Ledger Row */
.pay-item {
    background: #fff;
    border: none;
    border-radius: 0;
    overflow: visible;
    border-bottom: 1px solid var(--gray-100);
    transition: all 0.12s ease;
    position: relative;
}

.pay-item:first-child {
    border-top: 1px solid var(--gray-100);
}

.pay-item:last-child {
    border-bottom: 1px solid var(--gray-100);
}

.pay-item:hover {
    background: #f8fafb;
    z-index: 1;
}

/* Failed Payment Styling */
.pay-item-failed {
    background: #fff8f8;
    border-left: 3px solid var(--error);
}

.pay-item-failed:hover {
    background: #fff5f5;
}

/* Main Payment Row - Horizontal Ledger Style */
.pay-item-main {
    display: flex;
    align-items: flex-start;
    padding: 14px 12px;
    cursor: pointer;
    gap: 0;
}

/* Date Column - Fixed Width */
.pay-item-left {
    flex: 0 0 85px;
    padding-right: 12px;
    border-right: 1px solid var(--gray-100);
    margin-right: 14px;
}

.pay-item-date {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-800);
    line-height: 1.3;
    white-space: nowrap;
}

.pay-item-time {
    display: block;
    font-size: 10px;
    color: var(--gray-400);
    font-weight: 500;
    margin-top: 3px;
}

/* Center Content - Flex grow */
.pay-item-center {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 16px;
}

/* Method Display - Primary info row */
.pay-item-method {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-800);
    line-height: 1;
}

/* Card type icon placeholder - shown before method */
.pay-item-method::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 12px;
    background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-300) 100%);
    border-radius: 2px;
    flex-shrink: 0;
}

.pay-item-failed .pay-item-method::before {
    background: linear-gradient(135deg, var(--error-bg) 0%, #ffcdd2 100%);
}

/* Ticket Reference - Secondary info */
.pay-item-ticket {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    color: var(--gray-500);
    font-family: var(--mono);
    font-weight: 500;
    gap: 4px;
    line-height: 1;
}

.pay-item-ticket::before {
    content: '→';
    color: var(--gray-300);
    font-size: 10px;
}

/* Amount Column - Fixed width, right aligned */
.pay-item-right {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    min-width: 90px;
}

.pay-item-amount {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-800);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1;
}

/* Amount color states */
.pay-item-amount.positive,
.status-completed + .pay-item-amount,
.pay-item:not(.pay-item-failed) .pay-item-amount {
    color: var(--gray-800);
}

.pay-item-failed .pay-item-amount {
    color: var(--error);
    text-decoration: line-through;
    text-decoration-color: var(--error);
    opacity: 0.7;
}

/* Status Badge */
.pay-item-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}

/* Status Variants */
.pay-item-status.status-completed {
    background: var(--success-bg);
    color: var(--success-dark);
}

.pay-item-status.status-completed::before {
    content: '✓';
    font-size: 9px;
}

.pay-item-status.status-failed {
    background: var(--error-bg);
    color: var(--error);
}

.pay-item-status.status-failed::before {
    content: '✕';
    font-size: 9px;
}

.pay-item-status.status-ghost {
    background: var(--info-bg);
    color: var(--info-dark);
}

.pay-item-status.status-ghost::before {
    content: '↩';
    font-size: 9px;
}

.pay-item-status.status-pending {
    background: var(--warning-bg);
    color: var(--warning-dark);
}

.pay-item-status.status-pending::before {
    content: '⏳';
    font-size: 8px;
}

/* Refund Button - Inline with status */
.pay-item-right .btn-xs.pay-refund-action {
    margin-top: 4px;
    font-size: 10px;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid var(--gray-200);
    color: var(--gray-500);
    border-radius: 4px;
    opacity: 0;
    transition: all 0.15s ease;
}

.pay-item:hover .pay-refund-action {
    opacity: 1;
}

.pay-item-right .btn-xs.pay-refund-action:hover {
    border-color: var(--error);
    color: var(--error);
    background: var(--error-bg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TICKETS LIST - Invoice Ledger Style
   ═══════════════════════════════════════════════════════════════════════════ */

.tickets-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.tickets-list::-webkit-scrollbar {
    width: 6px;
}

.tickets-list::-webkit-scrollbar-track {
    background: var(--gray-50);
}

.tickets-list::-webkit-scrollbar-thumb {
    background: var(--gray-200);
    border-radius: 3px;
}

.tickets-list::-webkit-scrollbar-thumb:hover {
    background: var(--gray-300);
}

/* Ticket Item - Ledger Row */
.ticket-item {
    background: #fff;
    border: none;
    border-radius: 0;
    overflow: visible;
    border-bottom: 1px solid var(--gray-100);
    transition: all 0.12s ease;
    position: relative;
    cursor: pointer;
}

.ticket-item:first-child {
    border-top: 1px solid var(--gray-100);
}

.ticket-item:last-child {
    border-bottom: 1px solid var(--gray-100);
}

.ticket-item:hover {
    background: #f8fafb;
    z-index: 1;
}

/* Unpaid Ticket Styling */
.ticket-item.ticket-unpaid {
    background: #fffbf5;
    border-left: 3px solid var(--warning);
}

.ticket-item.ticket-unpaid:hover {
    background: #fff8ee;
}

/* Pending Ticket Styling (active=0) */
.ticket-item.ticket-pending {
    background: #f5f8ff;
    border-left: 3px solid var(--info, #3b82f6);
    opacity: 0.85;
}

.ticket-item.ticket-pending:hover {
    background: #eef3ff;
    opacity: 0.95;
}

.ticket-item.ticket-pending .ticket-service::before {
    background: var(--info, #3b82f6);
}

.ticket-item.ticket-pending .ticket-total {
    color: var(--gray-600);
}

/* Template Ticket Styling (active=-1) */
.ticket-item.ticket-template {
    background: var(--gray-50);
    border-left: 3px solid var(--gray-300);
    opacity: 0.7;
}

.ticket-item.ticket-template:hover {
    background: var(--gray-100);
    opacity: 0.85;
}

.ticket-item.ticket-template .ticket-service::before {
    background: var(--gray-400);
}

.ticket-item.ticket-template .ticket-total {
    color: var(--gray-500);
    text-decoration: line-through;
}

.ticket-item.ticket-template .ticket-date,
.ticket-item.ticket-template .ticket-service {
    color: var(--gray-500);
}

/* Status Badges */
.ticket-status-badge {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 3px;
    margin-top: 4px;
}

.ticket-pending-badge {
    color: var(--info, #3b82f6);
    background: #e0e7ff;
}

.ticket-template-badge {
    color: var(--gray-500);
    background: var(--gray-200);
}

/* Balance Status Styles */
.ticket-balance.balance-pending {
    color: var(--info, #3b82f6);
    background: #e0e7ff;
    padding: 3px 8px;
    border-radius: 4px;
    font-style: italic;
}

.ticket-balance.balance-pending::before {
    content: none;
}

.ticket-balance.balance-template {
    color: var(--gray-500);
    background: var(--gray-100);
    padding: 3px 8px;
    border-radius: 4px;
    font-style: italic;
}

.ticket-balance.balance-template::before {
    content: none;
}

/* Main Ticket Row - Horizontal Ledger */
.ticket-main {
    display: flex;
    align-items: flex-start;
    padding: 14px 12px;
    gap: 0;
}

/* Date/ID Column - Fixed Width */
.ticket-left {
    flex: 0 0 85px;
    padding-right: 12px;
    border-right: 1px solid var(--gray-100);
    margin-right: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ticket-date {
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-800);
    line-height: 1.3;
    white-space: nowrap;
}

.ticket-time {
    font-size: 10px;
    color: var(--gray-400);
    font-weight: 500;
}

.ticket-id {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--hawx-teal);
    font-family: var(--mono);
    line-height: 1;
    margin-top: 2px;
}

.ticket-id::before {
    content: '#';
    color: var(--gray-400);
    margin-right: 1px;
}

/* Center Content - Flex grow */
.ticket-center {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 16px;
}

/* Service Type - Primary info */
.ticket-service {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-800);
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ticket-service::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--hawx-teal);
    border-radius: 2px;
    flex-shrink: 0;
}

.ticket-item.ticket-unpaid .ticket-service::before {
    background: var(--warning);
}

/* Invoice Number - Secondary */
.ticket-invoice {
    font-size: 11px;
    color: var(--gray-500);
    font-family: var(--mono);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ticket-invoice::before {
    content: 'INV';
    font-size: 9px;
    color: var(--gray-400);
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* Category Tag */
.ticket-category {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    color: var(--gray-500);
    background: var(--gray-50);
    padding: 2px 6px;
    border-radius: 3px;
    width: fit-content;
    margin-top: 2px;
}

/* Items Summary - Compact inline */
.ticket-items-summary {
    font-size: 11px;
    color: var(--gray-400);
    margin-top: 4px;
}

.ticket-items-summary strong {
    color: var(--gray-600);
    font-weight: 600;
}

/* Amount Column - Fixed width, right aligned */
.ticket-right {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    min-width: 100px;
}

/* Total Amount */
.ticket-total {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-800);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1;
}

/* Balance Display */
.ticket-balance {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ticket-balance.balance-zero {
    color: var(--gray-400);
}

.ticket-balance.balance-zero::before {
    content: '✓';
    font-size: 9px;
    color: var(--success);
}

.ticket-balance.balance-due {
    color: var(--warning-dark);
    background: var(--warning-bg);
    padding: 3px 8px;
    border-radius: 4px;
}

.ticket-balance.balance-due::before {
    content: '$';
}

/* Status Badge */
.ticket-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}

.ticket-status.status-completed,
.ticket-status.status-paid {
    background: var(--success-bg);
    color: var(--success-dark);
}

.ticket-status.status-completed::before,
.ticket-status.status-paid::before {
    content: '✓';
    font-size: 9px;
}

.ticket-status.status-pending,
.ticket-status.status-partial {
    background: var(--warning-bg);
    color: var(--warning-dark);
}

.ticket-status.status-pending::before,
.ticket-status.status-partial::before {
    content: '○';
    font-size: 9px;
}

.ticket-status.status-unpaid {
    background: var(--error-bg);
    color: var(--error);
}

.ticket-status.status-unpaid::before {
    content: '!';
    font-size: 9px;
    font-weight: 900;
}

/* LEGACY: Keep old classes working */
.ticket-desc {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticket-amount {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-800);
    font-variant-numeric: tabular-nums;
    min-width: 70px;
    text-align: right;
}

.ticket-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Cards List - Financial Card Display */
.cards-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
}

.card-item {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #fff 0%, var(--gray-50) 100%);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    transition: all 0.15s ease;
}

.card-item:hover {
    border-color: var(--gray-300);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.card-item.card-default {
    border-color: var(--hawx-teal);
    background: linear-gradient(135deg, var(--hawx-teal-light) 0%, #fff 100%);
    box-shadow: 0 0 0 1px var(--hawx-teal-light);
}

[data-theme="dark"] .card-item.card-default {
    border-color: rgba(99, 118, 117, 0.6);
    background: linear-gradient(135deg, rgba(99, 118, 117, 0.35) 0%, rgba(10, 12, 15, 0.85) 70%, var(--card-bg) 100%);
    box-shadow: 0 0 0 1px rgba(99, 118, 117, 0.4);
}

[data-theme="dark"] .card-item.card-default .card-name,
[data-theme="dark"] .card-item.card-default .card-exp,
[data-theme="dark"] .card-item.card-default .card-info,
[data-theme="dark"] .card-item.card-default .card-badge,
[data-theme="dark"] .card-item.card-default .card-type {
    color: var(--text-primary);
}

[data-theme="dark"] .card-item.card-default .card-type {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(99, 118, 117, 0.5);
}

[data-theme="dark"] .card-item.card-default .card-badge {
    background: rgba(99, 118, 117, 0.8);
}

.card-type {
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 32px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid var(--gray-200);
}

.card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.card-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-800);
    font-family: var(--mono);
    letter-spacing: 0.02em;
}

.card-exp {
    display: block;
    font-size: 11px;
    color: var(--gray-400);
    font-weight: 500;
}

.card-exp.expiring-soon {
    color: var(--warning-dark);
}

.card-exp.expired {
    color: var(--error);
}

.card-badge {
    padding: 4px 10px;
    background: var(--hawx-teal);
    color: #fff;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.card-badge-warning {
    background: var(--warning, #f59e0b);
}

.card-badge-error {
    background: var(--error, #ef4444);
}

.card-inactive {
    opacity: 0.6;
}

.card-exp.text-warning {
    color: var(--warning, #f59e0b);
}

.card-actions {
    display: flex;
    gap: 4px;
    margin-left: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TICKET LINE ITEMS - Invoice Details
   ═══════════════════════════════════════════════════════════════════════════ */

.ticket-lines {
    margin: 0 12px 12px 111px; /* Align with content after date column */
    padding: 10px 12px;
    background: linear-gradient(180deg, var(--gray-50) 0%, #fff 100%);
    border: 1px solid var(--gray-100);
    border-radius: 6px;
}

.ticket-line {
    display: grid;
    grid-template-columns: 1fr 50px 70px;
    gap: 12px;
    font-size: 12px;
    color: var(--gray-600);
    padding: 8px 0;
    align-items: center;
}

.ticket-line:not(:last-child) {
    border-bottom: 1px solid var(--gray-100);
}

.ticket-line .tl-desc {
    font-weight: 500;
    color: var(--gray-700);
}

.ticket-line .tl-qty {
    text-align: center;
    color: var(--gray-400);
    font-size: 11px;
    font-weight: 500;
}

.ticket-line .tl-amt {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--gray-700);
}

.ticket-line.empty-state {
    display: block;
    text-align: center;
    color: var(--gray-400);
    font-style: italic;
    padding: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TICKET PAYMENTS - Applied Payments Section
   ═══════════════════════════════════════════════════════════════════════════ */

.ticket-payments {
    margin: 0 12px 12px 111px; /* Align with content after date column */
    padding: 10px 12px;
    background: var(--purple-bg);
    border: 1px solid #e5ddff;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.ticket-payments::before {
    content: 'Payments Applied';
    display: block;
    width: 100%;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--purple);
    margin-bottom: 4px;
    opacity: 0.7;
}

/* Payment Application Chips */
.pay-app-chip {
    background: #fff;
    color: var(--gray-700);
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 500;
    font-family: var(--mono);
    border: 1px solid var(--gray-200);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.pay-app-chip:hover {
    background: var(--hawx-teal-light);
    border-color: var(--hawx-teal);
    color: var(--hawx-teal);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

/* Inside ticket-payments, use purple accent */
.ticket-payments .pay-app-chip {
    background: #fff;
    border-color: #d4c8f5;
    color: var(--purple);
}

.ticket-payments .pay-app-chip:hover {
    background: var(--purple-bg);
    border-color: var(--purple);
}

.pay-app-chip::before {
    content: '💳';
    font-size: 10px;
    font-style: normal;
}

.pay-app-chip.muted {
    background: transparent;
    color: var(--gray-400);
    border-color: var(--gray-100);
    box-shadow: none;
}

.pay-app-chip.muted::before {
    content: '—';
}

/* Notes displayed inline */
.pay-item-notes {
    font-size: 11px;
    color: var(--gray-500);
    font-style: italic;
    line-height: 1.4;
    margin-top: 2px;
    padding-left: 22px;
    position: relative;
}

.pay-item-notes::before {
    content: '"';
    position: absolute;
    left: 0;
    top: -2px;
    font-size: 18px;
    color: var(--gray-200);
    font-style: normal;
    font-family: Georgia, serif;
}

/* Application Chips Container - Inline with content */
.pay-item .pay-app-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

/* Applications inside pay-item-center */
.pay-item-center .pay-app-chips {
    padding: 0;
    background: transparent;
    margin: 6px 0 0 0;
    border-radius: 0;
}

.ticket-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.ticket-balance {
    font-weight: 700;
    font-size: 14px;
    color: var(--gray-800);
    font-variant-numeric: tabular-nums;
}

.ticket-balance.has-balance {
    color: var(--error);
}

/* Empty States */
.pay-list .empty-state,
.tickets-list .empty-state,
.cards-list .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
    color: var(--gray-400);
    font-size: 13px;
    font-weight: 500;
    min-height: 120px;
}

.pay-list .empty-state svg,
.tickets-list .empty-state svg,
.cards-list .empty-state svg {
    margin-bottom: 12px;
    color: var(--gray-300);
}

.ticket-date {
    font-size: 11px;
    color: var(--gray-500);
    font-weight: 500;
}

/* Linked Items - Cross-referencing between payments and tickets */
.pay-item.is-linked,
.ticket-item.is-linked {
    background: var(--hawx-teal-light);
    border-left: 3px solid var(--hawx-teal) !important;
}

/* Payment Actions Row Button Styling */
#tab-payments .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

#tab-payments .btn-primary svg {
    flex-shrink: 0;
}

#tab-payments .btn-ghost {
    transition: all 0.15s ease;
}

/* ─────────────────────────────────────────────────────────────────────────────
SUBSCRIPTIONS TAB
───────────────────────────────────────────────────────────────────────────── */
.subs-overview {
    display: flex;
    gap: 8px;
    padding: 10px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0;
    overflow-x: auto;
}

.sub-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border: 2px solid var(--gray-200);
    border-radius: 6px;
    cursor: pointer;
    min-width: 180px;
}

.sub-card:hover {
    border-color: var(--gray-300);
}

.sub-card.active {
    border-color: var(--hawx-teal);
    background: linear-gradient(135deg, #f0f5f5, #fff);
}

.sub-card-icon {
    font-size: 18px;
}

.sub-card-info {
    flex: 1;
}

.sub-card-name {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-700);
}

.sub-card-price {
    font-size: 10px;
    color: var(--gray-500);
}

.sub-card-status {
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 500;
}

.sub-detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Key Info Bar */
.sub-key-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 10px;
    background: linear-gradient(135deg, var(--gray-50), var(--gray-100));
    border: 1px solid var(--gray-200);
    border-radius: 6px;
}

.sub-dates {
    display: flex;
    gap: 16px;
}

.sub-date-item label {
    display: block;
    font-size: 9px;
    color: var(--gray-400);
    text-transform: uppercase;
}

.sub-date-item span {
    font-size: 11px;
    color: var(--gray-600);
}

.date-highlight {
    color: var(--hawx-teal) !important;
    font-weight: 600;
}

/* Quick Schedule Actions */
.sub-schedule-quick {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--hawx-teal-light);
    border: 1px solid var(--hawx-teal);
    border-radius: 6px;
}

.ssq-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--hawx-teal);
}

/* Billing Row */
.sub-billing-row {
    display: flex;
    gap: 12px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
}

.sub-billing-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.billing-item label {
    display: block;
    font-size: 9px;
    color: var(--gray-400);
    text-transform: uppercase;
}

.billing-item span {
    font-size: 11px;
    font-weight: 500;
    color: var(--gray-700);
}

.sub-addons-compact {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.sub-addons-compact label {
    font-size: 9px;
    color: var(--gray-400);
    text-transform: uppercase;
}

.addon-tag {
    padding: 2px 8px;
    background: var(--gray-100);
    border-radius: 10px;
    font-size: 10px;
    color: var(--gray-600);
}

.addon-tag small {
    color: var(--gray-400);
}

/* Two Column Layout */
.sub-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.sub-col {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    overflow: hidden;
}

.sub-col-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
}

.sub-col-head h4 {
    margin: 0;
    font-size: 10px;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
}

.sub-mini-list {
    padding: 4px 6px;
}

.sub-mini-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
    margin-bottom: 2px;
}

.sub-mini-row:last-child {
    margin-bottom: 0;
}

.sub-mini-row.upcoming {
    background: var(--info-bg);
}

.smr-date {
    font-size: 10px;
    font-weight: 500;
    color: var(--gray-500);
    min-width: 45px;
}

.smr-label {
    flex: 1;
    font-size: 10px;
    color: var(--gray-600);
}

.smr-status {
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 500;
}

.smr-amount {
    font-size: 10px;
    font-weight: 500;
    color: var(--gray-700);
    font-family: var(--mono);
}

.smr-amount.fail {
    color: var(--error);
}

/* Subscription Notes Section */
.sub-notes-section {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    overflow: hidden;
}

.sub-notes-compact {
    padding: 6px;
}

.sub-note-compact {
    padding: 6px;
    background: var(--gray-50);
    border-radius: 4px;
    margin-bottom: 4px;
}

.sub-note-compact:last-child {
    margin-bottom: 0;
}

.snc-meta {
    display: block;
    font-size: 9px;
    color: var(--gray-400);
    margin-bottom: 2px;
}

.snc-text {
    font-size: 10px;
    color: var(--gray-600);
    line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────────────────────────
SUBSCRIPTIONS TAB - Section Cards & Expandable Appointments
───────────────────────────────────────────────────────────────────────────── */
.sub-three-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.sub-two-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.sub-section-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    overflow: hidden;
}

.sub-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
}

.sub-section-head h4 {
    margin: 0;
    font-size: 10px;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Section Divider & Subhead - for combining sections within a card */
.sub-section-divider {
    height: 1px;
    background: var(--gray-200);
    margin: 0 10px;
}

.sub-section-subhead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
    border-top: 1px solid var(--gray-100);
}

.sub-section-subhead span {
    font-size: 10px;
    font-weight: 600;
    color: var(--gray-500);
}

/* Billing Grid */
.billing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px 8px;
    padding: 6px 10px;
}

.billing-grid .billing-item label {
    display: block;
    font-size: 8px;
    color: var(--gray-400);
    text-transform: uppercase;
    margin-bottom: 0;
}

.billing-grid .billing-item span {
    font-size: 10px;
    font-weight: 500;
    color: var(--gray-700);
}

.text-success {
    color: var(--success) !important;
}

/* Add-ons List */
.addons-list {
    padding: 6px 8px;
}

.addon-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    background: var(--gray-50);
    border-radius: 4px;
    margin-bottom: 4px;
}

.addon-row:last-child {
    margin-bottom: 0;
}

.addon-name {
    flex: 1;
    font-size: 11px;
    color: var(--gray-700);
}

.addon-price {
    font-size: 10px;
    font-weight: 500;
    color: var(--hawx-teal);
    font-family: var(--mono);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RECURRING TICKET TEMPLATE - Itemized breakdown of recurring charges
   ═══════════════════════════════════════════════════════════════════════════ */

.charge-breakdown-section {
    border-top: 1px solid var(--gray-200);
    margin-top: 4px;
}

.charge-breakdown-header {
    font-size: 10px;
    font-weight: 600;
    color: var(--gray-600);
    padding: 4px 10px 2px;
    background: var(--gray-50);
}

.recurring-template-container {
    padding: 2px 4px 4px;
}

.recurring-template-breakdown {
    background: linear-gradient(180deg, #f8fffe 0%, #fff 100%);
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    overflow: hidden;
}

.template-line {
    display: grid;
    grid-template-columns: 1fr 30px 55px;
    gap: 4px;
    font-size: 10px;
    color: var(--gray-600);
    padding: 4px 8px;
    align-items: center;
    border-bottom: 1px solid var(--gray-100);
}

.template-line:last-child {
    border-bottom: none;
}

.template-line .tl-desc {
    font-weight: 500;
    color: var(--gray-700);
}

.template-line .tl-qty {
    text-align: center;
    color: var(--gray-400);
    font-size: 9px;
    font-weight: 500;
}

.template-line .tl-amt {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--gray-700);
    font-family: var(--mono);
}

.template-service-charge {
    background: var(--gray-50);
}

.template-service-charge .tl-desc {
    color: var(--hawx-teal);
}

.template-subtotal {
    background: var(--gray-50);
    border-top: 2px solid var(--gray-200);
}

.template-tax {
    background: #fffbf5;
}

.template-tax .tl-desc {
    color: var(--warning);
}

.template-total {
    background: linear-gradient(180deg, #e8f7f5 0%, #d4f1ed 100%);
    border-top: 2px solid var(--hawx-teal);
}

.template-total .tl-desc,
.template-total .tl-amt {
    color: var(--hawx-teal-dark);
}

.taxable-indicator {
    font-size: 9px;
    color: var(--warning);
    font-weight: 600;
    vertical-align: super;
}

.taxable-legend {
    font-size: 9px;
    color: var(--gray-500);
    padding: 3px 8px;
    border-top: 1px dashed var(--gray-200);
    background: var(--gray-25);
}

/* Initial Ticket Template - Blue accent to differentiate from recurring (teal) */
.initial-template-breakdown {
    background: linear-gradient(180deg, #f8faff 0%, #fff 100%);
}

.initial-template-breakdown .template-service-charge {
    background: #f0f4ff;
}

.initial-template-breakdown .template-service-charge .tl-desc {
    color: var(--info);
}

.initial-template-breakdown .template-total {
    background: linear-gradient(180deg, #e8f0ff 0%, #d4e4ff 100%);
    border-top: 2px solid var(--info);
}

.initial-template-breakdown .template-total .tl-desc,
.initial-template-breakdown .template-total .tl-amt {
    color: var(--info);
}

/* Appointment History - Expandable */
.appt-history-list {
    padding: 4px;
}

.appt-hist-row {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    margin-bottom: 4px;
    overflow: hidden;
}

.appt-hist-row:last-child {
    margin-bottom: 0;
}

.appt-hist-upcoming {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--info-bg);
    border-color: var(--info);
}

.appt-hist-done {
    cursor: pointer;
}

.ahr-main {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
}

.ahr-main:hover {
    background: var(--gray-50);
}

.ahr-date {
    font-size: 10px;
    font-weight: 600;
    color: var(--gray-500);
    min-width: 45px;
}

.ahr-title {
    flex: 1;
    font-size: 11px;
    font-weight: 500;
    color: var(--gray-700);
}

.ahr-status {
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 500;
}

.ahr-time {
    font-size: 10px;
    color: var(--gray-500);
}

.ahr-tech {
    font-size: 10px;
    color: var(--gray-500);
}

.ahr-notes-preview {
    font-size: 10px;
    color: var(--gray-500);
    line-height: 1.4;
    padding: 4px 8px 6px;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.ahr-expand {
    font-size: 10px;
    color: var(--gray-400);
    transition: transform 0.2s;
}

.appt-hist-row[data-expanded="true"] .ahr-expand {
    transform: rotate(180deg);
}

.ahr-details {
    display: none;
    padding: 8px 10px;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
}

.appt-hist-row[data-expanded="true"] .ahr-details {
    display: block;
}

.ahr-detail-grid {
    display: flex;
    gap: 16px;
    margin-bottom: 6px;
    font-size: 10px;
    color: var(--gray-600);
}

.ahr-detail-grid strong {
    color: var(--gray-500);
}

.ahr-notes {
    font-size: 10px;
    color: var(--gray-600);
    line-height: 1.4;
    padding: 6px 8px;
    background: #fff;
    border-radius: 4px;
}

.ahr-notes strong {
    display: block;
    font-size: 9px;
    color: var(--gray-500);
    margin-bottom: 3px;
}

/* Charges List */
.charges-list {
    padding: 4px 8px;
}

.charge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 4px;
    margin-bottom: 3px;
}

.charge-row:last-child {
    margin-bottom: 0;
}

.charge-row-failed {
    background: var(--error-bg);
}

.chr-date {
    font-size: 10px;
    font-weight: 500;
    color: var(--gray-500);
    min-width: 45px;
}

.chr-desc {
    flex: 1;
    font-size: 10px;
    color: var(--gray-600);
}

.chr-amount {
    font-size: 10px;
    font-weight: 500;
    color: var(--gray-700);
    font-family: var(--mono);
}

.chr-status {
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 500;
}

/* Subscription Notes List */
.sub-notes-list {
    padding: 6px 8px;
}

.sub-note-item {
    padding: 6px 8px;
    background: var(--gray-50);
    border-radius: 4px;
    margin-bottom: 4px;
}

.sub-note-item:last-child {
    margin-bottom: 0;
}

.sni-meta {
    display: block;
    font-size: 9px;
    color: var(--gray-400);
    margin-bottom: 2px;
}

.sub-note-item p {
    margin: 0;
    font-size: 10px;
    color: var(--gray-600);
    line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────────────────────────
HISTORY TAB - Enhanced Timeline
───────────────────────────────────────────────────────────────────────────── */
.history-bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0;
}

.history-row-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.history-row-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.history-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Filter Pills */
.filter-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid var(--gray-200);
    border-radius: 20px;
    background: #fff;
    color: var(--gray-500);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.pill:hover {
    border-color: var(--gray-300);
    color: var(--gray-700);
    background: var(--gray-50);
}

.pill.active {
    background: var(--hawx-teal);
    color: #fff;
    border-color: var(--hawx-teal);
}

.pill.active .pill-dot {
    background: #fff;
    box-shadow: none;
}

/* Colored dots for filter pills */
.pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-appt { background: var(--success); }
.dot-note { background: var(--gray-400); }
.dot-sms { background: var(--info); }
.dot-email { background: #f59e0b; }
.dot-call { background: var(--purple); }
.dot-ai { background: #8b5cf6; }
.dot-payment { background: var(--hawx-gold); }
.dot-payment-failed { background: var(--error); }
.dot-flag { background: var(--warning); }
.dot-sub { background: var(--hawx-teal); }

/* Toggle-style pills - all active by default, click to toggle off */
.filter-toggles .toggle-pill {
    opacity: 1;
    transition: all 0.2s ease;
}

.filter-toggles .toggle-pill:not(.active) {
    background: var(--gray-100);
    color: var(--gray-400);
    border-color: var(--gray-200);
    opacity: 0.6;
}

.filter-toggles .toggle-pill:not(.active) .pill-dot {
    opacity: 0.4;
}

.filter-toggles .toggle-pill:not(.active):hover {
    opacity: 0.8;
    background: var(--gray-150, #e5e7eb);
}

/* Color-coded active toggle pills to match timeline colors */
.filter-toggles .toggle-pill.active[data-filter="appointment"] {
    background: var(--success);
    border-color: var(--success);
}

.filter-toggles .toggle-pill.active[data-filter="note"] {
    background: var(--gray-500);
    border-color: var(--gray-500);
}

.filter-toggles .toggle-pill.active[data-filter="sms"] {
    background: var(--info);
    border-color: var(--info);
}

.filter-toggles .toggle-pill.active[data-filter="email"] {
    background: #f59e0b;
    border-color: #f59e0b;
}

.filter-toggles .toggle-pill.active[data-filter="call"] {
    background: var(--purple);
    border-color: var(--purple);
}

.filter-toggles .toggle-pill.active[data-filter="ai"] {
    background: #8b5cf6;
    border-color: #8b5cf6;
}

.filter-toggles .toggle-pill.active[data-filter="payment"] {
    background: var(--hawx-gold);
    border-color: var(--hawx-gold);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.filter-toggles .toggle-pill.active[data-filter="subscription"] {
    background: var(--hawx-teal);
    border-color: var(--hawx-teal);
}

.filter-toggles .toggle-pill.active[data-filter="flag"] {
    background: var(--warning);
    border-color: var(--warning);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

/* Toggle All / Deselect All button */
.filter-toggles .toggle-all-pill {
    background: transparent;
    border: 1px dashed var(--gray-300);
    color: var(--gray-500);
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 4px;
}

.filter-toggles .toggle-all-pill:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
    color: var(--gray-700);
}

/* History Stats */
.history-stats {
    display: flex;
    gap: 16px;
}

.history-stat {
    font-size: 11px;
    color: var(--gray-400);
}

.history-stat strong {
    color: var(--gray-700);
    font-weight: 600;
}

/* Subscription filter dropdown */
.history-sub-filter {
    padding: 7px 12px;
    padding-right: 28px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E") right 10px center no-repeat;
    font-size: 11px;
    color: var(--gray-700);
    cursor: pointer;
    appearance: none;
    min-width: 160px;
}

.history-sub-filter:focus {
    outline: none;
    border-color: var(--hawx-teal);
    box-shadow: var(--shadow-focus);
}

/* Daterange Picker */
.history-daterange-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.history-daterange {
    padding: 7px 12px;
    padding-left: 32px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    background: #fff;
    font-size: 11px;
    color: var(--gray-700);
    cursor: pointer;
    min-width: 200px;
    font-family: inherit;
}

.history-daterange:focus {
    outline: none;
    border-color: var(--hawx-teal);
    box-shadow: var(--shadow-focus);
}

.daterange-icon {
    position: absolute;
    left: 10px;
    font-size: 12px;
    pointer-events: none;
}

/* Clear Dates Button */
.history-clear-dates {
    margin-left: 8px;
    padding: 5px 10px;
    font-size: 11px;
    color: var(--gray-600);
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.history-clear-dates:hover {
    color: var(--hawx-red);
    border-color: var(--hawx-red);
    background: rgba(239, 68, 68, 0.05);
}

/* Search Box */
.history-search {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    min-width: 180px;
}

.history-search .search-icon {
    font-size: 12px;
    margin-right: 6px;
    opacity: 0.5;
}

.history-search input {
    border: none;
    background: none;
    outline: none;
    font-size: 11px;
    padding: 7px 0;
    flex: 1;
    min-width: 0;
}

.history-search input::placeholder {
    color: var(--gray-400);
}

.search-clear {
    padding: 2px 6px;
    border: none;
    background: var(--gray-100);
    border-radius: 50%;
    font-size: 12px;
    color: var(--gray-500);
    cursor: pointer;
    line-height: 1;
}

.search-clear:hover {
    background: var(--gray-200);
    color: var(--gray-700);
}

.search-clear.hidden {
    display: none;
}

/* Generic search-sm for other tabs */
.search-sm {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
}

.search-sm input {
    border: none;
    background: none;
    outline: none;
    font-size: 11px;
    width: 140px;
}

.search-sm input::placeholder {
    color: var(--gray-400);
}

.search-wide {
    flex: 1;
    max-width: 200px;
}

.search-wide input {
    width: 100%;
}

/* Daterangepicker Overrides */
.daterangepicker {
    font-family: var(--font);
    font-size: 12px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.daterangepicker .ranges li {
    font-size: 11px;
    padding: 8px 12px;
    color: var(--gray-600);
}

.daterangepicker .ranges li:hover {
    background: var(--gray-50);
    color: var(--gray-800);
}

.daterangepicker .ranges li.active {
    background: var(--hawx-teal);
    color: #fff;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background: var(--hawx-teal);
}

.daterangepicker td.in-range {
    background: var(--hawx-teal-light);
}

.daterangepicker .btn-primary {
    background: var(--hawx-teal);
    border-color: var(--hawx-teal);
}

.daterangepicker .btn-primary:hover {
    background: var(--hawx-teal-dark);
    border-color: var(--hawx-teal-dark);
}

/* Timeline Structure */
.timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 8px;
    padding-bottom: 20px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIMELINE ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Keyframe definitions */
@keyframes tl-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes tl-slide-in {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes tl-scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes tl-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--pulse-color, var(--gray-200)); }
    50% { box-shadow: 0 0 0 5px var(--pulse-color, var(--gray-200)); }
}

@keyframes tl-dot-ping {
    0% { transform: scale(1); opacity: 1; }
    75%, 100% { transform: scale(1.8); opacity: 0; }
}

@keyframes tl-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 118, 117, 0); }
    50% { box-shadow: 0 0 12px 2px rgba(99, 118, 117, 0.15); }
}

@keyframes tl-attention-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.02); }
}

@keyframes tl-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Date Group Container */
.tl-date-group {
    position: relative;
    animation: tl-fade-in 0.3s ease-out backwards;
}

/* Stagger animation for date groups */
.tl-date-group:nth-child(1) { animation-delay: 0s; }
.tl-date-group:nth-child(2) { animation-delay: 0.05s; }
.tl-date-group:nth-child(3) { animation-delay: 0.1s; }
.tl-date-group:nth-child(4) { animation-delay: 0.15s; }
.tl-date-group:nth-child(5) { animation-delay: 0.2s; }

/* Add spacing between date groups for clearer separation */
.tl-date-group + .tl-date-group {
    margin-top: 6px;
}

/* Date Header - More prominent for quick time navigation */
.tl-date-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 10px 24px;
    position: sticky;
    top: 0;
    background: linear-gradient(to bottom, var(--gray-100) 0%, var(--gray-100) 90%, rgba(243,244,246,0) 100%);
    z-index: 10;
    margin-bottom: 4px;
}

/* Visual separator between date groups */
.tl-date-group + .tl-date-group .tl-date-header {
    border-top: 2px solid var(--gray-200);
    padding-top: 14px;
}

.tl-date-text {
    font-size: 11px;
    font-weight: 700;
    color: var(--gray-700);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* "Today" gets special emphasis */
.tl-date-header.tl-today .tl-date-text {
    color: var(--hawx-teal);
    font-size: 12px;
}

.tl-date-count {
    font-size: 10px;
    color: var(--gray-400);
    font-weight: 500;
    padding: 2px 8px;
    background: var(--gray-200);
    border-radius: 10px;
}

/* Timeline Item Base - With staggered animations */
.tl-item {
    display: flex;
    gap: 0;
    position: relative;
    margin-left: 0;
    transition: opacity 0.2s, transform 0.2s;
    animation: tl-slide-in 0.35s ease-out backwards;
}

/* Stagger items within each date group */
.tl-item:nth-child(2) { animation-delay: 0.05s; }
.tl-item:nth-child(3) { animation-delay: 0.1s; }
.tl-item:nth-child(4) { animation-delay: 0.15s; }
.tl-item:nth-child(5) { animation-delay: 0.2s; }
.tl-item:nth-child(6) { animation-delay: 0.25s; }

/* Edit Form Styles for Appointment Modal */
.pests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    margin-top: 10px;
}
.pest-chip {
    padding: 6px 12px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    font-size: 11px;
    color: #4b5563;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}
.pest-chip:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}
.pest-chip.selected {
    background: #637675;
    color: #fff;
    border-color: #637675;
}
.call-ahead-btns {
    display: flex;
    gap: 8px;
}
.ca-btn {
    padding: 4px 12px;
    border: 1px solid #d1d5db;
    background: #fff;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.ca-btn.selected {
    background: #637675;
    color: #fff;
    border-color: #637675;
}
.adm-edit-form h4 {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 4px;
}
.mr-2 { margin-right: 8px; }

.tl-item:last-child .tl-spine::before {
    bottom: 50%;
}

/* Timeline Spine */
.tl-spine {
    width: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}

.tl-spine::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: var(--gray-200);
    transform: translateX(-50%);
}

.tl-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gray-400);
    position: relative;
    z-index: 1;
    margin-top: 16px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--gray-200);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
}

/* Dot hover - bouncy scale */
.tl-item:hover .tl-dot {
    transform: scale(1.3);
}

/* Ping effect behind dots for recent/important items */
.tl-dot::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: inherit;
    opacity: 0;
    z-index: -1;
}

/* Active ping animation for today's items */
.tl-today + .tl-item:first-of-type .tl-dot::before,
.tl-date-group:first-child .tl-item:first-child .tl-dot::before {
    animation: tl-dot-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
    animation-delay: 1s;
}

/* Timeline Content - Enhanced with event-type backgrounds and animations */
.tl-content {
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 6px 0;
    margin-right: 8px;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    border-left: 3px solid var(--gray-300);
}

.tl-content:hover {
    border-color: var(--gray-300);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateX(2px);
}

.tl-clickable {
    cursor: pointer;
}

.tl-clickable:hover .tl-content {
    border-color: var(--hawx-teal);
    background: var(--gray-50);
}

/* Subtle glow on focus for accessibility */
.tl-content:focus-within {
    box-shadow: 0 0 0 3px rgba(99, 118, 117, 0.15);
}

/* Event-type specific backgrounds for quick visual scanning */
.tl-sms .tl-content {
    background: linear-gradient(to right, rgba(219, 234, 254, 0.3) 0%, #fff 100%);
    border-left-color: var(--info);
}

.tl-sms-out .tl-content {
    background: linear-gradient(to right, rgba(232, 238, 238, 0.5) 0%, #fff 100%);
    border-left-color: var(--hawx-teal);
}

.tl-note .tl-content {
    background: #fff;
    border-left-color: var(--gray-400);
}

.tl-payment-success .tl-content,
.tl-payment:not(.tl-payment-failed) .tl-content {
    background: linear-gradient(to right, rgba(234, 183, 73, 0.15) 0%, #fff 100%);
    border-left-color: var(--hawx-gold);
}

.tl-payment-failed .tl-content {
    background: linear-gradient(to right, rgba(255, 235, 238, 0.5) 0%, #fff 100%);
    border-left-color: var(--error);
    border-left-width: 4px;
}

.tl-call .tl-content {
    background: linear-gradient(to right, rgba(237, 233, 254, 0.3) 0%, #fff 100%);
    border-left-color: var(--purple);
}

.tl-subscription .tl-content {
    background: linear-gradient(to right, rgba(232, 245, 233, 0.4) 0%, #fff 100%);
    border-left-color: var(--hawx-teal);
}

.tl-subscription .tl-dot {
    background: var(--hawx-teal);
    box-shadow: 0 0 0 2px var(--hawx-teal-light);
}

.tl-scheduled .tl-content {
    background: linear-gradient(to right, rgba(227, 242, 253, 0.3) 0%, #fff 100%);
    border-left-color: var(--info);
}

.tl-appt-completed .tl-content {
    border-left-color: var(--success);
}

.tl-appt-warranty .tl-content {
    background: linear-gradient(to right, rgba(237, 233, 254, 0.3) 0%, #fff 100%);
    border-left-color: var(--purple);
}

.tl-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.tl-time {
    font-size: 10px;
    color: var(--gray-400);
    margin-left: auto;
    font-family: var(--mono);
}

.tl-author {
    font-size: 10px;
    color: var(--gray-600);
    font-weight: 500;
}

.tl-author::before {
    content: 'by ';
    color: var(--gray-400);
    font-weight: 400;
}

.tl-sep {
    color: var(--gray-300);
    font-size: 10px;
}

/* Type Badges - Larger and more scannable with hover effects */
.tl-type-badge {
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: transform 0.15s, box-shadow 0.15s;
}

.tl-type-badge:hover {
    transform: translateY(-1px);
}

.tl-type-sms,
.tl-type-sms-in {
    background: var(--info-bg);
    color: var(--info-dark);
    border: 1px solid rgba(33, 150, 243, 0.2);
}

.tl-type-sms-out {
    background: var(--hawx-teal-light);
    color: var(--hawx-teal-dark);
    border: 1px solid rgba(99, 118, 117, 0.2);
}

.tl-type-email {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.tl-type-note {
    background: var(--gray-100);
    color: var(--gray-600);
    border: 1px solid var(--gray-200);
}

.tl-type-subscription {
    background: var(--hawx-teal-light);
    color: var(--hawx-teal-dark);
    border: 1px solid rgba(99, 118, 117, 0.2);
}

.tl-type-payment {
    background: rgba(234, 183, 73, 0.15);
    color: var(--hawx-gold-dark);
    border: 1px solid rgba(234, 183, 73, 0.4);
}

.tl-type-payment-failed {
    background: var(--error-bg);
    color: var(--error-dark);
    border: 1px solid rgba(233, 102, 102, 0.3);
    font-weight: 700;
    animation: tl-attention-pulse 2s ease-in-out infinite;
}

.tl-type-scheduled {
    background: var(--info-bg);
    color: var(--info-dark);
    border: 1px solid rgba(33, 150, 243, 0.2);
}

.tl-type-flag {
    background: var(--warning-bg);
    color: var(--warning-dark);
    border: 1px solid rgba(255, 152, 0, 0.3);
    animation: tl-attention-pulse 2.5s ease-in-out infinite;
}

.tl-type-call-in {
    background: var(--purple-bg);
    color: var(--purple);
    border: 1px solid rgba(124, 58, 237, 0.2);
}

/* Tags with hover animation */
.tl-tag {
    padding: 2px 6px;
    background: var(--gray-100);
    border-radius: 8px;
    font-size: 9px;
    color: var(--gray-500);
    transition: background 0.15s, transform 0.15s;
}

.tl-tag:hover {
    background: var(--gray-200);
    transform: scale(1.05);
}

.tl-tag-ai {
    background: var(--purple-bg);
    color: var(--purple);
}

/* Item Footer - Enhanced subscription links */
.tl-item-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--gray-100);
    font-size: 11px;
    color: var(--gray-500);
}

/* Quick Actions in Timeline Footer */
.tl-quick-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.tl-quick-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--gray-200);
    background: white;
    color: var(--gray-600);
}

.tl-quick-btn:hover {
    background: var(--gray-50);
    border-color: var(--gray-300);
}

.tl-edit-btn:hover {
    background: var(--hawx-teal-light);
    border-color: var(--hawx-teal);
    color: var(--hawx-teal);
}

.tl-resched-btn:hover {
    background: var(--info-bg);
    border-color: var(--info);
    color: var(--info);
}

/* Appointment Status Badge in Timeline Header */
.tl-appt-status {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.tl-appt-status.status-completed {
    background: var(--success-bg);
    color: var(--success);
}

.tl-appt-status.status-cancelled {
    background: var(--error-bg);
    color: var(--error);
}

.tl-appt-status.status-scheduled {
    background: var(--info-bg);
    color: var(--info);
}

.tl-appt-status.status-rescheduled {
    background: var(--warning-bg);
    color: var(--warning);
}

.tl-appt-status.status-default {
    background: var(--gray-100);
    color: var(--gray-600);
}

/* ============================================
   Enhanced Timeline Header Colors
   ============================================ */

/* Colored header strips for quick visual scanning */
.tl-content.tl-header-pending {
    border-top: 3px solid var(--info);
    background: linear-gradient(180deg, rgba(33, 150, 243, 0.08) 0%, #fff 40px);
}

.tl-content.tl-header-completed {
    border-top: 3px solid var(--success);
    background: linear-gradient(180deg, rgba(87, 201, 90, 0.08) 0%, #fff 40px);
}

.tl-content.tl-header-cancelled {
    border-top: 3px solid var(--error);
    background: linear-gradient(180deg, rgba(233, 102, 102, 0.08) 0%, #fff 40px);
}

.tl-content.tl-header-rescheduled {
    border-top: 3px solid var(--warning);
    background: linear-gradient(180deg, rgba(255, 152, 0, 0.08) 0%, #fff 40px);
}

.tl-content.tl-header-appointment {
    border-top: 3px solid var(--info);
}

.tl-content.tl-header-subscription {
    border-top: 3px solid var(--hawx-teal);
    background: linear-gradient(180deg, rgba(99, 118, 117, 0.06) 0%, #fff 40px);
}

.tl-content.tl-header-payment {
    border-top: 3px solid var(--hawx-gold);
    background: linear-gradient(180deg, rgba(234, 183, 73, 0.1) 0%, #fff 40px);
}

.tl-content.tl-header-note {
    border-top: 3px solid var(--gray-400);
}

.tl-content.tl-header-alert {
    border-top: 3px solid var(--error);
    background: linear-gradient(180deg, rgba(233, 102, 102, 0.06) 0%, #fff 40px);
}

.tl-content.tl-header-default {
    border-top: 3px solid var(--gray-300);
}

/* Flag header colors */
.tl-content.tl-header-flag {
    border-top: 3px solid var(--warning);
    background: linear-gradient(180deg, rgba(255, 152, 0, 0.08) 0%, #fff 40px);
}

.tl-content.tl-header-flag-removed {
    border-top: 3px solid var(--success);
    background: linear-gradient(180deg, rgba(87, 201, 90, 0.06) 0%, #fff 40px);
}

/* Call header colors */
.tl-content.tl-header-call-in {
    border-top: 3px solid var(--hawx-teal);
    background: linear-gradient(180deg, rgba(35, 179, 172, 0.06) 0%, #fff 40px);
}

.tl-content.tl-header-call-out {
    border-top: 3px solid var(--hawx-gold);
    background: linear-gradient(180deg, rgba(245, 198, 98, 0.08) 0%, #fff 40px);
}

/* SMS header colors */
.tl-content.tl-header-sms {
    border-top: 3px solid var(--info);
    background: linear-gradient(180deg, rgba(33, 150, 243, 0.06) 0%, #fff 40px);
}

/* Email header colors */
.tl-content.tl-header-email {
    border-top: 3px solid #f59e0b;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.06) 0%, #fff 40px);
}

/* AI header colors */
.tl-content.tl-header-ai {
    border-top: 3px solid #8b5cf6;
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.06) 0%, #fff 40px);
}

/* AI type badge */
.tl-type-ai {
    background: #f3e8ff;
    color: #7c3aed;
}

/* Call type badges */
.tl-type-call-in {
    background: var(--hawx-teal-light);
    color: var(--hawx-teal);
}

.tl-type-call-out {
    background: var(--hawx-gold-light);
    color: #92400e;
}

/* ============================================
   Call Timeline Item Styles
   ============================================ */

.tl-call {
    /* Base call item styling */
}

.tl-call .tl-dot {
    background: var(--hawx-teal);
}

.tl-call.tl-call-outbound .tl-dot {
    background: var(--hawx-gold);
}

/* Call info section */
.tl-call-info {
    margin-top: 8px;
}

.tl-call-disposition {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 8px;
}

.tl-call-disp-success {
    background: var(--success-bg);
    color: var(--success);
}

.tl-call-disp-voicemail {
    background: var(--info-bg);
    color: var(--info);
}

.tl-call-disp-missed {
    background: var(--warning-bg);
    color: #92400e;
}

.tl-call-disp-callback {
    background: #f3e8ff;
    color: #7c3aed;
}

.tl-call-disp-default {
    background: var(--gray-100);
    color: var(--gray-600);
}

/* Call metrics */
.tl-call-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--gray-700);
    padding: 6px 0;
}

.tl-call-metric {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tl-call-metric-label {
    font-weight: 600;
    color: var(--gray-500);
    font-size: 10px;
    text-transform: uppercase;
}

/* Call details row */
.tl-call-details-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--gray-100);
    font-size: 11px;
    color: var(--gray-600);
}

.tl-call-detail {
    background: var(--gray-50);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Call AI Summary */
.tl-call-summary {
    margin-top: 10px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 6px;
    border: 1px solid #bae6fd;
}

.tl-call-summary-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.tl-call-summary-icon {
    font-size: 12px;
}

.tl-call-summary-label {
    font-size: 10px;
    font-weight: 600;
    color: #0369a1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tl-call-summary-text {
    font-size: 12px;
    line-height: 1.5;
    color: var(--gray-700);
}

/* ============================================
   AI Timeline Item Styles
   ============================================ */

.tl-ai .tl-dot {
    background: #8b5cf6;
}

/* AI info section */
.tl-ai-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.tl-ai-source {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.tl-ai-source-auto {
    background: #f3e8ff;
    color: #7c3aed;
}

.tl-ai-source-sms {
    background: var(--info-bg);
    color: var(--info);
}

.tl-ai-source-chat {
    background: #e0f2fe;
    color: #0369a1;
}

/* AI Tools */
.tl-ai-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tl-ai-tool {
    font-size: 9px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--gray-100);
    color: var(--gray-600);
    font-family: 'Monaco', 'Consolas', monospace;
}

.tl-ai-tool-more {
    font-size: 9px;
    color: var(--gray-400);
    padding: 2px 6px;
}

/* AI Conversation */
.tl-ai-conversation {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tl-ai-message {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
}

.tl-ai-user-msg {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
}

.tl-ai-assistant-msg {
    background: linear-gradient(135deg, #f3e8ff 0%, #ede9fe 100%);
    border: 1px solid #ddd6fe;
}

.tl-ai-msg-label {
    font-weight: 600;
    font-size: 11px;
    display: block;
    margin-bottom: 4px;
    color: var(--gray-500);
}

.tl-ai-user-msg .tl-ai-msg-label {
    color: var(--gray-600);
}

.tl-ai-assistant-msg .tl-ai-msg-label {
    color: #7c3aed;
}

.tl-ai-msg-text {
    color: var(--gray-700);
    word-break: break-word;
}

/* AI Tool Calls - Detailed View */
.tl-ai-tool-calls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 8px 0;
}

.tl-ai-tool-call {
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border: 1px solid #fde047;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 12px;
}

.tl-ai-tool-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(253, 224, 71, 0.5);
}

.tl-ai-tool-icon {
    font-size: 14px;
}

.tl-ai-tool-name {
    font-weight: 700;
    font-size: 12px;
    color: #854d0e;
    letter-spacing: -0.2px;
}

.tl-ai-args {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-family: 'Monaco', 'Consolas', 'SF Mono', monospace;
    font-size: 11px;
}

.tl-ai-arg {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    line-height: 1.4;
}

.tl-ai-arg-key {
    font-weight: 600;
    color: #92400e;
    white-space: nowrap;
}

.tl-ai-arg-val {
    color: #1e3a5f;
    word-break: break-word;
}

.tl-ai-result {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.tl-ai-result-success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.tl-ai-result-error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fca5a5;
}

/* AI Tool Calls - Dark Mode */
[data-theme="dark"] .tl-ai-tool-call {
    background: linear-gradient(135deg, rgba(161, 98, 7, 0.25) 0%, rgba(120, 80, 20, 0.15) 100%);
    border-color: rgba(250, 204, 21, 0.35);
}

[data-theme="dark"] .tl-ai-tool-header {
    border-bottom-color: rgba(250, 204, 21, 0.25);
}

[data-theme="dark"] .tl-ai-tool-name {
    color: #fde047;
}

[data-theme="dark"] .tl-ai-args {
    color: var(--text-secondary);
}

[data-theme="dark"] .tl-ai-arg {
    background: rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .tl-ai-arg-key {
    color: #fcd34d;
}

[data-theme="dark"] .tl-ai-arg-val {
    color: #e0f2fe;
}

[data-theme="dark"] .tl-ai-result-success {
    background: rgba(22, 163, 74, 0.2);
    color: #86efac;
    border-color: rgba(134, 239, 172, 0.3);
}

[data-theme="dark"] .tl-ai-result-error {
    background: rgba(220, 38, 38, 0.2);
    color: #fca5a5;
    border-color: rgba(252, 165, 165, 0.3);
}

[data-theme="dark"] .tl-ai-user-msg {
    background: var(--gray-200);
    border-color: var(--border-color);
}

[data-theme="dark"] .tl-ai-assistant-msg {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(109, 40, 217, 0.1) 100%);
    border-color: rgba(167, 139, 250, 0.3);
}

[data-theme="dark"] .tl-ai-msg-text {
    color: var(--text-primary);
}

/* ============================================
   SMS Timeline Styles (Twilio Direct)
   ============================================ */

/* SMS Info row */
.tl-sms-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.tl-sms-direction {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.tl-sms-inbound {
    background: #dbeafe;
    color: #1d4ed8;
}

.tl-sms-outbound {
    background: #f3e8ff;
    color: #7c3aed;
}

.tl-sms-status {
    font-size: 10px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--gray-100);
    color: var(--gray-600);
    text-transform: capitalize;
}

/* Phone info row */
.tl-sms-phones {
    font-size: 11px;
    color: var(--gray-500);
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tl-sms-phone-label {
    font-weight: 600;
    color: var(--gray-600);
}

/* Message body */
.tl-sms-message {
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.tl-sms-message.tl-sms-inbound {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #93c5fd;
    border-radius: 12px 12px 12px 2px;
}

.tl-sms-message.tl-sms-outbound {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border: 1px solid #c4b5fd;
    border-radius: 12px 12px 2px 12px;
}

.tl-sms-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.tl-sms-body {
    flex: 1;
    color: var(--gray-800);
}

/* MMS Media Gallery */
.tl-sms-media-gallery {
    margin-top: 12px;
    padding: 10px;
    background: var(--gray-50);
    border-radius: 10px;
    border: 1px dashed var(--gray-300);
}

.tl-sms-media-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-600);
    margin-bottom: 8px;
}

.tl-sms-media-images {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tl-sms-media-link {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tl-sms-media-link:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.tl-sms-media-img {
    max-width: 180px;
    max-height: 180px;
    width: auto;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
    background: var(--gray-200);
}

/* Error display */
.tl-sms-error {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fca5a5;
}

/* SMS Dark Mode */
[data-theme="dark"] .tl-sms-inbound {
    background: rgba(59, 130, 246, 0.25);
    color: #93c5fd;
}

[data-theme="dark"] .tl-sms-outbound {
    background: rgba(139, 92, 246, 0.25);
    color: #c4b5fd;
}

[data-theme="dark"] .tl-sms-direction.tl-sms-inbound {
    background: rgba(59, 130, 246, 0.25);
    color: #93c5fd;
}

[data-theme="dark"] .tl-sms-direction.tl-sms-outbound {
    background: rgba(139, 92, 246, 0.25);
    color: #c4b5fd;
}

[data-theme="dark"] .tl-sms-status {
    background: var(--gray-200);
    color: var(--text-secondary);
}

[data-theme="dark"] .tl-sms-phones {
    color: var(--text-muted);
}

[data-theme="dark"] .tl-sms-phone-label {
    color: var(--text-secondary);
}

[data-theme="dark"] .tl-sms-message.tl-sms-inbound {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.1) 100%);
    border-color: rgba(147, 197, 253, 0.35);
}

[data-theme="dark"] .tl-sms-message.tl-sms-outbound {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(124, 58, 237, 0.1) 100%);
    border-color: rgba(196, 181, 253, 0.35);
}

[data-theme="dark"] .tl-sms-body {
    color: var(--text-primary);
}

[data-theme="dark"] .tl-sms-media-gallery {
    background: var(--gray-200);
    border-color: var(--gray-300);
}

[data-theme="dark"] .tl-sms-media-label {
    color: var(--text-secondary);
}

[data-theme="dark"] .tl-sms-media-img {
    background: var(--gray-300);
}

[data-theme="dark"] .tl-sms-error {
    background: rgba(220, 38, 38, 0.2);
    color: #fca5a5;
    border-color: rgba(252, 165, 165, 0.3);
}

/* ============================================
   Note Category & Type Tags
   ============================================ */

.tl-note-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.tl-note-category {
    font-size: 9px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: var(--gray-100);
    color: var(--gray-600);
    border: 1px solid var(--gray-200);
}

.tl-note-category.tl-note-cat-alert {
    background: var(--error-bg);
    color: var(--error);
    border-color: rgba(233, 102, 102, 0.3);
}

.tl-note-category.tl-note-cat-billing {
    background: var(--success-bg);
    color: var(--success);
    border-color: rgba(87, 201, 90, 0.3);
}

.tl-note-category.tl-note-cat-service {
    background: var(--info-bg);
    color: var(--info);
    border-color: rgba(33, 150, 243, 0.3);
}

.tl-note-category.tl-note-cat-sales {
    background: var(--purple-bg);
    color: var(--purple);
    border-color: rgba(124, 58, 237, 0.3);
}

.tl-note-type {
    font-size: 9px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 12px;
    background: var(--gray-50);
    color: var(--gray-500);
    border: 1px solid var(--gray-200);
}

/* ============================================
   Enhanced Author Badge
   ============================================ */

.tl-author-badge {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tl-author-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--hawx-teal);
    color: white;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: -0.5px;
}

.tl-author-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-700);
}

/* ============================================
   Timeline Title & Description Classes
   ============================================ */

.tl-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--gray-800);
    margin-bottom: 4px;
    line-height: 1.3;
}

.tl-description {
    font-size: 12px;
    color: var(--gray-600);
    line-height: 1.5;
}

/* ============================================
   Note Visibility Indicators
   ============================================ */

.tl-note-visibility {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}

.tl-vis-icon {
    font-size: 11px;
    opacity: 0.7;
    cursor: help;
}

.tl-vis-icon:hover {
    opacity: 1;
}

.tl-vis-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tl-vis-tech {
    background: var(--hawx-orange, #F97316);
    color: white;
}

.tl-vis-customer {
    background: var(--hawx-teal, #14B8A6);
    color: white;
}

.tl-sub-link {
    color: var(--hawx-teal);
    font-weight: 600;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s;
}

.tl-sub-link:hover {
    text-decoration: none;
    background: var(--hawx-teal-light);
}

/* SMS Styling - Enhanced chat bubbles with animations */
.tl-sms .tl-dot { background: var(--info); box-shadow: 0 0 0 2px var(--info-bg); }
.tl-sms-out .tl-dot { background: var(--hawx-teal); box-shadow: 0 0 0 2px var(--hawx-teal-light); }

.tl-sms-bubble {
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 12px;
    line-height: 1.5;
    max-width: 85%;
    position: relative;
    animation: tl-scale-in 0.3s ease-out backwards;
    animation-delay: 0.1s;
    transition: transform 0.2s, box-shadow 0.2s;
}

.tl-sms-bubble:hover {
    transform: scale(1.01);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.tl-bubble-in {
    background: var(--info-bg);
    color: var(--gray-700);
    border-bottom-left-radius: 4px;
    border: 1px solid rgba(33, 150, 243, 0.15);
}

.tl-bubble-out {
    background: var(--hawx-teal-light);
    color: var(--gray-700);
    border-bottom-right-radius: 4px;
    margin-left: auto;
    border: 1px solid rgba(99, 118, 117, 0.15);
}

/* Note Styling - Enhanced for action items */
.tl-note .tl-dot { background: var(--gray-500); box-shadow: 0 0 0 2px var(--gray-200); }

.tl-note-content {
    font-size: 12px;
    line-height: 1.6;
    color: var(--gray-700);
    padding: 10px 12px;
    background: var(--gray-50);
    border-radius: 6px;
    border-left: 3px solid var(--gray-300);
}

/* Notes with action items get special treatment */
.tl-note-content:has(.tl-highlight-action) {
    border-left-color: var(--info);
    background: linear-gradient(to right, rgba(227, 242, 253, 0.3) 0%, var(--gray-50) 100%);
}

/* Highlighting in notes - More prominent with hover effects */
.tl-highlight-pest {
    background: var(--warning-bg);
    color: var(--warning-dark);
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
    border: 1px solid rgba(255, 152, 0, 0.3);
    transition: transform 0.15s, box-shadow 0.15s;
    display: inline-block;
}

.tl-highlight-pest:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(255, 152, 0, 0.2);
}

.tl-highlight-action {
    background: var(--info-bg);
    color: var(--info-dark);
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
    border: 1px solid rgba(33, 150, 243, 0.3);
    transition: transform 0.15s, box-shadow 0.15s;
    display: inline-block;
}

.tl-highlight-action:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(33, 150, 243, 0.2);
}

/* Additional highlight types for common action items */
.tl-highlight-urgent {
    background: var(--error-bg);
    color: var(--error-dark);
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
    border: 1px solid rgba(233, 102, 102, 0.3);
    transition: transform 0.15s, box-shadow 0.15s;
    display: inline-block;
    animation: tl-attention-pulse 2s ease-in-out infinite;
}

.tl-highlight-urgent:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(233, 102, 102, 0.2);
    animation-play-state: paused;
}

.tl-highlight-positive {
    background: var(--success-bg);
    color: var(--success-dark);
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
    transition: transform 0.15s, box-shadow 0.15s;
    display: inline-block;
}

.tl-highlight-positive:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(87, 201, 90, 0.2);
}

/* Copy Button - Enhanced animation */
.tl-copy-btn {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.2s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s;
}

.tl-content:hover .tl-copy-btn {
    opacity: 1;
    transform: scale(1);
}

.tl-copy-btn:hover {
    background: var(--gray-200) !important;
    transform: scale(1.1) !important;
}

.tl-copy-btn:active {
    transform: scale(0.95) !important;
}

/* Appointment Styling - Enhanced visibility with animations */
.tl-appt .tl-dot { background: var(--success); box-shadow: 0 0 0 2px var(--success-bg); }

.tl-appt-main {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    margin: -10px -12px;
    padding: 10px 12px;
    border-radius: 6px;
    transition: background 0.2s, transform 0.2s;
}

.tl-appt-main:hover {
    background: var(--gray-50);
}

.tl-appt-main:active {
    transform: scale(0.99);
}

.tl-appt-date-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--success-bg);
    border-radius: 8px;
    flex-shrink: 0;
    border: 2px solid rgba(87, 201, 90, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.tl-appt-main:hover .tl-appt-date-block {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(87, 201, 90, 0.2);
}

.tl-appt-warranty-block {
    background: var(--purple-bg);
    border-color: rgba(124, 58, 237, 0.3);
}

.tl-appt-main:hover .tl-appt-warranty-block {
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
}

.tl-appt-month {
    font-size: 9px;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tl-appt-day {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-800);
    line-height: 1;
}

.tl-appt-info {
    flex: 1;
    min-width: 0;
}

.tl-appt-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-800);
}

.tl-warranty-badge {
    padding: 3px 8px;
    background: var(--purple-bg);
    color: var(--purple);
    font-size: 9px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: 1px solid rgba(124, 58, 237, 0.2);
}

.tl-appt-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--gray-500);
    margin-top: 3px;
}

.tl-appt-status {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
}

.tl-appt-toggle {
    padding: 4px 8px;
    border: none;
    background: var(--gray-100);
    border-radius: 4px;
    font-size: 10px;
    color: var(--gray-500);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s;
}

.tl-appt-toggle:hover {
    background: var(--gray-200);
}

.tl-appt-completed[data-expanded="true"] .tl-appt-toggle {
    transform: rotate(180deg);
}

/* Appointment Details - Animated expand/collapse */
.tl-appt-details {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    padding: 0 12px;
    background: var(--gray-50);
    border-radius: 6px;
    margin-top: 0;
    transition: grid-template-rows 0.3s ease-out, opacity 0.25s ease-out, padding 0.3s, margin-top 0.3s;
    overflow: hidden;
}

.tl-appt-details > * {
    overflow: hidden;
}

.tl-appt-completed[data-expanded="true"] .tl-appt-details {
    grid-template-rows: 1fr;
    opacity: 1;
    padding: 12px;
    margin-top: 10px;
}

/* Stagger children animation when expanded */
.tl-appt-completed[data-expanded="true"] .tl-appt-detail-grid {
    animation: tl-fade-in 0.3s ease-out 0.1s backwards;
}

.tl-appt-completed[data-expanded="true"] .tl-appt-notes-section {
    animation: tl-fade-in 0.3s ease-out 0.15s backwards;
}

.tl-appt-completed[data-expanded="true"] .tl-appt-pests {
    animation: tl-fade-in 0.3s ease-out 0.2s backwards;
}

.tl-appt-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.tl-detail-item label {
    display: block;
    font-size: 9px;
    color: var(--gray-400);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.tl-detail-item span {
    font-size: 11px;
    color: var(--gray-700);
    font-weight: 500;
}

.tl-appt-notes-section {
    margin-bottom: 12px;
}

.tl-notes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.tl-notes-header label {
    font-size: 9px;
    color: var(--gray-400);
    text-transform: uppercase;
    font-weight: 600;
}

.tl-appt-notes {
    font-size: 12px;
    color: var(--gray-700);
    line-height: 1.6;
    padding: 10px 12px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid var(--gray-200);
}

.tl-appt-pests {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tl-appt-pests label {
    font-size: 9px;
    color: var(--gray-400);
    text-transform: uppercase;
}

.tl-pest-tag {
    padding: 2px 8px;
    background: var(--warning-bg);
    color: var(--warning-dark);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
}

/* Payment Styling - Enhanced for quick scanning with animations */
.tl-payment .tl-dot { background: var(--hawx-gold); box-shadow: 0 0 0 2px var(--warning-bg); }
.tl-payment-failed .tl-dot { 
    background: var(--error); 
    box-shadow: 0 0 0 3px var(--error-bg);
    animation: tl-dot-pulse 2s ease-in-out infinite;
    --pulse-color: var(--error-bg);
}

.tl-payment-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 0;
}

.tl-payment-amount {
    font-size: 18px;
    font-weight: 700;
    font-family: var(--mono);
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--success-bg);
    transition: transform 0.2s, box-shadow 0.2s;
}

.tl-payment-amount:hover {
    transform: scale(1.05);
}

.tl-payment-amount.success { 
    color: var(--success-dark); 
    background: var(--success-bg);
}

.tl-payment-amount.success:hover {
    box-shadow: 0 2px 8px rgba(87, 201, 90, 0.3);
}

.tl-payment-amount.failed { 
    color: var(--error-dark); 
    text-decoration: line-through; 
    background: var(--error-bg);
}

.tl-payment-amount.failed:hover {
    box-shadow: 0 2px 8px rgba(233, 102, 102, 0.3);
}

.tl-payment-method {
    font-size: 11px;
    color: var(--gray-600);
    font-weight: 500;
}

.tl-payment-ref {
    font-size: 10px;
    color: var(--gray-400);
    font-family: var(--mono);
    transition: color 0.15s;
}

.tl-payment-ref:hover {
    color: var(--gray-600);
}

.tl-payment-reason {
    padding: 4px 10px;
    background: var(--error-bg);
    color: var(--error);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    border: 1px solid var(--error);
    animation: tl-attention-pulse 2s ease-in-out infinite;
}

/* Scheduled Appointment - Make future dates prominent with animation */

#open-scheduler {
    display: none;
}

.tl-scheduled .tl-dot { background: var(--info); box-shadow: 0 0 0 2px var(--info-bg); }

.tl-scheduled-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 6px 0;
}

.tl-scheduled-service {
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-700);
}

.tl-scheduled-arrow {
    color: var(--gray-400);
    font-size: 14px;
    transition: transform 0.3s;
}

.tl-scheduled-row:hover .tl-scheduled-arrow {
    transform: translateX(3px);
}

.tl-scheduled-date {
    font-size: 13px;
    font-weight: 700;
    color: var(--info-dark);
    padding: 4px 12px;
    background: var(--info-bg);
    border-radius: 6px;
    border: 1px solid rgba(33, 150, 243, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}

.tl-scheduled-date:hover {
    transform: scale(1.03);
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);
}

.tl-scheduled-time {
    font-size: 11px;
    color: var(--gray-500);
    font-family: var(--mono);
}

/* Call Styling - Enhanced for quick info scanning */
.tl-call .tl-dot { background: var(--purple); box-shadow: 0 0 0 2px var(--purple-bg); }

.tl-call-duration {
    font-size: 11px;
    font-family: var(--mono);
    color: var(--gray-600);
    padding: 3px 8px;
    background: var(--gray-100);
    border-radius: 4px;
    font-weight: 500;
}

.tl-call-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.tl-call-agent {
    font-size: 11px;
    color: var(--gray-600);
    font-weight: 500;
}

.tl-call-reason {
    padding: 3px 10px;
    background: var(--purple-bg);
    color: var(--purple);
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    border: 1px solid rgba(124, 58, 237, 0.2);
}

.tl-call-summary {
    font-size: 12px;
    color: var(--gray-700);
    line-height: 1.6;
    padding: 10px 12px;
    background: var(--gray-50);
    border-radius: 6px;
    border-left: 3px solid var(--purple);
}

/* Flag Styling */
.tl-flag .tl-dot { background: var(--warning); box-shadow: 0 0 0 2px var(--warning-bg); }

.tl-flag-content {
    margin-top: 4px;
}

.tl-flag-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

/* Load More - Animated */
.tl-load-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 20px;
    margin-left: 24px;
    margin-top: 8px;
    border-top: 1px dashed var(--gray-200);
    animation: tl-fade-in 0.4s ease-out 0.3s backwards;
}

.tl-load-more .btn-ghost {
    padding: 8px 20px;
    font-size: 12px;
    transition: transform 0.2s, box-shadow 0.2s, background 0.15s;
}

.tl-load-more .btn-ghost:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tl-load-more .btn-ghost:active {
    transform: translateY(0);
}

.tl-load-hint {
    font-size: 10px;
    color: var(--gray-400);
}

/* Empty State - Animated */
.tl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--gray-400);
    margin-left: 24px;
    animation: tl-fade-in 0.5s ease-out;
}

.tl-empty-icon {
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.5;
    animation: tl-scale-in 0.4s ease-out 0.1s backwards;
}

.tl-empty-text {
    font-size: 13px;
    color: var(--gray-500);
    margin-bottom: 4px;
}

.tl-empty-hint {
    font-size: 11px;
    color: var(--gray-400);
}

/* ─────────────────────────────────────────────────────────────────────────────
   OFFERS TAB
   ───────────────────────────────────────────────────────────────────────────── */
.offers-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.offer-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
}

.offer-unavailable {
    opacity: 0.6;
}

.offer-info {
    flex: 1;
}

.offer-name {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--gray-700);
}

.offer-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 500;
    margin-top: 2px;
}

.badge-available {
    background: var(--success-bg);
    color: var(--success);
}

.badge-unavailable {
    background: var(--gray-100);
    color: var(--gray-500);
}

.offer-price {
    font-size: 13px;
    font-weight: 600;
    color: var(--hawx-teal);
}

.offer-unavailable .offer-price {
    color: var(--gray-400);
}

.offers-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 9px;
    color: var(--gray-400);
    text-transform: uppercase;
    margin: 8px 0;
}

.offers-divider::before,
.offers-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gray-200);
}

/* Subscription Offer Detail Modal */
.offer-detail-price {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-600);
    margin-bottom: 12px;
    padding: 8px 12px;
    background: var(--primary-50);
    border-radius: 6px;
}

.offer-detail-description {
    font-size: 13px;
    line-height: 1.6;
    color: var(--gray-700);
    margin-bottom: 16px;
}

.offer-detail-description ul {
    margin: 0;
    padding-left: 20px;
}

.offer-detail-description li {
    margin-bottom: 6px;
}

.offer-detail-note {
    font-size: 12px;
    color: var(--gray-500);
    padding: 10px 12px;
    background: var(--gray-50);
    border-radius: 6px;
    border-left: 3px solid var(--warning-400);
}

.offer-detail-note p {
    margin: 0;
}

[data-theme="dark"] .offer-detail-price {
    background: var(--primary-900);
    color: var(--primary-300);
}

[data-theme="dark"] .offer-detail-description {
    color: var(--gray-300);
}

[data-theme="dark"] .offer-detail-description ul {
    color: var(--gray-300);
}

[data-theme="dark"] .offer-detail-description li {
    color: var(--gray-600);
}

[data-theme="dark"] .offer-detail-note {
    background: var(--gray-800);
    color: var(--gray-400);
    border-left-color: var(--warning-500);
}

[data-theme="dark"] .offer-detail-note p {
    color: var(--gray-400);
}

[data-theme="dark"] .offer-detail-note strong {
    color: var(--gray-300);
}

/* ─────────────────────────────────────────────────────────────────────────────
   TEMPLATES TAB
   ───────────────────────────────────────────────────────────────────────────── */
.templates-bar {
    padding: 8px 10px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0;
}

.template-category {
    margin-bottom: 16px;
}

.category-head {
    margin: 0 0 8px 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-600);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--gray-200);
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 6px;
}

.template-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.template-item:hover {
    border-color: var(--hawx-teal);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.tpl-icon {
    font-size: 18px;
}

.tpl-name {
    font-size: 10px;
    font-weight: 500;
    color: var(--gray-600);
    text-align: center;
    line-height: 1.2;
}

/* ─────────────────────────────────────────────────────────────────────────────
RETENTION TAB
───────────────────────────────────────────────────────────────────────────── */
.retention-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0;
}

.retention-bar select {
    padding: 4px 8px;
    border: 1px solid var(--gray-200);
    border-radius: 5px;
    font-size: 11px;
    min-width: 160px;
}

.retention-metrics {
    display: flex;
    gap: 16px;
    margin-left: auto;
    font-size: 10px;
    color: var(--gray-500);
}

.retention-metrics strong {
    color: var(--gray-700);
}

.retention-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ret-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
}

.ret-offer {
    font-size: 11px;
    color: var(--gray-700);
}

.ret-options {
    display: flex;
    gap: 12px;
}

.ret-options label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--gray-600);
    cursor: pointer;
}

.ret-options input {
    accent-color: var(--hawx-teal);
}

.retention-submit {
    padding: 10px;
    text-align: right;
}

.retention-submit .btn-primary:disabled {
    background: var(--gray-300);
    cursor: not-allowed;
}

.cancel-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 10px;
    background: var(--gray-50);
    border-radius: 6px;
    margin-bottom: 10px;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-row label {
    font-size: 10px;
    font-weight: 500;
    color: var(--gray-500);
}

.form-row select {
    padding: 6px 8px;
    border: 1px solid var(--gray-200);
    border-radius: 5px;
    font-size: 11px;
}

.form-row select:disabled {
    background: var(--gray-100);
    color: var(--gray-400);
    cursor: not-allowed;
}

/* Retention Metrics Styling */
.retention-metrics #retention-risk {
    font-weight: 600;
}

.retention-metrics #retention-risk.risk-high {
    color: var(--red-500, #ef4444);
}

.retention-metrics #retention-risk.risk-medium {
    color: var(--amber-500, #f59e0b);
}

.retention-metrics #retention-risk.risk-low {
    color: var(--green-500, #22c55e);
}

/* Loading state for retention */
.retention-list .loading-spinner {
    text-align: center;
    padding: 20px;
    color: var(--gray-500);
    font-style: italic;
}

/* Success state for offers */
.retention-list .empty-state.success {
    color: var(--green-600, #16a34a);
    font-weight: 500;
}

.retention-list .empty-state.error {
    color: var(--red-500, #ef4444);
}

/* Retention sub-tabs styling */
.retention-sub-tabs {
    border-bottom: 1px solid var(--gray-200);
}

/* Disabled offer row */
.ret-row.disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
SUBSCRIPTIONS OVERLAY
────────────────────────────────────────────────────────────────────────────── */
.subs-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    z-index: 900;
}

.subs-overlay:not(.hidden) {
    display: flex;
}

body.no-scroll {
    overflow: hidden;
}

.subs-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
}

.subs-overlay-content {
    position: relative;
    width: min(1100px, 96vw);
    max-height: 90vh;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.subs-overlay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--gray-200);
    background: linear-gradient(135deg, var(--gray-50), #fff);
}

.subs-overlay-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-800);
}

.subs-overlay-subtitle {
    font-size: 11px;
    color: var(--gray-500);
}

.subs-overlay-body {
    overflow-y: auto;
    padding: 10px 12px 14px 12px;
}

.subs-overlay .subs-overview {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: -2px -2px 10px -2px;
}

@media (max-width: 768px) {
    .subs-overlay-content {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .subs-overlay-body {
        padding: 10px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
UTILITIES
───────────────────────────────────────────────────────────────────────────── */
.hidden {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE RESPONSIVE TWEAKS (Customer Tab)
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    body {
        font-size: 11px;
    }

    .tab-nav {
        padding: 0 6px;
        gap: 2px;
    }

    .tab-btn {
        font-size: 10px;
        padding: 7px 8px;
    }

    .customer-top-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .ci-main h2 {
        font-size: 13px;
    }

    .alert-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .customer-two-col {
        flex-direction: column;
    }

    .cust-col-right {
        width: 100%;
    }

    .section-card,
    .contact-card,
    .auth-contacts-card,
    .customer-notes-card,
    .sub-card,
    .sub-key-info,
    .sub-billing-row,
    .sub-notes-section,
    .sub-section-card {
        padding: 10px;
    }

    .sub-two-col {
        grid-template-columns: 1fr;
    }

    .sched-subs-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }

    .sub-three-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .sub-two-grid {
        grid-template-columns: 1fr;
    }

    .pay-summary {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px 16px;
    }

    .pay-balance-block {
        text-align: center;
    }

    .pay-info-block {
        justify-content: center;
    }

    .pay-actions-block {
        flex-direction: column;
        margin-left: 0;
        gap: 8px;
    }

    .pay-action-btn.pay-action-primary {
        width: 100%;
        justify-content: center;
    }

    .pay-actions-secondary {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   APPOINTMENT EDIT MODAL
   ───────────────────────────────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-overlay.hidden {
    display: none;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
}

.modal-content {
    position: relative;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.appt-edit-content {
    width: 480px;
    max-width: 100%;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gray-200);
    background: linear-gradient(135deg, var(--gray-50), #fff);
}

.modal-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-800);
}

.modal-close {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--gray-100);
    border-radius: 6px;
    font-size: 18px;
    color: var(--gray-500);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.modal-close:hover {
    background: var(--gray-200);
    color: var(--gray-700);
}

.modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
}

/* Appointment Edit Summary */
.appt-edit-summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: var(--info-bg);
    border: 1px solid var(--info);
    border-radius: 8px;
    margin-bottom: 16px;
}

.appt-edit-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-800);
}

.appt-edit-meta {
    font-size: 11px;
    color: var(--info-dark);
}

/* Sections */
.appt-edit-section {
    margin-bottom: 16px;
}

.appt-edit-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
}

/* Pest Pills */
.pest-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pest-pill {
    padding: 5px 10px;
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    background: #fff;
    font-size: 11px;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.15s;
}

.pest-pill:hover {
    border-color: var(--hawx-teal);
    color: var(--hawx-teal);
}

.pest-pill.selected {
    background: var(--hawx-teal);
    border-color: var(--hawx-teal);
    color: #fff;
}

.pest-pill.addon {
    border-style: dashed;
}

.pest-pill.addon.selected {
    background: var(--purple);
    border-color: var(--purple);
    border-style: solid;
}

/* Textarea */
.appt-edit-textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px 12px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-size: 12px;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.15s;
}

.appt-edit-textarea:focus {
    outline: none;
    border-color: var(--hawx-teal);
    box-shadow: var(--shadow-focus);
}

/* Toggle Options */
.appt-edit-toggles {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background: var(--gray-50);
    border-radius: 8px;
}

.appt-toggle-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.toggle-label-text {
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-700);
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    width: 40px;
    height: 22px;
    cursor: pointer;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--gray-300);
    border-radius: 22px;
    transition: background 0.2s;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 2px;
    bottom: 2px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--success);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(18px);
}

/* Call Ahead Options */
.call-ahead-options {
    display: flex;
    gap: 4px;
}

.call-ahead-btn {
    padding: 4px 10px;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    background: #fff;
    font-size: 10px;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.15s;
}

.call-ahead-btn:hover {
    border-color: var(--hawx-teal);
}

.call-ahead-btn.selected {
    background: var(--hawx-teal);
    border-color: var(--hawx-teal);
    color: #fff;
}

/* Edit button styling for pending cards */
.sched-btn-edit {
    padding: 4px 8px !important;
    min-width: 28px;
    font-size: 12px;
    background: var(--gray-100);
    border-color: var(--gray-200);
}

.sched-btn-edit:hover {
    background: var(--hawx-teal-light);
    border-color: var(--hawx-teal);
    color: var(--hawx-teal);
}

/* ─────────────────────────────────────────────────────────────────────────────
   UTILITY CLASSES - Consistent Data Highlighting
   ───────────────────────────────────────────────────────────────────────────── */

/* Amount highlighting - for dollar values */
.amount {
    font-family: var(--mono);
    font-weight: 600;
}

.amount-lg {
    font-size: 16px;
    font-weight: 700;
}

.amount-highlight {
    padding: 2px 6px;
    background: var(--highlight-amount);
    border: 1px solid var(--highlight-amount-border);
    border-radius: 4px;
    color: var(--highlight-amount-text);
}

.amount-due {
    color: var(--warning-dark);
}

.amount-paid {
    color: var(--success-dark);
}

/* Date highlighting */
.date-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--highlight-date);
    border: 1px solid var(--highlight-date-border);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--highlight-date-text);
}

.date-next {
    background: var(--highlight-next);
    border-color: var(--highlight-next-border);
    color: var(--highlight-next-text);
}

/* Text utilities */
.text-success {
    color: var(--success) !important;
}

.text-warning {
    color: var(--warning) !important;
}

.text-error {
    color: var(--error) !important;
}

.text-muted {
    color: var(--gray-400) !important;
}

.text-mono {
    font-family: var(--mono);
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

/* Empty state indicator */
.empty {
    color: var(--gray-300);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCHEDULING APPOINTMENT GRID
   Responsive grid display for appointment time slots
   ═══════════════════════════════════════════════════════════════════════════ */

/* Main container */
.sop-appointments-container {
    width: 100%;
    margin: 8px 0;
}

/* Top recommendations row */
.sop-top-picks {
    display: flex;
    gap: 8px;
    padding: 12px;
    background: linear-gradient(135deg, #f8fffe 0%, #f0f9f8 100%);
    border: 1px solid var(--hawx-teal-light);
    border-radius: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.sop-top-picks-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-600);
    padding-right: 8px;
    border-right: 1px solid var(--gray-200);
    white-space: nowrap;
}

.sop-top-picks-list {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}

/* Hide states for appointment grid components */
.sop-appointments-container.hide,
.sop-top-picks.hide,
.sop-empty-state.hide {
    display: none;
}

/* Scrollable grid container */
.sop-appt-grid-wrapper {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: #fff;
}

.sop-appt-grid-wrapper::-webkit-scrollbar {
    width: 6px;
}

.sop-appt-grid-wrapper::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 3px;
}

.sop-appt-grid-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

/* Grid of days */
.sop-appt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1px;
    background: var(--gray-200);
}

/* Individual day card */
.appt-day-wrapper {
    display: flex;
    flex-direction: column;
    background: #fff;
    min-height: 90px;
}

.appt-day-wrapper:hover {
    background: var(--gray-50);
}

/* Date header within day wrapper */
.appt-day-header {
    font-weight: 600;
    font-size: 11px;
    color: var(--gray-700);
    text-align: center;
    padding: 8px 6px 6px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: sticky;
    top: 0;
    z-index: 1;
}

.appt-day-header .current-appt-icon {
    width: 14px;
    height: 14px;
    stroke: var(--info);
}

/* Slots container within day */
.appt-day-slots {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    flex: 1;
}

/* Individual appointment slot option */
.appt-option {
    position: relative;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    text-align: center;
    font-size: 10px;
    font-weight: 500;
    color: var(--gray-600);
    background: #fff;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.appt-option:hover:not(.unavailable):not(.disabled) {
    background: var(--hawx-teal-light);
    border-color: var(--hawx-teal);
    color: var(--hawx-teal-dark);
}

.appt-option.selected {
    background: linear-gradient(135deg, var(--hawx-teal) 0%, #5a8a87 100%);
    border-color: var(--hawx-teal-dark);
    color: #fff;
    box-shadow: 0 2px 4px rgba(99, 118, 117, 0.3);
}

.appt-option.selected:hover {
    background: linear-gradient(135deg, var(--hawx-teal-dark) 0%, #4a7a77 100%);
}

/* Unavailable slot styling */
.appt-option.unavailable,
.appt-option.disabled {
    background: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--gray-400);
    cursor: not-allowed;
    opacity: 0.6;
}

.appt-option.unavailable::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 1px;
    background: var(--gray-400);
    transform: rotate(-10deg);
}

/* Time label within option */
.appt-option-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 10px;
    line-height: 1.2;
}

/* Medal icons for top 3 options */
.medal-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.appt-option .medal-wrapper {
    position: absolute;
    top: -8px;
    right: -4px;
}

.appt-option .medal-wrapper .medal-icon {
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

/* No preference styling - slightly different look */
.appt-option.no-preference {
    background: var(--gray-50);
    border-style: dashed;
}

.appt-option.no-preference:hover:not(.unavailable):not(.disabled) {
    background: var(--hawx-teal-light);
    border-style: solid;
}

.appt-option.no-preference.selected {
    border-style: solid;
}

/* Top pick appointment chip */
.appt-top-pick {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.15s;
}

.appt-top-pick:hover:not(.unavailable) {
    border-color: var(--hawx-teal);
    background: var(--hawx-teal-light);
}

.appt-top-pick.selected {
    background: var(--hawx-teal);
    border-color: var(--hawx-teal-dark);
    color: #fff;
}

.appt-top-pick .medal-icon {
    width: 16px;
    height: 16px;
}

.appt-top-pick-date {
    font-weight: 600;
}

.appt-top-pick-time {
    color: var(--gray-500);
    font-size: 10px;
}

.appt-top-pick.selected .appt-top-pick-time {
    color: rgba(255,255,255,0.8);
}

/* Grid info bar */
.sop-grid-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    font-size: 11px;
    color: var(--gray-500);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.sop-grid-count {
    font-weight: 500;
}

/* Empty state for no appointments */
.sop-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px;
    color: var(--gray-400);
    text-align: center;
}

.sop-empty-state svg {
    stroke: var(--gray-300);
}

/* Loading state */
.sop-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    color: var(--gray-500);
    font-size: 11px;
}

.progress-bar-container {
    width: 200px;
    height: 4px;
    background: var(--gray-200);
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--hawx-teal) 0%, var(--hawx-gold) 100%);
    width: 0%;
    transition: width 0.3s ease-out;
    animation: progress-indeterminate 1.5s infinite;
}

@keyframes progress-indeterminate {
    0% {
        width: 0%;
        margin-left: 0%;
    }
    50% {
        width: 50%;
        margin-left: 25%;
    }
    100% {
        width: 0%;
        margin-left: 100%;
    }
}

/* Calendar icon for current appointment marker */
.current-appt-icon {
    width: 12px;
    height: 12px;
    stroke: var(--info);
    flex-shrink: 0;
}

.appt-option.selected .current-appt-icon {
    stroke: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCHEDULING SLOT DETAILS MODAL (Right-click debug view)
   ═══════════════════════════════════════════════════════════════════════════ */
.slot-details-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.slot-details-modal-overlay.hide {
    display: none;
}

.slot-details-modal {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    width: 450px;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.slot-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--hawx-teal);
    color: #fff;
}

.slot-details-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.slot-details-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.15s;
}

.slot-details-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.slot-details-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.slot-responses-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    max-height: 400px;
    overflow-y: auto;
}

.slot-response {
    border-radius: 8px;
    border: 1px solid;
    margin-bottom:8px;
}

.slot-response.success {
    border-color: #86efac;
}

.slot-response.error {
    border-color: #fca5a5;
}

.slot-response .response-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.slot-response.success .response-header {
    background: #f0fdf4;
    border-color: #86efac;
}

.slot-response.error .response-header {
    background: #fef2f2;
    border-color: #fca5a5;
}

.response-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.response-badge.success {
    background: #22c55e;
    color: #fff;
}

.response-badge.error {
    background: #ef4444;
    color: #fff;
}

.response-badge.d2d {
    background: #3b82f6;
    color: #fff;
    margin-left: 8px;
}

.route-id {
    font-size: 12px;
    color: var(--gray-500);
    font-weight: 500;
}

.response-body {
    padding: 10px 12px;
    background: #fff;
    border-radius: 8px;
}

.response-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 12px;
}

.response-row:not(:last-child) {
    border-bottom: 1px dashed var(--gray-100);
}

.response-label {
    color: var(--gray-500);
}

.response-value {
    font-weight: 500;
    color: var(--gray-700);
    margin-left: 8px;
}

.response-row.error-reason .response-value {
    color: #ef4444;
}

.slot-details-footer {
    padding: 12px 20px;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: flex-end;
}

.slot-details-close-btn {
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid var(--gray-300);
    background: #fff;
    color: var(--gray-700);
}

.slot-details-close-btn:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
}


/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION SUPPORT
   Respect user preferences for reduced motion
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .tl-payment-reason,
    .tl-type-payment-failed,
    .tl-type-flag,
    .tl-highlight-urgent {
        animation: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SKELETON LOADING STYLES
   ═══════════════════════════════════════════════════════════════════════════ */
.skeleton {
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text {
    display: inline-block;
    height: 1em;
    min-width: 60px;
    vertical-align: middle;
}

.skeleton-text.wide { min-width: 120px; }
.skeleton-text.narrow { min-width: 40px; }

.section-card.loading {
    opacity: 0.7;
}

.empty-state {
    text-align: center;
    padding: 20px;
    color: #888;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL STYLES
   ═══════════════════════════════════════════════════════════════════════════ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 10000;
}

.modal-sm { width: 380px; max-width: 90vw; }
.modal-md { width: 420px; max-width: 90vw; }
.modal-lg { width: 580px; max-width: 90vw; }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    flex-shrink: 0;
}

.modal-header-danger {
    background: #fef2f2;
    border-bottom: 1px solid #fecaca;
}

.modal-header-danger h3 {
    color: #dc2626;
}

.modal-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
}

.modal-close {
    background: none;
    border: none;
    font-size: 22px;
    color: #9ca3af;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    border-radius: 4px;
}

.modal-close:hover { 
    color: #4b5563; 
    background: #e5e7eb;
}

.modal-body {
    padding: 16px 18px;
    overflow-y: auto;
    flex: 1;
    max-height: calc(85vh - 120px);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    flex-shrink: 0;
}

/* Cancel Appointment Modal Styles */
.cancel-appt-info {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
    text-align: center;
}

.cancel-appt-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
}

.cancel-appt-date {
    font-size: 12px;
    color: #64748b;
}

.cancel-appt-prompt {
    font-size: 13px;
    color: #475569;
    margin: 0 0 16px 0;
    text-align: center;
}

.form-error {
    color: #dc2626;
    font-size: 12px;
    margin-top: 8px;
    padding: 8px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
}

.required {
    color: #dc2626;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM STYLES
   ═══════════════════════════════════════════════════════════════════════════ */
.form-group {
    margin-bottom: 12px;
}

.form-group label {
    font-size: 11px;
    font-weight: 500;
    color: #4b5563;
    margin-bottom: 3px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 12px;
    background: #fff;
    color: #1f2937;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #637675;
    box-shadow: 0 0 0 2px rgba(99, 118, 117, 0.2);
}

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

.form-group-half { flex: 1; }
.form-group-third { flex: 0 0 calc(33.333% - 8px); }

.form-text {
    font-size: 10px;
    color: #6b7280;
    margin-top: 3px;
}

/* Dark theme for form-group */
[data-theme="dark"] .form-group label {
    color: #9ca3af;
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
    background: #1f2937;
    border-color: #374151;
    color: #f3f4f6;
}

[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group select:focus,
[data-theme="dark"] .form-group textarea:focus {
    border-color: #637675;
    box-shadow: 0 0 0 2px rgba(99, 118, 117, 0.3);
}

[data-theme="dark"] .form-group input::placeholder,
[data-theme="dark"] .form-group textarea::placeholder {
    color: #6b7280;
}

[data-theme="dark"] .form-text {
    color: #9ca3af;
}

/* Dark theme for ticket selection header and checkbox list */
[data-theme="dark"] .ticket-selection-header {
    background: #1f2937;
    border-color: #374151;
}

[data-theme="dark"] .select-all-label {
    color: #d1d5db;
}

[data-theme="dark"] .total-selected {
    color: #f3f4f6;
}

[data-theme="dark"] .tickets-checkbox-list {
    background: #111827;
    border-color: #374151;
}

[data-theme="dark"] .tickets-checkbox-list::-webkit-scrollbar-thumb {
    background: #4b5563;
}

[data-theme="dark"] .ticket-checkbox-item {
    border-bottom-color: #1f2937;
}

[data-theme="dark"] .ticket-checkbox-item:hover {
    background: #1f2937;
}

[data-theme="dark"] .ticket-cb-main {
    color: #f3f4f6;
}

[data-theme="dark"] .ticket-cb-detail {
    color: #9ca3af;
}

[data-theme="dark"] .ticket-cb-detail strong {
    color: #d1d5db;
}

[data-theme="dark"] .ticket-checkbox-item:has(input:checked) {
    background: rgba(3, 105, 161, 0.15);
}

[data-theme="dark"] .ticket-checkbox-item:has(input:checked) .ticket-cb-main {
    color: #38bdf8;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TICKET/PAYMENT CHECKBOX LIST - For multi-select in modals
   ═══════════════════════════════════════════════════════════════════════════ */
.ticket-selection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
}

.select-all-label {
    font-size: 12px;
    font-weight: 500;
}

.total-selected {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
}

.tickets-checkbox-list {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 0 0 6px 6px;
    background: #fff;
}

.tickets-checkbox-list::-webkit-scrollbar {
    width: 6px;
}

.tickets-checkbox-list::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.ticket-checkbox-item {
    padding: 10px 12px;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.15s;
}

.ticket-checkbox-item:last-child {
    border-bottom: none;
}

.ticket-checkbox-item:hover {
    background: #f9fafb;
}

.ticket-checkbox-item .checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    width: 100%;
}

.ticket-checkbox-item .checkbox-label input[type="checkbox"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}

.ticket-cb-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.ticket-cb-main {
    font-size: 12px;
    font-weight: 500;
    color: #1f2937;
}

.ticket-cb-detail {
    font-size: 11px;
    color: #6b7280;
}

.ticket-cb-detail strong {
    color: #1f2937;
    font-weight: 600;
}

/* Checkbox checked state styling */
.ticket-checkbox-item:has(input:checked) {
    background: #f0f9ff;
}

.ticket-checkbox-item:has(input:checked) .ticket-cb-main {
    color: #0369a1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOGGLE SWITCH STYLES
   ═══════════════════════════════════════════════════════════════════════════ */
.toggle-group {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
}

.toggle-group:last-child { border-bottom: none; }

.toggle-text-label {
    font-size: 12px;
    color: #374151;
    flex: 1;
    position: relative;
    z-index: 1;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    min-width: 40px;
    height: 22px;
    cursor: pointer;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 22px;
    background-color: #d1d5db;
    border-radius: 22px;
    transition: 0.3s;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #57c95a;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(18px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM SECTION DIVIDER
   ═══════════════════════════════════════════════════════════════════════════ */
.form-section-title {
    font-size: 10px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 16px 0 10px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #e5e7eb;
}

.form-section-title:first-child { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   FORM STATUS MESSAGE
   ═══════════════════════════════════════════════════════════════════════════ */
.form-status {
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    margin-top: 10px;
}

.form-status.success {
    background: #e8f5e9;
    color: #4caf50;
}

.form-status.error {
    background: #ffebee;
    color: #cf5a5a;
}

[data-theme="dark"] .form-status.error {
    background: rgba(233, 102, 102, 0.18);
    color: var(--error);
    border: 1px solid rgba(233, 102, 102, 0.4);
}

.form-status.info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CUSTOMER EDIT MODAL BUTTON STYLES
   ═══════════════════════════════════════════════════════════════════════════ */
#customer-edit-modal .btn-sm {
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}

#customer-edit-modal .btn-primary {
    background: #637675;
    color: #fff;
}

#customer-edit-modal .btn-primary:hover { background: #546463; }

#customer-edit-modal .btn-primary:disabled {
    background: #d1d5db;
    cursor: not-allowed;
}

#customer-edit-modal .btn-ghost {
    background: #fff;
    color: #4b5563;
    border: 1px solid #d1d5db;
}

#customer-edit-modal .btn-ghost:hover {
    background: #f3f4f6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   REMINDER INDICATORS
   ═══════════════════════════════════════════════════════════════════════════ */
.reminder-indicators {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.reminder-icon {
    font-size: 11px;
    cursor: default;
}

.reminder-off {
    color: #9ca3af;
    font-style: italic;
    font-size: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   APPOINTMENT HISTORY & DETAIL MODAL
   ═══════════════════════════════════════════════════════════════════════════ */
.clickable-appt {
    cursor: pointer;
    transition: background 0.15s ease;
}

.clickable-appt:hover {
    background-color: #f3f4f6;
}

.appt-hist-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-bottom: 1px solid #f3f4f6;
}

.ahr-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.ahr-date {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    min-width: 80px;
}

.ahr-title {
    font-size: 12px;
    font-weight: 500;
    color: #1f2937;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 8px;
}

.ahr-status {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 500;
    white-space: nowrap;
}

.status-scheduled {
    background: #eef2ff !important;
    color: #4f46e5 !important;
}

.ahr-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: #9ca3af;
}

.ahr-tech {
    font-style: italic;
}

.appt-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.adm-section h4 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 8px;
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 4px;
}

.adm-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 12px;
}

.adm-row label {
    color: #9ca3af;
}

.adm-row span {
    font-weight: 500;
    color: #1f2937;
}

.adm-notes-box {
    background: #f9fafb;
    border-radius: 6px;
    padding: 10px;
    font-size: 12px;
    color: #4b5563;
    line-height: 1.5;
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #f3f4f6;
    white-space: pre-wrap;
}

.full-width {
    grid-column: span 2;
}

.badge-info {
    background: #e0f2fe;
    color: #0369a1;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════
   OFFERS STYLING
   ═══════════════════════════════════════════════════════════════════════════ */
.offers-group {
    margin-bottom: 20px;
}

.offers-group h4 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
}

.offer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 6px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    gap: 16px;
}

.offer-item.offer-eligible {
    background: #d4f9df;
    border-color: #86efac;
}

.offer-item.offer-ineligible {
    background: #ffdfdf;
    border-color: #fecaca;
}

.offer-info {
    flex: 1;
}

.offer-name {
    font-weight: 600;
    font-size: 13px;
    color: #1f2937;
    margin-bottom: 2px;
}

.offer-price {
    font-size: 11px;
    color: #6b7280;
}

.offer-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.offer-badge {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
}

.offer-badge.eligible {
    background: #dcfce7;
    color: #166534;
}

.offer-badge.ineligible {
    background: #fee2e2;
    color: #991b1b;
}

.offer-reason {
    font-size: 10px;
    color: #6b7280;
    font-style: italic;
}

.offer-sub-tag {
    font-size: 10px;
    color: #9ca3af;
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADD-ON MODAL STYLING
   ═══════════════════════════════════════════════════════════════════════════ */
#addon-modal .addon-sub-info {
    background: #f3f4f6;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 16px;
}

#addon-modal .addon-sub-info h4 {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 4px 0;
}

#addon-modal .addon-sub-info p {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
}

#addon-modal .addon-options-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

#addon-modal .addon-option-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    justify-content: space-between;
}

#addon-modal .addon-option-item:hover {
    border-color: #3b82f6;
    background: #f8fafc;
}

#addon-modal .addon-option-item.selected {
    border-color: #3b82f6;
    background: #eff6ff;
}

#addon-modal .addon-option-item.unavailable {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f9fafb;
}

#addon-modal .addon-option-item.unavailable:hover {
    border-color: #e5e7eb;
    background: #f9fafb;
}

#addon-modal .addon-option-item input[type="radio"] {
    margin-right: 12px;
    accent-color: #3b82f6;
}

#addon-modal .addon-option-info {
    flex: 1;
}

#addon-modal .addon-option-name {
    font-weight: 600;
    font-size: 13px;
    color: #1f2937;
}

#addon-modal .addon-option-price {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

#addon-modal .addon-option-status {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}

#addon-modal .addon-option-status.available {
    background: #dcfce7;
    color: #166534;
}

#addon-modal .addon-option-status.already-active {
    background: #fef3c7;
    color: #92400e;
}

#addon-modal .addon-selected-details {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 12px;
    margin-top: 16px;
}

#addon-modal .addon-selected-details h5 {
    font-size: 12px;
    font-weight: 600;
    color: #1e40af;
    margin: 0 0 8px 0;
}

#addon-modal .addon-selected-details p {
    font-size: 11px;
    color: #3b82f6;
    margin: 0;
    line-height: 1.5;
}

/* Add-on badge in subscription detail */
.addon-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #e0f2fe;
    color: #0369a1;
    font-weight: 500;
}

.addon-tag.active {
    background: #dcfce7;
    color: #166534;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SMS MODAL STYLES
   ═══════════════════════════════════════════════════════════════════════════ */
#sms-modal .modal-container {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    max-width: 480px;
    width: 100%;
}

[data-theme="dark"] #sms-modal .modal-container {
    background: var(--modal-bg);
}

#sms-modal .modal-header {
    background: linear-gradient(135deg, #f0fdf4, #fff);
    border-bottom: 1px solid #dcfce7;
}

#sms-modal .modal-header h3 {
    color: #166534;
}

#sms-modal .form-group {
    margin-bottom: 16px;
}

#sms-modal .form-group label {
    font-size: 11px;
    font-weight: 600;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}

[data-theme="dark"] #sms-modal .form-group label {
    color: var(--text-muted);
}

#sms-modal input[type="tel"],
#sms-modal select,
#sms-modal textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 13px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

[data-theme="dark"] #sms-modal input[type="tel"],
[data-theme="dark"] #sms-modal select,
[data-theme="dark"] #sms-modal textarea {
    background: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

#sms-modal input[type="tel"]:focus,
#sms-modal select:focus,
#sms-modal textarea:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

[data-theme="dark"] #sms-modal input[type="tel"]:focus,
[data-theme="dark"] #sms-modal select:focus,
[data-theme="dark"] #sms-modal textarea:focus {
    border-color: var(--hawx-teal);
    box-shadow: 0 0 0 3px rgba(99, 118, 117, 0.35);
}

#sms-modal textarea {
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
    line-height: 1.5;
}

#sms-modal .sms-char-count {
    font-size: 11px;
    color: #9ca3af;
    text-align: right;
    margin-top: 4px;
}

[data-theme="dark"] #sms-modal .sms-char-count {
    color: var(--text-muted);
}

#sms-modal .sms-char-count.warning {
    color: #f59e0b;
}

#sms-modal .sms-char-count.over {
    color: #ef4444;
    font-weight: 600;
}

#sms-modal .btn-sm {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}

#sms-modal .btn-primary {
    background: #10b981;
    color: #fff;
}

#sms-modal .btn-primary:hover {
    background: #059669;
}

#sms-modal .btn-primary:disabled {
    background: #d1d5db;
    cursor: not-allowed;
}

#sms-modal .btn-ghost {
    background: #fff;
    color: #4b5563;
    border: 1px solid #d1d5db;
}

#sms-modal .btn-ghost:hover {
    background: #f3f4f6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMPLATE ITEM STYLES
   ═══════════════════════════════════════════════════════════════════════════ */
.template-item {
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.template-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #10b981;
}

.template-item:active {
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANALYSIS TAB - AI-powered customer analysis
   ═══════════════════════════════════════════════════════════════════════════ */

.analysis-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.analysis-search-wrapper {
    display: flex;
    flex: 1;
    gap: 8px;
}

.analysis-input {
    flex: 1;
    padding: 10px 14px;
    font-size: 13px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.analysis-input:focus {
    border-color: var(--hawx-teal);
    box-shadow: 0 0 0 3px rgba(99, 118, 117, 0.15);
}

.analysis-input::placeholder {
    color: var(--gray-400);
}

.analysis-quick-queries {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
}

.quick-query-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-700);
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.15s;
}

.quick-query-btn:hover {
    background: var(--hawx-teal-light);
    border-color: var(--hawx-teal);
    color: var(--hawx-teal-dark);
}

.quick-query-btn:active {
    transform: scale(0.98);
}

.analysis-results {
    padding: 16px;
}

.analysis-placeholder {
    text-align: center;
    padding: 40px 20px;
    color: var(--gray-500);
}

.analysis-placeholder p {
    margin: 0 0 8px 0;
}

.analysis-placeholder .hint {
    font-size: 12px;
    color: var(--gray-400);
}

.analysis-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 12px;
    color: var(--gray-500);
}

.analysis-loading .loading {
    width: 32px;
    height: 32px;
    border: 3px solid var(--gray-200);
    border-top-color: var(--hawx-teal);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.analysis-error {
    padding: 20px;
    text-align: center;
}

.analysis-result {
    background: var(--gray-800);
    border: 1px solid var(--gray-700);
    border-radius: 8px;
    overflow: hidden;
}

.analysis-query {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: var(--gray-850, #1a1a1a);
    border-bottom: 1px solid var(--gray-700);
}

.query-label {
    font-weight: 600;
    color: var(--hawx-teal);
    flex-shrink: 0;
}

.query-text {
    color: var(--gray-300);
}

.analysis-answer {
    display: flex;
    gap: 8px;
    padding: 16px;
    background: var(--gray-900);
    border-radius: 8px;
    border: 1px solid var(--gray-700);
}

.answer-label {
    font-weight: 600;
    color: var(--success-light);
    flex-shrink: 0;
}

.answer-text {
    color: var(--gray-200);
    line-height: 1.6;
    flex: 1;
}

.answer-text strong {
    color: var(--white);
}

.answer-text em {
    color: var(--gray-400);
}

.answer-text p {
    margin: 0 0 12px 0;
}

.answer-text p:last-child {
    margin-bottom: 0;
}

.answer-text ul,
.answer-text ol {
    margin: 8px 0;
    padding-left: 20px;
}

.answer-text li {
    margin-bottom: 4px;
}

.answer-text a {
    color: var(--primary-light);
    text-decoration: underline;
}

.answer-text a:hover {
    color: var(--primary);
}


/* ═══════════════════════════════════════════════════════════════════════════
   KNOWLEDGE BASE SIDEBAR (Hamburger Menu)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hamburger Menu Button */
.hamburger-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    color: var(--gray-600);
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.hamburger-menu-btn:hover {
    background: var(--gray-100);
    border-color: var(--gray-300);
    color: var(--hawx-teal);
}

.hamburger-menu-btn svg {
    width: 20px;
    height: 20px;
}

/* Overlay */
.kb-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 998;
}

.kb-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* Sidebar - slides from LEFT */
.kb-sidebar {
    position: fixed;
    top: 0;
    left: -450px;
    width: 450px;
    height: 100vh;
    background: var(--gray-50);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    z-index: 999;
    display: flex;
    flex-direction: column;
    transition: left 0.3s ease;
}

.kb-sidebar.open {
    left: 0;
}

body.kb-sidebar-open {
    overflow: hidden;
}

/* Sidebar Header */
.kb-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--hawx-teal), var(--hawx-teal-dark));
    color: white;
}

.kb-sidebar-header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
}

.kb-sidebar-header h3 svg {
    width: 20px;
    height: 20px;
}

.kb-close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 24px;
    line-height: 1;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.kb-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Sidebar Sections (Collapsible) */
.sidebar-section {
    border-bottom: 1px solid var(--gray-200);
}

.sidebar-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: white;
    cursor: pointer;
    transition: background 0.2s ease;
}

.sidebar-section-header:hover {
    background: var(--gray-50);
}

.sidebar-section-header h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-700);
}

.sidebar-section-header h4 svg {
    width: 18px;
    height: 18px;
    color: var(--hawx-teal);
}

.sidebar-section-header .section-toggle {
    width: 18px;
    height: 18px;
    color: var(--gray-400);
    transition: transform 0.2s ease;
}

.sidebar-section-header.collapsed .section-toggle {
    transform: rotate(-90deg);
}

.sidebar-section-content {
    padding: 0 20px 16px;
    background: white;
}

.sidebar-section-header.collapsed + .sidebar-section-content {
    display: none;
}

/* Zip Code Checker */
.zip-code-input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.zip-code-input-wrapper:focus-within {
    border-color: var(--hawx-teal);
    box-shadow: 0 0 0 3px rgba(99, 118, 117, 0.1);
}

.zip-code-input-wrapper input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 2px;
    color: var(--gray-700);
    outline: none;
    min-width: 0;
}

.zip-code-input-wrapper input::placeholder {
    color: var(--gray-400);
    letter-spacing: normal;
    font-family: 'DM Sans', sans-serif;
}

#zip-code-result {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#zip-code-result svg {
    width: 24px;
    height: 24px;
}

#zip-code-result .loading {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-200);
    border-top-color: var(--hawx-teal);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

#zip-code-branch {
    margin-top: 10px;
    font-size: 13px;
    color: var(--gray-600);
    font-weight: 500;
    min-height: 20px;
}

#zip-code-branch:not(:empty) {
    padding: 8px 12px;
    background: rgba(75, 181, 67, 0.1);
    border-radius: 6px;
    color: #2d8a25;
}

/* Search Section (Legacy - keeping for backward compatibility) */
.kb-search-section {
    padding: 16px 20px;
    background: white;
    border-bottom: 1px solid var(--gray-200);
}

.kb-search-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.kb-search-input-wrapper:focus-within {
    border-color: var(--hawx-teal);
    box-shadow: 0 0 0 3px rgba(99, 118, 117, 0.1);
}

.kb-search-icon {
    width: 18px;
    height: 18px;
    color: var(--gray-400);
    flex-shrink: 0;
}

.kb-search-input-wrapper input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 13px;
    color: var(--gray-700);
    outline: none;
}

.kb-search-input-wrapper input::placeholder {
    color: var(--gray-400);
}

.kb-search-btn {
    padding: 6px 10px;
    background: var(--hawx-teal);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kb-search-btn:hover {
    background: var(--hawx-teal-dark);
}

.kb-search-btn svg {
    width: 16px;
    height: 16px;
}

/* Empty State */
.kb-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--gray-400);
}

.kb-empty-state svg {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.kb-empty-state p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    max-width: 280px;
}

/* Results Wrapper */
.kb-results-wrapper {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Answer Section */
.kb-answer-section {
    padding: 16px 20px;
    background: white;
    border-bottom: 1px solid var(--gray-200);
}

.kb-section-header {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-500);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gray-100);
}

.kb-answer-content {
    font-size: 13px;
    line-height: 1.7;
    color: var(--gray-700);
}

.kb-answer-content p {
    margin: 0 0 12px 0;
}

.kb-answer-content p:last-child {
    margin-bottom: 0;
}

.kb-answer-content ul,
.kb-answer-content ol {
    margin: 8px 0;
    padding-left: 20px;
}

.kb-answer-content li {
    margin-bottom: 4px;
}

.kb-answer-content code {
    background: var(--gray-100);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 12px;
}

.kb-answer-content strong {
    color: var(--gray-800);
}

.kb-citation-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--hawx-teal-light);
    color: var(--hawx-teal-dark);
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    margin: 0 2px;
    transition: background 0.2s ease;
}

.kb-citation-link:hover {
    background: var(--hawx-teal);
    color: white;
}

/* Sources Section */
.kb-sources-section {
    padding: 16px 20px;
    flex: 1;
}

/* Individual Source Result */
.knowledge-search-result {
    padding: 12px 14px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.knowledge-search-result:hover {
    border-color: var(--hawx-teal);
    box-shadow: 0 2px 8px rgba(99, 118, 117, 0.15);
    transform: translateY(-1px);
}

.knowledge-search-result:last-child {
    margin-bottom: 0;
}

.knowledge-search-result h3 {
    margin: 0 0 6px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-800);
    line-height: 1.4;
}

.knowledge-search-result h3 a {
    color: var(--hawx-teal-dark);
    text-decoration: none;
}

.knowledge-search-result h3 a:hover {
    text-decoration: underline;
}

.knowledge-search-result p {
    margin: 0;
    font-size: 12px;
    color: var(--gray-500);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Loading States */
.kb-loading-state {
    padding: 20px;
    text-align: center;
}

.kb-loading-state h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-500);
}

.kb-error-state {
    padding: 16px;
    background: var(--error-bg);
    color: var(--error-dark);
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────────────
Settings Section Styles
───────────────────────────────────────────────────────────────────────────── */
.settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
}

.settings-item:not(:last-child) {
    border-bottom: 1px solid var(--gray-200);
}

.settings-item-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-700);
}

.settings-item-label svg {
    width: 18px;
    height: 18px;
    color: var(--hawx-teal);
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.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: var(--gray-300);
    transition: 0.3s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--hawx-teal);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

.toggle-switch input:focus + .toggle-slider {
    box-shadow: 0 0 0 2px rgba(99, 118, 117, 0.2);
}

/* Dark mode toggle icon animation */
[data-theme="dark"] .settings-item-label svg {
    color: var(--hawx-gold);
}

/* Responsive - make sidebar full width on small screens */
@media (max-width: 500px) {
    .kb-sidebar {
        width: 100%;
        left: -100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LEADERBOARD WIDGET - Header Quick Stats
   ═══════════════════════════════════════════════════════════════════════════ */
.leaderboard-widget {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(234, 183, 73, 0.12) 0%, rgba(99, 118, 117, 0.08) 100%);
    border: 1px solid rgba(234, 183, 73, 0.25);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    min-width: 120px;
    height: 34px;
}

.leaderboard-widget:hover {
    background: linear-gradient(135deg, rgba(234, 183, 73, 0.2) 0%, rgba(99, 118, 117, 0.12) 100%);
    border-color: rgba(234, 183, 73, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(234, 183, 73, 0.15);
}

.leaderboard-widget.hide {
    display: none;
}

.lb-widget-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lb-stat {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lb-icon {
    width: 14px;
    height: 14px;
    color: var(--hawx-gold);
    flex-shrink: 0;
}

.lb-value {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1;
}

.lb-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lb-divider {
    width: 1px;
    height: 18px;
    background: var(--border-color);
    opacity: 0.6;
}

.lb-rank-hash {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    margin-right: 1px;
}

.lb-rank .lb-value {
    color: var(--hawx-teal);
}

.lb-rank-change {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 4px;
    margin-left: 2px;
}

.lb-rank-change.up {
    color: var(--success);
    background: rgba(87, 201, 90, 0.15);
}

.lb-rank-change.down {
    color: var(--error);
    background: rgba(233, 102, 102, 0.15);
}

.lb-rank-change.hide {
    display: none;
}

/* Loading state */
.lb-widget-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: inherit;
    border-radius: inherit;
}

.lb-widget-loading.hide {
    display: none;
}

.lb-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top-color: var(--hawx-gold);
    border-radius: 50%;
    animation: lb-spin 0.8s linear infinite;
}

@keyframes lb-spin {
    to { transform: rotate(360deg); }
}

/* Dark mode */
[data-theme="dark"] .leaderboard-widget {
    background: linear-gradient(135deg, rgba(234, 183, 73, 0.08) 0%, rgba(122, 147, 146, 0.06) 100%);
    border-color: rgba(234, 183, 73, 0.2);
}

[data-theme="dark"] .leaderboard-widget:hover {
    background: linear-gradient(135deg, rgba(234, 183, 73, 0.15) 0%, rgba(122, 147, 146, 0.1) 100%);
    border-color: rgba(234, 183, 73, 0.35);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .lb-rank .lb-value {
    color: var(--hawx-teal);
}

/* Mobile responsive */
@media (max-width: 600px) {
    .leaderboard-widget {
        padding: 5px 8px;
        min-width: auto;
        height: 32px;
    }
    
    .lb-label {
        display: none;
    }
    
    .lb-divider {
        height: 14px;
    }
    
    .lb-value {
        font-size: 12px;
    }
    
    .lb-icon {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 400px) {
    .leaderboard-widget {
        padding: 4px 6px;
    }
    
    .lb-widget-inner {
        gap: 6px;
    }
}