/* diab-pro.fr — UX Theme (Bootstrap 5.3) */
:root{
  --dp-radius: 18px;
  --dp-radius-sm: 14px;
  --dp-border: rgba(15, 23, 42, .10);
  --dp-muted: rgba(15, 23, 42, .62);
  --dp-bg: #f6f8fc;
  --dp-card: rgba(255,255,255,.86);
  --dp-card-solid: #ffffff;
  --dp-primary: #2563eb;
  --dp-primary-2: #1d4ed8;
  --dp-success: #16a34a;
  --dp-danger: #ef4444;
  --dp-shadow: 0 10px 35px rgba(15, 23, 42, .08);
  --dp-shadow-2: 0 18px 60px rgba(15, 23, 42, .12);
}

html, body { height: 100%; }

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1200px 520px at 15% -10%, rgba(37, 99, 235, .18), transparent 60%),
    radial-gradient(1000px 520px at 92% 0%, rgba(22, 163, 74, .14), transparent 60%),
    radial-gradient(900px 520px at 20% 105%, rgba(245, 158, 11, .12), transparent 55%),
    var(--dp-bg);
  color: #0f172a;
}

.dp-container{ max-width: 1120px; }
.dp-muted{ color: var(--dp-muted) !important; }

a{ text-underline-offset: 3px; }
a:hover{ text-decoration-thickness: 2px; }

/* ── Navbar ── */
.dp-navbar{
  background: rgba(255,255,255,.78) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--dp-border);
  box-shadow: 0 6px 26px rgba(15, 23, 42, .06);
}
.dp-navbar .navbar-brand{
  font-weight: 900;
  letter-spacing: -.02em;
}
.dp-navbar .navbar-brand .dot{
  display:inline-block;
  width:.55rem;height:.55rem;border-radius:99px;
  background: linear-gradient(180deg, var(--dp-primary), var(--dp-primary-2));
  margin-left:.35rem;
  vertical-align: middle;
}
.dp-navbar .nav-link{
  color: rgba(15, 23, 42, .78) !important;
  font-weight: 700;
  border-radius: 12px;
  padding: .45rem .7rem;
}
.dp-navbar .nav-link:hover{ background: rgba(37,99,235,.08); }
.dp-navbar .nav-link.active{
  color: rgba(15, 23, 42, 1) !important;
  background: rgba(37,99,235,.12);
}
.navbar-toggler{
  border-radius: 14px;
  border: 1px solid var(--dp-border);
}

/* ── Layout ── */
main.dp-main{
  padding-top: 1.25rem;
  padding-bottom: 2.25rem;
}
footer.dp-footer{
  border-top: 1px solid var(--dp-border);
  background: rgba(255,255,255,.55);
}

/* ── Cards ── */
.card, .list-group, .dropdown-menu{
  border-radius: var(--dp-radius);
}
.card{
  background: var(--dp-card);
  border: 1px solid var(--dp-border);
  box-shadow: var(--dp-shadow);
}
.card-solid{ background: var(--dp-card-solid); }
.dp-card-hover{ transition: transform .10s ease, box-shadow .18s ease; }
.dp-card-hover:hover{ transform: translateY(-2px); box-shadow: var(--dp-shadow-2); }

/* ── Boutons ── */
.btn{
  border-radius: var(--dp-radius-sm);
  font-weight: 800;
  letter-spacing: -.01em;
}
.btn-primary{
  background: linear-gradient(180deg, var(--dp-primary), var(--dp-primary-2));
  border: none;
  box-shadow: 0 10px 25px rgba(37,99,235,.18);
}
.btn-primary:hover{ filter: brightness(.98); }
.btn-success{
  background: linear-gradient(180deg, #22c55e, var(--dp-success));
  border: none;
  box-shadow: 0 10px 25px rgba(22,163,74,.16);
}
.btn-outline-secondary, .btn-outline-success, .btn-outline-primary{
  border-color: rgba(15,23,42,.16);
}
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-primary:hover{ border-color: rgba(15,23,42,.26); }

/* ── User dropdown ── */
.dp-user-btn{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  background: rgba(255,255,255,.70);
  border: 1px solid var(--dp-border);
  padding: .35rem .55rem;
  border-radius: 999px;
  font-weight: 800;
}
.dp-user-btn:hover{ background: rgba(255,255,255,.92); }
.dp-avatar{
  width: 34px; height: 34px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: white;
  background: linear-gradient(180deg, var(--dp-primary), var(--dp-primary-2));
  box-shadow: 0 10px 25px rgba(37,99,235,.22);
  flex-shrink: 0;
}
.dp-dropdown{
  border: 1px solid var(--dp-border);
  box-shadow: var(--dp-shadow-2);
  padding: .25rem;
}
.dp-dropdown .dropdown-item{
  border-radius: 12px;
  font-weight: 700;
  padding: .55rem .8rem;
}
.dp-dropdown .dropdown-item:hover{ background: rgba(37,99,235,.08); }
.dp-dropdown .dropdown-item.text-danger:hover{ background: rgba(239,68,68,.10); }

/* ── Forms ── */
.form-control, .form-select{
  border-radius: var(--dp-radius-sm);
  border-color: var(--dp-border);
  background: rgba(255,255,255,.96);
}
.form-control:focus, .form-select:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 .25rem rgba(37,99,235,.14);
}
.form-label{
  font-weight: 800;
  letter-spacing: -.01em;
}

/* ── Alerts ── */
.alert{
  border-radius: var(--dp-radius);
  border: 1px solid var(--dp-border);
  box-shadow: 0 8px 22px rgba(15,23,42,.05);
}

/* ── Tables ── */
.table{ --bs-table-border-color: var(--dp-border); }
.table thead th{
  color: rgba(15,23,42,.70);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.table tbody tr:hover{ background: rgba(37,99,235,.05); }

/* ── Progress ── */
.progress{
  height: .65rem;
  border-radius: 999px;
  background: rgba(15,23,42,.06);
}
.progress-bar{ border-radius: 999px; }

/* ── Hero / dp-badge ── */
.dp-hero{
  border-radius: calc(var(--dp-radius) + 6px);
  border: 1px solid var(--dp-border);
  background:
    radial-gradient(1200px 420px at 0% 0%, rgba(37,99,235,.22), transparent 55%),
    radial-gradient(900px 380px at 100% 20%, rgba(22,163,74,.16), transparent 55%),
    rgba(255,255,255,.70);
  backdrop-filter: blur(12px);
  box-shadow: var(--dp-shadow-2);
}
.dp-hero h1{ letter-spacing: -.03em; }
.dp-badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--dp-border);
  background: rgba(255,255,255,.75);
  color: rgba(15,23,42,.78);
  font-weight: 800;
  font-size: .85rem;
}

/* ── Questionnaire step ── */
.pq-step{ animation: dpFade .16s ease; }
@keyframes dpFade{
  from{ opacity: .0; transform: translateY(2px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ── Misc ── */
.dp-kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .9em;
  background: rgba(15,23,42,.06);
  border: 1px solid var(--dp-border);
  border-bottom-color: rgba(15,23,42,.18);
  padding: .1rem .4rem;
  border-radius: .5rem;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE MOBILE
   ═══════════════════════════════════════════════════════════ */

/* Tables → scroll horizontal sur mobile */
.table-responsive{ -webkit-overflow-scrolling: touch; }

/* Évite que les boutons débordent sur mobile */
.d-inline-flex.gap-1 .btn{ flex-shrink: 0; }

/* Questionnaire patient : boutons prev/next pleine largeur sur très petit écran */
@media (max-width: 400px){
  .pq-step .d-flex.justify-content-between{
    flex-direction: column;
    gap: .5rem;
  }
  .pq-step .d-flex.justify-content-between .btn{
    width: 100%;
  }
}

/* Dashboard KPI : padding réduit sur mobile */
@media (max-width: 576px){
  main.dp-main{
    padding-top: .85rem;
    padding-bottom: 1.5rem;
  }
  .display-6{ font-size: 1.6rem !important; }
  /* Formulaire d'envoi : labels plus compacts */
  .form-label{ font-size: .8rem !important; }
  /* Scores : pleine largeur sur xs */
  .card .row.g-2 > [class*="col-sm-6"]{ flex: 0 0 100%; max-width: 100%; }
  /* Navbar brand plus compact */
  .dp-navbar .navbar-brand{ font-size: 1rem; }
  /* Boutons du header dashboard */
  .btn-outline-secondary.btn-sm{ font-size: .75rem; padding: .3rem .6rem; }
}

/* Dossier patient : cards de documents lisibles sur mobile */
@media (max-width: 768px){
  .patient-doc-row{
    display: flex;
    flex-direction: column;
    gap: .25rem;
  }
  /* Modal onboarding : padding réduit */
  .modal-body.p-4{ padding: 1rem !important; }
  .modal-footer.px-4{ padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* Tableau invitations : colonnes moins larges sur tablette */
@media (max-width: 992px){
  .table thead th:nth-child(3){ display: none; }
  .table tbody td:nth-child(3){ display: none; }
}

/* Fix : contain:layout paint sur .card peut masquer les modals Bootstrap */
.card{ contain: initial; }