/* ========================================

   COMPLETE LIGHT MODE STYLING

   Ensures all pages look good in light theme

========================================== */



/* ========================================

   SECTIONS & CONTAINERS

========================================== */



html[data-theme="light"] .section,

html[data-theme="light"] .container {

    background: var(--bg);

    color: var(--fg);

}



html[data-theme="light"] .section:nth-child(even) {

    background: var(--section-bg);

}



/* ========================================

   CARDS & BOXES

========================================== */



html[data-theme="light"] .news-card,

html[data-theme="light"] .book-card,

html[data-theme="light"] .resource-card,

html[data-theme="light"] .article-card {

    background: #ffffff;

    border: 1px solid rgba(102, 126, 234, 0.15);

    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);

    transition: all 0.3s ease;

}



html[data-theme="light"] .news-card:hover,

html[data-theme="light"] .book-card:hover,

html[data-theme="light"] .resource-card:hover,

html[data-theme="light"] .article-card:hover {

    background: #eeecff;

    border-color: rgba(102, 126, 234, 0.3);

    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.15);

    transform: translateY(-2px);

}



/* ========================================

   TEXT & TYPOGRAPHY

========================================== */



html[data-theme="light"] h1,

html[data-theme="light"] h2,

html[data-theme="light"] h3,

html[data-theme="light"] h4,

html[data-theme="light"] h5,

html[data-theme="light"] h6 {

    color: #1a1a2e;

}



html[data-theme="light"] p,

html[data-theme="light"] span,

html[data-theme="light"] .text {

    color: #6b7280;

}



html[data-theme="light"] .text-muted,

html[data-theme="light"] .muted {

    color: #9ca3af;

}



html[data-theme="light"] .text-light {

    color: #e5e7eb;

}



/* ========================================

   BORDERS & DIVIDERS

========================================== */



html[data-theme="light"] hr,

html[data-theme="light"] .divider {

    border-color: rgba(102, 126, 234, 0.2);

}



html[data-theme="light"] .border {

    border-color: rgba(102, 126, 234, 0.15);

}



/* ========================================

   BUTTONS

========================================== */



html[data-theme="light"] .btn {

    transition: all 0.3s ease;

}



html[data-theme="light"] .btn-primary {

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    color: white;

    border: none;

}



html[data-theme="light"] .btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);

}



html[data-theme="light"] .btn-secondary {

    background: #f0ebff;

    color: #667eea;

    border: 1px solid #667eea;

}



html[data-theme="light"] .btn-secondary:hover {

    background: #e8e4ff;

    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);

}



html[data-theme="light"] .btn-outline {

    color: #667eea;

    border: 1px solid #667eea;

    background: transparent;

}



html[data-theme="light"] .btn-outline:hover {

    background: rgba(102, 126, 234, 0.1);

}



/* ========================================

   FORMS

========================================== */



html[data-theme="light"] .form-group {

    color: #1a1a2e;

}



html[data-theme="light"] .form-label,

html[data-theme="light"] label {

    color: #1a1a2e;

    font-weight: 500;

}



html[data-theme="light"] .form-input,

html[data-theme="light"] .form-textarea,

html[data-theme="light"] .form-select,

html[data-theme="light"] input[type="text"],

html[data-theme="light"] input[type="email"],

html[data-theme="light"] input[type="password"],

html[data-theme="light"] input[type="tel"],

html[data-theme="light"] input[type="number"],

html[data-theme="light"] textarea,

html[data-theme="light"] select {

    background: #ffffff;

    color: #1a1a2e;

    border: 1px solid rgba(102, 126, 234, 0.2);

    transition: all 0.3s ease;

}



html[data-theme="light"] .form-input::placeholder,

html[data-theme="light"] .form-textarea::placeholder,

html[data-theme="light"] input::placeholder,

html[data-theme="light"] textarea::placeholder {

    color: #d1d5db;

}



html[data-theme="light"] .form-input:focus,

html[data-theme="light"] .form-textarea:focus,

html[data-theme="light"] .form-select:focus,

html[data-theme="light"] input:focus,

html[data-theme="light"] textarea:focus,

html[data-theme="light"] select:focus {

    border-color: #667eea;

    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);

    outline: none;

}



/* ========================================

   BADGES & TAGS

========================================== */



html[data-theme="light"] .badge,

html[data-theme="light"] .tag,

html[data-theme="light"] .label,

html[data-theme="light"] .pill {

    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15));

    color: #667eea;

    border: 1px solid rgba(102, 126, 234, 0.3);

    padding: 0.25rem 0.75rem;

    border-radius: 9999px;

    font-size: 0.85rem;

    font-weight: 500;

}



html[data-theme="light"] .badge-primary {

    background: #667eea;

    color: white;

    border: none;

}



html[data-theme="light"] .badge-secondary {

    background: #764ba2;

    color: white;

    border: none;

}



html[data-theme="light"] .badge-success {

    background: #10b981;

    color: white;

    border: none;

}



html[data-theme="light"] .badge-warning {

    background: #fbbf24;

    color: #1a1a2e;

    border: none;

}



html[data-theme="light"] .badge-danger {

    background: #ef4444;

    color: white;

    border: none;

}



/* ========================================

   ALERTS & MESSAGES

========================================== */



html[data-theme="light"] .alert,

html[data-theme="light"] .message {

    border-radius: 0.5rem;

    padding: 1rem;

    border: 1px solid;

}



html[data-theme="light"] .alert-info {

    background: rgba(102, 126, 234, 0.1);

    color: #667eea;

    border-color: rgba(102, 126, 234, 0.3);

}



html[data-theme="light"] .alert-success {

    background: rgba(16, 185, 129, 0.1);

    color: #059669;

    border-color: rgba(16, 185, 129, 0.3);

}



html[data-theme="light"] .alert-warning {

    background: rgba(251, 191, 36, 0.1);

    color: #b45309;

    border-color: rgba(251, 191, 36, 0.3);

}



html[data-theme="light"] .alert-danger {

    background: rgba(239, 68, 68, 0.1);

    color: #dc2626;

    border-color: rgba(239, 68, 68, 0.3);

}



/* ========================================

   TABLES

========================================== */



html[data-theme="light"] table,

html[data-theme="light"] .table {

    background: #ffffff;

    color: #1a1a2e;

    border: 1px solid rgba(102, 126, 234, 0.15);

}



html[data-theme="light"] table thead,

html[data-theme="light"] .table thead {

    background: rgba(102, 126, 234, 0.1);

    color: #667eea;

}



html[data-theme="light"] table tbody tr:nth-child(even),

html[data-theme="light"] .table tbody tr:nth-child(even) {

    background: rgba(102, 126, 234, 0.05);

}



html[data-theme="light"] table tbody tr:hover,

html[data-theme="light"] .table tbody tr:hover {

    background: rgba(102, 126, 234, 0.1);

}



html[data-theme="light"] table td,

html[data-theme="light"] table th,

html[data-theme="light"] .table td,

html[data-theme="light"] .table th {

    border-color: rgba(102, 126, 234, 0.15);

}



/* ========================================

   MODALS & DIALOGS

========================================== */



html[data-theme="light"] .modal,

html[data-theme="light"] .dialog {

    background: #ffffff;

    color: #1a1a2e;

    box-shadow: 0 20px 25px rgba(102, 126, 234, 0.15);

}



html[data-theme="light"] .modal-header,

html[data-theme="light"] .dialog-header {

    background: linear-gradient(135deg, #e8e4ff 0%, #f0ebff 100%);

    border-bottom: 1px solid rgba(102, 126, 234, 0.2);

}



/* ========================================

   CUSTOM SCROLLBAR (Light Mode)

========================================== */



html[data-theme="light"] ::-webkit-scrollbar {

    width: 10px;

    height: 10px;

}



html[data-theme="light"] ::-webkit-scrollbar-track {

    background: #f3f0ff;

}



html[data-theme="light"] ::-webkit-scrollbar-thumb {

    background: #667eea;

    border-radius: 5px;

}



html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {

    background: #764ba2;

}



/* ========================================

   SPECIAL ELEMENTS

========================================== */



html[data-theme="light"] .highlight,

html[data-theme="light"] .highlight-box {

    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));

    border-left: 3px solid #ffd700;

}



html[data-theme="light"] .feature-box,

html[data-theme="light"] .benefit-box {

    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));

    border: 1px solid rgba(102, 126, 234, 0.2);

}



html[data-theme="light"] .accent-box {

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    color: white;

}



/* ========================================

   SUCCESS BANNER - LISIBILITÉ EN MODE CLAIR

========================================== */



html[data-theme="light"] .success-banner {

    background-color: #f1f5f9 !important;

    background-image: none !important;

    border: 2px solid #2563eb !important;

    padding: 2rem !important;

    border-radius: 8px !important;

}



html[data-theme="light"] .success-banner h2 {

    color: #0f172a !important;

    font-weight: 700 !important;

    font-size: 1.5rem !important;

    opacity: 1 !important;

    text-shadow: none !important;

    margin: 0 !important;

}



html[data-theme="light"] .success-banner h2 i {

    color: #2563eb !important;

    margin-right: 0.5rem !important;

}



html[data-theme="light"] .success-banner p {

    color: #1e293b !important;

    font-weight: 500 !important;

    opacity: 1 !important;

    text-shadow: none !important;

    margin-top: 0.5rem !important;

}



/* ========================================

   CARTES D'OPPORTUNITÉS - LISIBILITÉ MODE SOMBRE

========================================== */



html[data-theme="dark"] .opportunity-card {

    background: rgba(30, 41, 59, 0.8) !important;

}



html[data-theme="dark"] .opportunity-card h3 {

    color: #ffffff !important;

    font-weight: 700 !important;

}



html[data-theme="dark"] .opportunity-card p {

    color: #f1f5f9 !important;

    font-weight: 500 !important;

}



html[data-theme="dark"] .opportunity-icon i {

    color: #3b82f6 !important;

}



html[data-theme="dark"] .section-title h1 {

    color: #ffffff !important;

}



html[data-theme="dark"] .section-title p {

    color: #e2e8f0 !important;

}



/* ========================================

   TRANSITIONS

========================================== */



html[data-theme="light"] * {

    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;

}