/* =============================================================
   UpworkAgent OS — Jobs Design System
   Clean SaaS dashboard inspired by Linear / Stripe Dashboard
   ============================================================= */

/* ── CSS Custom Properties ───────────────────────────────────── */
:root {
  --radius:        8px;
  --radius-sm:     6px;
  --radius-xs:     4px;
  --shadow:        0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md:     0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --border:        #e2e8f0;
  --bg-page:       #f8fafc;
  --bg-surface:    #ffffff;
  --bg-subtle:     #f1f5f9;
  --text-primary:  #0f172a;
  --text-secondary:#64748b;
  --text-tertiary: #94a3b8;
  --indigo:        #6366f1;
  --indigo-hover:  #4f46e5;
  --indigo-muted:  rgba(99,102,241,.1);
}

/* ── Base Page ───────────────────────────────────────────────── */
body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* ── Navbar ──────────────────────────────────────────────────── */
.navbar-app {
  background: #0f172a;
  border-bottom: 1px solid rgba(255,255,255,.06);
  height: 56px;
  padding: 0 24px;
}
.navbar-app .navbar-brand {
  font-size: 15px;
  font-weight: 700;
  color: #fff !important;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.navbar-app .brand-dot {
  width: 8px; height: 8px;
  background: var(--indigo);
  border-radius: 50%;
  display: inline-block;
}
.navbar-app .nav-link {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.6) !important;
  padding: 6px 12px !important;
  border-radius: var(--radius-sm);
  transition: color .15s, background .15s;
}
.navbar-app .nav-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,.08);
}
.navbar-app .nav-link.active-nav {
  color: #fff !important;
  background: rgba(255,255,255,.1);
}
.navbar-app .nav-divider {
  width: 1px; height: 18px;
  background: rgba(255,255,255,.12);
  margin: 0 8px;
  align-self: center;
}

/* ── Page Chrome ─────────────────────────────────────────────── */
.page-header {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}
.page-header h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 0;
}
.page-header .count-pill {
  display: inline-flex;
  align-items: center;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
}

/* ── Connects strip (page header) ────────────────────────────────
   One card per Upwork submission profile: who the account is, and how many
   Connects it has available to spend on proposals. Two lines so the account
   name never competes with the number — the number is what people scan for. */
.connects-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.connects-card {
  display: inline-flex;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px 12px;
  line-height: 1.25;
  white-space: nowrap;
  transition: box-shadow .15s ease, filter .15s ease;
}
.connects-card:hover {
  box-shadow: var(--shadow-md);
  filter: brightness(.985);
}

/* Per-lane tint — the two Upwork accounts read apart at a glance without a label
   having to be parsed. Kept pale so the balance stays the loudest thing on the card. */
.connects-us     { background: #eef2ff; border-color: #c7d2fe; }   /* indigo  */
.connects-us     .connects-account { color: #4338ca; }
.connects-us     .connects-lane    { background: #e0e7ff; border-color: #c7d2fe; color: #4f46e5; }
.connects-global { background: #ecfdf5; border-color: #a7f3d0; }   /* emerald */
.connects-global .connects-account { color: #047857; }
.connects-global .connects-lane    { background: #d1fae5; border-color: #a7f3d0; color: #059669; }

.connects-body {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
}
.connects-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.connects-account {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
/* Which Upwork lane the account submits on — a quiet qualifier, not a heading. */
.connects-lane {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 6px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.connects-line {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.connects-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.connects-unit {
  font-size: 11px;
  color: var(--text-secondary);
}
/* The balance only refreshes when a submission actually runs, so the age is
   always shown — the figure must never be mistaken for a live reading. */
.connects-age {
  font-size: 10.5px;
  color: var(--text-tertiary);
  padding-left: 4px;
  border-left: 1px solid var(--border);
}

/* Out of Connects — the state that silently stops a lane submitting. The whole
   card turns, not just the number, so it is visible without being read. Declared
   AFTER the lane tints so it overrides whichever lane the card belongs to. */
.connects-card.is-empty {
  background: #fef2f2;
  border-color: #fecaca;
}
.connects-card.is-empty .connects-value   { color: #b91c1c; }
.connects-card.is-empty .connects-account { color: #b91c1c; }
.connects-card.is-empty .connects-lane    { background: #fff; border-color: #fecaca; color: #dc2626; }

/* Never captured. Muted throughout so the dash never reads as a real low number. */
.connects-card.is-unknown {
  background: var(--bg-subtle);
  border-color: var(--border);
}
.connects-card.is-unknown .connects-value   { color: var(--text-tertiary); }
.connects-card.is-unknown .connects-account { color: var(--text-secondary); }
.connects-card.is-unknown .connects-lane    { background: #fff; border-color: var(--border); color: var(--text-tertiary); }

/* Total Connects spent by the submissions on the current page — same card anatomy as the
   two account balances, in its own amber tint so it never reads as a third account. Rendered
   only when at least one visible row carries a value, so it needs no is-empty/is-unknown states. */
.connects-spent-total { background: #fffbeb; border-color: #fde68a; }   /* amber */
.connects-spent-total .connects-account { color: #b45309; }
.connects-spent-total .connects-lane    { background: #fef3c7; border-color: #fde68a; color: #d97706; }

/* Per-row "N Connects spent" under the budget value — quiet metadata, present only when the
   submission actually reported a figure. */
.connects-spent-chip {
    /* Sized to match .bs-value (the budget line above it) so the two figures read as peers,
     with a little air between them — owner request 2026-08-19. */
    margin-top: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #b45309;
    white-space: nowrap;
}

/* ── Filter Bar ──────────────────────────────────────────────── */
.filter-bar {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.filter-bar .form-control,
.filter-bar .form-select {
  font-size: 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
  height: 36px;
  padding: 4px 10px;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
.filter-bar .form-control:focus,
.filter-bar .form-select:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px var(--indigo-muted);
  outline: none;
}
.filter-bar .search-wrap {
  position: relative;
}
.filter-bar .search-icon {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
  font-size: 14px;
}
.filter-bar .search-input {
  padding-left: 32px !important;
}
.filter-bar .form-select {
  padding-right: 28px;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-app-primary {
  background: var(--indigo);
  color: #fff;
  border: none;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  transition: background .15s, transform .1s;
  white-space: nowrap;
}
.btn-app-primary:hover  { background: var(--indigo-hover); color: #fff; }
.btn-app-primary:active { transform: scale(.98); }

.btn-app-secondary {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  transition: background .15s, color .15s;
}
.btn-app-secondary:hover { background: var(--bg-subtle); color: var(--text-primary); }

.btn-app-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: none;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: background .15s, color .15s;
}
.btn-app-ghost:hover { background: var(--bg-subtle); color: var(--text-primary); }

/* ── Table Container ─────────────────────────────────────────── */
.table-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* ── Jobs Table ──────────────────────────────────────────────── */
.jobs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
.jobs-table thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  white-space: nowrap;
  user-select: none;
}
.jobs-table thead th:first-child { padding-left: 20px; }

.jobs-table tbody tr.job-row {
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .1s ease;
}
.jobs-table tbody tr.job-row:last-child { border-bottom: none; }
.jobs-table tbody tr.job-row:hover { background: #f8f9ff; }

.jobs-table tbody td {
  padding: 14px 16px;
  vertical-align: middle;
}
.jobs-table tbody td:first-child { padding-left: 20px; }
.jobs-table tbody td:last-child  { padding-right: 20px; }

/* ── Score Circle ────────────────────────────────────────────── */
.score-circle {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
.score-high   { background: #dcfce7; color: #15803d; }
.score-mid    { background: #fef3c7; color: #92400e; }
.score-low    { background: #fee2e2; color: #b91c1c; }
.score-none   { background: var(--bg-subtle); color: var(--text-tertiary); font-size: 13px; }

/* Score circle — large (detail page) */
.score-circle-lg {
  width: 72px; height: 72px;
  font-size: 22px; font-weight: 800;
}

/* ── Job Title & Description ─────────────────────────────────── */
.job-title-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  display: block;
  cursor: pointer;
  transition: color .15s;
}
.job-row:hover .job-title-link { color: var(--indigo); }

.job-description-preview {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 3px;
  overflow: hidden;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  line-height: 1.45;
}

/* ── Skill Tags ──────────────────────────────────────────────── */
.skill-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  background: var(--bg-subtle);
  color: #475569;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.skill-tag + .skill-tag { margin-left: 4px; }
.skill-tag-more {
  font-size: 11px;
  color: var(--text-tertiary);
  padding-left: 4px;
  white-space: nowrap;
}

/* ── Recommended prompt-template display (auto-selected at retrieval) ── */
/* Right of the skills line: the suggested template NAME as a label, with a small
   "Most Relevant template for this job" descriptor beneath it. */
.rec-tpl-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
  max-width: 100%;
  min-width: 0;
}
.rec-tpl-block .rec-tpl-name {
  font-size: 12px;
  font-weight: 500;
  color: #111827;                /* black */
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rec-tpl-block .rec-tpl-desc {
  font-size: 10.5px;
  font-weight: 500;
  color: #16a34a;                /* green */
  line-height: 1.2;
}

/* ── Status Badges ───────────────────────────────────────────── */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  white-space: nowrap;
}
.badge-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-new      { background: #f1f5f9; color: #475569; }
.status-new      .badge-status-dot { background: #94a3b8; }
.status-scored   { background: #f0fdf4; color: #15803d; }
.status-scored   .badge-status-dot { background: #22c55e; }
.status-draft    { background: #fffbeb; color: #92400e; }
.status-draft    .badge-status-dot { background: #f59e0b; }
.status-sent     { background: #eff6ff; color: #1d4ed8; }
.status-sent     .badge-status-dot { background: #3b82f6; }
.status-won      { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.status-won      .badge-status-dot { background: #16a34a; }
.status-lost     { background: #fff1f2; color: #be123c; }
.status-lost     .badge-status-dot { background: #f43f5e; }
.status-archived { background: #f8fafc; color: #94a3b8; }
.status-archived .badge-status-dot { background: #cbd5e1; }
.status-error    { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.status-error    .badge-status-dot { background: #dc2626; }

/* ── Source Badges ───────────────────────────────────────────── */
.badge-source {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  border: 1px solid transparent;
  white-space: nowrap;
}
.source-api    { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.source-rss    { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.source-email  { background: #fdf4ff; color: #7e22ce; border-color: #e9d5ff; }
.source-manual { background: #f8fafc; color: #475569; border-color: #e2e8f0; }

/* ── Psychology Badges ───────────────────────────────────────── */
.badge-psych {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  white-space: nowrap;
}
.psych-budget  { background: #fffbeb; color: #92400e; }
.psych-quality { background: #eff6ff; color: #1e40af; }
.psych-urgent  { background: #fff1f2; color: #be123c; }
.psych-mixed   { background: #f0f9ff; color: #0369a1; }
.psych-unknown { background: var(--bg-subtle); color: var(--text-tertiary); }

/* ── Row Arrow ───────────────────────────────────────────────── */
.row-arrow {
  color: var(--text-tertiary);
  opacity: 0;
  transition: opacity .15s, transform .15s;
  font-size: 16px;
}
.job-row:hover .row-arrow {
  opacity: 1;
  transform: translateX(2px);
}

/* ── Budget Display ──────────────────────────────────────────── */
.budget-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
.budget-type {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* ── Meta text ───────────────────────────────────────────────── */
.meta-text {
  font-size: 12px;
  color: var(--text-secondary);
}
.meta-text-sm {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* ── Empty State ─────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 72px 24px;
  background: var(--bg-surface);
}
.empty-state-icon { font-size: 40px; margin-bottom: 16px; line-height: 1; }
.empty-state h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.empty-state p {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 20px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Detail Page ─────────────────────────────────────────────── */
.detail-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.detail-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.detail-description {
  font-size: 14px;
  line-height: 1.5;
  color: #334155;
  /* pre-line keeps real line breaks but collapses runs of blank lines/spaces,
     so Upwork descriptions stay compact instead of ballooning vertically. */
  white-space: pre-line;
  word-break: break-word;
  width: 100%;          /* removed old max-width:700px — use full card width */
}
.detail-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}

/* ── Info Card (sidebar) ─────────────────────────────────────── */
.info-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.info-card-header {
  background: var(--bg-subtle);
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border);
}
.info-card-body { padding: 16px; }

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.info-row:last-child { border-bottom: none; }
.info-label {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 500;
}
.info-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
}

/* ── Score Progress ──────────────────────────────────────────── */
.score-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-subtle);
  overflow: hidden;
  margin-top: 8px;
}
.score-progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .6s ease;
}
.fill-high  { background: linear-gradient(90deg, #4ade80, #22c55e); }
.fill-mid   { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.fill-low   { background: linear-gradient(90deg, #f87171, #ef4444); }

/* ── Scoring Notes ───────────────────────────────────────────── */
.scoring-notes-box {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-left: 3px solid var(--indigo);
  border-radius: var(--radius-xs);
  padding: 12px 14px;
  font-size: 13px;
  color: #475569;
  line-height: 1.65;
}

/* ── Create Form ─────────────────────────────────────────────── */
.create-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 0 48px;
}
.form-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.form-card-header {
  padding: 20px 28px 16px;
  border-bottom: 1px solid var(--border);
}
.form-card-header h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.form-card-header p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 4px 0 0;
}
.form-card-body { padding: 24px 28px; }
.form-card-footer {
  padding: 16px 28px;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.form-label-custom {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
  display: block;
}
.form-label-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 400;
  margin-left: 4px;
}
.form-control-custom,
.form-select-custom {
  font-size: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--text-primary);
  background: var(--bg-surface);
  padding: 8px 12px;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.form-control-custom:focus,
.form-select-custom:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px var(--indigo-muted);
}
.form-control-custom.is-invalid,
.form-select-custom.is-invalid {
  border-color: #f43f5e;
  box-shadow: 0 0 0 3px rgba(244,63,94,.1);
}
textarea.form-control-custom { resize: vertical; min-height: 160px; line-height: 1.6; }
.form-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 5px;
}
.invalid-msg {
  font-size: 12px;
  color: #dc2626;
  margin-top: 4px;
}

/* ── Skills Input Tag Area ───────────────────────────────────── */
.skills-preview { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; min-height: 24px; }

/* ── Alert/Toast ─────────────────────────────────────────────── */
.app-alert {
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  border: 1px solid transparent;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.app-alert-success { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.app-alert-error   { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
.app-alert-warning { background: #fffbeb; color: #b45309; border-color: #fde68a; }

/* ── Breadcrumb ──────────────────────────────────────────────── */
.breadcrumb-app {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.breadcrumb-app a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color .15s;
}
.breadcrumb-app a:hover { color: var(--indigo); }
.breadcrumb-app .sep { color: var(--text-tertiary); }
.breadcrumb-app .current { color: var(--text-primary); font-weight: 500; }

/* ── Responsive tweaks ───────────────────────────────────────── */
@media (max-width: 768px) {
  .jobs-table thead { display: none; }
  .jobs-table tbody tr.job-row {
    display: block;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
  }
  .jobs-table tbody td {
    display: inline-block;
    padding: 2px 4px;
    border: none;
  }
  .job-description-preview { max-width: 100%; }
  .filter-bar .row { gap: 8px; }
}

/* =============================================================
   Proposal Review — Phase 2
   ============================================================= */

/* ── Proposal card ───────────────────────────────────────────── */
.proposal-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.proposal-card-approved {
  border-color: #86efac;
  box-shadow: 0 0 0 3px rgba(134,239,172,.2);
}
.proposal-card-rejected {
  opacity: .55;
}

/* ── Card header ─────────────────────────────────────────────── */
.proposal-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}
.proposal-variant-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--indigo);
  background: var(--indigo-muted);
  padding: 2px 10px;
  border-radius: 20px;
  letter-spacing: .02em;
}

/* ── Proposal status badges ──────────────────────────────────── */
.prop-status-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}
.prop-status-approved { background: #dcfce7; color: #166534; }
.prop-status-pending  { background: #fef9c3; color: #854d0e; }
.prop-status-rejected { background: #fee2e2; color: #991b1b; }
.prop-status-sent     { background: #dbeafe; color: #1e40af; }
.prop-status-draft    { background: var(--bg-subtle); color: var(--text-secondary); }

/* ── Upwork inline link (Detail sidebar) ─────────────────────── */
.upwork-job-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: #14a800;
  text-decoration: none;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid #14a80033;
  background: #14a80010;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.upwork-job-link:hover {
  background: #14a80020;
  border-color: #14a80066;
  color: #0d7a00;
}

/* ── Proposal status chips (jobs list) ───────────────────────── */
.prop-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: .02em;
  white-space: nowrap;
}
.prop-chip-none     { background: var(--bg-subtle); color: var(--text-tertiary); font-weight: 500; }
.prop-chip-draft    { background: #f1f5f9; color: #475569; }
.prop-chip-pending  { background: #fef9c3; color: #854d0e; }
.prop-chip-approved { background: #dcfce7; color: #166534; }
.prop-chip-sent     { background: #dbeafe; color: #1e40af; }

/* ── Hook section ────────────────────────────────────────────── */
.proposal-hooks {
  padding: 14px 16px;
  background: rgba(99,102,241,.04);
  border-bottom: 1px solid var(--border);
}
.proposal-hook-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--indigo);
  margin-bottom: 6px;
}
.proposal-hook-line {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.5;
}
.hook-line-2 {
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* ── Body text ───────────────────────────────────────────────── */
.proposal-body {
  padding: 16px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-primary);
  white-space: pre-wrap;
  border-bottom: 1px solid var(--border);
}
.proposal-body-preview {
  font-size: 13px;
  line-height: 1.75;
  color: #166534;
  white-space: pre-wrap;
  background: rgba(134,239,172,.1);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-top: 8px;
  max-height: 200px;
  overflow-y: auto;
}

/* ── Reasoning ───────────────────────────────────────────────── */
.proposal-reasoning {
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
}
.proposal-reasoning summary {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 0;
  user-select: none;
}
.proposal-reasoning-body {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  padding: 8px 0 4px;
  font-style: italic;
}

/* ── Action buttons ──────────────────────────────────────────── */
.proposal-actions {
  padding: 14px 16px;
}
.btn-proposal-approve {
  font-size: 13px;
  font-weight: 600;
  background: #16a34a;
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 18px;
  cursor: pointer;
  transition: background .15s;
}
.btn-proposal-approve:hover { background: #15803d; }

.btn-proposal-reject {
  font-size: 13px;
  font-weight: 500;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 16px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.btn-proposal-reject:hover { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

/* ── Rework input row ────────────────────────────────────────── */
.rework-form { border-top: 1px solid var(--border); padding-top: 12px; }
.rework-input-row { display: flex; gap: 8px; align-items: center; }
.rework-input {
  flex: 1;
  font-size: 13px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color .15s;
}
.rework-input:focus { border-color: var(--indigo); }
.btn-rework {
  font-size: 12px;
  font-weight: 600;
  background: var(--indigo);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.btn-rework:hover { background: var(--indigo-hover); }

/* ── Copy buttons ────────────────────────────────────────────── */
.btn-copy-proposal {
  font-size: 13px;
  font-weight: 600;
  background: #16a34a;
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 18px;
  cursor: pointer;
  transition: background .15s;
}
.btn-copy-proposal:hover { background: #15803d; }
.btn-copy-sm {
  font-size: 11px;
  font-weight: 600;
  background: var(--indigo);
  color: #fff;
  border: none;
  border-radius: var(--radius-xs);
  padding: 3px 10px;
  cursor: pointer;
  transition: background .15s;
}
.btn-copy-sm:hover { background: var(--indigo-hover); }
.copy-hint {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* ── Approved banner ─────────────────────────────────────────── */
.proposal-approved-banner {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: var(--radius);
  padding: 16px;
}

/* ── Generate Proposal button (on Jobs/Detail) ───────────────── */
.btn-generate-proposal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  background: var(--indigo);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 20px;
  cursor: pointer;
  transition: background .15s;
  width: 100%;
  justify-content: center;
}
.btn-generate-proposal:hover:not(:disabled) { background: var(--indigo-hover); }
.btn-generate-proposal:disabled {
  opacity: .6;
  cursor: not-allowed;
}
.proposal-view-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--indigo);
  text-decoration: none;
  padding: 8px 0;
  border-radius: var(--radius-sm);
  transition: background .15s;
}
.proposal-view-link:hover { background: var(--indigo-muted); color: var(--indigo-hover); }

/* ── Submitted Banner ─────────────────────────────────────────────────── */
.proposal-sent-banner {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: var(--radius);
  padding: 20px 24px;
}

/* ── Apply Workflow Box ───────────────────────────────────────────────── */
.apply-workflow-box {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
}
.apply-workflow-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.apply-workflow-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.apply-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.apply-step-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--indigo);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.apply-step-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.apply-step-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.5;
}
.apply-workflow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.apply-workflow-note {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* ── Open on Upwork button ────────────────────────────────────────────── */
.btn-open-upwork {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: #166534;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-open-upwork:hover { background: #dcfce7; border-color: #4ade80; color: #14532d; }

/* ── Copy & Open Upwork button (primary green) ───────────────────────── */
.btn-copy-open-upwork {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: #16a34a;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.btn-copy-open-upwork:hover  { background: #15803d; }
.btn-copy-open-upwork:active { transform: scale(0.98); }
.btn-copy-open-upwork.btn-sm-inline { padding: 8px 14px; font-size: 12px; }

/* ── Mark as Submitted button ────────────────────────────────────────── */
.btn-mark-sent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--indigo);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.btn-mark-sent:hover  { background: var(--indigo-hover); }
.btn-mark-sent:active { transform: scale(0.98); }

/* ── Sent confirmation chip ───────────────────────────────────────────── */
.sent-confirmation {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 20px;
  padding: 5px 12px;
}

/* ── Proposal card — Sent state ───────────────────────────────────────── */
.proposal-card-sent {
  border-color: #86efac;
  background: #f0fdf4;
  box-shadow: 0 0 0 2px rgba(22,163,74,.12);
}

/* ── Global Loader Overlay ───────────────────────────────────────────── */
.app-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}
.app-loader-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}
.app-loader-card {
  background: #fff;
  border-radius: 20px;
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0,0,0,0.04);
  max-width: 340px;
  width: 90%;
  text-align: center;
  animation: loader-card-in 0.2s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes loader-card-in {
  from { transform: scale(0.92) translateY(8px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);   opacity: 1; }
}
.app-loader-spinner {
  position: relative;
  width: 56px;
  height: 56px;
}
.app-loader-ring-track,
.app-loader-ring-fill {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.app-loader-ring-track {
  border: 4px solid #e2e8f0;
}
.app-loader-ring-fill {
  border: 4px solid transparent;
  border-top-color: var(--indigo);
  border-right-color: var(--indigo);
  animation: loader-spin 0.75s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes loader-spin {
  to { transform: rotate(360deg); }
}
.app-loader-dots {
  display: flex;
  gap: 6px;
  margin-top: -4px;
}
.app-loader-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--indigo);
  animation: loader-dot 1.2s ease-in-out infinite;
}
.app-loader-dots span:nth-child(2) { animation-delay: 0.2s; }
.app-loader-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes loader-dot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%            { transform: scale(1);   opacity: 1;   }
}
.app-loader-msg {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.app-loader-sub {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.6;
  min-height: 1em;
}

@media (max-width: 480px) {
  .app-loader-card { padding: 32px 28px; max-width: 90%; }
}

/* =============================================================
   Jobs List — Column Consolidation (UI cleanup)
   ============================================================= */

/* ── Combined Budget · Score cell ──────────────────────────────── */
.cell-budget-score .budget-line {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.cell-budget-score .budget-icon {
  color: var(--text-secondary);
  display: inline-flex;
}
.cell-budget-score .budget-suffix {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
}
.cell-budget-score .score-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.cell-budget-score .score-line .score-circle {
  width: 22px;
  height: 22px;
  font-size: 11px;
}

/* ── Combined Status · Proposal cell ───────────────────────────── */
.cell-status-proposal .proposal-secondary {
  margin-top: 4px;
  opacity: .9;
}

/* ── Client meta line under the title ──────────────────────────── */
.job-client-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  white-space: nowrap;   /* never break country / applicants / category / location mid-value */
  /* Still ONE row whenever it fits. The Upwork category joined this line and is the longest part
     ("Web, Mobile & Software Dev"), so wrapping is allowed as a last resort — without it a long
     category would widen the title column and push the row actions off. */
  flex-wrap: wrap;
  row-gap: 2px;
}
.job-client-meta .dot-sep {
  color: var(--text-tertiary);
}
/* Upwork L1 category — inline on the Jobs-list meta row, the slide panel's meta line and the
   Detail header meta line. Tinted so it reads as a label rather than as more free text next to the
   applicant count, and identical in all THREE places so the same value never looks like two
   different kinds of thing. Rendered ONLY when the job has one; there is no empty/placeholder
   state.

   It is used ALONE, never alongside .jd-val-text / .meta-text-sm: those are single-class selectors
   too, so specificity is equal and stylesheet order decides — .jd-val-text is defined later and
   would take back the colour in the panel only.

   font-size is pinned rather than inherited because the three hosts disagree (.job-client-meta 11,
   .jd-meta-line 12, .detail-meta-row inherits the body's 14) and an inherited size would make the
   chip noticeably larger on the Detail page than its 11px neighbours. */
.job-category-value {
  font-weight: 600;
  color: #4338ca;                        /* indigo-700 */
  background: rgba(99, 102, 241, .12);   /* soft indigo */
  padding: 0 5px;
  border-radius: 3px;
  font-size: 11px;
  white-space: nowrap;   /* the label is a phrase ("Web, Mobile & Software Dev") — never split it */
}

/* Non-US preferred freelancer location — inline on the meta row, value lightly highlighted
   (display only; no filter change). */
.job-client-meta .pref-loc-value {
  font-weight: 700;
  color: #b45309;                       /* amber-700 */
  background: rgba(245, 158, 11, .16);  /* soft highlight */
  padding: 0 4px;
  border-radius: 3px;
}

/* ── Skills "+N more" hover popover ────────────────────────────── */
.skill-more-hover {
  position: relative;
  cursor: default;
  outline: none;
}
.skill-more-popover {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 6px;
  min-width: 180px;
  max-width: 320px;
  flex-wrap: wrap;
  gap: 4px;
  z-index: 20;
}
.skill-more-hover:hover  .skill-more-popover,
.skill-more-hover:focus  .skill-more-popover,
.skill-more-hover:focus-within .skill-more-popover {
  display: flex;
}

/* =============================================================
   Jobs List — Slide Panel + Stacked Budget Cell  (Phase 3)
   ============================================================= */

/* ── Row selected highlight ─────────────────────────────────── */
.jobs-table tbody tr.job-row.is-selected,
.jobs-table tbody tr.job-row.is-selected:hover {
  background: var(--indigo-muted);
}

/* Prevent scroll while drawer is open */
body.no-scroll { overflow: hidden; }

/* ── Slide panel overlay ────────────────────────────────────── */
.job-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  z-index: 1040;
}
.job-drawer-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Slide panel (wider for two-column layout) ──────────────── */
.job-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(760px, 100vw);
  background: var(--bg-surface);
  transform: translateX(100%);
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
  z-index: 1041;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 32px rgba(15, 23, 42, .18);
  overflow: hidden;
}
.job-drawer.is-open { transform: translateX(0); }

/* ── Drawer header ──────────────────────────────────────────── */
.jd-header {
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
  flex-shrink: 0;
}

/* Top row: back arrow (icon) · title · proposal chip · assign control */
.jd-header-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Back arrow button — icon only */
.jd-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 5px 8px;
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.jd-close:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--text-tertiary);
}

/* Assign control */
.jd-assign-ctrl {
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-jd-assign {
  font-size: 12px;
  font-weight: 600;
  background: var(--indigo);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 5px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.btn-jd-assign:hover:not(:disabled) { background: var(--indigo-hover); }
.btn-jd-assign:disabled { opacity: .6; cursor: not-allowed; }

/* Title-wrap: row that fits chip inline when space allows, wraps chip below when title is long */
.jd-title-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 10px;
}

/* Title — grows to fill available width; min-basis keeps chip from squeezing it */
.jd-title {
  flex: 1 1 260px;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
  letter-spacing: -.01em;
  word-break: break-word;
}

/* Proposal chip — never stretches, anchors to top of the flex line */
#jd-proposal-header {
  flex: 0 0 auto;
  align-self: flex-start;
}
.jd-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.jd-posted-text { color: var(--text-tertiary); font-size: 12px; }

/* ── Single-column body ─────────────────────────────────────── */
.jd-body {
  flex: 1;
  overflow: hidden;
}
.jd-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Left column: description, skills, screening */
.jd-left {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 18px 20px;
  overscroll-behavior: contain;
}

/* Right column: info cards */
.jd-right {
  width: 210px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 16px 16px;
  border-left: 1px solid var(--border);
  background: var(--bg-subtle);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Each info item in right panel */
.jd-info-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.jd-info-item:first-child { padding-top: 4px; }
.jd-info-item:last-child  { border-bottom: none; }

.jd-info-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.jd-info-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

/* Client stats: stacked small lines */
.jd-client-country {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.jd-client-stat {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ── Description in left panel ──────────────────────────────── */
.jd-description {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  /* pre-line collapses runs of blank lines/spaces (Upwork text is newline-heavy)
     so the slider description stays compact while keeping real line breaks. */
  white-space: pre-line;
  word-break: break-word;
}

/* ── Screening questions list ───────────────────────────────── */
.jd-screening-list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.jd-screening-list li {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ── Drawer footer ──────────────────────────────────────────── */
.jd-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
  flex-shrink: 0;
}

/* ── Stacked Budget · Score cell (table) ────────────────────── */
.cell-budget-score {
  vertical-align: top;
  padding-top: 12px !important;
}
.bs-icon-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}

/* Colored icon badge wrap */
.bs-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}
.bs-icon-hourly { background: #eef2ff; color: #6366f1; }   /* indigo for hourly */
.bs-icon-fixed  { background: #f0fdf4; color: #16a34a; }   /* green for fixed   */

.bs-type-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-tertiary);
}
.bs-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 5px;
}
.budget-suffix {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  margin-left: 2px;
}
.bs-score-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Responsive: collapse right panel on small screens ──────── */
@media (max-width: 640px) {
  .job-drawer  { width: 100vw; }
  .jd-layout   { flex-direction: column; }
  .jd-right    { width: 100%; border-left: none; border-top: 1px solid var(--border); }
  .jd-left     { overflow-y: visible; }
  .jd-body     { overflow-y: auto; }
}

/* =============================================================
   Location Toggle Filter
   ============================================================= */
.loc-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.loc-btn {
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 5px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  transition: background .12s, color .12s;
  line-height: 1;
}
.loc-btn + .loc-btn { border-left: 1px solid var(--border); }
.loc-btn:hover:not(.loc-btn-active) { background: var(--bg-subtle); color: var(--text-primary); }
.loc-btn-active {
  background: var(--indigo);
  color: #fff;
  font-weight: 600;
}
.loc-count { font-size: 11px; opacity: .85; }

/* =============================================================
   "View Full Details" compact button in drawer right panel
   ============================================================= */
.jd-view-item {
  padding: 14px 0 4px;
}
.btn-jd-view-full {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--indigo);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--indigo);
  border-radius: var(--radius-sm);
  background: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.btn-jd-view-full:hover {
  background: var(--indigo-muted);
  color: var(--indigo-hover);
  border-color: var(--indigo-hover);
}

/* =============================================================
   Drawer — compact meta line (header row 2)
   ============================================================= */

/* Values strip: budget · assigned · client — no labels */
.jd-meta-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--border);
}
.jd-meta-vals {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 8px;
  flex: 1;
  min-width: 0;
}

/* Budget value with type icon */
.jd-val-budget {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Assigned / client text values */
.jd-val-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

/* Dot separator between values */
.jd-val-sep {
  font-size: 12px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

/* Small icon badge for the meta line (reuses hourly/fixed colour vars) */
.bs-icon-wrap-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  flex-shrink: 0;
}

/* Scrollable single-column body */
.jd-body-inner {
  height: 100%;
  overflow-y: auto;
  padding: 18px 20px;
  overscroll-behavior: contain;
}

/* ── Per-row Upwork + Details action links ──────────────────── */
.job-title-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.job-title-row .job-title-link {
  flex: 1;
  min-width: 0;
}
.job-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  /* always visible — no hover-only opacity */
}
.job-row-act-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.job-row-act-link:hover { background: var(--bg-subtle); color: var(--text-primary); }
.job-row-act-upwork {
  color: #14a800;
  border-color: rgba(20,168,0,.25);
  background: rgba(20,168,0,.06);
}
.job-row-act-upwork:hover { background: rgba(20,168,0,.12); color: #0d7a00; border-color: rgba(20,168,0,.4); }

/* ── Attachment awareness icon (paperclip) — shared across surfaces ── */
/* Subtle amber badge so attachment jobs are easy to spot at a glance. */
.attachment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #b45309;                       /* amber-700 — stronger than tertiary text */
  background: rgba(245, 158, 11, .12);  /* soft amber wash */
  border: 1px solid rgba(245, 158, 11, .35);
  border-radius: var(--radius-xs, 5px);
  padding: 2px;
  vertical-align: middle;
  cursor: default;
  transition: background .12s, color .12s, border-color .12s;
}
.attachment-icon svg { display: block; }
.attachment-icon:hover {
  color: #92400e;                       /* amber-800 */
  background: rgba(245, 158, 11, .20);
  border-color: rgba(245, 158, 11, .55);
}

/* ── Drawer reject button ────────────────────────────────────── */
.btn-jd-reject {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-jd-reject:hover { background: #fee2e2; border-color: #f87171; color: #991b1b; }

/* ── Skills strip (header area, directly below title row) ───── */
.jd-skills-strip {
  padding-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ── Drawer Upwork link — matches View Full Details button size ── */
.jd-meta-line .upwork-job-link {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
}

/* =============================================================
   Jobs Index — per-row Reject button
   ============================================================= */
.job-row-act-reject {
  color: #b91c1c;
  border-color: rgba(185,28,28,.25) !important;
  background: rgba(185,28,28,.06) !important;
  cursor: pointer;
}
.job-row-act-reject:hover {
  background: rgba(185,28,28,.14) !important;
  color: #991b1b !important;
  border-color: rgba(185,28,28,.45) !important;
}

/* =============================================================
   Auto-submit retry + failure reason
   Amber throughout, deliberately NOT the red used by Reject: retrying is a recoverable,
   non-destructive action and must not read as the dangerous one sitting next to it.
   ============================================================= */
.job-row-act-retry {
  color: #b45309;
  border-color: rgba(180,83,9,.25) !important;
  background: rgba(180,83,9,.06) !important;
  cursor: pointer;
}
.job-row-act-retry:hover {
  background: rgba(180,83,9,.14) !important;
  color: #92400e !important;
  border-color: rgba(180,83,9,.45) !important;
}

/* Drawer / detail Retry button — same shape as .btn-jd-reject, amber palette. */
.btn-jd-retry {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #b45309;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-jd-retry:hover { background: #fef3c7; border-color: #fbbf24; color: #92400e; }

/* Failure reason line in the Jobs list row, under the skills strip. Reuses the .status-error
   palette so it reads as the same "this failed" signal as the status badge. inline-flex so it
   hugs its text instead of drawing a full-width band across the row. */
.job-failure-reason {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  padding: 3px 8px;
  font-size: 11.5px;
  line-height: 1.4;
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-radius: var(--radius-xs, 4px);
}
.job-failure-reason .jfr-icon { flex-shrink: 0; }

/* Failure reason in the slide panel / detail page. */
.jd-failure-summary {
  font-size: 13px;
  font-weight: 600;
  color: #b91c1c;
  line-height: 1.45;
}

/* =============================================================
   Jobs Detail — inline score badge in header meta row
   ============================================================= */
.detail-score-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  min-width: 28px;
  white-space: nowrap;
  line-height: 1.4;
}

/* =============================================================
   Jobs Detail — below-title strip (Posted On · Client · Assigned)
   ============================================================= */
.jd-btm-strip {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 16px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex-wrap: wrap;
}
.jd-btm-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.jd-btm-right {
  text-align: right;
}
.jd-btm-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--text-tertiary);
}
.jd-btm-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.jd-client-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-secondary);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.jd-dot {
  color: var(--text-tertiary);
  font-size: 12px;
}
.jd-assigned-row {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.jd-assigned-row #jd-assign-name {
  font-weight: 600;
  color: var(--text-primary);
}
.jd-btm-lbl-sm {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-right: 3px;
}

/* ── Detail: posted-date block (time-ago primary + exact secondary) ── */
.detail-posted-block {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  vertical-align: middle;
}
.posted-ago {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.2;
}
.posted-exact {
  font-size: 10px;
  color: var(--text-tertiary);
  line-height: 1.2;
}

/* ── Detail: single-line client + assigned in meta-row ──────── */
.detail-meta-client {
  font-size: 12px;
  color: var(--text-secondary);
}
.detail-meta-client #jd-assign-name {
  font-weight: 600;
  color: var(--text-primary);
}

/* =============================================================
   US Only badge + Detail page redesign  (Phase 4)
   ============================================================= */

/* ── US Only label — plain icon + text, no badge box ───────── */
.us-only-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1;   /* prevent label from pushing title row taller */
}
.us-only-label svg { flex-shrink: 0; }

/* ── Detail page: title row (title + label left | assign ctrl right) ── */
.detail-title-row {
  display: flex;
  align-items: center;   /* vertically centre title against assign control */
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.detail-title-left {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;   /* icon vertically centred with title text */
  gap: 10px;
  flex-wrap: wrap;
}
.detail-title-left .detail-title {
  margin-bottom: 0;
}

/* ── Assign control (top-right): label LEFT of select + button ── */
.detail-assign-ctrl {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.detail-assign-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ── Detail meta row: Upwork + Reject buttons — uniform size ─── */
.detail-meta-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.detail-action-btn {
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  border-radius: var(--radius-sm) !important;
}

/* ── Detail meta row — separator dots ──────────────────────── */
.detail-meta-row .jd-val-sep {
  color: var(--text-tertiary);
  font-size: 12px;
  flex-shrink: 0;
  margin: 0 2px;
}

/* ── Detail inline budget (icon + value) ───────────────────── */
.detail-budget-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  vertical-align: middle;
}

/* ── Detail page: client history Row 2 ─────────────────────── */
.detail-client-meta {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ── Slider: client history Row 3 ──────────────────────────── */
.jd-client-history-line {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-secondary);
}
.jd-client-history-line .jd-val-text {
  color: var(--text-secondary);
}

/* ── Job notes ────────────────────────────────────────────────────────────── */

/* Note count in the Jobs list row, directly under the skills strip. Same geometry as
   .job-failure-reason (they sit one above the other) but a neutral indigo palette — a note count
   is information, not a problem, and must not read as another error chip. */
.job-note-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 3px 8px;
  font-size: 11.5px;
  line-height: 1.4;
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
  border-radius: var(--radius-xs, 4px);
}
/* REQUIRED, not belt-and-braces: [hidden] is a UA-stylesheet rule, and the author-level
   `display: inline-flex` above beats it regardless of specificity. Without this the count chip
   stays visible at zero notes — reading "This job has 0 Notes" on every job. (The Notes cards get
   away with a bare `hidden` because .info-card sets no display of its own.) */
.job-note-count[hidden] { display: none; }

/* Notes list. Rendered as a table that reuses .jobs-table wholesale — same uppercase header
   band, same 14px/16px cell padding, same row separator and hover — so the notes read as the
   same kind of list as the Jobs page itself. Only the row rules below are notes-specific;
   .jobs-table's own row rules are scoped to tr.job-row and do not apply here. */
.notes-table { table-layout: auto; }
/* The Jobs page's table has no card header above it, so .jobs-table gives its thead a grey band.
   Here the card's own "NOTES" header already supplies that band, and a second one directly under
   it reads as a rendering glitch — so the column labels keep their uppercase/letterspaced styling
   and their divider, but sit on the card background. */
.notes-table thead th {
  background: transparent;
  padding-top: 12px;
  padding-bottom: 8px;
}
.notes-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background .1s ease;
}
.notes-table tbody tr:last-child { border-bottom: none; }
.notes-table tbody tr:hover { background: #f8f9ff; }
.notes-table tbody td { vertical-align: top; }

/* Note is the only column allowed to wrap; the other three hug their content so a long note
   never squeezes the date onto two lines. */
.notes-table .col-note     { width: 100%; }
.notes-table .col-cat,
.notes-table .col-by,
.notes-table .col-on       { white-space: nowrap; width: 1%; }

/* Category chip. The per-category tints are applied by a modifier class derived from the category
   NAME through a letters-only filter in job-notes.js, so an unexpected value can never inject a
   class — it just falls back to this neutral base. */
.job-note-cat {
  display: inline-block;
  padding: 2px 9px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 999px;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.job-note-cat--rejection { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.job-note-cat--review    { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.job-note-cat--issue     { background: #fffbeb; color: #b45309; border-color: #fde68a; }

/* Matches .job-client-meta on the Jobs list. */
.job-note-meta { font-size: 11px; color: var(--text-tertiary); }

/* pre-line keeps the line breaks the author typed into the multi-line box; break-word stops an
   unbroken URL widening the panel. Same treatment as .jd-description / .detail-description. */
.job-note-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-line;
  word-break: break-word;
  min-width: 220px;
}

/* Save-confirmation toast. It must float ABOVE the slide panel (z-index 1041) and Bootstrap's
   modal (1055) — the page's own #app-toast-host sits at the top of the document, where an open
   drawer hides it completely, which is why notes get their own. */
.job-note-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1090;
  margin: 0;
  box-shadow: var(--shadow-lg, 0 10px 30px rgba(15, 23, 42, .18));
  transition: opacity .4s ease;
}

/* ── Add Note dialog ──────────────────────────────────────────────────────
   Bootstrap supplies the shell; everything inside is restyled to the app's own language
   (.form-label-custom / .form-control-custom / .btn-app-*) so it does not read as a stock
   Bootstrap modal dropped into the page. No new colours are introduced — the indigo, the border
   and the surface tokens are the same ones the rest of the app uses. */
#jobNoteModal .modal-dialog { max-width: 580px; }   /* a little wider than Bootstrap's 500 */

#jobNoteModal .modal-content {
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(15, 23, 42, .25);
}

/* Header band matches .info-card-header, so the dialog reads as part of the same family. */
#jobNoteModal .modal-header {
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  padding: 13px 20px;
}
#jobNoteModal .modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
#jobNoteModal .modal-body   { padding: 18px 20px; }

#jobNoteModal .modal-footer {
  border-top: 1px solid var(--border);
  padding: 12px 20px;
  gap: 8px;
}
/* Bootstrap puts .5rem margins on every footer child, which fights `gap` and makes the two
   buttons sit unevenly. Zero them and let gap do the spacing. */
#jobNoteModal .modal-footer > * { margin: 0; }
#jobNoteModal .modal-footer button { cursor: pointer; }

/* The Create Job form's 160px textarea is far too tall inside a dialog. */
#jobNoteModal textarea.form-control-custom { min-height: 118px; }

/* Required-field marker, in the same rose the custom inputs use for .is-invalid. */
.job-note-req { color: #f43f5e; font-weight: 700; }