/* ==========================================================================
   REAP-2026 Theme Overlay  —  Professional Blue & White
   --------------------------------------------------------------------------
   Loaded AFTER bootstrap.min.css and Site.css. This file ONLY restyles
   existing markup. It does not assume any new HTML, IDs, or classes, so
   jQuery/AJAX selectors continue to work unchanged.
   Fonts: Poppins (headings) + Mukta (body, with Devanagari support)
   Palette: corporate blue (#0B3D91 / #1E5AA8 / #1976D2) on white surfaces
   Author: REAP-2026 design refresh
   ========================================================================== */

/* ---------- 1. Color & token variables ---------- */
:root {
    /* Corporate blue + white palette */
    --reap-primary: #3647C9; /* deep institutional blue */
    --reap-primary-dark: #082C6E; /* hover/active state */
    --reap-primary-light: #1E5AA8; /* mid blue */
    --reap-accent: #1976D2; /* highlight blue (links, focus) */
    --reap-accent-soft: #E3F0FB; /* very light blue tint */
    --reap-success: #1B7F3A; /* keep green for success states */
    --reap-success-soft: #E2F4E8;
    --reap-danger: #C0392B;
    --reap-danger-soft: #FBE5E2;
    --reap-warning: #B6791C; /* amber for warning */
    --reap-warning-soft: #FFF3DD;
    --reap-ink: #1F2937; /* body text */
    --reap-muted: #6B7280; /* secondary text */
    --reap-line: #E2E8F0; /* hairline borders */
    --reap-surface: #FFFFFF;
    --reap-surface-alt: #F5F8FC; /* page background tint */
    --reap-surface-tint: #F0F5FB; /* subtle blue wash */
    --reap-shadow-sm: 0 1px 2px rgba(11, 61, 145, .06);
    --reap-shadow: 0 6px 20px rgba(11, 61, 145, .08);
    --reap-radius: 10px;
    --reap-radius-sm: 6px;
    --reap-radius-lg: 14px;
    --reap-font-head: "Poppins", "Mukta", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --reap-font-body: "Mukta", "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- 2. Typography ---------- */
body,
.body,
.body-content,
table, td, th, p, span, li, a, label, input, select, textarea, button {
    font-family: var(--reap-font-body);
    color: var(--reap-ink);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand, .btn {
    font-family: var(--reap-font-head);
    letter-spacing: .005em;
}

h1, .h1 { font-weight: 700; }
h2, .h2 { font-weight: 700; }
h3, .h3 { font-weight: 600; }
h4, .h4 { font-weight: 600; }
h5, .h5 { font-weight: 600; }
h6, .h6 { font-weight: 600; }

body {
    background: var(--reap-surface-alt);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Devanagari rendering when mixed with Latin */
[lang="hi"], .hindi, .devnagari {
    font-family: "Mukta", "Noto Sans Devanagari", sans-serif;
}

/* ---------- 3. Page surface / containers ---------- */
.container,
.container-fluid {
    background: transparent;
}

.body-content,
.main-content,
.content-wrap {
    background: var(--reap-surface);
    border-radius: var(--reap-radius);
    box-shadow: var(--reap-shadow-sm);
    padding: 24px;
    margin-bottom: 24px;
}

/* ---------- 4. Top accent strip (clean blue) ---------- */
body::before {
    content: "";
    display: block;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg,
        var(--reap-primary) 0%,
        var(--reap-primary-light) 50%,
        var(--reap-accent) 100%);
    position: sticky;
    top: 0;
    z-index: 1080;
}

/* ---------- 5. Navbar ---------- */
.navbar {
    background: var(--reap-surface) !important;
    border: 0;
    border-bottom: 1px solid var(--reap-line);
    box-shadow: var(--reap-shadow-sm);
    border-radius: 0;
    padding: 10px 16px;
}

.navbar-default,
.navbar-inverse,
.navbar-light,
.navbar-dark {
    background: var(--reap-surface) !important;
}

.navbar .navbar-brand,
.navbar-default .navbar-brand,
.navbar-inverse .navbar-brand {
    color: var(--reap-primary) !important;
    font-weight: 700;
    font-size: 1.15rem;
    padding-left: 4px;
}

.navbar .nav > li > a,
.navbar-default .navbar-nav > li > a,
.navbar-inverse .navbar-nav > li > a,
.navbar-nav .nav-link {
    color: var(--reap-ink) !important;
    font-weight: 500;
    transition: color .15s ease, background .15s ease;
}

.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-nav .nav-link:hover {
    color: var(--reap-primary) !important;
    background: var(--reap-accent-soft) !important;
    border-radius: var(--reap-radius-sm);
}

.navbar .nav > .active > a,
.navbar-default .navbar-nav > .active > a,
.navbar-nav .nav-link.active {
    color: var(--reap-primary-dark) !important;
    background: var(--reap-accent-soft) !important;
    border-radius: var(--reap-radius-sm);
}

/* ---------- 6. Buttons ---------- */
.btn {
    border-radius: var(--reap-radius-sm);
    font-weight: 500;
    padding: 8px 18px;
    transition: transform .05s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
    border-width: 1px;
}

.btn:hover { transform: translateY(-1px); box-shadow: var(--reap-shadow-sm); }
.btn:active { transform: translateY(0); }

.btn-primary,
.btn.btn-primary {
    background-color: var(--reap-primary);
    border-color: var(--reap-primary-dark);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background-color: var(--reap-primary-dark);
    border-color: var(--reap-primary-dark);
    color: #fff;
}

.btn-success,
.btn.btn-success {
    background-color: var(--reap-success);
    border-color: #145E2C;
    color: #fff;
}
.btn-success:hover,
.btn.btn-success:hover {
    background-color: #145E2C;
    border-color: #145E2C;
}

.btn-warning,
.btn.btn-warning {
    background-color: var(--reap-warning);
    border-color: #8C5A12;
    color: #fff;
}
.btn-warning:hover,
.btn.btn-warning:hover {
    background-color: #8C5A12;
    border-color: #8C5A12;
    color: #fff;
}

.btn-danger,
.btn.btn-danger {
    background-color: var(--reap-danger);
    border-color: #962D22;
    color: #fff;
}

.btn-info,
.btn.btn-info {
    background-color: var(--reap-accent);
    border-color: var(--reap-primary);
    color: #fff;
}

.btn-default,
.btn.btn-default,
.btn-secondary,
.btn.btn-secondary {
    background: var(--reap-surface);
    color: var(--reap-ink);
    border-color: var(--reap-line);
}
.btn-default:hover,
.btn-secondary:hover {
    background: var(--reap-accent-soft);
    border-color: var(--reap-accent);
    color: var(--reap-primary);
}

/* ---------- 7. Forms ---------- */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="search"],
input[type="url"],
select,
textarea {
    border: 1px solid var(--reap-line);
    border-radius: var(--reap-radius-sm);
    background: var(--reap-surface);
    color: var(--reap-ink);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    font-family: var(--reap-font-body);
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
    border-color: var(--reap-accent);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, .18);
    outline: none;
}

label,
.control-label,
.form-label {
    color: var(--reap-ink);
    font-weight: 500;
    margin-bottom: 6px;
}

/* ---------- 8. Tables ---------- */
.table {
    background: var(--reap-surface);
    border-radius: var(--reap-radius);
    overflow: hidden;
}

.table > thead > tr > th,
.table > thead > tr > td,
.table thead th {
    background: var(--reap-primary);
    color: #fff !important;
    font-weight: 600;
    border-bottom: 0;
    vertical-align: middle;
    font-family: var(--reap-font-head);
}

.table > tbody > tr > th,
.table > tbody > tr > td {
    border-color: var(--reap-line);
    vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
    background: var(--reap-surface-tint);
}

.table-bordered { border-color: var(--reap-line); }
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th { border-color: var(--reap-line); }

.table-hover > tbody > tr:hover > td {
    background: var(--reap-accent-soft);
}

/* ---------- 9. Cards / panels ---------- */
.panel,
.card {
    border: 1px solid var(--reap-line);
    border-radius: var(--reap-radius);
    box-shadow: var(--reap-shadow-sm);
    background: var(--reap-surface);
}

.panel-heading,
.card-header {
    background: var(--reap-surface-tint);
    border-bottom: 1px solid var(--reap-line);
    color: var(--reap-primary);
    font-family: var(--reap-font-head);
    font-weight: 600;
    border-top-left-radius: var(--reap-radius);
    border-top-right-radius: var(--reap-radius);
}

.panel-default { border-color: var(--reap-line); }
.panel-primary > .panel-heading,
.bg-primary, .card.bg-primary {
    background: var(--reap-primary) !important;
    color: #fff !important;
    border-color: var(--reap-primary-dark) !important;
}
.panel-primary { border-color: var(--reap-primary-dark); }

.panel-success > .panel-heading {
    background: var(--reap-success-soft);
    color: var(--reap-success);
    border-color: var(--reap-success-soft);
}
.panel-warning > .panel-heading {
    background: var(--reap-warning-soft);
    color: var(--reap-warning);
    border-color: var(--reap-warning-soft);
}

/* ---------- 10. Alerts ---------- */
.alert {
    border-radius: var(--reap-radius-sm);
    border: 1px solid transparent;
    padding: 12px 16px;
}
.alert-success {
    background: var(--reap-success-soft);
    color: var(--reap-success);
    border-color: #B5DBC2;
}
.alert-warning {
    background: var(--reap-warning-soft);
    color: var(--reap-warning);
    border-color: #F2DDA8;
}
.alert-info {
    background: var(--reap-accent-soft);
    color: var(--reap-primary);
    border-color: #B7D3EE;
}
.alert-danger {
    background: var(--reap-danger-soft);
    color: #962D22;
    border-color: #F2C0BA;
}

/* ---------- 11. Badges / labels ---------- */
.badge,
.label {
    border-radius: 999px;
    padding: 3px 10px;
    font-weight: 600;
    font-family: var(--reap-font-body);
    font-size: 80%;
}
.label-success, .badge-success, .bg-success {
    background-color: var(--reap-success) !important;
    color: #fff !important;
}
.label-warning, .badge-warning, .bg-warning {
    background-color: var(--reap-warning) !important;
    color: #fff !important;
}
.label-info, .badge-info, .bg-info {
    background-color: var(--reap-accent) !important;
    color: #fff !important;
}
.label-primary, .badge-primary {
    background-color: var(--reap-primary) !important;
    color: #fff !important;
}

/* ---------- 12. Links ---------- */
a {
    color: var(--reap-accent);
    text-decoration: none;
    transition: color .15s ease;
}
a:hover, a:focus {
    color: var(--reap-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Helper utilities (additive only — no collisions with bootstrap) */
.text-blue       { color: var(--reap-primary) !important; }
.text-accent     { color: var(--reap-accent) !important; }
.text-navy       { color: var(--reap-primary-dark) !important; }
.bg-blue-soft    { background: var(--reap-accent-soft) !important; }

/* Soften the existing "text-danger" red used heavily in the project */
.text-danger { color: #962D22 !important; }

/* ---------- 13. Hero / jumbotron ---------- */
.jumbotron {
    background: linear-gradient(135deg, #FFFFFF 0%, var(--reap-accent-soft) 100%);
    border-radius: var(--reap-radius-lg);
    border: 1px solid var(--reap-accent-soft);
    padding: 32px;
}
.jumbotron h1, .jumbotron .h1 {
    color: var(--reap-primary);
    font-weight: 700;
}

/* ---------- 14. Footer ---------- */
footer,
.footer {
    background: var(--reap-primary-dark);
    color: #DDE6F2;
    padding: 22px 0;
    margin-top: 28px;
}
footer a, .footer a { color: #B7D3EE; }
footer a:hover, .footer a:hover { color: #fff; }

/* ---------- 15. Misc UI polish ---------- */
hr {
    border: 0;
    border-top: 1px solid var(--reap-line);
    margin: 18px 0;
}

::placeholder { color: #A2A8B3; opacity: 1; }

/* Bootstrap 3 nav-tabs polish */
.nav-tabs > li > a {
    border-radius: var(--reap-radius-sm) var(--reap-radius-sm) 0 0;
    color: var(--reap-ink);
    font-weight: 500;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--reap-primary);
    border-color: var(--reap-line) var(--reap-line) transparent;
    background: var(--reap-surface);
}

/* Pagination */
.pagination > li > a,
.pagination > li > span {
    color: var(--reap-accent);
    border-color: var(--reap-line);
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover {
    background: var(--reap-primary);
    border-color: var(--reap-primary-dark);
    color: #fff;
}

/* Print friendliness — keep tables clean when faculty print receipts */
@media print {
    body { background: #fff; }
    body::before { display: none; }
    .navbar, .footer, footer { display: none !important; }
    .table thead th { background: #fff !important; color: #000 !important; }
}

/* Don't touch the AJAX loader animation classes — payment/loader overlays
   rely on their original inline styles. */
.loader,
.strip-holder,
[class*="loader"] { all: revert; }