/**
 * QR-Code Thumbnail Visibility
 * Pfad: assets/css/qr-thumbnails.css
 *
 * Garantiert, dass QR-Code-Thumbnails in Listen (dashboard.php,
 * my-qr-codes.php, etc.) im Dark-Mode einen weissen Hintergrund mit
 * leichtem Padding haben — sonst sind schwarze QR-Module gegen den
 * dunklen Page-Hintergrund unsichtbar.
 *
 * Die Klasse `.qr-image` wird bereits konsistent an allen Thumbnail-
 * <img>-Tags vergeben. Mit dieser Regel reicht das aus — kein Markup-
 * Refactor pro Seite noetig.
 *
 * Tailwind-build-resistent (keine @apply-Direktiven, pure CSS).
 */

.qr-image {
    background-color: #ffffff !important;
    padding: 4px;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

.dark .qr-image {
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Inaktive/quotaverletzte QR-Codes: ausgegrautes Thumbnail bleibt sichtbar */
.qr-image.opacity-50,
.qr-image.grayscale {
    background-color: #f1f5f9 !important; /* slate-100 als Hinweis auf inaktiv */
}
.dark .qr-image.opacity-50,
.dark .qr-image.grayscale {
    background-color: #cbd5e1 !important; /* slate-300 */
}