html.schoolpro-dark-root,
html.schoolpro-dark-root body {
    min-height: 100%;
    background:
        radial-gradient(circle at 18% 0%, rgba(37, 99, 235, .13), transparent 30%),
        radial-gradient(circle at 100% 10%, rgba(20, 184, 166, .10), transparent 32%),
        #0b1220 !important;
}

html.schoolpro-dark-root body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 0%, rgba(37, 99, 235, .13), transparent 30%),
        radial-gradient(circle at 100% 10%, rgba(20, 184, 166, .10), transparent 32%),
        #0b1220;
}

body.theme-schoolpro.schoolpro-dark,
body.theme-schoolpro.schoolpro-dark #page-wrapper,
body.theme-schoolpro.schoolpro-dark #page,
body.theme-schoolpro.schoolpro-dark #topofscroll,
body.theme-schoolpro.schoolpro-dark .main-inner,
body.theme-schoolpro.schoolpro-dark #page-content,
body.theme-schoolpro.schoolpro-dark #region-main,
body.theme-schoolpro.schoolpro-dark #region-main-box,
body.theme-schoolpro.schoolpro-dark .sp-global-shell,
body.theme-schoolpro.schoolpro-dark .sp-global-main {
    background:
        radial-gradient(circle at 18% 0%, rgba(37, 99, 235, .13), transparent 30%),
        radial-gradient(circle at 100% 10%, rgba(20, 184, 166, .10), transparent 32%),
        #0b1220 !important;
    color: #e5eefb !important;
}

body.theme-schoolpro.schoolpro-dark .sp-page-frame,
body.theme-schoolpro.schoolpro-dark .card,
body.theme-schoolpro.schoolpro-dark .card-body,
body.theme-schoolpro.schoolpro-dark .card-header,
body.theme-schoolpro.schoolpro-dark .block,
body.theme-schoolpro.schoolpro-dark .coursebox,
body.theme-schoolpro.schoolpro-dark .activity-item,
body.theme-schoolpro.schoolpro-dark .list-group,
body.theme-schoolpro.schoolpro-dark .list-group-item,
body.theme-schoolpro.schoolpro-dark .dropdown-menu,
body.theme-schoolpro.schoolpro-dark .popover,
body.theme-schoolpro.schoolpro-dark .popover-region-container,
body.theme-schoolpro.schoolpro-dark .modal-content,
body.theme-schoolpro.schoolpro-dark .drawer,
body.theme-schoolpro.schoolpro-dark .drawercontent,
body.theme-schoolpro.schoolpro-dark .courseindex,
body.theme-schoolpro.schoolpro-dark .secondary-navigation,
body.theme-schoolpro.schoolpro-dark .tertiary-navigation,
body.theme-schoolpro.schoolpro-dark .path-admin .adminwarning,
body.theme-schoolpro.schoolpro-dark .settingsform,
body.theme-schoolpro.schoolpro-dark .box,
body.theme-schoolpro.schoolpro-dark .well,
body.theme-schoolpro.schoolpro-dark .bg-white,
body.theme-schoolpro.schoolpro-dark .bg-light,
body.theme-schoolpro.schoolpro-dark .bg-gray,
body.theme-schoolpro.schoolpro-dark .bg-body {
    background-color: #111827 !important;
    color: #e5eefb !important;
    border-color: rgba(255, 255, 255, .10) !important;
}

body.theme-schoolpro.schoolpro-dark .sp-page-frame p,
body.theme-schoolpro.schoolpro-dark .sp-page-frame div,
body.theme-schoolpro.schoolpro-dark .sp-page-frame span,
body.theme-schoolpro.schoolpro-dark .sp-page-frame label,
body.theme-schoolpro.schoolpro-dark .sp-page-frame legend,
body.theme-schoolpro.schoolpro-dark .sp-page-frame li,
body.theme-schoolpro.schoolpro-dark .sp-page-frame td,
body.theme-schoolpro.schoolpro-dark .sp-page-frame th,
body.theme-schoolpro.schoolpro-dark .sp-page-frame dd,
body.theme-schoolpro.schoolpro-dark .sp-page-frame dt,
body.theme-schoolpro.schoolpro-dark .modal-content,
body.theme-schoolpro.schoolpro-dark .dropdown-menu,
body.theme-schoolpro.schoolpro-dark .drawer,
body.theme-schoolpro.schoolpro-dark .drawer a,
body.theme-schoolpro.schoolpro-dark .courseindex a {
    color: #e5eefb !important;
}

body.theme-schoolpro.schoolpro-dark .text-muted,
body.theme-schoolpro.schoolpro-dark .small,
body.theme-schoolpro.schoolpro-dark small,
body.theme-schoolpro.schoolpro-dark .description,
body.theme-schoolpro.schoolpro-dark .dimmed,
body.theme-schoolpro.schoolpro-dark .muted {
    color: #a8b5c7 !important;
}

body.theme-schoolpro.schoolpro-dark a:not(.btn):not(.sp-global-navitem):not(.sp-mode-pill):not(.sp-icon-action):not(.sp-global-brand):not(.sp-global-search) {
    color: #7dd3fc !important;
}

body.theme-schoolpro.schoolpro-dark a:not(.btn):hover {
    color: #bfdbfe !important;
}

body.theme-schoolpro.schoolpro-dark .form-control,
body.theme-schoolpro.schoolpro-dark .custom-select,
body.theme-schoolpro.schoolpro-dark .form-select,
body.theme-schoolpro.schoolpro-dark input,
body.theme-schoolpro.schoolpro-dark textarea,
body.theme-schoolpro.schoolpro-dark select {
    background-color: rgba(2, 6, 23, .58) !important;
    color: #e5eefb !important;
    border-color: rgba(255, 255, 255, .12) !important;
}

body.theme-schoolpro.schoolpro-dark .form-control::placeholder,
body.theme-schoolpro.schoolpro-dark input::placeholder,
body.theme-schoolpro.schoolpro-dark textarea::placeholder {
    color: #a8b5c7 !important;
}

body.theme-schoolpro.schoolpro-dark .generaltable,
body.theme-schoolpro.schoolpro-dark table,
body.theme-schoolpro.schoolpro-dark .table {
    color: #e5eefb !important;
    background-color: #111827 !important;
    border-color: rgba(255, 255, 255, .10) !important;
}

body.theme-schoolpro.schoolpro-dark .generaltable th,
body.theme-schoolpro.schoolpro-dark .generaltable td,
body.theme-schoolpro.schoolpro-dark table th,
body.theme-schoolpro.schoolpro-dark table td,
body.theme-schoolpro.schoolpro-dark .table th,
body.theme-schoolpro.schoolpro-dark .table td {
    color: #e5eefb !important;
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, .10) !important;
}

body.theme-schoolpro.schoolpro-dark .generaltable thead th,
body.theme-schoolpro.schoolpro-dark .table thead th {
    background-color: rgba(255, 255, 255, .05) !important;
}

body.theme-schoolpro.schoolpro-dark .nav-tabs,
body.theme-schoolpro.schoolpro-dark .nav-tabs .nav-link,
body.theme-schoolpro.schoolpro-dark .nav-pills .nav-link {
    border-color: rgba(255, 255, 255, .10) !important;
}

body.theme-schoolpro.schoolpro-dark .nav-tabs .nav-link.active,
body.theme-schoolpro.schoolpro-dark .nav-pills .nav-link.active,
body.theme-schoolpro.schoolpro-dark .dropdown-item:hover,
body.theme-schoolpro.schoolpro-dark .dropdown-item:focus {
    background-color: rgba(37, 99, 235, .18) !important;
    color: #e5eefb !important;
}

body.theme-schoolpro.schoolpro-dark .alert,
body.theme-schoolpro.schoolpro-dark .notice,
body.theme-schoolpro.schoolpro-dark .notification {
    background-color: rgba(37, 99, 235, .14) !important;
    color: #e5eefb !important;
    border-color: rgba(125, 211, 252, .18) !important;
}

body.theme-schoolpro.schoolpro-dark hr,
body.theme-schoolpro.schoolpro-dark .border,
body.theme-schoolpro.schoolpro-dark .border-top,
body.theme-schoolpro.schoolpro-dark .border-bottom {
    border-color: rgba(255, 255, 255, .10) !important;
}

body.theme-schoolpro.schoolpro-dark .btn-secondary,
body.theme-schoolpro.schoolpro-dark .btn-outline-secondary {
    background-color: rgba(255, 255, 255, .06) !important;
    color: #e5eefb !important;
    border-color: rgba(255, 255, 255, .12) !important;
}

/* 2026-07-01: Clean non-nested school sidebar. */
.sp-global-nav-flat {
    gap: 12px !important;
    padding: 4px 4px 18px !important;
}
.sp-global-nav-flat .sp-global-navgroup {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.sp-global-nav-flat .sp-global-navgroup.active {
    box-shadow: none !important;
}
.sp-global-nav-flat .sp-global-navgroup-heading {
    display: flex;
    align-items: center;
    min-height: 30px;
    margin: 2px 2px 6px;
    padding: 0 4px;
    color: rgba(226, 232, 240, .72);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.sp-global-nav-flat .sp-global-navgroup-title {
    display: inline-grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.sp-global-nav-flat .sp-global-navgroup-title > i {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    color: #bfdbfe;
    background: rgba(255,255,255,.08);
}
.sp-global-nav-flat .sp-global-navgroup-items {
    display: grid !important;
    gap: 4px !important;
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}
.sp-global-nav-flat .sp-global-navitem {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    min-height: 38px !important;
    padding: 7px 10px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    line-height: 1.18 !important;
}
.sp-global-nav-flat .sp-global-navitem i {
    width: 28px !important;
    height: 28px !important;
    border-radius: 10px !important;
}
.sp-global-nav-flat .sp-global-navitem span,
.sp-global-nav-flat .sp-global-navgroup-title span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body:not(.sp-student-layout) .sp-global-nav-flat .sp-global-navgroup-heading {
    color: #64748b;
}
body:not(.sp-student-layout) .sp-global-nav-flat .sp-global-navgroup-title > i {
    color: #2563eb;
    background: #eef5ff;
}
body:not(.sp-student-layout) .sp-global-nav-flat .sp-global-navgroup.active .sp-global-navgroup-heading {
    color: #0f172a;
}
body:not(.sp-student-layout) .sp-global-nav-flat .sp-global-navitem {
    background: transparent;
    color: #334155;
}
body:not(.sp-student-layout) .sp-global-nav-flat .sp-global-navitem:hover {
    background: #eef6ff;
}
body.schoolpro-dark:not(.sp-student-layout) .sp-global-nav-flat .sp-global-navgroup-heading {
    color: #a8b5c7;
}
body.schoolpro-dark:not(.sp-student-layout) .sp-global-nav-flat .sp-global-navgroup-title > i {
    color: #bfdbfe;
    background: rgba(148,163,184,.12);
}
body.schoolpro-dark:not(.sp-student-layout) .sp-global-nav-flat .sp-global-navitem {
    color: #dbeafe;
}
body.schoolpro-dark:not(.sp-student-layout) .sp-global-nav-flat .sp-global-navitem:hover {
    color: #fff;
    background: rgba(37,99,235,.18);
}


/* =========================================================
   INTERNATIONAL PIONEERS ACADEMY — PREMIUM SAFE V3
   Stronger visual identity without changing Moodle mechanics.
   ========================================================= */

:root {
    --ipa-blue: #1b75bb;
    --ipa-blue-deep: #0b5f9c;
    --ipa-orange: #f6921e;
    --ipa-green: #93be3e;
    --ipa-navy: #2a357d;
    --ipa-ink: #162033;
    --ipa-muted: #667085;
    --ipa-canvas: #f5f8fc;
    --ipa-card: #ffffff;
    --ipa-border: rgba(27,117,187,.13);
}

body.theme-schoolpro,
body.theme-schoolpro button,
body.theme-schoolpro input,
body.theme-schoolpro select,
body.theme-schoolpro textarea {
    font-family: Alexandria, Arial, sans-serif !important;
}

/* ===== OFFICIAL LOGO — COMPLETE / NEVER CROPPED ===== */
.sp-ipa-brand-card {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 102px !important;
    padding: 13px 10px !important;
    margin: 8px 6px 14px !important;
    background: #fff !important;
    border: 1px solid rgba(27,117,187,.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 30px rgba(42,53,125,.07) !important;
    overflow: visible !important;
}

.sp-ipa-sidebar-logo {
    display: block !important;
    width: 100% !important;
    max-width: 276px !important;
    height: auto !important;
    max-height: 76px !important;
    object-fit: contain !important;
    object-position: center center !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.sp-ipa-student-brand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 220px !important;
    min-height: 54px !important;
    padding: 6px 10px !important;
    background: #fff !important;
    border-radius: 14px !important;
    border: 1px solid rgba(27,117,187,.12) !important;
}

.sp-ipa-student-logo {
    width: 100% !important;
    max-width: 220px !important;
    height: auto !important;
    max-height: 48px !important;
    object-fit: contain !important;
}

/* ===== GLOBAL BRAND SURFACE ===== */
body.theme-schoolpro {
    background:
        radial-gradient(circle at 0% 0%, rgba(27,117,187,.07), transparent 28%),
        radial-gradient(circle at 100% 100%, rgba(246,146,30,.05), transparent 28%),
        var(--ipa-canvas) !important;
}

body.theme-schoolpro:not(.schoolpro-dark) .sp-global-sidebar {
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%) !important;
    border-inline-end: 1px solid rgba(27,117,187,.12) !important;
    box-shadow: 12px 0 34px rgba(42,53,125,.055) !important;
}

body.theme-schoolpro:not(.schoolpro-dark) .sp-global-topbar {
    background: rgba(255,255,255,.97) !important;
    border-bottom: 1px solid rgba(27,117,187,.10) !important;
    box-shadow: 0 8px 24px rgba(42,53,125,.045) !important;
}

.sp-global-nav-flat .sp-global-navgroup-heading {
    letter-spacing: .055em !important;
    color: #667085 !important;
}

body.theme-schoolpro:not(.schoolpro-dark) .sp-global-navgroup-title > i {
    color: var(--ipa-blue) !important;
    background: rgba(27,117,187,.08) !important;
}

body.theme-schoolpro:not(.schoolpro-dark) .sp-global-navitem {
    color: #344054 !important;
    border: 1px solid transparent !important;
}

body.theme-schoolpro:not(.schoolpro-dark) .sp-global-navitem:hover {
    color: var(--ipa-blue) !important;
    background: rgba(27,117,187,.065) !important;
    border-color: rgba(27,117,187,.07) !important;
}

body.theme-schoolpro:not(.schoolpro-dark) .sp-global-navitem.active {
    color: #fff !important;
    background:
        linear-gradient(135deg, var(--ipa-blue) 0%, var(--ipa-navy) 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 10px 22px rgba(27,117,187,.22) !important;
}

body.theme-schoolpro:not(.schoolpro-dark) .sp-global-navitem.active i {
    color: #fff !important;
    background: rgba(255,255,255,.12) !important;
}

/* ===== MAIN CONTENT ===== */
body.theme-schoolpro:not(.schoolpro-dark) .sp-page-frame {
    background:
        linear-gradient(180deg, rgba(255,255,255,.99), rgba(255,255,255,.96)) !important;
    border: 1px solid rgba(27,117,187,.105) !important;
    box-shadow: 0 18px 44px rgba(42,53,125,.045) !important;
}

.sp-page-frame::before {
    content: "";
    display: block;
    height: 4px;
    margin: -1px 0 14px;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            var(--ipa-blue) 0 62%,
            var(--ipa-orange) 62% 88%,
            var(--ipa-green) 88% 100%
        );
}

body.theme-schoolpro h1,
body.theme-schoolpro h2,
body.theme-schoolpro h3,
body.theme-schoolpro .page-header-headings h1 {
    color: var(--ipa-ink) !important;
    letter-spacing: -.025em;
}

body.theme-schoolpro .btn-primary,
body.theme-schoolpro input[type="submit"].btn-primary {
    background:
        linear-gradient(135deg, var(--ipa-blue), var(--ipa-navy)) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(27,117,187,.20) !important;
}

body.theme-schoolpro .btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(.97);
}

body.theme-schoolpro .btn-warning {
    color: #fff !important;
    background: var(--ipa-orange) !important;
    border-color: var(--ipa-orange) !important;
}

body.theme-schoolpro .btn-success {
    color: #fff !important;
    background: var(--ipa-green) !important;
    border-color: var(--ipa-green) !important;
}

body.theme-schoolpro .form-control:focus,
body.theme-schoolpro .form-select:focus,
body.theme-schoolpro input:focus,
body.theme-schoolpro select:focus,
body.theme-schoolpro textarea:focus {
    border-color: var(--ipa-blue) !important;
    box-shadow: 0 0 0 .2rem rgba(27,117,187,.11) !important;
}

body.theme-schoolpro .generaltable thead th,
body.theme-schoolpro .table thead th {
    color: var(--ipa-navy) !important;
    background: linear-gradient(180deg, #f7fbff, #f2f7fc) !important;
    border-bottom-color: rgba(27,117,187,.16) !important;
}

/* ===== SCHOOL ADMIN COMPONENTS ===== */
.school-admin-role-note {
    color: var(--ipa-navy) !important;
    background:
        linear-gradient(90deg, rgba(27,117,187,.075), rgba(246,146,30,.04)) !important;
    border-color: rgba(27,117,187,.20) !important;
}

.school-admin-actions .btn-primary,
.school-admin-form .btn-primary,
.school-admin-panel .btn-primary {
    background: linear-gradient(135deg, var(--ipa-blue), var(--ipa-navy)) !important;
    border-color: transparent !important;
}

/* =========================================================
   PREMIUM LOGIN — STRONG BRAND IDENTITY
   ========================================================= */

.sp-ipa-login-v3 {
    min-height: 100vh;
    background:
        radial-gradient(circle at 0 0, rgba(27,117,187,.12), transparent 30%),
        radial-gradient(circle at 100% 100%, rgba(246,146,30,.08), transparent 34%),
        #edf3f9 !important;
}

.sp-ipa-login-v3 .sp-login-shell {
    position: relative;
    overflow: hidden;
    min-height: min(820px, calc(100vh - 48px));
    max-width: 1320px;
    margin: 24px auto;
    border-radius: 30px !important;
    border: 1px solid rgba(27,117,187,.10);
    background: #fff;
    box-shadow:
        0 34px 90px rgba(42,53,125,.14),
        0 10px 30px rgba(27,117,187,.08);
}

.sp-ipa-login-story {
    position: relative;
    isolation: isolate;
    padding: 46px !important;
    color: #fff !important;
    background:
        radial-gradient(circle at 20% 15%, rgba(255,255,255,.12), transparent 28%),
        radial-gradient(circle at 85% 75%, rgba(246,146,30,.18), transparent 30%),
        linear-gradient(145deg, #22306f 0%, #145f9a 48%, #1b75bb 100%) !important;
}

.sp-ipa-login-story::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .18;
    background:
        repeating-linear-gradient(
            -26deg,
            rgba(255,255,255,.055) 0 1px,
            transparent 1px 26px
        );
}

.sp-ipa-login-story::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -170px;
    width: 520px;
    height: 520px;
    z-index: -1;
    border: 2px solid rgba(255,255,255,.10);
    border-radius: 50%;
    box-shadow:
        0 0 0 52px rgba(255,255,255,.025),
        0 0 0 104px rgba(255,255,255,.018);
}

.sp-ipa-login-brand-panel {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: min(100%, 520px);
    min-height: 118px;
    padding: 20px 22px;
    margin-bottom: 34px;
    border-radius: 22px;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 18px 42px rgba(0,0,0,.14);
}

.sp-ipa-login-official-logo {
    display: block !important;
    width: 100% !important;
    max-width: 475px !important;
    height: auto !important;
    max-height: 112px !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.sp-ipa-login-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 7px 11px;
    border-radius: 999px;
    color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.095);
    border: 1px solid rgba(255,255,255,.16);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .13em;
}

.sp-ipa-login-hero h2 {
    margin: 0 0 18px !important;
    color: #fff !important;
    font-size: clamp(38px, 4vw, 62px) !important;
    line-height: 1.03 !important;
    letter-spacing: -.045em !important;
}

.sp-ipa-login-hero p {
    max-width: 610px;
    margin: 0 !important;
    color: rgba(255,255,255,.84) !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
}

.sp-ipa-login-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 28px 0 24px;
}

.sp-ipa-login-features span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    border-radius: 12px;
    color: #fff;
    background: rgba(255,255,255,.085);
    border: 1px solid rgba(255,255,255,.14);
    font-size: 12px;
    font-weight: 800;
}

.sp-ipa-login-features i {
    color: #fbb25f;
}

.sp-ipa-login-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px !important;
    margin-top: auto;
}

.sp-ipa-login-metrics .sp-login-metric {
    min-width: 0 !important;
    padding: 15px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.075) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    backdrop-filter: blur(12px);
}

.sp-ipa-login-metrics .sp-login-metric strong {
    color: #fff !important;
    font-size: 18px !important;
}

.sp-ipa-login-metrics .sp-login-metric span {
    color: rgba(255,255,255,.72) !important;
    font-size: 11px !important;
}

.sp-ipa-login-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(32px, 5vw, 68px) !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
}

.sp-ipa-login-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background:
        linear-gradient(90deg, var(--ipa-blue), var(--ipa-orange), var(--ipa-green));
}

.sp-ipa-login-card-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 30px;
}

.sp-ipa-mini-mark {
    width: 8px;
    height: 52px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, var(--ipa-blue) 0 62%, var(--ipa-orange) 62%);
    box-shadow: 0 10px 24px rgba(27,117,187,.18);
}

.sp-ipa-login-card-head small {
    display: block;
    margin-bottom: 4px;
    color: var(--ipa-blue);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
}

.sp-ipa-login-card-head h1 {
    margin: 0 !important;
    color: var(--ipa-ink) !important;
    font-size: 30px !important;
    letter-spacing: -.035em !important;
}

.sp-ipa-login-card .loginform,
.sp-ipa-login-card .login-form {
    width: 100%;
}

.sp-ipa-login-card .form-control {
    min-height: 50px;
    border-radius: 12px !important;
    border-color: #dce4ed !important;
    background: #fff !important;
}

.sp-ipa-login-card .btn-primary {
    min-height: 50px;
    border-radius: 12px !important;
    font-weight: 850 !important;
    letter-spacing: .01em;
}

.sp-ipa-login-card-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid #edf0f4;
    color: #667085;
    font-size: 11px;
}

.sp-ipa-login-card-footer strong {
    color: var(--ipa-navy);
}

/* ===== DARK MODE — retain mechanics, align accents ===== */
body.theme-schoolpro.schoolpro-dark .sp-global-navitem.active,
body.theme-schoolpro.schoolpro-dark .btn-primary {
    background: linear-gradient(135deg, var(--ipa-blue), var(--ipa-navy)) !important;
}

body.theme-schoolpro.schoolpro-dark a:not(.btn):not(.sp-global-navitem) {
    color: #67b9f1 !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
    .sp-ipa-sidebar-logo {
        max-width: 246px !important;
        max-height: 68px !important;
    }

    .sp-ipa-login-story {
        padding: 34px !important;
    }

    .sp-ipa-login-brand-panel {
        min-height: 100px;
    }
}

@media (max-width: 767.98px) {
    .sp-ipa-student-brand {
        min-width: 168px !important;
    }

    .sp-ipa-student-logo {
        max-width: 168px !important;
        max-height: 40px !important;
    }

    .sp-ipa-login-v3 .sp-login-shell {
        margin: 0;
        min-height: 100vh;
        border-radius: 0 !important;
    }

    .sp-ipa-login-story {
        padding: 26px 22px !important;
    }

    .sp-ipa-login-brand-panel {
        width: 100%;
        min-height: 88px;
        padding: 14px;
        margin-bottom: 24px;
    }

    .sp-ipa-login-official-logo {
        max-width: 100% !important;
        max-height: 82px !important;
    }

    .sp-ipa-login-hero h2 {
        font-size: 38px !important;
    }

    .sp-ipa-login-metrics {
        grid-template-columns: 1fr !important;
    }

    .sp-ipa-login-card {
        padding: 34px 22px !important;
    }
}


/* =========================================================
   IPA LOGIN V4 — CLEAN PREMIUM AUTH EXPERIENCE
   Login-page overrides only. Main application layout untouched.
   ========================================================= */

.sp-ipa-login-v4 {
    min-height: 100vh;
    padding: 28px;
    background:
        radial-gradient(circle at 10% 10%, rgba(27,117,187,.10), transparent 26%),
        radial-gradient(circle at 92% 90%, rgba(246,146,30,.08), transparent 28%),
        #eef3f8;
}

.sp-ipa-auth-shell {
    display: grid;
    grid-template-columns: minmax(420px, 1.05fr) minmax(420px, .95fr);
    width: min(1240px, 100%);
    min-height: calc(100vh - 56px);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(27,117,187,.11);
    border-radius: 28px;
    background: #fff;
    box-shadow:
        0 30px 80px rgba(42,53,125,.12),
        0 12px 30px rgba(27,117,187,.06);
}

/* Brand side */
.sp-ipa-auth-brand {
    position: relative;
    display: flex;
    min-width: 0;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 16% 16%, rgba(255,255,255,.11), transparent 26%),
        radial-gradient(circle at 88% 85%, rgba(246,146,30,.20), transparent 28%),
        linear-gradient(145deg, #243074 0%, #155f9b 50%, #1b75bb 100%);
}

.sp-ipa-auth-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .12;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            -22deg,
            rgba(255,255,255,.12) 0 1px,
            transparent 1px 28px
        );
}

.sp-ipa-auth-brand::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    right: -250px;
    bottom: -280px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow:
        0 0 0 54px rgba(255,255,255,.028),
        0 0 0 108px rgba(255,255,255,.018);
    pointer-events: none;
}

.sp-ipa-auth-brand-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    padding: clamp(34px, 5vw, 64px);
}

.sp-ipa-auth-logo-wrap {
    display: inline-flex;
    align-self: flex-start;
    width: min(390px, 82%);
    min-height: 86px;
    padding: 14px 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(255,255,255,.45);
    box-shadow: 0 18px 42px rgba(0,0,0,.12);
}

.sp-ipa-auth-logo {
    display: block;
    width: 100%;
    height: auto;
    max-height: 92px;
    object-fit: contain;
    object-position: left center;
}

.sp-ipa-auth-copy {
    margin-top: auto;
    max-width: 610px;
    padding-top: 72px;
}

.sp-ipa-auth-eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 18px;
    padding: 7px 11px;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 999px;
    background: rgba(255,255,255,.075);
    color: rgba(255,255,255,.91);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .15em;
}

.sp-ipa-auth-copy h1 {
    margin: 0 0 20px !important;
    color: #fff !important;
    font-size: clamp(40px, 4.2vw, 62px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.05em !important;
}

.sp-ipa-auth-copy h1 span {
    color: #ffd29b;
}

.sp-ipa-auth-copy p {
    max-width: 560px;
    margin: 0;
    color: rgba(255,255,255,.80);
    font-size: 15px;
    line-height: 1.85;
}

.sp-ipa-auth-programs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 32px;
}

.sp-ipa-auth-programs > div {
    min-width: 0;
    padding: 14px 15px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    background: rgba(255,255,255,.075);
    backdrop-filter: blur(10px);
}

.sp-ipa-auth-programs strong {
    display: block;
    margin-bottom: 3px;
    color: #fff;
    font-size: 17px;
    letter-spacing: -.02em;
}

.sp-ipa-auth-programs span {
    display: block;
    color: rgba(255,255,255,.68);
    font-size: 10px;
}

.sp-ipa-auth-signature {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    color: rgba(255,255,255,.68);
}

.sp-ipa-auth-signature > span {
    width: 48px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f6921e, #93be3e);
}

.sp-ipa-auth-signature small {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
}

/* Form side */
.sp-ipa-auth-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: clamp(30px, 5vw, 66px);
    background:
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.sp-ipa-auth-form-card {
    width: min(100%, 460px);
}

.sp-ipa-auth-form-header {
    margin-bottom: 28px;
}

.sp-ipa-auth-form-kicker {
    display: block;
    margin-bottom: 8px;
    color: #1b75bb;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
}

.sp-ipa-auth-form-header h2 {
    margin: 0 0 10px !important;
    color: #182033 !important;
    font-size: clamp(30px, 3vw, 40px) !important;
    line-height: 1.1 !important;
    letter-spacing: -.04em !important;
}

.sp-ipa-auth-form-header p {
    margin: 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.7;
}

/* Moodle-generated login form normalization */
.sp-ipa-auth-moodle-form .loginform,
.sp-ipa-auth-moodle-form .login-form,
.sp-ipa-auth-moodle-form .loginform .form-group,
.sp-ipa-auth-moodle-form .login-form .form-group {
    width: 100%;
}

.sp-ipa-auth-moodle-form input[type="text"],
.sp-ipa-auth-moodle-form input[type="password"],
.sp-ipa-auth-moodle-form input[type="email"],
.sp-ipa-auth-moodle-form .form-control {
    min-height: 52px !important;
    border: 1px solid #dbe3ec !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #182033 !important;
    box-shadow: none !important;
}

.sp-ipa-auth-moodle-form input:focus,
.sp-ipa-auth-moodle-form .form-control:focus {
    border-color: #1b75bb !important;
    box-shadow: 0 0 0 4px rgba(27,117,187,.10) !important;
}

.sp-ipa-auth-moodle-form label {
    color: #344054 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.sp-ipa-auth-moodle-form .btn-primary,
.sp-ipa-auth-moodle-form #loginbtn {
    width: 100%;
    min-height: 52px;
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #1b75bb, #2a357d) !important;
    color: #fff !important;
    font-weight: 900 !important;
    box-shadow: 0 10px 22px rgba(27,117,187,.18) !important;
}

.sp-ipa-auth-moodle-form .btn-primary:hover,
.sp-ipa-auth-moodle-form #loginbtn:hover {
    transform: translateY(-1px);
    filter: brightness(.98);
}

.sp-ipa-auth-moodle-form a {
    color: #1b75bb !important;
    font-weight: 700;
}

.sp-ipa-auth-moodle-form .loginerrors,
.sp-ipa-auth-moodle-form .alert {
    border-radius: 12px !important;
}

.sp-ipa-auth-form-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid #edf0f4;
    color: #8a94a6;
    font-size: 10px;
}

.sp-ipa-auth-form-footer strong {
    color: #2a357d;
}

.sp-ipa-auth-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #f6921e;
}

/* Hide older decorative/login blocks if they leak through from inherited CSS */
.sp-ipa-login-v4 .sp-login-story,
.sp-ipa-login-v4 .sp-login-card,
.sp-ipa-login-v4 .sp-login-metrics,
.sp-ipa-login-v4 .sp-ipa-login-story,
.sp-ipa-login-v4 .sp-ipa-login-card,
.sp-ipa-login-v4 .sp-ipa-login-kicker,
.sp-ipa-login-v4 .sp-ipa-login-features,
.sp-ipa-login-v4 .sp-ipa-login-metrics {
    all: unset;
}

/* Reapply shell display after reset conflict protections */
.sp-ipa-login-v4 .sp-ipa-auth-brand,
.sp-ipa-login-v4 .sp-ipa-auth-form-side {
    box-sizing: border-box;
}

/* Responsive */
@media (max-width: 980px) {
    .sp-ipa-login-v4 {
        padding: 0;
    }

    .sp-ipa-auth-shell {
        grid-template-columns: 1fr;
        width: 100%;
        min-height: 100vh;
        border: 0;
        border-radius: 0;
    }

    .sp-ipa-auth-brand {
        min-height: 420px;
    }

    .sp-ipa-auth-brand-inner {
        padding: 30px 24px;
    }

    .sp-ipa-auth-copy {
        padding-top: 44px;
    }

    .sp-ipa-auth-programs {
        grid-template-columns: repeat(3, 1fr);
    }

    .sp-ipa-auth-form-side {
        padding: 38px 24px 48px;
    }
}

@media (max-width: 560px) {
    .sp-ipa-auth-brand {
        min-height: 390px;
    }

    .sp-ipa-auth-logo-wrap {
        width: 100%;
        min-height: 72px;
        padding: 12px 14px;
    }

    .sp-ipa-auth-logo {
        max-height: 70px;
    }

    .sp-ipa-auth-copy h1 {
        font-size: 38px !important;
    }

    .sp-ipa-auth-copy p {
        font-size: 13px;
    }

    .sp-ipa-auth-programs {
        grid-template-columns: 1fr;
    }

    .sp-ipa-auth-signature {
        margin-top: 20px;
    }
}


/* =========================================================
   MOODLE ACTIVITY / LESSON RESPONSIVE MEDIA FIX
   ========================================================= */

/*
 * Never allow Moodle activity content to make the main
 * layout wider than the available viewport.
 */
body.theme-schoolpro .sp-page-frame,
body.theme-schoolpro #page-content,
body.theme-schoolpro #region-main-box,
body.theme-schoolpro #region-main {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/*
 * Moodle Lesson content may contain uploaded videos without
 * width attributes. Force them to remain inside the activity.
 */
body.theme-schoolpro.path-mod-lesson #region-main video,
body.theme-schoolpro.path-mod-lesson #region-main audio {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

/*
 * Responsive external media.
 */
body.theme-schoolpro.path-mod-lesson #region-main iframe,
body.theme-schoolpro.path-mod-lesson #region-main embed,
body.theme-schoolpro.path-mod-lesson #region-main object {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

body.theme-schoolpro.path-mod-lesson #region-main iframe {
    width: 100% !important;
}

/*
 * Prevent long content, equations, URLs and generated
 * Lesson content from forcing horizontal page expansion.
 */
body.theme-schoolpro.path-mod-lesson #region-main,
body.theme-schoolpro.path-mod-lesson #region-main .content,
body.theme-schoolpro.path-mod-lesson #region-main .contents,
body.theme-schoolpro.path-mod-lesson #region-main .generalbox,
body.theme-schoolpro.path-mod-lesson #region-main .box {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
    word-break: normal;
}

/*
 * Images must also respect the available activity width.
 */
body.theme-schoolpro.path-mod-lesson #region-main img {
    max-width: 100% !important;
    height: auto !important;
}

/*
 * Tables are allowed to scroll instead of destroying
 * the complete page layout.
 */
body.theme-schoolpro.path-mod-lesson #region-main .table-responsive {
    max-width: 100% !important;
    overflow-x: auto !important;
}

/*
 * Medium / small laptops and browser zoom.
 */
@media (max-width: 1200px) {
    body.theme-schoolpro.path-mod-lesson .sp-page-frame {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.theme-schoolpro.path-mod-lesson #page-content,
    body.theme-schoolpro.path-mod-lesson #region-main-box,
    body.theme-schoolpro.path-mod-lesson #region-main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/*
 * Phones / tablets.
 */
@media (max-width: 767.98px) {
    body.theme-schoolpro.path-mod-lesson #region-main video,
    body.theme-schoolpro.path-mod-lesson #region-main iframe,
    body.theme-schoolpro.path-mod-lesson #region-main embed,
    body.theme-schoolpro.path-mod-lesson #region-main object {
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* ===== Professional Lesson Video Presentation ===== */

body.theme-schoolpro.path-mod-lesson #region-main video {
    width: min(100%, 1100px) !important;
    margin-inline: auto !important;
    margin-top: 12px !important;
    margin-bottom: 24px !important;
    border-radius: 16px !important;
    background: #000 !important;
    box-shadow: 0 12px 32px rgba(15,23,42,.10);
}