/* Site-wide dark mode overrides for public (job seeker) and student pages. Toggled via [data-theme="dark"] on , set by the toggle button in _jobheader.cshtml. Employer and Admin dashboards already ship their own separate dark theme systems. */ /* Light-mode values, documented here for reference even though the original site CSS predates this variable system and mostly hardcodes its own light colors directly -- rewriting every existing light-mode rule across 30+ CSS files to consume these instead was judged out of scope (see project notes: avoid re-deriving hundreds of already-working rules). New dark-mode work should still prefer these names going forward. */ :root { --bg-primary: #ffffff; --bg-secondary: #f8fafc; --bg-card: #ffffff; --bg-header: #ffffff; --text-primary: #1e293b; --text-secondary: #64748b; --border-color: #e2e8f0; --primary-color: #2563eb; --hover-bg: #eff6ff; --shadow-color: rgba(0, 0, 0, .08); } html[data-theme="dark"] { --bg-primary: #0f172a; --bg-secondary: #111827; --bg-card: #1e293b; --bg-header: #111827; --hover-bg: #1e3a5f; --text-primary: #f8fafc; --text-secondary: #cbd5e1; --border-color: #334155; --primary-color: #60a5fa; --shadow-color: rgba(0, 0, 0, .35); } /* Base */ html[data-theme="dark"] body { background-color: var(--bg-primary) !important; color: var(--text-primary) !important; } html[data-theme="dark"] a { color: var(--primary-color); } html[data-theme="dark"] a:hover, html[data-theme="dark"] a:active, html[data-theme="dark"] a:focus { color: #93c5fd; } /* Headings/paragraphs/plain text default to the ambient dark-mode text color even when the page's own CSS set an explicit dark color for them -- but spans are left alone since those are most often badge/accent text paired with their own (still-valid) background color. */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6, html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] label, html[data-theme="dark"] td, html[data-theme="dark"] th { color: inherit !important; } html[data-theme="dark"] hr { border-color: var(--border-color); } /* Google AdSense slots () render inside a cross-origin iframe that Google controls -- this site's CSS cannot reach into that iframe to recolor the ad creative itself, so a filled ad can still show its own white background regardless of theme. What we CAN do is frame the ad in a dark card so it reads as an intentional "ad" panel instead of a stray white gap in the page, and keep the reserved space itself from being stark white while no ad has filled it yet. :has() is supported in all current evergreen browsers; older browsers just skip this rule and see the ad without a frame, exactly as before this change. */ html[data-theme="dark"] div:has(> ins.adsbygoogle) { background-color: var(--bg-card) !important; border: 1px solid var(--border-color); border-radius: 12px; padding: 10px; margin: 16px auto; overflow: hidden; } /* Generic Bootstrap surfaces used throughout individual views */ html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light, html[data-theme="dark"] .card, html[data-theme="dark"] .list-group-item, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .img-thumbnail, html[data-theme="dark"] .panel, html[data-theme="dark"] .panel-body, html[data-theme="dark"] .well, html[data-theme="dark"] [style*="background-color: #fff"], html[data-theme="dark"] [style*="background-color:#fff"], html[data-theme="dark"] [style*="background-color: #ffffff"], html[data-theme="dark"] [style*="background: #fff"], html[data-theme="dark"] [style*="background:#fff"], html[data-theme="dark"] [style*="background-color: white"] { background-color: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } html[data-theme="dark"] .text-dark, html[data-theme="dark"] .text-muted, html[data-theme="dark"] .text-secondary { color: var(--text-secondary) !important; } html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom, html[data-theme="dark"] .border-left, html[data-theme="dark"] .border-right { border-color: var(--border-color) !important; } /* Forms */ html[data-theme="dark"] .form-control, html[data-theme="dark"] input:not([type="submit"]):not([type="button"]), html[data-theme="dark"] textarea, html[data-theme="dark"] select { background-color: var(--bg-secondary) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } html[data-theme="dark"] .form-control::placeholder { color: var(--text-secondary); } html[data-theme="dark"] .input-group-text { background-color: var(--hover-bg) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } /* Tables */ html[data-theme="dark"] table, html[data-theme="dark"] .table { color: var(--text-primary) !important; } html[data-theme="dark"] .table td, html[data-theme="dark"] .table th { border-color: var(--border-color) !important; } html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: var(--hover-bg) !important; } /* Not theme-specific -- applies in both light and dark mode. Several tables on this site (e.g. the job-details "Age Limits / Examination Fee" table) are plain elements with no .table-responsive wrapper, so on a narrow screen they either overflow the viewport or squash their columns unreadably. Making the table itself the horizontal scroll container fixes that without needing to wrap every table in markup across every view. */ @media (max-width: 767px) { table:not(.dataTable) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* Pre-existing layout bug (not dark-mode-specific, so fixed unconditionally): when Request.Browser.IsMobileDevice renders the mobile-device branch of _jobheader.cshtml, the wide/tablet nav (