/* ============================================================
   Planka — 5 светлых тем (палитры) + мармеладный мишка
   Planka 2.1.1.

   Подключается <link>-ом в /app/views/index.ejs (см. docker-compose.yml).

   Светлая тема выбирается тумблером (theme-switcher.js) и хранится в
   localStorage["planka-theme"]. Пять светлых палитр:
     fuchsia — «Фуксия»      (яркая, исходная)
     rose    — «Нежная роза» (мягкий пудрово-розовый)
     mint    — «Шалфей»      (приглушённый зелёный)
     blue    — «Незабудка»   (нежно-голубой)
     purple  — «Лаванда»     (мягкий сиреневый)
   Тёмная «Чернильный аметист» — отдельно, в theme-switcher.js.

   Активная палитра ставится атрибутом html[data-theme="<id>"].
   Мишка с пузырями включён ВСЕГДА (одинаковый для всех светлых тем).
   Настроением мишки управляет theme-switcher.js через html[data-bear-mood].

   Скругление: «среднее». Классы вида _name_hash_line — CSS-модули Planka,
   берём по частичному совпадению [class*="_name_"] (переживёт смену хешей).
   ============================================================ */

/* ============================================================
   1. ПАЛИТРЫ — 5 светлых тем.
      Применение (раздел 2) общее, использует var(--pp-*).
      :root = «Фуксия» — фолбэк, пока JS не проставил data-theme.
   ============================================================ */

:root,
html[data-theme="fuchsia"] {
  --pp-bg:           linear-gradient(160deg, #fbd9e8 0%, #fdeef4 60%);
  --pp-header:       linear-gradient(90deg, #ec4899 0%, #f472b6 100%);
  --pp-header-text:  #ffffff;
  --pp-column:       #fce0ec;
  --pp-card:         #ffffff;
  --pp-accent:       #ec4899;
  --pp-accent-hover: #d81b80;
  --pp-accent-text:  #ffffff;
  --pp-soft:         #f9c2da;
  --pp-add:          #f7cfe1;
  --pp-text:         #3d2230;
}

/* «Нежная роза» — мягкий пудрово-розовый */
html[data-theme="rose"] {
  --pp-bg:           linear-gradient(160deg, #f4eaf0 0%, #fbf6f9 62%);
  --pp-header:       linear-gradient(95deg, #e3c9da 0%, #eed9e7 100%);
  --pp-header-text:  #5a4453;
  --pp-column:       #f4e8f0;
  --pp-card:         #ffffff;
  --pp-accent:       #b483a4;
  --pp-accent-hover: #9d6c8f;
  --pp-accent-text:  #ffffff;
  --pp-soft:         #f0e0ea;
  --pp-add:          #f2e4ed;
  --pp-text:         #4d4047;
}

/* «Шалфей» — приглушённый зелёный */
html[data-theme="mint"] {
  --pp-bg:           linear-gradient(160deg, #e9f1ec 0%, #f6faf8 62%);
  --pp-header:       linear-gradient(95deg, #bcdac9 0%, #d2e6da 100%);
  --pp-header-text:  #3e564b;
  --pp-column:       #e6f0ea;
  --pp-card:         #ffffff;
  --pp-accent:       #67a085;
  --pp-accent-hover: #558a70;
  --pp-accent-text:  #ffffff;
  --pp-soft:         #dcebe3;
  --pp-add:          #e0eee7;
  --pp-text:         #39473f;
}

/* «Незабудка» — нежно-голубой */
html[data-theme="blue"] {
  --pp-bg:           linear-gradient(160deg, #e9eef4 0%, #f5f8fb 62%);
  --pp-header:       linear-gradient(95deg, #c3d3e6 0%, #d6e2ef 100%);
  --pp-header-text:  #3f4f63;
  --pp-column:       #e5ecf3;
  --pp-card:         #ffffff;
  --pp-accent:       #7896b6;
  --pp-accent-hover: #637fa0;
  --pp-accent-text:  #ffffff;
  --pp-soft:         #dde6f0;
  --pp-add:          #e2eaf2;
  --pp-text:         #3a4350;
}

/* «Лаванда» — мягкий сиреневый */
html[data-theme="purple"] {
  --pp-bg:           linear-gradient(160deg, #ece9f3 0%, #f7f5fb 62%);
  --pp-header:       linear-gradient(95deg, #c8c0e0 0%, #d8d1ea 100%);
  --pp-header-text:  #4a4264;
  --pp-column:       #e8e4f1;
  --pp-card:         #ffffff;
  --pp-accent:       #897cb6;
  --pp-accent-hover: #7568a0;
  --pp-accent-text:  #ffffff;
  --pp-soft:         #e2def0;
  --pp-add:          #e6e2f2;
  --pp-text:         #403a4e;
}

/* «ClickUp» — чистый светлый интерфейс с фирменным градиентом
   (розовый → фиолетовый → голубой) в шапке и фиолетовым акцентом #7B68EE.
   Светло-серый фон, белые карточки — как в приложении ClickUp. */
html[data-theme="clickup"] {
  --pp-bg:           linear-gradient(160deg, #f4f5f7 0%, #fafbfc 60%);
  --pp-header:       linear-gradient(90deg, #fa12e3 0%, #7b68ee 50%, #49ccf9 100%);
  --pp-header-text:  #ffffff;
  --pp-column:       #f1f2f4;
  --pp-card:         #ffffff;
  --pp-accent:       #7b68ee;
  --pp-accent-hover: #6452d6;
  --pp-accent-text:  #ffffff;
  --pp-soft:         #eceafb;
  --pp-add:          #f0eefc;
  --pp-text:         #2c3340;
}

/* «Лакшери · Айвори» — супер-строгая светлая лакшери-тема: тёплый
   айвори-фон, графитовая шапка с шампань-текстом, золотой акцент.
   Без маскотов (декор выключен в theme-switcher.js → fxDisabled). */
html[data-theme="luxe"] {
  --pp-bg:           linear-gradient(160deg, #f3efe6 0%, #faf7f0 60%);
  --pp-header:       linear-gradient(95deg, #17150f 0%, #2a261d 100%);
  --pp-header-text:  #e7dcc1;
  --pp-column:       #efe9dc;
  --pp-card:         #fffdf8;
  --pp-accent:       #b8973f;
  --pp-accent-hover: #9c7f30;
  --pp-accent-text:  #1c180f;
  --pp-soft:         #efe7d3;
  --pp-add:          #f1ead8;
  --pp-text:         #2a2620;
}

/* ============================================================
   2. ПРИМЕНЕНИЕ ТЕМЫ  (безусловно, для всех)
   ============================================================ */

/* --- фон приложения и слой фона доски --- */
html #app { background: var(--pp-bg) !important; }
html #app ._wrapper_1tkwi_5 {
  background: var(--pp-bg) !important;
  background-image: none !important;
}
html #app ._wrapper_1tkwi_5 > * { display: none !important; }

/* --- верхняя шапка --- */
html #app ._wrapper_1o9kk_5 { background: var(--pp-header) !important; }
html #app ._wrapper_1o9kk_5,
html #app ._wrapper_1o9kk_5 a,
html #app ._wrapper_1o9kk_5 i.icon,
html #app ._wrapper_1o9kk_5 [class*="_tab_"],
html #app ._wrapper_1o9kk_5 [class*="_name_"],
html #app ._wrapper_1o9kk_5 [class*="_link_"],
html #app ._wrapper_1o9kk_5 [class*="_title_"] {
  color: var(--pp-header-text) !important;
}
html #app ._wrapper_1o9kk_5 svg { fill: var(--pp-header-text) !important; }
html #app [class*="_tab_"] { border-radius: 12px 12px 0 0 !important; }
/* --- активный проект (вкладка в шапке) ---
   Planka выделяет активную вкладку лишь слабым тёмным наслоением
   (#0000003d) — на тёмной графитовой шапке «Лакшери · Айвори» его не
   видно. Заливаем активный проект акцентом темы → сразу понятно, какой
   проект открыт. Класс _tabActive_<hash> — берём по подстроке. */
/* мягкая полупрозрачная заливка акцентом + тонкая акцентная полоса снизу */
html:not([data-theme="dark"]):not([data-theme="luxe-dark"]) #app ._wrapper_1o9kk_5 [class*="_tabActive_"] {
  background: color-mix(in srgb, var(--pp-accent) 20%, transparent) !important;
  box-shadow: inset 0 -3px 0 var(--pp-accent) !important;
}
html:not([data-theme="dark"]):not([data-theme="luxe-dark"]) #app ._wrapper_1o9kk_5 [class*="_tabActive_"]:hover {
  background: color-mix(in srgb, var(--pp-accent) 28%, transparent) !important;
}
/* имя активного проекта — жирное, в цвете текста шапки (читаемо на любой шапке) */
html:not([data-theme="dark"]):not([data-theme="luxe-dark"]) #app ._wrapper_1o9kk_5 [class*="_tabActive_"] [class*="_name_"] {
  color: var(--pp-header-text) !important;
  font-weight: 700 !important;
}

/* --- колонки (списки) --- */
html #app [class*="_outerWrapper_"] {
  background: var(--pp-column) !important;
  border-radius: 14px !important;
}

/* --- карточки --- */
html #app [class*="_card_"] {
  background: var(--pp-card) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(120, 40, 70, 0.1) !important;
}

/* --- кнопки «добавить карточку / список» --- */
html #app [class*="_addCardButton_"],
html #app [class*="_addListButton_"] {
  background: var(--pp-add) !important;
  color: var(--pp-text) !important;
  fill: var(--pp-text) !important;
  border-radius: 10px !important;
}
html #app [class*="_addCardButton_"]:hover,
html #app [class*="_addListButton_"]:hover {
  background: var(--pp-soft) !important;
}

/* --- кнопки Semantic UI --- */
html .ui.button {
  background-color: var(--pp-soft) !important;
  color: var(--pp-text) !important;
  border-radius: 10px !important;
}
html .ui.button:hover {
  background-color: var(--pp-accent) !important;
  color: var(--pp-accent-text) !important;
}
html .ui.primary.button {
  background-color: var(--pp-accent) !important;
  color: var(--pp-accent-text) !important;
}
html .ui.primary.button:hover {
  background-color: var(--pp-accent-hover) !important;
}

/* --- поля ввода --- */
html .ui.input > input,
html .ui.form input,
html .ui.form textarea,
html textarea {
  border-radius: 10px !important;
}
html .ui.input > input:focus,
html .ui.form input:focus,
html .ui.form textarea:focus {
  border-color: var(--pp-accent) !important;
}

/* --- модалки, поповеры, меню, выпадайки --- */
html .ui.modal,
html .ui.modal > .content {
  border-radius: 18px !important;
}
html .ui.popup { border-radius: 14px !important; }
html .ui.menu,
html .ui.dropdown,
html .ui.dropdown .menu { border-radius: 10px !important; }
html .ui.card,
html .ui.cards > .card { border-radius: 14px !important; }
html .ui.label { border-radius: 7px !important; }

/* --- аватары — круглые --- */
html [class*="Avatar"],
html .ui.avatar.image,
html .ui.avatar.image img { border-radius: 50% !important; }

/* --- скроллбары и выделение --- */
html ::-webkit-scrollbar-thumb {
  background: var(--pp-soft) !important;
  border-radius: 8px !important;
}
html ::selection {
  background: var(--pp-soft);
  color: var(--pp-text);
}

/* ============================================================
   2b. ClickUp — точечные доводки под чистый стиль приложения:
       нейтральные (не розовые) тени, тонкие серые рамки карточек/
       колонок, чуть меньшее скругление — как в ClickUp.
   ============================================================ */
html[data-theme="clickup"] #app [class*="_card_"] {
  border: 1px solid #e6e8eb !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06) !important;
}
html[data-theme="clickup"] #app [class*="_card_"]:hover {
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.12) !important;
}
html[data-theme="clickup"] #app [class*="_outerWrapper_"] {
  border-radius: 10px !important;
}
html[data-theme="clickup"] ::-webkit-scrollbar-thumb {
  background: #d3d6db !important;
}
html[data-theme="clickup"] ::selection {
  background: #d9d3fb;
  color: #2c3340;
}

/* ============================================================
   2c. «Лакшери · Айвори» — строгие доводки: тонкие золотые hairline-
       границы, сдержанные тени, уменьшенное скругление (дорогой
       минимализм), золотистый акцент в шапке и на «сегодня».
   ============================================================ */
html[data-theme="luxe"] #app [class*="_card_"] {
  border: 1px solid #e7ddc6 !important;
  border-radius: 7px !important;
  box-shadow: 0 1px 2px rgba(40, 33, 12, 0.06) !important;
}
html[data-theme="luxe"] #app [class*="_card_"]:hover {
  border-color: #cdb87e !important;
  box-shadow: 0 3px 12px rgba(120, 92, 20, 0.14) !important;
}
html[data-theme="luxe"] #app [class*="_outerWrapper_"] {
  border: 1px solid #e7ddc6 !important;
  border-radius: 9px !important;
}
html[data-theme="luxe"] #app ._wrapper_1o9kk_5 {
  border-bottom: 1px solid #c8a951 !important;
}
html[data-theme="luxe"] #app [class*="_tab_"] { border-radius: 8px 8px 0 0 !important; }
html[data-theme="luxe"] .ui.button { border-radius: 7px !important; }
html[data-theme="luxe"] .ui.label { border-radius: 4px !important; }
html[data-theme="luxe"] ::-webkit-scrollbar-thumb { background: #d8cca9 !important; }
html[data-theme="luxe"] ::selection { background: #ece0c0; color: #2a2620; }

/* ============================================================
   3. МАРМЕЛАДНЫЙ МИШКА + ПУЗЫРИ  (включён всегда)
   Слой pointer-events:none — кликам по доске не мешает; кликабелен
   только сам мишка. z-index 6 — над доской и шапкой, под модалками.
   ============================================================ */

#pink-fx {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
}

/* --- мишка --- */
.pf-bear-wrap {
  position: absolute;
  right: 20px;
  bottom: 4px;
  width: 140px;
  transform-origin: 50% 94%;
  animation: pf-bob 3.8s ease-in-out infinite;
}
@keyframes pf-bob {
  0%, 100% { transform: translateY(0) rotate(-2.5deg); }
  50%      { transform: translateY(-7px) rotate(2.5deg); }
}
/* темп покачивания зависит от настроения */
html[data-bear-mood="ecstatic"] .pf-bear-wrap { animation-duration: 2.5s; }
html[data-bear-mood="happy"]    .pf-bear-wrap { animation-duration: 3.1s; }
html[data-bear-mood="sad"]      .pf-bear-wrap { animation-duration: 5.4s; }
html[data-bear-mood="verysad"]  .pf-bear-wrap { animation-duration: 6.2s; }

.pf-bear {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: auto;          /* кликается только мишка */
  cursor: pointer;
  transform-origin: 50% 90%;
  filter:
    drop-shadow(0 0 10px rgba(255, 90, 150, 0.55))
    drop-shadow(0 6px 10px rgba(200, 40, 90, 0.4));
  transition: filter 0.15s ease;
}
.pf-bear:hover {
  filter:
    drop-shadow(0 0 14px rgba(255, 110, 165, 0.7))
    drop-shadow(0 6px 10px rgba(200, 40, 90, 0.4))
    brightness(1.08) saturate(1.1);
}

/* варианты лица по настроению */
.pf-bear .mv { display: none; }
html[data-bear-mood="ecstatic"] .pf-bear [data-moods~="ecstatic"],
html[data-bear-mood="happy"]    .pf-bear [data-moods~="happy"],
html[data-bear-mood="neutral"]  .pf-bear [data-moods~="neutral"],
html[data-bear-mood="sad"]      .pf-bear [data-moods~="sad"],
html[data-bear-mood="verysad"]  .pf-bear [data-moods~="verysad"] { display: inline; }

/* блёстки */
.pf-spark {
  transform-box: fill-box;
  transform-origin: center;
  animation: pf-twinkle 2.4s ease-in-out infinite;
}
.pf-spark.s2 { animation-delay: 1.1s; }
@keyframes pf-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.7); }
  50%      { opacity: 0.95; transform: scale(1.1); }
}

/* крутящийся вихрь леденца */
.pf-lolly-swirl {
  transform-box: fill-box;
  transform-origin: center;
  animation: pf-lolly-spin 7s linear infinite;
}
@keyframes pf-lolly-spin {
  to { transform: rotate(360deg); }
}

/* облачко-«дуновение» у мордочки */
.pf-puff {
  position: absolute;
  right: 80px;
  bottom: 104px;
  width: 24px;
  height: 17px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.85), rgba(255,255,255,0) 70%);
  opacity: 0;
  animation: pf-puff 2.6s ease-out infinite;
}
@keyframes pf-puff {
  0%   { opacity: 0; transform: scale(.3) translate(0, 0); }
  25%  { opacity: .8; }
  100% { opacity: 0; transform: scale(1.6) translate(-16px, -14px); }
}

/* --- пузыри --- */
.pf-emitter {
  position: absolute;
  right: 90px;
  bottom: 92px;
  width: 0;
  height: 0;
}
.pf-b {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--size, 40px);
  height: var(--size, 40px);
  margin-left: calc(var(--size, 40px) / -2);
  margin-bottom: calc(var(--size, 40px) / -2);
  will-change: transform, opacity;
  animation: pf-rise var(--dur, 12s) linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes pf-rise {
  0%   { transform: translate(0, 0) scale(.16); opacity: 0; }
  8%   { opacity: 1; }
  90%  { opacity: .85; }
  97%  { transform: translate(var(--dx, -30vw), var(--dy, -82vh)) scale(1.05); opacity: .4; }
  100% { transform: translate(var(--dx, -30vw), var(--dy, -82vh)) scale(1.12); opacity: 0; }
}

/* мыльный пузырь: прозрачный внутри, ободок + блик — текст не закрывает */
.pf-b-in {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: pf-sway var(--sway, 3s) ease-in-out infinite alternate;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.4) 12%, rgba(255,255,255,0) 32%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 60%, rgba(255,170,210,.3) 82%, rgba(255,255,255,.6) 93%, rgba(255,255,255,0) 100%);
  box-shadow: inset 0 0 34px rgba(255,255,255,.5);
}
@keyframes pf-sway {
  0%   { transform: translateX(-9px); }
  100% { transform: translateX(9px); }
}

/* --- облако мыслей --- */
.pf-thought {
  position: absolute;
  right: 64px;
  bottom: 182px;
  max-width: 232px;
  padding: 11px 15px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(180, 40, 90, 0.28);
  font-family: Nunitoga, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.36;
  color: #7a2f48;
  text-align: center;
  animation: pf-thought-in 0.4s ease;
}
.pf-thought[hidden] { display: none; }
.pf-thought::before,
.pf-thought::after {
  content: "";
  position: absolute;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 5px 12px rgba(180, 40, 90, 0.16);
}
.pf-thought::before { width: 18px; height: 18px; right: 20px; bottom: -11px; }
.pf-thought::after  { width: 10px; height: 10px; right: 8px;  bottom: -25px; }
@keyframes pf-thought-in {
  0%   { opacity: 0; transform: scale(0.7) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- 💩 вылетают из просроченных карточек --- */
.pf-poop {
  position: fixed;
  z-index: 7;
  pointer-events: none;
  font-size: var(--sz, 26px);
  line-height: 1;
  will-change: transform, opacity;
  animation: pf-poop-fly var(--dur, 2.6s) ease-out forwards;
}
@keyframes pf-poop-fly {
  0%   { transform: translate(0, 0) rotate(0deg) scale(.4); opacity: 0; }
  18%  { transform: translate(calc(var(--dx, 0px) * 0.25), -16px) rotate(var(--r1, 0deg)) scale(1.05); opacity: 1; }
  100% { transform: translate(var(--dx, 0px), var(--dy, -180px)) rotate(var(--r2, 120deg)) scale(.85); opacity: 0; }
}