/* ===== Reset léger ===== */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
img { max-width:100%; height:auto; }

/* ===== Thème ===== */
:root{
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #1f2937;
  --muted:#6b7280;
  --border:#e8e8ef;
  --brand:#2b79ff;
  --brand-600:#2467d9;
  --ok:#10b981;
  --warn:#f59e0b;
  --danger:#e11d48;
  --chip:#eef2ff;
  --shadow: 0 6px 20px rgba(0,0,0,.06);
  --radius: 12px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1220;
    --card:#121528;
    --text:#e5e7eb;
    --muted:#9aa1af;
    --border:#1e233d;
    --chip:#192041;
    --shadow: 0 6px 20px rgba(0,0,0,.35);
  }
}

body{
  background:var(--bg);
  color:var(--text);
  font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ===== Layout ===== */
.container{
  max-width: 1100px;
  margin: 28px auto;
  padding: 0 16px;
}

h1,h2,h3{
  margin: 0 0 14px;
  letter-spacing:.2px;
}
h2{ font-size: 22px; }

/* ===== Topbar ===== */
.topbar{
  background:var(--card);
  border-bottom:1px solid var(--border);
  padding:12px 16px;
  display:flex; justify-content:space-between; align-items:center;
  position:sticky; top:0; z-index:10;
}
.topbar nav a{
  color:var(--text); text-decoration:none; margin-left:12px; font-weight:500;
  padding:6px 8px; border-radius:8px;
}
.topbar nav a:hover{ background:var(--chip); }

/* Badge simple */
.badge{ display:inline-block; padding:4px 8px; background:var(--chip); border-radius:999px; font-size:12px; }

/* ===== Form ===== */
input[type="text"], input[type="email"], input[type="password"], select{
  height:36px; padding:0 10px; border:1px solid var(--border); border-radius:10px;
  background:var(--card); color:var(--text);
  outline:none; transition:.15s border, .15s box-shadow;
}
input:focus, select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(43,121,255,.15);
}
label{ color:var(--muted); font-size:13px; display:inline-block; }

/* ===== Buttons ===== */
button, .btn{
  border:0; background:var(--brand); color:#fff; height:36px;
  padding:0 14px; border-radius:10px; cursor:pointer; font-weight:600;
  box-shadow:var(--shadow); transition:transform .05s ease, background .15s;
}
button:active, .btn:active{ transform: translateY(1px); }

.btn-danger {
  background: #e74c3c;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
}
.btn-danger:hover {
  background: blue;
}
.alert {
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.alert-success {
  background: #e8f8f5;
  border: 1px solid #1abc9c;
  color: #148f77;
}
.alert-error {
  background: #fdecea;
  border: 1px solid #e74c3c;
  color: #c0392b;
}

/* Small helper spacings */
.mt-2{ margin-top:8px; } .mt-3{ margin-top:12px; } .mt-4{ margin-top:16px; }

/* ===== Alerts ===== */
.alert{
  padding:10px 12px; border-radius:10px; margin:12px 0;
  border:1px solid var(--border); background:var(--card);
}
.alert.error{ border-color:#ffc2c7; background:#ffe9ea; color:#7f1d1d; }
@media (prefers-color-scheme: dark){
  .alert.error{ border-color:#4b1e28; background:#2a0f16; color:#ffb4c0; }
}

/* ===== Table ===== */
.table{
  padding-top:5rem;
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  overflow:hidden; box-shadow:var(--shadow);
}
.table th, .table td{
  border-bottom:1px solid var(--border); padding:10px; vertical-align:top;
}
.table th{ background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent); text-align:left; font-size:13px; color:var(--muted); }
.table tr:last-child td{ border-bottom:0; }
.table tbody tr:hover{ background:rgba(43,121,255,.06); }

/* Icônes état */
.t-ok{ color:var(--ok); font-weight:700; }
.t-no{ color:var(--muted); }

/* ===== Pagination ===== */
.pagination{
  display:flex; gap:6px; flex-wrap:wrap; margin:14px 0;
}
.pagination a, .pagination span{
  padding:6px 10px; border:1px solid var(--border); border-radius:8px; text-decoration:none;
  background:var(--card); color:var(--text);
}
.pagination .active{ background:var(--brand); color:#fff; border-color:var(--brand); }
.pagination .disabled{ opacity:.5; cursor:not-allowed; }
.pagination .ellipsis{ border:none; background:transparent; padding:6px 4px; }

/* ===== Filters row ===== */
.filters{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:16px 0;
}
.checkbox{ display:flex; align-items:center; gap:6px; color:var(--muted); }

/* ===== Responsive table (petits écrans) ===== */
@media (max-width: 760px){
  .table, .table thead, .table tbody, .table th, .table td, .table tr { display:block; }
  .table thead{ display:none; }
  .table tr{ border-bottom:1px solid var(--border); margin:0 0 8px; padding:8px 0; }
  .table td{
    border:none; padding:6px 10px;
  }
  .table td::before{
    content: attr(data-label);
    display:block; font-size:12px; color:var(--muted); margin-bottom:2px;
  }
}

/* style global pour tous les <select> */
select {
  appearance: none;             /* enlève la flèche native (Chrome/Edge/Firefox) */
  -moz-appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: linear-gradient(45deg, transparent 50%, #666 50%),
                    linear-gradient(135deg, #666 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(1em + 2px),
                       calc(100% - 13px) calc(1em + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 6px 28px 6px 10px;
  font-size: 14px;
  color: #333;
  min-width: 180px;
  transition: border-color .2s, box-shadow .2s;
}

/* survol et focus */
select:hover {
  border-color: #7fa9ff;
}
select:focus {
  outline: none;
  border-color: #2b79ff;
  box-shadow: 0 0 0 3px rgba(43, 121, 255, 0.2);
}

/* option grisée par défaut (— Tous —, — Aucun —) */
select option:first-child {
  color: #666;
}

/* petit thème clair uniforme */
label > select {
  margin-top: 4px;
}

/* variante “compacte” pour les selects dans les tableaux */
.inline-form select {
  padding: 4px 24px 4px 8px;
  font-size: 13px;
  min-width: 140px;
}