/* ════════════════════════════════════════════
   LAYOUT — Shell, topbar, sidebar, panells
   AvalMap · styles/layout.css
   ════════════════════════════════════════════ */

/* ── TOPBAR ── */
#topbar {
  height: 44px;
  background: var(--s1);
  border-bottom: 1px solid var(--b1);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.tb-logo   { font-family: var(--fh); font-size: 1.05rem; font-weight: 800; color: var(--gold); letter-spacing: .04em; white-space: nowrap }
.tb-center { font-family: var(--fh); font-size: .78rem; color: var(--txt3); letter-spacing: .06em; white-space: nowrap }
.tb-sep    { flex: 1 }

/* ── APP SHELL ── */
#app {
  display: flex;
  height: calc(100vh - 44px);
  overflow: hidden;
  font-size: var(--base-fs, 13px);
  --scale: 1;
}

/* ── SIDEBAR ── */
#sidebar {
  width: 220px;
  min-width: 220px;
  background: var(--s1);
  border-right: 1px solid var(--b1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 8px 6px 20px;
  transition: width .2s, min-width .2s;
}
#sidebar.collapsed { width: 48px; min-width: 48px; overflow: hidden }
#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: none !important }
#sidebar.collapsed .sb-head-collapsible,
#sidebar.collapsed .sb-item        { justify-content: center; padding: 7px 4px }
#sidebar.collapsed #sb-toggle-btn button { transform: scaleX(-1) }

.sb-section       { margin-bottom: 2px }
.sb-icon          { font-size: .82rem; flex-shrink: 0; width: 16px; text-align: center; opacity: .8 }
.sb-lbl           { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sb-head-collapsible {
  font-family: var(--fh); font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  color: var(--txt2); padding: 7px 8px; cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  border-radius: var(--r); transition: all .12s; user-select: none;
}
.sb-head-collapsible:hover { background: var(--s2); color: var(--txt) }
.sb-chevron { font-size: .65rem; color: var(--txt3); margin-left: auto; transition: transform .2s; flex-shrink: 0 }
.sb-head-collapsible.closed .sb-chevron { transform: rotate(-90deg) }
.sb-subsection        { overflow: hidden; transition: max-height .25s ease; max-height: 400px }
.sb-subsection.closed { max-height: 0 }
.sb-load-icon {
  background: none; border: 1px solid var(--b2); border-radius: 3px;
  color: var(--txt3); font-size: .7rem; font-weight: 700; padding: 1px 5px;
  cursor: pointer; flex-shrink: 0; transition: all .12s; font-family: var(--fh);
}
.sb-load-icon:hover   { border-color: var(--teal); color: var(--teal) }
.sb-load-icon.loaded  { border-color: var(--ae-b); color: var(--ae) }
.sb-item {
  font-family: var(--fh); font-size: .79rem; font-weight: 600; letter-spacing: .04em;
  padding: 5px 8px 5px 16px; border-radius: var(--r); cursor: pointer;
  color: var(--txt2); transition: all .12s;
  display: flex; align-items: center; gap: 5px; position: relative;
}
.sb-item:hover  { background: var(--s2); color: var(--txt) }
.sb-item.active { background: var(--s3); color: var(--gold); border-left: 2px solid var(--gold); padding-left: 14px }
.sb-dot         { width: 7px; height: 7px; border-radius: 50%; background: var(--b2); flex-shrink: 0; margin-left: auto }
.sb-dot.loaded  { background: var(--ae) }
.sb-divider     { height: 1px; background: var(--b1); margin: 5px 4px }
.sb-badge       { font-family: var(--fm); font-size: .6rem; background: var(--s3); color: var(--txt3); padding: 1px 5px; border-radius: 3px }
.sb-item.active .sb-badge { background: var(--as-bg); color: var(--gold) }

/* ── MAIN ── */
#main {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* ── PANELS ── */
.panel        { display: none; flex: 1; overflow: hidden; flex-direction: column }
.panel.active { display: flex }

/* ── TAB BAR ── */
.tab-bar {
  display: flex; align-items: center; gap: 0;
  padding: 0 16px;
  background: var(--s1);
  border-bottom: 1px solid var(--b1);
  flex-shrink: 0;
}
.tab-btn {
  font-family: var(--fh); font-size: .83rem; font-weight: 700; letter-spacing: .05em;
  padding: 11px 16px; border: none; background: none;
  color: var(--txt3); cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all .12s; white-space: nowrap;
}
.tab-btn:hover  { color: var(--txt) }
.tab-btn.active { color: var(--gold); border-bottom-color: var(--gold) }
.tab-pane        { display: none; flex: 1; overflow-y: auto; padding: 16px }
.tab-pane.active { display: block }

/* Sociograma visual — necessita flex column per a flex:1 del canvas-wrap */
/* Sociograma visual: tota la cadena ha de ser flex per permetre scroll bidireccional */
#panel-sociograma {
  overflow: hidden; /* sobreescriu .panel overflow:hidden per ser igual — la cadena flex resol tot */
}
#panel-sociograma #stp-visual {
  display: none;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  height: 100%;
}
#panel-sociograma #stp-visual.active {
  display: flex;     /* flex column: toolbar shrinks, canvas-wrap grows */
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  height: 100%;
  flex: 1;
  min-height: 0;
}
/* canvas-wrap: l'ÚNIC element que fa scroll (en les dues direccions) */
#socio-canvas-wrap {
  flex: 1;           /* omple l'espai restant dins el flex column */
  min-height: 0;     /* crític: sense això flex no encongeix i no hi ha scroll */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  background: var(--bg);
  cursor: grab;
}
.tab-bar-actions { margin-left: auto; display: flex; gap: 6px; align-items: center }

/* Tab panes específiques del panell avaluació */
#panel-aval .tab-pane        { height: 100%; overflow-y: auto }
#panel-aval .tab-pane.active { display: block; height: 100%; overflow-y: auto }

/* Tab panes del Student Hub (cada una té scroll independent) */
#student-hub .tab-pane.active                         { height: 100%; overflow: hidden; padding: 0 }
#student-hub .tab-pane.active[id="shp-resum"]         { height: 100%; overflow: hidden; padding: 0; display: flex; flex-direction: column }
#student-hub .tab-pane.active[id="shp-socio"]         { height: 100%; overflow-y: auto; padding: 14px; display: block }
#student-hub .tab-pane.active[id="shp-aval"]          { height: 100%; overflow-y: auto; padding: 14px; display: block }
#student-hub .tab-pane.active[id="shp-posicio"]       { height: 100%; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px }
#student-hub .tab-pane.active[id="shp-perfil"]        { height: 100%; overflow-y: auto; padding: 14px; display: block }
#student-hub .tab-pane.active[id="shp-abs"]           { height: 100%; overflow-y: auto; display: block }
#student-hub .tab-pane.active[id="shp-pend"]          { height: 100%; overflow-y: auto; padding: 14px; display: block }
#student-hub .tab-pane.active[id="shp-dis"]           { height: 100%; overflow-y: auto; display: block }
#student-hub .tab-pane.active[id="shp-inf"]           { height: 100%; overflow: hidden; display: flex; flex-direction: column }
#student-hub .tab-pane.active[id="shp-360"]           { height: 100%; overflow-y: auto; padding: 16px; display: block }

/* ── STUDENT HUB ── */
#student-hub        { display: none; flex: 1; overflow: hidden; flex-direction: column }
#student-hub.active { display: flex }

.stu-topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: var(--s1);
  border-bottom: 1px solid var(--b1);
  flex-shrink: 0;
}
.stu-name-block { flex: 1 }
.stu-nom  { font-family: var(--fh); font-size: 1.3rem; font-weight: 800; letter-spacing: .04em; color: var(--txt); line-height: 1.1 }
.stu-meta { font-family: var(--fh); font-size: .78rem; color: var(--txt3); letter-spacing: .04em; margin-top: 2px }

.stu-nav-btn  {
  font-family: var(--fh); font-size: .78rem; font-weight: 700;
  padding: 6px 10px; border: 1px solid var(--b2); border-radius: var(--r);
  cursor: pointer; background: var(--s2); color: var(--txt2);
}
.stu-nav-btn:hover  { border-color: var(--gold); color: var(--gold) }
.stu-back-btn {
  font-family: var(--fh); font-size: .78rem; font-weight: 700;
  padding: 6px 10px; border: 1px solid var(--b2); border-radius: var(--r);
  cursor: pointer; background: var(--s2); color: var(--txt2);
}
.stu-back-btn:hover { border-color: var(--teal); color: var(--teal) }

/* ── STUDENT HUB CONTENT ── */
.stu-layout  { display: grid; grid-template-columns: 280px 1fr; gap: 0; flex: 1; min-height: 0; overflow: hidden }
.stu-sidebar { background: var(--s1); border-right: 1px solid var(--b1); overflow-y: auto; padding: 14px; min-height: 0 }
.stu-main    { overflow-y: auto; padding: 14px; min-height: 0 }
.stu-card    { background: var(--s2); border: 1px solid var(--b1); border-radius: var(--r2); padding: 12px; margin-bottom: 10px }
.stu-card-title { font-family: var(--fh); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--txt3); margin-bottom: 10px }

/* Files de notes a la sidebar de l'alumne */
.grade-pill-row               { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--b1); font-size: .8rem; transition: all .12s }
.grade-pill-row:last-child    { border-bottom: none }
.grade-pill-row._mat-row:hover { background: var(--s3); border-radius: 4px; padding-left: 4px; padding-right: 4px; cursor: pointer }
._evo-hr:hover  { background: var(--s3) }
.grade-subject  { flex: 1; color: var(--txt2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .78rem }

/* Stack de puntuacions per avaluació */
.eval-score-stack { display: flex; flex-direction: column; gap: 2px; margin-left: auto; align-items: flex-end }
.eval-score-item  { font-family: var(--fm); font-size: .68rem; padding: 1px 5px; border-radius: 3px; text-align: right }

/* ════════════════════════════════════════════
   RESPONSIVE — Mobile · Tablet · Desktop
   AvalMap · layout.css
   ════════════════════════════════════════════ */

/* ── MÒBIL (< 640px) ── */
@media (max-width: 639px) {

  /* Topbar compacta */
  #topbar {
    height: 48px;
    padding: 0 10px;
    gap: 5px;
  }
  #topbar .tb-center { display: none }
  #topbar > .btn:not(.btn-primary):not(#theme-btn) { display: none }

  /* Sidebar com a drawer (fora de pantalla per defecte) */
  #sidebar {
    position: fixed;
    top: 48px;
    left: 0;
    bottom: 0;
    z-index: 200;
    width: 260px !important;
    min-width: 260px !important;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,.4);
  }
  #sidebar.mobile-open {
    transform: translateX(0);
  }
  #sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 199;
    top: 48px;
  }
  #sidebar-overlay.active { display: block }

  /* App ocupa tota l'alçada */
  #app { height: calc(100dvh - 48px) }

  /* Main ocupa tota l'amplada */
  #main { width: 100% }

  /* Panels */
  .tab-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap }
  .tab-btn { font-size: .75rem; padding: 10px 10px; flex-shrink: 0 }

  /* Taules → scroll horitzontal */
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch }
  table { min-width: 500px }

  /* Cards en columna */
  .stats-row { flex-direction: column; gap: 6px }
  .stat-box  { min-width: 0; width: 100% }

  /* Student Hub */
  .stu-topbar { flex-wrap: wrap; gap: 6px; padding: 8px 10px }
  .stu-layout { grid-template-columns: 1fr }
  .stu-sidebar { display: none }
  .stu-nom  { font-size: 1rem }

  /* Student Hub tabs */
  #student-hub .tab-bar { overflow-x: auto; flex-wrap: nowrap }

  /* Grid de distribució aula → columna */
  #socio-dist-wrap { padding: 10px }

  /* 360° grid */
  #shp-360-content > div { grid-template-columns: 1fr !important }

  /* Formularis */
  .form-input, .form-select { font-size: 16px } /* Evita zoom en iOS */

  /* Modals */
  .modal { width: calc(100vw - 20px) !important; max-width: none !important; margin: 10px }
  .overlay { align-items: flex-end; padding: 0 }
  .modal { border-radius: var(--r2) var(--r2) 0 0 }

  /* Botó hamburger — mostrar en mòbil */
  #mobile-menu-btn { display: flex !important }

  /* Topbar: amagar botons menys prioritaris */
  #topbar [title*="JSON"],
  #topbar [title*="Importar"] { display: none }
}

/* ── TAULETA (640px – 1023px) ── */
@media (min-width: 640px) and (max-width: 1023px) {

  /* Sidebar més estreta */
  #sidebar { width: 190px; min-width: 190px }

  /* Student Hub → columna simple */
  .stu-layout { grid-template-columns: 240px 1fr }

  /* Topbar: amagar botons secundaris */
  #topbar .tb-center { font-size: .7rem }

  /* App */
  #app { height: calc(100dvh - 44px) }

  /* Grid global */
  .stats-row { flex-wrap: wrap }

  /* Taules */
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch }

  /* 360° */
  #shp-360-content > div {
    grid-template-columns: 300px 1fr !important;
    gap: 14px !important;
  }

  /* Botó hamburger → ocult */
  #mobile-menu-btn { display: none !important }
}

/* ── ESCRIPTORI (≥ 1024px) ── */
@media (min-width: 1024px) {
  #mobile-menu-btn { display: none !important }
  #sidebar-overlay { display: none !important }
}

/* ── UTILITATS TOUCH ── */
@media (hover: none) {
  /* En dispositius tàctils, eliminar estats hover que confonen */
  .sb-item:hover,
  .sb-head-collapsible:hover { background: transparent }
  .btn:hover { opacity: 1 }

  /* Augmentar àrea de clic */
  .sb-item { min-height: 40px }
  .tab-btn { min-height: 44px }
  ._seat    { min-height: 60px }
}

/* ── ALÇADA DINÀMICA (safe area per a iOS) ── */
@supports (height: 100dvh) {
  #app { height: calc(100dvh - 44px) }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #sidebar { padding-bottom: calc(20px + env(safe-area-inset-bottom)) }
}