/* ===============================
   FRONT GLOBAL — Light / Dark
   =============================== */

/* Light mode (default) */
input,
select,
textarea {
  color: #1e293b;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #64748b;
}

input[type="number"] {
  color: #1e293b;
}

/* Dark mode */
.dark input,
.dark select,
.dark textarea {
  color: #f8fafc;
  background-color: rgba(2, 6, 23, 0.6);
  border: 1px solid #1e293b;
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
  outline: none;
  border-color: #64748b;
}

.dark input[type="number"] {
  color: #f8fafc;
}

/* ===============================
   DATE INPUT
   =============================== */

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  pointer-events: auto;
}

.dark input[type="date"] {
  color-scheme: dark;
}

.dark input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.95;
  cursor: pointer;
  pointer-events: auto;
}

.dark input[type="date"]::-webkit-datetime-edit {
  color: #f8fafc;
}
.dark input[type="date"]::-webkit-datetime-edit-text {
  color: #94a3b8;
}
.dark input[type="date"]::-webkit-datetime-edit-month-field,
.dark input[type="date"]::-webkit-datetime-edit-day-field,
.dark input[type="date"]::-webkit-datetime-edit-year-field {
  color: #f8fafc;
}

/* ===============================
   LIGHT MODE OVERRIDES
   Fundo claro, cards brancos, texto escuro
   =============================== */

/* --- Body & Main Background --- */
html:not(.dark) body {
  background-color: #f1f5f9 !important;
  color: #1e293b !important;
}

/* --- Sidebar & Topbar --- */
html:not(.dark) aside {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}
html:not(.dark) header {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

/* --- Cards / Sections --- */
html:not(.dark) .bg-slate-900\/60,
html:not(.dark) .bg-slate-900\/40 {
  background-color: #ffffff !important;
}
html:not(.dark) .bg-slate-900 {
  background-color: #ffffff !important;
}

/* Active card state (bg-slate-800/60) — sólido escuro com texto branco */
html:not(.dark) .bg-slate-800\/60 {
  background-color: #334155 !important;
  color: #ffffff !important;
}
html:not(.dark) .bg-slate-800\/60 .text-slate-400 {
  color: #cbd5e1 !important;
}

/* Table header & subtle bgs */
html:not(.dark) .bg-slate-950\/30 {
  background-color: #f8fafc !important;
}
html:not(.dark) .bg-slate-950\/40 {
  background-color: #f1f5f9 !important;
}
html:not(.dark) .bg-slate-950\/60 {
  background-color: #f8fafc !important;
}
html:not(.dark) .bg-slate-950\/90 {
  background-color: #f1f5f9 !important;
}

/* Buttons */
html:not(.dark) .bg-slate-800 {
  background-color: #334155 !important;
}

/* --- Borders --- */
html:not(.dark) .border-slate-800 {
  border-color: #e2e8f0 !important;
}
html:not(.dark) .border-slate-700 {
  border-color: #cbd5e1 !important;
}
html:not(.dark) .divide-slate-800 > :not([hidden]) ~ :not([hidden]) {
  border-color: #e2e8f0 !important;
}

/* Ring */
html:not(.dark) .ring-slate-800 {
  --tw-ring-color: #cbd5e1 !important;
}
html:not(.dark) .ring-slate-700 {
  --tw-ring-color: #e2e8f0 !important;
}

/* --- Text colors (escuro sobre fundo claro) --- */
html:not(.dark) .text-slate-100 {
  color: #1e293b !important;
}
html:not(.dark) .text-slate-200 {
  color: #334155 !important;
}
html:not(.dark) .text-slate-300 {
  color: #475569 !important;
}
html:not(.dark) .text-slate-400 {
  color: #64748b !important;
}
html:not(.dark) .text-slate-500 {
  color: #94a3b8 !important;
}
html:not(.dark) .text-white {
  color: #0f172a !important;
}

/* Sidebar nav text */
html:not(.dark) nav a.text-slate-200 {
  color: #334155 !important;
}
html:not(.dark) nav a.text-white {
  color: #0f172a !important;
}

/* --- Hover states --- */
html:not(.dark) .hover\:bg-slate-700:hover {
  background-color: #475569 !important;
}
html:not(.dark) .hover\:bg-slate-800:hover {
  background-color: #e2e8f0 !important;
}
html:not(.dark) .hover\:bg-slate-900\/60:hover {
  background-color: #f1f5f9 !important;
}
html:not(.dark) .hover\:bg-slate-950\/30:hover {
  background-color: #f1f5f9 !important;
}
html:not(.dark) .hover\:text-white:hover {
  color: #0f172a !important;
}
html:not(.dark) .hover\:border-slate-600:hover {
  border-color: #94a3b8 !important;
}

/* Sidebar active & hover */
html:not(.dark) nav a.bg-slate-800 {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}
html:not(.dark) nav a:hover {
  background-color: #f1f5f9 !important;
}

/* --- Accent buttons (mantém cores) --- */
html:not(.dark) .bg-emerald-700\/80 {
  background-color: rgba(4, 120, 87, 0.9) !important;
  color: #ffffff !important;
}
html:not(.dark) .hover\:bg-emerald-700:hover {
  background-color: #047857 !important;
  color: #ffffff !important;
}

/* --- Accent text colors (mais fortes no claro) --- */
html:not(.dark) .text-emerald-300 {
  color: #059669 !important;
}
html:not(.dark) .text-emerald-500 {
  color: #047857 !important;
}
html:not(.dark) .text-red-300 {
  color: #dc2626 !important;
}
html:not(.dark) .text-red-500 {
  color: #b91c1c !important;
}
html:not(.dark) .text-amber-300 {
  color: #d97706 !important;
}
html:not(.dark) .text-blue-200 {
  color: #2563eb !important;
}

/* --- Message banners --- */
html:not(.dark) .border-emerald-900 {
  border-color: #a7f3d0 !important;
}
html:not(.dark) .bg-emerald-950\/30 {
  background-color: #ecfdf5 !important;
}
html:not(.dark) .text-emerald-100 {
  color: #065f46 !important;
}
html:not(.dark) .border-red-900 {
  border-color: #fecaca !important;
}
html:not(.dark) .bg-red-950\/30 {
  background-color: #fef2f2 !important;
}
html:not(.dark) .text-red-200,
html:not(.dark) .text-red-100 {
  color: #991b1b !important;
}
html:not(.dark) .border-amber-900 {
  border-color: #fde68a !important;
}
html:not(.dark) .bg-amber-950\/30 {
  background-color: #fffbeb !important;
}
html:not(.dark) .text-amber-100 {
  color: #92400e !important;
}

/* --- Badge backgrounds --- */
html:not(.dark) .bg-emerald-950\/40 {
  background-color: #ecfdf5 !important;
}
html:not(.dark) .bg-red-950\/40 {
  background-color: #fef2f2 !important;
}
html:not(.dark) .bg-amber-950\/40 {
  background-color: #fffbeb !important;
}
html:not(.dark) .bg-blue-950\/40 {
  background-color: #eff6ff !important;
}
html:not(.dark) .border-emerald-900 {
  border-color: #a7f3d0 !important;
}
html:not(.dark) .border-red-900 {
  border-color: #fecaca !important;
}
html:not(.dark) .border-amber-900 {
  border-color: #fde68a !important;
}
html:not(.dark) .border-blue-900 {
  border-color: #bfdbfe !important;
}
html:not(.dark) .text-emerald-200 {
  color: #059669 !important;
}
html:not(.dark) .text-red-200 {
  color: #dc2626 !important;
}
html:not(.dark) .text-amber-200 {
  color: #d97706 !important;
}
html:not(.dark) .text-blue-200 {
  color: #2563eb !important;
}

/* --- Cards shadow --- */
html:not(.dark) section.rounded-2xl {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* --- Table hover --- */
html:not(.dark) tr.hover\:bg-slate-950\/30:hover {
  background-color: #f8fafc !important;
}

/* --- Buttons text --- */
/* bg-slate-800 already covered; also fix bg-slate-700 (active tabs, etc.) */
html:not(.dark) button.bg-slate-800,
html:not(.dark) a.bg-slate-800,
html:not(.dark) button.bg-slate-700,
html:not(.dark) a.bg-slate-700 {
  color: #ffffff !important;
}

/* Filhos de elementos com fundo escuro (bg-slate-700 / bg-slate-800)
   ficam com texto branco — evita que as regras globais de texto-escuro
   sobrescrevam o contraste dentro de cards/botões ativos em light mode */
html:not(.dark) a.bg-slate-700 *,
html:not(.dark) button.bg-slate-700 *,
html:not(.dark) a.bg-slate-800 *,
html:not(.dark) button.bg-slate-800 * {
  color: #ffffff !important;
}
/* Sub-label levemente acinzentado para hierarquia visual */
html:not(.dark) a.bg-slate-700 .text-slate-300,
html:not(.dark) a.bg-slate-700 .text-slate-400,
html:not(.dark) button.bg-slate-700 .text-slate-300,
html:not(.dark) button.bg-slate-700 .text-slate-400 {
  color: #cbd5e1 !important;
}

/* Accent buttons: sky / blue / emerald / red keep white text in light mode */
html:not(.dark) .bg-sky-600,
html:not(.dark) .bg-sky-700,
html:not(.dark) .hover\:bg-sky-500:hover,
html:not(.dark) .hover\:bg-sky-600:hover {
  background-color: #0284c7 !important;
  color: #ffffff !important;
}
html:not(.dark) .bg-blue-800,
html:not(.dark) .hover\:bg-blue-700:hover {
  background-color: #1e40af !important;
  color: #ffffff !important;
}
html:not(.dark) .bg-emerald-700,
html:not(.dark) .hover\:bg-emerald-600:hover {
  background-color: #047857 !important;
  color: #ffffff !important;
}
html:not(.dark) .bg-red-700,
html:not(.dark) .hover\:bg-red-600:hover {
  background-color: #b91c1c !important;
  color: #ffffff !important;
}

/* Active tab / pill: hover state on dark buttons stays white */
html:not(.dark) .hover\:bg-slate-600:hover,
html:not(.dark) .hover\:bg-slate-700:hover {
  color: #ffffff !important;
}

/* Status badge backgrounds (dark → light palette in light mode) */
html:not(.dark) .bg-sky-900\/70 {
  background-color: #e0f2fe !important;
  color: #0369a1 !important;
}
html:not(.dark) .bg-blue-900\/70 {
  background-color: #eff6ff !important;
  color: #1d4ed8 !important;
}
html:not(.dark) .bg-amber-900\/70 {
  background-color: #fffbeb !important;
  color: #b45309 !important;
}
html:not(.dark) .bg-emerald-900\/70 {
  background-color: #ecfdf5 !important;
  color: #065f46 !important;
}
html:not(.dark) .bg-red-900\/70 {
  background-color: #fef2f2 !important;
  color: #991b1b !important;
}

/* Rascunho badge (bg-slate-700 used as a badge, not a full button) */
html:not(.dark) span.bg-slate-700 {
  background-color: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1;
}

/* sky / blue / amber / emerald / red text colors (badges & text) */
html:not(.dark) .text-sky-200,
html:not(.dark) .text-sky-300,
html:not(.dark) .text-sky-400 {
  color: #0369a1 !important;
}
html:not(.dark) .text-blue-200,
html:not(.dark) .text-blue-300 {
  color: #1d4ed8 !important;
}
html:not(.dark) .text-red-300 {
  color: #dc2626 !important;
}

/* Font-mono numbers in tables / detail pages */
html:not(.dark) .font-mono {
  color: inherit;
}

/* --- Focus border --- */
html:not(.dark) .focus\:border-slate-600:focus {
  border-color: #94a3b8 !important;
}

/* --- Inputs (claro) --- */
html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
  color: #1e293b !important;
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
}
html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus {
  border-color: #64748b !important;
}
html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: #94a3b8 !important;
}
html:not(.dark) input[type="date"] {
  color-scheme: light;
}
html:not(.dark) input[type="date"]::-webkit-calendar-picker-indicator {
  filter: none;
  opacity: 0.7;
}

/* --- Mobile overlay --- */
html:not(.dark) #mobile-overlay {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* --- Kanban cards --- */
html:not(.dark) .kanban-card {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}
html:not(.dark) .kanban-card:hover {
  border-color: #cbd5e1 !important;
}

/* --- Dashboard chart bar overrides --- */
html:not(.dark) .bg-emerald-400\/70 {
  background-color: rgba(52, 211, 153, 0.8) !important;
}
html:not(.dark) .bg-amber-400\/70 {
  background-color: rgba(251, 191, 36, 0.8) !important;
}

/* ===============================
   MOBILE RESPONSIVENESS
   =============================== */

/* Smooth horizontal scroll on tables */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

/* Tables: minimum column width + font size on mobile */
@media (max-width: 640px) {
  table th,
  table td {
    padding: 0.5rem 0.625rem !important;
    font-size: 0.75rem !important;
    white-space: nowrap;
  }

  /* Reduce main content padding on small screens */
  main.px-4 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Make action links/buttons easier to tap */
  table a,
  table button {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }

  /* Fix hardcoded min-widths */
  .min-w-\[320px\] {
    min-width: 0 !important;
  }

  /* Remove hardcoded column widths on mobile */
  th.w-24, td.w-24,
  th.w-28, td.w-28,
  th.w-32, td.w-32,
  th.w-20, td.w-20,
  .w-24, .w-28, .w-32, .w-20 {
    width: auto !important;
  }

  /* Truncate long text in table cells */
  table td .max-w-\[200px\] {
    max-width: 120px !important;
  }

  /* Cards summary: 2 columns on small screens */
  .grid.grid-cols-1.md\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Section padding on mobile */
  section.p-5 {
    padding: 0.75rem !important;
  }
}