/* ── mobile.css — Adaptació per a pantalles mòbils ──────────────────────────
   Loads after styles.css. Only overrides — styles.css remains unchanged.
   Breakpoints:
     768px — tablets i telèfons (layout principal)
     480px — telèfons petits (ajustos addicionals)
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Touch action — elimina el delay de 300ms i evita interferències ─────── */
button, .tag-btn, .view-tab, .tmpl-chip, .proj-chip,
.an-tab, .an-side-btn, .hdr-ctrl-btn, .auth-submit-btn {
  touch-action: manipulation;
}

/* Els tracks del timeline no han de fer scroll quan es toca ──────────────── */
#tl-track, #prod-tl-track {
  touch-action: none;
}

/* ── Layout principal — apilat vertical en mobile ───────────────────────── */
@media (max-width: 768px) {

  /* Variables ajustades */
  :root {
    --header-h: 68px;
  }

  /* Header: reduir padding i font */
  #app-title {
    font-size: 16px;
    letter-spacing: 2px;
  }

  #header-top {
    padding: 0 10px;
    gap: 8px;
  }

  /* View tabs: més petites i sense posicionament absolut problematic */
  #view-tabs {
    position: static;
    transform: none;
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
  }
  #view-tabs::-webkit-scrollbar { display: none; }

  .view-tab {
    font-size: 9px;
    padding: 4px 10px;
    letter-spacing: 0.8px;
    white-space: nowrap;
  }

  /* Header controls: scroll horitzontal en lloc de wrap */
  .header-controls {
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .header-controls::-webkit-scrollbar { display: none; }

  /* Layout tagging: columna (vídeo dalt, botons baix) */
  #layout {
    flex-direction: column;
  }

  #left-panel {
    flex: none;
    height: 55vh;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  #right-panel {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow-y: auto;
  }

  /* Timeline: target de toc més gran */
  #tl-track {
    height: 26px;
  }

  #timeline {
    height: 44px;
  }

  /* Botons de tagging: lleugerament més grans per als dits */
  .tag-btn {
    padding: 6px 9px;
    font-size: 11px;
  }

  /* Panell de navegació: scroll horitzontal */
  #nav-bar {
    overflow-x: auto;
    scrollbar-width: none;
  }
  #nav-bar::-webkit-scrollbar { display: none; }

  /* Auth box: ample complet en mòbil */
  .auth-box {
    width: calc(100vw - 32px);
    max-width: 360px;
    padding: 24px 20px;
  }

  /* Production view: ajustar timeline */
  #prod-tl-track {
    height: 26px;
  }

  /* Admin i settings: padding reduït */
  #admin-view, #controlpanel-view {
    padding: 10px;
  }
}

/* ── Telèfons petits (< 480px) ───────────────────────────────────────────── */
@media (max-width: 480px) {

  :root {
    --header-h: 60px;
  }

  #app-title {
    font-size: 14px;
  }

  /* Vídeo ocupa menys alçada per deixar espai als botons */
  #left-panel {
    height: 45vh;
  }

  .view-tab {
    font-size: 8px;
    padding: 3px 8px;
  }

  /* Analysis: taules amb scroll horitzontal */
  .an-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .an-table {
    font-size: 10px;
    min-width: 400px;
  }

  /* Reducció de padding general */
  #an-content {
    padding: 10px 8px;
  }
}

/* ── Millores generals per a pantalla tàctil ────────────────────────────── */

/* Evitar selecció de text accidental en interaccions tàctils */
.tag-btn, .view-tab, .tmpl-chip, .proj-chip, .nav-btn {
  -webkit-user-select: none;
  user-select: none;
}

/* Scrollbar invisible en WebView mòbil */
@media (pointer: coarse) {
  ::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar);
    border-radius: 2px;
  }
}