/* ---------------------------------------------------------------
   Estrela da Favela design tokens
   Sampled from https://estreladafavela.com/
   --------------------------------------------------------------- */
:root {
    --edf-pink: #e94b93;
    --edf-pink-dark: #d13a80;
    --edf-green: #24b473;
    --edf-green-dark: #1fa568;
    --edf-blue: #1270b7;
    --edf-yellow: #fcee1f;
    --edf-ink: #1e1e1e;
    --edf-body: #222222;
    --edf-muted: #dadada;
    --edf-surface: #ffffff;
    --edf-surface-alt: #f9f9f9;
    --edf-border: #f2f2f2;
    --edf-overlay: rgba(52, 52, 52, 0.6);

    --edf-font-display: 'Outfit', 'Trebuchet MS', sans-serif;
    --edf-font-body: 'Trebuchet MS', sans-serif;
    --edf-radius-pill: 100px;
    --edf-radius: 3px;

    /* Bootstrap overrides so stock components inherit the brand */
    --bs-primary: #e94b93;
    --bs-primary-rgb: 233, 75, 147;
    --bs-body-color: #222222;
    --bs-body-font-family: 'Trebuchet MS', sans-serif;
    --bs-link-color: #1270b7;
    --bs-link-hover-color: #e94b93;
    --bs-border-radius: 3px;
}

html, body {
    font-family: var(--edf-font-body);
    color: var(--edf-body);
    background-color: var(--edf-surface);
}

/* Headings use the display face at the site's heavy weight 800 */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--edf-font-display);
    font-weight: 800;
    line-height: 1.05;
    color: var(--edf-ink);
}

h1 {
    font-size: clamp(2rem, 4vw, 3.05rem);
}

h2 {
    font-size: 1.75rem;
    color: var(--edf-green);
}

h3 {
    font-size: 1.4rem;
}

p, li, td, th, label {
    font-size: 1rem;
    line-height: 1.5;
}

a, .btn-link {
    color: var(--edf-blue);
    text-decoration: none;
}

a:hover, .btn-link:hover {
    color: var(--edf-pink);
    text-decoration: underline;
}

/* Pill buttons: 100px radius, weight 800, 10px 24px padding */
.btn {
    font-family: var(--edf-font-body);
    font-weight: 800;
    font-size: 1rem;
    border-radius: var(--edf-radius-pill);
    padding: 0.625rem 1.5rem;
    border-width: 1px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-primary {
    color: #fff;
    background-color: var(--edf-pink);
    border-color: var(--edf-pink);
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    color: #fff;
    background-color: var(--edf-pink-dark);
    border-color: var(--edf-pink-dark);
}

.btn-secondary {
    color: #fff;
    background-color: var(--edf-green);
    border-color: var(--edf-green);
}

.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
    color: #fff;
    background-color: var(--edf-green-dark);
    border-color: var(--edf-green-dark);
}

/* The site's accent CTA: yellow fill, blue label */
.btn-accent {
    color: var(--edf-blue);
    background-color: var(--edf-yellow);
    border-color: var(--edf-yellow);
}

.btn-accent:hover, .btn-accent:active, .btn-accent:focus {
    color: var(--edf-blue);
    background-color: #f0e21c;
    border-color: #f0e21c;
}

.btn-outline-light-pill {
    color: var(--edf-body);
    background-color: var(--edf-surface-alt);
    border-color: var(--edf-border);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(233, 75, 147, 0.5);
}

.form-control, .form-select {
    border-radius: var(--edf-radius);
    border-color: var(--edf-border);
}

.form-control:focus, .form-select:focus {
    border-color: var(--edf-pink);
}

/* Tables pick up the green heading / soft row treatment */
.table {
    --bs-table-striped-bg: var(--edf-surface-alt);
    border-color: var(--edf-border);
}

.table thead th {
    font-family: var(--edf-font-display);
    font-weight: 800;
    color: #fff;
    background-color: var(--edf-green);
    border-color: var(--edf-green);
    white-space: nowrap;
}

.table tbody td {
    border-color: var(--edf-border);
}

/* Brand section helpers, mirroring the site's full-bleed colour blocks */
.edf-band {
    padding: 2.5rem 2rem;
    border-radius: 0.5rem;
    color: #fff;
}

.edf-band h1, .edf-band h2, .edf-band h3 {
    color: #fff;
}

/* PHONES AND TABLETS: the band folds to its title. Two to four lines of intro
   cost a phone the rows of the list below it, and they are read once. A tap
   opens it - wwwroot/band-toggle.js sets .is-open, and must use the same
   media query. Width alone would miss a tablet in landscape (1366px on an iPad
   Pro), hence the touch clause. The title's wrapper on the detail pages
   (.student-title, .teacher-title) stays, its portrait does not. */
@media (max-width: 1024.98px), (hover: none) and (pointer: coarse) {
    .edf-band {
        position: relative;
        padding: 0.6rem 2.75rem 0.6rem 1.25rem;
        cursor: pointer;
    }

    .edf-band:not(.is-open) > :not(h1, .student-title, .teacher-title),
    .edf-band:not(.is-open) .student-avatar,
    .edf-band:not(.is-open) .teacher-avatar {
        display: none;
    }

    .edf-band:not(.is-open) h1 {
        margin: 0;
    }

    /* Drawn rather than a glyph, like the sidebar's chevrons. */
    .edf-band::after {
        content: '';
        position: absolute;
        top: 1.1rem;
        right: 1.2rem;
        width: 0.55rem;
        height: 0.55rem;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform .15s ease;
    }

    .edf-band.is-open::after {
        transform: translateY(0.25rem) rotate(-135deg);
    }
}

.edf-band--pink { background-color: var(--edf-pink); }
.edf-band--green { background-color: var(--edf-green); }
.edf-band--blue { background-color: var(--edf-blue); }

.edf-band--yellow {
    background-color: var(--edf-yellow);
    color: var(--edf-blue);
}

.edf-band--yellow h1, .edf-band--yellow h2, .edf-band--yellow h3 {
    color: var(--edf-blue);
}

.edf-card {
    background-color: var(--edf-surface);
    border: 1px solid var(--edf-border);
    border-radius: 0.5rem;
    padding: 1.5rem;
}

.edf-eyebrow {
    font-family: var(--edf-font-body);
    font-weight: 800;
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--edf-pink);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--edf-green);
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ==========================================================================
   Shared dialog and row-action styles.

   These already existed, copied into Students/StudentGroups/Teachers
   .razor.css. They live here too so any new page gets them without a fourth
   copy. The scoped versions carry a [b-xxxx] attribute and are therefore more
   specific, so those pages keep behaving exactly as before - this is additive,
   not a rewrite of them.
   ========================================================================== */
.dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(30, 30, 30, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1050;
}

.dialog-card {
    width: 100%;
    max-width: 26rem;
    background: var(--edf-surface, #fff);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.dialog-card h2 {
    margin-top: 0;
}

.dialog-card input,
.dialog-card textarea {
    width: 100%;
    margin-bottom: 0.5rem;
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.add-student-error {
    color: var(--edf-pink-dark, #d13a80);
    font-weight: 700;
    font-size: 0.9rem;
    margin: 0.5rem 0 0;
}

.student-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.btn-edit-student,
.btn-remove-student {
    font-family: 'Trebuchet MS', sans-serif;
    font-weight: 800;
    font-size: 0.8rem;
    border: none;
    border-radius: 100px;
    padding: 0.4rem 0.9rem;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.btn-edit-student {
    color: var(--edf-blue, #1270b7);
    background: #e5f0fa;
}

.btn-edit-student:hover {
    background: var(--edf-blue, #1270b7);
    color: #fff;
}

.btn-remove-student {
    color: var(--edf-pink-dark, #d13a80);
    background: #fde7e4;
}

.btn-remove-student:hover {
    background: var(--edf-pink-dark, #d13a80);
    color: #fff;
}

/* Sortable table headings. Same reasoning as the dialog styles above: these
   already existed scoped to the Students page, and the Ideas table needs them
   too. The scoped copy is more specific, so that page is unaffected. */
.column-sort {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

.column-sort:hover,
.column-sort.is-sorted {
    color: var(--edf-pink, #e94b93);
}

.sort-arrow {
    opacity: 0.45;
    font-size: 0.85em;
}

.column-sort.is-sorted .sort-arrow {
    opacity: 1;
}

/* --- round icon buttons, built for a finger on an iPad --------------------
   Used for add / remove / move in the route builder's two lists. Global
   because two components share them and scoped CSS cannot be shared.

   THE BUTTON IS 44x44, THE CIRCLE INSIDE IT SMALLER. 44 is Apple's minimum
   for a reliable tap; drawing a 44px circle in every table row would be
   heavy, so the visible face is 34px and the rest is invisible tap area.
   touch-action: manipulation stops iOS waiting to see whether a tap is the
   start of a double-tap zoom. Hover colours only where a real pointer can
   hover - on iOS :hover sticks after a tap and leaves the button looking
   pressed. See CLAUDE.md, "Built for iPads". */
.round-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    vertical-align: middle;
}

.round-btn-face {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 2px solid #b8c4ce;
    border-radius: 50%;
    background: #fff;
    color: #5a6874;
    transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}

.round-btn-face svg {
    width: 18px;
    height: 18px;
}

.round-btn--add .round-btn-face {
    border-color: #2f9e6f;
    color: #2f9e6f;
}

.round-btn--add:active:not(:disabled) .round-btn-face {
    background: #2f9e6f;
    color: #fff;
}

.round-btn--remove:active:not(:disabled) .round-btn-face {
    border-color: #c0392b;
    background: #c0392b;
    color: #fff;
}

.round-btn--plain:active:not(:disabled) .round-btn-face {
    background: #e8f1f7;
}

@media (hover: hover) {
    .round-btn--add:hover:not(:disabled) .round-btn-face {
        background: #2f9e6f;
        color: #fff;
    }

    .round-btn--remove:hover:not(:disabled) .round-btn-face {
        border-color: #c0392b;
        color: #c0392b;
    }

    .round-btn--plain:hover:not(:disabled) .round-btn-face {
        border-color: #7d8b97;
        color: #33414d;
    }
}

.round-btn:disabled {
    cursor: default;
}

.round-btn:disabled .round-btn-face {
    border-color: #dde3e8;
    color: #c2cbd3;
}

.round-btn:focus-visible {
    outline: none;
}

.round-btn:focus-visible .round-btn-face {
    outline: 2px solid #2f9e6f;
    outline-offset: 2px;
}