/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Dec 05 2025 | 18:18:11 */
/* ===============================
   File: table_style.css 
   Version: v3.5.0 
   Description: v3.0.1: Добавлены стили для flatpickr.
                v3.1.0: Стили для невалидных select ячеек 
                v3.3.0: Подсказка об ошибке для select появляется справа/слева
 v3.4.0 - Частичное обновление. Изменен стиль select (убрана фикс. ширина) и добавлены классы выравнивания (.select-align-*).
   =============================== */
/* Общий стиль для таблиц  */
.dynamic-table {
  width: 100%;
  border: 1px solid #ccc;
  border-collapse: collapse; /*  двойные линии не появятся (границы соседей сольются в одну). Это создаст четкие вертикальные и горизонтальные разделители.   */
}

/* --- FIX v3.5.0: Добавляем сетку (вертикальные и горизонтальные линии) --- */
.dynamic-table th,
.dynamic-table td {
border: 1px solid #ccc; /* Цвет #ccc совпадает с внешней рамкой */
}


/* Заголовки */
.dynamic-table thead {
    background-color: #4271FF;
    color: white;
}

/* Наведение на шапку*/
.dynamic-table thead tr:hover {
 background-color: #2D54FF; 
}

/* Наведение на строку */ 
.dynamic-table tr:hover td {
background-color: #EDFFFF;
}

/* Числовые колонки (decimal + int) */
.dynamic-table td.decimal-col,
.dynamic-table td.int-col {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums; /* одинаковая ширина цифр */
}

/* Минимальные ширины */
.dynamic-table td.decimal-col,
.dynamic-table th.decimal-col {
  min-width: 90px;
}

.dynamic-table td.int-col,
.dynamic-table th.int-col {
  min-width: 70px;
}

/* Дата-колонки */
.dynamic-table td.date-col,
.dynamic-table th.date-col {
  min-width: 110px;
  text-align: center;
}

/* Скрыть стрелки сортировки */
.dynamic-table th.sorting::before,
.dynamic-table th.sorting::after,
.dynamic-table th.sorting_asc::before,
.dynamic-table th.sorting_asc::after,
.dynamic-table th.sorting_desc::before,
.dynamic-table th.sorting_desc::after {
    display: none !important;
}


/* БЛОК SELECT */
/* Унифицируем ширину выпадающих списков в DataTables */
table.dynamic-table td.select-col select {
  /* v3.4.0: Шириной теперь управляет JS (ch units) */
  box-sizing: border-box;
  padding: 2px 4px;
  max-width: 100%; 
}

/* v3.4.0: Классы выравнивания для Select */
.select-align-center {
    text-align: center;
    text-align-last: center; /* Для выравнивания выбранного элемента в Chrome/Safari */
}

 .select-align-right {
    text-align: right;
	/* v3.6.0: Добавляем отступ справа (примерно 1-2 символа), чтобы число не наезжало на стрелку */
 /*    padding-right: 1px; */
 /*    text-align-last: right;*/
}

.select-align-left {
    text-align: left;
    text-align-last: left;
}

/* Чтобы выпадающий список не "прыгал" при смене значения */
table.dynamic-table td.select-col {
  white-space: nowrap;
}
/* КОНЕЦ БЛОК SELECT */

/* Wrapper для таблицы */
.dynamic-table-wrapper {
  margin: 20px 0;
  overflow-x: auto;
}

/* Стили для DataTables элементов управления */
.dynamic-table-wrapper .dataTables_wrapper .dataTables_length,
.dynamic-table-wrapper .dataTables_wrapper .dataTables_filter {
  margin-bottom: 10px;
}

.dynamic-table-wrapper .dataTables_wrapper .dataTables_info,
.dynamic-table-wrapper .dataTables_wrapper .dataTables_paginate {
  margin-top: 10px;
}

/* Адаптивность */
@media (max-width: 768px) {
  .dynamic-table-wrapper {
    font-size: 14px;
  }
  
  .dynamic-table td.decimal-col,
  .dynamic-table th.decimal-col {
    min-width: 80px;
  }
 }

/* ===============================
   Flatpickr Clear Button Styles
   =============================== */

/* Базовый стиль кнопки */
.flatpickr-clear-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    background: #1BBC9B;
    border-top: 1px solid #d1d1d1;
    cursor: pointer;
    color: white;
    font-size: 13px;
    font-weight: 500;
    user-select: none;
    transition: all 0.2s ease;
}

/* Анимация появления */
.flatpickr-clear-btn {
    animation: fadeInClearBtn 0.25s ease-out;
}
@keyframes fadeInClearBtn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Наведение курсора */
.flatpickr-clear-btn:hover {
   /*  background: #e3f2e1; */
	background: #d7f7d0; /* 💚 Светло-зелёный фон */
    color: red;
    border-top: 1px solid #a5d6a7;
}

/* Нажатие */
.flatpickr-clear-btn:active {
    background: #c8e6c9;
    color: #1b5e20;
    transform: scale(0.98);
}

/* ===============================
   Flatpickr Hover Day Style
   =============================== */

/* При наведении на любую дату */
.flatpickr-day:hover {
    background: #d7f7d0 !important; /* 💚 Светло-зелёный фон */
    color: #0a3d91 !important;      /* 💙 Тёмно-синий шрифт */
    border-color: #a5d6a7 !important;
}

/* При наведении на выбранную дату — сохраняем гармонию */
.flatpickr-day.selected:hover {
    background: #a5d6a7 !important; /* насыщенный зелёный */
    color: #0a3d91 !important;
}

/* При наведении на сегодняшнюю дату */
.flatpickr-day.today:hover {
    background: #c8e6c9 !important;
    color: #0a3d91 !important;
}

/* ===============================
   Адаптивность для мобильных устройств
   =============================== */

/* 📱 При ширине экрана до 480px
   — увеличиваем кнопку, делаем её более контрастной и удобной для тапа */
@media (max-width: 480px) {
    .flatpickr-clear-btn {
        height: 42px;
        font-size: 15px;
        background: #f1f8e9;
        border-top: 1px solid #a5d6a7;
        color: #2e7d32;
        font-weight: 600;
        border-radius: 0 0 6px 6px; /* лёгкое скругление нижних углов */
    }
    .flatpickr-clear-btn:hover {
        background: #c8e6c9;
    }
}

/* ===============================
   Styles for Dynamic Tables
   - Stale options indicator
v3.1.0: Стили для невалидных select ячеек 
   =============================== */

/* Делаем ячейку относительной, чтобы позиционировать треугольник внутри нее */
td.options-stale {
    position: relative;
}

/* Создаем сам треугольник с помощью псевдо-элемента ::after */
td.options-stale::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    /* Устанавливаем размер треугольника 8x8 пикселей */
    border-width: 0 8px 8px 0;
    /* Цвет виден только у правой и нижней границы, создавая треугольник.
       #ef4444 - это Tailwind Red-500, яркий и заметный красный. */
    border-color: transparent #ef4444 transparent transparent;
}

/* ===============================
   Всплывающая подсказка
Tooltip for stale cells (Google Sheets style)
   Version: v1.1.0
   =============================== */
#staleTooltip .stale-tooltip-box {
    position: relative;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    overflow: hidden;
    padding-left: 8px; /* left red stripe */
    border: 1px solid rgba(0,0,0,0.1);
}

#staleTooltip .stale-tooltip-box::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background-color: #ef4444; /* красная полоса */
}

#staleTooltip .stale-tooltip-content {
    text-align: left;
    padding: 8px 10px;
    font-family: system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.3;
}

#staleTooltip .stale-tooltip-title {
    font-weight: 700;
    color: #ef4444;
    margin-bottom: 4px;
}
/* ===============================
   Конец всплывающей подсказки
   =============================== */