/* ============================================================================
   Academic reference data (#170) — Subjects, and the staff↔subject map.

   Both datasets are ERP-owned and read-only, so there is nothing here that looks
   like an editor. The one idea the styling has to carry is PRIMARY vs ADDITIONAL:
   a teacher's primary subject is the one they normally take, and the activity
   dashboard tells a substitution apart on exactly that. It gets the card; the rest
   get chips.

   Tokens only (--yb-*), light + dark via the existing [data-theme="dark"] overrides.
   ============================================================================ */

/* ── Row flags: retired vs current, shared vs branch ──────────────────────── */
.yb-acad-flag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.14rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--yb-radius-sm);
}

/* Retired is not deleted — the ERP stood it down, and history still points at it.
   Muted, not alarming: it is a fact about the row, not a fault in it. */
.yb-acad-flag.is-retired {
    color: var(--yb-text-muted);
    background: rgba(100, 116, 139, 0.12);
    border-color: rgba(100, 116, 139, 0.3);
}

.yb-acad-flag.is-shared {
    color: var(--yb-brand-600);
    background: rgba(var(--yb-info-rgb), 0.09);
    border-color: rgba(var(--yb-info-rgb), 0.28);
}

.yb-acad-flag.is-branch {
    color: var(--yb-text-muted);
    background: var(--yb-surface-2);
    border-color: var(--yb-border);
}

[data-theme="dark"] .yb-acad-flag.is-shared { color: var(--yb-brand-400); }

.yb-acad-cell {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* A retired subject's name reads as struck-through-but-legible: still there, no longer current. */
.yb-acad-cell__retired {
    color: var(--yb-text-muted);
    text-decoration: line-through;
    text-decoration-color: rgba(100, 116, 139, 0.5);
}

/* ── "Subjects taught" panel (staff detail) ───────────────────────────────── */
/* NB: text-align is reset explicitly. The panel lives inside .center-form-container on the
   staff detail page, which centres its text — and a centred label over left-aligned chips
   reads as a mistake. Opt out here rather than restyling the shared form container. */
.yb-acad-panel {
    margin-top: 1.5rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--yb-border);
    border-radius: var(--yb-radius-sm);
    background: var(--yb-surface);
    text-align: left;
}

.yb-acad-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.yb-acad-panel__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--yb-text);
}

.yb-acad-panel__title i { color: var(--yb-accent); margin-right: 0.35rem; }

.yb-acad-panel__sub {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: var(--yb-text-muted);
}

/* The primary subject. It is the answer to "what does this teacher actually teach?",
   so it is a card and not a row in a table. */
.yb-acad-primary {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(var(--yb-success-rgb), 0.3);
    border-left: 3px solid var(--yb-success);
    border-radius: var(--yb-radius-sm);
    background: rgba(var(--yb-success-rgb), 0.07);
}

.yb-acad-primary__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: none;
    padding: 0.2rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    background: var(--yb-success);
    border-radius: var(--yb-radius-sm);
}

.yb-acad-primary__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.yb-acad-primary__name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--yb-text);
}

.yb-acad-primary__code {
    font-size: 0.76rem;
    font-family: var(--yb-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    color: var(--yb-text-muted);
}

.yb-acad-primary__hint {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--yb-text-muted);
}

/* Everything else they take. Chips, because they are a set, not a ranking. */
.yb-acad-also {
    margin-top: 0.9rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--yb-border);
}

.yb-acad-also__label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--yb-text-muted);
}

.yb-acad-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.yb-acad-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--yb-border);
    border-radius: var(--yb-radius-sm);
    background: var(--yb-surface-2);
}

.yb-acad-chip__name {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--yb-text);
}

.yb-acad-chip__code {
    font-size: 0.72rem;
    font-family: var(--yb-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    color: var(--yb-text-muted);
}

/* ── "Who teaches this" dialog ────────────────────────────────────────────── */
.yb-acad-dialog__body {
    max-height: 55vh;
    padding: 0.25rem 0.1rem 0.5rem;
}

.yb-acad-group + .yb-acad-group {
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--yb-border);
}

.yb-acad-group__title {
    margin: 0 0 0.55rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--yb-text-muted);
}

.yb-acad-group__title strong { color: var(--yb-text); }

.yb-acad-people {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.yb-acad-person {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--yb-border);
    border-radius: var(--yb-radius-sm);
    background: var(--yb-surface-2);
}

.yb-acad-person > i { flex: none; color: var(--yb-text-muted); }

/* The teachers who take it as their own — the ones a substitution is measured against. */
.yb-acad-person.is-primary {
    border-color: rgba(var(--yb-success-rgb), 0.3);
    background: rgba(var(--yb-success-rgb), 0.07);
}

.yb-acad-person.is-primary > i { color: var(--yb-success); }

.yb-acad-person__name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--yb-text);
}

.yb-acad-person__id {
    margin-left: auto;
    font-size: 0.74rem;
    font-family: var(--yb-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    color: var(--yb-text-muted);
}

/* ── Shared states ────────────────────────────────────────────────────────── */
/* .yb-acad-loading removed — StaffSubjectsPanel and SubjectTeachersDialog use YbStateBlock (#233). */

.yb-acad-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.85rem;
    padding: 0.7rem 0.85rem;
    border-radius: var(--yb-radius-sm);
    font-size: 0.83rem;
    line-height: 1.5;
    color: var(--yb-text-muted);
}

.yb-acad-note i { flex: none; margin-top: 0.1rem; }
.yb-acad-note strong { color: var(--yb-text); }

.yb-acad-note.is-error {
    border: 1px solid rgba(var(--yb-danger-rgb), 0.3);
    background: rgba(var(--yb-danger-rgb), 0.07);
}

.yb-acad-note.is-error i { color: var(--yb-danger); }

.yb-acad-note.is-warn {
    border: 1px solid rgba(var(--yb-warning-rgb), 0.32);
    background: rgba(var(--yb-warning-rgb), 0.08);
}

.yb-acad-note.is-warn i { color: var(--yb-warning); }

.yb-acad-note.is-info {
    border: 1px solid rgba(var(--yb-info-rgb), 0.26);
    background: rgba(var(--yb-info-rgb), 0.07);
}

.yb-acad-note.is-info i { color: var(--yb-info); }

/* A failed load is not a dead end — the way out sits inside the error itself. */
.yb-acad-retry {
    margin-left: auto;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--yb-text);
    background: var(--yb-surface);
    border: 1px solid var(--yb-border-strong);
    border-radius: var(--yb-radius-sm);
    cursor: pointer;
}

.yb-acad-retry:hover {
    color: #fff;
    background: var(--yb-brand-600);
    border-color: var(--yb-brand-600);
}

.yb-acad-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    border: 1px dashed var(--yb-border-strong);
    border-radius: var(--yb-radius-sm);
    background: var(--yb-surface-2);
}

.yb-acad-empty > i {
    font-size: 1.5rem;
    color: var(--yb-text-muted);
    opacity: 0.7;
}

.yb-acad-empty__title {
    margin: 0.5rem 0 0.25rem;
    font-weight: 700;
    color: var(--yb-text);
}

.yb-acad-empty__sub {
    margin: 0;
    font-size: 0.83rem;
    line-height: 1.5;
    color: var(--yb-text-muted);
}