/* Auto Dark Mode - only applies when theme is set to auto */
@media (prefers-color-scheme: dark) {
    body.theme-auto {
        background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 50%, #0f0f0f 100%) !important;
        color: #e8e8e8 !important;
    }
    
    h1 {
        color: #ffffff !important;
    }
    
    #hamburger-menu {
        background: rgba(60, 60, 60, 0.8);
        color: #ffffff;
    }
    
    #hamburger-menu:hover {
        background: rgba(80, 80, 80, 0.9);
    }
    
    .damodara-description {
        background: transparent !important;
    }
    
    .damodara-desc-source,
    .damodara-desc-quote {
        color: #d4d4d4;
    }
    
    .damodara-desc-ref {
        color: #a8a8a8;
    }
    
    .verse-section {
        background: transparent !important;
    }
    
    .verse-title {
        color: #ffffff !important;
        background: transparent !important;
    }
    
    .container {
        background: rgba(20, 20, 20, 0.95) !important;
        border: 1px solid rgba(255, 255, 255, 0.04);
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.02);
    }

    /* Table layout: keep separators subtle but visible on dark backgrounds */
    table {
        background: transparent;
        width: 100%;
        border-collapse: collapse;
    }

    /* Default row divider for content rows (not separator rows) */
    tbody tr:not(.separator) td {
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        padding: 12px 24px !important;
    }
    
    td {
        color: #e0e0e0 !important;
        padding: 12px 24px;
    }
    
    td:nth-child(1) {
        color: #ffffff !important;
    }
    
    td strong {
        color: #ffffff !important;
    }
    
    .word {
        color: #ffffff !important;
        font-weight: 500 !important;
    }
    
    .translation {
        color: #c8c8c8 !important;
    }
    
    .separator {
        background: transparent !important;
    }

    /* visible spacer row */
    tr.separator td {
        height: 6px;
        padding: 0;
        background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.035)) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), inset 0 -1px 0 rgba(0,0,0,0.22);
        border-bottom: none !important;
    }

    /* accent spacer for the second part */
    tr.separator.secondPart td {
        height: 7px;
        padding: 0;
        background: linear-gradient(90deg, rgba(102, 126, 234, 0.16) 0%, rgba(118, 75, 162, 0.16) 100%) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
        border-bottom: none !important;
    }
    
    body.theme-auto .simple-sanskrit {
        color: #ffffff !important;
        background: rgba(102, 126, 234, 0.2) !important;
        padding: 12px 24px !important;
    }
    body.simple-view .full-translation {padding-top:12px;padding-bottom:18px;}
    
    .full-translation {
        color: #e8e8e8 !important;
        background: rgba(118, 75, 162, 0.2) !important;border:none;
    }
    
    .audio-play-btn {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: #ffffff;
    }
    
    .audio-play-btn:hover {
        background: linear-gradient(135deg, #7b8ff0, #8a5db8);
    }
    
    .damodara-audio audio {
        filter: invert(0.92) hue-rotate(180deg);
    }
    
    .font-controls button {
        background: rgba(70, 70, 70, 0.8);
        color: #e8e8e8;
    }
    
    .font-controls button:hover {
        background: rgba(90, 90, 90, 0.9);
    }
    
    .font-controls button.active {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: #ffffff;
    }
    
    .menu-overlay {
        background: rgba(0, 0, 0, 0.9);
    }
    
    .menu-content {
        background: rgba(20, 20, 20, 0.98);
    }
    
    body.theme-auto .menu-content h2, 
    body.theme-auto #menu-list A {
        color: #ffffff !important;
    }
    
    .menu-content button {
        background: rgba(102, 126, 234, 0.25);
        color: #e8e8e8;
    }
    
    .menu-content button:hover,
    .menu-content button:active {
        background: rgba(102, 126, 234, 0.4);
    }
    
    .close-menu {
        color: #b8b8b8;
    }
    
    .close-menu:hover {
        color: #ffffff;
    }
    
    .navigation-section {
        border:none;
        background:none;
    }
    
    
    /* Better image visibility in dark mode */
    .damodara-slider img {
        opacity: 0.95;
    }
    
    .damodara-slider img:hover {
        opacity: 1;
    }
    }
}