/* === Yendubi Design System (B8) ======================================= */
:root {
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --bg: #0b0c10; --surface: #101317; --surface-2: #151a21; --text: #e6e8eb; --muted: #9aa3af;
  --primary: #22c55e; --primary-600: #16a34a; --primary-700: #15803d;
  --danger: #ef4444; --warning: #f59e0b; --info: #3b82f6;
  --ring: rgba(34,197,94,.35); --radius: 14px; --shadow: 0 10px 30px rgba(0,0,0,.25); --shadow-sm: 0 6px 18px rgba(0,0,0,.18);
  --space-1: 6px; --space-2: 10px; --space-3: 14px; --space-4: 18px; --space-5: 24px; --space-6: 32px;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;color:var(--text);background:radial-gradient(1200px 500px at 0% -10%, rgba(34,197,94,.08), transparent 50%),radial-gradient(1200px 600px at 120% -20%, rgba(59,130,246,.08), transparent 50%),var(--bg);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.container{width:min(1100px,92%);margin:0 auto}.section{padding:var(--space-6) 0}.section-title{font-size:1.25rem;font-weight:700;margin:var(--space-4) 0 var(--space-3)}
.appbar{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);background:rgba(16,19,23,.7);border-bottom:1px solid rgba(255,255,255,.06)}.appbar .inner{display:flex;align-items:center;gap:14px;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:800;letter-spacing:.2px}.brand img{width:34px;height:34px;border-radius:8px}
.nav{margin-left:auto;display:flex;align-items:center;gap:10px}.nav a{text-decoration:none;color:var(--text);padding:8px 12px;border-radius:10px;opacity:.9}.nav a:hover{background:rgba(255,255,255,.06);opacity:1}.nav .sep{width:1px;height:22px;background:rgba(255,255,255,.08);margin:0 6px}
.card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:var(--space-5);box-shadow:var(--shadow-sm)}.card:hover{border-color:rgba(255,255,255,.12);transform:translateY(-1px);transition:.2s}.card-title{font-size:1.05rem;font-weight:700;margin-bottom:8px}.card-sub{color:var(--muted);font-size:.9rem}
.grid{display:grid;gap:14px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:900px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.grid-3,.grid-2{grid-template-columns:1fr}}
.input,.input-block,select,textarea{width:100%;padding:12px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:var(--surface);color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s,background .2s}.input-block{display:block}
.input:is(:focus,:hover),.input-block:is(:focus,:hover),select:is(:focus,:hover),textarea:is(:focus,:hover){border-color:rgba(255,255,255,.2);box-shadow:0 0 0 4px var(--ring)}label{display:block;margin:10px 0 6px;color:var(--muted);font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:12px;font-weight:700;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .04s ease,opacity .2s,background .2s,border .2s}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--primary);color:#0b140e}.btn-primary:hover{background:var(--primary-600)}.btn-outline{border-color:rgba(255,255,255,.22);color:var(--text);background:transparent}.btn-outline:hover{border-color:rgba(255,255,255,.36);background:rgba(255,255,255,.06)}.btn-ghost{background:transparent;color:var(--text)}.btn-ghost:hover{background:rgba(255,255,255,.06)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{filter:brightness(1.05)}
.table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}.table th,.table td{padding:12px 14px;text-align:left;border-bottom:1px solid rgba(255,255,255,.06)}.table thead th{color:var(--muted);font-weight:700;background:var(--surface-2)}.table tr:hover td{background:rgba(255,255,255,.03)}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;font-size:.8rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1)}.badge-success{color:#072;background:rgba(34,197,94,.2);border-color:rgba(34,197,94,.3)}.badge-danger{color:#300;background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.3)}
.m0{margin:0!important}.mt1{margin-top:var(--space-1)}.mt2{margin-top:var(--space-2)}.mt3{margin-top:var(--space-3)}.mt4{margin-top:var(--space-4)}.mt5{margin-top:var(--space-5)}.mb1{margin-bottom:var(--space-1)}.mb2{margin-bottom:var(--space-2)}.mb3{margin-bottom:var(--space-3)}.mb4{margin-bottom:var(--space-4)}.mb5{margin-bottom:var(--space-5)}.flex{display:flex}.items-center{align-items:center}.gap2{gap:var(--space-2)}.gap3{gap:var(--space-3)}.center{text-align:center}.login-card{max-width:560px;margin:12vh auto}

/* GLOBAL STYLES */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background-color: #f4f4f4;
  color: #222;
  line-height: 1.6;
}

.container {
  max-width: 1000px;
  margin: auto;
  padding: 15px;
}

/* HEADER */
.main-header {
  background: #f58634;
  padding: 15px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo-area img {
  height: 50px;
}

.logo-text h1 {
  margin: 0;
  font-size: 22px;
  color: #000;
}

.logo-text p {
  margin: 0;
  font-size: 13px;
  color: #fff;
}

.main-nav {
  display: flex;
  gap: 15px;
  margin-top: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.main-nav a {
  text-decoration: none;
  color: #000;
  font-weight: 600;
  position: relative;
  padding-bottom: 4px;
}

.main-nav a.active::after {
  content: "";
  height: 3px;
  width: 100%;
  background-color: #ffa733;
  position: absolute;
  left: 0;
  bottom: 0;
}

.logout-btn {
  background-color: #e74c3c;
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 10px;
}

/* BUTTONS */
.btn-primary, button[type="submit"] {
  background-color: #f58634;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  text-align: center;
}

.btn-primary:hover {
  background-color: #e76e1c;
}

.btn-secondary {
  background-color: #777;
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.btn-secondary:hover {
  background-color: #555;
}

/* FORMS */
form {
  background-color: #fff;
  padding: 20px;
  border-radius: 12px;
  max-width: 600px;
  margin: 20px auto;
  box-shadow: 0 0 8px rgba(0,0,0,0.08);
}

form label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
}

form input[type="text"],
form input[type="number"],
form input[type="password"],
form input[type="email"],
form select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 15px;
  font-size: 16px;
}

/* TABLES */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(0,0,0,0.08);
}

th, td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

th {
  background-color: #f58634;
  color: #fff;
  font-size: 16px;
  text-align: center;
}

td {
  text-align: center;
}

tr:hover {
  background-color: #f9f9f9;
}

/* QR READER */
#qr-reader,
#qr-client,
#qr-activite {
  margin: 20px auto;
  max-width: 400px;
  border: 2px dashed #ffa733;
  border-radius: 12px;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0,0,0,0.05);
}

/* ALERTS */
.alert {
  padding: 15px;
  border-radius: 6px;
  font-weight: 600;
  margin: 15px auto;
  max-width: 600px;
  text-align: center;
}

.alert-success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.alert-error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.alert-info {
  background-color: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}

/* INFO BLOC */
.info-bloc {
  background-color: #fff;
  padding: 20px;
  border-left: 5px solid #f58634;
  border-radius: 8px;
  margin-top: 25px;
  font-size: 17px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.info-bloc p {
  margin: 10px 0;
}

/* FOOTER */
.main-footer {
  text-align: center;
  padding: 20px;
  background-color: #fff;
  font-size: 14px;
  color: #777;
  margin-top: 40px;
}

/* RESPONSIVE */
@media screen and (max-width: 768px) {
  .main-nav {
    flex-direction: column;
    align-items: center;
  }

  form,
  table {
    width: 100%;
  }

  .btn-primary, .btn-secondary {
    display: block;
    width: 100%;
    margin-bottom: 10px;
  }

  th, td {
    font-size: 14px;
    padding: 10px;
  }
}

/* --- Toasts (B5) --- */
#toast-container{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:10px;z-index:9999}
.toast{display:flex;align-items:center;gap:10px;min-width:260px;max-width:90vw;background:#111;color:#fff;padding:12px 14px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.15);transform:translateY(0);opacity:.98;transition:transform .25s,opacity .25s}
.toast-hide{opacity:0;transform:translateY(6px)}
.toast-ico{font-weight:800;line-height:1}
.toast-close{margin-left:auto;font-size:18px;line-height:1;background:transparent;border:0;color:#fff;cursor:pointer}
.toast-success{background:#16a34a}.toast-error{background:#dc2626}.toast-warning{background:#d97706}.toast-info{background:#2563eb}

/* --- Pagination (B11) --- */
.table-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:14px 0}
.table-toolbar .filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.table-toolbar .filters .input{min-width:220px}
.pagination{display:flex;gap:8px;align-items:center;margin:16px 0;flex-wrap:wrap}
.pagination a,.pagination span{padding:8px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.18);text-decoration:none;color:var(--text);background:var(--surface)}
.pagination a:hover{background:rgba(255,255,255,.08)}
.pagination .active{background:var(--primary);border-color:transparent;color:#071;}
.pagination .muted{opacity:.6}
.results-count{color:var(--muted);font-size:.9rem}