/* Shared app header standard.
 *
 * Every tool grew its own header: three different class names (.header,
 * .app-header, .appbar), title sizes from 1.3rem down to assets' smaller one,
 * and header heights that differed enough to be visible when moving between
 * tools. This file is the single definition of that bar, so changing the type
 * scale or the Logout treatment is one edit rather than fifteen.
 *
 * Load it AFTER the tool's own styles.css. It deliberately relies on source
 * order rather than !important, so a tool can still override a rule locally
 * when it genuinely needs to.
 *
 * Element order in the header, left to right:
 *   name + description  ...  status/integration chips, technician name,
 *   Feedback, theme picker, Logout
 */

/* Alpine only strips x-cloak once it has booted. Headers that carry x-cloak
   (so they do not appear before the user is known) need this rule to back it,
   and four of the five tools using it had no such rule of their own. */
[x-cloak] {
  display: none !important;
}

/* ---- the bar itself ---------------------------------------------------- */

header.header,
header.app-header,
header.appbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 60px;
  padding: 0.75rem 1.25rem;
  background: var(--color-bg-header);
  color: var(--color-text-header);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

/* ---- title and description -------------------------------------------- */

header.header h1,
header.app-header h1,
header.appbar h1,
header.appbar .logo {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  /* Black in light, light grey in dark: the title follows the theme's text
     colour rather than being a fixed colour of its own. */
  color: var(--color-text);
}

/* Last letter, marked up as <b> inside the title. The weight is inherited so
   the accent is colour only, not a bolder glyph. */
header.header h1 b,
header.app-header h1 b,
header.appbar h1 b,
header.appbar .logo b {
  color: var(--color-primary);
  font-weight: inherit;
}

/* Short description, on the same line as the title. */
header.header .tagline,
header.app-header .tagline,
header.appbar .tagline,
header.appbar .tag {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-text-secondary);
}

/* Title and description share a row and wrap together on narrow screens. */
header.header .brand,
header.app-header .brand,
header.appbar .brand,
header.header .header-left,
header.app-header .header-left {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  min-width: 0;
}

/* ---- right-hand group -------------------------------------------------- */

header.header .header-right,
header.app-header .header-right,
header.header .user-info,
header.app-header .header-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  flex-wrap: wrap;
}

header.header .user-name,
header.app-header .user-name,
header.appbar .who,
header.header .uname {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* ---- Logout ------------------------------------------------------------ */

/* Outlined in the primary colour, which is patcha and enrolla's ghost button.
   Reads as secondary next to the page's real actions, instead of competing
   with them as a solid block. */
header.header .btn-logout,
header.app-header .btn-logout,
header.appbar .btn-logout,
header.header button[data-logout],
header.app-header button[data-logout],
header.appbar button[data-logout] {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm, 4px);
  padding: 0.35rem 0.75rem;
  font: 600 0.8125rem inherit;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}

header.header .btn-logout:hover,
header.app-header .btn-logout:hover,
header.appbar .btn-logout:hover,
header.header button[data-logout]:hover,
header.app-header button[data-logout]:hover,
header.appbar button[data-logout]:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* ---- theme picker and Feedback ---------------------------------------- */

header.header .theme-switcher select,
header.app-header .theme-switcher select,
header.appbar .theme-switcher select {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 4px);
  background: var(--color-input-bg);
  color: var(--color-text);
  font-size: 0.8125rem;
  line-height: 1.2;
  cursor: pointer;
}

header.header .theme-switcher select:focus,
header.app-header .theme-switcher select:focus,
header.appbar .theme-switcher select:focus {
  outline: none;
  border-color: var(--color-border-focus);
}

/* The Feedback button is injected into #stf-feedback-slot, which each header
   places immediately left of the theme picker. */
header.header .stf-fb-trigger,
header.app-header .stf-fb-trigger,
header.appbar .stf-fb-trigger {
  font-size: 0.8125rem;
  line-height: 1.2;
  padding: 0.35rem 0.6rem;
}

#stf-feedback-slot {
  display: inline-flex;
  align-items: center;
}

/* ---- integration status pill ------------------------------------------- */

/* Used for "is this integration up" indicators: assets' JSM, runna's Mesh.
   Green when connected, red when not, with an LED dot taking the pill's own
   colour. Shared so the two cannot drift apart again: assets had a flat blue
   badge that read the same whether Atlassian was reachable or not, and runna
   had a grey chip that changed its label rather than its colour. */
.status-pill {
  /* A base colour so the pill is never at the mercy of its state class. As a
     <button> it does not inherit the page's colour, so without this a missing
     is-up/is-down would render UA black on the light tint. */
  color: var(--color-text-secondary);
  background: var(--color-bg-hover);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.2rem 0.55rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
}

.status-pill .led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* The -hover variants are used rather than the base --color-success /
   --color-danger: at 11px bold the base pair measured 4.21:1 and 3.96:1 on the
   light tints, under the 4.5:1 needed for text this size. These give 6.51:1 and
   5.23:1 in light, 8.65:1 and 7.03:1 in dark. */
.status-pill.is-up {
  color: var(--color-success-hover);
  background: var(--color-success-light);
}

.status-pill.is-down {
  color: var(--color-danger-hover);
  background: var(--color-danger-light);
}

/* ---- tab / menu row ---------------------------------------------------- */

/* Standard nav band, sitting directly under the header. Lifted from manops,
 * which was the only tool whose nav could grow: patcha already has eight flat
 * tabs, which is the limit of one row before it wraps.
 *
 * Two active conventions are supported on purpose. manops marks the current tab
 * .active; patcha and enrolla bind .on. Covering both means they pick up the
 * standard look without rewriting their Alpine bindings, which is a separate
 * change with its own risk. New tools should use .tab and .active.
 *
 * Scoped to nav.tabs deliberately. runna uses <div class="tabs"> for its
 * in-page script category filter, which is a filter row rather than page nav;
 * an unscoped .tabs would have restyled it as a nav band.
 */
nav.tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0 1.25rem;
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border);
  overflow: visible;
  flex-wrap: wrap;
}

nav.tabs .tab,
nav.tabs > button {
  border: none;
  background: none;
  padding: 0.7rem 0.9rem;
  font: 500 0.875rem inherit;
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}

nav.tabs .tab:hover:not(:disabled),
nav.tabs > button:hover:not(:disabled) {
  color: var(--color-text);
}

nav.tabs .tab.active,
nav.tabs > button.on {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
  /* patcha and enrolla previously filled the active tab; the underline is the
     standard, so the fill is cleared here. */
  background: none;
}

nav.tabs .tab:disabled,
nav.tabs > button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Dropdown groups, for a nav that has outgrown one row. */
.tab-item { position: relative; display: inline-flex; }
.tab-group { position: relative; display: inline-flex; }
.tab-group-btn { display: inline-flex; align-items: center; gap: 0.3rem; }
.tab-group-btn.open { color: var(--color-text); }
nav.tabs .caret { font-size: 0.65rem; opacity: 0.7; }

.tab-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  min-width: 190px;
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.tab-menu-item {
  border: none;
  background: none;
  text-align: left;
  padding: 0.5rem 0.7rem;
  border-radius: 4px;
  font: 500 0.875rem inherit;
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
}

.tab-menu-item:hover { background: var(--color-bg-hover); }
.tab-menu-item.active { color: var(--color-primary); font-weight: 600; }

/* Pill as a control, used only where the connection is a per-user token that can
   actually be disconnected. Server-configured integrations (patcha's Mesh,
   manops' Extract/Mesh/BaRT, planna's pollers, assets' SharePoint) stay plain
   spans, because there is nothing per-user to disconnect and the header must not
   offer an action it cannot perform.

   It has to read as pressable, since a status light that silently ends a session
   on click would be a trap: hence the pointer, the hover lift and a real focus
   ring. The confirm step lives in the handler. */
button.status-pill {
  font-family: inherit;
  cursor: pointer;
}

button.status-pill:hover {
  filter: brightness(1.06);
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}

button.status-pill:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}