/* =========================================================
   MWINGO ACADEMY THE SKY IS THE LIMIT
   COMPLETE FUSED STYLE SHEET
   ---------------------------------------------------------
   Includes:
   - Main system
   - Dashboard
   - Learners
   - Marks
   - Marklist
   - Reports
   - Attendance
   - Comments
   - Manage / Admin
   - Parent Portal
   - Parent Registration
   - Login
   - Welcome Animation
   - School Logo
   - Background Images
   - Responsive Design
   - Mobile Design
   - Print Design
========================================================= */


/* =========================================================
   GLOBAL RESET
========================================================= */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    padding: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #18222d;

    background:
        #f4f7fa
        url("mwingo_background.jpg")
        center center /
        cover
        fixed
        no-repeat;
}


/* =========================================================
   NORMAL PAGE BACKGROUND OVERLAY
========================================================= */

body::before {
    content: "";

    position: fixed;

    inset: 0;

    background:
        linear-gradient(
            rgba(8, 35, 65, 0.16),
            rgba(8, 35, 65, 0.28)
        );

    z-index: -1;

    pointer-events: none;
}


/* =========================================================
   GENERAL TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
}

h1 {
    color: #0a3558;

    animation:
        fadeInUp
        0.7s
        ease;
}

h2 {
    color: #173f63;
}

h3 {
    color: #204f75;
}

p {
    line-height: 1.6;
}

a {
    color: #1769aa;

    transition:
        color 0.25s ease,
        opacity 0.25s ease;
}

a:hover {
    opacity: 0.85;
}


/* =========================================================
   HEADER
========================================================= */

header {
    position: relative;

    z-index: 50;

    background:
        rgba(23, 54, 93, 0.97);

    color: #fff;

    padding:
        15px
        4%;

    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap: 15px;

    flex-wrap: wrap;

    box-shadow:
        0 3px 14px
        rgba(0, 0, 0, 0.20);

    animation:
        slideDown
        0.7s
        ease;
}


/* =========================================================
   SCHOOL BRAND
========================================================= */

.brand {
    font-weight: 700;

    font-size: 21px;

    display: flex;

    align-items: center;

    gap: 10px;
}

.brand small {
    display: block;

    font-size: 11px;

    font-weight: 400;

    margin-top: 3px;
}

.brand .logo {
    width: 42px;

    height: 42px;

    object-fit: contain;

    border-radius: 7px;

    background: #fff;

    padding: 2px;

    transition:
        transform 0.4s ease,
        box-shadow 0.3s ease;
}

.brand .logo:hover {
    transform:
        rotate(6deg)
        scale(1.12);

    box-shadow:
        0 0 16px
        rgba(255, 215, 100, 0.8);
}


/* =========================================================
   NAVIGATION
========================================================= */

nav {
    display: flex;

    flex-wrap: wrap;

    gap: 5px;

    align-items: center;
}

nav a {
    color: #fff;

    text-decoration: none;

    padding:
        8px
        9px;

    border-radius: 6px;

    display: inline-block;

    font-size: 14px;

    transition:
        background 0.3s ease,
        transform 0.2s ease,
        box-shadow 0.3s ease;
}

nav a:hover {
    color: #fff;

    opacity: 1;

    background:
        rgba(255, 255, 255, 0.13);

    transform:
        translateY(-2px);

    box-shadow:
        0 4px 10px
        rgba(0, 0, 0, 0.20);
}


/* =========================================================
   MAIN SYSTEM CONTAINER
========================================================= */

main {
    max-width: 1200px;

    width: 94%;

    margin:
        24px auto;

    padding: 20px;

    background:
        rgba(255, 255, 255, 0.78);

    border-radius:
        14px;

    backdrop-filter:
        blur(4px);

    -webkit-backdrop-filter:
        blur(4px);

    box-shadow:
        0 8px 30px
        rgba(0, 0, 0, 0.08);

    animation:
        fadeIn
        0.8s
        ease;
}


/* =========================================================
   USER INFORMATION
========================================================= */

.user {
    background: #fff;

    border-radius: 8px;

    padding:
        10px 12px;

    margin-bottom: 16px;

    color: #667;

    box-shadow:
        0 2px 7px
        rgba(0, 0, 0, 0.06);

    transition:
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.user:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 5px 14px
        rgba(0, 0, 0, 0.13);
}


/* =========================================================
   DASHBOARD CARDS
========================================================= */

.cards {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(170px, 1fr)
        );

    gap: 15px;
}

.card {
    position: relative;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.95);

    padding: 18px;

    border-radius: 11px;

    box-shadow:
        0 2px 8px
        rgba(0, 0, 0, 0.07);

    margin-bottom: 18px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;

    animation:
        fadeInUp
        0.7s
        ease;
}

.card::after {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #28a8ff,
            transparent
        );

    transition:
        left 0.5s ease;
}

.card:hover::after {
    left: 100%;
}

.card:hover {
    transform:
        translateY(-7px)
        scale(1.015);

    box-shadow:
        0 12px 28px
        rgba(0, 0, 0, 0.20);

    background: #fff;
}

.card b {
    font-size: 30px;

    display: block;

    color: #1769aa;

    transition:
        transform 0.3s ease,
        color 0.3s ease;
}

.card:hover b {
    transform:
        scale(1.12);

    color: #0e4f82;
}

.card span {
    color: #667;
}


/* =========================================================
   PANELS
========================================================= */

.panel {
    background:
        rgba(255, 255, 255, 0.95);

    padding: 18px;

    border-radius: 10px;

    box-shadow:
        0 2px 8px
        rgba(0, 0, 0, 0.07);

    margin-bottom: 18px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.panel:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 10px 24px
        rgba(0, 0, 0, 0.14);
}


/* =========================================================
   BUTTONS
========================================================= */

.button,
button {
    background:
        #1769aa;

    color: #fff;

    border: 0;

    padding:
        10px 14px;

    border-radius: 6px;

    text-decoration: none;

    cursor: pointer;

    margin: 4px;

    display: inline-block;

    font-family: inherit;

    font-size: 14px;

    transition:
        transform 0.2s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.button:hover,
button:hover {
    background:
        #0e4f82;

    color: #fff;

    opacity: 1;

    transform:
        translateY(-2px)
        scale(1.02);

    box-shadow:
        0 6px 14px
        rgba(0, 0, 0, 0.22);
}

.button:active,
button:active {
    transform:
        scale(0.97);
}


/* Button variations */

.button-danger,
button.danger,
.danger {
    background:
        #c62828;
}

.button-danger:hover,
button.danger:hover,
.danger:hover {
    background:
        #9f1f1f;
}

.button-success,
button.success,
.success {
    background:
        #198754;
}

.button-success:hover,
button.success:hover,
.success:hover {
    background:
        #12683f;
}

.button-warning,
button.warning,
.warning {
    background:
        #d98b00;
}

.button-warning:hover,
button.warning:hover,
.warning:hover {
    background:
        #b46f00;
}

.button-secondary,
button.secondary,
.secondary {
    background:
        #607d8b;
}

.button-secondary:hover,
button.secondary:hover,
.secondary:hover {
    background:
        #455a64;
}


/* =========================================================
   FORMS
========================================================= */

form {
    max-width: 100%;
}

.panel form {
    display: grid;

    gap: 9px;
}

label {
    color: #24415e;

    font-weight: 600;
}

.filters {
    display: flex;

    gap: 9px;

    flex-wrap: wrap;

    background: #fff;

    padding: 14px;

    border-radius: 8px;

    margin-bottom: 15px;

    animation:
        fadeIn
        0.6s
        ease;
}

.filters select,
.filters input {
    flex: 1;

    min-width: 150px;
}


/* =========================================================
   INPUTS / SELECT / TEXTAREA
========================================================= */

input,
select,
textarea {
    width: 100%;

    padding: 10px;

    border:
        1px solid #cbd3db;

    border-radius: 6px;

    font-family: inherit;

    font-size: 14px;

    max-width: 100%;

    background: #fff;

    color: #18222d;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.2s ease;
}

textarea {
    min-height: 100px;

    resize: vertical;
}

input:hover,
select:hover,
textarea:hover {
    border-color:
        #6da4ca;
}

input:focus,
select:focus,
textarea:focus {
    border-color:
        #1769aa;

    box-shadow:
        0 0 0 3px
        rgba(23, 105, 170, 0.12);

    outline: none;

    transform:
        translateY(-1px);
}

input::placeholder,
textarea::placeholder {
    color: #8a9caf;
}


/* =========================================================
   GRID
========================================================= */

.grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(250px, 1fr)
        );

    gap: 15px;
}


/* =========================================================
   TABLES
========================================================= */

table {
    width: 100%;

    border-collapse:
        collapse;

    background: #fff;

    margin:
        15px 0;

    animation:
        fadeIn
        0.7s
        ease;
}

th,
td {
    border:
        1px solid #ddd;

    padding:
        9px;

    text-align: left;
}

th {
    background:
        #e8eef4;

    color:
        #173f63;

    font-weight:
        700;
}

tbody tr {
    transition:
        background 0.25s ease;
}

tbody tr:hover {
    background:
        #eef7ff;
}

table a {
    font-weight:
        600;
}


/* =========================================================
   MARK INPUTS
========================================================= */

.mark {
    width: 90px;

    text-align: center;
}


/* =========================================================
   NOTICES / ERRORS
========================================================= */

.notice {
    padding:
        11px 13px;

    background:
        #e7f7e9;

    border:
        1px solid #acd7b1;

    border-radius:
        7px;

    color:
        #216b2b;

    animation:
        fadeIn
        0.5s
        ease;
}

.error {
    padding:
        10px 13px;

    background:
        #fee;

    border:
        1px solid #eaa;

    border-radius:
        7px;

    color:
        #9b1c1c;

    animation:
        shake
        0.4s
        ease;
}


/* =========================================================
   TAGS
========================================================= */

.tag {
    display: inline-block;

    background:
        #e8eef4;

    padding:
        7px 10px;

    border-radius:
        20px;

    margin:
        3px;

    transition:
        transform 0.2s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.tag:hover {
    transform:
        scale(1.08);

    background:
        #d7ebfa;

    box-shadow:
        0 4px 10px
        rgba(0, 0, 0, 0.12);
}


/* =========================================================
   SUBJECT GRID
========================================================= */

.subject-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px, 1fr)
        );

    gap: 10px;

    margin:
        15px 0;
}

.subject-grid label {
    padding:
        10px;

    border:
        1px solid #ddd;

    border-radius:
        8px;

    cursor:
        pointer;

    transition:
        transform 0.2s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.subject-grid label:hover {
    transform:
        translateY(-4px);

    background:
        #f0f8ff;

    box-shadow:
        0 5px 13px
        rgba(0, 0, 0, 0.13);
}

.subject-grid input {
    width:
        auto;

    margin-right:
        6px;
}


/* =========================================================
   PARENT PORTAL
========================================================= */

.parent-page {
    background:
        linear-gradient(
            135deg,
            #edf7ff,
            #f7fbff
        );
}

.parent-header {
    background:
        linear-gradient(
            135deg,
            #073b70,
            #0b73bd
        );

    color: #fff;

    padding:
        25px;

    border-radius:
        14px;

    margin-bottom:
        20px;

    box-shadow:
        0 10px 30px
        rgba(0, 55, 110, 0.20);
}

.parent-header h1,
.parent-header h2,
.parent-header h3 {
    color: #fff;
}

.parent-child-card {
    background:
        rgba(255,255,255,0.97);

    border-radius:
        14px;

    padding:
        20px;

    margin-bottom:
        18px;

    box-shadow:
        0 6px 20px
        rgba(0,0,0,0.08);

    border-left:
        5px solid #158de7;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.parent-child-card:hover {
    transform:
        translateY(-5px);

    box-shadow:
        0 14px 30px
        rgba(0,0,0,0.13);
}

.parent-child-name {
    color:
        #0b4f85;

    font-size:
        22px;

    font-weight:
        800;
}

.parent-actions {
    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(150px, 1fr)
        );

    gap:
        10px;

    margin-top:
        15px;
}

.parent-actions a {
    text-align:
        center;

    padding:
        12px;

    border-radius:
        9px;

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            #1769aa,
            #168cff
        );

    text-decoration:
        none;

    font-weight:
        700;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.parent-actions a:hover {
    color:
        #fff;

    opacity:
        1;

    transform:
        translateY(-2px);

    box-shadow:
        0 7px 18px
        rgba(23,105,170,0.25);
}


/* =========================================================
   PARENT REGISTRATION PAGE
========================================================= */

.parent-register-page {
    min-height:
        100vh;

    background:
        linear-gradient(
            135deg,
            #eaf5ff,
            #f7fbff
        );
}

.parent-register-card {
    max-width:
        650px;

    margin:
        30px auto;

    padding:
        30px;

    background:
        rgba(255,255,255,0.97);

    border-radius:
        20px;

    box-shadow:
        0 20px 60px
        rgba(0,50,100,0.16);

    animation:
        zoomIn
        0.6s
        ease;
}

.parent-register-card h1 {
    text-align:
        center;

    color:
        #0b4f85;
}

.parent-register-card .school-logo {
    display:
        block;

    width:
        110px;

    height:
        110px;

    object-fit:
        contain;

    margin:
        0 auto 15px;

    filter:
        drop-shadow(
            0 8px 16px
            rgba(0,0,0,0.18)
        );
}

.parent-register-card .form-group {
    margin-bottom:
        15px;
}

.parent-register-card .form-group label {
    display:
        block;

    margin-bottom:
        7px;
}


/* =========================================================
   LOGIN PAGE
========================================================= */

.login-page {
    min-height:
        100vh;

    width:
        100%;

    margin:
        0;

    padding:
        0;

    display:
        flex;

    justify-content:
        center;

    align-items:
        flex-start;

    position:
        relative;

    overflow-x:
        hidden;

    overflow-y:
        auto;

    background:
        #061a32;

    color:
        #18222d;
}


/* =========================================================
   LOGIN BACKGROUND
========================================================= */

.login-page .login-background {
    position:
        fixed;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    background-image:
        url("login-bg.jpg");

    background-size:
        cover;

    background-position:
        center center;

    background-repeat:
        no-repeat;

    z-index:
        0;

    transform:
        scale(1.03);

    animation:
        loginBackgroundZoom
        14s
        ease-out
        forwards;
}


/* =========================================================
   LOGIN OVERLAY
========================================================= */

.login-page .login-overlay {
    position:
        fixed;

    inset:
        0;

    background:
        linear-gradient(
            135deg,
            rgba(3, 24, 52, 0.76),
            rgba(0, 91, 180, 0.42),
            rgba(2, 20, 45, 0.82)
        );

    z-index:
        1;
}


/* =========================================================
   LOGIN CONTAINER
========================================================= */

.login-page .login-container {
    position:
        relative;

    z-index:
        10;

    width:
        min(94%, 760px);

    min-height:
        100vh;

    margin:
        0 auto;

    padding:
        35px
        20px
        110px;

    box-sizing:
        border-box;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-start;

    background:
        transparent;

    border-radius:
        0;

    backdrop-filter:
        none;

    box-shadow:
        none;
}


/* =========================================================
   LOGIN BRAND
========================================================= */

.login-page .login-brand {
    width:
        100%;

    text-align:
        center;

    color:
        #fff;

    margin-bottom:
        25px;

    animation:
        loginBrandEnter
        0.9s
        ease-out;
}


/* =========================================================
   LOGIN LOGO
========================================================= */

.login-page .logo-wrapper {
    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    margin-bottom:
        10px;
}

.login-page .login-logo {
    width:
        150px;

    height:
        150px;

    max-width:
        150px;

    object-fit:
        contain;

    display:
        block;

    opacity:
        1;

    transform:
        scale(1);

    filter:
        drop-shadow(
            0 12px 25px
            rgba(0,0,0,0.55)
        );

    animation:
        logoAppear
        1.1s
        ease-out;
}

.login-page .login-logo.logo-loaded {
    opacity:
        1;

    transform:
        scale(1)
        rotate(0deg);
}


/* =========================================================
   SCHOOL NAME
========================================================= */

.login-page .login-brand h1 {
    margin:
        5px 0 8px;

    color:
        #fff;

    font-size:
        clamp(30px, 6vw, 52px);

    line-height:
        1.05;

    font-weight:
        900;

    letter-spacing:
        2px;

    text-shadow:
        0 4px 18px
        rgba(0,0,0,0.55);
}


/* =========================================================
   LOGIN MOTTO
========================================================= */

.login-page .motto {
    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        16px;

    color:
        #fff;
}

.login-page .motto span {
    width:
        65px;

    height:
        3px;

    display:
        block;

    border-radius:
        10px;

    background:
        #28a8ff;

    box-shadow:
        0 0 12px
        rgba(40,168,255,0.75);
}

.login-page .motto em {
    color:
        #fff;

    font-size:
        clamp(15px, 3vw, 21px);

    font-style:
        italic;

    letter-spacing:
        1px;
}


/* =========================================================
   LOGIN CARD
========================================================= */

.login-page .login-card {
    width:
        100%;

    max-width:
        590px;

    margin:
        0;

    padding:
        38px;

    box-sizing:
        border-box;

    border-radius:
        24px;

    background:
        rgba(255,255,255,0.97);

    border:
        1px solid
        rgba(255,255,255,0.90);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,0.45);

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

    opacity:
        0;

    transform:
        translateY(35px)
        scale(0.97);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.login-page .login-card.card-visible {
    opacity:
        1;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   LOGIN CARD HEADER
========================================================= */

.login-page .login-card-header {
    text-align:
        center;

    margin-bottom:
        28px;
}

.login-page .login-card-header h2 {
    margin:
        0 0 7px;

    color:
        #10467e;

    font-size:
        clamp(28px, 5vw, 38px);

    font-weight:
        800;
}

.login-page .login-card-header p {
    margin:
        0;

    color:
        #60748b;

    font-size:
        16px;
}


/* =========================================================
   LOGIN ERROR
========================================================= */

.login-page .login-error {
    padding:
        13px 16px;

    margin:
        0 0 20px;

    border-radius:
        12px;

    background:
        #ffe8e8;

    border:
        1px solid #ffbaba;

    color:
        #a50000;

    text-align:
        center;

    font-weight:
        600;

    animation:
        loginErrorShake
        0.45s
        ease;
}


/* =========================================================
   LOGIN FORM
========================================================= */

.login-page .login-form {
    display:
        flex;

    flex-direction:
        column;

    gap:
        20px;

    margin:
        0;
}

.login-page .login-field {
    display:
        block;
}

.login-page .login-field label {
    display:
        block;

    margin-bottom:
        8px;

    color:
        #24415e;

    font-weight:
        700;

    font-size:
        15px;
}


/* =========================================================
   LOGIN INPUT WRAPPER
========================================================= */

.login-page .input-wrapper {
    position:
        relative;

    width:
        100%;
}

.login-page .input-icon {
    position:
        absolute;

    left:
        18px;

    top:
        50%;

    transform:
        translateY(-50%);

    font-size:
        20px;

    z-index:
        2;

    pointer-events:
        none;
}


/* =========================================================
   LOGIN INPUTS
========================================================= */

.login-page .input-wrapper input {
    width:
        100%;

    height:
        58px;

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        0 18px 0 55px;

    border:
        1px solid #c9dcef;

    border-radius:
        13px;

    background:
        rgba(242,248,255,0.96);

    color:
        #173b60;

    font-size:
        16px;

    outline:
        none;

    max-width:
        none;

    transform:
        none;
}

.login-page .input-wrapper input:hover {
    border-color:
        #76acd2;

    transform:
        none;
}

.login-page .input-wrapper input:focus {
    border-color:
        #168cff;

    background:
        #fff;

    box-shadow:
        0 0 0 4px
        rgba(22,140,255,0.12);

    transform:
        none;
}

.login-page .input-wrapper input::placeholder {
    color:
        #8a9caf;
}


/* =========================================================
   LOGIN SUBMIT BUTTON
========================================================= */

.login-page .login-submit {
    width:
        100%;

    min-height:
        60px;

    margin:
        0;

    padding:
        12px 20px;

    border:
        0;

    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            #075bb8,
            #087de0
        );

    color:
        #fff;

    font-size:
        18px;

    font-weight:
        800;

    cursor:
        pointer;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        18px;

    box-shadow:
        0 8px 22px
        rgba(5,91,184,0.30);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.login-page .login-submit:hover {
    background:
        linear-gradient(
            135deg,
            #064f9f,
            #0673d0
        );

    transform:
        translateY(-2px)
        scale(1.01);

    box-shadow:
        0 13px 28px
        rgba(5,91,184,0.40);
}

.login-page .login-submit:active {
    transform:
        translateY(0)
        scale(0.98);
}

.login-page .login-arrow {
    font-size:
        28px;

    line-height:
        1;

    transition:
        transform 0.25s ease;
}

.login-page .login-submit:hover .login-arrow {
    transform:
        translateX(6px);
}


/* =========================================================
   LOGIN OR DIVIDER
========================================================= */

.login-page .login-divider {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin:
        25px 0;

    color:
        #72869c;
}

.login-page .login-divider span {
    flex:
        1;

    height:
        1px;

    background:
        #d7e1eb;
}

.login-page .login-divider strong {
    font-size:
        14px;
}


/* =========================================================
   PARENT REGISTRATION BUTTON
========================================================= */

.login-page .parent-register {
    width:
        100%;

    min-height:
        58px;

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        12px 18px;

    border-radius:
        14px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        12px;

    text-decoration:
        none;

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            #229cff,
            #45b2ff
        );

    font-size:
        17px;

    font-weight:
        800;

    box-shadow:
        0 7px 20px
        rgba(34,156,255,0.25);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.login-page .parent-register:hover {
    color:
        #fff;

    opacity:
        1;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 27px
        rgba(34,156,255,0.35);
}

.login-page .parent-icon {
    font-size:
        23px;
}


/* =========================================================
   PARENT INFORMATION
========================================================= */

.login-page .parent-info {
    margin-top:
        22px;

    padding:
        15px 17px;

    border-radius:
        13px;

    background:
        #e6f3ff;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    color:
        #164d82;
}

.login-page .info-icon {
    width:
        25px;

    height:
        25px;

    min-width:
        25px;

    border-radius:
        50%;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    background:
        #075db7;

    color:
        #fff;

    font-weight:
        900;

    font-family:
        Georgia,
        serif;
}

.login-page .parent-info p {
    margin:
        0;

    line-height:
        1.5;

    font-size:
        14px;
}


/* =========================================================
   LOGIN WAVES
========================================================= */

.login-page .login-wave {
    position:
        fixed;

    left:
        -5%;

    width:
        110%;

    pointer-events:
        none;

    z-index:
        5;

    border-radius:
        50% 50% 0 0;
}

.login-page .login-wave-one {
    height:
        95px;

    bottom:
        -65px;

    background:
        #0757ad;

    transform:
        rotate(-2deg);
}

.login-page .login-wave-two {
    height:
        65px;

    bottom:
        -55px;

    background:
        #158de7;

    transform:
        rotate(3deg);
}


/* =========================================================
   WELCOME PAGE
========================================================= */

.welcome-page {
    margin:
        0;

    min-height:
        100vh;

    overflow:
        hidden;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        #061b36;
}


/* =========================================================
   WELCOME BACKGROUND
========================================================= */

.welcome-page .welcome-background {
    position:
        fixed;

    inset:
        0;

    background-image:
        url("login-bg.jpg");

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;

    animation:
        welcomeZoom
        5s
        ease-out
        forwards;
}


/* =========================================================
   WELCOME OVERLAY
========================================================= */

.welcome-page .welcome-overlay {
    position:
        fixed;

    inset:
        0;

    background:
        linear-gradient(
            135deg,
            rgba(3,31,68,0.88),
            rgba(0,91,180,0.72),
            rgba(3,24,52,0.90)
        );
}


/* =========================================================
   WELCOME CONTAINER
========================================================= */

.welcome-page .welcome-container {
    position:
        relative;

    z-index:
        5;

    min-height:
        100vh;

    width:
        100%;

    max-width:
        none;

    margin:
        0;

    padding:
        30px;

    box-sizing:
        border-box;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    text-align:
        center;

    background:
        transparent;

    border-radius:
        0;

    backdrop-filter:
        none;

    box-shadow:
        none;
}

.welcome-page .welcome-content {
    color:
        #fff;

    animation:
        welcomeContent
        1.2s
        cubic-bezier(
            .175,
            .885,
            .32,
            1.275
        );
}


/* =========================================================
   WELCOME LOGO
========================================================= */

.welcome-page .welcome-logo-box {
    display:
        flex;

    justify-content:
        center;

    margin-bottom:
        22px;
}

.welcome-page .welcome-logo {
    width:
        180px;

    height:
        180px;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 12px 30px
            rgba(0,0,0,0.5)
        );

    animation:
        welcomeLogo
        1.3s
        cubic-bezier(
            .175,
            .885,
            .32,
            1.275
        );
}


/* =========================================================
   WELCOME LINE
========================================================= */

.welcome-page .welcome-line {
    width:
        100px;

    height:
        3px;

    margin:
        0 auto 20px;

    border-radius:
        10px;

    background:
        #42b4ff;

    animation:
        welcomeLine
        1s
        ease-out;
}


/* =========================================================
   WELCOME TITLE
========================================================= */

.welcome-page .welcome-title {
    margin:
        0;

    color:
        #fff;

    font-size:
        clamp(34px, 7vw, 64px);

    font-weight:
        300;

    letter-spacing:
        1px;
}

.welcome-page .welcome-title span {
    display:
        block;

    margin-top:
        5px;

    color:
        #fff;

    font-weight:
        900;
}


/* =========================================================
   WELCOME MESSAGE
========================================================= */

.welcome-page .welcome-message {
    margin:
        18px 0 5px;

    color:
        #e6f4ff;

    font-size:
        clamp(18px, 3vw, 25px);
}

.welcome-page .welcome-message strong {
    color:
        #fff;
}

.welcome-page .welcome-role {
    margin:
        5px 0 25px;

    color:
        #b9ddf7;

    font-size:
        16px;

    text-transform:
        uppercase;

    letter-spacing:
        2px;
}


/* =========================================================
   WELCOME LOADER
========================================================= */

.welcome-page .welcome-loader {
    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        14px;
}

.welcome-page .welcome-loader span {
    width:
        10px;

    height:
        10px;

    border-radius:
        50%;

    background:
        #fff;

    animation:
        welcomeDots
        1.2s
        infinite
        ease-in-out;
}

.welcome-page .welcome-loader span:nth-child(2) {
    animation-delay:
        0.15s;
}

.welcome-page .welcome-loader span:nth-child(3) {
    animation-delay:
        0.30s;
}

.welcome-page .welcome-entering {
    margin:
        0;

    color:
        #c9e6fa;

    font-size:
        14px;

    animation:
        welcomePulse
        1.5s
        infinite;
}


/* =========================================================
   PRINT HEADER
========================================================= */

.printhead {
    text-align:
        center;

    background:
        #fff;

    padding:
        15px;
}

.printhead .printlogo {
    height:
        70px;

    width:
        70px;

    object-fit:
        contain;

    display:
        block;

    margin:
        0 auto 8px;
}


/* =========================================================
   FOOTER
========================================================= */

footer {
    text-align:
        center;

    padding:
        30px;

    color:
        #777;
}


/* =========================================================
   GENERAL ANIMATIONS
========================================================= */

@keyframes fadeIn {

    from {
        opacity:
            0;
    }

    to {
        opacity:
            1;
    }
}


@keyframes fadeInUp {

    from {
        opacity:
            0;

        transform:
            translateY(20px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }
}


@keyframes slideDown {

    from {
        opacity:
            0;

        transform:
            translateY(-25px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }
}


@keyframes zoomIn {

    from {
        opacity:
            0;

        transform:
            scale(0.90);
    }

    to {
        opacity:
            1;

        transform:
            scale(1);
    }
}


@keyframes shake {

    0%,
    100% {
        transform:
            translateX(0);
    }

    25% {
        transform:
            translateX(-5px);
    }

    75% {
        transform:
            translateX(5px);
    }
}


/* =========================================================
   LOGIN ANIMATIONS
========================================================= */

@keyframes loginBackgroundZoom {

    from {
        transform:
            scale(1.03);
    }

    to {
        transform:
            scale(1.10);
    }
}


@keyframes loginBrandEnter {

    from {
        opacity:
            0;

        transform:
            translateY(-30px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }
}


@keyframes logoAppear {

    0% {
        opacity:
            0;

        transform:
            scale(0.55)
            rotate(-10deg);
    }

    70% {
        opacity:
            1;

        transform:
            scale(1.08)
            rotate(3deg);
    }

    100% {
        opacity:
            1;

        transform:
            scale(1)
            rotate(0);
    }
}


@keyframes loginErrorShake {

    0%,
    100% {
        transform:
            translateX(0);
    }

    25% {
        transform:
            translateX(-6px);
    }

    75% {
        transform:
            translateX(6px);
    }
}


/* =========================================================
   WELCOME ANIMATIONS
========================================================= */

@keyframes welcomeZoom {

    from {
        transform:
            scale(1);
    }

    to {
        transform:
            scale(1.08);
    }
}


@keyframes welcomeContent {

    from {
        opacity:
            0;

        transform:
            translateY(40px)
            scale(0.90);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }
}


@keyframes welcomeLogo {

    0% {
        opacity:
            0;

        transform:
            scale(0.2)
            rotate(-25deg);
    }

    70% {
        opacity:
            1;

        transform:
            scale(1.08)
            rotate(4deg);
    }

    100% {
        opacity:
            1;

        transform:
            scale(1)
            rotate(0);
    }
}


@keyframes welcomeLine {

    from {
        width:
            0;

        opacity:
            0;
    }

    to {
        width:
            100px;

        opacity:
            1;
    }
}


@keyframes welcomeDots {

    0%,
    80%,
    100% {
        transform:
            scale(0.6);

        opacity:
            0.5;
    }

    40% {
        transform:
            scale(1.2);

        opacity:
            1;
    }
}


@keyframes welcomePulse {

    0%,
    100% {
        opacity:
            0.5;
    }

    50% {
        opacity:
            1;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    header {
        justify-content:
            center;

        text-align:
            center;
    }

    .brand {
        justify-content:
            center;
    }

    nav {
        justify-content:
            center;
    }

    main {
        width:
            96%;

        padding:
            18px;
    }

    .cards {
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(150px, 1fr)
            );
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    body {
        background-attachment:
            scroll;
    }

    header {
        padding:
            12px 3%;
    }

    .brand {
        font-size:
            17px;

        flex-direction:
            column;

        gap:
            5px;
    }

    .brand .logo {
        width:
            42px;

        height:
            42px;
    }

    nav {
        width:
            100%;

        justify-content:
            center;

        gap:
            4px;
    }

    nav a {
        padding:
            8px 9px;

        font-size:
            12px;
    }

    main {
        width:
            96%;

        margin:
            10px auto;

        padding:
            10px;

        border-radius:
            12px;
    }

    h1 {
        font-size:
            23px;
    }

    h2 {
        font-size:
            19px;
    }

    .cards {
        grid-template-columns:
            repeat(
                2,
                1fr
            );

        gap:
            10px;
    }

    .card {
        padding:
            13px;
    }

    .card b {
        font-size:
            24px;
    }

    .grid {
        grid-template-columns:
            1fr;
    }

    .filters {
        display:
            grid;

        grid-template-columns:
            1fr;
    }

    .filters > * {
        width:
            100%;
    }

    input,
    select,
    textarea,
    button,
    .button {
        max-width:
            100%;
    }

    table {
        display:
            block;

        overflow-x:
            auto;

        white-space:
            nowrap;

        font-size:
            12px;
    }

    th,
    td {
        padding:
            7px;
    }

    .panel {
        padding:
            13px;
    }


    /* -----------------------------------------
       LOGIN MOBILE
    ----------------------------------------- */

    .login-page .login-container {
        width:
            94%;

        padding:
            25px
            10px
            90px;
    }

    .login-page .login-logo {
        width:
            110px;

        height:
            110px;
    }

    .login-page .login-brand h1 {
        font-size:
            30px;

        letter-spacing:
            1px;
    }

    .login-page .motto {
        gap:
            9px;
    }

    .login-page .motto span {
        width:
            35px;

        height:
            2px;
    }

    .login-page .motto em {
        font-size:
            15px;
    }

    .login-page .login-card {
        padding:
            25px 20px;

        border-radius:
            19px;
    }

    .login-page .login-card-header h2 {
        font-size:
            29px;
    }

    .login-page .login-card-header p {
        font-size:
            14px;
    }

    .login-page .input-wrapper input {
        height:
            54px;
    }

    .login-page .login-submit {
        min-height:
            56px;
    }


    /* -----------------------------------------
       PARENT PORTAL MOBILE
    ----------------------------------------- */

    .parent-header {
        padding:
            18px;
    }

    .parent-actions {
        grid-template-columns:
            1fr;
    }


    /* -----------------------------------------
       WELCOME MOBILE
    ----------------------------------------- */

    .welcome-page .welcome-container {
        padding:
            20px;
    }

    .welcome-page .welcome-logo {
        width:
            125px;

        height:
            125px;
    }

    .welcome-page .welcome-title {
        font-size:
            36px;
    }

    .welcome-page .welcome-message {
        font-size:
            18px;
    }

    .welcome-page .welcome-role {
        font-size:
            13px;
    }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .cards {
        grid-template-columns:
            1fr;
    }

    nav a {
        font-size:
            11px;

        padding:
            7px;
    }

    main {
        padding:
            8px;
    }

    h1 {
        font-size:
            20px;
    }

    .login-page .login-logo {
        width:
            90px;

        height:
            90px;
    }

    .login-page .login-brand h1 {
        font-size:
            25px;
    }

    .login-page .login-card {
        padding:
            22px 16px;
    }

    .welcome-page .welcome-logo {
        width:
            100px;

        height:
            100px;
    }

    .welcome-page .welcome-title {
        font-size:
            30px;
    }
}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }
}


/* =========================================================
   PRINT STYLES
========================================================= */

@media print {

    body {
        background:
            #fff !important;
    }

    body::before {
        display:
            none;
    }

    main {
        width:
            100%;

        margin:
            0;

        padding:
            0;

        background:
            #fff !important;

        box-shadow:
            none;
    }

    header,
    .user,
    footer,
    .filters,
    button,
    .button,
    .login-page .login-wave {
        display:
            none !important;
    }

    body,
    main {
        background:
            #fff;

        padding:
            0;
    }

    .panel,
    .card {
        box-shadow:
            none;

        transform:
            none !important;
    }

    table {
        display:
            table;

        width:
            100%;

        font-size:
            11px;
    }

    th,
    td {
        border:
            1px solid #000;
    }
}
/* =========================================================
   CONTACT US
========================================================= */
.contact-page{background:#f4f7fa url("mwingo_background.jpg") center center/cover fixed no-repeat;}
.contact-page::before{background:linear-gradient(rgba(8,35,65,.72),rgba(8,35,65,.80));}
.contact-header{position:relative;}
.contact-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;}
.contact-brand .logo{height:46px;width:46px;object-fit:contain;background:#fff;border-radius:8px;}
.contact-brand strong{display:block;font-size:20px;letter-spacing:.5px;}
.contact-brand small{display:block;font-size:11px;margin-top:2px;color:#dbeeff;}
.contact-nav-active{background:#2b5682;}
.contact-main{max-width:1100px;background:rgba(255,255,255,.94);border-radius:18px;margin:28px auto;padding:0 28px 32px;box-shadow:0 18px 50px rgba(0,0,0,.18);}
.contact-hero{text-align:center;padding:38px 10px 28px;}
.contact-eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;color:#2b5682;}
.contact-hero h1{margin:7px 0;font-size:42px;color:#17365d;}
.contact-hero p{max-width:700px;margin:0 auto;color:#5f6d7a;font-size:16px;line-height:1.6;}
.contact-alert{max-width:900px;margin:0 auto 18px;}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:22px;align-items:start;}
.contact-info{display:grid;gap:13px;}
.contact-card{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid #e2e8ee;border-radius:14px;padding:18px;box-shadow:0 6px 20px rgba(15,42,70,.07);}
.contact-icon{width:44px;height:44px;flex:0 0 44px;border-radius:12px;background:#e8f1fa;color:#17365d;display:grid;place-items:center;font-size:22px;font-weight:700;}
.contact-card h2{font-size:16px;margin:1px 0 7px;color:#17365d;}
.contact-card a{display:block;color:#24649a;text-decoration:none;margin:3px 0;}
.contact-card a:hover{text-decoration:underline;}
.contact-card p,.contact-card small{margin:0;color:#687683;line-height:1.5;}
.contact-form-card{background:#fff;border:1px solid #e2e8ee;border-radius:16px;padding:24px;box-shadow:0 8px 26px rgba(15,42,70,.08);}
.contact-form-card h2{margin:0 0 5px;color:#17365d;}
.contact-form-card>p{margin:0 0 18px;color:#687683;}
.contact-form{display:grid;gap:14px;}
.contact-form label{display:grid;gap:6px;font-weight:600;color:#344556;}
.contact-form textarea{width:100%;resize:vertical;font-family:inherit;padding:10px;border:1px solid #cbd3db;border-radius:5px;min-height:150px;}
.contact-form button{border:0;border-radius:8px;padding:12px 18px;font-weight:700;background:#17365d;color:#fff;cursor:pointer;}
.contact-form button:hover{background:#2b5682;}
.contact-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;}
.contact-page footer{background:rgba(255,255,255,.9);margin-top:24px;}
.contact-page footer a{color:#24649a;}
@media(max-width:760px){.contact-main{width:94%;padding:0 15px 24px;margin:15px auto}.contact-hero h1{font-size:34px}.contact-grid{grid-template-columns:1fr}.contact-header{padding:12px 3%;}.contact-brand strong{font-size:17px;}.contact-brand .logo{height:40px;width:40px;}}