/* DrHouse · Topbar v2
 * Global navigation (4 primary stany pracy) + ProcedureBar (kontekstowa, tylko w konsultacji).
 * Ladowane po styles.css, uzywa zmiennych --accent etc. jesli istnieja, fallback inline.
 * Max 300 linii zgodnie z CLAUDE.md.
 */

:root {
  --tb-bg: #FFFFFF;
  --tb-warm: #F3EDE5;
  --tb-border: #E8E0D4;
  --tb-hairline: #EFE7D8;
  --tb-text: #2D2B28;
  --tb-muted: #7A6F61;
  --tb-mute-strong: #5C5244;
  --tb-accent: #D97757;
  --tb-accent-ink: #B45A3C;
  --tb-accent-soft: #F5E3D8;
  --tb-crisis: #C0392B;
  --tb-crisis-soft: #FBE9E7;
  --tb-crisis-tint: #F9D8D3;
  --tb-green: #2F6B3E;
  --tb-green-soft: #E1EEE3;
  --tb-font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --tb-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
}

/* ------ topbar shell ------ */
.app-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;  /* nad legacy screen-headerami (z-index 1000) */
  height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 22px;
  background: var(--tb-bg);
  border-bottom: 1px solid var(--tb-border);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  color: var(--tb-text);
}

/* Ukryj topbar na loginie */
body[data-screen="loginScreen"] .app-topbar,
body[data-screen=""] .app-topbar,
body:not([data-screen]) .app-topbar { display: none; }

/* Padding-top na body zeby tresc nie byla przykryta przez fixed topbar. */
body:not([data-screen="loginScreen"]) { padding-top: 64px; }
body[data-screen="chatScreenFullwidth"] { padding-top: 112px; }  /* 64 + 48 procbar */

/* ------ ukrycie legacy screen-headerow (identScreen > header, chat-header, dashboard-header) ------ */
/* Topbar v2 zastepuje je. CSS z !important bo legacy uzywaja inline style. */
body:not([data-screen="loginScreen"]) #identScreen > header,
body:not([data-screen="loginScreen"]) #chatScreenFullwidth > .chat-header,
body:not([data-screen="loginScreen"]) #triageScreen > .dashboard-header {
  display: none !important;
}

/* ------ brand ------ */
.tb-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tb-brand__mark { font-family: var(--tb-font-serif); font-size: 22px; letter-spacing: -0.02em; white-space: nowrap; }
.tb-brand__mark strong { font-weight: 700; color: var(--tb-accent-ink); font-style: italic; }
.tb-brand__divider { width: 1px; height: 18px; background: var(--tb-border); }
.tb-brand__facility {
  font-size: 11px; color: var(--tb-muted); letter-spacing: 0.04em;
  text-transform: uppercase; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ------ primary nav ------ */
.tb-nav { display: flex; gap: 2px; background: var(--tb-warm); padding: 4px; border-radius: 999px; border: 1px solid var(--tb-hairline); }
.tb-nav__item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; font-size: 13px; color: var(--tb-mute-strong);
  text-decoration: none; border-radius: 999px; font-weight: 500;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  transition: color .15s, background .15s;
}
.tb-nav__item:hover { color: var(--tb-text); }
.tb-nav__item[aria-current="page"] {
  background: var(--tb-bg); color: var(--tb-text);
  box-shadow: 0 1px 2px rgba(45,43,40,0.06), 0 0 0 1px var(--tb-border);
}
.tb-nav__item:focus-visible { outline: 2px solid var(--tb-accent); outline-offset: 2px; }
.tb-nav__item .tb-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--tb-accent); display: inline-block; }

/* ------ meta (patient chip + operator + signout) ------ */
.tb-meta { display: flex; align-items: center; gap: 14px; justify-content: flex-end; min-width: 0; }

.tb-patient-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 12px 5px 5px;
  background: var(--tb-warm); border: 1px solid var(--tb-hairline);
  border-radius: 999px;
}
.tb-patient-chip[hidden] { display: none; }
.tb-patient-chip__mono {
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #F6DFCE, var(--tb-accent-soft));
  display: grid; place-items: center;
  font-family: var(--tb-font-serif); font-weight: 700; font-size: 13px;
  font-style: italic; color: var(--tb-accent-ink);
  box-shadow: inset 0 0 0 1px rgba(180, 90, 60, 0.18);
}
.tb-patient-chip__meta { font-size: 12px; color: var(--tb-mute-strong); white-space: nowrap; }
.tb-patient-chip__meta b { font-weight: 600; color: var(--tb-text); }
.tb-patient-chip__meta .tb-sep { color: var(--tb-border); margin: 0 6px; }

.tb-op-chip { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tb-muted); white-space: nowrap; }
.tb-op-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tb-green); box-shadow: 0 0 0 3px var(--tb-green-soft); }
.tb-op-chip b { color: var(--tb-text); font-weight: 500; }

.tb-signout {
  font: inherit; font-size: 12px; color: var(--tb-muted);
  background: none; border: 0; cursor: pointer;
  padding: 6px 10px; border-radius: 4px;
}
.tb-signout:hover { color: var(--tb-text); background: var(--tb-warm); }
.tb-signout:focus-visible { outline: 2px solid var(--tb-accent); outline-offset: 2px; }

/* ------ ProcedureBar (tylko w chatScreenFullwidth) ------ */
.app-procbar {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 1050;
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  background: #F7F5EE;
  border-bottom: 1px solid var(--tb-border);
  gap: 14px;
  font-family: inherit;
  font-size: 13px;
}
body:not([data-screen="chatScreenFullwidth"]) .app-procbar { display: none; }

.pb-group { display: flex; gap: 2px; align-items: center; }
.pb-btn {
  font: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--tb-mute-strong); background: transparent;
  border: 1px solid transparent; padding: 6px 12px; border-radius: 6px;
  cursor: pointer; letter-spacing: -0.005em;
  transition: background .12s, color .12s, border-color .12s;
}
.pb-btn:hover { background: var(--tb-bg); color: var(--tb-text); border-color: var(--tb-border); }
.pb-btn:focus-visible { outline: 2px solid var(--tb-accent); outline-offset: 1px; }

.pb-divider { width: 1px; height: 20px; background: var(--tb-border); margin: 0 4px; }
.pb-spacer { flex: 1; }

.pb-crisis {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--tb-crisis); background: transparent;
  border: 1px solid var(--tb-crisis-tint);
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  letter-spacing: 0.005em; transition: background .15s;
}
.pb-crisis:hover { background: var(--tb-crisis-soft); }
.pb-crisis .pb-pin { width: 6px; height: 6px; border-radius: 50%; background: var(--tb-crisis); display: inline-block; }

.pb-more { position: relative; }
.pb-more__btn {
  font: inherit; font-size: 12.5px; color: var(--tb-muted);
  background: transparent; border: 1px solid transparent;
  padding: 6px 12px; border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.pb-more__btn:hover { color: var(--tb-text); background: var(--tb-bg); border-color: var(--tb-border); }
.pb-more[data-open="true"] .pb-more__btn {
  background: var(--tb-bg); border-color: var(--tb-border); color: var(--tb-text);
}

/* Dropdown drawer */
.pb-drawer {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 440px; background: var(--tb-bg);
  border: 1px solid var(--tb-border); border-radius: 10px;
  box-shadow: 0 20px 40px -12px rgba(45,43,40,0.15), 0 4px 12px rgba(45,43,40,0.06);
  padding: 14px; display: none; z-index: 20;
}
.pb-more[data-open="true"] .pb-drawer { display: block; }
.pb-drawer__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 18px; }
.pb-drawer__title {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tb-muted); font-weight: 600;
  padding: 8px 8px 6px; border-bottom: 1px solid var(--tb-hairline);
  margin-bottom: 4px;
}
.pb-drawer__item {
  display: block; width: 100%; text-align: left; font: inherit;
  font-size: 13px; color: var(--tb-text); background: transparent;
  border: 0; padding: 7px 8px; border-radius: 4px; cursor: pointer;
}
.pb-drawer__item:hover { background: var(--tb-warm); color: var(--tb-accent-ink); }
.pb-drawer__item:focus-visible { outline: 2px solid var(--tb-accent); outline-offset: -1px; }
.pb-drawer__footer {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--tb-hairline);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--tb-muted);
}
.pb-drawer__footer kbd {
  font-family: var(--tb-font-mono); font-size: 10.5px;
  background: var(--tb-warm); border: 1px solid var(--tb-border);
  border-radius: 3px; padding: 1px 5px; color: var(--tb-mute-strong);
}

/* ------ Crisis state (dodawana przez JS na body: data-crisis=true) ------ */
body[data-crisis="true"] .app-topbar {
  border-bottom: 1px solid var(--tb-crisis);
  box-shadow: inset 0 -3px 0 var(--tb-crisis), 0 8px 20px -12px rgba(192,57,43,0.18);
  position: relative;
}
body[data-crisis="true"] .app-topbar::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tb-crisis);
}
body[data-crisis="true"] .tb-patient-chip { border-color: var(--tb-crisis-tint); background: var(--tb-crisis-soft); }
body[data-crisis="true"] .tb-patient-chip__mono {
  background: #F4C7C0; color: var(--tb-crisis);
  box-shadow: inset 0 0 0 1px rgba(192,57,43,0.25);
}
body[data-crisis="true"] .pb-crisis {
  background: var(--tb-crisis); color: #fff; border-color: var(--tb-crisis);
  box-shadow: 0 0 0 4px rgba(192,57,43,0.12);
  animation: tb-pulse 2.4s ease-in-out infinite;
}
body[data-crisis="true"] .pb-crisis .pb-pin { background: #fff; }
@keyframes tb-pulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(192,57,43,0.12); }
  50%     { box-shadow: 0 0 0 8px rgba(192,57,43,0.20); }
}

/* ------ responsive ------ */
@media (max-width: 1200px) {
  .tb-brand__facility { display: none; }
  .tb-op-chip span:not(.tb-op-chip__dot) { display: none; }
  .pb-drawer { min-width: 360px; }
}