/*
 * mobile.css — laatste laag, alleen voor kleine schermen en touch.
 * Wordt als laatste stylesheet geladen, zodat hij oudere regels netjes overschrijft
 * zonder dat we in de grote bestanden hoeven te zoeken.
 */

/* ── Merk in de header (vervangt de FUT/Career-wereldwissel zolang FUT geparkeerd is) ── */
.site-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px; color: inherit; text-decoration: none; border-radius: 12px; }
.site-brand .brand-mark { width: 40px; height: 40px; }
.site-brand__label { font-weight: 800; font-size: 15px; letter-spacing: .08em; white-space: nowrap; }
.site-brand__label b { color: var(--color-career, #248cff); font-weight: 800; }
.site-brand:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 767px) {
  /* Header: logo blijft zichtbaar, tekst alleen als er ruimte is. */
  .site-brand__label { display: none; }
  .site-brand .brand-mark { width: 36px; height: 36px; }

  /* Onderbalk: vijf vaste knoppen, groot genoeg voor een duim. */
  .career-mobile-bottom-nav { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 2px !important; padding: 5px !important; }
  .career-mobile-bottom-nav a { min-height: 52px; font-size: 10.5px !important; padding: 6px 2px !important; text-align: center; }
  .career-mobile-bottom-nav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .career-mobile-bottom-nav svg { width: 22px; height: 22px; }

  /* Ruimte onderaan zodat de laatste inhoud en de footer niet achter de onderbalk vallen. */
  body[data-active-world="career"]:not(.wheel-immersive) { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  /* iOS zoomt in op velden met tekst kleiner dan 16px; dat voorkomen we. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px; }

  /* Sorteer-/filterbalk: labels mogen inkorten in plaats van buiten beeld te lopen. */
  .career-results-toolbar select, .career-results-actions select { min-width: 0; max-width: 100%; text-overflow: ellipsis; }

  /* Lange woorden en URL's breken af in plaats van de pagina breder te maken. */
  main { overflow-wrap: anywhere; }
  main pre, main code { white-space: pre-wrap; word-break: break-word; }

  /* Brede tabellen (beheer, vergelijken) scrollen binnen hun eigen kader. */
  .admin-page table, .admin-panel table, .career-compare-table, .squad-data-page table, .catalog-health table {
    display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }

  /* Beheer-subnavigatie: horizontaal scrollen in plaats van afbreken. */
  .admin-local-nav, .admin-world-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .admin-local-nav::-webkit-scrollbar, .admin-world-tabs::-webkit-scrollbar { display: none; }
  .admin-local-nav a, .admin-world-tabs a { flex: 0 0 auto; }

  /* Dialogen en panelen nooit breder dan het scherm. */
  dialog, .platform-search-dialog, .scout-drawer { max-width: 100vw; }
}

/* Touchscreens: alle bedieningselementen minstens 44×44 px (Apple/Google-richtlijn). */
@media (pointer: coarse) {
  .icon-button, .language-picker summary, .header-profile summary { min-width: 44px; min-height: 44px; }
  .button, button, [role="button"], .career-filter-trigger, select { min-height: 44px; }
  .career-mobile-tabs a, .career-mobile-tabs button, .career-mobile-metric-tabs button, .game-hub-tabs a { min-height: 44px; display: inline-flex; align-items: center; }
  .footer-legal-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
  .platform-header__nav a { min-height: 44px; display: flex; align-items: center; }
}

/* Heel smalle toestellen (iPhone SE / oudere Android, 320–360px). */
@media (max-width: 360px) {
  .platform-header__actions { gap: 4px; }
  .platform-header__actions .icon-button { width: 40px; }
  .career-mobile-bottom-nav { left: 6px !important; right: 6px !important; }
  .career-mobile-bottom-nav a { font-size: 9.5px !important; }
}