/* UMAG header-shell — prototype LAYOUT, sourced from the DS (Figma 4261:3784).
 * The bell (umag-icon-button) and count (umag-badge) are styled by ds.css (real DS components) — this file
 * only LAYS OUT the bar and reconstructs the umag-select TRIGGER + ghost language button on DS tokens.
 * Icons are the DS sprite glyphs (currentColor → --icon-* tokens). Typography via the DS .text-* classes.
 * Only Layer-2 tokens + layout/line dims. Bar > 900px; drawer ≤ 900px. */

.umag-header { width: 100%; font-family: inherit; }
.umag-header a { text-decoration: none; color: inherit; }
/* native-button reset (the scaffold's app.css ships this; included so the pattern is self-sufficient).
   Specific button styles below + ds.css component rules override via higher specificity. */
.umag-header button { font-family: inherit; cursor: pointer; background: none; border: 0; padding: 0; margin: 0; color: inherit; }
.umag-header .ds-ico { display: block; fill: currentColor; }
.umag-header umag-icon { display: block; }
.umag-header .nav-desktop, .umag-header .nav-mobile { display: none; }

/* ============================== Desktop / POS ( > 900px ) ============================== */
@media (min-width: 901px) {
  .umag-header .nav-desktop {
    display: flex; align-items: center; gap: var(--space-3x);
    padding: var(--space-2x) var(--space-8x);
    background: var(--bg-surface-sf-0);
    border-bottom: 1px solid var(--border-primary-soft);
  }
  .umag-header .hs-logo { display: flex; align-items: center; flex-shrink: 0; color: var(--icon-brand-default); }
  .umag-header .hs-logo .ds-ico { width: 40px; height: 40px; }

  .umag-header .menu { flex: 1; min-width: 0; display: flex; align-items: center; margin: 0; padding: 0; overflow: hidden; }
  .umag-header .menu-item { display: flex; align-items: center; height: 40px; padding: 0 var(--space-3x); border-radius: var(--radius-1x); color: var(--text-primary-default); white-space: nowrap; cursor: pointer; }
  .umag-header .menu-item:hover { background: var(--bg-transparent-hover); }
  .umag-header .menu-item.active { color: var(--text-accent-default); }

  /* notification — ds.css styles button[umag-icon-button].size-m.ghost.neutral; we position + pin the badge */
  .umag-header .hs-notif { position: relative; display: inline-flex; flex-shrink: 0; }
  .umag-header .hs-notif .ds-ico { width: 24px; height: 24px; }
  .umag-header .hs-count.umag-badge { position: absolute; top: -4px; right: -4px; width: 20px; min-width: 20px; height: 20px; padding: 0; box-sizing: border-box; }

  /* store — umag-select closed trigger reconstructed on the SAME DS tokens (size-m: 40h, p-8, radius-1x) */
  .umag-header .hs-select { display: flex; align-items: center; width: 240px; min-height: 40px; box-sizing: border-box; padding: var(--space-2x); border: 1px solid var(--border-primary-soft); border-radius: var(--radius-1x); background: var(--bg-primary-default); color: var(--text-primary-default); flex-shrink: 0; }
  .umag-header .hs-select__prefix { width: 20px; height: 20px; color: var(--icon-secondary-default); flex-shrink: 0; }
  .umag-header .hs-select__value { flex: 1; min-width: 0; padding: 0 var(--space-1-5x); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary-default); }
  .umag-header .hs-select__arrow { width: 20px; height: 20px; color: var(--icon-secondary-default); flex-shrink: 0; }

  /* language — ghost button (DS tokens + DS globe glyph) */
  .umag-header .hs-lang { display: flex; align-items: center; gap: var(--space-1-5x); height: 40px; padding: var(--space-2x) var(--space-3x); border: 0; background: none; border-radius: var(--radius-1x); color: var(--text-primary-default); flex-shrink: 0; }
  .umag-header .hs-lang:hover { background: var(--bg-transparent-hover); }
  .umag-header .hs-lang .ds-ico { width: 24px; height: 24px; color: var(--icon-primary-default); }

  /* profile */
  .umag-header .hs-profile { display: flex; align-items: center; gap: var(--space-2x); flex-shrink: 0; }
  .umag-header .hs-avatar { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--bg-accent-soft); color: var(--text-primary-default); }
  .umag-header .hs-profile__name { max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary-default); }
}

/* ============================== Mobile ( ≤ 900px ) — functional drawer ============================== */
@media (max-width: 900px) {
  .umag-header .nav-mobile {
    position: relative; display: flex; align-items: center; justify-content: space-between;
    height: 60px; padding: var(--space-1-5x) var(--space-4x) var(--space-1-5x) var(--space-2x);
    background: var(--bg-surface-sf-0); border-bottom: 1px solid var(--border-primary-soft);
  }
  .umag-header .hs-logo { display: flex; align-items: center; color: var(--icon-brand-default); }
  .umag-header .hs-logo .ds-ico { width: 32px; height: 32px; }
  .umag-header .nav-mobile .ds-ico { width: 24px; height: 24px; }
  .umag-header .hs-avatar { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--bg-accent-soft); color: var(--text-primary-default); }
  .umag-header .menu-overlay { position: fixed; inset: 0; width: 100vw; height: 100vh; background: var(--bg-surface-overlay); opacity: 0; visibility: hidden; transition: opacity var(--duration-slow) var(--ease-standard), visibility var(--duration-slow) var(--ease-standard); z-index: var(--z-overlay); }
  .umag-header .menu-overlay.active { opacity: 1; visibility: visible; }
  .umag-header .side-menu { position: fixed; top: 0; left: -100%; display: flex; flex-direction: column; width: 285px; height: 100vh; padding: var(--space-2x); background: var(--bg-primary-default); box-shadow: var(--shadow-pt-16); transition: left var(--duration-slow) var(--ease-standard); z-index: var(--z-modal); overflow-y: auto; border-top-right-radius: var(--radius-4x); border-bottom-right-radius: var(--radius-4x); }
  .umag-header .side-menu.active { left: 0; }
  .umag-header .menu-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--space-1-5x); }
  .umag-header .menu-body { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: var(--space-3x) 0 var(--space-6x); }
  .umag-header .menu-body .top { display: flex; flex-direction: column; }
  .umag-header .menu-item { display: flex; align-items: center; height: 48px; padding: 0 var(--space-3x); border-radius: var(--radius-1x); color: var(--text-primary-default); }
  .umag-header .menu-item.active { color: var(--text-accent-default); background: var(--bg-accent-soft); }
  .umag-header .menu-body .bottom { display: flex; flex-direction: column; gap: var(--space-2x); }
  .umag-header .menu-body .hs-select { display: flex; align-items: center; width: 100%; min-height: 40px; box-sizing: border-box; padding: var(--space-2x); border: 1px solid var(--border-primary-soft); border-radius: var(--radius-1x); background: var(--bg-primary-default); color: var(--text-primary-default); }
  .umag-header .menu-body .hs-select__prefix { width: 20px; height: 20px; color: var(--icon-secondary-default); flex-shrink: 0; }
  .umag-header .menu-body .hs-select__value { flex: 1; min-width: 0; padding: 0 var(--space-1-5x); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary-default); }
  .umag-header .menu-body .hs-select__arrow { width: 20px; height: 20px; color: var(--icon-secondary-default); flex-shrink: 0; }
  .umag-header .menu-body .hs-lang { display: flex; align-items: center; gap: var(--space-1-5x); height: 40px; padding: var(--space-2x) var(--space-3x); border: 0; background: none; border-radius: var(--radius-1x); color: var(--text-primary-default); }
  .umag-header .menu-body .hs-lang .ds-ico { width: 24px; height: 24px; color: var(--icon-primary-default); }
}