/* ═══════════════════════════════════════════════════════════════════════════
   CRMS — Responsive layer (phones & tablets)
   Loaded after style.css. Desktop (>900px) is unchanged.
   Many CRMS screens use inline styles, so some rules need !important.
   Developed by AstraTech
   ═══════════════════════════════════════════════════════════════════════════ */

/* Never let the page itself scroll sideways; wide tables scroll inside their box */
html, body { max-width: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }   /* no automatic text enlarging on phones */
body { overflow-x: hidden; }

/* Tab bars swipe sideways when they don't fit (any screen width; no change when they fit) */
.nav-pill-bar, .sub-tab-bar, .att-tab-bar, .cw-sub-bar {
  max-width: 100%; overflow-x: auto; flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity;
}
.nav-pill-bar::-webkit-scrollbar, .sub-tab-bar::-webkit-scrollbar,
.att-tab-bar::-webkit-scrollbar, .cw-sub-bar::-webkit-scrollbar { display: none; }
.nav-pill-bar .period-btn, .sub-tab-bar .period-btn, .att-tab-bar > *, .cw-sub-bar > * { flex-shrink: 0; scroll-snap-align: start; white-space: nowrap; }

/* "☰ Courses" button + drawer backdrop (added by js/mobile.js) — hidden on desktop */
#crmsNavBtn, #crmsNavBackdrop { display: none; }

/* ── Tablets & phones (≤ 900px) ─────────────────────────────────────────── */
@media screen and (max-width: 900px) {

  /* Top bar */
  .topbar { padding: 0 8px !important; gap: 6px; }
  .topbar-left { gap: 8px !important; }
  .topbar-left > div > div:last-child { display: none !important; }                  /* school name text (logo stays) */
  .topbar-right { gap: 4px !important; }
  .topbar-right .rm-bell > span:not(.rm-badge) { display: none !important; }          /* icon-only buttons */
  .topbar-right .rm-bell, .topbar-right .hbg-btn { padding: 7px 9px !important; }
  #crmsNavBtn {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    padding: 7px 10px; border: 1.5px solid var(--border); border-radius: 8px;
    background: var(--white); color: var(--accent); font: 700 12px var(--font); cursor: pointer;
  }
  #crmsNavBtn:active { background: var(--accent-lt); }

  /* Course list becomes a slide-in drawer */
  .layout { display: block !important; min-height: calc(100vh - 60px); }
  .sidebar {
    position: fixed !important; top: 0; bottom: 0; left: 0; z-index: 10200;
    width: min(300px, 86vw) !important; min-width: 0 !important;
    transform: translateX(-105%); transition: transform .25s ease !important;
    box-shadow: 8px 0 32px rgba(15, 23, 42, .35) !important;
  }
  body.crms-nav-open .sidebar { transform: translateX(0); }
  /* The desktop "collapse" state doesn't apply inside the drawer */
  .sidebar.collapsed .sidebar-label, .sidebar.collapsed .sidebar-add, .sidebar.collapsed .sidebar-bottom,
  .sidebar.collapsed #sideList, .sidebar.collapsed .sidebar-search, .sidebar.collapsed .sidebar-inner { opacity: 1 !important; pointer-events: auto !important; }
  .sidebar.collapsed .sidebar-header-title { opacity: 1 !important; height: auto !important; }
  .sidebar.collapsed .sidebar-header { flex-direction: row !important; padding: 14px 16px !important; }
  .sidebar-toggle { display: none !important; }
  .sidebar-item { padding: 10px 12px !important; font-size: 12.5px !important; }
  .sidebar-search input { font-size: 14px !important; }

  #crmsNavBackdrop {
    display: block; position: fixed; inset: 0; z-index: 10150; background: rgba(15, 23, 42, .45);
    opacity: 0; pointer-events: none; transition: opacity .25s;
  }
  body.crms-nav-open #crmsNavBackdrop { opacity: 1; pointer-events: auto; }
  body.crms-nav-open { overflow: hidden; }

  .main { width: 100% !important; padding: 12px !important; }

  /* Wide content scrolls inside its own box */
  .tbl-wrap { max-width: 100%; -webkit-overflow-scrolling: touch; }
  #mainArea img, #mainArea canvas, #mainArea svg { max-width: 100%; }
  #mainArea canvas { height: auto !important; }

  /* Menus open within the screen */
  .hbg-menu { max-height: calc(100vh - 76px); overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* Pop-ups fit the screen */
  .modal { width: auto !important; max-width: calc(100vw - 24px) !important; max-height: calc(100vh - 32px); overflow-y: auto; }
  .modal-box { max-width: calc(100vw - 24px) !important; max-height: calc(100vh - 32px); overflow-y: auto; }
  .modal-bg { padding: 12px; }
}

/* ── Phones (≤ 640px) ───────────────────────────────────────────────────── */
@media screen and (max-width: 640px) {

  /* Top bar: logo + Courses button on the left, icons on the right */
  .topbar { height: 56px !important; }
  .topbar-left > div > div:first-child { width: 36px !important; height: 36px !important; }
  .topbar-left > div > div:first-child img { width: 34px !important; height: 34px !important; }
  #topbarClock, #topbarSaveIndicator { display: none !important; }
  #crmsSyncIndicator { border-left: none !important; padding: 6px 8px !important; }
  #crmsNavBtn { padding: 7px 9px; }
  .topbar-right .rm-bell, .topbar-right .hbg-btn { padding: 7px 8px !important; }
  .hbg-btn > :not(svg) { display: none; }
  .hbg-btn { font-size: 0 !important; gap: 0 !important; }

  /* Menus become a panel under the top bar */
  .hbg-menu {
    position: fixed !important; top: 62px !important; left: 8px !important; right: 8px !important;
    min-width: 0 !important; width: auto !important; max-height: calc(100vh - 72px);
  }

  .main { padding: 10px !important; }

  /* Course header: title on top, mode buttons below */
  #mainArea > div:first-child[style*="space-between"] { flex-direction: column !important; align-items: stretch !important; gap: 10px; }
  #mainArea > div:first-child[style*="space-between"] > div:last-child { justify-content: flex-start !important; }
  #mainArea h2 { font-size: 15px !important; line-height: 1.25; }

  /* Score slot counters (Quizzes / Assignments / Recitation) stay grouped */
  .slot-bar { gap: 8px 12px !important; }
  .slot-bar > * { flex-shrink: 0; }

  /* Comfortable touch targets without oversized text */
  .period-btn { min-height: 32px; padding: 6px 10px !important; font-size: 11.5px !important; }
  .btn, .rm-bell, .hbg-btn, .hbg-item { min-height: 32px; }
  .hbg-item { font-size: 12px !important; }

  /* Text fields (iPhone tap-zoom is turned off by js/mobile.js, so 14px is fine) */
  input[type="text"], input[type="search"], input[type="password"], input[type="email"],
  input[type="number"]:not(table input), input[type="date"], input:not([type]), select, textarea { font-size: 14px !important; }
  table input, table select { font-size: 12px !important; }

  /* Smaller, clearer text on phones */
  #mainArea h2 + p, #mainArea h2 ~ p { font-size: 11px !important; }
  #mainArea > div:first-child[style*="space-between"] button { font-size: 11px !important; padding: 5px 11px !important; }
  table th { font-size: 10px !important; }
  table td { font-size: 12px !important; }
  .td-name { font-size: 12px !important; }
  .sidebar-item { font-size: 12.5px !important; padding: 10px 12px !important; }
  #mainArea [style*="font-size:54px"], #mainArea [style*="font-size: 54px"] { font-size: 38px !important; }
  #mainArea [style*="font-size:48px"], #mainArea [style*="font-size:44px"], #mainArea [style*="font-size:40px"] { font-size: 30px !important; }
  #mainArea [style*="font-size:36px"], #mainArea [style*="font-size: 36px"], #mainArea [style*="font-size:32px"] { font-size: 26px !important; }
  #mainArea [style*="font-size:28px"], #mainArea [style*="font-size:26px"] { font-size: 21px !important; }
  #mainArea [style*="font-size:24px"], #mainArea [style*="font-size:22px"] { font-size: 17px !important; }
  #mainArea [style*="font-size:20px"] { font-size: 16px !important; }
  #mainArea [style*="font-size:18px"] { font-size: 15px !important; }
  #mainArea [style*="font-size:16px"] { font-size: 14px !important; }
  .modal h3, .modal-box h3 { font-size: 15px !important; }

  /* Login */
  .login-box { width: calc(100vw - 28px) !important; max-width: 400px; padding: 30px 22px !important; }
  .login-box > div:first-child > div:last-child > div:first-child { white-space: normal !important; font-size: 12px !important; }

  /* Pop-ups take the full width */
  .modal-bg { padding: 8px; align-items: flex-end; }
  .modal, .modal-box { max-width: 100% !important; width: 100% !important; padding: 20px 16px !important; border-radius: 14px !important; }
  .modal-foot { flex-wrap: wrap; gap: 8px; }
  .modal-foot .btn { flex: 1 1 auto; }

  /* Inside pop-ups: multi-column form grids stack, rows wrap when they don't fit */
  :is(.modal-bg, #csModal, #schedModal, #fhModalOverlay, #aboutModal, [id$="Modal"], [id$="modal"]) [style*="grid-template-columns:1fr"],
  :is(.modal-bg, #csModal, #schedModal, #fhModalOverlay, #aboutModal, [id$="Modal"], [id$="modal"]) [style*="grid-template-columns: 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
  :is(#schedModal, [id$="Modal"]) [style*="grid-template-columns:90px"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  :is(.modal-bg, #csModal, #schedModal, #fhModalOverlay, #aboutModal, [id$="Modal"], [id$="modal"]) [style*="display:grid"] > * { min-width: 0; }
  :is(.modal-bg, #csModal, #schedModal, #fhModalOverlay, #aboutModal, [id$="Modal"], [id$="modal"]) [style*="display:flex"]:not([style*="flex-direction:column"]) { flex-wrap: wrap; }
  :is(.modal-bg, #csModal, #schedModal, #fhModalOverlay, #aboutModal, [id$="Modal"], [id$="modal"]) :is(input, select, textarea) { max-width: 100%; min-width: 0; }
  #fhModalOverlay > div, #aboutModal > div, #schedModal > div { width: 100% !important; max-width: 100% !important; }

  /* Toasts sit above the bottom edge, full width */
  #toast-container { left: 8px !important; right: 8px !important; bottom: 12px !important; transform: none !important; }
  #toast-container > * { max-width: 100% !important; }

  /* Floating calculator */
  #calcPanel { right: 8px !important; left: 8px !important; width: auto !important; bottom: 72px !important; }

  /* Hover card is a desktop feature */
  #stuCard { display: none !important; }

  /* Dashboard */
  #mainArea > div:has(> img[style*="height:44px"]) { flex-wrap: wrap !important; gap: 8px 12px !important; }
  #mainArea > div:has(> img[style*="height:44px"]) > img { height: 34px !important; }
  #mainArea > div:has(> img[style*="height:44px"]) > div:last-child { flex: 1 1 100% !important; text-align: left !important; }
  #mainArea [style*="grid-template-columns:repeat(4,1fr)"],
  #mainArea [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #mainArea [style*="grid-template-columns:repeat(5,1fr)"],
  #mainArea [style*="grid-template-columns:repeat(6,1fr)"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .ci-wrap { grid-template-columns: 1fr !important; }
  .ci-row { flex-wrap: wrap !important; }
  .ci-row > * { min-width: 0 !important; flex: 1 1 140px !important; }

  /* Seat Plan keeps the classroom layout and scrolls sideways */
  .sp-room { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .sp-grid { min-width: 620px; }

  /* Rows of stat cards wrap instead of running off the screen (Analytics etc.) */
  #mainArea div[style*="display:flex"]:has(> div[style*="min-width:100px"]) { flex-wrap: wrap !important; }
  #mainArea div[style*="min-width:100px"][style*="flex-direction:column"] { flex: 1 1 calc(50% - 8px) !important; }
}

/* ── Splash screen on phones: all three logos fit, loading text readable ── */
@media screen and (max-width: 640px) {
  #splashScreen { padding: 0 14px; gap: 14px !important; }
  #splashLogoWrap, #splashBacommWrap { width: 58px !important; height: 58px !important; flex-shrink: 0; }
  #splashLogoImg, #splashBacommImg { width: 58px !important; height: 58px !important; }
  #splashCrmsWrap { height: 58px !important; padding: 0 12px !important; border-radius: 12px !important; min-width: 0; flex-shrink: 1; }
  #splashCrmsImg { height: 38px !important; max-width: 100%; }
  #splashLogoWrap ~ div:not([id]) { font-size: 16px !important; }                  /* the "|" dividers */
  #splashScreen > div:nth-child(2) { gap: 10px !important; max-width: 100%; }       /* the logo row */
  #splashScreen > div:nth-child(3) > div:first-child { font-size: 14px !important; }
  #splashScreen > div:nth-child(3) > div:last-child { font-size: 10.5px !important; padding: 0 8px; }
  #splashPercent, #splashPercent ~ span, #splashScreen span:has(+ #splashPercent) { font-size: 12px !important; color: #fff !important; }
}

/* ── Very small phones (≤ 360px) ────────────────────────────────────────── */
@media screen and (max-width: 360px) {
  #calcTopBtn { display: none !important; }      /* calculator still in the floating button */
  #crmsNavBtn .crms-nav-label { display: none; }
  .main { padding: 8px !important; }
}

/* ── Touch screens of any size: no hover-only affordances ───────────────── */
@media (hover: none) and (pointer: coarse) {
  .sidebar-item, .period-btn, .hbg-item { -webkit-tap-highlight-color: rgba(30, 86, 219, .15); }
}