:root{
  --bg:#f4f6f9;
  --card:#ffffff;
  --text:#1e2433;
  --muted:#6b7280;
  --border:#e5e8ee;
  --primary:#2f6fed;
  --primary-dark:#2456c4;
  --attente:#f59e0b;
  --cours:#3b82f6;
  --livree:#16a34a;
  --annulee:#dc2626;
  --radius:10px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:'Segoe UI', Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

.topbar{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff;
  padding:16px 24px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  position:sticky;
  top:0;
  z-index:10;
}
.topbar h1{margin:0;font-size:1.3rem;}

.stats{display:flex;gap:10px;flex-wrap:wrap;width:100%;justify-content:flex-start;}
.stat{
  background:rgba(255,255,255,.15);
  border-radius:8px;
  padding:6px 12px;
  text-align:center;
  min-width:64px;
  flex:1 1 64px;
}
.stat span{display:block;font-size:1.1rem;font-weight:700;}
.stat small{font-size:.68rem;opacity:.85;}
.stat-attente span{color:#fde68a;}
.stat-cours span{color:#bfdbfe;}
.stat-livree span{color:#bbf7d0;}

@media(max-width:640px){
  .topbar{padding:14px 16px;flex-direction:column;align-items:stretch;gap:10px;}
  .topbar h1{font-size:1.1rem;text-align:center;}
  .stats{justify-content:space-between;}
  .stat{padding:6px 4px;min-width:0;}
}

.container{
  max-width:1200px;
  margin:24px auto;
  padding:0 16px 40px;
  display:grid;
  grid-template-columns:360px 1fr;
  gap:20px;
  align-items:start;
}
@media(max-width:900px){
  .container{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .container{margin:16px auto;padding:0 10px 30px;gap:14px;}
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.card h2{margin-top:0;font-size:1.05rem;}

@media(max-width:640px){
  .card{padding:14px;border-radius:8px;}
}

.field{margin-bottom:14px;display:flex;flex-direction:column;gap:6px;}
.field label{font-size:.82rem;font-weight:600;color:var(--muted);}
input, select, textarea{
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  font-size:.9rem;
  font-family:inherit;
  background:#fff;
  color:var(--text);
}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(47,111,237,.15);
}
textarea{resize:vertical;}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
@media(max-width:480px){
  .grid2, .grid3{grid-template-columns:1fr;}
}

.form-actions{display:flex;gap:10px;margin-top:8px;}
.btn{
  border:none;
  border-radius:8px;
  padding:10px 16px;
  font-size:.9rem;
  font-weight:600;
  cursor:pointer;
  transition:.15s;
}

@media(max-width:640px){
  .form-actions{flex-direction:column;}
  .btn{width:100%;padding:12px 16px;font-size:.95rem;}
  input, select, textarea{font-size:16px;} /* évite le zoom auto sur iOS */
}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border);}
.btn-ghost:hover{background:#f0f2f5;}

.list-header{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.filters{display:flex;gap:8px;flex-wrap:wrap;}
.filters input, .filters select{min-width:180px;}

@media(max-width:640px){
  .list-header{flex-direction:column;align-items:stretch;}
  .filters{flex-direction:column;}
  .filters input, .filters select{min-width:0;width:100%;}
}

.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:.85rem;}
th, td{padding:10px 8px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top;}
th{color:var(--muted);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.03em;}
tr:hover td{background:#f9fafc;}

.badge{
  display:inline-block;
  padding:4px 9px;
  border-radius:20px;
  font-size:.72rem;
  font-weight:700;
  color:#fff;
  white-space:nowrap;
}
.badge-attente{background:var(--attente);}
.badge-cours{background:var(--cours);}
.badge-livree{background:var(--livree);}
.badge-annulee{background:var(--annulee);}

select.statut-select{
  padding:5px 6px;
  font-size:.78rem;
  border-radius:6px;
}

.row-actions{display:flex;gap:6px;flex-wrap:wrap;}
.icon-btn{
  border:1px solid var(--border);
  background:#fff;
  border-radius:6px;
  padding:5px 9px;
  cursor:pointer;
  font-size:.78rem;
}
.icon-btn:hover{background:#f0f2f5;}
.icon-btn.danger{color:var(--annulee);border-color:#f3c6c6;}
.icon-btn.danger:hover{background:#fdeeee;}

.loading, .empty-msg{color:var(--muted);text-align:center;padding:30px 0;}

/* --- Vue "cartes" du tableau sur mobile --- */
@media(max-width:700px){
  table, thead, tbody, th, td, tr{display:block;}
  thead{
    position:absolute;
    width:1px;height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }
  tbody tr{
    background:#fff;
    border:1px solid var(--border);
    border-radius:10px;
    margin-bottom:12px;
    padding:10px 12px;
    box-shadow:0 1px 2px rgba(0,0,0,.03);
  }
  tbody tr:hover td{background:transparent;}
  td{
    border:none;
    padding:8px 0;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    text-align:right;
    border-bottom:1px dashed var(--border);
  }
  td:last-child{border-bottom:none;}
  td::before{
    content:attr(data-label);
    font-size:.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:var(--muted);
    text-align:left;
    flex:0 0 auto;
  }
  td[data-label="Actions"]{justify-content:flex-end;}
  .row-actions{justify-content:flex-end;width:100%;}
  .statut-select{width:100%;max-width:160px;}
}

.toast{
  position:fixed;
  bottom:20px;
  right:20px;
  background:#1e2433;
  color:#fff;
  padding:12px 18px;
  border-radius:8px;
  font-size:.85rem;
  opacity:0;
  transform:translateY(10px);
  transition:.25s;
  pointer-events:none;
  max-width:300px;
}
.toast.show{opacity:1;transform:translateY(0);}
.toast.error{background:var(--annulee);}
.toast.success{background:var(--livree);}

@media(max-width:640px){
  .toast{
    left:16px;
    right:16px;
    bottom:16px;
    max-width:none;
    text-align:center;
  }
}