/* RankRight web UI — stylesheet.
   No framework, one file. Class names match the Jinja templates exactly. */

:root {
  --bg: #f3f4f8;
  --surface: #ffffff;
  --border: #e5e7ec;
  --border-strong: #d3d6e0;
  --text: #1b1d2a;
  --text-dim: #6b7080;
  --text-faint: #9a9fb0;
  --primary: #4f46e5;
  --primary-dark: #4338ca;
  --primary-soft: #eef0fe;
  --nav-top: #2a2b50;
  --nav-bottom: #1c1d33;
  --danger: #dc2626;
  --ok: #15a34a;
  --warn: #d18411;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(20,22,40,.06), 0 1px 3px rgba(20,22,40,.07);
  --shadow-md: 0 4px 14px rgba(20,22,40,.09), 0 2px 5px rgba(20,22,40,.05);
  --shadow-lg: 0 16px 40px rgba(20,22,40,.16);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--primary); text-decoration: none; transition: color .12s; }
a:hover { color: var(--primary-dark); text-decoration: underline; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; }

/* ── Top nav ─────────────────────────────────────────────── */
.nav {
  background: linear-gradient(180deg, var(--nav-top), var(--nav-bottom));
  padding: 0 22px;
  display: flex;
  align-items: center;
  height: 60px;
  gap: 16px;
  box-shadow: 0 1px 3px rgba(20,22,40,.18);
  position: sticky;
  top: 0;
  z-index: 20;
}
.nav .brand {
  font-weight: 800; font-size: 16px; color: #fff;
  letter-spacing: -.015em;
  display: inline-flex; align-items: center; gap: 8px; flex: none;
}
/* RankRight mark — teal diamond, matches the favicon + marketing site. */
.nav .brand-mark {
  width: 13px; height: 13px; border-radius: 4px; transform: rotate(45deg);
  background: linear-gradient(135deg, #28e0c4, #12b8a6);
  box-shadow: 0 0 10px rgba(40, 224, 196, .55);
}
/* nowrap links can't shrink — scroll the row (scrollbar hidden) rather
   than let it paint over the search / agent light / usage bar. */
.nav .links {
  display: flex; gap: 4px; flex: 1; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.nav .links::-webkit-scrollbar { display: none; }
.nav .links a {
  color: rgba(255,255,255,.62);
  font-weight: 500; font-size: 14px;
  padding: 7px 13px; border-radius: 7px;
  transition: background .12s, color .12s;
  white-space: nowrap;   /* keep dropdown carets + badges beside the word */
}
.nav .links a:hover {
  color: #fff; text-decoration: none; background: rgba(255,255,255,.09);
}
.nav .links a.active { color: #fff; background: rgba(255,255,255,.14); }
/* ── Nav dropdown (Clients quick-select) ─────────────────────── */
.nav .links .dropdown { position: relative; display: inline-flex; align-items: center; }
.nav .links .dropdown-toggle { display: inline-flex; align-items: center; gap: 4px; }
.nav .links .dropdown .caret { font-size: 10px; opacity: .75; }
.nav .links .dropdown-menu {
  display: none;
  /* position: FIXED, not absolute — the scrollable .links row would clip an
     absolutely-positioned child. Fixed elements escape ancestor overflow;
     app.js pins top/left to the toggle on hover/focus. */
  position: fixed; top: 54px; left: 0;
  min-width: 170px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: 0 10px 28px rgba(20,22,40,.18);
  padding: 5px;
  z-index: 60;
}
/* Hover (mouse) + focus-within (keyboard/tap) both open it. A small
   hover bridge over the 5px gap keeps the menu from closing as the
   pointer crosses from toggle to menu. */
.nav .links .dropdown:hover .dropdown-menu,
.nav .links .dropdown:focus-within .dropdown-menu { display: block; }
.nav .links .dropdown-menu::before {
  content: ''; position: absolute; top: -6px; left: 0; right: 0; height: 6px;
}
.nav .links .dropdown-menu a {
  display: block; color: var(--text); background: none;
  padding: 8px 12px; border-radius: 6px;
  font-size: 13.5px; font-weight: 500; white-space: nowrap;
}
.nav .links .dropdown-menu a:hover { background: #f1f3f6; color: var(--text); }
.nav .org { color: rgba(255,255,255,.6); font-size: 13px; white-space: nowrap; }
.nav .org strong { color: #fff; font-weight: 600; }
/* The email is the widest nav item and the least load-bearing (org name +
   role remain) — drop it as soon as the full row stops fitting. */
@media (max-width: 1620px) { .nav .org .org-email { display: none; } }
/* Next squeeze level: keep the dot + bar, drop their text labels, so the
   link row stays fully visible instead of scrolling. */
@media (max-width: 1380px) {
  .token-usage .tu-label, .agent-light .agent-text { display: none; }
}
/* Monthly token-allowance bar in the header (percentage only — no $/token) */
.token-usage {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 12px; color: rgba(255,255,255,.7); white-space: nowrap; cursor: default;
}
.token-usage .tu-label { opacity: .8; }
.token-usage .tu-bar {
  width: 70px; height: 7px; border-radius: 4px; overflow: hidden;
  background: rgba(255,255,255,.18);
}
.token-usage .tu-fill {
  display: block; height: 100%; border-radius: 4px;
  background: #5fcf8e; transition: width .3s ease;
}
.token-usage .tu-pct { font-variant-numeric: tabular-nums; font-weight: 600; color: #fff; }
.token-usage.is-high .tu-fill { background: #e9b84d; }
.token-usage.is-full .tu-fill { background: #e8665a; }
.token-usage.is-full .tu-pct { color: #ffd2cd; }
.token-usage.is-exempt .tu-fill { background: rgba(255,255,255,.55); }

/* ── Outstanding-work signals ─────────────────────────────────────────── */
/* Nav badge on the Action items link — visible from every page. */
.nav-badge {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  color: #fff; background: #e8665a; border-radius: 9px; vertical-align: middle;
}
/* 'Work still to do' banner at the top of /action-items. */
.work-banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; margin: 0 0 16px; border-radius: 10px; border: 1px solid;
}
.work-banner .wb-icon { font-size: 22px; line-height: 1.1; }
.work-banner .wb-head { font-weight: 700; font-size: 15px; }
.work-banner .wb-sub { font-size: 13px; margin-top: 2px; }
.work-banner .wb-clients { font-size: 12px; margin-top: 6px; opacity: .85; }
.work-banner.has-work { background: #fdeced; color: #b42318; border-color: #f3c0c0; }
.work-banner.all-clear { background: #e9f8ef; color: #18794a; border-color: #bfe6cf; }
/* Clickable rows inside the "Work still to do" banner — each loads its own
   view (incomplete clients → cycle board; committed tasks → task list). */
.work-banner .wb-link { color: inherit; text-decoration: none; font-weight: inherit;
  display: inline-flex; align-items: baseline; gap: 5px; }
.work-banner .wb-link:hover { text-decoration: underline; }
.work-banner .wb-go { font-weight: 700; opacity: .55; transition: transform .12s ease, opacity .12s ease; }
.work-banner .wb-link:hover .wb-go { opacity: 1; transform: translateX(2px); }
/* Blog chip in the client-group header + the inline blog task row. */
.blog-chip {
  display: inline-block; padding: 1px 7px; font-size: 11px; font-weight: 600;
  border-radius: 10px; background: #eef2f7; color: #33506e;
}
.blog-chip.ok   { background: #e3f4ea; color: #18794a; }
.blog-chip.warn { background: #fcefcf; color: #9a6a00; }
.blog-row td { background: #fafbfd; border-top: 1px dashed #e3e3e3; padding: 7px 8px; }
.blog-row-icon { margin-right: 4px; }
.blog-warn { color: #b06a00; font-weight: 600; }
.blog-ok { color: #18794a; font-weight: 600; }
.blog-push-btn { padding: 2px 10px; font-size: 12px; }
.blog-only-header { margin: 18px 0 10px; font-weight: 700; font-size: 14px; border-top: 1px solid #ececec; padding-top: 14px; }

/* ── Needs-tasks (active clients with nothing approved this cycle) ─────── */
.no-item-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 12px; cursor: pointer; }
.needs-tasks-header { margin: 20px 0 8px; font-weight: 700; font-size: 14px; border-top: 1px solid #ececec; padding-top: 16px; }
.needs-tasks-list { border: 1px solid #f0d9a8; border-radius: 8px; overflow: hidden; }
.needs-tasks-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 12px; background: #fffaf0; border-bottom: 1px solid #f3e6c8; }
.needs-tasks-row:last-child { border-bottom: 0; }
.needs-tasks-row .nt-name { font-weight: 600; }
.needs-tasks-row .nt-actions { display: flex; align-items: center; gap: 4px; }

/* Staging banner pill (nav brand) */
.staging-pill {
  display: inline-block; padding: 1px 8px; margin-left: 6px; font-size: 11px;
  font-weight: 800; letter-spacing: .06em; color: #7a3c00; background: #ffce73;
  border-radius: 9px; vertical-align: middle;
}

/* ── Section pills (client SEO page) ──────────────────────────────────── */
.page-secs { display: flex; gap: 8px; margin: 4px 0 14px; flex-wrap: wrap; }
.sec-pill {
  padding: 4px 14px; font-size: 13px; border-radius: 15px; cursor: pointer;
  border: 1px solid #d8dee7; background: #fff; color: #46566b;
}
.sec-pill:hover { background: #f2f6fb; }
.sec-pill.is-active { background: #2f7ddb; border-color: #2f7ddb; color: #fff; font-weight: 600; }

/* ── Blog calendar ─────────────────────────────────────────────────────── */
.cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-grid th { padding: 6px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #8a94a3; text-align: left; }
.cal-cell { vertical-align: top; border: 1px solid #e8ecf2; padding: 4px 5px; height: 86px; }
.cal-cell.cal-empty { background: #fafbfd; }
.cal-cell.cal-today { background: #f2f8ff; box-shadow: inset 0 0 0 2px #9ec5f5; }
.cal-date { font-size: 11px; font-weight: 700; color: #8a94a3; margin-bottom: 3px; }
.cal-post { display: block; margin: 2px 0; padding: 2px 6px; font-size: 11px; line-height: 1.25; border-radius: 5px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-post.pub { background: #e3f4ea; color: #18794a; }
.cal-post.sched { background: #fcefcf; color: #8a6314; }
.cal-post:hover { filter: brightness(.95); }
.cal-dot { display: inline-block; width: 9px; height: 9px; border-radius: 5px; margin: 0 3px 0 8px; }
.cal-dot.pub { background: #5fcf8e; }
.cal-dot.sched { background: #e9b84d; }

/* ── Global search (header) ───────────────────────────────────────────── */
/* Collapsed to a magnifier icon by default; clicking it expands the input
   (.open, toggled in app.js). Page navigator only — see /search.json. */
.nav-search { position: relative; display: inline-flex; align-items: center; flex: none; }
.nav-search .ns-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: rgba(255,255,255,.65); cursor: pointer;
  transition: background .12s, color .12s;
}
.nav-search .ns-toggle:hover { color: #fff; background: rgba(255,255,255,.09); }
.nav-search input {
  width: 0; padding: 4px 0; font-size: 13px; border-radius: 14px;
  border: 0 solid rgba(255,255,255,.25); background: transparent;
  color: #fff; outline: none; opacity: 0;
  transition: width .18s ease, opacity .18s ease;
}
.nav-search.open input {
  width: 200px; padding: 4px 10px; margin-left: 4px; opacity: 1;
  border-width: 1px; background: rgba(255,255,255,.95); color: #1c2733;
}
.nav-search.open input::placeholder { color: #8a94a3; }
.nav-search .ns-results {
  position: absolute; top: calc(100% + 6px); right: 0; width: 360px; max-height: 420px;
  overflow-y: auto; background: #fff; border: 1px solid #d8dee7; border-radius: 10px;
  box-shadow: 0 10px 28px rgba(20,30,45,.18); z-index: 60; padding: 6px 0;
}
.ns-group { padding: 6px 12px 3px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #8a94a3; }
.ns-hit { display: block; padding: 6px 12px; text-decoration: none; color: #1c2733; }
.ns-hit:hover, .ns-hit.is-sel { background: #eef3fa; }
.ns-hit .ns-title { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-hit .ns-sub { display: block; font-size: 11px; color: #8a94a3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-empty { padding: 10px 12px; font-size: 13px; color: #8a94a3; }
@media (max-width: 1100px) { .nav-search.open input { width: 140px; } }

/* ── Blog preview modal ───────────────────────────────────────────────── */
.blog-preview-modal { max-width: 760px; width: 92vw; }
.blog-preview-body { max-height: 66vh; overflow-y: auto; padding: 4px 2px; }
.bp-post { border: 1px solid #e6e9ef; border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.bp-post > .bp-summary { list-style: none; cursor: pointer; padding: 9px 12px; background: #f6f8fb; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bp-post > .bp-summary::-webkit-details-marker { display: none; }
.bp-post > .bp-summary::before { content: '▸'; color: #8a94a3; font-size: 12px; transition: transform .12s; }
.bp-post[open] > .bp-summary::before { transform: rotate(90deg); }
.bp-post > .bp-summary:hover { background: #eef2f8; }
.bp-post .bp-title { font-size: 15px; font-weight: 700; }
.bp-post .bp-sub { font-size: 12px; color: #8a94a3; }
.bp-post .bp-copybar { padding: 0 12px; }
.bp-post .bp-img { width: calc(100% - 24px); max-height: 220px; object-fit: cover; border-radius: 6px; margin: 0 12px 8px; display: block; }
.bp-post .bp-frame { width: calc(100% - 24px); height: 360px; border: 1px solid #eceff3; border-radius: 6px; background: #fff; margin: 0 12px 12px; }
.bp-copybar { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 8px; }
.bp-copy { padding: 2px 10px; font-size: 12px; }
a.blog-content-link { text-decoration: none; cursor: pointer; }
a.blog-content-link:hover { filter: brightness(.95); text-decoration: underline; }
.blog-fulfilled-btn { padding: 2px 10px; font-size: 12px; }
.blog-preview-link { white-space: nowrap; }

/* ── Blog images gallery ──────────────────────────────────────────────── */
.img-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.img-card { position: relative; border: 1px solid #e3e3e3; border-radius: 8px; overflow: hidden; background: #fff; }
.img-card img { width: 100%; height: 130px; object-fit: cover; display: block; }
.img-card .img-missing { height: 130px; display: flex; align-items: center; justify-content: center; background: #f3f4f6; color: #9aa3af; font-size: 12px; }
.img-card .img-pick { position: absolute; top: 6px; left: 6px; z-index: 2; background: rgba(255,255,255,.92); border-radius: 5px; padding: 3px 5px; line-height: 1; cursor: pointer; }
.img-card .img-meta { padding: 7px 9px; }
.img-card .img-title { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.img-card .img-sub { display: flex; gap: 6px; align-items: center; margin-top: 4px; font-size: 11px; flex-wrap: wrap; }
.img-card.state-stale { border-color: #e9b84d; }
.img-card.state-never { border-color: #d4d9e0; }

/* Cron-agent (laptop) liveness light */
.agent-light {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 12px; color: rgba(255,255,255,.65); white-space: nowrap; cursor: default;
}
.agent-light .agent-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #9aa0ad;  /* unknown/checking */
  box-shadow: 0 0 0 0 rgba(0,0,0,0); transition: background .2s, box-shadow .2s;
}
.agent-light.is-online .agent-dot { background: #2ec16b; box-shadow: 0 0 6px rgba(46,193,107,.8); }
.agent-light.is-offline .agent-dot { background: #e5484d; box-shadow: 0 0 6px rgba(229,72,77,.7); }
.agent-light.is-online .agent-text { color: rgba(255,255,255,.85); }
.nav .btn.secondary {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.2);
  box-shadow: none;
}
.nav .btn.secondary:hover { background: rgba(255,255,255,.17); color: #fff; }
.org-switch {
  padding: 6px 10px; font-size: 13px; font-family: inherit;
  background: rgba(255,255,255,.09);
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 7px;
}
.org-switch option { color: var(--text); }

/* ── Layout ──────────────────────────────────────────────── */
.wrap { max-width: 1100px; margin: 0 auto; padding: 34px 28px; }
/* Wider container for data-dense, table-heavy pages (clients list, the
   cross-client action-items list). Gives the wide tables room to render
   all columns without horizontal scrolling on a normal desktop, while
   still centering and capping line length on very large monitors. */
.wrap-wide { max-width: 1500px; }
.page-title {
  font-size: 27px; font-weight: 800; letter-spacing: -.022em; margin: 0 0 5px;
}
.page-sub { color: var(--text-dim); margin: 0 0 26px; font-size: 14.5px; }

/* ── Stat cards ──────────────────────────────────────────── */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px; margin-bottom: 30px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--primary), #8b84f0);
}
.card .label {
  color: var(--text-dim); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
}
.card .value {
  font-size: 32px; font-weight: 800; letter-spacing: -.02em;
  margin-top: 8px; color: var(--text);
}
/* Cards that link somewhere — readable as clickable + give visual feedback. */
.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 80ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.card-link:hover, .card-link:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
.card-link:active { transform: translateY(0); }

/* ── Panels ──────────────────────────────────────────────── */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.panel h2 {
  font-size: 14px; font-weight: 700; margin: 0;
  padding: 16px 22px; border-bottom: 1px solid var(--border);
  letter-spacing: -.01em;
}
.panel .body { padding: 20px 22px; }

/* ── Collapsible panels (details/summary as the panel header) ─── */
.panel > details > summary.panel-head {
  list-style: none; cursor: pointer;
  font-size: 14px; font-weight: 700; margin: 0;
  padding: 16px 22px; border-bottom: 1px solid var(--border);
  letter-spacing: -.01em;
  display: flex; align-items: center; gap: 10px;
}
.panel > details > summary.panel-head::-webkit-details-marker { display: none; }
.panel > details > summary.panel-head:hover { background: #fafbfc; }
.panel > details:not([open]) > summary.panel-head { border-bottom: none; }
.panel-chev { margin-left: auto; color: var(--text-faint); font-size: 11px;
  transition: transform .15s; flex: none; }
.panel > details[open] > summary.panel-head .panel-chev { transform: rotate(90deg); }

/* ── "Next step" guide banner ─────────────────────────────────── */
.next-step {
  display: flex; align-items: center; gap: 12px;
  background: #eef4ff; border: 1px solid #cfe0ff; color: #1d3c78;
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 22px;
  font-size: 14px;
}
.next-step .ns-label {
  font-weight: 700; text-transform: uppercase; font-size: 10.5px;
  letter-spacing: .07em; color: #3a5da8; background: #dbe7ff;
  padding: 3px 8px; border-radius: 999px; flex: none;
}

/* ── Tables ──────────────────────────────────────────────── */
/* Wide data tables (clients, action items) scroll inside a BOUNDED
   viewport rather than letting a 1300px table push the page wide. .panel
   has overflow:hidden (rounded corners), so without this a wide table is
   clipped with no way to reach the off-edge columns. By capping the height
   AND scrolling both axes here:
     - the horizontal scrollbar sits at the bottom of the visible table box
       (reachable without scrolling to the end of a long list), and
     - the header row stays pinned (sticky thead below) while you scroll.
   Kept off .panel .body so vertical overflow elsewhere stays visible
   (bulk action bars etc. aren't clipped). */
.table-scroll {
  overflow: auto;
  max-height: 72vh;
  -webkit-overflow-scrolling: touch;
}
.table-scroll thead th {
  position: sticky; top: 0; z-index: 2;
  /* border-bottom doesn't repaint under position:sticky + border-collapse,
     so draw the header's bottom rule with an inset shadow instead. */
  box-shadow: inset 0 -1px var(--border);
}
/* Tighter horizontal padding in these dense tables so more columns fit
   before horizontal scrolling is needed (22px → 14px). */
.table-scroll th, .table-scroll td { padding-left: 14px; padding-right: 14px; }
/* Catch-all: any panel body whose direct child is a table gets horizontal
   scroll too, so wide tables across the app (dashboard, jobs, team, admin,
   …) never clip against .panel's overflow:hidden. The two heaviest tables
   (clients, action items) use an explicit .table-scroll wrapper — those
   nest the table under a div, so this :has(> table) rule doesn't
   double-apply. Body height is content-driven, so the forced overflow-y
   never produces a stray vertical scrollbar. */
.panel .body:has(> table) { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td {
  text-align: left; padding: 13px 22px;
  border-bottom: 1px solid var(--border);
}
th {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .055em; color: var(--text-faint);
  background: #fafafc;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .1s; }
tbody tr:hover { background: var(--primary-soft); }

/* Sortable column headers (wired by app.js for <table data-sortable>).
   Neutral ↕ hint by default; ↑/↓ on the active column. */
th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
th[data-sort]:hover { color: var(--text-dim); }
th[data-sort]::after {
  content: "\2195";              /* ↕ */
  margin-left: 6px; font-size: 9px; opacity: .4; vertical-align: middle;
}
th[data-sort][aria-sort="ascending"]::after  { content: "\2191"; opacity: 1; color: var(--primary); }
th[data-sort][aria-sort="descending"]::after { content: "\2193"; opacity: 1; color: var(--primary); }
th[data-sort]:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 1px 2px rgba(79,70,229,.28);
  transition: background .12s, box-shadow .12s, transform .06s;
}
.btn:hover {
  background: var(--primary-dark); color: #fff; text-decoration: none;
  box-shadow: 0 4px 10px rgba(79,70,229,.34);
}
.btn:active { transform: translateY(1px); }
.btn.secondary {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.btn.secondary:hover { background: #f7f7fb; color: var(--text); }
.btn.danger { background: var(--danger); box-shadow: 0 1px 2px rgba(220,38,38,.28); }
.btn.danger:hover { background: #b91c1c; box-shadow: 0 4px 10px rgba(220,38,38,.32); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ── Forms ───────────────────────────────────────────────── */
.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.form-row input, .form-row select {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px; font-family: inherit;
  background: #fff; color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
.form-row input:focus, .form-row select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.form-row input[type=checkbox] {
  width: auto; margin-right: 7px; vertical-align: middle;
}
.form-row .hint { color: var(--text-dim); font-size: 12.5px; margin-top: 5px; }
.form-actions { display: flex; gap: 10px; margin-top: 24px; }
.form-actions.wrap { flex-wrap: wrap; }
.tools-group { font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dim); margin: 18px 0 8px; font-weight: 600; }
.tools-group:first-child { margin-top: 4px; }

/* ── Auth pages ──────────────────────────────────────────── */
.auth-wrap { max-width: 400px; margin: 76px auto; }
.auth-wrap .panel { box-shadow: var(--shadow-lg); }
.auth-wrap h1 {
  font-size: 22px; font-weight: 800; letter-spacing: -.02em;
  text-align: center; margin: 26px 0 6px;
}
.auth-wrap .sub { text-align: center; color: var(--text-dim); margin: 0 0 6px; }
.auth-wrap .body { padding: 14px 26px 26px; }
.auth-wrap .btn { width: 100%; text-align: center; padding: 11px; }
.auth-alt { text-align: center; margin-top: 18px; color: var(--text-dim); font-size: 14px; }

/* ── Flash messages ──────────────────────────────────────── */
.flash {
  padding: 12px 16px; border-radius: var(--radius-sm);
  margin-bottom: 20px; font-size: 14px;
}
.flash.error { background: #fdeced; color: #b42318; border: 1px solid #f3c7c4; }
.flash.ok { background: #e7f7ee; color: #18794a; border: 1px solid #b9e4cb; }

/* ── Badges ──────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
}
.badge.active, .badge.tier-a, .badge.done { background: #e7f7ee; color: #18794a; }
.badge.paused, .badge.tier-b, .badge.running { background: #fdf1df; color: #b3700d; }
.badge.inactive, .badge.tier-c, .badge.queued, .badge.muted { background: #eef0f3; color: #6b7080; }
.badge.failed { background: #fdeced; color: #b42318; }
/* Unverified ≠ failed: pushed + plugin-confirmed, but the public render couldn't
   be confirmed (stale cache / fetch blocked). Amber, not red. */
.badge.unverified { background: #fdf1df; color: #b3700d; }
.badge.audit { background: #ece8fb; color: #5b3fb0; }
/* Delivery-cycle status chips (dashboard board) */
.badge.cyc-resolved { background: #e7f7ee; color: #18794a; }
.badge.cyc-ready_to_close { background: #e3f0fb; color: #1d6fb8; }
.badge.cyc-in_progress { background: #fdf1df; color: #b3700d; }
.badge.cyc-planned { background: #eef0f3; color: #5a6072; }
.badge.cyc-not_started { background: #f3f4f6; color: #8a8f9c; }
.badge.cyc-overdue { background: #fdeced; color: #b42318; }
/* Compact 6-up rollup + red accent on the overdue card */
.cards-cycle { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.cards-cycle .card .value { font-size: 26px; }
.card-alert::before { background: linear-gradient(180deg, #e5484d, #f2787c); }
.card-alert .value { color: #b42318; }
/* Clickable filter cards (dashboard rollup). Reset the <button> chrome so
   they read identically to the static .card, then add hover/active/disabled
   affordances. The active card stays highlighted while its filter applies. */
button.card {
  font: inherit; color: inherit; text-align: left; width: 100%;
  appearance: none; -webkit-appearance: none;
}
.card[data-filter]:not([disabled]) {
  cursor: pointer;
  transition: transform 80ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.card[data-filter]:not([disabled]):hover,
.card[data-filter]:not([disabled]):focus-visible {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transform: translateY(-1px);
  outline: none;
}
.card[data-filter]:not([disabled]):active { transform: translateY(0); }
.card.is-active { border-color: var(--primary); background: var(--primary-soft); }
.card.is-active::before { width: 6px; }
.card[data-filter][disabled] { opacity: .5; cursor: default; }
/* Status-colored cycle cards — accent bar + number tinted to the stage so the
   dashboard/clients rollup reads at a glance (matches the cyc-* badge palette).
   Zero-count cards are [disabled] (dimmed to .5 above), so their colors recede. */
.cards-cycle .card[data-filter="resolved"]::before      { background: linear-gradient(180deg,#27ae60,#1e9150); }
.cards-cycle .card[data-filter="ready_to_close"]::before { background: linear-gradient(180deg,#3a93dd,#1d6fb8); }
.cards-cycle .card[data-filter="in_progress"]::before    { background: linear-gradient(180deg,#e6ad3e,#c9870f); }
.cards-cycle .card[data-filter="planned"]::before        { background: linear-gradient(180deg,#828a9c,#5a6072); }
.cards-cycle .card[data-filter="not_started"]::before    { background: linear-gradient(180deg,#b3b8c4,#8a8f9c); }
.cards-cycle .card[data-filter="overdue"]::before        { background: linear-gradient(180deg,#e5575c,#c0392f); }
.cards-cycle .card[data-filter="resolved"] .value      { color:#1e9150; }
.cards-cycle .card[data-filter="ready_to_close"] .value { color:#1d6fb8; }
.cards-cycle .card[data-filter="in_progress"] .value    { color:#b3700d; }
.cards-cycle .card[data-filter="planned"] .value        { color:#5a6072; }
.cards-cycle .card[data-filter="not_started"] .value    { color:#8a8f9c; }
.cards-cycle .card[data-filter="overdue"] .value        { color:#c0392f; }

/* Client attention flag (⚑ next to a client name; hover shows the note). */
.attn-flag { color: var(--warn, #d18411); cursor: help; font-size: 13px; }

/* Action-type header prefix on an action item (e.g. "heading_fix") */
.ai-type {
  display: inline-block; margin-right: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: #5a6b7e;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Collapsible client groups ──────────────────────────────────── */
.cg-caret {
  display: inline-block; font-size: 11px; color: #7a8aa0;
  transition: transform 0.12s ease; margin-right: 2px;
}
[data-collapsible]:not(.collapsed) > .cg-head .cg-caret { transform: rotate(90deg); }
[data-collapsible].collapsed > [data-collapse-body] { display: none; }
.cg-head:hover { background: #eef2f8 !important; }

/* Budget-utilisation band: coloured left edge per client group + a chip showing
   committed/allocated hours. under = lots of budget unused (add more), mid =
   partway, good = close to / at budget, resolved/none = neutral. Inset shadow
   (not border) so it doesn't fight the group's inline border. */
.client-group[data-budget-band='under']    { box-shadow: inset 4px 0 0 #e08600; }
.client-group[data-budget-band='mid']      { box-shadow: inset 4px 0 0 #caa600; }
.client-group[data-budget-band='good']     { box-shadow: inset 4px 0 0 var(--ok); }
.client-group[data-budget-band='over']     { box-shadow: inset 4px 0 0 var(--border-strong); }
.client-group[data-budget-band='resolved'],
.client-group[data-budget-band='none']     { box-shadow: inset 4px 0 0 var(--border-strong); }
.budget-chip { padding: 1px 7px; border-radius: 10px; font-weight: 600; white-space: nowrap; }
.budget-chip.budget-under    { background: #fdf1df; color: #b3700d; }
.budget-chip.budget-mid      { background: #faf4d6; color: #8a7400; }
.budget-chip.budget-good     { background: #e7f7ee; color: #18794a; }
.budget-chip.budget-over     { background: #eef0f3; color: #5b6270; }
.budget-chip.budget-resolved,
.budget-chip.budget-none     { background: #eef0f3; color: #6b7080; }

/* Client-group COMPLETION highlight — red/amber/green on the whole header by
   tasks-done + blogs-done vs approved. The single at-a-glance "is this client's
   work finished?" signal. (The thin left edge above is the separate hours band.) */
.cg-head { background: #f6f8fb; }
.client-group[data-cmpl='done']    > .cg-head { background: #e6f7ee; }
.client-group[data-cmpl='partial'] > .cg-head { background: #fcf6e1; }
.client-group[data-cmpl='none']    > .cg-head { background: #fdecee; }
.client-group[data-cmpl='empty']   > .cg-head { background: #f6f8fb; }
.cmpl-chip { display: inline-block; margin-left: 6px; padding: 1px 8px; font-size: 11px; font-weight: 700; border-radius: 10px; vertical-align: middle; }
.cmpl-chip.cmpl-done    { background: #cdeed9; color: #136c3e; }
.cmpl-chip.cmpl-partial { background: #f6e6b3; color: #7a5c00; }
.cmpl-chip.cmpl-none    { background: #f7cace; color: #9c1622; }
.cmpl-chip.cmpl-empty   { background: #e6e9ef; color: #6b7080; }
.add-tasks-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: 12px; font-weight: 600; color: var(--primary); text-decoration: underline;
}
.add-tasks-btn:hover { color: var(--primary-dark); }
/* Per-client "Resolve" button — appears in a client header once its report
   for the cycle exists. Inline, green to read as the closing/done step. */
.resolve-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: 12px; font-weight: 600; color: var(--ok); text-decoration: underline;
}
.resolve-btn:hover { filter: brightness(0.9); }

/* Prominent standalone month browser on /action-items. */
.month-browser {
  margin: 4px 0 14px; padding: 10px 14px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e3e3e3); border-left: 4px solid var(--primary);
  border-radius: 8px; box-shadow: var(--shadow-sm);
}
.month-browser-form {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0;
}
.month-browser-label { font-weight: 700; font-size: 15px; white-space: nowrap; }
.month-browser-select {
  font-size: 15px; font-weight: 600; padding: 6px 10px;
  border: 1px solid var(--border-strong, #c7ccd6); border-radius: 6px;
  background: #fff; cursor: pointer; min-width: 170px;
}
.month-browser-select:hover { border-color: var(--primary); }
.month-browser-hint { font-size: 12px; flex: 1 1 220px; }
@media (max-width: 620px) {
  .month-browser-hint { flex-basis: 100%; text-align: left; }
}

/* "Next →" style button (e.g. action items → generate reports) */
.btn.next-btn {
  white-space: nowrap; align-self: flex-start;
}
/* Lit-up "ready to report" state — everything in view is done. */
.btn.next-btn.ready {
  background: var(--ok); border-color: var(--ok); color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn.next-btn.ready:hover { filter: brightness(0.95); }
.btn.next-btn.ready .ai-tab-count { background: rgba(255,255,255,0.25); color: #fff; }
.item-note-icon { cursor: help; font-size: 12px; margin: 0 3px; }

/* Action-item detail expand (before → after). */
.detail-toggle {
  background: none; border: 0; color: var(--primary); cursor: pointer;
  font-size: 11px; font-weight: 600; padding: 0 0 0 6px; white-space: nowrap;
}
.detail-toggle:hover { text-decoration: underline; }
.item-detail {
  margin-top: 6px; padding: 8px 10px; background: #f6f8fb;
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 12.5px; line-height: 1.5;
}
.item-detail > div { margin: 2px 0; }
/* Before → After diff inside the item detail expansion: red row = current
   wording on the page, green row = the proposed change. Used for heading
   rewordings and meta title/description rewrites. */
.ba { margin: 4px 0 8px; }
.ba-field {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-dim); margin: 6px 0 2px;
}
.ba-row {
  display: flex; gap: 8px; align-items: baseline;
  padding: 4px 9px; border-radius: 5px; margin: 2px 0;
}
.ba-label {
  flex: 0 0 46px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.ba-text { min-width: 0; overflow-wrap: anywhere; }
.ba-before { background: #fdeced; color: #7a2e28; }
.ba-before .ba-label { color: #b42318; }
.ba-after { background: #e7f7ee; color: #14532d; }
.ba-after .ba-label { color: #18794a; }

/* ── Prospect-audit step progress (client_audit.html) ─────────────────
   Vertical checklist: done = green check, current = pulsing primary dot,
   upcoming = dimmed. Driven live by [data-audit-progress] in app.js. */
.audit-steps { list-style: none; margin: 0; padding: 0; }
.audit-steps li {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 2px; font-size: 14px; color: var(--text-dim);
}
.audit-steps .as-dot {
  flex: 0 0 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border-strong); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1;
}
.audit-steps li.is-done { color: var(--text); }
.audit-steps li.is-done .as-dot {
  border-color: #18794a; background: #18794a; color: #fff;
}
.audit-steps li.is-done .as-dot::before { content: "✓"; }
.audit-steps li.is-current { color: var(--text); font-weight: 600; }
.audit-steps li.is-current .as-dot {
  border-color: var(--primary);
  animation: audit-pulse 1.4s ease-in-out infinite;
}
@keyframes audit-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(91, 84, 224, .35); }
  50% { box-shadow: 0 0 0 6px rgba(91, 84, 224, 0); }
}

/* Segmented toggle (action-items All / Failed / Succeeded). */
.outcome-toggle {
  display: inline-flex; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); overflow: hidden;
}
.outcome-toggle .seg-btn {
  background: var(--surface); color: var(--text); border: 0;
  border-right: 1px solid var(--border); padding: 6px 14px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.outcome-toggle .seg-btn:last-child { border-right: 0; }
.outcome-toggle .seg-btn:hover { background: #f1f3f6; }
.outcome-toggle .seg-btn.active { background: var(--primary); color: #fff; }
.outcome-toggle .seg-btn.active .muted { color: rgba(255,255,255,.82); }

/* Tabular figures so stat values + numeric table columns align (no jitter). */
.card .value, .progress-label, td { font-variant-numeric: tabular-nums; }

/* Clients page — one cohesive controls panel (search / filters / group-select)
   instead of three stacked panels. */
.clients-toolbar .toolbar-row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.clients-toolbar .toolbar-row + .toolbar-row {
  margin-top:12px; padding-top:12px; border-top:1px solid var(--border);
}
.clients-toolbar .toolbar-search { gap:8px; font-size:13px; }
.clients-toolbar .toolbar-search input {
  flex:1; min-width:240px; padding:8px 11px;
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  font:inherit; background:#fff; color:var(--text);
}
.clients-toolbar .toolbar-search input:focus {
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft);
}
/* Button that reads as an inline link (e.g. Reopen) */
.linklike { background: none; border: none; color: var(--primary);
  cursor: pointer; font: inherit; padding: 0; }
.linklike:hover { text-decoration: underline; }

/* ── Action items list ──────────────────────────────────── */
.seo-action-list { list-style: none; margin: 0; padding: 0; }
.seo-action-list li { border-bottom: 1px solid var(--border); }
.seo-action-list li:last-child { border-bottom: none; }
.seo-action-card { padding: 0; }
/* Shared column track so the header row and every card row line up.
   cols: ▸ · Pri · Tier · Type · Task(1fr) · Page · Est */
.seo-action-card summary, .seo-action-head-grid {
  display: grid;
  grid-template-columns: 14px 34px 38px 118px minmax(0, 1fr) 150px 62px;
  align-items: center; gap: 12px;
}
.seo-action-card summary { cursor: pointer; padding: 12px 6px; list-style: none; }
.seo-action-time {
  display: inline-block; padding: 3px 9px; border-radius: 6px;
  background: #fdf1df; color: #8a5b14;
  font-size: 11.5px; font-weight: 700;
  white-space: nowrap;
  font-family: ui-monospace, monospace;
}
.seo-action-card summary::-webkit-details-marker { display: none; }
.seo-action-card summary::before {
  content: "▸"; color: var(--text-faint); font-size: 11px;
  transition: transform 120ms;
}
.seo-action-card[open] summary::before { content: "▾"; }
.seo-action-card summary:hover { background: #f7f8fa; }
.seo-action-card .seo-action-priority { font-weight: 700; color: var(--text-dim); }
.seo-action-card .seo-action-type { font-family: ui-monospace, monospace; font-size: 12px;
  color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-action-card .seo-action-desc { color: var(--text); min-width: 0; }
.seo-action-card .seo-action-page { font-size: 12px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.seo-action-card .seo-action-page a { font-family: ui-monospace, monospace; }
/* status + created date — wraps to its own full-width row under the columns */
.seo-action-card .seo-action-meta { grid-column: 1 / -1; font-size: 12px; text-align: left;
  padding-left: 26px; }
/* Column header strip over the action list */
.seo-action-head { display: flex; align-items: center; background: #fafbfc;
  border-bottom: 1px solid var(--border); }
.seo-action-head-cb { flex: 0 0 31px; }
.seo-action-head-grid { flex: 1 1 auto; min-width: 0; padding: 7px 6px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-faint); }
.seo-action-head-grid span { cursor: help; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-action-body { padding: 4px 32px 16px; }
.seo-action-actions {
  display: flex; gap: 8px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--border);
}
.seo-action-actions .btn { padding: 6px 14px; font-size: 13px; }

/* Last-attempt-failed banner inside a stuck action item. */
.seo-action-failure {
  background: #fdeced; border: 1px solid #f1bbbe; color: #842025;
  border-radius: 8px; padding: 10px 14px; margin: 0 0 14px;
  font-size: 13px;
}
.seo-action-failure-label {
  font-weight: 700; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .05em; margin-right: 8px;
}
.seo-action-failure-cat {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: rgba(132, 32, 37, 0.12); font-size: 11px; font-weight: 600;
  font-family: ui-monospace, monospace;
}
.seo-action-failure-when { margin-left: 10px; font-size: 11.5px; }
.seo-action-failure-reason {
  margin-top: 6px; word-break: break-word; color: #842025;
}

/* Before/after diff card */
.diff-card {
  display: flex; gap: 14px; align-items: stretch;
  margin: 8px 0;
}
.diff-side {
  flex: 1; min-width: 0;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface);
}
.diff-side.diff-before { border-color: #f0d9a8; background: #fffaf0; }
.diff-side.diff-after { border-color: #bfe4cd; background: #f4fbf7; }
.diff-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-faint); margin-bottom: 4px;
}
.diff-tag {
  font-family: ui-monospace, monospace; font-size: 11.5px;
  color: var(--text-dim); margin-bottom: 2px;
}
.diff-tag.changed { color: #b3700d; font-weight: 700; }
.diff-text { word-break: break-word; }
.diff-text.changed { font-weight: 600; }
.diff-arrow { display: flex; align-items: center; color: var(--text-faint); font-size: 18px; }
.diff-context { margin: 8px 0; padding: 8px 12px; background: #f7f8fa; border-radius: 6px; font-size: 13px; }
.diff-raw { margin: 8px 0; }
.diff-raw pre {
  background: #f7f8fa; border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 12px; white-space: pre-wrap; word-break: break-word;
  font-size: 12.5px; margin: 0;
}
@media (max-width: 720px) {
  .seo-action-head { display: none; }
  .seo-action-card summary {
    grid-template-columns: auto auto 1fr auto;
  }
  .seo-action-card .seo-action-type,
  .seo-action-card .seo-action-page,
  .seo-action-card .seo-action-meta { grid-column: 1 / -1; }
  .seo-action-card .seo-action-meta { padding-left: 0; }
  .diff-card { flex-direction: column; }
  .diff-arrow { display: none; }
}

/* ── Progress bar (job-running flash) ──────────────────── */
.progress-bar {
  position: relative;
  width: 100%; height: 18px; margin-top: 10px;
  background: rgba(0,0,0,.08);
  border-radius: 999px; overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f0a020, #d97706);
  transition: width 250ms ease-out;
}
.progress-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; color: #5b3c0a;
  letter-spacing: .02em;
}

/* ── Live fleet job-progress panel (dashboard + clients list) ── */
.jobs-progress-panel { padding: 13px 16px; }
.jobs-prog-head { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.jobs-prog-overall .progress-bar { height: 13px; margin-top: 6px; }
.jobs-prog-list { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
/* Collapsible dropdown variant (clients list) */
.jobs-prog-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; padding: 2px 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.jpt-caret { font-size: 11px; color: var(--muted, #8a8a8a); transition: transform .15s ease; }
.jobs-prog-toggle.open .jpt-caret { transform: rotate(90deg); }
.jpt-summary { font-weight: 600; font-size: 14px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jpt-overall { margin-left: auto; flex: 0 0 150px; width: 150px; }
.jobs-prog-body { margin-top: 10px; }
.jobs-prog-row {
  display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(0, 2fr) 160px;
  gap: 10px; align-items: center; font-size: 13px;
}
.jpr-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jpr-msg { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jpr-bar { justify-self: end; width: 160px; }
/* compact inline mini-bar (no top margin, shorter) */
.progress-bar.progress-bar-sm { height: 12px; margin-top: 0; }
.progress-bar.progress-bar-sm .progress-label { font-size: 9.5px; }
@media (max-width: 620px) {
  .jobs-prog-row { grid-template-columns: 1fr; gap: 2px; }
  .jpr-bar { justify-self: stretch; width: 100%; }
  .jpt-overall { flex-basis: 90px; width: 90px; }
}

/* ── Pipeline strip ──────────────────────────────────────── */
.pipeline { display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.pipeline .stage {
  flex: 1; min-width: 155px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 13px 15px; box-shadow: var(--shadow-sm);
}
.pipeline .stage.done { border-color: #bfe4cd; background: #f4fbf7; }
.pipeline .st-num {
  font-size: 10.5px; font-weight: 700; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .06em;
}
.pipeline .st-name { font-size: 13.5px; font-weight: 700; margin-top: 3px; letter-spacing: -.01em; }
.pipeline .st-state { font-size: 12.5px; color: var(--text-dim); margin-top: 7px; }
.pipeline .stage.done .st-state { color: var(--ok); }
.pipeline .st-state label { font-weight: 500; cursor: pointer; }

/* ── SEO page: vertical process rail + main column ───────────── */
.seo-layout { display: grid; grid-template-columns: 256px 1fr; gap: 26px; align-items: start; }
.seo-layout > * { min-width: 0; }  /* let 1fr column shrink so wide tables scroll, not overflow */
.seo-rail { position: sticky; top: 18px; }
.vstepper { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 6px 0 2px; overflow: hidden; }
.vstep-head { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-faint); padding: 10px 18px 6px; }
/* Scrollable: the operator can scroll to see past + upcoming steps. JS scrolls
   the current step to center on load (instantly — no animated "blip"). */
.vstep-viewport { position: relative; height: 372px; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; }
.vstep-track { position: relative; padding: 8px 0; }
/* vertical connector line behind the dots */
.vstep-track::before { content: ""; position: absolute; left: 31px; top: 28px;
  bottom: 28px; width: 2px; background: var(--border); }
.vstep { position: relative; display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 16px; opacity: .5; transition: opacity .2s; }
.vstep.is-done { opacity: .9; }
.vstep.is-current { opacity: 1; background: #f0faf4; }
.vstep-dot { flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; z-index: 1;
  background: var(--surface); border: 2px solid var(--border-strong); color: var(--text-dim); }
.vstep.is-done .vstep-dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.vstep.is-current .vstep-dot { background: var(--ok); border-color: var(--ok); color: #fff;
  box-shadow: 0 0 0 4px rgba(24,121,74,.16); }
.vstep-body { min-width: 0; }
.vstep-title { font-weight: 700; font-size: 14px; letter-spacing: -.01em; }
.vstep.is-current .vstep-title { color: #136a40; }
/* Step titles are clickable — jump back/forward to that stage's view. */
.vstep-link { color: inherit; text-decoration: none; cursor: pointer; }
.vstep-link:hover { color: var(--primary-dark); text-decoration: underline; }
.vstep-desc { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.vstep-cur-action { font-size: 12.5px; color: #136a40; margin-top: 7px; line-height: 1.4; }
.vstep-toggle { margin-top: 8px; font-size: 12.5px; }
.vstep-toggle label { cursor: pointer; color: var(--text-dim); font-weight: 500; }
.vstep-report { display: inline-block; margin-top: 7px; font-size: 12.5px; font-weight: 600; }
.vstep-head .cyc-overdue-text { color: #b42318; }
@media (max-width: 900px) {
  .seo-layout { grid-template-columns: 1fr; }
  .seo-rail { position: static; }
  .vstep-viewport { height: auto; overflow: visible; }
}

/* ── Misc ────────────────────────────────────────────────── */
.empty { color: var(--text-dim); text-align: center; padding: 40px 20px; }
.kv { display: grid; grid-template-columns: 190px 1fr; gap: 11px 18px; }
.kv dt { color: var(--text-dim); font-weight: 600; font-size: 14px; }
.kv dd { margin: 0; }
.muted { color: var(--text-dim); }
.row-actions { display: flex; gap: 10px; align-items: center; }
.inline-form { display: inline; margin: 0; }
.invite-link {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; word-break: break-all;
  background: var(--primary-soft); color: var(--primary-dark);
  padding: 4px 8px; border-radius: 5px;
}
select.role-select {
  padding: 5px 8px; border: 1px solid var(--border-strong);
  border-radius: 6px; font-size: 13px; font-family: inherit;
}

/* ── Bulk action bar ────────────────────────────────────────────── */

.bulk-bar {
  position: fixed; bottom: 16px;
  left: 50%; transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 32px);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 16px;
  background: var(--primary-soft);
  border: 1px solid var(--primary);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  font-size: 14px;
  z-index: 50;
}
.bulk-bar[hidden] { display: none; }
.bulk-bar .bulk-count {
  font-weight: 600; color: var(--primary-dark);
  margin-right: 8px;
}
.bulk-bar button {
  padding: 6px 12px;
  background: #fff; color: var(--primary-dark);
  border: 1px solid var(--primary);
  border-radius: 5px; cursor: pointer; font-size: 13px;
  font-family: inherit;
}
.bulk-bar button:hover {
  background: var(--primary); color: #fff;
}
.bulk-bar button.danger {
  border-color: #dc2626; color: #dc2626;
}
.bulk-bar button.danger:hover {
  background: #dc2626; color: #fff;
}
.bulk-checkbox { vertical-align: middle; cursor: pointer; }

/* ── Toasts (AJAX bulk editor feedback) ─────────────────────────── */
#toast-host {
  position: fixed; left: 50%; bottom: 80px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  z-index: 1100; pointer-events: none;  /* above the swap modal (1000) */
}
.toast {
  pointer-events: auto;
  max-width: min(90vw, 520px);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px; line-height: 1.4;
  color: #fff; background: #2b3a4a;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-ok { background: #18794a; }
.toast-err { background: #b3261e; }

/* ── Swap-task modal (action-items "Swap task…") ─────────────────────── */
.swap-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20,22,40,0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.swap-modal {
  background: var(--surface); color: var(--text);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  width: min(640px, 96vw); max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.swap-head { padding: 16px 20px 10px; border-bottom: 1px solid var(--border); }
.swap-head h3 { margin: 0 0 4px; font-size: 16px; }
.swap-sub { margin: 0; font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.swap-filter {
  margin: 12px 20px 0; padding: 7px 10px; font-size: 13px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.swap-list { overflow-y: auto; padding: 8px 12px; flex: 1 1 auto; }
.swap-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid transparent;
}
.swap-item:hover { background: var(--primary-soft); }
.swap-item:has(input:checked) {
  background: var(--primary-soft); border-color: var(--primary);
}
.swap-item input { margin-top: 3px; flex: 0 0 auto; }
.swap-item-body { font-size: 13px; line-height: 1.4; min-width: 0; }
.swap-item-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.swap-empty, .swap-more { font-size: 12px; color: var(--text-dim); padding: 10px; }
.swap-foot {
  padding: 12px 20px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px;
}
/* Add-tasks modal: running selected-count/hours total, left-aligned in the foot */
.add-total { margin-right: auto; align-self: center; font-size: 12px; color: var(--text-dim); }
.add-over { color: #b42318; font-weight: 600; }

/* ── Action-items tabs (Tier A | Operator tasks) ─────────────────────── */
.ai-tabs {
  display: flex; gap: 4px; margin: 0 0 14px;
  border-bottom: 2px solid var(--border);
}
.ai-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; font-size: 14px; font-weight: 600;
  color: var(--text-dim); border: 2px solid transparent; border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  margin-bottom: -2px; text-decoration: none;
}
.ai-tab:hover { color: var(--text); background: var(--primary-soft); text-decoration: none; }
.ai-tab.is-active {
  color: var(--primary-dark); background: var(--surface);
  border-color: var(--border); border-bottom: 2px solid var(--surface);
}
.ai-tab-sub { font-size: 11px; font-weight: 400; color: var(--text-faint); }
.ai-tab-count {
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 3px 7px; border-radius: 10px;
  background: var(--bg); color: var(--text-dim);
}
.ai-tab.is-active .ai-tab-count { background: var(--primary-soft); color: var(--primary-dark); }

/* "Mark incomplete" (reopen a done item) — small inline link in the status cell */
.reopen-btn {
  background: none; border: none; cursor: pointer; padding: 0 0 0 6px;
  font-size: 11px; color: var(--text-dim); text-decoration: underline;
}
.reopen-btn:hover { color: var(--danger); }

/* SEO action items list — checkbox column for bulk selection. */
.seo-action-list li { display: flex; align-items: flex-start; }
.seo-action-list li > .seo-action-checkbox {
  padding: 16px 6px 0 12px; flex: 0 0 auto;
}
.seo-action-list li > details { flex: 1 1 auto; min-width: 0; }

/* ── Responsive: scale the chrome down for narrow windows ──────────
   Desktop-first app, so these are progressive condensations rather than
   a separate mobile layout. The top nav is the main offender at narrow
   widths (many links + a long email + org switcher won't fit one row),
   so it gets the most attention. */

/* Small desktop / tablet: tighten the nav, let the link row scroll
   instead of forcing the page wider than the viewport, drop the long
   email from the org meta. Breakpoint is 1100px — the content-area width —
   because the full-size nav (links + email + switcher + logout) needs
   ~1090px, so below that it overlaps/overflows without this treatment. */
@media (max-width: 1100px) {
  .nav { gap: 12px; padding: 0 16px; }
  .nav .links {
    gap: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;            /* link row scrolls; hide the bar */
  }
  .nav .links::-webkit-scrollbar { display: none; }
  .nav .links a { padding: 7px 9px; font-size: 13px; white-space: nowrap; }
  .nav .org .org-email { display: none; }
  .wrap { padding: 26px 18px; }
}

/* Phone: nav wraps to two rows — brand + org switcher + logout on top,
   the scrollable link row below it on its own full-width line. Org meta
   text is dropped entirely (the switcher still covers org context). */
@media (max-width: 620px) {
  .nav {
    flex-wrap: wrap;
    height: auto;
    min-height: 56px;
    padding: 8px 12px;
    row-gap: 8px;
    gap: 10px;
  }
  .nav .brand { font-size: 15px; }
  .nav .links { order: 3; flex-basis: 100%; flex: 1 0 100%; }
  .nav .org { display: none; }
  .wrap { padding: 16px 12px; }
  .page-title { font-size: 22px; }
  .page-sub { font-size: 13.5px; margin-bottom: 20px; }
  .panel h2 { padding: 13px 16px; }
  .panel .body { padding: 16px; }
  th, td { padding: 10px 12px; }     /* tighter cells → less horizontal scroll */
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dt { margin-top: 10px; }
  .cards { gap: 12px; margin-bottom: 22px; }
  .card .value { font-size: 27px; }
}