/* =========================================================================
   SERINOX DESIGN TOKENS
   Toda cor do app vem destas variáveis. Para mudar a aparência do sistema,
   ajuste apenas os tokens — os templates referenciam via rgb(var(--token)).
   Convenção: valores RGB sem alpha, para permitir rgb(var(--token) / 0.5).
   ========================================================================= */

:root {
  /* ---- Superfícies ---------------------------------------------------- */
  --background: 255, 255, 255;      /* base da app */
  --surface: 255, 255, 255;         /* cards, painéis */
  --surface-elevated: 250, 250, 250;/* hover, segundo nível */
  --surface-sunken: 245, 245, 245;  /* recuos, áreas internas */
  --sidebar-bg: 250, 250, 250;

  /* ---- Bordas --------------------------------------------------------- */
  --border: 229, 229, 232;          /* divisória padrão */
  --border-strong: 212, 212, 216;   /* destacar separações importantes */
  --sidebar-border: 229, 229, 232;

  /* ---- Texto (hierarquia de contraste) -------------------------------- */
  --text-primary: 9, 9, 11;         /* títulos, dados críticos (zinc-950) */
  --text-secondary: 63, 63, 70;     /* corpo do texto    (zinc-700) */
  --text-muted: 113, 113, 122;      /* labels, datas     (zinc-500) */
  --text-disabled: 161, 161, 170;   /* placeholders      (zinc-400) */
  --text-inverse: 250, 250, 250;    /* sobre botões pretos */

  /* ---- Interativos ---------------------------------------------------- */
  --hover-bg: 244, 244, 245;
  --active-bg: 228, 228, 231;
  --focus-ring: 9, 9, 11;
  --accent: 9, 9, 11;               /* botão primário (preto) */
  --accent-hover: 39, 39, 42;
  --accent-foreground: 250, 250, 250;

  /* ---- Status semânticos ---------------------------------------------- */
  --success: 16, 185, 129;          /* emerald-500 */
  --success-bg: 236, 253, 245;      /* emerald-50  */
  --success-fg: 4, 120, 87;         /* emerald-700 */
  --success-border: 167, 243, 208;  /* emerald-200 */

  --warning: 245, 158, 11;          /* amber-500 */
  --warning-bg: 255, 251, 235;
  --warning-fg: 180, 83, 9;
  --warning-border: 253, 230, 138;

  --danger: 220, 38, 38;            /* red-600 */
  --danger-bg: 254, 242, 242;
  --danger-fg: 153, 27, 27;
  --danger-border: 254, 202, 202;

  --info: 37, 99, 235;              /* blue-600 */
  --info-bg: 239, 246, 255;
  --info-fg: 30, 64, 175;
  --info-border: 191, 219, 254;
}

.dark {
  /* ---- Superfícies (dark com profundidade real) ---------------------- */
  --background: 9, 9, 11;           /* zinc-950 — base bem escura */
  --surface: 24, 24, 27;            /* zinc-900 — cards destacados */
  --surface-elevated: 39, 39, 42;   /* zinc-800 — hover, segundo nível */
  --surface-sunken: 9, 9, 11;       /* recuos = base */
  --sidebar-bg: 9, 9, 11;

  /* ---- Bordas (mais visíveis para definir blocos) -------------------- */
  --border: 39, 39, 42;             /* zinc-800 */
  --border-strong: 63, 63, 70;      /* zinc-700 */
  --sidebar-border: 39, 39, 42;

  /* ---- Texto (alto contraste em todos os níveis) --------------------- */
  --text-primary: 250, 250, 250;    /* zinc-50  — branco quase puro */
  --text-secondary: 212, 212, 216;  /* zinc-300 — corpo legível */
  --text-muted: 161, 161, 170;      /* zinc-400 — labels */
  --text-disabled: 113, 113, 122;   /* zinc-500 — desabilitado */
  --text-inverse: 9, 9, 11;

  /* ---- Interativos ---------------------------------------------------- */
  --hover-bg: 39, 39, 42;
  --active-bg: 63, 63, 70;
  --focus-ring: 250, 250, 250;
  --accent: 250, 250, 250;
  --accent-hover: 228, 228, 231;
  --accent-foreground: 9, 9, 11;

  /* ---- Status (cores ajustadas para fundos escuros) ------------------ */
  --success: 52, 211, 153;          /* emerald-400 */
  --success-bg: 6, 78, 59;          /* emerald-900 */
  --success-fg: 110, 231, 183;      /* emerald-300 */
  --success-border: 6, 95, 70;      /* emerald-800 */

  --warning: 251, 191, 36;          /* amber-400 */
  --warning-bg: 120, 53, 15;        /* amber-900 */
  --warning-fg: 252, 211, 77;       /* amber-300 */
  --warning-border: 146, 64, 14;    /* amber-800 */

  --danger: 248, 113, 113;          /* red-400 */
  --danger-bg: 127, 29, 29;         /* red-900 */
  --danger-fg: 252, 165, 165;       /* red-300 */
  --danger-border: 153, 27, 27;     /* red-800 */

  --info: 96, 165, 250;             /* blue-400 */
  --info-bg: 30, 58, 138;           /* blue-900 */
  --info-fg: 147, 197, 253;         /* blue-300 */
  --info-border: 30, 64, 175;       /* blue-800 */
}

body {
  background-color: rgb(var(--background));
  color: rgb(var(--text-primary));
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* =========================================================================
   SCROLLBAR
   ========================================================================= */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgb(var(--border-strong));
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--text-muted));
}

/* Utility: esconde scrollbar mas mantém scroll funcional (usado em tabs/carrosséis) */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* =========================================================================
   FORM INPUTS — classe utility para padronizar inputs de formulário
   Aplique .form-input em <input>, <select>, <textarea> para visual consistente.
   ========================================================================= */
.form-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  border: 1px solid rgb(var(--border));
  background: transparent;
  color: rgb(var(--text-primary));
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-input::placeholder {
  color: rgb(var(--text-disabled));
}
.form-input:focus {
  border-color: rgb(var(--focus-ring));
  box-shadow: 0 0 0 3px rgb(var(--focus-ring) / 0.15);
}
.form-input:disabled {
  background: rgb(var(--surface-elevated));
  color: rgb(var(--text-disabled));
  cursor: not-allowed;
}

/* =========================================================================
   SIDEBAR — links de navegação
   .nav-link            → container do link (padding, hover)
   .nav-link.active     → estado ativo (fundo, texto, borda lateral)
   .nav-indicator       → barra vertical lateral colorida (visível só em ativo)
   .nav-icon            → ícone (cor muda no ativo / hover)
   ========================================================================= */
.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem 0.5rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(var(--text-secondary));
  background: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-link:hover {
  background-color: rgb(var(--hover-bg));
  color: rgb(var(--text-primary));
}
.nav-link.active {
  background-color: rgb(var(--hover-bg));
  color: rgb(var(--text-primary));
  font-weight: 700;
}

.nav-indicator {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  border-radius: 0 3px 3px 0;
  background: rgb(var(--accent));
  transition: height 0.2s ease;
}
.nav-link.active .nav-indicator {
  height: 60%;
}

.nav-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: rgb(var(--text-muted));
  transition: color 0.15s ease;
}
.nav-link:hover .nav-icon,
.nav-link.active .nav-icon {
  color: rgb(var(--text-primary));
}

/* =========================================================================
   SIDEBAR (estados colapsado e drawer mobile)
   - Desktop: pode ser colapsada (w-16) ou expandida (w-64).
   - Mobile (<768px): vira drawer overlay, escondido por padrão e abre via toggle.
   - Os dois estados são INDEPENDENTES.
   ========================================================================= */

/* --- DESKTOP collapse state (só aplica em ≥768px) --- */
@media (min-width: 768px) {
  html.sidebar-collapsed #sidebar {
    width: 4rem !important;
  }
  html.sidebar-collapsed #sidebar .sidebar-text {
    display: none !important;
  }
}

/* --- MOBILE drawer (<768px) --- */
@media (max-width: 767px) {
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    width: 16rem !important;
    transform: translateX(-100%);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  }
  #sidebar.sidebar-open {
    transform: translateX(0);
  }
  /* Garante que o texto sempre aparece no drawer mobile, mesmo se o usuário tinha collapse ativo no desktop */
  #sidebar .sidebar-text {
    display: flex !important;
  }
  /* Backdrop sob o drawer */
  body.sidebar-open-backdrop::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 55;
    backdrop-filter: blur(2px);
  }
}

/* =========================================================================
   PAGINATION BAR (fixa no rodapé do viewport, ciente do sidebar)
   Sticky não funcionou confiavelmente aninhado dentro de wrappers do
   componente table; fixed elimina qualquer dependência da cadeia de overflow.
   ========================================================================= */
.pagination-bar {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 40;
}

@media (min-width: 768px) {
  .pagination-bar {
    left: calc(16rem + 1.5rem); /* sidebar expandida (w-64) + gap */
    right: 1.5rem;
  }
  html.sidebar-collapsed .pagination-bar {
    left: calc(4rem + 1.5rem); /* sidebar colapsada (w-16) + gap */
  }
}

/* Reserva espaço no fim da lista para o último card não ficar oculto
   sob a barra fixa. Aplicado ao main via padding-bottom. */
main.has-pagination-bar {
  padding-bottom: 5rem;
}

/* =========================================================================
   TOAST NOTIFICATION SYSTEM
   ========================================================================= */
#toast-container {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
  max-width: calc(100vw - 2.5rem);
  width: 24rem;
}

.toast-item {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  color: rgb(var(--text-primary));
  font-size: 0.875rem;
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.toast-item.show {
  transform: translateX(0);
  opacity: 1;
}

.toast-item.hide {
  transform: translateX(120%);
  opacity: 0;
}

.toast-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
}

.toast-success { border-left: 4px solid rgb(var(--success)); }
.toast-success .toast-icon { color: rgb(var(--success)); }

.toast-error { border-left: 4px solid rgb(var(--danger)); }
.toast-error .toast-icon { color: rgb(var(--danger)); }

.toast-warning { border-left: 4px solid rgb(var(--warning)); }
.toast-warning .toast-icon { color: rgb(var(--warning)); }

.toast-info { border-left: 4px solid rgb(var(--info)); }
.toast-info .toast-icon { color: rgb(var(--info)); }

/* =========================================================================
   HTMX LOADING & PREVENÇÃO DE DUPLO CLIQUE
   ========================================================================= */
.htmx-request.btn-submit,
button.htmx-request,
.htmx-request button[type="submit"] {
  opacity: 0.65;
  pointer-events: none;
  cursor: wait;
}

.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-flex;
}

/* =========================================================================
   STATUS BADGES & UI TOKENS UTILITIES
   ========================================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.025em;
  white-space: nowrap;
}

.badge-pendente {
  background: rgba(var(--warning), 0.12);
  color: rgb(var(--warning));
  border: 1px solid rgba(var(--warning), 0.25);
}

.badge-enviado {
  background: rgba(var(--info), 0.12);
  color: rgb(var(--info));
  border: 1px solid rgba(var(--info), 0.25);
}

.badge-vendido,
.badge-finalizado,
.badge-entregue {
  background: rgba(var(--success), 0.12);
  color: rgb(var(--success));
  border: 1px solid rgba(var(--success), 0.25);
}

.badge-desistiu,
.badge-cancelado {
  background: rgba(var(--danger), 0.12);
  color: rgb(var(--danger));
  border: 1px solid rgba(var(--danger), 0.25);
}

.badge-producao {
  background: rgba(99, 102, 241, 0.12);
  color: rgb(129, 140, 248);
  border: 1px solid rgba(99, 102, 241, 0.25);
}

.badge-neutral {
  background: rgba(var(--text-muted), 0.12);
  color: rgb(var(--text-muted));
  border: 1px solid rgba(var(--border), 0.5);
}

/* Card Panel & Surfaces */
.card-panel {
  background-color: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: 1rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Ergonomia Mobile: alvos de toque confortáveis */
.btn-icon-touch {
  min-height: 38px;
  min-width: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}