/* ============================================================
   Session-specific rules — attendance result glyphs, selection chips,
   session detail on narrow viewports

   Split out of pages.css. These rules serve the attendance sheet, which is
   the most behaviour-critical screen in the application (design system v2 §7).
   ============================================================ */

/* ── Attendance result labels (TM-31) ─────────────────────── */
/* The result must be tellable from across a classroom, not only by reading the
   word. The glyph carries the same meaning as the text — it is decorative for
   assistive tech (aria-hidden) because the label text already names the state,
   so this is a usability improvement, not a WCAG 1.4.1 fix.

   THE V2 CONFLICT, AND HOW IT IS RESOLVED. §5.3 makes a status badge a soft tint
   plus a dot, and a soft tint is by definition quieter than the saturated fill it
   replaces — which is the one property TM-31 exists to protect. The two do not
   have to be traded off against each other, because they pull on different
   levers: the tint lives on the label (components/feedback.css, where every
   result colour is measured against its own tint), and the distance legibility
   lives here, in the glyph drawn on top of it.

   So the fill gets quieter and the MARK gets bigger. 1.05em → 1.15em is the
   whole of it: at reading distance the difference is barely there, and across a
   room a larger mark carries further than a heavier one of the same size,
   because what fails first at distance is the counter of the glyph, not its
   stroke. That is also why the weight comes down to semibold rather than staying
   at 700 — §2 retires 700 from the system, and here it costs nothing to obey,
   since the size increase more than pays for it.

   The geometry is deliberately untouched: the glyph still sits in the 1.25rem
   label box of AttendanceMatrixCell.razor.css with line-height 1, so a sheet
   twenty requirements wide is exactly as wide as it was. Legibility that is
   bought with column width would be taken straight back by the horizontal
   scrolling it causes. */
.attendance-result-glyph {
    font-weight: var(--tm-weight-semibold);
    margin-right: 0.35em;
    font-size: 1.15em;
    line-height: 1;
}

/* ── Selection chips in the add-participants / add-agenda dialogs (TM-22) ── */
/* The selection survives a new search, so it needs to stay visible even when the
   current result page no longer contains the selected rows. */
.tm-selected-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tm-space-1);
    margin-bottom: var(--tm-space-3);
    max-height: 7rem;
    overflow-y: auto;
}

.tm-selected-chips .ui.label {
    display: inline-flex;
    align-items: center;
}

.tm-selected-chips .delete.icon {
    cursor: pointer;
    margin-left: 0.4em;
}

/* ── Session detail on narrow viewports ───────────────────── */

/* Fomantic keeps `four wide column` at 25% at every width, so on a phone the four
   overview values are squeezed until they run into each other ("AdministratorMichal
   Straka"). Two per row under 700px, one per row under 480px. The `!important` is
   not decoration — Fomantic's own column widths carry it and would otherwise win. */
@media only screen and (max-width: 700px) {
    .session-overview-grid.ui.grid > .four.wide.column {
        width: 50% !important;
    }
}

@media only screen and (max-width: 480px) {
    .session-overview-grid.ui.grid > .four.wide.column {
        width: 100% !important;
    }
}

/* Five tabs never fit into 375px. Let the strip scroll sideways and mark the edge
   that still has tabs behind it.

   The two cover layers sit on `background-attachment: local`, so they travel with
   the content and slide off exactly when that edge is reached; the two shadow
   layers stay put on `scroll`. The result is a shadow that appears only while
   there is something to scroll to — a plain static gradient would keep promising
   more tabs after the user had already reached the last one. The cover colour is
   --tm-bg because .ui.tabular.menu is transparent and sits directly on the page.

   The transparent stop of each gradient is written as a 0%-opacity mix of the
   colour it fades FROM, never the keyword `transparent`. `transparent` is
   rgba(0,0,0,0), so interpolating to it drags the midpoint towards black and
   leaves a grey bloom across the fade — the classic gradient fringe. Mixing the
   source colour with itself keeps the hue constant and only the alpha moves. */
@media only screen and (max-width: 700px) {
    .session-detail-tabs.ui.tabular.menu {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        background-image:
            linear-gradient(to right, var(--tm-bg) 40%, color-mix(in srgb, var(--tm-bg) 0%, transparent)),
            linear-gradient(to left, var(--tm-bg) 40%, color-mix(in srgb, var(--tm-bg) 0%, transparent)),
            linear-gradient(to right, color-mix(in srgb, var(--tm-text) 18%, transparent), color-mix(in srgb, var(--tm-text) 0%, transparent)),
            linear-gradient(to left, color-mix(in srgb, var(--tm-text) 18%, transparent), color-mix(in srgb, var(--tm-text) 0%, transparent));
        background-position: left center, right center, left center, right center;
        background-repeat: no-repeat;
        background-size: 26px 100%, 26px 100%, 12px 100%, 12px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    /* The scrollbar itself is not the affordance here; the edge shadow is. */
    .session-detail-tabs.ui.tabular.menu::-webkit-scrollbar {
        display: none;
    }

    .session-detail-tabs.ui.tabular.menu > .item {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}