/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
/* Шрифт Mulish хостится локально — см. fonts.css */

body {
  background-color: var(--color-page);
  font-family: "Mulish", system-ui, sans-serif;
}
#modal-background {
  background-color: rgba(0, 0, 0, 0.6);
  animation: fadeIn 0.2s ease-in;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.breadcrumb {
  /*position: relative;*/
  background-color: white;
  /*top: calc(-1 * var(--size-6));*/
  /*width: calc(100% + var(--size-6)); !* Полная ширина main + компенсация для gap *!*/
  /*margin-left: calc(-1 * var(--size-6)); !* Убираем отступ слева *!*/
  /*margin-right: calc(-1 * var(--size-6)); !* Убираем отступ справа *!*/
  padding: 10px;
  align-items: center;
  /*color: var(--color-text-subtle);*/
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  gap: 7px;
  overflow-wrap: break-word;
  a {
    padding-block-end: 2px;
  }
  img, svg {
    filter: brightness(0.8);
  }
  span {
    margin-bottom: 2px;
    color: var(--color-muted);
  }
  a:hover {
    color: var(--color-ink);
  }
  @media (width >= 40rem) {
    /*gap: var(--size-2);*/
  }
  @media (width < 40rem) {
    z-index: -1;
    top: calc(1 * var(--size-0,7)); /* Корректируем отступ сверху */
    margin-left: calc(1 * var(--size-1)); /* Корректируем отступ слева */
  }
}

.completed {
  background-color: var(--color-status-done-bg);
}
.in_progress {
  background-color: var(--color-status-progress-bg);
}
.canceled {
  background-color: var(--color-status-cancel-bg);
}

/* Статусы: мягкие «пилюли» — светлая подложка + цветной текст */
.badge-created {
  background-color: var(--color-status-new-bg);
  color: var(--color-status-new-fg);
  border-radius: 999px;
}
.badge-in_progress {
  background-color: var(--color-status-progress-bg);
  color: var(--color-status-progress-fg);
  border-radius: 999px;
}
.badge-completed {
  background-color: var(--color-status-done-bg);
  color: var(--color-status-done-fg);
  border-radius: 999px;
}
.badge-canceled {
  background-color: var(--color-status-cancel-bg);
  color: var(--color-status-cancel-fg);
  border-radius: 999px;
}

/* Приоритеты задач — та же логика мягких пилюль */
.low {
  background-color: var(--color-soft);
  color: var(--color-ink-soft);
  border-radius: 999px;
}
.medium {
  background-color: var(--color-info-soft);
  color: var(--color-info);
  border-radius: 999px;
}
.high {
  background-color: var(--color-status-progress-bar);
  color: var(--color-status-progress-bg);
  border-radius: 999px;
}
.critical {
  background-color: var(--color-status-cancel-bg);
  color: var(--color-status-cancel-fg);
  border-radius: 999px;
}

/* Табы */
ul.nav.custom-tabs {
  margin-top: 25px;
  --vz-nav-link-padding-x: 1rem;
  --vz-nav-link-padding-y: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  border-bottom: 1px solid var(--color-line);
}
.nav-tabs-custom .nav-item {
  position: relative;
}
.nav-link {
  display: block;
  padding: var(--vz-nav-link-padding-y) var(--vz-nav-link-padding-x);
  font-size: 15px;
  font-weight: bold;
  /*color: var(--vz-nav-link-color);*/
  background: 0 0;
  border: 0;
  -webkit-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
  color: var(--color-ink-soft);
  padding-bottom: 6px;
}
.nav-link.active, .nav-link:hover {
  color: var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
}

/* Базовый стиль счетчика */
.tab-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 9999px;
  margin-left: 4px;
  transition: all 0.3s ease;
  /* Цвет по умолчанию (неактивный таб) */
  background-color: var(--color-soft);
  color: var(--color-ink-soft);
}

/* Цвет, когда родительский таб активен */
.nav-link.active .tab-counter,
.mobile-tab.active .tab-counter {
  background-color: var(--color-accent);
  color: white;
}

/* Анимация пульсации при обновлении */
@keyframes pulse-update {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); box-shadow: 0 0 10px rgba(10, 179, 156, 0.5); }
  100% { transform: scale(1); }
}

.animate-ping-once {
  animation: pulse-update 0.5s ease-out;
}

#tab-content .card {
  padding: 30px;
  h4 {
    color: var(--color-graphite);
    font-weight: bold;
    margin-bottom: 10px;
  }
  p {
    color: var(--color-muted);
  }
}
@media (max-width: 768px) {
  .apexcharts-legend.apx-legend-position-bottom.apexcharts-align-center, .apexcharts-legend.apx-legend-position-top.apexcharts-align-center {
    justify-content: start !important;
  }
  ul.nav.custom-tabs {
    margin-top: 10px;
    font-size: 13px;
  }
  #tab-content .card {
    padding: 20px;
    h4 {
      margin-bottom: 10px;
    }
  }
}

.comment-area {
  display: block;
  width: 100%;
  font-size: 14px;
  line-height: 1.5;
}
.comment-area textarea {
  background-color: var(--color-soft);
  padding: .5rem .9rem;
  width: 100%;
  border: 0;
  outline-color: var(--color-soft);
}
.children {
  margin-left: 30px;
}

/* TODO: надо исправить. Альтернатива ".sidebar.active ~ .main .user-buttons" */
header {
  width: -webkit-fill-available;
}

.item-icon {
  width: 80px;
  height: 80px;
  margin-right: 3px;
  padding: 5px;
  border-radius: 50%;
  border: 1px solid var(--color-muted);
}

.text-muted {
  color: var(--color-muted) !important;
}

.accordion-icon svg {
  transition: transform 0.3s ease;
}
.accordion-icon.open svg {
  transform: rotate(180deg);
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mobile-tab {
  position: relative;
  color: var(--color-ink-soft);
  transition: color 0.3s ease;
}
.mobile-tab.active {
  color: var(--color-accent);
}
.mobile-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 2px;
  background-color: var(--color-accent);
}
.tabs-container {
  border-bottom: 1px solid var(--color-line);
  margin-bottom: 1px;
}
#more-menu {
  transition: all 0.3s ease-in-out;
}

.item-created {
  border-left: 3px solid var(--color-status-new);
}

.item-completed {
  border-left: 3px solid var(--color-accent);
}

.item-in_progress {
  border-left: 3px solid var(--color-status-progress);
}
.item-canceled {
  border-left: 3px solid var(--color-status-canceled);
}

.bg-overlay-pattern {
  background-image: url("/assets/deloproizvodstvo/bg-pattern-f445a2e1.png");
  background-color: transparent;
  background-position: center;
  background-size: cover;
  opacity: .2;
}
.bg-overlay-1 {
  position: absolute;
  height: 100%;
  width: 100%;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
}
.hero-carousel {
  position: relative;
  z-index: 1;
}
.hero-carousel .hero-img-patten-top {
  position: absolute;
  right: -50px;
  top: -70px;
  max-width: 230px;
}
.hero-carousel .hero-img-patten-bottom {
  position: absolute;
  left: -70px;
  bottom: -70px;
  max-width: 230px;
}

.icon-effect {
  position: relative;
  height: 3rem;
  width: 3rem;
}
.icon-effect--small {
  height: 2rem;
  width: 2rem;
}
/* Эффект подсветки позади иконки */
.icon-effect::before {
  content: "";
  position: absolute;
  inset: auto auto 4px -7px;
  width: 24px;
  height: 24px;
  background-color: rgb(10 179 156 / 0.2);
  border-radius: 50%;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Меньший вариант эффекта для галочки */
.icon-effect--small::before {
  bottom: 5px;
  left: -2px;
  width: 20px;
  height: 20px;
}
/* Ховер-анимация (приятное "дыхание" иконки) */
.icon-effect:hover::before {
  transform: scale(1.2);
  opacity: 0.8;
}
/* Заголовок рядом с иконкой */
.icon-title {
  color: var(--color-accent);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* расстояние между иконкой и текстом */
}

/* Плавающий помощник.
   ВАЖНО: этот файл отдаётся Propshaft без обработки — @apply здесь не работает.
   Геометрия: канва Lottie 180×180, но видимый робот занимает лишь ~58×75px
   в её центре (x≈63, y≈53). Поэтому:
   - контейнер сдвинут за край экрана так, чтобы сам робот был в ~16px от угла;
   - клики ловит только зона .assistant-hit точно над роботом. */
.assistant-float {
  position: fixed;
  bottom: -36px;
  right: -42px;
  z-index: 50;
  pointer-events: none;
}

.assistant-button {
  pointer-events: none; /* прозрачные поля канвы не должны перехватывать клики */
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
}

/* Кликабельная зона по габаритам видимого робота */
.assistant-hit {
  pointer-events: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 80px;
  border-radius: 1rem;
  cursor: pointer;
}

.assistant-button:focus-visible .assistant-hit {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.assistant-button:has(.assistant-hit:hover) .assistant-lottie {
  transform: scale(1.05);
}

.assistant-lottie {
  width: 180px !important;
  height: 180px !important;
  pointer-events: none;
  transition: transform 0.2s ease-out;
}

/* Панель помощи: над головой робота, прижата к правому краю с отступом */
.assistant-panel {
  position: absolute;
  bottom: 139px;
  right: 58px;
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
}

.assistant-panel:not(.hidden) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Badge (точка) — у «головы» робота, в правом верхнем углу кликабельной зоны */
.assistant-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  background: var(--color-danger-500);
  border: 2px solid white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.assistant-badge.hidden { display: none; }

.bg-emerald-100 {background-color: oklch(95% 0.052 163.051)}
.bg-emerald-500 {background-color: oklch(69.6% 0.17 162.48)}
.text-emerald-800 {color: oklch(43.2% 0.095 166.913)}
.bg-cyan-100 {background-color: oklch(95.6% 0.045 203.388)}
.bg-cyan-500 {background-color: oklch(71.5% 0.143 215.221)}
.text-cyan-800 {color: oklch(45% 0.085 224.283)}
.bg-orange-100 {background-color: oklch(95.4% 0.038 75.164)}
.bg-orange-500 {background-color: oklch(70.5% 0.213 47.604)}
.text-orange-800 {color: oklch(47% 0.157 37.304)}

.help-article {
  max-width: 900px;
  line-height: 1.6;
  font-size: 15px;
  color: var(--color-charcoal);
}

.help-article h2 {
  margin-top: 32px;
  margin-bottom: 12px;
  font-size: 22px;
  font-weight: 600;
  border-bottom: 2px solid var(--color-line);
  padding-bottom: 6px;
}

.help-article h3 {
  margin-top: 24px;
  margin-bottom: 8px;
  font-size: 17px;
  font-weight: 600;
}

.help-article p {
  margin: 8px 0 12px;
}

.help-article ul {
  margin: 8px 0 16px 20px;
}

.help-article li {
  margin-bottom: 6px;
  list-style: disc;
}

.help-note {
  background: var(--color-soft);
  border-left: 4px solid var(--color-info);
  padding: 12px 16px;
  margin: 16px 0;
  font-size: 14px;
}

.help-warning {
  background: var(--color-warning-soft);
  border-left: 4px solid var(--color-warning);
  padding: 12px 16px;
  margin: 16px 0;
  font-size: 14px;
}

.help-meta {
  background: var(--color-soft);
  padding: 12px 16px;
  border-radius: 6px;
  margin-top: 12px;
  font-size: 14px;
}

.help-meta strong {
  font-weight: 600;
}

.help-list-title {
  font-weight: 600;
  margin-top: 12px;
}