/* REMSIM — habillage MicroPort CRM SmartView.
   Relevé sur le portail réel (session du 08/08/2026) : logo "Smart|View"
   (texte bleu + caisson bleu clair), barre de navigation principale bleu
   très pâle avec onglet actif en orange plein, barre d'onglets patient en
   petites cases bordées grises avec onglet actif en texte orange souligné,
   tableaux à en-tête bleu moyen, police système sans-serif. Nom
   d'établissement volontairement absent du bandeau (donnée identifiante),
   même convention que les autres vendeurs. */

.mp-bg { background: #fff; }

.mp-shell {
  font: 12.5px/1.4 Arial, "Segoe UI", Helvetica, sans-serif;
  color: #222;
  max-width: 1180px; margin: 0 auto;
  background: #fff;
}

/* ---------------- bandeau supérieur ---------------- */
.mp-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-bottom: 1px solid #ddd; flex-wrap: wrap; gap: 8px;
}
.mp-brand { display: flex; align-items: center; gap: 12px; }
.mp-brand-img { height: 22px; width: auto; display: block; }
.mp-logo { font-size: 20px; font-weight: 400; color: #4a5a68; display: flex; align-items: center; gap: 6px; }
.mp-logo b { color: #2f5fa8; font-weight: 700; }
.mp-logo span.box { border: 2px solid #2f5fa8; color: #2f5fa8; padding: 1px 8px; font-weight: 700; }
.mp-topbar-right { font-size: 11.5px; color: #444; text-align: right; }
.mp-topbar-right b { color: #c8102e; }
.mp-topbar-right a { color: #2f5fa8; text-decoration: none; margin-left: 10px; }

/* ---------------- barre de navigation principale ---------------- */
.mp-navbar { display: flex; flex-wrap: wrap; background: #eef2f7; border-bottom: 1px solid #d7dee6; }
.mp-navbar a, .mp-navbar span.mp-nav-item {
  padding: 8px 14px; font-size: 12px; font-weight: 700; color: #2f5fa8;
  text-decoration: none; cursor: default; letter-spacing: .2px;
}
.mp-navbar a.on, .mp-navbar span.mp-nav-item.on { background: #d9660c; color: #fff; }

/* ---------------- sous-barre (ALL PATIENTS / ENROLL PATIENT...) ---------------- */
.mp-subnav { display: flex; flex-wrap: wrap; background: #f7f9fb; border-bottom: 2px solid #d9660c; }
.mp-subnav a, .mp-subnav span.mp-subnav-item {
  padding: 6px 14px; font-size: 11.5px; font-weight: 700; color: #2f5fa8;
  text-decoration: none; cursor: default;
}
.mp-subnav a.on, .mp-subnav span.mp-subnav-item.on { color: #d9660c; }

/* ---------------- fil patient ---------------- */
.mp-patienthead { padding: 10px 16px 0; font-size: 13px; color: #222; }

/* ---------------- barre d'onglets patient ---------------- */
.mp-tabbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 16px 0; }
.mp-tabbar a, .mp-tabbar span.mp-tab-off {
  display: block; padding: 8px 14px; font-size: 12px; font-weight: 600;
  border: 1px solid #cfd6dd; border-bottom: none; color: #2f5fa8; text-decoration: none;
  background: #f7f9fb;
}
.mp-tabbar a.on { color: #d9660c; border-color: #cfd6dd; background: #fff; border-bottom: 2px solid #fff; margin-bottom: -1px; }

.mp-body { border: 1px solid #cfd6dd; margin: 0 16px 20px; padding: 16px; }

/* ---------------- sections ---------------- */
.mp-sechead { font-size: 12px; font-weight: 700; color: #333; border-bottom: 1px solid #ccc; padding-bottom: 4px; margin: 18px 0 10px; letter-spacing: .3px; }
.mp-sechead:first-child { margin-top: 0; }
.mp-fieldgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 18px; margin-bottom: 6px; }
.mp-field { font-size: 12px; }
.mp-field label { display: block; color: #555; margin-bottom: 3px; }
.mp-field label .req { color: #c8102e; margin-right: 2px; }
.mp-field .val { border: 1px solid #ccc; background: #fff; padding: 5px 7px; min-height: 15px; color: #222; }
.mp-field .val.disabled { background: #f0f0f0; color: #888; }
.mp-field .val.empty { color: #bbb; }
.mp-comments { border: 1px solid #ccc; background: #fff; padding: 8px; font-size: 12px; min-height: 54px; white-space: pre-wrap; }

/* ---------------- tableaux (Follow up, Alert Settings, History) ---------------- */
table.mp-tbl { border-collapse: collapse; width: 100%; font-size: 12px; margin-bottom: 4px; }
table.mp-tbl th { background: #5b8ec4; color: #fff; text-align: left; font-weight: 700; padding: 7px 10px; }
table.mp-tbl td { padding: 7px 10px; border-bottom: 1px solid #e3e7eb; vertical-align: middle; }
table.mp-tbl tr:nth-child(even) td { background: #f7f9fb; }
a.mp-link { color: #2f5fa8; text-decoration: none; }
a.mp-link:hover { text-decoration: underline; }

.mp-note { font-size: 11.5px; color: #777; margin: 8px 0; }
.mp-btn { display: inline-block; background: #cfd9e6; color: #444; border: 1px solid #b7c3d1; padding: 6px 16px; font-size: 12px; border-radius: 2px; cursor: default; }
.mp-btn-row { display: flex; gap: 10px; margin-top: 14px; }
.mp-radiorow { display: flex; align-items: center; gap: 6px; font-size: 12px; margin: 4px 0; }
.mp-radiorow input { accent-color: #2f5fa8; }
.mp-checkbox-disabled { accent-color: #999; opacity: .6; }

/* ---------------- onglet Active Transmission / Transmission History ---------------- */
.mp-reviewlinks { font-size: 12px; margin-bottom: 14px; }
.mp-reviewlinks .lbl { color: #555; font-weight: 700; margin-right: 8px; }
.mp-reviewlinks a, .mp-reviewlinks span.mp-review-off { margin-right: 16px; color: #2f5fa8; text-decoration: none; font-weight: 600; }
.mp-reviewlinks span.mp-review-off { color: #b7c3d1; cursor: default; }
.mp-commenthist { border: 1px solid #bcd2e8; background: #eaf2fb; padding: 10px 12px; font-size: 12px; min-height: 46px; color: #555; }
.mp-commenthist .empty { color: #999; }
.mp-rmreport { border: 1px solid #ddd; padding: 10px 12px; font-size: 12px; color: #555; min-height: 30px; }
.mp-pdftabs { display: flex; gap: 2px; margin-top: 6px; }
.mp-pdftabs a, .mp-pdftabs span.mp-pdftab {
  padding: 6px 12px; font-size: 11.5px; font-weight: 600; border: 1px solid #cfd6dd; border-bottom: none;
  background: #f0f2f5; color: #2f5fa8; text-decoration: none;
}
.mp-pdftabs a.on { background: #fff; color: #d9660c; border-bottom: 2px solid #fff; margin-bottom: -1px; }

/* ---------------- visionneuse PDF : défilement vertical continu ---------------- */
.mp-pdf-viewer { border: 1px solid #cfd3d8; background: #fff; }
.mp-pdf-toolbar {
  display: flex; align-items: center; gap: 14px; padding: 8px 14px;
  background: #323639; color: #e8eaed; font-size: 12px;
}
.mp-pdf-nav-btn { border: none; background: none; color: #e8eaed; font-size: 15px; cursor: pointer; padding: 2px 6px; border-radius: 3px; line-height: 1; }
.mp-pdf-nav-btn:hover { background: rgba(255,255,255,.12); }
.mp-pdf-page-label { min-width: 60px; text-align: center; }
.mp-pdf-zoom { margin-left: auto; color: #cfd3d8; }
.mp-pdf-stage { max-height: 74vh; overflow-y: auto; background: #525659; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0; scroll-behavior: smooth; }
.mp-pdf-img { width: 100%; max-width: 900px; height: auto; display: block; box-shadow: 0 2px 8px rgba(0,0,0,.35); flex: 0 0 auto; }

/* ---------------- Episode History (écran moderne, distinct du reste du portail) ---------------- */
.mp-eh-shell { background: #fff; border: 1px solid #cfd6dd; margin: 0 16px 20px; }
.mp-eh-top { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #eef2f7; flex-wrap: wrap; }
.mp-eh-title { font-size: 15px; font-weight: 700; color: #333; margin-right: auto; }
.mp-eh-meta { display: flex; gap: 18px; font-size: 11.5px; color: #444; flex-wrap: wrap; }
.mp-eh-meta b { display: block; color: #222; }
.mp-eh-filters { display: flex; align-items: center; gap: 14px; padding: 10px 16px; font-size: 12px; flex-wrap: wrap; }
.mp-eh-filters label { display: flex; align-items: center; gap: 4px; }
.mp-eh-toggle { margin-left: auto; display: flex; }
.mp-eh-toggle span { padding: 6px 14px; font-size: 11.5px; font-weight: 700; background: #dbe3ec; color: #445; }
.mp-eh-toggle span.on { background: #7d97b8; color: #fff; }
.mp-eh-result { background: #eaf1fa; color: #445; font-size: 12px; padding: 10px 16px; }

/* ---------------- Episode History : tableau des épisodes réels ---------------- */
table.mp-eh-tbl { border-collapse: collapse; width: 100%; font-size: 12px; }
table.mp-eh-tbl th {
  background: #dbe6f2; color: #33475a; text-align: left; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; font-size: 11px; padding: 9px 16px;
}
table.mp-eh-tbl td { padding: 9px 16px; border-bottom: 1px solid #e3e9f0; }
table.mp-eh-tbl tr:nth-child(even) td { background: #f5f8fb; }
.mp-eh-check { color: #2f8f4e; font-weight: 700; text-align: center; }
a.mp-eh-see { color: #2f5fa8; text-decoration: none; font-weight: 600; }
a.mp-eh-see:hover { text-decoration: underline; }

/* ---------------- Episode History : détail d'un épisode (visualiseur EGM) ----------------
   Nouveau composant : reproduit la disposition réelle (barre latérale de
   réglages, deux tracés EGM, règle de marqueurs) avec les tracés SVG
   d'origine du portail — voir docs/MICROPORT.md §5 et _case_log.txt. */
.mp-egm-shell { background: #fff; border: 1px solid #cfd6dd; margin: 0 16px 20px; }
/* Relevé sur le portail réel (session du 14/08/2026, getComputedStyle) :
   bandeau bleu très pâle, boutons de réglage en pastille bleue pleine. */
.mp-egm-head { display: flex; align-items: center; gap: 16px; padding: 12px 16px; flex-wrap: wrap; border-bottom: 1px solid #e3e9f0; background-color: rgb(240, 245, 255); }
.mp-egm-back { color: #2f5fa8; text-decoration: none; font-weight: 600; font-size: 12px; }
.mp-egm-titlebox { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mp-egm-title { font-size: 16px; font-weight: 700; color: #333; }
.mp-egm-date { font-size: 12.5px; color: #2f5fa8; font-weight: 700; }
.mp-egm-duration { font-size: 11.5px; color: #777; }
.mp-egm-nav { display: flex; gap: 8px; margin-left: auto; }
.mp-egm-navbtn {
  border: 1px solid #cfd6dd; background: #f7f9fb; color: #2f5fa8; font-size: 11.5px;
  font-weight: 600; padding: 5px 10px; border-radius: 2px; cursor: pointer;
}
.mp-egm-navbtn:disabled { color: #b7c3d1; cursor: default; }
.mp-egm-reviewed { font-size: 11.5px; font-weight: 700; color: #2f8f4e; }
.mp-egm-body { display: flex; gap: 20px; padding: 16px; flex-wrap: wrap; }
.mp-egm-side { display: flex; flex-direction: column; gap: 14px; width: 148px; flex: 0 0 auto; }
.mp-egm-field label {
  display: block; color: rgb(61, 82, 118); font-size: 12px; font-weight: 500; margin-bottom: 4px;
}
.mp-egm-fieldval {
  display: block; box-sizing: border-box; width: 100%; text-align: center;
  background-color: rgb(53, 91, 156); color: #fff; border: none; border-radius: 4px;
  padding: 8px 10px; font-size: 16px; font-weight: 400;
}
/* Réglages réels non pilotables ici (curseurs, bascule Rate) : même pastille,
   assombrie pour signaler qu'elle n'est pas interactive dans REMSIM. */
.mp-egm-fieldval.mp-egm-inert { background-color: rgb(120, 138, 168); }
.mp-egm-main { flex: 1 1 480px; min-width: 0; }
.mp-egm-stepper { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #445; margin-bottom: 8px; }
.mp-egm-svg { width: 100%; height: auto; display: block; border: 1px solid #e3e9f0; background: #fff; }
.mp-egm-markers { display: flex; align-items: flex-start; gap: 8px; margin-top: 4px; }
.mp-egm-marker-ch { font-size: 11px; font-weight: 700; color: #777; width: 14px; flex: 0 0 auto; padding-top: 2px; }
.mp-egm-marker-track { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 10px; flex: 1 1 auto; padding-bottom: 4px; }
.mp-egm-tick { flex: 0 0 auto; text-align: center; font-size: 10px; line-height: 1.5; }
.mp-egm-tick-code { color: #2f5fa8; font-weight: 700; }
.mp-egm-tick-ms { color: #888; }

/* Bandeau navigateur/minimap entre la règle de marqueurs et le Tachogram :
   position approximative dans la fenêtre de l'épisode, teintes approchées —
   le portail réel n'expose pas ces couleurs par getComputedStyle (canvas),
   voir docs/MICROPORT.md §7. */
.mp-egm-minimap { display: flex; height: 14px; margin-top: 10px; border-radius: 2px; overflow: hidden; }
.mp-egm-minimap span { flex: 1 1 auto; }
.mp-egm-minimap span.mm-before { background: #cfd8e3; }
.mp-egm-minimap span.mm-window { background: #3d7a8a; }
.mp-egm-minimap span.mm-after { background: #cfd8e3; }

.mp-tacho { margin-top: 14px; }
.mp-tacho-label { font-size: 11px; font-weight: 700; color: rgb(61, 82, 118); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.mp-tacho-svg { width: 100%; height: auto; display: block; border: 1px solid #e3e9f0; background: #fff; }
.mp-tacho-legend { display: flex; gap: 16px; font-size: 10.5px; color: #667; margin-top: 4px; }
.mp-tacho-legend span { display: inline-flex; align-items: center; gap: 4px; }

/* ---------------- débriefing (masqué par défaut, même comportement que BIOTRONIK) ---------------- */
.mp-debrief { border: 1px solid #a9c3e0; background: #f2f7fc; margin: 16px; }
.mp-debrief-h { display: flex; align-items: center; gap: 8px; padding: 5px 8px; }
.mp-debrief-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: #d9660c; color: #fff; padding: 2px 6px; border-radius: 8px;
}
.mp-debrief-q { flex: 1; font-weight: 700; color: #1f3d63; }
.mp-debrief-btn {
  border: 1px solid #7f9fc3; background: linear-gradient(#ffffff, #e5eef8); color: #1f3d63;
  font-size: 12px; padding: 6px 14px; border-radius: 2px; cursor: pointer;
}
.mp-debrief-body { padding: 0 10px 10px; border-top: 1px solid #cfe0f2; }
.mp-step { padding-top: 8px; }
.mp-step-t { font-weight: 700; color: #1f3d63; }
.mp-step-x { color: #223; max-width: 92ch; }
.mp-pitfall {
  margin-top: 10px; padding: 5px 8px; border-left: 3px solid #d9a441;
  background: #fdf7ea; color: #5a4212;
}

/* ---------------- lien de retour au cas ---------------- */
.mp-caselink { padding: 10px 22px; font-size: 12px; background: #f2f2f4; border-top: 1px solid #ccc; }
.mp-caselink a { color: #2f5fa8; text-decoration: none; }

/* ---------------- mobile ---------------- */
@media (max-width: 720px) {
  .mp-fieldgrid { grid-template-columns: 1fr 1fr; }
  .mp-tabbar { gap: 2px; }
  .mp-tabbar a, .mp-tabbar span.mp-tab-off { padding: 6px 8px; font-size: 11px; }
  .mp-navbar a, .mp-navbar span.mp-nav-item { padding: 7px 9px; font-size: 11px; }
  .mp-body { margin: 0 8px 16px; padding: 12px; }
  .mp-eh-meta { gap: 10px; }
  table.mp-tbl { font-size: 11px; }
  table.mp-tbl th, table.mp-tbl td { padding: 6px 6px; }
}
@media (max-width: 480px) {
  .mp-fieldgrid { grid-template-columns: 1fr; }
}