/* * Filament's compiled CSS bundle only ships utility classes for the panel's * configured "primary"/"gray" colors plus plain white — it does NOT include * literal Tailwind hue classes (red-*, blue-*, emerald-*, amber-*) or the * semantic success/danger/warning/info-* classes, because this panel has no * custom Tailwind build of its own (no ->viteTheme()). Any raw Tailwind-style * class using those names in a custom Blade view silently renders nothing. * * This stylesheet is a small hand-written (non-Tailwind) replacement palette * for the four semantic roles actually used across the app's custom views, * dark-mode-aware via Filament's `.dark` class on (not a media query, * so it correctly follows the in-app theme toggle). */ /* ---- soft badges (pill background + matching text) ---- */ .clr-badge-danger { background-color: #fee2e2; color: #b91c1c; } .clr-badge-success { background-color: #d1fae5; color: #047857; } .clr-badge-warning { background-color: #fef3c7; color: #b45309; } .clr-badge-info { background-color: #dbeafe; color: #1d4ed8; } :where(.dark) .clr-badge-danger { background-color: #7f1d1d; color: #fca5a5; } :where(.dark) .clr-badge-success { background-color: #064e3b; color: #6ee7b7; } :where(.dark) .clr-badge-warning { background-color: #78350f; color: #fcd34d; } :where(.dark) .clr-badge-info { background-color: #1e3a8a; color: #93c5fd; } /* ---- soft borders ---- */ .clr-border-danger { border-color: #fecaca; } .clr-border-success { border-color: #a7f3d0; } .clr-border-warning { border-color: #fde68a; } .clr-border-info { border-color: #93c5fd; } :where(.dark) .clr-border-danger { border-color: #991b1b; } :where(.dark) .clr-border-success { border-color: #065f46; } :where(.dark) .clr-border-warning { border-color: #92400e; } :where(.dark) .clr-border-info { border-color: #1e40af; } /* ---- plain text, no background ---- */ .clr-text-danger { color: #dc2626; } .clr-text-success { color: #059669; } .clr-text-warning { color: #d97706; } .clr-text-info { color: #2563eb; } :where(.dark) .clr-text-danger { color: #f87171; } :where(.dark) .clr-text-success { color: #34d399; } :where(.dark) .clr-text-warning { color: #fbbf24; } :where(.dark) .clr-text-info { color: #60a5fa; } /* ---- solid, high-contrast backgrounds (buttons, flash banners) — same in both themes ---- */ .clr-solid-danger { background-color: #dc2626; color: #fff; } .clr-solid-danger:hover { background-color: #b91c1c; } .clr-solid-success { background-color: #16a34a; color: #fff; } .clr-solid-success:hover { background-color: #15803d; } /* ---- strong / heavy backgrounds for full alert panels ---- */ .clr-strong-danger { background-color: #fef2f2; border-color: #fca5a5; } .clr-strong-warning { background-color: #fffbeb; border-color: #fde68a; } .clr-strong-success { background-color: #ecfdf5; border-color: #a7f3d0; } :where(.dark) .clr-strong-danger { background-color: #450a0a; border-color: #7f1d1d; } :where(.dark) .clr-strong-warning { background-color: #451a03; border-color: #92400e; } :where(.dark) .clr-strong-success { background-color: #022c22; border-color: #065f46; } /* ---- single-shade accents (progress bars, left-border stripes) — same in both themes ---- */ .clr-accent-danger { border-color: #ef4444; } .clr-accent-warning { border-color: #fbbf24; } .clr-accent-danger-bg { background-color: #ef4444; } .clr-accent-warning-bg { background-color: #fbbf24; } /* ---- extra hues used for movement-type badges (transfers) ---- */ .clr-badge-violet { background-color: #ede9fe; color: #6d28d9; } .clr-badge-orange { background-color: #ffedd5; color: #c2410c; } .clr-text-violet { color: #7c3aed; } .clr-text-orange { color: #ea580c; } :where(.dark) .clr-badge-violet { background-color: #4c1d95; color: #c4b5fd; } :where(.dark) .clr-badge-orange { background-color: #7c2d12; color: #fdba74; } :where(.dark) .clr-text-violet { color: #a78bfa; } :where(.dark) .clr-text-orange { color: #fb923c; } /* ---- brand-tinted badge (mirrors the panel's primary color, #8B5E3C) ---- */ .clr-badge-primary { background-color: #f2e9e2; color: #6b4529; } :where(.dark) .clr-badge-primary { background-color: #4a2f1c; color: #d6b89c; } /* ---- modal/overlay backdrop — same translucent black in both themes ---- */ .clr-overlay { background-color: rgba(0, 0, 0, 0.6); } /* ---- subtle full-row tint (tables) ---- */ .clr-row-danger { background-color: #fef2f2; } :where(.dark) .clr-row-danger { background-color: #450a0a; } /* ---- icon-only buttons: transparent by default, soft tint on hover ---- */ .clr-hover-danger:hover { background-color: #fee2e2; } :where(.dark) .clr-hover-danger:hover { background-color: #7f1d1d; }