/* assets/css/theme.css */
/* ==============================
   ИКОНКИ
   ============================== */
   img.icon, img.icon-color {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    transition: filter 0.3s ease;
    opacity: 0.8; /* небольшая мягкость */
  }
  
  /* Светлая тема — делаем темнее */
  [data-theme="light"] img.icon {
    filter: brightness(0.15) contrast(100%);
  }
  
  /* Тёмная тема — оставляем мягко-белыми */
  [data-theme="dark"] img.icon {
    filter: invert(1) brightness(0.85) contrast(85%);
  }

  .success-icon {
    width: 48px !important;
    height: 48px !important;
    display: block;
    filter: none !important;
  }

/* Обёртка для иконки писем */
.mail-status-wrap {
  position: relative;
  /* display: inline-block; */
}

/* Красный кружок, если есть непрочитанные */
.mail-status-wrap.has-unread::after {
  content: '';
  position: absolute;
  top: 3px;
  right: -1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e02424;      /* красный */
  /* box-shadow: 0 0 0 2px #fff; белая обводка поверх конверта, можно убрать/подправить */
}

  
  /* Исправление смещения в navbar */
  /* .navbar-item .icon,
  .navbar-item img.icon {
    display: flex;
    align-items: center;
    justify-content: center;
  } */


/* личные иконки пользователя */
[data-theme="light"] .edit.icon {
  filter: brightness(0) invert(1);
  width: 18px;
  height: 18px;
}

/* Тёмная тема — 100% белая иконка */
[data-theme="dark"] .edit.icon {
  filter: brightness(0) saturate(100%);
  width: 18px;
  height: 18px;
}
 
  
  .navbar-link {
    padding-right: 0.5rem; /* меньше отступ после иконки */
  }
  
  /* ==============================
     КНОПКИ
     ============================== */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    height: 2.5em;
    line-height: 1.5;
    padding: 0 1em;
    border-radius: 4px;
    border: 1px solid;
    box-shadow: none;
    transition: all 0.2s ease;
  }
  
  /* Светлая тема */
  [data-theme="light"] .button {
    background: transparent;
    color: #363636;
    border-color: #dbdbdb;
  }
  [data-theme="light"] .button:hover {
    background: #f5f5f5;
    border-color: #b5b5b5;
  }
  [data-theme="light"] .button.is-light {
    background: #363636;
    color: #fff;
    border-color: #363636;
  }
  [data-theme="light"] .button.is-light:hover {
    background: #2f2f2f;
  }
  
  /* Тёмная тема */
  [data-theme="dark"] .button {
    background: transparent;
    color: #f5f5f5;
    border-color: #4a4a4a;
  }
  [data-theme="dark"] .button:hover {
    background: #2b2b2b;
    border-color: #6b6b6b;
  }
  [data-theme="dark"] .button.is-light {
    background: #f5f5f5;
    color: #2b2b2b;
    border-color: #f5f5f5;
  }
  [data-theme="dark"] .button.is-light:hover {
    background: #dbdbdb;
  }
  
.button.is-link,
.button.is-link:focus,
.button.is-link:active {
  outline: none;
  box-shadow: none;
  border: none;
}

  /* ==============================
     DROPDOWN (язык)
     ============================== */
  .navbar-dropdown {
    padding: 0;
    border: none;
  }
  
  /* Ссылки */
  .navbar-dropdown .navbar-item {
    display: block;
    padding: 0.45rem 1rem;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  

  
  /* ==============================
     Выравнивание .navbar-link c иконкой
     ============================== */
  .navbar-link {
    padding-right: 0.5rem !important; /* уменьшенный отступ */
    padding-left: 0.5rem !important;  /* симметрия */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Чтобы img внутри не добавляло собственных inline-отступов */
  .navbar-link img.icon {
    margin: 0;
    padding: 0;
    vertical-align: middle;
    display: block; /* убирает baseline-смещение */
    height: 1.75rem;
    width: 1.75rem;
  }

  .navbar-item.has-dropdown > .navbar-link::after {
    display: none !important;
}

/* 1) Лёгкая подложка самого выпадающего блока */
[data-theme="light"] .navbar .navbar-dropdown {
  background-color: rgba(240, 240, 240, 1) !important;
  backdrop-filter: blur(6px);
  /* border: 1px solid rgba(0, 0, 0, 0.06); */
  box-shadow: none;
}

[data-theme="dark"] .navbar .navbar-dropdown {
  background-color: rgba(31, 34, 41, 1) !important;
  backdrop-filter: blur(6px);
  /* border: 1px solid rgba(255, 255, 255, 0.08); */
  box-shadow: none;
}

[data-theme="light"] .navbar .navbar-divider {
    background-color: #d8d8d8;
    margin: .25rem 0 !important;
    height: 0.015em !important;
}

[data-theme="dark"] .navbar .navbar-divider {
    background-color: #333333;
    margin: .25rem 0 !important;
    height: 0.015em !important;
}

[data-theme="dark"] .navbar .navbar-dropdown {
  background-color: rgba(31, 34, 41, 1) !important;
  backdrop-filter: blur(6px);
  /* border: 1px solid rgba(255, 255, 255, 0.08); */
  box-shadow: none;
}

/* 2) Полностью убираем фон у пунктов (в т.ч. правило с :not(.is-active,.is-selected)) */
.navbar .navbar-dropdown .navbar-item,
.navbar .navbar-dropdown .navbar-item:hover,
.navbar .navbar-dropdown .navbar-item:focus,
.navbar .navbar-dropdown .navbar-item.is-active,
.navbar .navbar-dropdown .navbar-item.is-selected,
.navbar .navbar-dropdown .navbar-item:not(.is-active):not(.is-selected) {
  background-color: transparent !important;
}

/* 3) Базовые цвета пунктов */
[data-theme="light"] .navbar .navbar-dropdown .navbar-item {
  color: #222 !important;
}
[data-theme="dark"] .navbar .navbar-dropdown .navbar-item {
  color: #d0d0d0 !important;
}

/* ✅ Только активная ссылка (текущий язык) контрастная */
[data-theme="light"] .navbar .navbar-dropdown .navbar-item.has-text-weight-semibold {
  color: #000 !important;
}
[data-theme="dark"] .navbar .navbar-dropdown .navbar-item.has-text-weight-semibold {
  color: #fff !important;
}

/* 4) Hover-эффект только для НЕактивных ссылок */
[data-theme="light"] .navbar .navbar-dropdown .navbar-item:not(.has-text-weight-semibold):hover {
  color: #111 !important;
}
[data-theme="dark"] .navbar .navbar-dropdown .navbar-item:not(.has-text-weight-semibold):hover {
  color: #e5e5e5 !important;
}

[data-theme="light"] .has-border {
  border: 1px solid #d6d9e0;
  border-radius: 6px; 
  padding: 1rem;
}

[data-theme="dark"] .has-border {
  border: 1px solid #404654;
  border-radius: 6px; 
  padding: 1rem;
}


/* ==============================
   ИСКЛЮЧЕНИЕ: .button.is-danger ВСЕГДА КРАСНАЯ
   ============================== */
.button.is-danger {
  background-color: #d5002f !important;
  color: #fff !important;
  border-color: #d5002f !important;
}

/* Hover / Focus */
.button.is-danger:hover,
.button.is-danger:focus {
  background-color: #b80027 !important;
  border-color: #b80027 !important;
  color: #fff !important;
}

/* Active / Pressed */
.button.is-danger:active {
  background-color: #9b001f !important;
  border-color: #9b001f !important;
  color: #fff !important;
}
















/* ==============================
   ПОЛЯ ФОРМ: input, textarea, select, date
   ============================== */

   .input,
   .textarea,
   .select select {
     border: none !important;
     box-shadow: none !important;
     border-radius: var(--bulma-radius, 4px);
     transition: background-color 0.2s ease;
   }
   
   /* ====== СВЕТЛАЯ ТЕМА ====== */
   [data-theme="light"] .input,
   [data-theme="light"] .textarea,
   [data-theme="light"] .file-cta,
   [data-theme="light"] .select select {
     background-color: #f4f4f4 !important; /* точный оттенок Bulma */
     color: #222 !important;
   }
   
   /* ====== ТЁМНАЯ ТЕМА ====== */
   [data-theme="dark"] .input,
   [data-theme="dark"] .textarea,
   [data-theme="dark"] .file-cta,
   [data-theme="dark"] .select select {
     background-color: #1f2023 !important; /* совпадает с .file-cta и Bulma dark */
     color: #f5f5f5 !important;
   }
   
   /* ====== БЕЗ ОБВОДКИ И ФОКУСА ====== */
   .input:focus,
   .textarea:focus,
   .select select:focus,
   input[type="date"]:focus {
     border: none !important;
     box-shadow: none !important;
     outline: none !important;
   }
   
   /* ====== SELECT ====== */
   /* Оставляем стандартную стрелку, выравниваем цвет */
   .select:not(.is-multiple):not(.is-loading)::after {
     border-color: rgba(0, 0, 0, 0.35) !important;
   }
   [data-theme="dark"] .select:not(.is-multiple):not(.is-loading)::after {
     border-color: rgba(255, 255, 255, 0.45) !important;
   }
   
   /* ====== DATE ====== */
   input[type="date"] {
     appearance: none;
     -webkit-appearance: none;
     background-position: right 0.75rem center;
     background-repeat: no-repeat;
     background-size: 1rem;
     padding-right: 2rem !important; /* чтобы не налезала иконка */
     border: none !important;
     box-shadow: none !important;
     outline: none !important;
   }
   
   [data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator {
     filter: brightness(0.3);
     opacity: 0.7;
   }
   
   [data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
     filter: invert(1) brightness(1.2);
     opacity: 0.7;
   }
   
   /* ====== PLACEHOLDER ====== */
   .input::placeholder,
   .textarea::placeholder {
     color: #9b9b9b !important;
   }
   [data-theme="dark"] .input::placeholder,
   [data-theme="dark"] .textarea::placeholder {
     color: #a7a7a7 !important;
   }
   

   .file-cta {
    border: none !important;
}
.file-cta, .file-name {
  border: none !important;
}

.file.is-boxed.has-name .file-cta {
  border-end-end-radius: var(--bulma-file-radius);
  border-end-start-radius: var(--bulma-file-radius);
  border-start-end-radius: var(--bulma-file-radius);
  border-start-start-radius: var(--bulma-file-radius);
}
/* Универсальный триггер dropdown без кнопки */










/* скрыть общую серую линию под вкладками */
/* .tabs ul {
  border-bottom-color: transparent !important;
} */

/* сохраняем выравнивание и геометрию */
/* .tabs ul {
  border-bottom: 1px solid transparent !important;
} */

/* подчёркивание остаётся */
.tabs li.is-active a {
  border-bottom-color: currentColor !important;
}

/* убираем синий оттенок активной ссылки */
[data-theme="light"] .tabs li.is-active a {
  color: #000 !important;
}
[data-theme="dark"] .tabs li.is-active a {
  color: #fff !important;
}



/* ==============================
   ССЫЛКИ (универсальные)
   ============================== */

/* Базовый класс для ссылок */
.link-theme {
  text-decoration: none;
  transition: color 0.2s ease;
}

/* Светлая тема — чёрные ссылки */
[data-theme="light"] .link-theme {
  color: #111;
}

[data-theme="light"] .link-theme:hover {
  color: #000;
  text-decoration: underline;
}

/* Тёмная тема — белые ссылки */
[data-theme="dark"] .link-theme {
  color: #f5f5f5;
}

[data-theme="dark"] .link-theme:hover {
  color: #fff;
  text-decoration: underline;
}

/* Стрелка для ссылок */
.link-theme-arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  padding-right: 1.25em;
}

.link-theme-arrow::after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/></svg>") no-repeat center;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/></svg>") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: transform 0.2s ease;
}

.link-theme-arrow:hover::after {
  transform: translateX(2px);
}


/* .track-colored[data-theme="light"] .js-play-btn,
.track-colored[data-theme="light"] .more svg {
  background: rgba(0, 0, 0, 0.12);
  filter: invert(1) brightness(0.2);
}

.track-colored[data-theme="dark"] .js-play-btn,
.track-colored[data-theme="dark"] .more svg {
  background: rgba(255, 255, 255, 0.15);
  filter: none;
} */

.has-text-danger {
    color: #ff0000 !important;
}

/* ============================================
   Блок трека (.track-colored) — только цвета
   ============================================ */

/* Текст и ссылки берут цвет из inline color ($trackBlockStyle) */
.track-colored,
.track-colored a,
.track-colored span,
.track-colored strong,
.track-colored p,
.track-colored h1,
.track-colored h2,
.track-colored h3 {
  color: inherit;
}

/* гасим has-text-* внутри блока, чтобы не спорило с цветом обложки */
.track-colored [class*="has-text-"] {
  color: inherit;
}

/* ============================================
   ОТДЕЛЬНЫЕ ИКОНКИ (не в кнопках)
   ============================================ */

.track-colored img.icon {
  filter: none;
  opacity: 0.9;
}

/* тёмная обложка -> белые иконки */
.track-colored[data-theme="dark"] img.icon {
  filter: invert(1) brightness(1.05);
}

/* светлая обложка -> почти чёрные иконки */
.track-colored[data-theme="light"] img.icon {
  filter: brightness(0.05) contrast(120%);
}

/* ============================================
   КНОПКИ (цвет, без изменения формы)
   ============================================ */

/* тёмная обложка -> белые кнопки, чёрный текст */
.track-colored[data-theme="dark"] .button:not(.is-danger),
.track-colored[data-theme="dark"] .js-follow-toggle {
  background-color: #ffffff;
  color: #111111;
  border-color: #ffffff;
}

/* светлая обложка -> чёрные кнопки, белый текст */
.track-colored[data-theme="light"] .button:not(.is-danger),
.track-colored[data-theme="light"] .js-follow-toggle {
  background-color: #000000;
  color: #ffffff;
  border-color: #000000;
}

/* иконки внутри кнопок — инвертируем относительно фона кнопки */
.track-colored[data-theme="dark"] .button img.icon,
.track-colored[data-theme="dark"] .js-follow-toggle img.icon {
  filter: brightness(0) contrast(140%);
}

.track-colored[data-theme="light"] .button img.icon,
.track-colored[data-theme="light"] .js-follow-toggle img.icon {
  filter: invert(1) brightness(1.1);
}

/* ============================================
   БОЛЬШАЯ PLAY-КНОПКА — только цвет
   ============================================ */

/* ============================================
   DROPDOWN (плейлист + auto-next) внутри блока
   ============================================ */
/*
.track-colored .dropdown-menu,
.track-colored .dropdown-content {
  border: none;
}

.track-colored[data-theme="dark"] .dropdown-menu,
.track-colored[data-theme="dark"] .dropdown-content {
  background-color: #ffffff;
  color: #111111;
}

.track-colored[data-theme="dark"] .dropdown-item {
  background-color: #ffffff;
  color: #111111;
}

.track-colored[data-theme="dark"] .dropdown-item.is-active,
.track-colored[data-theme="dark"] .dropdown-item:hover {
  background-color: #f2f2f2;
}

.track-colored[data-theme="dark"] .dropdown-divider {
  background-color: rgba(0, 0, 0, 0.08);
}

.track-colored[data-theme="dark"] .dropdown-item img.icon {
  filter: brightness(0) contrast(150%);
}

.track-colored[data-theme="light"] .dropdown-menu,
.track-colored[data-theme="light"] .dropdown-content {
  background-color: #000000;
  color: #ffffff;
}

.track-colored[data-theme="light"] .dropdown-item {
  background-color: #000000;
  color: #ffffff;
}

.track-colored[data-theme="light"] .dropdown-item.is-active,
.track-colored[data-theme="light"] .dropdown-item:hover {
  background-color: #202020;
}

.track-colored[data-theme="light"] .dropdown-divider {
  background-color: rgba(255, 255, 255, 0.12);
}

.track-colored[data-theme="light"] .dropdown-item img.icon {
  filter: invert(1) brightness(1.1);
}


*/


















/* PLAY: единый контроль цвета иконки */

/* Сбросим влияние общей темы на иконки внутри блока трека */
.track-colored img.icon {
  filter: none;
}

/* Тёмная обложка -> белые иконки */
.track-colored[data-theme="dark"] img.icon {
  filter: invert(1) brightness(1.05);
}

/* Светлая обложка -> чёрные иконки */
.track-colored[data-theme="light"] img.icon {
  filter: brightness(0) contrast(130%);
}



/* Большая, но адаптивная play-кнопка в блоке трека */
.track-colored .js-play-btn {
  display: flex;
  /* align-items: center;
  justify-content: center; */
  padding: 0;
  border: none;
  background: none;

  /* больше базовый размер + адаптивность */
  /* на маленьких экранах (320–400px) кнопка будет ~75–85px; */

  /* на широких — до 96px */
  width: clamp(72px, 22vw, 96px);
  height: clamp(72px, 22vw, 96px);
  border-radius: 50%;
}

/* чтобы сама стрелка тоже была крупнее */
.track-colored .js-play-btn img.icon {
  width: 64%;
  height: 64%;
}

/* Большая play/pause на странице трека:
   красим иконку по локальной теме блока трека */

/* Большая круглая play/pause в шапке трека */
.track-colored .js-play-btn img.icon {
  transition: filter .25s ease;
}

/* тёмная подложка трека → белая иконка */
.track-colored[data-theme="dark"] .js-play-btn img.icon {
  filter: invert(1) brightness(1.05) !important;
}

/* светлая подложка трека → почти чёрная иконка */
.track-colored[data-theme="light"] .js-play-btn img.icon {
  filter: brightness(0) contrast(130%) !important;
}


/* Выбор треков в альбомах */
#trackListContainer .track-item {
  transition: background-color .12s ease, color .12s ease;
}

#trackListContainer .track-item:hover {
  background-color: rgba(148, 163, 184, 0.08);
}

/* выбранный трек */
#trackListContainer .track-item.track-selected {
  background-color: rgba(129, 140, 248, 0.22);
  color: inherit;
}

/* выбранный трек в тёмной теме */
html[data-theme="dark"] #trackListContainer .track-item.track-selected {
  background-color: rgba(129, 140, 248, 0.35);
  color: #f5f5f5;
}





/* =========================================
   FIX: dropdown в шапке трека (playlist + autonext)
   чтобы не наследовал "color: inherit" неправильно
   ========================================= */

/* общий сброс */
.track-colored .dropdown-menu,
.track-colored .dropdown-content {
  border: none !important;
  box-shadow: none !important;
}

/* когда у блока трека data-theme="light" (текст тёмный) — меню тоже светлое */
.track-colored[data-theme="light"] .dropdown-content {
  background: #ffffff !important;
  color: #111111 !important;
  border-radius: 8px;
  overflow: hidden; /* цельный фон */
}
.track-colored[data-theme="light"] .dropdown-item {
  color: #111111 !important;
  background: transparent !important;
}
.track-colored[data-theme="light"] .dropdown-item:hover,
.track-colored[data-theme="light"] .dropdown-item.is-active {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #111111 !important;
}

/* когда у блока трека data-theme="dark" (текст белый) — меню тёмное */
.track-colored[data-theme="dark"] .dropdown-content {
  background: #1c1f24 !important;
  color: #ffffff !important;
  border-radius: 8px;
  overflow: hidden;
}
.track-colored[data-theme="dark"] .dropdown-item {
  color: #ffffff !important;
  background: transparent !important;
}
.track-colored[data-theme="dark"] .dropdown-item:hover,
.track-colored[data-theme="dark"] .dropdown-item.is-active {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
}

/* разделитель */
.track-colored .dropdown-divider {
  background: rgba(0,0,0,0.08) !important;
}
.track-colored[data-theme="dark"] .dropdown-divider {
  background: rgba(255,255,255,0.10) !important;
}