/* Dark mode styles */
[data-theme="dark"] body {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .main-content {
    background-color: #1e1e1efc !important;
}

[data-theme="dark"] .chess-board {
    border: 2px solid #444;
}

/* Preserve board color settings from localStorage in dark mode - keep original colors */
/* The board colors should remain as selected by the user regardless of theme */
/* Only the CSS variables will be overridden to provide dark mode variants */
[data-theme="dark"] {
    /* Keep original board colors but make them work well in dark mode context */
    /* These will be overridden by JavaScript if needed */
}

/* Board colors are handled by CSS variables, so we don't override them here */
/* The board will keep the user's selected color in both light and dark modes */

[data-theme="dark"] .selected {
    background-color: rgba(255, 253, 150, 0.849) !important; /* Same light yellow as light theme */
}

[data-theme="dark"] .possible-move::after {
    background-color: rgba(50, 50, 50, 0.4) !important;
}

/* On mobile devices, make the possible move indicators larger for better visibility in dark theme */
@media (max-width: 767px) {
    [data-theme="dark"] .possible-move::after {
        width: 40%;
        height: 40%;
    }
}

[data-theme="dark"] .possible-capture::before {
    border-color: rgba(220, 53, 69, 0.6) !important;
}

/* On mobile devices, make the possible capture indicators larger for better visibility in dark theme */
@media (max-width: 767px) {
    [data-theme="dark"] .possible-capture::before {
        border-width: 5px;
    }
}



[data-theme="dark"] .history {
    background: #3a3a3a !important;
    border: 1px solid #555 !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .alert {
    background-color: #3a3a3a !important;
    border-color: #555 !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .status-combined-box {
    background-color: #3a3a3a !important;
    border-color: #555 !important;
    color: #e0e0e0 !important;
}

/* Make status labels more visible in dark mode */
[data-theme="dark"] .status-item strong {
    color: #e0e0e0 !important;
}

/* Make history label more visible in dark mode */
[data-theme="dark"] .controls h5 {
    color: #e0e0e0 !important;
}

/* Make site-info text more visible in dark mode */
[data-theme="dark"] .site-info p {
    color: #cccccc !important;
}

/* Dark theme for small action buttons */
[data-theme="dark"] .small-action-btn {
    background-color: #454d55 !important;
    border-color: #454d55 !important;
    color: white !important;
}

[data-theme="dark"] .btn-warning {
    background-color: #6b8e23 !important;
    border-color: #6b8e23 !important;
    color: white !important;
}

[data-theme="dark"] .btn-danger {
    background-color: #757575 !important;
    border-color: #757575 !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .btn-secondary {
    background-color: #5a6268 !important;
    border-color: #5a6268 !important;
}

/* Additional dark theme button styles */
[data-theme="dark"] .btn-primary {
    background-color: #495057 !important;
    border-color: #495057 !important;
}

[data-theme="dark"] .btn-success {
    background-color: #286028 !important;
    border-color: #286028 !important;
}

[data-theme="dark"] .btn-info {
    background-color: #497ea6 !important;
    border-color: #497ea6 !important;
}

[data-theme="dark"] .btn-light {
    background-color: #8a9ba8 !important;
    border-color: #8a9ba8 !important;
    color: #121212 !important;
}

/* Dark theme styles for range sliders */
[data-theme="dark"] .form-range {
    background: #4a4a4a !important;
}

[data-theme="dark"] .form-range::-webkit-slider-thumb {
    background: #8a9ba8 !important;
}

[data-theme="dark"] .form-range::-webkit-slider-thumb:hover {
    background: #a0b3c6 !important;
}

[data-theme="dark"] .form-range::-moz-range-thumb {
    background: #8a9ba8 !important;
}

[data-theme="dark"] .form-range::-moz-range-thumb:hover {
    background: #a0b3c6 !important;
}

[data-theme="dark"] .form-range::-webkit-slider-runnable-track {
    background: #4a4a4a !important;
}

[data-theme="dark"] .form-range::-moz-range-track {
    background: #4a4a4a !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: #3a3a3a !important;
    border: 1px solid #555 !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: #3a3a3a !important;
    border: 1px solid #777 !important;
    color: #e0e0e0 !important;
    box-shadow: 0 0 0 0.2rem rgba(100, 100, 100, 0.25) !important;
}

[data-theme="dark"] .modal-content {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border: 1px solid #555 !important;
}

[data-theme="dark"] .modal-header {
    background-color: #2d2d2d !important;
    border-bottom: 1px solid #555 !important;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

[data-theme="dark"] .modal-footer {
    background-color: #2d2d2d !important;
    border-top: 1px solid #555 !important;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

[data-theme="dark"] .modal-title {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .promotion-content,
[data-theme="dark"] .game-over-content {
    background: #343a40 !important; /* Dark background for dark mode */
    color: #e9ecef !important; /* Light text for contrast */
    border: 1px solid #495057 !important; /* Darker border */
}

[data-theme="dark"] .promotion-piece {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .promotion-piece:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

[data-theme="dark"] .game-over-content .close-btn {
    color: white;
    background: rgba(255,255,255,0.2) !important;
}

[data-theme="dark"] .game-over-content .close-btn:hover {
    background: rgba(255,255,255,0.3) !important;
}

/* Update close button for dark mode to ensure visibility */
[data-theme="dark"] .promotion-content .close-btn,
[data-theme="dark"] .game-over-content .close-btn {
    color: white !important;
    background: rgba(255,255,255,0.2) !important;
}

[data-theme="dark"] .promotion-content .close-btn:hover,
[data-theme="dark"] .game-over-content .close-btn:hover {
    background: rgba(255,255,255,0.3) !important;
}

/* Ensure promotion content also follows the same dark theme */
[data-theme="dark"] .promotion-content {
    background: #343a40 !important; /* Dark background for dark mode */
    color: #e9ecef !important; /* Light text for contrast */
    border: 1px solid #495057 !important; /* Darker border */
}

[data-theme="dark"] .promotion-piece {
    background: rgba(100, 100, 100, 0.2) !important;
    border: 2px solid rgba(150, 150, 150, 0.4) !important;
}

[data-theme="dark"] .promotion-piece:hover {
    background: rgba(120, 120, 120, 0.3) !important;
    border-color: rgba(180, 180, 180, 0.6) !important;
}

[data-theme="dark"] .piece-white {
    color: #ffffff !important; /* White for light pieces in dark mode */
    text-shadow:
        1px 1px 1px rgba(0, 0, 0, 0.7),
        -1px -1px 1px rgba(0, 0, 0, 0.7),
        1px -1px 1px rgba(0, 0, 0, 0.7),
        -1px 1px 1px rgba(0, 0, 0, 0.7) !important;
}

[data-theme="dark"] .piece-black {
    color: #000000 !important; /* Using white instead of black for contrast */
}

[data-theme="dark"] .search-progress {
    background: #3a3a3a !important;
}

[data-theme="dark"] .eval-bar {
    background: linear-gradient(to right, #b71c1c, #f57f17, #33691e) !important;
}

[data-theme="dark"] .move-analysis {
    background: #3a3a3a !important;
    border: 1px solid #555 !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .editor-tools {
    background: #3a3a3a !important;
    border: 1px solid #555 !important;
}

[data-theme="dark"] .editor-tool {
    background: #4a4a4a !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .editor-tool:hover {
    background: #5a5a5a !important;
}

[data-theme="dark"] .editor-tool.active {
    border-color: #5c9dea !important;
    background: #2a3a5a !important;
}

[data-theme="dark"] .editor-piece-option {
    background: #4a4a4a !important;
    border: 1px solid #666 !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .editor-piece-option:hover {
    background: #5a5a5a !important;
    border-color: #5c9dea !important;
}

[data-theme="dark"] .editor-color-option.white {
    background: #3a3a3a !important;
    border-color: #666 !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .color-options {
    background: #3a3a3a !important;
    border: 1px solid #555 !important;
}

[data-theme="dark"] .color-option:hover {
    background: #5a5a5a !important;
}

[data-theme="dark"] .footer {
    background: linear-gradient(135deg, #242a30 0%, #394047 100%) !important;
    color: #e0e0e0 !important;
}

/* Dark mode button styles */
[data-theme="dark"] .btn-primary {
    background-color: #5a6268 !important;
    border-color: #5a6268 !important;
}

[data-theme="dark"] .btn-primary:hover {
    background-color: #4a5258 !important;
    border-color: #444b52 !important;
}

[data-theme="dark"] .btn-success {
    background-color: #3d8b40 !important;
    border-color: #3d8b40 !important;
}

[data-theme="dark"] .btn-success:hover {
    background-color: #347834 !important;
    border-color: #347834 !important;
}

[data-theme="dark"] .btn-warning {
    background-color: #7baf3a !important;
    border-color: #7baf3a !important;
}

[data-theme="dark"] .btn-warning:hover {
    background-color: #6a9a32 !important;
    border-color: #6a9a32 !important;
}

[data-theme="dark"] .btn-danger {
    background-color: #7a7a7a !important;
    border-color: #7a7a7a !important;
}

[data-theme="dark"] .btn-danger:hover {
    background-color: #606060 !important;
    border-color: #606060 !important;
}

[data-theme="dark"] .btn-info {
    background-color: #5c7ba3 !important;
    border-color: #5c7ba3 !important;
}

[data-theme="dark"] .btn-info:hover {
    background-color: #4a6585 !important;
    border-color: #4a6585 !important;
}

[data-theme="dark"] .btn-secondary {
    background-color: #788da3 !important;
    border-color: #788da3 !important;
}

[data-theme="dark"] .btn-secondary:hover {
    background-color: #657a90 !important;
    border-color: #657a90 !important;
}

[data-theme="dark"] .btn-light {
    background-color: #b0c4de !important;
    border-color: #b0c4de !important;
    color: #1a1a1a !important;
}

[data-theme="dark"] .btn-light:hover {
    background-color: #9ab0cc !important;
    border-color: #9ab0cc !important;
}

[data-theme="dark"] .btn-dark {
    background-color: #5c707a !important;
    border-color: #5c707a !important;
}

[data-theme="dark"] .btn-dark:hover {
    background-color: #4a5d67 !important;
    border-color: #4a5d67 !important;
}

[data-theme="dark"] .btn-outline-primary {
    color: #6c757d !important;
    border-color: #6c757d !important;
}

[data-theme="dark"] .btn-outline-primary:hover {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #121212 !important;
}

[data-theme="dark"] .btn-outline-secondary {
    color: #90A4AE !important;
    border-color: #90A4AE !important;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: #90A4AE !important;
    border-color: #90A4AE !important;
    color: #121212 !important;
}

[data-theme="dark"] .btn-outline-success {
    color: #4CAF50 !important;
    border-color: #4CAF50 !important;
}

[data-theme="dark"] .btn-outline-success:hover {
    background-color: #4CAF50 !important;
    border-color: #4CAF50 !important;
    color: #121212 !important;
}

[data-theme="dark"] .btn-outline-warning {
    color: #8BC34A !important;
    border-color: #8BC34A !important;
}

[data-theme="dark"] .btn-outline-warning:hover {
    background-color: #8BC34A !important;
    border-color: #8BC34A !important;
    color: #121212 !important;
}

[data-theme="dark"] .btn-outline-danger {
    color: #9E9E9E !important;
    border-color: #9E9E9E !important;
}

[data-theme="dark"] .btn-outline-danger:hover {
    background-color: #9E9E9E !important;
    border-color: #9E9E9E !important;
    color: #121212 !important;
}

/* Dark theme styles for right sidebar */
[data-theme="dark"] .right-sidebar {
    background-color: #1e1e1e !important;
    border-left: 1px solid #000000;
}

[data-theme="dark"] .logo-area h3 {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .sticky-header {
    background-color: #1e1e1e !important;
}

[data-theme="dark"] .settings-btn {
    color: #e0e0e0 !important;
}

/* Ensure theme toggle icon is monochrome in dark mode */
[data-theme="dark"] #dark-mode-toggle i {
    filter: grayscale(100%) brightness(1.3);
}

/* Custom scrollbar styling for dark mode */
[data-theme="dark"] .controls-container::-webkit-scrollbar-track {
    background: #2d2d2d;
}

[data-theme="dark"] .controls-container::-webkit-scrollbar-thumb {
    background: #555555;
}

[data-theme="dark"] .controls-container::-webkit-scrollbar-thumb:hover {
    background: #666666;
}

/* For Firefox in dark mode */
[data-theme="dark"] .controls-container {
    scrollbar-color: #555555 #2d2d2d;
}

[data-theme="dark"] .site-info p {
    color: #aaa !important;
}

/* Dark theme for close buttons */
[data-theme="dark"] .close-btn {
    background: rgba(200, 200, 200, 0.2) !important;
    color: #e0e0e0 !important;
    top: 10px !important;
    right: 10px !important;
}

[data-theme="dark"] .close-btn:hover {
    background: rgba(200, 200, 200, 0.3) !important;
    color: white !important;
}

[data-theme="dark"] .close-btn i {
    color: inherit !important;
}

[data-theme="dark"] .modal-content .close-btn {
    background: none !important;
    color: #ccc !important;
    top: 10px !important;
    right: 10px !important;
    width: 30px !important;
    height: 30px !important;
}

[data-theme="dark"] .modal-content .close-btn:hover {
    color: white !important;
}

[data-theme="dark"] .modal-content .close-btn i {
    color: inherit !important;
}

/* Dark theme for mobile menu */
[data-theme="dark"] .burger-menu-btn {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .burger-menu-btn:hover {
    color: white !important;
}

/* Dark theme for edit position button */
[data-theme="dark"] #edit-position {
    background-color: #5a6268 !important;
    border-color: #5a6268 !important;
    color: white !important;
}

/* Dark theme for color selection radio buttons in modal */
[data-theme="dark"] .color-modal-container {
    background-color: #3a3a3a !important;
    border: 1px solid #555 !important;
    border-radius: 8px;
    padding: 15px;
}

[data-theme="dark"] .color-modal-option {
    background-color: #4a4a4a !important;
    border: 2px solid #555 !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .color-modal-option:hover {
    background-color: #5a5a5a !important;
    border-color: #777 !important;
}

[data-theme="dark"] .color-modal-option.selected {
    background-color: #5c7ba3 !important;
    border-color: #5c9dea !important;
    box-shadow: 0 0 0 3px rgba(92, 157, 234, 0.3) !important;
}

/* Theme-dependent icon colors */
/* In light theme, icons will be dark (default), in dark theme, icons will be light */
[data-theme="dark"] svg path {
    fill: #e0e0e0 !important;
}

[data-theme="light"] svg path,
body:not([data-theme]) svg path {
    fill: #333333 !important;
}

/* Ensure selection is disabled in dark theme as well */
[data-theme="dark"] * {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}

/* Allow selection in form elements even in dark theme */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] pre,
[data-theme="dark"] code,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    -webkit-user-select: text !important; /* Safari */
    -moz-user-select: text !important; /* Firefox */
    -ms-user-select: text !important; /* IE10+/Edge */
    user-select: text !important; /* Standard */
}