/* ==========================================================================
   OCHS Portal - brand skin
   Colours, type and the merged login page, aligned with ochsng.org.
   Loaded after the theme stylesheet, so these rules win.
   ========================================================================== */

:root {
    --ochs-primary:        #075272;  /* deep teal-blue - ochsng.org headings/nav */
    --ochs-primary-dark:   #053c55;
    --ochs-primary-soft:   #e7eef2;
    --ochs-secondary:      #1e73be;  /* link blue */
    --ochs-accent:         #ff6334;  /* orange call-to-action */
    --ochs-accent-dark:    #e5501f;
    --ochs-navy:           #2f3a5f;
    --ochs-ink:            #4a4a4a;
    --ochs-muted:          #7a8794;
    --ochs-line:           #e3e8ec;
    --ochs-heading-font:   'Poppins', 'Segoe UI', system-ui, sans-serif;
    --ochs-body-font:      'Open Sans', 'Segoe UI', system-ui, sans-serif;
}

/* ---------- 1. Global brand colours -------------------------------------- */

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: var(--ochs-primary);
    border-color: var(--ochs-primary);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ochs-primary-dark);
    border-color: var(--ochs-primary-dark);
    box-shadow: none;
}
.btn-outline-primary {
    color: var(--ochs-primary);
    border-color: var(--ochs-primary);
}
.btn-outline-primary:hover {
    background-color: var(--ochs-primary);
    border-color: var(--ochs-primary);
}
.btn-warning,
.btn-warning:hover {
    background-color: var(--ochs-accent);
    border-color: var(--ochs-accent);
    color: #fff;
}

a { color: var(--ochs-secondary); }
a:hover { color: var(--ochs-primary); }

.text-primary { color: var(--ochs-primary) !important; }
.bg-primary   { background-color: var(--ochs-primary) !important; }
.badge-primary { background-color: var(--ochs-primary); }

.form-control:focus {
    border-color: var(--ochs-secondary);
    box-shadow: 0 0 0 .15rem rgba(30, 115, 190, .15);
}

/* ---------- Dashboard chrome ---------------------------------------------
   The theme paints the header, sidebar and table headers from a colour
   variant class (header-lightblue, navbar-lightblue, ...) chosen in
   Settings. These rules override whichever variant is active so the
   dashboard reads as OCHS teal regardless of that setting.
   Semantic colours (success / danger / warning) are deliberately left alone.
   ------------------------------------------------------------------------ */

.pcoded-header,
.pcoded-header.navbar-light {
    background: var(--ochs-primary) !important;
    color: #fff;
}
.pcoded-header .navbar-brand,
.pcoded-header .header-logo,
.pcoded-navbar .header-logo,
.pcoded-navbar .b-brand {
    background: var(--ochs-primary-dark) !important;
}
.pcoded-header a,
.pcoded-header .dropdown-toggle,
.pcoded-header .nav-link,
.pcoded-header .m-header .b-title {
    color: #fff !important;
}

.pcoded-navbar { background: var(--ochs-primary-dark) !important; }
.pcoded-navbar .pcoded-inner-navbar > li.active > a,
.pcoded-navbar .pcoded-inner-navbar > li.pcoded-trigger > a,
.pcoded-navbar .pcoded-inner-navbar li.active > a {
    background: rgba(255, 255, 255, .10) !important;
    border-left: 3px solid var(--ochs-accent) !important;
    color: #fff !important;
}
.pcoded-navbar .pcoded-inner-navbar li > a:hover { color: #fff !important; }
.pcoded-navbar .pcoded-menu-caption { color: rgba(255, 255, 255, .55) !important; }

.table thead th,
table.dataTable thead th,
table.dataTable thead td {
    background: var(--ochs-primary) !important;
    color: #fff !important;
    border-color: var(--ochs-primary) !important;
}

.page-header .page-header-title h5,
.card .card-header h5 { color: var(--ochs-primary); }
.card .card-header h5::after,
.page-header-title::before { background: var(--ochs-accent); }
.nav-tabs .nav-link.active { border-bottom-color: var(--ochs-primary); color: var(--ochs-primary); }
.page-link { color: var(--ochs-primary); }
.page-item.active .page-link {
    background-color: var(--ochs-primary);
    border-color: var(--ochs-primary);
}

/* ==========================================================================
   2. Login page - one page for students and staff
   ========================================================================== */

body.ochs-auth {
    margin: 0;
    font-family: var(--ochs-body-font);
    color: var(--ochs-ink);
    background: #fff;
}

.ochs-auth-shell {
    display: flex;
    min-height: 100vh;
}

/* ---------- Entrance animation -------------------------------------------- */

@keyframes ochsRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.ochs-rise {
    opacity: 0;
    animation: ochsRise .7s cubic-bezier(.22, .61, .36, 1) forwards;
    animation-delay: var(--delay, 0s);
}

/* ---------- Left: brand panel with crossfading photography ---------------- */

.ochs-brand-panel {
    position: relative;
    flex: 1 1 52%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem 3.5rem;
    color: #fff;
    background-color: var(--ochs-primary-dark);
    overflow: hidden;
    isolation: isolate;
}

.ochs-slideshow { position: absolute; inset: 0; z-index: -3; }

.ochs-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: ochsSlideFade 27s infinite;
    will-change: opacity, transform;
}
.ochs-slide-1 {
    background-image: url('https://ochsng.org/wp-content/uploads/2022/09/class-of-2017.jpg');
    animation-delay: 0s;
}
.ochs-slide-2 {
    background-image: url('https://ochsng.org/wp-content/uploads/2022/09/cool-fm-visit.jpg');
    animation-delay: 9s;
}
.ochs-slide-3 {
    background-image: url('https://ochsng.org/wp-content/uploads/2022/08/poster.jpg');
    animation-delay: 18s;
}

/* Each slide holds for ~9s of a 27s cycle: fade in, drift, fade out. */
@keyframes ochsSlideFade {
     0%   { opacity: 0; transform: scale(1.04); }
     4%   { opacity: 1; }
    30%   { opacity: 1; }
    36%   { opacity: 0; transform: scale(1.13); }
   100%   { opacity: 0; transform: scale(1.04); }
}

.ochs-scrim {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(150deg,
            rgba(7, 82, 114, .93) 0%,
            rgba(7, 82, 114, .80) 45%,
            rgba(47, 58, 95, .92) 100%);
}

.ochs-globe {
    position: absolute;
    right: -90px;
    bottom: -70px;
    z-index: -1;
    width: 360px;
    height: 360px;
    background: url('https://ochsng.org/wp-content/uploads/2022/08/globe-removebg.png') center/contain no-repeat;
    opacity: .10;
    animation: ochsFloat 14s ease-in-out infinite;
    pointer-events: none;
}
@keyframes ochsFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-18px) rotate(6deg); }
}

.ochs-brand-head { position: relative; }

.ochs-brand-logo {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    text-decoration: none;
}
.ochs-brand-logo img {
    height: 62px;
    width: auto;
    background: #fff;
    border-radius: 10px;
    padding: 6px 10px;
    transition: transform .3s ease;
}
.ochs-brand-logo:hover img { transform: scale(1.04); }
.ochs-brand-logo span {
    font-family: var(--ochs-heading-font);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.3;
    color: #fff;
    max-width: 190px;
}

.ochs-brand-body { position: relative; padding: 2.5rem 0; }

.ochs-brand-body h2 {
    font-family: var(--ochs-heading-font);
    font-weight: 700;
    font-size: 2.6rem;
    line-height: 1.15;
    margin: 0 0 1rem;
    color: #fff;
}
.ochs-brand-body h2 em {
    font-style: normal;
    color: var(--ochs-accent);
}
.ochs-brand-body .ochs-motto {
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 34rem;
    color: rgba(255, 255, 255, .88);
    margin-bottom: 2rem;
}

.ochs-highlights {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .9rem;
    max-width: 32rem;
}
.ochs-highlights li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-size: .95rem;
    color: rgba(255, 255, 255, .92);
}
.ochs-highlights i {
    flex: 0 0 auto;
    margin-top: .2rem;
    color: var(--ochs-accent);
    font-size: 1rem;
}

.ochs-brand-foot {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
    font-size: .85rem;
    color: rgba(255, 255, 255, .78);
}
.ochs-brand-foot div { display: flex; align-items: center; gap: .5rem; }
.ochs-brand-foot i { color: var(--ochs-accent); }
.ochs-brand-foot a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.ochs-brand-foot a:hover { color: #fff; }

/* ---------- Right: form panel --------------------------------------------- */

.ochs-form-panel {
    flex: 1 1 48%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    background: #fff;
}

.ochs-form-inner {
    width: 100%;
    max-width: 27rem;
}

.ochs-card {
    border: 1px solid var(--ochs-line);
    border-radius: 16px;
    padding: 1.9rem 1.85rem 1.6rem;
    background: #fff;
    box-shadow: 0 14px 38px rgba(7, 82, 114, .09);
}

.ochs-card-head { margin-bottom: 1.35rem; }
.ochs-eyebrow {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ochs-accent);
    margin-bottom: .4rem;
}
.ochs-card-title {
    font-family: var(--ochs-heading-font);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.25;
    color: var(--ochs-primary);
    margin: 0 0 .3rem;
}
.ochs-card-sub {
    margin: 0;
    font-size: .9rem;
    color: var(--ochs-muted);
}

/* ---------- Role switch ---------------------------------------------------- */

.ochs-tabs {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 4px;
    margin-bottom: 1.4rem;
    background: #f2f5f7;
    border-radius: 11px;
}
.ochs-tab-indicator {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(7, 82, 114, .12);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}
.ochs-card[data-active="staff"] .ochs-tab-indicator { transform: translateX(100%); }

.ochs-tab {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .6rem .5rem;
    border: 0;
    background: transparent;
    font-family: var(--ochs-heading-font);
    font-size: .9rem;
    font-weight: 600;
    color: var(--ochs-muted);
    cursor: pointer;
    transition: color .2s ease;
}
.ochs-tab[aria-selected="true"] { color: var(--ochs-primary); }
.ochs-tab:focus-visible { outline: 2px solid var(--ochs-secondary); outline-offset: 2px; border-radius: 8px; }
.ochs-tab i { font-size: .95rem; }

/* ---------- Panels (stacked, crossfaded) ----------------------------------- */

.ochs-panels { display: grid; }
.ochs-panel {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .28s ease, transform .28s cubic-bezier(.22, .61, .36, 1), visibility .28s;
}
.ochs-card[data-active="student"] .ochs-panel[data-panel="student"],
.ochs-card[data-active="staff"]   .ochs-panel[data-panel="staff"] {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* ---------- Fields ---------------------------------------------------------- */

.ochs-field { margin-bottom: 1rem; }

.ochs-label {
    display: block;
    margin-bottom: .35rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ochs-ink);
}

.ochs-input-wrap { position: relative; }
.ochs-input-wrap > i {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .95rem;
    color: var(--ochs-muted);
    transition: color .2s ease;
    pointer-events: none;
}
.ochs-input-wrap:focus-within > i { color: var(--ochs-primary); }

.ochs-input {
    width: 100%;
    padding: .72rem 1rem .72rem 2.5rem;
    border: 1px solid var(--ochs-line);
    border-radius: 10px;
    background: #fbfcfd;
    font-family: var(--ochs-body-font);
    font-size: .95rem;
    color: var(--ochs-ink);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ochs-input::placeholder { color: #b3bec7; }
.ochs-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--ochs-secondary);
    box-shadow: 0 0 0 .18rem rgba(30, 115, 190, .14);
}
.ochs-input.is-invalid { border-color: #e0483c; }

.ochs-error {
    margin: .35rem 0 0;
    font-size: .8rem;
    color: #d0392c;
    animation: ochsShake .4s ease;
}
@keyframes ochsShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

.ochs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: .1rem 0 1.15rem;
    font-size: .85rem;
}
.ochs-check {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    color: var(--ochs-ink);
    cursor: pointer;
}
.ochs-check input { accent-color: var(--ochs-primary); width: 15px; height: 15px; }
.ochs-link { color: var(--ochs-secondary); text-decoration: none; font-weight: 600; }
.ochs-link:hover { text-decoration: underline; }

/* ---------- Submit ---------------------------------------------------------- */

.ochs-submit {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .82rem 1rem;
    border: 0;
    border-radius: 10px;
    background: var(--ochs-primary);
    color: #fff;
    font-family: var(--ochs-heading-font);
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.ochs-submit:hover {
    background: var(--ochs-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(7, 82, 114, .22);
}
.ochs-submit:active { transform: translateY(0); }
.ochs-submit i { transition: transform .2s ease; }
.ochs-submit:hover i { transform: translateX(3px); }

/* light sweep across the button on hover */
.ochs-submit::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: skewX(-18deg);
    transition: left .55s ease;
}
.ochs-submit:hover::after { left: 130%; }

.ochs-copyright {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: .78rem;
    color: var(--ochs-muted);
}

/* ---------- Quick links ----------------------------------------------------- */

.ochs-quick-links {
    margin-top: 1.15rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
}
.ochs-quick-links a {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .62rem .85rem;
    border: 1px solid var(--ochs-line);
    border-radius: 10px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ochs-primary);
    text-decoration: none;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .15s ease;
}
.ochs-quick-links a:hover {
    border-color: var(--ochs-secondary);
    color: var(--ochs-secondary);
    box-shadow: 0 4px 14px rgba(7, 82, 114, .07);
    transform: translateY(-1px);
}
.ochs-quick-links a i { color: var(--ochs-accent); font-size: .95rem; }

.ochs-quick-links a.ochs-cta {
    grid-column: 1 / -1;
    justify-content: center;
    background: var(--ochs-accent);
    border-color: var(--ochs-accent);
    color: #fff;
}
.ochs-quick-links a.ochs-cta i { color: #fff; }
.ochs-quick-links a.ochs-cta:hover {
    background: var(--ochs-accent-dark);
    border-color: var(--ochs-accent-dark);
    color: #fff;
    box-shadow: 0 8px 20px rgba(255, 99, 52, .28);
}

/* Careers sits beside Admission and gets the same full-width shape, but in
   the school's blue rather than the orange: one page can only have one
   primary action, and for a visitor at the login screen that is admission. */
.ochs-quick-links a.ochs-cta--quiet {
    background: var(--ochs-primary);
    border-color: var(--ochs-primary);
}
.ochs-quick-links a.ochs-cta--quiet:hover {
    background: var(--ochs-primary-dark);
    border-color: var(--ochs-primary-dark);
    box-shadow: 0 8px 20px rgba(7, 82, 114, .26);
}

/* ---------- Responsive ------------------------------------------------------- */

/* Below 992px the theme drops the header's second row into a collapsed menu
   and paints it white. Our header text is white, so the portal title and the
   language, notification and profile controls disappeared into the
   background. Letting the branded header show through puts them back. */
@media (max-width: 991px) {
    .pcoded-header .navbar-collapse,
    .pcoded-header .collapse.navbar-collapse {
        background: transparent !important;
        box-shadow: none;
    }

    /* The dropdowns those controls open keep their own light panel, so their
       contents must stay dark on white. */
    .pcoded-header .dropdown-menu {
        background: #fff;
    }
    .pcoded-header .dropdown-menu a,
    .pcoded-header .dropdown-menu li,
    .pcoded-header .dropdown-menu span,
    .pcoded-header .dropdown-menu i {
        color: var(--ochs-navy, #2f3a5f);
    }
}

@media (max-width: 991px) {
    .ochs-auth-shell { flex-direction: column; }
    .ochs-brand-panel { padding: 2.25rem 1.75rem; }
    .ochs-brand-body { padding: 1.75rem 0; }
    .ochs-brand-body h2 { font-size: 2rem; }
    .ochs-highlights { display: none; }
    .ochs-globe { display: none; }
    .ochs-form-panel { padding: 2rem 1.25rem 3rem; }
}

@media (max-width: 575px) {
    .ochs-brand-foot { gap: .75rem; flex-direction: column; }
    .ochs-quick-links { grid-template-columns: 1fr; }
    .ochs-card { padding: 1.6rem 1.25rem 1.35rem; }
}

/* ---------- Reduced motion ---------------------------------------------------
   Everything above is decoration. If the reader has asked their system to
   stop moving things, the page must still be complete and legible - so the
   slides settle on one image and every entrance lands at its end state.
   ---------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .ochs-rise { opacity: 1; animation: none; }
    .ochs-slide { animation: none; transform: none; }
    .ochs-slide-1 { opacity: 1; }
    .ochs-slide-2,
    .ochs-slide-3 { opacity: 0; }
    .ochs-globe { animation: none; }
    .ochs-error { animation: none; }
    .ochs-tab-indicator,
    .ochs-panel,
    .ochs-submit,
    .ochs-submit::after,
    .ochs-quick-links a { transition: none; }
    .ochs-submit:hover { transform: none; }
    .ochs-quick-links a:hover { transform: none; }
}