/* v18: site-wide mobile responsiveness sweep + timetable generator (ABSOLUTE LAST) */

/* ---- never let anything push the page sideways ---- */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, iframe, svg { max-width: 100%; height: auto; }
pre, code { white-space: pre-wrap; word-break: break-word; }
h1, h2, h3, h4, p, td, th, li, a, span, label { overflow-wrap: anywhere; }

/* ---- every wide table scrolls instead of breaking the layout ---- */
.res-table-wrap, .table-wrap, .tt-out-wrap, .table-responsive {
  width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}

@media (max-width: 1024px) {
  .gen-grid, .chart-grid, .stat-grid { gap: 12px; }
}

@media (max-width: 768px) {
  .card, .glass-card { padding: 14px !important; border-radius: 14px; }
  h1 { font-size: clamp(1.25rem, 5.2vw, 1.7rem); }
  h2 { font-size: clamp(1.1rem, 4.6vw, 1.4rem); }
  h3 { font-size: clamp(1rem, 4.2vw, 1.2rem); }
  .stat-grid, .chart-grid, .gen-grid { grid-template-columns: 1fr !important; }
  .tt-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .tt-toolbar select, .tt-toolbar input { flex: 1 1 100%; }
  .tt-grid { grid-template-columns: 1fr !important; }
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }
  /* comfortable tap targets + no iOS zoom-on-focus */
  input, select, textarea, .btn, button { font-size: 16px; }
  .btn, button { min-height: 42px; }
  .vibrant-hero { padding: 16px !important; }
}

/* ---- stacked tables read as cards on phones ---- */
@media (max-width: 640px) {
  table.stacked, table.stacked thead, table.stacked tbody,
  table.stacked tr, table.stacked th, table.stacked td { display: block; width: 100%; }
  table.stacked thead { display: none; }
  table.stacked tr {
    margin: 0 0 10px; border: 1px solid var(--border, #dfe4ee);
    border-radius: 12px; padding: 8px; background: var(--card, #fff);
  }
  table.stacked td { border: 0; padding: 6px 4px; }
  table.stacked td[data-label]::before {
    content: attr(data-label); display: block;
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; opacity: .65; margin-bottom: 3px;
  }
  table.stacked td input, table.stacked td select { width: 100%; }
}

@media (max-width: 480px) {
  .footer { font-size: .78rem; text-align: center; }
  .tt-out-table { font-size: .68rem; }
  .tt-out-table th, .tt-out-table td { padding: 3px; }
}

/* ---- printing the generated timetable ---- */
@media print {
  .sidebar, .topfix, .footer, .tt-gen, .btn, .alert { display: none !important; }
  #ttOutput .card { box-shadow: none; border: 0; page-break-after: always; }
  .tt-out-table { font-size: 10pt; }
  .tt-out-table thead th { background: #143a7a !important; color: #fff !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}