/* Home dashboard — estilos isolados, não tocam :root nem styles.css global.
   Tokens próprios prefixados --dash-* para não vazar no resto do app, que
   mantém sua paleta/tipografia atuais fora desta tela. */
#homeShell {
  --dash-bg: #FBFBFC;
  --dash-surface: #FFFFFF;
  --dash-border: #E2E6EA;
  --dash-border-light: #ECEEF1;
  --dash-text-primary: #1F2937;
  --dash-text-secondary: #667085;
  --dash-text-muted: #8B93A2;
  --dash-green-primary: #08754F;
  --dash-green-button: #08754F;
  --dash-green-dark: #076443;
  --dash-green-soft: #EDF6EF;
  --dash-green-active-nav: #EFF6EF;
  --dash-purple: #6C5CC5;
  --dash-purple-soft: #F1EEFB;
  --dash-blue: #2380B9;
  --dash-blue-soft: #EAF5FB;
  --dash-orange: #E67A24;
  --dash-orange-soft: #FFF2E8;

  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--dash-text-primary);
  background: var(--dash-bg);
}

#homeShell * { box-sizing: border-box; }
/* :where() zera a especificidade do reset — sem isso, o seletor #homeShell
   (ID) venceria as classes .dash-* que redeclaram border/background nos
   botões que precisam deles (ex.: .dash-quick-action, .dash-btn-primary),
   e o reset "vazaria" por cima delas em vez de só cobrir o estilo padrão
   do navegador. */
:where(#homeShell) button {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  text-align: inherit;
}
#homeShell a { text-decoration: none; color: inherit; cursor: pointer; }
#homeShell svg { flex-shrink: 0; display: block; }

.dash-app { display: grid; grid-template-columns: 274px 1fr; min-height: 100vh; background: var(--dash-bg); }

/* ---------- Sidebar ---------- */
.dash-sidebar {
  background: var(--dash-surface);
  border-right: 1px solid #E4E7EA;
  min-height: 100vh;
  position: sticky;
  top: 0;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.dash-brand { display: flex; align-items: center; gap: 10px; height: 80px; padding: 0 30px; }
.dash-brand-icon { width: 26px; height: 26px; border-radius: 7px; background: var(--dash-green-soft); color: var(--dash-green-primary); display: flex; align-items: center; justify-content: center; }
.dash-brand-text { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }

.dash-divider { height: 1px; background: var(--dash-border-light); margin: 0 0; flex-shrink: 0; }

.dash-user-wrap { position: relative; }
.dash-user {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 85px;
  padding: 0 20px; background: none; border: none; text-align: left;
}
.dash-user:hover { background: #FAFAFB; }
.dash-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--dash-purple-soft); color: var(--dash-purple);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 650; flex-shrink: 0;
}
.dash-user-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.dash-user-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-user-role { font-size: 13px; color: var(--dash-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-user .dash-chevron { color: var(--dash-text-muted); }

.dash-nav { display: flex; flex-direction: column; padding: 8px 16px; gap: 2px; }
.dash-nav-item {
  display: flex; align-items: center; gap: 14px; height: 50px; padding: 0 12px;
  border-radius: 8px; font-size: 14px; color: var(--dash-text-secondary); font-weight: 500;
}
.dash-nav-item svg { color: var(--dash-text-muted); }
.dash-nav-item:hover { background: #FAFAFB; color: var(--dash-text-primary); }
.dash-nav-item.active { background: var(--dash-green-active-nav); color: var(--dash-green-dark); font-weight: 600; }
.dash-nav-item.active svg { color: var(--dash-green-dark); }
.dash-nav-item.is-inert { cursor: default; }
.dash-nav-item.is-inert:hover { background: none; color: var(--dash-text-secondary); }

.dash-section-label { padding: 16px 30px 6px; font-size: 11px; font-weight: 650; letter-spacing: 0.06em; color: var(--dash-text-muted); text-transform: uppercase; }

.dash-sidebar-spacer { flex: 1; }

.dash-clinic { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 20px; background: none; border: none; text-align: left; color: var(--dash-text-muted); }
.dash-clinic:hover { background: #FAFAFB; }
.dash-clinic-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dash-clinic-name { font-size: 13px; font-weight: 600; color: var(--dash-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-clinic-cnpj { font-size: 12px; color: var(--dash-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dash-back-link { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dash-text-secondary); padding: 12px 20px 0; }
.dash-back-link:hover { color: var(--dash-green-primary); }

/* ---------- Topbar ---------- */
.dash-main { display: flex; flex-direction: column; min-width: 0; }

.dash-topbar {
  height: 68px; background: var(--dash-surface); border-bottom: 1px solid #E5E7EA;
  display: flex; align-items: center; justify-content: flex-end; gap: 18px; padding: 0 32px;
  position: sticky; top: 0; z-index: 15; flex-shrink: 0;
}

.dash-search-wrap {
  position: relative; display: flex; align-items: center; gap: 8px;
  width: 305px; height: 42px; padding: 0 12px; background: #FAFAFB; border: 1px solid var(--dash-border); border-radius: 9px;
}
.dash-search-wrap svg { color: var(--dash-text-muted); }
.dash-search-wrap input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: 13px; color: var(--dash-text-primary); font-family: inherit; }
.dash-search-wrap input::placeholder { color: var(--dash-text-muted); }
.dash-kbd { font-size: 11px; color: var(--dash-text-muted); background: var(--dash-surface); border: 1px solid var(--dash-border); border-radius: 5px; padding: 2px 6px; flex-shrink: 0; }

.dash-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; width: 340px; max-height: 320px; overflow-y: auto;
  background: var(--dash-surface); border: 1px solid var(--dash-border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(37, 41, 54, 0.10); display: none; z-index: 30; padding: 6px;
}
.dash-search-results.show { display: block; }
.dash-search-result { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 7px; border: none; background: none; font-size: 13px; }
.dash-search-result:hover { background: #FAFAFB; }
.dash-search-result-name { font-weight: 600; color: var(--dash-text-primary); }
.dash-search-result-meta { font-size: 12px; color: var(--dash-text-muted); }
.dash-search-empty { padding: 10px; font-size: 12px; color: var(--dash-text-muted); text-align: center; }

.dash-icon-btn {
  position: relative; width: 38px; height: 38px; border-radius: 8px; border: none; background: none;
  display: flex; align-items: center; justify-content: center; color: var(--dash-text-secondary);
}
.dash-icon-btn:hover { background: #FAFAFB; }
.dash-badge {
  position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; border-radius: 8px;
  font-size: 10px; font-weight: 650; display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.dash-badge-purple { background: var(--dash-purple); color: #fff; }

.dash-avatar-wrap { position: relative; }
.dash-avatar-btn { position: relative; background: none; border: none; padding: 0; line-height: 0; }
.dash-avatar-dot { position: absolute; bottom: -1px; right: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--dash-green-primary); border: 2px solid var(--dash-surface); }

.dash-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; width: 220px; background: var(--dash-surface);
  border: 1px solid var(--dash-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(37, 41, 54, 0.12);
  padding: 6px; z-index: 30; display: none;
}
.dash-dropdown.show { display: block; }
.dash-dropdown-item { display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: 7px; border: none; background: none; font-size: 13px; color: var(--dash-text-primary); }
.dash-dropdown-item:hover { background: #FAFAFB; }
.dash-dropdown-item.danger { color: #C0392B; }

/* ---------- Content ---------- */
.dash-content { flex: 1; padding: 26px 69px 40px 50px; display: flex; flex-direction: column; gap: 26px; max-width: 1600px; width: 100%; }

.dash-welcome { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.dash-welcome h1 { font-size: 32px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.dash-welcome p { font-size: 16px; color: var(--dash-text-secondary); margin: 6px 0 0; }

.dash-new-patient { display: flex; align-items: stretch; border-radius: 8px; overflow: hidden; box-shadow: none; }
.dash-btn-primary {
  display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; background: var(--dash-green-button);
  color: #fff; border: none; font-size: 14px; font-weight: 600;
}
.dash-btn-primary:hover { background: var(--dash-green-dark); }
.dash-btn-primary-caret { padding: 0 10px; border-left: 1px solid rgba(255,255,255,0.22); }

.dash-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dash-metric-card { background: var(--dash-surface); border: 1px solid var(--dash-border); border-radius: 12px; padding: 22px; min-height: 150px; display: flex; flex-direction: column; gap: 10px; }
.dash-metric-icon { width: 58px; height: 58px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.dash-icon-green { background: var(--dash-green-soft); color: var(--dash-green-primary); }
.dash-icon-purple { background: var(--dash-purple-soft); color: var(--dash-purple); }
.dash-icon-orange { background: var(--dash-orange-soft); color: var(--dash-orange); }
.dash-metric-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dash-text-secondary); font-weight: 500; }
.dash-info-dot { color: var(--dash-text-muted); }
.dash-metric-value { font-size: 34px; font-weight: 700; line-height: 1; }
.dash-metric-foot { font-size: 12.5px; color: var(--dash-text-muted); display: flex; align-items: center; gap: 4px; }
.dash-metric-foot.dash-trend-up { color: #2C7A4B; }
.dash-metric-foot.dash-trend-up svg { color: #2C7A4B; }

.dash-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: start; }
.dash-col-left, .dash-col-right { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.dash-card { background: var(--dash-surface); border: 1px solid var(--dash-border); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
.dash-card-header { display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 20px; }
.dash-card-header h2 { font-size: 18px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 8px; }
.dash-card-link { margin-left: auto; font-size: 13px; color: var(--dash-text-secondary); }
.dash-card-link:hover { color: var(--dash-green-primary); }
.dash-date-chip { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--dash-text-secondary); background: #FAFAFB; border: 1px solid var(--dash-border-light); border-radius: 7px; padding: 5px 10px; }

.dash-badge-purple-soft { background: var(--dash-purple-soft); color: var(--dash-purple); font-size: 11px; font-weight: 650; border-radius: 8px; padding: 1px 7px; min-width: 18px; text-align: center; display: inline-flex; align-items: center; justify-content: center; height: 18px; }

/* Timeline (agenda) */
.dash-timeline { display: flex; flex-direction: column; padding: 4px 0; }
.dash-timeline-row { display: flex; gap: 16px; padding: 0 20px; height: 69px; }
.dash-timeline-time { width: 46px; flex-shrink: 0; font-size: 16px; font-weight: 600; padding-top: 20px; }
.dash-timeline-rail { position: relative; width: 16px; flex-shrink: 0; display: flex; justify-content: center; }
.dash-timeline-rail::before { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--dash-border); }
.dash-timeline-dot { position: relative; z-index: 1; width: 10px; height: 10px; border-radius: 50%; margin-top: 24px; border: 2px solid var(--dash-surface); box-shadow: 0 0 0 1px var(--dash-border); }
/* O separador começa só depois da coluna de horário/timeline, não a linha
   inteira — por isso vive no corpo (.dash-timeline-body), não na row. */
.dash-timeline-body { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--dash-border-light); height: 100%; }
.dash-timeline-row:first-child .dash-timeline-body { border-top: none; }
.dash-timeline-info { min-width: 0; }
.dash-timeline-title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-timeline-patient { font-size: 13px; color: var(--dash-text-secondary); margin-top: 2px; }
.dash-timeline-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dash-timeline-right svg { color: var(--dash-text-muted); }

.dash-status { font-size: 12px; font-weight: 600; border-radius: 7px; padding: 4px 10px; white-space: nowrap; }
.dash-status-confirmado { background: var(--dash-green-soft); color: #2C7A4B; }
.dash-status-pendente { background: var(--dash-orange-soft); color: #B4620A; }
.dash-status-ativo { background: var(--dash-green-soft); color: #2C7A4B; }

.dash-card-footer { padding: 12px 20px; border-top: 1px solid var(--dash-border-light); }
.dash-card-footer a { font-size: 13px; color: var(--dash-text-secondary); }
.dash-card-footer a:hover { color: var(--dash-green-primary); }

/* SectionCard/PageHeader (lib/ui-kit.js) — corpo genérico de card fora dos
   layouts especiais (timeline/lista) já cobertos acima. */
.dash-card-body { padding: 18px 20px; }
.dash-page-actions { display: flex; align-items: center; gap: 10px; }

/* Compact list rows (pendências / pacientes recentes) */
.dash-list { display: flex; flex-direction: column; }
.dash-list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 20px; border-top: 1px solid var(--dash-border-light); }
.dash-list-row:first-child { border-top: none; }
.dash-list-info { min-width: 0; }
.dash-list-name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-list-sub { font-size: 12.5px; color: var(--dash-text-secondary); margin-top: 2px; }
.dash-list-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dash-list-date { font-size: 12px; color: var(--dash-text-muted); }
.dash-list-right svg { color: var(--dash-text-muted); }

/* Quick actions */
.dash-quick-actions { padding: 18px 20px; }
.dash-quick-actions h2 { font-size: 15px; font-weight: 600; margin: 0 0 14px; }
.dash-quick-actions-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.dash-quick-action {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px;
  border: 1px solid var(--dash-border); border-radius: 8px; background: var(--dash-surface); font-size: 13px; font-weight: 500; color: var(--dash-text-primary);
}
.dash-quick-action svg { color: var(--dash-text-secondary); }
.dash-quick-action:hover { background: #FAFAFB; border-color: #D6DADF; }

/* Footer */
.dash-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 6px; }
.dash-footer-left { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--dash-text-muted); }
.dash-footer-right { display: flex; align-items: center; gap: 16px; font-size: 12.5px; color: var(--dash-text-muted); }
.dash-footer-right .dash-support { display: flex; align-items: center; gap: 5px; }

/* Página do paciente (Fase 2) — cabeçalho, tabs, colunas da visão geral. */
.dash-back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dash-text-secondary); margin-bottom: 14px; }
.dash-back-link:hover { color: var(--dash-text-primary); }

.dash-patient-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.dash-patient-header-main { display: flex; align-items: flex-start; gap: 14px; }
.dash-patient-avatar-lg {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; background: var(--dash-purple-soft); color: var(--dash-purple);
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 650;
}
.dash-patient-header-name { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; color: var(--dash-text-primary); }
.dash-patient-header-meta { font-size: 13px; color: var(--dash-text-secondary); margin-top: 4px; }
.dash-patient-header-actions { display: flex; align-items: center; gap: 10px; }

.dash-page-tabs-bar { height: 44px; border-bottom: 1px solid var(--dash-border); margin-bottom: 20px; }

.dash-overview-grid { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 20px; align-items: start; }
.dash-overview-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.dash-readonly-field { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--dash-border-light); font-size: 13px; }
.dash-readonly-field:last-child { border-bottom: none; }
.dash-readonly-label { color: var(--dash-text-secondary); flex-shrink: 0; }
.dash-readonly-value { color: var(--dash-text-primary); font-weight: 500; text-align: right; }

.dash-tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-tag { font-size: 12px; font-weight: 500; border-radius: 6px; padding: 4px 9px; background: var(--dash-border-light); color: var(--dash-text-primary); }

@media (max-width: 1180px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-metrics { grid-template-columns: repeat(2, 1fr); }
  .dash-overview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .dash-app { grid-template-columns: 76px 1fr; }
  .dash-brand-text, .dash-user-info, .dash-nav-item span, .dash-section-label, .dash-clinic-info { display: none; }
  .dash-nav-item { justify-content: center; }
  .dash-quick-actions-row { grid-template-columns: repeat(2, 1fr); }
}