/* /Components/Blocks/ClassAttendanceStatus.razor.rz.scp.css */
/* Attendance status card.

   Two renderings of the same data: the MudDataGrid on desktop, and a two-line list on phones.
   The grid's own stacked mode was not usable here — it repeats the column label on every line,
   so one class became six lines of "Class / Marked By / Status" scaffolding.

   Plain CSS rather than MudHidden, matching MainLayout: MudHidden depends on a JS-measured
   breakpoint that is not guaranteed to have resolved on first render. */

.attendance-grid[b-liezzfbznn] {
    display: block;
}

.attendance-list[b-liezzfbznn] {
    display: none;
}

@media (max-width: 959px) {
    .attendance-grid[b-liezzfbznn] {
        display: none;
    }

    .attendance-list[b-liezzfbznn] {
        display: block;
        max-height: 500px;
        overflow-y: auto;
    }
}

.att-row[b-liezzfbznn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    cursor: pointer;
}

.att-row:last-child[b-liezzfbznn] {
    border-bottom: none;
}

.att-row:hover[b-liezzfbznn] {
    background: var(--mud-palette-action-default-hover);
}

/* min-width:0 lets the ellipsis actually engage on a long teacher name. */
.att-main[b-liezzfbznn] {
    min-width: 0;
    flex: 1;
}

.att-status[b-liezzfbznn] {
    text-align: right;
    flex-shrink: 0;
}
/* /Components/Blocks/SchoolMetrics.razor.rz.scp.css */
/* Metric tiles.

   The tiles previously carried `style="flex:1"` inline, which silently beat the flex-basis in
   the media queries below — so they never actually reflowed on a phone and three tiles kept
   sharing one line. All tile styling lives here now; nothing inline is left to override it. */

.metric-row[b-2qw30gfeem] {
    display: flex;
    gap: 0;
}

.metric-tile[b-2qw30gfeem] {
    flex: 1;
    padding: 6px 16px;
    /* min-width:0 stops a long figure from forcing the row wider than its container. */
    min-width: 0;
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* The divider belongs BETWEEN tiles. Doing it here rather than inline also copes with the
   tile count changing, since several tiles are behind AuthorizeView. */
.metric-row > .metric-tile:last-child[b-2qw30gfeem] {
    border-right: none;
}

.metric-tile--span2[b-2qw30gfeem] {
    flex: 2;
}

/* Today's Attendance: peer figures across, subordinate detail beneath its parent.

   Gaps rather than "|" separators — a pipe spanning a two-line group looks broken, and the
   spacing already reads as separation. align-items:baseline keeps P, A and L on one optical
   line even though only P carries a second row underneath. */
.att-stats[b-2qw30gfeem] {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}

.att-stat[b-2qw30gfeem] {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

/* Tablet and below: two per row, with a single rule down the middle. Bottom borders are
   deliberately dropped — with a variable number of tiles they end up dangling under a
   half-empty row. */
@media (max-width: 899px) {
    .metric-row[b-2qw30gfeem] {
        flex-wrap: wrap;
    }

    .metric-tile[b-2qw30gfeem] {
        flex: 1 1 50%;
        box-sizing: border-box;
        border-right: none;
        padding: 8px 12px;
    }

    .metric-row > .metric-tile:nth-child(odd)[b-2qw30gfeem] {
        border-right: 1px solid var(--mud-palette-lines-default);
    }

    /* Today's Attendance carries four figures — give it the whole row so P/A/L/Lt stay on
       one line instead of breaking with the separators stranded at the line ends. */
    .metric-tile--wide[b-2qw30gfeem] {
        flex: 1 1 100%;
        border-right: none !important;
    }
}

/* Narrow phones: one per row, no vertical rules. */
@media (max-width: 479px) {
    .metric-tile[b-2qw30gfeem] {
        flex: 1 1 100%;
    }

    .metric-row > .metric-tile:nth-child(odd)[b-2qw30gfeem] {
        border-right: none;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-xy7j2745ei] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-xy7j2745ei] {
    flex: 1;
}

.sidebar[b-xy7j2745ei] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-xy7j2745ei] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-xy7j2745ei]  a, .top-row[b-xy7j2745ei]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-xy7j2745ei]  a:hover, .top-row[b-xy7j2745ei]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-xy7j2745ei]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-xy7j2745ei] {
        justify-content: space-between;
    }

    .top-row[b-xy7j2745ei]  a, .top-row[b-xy7j2745ei]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-xy7j2745ei] {
        flex-direction: row;
    }

    .sidebar[b-xy7j2745ei] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-xy7j2745ei] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-xy7j2745ei]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-xy7j2745ei], article[b-xy7j2745ei] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-xy7j2745ei] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-xy7j2745ei] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Section labels between nav groups */
.nav-section-label[b-nu3u9vhjjf] {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
    padding: 18px 20px 5px;
    pointer-events: none;
    user-select: none;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Dashboard layout.

   The admin dashboard used inline `grid-template-columns` with no media query, so on a phone it
   stayed two columns wide and every card was crushed. Only the column COUNT changes here —
   heights and stretch behaviour are left exactly as they were on desktop. */

.dash-split[b-7gjmti4zh7] {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 16px;
    align-items: stretch;
}

.dash-quad[b-7gjmti4zh7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
    height: 100%;
}

/* Tablet: the 5/7 split stops earning its keep before the 2x2 does. */
@media (max-width: 1279px) {
    .dash-split[b-7gjmti4zh7] {
        grid-template-columns: 1fr;
    }
}

/* The wrapper exists only so this card can be hidden — scoped CSS cannot reach inside a
   child component's own markup. */
.dash-quick-links[b-7gjmti4zh7] {
    height: 100%;
}

/* Phone: stack everything, and let rows size to their content rather than
   forcing two equal halves into a viewport that has no room for them. */
@media (max-width: 767px) {
    .dash-quad[b-7gjmti4zh7] {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
    }

    /* Quick Actions is four links to pages that are already in the nav drawer. On desktop it
       fills an otherwise-idle quadrant for free; stacked on a phone it lands dead last, so you
       scroll past every other card to save yourself a single tap. Not worth the scroll. */
    .dash-quick-links[b-7gjmti4zh7] {
        display: none;
    }
}
/* /Components/Pages/Settings/SchoolInfo.razor.rz.scp.css */
/* Each tab panel's MudGrid carries a negative top margin (MudBlazor offsets the item
   gutters that way). As the panel's top child it bleeds up over the tab bar and steals
   hover/clicks from the lower half of the tab headers. Lift the bar above that bleed so
   the whole header stays interactive. */
[b-lx743hr70n] .mud-tabs-tabbar {
    position: relative;
    z-index: 1;
}