/* ========================================
   BASE CSS - Essential styles for the entire application
   ========================================

   This file contains:
   - CSS Custom Properties (variables) for consistent theming
   - Global styles for HTML elements
   - Common component styles (cards, buttons, forms, tables, alerts)
   - Utility classes for colors and backgrounds
   - Loading overlay styles
   - Responsive utilities
   ======================================== */

/* ========================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ========================================

   These variables define the color scheme and design tokens
   used throughout the application. They support both light and dark themes.
   ======================================== */
:root {
    /* Brand Colors - Primary brand palette */
    --sunset-orange: #fb4444;    /* Main brand red color */
    --fantasy: #f9f1ee;          /* Light cream background */
    --saffron: #fabb36;          /* Warm yellow accent */
    --spicy-mix: #7b4645;        /* Dark brown text */
    --tan-hide: #f89953;         /* Orange accent */
    --tonys-pink: #e28586;       /* Soft pink */
    --roman: #da615f;            /* Muted red */
    --apple-blossom: #b45845;    /* Terracotta */
    --mauvelous: #f494a4;        /* Light pink */
    --hot-cinnamon: #e45d24;     /* Bright orange */

    /* System Colors - Functional colors for UI elements */
    --primary-color: #ff4747;    /* Primary action color */
    --secondary-color: #f65c5c;  /* Secondary action color */
    --accent-color: #f59e0b;     /* Highlight color */
    --success-color: #10b981;    /* Success states */
    --danger-color: #ef4444;     /* Error states */
    --warning-color: #f59e0b;    /* Warning states */
    --info-color: #f36969;       /* Information states */
    --dark-color: #1f2937;       /* Dark backgrounds */
    --light-color: #f9fafb;      /* Light backgrounds */

    /* Text Colors */
    --text-primary: #111827;     /* Primary text color */
    --text-secondary: #6b7280;   /* Secondary text color */

    /* Border and Background Colors */
    --border-color: #e5e7eb;     /* Border color */
    --bg-primary: #ffffff;       /* Primary background */
    --bg-secondary: #f8f9fa;     /* Secondary background */
    --bg-light: #f9fafb;         /* Light background */
    --bg-dark: #1f2937;          /* Dark background */
    --sidebar-color: #fe8b88;    /* Sidebar background */
}

/* ========================================
   DARK THEME VARIABLES
   ========================================

   Override variables for dark theme when [data-bs-theme="dark"] is set
   ======================================== */
[data-bs-theme="dark"] {
    --primary-color: #818cf8;    /* Dark theme primary */
    --secondary-color: #a78bfa;  /* Dark theme secondary */
    --accent-color: #fbbf24;     /* Dark theme accent */
    --success-color: #34d399;    /* Dark theme success */
    --danger-color: #f87171;     /* Dark theme danger */
    --warning-color: #fbbf24;    /* Dark theme warning */
    --info-color: #60a5fa;       /* Dark theme info */
    --dark-color: #374151;       /* Dark theme dark */
    --light-color: #1f2937;      /* Dark theme light */
    --text-primary: #f9fafb;     /* Dark theme primary text */
    --text-secondary: #d1d5db;   /* Dark theme secondary text */
    --border-color: #374151;     /* Dark theme border */
    --bg-primary: #1f2937;       /* Dark theme primary background */
    --bg-secondary: #111827;     /* Dark theme secondary background */
    --bg-light: #374151;         /* Dark theme light background */
    --bg-dark: #111827;          /* Dark theme dark background */
    --sidebar-color: #fe8b88;    /* Sidebar color remains same */
}

/* ========================================
   GLOBAL STYLES
   ========================================

   Base styles applied to HTML elements
   ======================================== */
html {
    scroll-behavior: smooth;     /* Smooth scrolling for anchor links */
}

body {
    font-family: 'Poppins', sans-serif;  /* Main font family */
    line-height: 1.6;                    /* Readable line height */
    color: var(--text-primary);          /* Primary text color */
    background-color: var(--bg-secondary); /* Secondary background */
    margin: 0;                           /* Remove default margin */
    transition: all 0.3s ease;           /* Smooth transitions */
}

/* ========================================
   COMMON CARD STYLES
   ========================================

   Standardized card component styling used throughout the app
   ======================================== */
.card {
    border: none;                         /* Remove default border */
    border-radius: 12px;                  /* Rounded corners */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: all 0.3s ease;            /* Smooth transitions */
    background-color: var(--bg-primary);  /* Card background */
    border: 1px solid var(--border-color); /* Border color */
    color: var(--text-primary);           /* Text color */
}

[data-bs-theme="dark"] .card {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3); /* Dark theme shadow */
}

.card:hover {
    transform: translateY(-2px);          /* Lift effect on hover */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); /* Enhanced shadow */
}

.card-header {
    background-color: var(--bg-secondary) !important; /* Header background */
    border-bottom-color: var(--border-color) !important; /* Header border */
    color: var(--text-primary);           /* Header text color */
}

.card-body {
    color: var(--text-primary);           /* Body text color */
}

/* ========================================
   COMMON BUTTON STYLES
   ========================================

   Standardized button styling with hover effects
   ======================================== */
.btn {
    border-radius: 8px;                   /* Rounded corners */
    font-weight: 500;                     /* Medium font weight */
    transition: all 0.3s ease;            /* Smooth transitions */
    border: none;                         /* Remove default border */
    padding: 0.5rem 1rem;                 /* Standard padding */
}

.btn:hover {
    transform: translateY(-1px);          /* Lift effect on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Hover shadow */
}

.btn-primary {
    background-color: var(--primary-color); /* Primary button color */
    color: white;                         /* White text */
}

.btn-primary:hover {
    background-color: var(--primary-color); /* Maintain color on hover */
    color: white;                         /* Maintain text color */
    filter: brightness(1.1);              /* Brighten on hover */
}

.btn-secondary {
    background-color: var(--secondary-color); /* Secondary button color */
    color: white;                         /* White text */
}

.btn-success {
    background-color: var(--success-color); /* Success button color */
    color: white;                         /* White text */
}

.btn-danger {
    background-color: var(--danger-color); /* Danger button color */
    color: white;                         /* White text */
}

.btn-warning {
    background-color: var(--warning-color); /* Warning button color */
    color: white;                         /* White text */
}

.btn-info {
    background-color: var(--info-color);  /* Info button color */
    color: white;                         /* White text */
}

/* ========================================
   FORM STYLES
   ========================================

   Standardized form control styling
   ======================================== */
.form-control {
    border-radius: 8px;                   /* Rounded corners */
    border: 1px solid var(--border-color); /* Border color */
    background-color: var(--bg-primary);  /* Input background */
    color: var(--text-primary);           /* Input text color */
    transition: all 0.3s ease;            /* Smooth transitions */
}

.form-control:focus {
    border-color: var(--primary-color);   /* Focus border color */
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25); /* Focus shadow */
    background-color: var(--bg-primary);  /* Maintain background */
    color: var(--text-primary);           /* Maintain text color */
}

.form-label {
    color: var(--text-primary);           /* Label text color */
    font-weight: 500;                     /* Medium font weight */
}

/* ========================================
   TABLE STYLES
   ========================================

   Standardized table styling
   ======================================== */
.table {
    color: var(--text-primary);           /* Table text color */
    background-color: var(--bg-primary);  /* Table background */
}

.table th {
    background-color: var(--bg-secondary); /* Header background */
    border-color: var(--border-color);    /* Header border */
    color: var(--text-primary);           /* Header text */
    font-weight: 600;                     /* Bold header text */
}

.table td {
    border-color: var(--border-color);    /* Cell border */
    color: var(--text-primary);           /* Cell text */
}

/* ========================================
   ALERT STYLES
   ========================================

   Standardized alert component styling
   ======================================== */
.alert {
    border-radius: 8px;                   /* Rounded corners */
    border: none;                         /* Remove default border */
    font-weight: 500;                     /* Medium font weight */
}

.alert-success {
    background-color: rgba(16, 185, 129, 0.1); /* Success background */
    color: var(--success-color);          /* Success text */
}

.alert-danger {
    background-color: rgba(239, 68, 68, 0.1); /* Danger background */
    color: var(--danger-color);           /* Danger text */
}

.alert-warning {
    background-color: rgba(245, 158, 11, 0.1); /* Warning background */
    color: var(--warning-color);          /* Warning text */
}

.alert-info {
    background-color: rgba(59, 130, 246, 0.1); /* Info background */
    color: var(--info-color);             /* Info text */
}

/* ========================================
   UTILITY CLASSES
   ========================================

   Helper classes for common styling needs
   ======================================== */
.text-primary {
    color: var(--primary-color) !important; /* Primary text color */
}

.text-secondary {
    color: var(--text-secondary) !important; /* Secondary text color */
}

.bg-primary {
    background-color: var(--bg-primary) !important; /* Primary background */
}

.bg-secondary {
    background-color: var(--bg-secondary) !important; /* Secondary background */
}

.border-color {
    border-color: var(--border-color) !important; /* Border color utility */
}

/* ========================================
   LOADING SPINNER
   ========================================

   Full-screen loading overlay for async operations
   ======================================== */
.loading-overlay {
    position: fixed;                       /* Fixed positioning */
    top: 0;                               /* Top edge */
    left: 0;                              /* Left edge */
    width: 100%;                          /* Full width */
    height: 100%;                         /* Full height */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
    display: flex;                        /* Flexbox layout */
    align-items: center;                  /* Center vertically */
    justify-content: center;              /* Center horizontally */
    z-index: 9999;                        /* High z-index */
}

/* ========================================
   RESPONSIVE UTILITIES
   ========================================

   Mobile-first responsive design adjustments
   ======================================== */
@media (max-width: 768px) {
    .card {
        margin-bottom: 1rem;              /* Add bottom margin on mobile */
    }

    .btn {
        width: 100%;                      /* Full width buttons on mobile */
        margin-bottom: 0.5rem;            /* Bottom margin for stacking */
    }
}