/* ============================================================================
   Alaqmar — shared site hardening
   ----------------------------------------------------------------------------
   Loaded by every page so the launch-checklist fixes live in ONE place rather
   than in eleven divergent copies. Everything here is defensive: it only ever
   constrains layout that would otherwise break, so including it can't change
   a page that was already correct.
   ========================================================================== */

/* --- 1 & 16. Kill horizontal scroll --------------------------------------
   A single wide table or a 100vw element inside a padded parent is enough to
   make the whole document pan sideways on a phone. Clamp at the root and let
   individual wide things scroll inside their own box instead (below). */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* --- 16 & 20. Mobile overflow ------------------------------------------- */

/* Media must never dictate page width. */
img, svg, video, canvas, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* Long unbroken strings — URLs, serial numbers, MQTT topics, e-mail
   addresses — are the other classic source of sideways pan. */
p, li, td, th, dd, dt, h1, h2, h3, h4, h5, h6, .break-anywhere {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Wide tables scroll in their own container, not the page. Any table that is
   already wrapped keeps its own behaviour; this is the fallback for bare ones. */
.table-scroll,
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* `pre`/`code` blocks are frequent offenders in the admin console. */
pre, code, kbd, samp {
  overflow-x: auto;
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
}

/* --- 20. Touch-target + form sizing --------------------------------------
   iOS Safari zooms the viewport when a focused input's font-size is under
   16px, which reads to the user as the page "jumping". Enforce 16px on
   phones only, so desktop density is untouched. */
@media (max-width: 767px) {
  input, select, textarea {
    font-size: 16px !important;
  }
  /* Buttons and links need a 44px target to be reliably tappable. */
  button, .btn, [role="button"], a.btn {
    min-height: 44px;
  }
  /* Multi-column grids collapse rather than squeeze. */
  .grid, .kpis, .qgrid {
    grid-template-columns: 1fr !important;
  }
}

/* --- 3. Mobile menu ------------------------------------------------------
   Panels ship a sidebar that is off-canvas below 960px. The toggle button is
   injected by site.js only when a sidebar actually exists on the page. */
.site-menu-toggle {
  display: none;
  position: fixed;
  top: 12px;
  inset-inline-start: 12px;
  z-index: 60;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(127, 127, 127, .28);
  border-radius: 10px;
  background: rgba(255, 255, 255, .92);
  color: #1d2433;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
@media (prefers-color-scheme: dark) {
  .site-menu-toggle {
    background: rgba(20, 26, 48, .94);
    color: #e8ecff;
  }
}
@media (max-width: 960px) {
  .site-menu-toggle { display: flex; }
  /* Push fixed-position toggles clear of page content. */
  body.has-menu-toggle { padding-top: env(safe-area-inset-top); }
}

/* Backdrop shown while the off-canvas sidebar is open. */
.site-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 19;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.site-menu-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* --- 12 & 13. Success / error messages -----------------------------------
   One toast implementation for every page, so feedback looks and behaves the
   same in the teacher panel, the login screen and the admin console. */
.site-toast-host {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  width: min(92vw, 460px);
}
.site-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 11px 15px;
  border-radius: 10px;
  font: 500 14px/1.45 system-ui, -apple-system, "Tajawal", sans-serif;
  color: #fff;
  background: #334155;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .28);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: auto;
}
.site-toast.show { opacity: 1; transform: translateY(0); }
.site-toast.success { background: #16a34a; }
.site-toast.error   { background: #dc2626; }
.site-toast.warn    { background: #d97706; }
.site-toast.info    { background: #2563eb; }
.site-toast .ic { flex: none; font-weight: 700; }
.site-toast .msg { flex: 1; overflow-wrap: anywhere; }
.site-toast .x {
  flex: none; background: none; border: 0; color: inherit;
  opacity: .75; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px;
}
.site-toast .x:hover { opacity: 1; }

/* Inline form-field error text, paired with aria-invalid by site.js. */
.field-error {
  display: block;
  color: #dc2626;
  font-size: 12px;
  margin-top: 4px;
}
[aria-invalid="true"] {
  border-color: #dc2626 !important;
}

/* --- 17. Clickable logo -------------------------------------------------- */
a.brand-link,
a.brand-link:hover,
a.brand-link:visited {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: inherit;
}

/* --- Accessibility ------------------------------------------------------- */
/* Visible focus ring — several panels reset outline to 0 for aesthetics,
   which leaves keyboard users with no position indicator at all. */
:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* Screen-reader-only helper used by the injected skip link. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* --- Skip link (WCAG 2.4.1) ----------------------------------------------
   Off-screen until focused, then pinned top-left above everything. Uses a
   real offset rather than display:none so screen readers still announce it. */
.site-skip-link {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  z-index: 100000;
  padding: 10px 16px;
  background: #0d1b3e;
  color: #fff;
  font: 600 14px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-decoration: none;
  border-end-end-radius: 8px;
  transform: translateY(-120%);
  transition: transform .15s ease;
}
.site-skip-link:focus,
.site-skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid #c9a84c;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .site-skip-link { transition: none; }
}