/* Unified Gradient System - Modern, Soft, Close-to-Solid Design */

/*
   Based on the beautiful room-pricing-enhanced gradient style:
   - Subtle, close to solid gradients (135deg direction)
   - Minimal color variation for sophistication
   - Modern, balanced visual hierarchy
   - Compatible with light/dark themes and desktop/mobile
*/

:root {
    /* Light Theme Gradient Variables */
    --gradient-surface-light: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    --gradient-surface-elevated-light: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    --gradient-header-light: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    --gradient-toolbar-light: linear-gradient(135deg, #ffffff 0%, #f1f3f4 100%);
    --gradient-card-light: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
    --gradient-cell-light: linear-gradient(135deg, #f8f9fa 0%, #f1f3f4 100%);
    /* Comment #19: Flat design - solid olive green, no gradients */
    --gradient-primary-light: #6B8E23;
    --gradient-secondary-light: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    --gradient-success-light: linear-gradient(135deg, #28a745 0%, #20803d 100%);
    --gradient-warning-light: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    --gradient-danger-light: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    --gradient-info-light: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
}

[data-theme="dark"] {
    /* Dark Theme Gradient Variables */
    --gradient-surface-dark: linear-gradient(135deg, #2d2d30 0%, #1e1e1e 100%);
    --gradient-surface-elevated-dark: linear-gradient(135deg, #252525 0%, #2d2d30 100%);
    --gradient-header-dark: linear-gradient(135deg, #2d2d30 0%, #404040 100%);
    --gradient-toolbar-dark: linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 100%);
    --gradient-card-dark: linear-gradient(135deg, #1e1e1e 0%, #252525 100%);
    --gradient-cell-dark: linear-gradient(135deg, #2d2d30 0%, #252525 100%);
    --gradient-primary-dark: linear-gradient(135deg, #58a6ff 0%, #4c9aff 100%);
    --gradient-secondary-dark: linear-gradient(135deg, #6e7681 0%, #7d8590 100%);
    --gradient-success-dark: linear-gradient(135deg, #56d364 0%, #4ade80 100%);
    --gradient-warning-dark: linear-gradient(135deg, #f0c040 0%, #fbbf24 100%);
    --gradient-danger-dark: linear-gradient(135deg, #f85149 0%, #ef4444 100%);
    --gradient-info-dark: linear-gradient(135deg, #58a6ff 0%, #79b8ff 100%);
}

/* Universal Gradient Application Classes */

/* Surface and Background Gradients */
.gradient-surface {
    background: var(--gradient-surface-light);
}

[data-theme="dark"] .gradient-surface {
    background: var(--gradient-surface-dark);
}

.gradient-surface-elevated {
    background: var(--gradient-surface-elevated-light);
}

[data-theme="dark"] .gradient-surface-elevated {
    background: var(--gradient-surface-elevated-dark);
}

/* Header and Navigation Gradients */
.gradient-header {
    background: var(--gradient-header-light);
}

[data-theme="dark"] .gradient-header {
    background: var(--gradient-header-dark);
}

.gradient-toolbar {
    background: var(--gradient-toolbar-light);
}

[data-theme="dark"] .gradient-toolbar {
    background: var(--gradient-toolbar-dark);
}

/* Card and Cell Gradients */
.gradient-card {
    background: var(--gradient-card-light);
}

[data-theme="dark"] .gradient-card {
    background: var(--gradient-card-dark);
}

.gradient-cell {
    background: var(--gradient-cell-light);
}

[data-theme="dark"] .gradient-cell {
    background: var(--gradient-cell-dark);
}

/* Action and State Gradients */
.gradient-primary {
    background: var(--gradient-primary-light);
    color: white;
}

[data-theme="dark"] .gradient-primary {
    background: var(--gradient-primary-dark);
    color: white;
}

.gradient-secondary {
    background: var(--gradient-secondary-light);
    color: white;
}

[data-theme="dark"] .gradient-secondary {
    background: var(--gradient-secondary-dark);
    color: white;
}

.gradient-success {
    background: var(--gradient-success-light);
    color: white;
}

[data-theme="dark"] .gradient-success {
    background: var(--gradient-success-dark);
    color: white;
}

.gradient-warning {
    background: var(--gradient-warning-light);
    color: #212529;
}

[data-theme="dark"] .gradient-warning {
    background: var(--gradient-warning-dark);
    color: #1a1a1a;
}

.gradient-danger {
    background: var(--gradient-danger-light);
    color: white;
}

[data-theme="dark"] .gradient-danger {
    background: var(--gradient-danger-dark);
    color: white;
}

.gradient-info {
    background: var(--gradient-info-light);
    color: white;
}

[data-theme="dark"] .gradient-info {
    background: var(--gradient-info-dark);
    color: white;
}

/* Enhanced Bootstrap Component Integration */

/* Cards */
.card {
    background: var(--gradient-card-light);
    border: 1px solid #dee2e6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

[data-theme="dark"] .card {
    background: var(--gradient-card-dark);
    border-color: #404040;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Card Headers */
.card-header {
    background: var(--gradient-header-light);
    border-bottom: 1px solid #dee2e6;
}

[data-theme="dark"] .card-header {
    background: var(--gradient-header-dark);
    border-bottom-color: #404040;
}

/* Navbars and Navigation */
.navbar {
    background: var(--gradient-toolbar-light) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .navbar {
    background: var(--gradient-toolbar-dark) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Buttons Enhanced */
.btn-primary {
    background: var(--gradient-primary-light);
    border: none;
    box-shadow: 0 2px 6px rgba(0, 120, 212, 0.25);
    transition: all 0.3s ease;
}

[data-theme="dark"] .btn-primary {
    background: var(--gradient-primary-dark);
    box-shadow: 0 2px 6px rgba(88, 166, 255, 0.25);
}

.btn-primary:hover {
    /* Comment #19: Flat design - solid olive green, no gradients */
    background-color: #6B8E23;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.35);
}

[data-theme="dark"] .btn-primary:hover {
    background: linear-gradient(135deg, #4c9aff 0%, #58a6ff 100%);
    box-shadow: 0 4px 12px rgba(88, 166, 255, 0.35);
}

.btn-secondary {
    background: var(--gradient-secondary-light);
    border: none;
}

[data-theme="dark"] .btn-secondary {
    background: var(--gradient-secondary-dark);
}

/* Tables */
.table {
    background: transparent;
}

.table th {
    background: var(--gradient-header-light);
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
}

[data-theme="dark"] .table th {
    background: var(--gradient-header-dark);
    border-bottom-color: #404040;
    color: #ffffff;
}

.table td {
    background: var(--gradient-cell-light);
    border-top: 1px solid #dee2e6;
}

[data-theme="dark"] .table td {
    background: var(--gradient-cell-dark);
    border-top-color: #404040;
}

.table-striped tbody tr:nth-of-type(odd) td {
    background: var(--gradient-surface-light);
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) td {
    background: var(--gradient-surface-dark);
}

/* Modals */
.modal-content {
    background: var(--gradient-surface-elevated-light);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .modal-content {
    background: var(--gradient-surface-elevated-dark);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.modal-header {
    background: var(--gradient-header-light);
    border-bottom: 1px solid #dee2e6;
}

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

/* Dropdowns */
.dropdown-menu {
    background: var(--gradient-surface-elevated-light);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border: 1px solid #dee2e6;
}

[data-theme="dark"] .dropdown-menu {
    background: var(--gradient-surface-elevated-dark);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    border-color: #404040;
}

.dropdown-item:hover {
    background: var(--gradient-cell-light);
}

[data-theme="dark"] .dropdown-item:hover {
    background: var(--gradient-cell-dark);
}

/* Forms */
.form-control {
    background: var(--gradient-surface-light);
    border: 1px solid #ced4da;
    transition: all 0.3s ease;
}

[data-theme="dark"] .form-control {
    background: var(--gradient-surface-dark);
    border-color: #404040;
    color: #ffffff;
}

.form-control:focus {
    background: var(--gradient-surface-elevated-light);
    border-color: #58a6ff;
    box-shadow: 0 0 0 0.2rem rgba(88, 166, 255, 0.25);
}

[data-theme="dark"] .form-control:focus {
    background: var(--gradient-surface-elevated-dark);
    border-color: #58a6ff;
}

/* List Groups */
.list-group-item {
    background: var(--gradient-surface-light);
    border: 1px solid #dee2e6;
}

[data-theme="dark"] .list-group-item {
    background: var(--gradient-surface-dark);
    border-color: #404040;
    color: #ffffff;
}

.list-group-item:hover {
    background: var(--gradient-cell-light);
}

[data-theme="dark"] .list-group-item:hover {
    background: var(--gradient-cell-dark);
}

/* Alerts */
.alert-primary {
    background: linear-gradient(135deg, rgba(0, 120, 212, 0.1) 0%, rgba(0, 120, 212, 0.05) 100%);
    border-color: #58a6ff;
    color: #6B8E23; /* Comment #19: Olive green */
}

[data-theme="dark"] .alert-primary {
    background: linear-gradient(135deg, rgba(88, 166, 255, 0.15) 0%, rgba(88, 166, 255, 0.08) 100%);
    color: #58a6ff;
}

.alert-success {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.1) 0%, rgba(40, 167, 69, 0.05) 100%);
    border-color: #28a745;
    color: #155724;
}

[data-theme="dark"] .alert-success {
    background: linear-gradient(135deg, rgba(86, 211, 100, 0.15) 0%, rgba(86, 211, 100, 0.08) 100%);
    color: #56d364;
}

.alert-warning {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 193, 7, 0.05) 100%);
    border-color: #ffc107;
    color: #856404;
}

[data-theme="dark"] .alert-warning {
    background: linear-gradient(135deg, rgba(240, 192, 64, 0.15) 0%, rgba(240, 192, 64, 0.08) 100%);
    color: #f0c040;
}

.alert-danger {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(220, 53, 69, 0.05) 100%);
    border-color: #dc3545;
    color: #721c24;
}

[data-theme="dark"] .alert-danger {
    background: linear-gradient(135deg, rgba(248, 81, 73, 0.15) 0%, rgba(248, 81, 73, 0.08) 100%);
    color: #f85149;
}

/* Badges */
.badge-primary {
    background: var(--gradient-primary-light);
}

[data-theme="dark"] .badge-primary {
    background: var(--gradient-primary-dark);
}

.badge-secondary {
    background: var(--gradient-secondary-light);
}

[data-theme="dark"] .badge-secondary {
    background: var(--gradient-secondary-dark);
}

/* Progress Bars */
.progress {
    background: var(--gradient-surface-light);
}

[data-theme="dark"] .progress {
    background: var(--gradient-surface-dark);
}

.progress-bar {
    background: var(--gradient-primary-light);
}

[data-theme="dark"] .progress-bar {
    background: var(--gradient-primary-dark);
}

/* Breadcrumbs */
.breadcrumb {
    background: var(--gradient-surface-light);
}

[data-theme="dark"] .breadcrumb {
    background: var(--gradient-surface-dark);
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    /* Simplified gradients for mobile performance */
    body {
        background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f4 100%);
    }

    [data-theme="dark"] body {
        background: linear-gradient(135deg, #1a1a1a 0%, #1e1e1e 100%);
    }

    .card {
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
        background: linear-gradient(135deg, #ffffff 0%, #fdfdfd 100%);
    }

    [data-theme="dark"] .card {
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
        background: linear-gradient(135deg, #1e1e1e 0%, #222222 100%);
    }

    .card:hover {
        transform: none; /* Reduce hover effects on mobile */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    [data-theme="dark"] .card:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    }

    /* Mobile navigation gradients */
    .navbar {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
    }

    [data-theme="dark"] .navbar {
        background: linear-gradient(135deg, #1e1e1e 0%, #2d2d30 100%) !important;
    }

    /* Mobile form controls */
    .form-control {
        background: linear-gradient(135deg, #ffffff 0%, #fdfdfd 100%);
    }

    [data-theme="dark"] .form-control {
        background: linear-gradient(135deg, #2d2d30 0%, #252525 100%);
    }
}

/* Ultra small devices - minimal effects */
@media (max-width: 480px) {
    .card,
    .btn-primary,
    .btn-secondary {
        transform: none !important;
        transition: background 0.2s ease, border-color 0.2s ease;
    }

    .card:hover,
    .btn-primary:hover,
    .btn-secondary:hover {
        transform: none !important;
    }
}

/* Accessibility - Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --gradient-surface-light: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
        --gradient-header-light: linear-gradient(135deg, #e0e0e0 0%, #d0d0d0 100%);
    }

    [data-theme="dark"] {
        --gradient-surface-dark: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
        --gradient-header-dark: linear-gradient(135deg, #2a2a2a 0%, #404040 100%);
    }
}