/* ============================================================
   Material Design 3 (MUI-style) theme overlay for JobFit
   Apply after style.css for a Material UI look
   ============================================================ */

/* ── M3 design tokens ─────────────────────────────────────── */
:root {
  /* Primary (keep JobFit teal) */
  --md-sys-color-primary: #00968a;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #e5f5f3;
  --md-sys-color-on-primary-container: #004d47;

  /* Surface & background */
  --md-sys-color-surface: #fefefe;
  --md-sys-color-surface-dim: #f8f7f5;
  --md-sys-color-surface-container: #f3f1ee;
  --md-sys-color-surface-container-high: #eceae7;
  --md-sys-color-outline: #e0ddd8;
  --md-sys-color-outline-variant: #c9c6c0;

  /* On-surface (text) */
  --md-sys-color-on-surface: #1c1b19;
  --md-sys-color-on-surface-variant: #4d4b48;
  --md-sys-color-on-surface-muted: #6b6966;

  /* Elevation (M3) */
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.08);
  --md-sys-elevation-2: 0 2px 6px rgba(0,0,0,.07), 0 6px 20px rgba(0,0,0,.10);
  --md-sys-elevation-3: 0 4px 12px rgba(0,0,0,.08), 0 12px 28px rgba(0,0,0,.12);
  --md-sys-elevation-4: 0 8px 24px rgba(0,0,0,.10), 0 20px 40px rgba(0,0,0,.14);

  /* Shape (M3 rounded) */
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* State layers */
  --md-sys-state-hover-opacity: 0.08;
  --md-sys-state-focus-opacity: 0.12;
  --md-sys-state-pressed-opacity: 0.12;
}

/* ── Typography: Roboto (Material default) ────────────────── */
body {
  font-family: "Roboto", "Inter", system-ui, sans-serif;
}

/* ── App bar (topbar) ──────────────────────────────────────── */
.topbar {
  background: var(--md-sys-color-surface);
  border-bottom: 1px solid var(--md-sys-color-outline);
  box-shadow: var(--md-sys-elevation-1);
  height: 64px;
}

.topbar-inner { max-width: 1280px; }

.brand-mark {
  border-radius: var(--md-sys-shape-corner-small);
  box-shadow: var(--md-sys-elevation-1);
}

.brand-name { font-weight: 500; letter-spacing: 0.01em; }
.brand-pill {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border: none;
  border-radius: var(--md-sys-shape-corner-extra-small);
  font-weight: 500;
}

/* Nav links — MUI tab style */
.nav-link {
  border-radius: var(--md-sys-shape-corner-full);
  text-transform: none;
  font-weight: 500;
}
.nav-link:hover { background: rgba(0,0,0,.04); }
.nav-link.active {
  color: var(--md-sys-color-primary);
  background: rgba(0,150,138,.08);
}

/* Buttons */
.btn-primary {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border-radius: var(--md-sys-shape-corner-large);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.01em;
  box-shadow: var(--md-sys-elevation-1);
  padding: 0.5rem 1.5rem;
  min-height: 40px;
}
.btn-primary:hover:not(:disabled) {
  box-shadow: var(--md-sys-elevation-2);
  background: #007a6f;
}
.btn-primary:active:not(:disabled) {
  box-shadow: var(--md-sys-elevation-0);
}

.btn-outline {
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-large);
  color: var(--md-sys-color-on-surface);
  font-weight: 500;
  text-transform: none;
  min-height: 40px;
}
.btn-outline:hover {
  background: rgba(0,0,0,.04);
  border-color: var(--md-sys-color-outline-variant);
}

.btn-signin {
  border-radius: var(--md-sys-shape-corner-full);
  font-weight: 500;
}
.btn-register {
  border-radius: var(--md-sys-shape-corner-full);
  box-shadow: var(--md-sys-elevation-1) !important;
}

.btn-back {
  border-radius: var(--md-sys-shape-corner-small);
  font-weight: 500;
}

/* Cards — MUI Paper / Card ───────────────────────────────── */
.hub-card {
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--md-sys-elevation-0);
  transition: box-shadow .2s ease, border-color .2s;
}
.hub-card:hover {
  box-shadow: var(--md-sys-elevation-2);
  border-color: transparent;
}

.hub-hero-card {
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--md-sys-elevation-1);
}

/* Form inputs — MUI OutlinedInput ──────────────────────────── */
input[type="text"],
textarea,
.auth-field input {
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface);
  padding: 0.75rem 1rem;
  font-family: inherit;
}
input[type="text"]:focus,
textarea:focus,
.auth-field input:focus {
  border-color: var(--md-sys-color-primary);
  border-width: 2px;
  outline: none;
  box-shadow: 0 0 0 1px var(--md-sys-color-primary);
}

/* Upload zone — MUI style */
.upload-zone {
  border: 1px dashed var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container);
}
.upload-zone:hover,
.upload-zone.dragover {
  border-color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary-container);
}

/* Tabs — MUI Tabs ─────────────────────────────────────────── */
.main-tabs {
  border-bottom: 1px solid var(--md-sys-color-outline);
  gap: 0;
}
.main-tab {
  border-radius: 0;
  border-bottom: 3px solid transparent;
  font-weight: 500;
  text-transform: none;
  padding: 0.75rem 1rem;
  min-height: 48px;
}
.main-tab:hover { background: rgba(0,0,0,.04); }
.main-tab.active {
  border-bottom-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-primary);
}

/* Wizard / stepper ─────────────────────────────────────────── */
.wizard-pill {
  border-radius: var(--md-sys-shape-corner-full);
}
.wizard-pill.active {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.wp-num {
  border-radius: var(--md-sys-shape-corner-full);
}

/* Results / content cards ──────────────────────────────────── */
.results-hero {
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--md-sys-elevation-1);
}
.acard,
.disc-form-card {
  border-radius: var(--md-sys-shape-corner-medium);
  border: 1px solid var(--md-sys-color-outline);
  box-shadow: var(--md-sys-elevation-0);
}

/* Tip strip & alerts ──────────────────────────────────────── */
.hub-tip-strip {
  border-radius: var(--md-sys-shape-corner-medium);
  border: 1px solid var(--md-sys-color-outline);
  box-shadow: var(--md-sys-elevation-0);
}
.err-msg {
  border-radius: var(--md-sys-shape-corner-small);
}
.auth-alert {
  border-radius: var(--md-sys-shape-corner-small);
}

/* User menu / dropdown ────────────────────────────────────── */
.user-btn {
  border-radius: var(--md-sys-shape-corner-full);
}
.user-dropdown {
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--md-sys-elevation-3);
}

/* Loading overlay ─────────────────────────────────────────── */
.loading-overlay {
  background: var(--md-sys-color-on-primary-container);
}

/* Auth pages ───────────────────────────────────────────────── */
.auth-submit-btn {
  border-radius: var(--md-sys-shape-corner-large);
  font-weight: 500;
  text-transform: none;
}
.auth-field input {
  border-radius: var(--md-sys-shape-corner-small);
}
.btn-google {
  border-radius: var(--md-sys-shape-corner-small);
  box-shadow: var(--md-sys-elevation-0);
}

/* History list items ───────────────────────────────────────── */
.hist-card {
  border-radius: var(--md-sys-shape-corner-medium);
  border: 1px solid var(--md-sys-color-outline);
  box-shadow: var(--md-sys-elevation-0);
}

/* Discovery level buttons ───────────────────────────────────── */
.disc-level-btn {
  border-radius: var(--md-sys-shape-corner-small);
  font-weight: 500;
  text-transform: none;
}
.disc-level-btn.active {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border-color: transparent;
}

/* Section labels ───────────────────────────────────────────── */
.hub-section-title {
  font-weight: 500;
  letter-spacing: 0.01em;
}
.results-eyebrow {
  text-transform: none;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Company background & recommendation cards ───────────────── */
.company-bg-banner {
  border-radius: var(--md-sys-shape-corner-medium);
  border: 1px solid var(--md-sys-color-outline);
  box-shadow: var(--md-sys-elevation-0);
}
.rec-verdict,
.rec-checklist,
.rec-strategy {
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--md-sys-elevation-1);
}

/* Discovery result cards ───────────────────────────────────── */
.disc-card {
  border-radius: var(--md-sys-shape-corner-medium);
  border: 1px solid var(--md-sys-color-outline);
  box-shadow: var(--md-sys-elevation-0);
}

/* Form container / wizard ───────────────────────────────────── */
.form-container,
.wizard-container {
  border-radius: var(--md-sys-shape-corner-large);
}
.pane-header .pane-title {
  font-weight: 500;
  letter-spacing: 0.01em;
}