/*
 * Portal-only mobile header companion.
 * The JavaScript adds .tka-mobile-header only when a maintained header owns
 * an actionable menu. Desktop layout and print output remain unchanged.
 */

.tka-mobile-menu-toggle {
  display: none !important;
}

@media screen and (max-width: 900px) {
  header.tka-mobile-header {
    position: sticky !important;
    inset-block-start: 0 !important;
    top: 0 !important;
    z-index: 90 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: max(8px, env(safe-area-inset-top)) 10px 8px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--tka-border) !important;
    background: color-mix(in srgb, var(--tka-bg-elevated) 96%, transparent) !important;
    box-shadow: var(--tka-shadow-1) !important;
    backdrop-filter: blur(16px) !important;
  }

  header.tka-mobile-header > :first-child {
    min-width: 0 !important;
    margin: 0 !important;
  }

  header.tka-mobile-header > :first-child :where(.eyebrow, .muted, .subcopy, .lede),
  header.tka-mobile-header > :first-child > :where(.eyebrow, .muted, .subcopy, .lede) {
    display: none !important;
  }

  header.tka-mobile-header :where(h1, .tka-topbar__title) {
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--tka-text) !important;
    font-size: clamp(1rem, 4.6vw, 1.15rem) !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  header.tka-mobile-header :where(.tka-brand-lockup, .brand-lockup, .topbar-brand) {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
  }

  header.tka-mobile-header :where(.brand-logo, .topbar-logo, .tka-official-logo) {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    object-fit: contain !important;
  }

  header.tka-mobile-header .tka-mobile-menu-toggle {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 72px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--tka-border-strong) !important;
    border-radius: var(--tka-radius-control) !important;
    background: var(--tka-bg-elevated) !important;
    color: var(--tka-text) !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  body:not(.commercial-access-ready) header.tka-mobile-header:has(> .tka-mobile-menu-actions[data-admin-only]) > .tka-mobile-menu-toggle,
  body.public-client-mode header.tka-mobile-header:has(> .tka-mobile-menu-actions[data-admin-only]) > .tka-mobile-menu-toggle {
    display: none !important;
  }

  header.tka-mobile-header .tka-mobile-menu-toggle::before {
    content: "☰";
    font-size: 1rem;
    line-height: 1;
  }

  header.tka-mobile-header[data-tka-mobile-menu="expanded"] .tka-mobile-menu-toggle::before {
    content: "×";
    font-size: 1.25rem;
  }

  header.tka-mobile-header .tka-mobile-menu-actions {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  header.tka-mobile-header[data-tka-mobile-menu="collapsed"] .tka-mobile-menu-actions {
    display: none !important;
  }

  header.tka-mobile-header[data-tka-mobile-menu="expanded"] .tka-mobile-menu-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 8px !important;
    max-block-size: min(52dvh, 420px) !important;
    padding-block-start: 8px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    border-top: 1px solid var(--tka-border) !important;
  }

  header.tka-mobile-header[data-tka-mobile-menu="expanded"] .tka-mobile-menu-actions > :where(a, button, select, label, summary, .button, .tka-button) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
  }

  header.tka-mobile-header[data-tka-mobile-menu="expanded"] .tka-mobile-menu-actions > :where(a, button, select, label, summary, .button, .tka-button):last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }

  header.tka-mobile-header[data-tka-mobile-menu="expanded"] .tka-mobile-menu-actions > :where(.header-buttons, .top-actions-menu, .save-status, .export-status) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  header.tka-mobile-header[data-tka-mobile-menu="expanded"] .tka-mobile-menu-actions > .header-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  header.tka-mobile-header[data-tka-mobile-menu="expanded"] .tka-mobile-menu-actions > .header-buttons > :where(a, button, .button) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
  }

  header.tka-mobile-header[data-tka-mobile-menu="expanded"] .tka-mobile-menu-actions > .header-buttons > :where(a, button, .button):last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }

  header.tka-mobile-header .tka-mobile-menu-actions[hidden],
  header.tka-mobile-header .tka-mobile-menu-actions.hidden,
  header.tka-mobile-header [hidden],
  header.tka-mobile-header .hidden,
  body:not(.commercial-access-ready) header.tka-mobile-header [data-admin-only],
  body.public-client-mode header.tka-mobile-header [data-admin-only] {
    display: none !important;
  }

  header.tka-mobile-header ~ :where(main, .shell, .app-shell),
  header.tka-mobile-header + :where(main, .shell, .app-shell) {
    scroll-margin-block-start: 68px;
  }
}

@media print {
  .tka-mobile-menu-toggle {
    display: none !important;
  }
}