﻿/* ============================================================
   ПЛАШКА ДОСТУПНОСТИ ДЕЙСТВИЙ
   Полностью на переменных site.css
   ============================================================ */

.availability-panel {
    margin-bottom: var(--margin-bottom-card);
}

/* --- Базовая плашка --- */
.launch-status-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: var(--padding-card-small);
    border-radius: var(--border-radius-card);
    border: 1px solid var(--color-card-border);
    background: var(--color-card-bg);
    color: var(--color-header);
    box-shadow: var(--box-shadow-card);
    transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}

    .launch-status-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 16px var(--color-card-shadow);
    }

    .launch-status-card .launch-status-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 1.25rem;
        flex-shrink: 0;
        background: var(--color-test-notice-bg);
        color: var(--color-test-notice-text);
    }

    .launch-status-card .launch-status-body {
        flex: 1;
        min-width: 0;
    }

    .launch-status-card .launch-status-title {
        font-weight: 600;
        font-size: var(--font-size-label);
        line-height: 1.3;
        margin-bottom: 2px;
        color: var(--color-header);
    }

    .launch-status-card .launch-status-message {
        font-size: var(--font-size-body);
        color: var(--color-test-notice-text);
        line-height: 1.35;
    }

    /* --- Статусы --- */

    /* success — зелёный акцент */
    .launch-status-card.status-success {
        background: var(--notice-success-bg, #d4edda);
        border-color: var(--color-task-options-accent, #4caf84);
    }

        .launch-status-card.status-success .launch-status-icon {
            background: rgba(76, 175, 132, 0.15);
            color: var(--color-task-options-accent, #4caf84);
        }

        .launch-status-card.status-success .launch-status-title {
            color: var(--color-task-options-accent, #4caf84);
        }

    /* warning */
    .launch-status-card.status-warning {
        background: var(--notice-warning-bg, #fff3cd);
        border-color: #e8d9b5;
    }

        .launch-status-card.status-warning .launch-status-icon {
            background: rgba(180, 83, 9, 0.12);
            color: #b45309;
        }

        .launch-status-card.status-warning .launch-status-title {
            color: #b45309;
        }

    /* danger */
    .launch-status-card.status-danger {
        background: var(--notice-secondary-bg, #f7ebeb);
        border-color: var(--color-error, #b34a4a);
    }

        .launch-status-card.status-danger .launch-status-icon {
            background: rgba(179, 74, 74, 0.12);
            color: var(--color-error, #b34a4a);
        }

        .launch-status-card.status-danger .launch-status-title {
            color: var(--color-error, #b34a4a);
        }

    /* info */
    .launch-status-card.status-info {
        background: var(--notice-info-bg, #d1ecf1);
        border-color: var(--color-focus-border, #7d9ab8);
    }

        .launch-status-card.status-info .launch-status-icon {
            background: rgba(125, 154, 184, 0.15);
            color: var(--color-submit-btn-bg, #7d9ab8);
        }

        .launch-status-card.status-info .launch-status-title {
            color: var(--color-submit-btn-bg, #7d9ab8);
        }

/* --- Счётчик --- */
.availability-counter {
    font-size: var(--font-size-html-h6);
    font-weight: 500;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-test-notice-bg);
    color: var(--color-test-notice-text);
}

/* --- Кнопки в плашке --- */
.launch-status-card .btn {
    border-radius: var(--border-radius-input);
    font-size: var(--font-size-link);
    padding: 4px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--color-card-border);
    color: var(--color-link);
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

    .launch-status-card .btn:hover {
        background: var(--color-test-notice-bg);
        border-color: var(--color-input-border);
    }

    .launch-status-card .btn:disabled {
        opacity: 0.6;
        cursor: wait;
    }

/* --- Индикатор автообновления --- */
.availability-autorefresh {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-link);
    color: var(--color-focus-border);
    margin-left: 4px;
}

/* --- Время последнего обновления --- */
.availability-last-refresh {
    font-size: var(--font-size-html-h6);
    color: var(--color-test-notice-text);
    margin-top: 4px;
    margin-left: 4px;
    opacity: 0.75;
    min-height: 1.2em;
}

/* --- Мигание плашки при обновлении --- */
@keyframes availabilityFlash {
    0% {
        box-shadow: 0 0 0 0 rgba(125, 154, 184, 0.6);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(125, 154, 184, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(125, 154, 184, 0);
    }
}

.launch-status-card.availability-flash {
    animation: availabilityFlash 0.6s ease-out;
    border-color: var(--color-focus-border);
}

/* ============================================================
   МОДАЛКА
   ============================================================ */

.availability-group {
    margin-bottom: 22px;
}

.availability-group-title {
    font-weight: 600;
    font-size: var(--font-size-label);
    padding: 8px 0;
    border-bottom: 1px solid var(--color-card-border);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-header);
}

.availability-modal-item {
    padding: var(--padding-card-small);
    border-radius: var(--border-radius-card);
    margin-bottom: 10px;
    border-left: 4px solid transparent;
    background: var(--color-test-notice-bg);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .availability-modal-item:hover {
        transform: translateX(2px);
        box-shadow: var(--box-shadow-card);
    }

    .availability-modal-item.status-danger {
        border-left-color: var(--color-error, #b34a4a);
        background: var(--notice-secondary-bg, #f7ebeb);
    }

    .availability-modal-item.status-warning {
        border-left-color: #b45309;
        background: var(--notice-warning-bg, #fff3cd);
    }

    .availability-modal-item.status-info {
        border-left-color: var(--color-focus-border, #7d9ab8);
        background: var(--notice-info-bg, #d1ecf1);
    }

    .availability-modal-item.status-success {
        border-left-color: var(--color-task-options-accent, #4caf84);
        background: var(--notice-success-bg, #d4edda);
    }

.availability-modal-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--color-header);
}

.availability-modal-item-message {
    font-size: var(--font-size-body);
    color: var(--color-test-notice-text);
    margin-bottom: 8px;
    line-height: 1.4;
}

.availability-modal-details {
    font-size: var(--font-size-body);
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: var(--border-radius-input);
    padding: 8px 12px;
}

.availability-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    color: var(--color-input-text);
}

.availability-detail-key {
    color: var(--color-test-notice-text);
}

.availability-detail-value {
    font-weight: 600;
    color: var(--color-header);
}

/* ============================================================
   ЗАБЛОКИРОВАННАЯ КНОПКА
   ============================================================ */

.btn-blocked {
    opacity: 0.5;
    cursor: not-allowed;
    position: relative;
}

    .btn-blocked::after {
        content: ' 🔒';
        font-size: 0.9em;
        margin-left: 4px;
    }

    .btn-blocked:hover {
        opacity: 0.5;
    }

/* ============================================================
   ТЁМНАЯ ТЕМА
   ============================================================ */

[data-bs-theme="dark"] .launch-status-card.status-success {
    background: rgba(76, 175, 132, 0.10);
    border-color: var(--color-task-options-accent, #4caf84);
}

[data-bs-theme="dark"] .launch-status-card.status-warning {
    background: rgba(180, 83, 9, 0.12);
    border-color: #b45309;
}

[data-bs-theme="dark"] .launch-status-card.status-danger {
    background: rgba(204, 90, 90, 0.12);
    border-color: var(--color-error, #cc5a5a);
}

[data-bs-theme="dark"] .launch-status-card.status-info {
    background: rgba(109, 141, 176, 0.12);
    border-color: var(--color-focus-border, #6d8db0);
}

[data-bs-theme="dark"] .availability-modal-item.status-danger {
    background: rgba(204, 90, 90, 0.10);
}

[data-bs-theme="dark"] .availability-modal-item.status-warning {
    background: rgba(180, 83, 9, 0.10);
}

[data-bs-theme="dark"] .availability-modal-item.status-info {
    background: rgba(109, 141, 176, 0.10);
}

[data-bs-theme="dark"] .availability-modal-item.status-success {
    background: rgba(76, 175, 132, 0.10);
}

[data-bs-theme="dark"] .availability-last-refresh {
    color: var(--color-link);
    opacity: 0.8;
}

[data-bs-theme="dark"] .btn-blocked {
    opacity: 0.4;
}

/* ============================================================
   АДАПТИВНОСТЬ
   ============================================================ */

@media (max-width: 576px) {
    .launch-status-card {
        flex-wrap: wrap;
        gap: 10px;
    }

        .launch-status-card .launch-status-icon {
            width: 34px;
            height: 34px;
            font-size: 1rem;
        }

        .launch-status-card .launch-status-title {
            font-size: var(--font-size-body);
        }

    .availability-modal-item {
        padding: 10px;
    }

    .availability-group-title {
        font-size: var(--font-size-body);
    }
}
