/*
   Booking-flow styles that sit on top of the inherited CSU theme (base.css, overrides.css).
   Deliberately small: everything here is either the step indicator or the slot grid, both of
   which the portal theme has no equivalent for. Colours come from CSU's palette - #1E4D2B is
   the university green.
*/

/* ---- masthead ----
   Solid CSU green (#1E4D2B is the university's official green, and the value already used
   throughout base.css), carrying the WHITE one-line signature. The standard signature has
   #004c23 inside the ram, which is near-invisible against this background - the white variant
   exists for dark fields and is the correct asset here. */

.scm-topbar {
    background: #1E4D2B;
}

/* Its own max-width and padding rather than Bootstrap's .container, for two reasons. The
   inherited base.css strips .container's horizontal padding, so relying on it puts the university
   signature flush against the screen edge below 576px. And .container's own max-width (1140px)
   is wider than this application's 1000px content column, so the logo and the page heading would
   start at different x positions on a desktop - which reads as a mistake even when nobody can say
   why. These values mirror `.scm-public main` deliberately: change one, change the other. */
.scm-topbar-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 1240px;
    margin: 0 auto;
    padding: .85rem 24px;
}

.scm-signature {
    display: block;
    line-height: 0;
    flex: 0 0 auto;
}

.scm-signature img {
    display: block;
    height: 30px;
    width: auto;
}

/* The hairline between the university signature and the unit name - the standard CSU lockup.
   Not a border on the unit name itself, so it can be dropped independently on small screens. */
.scm-topbar-divider {
    flex: 0 0 auto;
    width: 1px;
    align-self: stretch;
    margin: .15rem 0;
    background: rgba(255, 255, 255, .45);
}

.scm-unit {
    color: #fff;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.2;
}

.scm-topbar-phone {
    margin-left: auto;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.scm-topbar-phone:hover,
.scm-topbar-phone:focus {
    color: #fff;
    text-decoration: underline;
}

.scm-topbar-phone:focus-visible {
    outline: 2px solid #C8C372;
    outline-offset: 3px;
    border-radius: 2px;
}

/* Below ~600px four items on one line leaves the phone number flush against the screen edge, so
   the masthead becomes two rows: the university signature alone, then the unit name and the phone
   number sharing the second. The phone stays visible at every width - it is the one thing on this
   page a student in difficulty might need immediately, and burying it behind a menu would be the
   wrong economy. */
@media (max-width: 600px) {
    .scm-topbar-inner {
        flex-wrap: wrap;
        gap: .4rem 1rem;
    }

    .scm-topbar-divider {
        display: none;
    }

    .scm-signature {
        flex-basis: 100%;
    }

    .scm-signature img {
        height: 26px;
    }

    .scm-unit {
        order: 3;
        font-size: .85rem;
    }

    .scm-topbar-phone {
        order: 4;
        margin-left: auto;
        font-size: .95rem;
    }
}

/* ---- step indicator ---- */

.scm-steps {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    font-size: .9rem;
}

.scm-steps li {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: #6c757d;
}

.scm-steps li .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: .8rem;
    font-weight: 700;
}

.scm-steps li.current {
    color: #1E4D2B;
    font-weight: 700;
}

.scm-steps li.current .num {
    background: #1E4D2B;
    border-color: #1E4D2B;
    color: #fff;
}

.scm-steps li.done {
    color: #1E4D2B;
}

.scm-steps li.done a {
    color: inherit;
    text-decoration: none;
}

.scm-steps li.done a:hover,
.scm-steps li.done a:focus-visible {
    text-decoration: underline;
}

/* ---- slot grid ---- */

.scm-manager {
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
    background: #fff;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .06);
    transition: box-shadow 150ms ease, transform 150ms ease;
}

.scm-manager:hover {
    box-shadow: 0 6px 24px rgba(30, 77, 43, .12);
}

.scm-manager h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1E4D2B;
    margin-bottom: .75rem;
}

.scm-slots {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Reschedule.cshtml still renders one plain button per slot (a reschedule only ever moves the
   time/case manager, never the format - RescheduleRequest has no NewModality), so this rule
   stays alongside the newer per-slot/per-method markup below that Slots.cshtml uses. */
.scm-slots button {
    min-width: 6.5rem;
    padding: .5rem .75rem;
    border: 1px solid #1E4D2B;
    border-radius: .5rem;
    background: #fff;
    color: #1E4D2B;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.scm-slots button:hover,
.scm-slots button:focus {
    background: #1E4D2B;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(30, 77, 43, .25);
}

.scm-slots button:active {
    transform: translateY(0) scale(.97);
}

.scm-slots button:focus-visible {
    outline: 3px solid #C8C372;
    outline-offset: 2px;
}

/* One card per bookable time. Below it sit one to three method chips - a slot can now offer
   in-person and/or virtual at once, so the old "one button per slot" grid became "one button
   per (slot, method)" for Slots.cshtml specifically (22 Sep 2026, Sydney via Shaun). */
.scm-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .6rem .65rem .5rem;
    border: 1px solid #dee2e6;
    border-radius: .6rem;
    background: #f8f9fa;
}

.scm-slot-time {
    font-weight: 700;
    color: #1E4D2B;
    font-variant-numeric: tabular-nums;
}

.scm-slot-methods {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: center;
}

/* Method chips are submit buttons, not links: choosing one carries the signed draft with it,
   and a GET cannot carry a payload that size. */
.scm-slot-methods button {
    min-width: 5rem;
    padding: .4rem .6rem;
    border: 1px solid #1E4D2B;
    border-radius: .5rem;
    background: #fff;
    color: #1E4D2B;
    font-weight: 600;
    font-size: .85rem;
    transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.scm-slot-methods button:hover,
.scm-slot-methods button:focus {
    background: #1E4D2B;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(30, 77, 43, .25);
}

.scm-slot-methods button:active {
    transform: translateY(0) scale(.97);
}

/* A visible focus ring, because this grid is entirely keyboard-navigable and the default
   Bootstrap outline disappears against the green hover state. */
.scm-slot-methods button:focus-visible {
    outline: 3px solid #C8C372;
    outline-offset: 2px;
}

/* The "any / in person / Teams / phone" filter above the day list - plain GET links styled as
   a small segmented control, echoing the date/month nav buttons already on this page. */
.scm-modality-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1rem;
}

.scm-summary dt { font-weight: 600; color: #495057; }
.scm-summary dd { margin-bottom: .6rem; }

.scm-footer {
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
}

/* Same column as the masthead and the content, for the same reason. */
.scm-footer-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px;
}


/* ---- Visual refresh: typeface + card/button treatment ----
   Layered on top of the inherited theme (base.css / overrides.css) rather than edited there,
   since those are carried over from the DSA portal so this app matches the rest of the
   division's estate at the framework level. This section nudges the surface details - font,
   card corners/shadow, button hover feel - toward the look used in the standalone
   InteractionTracker app, without touching the shared files. (Shaun, 2026-09-04)
*/

body,
.form-control,
.form-select {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.card {
    border-radius: .75rem;
    border-color: #e5e7eb;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .06);
}

/* ---- Admin dashboard tiles ----
   Scoped to .admin-card (the Admin/Index overview tiles) rather than every .card - those tiles are
   the whole clickable target (stretched-link covers the card body), so a hover lift reads as
   affordance there. Other .card uses in the app (the intake form's section cards, etc.) aren't
   links, so they're left alone. */
.admin-card {
    transition: box-shadow .15s ease, transform .15s ease;
}

.admin-card:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
    transform: translateY(-3px);
}

/* One glyph per tile, top-right, naming what kind of thing the tile is before you've read its
   number. Muted by default so it doesn't compete with the count; Calendar drift's carries
   .text-danger instead, same as its count, when there's an unresolved report - see
   Admin/Index.cshtml. Positioned off .admin-card (which .card already makes a positioning
   context) rather than .card-body, so it sits in the tile's actual corner regardless of how far
   the body's own padding pushes its content in. */
.admin-card-icon {
    position: absolute;
    top: .9rem;
    right: 1rem;
    width: 1.35rem;
    height: 1.35rem;
    color: #adb5bd;
}

@media (prefers-reduced-motion: reduce) {
    .admin-card {
        transition: box-shadow .15s ease;
    }

    .admin-card:hover {
        transform: none;
    }
}

.card-header:first-child {
    border-radius: calc(.75rem - 1px) calc(.75rem - 1px) 0 0;
}

.card-footer:last-child {
    border-radius: 0 0 calc(.75rem - 1px) calc(.75rem - 1px);
}

/* ---- Section cards on the intake form ----
   The green-header treatment from InteractionTracker (see the note above), reused here so the
   long single-page intake form (Index.cshtml) reads as a couple of distinct stages instead of
   one continuous scroll of <fieldset> boundaries. Each .scm-card-header replaces what used to be
   a bare <legend>: an icon, a bold title, and a muted one-line subtitle on a solid green bar.

   Sub-headings inside the card body (.scm-card-section-title) are for topics that share a card
   but are not the card's own subject - "Emergency contact" inside the "About you" card, for
   instance - so they stay quiet (small caps, brand green, no bar of their own) rather than
   competing with the green header above them. */
.scm-card-header {
    background: #1E4D2B;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: .65rem;
}

.scm-card-header .scm-icon {
    width: 15px;
    height: 15px;
    color: rgba(255, 255, 255, .85);
}

.scm-card-header-title {
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    margin-bottom: .1rem;
}

.scm-card-header-subtitle {
    color: rgba(255, 255, 255, .6);
    font-size: .78rem;
    margin-bottom: 0;
}

.scm-card-body {
    padding: 1.5rem;
}

.scm-card-section + .scm-card-section {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid #e5e7eb;
}

.scm-card-section-title {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #1E4D2B;
    margin-bottom: 1rem;
}

.btn {
    border-radius: .5rem;
    /* base.css already animates color/background-color/border-color/box-shadow on .btn (and
       turns all of it off under prefers-reduced-motion) - extend that list rather than
       replacing it, so the hover-lift is additive instead of silently dropping those. */
    transition: color .15s ease-in-out, background-color .15s ease-in-out,
        border-color .15s ease-in-out, box-shadow .15s ease-in-out, transform 110ms ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0) scale(.98);
}

/* ---- the session strip ----
   A quiet white band directly under the green masthead, carrying the breadcrumb on the left and
   who-you-are plus what-you-can-do on the right.

   It exists because the masthead ran out of room. Six items on one green band - signature, unit
   name, display name, sign out, "Book for a student", phone number - meant the two that matter
   most to a student in difficulty (the unit name and the phone number) were competing with
   session chrome. Session chrome is not brand, so it gets its own row and a much quieter voice:
   .82rem, muted grey, one hairline rule.

   Its max-width and padding mirror .scm-topbar-inner and `.scm-public main` for the same reason
   those mirror each other - three rows starting at three different x positions reads as a
   mistake even when nobody can say why. Change one, change all three. */

.scm-utility {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
}

.scm-utility-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;
    max-width: 1240px;
    margin: 0 auto;
    padding: .5rem 24px;
    font-size: .82rem;
}

.scm-breadcrumb {
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}

.scm-breadcrumb a {
    color: #6c757d;
    text-decoration: none;
}

.scm-breadcrumb a:hover,
.scm-breadcrumb a:focus {
    color: #1E4D2B;
    text-decoration: underline;
}

.scm-breadcrumb-sep {
    color: #adb5bd;
}

.scm-utility-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: auto;
}

.scm-utility-links a {
    color: #1E4D2B;
    text-decoration: none;
    font-weight: 600;
}

.scm-utility-links a:hover,
.scm-utility-links a:focus {
    text-decoration: underline;
}

.scm-utility-links a:focus-visible {
    outline: 2px solid #1E4D2B;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Not a link and styled so it cannot be mistaken for one: no green, no underline, no pointer. */
.scm-utility-user {
    color: #495057;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}

.scm-utility-user .scm-icon {
    color: #adb5bd;
}

/* -------------------------------------------------------------------------------------------
   Icons (Infrastructure/Icons). Inline SVG, replacing the Font Awesome webfont - which was about
   1.2 MB from cdnjs to draw seven glyphs.

   Sized in em and stroked in currentColor, so an icon inherits the size and colour of whatever
   text it sits beside exactly as the icon font did. That is why the swap only changed the shape
   of the markup and not its context: no per-usage sizing had to be invented.

   The negative vertical-align is the part that is easy to miss. An inline SVG sits on the text
   BASELINE by default, which leaves it visibly low next to its label; an icon font sat on the
   font's own metrics instead. This puts it back.
   ------------------------------------------------------------------------------------------- */
.scm-icon {
    width: 2em;
    height: 2em;
    vertical-align: -.125em;
    flex: none;
    color: #1E4D2B;
}

/* A case manager is looking at a student's application. The link that takes them back to their
   own job is the one thing here that should catch the eye. */
.scm-utility-staff {
    background: #f1f7f2;
    border: 1px solid #cfe3d4;
    border-radius: 999px;
    padding: .1rem .6rem;
}

/* Below ~600px the two halves stack rather than crushing the breadcrumb into an ellipsis. The
   links keep their order; the breadcrumb, which is the least urgent thing on the page, goes
   first because it is also the shortest. */
@media (max-width: 600px) {
    .scm-utility-inner {
        justify-content: flex-start;
        font-size: .78rem;
    }

    .scm-utility-links {
        margin-left: 0;
        width: 100%;
    }
}

/* ---- the appointments list ----
   Not a table. There are usually nought or one of these, occasionally two, and the interesting
   thing about each is a date and two buttons - which is a card, not a row of columns that would
   need a horizontal scrollbar on the phone most students are holding. */

.scm-appointments {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1rem;
}

.scm-appointment {
    display: flex;
    gap: 1.15rem;
    align-items: stretch;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .06);
    overflow: hidden;
}

/* The date block. Given a tinted panel and its own column because "when is it?" is the question
   this page exists to answer, and it should be readable at arm's length. */
.scm-appointment-when {
    flex: 0 0 auto;
    width: 8.5rem;
    background: #f1f7f2;
    border-right: 1px solid #e5e7eb;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .1rem;
    text-align: center;
}

.scm-appointment-date {
    color: #1E4D2B;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .8rem;
}

.scm-appointment-time {
    color: #1E4D2B;
    font-weight: 800;
    font-size: 1.35rem;
    line-height: 1.15;
}

.scm-appointment-until {
    color: #6c757d;
    font-size: .75rem;
}

.scm-appointment-detail {
    flex: 1 1 auto;
    padding: 1rem 1.15rem;
    min-width: 0;
}

.scm-appointment-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

/* The explanation of why a button is missing is a full-width line under the buttons, never
   beside them - it is a sentence, and sentences squeezed into a flex row become two words a
   line. */
.scm-appointment-actions > p {
    flex-basis: 100%;
}

@media (max-width: 480px) {
    .scm-appointment {
        flex-direction: column;
    }

    .scm-appointment-when {
        width: auto;
        border-right: 0;
        border-bottom: 1px solid #e5e7eb;
        flex-direction: row;
        justify-content: flex-start;
        align-items: baseline;
        gap: .5rem;
        text-align: left;
        padding: .7rem 1.15rem;
    }

    .scm-appointment-time {
        font-size: 1.1rem;
    }
}

/* ---- empty state ----
   The common case, so it is written as an invitation rather than as the absence of a result. */

.scm-empty {
    border: 1px dashed #cfd8d2;
    border-radius: .75rem;
    background: #fbfcfb;
    padding: 2rem 1.5rem;
    text-align: center;
}

.scm-empty-lead {
    font-size: 1.1rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: .35rem;
}

/* ---- what you have now, on the reschedule page ----
   Stated above the slot picker, because a student choosing a new time is comparing against
   something and should not have to remember what. */

.scm-current-appointment {
    border-left: 4px solid #1E4D2B;
    background: #f1f7f2;
    border-radius: .35rem;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
}

.scm-current-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .72rem;
    font-weight: 700;
    color: #6c757d;
}

/* ---- Step 2: day view + month calendar, side by side ----
   Picking a date used to be a trip to the month grid and a trip back before a time was even on
   screen. They now sit next to each other and update independently - see Slots.cshtml.cs's
   remarks on the `date` and `month` query values. Below ~960px (roughly where two comfortable
   columns stop fitting inside the shared 1000px content column) they stack, day view first. */

.scm-slots-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 960px) {
    .scm-slots-layout {
        grid-template-columns: 1fr;
    }
}

.scm-month {
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .06);
    padding: 1.1rem 1.15rem 1rem;
    /* The day panel's height varies with how many case managers have times; the calendar should
       not stretch to match it, or a quiet Tuesday would leave the grid awkwardly tall. */
    position: sticky;
    top: 1rem;
}

@media (max-width: 960px) {
    .scm-month {
        position: static;
    }
}

.scm-month-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .85rem;
}

.scm-month-title {
    font-size: 1rem;
    font-weight: 700;
    color: #212529;
}

.scm-month-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    color: #495057;
    background: transparent;
    transition: background 120ms ease, color 120ms ease;
}

.scm-month-nav-btn:hover,
.scm-month-nav-btn:focus {
    background: #f1f7f2;
    color: #1E4D2B;
}

.scm-month-nav-btn:focus-visible {
    outline: 2px solid #1E4D2B;
    outline-offset: 2px;
}

.scm-month-nav-btn.is-disabled {
    color: #ced4da;
    pointer-events: none;
}

.scm-month-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.scm-month-grid th {
    padding-bottom: .5rem;
    color: #adb5bd;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: center;
}

.scm-month-grid td {
    text-align: center;
    padding: .15rem;
}

/* A circle, not a square: the CSU green fills it solid for the selected day and only outlines
   it for today, so the two never read as the same state even at a glance. */
.scm-month-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    margin: 0 auto;
    border-radius: 50%;
    color: #adb5bd;
    font-size: .88rem;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}

.scm-month-day.is-bookable,
.scm-month-day.has-appointments {
    color: #212529;
    font-weight: 600;
}

.scm-month-day.is-bookable:hover,
.scm-month-day.is-bookable:focus,
.scm-month-day.has-appointments:hover,
.scm-month-day.has-appointments:focus {
    background: #f1f7f2;
    color: #1E4D2B;
}

.scm-month-day.is-bookable:focus-visible,
.scm-month-day.has-appointments:focus-visible {
    outline: 2px solid #1E4D2B;
    outline-offset: 2px;
}

/* Staff/Schedule's Past-tab calendar leaves every day clickable, has-appointments or not - a day
   with nothing on it is still a valid thing to look at, unlike a non-bookable day in the Step 2
   calendar above, which is a plain span. Without this, an empty day would look and feel dead. */
.scm-month-day[href]:not(.is-bookable):not(.has-appointments):hover,
.scm-month-day[href]:not(.is-bookable):not(.has-appointments):focus {
    background: #f1f7f2;
}

.scm-month-day[href]:not(.is-bookable):not(.has-appointments):focus-visible {
    outline: 2px solid #1E4D2B;
    outline-offset: 2px;
}

.scm-month-day.is-today {
    box-shadow: inset 0 0 0 1.5px #1E4D2B;
}

.scm-month-day.is-selected,
.scm-month-day.is-selected.is-today {
    background: #1E4D2B;
    color: #fff;
    box-shadow: none;
}

.scm-month-day.is-outside {
    color: #dee2e6;
}

.scm-month-legend {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .85rem 0 0;
    color: #6c757d;
    font-size: .78rem;
}

.scm-month-legend-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #1E4D2B;
}

/* ---- Admin/Reports "Visual Summary" card ----
   Deliberately styled to match a Chart.js report Shaun already had for a different DSA app
   (Interaction Tracker): a small bar-chart glyph next to a bold title, a thin divider under the
   header, and two chart panels side by side under uppercase muted-gray labels. See
   ReportsModel's remarks for why the panels themselves are shaped differently (this office has
   no location dimension to chart). */

.scm-report-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-bottom: .75rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.scm-report-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.scm-report-icon rect {
    fill: #1E4D2B;
}

.scm-report-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: .5rem;
}

.scm-report-chart {
    position: relative;
    height: 260px;
}

/* ---- "still loading" overlay (wwwroot/js/loading-indicator.js) ----
   Only ever visible while a student is waiting on a page that reads case managers' calendars,
   and only after a short delay, so a fast load never flashes it. White wash rather than a dark
   modal backdrop: nothing is being asked of the student, the page is just busy. */
.scm-loading {
    display: none;
}

.scm-loading.is-visible {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 1080;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(255, 255, 255, .75);
}

.scm-loading-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    max-width: 26rem;
    padding: 1rem 1.25rem;
    border-radius: .5rem;
    background: #fff;
    color: #212529;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .15);
}

.scm-loading-card .spinner-border {
    flex: 0 0 auto;
    color: #1E4D2B;
}

.btn.is-loading {
    pointer-events: none;
    opacity: .85;
}

/* ---- input text contrast ----
   base.css (the inherited SB Admin theme) colours typed text #6e707e - about 4.8:1 on white,
   technically passing AA but visibly gray, and the office flagged it as hard to read for students
   with limited sight (Sydney, 11 Sep 2026). Bootstrap's own body colour instead: roughly 15:1.
   The -moz-focusring rule is base.css's Firefox text-shadow trick and has to follow suit, or the
   text goes back to gray in Firefox whenever the field has keyboard focus. Placeholders are
   darkened too (#858796 is about 3.6:1, under AA), while staying lighter than real input. */
.form-control,
.form-control:focus,
.form-select {
    color: #212529;
}

.form-control:-moz-focusring {
    text-shadow: 0 0 0 #212529;
}

.form-control::placeholder {
    color: #6c757d;
}

/* ---- Sign-in landing page (Pages/SignIn.cshtml) ----
   One centred card, modelled on the CSU Affiliate Lookup sign-in page, so a student arriving at
   the bare URL sees what this is before Microsoft's own sign-in box. */
.scm-signin {
    max-width: 30rem;
    margin: 2rem auto;
    padding: 2.5rem 2rem;
    text-align: center;
    background: #fff;
    border: 1px solid #e1e5df;
    border-radius: .75rem;
    box-shadow: 0 1px 2px rgba(16, 24, 18, .04), 0 4px 16px rgba(16, 24, 18, .06);
}

.scm-signin-icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1.25rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e8efe9;
    color: #1E4D2B;
}

.scm-signin-icon .scm-icon {
    width: 26px;
    height: 26px;
}

.scm-signin h1 {
    font-size: 1.5rem;
    margin-bottom: .75rem;
}

.scm-signin-lead {
    font-size: 1rem;
    color: #4b524d;
    margin-bottom: 0;
}

.scm-ms-logo {
    width: 1.1rem;
    height: 1.1rem;
}

@media (max-width: 575.98px) {
    .scm-signin {
        margin: 1rem auto;
        padding: 2rem 1.25rem;
    }
}