/**
 * ZCAS University Research Management System — global stylesheet
 *
 * BRAND ALIGNMENT: this file didn't exist before — every page linked to
 * "CSS/style.css" but the file was missing, and each page separately
 * embedded its own <style> block. Some pages (index.php, login.php,
 * signup.php) even defined their own local `:root` with colors that don't
 * match ZCAS University's actual brand at all (#003366 navy / #8B0000
 * maroon / #D4AF37 gold — a generic "university template" palette), while
 * every other page referenced CSS variables (var(--primary-color) etc.)
 * that were never defined anywhere, so they rendered with no color at all.
 *
 * Source of truth: "ZCAS University Brand Management" + the treatment
 * deck supplied by the university's Business Development Office.
 *   - Logo: trademarked, fixed — never recolored/reshaped (not our concern
 *     here, just don't touch img/zcasu-logo*.png usages).
 *   - Palette: Navy #2E164E ("strength & professionalism"), ZCAS Gold
 *     #E4A024 ("affluence, value & ambition"), ZCAS Grey #777383
 *     ("integrity, new beginnings & impartiality"), White #FEFEFE
 *     ("timelessness").
 *   - The brand doc explicitly calls for GOLD or GREY as the *dominant*
 *     color in applications, specifically to differentiate ZCAS University
 *     from its parent ZCAS brand, which is dominantly blue. Navy is kept
 *     as an accent, not the dominant field color.
 *   - Typography: Roboto for corporate/digital applications (the treatment
 *     deck's "Corporate Typography — Style A"); the website is explicitly
 *     called out to follow the same theme as the treatment deck.
 */

:root {
    /* ---- Brand palette (do not edit without checking the brand guide) ---- */
    --zcas-navy:        #2E164E; /* official "BLUE" swatch — strength & professionalism */
    --zcas-navy-dark:   #1D0E33; /* darker tint of navy, for gradients/hover */
    --zcas-gold:        #E4A024; /* official "ZCAS GOLD" — affluence, value & ambition */
    --zcas-gold-dark:   #B87E17; /* darker tint of gold, for hover states */
    --zcas-gold-tint-90:#EAB13B;
    --zcas-gold-tint-70:#EFC470;
    --zcas-gold-tint-50:#F4D7A3;
    --zcas-gold-tint-30:#F9E9CE;
    --zcas-gold-tint-10:#FDF6EA;
    --zcas-grey:        #777383; /* official "ZCAS GREY" — integrity, new beginnings & impartiality */
    --zcas-grey-dark:   #5C5966;
    --zcas-grey-tint-70:#9C99A7;
    --zcas-grey-tint-50:#BBB9C3;
    --zcas-grey-tint-30:#DAD9DF;
    --zcas-grey-tint-10:#F2F1F4;
    --zcas-white:       #FEFEFE; /* official "WHITE" — timelessness */

    /* Back-compat aliases: several pages already reference these names
     * (previously pointed at the wrong, off-brand hex values). Kept so we
     * don't have to touch every var(--zcas-blue)-style usage individually. */
    --zcas-blue:        var(--zcas-navy);
    --zcas-dark-blue:   var(--zcas-navy-dark);

    /* ---- Semantic UI tokens used throughout the app ----
     * Gold is the dominant brand color per the brand guide, so it drives
     * primary buttons, headers, and highlighted UI. Navy is the accent
     * (headings, icon badges) rather than the dominant field color. Grey
     * is the secondary dominant option, used in gradients/alternate
     * surfaces so the app doesn't read as a single flat gold wash. */
    --primary-color:    var(--zcas-gold);
    --primary-light:    var(--zcas-gold-tint-10);
    --primary-dark:     var(--zcas-gold-dark);
    --secondary-color:  var(--zcas-grey);
    --accent-color:     var(--zcas-navy);

    --text-primary:     #262430; /* near-black with a hint of navy, for body copy */
    --text-secondary:   var(--zcas-grey-dark);
    --border-color:     var(--zcas-grey-tint-30);
    --background-muted: var(--zcas-grey-tint-10);

    /* Status colors stay conventional (red/green/amber) for accessibility —
     * these communicate error/success/warning universally and shouldn't be
     * replaced by brand hues, but are tuned to sit comfortably alongside
     * the palette above. */
    --danger-color:     #DC3545;
    --danger-dark:      #B02A37;
    --success-color:    #28A745;
    --warning-color:    #E4A024; /* intentionally == brand gold: warning already reads as "gold/amber" */
    --info-color:        #3B7DBF;
}

/* ---- Base typography ----
 * Roboto is the corporate typeface for digital/corporate-identity
 * applications per the treatment deck. Bookman Old Style is the brand's
 * choice for "all other media" (print-style documents) — used on the
 * printable approval letter, not the general UI. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');

/* Nearly every page previously opened its own <style> block with this
 * exact reset (`* { margin: 0; padding: 0; box-sizing: border-box; }`).
 * Centralized here so it's applied once, consistently — every page already
 * had this locally, so promoting it here changes nothing visually, it just
 * stops 47 files from repeating the same 3 lines. */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    color: var(--text-primary);
    background: var(--zcas-white);
    margin: 0;
    padding: 0;
}

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

/* ---- Common building blocks shared across pages ----
 * Most pages already define their own copies of these classes inline;
 * these act as a sane fallback/baseline so the brand tokens above take
 * effect even before a given page's own <style> block loads. */
.btn-primary {
    background: var(--primary-color);
    color: var(--zcas-navy);
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}
.btn-primary:hover {
    background: var(--primary-dark);
    color: var(--zcas-white);
    transform: translateY(-2px);
}

.alert {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-weight: 500;
}
.alert-success { background: #D4EDDA; color: #155724; border-left: 4px solid var(--success-color); }
.alert-error   { background: #F8D7DA; color: #721C24; border-left: 4px solid var(--danger-color); }
.alert-info    { background: var(--zcas-gold-tint-10); color: var(--zcas-navy); border-left: 4px solid var(--info-color); }

/* ---- Shared form fields ----
 * Nearly every page in this app (login, signup, the clearance/topic forms,
 * every review page) previously redefined its own near-identical copy of
 * .form-group / input / textarea / select — same padding, same border,
 * same focus ring, off by a pixel or two from page to page. Centralizing
 * it here means a single edit (e.g. "make inputs a bit taller") applies
 * everywhere at once, instead of hunting through 15+ files. */
.form-group {
    margin-bottom: 1.1rem;
}
.form-group label {
    display: block;
    margin-bottom: 0.45rem;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}
.form-group .required,
.required {
    color: var(--danger-color);
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
select,
textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--zcas-navy);
    box-shadow: 0 0 0 3px rgba(46, 22, 78, 0.12);
}
textarea {
    min-height: 90px;
    resize: vertical;
}

/* ---- Shared review-decision buttons ----
 * The three review pages (supervisor_review.php, ethics_review.php,
 * topic_review.php) each redefine their own copy of these same three
 * buttons. Kept as conventional green/red/amber regardless of brand
 * palette, same reasoning as the alert colors above. */
.btn {
    padding: 12px 22px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 10px;
    transition: all 0.2s ease;
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0,0,0,0.2);
}
.btn-approve { background: var(--success-color); color: white; }
.btn-reject  { background: var(--danger-color); color: white; }
.btn-revise  { background: var(--zcas-gold); color: var(--zcas-navy); }

/* ---- Shared "auth footer" links (login/signup cross-links) ---- */
.links {
    text-align: center;
    margin-top: 22px;
    font-size: 14px;
    color: #666;
}
.links a {
    color: var(--zcas-navy);
    font-weight: 700;
    text-decoration: none;
}
.links a:hover {
    color: var(--zcas-gold-dark);
}

.hint {
    font-size: 12.5px;
    color: #999;
    margin-top: 6px;
}

/* ---- Dashboard module hub ----
 * Shared building blocks for the "3 modules" dashboard layout: Ethical
 * Clearance, Topic Approval (students), and Research Management
 * (lecturers/admin). Each module is presented as a self-contained card
 * with its own mini-stats and quick actions, shown/hidden per role. */
.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.75rem;
    margin: 2rem 0;
}

.module-card {
    background: var(--zcas-white);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(46, 22, 78, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-top: 5px solid var(--zcas-gold);
}

.module-card.module-topic { border-top-color: var(--zcas-navy); }
.module-card.module-research { border-top-color: var(--zcas-grey); }

.module-card-header {
    padding: 1.5rem 1.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.module-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--zcas-navy) 0%, var(--zcas-gold) 100%);
}

.module-card.module-topic .module-card-icon { background: linear-gradient(135deg, var(--zcas-navy-dark) 0%, var(--zcas-navy) 100%); }
.module-card.module-research .module-card-icon { background: linear-gradient(135deg, var(--zcas-grey-dark) 0%, var(--zcas-grey) 100%); }

.module-card-header h3 {
    margin: 0 0 0.15rem 0;
    font-size: 1.15rem;
    color: var(--text-primary);
}

.module-card-header p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.module-card-badge {
    margin-left: auto;
    background: var(--danger-color);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
}

.module-card-stats {
    display: flex;
    gap: 1.25rem;
    padding: 0 1.75rem 1.25rem;
}

.module-card-stats div {
    text-align: center;
}

.module-card-stats strong {
    display: block;
    font-size: 1.5rem;
    color: var(--zcas-navy);
}

.module-card-stats span {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.module-card-actions {
    margin-top: auto;
    padding: 1.25rem 1.75rem;
    background: var(--background-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.module-card-actions a {
    padding: 0.6rem 1.1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.module-card-actions a.primary {
    background: var(--zcas-gold);
    color: var(--zcas-navy);
}

.module-card-actions a.secondary {
    background: transparent;
    color: var(--zcas-navy);
    border: 2px solid var(--zcas-navy);
}

.module-card-actions a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.module-card.module-coming-soon {
    opacity: 0.75;
}

.module-card-comingsoon-tag {
    margin-left: auto;
    background: var(--zcas-grey-tint-30);
    color: var(--zcas-grey-dark);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
}