/* ADC-wide UI rules that are not part of the MMCA.Common baseline
   (_content/MMCA.Common.UI/app.css). Both heads link it so the web host and the MAUI host paint
   the same page: Source/Hosts/UI/MMCA.ADC.UI.Web/Components/App.razor and
   Source/Hosts/UI/MMCA.ADC.UI/wwwroot/index.html. It lives in the Conference UI RCL because that
   is the one UI library every ADC head already carries; the rules themselves are ADC-wide.

   Scoped (.razor.css) styling is the default for a single page. These two groups are deliberately
   global instead: both describe a markup pattern that repeats across module boundaries (the
   key/value detail table on eleven detail pages in three modules, the plain link list on two), so
   one definition beats eleven copies that can drift apart. */

/* ── Definition tables (the key/value table on a detail page) ──
   Long unbroken values (venue map, ticketing and sponsorship URLs, an absolute avatar URL) push
   the table wider than the 700px detail card. MudBlazor's .mud-table-container is overflow: auto,
   so it silently becomes a scroll region with no focusable child, which axe reports as
   scrollable-region-focusable (WCAG 2.1.1 Keyboard) on the organizer event detail page.

   Breaking the value inside its cell removes the overflow rather than hiding it, and a wrapped URL
   reads better on a phone than a sideways scroll. The container is taken out of the scroll path as
   well, so a future value that still cannot break does not quietly reintroduce the region. */
.detail-table .mud-table-container {
    overflow: visible;
}

.detail-table th,
.detail-table td {
    /* "anywhere", not "break-word": only anywhere shrinks the cell's min-content width, which is
       what actually keeps the table inside the card. break-word wraps the painted text but leaves
       the intrinsic width (and so the overflow) unchanged. */
    overflow-wrap: anywhere;
}

@media (max-width: 1023.98px) {
    /* The Common baseline turns every .mud-table-container into a horizontal scroller below the
       desktop breakpoint with !important. A definition table whose cells wrap does not need it,
       and keeping it would put the same unfocusable scroll region back on a phone. */
    .detail-table .mud-table-container {
        overflow-x: visible !important;
    }
}

/* ── Plain (non-interactive) lists ──
   A list of links is not a listbox. MudList renders role="listbox" with role="option" items that
   carry their own tabindex, so a MudLink inside one is a control nested inside a control: axe
   reports aria-input-field-name on the list and nested-interactive on the item. These lists keep
   MudBlazor's list metrics but stay plain <ul>/<li> markup, which leaves the link as the only
   interactive element in the row. */
.mmca-plain-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mmca-plain-list > li {
    display: flex;
    align-items: center;
    padding: 6px 16px;
}

/* ── Statistics tables (the session-selection dashboards) ──
   The organizer selection screens are dense count tables: a wide label column followed by several
   fixed-width numeric columns and a bold totals row. Those three shapes were repeated as inline
   style attributes on every cell, which put the same declaration in the markup forty-two times and
   left nothing for a reviewer or a theme to change in one place. The rules below say the same thing
   once, so the rendered result is byte-for-byte what the attributes produced.

   The column widths are named for what the column holds rather than for the pixel count, because
   the number is a layout decision about these tables and not a utility anyone should reuse by
   width. text-center-cell follows the same naming idiom as MMCA.Store's text-truncate-cell so the
   two apps' stylesheets converge. */
.text-center-cell {
    text-align: center;
}

.stat-col-narrow {
    width: 80px;
}

.stat-col {
    width: 100px;
}

.stat-col-wide {
    width: 120px;
}

.distribution-col {
    width: 200px;
}

/* The totals row of a statistics table: heavier than its body rows and ruled off from them. The
   rule uses the MudBlazor line token so it follows the active theme, light or dark. */
.table-total-row {
    font-weight: bold;
    border-top: 2px solid var(--mud-palette-lines-default);
}

/* The growing half of a two-part flex row (a spinner beside the text and bar it describes). */
.flex-fill-1 {
    flex: 1;
}