/*
 * EduTeste — Experiência Legado V2
 * Camada cumulativa de navegação e acabamento visual.
 * Mantém os componentes funcionais dos pacotes anteriores.
 */

:root{
    --legacy-v2-blue:#2563eb;
    --legacy-v2-blue-dark:#1d4ed8;
    --legacy-v2-green:#10b981;
    --legacy-v2-green-dark:#059669;
    --legacy-v2-purple:#7c3aed;
    --legacy-v2-teal:#0f766e;
    --legacy-v2-red:#ef4444;
    --legacy-v2-ink:#172033;
    --legacy-v2-muted:#64748b;
    --legacy-v2-line:#dce4ee;
    --legacy-v2-surface:#ffffff;
    --legacy-v2-soft:#f4f7fb;
    --legacy-v2-shadow:0 3px 12px rgba(15,23,42,.07);
}

body.role-teacher,
body.role-student,
body.role-master{
    background:#f3f6fb;
    color:var(--legacy-v2-ink);
}

.legacy-skip-link{
    position:fixed;
    top:8px;
    left:8px;
    z-index:10000;
    padding:.55rem .8rem;
    border-radius:8px;
    background:#111827;
    color:#fff;
    font-weight:800;
    transform:translateY(-150%);
    transition:transform .15s ease;
}
.legacy-skip-link:focus{transform:translateY(0)}

/* Cabeçalho reconhecível, com controles do sistema antigo. */
.legacy-topbar.legacy-topbar-parity{
    min-height:62px;
    border-bottom:1px solid #dfe5ed;
    background:rgba(255,255,255,.98);
    box-shadow:0 2px 10px rgba(15,23,42,.055);
}
.legacy-topbar .legacy-dashboard-title{
    color:#111827;
    letter-spacing:-.015em;
}
.legacy-topbar .legacy-dashboard-title:focus-visible,
.legacy-topbar .btn-header-link:focus-visible{
    outline:3px solid rgba(37,99,235,.28);
    outline-offset:2px;
}
.legacy-topbar.legacy-topbar-parity .btn-header-link{
    min-height:34px;
    padding:.38rem .8rem;
    border-radius:999px;
    font-size:.82rem;
}
.legacy-topbar.legacy-topbar-parity .btn-header-primary,
.legacy-topbar.legacy-topbar-parity .btn-header-secondary{
    box-shadow:0 2px 6px rgba(15,23,42,.10);
}
.legacy-topbar.legacy-topbar-parity .btn-header-support{
    gap:.35rem;
    border-color:#bbf7d0!important;
    background:#ecfdf5!important;
    color:#15803d!important;
}
.legacy-topbar.legacy-topbar-parity .btn-header-support:hover{
    border-color:#16a34a!important;
    background:#16a34a!important;
    color:#fff!important;
}
.btn-header-support svg{width:18px;height:18px;flex:0 0 18px}

/* Caminho comum para sair de telas especializadas sem se perder. */
.legacy-route-trail{
    display:flex;
    align-items:center;
    gap:.45rem;
    width:min(1500px,100%);
    margin:0 auto .75rem;
    color:var(--legacy-v2-muted);
    font-size:.82rem;
}
.legacy-route-trail a{
    color:var(--legacy-v2-blue-dark);
    font-weight:800;
    text-decoration:none;
}
.legacy-route-trail a:hover{text-decoration:underline}
.legacy-route-trail strong{color:#334155;font-weight:700}

/* Densidade e hierarquia visual próximas ao legado. */
.legacy-container{scroll-margin-top:76px}
.legacy-alert{
    border-radius:9px;
    box-shadow:var(--legacy-v2-shadow);
}
.card,
.legacy-panel,
.p02-box,
.p02-activity-card,
.p04-item,
.p08-assessment-list>li{
    border-color:var(--legacy-v2-line);
    box-shadow:var(--legacy-v2-shadow);
}
.card:hover,
.p02-activity-card:hover,
.p04-item:hover{
    border-color:#c5d5eb;
}

.button,
.btn,
.legacy-btn,
button{
    transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .14s ease;
}
.button:not(:disabled):active,
.btn:not(:disabled):active,
.legacy-btn:not(:disabled):active{transform:translateY(1px)}
.button:focus-visible,
.btn:focus-visible,
.legacy-btn:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
a:focus-visible{
    outline:3px solid rgba(37,99,235,.24);
    outline-offset:2px;
}

input,
select,
textarea{
    background:#fff;
    border-color:#bcc9d8;
}
input:hover,
select:hover,
textarea:hover{border-color:#94a7bd}
label{font-weight:700}

/* Painel do professor: turma continua sendo o eixo de navegação. */
@media (min-width:901px){
    .route-dashboard .p02-class-sidebar{
        position:sticky;
        top:62px;
        align-self:flex-start;
        height:calc(100vh - 62px);
        scrollbar-width:thin;
        scrollbar-color:#b8c4d4 transparent;
    }
    .route-dashboard .p02-dashboard-center{
        min-height:calc(100vh - 62px);
    }
}
.route-dashboard .p02-class-list li a{
    border-radius:10px;
    box-shadow:0 2px 7px rgba(15,23,42,.055);
}
.route-dashboard .p02-class-list li.active a{
    background:#eaf1ff;
    border-color:#2563eb;
    color:#0f172a;
    box-shadow:0 4px 12px rgba(37,99,235,.13);
}
.route-dashboard .p02-class-list li.active .p02-class-meta small{color:#475569}
.route-dashboard .p02-class-info{
    border-left:4px solid var(--legacy-v2-blue);
    background:#fff;
}
.route-dashboard .p02-tabs{
    scrollbar-width:thin;
    scrollbar-color:#cbd5e1 transparent;
}
.route-dashboard .p02-tab{
    border-radius:11px 11px 0 0;
    box-shadow:none;
}
.route-dashboard .p02-tab.active{box-shadow:0 -2px 9px rgba(15,23,42,.055)}
.route-dashboard .p02-primary-action{
    background:var(--legacy-v2-green);
    box-shadow:0 4px 10px rgba(16,185,129,.17);
}
.route-dashboard .p02-primary-action:hover{background:var(--legacy-v2-green-dark)}
.route-dashboard .p02-action-popover{
    overflow:hidden;
    padding:.35rem;
    border-radius:10px;
}
.route-dashboard .p02-action-popover a,
.route-dashboard .p02-action-popover .link-action{
    min-height:35px;
    border-radius:7px;
}
.route-dashboard .p02-action-popover a:hover,
.route-dashboard .p02-action-popover .link-action:hover{
    background:#eff5ff;
    color:#1d4ed8;
}

/* Tabelas compactas e legíveis, como no uso diário do sistema antigo. */
.p16-table-wrapper,
.table-responsive,
.table-wrap{
    scrollbar-width:thin;
    scrollbar-color:#b9c5d3 #f1f5f9;
}
table th{
    position:relative;
    font-weight:800;
}
table tbody tr{transition:background-color .12s ease}
table tbody tr:hover td{background:#f5f9ff}

/* Modais: ação curta permanece sobre o painel. */
.app-dialog{
    max-width:min(720px,calc(100vw - 28px));
    max-height:calc(100vh - 28px);
    padding:0;
    overflow:auto;
    border-radius:12px;
}
.app-dialog .dialog-panel{padding:18px}
.app-dialog .dialog-heading{
    position:sticky;
    top:0;
    z-index:2;
    background:#fff;
}
.app-dialog .dialog-actions{
    position:sticky;
    bottom:0;
    z-index:2;
    margin:0 -2px -2px;
    padding:.65rem 2px 2px;
    border-top:1px solid #eef2f7;
    background:#fff;
}

/* Páginas especializadas mantêm retorno e linguagem visual comuns. */
.legacy-page-heading,
.page-heading,
.p04-toolbar,
.p08-student-toolbar{
    border-radius:11px;
}
.breadcrumbs,
.legacy-route-trail{min-height:28px}
.status{
    border:1px solid rgba(100,116,139,.16);
    font-weight:800;
}

/* Usuário em celular conserva todas as ações importantes. */
@media (max-width:900px){
    .legacy-topbar.legacy-topbar-parity{
        box-shadow:0 2px 9px rgba(15,23,42,.07);
    }
    .legacy-controls-mobile{
        overflow-x:auto;
        padding-bottom:2px;
        scrollbar-width:none;
    }
    .legacy-controls-mobile::-webkit-scrollbar{display:none}
    .legacy-controls-mobile .legacy-controls-group{flex-wrap:nowrap}
    .legacy-route-trail{
        margin-bottom:.55rem;
        padding:0 .15rem;
        white-space:nowrap;
        overflow-x:auto;
    }
    .route-dashboard .p02-class-list{
        scroll-snap-type:x proximity;
        padding-bottom:.25rem;
    }
    .route-dashboard .p02-class-list li{scroll-snap-align:start}
    .route-dashboard .p02-class-list li.active a{
        background:#eaf1ff;
        color:#0f172a;
    }
    .route-dashboard .p02-dashboard-center{padding-top:.55rem}
    .route-dashboard .p02-tabs{margin-bottom:.65rem}
    .app-dialog .dialog-actions{flex-wrap:wrap}
    .app-dialog .dialog-actions>*{flex:1 1 auto}
}

@media (max-width:560px){
    .legacy-topbar.legacy-topbar-parity .btn-header-link{min-height:32px}
    .btn-header-support svg{display:none}
    .route-dashboard .p02-activity-card{border-radius:9px}
    .route-dashboard .p02-actions-button{min-height:34px}
    .app-dialog{width:calc(100% - 14px);max-height:calc(100vh - 14px)}
    .app-dialog .dialog-panel{padding:14px}
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        scroll-behavior:auto!important;
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }
}

@media print{
    .legacy-skip-link,
    .legacy-route-trail{display:none!important}
}