/* НАЧАЛО стиль для страницы client_create.html, client_view_edit.html, task_create.html НАЧАЛО */
    .client-h2 {
      margin-bottom: 16px;
      font-size: 20px;
      font-weight: 600;
      user-select: none;
    }
    
    .form-field {
      display: flex;
      flex-direction: column;
      margin-bottom: 16px;
    }

    .form-field input,
    .form-field textarea {
      background-color: #1f1f1f;
      border: none;
      border-radius: 8px;
      padding: 12px;
      color: #fff;
      font-size: 16px;
    }

    .form-field select {
      width: 100%;
      padding: 12px;
      border: none;
      border-radius: 8px;
      border-color: #fff;
      font-size: 16px;
      font-family: inherit;
      background-color: #1f1f1f;
      color: #fff;
      transition: border 0.2s, box-shadow 0.2s;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%226%22%20viewBox%3D%220%200%2010%206%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200l5%206%205-6z%22%20fill%3D%22%23999%22/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 10px 6px;
    }

    .form-field select:focus {
      border-color: #2ea94f;
      outline: none;
      box-shadow: 0 0 0 2px rgba(46, 169, 79, 0.2);
    }

    .form-field input[type="file"] {
    padding: 4px;
    }

    .form-field textarea {
      resize: vertical;
      min-height: 80px;
    }

    .form-field input[list] {
      background-color: #1f1f1f;
      border: none;
      border-radius: 8px;
      padding: 12px;
      color: #fff;
      font-size: 16px;
      width: 100%;
      box-sizing: border-box;
    }

    datalist option {
      background: #1f1f1f;
      color: #fff;
    }

    .form-buttons {
      display: flex;
      gap: 12px;
    }

    .form-buttons button {
      flex: 1;
      padding: 12px;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
      background-color: #2c2c2c;
      color: #fff;
      cursor: pointer;
      user-select: none;
      transition: background-color 0.2s ease;
    }

    .form-buttons button:hover {
      background-color: #3a3a3a;
    }
    /* КОНЕЦ стиль для страницы client_create.html, client_view_edit.html, task_create.html КОНЕЦ */

/* НАЧАЛО стиль для календаря */

.flatpickr-input {
  width: 100%;
  height: 40px; /* стандартная высота для input */
  padding: 8px 35px 8px 10px; /* нормальные отступы: слева — текст, справа — иконка */
  font-size: 16px; /* стандартный размер текста */
  border-radius: 6px;
  border: 1px solid #444;
  color: white;
  background-color: #1f1f1f;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23999999' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px 20px;
}

.flatpickr-input::placeholder {
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* АДАПТИВ ДЛЯ МОБИЛКИ */
@media (max-width: 480px) {
  .flatpickr-input {
    padding-right: 30px;
    font-size: 13px;
    background-size: 16px 16px;
  }
}

/* СТИЛИ КАЛЕНДАРЯ */
.flatpickr-calendar {
  background-color: #1f1f1f !important;
  color: #fff !important;
  border: 1px solid #444 !important;
  box-shadow: 0 0 5px #000;
}

/* Стрелки переключения месяцев */
.flatpickr-prev-month,
.flatpickr-next-month {
  color: #fff !important;         /* цвет кнопки */
  fill: #fff !important;          /* цвет SVG */
  stroke: #fff !important;        /* для некоторых тем */
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  fill: #fff !important;   /* перекрашиваем сам SVG */
  stroke: #fff !important;
  width: 14px;
  height: 14px;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  color: #007aff !important;
  fill: #007aff !important;
  stroke: #007aff !important;
  transform: scale(1.2);
}

.flatpickr-months {
  background: #2b2b2b !important;
  color: #fff !important;
  border-bottom: 1px solid #444;
}

.flatpickr-prev-month,
.flatpickr-next-month {
  color: #ccc !important;
}

/* Текст месяца и года */
.flatpickr-current-month {
  color: #fff !important;
  font-weight: 600;
}
.flatpickr-current-month input.cur-year {
  color: #fff !important;
  background: transparent !important;
  border: none !important;
}
.flatpickr-monthDropdown-months {
  background: #1f1f1f !important;
  color: #fff !important;
  border: none !important;
}
.flatpickr-monthDropdown-months option {
  background: #1f1f1f !important;
  color: #fff !important;
}

/* Дни недели */
span.flatpickr-weekday {
  color: #aaa !important;
  font-weight: 500;
  text-transform: uppercase;
}

.flatpickr-weekdays {
  background: #2b2b2b !important;
}

/* Дни месяца */
.flatpickr-day {
  color: #ccc !important;
  background: transparent !important;
  border: none;
}
.flatpickr-day:hover {
  background: #333 !important;
}
.flatpickr-day.today {
  border: 1px solid #666 !important;
}
.flatpickr-day.selected {
  background: #007aff !important;
  color: white !important;
  border: none !important;
}
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #555 !important;
}

/* Контейнер выбора времени */
.flatpickr-time {
  background: #1f1f1f !important;
  border-top: 1px solid #333 !important;
  border-radius: 0 0 8px 8px;
  padding: 6px;
}

/* Поля ввода часов и минут */
.flatpickr-time input {
  background: transparent !important;
  color: #fff !important;
  font-size: 16px;
  font-weight: bold;
  border: none !important;
  text-align: center;
  caret-color: #4CAF50;
}

/* При фокусе (чтобы не прыгало в белый) */
.flatpickr-time input:focus {
  outline: none !important;
  background: #333 !important;
  border-radius: 6px !important;
  color: #fff !important;
}

/* Кнопки + и - */
.flatpickr-time .arrowUp,
.flatpickr-time .arrowDown {
  border-color: #888 transparent transparent transparent !important;
}
.flatpickr-time .arrowDown {
  border-color: transparent transparent #888 transparent !important;
}

/* При наведении */
.flatpickr-time .numInput:hover {
  background: #2a2a2a !important;
}

/* КОНЕЦ стиль для календаря */

  /* Настройка прикрепления файлов в task_create.html */
  /* Сброс дефолтного стиля input[type=file] */
  input[type="file"] {
    display: none;
  }

/* Кастомная кнопка */
  .custom-file-upload {
    display: block;
    width: 100%;
    height: 40px;             /* вот эта строка — высота как у input */
    line-height: 40px;        /* выравниваем текст по вертикали */
    padding: 0 10px;          /* убираем верх/низ, добавляем по бокам */
    background-color: #2a2a2a;
    color: #fff;
    border: 1px solid #444;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    text-align: left;
    box-sizing: border-box;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
  }

  .custom-file-upload:hover {
    background-color: #333;
    box-shadow: 0 0 5px #000;
  }

  /* Адаптивно растягиваем в форме */
  .form-field {
    width: 100%;
    margin-bottom: 16px;
    display: flex;
    justify-content: flex-start;
  }

  #file-upload-label span {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
  }

  .custom-file-upload {
    margin-bottom: 16px;
  }

  .file-upload-label,
  .file-upload-label span {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    cursor: pointer; /* чтобы курсор показывал, что это кликабельный элемент */
  }

  /* Настройка прикрепления файлов в task_create.html */
  

    /* ОБЩИЕ СТИЛИ */
    * { box-sizing: border-box; } /* Чтобы padding и border учитывались в ширине и высоте элементов */

    body {
      margin: 0;
      font-family: 'Inter', sans-serif;
      background-color: #121212; /* Тёмный фон страницы */
      color: #ffffff; /* Белый цвет текста */
    }

    /* Верхняя панель с информацией пользователя и кнопками */
    .topbar {
      position: fixed; /* Фиксируем вверху страницы */
      top: 0;
      left: 0;
      width: 100%; /* Занимает всю ширину окна */
      background-color: #1e1e1e; /* Тёмный фон для контраста */
      display: flex; /* Используем flexbox для расположения элементов в строку */
      align-items: center; /* Вертикальное центрирование элементов */
      padding: 10px 16px; /* Отступы внутри панели */
      z-index: 1000; /* Поверх других элементов */
    }

    /* Контейнер с аватаром и именем пользователя */
    .user-info {
      display: flex;
      align-items: center;
      gap: 10px; /* Расстояние между аватаром и именем */
      user-select: none; /* Запрещаем выделение текста и изображений */
    }

    /* Стили аватара пользователя */
    .user-info img {
      width: 36px;
      height: 36px;
      border-radius: 50%; /* Круглая форма */
      object-fit: cover; /* Кадрируем изображение по размеру контейнера */
    }

    /* Имя пользователя — полужирный шрифт */
    .user-info span {
      font-weight: 600;
    }

    /* Гибкий элемент-заполнитель между пользовательской информацией и кнопками */
    .spacer {
      flex: 1; /* Занимает всё доступное пространство, сдвигая кнопки вправо */
    }

    /* Кнопка добавления задачи, клиента (круглая с плюсом) */
    .add-task-btn,
    .add-client-btn {
      width: 40px;
      height: 40px;
      background-color: #2c2c2c; /* Тёмный фон кнопки */
      color: #fff; /* Белый цвет текста */
      border: none;
      border-radius: 50%; /* Круглая кнопка */
      font-size: 24px; /* Размер плюсика */
      cursor: pointer;
      user-select: none;
      margin-right: 8px; /* Отступ справа, чтобы не сливалась с меню */
      transition: background-color 0.2s ease; /* Плавное изменение цвета при наведении */
    }

    /* Ховер эффект для кнопки добавления задачи, клиента */
    .add-task-btn:hover,
    .add-client-btn:hover {
      background-color: #3a3a3a; /* Немного светлее при наведении */
    }

    /* Кнопка открытия/закрытия бокового меню */
    .menu-toggle {
      width: 40px;
      height: 40px;
      background-color: #2c2c2c;
      color: #fff;
      border: none;
      border-radius: 50%;
      font-size: 24px;
      cursor: pointer;
      user-select: none;
      transition: background-color 0.2s ease;
    }

    /* Ховер эффект для кнопки меню */
    .menu-toggle:hover {
      background-color: #3a3a3a;
    }

    /* Боковая панель меню, расположена справа */
    .sidebar {
      position: fixed;
      top: 0;
      right: 0; /* Сдвигаем вправо */
      height: 100%;
      width: 220px;
      background-color: #1a1a1a; /* Ещё темнее фон */
      padding-top: 70px; /* Отступ сверху, чтобы не перекрывать верхнюю панель */
      transform: translateX(100%); /* Скрыта за правым краем */
      transition: transform 0.3s ease; /* Плавное появление и скрытие */
      z-index: 999;
    }

    /* Открытие боковой панели (сдвиг в видимую область) */
    .sidebar.open {
      transform: translateX(0);
    }

    /* Ссылки в меню */
    .sidebar a {
      display: block;
      padding: 14px 20px;
      color: #fff;
      text-decoration: none;
      border-radius: 12px;
      background-color: #2c2c2c; /* Темный фон ссылок */
      margin: 10px 15px;
      user-select: none;
      transition: background-color 0.2s ease;
    }

    /* Ховер эффект для ссылок */
    .sidebar a:hover {
      background-color: #3a3a3a;
    }

    /* Активная ссылка выделена светлым фоном */
    .sidebar a.active {
      background-color: #4a4a4a;
    }

    /* Нижняя часть боковой панели с подписью и шестерёнкой */
    .sidebar-footer {
      position: absolute; /* Чтобы закрепить внизу меню */
      bottom: 10px;
      width: 100%;
      display: flex; /* Горизонтальный флекс-контейнер */
      justify-content: center; /* Центрируем по горизонтали */
      align-items: center; /* Центрируем по вертикали */
      font-size: 12px;
      color: #ccc;
      user-select: none;
    }

    /* Шестерёнка справа от подписи */
    .sidebar-footer .gear {
      margin-left: 8px; /* Отступ слева от текста */
      cursor: pointer;
    }

    /* Основной контент страницы с задачами */
    .main {
      padding: 80px 16px 16px; /* Отступ сверху, чтобы не перекрывалась верхняя панель */
    }

    /* Заголовок над списком задач, клиентов */
    .tasks-header,
    .client-header {
      margin-bottom: 12px;
      font-size: 18px;
      font-weight: 600;
      user-select: none;
    }

    /* Список задач без стандартных маркеров и отступов */
    .task-list,
    .client-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    /* Каждый элемент задачи */
    .task{
      background-color: #1f1f1f; /* Темный фон для задачи */
      border-radius: 10px;
      padding: 12px 16px;
      margin-bottom: 10px;
      display: flex; /* Горизонтальное расположение текста и кнопок */
      justify-content: space-between;
      align-items: center;
      transition: background-color 0.2s ease, box-shadow 0.2s ease; /* Плавное изменение цвета при наведении */
    }

    /* Подсветка задачи при наведении курсора */
    .task:hover {
      background-color: #505050;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* Светлее фон на ховер */
      cursor: pointer;
    }

    /* Текст задачи и дата */
    .task .text {
      flex-grow: 1; /* Занимает всё доступное пространство */
      margin-right: 10px;
      user-select: text; /* Позволяет выделять текст задачи */
    }

    /* Дата выполнения задачи */
    .task .meta {
      font-size: 12px;
      color: #aaa; /* Светло-серый цвет для даты */
      margin-top: 4px;
      user-select: text; /* Позволяет выделять дату */
    }

    /* Контейнер с кнопками действия над задачей */
    .task .actions 
    button {
      background-color: #3a3a3a; /* Фон кнопок чуть светлее, чтобы выделяться на фоне задачи */
      border: none;
      border-radius: 6px; /* Скругленные углы кнопок */
      padding: 6px 10px; /* Отступы внутри кнопок для удобства клика */
      color: #fff; /* Белый цвет иконок (галочки и крестика) */
      cursor: pointer;
      font-size: 16px;
      margin-left: 8px; /* Отступ между кнопками */
      user-select: none; /* Запрет выделения текста в кнопках */
      box-shadow: 0 0 5px rgba(255,255,255,0.15); /* Легкая тень для выделения */
      transition: background-color 0.2s ease, box-shadow 0.2s ease; /* Плавное изменение фона и тени при наведении */
    }

    /* Эффект при наведении на кнопки действий */
    .task .actions 
    button:hover {
      background-color: #505050; /* Ещё светлее фон */
      box-shadow: 0 0 8px rgba(255,255,255,0.3); /* Ярче тень */
    }

    /* Затемнение фона при открытии боковой панели */
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4); /* Полупрозрачный черный фон */
      z-index: 998;
      display: none; /* Скрыт по умолчанию */
    }

    /* Отображаем затемнение при активном классе show */
    .overlay.show {
      display: block;
    }

.actions {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  user-select: none;
  padding: 0 8px;
  color: #ccc;
  line-height: 1;
  transition: color 0.2s ease;
  border-radius: 4px;
}

.dropbtn:hover,
.dropbtn:focus {
  color: #505050;
  outline: none;
  background-color: #2c2c2c;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #1f1f1f;
  min-width: 150px;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.6);
  z-index: 1000;
  border-radius: 6px;
  overflow: hidden;
  font-size: 14px;
  user-select: none;
}

.dropdown-content.show {
  display: block;
}

.dropdown-content a {
  color: #ddd;
  padding: 10px 16px;
  text-decoration: none;
  display: block;
  transition: background-color 0.2s ease;
  font-weight: 500;
}

.dropdown-content a:hover,
.dropdown-content a:focus {
  background-color: #505050;
  color: #fff;
  outline: none;
}

#task-priority:invalid,
#task-status:invalid,
#executorSelect:invalid,
#orgSelect:invalid {
  color: gray;
}

/* Слайдер на странице с задачами */
.tab-slider {
  position: relative;
  display: flex;
  background-color: #1f1f1f;
  border-radius: 10px;
  padding: 6px;
  margin-bottom: 20px;
  user-select: none;
  overflow: hidden;
}

/* Кнопки табов */
.tab-slider .tab {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  margin: 0 2px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #aaa;
  position: relative;
  z-index: 2;
  border-radius: 8px;
  transition: all 0.3s ease, color 0.3s ease;
}

/* Подсветка при наведении */
.tab-slider .tab:hover {
  background: rgba(173, 173, 173, 0.1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  color: #fff;
}

/* Активная кнопка */
.tab-slider .tab.active {
  color: #fff;
  font-weight: 600;
}

/* Ползунок */
.tab-slider .slider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  margin: 0 2px;
  background: #505050;
  border-radius: 8px;
  z-index: 1;
  transition: all 0.3s ease; /* плавно меняем и ширину, и позицию */
}

.sort-panel {
  display: flex;
  flex-direction: column;   /* сначала поиск, потом фильтры */
  gap: 10px;
  margin: 12px 0;
}

/* строка с фильтрами */
.sort-filters {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.sort-panel input,
.sort-panel select {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #444;
  font-size: 14px;
  background: #1f1f1f;
  color: #fff;
}

/* Общий стиль */
#searchInput,
#sortSelect,
#employeeFilter,
#clientSearchInput {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #444;
  border-radius: 8px;
  font-size: 14px;
  background: #1f1f1f;
  color: #fff;
  outline: none;
  min-height: 34px; /* минимальная удобная высота для мобильных */
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

#sortSelect,
#employeeFilter {
  cursor: pointer;
}

#searchInput,
#clientSearchInput {
  cursor: text;
}

.sort-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
  width: 100%;
}

.sort-panel input,
.sort-panel select {
  padding: 12px 12px;   /* увеличиваем padding */
  font-size: 16px;      /* более удобный шрифт для телефона */
  min-height: 34px;      /* стандартная "кнопка для пальца" на iOS */
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .sort-panel input,
  .sort-panel select {
    padding: 10px 10px;
    font-size: 15px;
    min-height: 44px; /* оставляем 44px, iOS любит такой размер */
  }
}

#searchInput,
#clientSearchInput {
  max-width: 100%;    /* теперь всегда на всю ширину */
  flex: 1 1 100%;
}

#searchInput:focus,
#sortSelect:focus,
#employeeFilter:focus,
#clientSearchInput:focus {
  border-color: #2a8bf2;
  box-shadow: 0 0 4px rgba(42, 139, 242, 0.4);
}

.load-more-btn {
  display: block;
  margin: 12px auto;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: #2a8bf2;
  color: white;
  font-size: 14px;
  cursor: pointer;
}

.load-more-btn:hover {
  background: #1d6ed6;
}