/*
 * Custom CSS para o SisNOTA
 * Paleta: Branco, Azul Claro, Preto
 */

/* === Core Layout (Sticky Footer) === */
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f4f6f9;
    /* Um cinza muito claro, quase branco */
}

.content-wrapper {
    flex-grow: 1;
    /* Faz o conteúdo crescer e empurrar o rodapé para baixo */
    background-color: #ffffff;
    /* Branco */
    overflow-y: auto;
    /* Adiciona scroll ao conteúdo principal se necessário */
}


/* === BARRA SUPERIOR (NAVBAR) === */
.main-header {
    background-color: #ffffff;
    border-bottom: 1px solid #dee2e6;
}

.main-header .nav-link {
    color: #343a40;
    /* Preto suave */
}

.main-header .nav-link:hover {
    color: #007bff;
    /* Azul padrão do bootstrap para hover */
}


/* === MENU LATERAL (SIDEBAR) === */
.sidebar {
    height: calc(100vh - 57px);
    /* Ajusta altura para viewport menos a navbar */
    overflow-y: auto;
    padding-bottom: 80px;
    /* Adiciona espaço generoso no final para o botão sair */
}

/* Custom scrollbar styles (opcional) */
.sidebar::-webkit-scrollbar {
    width: 8px;
}

.sidebar::-webkit-scrollbar-track {
    background: #2c3e50;
    /* Cor de fundo da trilha da scrollbar */
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: #3498db;
    /* Cor da scrollbar */
    border-radius: 4px;
    border: 2px solid #2c3e50;
    /* Espaçamento em volta da scrollbar */
}

/* Fundo do menu lateral */
.main-sidebar {
    background-color: #2c3e50;
    /* Um azul escuro/preto */
}

/* Logo ou nome do sistema */
.brand-link {
    background-color: #3498db;
    /* Azul claro para a logo */
    color: #ffffff !important;
}

.brand-link .brand-text {
    color: #ffffff;
}

/* Cor dos links do menu */
.sidebar .nav-link p {
    color: #ecf0f1;
    /* Um branco acinzentado para o texto */
}

.sidebar .nav-link i {
    color: #ecf0f1;
}

/* Item do menu ativo (selecionado) */
.nav-sidebar .nav-item>.nav-link.active {
    background-color: #3498db !important;
    /* Azul claro */
    color: #ffffff;
}

.sidebar .nav-pills .nav-link.active p,
.sidebar .nav-pills .nav-link.active i {
    color: #ffffff !important;
}

/* Hover nos itens do menu */
.nav-sidebar .nav-item>.nav-link:hover {
    background-color: rgba(52, 152, 219, 0.2);
    color: #ffffff;
}

/* Submenu (treeview) */
.nav-treeview {
    background-color: #34495e;
    /* Um pouco mais claro que o fundo do menu */
}

/* === CARDS === */
.card-header {
    background-color: #eaf5ff;
    /* Um azul bem claro para o cabeçalho dos cards */
    color: #2c3e50;
    border-bottom: 1px solid #d4eaff;
}

.assunto-actions {
    margin-left: 10px;
}

.register-box-wide {
    max-width: 700px;
    /* Allows it to shrink below 700px */
    width: 90%;
    /* Occupy 90% of parent width, ensuring it's never too wide on mobile */
}

/* Custom Content Title Header */
.content-title-header {
    background-color: #007bff;
    /* Primary blue color */
    color: #ffffff;
    /* Texto branco */
    padding: 5px 10px;
    /* Reduzido */
    margin-bottom: 10px;
    /* Reduzido */
    border-radius: 0;
    /* Removido para combinar com card-header */
    font-size: 1rem;
    /* Reduzido */
    font-weight: bold;
    display: block;
    /* Garante que ocupe a largura total */
}



/* Specific styling for .content-title-header when inside a .card-header */
.card-header .content-title-header {
    background-color: transparent;
    /* Remove background color to avoid double blue/gray */
    color: #ffffff;
    /* Explicitly set white text color */
    padding: 0;
    /* Remove padding as card-header has its own */
    margin: 0;
    /* Remove margin as card-header has its own */
    border-radius: 0;
    font-size: 1rem;
    /* Ensure consistent font size */
    font-weight: bold;
    display: block;
}

.card-header .content-title-header h1,
.card-header .content-title-header h3 {
    font-size: 0.85rem;
    /* Adjust font size of actual heading inside the wrapper */
    margin: 0;
    /* Remove default margin from h1/h3 */
    padding: 0;
    /* Remove default padding */
    color: #ffffff;
    /* Explicitly set white text color */
}

/* Adjust font size for the dynamic subject title (h1#titulo-assunto) */
#titulo-assunto {
    font-size: 1.15rem;
    /* Slightly larger than 1rem for "normal" appearance */
}

/* Background color for register and login pages */
.register-page,
.login-page {
    background-color: #007bff !important;
    /* Set to primary blue */
}

/* DATATABLE STYLES for Admin User Management */
#usersTable.table {
    font-size: 0.8rem;
    /* Smaller font size for table content */
}

#usersTable.table th,
#usersTable.table td {
    padding: 0.4rem;
    /* Reduce padding to decrease row height */
    vertical-align: middle;
    /* Align content vertically in the middle */
}

#usersTable.table .btn-sm {
    padding: 0.2rem 0.4rem;
    /* Smaller padding for small buttons */
    font-size: 0.7rem;
    /* Smaller font size for button text/icons */
}

#usersTable.table .btn-sm .fas {
    font-size: 0.7rem;
    /* Explicitly reduce icon size */
}

/* Adjust badge font size within the table */
#usersTable.table .badge {
    font-size: 0.65rem;
    /* Smaller font size for badges */
    padding: 0.3em 0.5em;
    /* Adjust padding for smaller badges */
}

/* Hide copyright in footer specifically on dashboard content pages */
body.dashboard-content-page .main-footer strong {
    display: none;
}

body.dashboard-content-page .main-footer {
    visibility: hidden;
    /* Hide the entire footer if needed for spacing, or just the text */
    height: 0;
    /* Collapse height */
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* If the intention was just to hide the text and not collapse the footer,
   remove the main-footer rules above and just keep the strong rule.
   Given "ficar apenas nas demais áreas", completely hiding the footer space seems appropriate. */


/* ============================================================
   3D FLIP CARD — compatível com o toggle do olhinho
   O .card-content-wrapper continua sendo show/hide pelo eye icon.
   O flip acontece DENTRO dele, sem interferência.
   ============================================================ */

/* Perspectiva aplicada ao contêiner externo do flip */
.flip-card-wrapper {
    width: 100%;
    perspective: 1000px;
    cursor: pointer;
    min-height: 160px;
    user-select: none;
}

/* Camada que rotaciona */
.flip-card-inner {
    position: relative;
    width: 100%;
    min-height: 160px;
    transition: transform 0.55s cubic-bezier(0.4, 0.2, 0.2, 1), height 0.4s ease-in-out;
    transform-style: preserve-3d;
}

/* Estado virado */
.flip-card-wrapper.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

/* Faces: frente e verso */
.flip-card-front,
.flip-card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 160px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 6px;
    overflow: hidden;
}

/* FRENTE */
.flip-card-front {
    background: linear-gradient(135deg, #eaf5ff 0%, #dceefb 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 20px 20px;
    text-align: center;
    border: 2px dashed #a8d4f5;
}

.flip-card-front .flip-hint,
.flip-card-back .flip-hint {
    font-size: 0.78rem;
    color: #5a8ea6;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    justify-content: center;
}

.flip-card-front .flip-hint i,
.flip-card-back .flip-hint i {
    font-size: 0.9rem;
}

/* VERSO */
.flip-card-back {
    background: #ffffff;
    transform: rotateY(180deg);
    padding: 40px 16px 16px;
    border: 2px solid #d4eaff;
    overflow-y: auto;
}

/* Quando não há verso cadastrado — botão desabilitado */
.flip-card-wrapper.no-verso {
    cursor: default;
}

.flip-card-wrapper.no-verso .flip-card-front {
    border-style: solid;
    opacity: 0.85;
}