/* ---------------------------------------------------------------------------
   Narrow-screen corrections.

   Four admin screens lost content on a phone: Notification Management, Platform
   Revenue, the Executive Audit report and the Calendar toolbar. Not merely off
   to the side — body carries overflow-x: hidden, so anything past the right
   edge cannot be scrolled to at all. A form field on Notification Management
   ended at x=780 in a 375px viewport and was simply unreachable.

   Everything here is inside one media query, so nothing above 768px is touched.
   Verified before and after on 12 routes at 375px and on 16 routes at 1440px.

   Loaded last in index.html, after components.css and dashboard.css, so these
   rules win without needing !important except where an existing declaration
   already used it.
   --------------------------------------------------------------------------- */

@media (max-width: 768px) {

  /* 1. A grid track sized 1fr is really minmax(auto, 1fr): it refuses to go
        below the widest thing inside it. On Notification Management the CSS
        already said grid-template-columns: 1fr for phones, yet the single track
        measured 798px inside a 359px parent, because the card in it would not
        shrink. Letting the items shrink is what makes 1fr behave as intended.
        The same applies to items of an inline flex row. */
  [style*="grid-template-columns"] > *,
  .notif-admin-grid > *,
  [style*="display:flex"] > *,
  [style*="display: flex"] > * { min-width: 0 !important; }

  /* 2. Two-column dashboards written as inline styles, which carry no
        breakpoint of their own and so stayed two-up on a phone. 2fr of 359px is
        143px — narrower than the content it holds. One column instead. */
  [style*="grid-template-columns: 2fr 3fr"],
  [style*="grid-template-columns: 3fr 2fr"],
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* 3. Button rows that ran off the edge instead of wrapping: the Calendar's
        Month / Week / Agenda / Today / New Event bar, and the Refresh and
        Export buttons on the audit report. */
  .flex.gap-2,
  .analytics-header-row,
  .analytics-header-row > * { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------
   The Composer on a phone.

   The Composer was written for a desk: a 350px sidebar beside the canvas, and
   a 64px header carrying three groups of buttons in a row that cannot wrap. On
   a 375px screen that leaves the canvas 25px wide and runs the header off the
   right edge, so the page was unusable rather than merely cramped.

   Narrow, the two stop competing for the one line there is. The canvas takes
   the whole width, and the editor keeps its place at the side but stays shut,
   sliding over the canvas when the handle in the header is tapped and getting
   out of the way again once a widget has been picked. Nothing is removed; the
   same tabs and the same tools are all still there, one tap away.
   --------------------------------------------------------------------------- */
/* The drawer handle and its backdrop exist for phones only. Declared outside
   the breakpoint so that a wide screen never draws them at all, rather than
   drawing them and hiding them again. */
.composer-drawer-toggle,
.composer-drawer-backdrop { display: none; }

@media (max-width: 768px) {

  /* The header gives up its fixed height and wraps into as many lines as its
     groups need. Nothing scrolls sideways and nothing is cut: the tools drop
     their words instead, which is what makes them fit. */
  .composer-header {
    height: auto;
    min-height: 52px;
    padding: 8px 10px;
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 6px;
  }
  /* The lesson name gets the first line to itself. Everything that acts on it
     is on the lines below, ending on the same right edge, so the rows read as
     one column of controls. The one exception is the drawer handle, which
     takes the left edge of the toolbar line: it opens the editor rather than
     changing anything, and keeping it apart means it cannot be hit while
     reaching for Clear Page. */
  .composer-header-left {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
  }
  .composer-header-center,
  .composer-header-right {
    flex: 1 1 100%;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  /* Those three groups are inline flex, so rule 1 above was shrinking every
     button in them to nothing. Each keeps the width of what is in it. */
  .composer-header-left > *,
  .composer-header-center > *,
  .composer-header-right > * { flex: 0 0 auto !important; }

  /* The five tools become their icons. Five labelled buttons need 750px and
     there are 351px, so labelling them meant cutting them off; the icon is
     the part that was being read anyway, and the words are still on the
     button's title and its aria-label. Save, Save & Publish and Cancel keep
     their words, because those three decide what happens to the work and are
     not things to guess at from a picture. */
  .composer-header-center .btn .cb-btn-words,
  .composer-logo-badge .cb-btn-words { display: none; }
  .composer-header-center .btn {
    width: 38px;
    height: 38px;
    padding: 0 !important;
    justify-content: center;
    gap: 0 !important;
    font-size: 15px;
    line-height: 1;
  }
  .composer-logo-badge {
    padding: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
  }

  .composer-header-left { gap: 9px; }
  /* The title carries an inline max-width of 320px written for the desk. With
     the badge down to its icon there is room for more of the lesson name. */
  .composer-header-title {
    font-size: .95rem !important;
    max-width: 74vw !important;
  }
  .composer-breadcrumbs { margin-bottom: 2px; }

  /* The split stops being a split. Its height was pinned to the viewport less
     a header that is no longer 64px tall, so it measures itself instead. */
  .composer-main-split {
    flex-direction: column;
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  /* Canvas on top: it is what you came to look at.

     The page writes this one inline as height: 100% of a parent that no longer
     has a height of its own, and keeps the padding on the scroll container
     inside it rather than here. */
  .composer-canvas-wrapper {
    order: 1;
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0;
  }
  .composer-canvas-scroll-container { padding: 12px !important; }
  .composer-canvas {
    width: 100% !important;
    min-height: 0 !important;
    padding: 18px 16px;
    border-radius: 10px;
  }

  /* The handle. It is the first thing in the header so it lands under the
     thumb on the side most people hold with, and it is the only control in
     the Composer that exists for phones alone. */
  .composer-drawer-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid #334155;
    border-radius: 10px;
    background: #1e293b;
    color: #e2e8f0;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
  }
  /* An auto margin eats the free space on the line, which sends the handle to
     the left edge and the five tools to the right, on the one row. */
  .composer-header-center .composer-drawer-toggle { margin-right: auto; }
  .composer-workspace.drawer-open .composer-drawer-toggle {
    background: #334155;
    border-color: #475569;
  }

  /* The editor, shut. It keeps the side it has always had and the width it
     was designed at, capped so it never covers the whole canvas: you can
     still see what you are editing behind it.

     Fixed rather than absolute, because .composer-main-split clips its
     overflow and would cut the drawer off at the edge. */
  .composer-sidebar {
    position: fixed;
    /* Below the header, which the page measures as the drawer opens because
       it wraps to a different number of lines on different phones. The
       fallback covers the first paint, before anything has been measured. */
    top: var(--composer-header-h, 52px);
    left: 0;
    bottom: 0;
    width: 84vw;
    max-width: 330px;
    z-index: 30;
    border-right: 1px solid #334155;
    box-shadow: 8px 0 28px rgba(0, 0, 0, .45);
    transform: translateX(-102%);
    transition: transform .22s cubic-bezier(.16, 1, .3, 1);
  }
  .composer-workspace.drawer-open .composer-sidebar { transform: none; }

  /* Tapping the canvas beside an open drawer shuts it. */
  .composer-drawer-backdrop {
    display: block;
    position: fixed;
    /* Starts below the header too, so Save and Cancel stay reachable with the
       drawer open rather than being dimmed out behind it. */
    inset: var(--composer-header-h, 52px) 0 0 0;
    z-index: 29;
    background: rgba(2, 6, 23, .55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  .composer-workspace.drawer-open .composer-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    .composer-sidebar,
    .composer-drawer-backdrop { transition: none; }
  }
  /* Four tab labels do not fit across 375px, so they scroll rather than
     squeeze into unreadable stubs. */
  .composer-sidebar-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .composer-sidebar-tabs::-webkit-scrollbar { display: none; }
  .composer-tab-btn {
    flex: 0 0 auto;
    padding: 11px 16px;
    white-space: nowrap;
  }

  /* Headings inside the canvas were written at desk sizes by whoever wrote
     the lesson, and a three-line title is not a title. The canvas still shows
     the real content, just set to the width it actually has. */
  .composer-canvas h1 { font-size: 1.6rem; line-height: 1.2; }
  .composer-canvas h2 { font-size: 1.3rem; line-height: 1.25; }
  .composer-canvas h3 { font-size: 1.1rem; }
  /* Anything the lesson embeds at a fixed size stays inside the page. */
  .composer-canvas img,
  .composer-canvas iframe,
  .composer-canvas video,
  .composer-canvas table { max-width: 100%; }
  .composer-canvas pre { overflow-x: auto; }

  /* The block toolbar only appears on hover, which a finger cannot do, so on
     touch it stays visible on the selected block. */
  .composer-block-container.selected .composer-block-tools { opacity: 1; }
}

/* ---------------------------------------------------------------------------
   Grids elsewhere that were still three or more columns wide on a phone.
   Listed one by one rather than caught by a blanket rule, because one of them
   must not collapse: the Calendar's month grid is seven columns because a week
   has seven days, and folding it would stop it being a calendar.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Four stat tiles across 375px give each one 80px, which is narrower than
     the numbers in them. Two up, two down. */
  .eagle-stats-grid,
  .analytics-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* The question-type picker: four labels at 11px across 375px leave each one
     88px, which cuts the longer names. Two up reads. */
  .qb-type-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Two more turned up in the scan and are deliberately left alone. Registrar's
     .step-row is measured in millimetres: it belongs to the printed enrolment
     sheet, not the screen, and folding it would damage the document. The quiz
     lobby's .qp-lobby-glow is an absolutely positioned circle, so capping its
     width would flatten it into an ellipse to no benefit. */
}

/* ---------------------------------------------------------------------------
   Assignments & Grading on a phone.

   Two separate failures, both visible at once: the lens strip had its buttons
   squashed into each other, and the queue table ran off the right edge with
   five of its eight columns past the screen.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* The strip was already set to scroll sideways and its buttons already said
     white-space: nowrap. What broke it was rule 1 at the top of this file:
     the strip is an inline flex, so every button in it was being given
     min-width: 0 and allowed to collapse onto its neighbour. Each button
     keeps its own width, and the strip scrolls as it was meant to. */
  #grading-lenses > * { flex: 0 0 auto !important; }
  #grading-lenses {
    scrollbar-width: none;
    padding-bottom: 10px;
    margin-bottom: 4px;
  }
  #grading-lenses::-webkit-scrollbar { display: none; }

  /* The queue, as cards. The page stamps each cell with the name of its
     column, taken from the header row, and the row stops being a row.

     Only tables the page has stamped are affected: every other .data-table in
     the product is untouched, because none of them carries this class. */
  .data-table.as-cards { display: block; }
  .data-table.as-cards thead { display: none; }
  .data-table.as-cards tbody,
  .data-table.as-cards tr,
  .data-table.as-cards td { display: block; width: 100%; }

  .data-table.as-cards tr {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    padding: 10px 13px;
    margin-bottom: 10px;
  }
  .data-table.as-cards tr:hover td { background: transparent; }

  /* The cell stays a block and the column name goes above the value rather
     than beside it. Putting them side by side meant making the cell a flex
     row, which also turned the two or three stacked lines inside a cell into
     columns of their own and squashed them: the student's name beside their
     grade, the teacher's name beside how they got the work. Stacked, every
     cell keeps the shape it was written with. */
  .data-table.as-cards td {
    border-top: 0;
    padding: 5px 0;
    font-size: 13px;
    text-align: left !important;
  }
  .data-table.as-cards td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 1px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-text-muted);
    line-height: 1.4;
  }
  .data-table.as-cards td:empty { display: none; }
  /* Long titles and class codes wrap instead of widening the card. */
  .data-table.as-cards td,
  .data-table.as-cards td * { white-space: normal !important; min-width: 0 !important; }

  /* The last column is the row's buttons and has no header to name it, so it
     sits apart at the foot of the card, where an action belongs. */
  .data-table.as-cards td:not([data-label]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px solid var(--color-border);
  }

  /* The frame was there to scroll a wide table sideways. There is no wide
     table any more, and the cards carry their own borders. */
  .table-container:has(> .data-table.as-cards) {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
  }
}