/* Дизайн‑токены для цветов статусов */
:root {
    /* Фоны строк */
    --row-color-white-bg: #ffffff;
    --row-color-gray-bg: #f0f0f0;
    --row-color-green-bg: #d4edda;
    --row-color-yellow-bg: #fff3cd;
    --row-color-red-bg: #f8d7da;
    --row-color-blue-bg: #cce5ff;
    --row-color-orange-bg: #ffe5cc;
    --row-color-turquoise-bg: #b2ebf2;

    /* Цвета текста для бейджей статусов */
    --status-text-default: #000000;
    --status-text-gray: #333333;
    --status-text-green: #155724;
    --status-text-yellow: #856404;
    --status-text-red: #721c24;
    --status-text-blue: #004085;
    --status-text-orange: #854d0e;
    --status-text-turquoise: #006064;

    /* Цвета границы для мобильных карточек */
    --card-border-white: #ffffff;
    --card-border-gray: #808080;
    --card-border-green: #28a745;
    --card-border-yellow: #ffc107;
    --card-border-red: #dc3545;
    --card-border-blue: #007bff;
    --card-border-orange: #fd7e14;
    --card-border-turquoise: #0097a7;
}

/* Панель: цвет статуса только у выпадающего списка и виджета Choices (не вся строка) */
.table tbody select.form-select.status-select.row-white,
.table tbody .choices.choices--table-cell:has(select.status-select.row-white) .choices__inner,
.table tbody .choices.choices--table-cell.row-white .choices__inner {
    background-color: var(--row-color-white-bg) !important;
    color: var(--status-text-default) !important;
    border-color: #ced4da !important;
}

.table tbody select.form-select.status-select.row-gray,
.table tbody .choices.choices--table-cell:has(select.status-select.row-gray) .choices__inner,
.table tbody .choices.choices--table-cell.row-gray .choices__inner {
    background-color: var(--row-color-gray-bg) !important;
    color: var(--status-text-gray) !important;
    border-color: #ced4da !important;
}

.table tbody select.form-select.status-select.row-green,
.table tbody .choices.choices--table-cell:has(select.status-select.row-green) .choices__inner,
.table tbody .choices.choices--table-cell.row-green .choices__inner {
    background-color: var(--row-color-green-bg) !important;
    color: var(--status-text-green) !important;
    border-color: #b1dfbb !important;
}

.table tbody select.form-select.status-select.row-yellow,
.table tbody .choices.choices--table-cell:has(select.status-select.row-yellow) .choices__inner,
.table tbody .choices.choices--table-cell.row-yellow .choices__inner {
    background-color: var(--row-color-yellow-bg) !important;
    color: var(--status-text-yellow) !important;
    border-color: #ffeeba !important;
}

.table tbody select.form-select.status-select.row-red,
.table tbody .choices.choices--table-cell:has(select.status-select.row-red) .choices__inner,
.table tbody .choices.choices--table-cell.row-red .choices__inner {
    background-color: var(--row-color-red-bg) !important;
    color: var(--status-text-red) !important;
    border-color: #f5c6cb !important;
}

.table tbody select.form-select.status-select.row-blue,
.table tbody .choices.choices--table-cell:has(select.status-select.row-blue) .choices__inner,
.table tbody .choices.choices--table-cell.row-blue .choices__inner {
    background-color: var(--row-color-blue-bg) !important;
    color: var(--status-text-blue) !important;
    border-color: #9fcdff !important;
}

.table tbody select.form-select.status-select.row-orange,
.table tbody .choices.choices--table-cell:has(select.status-select.row-orange) .choices__inner,
.table tbody .choices.choices--table-cell.row-orange .choices__inner {
    background-color: var(--row-color-orange-bg) !important;
    color: var(--status-text-orange) !important;
    border-color: #ffd8b3 !important;
}

.table tbody select.form-select.status-select.row-turquoise,
.table tbody .choices.choices--table-cell:has(select.status-select.row-turquoise) .choices__inner,
.table tbody .choices.choices--table-cell.row-turquoise .choices__inner {
    background-color: var(--row-color-turquoise-bg) !important;
    color: var(--status-text-turquoise) !important;
    border-color: #80deea !important;
}

.table tbody .choices.choices--table-cell:has(select.status-select.row-white) .choices__inner .choices__item--selectable,
.table tbody .choices.choices--table-cell:has(select.status-select.row-gray) .choices__inner .choices__item--selectable,
.table tbody .choices.choices--table-cell:has(select.status-select.row-green) .choices__inner .choices__item--selectable,
.table tbody .choices.choices--table-cell:has(select.status-select.row-yellow) .choices__inner .choices__item--selectable,
.table tbody .choices.choices--table-cell:has(select.status-select.row-red) .choices__inner .choices__item--selectable,
.table tbody .choices.choices--table-cell:has(select.status-select.row-blue) .choices__inner .choices__item--selectable,
.table tbody .choices.choices--table-cell:has(select.status-select.row-orange) .choices__inner .choices__item--selectable,
.table tbody .choices.choices--table-cell:has(select.status-select.row-turquoise) .choices__inner .choices__item--selectable,
.table tbody .choices.choices--table-cell.row-white .choices__inner .choices__item--selectable,
.table tbody .choices.choices--table-cell.row-gray .choices__inner .choices__item--selectable,
.table tbody .choices.choices--table-cell.row-green .choices__inner .choices__item--selectable,
.table tbody .choices.choices--table-cell.row-yellow .choices__inner .choices__item--selectable,
.table tbody .choices.choices--table-cell.row-red .choices__inner .choices__item--selectable,
.table tbody .choices.choices--table-cell.row-blue .choices__inner .choices__item--selectable,
.table tbody .choices.choices--table-cell.row-orange .choices__inner .choices__item--selectable,
.table tbody .choices.choices--table-cell.row-turquoise .choices__inner .choices__item--selectable {
    color: inherit !important;
}

/* Ячейка «Дата выдачи по регламенту»: фон по срокам (перекрывает фон строки по статусу); текст — стандартный */
.table tbody tr td.cell-red,
.table-responsive tbody tr td.cell-red { background-color: var(--row-color-red-bg) !important; }
.table tbody tr td.cell-orange,
.table-responsive tbody tr td.cell-orange { background-color: var(--row-color-orange-bg) !important; }
.table tbody tr td.cell-yellow,
.table-responsive tbody tr td.cell-yellow { background-color: var(--row-color-yellow-bg) !important; }
.table tbody tr td.cell-gray,
.table-responsive tbody tr td.cell-gray { background-color: var(--row-color-gray-bg) !important; }

/* Дашборд — даты по срокам: тон и фон только у текста (рамка 2pt) */
.table tbody .reglament-date-display,
.table tbody .planned-date-display,
.table-responsive tbody .reglament-date-display,
.table-responsive tbody .planned-date-display {
    display: inline-block;
    padding: 1px 8px 2px;
    border-radius: 5px;
    border: 2pt solid transparent;
    line-height: 1.35;
    box-sizing: border-box;
    vertical-align: baseline;
}

.table tbody .reglament-date-display.cell-red,
.table tbody .planned-date-display.cell-red,
.table-responsive tbody .reglament-date-display.cell-red,
.table-responsive tbody .planned-date-display.cell-red {
    background-color: var(--row-color-red-bg) !important;
    border-color: #b02a37 !important;
}

.table tbody .reglament-date-display.cell-orange,
.table tbody .planned-date-display.cell-orange,
.table-responsive tbody .reglament-date-display.cell-orange,
.table-responsive tbody .planned-date-display.cell-orange {
    background-color: var(--row-color-orange-bg) !important;
    border-color: #c45a00 !important;
}

.table tbody .reglament-date-display.cell-yellow,
.table tbody .planned-date-display.cell-yellow,
.table-responsive tbody .reglament-date-display.cell-yellow,
.table-responsive tbody .planned-date-display.cell-yellow {
    background-color: var(--row-color-yellow-bg) !important;
    border-color: #b8860b !important;
}

.table tbody .reglament-date-display.cell-gray,
.table tbody .planned-date-display.cell-gray,
.table-responsive tbody .reglament-date-display.cell-gray,
.table-responsive tbody .planned-date-display.cell-gray {
    background-color: var(--row-color-gray-bg) !important;
    border-color: #adb5bd !important;
}

/* Для мобильных карточек */
.card-white { border-left: 4px solid var(--card-border-white); }
.card-gray { border-left: 4px solid var(--card-border-gray); }
.card-green { border-left: 4px solid var(--card-border-green); }
.card-yellow { border-left: 4px solid var(--card-border-yellow); }
.card-red { border-left: 4px solid var(--card-border-red); }
.card-blue { border-left: 4px solid var(--card-border-blue); }
.card-orange { border-left: 4px solid var(--card-border-orange); }
.card-turquoise { border-left: 4px solid var(--card-border-turquoise); }

/* Текст для статусов */
.status-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
}

.status-badge-white {
    background: var(--row-color-white-bg);
    color: var(--status-text-default);
    border: 1px solid #dddddd;
}

.status-badge-gray {
    background: var(--row-color-gray-bg);
    color: var(--status-text-gray);
}

.status-badge-green {
    background: var(--row-color-green-bg);
    color: var(--status-text-green);
}

.status-badge-yellow {
    background: var(--row-color-yellow-bg);
    color: var(--status-text-yellow);
}

.status-badge-red {
    background: var(--row-color-red-bg);
    color: var(--status-text-red);
}

.status-badge-blue {
    background: var(--row-color-blue-bg);
    color: var(--status-text-blue);
}

.status-badge-orange {
    background: var(--row-color-orange-bg);
    color: var(--status-text-orange);
}