/**
 * CSIR-SCDD Application Portal — UI Theme
 * Science Communication and Dissemination Directorate
 */

@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap");

:root {
    --navy: #0a1f3d;
    --navy-deep: #071829;
    --blue: #1e4a7a;
    --gold: #a67c2d;
    --gold-light: #c9a227;
    --paper: #eef3f8;
    --paper-soft: #f7fafc;
    --ink: #1c2430;
    --muted: #5a6b7d;
    --success: #1b7a4a;
    --danger: #b42318;
    --warning: #b45309;
    --info: #1d6a9a;
    --radius: 10px;
    --shadow: 0 10px 30px rgba(10, 31, 61, 0.1);
    --shadow-sm: 0 2px 10px rgba(10, 31, 61, 0.06);
    --font: "Source Sans 3", "Segoe UI", sans-serif;
    --font-display: "Source Serif 4", Georgia, serif;

    /* Bootstrap overrides — all pages */
    --bs-primary: #0a1f3d;
    --bs-primary-rgb: 10, 31, 61;
    --bs-secondary: #5a6b7d;
    --bs-success: #1b7a4a;
    --bs-danger: #b42318;
    --bs-warning: #b45309;
    --bs-info: #1d6a9a;
    --bs-body-font-family: var(--font);
    --bs-body-color: var(--ink);
    --bs-link-color: #1e4a7a;
    --bs-link-hover-color: #0a1f3d;
    --bs-border-radius: 8px;

    --primary-color: var(--navy);
    --success-color: var(--success);
    --danger-color: var(--danger);
    --warning-color: var(--warning);
    --info-color: var(--info);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--font);
    background:
        radial-gradient(ellipse 90% 45% at 50% -8%, rgba(30, 74, 122, 0.1), transparent 55%),
        radial-gradient(ellipse 50% 35% at 100% 0%, rgba(166, 124, 45, 0.07), transparent 50%),
        var(--paper);
    color: var(--ink);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.55;
}

main, .container, .container-fluid { position: relative; }

/* ========== Header ========== */
.portal-header {
    background: linear-gradient(180deg, #fff 0%, var(--paper-soft) 100%);
    padding: 14px 0;
    border-bottom: 3px solid var(--gold);
    box-shadow: var(--shadow-sm);
    position: relative;
}
.portal-header::after {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg, #ff9933 0%, #fff 45%, #fff 55%, #138808 100%);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    min-height: 96px;
    gap: 12px;
}

.header-left,
.header-right {
    width: 100px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-left { justify-content: flex-start; }
.header-right { justify-content: flex-end; }

.header-logo-img {
    width: 84px;
    height: auto;
    max-height: 84px;
    object-fit: contain;
}
.header-right .header-logo-img {
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(10, 31, 61, 0.12);
}

.header-center {
    flex: 1;
    text-align: center;
    min-width: 0;
}

.header-title {
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 2.2vw, 1.35rem);
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 4px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-shadow: none;
}

.header-subtitle {
    font-size: clamp(0.78rem, 1.6vw, 0.95rem);
    color: var(--blue);
    font-weight: 600;
    margin: 0;
    line-height: 1.35;
}

.header-brand-tag {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
}

/* ========== Notice strip ========== */
.notice-marquee {
    background: linear-gradient(90deg, var(--navy-deep), var(--navy));
    color: #fff;
    padding: 10px 0;
    border-bottom: 2px solid var(--gold);
    box-shadow: none;
}
.notice-marquee marquee {
    font-size: 0.95rem;
    font-weight: 500;
}
.notice-marquee-link { color: #fff; text-decoration: underline; }
.notice-marquee-link:hover { color: var(--gold-light); }
.notice-marquee i { margin-right: 8px; color: var(--gold-light); }

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* ========== Footer ========== */
.portal-footer {
    background: var(--navy-deep);
    color: #c5d0dc;
    padding: 18px 0;
    margin-top: auto;
    font-size: 0.85rem;
    border-top: 3px solid var(--gold);
}
.portal-footer strong { color: #fff; }
.portal-footer .row { align-items: center; }

/* ========== Cards / forms (global) ========== */
.card {
    border: 1px solid #d5dee8;
    border-radius: var(--radius);
    margin-bottom: 20px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.card.shadow-lg { box-shadow: var(--shadow) !important; }

.card-header {
    border-radius: 0 !important;
    font-weight: 600;
    border-bottom: none;
}

.card-header.bg-primary,
.bg-primary {
    background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%) !important;
}

.btn-primary {
    --bs-btn-bg: var(--navy);
    --bs-btn-border-color: var(--navy);
    --bs-btn-hover-bg: var(--blue);
    --bs-btn-hover-border-color: var(--blue);
    --bs-btn-active-bg: var(--navy-deep);
    --bs-btn-active-border-color: var(--navy-deep);
}

.btn-success {
    --bs-btn-bg: var(--success);
    --bs-btn-border-color: var(--success);
    --bs-btn-hover-bg: #15633c;
    --bs-btn-hover-border-color: #15633c;
}

.btn {
    border-radius: 8px;
    font-weight: 600;
    padding: 10px 18px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(10, 31, 61, 0.15);
}
.btn-lg { padding: 12px 22px; border-radius: 8px; }

.form-label { font-weight: 600; margin-bottom: 6px; color: var(--navy); }
.form-control,
.form-select {
    border-radius: 8px;
    border-color: #c9d4e0;
    padding: 0.6rem 0.85rem;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 0.2rem rgba(30, 74, 122, 0.18);
}

.alert { border-radius: 8px; border: none; }
.is-invalid { border-color: var(--danger); }

.captcha-display {
    font-family: "Courier New", monospace;
    user-select: none;
    background: var(--paper) !important;
    border-color: #c9d4e0 !important;
}

.upload-area {
    border: 2px dashed #c9d4e0;
    border-radius: var(--radius);
    padding: 28px;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--paper-soft);
}
.upload-area:hover {
    border-color: var(--blue);
    background: #e8eef6;
}
.upload-area.dragover {
    border-color: var(--success);
    background: #e8f5ee;
}

.progress { border-radius: 999px; overflow: hidden; height: 10px; }
.progress-bar { background: linear-gradient(90deg, var(--navy), var(--gold)); }

/* Tabs */
.nav-tabs { border-bottom: 2px solid #d5dee8; }
.nav-tabs .nav-link {
    color: var(--muted);
    font-weight: 600;
    border: none;
    padding: 12px 18px;
    border-radius: 8px 8px 0 0;
}
.nav-tabs .nav-link:hover {
    color: var(--navy);
    background: rgba(10, 31, 61, 0.04);
}
.nav-tabs .nav-link.active {
    color: var(--navy);
    border-bottom: 3px solid var(--gold);
    background: transparent;
}

.table { font-size: 0.92rem; }
.table thead th {
    background: var(--navy) !important;
    color: #fff;
    border: none;
    font-weight: 600;
    text-align: center;
}
.table tbody td { vertical-align: middle; }

.sidebar-nav .list-group-item {
    border: none;
    border-left: 4px solid transparent;
    cursor: pointer;
    transition: 0.15s;
    font-size: 0.95rem;
    border-radius: 0 8px 8px 0;
    margin-bottom: 4px;
}
.sidebar-nav .list-group-item:hover {
    background: #eef3f8;
    border-left-color: var(--gold);
}
.sidebar-nav .list-group-item.active {
    background: var(--navy);
    color: #fff;
    border-left-color: var(--gold);
}
.sidebar-nav .list-group-item.active i.fa-circle-dot { color: #fff !important; }

.section {
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 20px;
}
.section-title {
    font-family: var(--font-display);
    color: var(--navy);
    font-weight: 700;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--gold);
}

/* Registration header — no purple */
.registration-card-header {
    background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 70%, #2a5f96 100%) !important;
    background-size: 100% 100% !important;
    animation: none !important;
    box-shadow: none;
}

/* ========== Auth shells ========== */
.auth-shell {
    padding: 36px 16px 48px;
}
.auth-shell .auth-card {
    border: none;
    box-shadow: var(--shadow);
}
.auth-shell .auth-card .card-header {
    padding: 1.15rem 1.25rem;
}
.auth-shell .auth-card .card-header h4 {
    font-family: var(--font-display);
    font-weight: 700;
    margin: 0;
    font-size: 1.25rem;
}
.auth-intro {
    text-align: center;
    max-width: 520px;
    margin: 0 auto 22px;
}
.auth-intro .auth-kicker {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 6px;
}
.auth-intro h2 {
    font-family: var(--font-display);
    font-size: 1.45rem;
    color: var(--navy);
    margin: 0 0 6px;
}
.auth-intro p {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
}

/* ========== Page-specific accents ========== */
body.page-login .auth-shell {
    background: transparent;
}
body.page-login .auth-card .card-header {
    background: linear-gradient(135deg, var(--navy), #153556) !important;
}

body.page-register .auth-intro .auth-kicker,
body.page-register .header-brand-tag { color: #8f6924; }
body.page-register .card {
    border-top: 3px solid var(--gold);
}

body.page-dashboard {
    background:
        radial-gradient(ellipse 70% 40% at 0% 0%, rgba(27, 122, 74, 0.08), transparent 50%),
        var(--paper);
}
body.page-dashboard .card-header.bg-primary {
    background: linear-gradient(135deg, #0d3b2a, #1b7a4a) !important;
}

body.page-form,
body.page-form-application {
    background:
        radial-gradient(ellipse 60% 40% at 100% 10%, rgba(30, 74, 122, 0.1), transparent 50%),
        var(--paper);
}

body.page-help,
body.page-forget-password {
    background:
        radial-gradient(ellipse 50% 40% at 20% 0%, rgba(166, 124, 45, 0.1), transparent 50%),
        var(--paper);
}
body.page-help .card-header.bg-primary,
body.page-forget-password .card-header.bg-primary {
    background: linear-gradient(135deg, #5c4818, var(--gold)) !important;
}

body.page-admin-login,
body.page-secure-panel,
body.page-system-config,
body.page-admin-manual {
    background: #e8edf3;
}
body.page-admin-login .card-header.bg-primary,
body.page-secure-panel .card-header.bg-primary {
    background: linear-gradient(135deg, #1a1a2e, #16213e) !important;
}

body.page-admit-card .card {
    border-left: 4px solid var(--gold);
}

body.page-geo-restricted {
    background: #f3f0ea;
}

body.page-sub-admin-login .card-header.bg-primary,
body.page-sub-admin-panel .card-header.bg-primary {
    background: linear-gradient(135deg, #243b55, #141e30) !important;
}

body.page-payment-approval .card-header.bg-primary,
body.page-payment-refunds .card-header.bg-primary,
body.page-correction-payment .card-header.bg-primary {
    background: linear-gradient(135deg, #0a3d2e, #1b7a4a) !important;
}

body.page-fee-age-settings .card-header.bg-primary,
body.page-post-management .card-header.bg-primary,
body.page-header-settings .card-header.bg-primary,
body.page-page-titles-notices .card-header.bg-primary,
body.page-geo-settings .card-header.bg-primary {
    background: linear-gradient(135deg, var(--navy), #2a5080) !important;
}

body.page-generate-invoice .card,
body.page-view-form .card {
    border-top: 3px solid var(--gold);
}

.candidate-form-page .form-sidebar-card .card-header {
    background: linear-gradient(135deg, var(--navy), var(--blue)) !important;
}

.application-form-header {
    background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%) !important;
}

/* Soft page banner under header on app pages */
.app-page-banner {
    max-width: 1200px;
    margin: 16px auto 0;
    padding: 0 16px;
}
.app-page-banner .inner {
    background: #fff;
    border: 1px solid #d5dee8;
    border-radius: var(--radius);
    padding: 12px 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-sm);
}
.app-page-banner .label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
}
.app-page-banner .title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--navy);
    font-size: 1.05rem;
}

/* Orientation warning (legacy) */
.orientation-warning { display: none !important; }

@media print {
    .no-print,
    .portal-footer,
    .notice-marquee { display: none !important; }
    .portal-header { box-shadow: none; }
}