:root {
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --primary-light: #818cf8;
  --primary-bg: rgba(99,102,241,0.06);
  --primary-bg-hover: rgba(99,102,241,0.12);

  --bg: #f8f9fc;
  --bg-card: #ffffff;
  --bg-card-hover: #fafbfe;
  --border: #e8ecf4;
  --border-hover: #d1d7e8;

  --text: #1e1f2b;
  --text-secondary: #5a6072;
  --text-muted: #9198a8;

  --radius-sm: 6px;
  --radius: 10px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
  --shadow: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.08);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a { color: var(--primary); }
a:hover { color: var(--primary-dark); }

/* ===== HEADER ===== */
header {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* ===== MENU GAUCHE ===== */
#menuGauche2, #menuGauche2 caption {
  background: var(--bg-card) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  color: var(--text);
}
#menuGauche2 a {
  color: var(--text-secondary);
}
#menuGauche2 a:hover {
  color: var(--primary);
}

/* ===== CALENDAR ===== */
#calendriers .calendar caption {
  background: var(--primary-bg) !important;
  color: var(--primary-dark) !important;
  font-weight: 700;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.calendar {
  border-collapse: separate;
  border-spacing: 2px;
}
.calendar th {
  background: var(--bg) !important;
  color: var(--text-secondary) !important;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
}
.calendar td {
  transition: background 0.15s;
}
.calendar td > a {
  border-radius: 6px;
  transition: all 0.15s;
  color: var(--text) !important;
}
.calendar td > a:hover {
  background: var(--primary-bg) !important;
  color: var(--primary) !important;
}
.cal_current_day {
  background: var(--primary-bg) !important;
  border-radius: 6px;
  font-weight: 700 !important;
}
.cal_current_day a {
  color: var(--primary) !important;
}

/* ===== PLANNING ===== */
#planning2 {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
#planning2 caption {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  padding: 12px;
}
#planning2 thead th, .jour th {
  background: var(--bg) !important;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  border-bottom: 2px solid var(--border);
}

/* ===== BOUTONS ===== */
.btn {
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.btn-default {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.btn-default:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--border-hover) !important;
}

.btn-primary {
  background: var(--primary) !important;
  border: none !important;
  color: #fff !important;
}
.btn-primary:hover {
  background: var(--primary-dark) !important;
  box-shadow: 0 4px 12px rgba(99,102,241,0.3) !important;
}

/* ===== FORMULAIRES ===== */
.form-control {
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  border-radius: var(--radius-sm) !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control:hover {
  border-color: var(--border-hover) !important;
}
.form-control:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-bg) !important;
}

/* ===== TABLEAUX ===== */
table {
  border-radius: var(--radius);
}
th {
  background: var(--bg) !important;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
td {
  border-color: var(--border) !important;
}

/* ===== CARDS / PANELS ===== */
.panel, .card, .box {
  background: var(--bg-card) !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.panel:hover, .card:hover {
  box-shadow: var(--shadow) !important;
  border-color: var(--border-hover) !important;
}

/* ===== DROPDOWN ===== */
.dropdown-menu {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-lg) !important;
}
.dropdown-menu > li > a {
  color: var(--text);
  transition: background 0.15s;
}
.dropdown-menu > li > a:hover {
  background: var(--primary-bg) !important;
  color: var(--primary) !important;
}

/* ===== MODAL ===== */
.modal-content {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
}
.modal-header {
  border-bottom: 1px solid var(--border) !important;
}
.modal-footer {
  border-top: 1px solid var(--border) !important;
}

/* ===== ALERTES ===== */
.alert {
  border-radius: var(--radius-sm) !important;
  border: 1px solid transparent !important;
}
.alert-success { background: #ecfdf5 !important; color: #065f46 !important; border-color: #a7f3d0 !important; }
.alert-info { background: #eff6ff !important; color: #1e40af !important; border-color: #bfdbfe !important; }
.alert-warning { background: #fffbeb !important; color: #92400e !important; border-color: #fde68a !important; }
.alert-danger { background: #fef2f2 !important; color: #991b1b !important; border-color: #fecaca !important; }

/* ===== LABELS ===== */
.label {
  border-radius: 50px !important;
  font-weight: 600 !important;
}
.label-default { background: var(--bg) !important; color: var(--text-secondary) !important; }

/* ===== PROGRESS ===== */
.progress { border-radius: 50px !important; background: var(--bg) !important; }
.progress-bar { border-radius: 50px !important; }

/* ===== WELL ===== */
.well {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
}

/* ===== POPUP ===== */
.popup_block {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ===== BADGE ===== */
.badge {
  border-radius: 50px !important;
  font-weight: 600 !important;
}

/* ===== NAV TABS ===== */
.nav-tabs {
  border-bottom: 1px solid var(--border);
}
.nav-tabs > li > a {
  color: var(--text-secondary);
  transition: color 0.2s, border-color 0.2s;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
}
.nav-tabs > li.active > a {
  color: var(--primary) !important;
  border-color: var(--border) !important;
  border-bottom-color: transparent !important;
  font-weight: 600;
}
.nav-tabs > li > a:hover {
  color: var(--primary);
  border-color: var(--border) !important;
}

/* ===== PAGINATION ===== */
.pagination > li > a {
  color: var(--text-secondary);
  border: 1px solid var(--border);
  transition: all 0.15s;
}
.pagination > li.active > a {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.pagination > li > a:hover {
  background: var(--primary-bg);
  color: var(--primary);
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }