/* ============================================================
   MaIApp — Dark Theme v2
   Inspiré des screenshots fournis
   ============================================================ */

:root {
  --bg-base:      #0d0d0f;
  --bg-card:      #1a1a22;
  --bg-card2:     #22222e;
  --bg-input:     #2a2a38;
  --accent:       #7c3aed;
  --accent-soft:  rgba(124,58,237,.18);
  --accent2:      #3b82f6;
  --green:        #22c55e;
  --orange:       #f59e0b;
  --red:          #ef4444;
  --text-primary: #f1f1f5;
  --text-muted:   #8b8ba0;
  --border:       rgba(255,255,255,.07);
  --safe-bottom:  env(safe-area-inset-bottom, 0px);
  --nav-h:        72px;
  --radius:       14px;
  --radius-sm:    8px;
}

/* ── Reset & base ─────────────────────────────────────── */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  margin: 0;
  padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 8px);
  min-height: 100vh;
}

/* ── Topbar ───────────────────────────────────────────── */
#topbar {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  height: 58px;
}
#topbar .navbar-brand { gap: 8px; }
#topbar .fw-bold { color: var(--text-primary); letter-spacing: 1px; font-size: 16px; }
#topbar .fw-bold span.accent { color: var(--accent); }
#nav-role-badge { background: var(--accent-soft) !important; color: var(--accent) !important; border: 1px solid var(--accent); }
#btn-logout { border-color: var(--border) !important; color: var(--text-muted) !important; }

/* ── View transitions ─────────────────────────────────── */
.view-container { animation: fadeUp .2s ease; }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
.container-fluid { padding: 16px; }

/* ── Cards ────────────────────────────────────────────── */
.card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text-primary) !important;
}
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}

/* ── KPI Cards ────────────────────────────────────────── */
.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.kpi-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.kpi-icon.purple { background: var(--accent-soft); color: var(--accent); }
.kpi-icon.blue   { background: rgba(59,130,246,.18); color: var(--accent2); }
.kpi-icon.green  { background: rgba(34,197,94,.15); color: var(--green); }
.kpi-icon.orange { background: rgba(245,158,11,.15); color: var(--orange); }
.kpi-label { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
.kpi-value { font-size: 26px; font-weight: 700; line-height: 1; }

/* ── Audit cards ──────────────────────────────────────── */
.audit-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.audit-card:active { background: var(--bg-card2); border-color: var(--accent); }

.audit-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}

.audit-progress-bar {
  height: 4px; border-radius: 100px;
  background: var(--bg-input); overflow: hidden; margin-top: 8px;
}
.audit-progress-fill { height: 100%; border-radius: 100px; transition: width .4s; }

/* ── Status badges ────────────────────────────────────── */
.status-badge {
  display: inline-block; padding: 3px 10px; border-radius: 100px;
  font-size: 11px; font-weight: 600; letter-spacing: .3px;
}
.status-brouillon  { background:rgba(139,139,160,.15); color:var(--text-muted); }
.status-en_cours   { background:rgba(124,58,237,.2);  color:var(--accent); border:1px solid rgba(124,58,237,.4); }
.status-terminé    { background:rgba(34,197,94,.15);  color:var(--green); }
.status-validé     { background:rgba(59,130,246,.15); color:var(--accent2); }
.status-rejeté     { background:rgba(239,68,68,.15);  color:var(--red); }

/* ── Bouton principal ─────────────────────────────────── */
.btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  border-radius: 12px !important;
  font-weight: 600; letter-spacing: .5px;
}
.btn-primary:hover, .btn-primary:active {
  background: #6d28d9 !important; border-color: #6d28d9 !important;
}
.btn-outline-primary {
  color: var(--accent) !important; border-color: var(--accent) !important;
  border-radius: 10px !important;
}
.btn-outline-primary:hover, .btn-outline-primary:active {
  background: var(--accent-soft) !important;
}
.btn-warning { background:#f59e0b !important; border-color:#f59e0b !important; border-radius:12px !important; color:#000 !important; }
.btn-success { background:var(--green) !important; border-color:var(--green) !important; border-radius:12px !important; }
.btn-danger  { background:var(--red) !important; border-color:var(--red) !important; border-radius:12px !important; }
.btn-outline-secondary {
  color:var(--text-muted) !important; border-color:var(--border) !important;
  background: transparent !important; border-radius:10px !important;
}
.btn-secondary { background:var(--bg-input) !important; border-color:var(--border) !important; border-radius:10px !important; }

/* ── "+ Nouvel Audit" hero button ─────────────────────── */
#btn-new-audit-hero {
  width: 100%; padding: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none; border-radius: var(--radius);
  color: #fff; font-size: 15px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase;
  box-shadow: 0 4px 20px rgba(124,58,237,.4);
  cursor: pointer; margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
#btn-new-audit-hero:active { opacity: .9; transform: scale(.98); }

/* ── Bottom nav ───────────────────────────────────────── */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: calc(var(--nav-h) + var(--safe-bottom));
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: space-around;
  padding: 10px 0 var(--safe-bottom);
  z-index: 1000;
  box-shadow: 0 -4px 20px rgba(0,0,0,.4);
}
.bottom-nav-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none; color: var(--text-muted);
  font-size: 10px; font-weight: 500; cursor: pointer;
  transition: color .15s; padding: 2px 0;
}
.bottom-nav-btn i { font-size: 22px; }
.bottom-nav-btn.active, .bottom-nav-btn:focus { color: var(--accent); outline: none; }
.bottom-nav-btn.active i { filter: drop-shadow(0 0 6px rgba(124,58,237,.6)); }

/* FAB central (scanner) */
.scan-btn { margin-top: -28px; }
.scan-circle {
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: 0 4px 20px rgba(124,58,237,.5); font-size: 24px;
  transition: transform .15s;
}
.scan-btn:active .scan-circle { transform: scale(.92); }

/* ── Login ─────────────────────────────────────────────── */
#view-login { background: var(--bg-base); }
.login-card { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: 20px !important; }
.login-logo { width:72px; height:72px; background: linear-gradient(135deg, var(--accent), var(--accent2)); border-radius:20px; display:inline-flex; align-items:center; justify-content:center; }
.form-control, .form-select {
  background: var(--bg-input) !important; border: 1px solid var(--border) !important;
  color: var(--text-primary) !important; border-radius: 10px !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
.form-control::placeholder { color: var(--text-muted) !important; }
.input-group-text { background: var(--bg-input) !important; border-color: var(--border) !important; color: var(--text-muted) !important; border-radius: 10px 0 0 10px !important; }
.form-label { color: var(--text-muted) !important; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }

/* ── Section headers ──────────────────────────────────── */
.section-label {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 10px; margin-top: 4px;
}

/* ── Checklist items ──────────────────────────────────── */
.checklist-item {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; margin-bottom: 8px;
  transition: border-color .15s;
}
.item-o  { border-left: 3px solid var(--green) !important; }
.item-n  { border-left: 3px solid var(--red) !important; }
.item-nv { border-left: 3px solid var(--bg-input) !important; }

/* Boutons O/N/NV */
.constat-btn {
  border-radius: 8px !important; font-size: 13px !important;
  font-weight: 600 !important; letter-spacing: .3px;
  transition: all .15s !important;
}
.btn-outline-success { color:var(--green) !important; border-color:rgba(34,197,94,.4) !important; }
.btn-outline-danger  { color:var(--red) !important; border-color:rgba(239,68,68,.4) !important; }
.btn-outline-secondary.constat-btn { color:var(--text-muted) !important; border-color:var(--border) !important; }
.btn-success.constat-btn { background:var(--green) !important; border-color:var(--green) !important; color:#fff !important; }
.btn-danger.constat-btn  { background:var(--red) !important; border-color:var(--red) !important; color:#fff !important; }
.btn-secondary.constat-btn { background:var(--bg-input) !important; border-color:var(--border) !important; color:var(--text-primary) !important; }

/* ── Plan d'action ────────────────────────────────────── */
.plan-zone { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2); border-radius: 10px; padding: 10px; }

/* ── Secteur tabs ─────────────────────────────────────── */
#secteur-tabs { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
#secteur-tabs::-webkit-scrollbar { display:none; }
.secteur-tab {
  white-space:nowrap; border-radius:100px !important; font-size:12px; flex-shrink:0;
  background: var(--bg-card) !important; border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
}
.secteur-tab.btn-primary { background: var(--accent) !important; border-color: var(--accent) !important; color:#fff !important; }

/* ── QR reader ────────────────────────────────────────── */
.qr-reader-container { background:#000; width:100%; max-width:340px; aspect-ratio:1; border-radius:14px; }
.location-btn { border-radius:100px !important; font-size:13px; border: 1px solid var(--border) !important; background:var(--bg-card) !important; color:var(--text-primary) !important; }
.location-btn.btn-primary { background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important; box-shadow:0 2px 10px rgba(124,58,237,.3); }

/* ── Score chips ──────────────────────────────────────── */
.score-chip { border-radius:10px; padding:6px 10px; text-align:center; min-width:60px; }

/* ── Charts ───────────────────────────────────────────── */
canvas { filter: brightness(1.05); }

/* ── Attachments ──────────────────────────────────────── */
.attachments-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.attachment-item { aspect-ratio:1; border-radius:10px; overflow:hidden; position:relative; background:var(--bg-input); cursor:pointer; }
.attachment-item img { width:100%; height:100%; object-fit:cover; }
.att-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(0,0,0,.5); color:#fff; font-size:11px; }
.att-delete { position:absolute; top:4px; right:4px; background:rgba(239,68,68,.85); color:#fff; border:none; border-radius:50%; width:22px; height:22px; font-size:11px; display:flex; align-items:center; justify-content:center; cursor:pointer; }

/* ── Modals ───────────────────────────────────────────── */
.modal-content { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: 20px !important; color: var(--text-primary) !important; }
.modal-header { border-bottom: 1px solid var(--border) !important; }
.modal-footer { border-top: 1px solid var(--border) !important; }
.btn-close { filter: invert(1) !important; }

/* ── Toast ────────────────────────────────────────────── */
.toast { border-radius: 12px !important; box-shadow: 0 4px 20px rgba(0,0,0,.5) !important; }
.text-bg-dark { background: var(--bg-card2) !important; }

/* ── Progress bar ─────────────────────────────────────── */
#progress-bar-container .progress { background: var(--bg-input); border-radius:100px; height:6px; }

/* ── Text helpers ─────────────────────────────────────── */
.text-muted { color: var(--text-muted) !important; }
.text-primary { color: var(--accent) !important; }
.text-success { color: var(--green) !important; }
.text-danger  { color: var(--red) !important; }
.text-warning { color: var(--orange) !important; }
.fw-bold, .fw-semibold { color: var(--text-primary); }

/* ── Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--bg-input); border-radius:4px; }

/* ── Signature canvas ─────────────────────────────────── */
.signature-wrapper { background: var(--bg-input); border: 1px solid var(--border) !important; border-radius:10px; }
#signature-canvas { background: transparent; }

/* ── Alert ────────────────────────────────────────────── */
.alert-danger { background:rgba(239,68,68,.1) !important; border-color:rgba(239,68,68,.3) !important; color:var(--red) !important; border-radius:12px !important; }

/* ── Location card (audit form) ───────────────────────── */
.location-card { border-left: 3px solid var(--accent) !important; }

/* ── Audit detail non-conformités ─────────────────────── */
.border-danger { border-color:rgba(239,68,68,.3) !important; }
.border-success { border-color:rgba(34,197,94,.3) !important; }
.border-secondary { border-color:var(--border) !important; }