/* ============================================================ WorkPulse Sci-Fi Theme Pack Applied via [data-theme="xxx"] on ============================================================ */ /* ── Shared sci-fi base overrides ─────────────────────────── */ [data-theme]:not([data-theme="default"]) { --shadow-sm: 0 0 6px var(--theme-glow, rgba(0,0,0,0.3)); --shadow-md: 0 0 15px var(--theme-glow, rgba(0,0,0,0.3)); } [data-theme]:not([data-theme="default"]) body { font-family: 'Rajdhani', 'Share Tech Mono', 'Consolas', monospace; } [data-theme]:not([data-theme="default"]) .card { border-radius: 2px; } [data-theme]:not([data-theme="default"]) .btn { border-radius: 2px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } [data-theme]:not([data-theme="default"]) .form-control, [data-theme]:not([data-theme="default"]) .form-select { border-radius: 2px; } [data-theme]:not([data-theme="default"]) .badge { border-radius: 2px; } /* ── 1. Neon Syndicate ────────────────────────────────────── */ :root[data-theme="neon-syndicate"] { --color-bg: #0a0a1a; --color-surface: #111128; --color-navbar: #0a0a1a; --color-primary: #00ffaa; --color-primary-dark: #00cc88; --color-primary-light: #66ffcc; --color-text: #e0e0ff; --color-text-muted: #8888bb; --color-text-light: #6666aa; --color-border: rgba(0, 255, 170, 0.2); --color-success: #00ffaa; --color-danger: #ff00ff; --color-warning: #ffff00; --color-info: #00ffff; --theme-glow: rgba(0, 255, 170, 0.3); } [data-theme="neon-syndicate"] .navbar { border-bottom: 1px solid rgba(0, 255, 170, 0.3); box-shadow: 0 0 15px rgba(0, 255, 170, 0.2); } [data-theme="neon-syndicate"] .card { border: 1px solid rgba(0, 255, 170, 0.2); box-shadow: 0 0 10px rgba(0, 255, 170, 0.1), inset 0 0 10px rgba(0, 255, 170, 0.05); } [data-theme="neon-syndicate"] .navbar-brand { color: #fff !important; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #0fa, 0 0 40px #0fa; } [data-theme="neon-syndicate"] .timer-display { color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #f0f, 0 0 40px #f0f; } [data-theme="neon-syndicate"] .avatar-circle { background: #ff00ff; box-shadow: 0 0 10px #ff00ff; } [data-theme="neon-syndicate"] .btn-primary { background: transparent; border: 1px solid #0fa; color: #0fa; box-shadow: 0 0 10px #0fa, inset 0 0 10px rgba(0, 255, 170, 0.1); } [data-theme="neon-syndicate"] .btn-primary:hover { background: rgba(0, 255, 170, 0.15); border-color: #0fa; color: #fff; } /* ── 2. Netrunner Terminal ────────────────────────────────── */ :root[data-theme="netrunner"] { --color-bg: #001100; --color-surface: #001a00; --color-navbar: #000a00; --color-primary: #00ff00; --color-primary-dark: #00cc00; --color-primary-light: #33ff33; --color-text: #00ff00; --color-text-muted: #009900; --color-text-light: #006600; --color-border: rgba(0, 255, 0, 0.2); --color-success: #00ff00; --color-danger: #ff3333; --color-warning: #ffff00; --color-info: #00ff00; --theme-glow: rgba(0, 255, 0, 0.3); } [data-theme="netrunner"] body::after { content: " "; display: block; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); z-index: 9999; background-size: 100% 2px, 3px 100%; pointer-events: none; } [data-theme="netrunner"] .navbar { border-bottom: 1px solid rgba(0, 255, 0, 0.3); } [data-theme="netrunner"] .card { border: 1px solid rgba(0, 255, 0, 0.2); background: rgba(0, 26, 0, 0.8); } [data-theme="netrunner"] .navbar-brand, [data-theme="netrunner"] .timer-display { color: #0f0 !important; text-shadow: 0 0 5px #0f0; } [data-theme="netrunner"] .avatar-circle { background: #009900; box-shadow: 0 0 8px #0f0; } [data-theme="netrunner"] .btn-primary { background: rgba(0, 255, 0, 0.15); border: 1px solid #0f0; color: #0f0; } [data-theme="netrunner"] .btn-primary:hover { background: rgba(0, 255, 0, 0.3); color: #fff; } [data-theme="netrunner"] .table th, [data-theme="netrunner"] .form-label { color: #009900; } /* ── 3. Militech HUD ─────────────────────────────────────── */ :root[data-theme="militech"] { --color-bg: #0d0d0d; --color-surface: #141414; --color-navbar: #0a0a0a; --color-primary: #ff8c00; --color-primary-dark: #cc7000; --color-primary-light: #ffaa33; --color-text: #e0c090; --color-text-muted: #aa8855; --color-text-light: #886633; --color-border: rgba(255, 140, 0, 0.25); --color-success: #ff8c00; --color-danger: #ff3333; --color-warning: #ffd700; --color-info: #ff8c00; --theme-glow: rgba(255, 140, 0, 0.3); } [data-theme="militech"] .navbar { border-bottom: 2px solid #ff8c00; box-shadow: 0 0 15px rgba(255, 140, 0, 0.2); } [data-theme="militech"] .card { background: rgba(255, 140, 0, 0.05); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); border-left: 3px solid #ff8c00; border: 1px solid rgba(255, 140, 0, 0.3); } [data-theme="militech"] .navbar-brand, [data-theme="militech"] .timer-display { color: #ff8c00 !important; text-shadow: 0 0 8px rgba(255, 140, 0, 0.8); } [data-theme="militech"] .avatar-circle { background: #ff8c00; box-shadow: 0 0 8px rgba(255, 140, 0, 0.6); } [data-theme="militech"] .btn-primary { background: rgba(255, 140, 0, 0.2); border: 1px solid #ff8c00; color: #ff8c00; } [data-theme="militech"] .btn-primary:hover { background: #ff8c00; color: #000; } /* HUD decorative elements */ [data-theme="militech"] .page-header h2::before { content: "// "; color: rgba(255, 140, 0, 0.4); } [data-theme="militech"] .page-header h2::after { content: " _"; color: rgba(255, 140, 0, 0.4); animation: blink-cursor 1s step-end infinite; } @keyframes blink-cursor { 50% { opacity: 0; } } /* ── 4. Neuro-Glitch ─────────────────────────────────────── */ :root[data-theme="neuro-glitch"] { --color-bg: #0a0a12; --color-surface: #12121f; --color-navbar: #08080f; --color-primary: #00ffff; --color-primary-dark: #00cccc; --color-primary-light: #66ffff; --color-text: #e0e0ff; --color-text-muted: #8888cc; --color-text-light: #5555aa; --color-border: rgba(0, 255, 255, 0.2); --color-success: #00ff88; --color-danger: #ff0044; --color-warning: #ffcc00; --color-info: #00ffff; --theme-glow: rgba(0, 255, 255, 0.3); } [data-theme="neuro-glitch"] .navbar { border-bottom: 1px solid rgba(0, 255, 255, 0.3); } [data-theme="neuro-glitch"] .card { border: 1px solid rgba(0, 255, 255, 0.2); } [data-theme="neuro-glitch"] .navbar-brand { color: white !important; position: relative; } [data-theme="neuro-glitch"] .timer-display { color: white; position: relative; animation: glitch-flicker 4s infinite; } @keyframes glitch-flicker { 0%, 95%, 100% { opacity: 1; transform: none; } 96% { opacity: 0.8; transform: translate(-2px, 1px); text-shadow: 2px 0 #f00, -2px 0 #0ff; } 97% { opacity: 1; transform: translate(2px, -1px); text-shadow: -2px 0 #f00, 2px 0 #0ff; } 98% { opacity: 0.9; transform: none; } } [data-theme="neuro-glitch"] .avatar-circle { background: #0ff; color: #000; box-shadow: 0 0 10px #0ff; } [data-theme="neuro-glitch"] .btn-primary { background: rgba(0, 255, 255, 0.15); border: 1px solid #0ff; color: #0ff; } [data-theme="neuro-glitch"] .btn-primary:hover { background: rgba(0, 255, 255, 0.3); color: #fff; } /* ── 5. Synthwave Grid ────────────────────────────────────── */ :root[data-theme="synthwave"] { --color-bg: #1a0033; --color-surface: #220044; --color-navbar: #110022; --color-primary: #ff00ff; --color-primary-dark: #cc00cc; --color-primary-light: #ff66ff; --color-text: #f0d0ff; --color-text-muted: #aa77cc; --color-text-light: #8855aa; --color-border: rgba(255, 0, 255, 0.2); --color-success: #00ffcc; --color-danger: #ff0066; --color-warning: #ffcc00; --color-info: #00ffff; --theme-glow: rgba(255, 0, 255, 0.3); } /* Animated grid background */ [data-theme="synthwave"] body::before { content: ''; position: fixed; bottom: -50%; left: -50%; width: 200%; height: 100%; background-image: linear-gradient(to right, rgba(255,0,255,0.15) 1px, transparent 1px), linear-gradient(to top, rgba(255,0,255,0.15) 1px, transparent 1px); background-size: 40px 40px; transform: perspective(500px) rotateX(60deg); animation: grid-move 5s linear infinite; pointer-events: none; z-index: -1; } @keyframes grid-move { 0% { transform: perspective(500px) rotateX(60deg) translateY(0); } 100% { transform: perspective(500px) rotateX(60deg) translateY(40px); } } [data-theme="synthwave"] .navbar { border-bottom: 2px solid #ff00ff; box-shadow: 0 0 20px rgba(255, 0, 255, 0.3); } [data-theme="synthwave"] .card { border: 1px solid rgba(255, 0, 255, 0.25); } [data-theme="synthwave"] .navbar-brand, [data-theme="synthwave"] .timer-display { background: linear-gradient(to bottom, #0ff, #fff, #f0f); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 10px rgba(255, 0, 255, 0.8)); } [data-theme="synthwave"] .avatar-circle { background: linear-gradient(135deg, #0ff, #f0f); box-shadow: 0 0 10px #f0f; } [data-theme="synthwave"] .btn-primary { background: linear-gradient(135deg, #f0f, #60f); border: none; color: #fff; } [data-theme="synthwave"] .btn-primary:hover { background: linear-gradient(135deg, #ff66ff, #9966ff); } /* ── 6. Rogue AI ──────────────────────────────────────────── */ :root[data-theme="rogue-ai"] { --color-bg: #0a0000; --color-surface: #140000; --color-navbar: #080000; --color-primary: #ff003c; --color-primary-dark: #cc0030; --color-primary-light: #ff3366; --color-text: #ff9999; --color-text-muted: #993333; --color-text-light: #662222; --color-border: rgba(255, 0, 60, 0.25); --color-success: #ff003c; --color-danger: #ff003c; --color-warning: #ff6600; --color-info: #ff003c; --theme-glow: rgba(255, 0, 60, 0.3); } [data-theme="rogue-ai"] .navbar { border-bottom: 1px solid #ff003c; box-shadow: inset 0 0 20px rgba(255, 0, 60, 0.1); } [data-theme="rogue-ai"] .card { border: 1px solid rgba(255, 0, 60, 0.25); box-shadow: inset 0 0 20px rgba(255, 0, 60, 0.05); } [data-theme="rogue-ai"] .navbar-brand, [data-theme="rogue-ai"] .timer-display { color: #ff003c !important; text-shadow: 0 0 8px #ff003c; } [data-theme="rogue-ai"] .avatar-circle { background: #ff003c; box-shadow: 0 0 10px #ff003c; } /* Barcode decoration at bottom of cards */ [data-theme="rogue-ai"] .card::after { content: ''; display: block; height: 8px; margin-top: 8px; background: repeating-linear-gradient(90deg, #ff003c 0, #ff003c 2px, transparent 2px, transparent 5px, #ff003c 5px, #ff003c 6px, transparent 6px, transparent 10px); opacity: 0.3; } [data-theme="rogue-ai"] .btn-primary { background: rgba(255, 0, 60, 0.2); border: 1px solid #ff003c; color: #ff003c; } [data-theme="rogue-ai"] .btn-primary:hover { background: #ff003c; color: #fff; } /* ── 7. Holo-Projector ───────────────────────────────────── */ :root[data-theme="holo"] { --color-bg: #050a10; --color-surface: #0a1520; --color-navbar: #040810; --color-primary: #00f0ff; --color-primary-dark: #00c0cc; --color-primary-light: #66f8ff; --color-text: #c0f0ff; --color-text-muted: #6699aa; --color-text-light: #446677; --color-border: rgba(0, 240, 255, 0.2); --color-success: #00ff99; --color-danger: #ff4488; --color-warning: #ffcc00; --color-info: #00f0ff; --theme-glow: rgba(0, 240, 255, 0.3); } [data-theme="holo"] .navbar { border-bottom: 1px solid rgba(0, 240, 255, 0.3); box-shadow: 0 0 20px rgba(0, 240, 255, 0.1); } [data-theme="holo"] .card { border: 1px solid rgba(0, 240, 255, 0.2); box-shadow: 0 0 20px rgba(0, 240, 255, 0.05), inset 0 0 20px rgba(0, 240, 255, 0.05); position: relative; } /* Scanline overlay on cards */ [data-theme="holo"] .card::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 240, 255, 0.03) 2px, rgba(0, 240, 255, 0.03) 4px); pointer-events: none; border-radius: inherit; } [data-theme="holo"] .navbar-brand, [data-theme="holo"] .timer-display { color: #00f0ff !important; text-shadow: 0 0 10px #00f0ff; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5)); } [data-theme="holo"] .avatar-circle { background: rgba(0, 240, 255, 0.3); border: 1px solid #00f0ff; box-shadow: 0 0 10px #00f0ff; } [data-theme="holo"] .btn-primary { background: rgba(0, 240, 255, 0.1); border: 1px solid #00f0ff; color: #00f0ff; } [data-theme="holo"] .btn-primary:hover { background: rgba(0, 240, 255, 0.25); color: #fff; } /* ── 8. Scavenger Hazard ──────────────────────────────────── */ :root[data-theme="hazard"] { --color-bg: #1a1a1a; --color-surface: #222222; --color-navbar: #111111; --color-primary: #ffd700; --color-primary-dark: #ccaa00; --color-primary-light: #ffee66; --color-text: #e0d090; --color-text-muted: #aa9955; --color-text-light: #887733; --color-border: rgba(255, 215, 0, 0.25); --color-success: #66cc00; --color-danger: #ff4444; --color-warning: #ffd700; --color-info: #ffaa00; --theme-glow: rgba(255, 215, 0, 0.3); } [data-theme="hazard"] .navbar { border-top: 6px solid transparent; border-image: repeating-linear-gradient(90deg, #ffd700 0, #ffd700 15px, #000 15px, #000 30px) 6; border-bottom: 1px solid rgba(255, 215, 0, 0.3); } [data-theme="hazard"] .card { border: 2px solid #ffd700; } [data-theme="hazard"] .navbar-brand, [data-theme="hazard"] .timer-display { color: #ffd700 !important; text-shadow: 3px 3px 0px #000; } [data-theme="hazard"] .avatar-circle { background: #ffd700; color: #000; } [data-theme="hazard"] .btn-primary { background: #ffd700; border: 2px solid #ffd700; color: #000; font-weight: 700; } [data-theme="hazard"] .btn-primary:hover { background: #ffee66; border-color: #ffee66; } /* ── 9. Zaibatsu Corporate ────────────────────────────────── */ :root[data-theme="zaibatsu"] { --color-bg: #0a0a0a; --color-surface: #141414; --color-navbar: #050505; --color-primary: #ffffff; --color-primary-dark: #cccccc; --color-primary-light: #ffffff; --color-text: #e0e0e0; --color-text-muted: #888888; --color-text-light: #555555; --color-border: rgba(255, 255, 255, 0.15); --color-success: #00cc66; --color-danger: #cc0033; --color-warning: #cc9900; --color-info: #3399ff; --theme-glow: rgba(255, 255, 255, 0.1); } [data-theme="zaibatsu"] .navbar { background: linear-gradient(135deg, #0a0a0a, #1a1a1a) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } [data-theme="zaibatsu"] .card { background: linear-gradient(135deg, #0a0a0a, #1a1a1a); border-left: 2px solid #fff; border-right: 2px solid #fff; border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } [data-theme="zaibatsu"] .navbar-brand, [data-theme="zaibatsu"] .timer-display { color: #fff !important; letter-spacing: 0.15em; text-transform: uppercase; } [data-theme="zaibatsu"] .avatar-circle { background: #fff; color: #000; } [data-theme="zaibatsu"] .btn-primary { background: transparent; border: 1px solid #fff; color: #fff; } [data-theme="zaibatsu"] .btn-primary:hover { background: #fff; color: #000; } /* ── 10. Cyber-Deck Uplink ────────────────────────────────── */ :root[data-theme="cyberdeck"] { --color-bg: #12001c; --color-surface: #1a0028; --color-navbar: #0a0014; --color-primary: #ff5e00; --color-primary-dark: #cc4a00; --color-primary-light: #ff8844; --color-text: #ff9966; --color-text-muted: #aa6633; --color-text-light: #774422; --color-border: rgba(255, 94, 0, 0.25); --color-success: #00ff88; --color-danger: #ff0055; --color-warning: #ff9900; --color-info: #9d00ff; --theme-glow: rgba(255, 94, 0, 0.3); } /* Dot matrix background */ [data-theme="cyberdeck"] body::before { content: ''; position: fixed; inset: 0; background-image: radial-gradient(#9d00ff 1.5px, transparent 1.5px); background-size: 24px 24px; opacity: 0.1; pointer-events: none; z-index: -1; } [data-theme="cyberdeck"] .navbar { border-bottom: 2px solid #9d00ff; box-shadow: 0 0 15px rgba(157, 0, 255, 0.2); } [data-theme="cyberdeck"] .card { border: 1px solid rgba(157, 0, 255, 0.3); } [data-theme="cyberdeck"] .navbar-brand, [data-theme="cyberdeck"] .timer-display { color: #ff5e00 !important; text-shadow: 2px 2px 0 #9d00ff, 0 0 15px rgba(255, 94, 0, 0.5); } [data-theme="cyberdeck"] .avatar-circle { background: #9d00ff; box-shadow: 0 0 10px #9d00ff; } [data-theme="cyberdeck"] .btn-primary { background: rgba(157, 0, 255, 0.2); border: 1px solid #ff5e00; color: #ff5e00; } [data-theme="cyberdeck"] .btn-primary:hover { background: #ff5e00; color: #000; } /* ── Shared dark theme table/form overrides ───────────────── */ [data-theme]:not([data-theme="default"]) .table { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(255, 255, 255, 0.03); --bs-table-hover-bg: rgba(255, 255, 255, 0.05); --bs-table-color: var(--color-text); --bs-table-border-color: var(--color-border); color: var(--color-text); background-color: transparent; } [data-theme]:not([data-theme="default"]) .table th { color: var(--color-text-muted); border-bottom-color: var(--color-border); background-color: transparent; } [data-theme]:not([data-theme="default"]) .table td { border-color: var(--color-border); color: var(--color-text); background-color: transparent; } [data-theme]:not([data-theme="default"]) .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.05); --bs-table-hover-bg: rgba(255, 255, 255, 0.05); } [data-theme]:not([data-theme="default"]) .table-responsive { background-color: transparent; } [data-theme]:not([data-theme="default"]) .form-control, [data-theme]:not([data-theme="default"]) .form-select { background-color: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } [data-theme]:not([data-theme="default"]) .form-control:focus, [data-theme]:not([data-theme="default"]) .form-select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--theme-glow); background-color: var(--color-surface); color: var(--color-text); } [data-theme]:not([data-theme="default"]) .dropdown-menu { background-color: var(--color-surface); border-color: var(--color-border); } [data-theme]:not([data-theme="default"]) .dropdown-item { color: var(--color-text); } [data-theme]:not([data-theme="default"]) .dropdown-item:hover { background-color: rgba(255, 255, 255, 0.05); } [data-theme]:not([data-theme="default"]) .modal-content { background-color: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); } [data-theme]:not([data-theme="default"]) .alert-success { background: rgba(0, 255, 100, 0.1); color: var(--color-success); border: 1px solid var(--color-success); } [data-theme]:not([data-theme="default"]) .alert-danger { background: rgba(255, 0, 60, 0.1); color: var(--color-danger); border: 1px solid var(--color-danger); } /* Version label in themed mode */ [data-theme]:not([data-theme="default"]) .version-label { color: var(--color-primary); opacity: 0.6; } /* ── Text contrast fixes ──────────────────────────────────── */ [data-theme]:not([data-theme="default"]) .page-header h2 { color: var(--color-text); } [data-theme]:not([data-theme="default"]) .card-title { color: var(--color-text); } [data-theme]:not([data-theme="default"]) h6, [data-theme]:not([data-theme="default"]) h5, [data-theme]:not([data-theme="default"]) h4, [data-theme]:not([data-theme="default"]) h3 { color: var(--color-text); } [data-theme]:not([data-theme="default"]) .form-label { color: var(--color-text); } [data-theme]:not([data-theme="default"]) .form-check-label { color: var(--color-text); } [data-theme]:not([data-theme="default"]) .text-dark { color: var(--color-text) !important; } [data-theme]:not([data-theme="default"]) .text-muted { color: var(--color-text-muted) !important; } [data-theme]:not([data-theme="default"]) a.text-decoration-none.text-dark { color: var(--color-text) !important; } [data-theme]:not([data-theme="default"]) .summary-card h6 { color: var(--color-text-muted); } [data-theme]:not([data-theme="default"]) .btn-secondary { background-color: rgba(255, 255, 255, 0.1); border-color: var(--color-border); color: var(--color-text); } [data-theme]:not([data-theme="default"]) .btn-secondary:hover { background-color: rgba(255, 255, 255, 0.2); color: var(--color-text); } [data-theme]:not([data-theme="default"]) .btn-outline-primary { border-color: var(--color-primary); color: var(--color-primary); } [data-theme]:not([data-theme="default"]) .btn-outline-primary:hover { background-color: var(--color-primary); color: #000; } [data-theme]:not([data-theme="default"]) .btn-outline-secondary { border-color: var(--color-border); color: var(--color-text-muted); } [data-theme]:not([data-theme="default"]) .btn-outline-danger { border-color: var(--color-danger); color: var(--color-danger); } [data-theme]:not([data-theme="default"]) .btn-outline-success { border-color: var(--color-success); color: var(--color-success); } [data-theme]:not([data-theme="default"]) .btn-outline-warning { border-color: var(--color-warning); color: var(--color-warning); } [data-theme]:not([data-theme="default"]) .btn-outline-info { border-color: var(--color-info); color: var(--color-info); } /* ── Badge / Status overrides for dark themes ─────────────── */ /* Use outline style instead of filled backgrounds for readability */ [data-theme]:not([data-theme="default"]) .badge.bg-success { background: transparent !important; border: 1px solid var(--color-success); color: var(--color-success); } [data-theme]:not([data-theme="default"]) .badge.bg-warning { background: transparent !important; border: 1px solid var(--color-warning); color: var(--color-warning); } [data-theme]:not([data-theme="default"]) .badge.bg-danger { background: transparent !important; border: 1px solid var(--color-danger); color: var(--color-danger); } [data-theme]:not([data-theme="default"]) .badge.bg-primary { background: transparent !important; border: 1px solid var(--color-primary); color: var(--color-primary); } [data-theme]:not([data-theme="default"]) .badge.bg-secondary { background: transparent !important; border: 1px solid var(--color-text-muted); color: var(--color-text-muted); } [data-theme]:not([data-theme="default"]) .badge.bg-info { background: transparent !important; border: 1px solid var(--color-info); color: var(--color-info); } /* Custom status badges */ [data-theme]:not([data-theme="default"]) .badge-active, [data-theme]:not([data-theme="default"]) .badge-paid { background: transparent !important; border: 1px solid var(--color-success); color: var(--color-success); } [data-theme]:not([data-theme="default"]) .badge-inactive, [data-theme]:not([data-theme="default"]) .badge-draft { background: transparent !important; border: 1px solid var(--color-text-muted); color: var(--color-text-muted); } [data-theme]:not([data-theme="default"]) .badge-open, [data-theme]:not([data-theme="default"]) .badge-sent { background: transparent !important; border: 1px solid var(--color-info); color: var(--color-info); } [data-theme]:not([data-theme="default"]) .badge-processed { background: transparent !important; border: 1px solid var(--color-warning); color: var(--color-warning); } /* ── Card body text / strong / paragraph contrast ─────────── */ [data-theme]:not([data-theme="default"]) .card-body { color: var(--color-text); } [data-theme]:not([data-theme="default"]) .card-body p, [data-theme]:not([data-theme="default"]) .card-body span, [data-theme]:not([data-theme="default"]) .card-body strong, [data-theme]:not([data-theme="default"]) .card-body label, [data-theme]:not([data-theme="default"]) .card-body small, [data-theme]:not([data-theme="default"]) .card-body del { color: inherit; } [data-theme]:not([data-theme="default"]) .border-bottom { border-color: var(--color-border) !important; } [data-theme]:not([data-theme="default"]) .fst-italic.text-muted { color: var(--color-text-muted) !important; } /* ── Nav link contrast ────────────────────────────────────── */ [data-theme]:not([data-theme="default"]) .navbar-nav .dropdown-toggle { color: #b0b0cc; } [data-theme]:not([data-theme="default"]) .navbar-nav .dropdown-toggle:hover, [data-theme]:not([data-theme="default"]) .navbar-nav .dropdown-toggle.active { color: #ffffff; } /* ── Alert contrast ───────────────────────────────────────── */ [data-theme]:not([data-theme="default"]) .alert-warning { background: rgba(255, 200, 0, 0.1); color: var(--color-warning); border: 1px solid var(--color-warning); } [data-theme]:not([data-theme="default"]) .alert-info { background: rgba(0, 150, 255, 0.1); color: var(--color-info); border: 1px solid var(--color-info); } [data-theme]:not([data-theme="default"]) .btn-close { filter: invert(1); } /* ── Filter bar labels ────────────────────────────────────── */ [data-theme]:not([data-theme="default"]) .filter-bar .form-label { color: var(--color-text-muted); } /* ── Sort header links in tables ──────────────────────────── */ [data-theme]:not([data-theme="default"]) .table th a.text-dark, [data-theme]:not([data-theme="default"]) .table th a { color: var(--color-text-muted) !important; } [data-theme]:not([data-theme="default"]) .table th a:hover { color: var(--color-text) !important; } /* ── Toast / notification overrides ────────────────────────── */ [data-theme]:not([data-theme="default"]) .toast { background-color: var(--color-surface); border: 1px solid var(--color-primary); box-shadow: 0 0 15px var(--theme-glow); color: var(--color-text); } [data-theme]:not([data-theme="default"]) .toast-header { background-color: var(--color-surface); border-bottom-color: var(--color-border); color: var(--color-text); } [data-theme]:not([data-theme="default"]) .toast-body { color: var(--color-text); } /* ── Footer theme overrides ───────────────────────────────── */ [data-theme]:not([data-theme="default"]) .site-footer { background: var(--color-surface); border-top-color: var(--color-border); } [data-theme]:not([data-theme="default"]) .footer-heading { color: var(--color-text); } [data-theme]:not([data-theme="default"]) .footer-text { color: var(--color-text-muted); } [data-theme]:not([data-theme="default"]) .footer-links a { color: var(--color-text-muted); } [data-theme]:not([data-theme="default"]) .footer-links a:hover { color: var(--color-primary); } [data-theme]:not([data-theme="default"]) .footer-social a { color: var(--color-text-muted); } [data-theme]:not([data-theme="default"]) .footer-social a:hover { color: var(--color-primary); } [data-theme]:not([data-theme="default"]) .footer-bottom { border-top-color: var(--color-border); color: var(--color-text-light); }