style.css

/* style.css */

/* Include Tailwind's base styles */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles */

/* Error input field */
.input-error {
  @apply border-red-500 bg-red-100 dark:bg-red-200 transition-colors duration-300;
}

/* Error message */
.error-message {
  @apply text-red-500 text-sm mt-1 hidden;
}

/* Tooltip styling */
.has-tooltip {
  position: relative;
}

/* Dark mode adjustments for inputs */
input,
select {
  @apply bg-white text-gray-800 border border-gray-300;
}

.dark input,
.dark select {
  @apply bg-gray-800 text-gray-200 border-gray-600;
}

/* Ensure table cells have consistent height for better visualization */
#simulationTable td,
#simulationTable th {
  @apply h-10;
}

/* Customize disabled buttons for better UX */
button:disabled {
  @apply opacity-50 cursor-not-allowed;
}

/* Performance Chart Section Styles */
#performanceChartSection {
  /* Optional: Add background color or padding adjustments */
  padding: auto;
}

#showChartBtn,
#downloadChartBtn {
  /* Optional: Add transition effects */
  transition: background-color 0.3s;
}

#showChartBtn:hover,
#downloadChartBtn:hover {
  /* Optional: Add hover effects */
  background-color: #f3f4f6;
}

/* Page Fault */
.page-fault {
  @apply bg-red-200 dark:bg-red-600 text-red-800 dark:text-red-200;
}

/* Page Hit */
.page-hit {
  @apply bg-green-200 dark:bg-green-600 text-green-800 dark:text-green-200;
}