/*
 * tabs-styles-b24.css — стили вкладок в стилистике Bitrix24.
 *
 * Дизайн-токены Bitrix24:
 *   --b24-primary: #2067b0   — фирменный синий (активная вкладка, акценты)
 *   --b24-primary-hover: #178ae0
 *   --b24-border: #d5dbe0    — границы
 *   --b24-text: #333f4e      — основной текст
 *   --b24-text-muted: #808a95
 *   --b24-bg-hover: #f2f5f7
 *
 * Для отката на старый вид подключите tabs-styles-legacy.css вместо этого файла.
 */

:root {
    --b24-primary: #2067b0;
    --b24-primary-hover: #178ae0;
    --b24-primary-light: #eaf4fc;
    --b24-border: #d5dbe0;
    --b24-text: #333f4e;
    --b24-text-muted: #808a95;
    --b24-bg: #ffffff;
    --b24-bg-hover: #f2f5f7;
}

/* ===== Навигация вкладками ===== */
.tabs-nav {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--b24-border);
    padding: 0;
    flex-wrap: wrap;
}

.tab-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    text-decoration: none;
    color: var(--b24-text-muted);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    margin-bottom: -1px;
    user-select: none;
}

.tab-link:hover {
    background-color: var(--b24-bg-hover);
    color: var(--b24-primary);
    text-decoration: none;
}

.tab-link.active {
    background-color: var(--b24-bg);
    border-bottom: 2px solid var(--b24-primary);
    color: var(--b24-primary);
    font-weight: 600;
}

/* Крестик закрытия динамической вкладки (ЛК менеджера) */
.tab-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--b24-text-muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.tab-close-btn:hover {
    background: rgba(32, 103, 176, 0.12);
    color: var(--b24-primary);
}

/* ===== Панели вкладок (iframe / живой контент) ===== */
.tab-panels {
    position: relative;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.tab-panel iframe {
    width: 100%;
    min-height: 70vh;
    border: none;
    border-radius: 4px;
    display: block;
    background: var(--b24-bg);
}

/* Спиннер-заглушка при первой загрузке iframe */
.tab-loading {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 20px;
    color: var(--b24-text-muted);
    font-size: 14px;
}

.tab-panel.loading .tab-loading {
    display: flex;
}

.tab-loading .spinner {
    width: 22px;
    height: 22px;
    border: 2px solid var(--b24-primary);
    border-top-color: transparent;
    border-radius: 50%;
    animation: tab-spin 0.8s linear infinite;
}

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