/* ═══════════════════════════════════════════════════════════
   app.css — Maroc-eTicket v2.0 · Dark Professional Theme
   ═══════════════════════════════════════════════════════════ */
:root {
  --bg:         #0d0d1a;
  --bg2:        #12122a;
  --bg3:        #1a1a3a;
  --card:       #161630;
  --card2:      #1e1e3f;
  --border:     rgba(255,255,255,.07);
  --border2:    rgba(255,255,255,.12);
  --text:       #e2e8f0;
  --text2:      #cbd5e1;
  --muted:      #64748b;
  --primary:    #6366f1;
  --primary-d:  #4f46e5;
  --success:    #10b981;
  --warning:    #f59e0b;
  --danger:     #ef4444;
  --info:       #3b82f6;
  --purple:     #a855f7;
  --gold:       #d97706;
  --pink:       #ec4899;
  --sidebar-w:  265px;
  --topbar-h:   64px;
  --radius:     10px;
  --shadow:     0 4px 24px rgba(0,0,0,.4);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; background:var(--bg); color:var(--text); font-family:'Segoe UI',system-ui,sans-serif; font-size:14px; line-height:1.5; }
a { color:var(--primary); text-decoration:none; }
a:hover { color:var(--primary-d); }
img { max-width:100%; }

/* ── Layout ─────────────────────────────────────────────── */
.layout       { display:flex; min-height:100vh; }
.main-wrap    { flex:1; margin-left:var(--sidebar-w); display:flex; flex-direction:column; min-height:100vh; }
.main-content { flex:1; padding:28px; background:var(--bg); }
.app-footer   { padding:14px 28px; border-top:1px solid var(--border); background:var(--bg2);
  display:flex; justify-content:space-between; align-items:center; }
.app-footer p { font-size:12px; color:var(--muted); }

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
  width:var(--sidebar-w); background:var(--bg2); border-right:1px solid var(--border);
  position:fixed; top:0; left:0; height:100vh; overflow-y:auto; z-index:1000;
  display:flex; flex-direction:column; transition:transform .25s ease;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}
.sidebar::-webkit-scrollbar { width:4px; }
.sidebar::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }

.sb-brand { display:flex; align-items:center; gap:10px; padding:20px 18px;
  border-bottom:1px solid var(--border); }
.sb-logo  { width:44px; height:auto; object-fit:contain; flex-shrink:0; }
.sb-name  { font-size:15px; font-weight:800; letter-spacing:.3px; color:var(--text); }
.sb-ver   { font-size:10px; color:var(--muted); }

.sb-user  { display:flex; align-items:center; gap:10px; padding:14px 18px;
  border-bottom:1px solid var(--border); background:rgba(255,255,255,.02); }
.sb-avatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--purple));
  display:flex; align-items:center; justify-content:center; font-weight:800;
  font-size:15px; color:#fff; flex-shrink:0; }
.sb-uname  { font-size:13px; font-weight:600; color:var(--text); }

.sb-menu { list-style:none; padding:8px 0; flex:1; }
.sb-section { padding:16px 18px 5px; font-size:9.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); }
.sb-menu li a {
  display:flex; align-items:center; gap:10px; padding:10px 18px;
  color:var(--muted); border-radius:0; transition:.18s; font-size:13px;
  border-right:2px solid transparent;
}
.sb-menu li a i.ico { width:18px; text-align:center; font-size:14px; flex-shrink:0; }
.sb-menu li a .arrow { margin-left:auto; font-size:10px; transition:transform .2s; }
.sb-menu li a:hover { color:var(--text2); background:rgba(255,255,255,.04); }
.sb-menu li.active > a { color:var(--primary); background:rgba(99,102,241,.1); border-right-color:var(--primary); }
.sub-menu  { list-style:none; display:none; background:rgba(0,0,0,.15); }
.sb-menu li.open > .sub-menu { display:block; }
.sb-menu li.open > a .arrow { transform:rotate(90deg); }
.sub-menu li a { padding:8px 18px 8px 46px; font-size:12px; }
.sb-menu li.logout a { color:var(--danger) !important; }
.sb-menu li.logout a:hover { background:rgba(239,68,68,.08) !important; }

/* ── Topbar ──────────────────────────────────────────────── */
.topbar {
  height:var(--topbar-h); background:var(--bg2); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; position:sticky; top:0; z-index:500;
}
.topbar-left  { display:flex; align-items:center; gap:14px; }
.topbar-right { display:flex; align-items:center; gap:10px; }
.topbar-title { font-size:17px; font-weight:700; }
.topbar-btn   { background:none; border:none; cursor:pointer; color:var(--muted);
  padding:8px; border-radius:8px; display:flex; align-items:center; justify-content:center; transition:.15s; }
.topbar-btn:hover { background:var(--bg3); color:var(--text); }

/* ── KPI Grid ────────────────────────────────────────────── */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; margin-bottom:24px; }
.kpi-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; display:flex; align-items:center; gap:16px;
  transition:.2s; cursor:default; }
.kpi-card:hover { border-color:var(--border2); transform:translateY(-2px); box-shadow:var(--shadow); }
.kpi-icon { width:52px; height:52px; border-radius:12px; display:flex;
  align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.kpi-val  { font-size:28px; font-weight:800; line-height:1.1; }
.kpi-lbl  { font-size:12px; color:var(--muted); margin-top:3px; }
.kpi-sub  { font-size:11px; color:var(--success); margin-top:2px; }

/* ── Cards ───────────────────────────────────────────────── */
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); }
.card-header {
  padding:16px 20px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  font-weight:700; font-size:14px; color:var(--text2); gap:12px;
}
.card-body   { padding:20px; }
.card-footer { padding:12px 20px; border-top:1px solid var(--border);
  background:rgba(255,255,255,.015); border-radius:0 0 var(--radius) var(--radius); }

/* ── Tables ──────────────────────────────────────────────── */
.tbl-wrap { overflow-x:auto; border-radius:0 0 var(--radius) var(--radius); }
.tbl { width:100%; border-collapse:collapse; }
.tbl thead tr { background:var(--bg3); }
.tbl th { padding:11px 16px; text-align:left; font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.6px; color:var(--muted); white-space:nowrap; }
.tbl td { padding:12px 16px; border-bottom:1px solid var(--border); vertical-align:middle; }
.tbl tbody tr:hover { background:rgba(255,255,255,.02); }
.tbl tbody tr:last-child td { border-bottom:none; }
.tbl-actions { display:flex; gap:4px; align-items:center; }

/* ── Forms ───────────────────────────────────────────────── */
.form-label  { display:block; font-size:11.5px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.form-control, .form-select, textarea.form-control {
  display:block; width:100%; padding:10px 14px;
  background:var(--bg3); border:1px solid var(--border2); color:var(--text);
  border-radius:8px; font-size:14px; font-family:inherit; transition:.18s;
  -webkit-appearance:none;
}
.form-control:focus, .form-select:focus {
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(99,102,241,.2);
}
.form-control::placeholder { color:var(--muted); }
.form-hint { font-size:11px; color:var(--muted); margin-top:5px; }
.form-error { font-size:11px; color:var(--danger); margin-top:5px; }
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.form-group { margin-bottom:16px; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 18px; border-radius:8px; font-size:13px; font-weight:600;
  cursor:pointer; border:none; transition:.18s; white-space:nowrap;
  text-decoration:none; line-height:1;
}
.btn:hover    { opacity:.88; transform:translateY(-1px); }
.btn:active   { transform:translateY(0); }
.btn-primary  { background:var(--primary);   color:#fff; }
.btn-success  { background:var(--success);   color:#fff; }
.btn-warning  { background:var(--warning);   color:#000; }
.btn-danger   { background:var(--danger);    color:#fff; }
.btn-info     { background:var(--info);      color:#fff; }
.btn-purple   { background:var(--purple);    color:#fff; }
.btn-outline  { background:transparent; border:1px solid var(--border2); color:var(--text2); }
.btn-outline:hover { background:var(--bg3); }
.btn-ghost    { background:transparent; color:var(--muted); }
.btn-ghost:hover { background:var(--bg3); color:var(--text); }
.btn-sm       { padding:6px 12px; font-size:12px; }
.btn-xs       { padding:4px 8px;  font-size:11px; border-radius:6px; }
.btn-block    { width:100%; }
.btn-lg       { padding:12px 24px; font-size:15px; }
.btn-icon     { padding:8px; width:34px; height:34px; }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* ── Badges ──────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 9px;
  border-radius:20px; font-size:11px; font-weight:700; white-space:nowrap; }
.badge-primary { background:rgba(99,102,241,.15);  color:var(--primary); border:1px solid rgba(99,102,241,.25); }
.badge-success { background:rgba(16,185,129,.15);  color:var(--success); border:1px solid rgba(16,185,129,.25); }
.badge-warning { background:rgba(245,158,11,.15);  color:var(--warning); border:1px solid rgba(245,158,11,.25); }
.badge-danger  { background:rgba(239,68,68,.15);   color:var(--danger);  border:1px solid rgba(239,68,68,.25); }
.badge-info    { background:rgba(59,130,246,.15);   color:var(--info);    border:1px solid rgba(59,130,246,.25); }
.badge-purple  { background:rgba(168,85,247,.15);  color:var(--purple);  border:1px solid rgba(168,85,247,.25); }
.badge-gold    { background:rgba(217,119,6,.15);   color:var(--gold);    border:1px solid rgba(217,119,6,.25); }
.badge-pink    { background:rgba(236,72,153,.15);  color:var(--pink);    border:1px solid rgba(236,72,153,.25); }
.badge-muted   { background:rgba(100,116,139,.1);  color:var(--muted);   border:1px solid var(--border); }

/* ── Alerts ──────────────────────────────────────────────── */
.alert { padding:12px 16px; border-radius:8px; border:1px solid;
  display:flex; align-items:flex-start; gap:10px; margin-bottom:16px; font-size:13px; }
.alert-success { background:rgba(16,185,129,.08);  border-color:rgba(16,185,129,.25); color:var(--success); }
.alert-danger  { background:rgba(239,68,68,.08);   border-color:rgba(239,68,68,.25);  color:var(--danger); }
.alert-warning { background:rgba(245,158,11,.08);  border-color:rgba(245,158,11,.25); color:var(--warning); }
.alert-info    { background:rgba(59,130,246,.08);   border-color:rgba(59,130,246,.25); color:var(--info); }

/* ── Modals ──────────────────────────────────────────────── */
.modal-content { background:var(--card2); border:1px solid var(--border2); border-radius:14px; }
.modal-header  { border-bottom:1px solid var(--border); padding:18px 22px; }
.modal-footer  { border-top:1px solid var(--border); padding:14px 22px; }
.modal-title   { font-weight:700; color:var(--text); font-size:15px; }
.btn-close     { filter:invert(1) opacity(.7); }

/* ── Tabs ────────────────────────────────────────────────── */
.tabs-nav   { display:flex; gap:2px; border-bottom:2px solid var(--border); margin-bottom:20px; flex-wrap:wrap; }
.tab-btn    { background:none; border:none; cursor:pointer; color:var(--muted);
  padding:10px 18px; font-size:13px; font-weight:600;
  border-bottom:2px solid transparent; margin-bottom:-2px; transition:.18s; }
.tab-btn:hover  { color:var(--text); }
.tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); }
.tab-pane       { display:none; }
.tab-pane.active{ display:block; }

/* ── Page Header ─────────────────────────────────────────── */
.page-hdr { display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.page-hdr-title { font-size:24px; font-weight:800; }
.page-hdr-sub   { color:var(--muted); font-size:13px; margin-top:3px; }
.page-hdr-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ── Filtres ─────────────────────────────────────────────── */
.filter-bar { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
  padding:16px; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); margin-bottom:16px; }
.filter-bar .form-control, .filter-bar .form-select { width:auto; max-width:220px; }

/* ── Pagination ──────────────────────────────────────────── */
.pagination-wrap { display:flex; justify-content:space-between; align-items:center; padding:14px 0; }
.pagination { display:flex; gap:4px; list-style:none; }
.page-link  { display:block; padding:7px 12px; background:var(--bg3);
  border:1px solid var(--border); border-radius:6px; color:var(--text2);
  font-size:13px; font-weight:600; transition:.15s; }
.page-link:hover    { background:var(--primary); color:#fff; border-color:var(--primary); }
.page-item.active .page-link { background:var(--primary); color:#fff; border-color:var(--primary); }

/* ── Auth ────────────────────────────────────────────────── */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 0%,rgba(99,102,241,.12) 0%,var(--bg) 70%); padding:24px; }
.auth-box  { background:var(--card2); border:1px solid var(--border2); border-radius:16px;
  padding:44px; width:100%; max-width:450px; box-shadow:var(--shadow); }
.auth-logo  { text-align:center; margin-bottom:28px; }
.auth-logo img { height:56px; }
.auth-title { text-align:center; font-size:26px; font-weight:800; margin-bottom:6px; }
.auth-sub   { text-align:center; color:var(--muted); font-size:13px; margin-bottom:30px; }
.auth-divider { display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--muted); font-size:12px; }
.auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:var(--border); }

/* ── Upload Zone ─────────────────────────────────────────── */
.drop-zone { border:2px dashed var(--border2); border-radius:var(--radius);
  padding:36px 24px; text-align:center; cursor:pointer; transition:.2s; }
.drop-zone:hover,.drop-zone.active { border-color:var(--primary); background:rgba(99,102,241,.05); }
.drop-zone-icon { font-size:48px; margin-bottom:12px; opacity:.6; }

/* ── Avatar ──────────────────────────────────────────────── */
.avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--purple));
  display:inline-flex; align-items:center; justify-content:center; font-weight:800;
  font-size:16px; color:#fff; flex-shrink:0; }
.avatar-sm { width:30px; height:30px; font-size:12px; }
.avatar-lg { width:64px; height:64px; font-size:24px; }

/* ── Utils ───────────────────────────────────────────────── */
.d-flex      { display:flex; }
.d-grid      { display:grid; }
.align-center{ align-items:center; }
.justify-between { justify-content:space-between; }
.justify-center  { justify-content:center; }
.gap-4  { gap:4px; } .gap-8  { gap:8px; } .gap-12 { gap:12px; }
.gap-16 { gap:16px;} .gap-20 { gap:20px;}
.mt-4   { margin-top:4px; } .mt-8   { margin-top:8px; }
.mt-12  { margin-top:12px;} .mt-16  { margin-top:16px;}
.mt-20  { margin-top:20px;} .mt-24  { margin-top:24px;}
.mb-0   { margin-bottom:0!important; }
.mb-8   { margin-bottom:8px;  } .mb-12 { margin-bottom:12px; }
.mb-16  { margin-bottom:16px; } .mb-24 { margin-bottom:24px; }
.w-100  { width:100%; }
.text-center { text-align:center; }
.text-right  { text-align:right; }
.text-muted  { color:var(--muted) !important; }
.text-primary{ color:var(--primary) !important; }
.text-success{ color:var(--success) !important; }
.text-danger { color:var(--danger)  !important; }
.text-warning{ color:var(--warning) !important; }
.fw-600 { font-weight:600; } .fw-700 { font-weight:700; } .fw-800 { font-weight:800; }
.fs-11  { font-size:11px;  } .fs-12  { font-size:12px;  }
.fs-13  { font-size:13px;  } .fs-16  { font-size:16px;  }
.mono   { font-family:monospace; letter-spacing:.5px; }
.truncate { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:992px) {
  .sidebar    { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); box-shadow:4px 0 24px rgba(0,0,0,.6); }
  .main-wrap  { margin-left:0; }
  .overlay    { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:999; }
  .overlay.show { display:block; }
  .form-row,.form-row-3 { grid-template-columns:1fr; }
  .kpi-grid   { grid-template-columns:1fr 1fr; }
}
@media (max-width:576px) {
  .kpi-grid   { grid-template-columns:1fr; }
  .main-content { padding:16px; }
  .auth-box   { padding:28px 20px; }
}

/* ── Print ───────────────────────────────────────────────── */
@media print {
  .sidebar,.topbar,.app-footer,.btn,.filter-bar,.pagination-wrap,.tbl-actions,
  [class*="btn-"] { display:none !important; }
  .main-wrap  { margin-left:0 !important; }
  .main-content { padding:0 !important; }
  body,.card  { background:#fff !important; color:#000 !important; }
  .card       { border:1px solid #ddd; box-shadow:none; break-inside:avoid; }
  .badge      { border:1px solid #ccc; color:#333 !important; background:#f5f5f5 !important; }
}