/* ============================================
   🎨 ELEGANT MONOCHROME THEME - COMPREHENSIVE COLOR RULES
   ============================================ */

/* Color Palette:
   - Charcoal: #2D3748 (Primary Dark)
   - Slate Gray: #4A5568 (Secondary)
   - Steel Blue: #718096 (Accent)
   - Light Gray: #A0AEC0 (Muted)
   - Off White: #F7FAFC (Text Light)
   - Soft Gray: #E2E8F0 (Text Secondary)
*/

/* ============================================
   🎯 COMPREHENSIVE COLOR RULE SYSTEM
   ============================================ */

/* RULE 1: Gray text on white/light backgrounds */
[style*="background: #F7FAFC"], [style*="background-color: #F7FAFC"],
[style*="background: #E2E8F0"], [style*="background-color: #E2E8F0"],
[style*="background: #CBD5E0"], [style*="background-color: #CBD5E0"],
[style*="background: white"], [style*="background-color: white"],
[style*="background: #fff"], [style*="background-color: #fff"],
.bg-light, .bg-white, .card[style*="background: #F7FAFC"],
.card[style*="background: #E2E8F0"] {
    color: #4A5568 !important;
}

[style*="background: #F7FAFC"] *, [style*="background-color: #F7FAFC"] *,
[style*="background: #E2E8F0"] *, [style*="background-color: #E2E8F0"] *,
[style*="background: #CBD5E0"] *, [style*="background-color: #CBD5E0"] *,
[style*="background: white"] *, [style*="background-color: white"] *,
[style*="background: #fff"] *, [style*="background-color: #fff"] *,
.bg-light *, .bg-white *, .card[style*="background: #F7FAFC"] *,
.card[style*="background: #E2E8F0"] * {
    color: #4A5568 !important;
}

/* RULE 2: White text on gray/dark backgrounds */
[style*="background: #2D3748"], [style*="background-color: #2D3748"],
[style*="background: #4A5568"], [style*="background-color: #4A5568"],
[style*="background: #718096"], [style*="background-color: #718096"],
[style*="background: rgba(45, 55, 72"], [style*="background: rgba(74, 85, 104"],
[style*="background: linear-gradient"][style*="#2D3748"],
[style*="background: linear-gradient"][style*="#4A5568"],
.bg-dark, .bg-secondary, .card[style*="background: rgba(45, 55, 72"],
.card[style*="background: rgba(74, 85, 104"] {
    color: #F7FAFC !important;
}

[style*="background: #2D3748"] *, [style*="background-color: #2D3748"] *,
[style*="background: #4A5568"] *, [style*="background-color: #4A5568"] *,
[style*="background: #718096"] *, [style*="background-color: #718096"] *,
[style*="background: rgba(45, 55, 72"] *, [style*="background: rgba(74, 85, 104"] *,
[style*="background: linear-gradient"][style*="#2D3748"] *,
[style*="background: linear-gradient"][style*="#4A5568"] *,
.bg-dark *, .bg-secondary *, .card[style*="background: rgba(45, 55, 72"] *,
.card[style*="background: rgba(74, 85, 104"] * {
    color: #F7FAFC !important;
}

/* RULE 3: Special cases for icons and specific elements */
[style*="background: #F7FAFC"] i, [style*="background: #E2E8F0"] i,
[style*="background: white"] i, .bg-light i, .bg-white i {
    color: #4A5568 !important;
}

[style*="background: #2D3748"] i, [style*="background: #4A5568"] i,
[style*="background: rgba(45, 55, 72"] i, [style*="background: rgba(74, 85, 104"] i,
.bg-dark i, .bg-secondary i {
    color: #F7FAFC !important;
}

/* RULE 4: Form elements follow background rules */
[style*="background: #F7FAFC"] .form-control,
[style*="background: #E2E8F0"] .form-control,
[style*="background: white"] .form-control {
    background: #F7FAFC !important;
    border: 2px solid #E2E8F0 !important;
    color: #4A5568 !important;
}

[style*="background: #F7FAFC"] .form-control::placeholder,
[style*="background: #E2E8F0"] .form-control::placeholder,
[style*="background: white"] .form-control::placeholder {
    color: rgba(74, 85, 104, 0.6) !important;
}

[style*="background: #2D3748"] .form-control,
[style*="background: #4A5568"] .form-control,
[style*="background: rgba(45, 55, 72"] .form-control,
[style*="background: rgba(74, 85, 104"] .form-control {
    background: rgba(45, 55, 72, 0.9) !important;
    border: 1px solid rgba(226, 232, 240, 0.3) !important;
    color: #F7FAFC !important;
}

[style*="background: #2D3748"] .form-control::placeholder,
[style*="background: #4A5568"] .form-control::placeholder,
[style*="background: rgba(45, 55, 72"] .form-control::placeholder,
[style*="background: rgba(74, 85, 104"] .form-control::placeholder {
    color: rgba(247, 250, 252, 0.6) !important;
}

/* RULE 5: Button color rules based on container background */
[style*="background: #F7FAFC"] .btn,
[style*="background: #E2E8F0"] .btn,
[style*="background: white"] .btn {
    background: linear-gradient(135deg, #4A5568, #2D3748) !important;
    color: white !important;
    border: none !important;
}

[style*="background: #2D3748"] .btn,
[style*="background: #4A5568"] .btn,
[style*="background: rgba(45, 55, 72"] .btn,
[style*="background: rgba(74, 85, 104"] .btn {
    background: linear-gradient(135deg, #4A5568, #2D3748) !important;
    color: white !important;
    border: none !important;
}

/* RULE 6: Badge color rules */
[style*="background: #F7FAFC"] .badge,
[style*="background: #E2E8F0"] .badge,
[style*="background: white"] .badge {
    background: linear-gradient(135deg, #4A5568, #2D3748) !important;
    color: white !important;
}

[style*="background: #2D3748"] .badge,
[style*="background: #4A5568"] .badge,
[style*="background: rgba(45, 55, 72"] .badge,
[style*="background: rgba(74, 85, 104"] .badge {
    background: #E2E8F0 !important;
    color: #4A5568 !important;
    border: 1px solid #CBD5E0 !important;
}

/* RULE 7: Link color rules */
[style*="background: #F7FAFC"] a,
[style*="background: #E2E8F0"] a,
[style*="background: white"] a {
    color: #4A5568 !important;
}

[style*="background: #F7FAFC"] a:hover,
[style*="background: #E2E8F0"] a:hover,
[style*="background: white"] a:hover {
    color: #2D3748 !important;
}

[style*="background: #2D3748"] a,
[style*="background: #4A5568"] a,
[style*="background: rgba(45, 55, 72"] a,
[style*="background: rgba(74, 85, 104"] a {
    color: #F7FAFC !important;
}

[style*="background: #2D3748"] a:hover,
[style*="background: #4A5568"] a:hover,
[style*="background: rgba(45, 55, 72"] a:hover,
[style*="background: rgba(74, 85, 104"] a:hover {
    color: #E2E8F0 !important;
}

/* ============================================
   🎨 LEGACY MONOCHROME OVERRIDES (PRESERVED)
   ============================================ */

/* Global Background Override */
body {
    background: linear-gradient(135deg, #F7FAFC 0%, #E2E8F0 50%, #CBD5E0 100%) !important;
    color: #4A5568 !important;
}

/* All Blue Colors to Monochrome */
.text-primary, .btn-primary, .bg-primary, .border-primary,
.text-blue, .btn-blue, .bg-blue, .border-blue,
.text-info, .btn-info, .bg-info, .border-info {
    color: #F7FAFC !important;
    background-color: #4A5568 !important;
    border-color: #4A5568 !important;
}

/* Cards and Containers - EXCEPT admin cards */
.card, .portfolio-card, .activity-card, .education-card,
.project-card, .certificate-card, .training-card {
    background: #F7FAFC !important;
    border: 2px solid #E2E8F0 !important;
    color: #4A5568 !important;
}

.card-header, .card-title, .card-body, .card-text {
    color: #4A5568 !important;
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, #4A5568, #2D3748) !important;
    border-color: #4A5568 !important;
    color: white !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: linear-gradient(135deg, #2D3748, #4A5568) !important;
    border-color: #2D3748 !important;
    color: white !important;
}

.btn-secondary {
    background: #E2E8F0 !important;
    border-color: #CBD5E0 !important;
    color: #4A5568 !important;
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    background: #CBD5E0 !important;
    color: #4A5568 !important;
}

/* Forms */
.form-control, .form-select, .form-check-input {
    background: #F7FAFC !important;
    border: 2px solid #E2E8F0 !important;
    color: #4A5568 !important;
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    background: #F7FAFC !important;
    border-color: #4A5568 !important;
    box-shadow: 0 0 0 0.2rem rgba(74, 85, 104, 0.25) !important;
    color: #4A5568 !important;
}

.form-control::placeholder {
    color: rgba(74, 85, 104, 0.6) !important;
}

.form-label {
    color: #4A5568 !important;
}

/* Exception for admin pages - keep white text */
.admin-layout .form-label,
.admin-card .form-label,
body[class*="admin"] .form-label,
body.admin-layout .form-label {
    color: #F7FAFC !important;
}

/* Ensure admin form elements have white text */
.admin-layout .form-control,
.admin-layout .form-select,
.admin-layout .form-control:focus,
.admin-layout .form-select:focus {
    color: #F7FAFC !important;
}

/* Admin small text should be white */
.admin-layout small,
.admin-layout .small {
    color: #E2E8F0 !important;
}

/* Tables */
.table {
    color: #4A5568 !important;
}

.table th {
    background: linear-gradient(135deg, #4A5568, #2D3748) !important;
    color: #F7FAFC !important;
    border-color: #E2E8F0 !important;
}

.table td {
    border-color: #E2E8F0 !important;
    color: #4A5568 !important;
}

.table-hover tbody tr:hover {
    background: rgba(226, 232, 240, 0.3) !important;
}

/* Badges */
.badge {
    background: #4A5568 !important;
    color: white !important;
}

.badge.bg-primary { background: #4A5568 !important; }
.badge.bg-secondary { background: #718096 !important; }
.badge.bg-success { background: #68D391 !important; color: #2D3748 !important; }
.badge.bg-danger { background: #FC8181 !important; color: #2D3748 !important; }
.badge.bg-warning { background: #F6E05E !important; color: #2D3748 !important; }
.badge.bg-info { background: #63B3ED !important; color: #2D3748 !important; }

/* Navigation */
.navbar {
    background: #F7FAFC !important;
    border-bottom: 2px solid #E2E8F0 !important;
}

.navbar-brand, .nav-link {
    color: #4A5568 !important;
}

.nav-link:hover, .nav-link:focus {
    color: #2D3748 !important;
}

/* Dropdowns */
.dropdown-menu {
    background: #F7FAFC !important;
    border: 2px solid #E2E8F0 !important;
}

.dropdown-item {
    color: #4A5568 !important;
}

.dropdown-item:hover, .dropdown-item:focus {
    background: #E2E8F0 !important;
    color: #4A5568 !important;
}

/* Pagination */
.pagination .page-link {
    background: #F7FAFC !important;
    border: 2px solid #E2E8F0 !important;
    color: #4A5568 !important;
}

.pagination .page-link:hover {
    background: #E2E8F0 !important;
    border-color: #4A5568 !important;
    color: #4A5568 !important;
}

.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #4A5568, #2D3748) !important;
    border-color: transparent !important;
    color: #F7FAFC !important;
}

/* Text Colors */
.text-muted {
    color: rgba(74, 85, 104, 0.7) !important;
}

.text-white {
    color: #F7FAFC !important;
}

.text-dark {
    color: #2D3748 !important;
}

/* Links */
a {
    color: #4A5568 !important;
}

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

/* Modals */
.modal-content {
    background: #F7FAFC !important;
    border: 2px solid #E2E8F0 !important;
}

.modal-header, .modal-footer {
    border-color: #E2E8F0 !important;
}

.modal-title {
    color: #4A5568 !important;
}

/* Section Titles - Smart Color Logic */
.section-title {
    color: #4A5568 !important;
}

/* Exception: White text in gray background containers */
[style*="background: #E2E8F0"] .section-title,
[style*="background: rgba(226, 232, 240"] .section-title,
.bg-secondary .section-title {
    color: #F7FAFC !important;
}

.section-subtitle {
    color: #4A5568 !important;
}

/* Ensure all text follows the color rules */
h1, h2, h3, h4, h5, h6 {
    color: #4A5568 !important;
}

p, span, div, label {
    color: #4A5568 !important;
}

/* Final catch-all for any missed elements */
.container, .container-fluid, .row, .col, [class*="col-"] {
    color: #4A5568 !important;
}

/* Animation and Transition Consistency */
* {
    transition: all 0.3s ease !important;
}

/* ============================================
   🎯 ADMIN MONOCHROME TEXT OVERRIDES
   ============================================ */

/* RULE 5: Admin-specific text color overrides */
.admin-layout .text-admin-muted,
.admin-main .text-admin-muted {
    color: #2D3748 !important; /* Dark gray - much more visible */
}

.admin-layout .text-admin-light,
.admin-main .text-admin-light {
    color: #4A5568 !important; /* Medium dark gray for headings */
}

.admin-layout .text-admin-secondary,
.admin-main .text-admin-secondary {
    color: #4A5568 !important; /* Medium dark gray for secondary text */
}

.admin-layout .text-admin-primary,
.admin-main .text-admin-primary {
    color: #1A202C !important; /* Very dark gray for primary text */
}

/* Ensure no white text on white backgrounds in admin */
.admin-layout [style*="background: white"] *,
.admin-layout [style*="background: #fff"] *,
.admin-layout [style*="background: #F7FAFC"] * {
    color: #1A202C !important; /* Very dark gray for light backgrounds */
}

/* Ensure proper text color on dark admin backgrounds */
.admin-layout [style*="background: #2D3748"] *,
.admin-layout [style*="background: #4A5568"] *,
.admin-layout [style*="background: rgba(45, 55, 72"] * {
    color: #718096 !important; /* Medium gray for dark backgrounds */
}

/* Override any remaining white text in admin */
.admin-layout .text-white,
.admin-main .text-white,
.admin-container .text-white {
    color: #2D3748 !important; /* Dark gray instead of white */
}
/* ============================================
   🎯 COMPREHENSIVE ADMIN TEXT COLOR OVERRIDE
   ============================================ */

/* Force ALL text content in admin to dark gray - including database content */
.admin-layout .container-fluid *,
.admin-main .container-fluid *,
.admin-container * {
    color: #2D3748 !important;
}

/* Specifically target table data from database */
.admin-layout table tbody tr td,
.admin-layout .table tbody tr td,
.admin-layout table tbody tr td *,
.admin-layout .table tbody tr td * {
    color: #2D3748 !important;
    background-color: transparent !important;
}

/* Target any dynamically generated content */
.admin-layout [class*="text-"],
.admin-layout [style*="color: white"],
.admin-layout [style*="color: #fff"],
.admin-layout [style*="color: #ffffff"],
.admin-layout [style*="color:white"],
.admin-layout [style*="color:#fff"],
.admin-layout [style*="color:#ffffff"] {
    color: #2D3748 !important;
}

/* Override any inline styles that might set white text */
.admin-layout *[style] {
    color: #2D3748 !important;
}

/* Make sure pagination and other controls are visible */
.admin-layout .pagination a,
.admin-layout .page-link {
    color: #2D3748 !important;
    background-color: #F7FAFC !important;
    border-color: #E2E8F0 !important;
}

.admin-layout .pagination .active .page-link {
    color: white !important;
    background-color: #4A5568 !important;
    border-color: #4A5568 !important;
}

/* Search and filter forms */
.admin-layout .form-control {
    color: #2D3748 !important;
    background-color: #F7FAFC !important;
    border-color: #E2E8F0 !important;
}

.admin-layout .form-control::placeholder {
    color: #718096 !important;
}

/* Dropdown menus */
.admin-layout .dropdown-menu,
.admin-layout .dropdown-menu * {
    color: #2D3748 !important;
    background-color: #F7FAFC !important;
}

.admin-layout .dropdown-item:hover {
    color: #1A202C !important;
    background-color: #E2E8F0 !important;
}
/* ============================================
   🔥 NUCLEAR OVERRIDE FOR DATABASE CONTENT
   ============================================ */

/* ============================================
   🔥 SMART COLOR SYSTEM FOR ADMIN
   ============================================ */

/* RULE: White text on dark/gray backgrounds */
.admin-layout [style*="background: #2D3748"],
.admin-layout [style*="background: #4A5568"],
.admin-layout [style*="background: #718096"],
.admin-layout [style*="background: rgba(45, 55, 72"],
.admin-layout [style*="background: rgba(74, 85, 104"],
.admin-layout [style*="background: rgba(113, 128, 150"],
.admin-layout [style*="background-color: #2D3748"],
.admin-layout [style*="background-color: #4A5568"],
.admin-layout [style*="background-color: #718096"] {
    color: #F7FAFC !important;
}

.admin-layout [style*="background: #2D3748"] *,
.admin-layout [style*="background: #4A5568"] *,
.admin-layout [style*="background: #718096"] *,
.admin-layout [style*="background: rgba(45, 55, 72"] *,
.admin-layout [style*="background: rgba(74, 85, 104"] *,
.admin-layout [style*="background: rgba(113, 128, 150"] *,
.admin-layout [style*="background-color: #2D3748"] *,
.admin-layout [style*="background-color: #4A5568"] *,
.admin-layout [style*="background-color: #718096"] * {
    color: #F7FAFC !important;
}

/* RULE: Dark text on light/white backgrounds */
.admin-layout [style*="background: #F7FAFC"],
.admin-layout [style*="background: #E2E8F0"],
.admin-layout [style*="background: #CBD5E0"],
.admin-layout [style*="background: white"],
.admin-layout [style*="background: #fff"],
.admin-layout [style*="background-color: #F7FAFC"],
.admin-layout [style*="background-color: #E2E8F0"],
.admin-layout [style*="background-color: white"],
.admin-layout [style*="background-color: #fff"] {
    color: #2D3748 !important;
}

.admin-layout [style*="background: #F7FAFC"] *,
.admin-layout [style*="background: #E2E8F0"] *,
.admin-layout [style*="background: #CBD5E0"] *,
.admin-layout [style*="background: white"] *,
.admin-layout [style*="background: #fff"] *,
.admin-layout [style*="background-color: #F7FAFC"] *,
.admin-layout [style*="background-color: #E2E8F0"] *,
.admin-layout [style*="background-color: white"] *,
.admin-layout [style*="background-color: #fff"] * {
    color: #2D3748 !important;
}

/* Default fallback for admin layout */
.admin-layout .container-fluid,
.admin-layout .container-fluid *,
.admin-main .container-fluid,
.admin-main .container-fluid *,
.admin-container,
.admin-container * {
    color: #2D3748 !important; /* Default dark text */
}

/* Specifically target any PHP echoed content */
.admin-layout td,
.admin-layout th,
.admin-layout p,
.admin-layout span,
.admin-layout div {
    color: #2D3748 !important;
}

/* Override any Bootstrap default colors */
.admin-layout .text-body,
.admin-layout .text-body-emphasis,
.admin-layout .text-body-secondary {
    color: #2D3748 !important;
}

/* Make sure all table content is dark */
.admin-layout table tbody tr td,
.admin-layout .table tbody tr td {
    color: #2D3748 !important;
    background-color: transparent !important;
}

/* Override any remaining white or light text */
.admin-layout [class*="text-white"],
.admin-layout [class*="text-light"],
.admin-layout [style*="color: white"],
.admin-layout [style*="color: #fff"] {
    color: #2D3748 !important;
}

/* Make sure pagination text is visible */
.admin-layout .pagination,
.admin-layout .pagination * {
    color: #2D3748 !important;
}

.admin-layout .page-link {
    color: #2D3748 !important;
    background-color: #F7FAFC !important;
    border-color: #E2E8F0 !important;
}

.admin-layout .page-item.active .page-link {
    color: white !important;
    background-color: #4A5568 !important;
    border-color: #4A5568 !important;
}
/* ============================================
   🎯 ADMIN CARDS SPECIFIC STYLING
   ============================================ */

/* Admin cards have dark backgrounds - white text */
.admin-layout .admin-card {
    background: rgba(45, 55, 72, 0.9) !important;
    color: #F7FAFC !important;
}

.admin-layout .admin-card * {
    color: #F7FAFC !important;
}

/* Admin stat cards have dark backgrounds - white text */
.admin-layout .admin-stat-card {
    background: rgba(45, 55, 72, 0.9) !important;
    color: #F7FAFC !important;
}

.admin-layout .admin-stat-card * {
    color: #F7FAFC !important;
}

/* Exception: Form elements inside admin cards need contrast */
.admin-layout .admin-card .form-control,
.admin-layout .admin-card .form-select,
.admin-layout .admin-card input,
.admin-layout .admin-card textarea,
.admin-layout .admin-card select {
    background: rgba(247, 250, 252, 0.95) !important;
    color: #2D3748 !important;
    border: 1px solid rgba(226, 232, 240, 0.5) !important;
}

.admin-layout .admin-card .form-control::placeholder {
    color: rgba(45, 55, 72, 0.6) !important;
}

/* Exception: Tables inside admin cards need light background */
.admin-layout .admin-card .table,
.admin-layout .admin-card table {
    background: rgba(247, 250, 252, 0.98) !important;
    border-radius: 8px !important;
}

.admin-layout .admin-card .table *,
.admin-layout .admin-card table * {
    color: #2D3748 !important;
}

.admin-layout .admin-card .table th,
.admin-layout .admin-card table th {
    background: rgba(45, 55, 72, 0.1) !important;
    color: #2D3748 !important;
    font-weight: 600 !important;
}

/* Exception: Alerts inside admin cards */
.admin-layout .admin-card .alert {
    background: rgba(247, 250, 252, 0.95) !important;
    color: #2D3748 !important;
    border: 1px solid rgba(226, 232, 240, 0.5) !important;
}