/* ==========================================================================
   PORTFOLIO WEBSITE - PREMIUM DARK MODE OVERRIDES
   ========================================================================== */

html.dark-mode,
body.dark-mode {
    --color-white: #121212;
    --color-bg-card: #1c1c1e;
    --color-black: #FFFFFF;
    --color-dark: #eeeeee;
    --color-muted: #6c757d;
    --color-red: #c91c36;
    --color-red-hover: #A81420;
    --color-red-light: rgb(201 28 54 / 15%);
    --color-accent-gradient: linear-gradient(135deg, #c91c36 0%, #A81420 100%);
    --border-active: rgba(209, 26, 42, 0.2);
    --border-light: rgba(255, 255, 255, 0.1);
    --box-shadow-color: rgba(0, 0, 0, 0.6);
    --navbar-bg-color: rgba(12, 12, 12, 0.95);
    --color-dark-light: #333333;
}

/* Switch shown icons based on active mode */
body.dark-mode .theme-toggle-btn .sun-icon {
    display: inline-block;
}

body.dark-mode .theme-toggle-btn .moon-icon {
    display: none;
}

body:not(.dark-mode) .theme-toggle-btn .sun-icon {
    display: none;
}

body:not(.dark-mode) .theme-toggle-btn .moon-icon {
    display: inline-block;
}

body.dark-mode .logo-light {
    display: none !important;
}

body.dark-mode .logo-dark {
    display: inline-block !important;
}

body.dark-mode .sp-1 {
    filter: invert(1) hue-rotate(180deg);
}

body.dark-mode .milestone-col.col-charcoal {
    background-color: var(--color-bg-card) !important;
    color: var(--color-dark) !important;
}

body.dark-mode .milestone-col.col-red,
body.dark-mode .tools-banner-red {
    color: var(--color-dark) !important;
}

body.dark-mode .custom-navbar .nav-link.btn-nav-contact,
body.dark-mode .custom-navbar .nav-link.btn-nav-contact:hover {
    color: var(--color-dark) !important;
}

body.dark-mode .btn-nav-contact .hero-pulse {
    background: var(--color-dark) !important;
}

body.dark-mode .milestones-banner-dark {
    background-color: var(--color-white) !important;
}

body.dark-mode .swap-button-light .btn-icon {
    background-color: var(--color-dark) !important;
    color: var(--color-accent-red);
}

body.dark-mode .swap-button-dark .btn-icon {
    color: var(--color-white);
    background-color: var(--color-dark);
}

body.dark-mode .swap-button-dark .btn-text {
    color: var(--color-dark);
}

body.dark-mode .swap-button-dark:hover {
    background-color: var(--color-dark-light);
    border-color: var(--color-white);
}

body.dark-mode .swap-button-light:hover .btn-text {
    color: var(--color-dark);
}

body.dark-mode .card li {
    color: var(--color-muted);
}

body.dark-mode .red-banner-strip .swap-button-light {
    border: 2px solid var(--color-dark);
    background-color: var(--color-dark);
}

body.dark-mode .red-banner-strip .swap-button-light:hover {
    border: 2px solid var(--color-bg-card);
    background-color: var(--color-bg-card);
}

body.dark-mode .red-banner-strip .swap-button-light .btn-text {
    color: var(--color-white);
}

body.dark-mode .red-banner-strip .swap-button-light .btn-icon {
    background-color: var(--color-red) !important;
    color: var(--color-dark);
}

body.dark-mode .red-banner-strip .swap-button-light:hover .btn-text {
    color: var(--color-dark);
}

body.dark-mode .red-banner-strip .swap-button-light:hover .btn-icon {
    background-color: var(--color-red) !important;
    color: var(--color-dark);
}

body.dark-mode .laptop-mockup {
    background: var(--color-bg-card);
    border-color: var(--border-light);
    box-shadow: 0 15px 40px var(--box-shadow-color);
}

body.dark-mode .process-flow-col .process-icon-outer,
body.dark-mode .process-flow-col:hover .process-icon-outer {
    color: var(--color-dark);
}

body.dark-mode .scroll-top-progress-wrap {
    background: rgb(34 34 34 / 46%);
}

body.dark-mode .footer-nav-bottom-strip {
    background-color: var(--color-bg-card);
}

body.dark-mode .hero-status-badge {
    color: var(--color-dark);
}

body.dark-mode .capability-box {
    background-color: var(--color-bg-card) !important;
}

body.dark-mode .mock-slider-btn:hover {
    color: var(--color-dark);
}

body.dark-mode .capability-box::after,
body.dark-mode .contact-meta-card::before {
    background: linear-gradient(135deg, var(--color-red), #000000, var(--color-red));
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: borderSpin 5s linear infinite;
}

/* --- Cookie Consent Override --- */
body.dark-mode .cookie-popup {
    background: rgba(28, 28, 30, 0.95) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
}

body.dark-mode .cookie-btn-reject {
    background-color: var(--color-bg-card);
    border-color: var(--color-red);
    color: var(--color-text-title);
}

body.dark-mode .cookie-btn-reject:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--color-red);
}

/* --- Lightbox Modal --- */
body.dark-mode .custom-modal-content {
    background-color: var(--color-white) !important;
    border-color: var(--border-light) !important;
}

body.dark-mode .lightbox-modal-img {
    background-color: var(--color-white);
    border-color: var(--border-light);
}

body.dark-mode .pill-badge {
    background-color: var(--color-bg-card);
    border-color: var(--border-light);
    color: var(--color-dark);
}

body.dark-mode .pill-badge:hover {
    background-color: var(--color-red) !important;
    border-color: var(--color-red) !important;
    color: var(--color-dark) !important;
}

body.dark-mode .popup-modal-card {
    background-color: var(--color-bg-card) !important;
    box-shadow: 0 15px 40px var(--box-shadow-color);
}

body.dark-mode .pill-badge {
    background-color: var(--color-bg-card);
    border-color: var(--color-bg-card);
    color: var(--color-dark);
}

body.dark-mode .section-dark {
    background-color: var(--color-bg-card);
}

body.dark-mode swiper-slide p {
    color: var(--color-white);
}

body.dark-mode .footer-social-box {
    color: var(--color-dark) !important;
}

body.dark-mode .modal-footer {
    border-color: var(--color-bg-card) !important;
}

body.dark-mode .contact-meta-card {
    background-color: var(--color-bg-card) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #737373;
    opacity: 1;
}

body.dark-mode .contact-meta-icon {
    background-color: var(--color-white);
    color: var(--color-dark);
}

body.dark-mode .lightbox-nav-btn:hover {
    color: var(--color-dark) !important;
}

body.dark-mode .portfolio-item .gallery-hover-overlay {
    background: linear-gradient(45deg,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 0, 0, 0.3) 49%,
            rgba(255, 255, 255, 0.5) 51%,
            rgba(0, 0, 0, 0.3) 54%,
            rgba(0, 0, 0, 0.3) 100%);
    background-size: 300% 300%;
    animation: gradient 3.5s ease infinite;
}

body.dark-mode .btn-nav-contact,
body.dark-mode .offcanvas-title {
    color: var(--color-dark);
}

body.dark-mode button.btn-close.text-reset {
    filter: invert(1) hue-rotate(180deg);
}

body.dark-mode .cookie-btn-accept {
    background-color: var(--color-red);
    color: var(--color-dark);
}

body.dark-mode .card-hover:hover .cs-research-icon,
body.dark-mode .card-hover:hover .cs-feature-icon,
body.dark-mode .cs-step-node:hover .cs-step-circle,
body.dark-mode .cs-process-node:hover .cs-process-circle {
    color: var(--color-dark);
}

@media (max-width: 768px) {
    body.dark-mode .offcanvas {
        background-color: var(--color-bg-card) !important;
    }
}