/* ── App Header — ARKAN Design System v2 ─────────────────────── */

.app-header {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: 0 var(--space-6);
  height: 100%;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  z-index: 10;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.app-header__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
}

.app-header__logo {
  height: 26px;
  width: auto;
  display: block;
}

.app-header__title {
  flex: none;
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}

.app-header__meta {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

.app-header__locale {
  height: 28px;
  padding: 0 var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    color var(--transition-fast),
    background var(--transition-fast);
}
.app-header__locale:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}
.app-header__locale:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.app-header__user {
  font-size: var(--text-sm);
  color: var(--text-muted);
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.app-header__user:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.app-header__logout {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: var(--text-sm);
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.app-header__logout:hover {
  color: var(--color-danger, #A8544A);
  border-color: var(--color-danger, #A8544A);
  background: var(--bg-secondary);
}
@media (max-width: 600px) {
  .app-header__logout-label { display: none; }
}

/* ── Theme Switcher ──────────────────────────────────────────── */

.theme-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}

.theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}
.theme-btn:hover {
  color: var(--text-primary);
  background: var(--accent-surface);
}
.theme-btn--active {
  background: var(--surface-elevated);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}
.theme-btn:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 1px;
}
.theme-btn svg {
  flex-shrink: 0;
}

/* Hide label on very narrow viewports.
   960px, not 820px: real tablet-portrait widths (iPad 834, Surface
   Pro 912) sit just above the old 820 cutoff, so the header never
   compressed for them and overflowed by ~80px — this range needs
   the same treatment as narrower phones, just not the full mobile
   layout (hamburger/sidebar switch stays at 768). */
@media (max-width: 960px) {
  .theme-btn__label { display: none; }
  .theme-btn { padding: 0 var(--space-2); }
}

/* ── Mobile header compression ──────────────────────────────────
   This file loads after main.css and re-declares .app-header /
   .app-header__meta / .app-header__title unconditionally above, so
   main.css's own mobile media queries for those same selectors
   never actually win the cascade — any mobile-width shrink for
   this component has to live here instead, not in main.css. ── */
@media (max-width: 768px) {
  .app-header {
    gap: var(--space-2);
    padding: 0 var(--space-3);
  }
  .app-header__title {
    font-size: var(--text-sm);
  }
  .app-header__meta {
    gap: var(--space-2);
  }
}

@media (max-width: 480px) {
  .app-header {
    gap: 6px;
    padding: 0 var(--space-2);
  }
  .app-header__brand {
    gap: 6px;
  }
  .app-header__title {
    font-size: 12px;
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .app-header__meta {
    gap: 3px;
  }
  .theme-switcher [data-theme-set="system"] { display: none; }
  .theme-switcher { padding: 2px; gap: 1px; }
  .theme-btn { padding: 0 5px; height: 28px; }
  .app-header__locale {
    height: 28px;
    padding: 0 6px;
    font-size: 10px;
  }
  .app-header__logout {
    padding: 5px 7px;
  }
}