/* JobLink v2 — Claude Design system rewrite */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* === DESIGN TOKENS === */
/* Dark theme is default (matches existing behavior) */
:root {
  --bg:#0f131b; --surface:#181d27; --surface-2:#13171f; --surface-3:#242b39;
  --border:#2a3140; --border-strong:#3a4353;
  --text:#eef1f7; --text-muted:#a6afc0; --text-subtle:#727c8e;
  --brand:#6172f7; --on-brand:#ffffff;
  --brand-soft:color-mix(in srgb, var(--brand) 14%, var(--surface));
  --brand-strong:color-mix(in srgb, var(--brand) 84%, #000);
  --blue:#6aa5ff; --blue-soft:#182339;
  --amber:#e6b15a; --amber-soft:#2f2716;
  --green:#5cc98a; --green-soft:#163325;
  --violet:#b499fb; --violet-soft:#251d3d;
  --red:#f2837a; --red-soft:#321c1c;
  --radius:14px; --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 1px 3px rgba(0,0,0,.4),0 14px 34px -12px rgba(0,0,0,.55);
  --ring:0 0 0 3px color-mix(in srgb, var(--brand) 24%, transparent);
}

/* Light mode overrides — opt-in via html.light-mode */
html.light-mode {
  --bg:#eef1f8; --surface:#ffffff; --surface-2:#f6f8fc; --surface-3:#eef1f7;
  --border:#e5e9f2; --border-strong:#d5dbe8;
  --text:#0f1728; --text-muted:#59617a; --text-subtle:#9aa2b6;
  --brand:#3d4ee6; --on-brand:#ffffff;
  --brand-soft:color-mix(in srgb, var(--brand) 14%, var(--surface));
  --brand-strong:color-mix(in srgb, var(--brand) 84%, #000);
  --blue:#2563eb; --blue-soft:#e6f0ff;
  --amber:#b26a06; --amber-soft:#f9ecd4;
  --green:#10863f; --green-soft:#dcf3e5;
  --violet:#7333e0; --violet-soft:#eee4fd;
  --red:#d3372b; --red-soft:#fbe6e4;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 1px 3px rgba(16,24,40,.05),0 8px 24px -8px rgba(16,24,40,.14);
  --ring:0 0 0 3px color-mix(in srgb, var(--brand) 24%, transparent);
}

/* === RESET + BASE === */
* { box-sizing:border-box; margin:0; }
html,body { padding:0; }
body { background:var(--bg); color:var(--text); font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input, select, textarea { font-family:inherit; outline:none; }
a { color:var(--brand); text-decoration:none; }
a:hover { color:var(--brand-strong); }

/* Scrollbar */
::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:99px; border:3px solid var(--surface); }
::-webkit-scrollbar-track { background:transparent; }

/* Animations */
@keyframes fadeUp { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:none;} }

/* === TOP BAR / NAV === */
nav.topbar {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; height:64px; padding:0 40px;
  background:var(--surface); border-bottom:1px solid var(--border); box-shadow:var(--shadow-sm);
}
nav.topbar .brand {
  display:flex; align-items:center; gap:9px; margin-right:20px;
  font-size:19px; font-weight:800; letter-spacing:-.03em; color:var(--text);
}
nav.topbar .brand::before {
  content:''; display:block; width:30px; height:30px; border-radius:9px;
  background:var(--brand);
  background-image:url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 17H7A5 5 0 0 1 7 7h2'/%3E%3Cpath d='M15 7h2a5 5 0 0 1 0 10h-2'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
}
nav.topbar .spacer { flex:1; }
nav.topbar .nav-links { display:flex; gap:4px; }
nav.topbar .nav-links a {
  display:inline-flex; align-items:center; padding:8px 15px; border-radius:var(--radius-sm);
  font-size:14px; font-weight:600; color:var(--text-muted); border-bottom:none;
  transition:background .12s, color .12s;
}
nav.topbar .nav-links a:hover { background:var(--surface-3); color:var(--text); }
nav.topbar .nav-links a.active {
  background:var(--brand-soft); color:var(--brand); font-weight:700;
}
nav.topbar button {
  display:flex; align-items:center; gap:7px; padding:8px 14px; border-radius:var(--radius-sm);
  font-size:13px; font-weight:600; color:var(--text-muted); border:1px solid var(--border); background:var(--surface-2);
}
nav.topbar button:hover { background:var(--surface-3); color:var(--text); }
nav.topbar #whoami { font-size:13px; font-weight:600; color:var(--text-muted); margin-right:8px; }

/* Theme toggle */
.theme-toggle {
  width:38px; height:38px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); border:1px solid var(--border); background:var(--surface-2); padding:0; margin-right:8px;
}
.theme-toggle:hover { background:var(--surface-3); color:var(--text); }
.theme-toggle svg { width:18px; height:18px; }

/* === MAIN CONTENT === */
main.page { max-width:1400px; margin:0 auto; padding:30px 40px 60px; }
h1.pagetitle { font-size:27px; font-weight:800; letter-spacing:-.02em; margin-bottom:8px; }

/* === CARDS === */
.card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow-sm); margin-bottom:16px;
}

/* === STATS GRID === */
.grid { display:grid; gap:16px; }
.grid.stats { grid-template-columns:repeat(4,1fr); }
.stat { text-align:left; padding:18px 18px 16px; position:relative; }
.stat .num { font-size:30px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--text); }
.stat .lbl { font-size:13px; font-weight:600; color:var(--text-muted); margin-bottom:12px; }

/* KPI icon badges */
.stat .icon-badge {
  position:absolute; top:18px; right:18px;
  width:32px; height:32px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
}
.stat .icon-badge.blue { background:var(--blue-soft); color:var(--blue); }
.stat .icon-badge.violet { background:var(--violet-soft); color:var(--violet); }
.stat .icon-badge.amber { background:var(--amber-soft); color:var(--amber); }
.stat .icon-badge.green { background:var(--green-soft); color:var(--green); }

/* === PILLS / BADGES === */
.pill {
  display:inline-flex; align-items:center; justify-content:center; height:auto;
  padding:4px 11px; border-radius:99px; font-size:12px; font-weight:700; white-space:nowrap;
}
.pill.Published { background:var(--green-soft); color:var(--green); }
.pill.Unpublished { background:var(--surface-3); color:var(--text-muted); }
.pill.Complete { background:var(--violet-soft); color:var(--violet); }

/* === BUTTONS === */
button.btn {
  padding:10px 18px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:700;
  background:var(--brand); color:var(--on-brand); border:0; cursor:pointer; box-shadow:var(--shadow-sm);
  transition:background .15s;
}
button.btn:hover { background:var(--brand-strong); }
button.btn.gold { background:var(--amber); color:var(--on-brand); font-weight:700; }
button.btn.ghost {
  background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border);
  box-shadow:none;
}
button.btn.ghost:hover { background:var(--surface-3); color:var(--text); }
button.btn.sm { padding:6px 12px; font-size:12.5px; }
button.btn:disabled { opacity:.5; cursor:default; }

/* === INPUTS / FORMS === */
input, select, textarea {
  font:inherit; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm);
  width:100%; background:var(--surface-2); color:var(--text); font-size:14px;
}
input:focus, select:focus, textarea:focus {
  border-color:var(--brand); box-shadow:var(--ring); background:var(--surface);
}
select option { background:var(--surface); color:var(--text); }
label.f { display:block; margin-bottom:12px; font-size:12.5px; font-weight:600; color:var(--text-muted); }
label.f input, label.f select, label.f textarea { margin-top:6px; }

/* === FILTERS === */
.filters {
  display:inline-flex; background:var(--surface-2); border:1px solid var(--border);
  border-radius:99px; padding:3px; gap:2px; margin-bottom:14px;
}
.filters button {
  padding:7px 14px; border-radius:99px; font-size:12.5px; font-weight:700;
  color:var(--text-muted); transition:all .12s; background:none; border:none;
}
.filters button.on {
  background:var(--brand); color:var(--on-brand); box-shadow:var(--shadow-sm);
}
.filters button:hover:not(.on) { color:var(--text); }

/* Category chip filters */
.cat-filters { display:flex; flex-wrap:wrap; gap:8px; }
.cat-filters button {
  padding:7px 14px; border-radius:99px; font-size:12.5px; font-weight:700;
  color:var(--text-muted); background:var(--surface-2); border:1px solid var(--border);
  transition:all .12s;
}
.cat-filters button.on {
  background:var(--brand); color:var(--on-brand); border-color:var(--brand);
}

/* === TABLES === */
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th {
  text-align:left; font-size:11px; font-weight:700; letter-spacing:.06em;
  color:var(--text-subtle); padding:12px 8px; border-bottom:1px solid var(--border);
  text-transform:uppercase;
}
td { padding:14px 8px; border-bottom:1px solid var(--border); vertical-align:middle; }
tr:hover { background:var(--surface-2); }
td a { color:var(--brand); font-weight:700; letter-spacing:-.01em; }

/* === SORT SELECT === */
.sort-select {
  padding:9px 12px; font-size:13.5px; font-weight:600; color:var(--text);
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  width:auto; cursor:pointer;
}

/* === PIPELINE CONTROLS === */
.pipeline-head {
  display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:14px;
}
.pipeline-head h2 { font-size:16px; font-weight:800; letter-spacing:-.01em; margin:0; }
.pipeline-controls { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; align-items:center; }

/* Preview button */
.preview-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:700;
  color:var(--brand); background:var(--brand-soft);
  border:1px solid color-mix(in srgb, var(--brand) 24%, transparent);
  cursor:pointer; white-space:nowrap;
}
.preview-btn:hover { background:color-mix(in srgb, var(--brand) 18%, var(--surface)); }

/* Pipeline search */
.pipeline-search { position:relative; flex:1; min-width:220px; }
.pipeline-search svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-subtle); }
.pipeline-search input {
  width:100%; padding:9px 12px 9px 36px; font-size:13.5px; color:var(--text);
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
}
.pipeline-search input:focus { border-color:var(--brand); box-shadow:var(--ring); background:var(--surface); }

/* Pipeline interest badge */
.interest { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-width:46px; height:26px; padding:0 9px; border-radius:8px; font-size:.82rem; font-weight:700; font-variant-numeric:tabular-nums; }
.interest.has { background:var(--amber-soft); color:var(--amber); }
.interest.none { background:var(--surface-3); color:var(--text-subtle); }

/* Pipeline table columns */
.col-company { font-size:13px; color:var(--text-muted); }
.col-pay { font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.jo-sub { font-size:12px; color:var(--text-subtle); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }

/* === PIPELINE SECTIONS (JO Detail page) === */
.pipeline-section {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden; margin-bottom:14px;
}
.pipeline-section-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; cursor:pointer; user-select:none;
}
.pipeline-section-header:hover { background:var(--surface-2); }
.pipeline-section-header h2, .pipeline-section-header h3 {
  font-size:15.5px; font-weight:800; letter-spacing:-.01em; margin:0;
  display:flex; align-items:center; gap:12px;
}
.pipeline-section-body { display:none; padding:0 20px 8px; }
.pipeline-section-body.open { display:block; }
.pipeline-badge { font-size:12px; font-weight:700; padding:4px 11px; border-radius:99px; min-width:26px; text-align:center; display:inline-flex; align-items:center; justify-content:center; }
.badge-interested { background:var(--blue-soft); color:var(--blue); }
.badge-yeslisted { background:var(--amber-soft); color:var(--amber); }
.badge-confirmed { background:var(--green-soft); color:var(--green); }
.badge-filled { background:var(--violet-soft); color:var(--violet); }
.badge-ruledout { background:var(--red-soft); color:var(--red); }

/* Colored left-border on stage cards */
.section-interested { border-left:4px solid var(--blue); }
.section-yeslisted { border-left:4px solid var(--amber); }
.section-confirmed { border-left:4px solid var(--green); }
.section-filled { border-left:4px solid var(--violet); }
.section-ruledout { border-left:4px solid var(--red); }

/* Colored dots */
.stage-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.stage-dot.interested { background:var(--blue); }
.stage-dot.yeslisted { background:var(--amber); }
.stage-dot.confirmed { background:var(--green); }
.stage-dot.filled { background:var(--violet); }
.stage-dot.ruledout { background:var(--red); }

/* === ROW ACTION BUTTONS === */
.row-btn {
  display:inline-flex; align-items:center; justify-content:center; height:28px;
  padding:0 12px; border:1px solid transparent; border-radius:8px;
  font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap; transition:all .12s;
}
.row-btn:disabled { opacity:.4; cursor:not-allowed; }
.btn-yeslist { background:var(--amber-soft); color:var(--amber); }
.btn-yeslist:hover { background:color-mix(in srgb, var(--amber) 22%, var(--surface)); }
.btn-confirm { background:var(--green-soft); color:var(--green); }
.btn-confirm:hover { background:color-mix(in srgb, var(--green) 22%, var(--surface)); }
.btn-fill { background:var(--violet-soft); color:var(--violet); }
.btn-fill:hover { background:color-mix(in srgb, var(--violet) 22%, var(--surface)); }
.btn-ruleout { background:var(--red-soft); color:var(--red); }
.btn-ruleout:hover { background:color-mix(in srgb, var(--red) 18%, var(--surface)); }
.btn-restore { background:var(--surface-3); color:var(--text-muted); }
.btn-restore:hover { background:var(--border); color:var(--text); }
.act-group { display:inline-flex; gap:6px; flex-wrap:wrap; }

/* === TABS (Admin page) === */
.tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.tabs button {
  padding:8px 15px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:600;
  color:var(--text-muted); background:var(--surface-2); border:1px solid var(--border);
}
.tabs button.on {
  background:var(--brand); color:var(--on-brand); border-color:var(--brand); font-weight:700;
}
.tabs button:hover:not(.on) { background:var(--surface-3); color:var(--text); }

/* === TOAST === */
.toast {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--surface); color:var(--text); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:11px 20px; font-size:14px; font-weight:600;
  box-shadow:var(--shadow); opacity:0; transition:opacity .25s; pointer-events:none; z-index:50;
}
.toast.show { opacity:1; }

/* === BLAST CARDS === */
.blast-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm); margin-bottom:10px; overflow:hidden;
}
.blast-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; cursor:pointer; gap:14px; flex-wrap:wrap;
}
.blast-header:hover { background:var(--surface-2); }
.blast-detail { display:none; padding:0 18px 14px; }
.blast-detail.open { display:block; }

/* Blast number badge */
.blast-num {
  width:38px; height:38px; border-radius:10px; background:var(--brand-soft); color:var(--brand);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex-shrink:0;
}

/* === COMPLETED SECTION === */
.completed-toggle { display:flex; align-items:center; gap:10px; padding:14px 18px; cursor:pointer; user-select:none; border-top:1px solid var(--border); }
.completed-toggle h3 { font-size:.92rem; font-weight:700; color:var(--text); margin:0; }
.completed-count { background:var(--green-soft); color:var(--green); font-size:12px; font-weight:700; padding:2px 9px; border-radius:6px; }
.completed-body { display:none; }
.completed-body.open { display:block; }

/* === MODAL === */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:1000; justify-content:center; align-items:flex-start; padding:40px 20px; overflow-y:auto; backdrop-filter:blur(4px); }
.modal-overlay.open { display:flex; }
.modal { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); width:100%; max-width:700px; padding:24px; position:relative; box-shadow:var(--shadow); }
.modal h2 { margin:0 0 16px; font-size:17px; font-weight:800; }
.modal .close-btn { position:absolute; top:12px; right:16px; background:none; border:none; color:var(--text-muted); font-size:1.4rem; cursor:pointer; }
.modal .f { display:block; margin-bottom:10px; }
.modal .f label { display:block; font-size:12.5px; font-weight:600; color:var(--text-muted); margin-bottom:3px; }
.modal .f input, .modal .f select, .modal .f textarea { width:100%; }
.modal .f textarea { min-height:60px; resize:vertical; }
.modal .btn-row { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }

/* === JO DETAIL HEADER === */
.jo-header { position:relative; }
.jo-header h1 { font-size:25px; font-weight:800; letter-spacing:-.02em; margin:0 0 4px; }
.jo-meta { display:flex; flex-wrap:wrap; gap:20px; margin-top:14px; }
.jo-meta span { display:flex; flex-direction:column; gap:2px; }
.jo-meta .meta-label { font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--text-subtle); text-transform:uppercase; }
.jo-meta .meta-value { font-size:14px; font-weight:600; }
.edit-toggle { position:absolute; top:18px; right:18px; }
.jo-edit-form { display:none; margin-top:14px; }
.jo-edit-form.open { display:block; }
.jo-edit-form .row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.jo-edit-form .btn-row { display:flex; gap:8px; margin-top:12px; }

/* === BACK LINK === */
.back-link { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--brand); margin-bottom:18px; }
.back-link:hover { color:var(--brand-strong); }

/* === MISC HELPERS === */
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.mut { color:var(--text-muted); font-size:13px; }
.half { max-width:520px; overflow-wrap:break-word; word-wrap:break-word; }
.edit-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:8px; padding:10px 0; border-bottom:1px solid var(--border); }
.edit-row input, .edit-row select { height:32px; padding:0 8px; width:auto; font-size:13px; }
.edit-row .user-label { font-weight:600; min-width:80px; }
.whippy-users-badge { display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:99px; background:var(--green-soft); color:var(--green); font-size:12.5px; font-weight:700; }
.verified-badge { display:inline-block; background:var(--green-soft); color:var(--green); font-size:12px; font-weight:700; padding:1px 7px; border-radius:4px; }
.unverified-badge { display:inline-block; background:var(--red-soft); color:var(--red); font-size:12px; font-weight:700; padding:1px 7px; border-radius:4px; }

/* Changelog */
.cl-entry { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:10px; }
.cl-entry .cl-header { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.cl-version-badge { display:inline-block; background:var(--blue-soft); color:var(--blue); font-size:12px; font-weight:700; padding:3px 10px; border-radius:6px; }
.cl-date { color:var(--text-muted); font-size:12px; }
.cl-notes { font-size:14px; line-height:1.5; white-space:pre-wrap; }

/* === EMPTY STATE === */
.empty-msg { padding:16px 4px 20px; font-size:13.5px; color:var(--text-subtle); }

/* Invite/divider */
.invite-section { border-top:1px solid var(--border); margin-top:14px; padding-top:14px; }
.invite-section h4 { margin:0 0 10px; font-size:.92rem; }
.divider-or { display:flex; align-items:center; margin:14px 0; gap:10px; }
.divider-or span { color:var(--text-muted); font-size:.82rem; }
.divider-or hr { flex:1; border:0; border-top:1px solid var(--border); }

/* Admin setting sections */
section { display:none; }
section.on { display:block; }

/* Link btn (login page) */
.link-btn { background:none; border:none; color:var(--brand); font-size:13px; font-weight:600; cursor:pointer; padding:0; }
.link-btn:hover { color:var(--brand-strong); }


/* =============================================
   MOBILE RESPONSIVE POLISH — v2.1
   ============================================= */

/* --- 1. Tab bar: horizontal scroll on mobile --- */
@media (max-width:768px) {
  .env-toggle {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    gap: 6px;
    padding-bottom: 6px;
  }
  .env-toggle::-webkit-scrollbar { display: none; }
  .env-toggle { -ms-overflow-style: none; scrollbar-width: none; }
  .env-toggle .btn {
    flex-shrink: 0;
    font-size: 12px !important;
    padding: 8px 14px !important;
    min-height: 44px;
  }
  .env-toggle .hide-test-label {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* --- 2. Pipeline table: hide less essential columns on mobile --- */
@media (max-width:600px) {
  /* Hide City/State (col 3), MRR (col 6), Notes (col 9) in pipeline table */
  #pipelineSection table thead tr th:nth-child(3),
  #pipelineSection table tbody tr td:nth-child(3),
  #pipelineSection table thead tr th:nth-child(6),
  #pipelineSection table tbody tr td:nth-child(6),
  #pipelineSection table thead tr th:nth-child(9),
  #pipelineSection table tbody tr td:nth-child(9) {
    display: none;
  }
  #pipelineSection table {
    font-size: 12px;
  }
  #pipelineSection table th,
  #pipelineSection table td {
    padding: 8px 4px;
  }
}

/* --- 3. Rocks table: wider status dropdown, abbreviate on mobile --- */
@media (max-width:600px) {
  #rocksTable select {
    min-width: 90px;
    font-size: 11px;
    padding: 4px 2px;
  }
  /* Hide Notes column in rocks table (col 6) */
  #rocksTable thead tr th:nth-child(6),
  #rocksTable tbody tr td:nth-child(6) {
    display: none;
  }
  #rocksTable {
    font-size: 12px;
  }
  #rocksTable th,
  #rocksTable td {
    padding: 8px 4px;
  }
  /* Hide Quarter column on very narrow (col 3) */
  #rocksTable thead tr th:nth-child(3),
  #rocksTable tbody tr td:nth-child(3) {
    display: none;
  }
}

/* --- 4. L10 sub-panel buttons: wrap cleanly on mobile --- */
@media (max-width:768px) {
  .tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .tabs button {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 13px;
    text-align: center;
    white-space: nowrap;
  }
}

/* --- 5. Pipeline summary cards: 2-col grid on mobile --- */
@media (max-width:600px) {
  #pipelineSummaryCards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  #pipelineSummaryCards .card.stat {
    padding: 12px;
  }
  #pipelineSummaryCards .card.stat .num {
    font-size: 22px;
  }
  #pipelineSummaryCards .card.stat .lbl {
    font-size: 11px;
  }
}
@media (max-width:400px) {
  #pipelineSummaryCards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* --- 6. Modals: full-width on mobile --- */
@media (max-width:600px) {
  .modal-overlay {
    padding: 16px 8px;
    align-items: flex-start;
  }
  .modal {
    max-width: 100% !important;
    width: 100% !important;
    padding: 18px 14px !important;
    border-radius: 12px;
  }
  /* Prospect modal form grid: single column on mobile */
  #prospectForm > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Rock form grid */
  #rockFormArea div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Todo form grid */
  #todoFormArea div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Issue form grid */
  #issueFormArea div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Metric form grid */
  #metricFormArea div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* --- 7. General mobile improvements --- */
@media (max-width:768px) {
  /* Ensure all tables have horizontal scroll */
  .table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Minimum body text size for readability */
  body {
    font-size: 14px;
  }

  /* Touch-friendly button sizes */
  button.btn,
  .tabs button,
  .filters button,
  .cat-filters button,
  .row-btn {
    min-height: 44px;
  }

  /* Comfortable padding on cards */
  .card {
    padding: 14px;
  }

  /* Pipeline table container scroll */
  #pipelineSection .card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #pipelineSection .card table {
    min-width: 500px;
  }

  /* Rocks/Todos/Issues tables scroll */
  #l10PanelRocks .table-scroll-wrapper table,
  #l10PanelTodos .table-scroll-wrapper table,
  #l10PanelIssues .table-scroll-wrapper table {
    min-width: 600px;
  }

  /* Home KPI cards: 2-col on mobile instead of 5 */
  #homeKpiCards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Quick action buttons stack */
  #homeSection div[style*="display:flex;gap:12px"] {
    flex-direction: column;
  }
  #homeSection div[style*="display:flex;gap:12px"] .btn {
    width: 100%;
    justify-content: center;
  }

  /* Pipeline head controls */
  #pipelineSection > div:first-child {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px !important;
  }
  #pipelineSection > div:first-child select,
  #pipelineSection > div:first-child .btn {
    width: 100%;
    min-height: 44px;
  }

  /* Scorecard grid: make 13-week table scrollable */
  #scorecardGrid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Scorecard entry form single column */
  #l10PanelScorecard div[style*="grid-template-columns:1fr 100px"] {
    grid-template-columns: 1fr !important;
  }
  #l10PanelScorecard div[style*="display:flex;gap:8px;align-items:center"] {
    flex-direction: column;
    align-items: stretch !important;
  }

  /* Rocks form area */
  #rockFormArea div[style*="grid-template-columns:1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Extra small screens */
@media (max-width:400px) {
  #homeKpiCards {
    grid-template-columns: 1fr 1fr !important;
  }
  .stat .num { font-size: 20px; }
  .stat .lbl { font-size: 11px; }

  /* Stack env toggle buttons */
  .env-toggle .btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }

  /* Full width action buttons in table rows */
  .act-group {
    flex-direction: column;
    gap: 4px;
  }

  /* Pipeline table even tighter */
  #pipelineSection .card table {
    min-width: 400px;
  }
}