/* ================================================================
   UoH I-SURE Internship&Training Portal — Custom Styles
   Theme on top of Bootstrap 5
   ================================================================ */

/* ── CSS Variables (Design Tokens) ──────────────────────────── */
:root {
    --clr-primary:   #A30000;
    --clr-secondary: #F5A800;
    --clr-darkblue:  #003087;
    --clr-admin:     #1a1a1a;
    --clr-success:   #198754;
    --clr-bg:        #f4f6f9;
    --shadow-card:   0 4px 24px rgba(0,0,0,0.07);
    --radius:        0.75rem;
}

/* ── Global ─────────────────────────────────────────────────── */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--clr-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main { flex: 1; }

a { text-decoration: none; }
a:hover { text-decoration: none; }

/* ── Navbar ─────────────────────────────────────────────────── */
.navbar-brand img { height: 42px; }
.navbar-light .navbar-nav .nav-link {
    color: #333;
    font-weight: 600;
    transition: color .2s;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--clr-primary);
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary {
    background-color: var(--clr-primary);
    border-color: var(--clr-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: #8a0000;
    border-color: #8a0000;
}
.btn-secondary {
    background-color: var(--clr-secondary);
    border-color: var(--clr-secondary);
    color: #000;
}
.btn-secondary:hover {
    background-color: #d99200;
    border-color: #d99200;
    color: #000;
}
.btn-darkblue {
    background-color: var(--clr-darkblue);
    border-color: var(--clr-darkblue);
    color: #fff;
}
.btn-darkblue:hover {
    background-color: #00205b;
    border-color: #00205b;
    color: #fff;
}
.btn-admin {
    background-color: var(--clr-admin);
    border-color: var(--clr-admin);
    color: #fff;
}
.btn-admin:hover {
    background-color: #333;
    border-color: #333;
    color: #fff;
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.card-accent-primary   { border-top: 4px solid var(--clr-primary); }
.card-accent-secondary { border-top: 4px solid var(--clr-secondary); }
.card-accent-darkblue  { border-top: 4px solid var(--clr-darkblue); }
.card-accent-success   { border-top: 4px solid var(--clr-success); }
.card-accent-admin     { border-top: 4px solid var(--clr-admin); }

/* ── Hero Section ───────────────────────────────────────────── */
.hero-section {
    background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-darkblue) 100%);
    color: #fff;
    padding: 3.5rem 0;
    position: relative;
}
.hero-section .hero-glass {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius);
    padding: 1.5rem;
    backdrop-filter: blur(4px);
}

/* ── Feature Cards (Landing) ────────────────────────────────── */
.feature-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}
.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

/* ── Stat Cards (Admin) ─────────────────────────────────────── */
.stat-card {
    border-left: 4px solid var(--clr-primary);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-card);
    padding: 1.25rem 1.5rem;
    transition: transform .2s;
}
.stat-card:hover { transform: translateY(-3px); }
.stat-card .stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #6c757d;
}
.stat-card .stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: #212529;
}

/* ── Badge Variants ─────────────────────────────────────────── */
.badge-status-submitted    { background-color: #cfe2ff; color: #084298; }
.badge-status-under_review { background-color: #fff3cd; color: #664d03; }
.badge-status-selected     { background-color: #d1e7dd; color: #0f5132; }
.badge-status-rejected     { background-color: #f8d7da; color: #842029; }

/* ── Login Dual Columns ─────────────────────────────────────── */
.login-card-user  { border-top: 4px solid var(--clr-primary); }
.login-card-admin { border-top: 4px solid var(--clr-admin); }

/* ── Review Section Highlight ───────────────────────────────── */
.review-highlight {
    border: 2px solid var(--clr-secondary);
    border-radius: var(--radius);
    background: #fffbeb;
    animation: pulse-border 2s infinite;
}
@keyframes pulse-border {
    0%, 100% { border-color: var(--clr-secondary); }
    50%      { border-color: var(--clr-primary); }
}

/* ── Footer ─────────────────────────────────────────────────── */
footer.site-footer {
    background: #1a1a2e;
    color: #adb5bd;
    padding: 0.75rem 0;
}
footer.site-footer a {
    color: #dee2e6;
    transition: color .2s;
}
footer.site-footer a:hover { color: var(--clr-secondary); }

/* ── Admin Sidebar / Header ─────────────────────────────────── */
.admin-header {
    background-color: var(--clr-admin);
}

/* ── Steps Indicator (Registration) ─────────────────────────── */
.step-indicator {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2rem;
    counter-reset: step;
}
.step-indicator .step-item {
    position: relative;
    width: 36px;
    flex-shrink: 0;
}
.step-indicator .step-label {
    position: absolute;
    top: 42px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    font-weight: 600;
    color: #adb5bd;
    white-space: nowrap;
}
.step-indicator .step-line {
    flex: 1 1 auto;
    height: 3px;
    background: #dee2e6;
    border-radius: 2px;
    margin-top: 17px;
    min-width: 10px;
}
.step-indicator .step-line.completed {
    background: var(--clr-success);
}
.step-indicator .step-item::before {
    counter-increment: step;
    content: counter(step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 auto 0.5rem;
    border-radius: 50%;
    background: #e9ecef;
    color: #6c757d;
    font-weight: 700;
    transition: all .3s;
}
.step-indicator .step-item.active::before {
    background: var(--clr-primary);
    color: #fff;
}
.step-indicator .step-item.completed::before {
    background: var(--clr-success);
    color: #fff;
}
.step-indicator .step-item.active .step-label,
.step-indicator .step-item.completed .step-label {
    color: #212529;
}

/* ── Utility ────────────────────────────────────────────────── */
.text-primary-custom { color: var(--clr-primary) !important; }
.bg-primary-custom   { background-color: var(--clr-primary) !important; }
.text-secondary-custom { color: var(--clr-secondary) !important; }
.border-primary-custom { border-color: var(--clr-primary) !important; }

.min-vh-70 { min-height: 70vh; }
.font-mono { font-family: 'Courier New', monospace; }

/* ── Responsive Tweaks ──────────────────────────────────────── */
@media (max-width: 768px) {
    .hero-section { padding: 2rem 0; }
    .hero-section h1 { font-size: 1.8rem; }
    .step-indicator .step-item { width: 28px; }
    .step-indicator .step-label { font-size: 0.65rem; top: 34px; }
    .step-indicator .step-item::before { width: 28px; height: 28px; font-size: 0.75rem; }
    .step-indicator .step-line { margin-top: 13px; }
}