/* Qimora — estilos próprios, complementares ao Bootstrap 5.3.
   Usamos as variáveis de cor nativas do Bootstrap (data-bs-theme) para que
   o modo escuro funcione sem duplicar paleta, com a identidade visual da
   marca (teal/navy, Poppins) sobreposta nos componentes que a usam. */

:root {
  --erp-sidebar-width: 250px;
  --erp-topbar-height: 60px;

  /* Paleta oficial Qimora */
  --qimora-teal: #00b9b0;
  --qimora-teal-dark: #009991;
  --qimora-teal-light: #7ed9e6;
  --qimora-teal-pale: #d9f3f6;
  --qimora-navy: #0d1b2a;
  --qimora-gray: #74828f;
  /* Rosa só para "Urgente" — deliberadamente diferente do vermelho usado em
     "Atrasada"/"Rejeitada", para não misturar os dois conceitos visualmente
     (atraso é um problema de prazo; urgência é uma sinalização manual de
     prioridade). Fundo rosa claro com texto/borda num rosa mais forte, no
     mesmo espírito dos badges claros do Bootstrap (ex.: text-bg-warning). */
  --qimora-urgent-light: #f8bbd0;
  --qimora-urgent-light-hover: #f4a6c6;
  --qimora-urgent: #d6336c;
  --qimora-urgent-dark: #ad1457;

  --erp-brand-color: var(--qimora-teal);
}

/* Badge e botão de urgência — ver comentário da variável --qimora-urgent
   acima sobre por que não reaproveitamos text-bg-danger/btn-outline-danger. */
.badge-urgent {
  background-color: var(--qimora-urgent-light);
  color: var(--qimora-urgent-dark);
}

.btn-outline-urgent {
  --bs-btn-color: var(--qimora-urgent);
  --bs-btn-border-color: var(--qimora-urgent);
  --bs-btn-hover-color: var(--qimora-urgent-dark);
  --bs-btn-hover-bg: var(--qimora-urgent-light);
  --bs-btn-hover-border-color: var(--qimora-urgent);
  --bs-btn-active-color: var(--qimora-urgent-dark);
  --bs-btn-active-bg: var(--qimora-urgent-light);
  --bs-btn-active-border-color: var(--qimora-urgent);
}

/* Estado "ligado" do botão de urgência (já marcada — clicar remove). */
.btn-urgent {
  --bs-btn-color: var(--qimora-urgent-dark);
  --bs-btn-bg: var(--qimora-urgent-light);
  --bs-btn-border-color: var(--qimora-urgent-light);
  --bs-btn-hover-color: var(--qimora-urgent-dark);
  --bs-btn-hover-bg: var(--qimora-urgent-light-hover);
  --bs-btn-hover-border-color: var(--qimora-urgent-light-hover);
  --bs-btn-active-bg: var(--qimora-urgent-light-hover);
  --bs-btn-active-border-color: var(--qimora-urgent-light-hover);
}

body {
  min-height: 100vh;
  background-color: var(--bs-tertiary-bg);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
}

/* ---------- Identidade visual: substitui o azul padrão do Bootstrap ---------- */

a {
  color: var(--qimora-teal-dark);
}
a:hover {
  color: var(--qimora-teal);
}

.btn-primary {
  --bs-btn-bg: var(--qimora-teal);
  --bs-btn-border-color: var(--qimora-teal);
  --bs-btn-hover-bg: var(--qimora-teal-dark);
  --bs-btn-hover-border-color: var(--qimora-teal-dark);
  --bs-btn-active-bg: var(--qimora-teal-dark);
  --bs-btn-active-border-color: var(--qimora-teal-dark);
  --bs-btn-disabled-bg: var(--qimora-teal);
  --bs-btn-disabled-border-color: var(--qimora-teal);
  --bs-btn-focus-shadow-rgb: 0, 185, 176;
}

.btn-outline-primary {
  --bs-btn-color: var(--qimora-teal-dark);
  --bs-btn-border-color: var(--qimora-teal);
  --bs-btn-hover-bg: var(--qimora-teal);
  --bs-btn-hover-border-color: var(--qimora-teal);
  --bs-btn-active-bg: var(--qimora-teal-dark);
  --bs-btn-active-border-color: var(--qimora-teal-dark);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--qimora-teal-light);
  box-shadow: 0 0 0 0.25rem rgba(0, 185, 176, 0.25);
}

.form-check-input:checked {
  background-color: var(--qimora-teal);
  border-color: var(--qimora-teal);
}
.form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(0, 185, 176, 0.25);
}

.page-link {
  color: var(--qimora-teal-dark);
}
.pagination .page-item.active .page-link {
  background-color: var(--qimora-teal);
  border-color: var(--qimora-teal);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--qimora-teal);
}

/* ---------- Layout autenticado (sidebar + topbar) ---------- */

.erp-wrapper {
  display: flex;
  min-height: 100vh;
}

.erp-sidebar {
  width: var(--erp-sidebar-width);
  flex-shrink: 0;
  background-color: var(--bs-body-bg);
  border-right: 1px solid var(--bs-border-color);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  transition: transform 0.2s ease-in-out;
  z-index: 1040;
}

.erp-sidebar .erp-brand {
  height: var(--erp-topbar-height);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1rem;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--qimora-teal);
  border-bottom: 1px solid var(--bs-border-color);
}

.erp-sidebar .erp-brand img {
  height: 28px;
  width: auto;
}

.erp-sidebar .nav-link {
  color: var(--bs-body-color);
  border-radius: 0.375rem;
  margin: 0.1rem 0.5rem;
  padding: 0.55rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.erp-sidebar .nav-link .erp-nav-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Ícone precisa virar branco sobre o fundo teal do item ativo, senão fica
   "teal sobre teal" e some visualmente. */
.erp-sidebar .nav-link.active .erp-nav-icon {
  filter: brightness(0) invert(1);
}

.erp-sidebar .nav-link.active {
  background-color: var(--erp-brand-color);
  color: #fff;
}

.erp-sidebar .nav-link:not(.active):hover {
  background-color: var(--bs-tertiary-bg);
}

.erp-sidebar .nav-link.disabled {
  color: var(--bs-secondary-color);
  pointer-events: none;
}

.erp-sidebar .nav-section-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bs-secondary-color);
  padding: 0.75rem 1rem 0.25rem;
}

.erp-content {
  margin-left: var(--erp-sidebar-width);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.erp-topbar {
  height: var(--erp-topbar-height);
  background-color: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  position: sticky;
  top: 0;
  z-index: 1030;
}

.erp-main {
  padding: 1.5rem;
  flex: 1;
}

.erp-sidebar-toggle {
  display: none;
}

@media (max-width: 991.98px) {
  .erp-sidebar {
    transform: translateX(-100%);
  }

  .erp-sidebar.show {
    transform: translateX(0);
  }

  .erp-content {
    margin-left: 0;
  }

  .erp-sidebar-toggle {
    display: inline-flex;
  }
}

/* ---------- Layout público (login / recuperação de senha) ---------- */

.erp-public-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: linear-gradient(160deg, var(--qimora-teal-pale) 0%, var(--bs-body-bg) 55%);
}

:root[data-bs-theme="dark"] .erp-public-wrapper {
  background: linear-gradient(160deg, rgba(0, 185, 176, 0.12) 0%, var(--bs-body-bg) 55%);
}

.erp-public-card {
  width: 100%;
  max-width: 420px;
}

.erp-public-logo {
  max-width: 260px;
  width: 100%;
  height: auto;
}

.erp-logo-dark {
  display: none;
}

:root[data-bs-theme="dark"] .erp-logo-light {
  display: none;
}
:root[data-bs-theme="dark"] .erp-logo-dark {
  display: inline-block;
}

/* ---------- Utilitários ---------- */

.erp-stat-card .erp-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--qimora-navy);
}

:root[data-bs-theme="dark"] .erp-stat-card .erp-stat-value {
  color: #fff;
}

.erp-theme-toggle {
  border: none;
  background: transparent;
  color: var(--bs-body-color);
}

/* Botões de ação em linhas de tabela (ex.: Atender/Cancelar) — mesma
   largura e altura entre si, para não ficarem desalinhados por causa do
   texto. align-items: center evita que o "stretch" padrão do flexbox
   esprema um botão sem preencher a altura do form que o envolve; os forms
   viram flex containers para que o botão dentro deles se comporte igual
   a um <a> solto no mesmo grupo. white-space: nowrap impede que um botão
   com emoji + texto (ex.: "🚨 Urgente") quebre em duas linhas e puxe a
   altura de todos os outros junto. */
.erp-row-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
}

.erp-row-actions form {
  display: flex;
}

.erp-row-actions .btn {
  min-width: 5.5rem;
  white-space: nowrap;
}

/* Dropdown temporariamente movido para o <body> (ver app.js) para escapar
   do overflow do .table-responsive — precisa de z-index alto o bastante
   para ficar acima de tudo mais na página. */
.erp-dropdown-fixed {
  z-index: 1080;
}