/*
  Midnight look — reskin overlay for the CloseTheOffer static pages.
  Loaded LAST in each page so it overrides the page's own <style> without any
  markup or JS changes (behaviour stays identical). It remaps the site's
  existing design tokens to the 2026-07 midnight palette + typography that the
  landing page (index.html) ships natively: near-black blue base, electric-blue
  accent, Outfit + JetBrains Mono, and the fixed mountain backdrop.
*/
/* Fonts (Outfit + JetBrains Mono) are injected by build.sh as a <link> tag in
   each page's <head> — no render-blocking @import here. */

:root {
  /* midnight palette mapped onto the site's variable names (app/app-free) */
  --purple: #4d9fff;          /* primary/brand  -> electric blue */
  --purple-dark: #2563eb;
  --purple-mid: #4d9fff;      /* -> blue accent */
  --purple-light: #16213a;    /* light tint     -> dark blue tint */
  --green: #5ecf7f;           /* success, brightened for dark */
  --red: #e05a4b;             /* destructive */
  --yellow: #e2bf59;
  --blue: #4d9fff;
  --text: #f4f4f5;
  --muted: #9a9ca6;
  --border: rgba(255,255,255,.1);   /* hairline */
  --bg: #070a11;              /* near-black blue background */
  --bg-subtle: #0c101a;
  --bg-gray: #0e1422;
  --surface: #101522;         /* card surface */
  --accent: #4d9fff;
  /* layered shadows tuned for the dark backdrop */
  --shadow-sm: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 20px -8px rgba(0,0,0,.5);
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 20px -8px rgba(0,0,0,.5);
  --shadow-md: 0 2px 6px rgba(0,0,0,.3), 0 20px 48px -18px rgba(0,0,0,.6);
  --shadow-lg: 0 4px 10px rgba(0,0,0,.35), 0 28px 60px -20px rgba(0,0,0,.7);
}

/* ---- Typography: Outfit for UI, JetBrains Mono for code/meta accents ---- */
html, body, input, textarea, select, button, .btn {
  font-family: 'Outfit', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
}
body {
  /* Uniform midnight background across EVERY page: the mountain-ridge photo as
     one fixed dark layer (same image the landing hero uses). Content sits in
     dark frosted cards; the ridge shows through the negative space. */
  background-color: var(--bg) !important;
  background-image:
    linear-gradient(rgba(7,10,17,.62), rgba(7,10,17,.74)),
    url('/hero-bg.jpg') !important;
  background-size: cover !important;
  background-position: center 30% !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
}
/* iOS Safari can't combine background-attachment:fixed with background-size:cover
   (it disables fixed and stretches the image) — fall back to a scrolling background */
@supports (-webkit-touch-callout: none) {
  body { background-attachment: scroll !important; }
}
/* full-viewport app wrappers painted their own opaque navy — let the body's
   fixed backdrop show through them instead */
.center-wrap, .screen, #screen-auth, #screen-app {
  background: transparent !important;
  background-image: none !important;
}
h1, h2, h3, h4 {
  font-family: 'Outfit', ui-sans-serif, sans-serif !important;
  letter-spacing: -0.03em;
  color: var(--text);
}
/* heading weights: 800 for the big levels (matches the hero), 700 for sub-heads */
h1, h2 { font-weight: 800; }
h3, h4 { font-weight: 700; }
h1 { letter-spacing: -0.04em; line-height: 1.02; }

/* ---- Soft radius tiers — 12px controls / 16-20px cards & panels / full pills
   for badges. Keep circles as circles. ---- */
button, .btn, input, textarea, select, [class*="btn"],
.tabs, .tab, .tab-btn, .mock-tabs, .mock-tab {
  border-radius: 12px !important;
}
.btn-sm, .btn-move, .refresh-btn { border-radius: 9px !important; }
.card, [class*="card"], .modal, [class*="modal"],
.panel, [class*="panel"], .tab-panel, .col {
  border-radius: 16px !important;
}
.card-box { border-radius: 20px !important; }
.badge, [class*="badge"], .chip, [class*="chip"],
.tag, .pill, .prep-pill, .job-source, .star-lp, .star-key, .col-count {
  border-radius: 999px !important;
}

/* ---- Frosted dark surfaces: the ridge glows through cards, kanban columns,
   and modals — same treatment as the landing page. ---- */
.card, .int-card, .job-card, .jt-card, .conn-card, .prep-card,
.email-item, .action-item, .star-card, .card-box, .modal {
  background: rgba(16,21,34,.88) !important;
  border: 1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm) !important;
  color: var(--text);
}
.col {
  background: rgba(12,16,26,.62) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.modal { box-shadow: var(--shadow-lg) !important; }

/* hover lift on interactive cards (kanban, jobs, interviews, prep) */
.card, .int-card, .job-card, .jt-card, .conn-card, .prep-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.card:hover, .int-card:hover, .job-card:hover, .jt-card:hover,
.conn-card:hover, .prep-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
  box-shadow: var(--shadow-md) !important;
}
@media (prefers-reduced-motion: reduce) {
  .card, .int-card, .job-card, .jt-card, .conn-card, .prep-card { transition: none !important; }
  .card:hover, .int-card:hover, .job-card:hover, .jt-card:hover,
  .conn-card:hover, .prep-card:hover { transform: none; }
}
/* preserve intentional circles (avatars, dots) — explicit classes only
   (.avatar-stack is a flex row container, NOT a circle) */
[style*="border-radius: 50%"], [style*="border-radius:50%"],
.avatar, .mock-avatar, .logo-dot, .mock-dot {
  border-radius: 50% !important;
}

/* ---- Form controls read on the dark surfaces ---- */
input, textarea, select {
  background: rgba(255,255,255,.05) !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,.14) !important;
}
input::placeholder, textarea::placeholder { color: var(--muted) !important; }
input:focus, textarea:focus, select:focus {
  border-color: rgba(77,159,255,.6) !important;
  outline-color: rgba(77,159,255,.6) !important;
}

/* ---- Header/nav: dark glass over the fixed backdrop on EVERY page. The
   dashboard-mockup's own header (.mock-header) is left intact. ---- */
header:not(.mock-header), nav, .nav, .navbar, .topbar, .site-header, .site-nav {
  background: rgba(10,13,20,.75) !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  border-bottom-color: var(--border) !important;
}
.dashboard-mockup header, .dashboard-mockup nav { background: initial !important; }  /* don't touch the mockup */
header:not(.mock-header), header:not(.mock-header) *,
nav:not(.mock-tabs), .nav, .nav *, .topbar, .topbar * {
  color: var(--text) !important;
}
/* keep the blue primary CTA legible (dark text on the bright button) */
header:not(.mock-header) .btn-primary, header:not(.mock-header) .btn-primary *,
.nav .btn-primary, .nav .btn-primary *, .topbar .btn-primary, .topbar .btn-primary * {
  color: #061024 !important;
}
/* primary buttons everywhere: bright blue with dark text */
.btn-primary, button[type="submit"].btn-primary {
  background: var(--accent) !important;
  color: #061024 !important;
  border-color: transparent !important;
  box-shadow: 0 8px 28px -10px rgba(77,159,255,.5) !important;
}
.btn-primary:hover { background: #6cb2ff !important; color: #061024 !important; }

/* ---- Accent + surfaces ---- */
a { color: var(--accent); }
a:hover { color: #6cb2ff; }
::selection { background: rgba(77,159,255,.35); }

/* subtle hairline dividers instead of heavy shadows where the site draws borders */
hr { border: 0; border-top: 1px solid var(--border); }

/* ---- App (app.html): uniform ~320px card size across EVERY tab — match the
   Interview Prep grid: repeat(auto-fill, minmax(320px, 1fr)), gap 12px. ---- */
.int-grid, .job-grid, .jt-grid, .conn-cards, .rs-score-row {
  display: grid !important;
  /* min(100%, 320px): a hard 320px minimum overflows phones narrower than
     ~344px of content width (e.g. 360px Androids) into page-wide horizontal scroll */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)) !important;
  gap: 12px !important;
}
/* cards that were flex-constrained — let them fill the 320px grid cell */
.int-card, .rs-score-card { min-width: 0 !important; max-width: none !important; flex: 0 1 auto !important; }
/* ---- Extend ALL app boards to the full screen width: the app content container
   is capped at 1400px — widen it so every tab panel (pipeline, interviews, job
   search, prep, …) fills the screen. (Marketing pages use a separate .container.) ---- */
#screen-app > .container, #screen-app .container {
  max-width: 100% !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}
/* …but keep app.css's tighter phone padding below 768px */
@media (max-width: 768px) {
  #screen-app > .container, #screen-app .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}
/* Pipeline columns flex to fit across the now full-width board — desktop only:
   below 900px app.css's swipe-snap kanban (fixed-width cols, one per swipe stop)
   must win, and this unscoped !important was overriding it */
@media (min-width: 900px) {
  .pipeline .col { flex: 1 1 0 !important; min-width: 240px !important; }
}

/* ---- App tab nav: on wide screens, fit ALL tabs on one row (no horizontal
   scroll). Tabs flex to share the full-width bar; the label sizes to fit.
   Below 900px the app keeps its original scrollable tab strip — forcing all
   nine tabs onto one nowrap row clips the labels on phones. ---- */
@media (min-width: 900px) {
  .tabs { overflow-x: visible !important; }
  .tabs .tab, .tab {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    font-size: clamp(0.9rem, 1.3vw, 1rem) !important;
    font-weight: 700 !important;
    padding: 16px 6px !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
}
/* match Interview Prep's card padding so the cards read as one size */
.int-card, .job-card, .jt-card, .conn-card,
.prep-card, .email-item, .action-item { padding: 16px !important; }

/* ---- Branding: large wordmark / app title, centered at the top of every page.
   The wordmark takes its own full-width row (flex-basis:100% + order:-1); the nav
   container is made to wrap via :has() so this works whatever its class is. ---- */
:has(> .nav-logo), :has(> .logo), :has(> a.logo),
header:not(.mock-header), .nav, .navbar, .topbar {
  flex-wrap: wrap !important;
  justify-content: center !important;
  row-gap: 8px !important;
}
.nav-logo, .logo, a.logo, .brand, .wordmark {
  font-family: 'Outfit', ui-sans-serif, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem) !important;
  letter-spacing: -0.03em !important;
  flex-basis: 100% !important;
  width: 100% !important;
  text-align: center !important;
  justify-content: center !important;   /* the wordmark is itself a flex <a> */
  order: -1 !important;
}

/* ---- "Job Search Dashboard" — the app's title/branding: bigger + centered on top ---- */
header:not(.mock-header) h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem) !important;
  font-weight: 800 !important;
  flex-basis: 100% !important;
  text-align: center !important;
  order: -1 !important;
}
.center-wrap h1, .center-wrap h2, .card-box h1, .card-box h2 { font-size: 2rem !important; line-height: 1.15 !important; }

/* ---- App header (the one with the login controls, .header-user): the wordmark's
   typography applies at every width; the big absolutely-centered layout is
   desktop-only (below 900px it overlapped the sign-out controls, so phones keep
   the normal wrapped header flow from the generic rules above). ---- */
.app-brand {
  font-family: 'Outfit', ui-sans-serif, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  color: var(--text) !important; text-decoration: none !important;
  line-height: 1 !important;
}
/* Two-tone wordmark: "The" in the blue accent, on every CloseTheOffer mark */
.app-brand span, .nav-logo span, .logo span, a.logo span, .brand span {
  color: var(--accent) !important;
}
@media (min-width: 900px) {
  header:has(.header-user) {
    position: relative !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: 108px !important;
  }
  header:has(.header-user)::after { content: none !important; }   /* replaced by the real .app-brand element */
  .app-brand {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    font-size: clamp(3.2rem, 6vw, 5.4rem) !important;   /* ~2x the previous size */
    white-space: nowrap !important;
  }
  header:has(.header-user) h1 {
    flex: 0 1 auto !important; order: 0 !important;
    text-align: left !important; font-size: 1rem !important; font-weight: 700 !important;
    color: var(--text) !important; margin: 0 !important;
  }
  header:has(.header-user) .header-user {
    order: 3 !important; flex: 0 0 auto !important; margin-left: auto !important; z-index: 1 !important;
  }
}
