/* ===================================
   DARK MODE OVERRIDE - FORCE DARK BACKGROUNDS EVERYWHERE
   This file forces dark mode styling across the entire website
   regardless of theme toggle or user preference
   =================================== */

/* Force dark color scheme */
:root, html, body {
    color-scheme: dark !important;
}

/* Override all white background classes and elements */
.section-white-bg,
.btn-white-bg,
[class*="white-bg"],
[class*="bg-white"] {
    background-color: #1a1f2e !important;
    background: #1a1f2e !important;
}

/* Override CTA section buttons */
.cta-section .btn-primary {
    background-color: #2d3748 !important;
    color: #60a5fa !important;
    border-color: #4a5568 !important;
}

.cta-section .btn-outline:hover {
    background-color: #374151 !important;
    color: #93c5fd !important;
}

/* Override loading overlay */
.loading::after {
    background: rgba(15, 23, 42, 0.9) !important;
}

/* Force dark backgrounds on all major sections */
section,
.section,
.container-section,
main,
article,
aside {
    background-color: transparent !important;
}

/* Ensure body and HTML have dark background */
html, body {
    background-color: #0f172a !important;
    background: #0f172a !important;
    color: #e2e8f0 !important;
}

/* Override any inline white backgrounds */
[style*="background: white"],
[style*="background:white"],
[style*="background-color: white"],
[style*="background-color:white"],
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background: #ffffff"],
[style*="background:#ffffff"],
[style*="background-color: #ffffff"],
[style*="background-color:#ffffff"],
[style*="background: rgb(255, 255, 255)"],
[style*="background:rgb(255, 255, 255)"],
[style*="background-color: rgb(255, 255, 255)"],
[style*="background-color:rgb(255, 255, 255)"] {
    background-color: #1a1f2e !important;
    background: #1a1f2e !important;
}

/* Admin page specific overrides */
.login-form,
.header,
.nav,
.stat-card,
.stats-card,
.section,
.table-container,
.modal-content,
.chart-card,
.filters-section,
.sidebar,
.chat-header,
.chat-input,
.message-bubble.support {
    background: #1e293b !important;
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Table overrides */
table,
thead,
tbody,
th,
td,
.table {
    background: #1e293b !important;
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

table th {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

table td {
    border-color: #374151 !important;
}

table tbody tr:hover {
    background: #374151 !important;
}

/* Form elements */
input,
textarea,
select,
.form-input,
.form-select,
.form-textarea,
.form-control {
    background: #1e293b !important;
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #4a5568 !important;
}

input:focus,
textarea:focus,
select:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    background: #2d3748 !important;
    border-color: #60a5fa !important;
    outline-color: #60a5fa !important;
}

/* Dropdown menus */
.dropdown,
.dropdown-menu,
.dropdown-content,
select option {
    background: #1e293b !important;
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Cards and containers */
.card,
.panel,
.box,
.container-box,
.content-box {
    background: #1e293b !important;
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Modals */
.modal,
.modal-backdrop {
    background: rgba(0, 0, 0, 0.8) !important;
}

.modal-content,
.modal-body,
.modal-header,
.modal-footer {
    background: #1e293b !important;
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Buttons - ensure no white backgrounds */
button,
.btn,
[class*="btn-"] {
    background-color: #2d3748 !important;
    color: #e2e8f0 !important;
    border-color: #4a5568 !important;
}

button:hover,
.btn:hover,
[class*="btn-"]:hover {
    background-color: #374151 !important;
    border-color: #60a5fa !important;
}

/* Primary buttons special styling */
.btn-primary,
button.primary {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: white !important;
}

.btn-primary:hover,
button.primary:hover {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}

/* Message bubbles */
.message-bubble,
.chat-bubble,
.bubble {
    background: #2d3748 !important;
    color: #e2e8f0 !important;
}

.message-bubble.support {
    background: #374151 !important;
    color: #e2e8f0 !important;
}

/* Navigation */
nav,
.navbar,
.navigation {
    background: #1a1f2e !important;
    background-color: #1a1f2e !important;
}

/* Headers and footers */
header,
.header,
footer,
.footer {
    background: #0f172a !important;
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

/* Override print styles - even printing should be dark */
@media print {
    * {
        background: #1a1f2e !important;
        color: #e2e8f0 !important;
    }
    
    body {
        background: #0f172a !important;
    }
}

/* Tooltips and popovers */
.tooltip,
.popover,
[role="tooltip"] {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Breadcrumbs */
.breadcrumb,
.breadcrumbs {
    background: transparent !important;
}

/* Alerts and notifications */
.alert,
.notification,
.notice {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #4a5568 !important;
}

/* Code blocks */
pre,
code,
.code,
.codeblock {
    background: #1a1f2e !important;
    color: #e2e8f0 !important;
}

/* Ensure all text is readable */
p, span, div, a, li, h1, h2, h3, h4, h5, h6, label, td, th {
    color: inherit !important;
}

/* Links */
a {
    color: #60a5fa !important;
}

a:hover {
    color: #93c5fd !important;
}

/* Selection colors */
::selection {
    background: #3b82f6 !important;
    color: white !important;
}

::-moz-selection {
    background: #3b82f6 !important;
    color: white !important;
}

/* Scrollbar styling for dark mode */
::-webkit-scrollbar {
    background: #1a1f2e !important;
}

::-webkit-scrollbar-track {
    background: #1a1f2e !important;
}

::-webkit-scrollbar-thumb {
    background: #4a5568 !important;
}

::-webkit-scrollbar-thumb:hover {
    background: #6b7280 !important;
}

/* Override any rgba white backgrounds */
[style*="rgba(255, 255, 255"],
[style*="rgba(255,255,255"] {
    background: #1a1f2e !important;
}

/* Special handling for specific sections that might have white */
#core-platforms,
#portfolio,
.section-white-bg,
.white-section,
.light-section {
    background: #1a1f2e !important;
    background-color: #1a1f2e !important;
}

/* Portfolio Cards Dark Mode */
.portfolio-card {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: #374151 !important;
    color: #e2e8f0 !important;
}

.portfolio-card:hover {
    background: #334155 !important;
    background-color: #334155 !important;
    border-color: #3b82f6 !important;
}

.portfolio-card.featured {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
    border-color: #3b82f6 !important;
}

.portfolio-card.featured:hover {
    background: linear-gradient(135deg, #334155 0%, #475569 100%) !important;
}

/* Portfolio Text Elements - More Specific Selectors */
.portfolio-card .portfolio-title,
.portfolio-card h3.portfolio-title,
#portfolio .portfolio-card .portfolio-title {
    color: #f1f5f9 !important;
}

.portfolio-card .portfolio-description,
.portfolio-card p.portfolio-description,
#portfolio .portfolio-card .portfolio-description {
    color: #cbd5e1 !important;
}

.portfolio-card .portfolio-category,
.portfolio-card .portfolio-category,
#portfolio .portfolio-card .portfolio-category {
    color: #60a5fa !important;
}

.portfolio-card .portfolio-client,
.portfolio-card .portfolio-meta-item .portfolio-client,
#portfolio .portfolio-card .portfolio-client {
    color: #e2e8f0 !important;
}

.portfolio-card .portfolio-meta-item span,
.portfolio-card .portfolio-meta span,
#portfolio .portfolio-card .portfolio-meta-item span {
    color: #cbd5e1 !important;
}

.portfolio-card .portfolio-meta-item i,
.portfolio-card .portfolio-meta i,
#portfolio .portfolio-card .portfolio-meta-item i {
    color: #60a5fa !important;
}

/* Additional text elements that might be missing */
.portfolio-card span:not(.portfolio-category):not(.portfolio-client),
.portfolio-card p:not(.portfolio-description),
.portfolio-card div:not(.portfolio-image):not(.portfolio-header):not(.portfolio-meta):not(.portfolio-footer) {
    color: #e2e8f0 !important;
}

/* Force all text in portfolio cards to be visible */
.portfolio-card * {
    color: inherit !important;
}

.portfolio-card h1,
.portfolio-card h2,
.portfolio-card h3,
.portfolio-card h4,
.portfolio-card h5,
.portfolio-card h6 {
    color: #f1f5f9 !important;
}

.portfolio-card p {
    color: #cbd5e1 !important;
}

.portfolio-card span {
    color: #e2e8f0 !important;
}

.portfolio-card a {
    color: #60a5fa !important;
}

.portfolio-card a:hover {
    color: #93c5fd !important;
}

/* Portfolio Section Header and Footer */
#portfolio .section-title {
    color: #f1f5f9 !important;
}

#portfolio .section-description {
    color: #cbd5e1 !important;
}

#portfolio .section-footer .btn {
    background: #374151 !important;
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #e2e8f0 !important;
}

#portfolio .section-footer .btn:hover {
    background: #4b5563 !important;
    background-color: #4b5563 !important;
    border-color: #60a5fa !important;
    color: #f1f5f9 !important;
}

/* Ensure no white borders */
* {
    border-color: #374151 !important;
}

/* Override any !important white declarations */
[style*="background: white !important"],
[style*="background-color: white !important"],
[style*="background: #fff !important"],
[style*="background-color: #fff !important"],
[style*="background: #ffffff !important"],
[style*="background-color: #ffffff !important"] {
    background: #1a1f2e !important;
    background-color: #1a1f2e !important;
}