#main-content:has(.ui-page) {
    background: var(--color-bg);
    /* style.css задаёт #main-content{height:100%} — из-за него блок не растёт и контент
       (раскрытые «Обучение»/«Метки») вылезает снизу; на новых страницах высота по контенту */
    height: auto;
}

.ui-page-title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ui-page-subtitle {
    margin: 0 0 var(--space-4);
    max-width: 720px;
    font-size: var(--fs-md);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.ui-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-4);
}

.ui-tab {
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-md);
    cursor: pointer;
    color: var(--color-text-muted);
    border-bottom: 2px solid transparent;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.ui-tab.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: var(--fw-medium);
}

.ui-tab-pane {
    display: none;
}

.ui-tab-pane.is-active {
    display: block;
}

/* вложенные bootstrap-вкладки (components.bs-tab-pane): подпанель без своего .tab-content
   не скрывается дефолтными правилами bootstrap — прячем/показываем вручную */
.ui-page .tab-pane .tab-pane {
    display: none;
}

.ui-page .tab-pane .tab-pane.active {
    display: block;
}

.ui-filters {
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: flex-end;
}

.ui-field label {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    display: block;
    margin-bottom: 3px;
}

.ui-field > input:not([type="checkbox"]):not([type="radio"]),
.ui-field > select {
    width: 100%;
    height: var(--control-h) !important;
    outline: none;
    box-shadow: none;
}

.ui-field > input:not([type="checkbox"]):not([type="radio"]):focus,
.ui-field > select:focus {
    outline: none;
    border-color: var(--table-head-fg);
    box-shadow: 0 0 0 2px rgba(58, 107, 26, 0.15);
}

.ui-filters--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--space-3);
    align-items: start;
}

.ui-filters--grid .ui-field {
    min-width: 0;
}

.ui-filters--grid .ui-field--check {
    align-self: end;
    padding-bottom: 5px;
}

.ui-field--wide {
    grid-column: span 2;
}

.ui-field__row {
    display: flex;
    gap: var(--space-1);
    align-items: center;
}

.ui-field__grow {
    flex: 1;
    min-width: 0;
}

/* Поле с двумя контролами в строке под общим лейблом (например, селект оператора + фильтр по статусу) */
.ui-field--operator {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.ui-field--operator > label {
    flex: 0 0 100%;
    margin-bottom: 0;
}

.ui-field__sub {
    margin-top: var(--space-1);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Заголовок поля с действием справа (label + кнопка), напр. «Дополнительные [+ Добавить]» */
.ui-field__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-h);
    margin-bottom: 3px;
}

.ui-field__head label {
    margin-bottom: 0;
}

/* Список добавляемых строк (мердж/привязка позиций) — аккуратные строки-карточки */
.ui-merge-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ui-merge-row {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
}

.ui-merge-row .selectize_container,
.ui-merge-row .selectize-control,
.ui-merge-row .ui-field__grow {
    flex: 1;
    min-width: 0;
}

/* Кнопка-иконка (удаление строки): приглушённая, краснеет на ховере */
.ui-icon-btn {
    color: var(--color-text-muted);
}

.ui-icon-btn:hover {
    color: var(--color-danger);
    background: transparent;
}

.ui-filters--grid .ui-field > select,
.ui-filters--grid .ui-field > input:not([type="checkbox"]):not([type="radio"]),
.ui-filters--grid .ui-field > .input-group {
    width: 100% !important;
}

.ui-filters--grid .ui-field > input:not([type="checkbox"]):not([type="radio"]),
.ui-filters--grid .ui-field > select.form-control,
.ui-filters--grid .ui-field > div > select.form-control,
.ui-filters--grid .ui-field .input-group .form-control {
    height: var(--control-h);
    box-shadow: none;
}

.ui-filters--grid .ui-field .input-group-btn,
.ui-filters--grid .ui-field .input-group-addon {
    height: var(--control-h);
    font-size: var(--fs-base);
}

.ui-field .selectize-control,
.ui-field .selectize-input,
.ui-field__grow .selectize-control,
.ui-field__grow .selectize-input {
    min-height: var(--control-h);
}

.ui-field .selectize-input,
.ui-field__grow .selectize-input {
    height: var(--control-h);
    padding-top: 0;
    padding-bottom: 0;
    line-height: 18px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow: hidden;
}

.ui-field .selectize-control.multi .selectize-input,
.ui-field__grow .selectize-control.multi .selectize-input {
    overflow-x: auto;
    overflow-y: hidden;
}

.ui-field .selectize-control.single .selectize-input,
.ui-field__grow .selectize-control.single .selectize-input {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.ui-field .selectize-control.single .selectize-input > .item,
.ui-field__grow .selectize-control.single .selectize-input > .item {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-field .selectize-control.single .selectize-input > input,
.ui-field__grow .selectize-control.single .selectize-input > input {
    align-self: center;
}

.ui-field .selectize-control.single .selectize-input,
.ui-field__grow .selectize-control.single .selectize-input {
    padding-right: 24px;
}

.ui-field .selectize-control.single .selectize-input:after,
.ui-field__grow .selectize-control.single .selectize-input:after {
    content: "\f107";
    font-family: FontAwesome;
    border: 0 !important;
    width: auto;
    height: auto;
    top: 0;
    bottom: 0;
    right: 9px;
    margin: 0;
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
    font-size: 13px;
    transition: transform 0.15s ease;
    pointer-events: none;
}

.ui-field .selectize-control.single .selectize-input.dropdown-active:after,
.ui-field__grow .selectize-control.single .selectize-input.dropdown-active:after {
    transform: rotate(180deg);
}

.ui-field .selectize-input > input,
.ui-field__grow .selectize-input > input {
    margin: 0;
    line-height: 18px;
    align-self: center;
}

.ui-field .selectize-control.multi .selectize-input > .item,
.ui-field__grow .selectize-control.multi .selectize-input > .item {
    flex: 0 1 auto;
    min-width: 52px;
    margin: 2px 4px 2px 0;
    padding: 1px 7px;
    line-height: 18px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border: 1px solid transparent;
    border-radius: var(--radius);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-field .selectize-control.multi .selectize-input::-webkit-scrollbar,
.ui-field__grow .selectize-control.multi .selectize-input::-webkit-scrollbar {
    height: 4px;
}

.ui-field .selectize-input,
.ui-field__grow .selectize-input,
.ui-modal .selectize-input {
    border-radius: var(--radius);
    border-color: #ccc;
}

.ui-field select.form-control,
.ui-field__grow select.form-control {
    border: 1px solid #ccc;
    border-radius: var(--radius);
    font-size: var(--fs-base);
    color: var(--color-text-primary);
    background: var(--color-surface);
    height: var(--control-h);
    box-shadow: none;
}

.ui-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.ui-filters--grid .ui-filter-actions {
    grid-column: 1 / -1;
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-soft);
}

.ui-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: var(--space-3);
}

.ui-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: flex-end;
}

.ui-row > .ui-field {
    flex: 1 1 190px;
}

.ui-row > .ui-field--wide {
    flex: 2 1 300px;
}

.ui-alert {
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: var(--fs-base);
}

.ui-alert--success {
    color: var(--color-success);
    background: #eaf7f0;
    border-color: #c6e9d5;
}

.ui-alert--warning {
    color: var(--color-warning);
    background: #fdf1e6;
    border-color: #f7d9bb;
}

.ui-alert--danger {
    color: var(--color-danger);
    background: #fbeae8;
    border-color: #f2c7c1;
}

.ui-alert--info {
    color: var(--color-info);
    background: var(--color-primary-soft);
    border-color: #cfe4f5;
}

.ui-alert:empty {
    display: none;
}

.ui-field > input:not([type="checkbox"]):not([type="radio"]),
.ui-field > select {
    border: 1px solid #ccc;
    border-radius: var(--radius);
    padding: var(--space-1) var(--space-2);
    font-size: var(--fs-base);
    color: var(--color-text-primary);
    background: var(--color-surface);
    height: var(--control-h);
}

.ui-textarea {
    resize: none;
}

.ui-text-danger {
    color: var(--color-danger);
}

.ui-text-success {
    color: var(--color-success);
}

.ui-form-error {
    min-height: 18px;
    margin-top: 4px;
    color: var(--color-danger);
    font-size: var(--fs-sm);
}

.ui-form-error:empty {
    margin-top: 0;
    min-height: 0;
}

.ui-check {
    display: inline-block;
    margin: 0;
    font-weight: normal;
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.ui-check input {
    margin-right: 3px;
    vertical-align: sub;
}

.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    font-size: var(--fs-md);
    cursor: pointer;
    height: var(--control-h);
    padding: var(--space-1) var(--space-4);
}

.ui-btn--primary {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    border: none;
    font-weight: var(--fw-medium);
}

.ui-btn--primary:hover {
    background: var(--color-primary-hover);
}

.ui-btn--ghost {
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border: 1px solid #ccc;
}

.ui-btn--danger {
    background: var(--color-danger);
    color: var(--color-text-inverse);
    border: none;
}

.ui-btn--warning {
    background: var(--color-warning);
    color: var(--color-text-inverse);
    border: none;
}

.ui-btn--success {
    background: var(--color-success);
    color: var(--color-text-inverse);
    border: none;
}

.ui-btn--sm {
    height: auto;
    padding: 2px var(--space-2);
    font-size: var(--fs-sm);
}

.ui-btn--block {
    display: flex;
    width: 100%;
}

/* Кнопки состояний кандидата (страницы candidate/candidate2): активное состояние и «ожидание».
   Работает и на старых bootstrap-кнопках, и на ui-btn (JS тоглит эти классы). */
.action_state.action_state--active {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-text-inverse);
}
.action_state.action_state--wait {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
    color: var(--color-text-inverse);
}

.ui-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.ui-kpi {
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3) 14px;
}

.ui-kpi__label {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.ui-kpi__value {
    font-size: var(--fs-xl);
    font-weight: var(--fw-medium);
    color: var(--color-text-primary);
}

.ui-kpi__sub {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin-top: 2px;
}

.ui-kpi--warn .ui-kpi__value {
    color: var(--color-danger);
}

.ui-kpi--ok .ui-kpi__value {
    color: var(--color-success);
}

.ui-panel {
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 14px var(--space-4);
}

.ui-panel__title {
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.ui-panel__subtitle {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

.ui-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.ui-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 0.5px solid var(--color-border-soft);
    font-size: var(--fs-base);
    color: var(--color-text-primary);
}

.ui-row:last-child {
    border-bottom: none;
}

.ui-bar-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.ui-bar-row__label {
    font-size: var(--fs-base);
    color: var(--color-text-secondary);
    width: 175px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-bar-row__track {
    flex: 1;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    height: 16px;
    overflow: hidden;
}

.ui-bar-row__fill {
    height: 100%;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    padding-left: 6px;
}

.ui-bar-row__fill span {
    font-size: var(--fs-xs);
    color: var(--color-text-inverse);
}

.ui-bar-row__count {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    width: 28px;
    text-align: right;
    flex-shrink: 0;
}

.ui-badge {
    display: inline-block;
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
}

.ui-badge--orange {
    background: var(--badge-orange-bg);
    color: var(--badge-orange-fg);
}

.ui-badge--green {
    background: var(--badge-green-bg);
    color: var(--badge-green-fg);
}

.ui-badge--blue {
    background: var(--badge-blue-bg);
    color: var(--badge-blue-fg);
}

.ui-badge--red {
    background: var(--badge-red-bg);
    color: var(--badge-red-fg);
}

.ui-pill {
    display: inline-block;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
}

.ui-pill--high {
    background: var(--badge-red-bg);
    color: var(--badge-red-fg);
}

.ui-pill--mid {
    background: var(--badge-orange-bg);
    color: var(--badge-orange-fg);
}

.ui-pill--ok {
    background: var(--badge-green-bg);
    color: var(--badge-green-fg);
}

.ui-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 16px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1;
    text-transform: lowercase;
    white-space: nowrap;
}

.ui-status .ui-dot {
    width: 6px;
    height: 6px;
    margin-right: 0;
}

.ui-status--call { background: var(--status-call-bg); color: var(--status-call-fg); }
.ui-status--post { background: var(--status-post-bg); color: var(--status-post-fg); }
.ui-status--wait { background: var(--status-wait-bg); color: var(--status-wait-fg); }
.ui-status--downtime { background: var(--status-downtime-bg); color: var(--status-downtime-fg); }

.ui-dot--call { background: var(--status-call); }
.ui-dot--post { background: var(--status-post); }
.ui-dot--wait { background: var(--status-wait); }
.ui-dot--downtime { background: var(--status-downtime); }
.ui-dot--warn { background: var(--color-danger); }

.ui-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.ui-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px 5px 10px;
    border: 0.5px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.ui-legend__item .ui-dot {
    margin-right: 0;
}

.ui-legend__item--warn {
    border-color: transparent;
    background: var(--badge-red-bg);
    color: var(--badge-red-fg);
}

.ui-legend__item--total {
    border-style: dashed;
    padding-left: 13px;
}

.ui-legend__count {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--color-text-primary);
}

.ui-legend__item--warn .ui-legend__count {
    color: var(--badge-red-fg);
}

.ui-panel .dataTables_wrapper {
    overflow-x: auto;
    position: relative;
}

.ui-page .dataTables_processing,
.ui-modal .dataTables_processing {
    display: none !important;
}

.ui-table-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 90px;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.ui-table-loader::after {
    content: "";
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: ui-spin 0.7s linear infinite;
}

@keyframes ui-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Мини-лоадер справа в ajax-селектах (selectize вешает .loading во время подгрузки) */
.selectize-control.loading {
    position: relative;
}
.selectize-control.loading .selectize-input {
    padding-right: 44px;
}
.selectize-control.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 28px;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: ui-spin 0.7s linear infinite;
    pointer-events: none;
    z-index: 3;
}

.ui-table {
    width: 100%;
    font-size: var(--fs-base);
    border-collapse: separate;
    border-spacing: 0;
}

.ui-table thead tr:first-child th:first-child {
    border-top-left-radius: var(--radius-lg);
}

.ui-table thead tr:first-child th:last-child {
    border-top-right-radius: var(--radius-lg);
}

.ui-table tbody tr:last-child td:first-child,
.ui-table tfoot tr:last-child td:first-child,
.ui-table tfoot tr:last-child th:first-child {
    border-bottom-left-radius: var(--radius-lg);
}

.ui-table tbody tr:last-child td:last-child,
.ui-table tfoot tr:last-child td:last-child,
.ui-table tfoot tr:last-child th:last-child {
    border-bottom-right-radius: var(--radius-lg);
}

.ui-table th {
    background-color: var(--table-head-bg);
    color: var(--table-head-fg);
    font-weight: var(--fw-medium);
    padding: 6px var(--space-3);
    text-align: left;
    font-size: var(--fs-sm);
}

.ui-table th[colspan]:not([colspan="1"]) {
    background: var(--table-head-group-bg) !important;
    color: var(--table-head-fg) !important;
    text-align: center;
}

.ui-table thead th.sorting,
.ui-table thead th.sorting_asc,
.ui-table thead th.sorting_desc {
    cursor: pointer;
    padding-right: 20px;
}

.ui-table td {
    padding: 6px var(--space-3);
    border-bottom: 0.5px solid var(--color-border-soft);
    color: var(--color-text-primary);
    vertical-align: middle;
}

.ui-table tr:last-child td {
    border-bottom: none;
}

.ui-table tfoot td {
    background: var(--table-foot-bg);
    font-weight: var(--fw-medium);
    color: var(--color-text-primary);
    border-top: 1px solid var(--color-border);
}

.ui-table tbody tr.ui-row--violet > td { background-color: var(--row-hl-violet) !important; }
.ui-table tbody tr.ui-row--amber > td { background-color: var(--row-hl-amber) !important; }
.ui-table tbody tr.ui-row--red > td { background-color: var(--row-hl-red) !important; }
.ui-table tbody tr.ui-row--green > td { background-color: var(--row-hl-green) !important; }
.ui-table tbody tr.ui-row--grey > td { background-color: var(--row-hl-grey) !important; }
.ui-table tbody tr.ui-row--blue > td { background-color: var(--row-hl-blue) !important; }

.ui-table tbody tr:hover > td {
    background-image: linear-gradient(rgba(0, 0, 0, .03), rgba(0, 0, 0, .03));
}

.ui-table--clickable tbody tr:not(.ui-detail-row) {
    cursor: pointer;
}

.ui-table tbody tr.ui-detail-row:hover > td {
    background-image: none;
}

.ui-metrics {
    display: flex;
    flex-wrap: wrap;
    padding: var(--space-2) 0;
    border-top: 0.5px solid var(--color-border-soft);
}

.ui-metrics:first-child {
    padding-top: 0;
    border-top: none;
}

.ui-metrics__cell {
    flex: 1 1 110px;
    min-width: 0;
    padding: var(--space-1) var(--space-3);
    border-left: 0.5px solid var(--color-border);
    text-align: center;
}

.ui-metrics__cell:first-child {
    border-left: none;
}

.ui-metrics__label {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    line-height: 1.3;
}

.ui-metrics__value {
    margin-top: 2px;
    font-size: var(--fs-xl);
    color: var(--color-text-strong);
}

.ui-metrics__sub {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

.ui-cell__sub {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.ui-num {
    font-variant-numeric: tabular-nums;
}

.ui-num--muted {
    color: var(--color-text-muted);
}

.ui-num--warn {
    color: var(--color-danger);
    font-weight: var(--fw-medium);
}

.ui-num__note {
    display: block;
    font-size: var(--fs-xs);
    color: var(--color-danger);
}

.ui-expand {
    width: 24px;
    height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.ui-expand:hover {
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
}

.ui-expand:focus {
    outline: none;
}

.ui-table tbody tr.is-expanded .ui-expand {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.ui-expand i {
    display: inline-block;
    font-size: 11px;
    transition: transform .15s ease;
}

.ui-table tbody tr.is-expanded .ui-expand i {
    transform: rotate(180deg);
}

.ui-table tbody tr.ui-detail-row > td {
    padding: 0 var(--space-3) 0 42px;
}

.ui-detail-wrap {
    padding: var(--space-3) 0;
}

.ui-detail {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}

.ui-detail__label {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin-bottom: 3px;
}

.ui-detail__value {
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    color: var(--color-text-strong);
}

.ui-detail__value--muted {
    font-weight: normal;
    color: var(--color-text-muted);
}

.ui-detail__sub {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-sm);
    font-weight: normal;
    color: var(--color-text-secondary);
}

@media (max-width: 1200px) {
    .ui-detail {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ui-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-3);
    font-size: var(--fs-base);
    color: var(--color-text-muted);
}

.ui-pagination__pages {
    display: flex;
    gap: 3px;
}

.ui-page-btn {
    padding: 3px var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: var(--color-surface);
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
}

.ui-page-btn.is-active {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    border-color: var(--color-primary);
}

.ui-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    flex-shrink: 0;
}

.ui-modal .modal-content {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

.ui-modal .modal-header {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.ui-modal .modal-title {
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    color: var(--color-text-primary);
    line-height: var(--control-h);
}

.ui-modal .modal-header .close {
    margin-top: 2px;
    font-size: 22px;
    font-weight: 400;
    color: var(--color-text-muted);
    opacity: 1;
    text-shadow: none;
}

.ui-modal .modal-header .close:hover {
    color: var(--color-text-primary);
}

.ui-modal .modal-body {
    padding: var(--space-4);
    display: flow-root;
}

/* Индикатор загрузки в теле таблицы (кастомные fetch без DataTables-процессинга) */
.ui-table-loading {
    text-align: center;
    padding: var(--space-5);
    color: var(--color-text-muted);
}

/* Кастомная пагинация (PaginationService) — рендерит те же классы, что DataTables
   (dataTables_info/paginate_button/current/ellipsis), поэтому переиспользует стили ниже */
#pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-3);
}

#pagination-container .dataTables_paginate {
    display: flex;
    gap: 3px;
}

#pagination-container .pagination > li.active > span {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-contrast);
}

.ui-modal__info {
    margin-bottom: var(--space-3);
    font-size: var(--fs-base);
    color: var(--color-text-secondary);
}

.ui-modal__info:empty {
    display: none;
}

.ui-modal .modal-footer {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    text-align: right;
}

.ui-modal .form-group label {
    font-size: var(--fs-sm);
    font-weight: normal;
    color: var(--color-text-secondary);
    margin-bottom: 3px;
}

.ui-modal .form-control {
    border: 1px solid #ccc;
    border-radius: var(--radius);
    font-size: var(--fs-base);
    color: var(--color-text-primary);
    box-shadow: none;
}

.ui-modal input.form-control {
    height: var(--control-h);
}

.ui-dt-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.ui-dt-head .dataTables_length,
.ui-dt-head .dataTables_length label {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: normal;
}

.ui-dt-head .dataTables_filter {
    width: auto;
    float: none;
    margin: 0 0 0 auto;
}

.ui-dt-head .dataTables_filter label {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: normal;
}

.ui-dt-head .dataTables_filter label input {
    height: var(--control-h);
    margin: 0;
    border: 1px solid #ccc;
    border-radius: var(--radius);
    padding: var(--space-1) var(--space-2);
    font-size: var(--fs-base);
}

.ui-dt-head__info {
    font-size: var(--fs-base);
    color: var(--color-text-muted);
    line-height: var(--control-h);
}

.ui-dt-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-3);
}

.ui-page .dataTables_wrapper .dataTables_length,
.ui-page .dataTables_wrapper .dataTables_info,
#pagination-container .dataTables_info {
    font-size: var(--fs-base);
    color: var(--color-text-muted);
}

.ui-page .dataTables_wrapper .dataTables_length select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: var(--control-h);
    border: 1px solid #ccc;
    border-radius: var(--radius);
    padding: 0 22px 0 8px;
    font-size: var(--fs-base);
    color: var(--color-text-primary);
    background-color: var(--color-surface);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888888'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
    margin: 0 4px;
    cursor: pointer;
}

.ui-page .dataTables_wrapper .dataTables_paginate {
    display: flex;
    gap: 3px;
}

.ui-page .dataTables_wrapper .dataTables_paginate .paginate_button,
#pagination-container .paginate_button {
    padding: 3px var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-secondary) !important;
    font-size: var(--fs-sm);
    cursor: pointer;
    min-width: auto;
    text-decoration: none;
}

.ui-page .dataTables_wrapper .dataTables_paginate .paginate_button.current,
#pagination-container .paginate_button.current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-contrast) !important;
}

.ui-page .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
#pagination-container .paginate_button.disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.ui-page .dataTables_wrapper .dataTables_paginate .ellipsis,
#pagination-container .ellipsis {
    padding: 3px 4px;
    color: var(--color-text-muted);
}

/* DataTables внутри наших модалок (records modal): инфо/пагинация/лоадер как на .ui-page */
.ui-modal .dataTables_wrapper {
    position: relative;
    overflow-x: auto;
}

.ui-modal .dataTables_wrapper .dataTables_length,
.ui-modal .dataTables_wrapper .dataTables_info {
    font-size: var(--fs-base);
    color: var(--color-text-muted);
}

.ui-modal .dataTables_wrapper .dataTables_length select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: var(--control-h);
    border: 1px solid #ccc;
    border-radius: var(--radius);
    padding: 0 22px 0 8px;
    font-size: var(--fs-base);
    color: var(--color-text-primary);
    background-color: var(--color-surface);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888888'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
    margin: 0 4px;
    cursor: pointer;
}

.ui-modal .dataTables_wrapper .dataTables_paginate {
    display: flex;
    gap: 3px;
}

.ui-modal .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 3px var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-secondary) !important;
    font-size: var(--fs-sm);
    cursor: pointer;
    min-width: auto;
}

.ui-modal .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-contrast) !important;
}

.ui-modal .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.5;
    cursor: default;
}

/* нативные (не selectize) селекты в модалках — вид под наш selectize */
.ui-modal select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: var(--control-h);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0 22px 0 8px;
    font-size: var(--fs-base);
    color: var(--color-text-primary);
    background-color: var(--color-surface);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888888'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
    box-shadow: none;
    cursor: pointer;
}

/* инпут ui-kit — JS-близнец components.input (для разметки, генерируемой в JS) */
.ui-input {
    height: var(--control-h);
    padding: 2px 8px;
    font-size: var(--fs-base);
    color: var(--color-text-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: none;
    outline: none;
}

.ui-input:focus {
    border-color: var(--color-primary);
}

/* контейнер инлайн-редактора «поле + кнопки» в ячейке таблицы */
.ui-inline-edit {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

/* группа кнопок-действий в ячейке таблицы — в строку с отступами */
.ui-table .btn-group-vertical {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

/* бейджи из легаси-JS (label label-*) → вид ui-badge в новых контекстах */
.ui-page .label,
.ui-modal .label {
    display: inline-block;
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    line-height: normal;
    text-shadow: none;
}

.ui-page .label-info,
.ui-modal .label-info {
    background: var(--badge-blue-bg);
    color: var(--badge-blue-fg);
}

.ui-page .label-warning,
.ui-modal .label-warning {
    background: var(--badge-orange-bg);
    color: var(--badge-orange-fg);
}

.ui-page .label-success,
.ui-modal .label-success {
    background: var(--badge-green-bg);
    color: var(--badge-green-fg);
}

.ui-page .label-danger,
.ui-modal .label-danger {
    background: var(--badge-red-bg);
    color: var(--badge-red-fg);
}

/* ==== Страницы набора: candidate2 / candidates2 / candidates_schedule2 / eu_latam2 / schedule_interview2 ==== */

/* Layout панелей (bootstrap-сетка внутри ui-panel): flow-root — панель всегда охватывает
   свои float-дети (колонки, подвал DataTables, pull-right-кнопки), не обрезая дропдауны */
.ui-page .ui-panel { margin-bottom: var(--space-4); display: flow-root; }
.ui-page .ui-panel legend { border-bottom: 0; margin-bottom: var(--space-3); }
.ui-page .ui-panel h4 + hr { display: none; }
.ui-page .ui-panel input.form-control:not([type="checkbox"]):not([type="radio"]) { height: var(--control-h); }
.ui-page .ui-panel .ui-field { margin-bottom: var(--space-3); }
.ui-page .ui-panel .dataTables_wrapper { max-width: 100%; }
.ui-page .ui-panel h4 {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-text-muted);
    margin: var(--space-4) 0 var(--space-2);
}

/* candidate2 — кнопки состояний «Действия» */
.ui-page .action_state:not(.action_state--active):not(.action_state--wait) { background-color: var(--badge-green-bg); border-color: var(--color-success); color: var(--badge-green-fg); }
.ui-page .action_state:not(.action_state--active):not(.action_state--wait):hover { background-color: var(--table-head-group-bg); }
.action_state { width: 100% !important; margin-bottom: var(--space-2) !important; }
#delete-operator { margin-top: var(--space-1); margin-bottom: var(--space-4); }

/* candidate2 — редакторы состояний, ссылки, спиннер */
.hidden-editor { max-width: 250px; text-align: left; position: absolute; z-index: 1000; }
#interview_editor_time { left: 225px; width: 170px; }
#interview_editor_operator { left: 382px; width: 400px; }
#interview_info { color: var(--color-success); }
.thumbnail { margin-bottom: var(--space-1); }
#profile_link { font-size: var(--fs-base); font-weight: 100; display: inline-block; position: absolute; right: var(--space-4); }
#lessons-block { display: none; }
.time_row { display: block; padding: var(--space-1) 0; text-align: center; font-weight: bold; border: 1px solid var(--color-text-muted); cursor: pointer; }
.time_row.active { background-color: #e4e8a9; }
.selectize-dropdown, .selectize-dropdown.form-control { background-color: var(--color-surface); }
.exam-loading-body { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-5); }
.lds-dual-ring { display: inline-block; width: 80px; height: 80px; }
.lds-dual-ring::after {
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    margin: 8px;
    border-radius: 50%;
    border: 6px solid var(--color-surface);
    border-color: var(--color-primary) transparent var(--color-primary) transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* candidate2 — виджеты downtime/график (партиал user_extended2) */
.table-widget-container .dataTables_wrapper { min-height: 150px; zoom: 0.9; }
.time_input { width: 80%; display: inline-block; padding-right: 0; }
.input-smaller { width: 60%; }
.time_block { padding-left: var(--space-1); padding-right: 0; }
.dinner_buttons button { width: 100%; white-space: normal; }
.spliter_row { border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-2); }
.spliter_row .form-group { margin-bottom: 7px; }
[name=downtime_date_filter] { width: 80%; display: inline-block; }
input[type="time"]::-webkit-clear-button { display: none; }
input[type="time"]::-ms-clear { display: none; }
#dinner_pin { cursor: pointer; }
.dinner { padding-top: 7px; text-align: center; }
#trainer_access_row { margin-bottom: var(--space-4); }
.modal-center { margin-top: 15%; }

/* candidates2 / eu_latam2 — списки кандидатов */
.take-user, .user-link { cursor: pointer; }
.ex-employee { color: var(--color-danger); }
#search_table {
    display: none;
    z-index: 99999;
    background: var(--color-surface);
    max-height: 200px;
    overflow-y: auto;
    margin-top: var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
/* candidates2 — таблица кандидатов: перенос длинных значений (мессенджер/почта/телефон/примечание).
   Скоупим по классу, иначе позиционное nth-child ломает эти же колонки на других ui-table (напр. Гео/Товар в order_logs2). */
.ui-table--candidates td:nth-child(3),
.ui-table--candidates td:nth-child(4),
.ui-table--candidates td:nth-child(5),
.ui-table--candidates td:nth-child(8) { word-break: break-all; }
.ui-table--candidates td:nth-child(8) { width: 20%; }

/* candidates_schedule2 — график менеджеров */
.schedule-toolbar { display: flex; justify-content: flex-end; margin-bottom: var(--space-3); }
#table-schedule, #table-schedule th { text-align: center; }
#table-schedule td { padding: 0; vertical-align: middle; }
#table-schedule tr td:first-child { padding: var(--space-2) 0; }
#table-week-schedule tbody td:first-child { width: 25%; }
#table-week-schedule tbody td:nth-child(2) { width: 30%; }
#table-week-schedule tbody td:nth-child(4) { width: 11%; }
#table-week-schedule tr td:last-child,
#table-breaks tr td:last-child { vertical-align: middle; }
.work_type { color: var(--color-text-muted); font-style: italic; }
.holiday, .work_day, .work_times { height: 56px; margin: 0; width: 100%; }
.holiday { background-color: #c9f566; }
.work_day { cursor: pointer; }
.work_times { background-color: #fdddf0; color: #fdddf0; padding-top: 30%; }
.work_times:hover { color: var(--color-text-primary); }
#user_name { padding-top: 7px; display: inline-block; }
.remove_schedule, .remove_break { color: var(--color-danger); }
#break_from, #break_to { width: 60px; }
#work_start { background-color: transparent; cursor: pointer; }
#error_unavailable, #error_empty { color: var(--color-danger); display: none; }
.edit_schedule { padding: 0; border: 0; line-height: 17px; }

/* schedule_interview2 — отчёт «График собеседований» */
#table_report th, #table_report td { text-align: center; position: relative; }
#table_report .time { text-align: center; }
#table_report .weekend { text-align: center; background-color: #e4c1c6; }
#table_report .break { background-color: #e4e8a9; }
#table_report .remove_row { position: absolute; right: 0; bottom: 0; }

/* селекты в шапке (язык/таймзона) — наш selectize, компактный инлайн (не блочный) */
.ui-header-locale {
    display: inline-flex;
    gap: var(--space-2);
    vertical-align: middle;
}
.ui-header-locale .selectize-control {
    width: auto;
    min-width: 62px;
    margin-bottom: 0;
}
.ui-header-locale .selectize-control.single .selectize-input {
    min-height: 26px;
    height: 26px;
    padding: 3px 22px 3px 8px;
    line-height: 18px;
    font-size: var(--fs-sm);
    border-radius: var(--radius);
    border-color: var(--color-border);
    box-shadow: none;
    display: flex;
    align-items: center;
}
.ui-header-locale .selectize-control.single .selectize-input:after {
    right: 8px;
}
/* обёртка виджета — text-right; текст в поле и в выпадающем списке выравниваем влево */
.ui-header-locale .selectize-input,
.ui-header-locale .selectize-dropdown,
.ui-header-locale .selectize-dropdown .option {
    text-align: left;
}

/* ===== Login ===== */
.ui-login {
    clear: both;
    padding-bottom: 40px;
}
.ui-login__card {
    width: 340px;
    max-width: 92%;
    margin: 5% auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    text-align: center;
}
.ui-login__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto var(--space-3);
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 34px;
    line-height: 72px;
}
.ui-login__title {
    margin: 0 0 var(--space-4);
    color: var(--color-text-primary);
    font-size: var(--fs-xl);
    font-weight: var(--fw-medium);
}
.ui-login__form {
    text-align: left;
}
.ui-login__form .ui-field {
    margin-bottom: var(--space-3);
}
.ui-login__form .ui-btn--block {
    margin-top: var(--space-2);
}
.ui-login__forgot {
    display: inline-block;
    margin-top: var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--fs-sm);
}
.ui-login__forgot:hover {
    color: var(--color-primary);
}
.ui-login__note {
    margin: var(--space-3) 0 0;
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
}
.ui-login__note a.disabled {
    color: var(--color-text-muted);
}

/* ===== Utility: horizontal scroll for wide tables ===== */
.ui-scroll-x {
    overflow-x: auto;
}