/* ========================================
   SIDEBAR PORTAL
   Estilos específicos para páginas que usam sidebar-portal.php
   Complementa os estilos base do estilo-base.css
   Versão: 1.0
======================================== */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

@font-face {
  font-family: "Rubik"; font-weight: normal; font-style: normal;
  src: url("recursos/fontes/Rubik-VariableFont_wght.ttf") format("truetype");  
}

@font-face {
  font-family: "Rubik"; font-weight: normal; font-style: italic;
  src: url("recursos/fontes/Rubik-Italic-VariableFont_wght.ttf") format("truetype");  
}

/* Reset e Variáveis CSS */
* {
  margin: 0; padding: 0; box-sizing: border-box;
  font-family: 'Rubik', sans-serif;
  font-variant-numeric: tabular-nums; /* Números monoespaçados */
  font-feature-settings: "tnum"; /* Números monoespaçados */
  text-rendering: optimizeLegibility; /* Melhor renderização de texto */
  -webkit-font-smoothing: antialiased; /* Suavização de fontes para WebKit */
  -moz-osx-font-smoothing: grayscale; /* Suavização de fontes para Firefox */
  -webkit-tap-highlight-color: transparent; /* Remove o destaque ao tocar em elementos */
  scrollbar-width: 10px; /* Estilo de scrollbar para Firefox */
}

/* Propriedades de user-select apenas em elementos interativos, não no body/html */
button, .btn, .card-modulos, a {
  -webkit-touch-callout: none; /* Desativa o menu de contexto ao tocar e segurar no iOS */
  -webkit-user-select: none; /* Desativa a seleção de texto no iOS */
  -moz-user-select: none; /* Desativa a seleção de texto no Firefox */
  -ms-user-select: none; /* Desativa a seleção de texto no IE */
  user-select: none; /* Desativa a seleção de texto */
}

/* Smooth scroll para iOS */
html {
  -webkit-overflow-scrolling: touch;
}

:root {
  --statusbar-color: #062725;
}

/* PWA Standalone*/
@media (display-mode: standalone) {
  /* Faixa fixa atrás da status bar (notch) */
  body::before{
    content:"" !important;
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    height: env(safe-area-inset-top, 0px) !important;
    background: var(--statusbar-color) !important;
    pointer-events:none !important;
    z-index: 2147483647 !important;
    display: block !important;
  }
}

/* ===== BOTÃO HAMBURGER MOBILE ===== */
.toggle-sidebar {
    position: relative;
    width: 50px;
    height: 50px;
    background: var(--primary-color, #3FA110);
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin: 0;
    transition: all 0.3s ease;
    overflow: visible;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.toggle-sidebar:hover {
    background: var(--primary-dark, #188E45);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(0px);
}

.toggle-sidebar:active {
    transform: scale(0.95);
}

.toggle-sidebar:focus {
    outline: 2px solid var(--border-focus, #58AD65);
    outline-offset: 2px;
}

/* SVG do Hamburger */
.toggle-sidebar svg {
    width: 40px;
    height: 40px;
    fill: none;
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Linhas do Hamburger */
.toggle-sidebar .line {
    fill: none;
    stroke: #033333;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
                stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-sidebar .line-top-bottom {
    stroke-dasharray: 12 63;
}

/* Estado ativo - quando sidebar está aberta */
.toggle-sidebar.active svg {
    transform: rotate(-45deg);
}

.toggle-sidebar.active .line-top-bottom {
    stroke-dasharray: 20 300;
    stroke-dashoffset: -32.42;
}

/* Animação de hover */
.toggle-sidebar:hover svg {
    animation: pulse 1s ease-in-out;
}

/* Tema Escuro */
[data-theme="dark"] .toggle-sidebar {
    background: var(--primary-dark, #2a7a2e);
}

[data-theme="dark"] .toggle-sidebar:hover {
    background: var(--primary-color, #3FA110);
}

[data-theme="dark"] .toggle-sidebar .line {
    stroke: #033333;
}

/* Remove animações para usuários com preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    .toggle-sidebar,
    .toggle-sidebar svg,
    .toggle-sidebar .line {
        transition: none;
        animation: none;
    }
}

/* ===== SEPARADORES ENTRE SEÇÕES (SIDEBAR COLAPSADA) ===== */

/* Adiciona separador visual entre seções quando sidebar está colapsada */
.sidebar.collapsed .nav-section:not(:first-child) {
    position: relative;
    margin-top: 12px;
    padding-top: 12px;
}

.sidebar.collapsed .nav-section:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(88, 173, 101, 0.3) 20%,
        rgba(88, 173, 101, 0.5) 50%,
        rgba(88, 173, 101, 0.3) 80%,
        transparent 100%);
}

/* Tema escuro - separadores mais visíveis */
[data-theme="dark"] .sidebar.collapsed .nav-section:not(:first-child)::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(88, 173, 101, 0.4) 20%,
        rgba(88, 173, 101, 0.6) 50%,
        rgba(88, 173, 101, 0.4) 80%,
        transparent 100%);
}

/* Animação suave ao colapsar/expandir */
.sidebar .nav-section {
    transition: margin-top 0.3s ease, padding-top 0.3s ease;
}

.sidebar .nav-section::before {
    transition: opacity 0.3s ease, width 0.3s ease;
}

/* Remove separador quando expandida */
.sidebar:not(.collapsed) .nav-section:not(:first-child)::before {
    opacity: 0;
    width: 0;
}

/* ===== RESPONSIVIDADE ===== */

/* Desktop - esconde botão hamburger mobile */
@media (min-width: 769px) {
    .toggle-sidebar {
        display: none;
    }
}

/* Mobile - esconde botão toggle desktop */
@media (max-width: 768px) {
    .sidebar-toggle {
        display: none !important;
    }
}