/* ═══════════════════════════════════════════════════════════════
   RC12-B4 — Responsive, overflow, accessibilitat i polish transversal
   AvalMap · 2026-09-06
   Capa final: carregada després de ui-pack.css per resoldre conflictes
   històrics de breakpoints sense reobrir el sistema visual validat.
   ═══════════════════════════════════════════════════════════════ */

/* ── Contracte de layout ─────────────────────────────────────── */
#app, #main, .panel, .tab-pane, #student-hub,
.panel-header > *, .tab-bar > *, .toolbar > *, .ui-toolbar > *,
.stu-topbar > *, .aval-context-bar > *, .aval-pane-shell,
.evo-layout > *, .responsive-grid > * { min-width: 0; }

/* viewport dinàmic: fallback + dvh per navegadors moderns */
#app { height: calc(100vh - 54px); height: calc(100dvh - 54px); }

/* Evita scroll chaining fora del panell actiu. */
.panel, .tab-pane, .tbl-wrap, .module-scroll, .panel-scroll,
#sidebar, #student-hub .stu-content-shell { overscroll-behavior: contain; }

/* ── Focus / teclat ──────────────────────────────────────────── */
:where(button, [role="button"], input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
:where(.tab-btn, .sb-item, .sb-head-collapsible, .nom-link, .drop-zone):focus-visible {
  position: relative;
  z-index: 2;
}
button:disabled, .btn:disabled, [aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .5;
}

/* ── Topbar: evita col·lisions abans d'arribar a mòbil ─────── */
#topbar { min-width: 0; }
.tb-logo { flex: 0 0 auto; }
.tb-center {
  min-width: 0;
  max-width: min(32vw, 390px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.tb-search-wrap { position: relative; margin: 0 4px; flex: 0 1 220px; min-width: 120px; }
#global-search { width: 100% !important; min-width: 0; }
.tb-font-controls { flex: 0 0 auto; }
.tb-desktop-sidebar-toggle { flex: 0 0 auto; }
.tb-menu-pop { max-width: calc(100vw - 16px); }

/* ── Barres de tabs/toolbars: mai retallar controls ─────────── */
.tab-bar,
.stu-tab-bar,
.aval-tab-bar {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.tab-bar > .tab-btn,
.stu-tab-bar > .tab-btn,
.aval-tab-bar > .tab-btn {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.tab-bar-actions {
  min-width: max-content;
  flex: 0 0 auto;
}

/* Toolbars de gestió: els controls poden baixar de fila sense deformar-se. */
.toolbar, .ui-toolbar, .panel-toolbar, .filter-toolbar {
  min-width: 0;
}
.toolbar .form-input,
.ui-toolbar .form-input,
.panel-toolbar .form-input,
.filter-toolbar .form-input { max-width: 100%; }

/* ── Panells i capçaleres ───────────────────────────────────── */
.panel-header {
  min-width: 0;
  gap: 12px;
}
.panel-header > div:first-child { min-width: 0; }
.panel-header h2,
.panel-header p { overflow-wrap: anywhere; }
.panel-header > :last-child:not(:first-child) { flex: 0 0 auto; }

.module-scroll,
.panel-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 14px 16px;
}
.module-content-narrow { width: min(100%, 860px); }
.responsive-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }

/* ── Taules ─────────────────────────────────────────────────── */
.tbl-wrap,
.aval-table-wrap,
.stu-aval-table-wrap,
.table-scroll {
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}
.tbl-wrap table,
.aval-table-wrap table,
.stu-aval-table-wrap table,
.table-scroll table { width: max(100%, max-content); }
.tbl-wrap thead th,
.aval-table-wrap thead th,
.stu-aval-table-wrap thead th,
.table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}
.tbl-wrap td, .tbl-wrap th,
.aval-table-wrap td, .aval-table-wrap th,
.stu-aval-table-wrap td, .stu-aval-table-wrap th { max-width: 34rem; }

/* Les taules desplegades de Pendents només retenen el gest horitzontal.
   En arribar al límit vertical, la roda ha de continuar movent el panell. */
.pending-subject-card .tbl-wrap {
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}

/* Evita que una sola cadena larga eixampli tot el panell. */
td, .card, .alert, .empty-state-text, .student-meta, .stu-card-subtitle,
.quality-issue-desc, .ui-section-sub { overflow-wrap: anywhere; }

/* ── Modals ─────────────────────────────────────────────────── */
body.modal-open { overflow: hidden; }
.overlay {
  padding: 18px;
  overflow: hidden;
}
.modal {
  min-width: 0 !important;
  width: min(580px, calc(100vw - 36px));
  max-width: calc(100vw - 36px) !important;
  max-height: min(90vh, calc(100dvh - 36px));
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.modal.subj-modal-wrap,
.subj-modal-wrap { width: min(700px, calc(100vw - 36px)); max-width: calc(100vw - 36px) !important; }
.modal-close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.modal-title { padding-right: 34px; }
.modal-btns {
  position: sticky;
  bottom: -20px;
  z-index: 3;
  background: var(--s1);
  padding-bottom: 2px;
}

/* ── Toast ──────────────────────────────────────────────────── */
#toast {
  max-width: min(420px, calc(100vw - 32px));
  white-space: normal;
  line-height: 1.35;
}

/* ── Charts / visualitzacions ───────────────────────────────── */
.chart-frame { position: relative; width: 100%; min-width: 0; }
.chart-frame-sm { height: 150px; }
.chart-frame-md { height: 230px; min-height: 180px; }
.chart-frame-lg { height: 280px; }
.chart-frame canvas { max-width: 100% !important; }

/* Evolució: deixa de dependre del grid inline rígid 1fr + 300px. */
.evo-layout {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(250px,300px);
}
.evo-main { overflow: auto; padding: 14px; border-right: 1px solid var(--b1); min-height: 0; }
.evo-side { overflow: auto; padding: 12px; min-height: 0; }
.evo-view-switch { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
#evo-heatmap { max-width: 100%; overflow: auto !important; }

/* Configuració i convivència no han de deixar columns rígides. */
#panel-config .config-section { width: min(100%, 560px); max-width: 100%; }
#panel-convivencia .module-content-narrow { margin-right: auto; }

/* Student Hub: tabs i capçalera resilients. */
#student-hub { min-width: 0; }
#student-hub .stu-tab-bar { flex-wrap: nowrap; }
#student-hub .stu-content-shell { min-width: 0; }
#student-hub canvas { max-width: 100% !important; }
.stu-top-actions { min-width: 0; }

/* Sociograma / Aula: el canvas pot fer scroll, però mai empènyer el shell. */
#socio-canvas-wrap,
#socio-dist-wrap,
#socio-konva,
#socio-three,
.stu-socio-network { max-width: 100%; }
#socio-tooltip { max-width: min(260px, calc(100vw - 28px)); }

/* ── Breakpoint compact desktop / tablet horitzontal ───────── */
@media (max-width: 1280px) {
  #tb-session-status { display: none; }
  .tb-center { max-width: 24vw; }
  .tb-search-wrap { flex-basis: 190px; }
}

@media (max-width: 1100px) {
  #privacy-btn { display: none; }
  .tb-center { max-width: 19vw; }
  .evo-layout { grid-template-columns: minmax(0,1fr) 250px; }
  .panel-header { padding-left: 14px; padding-right: 14px; }
}

/* ── Tablet / drawer (≤ 900px) ─────────────────────────────── */
@media (max-width: 900px) {
  #topbar {
    height: 52px !important;
    padding: 0 9px !important;
    gap: 6px;
  }
  #app { height: calc(100vh - 52px); height: calc(100dvh - 52px); }
  #global-results { top: 52px !important; max-height: min(50dvh, 360px) !important; }

  #mobile-menu-btn { display: inline-flex !important; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; }
  .tb-desktop-sidebar-toggle { display: none !important; }
  .tb-center, #tb-session-status, #privacy-btn { display: none !important; }
  .tb-font-controls { display: none !important; }
  .tb-search-wrap { flex: 1 1 180px; margin: 0; min-width: 120px; }

  /* anul·la els breakpoints antics que convertien el sidebar en rail de 54/58px */
  #sidebar,
  #sidebar.collapsed {
    position: fixed !important;
    top: 52px !important;
    left: 0;
    bottom: 0;
    z-index: 220 !important;
    width: min(300px, 86vw) !important;
    min-width: min(300px, 86vw) !important;
    max-width: 86vw;
    transform: translateX(-105%);
    transition: transform .2s ease !important;
    overflow-y: auto !important;
    box-shadow: 10px 0 28px rgba(0,0,0,.26);
  }
  #sidebar.mobile-open { transform: translateX(0); }
  #sidebar.collapsed .sb-lbl,
  #sidebar.collapsed .sb-chevron,
  #sidebar.collapsed .sb-badge,
  #sidebar.collapsed .sb-load-icon,
  #sidebar.collapsed .sb-divider,
  #sidebar.collapsed .sb-subsection { display: initial !important; }
  #sidebar.collapsed .sb-subsection { display: block !important; }
  #sidebar.collapsed .sb-head-collapsible,
  #sidebar.collapsed .sb-item,
  #sidebar .sb-head-collapsible,
  #sidebar .sb-item { justify-content: flex-start !important; gap: 6px !important; padding-left: 10px !important; padding-right: 8px !important; }
  #sidebar #sb-toggle-btn { display: none !important; }

  #sidebar-overlay {
    display: block;
    position: fixed;
    inset: 52px 0 0;
    z-index: 219;
    background: rgba(0,0,0,.48);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
  }
  #sidebar-overlay.active { opacity: 1; pointer-events: auto; }

  #main { width: 100%; min-width: 0; }

  .panel-header {
    min-height: 0 !important;
    padding: 12px 14px !important;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .panel-header > :last-child:not(:first-child) { margin-left: 0; }

  .evo-layout { grid-template-columns: 1fr; overflow: auto; }
  .evo-main { overflow: visible; border-right: 0; border-bottom: 1px solid var(--b1); }
  .evo-side { overflow: visible; }

  .responsive-grid-2 { grid-template-columns: 1fr; }

  /* Quality / compare: deixa que el contingut controli la seva pròpia alçada. */
  #quality-content, #compare-content { height: auto !important; min-height: 0; }

  /* Student Hub: topbar compacta i tabs sempre accessibles. */
  .stu-topbar {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 9px !important;
    padding: 10px 12px !important;
  }
  .stu-back-btn { justify-self: start; }
  .stu-top-actions { justify-content: flex-start !important; }
  .stu-tab-bar { padding-left: 12px !important; padding-right: 12px !important; gap: 4px !important; }
  .stu-tab-bar .tab-btn { min-height: 38px; }

  /* Sociograma 3D/2D no força una alçada de desktop. */
  #socio-konva, #socio-three {
    height: min(66dvh, 620px) !important;
    min-height: 420px !important;
  }
  .stu-socio-network { min-height: 420px !important; }
}

/* ── Mòbil (≤ 640px) ───────────────────────────────────────── */
@media (max-width: 640px) {
  #topbar { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .tb-logo img { height: 28px !important; }
  .tb-search-wrap { min-width: 0; }
  #global-search { font-size: 16px !important; height: 34px; }
  #theme-btn { display: none; }
  .tb-menu-trigger { min-width: 34px; padding-left: 7px !important; padding-right: 7px !important; }
  .tb-menu-trigger .btn-icon { margin-right: 0; }
  .tb-menu-trigger .tb-data-label { display: none; }
  .tb-menu-pop { position: fixed; right: 8px; top: 48px; width: min(300px, calc(100vw - 16px)); }

  .tab-bar { padding-left: 8px !important; padding-right: 8px !important; }
  .tab-btn { min-height: 40px; padding-left: 9px; padding-right: 9px; }
  .tab-bar-actions { margin-left: 4px; gap: 5px; }

  .panel-header { padding: 10px 11px !important; }
  .panel-header h2 { font-size: .98rem !important; }
  .panel-header p { font-size: .68rem !important; }
  .panel-header > :last-child:not(:first-child) { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; }

  .module-scroll, .panel-scroll { padding: 10px; }
  .card { padding: 11px !important; }

  .modal {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 12px) !important;
    margin: 0 !important;
    padding: 16px 14px 14px !important;
    border-radius: 2px !important;
  }
  .overlay { align-items: flex-end !important; padding: 6px 8px 0 !important; }
  .modal-btns {
    bottom: -14px;
    margin-left: -14px;
    margin-right: -14px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    flex-wrap: wrap;
  }
  .modal-btns .btn { flex: 1 1 auto; min-height: 38px; }

  #toast {
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    max-width: none;
  }

  /* Inputs: 16px evita zoom automàtic d'iOS. */
  .form-input, .form-select, input, select, textarea { font-size: 16px; }
  .btn, button { min-height: 34px; }
  .modal-close { min-height: 32px; }

  .stats-row { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px !important; }
  .stat-box { width: auto !important; min-width: 0 !important; }
  .subj-student-grid { grid-template-columns: 1fr; }
  .subj-student-row:nth-child(odd) { border-right: 0; }
  .pending-mode-help { width: 100%; margin-left: 0; }
  .pending-filterbar label, .pending-filterbar select { width: 100%; max-width: none; }
  .pending-result-note { display: grid; }
  .pending-result-note span { text-align: left; }

  .tbl-wrap table,
  .aval-table-wrap table,
  .stu-aval-table-wrap table,
  .table-scroll table { font-size: .74rem; }

  .chart-frame-sm { height: 140px; }
  .chart-frame-md { height: 210px; }
  .chart-frame-lg { height: 240px; }

  .evo-main, .evo-side { padding: 10px; }
  .evo-view-switch .btn { flex: 1 1 calc(50% - 4px); }

  #panel-config .config-section { padding: 13px; }

  #socio-konva, #socio-three {
    height: 58dvh !important;
    min-height: 340px !important;
  }
  .stu-socio-network { min-height: 360px !important; }
}

@media (max-width: 420px) {
  .stats-row { grid-template-columns: 1fr !important; }
  .tb-menu-pop { right: 6px; width: calc(100vw - 12px); }
  .panel-title-icon { display: none; }
  .stu-position-chip { min-width: 0; }
}

/* ── Touch / preferències del sistema ──────────────────────── */
@media (pointer: coarse) {
  .sb-item, .sb-head-collapsible { min-height: 40px; }
  .drop-zone { min-height: 92px; }
  .icon-btn { min-width: 34px; min-height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

@media (forced-colors: active) {
  .btn, .form-input, .modal, .card, .tbl-wrap, .status-badge,
  .empty-state, .drop-zone { forced-color-adjust: auto; }
  .gp, .flag, .chip { border: 1px solid CanvasText; }
}

/* Fixos específics detectats a l'auditoria B4. */
@media (max-width: 900px) {
  #socio-konva { overflow: auto !important; -webkit-overflow-scrolling: touch; }
  #socio-three { overflow: auto !important; }
  #panel-sociograma #stp-visual .tab-bar,
  #panel-sociograma #stp-distribucio .tab-bar { overflow-x: auto; }
}

/* ── B4: refinaments finals detectats en auditoria transversal ── */
.aval-load-status-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 5px;
  margin-bottom: 10px;
}
.modal-source-tabs { width: fit-content; max-width: 100%; }
.compare-snapshot-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.compare-delta-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.socio-modal-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.tutorial-pane { width:100%; }
#panel-tutorials code { white-space:normal; overflow-wrap:anywhere; }

/* Controls generats amb amplades inline: manté la jerarquia però permet reflow. */
#panel-llista .tab-bar,
#panel-materies .tab-bar,
#panel-caract .tab-bar { flex-wrap:wrap; }

@media (max-width: 900px) {
  .tb-menu-pop { top: 52px !important; }
  .responsive-grid-2,
  .compare-snapshot-grid { grid-template-columns:1fr !important; }
  .compare-delta-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tutorial-pane { max-width:none !important; }
  #shp-360-content > .student-360-summary + div { grid-template-columns:1fr !important; }
}

@media (max-width: 640px) {
  .aval-load-status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .modal-source-tabs { width:100%; }
  .modal-source-tabs > * { flex:1 1 0; min-width:0; justify-content:center; }
  .compare-delta-grid,
  .socio-modal-stats { grid-template-columns:1fr !important; }
  .tutorial-pane { padding:12px !important; overflow:auto !important; }
  .tutorial-schema-grid { grid-template-columns:1fr !important; }
  #panel-tutorials .tbl-wrap { max-width:100%; overflow:auto; }
  #panel-tutorials .tbl-wrap table { min-width:620px; }
  #panel-llista .tab-bar > select,
  #panel-materies .tab-bar > select,
  #panel-caract .tab-bar > select { width:auto !important; flex:1 1 140px; }
  #panel-llista .tab-bar > input,
  #panel-materies .tab-bar > input,
  #panel-caract .tab-bar > input { width:100% !important; flex:1 1 100%; }
}