/* ========================================
   DARK MODE STYLESHEET
   Nissa Express - Modern Dark Theme
   ======================================== */

/* ========== GLOBAL DARK MODE STYLES ========== */

[data-theme="dark"] body {
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* ========== SECTION BACKGROUNDS ========== */

[data-theme="dark"] section {
    background: var(--bg-primary);
}

[data-theme="dark"] .section-bg-light {
    background: var(--bg-secondary);
}

/* ========== CARDS & CONTAINERS ========== */

[data-theme="dark"] .card,
[data-theme="dark"] .box,
[data-theme="dark"] .info-card,
[data-theme="dark"] .feature-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

/* ========== TEXT COLORS ========== */

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--text-primary);
}

[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] li {
    color: var(--text-secondary);
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] .subtitle {
    color: var(--text-secondary);
}

/* ========== FORMS ========== */

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    background: var(--bg-primary);
    border-color: var(--orange-primary);
}

/* ========== BUTTONS ========== */

[data-theme="dark"] .btn-outline,
[data-theme="dark"] .btn-secondary {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-outline:hover,
[data-theme="dark"] .btn-secondary:hover {
    background: var(--orange-primary);
    color: white;
    border-color: var(--orange-primary);
}

/* ========== FOOTER ========== */

[data-theme="dark"] .footer__bg {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

[data-theme="dark"] .footer__bottom {
    background: var(--bg-primary);
}

[data-theme="dark"] .copyright__content {
    color: var(--text-secondary);
}

/* ========== HOMEPAGE SPECIFIC ========== */

/* Hero Slider */
[data-theme="dark"] .hero-slider-nav {
    background: rgba(30, 36, 51, 0.8);
    border-color: var(--border-color);
}

[data-theme="dark"] .hero-slider-nav:hover {
    background: rgba(242, 101, 34, 0.9);
    border-color: var(--orange-primary);
}

/* Stats Section */
[data-theme="dark"] .stats-wrapper {
    background: var(--bg-secondary);
}

[data-theme="dark"] .stat-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .stat-number {
    color: var(--orange-primary);
}

[data-theme="dark"] .stat-label {
    color: var(--text-secondary);
}

/* About Section */
[data-theme="dark"] .about-section {
    background: var(--bg-primary);
}

[data-theme="dark"] .floating-badge {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .badge-number {
    color: var(--orange-primary);
}

/* Features Section */
[data-theme="dark"] .feature-box {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .feature-box:hover {
    background: var(--bg-secondary);
}

/* Services Section */
[data-theme="dark"] .service-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .service-title {
    color: var(--text-primary);
}

[data-theme="dark"] .service-description {
    color: var(--text-secondary);
}

/* Testimonials */
[data-theme="dark"] .testimonial-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .testimonial-text {
    color: var(--text-secondary);
}

[data-theme="dark"] .testimonial-author {
    color: var(--text-primary);
}

/* ========== TRACKING PAGE SPECIFIC ========== */

/* How to Track Section */
[data-theme="dark"] .how-to-track {
    background: var(--bg-secondary);
}

[data-theme="dark"] .how-to-track h2 {
    color: var(--text-primary);
}

[data-theme="dark"] .step-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .step-number {
    background: linear-gradient(135deg, var(--orange-primary), var(--orange-secondary));
    color: white;
}

[data-theme="dark"] .step-card h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .step-card p {
    color: var(--text-secondary);
}

/* Summary Grid */
[data-theme="dark"] .summary-item {
    background: transparent;
}

[data-theme="dark"] .summary-item label {
    color: var(--text-secondary);
}

[data-theme="dark"] .summary-item .value {
    color: var(--text-primary);
}

/* Support Banner */
[data-theme="dark"] .support-banner {
    background: var(--bg-hero);
}

[data-theme="dark"] .support-banner h5 {
    color: white;
}

[data-theme="dark"] .support-banner p {
    color: var(--text-light);
}

/* ========== KALKULASI PAGE ========== */

[data-theme="dark"] .kalkulasi-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .price-result {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* ========== CONTACT PAGE ========== */

[data-theme="dark"] .contact-info-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .contact-icon {
    background: linear-gradient(135deg, var(--orange-primary), var(--orange-secondary));
}

[data-theme="dark"] .contact-title {
    color: var(--text-primary);
}

[data-theme="dark"] .contact-text {
    color: var(--text-secondary);
}

/* ========== BLOG PAGE ========== */

[data-theme="dark"] .blog-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .blog-title {
    color: var(--text-primary);
}

[data-theme="dark"] .blog-excerpt {
    color: var(--text-secondary);
}

[data-theme="dark"] .blog-meta {
    color: var(--text-secondary);
}

/* ========== MODALS & OVERLAYS ========== */

[data-theme="dark"] .modal-content {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .modal-header {
    background: var(--bg-secondary);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .modal-footer {
    background: var(--bg-secondary);
    border-top-color: var(--border-color);
}

/* ========== NAVIGATION ========== */

[data-theme="dark"] .offcanvas__header {
    background: var(--bg-card);
}

[data-theme="dark"] .offcanvas__inner {
    background: var(--bg-primary);
}

[data-theme="dark"] .offcanvas__menu_ul li a {
    color: var(--text-primary);
}

[data-theme="dark"] .offcanvas__menu_ul li a:hover {
    color: var(--orange-primary);
}

/* Mobile Menu */
[data-theme="dark"] .mobile-menu {
    background: var(--bg-card);
}

[data-theme="dark"] .mobile-menu-item {
    border-bottom-color: var(--border-color);
}

/* ========== TABLES ========== */

[data-theme="dark"] table {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] th {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] td {
    color: var(--text-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] tr:hover {
    background: var(--bg-secondary);
}

/* ========== ALERTS & NOTIFICATIONS ========== */

[data-theme="dark"] .alert {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .alert-info {
    background: rgba(58, 90, 140, 0.2);
    border-color: var(--navy-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .alert-success {
    background: rgba(40, 167, 69, 0.2);
    border-color: #28a745;
}

[data-theme="dark"] .alert-warning {
    background: rgba(255, 193, 7, 0.2);
    border-color: #ffc107;
}

[data-theme="dark"] .alert-danger {
    background: rgba(220, 53, 69, 0.2);
    border-color: #dc3545;
}

/* ========== SCROLL TO TOP BUTTON ========== */

[data-theme="dark"] #scroll__top {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] #scroll__top:hover {
    background: var(--orange-primary);
    border-color: var(--orange-primary);
    color: white;
}

/* ========== LOADING & SPINNERS ========== */

[data-theme="dark"] .spinner-border {
    border-color: var(--border-color);
    border-right-color: transparent;
}

[data-theme="dark"] .loading-overlay {
    background: rgba(15, 20, 25, 0.9);
}

/* ========== IMAGES & MEDIA ========== */

[data-theme="dark"] img {
    opacity: 0.95;
}

[data-theme="dark"] img:hover {
    opacity: 1;
}

/* ========== RESPONSIVE ADJUSTMENTS ========== */

@media (max-width: 768px) {
    [data-theme="dark"] .dark-mode-toggle {
        width: 40px;
        height: 40px;
    }
    
    [data-theme="dark"] .dark-mode-toggle svg {
        width: 20px;
        height: 20px;
    }
}

/* ========== SMOOTH TRANSITIONS ========== */

[data-theme="dark"] * {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Exclude specific elements from transition */
[data-theme="dark"] *:is(
    .swiper-slide,
    .hero-slider-wrapper,
    video,
    iframe,
    canvas
) {
    transition: none;
}

/* ========== PRINT MEDIA (Light Mode for Printing) ========== */

@media print {
    [data-theme="dark"] body {
        background: white !important;
        color: black !important;
    }
    
    [data-theme="dark"] * {
        background: white !important;
        color: black !important;
        border-color: #000 !important;
    }
}
