/* ============ Admin UI - CommandeShop ============ */

:root{
  --bg:#f6f7fb; --card:#fff; --text:#1f2937; --muted:#6b7280;
  --primary:#680000; --primary-600:#0284c7; --primary-50:#e0f2fe;
  --success:#16a34a; --warning:#f59e0b; --danger:#ef4444;
  --border:#e5e7eb; --shadow:0 8px 24px rgba(0,0,0,.06);
  --radius:12px;
}

html,body{background:var(--bg); color:var(--text); font:14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;}
a{color:var(--primary); text-decoration:none;}
a:hover{text-decoration:underline;}

.admin-wrap{max-width:1200px; margin:22px auto; padding:0 16px;}
.admin-topnav{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px;}
.admin-topnav a{background:var(--card); border:1px solid var(--border); padding:8px 12px; border-radius:999px; box-shadow:var(--shadow);}
.admin-topnav a:hover{background:var(--primary-50); border-color:var(--primary); text-decoration:none;}

.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 16px;}
.card + .card{margin-top:16px;}
.card h2,.card h3{margin:0 0 10px 0; font-weight:700}
.card h2{font-size:20px}
.card h3{font-size:16px; color:#0f172a}

.table{width:100%; border-collapse:separate; border-spacing:0; background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:var(--shadow);}
.table th,.table td{padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:middle;}
.table th{background:#f8fafc; text-align:left; font-weight:600; color:#111827;}
.table tr:last-child td{border-bottom:none;}
.table .actions{white-space:nowrap; display:flex; gap:8px; align-items:center;}

.input, select, textarea{border:1px solid var(--border); background:#fff; border-radius:10px; padding:8px 10px; outline:0; min-height:36px;}
.input:focus, select:focus, textarea:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(14,165,233,.2)}
input[type="file"]{border:none; background:transparent; padding:0}

.grid{display:grid; gap:10px}
.grid.cols-2{grid-template-columns: 1fr 1fr}
.grid.cols-3{grid-template-columns: repeat(3, 1fr)}
@media(max-width:900px){ .grid.cols-3{grid-template-columns: 1fr} .grid.cols-2{grid-template-columns: 1fr}}

.btn{display:inline-flex; align-items:center; gap:8px; border-radius:10px; border:1px solid var(--border); background:#fff; padding:8px 12px; cursor:pointer; transition:.15s; user-select:none;}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow);}
.btn:disabled{opacity:.6; pointer-events:none}
.btn i{font-style:normal; opacity:.8}

.btn-primary{background:var(--primary); color:#fff; border-color:var(--primary);}
.btn-primary:hover{background:var(--primary-600);}

.btn-success{background:var(--success); color:#fff; border-color:var(--success);}
.btn-danger{background:var(--danger); color:#fff; border-color:var(--danger);}
.btn-warning{background:var(--warning); color:#fff; border-color:var(--warning);}

.badge{display:inline-block; padding:3px 8px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:12px; font-weight:600;}
.badge.green{background:#ecfdf5; color:#047857}
.badge.red{background:#fef2f2; color:#b91c1c}
.badge.blue{background:#eff6ff; color:#1d4ed8}

.pills{display:flex; flex-wrap:wrap; gap:6px}
.pill{padding:6px 10px; border:1px solid var(--border); background:#fff; border-radius:999px; cursor:pointer}
.pill.active{background:var(--primary); color:#fff; border-color:var(--primary)}

fieldset{border:1px dashed var(--border); padding:10px; border-radius:10px}
legend{padding:0 6px; color:var(--muted)}

.toolbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap}

.note{color:var(--muted); font-size:12px}

/* Boutons + pictos (emoji légers) */
.btn .ico{width:18px; display:inline-block; text-align:center}
.ico-add::before{content:"➕"}
.ico-save::before{content:"💾"}
.ico-del::before{content:"🗑️"}
.ico-up::before{content:"⬆️"}
.ico-down::before{content:"⬇️"}