/*
 * Color Consistency CSS - PPID SMAN 1 Lubuk Sikaping
 * Ensures consistent color usage across all pages and components
 */

/* ===== GLOBAL COLOR OVERRIDES ===== */
:root {
    /* Ensure primary colors are consistent */
    --color-primary: #0056b3 !important;
    --color-primary-dark: #004494 !important;
    --color-primary-light: #3380c5 !important;
    
    /* Legacy compatibility */
    --primary-color: #0056b3 !important;
    --primary-dark: #004494 !important;
    --primary-light: #3380c5 !important;
}

/* ===== TEXT COLORS ===== */
.text-primary {
    color: #0056b3 !important;
}

.text-primary-dark {
    color: #004494 !important;
}

.text-primary-light {
    color: #3380c5 !important;
}

/* ===== BACKGROUND COLORS ===== */
.bg-primary {
    background-color: #0056b3 !important;
}

.bg-primary-dark {
    background-color: #004494 !important;
}

.bg-primary-light {
    background-color: #3380c5 !important;
}

/* ===== BORDER COLORS ===== */
.border-primary {
    border-color: #0056b3 !important;
}

.border-primary-dark {
    border-color: #004494 !important;
}

.border-primary-light {
    border-color: #3380c5 !important;
}

/* ===== BUTTON CONSISTENCY ===== */
.btn-primary {
    background: linear-gradient(135deg, #0056b3 0%, #004494 100%) !important;
    border-color: #0056b3 !important;
    color: white !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: linear-gradient(135deg, #004494 0%, #003d73 100%) !important;
    border-color: #004494 !important;
    color: white !important;
}

.btn-outline-primary {
    border-color: #0056b3 !important;
    color: #0056b3 !important;
    background: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background: #0056b3 !important;
    border-color: #0056b3 !important;
    color: white !important;
}

/* ===== LINK COLORS ===== */
a {
    color: #0056b3 !important;
}

a:hover,
a:focus {
    color: #004494 !important;
}

/* ===== FORM ELEMENTS ===== */
.form-control:focus {
    border-color: #0056b3 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 86, 179, 0.25) !important;
}

.form-select:focus {
    border-color: #0056b3 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 86, 179, 0.25) !important;
}

.form-check-input:checked {
    background-color: #0056b3 !important;
    border-color: #0056b3 !important;
}

.form-check-input:focus {
    border-color: #0056b3 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 86, 179, 0.25) !important;
}

/* ===== NAVIGATION ===== */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: #0056b3 !important;
}

.navbar-nav .nav-link.active {
    color: #0056b3 !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(0, 86, 179, 0.1) !important;
    color: #0056b3 !important;
}

/* ===== PAGINATION ===== */
.pagination .page-link {
    color: #0056b3 !important;
}

.pagination .page-link:hover,
.pagination .page-link:focus {
    background-color: #0056b3 !important;
    border-color: #0056b3 !important;
    color: white !important;
}

.pagination .page-item.active .page-link {
    background-color: #0056b3 !important;
    border-color: #0056b3 !important;
    color: white !important;
}

/* ===== ALERTS ===== */
.alert-primary {
    background-color: rgba(0, 86, 179, 0.1) !important;
    border-color: rgba(0, 86, 179, 0.2) !important;
    color: #004494 !important;
}

/* ===== BADGES ===== */
.badge.bg-primary {
    background-color: #0056b3 !important;
}

/* ===== PROGRESS BARS ===== */
.progress-bar {
    background-color: #0056b3 !important;
}

/* ===== TABLES ===== */
.table-primary {
    background-color: rgba(0, 86, 179, 0.1) !important;
}

.table thead th {
    background-color: #0056b3 !important;
    color: white !important;
}

/* ===== CARDS ===== */
.card-header.bg-primary {
    background-color: #0056b3 !important;
    color: white !important;
}

.card-primary .card-header {
    background-color: #0056b3 !important;
    color: white !important;
}

/* ===== LIST GROUPS ===== */
.list-group-item.active {
    background-color: #0056b3 !important;
    border-color: #0056b3 !important;
}

.list-group-item-primary {
    background-color: rgba(0, 86, 179, 0.1) !important;
    color: #004494 !important;
}

/* ===== ICONS ===== */
.text-primary i,
.text-primary .fas,
.text-primary .far,
.text-primary .fab {
    color: #0056b3 !important;
}

/* ===== HOVER EFFECTS ===== */
.card:hover {
    border-color: rgba(0, 86, 179, 0.2) !important;
}

.list-group-item:hover {
    background-color: rgba(0, 86, 179, 0.05) !important;
}

/* ===== FOCUS STATES ===== */
.btn:focus,
.form-control:focus,
.form-select:focus {
    outline: 2px solid #0056b3 !important;
    outline-offset: 2px !important;
}

/* ===== GRADIENTS ===== */
.bg-gradient-primary {
    background: linear-gradient(135deg, #0056b3 0%, #004494 100%) !important;
}

.text-gradient-primary {
    background: linear-gradient(135deg, #0056b3, #004494) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ===== SHADOWS ===== */
.shadow-primary {
    box-shadow: 0 0.5rem 1rem rgba(0, 86, 179, 0.15) !important;
}

/* ===== CUSTOM COMPONENTS ===== */
.quick-access-icon {
    background: linear-gradient(135deg, #0056b3, #004494) !important;
}

.stats-card .stats-icon {
    color: #0056b3 !important;
}

.news-date {
    color: #0056b3 !important;
}

.read-more {
    color: #0056b3 !important;
}

.read-more:hover {
    color: #004494 !important;
}

.document-icon {
    color: #0056b3 !important;
}

.timeline::before {
    background: #0056b3 !important;
}

.timeline-item::before {
    background: #0056b3 !important;
}

/* ===== RESPONSIVE OVERRIDES ===== */
@media (max-width: 768px) {
    .btn-primary {
        background: linear-gradient(135deg, #0056b3 0%, #004494 100%) !important;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .text-primary {
        color: #000 !important;
    }
    
    .bg-primary {
        background-color: #f8f9fa !important;
        color: #000 !important;
    }
}

/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: high) {
    .text-primary {
        color: #003d73 !important;
    }
    
    .bg-primary {
        background-color: #003d73 !important;
    }
    
    .btn-primary {
        background: #003d73 !important;
        border-color: #003d73 !important;
    }
}