@import url('/design-system/styles.css');
/* Composição do dashboard: primitivas e valores visuais vêm da biblioteca. */
.sidebar { position: fixed; inset: var(--sidebar-inset) auto var(--sidebar-inset) var(--sidebar-inset); width: var(--sidebar-content); background: var(--surface-inverse); color: var(--text-inverse); border-radius: var(--radius-2xl); display: flex; flex-direction: column; padding: var(--space-6) var(--space-4); }
.brand { display: flex; align-items: center; gap: var(--space-3); margin: 0 var(--space-2) var(--space-8); font: var(--type-title); color: inherit; text-decoration: none; }
.brand:hover { color: inherit; }
.sidebar :focus-visible { outline-color: var(--focus-ring-inverse); }
.brand-light { display: block; font-weight: var(--weight-regular); color: var(--text-inverse-muted); }
.nav-label, .eyebrow, .section-kicker { font: var(--type-overline); letter-spacing: var(--tracking-wide); color: var(--text-muted); }
.nav-label { color: var(--text-inverse-muted); margin: 0 var(--space-3) var(--space-4); }
nav { display: grid; gap: var(--space-1); }
nav button { display: flex; align-items: center; gap: var(--space-2); text-align: left; min-height: var(--touch-min); border: 0; border-radius: var(--radius-full); padding: var(--space-3); background: transparent; color: var(--text-inverse); font-size: var(--text-sm); }
nav button:hover { background: var(--navy-800); }
nav button.active { background: var(--surface-selected); color: var(--green-800); font-weight: var(--weight-semibold); }
nav b { margin-left: auto; padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--green-100); color: var(--green-800); }
.sidebar-bottom { margin-top: auto; }
.connection { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0; font-size: var(--text-xs); color: var(--text-inverse-muted); }
.dot { display: inline-block; width: var(--space-1-5); height: var(--space-1-5); background: var(--success-icon); border-radius: var(--radius-full); flex: none; }
.profile { display: flex; align-items: center; gap: var(--space-2); padding-top: var(--space-5); border-top: var(--border-width) solid var(--navy-700); }
.profile strong { font: var(--type-label); }
.profile small { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--text-inverse-muted); }
main { margin-left: calc(var(--sidebar-w) + var(--space-4)); padding: var(--page-pad); max-width: calc(var(--content-max) + var(--sidebar-w)); }
.page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-5); margin-bottom: var(--space-6); }
.eyebrow { margin-bottom: var(--space-3); }
h1 span { color: var(--green-700); }
.subtitle { color: var(--text-muted); line-height: var(--leading-relaxed); margin: 0; }
.env-pill { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--surface-card); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-full); font-size: var(--text-xs); padding: var(--space-2) var(--space-3); }
.demo-banner { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.demo-banner p { font-size: var(--text-xs); margin: var(--space-1) 0 0; }
.demo-banner button { margin-left: auto; flex: none; }
.banner-icon { font-size: var(--text-2xl); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.stat-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.stat-label { font: var(--type-overline); color: var(--text-muted); overflow-wrap: anywhere; }
.stat-icon { color: var(--green-700); }
.stat-value { font: var(--type-display); color: var(--text-strong); margin: var(--space-3) 0 var(--space-2); }
.stat-detail { font: var(--type-caption); color: var(--text-muted); }
.stat-detail em { color: var(--green-700); font-style: normal; }
.panel { margin-bottom: var(--space-5); }
.section-kicker { margin-bottom: var(--space-1); }
.soft-label, .reason { font: var(--type-caption); color: var(--text-muted); }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
input[type=date] { width: var(--filter-date-w); }
.search { margin-left: auto; width: var(--search-w); }
.person-cell, .human-top, .integration, .professional { display: flex; align-items: center; gap: var(--space-3); }
.person-cell strong { display: block; font-weight: var(--weight-semibold); }
.person-cell small { display: block; color: var(--text-muted); font-size: var(--text-xs); margin-top: var(--space-1); }
.time-cell { white-space: nowrap; font-weight: var(--weight-semibold); }
.two-col { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-5); }
.human-card, .integration, .professional { padding: var(--space-4) 0; border-bottom: var(--border-width) solid var(--border-default); }
.human-card:last-child, .integration:last-of-type, .professional:last-child { border: 0; }
.human-top { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.human-card p { margin: var(--space-3) 0; color: var(--text-muted); }
.reason { margin-top: var(--space-1); }
.integration-icon { display: grid; place-items: center; width: var(--avatar-size); height: var(--avatar-size); border-radius: var(--radius-md); background: var(--tint-mint); color: var(--green-800); }
.integration small { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-1); }
.note { font-size: var(--text-xs); background: var(--surface-sunken); color: var(--text-muted); border-color: var(--border-subtle); margin: var(--space-4) 0 0; line-height: var(--leading-relaxed); }
.activity-row { display: grid; grid-template-columns: var(--space-2) 1fr 1fr var(--activity-time-w); gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--border-subtle); font-size: var(--text-xs); }
.activity-row span:last-child { text-align: right; color: var(--text-muted); }
.activity-detail { color: var(--text-muted); }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); color: var(--text-muted); font-size: var(--text-xs); padding: var(--space-2) 0 var(--space-4); }
.footer-dot { margin: 0 var(--space-2); }
.config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.professional p { font-size: var(--text-xs); color: var(--text-muted); margin: var(--space-2) 0; }
.config-pill { margin: var(--space-0-5); }
.faq-title { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); }
.detail-list { display: grid; grid-template-columns: var(--detail-label-w) minmax(0, 1fr); gap: var(--space-4); }
.detail-list dt { color: var(--text-muted); }
.detail-list dd { margin: 0; overflow-wrap: anywhere; }
.date-heading { color: var(--text-muted); font-size: var(--text-xs); margin-bottom: var(--space-4); }
.ds-link { display: inline-flex; align-items: center; min-height: var(--touch-min); color: inherit; font: var(--type-caption); }
@media (max-width: 1150px) { main { padding: var(--space-6); } .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) {
  .sidebar { position: static; inset: auto; width: auto; margin: var(--space-4); padding: var(--space-4); border-radius: var(--radius-xl); }
  .brand { margin: 0 0 var(--space-4); } .brand-light { display: inline; margin-left: var(--space-1); }
  .nav-label, .sidebar-bottom { display: none; } nav { display: flex; flex-wrap: wrap; gap: var(--space-1); }
  nav button { font-size: var(--text-xs); padding: var(--space-2) var(--space-3); } nav b { display: none; }
  main { margin: 0; padding: var(--page-pad-mobile); width: 100%; }
  .page-header { flex-wrap: wrap; gap: var(--space-3); } h1 { font: var(--type-h2); }
  .two-col, .config-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .stats { gap: var(--space-3); } .stat { padding: var(--space-4); }
  .demo-banner { flex-wrap: wrap; align-items: flex-start; } .demo-banner > div { flex: 1; min-width: var(--text-area-min); }
  .demo-banner button { margin-left: 0; } .panel-head { flex-wrap: wrap; }
  .search { width: 100%; margin: 0; } .filters select { flex: 1; }
  .integration { flex-wrap: wrap; } .integration .badge { margin-left: var(--space-12); }
  .activity-row { grid-template-columns: var(--space-2) minmax(0, 1fr) var(--activity-time-w); gap: var(--space-2); } .activity-detail { display: none; }
  .detail-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
}