/* ============================================
   TOYOTA QUOTE SYSTEM - LIGHT THEME
   Professional insurance quoting interface
   ============================================ */

/* CSS Variables - Toyota Light Theme */
.theme-light {
    --toyota-red: #eb0a1e;
    --toyota-red-dark: #c20818;
    --toyota-red-light: #ff1a2e;
    --toyota-grey: #595959;
    --toyota-grey-light: #8c8c8c;
    --toyota-grey-dark: #2d2d2d;
    --body-bg: #f8f9fa;
    --content-bg: #ffffff;
    --border-color: #e5e7eb;
    --text-primary: var(--toyota-grey-dark);
    --text-secondary: var(--toyota-grey);
    --text-muted: var(--toyota-grey-light);
    --primary-color: var(--toyota-red);
    --primary-rgb: 235, 10, 30;
    --primary-light: rgba(235, 10, 30, 0.05);
    --primary-border: rgba(235, 10, 30, 0.2);
    --success: #22c55e;
    --danger: var(--toyota-red);
    --warning: #f59e0b;
    --nav-hover: rgba(235, 10, 30, 0.05);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Quote Dialog Variables */
.theme-light {
    --qpd-toyota-red: #eb0a1e;
    --qpd-toyota-red-dark: #c20818;
    --qpd-bg-overlay: rgba(0, 0, 0, 0.6);
    --qpd-bg-modal: #ffffff;
    --qpd-bg-timeline: #f8fafc;
    --qpd-border: #e2e8f0;
    --qpd-text: #1e293b;
    --qpd-text-sec: #64748b;
    --qpd-text-muted: #94a3b8;
    --qpd-success: #10b981;
    --qpd-danger: #ef4444;
    --qpd-info: #3b82f6;
}

    /* ============================================
   BASE LAYOUT - Light Theme
   ============================================ */
    .theme-light .qp-quote-page {
        background: #f8f9fa;
    }

    /* ============================================
   HEADER SECTION - Light Professional
   ============================================ */
    .theme-light .qp-quote-header {
        background: white;
        border-bottom: 1px solid #e5e7eb;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .theme-light .qp-header-content {
        background: white;
        border: 1px solid #e5e7eb;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

        .theme-light .qp-header-content.qp-sticky {
            background: white;
            border-bottom: 1px solid #e5e7eb;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

    /* Quote Number Badge - Light */
    .theme-light .qp-quote-number {
        background: linear-gradient(135deg, var(--toyota-red) 0%, var(--toyota-red-dark) 100%);
        color: white;
        box-shadow: 0 2px 8px rgba(235, 10, 30, 0.25);
    }

        .theme-light .qp-quote-number:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(235, 10, 30, 0.35);
        }

    /* Broker Info - Light */
    .theme-light .qp-broker-info {
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        color: var(--toyota-grey-dark);
    }

        .theme-light .qp-broker-info:hover {
            background: rgba(235, 10, 30, 0.05);
            border-color: var(--toyota-red);
        }

    .theme-light .qp-consultant-info {
        border-left-color: #e5e7eb;
        color: var(--toyota-grey);
    }

    .theme-light .qp-consultant-code {
        background: rgba(235, 10, 30, 0.1);
        color: var(--toyota-red);
    }

        .theme-light .qp-consultant-code.qp-na {
            background: #f3f4f6;
            color: var(--toyota-grey-light);
        }

    /* ============================================
   PANELS - Light Theme Cards
   ============================================ */
    .theme-light .qp-left-panel,
    .theme-light .qp-right-panel {
        background: white;
        border: 1px solid #e5e7eb;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .theme-light .qp-panel-header {
        background: #fafafa;
    }

        .theme-light .qp-panel-header h3 {
            color: var(--toyota-grey-dark);
        }

    /* Collapse Button - Light */
    .theme-light .qp-btn-collapse {
        background: rgba(235, 10, 30, 0.05);
        color: var(--toyota-red);
        border: 1px solid rgba(235, 10, 30, 0.2);
    }

        .theme-light .qp-btn-collapse:hover {
            background: var(--toyota-red);
            color: white;
        }

    /* Collapsed Indicators - Light */
    .theme-light .qp-collapsed-indicator {
        background: white;
        border: 1px solid #e5e7eb;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

        .theme-light .qp-collapsed-indicator:hover {
            background: rgba(235, 10, 30, 0.05);
            border-color: var(--toyota-red);
        }

        .theme-light .qp-collapsed-indicator i {
            color: var(--toyota-red);
        }

        .theme-light .qp-collapsed-indicator span {
            color: var(--toyota-grey-dark);
        }

    /* ============================================
   TABS - Light Theme Navigation
   ============================================ */
    .theme-light .qp-tab-button {
        color: var(--toyota-grey);
        background: transparent;
    }

        .theme-light .qp-tab-button:hover {
            background: rgba(235, 10, 30, 0.05);
            color: var(--toyota-red);
        }

        .theme-light .qp-tab-button.qp-active {
            background: linear-gradient(135deg, var(--toyota-red) 0%, var(--toyota-red-dark) 100%);
            color: white;
            box-shadow: 0 2px 8px rgba(235, 10, 30, 0.25);
        }

    /* ============================================
   VALIDATION CONTAINER - Light Theme
   ============================================ */
    .theme-light .qp-quote-validation-container {
        background: white;
        border: 1px solid #e5e7eb;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .theme-light .qp-quote-validation-header {
        background: linear-gradient(135deg, var(--toyota-red) 0%, var(--toyota-red-dark) 100%);
        border-bottom: none;
    }

    .theme-light .qp-quote-validation-icon-wrapper {
        background: white;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

        .theme-light .qp-quote-validation-icon-wrapper i {
            color: var(--toyota-red);
        }

    .theme-light .qp-quote-validation-header-text h4 {
        color: white;
    }

    .theme-light .qp-quote-validation-header-text p {
        color: rgba(255, 255, 255, 0.95);
    }

    .theme-light .qp-quote-validation-field-item {
        background: #fef2f2;
        border: 1px solid #fca5a5;
    }

    .theme-light .qp-quote-validation-field-icon {
        background: var(--toyota-red);
    }

        .theme-light .qp-quote-validation-field-icon i {
            color: white;
        }

    .theme-light .qp-quote-validation-field-text {
        color: #991b1b;
        font-weight: 600;
    }

    /* ============================================
   MODAL STYLES - Light Professional
   ============================================ */
    .theme-light .qp-modal-overlay {
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
    }

    .theme-light .qp-modal {
        background: white;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
        border: 1px solid #e5e7eb;
    }

    .theme-light .qp-modal-header {
        background: #fafafa;
        border-bottom: 3px solid var(--toyota-red);
    }

    .theme-light .qp-modal-title h3 {
        color: var(--toyota-grey-dark);
    }

    .theme-light .qp-modal-title i {
        color: var(--toyota-red);
    }

    .theme-light .qp-modal-body {
        background: white;
    }

    .theme-light .qp-modal-footer {
        background: #fafafa;
        border-top: 1px solid #e5e7eb;
    }

    /* ============================================
   BUTTONS - Light Theme
   ============================================ */
    .theme-light .qp-btn-primary {
        background: linear-gradient(135deg, var(--toyota-red) 0%, var(--toyota-red-dark) 100%);
        color: white;
        box-shadow: 0 2px 8px rgba(235, 10, 30, 0.25);
    }

        .theme-light .qp-btn-primary:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(235, 10, 30, 0.35);
        }

    .theme-light .qp-btn-secondary {
        background: white;
        color: var(--toyota-grey-dark);
        border: 1px solid #e5e7eb;
    }

        .theme-light .qp-btn-secondary:hover:not(:disabled) {
            background: #f9fafb;
            border-color: var(--toyota-red);
            color: var(--toyota-red);
        }

    .theme-light .qp-btn-revert {
        background: white;
        color: var(--qpd-toyota-red);
        border: 2px solid var(--qpd-toyota-red);
    }

        .theme-light .qp-btn-revert:hover {
            background: var(--qpd-toyota-red);
            color: white;
        }

    /* ============================================
   FORM ELEMENTS - Light Theme
   ============================================ */
    .theme-light .qp-form-group label {
        color: var(--toyota-grey-dark);
    }

    .theme-light .qp-form-control {
        background: white;
        border: 1px solid #e5e7eb;
        color: var(--toyota-grey-dark);
    }

        .theme-light .qp-form-control:focus {
            border-color: var(--toyota-red);
            box-shadow: 0 0 0 3px rgba(235, 10, 30, 0.1);
            background: white;
        }

        .theme-light .qp-form-control::placeholder {
            color: var(--toyota-grey-light);
        }

    .theme-light .form-select,
    .theme-light .form-control {
        background: white;
        border: 1px solid #e5e7eb;
        color: var(--toyota-grey-dark);
    }

        .theme-light .form-select:focus,
        .theme-light .form-control:focus {
            border-color: var(--toyota-red);
            box-shadow: 0 0 0 3px rgba(235, 10, 30, 0.1);
        }

    .theme-light .form-group label {
        color: var(--toyota-grey-dark);
    }

    /* ============================================
   TOAST NOTIFICATIONS - Light Theme
   ============================================ */
    .theme-light .qp-toast {
        background: white;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        color: var(--toyota-grey-dark);
        border: 1px solid #e5e7eb;
    }

    .theme-light .qp-toast-success {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        border-left: 4px solid #16a34a;
        color: white;
    }

    .theme-light .qp-toast-error {
        background: linear-gradient(135deg, var(--toyota-red) 0%, var(--toyota-red-dark) 100%);
        border-left: 4px solid var(--toyota-red-dark);
        color: white;
    }

    .theme-light .qp-toast-info {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        border-left: 4px solid #2563eb;
        color: white;
    }

    .theme-light .qp-toast-progress {
        background: rgba(255, 255, 255, 0.3);
    }

    /* ============================================
   QUOTE DETAILS - Light Theme Additions
   ============================================ */

    /* Products Container */
    .theme-light .products-container {
        background: white;
    }

    .theme-light .section-header {
        background: white;
    }

        .theme-light .section-header h2 {
            color: var(--toyota-grey-dark);
        }

        .theme-light .section-header p {
            color: var(--toyota-grey);
        }

    /* Product Cards */
    .theme-light .products-grid {
        gap: 1.5rem;
    }

    .theme-light .product-card-main {
        background: white;
        border: 2px solid #e5e7eb;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

        .theme-light .product-card-main:hover {
            border-color: var(--toyota-red);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        }

        .theme-light .product-card-main.selected {
            border-color: var(--toyota-red);
            background: rgba(235, 10, 30, 0.02);
        }

        .theme-light .product-card-main .product-title {
            color: var(--toyota-grey-dark);
        }

        .theme-light .product-card-main .product-description {
            color: var(--toyota-grey);
        }

        .theme-light .product-card-main .icon-container {
            background: rgba(235, 10, 30, 0.1);
        }

            .theme-light .product-card-main .icon-container i {
                color: var(--toyota-red);
            }

    /* Quote Details Container */
    .theme-light .qd-container {
        background: white;
    }

    .theme-light .qd-header {
        background: white;
    }

    .theme-light .qd-section-title h2 {
        color: var(--toyota-grey-dark);
    }

    .theme-light .qd-section-title p {
        color: var(--toyota-grey);
    }

    /* Unsaved Changes Banner */
    .theme-light .qd-unsaved-banner {
        background: #fef3c7;
        border: 2px solid #fbbf24;
    }

    .theme-light .qd-unsaved-icon {
        background: #f59e0b;
    }

    .theme-light .qd-unsaved-title {
        color: #92400e;
    }

    .theme-light .qd-unsaved-message {
        color: #92400e;
    }

    /* Item Cards */
    .theme-light .qd-item-card {
        background: white;
        border: 1px solid #e5e7eb;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

        .theme-light .qd-item-card:hover {
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
            border-color: var(--toyota-red);
        }

    .theme-light .qd-item-header {
        background: linear-gradient(135deg, var(--toyota-red) 0%, var(--toyota-red-dark) 100%);
    }

    .theme-light .qd-item-type {
        color: white;
    }

    .theme-light .qd-vehicle-info h3,
    .theme-light .qd-motorcycle-info h3,
    .theme-light .qd-household-info h3 {
        color: var(--toyota-grey-dark);
    }

    .theme-light .qd-variant {
        color: var(--toyota-grey);
    }

    .theme-light .qd-label {
        color: var(--toyota-grey);
    }

    .theme-light .qd-value {
        color: var(--toyota-grey-dark);
    }

    /* Summary Panel */
    .theme-light .qd-summary-panel {
        background: white;
        border: 1px solid #e5e7eb;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .theme-light .qd-summary-header {
        background: #fafafa;
    }

        .theme-light .qd-summary-header h3 {
            color: var(--toyota-grey-dark);
        }

    /* Action Buttons */
    .theme-light .qd-primary-btn {
        background: linear-gradient(135deg, var(--toyota-red) 0%, var(--toyota-red-dark) 100%);
        color: white;
        box-shadow: 0 2px 8px rgba(235, 10, 30, 0.25);
    }

        .theme-light .qd-primary-btn:hover:not(:disabled) {
            box-shadow: 0 6px 16px rgba(235, 10, 30, 0.35);
        }

    .theme-light .qd-secondary-btn {
        background: white;
        color: var(--toyota-grey-dark);
        border: 1px solid #e5e7eb;
    }

        .theme-light .qd-secondary-btn:hover:not(:disabled) {
            background: rgba(235, 10, 30, 0.05);
            border-color: var(--toyota-red);
            color: var(--toyota-red);
        }

    /* Empty State */
    .theme-light .qd-empty-state {
        background: white;
    }

        .theme-light .qd-empty-state h3 {
            color: var(--toyota-grey-dark);
        }

        .theme-light .qd-empty-state p {
            color: var(--toyota-grey);
        }

    .theme-light .qd-empty-icon {
        background: rgba(235, 10, 30, 0.1);
    }

        .theme-light .qd-empty-icon i {
            color: var(--toyota-red);
        }

    /* ============================================
   HISTORY TIMELINE - Light Theme
   ============================================ */
    .theme-light .qp-history-timeline {
        background: white;
    }

        .theme-light .qp-history-timeline::before {
            background: #e2e8f0;
        }

    .theme-light .qp-timeline-item {
        border-left-color: #e5e7eb;
    }

        .theme-light .qp-timeline-item.qp-active {
            border-left-color: var(--toyota-red);
        }

    .theme-light .qp-timeline-marker {
        background: white;
        border-color: #e5e7eb;
    }

    .theme-light .qp-timeline-item.qp-active .qp-timeline-marker {
        background: var(--toyota-red);
        border-color: var(--toyota-red);
    }

    .theme-light .qp-timeline-content {
        background: var(--qpd-bg-timeline);
        border: 1px solid var(--qpd-border);
    }

    .theme-light .qp-timeline-item.qp-active .qp-timeline-content {
        background: white;
        border-color: var(--qpd-toyota-red);
        box-shadow: 0 4px 12px rgba(235, 10, 30, 0.15);
    }

    .theme-light .qp-version-number {
        color: var(--toyota-red);
    }

    .theme-light .qp-version-date,
    .theme-light .qp-version-author {
        color: var(--toyota-grey);
    }

    /* Change Item */
    .theme-light .qp-change-item {
        background: white;
        border: 1px solid var(--qpd-border);
    }

        .theme-light .qp-change-item:hover {
            background: #fafafa;
            border-color: var(--qpd-toyota-red);
        }

    .theme-light .qp-change-icon {
        background: linear-gradient(135deg, var(--qpd-toyota-red), var(--qpd-toyota-red-dark));
        color: white;
    }

    .theme-light .qp-change-description {
        color: var(--qpd-text);
    }

    .theme-light .qp-old-value {
        background: #fee2e2;
        color: var(--qpd-danger);
        border: 1px solid var(--qpd-danger);
    }

    .theme-light .qp-new-value {
        background: #d1fae5;
        color: var(--qpd-success);
        border: 1px solid var(--qpd-success);
    }

    .theme-light .qp-change-meta {
        color: var(--qpd-text-muted);
    }

    /* Status Badges */
    .theme-light .qd-status.pending {
        background: #fef3c7;
        color: #92400e;
    }

    .theme-light .qd-status.concluded {
        background: #d1fae5;
        color: #065f46;
    }

    .theme-light .qd-status.processing {
        background: #dbeafe;
        color: #1e40af;
    }

    /* Back Button */
    .theme-light .back-button {
        background: white;
        border: 1px solid #e5e7eb;
        color: var(--toyota-grey-dark);
    }

        .theme-light .back-button:hover {
            background: rgba(235, 10, 30, 0.05);
            border-color: var(--toyota-red);
            color: var(--toyota-red);
        }

    /* ============================================
   SCROLLBAR STYLING - Light Theme
   ============================================ */
    .theme-light .qp-panel-content::-webkit-scrollbar-track,
    .theme-light .qp-tab-content::-webkit-scrollbar-track,
    .theme-light .qp-modal-body::-webkit-scrollbar-track {
        background: #f3f4f6;
    }

    .theme-light .qp-panel-content::-webkit-scrollbar-thumb,
    .theme-light .qp-tab-content::-webkit-scrollbar-thumb,
    .theme-light .qp-modal-body::-webkit-scrollbar-thumb {
        background: #d1d5db;
    }

        .theme-light .qp-panel-content::-webkit-scrollbar-thumb:hover,
        .theme-light .qp-tab-content::-webkit-scrollbar-thumb:hover,
        .theme-light .qp-modal-body::-webkit-scrollbar-thumb:hover {
            background: var(--toyota-red);
        }

/* ============================================
   RESPONSIVE ADJUSTMENTS - Light Theme
   ============================================ */
@media (max-width: 768px) {
    .theme-light .qp-header-content {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .theme-light .qp-panel-header {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .theme-light .qp-toast {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    }
}

/* ============================================
   PRINT STYLES - Light Theme
   ============================================ */
@media print {
    .theme-light .qp-quote-page {
        background: white;
    }

    .theme-light .qp-left-panel,
    .theme-light .qp-right-panel {
        border: 1px solid #e5e7eb;
        box-shadow: none;
    }

    .theme-light .qp-btn,
    .theme-light .qp-tab-buttons {
        display: none;
    }
}

/* ============================================
   ACCESSIBILITY - Light Theme
   ============================================ */
.theme-light .qp-modal *:focus-visible {
    outline: 2px solid var(--qpd-toyota-red);
    outline-offset: 2px;
}
/* ============================================
   TOYOTA QUOTE SYSTEM - DARK THEME
   Professional insurance quoting interface
   ============================================ */

/* CSS Variables - Toyota Dark Theme */
.theme-dark {
    --toyota-red: #eb0a1e;
    --toyota-red-dark: #c20818;
    --toyota-red-light: #ff1a2e;
    --toyota-grey: #595959;
    --toyota-grey-light: #8c8c8c;
    --toyota-grey-dark: #2d2d2d;
    --toyota-charcoal: #1a1a1a;
    --body-bg: #0f0f0f;
    --content-bg: linear-gradient(135deg, var(--toyota-grey-dark) 0%, var(--toyota-charcoal) 100%);
    --border-color: rgba(255, 255, 255, 0.1);
    --text-primary: rgba(255, 255, 255, 0.95);
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.5);
    --primary-color: var(--toyota-red);
    --primary-rgb: 235, 10, 30;
    --primary-light: rgba(235, 10, 30, 0.1);
    --primary-border: rgba(235, 10, 30, 0.3);
    --success: #22c55e;
    --danger: var(--toyota-red);
    --warning: #f59e0b;
    --nav-hover: rgba(235, 10, 30, 0.1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Quote Dialog Variables */
.theme-dark {
    --qpd-toyota-red: #eb0a1e;
    --qpd-toyota-red-dark: #c20818;
    --qpd-toyota-red-light: #ff1a2e;
    --qpd-bg-overlay: rgba(0, 0, 0, 0.8);
    --qpd-bg-modal: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
    --qpd-bg-modal-solid: #1a1a1a;
    --qpd-bg-timeline: rgba(255, 255, 255, 0.03);
    --qpd-border: rgba(255, 255, 255, 0.1);
    --qpd-text: rgba(255, 255, 255, 0.95);
    --qpd-text-sec: rgba(255, 255, 255, 0.7);
    --qpd-text-muted: rgba(255, 255, 255, 0.5);
    --qpd-success: #22c55e;
    --qpd-danger: #ef4444;
    --qpd-info: #3b82f6;
}

    /* ============================================
   BASE LAYOUT - Dark Theme
   ============================================ */
    .theme-dark .qp-quote-page {
        background: #0f0f0f;
    }

    /* ============================================
   HEADER SECTION - Dark Professional
   ============================================ */
    .theme-dark .qp-quote-header {
        background: linear-gradient(135deg, var(--toyota-grey-dark) 0%, var(--toyota-charcoal) 100%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .theme-dark .qp-header-content {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

        .theme-dark .qp-header-content.qp-sticky {
            background: var(--toyota-grey-dark);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

    /* Quote Number Badge - Dark */
    .theme-dark .qp-quote-number {
        background: linear-gradient(135deg, var(--toyota-red) 0%, var(--toyota-red-dark) 100%);
        color: white;
        box-shadow: 0 2px 8px rgba(235, 10, 30, 0.3);
    }

        .theme-dark .qp-quote-number:hover {
            box-shadow: 0 6px 16px rgba(235, 10, 30, 0.4);
        }

    /* Broker Info - Dark */
    .theme-dark .qp-broker-info {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.9);
    }

        .theme-dark .qp-broker-info:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: var(--toyota-red);
        }

    .theme-dark .qp-consultant-info {
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        color: rgba(255, 255, 255, 0.7);
    }

    .theme-dark .qp-consultant-code {
        background: rgba(235, 10, 30, 0.1);
        color: var(--toyota-red);
    }

        .theme-dark .qp-consultant-code.qp-na {
            background: rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.5);
        }

    /* ============================================
   PANELS - Dark Theme Cards
   ============================================ */
    .theme-dark .qp-left-panel,
    .theme-dark .qp-right-panel {
        background: linear-gradient(135deg, var(--toyota-grey-dark) 0%, var(--toyota-charcoal) 100%);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .theme-dark .qp-panel-header {
        border-bottom: 2px solid var(--toyota-red);
        background: rgba(0, 0, 0, 0.2);
    }

        .theme-dark .qp-panel-header h3 {
            color: white;
        }

    /* Collapse Button - Dark */
    .theme-dark .qp-btn-collapse {
        background: rgba(235, 10, 30, 0.1);
        color: var(--toyota-red);
        border: 1px solid rgba(235, 10, 30, 0.3);
    }

        .theme-dark .qp-btn-collapse:hover {
            background: var(--toyota-red);
            color: white;
            border-color: var(--toyota-red);
        }

    /* Collapsed Indicators - Dark */
    .theme-dark .qp-collapsed-indicator {
        background: linear-gradient(135deg, var(--toyota-grey-dark) 0%, var(--toyota-charcoal) 100%);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

        .theme-dark .qp-collapsed-indicator:hover {
            background: rgba(235, 10, 30, 0.1);
            border-color: var(--toyota-red);
        }

        .theme-dark .qp-collapsed-indicator i {
            color: var(--toyota-red);
        }

        .theme-dark .qp-collapsed-indicator span {
            color: white;
        }

    /* ============================================
   TABS - Dark Theme Navigation
   ============================================ */
    .theme-dark .qp-tab-button {
        background: transparent;
        color: rgba(255, 255, 255, 0.7);
    }

        .theme-dark .qp-tab-button:hover {
            background: rgba(235, 10, 30, 0.1);
            color: var(--toyota-red);
        }

        .theme-dark .qp-tab-button.qp-active {
            background: linear-gradient(135deg, var(--toyota-red) 0%, var(--toyota-red-dark) 100%);
            border-color: var(--toyota-red);
            color: white;
            box-shadow: 0 2px 8px rgba(235, 10, 30, 0.3);
        }

    /* ============================================
   VALIDATION CONTAINER - Dark Theme
   ============================================ */
    .theme-dark .qp-quote-validation-container {
        background: linear-gradient(135deg, var(--toyota-grey-dark) 0%, var(--toyota-charcoal) 100%);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .theme-dark .qp-quote-validation-header {
        border-bottom: 2px solid var(--toyota-red);
        background: rgba(235, 10, 30, 0.1);
    }

    .theme-dark .qp-quote-validation-icon-wrapper {
        background: var(--toyota-red);
        box-shadow: 0 4px 12px rgba(235, 10, 30, 0.3);
    }

        .theme-dark .qp-quote-validation-icon-wrapper i {
            color: white;
        }

    .theme-dark .qp-quote-validation-header-text h4 {
        color: white;
    }

    .theme-dark .qp-quote-validation-header-text p {
        color: rgba(255, 255, 255, 0.85);
    }

    .theme-dark .qp-quote-validation-field-item {
        background: rgba(235, 10, 30, 0.05);
        border: 1px solid rgba(235, 10, 30, 0.2);
    }

    .theme-dark .qp-quote-validation-field-icon {
        background: var(--toyota-red);
    }

        .theme-dark .qp-quote-validation-field-icon i {
            color: white;
        }

    .theme-dark .qp-quote-validation-field-text {
        color: white;
    }

    /* ============================================
   MODAL STYLES - Dark Professional
   ============================================ */
    .theme-dark .qp-modal-overlay {
        background: var(--qpd-bg-overlay);
        backdrop-filter: blur(8px);
    }

    .theme-dark .qp-modal {
        background: var(--qpd-bg-modal);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .theme-dark .qp-modal-header {
        border-bottom: 2px solid var(--toyota-red);
        background: rgba(0, 0, 0, 0.2);
    }

    .theme-dark .qp-modal-title h3 {
        color: var(--qpd-text);
    }

    .theme-dark .qp-modal-title i {
        color: var(--qpd-toyota-red);
        filter: drop-shadow(0 0 8px rgba(235, 10, 30, 0.5));
    }

    .theme-dark .qp-modal-body {
        background: transparent;
    }

    .theme-dark .qp-modal-footer {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(0, 0, 0, 0.2);
    }

    /* ============================================
   BUTTONS - Dark Theme
   ============================================ */
    .theme-dark .qp-btn-primary {
        background: linear-gradient(135deg, var(--toyota-red) 0%, var(--toyota-red-dark) 100%);
        color: white;
        box-shadow: 0 2px 8px rgba(235, 10, 30, 0.3);
    }

        .theme-dark .qp-btn-primary:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(235, 10, 30, 0.4);
        }

    .theme-dark .qp-btn-secondary {
        background: rgba(255, 255, 255, 0.05);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

        .theme-dark .qp-btn-secondary:hover:not(:disabled) {
            background: rgba(255, 255, 255, 0.1);
            border-color: var(--toyota-red);
            color: var(--toyota-red);
        }

    .theme-dark .qp-btn-revert {
        background: rgba(235, 10, 30, 0.1);
        color: var(--qpd-toyota-red);
        border: 2px solid var(--qpd-toyota-red);
    }

        .theme-dark .qp-btn-revert:hover {
            background: var(--qpd-toyota-red);
            color: white;
            box-shadow: 0 4px 12px rgba(235, 10, 30, 0.4), 0 0 20px rgba(235, 10, 30, 0.2);
        }

    .theme-dark .qp-btn-icon:hover {
        background: rgba(235, 10, 30, 0.2);
    }

    /* ============================================
   FORM ELEMENTS - Dark Theme
   ============================================ */
    .theme-dark .qp-form-group label {
        color: white;
    }

    .theme-dark .qp-form-control {
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.05);
        color: white;
    }

        .theme-dark .qp-form-control:focus {
            border-color: var(--toyota-red);
            box-shadow: 0 0 0 3px rgba(235, 10, 30, 0.2);
            background: rgba(255, 255, 255, 0.08);
        }

        .theme-dark .qp-form-control::placeholder {
            color: rgba(255, 255, 255, 0.4);
        }

    .theme-dark .form-select,
    .theme-dark .form-control {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: white;
    }

        .theme-dark .form-select:focus,
        .theme-dark .form-control:focus {
            border-color: var(--toyota-red);
            box-shadow: 0 0 0 3px rgba(235, 10, 30, 0.2);
        }

    /* ============================================
   TOAST NOTIFICATIONS - Dark Theme
   ============================================ */
    .theme-dark .qp-toast {
        background: var(--toyota-grey-dark);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .theme-dark .qp-toast-success {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        border-left: 4px solid #16a34a;
    }

    .theme-dark .qp-toast-error {
        background: linear-gradient(135deg, var(--toyota-red) 0%, var(--toyota-red-dark) 100%);
        border-left: 4px solid var(--toyota-red-dark);
    }

    .theme-dark .qp-toast-info {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        border-left: 4px solid #2563eb;
    }

    .theme-dark .qp-toast-progress {
        background: rgba(255, 255, 255, 0.3);
    }

    /* ============================================
   QUOTE DETAILS - Dark Theme Additions
   ============================================ */

    /* Products Container */
    .theme-dark .products-container {
        background: transparent;
    }

    .theme-dark .section-header {
        background: transparent;
    }

        .theme-dark .section-header h2 {
            color: white;
        }

        .theme-dark .section-header p {
            color: rgba(255, 255, 255, 0.7);
        }

    /* Product Cards */
    .theme-dark .product-card-main {
        background: rgba(255, 255, 255, 0.03);
        border: 2px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

        .theme-dark .product-card-main:hover {
            border-color: var(--toyota-red);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
        }

        .theme-dark .product-card-main.selected {
            border-color: var(--toyota-red);
            background: rgba(235, 10, 30, 0.05);
        }

        .theme-dark .product-card-main .product-title {
            color: white;
        }

        .theme-dark .product-card-main .product-description {
            color: rgba(255, 255, 255, 0.7);
        }

        .theme-dark .product-card-main .icon-container {
            background: rgba(235, 10, 30, 0.1);
        }

            .theme-dark .product-card-main .icon-container i {
                color: var(--toyota-red);
            }

    /* Quote Details Container */
    .theme-dark .qd-container {
        background: transparent;
    }

    .theme-dark .qd-header {
        background: transparent;
    }

    .theme-dark .qd-section-title h2 {
        color: white;
    }

    .theme-dark .qd-section-title p {
        color: rgba(255, 255, 255, 0.7);
    }

    /* Unsaved Changes Banner */
    .theme-dark .qd-unsaved-banner {
        background: rgba(245, 158, 11, 0.1);
        border: 2px solid rgba(245, 158, 11, 0.3);
    }

    .theme-dark .qd-unsaved-icon {
        background: #f59e0b;
    }

    .theme-dark .qd-unsaved-title {
        color: #fbbf24;
    }

    .theme-dark .qd-unsaved-message {
        color: rgba(255, 255, 255, 0.8);
    }

    /* Item Cards */
    .theme-dark .qd-item-card {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

        .theme-dark .qd-item-card:hover {
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
            border-color: var(--toyota-red);
        }

    .theme-dark .qd-item-header {
        background: linear-gradient(135deg, var(--toyota-red) 0%, var(--toyota-red-dark) 100%);
    }

    .theme-dark .qd-item-type {
        color: white;
    }

    .theme-dark .qd-vehicle-info h3,
    .theme-dark .qd-motorcycle-info h3,
    .theme-dark .qd-household-info h3 {
        color: white;
    }

    .theme-dark .qd-variant {
        color: rgba(255, 255, 255, 0.7);
    }

    .theme-dark .qd-label {
        color: rgba(255, 255, 255, 0.7);
    }

    .theme-dark .qd-value {
        color: white;
    }

    /* Summary Panel */
    .theme-dark .qd-summary-panel {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .theme-dark .qd-summary-header {
        background: rgba(0, 0, 0, 0.2);
    }

        .theme-dark .qd-summary-header h3 {
            color: white;
        }

    /* Action Buttons */
    .theme-dark .qd-primary-btn {
        background: linear-gradient(135deg, var(--toyota-red) 0%, var(--toyota-red-dark) 100%);
        color: white;
        box-shadow: 0 2px 8px rgba(235, 10, 30, 0.3);
    }

        .theme-dark .qd-primary-btn:hover:not(:disabled) {
            box-shadow: 0 6px 16px rgba(235, 10, 30, 0.4);
        }

    .theme-dark .qd-secondary-btn {
        background: rgba(255, 255, 255, 0.05);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

        .theme-dark .qd-secondary-btn:hover:not(:disabled) {
            background: rgba(255, 255, 255, 0.1);
            border-color: var(--toyota-red);
            color: var(--toyota-red);
        }

    /* Empty State */
    .theme-dark .qd-empty-state {
        background: rgba(255, 255, 255, 0.03);
    }

        .theme-dark .qd-empty-state h3 {
            color: white;
        }

        .theme-dark .qd-empty-state p {
            color: rgba(255, 255, 255, 0.7);
        }

    .theme-dark .qd-empty-icon {
        background: rgba(235, 10, 30, 0.1);
    }

        .theme-dark .qd-empty-icon i {
            color: var(--toyota-red);
        }

    /* ============================================
   HISTORY TIMELINE - Dark Theme
   ============================================ */
    .theme-dark .qp-history-timeline {
        background: transparent;
    }

        .theme-dark .qp-history-timeline::before {
            background: linear-gradient(to bottom, var(--qpd-toyota-red), rgba(235, 10, 30, 0.3));
        }

    .theme-dark .qp-timeline-marker {
        background: var(--qpd-bg-modal-solid);
        border-color: var(--qpd-border);
    }

    .theme-dark .qp-timeline-item.qp-active .qp-timeline-marker {
        background: var(--qpd-toyota-red);
        border-color: var(--qpd-toyota-red);
        box-shadow: 0 0 20px rgba(235, 10, 30, 0.6);
        animation: pulse-marker 2s infinite;
    }

    .theme-dark .qp-timeline-content {
        background: var(--qpd-bg-timeline);
        border: 1px solid var(--qpd-border);
    }

        .theme-dark .qp-timeline-content:hover {
            background: rgba(255, 255, 255, 0.05);
        }

    .theme-dark .qp-timeline-item.qp-active .qp-timeline-content {
        background: linear-gradient(135deg, rgba(235, 10, 30, 0.1) 0%, rgba(235, 10, 30, 0.05) 100%);
        border-color: var(--qpd-toyota-red);
        box-shadow: 0 4px 12px rgba(235, 10, 30, 0.3), 0 0 30px rgba(235, 10, 30, 0.15);
    }

    .theme-dark .qp-timeline-item.qp-active .qp-version-number {
        color: var(--qpd-toyota-red);
        text-shadow: 0 0 8px rgba(235, 10, 30, 0.3);
    }

    /* Version Info */
    .theme-dark .qp-version-number {
        color: var(--qpd-text);
    }

    .theme-dark .qp-version-date,
    .theme-dark .qp-version-author {
        color: var(--qpd-text-sec);
    }

    /* Change Item */
    .theme-dark .qp-change-item {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--qpd-border);
    }

        .theme-dark .qp-change-item:hover {
            background: rgba(235, 10, 30, 0.08);
            border-color: rgba(235, 10, 30, 0.3);
            box-shadow: 0 2px 8px rgba(235, 10, 30, 0.2);
        }

    .theme-dark .qp-change-icon {
        background: linear-gradient(135deg, var(--qpd-toyota-red), var(--qpd-toyota-red-dark));
        color: white;
        box-shadow: 0 0 15px rgba(235, 10, 30, 0.4);
    }

    .theme-dark .qp-change-description {
        color: var(--qpd-text);
    }

    .theme-dark .qp-old-value {
        background: rgba(239, 68, 68, 0.15);
        color: var(--qpd-danger);
        border: 1px solid rgba(239, 68, 68, 0.3);
    }

    .theme-dark .qp-new-value {
        background: rgba(34, 197, 94, 0.15);
        color: var(--qpd-success);
        border: 1px solid rgba(34, 197, 94, 0.3);
    }

    .theme-dark .qp-change-meta {
        color: var(--qpd-text-muted);
    }

    /* Status Badges */
    .theme-dark .qd-status.pending {
        background: rgba(245, 158, 11, 0.2);
        color: #fbbf24;
    }

    .theme-dark .qd-status.concluded {
        background: rgba(34, 197, 94, 0.2);
        color: #4ade80;
    }

    .theme-dark .qd-status.processing {
        background: rgba(59, 130, 246, 0.2);
        color: #60a5fa;
    }

    /* Back Button */
    .theme-dark .back-button {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: white;
    }

        .theme-dark .back-button:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: var(--toyota-red);
            color: var(--toyota-red);
        }

    /* ============================================
   SCROLLBAR STYLING - Dark Theme
   ============================================ */
    .theme-dark .qp-panel-content::-webkit-scrollbar-track,
    .theme-dark .qp-tab-content::-webkit-scrollbar-track,
    .theme-dark .qp-modal-body::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.2);
    }

    .theme-dark .qp-panel-content::-webkit-scrollbar-thumb,
    .theme-dark .qp-tab-content::-webkit-scrollbar-thumb,
    .theme-dark .qp-modal-body::-webkit-scrollbar-thumb {
        background: rgba(235, 10, 30, 0.5);
    }

        .theme-dark .qp-panel-content::-webkit-scrollbar-thumb:hover,
        .theme-dark .qp-tab-content::-webkit-scrollbar-thumb:hover,
        .theme-dark .qp-modal-body::-webkit-scrollbar-thumb:hover {
            background: var(--toyota-red);
        }

    /* ============================================
   ACCESSIBILITY - Dark Theme
   ============================================ */
    .theme-dark .qp-modal *:focus-visible {
        outline: 2px solid var(--qpd-toyota-red);
        outline-offset: 2px;
    }

@media (prefers-contrast: high) {
    .theme-dark {
        --qpd-border: rgba(255, 255, 255, 0.3);
        --qpd-text: #ffffff;
        --qpd-text-sec: rgba(255, 255, 255, 0.85);
    }

        .theme-dark .qp-timeline-content,
        .theme-dark .qp-change-item {
            border-width: 2px;
        }
}