/* ════════════════════════════════════════════════════
   MPConnect — dashboard-premium.css
   Thème premium sombre Bleu / Jaune / Vert
   Pour dashboard-patient.php
   ════════════════════════════════════════════════════ */

:root{
  --mp-bl:#1B6FEE;
  --mp-bl2:#4E96FF;
  --mp-bl3:#0A47C2;

  --mp-jn:#F5C518;
  --mp-jn2:#FFD84D;
  --mp-jn3:#C79A00;

  --mp-vr:#22C55E;
  --mp-vr2:#4ADE80;
  --mp-vr3:#15803D;

  --mp-bg:#040C1C;
  --mp-bg2:#0B1628;
  --mp-bg3:#0F1F38;

  --mp-glass:rgba(255,255,255,.06);
  --mp-glass-2:rgba(27,111,238,.08);
  --mp-border:rgba(255,255,255,.09);

  --mp-txt:#FFFFFF;
  --mp-muted:rgba(255,255,255,.58);

  --mp-shadow:0 10px 30px rgba(0,0,0,.28);
}

/* ── Base dark page ─────────────────────────────────── */
body.dark-theme{
  background:
    radial-gradient(circle at 10% 10%, rgba(27,111,238,.18), transparent 30%),
    radial-gradient(circle at 88% 20%, rgba(245,197,24,.10), transparent 28%),
    radial-gradient(circle at 75% 92%, rgba(34,197,94,.12), transparent 24%),
    linear-gradient(180deg, var(--mp-bg) 0%, var(--mp-bg2) 100%);
  color:var(--mp-txt);
}

body.dark-theme .app-container{
  max-width:430px;
  margin:0 auto;
  min-height:100dvh;
  min-height:-webkit-fill-available;
  position:relative;
  overflow-x:clip;
  padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
}

body.dark-theme main{
  padding:14px 16px 0;
}

/* ── Header courant harmonisé ───────────────────────── */
body.dark-theme .app-header{
  background:transparent;
  border-bottom:none;
  box-shadow:none;
  backdrop-filter:none;
}

body.dark-theme .header-content{
  padding:16px 18px 10px;
}

body.dark-theme .header-title span{
  color:#fff;
  font-weight:800;
}

body.dark-theme .header-title small{
  color:var(--mp-muted);
}

body.dark-theme .btn-icon,
body.dark-theme .btn-back{
  background:var(--mp-glass);
  color:#fff;
  border:1px solid var(--mp-border);
}

body.dark-theme .btn-icon:hover,
body.dark-theme .btn-back:hover{
  background:rgba(27,111,238,.18);
  color:#fff;
}

/* ── Hero ───────────────────────────────────────────── */
.mp-hero{
  margin:0 0 16px;
  padding:20px;
  border-radius:24px;
  background:linear-gradient(135deg, rgba(27,111,238,.22), rgba(10,71,194,.18));
  border:1px solid rgba(27,111,238,.35);
  position:relative;
  overflow:hidden;
  box-shadow:var(--mp-shadow);
  animation:mpFadeUp .45s ease both;
}

.mp-hero::before{
  content:'';
  position:absolute;
  top:-60px;
  right:-60px;
  width:200px;
  height:200px;
  background:radial-gradient(circle, rgba(27,111,238,.28), transparent 68%);
  pointer-events:none;
}

.hero-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.hero-lbl{
  font-size:11px;
  font-weight:700;
  letter-spacing:.6px;
  color:rgba(255,255,255,.56);
  text-transform:uppercase;
  margin-bottom:4px;
}

.hero-num{
  font-size:54px;
  font-weight:900;
  letter-spacing:-3px;
  line-height:1;
  color:#fff;
}

.hero-unit{
  font-size:15px;
  font-weight:600;
  color:rgba(255,255,255,.5);
}

.mp-live-badge{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:12px;
  background:rgba(34,197,94,.15);
  border:1px solid rgba(34,197,94,.28);
  font-size:11px;
  font-weight:700;
  color:var(--mp-vr2);
  white-space:nowrap;
}

.ldot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--mp-vr2);
  animation:mpPing 1.6s infinite;
}

.mp-ecg-wrap{
  height:52px;
  overflow:hidden;
  position:relative;
}

.mp-ecg-line{
  stroke-dasharray:700;
  stroke-dashoffset:700;
  animation:mpEcgAnim 3s ease-in-out infinite;
}

.hero-foot{
  display:flex;
  gap:0;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
}

.hf-item{
  flex:1;
  text-align:center;
}

.hf-item + .hf-item{
  border-left:1px solid rgba(255,255,255,.08);
}

.hf-v{
  font-size:17px;
  font-weight:800;
  color:#fff;
  line-height:1.1;
}

.hf-u{
  font-size:9px;
  font-weight:600;
  color:var(--mp-muted);
  margin-top:4px;
  letter-spacing:.35px;
  text-transform:uppercase;
}

/* ── Section header ─────────────────────────────────── */
.mp-sec-hdr{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin:0 0 8px;
  animation:mpFadeUp .45s .1s both;
}

.sec-ttl{
  font-size:15px;
  font-weight:800;
  color:#fff;
}

.sec-lnk{
  font-size:11px;
  font-weight:700;
  color:var(--mp-bl2);
  text-decoration:none;
}

/* ── Metrics row ─────────────────────────────────────── */
.mp-mrow{
  display:flex;
  gap:10px;
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:4px;
  margin-bottom:16px;
  animation:mpFadeUp .45s .16s both;
}

.mp-mrow::-webkit-scrollbar{
  display:none;
}

.mp-mc{
  min-width:128px;
  padding:14px;
  border-radius:20px;
  flex-shrink:0;
  position:relative;
  overflow:hidden;
  border:1px solid var(--mp-border);
  box-shadow:var(--mp-shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}

.mp-mc:hover{
  transform:translateY(-2px);
}

.mp-mc-bl{
  background:rgba(27,111,238,.18);
  border-color:rgba(27,111,238,.30);
}

.mp-mc-jn{
  background:rgba(245,197,24,.14);
  border-color:rgba(245,197,24,.28);
}

.mp-mc-vr{
  background:rgba(34,197,94,.14);
  border-color:rgba(34,197,94,.28);
}

.mp-mc-mxd{
  background:linear-gradient(135deg, rgba(27,111,238,.15), rgba(34,197,94,.12));
  border-color:rgba(78,150,255,.25);
}

.mc-ico{
  width:30px;
  height:30px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:9px;
}

.mc-ico svg{
  width:15px;
  height:15px;
  fill:none;
  stroke-width:2.3;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ico-bl{background:rgba(27,111,238,.30);}
.ico-bl svg{stroke:var(--mp-bl2);}

.ico-jn{background:rgba(245,197,24,.24);}
.ico-jn svg{stroke:var(--mp-jn2);}

.ico-vr{background:rgba(34,197,94,.24);}
.ico-vr svg{stroke:var(--mp-vr2);}

.ico-mx{background:rgba(78,150,255,.20);}
.ico-mx svg{stroke:var(--mp-bl2);}

.mc-s{
  font-size:10px;
  color:var(--mp-muted);
  font-weight:600;
  margin-bottom:3px;
}

.mc-v{
  font-size:22px;
  font-weight:900;
  color:#fff;
  letter-spacing:-1px;
  line-height:1.1;
}

.mc-badge{
  position:absolute;
  top:10px;
  right:10px;
  font-size:9px;
  font-weight:800;
  padding:3px 7px;
  border-radius:7px;
}

.badge-ok{
  background:rgba(34,197,94,.16);
  color:var(--mp-vr2);
}

.badge-warn{
  background:rgba(245,197,24,.16);
  color:var(--mp-jn2);
}

.badge-hi{
  background:rgba(255,80,80,.16);
  color:#FF8080;
}

/* ── Quick actions ───────────────────────────────────── */
.mp-agrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:16px;
  animation:mpFadeUp .45s .22s both;
}

.mp-atile{
  padding:14px;
  border-radius:20px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
  border:1px solid var(--mp-border);
  box-shadow:var(--mp-shadow);
}

.mp-atile:hover{
  transform:translateY(-2px);
}

.mp-at-bl{
  background:linear-gradient(135deg, rgba(27,111,238,.34), rgba(78,150,255,.24));
  border-color:rgba(78,150,255,.35);
}

.mp-at-jn{
  background:linear-gradient(135deg, rgba(245,197,24,.30), rgba(255,216,77,.18));
  border-color:rgba(245,197,24,.35);
}

.mp-at-vr{
  background:linear-gradient(135deg, rgba(34,197,94,.28), rgba(74,222,128,.18));
  border-color:rgba(34,197,94,.35);
}

.mp-at-mxd{
  background:linear-gradient(135deg, rgba(27,111,238,.18), rgba(34,197,94,.18));
  border-color:rgba(78,150,255,.24);
}

.mp-atile::after{
  content:'';
  position:absolute;
  right:-18px;
  bottom:-18px;
  width:64px;
  height:64px;
  border-radius:50%;
  background:rgba(255,255,255,.07);
}

.at-ico{
  width:36px;
  height:36px;
  border-radius:12px;
  background:rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.at-ico svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:#fff;
  stroke-width:2.3;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.at-body span{
  display:block;
  font-size:9px;
  color:rgba(255,255,255,.62);
  font-weight:600;
  letter-spacing:.3px;
}

.at-body strong{
  display:block;
  font-size:12px;
  line-height:1.25;
  color:#fff;
  font-weight:800;
}

/* ── Chart card ──────────────────────────────────────── */
.mp-chart-card{
  margin-bottom:16px;
  padding:16px;
  border-radius:22px;
  background:var(--mp-glass);
  border:1px solid var(--mp-border);
  box-shadow:var(--mp-shadow);
  animation:mpFadeUp .45s .28s both;
}

.chart-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}

.chart-ttl{
  font-size:14px;
  font-weight:800;
  color:#fff;
}

.chart-pct{
  font-size:17px;
  font-weight:900;
  color:var(--mp-vr2);
  text-align:right;
}

.mp-ctabs{
  display:flex;
  gap:4px;
  margin-bottom:14px;
}

.mp-ctab{
  padding:5px 12px;
  border:none;
  border-radius:9px;
  font-size:10px;
  font-weight:700;
  color:var(--mp-muted);
  background:transparent;
  cursor:pointer;
  transition:.2s ease;
  font-family:inherit;
}

.mp-ctab.active{
  background:linear-gradient(135deg, var(--mp-bl3), var(--mp-bl));
  color:#fff;
}

.mp-bars-row{
  display:flex;
  align-items:flex-end;
  gap:5px;
  height:76px;
}

.mp-bw{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

.mp-bar{
  width:100%;
  min-height:4px;
  border-radius:6px 6px 0 0;
  transition:height .6s cubic-bezier(.34,1.56,.64,1);
}

.mp-bday{
  font-size:9px;
  color:var(--mp-muted);
  font-weight:700;
  text-transform:uppercase;
}

/* ── RDV ─────────────────────────────────────────────── */
.mp-rdv{
  margin-bottom:16px;
  padding:16px;
  border-radius:22px;
  background:linear-gradient(135deg, rgba(245,197,24,.12), rgba(27,111,238,.10));
  border:1px solid rgba(245,197,24,.22);
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:var(--mp-shadow);
  animation:mpFadeUp .45s .34s both;
}

.rdv-cal{
  width:50px;
  height:50px;
  border-radius:14px;
  background:linear-gradient(135deg, var(--mp-jn3), var(--mp-jn));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.rdv-d{
  font-size:20px;
  font-weight:900;
  color:#040C1C;
  line-height:1;
}

.rdv-m{
  font-size:8px;
  font-weight:800;
  color:rgba(4,12,28,.72);
  text-transform:uppercase;
  letter-spacing:.9px;
}

.rdv-info{
  flex:1;
  min-width:0;
}

.rdv-dr{
  font-size:13px;
  font-weight:800;
  color:#fff;
  margin-bottom:2px;
}

.rdv-sp{
  font-size:10px;
  color:var(--mp-muted);
  font-weight:600;
  margin-bottom:5px;
}

.rdv-hr{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:10px;
  font-weight:700;
  color:var(--mp-jn2);
}

.rdv-hr svg{
  width:11px;
  height:11px;
  stroke:var(--mp-jn2);
  fill:none;
  stroke-width:2.3;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.rdv-go{
  width:34px;
  height:34px;
  border-radius:11px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  text-decoration:none;
  transition:.2s ease;
}

.rdv-go:hover{
  background:rgba(245,197,24,.18);
  transform:scale(1.07);
}

.rdv-go svg{
  width:14px;
  height:14px;
  stroke:rgba(255,255,255,.72);
  fill:none;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.mp-rdv-empty{
  margin-bottom:16px;
  padding:15px 16px;
  border-radius:18px;
  background:rgba(245,197,24,.08);
  border:1px solid rgba(245,197,24,.18);
  color:#fff;
  font-size:13px;
  box-shadow:var(--mp-shadow);
  animation:mpFadeUp .45s .34s both;
}

/* ── AI block ────────────────────────────────────────── */
.mp-ai{
  margin-bottom:16px;
  padding:16px;
  border-radius:22px;
  background:linear-gradient(135deg, rgba(34,197,94,.14), rgba(27,111,238,.10));
  border:1px solid rgba(34,197,94,.25);
  position:relative;
  overflow:hidden;
  box-shadow:var(--mp-shadow);
  animation:mpFadeUp .45s .40s both;
}

.mp-ai::before{
  content:'';
  position:absolute;
  top:-50px;
  right:-50px;
  width:130px;
  height:130px;
  background:radial-gradient(circle, rgba(34,197,94,.18), transparent 65%);
  pointer-events:none;
}

.ai-hdr{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}

.ai-orb{
  width:32px;
  height:32px;
  border-radius:11px;
  background:linear-gradient(135deg, var(--mp-vr3), var(--mp-vr));
  display:flex;
  align-items:center;
  justify-content:center;
  animation:mpGlow 2.5s ease-in-out infinite;
}

.ai-orb svg{
  width:15px;
  height:15px;
  stroke:#fff;
  fill:none;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ai-ttl{
  font-size:12px;
  font-weight:800;
  color:var(--mp-vr2);
}

.ai-sub{
  font-size:9px;
  color:var(--mp-muted);
  font-weight:600;
}

.ai-txt{
  font-size:12px;
  color:rgba(255,255,255,.84);
  line-height:1.65;
}

.ai-txt b{
  color:var(--mp-jn2);
  font-weight:700;
}

.ai-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}

.ai-tag{
  padding:4px 10px;
  border-radius:8px;
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.22);
  font-size:10px;
  font-weight:700;
  color:var(--mp-vr2);
  text-decoration:none;
  transition:.2s ease;
}

.ai-tag:hover{
  background:rgba(34,197,94,.24);
}

.mp-ai-loading .ai-txt{
  opacity:.8;
}

/* ── Bottom nav existing harmonisation ──────────────── */
body.dark-theme .bottom-nav{
  background:rgba(11,22,40,.94);
  backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.10);
  border-top:none;
  box-shadow:0 -2px 18px rgba(0,0,0,.25);
  border-radius:26px 26px 0 0;
  max-width:390px;
  left:50%;
  right:auto;
  transform:translateX(-50%);
  bottom:0;
  padding:.55rem .5rem calc(.4rem + env(safe-area-inset-bottom));
}

body.dark-theme .nav-item{
  color:rgba(255,255,255,.42);
  border-radius:14px;
  font-size:10px;
  font-weight:700;
  gap:3px;
}

body.dark-theme .nav-item:hover,
body.dark-theme .nav-item.active{
  background:rgba(255,255,255,.05);
  color:#fff;
}

body.dark-theme .nav-item svg{
  stroke:currentColor;
}

/* ── Existing generic cards/forms in dark theme ─────── */
body.dark-theme .card,
body.dark-theme .stat-card,
body.dark-theme .patient-card,
body.dark-theme .action-card,
body.dark-theme .patient-card-large,
body.dark-theme .result-card,
body.dark-theme .modal-content,
body.dark-theme .page-header,
body.dark-theme .antecedent-card{
  background:var(--mp-glass);
  border-color:var(--mp-border);
  color:#fff;
}

body.dark-theme .patient-name,
body.dark-theme .page-header h1,
body.dark-theme .modal-header h3,
body.dark-theme .section-header h2{
  color:#fff;
}

body.dark-theme .patient-code,
body.dark-theme .action-content p,
body.dark-theme .user-email,
body.dark-theme .subtitle,
body.dark-theme .form-help,
body.dark-theme .empty-state small,
body.dark-theme .empty-state,
body.dark-theme .antecedent-date,
body.dark-theme .antecedent-traitement{
  color:var(--mp-muted);
}

body.dark-theme .form-group label{
  color:#fff;
}

body.dark-theme .form-group input,
body.dark-theme .form-group select,
body.dark-theme .form-group textarea{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.10);
  color:#fff;
}

body.dark-theme .form-group input::placeholder,
body.dark-theme .form-group textarea::placeholder{
  color:rgba(255,255,255,.42);
}

body.dark-theme .form-group input:focus,
body.dark-theme .form-group select:focus,
body.dark-theme .form-group textarea:focus{
  border-color:var(--mp-bl);
  box-shadow:0 0 0 3px rgba(27,111,238,.15);
}

body.dark-theme .close-modal{
  background:rgba(255,255,255,.06);
  color:#fff;
  border:1px solid rgba(255,255,255,.10);
}

/* ── Animations ──────────────────────────────────────── */
@keyframes mpFadeUp{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes mpPing{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.35)}
}

@keyframes mpGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.42)}
  50%{box-shadow:0 0 0 8px rgba(34,197,94,0)}
}

@keyframes mpEcgAnim{
  0%{stroke-dashoffset:700;opacity:.3}
  45%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:-700;opacity:.3}
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width:380px){
  body.dark-theme main{
    padding:12px 12px 0;
  }

  .hero-num{
    font-size:46px;
  }

  .mp-agrid{
    grid-template-columns:1fr;
  }
}

@media (min-width:768px){
  body.dark-theme .app-container{
    max-width:520px;
  }
}
/* ── Plan banner dashboard ─────────────────────────── */
.mp-plan-banner{
  margin:0 0 16px;
  padding:12px 14px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:linear-gradient(90deg, rgba(27,111,238,.18), rgba(245,197,24,.10));
  border:1px solid rgba(245,197,24,.20);
  box-shadow:var(--mp-shadow);
  animation:mpFadeUp .45s .05s both;
}

.mp-plan-banner__left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.mp-plan-banner__icon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  background:rgba(245,197,24,.18);
  color:var(--mp-jn2);
  font-size:16px;
  font-weight:900;
}

.mp-plan-banner__content{
  min-width:0;
}

.mp-plan-banner__label{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:rgba(255,255,255,.58);
  margin-bottom:2px;
}

.mp-plan-banner__value{
  font-size:13px;
  font-weight:800;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mp-plan-banner__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  padding:8px 12px;
  border-radius:10px;
  background:linear-gradient(135deg, var(--mp-jn3), var(--mp-jn));
  color:#04101f;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
  transition:.2s ease;
}

.mp-plan-banner__btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(245,197,24,.28);
}