/* Файл: client/js/Widgets/Pages.css
   Стили закладок (type:"pages"/"page", см. Widgets/Pages.js). Цвета — не новые, те же, что у
   остальных виджетов движка (border #ddd как у .group-card, акцент #0078d7 как у .form-button,
   см. client-form.css/Button.css) — закладки не должны выглядеть отдельной темой внутри той же
   формы. */

.pages-container {
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
}

.pages-tabs {
    display: flex;
    flex-wrap: wrap;
    background: #eef2f7;
    border-bottom: 1px solid #ddd;
}

.pages-tab-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: #4a5568;
    font-family: inherit;
    font-size: var(--font-size, 14px);
    padding: 10px 18px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.pages-tab-btn:hover {
    color: #222;
}
.pages-tab-btn[aria-selected="true"] {
    background: #fff;
    color: #0078d7;
    border-bottom: 2px solid #0078d7;
    font-weight: bold;
}
.pages-tab-btn:focus-visible {
    outline: 2px solid #0078d7;
    outline-offset: -2px;
}

/* Внутренний отступ панели — намеренно здесь, а не на самой странице (type:"page" по умолчанию
   рисуется с BorderVisibility:NoBorder, то есть без собственного padding группы, см.
   Widgets/Group.js::renderElementFormGroup) — иначе при NoBorder контент прилипал бы к краям. */
.pages-panel {
    padding: var(--spacing, 10px) calc(var(--spacing, 10px) * 1.5);
}
.pages-panel[hidden] {
    display: none;
}