/* ------------------------------------------------------------------
   CCIS 2026 — Academic theme
   Light grey / white background, dark navy & charcoal headings,
   simple cards. Mobile-first. Pairs with Bootstrap 5 utilities.
   ------------------------------------------------------------------ */

:root {
    --ccis-navy:    #1f2d3d;   /* dark blue-grey headings */
    --ccis-navy-2:  #2c3e50;
    --ccis-accent:  #34607d;   /* muted institutional blue */
    --ccis-accent-d:#284c63;
    --ccis-bg:      #f4f5f7;   /* light grey page background */
    --ccis-card:    #ffffff;
    --ccis-border:  #e3e6ea;
    --ccis-muted:   #6b7480;
    --ccis-text:    #2a2f36;
}

body {
    background-color: var(--ccis-bg);
    color: var(--ccis-text);
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
    color: var(--ccis-navy);
    font-weight: 600;
    letter-spacing: .2px;
}

/* ---- Top navigation ---- */
.navbar.ccis-nav {
    background-color: var(--ccis-card);
    border-bottom: 1px solid var(--ccis-border);
}
.navbar.ccis-nav .navbar-brand {
    color: var(--ccis-navy);
    font-weight: 700;
    font-size: 1.05rem;
}
.navbar.ccis-nav .nav-link { color: var(--ccis-navy-2); }
.navbar.ccis-nav .nav-link:hover { color: var(--ccis-accent); }

/* ---- Hero ---- */
.ccis-hero {
    background: linear-gradient(180deg, #ffffff 0%, var(--ccis-bg) 100%);
    border-bottom: 1px solid var(--ccis-border);
    padding: 3rem 0 2.5rem;
}
.ccis-hero .eyebrow {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: .8rem;
    color: var(--ccis-muted);
    margin-bottom: .5rem;
}
.ccis-hero h1 {
    font-size: clamp(1.5rem, 4vw, 2.4rem);
    line-height: 1.2;
}
.ccis-hero .dates {
    color: var(--ccis-accent);
    font-weight: 600;
}

/* ---- Cards ---- */
.ccis-card {
    background: var(--ccis-card);
    border: 1px solid var(--ccis-border);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(31, 45, 61, .04);
}
.ccis-card .card-label {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: .72rem;
    color: var(--ccis-muted);
    margin-bottom: .35rem;
}

/* ---- Buttons ---- */
.btn-ccis {
    background-color: var(--ccis-accent);
    border-color: var(--ccis-accent);
    color: #fff;
    font-weight: 600;
    padding: .6rem 1.4rem;
}
.btn-ccis:hover,
.btn-ccis:focus {
    background-color: var(--ccis-accent-d);
    border-color: var(--ccis-accent-d);
    color: #fff;
}
.btn-outline-ccis {
    border-color: var(--ccis-accent);
    color: var(--ccis-accent);
    font-weight: 600;
}
.btn-outline-ccis:hover {
    background-color: var(--ccis-accent);
    color: #fff;
}

/* ---- Forms ---- */
.form-label { font-weight: 600; color: var(--ccis-navy-2); }
.form-control:focus,
.form-select:focus {
    border-color: var(--ccis-accent);
    box-shadow: 0 0 0 .15rem rgba(52, 96, 125, .15);
}
.required-mark { color: #b23b3b; }

/* ---- Status badges ---- */
.badge-pending  { background-color: #b7791f; }
.badge-approved { background-color: #2f855a; }
.badge-rejected { background-color: #b23b3b; }

/* ---- Stat tiles (admin dashboard) ---- */
.stat-tile {
    background: var(--ccis-card);
    border: 1px solid var(--ccis-border);
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
}
.stat-tile .stat-number {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--ccis-navy);
    line-height: 1;
}
.stat-tile .stat-label {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--ccis-muted);
}

/* ---- Footer ---- */
.ccis-footer {
    border-top: 1px solid var(--ccis-border);
    color: var(--ccis-muted);
    font-size: .875rem;
    padding: 1.5rem 0;
    margin-top: 3rem;
}

/* ---- Small helpers ---- */
.text-muted-ccis { color: var(--ccis-muted); }
.theme-quote {
    border-left: 3px solid var(--ccis-accent);
    padding-left: 1rem;
    color: var(--ccis-navy-2);
    font-style: italic;
}