body {
    background: #f4f7fb;
    color: #32415a;
}

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

.page-container .sidebar-menu {
    background: linear-gradient(180deg, #0d2344 0%, #17345f 100%);
    max-height: 100vh;
    overflow-y: auto !important;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #7fd3ff #0d2344;
}

.page-container .sidebar-menu::-webkit-scrollbar {
    width: 10px;
}

.page-container .sidebar-menu::-webkit-scrollbar-track {
    background: #0d2344;
    border-left: 1px solid rgba(255,255,255,0.08);
}

.page-container .sidebar-menu::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #7fd3ff 0%, #2f5da8 100%);
    border-radius: 10px;
    border: 2px solid #0d2344;
}

.page-container .main-content {
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.page-container .sidebar-menu #main-menu li a {
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255,255,255,0.28) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}

.page-container .sidebar-menu #main-menu li.active > a,
.page-container .sidebar-menu #main-menu li ul li.active > a,
.page-container .sidebar-menu #main-menu li a:hover {
    background: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
}

body .page-container .sidebar-menu .logo-env,
body .page-container .sidebar-menu .logo-env > div,
body .page-container .sidebar-menu .logo-env > div.logo,
body .page-container .sidebar-menu .logo {
    background: #ffffff !important;
}

body .page-container .sidebar-menu .logo-env {
    border: 3px solid #ffffff !important;
    box-shadow: inset 0 0 0 3px #0d2344;
    border-bottom: 3px solid #ffffff !important;
}

body .page-container .sidebar-menu .logo-env > div.sidebar-collapse a,
body .page-container .sidebar-menu .logo-env > div.sidebar-mobile-menu a,
.page-container .sidebar-menu .sidebar-collapse,
.page-container .sidebar-menu .sidebar-mobile-menu a {
    background: #ffffff !important;
    color: #214f93 !important;
    border-color: #bcd0ee !important;
}

.main-content,
.panel,
.tile-stats,
.login-content .input-group,
.login-form .form-control {
    border-radius: 10px;
}

.panel-primary > .panel-heading,
.btn-info,
.label-info,
.bg-info,
.badge-info {
    background: #2f5da8 !important;
    border-color: #2f5da8 !important;
    color: #ffffff !important;
}

.btn-success,
.label-success {
    background: #1f6aa5 !important;
    border-color: #1f6aa5 !important;
}

.btn-primary {
    background: #123763 !important;
    border-color: #123763 !important;
}

.btn-default:hover,
.btn-default:focus,
.btn-info:hover,
.btn-primary:hover,
.btn-success:hover {
    opacity: 0.92;
}

a,
.text-primary,
.page-container .sidebar-menu #main-menu li ul > li > a {
    color: #214f93;
}

.nav-tabs.bordered > li.active > a,
.nav-tabs.bordered > li > a:hover {
    background: #dfeaf8 !important;
    color: #123763 !important;
    border-color: #bcd0ee !important;
}

.table thead tr th,
.table-bordered > thead > tr > th {
    background: #e7eef9 !important;
    color: #123763 !important;
}

.login-page {
    background:
        radial-gradient(circle at top center, rgba(255, 255, 255, 0.45), transparent 24%),
        linear-gradient(180deg, #edf5ff 0%, #c8daf4 18%, #6f96cd 45%, #254b85 72%, #0b1d39 100%) !important;
    min-height: 100vh;
}

.login-page .login-header,
.login-page .login-content,
.login-page .login-form {
    background: transparent;
}

.login-page .login-header.login-caret:after,
.login-page .login-header:after {
    display: none !important;
    border: 0 !important;
    content: none !important;
}

.login-container {
    width: 980px !important;
    max-width: calc(100vw - 40px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    margin: 32px auto;
}

.login-logo-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 122px;
    height: 122px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: 0 12px 30px rgba(6, 20, 44, 0.24);
    backdrop-filter: blur(6px);
}

.login-logo-badge:before {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 5px solid rgba(223, 234, 248, 0.28);
    border-top-color: #ffffff;
    border-right-color: #78a8de;
    border-bottom-color: #214f93;
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
}

.login-page.logging-in .login-logo-badge:before {
    opacity: 1;
    animation: royalSpin 1s linear infinite;
}

.school-main-logo {
    width: 76px;
    height: auto;
}

.login-page .login-header {
    flex: 1 1 50%;
    min-height: 520px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    padding-top: 30px;
}

.login-page .login-header .login-content {
    width: 100%;
    max-width: 430px;
    padding-top: 0;
}

.royal-login-heading {
    margin-top: 20px;
}

.royal-login-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
    width: 100%;
    max-width: 340px;
}

.royal-cta-btn {
    display: block;
    width: 100%;
    padding: 11px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.3px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    text-decoration: none !important;
}

.royal-cta-primary {
    background: #1a6fc4;
    color: #ffffff !important;
    border: 2px solid #1a6fc4;
}

.royal-cta-primary:hover {
    background: #155ca0;
    border-color: #155ca0;
    color: #ffffff !important;
}

.royal-cta-outline {
    background: rgba(255,255,255,0.12);
    color: #ffffff !important;
    border: 2px solid rgba(255,255,255,0.55);
}

.royal-cta-outline:hover {
    background: rgba(255,255,255,0.25);
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.85);
}

.royal-login-heading h2 {
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: -0.4px;
    text-shadow: 0 2px 8px rgba(10, 26, 51, 0.18);
}

.royal-login-heading p {
    font-size: 16px !important;
    line-height: 1.5;
    max-width: 560px;
    margin: 10px auto 0 !important;
}

.login-welcome-pill {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.royal-login-card {
    flex: 1 1 50%;
    max-width: 460px;
    background: linear-gradient(180deg, #f4f9ff 0%, #dceafe 52%, #c7ddfb 100%) !important;
    border: 3px solid #123763 !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 45px rgba(9, 30, 66, 0.24), inset 0 0 0 2px rgba(127, 211, 255, 0.22) !important;
    padding: 18px 0 10px;
    margin: 0 auto;
}

.login-page .login-form .login-content {
    padding: 8px 34px 18px;
}

.login-card-intro {
    text-align: center;
    margin-bottom: 18px;
}

.login-card-intro h4 {
    margin: 0 0 6px;
    color: #123763;
    font-weight: 700;
}

.login-card-intro p {
    margin: 0;
    color: #5d6f8b;
    font-size: 13px;
}

.login-page .login-form .form-group {
    margin-bottom: 16px;
}

.login-page .login-form .form-group .input-group {
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(33, 79, 147, 0.08);
}

.login-page .login-form .btn-login {
    border-radius: 12px !important;
    font-weight: 700;
    letter-spacing: 0.3px;
    box-shadow: 0 10px 22px rgba(33, 79, 147, 0.22);
}

.login-page .login-bottom-links {
    text-align: center;
    padding-top: 8px;
}

.login-page .form-login-error {
    border-radius: 12px;
    border-left: 4px solid #c0392b;
}


.login-page .btn-login,
.login-page .btn-success {
    background: #214f93 !important;
    border-color: #214f93 !important;
}

.login-page .form-control {
    background: #f6fbff;
    border: 1px solid #bdd0ee;
    color: #102847;
}

.login-page .input-group-addon {
    background: #dfeaf8;
    color: #214f93;
    border-color: #bdd0ee;
}

.tile-stats.tile-blue,
.tile-stats.tile-primary {
    background: #214f93 !important;
}

.tile-stats.tile-green {
    background: #3a6fb8 !important;
}

.tile-stats.tile-aqua,
.tile-stats.tile-cyan {
    background: #78a8de !important;
}

.pagination > .active > a,
.pagination > .active > span {
    background: #214f93 !important;
    border-color: #214f93 !important;
}

.form-control:focus {
    border-color: #5f8fd1;
    box-shadow: 0 0 0 2px rgba(47,93,168,0.12);
}

.panel {
    box-shadow: 0 4px 18px rgba(17, 38, 70, 0.08);
}
.circular-progressbar {
    display: none !important;
}

.circular-loader-wrap {
    text-align: center;
    margin-top: 20px;
    padding-bottom: 8px;
}

.login-page .login-progressbar-indicator {
    display: none;
}

.login-page.logging-in .login-progressbar-indicator {
    display: block;
}

.login-progressbar-indicator h3 {
    color: #ffffff !important;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.login-progressbar-indicator span {
    color: #dfeaf8 !important;
    font-size: 13px;
}

@keyframes royalSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (max-width: 991px) {
    .login-container {
        width: 94% !important;
        display: block;
        margin: 20px auto;
    }

    .login-page .login-header {
        min-height: auto;
        margin-bottom: 20px;
    }

    .royal-login-card {
        max-width: 100%;
        padding: 8px 0 0;
    }

    .login-page .login-form .login-content {
        padding: 8px 22px 18px;
    }

    .page-container .main-content {
        padding: 12px !important;
        max-height: none;
        overflow-y: visible;
    }

    .page-container .sidebar-menu {
        max-height: none;
        overflow-y: visible !important;
    }

    body .tile-stats,
    body .panel,
    body .well {
        margin-bottom: 14px;
    }

    body .panel-body,
    body .tab-content,
    body .main-content {
        overflow-x: auto;
    }

    body .form-inline .form-control,
    body .form-inline .btn,
    body .form-inline select,
    body .form-inline input {
        width: 100% !important;
        display: block !important;
        margin: 0 0 10px 0 !important;
    }

    body .dataTables_wrapper .dataTables_length,
    body .dataTables_wrapper .dataTables_filter {
        float: none !important;
        text-align: left !important;
        margin-bottom: 10px;
    }

    body .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        margin-left: 0 !important;
    }

    body table {
        min-width: 720px;
    }

    body h2,
    body h3 {
        word-break: break-word;
    }
}

@media (max-width: 767px) {
    body .page-container .sidebar-menu .logo-env {
        padding: 10px 8px;
    }

    body .page-container .sidebar-menu .logo img {
        max-width: 72px;
        height: auto;
    }

    .page-container .main-content .row > [class*="col-"] {
        margin-bottom: 12px;
    }

    .list-inline.links-list {
        text-align: center !important;
        width: 100%;
        margin: 0 0 8px 0;
    }

    .list-inline.links-list.pull-left,
    .list-inline.links-list.pull-right {
        float: none !important;
    }

    .license-card {
        transform: scale(0.92);
        transform-origin: top center;
    }
}

body .form-control,
body input[type="text"],
body input[type="password"],
body input[type="email"],
body input[type="number"],
body input[type="date"],
body input[type="search"],
body input[type="tel"],
body select,
body textarea {
    min-height: 42px;
    border-radius: 16px !important;
    border: 1px solid #c7d8ef !important;
    background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%) !important;
    color: #163154 !important;
    padding: 10px 14px !important;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.9), 0 5px 14px rgba(33,79,147,0.06);
    transition: all 0.2s ease;
}

body textarea {
    min-height: 110px;
    resize: vertical;
}

body .form-control:focus,
body input:focus,
body select:focus,
body textarea:focus {
    border-color: #5b8fe0 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(91,143,224,0.16), 0 10px 24px rgba(33,79,147,0.12) !important;
}

body .input-group-addon,
body .input-group-btn > .btn {
    border-radius: 16px !important;
    border-color: #c7d8ef !important;
}

body .input-group-addon {
    background: linear-gradient(180deg, #edf5ff 0%, #dceafe 100%) !important;
    color: #214f93 !important;
    font-weight: 700;
}

body .btn,
body button,
body input[type="submit"],
body input[type="button"],
body a.btn {
    border-radius: 16px !important;
    padding: 10px 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px;
    border-width: 1px !important;
    box-shadow: 0 8px 18px rgba(33,79,147,0.14);
    transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

body .btn:hover,
body button:hover,
body input[type="submit"]:hover,
body input[type="button"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(33,79,147,0.18);
}

body .btn:focus,
body button:focus,
body input[type="submit"]:focus,
body input[type="button"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(91,143,224,0.16), 0 10px 24px rgba(33,79,147,0.18) !important;
}

body .btn-default,
body .btn-white {
    background: linear-gradient(180deg, #ffffff 0%, #edf4ff 100%) !important;
    border-color: #c6d7ee !important;
    color: #123763 !important;
    text-shadow: none !important;
}

body .btn-default span,
body .btn-white span,
body .btn-default i,
body .btn-white i {
    color: #123763 !important;
}

body .btn-primary,
body .btn-info,
body .btn-success,
body .btn-login {
    background: linear-gradient(135deg, #214f93 0%, #3a72bf 100%) !important;
    border-color: #214f93 !important;
    color: #ffffff !important;
}

body .select2-container .select2-choice,
body .selectboxit-container .selectboxit,
body .ms-container .ms-selectable ul,
body .ms-container .ms-selection ul {
    border-radius: 16px !important;
    border: 1px solid #c7d8ef !important;
    box-shadow: 0 5px 14px rgba(33,79,147,0.06);
}

body .dataTables_filter input,
body .dataTables_length select {
    border-radius: 16px !important;
}

body .panel .form-group label {
    color: #214163;
    font-weight: 700;
}

.fileinput .thumbnail img,
.fileinput-preview img,
img.img-circle {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    background: linear-gradient(180deg, #eef7ff 0%, #dcecff 100%);
    border-radius: inherit;
}

body .panel,
body .main-content,
body .tile-stats,
body .well,
body .login-form,
body .calendar-env,
body .profile-env section.profile-info-tabs {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(235,244,255,0.96) 100%) !important;
    box-shadow: 0 10px 28px rgba(17, 38, 70, 0.12), inset 0 1px 0 rgba(255,255,255,0.92) !important;
    border: 1.5px solid #123763 !important;
}

body .panel:before,
body .main-content:before,
body .tile-stats:before,
body .well:before,
body .login-form:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 42%;
    background: linear-gradient(180deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.08) 70%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    z-index: 1;
}

body .panel > *,
body .main-content > *,
body .tile-stats > *,
body .well > * {
    position: relative;
    z-index: 2;
}

body,
body p,
body span,
body .panel-body,
body .panel-title,
body .tile-stats .num,
body .tile-stats p,
body .tile-stats h3,
body .well,
body .table tbody tr td,
body .table tbody tr th,
body .form-control,
body label,
body .control-label {
    color: #102847 !important;
}

body .page-container .sidebar-menu {
    background: linear-gradient(180deg, #173d74 0%, #102a50 58%, #09172e 100%) !important;
    box-shadow: inset -1px 0 0 rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.12);
}

body .page-container .sidebar-menu:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 120px;
    background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.02) 100%);
    pointer-events: none;
}

.page-container .sidebar-menu #main-menu li i,
.page-container .sidebar-menu #main-menu li span,
.page-container .sidebar-menu #main-menu li a span,
.page-container .sidebar-menu #main-menu li a .entypo-right-open-mini,
.page-container .sidebar-menu #main-menu li a:before {
    color: #ffffff !important;
}

body .btn,
body button,
body input[type="submit"],
body input[type="button"] {
    background-image: linear-gradient(180deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.04) 48%, rgba(0,0,0,0.03) 100%) !important;
    box-shadow: 0 10px 22px rgba(33,79,147,0.16), inset 0 1px 0 rgba(255,255,255,0.42) !important;
}

body .btn:hover,
body button:hover,
body input[type="submit"]:hover,
body input[type="button"]:hover {
    filter: brightness(1.03);
}

body .form-control,
body select,
body textarea {
    background-image: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(241,247,255,0.98) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 6px 14px rgba(33,79,147,0.07) !important;
}

body .table,
body .table-bordered {
    background: rgba(255,255,255,0.9);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #123763;
}

body .table thead tr th,
body .table-bordered > thead > tr > th {
    background: linear-gradient(180deg, #f4f9ff 0%, #dbe9fb 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.88);
}

body .nav-tabs.bordered > li > a,
body .pagination > li > a,
body .pagination > li > span {
    background: linear-gradient(180deg, #ffffff 0%, #e8f1fd 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.88);
}

body .tile-stats {
    border: 2px solid #123763 !important;
}

body .panel-heading,
body .tile-stats .icon,
body .tile-stats .num {
    color: #0d2344 !important;
}

body .tile-stats .icon i,
body .tile-stats .num,
body .tile-stats h3,
body .tile-stats p {
    text-shadow: 0 1px 3px rgba(6, 20, 44, 0.18);
}

body .btn-default,
body .btn-default:hover,
body .btn-default:focus,
body .btn-default:active,
body .btn-default.active,
body .open .dropdown-toggle.btn-default,
body .btn-default.disabled,
body .btn-default[disabled],
body fieldset[disabled] .btn-default,
body .btn-default.dropdown-toggle,
body .btn-white,
body .btn-white:hover,
body .btn-white:focus,
body .btn-white:active,
body .btn-white.active,
body .open .dropdown-toggle.btn-white,
body .btn-white.disabled,
body .btn-white[disabled],
body fieldset[disabled] .btn-white,
body .btn-white.dropdown-toggle,
body .input-group-btn > .btn-default,
body .input-group-btn > .btn-white,
body .fileinput .btn.btn-file,
body .btn-group > .btn-default,
body .btn-group > .btn-white,
body .panel-heading .btn-default,
body .panel-heading .btn-white,
body .pager li > a,
body .pager li > span,
body .form-wizard .pager li a {
    background: linear-gradient(180deg, #ffffff 0%, #edf4ff 100%) !important;
    border-color: #c6d7ee !important;
    color: #123763 !important;
    text-shadow: none !important;
}

body .btn-default *,
body .btn-white *,
body .input-group-btn > .btn-default *,
body .input-group-btn > .btn-white *,
body .fileinput .btn.btn-file *,
body .btn-group > .btn-default *,
body .btn-group > .btn-white * {
    color: #123763 !important;
    text-shadow: none !important;
}

body .btn-default.btn-icon i,
body .btn-white.btn-icon i,
body .btn-default.btn-icon.icon-left i,
body .btn-white.btn-icon.icon-left i {
    background: rgba(18,55,99,0.08) !important;
    border-right: 1px solid rgba(18,55,99,0.14) !important;
    color: #123763 !important;
}

body .btn-default .caret,
body .btn-white .caret,
body .btn-default.dropdown-toggle .caret,
body .btn-white.dropdown-toggle .caret {
    border-top-color: #123763 !important;
    border-bottom-color: #123763 !important;
}

body .pager li > a:hover,
body .form-wizard .pager li a:hover {
    color: #0d294d !important;
    border-color: #9dbce5 !important;
}

body .pagination > .active > a,
body .pagination > .active > span,
body .pagination > .active > a:hover,
body .pagination > .active > span:hover {
    color: #ffffff !important;
}

body .btn-info.btn-sm,
body .btn-info.btn-sm:hover,
body .btn-info.btn-sm:focus,
body .btn-info.btn-sm:active,
body .btn-info.btn-sm.active,
body .btn-group > .btn-info.btn-sm,
body .btn-group.open .dropdown-toggle.btn-info.btn-sm,
body .dropdown-toggle.btn-info.btn-sm {
    background: linear-gradient(180deg, #ffffff 0%, #edf4ff 100%) !important;
    border-color: #2f5da8 !important;
    color: #123763 !important;
    text-shadow: none !important;
}

body .btn-info.btn-sm *,
body .btn-group > .btn-info.btn-sm * {
    color: #123763 !important;
    text-shadow: none !important;
}

body .btn-info.btn-sm .caret,
body .dropdown-toggle.btn-info.btn-sm .caret {
    border-top-color: #123763 !important;
    border-bottom-color: #123763 !important;
}

body .open-report-btn,
body .open-report-btn:hover,
body .open-report-btn:focus,
body .open-report-btn:active {
    background: linear-gradient(180deg, #ffffff 0%, #edf4ff 100%) !important;
    border-color: #2f5da8 !important;
    color: #123763 !important;
    text-shadow: none !important;
}

body .open-report-btn * {
    color: #123763 !important;
}

.page-body .selectboxit-container .selectboxit,
.page-body .selectboxit-container .selectboxit:hover,
.page-body .selectboxit-container .selectboxit:focus,
body .bootstrap-select > .dropdown-toggle,
body .bootstrap-select > .dropdown-toggle:hover,
body .bootstrap-select > .dropdown-toggle:focus,
body .multiselect,
body .multiselect:hover,
body .multiselect:focus {
    background: linear-gradient(180deg, #ffffff 0%, #edf4ff 100%) !important;
    border-color: #2f5da8 !important;
    color: #123763 !important;
    text-shadow: none !important;
}

.page-body .selectboxit-container .selectboxit .selectboxit-text,
.page-body .selectboxit-container .selectboxit .selectboxit-arrow-container .selectboxit-arrow,
body .bootstrap-select > .dropdown-toggle .filter-option,
body .bootstrap-select > .dropdown-toggle .caret,
body .multiselect .multiselect-selected-text,
body .multiselect .caret {
    color: #123763 !important;
    text-shadow: none !important;
}

.page-body .selectboxit-container .selectboxit .selectboxit-arrow-container .selectboxit-arrow,
body .bootstrap-select > .dropdown-toggle .caret,
body .multiselect .caret {
    border-top-color: #123763 !important;
    border-bottom-color: #123763 !important;
}

body .modal .panel-body .btn-info,
body .modal .panel-body .btn-primary,
body .modal .panel-body .btn-success,
body .btn-info[disabled],
body .btn-primary[disabled],
body .btn-success[disabled],
body .btn-info.disabled,
body .btn-primary.disabled,
body .btn-success.disabled,
body fieldset[disabled] .btn-info,
body fieldset[disabled] .btn-primary,
body fieldset[disabled] .btn-success,
body .fileinput .btn.btn-file,
body .fileinput .btn.btn-file:hover,
body .fileinput .btn.btn-file:focus,
body .fileinput .btn.btn-file:active {
    background: linear-gradient(180deg, #ffffff 0%, #edf4ff 100%) !important;
    border-color: #2f5da8 !important;
    color: #123763 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

body .modal .panel-body .btn-info *,
body .modal .panel-body .btn-primary *,
body .modal .panel-body .btn-success *,
body .btn-info[disabled] *,
body .btn-primary[disabled] *,
body .btn-success[disabled] *,
body .btn-info.disabled *,
body .btn-primary.disabled *,
body .btn-success.disabled *,
body .fileinput .btn.btn-file * {
    color: #123763 !important;
    text-shadow: none !important;
}

body .fileinput .thumbnail,
body .fileinput-preview.thumbnail,
body .fileinput-new.thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-width: 120px;
    min-height: 120px;
    padding: 8px;
    border-radius: 20px !important;
    border: 2px dashed #a9c3ea !important;
    background: linear-gradient(180deg, #fafdff 0%, #eaf2ff 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 10px 22px rgba(33,79,147,0.10);
}

body .fileinput .thumbnail img,
body .fileinput-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
}

body .fileinput .uneditable-input,
body input[type="file"].form-control {
    border-radius: 16px !important;
    border: 1px solid #c7d8ef !important;
    background: linear-gradient(180deg, #ffffff 0%, #f1f7ff 100%) !important;
    color: #123763 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 6px 14px rgba(33,79,147,0.07) !important;
}

body .fileinput p,
body .fileinput small {
    color: #4d6486 !important;
    font-weight: 600;
}

body .btn-info:not(.btn-login):not(.btn-danger):not(.btn-red),
body .btn-info:not(.btn-login):not(.btn-danger):not(.btn-red):hover,
body .btn-info:not(.btn-login):not(.btn-danger):not(.btn-red):focus,
body .btn-info:not(.btn-login):not(.btn-danger):not(.btn-red):active,
body .btn-info:not(.btn-login):not(.btn-danger):not(.btn-red).active,
body .btn-primary:not(.btn-login):not(.btn-danger):not(.btn-red),
body .btn-primary:not(.btn-login):not(.btn-danger):not(.btn-red):hover,
body .btn-primary:not(.btn-login):not(.btn-danger):not(.btn-red):focus,
body .btn-primary:not(.btn-login):not(.btn-danger):not(.btn-red):active,
body .btn-primary:not(.btn-login):not(.btn-danger):not(.btn-red).active,
body .btn-success:not(.btn-login):not(.btn-danger):not(.btn-red),
body .btn-success:not(.btn-login):not(.btn-danger):not(.btn-red):hover,
body .btn-success:not(.btn-login):not(.btn-danger):not(.btn-red):focus,
body .btn-success:not(.btn-login):not(.btn-danger):not(.btn-red):active,
body .btn-success:not(.btn-login):not(.btn-danger):not(.btn-red).active {
    background: linear-gradient(180deg, #ffffff 0%, #edf4ff 100%) !important;
    border-color: #2f5da8 !important;
    color: #123763 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

body .btn-info:not(.btn-login):not(.btn-danger):not(.btn-red) *,
body .btn-primary:not(.btn-login):not(.btn-danger):not(.btn-red) *,
body .btn-success:not(.btn-login):not(.btn-danger):not(.btn-red) * {
    color: #123763 !important;
    text-shadow: none !important;
}

body .btn-login,
body .btn-login:hover,
body .btn-login:focus,
body .btn-login:active {
    background: linear-gradient(135deg, #214f93 0%, #3a72bf 100%) !important;
    border-color: #214f93 !important;
    color: #ffffff !important;
}

body .btn-login * {
    color: #ffffff !important;
}

body .btn.btn-default,
body .btn.btn-white,
body .btn.btn-info:not(.btn-login):not(.btn-danger):not(.btn-red):not(.btn-orange),
body .btn.btn-primary:not(.btn-login):not(.btn-danger):not(.btn-red):not(.btn-orange),
body .btn.btn-success:not(.btn-login):not(.btn-danger):not(.btn-red):not(.btn-orange),
body button.btn-default,
body button.btn-white,
body button.btn-info:not(.btn-login):not(.btn-danger):not(.btn-red):not(.btn-orange),
body button.btn-primary:not(.btn-login):not(.btn-danger):not(.btn-red):not(.btn-orange),
body button.btn-success:not(.btn-login):not(.btn-danger):not(.btn-red):not(.btn-orange),
body input[type="submit"].btn-info:not(.btn-login),
body input[type="submit"].btn-primary:not(.btn-login),
body input[type="submit"].btn-success:not(.btn-login) {
    color: #123763 !important;
    background: linear-gradient(180deg, #ffffff 0%, #edf4ff 100%) !important;
    border-color: #2f5da8 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

body .btn.btn-default *,
body .btn.btn-white *,
body .btn.btn-info:not(.btn-login):not(.btn-danger):not(.btn-red):not(.btn-orange) *,
body .btn.btn-primary:not(.btn-login):not(.btn-danger):not(.btn-red):not(.btn-orange) *,
body .btn.btn-success:not(.btn-login):not(.btn-danger):not(.btn-red):not(.btn-orange) *,
body button.btn-default *,
body button.btn-white *,
body button.btn-info:not(.btn-login):not(.btn-danger):not(.btn-red):not(.btn-orange) *,
body button.btn-primary:not(.btn-login):not(.btn-danger):not(.btn-red):not(.btn-orange) *,
body button.btn-success:not(.btn-login):not(.btn-danger):not(.btn-red):not(.btn-orange) * {
    color: #123763 !important;
    text-shadow: none !important;
}

body .dataTables_wrapper .row .col-xs-9.col-right {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

/* ============================================================
   MOBILE RESPONSIVE – comprehensive improvements
   ============================================================ */

/* ---- Tablet (< 992px) ---- */
@media (max-width: 991px) {

    /* Ensure tables scroll inside panels */
    .panel-body,
    .panel > .table-responsive,
    .tab-content .tab-pane {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Constrain main-content padding */
    .page-container .main-content {
        padding: 10px !important;
    }

    /* Header: stack links */
    .page-container .main-content .row:first-child .list-inline.pull-left,
    .page-container .main-content .row:first-child .list-inline.pull-right {
        clear: both;
    }
}

/* ---- Mobile (< 768px) ---- */
@media (max-width: 767px) {

    /* Page container: remove left padding so content fills screen */
    .page-body .page-container {
        padding-left: 0 !important;
    }

    /* Main content full width */
    .page-container .main-content {
        padding: 8px !important;
        overflow-x: hidden;
    }

    /* ── Tables: horizontal scroll wrapper ── */
    /* Neon panel-body and any table direct parent */
    .panel-body,
    .panel > .table,
    .panel > .table-bordered {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: block;
    }

    /* Tables keep a sensible minimum width so columns don't crush */
    body table.table,
    body table.dataTable {
        min-width: 560px;
    }

    /* ── Dashboard stat tiles: 2-per-row ── */
    .row > [class*="col-md-"]:has(> .tile-stats) {
        width: 50% !important;
        float: left !important;
        padding: 0 6px !important;
    }

    /* ── General col-md stacking (non-tile) ── */
    /* Only override float/width when the column has no xs/sm override */
    .col-md-1:not([class*="col-xs-"]):not([class*="col-sm-"]),
    .col-md-2:not([class*="col-xs-"]):not([class*="col-sm-"]),
    .col-md-3:not([class*="col-xs-"]):not([class*="col-sm-"]) {
        width: 50% !important;
        float: left !important;
    }

    .col-md-4:not([class*="col-xs-"]):not([class*="col-sm-"]):not(:has(.tile-stats)),
    .col-md-5:not([class*="col-xs-"]):not([class*="col-sm-"]),
    .col-md-6:not([class*="col-xs-"]):not([class*="col-sm-"]),
    .col-md-7:not([class*="col-xs-"]):not([class*="col-sm-"]),
    .col-md-8:not([class*="col-xs-"]):not([class*="col-sm-"]),
    .col-md-9:not([class*="col-xs-"]):not([class*="col-sm-"]),
    .col-md-10:not([class*="col-xs-"]):not([class*="col-sm-"]),
    .col-md-11:not([class*="col-xs-"]):not([class*="col-sm-"]),
    .col-md-12:not([class*="col-xs-"]):not([class*="col-sm-"]) {
        width: 100% !important;
        float: none !important;
        clear: both;
    }

    /* ── Header bar ── */
    .page-container .main-content > .row:first-child {
        text-align: center;
    }

    .page-container .main-content > .row:first-child h2 {
        font-size: 18px !important;
        margin: 6px 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .list-inline.links-list.pull-left,
    .list-inline.links-list.pull-right {
        float: none !important;
        display: inline-block;
        margin: 4px 0;
    }

    .header-print-slot {
        display: none;
    }

    /* Header controls: stack on mobile */
    .header-controls-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
    }

    .header-controls-row .pull-left,
    .header-controls-row .pull-right {
        float: none !important;
        flex: 0 0 auto;
    }

    /* ── Page title h3 ── */
    .main-content > h3 {
        font-size: 16px !important;
        margin: 8px 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ── Action buttons inside tables ── */
    td .btn-group,
    td .btn-group-vertical {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    td .btn.btn-sm,
    td a.btn.btn-sm {
        font-size: 11px !important;
        padding: 5px 8px !important;
        margin-bottom: 2px;
    }

    /* ── Modals: full-width on mobile ── */
    .modal-dialog {
        width: 96% !important;
        margin: 10px auto !important;
    }

    .modal-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Form layout ── */
    .form-group .col-md-9,
    .form-group .col-md-8,
    .form-group .col-md-6,
    .form-group .col-md-4,
    .form-group .col-md-3 {
        width: 100% !important;
        float: none !important;
        clear: both;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .form-group label {
        display: block;
        margin-bottom: 4px;
    }

    /* ── DataTables controls ── */
    .dataTables_wrapper .row > [class*="col-"] {
        width: 100% !important;
        float: none !important;
        clear: both;
        text-align: left !important;
        margin-bottom: 8px;
    }

    .dataTables_filter input[type="search"] {
        width: 100% !important;
        display: block;
    }

    /* ── Export / print buttons row ── */
    .DTTT.btn-group {
        flex-wrap: wrap;
        gap: 4px;
    }

    /* ── Sidebar mobile toggle: always visible and large tap target ── */
    .sidebar-mobile-menu a {
        padding: 12px 16px !important;
        font-size: 18px !important;
    }

    /* ── Tiles: equal height rows ── */
    .tile-stats {
        margin-bottom: 10px !important;
    }

    /* ── Panel headings: wrap text ── */
    .panel-heading,
    .panel-title {
        white-space: normal !important;
        word-break: break-word;
    }
}

/* ---- Very small screens (< 480px) ---- */
@media (max-width: 480px) {

    /* Tiles: full width (1 per row) */
    .row > [class*="col-md-"]:has(> .tile-stats) {
        width: 100% !important;
        float: none !important;
    }

    /* Buttons full-width in forms */
    .panel-body > form .btn,
    .panel-body > .row .btn {
        width: 100%;
        margin-bottom: 6px;
    }

    /* Compact btn-group in table cells */
    td .btn-group {
        display: block;
        width: 100%;
    }

    td .btn-group > .btn,
    td .dropdown-toggle {
        width: 100%;
        margin-bottom: 3px;
        border-radius: 8px !important;
    }

    /* System name heading */
    .page-container .main-content > .row:first-child h2 {
        font-size: 15px !important;
    }

    /* Reduce modal padding */
    .modal-body,
    .modal-header,
    .modal-footer {
        padding: 10px 12px !important;
    }

    /* Smaller navigation items on phone */
    .page-container .sidebar-menu #main-menu li a {
        font-size: 14px !important;
        padding: 10px 14px !important;
    }

    /* Compact dataTables */
    body table.table th,
    body table.table td {
        font-size: 12px !important;
        padding: 6px 8px !important;
        white-space: nowrap;
    }
}

/* ---- Landscape phone (480px – 767px) ---- */
@media (min-width: 481px) and (max-width: 767px) {
    /* Tiles: 2-per-row confirmed */
    .row > [class*="col-md-"]:has(> .tile-stats) {
        width: 50% !important;
        float: left !important;
    }
}

/* ---- Touch targets: ensure minimum 44px ---- */
@media (max-width: 991px) {
    body .btn,
    body button,
    body input[type="submit"],
    body input[type="button"] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body .btn.btn-sm {
        min-height: 34px;
        font-size: 12px !important;
        padding: 6px 10px !important;
    }

    body .form-control,
    body select,
    body textarea {
        font-size: 16px !important; /* prevents iOS auto-zoom */
    }
}

body .system-page-action-bar {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin: 18px 0 12px 0;
}

body .system-page-action-bar .btn,
body .system-page-action-bar .DTTT_container,
body .system-page-action-bar .DTTT,
body .header-print-slot .DTTT_container,
body .header-print-slot .DTTT {
    margin: 0 !important;
}

body .header-print-slot {
    min-height: 44px;
}

body .header-print-slot .DTTT_container,
body .header-print-slot .DTTT {
    float: none !important;
    display: inline-flex !important;
}

body .system-page-action-bar .btn {
    float: none !important;
}

body .export-data,
body .dataTables_wrapper .DTTT_container {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
    flex: 0 0 auto;
    order: 2;
}

body .dataTables_wrapper .dataTables_filter,
body .system-search-wrap {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: nowrap;
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    order: 1;
}

body .system-search-wrap label {
    display: none !important;
}

body .system-search-wrap input,
body .dataTables_wrapper .dataTables_filter input {
    width: 260px !important;
    min-width: 260px;
    height: 44px !important;
    margin: 0 !important;
    vertical-align: middle;
}

body .system-search-btn,
body .system-search-btn:hover,
body .system-search-btn:focus,
body .system-search-btn:active {
    background: linear-gradient(180deg, #ffffff 0%, #edf4ff 100%) !important;
    border: 1px solid #2f5da8 !important;
    color: #123763 !important;
    text-shadow: none !important;
    box-shadow: 0 8px 18px rgba(33,79,147,0.12);
}

body .system-search-btn i,
body .system-search-btn span {
    color: #123763 !important;
}

body .DTTT.btn-group {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
}

body .DTTT .DTTT_button_xls,
body .DTTT .DTTT_button_pdf,
body .DTTT .DTTT_button_csv,
body .DTTT .DTTT_button_copy,
body .DTTT a.DTTT_button_xls,
body .DTTT a.DTTT_button_pdf,
body .DTTT a.DTTT_button_csv,
body .DTTT a.DTTT_button_copy {
    display: none !important;
}

body .DTTT .DTTT_button_print,
body .DTTT .DTTT_button_print:hover,
body .DTTT .DTTT_button_print:focus,
body .DTTT .DTTT_button_print:active {
    background: linear-gradient(180deg, #ffffff 0%, #edf4ff 100%) !important;
    border: 1px solid #2f5da8 !important;
    color: #123763 !important;
    text-shadow: none !important;
    border-radius: 16px !important;
    padding: 10px 24px !important;
    box-shadow: 0 8px 18px rgba(33,79,147,0.12);
}

body .DTTT .DTTT_button_print *,
body .DTTT .DTTT_button_print:before {
    color: #123763 !important;
}

body .system-search-btn {
    height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px !important;
    margin: 0 !important;
    white-space: nowrap;
}

body .dataTables_filter {
    float: none !important;
}

body .system-global-print-header {
    display: none;
}

@media print {
    body .system-global-print-header {
        display: flex !important;
        align-items: center;
        gap: 16px;
        margin: 0 0 18px 0 !important;
        padding: 0 0 12px 0;
        border-bottom: 2px solid #123763;
    }

    body .system-global-print-header img {
        width: 60px;
        height: 60px;
        object-fit: contain;
    }

    body .system-global-print-header h2 {
        margin: 0;
        color: #123763 !important;
        font-size: 24px;
    }

    body .system-global-print-header p {
        margin: 4px 0 0;
        color: #60758f !important;
    }
}

/* ===== GLOBAL DROPDOWN/DROPUP Z-INDEX FIX =====
   Menus get z-index boost; positioning is handled by JS below.
   Do NOT set position:absolute !important here — it blocks the JS fixed-position fix.
*/
.dropdown-menu,
.dropup .dropdown-menu,
.btn-group.open .dropdown-menu,
.btn-group.dropup.open .dropdown-menu {
    z-index: 9999 !important;
}
/* Prevent table cells from clipping overflow */
table .btn-group,
table .dropup,
table .dropdown {
    position: static !important;
}
/* Panel/tab containers must not clip dropdown menus */
.panel-body,
.tab-pane,
.tab-content,
.box {
    overflow: visible !important;
}
.dataTables_wrapper {
    overflow: visible !important;
}
.dataTables_scroll,
.dataTables_scrollBody {
    overflow: visible !important;
}