/* Recovery Monitor System — ui/clinician.css
   Clinician Dashboard Styles
   ──────────────────────────────────────────── */

/* ── APP SHELL ───────────────────────────────── */
.rms-cli-app {
  display: flex; flex-direction: column; min-height: 100vh;
  background: #0b1120; font-family: "Inter", system-ui, sans-serif; color: #e8ecf4;
}

/* ── HEADER ──────────────────────────────────── */
.rms-cli-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; background: #101828; border-bottom: 1px solid #1e2a45;
  position: sticky; top: 0; z-index: 100; flex-wrap: wrap; gap: 12px;
}
.rms-cli-header__brand { display: flex; align-items: center; gap: 12px; }
.rms-cli-header__dot {
  width: 12px; height: 12px; border-radius: 50%; background: #34d399;
  box-shadow: 0 0 10px #34d399; animation: cli-pulse 2s ease-in-out infinite; flex-shrink: 0;
}
@keyframes cli-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.rms-cli-header__title { font-size: 1.05rem; font-weight: 700; color: #e8ecf4; }
.rms-cli-header__sub { font-size: 0.72rem; color: #5b72e8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; }
.rms-cli-header__right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rms-cli-header__live { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: #34d399; }
.rms-cli-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; animation: cli-pulse 1.5s ease-in-out infinite; }
.rms-cli-header__datetime { font-size: 0.78rem; color: #5a6180; }
.rms-cli-header__user { font-size: 0.85rem; font-weight: 600; background: rgba(91,114,232,0.12); border: 1px solid rgba(91,114,232,0.25); border-radius: 8px; padding: 5px 12px; }

/* ── BODY ────────────────────────────────────── */
.rms-cli-body { display: flex; flex: 1; height: calc(100vh - 62px); overflow: hidden; }

/* ── SIDEBAR ─────────────────────────────────── */
.rms-cli-sidebar {
  width: 230px; min-width: 230px; background: #101828; border-right: 1px solid #1e2a45;
  display: flex; flex-direction: column; overflow-y: auto; padding-bottom: 16px;
}

/* Section labels */
.rms-cli-sidebar-section {
  padding: 14px 16px 6px; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.09em; color: #3a4260; font-weight: 700;
}

/* Nav items — same style as patient PWA */
.rms-cli-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 16px;
  cursor: pointer; border: none; background: transparent; color: #8a93b2;
  font-family: "Inter", sans-serif; font-size: 0.875rem; font-weight: 500;
  width: 100%; text-align: left; border-left: 3px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.rms-cli-nav-item:hover { background: #141d30; color: #c8d0e8; }
.rms-cli-nav-item.active { background: #141d30; color: #e8ecf4; border-color: #5b72e8; font-weight: 600; }
.rms-cli-nav-item--action { opacity: 0.85; }
.rms-cli-nav-item--action:hover { opacity: 1; border-color: #3ecfb2; color: #3ecfb2; }
.rms-cli-nav-icon { width: 20px; text-align: center; flex-shrink: 0; }

/* Alert pip on nav */
.rms-cli-alert-pip {
  background: #e05c6e; color: #fff; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; padding: 1px 6px; margin-left: 4px;
}

/* Patient list items */
.rms-cli-patient-item {
  display: flex; align-items: flex-start; gap: 9px; padding: 10px 16px;
  cursor: pointer; border-left: 3px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.rms-cli-patient-item:hover { background: #141d30; }
.rms-cli-patient-item.active { background: #141d30; border-color: #5b72e8; }

.rms-cli-pt-avatar {
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; flex-shrink: 0;
  width: 36px; height: 36px; font-size: 0.8rem;
}
.rms-cli-pt-avatar--sm  { width: 32px; height: 32px; font-size: 0.75rem; }
.rms-cli-pt-avatar--lg  { width: 52px; height: 52px; font-size: 1.1rem; }
.rms-cli-pt-info { flex: 1; min-width: 0; }
.rms-cli-pt-name { font-size: 0.84rem; font-weight: 600; color: #e8ecf4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rms-cli-pt-prog { font-size: 0.74rem; color: #5a6180; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rms-cli-pt-metrics { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; color: #8a93b2; margin-top: 3px; }
.rms-cli-pt-mini-avatar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 0.65rem; font-weight: 700; color: #fff; margin-right: 4px; }

/* Status dots */
.rms-cli-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.rms-cli-status-dot--ok    { background: #34d399; }
.rms-cli-status-dot--warn  { background: #f59e0b; }
.rms-cli-status-dot--alert { background: #e05c6e; animation: cli-pulse 1.5s infinite; }

/* Sidebar summary */
.rms-cli-sidebar-summary { border-top: 1px solid #1e2a45; padding: 12px 16px; margin-top: auto; }
.rms-cli-sum-row { display: flex; justify-content: space-between; font-size: 0.78rem; padding: 3px 0; color: #8a93b2; }
.rms-cli-sum-row b { color: #e8ecf4; font-weight: 600; }
.rms-cli-sum-row.alert b { color: #e05c6e; }

/* Badge */
.rms-cli-badge { background: rgba(91,114,232,0.15); color: #5b72e8; border-radius: 999px; font-size: 0.72rem; padding: 2px 7px; font-weight: 600; }

/* ── MAIN ────────────────────────────────────── */
.rms-cli-main {
  flex: 1; overflow-y: auto; padding: 22px 24px;
  display: flex; flex-direction: column; gap: 16px;
}

/* Page title */
.rms-cli-page-title {
  font-size: 1.2rem; font-weight: 700; color: #e8ecf4;
  display: flex; align-items: center; gap: 10px;
}
.rms-cli-sub { font-size: 0.8rem; color: #5a6180; font-weight: 400; }

/* ── PATIENT HEADER ──────────────────────────── */
.rms-cli-pt-header {
  display: flex; align-items: flex-start; gap: 16px;
  background: #101828; border: 1px solid #1e2a45; border-radius: 14px; padding: 18px 22px;
}
.rms-cli-pt-header__info { flex: 1; min-width: 0; }
.rms-cli-pt-header__name { font-size: 1.15rem; font-weight: 700; margin-bottom: 6px; }
.rms-cli-pt-header__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 0.8rem; color: #8a93b2; margin-bottom: 8px; }
.rms-cli-pt-header__meta b { color: #c8d0e8; }
.rms-cli-pt-header__note { font-size: 0.8rem; color: #5a6180; font-style: italic; line-height: 1.5; }
.rms-cli-pt-header__status { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.rms-cli-pt-updated { font-size: 0.73rem; color: #4a5470; }

/* Alert badges */
.rms-cli-alert-badge { font-size: 0.8rem; font-weight: 600; padding: 5px 12px; border-radius: 8px; white-space: nowrap; }
.rms-cli-alert-badge--ok    { background: rgba(52,211,153,0.1); color: #34d399; border: 1px solid rgba(52,211,153,0.25); }
.rms-cli-alert-badge--warn  { background: rgba(245,158,11,0.1);  color: #f59e0b; border: 1px solid rgba(245,158,11,0.25); }
.rms-cli-alert-badge--alert { background: rgba(224,92,110,0.1);  color: #e05c6e; border: 1px solid rgba(224,92,110,0.25); }

/* ── TABS ────────────────────────────────────── */
.rms-cli-tabs { display: flex; gap: 4px; background: #101828; border: 1px solid #1e2a45; border-radius: 12px; padding: 5px; flex-wrap: wrap; }
.rms-cli-tab { padding: 7px 14px; border-radius: 8px; font-size: 0.8rem; font-weight: 500; cursor: pointer; border: none; background: transparent; color: #8a93b2; transition: background 0.15s, color 0.15s; font-family: "Inter", sans-serif; white-space: nowrap; }
.rms-cli-tab:hover { background: #1e2440; color: #e8ecf4; }
.rms-cli-tab.active { background: #5b72e8; color: #fff; }

/* Tab content */
.rms-cli-tab-content { display: flex; flex-direction: column; gap: 16px; }

/* ── CARDS ───────────────────────────────────── */
.rms-cli-card {
  background: #101828; border: 1px solid #1e2a45; border-radius: 14px; padding: 18px 22px;
}
.rms-cli-card--alert-alert { border-color: rgba(224,92,110,0.4); }
.rms-cli-card--alert-warn  { border-color: rgba(245,158,11,0.4); }
.rms-cli-card__title { font-size: 0.82rem; font-weight: 700; color: #e8ecf4; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.05em; }
.rms-cli-card__top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rms-cli-card__name { font-size: 1rem; font-weight: 600; color: #e8ecf4; }
.rms-cli-card__sub { font-size: 0.8rem; color: #5a6180; margin-top: 2px; }
.rms-cli-card__actions { display: flex; gap: 10px; margin-top: 14px; }

/* ── STAT CARDS ──────────────────────────────── */
.rms-cli-stats-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.rms-cli-stat-card { background: #101828; border: 1px solid #1e2a45; border-radius: 12px; padding: 14px; text-align: center; }
.rms-cli-stat-card.rms-cli-stat--danger { border-color: rgba(224,92,110,0.4); }
.rms-cli-stat-card.rms-cli-stat--warn   { border-color: rgba(245,158,11,0.4); }
.rms-cli-stat-card.rms-cli-stat--green  { border-color: rgba(52,211,153,0.4); }
.rms-cli-stat-icon { font-size: 1.4rem; margin-bottom: 6px; }
.rms-cli-stat-val  { font-size: 1.2rem; font-weight: 700; color: #e8ecf4; }
.rms-cli-stat-lbl  { font-size: 0.72rem; color: #5a6180; margin-top: 3px; }

/* ── METRIC BARS ─────────────────────────────── */
.rms-cli-metric-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rms-cli-metric-lbl { width: 130px; font-size: 0.8rem; color: #8a93b2; flex-shrink: 0; }
.rms-cli-metric-bar { flex: 1; height: 8px; background: #1e2440; border-radius: 999px; overflow: hidden; }
.rms-cli-metric-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.rms-cli-metric-fill--good   { background: #34d399; }
.rms-cli-metric-fill--warn   { background: #f59e0b; }
.rms-cli-metric-fill--danger { background: #e05c6e; }
.rms-cli-metric-val { width: 40px; font-size: 0.8rem; color: #e8ecf4; text-align: right; font-weight: 600; }

/* ── METRICS GRID ────────────────────────────── */
.rms-cli-metrics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 10px; }
.rms-cli-metric-cell { background: #141d30; border: 1px solid #1e2a45; border-radius: 10px; padding: 13px; text-align: center; }
.rms-cli-metric-cell__icon { font-size: 1.25rem; margin-bottom: 5px; }
.rms-cli-metric-cell__val  { font-size: 1.05rem; font-weight: 700; color: #e8ecf4; }
.rms-cli-metric-cell__lbl  { font-size: 0.72rem; color: #5a6180; margin-top: 3px; }

/* ── TREND LABEL ─────────────────────────────── */
.rms-cli-trend-lbl { font-size: 0.78rem; font-weight: 600; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em; }

/* ── SESSION ROWS ────────────────────────────── */
.rms-cli-sess-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #1e2a45; }
.rms-cli-sess-row:last-child { border-bottom: none; }
.rms-cli-sess-status { font-size: 0.85rem; width: 18px; text-align: center; flex-shrink: 0; }
.rms-cli-sess-status--active  { color: #34d399; }
.rms-cli-sess-status--pending { color: #5a6180; }
.rms-cli-sess-status--paused  { color: #f59e0b; }
.rms-cli-sess-name { flex: 1; font-size: 0.85rem; color: #c8d0e8; }
.rms-cli-sess-meta { font-size: 0.76rem; color: #5a6180; white-space: nowrap; }

/* ── NOTES ───────────────────────────────────── */
.rms-cli-note-preview { background: #0f1525; border-left: 3px solid #5b72e8; border-radius: 0 8px 8px 0; padding: 12px 14px; }
.rms-cli-note-text { font-size: 0.875rem; color: #c8d0e8; line-height: 1.6; }
.rms-cli-note-meta { font-size: 0.72rem; color: #4a5470; margin-top: 6px; }
.rms-cli-note-item { padding: 11px 0; border-bottom: 1px solid #1e2a45; }
.rms-cli-note-item:last-child { border-bottom: none; }

/* ── TABLE ───────────────────────────────────── */
.rms-cli-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.rms-cli-table th { text-align: left; padding: 7px 10px; color: #5a6180; font-weight: 600; border-bottom: 1px solid #1e2a45; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.rms-cli-table td { padding: 9px 10px; color: #c8d0e8; border-bottom: 1px solid #141d30; }
.rms-cli-table tr:last-child td { border-bottom: none; }
.rms-cli-table tr:hover td { background: #0f1525; }
.rms-cli-row--alert td { color: #e05c6e; }
.rms-cli-row--warn  td { color: #f59e0b; }
.rms-cli-trend--up   { color: #34d399; font-weight: 600; }
.rms-cli-trend--down { color: #e05c6e; font-weight: 600; }

/* ── TAGS ────────────────────────────────────── */
.rms-cli-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; font-size: 0.75rem; font-weight: 500; }
.rms-cli-tag--active  { background: rgba(52,211,153,0.12);  color: #34d399; }
.rms-cli-tag--pending { background: rgba(90,97,128,0.15);   color: #8a93b2; }
.rms-cli-tag--paused  { background: rgba(245,158,11,0.12);  color: #f59e0b; }
.rms-cli-tag--done    { background: rgba(91,114,232,0.12);  color: #5b72e8; }

/* ── FORMS ───────────────────────────────────── */
.rms-cli-textarea { width: 100%; background: #0f1525; border: 1px solid #2a3454; border-radius: 8px; color: #e8ecf4; font-family: "Inter", sans-serif; font-size: 0.875rem; padding: 10px 13px; resize: vertical; line-height: 1.6; transition: border-color 0.15s; }
.rms-cli-textarea:focus { outline: none; border-color: #5b72e8; }
.rms-cli-select { background: #0f1525; border: 1px solid #2a3454; border-radius: 8px; color: #e8ecf4; font-family: "Inter", sans-serif; font-size: 0.8rem; padding: 8px 11px; cursor: pointer; }
.rms-cli-form-row { display: flex; gap: 10px; margin-top: 10px; align-items: center; }
.rms-cli-btn { font-family: "Inter", sans-serif; font-size: 0.875rem; font-weight: 500; padding: 8px 18px; border-radius: 8px; cursor: pointer; border: none; transition: background 0.15s; }
.rms-cli-btn--primary   { background: #5b72e8; color: #fff; }
.rms-cli-btn--primary:hover { background: #4a61d6; }
.rms-cli-btn--secondary { background: rgba(91,114,232,0.12); color: #8a93b2; border: 1px solid #2a3454; }
.rms-cli-btn--secondary:hover { background: rgba(91,114,232,0.2); color: #e8ecf4; }

/* ── INFO ROW ────────────────────────────────── */
.rms-cli-info-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 6px 0; border-bottom: 1px solid #141d30; color: #8a93b2; }
.rms-cli-info-row:last-of-type { border-bottom: none; }
.rms-cli-info-row b { color: #e8ecf4; font-weight: 600; }

/* ── WARD OVERVIEW GRID ──────────────────────── */
.rms-cli-ward-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 16px; }
.rms-cli-ward-card { background: #101828; border: 1px solid #1e2a45; border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; transition: border-color 0.2s, box-shadow 0.2s; }
.rms-cli-ward-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.3); border-color: #2a3a60; }
.rms-cli-ward-card--warn  { border-color: rgba(245,158,11,0.3); }
.rms-cli-ward-card--alert { border-color: rgba(224,92,110,0.4); }
.rms-cli-ward-card__top { display: flex; align-items: center; gap: 12px; }
.rms-cli-ward-card__info { flex: 1; min-width: 0; }
.rms-cli-ward-card__name { font-size: 1rem; font-weight: 600; color: #e8ecf4; }
.rms-cli-ward-card__prog { font-size: 0.78rem; color: #5a6180; margin-top: 2px; }
.rms-cli-ward-card__metrics { display: flex; gap: 8px; flex-wrap: wrap; }
.rms-cli-ward-card__status { font-size: 0.78rem; color: #8a93b2; display: flex; align-items: center; gap: 6px; }

/* Metric pills */
.rms-cli-metric-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 8px; font-size: 0.8rem; }
.rms-cli-metric-pill b { font-weight: 700; }
.rms-cli-metric-pill span { font-size: 0.72rem; opacity: 0.7; }
.rms-cli-metric-pill--good   { background: rgba(52,211,153,0.1); color: #34d399; }
.rms-cli-metric-pill--warn   { background: rgba(245,158,11,0.1);  color: #f59e0b; }
.rms-cli-metric-pill--danger { background: rgba(224,92,110,0.1);  color: #e05c6e; }

/* Progress bar */
.rms-cli-progress-row { display: flex; justify-content: space-between; font-size: 0.78rem; color: #8a93b2; margin-bottom: 5px; }
.rms-cli-progress-bar { height: 6px; background: #1e2440; border-radius: 999px; overflow: hidden; }
.rms-cli-progress-fill { height: 100%; background: #5b72e8; border-radius: 999px; transition: width 0.4s; }

/* ── ALERTS VIEW ─────────────────────────────── */
.rms-cli-alert-metrics { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 0; }
.rms-cli-alert-row { font-size: 0.85rem; color: #8a93b2; padding: 6px 10px; background: #0f1525; border-radius: 6px; }
.rms-cli-alert-row b { color: #e8ecf4; }
.rms-cli-alert-row--red    { background: rgba(224,92,110,0.08); color: #e05c6e; }
.rms-cli-alert-row--yellow { background: rgba(245,158,11,0.08);  color: #f59e0b; }

/* ── EMPTY ───────────────────────────────────── */
.rms-cli-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; min-height: 300px; font-size: 1rem; color: #5a6180; padding: 40px; text-align: center; gap: 8px; }
.rms-cli-empty-sm { font-size: 0.85rem; color: #5a6180; padding: 10px 0; }

/* ── SPARKLINE ───────────────────────────────── */
.rms-cli-sparkline { display: block; max-width: 100%; }

/* ── RESPONSIVE ──────────────────────────────── */
@media (max-width: 900px) {
  .rms-cli-body { flex-direction: column; height: auto; overflow: visible; }
  .rms-cli-sidebar { width: 100%; min-width: 0; height: auto; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid #1e2a45; overflow-x: auto; padding-bottom: 0; }
  .rms-cli-sidebar-summary { display: none; }
  .rms-cli-main { padding: 14px; }
}
@media (max-width: 560px) {
  .rms-cli-header { padding: 10px 14px; }
  .rms-cli-stats-row { grid-template-columns: repeat(2,1fr); }
  .rms-cli-pt-header { flex-direction: column; }
  .rms-cli-pt-header__status { align-items: flex-start; }
}