/* =====================================================================
   CSI.CareerTrack.Client — design pass (Corey, 2026-10-08)

   Styles for the pages the design pass rebuilt on CSI.UI parts: My courses,
   Students, the student page, Sections, the section page, Grading and
   Settings. Kept apart from app.css so the course page redesign, which edits
   app.css, and this pass never touch the same lines.

   Same rule as app.css: every colour is a CSI.UI token that is actually
   declared (tokens/, themes/). Grep before adding one.
   ==================================================================== */

/* ── Page rhythm ───────────────────────────────────────────────────── */

.ct-stack { display: flex; flex-direction: column; gap: var(--csi-space-lg); }
.ct-stack-sm { display: flex; flex-direction: column; gap: var(--csi-space-sm); }
.ct-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--csi-space-sm); }
.ct-row-end { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--csi-space-md); }
.ct-small { font-size: 0.8125rem; }

/* ── Buttons that are not CsiButton ────────────────────────────────
   CsiButton's styles are scoped CSS, so they reach only the component's own
   <button>. A link that should look like a button (Open in Canvas,
   SpeedGrader, Contact Career Services) and the few raw buttons the tests
   find by class carry the same classes; this is the same rule set, copied
   from CsiButton.razor.css, unscoped. Keep it in step with that file. */

.csi-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--csi-space-2);
    min-height: var(--csi-touch-target);
    padding: 0 var(--csi-space-4);
    border: 1px solid transparent;
    border-radius: var(--csi-radius-md);
    font-family: inherit;
    font-size: var(--csi-text-base);
    font-weight: var(--csi-weight-semibold);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}
.csi-button:focus-visible { outline: none; box-shadow: var(--csi-focus-ring); }
.csi-button--primary { background: var(--csi-action-primary); color: var(--csi-action-primary-fg); }
.csi-button--primary:not(:disabled):hover {
    background: var(--csi-action-primary-hover);
    color: var(--csi-action-primary-hover-fg, var(--csi-action-primary-fg));
}
.csi-button--secondary {
    background: var(--csi-action-secondary);
    color: var(--csi-action-secondary-fg);
    border-color: var(--csi-action-secondary-border);
}
.csi-button--secondary:not(:disabled):hover { background: var(--csi-action-secondary-hover); }
.csi-button--sm { min-height: 32px; padding: 0 var(--csi-space-3); font-size: var(--csi-text-sm); }
.csi-button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── People: a name, a role tag, linked to the directory ───────────── */

.ct-people { display: flex; flex-direction: column; gap: 2px; }
.ct-people-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem; }
.ct-people-role { font-size: 0.75rem; color: var(--csi-fg-muted); }
.ct-person-link:focus-visible {
    outline: 2px solid var(--csi-color-brand-500);
    outline-offset: 1px;
}

/* ── Fact cards under a page header (section page, student page) ───── */

.ct-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--csi-space-md);
}

.ct-fact {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
    padding: var(--csi-space-md) var(--csi-space-lg);
    background: var(--csi-bg-raised);
    border: 1px solid var(--csi-border-subtle);
    border-radius: var(--csi-radius-lg);
}

.ct-fact-label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--csi-fg-muted);
}

.ct-fact-value { margin: 0; font-size: 1.375rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ct-fact-value small { font-size: 0.8125rem; font-weight: 400; color: var(--csi-fg-secondary); }
.ct-fact-note { margin: 0; font-size: 0.8125rem; color: var(--csi-fg-muted); }

/* ── Key / value lists inside a card ──────────────────────────────── */

.ct-kv {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--csi-space-sm) var(--csi-space-lg);
    margin: 0;
}

.ct-kv dt { color: var(--csi-fg-muted); font-weight: 600; font-size: 0.875rem; }
.ct-kv dd { margin: 0; }

/* ── Card headings ─────────────────────────────────────────────────── */

.ct-card-title { margin: 0; font-size: 1rem; font-weight: 700; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--csi-space-sm); }
.ct-card-sub { margin: 0.125rem 0 0; font-size: 0.875rem; color: var(--csi-fg-secondary); }
.ct-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--csi-space-md); }

/* ── Small data tables inside cards (a handful of rows, no toolbar) ── */

.ct-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.ct-table th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--csi-border-default);
    color: var(--csi-fg-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.ct-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--csi-border-subtle); vertical-align: top; }
.ct-table tr:last-child td { border-bottom: none; }
.ct-table-wrap { overflow-x: auto; }

/* ── Section page: history timeline ───────────────────────────────── */

.ct-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ct-timeline-row {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr) auto;
    gap: 0.25rem var(--csi-space-md);
    align-items: start;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--csi-border-subtle);
}
.ct-timeline-row:last-child { border-bottom: none; }
.ct-timeline-when { font-size: 0.8125rem; color: var(--csi-fg-muted); }
.ct-timeline-detail { grid-column: 2 / -1; font-size: 0.875rem; padding-left: 0.5rem; border-left: 3px solid var(--csi-color-warning-100); }
.ct-timeline-detail.is-danger { border-left-color: var(--csi-color-danger-100); }

@media (max-width: 640px) {
    .ct-timeline-row { grid-template-columns: minmax(0, 1fr); }
    .ct-timeline-detail { grid-column: 1; }
}

/* ── Section page: the link chooser ───────────────────────────────── */

.ct-linkrow {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 1.4fr);
    gap: 0.25rem var(--csi-space-md);
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--csi-border-subtle);
}
.ct-linkrow:last-child { border-bottom: none; }

/* ── Section page: the student drawer ─────────────────────────────── */

.ct-drawer-body { display: flex; flex-direction: column; gap: var(--csi-space-lg); }
.ct-drawer-section h3 { margin: 0 0 var(--csi-space-sm); font-size: 0.875rem; font-weight: 700; }
.ct-student-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--csi-color-brand-700);
    text-align: left;
    cursor: pointer;
}
.ct-student-button:hover { text-decoration: underline; }
.ct-student-button:focus-visible { outline: 2px solid var(--csi-color-brand-500); outline-offset: 2px; }
.ct-progress-cell { display: inline-flex; align-items: center; gap: 0.5rem; font-variant-numeric: tabular-nums; }

/* ── Grading: activities beside the queue, the form beside both ────── */

.ct-grading {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 1fr);
    gap: var(--csi-space-lg);
    align-items: start;
}

.ct-grading-form { position: sticky; top: var(--csi-space-lg); }

@media (max-width: 1000px) {
    .ct-grading { grid-template-columns: minmax(0, 1fr); }
    .ct-grading-form { position: static; }
}

.ct-activities { display: flex; flex-direction: column; gap: 0.375rem; }
.ct-activity {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--csi-space-sm);
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--csi-border-subtle);
    border-radius: var(--csi-radius-md);
    background: var(--csi-bg-raised);
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.ct-activity:hover { border-color: var(--csi-border-strong); }
.ct-activity[aria-pressed="true"] { border-color: var(--csi-color-brand-500); background: var(--csi-color-brand-50); }
.ct-activity:focus-visible { outline: 2px solid var(--csi-color-brand-500); outline-offset: 1px; }
.ct-activity-name { display: flex; flex-direction: column; min-width: 0; }
.ct-activity-name span { font-size: 0.8125rem; color: var(--csi-fg-muted); }

.ct-ratings { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.ct-rating {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--csi-border-strong);
    border-radius: var(--csi-radius-full);
    background: var(--csi-bg-raised);
    font: inherit;
    font-size: 0.8125rem;
    color: inherit;
    cursor: pointer;
}
.ct-rating[aria-pressed="true"] { border-color: var(--csi-color-brand-500); background: var(--csi-color-brand-50); font-weight: 600; }
.ct-rating:focus-visible { outline: 2px solid var(--csi-color-brand-500); outline-offset: 1px; }

.ct-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: var(--csi-space-sm);
    border-top: 1px solid var(--csi-border-subtle);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ct-selection-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--csi-space-sm);
    padding: 0.5rem 0.75rem;
    border-radius: var(--csi-radius-md);
    background: var(--csi-color-brand-50);
    font-size: 0.875rem;
}

/* ── Settings: student list choices ───────────────────────────────── */

.ct-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--csi-space-md); }
.ct-choice {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--csi-border-strong);
    border-radius: var(--csi-radius-md);
    cursor: pointer;
}
.ct-choice:has(input:checked) { border-color: var(--csi-color-brand-500); background: var(--csi-color-brand-50); }
.ct-choice b { display: block; }
.ct-choice span span { font-size: 0.8125rem; color: var(--csi-fg-muted); }

.ct-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: var(--csi-space-lg);
    border: 2px dashed var(--csi-border-strong);
    border-radius: var(--csi-radius-lg);
    text-align: center;
    color: var(--csi-fg-secondary);
}

.ct-fieldset { border: none; margin: 0; padding: 0; }
.ct-fieldset legend { padding: 0; margin-bottom: var(--csi-space-sm); }
.ct-drop input[type="file"] { max-width: 100%; }