:root{
  --nuit-profonde:#101830; --nuit-glow:#1c2b52; --sable:#EFDFC3; --sable-clair:#F7EFDD;
  --or:#C9A227; --or-clair:#E4C567; --rouille:#A6522E; --succes:#3F7A56; --danger:#A6392E;
  --font-display:'Fraunces', serif; --font-body:'Work Sans', sans-serif; --font-mono:'Space Mono', monospace;
}
*{box-sizing:border-box;}
body{font-family:var(--font-body); background:#F3EEE1; margin:0; color:#1B1508;}
h1,h2,h3,h4,.display-face{font-family:var(--font-display);}
.mono{font-family:var(--font-mono);}

.admin-shell{display:flex; min-height:100vh;}
.admin-sidebar{
  width:250px; background:var(--nuit-profonde); color:var(--sable-clair); flex-shrink:0;
  padding:1.5rem 1rem; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.admin-sidebar .brand{font-family:var(--font-display); font-size:1.3rem; margin-bottom:1.8rem; display:block;}
.admin-sidebar .brand span{color:var(--or);}
.side-link{
  display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem; border-radius:10px;
  color:rgba(247,239,221,.75); font-weight:500; font-size:.92rem; cursor:pointer; margin-bottom:.2rem;
}
.side-link:hover{background:rgba(255,255,255,.06); color:var(--sable-clair);}
.side-link.active{background:var(--or); color:var(--nuit-profonde); font-weight:700;}
.side-group-label{font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; opacity:.5; margin:1.1rem 0 .4rem .8rem;}

.admin-main{flex:1; padding:1.8rem 2.2rem; max-width:100%; overflow-x:hidden;}
.admin-topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:1.6rem; flex-wrap:wrap; gap:1rem;}
.role-badge{background:var(--nuit-profonde); color:var(--sable-clair); padding:.35rem .9rem; border-radius:999px; font-size:.8rem;}

.kpi-card{background:#fff; border-radius:16px; padding:1.3rem; box-shadow:0 8px 24px rgba(16,24,48,.06); height:100%;}
.kpi-card .kpi-value{font-family:var(--font-mono); font-size:1.9rem; font-weight:700;}
.kpi-card .kpi-label{font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:#8a7c55; font-weight:600;}
.kpi-trend-up{color:var(--succes);} .kpi-trend-down{color:var(--danger);}

.panel{background:#fff; border-radius:16px; padding:1.5rem; box-shadow:0 8px 24px rgba(16,24,48,.06); margin-bottom:1.5rem;}
.panel-title{font-weight:700; font-size:1.05rem; margin-bottom:1rem; display:flex; justify-content:space-between; align-items:center;}

.tab-view{display:none;} .tab-view.active{display:block;}

table.table-teranga{width:100%; table-layout:fixed; border-collapse:collapse; font-size:.9rem;}
table.table-teranga th, table.table-teranga td{overflow-wrap:break-word; word-break:break-word;}
table.table-teranga th{text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:#8a7c55; padding:.5rem .6rem; border-bottom:2px solid #eee;}
table.table-teranga td{padding:.65rem .6rem; border-bottom:1px solid #f0ece0;}
.status-pill{padding:.2rem .65rem; border-radius:999px; font-size:.74rem; font-weight:600;}
.status-pill.libre, .status-pill.actif, .status-pill.confirmee{background:#e5f2ea; color:var(--succes);}
.status-pill.occupee, .status-pill.enregistree{background:#fbe9df; color:var(--rouille);}
.status-pill.maintenance, .status-pill.en_attente{background:#f0e9d3; color:#8a6d1f;}
.status-pill.annulee, .status-pill.hors_service{background:#f3dede; color:var(--danger);}

.btn-or{background:var(--or); border:none; color:#1B1508; font-weight:600; border-radius:999px; padding:.5rem 1.2rem;}
.btn-or:hover{background:var(--or-clair); color:#1B1508;}
.btn-outline-teranga{border:1.5px solid var(--nuit-profonde); color:var(--nuit-profonde); border-radius:999px; background:transparent; padding:.45rem 1.1rem; font-weight:600;}

/* Groupes de boutons d'action dans les tableaux : compacts et qui passent à la ligne plutôt que déborder */
.table-actions{display:flex; flex-wrap:wrap; gap:.3rem; align-items:center;}
.table-teranga td .btn, .table-actions .btn{
  padding:.22rem .55rem; font-size:.7rem; white-space:nowrap; border-radius:8px; line-height:1.4;
}
.table-teranga-scroll{overflow-x:auto;}
.lien-client{color:var(--nuit-profonde); font-weight:600; text-decoration:underline; text-decoration-color:var(--or); cursor:pointer;}
.lien-client:hover{color:var(--or);}

.badge-card{
  width:260px; border-radius:16px; background:linear-gradient(135deg, var(--nuit-profonde), var(--nuit-glow));
  color:var(--sable-clair); padding:1.2rem; position:relative; overflow:hidden;
}
.badge-card .badge-role{color:var(--or-clair); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;}
.badge-card .badge-qr{background:#fff; border-radius:10px; padding:8px; margin-top:.8rem; display:inline-block;}
.badge-photo-wrap{margin:.6rem 0;}
.badge-photo-wrap img{width:76px; height:76px; border-radius:50%; object-fit:cover; border:3px solid var(--or); display:block; margin:0 auto;}
.photo-miniature{width:34px; height:34px; border-radius:50%; object-fit:cover; border:1px solid #e2d3ad;}
.photo-miniature-placeholder{
  width:34px; height:34px; border-radius:50%; background:var(--nuit-profonde); color:var(--or-clair);
  display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700;
}

#qrReaderBox{max-width:340px; margin:0 auto;}

@media (max-width:900px){
  .admin-sidebar{position:fixed; left:-260px; z-index:50; transition:.25s;}
  .admin-sidebar.open{left:0;}
  .admin-main{padding:1.2rem;}
}