/* public/assets/app.css */
/* Centralized styles for the app. Tailwind utilities come from the CDN; this file is for small custom tweaks. */

/* Sidebar icons should align cleanly with text */
#appSidebar svg {
  display: inline-block;
}

/* Example: fine-tune focus ring for brand buttons when needed */
.btn-brand:focus-visible {
  outline: 2px solid #008888;
  outline-offset: 2px;
}

/* --- Fallback utilities for brand/accent colors (mirror Tailwind class names) --- */
/* These ensure brand styles show even if the Tailwind CDN config hasn't loaded yet. */
.bg-brand { background-color: #008888 !important; }
.text-brand { color: #008888 !important; }
.border-brand { border-color: #008888 !important; }
.ring-brand { --tw-ring-color: #008888 !important; }
.fill-brand { fill: #008888 !important; }
.stroke-brand { stroke: #008888 !important; }
.hover\:bg-brand:hover { background-color: #008888 !important; }
.hover\:text-brand:hover { color: #008888 !important; }
.hover\:border-brand:hover { border-color: #008888 !important; }

.bg-accent { background-color: #b04000 !important; }
.text-accent { color: #b04000 !important; }
.border-accent { border-color: #b04000 !important; }
.ring-accent { --tw-ring-color: #b04000 !important; }
.fill-accent { fill: #b04000 !important; }
.stroke-accent { stroke: #b04000 !important; }
.hover\:bg-accent:hover { background-color: #b04000 !important; }
.hover\:text-accent:hover { color: #b04000 !important; }
.hover\:border-accent:hover { border-color: #b04000 !important; }

/* --- QR code rendering tweaks --- */
#qrCodeContainer canvas,
#qrCodeContainer img {
  image-rendering: pixelated;
  image-rendering: crisp-edges; /* fallback for some browsers */
}