/* W5 Application Styles
 * Design inspired by UWC Robert Bosch College
 * Color scheme: Teal primary, clean modern layout
 */

:root {
    /* Primary colors */
    --primary: #009b90;
    --primary-dark: #007d74;
    --primary-light: #00b8ab;
    --brand-teal: var(--primary);        /* collapses the var(--brand-teal,#0d9488) refs onto the app teal */
    --brand-teal-dark: var(--primary-dark);

    /* Bootstrap 5 overrides */
    --bs-primary: #009b90;
    --bs-primary-rgb: 0, 155, 144;

    /* Secondary colors */
    --secondary: #32373c;
    --secondary-light: #4a5058;

    /* Accent colors */
    --accent-red: #AF152A;
    --accent-blue: #38728D;

    /* Neutrals */
    --white: #ffffff;
    --gray-50: #f8f9fa;
    --gray-100: #f1f3f5;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #868e96;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;

    /* Semantic colors */
    --success: #28a745;
    --warning: #ffc107;
    --danger: #dc3545;
    --info: #17a2b8;

    /* Sidebar navigation depth (issue #5176) — each nesting level sits a step
       darker than its parent, so the level you are at reads at a glance.
       Level 1 = module section headers (the sidebar's own --secondary),
       2 = the section body (Overview + group toggles), 3 = the leaf items.
       Solid, not rgba: these regions nest, and stacked alphas would compound
       so the real step depended on how deep the element sat. */
    --nav-level-2-bg: #292d31;
    --nav-level-3-bg: #1e2124;
    --nav-active-bar: var(--primary-light);

    /* Layout */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 60px;
    --header-height: 60px;
    --transition-speed: 0.3s;

    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-base: 1rem;
    --font-size-sm: 0.875rem;
    --font-size-lg: 1.125rem;
    --line-height-base: 1.5;
}

/* Reset and base styles */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--gray-900);
    background-color: var(--gray-100);
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Layout structure */
.app-wrapper {
    display: flex;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
}

/* Skip-to-content link — visually hidden until keyboard-focused (uses Bootstrap's
   .visually-hidden-focusable for the reveal geometry; this adds the on-screen look). */
.skip-link:focus {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2000;                /* above the sidebar (1000) and dropdowns (1100) */
    padding: 0.5rem 1rem;
    background: var(--white);
    color: var(--primary-dark);
    border-radius: 6px;
    box-shadow: 0 0 0 3px rgba(0, 155, 144, 0.4);
    text-decoration: underline;
    font-weight: 600;
}

/* The skip target shouldn't paint a focus ring when programmatically focused. */
main:focus {
    outline: none;
}

/* Sidebar */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background-color: var(--secondary);
    color: var(--white);
    z-index: 1000;
    transition: width var(--transition-speed) ease, transform var(--transition-speed) ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

/* The brand is centred on the column's own centre line, not on what is left
   over beside the toggle: the toggle is taken out of flow and pinned to the
   right gutter, and .sidebar-brand reserves that gutter symmetrically on both
   sides so the logo and title stay optically centred (issue #5182). */
.sidebar-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-bottom: 1px solid var(--secondary-light);
    min-height: var(--header-height);
}

.sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    /* Matches the toggle's footprint (right gutter), mirrored on the left. */
    padding: 0 1.75rem;
    max-width: 100%;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--white);
    text-decoration: none;
    overflow: hidden;
    line-height: 1.3;
    text-align: center;
}

.sidebar-brand:hover {
    color: var(--white);
    text-decoration: none;
}

.sidebar-brand-icon {
    width: 28px;
    height: 28px;
    background-color: var(--primary);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-brand-logo {
    width: 140px;
    object-fit: contain;
    flex-shrink: 0;
}

.sidebar-brand-text {
    opacity: 1;
    transition: opacity var(--transition-speed) ease;
    white-space: normal;
    word-wrap: break-word;
    font-size: large;
}

.sidebar.collapsed .sidebar-brand-text {
    opacity: 0;
    width: 0;
}

/* Collapsed (60px) there is no room for the 140px logo — it was already
   clipped to nothing — so drop the brand entirely and centre the toggle,
   which is the only control the column can still show. */
.sidebar.collapsed .sidebar-brand {
    display: none;
}

.sidebar-toggle {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    /* On the dark --secondary sidebar: light grey for light-on-dark contrast. */
    color: var(--gray-400);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.sidebar.collapsed .sidebar-toggle {
    position: static;
    transform: none;
}

.sidebar-toggle:hover {
    background-color: var(--secondary-light);
    color: var(--white);
}

/* Sidebar navigation */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 0;
}

/* Quick find (issue #5176) — pinned above the scrolling tree. */
.nav-quickfind {
    position: relative;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.nav-quickfind-input {
    width: 100%;
    padding: 0.375rem 3.5rem 0.375rem 0.625rem;
    font-size: var(--font-size-sm);
    color: var(--white);
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.nav-quickfind-input::placeholder {
    /* Light-on-dark: the Phase-6 muted-text floor assumes a white background. */
    color: var(--gray-400);
    opacity: 1;
}

.nav-quickfind-input:focus {
    border-color: var(--primary-light);
    background-color: rgba(0, 0, 0, 0.4);
}

.nav-quickfind-hint {
    position: absolute;
    right: 1.125rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6875rem;
    color: var(--gray-400);
    pointer-events: none;
}

.nav-quickfind-input:focus ~ .nav-quickfind-hint {
    display: none;
}

.nav-quickfind-empty {
    margin: 0.75rem 1rem;
    font-size: var(--font-size-sm);
    color: var(--gray-400);
}

/* The sidebar sets display on nav rows explicitly, which would otherwise beat
   the UA stylesheet's [hidden] rule and leave filtered-out rows on screen. */
.sidebar [hidden] {
    display: none !important;
}

/* Matched run inside a filtered label. */
.sidebar mark {
    padding: 0;
    color: var(--white);
    background-color: rgba(0, 184, 171, 0.45);
    border-radius: 2px;
}

/* Keyboard cursor while walking quick-find hits with Up/Down. */
.nav-submenu .nav-link.nav-qf-current {
    color: var(--white);
    background-color: var(--secondary-light);
    box-shadow: inset 3px 0 0 0 var(--nav-active-bar);
}

.sidebar.collapsed .nav-quickfind {
    display: none;
}

.nav-section {
    margin-bottom: 0.25rem;
}

/* Section header — clickable toggle for expand/collapse */
.nav-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* On the dark --secondary sidebar: light grey for light-on-dark contrast. */
    color: var(--gray-400);
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
    user-select: none;
}

.nav-section-header:hover {
    color: var(--white);
    background-color: var(--secondary-light);
}

.nav-section.open > .nav-section-header {
    color: var(--primary-light);
}

/* The section holding the current page — marked server-side, so it is already
   correct on first paint (issue #5176). The inset bar is the level-1 marker. */
.nav-section.active > .nav-section-header {
    color: var(--white);
    background-color: var(--secondary-light);
    box-shadow: inset 3px 0 0 0 var(--nav-active-bar);
}

.nav-section-chevron {
    margin-left: auto;
    opacity: 0.5;
    transition: transform 0.2s ease, opacity 0.2s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.nav-section.open > .nav-section-header .nav-section-chevron {
    transform: rotate(180deg);
    opacity: 0.8;
}

/* Section body — hidden by default, shown when section is open.
   Carries the level-2 background for the whole region (Overview link + every
   group toggle), so the depth step is a contiguous area rather than a thin
   row the eye skips over. */
.nav-section-body {
    display: none;
    overflow: hidden;
    background-color: var(--nav-level-2-bg);
}

.nav-section.open > .nav-section-body {
    display: block;
}

/* Overview link inside section body — compound selector for specificity over .nav-link-sub */
.nav-section-body .nav-section-overview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 1rem 0.375rem 1.5rem;
    font-size: inherit;
    color: var(--primary-light);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 0.25rem;
}

.nav-section-overview .nav-link-icon {
    width: 14px;
    height: 14px;
}

.nav-section-overview:hover {
    color: var(--white);
    background-color: rgba(255, 255, 255, 0.05);
    text-decoration: none;
}

/* Collapsed sidebar: section header */
.sidebar.collapsed .nav-section-header {
    justify-content: center;
    padding: 0.5rem;
}

.sidebar.collapsed .nav-section-title-text {
    display: none;
}

.sidebar.collapsed .nav-section-chevron {
    display: none;
}

/* Collapsed sidebar: always hide section body */
.sidebar.collapsed .nav-section-body {
    display: none;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 1rem;
    color: var(--gray-300);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.nav-link:hover {
    background-color: var(--secondary-light);
    color: var(--white);
    text-decoration: none;
}

.nav-link.active {
    background-color: var(--primary);
    color: var(--white);
}

.nav-link-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-link-text {
    opacity: 1;
    transition: opacity var(--transition-speed) ease;
}

.sidebar.collapsed .nav-link-text {
    opacity: 0;
    width: 0;
}

.sidebar.collapsed .nav-link {
    justify-content: center;
    padding: 0.375rem;
}

/* Collapsible menu sections — group toggle padding matches Overview link */
/* No background of its own — it inherits level 2 from .nav-section-body. */
.nav-item-collapsible > .nav-link {
    cursor: pointer;
    padding-left: 1.5rem;
}

/* The group holding the current page — level-2 marker. */
.nav-item-collapsible.active > .nav-link {
    color: var(--white);
    box-shadow: inset 3px 0 0 0 var(--nav-active-bar);
}

.nav-submenu {
    display: none;
    background-color: var(--nav-level-3-bg);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.nav-item-collapsible.open > .nav-submenu {
    display: block;
    max-height: 2000px;
}

.nav-submenu .nav-link,
.nav-link-sub {
    padding: 0.25rem 1rem 0.25rem 2.25rem;
    font-size: var(--font-size-sm);
    display: block;
    /* Sidebar links sit on the dark --secondary bg, so a LIGHT grey is the
       high-contrast choice (light-on-dark). The Phase-6 muted-text rule assumes
       a white bg and does not apply here — see contrast.txt grandfather note. */
    color: var(--gray-400);
}

.nav-submenu .nav-link:hover,
.nav-link-sub:hover {
    color: var(--white);
    background-color: rgba(255, 255, 255, 0.05);
    text-decoration: none;
}

/* The current page's own link — level-3 marker. Needs to out-specify the
   .nav-submenu .nav-link colour above, which would otherwise repaint the label
   grey on the teal fill. */
.nav-submenu .nav-link.active,
.nav-link-sub.active,
.nav-section-body .nav-section-overview.active {
    background-color: var(--primary);
    color: var(--white);
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 var(--white);
}

.sidebar.collapsed .nav-submenu {
    display: none;
}

.nav-link-chevron {
    margin-left: auto;
    transition: transform 0.2s ease;
    opacity: 0.5;
}

.nav-item-collapsible.open > .nav-link .nav-link-chevron {
    transform: rotate(180deg);
}

.sidebar.collapsed .nav-link-chevron {
    display: none;
}

.nav-link-toggle {
    margin-left: auto;
    transition: transform 0.2s ease;
}

.nav-item.open > .nav-link .nav-link-toggle {
    transform: rotate(90deg);
}

.sidebar.collapsed .nav-link-toggle {
    display: none;
}

/* Main content area */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    transition: margin-left var(--transition-speed) ease;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 100%;
    overflow-x: hidden;
}

.sidebar.collapsed ~ .main-content {
    margin-left: var(--sidebar-collapsed-width);
}

/* Top header bar */
.top-header {
    position: sticky;
    top: 0;
    background-color: var(--white);
    border-bottom: 1px solid var(--gray-200);
    padding: 0 1.5rem;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
    width: 100%;
    box-sizing: border-box;
}

.top-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--gray-700);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-sm);
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    color: var(--gray-700);
    margin-right: 0.5rem;
}

.breadcrumb-item a {
    color: var(--gray-700);
}

.breadcrumb-item.active {
    color: var(--gray-900);
}

/* IDEA-041: the layout renders the full trail and a two-crumb phone trail (both
   as <nav class="w5-crumbs …">); the viewport picks one. Wide screens show the
   full chain. */
.w5-crumbs {
    min-width: 0;
}

.w5-crumbs--compact {
    display: none;
}

.top-header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-icon-btn {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--gray-700);
    border-radius: 4px;
    position: relative;
}

.header-icon-btn:hover {
    background-color: var(--gray-100);
    color: var(--gray-900);
}

.header-icon-btn .badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--danger);
    color: var(--white);
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
    border-radius: 10px;
}

/* Page content */
.page-content {
    flex: 1;
    padding: 1.5rem;
}

.page-header {
    margin-bottom: 1.5rem;
}

.page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 0.5rem 0;
}

.page-subtitle {
    color: var(--gray-700);
    margin: 0;
}

/* Cards */
.card {
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-200);
    font-weight: 600;
}

.card-body {
    padding: 1.25rem;
}

.card-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--gray-200);
    background-color: var(--gray-50);
}

/* Grid system */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: -0.75rem;
}

.col {
    padding: 0.75rem;
}

.col-12 { width: 100%; }
.col-6 { width: 50%; }
.col-4 { width: 33.333%; }
.col-3 { width: 25%; }
.col-8 { width: 66.666%; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: var(--font-size-base);
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary-dark);
    --bs-btn-hover-border-color: var(--primary-dark);
    --bs-btn-active-bg: var(--primary-dark);
    --bs-btn-active-border-color: var(--primary-dark);
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-secondary {
    background-color: var(--secondary);
    color: var(--white);
}

.btn-secondary:hover {
    background-color: var(--secondary-light);
}

.btn-outline {
    background-color: transparent;
    border-color: var(--gray-300);
    color: var(--gray-700);
}

.btn-outline:hover {
    background-color: var(--gray-100);
    border-color: var(--gray-700);
}

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

.btn-outline-primary:hover {
    background-color: var(--primary);
    color: #fff;
}

.btn-outline-secondary {
    background-color: transparent;
    border-color: var(--gray-700);
    color: var(--gray-700);
}

.btn-outline-secondary:hover {
    background-color: var(--gray-100);
    border-color: var(--gray-700);
    color: var(--gray-700);
}

.btn-outline-danger {
    background-color: transparent;
    border-color: var(--danger);
    color: var(--danger);
}

.btn-outline-danger:hover {
    background-color: var(--danger);
    color: var(--white);
}

.btn-outline-warning {
    background-color: transparent;
    border-color: var(--warning);
    color: #856404;
}

.btn-outline-warning:hover {
    background-color: var(--warning);
    color: #212529;
}

.btn-outline-success {
    background-color: transparent;
    border-color: var(--success);
    color: var(--success);
}

.btn-outline-success:hover {
    background-color: var(--success);
    color: var(--white);
}

/* Footer */
.main-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--gray-200);
    background-color: var(--white);
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* The copyright link inherits the footer's grey: the global anchor teal is only
   ~3.5:1 on white, under the 4.5:1 AA floor for text this size. The underline
   keeps it identifiable as a link without leaning on colour; the hover teal is
   --primary-dark, which clears AA. */
.main-footer a,
.login-footer a {
    color: inherit;
    text-decoration: underline;
}

.main-footer a:hover,
.login-footer a:hover {
    color: var(--primary-dark);
}

/* Utilities */
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-muted { color: var(--gray-700); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }

.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-light { background-color: var(--gray-100); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }

/* Responsive */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
    }

    .sidebar.collapsed ~ .main-content {
        margin-left: 0;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
        display: none;
    }

    .sidebar.mobile-open ~ .sidebar-overlay {
        display: block;
    }

    .col-md-6 { width: 50%; }
    .col-md-12 { width: 100%; }
}

@media (max-width: 767.98px) {
    .page-content {
        padding: 1rem;
    }

    .col-sm-12 { width: 100%; }

    .row {
        margin: -0.5rem;
    }

    .col {
        padding: 0.5rem;
    }

    .top-header {
        padding: 0 1rem;
        gap: 0.5rem;
    }

    .top-header-left {
        flex: 1;
        min-width: 0;
        gap: 0.5rem;
        overflow: hidden;
    }

    .top-header-right {
        flex-shrink: 0;
        gap: 0.5rem;
        margin-left: auto;
    }

    /* IDEA-041: a phone header (burger, trail, bell, user menu) has no room for
       the full chain, so it shows the compact trail instead of nothing at all.
       The crumbs shrink rather than push: the header must never scroll sideways. */
    .w5-crumbs--full {
        display: none;
    }

    .w5-crumbs--compact {
        display: block;
        overflow: hidden;
    }

    .w5-crumbs--compact .breadcrumb {
        flex-wrap: nowrap;
        gap: 0.25rem;
    }

    /* Both crumbs shrink instead of pushing the bell and the user menu off the
       row; the separator never does. */
    .w5-crumbs--compact .breadcrumb-item {
        flex: 0 1 auto;
        min-width: 0;
    }

    .w5-crumbs--compact .breadcrumb-item + .breadcrumb-item::before {
        flex: none;
        margin-right: 0.25rem;
    }

    .w5-crumbs--compact .breadcrumb-item a,
    .w5-crumbs--compact .breadcrumb-item.active {
        display: block;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* Nothing is truncated while both fit. When they do not, the parent is the
       half that gives up room first: it is the way back, the last crumb is where
       you are. */
    .w5-crumbs--compact .breadcrumb-item:not(.active) {
        flex-shrink: 4;
        min-width: 4rem;   /* never shrunk away to a lone separator */
    }

    /* Ensure user menu dropdown doesn't overflow */
    .user-menu-content {
        right: 0;
        left: auto;
        min-width: 220px;
    }
}

/* phone chrome only; intentional sub-sm breakpoint */
@media (max-width: 480px) {
    .top-header {
        padding: 0 0.5rem;
    }

    .top-header-right {
        gap: 0.25rem;
    }

    .header-icon-btn {
        padding: 0.375rem;
    }

    /* Hide notification badge count on very small screens */
    .header-icon-btn .badge {
        min-width: 8px;
        height: 8px;
        padding: 0;
        font-size: 0;
    }

    .user-menu-content {
        min-width: 200px;
        right: -0.5rem;
    }

    .user-menu-header {
        padding: 0.75rem;
    }

    .user-menu-item {
        padding: 0.625rem 0.75rem;
        font-size: 0.875rem;
    }
}

/* Widget styles for home page */
.widget {
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
}

.widget-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.widget-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--gray-800);
}

.widget-body {
    padding: 1.25rem;
}

.widget-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget-list-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--gray-100);
}

.widget-list-item:last-child {
    border-bottom: none;
}

/* Stat cards */
.stat-card {
    text-align: center;
    padding: 1.5rem;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    margin-top: 0.25rem;
}

/* Quick links */
.quick-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
}

.quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    color: var(--gray-700);
    transition: background-color 0.2s ease;
}

.quick-link:hover {
    background-color: var(--gray-100);
    text-decoration: none;
    color: var(--primary);
}

.quick-link-icon {
    width: 48px;
    height: 48px;
    background-color: var(--gray-100);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.quick-link:hover .quick-link-icon {
    background-color: var(--primary);
    color: var(--white);
}

.quick-link-text {
    font-size: var(--font-size-sm);
    font-weight: 500;
}

/* =============================================
   Login Page Styles
   ============================================= */

.login-page {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-light) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.login-wrapper {
    width: 100%;
    max-width: 400px;
}

.login-box {
    background-color: var(--white);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    padding: 2.5rem;
    text-align: center;
}

.login-logo {
    margin-bottom: 1rem;
}

.login-logo img {
    max-width: 180px;
    height: auto;
}

.login-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 2rem;
}

.login-form {
    text-align: left;
}

.login-form .form-group {
    margin-bottom: 1rem;
}

.login-input {
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background-color: var(--gray-50);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 155, 144, 0.15);
    background-color: var(--white);
}

.login-input::placeholder {
    color: var(--gray-700);
}

.login-field-error {
    color: var(--danger);
    font-size: var(--font-size-sm);
    margin-top: 0.25rem;
}

.login-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    margin: 0.5rem 0 0.25rem 0;
}

/* Explanatory line under the "Remember me on this browser" box. Indented to the checkbox
   label's text, and carrying the bottom margin the label used to own. */
.login-checkbox-hint {
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    margin: 0 0 1.5rem 1.5rem;
}

.login-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

.login-btn {
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
    background-color: var(--primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.login-btn:hover {
    background-color: var(--primary-dark);
}

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

.login-links {
    margin-top: 1.5rem;
    text-align: center;
}

.login-links a {
    color: var(--primary);
    font-size: var(--font-size-sm);
}

.login-links a:hover {
    color: var(--primary-dark);
}

.login-alert {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: var(--font-size-sm);
}

.login-alert-error {
    background-color: #fef2f2;
    color: var(--danger);
    border: 1px solid #fecaca;
}

.login-alert-success {
    background-color: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.login-intro {
    margin-bottom: 1.25rem;
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    text-align: center;
}

.login-footer {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
    font-size: var(--font-size-sm);
    color: var(--gray-700);
}

/* Version stamp under the copyright line (app\widgets\Version). */
.login-version {
    margin-top: 0.25rem;
}

/* User Menu Dropdown */
.user-menu-dropdown {
    position: relative;
}

.user-menu-content {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 240px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-speed) ease;
    z-index: 1000;
}

.user-menu-dropdown.active .user-menu-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-menu-header {
    padding: 1rem;
    border-bottom: 1px solid var(--gray-200);
}

.user-menu-name {
    font-weight: 600;
    color: var(--secondary);
    margin-bottom: 0.25rem;
}

.user-menu-email {
    font-size: var(--font-size-sm);
    color: var(--gray-700);
}

.user-menu-items {
    padding: 0.5rem 0;
}

.user-menu-item {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    text-align: left;
    background: none;
    border: none;
    color: var(--secondary);
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-decoration: none;
    font-size: var(--font-size-base);
}

.user-menu-item:hover {
    background-color: var(--gray-50);
    color: var(--primary);
}

.user-menu-item-logout {
    color: var(--danger);
}

.user-menu-item-logout:hover {
    background-color: #fef2f2;
    color: var(--danger);
}

.user-menu-divider {
    height: 1px;
    background-color: var(--gray-200);
    margin: 0.5rem 0;
}

.user-menu-logout {
    margin: 0;
}

/* =============================================
   Form Styles - Global styling for form controls
   ============================================= */

/* Make form controls more prominent */
.form-control {
    display: block;
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background-color: var(--white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Global keyboard-focus baseline (WCAG 2.4.7). Every interactive element gets a
   visible teal ring on :focus-visible only — so keyboard users always see focus
   without the mouse-click ring noise. :where() keeps specificity at 0 so component
   rules always win and this never fights existing styles. */
:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 155, 144, 0.15);
}

.form-control::placeholder {
    color: var(--gray-700);
}

/* Textarea specific styling */
textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

/* Form labels */
.form-label {
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
    display: block;
}

/* Form help text */
.form-text {
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    margin-top: 0.375rem;
}

/* Form check (checkboxes and radios) */
.form-check {
    padding-left: 1.75rem;
    margin-bottom: 0.5rem;
}

.form-check-input {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    margin-left: -1.75rem;
    accent-color: var(--primary);
}

.form-check-label {
    font-size: 1rem;
    color: var(--gray-700);
    cursor: pointer;
}

/* File input styling */
input[type="file"].form-control {
    padding: 0.5rem 0.75rem;
}

/* Select styling */
select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem;
}

/* Input group styling */
.input-group .form-control {
    border-radius: 0;
}

.input-group .form-control:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.input-group .form-control:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* Form validation states */
.form-control.is-invalid {
    border-color: var(--danger);
}

.form-control.is-invalid:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

.invalid-feedback {
    color: var(--danger);
    font-size: var(--font-size-sm);
    margin-top: 0.25rem;
}

.form-control.is-valid {
    border-color: var(--success);
}

.form-control.is-valid:focus {
    border-color: var(--success);
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.15);
}

/* Card form styling - forms inside cards */
.card .form-control {
    background-color: var(--gray-50);
}

.card .form-control:focus {
    background-color: var(--white);
}

/* Form select styling */
.form-select {
    display: block;
    width: 100%;
    padding: 0.625rem 2.5rem 0.625rem 0.875rem;
    font-size: 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background-color: var(--white);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 155, 144, 0.15);
}

/* Small form controls */
.form-select-sm {
    padding: 0.375rem 2rem 0.375rem 0.625rem;
    font-size: var(--font-size-sm);
    border-radius: 4px;
}

.form-control-sm {
    padding: 0.375rem 0.625rem;
    font-size: var(--font-size-sm);
    border-radius: 4px;
}

/* Inline form controls - auto width */
.form-select.w-auto,
.form-control.w-auto {
    width: auto;
}

/* GridView — W5 distinctive style: moved to web/css/components/grid.css (Phase 2). */

/* Global pagination theme override */
.pagination .page-link {
    color: var(--primary);
}

.pagination .page-link:hover {
    color: var(--primary-dark);
    background: rgba(0, 155, 144, 0.08);
    border-color: var(--primary);
}

.pagination .page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* =============================================
   Module landing page — shortcut grid
   ============================================= */

.module-landing {
    max-width: 900px;
}

.shortcut-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.shortcut-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
    color: var(--gray-700);
    text-decoration: none;
    text-align: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.15s ease;
    min-height: 110px;
}

.shortcut-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 155, 144, 0.15);
    color: var(--primary);
    text-decoration: none;
    transform: translateY(-2px);
}

.shortcut-card-icon {
    width: 52px;
    height: 52px;
    background-color: var(--gray-100);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    color: var(--secondary);
}

.shortcut-card:hover .shortcut-card-icon {
    background-color: rgba(0, 155, 144, 0.1);
    color: var(--primary);
}

.shortcut-card-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1.3;
}

@media (max-width: 575.98px) {
    .shortcut-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ----- School calendar (Admissions → Resources → School calendar) ----- */
.w5-calendar-card {
    display: block;
    width: 100%;
    padding: 0;
}

.w5-calendar-iframe {
    display: block;
    width: 100% !important;
    height: calc(100vh - 200px);
    min-height: 520px;
    border: 0;
    margin: 0;
    padding: 0;
}

@media (max-width: 768px) {
    .w5-calendar-iframe {
        height: calc(100vh - 160px);
        min-height: 420px;
    }
}

.page-title svg {
    vertical-align: -4px;
    margin-right: 0.4rem;
    color: var(--primary);
}

/* ----- Admissions → Browse pages (Applicants / Students / Staff) ----- */
.browse-page {
    width: 100%;
}

.browse-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(0, 155, 144, 0.06), rgba(0, 155, 144, 0.02));
    border: 1px solid rgba(0, 155, 144, 0.15);
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

.browse-header-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background-color: rgba(0, 155, 144, 0.12);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.browse-header-text {
    flex: 1;
    min-width: 0;
}

.browse-header-text h1 {
    margin: 0 0 0.25rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-900);
}

.browse-header-text p {
    margin: 0;
    color: var(--gray-700);
    font-size: 0.95rem;
    line-height: 1.4;
}

.browse-header-count {
    flex-shrink: 0;
    align-self: center;
}

.count-pill {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    background-color: var(--white);
    border: 1px solid rgba(0, 155, 144, 0.25);
    color: var(--primary);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.browse-empty {
    text-align: center;
    color: var(--gray-700);
}

.browse-list ul.user-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
    padding: 0;
    margin: 0;
}

.browse-list ul.user-list li {
    float: none;
    width: auto;
    margin: 0;
    padding: 0.85rem 1rem;
    background-color: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.browse-list ul.user-list li:hover {
    border-color: rgba(0, 155, 144, 0.4);
    box-shadow: 0 4px 12px rgba(0, 155, 144, 0.1);
    transform: translateY(-1px);
}

.browse-list ul.user-list li .user-details {
    min-width: 0;
    flex: 1;
}

.browse-list .user-description {
    font-size: 0.85rem;
    color: var(--gray-700);
    margin-top: 0.2rem;
}

.browse-list .staff-roles {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background-color: var(--gray-100);
    border-radius: 4px;
    font-size: 0.78rem;
    color: var(--gray-700);
    margin-top: 0.25rem;
}

@media (max-width: 576px) {
    .browse-header {
        flex-wrap: wrap;
    }
    .browse-header-count {
        flex-basis: 100%;
        align-self: stretch;
        padding-left: 64px;
    }
    .browse-list ul.user-list {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   Notification bell (header)
   ===================================================== */
.notification-bell { position: relative; display: inline-block; }
.notification-bell .header-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.notification-bell .header-icon-btn > svg { display: block; }
.notification-bell .badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 8.5px;
    background: var(--primary);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    border: 1.5px solid white;
    box-sizing: border-box;
    pointer-events: none;
    transform: translate(35%, -35%);
}
.notification-bell .badge-overdue { background: var(--accent-red); }
.notification-bell-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 360px;
    max-width: 420px;
    max-height: 70vh;
    overflow-y: auto;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: 1100;
}
.notification-bell-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--gray-100);
}
.notification-bell-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-700);
}
.notification-bell-mark-all {
    font-size: 0.8rem;
    color: var(--primary);
}
.notification-bell-body { padding: 0.3rem 0; }
.notification-bell-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--gray-700);
    font-size: 0.9rem;
}
.notification-bell-group { padding: 0; }
.notification-bell-group + .notification-bell-group {
    border-top: 6px solid var(--gray-100);
}
.notification-bell-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 1rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}
.notification-bell-group-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-700);
}
.notification-bell-group.has-overdue .notification-bell-group-header {
    background: rgba(218,79,73,0.08);
    border-bottom-color: rgba(218,79,73,0.25);
}
.notification-bell-group.has-overdue .notification-bell-group-title { color: var(--accent-red); }
.notification-bell-group-actions {
    display: flex;
    gap: 0.25rem;
}
.notification-bell-group-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    color: var(--gray-700);
    text-decoration: none;
    background: white;
    border: 1px solid var(--gray-200);
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.notification-bell-group-actions a:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: white;
}
.notification-bell-group-items {
    list-style: none;
    margin: 0;
    padding: 0.2rem 0;
}
.notification-bell-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
    border-left: 3px solid transparent;
}
.notification-bell-item.is-new { border-left-color: var(--primary); background: rgba(0,155,144,0.04); }
.notification-bell-item.is-overdue { border-left-color: var(--accent-red); }
.notification-bell-item-title {
    font-size: 0.88rem;
    color: var(--gray-800);
    line-height: 1.3;
}
.notification-bell-item-meta {
    font-size: 0.74rem;
    color: var(--gray-700);
    margin-top: 0.15rem;
}
.notification-bell-item.is-overdue .notification-bell-item-meta { color: var(--accent-red); font-weight: 500; }
.notification-bell-item-actions {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}
.notification-bell-item-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    color: var(--gray-700);
    text-decoration: none;
    font-size: 0.9rem;
}
.notification-bell-item-actions a:hover {
    background: var(--gray-100);
    color: var(--primary);
    text-decoration: none;
}
@media (max-width: 600px) {
    .notification-bell-dropdown {
        position: fixed;
        top: var(--header-height, 60px);
        left: 0;
        right: 0;
        max-width: none;
        border-radius: 0;
        max-height: calc(100vh - var(--header-height, 60px));
    }
}

/* =====================================================
   Homepage (Option B)
   Scope: .site-index — keeps the new layout from leaking
   into other pages that reuse .hero / .widget / etc.
   ===================================================== */

.site-index .hero {
    background: linear-gradient(135deg, #f4fbfa 0%, #ffffff 70%);
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    padding: 1.4rem 1.6rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.site-index .hero-text { min-width: 0; }
.site-index .hero-title {
    font-size: 1.55rem;
    margin: 0 0 0.25rem;
    color: var(--gray-900);
    font-weight: 700;
}
.site-index .hero-summary { margin: 0; color: var(--gray-700); }
.site-index .hero-meta { margin: 0.4rem 0 0; color: var(--gray-700); font-size: 0.85rem; }

/* Personal attendance gauges, surfaced in the hero (student-only). Two
   gauges (academic + EA), each a smiley face + stat chips, mirroring W4. */
.site-index .hero-attendance {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    text-decoration: none;
}
.site-index .hero-gauge {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.site-index .hero-gauge:hover {
    border-color: var(--primary);
    box-shadow: 0 1px 4px rgba(0, 155, 144, 0.12);
}
.site-index .hero-gauge-face {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
/* Face colour by level — best (green) through worst (red). The SVG inherits
   currentColor, so colouring the wrapper colours the face. */
.site-index .hero-gauge--saint       .hero-gauge-face { color: #16a34a; }
.site-index .hero-gauge--happy       .hero-gauge-face { color: #65a30d; }
.site-index .hero-gauge--neutral     .hero-gauge-face { color: #ca8a04; }
.site-index .hero-gauge--uncertain   .hero-gauge-face { color: #ea580c; }
.site-index .hero-gauge--sad         .hero-gauge-face { color: #dc2626; }
.site-index .hero-gauge--embarrassed .hero-gauge-face { color: #b91c1c; }
.site-index .hero-gauge-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.site-index .hero-gauge-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gray-700);
    font-weight: 600;
}
.site-index .hero-gauge-stats {
    display: flex;
    gap: 0.6rem;
}
.site-index .hero-stat {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}
.site-index .hero-stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--gray-900);
}
.site-index .hero-stat-label {
    font-size: 0.72rem;
    color: var(--gray-700);
}
.site-index .hero-gauge-goodjob {
    font-size: 0.72rem;
    font-weight: 600;
    color: #16a34a;
}
@media (max-width: 575.98px) {
    .site-index .hero-attendance { width: 100%; }
    .site-index .hero-gauge { flex: 1 1 100%; }
}

.site-index .layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 1.25rem;
}
.site-index .layout-main { min-width: 0; }
.site-index .layout-rail { min-width: 0; }

/* Next Up tile */
.site-index .next-up {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    border-radius: 14px;
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.25rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.2rem;
    align-items: center;
}
.site-index .next-up-clock {
    width: 64px; height: 64px;
    border-radius: 14px;
    background: rgba(255,255,255,0.18);
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 1.4rem; font-weight: 700;
}
.site-index .next-up-label {
    font-size: 0.72rem; opacity: 0.85;
    letter-spacing: 0.08em; text-transform: uppercase;
}
.site-index .next-up-title {
    font-size: 1.25rem; font-weight: 700;
    margin: 0.15rem 0;
}
.site-index .next-up-meta { font-size: 0.88rem; opacity: 0.9; }

/* Day/Week toggle */
.site-index .agenda-view-toggle {
    display: inline-flex;
    background: var(--gray-100);
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 0.4rem;
    gap: 3px;
}
.site-index .agenda-toggle {
    border: 0;
    background: transparent;
    padding: 0.35rem 0.85rem;
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--gray-700);
    cursor: pointer;
}
.site-index .agenda-toggle.is-active {
    background: white;
    color: var(--primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.site-index .agenda-view.hidden { display: none; }

/* Agenda timeline */
.site-index .agenda { padding: 0.4rem 0.2rem; }
.site-index .agenda-empty {
    padding: 1.2rem; text-align: center;
    color: var(--gray-700); font-size: 0.9rem;
}
.site-index .agenda-row {
    display: grid;
    grid-template-columns: 60px 22px 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
}
.site-index .agenda-row + .agenda-row { margin-top: 0.05rem; }
.site-index .agenda-row.now { background: var(--primary-soft, rgba(0,155,144,0.08)); }
.site-index .agenda-row.done { opacity: 0.55; }
.site-index .agenda-time {
    font-size: 0.85rem; color: var(--gray-700);
    font-variant-numeric: tabular-nums;
}
.site-index .agenda-dot { display: flex; justify-content: center; }
.site-index .agenda-dot span {
    display: inline-block; width: 12px; height: 12px;
    border-radius: 50%; border: 2px solid var(--gray-400);
    background: white;
}
.site-index .agenda-row.done .agenda-dot span { background: var(--gray-400); }
.site-index .agenda-row.now  .agenda-dot span {
    background: var(--primary); border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(0,155,144,0.18);
}
.site-index .agenda-subject {
    font-weight: 600; color: var(--gray-900);
}
.site-index .agenda-subject .chip {
    margin-left: 0.4rem;
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.65rem; font-weight: 600;
    background: var(--gray-100); color: var(--gray-700);
}
.site-index .agenda-subject .chip-level-h {
    background: rgba(0,155,144,0.15); color: var(--primary-dark);
}
.site-index .agenda-subject .chip-level-s {
    background: var(--gray-200); color: var(--gray-700);
}
.site-index .agenda-meta { font-size: 0.78rem; color: var(--gray-700); }
.site-index .agenda-room {
    font-size: 0.82rem; color: var(--gray-700);
    font-weight: 500; white-space: nowrap;
}
.site-index .agenda-divider {
    font-size: 0.75rem; color: var(--gray-700);
    padding: 0.4rem 0.6rem; font-style: italic;
}

/* School calendar */
.site-index .school-calendar { margin-bottom: 1.25rem; }
.site-index .school-calendar-body { padding: 0; }
.site-index .school-calendar-frame { display: block; }
.site-index .school-calendar-placeholder {
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--gray-700);
}
.site-index .school-calendar-placeholder .muted {
    color: var(--gray-700); font-size: 0.85rem;
}

/* At-a-glance / personal attendance */
.site-index .ataglance {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}
.site-index .glance {
    padding: 0.7rem 0.85rem;
    background: var(--gray-50);
    border-radius: 8px;
}
.site-index .glance-label {
    font-size: 0.72rem; color: var(--gray-700);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.site-index .glance-value {
    font-size: 1.4rem; font-weight: 700;
    color: var(--gray-900); margin-top: 0.2rem;
}
.site-index .glance-meta {
    font-size: 0.75rem; color: var(--gray-700);
    margin-top: 0.1rem;
}

/* Smiley grid — compact face-only tiles (W4-style). Faces alone, the student
   name only on hover, so attendance status can't be read at a glance. */
.site-index .smiley-empty {
    color: var(--gray-700); font-size: 0.9rem; padding: 0.8rem 0;
}
.site-index .smiley-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.site-index .smiley-tile {
    width: 48px;
    padding: 4px 2px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    text-align: center;
    background: #fff;
}
.site-index .smiley-face {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-700);
}
/* SVG faces inherit currentColor — colour per status. Greens through red
   mirror the hero gauge's face ramp. */
.site-index .smiley-tile.is-happy   .smiley-face { color: #65a30d; }
.site-index .smiley-tile.is-neutral .smiley-face { color: #ca8a04; }
.site-index .smiley-tile.is-sad     .smiley-face { color: #dc2626; }
.site-index .smiley-links {
    display: flex;
    justify-content: center;
    gap: 0.3rem;
    margin-top: 2px;
    font-size: 0.68rem;
    line-height: 1;
}
.site-index .smiley-links a { color: var(--gray-700); text-decoration: none; }
.site-index .smiley-links a:hover { color: var(--primary); text-decoration: underline; }
/* Blink — pulse a smiley whose status changed since the viewer last looked.
   Replaces W4's jQuery fadeOut/fadeIn loop. Respects reduced-motion. */
@keyframes w5-smiley-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.15; }
}
.site-index .smiley-tile.blink {
    border-color: currentColor;
}
.site-index .smiley-tile.blink .smiley-face {
    animation: w5-smiley-blink 1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .site-index .smiley-tile.blink .smiley-face { animation: none; }
}

/* Who's around */
.site-index .whos-row {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.45rem 0;
}
.site-index .whos-row + .whos-row { border-top: 1px solid var(--gray-100); }
.site-index .whos-row.whos-sub { padding-left: 1.8rem; }
.site-index .whos-icon { width: 28px; text-align: center; opacity: 0.75; }
.site-index .whos-text { flex: 1; font-size: 0.88rem; }
.site-index .whos-text.muted { color: var(--gray-700); }
.site-index .whos-text a { color: inherit; }
.site-index .whos-count {
    font-weight: 600; color: var(--gray-700);
}
.site-index .whos-count.muted { color: var(--gray-700); font-weight: 500; }

/* Who's-around inline details (full-width panel under each row) */
.site-index .wa-panel {
    margin: 0.35rem 0 0.6rem;
    border-top: 1px dashed var(--gray-200);
    padding-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.site-index .wa-group {
    border-left: 3px solid var(--primary);
    background: var(--gray-50);
    border-radius: 0 6px 6px 0;
    overflow: hidden;
}
.site-index .wa-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.65rem;
    background: rgba(0,155,144,0.08);
}
.site-index .wa-group-name {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary-dark);
}
.site-index .wa-group-count {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary-dark);
    background: white;
    border-radius: 999px;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.site-index .wa-group-people {
    padding: 0.35rem 0.65rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.site-index .wa-person + .wa-person {
    border-top: 1px solid var(--gray-200);
    padding-top: 0.45rem;
}
.site-index .wa-person-name {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.25;
}
/* Birthday rows lead with a small profile photo (W4 thumbnail grid). */
.site-index .wa-person--bday {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.site-index .wa-bday-photo { flex: none; line-height: 0; }
/* The widget bakes width/height/object-fit inline; we only round the photo
   here (the initials placeholder keeps the widget's own rounding). */
.site-index .wa-bday-photo img { border-radius: 50%; }
.site-index .wa-person--bday .wa-person-body { min-width: 0; }
.site-index .wa-person-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s;
}
.site-index .wa-person-link:hover {
    color: var(--primary);
    text-decoration: underline;
}
.site-index .wa-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.25rem;
}
.site-index .wa-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    font-size: 0.74rem;
    color: var(--gray-700);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.4;
    transition: border-color 0.15s, color 0.15s;
    max-width: 100%;
}
.site-index .wa-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
}
a.wa-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.site-index .wa-chip svg {
    color: var(--gray-700);
    flex-shrink: 0;
}
a.wa-chip:hover svg { color: var(--primary); }
.site-index .wa-chip-static {
    background: transparent;
    border-style: dashed;
}
.site-index .wa-more-btn {
    align-self: flex-start;
    margin-top: 0.1rem;
    font-size: 0.78rem;
    padding: 0.3rem 0.7rem;
}

/* Announcements (rail) */
.site-index .ann-list { list-style: none; padding: 0; margin: 0; }
.site-index .ann-item {
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--gray-100);
}
.site-index .ann-item:last-child { border-bottom: none; }
.site-index .ann-title { font-weight: 500; color: var(--gray-900); }
.site-index .ann-title a { color: var(--gray-900); text-decoration: none; }
.site-index .ann-title a:hover { color: var(--primary); text-decoration: underline; }
.site-index .ann-meta {
    font-size: 0.75rem; color: var(--gray-700);
    margin-top: 0.15rem;
}
.site-index .ann-excerpt {
    font-size: 0.82rem; color: var(--gray-700);
    margin-top: 0.25rem;
    line-height: 1.35;
}

/* Links (rail) */
.site-index .links-list { list-style: none; padding: 0; margin: 0; }
.site-index .links-list li {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--gray-100);
}
.site-index .links-list li:last-child { border-bottom: none; }
.site-index .links-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-800);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: color 0.15s;
}
.site-index .links-list a:hover { color: var(--primary); }
.site-index .links-ext-icon {
    font-size: 0.75rem;
    color: var(--gray-700);
    flex-shrink: 0;
    transition: color 0.15s;
}
.site-index .links-list a:hover .links-ext-icon { color: var(--primary); }

/* Quick actions */
.site-index .actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}
.site-index .action {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    color: var(--gray-700);
    text-decoration: none;
    font-size: 0.82rem;
}
.site-index .action:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-soft, rgba(0,155,144,0.05));
    text-decoration: none;
}

/* Widget link helper used across blocks */
.site-index .widget-empty {
    color: var(--gray-700);
    font-size: 0.9rem;
    padding: 0.6rem 0;
}

/* Responsive */
@media (max-width: 1100px) {
    .site-index .layout {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 900px) {
    .site-index .hero { padding: 1.1rem 1.2rem; }
    .site-index .hero-title { font-size: 1.3rem; }
    .site-index .next-up {
        grid-template-columns: auto 1fr;
        gap: 0.9rem;
        padding: 1rem 1.1rem;
    }
    .site-index .next-up-clock { width: 54px; height: 54px; font-size: 1.2rem; }
    .site-index .ataglance { grid-template-columns: 1fr 1fr; }
    .site-index .actions { grid-template-columns: 1fr; }
}

/* =====================================================
   Homepage agenda — issue-driven refinements
   ===================================================== */

/* Subtle alternating background so each period reads as a block. */
.site-index .agenda-row {
    background: var(--gray-50);
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    margin-bottom: 0.25rem;
    grid-template-columns: 105px 22px 1fr auto;
}
.site-index .agenda-row:last-child { margin-bottom: 0; }

/* Breaks: lighter, italic — clearly an interlude */
.site-index .agenda-row-break {
    background: transparent;
    border: 1px dashed var(--gray-200);
    color: var(--gray-700);
}
.site-index .agenda-subject-break { font-style: italic; color: var(--gray-700); }

/* Generic "Block X" rows: muted */
.site-index .agenda-subject-block { color: var(--gray-700); font-weight: 500; }

/* Time column shows start–end */
.site-index .agenda-time { font-variant-numeric: tabular-nums; }
.site-index .agenda-time-range {
    font-size: 0.82rem;
    color: var(--gray-700);
    line-height: 1.2;
    white-space: nowrap;
}

/* Class id link styling */
.site-index .agenda-class-link {
    color: var(--gray-900);
    font-weight: 600;
}
.site-index .agenda-class-link:hover {
    color: var(--primary);
    text-decoration: underline;
}
.site-index .agenda-subject-name {
    color: var(--gray-700);
    font-weight: 500;
    margin-left: 0.35rem;
}

/* Highlight CURRENT period (not "next") */
.site-index .agenda-row.now {
    background: rgba(0, 155, 144, 0.10);
    box-shadow: inset 3px 0 0 var(--primary);
}

/* Slightly mute past rows but keep them legible */
.site-index .agenda-row.done {
    opacity: 0.5;
    background: var(--gray-100);
}
.site-index .agenda-row.done .agenda-class-link { color: var(--gray-700); }

@media (max-width: 600px) {
    .site-index .agenda-row {
        grid-template-columns: 90px 18px 1fr auto;
        gap: 0.4rem;
    }
}