/* assets/css/style.css - Estilos globais para o SCFlow 2.0 */

/* Garante que html e body ocupem a altura total da viewport e remove margens/padding padrão */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif; /* Aplicado globalmente aqui */
    background-color: #F8FAFC; /* Fundo principal */
}

/*
*   Estilos para páginas de autenticação (login, cadastro, esqueceu senha)
*   Este wrapper centraliza o conteúdo vertical e horizontalmente para estas páginas.
*/
.auth-page-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Garante que o wrapper ocupe a altura total da viewport */
    width: 100%; /* Garante que o wrapper ocupe a largura total */
}

/* Containers de Formulário (Login, Cadastro, Recuperação de Senha) */
.login-container,
.register-container,
.container-box {
    background-color: #FFFFFF; /* Superfície conforme paleta do SCFlow 2.0 */
    padding: 3rem;
    border-radius: 0.5rem; /* Bordas suaves */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); /* Sombras sutis */
    width: 100%;
    max-width: 450px; /* Padrão para login e recuperação */
}
/* Ajuste de largura para a página de Cadastro, se necessário */
.register-container {
    max-width: 500px;
}

/* Logos */
.login-logo,
.register-logo,
.logo,
.logo-container {
    text-align: center;
    margin-bottom: 2rem;
}
.login-logo img,
.register-logo img,
.logo img,
.logo-container img {
    max-width: 150px; /* Padrão para logos em formulários */
    height: auto;
}
/* Ajuste para o logo no index.php */
.logo-container img {
    max-width: 250px;
}

/* Labels de Formulário */
.form-label {
    font-weight: 500;
}

/* Botões primários do SCFlow */
.btn-primary-scflow {
    background-color: #2563EB; /* Azul Royal Moderno */
    border-color: #2563EB;
    color: #FFFFFF;
    font-weight: 600;
    padding: 0.75rem 1.25rem;
    border-radius: 0.3rem;
}
.btn-primary-scflow:hover {
    background-color: #1D4ED8; /* Um tom mais escuro para hover */
    border-color: #1D4ED8;
    color: #FFFFFF;
}
/* Estilo para botões de submit em formulários para que ocupem 100% da largura */
.form-submit-btn {
    width: 100%;
}

/* Ajuste para o botão do index.php */
.btn-primary-scflow-index {
    min-width: 150px;
    width: auto;
}

/* Alertas */
.alert-error-scflow {
    background-color: #FEE2E2; /* Fundo mais claro para erro */
    color: #EF4444; /* Vermelho para texto de erro */
    border-color: #EF4444;
}
.alert-success-scflow {
    background-color: #D1FAE5;
    color: #065F46;
    border-color: #10B981;
}

/* ========================================= */
/*  Estrutura Base (Sidebar e Conteúdo)     */
/* ========================================= */
.wrapper {
    display: flex; /* Para que sidebar e content fiquem lado a lado */
    width: 100%; /* Ocupa 100% da largura do body */
    align-items: stretch; /* Estica os filhos (sidebar e content) verticalmente */
    min-height: 100vh; /* Garante que o wrapper tenha pelo menos 100% da altura da viewport */
}

#sidebar {
    min-width: 250px; /* Largura mínima e máxima do sidebar */
    max-width: 250px;
    background: #ffffff; /* Fundo branco para o sidebar */
    color: #495057; /* Texto escuro */
    transition: all 0.3s; /* Transição suave para o colapsar/expandir */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Sombra para profundidade */
    position: sticky; /* Mantém o sidebar no lugar ao rolar */
    top: 0; /* Fica no topo da viewport */
    height: 100vh; /* Ocupa 100% da altura da viewport */
    overflow-y: auto; /* Adiciona scroll se o conteúdo for maior que a tela */
    z-index: 1000; /* Garante que fique acima de outros elementos */
    flex-shrink: 0; /* Evita que o sidebar encolha */
}

/* Estado colapsado do sidebar */
#sidebar.collapsed {
    margin-left: -250px; /* Move o sidebar para fora da tela, escondendo-o completamente */
}

/* Cabeçalho do sidebar */
#sidebar .sidebar-header {
    padding: 20px;
    background: #ffffff; /* Fundo branco */
    border-bottom: 1px solid #dee2e6;
    text-align: center;
}

/* Logos do sidebar (completo e colapsado) */
#sidebar .sidebar-header .full-logo {
    display: block; /* Visível por padrão */
}
#sidebar .sidebar-header .collapsed-logo {
    display: none; /* Escondido por padrão */
}
#sidebar.collapsed .sidebar-header .full-logo {
    display: none; /* Esconde o logo completo quando colapsado */
}
#sidebar.collapsed .sidebar-header .collapsed-logo {
    display: block; /* Mostra o logo colapsado */
    max-width: 40px;
    margin: 0 auto;
}

/* Navegação do sidebar */
#sidebar ul.sidebar-nav {
    padding: 20px 0;
}
#sidebar ul.sidebar-nav li a {
    padding: 10px 20px;
    font-size: 1.1em;
    display: flex; /* Permite alinhar ícone e texto */
    align-items: center; /* Alinha verticalmente */
    color: #495057; /* Cor do texto dos links */
    text-decoration: none;
    transition: all 0.3s;
    border-radius: 5px; /* Bordas arredondadas para os itens do menu */
    margin-bottom: 5px; /* Espaçamento entre itens */
}
#sidebar ul.sidebar-nav li a i {
    margin-right: 10px; /* Espaço entre ícone e texto */
}
#sidebar ul.sidebar-nav li a:hover,
#sidebar ul.sidebar-nav li a.active {
    color: #2563EB; /* Cor primária ao passar o mouse ou ativo */
    background: #e9ecef; /* Fundo cinza claro */
}
#sidebar ul.sidebar-nav li a.active {
    font-weight: 600; /* Negrito para item ativo */
}

/* Ajustes para o texto e ícone quando o sidebar está colapsado */
#sidebar.collapsed .sidebar-nav li a span {
    display: none; /* Esconde o texto */
}
#sidebar.collapsed .sidebar-nav li a i {
    margin: 0 auto; /* Centraliza o ícone */
}
#sidebar .sidebar-nav hr {
    border-color: #e0e0e0; /* Cor da linha divisória */
}


/* ========================================= */
/*  Área de Conteúdo (com a Top-Navbar)     */
/* ========================================= */
#content {
    width: 100%;
    padding: 0; /* Remover padding padrão para o layout fluido */
    min-height: 100vh;
    transition: all 0.3s;
    display: flex; /* Usar flexbox para organizar top-navbar e container-fluid */
    flex-direction: column; /* Organizar itens em coluna */
}

.top-navbar {
    padding: 15px 20px;
    background: #ffffff; /* Fundo branco */
    border-bottom: 1px solid #dee2e6;
    width: 100%; /* Ocupa 100% da largura do #content */
    display: flex; /* Para alinhar itens (botões, texto, dropdown) */
    justify-content: space-between; /* Espaço entre os elementos */
    align-items: center; /* Alinha verticalmente no centro */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Sombra sutil */
    position: sticky; /* Fixa a barra no topo */
    top: 0;
    z-index: 999; /* Abaixo do sidebar, mas acima do conteúdo */
}

.top-navbar .btn {
    border: none;
    color: #495057;
}

/* Ajustes para o conteúdo principal abaixo da top-navbar */
#content .container-fluid {
    padding: 20px; /* Adiciona padding ao conteúdo principal */
    flex-grow: 1; /* Permite que o container-fluid ocupe o espaço restante */
    overflow-y: auto; /* Adiciona rolagem se o conteúdo for maior que a tela */
}

/* ========================================= */
/*  Paleta de cores e utilitários           */
/* ========================================= */
.color-primary { color: #2563EB; }
.bg-primary-scflow { background-color: #2563EB !important; }
.text-primary-scflow { color: #2563EB !important; }
.color-secondary { color: #64748B; }
.bg-secondary-scflow { background-color: #64748B !important; }
.text-secondary-scflow { color: #64748B !important; }
.color-success { color: #10B981; }
.bg-success-scflow { background-color: #10B981 !important; }
.text-success-scflow { color: #10B981 !important; }
.color-warning { color: #F59E0B; }
.bg-warning-scflow { background-color: #F59E0B !important; }
.text-warning-scflow { color: #F59E0B !important; }
.color-danger { color: #EF4444; }
.bg-danger-scflow { background-color: #EF4444 !important; }
.text-danger-scflow { color: #EF4444 !important; }


/* Customizações para modais */
.modal-xl-custom { /* Modal mais largo para o formulário de cliente */
    --bs-modal-width: 90vw; /* 90% da largura da viewport */
    max-width: 1200px; /* Máximo de 1200px */
}
/* Estilo para botão de fechar modal branco */
.btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ========================================= */
/*  Responsividade                          */
/* ========================================= */
@media (max-width: 991.98px) { /* Tablets e dispositivos móveis */
    #sidebar {
        margin-left: -250px; /* Esconde o sidebar por padrão */
        position: fixed; /* Fixa o sidebar para sobrepor o conteúdo */
        height: 100vh;
        z-index: 1030; /* Garante que fique acima de outros elementos */
        top: 0;
        left: 0;
    }
    #sidebar.show { /* Classe adicionada por JS para mostrar o sidebar */
        margin-left: 0;
    }
    #content {
        width: 100%; /* Conteúdo ocupa 100% da largura */
        margin-left: 0; /* Nenhuma margem quando o sidebar está escondido */
    }
    .top-navbar #sidebarToggle {
        display: none !important; /* Esconde o botão de toggle grande no mobile */
    }
    .top-navbar #sidebarCollapse {
        display: block !important; /* Mostra o botão de hambúrguer no mobile */
    }
}
@media (min-width: 992px) { /* Desktops e telas maiores */
    #sidebar {
        margin-left: 0; /* Sidebar visível por padrão */
    }
    #sidebar.collapsed { /* Comportamento do sidebar colapsado em desktop */
        margin-left: -250px; /* Esconde completamente, ou ajusta-se para mostrar um ícone apenas */
    }
    .top-navbar #sidebarCollapse {
        display: none !important; /* Esconde o botão de hambúrguer no desktop */
    }
    .top-navbar #sidebarToggle {
        display: block !important; /* Mostra o botão de toggle grande no desktop */
    }
}