/**
 * ERPAL ONE — TOP BAR (NAV-3 + NAV-2).
 * Logo · tool tabs · search merged with [+] quick-create · theme toggle ·
 * avatar menu. Colors come exclusively from css/erpal-tokens.css custom
 * properties — no hardcoded colors in this file.
 */

/* The base .erpal-topbar (sticky, height, surface) is styled in app.css.
   Tighten the gap — this bar carries more content than the old one. */
.erpal-topbar { gap: 12px; }

/* ---- logo ---- */
.erpal-topbar__logo {
  display: flex; align-items: center; gap: 7px;
  text-decoration: none; color: var(--erpal-text);
  font-weight: 800; font-size: 1.02rem; letter-spacing: .4px;
  flex: 0 0 auto;
}
.erpal-topbar__logomark { color: var(--erpal-accent); font-size: 1.15rem; }

/* ---- tool tabs ---- */
.erpal-tooltabs {
  display: flex; align-items: stretch; gap: 2px;
  height: 100%; flex: 0 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.erpal-tooltabs::-webkit-scrollbar { display: none; }
.erpal-tooltab {
  display: inline-flex; align-items: center;
  padding: 0 13px;
  color: var(--erpal-muted); text-decoration: none;
  font-size: .9rem; font-weight: 600; white-space: nowrap;
  border-bottom: 3px solid transparent;
  border-top: 3px solid transparent; /* keeps the label vertically centered */
  transition: color .12s, border-color .12s, background .12s;
}
.erpal-tooltab:hover { color: var(--erpal-text); background: var(--erpal-hover-soft); }
.erpal-tooltab.is-active {
  color: var(--erpal-accent);
  border-bottom-color: var(--erpal-accent);
}

/* ---- search merged with [+] ---- */
.erpal-searchplus {
  display: flex; align-items: center;
  flex: 1 1 auto; max-width: 480px; min-width: 160px;
  margin-left: auto;
}
.erpal-searchplus .erpal-search {
  flex: 1 1 auto; max-width: none;
  border-radius: 8px 0 0 8px; border-right: 0;
}
.erpal-qc { position: relative; flex: 0 0 auto; }
.erpal-qc__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--erpal-accent); border-radius: 0 8px 8px 0;
  background: var(--erpal-accent); color: var(--erpal-on-accent);
  font-size: 1.35rem; font-weight: 700; line-height: 1; cursor: pointer;
}
.erpal-qc__btn:hover { background: var(--erpal-accent-dark); border-color: var(--erpal-accent-dark); }

/* ---- shared dropdown ---- */
.erpal-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 185px;
  background: var(--erpal-surface);
  border: 1px solid var(--erpal-border);
  border-radius: var(--erpal-radius);
  box-shadow: var(--erpal-shadow-lg);
  padding: 6px;
}
.erpal-dropdown__item {
  display: block; padding: 8px 12px;
  border-radius: 6px;
  color: var(--erpal-text); text-decoration: none;
  font-size: .88rem; font-weight: 500; white-space: nowrap;
}
.erpal-dropdown__item:hover,
.erpal-dropdown__item:focus {
  background: var(--erpal-accent-soft); color: var(--erpal-accent); outline: 0;
}

/* ---- theme toggle (Day / Night / Auto) ---- */
.erpal-themetoggle {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--erpal-border); border-radius: 999px;
  background: var(--erpal-surface); color: var(--erpal-muted);
  padding: 6px 12px; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.erpal-themetoggle:hover { color: var(--erpal-text); background: var(--erpal-hover); }
.erpal-themetoggle__icon { font-size: .95rem; line-height: 1; }

/* ---- avatar menu ---- */
.erpal-avatar { position: relative; }
.erpal-avatar__btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: none; padding: 4px; cursor: pointer;
  color: var(--erpal-text);
}
.erpal-avatar__circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--erpal-accent); color: var(--erpal-on-accent);
  font-size: .85rem; font-weight: 700;
}
.erpal-avatar__name { font-weight: 600; font-size: .88rem; }
.erpal-avatar__caret { color: var(--erpal-muted); font-size: .7rem; }

/* ---- responsive: drop labels first, then tabs scroll ---- */
@media (max-width: 1100px) {
  .erpal-avatar__name, .erpal-themetoggle__label { display: none; }
  .erpal-topbar__logotype { display: none; }
}
@media (max-width: 768px) {
  .erpal-tooltabs { display: none; }
  .erpal-searchplus { max-width: none; }
}

/* NAV-6: command-palette hint inside the global search */
.erpal-search__kbd {
  position: absolute;
  right: 2.4rem;
  top: 50%;
  transform: translateY(-50%);
  font: 600 0.68rem/1 var(--erpal-font, system-ui, sans-serif);
  color: var(--erpal-muted, #8a94a6);
  background: var(--erpal-surface-2, #eef1f6);
  border: 1px solid var(--erpal-border, #d8dee9);
  border-radius: 5px;
  padding: 3px 5px;
  pointer-events: none;
}
.erpal-search { position: relative; }
@media (max-width: 820px) { .erpal-search__kbd { display: none; } }