/* ==========================================================================
   neurohub.ch — Portrait-phone (mobile) overrides
   Loaded AFTER styles.css → equal-specificity rules win by source order
   (so we avoid !important). Primary mobile layer: max-width 767px;
   fine-tuning at max-width 400px. neurohub is light-mode only.
   Sections: A) shell/header/nav  B) layout reflow  C) tables (see also
   col-key/col-secondary in index.php)  D) forms/modals/tap-targets.
   Mobile bottom-nav + drawer live in partials/mobile-nav.php (+ brand-tokens
   .brand-bottom-nav) and are toggled in §A once present.
   ========================================================================== */

@media (max-width: 767px) {

  /* ---- A) Shell, header, nav ------------------------------------------- */
  .app-shell {
    padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .app-header {
    position: sticky;
    top: 0;
    z-index: 30;
  }
  /* Header on phones: brand (left) + inline language switcher (top-right).
     The role badge is hidden here and shown in the drawer instead; the
     user name + logout live in the drawer too. */
  body.brand-refined .user-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0.5rem 0.8rem;
  }
  body.brand-refined .user-bar__role-badge { display: none; }   /* moved into the drawer */
  body.brand-refined .user-bar__user-name { display: none; }
  body.brand-refined .user-bar__logout { display: none; }       /* reachable via the drawer (Abmelden) */

  /* Top tab-nav becomes a horizontal swipe strip (interim; replaced by the
     bottom nav + drawer once partials/mobile-nav.php is wired in). */
  .tab-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.25rem;
    padding: 0.4rem 0.5rem;
  }
  .tab-nav::-webkit-scrollbar { display: none; }
  .tab-nav__btn { flex: 0 0 auto; white-space: nowrap; min-height: 44px; }

  /* ---- B) Layout reflow: stack forced multi-column blocks -------------- */
  .panel { padding: 14px; }

  /* Panel header + tools stack on phones: title on top, then the filter
     buttons (abbreviated), then the search field below. brand-refined styles
     these with flex + nowrap at (0,2,0), so we override at equal specificity
     (mobile.css is later in source order → wins). */
  body.brand-refined .panel-header {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0.6rem;
  }
  body.brand-refined .header-tools {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
    gap: 0.5rem;
  }
  body.brand-refined .header-tools .filter-pills { order: -1; }   /* filters above the search field */

  body.brand-refined .filter-pills,
  body.brand-refined .header-tools .filter-pills {
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    gap: 0.4rem;
  }
  body.brand-refined .header-tools .search-input,
  body.brand-refined .panel-header > .search-input {
    flex: 0 0 auto;   /* basis auto → content height (base rule's 320px basis would become height in a column) */
    width: 100%;
    max-width: none;
    min-width: 0;
  }
  body.brand-refined .workspace-tools .sort-select,
  body.brand-refined .workspace-tools .color-filter { width: 100%; max-width: none; }

  /* Abbreviate the long product-filter labels. Brand names are language-neutral,
     so a CSS text swap is safe; the "Alle" pill keeps its translated label. */
  body.brand-refined .filter-pill[data-filter-product="sakkade"],
  body.brand-refined .filter-pill[data-filter-product="kognitives"],
  body.brand-refined .filter-pill[data-filter-product="stones"] { font-size: 0; }
  body.brand-refined .filter-pill[data-filter-product="sakkade"]::before,
  body.brand-refined .filter-pill[data-filter-product="kognitives"]::before,
  body.brand-refined .filter-pill[data-filter-product="stones"]::before {
    font-size: 0.82rem; font-weight: 600; letter-spacing: normal;
  }
  body.brand-refined .filter-pill[data-filter-product="sakkade"]::before { content: "Sakkade"; }
  body.brand-refined .filter-pill[data-filter-product="kognitives"]::before { content: "Kognitiv"; }
  body.brand-refined .filter-pill[data-filter-product="stones"]::before { content: "Stones"; }

  /* admin account cards */
  .account-person-meta { grid-template-columns: 1fr; min-width: 0; }
  .linked-account-row { grid-template-columns: 1fr; gap: 0.5rem; }

  /* product / overview / stat grids → single column */
  .product-overview-grid,
  .product-stats-grid { grid-template-columns: 1fr; }

  /* welcome hero */
  .welcome-hero { padding: 1rem; gap: 0.75rem; }
  .welcome-hero__title { font-size: clamp(1.4rem, 6vw, 1.9rem); }
  .welcome-hero__stats { gap: 0.5rem; }

  /* ---- D) Forms, tap targets, modals ---------------------------------- */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { font-size: 16px; }            /* prevent iOS focus-zoom */

  .card-actions { gap: 0.5rem; }
  .card-actions form { flex: 1 1 auto; }
  .card-actions button,
  .card-actions a,
  .brand-btn-primary,
  .brand-btn-secondary,
  .inline-form button { min-height: 44px; }

  .modal-card {
    width: 100%;
    max-width: 100%;
    max-height: 90dvh;
    overflow-y: auto;
    padding-bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 400px) {
  .user-bar { padding: 0.5rem 0.6rem; }
  .welcome-hero__title { font-size: 1.35rem; }
  .panel { padding: 12px; }
}

/* ==========================================================================
   Mobile navigation — bottom bar + slide-in drawer (built by app.js).
   .nh-bottom-nav reuses brand-tokens .brand-bottom-nav (shows flex <=767px,
   hidden >=768px). Drawer + hamburger are neurohub-specific.
   ========================================================================== */

@media (max-width: 767px) {
  /* desktop tab strip is replaced by the bottom nav + drawer once JS built it */
  body.has-mobile-nav .tab-nav { display: none; }
  /* clear the fixed bottom bar */
  body.has-mobile-nav .app-shell {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

/* Bottom nav: ensure a visible top divider + readable icons/badges */
.nh-bottom-nav { border-top: 1px solid var(--border); }
.nh-bottom-nav .brand-bottom-nav__item { position: relative; text-decoration: none; }
.nh-bottom-nav .brand-bottom-nav__item svg { width: 22px; height: 22px; }
.nh-bottom-nav .nh-badge {
  position: absolute; top: 4px; left: calc(50% + 6px);
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Drawer + backdrop */
.nh-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(20, 30, 25, 0.45);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 60;
}
.nh-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }

.nh-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 320px);
  z-index: 61; background: #fff; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.24s ease;
  box-shadow: -12px 0 40px rgba(20, 30, 25, 0.18);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nh-drawer.is-open { transform: translateX(0); }
.nh-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.nh-drawer__id { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.nh-drawer__title { font-weight: 800; color: var(--sakkade-blue); }
/* role badge relocated here from the header (.user-bar__role-badge) on phones */
.nh-drawer__role {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-deep, var(--nh-green-deep)); background: var(--accent-soft, var(--nh-green-soft));
  padding: 3px 9px; border-radius: 999px;
}
.nh-drawer__close {
  width: 42px; height: 42px; border: none; background: transparent;
  font-size: 28px; line-height: 1; color: var(--muted); cursor: pointer; border-radius: 10px;
}
.nh-drawer__list { display: flex; flex-direction: column; gap: 2px; padding: 8px; overflow-y: auto; }
.nh-drawer__item {
  display: flex; align-items: center; gap: 12px; min-height: 48px;
  padding: 12px 14px; border-radius: 10px; text-decoration: none;
  color: var(--text); font-weight: 600;
}
.nh-drawer__item svg { width: 20px; height: 20px; color: var(--muted); flex: 0 0 auto; }
.nh-drawer__item.is-active { background: var(--nh-green-soft); color: var(--nh-green-deep); }
.nh-drawer__item.is-active svg { color: var(--nh-green-deep); }
.nh-drawer__item--logout { color: var(--danger); }
.nh-drawer__item--logout svg { color: var(--danger); }
.nh-drawer__item .nh-badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.nh-drawer__sep { height: 1px; background: var(--border); margin: 8px 6px; }

/* Locked tab (e.g. Abo until subscriptions go live) — mirrors the desktop lock.
   Auto-unlocks: when nh_render_abo_tab() drops .tab-nav__btn--locked, the cloned
   nav item is no longer locked. */
.brand-bottom-nav__item.is-locked,
.nh-drawer__item.is-locked { opacity: 0.6; cursor: default; }
.nh-lock { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.nh-bottom-nav .nh-lock { position: absolute; top: 3px; left: calc(50% + 5px); }
.nh-bottom-nav .nh-lock svg { width: 13px; height: 13px; }
.nh-drawer__item .nh-lock { margin-left: auto; }
.nh-drawer__item .nh-lock svg { width: 16px; height: 16px; }

/* Hard hide the mobile chrome on tablet/desktop */
@media (min-width: 768px) {
  .nh-bottom-nav, .nh-drawer, .nh-drawer-backdrop { display: none !important; }
}

/* ==========================================================================
   Public login on phones: login form first; the marketing intro ("Über
   Neurohub") opens as a full-screen overlay from a top-right menu button.
   Compact pane; OAuth buttons share one row (two columns).
   (Menu + close buttons and .js-login-collapse are added by app.js.)
   ========================================================================== */
.login-menu-btn,
.login-intro-close { display: none; }

@media (max-width: 767px) {
  /* compact the login pane */
  body.brand-refined .public-login-shell .pane { padding: 18px 16px 24px; }
  body.brand-refined .public-login-shell .login-form { gap: 0.5rem; }
  body.brand-refined .public-login-shell .login-form p.lead { margin: 0.1rem 0 0.7rem; }

  /* top bar: drop the decorative status pill; keep language switcher + menu at
     the top-right so the hamburger has room. */
  body.brand-refined .public-login-shell .pane-meta { gap: 8px; align-items: center; }
  body.brand-refined .public-login-shell .pane-meta .public-topbar-status { display: none; }

  /* OAuth → two equal columns in one row */
  body.brand-refined .public-login-shell .brand-oauth-row { flex-direction: row; gap: 10px; }
  body.brand-refined .public-login-shell .brand-oauth-row .brand-oauth-btn {
    flex: 1 1 0; min-width: 0;
  }

  /* top-right hamburger that opens the intro overlay */
  body.js-login-collapse .login-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex: 0 0 auto;
    border: 1px solid var(--border-fam, var(--border)); border-radius: 10px;
    background: #fff; color: var(--ink, var(--sakkade-blue)); cursor: pointer;
  }
  body.js-login-collapse .login-menu-btn svg { width: 22px; height: 22px; }

  /* intro becomes a full-screen overlay. inset:0 fills the viewport exactly, so
     the off-state never adds horizontal scroll; fade + slight rise on open. */
  body.js-login-collapse .public-login-shell .intro {
    position: fixed; inset: 0; z-index: 70; margin: 0; border-right: none;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: calc(56px + env(safe-area-inset-top, 0px)) 22px
             calc(28px + env(safe-area-inset-bottom, 0px));
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
  }
  body.js-login-collapse .public-login-shell .intro.is-open {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  }
  body.js-login-collapse.intro-open { overflow: hidden; }

  /* close (X) button pinned to the overlay's top-right */
  body.js-login-collapse .public-login-shell .intro .login-intro-close {
    display: inline-flex; align-items: center; justify-content: center; z-index: 3;
    position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px;
    width: 42px; height: 42px; border-radius: 10px;
    border: 1px solid var(--border-fam, var(--border)); background: #fff;
    font-size: 26px; line-height: 1; color: var(--ink-2, var(--muted)); cursor: pointer;
  }
}

@media (min-width: 768px) {
  .login-menu-btn, .login-intro-close { display: none !important; }
}

/* ==========================================================================
   Wide data tables — interim: contained horizontal scroll (no page overflow).
   The "hide minor columns" pass (col-key/col-secondary in index.php) is layered
   on top of this once verified in the admin view.
   ========================================================================== */
@media (max-width: 767px) {
  .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* once columns are tagged, the reduced table fits without scroll: */
  .data-table .col-secondary { display: none; }
  .table-wrap:has(.col-secondary) .data-table { min-width: 0; }
}