/*
 * RPM Clinical Design System
 * Designed for: Elderly patients, medical caregivers, developers
 * Principles: High contrast · Large readable text · Trustworthy palette
 * ─────────────────────────────────────────────────────────────────────
 */

/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
  /* Brand */
  --blue-900:   #0D3B6E;   /* headers, deep navy           */
  --blue-700:   #1A5F9B;   /* primary brand / links        */
  --blue-500:   #2E86C1;   /* hover / interactive          */
  --blue-100:   #D6EAF8;   /* light tint bg                */
  --blue-050:   #EBF5FB;   /* very light row highlight     */

  /* Neutrals */
  --gray-900:   #1E293B;   /* primary text                 */
  --gray-700:   #334155;   /* secondary text               */
  --gray-500:   #64748B;   /* tertiary / placeholders      */
  --gray-300:   #CBD5E1;   /* borders                      */
  --gray-200:   #E2E8F0;   /* dividers                     */
  --gray-100:   #F1F5F9;   /* section backgrounds          */
  --gray-050:   #F8FAFC;   /* page background              */
  --white:      #FFFFFF;

  /* Status */
  --green-600:  #16A34A;   /* online / connected           */
  --green-100:  #DCFCE7;
  --amber-600:  #D97706;   /* warning / alert              */
  --amber-100:  #FEF3C7;
  --red-600:    #DC2626;   /* error — use sparingly        */
  --red-100:    #FEE2E2;

  /* Typography */
  --font-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                'Helvetica Neue', Arial, sans-serif;
  --font-mono:  'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;

  /* Scale */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-lg:    1.125rem;  /* 18px */
  --text-xl:    1.25rem;   /* 20px */
  --text-2xl:   1.5rem;    /* 24px */
  --text-3xl:   1.875rem;  /* 30px */
  --text-4xl:   2.25rem;   /* 36px */
  --text-hero:  3rem;      /* 48px — patient view */

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:  0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05);
}

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Base ──────────────────────────────────────────────────────── */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family:      var(--font-sans);
  font-size:        var(--text-base);
  line-height:      1.6;
  color:            var(--gray-900);
  background-color: var(--gray-050);
  min-height:       100vh;
}

a {
  color:           var(--blue-700);
  text-decoration: none;
}
a:hover {
  color:           var(--blue-500);
  text-decoration: underline;
}

/* ── Layout ────────────────────────────────────────────────────── */
.rpm-container {
  max-width:  1280px;
  margin:     0 auto;
  padding:    0 var(--space-6);
}

/* ── Header / Nav ──────────────────────────────────────────────── */
.rpm-header {
  background:    var(--blue-900);
  color:         var(--white);
  padding:       0 var(--space-6);
  height:        64px;
  display:       flex;
  align-items:   center;
  gap:           var(--space-4);
  position:      sticky;
  top:           0;
  z-index:       100;
  box-shadow:    0 2px 8px rgba(0,0,0,0.25);
}

.rpm-header__wordmark {
  font-size:   var(--text-xl);
  font-weight: 700;
  color:       var(--white);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.rpm-header__wordmark span {
  color:   var(--blue-100);
  opacity: 0.85;
}

.rpm-header__breadcrumb {
  font-size:  var(--text-sm);
  color:      rgba(255,255,255,0.65);
  display:    flex;
  align-items: center;
  gap:        var(--space-2);
  flex:       1;
}
.rpm-header__breadcrumb a {
  color:    rgba(255,255,255,0.75);
  text-decoration: none;
}
.rpm-header__breadcrumb a:hover { color: var(--white); text-decoration: none; }
.rpm-header__breadcrumb .sep  { opacity: 0.4; }
.rpm-header__breadcrumb .current { color: var(--white); font-weight: 600; }

.rpm-header__right {
  margin-left: auto;
  display:     flex;
  align-items: center;
  gap:         var(--space-5);
}

.rpm-nav-link {
  font-size:    var(--text-sm);
  color:        rgba(255,255,255,0.70);
  text-decoration: none;
  padding:      var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition:   background 0.15s;
}
.rpm-nav-link:hover { background: rgba(255,255,255,0.1); color: var(--white); text-decoration: none; }
.rpm-nav-link.active { background: rgba(255,255,255,0.15); color: var(--white); }

#rpm-clock {
  font-size:   var(--text-sm);
  color:       rgba(255,255,255,0.55);
  font-variant-numeric: tabular-nums;
}

/* ── Page header (below nav) ────────────────────────────────────── */
.rpm-page-header {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: var(--space-6) var(--space-6) var(--space-5);
}
.rpm-page-header__inner {
  max-width:   1280px;
  margin:      0 auto;
  display:     flex;
  align-items: center;
  gap:         var(--space-4);
}
.rpm-page-header h1 {
  font-size:   var(--text-2xl);
  font-weight: 700;
  color:       var(--gray-900);
  line-height: 1.2;
}
.rpm-page-header p {
  font-size:  var(--text-sm);
  color:      var(--gray-500);
  margin-top: var(--space-1);
}

/* ── Main content ───────────────────────────────────────────────── */
.rpm-main {
  max-width: 1280px;
  margin:    0 auto;
  padding:   var(--space-8) var(--space-6) var(--space-12);
}

/* ── Section ────────────────────────────────────────────────────── */
.rpm-section {
  margin-bottom: var(--space-8);
}
.rpm-section__header {
  display:     flex;
  align-items: baseline;
  gap:         var(--space-3);
  margin-bottom: var(--space-4);
}
.rpm-section__title {
  font-size:   var(--text-lg);
  font-weight: 600;
  color:       var(--gray-900);
}
.rpm-section__count {
  font-size:  var(--text-sm);
  color:      var(--gray-500);
}

/* ── Stat cards row ─────────────────────────────────────────────── */
.rpm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:     var(--space-4);
  margin-bottom: var(--space-8);
}

.rpm-stat {
  background:    var(--white);
  border-radius: var(--radius-lg);
  padding:       var(--space-5) var(--space-6);
  box-shadow:    var(--shadow-sm);
  border:        1px solid var(--gray-200);
  text-align:    center;
}
.rpm-stat__value {
  font-size:   var(--text-3xl);
  font-weight: 700;
  color:       var(--blue-700);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.rpm-stat__label {
  font-size:   var(--text-sm);
  color:       var(--gray-500);
  margin-top:  var(--space-1);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Gateway / Patient cards grid ───────────────────────────────── */
.rpm-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-5);
}

.rpm-gw-card {
  background:    var(--white);
  border:        1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding:       var(--space-5) var(--space-6);
  box-shadow:    var(--shadow-sm);
  text-decoration: none;
  color:         inherit;
  display:       block;
  transition:    box-shadow 0.15s, border-color 0.15s, transform 0.1s;
}
.rpm-gw-card:hover {
  box-shadow:    var(--shadow-md);
  border-color:  var(--blue-500);
  transform:     translateY(-1px);
  text-decoration: none;
  color:         inherit;
}
.rpm-gw-card--online {
  border-left: 4px solid var(--green-600);
}
.rpm-gw-card--offline {
  border-left: 4px solid var(--gray-300);
  opacity: 0.80;
}
.rpm-gw-card--alert {
  border-left: 4px solid var(--amber-600);
}

.rpm-gw-card__header {
  display:     flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.rpm-gw-card__name {
  font-size:   var(--text-xl);
  font-weight: 700;
  color:       var(--gray-900);
  line-height: 1.2;
}
.rpm-gw-card__sublabel {
  font-size:  var(--text-xs);
  color:      var(--gray-500);
  margin-top: var(--space-1);
  font-family: var(--font-mono);
}

.rpm-gw-card__steps {
  text-align: right;
}
.rpm-gw-card__steps-value {
  font-size:   var(--text-3xl);
  font-weight: 700;
  color:       var(--blue-700);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rpm-gw-card__steps-label {
  font-size:  var(--text-xs);
  color:      var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rpm-gw-card__meta {
  display:       flex;
  flex-direction: column;
  gap:           var(--space-2);
  padding-top:   var(--space-3);
  border-top:    1px solid var(--gray-200);
}
.rpm-gw-card__meta-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  font-size:   var(--text-sm);
  color:       var(--gray-700);
}
.rpm-gw-card__meta-label {
  color:      var(--gray-500);
  min-width:  90px;
  font-size:  var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Status badges ──────────────────────────────────────────────── */
.rpm-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  padding:        3px 10px;
  border-radius:  999px;
  font-size:      var(--text-xs);
  font-weight:    600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height:    1.5;
}
.rpm-badge--online {
  background: var(--green-100);
  color:      var(--green-600);
}
.rpm-badge--offline {
  background: var(--gray-200);
  color:      var(--gray-500);
}
.rpm-badge--alert {
  background: var(--amber-100);
  color:      var(--amber-600);
}
.rpm-badge--info {
  background: var(--blue-100);
  color:      var(--blue-700);
}
.rpm-badge__dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  flex-shrink:   0;
}
.rpm-badge--online  .rpm-badge__dot { background: var(--green-600);
  box-shadow: 0 0 0 2px rgba(22,163,74,0.25); }
.rpm-badge--offline .rpm-badge__dot { background: var(--gray-400); }
.rpm-badge--alert   .rpm-badge__dot { background: var(--amber-600); }

/* ── Info card grid (detail pages) ─────────────────────────────── */
.rpm-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:     var(--space-4);
  margin-bottom: var(--space-6);
}

.rpm-info-card {
  background:    var(--white);
  border:        1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding:       var(--space-4) var(--space-5);
  box-shadow:    var(--shadow-sm);
}
.rpm-info-card__label {
  font-size:      var(--text-xs);
  font-weight:    600;
  color:          var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom:  var(--space-1);
}
.rpm-info-card__value {
  font-size:   var(--text-lg);
  font-weight: 600;
  color:       var(--gray-900);
  line-height: 1.3;
  word-break:  break-all;
}
.rpm-info-card__value--mono {
  font-family:  var(--font-mono);
  font-size:    var(--text-sm);
  font-weight:  400;
  color:        var(--gray-700);
}
.rpm-info-card__value--muted {
  color:       var(--gray-500);
  font-weight: 400;
}

/* ── Panel / card container ─────────────────────────────────────── */
.rpm-panel {
  background:    var(--white);
  border:        1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-sm);
  margin-bottom: var(--space-6);
}
.rpm-panel__header {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  padding:       var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--gray-200);
}
.rpm-panel__title {
  font-size:   var(--text-base);
  font-weight: 600;
  color:       var(--gray-900);
}
.rpm-panel__action {
  font-size:  var(--text-sm);
  color:      var(--blue-700);
  text-decoration: none;
}
.rpm-panel__action:hover { text-decoration: underline; }
.rpm-panel__body {
  padding: var(--space-5) var(--space-6);
}
.rpm-panel__body--flush { padding: 0; }

/* ── Tables ─────────────────────────────────────────────────────── */
.rpm-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.rpm-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--text-sm);
}
table.rpm-table th {
  text-align:     left;
  padding:        var(--space-3) var(--space-4);
  border-bottom:  2px solid var(--gray-200);
  font-size:      var(--text-xs);
  font-weight:    600;
  color:          var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space:    nowrap;
}
table.rpm-table td {
  padding:      var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--gray-200);
  color:         var(--gray-700);
  vertical-align: middle;
}
table.rpm-table tbody tr:last-child td { border-bottom: none; }
table.rpm-table tbody tr:hover td { background: var(--blue-050); }

.rpm-table__id {
  font-family:  var(--font-mono);
  font-size:    var(--text-xs);
  color:        var(--gray-500);
}
.rpm-table__num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color:       var(--gray-900);
}

/* ── Sessions list ──────────────────────────────────────────────── */
.rpm-sessions-list {
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap:        var(--space-3);
}
.rpm-session-item {
  display:       flex;
  align-items:   center;
  gap:           var(--space-4);
  padding:       var(--space-4) var(--space-5);
  background:    var(--white);
  border:        1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow:    var(--shadow-sm);
  transition:    box-shadow 0.15s;
}
.rpm-session-item:hover { box-shadow: var(--shadow-md); }
.rpm-session-item__icon {
  width:         40px;
  height:        40px;
  border-radius: 50%;
  background:    var(--blue-100);
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
  font-size:     1.1rem;
}
.rpm-session-item__body { flex: 1; min-width: 0; }
.rpm-session-item__title {
  font-size:   var(--text-sm);
  font-weight: 600;
  color:       var(--gray-900);
}
.rpm-session-item__subtitle {
  font-size: var(--text-xs);
  color:     var(--gray-500);
  margin-top: 2px;
}
.rpm-session-item__stats {
  display:   flex;
  gap:       var(--space-5);
  text-align: right;
  flex-shrink: 0;
}
.rpm-session-item__stat-value {
  font-size:   var(--text-base);
  font-weight: 700;
  color:       var(--gray-900);
  font-variant-numeric: tabular-nums;
}
.rpm-session-item__stat-label {
  font-size:  var(--text-xs);
  color:      var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ── Chart container ────────────────────────────────────────────── */
.rpm-chart-wrap {
  padding:       var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--gray-200);
}

/* ── Collapsible details ────────────────────────────────────────── */
details.rpm-details {
  background:    var(--white);
  border:        1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  box-shadow:    var(--shadow-sm);
}
details.rpm-details > summary {
  list-style:    none;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  padding:       var(--space-4) var(--space-6);
  cursor:        pointer;
  font-size:     var(--text-base);
  font-weight:   600;
  color:         var(--gray-900);
  user-select:   none;
}
details.rpm-details > summary::-webkit-details-marker { display: none; }
details.rpm-details > summary::after {
  content:     '▸';
  font-size:   var(--text-sm);
  color:       var(--gray-500);
  transition:  transform 0.2s;
}
details.rpm-details[open] > summary::after { transform: rotate(90deg); }
details.rpm-details > summary:hover { background: var(--gray-100); }
details.rpm-details > .rpm-details__body {
  padding:     var(--space-5) var(--space-6);
  border-top:  1px solid var(--gray-200);
}

/* ── Empty states ───────────────────────────────────────────────── */
.rpm-empty {
  text-align:  center;
  padding:     var(--space-10) var(--space-8);
  color:       var(--gray-500);
}
.rpm-empty__icon {
  font-size:   2.5rem;
  margin-bottom: var(--space-3);
  opacity:     0.4;
}
.rpm-empty p {
  font-size: var(--text-sm);
  max-width: 320px;
  margin:    0 auto;
}

/* ── Buttons ────────────────────────────────────────────────────── */
.rpm-btn {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-2);
  padding:        var(--space-2) var(--space-5);
  border-radius:  var(--radius-md);
  font-size:      var(--text-sm);
  font-weight:    600;
  cursor:         pointer;
  border:         none;
  text-decoration: none;
  transition:     background 0.15s, box-shadow 0.15s;
  line-height:    1.5;
}
.rpm-btn--primary {
  background: var(--blue-700);
  color:      var(--white);
  box-shadow: var(--shadow-sm);
}
.rpm-btn--primary:hover {
  background: var(--blue-500);
  color:      var(--white);
  text-decoration: none;
  box-shadow: var(--shadow-md);
}
.rpm-btn--ghost {
  background: transparent;
  color:      var(--blue-700);
  border:     1px solid var(--blue-700);
}
.rpm-btn--ghost:hover {
  background: var(--blue-050);
  text-decoration: none;
}

/* ── Live debug view link ───────────────────────────────────────── */
.rpm-live-btn {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-2);
  padding:        var(--space-2) var(--space-5);
  background:     var(--gray-900);
  color:          var(--white);
  border-radius:  var(--radius-md);
  font-size:      var(--text-sm);
  font-weight:    600;
  text-decoration: none;
  transition:     background 0.15s;
}
.rpm-live-btn::before { content: '⬤'; color: #ff4757; font-size: 0.6em; }
.rpm-live-btn:hover { background: var(--gray-700); color: var(--white); text-decoration: none; }

/* ── Refresh indicator ──────────────────────────────────────────── */
.rpm-refresh-bar {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  font-size:   var(--text-xs);
  color:       var(--gray-500);
}
.rpm-refresh-bar__track {
  width:         80px;
  height:        3px;
  background:    var(--gray-200);
  border-radius: 99px;
  overflow:      hidden;
}
.rpm-refresh-bar__fill {
  height:     100%;
  background: var(--blue-500);
  border-radius: 99px;
  transition: width 1s linear;
}

/* ── Footer ─────────────────────────────────────────────────────── */
.rpm-footer {
  text-align:    center;
  padding:       var(--space-6) var(--space-6) var(--space-10);
  font-size:     var(--text-xs);
  color:         var(--gray-500);
  border-top:    1px solid var(--gray-200);
  margin-top:    var(--space-8);
  display:       flex;
  align-items:   center;
  justify-content: center;
  gap:           var(--space-4);
}
.rpm-footer a { color: var(--gray-500); }
.rpm-footer a:hover { color: var(--gray-900); text-decoration: none; }

/* ── Utility ────────────────────────────────────────────────────── */
.u-mono     { font-family: var(--font-mono); font-size: 0.9em; }
.u-muted    { color: var(--gray-500); }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-sr-only  { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .rpm-main   { padding: var(--space-5) var(--space-4) var(--space-8); }
  .rpm-header { padding: 0 var(--space-4); }
  .rpm-page-header { padding: var(--space-4); }
  .rpm-cards-grid { grid-template-columns: 1fr; }
  .rpm-stats      { grid-template-columns: repeat(2, 1fr); }
  .rpm-info-grid  { grid-template-columns: repeat(2, 1fr); }
  .rpm-session-item__stats { display: none; }
  #rpm-clock { display: none; }
}