/* --- 1. FONTES E VARIÁVEIS GLOBAIS --- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  /* NOVA PALETA DE CORES */
  --cor-primaria: #0b243d; /* Azul Escuro */
  --cor-primaria-hover: #071a2f; /* Mais escuro */
  --cor-primaria-subtle: rgba(11, 36, 61, 0.1);
  --cor-secundaria: #57c3fe; /* Azul Claro */
  --cor-sucesso: #57c3fe; /* Verde (substituído pelo azul claro) */
  --cor-aviso: #ffb300; /* Laranja/Amarelo (mantido) */
  --cor-perigo: #d32f2f; /* Vermelho (mantido) */

  /* TEMA CLARO (LIGHT MODE) */
  --cor-fundo: #f0f2f5; /* Cinza muito claro */
  --cor-fundo-card: #ffffff;
  --cor-fundo-hover: #e9ecef;
  --cor-texto-primario: #0b243d; /* Usando a cor primária para texto principal */
  --cor-texto-secundario: #5a6e82; /* Um cinza azulado */
  --cor-borda: #dce4ec;

  /* TEMA ESCURO (DARK MODE) */
  --cor-fundo-escuro: #0b1a28;
  --cor-fundo-card-escuro: #122c44;
  --cor-texto-primario-escuro: #f0f2f5;
  --cor-texto-secundario-escuro: #a0b4c8;
  --cor-borda-escuro: #2a4a68;
  --card-blue-dark-mode: #57c3fe; /* Usando a secundária para links no modo escuro */

  /* ATRIBUTOS GERAIS */
  --raio-borda: 12px;
  --transicao-suave: all 0.25s ease-in-out;
  --font-principal: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --sombra-card: 0 4px 12px rgba(11, 36, 61, 0.08);
  --sombra-card-hover: 0 8px 24px rgba(11, 36, 61, 0.12);
  --sombra-card-escuro: 0 4px 12px rgba(0, 0, 0, 0.2);
  --sombra-card-hover-escuro: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* --- 2. ESTILOS GERAIS E RESET --- */
body {
  background-color: var(--cor-fundo);
  color: var(--cor-texto-primario);
  font-family: var(--font-principal);
  transition: var(--transicao-suave);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.dark-mode {
  background-color: var(--cor-fundo-escuro);
  color: var(--cor-texto-primario-escuro);
}

.main-title {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--cor-texto-primario);
}
body.dark-mode .main-title {
  color: var(--cor-texto-primario-escuro);
}

.text-muted {
  color: var(--cor-texto-secundario) !important;
}
body.dark-mode .text-muted {
  color: var(--cor-texto-secundario-escuro) !important;
}

/* --- 3. COMPONENTES BOOTSTRAP REFINADOS --- */
.card {
  background: var(--cor-fundo-card);
  border-radius: var(--raio-borda);
  border: 1px solid var(--cor-borda);
  box-shadow: var(--sombra-card);
  transition: var(--transicao-suave);
  padding: 1.5rem;
}
.card:hover {
  box-shadow: var(--sombra-card-hover);
  transform: translateY(-2px);
}
body.dark-mode .card {
  background: var(--cor-fundo-card-escuro);
  border-color: var(--cor-borda-escuro);
  box-shadow: var(--sombra-card-escuro);
}
body.dark-mode .card:hover {
  box-shadow: var(--sombra-card-hover-escuro);
}

.btn {
  border-radius: 8px;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  transition: var(--transicao-suave);
}
.btn-primary {
  background-color: var(--cor-primaria);
  border-color: var(--cor-primaria);
}
.btn-primary:hover {
  background-color: var(--cor-primaria-hover);
  border-color: var(--cor-primaria-hover);
  transform: translateY(-2px);
}

.form-control,
.form-select {
  border-radius: 8px;
  border-color: var(--cor-borda);
  background-color: var(--cor-fundo);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 0.25rem var(--cor-primaria-subtle);
}
body.dark-mode .form-control,
body.dark-mode .form-select {
  background-color: var(--cor-fundo-escuro);
  border-color: var(--cor-borda-escuro);
  color: var(--cor-texto-primario-escuro);
}

.dropdown-menu {
  z-index: 1050;
}

.filter-card {
  position: relative;
  z-index: 2;
}

/* --- ESTILO DO NOVO LOGO NA SIDEBAR --- */
/* Logo completo (visível por padrão) */
.sidebar-logo-full {
  width: 160px;
  height: auto;
  margin-left: 1rem;
  object-fit: contain;
  transition: opacity 0.2s ease-in-out, width 0.2s ease-in-out;
  opacity: 1;
  display: block;
}

/* Ícone (escondido por padrão) */
.sidebar-logo-icon {
  height: 40px;
  width: 0;
  object-fit: contain;
  transition: opacity 0.2s ease-in-out, width 0.2s ease-in-out;
  opacity: 0;
  display: none;
}

/* Quando a sidebar está MINIMIZADA (.collapsed) */
.sidebar.collapsed .sidebar-logo-full {
  opacity: 0;
  width: 0;
  display: none; /* Esconde o logo completo */
}

.sidebar.collapsed .sidebar-logo-icon {
  opacity: 1;
  width: 40px;
  display: block;
}

/* 1. Transforma o cabeçalho em um container de posicionamento */
.sidebar.collapsed .sidebar-header {
  position: relative;
  justify-content: center;
}

/* 2. Posiciona o ícone normalmente no centro */
.sidebar.collapsed .sidebar-logo-icon {
  opacity: 1;
  width: 40px;
  height: 40px; /* Garante a altura */
  display: block;
}

/* 3. Posiciona o botão de forma invisível SOBRE o ícone */
.sidebar.collapsed #sidebarToggle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Ocupa toda a largura do cabeçalho */
  height: 100%; /* Ocupa toda a altura do cabeçalho */
  color: transparent; /* Deixa o ícone de lista invisível */
  background-color: transparent; /* Garante que não tem fundo */
  border: none;
  z-index: 10; /* Garante que está na frente do ícone */
}

.dashboard-logo {
  max-width: 380px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* --- 4. SIDEBAR --- */
.page-container {
  display: flex;
}

.sidebar {
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  background-color: var(--cor-fundo-card);
  border-right: 1px solid var(--cor-borda);
  padding: 1rem;
  transition: width 0.3s ease-out;
  z-index: 1100;
  display: flex;
  flex-direction: column;
}
.main-content {
  margin-left: 260px;
  width: calc(100% - 260px);
  transition: margin-left 0.3s ease-out, width 0.3s ease-out;
  padding: 20px;
}
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--cor-borda);
  padding: 0.25rem 0.15rem;
}

#sidebarToggle {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--cor-texto-secundario);
}
.sidebar-nav {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
.nav-item .nav-link[data-collapse-target] {
  padding-right: 30px; /* Espaço para a seta */
}
.nav-item .nav-link:hover {
  background-color: var(--cor-primaria-subtle);
  color: var(--cor-primaria);
}
.nav-item .nav-link.active {
  background-color: var(--cor-primaria);
  color: #fff;
  font-weight: 600;
}
.nav-item .nav-link .nav-icon {
  font-size: 1.3rem;
  min-width: 24px;
  margin-right: 0;
}
.nav-item .nav-link .nav-text {
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* Estado Minimizado */
.sidebar.collapsed {
  width: 120px;
}
.sidebar.collapsed .sidebar-header .logo-text,
.sidebar.collapsed .nav-item .nav-link .nav-text {
  opacity: 0;
  pointer-events: none;
  width: 0;
}
.sidebar.collapsed + .main-content {
  margin-left: 120px;
  width: calc(100% - 120px);
}

/* Dark Mode Sidebar */
body.dark-mode .sidebar {
  background-color: var(--cor-fundo-card-escuro);
  border-right-color: var(--cor-borda-escuro);
}
body.dark-mode .sidebar-header {
  border-bottom-color: var(--cor-borda-escuro);
}
body.dark-mode .nav-item .nav-link {
  color: var(--cor-texto-secundario-escuro);
}
body.dark-mode .nav-item .nav-link:hover {
  background-color: rgba(74, 144, 226, 0.15);
  color: var(--card-blue-dark-mode);
}
body.dark-mode .nav-item .nav-link.active {
  background-color: var(--cor-primaria);
  color: #fff;
}

/* --- 5. COMPONENTES ESPECÍFICOS --- */

/* Card Interativo */
.interactive-card {
  width: 220px;
  height: 321px;
  background: var(--cor-fundo-card);
  border: none;
  box-shadow: var(--sombra-card);
  border-radius: var(--raio-borda);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: var(--transicao-suave);
  text-decoration: none;
}
.interactive-card:hover {
  box-shadow: var(--sombra-card-hover);
  border-color: var(--cor-primaria);
  transform: translateY(-4px);
}
.interactive-card .card-text-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 10;
}
.interactive-card .kpi-value {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--cor-texto-primario);
}
.interactive-card .kpi-label {
  font-size: 0.9rem;
  margin-top: 0.25rem;
  color: var(--cor-texto-secundario);
  font-weight: 500;
}
.interactive-card .circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: var(--cor-primaria-subtle);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}
.interactive-card .circle .icon {
  font-size: 2.5rem;
  color: var(--cor-primaria);
}

/* Dashboard Geral e Componentes de Feed */
.section-title {
  font-weight: 600;
  color: var(--cor-texto-secundario);
  border-bottom: 1px solid var(--cor-borda);
  padding-bottom: 0.5rem;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}
body.dark-mode .section-title {
  color: var(--cor-texto-secundario-escuro);
  border-bottom-color: var(--cor-borda-escuro);
}
.summary-card .card-title {
  font-size: 1.1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
  color: var(--cor-texto-primario);
}
body.dark-mode .summary-card .card-title {
  color: var(--cor-texto-primario-escuro);
}
.summary-card .kpi-main-value {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  word-break: break-all;
}
.summary-card .list-group-item {
  background-color: transparent;
  border: none;
  padding: 0.5rem 0;
}
.feed-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--cor-borda);
}
.feed-item:last-child {
  border-bottom: none;
}
body.dark-mode .feed-item {
  border-bottom-color: var(--cor-borda-escuro);
}
.feed-item .feed-icon {
  font-size: 1.25rem;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 1rem;
}
.feed-item .feed-content {
  flex-grow: 1;
}

/* Auditoria */
.audit-table tr.audited-row td {
  background-color: rgba(74, 144, 226, 0.05) !important;
}
body.dark-mode .audit-table tr.audited-row td {
  background-color: rgba(74, 144, 226, 0.1) !important;
}
.na-reason-container {
  display: none;
  padding-left: 1rem;
  padding-top: 0.5rem;
}

/* --- Ranking (Pódio e Tabela) --- */

#rankingPodiumContainer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.5rem;
  min-height: 320px; /* Altura base para o alinhamento */
}

.podium-place {
  width: 30%;
  max-width: 280px;
}

/* O card que contém TUDO: ranking, foto, nome e score */
.podium-card {
  width: 100%;
  background-color: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  padding: 1.5rem 1rem;
  text-align: center;
  box-shadow: var(--sombra-card);
  transition: var(--transicao-suave);
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.dark-mode .podium-card {
  background-color: var(--cor-fundo-card-escuro);
  border-color: var(--cor-borda-escuro);
}

/* Alturas diferentes para cada posição */
.podium-place.rank-1 .podium-card {
  height: 300px;
}
.podium-place.rank-2 .podium-card {
  height: 260px;
}
.podium-place.rank-3 .podium-card {
  height: 220px;
}

.podium-rank {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 1rem;
}

/* Cores das posições */
.podium-place.rank-1 .podium-rank {
  color: #ffd700;
} /* Ouro */
.podium-place.rank-2 .podium-rank {
  color: #c0c0c0;
} /* Prata */
.podium-place.rank-3 .podium-rank {
  color: #cd7f32;
} /* Bronze */

.podium-image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--cor-fundo);
  margin-bottom: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
body.dark-mode .podium-image {
  border-color: var(--cor-fundo-card-escuro);
}

.podium-name {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.25rem;
  word-break: break-word;
  flex-grow: 1; /* Ajuda a empurrar o score para baixo */
}

.podium-score {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--cor-texto-secundario);
}
body.dark-mode .podium-score {
  color: var(--cor-texto-secundario-escuro);
}

/* --- 6. ANIMAÇÕES E TERCEIROS --- */

/* Animação de Carregamento (Spinner) */
.loading-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* From Uiverse.io by PriyanshuGupta28 - Adaptado */
.spinner {
  position: relative; /* Mudado de absolute para relative */
  width: 9px;
  height: 9px;
}

.spinner div {
  position: absolute;
  width: 50%;
  height: 150%;
  background: #ffffff; /* MUDADO PARA BRANCO para melhor contraste no overlay escuro */
  transform: rotate(calc(var(--rotation) * 1deg))
    translate(0, calc(var(--translation) * 1%));
  animation: spinner-fzua35 1s calc(var(--delay) * 1s) infinite ease;
}

.spinner div:nth-child(1) {
  --delay: 0.1s;
  --rotation: 36;
  --translation: 150;
}
.spinner div:nth-child(2) {
  --delay: 0.2s;
  --rotation: 72;
  --translation: 150;
}
.spinner div:nth-child(3) {
  --delay: 0.3s;
  --rotation: 108;
  --translation: 150;
}
.spinner div:nth-child(4) {
  --delay: 0.4s;
  --rotation: 144;
  --translation: 150;
}
.spinner div:nth-child(5) {
  --delay: 0.5s;
  --rotation: 180;
  --translation: 150;
}
.spinner div:nth-child(6) {
  --delay: 0.6s;
  --rotation: 216;
  --translation: 150;
}
.spinner div:nth-child(7) {
  --delay: 0.7s;
  --rotation: 252;
  --translation: 150;
}
.spinner div:nth-child(8) {
  --delay: 0.8s;
  --rotation: 288;
  --translation: 150;
}
.spinner div:nth-child(9) {
  --delay: 0.9s;
  --rotation: 324;
  --translation: 150;
}
.spinner div:nth-child(10) {
  --delay: 1s;
  --rotation: 360;
  --translation: 150;
}

@keyframes spinner-fzua35 {
  0%,
  10%,
  20%,
  30%,
  50%,
  60%,
  70%,
  80%,
  90%,
  100% {
    transform: rotate(calc(var(--rotation) * 1deg))
      translate(0, calc(var(--translation) * 1%));
  }
  50% {
    transform: rotate(calc(var(--rotation) * 1deg))
      translate(0, calc(var(--translation) * 1.5%));
  }
}

/* Botão de Tema (Sol/Lua) */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  background-color: #2185d6;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  transition: 0.4s;
  border-radius: 30px;
  box-shadow: 0 0 0 rgba(33, 133, 214, 0);
  transition: all 0.4s ease;
}
.slider:hover {
  box-shadow: 0 0 15px rgba(33, 133, 214, 0.5);
}
.slider::before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 50%;
  left: 10%;
  bottom: 15%;
  box-shadow: inset 15px -4px 0px 15px #fdf906;
  background-color: #28096b;
  transition: all 0.4s ease;
  transform-origin: center;
}
.slider:hover::before {
  transform: rotate(45deg);
}
.clouds_stars {
  position: absolute;
  content: "";
  border-radius: 50%;
  height: 10px;
  width: 10px;
  left: 70%;
  bottom: 50%;
  background-color: #fff;
  transition: all 0.3s;
  box-shadow: -12px 0 0 0 white, -6px 0 0 1.6px white, 0.3px 16px 0 white,
    -6.5px 16px 0 white;
  filter: blur(0.55px);
}
.switch input:checked ~ .clouds_stars {
  transform: translateX(-20px);
  height: 2px;
  width: 2px;
  border-radius: 50%;
  left: 80%;
  top: 15%;
  background-color: #fff;
  backdrop-filter: blur(10px);
  transition: all 0.3s;
  box-shadow: -7px 10px 0 #fff, 8px 15px 0 #fff, -17px 1px 0 #fff,
    -20px 10px 0 #fff, -7px 23px 0 #fff, -15px 25px 0 #fff;
  filter: none;
  animation: twinkle 2s infinite;
}
.switch input:checked + .slider {
  background-color: #28096b !important;
}
.switch input:checked + .slider::before {
  transform: translateX(100%);
  box-shadow: inset 8px -4px 0 0 #fff;
}
.switch input:checked + .slider:hover::before {
  transform: translateX(100%) rotate(-45deg);
}
@keyframes twinkle {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Drag-and-Drop (SortableJS) */
.sortable-ghost {
  opacity: 0.4;
  background-color: #c8ebfb;
}

/* FullCalendar (Garagem) */
#calendar {
  min-height: 650px;
  height: 100%;
}
:root {
  --fc-border-color: var(--cor-borda);
  --fc-button-bg-color: var(--bs-primary);
  --fc-button-active-bg-color: #0b5ed7;
  --fc-today-bg-color: rgba(0, 123, 255, 0.1);
}
body.dark-mode {
  --fc-border-color: var(--cor-borda-escuro);
  --fc-button-bg-color: #337ab7;
  --fc-button-active-bg-color: #286090;
  --fc-today-bg-color: rgba(88, 166, 255, 0.15);
}
.fc .fc-toolbar-title {
  font-size: 1.5rem;
  font-weight: 600;
}
.fc .fc-button {
  border: none !important;
  box-shadow: none !important;
}

/* Módulo Tarefas */
.tasks-sidebar {
  width: 280px;
  background-color: var(--cor-fundo-card);
  border-right: 1px solid var(--cor-borda);
  padding: 1rem;
  flex-shrink: 0;
}
.tasks-sidebar .list-group-item {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  font-weight: 500;
  color: var(--cor-texto-secundario);
}
.tasks-sidebar .list-group-item:hover {
  background-color: var(--cor-fundo-hover);
  color: var(--cor-texto-primario);
}
.tasks-sidebar .list-group-item.active {
  background-color: var(--cor-primaria-subtle);
  color: var(--cor-primaria);
  font-weight: 700;
}
.tasks-content {
  flex-grow: 1;
  overflow-y: auto;
}
.task-actions {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.list-group-item:hover .task-actions {
  opacity: 1;
}
.task-actions .btn {
  padding: 0.1rem 0.4rem;
  font-size: 1rem;
}
.due-date-info {
  font-size: 0.8em;
  color: var(--cor-texto-secundario);
}
.task-completed .form-check-label,
.task-completed .due-date-info {
  text-decoration: line-through;
  opacity: 0.6;
}
.task-edit-input {
  border: none;
  background: var(--cor-fundo-hover);
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  width: 100%;
  color: var(--cor-texto-primario);
}
.task-edit-input:focus {
  outline: 2px solid var(--cor-primaria);
}
.subtasks-container {
  padding-left: 2.5rem;
  margin-top: 0.5rem;
  border-left: 2px solid var(--cor-borda);
  margin-left: 10px;
}
.subtask-item {
  display: flex;
  align-items: center;
  padding: 0.25rem 0;
}
.subtask-item .form-check-label {
  color: var(--cor-texto-secundario);
}
.subtask-item.task-completed .form-check-label {
  text-decoration: line-through;
  opacity: 0.7;
}
.category-badge {
  font-size: 0.7em;
  padding: 0.25em 0.5em;
  font-weight: 600;
  margin-left: 8px;
}
body.dark-mode .tasks-sidebar {
  background-color: var(--cor-fundo-card-escuro);
  border-right-color: var(--cor-borda-escuro);
}
body.dark-mode .tasks-sidebar .list-group-item {
  color: var(--cor-texto-secundario-escuro);
}
body.dark-mode .tasks-sidebar .list-group-item:hover {
  background-color: var(--cor-fundo-escuro);
  color: var(--cor-texto-primario-escuro);
}
body.dark-mode .tasks-sidebar .list-group-item.active {
  background-color: var(--cor-primaria-subtle);
  color: var(--card-blue-dark-mode);
}
body.dark-mode .tasks-content {
  background-color: var(--cor-fundo-escuro);
}

/* Chat IA */
.chat-message {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
}
.chat-message p {
  padding: 0.5rem 1rem;
  border-radius: 1.25rem;
  display: inline-block;
  max-width: 85%;
  line-height: 1.4;
}
.chat-message.user {
  align-items: flex-end;
}
.chat-message.user p {
  background-color: var(--cor-primaria);
  color: white;
  border-bottom-right-radius: 0.25rem;
}
.chat-message.assistant {
  align-items: flex-start;
}
.chat-message.assistant p {
  background-color: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-bottom-left-radius: 0.25rem;
}
body.dark-mode .chat-message.assistant p {
  background-color: var(--cor-fundo-card-escuro);
  border: 1px solid var(--cor-borda-escuro);
}

/* Tour (Shepherd.js) */
.shepherd-element {
  background: var(--cor-fundo-card-escuro);
  border-radius: var(--raio-borda);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  max-width: 400px;
}
.shepherd-header {
  background: var(--cor-primaria);
  padding: 1rem 1.5rem;
}
.shepherd-title {
  color: #fff;
  font-weight: 600;
}
.shepherd-cancel-icon {
  color: rgba(255, 255, 255, 0.7);
}
.shepherd-cancel-icon:hover {
  color: #fff;
}
.shepherd-text {
  color: var(--cor-texto-primario-escuro);
  padding: 1.5rem;
  line-height: 1.6;
}
.shepherd-footer {
  padding: 0 1.5rem 1.5rem;
  border-top: none;
  display: flex;
  justify-content: space-between;
}
.shepherd-button {
  background: var(--cor-primaria);
  color: #fff;
  border-radius: 8px;
  padding: 0.5rem 1.2rem;
  font-weight: 500;
  transition: background-color 0.2s ease;
}
.shepherd-button:not(:disabled):hover {
  background: var(--cor-primaria-hover);
}
.shepherd-button.shepherd-button-secondary {
  background: var(--cor-borda-escuro);
  color: var(--cor-texto-primario-escuro);
}
.shepherd-button.shepherd-button-secondary:not(:disabled):hover {
  background: #444;
}

/* --- 7. COMPONENTES DO PAINEL ESTRATÉGICO (BI) --- */

.kpi-card-modern {
  background-color: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: var(--sombra-card);
}

body.dark-mode .kpi-card-modern {
  background-color: var(--cor-fundo-card-escuro);
  border-color: var(--cor-borda-escuro);
  box-shadow: var(--sombra-card-escuro);
}

.kpi-card-modern .kpi-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cor-texto-secundario);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}
body.dark-mode .kpi-card-modern .kpi-title {
  color: var(--cor-texto-secundario-escuro);
}

.kpi-card-modern .kpi-value {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--cor-texto-primario);
  line-height: 1.1;
  margin-bottom: 0.5rem;
}
body.dark-mode .kpi-card-modern .kpi-value {
  color: var(--cor-texto-primario-escuro);
}

.kpi-card-modern .kpi-trend {
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.kpi-card-modern .kpi-trend.positive {
  color: var(--cor-sucesso);
}

.kpi-card-modern .kpi-trend.negative {
  color: var(--cor-perigo);
}

/* Estilo para sparkline (micro-gráfico de linha) */
.kpi-sparkline {
  margin-top: auto; /* Empurra o gráfico para o final do card */
  height: 50px;
}

/* --- 7. SIDEBAR COM SUBMENUS (VERSÃO 2024) --- */

/* Adiciona barra de rolagem quando necessário e garante que não haja rolagem horizontal */
.sidebar-nav {
  overflow-y: auto;
  overflow-x: hidden;
  flex-grow: 1; /* Permite que a navegação cresça e ocupe o espaço */
  padding-bottom: 1rem; /* Espaço no final */
}

/* Estilo geral para todos os links da navegação (principais e sub-itens) */
.sidebar-nav .nav-link {
  display: flex;
  flex-direction: column; /* Ícone e texto em coluna */
  align-items: center; /* Centraliza horizontalmente */
  justify-content: center; /* Centraliza verticalmente */
  text-align: center;
  padding: 0.6rem 0.25rem; /* Padding vertical e horizontal (menor) */
  margin-bottom: 0.25rem; /* Pequeno espaço entre os botões */
  border-radius: 8px; /* Bordas arredondadas */
  color: var(--cor-texto-secundario);
  transition: var(--transicao-suave);
  min-height: 65px; /* Altura mínima para alinhar botões */
  position: relative; /* Necessário para a seta */
  font-weight: 500;
  width: 100%;
}

/* Ícone dentro do link */
.sidebar-nav .nav-link .nav-icon {
  font-size: 1.4rem; /* Tamanho do ícone */
  margin-bottom: 0.25rem; /* Espaço entre ícone e texto */
}

/* Texto dentro do link */
.sidebar-nav .nav-link .nav-text {
  font-size: 0.75rem; /* Tamanho da fonte do texto */
  line-height: 1.2;
  display: block; /* Garante que o span ocupe a linha */
  white-space: normal; /* Permite quebra de linha */
}

/* Efeito hover para os links */
.sidebar-nav .nav-link:hover {
  background-color: var(--cor-primaria-subtle);
  color: var(--cor-primaria);
}

/* Estilo do link ativo */
.sidebar-nav .nav-link.active {
  background-color: var(--cor-primaria);
  color: #fff;
  font-weight: 600;
}

/* Seta para abrir/fechar submenu */
.sidebar-nav .nav-link .bi-chevron-down {
  position: absolute;
  right: 5px; /* Posição à direita */
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
  font-size: 0.8rem;
}

/* Rotação da seta quando o submenu está aberto */
.sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down {
  transform: translateY(-50%) rotate(180deg);
}

/* Container do submenu */
.sidebar-nav .collapse {
  margin-left: 0; /* Remove o recuo padrão */
  background-color: rgba(0, 0, 0, 0.05); /* Fundo levemente diferente */
  border-radius: 8px;
  margin-bottom: 0.25rem;
}
body.dark-mode .sidebar-nav .collapse {
  background-color: rgba(255, 255, 255, 0.03);
}

/* Links dentro do submenu */
.sidebar-nav .collapse .nav-link {
  /* Herda a maioria dos estilos de .sidebar-nav .nav-link */
  padding: 0.5rem 0.25rem; /* Padding similar ao pai */
  min-height: 60px; /* Altura um pouco menor que a do pai */
  font-weight: 400;
}

.sidebar-nav .collapse .nav-link .nav-icon {
  font-size: 1.2rem; /* Ícone um pouco menor */
  margin-bottom: 0.2rem;
}

.sidebar-nav .collapse .nav-link .nav-text {
  font-size: 0.7rem; /* Texto um pouco menor */
  white-space: normal; /* Permite quebra de linha */
}

/* Remove a seta dos links de submenu */
.sidebar-nav .collapse .nav-link .bi-chevron-down {
  display: none;
}

/* --- AJUSTES PARA SIDEBAR MINIMIZADA --- */
.sidebar.collapsed .nav-link {
  flex-direction: row; /* Garante o alinhamento horizontal */
  justify-content: center; /* Centraliza o conteúdo (o ícone) */
  padding: 0.75rem; /* Padding uniforme para um botão quadrado */
  min-height: 55px;
}

.sidebar.collapsed .nav-text,
.sidebar.collapsed .bi-chevron-down {
  display: none !important; /* Esconde o texto e a seta */
}

.sidebar.collapsed .nav-link .nav-icon {
  margin: 0; /* Remove qualquer margem do ícone */
  font-size: 1.5rem; /* Aumenta um pouco o ícone para preencher o espaço */
}

.sidebar.collapsed .collapse {
  display: none !important; /* Garante que submenus fiquem escondidos */
}

/* --- 8. PERFIL DO USUÁRIO NA SIDEBAR --- */

.sidebar-user {
  margin-top: auto; /* Empurra o perfil para o final do espaço flexível */
  padding: 1rem 0.5rem;
  border-top: 1px solid var(--cor-borda);
  display: flex;
  align-items: center;
  gap: 12px;
  /* Garante que o perfil não encolha */
  flex-shrink: 0;
}
body.dark-mode .sidebar-user {
  border-top-color: var(--cor-borda-escuro);
}

.sidebar-user .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.sidebar-user .user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  /* Impede que o texto vaze quando a sidebar encolhe */
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.sidebar-user .user-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cor-texto-primario);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.dark-mode .sidebar-user .user-name {
  color: var(--cor-texto-primario-escuro);
}

.sidebar-user .user-role {
  font-size: 0.75rem;
  color: var(--cor-texto-secundario);
}
body.dark-mode .sidebar-user .user-role {
  color: var(--cor-texto-secundario-escuro);
}

/* Esconde as informações de texto quando a sidebar está minimizada */
.sidebar.collapsed .sidebar-user .user-info {
  opacity: 0;
  width: 0;
  pointer-events: none;
}
.sidebar.collapsed .sidebar-user {
  justify-content: center;
}
.sidebar.collapsed .sidebar-user .avatar {
  margin-right: 0;
}

.login-logo {
  display: block;
  margin: 0 auto;
  max-width: 350px;
  height: auto;
}

/* --- 9. AJUSTES DE RESPONSIVIDADE --- */

/* Para telas de TABLET e menores (abaixo de 992px) */
@media (max-width: 991.98px) {
  /* Transforma o layout interno do card em coluna */
  .summary-card .row {
    flex-direction: column;
    text-align: center; /* Centraliza tudo no modo coluna */
  }

  /* Garante que ambas as seções (KPI e lista) ocupem a largura total */
  .summary-card .row > div {
    width: 100%;
  }

  /* Adiciona um espaço entre o KPI principal e a lista */
  .summary-card .kpi-main-value {
    margin-bottom: 1rem;
  }

  .summary-card h6 {
    margin-top: 1rem; /* Espaço acima do "Piores Desempenhos" */
  }
}

/* Para telas de CELULAR (abaixo de 768px) */
@media (max-width: 767.98px) {
  .main-title {
    font-size: 1.8rem; /* Reduz o título principal da página */
  }

  /* Garante que o texto da lista não fique espremido */
  .summary-card .list-group-item {
    flex-direction: column;
    align-items: center !important; /* Centraliza os itens da lista */
    text-align: center;
  }

  .summary-card .list-group-item strong {
    margin-left: 0 !important;
    margin-top: 0.25rem;
  }
}

/* --- ESTILOS MODERNOS PARA A PÁGINA DE LOGIN --- */

.login-container {
  max-width: 400px;
  width: 100%;
  padding: 2.5rem;
}

.login-logo {
  max-width: 320px;
  margin-bottom: 1rem !important;
}

.login-subtitle {
  color: var(--cor-texto-secundario-escuro);
}

/* Campos de formulário com fundo mais escuro e borda sutil */
.login-container .form-control {
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--cor-borda-escuro);
  color: var(--cor-texto-primario-escuro);
  padding: 0.8rem 1rem;
}

.login-container .form-control:focus {
  background-color: rgba(0, 0, 0, 0.3);
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 0.25rem var(--cor-primaria-subtle);
}

.login-container .form-label {
  color: var(--cor-texto-secundario-escuro);
  font-weight: 500;
}

.login-footer-text {
  color: var(--cor-texto-secundario-escuro);
}

.login-footer-text a {
  color: var(--card-blue-dark-mode); /* Roxo claro */
  text-decoration: none;
  font-weight: 600;
}

.login-footer-text a:hover {
  text-decoration: underline;
}

/* NOVOS ESTILOS PARA TAREFAS */
.due-date-info.due-overdue {
  color: var(--cor-perigo);
  font-weight: 600;
}

.due-date-info.due-today {
  color: var(--cor-aviso);
  font-weight: 600;
}

.task-action-select {
  background-color: transparent;
  font-size: 0.8rem;
  font-weight: 500;
  padding-right: 1.75rem; /* Espaço para a seta do select */
}

.task-action-select:focus {
  box-shadow: none;
}

.task-actions {
  gap: 0.5rem; /* Adiciona um pequeno espaço entre os botões de ação */
}

/* Ajuste para o filtro de profissionais */
#profAnalyticsProfessionalFilterMenu .form-check-label {
  font-size: 0.9rem; /* Reduz levemente a fonte para caber mais texto */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block; /* Garante que o label ocupe o espaço para o ellipsis funcionar */
  cursor: pointer; /* Mantém o cursor de ponteiro */
}

.checklist-item .plano-acao-container,
.checklist-item .foto-evidencia-container {
  margin-top: 1rem;
  padding-left: 1rem;
  border-left: 2px solid var(--cor-borda);
}
body.dark-mode .checklist-item .plano-acao-container,
body.dark-mode .checklist-item .foto-evidencia-container {
  border-left-color: var(--cor-borda-escuro);
}

.checklist-item .form-control.form-control-sm {
  min-height: 38px; /* Altura padrão para inputs menores */
}
.checklist-item textarea.form-control.form-control-sm {
  min-height: 80px; /* Altura para textareas */
}

/* Estilo para imagem de preview */
.checklist-item .foto-evidencia-preview {
  max-width: 100%;
  height: auto;
  max-height: 150px; /* Limita a altura para não poluir o layout */
  object-fit: contain;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  margin-top: 0.5rem;
  padding: 0.25rem;
}
body.dark-mode .checklist-item .foto-evidencia-preview {
  border-color: var(--cor-borda-escuro);
}

.img-thumbnail {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  padding: 0.25rem;
  background-color: var(--cor-fundo-card);
}
body.dark-mode .img-thumbnail {
  border-color: var(--cor-borda-escuro);
  background-color: var(--cor-fundo-card-escuro);
}

/* --- NOVOS ESTILOS PARA INVENTÁRIO CLÍNICA (APP-LIKE) --- */

.inventory-app-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}



/* Card principal do formulário */
.inventory-form-card {
  padding: 1rem; /* Mais compacto para mobile */
}

/* Elementos da Câmera */
#scanner-container {
  position: relative;
  width: 100%;
  max-width: 400px; /* Limita a largura do scanner */
  margin: 0 auto 1rem auto;
  aspect-ratio: 16/9; /* Proporção mais comum para vídeo */
  background-color: #000;
  border-radius: var(--raio-borda);
  overflow: hidden;
  display: none; /* Escondido por padrão */
}
#scanner-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Garante que o vídeo preencha o container */
}
#scanner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* Permite interagir com elementos abaixo */
}
#scanner-frame {
  width: 70%;
  height: 70%;
  border: 2px solid var(--cor-secundaria);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6); /* Efeito de máscara */
}
#scan-result-text {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  z-index: 10;
  display: none;
}

/* Botões do Scanner */
.scanner-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Detalhes do Item Encontrado */
#itemModelDisplay {
  background-color: var(--cor-fundo-hover);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  padding: 0.75rem;
  margin-bottom: 1rem;
  display: none; /* Escondido por padrão */
}
body.dark-mode #itemModelDisplay {
  background-color: var(--cor-fundo-escuro);
  border-color: var(--cor-borda-escuro);
}
#itemModelDisplay img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 0.75rem;
}
#itemModelDisplay strong {
  font-size: 1.1rem;
  color: var(--cor-primaria);
}
body.dark-mode #itemModelDisplay strong {
  color: var(--card-blue-dark-mode);
}

/* Listas de Inventário e Histórico */
.inventory-list-table img {
  border-radius: 4px;
}
.inventory-list-table .text-danger {
  font-weight: 600;
}

/* Ajustes para mobile */
@media (max-width: 767.98px) {
  .main-title {
    font-size: 1.75rem;
  }
  .inventory-app-container {
    padding: 0.5rem;
  }
  .inventory-form-card,
  .card {
    border-radius: 8px;
    padding: 1rem;
  }
  .card-header .card-title {
    font-size: 1.1rem;
  }
  /* Ocultar colunas não essenciais em mobile */
  .table-responsive table th:nth-child(2), /* Cód. Interno */
  .table-responsive table td:nth-child(2) {
    display: none;
  }
}

/* --- PWA & NATIVE-LIKE STYLES --- */

/* Evita o highlight azul/cinza ao tocar em links e botões no mobile */
body {
  -webkit-tap-highlight-color: transparent;
}

/* Garante que o layout ocupe a altura total da tela no modo standalone (instalado) */
@media all and (display-mode: standalone) {
  body,
  .page-container,
  .main-content {
    min-height: 100vh;
  }
}

/* Oculta a sidebar em telas de celular, focando no conteúdo principal como um app */
@media (max-width: 767.98px) {
  .sidebar {
    position: fixed;
    transform: translateX(-100%);
    transition: transform 0.3s ease-out;
    z-index: 1200;
  }
  .sidebar.is-open {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 1rem; /* Padding mais compacto para mobile */
  }

  /* Adiciona um botão "hambúrguer" para abrir a sidebar no mobile, se necessário */
  /* Este botão precisaria ser adicionado ao HTML do main-content */
  .mobile-sidebar-toggle {
    display: block; /* Por padrão escondido, mostrado aqui */
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 1150;
    font-size: 1.5rem;
  }
}

/* Esconde o toggle de sidebar mobile em telas maiores */
@media (min-width: 768px) {
  .mobile-sidebar-toggle {
    display: none;
  }
}

/* Melhora a rolagem em dispositivos de toque */
.sidebar-nav,
.main-content,
.table-responsive {
  -webkit-overflow-scrolling: touch;
}

/* Ajustes finos nos cards para mobile */
.card {
  margin-bottom: 1rem;
}

/* Ajustes no formulário de inventário para ser mais touch-friendly */
.inventory-form-card .form-control,
.inventory-form-card .form-select {
  padding: 0.8rem 1rem; /* Aumenta a área de toque */
  font-size: 1rem;
}

/* Ajusta botões para serem maiores no mobile */
.btn {
  padding: 0.75rem 1.25rem;
}
.btn-sm {
  padding: 0.5rem 1rem;
}

/* --- 10. KANBAN BOARD --- */
.kanban-board {
  display: flex;
  flex-wrap: wrap; /* Permite que as colunas quebrem a linha */
  gap: 1.5rem;
  align-items: start;
}

.kanban-column {
  flex: 1 1 300px; /* flex-grow, flex-shrink, flex-basis */
  max-width: 100%; /* Permite encolher em telas muito pequenas */
  background-color: var(--cor-fundo);
  border-radius: var(--raio-borda);
  display: flex;
  flex-direction: column;
  max-height: 80vh; /* Previne que a coluna fique muito alta */
}

.kanban-column-header {
  padding: 1rem;
  border-bottom: 2px solid var(--cor-borda);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kanban-column-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
}

.task-count-badge {
  background-color: var(--cor-primaria-subtle);
  color: var(--cor-texto-primario);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.25rem 0.6rem;
  border-radius: 20px;
}

.kanban-cards {
  flex-grow: 1;
  padding: 1rem;
  overflow-y: auto;
  min-height: 100px;
}

.kanban-task-card {
  background-color: var(--cor-fundo-card);
  border-radius: 8px;
  border: 1px solid var(--cor-borda);
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--sombra-card);
  cursor: pointer; /* Changed from grab to pointer */
  transition: var(--transicao-suave);
}

.kanban-task-card:hover {
  box-shadow: var(--sombra-card-hover);
  transform: translateY(-2px);
}

.kanban-task-card.is-dragging {
  opacity: 0.5;
  transform: rotate(3deg);
}

.kanban-column.drag-over .kanban-cards {
  background-color: var(--cor-primaria-subtle);
}

.task-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.task-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  font-size: 0.8rem;
}

.task-due-date {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--cor-texto-secundario);
}

.task-due-date.due-overdue {
  color: var(--cor-perigo);
  font-weight: 600;
}

.task-due-date.due-today {
  color: var(--cor-aviso);
  font-weight: 600;
}

.task-priority .bi-flag-fill {
  font-size: 1.1rem;
}

/* Dark Mode for Kanban */
body.dark-mode .kanban-column {
  background-color: var(--cor-fundo-escuro);
}

body.dark-mode .kanban-column-header {
  border-bottom-color: var(--cor-borda-escuro);
}

body.dark-mode .task-count-badge {
  background-color: var(--cor-primaria-subtle);
  color: var(--cor-texto-primario-escuro);
}

body.dark-mode .kanban-cards {
  background-color: transparent;
}

body.dark-mode .kanban-column.drag-over .kanban-cards {
  background-color: rgba(74, 144, 226, 0.1);
}

body.dark-mode .kanban-task-card {
  background-color: var(--cor-fundo-card-escuro);
  border-color: var(--cor-borda-escuro);
  box-shadow: var(--sombra-card-escuro);
}

body.dark-mode .kanban-task-card:hover {
  box-shadow: var(--sombra-card-hover-escuro);
}

body.dark-mode .task-due-date {
  color: var(--cor-texto-secundario-escuro);
}

/* Estilos para cabeçalhos de tabela ordenáveis */
.sortable-header {
  cursor: pointer;
  position: relative;
}

.sortable-header:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

body.dark-mode .sortable-header:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.sortable-header i.bi {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9em;
  color: var(--cor-texto-secundario);
}

body.dark-mode .sortable-header i.bi {
    color: var(--cor-texto-secundario-escuro);
}

.sortable-header i.bi-sort-up,
.sortable-header i.bi-sort-down {
  color: var(--cor-primaria);
}

body.dark-mode .sortable-header i.bi-sort-up,
body.dark-mode .sortable-header i.bi-sort-down {
  color: var(--card-blue-dark-mode);
}