/* Inroads Dashboard Styles */
.score-pill { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; }
.status-green { background: #dcfce7; color: #166534; }
.status-yellow { background: #fef9c3; color: #854d0e; }
.status-red { background: #fee2e2; color: #991b1b; }
table { border-collapse: collapse; }
th a { text-decoration: none; color: inherit; }
th a:hover { color: #2563eb; }

/* ── User dropdown menu ───────────────────────────────────────── */
.user-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: #fff; border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  min-width: 220px; z-index: 2002;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all 0.15s ease;
}
.user-menu.show { opacity: 1; visibility: visible; transform: translateY(0); }
.menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; font-size: 13px; font-weight: 500;
  color: #374151; text-decoration: none; transition: background 0.1s;
}
.menu-item:hover { background: #f3f4f6; }
.menu-danger { color: #dc2626; }
.menu-danger:hover { background: #fef2f2; }

html.dark .user-menu { background: #1a2332; box-shadow: 0 10px 25px rgba(0,0,0,0.3); }
html.dark .menu-item { color: #b4bec9; }
html.dark .menu-item:hover { background: #1f2d3d; }
html.dark .menu-danger { color: #c09090; }
html.dark .menu-danger:hover { background: #251a1a; }

/* ══════════════════════════════════════════════════════════════════
   DARK MODE — Muted, professional palette
   Soft contrast, minimal color, easy on the eyes
   ══════════════════════════════════════════════════════════════════ */

/* ── Base backgrounds ─────────────────────────────────────────── */
html.dark .bg-white          { background-color: #1a2332 !important; }
html.dark .bg-gray-50        { background-color: #162030 !important; }
html.dark .bg-gray-100       { background-color: #1a2332 !important; }

/* ── Text — readable but not blinding ─────────────────────────── */
html.dark .text-gray-900     { color: #d4dae3 !important; }
html.dark .text-gray-800     { color: #c4ccd7 !important; }
html.dark .text-gray-700     { color: #b4bec9 !important; }
html.dark .text-gray-600     { color: #94a0af !important; }
html.dark .text-gray-500     { color: #7b8794 !important; }
html.dark .text-gray-400     { color: #6b7785 !important; }
html.dark .text-gray-300     { color: #94a0af !important; }
html.dark .font-medium       { color: #d4dae3; }
html.dark th                 { color: #c0c8d4 !important; }
html.dark td                 { color: #b4bec9 !important; }

/* ── Borders — subtle ─────────────────────────────────────────── */
html.dark .border            { border-color: #283545 !important; }
html.dark .border-t          { border-top-color: #283545 !important; }
html.dark .border-b          { border-bottom-color: #283545 !important; }
html.dark .border-gray-200   { border-color: #283545 !important; }
html.dark .border-gray-300   { border-color: #344155 !important; }
html.dark .border-dashed     { border-color: #344155 !important; }

/* ── Table hover ──────────────────────────────────────────────── */
html.dark tr:hover td        { background: #1f2d3d !important; }

/* ── Links — soft muted blue ──────────────────────────────────── */
html.dark a                  { color: #8ab4d9; }
html.dark a:hover            { color: #a8cce8; }
html.dark a.text-blue-600    { color: #8ab4d9 !important; }
html.dark a.text-blue-600:hover { color: #a8cce8 !important; }
html.dark .hover\:text-blue-600:hover { color: #8ab4d9 !important; }
html.dark .hover\:underline:hover { color: #a8cce8 !important; }

/* ── Score colors — desaturated, soft ─────────────────────────── */
html.dark .text-green-600    { color: #6dbc8a !important; }
html.dark .text-green-700    { color: #6dbc8a !important; }
html.dark .text-green-800    { color: #8dcca5 !important; }
html.dark .text-blue-600     { color: #7ba3c9 !important; }
html.dark .text-blue-700     { color: #94b8d9 !important; }
html.dark .text-blue-800     { color: #94b8d9 !important; }
html.dark .text-blue-900     { color: #b0cce4 !important; }

/* ── Stat card backgrounds — all use same neutral base, subtle tint ── */
html.dark .bg-green-50       { background-color: #1a2a24 !important; }
html.dark .border-green-200  { border-color: #264035 !important; }
html.dark .border-green-100  { border-color: #264035 !important; }

html.dark .bg-blue-50        { background-color: #1a2535 !important; }
html.dark .border-blue-200   { border-color: #263a50 !important; }

html.dark .bg-purple-50      { background-color: #1f2035 !important; }
html.dark .border-purple-200 { border-color: #2e2d4a !important; }
html.dark .text-purple-700   { color: #a08cc0 !important; }
html.dark .text-purple-800   { color: #b4a0d0 !important; }
html.dark .text-purple-600   { color: #9480b0 !important; }

html.dark .bg-amber-50       { background-color: #252020 !important; }
html.dark .border-amber-200  { border-color: #3a3025 !important; }
html.dark .border-amber-300  { border-color: #453828 !important; }
html.dark .text-amber-700    { color: #c4a060 !important; }
html.dark .text-amber-800    { color: #d0b070 !important; }
html.dark .text-amber-900    { color: #d8c090 !important; }
html.dark .text-amber-600    { color: #b89850 !important; }

html.dark .bg-red-50         { background-color: #251a1a !important; }
html.dark .border-red-200    { border-color: #3a2525 !important; }
html.dark .text-red-800      { color: #c09090 !important; }

/* ── Score pills — muted ──────────────────────────────────────── */
html.dark .status-green      { background: #1e3328; color: #8dcca5; }
html.dark .status-yellow     { background: #302820; color: #d0b070; }
html.dark .status-red        { background: #2e2020; color: #c09090; }

/* ── Form inputs ──────────────────────────────────────────────── */
html.dark input[type="text"],
html.dark input[type="number"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark select,
html.dark textarea {
  background-color: #1a2332 !important;
  border-color: #344155 !important;
  color: #d4dae3 !important;
}
html.dark input::placeholder  { color: #5a6575 !important; }
html.dark input[type="checkbox"] { accent-color: #6090b8; }

/* ── Bar chart colors — desaturated ──────────────────────────── */
html.dark .bg-green-500      { background-color: #4a9068 !important; }
html.dark .bg-blue-500       { background-color: #5080a8 !important; }
html.dark .bg-blue-400       { background-color: #6090b8 !important; }
html.dark .bg-yellow-400     { background-color: #b8a050 !important; }
html.dark .bg-gray-300       { background-color: #344155 !important; }
html.dark .bg-purple-200     { background-color: #2e2d4a !important; }
html.dark .bg-purple-600     { background-color: #6858a0 !important; }
html.dark .text-yellow-700   { color: #c4a060 !important; }

/* ── Misc ─────────────────────────────────────────────────────── */
html.dark .bg-gray-50\/50    { background-color: rgba(18, 26, 38, 0.5) !important; }
html.dark .bg-blue-50\/50    { background-color: rgba(26, 37, 53, 0.5) !important; }
html.dark code               { background-color: #243040 !important; color: #b4bec9 !important; }
html.dark .prose             { color: #b4bec9 !important; }
html.dark .prose h1,
html.dark .prose h2,
html.dark .prose h3          { color: #d4dae3 !important; }
html.dark .prose a           { color: #8ab4d9 !important; }
html.dark .prose li::marker  { color: #5a6575 !important; }
html.dark .shadow-sm         { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3) !important; }

/* ── Job description typography ──────────────────────────────── */
#job-description.prose h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-top: 1.75em;
  margin-bottom: 0.5em;
  padding-bottom: 0.35em;
  border-bottom: 1px solid #e5e7eb;
  letter-spacing: -0.01em;
}
html.dark #job-description.prose h3 {
  border-bottom-color: #374151;
}
#job-description.prose h3:first-child {
  margin-top: 0;
}
#job-description.prose p {
  margin-top: 0.6em;
  margin-bottom: 0.6em;
  line-height: 1.7;
}
/* Collapse empty paragraphs - prevent giant gaps */
#job-description.prose p:empty {
  margin: 0;
  padding: 0;
  display: none;
}
/* Limit spacing between consecutive paragraphs */
#job-description.prose p + p {
  margin-top: 1em;
}
#job-description.prose ul,
#job-description.prose ol {
  margin-top: 0.5em;
  margin-bottom: 0.75em;
  padding-left: 1.5em;
}
#job-description.prose li {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  line-height: 1.6;
  padding-left: 0.25em;
}
#job-description.prose li::marker {
  color: #9ca3af;
}
#job-description.prose strong,
#job-description.prose b {
  font-weight: 600;
  color: inherit;
}
html.dark #job-description.prose strong,
html.dark #job-description.prose b {
  color: #e2e8f0;
}
html.dark .font-mono         { color: inherit; }

/* ── Hover states ─────────────────────────────────────────────── */
html.dark .hover\:bg-blue-50:hover         { background-color: #1e2d40 !important; }
html.dark .hover\:bg-blue-50\/30:hover     { background-color: rgba(26, 37, 53, 0.4) !important; }
html.dark .hover\:bg-amber-50\/30:hover    { background-color: rgba(37, 32, 32, 0.4) !important; }
html.dark .hover\:border-blue-300:hover    { border-color: #5a8ab0 !important; }
html.dark .hover\:border-blue-400:hover    { border-color: #5a8ab0 !important; }
html.dark .hover\:shadow-sm:hover          { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3) !important; }

/* ── Selection ────────────────────────────────────────────────── */
html.dark ::selection { background: #4a7090; color: #fff; }

/* ── Toggle chips (setup page) ───────────────────────────────── */
.chip {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: 9999px;
  border: 1px solid #d1d5db; background: #f9fafb; color: #374151;
  font-size: 0.8125rem; font-weight: 500;
  cursor: pointer; transition: all 0.15s ease; user-select: none;
}
.chip:hover { border-color: #93c5fd; background: #eff6ff; }
.chip-selected { background: #2563eb; border-color: #2563eb; color: #fff; }
.chip-selected:hover { background: #1d4ed8; border-color: #1d4ed8; }

html.dark .chip { background: #1a2332; border-color: #344155; color: #94a0af; }
html.dark .chip:hover { border-color: #5a8ab0; background: #1e2d40; }
html.dark .chip-selected { background: #2e5580; border-color: #3a6898; color: #d4dae3; }
html.dark .chip-selected:hover { background: #264a70; border-color: #2e5580; }

/* ── Profile tags (compact, rectangular) ─────────────────────── */
.profile-tag {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 6px;
  border: 1px solid #d1d5db; background: #f9fafb; color: #4b5563;
  font-size: 0.75rem; font-weight: 500;
  cursor: pointer; transition: all 0.15s ease; user-select: none;
}
.profile-tag:hover { border-color: #93c5fd; background: #eff6ff; }
.profile-tag-selected { background: #dbeafe; border-color: #3b82f6; color: #1e40af; }
.profile-tag-selected:hover { background: #bfdbfe; border-color: #2563eb; }

html.dark .profile-tag { background: #1f2937; border-color: #374151; color: #9ca3af; }
html.dark .profile-tag:hover { border-color: #60a5fa; background: #1e3a5f; }
html.dark .profile-tag-selected { background: #1e3a5f; border-color: #3b82f6; color: #93c5fd; }
html.dark .profile-tag-selected:hover { background: #1e40af; border-color: #60a5fa; }

/* ══════════════════════════════════════════════════════════════════
   MOBILE — Bottom tab bar + responsive fixes
   ══════════════════════════════════════════════════════════════════ */

/* ── Bottom tab bar (mobile only — hidden on desktop) ─────────── */
.mobile-tab-bar {
  display: none !important;
}
@media (max-width: 767px) {
  .mobile-tab-bar {
    display: flex !important;
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    justify-content: space-around; align-items: center;
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
    z-index: 50;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
  }
}

.mobile-tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 8px; border-radius: 8px;
  font-size: 0.625rem; font-weight: 500; letter-spacing: 0.01em;
  color: #6b7280; text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
  min-width: 56px;
}

.mobile-tab:hover { color: #374151; background: #f3f4f6; }

.mobile-tab-active {
  color: #2563eb; font-weight: 600;
}

.mobile-tab-active svg { stroke-width: 2.5; }

/* Dark mode bottom tab bar */
@media (max-width: 767px) {
  html.dark .mobile-tab-bar {
    background: #1a2332;
    border-top-color: #283545;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
  }
}
html.dark .mobile-tab { color: #6b7785; }
html.dark .mobile-tab:hover { color: #b4bec9; background: #1f2d3d; }
html.dark .mobile-tab-active { color: #8ab4d9; }

/* ── Mobile responsive cleanup ────────────────────────────────── */
@media (max-width: 767px) {
  /* Tighter top nav on mobile */
  nav.sticky { padding-left: 16px; padding-right: 16px; }

  /* Stat cards: 2-col on mobile */
  .grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .md\:grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Quick stats footer: 3-col stays, but tighter */
  .grid-cols-3 { gap: 6px !important; }

  /* Smaller text on cards */
  .text-2xl { font-size: 1.25rem !important; }
  .text-3xl { font-size: 1.5rem !important; }
}

/* ── Mobile table rows: tappable ─────────────────────────────── */
tr[data-href] { cursor: pointer; }
tr[data-href]:active { background: rgba(59, 130, 246, 0.08); }

/* ── Upload zone ─────────────────────────────────────────────── */
#progress-bar { transition: width 0.3s ease; }
html.dark #upload-zone.drag-over { border-color: #5a8ab0 !important; background: rgba(26, 37, 53, 0.4) !important; }
#upload-zone.upload-done { border-color: #4ade80 !important; }
html.dark #upload-zone.upload-done { border-color: #6dbc8a !important; }


/* ══════════════════════════════════════════════════════════════════
   ONBOARDING — Welcome wizard cards and stepper
   ══════════════════════════════════════════════════════════════════ */

/* ── Stepper connector line ────────────────────────────────────── */
.step-connector { transition: background-color 0.3s ease; }

/* ── Onboarding selection cards ────────────────────────────────── */
.onboarding-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px 12px; border-radius: 10px;
  border: 2px solid #e5e7eb; background: #f9fafb;
  text-align: center; transition: all 0.15s ease; user-select: none;
}
.onboarding-card:hover { border-color: #93c5fd; background: #eff6ff; }
.onboarding-card-selected { border-color: #3b82f6; background: #dbeafe; }
.onboarding-card-selected:hover { border-color: #2563eb; background: #bfdbfe; }

.onboarding-card-sm { padding: 10px 8px; }

html.dark .onboarding-card { background: #1f2937; border-color: #374151; }
html.dark .onboarding-card:hover { border-color: #60a5fa; background: #1e3a5f; }
html.dark .onboarding-card-selected { border-color: #3b82f6; background: #1e3a5f; }
html.dark .onboarding-card-selected:hover { border-color: #60a5fa; background: #1e40af; }

/* ── Import method cards ───────────────────────────────────────── */
.onboarding-import-card {
  padding: 16px; border-radius: 10px;
  border: 1px solid #e5e7eb; background: #f9fafb;
  transition: all 0.15s ease;
}
.onboarding-import-card:hover { border-color: #d1d5db; }

html.dark .onboarding-import-card { background: #1f2937; border-color: #374151; }
html.dark .onboarding-import-card:hover { border-color: #4b5563; }

/* ── Onboarding checklist (dashboard) ──────────────────────────── */
.onboarding-checklist {
  border-radius: 10px; padding: 16px 20px;
  border: 1px solid #dbeafe; background: #eff6ff;
}
html.dark .onboarding-checklist { border-color: #263a50; background: #1a2535; }

.onboarding-checklist-item {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; font-size: 0.875rem;
}
.onboarding-checklist-item.done { color: #6b7280; text-decoration: line-through; }
html.dark .onboarding-checklist-item.done { color: #5a6575; }

.onboarding-progress {
  height: 6px; border-radius: 3px; background: #dbeafe; overflow: hidden; margin-top: 8px;
}
.onboarding-progress-bar {
  height: 100%; border-radius: 3px; background: #3b82f6; transition: width 0.3s ease;
}
html.dark .onboarding-progress { background: #263a50; }
html.dark .onboarding-progress-bar { background: #5080a8; }