/* ============================================================
   Complementos ao template (assets/css/style.css).
   O layout — barra superior, menu lateral que encolhe e area da
   pagina — vem do template. Aqui ficam so os componentes proprios
   do sistema e os poucos ajustes que o template nao cobre.
   ============================================================ */

/* --- Bloco de perfil na barra lateral --- */

.sidebar .nav .nav-item.nav-profile { padding: 18px 22px 12px; }

.perfil-bloco { display: flex; align-items: center; gap: 12px; min-width: 0; }

.perfil-avatar {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
    display: flex; align-items: center; justify-content: center;
}

.perfil-texto { display: flex; flex-direction: column; min-width: 0; }
.perfil-nome  { font-size: 14px; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perfil-papel { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: #94a3b8; }

/* Com o menu encolhido sobra so o avatar. */
.sidebar-icon-only .sidebar .nav .nav-item.nav-profile { padding: 18px 0 12px; }
.sidebar-icon-only .perfil-bloco { justify-content: center; }
.sidebar-icon-only .perfil-texto { display: none; }

/* --- Item de menu da pagina atual --- */

.sidebar .nav .nav-item .nav-link.is-atual {
    background: rgba(102, 126, 234, 0.1);
    border-left: 3px solid #667eea;
    font-weight: 600;
}

.sidebar .nav .nav-item .nav-link.is-atual .menu-title { color: #4c51bf; }

/* --- Subtitulo da barra superior --- */

.navbar .welcome-sub-text { font-size: 13px; font-weight: 400; color: #94a3b8; margin: 2px 0 0; }

.alerta {
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alerta.erro    { background: #fee2e2; color: #dc2626; border: 1px solid #fca5a5; }
.alerta.sucesso { background: #dcfce7; color: #16a34a; border: 1px solid #86efac; }

.aviso-construcao {
    background: #fff;
    border: 1px dashed #d1d5db;
    border-radius: 12px;
    padding: 48px;
    text-align: center;
    color: #6b7280;
}

.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }

.cartao {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cartao-numero { font-size: 32px; font-weight: 700; color: #667eea; }
.cartao-rotulo { font-size: 13px; color: #6b7280; }

/* --- Telas administrativas --- */

.tabela { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; }
.tabela th, .tabela td { padding: 10px 14px; text-align: left; font-size: 14px; border-bottom: 1px solid #e5e7eb; }
.tabela th { background: #f9fafb; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }
.tabela tr:last-child td { border-bottom: none; }
.tabela code { font-size: 12px; color: #6b7280; }

.formulario { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 24px; display: grid; gap: 14px; max-width: 640px; }
.formulario label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; color: #374151; }
.formulario label.alternador { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
.formulario input, .formulario select, .barra-busca input, .barra-busca select, .linha-form input, .linha-form select {
    padding: 9px 12px; border: 1px solid #d1d5db; border-radius: 8px; font: inherit; font-size: 14px;
}
.formulario input[type="checkbox"] { width: auto; }
.formulario .ajuda { font-size: 12px; color: #6b7280; margin: 0; }

button, .barra-busca button {
    padding: 9px 18px; border: none; border-radius: 8px; background: #667eea; color: #fff;
    font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
button:hover { background: #5a67d8; }
button.link-perigo { background: none; color: #dc2626; padding: 4px 8px; font-size: 13px; }
button.link-perigo:hover { background: #fee2e2; }

.barra-busca { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 18px; }
.barra-busca label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; }
.linha-form { display: flex; gap: 6px; align-items: center; }
.linha-form button { padding: 6px 12px; font-size: 13px; }

.lista-permissoes { list-style: none; display: grid; gap: 6px; }
.lista-permissoes label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.lista-permissoes small { font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.estado-herdado { background: #e0e7ff; color: #4338ca; }
.estado-excecao { background: #fef3c7; color: #b45309; }
.estado-nenhum  { background: #f3f4f6; color: #9ca3af; }

.abas { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid #e5e7eb; }
.abas a {
    padding: 10px 18px; text-decoration: none; color: #6b7280; font-size: 14px; font-weight: 500;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.abas a.ativo { color: #667eea; border-bottom-color: #667eea; }

.paginacao { display: flex; align-items: center; gap: 14px; margin-top: 18px; font-size: 14px; }
.paginacao a { color: #667eea; text-decoration: none; font-weight: 500; }
.paginacao span { color: #6b7280; }

.tabela tr.linha-atencao { background: #fffbeb; }

/* --- Paginas de erro: autocontidas, sem o template --- */

.erro-pagina {
    max-width: 520px;
    margin: 12vh auto;
    padding: 40px 24px;
    text-align: center;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #1e293b;
}

.erro-pagina h1 { font-size: 72px; font-weight: 700; color: #667eea; margin: 0; line-height: 1; }
.erro-pagina p  { margin: 12px 0; color: #64748b; }
.erro-pagina a  { color: #667eea; font-weight: 500; text-decoration: none; }
.erro-pagina a:hover { text-decoration: underline; }

/* Barra superior branca sobre o corpo cinza.
   O template pinta navbar e corpo com o mesmo #F4F5F7; as paginas
   antigas quebravam isso com style inline em cada arquivo. Aqui vale
   para o layout inteiro, uma vez so. */
.navbar.default-layout .navbar-brand-wrapper,
.navbar.default-layout .navbar-menu-wrapper {
    background: #ffffff;
}
.navbar.default-layout {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* O template declara .sidebar com 270px, mas calcula o main-panel e a
   marca da navbar com 220px. Os 50px de diferenca ficavam por baixo do
   menu e cortavam a primeira coluna de toda tabela e todo numero.
   Aqui as tres medidas passam a ser a mesma. */
@media (min-width: 992px) {
    .sidebar-fixed .main-panel { margin-left: 270px; }
    .main-panel                { width: calc(100% - 270px); }
    .navbar .navbar-brand-wrapper { width: 270px; }
    .navbar .navbar-menu-wrapper  { width: calc(100% - 270px); }

    /* Recolhido, a faixa mede 70px: as mesmas tres medidas acompanham. */
    .sidebar-icon-only.sidebar-fixed .main-panel { margin-left: 70px; }
    .sidebar-icon-only .main-panel               { width: calc(100% - 70px); }
    .sidebar-icon-only .navbar .navbar-brand-wrapper { width: 70px; }
    .sidebar-icon-only .navbar .navbar-menu-wrapper  { width: calc(100% - 70px); }
}