/* =========================================================
   style.css — global (sidebar + layout + utilitários)
   Mantém Poppins. Sidebar preta; grupos visíveis; hover mais forte;
   botão fixo sempre visível; logo pequeno no modo retraído.
   ========================================================= */

/* =================== Root Tokens =================== */
:root {
  --color-purple: #7F3F98;
  --color-orange: #F03200;
  --color-black: #222;
  --color-black-hover: #111;

  --sidebar-width-expanded: 260px;
  --sidebar-width-collapsed: 56px; /* barra fininha */
  --transition-speed: 0.25s;

  --background-color: #f0f2f5;

  /* Sidebar preta */
  --sidebar-bg: #000000;
  --sidebar-text: #e0e0e0;
  --sidebar-muted: #9aa0a6;  /* títulos de grupo */
  --sidebar-icon: #b7bbc1;

  /* Hover/active (um pouco mais forte) */
  --item-hover: rgba(255,255,255,.16);
  --item-active-bg: rgba(255,255,255,.22);
  --item-active-text: #ffffff;

  --border-soft: #1f1f1f;
  --widget-bg: #ffffff;
  --text-color: #333;
  --text-color-light: #777;
  --widget-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* =================== Resets =================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body, button, input { font-family: 'Poppins', sans-serif; }
body { background: var(--background-color); display: flex; color: var(--text-color); }

/* =================== Sidebar =================== */
.sidebar{
  width: var(--sidebar-width-expanded);
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  height: 100vh;
  position: fixed; left:0; top:0;
  display:flex; flex-direction:column;
  border-right: 1px solid var(--border-soft);
  transition: width var(--transition-speed) ease-in-out;
  z-index:1000;
}

/* Logo */
.logo-container{
  display:flex; justify-content:center; align-items:center;
  min-height:60px; padding:18px 0;
  border-bottom:1px solid var(--border-soft);
}
.logo{ filter: brightness(1.12); }
.logo-expanded{ max-width:140px; display:block; }
.logo-collapsed{ max-width:40px; display:none; }

/* Navegação */
.sidebar-nav{ display:flex; flex-direction:column; height:100%; }
.nav-menu{
  list-style:none; flex:1 1 auto; overflow-y:auto;
  padding:12px 0;
  padding-bottom: 80px; /* espaço pro botão fixo não cobrir o final */
  scrollbar-width: thin;
}
.nav-menu a{ text-decoration:none; color:var(--sidebar-text); }

/* Item principal (Home) – alinhado como os demais */
.nav-item-main .nav-link{
  display:flex; align-items:center; gap:12px;
  padding:10px 18px;            /* igual aos demais itens */
  margin:2px 12px;
  border-radius:10px;
  font-weight:400;               /* sem negrito */
  transition: background-color .15s ease, color .15s ease;
  min-height:44px;               /* altura consistente com demais */
}
.nav-item-main .nav-link i{
  font-size:16px; width:22px; text-align:center; color:var(--sidebar-icon);
}
.nav-item-main .nav-link:hover{ background: var(--item-hover); }

/* Separador */
.nav-divider{ height:1px; background:var(--border-soft); margin:8px 16px; }

/* Títulos de grupo (sem ícone) */
.nav-section{
  padding:8px 16px;
  margin:10px 0 6px;
  color: var(--sidebar-muted);
  font-weight:400;               /* sem negrito */
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* Itens das seções (texto menor e sem negrito) */
.nav-link{
  display:flex; align-items:center; gap:12px; /* centraliza verticalmente ícone e texto */
  padding:10px 18px; margin:2px 12px;
  border-radius:10px;
  transition: background-color .15s ease, color .15s ease;
  min-height:52px; /* altura mínima consistente para 1-2 linhas */
}
.nav-link i{
  font-size:18px; width:22px; text-align:center; color:var(--sidebar-icon);
}
.nav-link .nav-text{
  font-size:13px;               /* legibilidade */
  font-weight:400;              /* sem negrito */
  line-height:1.3;              /* altura de linha confortável */
  white-space: normal;          /* permite quebrar */
  display:-webkit-box;          /* limita a 2 linhas para consistência visual */
  -webkit-line-clamp:2;
  -webkit-box-orient: vertical;
  overflow:hidden;
  max-height: calc(1.3em * 2);
}

/* Hover/active */
.nav-link:hover{ background: var(--item-hover); }
.nav-link.active{
  background: var(--item-active-bg);
  color: var(--item-active-text);
}
.nav-link.active i{ color: var(--item-active-text); }

/* ===== Botão fixo (sempre visível no canto inferior direito da sidebar) ===== */
.sidebar-toggle-container{
  position: fixed;
  left: 0;
  bottom: 12px;
  width: var(--sidebar-width-expanded);
  display:flex; justify-content:flex-end; align-items:center;
  padding: 0 12px;
  pointer-events: none; /* container não captura clique */
}
.sidebar-toggle-btn{
  pointer-events: all;  /* botão clicável */
  background:transparent; border:1px solid var(--border-soft); color:#c8c8c8;
  padding:6px 8px; cursor:pointer; font-size:16px; border-radius:8px;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.sidebar-toggle-btn:hover{
  background: rgba(255,255,255,.10);
  border-color:#2a2a2a;
  transform: translateY(-1px);
}

/* ===== Estado colapsado ===== */
body.sidebar-collapsed .sidebar{ width: var(--sidebar-width-collapsed); }

/* Trocar logos no modo retraído */
body.sidebar-collapsed .logo-container{ display:flex; }
body.sidebar-collapsed .logo-expanded{ display:none; }
body.sidebar-collapsed .logo-collapsed{ display:block; }

/* Esconder a lista (sem ícones/itens no modo retraído) */
body.sidebar-collapsed .nav-menu{ display:none; }

/* Ajustar botão fixo para a largura retraída */
body.sidebar-collapsed .sidebar-toggle-container{
  width: var(--sidebar-width-collapsed);
  justify-content:center;
  padding: 0;
}
body.sidebar-collapsed .sidebar-toggle-btn .fa-chevron-left{
  transform: rotate(180deg); /* seta aponta à direita quando fechado */
}

/* =================== Main / Header =================== */
.main-content{
  margin-left: var(--sidebar-width-expanded);
  padding: 30px;
  transition: margin-left var(--transition-speed) ease-in-out;
  width: calc(100% - var(--sidebar-width-expanded));
}
body.sidebar-collapsed .main-content{
  margin-left: var(--sidebar-width-collapsed);
  width: calc(100% - var(--sidebar-width-collapsed));
}

header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; }
.header-left h1{ font-size:24px; font-weight:600; color:var(--text-color); }
.header-left p{ font-size:14px; color:var(--text-color-light); }
.header-center{ flex-grow:1; display:flex; justify-content:center; padding:0 40px; }
.header-right{ display:flex; align-items:center; gap:15px; }

/* Busca / Dropdown (mantidos) */
.search-container{ position:relative; width:100%; max-width:500px; }
.search-icon{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--text-color-light); }
#report-search{
  width:100%; padding:10px 15px 10px 40px; border-radius:20px;
  border:1px solid #e5e6ea; font-size:14px; transition:all .2s;
}
#report-search:focus{ outline:none; border-color:#ddd; box-shadow:0 0 0 3px rgba(0,0,0,.04); }

.search-results{
  display:none; position:absolute; top:110%; left:0; width:100%;
  background:#fff; border-radius:8px; box-shadow: var(--widget-shadow);
  max-height:300px; overflow-y:auto; z-index:1100;
}
.search-result-item{ display:block; padding:12px 15px; color:var(--text-color); text-decoration:none; font-size:14px; }
.search-result-item small{ display:block; font-size:11px; color:var(--text-color-light); margin-top:2px; }
.search-result-item:hover{ background:#f5f5f7; }

#user-menu-container{ position:relative; z-index: 10010; }
.user-profile{ display:flex; align-items:center; font-weight:500; cursor:pointer; padding:5px; border-radius:8px; transition: background-color .2s; }
.user-profile:hover{ background:#eee; }
.user-profile img{ width:40px; height:40px; border-radius:50%; margin-left:15px; object-fit:cover; }
.dropdown-menu{
  display:none; position:absolute; top:110%; right:0; background:#fff;
  border-radius:8px; box-shadow: var(--widget-shadow); min-width:180px; z-index:20000; overflow:hidden;
  animation: fadeIn .15s ease-out;
}

/* Garante que nada do conteúdo abaixo crie um contexto acima do menu */
.main-content, .widget, .modern-table-container { position: relative; z-index: 1; }
.dropdown-menu.show{ display:block; }
.dropdown-item{ display:flex; align-items:center; padding:12px 20px; text-decoration:none; color:#333; font-size:14px; transition: background-color .2s; }
.dropdown-item i{ margin-right:15px; width:16px; color:#777; }
.dropdown-item:hover{ background:#f5f5f5; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);} }

/* =================== Widgets / Tabelas (globais) =================== */
.widget{
  background: var(--widget-bg);
  padding: 25px;
  border-radius: 12px;
  box-shadow: var(--widget-shadow);
  border: 1px solid #ececf3;
}

.widget-body {
  position: relative;
  height: 250px;
}

.unified-filters-container {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

#unified-filters {
  display:flex; 
  gap:12px; 
  align-items:center;
}

#unified-filters .date-filter-box {
  display:flex; 
  gap:8px; 
  align-items:center; 
  padding:6px 10px; 
  background:#f6f7fb; 
  border:1px solid #e5e7eb; 
  border-radius:6px; 
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}

#unified-filters .date-filter-box label {
  font-size:12px; 
  color:#555; 
  white-space:nowrap;
}

#unified-filters .date-filter-box input[type="date"] {
  height:28px; 
  font-size:12px; 
  padding:2px 5px; 
  width:110px; 
  border-radius:4px; 
  border:1px solid #ccc;
}

#unified-filters .filter-btn {
  padding:6px 12px; 
  font-size:12px; 
  border-radius:6px;
}

#unified-filters .filter-dropdown {
  left: 0; 
  right: auto; 
}

/* REMOVIDO: Header Actions para os filtros unificados (movido para .unified-filters-row) */
/*
.header-actions#unified-filters {
    margin-left: auto; 
    display: flex; align-items: center; gap: 12px;
    flex-wrap: nowrap; 
    position: relative; z-index: 3001; 
    padding: 8px 15px; 
    background: #fdfdfd; 
    border: 1px solid #e5e7eb; border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.header-actions#unified-filters .date-filter-box {
    display: flex; gap: 6px; align-items: center;
    padding: 4px 8px; background: #fff; border: 1px solid #e0e2e7; border-radius: 5px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.03);
}

.header-actions#unified-filters .date-filter-box label {
    font-size: 10px; color: #555; white-space: nowrap;
}

.header-actions#unified-filters .date-filter-box input[type="date"] {
    height: 28px; font-size: 12px; padding: 3px 6px; width: 100px;
    border: 1px solid #d0d2d7; border-radius: 4px; background: #f9fafa; color: #333;
}

.header-actions#unified-filters .filter-btn {
    padding: 6px 12px; font-size: 12px; border-radius: 6px; 
    height: auto; 
}

.header-actions#unified-filters .filter-dropdown {
    min-width: 250px; 
    left: auto; right: 0; 
}
*/

.unified-filters-row {
    justify-content: flex-end; /* Alinha o conteúdo à direita */
    display: flex; align-items: center; gap: 12px;
    flex-wrap: nowrap;
    position: relative; z-index: 100;
    margin-bottom: 20px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.unified-filters-row .date-filter-box {
    display: flex; gap: 6px; align-items: center;
    padding: 4px 8px; background: #fff; border: 1px solid #e0e2e7; border-radius: 5px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.03);
}

.unified-filters-row .date-filter-box label {
    font-size: 10px; color: #555; white-space: nowrap;
}

.unified-filters-row .date-filter-box input[type="date"] {
    height: 28px; font-size: 12px; padding: 3px 6px; width: 100px;
    border: 1px solid #d0d2d7; border-radius: 4px; background: #f9fafa; color: #333;
}

.unified-filters-row .filter-btn {
    padding: 6px 12px; font-size: 12px; border-radius: 6px; /* Botões um pouco maiores */
    height: auto; /* Permitir que a altura seja definida pelo padding */
}

.unified-filters-row .filter-dropdown {
    min-width: 250px;
    right: 0;
    left: auto;
    transform: translateX(-100%);
}

/* ===== Correção global de sobreposição de filtros =====
   Garante que os dropdowns dos filtros fiquem na frente das tabelas
   em todas as páginas (GymRats, Histórico, Projetos, Oportunidades). */
#filters-bar{ position: relative; z-index: 3000; overflow: visible; }
.widget .widget-header{ position: relative; z-index: 3000; overflow: visible; }
.filter-group{ position: relative; z-index: 3000; }
.filter-dropdown{ z-index: 4000; }
.modern-table-container{ position: relative; z-index: 1; }

.modern-table{
  width:100%;
  border-collapse:collapse;
  table-layout:auto;
  white-space:nowrap;
  font-size:11px;
}
.modern-table thead th{
  text-align:left; color:#888;
  font-size:9.5px; font-weight:600; text-transform:uppercase;
  padding:8px 10px; border-bottom:1px solid #ececf3;
}
.modern-table tbody td{
  padding:10px; border-top:1px solid #f3f3f6;
  vertical-align:middle; overflow:hidden; text-overflow:ellipsis;
}

/* Utilitários */
.status-pill{
  display:inline-block; font-size:10.5px; font-weight:600;
  padding:3px 8px; border-radius:999px; background:#f1f1f4; color:#555;
}
.progress-cell{ min-width:120px; }
.completion-bar-container{ width:100%; height:6px; border-radius:3px; overflow:hidden; background:#e9ecef; }
.completion-bar{ height:100%; background:linear-gradient(90deg,#F6C847 0%,#F03200 65%,#7F3F98 100%); }

/* Compact */
.compact .widget-title{ font-size:13px; margin-bottom:12px; }
.compact .modern-table thead th{ font-size:9px; padding:7px 8px; }
.compact .modern-table tbody td{ font-size:10.5px; padding:8px; }
.compact{ padding:16px !important; }

/* Responsivo */
@media (max-width: 768px){
  .main-content{ padding:20px; }
  header{ flex-direction:column; align-items:flex-start; gap:10px; }
  .header-center{ padding:0; width:100%; }
}

/* =================== Reset de Senha (visual renovado) =================== */
.login-container{ max-width:560px; margin:24px auto; }
.login-box{
  background:#ffffff;
  padding:24px;
  border-radius:12px;
  box-shadow: var(--widget-shadow);
  border:1px solid #ececf3;
}
.login-box .input-group{ margin-bottom:16px; }
.login-box .input-group label{ display:block; font-size:12px; color:#555; margin:0 0 8px 2px; }
.login-box input{
  width:100%;
  padding:12px 14px;
  border:1px solid #cfd4dc;
  border-radius:8px;
  background:#fff; color:#222; font-size:14px;
  transition: border-color .2s, box-shadow .2s;
}
.login-box input:focus{
  outline:none;
  border-color:#F03200;
  box-shadow:0 0 0 3px rgba(240,50,0,.08);
}
.login-box.dark{ background:#252525; border:1px solid #333; color:#fff; }
.login-box.dark .input-group label{ color:#fff; font-weight:600; }
.login-box.dark input{ background:#333; border:1px solid #444; color:#fff; }
.login-box.dark input:focus{ border-color:#F03200; box-shadow:0 0 0 3px rgba(240,50,0,.20); }
.login-box.dark .info-text{ color:#cfcfcf; }
.login-box.dark .error-message{ color:#ff6b6b; }
.btn-primary{
  background: linear-gradient(90deg, #F6C847 0%, #F03200 65%, #7F3F98 100%);
  color:#fff; border:none; border-radius:10px; padding:12px 16px; font-weight:600; cursor:pointer;
  transition: transform .15s, box-shadow .15s;
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(127,63,152,.18); }
.info-text{ font-size:13px; color:#555; line-height:1.6; text-align:left; }
.error-message{ color:#B00020; font-size:13px; }

/* =================== Loader Global =================== */
#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(127, 63, 152, 0.3);
    border-top: 4px solid var(--color-purple);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Estados do conteúdo */
.content-hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.content-visible {
    opacity: 1;
    visibility: visible;
}

/* Utilitário consistente para ocultar elementos */
.hidden { display: none !important; }