.music-student-manager-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Hatching = the sanctioned repeating-linear-gradient for locked/special
   states. Stripes come from the status tints; the 11px/10px stop offsets
   overlap on purpose (no anti-aliasing seam) — keep them as they are. */
.lesson-card-call-to-book {
    background: repeating-linear-gradient(45deg, var(--cbtt-success-tint, #caeeb2) 0px, var(--cbtt-success-tint, #caeeb2) 11px, transparent 10px, transparent 20px)
}

.lesson-card-swapped-lesson {
    background: repeating-linear-gradient(45deg, var(--cbtt-error-tint, rgba(255, 0, 0, 0.1)) 0px, var(--cbtt-error-tint, rgba(255, 0, 0, 0.1)) 11px, transparent 10px, transparent 20px);
}

.lesson-action {
    position: absolute;
    top: 5px;
    right: 5px;
}

.faded-sepia {
    opacity: 0.6;
    filter: sepia(0.1) contrast(0.85) brightness(1.1);
    position: relative;
    pointer-events: none;
}


.col-md-4 {
    margin-bottom: 1em;
}

.delete-lesson {
    color: var(--cbtt-error, #c4443a);
    text-decoration: none;
}

.student-manager-h2 {
    margin-bottom: 20px;
}

.student-manager-name {
    font-weight: bold;

}

.card.locked {
    filter: blur(2px);
}

/* :not(.cbtt-sm-row) — the rebuilt student list styles these states itself, in
   assets/css/cbtt-sm-shell.css, from the --cbtt-* tokens the teacher can theme.
   These two rules are hardcoded and !important, so without the exclusion they
   win against anything the skin sets. The 2px border was also the source of a
   layout shift: selecting a row grew it by 2px and pushed the list down. The
   rules stay for the legacy card markup that calendar_html.php still renders.
   Selection changes colour only (border colour + an inset ring that doubles
   it) — no 2px border, no drop shadow: flat cards, no geometry jump. */
.card.marked:not(.cbtt-sm-row) {
    border-color: var(--cbtt-success, #1f8f5f) !important;
    box-shadow: inset 0 0 0 1px var(--cbtt-success, #1f8f5f);
}

.card.charge {
    background-color: inherit;
}

.euro-sign {
    position: relative;
    top: -0.23em;
    left: -1.1em;
    font-size: 12px;
    font-weight: bold;
    color: var(--cbtt-error, #c4443a);
    pointer-events: none;
}

.euro-sign:hover {
    color: var(--cbtt-error-ink, #992e26);
}

/* Same exclusion, same reason — and this is the rule that turned every bookable
   row in the new list bright green the moment `free-slot` came back (it had to,
   mark_available_swaps.js identifies offers by it). Green also read as the
   loudest thing on the page, which inverted the hierarchy: a student wants to
   see their OWN lessons first. */
.free-slot:not(.cbtt-sm-row) {
    background-color: var(--cbtt-success-tint, #e4f3ec) !important;
    border: 1px solid var(--cbtt-success, #1f8f5f) !important;
}

.apply-changes {
	margin-top: 20px;
	padding: 13px;
	background-color: var(--cbtt-primary, #003f86);
	color: white;
	border: none;
	border-radius: var(--cbtt-radius-sm, 8px);
	cursor: pointer;
	margin-bottom: 1.4em;
}

.spinner {
    border: 16px solid var(--cbtt-border-soft, #f0ebe1);
    /* Light grey */
    border-top: 16px solid var(--cbtt-accent, #0193aa);
    /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    margin: 0 auto;
    display: block;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: rgba(255, 255, 255, 0.6); */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.alert-box {
    transition: transform 1.5s ease, opacity 1.5s ease !important;
    transform-origin: 50% 50% !important;
    transform: translateZ(0);
    /* Force hardware acceleration */
    will-change: transform, opacity;
    /* Prepare browser for animation */
}


/* The rule that stood here — .student-manager-container { animation: fade
   0.5s } — named a @keyframes that exists nowhere, so it never ran. Removed
   rather than completed (2026-09-11): a keyframe with a transform would turn
   the container into the containing block of the fixed action bar, which
   lives inside it, and the bar would scroll away with the page. */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes alertPulse {
    0%   { opacity: 1;    transform: scale(1); }
    50%  { opacity: 0.65; transform: scale(1.02); }
    100% { opacity: 1;    transform: scale(1); }
}

.alert-pulse {
    animation: fadeIn 0.3s ease-in, alertPulse 0.9s ease-in-out 0.3s 4;
    transform-origin: center;
}

.cancelled_free,
.cancelled_charged {
    margin: 0.2em;
    padding: 0.2em;
    font-size: 0.8em;
    display: inline-block;
    width: 140px;
    border: 1px solid var(--cbtt-border, #e6e1d7);
    background-color: var(--cbtt-surface-alt, #f7f3ec);
    border-radius: var(--cbtt-radius-sm, 8px);
}

.cancelled_free {
    color: var(--cbtt-success-ink, #166b46);
}

.cancelled_charged {
    color: var(--cbtt-error-ink, #992e26);
}

.cancelled-lessons h2 a {
    transition: all 0.4s ease;
}

.caret-icon {
    transition: transform 0.4s ease;
    margin-right: 0.5rem;
}

.cancelled-lessons h2 [aria-expanded="true"] .caret-icon {
    transform: rotate(0deg);
    text-decoration: none;
}



/* Container for the login form */
.cbtt-sm-login {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background: var(--cbtt-surface, #ffffff);
    border: 1px solid var(--cbtt-border, #e6e1d7);
    border-radius: var(--cbtt-radius-sm, 8px);
    box-shadow: none;
}

/* Heading */
.cbtt-sm-login h4 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.5rem;
    color: var(--cbtt-text, #1f2733);
}

/* Links (Log In and Register) */
.cbtt-sm-login h4 a {
    color: var(--cbtt-link, #086b7e);
    text-decoration: none;
}

.cbtt-sm-login h4 a:hover {
    color: var(--cbtt-primary-hover, #0056b3);
    text-decoration: underline;
}

/* Form elements */
.cbtt-sm-login .login-username,
.cbtt-sm-login .login-password,
.cbtt-sm-login .login-remember,
.cbtt-sm-login .login-submit {
    margin-bottom: 15px;
}

/* Labels */
.cbtt-sm-login label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--cbtt-text-muted, #7c8494);
}

/* Input fields */
.cbtt-sm-login .input {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid var(--cbtt-border, #e6e1d7);
    border-radius: var(--cbtt-radius-sm, 8px);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.cbtt-sm-login .input:focus {
    border-color: var(--cbtt-primary, #003f86);
    outline: 0;
    box-shadow: var(--cbtt-focus-ring, 0 0 0 3px rgba(1, 147, 170, 0.15));
}

/* Remember me checkbox */
.cbtt-sm-login .login-remember label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    color: var(--cbtt-text-muted, #7c8494);
}

.cbtt-sm-login .login-remember input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

/* Submit button */
.cbtt-sm-login .login-submit .button-primary {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--cbtt-on-primary, #ffffff);
    background-color: var(--cbtt-primary, #003f86);
    border: none;
    border-radius: var(--cbtt-radius-sm, 8px);
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.cbtt-sm-login .login-submit .button-primary:hover {
    background-color: var(--cbtt-primary-hover, #002b57);
}

/* Error messages (if any) */
.cbtt-sm-login .login-error {
    color: var(--cbtt-error, #c4443a);
    margin-bottom: 15px;
    text-align: center;
}

.cbtt-sm-location {
    position: absolute;
    right: 1em;
    width: 2em;
    height: 2em;
    max-width: 2em;
    max-height: 2em;
}

#processing-time-text {
    margin-left: 8px;
    font-size: 0.9em;
    font-style: italic;
}

.student-manager-container.processing {
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.locked .btn {
    opacity: 0.5;
    pointer-events: none;
}

/* Disabled button styles */
#save-changes.disabled-button {
    pointer-events: none;
    cursor: not-allowed !important;
    background-color: var(--cbtt-surface-alt, #f7f3ec) !important;
}

#save-changes.disabled-button .apply-changes {
    color: var(--cbtt-text-muted, #7c8494);
    opacity: 0.7;
}

/* Student Notes Styles */
/* Same 720px reading column as the rest of the shell (.cbtt-sm-appbar,
   .cbtt-sm-sysrows, .cbtt-sm-hero, …, cbtt-sm-shell.css) — without this the
   note was the one block running the full container width, wide enough to
   sit under the fixed rail nav instead of beside it. */
.student-note-container {
    margin-bottom: 20px;
    padding: 15px;
    background-color: var(--cbtt-surface-alt, #f7f3ec);
    border-radius: var(--cbtt-radius-sm, 8px);
    border-left: 4px solid var(--cbtt-accent, #0193aa);
    box-shadow: none;
}

/* Same 720px reading column as the rest of the shell (.cbtt-sm-appbar,
   .cbtt-sm-sysrows, .cbtt-sm-hero, … — cbtt-sm-shell.css). .cbtt-sm-shell
   itself carries no padding-inline, so this needed its own gutter; below
   752px that's a fixed 16px each side (same as .cbtt-sm-hero__card), above
   it the column is centered and the gutter comes from the padding instead. */
.cbtt-sm-shell .student-note-container {
    max-width: 720px;
    margin-inline: 16px;
}

@media (min-width: 752px) {
    .cbtt-sm-shell .student-note-container {
        margin-inline: auto;
    }
}

/* The note icon (notes/student_notes.php) is fill="currentColor", so the
   accent comes from here rather than from a hardcoded orange in the SVG. */
.student-note-container svg {
    color: var(--cbtt-accent, #0193aa);
}

/* Severity (notes/student_notes.php: cbtt_sm_render_student_note_for_calendar()).
   "info" deliberately keeps the plain accent-colored look above — only the
   two elevated levels re-color the border/icon and get their own badge. */
.student-note-container--warning {
    border-left-color: var(--cbtt-warning, #c67a12);
}

.student-note-container--warning svg {
    color: var(--cbtt-warning, #c67a12);
}

.student-note-container--urgent {
    border-left-color: var(--cbtt-error, #c4443a);
    background-color: var(--cbtt-error-tint, #fbe3e0);
}

.student-note-container--urgent svg {
    color: var(--cbtt-error, #c4443a);
}

/* .row/.col-sm-2/.col-sm-10 retired with BR-5 (Bootstrap removal) — the
   markup in notes/student_notes.php now uses cbtt-ui's grid classes
   (core/assets/css/cbtt-ui.css); these selectors style that markup, scoped
   to .student-note-container the same way the Bootstrap-named ones were. */
.student-note-container .cbtt-ui-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
}

.student-note-container .cbtt-ui-col--auto {
    flex: 0 0 auto;
    max-width: 60px;
    padding-right: 15px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.student-note-container .cbtt-ui-col {
    flex: 1;
    padding-left: 0;
    color: var(--cbtt-text, #1f2733);
    line-height: 1.6;
}

.student-note-container .cbtt-ui-col h1,
.student-note-container .cbtt-ui-col h2,
.student-note-container .cbtt-ui-col h3,
.student-note-container .cbtt-ui-col h4,
.student-note-container .cbtt-ui-col h5,
.student-note-container .cbtt-ui-col h6 {
    color: var(--cbtt-accent, #0193aa);
    margin-top: 0;
}

.student-note-container .cbtt-ui-col p {
    margin-bottom: 10px;
}

.student-note-container .cbtt-ui-col a {
    color: var(--cbtt-accent, #0193aa);
    text-decoration: underline;
}

.student-note-container .cbtt-ui-col a:hover {
    color: var(--cbtt-accent-ink, #086b7e);
}

.btn-danger {
    color: var(--cbtt-on-primary, #ffffff) !important;
}


/* Responsive adjustments */
@media (max-width: 576px) {
    .student-note-container .cbtt-ui-row {
        flex-direction: column;
        text-align: center;
    }

    .student-note-container .cbtt-ui-col--auto {
        max-width: 100%;
        margin-bottom: 10px;
        justify-content: center;
    }

    .student-note-container .cbtt-ui-col {
        text-align: left;
    }
}

/* Admin cancel button opacity management based on card marked state */
/* Default: When card is NOT marked, both buttons have full opacity */
.lesson-card:not(.marked) .delete-lesson,
.lesson-card:not(.marked) .proxy-cancel-lesson {
    opacity: 1;
}

/* When card IS marked: Active button has full opacity, inactive has reduced opacity */
.lesson-card.marked .delete-lesson[data-active="true"],
.lesson-card.marked .proxy-cancel-lesson[data-active="true"] {
    opacity: 1;
}

.lesson-card.marked .delete-lesson[data-active="false"],
.lesson-card.marked .proxy-cancel-lesson[data-active="false"] {
    opacity: 0.3;
}

/* Lesson selection popup overlay - ensure it's above everything including fixed header */
.lesson-popup-overlay {
    position: fixed !important;
    z-index: 2147483647 !important;
    isolation: isolate !important;
}