/* Light theme - applied when body has class "light" */
body.light {
  background: #e4e8ee;
  color: #222;
}

body.light .sidebar {
  border-right: 1px solid #b8c4d0;
}

body.light .sidebar-section {
  border-color: #c4cdd8;
}

body.light .sidebar-section header {
  color: #4a5568;
  border-bottom: 1px solid #c4cdd8;
}

body.light .tree-item:hover,
body.light .browser-col li:hover,
body.light #songTable tbody tr:hover {
  background-color: rgba(42, 100, 180, 0.12);
}

body.light #songTable th,
body.light #songTable td,
body.light .browser-col,
body.light .smart-col {
  border-color: #c4cdd8;
}

body.light #songTable th {
  color: #4a5568;
}

body.light #songTable td {
  color: #222;
}

body.light .search-capsule input,
body.light input,
body.light textarea {
  color: #222;
}

body.light input,
body.light textarea,
body.light .search-capsule,
body.light #lyricsText,
body.light #wikiEditor,
body.light #wikiChatInput {
  border: 1px solid #b8c4d0;
  background: #fff;
}

body.light .statusbar {
  border-top: 1px solid #b8c4d0;
  color: #4a5568;
}

body.light .overlay {
  background: rgba(200, 210, 220, 0.73);
}

body.light .error {
  color: #c0392b;
}

body.light .context-menu {
  background: #f0f3f7;
  border: 1px solid #b8c4d0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

body.light .context-item:hover {
  background: linear-gradient(180deg, #3d88c7, #2471a3);
  color: #fff;
}

body.light .dirty-indicator {
  color: #2563a8;
}

body.light #albumArt {
  background: #dde3ea;
  border: 1px solid #b8c4d0;
}

/* Override itunes-theme gradients for light mode */
body.light .topbar,
body.light .sidebar-section header,
body.light #songTable th,
body.light .statusbar,
body.light .modal-card > header {
  background: linear-gradient(180deg, #e4e8ee, #cdd4de);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

body.light .search-capsule,
body.light .login-card,
body.light .modal-card,
body.light .browser-col,
body.light .sidebar,
body.light .smart-col {
  background: linear-gradient(180deg, #eef1f5, #dde3ea);
}

body.light .roweb-btn,
body.light #loginForm button,
body.light #wikiHistoryBtn,
body.light button[data-close-modal] {
  border: 1px solid #6a9fd8;
  background: #c5d8eb;
  color: #1a3a5c;
}

body.light .roweb-btn:hover {
  background: #b0cadf;
}

body.light .roweb-btn.active {
  background: #3a7bd5;
  color: #fff;
}

body.light .transport-btn {
  border: 1px solid #a0b0c4;
  background: linear-gradient(180deg, #f0f3f7 0%, #dde3ea 48%, #d5dce6 49%, #c8d2de 100%);
  color: #2a3a4c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 0 rgba(0, 0, 0, 0.12);
}

body.light .transport-btn.play-btn {
  background: linear-gradient(180deg, #c5d8eb 0%, #a8c4dc 48%, #9abcd4 49%, #8ab0cc 100%);
  border-color: #6a9fd8;
}

body.light #songTable tbody tr.selected,
body.light .tree-item.selected,
body.light .browser-col li.selected {
  background: linear-gradient(180deg, #3d88c7, #2471a3);
  color: #fff;
}

body.light #songTable tbody tr:nth-child(odd) {
  background: #eef1f5;
}

body.light #songTable tbody tr:nth-child(even) {
  background: #e4e8ee;
}

body.light .queue-list li.queue-current {
  background: rgba(42, 100, 180, 0.12);
}

body.light .browser-resizer {
  background: linear-gradient(180deg, #dde3ea, #c8d2de, #dde3ea);
}

body.light ::-webkit-scrollbar-track {
  background: linear-gradient(180deg, #dde3ea, #cdd4de);
}

body.light ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a0aab8, #8892a0);
  border: 1px solid #98a2b0;
}

body.light ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #909aA8, #7882a0);
}

body.light .panel-toggle {
  color: #4a5568;
}

body.light .panel-toggle.active {
  color: #1a2a3c;
}

body.light .new-btn {
  background: #3a7bd5;
  border-color: #2563a8;
  color: #fff;
}

body.light .col-ctx-menu {
  background: #f0f3f6;
  border: 1px solid #b8c4d0;
  color: #1c2128;
}

body.light .col-ctx-item:hover {
  background: rgba(42, 100, 180, 0.15);
}

body.light .col-resizer:hover,
body.light .col-resizer.active {
  background: #3a7bd5;
}
