/* sh-theme.css — Support Human Career Suite * Shared dark-mode variable overrides + theme toggle styling. * Link in AFTER the tool's own stylesheet. */ /* ── DARK MODE: Variable overrides ────────────────────────────────── */ :root { --surface: #ffffff; } html[data-theme="dark"] { --surface: #2a2840; --cream: #242236; --ink: #e8e6f0; --bg: #1a1826; --blue: #7ab3ff; --blue-light: #1a2840; --salmon: #f0a090; --salmon-light: #3a2420; --pink: #d890d0; --pink-light: #301830; --peach: #d4a878; --peach-light: #3a2818; --hotpink: #ff6aa0; --hotpink-light: #3a1828; --purple: #b466bc; --purple-light: #2d1f3a; --red: #e05545; --red-light: #3a1a18; --yellow: #d4a030; --yellow-light: #3a2e10; --stop: #c84040; --stop-light: #3a1a18; --muted: #908ca6; --border: #3a3850; --white: #242236; --green: #3ab878; --green-light: #1a3028; --teal: #40b0b0; --teal-light: #1a3030; --gold: #c4a030; --gold-light: #3a3018; --mauve: #c87098; --mauve-light: #3a1828; --rose: #c85888; --rose-light: #3a1828; --shadow: 0 2px 10px rgba(0,0,0,0.35); --shadow-hover: 0 6px 24px rgba(0,0,0,0.45); /* Job Queue column colours */ --col-research: #7ab3ff; --col-leads: #b466bc; --col-wip: #f0a090; --col-applied: #ff6aa0; --col-interview: #3ab878; --col-outcomes: #d4a030; --col-archive1: #908ca6; --col-archive2: #908ca6; color-scheme: dark; } /* ── Browser default / JS-injected background overrides ───────────── */ html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: var(--cream); color: var(--ink); } /* ── Dark body / html background ──────────────────────────────────── */ html[data-theme="dark"], html[data-theme="dark"] body { background: var(--bg); } /* Override html linear-gradient (job-queue, brag-board) */ html[data-theme="dark"] { background: var(--bg) !important; } /* ── Scrollbar ────────────────────────────────────────────────────── */ html[data-theme="dark"] .board-wrap { scrollbar-color: #4a4860 #2a2840; } html[data-theme="dark"] .board-wrap::-webkit-scrollbar-track { background: #2a2840; } html[data-theme="dark"] .board-wrap::-webkit-scrollbar-thumb { background: #4a4860; border-color: #2a2840; } html[data-theme="dark"] .board-wrap::-webkit-scrollbar-thumb:hover { background: #5a5878; } html[data-theme="dark"] body *::-webkit-scrollbar-thumb { background: #4a4860; } html[data-theme="dark"] body *::-webkit-scrollbar-thumb:hover { background: #5a5878; } /* ── Hardcoded hover / interactive states ─────────────────────────── */ html[data-theme="dark"] .btn-copy:hover, html[data-theme="dark"] .footer-note a.footer-coffee:hover, html[data-theme="dark"] .manage-board-new button:hover, html[data-theme="dark"] .btn-create-board:hover, html[data-theme="dark"] .btn-google:hover, html[data-theme="dark"] .btn-save-col:hover, html[data-theme="dark"] .btn-copy-url:hover, html[data-theme="dark"] .share-action-btn.share-download:hover, html[data-theme="dark"] .btn-move-card:hover { background: #9040a0; } html[data-theme="dark"] .btn-delete-col-cancel:hover, html[data-theme="dark"] .btn-delete-col-confirm:hover:not(:disabled) { background: #a02e22; } html[data-theme="dark"] .btn-delete-col-confirm:disabled { background: #5a3030; } /* ── Hover / zebra backgrounds ────────────────────────────────────── */ html[data-theme="dark"] .list-table th, html[data-theme="dark"] .add-card-inline, html[data-theme="dark"] .modal-move-row, html[data-theme="dark"] .modal-link-row, html[data-theme="dark"] .stat-log-section, html[data-theme="dark"] .export-share-url-input, html[data-theme="dark"] .field-display:hover { background: #2a2840; } html[data-theme="dark"] .list-table th:hover { background: #302c48; } html[data-theme="dark"] .list-table tr:hover td { background: #2a2840; } /* ── Drag-over ────────────────────────────────────────────────────── */ html[data-theme="dark"] .col-body.drag-over, html[data-theme="dark"] .card.drag-placeholder { background: #2a2050; } /* ── View toggle pill backgrounds ─────────────────────────────────── */ html[data-theme="dark"] .view-toggle { background: #2a2840; } html[data-theme="dark"] .view-toggle .view-btn:hover:not(.active) { background: rgba(255,255,255,0.08); } html[data-theme="dark"] .view-toggle .view-btn.active { background: #3a3850; box-shadow: 0 1px 4px rgba(0,0,0,0.3); } /* ── Filter shelf ─────────────────────────────────────────────────── */ html[data-theme="dark"] .filter-shelf { background: #2a2040; } html[data-theme="dark"] .review-shelf { background: #2a2040; } html[data-theme="dark"] .review-stats-section { background: #2a2840; } html[data-theme="dark"] .review-item { background: var(--cream); } /* ── Tooltip (normally dark, invert for dark mode) ────────────────── */ html[data-theme="dark"] #tooltip { background: #e8e6f0; color: #1a1535; } html[data-theme="dark"] #tooltip .tt-why { color: #2a2840; } html[data-theme="dark"] #tooltip.arrow-up::before { border-bottom-color: #e8e6f0; } html[data-theme="dark"] #tooltip.arrow-down::before { border-top-color: #e8e6f0; } /* ── Hardcoded tag text / header dark colours → lightened ─────────── */ html[data-theme="dark"] .tag-location, html[data-theme="dark"] .tag-bjb-ok, html[data-theme="dark"] .tag-research-blue, html[data-theme="dark"] .tag-feedback-clear, html[data-theme="dark"] .tag-feedback-customer, html[data-theme="dark"] .stat-type-count, html[data-theme="dark"] .modal-link-chip, html[data-theme="dark"] .deadlines-soon, html[data-theme="dark"] .col-research .col-header, html[data-theme="dark"] .col-feedback .col-header, html[data-theme="dark"] .tg-location .tag-group-header, html[data-theme="dark"] .tg-location.open .tag-group-header, html[data-theme="dark"] .tg-companyType .tag-group-header, html[data-theme="dark"] .tg-companyType.open .tag-group-header, html[data-theme="dark"] #tg-feedbackType .tag-group-header, html[data-theme="dark"] #tg-feedbackType.open .tag-group-header { color: #90c8ff; } html[data-theme="dark"] .tag-discipline, html[data-theme="dark"] .tag-research-peach, html[data-theme="dark"] .tag-feedback-tough, html[data-theme="dark"] .tag-feedback-xfn, html[data-theme="dark"] .tag-work, html[data-theme="dark"] .tag-custom, html[data-theme="dark"] .col-wip .col-header, html[data-theme="dark"] .col-stats .col-header, html[data-theme="dark"] .tg-discipline .tag-group-header, html[data-theme="dark"] .tg-discipline.open .tag-group-header, html[data-theme="dark"] #tg-workType .tag-group-header, html[data-theme="dark"] #tg-workType.open .tag-group-header { color: #f0b8a0; } html[data-theme="dark"] .tag-level, html[data-theme="dark"] .col-applied .col-header, html[data-theme="dark"] .tg-roleLevel .tag-group-header, html[data-theme="dark"] .tg-roleLevel.open .tag-group-header, html[data-theme="dark"] .tg-workingConditions .tag-group-header, html[data-theme="dark"] .tg-workingConditions.open .tag-group-header { color: #ff90b8; } html[data-theme="dark"] .tag-source, html[data-theme="dark"] .tg-source .tag-group-header, html[data-theme="dark"] .tg-source.open .tag-group-header { color: #70b8ff; } html[data-theme="dark"] .tag-research-teal, html[data-theme="dark"] .tg-benefits .tag-group-header, html[data-theme="dark"] .tg-benefits.open .tag-group-header { color: #60c8c8; } html[data-theme="dark"] .tg-perks .tag-group-header, html[data-theme="dark"] .tg-perks.open .tag-group-header, html[data-theme="dark"] .tg-custom .tag-group-header, html[data-theme="dark"] .tg-custom.open .tag-group-header, html[data-theme="dark"] .tag-feedback-partner { color: #d0a060; } html[data-theme="dark"] .verdict-badge.neutral, html[data-theme="dark"] .verdict-pill.neutral, html[data-theme="dark"] .verdict.orange { color: #d4a060; } html[data-theme="dark"] .verdict.orange { background: #3a2818; } /* ── Hardcoded -light backgrounds used on tags ────────────────────── */ html[data-theme="dark"] .tag-level, html[data-theme="dark"] .col-applied .col-header, html[data-theme="dark"] .tg-roleLevel .tag-group-header, html[data-theme="dark"] .tg-roleLevel.open .tag-group-header, html[data-theme="dark"] .tg-workingConditions .tag-group-header, html[data-theme="dark"] .tg-workingConditions.open .tag-group-header { background: var(--hotpink-light); } html[data-theme="dark"] .tag-source, html[data-theme="dark"] .tg-source .tag-group-header, html[data-theme="dark"] .tg-source.open .tag-group-header { background: #1a2a40; } html[data-theme="dark"] .tag-research-teal, html[data-theme="dark"] .tg-benefits .tag-group-header, html[data-theme="dark"] .tg-benefits.open .tag-group-header { background: var(--teal-light); } html[data-theme="dark"] .tag-outcome-notconsidered, html[data-theme="dark"] .tag-outcome-noanswer, html[data-theme="dark"] .col-archive-ap .col-header { background: #2a2a38; color: var(--muted); } html[data-theme="dark"] .tag-outcome-ghosted { background: #2d1f3a; color: #c080d0; } /* ── Archive column (hardcoded #c0bdd0 / #f0f0f4) ────────────────── */ html[data-theme="dark"] .col-archive-ap { border-color: #4a4860; } html[data-theme="dark"] .col-archive-ap .col-header { border-bottom-color: #4a4860; } /* ── Custom column ────────────────────────────────────────────────── */ html[data-theme="dark"] .col-custom .col-header { background: #252540; color: #8080d0; } html[data-theme="dark"] .col-custom { border-color: #6060a0; } html[data-theme="dark"] .stat-type-number { background: #252540; color: #8080d0; } /* ── Impact badges ────────────────────────────────────────────────── */ html[data-theme="dark"] .impact-high, html[data-theme="dark"] .impact-btn.selected.imp-high { background: #3a1a18; color: #e87060; border-color: #e87060; } html[data-theme="dark"] .impact-medium, html[data-theme="dark"] .impact-btn.selected.imp-medium { background: #3a3018; color: #d4a040; border-color: #d4a040; } html[data-theme="dark"] .impact-low, html[data-theme="dark"] .impact-btn.selected.imp-low { background: #1a3020; color: #50b870; border-color: #50b870; } /* ── Deadline item hardcoded backgrounds ──────────────────────────── */ html[data-theme="dark"] .deadline-item.overdue, html[data-theme="dark"] .deadline-item.deadline-overdue { border-color: #6a3030; background: #2a1818; } html[data-theme="dark"] .deadline-item.today, html[data-theme="dark"] .deadline-item.deadline-today { border-color: var(--purple); background: #2a2040; } html[data-theme="dark"] .deadline-item.soon, html[data-theme="dark"] .deadline-item.deadline-soon { border-color: #6a5020; background: #2a2818; } html[data-theme="dark"] .deadlines-later { background: #2a2840; } /* ── Stat cards ───────────────────────────────────────────────────── */ html[data-theme="dark"] .stat-card { background: var(--cream); } html[data-theme="dark"] .stats-section { background: var(--cream); } /* ── Compare section headers (keep bold colour) ───────────────────── */ html[data-theme="dark"] .compare-note-label.label-b { color: #50c090; } html[data-theme="dark"] .compare-note-label.label-c { color: #d4a050; } /* ── Table row hover (tracker) ────────────────────────────────────── */ html[data-theme="dark"] tbody tr:hover { background: #2a2840; } html[data-theme="dark"] tbody tr.marked:hover { background: #3a2020; } html[data-theme="dark"] body.view-green tbody tr.marked:hover { background: #203828; } /* ── Job-switcher / board-switcher hover ──────────────────────────── */ html[data-theme="dark"] .job-switcher-btn:hover, html[data-theme="dark"] .board-switcher-btn:hover { background: #352850; } /* ── Attachment PDF ───────────────────────────────────────────────── */ html[data-theme="dark"] .attachment-pdf { background: #2a2840; } html[data-theme="dark"] .share-image-preview { background: #2a2840; } /* ── Claude option border ─────────────────────────────────────────── */ html[data-theme="dark"] .claude-option { border-color: #4a3060; } html[data-theme="dark"] .claude-prompt-btn { border-color: rgba(180,102,188,0.3); } /* ── Link chip hover ──────────────────────────────────────────────── */ html[data-theme="dark"] .modal-link-chip:hover { background: #253050; } /* ── Timeline ─────────────────────────────────────────────────────── */ html[data-theme="dark"] .timeline-card { background: var(--cream); } html[data-theme="dark"] .timeline-dot { border-color: var(--cream); } /* ── Auth UI hardcoded whites (injected by sh-auth-ui.js) ─────────── */ html[data-theme="dark"] .btn-auth:not(.signin), html[data-theme="dark"] .btn-magic { background: var(--cream); } html[data-theme="dark"] .auth-modal { background: var(--cream); } html[data-theme="dark"] .auth-modal-backdrop { background: rgba(0,0,0,0.55); } /* ── Free space (BJB) ─────────────────────────────────────────────── */ html[data-theme="dark"] .bingo-cell.free-space { background: #4a2828; border-color: #8a4040; } html[data-theme="dark"] body.mode-green .bingo-cell.free-space { background: #1a4030; border-color: var(--green); } /* ── Edit hint ────────────────────────────────────────────────────── */ html[data-theme="dark"] .edit-hint { color: var(--purple); } /* ── Checklist items ──────────────────────────────────────────────── */ html[data-theme="dark"] .checklist-item { background: var(--cream); } /* ── Tool card hover shadow (index) ───────────────────────────────── */ html[data-theme="dark"] .tool-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.4); } /* ── Index page — hardcoded dark text ──────────────────────────────── */ html[data-theme="dark"] .detail-section p { color: var(--ink); } html[data-theme="dark"] .vpill.orange { color: #d09060; } html[data-theme="dark"] .vpill.stop { background: var(--stop-light); color: var(--stop); } html[data-theme="dark"] .support-banner-btn:hover, html[data-theme="dark"] .detail-launch-btn:hover { background: #9040a0; box-shadow: 0 6px 20px rgba(0,0,0,0.4); } /* ── Offer view (Job Queue) ────────────────────────────────────────── */ html[data-theme="dark"] .offer-shelf { background: #2a2040; } html[data-theme="dark"] .offers-compare-table th { background: #2a2840; } html[data-theme="dark"] .offers-compare-table td.best-val { background: #1a3028; } html[data-theme="dark"] .ofm-prefix { background: #2a2840; } html[data-theme="dark"] .ofm-badge-declined { background: #2a2a38; color: var(--muted); } html[data-theme="dark"] .offer-deadline-urgent { background: #3a1a18; } html[data-theme="dark"] .offer-deadline-soon { background: #3a3018; color: #d4a040; } html[data-theme="dark"] .offer-deadline-expired { background: #2a2a38; color: var(--muted); } html[data-theme="dark"] .pipeline-offer-dismiss:hover { background: #3a1a18; } /* ── Board desc strip ─────────────────────────────────────────────── */ html[data-theme="dark"] #boardDescStrip { background: var(--purple-light); } /* ══════════════════════════════════════════════════════════════════════ THEME TOGGLE (in footer) ══════════════════════════════════════════════════════════════════════ */ .theme-toggle { display: inline-flex; gap: 2px; background: var(--border); border-radius: 20px; padding: 3px; } .theme-toggle button { font-size: 13px; line-height: 1; padding: 4px 10px; border: none; border-radius: 20px; background: transparent; cursor: pointer; transition: background 0.15s, box-shadow 0.15s; color: var(--muted); } .theme-toggle button:hover { background: rgba(255,255,255,0.3); } .theme-toggle button.active { background: var(--cream); box-shadow: 0 1px 3px rgba(0,0,0,0.15); }