/* ========================================================================== DocketDash — DARK THEME Activated by data-theme="dark" on . ========================================================================== */ /* 1. TOKENS */ :root[data-theme="dark"] { --color-primary: #ff6830; --color-primary-dark: #ff8044; --color-primary-xdark: #e55520; --color-bg-app: #0b1220; --color-bg-light: #0e1729; --color-bg-white: #131d33; --color-bg-elevated: #1a2742; --color-bg-mint: #14323a; --color-text-dark: #dce5f5; --color-text-display: #aebfe8; --color-text-mint-dark: #7fd8d0; --color-text-muted: #8b97ae; --color-border: #28344e; --color-border-row: #1f2b44; --color-success: #2fbf6e; --color-success-dark: #34d27b; --color-danger: #ff6b6b; --color-row-hover: #18233c; --color-link: #54c8da; --shadow-card: 0 1px 3px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.35); } /* Empty state image swap */ .empty-state-dark { display: none; } [data-theme="dark"] .empty-state-light { display: none; } [data-theme="dark"] .empty-state-dark { display: block; } /* 2. BASE / PAGE */ [data-theme="dark"] body { background-color: var(--color-bg-app); color: var(--color-text-dark); } [data-theme="dark"] body[style] { background-color: var(--color-bg-app) !important; } [data-theme="dark"] .login-box[style] { background-color: var(--color-bg-white) !important; box-shadow: var(--shadow-card) !important; } [data-theme="dark"] .subtitle-separator { color: rgba(255,255,255,.30); } [data-theme="dark"] a { color: var(--color-link); } [data-theme="dark"] a:hover { color: #7adcec; } [data-theme="dark"] h1 { color: var(--color-text-display); } [data-theme="dark"] h4 { color: var(--color-text-muted); } /* 3. SEARCH / FORM CARD + LOGIN CARD */ [data-theme="dark"] .form-container { background-color: var(--color-bg-white); box-shadow: var(--shadow-card); } [data-theme="dark"] .form-group label { color: var(--color-text-display); } [data-theme="dark"] .form-actions input[type="url"], [data-theme="dark"] .login-box input[type="password"], [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="url"] { background-color: var(--color-bg-light); border: 1px solid var(--color-border); color: var(--color-text-dark); } [data-theme="dark"] input::placeholder { color: var(--color-text-muted); } [data-theme="dark"] input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(255,104,48,.25); } /* 4. BUTTONS */ /* Primary action buttons only (Fetch Data, Sign in) */ [data-theme="dark"] .form-actions button, [data-theme="dark"] #loginForm button[type="submit"] { background: var(--color-primary); color: #1a0e06; } [data-theme="dark"] .form-actions button:hover, [data-theme="dark"] #loginForm button[type="submit"]:hover { background: var(--color-primary-dark); } [data-theme="dark"] button:disabled { background: #2a3550; color: #6b7794; cursor: not-allowed; } [data-theme="dark"] .clear-btn { background: transparent; color: var(--color-text-dark); border: 1px solid transparent; } [data-theme="dark"] .clear-btn:hover { color: #ff8a8a; border-color: #6e2a2a; background-color: rgba(255,107,107,.08); } [data-theme="dark"] .export-btn { background-color: transparent; color: var(--color-success-dark); border: 1px solid var(--color-success-dark); } [data-theme="dark"] .export-btn:hover { background-color: rgba(52,210,123,.20); box-shadow: 0 2px 4px rgba(52,210,123,.20); } [data-theme="dark"] .test-btn { background-color: var(--color-bg-mint); color: var(--color-text-mint-dark); border: 1px solid var(--color-text-mint-dark); } [data-theme="dark"] .test-btn:hover { background-color: var(--color-text-mint-dark); color: #0b1220; } [data-theme="dark"] .signout-btn { background: transparent; color: var(--color-text-muted); border: none; } [data-theme="dark"] .signout-btn:hover { background: rgba(255,255,255,.06); color: var(--color-text-dark); } [data-theme="dark"] .theme-toggle { background: none; border: none; } [data-theme="dark"] .theme-toggle:hover { background: none; } [data-theme="dark"] .delete-row-btn { background: transparent; color: #5a6a8a; border: none; } [data-theme="dark"] .delete-row-btn:hover { background: rgba(255,107,107,.10); color: #ff8a8a; } /* 5. RESULTS TABLE */ [data-theme="dark"] th { background-color: var(--color-bg-mint); color: var(--color-text-mint-dark); border-right-color: var(--color-bg-app); } [data-theme="dark"] th:last-child { border-right: none; } [data-theme="dark"] td { border-bottom: 1px solid var(--color-border-row); } [data-theme="dark"] tr:hover { background-color: var(--color-row-hover); } [data-theme="dark"] .sort-btn { color: var(--color-text-mint-dark); } [data-theme="dark"] .sort-btn:hover { background-color: #244047; color: #bff3ee; } [data-theme="dark"] .sort-btn.active-sort, [data-theme="dark"] .sort-btn.active-sort:hover { background-color: #2f6a6a; color: #eafffb; } /* 6. SEVERITY CHIPS */ [data-theme="dark"] .offense-degrees li { background-color: #232c40; border: 1px solid #3a4762; color: var(--color-text-dark); } [data-theme="dark"] .offense-degrees li.felony { background-color: rgba(255,92,92,.14); border-color: rgba(255,92,92,.42); color: #ff9b9b; } [data-theme="dark"] .offense-degrees li.misdemeanor { background-color: rgba(245,170,70,.14); border-color: rgba(245,170,70,.42); color: #f6c178; } [data-theme="dark"] .offense-degrees li.infraction { background-color: rgba(205,185,105,.13); border-color: rgba(205,185,105,.38); color: #d4c48a; } /* 7. STATUS / LOADING OVERLAY */ [data-theme="dark"] #status { background-color: rgba(19,29,51,.72); box-shadow: 0 0 20px rgba(0,0,0,.5); color: var(--color-text-dark); } [data-theme="dark"] .loading { color: var(--color-text-muted); } [data-theme="dark"] .found { color: var(--color-success); } [data-theme="dark"] .not-found { color: var(--color-danger); } [data-theme="dark"] .text-green-600 { color: var(--color-success) !important; } [data-theme="dark"] .text-red-600 { color: var(--color-danger) !important; } /* 8. NEWER COMPONENTS */ [data-theme="dark"] .summary-cards .card { background-color: var(--color-bg-white); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); } [data-theme="dark"] .summary-cards .card-number { color: var(--color-text-display); } [data-theme="dark"] .summary-cards .card-label { color: var(--color-text-muted); } [data-theme="dark"] .summary-cards .card-icon { background-color: #14323a; border-color: #1f4a52; } /* Table container — transparent, no white background */ [data-theme="dark"] .table-container { background-color: transparent !important; border-color: var(--color-border); } /* Degree badges in table rows */ [data-theme="dark"] .degree-badge { background-color: #232c40; border-color: #3a4762; color: var(--color-text-dark); } [data-theme="dark"] .degree-badge.felony { background-color: rgba(255,92,92,.14); border-color: rgba(255,92,92,.42); color: #ff9b9b; } [data-theme="dark"] .degree-badge.misdemeanor { background-color: rgba(245,170,70,.14); border-color: rgba(245,170,70,.42); color: #f6c178; } [data-theme="dark"] .degree-badge.infraction { background-color: rgba(205,185,105,.13); border-color: rgba(205,185,105,.38); color: #d4c48a; } /* Feedback bar (inline styles need !important override) */ [data-theme="dark"] #feedbackBar[style] { background-color: #2e2a16 !important; border-color: #5c5326 !important; color: #e8d98a !important; } [data-theme="dark"] #feedbackBar a { color: #e8d98a !important; text-decoration: underline !important; } [data-theme="dark"] #feedbackBar a:hover { text-decoration: none !important; } [data-theme="dark"] .beta-badge { background-color: #1f9d55; color: #eafff2; } [data-theme="dark"] .records-label { color: var(--color-text-muted); } /* 10. CHANGE INDICATORS + CHECK STATUS */ [data-theme="dark"] .change-dot { color: #d4911a; } [data-theme="dark"] .val-previous { color: var(--color-text-muted); } [data-theme="dark"] .changes-banner { background-color: rgba(212,145,26,.10); border-color: rgba(212,145,26,.30); color: #e8c87a; } [data-theme="dark"] .changes-banner-dismiss { color: #e8c87a; } [data-theme="dark"] .changes-banner-dismiss:hover { background: transparent; } [data-theme="dark"] .up-to-date-toast { background-color: rgba(47,191,110,.12); border-color: rgba(47,191,110,.30); color: var(--color-success); } [data-theme="dark"] .check-status { color: var(--color-text-muted); } [data-theme="dark"] .check-now-btn { color: var(--color-text-muted); border-color: var(--color-border); background: transparent; } [data-theme="dark"] .check-now-btn:hover { color: var(--color-text-dark); border-color: #4a5878; background: transparent; } [data-theme="dark"] .check-now-btn:disabled { background: transparent; } /* 11. THEME TOGGLE */ .theme-toggle { --tt-w: 56px; --tt-h: 30px; --tt-pad: 3px; position: relative; display: inline-flex; align-items: center; gap: 8px; background: none; border: none; padding: 0; margin: 0; cursor: pointer; } .theme-toggle .tt-track { width: var(--tt-w); height: var(--tt-h); border-radius: 999px; background: #c9d6e6; transition: background .2s ease; position: relative; flex: none; } .theme-toggle .tt-knob { position: absolute; top: var(--tt-pad); left: var(--tt-pad); width: calc(var(--tt-h) - var(--tt-pad)*2); height: calc(var(--tt-h) - var(--tt-pad)*2); border-radius: 50%; background: #ffffff; display: grid; place-items: center; color: #c9952a; transition: transform .22s cubic-bezier(.4,.1,.3,1.3), background .2s, color .2s; box-shadow: 0 1px 2px rgba(0,0,0,.25); } .theme-toggle .tt-knob svg { width: 15px; height: 15px; display: block; } .theme-toggle .tt-knob .tt-icon-moon { display: none; } .theme-toggle:hover { background: none; } [data-theme="dark"] .theme-toggle .tt-track { background: #243456; } [data-theme="dark"] .theme-toggle .tt-knob { transform: translateX(calc(var(--tt-w) - var(--tt-h))); background: #ff6830; color: #1a0e06; } [data-theme="dark"] .theme-toggle .tt-icon-sun { display: none; } [data-theme="dark"] .theme-toggle .tt-icon-moon { display: block; }