/* Light look with the violet pill (body.mb-light: pupil and teacher pages). Loaded after styles.css. */
body.mb-light {
    --mb-bg: #f1effb;
    --mb-ink: #1b1d2e;
    --mb-soft: #5d6178;
    --mb-muted: #9296ab;
    --mb-line: #ececf5;
    --mb-accent: #5b4bd6;
    --mb-accent-rgb: 91,75,214;
    --mb-accent-dark: #4a3bc4;
    --mb-accent-soft: #f0eefd;
    --mb-green: #1f9d6a;
    --mb-red: #c62828;
    --mb-shadow: 0 1px 2px rgba(27,29,46,.04), 0 6px 20px rgba(var(--mb-accent-rgb),.06);
    background: var(--mb-bg) !important;
    color: var(--mb-ink);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
/* Admin pages: each keeps its own theme colour from styles.css, deepened for white text */
body.mb-light.school-admin-dashboard {
    --mb-bg: #eef5fa;
    --mb-accent: #3a7fa8;
    --mb-accent-rgb: 58,127,168;
    --mb-accent-dark: #2c6688;
    --mb-accent-soft: #e7f1f8;
}
body.mb-light.student-admin-dashboard {
    --mb-bg: #eef7f3;
    --mb-accent: #3f8f78;
    --mb-accent-rgb: 63,143,120;
    --mb-accent-dark: #2f7461;
    --mb-accent-soft: #e6f3ee;
}
body.mb-light.mat-admin-dashboard {
    --mb-bg: #effaf5;
    --mb-accent: #059669;
    --mb-accent-rgb: 5,150,105;
    --mb-accent-dark: #047857;
    --mb-accent-soft: #e3f6ee;
}
/* Teacher pages: the teacher blue (styles.css teacher-dashboard #1e3a8a to #3b82f6) */
body.mb-light.teacher-dashboard {
    --mb-bg: #eef3fc;
    --mb-accent: #2563eb;
    --mb-accent-rgb: 37,99,235;
    --mb-accent-dark: #1e40af;
    --mb-accent-soft: #e6eefd;
}
body.mb-light .card:not([style*="background-color: #6A5ACD"]) {
    background-color: #fff !important;
    backdrop-filter: none;
}

/* top bar */
body.mb-light header {
    position: sticky; top: 0; z-index: 1020;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(10px);
    color: var(--mb-ink);
    box-shadow: none;
    border-bottom: 1px solid var(--mb-line);
}
body.mb-light nav.navbar { min-height: 64px; padding: 0; }
body.mb-light .navbar-brand,
body.mb-light .navbar-brand:hover { color: var(--mb-ink); font-weight: 600; }
body.mb-light .navbar-dark .nav-link,
body.mb-light .navbar-dark .nav-link:hover,
body.mb-light .navbar-dark .nav-link:focus,
body.mb-light .navbar-dark .nav-link.show { color: var(--mb-soft); font-weight: 400 !important; }
body.mb-light .navbar-dark .navbar-toggler { border-color: var(--mb-line); }
body.mb-light .navbar-dark .navbar-toggler-icon { filter: invert(.6); }

/* name menu */
body.mb-light .user-dropdown .dropdown-menu {
    border: 0; border-radius: 14px; padding: 6px; min-width: 220px; margin-top: 6px;
    box-shadow: 0 2px 6px rgba(27,29,46,.08), 0 14px 34px rgba(27,29,46,.14);
}
body.mb-light .user-dropdown .dropdown-item { border-radius: 8px; padding: 8px 12px; color: var(--mb-ink); }
body.mb-light .user-dropdown .dropdown-item:hover,
body.mb-light .user-dropdown .dropdown-item.active { background: var(--mb-accent-soft); color: var(--mb-accent); }
body.mb-light .user-dropdown .dropdown-item i { color: var(--mb-soft); }
body.mb-light .user-dropdown .dropdown-header { font-size: 13px; color: var(--mb-muted); padding: 6px 12px 4px; }

/* welcome and page banners */
body.mb-light .mb-welcome { background-color: var(--mb-accent) !important; border: 0; border-radius: 999px; box-shadow: var(--mb-shadow); }
body.mb-light .mb-welcome > .card-body { display: flex; align-items: center; min-height: 78px; padding: 14px 22px 14px 40px; }
body.mb-light .mb-welcome-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; overflow: hidden; }
body.mb-light .mb-welcome-brand { color: #fff; font-size: 20px; font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

body.mb-light .mb-welcome-text.has-title .mb-welcome-brand { font-size: 13px; font-weight: 500; line-height: 18px; color: rgba(255,255,255,.75); }
body.mb-light .mb-welcome-text.has-title .mb-welcome-brand:hover { color: #fff; }
body.mb-light .mb-pill-title { font-size: 20px; font-weight: 600; line-height: 1.25; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mb-light .mb-pill-back { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; margin-left: 16px; padding: 7px 16px; border-radius: 999px; background: rgba(255,255,255,.18); color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
body.mb-light .mb-pill-back:hover { background: rgba(255,255,255,.28); color: #fff; }

/* the site header, printed inside the pill on pupil pages */
body.mb-light .mb-welcome header { position: static; flex: 0 0 auto; margin-left: 16px; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; color: #fff; }
body.mb-light .mb-welcome nav.navbar { min-height: 0; padding: 0; }
body.mb-light .mb-welcome nav.navbar > .container { max-width: none; padding: 0; flex-wrap: nowrap; }
body.mb-light .mb-welcome .navbar-brand { display: none; }
body.mb-light .mb-welcome .navbar-dark .nav-link,
body.mb-light .mb-welcome .navbar-dark .nav-link:hover,
body.mb-light .mb-welcome .navbar-dark .nav-link:focus,
body.mb-light .mb-welcome .navbar-dark .nav-link.show { color: #fff; white-space: nowrap; }
body.mb-light .mb-welcome .navbar-nav .dropdown-menu { position: absolute; }
body.mb-light main.mb-dashboard { padding-top: 0 !important; }
@media (max-width: 767.98px) {
    body.mb-light .mb-welcome > .card-body { padding: 12px 14px 12px 26px; }
    body.mb-light .mb-welcome .mb-user-name,
    body.mb-light .mb-pill-back span { display: none; }
    body.mb-light .mb-pill-title { font-size: 17px; }
    body.mb-light .mb-welcome .navbar-nav .nav-link { padding-left: 4px; padding-right: 4px; }
}


/* dashboard sections: title on the page, tiles below */
body.mb-light main.mb-dashboard { padding-bottom: 40px !important; }
body.mb-light .card.mb-section.mb-section { background: transparent !important; backdrop-filter: none; border: 0; box-shadow: none; margin-top: 32px; margin-bottom: 0 !important; }
body.mb-light .mb-section > .card-header { background: transparent; border: 0; padding: 0 0 12px; }
body.mb-light .mb-section > .card-header h5 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--mb-ink); }
body.mb-light .mb-section > .card-body { padding: 0; }
body.mb-light .mb-section .row.g-4 { --bs-gutter-x: 16px; --bs-gutter-y: 16px; }

/* tiles */
body.mb-light .card-hover { border: 0; border-radius: 16px; box-shadow: var(--mb-shadow); transition: transform .15s, box-shadow .15s; }
body.mb-light .card-hover:hover { transform: translateY(-3px); border: 0; box-shadow: 0 2px 4px rgba(27,29,46,.05), 0 12px 28px rgba(var(--mb-accent-rgb),.12); }
body.mb-light .card-hover .fw-bold,
body.mb-light .card-hover .card-title { font-size: 15px; font-weight: 500 !important; }
body.mb-light .card-hover .text-primary,
body.mb-light .mb-tile-icon { color: var(--mb-accent) !important; }
body.mb-light .mb-tile-icon { font-size: 2rem; line-height: 1; margin-bottom: 10px; }
body.mb-light .mb-section .card-hover { padding: 14px !important; }
/* tile content: the link wraps block content; as a flex column it adds no stray line boxes and centres in equal-height tiles */
body.mb-light .card-hover > .card-body { display: flex; flex-direction: column; align-items: center; justify-content: center; }
body.mb-light .card-hover > .card-body > :last-child { margin-bottom: 0; }
body.mb-light .card-hover > a { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; }
body.mb-light .card-hover > a > .fw-bold { line-height: 1.3; }
body.mb-light .card-hover > a > small { line-height: 1.3; margin-top: 4px; }

/* banner row: every item on one centre line */
body.mb-light .mb-welcome .navbar-nav { align-items: center; }
body.mb-light .mb-welcome .navbar-nav .nav-link { display: flex; align-items: center; }
body.mb-light .card-hover small,
body.mb-light .card-hover .card-text { color: var(--mb-soft) !important; font-size: 14px; }

/* tile counts: same numbers and colours, flat */
body.mb-light main .notification-badge {
    animation: none; background: var(--mb-red); box-shadow: none; border: 2px solid #fff;
    top: -7px; right: -7px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; font-size: 12px; transform: none;
}
body.mb-light main .notification-badge.action-available,
body.mb-light main .notification-badge.badge-count-large { background: var(--mb-green); }
body.mb-light main .notification-badge.badge-count-large { min-width: 30px; height: 30px; border-radius: 15px; font-size: 14px; top: -9px; right: -9px; }

/* recent badges */
body.mb-light .mb-recent { border: 0; border-radius: 16px; box-shadow: var(--mb-shadow); margin-top: 4px; }
body.mb-light .mb-recent > .card-header { background: transparent; border: 0; padding: 18px 24px 0; }
body.mb-light .mb-recent > .card-header h5 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
body.mb-light .mb-recent > .card-body { padding: 6px 24px 14px; }
body.mb-light .mb-view-all { background: var(--mb-accent); color: #fff; border-radius: 999px; padding: 5px 16px; font-weight: 500; }
body.mb-light .mb-view-all:hover { background: var(--mb-accent-dark); color: #fff; }
body.mb-light .badge-gallery-wrapper { margin-bottom: 0 !important; }
body.mb-light .badge-gallery-scroll { gap: 12px; padding: 10px 4px 16px; }
body.mb-light .badge-gallery-img {
    height: 92px; width: 92px; object-fit: contain; padding: 8px; border-radius: 18px; background: #fff;
    box-shadow: 0 1px 2px rgba(27,29,46,.06), 0 3px 8px rgba(27,29,46,.08); margin: 0 !important;
}
body.mb-light .badge-gallery-img:hover { transform: translateY(-3px); }
body.mb-light .badge-gallery-nav {
    border: 0; border-radius: 50%; width: 40px; height: 40px; flex: 0 0 40px;
    background: #f3f2f9; color: var(--mb-soft); font-size: 1.2rem;
}
body.mb-light .badge-gallery-nav:hover { background: var(--mb-accent-soft); color: var(--mb-accent); }

/* speed choice (My Settings) */
body.mb-light .mb-speed { display: inline-flex; background: #f3f2f9; border-radius: 999px; padding: 3px; margin-top: 4px; }
body.mb-light .mb-speed button { border: 0; background: transparent; color: var(--mb-soft); font-weight: 500; font-size: 14px; padding: 3px 12px; border-radius: 999px; }
body.mb-light .mb-speed button.is-active { background: #fff; color: var(--mb-accent); box-shadow: 0 1px 3px rgba(27,29,46,.12); }

/* footer */
body.mb-light footer.bg-light { background: transparent !important; color: var(--mb-muted); padding: 24px 16px 28px !important; font-size: 14px; }
body.mb-light footer.bg-light .text-muted { color: var(--mb-muted) !important; }
body.mb-light footer.bg-light a { color: var(--mb-accent) !important; }