/* ============================================================
   Course picker styles (global)

   Must be global, not scoped: the picker markup lives across
   several child components (CourseSearchBar, SubjectAreaGrid,
   CourseResultList, SelectionBar), which each carry a different
   Blazor scope id. A `.razor.css` scoped to CourseChoices would
   not reach those child elements. Uses Fluent design tokens
   throughout; .tile from app.css provides base card surface,
   border, border-radius, and hover lift (linkable variant).
   ============================================================ */

.course-picker {
    max-width: 1100px;
}

/* ── Search bar ─────────────────────────────────────────── */

.course-search {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 16px 0 24px;
}

.course-search-input {
    flex: 1 1 220px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusMedium);
    /* 16px so iOS Safari doesn't zoom the viewport on focus. */
    font-size: var(--fontSizeBase400);
    background: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
    transition: border-color .12s ease, box-shadow .12s ease;
}

.course-search-input:focus {
    outline: none;
    border-color: var(--colorBrandStroke1);
    box-shadow: 0 0 0 2px var(--colorBrandBackground2);
}

.course-search-filter {
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusMedium);
    background: var(--colorNeutralBackground2);
    color: var(--colorNeutralForeground1);
    /* 16px so iOS Safari doesn't zoom the viewport on focus. */
    font-size: var(--fontSizeBase400);
    transition: border-color .12s ease, box-shadow .12s ease;
}

.course-search-filter:focus {
    outline: none;
    border-color: var(--colorBrandStroke1);
    box-shadow: 0 0 0 2px var(--colorBrandBackground2);
}

.course-search-clear {
    min-height: 44px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: var(--colorBrandForegroundLink);
    cursor: pointer;
    font-size: var(--fontSizeBase300);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.course-search-clear:hover {
    color: var(--colorBrandForegroundLinkHover, var(--colorBrandForeground1));
}

/* ── Browse / results headings ──────────────────────────── */

.browse-heading {
    margin: 4px 0 16px;
    font-size: var(--fontSizeBase500);
    font-weight: var(--fontWeightSemibold);
    color: var(--colorNeutralForeground1);
}

/* Heading + "Show all courses" toggle share a row on the browse screen. */
.browse-heading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.browse-heading-row .browse-heading {
    margin-bottom: 16px;
}

/* ── "Show all" table view ──────────────────────────────── */

.course-table-wrap {
    overflow-x: auto;
    margin-bottom: 8px;
}

.course-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fontSizeBase300);
}

.course-table th {
    text-align: left;
    padding: 8px 12px;
    font-size: var(--fontSizeBase200);
    font-weight: var(--fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--colorNeutralForeground3, var(--colorNeutralForeground2));
    border-bottom: 2px solid var(--colorNeutralStroke2);
}

.course-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
    color: var(--colorNeutralForeground2);
    vertical-align: middle;
}

.course-table .course-table-name {
    font-weight: var(--fontWeightSemibold);
    color: var(--colorNeutralForeground1);
}

/* Selected row: a green tint matching the grid tiles' "in your basket" wash.
   A gradient fragments across separate cells, so the row uses a flat tint and
   a green left marker on the first cell instead. */
.course-table tr.is-selected td {
    background: color-mix(in srgb, var(--colorStatusSuccessBackground2, #9fd89f) 28%, transparent);
}

.course-table tr.is-selected td.course-table-name {
    box-shadow: inset 3px 0 0 var(--colorStatusSuccessBorder2, #107c10);
}

.course-table .course-table-action {
    text-align: right;
    white-space: nowrap;
}

/* ── First-visit guidance popup ─────────────────────────── */

.picker-intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, 0.35);
}

.picker-intro {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1201;
    width: min(440px, calc(100vw - 32px));
    padding: 24px;
    background: var(--colorNeutralBackground1);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}

.picker-intro h2 {
    margin: 0 0 10px;
    font-size: var(--fontSizeBase500);
    color: var(--colorNeutralForeground1);
}

.picker-intro p {
    margin: 0 0 18px;
    color: var(--colorNeutralForeground2);
    line-height: 1.5;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 4px 0 12px;
    font-size: var(--fontSizeBase300);
    color: var(--colorNeutralForeground2);
}

.link-button {
    border: 0;
    background: transparent;
    color: var(--colorBrandForegroundLink);
    cursor: pointer;
    font-size: var(--fontSizeBase300);
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.link-button:hover {
    color: var(--colorBrandForegroundLinkHover, var(--colorBrandForeground1));
}

/* ── Subject area grid ──────────────────────────────────── */

.subject-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 8px;
}

/* Subject cards extend .tile .linkable — base styles come from app.css.
   We override padding, height, and add the icon-circle treatment. */
.subject-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 14px;
    cursor: pointer;
    text-align: left;
    /* Reset button defaults */
    font-family: inherit;
    font-size: inherit;
    background: var(--colorNeutralBackground1);
    height: auto;
}

/* Signature element: icon in a soft accent circle */
.subject-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--colorBrandBackground2);
    flex-shrink: 0;
    transition: background .15s ease;
}

.subject-card:not(.has-accent):hover .subject-icon-wrap {
    background: var(--colorBrandBackground);
    --subject-icon-color: var(--colorNeutralForegroundOnBrand);
}

/* Subject areas with their own accent colour (SubjectArea.ColorHex): the
   card carries the colour as an edge stripe and a solid icon badge. The
   glyph uses black or white according to the accent luminance for contrast. */
.subject-card.has-accent {
    border-left: 4px solid var(--subject-accent);
}

.subject-card.has-accent .subject-icon-wrap {
    background: var(--subject-accent);
}

.subject-card.has-accent:hover .subject-icon-wrap {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--subject-accent) 18%, transparent);
}

.subject-name {
    font-size: var(--fontSizeBase300);
    font-weight: var(--fontWeightSemibold);
    color: var(--colorNeutralForeground1);
    line-height: 1.3;
}

.subject-count {
    font-size: var(--fontSizeBase100);
    color: var(--colorNeutralForeground2);
}

/* ── Course result list — grouped by level, compact grid ──
   Results are split into per-level sections; each section is a grid of
   small vertical tiles (~4 across on desktop) rather than full-width rows,
   so a long catalogue scans quickly and echoes the subject-area grid. */

.course-results {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 8px;
}

.course-group-heading {
    margin: 0 0 10px;
    font-size: var(--fontSizeBase400);
    font-weight: var(--fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--colorNeutralForeground3, var(--colorNeutralForeground2));
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}

/* Compact course tile — inherits .tile surface + 12px radius. Award badge
   (qualification type) sits top-left, the name fills the middle so the Add
   controls line up along the bottom of every card in a row. */
.course-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px;
    height: 100%;
    transition: box-shadow .15s ease, border-color .15s ease;
    /* Subtle wash so cards pop against the page. A faint brand tint is the
       fallback; cards whose subject area has an accent colour get a tint of
       their own via .has-accent below. */
    background-image: linear-gradient(160deg,
        color-mix(in srgb, var(--colorBrandBackground) 5%, transparent) 0%,
        transparent 60%);
}

.course-card:hover {
    box-shadow: var(--shadow4);
    border-color: var(--colorBrandStroke1);
}

/* Subject-area accent (staff-set #RRGGBB): a gentle diagonal tint plus a
   coloured top edge, echoing the subject cards' accent treatment. */
.course-card.has-accent {
    background-image: linear-gradient(160deg,
        color-mix(in srgb, var(--subject-accent) 14%, transparent) 0%,
        color-mix(in srgb, var(--subject-accent) 4%, transparent) 45%,
        transparent 75%);
    border-top: 3px solid color-mix(in srgb, var(--subject-accent) 65%, transparent);
}

/* Selected/added course: an unmistakable green wash so a chosen course reads
   as "in your basket" at a glance. Declared after .has-accent (equal
   specificity) so a selected card that also carries a subject accent still
   goes green — selection must never be ambiguous. */
.course-card.is-selected {
    border-color: var(--colorStatusSuccessBorder2, #107c10);
    background-image: linear-gradient(160deg,
        color-mix(in srgb, var(--colorStatusSuccessBackground2, #9fd89f) 55%, transparent) 0%,
        color-mix(in srgb, var(--colorStatusSuccessBackground1, #f1faf1) 45%, transparent) 45%,
        transparent 82%);
}

/* Award badge = qualification type, top-left classifier */
.course-award {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--fontWeightSemibold);
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--colorNeutralBackground4, #e8e8e8);
    color: var(--colorNeutralForeground3, var(--colorNeutralForeground2));
    white-space: nowrap;
}

.course-card-name {
    font-size: var(--fontSizeBase300);
    font-weight: var(--fontWeightSemibold);
    color: var(--colorNeutralForeground1);
    line-height: 1.3;
    flex: 1 1 auto;
}

.course-add {
    align-self: stretch;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--colorBrandBackground);
    border-radius: var(--borderRadiusMedium);
    background: var(--colorBrandBackground);
    color: var(--colorNeutralForegroundOnBrand, #fff);
    cursor: pointer;
    white-space: nowrap;
    font-size: var(--fontSizeBase200);
    font-weight: var(--fontWeightSemibold);
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.course-add.is-selected {
    background: var(--colorStatusSuccessBackground1, #f1faf1);
    border-color: var(--colorStatusSuccessBorder2, #107c10);
    color: var(--colorStatusSuccessForeground1, #0e700e);
}

.course-add:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.course-empty {
    color: var(--colorNeutralForeground2);
    padding: 24px 0;
    text-align: center;
}

/* ── Selection bar (sticky, pinned to bottom) ───────────── */

.selection-bar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin-top: 24px;
    padding: 14px 20px;
    background: var(--colorNeutralBackground1);
    border-top: 2px solid var(--colorBrandStroke1);
    box-shadow: var(--shadow8);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.selection-count {
    font-size: var(--fontSizeBase200);
    font-weight: var(--fontWeightSemibold);
    color: var(--colorNeutralForeground1);
    white-space: nowrap;
}

.selection-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 auto;
}

.selection-empty {
    color: var(--colorNeutralForeground2);
    font-size: var(--fontSizeBase200);
}

.selection-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--colorBrandBackground2);
    color: var(--colorBrandForeground1);
    font-size: var(--fontSizeBase200);
    font-weight: var(--fontWeightSemibold);
}

.chip-remove {
    border: 0;
    background: transparent;
    color: var(--colorNeutralForeground3, var(--colorNeutralForeground2));
    cursor: pointer;
    font-size: 11px;
    padding: 0;
    line-height: 1;
    transition: color .1s ease;
}

.chip-remove:hover {
    color: var(--colorBrandForeground1);
}

/* Touch pointers need a ≥44px target even though the ✕ glyph is small. */
@media (pointer: coarse) {
    .chip-remove {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 600px) {
    .subject-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }

    .course-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

@media (max-width: 480px) {
    .selection-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .subject-card,
    .subject-icon-wrap,
    .course-add,
    .course-search-input,
    .course-search-filter {
        transition: none;
    }
}

/* Course chooser mobile rework: drop the pinned basket; use the step strip
   badge + an on-demand sheet instead. */
@media (max-width: 768px) {
    .selection-bar { display: none; }
}

@media (max-width: 768px) {
    .choices-sheet-overlay {
        position: fixed;
        inset: 0;
        z-index: 1150;
        background: rgba(0, 0, 0, 0.35);
    }

    .choices-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1151;
        max-height: 60vh;
        overflow-y: auto;
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        background: var(--colorNeutralBackground1);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
    }

    .choices-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
    }

    .choices-sheet-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 10px 0;
        border-bottom: 1px solid var(--colorNeutralStroke2);
    }

    /* Close = a clear labelled action, visually unlike the per-row remove ✕
       directly beneath it (avoids accidental course removal). */
    .choices-sheet-close {
        border: 0;
        background: transparent;
        color: var(--colorBrandForeground1);
        font-weight: 600;
        font-size: var(--fontSizeBase300);
        cursor: pointer;
        padding: 4px 6px;
    }

    /* Remove = destructive tint + bigger tap target, distinct from Close. */
    .choices-sheet-remove,
    .choices-sheet-remove:hover {
        color: var(--colorStatusDangerForeground1, #b10e1c);
    }

    .choices-sheet-remove {
        font-size: 15px;
        padding: 6px 8px;
    }
}