/*
  QuestCore — Tema e Tokens (Bootstrap 5)
  Fase 0: base de variáveis e ajustes mínimos. Expandir conforme telas migrarem.
*/

:root {
  /* Paleta moderna (alinhada ao layout de referência) */
  --color-primary: #2F6FED;
  --color-secondary: #FF8A4C;
  --color-accent: #5AD3A2;
  --color-bg-base: #F7F8FA;
  --color-bg-elevated: #FFFFFF;
  --color-text-primary: #1B1E23;
  --color-text-secondary: #4A5568;
  --color-border: #E2E8F0;
  --color-hover: #EDF2F7;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.12);

  --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-bs-theme="dark"] {
  --color-primary: #4A8BFF;
  --color-secondary: #FFA570;
  --color-accent: #6CDDB4;
  --color-bg-base: #121417;
  --color-bg-elevated: #1B1E23;
  --color-text-primary: #CBD5E0;
  --color-text-secondary: #CBD5E0;
  --color-border: #2D3748;
  --color-hover: #252930;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.5);
}

/* Mapear variáveis do Bootstrap para refletir a paleta no modo dark */
[data-bs-theme="dark"]{
  --bs-body-color: var(--color-text-primary);
}

/* Forçar tons corretos no modo dark para o menu */
[data-bs-theme="dark"] .sidebar .nav-link,
[data-bs-theme="dark"] .sidebar .nav-link i{
  color: var(--color-text-secondary) !important;
}

/* Override Bootstrap primary */
.btn-primary { background-color: var(--color-primary); border-color: var(--color-primary); }
.btn-primary:hover { background-color: #2558C7; border-color: #2558C7; }
.bg-primary { background-color: var(--color-primary) !important; }
.text-primary { color: var(--color-primary) !important; }

/* Base */
html, body{ font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif; }
body { background-color: var(--color-bg-base); color: var(--color-text-primary) !important; transition: background-color .3s ease,color .3s ease; }

/* Cards */
.card { background-color: var(--color-bg-elevated); border-color: var(--color-border); transition: var(--transition-base); }
.qc-card{ box-shadow: var(--shadow-sm); }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.hover-card { transition: all 0.3s ease; }
.hover-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }

/* Tabelas: efeito de hover nas linhas (light/dark) */
.table-hover tbody tr:hover,
.table.align-middle tbody tr:hover,
table.table tbody tr:hover{
  background-color: var(--color-hover) !important;
  transition: background-color .15s ease-in-out;
}

/* Sidebar */
.sidebar { background-color: var(--color-bg-elevated); border-right:1px solid var(--color-border); height:100vh; position:sticky; top:0; overflow-y:auto; width:260px; flex-shrink:0; transition: width .3s ease; }
.sidebar.sidebar-hidden{ display:none !important; }
.sidebar.collapsed{ width:60px !important; }
.sidebar .nav-link{
  /* Ajusta cores do texto/ícones no modo light */
  --bs-nav-link-color: var(--color-text-secondary);
  --bs-nav-link-hover-color: var(--color-text-primary);
  color: var(--color-text-secondary);
  transition: var(--transition-base);
  padding:.75rem 1rem; border-radius:.375rem; margin:.25rem .5rem;
}
.sidebar .nav-link:hover{ background-color: var(--color-hover); color: var(--color-text-primary); }
.sidebar .nav-link.active{ background-color: var(--color-primary); color:#fff; }
.sidebar .nav-link i{ font-size:1.25rem; width:1.5rem; text-align:center; color: var(--color-text-secondary); }
.sidebar-header{ padding:1.0rem .75rem; border-bottom:1px solid var(--color-border); }

/* Layout wrapper e conteúdo principal (alinhado ao layout de referência) */
.layout-wrapper{ display:flex; min-height:100vh; }
.main-content{ flex:1 1 auto; display:flex; flex-direction:column; }

/* Top Navbar (80px, cores consistentes no dark/light) */
.top-navbar{ background-color: var(--color-bg-elevated); border-bottom:1px solid var(--color-border); height:80px; padding:0 1.5rem; display:flex; align-items:center; justify-content:space-between; }
.top-navbar h5{ margin:0; line-height:1.2; }
.top-navbar .subtitle{ margin-top:.125rem; color: var(--color-text-secondary); }

/* Sidebar header altura */
.sidebar .sidebar-header{ height:80px; padding:0 1rem; }

/* Backdrop para sidebar no mobile */
#sidebarBackdrop{ position:fixed; inset:0; background:rgba(0,0,0,.4); display:none; z-index:1040; }
#sidebarBackdrop.show{ display:block; }

/* Mobile: sidebar como off-canvas leve (sem Bootstrap Offcanvas) */
@media (max-width: 767.98px){
  .sidebar{ position:fixed; top:0; bottom:0; left:-280px; width:280px !important; transition:left .3s ease; z-index:1050; box-shadow: var(--shadow-lg); height:auto; }
  .sidebar.show{ left:0; }
  .main-content{ width:100%; }
}

/* Dropdowns em tabelas: garante que apareçam sobre elementos adjacentes (ex: paginação) */
/* Usa position:fixed para escapar do contexto de empilhamento da tabela */
.table .btn-group .dropdown-menu {
  position: fixed !important;
  z-index: 1060 !important;
}

/* Dropup: quando dropdown abre para cima, força z-index correto */
.table .btn-group.dropup .dropdown-menu {
  position: fixed !important;
  z-index: 1060 !important;
}

/* Status (chip) — padrão global (docs/layout/components.html) */
.status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center; /* Centraliza ícone + texto dentro do chip */
  gap: 0.35rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  line-height: 1.2;
  min-width: 120px;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid rgba(148, 163, 253, 0.15);
  background-color: #f3f4ff;
  color: #3730a3;
}

.status-chip i {
  font-size: 0.9rem;
}

/* Variações de cor (usa tokens suaves, baixa saturação) */
.status-chip.is-approved {
  background-color: #ecfdf3;
  border-color: rgba(22, 163, 74, 0.18);
  color: #166534;
}

.status-chip.is-approved i {
  color: #16a34a;
}

.status-chip.is-review {
  background-color: #fffbeb;
  border-color: rgba(217, 119, 6, 0.18);
  color: #92400e;
}

.status-chip.is-review i {
  color: #d97706;
}

.status-chip.is-draft {
  background-color: #eff6ff;
  border-color: rgba(59, 130, 246, 0.18);
  color: #1d4ed8;
}

.status-chip.is-draft i {
  color: #3b82f6;
}

.status-chip.is-rejected {
  background-color: #fef2f2;
  border-color: rgba(220, 38, 38, 0.18);
  color: #991b1b;
}

.status-chip.is-rejected i {
  color: #dc2626;
}

.status-chip.is-neutral {
  background-color: #f3f4f6;
  border-color: rgba(107, 114, 128, 0.18);
  color: #374151;
}

.status-chip.is-neutral i {
  color: #6b7280;
}

/* Dark theme ajustes */
[data-bs-theme="dark"] .status-chip {
  background-color: rgba(148, 163, 253, 0.08);
  border-color: rgba(148, 163, 253, 0.24);
  color: var(--color-text-secondary);
}

[data-bs-theme="dark"] .status-chip.is-approved {
  background-color: rgba(22, 163, 74, 0.12);
  border-color: rgba(22, 163, 74, 0.35);
  color: #bbf7d0;
}

[data-bs-theme="dark"] .status-chip.is-approved i {
  color: #22c55e;
}

[data-bs-theme="dark"] .status-chip.is-review {
  background-color: rgba(217, 119, 6, 0.12);
  border-color: rgba(217, 119, 6, 0.35);
  color: #fed7aa;
}

[data-bs-theme="dark"] .status-chip.is-review i {
  color: #fbbf24;
}

[data-bs-theme="dark"] .status-chip.is-draft {
  background-color: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.35);
  color: #bfdbfe;
}

[data-bs-theme="dark"] .status-chip.is-draft i {
  color: #60a5fa;
}

[data-bs-theme="dark"] .status-chip.is-rejected {
  background-color: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.35);
  color: #fecaca;
}

[data-bs-theme="dark"] .status-chip.is-rejected i {
  color: #f87171;
}