/* ==========================================================================
   SUPORTE DE TEMAS (Claro / Escuro / Automático)
   ========================================================================== */

:root {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

/* Modo Escuro Global */
html.dark body {
  background-color: #0f172a !important; /* slate-900 */
  color: #f1f5f9 !important; /* slate-100 */
}

/* Cartões e Contentores em Dark Mode */
html.dark .bg-white {
  background-color: #1e293b !important; /* slate-800 */
  color: #f8fafc !important;
  border-color: #334155 !important; /* slate-700 */
}

html.dark .bg-gray-50,
html.dark .bg-slate-50 {
  background-color: #0f172a !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

html.dark .bg-gray-100 {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}

html.dark input,
html.dark select,
html.dark textarea {
  background-color: #0f172a !important;
  color: #f8fafc !important;
  border-color: #475569 !important;
}

html.dark table th {
  background-color: #0f172a !important;
  color: #94a3b8 !important;
  border-color: #334155 !important;
}

html.dark table td {
  border-color: #334155 !important;
}

html.dark table tbody tr:hover {
  background-color: #334155 !important;
}

/* ==========================================================================
   OTIMIZAÇÕES MÓVEIS (Touch & Responsividade)
   ========================================================================== */

/* Rolagem suave e horizontal confortável em tabelas grandes */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

/* Grelha semanal adaptável a telemóveis */
@media (max-width: 768px) {
  #tabelaGrelhaSemanal th,
  #tabelaGrelhaSemanal td {
    min-width: 130px;
    font-size: 11px;
    padding: 6px 4px;
  }
  
  #tabelaGrelhaSemanal th:first-child,
  #tabelaGrelhaSemanal td:first-child {
    min-width: 80px;
    position: sticky;
    left: 0;
    z-index: 2;
  }

  /* Banco de cartões em ecrãs pequenos */
  #containerCartoesArrastaveis {
    max-height: 180px;
    overflow-y: auto;
  }
}