/* ===== Reset & base ===== */
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'Inter', sans-serif;
  background-color: rgb(235, 235, 235); 
  color: rgb(25, 45, 95);               
  box-sizing: border-box;
  overflow-x: hidden;  
}

* { box-sizing: border-box; }

.fullscreen {
  min-height: 100vh;   /* 🔧 força ocupar toda a viewport */
  width: 100%;
  height: 100%;
  background-color: "rgb(25, 45, 95)";
  overflow: hidden
}

/* ===== Dropdown customizado ===== */
.custom-dropdown .Select-control {
  background-color: rgb(25, 45, 95) !important;  /* dark blue */
  border: none !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  min-height: 32px !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.custom-dropdown .Select-placeholder,
.custom-dropdown .Select-value-label {
  color: #ffffff !important;                     
  font-size: 14px !important;
  padding-left: 6px !important;
}

.custom-dropdown .Select-arrow {
  border-color: #ffffff transparent transparent !important;
}

/* Container do dropdown como âncora */
.custom-dropdown .Select {
  position: relative !important;
}

/* Menu suspenso */
.custom-dropdown .Select-menu-outer {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: auto !important;

  background: #fff !important;
  border: 1px solid rgb(235,235,235) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12) !important;

  z-index: 4000 !important;       
  min-width: 100% !important;     
  max-width: none !important;     
  max-height: 260px !important;   
  overflow-y: auto !important;    
}

/* Opções */
.custom-dropdown .Select-option,
.custom-dropdown .VirtualizedSelectOption {
  display: block !important;
  color: rgb(25,45,95) !important;
  padding: 8px 12px !important;
  white-space: nowrap !important;
}

.custom-dropdown .Select-option:hover {
  background: rgb(10,220,230) !important;
  color: rgb(25,45,95) !important;
}

.custom-dropdown .Select-option.is-selected {
  background: rgba(10,220,230,0.5) !important;
  color: rgb(25,45,95) !important;
}

/* Container não limita dropdown */
.custom-dropdown,
.custom-dropdown .Select,
.custom-dropdown .Select-control {
  max-width: none !important;
  overflow: visible !important;
  margin-right: 8px;
  min-width: 200px !important;
}

.custom-dropdown .Select--multi .Select-value {
  white-space: nowrap !important;      /* evita quebrar linha */
  max-width: 60px;                    /* largura máxima de cada tag */
  overflow: hidden; 
  text-overflow: ellipsis;             /* corta com "..." */
}

.custom-dropdown .Select-multi-value-wrapper {
  /*display: flex;*/
  flex-wrap: nowrap !important;        /* não quebra linha */
  overflow: hidden; 
  max-height: 36px;                    /* 🔧 altura fixa igual ao single */
  max-width: 60px;
  text-overflow: ellipsis;             /* corta com "..." */
}

.custom-dropdown .Select-control {
  max-height: 36px !important;         /* altura fixa */
  height: 36px !important;
  max-width: 60px;              /* 🔧 altura forçada */
  overflow: hidden;
  text-overflow: ellipsis; 
}

/* ===== Header ===== */
.header {
  width: 100%;
  display: flex;
  justify-content: space-between; 
  align-items: center;
  padding: 15px 25px;
  background: #ffffff;
  border-bottom: 1px solid rgb(235, 235, 235);
  overflow: visible !important; /* deixa o dropdown expandir */
  position: relative;
  z-index: 10;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;  
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* ===== Layout ===== */
.app-shell {
  display: flex;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}

.main {
  margin-left: 250px; 
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  z-index: 1;
}

.main.collapsed {
  margin-left: 60px;
}

.core-content {
  margin-left: 20px; 
  margin-right: 20px;
}

/* ===== Sidebar ===== */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 250px;
  background: rgb(25, 45, 95);
  color: #ffffff;
  padding: 20px;
  overflow-y: auto;
  z-index: 1000;
  transition: width 0.3s ease, padding 0.3s ease;
  font-size: 14px;
}

.sidebar img {
  margin-bottom: 20px;
  transition: opacity 0.3s ease;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
  color: #ffffff;
  margin-left: 1px;
}

.sidebar li i {
  width: 18px;
  text-align: center;
  color: inherit;
  margin-left: 1px;
}

.sidebar li a {
  color: inherit;
  text-decoration: none;
  flex: 1;
  transition: opacity 0.3s ease;
}

/* Hover */
.sidebar li:hover {
  background: rgb(10, 220, 230);
  color: rgb(25, 45, 95);
  border-radius: 6px;
}

/* Active */
.sidebar li.active {
  background: rgba(10, 220, 230, 0.5);
  color: rgb(25, 45, 95);
  border-radius: 6px;
}

/* Sidebar colapsada */
.sidebar.collapsed {
  width: 60px;
  padding: 10px 10px;
  overflow-x: hidden;
}

.sidebar.collapsed h2 {
  opacity: 0;
}

/* Link ocupa o LI inteiro e alinha ícone + texto */
.sidebar li .menu-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

/* Ícone herda cor do item e tem largura fixa */
.sidebar li .menu-icon {
  width: 18px;
  text-align: center;
  color: inherit;
}

/* Texto do item */
.sidebar li .menu-label {
  flex: 1;
  white-space: nowrap;
}

/* Estado colapsado: esconde apenas o texto, mantém ícone clicável */
.sidebar.collapsed .menu-label {
  display: none;
}

/* Opcional: centraliza o ícone quando colapsado */
.sidebar.collapsed .menu-link {
  justify-content: center;
}

/* Hovers/ativos seguem funcionando como antes */
.sidebar li:hover {
  background: rgb(10, 220, 230);
  color: rgb(25, 45, 95);
  border-radius: 6px;
}
.sidebar li.active {
  background: rgba(10, 220, 230, 0.5);
  color: rgb(25, 45, 95);
  border-radius: 6px;
}

/* Logo padrão */
.sidebar-logo {
  width: 120px;
  height: auto;          
  transition: width 0.3s ease;
}

/* Logo quando sidebar está colapsada */
.sidebar.collapsed .sidebar-logo {
  width: 40px;           
  height: auto;
}

/* ===== Botão toggle ===== */
.toggle-btn {
  background: rgb(25, 45, 95);
  color: #ffffff;
  border: none;
  font-size: 18px;
  border-radius: 6px;
  cursor: pointer;
  padding: 6px 10px;
  margin-right: 15px;
  transition: background 0.2s;
}
.toggle-btn:hover {
  background: rgb(10, 220, 230);
  color: rgb(25, 45, 95);
}

/* ===== Charts ===== */
.charts {
  display: flex;
  gap: 20px;
  margin: 20px;
  flex-wrap: wrap;
}

.chart {
  flex: 1;
  min-width: 300px;
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.chart:hover {
  transform: translateY(-4px);
}

.chart .row {
  margin-left: 0px !important;
  margin-right: 0px !important;
}
.chart .col {
  padding-left: 0px !important;
  padding-right: 0px !important;
}