/* Phone and iPad refinements. Every rule is inside a max-width query that
   matches the existing breakpoints (desktop starts at 1101px), so desktop
   layouts are untouched. */

/* ---- tablets and phones (<= 1100px) ------------------------------------- */
@media (max-width:1100px){
  /* Studio toolbar: compact buttons in one wrapped row instead of full-width
     pills stacked three deep. */
  /* dashboard-theme.css loads after this file, hence !important. */
  .dash-app .simple-top{flex-direction:column!important;align-items:stretch!important;gap:8px!important;padding:10px 12px!important}
  .dash-app .simple-top-actions{display:flex!important;flex-wrap:wrap!important;justify-content:flex-start!important;gap:8px!important;width:100%!important}
  .dash-app .simple-top-actions .secondary,
  .dash-app .simple-top-actions .primary,
  .dash-app .simple-top-actions .ps-extras > .secondary{flex:0 0 auto!important;width:auto!important;min-width:0!important;white-space:nowrap!important;min-height:40px!important;padding:0 16px!important;font-size:14px!important}
  .dash-app .simple-top-actions #publish-draft{order:-1}

  /* Report / heatmap headers: title on its own line, actions underneath. */
  .ps-report .page-head{flex-direction:column;align-items:stretch;gap:10px}
  .ps-report .page-head .library-actions{justify-content:flex-start;flex-wrap:wrap}

  /* Notice banners keep their button on one line. */
  .ps-banner .primary,.ps-banner .secondary{white-space:nowrap;flex:0 0 auto}
}

/* ---- phones (<= 720px) --------------------------------------------------- */
@media (max-width:720px){
  /* Page headers: the copy's min-width:0 lets it shrink to a sliver beside
     two buttons instead of wrapping; stack copy above the actions. */
  .dash-app .page-head{flex-direction:column;align-items:stretch;gap:10px}
  .dash-app .page-head .library-actions,
  .dash-app .page-head .page-head-actions{justify-content:flex-start;flex-wrap:wrap}
  /* Header: fullscreen is not available on iPhone Safari; feedback becomes an
     icon so the tool row fits beside the title. */
  .dash-app .dash-fs-toggle{display:none!important}
  .dash-app .dash-topbar .group-feedback-launcher,
  .dash-app .dash-main-top .group-feedback-launcher{font-size:0!important;gap:0!important;padding:0!important;width:40px;min-width:40px;justify-content:center}
  .dash-app .dash-main-top .group-feedback-launcher svg{width:18px;height:18px}
  /* Title and tools share one row (pages with the student scope pickers keep
     their own layout, since the pickers need a full row). */
  .dash-app .dash-main-top:not(:has(.scope)){flex-wrap:nowrap!important;gap:8px!important}
  .dash-app .dash-main-top:not(:has(.scope)) > .dash-main-top-right{width:auto!important;flex:0 0 auto!important;margin-left:auto!important}
  .dash-app .dash-main-top:not(:has(.scope)) > :nth-child(2){flex:0 1 auto;min-width:4.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dash-app .dash-main-top:not(:has(.scope)) > :nth-child(3):not(.dash-main-top-right){flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* Studio toolbar scrolls sideways in a single row; the paper stays in view. */
  .dash-app .simple-top-actions{flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;margin:0 -12px;padding-left:12px;padding-right:12px;width:auto!important;min-width:0!important;max-width:calc(100% + 24px)}
  .dash-app .simple-top-actions::-webkit-scrollbar{display:none}
  .dash-app .simple-top-actions .secondary,
  .dash-app .simple-top-actions .primary,
  .dash-app .simple-top-actions .ps-extras > .secondary{min-height:38px!important;padding:0 14px!important;font-size:13.5px!important}

  /* Student scope pickers: give the subject name the room it needs. */
  .dash-main-top--scope .scope{display:grid!important;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr) minmax(0,.8fr)!important;gap:6px!important;width:100%!important}
  .dash-main-top--scope .scope select{min-width:0!important;width:100%!important;grid-column:auto!important;flex:none!important}

  /* Report metrics: three compact tiles per row. */
  .ps-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .ps-metric{padding:10px 12px;border-radius:12px}
  .ps-metric strong{font-size:20px}
  .ps-metric span{font-size:11.5px}
  .ps-report .ps-title{font-size:21px}
  .ps-remind{padding:10px 12px}

  /* Timer: under the header on the right, never over the title. */
  #ps-timer.ps-timer{top:64px!important;right:12px!important;left:auto!important;transform:none!important;padding:5px 12px;font-size:14px}

  /* Popover menus: solid background; the glass effect hurts legibility on phones. */
  .ps-extras-pop{background:var(--dash-bg-2)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

  /* Heatmap and tables: slightly denser cells. */
  .ps-table th,.ps-table td{padding:7px 8px;font-size:12.5px}
  .ps-cell{min-width:34px}
}