/* =========================================================================
   GRAIPH UNIFIED HEADER
   Shared header layout for all three interfaces.
   Depends on graiph-tokens.css for design tokens.
   ========================================================================= */

/* Generic hidden utility */
.hidden { display: none !important; }

.graiph-header {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 16px;
  background: var(--graiph-bg-surface);
  border-bottom: 1px solid var(--graiph-border);
  z-index: 200;
  flex-shrink: 0;
  gap: 8px;
}

/* -------------------------------------------------------------------------
   ZONE: Left — Hub link, interface switcher, title
   ------------------------------------------------------------------------- */
.gh-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.gh-left h1 {
  font-size: var(--graiph-font-lg);
  font-weight: 600;
  color: var(--graiph-text-primary);
  white-space: nowrap;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gh-left h1 svg[data-lucide] {
  color: var(--graiph-accent-text);
  width: 18px;
  height: 18px;
}

/* -------------------------------------------------------------------------
   ZONE: Center — Data selection (company, drillhole, tray, load)
   ------------------------------------------------------------------------- */
.gh-center {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  justify-content: center;
}

.gh-data-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.gh-data-label {
  font-size: var(--graiph-font-xs);
  text-transform: uppercase;
  color: var(--graiph-text-muted);
  font-weight: 600;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.gh-separator {
  width: 1px;
  height: 24px;
  background: var(--graiph-border);
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   ZONE: Actions — Interface-specific buttons (save, export, undo/redo, etc.)
   ------------------------------------------------------------------------- */
.gh-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   ZONE: Right — User email, theme, bug report, help, logout
   ------------------------------------------------------------------------- */
.gh-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

.gh-user-email {
  font-size: var(--graiph-font-sm);
  color: var(--graiph-text-secondary);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   SHARED HEADER BUTTONS
   Compact, consistent button styling within the header.
   ------------------------------------------------------------------------- */
.gh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 10px;
  height: 32px;
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-md);
  background: var(--graiph-bg-elevated);
  color: var(--graiph-text-secondary);
  font-family: var(--graiph-font);
  font-size: var(--graiph-font-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}

.gh-btn:hover {
  background: var(--graiph-bg-hover);
  border-color: var(--graiph-border-hover);
  color: var(--graiph-text-primary);
}

.gh-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.gh-btn:disabled:hover {
  background: var(--graiph-bg-elevated);
  border-color: var(--graiph-border);
  color: var(--graiph-text-secondary);
}

.gh-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  pointer-events: none;
}

/* Icon-only variant (square) */
.gh-btn.gh-icon-btn {
  width: 32px;
  padding: 0;
}

/* Primary variant */
.gh-btn.gh-btn-primary {
  background: var(--graiph-accent);
  border-color: var(--graiph-accent);
  color: var(--graiph-accent-ink);
}

.gh-btn.gh-btn-primary:hover:not(:disabled) {
  background: var(--graiph-accent-hover);
  border-color: var(--graiph-accent-hover);
}

/* Danger variant */
.gh-btn.gh-btn-danger {
  color: var(--graiph-alert-error);
  border-color: var(--graiph-alert-error);
}

.gh-btn.gh-btn-danger:hover:not(:disabled) {
  background: var(--graiph-alert-error);
  color: white;
}

/* Toggle active state (e.g., tray images toggle) */
.gh-btn.gh-toggle-active {
  background: var(--graiph-accent-muted);
  border-color: var(--graiph-accent);
  color: var(--graiph-accent-text);
}

/* Status text in header */
.gh-status-text {
  font-size: var(--graiph-font-xs);
  color: var(--graiph-text-secondary);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Hub link */
.gh-hub-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--graiph-bg-elevated);
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-md);
  color: var(--graiph-text-secondary);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.gh-hub-link:hover {
  background: var(--graiph-bg-hover);
  border-color: var(--graiph-border-hover);
  color: var(--graiph-text-primary);
}

.gh-hub-link svg {
  width: 14px;
  height: 14px;
}

/* Reload button (small icon next to company combobox) */
.gh-reload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--graiph-radius-sm);
  background: transparent;
  color: var(--graiph-text-muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.gh-reload-btn:hover {
  color: var(--graiph-accent-text);
  background: var(--graiph-accent-muted);
}

.gh-reload-btn svg {
  width: 14px;
  height: 14px;
}

/* -------------------------------------------------------------------------
   PENDING CHANGES INDICATOR
   ------------------------------------------------------------------------- */
.gh-pending-changes {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--graiph-alert-warning);
  color: white;
  border-radius: var(--graiph-radius-md);
  font-size: var(--graiph-font-sm);
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gh-pending-changes.visible {
  opacity: 1;
}

.gh-pending-changes svg {
  width: 12px;
  height: 12px;
}

/* -------------------------------------------------------------------------
   SAVE BADGE (counter on save button)
   ------------------------------------------------------------------------- */
.gh-save-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: bold;
  color: white;
  background: var(--graiph-alert-error);
  border-radius: 9px;
}

.gh-save-badge.hidden {
  display: none;
}

/* -------------------------------------------------------------------------
   TRAY NAVIGATION WIDGET (drillhole-viewer)
   Compact: [◀ Tray 3 of 10 ▶ W:2]
   ------------------------------------------------------------------------- */
.gh-tray-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.gh-tray-nav .gh-btn {
  width: 28px;
  height: 28px;
  padding: 0;
}

.gh-tray-position {
  font-size: var(--graiph-font-sm);
  color: var(--graiph-text-secondary);
  white-space: nowrap;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--graiph-radius-sm);
}

.gh-tray-position:hover {
  background: var(--graiph-bg-hover);
  color: var(--graiph-text-primary);
}

.gh-window-size {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--graiph-font-xs);
  color: var(--graiph-text-muted);
}

.gh-window-size select {
  padding: 2px 4px;
  background: var(--graiph-bg-tertiary);
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-sm);
  color: var(--graiph-text-primary);
  font-size: var(--graiph-font-xs);
  cursor: pointer;
}

/* -------------------------------------------------------------------------
   TRAY SELECTOR PANEL (jump-to dropdown, drillhole-viewer)
   ------------------------------------------------------------------------- */
.gh-tray-selector {
  position: relative;
}

.gh-tray-selector-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 200;
  min-width: 200px;
  max-width: 280px;
  background: var(--graiph-bg-elevated);
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-md);
  box-shadow: var(--graiph-shadow-lg);
}

.gh-tray-selector-panel.hidden {
  display: none;
}

.gh-tray-selector-header {
  padding: 8px 12px;
  font-size: var(--graiph-font-sm);
  font-weight: 600;
  color: var(--graiph-text-secondary);
  border-bottom: 1px solid var(--graiph-border);
}

.gh-tray-selector-list {
  max-height: 280px;
  overflow-y: auto;
}

.gh-tray-selector-list button {
  display: block;
  width: 100%;
  padding: 6px 12px;
  text-align: left;
  background: none;
  border: none;
  color: var(--graiph-text-primary);
  cursor: pointer;
  font-size: var(--graiph-font-sm);
  font-family: inherit;
}

.gh-tray-selector-list button:hover {
  background: var(--graiph-bg-hover);
}

.gh-tray-selector-list button.active {
  background: var(--graiph-accent-muted);
  color: var(--graiph-accent-text);
}

/* -------------------------------------------------------------------------
   UNDO / REDO CONTROLS
   ------------------------------------------------------------------------- */
.gh-undo-redo {
  display: flex;
  gap: 2px;
}

.gh-undo-redo .gh-btn {
  width: 32px;
  padding: 0;
}

/* -------------------------------------------------------------------------
   TRAY MULTI-SELECT (classification)
   Checkbox dropdown for selecting multiple trays.
   ------------------------------------------------------------------------- */
.gh-tray-multi {
  position: relative;
}

.gh-tray-multi-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 200;
  min-width: 240px;
  max-width: 320px;
  background: var(--graiph-bg-elevated);
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-md);
  box-shadow: var(--graiph-shadow-lg);
}

.gh-tray-multi-panel.hidden {
  display: none;
}

.gh-tray-multi-list {
  max-height: 280px;
  overflow-y: auto;
  padding: 8px;
}

.gh-tray-multi-actions {
  display: flex;
  gap: 8px;
  padding: 6px 8px;
  border-top: 1px solid var(--graiph-border);
}

.gh-tray-multi-actions .gh-btn {
  flex: 1;
  height: 28px;
  font-size: var(--graiph-font-xs);
}

/* -------------------------------------------------------------------------
   LABELER TRAY CONTROLS (single select + prev/next)
   ------------------------------------------------------------------------- */
.gh-tray-single {
  display: flex;
  align-items: center;
  gap: 4px;
}

.gh-tray-single .combobox-container {
  min-width: 160px;
  max-width: 280px;
}

.gh-tray-arrows {
  display: flex;
  gap: 2px;
}

.gh-tray-arrows .gh-btn {
  width: 28px;
  height: 28px;
  padding: 0;
}

/* -------------------------------------------------------------------------
   VIEW MODE DROPDOWN
   ------------------------------------------------------------------------- */
.gh-view-mode select {
  padding: 5px 8px;
  background: var(--graiph-bg-tertiary);
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-md);
  color: var(--graiph-text-primary);
  font-size: var(--graiph-font-sm);
  font-family: var(--graiph-font);
  cursor: pointer;
  height: 32px;
}

.gh-view-mode select:focus {
  outline: none;
  border-color: var(--graiph-accent);
}

/* -------------------------------------------------------------------------
   EXPORT DROPDOWN
   ------------------------------------------------------------------------- */
.gh-export-dropdown {
  position: relative;
  display: inline-block;
}

.gh-export-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--graiph-bg-elevated);
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-md);
  padding: 4px 0;
  min-width: 210px;
  z-index: 200;
  box-shadow: var(--graiph-shadow-lg);
}

.gh-export-menu.hidden {
  display: none;
}

.gh-export-menu button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  background: none;
  border: none;
  color: var(--graiph-text-primary);
  cursor: pointer;
  font-size: var(--graiph-font-sm);
  font-family: inherit;
}

.gh-export-menu button:hover {
  background: var(--graiph-bg-hover);
}

.gh-export-menu .gh-divider {
  height: 1px;
  background: var(--graiph-border);
  margin: 4px 0;
}

/* =========================================================================
   RESPONSIVE HEADER — progressive collapse at narrow widths.
   Shared across all interfaces (labeler, classification, viewer).
   ========================================================================= */

/* All header zones must be able to shrink */
.graiph-header .gh-left,
.graiph-header .gh-center,
.graiph-header .gh-actions,
.graiph-header .gh-right {
  min-width: 0;
}

.graiph-header .gh-data-group {
  min-width: 0;
  flex-shrink: 1;
}

.graiph-header .gh-left h1 {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Stage 1: < 1400px — hide data labels and user email --- */
@media (max-width: 1400px) {
  .graiph-header .gh-data-label {
    display: none;
  }

  .graiph-header .gh-user-email {
    display: none;
  }

  .graiph-header .combobox-container {
    max-width: 180px;
  }
}

/* --- Stage 2: < 1200px — icon-only title and switcher --- */
@media (max-width: 1200px) {
  .graiph-header .gh-left h1 {
    font-size: 0;
    gap: 0;
  }

  .graiph-header .gh-left h1 svg[data-lucide] {
    width: 18px;
    height: 18px;
    font-size: initial;
  }

  .graiph-header .gh-switcher-btn {
    font-size: 0;
    padding: 4px 6px;
    gap: 0;
  }

  .graiph-header .gh-switcher-btn svg {
    font-size: initial;
    width: 12px;
    height: 12px;
  }

  .graiph-header .combobox-container {
    max-width: 140px;
  }

  .graiph-header .combobox-input {
    font-size: var(--graiph-font-sm);
  }

  /* Hide text in action buttons, keep icons */
  .graiph-header .gh-actions .gh-btn:not(.gh-icon-btn) span {
    display: none;
  }

  .graiph-header .gh-status-text {
    display: none;
  }
}

/* --- Stage 3: < 1000px — fully shrinkable, hide non-essential --- */
@media (max-width: 1000px) {
  .graiph-header {
    padding: 0 8px;
    gap: 4px;
  }

  .graiph-header .combobox-container {
    min-width: 0;
    max-width: 100px;
    flex-shrink: 1;
  }

  .graiph-header .combobox-input {
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .graiph-header .gh-separator {
    display: none;
  }

  .graiph-header .gh-right #themeToggleBtn {
    display: none;
  }

  .graiph-header .gh-tray-nav .gh-window-size {
    display: none;
  }
}

/* --- Stage 4: < 800px — bare minimum --- */
@media (max-width: 800px) {
  .graiph-header .gh-actions {
    display: none;
  }

  .graiph-header .gh-hub-link {
    display: none;
  }
}

/* =========================================================================
   PHONE TIER (≤640px) — single-menu mobile header.
   headerResponsive.js relocates the switcher, panel toggles, data selectors,
   actions, and utility buttons into one .gh-drawer (with a .gh-drawer-tools
   row for the icon buttons), and adds the .gh-menu-toggle hamburger to the bar.
   At ≥641px those elements are restored to their exact homes, so the desktop
   header is byte-for-byte unchanged — these rules only bite at ≤640px.
   ========================================================================= */

/* Inert on desktop: hamburger hidden, drawer empty + collapsed. */
.gh-menu-toggle { display: none; }
.gh-drawer { display: none; }

@media (max-width: 640px) {
  .graiph-header { position: relative; }

  /* One menu affordance, far-right of the bar. */
  .graiph-header .gh-menu-toggle { display: inline-flex; }

  /* Bar = [hub · title] … [☰]. Restore the title text now there's room. */
  .graiph-header .gh-left h1 { font-size: var(--graiph-font-md); gap: 8px; }
  .graiph-header .gh-left { flex-shrink: 1; min-width: 0; }
  .graiph-header .gh-left h1 { overflow: hidden; text-overflow: ellipsis; }
  .graiph-header .gh-user-email { display: none; }

  /* Drawer: overlay panel dropping below the bar. */
  .gh-drawer {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 250;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 0;
    padding: 12px;
    background: var(--graiph-bg-surface);
    border-bottom: 1px solid var(--graiph-border);
    box-shadow: var(--graiph-shadow-lg);
    max-height: 80vh;
    overflow-y: auto;
  }
  .gh-mobile-open .gh-drawer { display: flex; }

  /* Interface switcher → full-width labeled row, menu expands inline. */
  .gh-drawer .gh-switcher { position: relative; width: 100%; }
  .gh-drawer .gh-switcher-btn {
    width: 100%;
    height: 40px;
    justify-content: space-between;
    font-size: var(--graiph-font-sm);
    border: 1px solid var(--graiph-border);
    border-radius: var(--graiph-radius-md);
    background: var(--graiph-bg-elevated);
    color: var(--graiph-text-secondary);
  }
  .gh-drawer .gh-switcher-menu {
    position: static;
    width: 100%;
    margin-top: 4px;
    box-shadow: none;
  }

  /* Center + actions stack full-width inside the drawer. */
  .gh-drawer .gh-center {
    position: static;
    display: flex;
    flex: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
  }
  .gh-drawer .gh-actions {
    position: static;
    display: flex;
    flex: none;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  /* Data groups: label + control across the full width. */
  .gh-drawer .gh-data-group-container { display: contents; }
  .gh-drawer .gh-data-group {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
  }

  /* Restore labels the desktop ladder hid, now that there's room. */
  .gh-drawer .gh-data-label { display: inline; }
  .gh-drawer .gh-actions .gh-btn span,
  .gh-drawer .gh-center .gh-btn span { display: inline; }

  /* Selectors fill the drawer width (override the ≤1000px 100px cap). */
  .gh-drawer .combobox-container {
    min-width: 0;
    max-width: none;
    width: 100%;
    flex: 1;
  }
  .gh-drawer .gh-tray-single,
  .gh-drawer .gh-tray-multi,
  .gh-drawer .gh-tray-selector { width: 100%; }
  .gh-drawer .gh-tray-single .combobox-container { max-width: none; }
  .gh-drawer .gh-tray-multi > .gh-btn,
  .gh-drawer .gh-tray-selector > .gh-btn { width: 100%; }

  /* Primary actions span the row for easy tapping. */
  .gh-drawer .gh-btn-primary { width: 100%; justify-content: center; }

  /* Tools row: panel toggles + utility icon buttons, one tidy wrap. */
  .gh-drawer-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding-top: 10px;
    border-top: 1px solid var(--graiph-border);
  }
  .gh-drawer-tools:empty { display: none; }
  .gh-drawer-tools .gh-btn,
  .gh-drawer-tools .gh-icon-btn { width: 40px; height: 40px; flex: none; }

  /* Dropdown panels anchor under their trigger within the drawer. */
  .gh-drawer .gh-tray-multi-panel,
  .gh-drawer .gh-tray-selector-panel,
  .gh-drawer .gh-export-menu {
    position: static;
    width: 100%;
    max-width: none;
    right: auto;
    left: 0;
    box-shadow: none;
  }
}

/* Protocol badge — appears next to page title in .gh-left */
.protocol-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 500;
  color: var(--graiph-text-muted, #888);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--graiph-border, #333);
  border-radius: 10px;
  white-space: nowrap;
  cursor: default;
  letter-spacing: 0.02em;
}