/* Vidyavan - dark ("night") mode.
   EVERY rule here is scoped to html[data-theme="dark"], so the normal light
   design is completely untouched. The theme is switched by assets/js/theme.js
   (header toggle; choice remembered per device; default = light). */

html[data-theme="dark"] {
  color-scheme: dark;
  /* light-surface tokens re-pointed to night values */
  --surface-100: #0A0F1E;
  --surface-raised: #121A2E;
  --ink: #E9EDF7;
  --ink-muted: #A3ABC2;
  --border: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.24);
  --primary: #8DBBFF;
  --primary-bright: #6FA8FF;
  --danger: #FF8A80;
  --success: #5FD39A;
  --accent-teal: #3FD3B0;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -8px rgba(0,0,0,0.55);
  --shadow-float: 0 24px 60px -20px rgba(0,0,0,0.75);
}

html[data-theme="dark"] body { background: var(--surface-100); color: var(--ink); }

/* Forms (on the normal light sections only - the dark hero and the already-dark
   dashboard panels keep their own see-through input style) */
html[data-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea):not(.hero *):not(.dash-premium *) {
  background-color: #0E1528; color: var(--ink); border-color: rgba(255,255,255,0.16);
}
html[data-theme="dark"] :is(input, textarea):not(.hero *)::placeholder { color: #6E7790; }
html[data-theme="dark"] :is(input, select, textarea):disabled:not(.hero *):not(.dash-premium *) { background-color: #0B1122; color: #7C849C; }
html[data-theme="dark"] select option { color: var(--ink); background: #121A2E; }

/* Links on light (now dark) sections */
html[data-theme="dark"] a { color: #8DBBFF; }
html[data-theme="dark"] .btn, html[data-theme="dark"] .site-header a, html[data-theme="dark"] .site-footer a,
html[data-theme="dark"] .nav-links a, html[data-theme="dark"] .lp-job, html[data-theme="dark"] .lp-links a { color: inherit; }
html[data-theme="dark"] .btn-primary { color: #fff; }

/* Secondary buttons on light sections */
html[data-theme="dark"] .btn-secondary { background: transparent; color: var(--ink); border-color: rgba(255,255,255,0.24); }
html[data-theme="dark"] .btn-secondary:hover { background: rgba(255,255,255,0.06); }

/* Status messages */
html[data-theme="dark"] .flash-error { background: rgba(196,69,61,0.16); color: #FFB4AD; border-color: rgba(196,69,61,0.45); }
html[data-theme="dark"] .flash-success { background: rgba(30,122,76,0.18); color: #9EE6BF; border-color: rgba(30,122,76,0.45); }

/* Badges */
html[data-theme="dark"] .badge-pending, html[data-theme="dark"] .badge-open { background: rgba(217,147,47,0.18); color: #F5C77E; }
html[data-theme="dark"] .badge-approved, html[data-theme="dark"] .badge-hired, html[data-theme="dark"] .badge-shortlisted { background: rgba(30,122,76,0.22); color: #8FE0B5; }
html[data-theme="dark"] .badge-rejected { background: rgba(196,69,61,0.2); color: #FFB0A8; }
html[data-theme="dark"] .badge-submitted, html[data-theme="dark"] .badge-reviewed, html[data-theme="dark"] .badge-role { background: rgba(59,125,216,0.2); color: #A9CBFF; }
html[data-theme="dark"] .badge-withdrawn, html[data-theme="dark"] .badge-dismissed { background: rgba(255,255,255,0.08); color: #B9C0D2; }
html[data-theme="dark"] .badge-interview { background: rgba(124,92,214,0.22); color: #C9B6FF; }

/* Profile-strength tips */
html[data-theme="dark"] .tip-high { background: rgba(196,69,61,0.2); color: #FFB0A8; }
html[data-theme="dark"] .tip-med { background: rgba(217,147,47,0.18); color: #F5C77E; }
html[data-theme="dark"] .tip-low { background: rgba(59,125,216,0.2); color: #A9CBFF; }

/* Skeleton shimmer */
html[data-theme="dark"] .skeleton { background-color: rgba(255,255,255,0.06); }

/* Safety notice and generic notices on light sections */
html[data-theme="dark"] .safety-note { background: rgba(240,180,60,0.10); border-color: rgba(240,180,60,0.35); color: var(--ink); }
html[data-theme="dark"] .notice { background: rgba(255,255,255,0.04); border-color: var(--border); color: var(--ink-muted); }
html[data-theme="dark"] .notice strong { color: var(--ink); }

/* Tables */
html[data-theme="dark"] .data-table th { color: var(--ink-muted); }
html[data-theme="dark"] .data-table tr:hover td { background: rgba(255,255,255,0.03); }

/* Images that are dark-on-transparent stay readable */
html[data-theme="dark"] .company-logo, html[data-theme="dark"] .logo-preview img { background: #fff; }

/* Theme toggle button (added to the header by theme.js) */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-right: 8px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28); background: transparent; color: #F4F6FB; cursor: pointer; padding: 0; flex: none; }
.theme-toggle:hover { background: rgba(255,255,255,0.08); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .ico-sun { display: none; }
html[data-theme="dark"] .theme-toggle .ico-sun { display: block; }
html[data-theme="dark"] .theme-toggle .ico-moon { display: none; }
@media (max-width: 900px) {
  /* The login/sign-up buttons move into the menu on phones; keep only the toggle visible. */
  .site-header .nav-cta:has(.theme-toggle) { display: flex; order: 1; margin-left: auto; }
  .site-header .nav-cta:has(.theme-toggle) > :not(.theme-toggle) { display: none; }
  .theme-toggle { margin-right: 0; }
}

/* ================================================================
   DAY MODE - a true light design. The original site used dark bands
   (header, hero, footer, dashboards); in day mode those become light so
   day and night look clearly different. Scoped to html:not([data-theme="dark"])
   so night mode keeps the original dark design exactly.
   ================================================================ */
html:not([data-theme="dark"]) {
  --dark-900: #EEF3FB;
  --dark-800: #F7F9FD;
  --dark-700: #FFFFFF;
  --dark-border: rgba(14,18,32,0.10);
  --on-dark: #0E1220;
  --on-dark-muted: #4E5570;
  --gradient-text: linear-gradient(90deg, #1E4F8D 0%, #138A72 60%, #B8741C 100%);
}
html:not([data-theme="dark"]) body { background: #FFFFFF; }

/* Header */
html:not([data-theme="dark"]) .site-header { background: rgba(255,255,255,0.86); box-shadow: 0 1px 0 rgba(14,18,32,0.04), 0 6px 20px -14px rgba(14,18,32,0.18); }
html:not([data-theme="dark"]) .nav-links a:hover { background: rgba(14,18,32,0.05); }
html:not([data-theme="dark"]) .nav-links a.current,
html:not([data-theme="dark"]) .nav-cta a.current { background: rgba(30,79,141,0.10); color: #1E4F8D; }
html:not([data-theme="dark"]) .site-header .btn-secondary,
html:not([data-theme="dark"]) .btn-ghost,
html:not([data-theme="dark"]) .hero .btn-secondary { background: #fff; color: var(--ink); border-color: rgba(14,18,32,0.18); }
html:not([data-theme="dark"]) .site-header .btn-secondary:hover,
html:not([data-theme="dark"]) .btn-ghost:hover,
html:not([data-theme="dark"]) .hero .btn-secondary:hover { background: #F2F5FA; border-color: rgba(14,18,32,0.32); }
html:not([data-theme="dark"]) .nav-toggle { border-color: rgba(14,18,32,0.18); }
html:not([data-theme="dark"]) .theme-toggle { border-color: rgba(14,18,32,0.18); color: #0E1220; background: #fff; }
html:not([data-theme="dark"]) .theme-toggle:hover { background: #F2F5FA; }

/* Hero bands */
html:not([data-theme="dark"]) .hero {
  background: radial-gradient(1200px 600px at 15% -10%, rgba(59,125,216,0.16), transparent 60%),
              radial-gradient(900px 500px at 85% 10%, rgba(22,160,133,0.12), transparent 60%),
              linear-gradient(180deg, #EAF1FC 0%, #F7F9FD 100%);
}
html:not([data-theme="dark"]) .hero::before { background-image: linear-gradient(rgba(14,18,32,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(14,18,32,0.05) 1px, transparent 1px); }
html:not([data-theme="dark"]) .hero::after { opacity: .28; }
html:not([data-theme="dark"]) .hero .eyebrow,
html:not([data-theme="dark"]) .dash-premium .eyebrow.label { color: #0F7F68; }
html:not([data-theme="dark"]) .hero a:not(.btn) { color: #1E4F8D; }
html:not([data-theme="dark"]) .hero .notice { background: rgba(255,255,255,0.7); }
html:not([data-theme="dark"]) .trust-strip span::before { background: #16A085; box-shadow: 0 0 0 4px rgba(22,160,133,0.15); }
html:not([data-theme="dark"]) .hero input[type=text],
html:not([data-theme="dark"]) .hero select { background-color: #fff; border-color: rgba(14,18,32,0.18); }
html:not([data-theme="dark"]) .hero select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%230E1220' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html:not([data-theme="dark"]) .hero select:hover { background-color: #F2F5FA; }
html:not([data-theme="dark"]) .hero input[type=text]:focus,
html:not([data-theme="dark"]) .hero select:focus { border-color: #3B7DD8; box-shadow: 0 0 0 4px rgba(59,125,216,0.15); }

/* Product preview window */
html:not([data-theme="dark"]) .product-window { border-color: rgba(14,18,32,0.10); box-shadow: 0 30px 70px -30px rgba(14,18,32,0.35); }
html:not([data-theme="dark"]) .pw-bar { background: #F3F6FB; border-bottom-color: rgba(14,18,32,0.08); }
html:not([data-theme="dark"]) .pw-url { background: #fff; border: 1px solid rgba(14,18,32,0.08); }
html:not([data-theme="dark"]) .pw-row, html:not([data-theme="dark"]) .pw-kpi { background: #F7F9FD; border-color: rgba(14,18,32,0.07); }
html:not([data-theme="dark"]) .pw-pill.ok { background: #E3F5EF; color: #0F7F68; }
html:not([data-theme="dark"]) .pw-pill.warn { background: #FBF0DE; color: #9A5F12; }
html:not([data-theme="dark"]) .pw-pill.bad { background: #FBE7E5; color: #A8352E; }
html:not([data-theme="dark"]) .pw-pill.info { background: #E6EEFA; color: #1E4F8D; }

/* Call-to-action band: brand blue band with white text */
html:not([data-theme="dark"]) .cta-band { background: radial-gradient(700px 300px at 20% 0%, rgba(111,177,255,0.45), transparent 60%), radial-gradient(600px 300px at 90% 100%, rgba(22,160,133,0.55), transparent 60%), #1E4F8D; border-color: transparent; }
html:not([data-theme="dark"]) .cta-band h2 { color: #fff; }
html:not([data-theme="dark"]) .cta-band p { color: rgba(255,255,255,0.85); }
html:not([data-theme="dark"]) .cta-band .btn-secondary, html:not([data-theme="dark"]) .cta-band .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }

/* Footer */
html:not([data-theme="dark"]) .site-footer { background: #F1F4FA; }

/* Mobile bottom tab bar */
html:not([data-theme="dark"]) .bottom-nav { background: rgba(255,255,255,0.94); box-shadow: 0 -10px 28px -20px rgba(14,18,32,0.35); }
html:not([data-theme="dark"]) .bottom-nav a:hover { background: rgba(14,18,32,0.05); }
html:not([data-theme="dark"]) .bottom-nav a.current { color: #1E4F8D; }

/* Dashboards (.dash-premium): white cards on a soft light background */
html:not([data-theme="dark"]) body:has(.dash-premium) {
  background: radial-gradient(1100px 560px at 100% -10%, rgba(59,125,216,0.10), transparent 60%),
              radial-gradient(900px 520px at -8% 12%, rgba(22,160,133,0.08), transparent 55%), #F4F7FC;
}
html:not([data-theme="dark"]) .dash-premium {
  --border-strong: rgba(14,18,32,0.22); --surface-100: #F4F7FC; --surface-raised: #FFFFFF;
}
html:not([data-theme="dark"]) .dash-premium :is(.app-sidebar, .card, .data-table, .form-card, .search-bar, .job-item, .empty-state, .loading-state, .dash-greeting, .kanban-card, .skel-table) {
  background: #FFFFFF; box-shadow: 0 1px 2px rgba(14,18,32,0.05), 0 10px 28px -16px rgba(14,18,32,0.18);
}
html:not([data-theme="dark"]) .dash-premium .kanban-col { background: #EEF2F9; }
html:not([data-theme="dark"]) .dash-premium .card:hover, html:not([data-theme="dark"]) .dash-premium .job-item:hover { border-color: rgba(14,18,32,0.2); box-shadow: 0 16px 36px -18px rgba(14,18,32,0.28); }
html:not([data-theme="dark"]) .dash-premium .app-sidebar a:hover { background: rgba(14,18,32,0.05); }
html:not([data-theme="dark"]) .dash-premium .stat-tile h3,
html:not([data-theme="dark"]) .dash-premium .data-table th { color: #5B6178; }
html:not([data-theme="dark"]) .dash-premium .data-table th { background: #F5F7FB; }
html:not([data-theme="dark"]) .dash-premium .data-table tbody tr:hover { background: #F7F9FD; }
html:not([data-theme="dark"]) .dash-premium a:not(.btn),
html:not([data-theme="dark"]) .dash-premium .data-table a { color: #1E4F8D; }
html:not([data-theme="dark"]) .dash-premium .btn-secondary { background: #fff; border-color: rgba(14,18,32,0.18); }
html:not([data-theme="dark"]) .dash-premium .btn-secondary:hover { background: #F2F5FA; border-color: rgba(14,18,32,0.32); }
html:not([data-theme="dark"]) .dash-premium :is(.field input, .field select, .field textarea, .search-input-wrap input, .search-bar select, .search-bar-input, .data-table select, .inline-select, .save-menu-new input, .member-note textarea) {
  background-color: #FFFFFF; border-color: rgba(14,18,32,0.18);
}
html:not([data-theme="dark"]) .dash-premium :is(.field input, .field textarea, .search-input-wrap input, .search-bar-input)::placeholder { color: #8A90A6; }
html:not([data-theme="dark"]) .dash-premium .field :is(input, select, textarea):focus { background: #fff; }
html:not([data-theme="dark"]) .dash-premium .search-clear { background: rgba(14,18,32,0.08); }
html:not([data-theme="dark"]) .dash-premium .notice { background: #F5F7FB; }
html:not([data-theme="dark"]) .dash-premium .skill-tag { background: #EEF3FB; border-color: rgba(30,79,141,0.18); }
html:not([data-theme="dark"]) .dash-premium .save-menu { background: #fff; box-shadow: 0 16px 40px -16px rgba(14,18,32,0.3); }
html:not([data-theme="dark"]) .dash-premium .pipeline-dot { background: #fff; border-color: rgba(14,18,32,0.18); }
html:not([data-theme="dark"]) .dash-premium .kanban-count { background: rgba(14,18,32,0.07); }
html:not([data-theme="dark"]) .dash-premium .kanban-match,
html:not([data-theme="dark"]) .dash-premium .btn.is-saved { color: #0F7F68; border-color: #16A085; }
/* Status colours: readable on white */
html:not([data-theme="dark"]) .dash-premium .badge-pending, html:not([data-theme="dark"]) .dash-premium .tip-med { background: #FBF0DE; color: #9A5F12; }
html:not([data-theme="dark"]) .dash-premium :is(.badge-approved, .badge-hired, .badge-shortlisted) { background: #E3F4EA; color: #1A6B43; }
html:not([data-theme="dark"]) .dash-premium .badge-rejected, html:not([data-theme="dark"]) .dash-premium .tip-high { background: #FBE7E5; color: #A8352E; }
html:not([data-theme="dark"]) .dash-premium :is(.badge-submitted, .badge-reviewed), html:not([data-theme="dark"]) .dash-premium .tip-low { background: #E6EEFA; color: #1E4F8D; }
html:not([data-theme="dark"]) .dash-premium :is(.badge-withdrawn, .badge-dismissed) { background: #EEF0F4; color: #5B6178; }
html:not([data-theme="dark"]) .dash-premium .badge-interview { background: #EFE8FB; color: #5B3BA8; }
html:not([data-theme="dark"]) .dash-premium .flash-error { background: #FBE7E5; color: #A8352E; }
html:not([data-theme="dark"]) .dash-premium .flash-success { background: #E3F4EA; color: #1A6B43; }
html:not([data-theme="dark"]) .dash-premium .skill-tag button:hover { color: #A8352E; }
html:not([data-theme="dark"]) .dash-premium .app-sidebar a { color: #4E5570; }
html:not([data-theme="dark"]) .dash-premium .app-sidebar a:hover { color: #0E1220; }
html:not([data-theme="dark"]) .dash-premium .app-sidebar a.current { color: #fff; }
html:not([data-theme="dark"]) .dash-premium .app-sidebar a#sidebar-signout { color: #A8352E; }
html:not([data-theme="dark"]) .dash-premium .lists-nav a { color: #0E1220; }

/* Footer brand block has inline light colours - keep it readable in both modes */
.site-footer .brand span { color: var(--on-dark) !important; }
.site-footer .footer-grid p.muted { color: var(--on-dark-muted) !important; }

/* ================================================================
   PHONE / HOME-SCREEN APP PERFORMANCE
   Live blur (backdrop-filter), the large blurred animated glow in the hero and
   the page fade-in are expensive for phone graphics chips and made scrolling
   and tab switching laggy. On phones and in the installed app they are
   replaced with solid backgrounds that look the same at a glance.
   ================================================================ */
@media (max-width: 860px), (display-mode: standalone) {
  body { animation: none !important; }
  .site-header, .bottom-nav, .dash-premium .app-sidebar, .dash-premium .card, .dash-greeting, .dash-premium .job-item {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .site-header { background: rgba(7,11,24,0.97); }
  .bottom-nav { background: rgba(12,16,28,0.98); }
  html:not([data-theme="dark"]) .site-header { background: rgba(255,255,255,0.98); }
  html:not([data-theme="dark"]) .bottom-nav { background: rgba(255,255,255,0.98); }
  .hero::after { animation: none !important; filter: blur(50px); width: 420px; height: 420px; right: -160px; top: -160px; }
  .skeleton::after { animation-duration: 2.2s; }
}
html[data-theme="dark"] .bottom-nav a { color: var(--on-dark-muted); }
html[data-theme="dark"] .bottom-nav a.current { color: #fff; }

/* "Install the app" invitation (phones; added by theme.js) */
.vj-install { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 9990;
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px;
  background: #FFFFFF; color: #0E1220; border: 1px solid rgba(14,18,32,0.12); box-shadow: 0 18px 50px -12px rgba(14,18,32,0.35);
  font: 14px/1.4 Inter, system-ui, sans-serif; animation: vj-install-in .25s ease; }
body.has-bottom-nav .vj-install { bottom: calc(76px + env(safe-area-inset-bottom)); }
.vj-install img { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.vj-install-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vj-install-text strong { font-size: 15px; }
.vj-install-text span { color: #4E5570; font-size: 13px; }
.vj-install-actions { display: flex; flex-direction: column; align-items: stretch; gap: 4px; flex: none; }
.vj-install .btn { padding: 8px 16px; font-size: 14px; }
.vj-install-later { background: none; border: 0; color: #4E5570; font: inherit; font-size: 13px; padding: 4px; cursor: pointer; }
html[data-theme="dark"] .vj-install { background: #121A2E; color: #E9EDF7; border-color: rgba(255,255,255,0.12); box-shadow: 0 18px 50px -12px rgba(0,0,0,0.7); }
html[data-theme="dark"] .vj-install-text span, html[data-theme="dark"] .vj-install-later { color: #A3ABC2; }
@keyframes vj-install-in { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }