/**
 * MixterPlus Light Mode
 * Applied when body has class 'light-mode'
 */

body.light-mode {
    --mp-bg-dark: #ffffff;
    --mp-bg-sidebar: #f5f5f5;
    --mp-bg-input: #ffffff;
    --mp-text: #222222;
    --mp-text-muted: #666666;
    --mp-border: #dddddd;
}

/* Light mode specific overrides */
body.light-mode {
    background-color: #ffffff;
    color: #222222;
}

/* Sidebar navigation - button-like with blue background, white bold text */
body.light-mode .mp-sidebar-nav li {
    padding: 0.25rem 1rem;
}

body.light-mode .mp-sidebar-nav li a {
    display: block;
    background-color: #518BA1;
    color: #fff;
    font-weight: 700;
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

body.light-mode .mp-sidebar-nav li a:hover {
    background-color: #3d6a7a;
    color: #fff;
    text-decoration: none;
}

body.light-mode .mp-sidebar-nav li a.active {
    background-color: #3d6a7a;
    color: #fff;
}

/* Sidebar search in light mode */
body.light-mode .mp-nav-search input[type="text"] {
    background-color: #fff;
    border-color: #ccc;
    color: #222;
}

body.light-mode .mp-nav-search button {
    background-color: #518BA1;
    color: #fff;
}

/* Sidebar user info in light mode */
body.light-mode .mp-nav-user {
    color: #444;
}

/* Submenu items in light mode */
body.light-mode .mp-nav-submenu {
    background-color: rgba(0, 0, 0, 0.05);
}

body.light-mode .mp-nav-submenu li {
    padding: 0.15rem 0.5rem;
}

body.light-mode .mp-nav-submenu li a {
    background-color: #6aa3b7;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}

body.light-mode .mp-nav-submenu li a:hover {
    background-color: #518BA1;
}

body.light-mode .mp-nav-submenu .thumbsimg {
    filter: brightness(0) invert(1);
}

/* Support link in light mode */
body.light-mode .mp-nav-support a {
    background-color: #E77D42 !important;
}

body.light-mode .mp-nav-support a:hover {
    background-color: #d56a2f !important;
}

/* Plain nav items (Playlist, Dashboard, etc.) - black on white */
body.light-mode .mp-sidebar-nav li.mp-nav-plain a {
    margin: .1rem;
    background-color: #fff;
    color: #222;
    font-weight: 600;
    border-radius: 8px;
}

body.light-mode .mp-sidebar-nav li.mp-nav-plain a:hover {
    background-color: #eee;
    color: #000;
}

/* Utility links in light mode - plain text links */
body.light-mode .mp-nav-utils {
    color: #444;
    border-top-color: #ddd;
    background-color: transparent;
    padding: 0.75rem 1.25rem;
}

body.light-mode .mp-nav-utils a {
    color: #E77D42;
    background: none !important;
    padding: 0;
    font-weight: normal;
    border-radius: 0;
    display: inline;
}

/* Buttons - bold white text on accent colors */
body.light-mode button,
body.light-mode input[type="submit"],
body.light-mode .btn {
    background-color: var(--mp-accent);
    color: #fff;
    font-weight: 700;
}

body.light-mode button:hover,
body.light-mode input[type="submit"]:hover,
body.light-mode .btn:hover {
    background-color: var(--mp-accent-hover);
}

/* Edit and admin buttons - orange */
body.light-mode .track-actions .btn.edit-btn,
body.light-mode .track-actions .btn.admin-btn {
    background-color: var(--mp-link);
    color: #fff;
    font-weight: 700;
}

body.light-mode .track-actions .btn.edit-btn:hover,
body.light-mode .track-actions .btn.admin-btn:hover {
    background-color: var(--mp-link-hover);
}

/* Links stay orange */
body.light-mode a {
    color: var(--mp-link);
}

body.light-mode a:hover {
    color: var(--mp-link-hover);
}

/* Sidebar toggle button */
body.light-mode .mp-sidebar-toggle {
    background-color: var(--mp-accent);
    color: #fff;
    font-weight: 700;
}

/* Sidebar background */
body.light-mode .mp-sidebar {
    background-color: #f5f5f5;
    border-right-color: #dddddd;
}

body.light-mode .mp-sidebar-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-bottom-color: #16213e;
}

/* Main content area */
body.light-mode .mp-main {
    background-color: #ffffff;
}

body.light-mode .mp-content {
    background-color: #ffffff;
    padding: .2rem 0rem .2rem 2rem; 

}

/* Forms and inputs */
body.light-mode input,
body.light-mode select,
body.light-mode textarea {
    background-color: #ffffff;
    color: #222222;
    border-color: #cccccc;
}

body.light-mode input:focus,
body.light-mode select:focus,
body.light-mode textarea:focus {
    border-color: var(--mp-accent);
}

/* Page help box */
body.light-mode .pageHelp {
    background-color: #f0f7fa;
    border-left-color: var(--mp-accent);
}

body.light-mode .pageHelp-current {
    color: #222;
}

/* File rows */
body.light-mode .file-row {
    background-color: #f5f5f5;
    border-color: #dddddd;
}

/* Drop area */
body.light-mode #drop-area {
    background-color: rgba(81, 139, 161, 0.05);
    border-color: var(--mp-accent);
}

body.light-mode #drop-area:hover {
    background-color: rgba(81, 139, 161, 0.1);
}

/* Progress bar */
body.light-mode #progress-bar {
    background-color: #eeeeee;
    border-color: #dddddd;
}

/* Footer */
body.light-mode .mp-footer {
    border-top-color: #dddddd;
    color: #666666;
}

/* Flash messages - keep readable */
body.light-mode .flash-success {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}

body.light-mode .flash-error {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

body.light-mode .flash-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border-color: #bee5eb;
}

body.light-mode .flash-warning {
    background-color: #fff3cd;
    color: #856404;
    border-color: #ffeeba;
}

/* Headings */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6 {
    color: #222222;
}

body.light-mode h3.pageTitle {
    color: #222222;
}

/* Track detail elements */
body.light-mode .track-header {
    color: #222222;
}

body.light-mode .track-artist,
body.light-mode .track-meta {
    color: #666666;
}

/* Comments */
body.light-mode .single_comment {
    background: rgba(0,0,0,0.03);
    border-color: #ddd;
}

body.light-mode .comment-meta {
    color: #666;
}

body.light-mode .single_comment .comment-text {
    color: #333;
}

body.light-mode .comment-form textarea {
    background: #fff;
    border-color: #ccc;
    color: #333;
}

/* Tables */
body.light-mode .files-table th {
    background-color: #f5f5f5;
    color: #222222;
}

body.light-mode .files-table td {
    border-color: #dddddd;
}

/* Track cards */
body.light-mode .track-card {
    background-color: #f5f5f5;
    border-color: #dddddd;
}

body.light-mode .track-card:hover {
    background-color: #eeeeee;
}

/* Theme toggle button styling */
.theme-toggle-container {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--mp-border);
    margin-top: auto;
}

.theme-toggle-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background-color: var(--mp-bg-input);
    border: 1px solid var(--mp-border);
    border-radius: 4px;
    color: var(--mp-text);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.theme-toggle-btn:hover {
    background-color: var(--mp-accent);
    color: #fff;
    border-color: var(--mp-accent);
}

.theme-toggle-btn .theme-icon {
    font-size: 1.1rem;
}

body.light-mode .theme-toggle-btn {
    background-color: #ffffff;
    border-color: #cccccc;
    color: #222222;
}

body.light-mode .theme-toggle-btn:hover {
    background-color: var(--mp-accent);
    color: #fff;
    border-color: var(--mp-accent);
}

/* Split nav (Playlist arrow toggle) */
body.light-mode .mp-nav-split {
    background-color: #fff;
}
body.light-mode .mp-nav-split-link {
    color: #222 !important;
}
body.light-mode .mp-nav-split-link:hover {
    background-color: #eee !important;
}
body.light-mode .mp-nav-split-arrow {
    color: #888 !important;
}
body.light-mode .mp-nav-split-arrow:hover {
    background-color: #eee !important;
    color: #222 !important;
}

/* Playlist picker popup */
body.light-mode .playlistPickerOverlay {
    background: #fff;
    border-color: #ccc;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
body.light-mode .playlistPickerOverlay .pickerItem {
    color: var(--mp-link);
}
body.light-mode .playlistPickerOverlay .pickerNewRow {
    border-top-color: #ddd;
}
body.light-mode .playlistPickerOverlay .pickerNewRow input[type="text"] {
    background: #f5f5f5;
    border-color: #bbb;
    color: #333;
}
body.light-mode .playlistPickerOverlay .pickerNewRow button {
    border-color: var(--mp-accent);
    color: var(--mp-accent);
    background: transparent;
}
body.light-mode .playlistPickerOverlay .pickerNewRow button:hover {
    background: rgba(81,139,161,0.1);
}

/* My Playlists manager */
body.light-mode .plManagerTable th {
    border-bottom-color: #ccc;
    color: #666;
}
body.light-mode .plManagerTable td {
    border-bottom-color: rgba(0,0,0,0.06);
}
body.light-mode .plManagerName {
    color: var(--mp-link);
}
body.light-mode .plManagerDesc {
    color: #666;
}
body.light-mode .plManagerNameInput,
body.light-mode .plManagerDescInput {
    background: #fff;
    border-color: #ccc;
    color: #222;
}
body.light-mode .plManagerActions .btn {
    background: transparent;
    border-color: var(--mp-accent);
    color: var(--mp-accent);
}
body.light-mode .plManagerActions .btn:hover {
    background: rgba(81,139,161,0.1);
}
body.light-mode .plManagerActions .plManagerDelete {
    border-color: #c55;
    color: #c55;
}
body.light-mode .plManagerActions .plManagerDelete:hover {
    background: rgba(204,85,85,0.1);
}