/* =============================================================================
   MediWord — mobile-responsive overrides
   -----------------------------------------------------------------------------
   Loaded LAST in every layout (admin, auth, guest, frontend app, marketing), so
   anything here overrides the Vite/Tailwind bundles. Edit this file directly:
   no build step is needed (the link is cache-busted by file modification time).

   Rules:
   - Everything lives inside a max-width media query, so desktop is untouched.
   - Add page-specific fixes in the "YOUR OVERRIDES" blocks at the bottom.
   - Use !important only where inline styles or Tailwind utilities must be beaten.

   Breakpoints:  tablet <= 1024px   |   mobile <= 768px   |   small phone <= 480px
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Tablet and below (<= 1024px)
   ----------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Never let a wide child create sideways page scroll. */
  html, body { max-width: 100%; overflow-x: hidden; }
  img, video, iframe, svg, canvas { max-width: 100%; }
  img, video { height: auto; }
}

/* -----------------------------------------------------------------------------
   2. Mobile (<= 768px)
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* --- Typography / form controls ------------------------------------------ */
  /* 16px stops iOS Safari zooming the page when a field is focused. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea { font-size: 16px; }

  /* --- Long content must wrap instead of widening the page ----------------- */
  h1, h2, h3, h4, p, li, td, th, a, label { overflow-wrap: anywhere; }
  pre, code { white-space: pre-wrap; word-break: break-word; }

  /* --- Tables: scroll inside their own box ---------------------------------- */
  .mw-table-wrap,
  .table-wrap,
  .prose table { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { max-width: 100%; }

  /* --- Admin (resources/css/admin.css: .mw-*) -------------------------------- */
  .mw-main { padding-left: 14px; padding-right: 14px; }
  .mw-card { padding-left: 14px; padding-right: 14px; }

  /* Filter bars / button rows wrap and stack full width. */
  .mw-filter-bar { flex-direction: column; align-items: stretch; }
  .mw-filter-bar .mw-input,
  .mw-filter-bar .mw-select,
  .mw-filter-bar input[type="text"].mw-input,
  .mw-filter-bar input[type="date"].mw-input { width: 100%; min-width: 0; max-width: none; }
  .mw-filter-bar .mw-btn { width: 100%; }

  /* Inline-styled flex rows (forms with style="display:flex") may wrap. */
  .mw-card form[style*="display:flex"],
  .mw-card form[style*="display: flex"] { flex-wrap: wrap; }
  .mw-card form[style*="display:flex"] > *,
  .mw-card form[style*="display: flex"] > * { min-width: 0; max-width: 100%; }

  .mw-row-between { flex-wrap: wrap; gap: 10px; }
  .mw-actions { flex-wrap: wrap; }
  .mw-pagination { overflow-x: auto; }

  /* Comfortable tap targets. */
  .mw-btn, .mw-btn-sm { min-height: 36px; }

  /* --- Frontend (Tailwind pages) -------------------------------------------- */
  /* Long headings and cards may never exceed the viewport. */
  main, section, article { max-width: 100%; }
  .measure { max-width: 100%; }

  /* Embedded video / map frames keep their ratio. */
  iframe { max-width: 100%; }

  /* Sticky site/app header: the logo block (min-w-0) was squeezed to zero width by the
     right-hand controls (exam switcher, bell, avatar, menu). Keep the logo visible and
     let the controls give way instead. */
  /* One flex row: logo on the left, controls on the right. The logo may shrink a little on very narrow
     phones but is never covered by the buttons (it used to sit underneath "Question bank"), and it
     keeps a fixed height so it is never "too big". */
  header.sticky > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  header.sticky > div > nav { display: none; }
  header.sticky > div > div:first-child { flex: 0 1 auto; min-width: 0; }
  header.sticky > div > div:first-child a { flex: 0 1 auto; min-width: 0; }
  header.sticky > div > div:first-child img { display: block; height: 28px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
  header.sticky > div > div:last-child { flex: 0 0 auto; margin-left: auto; gap: 6px; }
  /* Compact header buttons ("Start" / "Question bank"). */
  header.sticky > div > div:last-child a.whitespace-nowrap { padding-left: 12px; padding-right: 12px; font-size: 14px; }
}

/* -----------------------------------------------------------------------------
   3. Small phones (<= 480px)
   ----------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .mw-main { padding-left: 12px; padding-right: 12px; }
  .mw-actions .mw-btn,
  .mw-actions form { flex: 1 1 100%; }
  .mw-actions form .mw-btn { width: 100%; }
}

/* =============================================================================
   YOUR OVERRIDES — add new mobile rules below
   ============================================================================= */

/* Tablet */
@media (max-width: 1024px) {
  /* example:  .some-selector { display: none; } */
}

/* Mobile */
@media (max-width: 768px) {
  /* example:  .some-selector { grid-template-columns: 1fr !important; } */
}

/* Small phone */
@media (max-width: 480px) {
  /* example:  .some-selector { font-size: 14px; } */
}

/* -----------------------------------------------------------------------------
   Site logo: fixed height at every width. The generic "img { height:auto }" rule above is un-layered, so it beats
   the Tailwind h-7 / sm:h-9 utilities (which live in a cascade layer) and let the logo render at its natural,
   very large size on tablets. Keeping the height here makes the logo the same size on every device.
   ----------------------------------------------------------------------------- */
img.mw-logo { display: block; height: 28px; width: auto; max-width: none; flex-shrink: 0; }
img.mw-logo--footer { height: 32px; }
@media (min-width: 640px) {
  img.mw-logo:not(.mw-logo--footer) { height: 36px; }
}
@media (max-width: 768px) {
  header.sticky > div > div:first-child img.mw-logo { max-width: none; }
}