/**
 * GraceLink Theological Training Institute
 * Professional Academic LMS Theme — v2.0
 * Deep Navy + Sacred Gold + Forest Green
 */

:root {
    --brand-navy:        #0d1f3c;
    --brand-navy-mid:    #1a3a5c;
    --brand-navy-light:  #2c5282;
    --brand-navy-pale:   #e8f0f8;
    --brand-gold:        #c9a84c;
    --brand-gold-dark:   #a88a38;
    --brand-gold-light:  #e8cc7a;
    --brand-gold-pale:   #fdf6e3;
    --brand-green:       #2d6a4f;
    --brand-green-dark:  #1a4a35;
    --brand-green-light: #52b788;
    --bg-primary:        #f5f7fa;
    --bg-secondary:      #eef1f6;
    --bg-tertiary:       #e4e8ef;
    --bg-light:          #ffffff;
    --bg-blue-tint:      #e8f0f8;
    --text-primary:      #1a1f2e;
    --text-secondary:    #3d4a5c;
    --text-muted:        #6b7a8d;
    --text-white:        #ffffff;
    --accent-success:    #2d6a4f;
    --accent-warning:    #c9a84c;
    --accent-danger:     #9b2335;
    --accent-info:       #1a3a5c;
    --shadow-sm:         0 1px 4px rgba(13,31,60,0.08);
    --shadow-md:         0 3px 10px rgba(13,31,60,0.12);
    --shadow-lg:         0 6px 20px rgba(13,31,60,0.16);
    --border-light:      #d8dde8;
    --border-blue:       #1a3a5c;
    --border-gold:       #c9a84c;
}

/* ===== GLOBAL ===== */
*, body { font-family: "Rubik", "Segoe UI", sans-serif; }
body { background-color: var(--bg-primary); color: var(--text-primary); }
html, body { background: var(--bg-primary); min-height: 100vh; }

/* ===== SIDEBAR ===== */
#side-nav {
    background: linear-gradient(180deg, var(--brand-navy) 0%, #060e1c 100%);
    border-right: 3px solid var(--brand-gold);
    box-shadow: 4px 0 20px rgba(0,0,0,0.3);
}

#side-nav .top-side {
    background: linear-gradient(180deg, #060e1c 0%, var(--brand-navy) 100%);
    border-bottom: 2px solid var(--brand-gold);
    padding: 1.5rem 1rem !important;
}

#side-nav ul li a {
    color: rgba(255,255,255,0.75);
    font-weight: 500;
    padding: .6rem 1rem;
    border-radius: 0 50px 50px 0;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 12px;
    font-size: 0.875rem;
}

#side-nav ul li a i {
    color: var(--brand-gold);
    width: 18px;
    text-align: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

#side-nav ul li a:hover {
    color: #ffffff;
    background: rgba(201,168,76,0.14);
    border-left: 3px solid var(--brand-gold);
    padding-left: 1.25rem;
}

#side-nav ul li.active a {
    background: linear-gradient(90deg, var(--brand-gold) 0%, var(--brand-gold-dark) 100%);
    color: var(--brand-navy);
    font-weight: 700;
    border-left: none;
    box-shadow: 0 2px 10px rgba(201,168,76,0.4);
}

#side-nav ul li.active a i { color: var(--brand-navy); }

#side-nav ul li.section-header {
    color: var(--brand-gold);
    font-size: 10px;
    letter-spacing: 1.8px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 14px 16px 5px;
    border-bottom: 1px solid rgba(201,168,76,0.18);
    margin-top: 4px;
}

#side-nav ul li.section-header i {
    color: var(--brand-gold);
    font-size: 11px;
}

#side-nav footer {
    color: rgba(255,255,255,0.35);
    font-size: 11px;
}

#side-nav footer a { color: var(--brand-gold-light) !important; }

#side-nav footer select {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(201,168,76,0.25);
    color: rgba(255,255,255,0.65);
    border-radius: 6px;
    font-size: 12px;
    padding: 4px 8px;
    width: 100%;
    margin-bottom: 8px;
}

/* ===== NAVBAR ===== */
#top-navbar {
    background: var(--bg-light);
    border-bottom: 3px solid var(--brand-navy-mid);
    box-shadow: var(--shadow-sm);
}

#top-navbar .nav-wrapper .toggle-btn {
    color: var(--brand-navy);
    font-size: 1.2rem;
    padding: 6px 10px;
    border-radius: 8px;
    transition: all 0.2s;
}

#top-navbar .nav-wrapper .toggle-btn:hover {
    background: var(--brand-navy-pale);
    color: var(--brand-navy);
}

#top-navbar .form-control {
    border: 2px solid var(--border-light);
    border-right: none;
    border-radius: 8px 0 0 8px;
    font-size: 0.875rem;
    background: var(--bg-secondary);
}

#top-navbar .form-control:focus {
    border-color: var(--brand-navy-mid);
    box-shadow: none;
    background: white;
}

#top-navbar .btn-dark {
    background: var(--brand-navy-mid);
    border-color: var(--brand-navy-mid);
    border-radius: 0 8px 8px 0;
}

#top-navbar .btn-dark:hover {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
}

#top-navbar .avatar {
    border-color: var(--brand-gold) !important;
    cursor: pointer;
}

#dark-mode-toggle {
    border-color: var(--border-light);
    color: var(--brand-navy);
}

#dark-mode-toggle:hover {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: var(--brand-gold);
}

/* ===== MAIN CONTENT ===== */
#main, #main-content { background-color: var(--bg-primary) !important; }

/* ===== CARDS ===== */
.card {
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-top: 3px solid var(--brand-navy-mid);
    box-shadow: var(--shadow-sm);
    border-radius: 10px;
    transition: box-shadow 0.2s, transform 0.2s;
}

.card:hover { box-shadow: var(--shadow-md); }

.card-header {
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-mid) 100%);
    color: var(--text-white);
    border-bottom: 2px solid var(--brand-gold);
    border-radius: 8px 8px 0 0 !important;
    font-weight: 600;
}

.card-header.bg-success {
    background: linear-gradient(135deg, var(--brand-green-dark), var(--brand-green)) !important;
}

.card-header.bg-warning {
    background: linear-gradient(135deg, var(--brand-gold-dark), var(--brand-gold)) !important;
    color: var(--brand-navy) !important;
}

.card-header.bg-danger {
    background: linear-gradient(135deg, #6b1e1e, var(--accent-danger)) !important;
}

.card-header.bg-info {
    background: linear-gradient(135deg, var(--brand-navy), var(--brand-navy-light)) !important;
}

/* ===== STAT CARDS ===== */
.card-count { border-top: 4px solid var(--brand-gold) !important; }
.users-count .card-count h2 { color: var(--brand-navy); font-weight: 700; }

/* ===== TABLES ===== */
.table th {
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-mid) 100%);
    color: var(--text-white);
    border-color: rgba(255,255,255,0.08);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table td { border-color: var(--border-light); }

.table-hover tbody tr:hover td {
    background: var(--brand-gold-pale);
    cursor: pointer;
}

.table-striped tbody tr:nth-of-type(odd) td {
    background: var(--bg-secondary);
}

/* ===== FORMS ===== */
.form-control, .form-select {
    border: 2px solid var(--border-light);
    border-radius: 8px;
    font-size: 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus, .form-select:focus {
    border-color: var(--brand-navy-mid);
    box-shadow: 0 0 0 3px rgba(26,58,92,0.1);
}

.form-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.form-title {
    background: linear-gradient(135deg, var(--brand-navy), var(--brand-navy-mid));
    color: var(--text-white);
    border-bottom: 2px solid var(--brand-gold);
    padding: 1rem 1.5rem;
    border-radius: 8px 8px 0 0;
}

.input-group-text {
    background: var(--brand-navy-pale);
    border-color: var(--border-light);
    color: var(--brand-navy);
    font-weight: 600;
}

/* ===== BUTTONS ===== */
.btn-primary {
    background: linear-gradient(135deg, var(--brand-navy-mid), var(--brand-navy));
    border-color: var(--brand-navy);
    font-weight: 600;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--brand-navy), #060e1c);
    border-color: var(--brand-navy);
    box-shadow: 0 4px 12px rgba(13,31,60,0.3);
}

.btn-success {
    background: linear-gradient(135deg, var(--brand-green), var(--brand-green-dark));
    border-color: var(--brand-green-dark);
    font-weight: 600;
}

.btn-success:hover {
    background: linear-gradient(135deg, var(--brand-green-dark), #102e21);
    border-color: var(--brand-green-dark);
}

.btn-warning {
    background: linear-gradient(135deg, var(--brand-gold), var(--brand-gold-dark));
    border-color: var(--brand-gold-dark);
    color: var(--brand-navy);
    font-weight: 600;
}

.btn-outline-primary {
    color: var(--brand-navy-mid);
    border-color: var(--brand-navy-mid);
    font-weight: 600;
}

.btn-outline-primary:hover {
    background: var(--brand-navy-mid);
    border-color: var(--brand-navy-mid);
    color: white;
}

/* ===== ALERTS ===== */
.alert-info    { background: var(--brand-navy-pale); border-left: 4px solid var(--brand-navy-mid); color: var(--brand-navy); }
.alert-warning { background: var(--brand-gold-pale); border-left: 4px solid var(--brand-gold); color: #6b4c10; }
.alert-success { background: #eaf7f0; border-left: 4px solid var(--brand-green); color: var(--brand-green-dark); }
.alert-danger  { background: #fdf0f0; border-left: 4px solid var(--accent-danger); color: var(--accent-danger); }

/* ===== BADGES ===== */
.badge.bg-primary { background: var(--brand-navy-mid) !important; }
.badge.bg-warning  { background: var(--brand-gold) !important; color: var(--brand-navy) !important; }
.badge.bg-success  { background: var(--brand-green) !important; }
.badge.bg-info     { background: var(--brand-navy-light) !important; }

/* ===== DROPDOWNS ===== */
.dropdown-menu {
    border: 1px solid var(--border-light);
    border-top: 3px solid var(--brand-gold);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
}

.dropdown-item:hover {
    background: var(--brand-navy-pale);
    color: var(--brand-navy);
}

/* ===== LINKS ===== */
a { color: var(--brand-navy-mid); }
a:hover { color: var(--brand-gold-dark); }

/* ===== PROGRESS ===== */
.progress { background: var(--bg-tertiary); border-radius: 100px; }
.progress-bar {
    background: linear-gradient(90deg, var(--brand-navy-mid), var(--brand-green)) !important;
}
.progress-bar.bg-success { background: var(--brand-green) !important; }
.progress-bar.bg-warning { background: var(--brand-gold-dark) !important; }

/* ===== LIST GROUP ===== */
.list-group-item { background: var(--bg-light); border-color: var(--border-light); }
.list-group-item.active { background: var(--brand-navy-mid); border-color: var(--brand-navy-mid); }
.list-group-item:hover { background: var(--brand-navy-pale); color: var(--brand-navy); }

/* ===== PAGINATION ===== */
.page-link { color: var(--brand-navy-mid); border-color: var(--border-light); }
.page-link:hover { background: var(--brand-navy-pale); color: var(--brand-navy); }
.page-item.active .page-link { background: var(--brand-navy-mid); border-color: var(--brand-navy-mid); }

/* ===== MODAL ===== */
.modal-header {
    background: linear-gradient(135deg, var(--brand-navy), var(--brand-navy-mid));
    color: var(--text-white);
    border-bottom: 2px solid var(--brand-gold);
}
.modal-header .btn-close { filter: invert(1); }

/* ===== CLASS ITEM ===== */
.class-item {
    border-left: 4px solid var(--brand-navy-mid);
    background: var(--bg-light);
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}
.class-item:hover {
    border-left-color: var(--brand-gold-dark);
    background: var(--brand-navy-pale);
    transform: translateX(5px);
}

/* ===== FOOTER ===== */
.footer {
    background: var(--bg-secondary);
    border-top: 2px solid var(--brand-navy-mid);
    color: var(--text-muted);
}

/* ===== MISC ===== */
.bg-white   { background-color: var(--bg-light) !important; }
.bg-light   { background-color: var(--bg-secondary) !important; }
.manage-wrap { background: var(--bg-secondary); border-top: 3px solid var(--brand-gold); }
#progress-card { background: var(--bg-primary) !important; }
#input-nav { background-color: var(--bg-secondary) !important; border-left: 3px solid var(--brand-navy-mid); }
.title-1 { color: var(--brand-navy); font-weight: 700; }
h1, h2 { color: var(--brand-navy); }
h3, h4, h5 { color: var(--text-secondary); }
.chart-wrap {
    background: var(--bg-light) !important;
    border: 1px solid var(--border-light);
    border-top: 3px solid var(--brand-gold);
    border-radius: 10px;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--brand-navy-mid); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-gold-dark); }

/* ===== SELECTION ===== */
::selection { background: var(--brand-gold-pale); color: var(--brand-navy); }

/* ===== UTILITIES ===== */
.border-blue { border-color: var(--brand-navy-mid) !important; }
.border-gold  { border-color: var(--brand-gold) !important; }
.text-blue    { color: var(--brand-navy-mid) !important; }
.text-gold    { color: var(--brand-gold-dark) !important; }
.bg-blue-pale { background: var(--brand-navy-pale) !important; }
.bg-navy      { background: var(--brand-navy) !important; }

/* ===== TRANSITIONS ===== */
.card, .btn, .form-control, .nav-link, .dropdown-item, .list-group-item {
    transition: all 0.2s ease;
}

/* ===== RESPONSIVE ===== */
@media screen and (max-width: 1150px) {
    #side-nav { border-right: none; border-bottom: 3px solid var(--brand-gold); }
}