:root {
  --pmk-bg:        #F5F1EC;
  --pmk-white:     #FDFAF6;
  --pmk-rust:      #C0522A;
  --pmk-rust-lt:   #F5DDD4;
  --pmk-sage:      #6A9B6E;
  --pmk-sage-lt:   #D8EBD9;
  --pmk-amber:     #C98A1E;
  --pmk-amber-lt:  #F5E8CB;
  --pmk-slate:     #3D6280;
  --pmk-slate-lt:  #CFDCE8;
  --pmk-dark:      #1C1410;
  --pmk-mid:       #5C4033;
  --pmk-muted:     #9C7B6E;
  --pmk-border:    rgba(92,64,51,0.12);

  --pmk-green: #1D9E75;
  --pmk-green-light: #E1F5EE;
  --pmk-green-dark: #0F6E56;
  --pmk-amber: #854F0B;
  --pmk-amber-light: #FAEEDA;
  --pmk-red: #993C1D;
  --pmk-red-light: #FAECE7;
  --pmk-blue: #185FA5;
  --pmk-blue-light: #E6F1FB;
  --pmk-gray-light: #F1EFE8;

  --pmk-c1:  #4361ee; --pmk-c2:  #3a0ca3; --pmk-c3:  #7209b7;
  --pmk-c4:  #f72585; --pmk-c5:  #4cc9f0; --pmk-c6:  #06d6a0;
  --pmk-c7:  #ffd166; --pmk-c8:  #ef476f; --pmk-c9:  #118ab2;
  --pmk-c10: #073b4c;
}

/*:root {
  --pmk-bg:        #F0F7F2;
  --pmk-white:     #F8FDF9;
  --pmk-rust:      #009640;
  --pmk-rust-lt:   #CCE9D9;
  --pmk-amber:     #E71D73;
  --pmk-amber-lt:  #FADADF;
  --pmk-sage:      #006B2E;
  --pmk-sage-lt:   #B8DEC7;
  --pmk-slate:     #2D5E6E;
  --pmk-slate-lt:  #C5D9E0;
  --pmk-dark:      #0A1F10;
  --pmk-mid:       #1E5C35;
  --pmk-muted:     #5C8F6A;
  --pmk-border:    rgba(0,150,64,0.12);
}*/

/* ── BASE ── */
body {
  font-family: 'DM Sans', sans-serif !important;
  background: var(--pmk-bg) !important;
  color: var(--pmk-dark);
}

h1,h2,h3,h4,h5,
.uk-heading-small,
.pmk-serif { font-family: 'DM Serif Display', serif !important; }

/* ── SIDEBAR ── */
#pmk-sidebar {
  width: 240px;
  min-height: 100vh;
  background: var(--pmk-dark);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  flex-shrink: 0;
}

.pmk-logo {
  padding: 24px 20px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.pmk-logo-icon {
  width: 38px; height: 38px;
  background: var(--pmk-rust);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}

.pmk-logo-name {
  font-family: 'DM Serif Display', serif;
  font-size: 15px;
  color: #f5f1ec;
  line-height: 1.2;
}

.pmk-logo-sub {
  font-size: 10px;
  color: var(--pmk-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* UIkit nav overrides for dark sidebar */
#pmk-sidebar .uk-nav-default > li > a {
  color: rgba(255,255,255,0.45);
  font-size: 13.5px;
  padding: 8px 12px;
  border-radius: 5px;
  margin: 1px 0;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: all 0.15s;
}

#pmk-sidebar .uk-nav-default > li > a:hover {
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.07);
}

#pmk-sidebar .uk-nav-default > li.uk-active > a {
  background: var(--pmk-rust) !important;
  color: #fff !important;
  font-weight: 500;
}

#pmk-sidebar .uk-nav-default > li.uk-nav-header {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.2);
  padding: 14px 12px 4px;
}

#pmk-sidebar .uk-nav-default > li.uk-nav-divider {
  border-top-color: rgba(255,255,255,0.08);
  margin: 6px 0;
}

.pmk-nav-wrap { padding: 10px 8px; flex: 1; }

.pmk-nav-badge {
  margin-left: auto;
  background: var(--pmk-rust);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 20px;
}

.pmk-user {
  padding: 14px 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 10px;
}

.pmk-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--pmk-rust);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: #fff;
  flex-shrink: 0;
}

.pmk-user-name  { font-size: 12.5px; color: #f5f1ec; font-weight: 500; }
.pmk-user-role  { font-size: 10.5px; color: var(--pmk-muted); }

/* ── MAIN ── */
#pmk-main { flex: 1; min-height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }

/* ── TOPBAR ── */
#pmk-topbar {
  background: var(--pmk-white);
  border-bottom: 1px solid var(--pmk-border);
  padding: 0 30px;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.pmk-page-title {
  font-family: 'DM Serif Display', serif;
  font-size: 20px;
  color: var(--pmk-dark);
  flex: 1;
}

.pmk-search, .uk-input, .uk-textarea, .uk-select, .uk-search-input {
  display: flex; align-items: center; gap: 8px;
  background: var(--pmk-bg);
  border: 1px solid var(--pmk-border);
  border-radius: 5px;
  padding: 6px 12px;
  font-size: 14px;
  color: var(--pmk-muted);
}

/* ── CONTENT ── */
#pmk-content { padding: 26px 30px; flex: 1; }

/* ── KPI CARDS ── */
.pmk-kpi {
  background: var(--pmk-white);
  border-radius: 14px;
  border: 1px solid var(--pmk-border);
  padding: 18px 18px 14px;
  position: relative;
  overflow: hidden;
}

.pmk-kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 14px 14px 0 0;
}

.pmk-kpi.rust::before  { background: var(--pmk-rust); }
.pmk-kpi.sage::before  { background: var(--pmk-sage); }
.pmk-kpi.amber::before { background: var(--pmk-amber); }
.pmk-kpi.slate::before { background: var(--pmk-slate); }

.pmk-kpi-icon {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
}

.pmk-kpi.rust  .pmk-kpi-icon { background: var(--pmk-rust-lt); }
.pmk-kpi.sage  .pmk-kpi-icon { background: var(--pmk-sage-lt); }
.pmk-kpi.amber .pmk-kpi-icon { background: var(--pmk-amber-lt); }
.pmk-kpi.slate .pmk-kpi-icon { background: var(--pmk-slate-lt); }

.pmk-kpi-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pmk-muted);
  font-weight: 500;
  margin-bottom: 6px;
}

.pmk-kpi-value {
  font-family: 'DM Serif Display', serif;
  font-size: 36px;
  color: var(--pmk-dark);
  line-height: 1;
  margin-bottom: 5px;
}

.pmk-kpi-meta { font-size: 11.5px; color: var(--pmk-muted); }
.pmk-up   { color: var(--pmk-sage);  font-weight: 600; }
.pmk-down { color: var(--pmk-rust);  font-weight: 600; }

/* ── CARD ── */
.pmk-card {
  background: var(--pmk-white);
  border: 1px solid var(--pmk-border);
  border-radius: 14px;
  overflow: hidden;
}

.pmk-card-header {
  padding: 16px 20px 13px;
  border-bottom: 1px solid var(--pmk-border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.pmk-card-title {
  font-family: 'DM Serif Display', serif;
  font-size: 15px;
  color: var(--pmk-dark);
  flex: 1;
}

.pmk-card-action { font-size: 12px; color: var(--pmk-rust); cursor: pointer; font-weight: 500; }
.pmk-card-body { padding: 16px 20px; }

/* ── PHASE FUNNEL ── */
.pmk-funnel {
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  height: 54px;
  margin-bottom: 10px;
}

.pmk-funnel-seg {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #fff; gap: 1px;
}

.pmk-funnel-seg .fn { font-size: 20px; font-weight: 700; line-height: 1; }
.pmk-funnel-seg .fl { font-size: 9px; opacity: 0.85; }

.pf-usi   { background: var(--pmk-slate); flex: 3; }
.pf-neo   { background: var(--pmk-amber); flex: 5; }
.pf-kang  { background: var(--pmk-sage);  flex: 8; }
.pf-amb   { background: var(--pmk-rust);  flex: 12; }

.pmk-legend-dot {
  width: 10px; height: 10px;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}

/* ── TABLE ── */
.pmk-table th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pmk-muted);
  font-weight: 500;
  padding: 8px 10px !important;
  border-bottom: 1px solid var(--pmk-border) !important;
}

.pmk-table td { padding: 9px 10px !important; font-size: 13px; vertical-align: middle !important; }
.pmk-table tr:hover td { background: var(--pmk-bg); }

.pmk-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 500;
}

.b-usi   { background: var(--pmk-slate-lt); color: var(--pmk-slate); }
.b-neo   { background: var(--pmk-amber-lt); color: #8C6010; }
.b-kang  { background: var(--pmk-sage-lt);  color: #2E6832; }
.b-amb   { background: var(--pmk-rust-lt);  color: var(--pmk-rust); }

.pmk-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.d-alive    { background: var(--pmk-sage); }
.d-watch    { background: var(--pmk-amber); }
.d-critical { background: var(--pmk-rust); }

.pmk-bar-bg { height: 4px; background: var(--pmk-border); border-radius: 2px; overflow: hidden; margin-top: 3px; width: 72px; }
.pmk-bar-fill { height: 100%; border-radius: 2px; }

/* ── ALERTS ── */
.pmk-alert-item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 3px 0;
  border-bottom: 1px solid rgba(92,64,51,0.06);
}
.pmk-alert-item:last-child { border-bottom: none; }

.pmk-alert-icon {
  width: 32px; height: 32px;
  border-radius: 5px;
  border: 1px solid var(--pmk-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}

.ai-urgent { background: var(--pmk-rust-lt); }
.ai-info   { background: var(--pmk-amber-lt); }
.ai-ok     { background: var(--pmk-sage-lt); }

.pmk-alert-title { font-size: 13px; font-weight: 500; color: var(--pmk-dark); margin-bottom: 2px; }
.pmk-alert-sub   { font-size: 11.5px; color: var(--pmk-muted); }
.pmk-alert-time  { font-size: 11px; color: var(--pmk-muted); flex-shrink: 0; margin-top: 2px; }

/* ── BAR CHART ── */
.pmk-chart-area {
  height: 150px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  padding: 0 2px;
  position: relative;
}

.pmk-chart-gridlines {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  pointer-events: none;
}

.pmk-chart-gridline { width: 100%; height: 1px; background: var(--pmk-border); }

.pmk-bar-group { display: flex; align-items: flex-end; gap: 2px; flex: 1; position: relative; z-index: 1; }
.pmk-bar-c { flex: 1; border-radius: 4px 4px 0 0; min-width: 7px; }
.bc-rust  { background: var(--pmk-rust); opacity: 0.8; }
.bc-sage  { background: var(--pmk-sage); opacity: 0.8; }

.pmk-chart-labels { display: flex; gap: 5px; padding: 5px 2px 0; }
.pmk-chart-label { flex: 1; text-align: center; font-size: 10px; color: var(--pmk-muted); }

/* ── DONUT ── */
.pmk-mini-bar-bg   { height: 7px; background: var(--pmk-bg); border-radius: 4px; overflow: hidden; flex: 1; }
.pmk-mini-bar-fill { height: 100%; border-radius: 4px; }

/* ── VISITS ── */
.pmk-visit-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(92,64,51,0.06);
  text-decoration: none;
}
.pmk-visit-item:last-child { border-bottom: none; }

.pmk-date-box {
  width: 40px; height: 40px;
  border-radius: 9px;
  background: var(--pmk-bg);
  border: 1px solid var(--pmk-border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.pmk-day   { font-size: 16px; font-weight: 700; color: var(--pmk-dark); line-height: 1; }
.pmk-month { font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pmk-muted); }

.vt-40s { background: var(--pmk-rust-lt);  color: var(--pmk-rust); }
.vt-3m  { background: var(--pmk-amber-lt); color: #8C6010; }
.vt-6m  { background: var(--pmk-sage-lt);  color: #2E6832; }
.vt-12m { background: var(--pmk-slate-lt); color: var(--pmk-slate); }

/* ── SECTION LABEL ── */
.pmk-section-label {
  font-family: 'DM Serif Display', serif;
  font-size: 12px;
  color: var(--pmk-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px;
}

.pmk-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--pmk-border);
}

/* UIkit button overrides */
.uk-button-primary {
  background: var(--pmk-rust) !important;
  border-color: var(--pmk-rust) !important;
  border-radius: 5px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.uk-button-default {
  border-radius: 5px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  border-color: var(--pmk-border) !important;
  color: var(--pmk-mid) !important;
  background: var(--pmk-bg) !important;
}

.uk-button-primary:hover { background: #a84422 !important; }

.pmk-notif-btn {
  width: 36px; height: 36px;
  background: var(--pmk-bg);
  border: 1px solid var(--pmk-border);
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative;
  color: var(--pmk-mid);
}

.pmk-notif-dot {
  position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px;
  background: var(--pmk-rust);
  border-radius: 50%;
  border: 2px solid var(--pmk-white);
}

/* uk-grid gap tweak */
.uk-grid-small > * { padding-left: 14px; }
.uk-grid-small { margin-left: -14px; }

.pmk-uk-divider { height: 1px; background: var(--pmk-border); margin: 10px 0; }

.htmx-indicator{
    display:none;
}
.htmx-request .htmx-indicator{
    display:inline;
}
.htmx-request.htmx-indicator{
    display:inline;
}


/* ===== En-tête patient ===== */


/* ===== Badges / pills ===== */
.pmk-badge         { display:inline-block; font-size:11px; font-weight:500; padding:2px 8px; border-radius:4px; background:var(--pmk-green-light); color:var(--pmk-green-dark); }
.pmk-badge-info    { background:var(--pmk-blue-light);  color:var(--pmk-blue); }
.pmk-badge-warn    { background:var(--pmk-amber-light); color:var(--pmk-amber); }
.pmk-badge-danger  { background:var(--pmk-red-light);   color:var(--pmk-red); }
.pmk-badge-gray    { background:var(--pmk-gray-light);  color:#5F5E5A; }

.pill-yes  { display:inline-block; font-size:11px; padding:1px 7px; border-radius:99px; background:#EAF3DE; color:#3B6D11; }
.pill-no   { display:inline-block; font-size:11px; padding:1px 7px; border-radius:99px; background:#f4f4f4; color:#888; }
.pill-na   { display:inline-block; font-size:11px; padding:1px 7px; border-radius:99px; background:var(--pmk-gray-light); color:#5F5E5A; }

/* ===== Metric cards ===== */
.pmk-metric { background:#f8f8f8; border-radius:8px; padding:10px 12px; }
.pmk-metric .lbl { font-size:12px; color:#888; margin-bottom:2px; }
.pmk-metric .val { font-size:18px; font-weight:500; }
.pmk-metric .unit { font-size:12px; color:#888; margin-left:2px; }

/* ===== Lignes de données ===== */
.pmk-row { display:flex; justify-content:space-between; align-items:baseline; padding:5px 0; border-bottom:1px solid #f0f0f0; font-size:13px; }
.pmk-row:last-child { border-bottom:none; }
.pmk-row .lbl { color:#888; }
.pmk-row .val { font-weight:500; text-align:right; }

/* ===== Stepper parcours ===== */
.pmk-stepper { display:flex; align-items:flex-start; }
.pmk-step { flex:1; display:flex; flex-direction:column; align-items:center; position:relative; }
.pmk-step-dot {
    width:20px; height:20px; border-radius:50%;
    border:2px solid #ddd; background:#fff;
    display:flex; align-items:center; justify-content:center;
    position:relative; z-index:1;
}
.pmk-step-dot.done  { background:var(--pmk-green); border-color:var(--pmk-green); }
.pmk-step-dot.active{ background:var(--pmk-green-light); border-color:var(--pmk-green); }
.pmk-step-line {
    position:absolute; top:10px; left:50%; right:-50%;
    height:2px; background:#ddd; z-index:0;
}
.pmk-step-line.done { background:var(--pmk-green); }
.pmk-step:last-child .pmk-step-line { display:none; }
.pmk-step-label { font-size:10px; color:#888; margin-top:4px; text-align:center; line-height:1.3; }
.pmk-step-label.active { color:var(--pmk-green-dark); font-weight:500; }

/* ===== Vaccins ===== */
.pmk-vacc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:6px; }
.pmk-vacc { border-radius:8px; padding:6px 8px; font-size:12px; text-align:center; background:#f4f4f4; color:#666; }
.pmk-vacc.done    { background:#EAF3DE; color:#3B6D11; }
.pmk-vacc.pending { background:var(--pmk-amber-light); color:var(--pmk-amber); }

/* ===== Note / bandeau info ===== */
.pmk-note {
    background:#f8f8f8;
    border-left:3px solid var(--pmk-green);
    border-radius:0 8px 8px 0;
    padding:8px 12px;
    font-size:13px; color:#666;
}

/* ===== Alerte ===== */
.pmk-alert-card {
    border-left:3px solid;
    border-radius:0 8px 8px 0;
    padding:10px 14px;
    margin-bottom:8px;
}
.pmk-alert-card.critical { border-color:#E24B4A; background:#FCEBEB; }
.pmk-alert-card.warning  { border-color:#EF9F27; background:#FAEEDA; }
.pmk-alert-card.info     { border-color:var(--pmk-green); background:var(--pmk-green-light); }
.pmk-alert-card .alert-title   { font-size:13px; font-weight:500; }
.pmk-alert-card.critical .alert-title { color:#A32D2D; }
.pmk-alert-card.warning  .alert-title { color:var(--pmk-amber); }
.pmk-alert-card.info     .alert-title { color:var(--pmk-green-dark); }
.pmk-alert-card .alert-body    { font-size:12px; color:#666; margin-top:2px; }


.pmk-c1  { background: var(--pmk-rust);  }
.pmk-c2  { background: var(--pmk-amber);  }
.pmk-c3  { background: var(--pmk-sage);  }
.pmk-c4  { background: var(--pmk-slate);  }
.pmk-c5  { background: var(--pmk-c5);  }
.pmk-c6  { background: var(--pmk-c6);  }
.pmk-c7  { background: var(--pmk-c7);  }
.pmk-c8  { background: var(--pmk-c8);  }
.pmk-c9  { background: var(--pmk-c9);  }
.pmk-c10 { background: var(--pmk-c10); }

.stat-block        { margin-bottom: 8px; }
.stat-block-title  { font-size: .75rem; font-weight: 700; text-transform: uppercase;
                        letter-spacing: .05em; color: #64748b; margin-bottom: 10px; }
.stat-total        { font-size: .7rem; color: #94a3b8; margin-left: 6px; font-weight: 400; }

/* Barre empilée */
.stat-bar          { display: flex; height: 10px; border-radius: 6px;
                        overflow: hidden; gap: 2px; margin-bottom: 10px; }
.stat-bar-seg      { border-radius: 3px; transition: flex .4s ease; min-width: 3px; }

/* Légende */
.stat-legend       { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.stat-legend-item  { display: flex; align-items: center; gap: 5px;
                        font-size: .72rem; color: #475569; }
.stat-legend-dot   { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.stat-legend-count { font-weight: 700; color: #1e293b; }
.stat-legend-pct   { color: #94a3b8; }