/* MOBALL: phone layer (max 600 px). Loaded last in the <head> of base_heb.html and base.html.
 *
 * Part 1 - safety net: zero-specificity rules (:where), so any page rule wins.
 * Part 2 - page fixes from the MOBALL scan, Part 3 - fixes from the MOBALL sweep.
 *          Prefixed with `html` so they beat the
 *          page's own single-class rules (page <style> blocks load after this file).
 *          Inline styles need !important; each such line says so.
 * Desktop and tablet are untouched: everything sits inside the 600 px query.
 */
@media (max-width: 600px) {

  /* ---- 1. Safety net -------------------------------------------------- */
  :where(img, video) { max-width: 100%; height: auto; }
  :where(iframe, embed, object, canvas) { max-width: 100%; }
  :where(pre) { max-width: 100%; overflow-x: auto; }
  :where(body) { overflow-wrap: break-word; }

  /* ---- 2. Page fixes -------------------------------------------------- */

  /* Info pages (about, educators, parents, imm, pricing, new unique): 2-up grid, 320 px minimum */
  html .ip-grid--2 { grid-template-columns: minmax(0, 1fr); }

  /* Mission progress cards (teacher group detail): 340 px minimum */
  html .mpc-grid { grid-template-columns: minmax(0, 1fr); }

  /* Teacher group detail: two columns, 320 px minimum */
  html .gd-two-col { grid-template-columns: minmax(0, 1fr); }

  /* Space dashboard, student modal: 4 stats in one row */
  html .student-modal-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Space forms, responses list: 280 px of fixed columns inside a clipping card */
  html .ezf-stud-head, html .ezf-stud-row { grid-template-columns: minmax(0, 1fr) auto auto 32px; gap: 0.5rem; padding-inline: 0.75rem; }

  /* Institution departments: 320 px minimum */
  html .departments-grid { grid-template-columns: minmax(0, 1fr); }

  /* Institution content / users, dashboard users card: tables clip - scroll inside their box */
  html .content-table-container, html .users-table-container { overflow-x: auto; }
  html .card-body > .data-table { display: block; overflow-x: auto; }

  /* Kits (styles-kit-*.css): recent cards, 350 px minimum */
  html .recent-cards-grid { grid-template-columns: minmax(0, 1fr); }

  /* My reports: 350 px minimum */
  html .reports-grid { grid-template-columns: minmax(0, 1fr); }

  /* Certificates, large card: fixed 360 px */
  html .cert-card-container.cert-size-large { width: 100%; max-width: 360px; }

  /* Kit / course / page-store instructions modal: inline width 60% is too narrow on a phone */
  html #instructionsModal > div { width: 94% !important; } /* !important: inline style */

  /* ---- 3. Fixes from the MOBALL sweep (18 Oct 2026) ------------------- */

  /* Footers (footer.html, footer_heb.html): one no-wrap row of links overflowed both sides */
  html .ezft-footer .ezft-links { flex-wrap: wrap; gap: 0.4rem 1rem; }

  /* Skills lollipop (student space page): the view-switch row was wider than the card */
  html .ezl__tools, html .ezl__tool { min-width: 0; max-width: 100%; flex-wrap: wrap; }
  html .ezl-switch { max-width: 100%; overflow-x: auto; }

  /* Institution groups (and teacher pages using styles-teacher.css): search + selects stack */
  html .filter-section { flex-wrap: wrap; width: 100%; }
  html .filter-section > * { flex: 1 1 100%; min-width: 0; }
  html .search-box input, html .filter-select { width: 100%; }

  /* Institution content: the tab row scrolls instead of overflowing */
  html .content-tabs { overflow-x: auto; scrollbar-width: none; }
  html .content-tab { flex: 0 0 auto; white-space: nowrap; padding-inline: 14px; }

  /* Teacher dashboard: stat cards were too wide for two columns */
  html .td-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .td-stat-card { min-width: 0; gap: var(--space-3); padding: var(--space-3); }
  html .td-stat-card > * { min-width: 0; }
  html .td-stat-card__icon { inline-size: 40px; block-size: 40px; }

  /* Space calendar: the floating add button took the full width (design-system 480 px .ez-btn rule) */
  html .cal-fab { inline-size: auto; }
}

/* ---- NATIVE: fields on phones and small tablets ----------------------------
 * Text under 16 px makes iOS zoom into the field on focus; about 90 page rules set 13-15 px.
 * !important on purpose: this must beat every one of them. Design-system fields (.ez-input, .ez-textarea) are already 17 px and stay. */
@media (max-width: 768px) {
  html input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not(.ez-input),
  html select, html textarea:not(.ez-textarea) { font-size: 16px !important; }
  html input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
  html select { min-block-size: 44px; }
  html button, html [role="button"], html a.ez-btn { -webkit-tap-highlight-color: transparent; }
}

/* ---- NATIVE-date: date and time fields on phones ---------------------------
 * The phone's own picker opens on a tap anywhere in the field. ez-sheet.js adds .ez-ndate and shows
 * the value the local way (18.10.2026) or a placeholder (בחירת תאריך) instead of the browser's mm/dd/yyyy.
 * !important: page rules style these fields in many ways; on phones they must all look and work alike. */
@media (max-width: 768px) {
  html input[type="date"], html input[type="time"], html input[type="datetime-local"] {
    -webkit-appearance: none !important; appearance: none !important; position: relative; display: flex !important; align-items: center; font-family: inherit;
    min-block-size: 48px !important; padding-block: 0 !important; padding-inline: 12px 40px !important; text-align: start;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-size: 20px 20px !important; background-position: right 12px center !important; }
  html input[type="time"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") !important; }
  html[dir="rtl"] input[type="date"], html[dir="rtl"] input[type="time"], html[dir="rtl"] input[type="datetime-local"] { background-position: left 12px center !important; }
  html input[type="date"]::-webkit-calendar-picker-indicator, html input[type="time"]::-webkit-calendar-picker-indicator, html input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    position: absolute; inset: 0; inline-size: auto; block-size: auto; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
  html input.ez-ndate::-webkit-datetime-edit, html input.ez-ndate::-webkit-date-and-time-value { display: none; }
  html input.ez-ndate.ez-date-empty::before { content: attr(data-ez-ph); color: var(--text-muted, #64748b); }
  html input.ez-ndate.ez-date-fmt::before { content: attr(data-ez-val); }
  html input.ez-ndate::before { flex: 1 1 auto; min-inline-size: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html input.ez-ndate:disabled::before { opacity: .55; }
  /* Project item panel: start and due side by side, the estimate below (three in a row clipped the dates) */
  html .prj-sched { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .prj-sched > label:nth-child(2) { order: 3; }
}

/* ---- NATIVE-backbar: on phones breadcrumbs become an app-style back bar -----------
 * ez-sheet.js builds .ezbb under the navbar: '‹ parent' (48px) + a button listing every level of the trail.
 * The page's own breadcrumb / back link is hidden only once the bar exists (html.ez-backbar); the space
 * context bar's settings button moves into the bar. */
.ezbb { display: none; }
@media (max-width: 768px) {
  html .ezbb { display: flex; align-items: center; gap: 4px; box-sizing: border-box; min-block-size: 52px; padding: 4px 8px; position: relative; z-index: 5;
    background: var(--surface, #ffffff); border-block-end: 1px solid var(--border, #e2e8f0); font-family: var(--font-sans, 'Assistant', 'Heebo', system-ui, sans-serif); }
  html .ezbb__back { flex: 1 1 auto; min-inline-size: 0; display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; padding-inline: 4px 10px;
    border-radius: 12px; color: var(--purple-dark, #5b21b6); font-size: 17px; font-weight: 700; line-height: 1.3; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  html .ezbb__back svg { inline-size: 24px; block-size: 24px; flex: 0 0 auto; }
  html .ezbb[dir="rtl"] .ezbb__back svg { transform: scaleX(-1); }
  html .ezbb__label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html .ezbb__path, html .ezbb__act { flex: 0 0 auto; inline-size: 44px; block-size: 44px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 12px; background: transparent; color: var(--text-muted, #64748b); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  html .ezbb__path svg, html .ezbb__act svg { inline-size: 22px; block-size: 22px; }
  html .ezbb__back:active, html .ezbb__path:active, html .ezbb__act:active { background: var(--border-soft, #f1f5f9); }
  html.ez-backbar .space-context-bar,
  html.ez-backbar .ez-breadcrumb,
  html.ez-backbar .cal-crumbs,
  html.ez-backbar .ezf-crumbs,
  html.ez-backbar #ezffCrumbs,
  html.ez-backbar .ms-breadcrumb,
  html.ez-backbar .td-crumbs,
  html.ez-backbar .hero-breadcrumb,
  html.ez-backbar .breadcrumb,
  html.ez-backbar a.ez-back,
  html.ez-backbar .ezbk,
  html.ez-backbar a.c3-back,
  html.ez-backbar a.back-link,
  html.ez-backbar a.sh-back-button,
  html.ez-backbar .hero-back-float { display: none !important; }
}