@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* SchoolNXPro Website palette. Keep colour changes here; retain existing layout rules.
   Screen-only rules preserve the reports' existing print appearance. */
@media screen {
    body.skin-blue {
        --snx-font: "Inter", "Segoe UI", Arial, sans-serif;
        --snx-navy: #06132e;
        --snx-sidebar: #0b214b;
        --snx-gold: #f4b51f;
        --snx-gold-hover: #dfa00d;
        --snx-blue: #2377ff;
        --snx-link: #1767d8;
        --snx-background: #f2f6fc;
        --snx-soft: #fff4d6;
        --snx-border: #d0dbea;
        --snx-text: #273747;
        --snx-muted: #526173;
        --snx-chart-1: #06132e;
        --snx-chart-2: #f4b51f;
        --snx-chart-3: #2377ff;
        --snx-chart-4: #5276a7;
        --snx-chart-5: #a86b08;
        --snx-chart-6: #a2bddf;
        background-color: var(--snx-background);
        color: var(--snx-text);
    }

    /* Typography is retained for the redesigned login only. School pages use their original fonts and sizes. */
    body.skin-blue:not(.snx-colors-only) {
        font-family: var(--snx-font);
        font-size: 16px;
        font-weight: 400;
    }
    body.skin-blue:not(.snx-colors-only) h1, body.skin-blue:not(.snx-colors-only) h2, body.skin-blue:not(.snx-colors-only) h3,
    body.skin-blue:not(.snx-colors-only) h4, body.skin-blue:not(.snx-colors-only) h5, body.skin-blue:not(.snx-colors-only) h6,
    body.skin-blue:not(.snx-colors-only) .h1, body.skin-blue:not(.snx-colors-only) .h2, body.skin-blue:not(.snx-colors-only) .h3,
    body.skin-blue:not(.snx-colors-only) .h4, body.skin-blue:not(.snx-colors-only) .h5, body.skin-blue:not(.snx-colors-only) .h6 {
        font-family: var(--snx-font);
        font-weight: 500;
    }
    body.skin-blue:not(.snx-colors-only) .tooltip, body.skin-blue:not(.snx-colors-only) .popover,
    body.skin-blue:not(.snx-colors-only) .ui-widget, body.skin-blue:not(.snx-colors-only) .c3 {
        font-family: var(--snx-font);
    }
    body.skin-blue:not(.snx-colors-only) label { font-weight: 400; }
    body.skin-blue:not(.snx-colors-only) .form-control, body.skin-blue:not(.snx-colors-only) .btn { font-size: 16px; }
    body.skin-blue:not(.snx-colors-only) .btn-sm, body.skin-blue:not(.snx-colors-only) .btn-group-sm > .btn { font-size: 14px; }
    body.skin-blue:not(.snx-colors-only) .btn-xs { font-size: 12px; }
    body.skin-blue .page-wrapper,
    body.skin-blue .footer { background-color: var(--snx-background); }
    body.skin-blue .topbar,
    body.skin-blue .topbar .navbar-header { background: var(--snx-navy) !important; }
    body.skin-blue .left-sidebar,
    body.skin-blue .left-sidebar .nav-text-box,
    body.skin-blue .sidebar-nav,
    body.skin-blue .sidebar-nav ul,
    body.skin-blue .sidebar-nav .collapse,
    body.skin-blue.mini-sidebar .sidebar-nav #sidebarnav > li:hover > a,
    body.skin-blue.mini-sidebar .sidebar-nav #sidebarnav > li > ul {
        background-color: var(--snx-sidebar) !important;
    }
    body.skin-blue .left-sidebar,
    body.skin-blue .left-sidebar .nav-text-box a,
    body.skin-blue .sidebar-nav ul li a,
    body.skin-blue .sidebar-nav ul li a i,
    body.skin-blue .sidebar-nav .nav-small-cap { color: #d8e4f7; }
    body.skin-blue .sidebar-nav .has-arrow::after { border-color: #d8e4f7; }
    body.skin-blue .sidebar-nav ul li a:hover,
    body.skin-blue .sidebar-nav ul li a:hover i,
    body.skin-blue .sidebar-nav ul li a.active,
    body.skin-blue .sidebar-nav ul li a.active i,
    body.skin-blue .sidebar-nav > ul > li.selected > a,
    body.skin-blue .sidebar-nav > ul > li.selected > a i {
        color: var(--snx-gold) !important;
        border-left-color: var(--snx-gold);
    }
    body.skin-blue #frmShow { background-color: var(--snx-sidebar); color: #d8e4f7; }
    body.skin-blue .left-sidebar .nav-text-box { border-color: #294268; }
    body.skin-blue #LblTodaysDateShowMain span,
    body.skin-blue #LblFinancialYearShowMain span { color: var(--snx-gold) !important; }

    body.skin-blue .card { background-color: #fff; border-color: var(--snx-border); }
    body.skin-blue .card-header.bg-info,
    body.skin-blue .card-header.bg-primary,
    body.skin-blue .bg-primary,
    body.skin-blue .modal-header.bg-info {
        background: var(--snx-navy) !important;
        border-color: var(--snx-navy) !important;
        color: #fff;
    }
    body.skin-blue .card-title,
    body.skin-blue .page-titles h3 { color: var(--snx-navy); }
    body.skin-blue .card-footer { background-color: var(--snx-background); border-color: var(--snx-border); }
    body.skin-blue #CardBorder,
    body.skin-blue #CardBorder1,
    body.skin-blue #CardBorderWithTextColour { background-color: var(--snx-soft) !important; }
    body.skin-blue #CardBorderWithTextColour { color: var(--snx-navy); }

    body.skin-blue a { color: var(--snx-link); }
    body.skin-blue a:hover { color: var(--snx-navy); }
    body.skin-blue .text-info,
    body.skin-blue .text-primary,
    body.skin-blue .aEdit,
    body.skin-blue .page-titles .breadcrumb .breadcrumb-item.active { color: var(--snx-link) !important; }
    body.skin-blue .topbar .nav-link { color: #d8e4f7 !important; }
    body.skin-blue .topbar .nav-link:hover { color: #fff !important; }

    body.skin-blue .btn-primary,
    body.skin-blue .btn-info,
    body.skin-blue .btn-success {
        background: var(--snx-gold) !important;
        border-color: var(--snx-gold) !important;
        color: var(--snx-navy) !important;
        box-shadow: none;
    }
    body.skin-blue .btn-primary:hover,
    body.skin-blue .btn-info:hover,
    body.skin-blue .btn-success:hover,
    body.skin-blue .btn-primary:active,
    body.skin-blue .btn-info:active,
    body.skin-blue .btn-success:active {
        background: var(--snx-gold-hover) !important;
        border-color: var(--snx-gold-hover) !important;
        color: var(--snx-navy) !important;
    }
    body.skin-blue .btn-secondary,
    body.skin-blue .btn-default {
        background: var(--snx-navy) !important;
        border-color: var(--snx-navy) !important;
        color: #fff !important;
    }
    body.skin-blue .btn-outline-info,
    body.skin-blue .btn-outline-primary { color: var(--snx-link); border-color: var(--snx-link); }
    body.skin-blue .btn-outline-info:hover,
    body.skin-blue .btn-outline-primary:hover { background-color: var(--snx-navy); border-color: var(--snx-navy); color: #fff; }
    body.skin-blue .btn:focus { box-shadow: 0 0 0 3px rgba(35,119,255,.3) !important; }
    body.skin-blue .btn.disabled,
    body.skin-blue .btn:disabled { opacity: .55; }

    body.skin-blue .form-control {
        border-color: var(--snx-border);
        color: var(--snx-text);
    }
    body.skin-blue #TBContactNo.form-control { background-color: var(--snx-soft) !important; }
    body.skin-blue .form-control:disabled,
    body.skin-blue .form-control[readonly] { background-color: var(--snx-background); }
    body.skin-blue .form-control:focus {
        border-color: var(--snx-blue);
        background-color: var(--snx-soft) !important;
        box-shadow: 0 0 0 2px rgba(35,119,255,.15);
    }
    body.skin-blue input[type=checkbox],
    body.skin-blue input[type=radio] { accent-color: var(--snx-link); }
    body.skin-blue .custom-control-input:checked ~ .custom-control-label::before {
        background-color: var(--snx-link);
        border-color: var(--snx-link);
    }
    body.skin-blue input[type=checkbox]:focus + label,
    body.skin-blue input[type=radio]:focus + label { background-color: var(--snx-soft) !important; }
    body.skin-blue .form-material .form-control {
        background-image: linear-gradient(var(--snx-blue),var(--snx-blue)),linear-gradient(var(--snx-border),var(--snx-border));
    }

    body.skin-blue .table thead th { background-color: var(--snx-soft); color: var(--snx-navy); border-color: var(--snx-border); }
    body.skin-blue .table td { border-color: var(--snx-border); }
    body.skin-blue .table-striped tbody tr:nth-of-type(odd) { background-color: var(--snx-background); }
    body.skin-blue .table-hover tbody tr:hover { background-color: var(--snx-soft); }
    body.skin-blue table.dataTable tbody tr.selected,
    body.skin-blue table.dataTable tbody tr.selected td,
    body.skin-blue .HighlightStyle { background-color: var(--snx-soft) !important; color: var(--snx-text); }
    body.skin-blue .page-link { color: var(--snx-link); border-color: var(--snx-border); }
    body.skin-blue .page-item.active .page-link,
    body.skin-blue .nav-pills .nav-link.active {
        color: var(--snx-navy);
        background-color: var(--snx-gold);
        border-color: var(--snx-gold);
    }
    body.skin-blue .page-item.disabled .page-link { color: #6c757d; }

    body.skin-blue .login-register {
        background-color: var(--snx-background);
        background-image: linear-gradient(rgba(219,231,242,.75),rgba(219,231,242,.75)),url('../../assets/images/background/login-register.jpg') !important;
    }
    body.skin-blue .login-box { border-top: 4px solid var(--snx-gold); }
    body.skin-blue .login-box .box-title { color: var(--snx-navy); }
    body.skin-blue .login-box #to-recover { color: var(--snx-link) !important; }
    body.skin-blue .loader__figure { border-color: var(--snx-gold); }
    body.skin-blue .loader__label { color: var(--snx-navy); }
    body.skin-blue.form-schooldashboard .round-info { background-color: var(--snx-soft); color: var(--snx-navy); }
    body.skin-blue.form-schooldashboard .ColumnHeight { background-color: #fff; border-color: var(--snx-border); }
    body.skin-blue.form-schooldashboard .c3-chart-text text { fill: var(--snx-text) !important; }
    body.skin-blue.form-schooldashboard .c3-chart-arcs text { fill: var(--snx-navy); paint-order: stroke; stroke: #fff; stroke-width: 2px; stroke-linejoin: round; }
}

/* LoginUser only: the inside pages retain their existing layout. */
@media screen {
    body.skin-blue.snx-login { background: var(--snx-navy); }
    body.skin-blue.snx-login .login-register {
        position: relative;
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        padding: 48px 32px;
        display: flex;
        align-items: center;
        background-color: var(--snx-navy);
        background-image: radial-gradient(ellipse at 12% 15%,rgba(35,119,255,.2),transparent 52%),radial-gradient(ellipse at 90% 92%,rgba(244,181,31,.09),transparent 42%),linear-gradient(130deg,#06132e,#0b214b) !important;
    }
    body.snx-login .snx-login-shell {
        width: 100%;
        max-width: 1040px;
        margin: auto;
        display: grid;
        grid-template-columns: minmax(0,1fr) minmax(0,440px);
        gap: 72px;
        align-items: center;
    }
    body.snx-login .snx-login-brand { color: #fff; min-width: 0; }
    body.snx-login .snx-login-logo { display: flex; align-items: center; gap: 13px; }
    body.snx-login .snx-login-logo img { width: 48px; height: auto; }
    body.snx-login .snx-login-logo > span { font-size: 25px; letter-spacing: -.5px; font-weight: 400; }
    body.snx-login .snx-login-logo strong { color: var(--snx-gold); font-size: 17px; font-weight: 500; }
    body.snx-login .snx-login-logo small { display: block; margin-top: 2px; color: #a9bddb; font-size: 12px; letter-spacing: .2px; }
    body.snx-login .snx-login-intro { margin: 64px 0 48px; }
    body.snx-login .snx-login-eyebrow { font-size: 13px; letter-spacing: 2px; color: #aac6f1; font-weight: 500; }
    body.snx-login .snx-login-intro h1 { margin: 18px 0 20px; font-size: clamp(32px,3.8vw,46px); line-height: 1.17; letter-spacing: -1.6px; font-weight: 500; color: #fff; }
    body.snx-login .snx-login-intro h1 span { color: var(--snx-gold); }
    body.snx-login .snx-login-intro p { color: #b7c9e2; max-width: 370px; font-size: 17px; line-height: 1.8; }
    body.snx-login .snx-login-features { list-style: none; padding: 12px 0 0; margin: 0; display: grid; gap: 15px; }
    body.snx-login .snx-login-features li { display: flex; align-items: center; gap: 13px; color: #d8e4f7; font-size: 15px; }
    body.snx-login .snx-login-features i { width: 33px; height: 33px; display: grid; place-items: center; border: 1px solid #365078; border-radius: 9px; color: var(--snx-gold); background: #102a51; }
    body.snx-login .snx-login-credit { color: #d8e4f7; font-size: 14px; }
    body.snx-login .snx-login-credit span { color: #a9bddb; margin-left: 6px; }
    body.skin-blue.snx-login .login-box {
        width: 100%;
        margin: 0;
        border: 1px solid #fff;
        border-top: 4px solid var(--snx-gold);
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 24px 70px rgba(0,0,0,.26);
    }
    body.snx-login .login-box .card-body { padding: 38px 36px 28px; }
    body.snx-login .snx-login-card-heading { margin-bottom: 29px; }
    body.snx-login .snx-login-kicker { display: inline-block; color: var(--snx-muted); font-size: 12px; font-weight: 500; letter-spacing: 1.8px; margin-bottom: 12px; }
    body.snx-login .snx-login-card-heading .box-title { font-size: 28px; font-weight: 500; letter-spacing: -.7px; margin: 0 0 9px; line-height: 1.2; }
    body.snx-login .snx-login-card-heading p { color: var(--snx-muted); font-size: 15px; line-height: 1.65; margin: 0; }
    body.snx-login .login-box .form-group { margin: 0 0 20px; }
    body.snx-login .login-box .form-group > label { color: #34465d; font-size: 14px; font-weight: 400; margin-bottom: 8px; }
    body.snx-login .login-box .form-control { height: 49px; border: 1px solid #d8e0eb; border-radius: 8px; background: #f8fafd; padding: 12px 14px; font-size: 16px; color: var(--snx-text); }
    body.snx-login .login-box .form-control::placeholder { color: #697b91; opacity: 1; }
    body.snx-login .snx-login-password { position: relative; }
    body.snx-login .snx-login-password .form-control { padding-right: 66px; }
    body.snx-login #snx-password-toggle { position: absolute; right: 4px; top: 4px; height: 41px; padding: 0 10px; border: 0; border-radius: 5px; background: transparent; color: var(--snx-link); cursor: pointer; font-size: 14px; font-weight: 500; }
    body.snx-login .snx-login-options { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 10px; margin: 3px 0 27px; font-size: 14px; }
    body.snx-login .snx-login-options .custom-control-label { color: var(--snx-muted); line-height: 24px; }
    body.snx-login .login-box .btn { min-height: 49px; padding: 12px 14px; border-radius: 8px; font-size: 16px; font-weight: 500; }
    body.snx-login #LoginButtonText i { margin-left: 12px; font-size: 12px; }
    body.snx-login .snx-login-signup { font-size: 14px; color: var(--snx-muted); text-align: center; margin: 24px 0; line-height: 1.8; }
    body.snx-login .snx-login-signup a { font-weight: 500; white-space: nowrap; }
    body.snx-login .snx-login-legal { border-top: 1px solid #e7ecf3; padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; }
    body.snx-login .snx-login-legal a { font-size: 13px; color: var(--snx-muted); }
    body.snx-login .snx-login-legal a:hover { color: var(--snx-link); }
    body.snx-login .snx-login-back { display: block; width: 100%; margin-top: 22px; border: 0; padding: 10px; background: transparent; color: var(--snx-link); cursor: pointer; font-size: 15px; }
    body.snx-login .snx-login-back i { margin-right: 7px; }
    body.snx-login #snx-password-toggle:focus-visible,
    body.snx-login .snx-login-back:focus-visible,
    body.snx-login .login-box a:focus-visible { outline: 2px solid var(--snx-blue); outline-offset: 3px; }
}
@media screen and (max-width: 850px) {
    body.skin-blue.snx-login .login-register { padding: 36px 24px; }
    body.snx-login .snx-login-shell { gap: 36px; grid-template-columns: minmax(0,1fr) minmax(0,400px); }
    body.snx-login .snx-login-intro h1 { font-size: 34px; }
    body.snx-login .login-box .card-body { padding: 32px 26px 26px; }
}
@media screen and (max-width: 700px) {
    body.skin-blue.snx-login .login-register { padding: 30px 18px; align-items: flex-start; }
    body.snx-login .snx-login-shell { max-width: 440px; margin: 0 auto; grid-template-columns: minmax(0,1fr); gap: 27px; }
    body.snx-login .snx-login-logo { justify-content: center; }
    body.snx-login .snx-login-logo > span { font-size: 23px; }
    body.snx-login .snx-login-logo img { width: 42px; }
    body.snx-login .snx-login-intro,
    body.snx-login .snx-login-credit { display: none; }
    body.snx-login .login-box .card-body { padding: 30px 23px 25px; }
    body.snx-login .login-box .form-control { font-size: 18px; }
}