:root {
  --sidebar-bg:#0f172a; --sidebar-hover:#1e293b; --sidebar-text:#94a3b8; --sidebar-accent:#3b82f6;
  --bg-color:#f8fafc; --card:#ffffff; --border:#e2e8f0; --text-main:#0f172a; --text-muted:#64748b;
  --primary:#2563eb; --secondary:#8b5cf6; --accent:#f59e0b; --danger:#ef4444; --success:#10b981;
  --radius:12px;
  --shadow-sm:0 1px 3px 0 rgb(0 0 0/0.1); --shadow-md:0 4px 6px -1px rgb(0 0 0/0.1); --shadow-lg:0 10px 15px -3px rgb(0 0 0/0.1);
  --ease:cubic-bezier(0.4,0,0.2,1);
  --stat-critical-bg:#fef2f2; --stat-critical-text:#991b1b; --stat-critical-border:#fecaca;
  --stat-caution-bg:#fffbeb; --stat-caution-text:#92400e; --stat-caution-border:#fef3c7;
  --stat-good-bg:#f0fdf4; --stat-good-text:#166534; --stat-good-border:#bbf7d0;
  --stat-neutral-bg:#f1f5f9; --stat-neutral-text:#475569; --stat-neutral-border:#e2e8f0;
}

*{margin:0;padding:0;box-sizing:border-box;outline:none;}
body{font-family:'Inter',sans-serif;background:var(--bg-color);color:var(--text-main);font-size:14px;line-height:1.5;overflow-x:hidden;}

#app{display:flex;height:100vh;overflow:hidden;}
.sidebar{width:260px;background:var(--sidebar-bg);color:var(--sidebar-text);display:flex;flex-direction:column;flex-shrink:0;z-index:100;}
.brand{height:70px;display:flex;align-items:center;padding:0 1.5rem;border-bottom:1px solid rgba(255,255,255,0.05);}
.brand-text{display:flex;flex-direction:column;}
.brand-sub{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--sidebar-text);}

.sidenav{flex:1;padding:1.5rem 1rem;display:flex;flex-direction:column;gap:8px;overflow-y:auto;}
.hnav-item{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:8px;cursor:pointer;font-weight:500;transition:all 0.2s;color:var(--sidebar-text);}
.hnav-item i{width:20px;font-size:16px;text-align:center;}
.hnav-item:hover{background:var(--sidebar-hover);color:#fff;}
.hnav-item.active{background:var(--primary);color:#fff;box-shadow:0 4px 12px rgba(37,99,235,0.3);}

.sidebar-bottom{padding:1.5rem 1rem;border-top:1px solid rgba(255,255,255,0.05);}
.user-profile{display:flex;align-items:center;gap:12px;margin-bottom:1rem;padding:0 8px;}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--sidebar-hover);display:flex;justify-content:center;align-items:center;color:#fff;}
.user-info{display:flex;flex-direction:column;}
.u-name{color:#fff;font-weight:600;font-size:13px;text-transform:capitalize;}
.u-status{font-size:11px;display:flex;align-items:center;gap:5px;}
.ldot{width:6px;height:6px;background:var(--success);border-radius:50%;box-shadow:0 0 5px var(--success);}
.logout-btn{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.1);background:transparent;color:var(--sidebar-text);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;transition:0.2s;}
.logout-btn:hover{background:rgba(239,68,68,0.1);color:var(--danger);border-color:rgba(239,68,68,0.3);}

.main-wrapper{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-color);}
.topbar{height:70px;background:var(--card);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 2rem;flex-shrink:0;gap:16px;}
.tb-actions{display:flex;align-items:center;gap:15px;}
.tb-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--text-muted);cursor:pointer;transition:0.2s;display:flex;align-items:center;justify-content:center;font-size:16px;position:relative;}
.tb-btn:hover{background:var(--bg-color);color:var(--primary);border-color:var(--primary);}

.notif-wrapper{position:relative;}
.notif-badge{position:absolute;top:-2px;right:-2px;background:var(--danger);color:white;font-size:9px;font-weight:bold;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--card);}
.notif-dropdown{position:absolute;top:50px;right:0;width:360px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:200;display:none;flex-direction:column;overflow:hidden;}
.notif-dropdown.show{display:flex;}
.notif-head{padding:12px 16px;font-weight:600;border-bottom:1px solid var(--border);background:#f8fafc;font-size:13px;}
.notif-body{max-height:350px;overflow-y:auto;}
.notif-item{padding:12px 16px;border-bottom:1px solid #f1f5f9;cursor:pointer;transition:0.2s;}
.notif-item:hover{background:#f8fafc;}
.n-title{font-size:12px;font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:6px;}
.n-desc{font-size:11px;color:var(--text-muted);}

.content-area{flex:1;overflow-y:auto;padding:2rem;}
.page-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2rem;}
.page-title{font-size:1.8rem;font-weight:700;color:var(--text-main);letter-spacing:-0.5px;}
.page-sub{color:var(--text-muted);font-size:13px;margin-top:4px;}
.hero-acts{display:flex;gap:10px;}
.main{} 

.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:all 0.2s;font-family:'Inter',sans-serif;}
.btn-sm{padding:6px 12px;font-size:12px;}
.btn-primary{background:var(--primary);color:white;box-shadow:0 2px 4px rgba(37,99,235,0.2);}
.btn-primary:hover{background:#1d4ed8;transform:translateY(-1px);}
.btn-cyan{background:#0ea5e9;color:white;}
.btn-danger{background:var(--danger);color:white;}
.btn-ghost{background:var(--card);color:var(--text-main);border-color:var(--border);}
.btn-ghost:hover{background:var(--bg-color);border-color:#cbd5e1;}

.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;}
.kpi-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;cursor:pointer;transition:transform 0.2s;position:relative;overflow:hidden;}
.kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--cc,var(--border));}
.kpi-card:hover{transform:translateY(-3px);}
.kpi-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:12px;}
.kpi-label{font-size:12px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:0.5px;}
.kpi-val{font-size:2rem;font-weight:700;color:var(--text-main);line-height:1.2;}

.ctrls{display:flex;gap:0.75rem;margin-bottom:1.5rem;flex-wrap:wrap;align-items:center;}
.search-box{display:flex;align-items:center;background:#fff;padding:10px 16px;border-radius:8px;border:1px solid var(--border);}
.search-box i{color:var(--text-muted);margin-right:10px;}
.search-box input{border:none;background:transparent;width:100%;font-size:13px;color:var(--text-main);outline:none;font-family:'Inter',sans-serif;}
.fsel{padding:10px 16px;border-radius:8px;border:1px solid var(--border);background:#fff;font-size:13px;color:var(--text-main);cursor:pointer;outline:none;font-weight:500;transition:0.2s;font-family:'Inter',sans-serif;}
.fsel:focus{border-color:var(--primary);}

.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;}
.ptop{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--border);}
.plbl{font-weight:700;color:var(--text-main);font-size:15px;}
.pct{color:var(--text-muted);font-size:12px;font-weight:500;background:var(--bg-color);padding:4px 10px;border-radius:12px;}
.pright{display:flex;align-items:center;gap:8px;}
.tscroll{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:13px;text-align:left;}
th{padding:12px 1.5rem;background:#f8fafc;color:var(--text-muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid var(--border);white-space:nowrap;transition:0.2s;}
th:hover{color:var(--primary);}
td{padding:14px 1.5rem;border-bottom:1px solid #f1f5f9;vertical-align:middle;color:var(--text-main);}
tr:hover td{background-color:#f8fafc;cursor:pointer;}
.td-tc{font-family:'DM Mono','Courier New',monospace;font-weight:600;color:var(--primary);}

.s-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;letter-spacing:0.3px;}
.s-prio-red{background:var(--stat-critical-bg);color:var(--stat-critical-text);border:1px solid var(--stat-critical-border);}
.s-prio-amber{background:var(--stat-caution-bg);color:var(--stat-caution-text);border:1px solid var(--stat-caution-border);}
.s-prio-green{background:var(--stat-good-bg);color:var(--stat-good-text);border:1px solid var(--stat-good-border);}
.s-neutral{background:var(--stat-neutral-bg);color:var(--stat-neutral-text);border:1px solid var(--stat-neutral-border);}

.chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:1.5rem;}
.chart-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-sm);}
.chart-title{font-size:14px;font-weight:700;color:var(--text-main);margin-bottom:1rem;border-bottom:1px solid #f1f5f9;padding-bottom:10px;}
.chart-container{position:relative;height:250px;width:100%;}

.ov{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(15,23,42,0.4);display:none;justify-content:center;align-items:center;z-index:1000;padding:1rem;backdrop-filter:blur(4px);}
.ov.show{display:flex;}
.modal{background:var(--card);border-radius:var(--radius);width:100%;max-width:500px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);}
.modal.wide{max-width:900px;}
.modal.narrow{max-width:420px;}
.slide-over{position:absolute;right:0;top:0;height:100vh;max-height:100vh;border-radius:0;width:820px;max-width:100%;transform:translateX(100%);transition:transform 0.3s var(--ease);display:flex;flex-direction:column;}
.ov.show .slide-over{transform:translateX(0);}
.slide-over .mbody{flex:1;overflow-y:auto;padding:2rem;}

.mhead{padding:1.5rem 2rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;background:#f8fafc;position:sticky;top:0;z-index:10;}
.mtitle{font-size:1.4rem;font-weight:700;color:var(--text-main);letter-spacing:-0.5px;}
.mmeta{font-size:13px;color:var(--text-muted);margin-top:4px;font-weight:500;}
.mclose{cursor:pointer;font-size:20px;color:var(--text-muted);transition:0.2s;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;border:1px solid var(--border);}
.mclose:hover{background:#f1f5f9;color:var(--danger);}
.mbody{padding:2rem;}

.timeline{display:flex;flex-direction:column;position:relative;padding-left:20px;}
.timeline::before{content:'';position:absolute;left:27px;top:10px;bottom:10px;width:2px;background:var(--border);z-index:1;}
.t-step{display:flex;align-items:flex-start;margin-bottom:1.5rem;position:relative;z-index:2;}
.t-icon{width:16px;height:16px;border-radius:50%;background:var(--card);border:3px solid var(--border);flex-shrink:0;margin-right:15px;margin-top:5px;transition:all 0.3s;}
.t-content{flex:1;background:var(--bg-color);padding:10px 15px;border-radius:8px;border:1px solid transparent;transition:0.2s;}
.t-content:hover{border-color:var(--border);background:#fff;box-shadow:var(--shadow-sm);}
.t-label{font-size:12px;font-weight:600;color:var(--text-main);margin-bottom:6px;}
.t-step.completed .t-icon{border-color:var(--success);background:var(--success);box-shadow:0 0 0 3px rgba(16,185,129,0.2);}
.t-step.completed .t-label{color:var(--success);}
.t-step.active .t-icon{border-color:var(--primary);background:var(--card);box-shadow:0 0 0 3px rgba(37,99,235,0.2);}
.t-step.active .t-label{color:var(--primary);}

.msect{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--text-muted);margin:0 0 1rem 0;letter-spacing:1px;padding-bottom:8px;border-bottom:1px solid var(--border);}
.fi{padding:10px 14px;border-radius:8px;border:1px solid var(--border);font-size:13px;width:100%;transition:0.2s;background:#fff;font-family:'Inter',sans-serif;}
.fi:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,0.1);}

/* FIX #14: fg corrigé en grid 2 colonnes */
.fg{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.ff{display:flex;flex-direction:column;gap:4px;}
.ff.full,.ff.full2{grid-column:1/-1;}
.fg3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;}
.ff label{font-size:12px;font-weight:600;color:var(--text-muted);}

.dg{display:flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--border);border-radius:8px;padding:2px 8px;transition:0.2s;}
.dg:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,0.1);}
.dp{border:none;background:transparent;text-align:center;font-size:13px;font-weight:500;outline:none;padding:6px 0;width:30px;font-family:'DM Mono','Courier New',monospace;}
.dp.yyyy{width:45px;}
.dp-sep{color:var(--text-muted);font-size:13px;}
.mactions{margin-top:2rem;display:flex;justify-content:flex-end;gap:0.75rem;padding-top:1rem;border-top:1px solid var(--border);}

.pag{}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;text-align:center;}

.imp-zone{border:2px dashed var(--border);border-radius:8px;padding:2rem;text-align:center;cursor:pointer;position:relative;background:var(--bg-color);transition:0.2s;}
.imp-zone:hover{border-color:var(--primary);background:#eff6ff;}
.imp-zone input[type="file"]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;}

.confirm-box{background:var(--card);border-radius:var(--radius);padding:2rem;width:90%;max-width:400px;text-align:center;box-shadow:var(--shadow-lg);}
.confirm-icon{font-size:40px;color:var(--danger);margin-bottom:1rem;}
.confirm-title{font-size:20px;font-weight:700;color:var(--text-main);margin-bottom:8px;}
.confirm-msg{font-size:14px;color:var(--text-muted);margin-bottom:1rem;}
.confirm-acts{display:flex;gap:8px;justify-content:center;}

/* AUDIT LOG */
.audit-entry{padding:12px 0;border-bottom:1px solid var(--border);}
.audit-entry:last-child{border-bottom:none;}
.audit-hd{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap;}
.audit-ts{font-size:11px;color:var(--text-muted);font-family:'DM Mono','Courier New',monospace;}
.audit-user{font-size:12px;font-weight:700;color:var(--text-main);}
.audit-action{font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px;background:var(--bg-color);color:var(--text-muted);}
.audit-action.create{background:#f0fdf4;color:#166534;}
.audit-action.update{background:#eff6ff;color:#1e40af;}
.audit-action.delete{background:#fef2f2;color:#991b1b;}
.audit-detail{font-size:12px;color:var(--text-muted);font-family:'DM Mono','Courier New',monospace;background:var(--bg-color);padding:8px 12px;border-radius:6px;margin-top:4px;word-break:break-all;}

/* BACKUP */
.bk-item{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border);gap:12px;}
.bk-item:last-child{border-bottom:none;}
.bk-date{font-size:13px;font-weight:600;color:var(--text-main);}
.bk-meta{font-size:11px;color:var(--text-muted);margin-top:2px;}
.bk-acts{display:flex;gap:6px;}

/* LOGIN */
.login-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;background:#ffffff;display:flex;justify-content:center;align-items:center;z-index:2000;padding:2rem;}
.login-box{width:100%;max-width:450px;background:#ffffff;padding:3rem 2rem;display:flex;flex-direction:column;}
.login-header{text-align:center;margin-bottom:2rem;}
.login-title{font-size:24px;font-weight:800;color:var(--text-main);margin-bottom:4px;letter-spacing:-0.5px;text-align:center;}
.login-subtitle{font-size:14px;color:var(--text-muted);margin-bottom:2.5rem;text-align:center;}
.lform{display:flex;flex-direction:column;}
.input-with-icon{position:relative;display:flex;align-items:center;}
.input-with-icon i{position:absolute;left:14px;color:var(--text-muted);font-size:14px;}
.login-input{padding:14px 14px 14px 40px;border-radius:8px;background:#f8fafc;border:1px solid var(--border);transition:all 0.2s;font-size:14px;width:100%;font-family:'Inter',sans-serif;}
.login-input:focus{background:#fff;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,0.1);}
.login-btn{width:100%;padding:14px;font-size:15px;border-radius:8px;justify-content:center;margin-top:10px;}
.lerr{color:var(--danger);font-size:13px;margin-bottom:15px;font-weight:500;display:none;background:#fef2f2;padding:10px;border-radius:8px;border:1px solid #fecaca;text-align:center;}
.lerr.show{display:block;}

/* ══════════════════════════════════════════
   MOBILE LAYOUT — REFONTE COMPLÈTE
   Approche: layout mobile totalement séparé
   ══════════════════════════════════════════ */

/* ─── MOBILE TOPBAR ─── */
#mob-topbar {
  display: none;
  background: #0f172a;
  height: 54px;
  padding: 0 16px;
  align-items: center;
  justify-content: space-between;
}
.mob-brand { font-family: 'Arial Black', sans-serif; font-size: 20px; font-weight: 900; color: #ef4444; letter-spacing: 2px; }
.mob-topbar-r { display: flex; align-items: center; gap: 10px; }
.mob-topbar-user { font-size: 12px; color: rgba(255,255,255,.55); font-weight: 500; }
.mob-icon-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.7);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 15px; position: relative;
  -webkit-tap-highlight-color: transparent;
}
.mob-icon-btn .notif-badge { top: -3px; right: -3px; }

/* ─── MOBILE BOTTOM NAV ─── */
#mob-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #0f172a;
  border-top: 1px solid rgba(255,255,255,.07);
  z-index: 500;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mob-nav-inner { display: flex; height: 58px; align-items: stretch; }
#mob-nav { height: calc(58px + env(safe-area-inset-bottom, 0px)); }
.mob-nav-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: #64748b; font-size: 9px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
  background: none; border: none; cursor: pointer;
  position: relative; -webkit-tap-highlight-color: transparent;
  transition: color .15s;
}
.mob-nav-btn i { font-size: 19px; }
.mob-nav-btn.act { color: #fff; }
.mob-nav-btn.act::after {
  content: ''; position: absolute; top: 0; left: 20%; right: 20%;
  height: 2px; background: #2563eb; border-radius: 0 0 3px 3px;
}
.mob-nav-badge {
  position: absolute; top: 6px; right: calc(50% - 16px);
  background: #ef4444; color: #fff; font-size: 9px; font-weight: 800;
  min-width: 15px; height: 15px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

/* ─── MOBILE CONTENT AREA ─── */
#mob-content {
  display: none;
}

/* ─── MOBILE PAGE HEADER ─── */
.mob-page-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 16px 10px;
}
.mob-page-title { font-size: 22px; font-weight: 800; color: #0f172a; letter-spacing: -.5px; }
.mob-page-acts { display: flex; gap: 8px; }

/* ─── MOBILE SEARCH ─── */
.mob-search {
  display: flex; align-items: center;
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 12px; padding: 11px 14px; gap: 10px;
  margin: 0 16px 12px;
}
.mob-search i { color: #64748b; font-size: 14px; flex-shrink: 0; }
.mob-search input {
  border: none; background: transparent; font-size: 15px;
  color: #0f172a; flex: 1; outline: none;
  font-family: 'Inter', sans-serif;
}

/* ─── KPI STRIP (horizontal scroll) ─── */
.mob-kpi-strip {
  display: flex; gap: 10px;
  padding: 0 16px 14px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mob-kpi-strip::-webkit-scrollbar { display: none; }
.mob-kpi-chip {
  flex-shrink: 0; min-width: 100px;
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color .15s;
}
.mob-kpi-chip.sel { border-color: #2563eb; background: #eff6ff; }
.mob-kpi-chip-top { display: flex; align-items: center; gap: 8px; }
.mob-kpi-chip-ico {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.mob-kpi-chip-val { font-size: 20px; font-weight: 800; line-height: 1; }
.mob-kpi-chip-lbl { font-size: 10px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }

/* ─── MOBILE CARDS ─── */
.mob-cards { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; }
.mob-card {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 14px; padding: 14px 16px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: box-shadow .15s;
  position: relative; overflow: hidden;
}
.mob-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.mob-card.urg::before { background: #ef4444; }
.mob-card.warn::before { background: #f59e0b; }
.mob-card.ok::before { background: #10b981; }

.mob-card-row1 { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
.mob-card-tc { font-family: 'Courier New', monospace; font-size: 14px; font-weight: 700; color: #2563eb; }
.mob-card-sub { font-size: 11px; color: #64748b; margin-top: 2px; }
.mob-card-badges { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }

.mob-card-row2 { margin-bottom: 10px; }
.mob-card-name { font-size: 14px; font-weight: 600; color: #0f172a; }
.mob-card-detail { font-size: 12px; color: #64748b; margin-top: 1px; }

.mob-card-row3 {
  display: flex; align-items: center; gap: 10px;
  padding-top: 10px; border-top: 1px solid #f1f5f9;
}
.mob-card-prog { flex: 1; }
.mob-prog-track { height: 5px; background: #f1f5f9; border-radius: 99px; overflow: hidden; margin-bottom: 4px; }
.mob-prog-fill { height: 100%; border-radius: 99px; transition: width .3s; }
.mob-prog-pct { font-size: 10px; color: #94a3b8; font-weight: 600; }
.mob-card-date { font-size: 11px; font-weight: 600; white-space: nowrap; }
.mob-card-arr { color: #cbd5e1; font-size: 14px; }

/* ─── MOBILE EMPTY ─── */
.mob-empty {
  display: flex; flex-direction: column; align-items: center;
  padding: 48px 24px; text-align: center;
}
.mob-empty i { font-size: 36px; color: #e2e8f0; margin-bottom: 12px; }
.mob-empty-txt { font-size: 14px; font-weight: 600; color: #94a3b8; }

/* ─── MOBILE DG ─── */
.mob-dg-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 14px; }
.mob-dg-kpi-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px;
  position: relative; overflow: hidden;
}
.mob-dg-kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--cc, #e2e8f0); }
.mob-dg-kpi-ico { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 15px; margin-bottom: 10px; }
.mob-dg-kpi-lbl { font-size: 10px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px; }
.mob-dg-kpi-val { font-size: 22px; font-weight: 800; color: #0f172a; line-height: 1; }

.mob-dg-chart { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px; margin: 0 16px 12px; }
.mob-dg-chart-title { font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 12px; border-bottom: 1px solid #f8fafc; padding-bottom: 8px; }
.mob-dg-chart canvas { max-height: 180px; }

.mob-dg-risks { margin: 0 16px 16px; background: #fff; border: 1px solid #fecaca; border-radius: 14px; overflow: hidden; }
.mob-dg-risks-hd { padding: 12px 14px; background: #fef2f2; font-size: 12px; font-weight: 700; color: #991b1b; display: flex; align-items: center; gap: 8px; }
.mob-risk-item { padding: 12px 14px; border-top: 1px solid #fef2f2; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mob-risk-tc { font-family: 'Courier New', monospace; font-size: 13px; font-weight: 700; color: #2563eb; }
.mob-risk-txt { font-size: 11px; color: #ef4444; font-weight: 600; margin-top: 2px; }
.mob-risk-client { font-size: 11px; color: #64748b; }

/* ─── MOBILE DOCS ─── */
.mob-doc-item {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 14px 16px; cursor: pointer; display: flex; align-items: center; gap: 14px;
  -webkit-tap-highlight-color: transparent;
}
.mob-doc-ico { width: 42px; height: 42px; border-radius: 10px; background: #eff6ff; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #2563eb; flex-shrink: 0; }
.mob-doc-name { font-size: 14px; font-weight: 600; color: #0f172a; }
.mob-doc-meta { font-size: 11px; color: #64748b; margin-top: 2px; }
.mob-doc-arr { color: #cbd5e1; font-size: 14px; margin-left: auto; }

/* ─── MOBILE MODALS (bottom sheet) ─── */
@media (max-width: 768px) {
  .ov { padding: 0; align-items: flex-end; background: rgba(0,0,0,.5); }
  .modal {
    max-width: 100% !important; width: 100% !important;
    max-height: 90vh; border-radius: 20px 20px 0 0 !important;
  }
  .mhead { padding-top: 20px; position: relative; }
  .mhead::before {
    content: ''; position: absolute; top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 36px; height: 4px; background: #e2e8f0; border-radius: 2px;
  }
  .slide-over {
    width: 100% !important; height: 90vh;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.32,.72,0,1);
  }
  .ov.show .slide-over { transform: translateY(0); }
  .mbody { padding: 1.25rem; overflow-y: auto; }
  .fg, .fg2, .fg3 { grid-template-columns: 1fr !important; }
  .ff.full, .ff.full2 { grid-column: 1; }
  .confirm-box { width: 100%; border-radius: 20px 20px 0 0; }
  .notif-dropdown { width: calc(100vw - 32px); right: -46px; }
}

/* ─── MAIN MOBILE SWITCH ─── */
@media (max-width: 768px) {
  /* Prevent body scroll — only mob-content scrolls */
  html, body { overflow: hidden; height: 100%; }

  /* Hide entire desktop app */
  #app { display: none !important; }

  /* Mobile shell — full screen column */
  #mob-topbar { display: flex !important; position: fixed; top: 0; left: 0; right: 0; z-index: 200; }
  #mob-nav    { display: block !important; }
  #mob-content {
    display: block !important;
    position: fixed;
    top: 54px;     /* mob-topbar height */
    left: 0; right: 0;
    bottom: 58px;  /* mob-nav height */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #f8fafc;
    padding-bottom: 8px;
  }

  /* Login page adjustments */
  .login-wrapper { padding: 20px; }
  .login-box { padding: 2rem 1.25rem; border-radius: 16px; }
}

@media (min-width: 769px) {
  #mob-topbar, #mob-nav, #mob-content { display: none !important; }
}

/* ── Bouton "Aujourd'hui" pour les champs de date ── */
.btn-today {
  border: none;
  background: var(--primary);
  color: #fff;
  border-radius: 6px;
  width: 26px; height: 26px;
  font-size: 11px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s;
  margin-left: 4px;
}
.btn-today:hover { background: #1d4ed8; }

/* Native date group on mobile */
.dg-mobile {
  display: flex; align-items: center; gap: 6px;
}
.dg-mobile input[type="date"] {
  flex: 1; padding: 8px 10px; font-size: 14px;
  border-radius: 8px; border: 1px solid var(--border);
  background: #fff; color: var(--text-main);
  font-family: 'Inter', sans-serif;
}
.dg-mobile input[type="date"]:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
  outline: none;
}