/* style.css */

/* Mobile-first responsiveness & theme-aware styling */
body {
  font-family: 'Inter', sans-serif; /* Using Inter font, ensure it's linked or default to sans-serif */
}

img {
  max-width: 100%;
  height: auto;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Loading Spinner CSS */
.loader {
  border-top-color: #3498db; /* Blue color for the top border */
  -webkit-animation: spin 1s linear infinite; /* Safari */
  animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Specific styling for generated barcode images */
#barcodePreview img {
  max-height: 180px; /* Adjust as needed */
  width: auto; /* Allow width to adjust based on aspect ratio */
  object-fit: contain; /* Ensure the entire image is visible within its container */
  border: 1px solid var(--tw-gray-300); /* Use Tailwind's gray-300 for border */
  padding: 8px;
  background-color: var(--tw-white); /* Use Tailwind's white for background */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border-radius: 6px;
}

/* Dark mode specific adjustments for barcode images */
html.dark #barcodePreview img {
  border-color: var(--tw-gray-700);
  background-color: var(--tw-gray-900); /* Adjust barcode background in dark mode if necessary */
}

/* Enhance form element appearance */
select, textarea, input[type="text"] {
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

select:focus, textarea:focus, input[type="text"]:focus {
  border-color: #6366f1; /* Tailwind indigo-500 */
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5); /* Tailwind indigo-500 with transparency */
}

/* Improve button styles for hover and focus states */
button {
  transition: background-color 0.2s, transform 0.1s;
}

button:hover {
  transform: translateY(-1px);
}

button:active {
  transform: translateY(0);
}

/* For the dark mode toggle button */
#darkModeToggle:hover {
  color: #3b82f6; /* A slightly different shade for hover */
}
html.dark #darkModeToggle:hover {
  color: #60a5fa;
}

/* Remove default focus outline for elements where custom focus styles are applied */
*:focus {
  outline: none;
}