/* Phase 1 — extracted legacy CSS from base.html.
 *
 * These classes are referenced by existing templates (search, browse,
 * profile, dashboard, etc.) and by load-bearing inline JS in base.html
 * (.job-list-toolbar, .job-list-group, .col-chooser-menu, etc.).
 *
 * Restyled to the new tokens but kept structurally identical so the
 * inline JS in base.html continues to work without modification.
 *
 * Each per-screen phase replaces uses of these classes with the new
 * macros. This file shrinks over time and is deleted after Phase 12.
 */

body { line-height: 1.6; min-height: 100vh; -moz-osx-font-smoothing: grayscale; }

/* Material Symbols inherit the dark-theme weight. Keep the variation
 * settings, but they now sit on light paper. */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

.no-scrollbar::-webkit-scrollbar { display: none; }

/* ─────────────────────────────────────────────────────────────
   Page layout (legacy `.page` preserved for inherited templates)
   ───────────────────────────────────────────────────────────── */
.page {
  max-width: 1440px;
  margin: 0 auto;
  padding: 6rem 1.5rem 4rem;
}
.page-header { margin-bottom: 1.5rem; }
.page-header h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.page-header p {
  color: var(--ink-4);
  margin-top: 0.35rem;
  font-size: 0.95rem;
}

h1, h2, h3, h4, h5 { font-family: var(--font-display); letter-spacing: -0.02em; }

/* ─────────────────────────────────────────────────────────────
   Cards
   ───────────────────────────────────────────────────────────── */
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  color: var(--ink);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.stat-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 1.25rem;
  text-align: center;
  transition: border-color 0.2s, transform 0.2s;
}
.stat-card:hover { border-color: var(--rule-strong); }
.stat-card .number {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.03em;
}
.stat-card .label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-4);
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ─────────────────────────────────────────────────────────────
   Badges
   ───────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: var(--r-pill);
  font-size: 0.7rem;
  font-weight: 500;
  margin-right: 0.25rem;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
}
.badge-outside { background: var(--success-tint); color: var(--success); border-color: var(--success-tint); }
.badge-inside  { background: var(--danger-tint); color: var(--danger); border-color: var(--danger-tint); }
.badge-unknown { background: var(--paper-2); color: var(--ink-4); border-color: var(--rule); }
.badge-remote  { background: var(--accent-tint); color: var(--accent); border-color: var(--accent-tint-2); }
.badge-clearance { background: var(--accent-tint); color: var(--accent); border-color: var(--accent-tint-2); }
.badge-source  { background: var(--paper-2); color: var(--ink-3); border-color: var(--rule); }
.badge-sector  { background: var(--accent-tint); color: var(--accent); border-color: var(--accent-tint-2); }
.badge-expired { background: var(--danger-tint); color: var(--danger); border-color: var(--danger-tint); }

/* ─────────────────────────────────────────────────────────────
   Job table (legacy)
   ───────────────────────────────────────────────────────────── */
.job-table { width: 100%; table-layout: fixed; }
.job-table td, .job-table th {
  vertical-align: top;
  padding: 0.5rem 0.5rem;
  font-size: 0.78rem;
  color: var(--ink);
}
.job-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-table td.wrap-cell { white-space: normal; word-break: break-word; }
.job-table td.tags-cell { white-space: normal; }
.job-table td.action-cell { white-space: nowrap; }
.job-card { transition: background 0.2s; }
.job-card:hover { background: var(--accent-tint); }
.job-title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--accent); }
.job-meta { font-size: 0.82rem; color: var(--ink-4); margin-top: 0.25rem; }
.job-meta span { margin-right: 1rem; }
.job-rate { text-align: right; white-space: nowrap; }
.job-rate .rate { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--ink); }
.job-score { font-size: 0.72rem; color: var(--ink-4); margin-top: 0.2rem; }

@media (max-width: 1200px) {
  .job-table td, .job-table th { padding: 0.3rem 0.35rem; font-size: 0.72rem; }
  .badge { font-size: 0.62rem; padding: 0.1rem 0.35rem; }
  .btn-sm { padding: 0.2rem 0.5rem; font-size: 0.7rem; }
}
@media (max-width: 900px) {
  .job-table { table-layout: auto; }
  .job-table td, .job-table th { padding: 0.25rem 0.3rem; font-size: 0.68rem; }
  .badge { font-size: 0.58rem; padding: 0.1rem 0.3rem; margin-right: 0.15rem; }
  .btn-sm { padding: 0.15rem 0.4rem; font-size: 0.65rem; }
}

/* ─────────────────────────────────────────────────────────────
   Forms
   ───────────────────────────────────────────────────────────── */
.form-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin-bottom: 1.5rem; }
.form-group { display: flex; flex-direction: column; gap: 0.3rem; }
.form-group label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
input[type=text], input[type=number], input[type=url], input[type=email], input[type=password], select, textarea {
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  font-size: 0.88rem;
  background: var(--paper);
  color: var(--ink);
  outline: none;
  font-family: var(--font-sans);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input::placeholder, textarea::placeholder { color: var(--ink-5); }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

select option { background: var(--paper); color: var(--ink); }

button[type=submit], .btn {
  padding: 0.55rem 1.2rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--r-md);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.15s, filter 0.15s;
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
button[type=submit]:hover, .btn:hover { text-decoration: none; filter: brightness(1.08); }
button[type=submit]:active, .btn:active { transform: scale(0.97); }
.btn-sm { padding: 0.35rem 0.8rem; font-size: 0.78rem; }

/* ─────────────────────────────────────────────────────────────
   Alerts
   ───────────────────────────────────────────────────────────── */
.alert {
  padding: 0.9rem 1.2rem;
  border-radius: var(--r-md);
  margin-bottom: 1rem;
  font-size: 0.9rem;
  border: 1px solid transparent;
}
.alert-info { background: var(--accent-tint); color: var(--accent); border-color: var(--accent-tint-2); }
.alert-warn { background: var(--warning-tint); color: var(--warning); border-color: var(--warning-tint); }

/* ─────────────────────────────────────────────────────────────
   Column chooser — selectors load-bearing for base.html JS
   ───────────────────────────────────────────────────────────── */
.col-chooser { position: relative; display: inline-block; }
.col-chooser-btn {
  padding: 0.4rem 0.8rem;
  font-size: 0.78rem;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--ink-3);
  font-weight: 500;
  font-family: var(--font-sans);
}
.col-chooser-btn:hover { border-color: var(--accent); color: var(--ink); }
.col-chooser-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 110%;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  z-index: 200;
  min-width: 180px;
  padding: 0.4rem 0;
}
.col-chooser-menu.open { display: block; }
.col-chooser-menu label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.8rem;
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  color: var(--ink);
}
.col-chooser-menu label:hover { background: var(--paper-2); }

/* ─────────────────────────────────────────────────────────────
   Job list shell — selectors load-bearing for base.html JS
   ───────────────────────────────────────────────────────────── */
.job-list-toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.job-list-grouping { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.job-list-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; flex: 1 1 540px; }
.job-list-filter { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.job-list-filter label { font-size: 0.68rem; font-weight: 500; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-mono); }
.job-list-filter input { width: 100%; padding: 0.4rem 0.55rem; font-size: 0.8rem; }
.job-list-group-host { display: grid; gap: 0.75rem; padding: 1rem; }
.job-list-group {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.job-list-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  user-select: none;
}
.job-list-group-header:hover { background: var(--paper-3); }
.job-list-group-chevron { font-size: 0.7rem; transition: transform 0.2s; display: inline-block; margin-right: 0.3rem; color: var(--ink-4); }
.job-list-group.collapsed .job-list-group-chevron { transform: rotate(-90deg); }
.job-list-group.collapsed > table { display: none; }
.job-list-group.collapsed > .job-list-group-header { border-bottom: none; }
.job-list-group-title { font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; color: var(--accent); }
.job-list-group-count { font-size: 0.74rem; color: var(--ink-4); }

.job-table th.job-list-sortable { cursor: pointer; user-select: none; position: relative; }
.job-table th.job-list-sortable:hover { color: var(--accent); }
.job-list-sort-arrow { font-size: 0.55rem; margin-left: 0.2rem; opacity: 0.35; }
.job-list-sort-arrow.active { opacity: 1; color: var(--accent); }

/* ─────────────────────────────────────────────────────────────
   Inline editing — selectors load-bearing for base.html JS
   ───────────────────────────────────────────────────────────── */
[data-editable] { cursor: pointer; position: relative; }
[data-editable]:hover { background: var(--accent-tint); border-radius: var(--r-xs); }
[data-editable]::after { content: '✎'; font-size: 0.55rem; opacity: 0; margin-left: 0.2rem; transition: opacity 0.15s; vertical-align: super; }
[data-editable]:hover::after { opacity: 0.5; color: var(--accent); }
.inline-edit-select, .inline-edit-input {
  font-size: 0.78rem;
  padding: 2px 6px;
  border: 1px solid var(--accent);
  border-radius: var(--r-xs);
  background: var(--paper);
  color: var(--ink);
  outline: none;
}
.inline-edit-input { width: 100%; box-sizing: border-box; }
.inline-edit-saving { opacity: 0.5; pointer-events: none; }

/* Misc */
.text-muted { color: var(--ink-4); font-size: 0.85rem; }
hr { border: none; border-top: 1px solid var(--rule); margin: 1.5rem 0; }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; color: var(--ink); }
th {
  text-align: left;
  padding: 0.55rem 0.75rem;
  background: var(--paper-2);
  font-weight: 500;
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--ink-4);
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
}
td { padding: 0.6rem 0.75rem; border-top: 1px solid var(--rule); }

details summary { cursor: pointer; color: var(--ink); }
details summary:hover { color: var(--accent); }
code { background: var(--paper-2); padding: 1px 5px; border-radius: var(--r-xs); font-size: 0.82em; color: var(--ink-2); }