input[readonly] { background-color: rgb(176, 165, 165); } legend{ font-size: 24px; font-weight: bold; } #shadowBox { background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.2); /* Black w/opacity/see-through */ border: 3px solid; } .rainbow { text-align: center; font-size: 32px; font-family: monospace; letter-spacing: 5px; animation: colorRotate 6s linear 0s infinite; } @keyframes colorRotate { from { color: #6666ff; } 10% { color: #0099ff; } 50% { color: #00ff00; } 75% { color: #ff3399; } 100% { color: #6666ff; } } /* ═══════════════════════════════════════════════ Dark Mode (2026-04-24) Toggle via data-theme="dark" on . Uses CSS variables so any component opting in picks up the correct palette automatically. ═══════════════════════════════════════════════ */ :root { --jkm-bg: #ffffff; --jkm-bg-elevated: #f8f9fa; --jkm-text: #212529; --jkm-text-muted: #6c757d; --jkm-border: #dee2e6; --jkm-link: #0d6efd; --jkm-card-bg: #ffffff; --jkm-card-header: #212529; --jkm-table-stripe: rgba(0,0,0,0.03); --jkm-navbar-bg: #212529; } html[data-theme="dark"] { --jkm-bg: #0f172a; --jkm-bg-elevated: #1e293b; --jkm-text: #e2e8f0; --jkm-text-muted: #94a3b8; --jkm-border: #334155; --jkm-link: #60a5fa; --jkm-card-bg: #1e293b; --jkm-card-header: #0b1222; --jkm-table-stripe: rgba(255,255,255,0.03); --jkm-navbar-bg: #0b1222; color-scheme: dark; } html[data-theme="dark"] body { background: var(--jkm-bg); color: var(--jkm-text); } html[data-theme="dark"] .card { background: var(--jkm-card-bg); color: var(--jkm-text); border-color: var(--jkm-border); } html[data-theme="dark"] .card-body { background: var(--jkm-card-bg); } html[data-theme="dark"] .table { color: var(--jkm-text); } html[data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: var(--jkm-text); } html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--jkm-table-stripe); } html[data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: rgba(255,255,255,0.05); } html[data-theme="dark"] .dropdown-menu { background: var(--jkm-card-bg); border-color: var(--jkm-border); } html[data-theme="dark"] .dropdown-item { color: var(--jkm-text); } html[data-theme="dark"] .dropdown-item:hover { background: #334155; color: #fff; } html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { background: #1e293b; border-color: var(--jkm-border); color: var(--jkm-text); } html[data-theme="dark"] .text-muted { color: var(--jkm-text-muted) !important; } html[data-theme="dark"] .bg-light { background: var(--jkm-bg-elevated) !important; color: var(--jkm-text); } html[data-theme="dark"] .alert-info { background: #0b3b52; color: #cfe8f5; border-color: #0d4d6b; } html[data-theme="dark"] .breadcrumb { background: transparent; } html[data-theme="dark"] .breadcrumb-item, html[data-theme="dark"] .breadcrumb-item.active { color: var(--jkm-text-muted); } /* Theme toggle button */ #jkm-theme-toggle { background: transparent; border: 1px solid rgba(255,255,255,0.25); color: #fff; padding: 0.15rem 0.55rem; border-radius: 0.375rem; line-height: 1.2; font-size: 0.9rem; cursor: pointer; } #jkm-theme-toggle:hover { background: rgba(255,255,255,0.12); }