/* Base Styles */
body {
  font-family: "Inter", sans-serif;
}

/* Custom Tailwind-like classes (adapt these to your project's needs) */

.card {
  background-color: #ffffff; /* White */
  border-radius: 0.5rem; /* Equivalent to rounded-lg */
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* Equivalent to shadow-sm */
}

.input {
  border: 1px solid #ced4da; /* Light gray border */
  border-radius: 0.25rem; /* Equivalent to rounded */
  /* Other styles from Tailwind classes: w-full p-3 text-base */
}

.input:focus {
  border-color: #007bff; /* Blue for focus ring */
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Focus ring effect */
}

/* Button Base */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem; /* Equivalent to rounded-lg */
  font-weight: 500; /* Equivalent to font-medium */
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
    color 0.15s ease-in-out;
  border: 1px solid transparent;
}

/* Primary Button */
.btn-primary {
  background-color: #007bff; /* Brand Blue */
  color: #ffffff;
}
.btn-primary:hover {
  background-color: #0056b3; /* Darker Brand Blue on hover */
}

/* Destructive Button */
.btn-destructive {
  background-color: #dc3545; /* Red for destructive actions */
  color: #ffffff;
}
.btn-destructive:hover {
  background-color: #c82333; /* Darker Red on hover */
}

/* Secondary Button */
.btn-secondary {
  background-color: #6c757d; /* Medium Gray */
  color: #ffffff;
}
.btn-secondary:hover {
  background-color: #5a6268; /* Darker Gray on hover */
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.6em;
  font-size: 0.75em; /* Smaller font for badges */
  font-weight: 600; /* Equivalent to font-semibold */
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.375rem; /* Equivalent to rounded-lg */
  color: #ffffff;
}

.badge-success {
  background-color: #28a745; /* Green for success */
}

.badge-danger {
  background-color: #dc3545; /* Red for danger */
}

/* Progress Bars */
.progress-bar {
  background-color: #e9ecef; /* Light gray background for the bar */
  border-radius: 0.25rem;
  height: 0.75rem; /* Height of the bar */
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 0.25rem;
  transition: width 0.6s ease; /* Smooth transition for width change */
}

.progress-bar-fill-success {
  background-color: #28a745; /* Green for success progress */
}

.progress-bar-fill-danger {
  background-color: #dc3545; /* Red for danger progress */
}

/* Text Colors */
.text-muted-foreground {
  color: #6c757d; /* Medium gray for secondary text */
}

/* Table specific styles (from Tailwind, keeping for clarity) */
table {
  border-collapse: collapse;
  width: 100%;
}

thead th {
  padding: 0.5rem;
  border-bottom: 1px solid #dee2e6; /* Light gray border for table header */
  font-weight: 500;
  text-align: left;
}

tbody td {
  padding: 0.5rem;
  border-bottom: 1px solid #dee2e6; /* Light gray border for table rows */
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  border-top-width: 1px;
  border-color: #dee2e6; /* Ensures divide-y uses consistent border color */
}

/* Dark Mode Styles */
html.dark body {
  background-color: #1a202c; /* Darker background for body */
  color: #e2e8f0; /* Lighter text for body */
}

html.dark .card {
  background-color: #2d3748; /* Darker card background */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

html.dark header,
html.dark footer {
  background-color: #2d3748; /* Darker header/footer background */
  box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.1), 0 -1px 2px 0 rgba(0, 0, 0, 0.06); /* Adjust shadow for footer */
}

html.dark .input {
  background-color: #4a5568; /* Darker input background */
  border-color: #4a5568; /* Darker input border */
  color: #e2e8f0; /* Lighter text in input */
}
html.dark .input:focus {
  border-color: #007bff; /* Still blue on focus for dark mode */
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

html.dark .btn-primary {
  background-color: #007bff;
  color: #ffffff;
}
html.dark .btn-primary:hover {
  background-color: #0056b3;
}

html.dark .btn-destructive {
  background-color: #dc3545;
  color: #ffffff;
}
html.dark .btn-destructive:hover {
  background-color: #c82333;
}

html.dark .btn-secondary {
  background-color: #5a6268; /* Slightly darker gray for secondary in dark mode */
  color: #ffffff;
}
html.dark .btn-secondary:hover {
  background-color: #4a5055;
}

html.dark .text-muted-foreground {
  color: #a0aec0; /* Lighter muted text for dark mode */
}

html.dark thead.bg-gray-100 {
  /* Thead background in dark mode */
  background-color: #4a5568;
}
html.dark tbody td {
  border-bottom-color: #4a5568; /* Darker border for table rows in dark mode */
}
html.dark .divide-y > :not([hidden]) ~ :not([hidden]) {
  border-color: #4a5568; /* Darker divider in dark mode */
}

/* Sticky Card - Para manter a seção de progresso fixa */
.sticky-card {
  position: sticky;
  top: 0; /* Ajuste este valor se precisar de mais ou menos espaçamento do topo */
  z-index: 10; /* Garante que fique acima de outros elementos ao rolar */
}

/* Ajustes para o modo escuro do sticky card */
html.dark .sticky-card {
  background-color: #2d3748; /* Cor de fundo para o card no modo escuro */
}

/* Print Styles */
@media print {
  .print-hidden {
    display: none !important;
  }

  /* Ocultar elementos não essenciais na impressão */
  header, footer, .flex.justify-end.gap-2, /* Botões Limpar/Imprimir */
  .sticky-card, /* Oculta o progresso para uma impressão mais limpa se desejar */
  #confirm-modal,
  .input {
    /* Oculta os inputs numericos para uma tabela mais limpa */
    display: none !important;
  }

  /* Restaurar visibilidade para elementos da tabela se eles foram afetados */
  #rsc-items-list table,
  #rsc-items-list thead,
  #rsc-items-list tbody,
  #rsc-items-list tr,
  #rsc-items-list th,
  #rsc-items-list td {
    display: table; /* Force table display */
    width: auto; /* Reset width */
  }

  /* Exibir campos de texto dentro da tabela se necessário */
  #rsc-items-list td > div {
    display: block !important;
  }

  /* Garantir que o título da tabela apareça */
  .card h2 {
    display: block !important;
  }

  /* Ajustar margens e padding para impressão */
  body {
    margin: 0;
    padding: 0;
    background: white;
    color: black;
  }

  main {
    padding: 1rem !important; /* Ajustar padding da main */
    max-width: none !important; /* Usar largura total */
    margin: 0 !important;
  }

  .card {
    box-shadow: none !important;
    border: 1px solid #dee2e6; /* Adiciona uma borda leve aos cards na impressão */
  }

  /* Exibir apenas o resultado principal e a tabela de itens relevantes */
  #rsc-level-result {
    display: block !important;
    border: 1px solid #dee2e6;
    padding: 1rem;
    margin-bottom: 1rem;
  }

  /* Esconder o elemento pai do select de nível se ele não for relevante na impressão */
  section:has(#level-select) {
    display: none !important;
  }
}