/* IBS SchoolOS - mobile app shell.
 *
 * On a phone the portal used to be the desktop layout squeezed narrow: a header
 * that wrapped to five lines and pushed the Lock button off the screen, a
 * hamburger as the only way anywhere, a menu with icons stacked above labels
 * and an active item in dark text on dark green, a floating button sitting on
 * top of content, and four full-width cards to show four numbers.
 *
 * This turns it into something that behaves like an app: a one-line header, a
 * bottom tab bar for the screens each role uses most, dialogs that slide up as
 * sheets, tables that become cards, a two-up numbers grid, safe-area padding for
 * notched phones and an installed-app look. Everything is inside the 900px
 * media query, so the desktop layout is exactly what it was.
 */

/* Hidden until the phone layout switches them on. */
#ibsTabBar, #ibsMoreBtn, #ibsSheet, #ibsSheetScrim, .ibs-msearch, #ibsPtr { display: none; }

@media (max-width: 900px) {
  :root { --ibs-tab-h: 58px; --ibs-safe-b: env(safe-area-inset-bottom, 0px); --ibs-safe-t: env(safe-area-inset-top, 0px); }

  html { -webkit-text-size-adjust: 100%; }
  body {
    overscroll-behavior-y: contain;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-touch-callout: none;
  }
  /* Text stays selectable where people copy things; the rest behaves like an app. */
  .sidebar, #ibsTabBar, .topbar, .btn, button { -webkit-user-select: none; user-select: none; }

  /* ---------- header: one line, title first ---------- */
  .topbar {
    flex-wrap: nowrap; gap: 8px; align-items: center;
    padding: calc(8px + var(--ibs-safe-t)) 12px 8px;
    min-height: 52px;
  }
  .topbar h1 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 17px; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar #ibsNavToggle, .topbar #viewCtx, .topbar #secBadge, .topbar #idleTimer,
  .topbar #aiBtn, .topbar #lockBtn, .topbar #themeBtn, .topbar #logoutBtn { display: none !important; }
  .topbar #approvalBadge { flex: 0 0 auto; }
  #ibsMoreBtn {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%;
    border: 1px solid var(--cp-border); background: var(--cp-surface-2, #f3f0e6);
    color: var(--cp-text); font-size: 20px; line-height: 1; cursor: pointer;
  }
  #ibsMoreBtn:active { transform: scale(.94); }
  .topbar #ibsMoreBtn { order: 99; }
  .topbar #ibsDataState { order: 90; }

  /* The "Live data" chip keeps its dot and short label; the detail line lives in the account sheet. */
  #ibsDataState { margin-left: auto !important; flex: 0 0 auto; max-width: none !important; padding: 5px 11px 5px 9px !important; min-height: 0 !important; }
  #ibsDataState > span:last-child > span { display: none !important; }

  /* ---------- room for the tab bar ---------- */
  #app.on { padding-bottom: calc(var(--ibs-tab-h) + var(--ibs-safe-b)); }
  .view { padding: 14px 14px 24px; }

  /* ---------- bottom tab bar ---------- */
  #ibsTabBar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    height: calc(var(--ibs-tab-h) + var(--ibs-safe-b)); padding-bottom: var(--ibs-safe-b);
    background: var(--cp-surface); border-top: 1px solid var(--cp-border);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, .06);
  }
  body.ibs-kb #ibsTabBar { display: none; }
  body.ibs-kb #app.on { padding-bottom: 0; }
  #app:not(.on) ~ #ibsTabBar { display: none; }
  .ibs-tab {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: 0; background: transparent; color: var(--cp-text-muted); padding: 6px 2px 4px;
    font: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer; position: relative; min-height: 0;
  }
  .ibs-tab .ibs-tab-ic { font-size: 21px; line-height: 1; filter: grayscale(.55); opacity: .8; transition: transform .15s, filter .15s; }
  .ibs-tab .ibs-tab-lb { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ibs-tab:active .ibs-tab-ic { transform: scale(.88); }
  .ibs-tab.on { color: var(--cp-accent, #046f25); }
  .ibs-tab.on .ibs-tab-ic { filter: none; opacity: 1; transform: translateY(-1px); }
  .ibs-tab.on::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--cp-accent, #046f25); }

  /* ---------- the menu drawer ---------- */
  .sidebar { padding-top: calc(18px + var(--ibs-safe-t)); padding-bottom: calc(18px + var(--ibs-safe-b)); width: min(86vw, 320px); }
  .sb-item { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important;
    min-height: 46px; padding: 10px 12px; font-size: 15px; line-height: 1.25; white-space: normal; }
  .sb-item .ic { flex: 0 0 26px; width: 26px; text-align: center; font-size: 18px; line-height: 1; display: inline-block !important; }
  .sb-item.active { background: rgba(255, 255, 255, .16) !important; color: #fff !important; font-weight: 700;
    box-shadow: inset 3px 0 0 var(--cp-warning, #f2c400); }
  .sb-group { margin-top: 14px; }
  #sbNav [hidden] { display: none !important; }
  .ibs-msearch { display: block; padding: 2px 0 8px; margin: 0; background: none; position: static; }
  .ibs-msearch input { width: 100%; box-sizing: border-box; padding: 11px 14px; border-radius: 12px; border: 0;
    background: rgba(255, 255, 255, .16); color: #fff; font-size: 16px; }
  .ibs-msearch input::placeholder { color: rgba(255, 255, 255, .7); }

  /* The floating idea button covered content; it lives in the account sheet on a phone. */
  #intake-pill { display: none !important; }
  #toast, .toast { top: calc(var(--ibs-safe-t) + 60px); left: 12px; right: 12px; bottom: auto; width: auto;
    text-align: center; border-radius: 12px; pointer-events: none; }

  /* ---------- numbers: two across, not four stacked ---------- */
  .g4:has(> .kpi), .g3:has(> .kpi), .grid:has(> .kpi) { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 12px 14px; border-radius: 14px; }
  .kpi .k-label { font-size: 11px; margin: 0 0 6px; }
  .kpi .k-val { font-size: 24px; margin: 0; }

  /* ---------- nothing may push the page sideways ---------- */
  /* A "1fr" column is sized to its widest content, so one wide table stretched a whole screen. minmax(0,1fr) lets it shrink. */
  .g2, .g3, .g4, .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .g4:has(> .kpi), .g3:has(> .kpi), .grid:has(> .kpi) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid > *, .g2 > *, .g3 > *, .g4 > *, .grid-2 > *, .grid-3 > *, .grid-4 > *, .view > * { min-width: 0; max-width: 100%; }
  .card, .section { min-width: 0; max-width: 100%; }
  .section-head, .card-head { flex-wrap: wrap; min-width: 0; }
  .section-head > *, .card-head > * { min-width: 0; }
  /* A table that cannot become cards scrolls inside its own box, with a hint that there is more. */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  #view img, #view canvas, #view svg, #view video { max-width: 100%; height: auto; }
  #view pre, #view code { white-space: pre-wrap; overflow-wrap: anywhere; }
  /* ---------- forms and filters ---------- */
  input, select, textarea { font-size: 16px !important; }
  input:not([type=checkbox]):not([type=radio]), select { min-height: 44px; }
  .btn, button.btn { min-height: 44px; border-radius: 12px; }
  .filters { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; align-items: stretch !important; }
  .filters input, .filters select { width: 100% !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box; flex: none !important; }
  .filters > input:not([type=checkbox]):not([type=radio]):first-child,
  .filters > .search, .filters > label:first-child { grid-column: 1 / -1; }
  .filters .btn, .filters button { width: 100%; }
  .filters > span, .filters > small, .filters > .muted { grid-column: 1 / -1; text-align: right; margin: 0 !important; }
  .form-actions { display: flex; gap: 10px; }
  .form-actions .btn { flex: 1; justify-content: center; }
  .section-head { flex-wrap: wrap; gap: 8px; }

  /* ---------- dialogs slide up as sheets ---------- */
  .modal-backdrop { align-items: flex-end !important; padding: 0 !important; }
  .modal {
    max-width: none !important; width: 100% !important; max-height: 92dvh; border-radius: 20px 20px 0 0 !important;
    padding: 22px 16px calc(18px + var(--ibs-safe-b)); animation: ibsSheetUp .24s cubic-bezier(.2, .8, .2, 1);
    position: relative;
  }
  .modal::before { content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: var(--cp-border); }
  .modal .form-actions { position: sticky; bottom: calc(-18px - var(--ibs-safe-b)); background: var(--cp-surface); padding: 10px 0 4px; margin-top: 10px; }
  @keyframes ibsSheetUp { from { transform: translateY(36%); opacity: .4; } to { transform: none; opacity: 1; } }

  /* The site-wide install nudge and the update bar sit above the tab bar, smaller, and step aside for sheets and dialogs. */
  #ibsInstallCard { bottom: calc(var(--ibs-tab-h) + var(--ibs-safe-b) + 10px) !important; left: 10px !important; right: 10px !important; padding: 12px 14px !important; max-height: 60dvh; overflow-y: auto; z-index: 60 !important; }
  #ibsInstallCard .icd-body { margin-bottom: 8px; }
  #ibsInstallCard .icd-steps { margin-bottom: 8px; }
  #ibsUpdateBar { bottom: calc(var(--ibs-tab-h) + var(--ibs-safe-b)) !important; z-index: 60 !important; }
  body.ibs-sheet-open #ibsInstallCard, body.ibs-sheet-open #ibsUpdateBar, body:has(.modal-backdrop.on) #ibsInstallCard, body:has(.sidebar.ibs-open) #ibsInstallCard { display: none !important; }

  /* ---------- the account sheet ---------- */
  #ibsSheetScrim { display: none; position: fixed; inset: 0; z-index: 70; background: rgba(3, 25, 12, .5); }
  #ibsSheetScrim.on { display: block; animation: ibsFade .18s ease-out; }
  #ibsSheet {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; transform: translateY(105%); visibility: hidden;
    background: var(--cp-surface); border-radius: 20px 20px 0 0; padding: 20px 16px calc(16px + var(--ibs-safe-b));
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .22); transition: transform .24s cubic-bezier(.2, .8, .2, 1), visibility 0s .24s;
    max-height: 86dvh; overflow-y: auto;
  }
  #ibsSheet.on { transform: none; visibility: visible; transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
  #ibsSheet::before { content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: var(--cp-border); }
  #ibsSheet .who { font-weight: 700; font-size: 16px; margin: 6px 0 2px; }
  #ibsSheet .sub { font-size: 12.5px; color: var(--cp-text-muted); margin: 0 0 14px; line-height: 1.5; }
  #ibsSheet .row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 10px 12px; margin: 0 0 8px;
    border: 1px solid var(--cp-border); border-radius: 14px; background: var(--cp-surface-2, #f7f4ea); color: var(--cp-text);
    font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
  #ibsSheet .row:active { transform: scale(.985); }
  #ibsSheet .row .ic { width: 26px; text-align: center; font-size: 19px; }
  #ibsSheet .row.danger { color: var(--cp-danger, #b3261e); }
  #ibsSheet .chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
  #ibsSheet .chip { font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--cp-border); color: var(--cp-text-muted); }

  /* ---------- pull to refresh ---------- */
  #ibsPtr { display: flex; position: fixed; top: calc(var(--ibs-safe-t) + 56px); left: 50%; z-index: 45; transform: translate(-50%, -80px);
    align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--cp-surface); border: 1px solid var(--cp-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .14); font-size: 12.5px; font-weight: 600; color: var(--cp-text-muted); opacity: 0; pointer-events: none; transition: opacity .12s; }
  #ibsPtr.on { opacity: 1; }
  #ibsPtr.go { transition: transform .2s; }
  #ibsPtr .spin { display: inline-block; transition: transform .15s; }
  #ibsPtr.busy .spin { animation: ibsSpin .8s linear infinite; }
  @keyframes ibsSpin { to { transform: rotate(360deg); } }
  @keyframes ibsFade { from { opacity: 0; } to { opacity: 1; } }

  /* ---------- a screen change reads as a screen change ---------- */
  .view.ibs-enter { animation: ibsEnter .2s ease-out; }
  @keyframes ibsEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    .view.ibs-enter, .modal, #ibsSheet, #ibsSheetScrim.on { animation: none; transition: none; }
  }
}

/* ---------- tables become cards on a phone ---------- */
@media (max-width: 700px) {
  /* A table that cannot become cards scrolls inside its own box instead of pushing the page sideways. */
  #view table:not(.ibs-cards) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #view table:not(.ibs-cards) th, #view table:not(.ibs-cards) td { white-space: nowrap; }
  .card:has(> table.ibs-cards) { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important; }
  table.ibs-cards, table.ibs-cards tbody { display: block; width: 100%; min-width: 0 !important; }
  table.ibs-cards thead { display: none; }
  table.ibs-cards tr, table.ibs-cards tr:hover { display: block; margin: 0 0 10px; padding: 4px 14px 6px; background: var(--cp-surface) !important;
    border: 1px solid var(--cp-border); border-radius: 14px; box-shadow: var(--cp-shadow); }
  table.ibs-cards tr:hover td, table.ibs-cards tr:nth-child(even) td { background: transparent !important; }
  table.ibs-cards td { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 8px 0;
    border: 0; border-bottom: 1px dashed var(--cp-border); font-size: 14px; min-width: 0; }
  table.ibs-cards td:last-child { border-bottom: 0; }
  table.ibs-cards td::before { content: attr(data-label); flex: 0 0 34%; max-width: 34%; text-align: left; font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px; color: var(--cp-text-muted); }
  table.ibs-cards td .ibs-cv { flex: 1 1 auto; min-width: 0; text-align: right; overflow-wrap: anywhere; }
  table.ibs-cards td:first-child { display: block; padding: 10px 0 8px; }
  table.ibs-cards td:first-child::before, table.ibs-cards td[data-label=""]::before { display: none; }
  table.ibs-cards td:first-child .ibs-cv { text-align: left; font-size: 15px; font-weight: 700; }
  table.ibs-cards td.ibs-empty { display: none; }
  table.ibs-cards .ibs-cv.ibs-ctl { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
  table.ibs-cards .ibs-cv.ibs-ctl > * { max-width: 100%; min-width: 0; }
  table.ibs-cards td.ibs-actions { padding: 10px 0 6px; border-bottom: 0; }
  table.ibs-cards td.ibs-actions .ibs-cv { display: flex; gap: 10px; width: 100%; text-align: center; }
  table.ibs-cards td.ibs-actions .btn, table.ibs-cards td.ibs-actions button { flex: 1 1 0; justify-content: center; }
  table.ibs-cards .chip:empty { display: none; }
  table.ibs-cards td input, table.ibs-cards td select { max-width: 100%; }
}