/* Global mobile overflow prevention */
        *, *::before, *::after { box-sizing: border-box; }
        html, body { max-width: 100vw; overflow-x: hidden; }
        .admin-card, .tab-content { max-width: 100%; overflow-x: hidden; }

        /* Dropdown styles */
        .nav-dropdown {
            position: relative;
        }

        .dropdown-toggle {
            display: flex;
            align-items: center;
            gap: 6px;
            background: none;
            border: none;
            cursor: pointer;
            font-family: inherit;
        }

        .dropdown-toggle svg {
            color: var(--white);
        }

        .dropdown-menu {
            position: absolute;
            top: 100%;
            right: 0;
            background: white;
            border-radius: 10px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.15);
            min-width: 200px;
            padding: 8px 0;
            display: none;
            z-index: 1001;
        }

        .dropdown-menu.show {
            display: block;
        }

        .dropdown-menu a {
            display: block;
            padding: 12px 20px;
            color: #374151;
            text-decoration: none;
            font-size: 0.95rem;
            transition: background 0.2s;
        }

        .dropdown-menu a:hover {
            background: #f3f4f6;
        }

        .dropdown-menu hr {
            border: none;
            border-top: 1px solid #e5e7eb;
            margin: 8px 0;
        }

        .dropdown-menu .logout-link {
            color: #dc2626;
        }

        .dropdown-menu .logout-link:hover {
            background: #fee2e2;
        }

        .modal-small {
            max-width: min(450px, 100%);
        }

        .email-list {
            list-style: none;
            padding: 0;
            margin: 0 0 20px 0;
        }

        .email-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 12px;
            background: #f9fafb;
            border-radius: 8px;
            margin-bottom: 8px;
        }

        .email-info {
            display: flex;
            flex-direction: column;
        }

        .email-address {
            font-weight: 500;
            color: #1a2d4a;
        }

        .email-name {
            font-size: 0.8rem;
            color: #6b7280;
        }

        .btn-delete {
            background: #fee2e2;
            color: #dc2626;
            padding: 5px 10px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            font-size: 0.8rem;
            font-weight: 500;
        }

        .btn-delete:hover {
            background: #fecaca;
        }

        .add-email-form {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .add-email-form input {
            flex: 1;
            min-width: 120px;
            padding: 10px 12px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 0.9rem;
        }

        .add-email-form input:focus {
            outline: none;
            border-color: #4a9fff;
        }

        .add-email-form .btn {
            padding: 10px 16px;
            font-size: 0.9rem;
        }

        .settings-form .form-group {
            margin-bottom: 15px;
        }

        .settings-form label {
            display: block;
            font-weight: 600;
            color: #1a2d4a;
            margin-bottom: 5px;
            font-size: 0.9rem;
        }

        .settings-form input {
            width: 100%;
            padding: 10px 15px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 0.95rem;
        }

        .settings-form input:focus {
            outline: none;
            border-color: #4a9fff;
        }

        .modal {
            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: 1000;
        }

        .modal-content {
            background: white;
            padding: 30px;
            border-radius: 15px;
            max-width: 600px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            position: relative;
        }
        .contact-detail-actions {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
            margin-bottom: 14px;
        }
        .contact-detail-actions .btn {
            width: 100%;
            justify-content: center;
            padding: 6px 10px;
            font-size: 0.85rem;
            white-space: normal;
            text-align: center;
            line-height: 1.2;
            min-height: 40px;
        }
        .contact-detail-actions .btn-status-schedule {
            grid-column: 1 / -1;
        }
        #cdSignedContractsBtn:empty { display: none; }
        #cdSignedContractsBtn { display: contents; }
        .contact-notes-input-row {
            display: flex;
            gap: 6px;
        }
        .contact-notes-input-row input {
            flex: 1;
            min-width: 0;
            padding: 6px 10px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 0.85rem;
        }
        .cd-note-row {
            padding: 6px 0;
            font-size: 0.85rem;
            color: #374151;
            border-bottom: 1px solid #f3f4f6;
        }
        .cd-note-text {
            line-height: 1.35;
            white-space: normal;
            word-break: break-word;
            overflow-wrap: anywhere;
        }
        .cd-note-actions {
            margin-top: 6px;
            display: flex;
            justify-content: flex-end;
        }
        .contact-history-row {
            padding: 8px 0;
            border-bottom: 1px solid #f1f5f9;
            font-size: 0.85rem;
            display: flex;
            gap: 8px;
            align-items: flex-start;
            justify-content: space-between;
        }
        .contact-history-main {
            min-width: 0;
            flex: 1;
        }
        .contact-history-text {
            white-space: normal;
            word-break: break-word;
            overflow-wrap: anywhere;
        }

        .modal-close {
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 28px;
            cursor: pointer;
            color: #6b7280;
        }

        .modal-close:hover {
            color: #1a2d4a;
        }

        .detail-row {
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #f5f7fa;
        }

        .detail-label {
            font-weight: 600;
            color: #1a2d4a;
            display: block;
            margin-bottom: 5px;
        }

        .detail-value {
            color: #374151;
        }

        .photo-gallery {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }

        .photo-gallery img,
        .photo-gallery video {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 8px;
            cursor: pointer;
        }

        .photo-gallery video {
            width: 150px;
            height: 100px;
        }

        .media-item {
            position: relative;
            display: inline-block;
        }

        .video-badge {
            position: absolute;
            bottom: 5px;
            left: 5px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: bold;
        }

        .nav-user {
            color: var(--accent-light);
            font-weight: 600;
            font-size: 0.9rem;
        }

        .nav-logout {
            color: #ff6b6b !important;
        }

        .nav-logout:hover {
            color: #ff5252 !important;
        }

        .no-data {
            text-align: center;
            color: #6b7280;
            padding: 40px;
        }

        .btn-view {
            background: #e7f3ff;
            color: #1877f2;
            padding: 6px 12px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            font-weight: 600;
            font-size: 0.85rem;
            margin-right: 5px;
        }

        .btn-view:hover {
            background: #cce5ff;
        }

        .status-select {
            padding: 6px 10px;
            border-radius: 6px;
            border: 1px solid #e2e8f0;
            font-size: 0.85rem;
            cursor: pointer;
        }

        /* Contact links in quotes table */
        .contact-link {
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 0;
            transition: color 0.2s;
        }

        .phone-link {
            color: #059669;
        }

        .phone-link:hover {
            color: #047857;
            text-decoration: underline;
        }

        .email-link {
            color: #2563eb;
            font-size: 0.85rem;
        }

        .email-link:hover {
            color: #1d4ed8;
            text-decoration: underline;
        }

        /* Discount badge in quotes table */
        .discount-badge {
            display: inline-block;
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            font-size: 0.65rem;
            font-weight: 700;
            padding: 2px 5px;
            border-radius: 4px;
            margin-left: 6px;
            vertical-align: middle;
        }

        .change-password-form {
            max-width: 400px;
        }

        .change-password-form .form-group {
            margin-bottom: 15px;
        }

        .change-password-form label {
            display: block;
            font-weight: 600;
            color: #1a2d4a;
            margin-bottom: 5px;
            font-size: 0.9rem;
        }

        .change-password-form input {
            width: 100%;
            padding: 10px 15px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 0.95rem;
            transition: border-color 0.2s;
        }

        .change-password-form input:focus {
            outline: none;
            border-color: #4a9fff;
        }

        .password-error {
            background: #fee2e2;
            color: #dc2626;
            padding: 10px 15px;
            border-radius: 8px;
            margin-bottom: 15px;
            font-size: 0.9rem;
        }

        .password-success {
            background: #dcfce7;
            color: #16a34a;
            padding: 10px 15px;
            border-radius: 8px;
            margin-bottom: 15px;
            font-size: 0.9rem;
        }

        .admin-users-list {
            list-style: none;
            margin-bottom: 20px;
        }

        .admin-users-list li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
            background: #f9fafb;
            border-radius: 8px;
            margin-bottom: 10px;
        }

        .admin-user-info {
            display: flex;
            flex-direction: column;
        }

        .admin-username {
            font-weight: 600;
            color: #1a2d4a;
        }

        .admin-meta {
            font-size: 0.8rem;
            color: #6b7280;
        }

        .add-admin-form {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .add-admin-form input {
            flex: 1;
            min-width: 150px;
            padding: 10px 15px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 0.95rem;
        }

        .add-admin-form input:focus {
            outline: none;
            border-color: #4a9fff;
        }

        .btn-delete-admin {
            background: #fee2e2;
            color: #dc2626;
            padding: 6px 12px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            font-weight: 600;
            font-size: 0.8rem;
        }

        .btn-delete-admin:hover {
            background: #fecaca;
        }

        .btn-delete-admin:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .btn-delete-quote {
            background: #dc2626;
            color: white;
            padding: 10px 20px;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            font-weight: 600;
            font-size: 0.9rem;
            width: 100%;
        }

        .btn-delete-quote:hover {
            background: #b91c1c;
        }

        /* Receipt Generator Styles */
        .admin-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }

        .admin-header .btn {
            display: inline-flex;
            align-items: center;
        }

        .modal-large {
            max-width: min(800px, 100%);
        }

        .receipt-section {
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid #e5e7eb;
        }

        .receipt-section:last-of-type {
            border-bottom: none;
        }

        .receipt-section h3 {
            color: #1a2d4a;
            font-size: 1rem;
            margin-bottom: 15px;
        }

        .receipt-customer-form .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        @media (max-width: 600px) {
            .receipt-customer-form .form-row {
                grid-template-columns: 1fr;
            }
        }

        .receipt-customer-form .form-group {
            margin-bottom: 10px;
        }

        .receipt-customer-form label {
            display: block;
            font-weight: 600;
            color: #374151;
            margin-bottom: 5px;
            font-size: 0.85rem;
        }

        .receipt-customer-form input {
            width: 100%;
            padding: 10px 12px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 0.95rem;
        }

        .receipt-customer-form input:focus {
            outline: none;
            border-color: #4a9fff;
        }

        .receipt-add-item {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }

        .receipt-add-item .btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.85rem;
            padding: 8px 14px;
        }

        .btn-secondary {
            background: #f3f4f6;
            color: #374151;
            border: none;
            cursor: pointer;
            border-radius: 8px;
            font-weight: 600;
        }

        .btn-secondary:hover {
            background: #e5e7eb;
        }

        .receipt-items-list {
            background: #f9fafb;
            border-radius: 10px;
            padding: 15px;
            min-height: 100px;
        }

        .receipt-items-list .no-items {
            text-align: center;
            color: #6b7280;
            margin: 20px 0;
        }

        .receipt-item {
            display: grid;
            grid-template-columns: 50px 1fr auto auto;
            align-items: center;
            gap: 10px;
            background: white;
            padding: 12px;
            border-radius: 8px;
            margin-bottom: 10px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }

        @media (max-width: 500px) {
            .receipt-item {
                grid-template-columns: 40px 1fr;
                grid-template-rows: auto auto;
                gap: 8px;
            }
            .receipt-item-photo {
                grid-row: span 2;
                width: 40px;
                height: 40px;
            }
            .receipt-item-details {
                grid-column: 2;
            }
            .receipt-item-price {
                grid-column: 2;
                justify-self: start;
            }
            .receipt-item-actions {
                position: absolute;
                right: 12px;
                top: 12px;
            }
            .receipt-item {
                position: relative;
            }
        }

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

        .receipt-item-photo {
            width: 50px;
            height: 50px;
            border-radius: 6px;
            object-fit: cover;
            background: #e5e7eb;
            flex-shrink: 0;
        }

        .receipt-item-photo.no-photo {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #9ca3af;
        }

        .receipt-item-details {
            min-width: 0;
            overflow: hidden;
        }

        .receipt-item-description {
            font-weight: 600;
            color: #1a2d4a;
            margin-bottom: 3px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .receipt-item-meta {
            font-size: 0.8rem;
            color: #6b7280;
        }

        .receipt-item-price {
            font-weight: 700;
            color: #1a2d4a;
            font-size: 1.1rem;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .receipt-item-actions {
            display: flex;
            gap: 5px;
            flex-shrink: 0;
        }

        .receipt-item-actions button {
            background: none;
            border: none;
            cursor: pointer;
            padding: 5px;
            color: #6b7280;
            border-radius: 4px;
        }

        .receipt-item-actions button:hover {
            background: #f3f4f6;
            color: #374151;
        }

        .receipt-item-actions .btn-delete-item:hover {
            color: #dc2626;
        }

        .labor-section {
            background: #f0f9ff;
            margin: 0 -30px;
            padding: 20px 30px;
            border-bottom: none;
            max-width: calc(100% + 60px);
        }

        .labor-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .labor-label {
            font-weight: 600;
            color: #1a2d4a;
        }

        .labor-cost {
            display: flex;
            align-items: center;
            gap: 5px;
            font-weight: 600;
            color: #374151;
        }

        .labor-cost input {
            width: min(100px, 40vw);
            padding: 8px 12px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            text-align: right;
        }

        .labor-cost input:focus {
            outline: none;
            border-color: #4a9fff;
        }

        .tax-section {
            background: #fef3c7;
            margin: 0 -30px;
            padding: 15px 30px;
            border-bottom: none;
            max-width: calc(100% + 60px);
        }

        .tax-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .tax-label {
            font-weight: 600;
            color: #92400e;
        }

        .tax-rate {
            display: flex;
            align-items: center;
            gap: 5px;
            font-weight: 600;
            color: #92400e;
        }

        .tax-rate input {
            width: 70px;
            padding: 8px 12px;
            border: 2px solid #fcd34d;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            text-align: right;
            background: white;
        }

        .tax-rate input:focus {
            outline: none;
            border-color: #f59e0b;
        }

        /* Discount Section */
        .discount-section {
            background: linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%);
            margin: 0 -30px;
            padding: 15px 30px;
            border-bottom: none;
            max-width: calc(100% + 60px);
        }

        .discount-toggle-label {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            cursor: pointer;
            user-select: none;
        }

        .discount-toggle-label input[type="checkbox"] {
            width: 20px;
            height: 20px;
            accent-color: #10b981;
            cursor: pointer;
            margin-top: 2px;
            flex-shrink: 0;
        }

        .discount-toggle-text {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .discount-toggle-text strong {
            color: #065f46;
            font-size: 0.95rem;
        }

        .discount-note {
            color: #047857;
            font-size: 0.8rem;
        }

        /* Discount eligible banner in quote modal */
        .discount-eligible-banner {
            display: flex;
            align-items: center;
            gap: 10px;
            background: linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%);
            border: 2px solid #10b981;
            border-radius: 10px;
            padding: 12px 15px;
            margin-top: 15px;
            color: #065f46;
        }

        .discount-eligible-banner svg {
            flex-shrink: 0;
            color: #10b981;
        }

        /* Create Receipt Button */
        .btn-create-receipt {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            border: none;
            padding: 10px 18px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-create-receipt:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
        }

        /* Sold status styling */
        .status-select.status-sold {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            border-color: #059669;
        }

        .totals-section {
            background: #1a2d4a;
            color: white;
            margin: 0 -30px 20px;
            padding: 20px 30px;
            border-radius: 0 0 10px 10px;
            max-width: calc(100% + 60px);
        }

        .totals-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            font-size: 0.95rem;
        }

        .totals-row.total-final {
            border-top: 1px solid rgba(255,255,255,0.2);
            margin-top: 10px;
            padding-top: 15px;
            font-size: 1.2rem;
            font-weight: 700;
        }

        .receipt-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .receipt-actions .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        /* Scanner Styles */
        .scanner-container {
            position: relative;
            width: 100%;
            max-width: min(350px, 100%);
            margin: 0 auto;
            border-radius: 10px;
            overflow: hidden;
            background: #000;
        }

        .scanner-container video {
            width: 100%;
            display: block;
        }

        .scanner-overlay {
            position: absolute;
            top: 50%;
            left: 10%;
            right: 10%;
            height: 3px;
            transform: translateY(-50%);
        }

        .scanner-line {
            height: 100%;
            background: #ff4444;
            animation: scan 2s ease-in-out infinite;
        }

        @keyframes scan {
            0%, 100% { transform: translateX(-100%); }
            50% { transform: translateX(100%); }
        }

        .scanner-hint {
            text-align: center;
            color: #6b7280;
            font-size: 0.9rem;
            margin-top: 15px;
        }

        /* Camera Styles */
        .camera-container {
            width: 100%;
            max-width: min(350px, 100%);
            margin: 0 auto;
            border-radius: 10px;
            overflow: hidden;
            background: #000;
        }

        .camera-container video {
            width: 100%;
            display: block;
        }

        #capturedPhotoPreview {
            max-width: min(350px, 100%);
            margin: 15px auto;
            border-radius: 10px;
            overflow: hidden;
        }

        #capturedPhotoPreview img {
            width: 100%;
            display: block;
        }

        .camera-actions {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 15px;
        }

        /* Receipt Scanner Modal */
        .receipt-scanner-options {
            display: flex;
            gap: 20px;
            justify-content: center;
            margin-bottom: 25px;
        }

        .upload-option {
            cursor: pointer;
            background: none;
            border: none;
            padding: 0;
        }

        .upload-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            padding: 20px;
            border: 2px dashed #d1d5db;
            border-radius: 12px;
            color: #6b7280;
            transition: all 0.2s;
        }

        .upload-btn:hover {
            border-color: #4a9fff;
            color: #4a9fff;
            background: #f0f7ff;
        }

        .upload-btn span {
            font-weight: 600;
        }

        /* Capture button with hold-to-scan */
        .btn-capture {
            position: relative;
            padding: 16px 28px !important;
            font-size: 1.1rem !important;
            overflow: visible;
        }

        .capture-btn-inner {
            display: flex;
            align-items: center;
            gap: 10px;
            position: relative;
            z-index: 1;
        }

        .hold-ring {
            position: absolute;
            top: -4px;
            left: -4px;
            right: -4px;
            bottom: -4px;
            border: 4px solid transparent;
            border-radius: 12px;
            pointer-events: none;
        }

        .btn-capture.holding .hold-ring {
            border-color: #10b981;
            animation: holdPulse 0.3s ease-in-out infinite;
        }

        @keyframes holdPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .btn-capture.scanning {
            background: #10b981 !important;
        }

        .btn-capture.scanning .hold-ring {
            border-color: #059669;
            animation: scanPulse 0.5s ease-in-out infinite;
        }

        /* Long Receipt Scanner */
        .scan-guide {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            border: 3px solid rgba(74, 159, 255, 0.5);
            border-radius: 8px;
        }

        .scan-line {
            position: absolute;
            left: 10%;
            right: 10%;
            height: 3px;
            background: linear-gradient(90deg, transparent, #4a9fff, transparent);
            top: 50%;
            animation: scanPulse 1.5s ease-in-out infinite;
        }

        @keyframes scanPulse {
            0%, 100% { opacity: 0.5; transform: scaleX(0.8); }
            50% { opacity: 1; transform: scaleX(1); }
        }

        .frame-counter {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
        }

        .btn-scan-hold {
            padding: 16px 32px !important;
            font-size: 1.1rem !important;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            user-select: none;
            -webkit-user-select: none;
            touch-action: none;
        }

        .btn-scan-hold:active,
        .btn-scan-hold.scanning {
            background: #10b981 !important;
            transform: scale(0.98);
        }

        .btn-scan-hold.scanning .scan-indicator {
            animation: recordPulse 0.5s ease-in-out infinite;
        }

        @keyframes recordPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }

        /* OCR Progress */
        .ocr-progress-container {
            text-align: center;
            padding: 30px;
        }

        .ocr-spinner {
            margin-bottom: 15px;
        }

        .ocr-spinner .spinner {
            animation: spin 1s linear infinite;
        }

        .ocr-progress-bar {
            width: 100%;
            max-width: 300px;
            height: 8px;
            background: #e5e7eb;
            border-radius: 4px;
            margin: 15px auto 0;
            overflow: hidden;
        }

        .ocr-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #4a9fff 0%, #1877f2 100%);
            border-radius: 4px;
            transition: width 0.3s ease;
        }

        /* Extracted Items List */
        .extracted-items-list {
            max-height: 400px;
            overflow-y: auto;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
        }

        .extracted-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 15px;
            border-bottom: 1px solid #e5e7eb;
        }

        .extracted-item:last-child {
            border-bottom: none;
        }

        .extracted-item input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: #4a9fff;
        }

        .extracted-item-details {
            flex: 1;
        }

        .extracted-item-desc {
            font-weight: 600;
            color: #1a2d4a;
        }

        .extracted-item-price {
            color: #6b7280;
            font-size: 0.9rem;
        }

        .extracted-item-price input {
            width: 80px;
            padding: 4px 8px;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            font-size: 0.9rem;
        }

        .btn-scan-receipt {
            background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
            color: white !important;
        }

        .btn-scan-receipt:hover {
            background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
        }

        /* Edit Item Modal */
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }

        .item-photo-preview {
            position: relative;
            width: 100px;
            height: 100px;
            margin: 10px 0;
        }

        .item-photo-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
        }

        .btn-remove-photo {
            position: absolute;
            top: -8px;
            right: -8px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #dc2626;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 16px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Print Styles */
        @media print {
            body * {
                visibility: hidden;
            }

            #printableReceipt, #printableReceipt * {
                visibility: visible;
            }

            #printableReceipt {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                background: white;
                padding: 20px;
            }

            .no-print {
                display: none !important;
            }
        }

        #printableReceipt {
            display: none;
        }

        /* === Bottom Navigation Bar === */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 999;
            display: flex;
            background: #ffffff;
            border-top: 1px solid #e2e8f0;
            padding: 4px 0 env(safe-area-inset-bottom, 8px);
            box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
        }
        .bottom-nav-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            padding: 8px 4px;
            border: none;
            background: none;
            font-size: 0.7rem;
            font-weight: 600;
            color: #94a3b8;
            cursor: pointer;
            transition: color 0.2s;
            -webkit-tap-highlight-color: transparent;
            font-family: inherit;
        }
        .bottom-nav-item.active { color: #4a9fff; }
        .bottom-nav-item svg { transition: transform 0.15s; }
        .bottom-nav-item.active svg { transform: scale(1.1); }
        .admin-page { padding-bottom: 80px !important; }

        /* === Contact Sub-Tabs === */
        .contact-sub-tabs {
            display: flex;
            gap: 0;
            background: #f1f5f9;
            border-radius: 10px;
            padding: 3px;
            margin-bottom: 14px;
        }
        .contact-sub-tab {
            flex: 1;
            padding: 8px 6px;
            border: none;
            background: none;
            font-weight: 600;
            font-size: 0.82rem;
            color: #64748b;
            cursor: pointer;
            border-radius: 7px;
            transition: all 0.2s;
            text-align: center;
            font-family: inherit;
        }
        .contact-sub-tab.active {
            background: #fff;
            color: #1a2d4a;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .contact-sub-tab .tab-count {
            display: inline-block;
            background: #e2e8f0;
            color: #64748b;
            font-size: 0.72rem;
            padding: 1px 5px;
            border-radius: 10px;
            margin-left: 3px;
        }
        .contact-sub-tab.active .tab-count {
            background: #4a9fff;
            color: #fff;
        }
        .tab-content { display: none; }
        .tab-content.active { display: block; }
        .tab-content.tab-sliding-out { display: block; }
        @keyframes tabSlideOutLeft {
            from { transform: translateX(0); opacity: 1; }
            to   { transform: translateX(-60px); opacity: 0; }
        }
        @keyframes tabSlideInRight {
            from { transform: translateX(60px); opacity: 0; }
            to   { transform: translateX(0); opacity: 1; }
        }
        @keyframes tabSlideOutRight {
            from { transform: translateX(0); opacity: 1; }
            to   { transform: translateX(60px); opacity: 0; }
        }
        @keyframes tabSlideInLeft {
            from { transform: translateX(-60px); opacity: 0; }
            to   { transform: translateX(0); opacity: 1; }
        }

        /* === Financials Tab === */
        .fin-period-toggle { display:flex; gap:0; background:#f1f5f9; border-radius:10px; padding:3px; margin-bottom:16px; }
        .fin-period-btn { flex:1; padding:8px; border:none; background:none; font-weight:600; font-size:0.85rem; color:#64748b; cursor:pointer; border-radius:7px; transition:all 0.2s; font-family:inherit; }
        .fin-period-btn.active { background:#fff; color:#1a2d4a; box-shadow:0 1px 3px rgba(0,0,0,0.1); }
        .fin-stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px; }
        .fin-stat-card { padding:16px; border-radius:12px; text-align:center; color:#fff; }
        .fin-stat-card .fin-stat-value { font-size:1.5rem; font-weight:700; }
        .fin-stat-card .fin-stat-label { font-size:0.8rem; opacity:0.9; margin-top:2px; }
        .fin-revenue { background:linear-gradient(135deg,#10b981,#059669); }
        .fin-parts { background:linear-gradient(135deg,#8b5cf6,#7c3aed); }
        .fin-labor { background:linear-gradient(135deg,#f59e0b,#d97706); }
        .fin-count { background:linear-gradient(135deg,#4a9fff,#2563eb); }
        .fin-invoice-summary { display:flex; gap:10px; margin-bottom:16px; }
        .fin-invoice-stat { flex:1; background:#f8fafc; border-radius:10px; padding:14px; text-align:center; }
        .fin-invoice-label { display:block; font-size:0.75rem; color:#6b7280; margin-bottom:4px; }
        .fin-invoice-value { display:block; font-size:1.2rem; font-weight:700; }

        /* === Contact Cards === */
        .contact-card {
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 14px;
            margin-bottom: 10px;
            background: #fff;
            transition: box-shadow 0.15s;
        }
        .contact-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
        .contact-card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 8px;
            margin-bottom: 8px;
        }
        .contact-name {
            font-weight: 700;
            color: #1f2937;
            font-size: 1rem;
        }
        .contact-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 6px;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }
        .badge-new { background: #fef3c7; color: #92400e; }
        .badge-contacted { background: #dbeafe; color: #1e40af; }
        .badge-quoted { background: #e0e7ff; color: #3730a3; }
        .badge-scheduled { background: #fce7f3; color: #9d174d; }
        .badge-completed { background: #d1fae5; color: #065f46; }
        .badge-sold { background: #d1fae5; color: #065f46; }
        .badge-lost { background: #fee2e2; color: #991b1b; }
        .badge-customer { background: #dbeafe; color: #1e40af; }
        .contact-meta {
            color: #64748b;
            font-size: 0.85rem;
            margin-bottom: 6px;
        }
        .contact-meta a { color: #4a9fff; text-decoration: none; }
        .contact-meta a:hover { text-decoration: underline; }
        .contact-vehicle {
            color: #475569;
            font-size: 0.85rem;
            margin-bottom: 8px;
        }
        .contact-actions {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }
        .contact-action-btn {
            padding: 5px 10px;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            background: #fff;
            color: #475569;
            font-size: 0.78rem;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.15s;
            font-family: inherit;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .contact-action-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
        .contact-action-btn.btn-convert { color: #059669; border-color: #a7f3d0; }
        .contact-action-btn.btn-convert:hover { background: #ecfdf5; }
        .contact-action-btn.btn-schedule { color: #7c3aed; border-color: #c4b5fd; }
        .contact-action-btn.btn-schedule:hover { background: #f5f3ff; }

        /* === Calls/Actions Tab === */
        .call-item {
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 14px;
            margin-bottom: 8px;
            background: #fff;
            transition: box-shadow 0.15s;
        }
        .call-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
        .call-item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
        }
        .call-item-name { font-weight: 700; color: #1f2937; font-size: 0.95rem; }
        .call-item-type {
            font-size: 0.7rem;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        .call-type-new { background: #fef3c7; color: #b45309; }
        .call-type-callback { background: #dbeafe; color: #1d4ed8; }
        .call-type-email { background: #ede9fe; color: #7c3aed; }
        .call-item-detail { font-size: 0.85rem; color: #6b7280; margin-bottom: 6px; }
        .call-item-actions {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-top: 8px;
        }
        .call-action-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 7px 14px;
            border-radius: 8px;
            border: 1.5px solid #e2e8f0;
            background: #fff;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            color: #475569;
            transition: all 0.15s;
        }
        .call-action-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
        .call-action-btn.btn-call { color: #059669; border-color: #a7f3d0; }
        .call-action-btn.btn-call:hover { background: #ecfdf5; }
        .call-action-btn.btn-email { color: #7c3aed; border-color: #c4b5fd; }
        .call-action-btn.btn-email:hover { background: #f5f3ff; }
        .call-action-btn.btn-done { color: #6b7280; border-color: #d1d5db; }
        .calls-filter-btn.active { background: #2563eb; color: #fff; border-color: #2563eb; }
        .call-section-label {
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #94a3b8;
            padding: 10px 0 6px 2px;
        }

        /* === Post-Call Actions === */
        .post-call-actions {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .post-call-btn {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            padding: 14px 18px;
            border-radius: 10px;
            border: 2px solid #e2e8f0;
            background: #fff;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s;
        }
        .post-call-btn:hover { background: #f8fafc; transform: translateY(-1px); }
        .post-call-callback { color: #f59e0b; border-color: #fde68a; }
        .post-call-callback:hover { background: #fffbeb; }
        .post-call-schedule { color: #8b5cf6; border-color: #c4b5fd; }
        .post-call-schedule:hover { background: #f5f3ff; }
        .post-call-not-interested { color: #ef4444; border-color: #fca5a5; }
        .post-call-not-interested:hover { background: #fef2f2; }
        .post-call-quoted { color: #059669; border-color: #a7f3d0; }
        .post-call-quoted:hover { background: #ecfdf5; }

        /* === Tax Center === */
        .tax-action-card {
            display: flex; align-items: center; gap: 14px; padding: 16px;
            background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
            cursor: pointer; transition: all 0.15s;
        }
        .tax-action-card:hover { border-color: #4a9fff; box-shadow: 0 2px 8px rgba(74,159,255,0.15); }
        .tax-card-icon {
            width: 44px; height: 44px; border-radius: 10px;
            display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        }
        .tax-card-body { flex: 1; }
        .tax-card-title { font-weight: 700; font-size: 0.95rem; color: #1e293b; }
        .tax-card-desc { font-size: 0.8rem; color: #64748b; margin-top: 2px; }
        .tax-tip {
            background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
            padding: 12px 14px; font-size: 0.82rem; color: #92400e; margin-bottom: 12px; line-height: 1.5;
        }
        .tax-tip strong { color: #78350f; }
        .tax-rule-box {
            background: #f0f9ff; border-left: 3px solid #4a9fff; padding: 10px 14px;
            font-size: 0.82rem; color: #1e40af; border-radius: 0 8px 8px 0; margin-bottom: 12px; line-height: 1.5;
        }
        .tax-wizard-step {
            padding: 6px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600;
            white-space: nowrap; cursor: pointer; border: 1px solid #e2e8f0;
            background: #f8fafc; color: #94a3b8; transition: all 0.15s;
        }
        .tax-wizard-step.active { background: #4a9fff; color: #fff; border-color: #4a9fff; }
        .tax-wizard-step.completed { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }
        .tax-wizard-section { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; }
        .tax-wizard-section h4 { margin: 0 0 8px; font-size: 0.95rem; color: #1e293b; }
        body.dark-mode .tax-action-card { background: #1e293b; border-color: #334155; }
        body.dark-mode .tax-action-card:hover { border-color: #4a9fff; }
        body.dark-mode .tax-card-title { color: #e2e8f0; }
        body.dark-mode .tax-card-desc { color: #94a3b8; }
        body.dark-mode .tax-tip { background: #292524; border-color: #78350f; color: #fbbf24; }
        body.dark-mode .tax-rule-box { background: #172554; border-color: #3b82f6; color: #93c5fd; }
        body.dark-mode .tax-wizard-step { background: #334155; border-color: #475569; color: #94a3b8; }
        body.dark-mode .tax-wizard-step.active { background: #4a9fff; color: #fff; }
        body.dark-mode .tax-wizard-step.completed { background: #14532d; color: #4ade80; border-color: #166534; }
        body.dark-mode .tax-wizard-section { background: #1e293b; border-color: #334155; }

        /* === Schedule === */
        .schedule-toolbar {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }
        #calendarContainer {
            width: 100%;
            overflow: hidden;
            position: relative;
        }
        #calendarContainer.swiping {
            transition: none !important;
        }
        .cal-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 1px;
            background: #e2e8f0;
            border-radius: 10px;
            overflow: hidden;
        }
        .cal-grid.mode-month {
            grid-template-columns: repeat(7, minmax(0, 1fr));
        }
        .cal-grid.mode-week {
            grid-template-rows: auto minmax(0, 1fr);
        }
        .cal-grid.mode-month .cal-day,
        .cal-grid.mode-week .cal-day {
            min-height: 0;
            height: 100%;
        }
        .cal-grid.mode-month .cal-day.month-view {
            min-height: 0;
            overflow: hidden;
        }
        .cal-header {
            background: #1a2d4a;
            color: #fff;
            padding: 8px 4px;
            text-align: center;
            font-size: 0.8rem;
            font-weight: 600;
        }
        .cal-day {
            background: #fff;
            min-height: 90px;
            padding: 6px;
            cursor: pointer;
            transition: background 0.1s;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .cal-day:hover { background: #f8fafc; }
        .cal-day.is-today { background: #eff6ff; }
        .cal-day.is-past { opacity: 0.6; }
        .cal-day-num {
            font-size: 0.75rem;
            font-weight: 700;
            color: #64748b;
            margin-bottom: 4px;
        }
        .cal-day.is-today .cal-day-num { color: #4a9fff; }
        .cal-day.other-month { opacity: 0.4; }
        .cal-day.month-view { min-height: 0; padding: 3px; }
        .cal-day.month-view .cal-job { font-size: 0.62rem; padding: 1px 3px; margin-bottom: 1px; border-left-width: 2px; gap: 2px; }
        .cal-day.month-view .cal-job-time { display: none; }
        .cal-day.month-view .cal-job-loc { display: none; }
        .cal-day.month-view .cal-day-num { font-size: 0.7rem; margin-bottom: 1px; }
        .cal-day-count { font-size: 0.6rem; color: #6b7280; font-weight: 600; cursor: pointer; padding: 1px 4px; background: #f1f5f9; border-radius: 4px; display: inline-block; margin-top: 1px; }
        .cal-job {
            background: #ede9fe;
            border-left: 3px solid #7c3aed;
            border-radius: 4px;
            padding: 3px 6px;
            margin-bottom: 4px;
            cursor: pointer;
            font-size: 0.72rem;
            line-height: 1.2;
            overflow: hidden;
            display: flex;
            align-items: center;
            gap: 4px;
            min-width: 0;
        }
        .cal-job:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
        .cal-job.status-completed { background: #d1fae5; border-left-color: #10b981; }
        .cal-job.status-cancelled { background: #fee2e2; border-left-color: #ef4444; opacity: 0.6; }
        .cal-job-time { font-weight: 700; color: #7c3aed; white-space: nowrap; flex-shrink: 0; }
        .cal-job.status-completed .cal-job-time { color: #059669; }
        .cal-job-name { font-weight: 600; color: #1f2937; min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .cal-job-loc { color: #64748b; font-size: 0.7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
        /* Entry type colors (defaults, overridden by settings via CSS vars) */
        .cal-job.type-job { background: var(--color-job-bg, #ede9fe); border-left-color: var(--color-job, #7c3aed); }
        .cal-job.type-job .cal-job-time { color: var(--color-job, #7c3aed); }
        .cal-job.type-diagnostic { background: var(--color-diagnostic-bg, #dbeafe); border-left-color: var(--color-diagnostic, #2563eb); }
        .cal-job.type-diagnostic .cal-job-time { color: var(--color-diagnostic, #2563eb); }
        .cal-job.type-roadside { background: var(--color-roadside-bg, #fef3c7); border-left-color: var(--color-roadside, #f59e0b); }
        .cal-job.type-roadside .cal-job-time { color: var(--color-roadside, #f59e0b); }
        .cal-job.type-personal { background: var(--color-personal-bg, #fce7f3); border-left-color: var(--color-personal, #ec4899); }
        .cal-job.type-personal .cal-job-time { color: var(--color-personal, #ec4899); }
        .cal-job.status-completed { background: #d1fae5 !important; border-left-color: #10b981 !important; }
        .cal-job.status-completed .cal-job-time { color: #059669 !important; }

        /* Schedule type selector buttons */
        .sched-type-btn {
            flex: 1;
            padding: 7px 10px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            background: #fff;
            color: #475569;
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.15s;
            text-align: center;
        }
        .sched-type-btn:hover { border-color: #94a3b8; }
        .sched-type-btn.active[data-type="job"] { background: var(--color-job, #7c3aed); color: #fff; border-color: var(--color-job, #7c3aed); }
        .sched-type-btn.active[data-type="diagnostic"] { background: var(--color-diagnostic, #2563eb); color: #fff; border-color: var(--color-diagnostic, #2563eb); }
        .sched-type-btn.active[data-type="roadside"] { background: var(--color-roadside, #f59e0b); color: #fff; border-color: var(--color-roadside, #f59e0b); }
        .sched-type-btn.active[data-type="personal"] { background: var(--color-personal, #ec4899); color: #fff; border-color: var(--color-personal, #ec4899); }

        /* Job detail popover */
        .job-popover {
            position: fixed;
            z-index: 1000;
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.15);
            padding: 16px;
            min-width: 280px;
            max-width: 340px;
        }
        .job-popover-title { font-weight: 700; font-size: 1rem; color: #1f2937; margin-bottom: 8px; }
        .job-popover-row { display: flex; gap: 8px; margin-bottom: 6px; font-size: 0.85rem; color: #475569; }
        .job-popover-label { font-weight: 600; color: #374151; min-width: 60px; }
        .job-popover-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid #e2e8f0; }
        .job-popover-actions a, .job-popover-actions button {
            padding: 6px 12px;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            background: #fff;
            color: #475569;
            font-size: 0.8rem;
            cursor: pointer;
            font-weight: 600;
            text-decoration: none;
            font-family: inherit;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .job-popover-actions a:hover, .job-popover-actions button:hover { background: #f1f5f9; }
        @media (max-width: 640px) {
            .modal {
                align-items: flex-start;
                padding: calc(env(safe-area-inset-top, 0px) + 8px) 8px calc(env(safe-area-inset-bottom, 0px) + 8px);
            }
            .modal-content {
                width: calc(100vw - 16px);
                max-width: 100%;
                max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
                padding: 16px;
                border-radius: 14px;
            }
            .modal-close {
                top: 8px;
                right: 12px;
            }
            .contact-detail-actions {
                grid-template-columns: repeat(2, minmax(120px, 1fr));
                gap: 8px;
            }
            .contact-detail-actions .btn {
                min-height: 42px;
            }
            .contact-notes-input-row {
                flex-direction: column;
            }
            .contact-notes-input-row .btn {
                width: 100%;
            }
            .contact-history-row {
                flex-direction: column;
                gap: 6px;
            }
            .contact-history-row .btn {
                align-self: flex-end;
            }
            .cal-day { min-height: 60px; padding: 2px; }
            .cal-day-num { font-size: 0.65rem; margin-bottom: 2px; }
            .cal-header { padding: 5px 2px; font-size: 0.7rem; }
            .cal-job { font-size: 0.62rem; padding: 2px 4px; margin-bottom: 2px; border-left-width: 2px; gap: 3px; }
            .cal-job-name { font-size: 0.6rem; }
            .cal-job-time { font-size: 0.6rem; }
            .cal-job-loc { display: none; }
            .job-popover { min-width: auto; max-width: calc(100vw - 20px); left: 10px !important; right: 10px !important; }
            .time-magnifier { width: auto; min-width: 160px; max-width: calc(100vw - 20px); left: 10px !important; right: 10px !important; }
            .day-event { margin: 3px 0 10px; padding: 6px 8px; border-radius: 8px; }
            .day-gap-pill { margin: 3px 0 10px; font-size: 0.76rem; }
            .labor-section, .tax-section, .discount-section, .totals-section {
                margin-left: -16px; margin-right: -16px;
                padding-left: 16px; padding-right: 16px;
                max-width: calc(100% + 32px);
            }
            .labor-cost input { width: 80px; }
            .perm-grid { grid-template-columns: 1fr !important; }
            .contact-detail-actions { grid-template-columns: 1fr 1fr; }
        }

        /* Extra-small phone screens (320-430px) */
        @media (max-width: 430px) {
            .container { padding: 0 10px; }
            .admin-card { padding: 12px 10px !important; }
            .modal-content { padding: 14px !important; max-width: 100% !important; }
            .contact-sub-tabs { gap: 0; }
            .contact-sub-tab { padding: 8px 6px; font-size: 0.78rem; }
            .fin-stats-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
            .perm-grid { grid-template-columns: 1fr !important; }
            .dropdown-menu { min-width: auto; max-width: calc(100vw - 20px); }
        }

        .cal-view-title { text-align: center; font-weight: 700; font-size: 1.1rem; color: #1e293b; padding: 8px 0 4px; }
        body.dark-mode .cal-view-title { color: #e2e8f0; }

        /* === Day View === */
        .day-view { position: relative; }
        .day-view-header {
            text-align: center;
            padding: 6px;
            font-weight: 700;
            font-size: 0.9rem;
            color: #1f2937;
            background: #f8fafc;
            border-radius: 10px 10px 0 0;
            border-bottom: 2px solid #e2e8f0;
        }
        body.dark-mode .day-view-header { background: #334155; color: #e2e8f0; border-bottom-color: #475569; }
        .day-timeline {
            position: relative;
            border: 1px solid #e2e8f0;
            border-top: none;
            border-radius: 0 0 10px 10px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        body.dark-mode .day-timeline { border-color: #334155; }
        .day-slot {
            display: flex;
            flex: 1;
            min-height: 0;
            border-bottom: 1px solid #f1f5f9;
        }
        .day-slot:last-child { border-bottom: none; }
        .day-slot.half-hour { border-bottom: 1px dashed #f1f5f9; }
        body.dark-mode .day-slot { border-bottom-color: #1e293b; }
        body.dark-mode .day-slot.half-hour { border-bottom-color: #1e293b; }
        .day-slot-time {
            width: 55px;
            flex-shrink: 0;
            padding: 2px 6px;
            font-size: 0.7rem;
            font-weight: 600;
            color: #94a3b8;
            text-align: right;
            border-right: 1px solid #e2e8f0;
            background: #f9fafb;
        }
        body.dark-mode .day-slot-time { background: #1e293b; border-right-color: #334155; color: #64748b; }
        .day-slot-content {
            flex: 1;
            padding: 1px 6px;
            position: relative;
            min-height: 0;
        }
        /* Magnified time picker - drag to select */
        .time-magnifier {
            position: fixed; z-index: 1100; background: #fff; border-radius: 16px;
            box-shadow: 0 12px 40px rgba(0,0,0,0.3); padding: 0; width: 180px;
            max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
            user-select: none; -webkit-user-select: none; touch-action: none;
        }
        .time-magnifier-title {
            text-align: center; font-size: 0.7rem; font-weight: 700; color: #94a3b8;
            text-transform: uppercase; letter-spacing: 0.05em; padding: 10px 12px 6px;
        }
        .time-mag-slot {
            display: flex; align-items: center; justify-content: center;
            padding: 10px 16px; font-size: 1.05rem; font-weight: 600; color: #94a3b8;
            transition: all 0.08s ease;
        }
        .time-mag-slot.on-hour { font-size: 1.1rem; }
        .time-mag-slot.mag-active {
            background: #7c3aed; color: #fff; font-size: 1.3rem;
            padding: 14px 16px; border-radius: 10px; margin: 0 6px;
            box-shadow: 0 2px 12px rgba(124,58,237,0.4);
        }
        .time-magnifier-hint {
            text-align: center; font-size: 0.7rem; color: #94a3b8; padding: 6px 12px 10px;
            border-top: 1px solid #f1f5f9;
        }
        body.dark-mode .time-magnifier { background: #1e293b; box-shadow: 0 12px 40px rgba(0,0,0,0.6); }
        body.dark-mode .time-mag-slot { color: #64748b; }
        body.dark-mode .time-mag-slot.mag-active { background: #7c3aed; color: #fff; }
        body.dark-mode .time-magnifier-hint { color: #64748b; border-top-color: #334155; }
        body.dark-mode .time-magnifier-title { color: #64748b; }

        .day-event {
            border-left: 3px solid #7c3aed;
            border-radius: 4px;
            padding: 3px 8px;
            margin: 2px 0 6px;
            cursor: pointer;
            font-size: 0.78rem;
            transition: box-shadow 0.15s;
            position: relative;
            z-index: 2;
            border: 1px solid rgba(148, 163, 184, 0.35);
            box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 1px 2px rgba(15,23,42,0.08);
            overflow: hidden;
        }
        .day-event:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
        body.dark-mode .day-event:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
        .day-event .day-event-time { font-weight: 700; font-size: 0.8rem; }
        .day-event .day-event-title { font-weight: 600; color: #1f2937; }
        body.dark-mode .day-event .day-event-title { color: #e2e8f0; }
        .day-event .day-event-detail { font-size: 0.78rem; color: #6b7280; margin-top: 2px; }
        body.dark-mode .day-event .day-event-detail { color: #94a3b8; }
        .day-event .day-event-travel { font-size: 0.75rem; color: #f59e0b; margin-top: 2px; }
        .day-event.type-job { background: var(--color-job-bg, #ede9fe); border-left-color: var(--color-job, #7c3aed); }
        .day-event.type-job .day-event-time { color: var(--color-job, #7c3aed); }
        .day-event.type-diagnostic { background: var(--color-diagnostic-bg, #dbeafe); border-left-color: var(--color-diagnostic, #2563eb); }
        .day-event.type-diagnostic .day-event-time { color: var(--color-diagnostic, #2563eb); }
        .day-event.type-roadside { background: var(--color-roadside-bg, #fef3c7); border-left-color: var(--color-roadside, #f59e0b); }
        .day-event.type-roadside .day-event-time { color: var(--color-roadside, #f59e0b); }
        .day-event.type-personal { background: var(--color-personal-bg, #fce7f3); border-left-color: var(--color-personal, #ec4899); }
        .day-event.type-personal .day-event-time { color: var(--color-personal, #ec4899); }
        .day-event.status-completed { background: #d1fae5 !important; border-left-color: #10b981 !important; }
        .day-event.status-completed .day-event-time { color: #059669 !important; }
        /* Confirmation status colors */
        .day-event.confirm-reminder_sent { border-left-color: #f97316 !important; }
        .day-event.confirm-reminder_sent::after { content: '\1F551'; position:absolute; top:4px; right:6px; font-size:12px; }
        .day-event.confirm-not_confirmed { background: #fef2f2 !important; border-left-color: #ef4444 !important; }
        .day-event.confirm-not_confirmed::after { content: '\26A0'; position:absolute; top:4px; right:6px; font-size:12px; }
        .day-event.confirm-confirmed { border-left-color: #22c55e !important; }
        .day-event.confirm-confirmed::after { content: '\2713'; position:absolute; top:4px; right:6px; font-size:12px; color:#16a34a; }
        .day-event.confirm-rescheduled { background: #fefce8 !important; border-left-color: #eab308 !important; }
        .day-event.confirm-rescheduled::after { content: '\21BB'; position:absolute; top:4px; right:6px; font-size:12px; }
        .cal-job.confirm-reminder_sent { border-left-color: #f97316 !important; }
        .cal-job.confirm-not_confirmed { background: #fef2f2 !important; border-left-color: #ef4444 !important; }
        .cal-job.confirm-confirmed { border-left-color: #22c55e !important; }
        .cal-job.confirm-rescheduled { background: #fefce8 !important; border-left-color: #eab308 !important; }
        /* Automation dashboard strip */
        .automation-strip {
            display: flex; align-items: center; gap: 16px; padding: 8px 16px;
            background: linear-gradient(135deg, #eff6ff, #f0f9ff); border-radius: 10px;
            margin: 0 0 12px; font-size: 0.82rem; color: #1e40af; flex-wrap: wrap;
        }
        .automation-strip .auto-stat { cursor: pointer; white-space: nowrap; }
        .automation-strip .auto-stat:hover { text-decoration: underline; }
        .automation-strip .auto-stat .auto-count {
            font-weight: 700; font-size: 1rem; margin-right: 3px;
        }
        .day-gap-pill {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            margin: 2px 0 8px;
            padding: 3px 8px;
            border-radius: 999px;
            font-size: 0.72rem;
            font-weight: 600;
            color: #475569;
            background: #f8fafc;
            border: 1px dashed #cbd5e1;
        }
        .day-gap-pill.overlap {
            color: #dc2626;
            background: #fef2f2;
            border-color: #fca5a5;
        }
        body.dark-mode .day-gap-pill {
            color: #cbd5e1;
            background: #1e293b;
            border-color: #475569;
        }
        body.dark-mode .day-gap-pill.overlap {
            color: #fca5a5;
            background: #3f1d1d;
            border-color: #7f1d1d;
        }
        .day-now-line {
            position: absolute;
            left: 70px;
            right: 0;
            height: 2px;
            background: #ef4444;
            z-index: 5;
            pointer-events: none;
        }
        .day-now-line::before {
            content: '';
            position: absolute;
            left: -5px;
            top: -4px;
            width: 10px;
            height: 10px;
            background: #ef4444;
            border-radius: 50%;
        }

        /* Role management styles */
        .perm-section { background: #f9fafb; padding: 14px; border-radius: 8px; margin-bottom: 12px; }
        .perm-section h4 { margin: 0 0 10px 0; color: #374151; font-size: 0.9rem; font-weight: 600; }
        .perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
        .perm-grid label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.85rem; color: #374151; }
        .perm-grid input[type="checkbox"] { width: 16px; height: 16px; accent-color: #4a9fff; cursor: pointer; }
        .role-card { background: #f9fafb; border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
        .role-card-info { display: flex; flex-direction: column; gap: 2px; }
        .role-card-name { font-weight: 600; color: #1a2d4a; font-size: 0.95rem; }
        .role-card-meta { font-size: 0.8rem; color: #6b7280; }
        .role-card-actions { display: flex; gap: 8px; }
        .system-badge { display: inline-block; background: #dbeafe; color: #1d4ed8; font-size: 0.7rem; font-weight: 600; padding: 2px 6px; border-radius: 4px; margin-left: 6px; }
        .role-select { padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.85rem; background: #fff; }
        .btn-toggle-active { padding: 4px 10px; font-size: 0.8rem; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; cursor: pointer; color: #374151; }
        .btn-toggle-active:hover { background: #f3f4f6; }

        /* ===== Dark Mode Overrides ===== */
        body.dark-mode .nav-link,
        body.dark-mode .logo-text,
        body.dark-mode .nav-user,
        body.dark-mode .dropdown-toggle { color: #e2e8f0 !important; }
        body.dark-mode .dropdown-toggle svg { color: #e2e8f0; }
        body.dark-mode .dropdown-menu { background: #1e293b; box-shadow: 0 10px 40px rgba(0,0,0,0.4); }
        body.dark-mode .dropdown-menu a { color: #e2e8f0; }
        body.dark-mode .dropdown-menu a:hover { background: #334155; }
        body.dark-mode .dropdown-menu hr { border-top-color: #334155; }
        body.dark-mode .dropdown-menu .logout-link { color: #f87171; }
        body.dark-mode .dropdown-menu .logout-link:hover { background: #451a1a; }

        body.dark-mode .modal-content { background: #1e293b; color: #e2e8f0; }
        body.dark-mode .modal-close { color: #94a3b8; }
        body.dark-mode .modal-close:hover { color: #e2e8f0; }

        body.dark-mode .detail-row { border-bottom-color: #334155; }
        body.dark-mode .detail-label { color: #94a3b8; }
        body.dark-mode .detail-value { color: #e2e8f0; }

        body.dark-mode .email-item { background: #334155; }
        body.dark-mode .email-address { color: #e2e8f0; }
        body.dark-mode .email-name { color: #94a3b8; }

        body.dark-mode .admin-users-list li { background: #334155; }
        body.dark-mode .admin-username { color: #e2e8f0; }
        body.dark-mode .admin-meta { color: #94a3b8; }

        body.dark-mode .receipt-items-list { background: #334155; }
        body.dark-mode .receipt-item { background: #1e293b; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
        body.dark-mode .receipt-item-description { color: #e2e8f0; }
        body.dark-mode .receipt-item-meta { color: #94a3b8; }
        body.dark-mode .receipt-item-price { color: #e2e8f0; }
        body.dark-mode .receipt-item-actions button { color: #94a3b8; }
        body.dark-mode .receipt-item-actions button:hover { background: #334155; color: #e2e8f0; }
        body.dark-mode .receipt-item-photo { background: #475569; }

        body.dark-mode .receipt-section { border-bottom-color: #334155; }
        body.dark-mode .receipt-section h3 { color: #e2e8f0; }
        body.dark-mode .receipt-customer-form label { color: #94a3b8; }
        body.dark-mode .labor-section { background: #172033; }
        body.dark-mode .labor-label { color: #e2e8f0; }
        body.dark-mode .labor-cost { color: #e2e8f0; }
        body.dark-mode .tax-section { background: #2a1f0b; }
        body.dark-mode .tax-label { color: #fbbf24; }
        body.dark-mode .tax-rate { color: #fbbf24; }
        body.dark-mode .tax-rate input { background: #1e293b; border-color: #fbbf24; color: #fbbf24; }
        body.dark-mode .discount-section { background: linear-gradient(135deg, #052e16 0%, #064e3b 100%); }
        body.dark-mode .discount-toggle-text strong { color: #34d399; }
        body.dark-mode .discount-note { color: #6ee7b7; }

        body.dark-mode .settings-form label { color: #e2e8f0; }
        body.dark-mode .change-password-form label { color: #e2e8f0; }

        body.dark-mode .bottom-nav { background: #1e293b; border-top-color: #334155; box-shadow: 0 -2px 10px rgba(0,0,0,0.3); }
        body.dark-mode .bottom-nav-item { color: #64748b; }
        body.dark-mode .bottom-nav-item.active { color: #4a9fff; }

        body.dark-mode .contact-sub-tabs { background: #334155; }
        body.dark-mode .contact-sub-tab { color: #94a3b8; }
        body.dark-mode .contact-sub-tab.active { background: #1e293b; color: #e2e8f0; }
        body.dark-mode .contact-sub-tab .tab-count { background: #475569; color: #94a3b8; }

        body.dark-mode .fin-period-toggle { background: #334155; }
        body.dark-mode .fin-period-btn { color: #94a3b8; }
        body.dark-mode .fin-period-btn.active { background: #1e293b; color: #e2e8f0; }
        body.dark-mode .fin-invoice-stat { background: #334155; }
        body.dark-mode .fin-invoice-label { color: #94a3b8; }

        body.dark-mode .contact-card { background: #1e293b; border-color: #334155; }
        body.dark-mode .contact-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
        body.dark-mode .contact-name { color: #e2e8f0; }
        body.dark-mode .contact-meta { color: #94a3b8; }
        body.dark-mode .contact-vehicle { color: #94a3b8; }
        body.dark-mode .contact-action-btn { background: #1e293b; color: #94a3b8; border-color: #475569; }
        body.dark-mode .contact-action-btn:hover { background: #334155; border-color: #64748b; }

        body.dark-mode .call-item { background: #1e293b; border-color: #334155; }
        body.dark-mode .call-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
        body.dark-mode .call-item-name { color: #e2e8f0; }
        body.dark-mode .call-item-detail { color: #94a3b8; }
        body.dark-mode .call-action-btn { background: #1e293b; color: #94a3b8; border-color: #475569; }
        body.dark-mode .call-action-btn:hover { background: #334155; }
        body.dark-mode .call-section-label { color: #64748b; }

        body.dark-mode #calViewButtons { background: #1e293b; }
        body.dark-mode .cal-grid { background: #334155; }
        body.dark-mode .cal-header { background: #0f172a; }
        body.dark-mode .cal-day { background: #1e293b; }
        body.dark-mode .cal-day:hover { background: #253348; }
        body.dark-mode .cal-day.is-today { background: #172033; }
        body.dark-mode .cal-day-num { color: #94a3b8; }

        body.dark-mode .sched-type-btn { background: #1e293b; color: #94a3b8; border-color: #475569; }
        body.dark-mode .sched-type-btn:hover { border-color: #64748b; }

        body.dark-mode .job-popover { background: #1e293b; border-color: #334155; box-shadow: 0 8px 30px rgba(0,0,0,0.4); }
        body.dark-mode .job-popover-title { color: #e2e8f0; }
        body.dark-mode .job-popover-row { color: #94a3b8; }
        body.dark-mode .job-popover-label { color: #e2e8f0; }
        body.dark-mode .job-popover-actions { border-top-color: #334155; }
        body.dark-mode .job-popover-actions a, body.dark-mode .job-popover-actions button { background: #1e293b; color: #94a3b8; border-color: #475569; }
        body.dark-mode .job-popover-actions a:hover, body.dark-mode .job-popover-actions button:hover { background: #334155; }

        body.dark-mode .perm-section { background: #334155; }
        body.dark-mode .perm-section h4 { color: #e2e8f0; }
        body.dark-mode .perm-grid label { color: #e2e8f0; }
        body.dark-mode .role-card { background: #334155; }
        body.dark-mode .role-card-name { color: #e2e8f0; }
        body.dark-mode .role-card-meta { color: #94a3b8; }
        body.dark-mode .role-select { background: #1e293b; color: #e2e8f0; border-color: #475569; }
        body.dark-mode .btn-toggle-active { background: #1e293b; color: #e2e8f0; border-color: #475569; }

        body.dark-mode .no-data { color: #94a3b8; }
        body.dark-mode .btn-view { background: #172033; color: #60a5fa; }
        body.dark-mode .btn-view:hover { background: #1e3a5f; }
        body.dark-mode .status-select { background: #1e293b; color: #e2e8f0; border-color: #475569; }

        body.dark-mode .upload-btn { border-color: #475569; color: #94a3b8; }
        body.dark-mode .upload-btn:hover { border-color: #4a9fff; color: #4a9fff; background: #172033; }
        body.dark-mode .post-call-btn { background: #1e293b; border-color: #334155; }
        body.dark-mode .post-call-btn:hover { background: #334155; }

        body.dark-mode .password-error { background: #451a1a; color: #f87171; }
        body.dark-mode .password-success { background: #052e16; color: #34d399; }

        body.dark-mode .extracted-items-list { border-color: #334155; }
        body.dark-mode .extracted-item { border-bottom-color: #334155; }
        body.dark-mode .extracted-item-desc { color: #e2e8f0; }
        body.dark-mode .extracted-item-price { color: #94a3b8; }
        body.dark-mode .extracted-item-price input { background: #1e293b; color: #e2e8f0; border-color: #475569; }

        body.dark-mode .btn-delete { background: #451a1a; color: #f87171; }
        body.dark-mode .btn-delete:hover { background: #5c1a1a; }
        body.dark-mode .btn-delete-admin { background: #451a1a; color: #f87171; }
        body.dark-mode .btn-delete-admin:hover { background: #5c1a1a; }

        /* Quotes table dark mode */
        body.dark-mode table th { color: #94a3b8 !important; border-bottom-color: #334155 !important; }
        body.dark-mode table td { color: #e2e8f0; border-bottom-color: #334155; }

        /* Message thread dark mode */
        body.dark-mode #msgConvoList { border-right-color: #334155; }
        body.dark-mode #msgThreadHeader { color: #e2e8f0; border-bottom-color: #334155; }
        body.dark-mode #msgComposer { border-top-color: #334155; }

        /* Override common inline style colors in dark mode */
        body.dark-mode [style*="color: #6b7280"],
        body.dark-mode [style*="color:#6b7280"] { color: #94a3b8 !important; }
        body.dark-mode [style*="color: #1f2937"],
        body.dark-mode [style*="color:#1f2937"] { color: #e2e8f0 !important; }
        body.dark-mode [style*="color: #374151"],
        body.dark-mode [style*="color:#374151"] { color: #cbd5e1 !important; }
        body.dark-mode [style*="color: #1a2d4a"],
        body.dark-mode [style*="color:#1a2d4a"] { color: #e2e8f0 !important; }
        body.dark-mode [style*="border: 2px solid #e2e8f0"],
        body.dark-mode [style*="border:2px solid #e2e8f0"],
        body.dark-mode [style*="border: 1px solid #d1d5db"],
        body.dark-mode [style*="border:1px solid #d1d5db"] { border-color: #475569 !important; }
        body.dark-mode [style*="background: #f8fafc"],
        body.dark-mode [style*="background:#f8fafc"] { background: #334155 !important; }

        body.dark-mode h2, body.dark-mode h3, body.dark-mode h4 { color: #e2e8f0; }
        body.dark-mode p { color: #cbd5e1; }
        body.dark-mode small { color: #94a3b8 !important; }
        body.dark-mode hr { border-top-color: #334155 !important; }

        /* Dark mode toggle in settings */
        .dark-mode-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 20px;
            cursor: pointer;
            color: #374151;
            font-size: 0.95rem;
            transition: background 0.2s;
        }
        .dark-mode-toggle:hover { background: #f3f4f6; }
        body.dark-mode .dark-mode-toggle { color: #e2e8f0; }
        body.dark-mode .dark-mode-toggle:hover { background: #334155; }

        /* Tax suite dark mode */
        body.dark-mode #finExpensesView,
        body.dark-mode #finPartsView,
        body.dark-mode #finMileageView,
        body.dark-mode #finTaxView { color: #e2e8f0; }
        body.dark-mode #finExpensesView [style*="border-bottom:1px solid #f1f5f9"],
        body.dark-mode #finPartsView [style*="border-bottom:1px solid #f1f5f9"],
        body.dark-mode #finMileageView [style*="border-bottom:1px solid #f1f5f9"] { border-bottom-color: #334155 !important; }
        body.dark-mode #finExpensesView [style*="color:#1e293b"],
        body.dark-mode #finPartsView [style*="color:#1e293b"],
        body.dark-mode #finMileageView [style*="color:#1e293b"] { color: #e2e8f0 !important; }
        body.dark-mode #finExpensesView [style*="color:#64748b"],
        body.dark-mode #finPartsView [style*="color:#64748b"],
        body.dark-mode #finMileageView [style*="color:#64748b"] { color: #94a3b8 !important; }
        body.dark-mode #finExpensesView select,
        body.dark-mode #finPartsView select,
        body.dark-mode #finMileageView select,
        body.dark-mode #finTaxView select { background: #1e293b; color: #e2e8f0; border-color: #475569; }
        body.dark-mode #inventorySummaryBar { background: linear-gradient(135deg,#172033,#1e3a5f) !important; }
        body.dark-mode #inventorySummaryBar span { color: #93c5fd !important; }
        body.dark-mode #inventoryScanModal .modal-content,
        body.dark-mode #inventoryPickerModal .modal-content { background: #1e293b; color: #e2e8f0; }
        body.dark-mode #inventoryScanModal input,
        body.dark-mode #inventoryPickerModal input { background: #0f172a; color: #e2e8f0; border-color: #475569; }
        body.dark-mode #invScanStep3 [style*="background:#f8fafc"] { background: #0f172a !important; }
        body.dark-mode #taxReportContent [style*="background:#f0fdf4"] { background: #052e16 !important; }
        body.dark-mode #taxReportContent [style*="background:#fef2f2"] { background: #451a1a !important; }
        body.dark-mode #taxReportContent [style*="background:#eff6ff"] { background: #172033 !important; }
        body.dark-mode #taxReportContent [style*="background:#faf5ff"] { background: #2e1065 !important; }
        body.dark-mode #taxReportContent [style*="background:#fff"] { background: #1e293b !important; border-color: #334155 !important; }
        body.dark-mode #taxReportContent [style*="border-bottom:1px solid #f1f5f9"] { border-bottom-color: #334155 !important; }
        body.dark-mode #taxReportContent [style*="border-top:1px solid #bbf7d0"] { border-top-color: #064e3b !important; }
        body.dark-mode #taxReportContent [style*="border-top:1px solid #fecaca"] { border-top-color: #7f1d1d !important; }
        body.dark-mode #taxReportContent [style*="border-top:1px solid #e9d5ff"] { border-top-color: #581c87 !important; }
        body.dark-mode #expenseModal input,
        body.dark-mode #expenseModal select,
        body.dark-mode #mileageModal input { background: #1e293b; color: #e2e8f0; border-color: #475569; }
        body.dark-mode #expenseModal label,
        body.dark-mode #mileageModal label { color: #94a3b8 !important; }
        body.dark-mode #expenseDeleteBtn,
        body.dark-mode #mileageDeleteBtn { background: #451a1a !important; border-color: #7f1d1d !important; }

        .toggle-switch {
            position: relative;
            width: 40px;
            height: 22px;
            background: #d1d5db;
            border-radius: 11px;
            transition: background 0.2s;
            flex-shrink: 0;
        }
        .toggle-switch::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 18px;
            height: 18px;
            background: white;
            border-radius: 50%;
            transition: transform 0.2s;
        }
        .toggle-switch.active { background: #4a9fff; }
        .toggle-switch.active::after { transform: translateX(18px); }