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

:root {
    --navy: #17285a;
    --navy-dark: #0a1433;
    --navy-soft: #263b78;
    --gold: #f7bd18;
    --gold-dark: #d99a00;
    --ink: #101828;
    --muted: #667085;
    --line: rgba(15, 23, 42, .10);
    --surface: rgba(255, 255, 255, .92);
    --surface-solid: #ffffff;
    --page: #eef3f8;
    --success: #12a56b;
    --danger: #d92d20;
    --radius: 8px;
    --shadow: 0 18px 45px rgba(16, 24, 40, .12);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    font-family: Inter, Arial, sans-serif !important;
    color: var(--ink);
    background:
        linear-gradient(115deg, rgba(6, 15, 38, .90), rgba(23, 40, 90, .74) 42%, rgba(255, 255, 255, .78) 100%),
        url('../img/invictus-campus-bg.jpg') center / cover fixed no-repeat !important;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 12%, rgba(247, 189, 24, .20), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(238, 243, 248, .82));
}

a {
    color: var(--navy);
}

h1, h2, h3 {
    letter-spacing: 0;
}

.main, .onehr-main {
    background: rgba(238, 243, 248, .82);
    backdrop-filter: blur(14px);
}

.content, .onehr-content {
    padding: 34px !important;
}

.topbar {
    background: rgba(255, 255, 255, .86) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .56) !important;
    box-shadow: 0 16px 38px rgba(16, 24, 40, .08);
    backdrop-filter: blur(18px);
}

.topbar h1, h1 {
    color: var(--navy-dark) !important;
    font-weight: 800;
}

.sidebar, .onehr-sidebar {
    background:
        linear-gradient(180deg, rgba(10, 20, 51, .96), rgba(23, 40, 90, .97)),
        url('../img/invictus-campus-bg.jpg') left center / cover no-repeat !important;
    box-shadow: 16px 0 38px rgba(16, 24, 40, .22);
}

.logo-section, .sidebar-brand {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: var(--radius);
    padding: 16px !important;
}

.logo-section img, .sidebar-brand img {
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .24));
}

.logo-section h2, .sidebar-brand h2 {
    color: var(--gold) !important;
    font-weight: 800;
}

.sidebar-menu a, .sidebar-nav a {
    border: 1px solid transparent;
    color: rgba(255, 255, 255, .90) !important;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.sidebar-menu a:hover, .sidebar-nav a:hover {
    background: rgba(255, 255, 255, .13) !important;
    border-color: rgba(255, 255, 255, .18);
    transform: translateX(3px);
}

/* Smooth sidebar menu motion */
.sidebar .nav a,
.sidebar .sidebar-menu a,
.sidebar .sidebar-nav a,
.onehr-sidebar a {
    transform-origin: left center;
    transition: transform .22s ease, font-size .22s ease, letter-spacing .22s ease, box-shadow .22s ease !important;
    will-change: transform;
}

.sidebar .nav a:hover,
.sidebar .sidebar-menu a:hover,
.sidebar .sidebar-nav a:hover,
.onehr-sidebar a:hover {
    transform: translateX(7px) scale(1.06);
    font-size: 18px !important;
    letter-spacing: .25px;
}

.sidebar .nav a:active,
.sidebar .sidebar-menu a:active,
.sidebar .sidebar-nav a:active,
.onehr-sidebar a:active {
    transform: translateX(3px) scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
    .sidebar .nav a,
    .sidebar .sidebar-menu a,
    .sidebar .sidebar-nav a,
    .onehr-sidebar a {
        transition: none !important;
    }
}

.logout, .sidebar-footer a, button, .btn, .btn-primary {
    background: linear-gradient(135deg, var(--gold), #ffe08a) !important;
    color: #111827 !important;
    border: 0 !important;
    box-shadow: 0 12px 24px rgba(247, 189, 24, .24);
    transition: transform .18s ease, box-shadow .18s ease;
}

.logout:hover, .sidebar-footer a:hover, button:hover, .btn:hover, .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(247, 189, 24, .30);
}

.card, .panel, table {
    background: var(--surface) !important;
    border: 1px solid rgba(255, 255, 255, .76) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
    backdrop-filter: blur(16px);
}

.card {
    border-top: 4px solid var(--gold) !important;
}

.card .num {
    color: var(--navy) !important;
}

input, select, textarea {
    border: 1px solid rgba(15, 23, 42, .16) !important;
    border-radius: var(--radius) !important;
    background: rgba(255, 255, 255, .94) !important;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

input:focus, select:focus, textarea:focus {
    border-color: rgba(247, 189, 24, .96) !important;
    box-shadow: 0 0 0 4px rgba(247, 189, 24, .18);
}

th {
    background: linear-gradient(135deg, var(--navy-dark), var(--navy)) !important;
}

td, th {
    border-color: rgba(15, 23, 42, .08) !important;
}

.badge {
    background: rgba(247, 189, 24, .20) !important;
    color: #7a4f00 !important;
    border: 1px solid rgba(247, 189, 24, .46);
}

.success {
    background: rgba(18, 165, 107, .14) !important;
    color: #05603a !important;
    border: 1px solid rgba(18, 165, 107, .24);
}

.error {
    background: rgba(217, 45, 32, .12) !important;
    color: #912018 !important;
    border: 1px solid rgba(217, 45, 32, .22);
}

.quick a, .workflow p, .activity-item {
    background: rgba(255, 255, 255, .62) !important;
    border-color: rgba(247, 189, 24, .86) !important;
}

@media (max-width: 900px) {
    body {
        background-attachment: scroll !important;
    }

    .content, .onehr-content {
        padding: 20px !important;
    }
}

.login-card {
    position: relative;
    overflow: hidden;
    width: min(440px, calc(100vw - 32px)) !important;
    background: rgba(255, 255, 255, .90) !important;
    border: 1px solid rgba(255, 255, 255, .72) !important;
    border-top: 0 !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 28px 70px rgba(6, 15, 38, .32) !important;
    backdrop-filter: blur(18px);
}

.login-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: linear-gradient(90deg, var(--gold), #fff0a8, var(--navy));
}

.logo img {
    width: 132px !important;
    filter: drop-shadow(0 14px 22px rgba(23, 40, 90, .20));
}

.logo h1 {
    color: var(--navy-dark) !important;
    font-size: 26px !important;
    font-weight: 800;
}

.logo p, .footer {
    color: var(--muted) !important;
}

form label {
    color: #344054 !important;
    font-weight: 700;
}

/* Colorful form system */
body {
    background-color: #eef2f7 !important;
}
form:not(.delete-form) {
    position: relative;
}
.card form, .panel form, .form-card, .application-shell {
    border-radius: 8px;
}
.card, .panel, .login-card, .form-card {
    overflow: hidden;
}
.card::before, .panel::before, .form-card::before {
    content: '';
    display: block;
    height: 4px;
    margin: -25px -25px 20px;
    background: linear-gradient(90deg, #60a5fa, #22c55e, #f59e0b, #a855f7, #ef4444);
}
input, select, textarea {
    min-height: 42px;
    color: #06112f !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.70);
}
select {
    appearance: auto;
}
label {
    color: #475569 !important;
}
button, .btn, .resume-btn, .download-btn {
    border-radius: 8px !important;
}
table {
    overflow: hidden;
}
th {
    color: #64748b !important;
    background: #f8fafc !important;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .04em;
}
td {
    background: rgba(255,255,255,.88);
}
tr:hover td {
    background: #f8fbff;
}
.badge, .status-pill {
    border-radius: 999px !important;
    font-weight: 800 !important;
}
.status-applied, .status-application-submitted, .status-application-received {
    background:#eaf2ff!important;color:#1d4ed8!important;border-color:#bfdbfe!important;
}
.status-screening, .status-under-review, .status-documents-requested, .status-documents-verified, .status-reference-check, .status-background-verification {
    background:#fff8cc!important;color:#92400e!important;border-color:#fde68a!important;
}
.status-shortlisted {
    background:#dcfce7!important;color:#047857!important;border-color:#bbf7d0!important;
}
.status-interview, .status-interview-scheduled, .status-first-interview-completed, .status-second-interview-completed, .status-final-interview, .status-assessment-scheduled, .status-assessment-completed {
    background:#ffedd5!important;color:#c2410c!important;border-color:#fed7aa!important;
}
.status-offer, .status-offer-pending-approval, .status-offer-sent, .status-offer-accepted {
    background:#ede9fe!important;color:#6d28d9!important;border-color:#ddd6fe!important;
}
.status-hired, .status-ready-for-onboarding {
    background:#d1fae5!important;color:#047857!important;border-color:#a7f3d0!important;
}
.status-rejected, .status-withdrawn, .status-offer-declined {
    background:#fee2e2!important;color:#b91c1c!important;border-color:#fecaca!important;
}
.status-medical-check, .status-pre-employment-documents, .status-talent-pool, .status-candidate-enquiry {
    background:#e0f2fe!important;color:#0369a1!important;border-color:#bae6fd!important;
}
.form-color-band {
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:0;
    overflow:hidden;
    border-radius:8px;
    margin:20px 0;
    box-shadow:0 14px 26px rgba(15,23,42,.08);
}
.form-color-band > div {
    min-height:70px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    font-weight:900;
    position:relative;
}
.form-color-band strong {font-size:24px;line-height:1;color:#06112f;}
.form-color-band span {font-size:13px;margin-top:8px;color:#06112f;}
.form-color-band > div:nth-child(1){background:#dbeafe;}
.form-color-band > div:nth-child(2){background:#fef9c3;}
.form-color-band > div:nth-child(3){background:#dcfce7;}
.form-color-band > div:nth-child(4){background:#ffedd5;}
.form-color-band > div:nth-child(5){background:#ede9fe;}
.form-color-band > div:nth-child(6){background:#d1fae5;}

/* Global warm cream theme */
:root {
    --page: #eee4d5;
    --surface: rgba(255, 249, 239, .94);
    --surface-solid: #fff9ef;
    --line: rgba(116, 87, 52, .16);
}

html,
body {
    background: radial-gradient(circle at 18% 12%, rgba(255,250,241,.95) 0, rgba(255,250,241,0) 34%),
                radial-gradient(circle at 88% 8%, rgba(216,195,162,.34) 0, rgba(216,195,162,0) 30%),
                linear-gradient(135deg, #eee4d5 0%, #f7efe3 52%, #efe5d6 100%) !important;
    background-attachment: fixed !important;
}

body::before {
    background: linear-gradient(180deg, rgba(255,250,241,.10), rgba(238,228,213,.34)) !important;
}

.main,
.onehr-main {
    background: rgba(238,228,213,.70) !important;
    backdrop-filter: none !important;
}

.content,
.onehr-content {
    background: transparent !important;
}

.topbar,
.onehr-topbar {
    background: rgba(247,239,227,.95) !important;
    border-bottom-color: #dfcdb0 !important;
}

.card,
.panel,
.stat-card,
.hero,
.top,
.result,
.review-set,
.kpi-card,
.metric,
.readonly-box,
.summary-box {
    background: #fff9ef !important;
    border-color: #e3d3ba !important;
}

table,
thead,
tbody,
tr,
td {
    border-color: #e3d3ba !important;
}

tbody tr:nth-child(even) {
    background: #f8eedd !important;
}

input,
select,
textarea {
    background-color: #fffdf8 !important;
    border-color: #dcc7a7 !important;
}
@media(max-width:900px){.form-color-band{grid-template-columns:repeat(2,1fr)}}