/*
 * SDFAS theme. Colors from sdfas.org (purple text, pink/orange/blue of the logo); text colors are
 * darkened where needed for WCAG AA contrast. Font: Figtree (SIL OFL, self-hosted: the CSP allows
 * no external font), close to the school's "Fort".
 */
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-display: swap;
    font-weight: 300 900;
    src: url("../fonts/figtree-latin-wght-normal-Dj9csJy.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-display: swap;
    font-weight: 300 900;
    src: url("../fonts/figtree-latin-ext-wght-normal-iZEjIKs.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --sdfas-purple: #5b4c7d;
    --sdfas-purple-dark: #463a63;
    --sdfas-purple-soft: #efecf6;
    --sdfas-pink: #e9506e;
    --sdfas-orange: #ee7f4b;
    --sdfas-blue: #0091ce;
    --sdfas-blue-text: #00739f;
    --sdfas-teal: #00abc2;
    --sdfas-gradient: linear-gradient(90deg, var(--sdfas-blue) 0%, var(--sdfas-purple) 40%, var(--sdfas-pink) 72%, var(--sdfas-orange) 100%);

    --na-brand: var(--sdfas-purple);
    --na-accent: var(--sdfas-pink);
    --na-ink: #2b2540;
    --na-muted: #6b6385;
    --na-bg: #f6f5f9;
    --na-shadow: 0 1px 2px rgba(43, 37, 64, .05), 0 2px 8px rgba(43, 37, 64, .04);

    --bs-body-font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-body-color: var(--na-ink);
    --bs-body-color-rgb: 43, 37, 64;
    --bs-body-bg: var(--na-bg);
    --bs-secondary-color: var(--na-muted);
    --bs-emphasis-color: var(--na-ink);
    --bs-link-color: var(--sdfas-blue-text);
    --bs-link-color-rgb: 0, 115, 159;
    --bs-link-hover-color: var(--sdfas-purple);
    --bs-link-hover-color-rgb: 91, 76, 125;
    --bs-primary: var(--sdfas-purple);
    --bs-primary-rgb: 91, 76, 125;
    --bs-border-color: #e3e0ea;
    --bs-border-radius: .5rem;
    --bs-border-radius-lg: .75rem;
}

body {
    background: var(--na-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

main {
    flex: 1;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
    font-weight: 700;
    letter-spacing: -.01em;
}

h1 {
    color: var(--sdfas-purple);
}

/* ---- Header -------------------------------------------------------------------------------- */
.na-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    box-shadow: 0 4px 18px rgba(43, 37, 64, .06);
}

.na-navbar {
    --bs-navbar-nav-link-padding-x: .85rem;
    padding: .5rem 0;
}

.na-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: var(--sdfas-purple);
    margin-right: 1.5rem;
}

.na-brand:hover,
.na-brand:focus {
    color: var(--sdfas-purple-dark);
}

.na-brand img {
    height: 36px;
    width: auto;
}

.na-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.na-brand-name {
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -.01em;
}

.na-brand-school {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--na-muted);
}

.na-nav .nav-link {
    position: relative;
    color: var(--na-ink);
    font-weight: 600;
    padding: .5rem .85rem;
    border-radius: 999px;
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}

.na-nav .nav-link:hover,
.na-nav .nav-link:focus-visible,
.na-nav .nav-link.show {
    color: var(--sdfas-purple);
    background: var(--sdfas-purple-soft);
}

.na-nav .nav-link.active {
    color: var(--sdfas-purple);
    background: var(--sdfas-purple-soft);
}

/* Current section: a short pink bar under the label. */
.na-nav .nav-link.active::before {
    content: "";
    position: absolute;
    left: .85rem;
    right: .85rem;
    bottom: .2rem;
    height: 3px;
    border-radius: 3px;
    background: var(--sdfas-pink);
}

.na-lang {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: #faf9fc;
}

.na-lang a {
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    color: var(--na-muted);
    text-decoration: none;
}

.na-lang a:hover {
    color: var(--sdfas-purple);
}

.na-lang a.active {
    background: var(--sdfas-purple);
    color: #fff;
}

.na-user {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .2rem .5rem .2rem .2rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--na-ink);
    font-weight: 600;
    white-space: nowrap;
}

.na-user:hover,
.na-user[aria-expanded="true"] {
    background: var(--sdfas-purple-soft);
}

.na-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    font-size: .8rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--sdfas-blue), var(--sdfas-purple));
}

.na-acting {
    background: var(--sdfas-orange);
    color: var(--na-ink);
}

.na-user-menu {
    min-width: 17rem;
}

.na-stripe {
    height: 4px;
    background: var(--sdfas-gradient);
}

@media (max-width: 1199.98px) {
    .na-nav {
        margin: .5rem 0;
    }

    .na-tools {
        padding: .5rem 0 .25rem;
        border-top: 1px solid var(--bs-border-color);
    }
}

@media (max-width: 575.98px) {
    .na-brand-school {
        display: none;
    }
}

/* ---- Footer -------------------------------------------------------------------------------- */
.na-footer {
    position: relative;
    padding: 1rem 0;
    background: #fff;
    font-size: .85rem;
    color: var(--na-muted);
}

.na-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--sdfas-gradient);
}

/* ---- Bootstrap components in the school's colors ------------------------------------------ */
.btn {
    font-weight: 600;
    border-radius: .55rem;
}

.btn-primary {
    --bs-btn-bg: var(--sdfas-purple);
    --bs-btn-border-color: var(--sdfas-purple);
    --bs-btn-hover-bg: var(--sdfas-purple-dark);
    --bs-btn-hover-border-color: var(--sdfas-purple-dark);
    --bs-btn-active-bg: #3b3054;
    --bs-btn-active-border-color: #3b3054;
    --bs-btn-disabled-bg: var(--sdfas-purple);
    --bs-btn-disabled-border-color: var(--sdfas-purple);
}

.btn-outline-primary {
    --bs-btn-color: var(--sdfas-purple);
    --bs-btn-border-color: var(--sdfas-purple);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sdfas-purple);
    --bs-btn-hover-border-color: var(--sdfas-purple);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sdfas-purple-dark);
    --bs-btn-active-border-color: var(--sdfas-purple-dark);
    --bs-btn-disabled-color: var(--sdfas-purple);
    --bs-btn-disabled-border-color: var(--sdfas-purple);
}

.btn-outline-secondary {
    --bs-btn-color: #4a4460;
    --bs-btn-border-color: #cfcadb;
    --bs-btn-hover-color: var(--sdfas-purple);
    --bs-btn-hover-bg: var(--sdfas-purple-soft);
    --bs-btn-hover-border-color: #b9b1cc;
    --bs-btn-active-color: var(--sdfas-purple);
    --bs-btn-active-bg: #e4dff0;
    --bs-btn-active-border-color: #b9b1cc;
}

/* Bootstrap's cyan / yellow outlines are hard to read on white: school teal and orange, darkened. */
.btn-outline-info {
    --bs-btn-color: #00737f;
    --bs-btn-border-color: var(--sdfas-teal);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #00737f;
    --bs-btn-hover-border-color: #00737f;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #005f69;
    --bs-btn-active-border-color: #005f69;
}

.btn-outline-warning {
    --bs-btn-color: #a8471a;
    --bs-btn-border-color: var(--sdfas-orange);
    --bs-btn-hover-color: var(--na-ink);
    --bs-btn-hover-bg: var(--sdfas-orange);
    --bs-btn-hover-border-color: var(--sdfas-orange);
    --bs-btn-active-color: var(--na-ink);
    --bs-btn-active-bg: #e06d37;
    --bs-btn-active-border-color: #e06d37;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #a99cc8;
    box-shadow: 0 0 0 .2rem rgba(91, 76, 125, .2);
}

.form-check-input:checked {
    background-color: var(--sdfas-purple);
    border-color: var(--sdfas-purple);
}

.form-label {
    font-weight: 600;
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--sdfas-purple);
    --bs-dropdown-link-hover-bg: var(--sdfas-purple-soft);
    --bs-dropdown-border-color: var(--bs-border-color);
    padding: .4rem;
    border-radius: .75rem;
    box-shadow: 0 12px 32px rgba(43, 37, 64, .14);
}

.dropdown-item {
    border-radius: .45rem;
    padding: .45rem .75rem;
}

.dropdown-header {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.card {
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-border-radius: .75rem;
    --bs-card-inner-border-radius: calc(.75rem - 1px);
    box-shadow: var(--na-shadow);
}

a.card {
    transition: transform .15s, box-shadow .15s;
}

a.card:hover,
a.card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(43, 37, 64, .12);
}

.list-group {
    --bs-list-group-border-color: var(--bs-border-color);
    --bs-list-group-active-bg: var(--sdfas-purple);
    --bs-list-group-active-border-color: var(--sdfas-purple);
    box-shadow: var(--na-shadow);
}

.table-responsive.bg-white {
    border-color: var(--bs-border-color) !important;
    border-radius: .75rem !important;
    box-shadow: var(--na-shadow);
}

.table > thead th {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--na-muted);
}

.nav-tabs .nav-link.active {
    color: var(--sdfas-purple);
    font-weight: 600;
    border-top: 3px solid var(--sdfas-pink);
}

.progress {
    --bs-progress-bar-bg: var(--sdfas-purple);
}

.breadcrumb {
    --bs-breadcrumb-divider-color: #b0a8c6;
}

.alert {
    border-radius: .75rem;
}

/* Visible keyboard focus (WCAG 2.4.7), dark blue for contrast on white and on the purple. */
:focus-visible {
    outline: 3px solid var(--sdfas-blue-text);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    left: -9999px;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
    z-index: 2000;
    background: #fff;
    padding: .5rem 1rem;
    border-radius: .5rem;
    box-shadow: 0 4px 16px rgba(43, 37, 64, .2);
}

.login-card {
    max-width: 26rem;
}

.audit-detail {
    font-family: var(--bs-font-monospace);
    font-size: .8rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 32rem;
}

.form-card {
    max-width: 44rem;
}

.color-dot {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    vertical-align: baseline;
    border: 1px solid rgba(0, 0, 0, .2);
}

/* Subject chip: tinted background, dark text, so contrast does not depend on the subject color. */
.subject-badge {
    background: color-mix(in srgb, var(--subject-color) 18%, white);
    border: 1px solid var(--subject-color);
    color: #212529;
    font-weight: 600;
}

.cycle-badge { color: #fff; }
.cycle-badge.cycle-1 { background: #8e24aa; }
.cycle-badge.cycle-2 { background: #1565c0; }
.cycle-badge.cycle-3 { background: #2e7d32; }
.cycle-badge.cycle-4 { background: #bf360c; }

.calendar-kind { color: #fff; }
.calendar-kind.kind-holiday { background: #c8102e; }
.calendar-kind.kind-break { background: #6a1b9a; }
.calendar-kind.kind-staff_day { background: #455a64; }
.calendar-kind.kind-early_release { background: #8d6e00; }
.calendar-kind.kind-event { background: var(--sdfas-purple); }

.import-format dd {
    margin-bottom: .5rem;
}

/* Standards tree (nested <details>, no JavaScript). */
.std-tree {
    margin: 0;
    padding-left: 1.1rem;
}

.std-tree > li {
    margin: .15rem 0;
}

.std-tree summary {
    cursor: pointer;
}

.std-leaf {
    padding-left: 1rem;
}

.std-level {
    display: inline-block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #5c636a;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    padding: 0 .3rem;
    margin-right: .25rem;
    vertical-align: middle;
}

/* Ancestors kept only to give context to a grade filter. */
.std-context {
    color: #5c636a;
}

.std-statement {
    font-size: 1.1rem;
    border-left: 4px solid var(--na-brand);
    padding: .5rem 1rem;
    background: #fff;
}

.std-diff del {
    background: #fde2e1;
    color: #842029;
}

.std-diff ins {
    background: #d1e7dd;
    color: #0f5132;
    text-decoration: none;
}
/* Curriculum: units and lessons. */
.unit-card,
.unit-header {
    border-left: 6px solid var(--unit-color, var(--na-brand));
}

.unit-header:not(.card) {
    padding-left: .75rem;
}

/* Sections of the unit and lesson pages: one card each, titled header, flush lists. */
.na-section > .card-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    background: var(--sdfas-purple-soft);
    padding: .6rem 1rem;
}

.na-section > .card-header h2 {
    font-size: 1.05rem;
    margin: 0;
}

.na-section-count {
    display: inline-block;
    min-width: 1.6em;
    padding: 0 .4em;
    margin-left: .25rem;
    border-radius: 1em;
    background: #fff;
    border: 1px solid var(--bs-border-color);
    color: var(--na-muted);
    font-size: .8rem;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
}

.na-section .list-group {
    box-shadow: none;
}

/* Fields of a unit or lesson: one soft-tinted block each, colour taken from its template position. */
.content-fields {
    display: grid;
    gap: .85rem;
}

.content-field {
    --field-accent: var(--sdfas-purple);
    --field-tint: #f3f1f8;
    --field-ink: #4a3d68;
    background: var(--field-tint);
    border: 1px solid color-mix(in srgb, var(--field-accent) 18%, transparent);
    border-left: 4px solid var(--field-accent);
    border-radius: var(--bs-border-radius-lg);
    padding: .8rem 1rem .9rem;
}

.content-field--0 { --field-accent: var(--sdfas-blue);   --field-tint: #eef7fc; --field-ink: #00648c; }
.content-field--1 { --field-accent: var(--sdfas-purple); --field-tint: #f3f1f8; --field-ink: #4a3d68; }
.content-field--2 { --field-accent: var(--sdfas-pink);   --field-tint: #fdf1f4; --field-ink: #ad2446; }
.content-field--3 { --field-accent: var(--sdfas-orange); --field-tint: #fef4ee; --field-ink: #a04619; }
.content-field--4 { --field-accent: var(--sdfas-teal);   --field-tint: #ecf9fb; --field-ink: #006b79; }
.content-field--5 { --field-accent: #3c9a5f;             --field-tint: #eff8f2; --field-ink: #2b6d44; }

.content-field-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--field-ink, var(--sdfas-purple));
    margin-bottom: .5rem;
}

.content-field-label::before {
    content: "";
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--field-accent, var(--sdfas-purple));
}

.content-field-label .badge {
    letter-spacing: normal;
    text-transform: none;
}

.content-field .rich-content table {
    background: #fff;
}

@media print {
    .content-field {
        break-inside: avoid;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

.rich-content table,
.rich-editor table {
    border-collapse: collapse;
    margin: .5rem 0;
}

.rich-content th,
.rich-content td,
.rich-editor th,
.rich-editor td {
    border: 1px solid #ced4da;
    padding: .25rem .5rem;
    vertical-align: top;
}

.rich-content img,
.rich-editor img {
    max-width: 100%;
    height: auto;
}

.rich-content > :last-child {
    margin-bottom: 0;
}

.rich-editor {
    min-height: 7rem;
    height: auto;
}

.rich-editor .ProseMirror {
    outline: none;
    min-height: 6rem;
}

.rich-editor .ProseMirror > :last-child {
    margin-bottom: 0;
}

.rich-editor:focus-within {
    border-color: #a99cc8;
    box-shadow: 0 0 0 .2rem rgba(91, 76, 125, .2);
}

.rich-toolbar .btn.active {
    background: var(--na-brand);
    color: #fff;
}

/* A public field ends up in the parents' view (step 6). */
.rich-field-public > label::after {
    content: " ●";
    color: #198754;
}
/* Dashboard ("what do we teach when"). */
.unit-chip {
    display: inline-block;
    font-size: .8rem;
    padding: .1rem .5rem;
    margin: .1rem 0;
    border-radius: 1rem;
    border-left: 5px solid var(--unit-color);
    background: color-mix(in srgb, var(--unit-color) 12%, white);
    color: #212529;
    text-decoration: none;
}

.lesson-slot {
    border-left: 4px solid var(--unit-color);
    padding: .25rem .5rem;
    background: color-mix(in srgb, var(--unit-color) 8%, white);
    color: #212529;
    text-decoration: none;
    border-radius: .25rem;
}

.lesson-slot:hover,
.unit-chip:hover {
    background: color-mix(in srgb, var(--unit-color) 20%, white);
}

.day-off,
.day-off .card-header {
    background: repeating-linear-gradient(45deg, #f1f3f5, #f1f3f5 6px, #e9ecef 6px, #e9ecef 12px);
}

@media print {
    .na-navbar, footer, form, .btn, .breadcrumb { display: none !important; }
    .week-grid > .col { flex: 0 0 20%; max-width: 20%; }
}
/* Parents' public view: year timeline. */
.timeline {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    padding: .5rem .75rem;
}

.timeline-scale {
    position: relative;
    height: 1.2rem;
    margin-left: 4.5rem;
    font-size: .7rem;
    color: #5c636a;
    text-transform: capitalize;
}

.timeline-month {
    position: absolute;
    top: 0;
    border-left: 1px solid #ced4da;
    padding-left: .2rem;
}

.timeline-row {
    display: flex;
    align-items: center;
    margin: .25rem 0;
}

.timeline-label {
    width: 4.5rem;
    flex: 0 0 4.5rem;
    font-size: .8rem;
    font-weight: 600;
}

.timeline-track {
    position: relative;
    flex: 1;
    height: 1.4rem;
    background: #f8f9fa;
    border-radius: .25rem;
}

.timeline-bar {
    position: absolute;
    top: .15rem;
    bottom: .15rem;
    background: var(--unit-color);
    border-radius: .2rem;
    opacity: .85;
}

a.timeline-bar:hover,
a.timeline-bar:focus-visible {
    opacity: 1;
}

.timeline-break {
    position: absolute;
    top: 0;
    bottom: 0;
    background: repeating-linear-gradient(45deg, #dee2e6, #dee2e6 3px, transparent 3px, transparent 6px);
}

.timeline-today {
    position: absolute;
    top: -.2rem;
    bottom: -.2rem;
    width: 2px;
    background: #c8102e;
}

/*
 * Planning calendar (internal): one card per grade, one row per unit — its name in a fixed column
 * on the left (sticky when scrolling sideways), its bar on the year axis on the right.
 */
.planning-block > .card-header {
    background: var(--sdfas-purple-soft);
    padding: .6rem 1rem;
}

.planning-block > .card-header h2 {
    font-size: 1.1rem;
    margin: 0;
}

.planning-scroll {
    overflow-x: auto;
}

.planning-grid {
    --planning-name-width: 17rem;
    min-width: 62rem;
    padding: .25rem 0 .5rem;
}

.planning-row {
    display: flex;
    align-items: stretch;
}

.planning-row:not(.planning-scale-row):not(.planning-subject-row):hover {
    background: #faf9fc;
}

.planning-name {
    position: sticky;
    left: 0;
    z-index: 4;
    flex: 0 0 var(--planning-name-width);
    width: var(--planning-name-width);
    padding: .3rem .75rem .3rem 1rem;
    background: #fff;
    border-right: 1px solid var(--bs-border-color);
    font-size: .9rem;
    line-height: 1.25;
}

.planning-row:hover .planning-name {
    background: #faf9fc;
}

.planning-name a {
    color: var(--na-ink);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.planning-name a:hover {
    color: var(--sdfas-blue-text);
    text-decoration: underline;
}

.planning-scale {
    position: relative;
    flex: 1;
    height: 1.6rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--na-muted);
    text-transform: capitalize;
}

.planning-scale .timeline-month {
    top: .3rem;
}

.planning-subject-row .planning-name {
    padding-top: .7rem;
    padding-bottom: .2rem;
}

.planning-track-spacer {
    flex: 1;
}

.planning-subject {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .1rem .5rem;
    border-left: 4px solid var(--unit-color);
    background: #f1f3f5;
    border-radius: .25rem;
}

.timeline-track.planning-track {
    flex: 1;
    height: auto;
    min-height: 2rem;
    background: transparent;
    border-radius: 0;
}

.planning-gridline {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px solid #ecebf1;
}

.planning-bar {
    top: 50%;
    bottom: auto;
    height: 1.25rem;
    min-width: 6px;
    transform: translateY(-50%);
    border-radius: .4rem;
    box-shadow: 0 1px 2px rgba(43, 37, 64, .15);
    text-decoration: none;
    opacity: .9;
}

.planning-bar:hover,
.planning-bar:focus-visible {
    opacity: 1;
    color: #fff;
    outline: 2px solid #212529;
    outline-offset: 1px;
    z-index: 2;
}

@media (pointer: fine) {
    .planning-bar.is-editable {
        cursor: grab;
        touch-action: none;
        /* Edges: change only the start or end date. */
        border-left: 4px solid rgba(0, 0, 0, .25);
        border-right: 4px solid rgba(0, 0, 0, .25);
    }
}

.planning-bar.is-dragging {
    cursor: grabbing;
    opacity: .7;
    z-index: 3;
}

.planning-bar.is-busy {
    opacity: .5;
}
/* Reports: keyword search bar chart (one bar per grade / subject, value written next to it). */
.report-bar {
    height: .8rem;
    min-width: 2px;
    background: linear-gradient(90deg, var(--sdfas-blue), var(--sdfas-purple));
    border-radius: .2rem;
}

.goals-matrix th[scope="row"] {
    min-width: 18rem;
}

/* Coverage gap list: quick link to a unit (coverage_link_controller). */
.coverage-link-dialog {
    width: min(32rem, calc(100vw - 2rem));
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    padding: 1.25rem;
    box-shadow: 0 10px 30px rgba(43, 37, 64, .2);
}

.coverage-link-dialog::backdrop {
    background: rgba(43, 37, 64, .35);
}

.coverage-gap.is-linked {
    background: #eff8f2;
}

.coverage-gap.is-linked > div > a {
    color: var(--na-muted);
}

.coverage-gap.is-linked-unplaced {
    background: #fef8ec;
}

.coverage-gap-result:empty {
    display: none;
}

/* Quick assignment (school/quick_assign): long lists scroll inside their column. */
.quick-assign-list { max-height: 26rem; overflow-y: auto; }

/* ------------------------------------------------------------------ Nexus */

.nx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .75rem; }
.nx-tile {
    display: flex; flex-direction: column; gap: .25rem; padding: .9rem 1rem; border-radius: .6rem;
    border: 1px solid var(--bs-border-color); background: #fff; color: inherit; text-decoration: none;
    border-left: .35rem solid var(--sdfas-purple);
}
.nx-tile:hover, .nx-tile:focus-visible { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08); }
.nx-tile-name { font-weight: 600; }
.nx-tile-text { font-size: .85rem; color: var(--bs-secondary-color); }
.nx-tile-note { font-size: .75rem; color: var(--bs-secondary-color); font-style: italic; }
.nx-tile-compass { border-left-color: #1565c0; }
.nx-tile-cerebro { border-left-color: #6a1b9a; }

.nx-widgets { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.nx-widget { grid-column: span 12; }
@media (min-width: 768px) {
    .nx-size-small { grid-column: span 6; }
    .nx-size-medium { grid-column: span 6; }
}
@media (min-width: 1200px) {
    .nx-size-small { grid-column: span 3; }
    .nx-size-medium { grid-column: span 4; }
    .nx-size-large { grid-column: span 8; }
}

.nx-notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
.nx-note { border-radius: .5rem; padding: .6rem; box-shadow: 0 .15rem .4rem rgba(0, 0, 0, .1); cursor: grab; }
.nx-note.nx-dragging { opacity: .5; }
.nx-note-text { width: 100%; border: 0; background: transparent; resize: vertical; font-size: .95rem; color: #1f1f1f; }
.nx-note-text:focus { outline: 2px solid rgba(0, 0, 0, .25); border-radius: .25rem; }
.nx-note-yellow { background: #fff6b3; }
.nx-note-pink { background: #ffd6e7; }
.nx-note-blue { background: #d4e8ff; }
.nx-note-green { background: #d7f5d9; }
.nx-note-orange { background: #ffe0c2; }
.nx-note-purple { background: #e6dcf7; }
.nx-dot { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .3); padding: 0; }
.nx-dot.active { outline: 2px solid #333; outline-offset: 1px; }

/* My timetable: the week grid (one column per day, rows of time; a slot spans its rows). */
.nx-grid { table-layout: fixed; min-width: 44rem; background: #fff; }
.nx-grid th, .nx-grid td { border: 1px solid var(--bs-border-color); vertical-align: top; padding: .35rem .45rem; }
.nx-grid thead th { background: var(--bs-tertiary-bg); text-align: center; }
.nx-grid .nx-time { width: 6.5rem; white-space: nowrap; font-size: .8rem; color: var(--bs-secondary-color); font-weight: normal; }
.nx-grid td.nx-slot { background: #f3f0fa; border-left: 4px solid var(--sdfas-purple); }
.nx-grid td.nx-activity { background: #fbfaf6; border-left: 4px solid #c9b98b; }
.nx-grid td.nx-today { box-shadow: inset 0 0 0 2px rgba(91, 76, 125, .25); }
.nx-grid th.nx-today { color: var(--sdfas-purple); }
.nx-slot-class { font-weight: 600; }
.nx-slot-meta { font-size: .8rem; color: var(--bs-secondary-color); }
.nx-day-list { list-style: none; padding: 0; margin: 0; }
.nx-day-list li { display: flex; gap: .75rem; padding: .3rem 0; border-bottom: 1px solid var(--bs-border-color); }
.nx-day-list li:last-child { border-bottom: 0; }
.nx-day-list .nx-time { min-width: 6.5rem; font-size: .85rem; color: var(--bs-secondary-color); }
.nx-day-list li.nx-now { font-weight: 600; }
/* Nurse: multi-line texts (comment, care). */
.pre-line {
    white-space: pre-line;
}