/* ============================================================
   Navigator Hub — REDESIGN: iteracja 1 (KOKPIT)
   Warstwa aplikacyjna oparta WYŁĄCZNIE na tokenach z tokens.css.
   - GLOBAL CHROME (wszystkie widoki): menu, tło, fonty.
   - KOMPONENTY: scoped do #view-dashboard, żeby pozostałe widoki
     (poczta, leady, kanban, karta pacjenta) zostały NIETKNIĘTE.
   ============================================================ */

/* ====================== GLOBAL CHROME ====================== */

/* Tło aplikacji — miękki gradient z briefu (zastępuje radialny błękit) */
body {
  background-color: var(--nh-bg-mid) !important;
  background-image: linear-gradient(
    165deg,
    var(--nh-bg-top) 0%,
    var(--nh-bg-mid) 42%,
    var(--nh-bg-bot) 100%
  ) !important;
  background-attachment: fixed !important;
  color: var(--nh-text);
}

/* Typografia — Inter dla treści/inputów, Montserrat dla nagłówków */
body,
input, select, textarea, button,
table, .dash-panel-body, .leads-list, .calls-table td {
  font-family: var(--nh-font-body);
}
.view-header h1,
.dash-panel-title h3,
.global-topbar,
.sb-nav-btn,
h1, h2, h3 {
  font-family: var(--nh-font-head);
}

/* Menu boczne — głęboki granat + miękka poświata przypięta do menu */
.sidebar {
  background: var(--nh-navy) !important;
  border-right: none !important;
  box-shadow: var(--nh-sh-sidebar) !important;
}

/* ============== KOMPONENTY KOKPITU (scoped) =============== */

/* Panele — białe karty, cienkie obramowanie zamiast mocnych cieni */
#view-dashboard .dash-panel {
  background: var(--nh-surface) !important;
  border: 1px solid var(--nh-line) !important;
  border-radius: var(--nh-r-card) !important;
  box-shadow: var(--nh-sh-card) !important;
}

/* Nagłówek panelu — jaśniej, cienkie wersaliki */
#view-dashboard .dash-panel-header {
  background: transparent !important;
  border-bottom: 1px solid var(--nh-line-soft) !important;
  padding: 18px 22px !important;
}
#view-dashboard .dash-panel-title h3 {
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: var(--nh-ls-section) !important;
  text-transform: uppercase !important;
  color: var(--nh-text-2) !important;
}
#view-dashboard .dash-panel-body {
  padding: 16px 20px !important;
}

/* Oś czasu / tabele — cienkie linie, spokojny nagłówek */
#view-dashboard .dash-timeline-table thead th,
#view-dashboard .calls-table thead th {
  font-family: var(--nh-font-head);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nh-text-muted);
  border-bottom: 1px solid var(--nh-line-soft) !important;
  background: transparent !important;
}
#view-dashboard .dash-timeline-table td,
#view-dashboard .calls-table td {
  border-bottom: 1px solid var(--nh-line-soft) !important;
  color: var(--nh-text);
}
#view-dashboard .dash-timeline-table tr.call-row:hover > td {
  background: var(--nh-row-select) !important;
}
#view-dashboard .calls-date-separator td {
  color: var(--nh-text-muted) !important;
  background: transparent !important;
}

/* Statusy — pastelowe, czytelne, nienachalne */
#view-dashboard .call-tag.tag-connected {
  background: var(--nh-ok-bg)   !important; color: var(--nh-ok-text)   !important;
}
#view-dashboard .call-tag.tag-missed {
  background: var(--nh-miss-bg) !important; color: var(--nh-miss-text) !important;
}
#view-dashboard .call-tag.tag-ineffective {
  background: var(--nh-fail-bg) !important; color: var(--nh-fail-text) !important;
}
#view-dashboard .call-tag {
  border: none !important;
  border-radius: var(--nh-r-badge) !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em;
}

/* Etykiety raportu (✓ Podgląd / ⚠ Uzupełnij) */
#view-dashboard .report-tag {
  border-radius: var(--nh-r-badge) !important;
  font-weight: 500 !important;
}
#view-dashboard .report-tag.report-done {
  color: var(--nh-ok-text) !important; border-color: #BFEAD2 !important; background: transparent !important;
}
#view-dashboard .report-tag.report-missing {
  color: var(--nh-miss-text) !important; background: var(--nh-miss-bg) !important; border-color: transparent !important;
}

/* Tła grup zgrupowanych prób — lekkie, papierowe */
#view-dashboard tr.dash-group-parent > td { background: #F8FBFC !important; }
#view-dashboard .dash-group-extra > td    { background: var(--nh-group-blue) !important; }
#view-dashboard .dash-group-extra:hover > td { background: #E3F1F5 !important; }
#view-dashboard .dash-group-extra > td:first-child { border-left-color: var(--nh-accent) !important; }
#view-dashboard .dash-group-extra > td:first-child::before { color: var(--nh-accent) !important; }
#view-dashboard .dash-group-toggle {
  background: var(--nh-group-blue) !important;
  color: var(--nh-accent) !important;
  border: 1px solid #BCDEE6 !important;
}
#view-dashboard .dash-group-toggle.open {
  background: var(--nh-accent) !important;
  color: var(--nh-text-on-dark) !important;
  border-color: var(--nh-accent) !important;
}

/* Przyciski na kokpicie — granat jako główne CTA */
#view-dashboard .btn-callback-call,
#view-dashboard .btn-call-dark,
#view-dashboard button.cb-call-stali,
#view-dashboard .start-card-btn {
  background: var(--nh-navy) !important;
  color: var(--nh-text-on-dark) !important;
  border: none !important;
  border-radius: var(--nh-r-badge) !important;
}
#view-dashboard .btn-callback-call:hover,
#view-dashboard .btn-call-dark:hover {
  background: var(--nh-navy-hover) !important;
}

/* Awatary inicjałów — akcent zamiast różnych kolorów per użytkownik */
#view-dashboard .call-avatar {
  background: var(--nh-accent) !important;
  color: var(--nh-text-on-dark) !important;
}

/* Sekcje „dashboard-section-block" (jeśli używane na kokpicie) */
#view-dashboard .dashboard-section-block {
  background: var(--nh-surface) !important;
  border: 1px solid var(--nh-line) !important;
  border-radius: var(--nh-r-card) !important;
  box-shadow: var(--nh-sh-card) !important;
}
#view-dashboard .dashboard-section-block .section-header h3 {
  font-family: var(--nh-font-head);
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: var(--nh-ls-section) !important;
  text-transform: uppercase !important;
  color: var(--nh-text-2) !important;
}