/* Общие стили для drag-and-drop */
.sortable-ghost {
    opacity: var(--sortable-ghost-opacity, 0.4);
    background-color: var(--main-light, #f8f9fa);
}

.sortable-drag {
    opacity: var(--sortable-drag-opacity, 0.8);
    box-shadow: var(--sortable-shadow, 0 4px 8px rgba(0,0,0,0.2));
}

.drag-handle:hover {
    color: var(--main-red, #dc3545) !important;
}

.sortable-row,
.sortable-block,
.sortable-item {
    transition: var(--sortable-transition, all 0.2s ease);
}

/* Стили для таймера группы мишеней */
.target-group-timer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
    min-height: 200px;
    justify-content: center;
}

.timer-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.timer-step.current-step {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.timer-step.next-step {
    opacity: 0.3;
}

.step-label {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    text-align: center;
}

.step-time {
    font-size: 2.5rem;
    font-weight: bold;
    font-family: 'Courier New', monospace;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Общие стили для нативного HTML5 drag & drop */
.draggable-element,
.draggable-training {
    cursor: move;
    user-select: none;
    transition: var(--transition-fast, all 0.2s ease);
}

.draggable-element:active,
.draggable-training:active {
    opacity: 0.5;
}

/* Состояние при перетаскивании над зоной сброса */
.drag-over {
    background-color: #e3f2fd !important;
}

/* Контейнеры для drag & drop */
.droppable-container {
    transition: var(--transition-fast, all 0.2s ease);
}

/* Общие стили для фильтра по типу оружия */
/* Кнопки фильтра по типу оружия (общие стили) */
.weapon-type-filter-btn {
    min-width: 50px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.weapon-type-filter-btn img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.weapon-type-filter-btn i {
    font-size: 1.5rem;
}

.weapon-type-filter-btn.active {
    background-color: var(--weapon-filter-active-bg);
    border-color: var(--weapon-filter-active-bg);
    color: var(--weapon-filter-active-color);
}

.weapon-type-filter-btn.active:hover {
    background-color: var(--weapon-filter-active-hover-bg);
    border-color: var(--weapon-filter-active-hover-bg);
}

/* Скрытые элементы для данных */
.data-container-hidden {
    display: none;
}

/* Скрытая форма фильтра */
.filter-form-hidden {
    display: none;
}

.weapon-type-filter-btn.active img,
.weapon-type-filter-btn.active i {
    filter: brightness(0) saturate(100%) invert(30%) sepia(95%) saturate(2000%) hue-rotate(210deg) brightness(0.9);
}

/* Общие стили для кликабельных строк */
.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background-color: var(--main-light, #f8f9fa);
}

/* Общие стили для загрузки изображений */
.image-preview {
    max-height: 300px;
    width: 100%;
    object-fit: contain;
}

.image-placeholder {
    height: 300px;
    background-color: #f8f9fa;
}

/* Стили для выпадающих списков (select) - визуальное отображение */
select.form-control,
select.form-select,
.form-control select,
select {
    /* Убираем стандартную стрелку браузера */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    /* Добавляем кастомную стрелку */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23343a40'%3e%3cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 16px;
    padding-right: 2.75rem;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

/* Улучшенная стрелка при наведении */
select.form-control:hover,
select.form-select:hover,
.form-control select:hover,
select:hover {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23007bff'%3e%3cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3e%3c/svg%3e");
    border-color: #80bdff;
    background-color: #f8f9ff;
}

/* Стрелка при фокусе */
select.form-control:focus,
select.form-select:focus,
.form-control select:focus,
select:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23007bff'%3e%3cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3e%3c/svg%3e");
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    background-color: #fff;
}

/* Стили для disabled select */
select.form-control:disabled,
select.form-select:disabled,
.form-control select:disabled,
select:disabled {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3e%3cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3e%3c/svg%3e");
    cursor: not-allowed;
    opacity: 0.65;
    background-color: #e9ecef;
}