/*
  ========================================
  Variáveis de Estilo (Custom Properties)
  ========================================
*/
:root {
    /* Cores */
    --color-primary: #343a40;
    --color-secondary: #f8f9fa;
    --color-accent: #17a2b8;
    --color-background-light: #f6f9ff;
    --color-background-dark: #212529;
    --color-text-light: #ffffff;
    --color-text-dark: #adb5bd;

    /* Espaçamento */
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;

    /* Transições */
    --transition-fast: 0.2s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
}

/*
  ========================================
  Estilos de Layout Geral
  ========================================
*/
body {
    background-color: var(--color-background-light);
    font-family: 'Arial', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

header {
    z-index: 11000;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-secondary);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: var(--transition-normal);
}

.container {

}

/*
  ========================================
  Componente: Sidebar
  ========================================
*/
.sidebar {
    position: fixed;
    z-index: 10000;
    top: 50px;
    left: 0;
    height: calc(100% - 50px); /* Ajusta a altura para não cobrir o header */
    width: 250px;
    background: var(--color-primary);
    color: var(--color-text-light);
    padding-top: var(--space-md);
    transition: transform var(--transition-normal);
    transform: translateX(0); /* Estado padrão: visível */
}

.sidebar.collapsed {
    transform: translateX(-100%); /* Estado colapsado: oculta a sidebar */
}

.sidebar .nav-link {
    color: var(--color-text-dark);
    padding: var(--space-md) var(--space-lg);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    color: var(--color-text-light);
    background-color: var(--color-background-dark);
}

.toggle-sidebar-btn {
    cursor: pointer;
    font-size: 1.5rem; /* Ajusta o tamanho do ícone */
    color: var(--color-primary);
}

/*
  ========================================
  Responsividade
  ========================================
*/
@media (max-width: 768px) {
    .offcanvas {
        width: 100% !important;
    }


}