code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* toolbar button */
.tbb {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.3125rem 0.625rem; font-size: 0.8125rem; border-radius: 0.5rem;
  color: inherit; background: transparent; white-space: nowrap;
}
.tbb:hover { background: rgb(241 245 249); }
.tbb i { font-size: 1rem; }

.frow.bg-sky-50 { background: rgb(240 249 255); }

/* disk row as a left "tab" — active = accent bar + tint */
.disk-row { border-left: 3px solid transparent; }
.disk-row.sw-active, .disk-row.sw-active:hover { background: rgb(224 242 254) !important; border-left-color: #0284c7; }
html.dark .disk-row.sw-active, html.dark .disk-row.sw-active:hover { background: #0c2a47 !important; border-left-color: #38bdf8; }

/* подсветка активного сервиса — чистым CSS по состоянию страницы,
   чтобы она не слетала при автообновлении сайдбара каждые 8 секунд */
body[data-view="music"]    #sw-item-music,
body[data-view="dlna"]     #sw-item-dlna,
body[data-view="torrents"] #sw-item-torrent {
  background: rgb(224 242 254) !important;
  border-left-color: #0284c7;
  box-shadow: inset 0 0 0 1.5px #0284c7;
  border-radius: 0.5rem;
}
html.dark body[data-view="music"]    #sw-item-music,
html.dark body[data-view="dlna"]     #sw-item-dlna,
html.dark body[data-view="torrents"] #sw-item-torrent {
  background: #0c2a47 !important;
  border-left-color: #38bdf8;
  box-shadow: inset 0 0 0 1.5px #38bdf8;
}

/* активная папка/исполнитель/альбом в списках музыки */
.mus-item.mus-on, .mus-item.mus-on:hover {
  background: rgb(224 242 254) !important; color: #0369a1; font-weight: 500;
  box-shadow: inset 0 0 0 1.5px #0284c7;
}
html.dark .mus-item.mus-on, html.dark .mus-item.mus-on:hover {
  background: #0c2a47 !important; color: #7dd3fc; box-shadow: inset 0 0 0 1.5px #38bdf8;
}

/* играющий трек — синяя рамка на всю строку */
tr.mrow.mus-playing > td { background: rgb(224 242 254) !important; }
tr.mrow.mus-playing > td:first-child { box-shadow: inset 2px 0 0 #0284c7, inset 0 1.5px 0 #0284c7, inset 0 -1.5px 0 #0284c7; }
tr.mrow.mus-playing > td:last-child  { box-shadow: inset -2px 0 0 #0284c7, inset 0 1.5px 0 #0284c7, inset 0 -1.5px 0 #0284c7; }
tr.mrow.mus-playing > td:not(:first-child):not(:last-child) { box-shadow: inset 0 1.5px 0 #0284c7, inset 0 -1.5px 0 #0284c7; }
html.dark tr.mrow.mus-playing > td { background: #0c2a47 !important; }
html.dark tr.mrow.mus-playing > td:first-child { box-shadow: inset 2px 0 0 #38bdf8, inset 0 1.5px 0 #38bdf8, inset 0 -1.5px 0 #38bdf8; }
html.dark tr.mrow.mus-playing > td:last-child  { box-shadow: inset -2px 0 0 #38bdf8, inset 0 1.5px 0 #38bdf8, inset 0 -1.5px 0 #38bdf8; }
html.dark tr.mrow.mus-playing > td:not(:first-child):not(:last-child) { box-shadow: inset 0 1.5px 0 #38bdf8, inset 0 -1.5px 0 #38bdf8; }

/* ============ DARK THEME ============ */
/* Overrides the light Tailwind utilities used in the templates, scoped to html.dark. */
html.dark body { background: #0b1220; color: #e2e8f0; }

html.dark .bg-white   { background: #1e293b !important; }
html.dark .bg-slate-50  { background: #273449 !important; }
html.dark .bg-slate-100 { background: #334155 !important; }

html.dark .hover\:bg-slate-50:hover  { background: #273449 !important; }
html.dark .hover\:bg-slate-100:hover { background: #334155 !important; }
html.dark .hover\:bg-red-50:hover    { background: #3a1d1d !important; }
html.dark .tbb:hover { background: #334155; }

html.dark .border-slate-100 { border-color: #1f2b3e !important; }
html.dark .border-slate-200 { border-color: #334155 !important; }
html.dark .border-slate-300 { border-color: #475569 !important; }
html.dark .border-red-200   { border-color: #7f1d1d !important; }
html.dark .divide-slate-100 > * + * { border-color: #1f2b3e !important; }

html.dark .text-slate-800, html.dark .text-slate-700 { color: #e2e8f0 !important; }
html.dark .text-slate-600 { color: #cbd5e1 !important; }
html.dark .text-slate-500 { color: #94a3b8 !important; }
html.dark .text-slate-400 { color: #64748b !important; }
html.dark .text-slate-300 { color: #475569 !important; }
html.dark .hover\:text-slate-800:hover, html.dark .hover\:text-slate-700:hover { color: #f1f5f9 !important; }
html.dark .text-sky-600 { color: #38bdf8 !important; }

html.dark input, html.dark select {
  background: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important;
}
html.dark input::placeholder { color: #64748b; }
html.dark code { color: #cbd5e1; }

/* badges / pills — keep legible on dark */
html.dark .bg-amber-100   { background: #3a2c08 !important; }
html.dark .text-amber-700, html.dark .text-amber-600 { color: #fcd34d !important; }
html.dark .bg-emerald-100 { background: #06281d !important; }
html.dark .text-emerald-700 { color: #6ee7b7 !important; }
html.dark .bg-sky-100 { background: #0c2a47 !important; }
html.dark .text-sky-700 { color: #7dd3fc !important; }
html.dark .bg-sky-50, html.dark .frow.bg-sky-50 { background: #0c2a47 !important; }
html.dark .bg-slate-100.text-slate-500 { color: #cbd5e1 !important; }


/* ---- полоса перемотки видеоплеера ----
 * Музыкальная полоса здесь НЕ участвует: у неё высоту задаёт разметка
 * (в ней рисуется визуализатор), а правило по id перебивало бы её. */
#sw-seek {
  position: relative;
  height: 0.375rem;               /* толще, чтобы попадать мышью */
  border-radius: 999px;
  transition: height .12s ease;
}
#sw-seek:hover { height: 0.5rem; }
#sw-fill {
  border-radius: 999px;
  position: relative;
}
/* бегунок-кружок на конце заполненной части */
#sw-fill::after {
  content: "";
  position: absolute;
  right: -0.3125rem; top: 50%;
  width: 0.625rem; height: 0.625rem;
  transform: translateY(-50%) scale(0);
  background: #0ea5e9;
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: transform .12s ease;
}
#sw-seek:hover #sw-fill::after { transform: translateY(-50%) scale(1); }
html.dark #sw-fill::after { border-color: #0f172a; }

/* ползунки громкости — в тон интерфейсу */
#sw-vol, #mus-vol { accent-color: #0284c7; height: 0.375rem; }


/* ---- полосы прокрутки в стиле интерфейса ---- */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }
html.dark * { scrollbar-color: #475569 transparent; }
html.dark *::-webkit-scrollbar-thumb { background: #475569; background-clip: content-box; }
html.dark *::-webkit-scrollbar-thumb:hover { background: #64748b; background-clip: content-box; }

/* заглушка обложки, когда картинки в тегах нет */
.mus-nocover {
  background: #e2e8f0 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M42 16v22.5a7 7 0 1 1-4-6.3V22l-14 3.2v17.3a7 7 0 1 1-4-6.3V21l22-5z' fill='%2394a3b8'/></svg>") center/60% no-repeat;
}
html.dark .mus-nocover { background-color: #334155; }


/* ручка изменения ширины столбца */
.col-resizer {
  position: absolute; top: 0; right: -3px; width: 7px; height: 100%;
  cursor: col-resize; user-select: none; z-index: 5;
}
.col-resizer:hover { background: linear-gradient(to right, transparent 2px, #0284c7 2px, #0284c7 5px, transparent 5px); }
#music-tracks th { user-select: none; }


/* играющая копия в окне дубликатов */
.dup-row.mus-playing { background: rgb(224 242 254); box-shadow: inset 0 0 0 1.5px #0284c7; border-radius: 0.375rem; }
html.dark .dup-row.mus-playing { background: #0c2a47; box-shadow: inset 0 0 0 1.5px #38bdf8; }


/* метка перетаскивания столбца — видна всегда, тянуть можно только за неё */
.col-grip {
  display: inline-block; cursor: grab; margin-right: 0.25rem;
  color: #94a3b8; opacity: .55; vertical-align: -1px;
}
.col-grip:hover { opacity: 1; color: #0284c7; }
.col-grip:active { cursor: grabbing; }
.col-label { cursor: pointer; }
.col-label:hover { color: #475569; }
html.dark .col-label:hover { color: #cbd5e1; }
th.col-dragging { opacity: .45; }
th.col-drop-target { box-shadow: inset 3px 0 0 #0284c7; }
html.dark th.col-drop-target { box-shadow: inset 3px 0 0 #38bdf8; }

/* ручка ширины — тонкая полоска у правого края, видна постоянно */
.col-resizer { background: linear-gradient(to right, transparent 2px, rgba(148,163,184,.45) 2px, rgba(148,163,184,.45) 4px, transparent 4px); }
.col-resizer:hover { background: linear-gradient(to right, transparent 1px, #0284c7 1px, #0284c7 5px, transparent 5px); }


/* Таблица треков: фиксированная раскладка, иначе изменение ширины одного
   столбца заставляет браузер пересчитывать все остальные («прыгают»). */
/* Ширина таблицы — сумма ширин столбцов, а не ширина окна.
   При растянутой на 100% таблице сумма обязана совпадать с окном, поэтому
   изменение одного столбца всегда компенсировалось соседним: тянешь «Название»,
   а меняется «Альбом». Теперь каждый столбец держит ровно свою ширину, а
   свободное место просто остаётся справа. */
table.mus-table { table-layout: fixed; width: max-content; min-width: 100%; }
/* Единственный столбец без заданной ширины — распорка, поэтому весь остаток
   достаётся ей, а не размазывается по соседям при изменении ширины столбца. */
.mus-table th[data-col="spacer"], .mus-table td[data-col="spacer"] { width: auto; padding: 0; }
table.mus-table th, table.mus-table td { overflow: hidden; }

/* ---- рамка-паспарту вокруг обложки в доке ----
 * Обложка висит над списком, и без оправы её край сливается с фоном панели. */
.mus-cover-frame {
  padding: 0.3125rem;                       /* поле паспарту вокруг картинки */
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  box-shadow: 0 0.625rem 1.75rem rgba(0, 0, 0, .35);
}
html.dark .mus-cover-frame {
  background: #0f172a;
  border-color: #475569;
  box-shadow: 0 0.625rem 1.75rem rgba(0, 0, 0, .6);
}

/* Заголовок столбца не должен переноситься на вторую строку: при узком
   столбце он налезал на первую строку таблицы. Лишнее срезается многоточием,
   полное название остаётся в подсказке. */
.mus-table thead th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* включённый режим на кнопке панели */
.tbb.tbb-on { background: rgb(224 242 254); color: #0369a1; }
html.dark .tbb.tbb-on { background: #0c2a47 !important; color: #7dd3fc; }
/* стрелка раскрытия ветки дерева */
.mus-caret { line-height: 1; }
html.dark .mus-node .mus-kids { border-color: #334155; }

/* папка дерева под курсором перетаскивания */
.mus-item.mus-drop {
  background: rgb(224 242 254) !important;
  box-shadow: inset 0 0 0 2px #0284c7;
}
html.dark .mus-item.mus-drop { background: #0c2a47 !important; box-shadow: inset 0 0 0 2px #38bdf8; }

/* Переход выделения на соседний трек: подсветка и рамка перетекают, а не
   переключаются рывком. Анимируются обе строки сразу — старая гаснет, новая
   разгорается, поэтому выделение читается как перешедшее вниз или вверх. */
tr.mrow > td {
  transition: background-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.dup-row { transition: background-color .2s ease, box-shadow .2s ease; }

@media (prefers-reduced-motion: reduce) {
  tr.mrow > td, .dup-row { transition: none; }
}

/* Кнопка удаления прижата к правому краю списка: ячейка липкая, а сама кнопка
   остаётся в потоке — тогда она центрируется по высоте строки автоматически.
   Абсолютное позиционирование это ломало: у пустой ячейки нет строки текста,
   от которой считать положение, и кнопка висела ниже своей строки. */
.mus-table th[data-col="actions"],
.mus-table td[data-col="actions"] {
  position: sticky;
  right: 0;
  width: 2.75rem;
  min-width: 2.75rem;
  padding: 0 0.5rem 0 0.25rem;
  text-align: right;
}
.mus-table th[data-col="actions"] { z-index: 13; }
.mus-table td[data-col="actions"] { z-index: 3; }

/* Шапка таблицы уже окна списка, поэтому серая полоска обрывалась, не дойдя
   до края. Дотягиваем её краской: тень с большим смещением закрашивает остаток
   справа и ни на что не влияет в раскладке. */
.mus-table thead th:last-child { box-shadow: 60rem 0 0 rgb(248 250 252); }
html.dark .mus-table thead th:last-child { box-shadow: 60rem 0 0 #273449; }
html[data-theme]:not([data-theme="classic"]) .mus-table thead th:last-child {
  box-shadow: 60rem 0 0 var(--sw-surface-2);
}

/* Кнопка висит над таблицей, поэтому широкий столбец мог заехать под неё.
   Даём кнопке подложку цвета строки — текст уходит под неё аккуратно. */
.mus-table td[data-col="actions"] {
  background: rgb(255 255 255);
  box-shadow: -0.5rem 0 0.5rem -0.375rem rgba(0,0,0,.25);
}
.mus-table tbody tr:hover td[data-col="actions"] { background: rgb(248 250 252); }
.mus-table tbody tr.mus-playing td[data-col="actions"] { background: rgb(224 242 254); }

html.dark .mus-table td[data-col="actions"] { background: #1e293b; }
html.dark .mus-table tbody tr:hover td[data-col="actions"] { background: #273449; }
html.dark .mus-table tbody tr.mus-playing td[data-col="actions"] { background: #0c2a47; }

html[data-theme]:not([data-theme="classic"]) .mus-table td[data-col="actions"] { background: var(--sw-surface); }
html[data-theme]:not([data-theme="classic"]) .mus-table tbody tr:hover td[data-col="actions"] { background: var(--sw-surface-2); }
html[data-theme]:not([data-theme="classic"]) .mus-table tbody tr.mus-playing td[data-col="actions"] { background: var(--sw-accent-soft); }


/* Раз таблица может быть уже окна, подсветка строки должна дотягиваться до
   правого края — закрашиваем остаток тем же приёмом, что и шапку. */
.mus-table tbody tr:hover > td:last-child { box-shadow: 60rem 0 0 rgb(248 250 252); }
.mus-table tbody tr.mus-playing > td:last-child { box-shadow: 60rem 0 0 rgb(224 242 254); }
html.dark .mus-table tbody tr:hover > td:last-child { box-shadow: 60rem 0 0 #273449; }
html.dark .mus-table tbody tr.mus-playing > td:last-child { box-shadow: 60rem 0 0 #0c2a47; }
html[data-theme]:not([data-theme="classic"]) .mus-table tbody tr:hover > td:last-child {
  box-shadow: 60rem 0 0 var(--sw-surface-2);
}
html[data-theme]:not([data-theme="classic"]) .mus-table tbody tr.mus-playing > td:last-child {
  box-shadow: 60rem 0 0 var(--sw-accent-soft);
}

/* Сворачивание боковой панели. Анимируем ширину, а не сдвиг: соседняя область
   должна расширяться синхронно, иначе панель уедет, а место останется пустым.
   Содержимое прячем сразу — иначе на середине анимации текст перескакивает. */
@media (min-width: 768px) {
  .sw-sidebar { transition: width .2s ease, opacity .15s ease; }
  body.sw-sb-collapsed .sw-sidebar {
    width: 0 !important;
    opacity: 0;
    overflow: hidden;
    border-right-width: 0;
    pointer-events: none;
  }
}

/* Столбец с галочками приклеен к левому краю списка: при горизонтальной
   прокрутке он остаётся на месте, как и кнопка удаления справа. */
/* Столбец с галочками прижат к левому краю списка и не уезжает при
   горизонтальной прокрутке. Фон обязателен: без него содержимое видно
   насквозь и кажется, что столбец не закреплён. */
.mus-table th[data-col="pick"],
.mus-table td[data-col="pick"] {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 2.125rem;
  min-width: 2.125rem;
  padding: 0 0 0 0.5rem;
  text-align: left;
  vertical-align: middle;
  background: rgb(255 255 255);
}
/* шапка и строки держат галочку на одной вертикали */
.mus-table th[data-col="pick"] input,
.mus-table td[data-col="pick"] input {
  display: block;
  margin: 0;
  vertical-align: middle;
}
.mus-table th[data-col="pick"] { z-index: 13; background: rgb(248 250 252); }
.mus-table tbody tr:hover td[data-col="pick"] { background: rgb(248 250 252); }
.mus-table tbody tr.mus-playing td[data-col="pick"] { background: rgb(224 242 254); }

html.dark .mus-table td[data-col="pick"] { background: #1e293b; }
html.dark .mus-table th[data-col="pick"] { background: #273449; }
html.dark .mus-table tbody tr:hover td[data-col="pick"] { background: #273449; }
html.dark .mus-table tbody tr.mus-playing td[data-col="pick"] { background: #0c2a47; }

html[data-theme]:not([data-theme="classic"]) .mus-table td[data-col="pick"] { background: var(--sw-surface); }
html[data-theme]:not([data-theme="classic"]) .mus-table th[data-col="pick"],
html[data-theme]:not([data-theme="classic"]) .mus-table tbody tr:hover td[data-col="pick"] { background: var(--sw-surface-2); }
html[data-theme]:not([data-theme="classic"]) .mus-table tbody tr.mus-playing td[data-col="pick"] { background: var(--sw-accent-soft); }

/* Булавка появляется при наведении на папку, у закреплённой видна всегда. */
.mus-pin { opacity: 0; transition: opacity .12s ease; }
.mus-item:hover .mus-pin { opacity: 1; }
.mus-item.mus-pinned .mus-pin { opacity: 1; color: #0284c7; }
html.dark .mus-item.mus-pinned .mus-pin { color: #38bdf8; }
html[data-theme]:not([data-theme="classic"]) .mus-item.mus-pinned .mus-pin { color: var(--sw-accent-ink); }

/* Окно поверх тёмного списка сливалось с фоном — обозначаем край рамкой
   и глубокой тенью, в тёмных темах рамка светлее фона окна. */
#modal-host > div { border-color: rgb(203 213 225); }
html.dark #modal-host > div { border-color: #475569; box-shadow: 0 24px 60px rgba(0,0,0,.65); }
html[data-theme]:not([data-theme="classic"]) #modal-host > div {
  border-color: var(--sw-border-2);
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}

/* Кнопка случайного воспроизведения в строке «Все треки» — как булавка у папок */
.mus-shuffle-all { opacity: 0; transition: opacity .12s ease; }
.mus-item:hover .mus-shuffle-all { opacity: 1; }