/* ======================
   LIGHT THEME
   Based on your React Native colors
====================== */

/* CSS Variables for Light Theme */
:root {
    /* Core Colors - From your React Native */
    --primary: #003366;          /* NAVY_BLUE */
    --primary-container: #1A4D80;
    --on-primary: #FFFFFF;       /* CLEAN_WHITE */
    --on-primary-container: #E6F0FF;
    
    --secondary: #FF8C69;        /* CORAL */
    --secondary-container: #FFC9B8;
    --on-secondary: #FFFFFF;
    --on-secondary-container: #5C1A00;
    
    /* Background & Surface - From your React Native */
    --background: #FFFFFF;       /* CLEAN_WHITE */
    --surface: #F5F5F5;          /* LIGHT_GRAY */
    --surface-variant: #F8F8F8;  /* OFF_WHITE */
    
    /* Text Colors - From your React Native */
    --on-background: #1C1C1C;
    --on-surface: #1C1C1C;
    --on-surface-variant: #4A4A4A;
    
    /* Form Colors */
    --input-bg: #FFFFFF;
    --input-text: #1C1C1C;
    --input-border: #C7C7C7;
    --input-focus: #003366;
    --input-placeholder: rgba(28, 28, 28, 0.6);
    
    /* UI Colors */
    --error: #D32F2F;
    --success: #198754;
    --warning: #FFC107;
    --info: #0D6EFD;
    
    /* Borders & Shadows */
    --outline: #C7C7C7;
    --outline-variant: #E0E0E0;
    --border-color: #E0E0E0;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-heavy: 0 4px 16px rgba(0, 0, 0, 0.12);
    
    /* Misc */
    --border-radius: 8px;
}

/* ========== BASE STYLES ========== */
body.theme-light {
    background-color: var(--background);
    color: var(--on-background);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
}

/* ========== FORM ELEMENTS ========== */
body.theme-light .form-control,
body.theme-light .form-select,
body.theme-light .form-textarea {
    background-color: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
}

body.theme-light .form-control:focus,
body.theme-light .form-select:focus,
body.theme-light .form-textarea:focus {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 0.25rem rgba(0, 51, 102, 0.25);
    background-color: var(--input-bg);
    color: var(--input-text);
}

body.theme-light .form-control::placeholder,
body.theme-light .form-select::placeholder,
body.theme-light .form-textarea::placeholder {
    color: var(--input-placeholder);
    opacity: 1;
}

body.theme-light .form-label {
    color: var(--on-surface);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* ========== BUTTONS ========== */
body.theme-light .btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

body.theme-light .btn-primary:hover {
    background-color: var(--primary-container);
    border-color: var(--primary-container);
}

body.theme-light .btn-secondary {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: var(--on-secondary);
}

body.theme-light .btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

body.theme-light .btn-outline-primary:hover {
    background-color: var(--primary);
    color: var(--on-primary);
}

/* ========== CARDS ========== */
body.theme-light .card {
    background-color: var(--surface-variant);
    border: 1px solid var(--outline-variant);
    color: var(--on-surface);
}

body.theme-light .card-header {
    background-color: var(--surface);
    border-bottom: 1px solid var(--outline-variant);
    color: var(--on-surface);
}

/* ========== TABLES ========== */
body.theme-light .table {
    color: var(--on-surface);
    background-color: var(--surface-variant);
}

body.theme-light .table thead {
    background-color: var(--primary);
    color: var(--on-primary);
}

body.theme-light .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 51, 102, 0.05);
}

/* ========== ALERTS ========== */
body.theme-light .alert {
    border: none;
    border-radius: var(--border-radius);
    color: var(--on-background);
}

body.theme-light .alert-success {
    background-color: rgba(25, 135, 84, 0.1);
    color: #198754;
    border-left: 4px solid #198754;
}

body.theme-light .alert-danger {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border-left: 4px solid #dc3545;
}

body.theme-light .alert-warning {
    background-color: rgba(255, 193, 7, 0.1);
    color: #ffc107;
    border-left: 4px solid #ffc107;
}

body.theme-light .alert-info {
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
    border-left: 4px solid #0d6efd;
}

/* ========== NAVIGATION ========== */
body.theme-light .navbar {
    background-color: var(--surface) !important;
    border-bottom: 1px solid var(--outline-variant);
}

body.theme-light .nav-link {
    color: var(--on-surface-variant);
}

body.theme-light .nav-link:hover,
body.theme-light .nav-link.active {
    color: var(--primary);
}

/* ========== BADGES ========== */
body.theme-light .badge.bg-primary {
    background-color: var(--primary) !important;
    color: var(--on-primary);
}

body.theme-light .badge.bg-secondary {
    background-color: var(--secondary) !important;
    color: var(--on-secondary);
}

/* ========== PROGRESS BARS ========== */
body.theme-light .progress {
    background-color: var(--surface);
}

body.theme-light .progress-bar {
    background-color: var(--primary);
}

/* ========== TEXT UTILITIES ========== */
body.theme-light .text-muted {
    color: var(--on-surface-variant) !important;
}

body.theme-light .text-dark {
    color: var(--on-surface) !important;
}

body.theme-light .text-light {
    color: var(--on-primary) !important;
}

/* ========== BORDERS ========== */
body.theme-light .border {
    border-color: var(--outline-variant) !important;
}

/* ========== BACKGROUND UTILITIES ========== */
body.theme-light .bg-light {
    background-color: var(--surface-variant) !important;
}

body.theme-light .bg-dark {
    background-color: var(--primary) !important;
    color: var(--on-primary) !important;
}

/* ========== NAVIGATION FOR LIGHT THEME ========== */

/* Override Bootstrap's navbar-dark for light theme */
body.theme-light .navbar-dark {
    background-color: var(--primary) !important; /* Use your navy blue */
    color: var(--on-primary) !important; /* Should be white */
}

/* Nav links in light theme */
body.theme-light .navbar-dark .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
    transition: all 0.3s ease;
}

body.theme-light .navbar-dark .nav-link:hover {
    color: rgba(255, 255, 255, 1) !important;
    background-color: rgba(255, 255, 255, 0.1);
}

body.theme-light .navbar-dark .nav-link.active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.2);
    font-weight: 600;
}

/* Dropdown menus */
body.theme-light .navbar-dark .dropdown-menu {
    background-color: var(--surface-variant);
    border: 1px solid var(--outline-variant);
}

body.theme-light .navbar-dark .dropdown-item {
    color: var(--on-surface);
}

body.theme-light .navbar-dark .dropdown-item:hover {
    background-color: var(--primary);
    color: var(--on-primary);
}

/* Navbar brand/logo */
body.theme-light .navbar-dark .navbar-brand {
    color: #ffffff !important;
    font-weight: 600;
}

/* Navbar toggler icon */
body.theme-light .navbar-dark .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
}

body.theme-light .navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}