/* ===== Shared responsive + reduced-motion overrides ===== */
/* Applies to all pages. Loaded after each page's own <style>, so these rules win. */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Base font scale-down */
body { font-size: 14px; }

/* Kill / shrink animations and transitions everywhere */
/* animation override temporarily disabled for testing */

/* Prevent horizontal overflow from wide elements */
/* html,body overflow-x:hidden disabled for testing */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* Tables should never force horizontal scroll on small screens.
   Pages with their own card-mode table CSS (thead{display:none} etc.)
   take priority; this is just a safety net for tables that don't. */
@media (max-width: 700px) {
  table.no-scroll-wrap { display: block; overflow-x: auto; }

  table:not([data-responsive="custom"]) thead { display: none; }
  table:not([data-responsive="custom"]) , 
  table:not([data-responsive="custom"]) tbody,
  table:not([data-responsive="custom"]) tr,
  table:not([data-responsive="custom"]) td {
    display: block;
    width: 100%;
  }
  table:not([data-responsive="custom"]) td {
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal !important;
  }
}
td, th { word-break: break-word; overflow-wrap: anywhere; }

/* Generic containers that use fixed/large widths should not force overflow */
.container, .wrapper, .card, .panel, .modal, .sidebar, .navrail {
  max-width: 100%;
  box-sizing: border-box;
}

/* ===== Breakpoints ===== */

/* Small laptop / tablet landscape */
@media (max-width: 1024px) {
  body { font-size: 13.5px; }
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.25rem !important; }
  h3 { font-size: 1.1rem !important; }
  /* removed: was overriding page-specific .grid layouts */
}

/* Tablet portrait */
@media (max-width: 768px) {
  .grade-box {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .grade-box > strong {
    min-width: 0 !important;
  }
  .task-def-item {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .task-def-item .task-def-label {
    flex: 1 !important;
    min-width: 0 !important;
    width: auto !important;
  }
  .task-def-item .task-def-max {
    width: 70px !important;
  }

  body { font-size: 13px; }
  h1 { font-size: 1.3rem !important; }
  h2 { font-size: 1.1rem !important; }
  h3 { font-size: 1rem !important; }
  .btn, button { font-size: 12.5px !important; padding: 7px 10px !important; }
  .admin-tools, .tool-label { flex-wrap: wrap !important; }
  .admin-summary, .summary-card, [class*="summary"] {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
  }
  /* nav/navrail: left to each page's own responsive CSS, which already handles this */
}

/* Phones */
@media (max-width: 480px) {
  body { font-size: 12.5px; }
  h1 { font-size: 1.15rem !important; }
  h2 { font-size: 1rem !important; }
  h3 { font-size: 0.95rem !important; }
  .btn, button { font-size: 12px !important; padding: 6px 9px !important; }
  .student-hdr, .item-row, .task-chip-row {
    flex-wrap: wrap !important;
  }
  .name-wrap .name { font-size: 13px !important; }
  .badge { font-size: 10.5px !important; padding: 2px 6px !important; }
  .grade-summary-row { flex-direction: column !important; align-items: stretch !important; }
  .total-pill { justify-content: space-between !important; }
}

/* Very small phones */
@media (max-width: 360px) {
  body { font-size: 12px; }
  .btn, button { font-size: 11.5px !important; padding: 5px 8px !important; }
}