/* ========================================================================= */
/* ==================== GLOBAL THEME VARIABLES (SOS IT) =================== */
/* ========================================================================= */

/* --- Import Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@700&display=swap');

/* --- CSS Variables :root (IDENTIQUES POUR TOUTE L'APPLICATION) --- */
:root {
    /* === START: RED THEME Colors & Base Vars === */
    --primary: #e53e3e;        /* Strong Red */
    --primary-dark: #c53030;   /* Darker Red */
    --secondary: #c53030;      /* Darker Red (Used in gradients) */
    --success: #48bb78;        /* Green */
    --danger: #e74c3c;         /* Slightly different Red for Errors/Banner */
    --warning: #f8961e;        /* Orange */
    --info: #3182ce;           /* Blue */
    --primary-rgb: 229, 62, 62;/* RGB for primary red */
    --secondary-rgb: 229, 62, 62; /* Use primary for consistency */
    --success-rgb: 72, 187, 120;
    --danger-rgb: 231, 76, 60;
    --warning-rgb: 248, 150, 30;
    --info-rgb: 49, 130, 206;
    
    /* Text & Base Background */
    --text-primary: #2b2d42;   /* Dark Grey for Text */
    --text-secondary: #718096; /* Medium Grey for Text */
    --body-bg-light: #f8f9fa;  /* Base background for light theme */
    --border-color: #e2e8f0;   /* Soft Grey Border */

    /* Light Theme Specific */
    --light-bg: #f8f9fa;       /* Light background */
    --light-surface: #ffffff;  /* White surface for cards/tables */
    --light-border: #e2e8f0;   /* Light border */
    --light-text: var(--text-primary); /* Use themed text */
    --light-text-secondary: var(--text-secondary); /* Use themed text */
    
    /* Table Specific - ADAPTED */
    --light-thead-bg: rgba(var(--primary-rgb), 0.03); /* Subtle red tint */
    --light-thead-text: var(--text-secondary); /* Keep medium grey */
    --light-row-hover: rgba(var(--primary-rgb), 0.05); /* Subtle red tint */

    /* Theme Defaults Mapped */
    --bg-color: var(--light-bg);
    --surface-color: var(--light-surface);
    --text-color: var(--light-text);
    --text-secondary: var(--light-text-secondary);
    --border-color: var(--light-border);
    --thead-bg: var(--light-thead-bg);
    --thead-text: var(--light-thead-text);
    --row-hover-bg: var(--light-row-hover);
    --white: #ffffff;
    --black: #000000;

    /* Layout */
    --sidebar-width-collapsed: 75px; 
    --sidebar-width: var(--sidebar-width-collapsed); 
    --topbar-height: 65px;
    --content-padding: 1.75rem; 
    --content-padding-mobile: 1rem;

    /* Transitions & Shadows */
    --transition-speed: 0.25s; 
    --transition-func: ease-in-out; 
    --transition: all var(--transition-speed) var(--transition-func);
    --shadow-sm: 0 2px 4px rgba(var(--primary-rgb), 0.05);
    --shadow: 0 4px 8px rgba(var(--primary-rgb), 0.07);
    --shadow-md: 0 6px 12px rgba(var(--primary-rgb), 0.09);
    --shadow-lg: 0 10px 20px rgba(var(--primary-rgb), 0.1);

    /* Radius */
    --radius-sm: 0.25rem; 
    --radius: 0.5rem; 
    --radius-lg: 0.75rem; 
    --radius-xl: 1rem;
}


/* --- Base & Typography (Uses new theme variables) --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } 
html { scroll-behavior: smooth; font-size: 16px; }
body { 
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
    background-color: var(--bg-color); 
    color: var(--text-color); 
    line-height: 1.6; 
    transition: background-color 0.2s ease, color 0.2s ease; 
    overflow-x: hidden; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
}
a { color: var(--primary); text-decoration: none; transition: color 0.2s ease; } 
a:hover { color: var(--primary-dark); }

/* --- Sidebar --- */
.sidebar {
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100vh; 
    width: var(--sidebar-width-collapsed);
    background: var(--surface-color);
    box-shadow: var(--shadow); 
    z-index: 1100; 
    display: flex; 
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    overflow: hidden; 
    transition: var(--transition);
    margin: 0;
    padding: 0;
}
.sidebar .nav-link-text, .sidebar .sidebar-slogan, .sidebar .nav-group-title { display: none; } 
.sidebar .sidebar-header { padding: 0.75rem 0; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; border-bottom: 1px solid var(--border-color); }
.sidebar .sidebar-logo { display: inline-flex; text-decoration: none; } 
.sidebar .sidebar-logo-icon { font-size: 2rem; color: var(--primary); transition: transform 0.3s ease; } 
.sidebar .sidebar-logo:hover .sidebar-logo-icon { transform: rotate(15deg) scale(1.1); }
.sidebar .sidebar-nav { flex-grow: 1; overflow-y: auto; } 
.sidebar .nav { list-style: none; padding: 0 0.5rem; } 
.sidebar .nav-item { margin-bottom: 0.5rem; } 
.sidebar .nav-link { display: flex; align-items: center; justify-content: center; padding: 0.9rem 0; border-radius: var(--radius); color: var(--text-secondary) !important; transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease; }
.sidebar .nav-link i.material-icons, .sidebar .nav-link i, .sidebar .nav-link .material-icons { font-size: 1.5rem !important; line-height: 1 !important; color: var(--text-secondary) !important; transition: color 0.2s ease !important; } 
.sidebar .nav-link:hover { background-color: var(--row-hover-bg) !important; color: var(--primary) !important; transform: translateX(3px); } 
.sidebar .nav-link:hover i.material-icons, .sidebar .nav-link:hover i, .sidebar .nav-link:hover .material-icons { color: var(--primary) !important; }
.sidebar .nav-link.active { background-color: rgba(var(--primary-rgb), 0.1) !important; color: var(--primary) !important; box-shadow: inset 3px 0 0 var(--primary); }
.sidebar .nav-link.active i.material-icons, .sidebar .nav-link.active i, .sidebar .nav-link.active .material-icons { color: var(--primary) !important; }
.sidebar .sidebar-footer { padding: 0.75rem 0; margin-top: auto; border-top: 1px solid var(--border-color); display: flex; justify-content: center; align-items: center; }
.sidebar .countdown-display { display: flex; align-items: center; gap: 0.3rem; color: var(--text-secondary); font-size: 0.75rem; font-weight: 500; cursor: default; opacity: 0.8; transition: opacity 0.2s ease; } 
.sidebar .countdown-display:hover { opacity: 1; } 
.sidebar .countdown-icon { font-size: 1rem; line-height: 1; } 
.sidebar .countdown-value { min-width: 14px; text-align: right; } 
.sidebar .countdown-unit { font-size: 0.65rem; margin-left: -2px; }
.sidebar-overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1099; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s; } 
.sidebar-toggle.mobile-only { display: none; }

/* --- Main Content Panel --- */
.main-panel {
    position: relative;
    z-index: 1;
    margin-left: var(--sidebar-width-collapsed); 
    width: calc(100% - var(--sidebar-width-collapsed));
    min-height: 100vh; 
    transition: margin-left var(--transition-speed) var(--transition-func), width var(--transition-speed) var(--transition-func);
    background-color: transparent;
}

/* --- Top Bar --- */
.top-bar {
    position: sticky; 
    top: 0; 
    left: 0;
    right: 0;
    width: 100%; 
    min-height: var(--topbar-height);
    background: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--content-padding);
    z-index: 1000;
    box-shadow: var(--shadow-sm);
    margin: 0;
}
.top-bar-left, .top-bar-right { display: flex; align-items: center; gap: 1rem; } 
.top-bar-left { flex-grow: 1; } 
.top-bar-right { flex-shrink: 0; }
.top-bar-brand { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 auto; padding: 5px 0; }
.top-bar-title { font-family: 'Outfit', sans-serif; font-size: 1.8rem; font-weight: 700; line-height: 1.1; margin-bottom: 0.1rem; background: linear-gradient(90deg, var(--primary), var(--secondary), var(--primary)); background-size: 200% auto; color: transparent !important; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent !important; animation: gradientShift 5s linear infinite; } 
@keyframes gradientShift { 0% { background-position: 0% center; } 50% { background-position: 200% center; } 100% { background-position: 0% center; } }
.top-bar-slogan { font-family: 'Inter', sans-serif; font-size: 0.75rem; color: var(--text-secondary) !important; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; margin-top: 0.4rem; min-height: 1.2em; position: relative; white-space: nowrap; overflow: hidden; opacity: 0.85 !important; }
.top-bar-slogan .highlight-letter { color: var(--primary) !important; font-weight: 600; }
.typing-cursor { display: inline-block; width: 2px; height: 0.9em; background-color: var(--text-color) !important; margin-left: 3px; animation: blink 1s steps(1) infinite; vertical-align: baseline; opacity: 1; transition: opacity 0.3s ease; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.search-container { position: relative; }
.search-input { padding: 0.5rem 0.9rem 0.5rem 2.3rem; border-radius: var(--radius); border: 1px solid var(--border-color); background: var(--bg-color); color: var(--text-color); min-width: 200px; transition: var(--transition); font-size: 0.85rem; outline: none; } 
.search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15); background: var(--surface-color); }
.search-icon { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-size: 1.1rem; pointer-events: none; }
.notification-badge { position: relative; display: inline-flex; align-items: center; color: var(--text-secondary); margin-right: 0.5rem; cursor: default; } 
.notification-badge.hidden { display: none; } 
.notification-icon { font-size: 1.6rem; transition: color 0.2s ease; } 
.notification-badge:hover .notification-icon { color: var(--primary); }
.notification-count { position: absolute; top: -2px; right: -5px; background-color: var(--danger); color: var(--white); border-radius: 50%; width: 18px; height: 18px; font-size: 0.7rem; font-weight: 600; display: flex; align-items: center; justify-content: center; line-height: 1; border: 1px solid var(--surface-color); }
.profile-link { display: inline-flex; } 
.profile-link .material-icons { font-size: 2rem; color: var(--text-secondary); transition: color 0.2s ease; } 
.profile-link:hover .material-icons { color: var(--primary); }

/* --- Content Area --- */
.content {
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    padding-top: var(--topbar-height) !important; /* FORCÉ - Aucun espace */
    padding-bottom: 0 !important; /* Aucun espace en bas non plus */
    margin: 0 !important; /* Aucune marge */
}

/* --- Responsive Sidebar & Layout --- */
@media (max-width: 991.98px) { 
    .sidebar { transform: translateX(-100%); position: fixed; } 
    .sidebar.open { transform: translateX(0); } 
    .sidebar.open + .sidebar-overlay { opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s 0s; } 
    .main-panel { margin-left: 0 !important; width: 100% !important; } 
    .sidebar-toggle.mobile-only { display: inline-flex !important; background: transparent; border: none; color: var(--text-secondary); font-size: 1.75rem; cursor: pointer; padding: 0.5rem; align-items: center; transition: color 0.2s ease; } 
    .sidebar-toggle.mobile-only:hover { color: var(--primary); } 
    .content { padding-left: var(--content-padding-mobile); padding-right: var(--content-padding-mobile); padding-top: var(--topbar-height) !important; padding-bottom: 0 !important; margin: 0 !important; } 
    .top-bar { position: fixed; width: 100%; left: 0; right: 0; top: 0; min-height: var(--topbar-height); padding: 0 var(--content-padding-mobile); flex-wrap: nowrap; justify-content: space-between; } 
    .top-bar-left { flex-grow: 0; } 
    .top-bar-brand { flex-grow: 1; } 
    .top-bar-right { flex-grow: 0; }
}