/* ============================================
   EAD Play - Skeleton Loading System
   ============================================ */

/* ── Variáveis do Skeleton ─────────────────── */
:root {
    --sk-base:     #e8ecf0;
    --sk-shine:    #f8fafc;
    --sk-speed:    1.6s;
    /* Para páginas com sidebar escuro */
    --sk-dark-base:  rgba(255, 255, 255, 0.06);
    --sk-dark-shine: rgba(255, 255, 255, 0.12);
}

/* ── Animação Shimmer ──────────────────────── */
@keyframes sk-shimmer {
    0%   { background-position: -800px 0; }
    100% { background-position:  800px 0; }
}

@keyframes sk-shimmer-dark {
    0%   { background-position: -800px 0; }
    100% { background-position:  800px 0; }
}

/* ── Classe base do elemento skeleton ─────── */
.sk {
    background: linear-gradient(
        90deg,
        var(--sk-dark-base)  0%,
        var(--sk-dark-shine) 40%,
        var(--sk-dark-base)  80%
    );
    background-size: 800px 100%;
    animation: sk-shimmer-dark var(--sk-speed) ease-in-out infinite;
    border-radius: 6px;
    flex-shrink: 0;
}

/* Versão clara (para areas de content com fundo claro) */
.sk-light {
    background: linear-gradient(
        90deg,
        var(--sk-base)  0%,
        var(--sk-shine) 40%,
        var(--sk-base)  80%
    );
    background-size: 800px 100%;
    animation: sk-shimmer var(--sk-speed) ease-in-out infinite;
    border-radius: 6px;
    flex-shrink: 0;
}

/* ── Estado: Página Carregando ─────────────── */
body.page-loading > .app-layout,
body.page-loading > .login-page {
    opacity: 0;
    pointer-events: none;
}

.app-layout,
.login-page {
    transition: opacity 0.35s ease;
}

/* ── Overlay principal ─────────────────────── */
#skeletonOverlay {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: flex;
    background: var(--content-bg);
    opacity: 0;
    pointer-events: none;
    /* Só faz transição ao SUMIR (não ao aparecer) */
    transition: opacity 0.35s ease;
    overflow: hidden;
}

body.page-loading #skeletonOverlay {
    opacity: 1;
    pointer-events: all;
    transition: none; /* Aparece instantaneamente */
}

/* ── Skeleton: Sidebar ─────────────────────── */
.sk-sidebar {
    width: var(--sidebar-width, 260px);
    min-width: var(--sidebar-width, 260px);
    background: var(--sidebar-bg, #0f1117);
    border-right: 1px solid var(--sidebar-border, #2a2d3a);
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0 12px 20px;
    overflow: hidden;
}

.sk-sidebar-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 8px 20px;
    border-bottom: 1px solid var(--sidebar-border, #2a2d3a);
    margin-bottom: 12px;
}

.sk-section-label {
    height: 10px;
    border-radius: 4px;
    margin: 14px 8px 8px;
}

.sk-nav-item {
    height: 36px;
    border-radius: 8px;
    margin-bottom: 2px;
}

/* ── Skeleton: Content Area ────────────────── */
.sk-content-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--content-bg, #f4f6fb);
}

.sk-topbar {
    height: 65px;
    background: var(--content-surface, #fff);
    border-bottom: 1px solid var(--content-border, #e2e8f0);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 32px;
    flex-shrink: 0;
}

.sk-main {
    flex: 1;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
}

.sk-row {
    display: flex;
    gap: 16px;
}

/* ── Skeleton: Login Page ──────────────────── */
.sk-login-wrap {
    display: none; /* oculto por padrão, ativo só em page-login */
    flex: 1;
    align-items: center;
    justify-content: center;
    background: #0f1117;
}

body.page-login #skeletonOverlay {
    background: #0f1117;
}

body.page-login .sk-sidebar,
body.page-login .sk-content-wrap {
    display: none;
}

body.page-login .sk-login-wrap {
    display: flex;
}

.sk-login-card {
    width: 100%;
    max-width: 420px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

/* ── Progress Bar de Navegação ─────────────── */
#navProgressBar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--primary-500), var(--accent-500));
    z-index: 9999;
    transition: width 0.4s ease, opacity 0.3s ease;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 10px rgba(79, 90, 255, 0.5);
    opacity: 0;
}

#navProgressBar.running {
    opacity: 1;
    animation: progress-run 1.2s ease forwards;
}

@keyframes progress-run {
    0%   { width: 0%; }
    30%  { width: 45%; }
    60%  { width: 72%; }
    85%  { width: 88%; }
    100% { width: 95%; }
}

#navProgressBar.done {
    width: 100% !important;
    opacity: 0;
    animation: none;
    transition: width 0.15s ease, opacity 0.3s ease 0.15s;
}

/* ── Utilitários de Dimensão ───────────────── */
.sk-w-30  { width: 30%; }
.sk-w-40  { width: 40%; }
.sk-w-50  { width: 50%; }
.sk-w-60  { width: 60%; }
.sk-w-70  { width: 70%; }
.sk-w-80  { width: 80%; }
.sk-w-100 { width: 100%; }
.sk-h-10  { height: 10px; }
.sk-h-14  { height: 14px; }
.sk-h-18  { height: 18px; }
.sk-h-20  { height: 20px; }
.sk-h-24  { height: 24px; }
.sk-h-32  { height: 32px; }
.sk-h-36  { height: 36px; }
.sk-h-48  { height: 48px; }
.sk-h-80  { height: 80px; }
.sk-h-120 { height: 120px; }
.sk-h-160 { height: 160px; }
.sk-h-full{ flex: 1; }
.sk-r-full { border-radius: 9999px; }
.sk-r-md   { border-radius: 10px; }
.sk-r-lg   { border-radius: 14px; }

/* ── Skeleton de Projetos/Matrizes — oculto por padrão ─── */
.sk-projetos-wrap {
    display: none;
}

/* Ativa APENAS na página de projetos-matrizes */
body.page-projetos-matrizes #skeletonOverlay .sk-projetos-wrap {
    display: flex;
}

/* Na página de projetos, oculta o skeleton genérico de conteúdo */
body.page-projetos-matrizes #skeletonOverlay .sk-content-wrap:not(.sk-projetos-wrap) {
    display: none;
}

/* Responsive */
@media (max-width: 1024px) {
    .sk-sidebar { display: none; }
    .sk-projetos-wrap .sk-sidebar { display: none; }
}