/* ============================================================
   Gestão Escolar — identidade "quadro-escolar" sobre Fomantic UI
   O framework cuida da anatomia; aqui mora só a alma da escola.
   ============================================================ */
:root {
    --ardosia-900: #12291d;
    --ardosia-700: #1b4332;
    --ardosia-500: #2d6a4f;
    --ardosia-100: #d8f3dc;
    --giz: #f7f5ef;
    --papel: #efece4;
    --tinta-suave: #5c6358;
}

body { background: var(--giz); }
body.com-topo { padding-top: 54px; }

/* Topbar */
.topo-identidade.ui.menu { background: var(--ardosia-900); border-radius: 0; }
.topo-identidade .marca { font-weight: 800; font-size: 1.15rem; color: #fff !important; }
.topo-identidade .marca span { color: var(--ardosia-100); }

/* Corpo com sidebar */
.app-corpo { display: flex; align-items: stretch; min-height: calc(100vh - 54px); }
.app-corpo > .ui.vertical.menu.sidebar-app {
    flex: 0 0 240px; width: 240px !important; margin: 0; border-radius: 0;
    border-top: none; border-bottom: none; border-left: none;
}
.sidebar-app .active.item { background: var(--ardosia-100) !important; color: var(--ardosia-900) !important; font-weight: 600; }
.conteudo { flex: 1; padding: 1.6rem 2rem 3rem; min-width: 0; }

/* Botão primário na cor da casa */
.ui.primary.button, .ui.primary.buttons .button { background-color: var(--ardosia-700); }
.ui.primary.button:hover, .ui.primary.button:focus { background-color: var(--ardosia-500); }
.ui.primary.button:active { background-color: var(--ardosia-900); }

/* Cabeçalho das tabelas com o tom da lousa */
.ui.table thead th { background: var(--ardosia-100); color: var(--ardosia-900); }

/* Links do conteúdo */
.conteudo a:not(.ui):not(.item) { color: var(--ardosia-500); }
.conteudo a:not(.ui):not(.item):hover { color: var(--ardosia-700); }

/* ---------- utilidades preservadas do layout antigo ---------- */
.pagina-cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.pagina-cabecalho .ui.header { margin: 0; }
.grupo-botoes { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.form-inline { display: inline-block; margin: 0; }
.celula-acoes { white-space: nowrap; }
.texto-suave { color: var(--tinta-suave); }
.dica { color: var(--tinta-suave); font-size: 0.88rem; margin: 0.7rem 0 0; }
.vazio { color: var(--tinta-suave); font-style: italic; }
.filtro-barra { display: flex; gap: 0.8rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem; }
.rotulo-mini { display: inline-flex; flex-direction: column; gap: 0.2rem; font-size: 0.78rem; color: var(--tinta-suave); }

/* Formulários de linha: Fomantic estiliza os campos, o flex alinha */
.ui.form.form-linha { display: flex; gap: 0.6rem; align-items: flex-end; flex-wrap: wrap; }
.ui.form.form-linha .ui.checkbox { margin-bottom: 0.55rem; }

/* Grades de formulário (2 colunas fluidas) */
.ui.form .form-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.4rem 1.2rem; }

/* Matriz de permissões e habilitações */
.lista-checkboxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.5rem 1.2rem; }
.lista-checkboxes code { display: block; font-size: 0.72rem; color: var(--tinta-suave); }

/* Editor da grade curricular */
.linha-grade-item { display: flex; align-items: flex-end; gap: 0.8rem; padding: 0.55rem 0; border-top: 1px solid rgba(34,36,38,.1); }
.linha-grade-item:first-of-type { border-top: none; }
.nome-disciplina-grade { min-width: 200px; font-weight: 600; padding-bottom: 0.55rem; }
.total-linha { margin: 0.8rem 0 0; padding-top: 0.6rem; border-top: 2px solid rgba(34,36,38,.15); font-size: 0.92rem; }

/* Períodos do ano letivo */
.linha-periodo { padding-top: 0.6rem; border-top: 1px solid rgba(34,36,38,.1); }
.linha-periodo:first-of-type { border-top: none; }
.linha-periodo-status { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0 0.6rem; }
.btn-link-suave { background: none; border: none; padding: 0; cursor: pointer; color: var(--ardosia-500); font-size: 0.82rem; text-decoration: underline; }
.btn-link-suave:hover { color: var(--ardosia-700); }

/* Quadro de horários (peça sob medida) */
.card-quadro { overflow-x: auto; }
.quadro-horarios { width: 100%; border-collapse: collapse; }
.quadro-horarios th, .quadro-horarios td { border: 1px solid rgba(34,36,38,.15); padding: 0.4rem; text-align: center; vertical-align: middle; }
.quadro-horarios thead th { background: var(--ardosia-700); color: #fff; font-size: 0.85rem; padding: 0.55rem 0.4rem; }
.quadro-horarios .col-slot { background: var(--ardosia-100); color: var(--ardosia-900); font-size: 0.82rem; white-space: nowrap; min-width: 92px; }
.quadro-horarios .col-slot span { display: block; font-weight: 400; font-size: 0.75rem; }
.quadro-horarios td { min-width: 112px; height: 60px; }
.aula-celula { position: relative; display: flex; flex-direction: column; gap: 0.05rem; background: var(--ardosia-100); border-radius: 6px; padding: 0.35rem 0.3rem 0.3rem; }
.aula-sigla { font-weight: 700; color: var(--ardosia-900); font-size: 0.9rem; }
.aula-prof { font-size: 0.72rem; color: var(--tinta-suave); }
.aula-celula .form-inline { position: absolute; top: 2px; right: 4px; }
.btn-x { background: none; border: none; cursor: pointer; line-height: 1; color: #b91c1c; font-size: 0.95rem; padding: 0 0.15rem; }
.btn-x:hover { color: #7f1d1d; }
.form-marcar { display: flex; gap: 0.25rem; justify-content: center; align-items: center; }
.form-marcar select { font-size: 0.78rem; max-width: 96px; padding: 0.25rem; border: 1px solid rgba(34,36,38,.15); border-radius: 4px; background: #fff; }
.btn-mais { background: var(--ardosia-500); color: #fff; border: none; border-radius: 6px; width: 26px; height: 26px; cursor: pointer; font-size: 1rem; line-height: 1; }
.btn-mais:hover { background: var(--ardosia-700); }

/* Telas de acesso (login / escolher escola) */
.tela-guest { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; }
.coluna-acesso { width: 100%; max-width: 430px; }
.marca-guest { text-align: center; margin-bottom: 1.2rem; }
.marca-guest h1 { color: var(--ardosia-900); font-size: 2rem; margin: 0; font-weight: 800; }
.marca-guest h1 span { color: var(--ardosia-500); }
.marca-guest p { color: var(--tinta-suave); margin: 0.3rem 0 0; }
.btn-vinculo { text-align: left !important; margin-bottom: 0.6rem !important; }
.btn-vinculo strong { display: block; }
.btn-vinculo span { font-size: 0.82rem; color: var(--tinta-suave); font-weight: 400; }