/* ── Badge base ── */ .captcha-status-matrix .captcha-rate-badge { border-width: 1px; border-style: solid; } /* ── Dark-mode defaults (original design) ── */ .captcha-status-matrix .captcha-rate-badge--success { color: #86efac; border-color: rgba(74, 222, 128, 0.6); background-color: rgba(34, 197, 94, 0.14); box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.08); } .captcha-status-matrix .captcha-rate-badge--warning { color: #fde047; border-color: rgba(250, 204, 21, 0.6); background-color: rgba(234, 179, 8, 0.14); box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.08); } .captcha-status-matrix .captcha-rate-badge--danger { color: #fca5a5; border-color: rgba(248, 113, 113, 0.6); background-color: rgba(239, 68, 68, 0.14); box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.08); } .captcha-status-matrix .captcha-rate-badge--muted { color: #e2e8f0; border-color: rgba(148, 163, 184, 0.35); background-color: rgba(148, 163, 184, 0.08); } .captcha-status-matrix .captcha-rate-card--success { border-color: rgba(74, 222, 128, 0.72); background-color: rgba(34, 197, 94, 0.08); } .captcha-status-matrix .captcha-rate-card--warning { border-color: rgba(250, 204, 21, 0.72); background-color: rgba(234, 179, 8, 0.08); } .captcha-status-matrix .captcha-rate-card--danger { border-color: rgba(248, 113, 113, 0.72); background-color: rgba(239, 68, 68, 0.08); } .captcha-status-matrix .captcha-rate-card--muted { border-color: rgba(203, 213, 225, 0.8); background-color: rgba(148, 163, 184, 0.04); } .captcha-status-matrix .captcha-rate-value--success { color: #86efac; } .captcha-status-matrix .captcha-rate-value--warning { color: #fde047; } .captcha-status-matrix .captcha-rate-value--danger { color: #fca5a5; } .captcha-status-matrix .captcha-rate-value--muted { color: #ffffff; } .captcha-status-matrix .captcha-rate-bar--success { background-color: #4ade80; } .captcha-status-matrix .captcha-rate-bar--warning { background-color: #facc15; } .captcha-status-matrix .captcha-rate-bar--danger { background-color: #f87171; } .captcha-status-matrix .captcha-rate-bar--muted { background-color: #cbd5e1; } /* ══════════════════════════════════════════════════ Light-mode overrides Filament puts class="dark" on for dark mode. These rules ONLY apply when dark mode is OFF. ══════════════════════════════════════════════════ */ /* ── Section container ── */ html:not(.dark) .captcha-status-matrix { background-color: #ffffff !important; color: #1e293b !important; border-color: #e2e8f0 !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important; } /* ── Header area ── */ html:not(.dark) .captcha-status-matrix > div:first-child { border-color: #e2e8f0 !important; } html:not(.dark) .captcha-status-matrix h2 { color: #0f172a !important; } html:not(.dark) .captcha-status-matrix > div:first-child p { color: #475569 !important; } html:not(.dark) .captcha-status-matrix > div:first-child > span { color: #0369a1 !important; border-color: rgba(14, 165, 233, 0.35) !important; background-color: rgba(14, 165, 233, 0.08) !important; } /* ── Table header ── */ html:not(.dark) .captcha-status-matrix thead { border-color: #e2e8f0 !important; background-color: #f8fafc !important; } html:not(.dark) .captcha-status-matrix th { color: #334155 !important; } /* ── Table body rows / dividers ── */ html:not(.dark) .captcha-status-matrix tbody { --tw-divide-opacity: 1 !important; border-color: #e2e8f0 !important; } html:not(.dark) .captcha-status-matrix tbody > tr + tr { border-color: #e2e8f0 !important; } html:not(.dark) .captcha-status-matrix tbody > tr { border-color: #e2e8f0 !important; } html:not(.dark) .captcha-status-matrix tr:hover { background-color: #f8fafc !important; } /* ── Product name ── */ html:not(.dark) .captcha-status-matrix td p { color: #1e293b !important; } /* ── Live/Idle label (span inside product cell) ── */ html:not(.dark) .captcha-status-matrix td .min-w-\[190px\] span:last-child { color: #64748b !important; } /* ── Status badge (Active/Idle) ── */ html:not(.dark) .captcha-status-matrix td .pt-1 > span { color: #065f46 !important; background-color: rgba(16, 185, 129, 0.1) !important; --tw-ring-color: rgba(16, 185, 129, 0.3) !important; } /* ── Progress bar container ── */ html:not(.dark) .captcha-status-matrix .bg-white\/10 { background-color: #e2e8f0 !important; } /* ── Card inner shadows (remove white inner glow) ── */ html:not(.dark) .captcha-status-matrix td > div[class*="min-w-"] { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important; } /* ── Selected column ring ── */ html:not(.dark) .captcha-status-matrix td > div[class*="ring-1"] { --tw-ring-color: rgba(14, 165, 233, 0.25) !important; } /* ── Average time text ── */ html:not(.dark) .captcha-status-matrix td .text-\[1\.02rem\] { color: #475569 !important; } /* ── Period / date text (the main fix) ── */ html:not(.dark) .captcha-status-matrix td .text-\[0\.98rem\] { color: #334155 !important; } /* ── "No metrics" empty state ── */ html:not(.dark) .captcha-status-matrix .text-center p:first-child { color: #0f172a !important; } html:not(.dark) .captcha-status-matrix .text-center p:last-child { color: #64748b !important; } /* ── Badge overrides ── */ html:not(.dark) .captcha-status-matrix .captcha-rate-badge--success { color: #15803d !important; border-color: rgba(34, 197, 94, 0.5) !important; background-color: rgba(34, 197, 94, 0.1) !important; box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.06) !important; } html:not(.dark) .captcha-status-matrix .captcha-rate-badge--warning { color: #a16207 !important; border-color: rgba(234, 179, 8, 0.5) !important; background-color: rgba(234, 179, 8, 0.1) !important; box-shadow: inset 0 0 0 1px rgba(234, 179, 8, 0.06) !important; } html:not(.dark) .captcha-status-matrix .captcha-rate-badge--danger { color: #b91c1c !important; border-color: rgba(239, 68, 68, 0.5) !important; background-color: rgba(239, 68, 68, 0.1) !important; box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.06) !important; } html:not(.dark) .captcha-status-matrix .captcha-rate-badge--muted { color: #64748b !important; border-color: rgba(148, 163, 184, 0.4) !important; background-color: rgba(148, 163, 184, 0.06) !important; } /* ── Card overrides ── */ html:not(.dark) .captcha-status-matrix .captcha-rate-card--success { border-color: rgba(34, 197, 94, 0.4) !important; background-color: rgba(34, 197, 94, 0.06) !important; } html:not(.dark) .captcha-status-matrix .captcha-rate-card--warning { border-color: rgba(234, 179, 8, 0.4) !important; background-color: rgba(234, 179, 8, 0.06) !important; } html:not(.dark) .captcha-status-matrix .captcha-rate-card--danger { border-color: rgba(239, 68, 68, 0.4) !important; background-color: rgba(239, 68, 68, 0.06) !important; } html:not(.dark) .captcha-status-matrix .captcha-rate-card--muted { border-color: #e2e8f0 !important; background-color: #f8fafc !important; } /* ── Value text overrides ── */ html:not(.dark) .captcha-status-matrix .captcha-rate-value--success { color: #15803d !important; } html:not(.dark) .captcha-status-matrix .captcha-rate-value--warning { color: #a16207 !important; } html:not(.dark) .captcha-status-matrix .captcha-rate-value--danger { color: #b91c1c !important; } html:not(.dark) .captcha-status-matrix .captcha-rate-value--muted { color: #1e293b !important; } /* ── Bar overrides ── */ html:not(.dark) .captcha-status-matrix .captcha-rate-bar--success { background-color: #22c55e !important; } html:not(.dark) .captcha-status-matrix .captcha-rate-bar--warning { background-color: #eab308 !important; } html:not(.dark) .captcha-status-matrix .captcha-rate-bar--danger { background-color: #ef4444 !important; }