/* ============================================================
   SCPS Career Fair — Site Styles
   ============================================================ */

/* ── Custom Properties ─────────────────────────────────────── */
:root {
    --cf-blue:        #003087;
    --cf-blue-mid:    #0056b3;
    --cf-blue-lt:     #e8f0fe;
    --cf-shadow-sm:   0 2px 8px rgba(0, 48, 135, .08);
    --cf-shadow-md:   0 8px 24px rgba(0, 48, 135, .14);
    --cf-shadow-lg:   0 16px 40px rgba(0, 48, 135, .18);
    --cf-radius:      .65rem;
    --cf-radius-sm:   .4rem;
    --cf-transition:  .22s ease;
    --cf-accent:      linear-gradient(90deg, var(--cf-blue-mid), #0dcaf0);
}

[data-bs-theme="dark"] {
    --cf-shadow-sm:   0 2px 8px rgba(0, 0, 0, .25);
    --cf-shadow-md:   0 8px 24px rgba(0, 0, 0, .35);
    --cf-shadow-lg:   0 16px 40px rgba(0, 0, 0, .45);
    --cf-blue-lt:     rgba(13, 110, 253, .12);
}


/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0);    }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0);     }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(.94); }
    to   { opacity: 1; transform: scale(1);   }
}

@keyframes gradientShift {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}

@keyframes accentSlide {
    from { width: 0; }
    to   { width: 48px; }
}

@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(13, 110, 253, .45); }
    50%       { box-shadow: 0 0 0 6px rgba(13, 110, 253, 0);   }
}

@keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}


/* ── Entrance animation (IntersectionObserver-driven) ────────── */
.cf-animate {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .45s ease, transform .45s ease;
}

.cf-animate.cf-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger siblings inside an animated container */
.cf-stagger > .cf-animate:nth-child(1)  { transition-delay: .04s; }
.cf-stagger > .cf-animate:nth-child(2)  { transition-delay: .09s; }
.cf-stagger > .cf-animate:nth-child(3)  { transition-delay: .14s; }
.cf-stagger > .cf-animate:nth-child(4)  { transition-delay: .19s; }
.cf-stagger > .cf-animate:nth-child(5)  { transition-delay: .24s; }
.cf-stagger > .cf-animate:nth-child(6)  { transition-delay: .29s; }
.cf-stagger > .cf-animate:nth-child(7)  { transition-delay: .34s; }
.cf-stagger > .cf-animate:nth-child(8)  { transition-delay: .39s; }
.cf-stagger > .cf-animate:nth-child(9)  { transition-delay: .44s; }
.cf-stagger > .cf-animate:nth-child(10) { transition-delay: .49s; }


/* ── Dark-mode theme transition ─────────────────────────────── */
html.theme-transitioning * {
    transition:
        background-color 0.3s ease,
        color            0.3s ease,
        border-color     0.3s ease,
        box-shadow       0.3s ease,
        fill             0.3s ease,
        stroke           0.3s ease !important;
}

html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition:
        background-color 0.3s ease,
        color            0.3s ease,
        border-color     0.3s ease,
        box-shadow       0.3s ease !important;
}


/* ── Base typography ────────────────────────────────────────── */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html { font-size: 16px; }
}


/* ── Layout ─────────────────────────────────────────────────── */
.wrapper { display: flex; flex-direction: column; min-height: 100vh; }

.content-wrapper {
    padding-top:    7.5rem;
    padding-bottom: 3rem;
}

.header { width: 100%; position: fixed; }

.content {
    padding-left:  2rem;
    padding-right: 2rem;
}

@media (max-width: 575px) {
    .content {
        padding-left:  1rem;
        padding-right: 1rem;
    }
}


/* ── Navbar ─────────────────────────────────────────────────── */
.navbar {
    box-shadow: 0 1px 16px rgba(0, 0, 0, .09);
    transition: box-shadow var(--cf-transition);
}

.navbar .nav-link {
    position: relative;
    transition: color var(--cf-transition);
    font-weight: 500;
}

.navbar .nav-link::after {
    content: '';
    position: absolute;
    bottom: 2px; left: 50%;
    width: 0; height: 2px;
    background: var(--cf-accent);
    transition: width var(--cf-transition), left var(--cf-transition);
    border-radius: 2px;
}

.navbar .nav-link:hover::after { width: 70%; left: 15%; }


/* ── Buttons ────────────────────────────────────────────────── */
.btn {
    border-radius: var(--cf-radius-sm);
    font-weight: 500;
    transition:
        transform        var(--cf-transition),
        box-shadow       var(--cf-transition),
        background-color var(--cf-transition),
        border-color     var(--cf-transition),
        color            var(--cf-transition);
}

.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0);    box-shadow: none !important; }

.btn-primary:hover  { box-shadow: 0 5px 16px rgba(13, 110, 253, .38); }
.btn-success:hover  { box-shadow: 0 5px 16px rgba(25, 135, 84,  .35); }
.btn-warning:hover  { box-shadow: 0 5px 16px rgba(255, 193, 7,  .40); }
.btn-danger:hover   { box-shadow: 0 5px 16px rgba(220, 53,  69, .35); }

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}


/* ── Cards ──────────────────────────────────────────────────── */
.card {
    border-radius: var(--cf-radius) !important;
    transition:
        transform    var(--cf-transition),
        box-shadow   var(--cf-transition),
        border-color var(--cf-transition);
}

.card.shadow-sm { box-shadow: var(--cf-shadow-sm) !important; }

/* Lift on hover for non-table cards */
.card.shadow-sm:not(:has(.table)):not(:has(canvas)):hover {
    transform:  translateY(-4px);
    box-shadow: var(--cf-shadow-md) !important;
}

/* Subtle left-accent on job posting cards */
.posting-card .card {
    border-left: 3px solid transparent;
}

.posting-card .card:hover {
    border-left-color: var(--cf-blue-mid);
}


/* ── Card header gradient accent ────────────────────────────── */
.card-header.bg-primary {
    background: linear-gradient(135deg, var(--cf-blue), var(--cf-blue-mid)) !important;
}


/* ── Page heading accent line ───────────────────────────────── */
h1.page-accent,
.page-accent {
    position: relative;
    padding-bottom: .5rem;
}

.page-accent::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    height: 3px;
    width: 48px;
    background: var(--cf-accent);
    border-radius: 2px;
    animation: accentSlide .5s .1s ease both;
}


/* ── Hero gradient (animated) ───────────────────────────────── */
.hero-gradient {
    background: linear-gradient(135deg, #002060, var(--cf-blue), #0056b3, #0077cc, #002060) !important;
    background-size: 300% 300% !important;
    animation: gradientShift 10s ease infinite;
}


/* ── Stat cards decorative circle ───────────────────────────── */
.card.border-top::before {
    content: '';
    position: absolute;
    top: -30px; right: -20px;
    width: 90px; height: 90px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    pointer-events: none;
}

.card.border-top { position: relative; overflow: hidden; }


/* ── Badges ─────────────────────────────────────────────────── */
.badge {
    font-weight: 600;
    letter-spacing: .02em;
    border-radius: .35rem;
    transition: transform var(--cf-transition), box-shadow var(--cf-transition);
}

.badge-pulse { animation: badgePulse 2.2s ease-in-out infinite; }

/* Interview Completed — teal, distinct from Approved (green) */
.bg-teal { background-color: #20c997 !important; color: #fff !important; }
/* Manager/Principal role indicator */
.bg-purple { background-color: #6f42c1 !important; color: #fff !important; }
.btn-teal { background-color: #20c997; border-color: #20c997; color: #fff; }
.btn-teal:hover { background-color: #1aac82; border-color: #1aac82; color: #fff; }
.btn-outline-teal { color: #20c997; border-color: #20c997; background-color: transparent; }
.btn-outline-teal:hover { background-color: #20c997; border-color: #20c997; color: #fff; }


/* ── Tables ─────────────────────────────────────────────────── */
.table tbody tr {
    transition: background-color var(--cf-transition);
}

.table-hover tbody tr:hover {
    transition: background-color .12s ease;
}


/* ── Form controls ──────────────────────────────────────────── */
.form-control,
.form-select {
    border-radius: var(--cf-radius-sm);
    transition: border-color var(--cf-transition), box-shadow var(--cf-transition);
}


/* ── Alerts ─────────────────────────────────────────────────── */
.alert {
    border-radius: var(--cf-radius);
    border-left-width: 4px;
    animation: fadeInDown .3s ease both;
}


/* ── Dropdown menus ─────────────────────────────────────────── */
.dropdown-menu {
    border-radius: var(--cf-radius);
    box-shadow: var(--cf-shadow-md);
    border: 1px solid rgba(0, 0, 0, .07);
    animation: scaleIn .18s ease both;
    transform-origin: top left;
}

/* Prevent card lift on filter toolbars — avoids dropdown position jumping */
.cf-no-lift:hover {
    transform:  none !important;
    box-shadow: var(--cf-shadow-sm) !important;
}

/* Prevent button lift when its dropdown is open */
.btn.show,
.btn.show:hover {
    transform:  none !important;
    box-shadow: none !important;
}


/* ── Notification container ─────────────────────────────────── */
#notification-container .alert { animation: fadeInDown .3s ease both; }


/* ── Utility ────────────────────────────────────────────────── */
.hidden {
    visibility: hidden;
    display: none;
}

.text-pom { color: #c0392b !important; }

.text-pom::after {
    content: "\a";
    white-space: pre;
}

.text-pom.hidden {
    height: 0;
    visibility: hidden;
    display: none;
}


/* ── Page header band ───────────────────────────────────────── */
.cf-page-header {
    margin-bottom: 1.75rem;
    border-radius: var(--cf-radius);
    overflow: hidden;
    background: linear-gradient(
        135deg,
        rgba(0, 48, 135, .055) 0%,
        rgba(0, 86, 179, .03)  60%,
        transparent            100%
    );
    border: 1px solid rgba(0, 86, 179, .1);
    animation: fadeInDown .4s ease both;
}

[data-bs-theme="dark"] .cf-page-header {
    background: linear-gradient(
        135deg,
        rgba(0, 86, 179, .14) 0%,
        rgba(13, 202, 240, .05) 100%
    );
    border-color: rgba(13, 110, 253, .18);
}

.cf-page-header-stripe {
    height: 3px;
    background: linear-gradient(
        90deg,
        #003087, #0056b3, #0dcaf0, #198754, #0056b3, #003087
    );
    background-size: 300% 100%;
    animation: gradientShift 6s ease infinite;
}

.cf-page-header-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .7rem 1.25rem;
}

.cf-page-header-title {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.cf-page-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--cf-blue), var(--cf-blue-mid));
    color: #fff;
    font-size: .9rem;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(0, 48, 135, .28);
    transition: transform var(--cf-transition), box-shadow var(--cf-transition);
}

.cf-page-header:hover .cf-page-header-icon {
    transform: scale(1.08);
    box-shadow: 0 5px 14px rgba(0, 48, 135, .38);
}

.cf-page-header-text {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--bs-body-color);
}

.cf-page-header-logo {
    height: 30px;
    opacity: .12;
    filter: grayscale(1);
    transition: opacity var(--cf-transition);
    pointer-events: none;
}

.cf-page-header:hover .cf-page-header-logo { opacity: .28; }

@media (max-width: 576px) {
    .cf-page-header-logo { display: none; }
    .cf-page-header-body { padding: .55rem 1rem; }
    .cf-page-header-text { font-size: .9rem; }
}


/* ── jQuery Steps wizard — dark mode overrides ──────────────── */
[data-bs-theme="dark"] .wizard > .content {
    background: var(--bs-secondary-bg);
}

[data-bs-theme="dark"] .wizard > .steps .disabled a,
[data-bs-theme="dark"] .wizard > .steps .disabled a:hover,
[data-bs-theme="dark"] .wizard > .steps .disabled a:active {
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .wizard > .steps .done a,
[data-bs-theme="dark"] .wizard > .steps .done a:hover,
[data-bs-theme="dark"] .wizard > .steps .done a:active {
    background: #1a6ea0;
    color: #fff;
}

[data-bs-theme="dark"] .wizard > .actions .disabled a,
[data-bs-theme="dark"] .wizard > .actions .disabled a:hover,
[data-bs-theme="dark"] .wizard > .actions .disabled a:active {
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .wizard > .content > .body input:not([type="checkbox"]):not([type="radio"]) {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}


/* ── Reduced motion — respect OS preference ─────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    .cf-animate,
    .hero-gradient,
    .badge-pulse,
    .btn,
    .card,
    .dropdown-menu,
    .alert {
        animation: none !important;
        transition: none !important;
    }

    .cf-animate { opacity: 1; transform: none; }
}