/* Online Challenges: the staff form's grade grid and item list, and the coach's entry dialog.
   See wwwroot/js/online-challenge-items.js and online-challenge-entry.js.
   Every colour is a Bootstrap variable so the dark/light flip carries through. */

/* ── The program x grade grid ─────────────────────────────────────────────── */
.oc-grid-box {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 0.25rem 0.75rem;
    /* A phone scrolls the grid inside this box, never the page. */
    max-width: 100%;
}

.oc-grid th,
.oc-grid td {
    white-space: nowrap;
}

.oc-grid thead th {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

/* ── The list of what teams submit ────────────────────────────────────────── */
/* Quiet rows: no box around each, no pill; the handle, the name and the actions in one line. */
.oc-items {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0;
}

.oc-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    border-radius: var(--bs-border-radius);
}

.oc-item[hidden] {
    display: none;
}

.oc-item.is-dragging {
    opacity: 0.5;
    outline: 1px dashed var(--bs-border-color);
}

/* The arrows and the cross show their outline only when pointed at or focused, so a list of five items is not a
   wall of boxes; the catalog still decides each one's icon and colour. */
.oc-item-buttons .btn:not(:hover):not(:focus-visible):not(:disabled) {
    border-color: transparent;
}

.oc-item-handle {
    flex: 0 0 auto;
    cursor: grab;
    color: var(--bs-secondary-color);
    padding: 0.25rem 0.125rem;
    touch-action: none;
}

.oc-item-label {
    flex: 1 1 8rem;
    min-width: 0;
}

.oc-item-buttons {
    /* A fixed slot holding up, down and the cross or the lock, so the arrows never move between rows. */
    flex: 0 0 7rem;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
}

/* ── The coach's entry dialog ─────────────────────────────────────────────── */
.oc-entry-prompt summary {
    cursor: pointer;
}

/* ── The staff grid at phone width ────────────────────────────────────────── */
/* The result column is hidden below sm; its two notes sit under the program name instead. */
.oc-grid-notes {
    white-space: normal;
}

/* ── The Entries window ───────────────────────────────────────────────────── */
/* One block per cell that may break anywhere, so a long team name or site wraps at 375 instead of being clipped
   by the dialog (app-grid's phone cells are flex rows: min-width 0 lets the block shrink). */
.oc-team {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* The site a link is on: one line, cut with an ellipsis at 14rem (the title says all of it), never "www.youtu / be.com". */
.oc-open-link {
    display: inline-block;
    max-width: 14rem;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

/* ── The staff list's Programs column ─────────────────────────────────────── */
/* One line per program event: the link, then its Draft / Approved chip beside it, never wrapping (Chris, 2026-11-09: "side by
   side"). The table widens the column to fit rather than breaking "Achieve (MS, HS)" in two; on a phone the grid stacks cells. */
.oc-program-event {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.oc-program-event + .oc-program-event {
    margin-top: 0.25rem;
}

/* The two cells are ONE block each inside the grid's phone card (a flex row of label and value): min-width 0 lets the block
   shrink, and each program line may wrap there, so "Achieve (MS, HS) Approved" folds inside the card instead of running
   off it (2026-11-09). */
.oc-program-events,
.oc-entries {
    min-width: 0;
}

/* Below lg the line may wrap: at 768 the unbroken line pushed the table 37px past its scroller (measured 2026-11-09), and on
   a phone card it must fold inside the card. */
@media (max-width: 991.98px) {
    .oc-program-event {
        white-space: normal;
        flex-wrap: wrap;
        row-gap: 0.125rem;
    }
}

/* The team NUMBER never breaks mid-word ("Achie ve_90 0001A" in a narrow dialog, 2026-11-07): the name under
   it wraps, and the grid's phone layout stacks the cells anyway. */
.oc-team > .font-monospace {
    white-space: nowrap;
}

/* The lock stands where the cross would be: an icon the size of a small icon button, so the arrows keep one x
   on every row. The words "In use" are a help line under the name box. */
.oc-item-use {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 1.55rem;
    color: var(--bs-secondary-color);
}

/* ── The entry pop-up's link rows ─────────────────────────────────────────── */
/* Every box has the same slot after it, drawn whether or not there is a saved link to open: the Open button is
   visibility-hidden (not hidden), so the three boxes are one width. */
.oc-open-slot {
    flex: 0 0 6.5rem;
}

.oc-open-slot > .btn {
    width: 100%;
}

.oc-open-hidden {
    visibility: hidden;
}

/* At phone width the grid scrolls inside its box, so the box's own padding must not push it 12px wider than the dialog
   (scrollWidth 342 against clientWidth 330 at 375). */
@media (max-width: 575.98px) {
    .oc-grid-box {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
}

/* ── Phone width (phase 17b, 2026-11-08) ──────────────────────────────────── */
/* A grade box is 14 px; the whole cell is its tap target. The label fills the cell (the cell has no padding of its own),
   so a thumb anywhere in it ticks the box. */
.oc-grid td.oc-grade-td {
    padding: 0;
}

.oc-grade-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    margin: 0;
    cursor: pointer;
}

.oc-grade-cell:has(:disabled) {
    cursor: default;
}

/* "In use: ..." is a row of its own under the handle, name and buttons, wherever the row wraps. */
.oc-item-help {
    flex: 0 0 100%;
    margin: -0.25rem 0 0;
}

/* The arrows and the cross are touch targets here: 36 px, a little air between, and a slot wide enough for three. */
@media (max-width: 575.98px) {
    .oc-item-buttons.app-row-actions {
        flex-basis: 120px;
        gap: 6px;
    }

    .oc-item-buttons .btn {
        min-width: 36px;
        min-height: 36px;
    }

    .oc-item-use {
        width: 36px;
        height: 36px;
    }

    /* Before a link is saved there is nothing to open; on a phone the empty slot is the room the box needs. Desktop keeps the
       reserved width so the three boxes are one width. */
    .oc-open-slot[aria-hidden="true"],
    .oc-open-slot:has(.oc-open-hidden) {
        display: none;
    }
}

/* The entry pop-up's footer at 320: Close, Withdraw entry and Save stack full width rather than share a broken row. */
@media (max-width: 359.98px) {
    .oc-entry-footer {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .oc-entry-footer .btn,
    .oc-entry-footer > span {
        width: 100%;
    }

    .oc-entry-footer > span > .btn {
        width: 100%;
    }
}

/* My Registrations on a phone: a challenge entry has no order and no notebook, so the card leaves those two lines out
   instead of printing "Order #: -" and "Notebook: -" (app-grid's cards already hide a truly empty cell; these cells hold a
   dash on the table, so the dash is marked and its card line is hidden here). */
@media (max-width: 767.98px) {
    .app-grid-cards td:has(> .oc-cell-na:only-child) {
        display: none;
    }
}

/* Bootstrap's modal-lg is 800 px only from 992 px up, so on a tablet (576 to 991) the Add/Edit dialog stayed the default 500 px
   and the programs x grade grid scrolled inside it (scrollWidth 552 against 449 at 768). The dialog that holds the grid takes
   the room the tablet has instead; no other dialog changes. */
@media (min-width: 576px) and (max-width: 991.98px) {
    .modal-dialog:has(.oc-grid-box) {
        max-width: min(800px, calc(100vw - 2rem));
    }
}