/* ==========================================================================
   PUSA brand theme
   Private Unaided Schools' Association (Regd.) Punjab

   Palette sampled directly from the association logo
   (backend/usertemplate/assets/media/logos/admin-logo.png):

       navy    #021245      green   #008430
       orange  #FE6902      yellow  #FFE900

   The green is applied as the theme "primary" colour inside
   style.bundle.css / style.bundle.min.css, and is also the header and
   login-panel background.  This file adds the orange / yellow accents
   on top of it.

   Load this AFTER style.bundle(.min).css.
   Colours only - nothing in here changes layout, sizing or behaviour.
   ========================================================================== */

:root {
    /* navy is the logo's fourth colour - kept here for reference, not used
       in the layout (header and login panel are green) */
    --brand-navy: #021245;
    --brand-navy-soft: #0A1F63;
    --brand-green: #008430;
    --brand-green-dark: #00631F;
    --brand-green-light: #D7F9E3;
    --brand-orange: #FE6902;
    --brand-yellow: #FFE900;
}

/* --------------------------------------------------------------------------
   1. Top header strip - logo green, finished with the logo's orange band.
      "inset" shadows are used instead of borders so the header keeps its
      exact 75px / 60px height and nothing on the page shifts.
   -------------------------------------------------------------------------- */
.header .header-top {
    background-color: var(--brand-green) !important;
    -webkit-box-shadow: inset 0 -3px 0 0 var(--brand-orange) !important;
    box-shadow: inset 0 -3px 0 0 var(--brand-orange) !important;
}

.header-mobile {
    background-color: var(--brand-green) !important;
    -webkit-box-shadow: inset 0 -3px 0 0 var(--brand-orange), 0 1px 9px -3px rgba(0, 0, 0, 0.1) !important;
    box-shadow: inset 0 -3px 0 0 var(--brand-orange), 0 1px 9px -3px rgba(0, 0, 0, 0.1) !important;
}

/* Metronic drops the mobile header's drop-shadow while the mobile topbar is
   open - keep that behaviour, only the brand accent stays. */
.topbar-mobile-on .header-mobile {
    -webkit-box-shadow: inset 0 -3px 0 0 var(--brand-orange) !important;
    box-shadow: inset 0 -3px 0 0 var(--brand-orange) !important;
}

/* "Session" label in the topbar - logo yellow on the green strip,
   the same yellow-on-green pairing the logo ring uses. */
.header .header-top .topbar .col-form-label {
    color: var(--brand-yellow) !important;
}

/* --------------------------------------------------------------------------
   2. Main navigation (white strip under the header) - orange underline on
      hover / active, green text.  Again inset shadow, so no reflow.
   -------------------------------------------------------------------------- */
.header .header-bottom .header-menu .menu-nav > .menu-item > .menu-link {
    -webkit-transition: box-shadow .2s ease, color .2s ease;
    transition: box-shadow .2s ease, color .2s ease;
}

.header .header-bottom .header-menu .menu-nav > .menu-item:hover > .menu-link,
.header .header-bottom .header-menu .menu-nav > .menu-item.menu-item-active > .menu-link,
.header .header-bottom .header-menu .menu-nav > .menu-item.menu-item-here > .menu-link {
    -webkit-box-shadow: inset 0 -3px 0 0 var(--brand-orange);
    box-shadow: inset 0 -3px 0 0 var(--brand-orange);
}

.header .header-bottom .header-menu .menu-nav > .menu-item:hover > .menu-link .menu-text,
.header .header-bottom .header-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text,
.header .header-bottom .header-menu .menu-nav > .menu-item.menu-item-here > .menu-link .menu-text {
    color: var(--brand-green) !important;
}

/* --------------------------------------------------------------------------
   3. Login / reset-password side panel - logo green, with a yellow-to-orange
      brand stripe on its inner edge (the logo's banner colours; green is
      left out of the stripe so it stays visible against the green panel).
   -------------------------------------------------------------------------- */
.login.login-1 .login-aside {
    position: relative;
    background-color: var(--brand-green) !important;
}

.login.login-1 .login-aside::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 6px;
    background: -webkit-gradient(linear, left top, left bottom, from(var(--brand-yellow)), to(var(--brand-orange)));
    background: linear-gradient(180deg, var(--brand-yellow) 0%, var(--brand-orange) 100%);
}

@media (max-width: 991.98px) {
    /* panel sits above the form on small screens - move the stripe to the bottom */
    .login.login-1 .login-aside::after {
        top: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 5px;
        background: -webkit-gradient(linear, left top, right top, from(var(--brand-yellow)), to(var(--brand-orange)));
        background: linear-gradient(90deg, var(--brand-yellow) 0%, var(--brand-orange) 100%);
    }
}

/* --------------------------------------------------------------------------
   4. Small consistency fixes so no stray blue is left behind.
   -------------------------------------------------------------------------- */

/* select2 highlighted option (plugins.bundle.css ships a bootstrap blue) */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: var(--brand-green) !important;
    color: #ffffff !important;
}

/* bootstrap-datepicker: plugins.bundle.css ships bootstrap-3 blues for the
   selected / active day, month, year and decade cells. */
.datepicker table tr td.active,
.datepicker table tr td.active.highlighted,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.highlighted:hover,
.datepicker table tr td.active:focus,
.datepicker table tr td.active.highlighted:focus,
.datepicker table tr td.active.focus,
.datepicker table tr td.active.highlighted.focus,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td.selected,
.datepicker table tr td.selected:hover {
    background-color: var(--brand-green) !important;
    background-image: none !important;
    border-color: var(--brand-green-dark) !important;
    color: #ffffff !important;
    text-shadow: none !important;
}

/* SweetAlert confirm button (plugins.bundle.css bootstrap blue) */
.swal2-popup .swal2-styled.swal2-confirm,
.swal2-popup .swal2-styled.swal2-confirm:focus {
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
}

/* ion range slider (plugins.bundle.css bootstrap blue) */
.irs--big .irs-bar {
    background: var(--brand-green) !important;
    border-color: var(--brand-green-dark) !important;
}

.irs--big .irs-from,
.irs--big .irs-to,
.irs--big .irs-single {
    background: var(--brand-green) !important;
    border-color: var(--brand-green-dark) !important;
}

/* browser-native accents (checkboxes, range inputs, text selection) */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
    accent-color: var(--brand-green);
}

::-moz-selection {
    background: var(--brand-green);
    color: #ffffff;
}

::selection {
    background: var(--brand-green);
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   5. Footer - thin green rule so the page closes on a brand colour.
   -------------------------------------------------------------------------- */
.footer {
    -webkit-box-shadow: inset 0 2px 0 0 var(--brand-green);
    box-shadow: inset 0 2px 0 0 var(--brand-green);
}