/* === Global === */
body {
  font-family: 'Segoe UI', Roboto, sans-serif;
  background: #f9f9f9;
  color: #333;
  margin: 0;
  padding: 0;
}

/* === Boutons === */
button, .btn {
  background: #2c3e50;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease;
  font-size: 14px;
}
button:hover, .btn:hover {
  background: #34495e;
}

/* === Tableaux === */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
  background: white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
th {
  background: #ecf0f1;
  padding: 10px;
  text-align: left;
}
td {
  padding: 10px;
  border-top: 1px solid #ddd;
}
tr:nth-child(even) {
  background: #fafafa;
}
tr:hover {
  background: #f1f1f1;
}

/* === Formulaires === */
input, select, textarea {
  width: 100%;
  padding: 8px;
  margin: 6px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: border 0.3s ease, box-shadow 0.3s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: #2c3e50;
  box-shadow: 0 0 4px rgba(44, 62, 80, 0.4);
  outline: none;
}


/* === Dark Mode === */
body.dark-mode {
  background: #1e1e1e;
  color: #e0e0e0;
}
body.dark-mode table {
  background: #2a2a2a;
  color: #e0e0e0;
}
body.dark-mode th {
  background: #333;
  color: #f5f5f5;
}
body.dark-mode tr:nth-child(even) {
  background: #252525;
}
body.dark-mode tr:hover {
  background: #2f2f2f;
}
body.dark-mode input, 
body.dark-mode select, 
body.dark-mode textarea {
  background: #2a2a2a;
  color: #e0e0e0;
  border: 1px solid #555;
}
body.dark-mode input:focus, 
body.dark-mode select:focus, 
body.dark-mode textarea:focus {
  border-color: #888;
  box-shadow: 0 0 4px rgba(200, 200, 200, 0.4);
}
body.dark-mode button, 
body.dark-mode .btn {
  background: #444;
  color: #fff;
}
body.dark-mode button:hover, 
body.dark-mode .btn:hover {
  background: #555;
}


/* === Toast styles === */
#toastNotif.success { background: #27ae60 !important; }
#toastNotif.error { background: #e74c3c !important; }
#toastNotif.info { background: #2980b9 !important; }

/* === Responsive tables === */
.table-wrapper {
  overflow-x: auto;
}
table {
  min-width: 600px;
}

/* === Buttons focus for accessibility === */
button:focus, .btn:focus {
  outline: 3px solid #2980b9;
  outline-offset: 2px;
}