/* ============================= */
/*          ОСНОВНЫЕ СТИЛИ       */
/* ============================= */
body {
  background-color: #f1efec;
  color: #0D1821;
  font-family: 'Inter', 'Roboto', system-ui, Arial, sans-serif;
  margin: 0;
  padding: 0;
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* ============================= */
/*      ВЕРХНЯЯ ПАНЕЛЬ (NAVBAR)  */
/* ============================= */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--navbar-bg);
  backdrop-filter: blur(10px); /* Эффект стекла */
  border-bottom: 1px solid var(--navbar-border);
  padding: 10px 20px;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar__brand {
  color: #0D1821;
  font-weight: 600;
  font-size: 20px;
}

.navbar__logo {
  font-weight: 600;
  font-size: 20px;
  color: #0D1821;
}

/* Счётчик новых задач */
.new-tasks-counter {
  margin-left: auto;
  margin-right: 14px;
}

.new-tasks-counter .badge {
  background-color: #f1efec !important;
  font-size: 14px;
  font-weight: normal;
  padding: 6px 12px; 
  border: none;
  border-radius: 12px;
  min-width: 80px;
  min-height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.1s ease;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: #0D1821;
  text-align: center;
}

.new-tasks-counter .badge i {
  margin-right: 0px;
}


/* ============================= */
/*         SELECT ЭЛЕМЕНТЫ      */
/* ============================= */
select.form-select {
  height: 38px;
  border-radius: 8px;
  border: 1px solid #E0E1E3;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  font-size: 16px;
  padding: 8px 12px;
  appearance: none;
}

.form-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(186, 202, 201, 0.3);
}

/* ============================= */
/*           КНОПКИ             */
/* ============================= */
.btn {
  display: inline-block;
  font-size: 14px;
  padding: 10px 16px;
  border: none;
  border-radius: 12px;
  transition: background-color 0.2s ease, transform 0.1s ease;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: #0D1821;
  text-align: center;
}

.btn-add {
  background-color: #ff9fcf;
  min-width: 163px; /* Главный экран "Добавить задачу" */
}
.btn-ms {
  background-color: #aee5e0;
  min-width: 163px; /* Кнопка с логотипом MoyStock */
}
.btn-completed {
  background-color: #c2c1c1;
  min-width: 80px;
  min-height: 33px;
  padding: 6px 12px;  /* Главный экран "Завершённые" */
}
.btn-primary1 {
  background-color: #c5a1eb; /* Главный экран "Найти и Сортировать"/Логин "Войти" */
}
.btn-success1 {
  background-color: #ff9fcf; /* Добавление задачи "Добавить"/Завершенные задачи "Восстановить выбранные"/Редактировать задачу "Сохранить изменения"*/
}
.btn-secondary1 {
  background-color: #c2c1c1; /* Добавление задачи "Отмена"/Завершенные задачи "Назад к списку"/Стутус "Отмена"/Редактировать задачу "Отмена"/Поиск задачи "Назад к списку"*/
} 
.btn-danger1 {
  background-color: #c5a1eb; /* Завершенные задачи "Удалить выбранные"/Редактировать задачу "Удалить фото" */
}
.btn-update {
  background-color: #ff9fcf; /* Детали задачи "Статус" */ 
}
.btn-warning1 {
  background-color: #aee5e0; /* Детали задачи "Редактировать" */ 
}
.btn-delete1  {
  background-color: #c5a1eb; /* Детали задачи "Удалить" */ 
}
.btn-back {
  background-color: #c2c1c1; /* Детали задачи "Назад" */ 
}
.btn-primary2 {
  background-color: #c5a1eb; /* Стутус "Обновить" */
}
.btn-logout {
  min-width: 80px;
  background: none;
  border: none;
  font-size: 14px;
  padding: 6px 12px;           /* Главный экран "Выйти" */
  cursor: pointer;
  transition: color 0.2s ease;
  text-decoration: none;
}
.btn-logout:hover {
  color: #444444; /* Лёгкое затемнение при наведении */
}
.btn-task-actions {
  margin-bottom: 15px;
} 
.btn-link1 {
  background-color: #ff9fcf; /* Стутус "Обновить" */
}
.btn-sewing {
  background-color: #c5a1eb;
  min-width: 80px;
  min-height: 33px;
  padding: 6px 12px;  /* Главный экран "Цех пошива" */
}
.btn-open {
  background-color: #aee5e0;
  min-width: 50px;
  padding: 6px 12px;  /* Главный экран "Открыть" */
}
.btn-addchek {
  background-color: #aee5e0;
  min-width: 140px; /* Главный экран "Счета (Excel)" */
}
.btn-loadchek {
  background-color: #ff9fcf;
  min-width: 140px; /* Главный экран "Счета (список)" */
}


/* ============================= */
/*        ФОРМЫ И КНОПКИ             */
/* ============================= */

/* Поиск и сортировка на одной строке */
.form-control, .form-select, .btn-primary1 {
  height: 38px; /* Единая высота для компактности */
  border-radius: 8px;
  border: 1px solid #E0E1E3;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  font-size: 16px;
  padding: 8px 12px;
}

.form-control:focus, .form-select:focus, .btn-primary1:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(202, 192, 186, 0.3);
}

textarea.form-control {
  min-height: 200px; /* Минимальная высота для удобства ввода */
  max-height: 400px; /* Ограничение максимальной высоты */
}

/* ============================= */
/*            КАРТОЧКИ         */
/* ============================= */
.card {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08), inset 0 -2px 4px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
}


/* ============================= */
/*           КАРТОЧКИ         */
/* ============================= */

/* Контейнер для карточек с вертикальной прокруткой */
.task-list {
  display: grid;
  gap: 8px; /* Уменьшили отступы между карточками для компактности */
  padding: 10px;
  overflow-y: auto; /* Вертикальная прокрутка */
  max-height: 75vh; /* Немного уменьшили высоту для большего числа задач */
  border-radius: 12px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08), inset 0 -2px 4px rgba(0, 0, 0, 0.08); /* Тени сверху и снизу */
}

/* Стили карточек */
.task-card {
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease; /* Добавили анимацию для фона */
  min-width: 220px;
  max-width: 100%;
  background-color: #fff; /* Базовый фон по умолчанию */
}

.task-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Фон для разных статусов */
.task-card.status-new {
  background-color: #f8e4ee; /* Лёгкий жёлтый для "Новая" */
}

.task-card.status-cutting {
  background-color: #e2f8f7; /* Лёгкий бирюзово-серый для "Цех раскроя" */
}

.task-card.status-sewing {
  background-color: #e2e6fe; /* Лёгкий бежевый для "Цех пошива" */
}

.task-card.status-completed {
  background-color: #dcdbdb; /* Лёгкий зелёный для "Завершена" */
}

.task-card.status-done {
  background-color: #c2c1c1; /* Лёгкий зелёный для "Готово" */
}

/* Оптовый статус (для админа) */
.task-card.status-Оптовый {
  background-color: #f4efe5; /* Мягкий оранжевый */
}

/* Дефолтный стиль для задач без статуса (если что-то пойдёт не так) */
.task-card:not([class*="status-"]) {
  background-color: #FFF9E6; /* Лёгкий жёлтый как дефолт для "Новая" */
}

.task-card p {
  margin: 4px 0;
  font-size: 14px;
  color: #0D1821;
}
.task-card p.status {
  margin: 4px 0;
  font-size: 14px;
  color: #0D1821;
}

.task-card .title {
  font-weight: 700;
  font-size: 16px;
  color: #0D1821;
  margin-bottom: 6px;
  border: none;
}

/* Статус и исполнитель на одной строке */
.task-card .status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.status {
  font-weight: 500;
}

.task-card input[type="checkbox"] {
  width: 20px; /* Увеличиваем ширину */
  height: 20px; /* Увеличиваем высоту */
  margin: 0; /* Убираем дефолтные отступы */
  cursor: pointer; /* Показываем указатель мыши/пальца */
}

.task-list label {
  display: flex;
  align-items: center;
  gap: 5px;
}

.task-list input[type="checkbox"]#select-all {
  width: 24px; /* Увеличиваем ширину */
  height: 24px; /* Увеличиваем высоту */
  margin: 0; /* Убираем дефолтные отступы */
  cursor: pointer; /* Показываем указатель мыши/пальца */
}

@media (max-width: 375px) {
  .task-list input[type="checkbox"]#select-all {
      width: 30px; /* Ещё больше для удобства на iPhone */
      height: 30px;
  }
}

/* ============================= */
/*       АДАПТАЦИЯ ДЛЯ МОБИЛЬНЫХ */
/* ============================= */
@media (max-width: 768px) {
  .navbar {
    padding: 5px;
  }
  .navbar__logo {
    max-height: 30px; /* Уменьшаем логотип на мобильных */
  }
  .btn {
    padding: 6px 12px;
    text-align: center;
  }
  .task-list {
    padding: 5px;
  }
  .task-card {
    min-width: 180px;
  }
  .form-control, .form-select, .btn-primary1 {
    height: 40px;
    font-size: 16px;
    padding: 8px 12px;
  }
}
/* Адаптация для мобильных устройств (iPhone) */
@media (max-width: 375px) {
  .task-card input[type="checkbox"] {
      width: 20px; /* Ещё больше для удобства на iPhone */
      height: 20px;
  }
}
@media (max-width: 768px) {
  .task-photo {
    width: 120px;  /* уменьшенный размер для мобильных */
    height: 160px;
  }
  
  /* Адаптация таблиц для мобильных устройств */
  .table-responsive {
    font-size: 12px;
  }
  
  .table th,
  .table td {
    padding: 8px 6px;
  }
  
  .table th:first-child,
  .table td:first-child {
    min-width: 80px;
  }
  
  .table th:last-child,
  .table td:last-child {
    min-width: 70px;
  }
  
  .btn-sm {
    padding: 4px 8px;
    font-size: 12px;
  }
}

/* Стили для модального окна (lightbox) */
.lightbox-modal {
  display: none; /* Скрыто по умолчанию */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9); /* затемнённый фон */
  padding-top: 60px;
}

.lightbox-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 80%;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}

.lightbox-close:hover,
.lightbox-close:focus {
  color: #bbb;
}

.task-photo {
  max-width: 200px;
  cursor: pointer;
  margin: 10px;
}
/* ... (текущий style.css) ... */

/* Стили для блока с действиями под заголовком "Детали задачи", вне карточки */
.task-actions {
  margin: 20px 0; /* Отступы сверху и снизу для пространства */
  padding: 15px 0; /* Внутренние отступы для визуального комфорта */
  display: flex;
  justify-content: center; /* Центрируем кнопки по горизонтали */
  width: 100%; /* Занимаем всю ширину страницы */
}

/* Контейнер для группировки кнопок */
.button-group {
  display: flex;
  justify-content: center; /* Убедимся, что кнопки центрированы */
  align-items: center;
  gap: 10px; /* Расстояние между кнопками */
  flex-wrap: nowrap; /* Позволяем кнопкам переноситься на новую строку при сужении */
}
/* Стили для контейнера мини-карточек */
.symbol-cards {
  display: flex;
  gap: 15px; /* Расстояние между карточками */
  flex-wrap: wrap; /* Перенос на новую строку на узких экранах */
}

/* Стили для каждой мини-карточки */
.symbol-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px; /* Ширина карточки */
  height: 40px; /* Высота карточки */
  border-radius: 12px; /* Закруглённые углы, как в твоём дизайне */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Лёгкая тень, как у кнопок */
  cursor: pointer; /* Указатель мыши/пальца для кликабельности */
  background-color: #fff; /* Белый фон по умолчанию */
  transition: transform 0.1s ease; /* Анимация при наведении/тапах */
}
/* Стили для контейнера мини-карточек (для описания) */
.description-symbols {
  display: flex;
  gap: 15px; /* Расстояние между карточками */
  flex-wrap: wrap; /* Перенос на новую строку на узких экранах */
}

/* Стили для конкретных карточек */
.symbol-card:nth-child(1) { /* Черное сердечко */
  background-color: #ff9fcf; /* Розовый фон, как в твоём дизайне */
}

.symbol-card:nth-child(2) { /* WB 💜 */
  background-color: #c5a1eb; /* Фиолетовый фон, как на изображении */
}
/* Стили для конкретных карточек (для описания) */
.symbol-card:nth-child(3) { /* 🅒 */
  background-color: #aee5e0; 
}
.symbol-card:nth-child(4) { /* 🅓 */
  background-color: #fff; 
}
.symbol-card:nth-child(5) { /* 🅔 */
  background-color: #c2c1c1; 
}