/* ============================================================
   Planka — стили инжектов pz-* (pz-filter.js, pz-preview.js,
   pz-panel.js). Всё завязано на наши id/классы (#pz-chips,
   #pz-preview, body.pz-card-open) — если фича выключена через
   pz_off, её узлов и классов нет, и стили ничего не задевают.
   Тёмные темы: html[data-theme="dark"|"luxe-dark"].
   ============================================================ */

/* ---------- A. Чипы исполнителей ---------- */
#pz-chips {
  display: flex;
  flex-wrap: nowrap;          /* одна строка: шапка доски не растёт в высоту */
  flex: 0 1 auto;
  align-items: center;
  gap: 4px;
  margin: 0 12px;
  min-width: 0;
  overflow-x: auto;           /* не влезло — листается вбок */
  scrollbar-width: none;
  font: 500 12px/1 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
#pz-chips::-webkit-scrollbar { display: none; }
/* своя строка под панелью фильтров — когда в неё не влезли */
#pz-chips.pz-chips-row {
  flex: 1 1 100%;
  width: 100%;
  margin: 0 0 6px;
  padding: 0 20px;
  box-sizing: border-box;
}
#pz-chips .pz-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  color: #3a3a3a;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
#pz-chips .pz-chip:hover { background: rgba(255, 255, 255, 0.9); border-color: rgba(0, 0, 0, 0.22); }
#pz-chips .pz-chip:focus-visible { outline: 2px solid #3f7cac; outline-offset: 1px; }
#pz-chips .pz-chip-count {
  min-width: 16px;
  padding: 1px 4px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.08);
  font-size: 10px;
  text-align: center;
}
#pz-chips .pz-chip-active,
#pz-chips .pz-chip-active:hover {
  background: #3f7cac;
  border-color: #3f7cac;
  color: #fff;
}
#pz-chips .pz-chip-active .pz-chip-count { background: rgba(255, 255, 255, 0.25); }
#pz-chips .pz-chip-none.pz-chip-active,
#pz-chips .pz-chip-none.pz-chip-active:hover { background: #8a6d3b; border-color: #8a6d3b; }

html[data-theme="dark"] #pz-chips .pz-chip,
html[data-theme="luxe-dark"] #pz-chips .pz-chip {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: #e6e1ee;
}
html[data-theme="dark"] #pz-chips .pz-chip:hover,
html[data-theme="luxe-dark"] #pz-chips .pz-chip:hover { background: rgba(255, 255, 255, 0.16); }
html[data-theme="dark"] #pz-chips .pz-chip-count,
html[data-theme="luxe-dark"] #pz-chips .pz-chip-count { background: rgba(255, 255, 255, 0.12); }
html[data-theme="dark"] #pz-chips .pz-chip-active,
html[data-theme="luxe-dark"] #pz-chips .pz-chip-active { background: #4d8cc0; border-color: #4d8cc0; color: #fff; }

/* ---------- B. Превью карточки при наведении ---------- */
#pz-preview {
  position: fixed;
  z-index: 1002;
  left: 0;
  top: 0;
  max-width: 320px;
  min-width: 180px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff;
  color: #2b2b2b;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
  font: 400 12.5px/1.45 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s;
}
#pz-preview.pz-preview-visible { opacity: 1; visibility: visible; }
#pz-preview .pz-pv-desc { white-space: normal; word-break: break-word; }
#pz-preview .pz-pv-meta { display: flex; flex-direction: column; gap: 3px; }
#pz-preview .pz-pv-desc + .pz-pv-meta {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
#pz-preview .pz-pv-label { color: #8a8a8a; margin-right: 6px; }
#pz-preview .pz-pv-overdue .pz-pv-text { color: #c0392b; font-weight: 600; }

html[data-theme="dark"] #pz-preview,
html[data-theme="luxe-dark"] #pz-preview {
  background: #2a2233;
  color: #ece6f3;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] #pz-preview .pz-pv-desc + .pz-pv-meta,
html[data-theme="luxe-dark"] #pz-preview .pz-pv-desc + .pz-pv-meta { border-top-color: rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] #pz-preview .pz-pv-label,
html[data-theme="luxe-dark"] #pz-preview .pz-pv-label { color: #a59db0; }
html[data-theme="dark"] #pz-preview .pz-pv-overdue .pz-pv-text,
html[data-theme="luxe-dark"] #pz-preview .pz-pv-overdue .pz-pv-text { color: #ff7a6b; }

/* ---------- C. Открытая карточка — правая панель (от 927 px) ---------- */
@media (min-width: 927px) {
  body.pz-card-open .ui.page.modals.dimmer {
    background: transparent !important;
    pointer-events: none;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  body.pz-card-open .ui.page.modals.dimmer > .ui.modal {
    pointer-events: auto;
    position: relative !important;
    margin: 0 !important;
    width: 40vw !important;
    min-width: 560px !important;
    max-width: calc(100vw - 320px) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    border-radius: 0 !important;
    /* сверху полоса под крестик и стрелку «назад» (и под плашки тем,
       которые theme-switcher.js рисует поверх шапки) */
    padding-top: 40px !important;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.18) !important;
    animation: pz-panel-in 0.14s ease-out;
  }
  /* крестик — в правом верхнем углу панели, не уезжает при прокрутке.
     fixed, а не float/sticky: плавающий крестик сужал всю сетку карточки
     (ui grid — отдельный блочный контекст и обходит float целиком) */
  body.pz-card-open .ui.page.modals.dimmer > .ui.modal > i.close.icon {
    position: fixed !important;
    top: 8px !important;
    right: 10px !important;
    left: auto !important;
    margin: 0 !important;
    z-index: 1003;
  }
  /* в узкой панели родная сетка 12/4 режет подписи кнопок справа —
     даём правому столбцу треть ширины */
  body.pz-card-open .ui.page.modals.dimmer > .ui.modal .ui.grid > .row > .twelve.wide.column {
    width: 68% !important;
  }
  body.pz-card-open .ui.page.modals.dimmer > .ui.modal .ui.grid > .row > .four.wide.column {
    width: 32% !important;
  }
  /* стрелка «к предыдущей карточке» у Planka торчит на 120 px левее
     модалки — у панели ставим её маленькой кнопкой у левого края */
  body.pz-card-open .ui.page.modals.dimmer > .ui.modal > button:has(> i.arrow.left.icon) {
    position: absolute !important;
    left: 4px !important;
    top: 6px !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    align-items: center;
    background: rgba(0, 0, 0, 0.06) !important;
    z-index: 5;
  }
  body.pz-card-open .ui.page.modals.dimmer > .ui.modal > button:has(> i.arrow.left.icon) > i.icon {
    position: static !important;
    color: rgba(0, 0, 0, 0.45) !important;
    font-size: 1em !important;
  }
  html[data-theme="dark"] body.pz-card-open .ui.page.modals.dimmer > .ui.modal > button:has(> i.arrow.left.icon) > i.icon,
  html[data-theme="luxe-dark"] body.pz-card-open .ui.page.modals.dimmer > .ui.modal > button:has(> i.arrow.left.icon) > i.icon {
    color: rgba(255, 255, 255, 0.6) !important;
  }
  html[data-theme="dark"] body.pz-card-open .ui.page.modals.dimmer > .ui.modal > i.close.icon,
  html[data-theme="luxe-dark"] body.pz-card-open .ui.page.modals.dimmer > .ui.modal > i.close.icon {
    color: rgba(255, 255, 255, 0.75) !important;
  }
  html[data-theme="dark"] body.pz-card-open .ui.page.modals.dimmer > .ui.modal,
  html[data-theme="luxe-dark"] body.pz-card-open .ui.page.modals.dimmer > .ui.modal {
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.55) !important;
  }
}
@keyframes pz-panel-in {
  from { transform: translateX(24px); opacity: 0.6; }
  to { transform: none; opacity: 1; }
}