/* ============================================================
   journal-skeleton.css
   Скелетон всего содержимого журнала.
   Показывается только если загрузка длится > 250 мс (anti-flicker).
   Структура повторяет journal.css (tabs + карусель + сетка),
   чтобы не было скачка layout при появлении реального контента.
   ============================================================ */

.journal-skeleton {
    overflow: hidden;
}

/* ---------- Общая анимация пульсации ---------- */
@keyframes sas-skeleton-pulse {
    0%   { background-color: #f0f0f0; }
    50%  { background-color: #e6e6e6; }
    100% { background-color: #f0f0f0; }
}

.journal-skeleton .skeleton-tab,
.journal-skeleton .skeleton-icon-btn,
.journal-skeleton .skeleton-date-cell,
.journal-skeleton .skeleton-cell {
    animation: sas-skeleton-pulse 1.4s ease-in-out infinite;
    background-color: #f0f0f0;
    border-radius: 6px;
}

/* ---------- Tabs (День / Месяц / Список) ---------- */
.journal-skeleton .journal-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid #f0f0f0;
    background: white;
}
.journal-skeleton .tabs-group {
    display: flex;
    gap: 8px;
}
.journal-skeleton .skeleton-tab {
    width: 72px;
    height: 32px;
    border-radius: 8px;
}
.journal-skeleton .skeleton-tab-active {
    background-color: #e0e0e0;
}
.journal-skeleton .skeleton-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

/* ---------- Карусель дат ---------- */
.journal-skeleton .skeleton-carousel {
    display: flex;
    gap: 6px;
    padding: 12px 20px;
    overflow: hidden;
    border-bottom: 1px solid #f0f0f0;
    background: white;
}
.journal-skeleton .skeleton-date-cell {
    flex-shrink: 0;
    width: 52px;
    height: 60px;
    border-radius: 10px;
}

/* ---------- Сетка расписания ---------- */
.journal-skeleton .journal-grid-container {
    padding: 20px;
}
.journal-skeleton .journal-grid-body {
    width: 100%;
}
.journal-skeleton .journal-table-wrapper {
    width: 100%;
    overflow: hidden;
}
.journal-skeleton .skeleton-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.journal-skeleton .skeleton-table thead th {
    height: 48px;
    border-bottom: 1px solid #f0f0f0;
}
.journal-skeleton .skeleton-table tbody td {
    height: 56px;
    border-bottom: 1px solid #f5f5f5;
}
.journal-skeleton .skeleton-table .journal-time-header,
.journal-skeleton .skeleton-table .journal-time-cell {
    width: 72px;
}
.journal-skeleton .skeleton-cell {
    border-radius: 0;
    background-color: transparent;
    animation: none;
}
.journal-skeleton .skeleton-cell::before {
    content: "";
    display: block;
    width: 100%;
    height: 12px;
    margin: 0 auto;
    border-radius: 4px;
    background-color: #f0f0f0;
    animation: sas-skeleton-pulse 1.4s ease-in-out infinite;
}
.journal-skeleton .skeleton-cell-head::before {
    height: 16px;
    width: 60%;
    background-color: #e8e8e8;
}
.journal-skeleton .skeleton-table tbody .skeleton-cell::before {
    width: 80%;
}