/**
 * System Custom Colors
 * Heron School - Scheme of Work Management System
 * 
 * Primary Colors: Red/Maroon Theme
 * Used on: Landing Page, Login Page, Dashboard, Admin Panel
 */

:root {
    /* Primary Brand Colors */
    --primary-color: #c0152a;
    --primary-dark: #8b0000;
    --primary-darker: #6b0000;
    --primary-light: #a50000;
    
    /* Secondary Colors */
    --secondary-color: #8b0000;
    --secondary-dark: #6b0000;
    --secondary-light: #a50000;
    
    /* Accent Colors */
    --accent-color: #c0152a;
    --accent-hover: #8b0000;
    
    /* Light Mode Active States */
    --active-bg: #fee2e2;
    --active-border: #fecaca;
    --active-text: #c0152a;
    
    /* Background Gradients */
    --gradient-primary: linear-gradient(135deg, #c0152a 0%, #8b0000 100%);
    --gradient-dark: linear-gradient(135deg, #8b0000 0%, #6b0000 100%);
    --gradient-sidebar: linear-gradient(180deg, #7f0000 0%, #b30000 100%);
    --gradient-sidebar-dark: linear-gradient(180deg, #6b0000 0%, #4a0000 100%);
    --gradient-auth: linear-gradient(160deg, #8b0000 0%, #a50000 35%, #c0152a 65%, #8b0000 100%);
    
    /* Shadow Colors */
    --shadow-primary: rgba(192, 21, 42, 0.15);
    --shadow-primary-dark: rgba(192, 21, 42, 0.2);
    --shadow-glow: rgba(192, 21, 42, 0.35);
}

/* ============================================
   PRIMARY BUTTON STYLES
   ============================================ */
.btn-primary {
    background: var(--gradient-primary) !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
    box-shadow: 0 4px 12px var(--shadow-primary);
}

.btn-primary:hover {
    background: var(--gradient-dark) !important;
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--shadow-primary-dark);
}

/* ============================================
   SECONDARY BUTTON STYLES
   ============================================ */
.btn-secondary {
    background: var(--gradient-primary) !important;
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: white !important;
}

.btn-secondary:hover {
    background: var(--gradient-dark) !important;
    background-color: var(--secondary-dark) !important;
    border-color: var(--secondary-dark) !important;
}

/* ============================================
   OUTLINE BUTTON STYLES
   ============================================ */
.btn-outline-primary {
    background: transparent !important;
    color: var(--primary-color) !important;
    border: 1.5px solid var(--primary-color) !important;
}

.btn-outline-primary:hover {
    background: var(--primary-color) !important;
    color: white !important;
}

/* ============================================
   SIDEBAR STYLES
   ============================================ */
.sidebar {
    background: var(--gradient-sidebar) !important;
}

.sidebar-dark,
[data-theme="dark"] .sidebar {
    background: var(--gradient-sidebar-dark) !important;
}

/* ============================================
   AUTHENTICATION PAGES (Login)
   ============================================ */
.auth-brand {
    background: var(--gradient-auth) !important;
}

.auth-left-panel {
    background: linear-gradient(135deg, #8b0000 0%, #c0152a 50%, #8b0000 100%) !important;
}

/* ============================================
   LANDING PAGE (Welcome)
   ============================================ */
.hero-section {
    background: var(--gradient-primary) !important;
}

.navbar-white .navbar-brand {
    color: var(--primary-color) !important;
}

.navbar-white .nav-link:hover {
    color: var(--primary-color) !important;
}

.btn-login {
    background: white !important;
    color: var(--primary-color) !important;
}

.btn-login:hover {
    color: var(--primary-dark) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* ============================================
   FORM INPUT FOCUS STATES
   ============================================ */
.form-input:focus,
input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(192, 21, 42, 0.12) !important;
}

/* ============================================
   LINK COLORS
   ============================================ */
a.link-primary {
    color: var(--primary-color) !important;
}

a.link-primary:hover {
    color: var(--primary-dark) !important;
}

/* ============================================
   TEXT COLORS
   ============================================ */
.text-primary {
    color: var(--primary-color) !important;
}

.text-secondary {
    color: var(--secondary-color) !important;
}

/* ============================================
   BADGE COLORS
   ============================================ */
.badge-primary {
    background-color: var(--primary-color) !important;
    color: white !important;
}

.badge-secondary {
    background-color: var(--secondary-color) !important;
    color: white !important;
}

/* ============================================
   LIGHT MODE ACTIVE STATES
   ============================================ */
.sidebar.light-mode .side-nav a.active,
.sidebar.light-mode .nav-dropdown-toggle.active,
.sidebar.light-mode .nav-dropdown-menu a.active {
    background-color: var(--active-bg) !important;
    color: var(--active-text) !important;
    border-color: var(--active-border) !important;
}

/* ============================================
   AVATAR CIRCLES
   ============================================ */
.avatar-circle {
    background: var(--gradient-primary) !important;
}

/* ============================================
   FOOTER
   ============================================ */
.footer-red {
    background: var(--gradient-primary) !important;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.bg-primary-gradient {
    background: var(--gradient-primary) !important;
}

.bg-dark-gradient {
    background: var(--gradient-dark) !important;
}

.shadow-primary {
    box-shadow: 0 4px 12px var(--shadow-primary) !important;
}

.shadow-primary-lg {
    box-shadow: 0 6px 20px var(--shadow-primary-dark) !important;
}

.glow-primary {
    box-shadow: 0 12px 28px var(--shadow-glow) !important;
}

/* Accent color utilities */
.accent-color {
    color: var(--accent-color) !important;
}

.accent-bg {
    background-color: var(--accent-color) !important;
}

/* ============================================
   BOOTSTRAP COLOR OVERRIDES - Red/Maroon Theme
   ============================================ */

/* Override Bootstrap primary colors */
.bg-primary {
    background-color: var(--primary-color) !important;
}

.text-primary {
    color: var(--primary-color) !important;
}

/* Override Bootstrap success colors to use red theme */
.bg-success {
    background-color: var(--primary-color) !important;
}

.text-success {
    color: var(--primary-color) !important;
}

/* Override Bootstrap info colors */
.bg-info {
    background-color: var(--primary-light) !important;
}

.text-info {
    color: var(--primary-color) !important;
}

/* Keep warning as orange/yellow but can override if needed */
.bg-warning {
    background-color: #f59e0b !important;
}

/* Override danger to match theme darker red */
.bg-danger {
    background-color: #dc2626 !important;
}

/* Button overrides for Bootstrap */
.btn-primary {
    background: var(--gradient-primary) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}

.btn-primary:hover {
    background: var(--gradient-dark) !important;
    border-color: var(--primary-dark) !important;
}

.btn-success {
    background: var(--gradient-primary) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}

.btn-success:hover {
    background: var(--gradient-dark) !important;
    border-color: var(--primary-dark) !important;
}

.btn-info {
    background-color: var(--primary-light) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}

/* Link colors */
a {
    color: var(--primary-color);
}

a:hover {
    color: var(--primary-dark);
}

/* Pagination */
.page-link {
    color: var(--primary-color);
}

.page-link:hover {
    color: var(--primary-dark);
}

.page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Form controls focus */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(192, 21, 42, 0.25);
}

/* Alert overrides */
.alert-primary {
    background-color: var(--active-bg);
    border-color: var(--active-border);
    color: var(--primary-dark);
}

.alert-success {
    background-color: var(--active-bg);
    border-color: var(--active-border);
    color: var(--primary-dark);
}

/* Badge overrides */
.badge.bg-primary {
    background-color: var(--primary-color) !important;
}

.badge.bg-success {
    background-color: var(--primary-color) !important;
}

/* Progress bars */
.progress-bar {
    background-color: var(--primary-color);
}

/* List group active */
.list-group-item.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Nav tabs/pills */
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Dropdown active item */
.dropdown-item:active,
.dropdown-item.active {
    background-color: var(--primary-color);
}

/* Table hover accent */
.table-hover tbody tr:hover {
    background-color: rgba(192, 21, 42, 0.05);
}

/* ============================================
   MAIN CONTENT AREA - White Background
   ============================================ */

/* Main content wrapper */
.main-content,
.content-wrapper,
.content-area,
.container-fluid {
    background-color: #ffffff;
}

/* Body background */
body {
    background-color: #f8fafc;
}

/* Card backgrounds */
.card {
    background-color: #ffffff;
    border-color: #e5e7eb;
}

.card-header {
    background-color: #f9fafb;
    border-bottom-color: #e5e7eb;
}

/* Sidebar - red theme */
.sidebar {
    background: var(--gradient-sidebar) !important;
}

/* Navbar - white with red accents */
.navbar-light {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb;
}

.navbar-light .navbar-brand,
.navbar-light .nav-link {
    color: var(--primary-color) !important;
}

.navbar-light .nav-link:hover {
    color: var(--primary-dark) !important;
}

/* Breadcrumb */
.breadcrumb {
    background-color: transparent;
}

.breadcrumb-item.active {
    color: var(--primary-color);
}

/* Page header */
.page-header {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

/* Dashboard specific */
.dashboard-wrapper {
    background-color: #f8fafc;
}

/* White panels */
.white-panel {
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Stats cards - white background with red accents */
.stat-card {
    background: #ffffff;
    border-left: 4px solid var(--primary-color);
}