/* ============================================================
   CLIENT SITE REVIEW — Phase-3 mockup pass (scoped to #approvalsScreen)
   Restyles the EXISTING .appr-* render output into the editorial
   KPI-strip + two-column layout. Tokens only; light + dark via
   design-system.css. No structural change to data rows.
   ============================================================ */

/* page column width to match the 1120px editorial measure */
body.lh-shell #approvalsScreen .appr-page{ max-width:1180px; }

/* intro paragraph → muted editorial lede (the static <p> after .admin-title) */
body.lh-shell #approvalsScreen .appr-head-titles > p{
  font-size:14.5px; color:var(--text-muted); margin:11px 0 0; max-width:60ch;
}

/* header → flex row so the new "SEND N FOLLOW-UPS" button sits top-right. */
body.lh-shell #approvalsScreen .appr-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;
  margin-bottom:0;
}
body.lh-shell #approvalsScreen .appr-head-titles{ min-width:0; }
body.lh-shell #approvalsScreen .appr-head-actions{ flex-shrink:0; }

/* ---- KPI STRIP: reuse .ds-kpi-bar look on the rendered .appr-chips ---- */
body.lh-shell #approvalsScreen .appr-chips{
  display:flex; flex-wrap:nowrap; gap:0;
  border-top:1px solid var(--rule-strong); border-bottom:1px solid var(--rule-strong);
  margin:30px 0 0; padding:0;
}
body.lh-shell #approvalsScreen .appr-chip{
  flex:1; min-width:0; display:block;
  background:transparent; border:none; border-left:1px solid var(--hairline);
  border-radius:0; padding:20px 26px;
}
body.lh-shell #approvalsScreen .appr-chip:first-child{ padding-left:0; border-left:none; }
body.lh-shell #approvalsScreen .appr-chip:last-child{ padding-right:0; }
body.lh-shell #approvalsScreen .appr-chip-label{
  display:block; font-size:11px; letter-spacing:.14em; color:var(--text-faint); font-weight:600;
  text-transform:uppercase;
}
body.lh-shell #approvalsScreen .appr-chip-num{
  display:block; font-family:var(--font-serif); font-weight:700; font-size:36px; line-height:1;
  margin:13px 0 8px; color:var(--text-head);
}
body.lh-shell #approvalsScreen .appr-chip.denied .appr-chip-num{ color:var(--red); }
body.lh-shell #approvalsScreen .appr-chip .appr-warn{
  display:flex; align-items:center; gap:7px; font-size:12px; font-weight:500; color:var(--red);
  background:transparent; border:none; border-radius:0; padding:0; letter-spacing:0;
}
body.lh-shell #approvalsScreen .appr-chip.pending .appr-warn::before,
body.lh-shell #approvalsScreen .appr-chip.denied .appr-warn::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--red); flex-shrink:0;
}
/* sub note line (added by JS as .appr-chip-note) */
body.lh-shell #approvalsScreen .appr-chip-note{
  display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-muted); margin-top:2px;
}
body.lh-shell #approvalsScreen .appr-chip-note .ds-dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }
body.lh-shell #approvalsScreen .appr-chip-note .ds-dot-red{ background:var(--red); }
body.lh-shell #approvalsScreen .appr-chip-note .ds-dot-green{ background:var(--green); }
body.lh-shell #approvalsScreen .appr-chip-note.is-red{ color:var(--red); }
body.lh-shell #approvalsScreen .appr-chip-note.is-green{ color:var(--green); }
/* color the KPI note text to match its dot (overdue=red, ready-to-finalize=green),
   keyed off the chip kind so no JS class is required */
body.lh-shell #approvalsScreen .appr-chip.denied .appr-chip-note{ color:var(--red); font-weight:500; }
body.lh-shell #approvalsScreen .appr-chip.approved .appr-chip-note{ color:var(--green); font-weight:500; }

/* ---- TWO-COLUMN GRID (added wrapper .appr-grid in render) ---- */
body.lh-shell #approvalsScreen .appr-grid{
  display:grid; grid-template-columns:1.5fr 1fr; gap:36px; margin-top:34px; align-items:start;
}
body.lh-shell #approvalsScreen .appr-grid-left{ min-width:0; }
body.lh-shell #approvalsScreen .appr-grid-right{ min-width:0; display:flex; flex-direction:column; gap:30px; }

/* ---- SECTION HEADERS → Playfair sub-heads + count pills ---- */
/* .appr-sec is lumped into design-system.css's "cards → var(--surface)" rule,
   which paints the whole section as a panel. The Client Site Review redesign is
   a flat no-card list, so strip that surface here (scoped beats the shared rule). */
body.lh-shell #approvalsScreen .appr-sec{ margin:0 0 30px; background:transparent; border:none; box-shadow:none; }
body.lh-shell #approvalsScreen .appr-grid-left .appr-sec:first-child{ margin-top:0; }
body.lh-shell #approvalsScreen .appr-grid-left .appr-sec:last-child{ margin-bottom:0; }
body.lh-shell #approvalsScreen .appr-sec-head{
  display:flex; align-items:center; gap:11px; margin-bottom:2px;
  font-family:var(--font-serif); font-weight:600; font-size:18px; letter-spacing:0;
  text-transform:none; color:var(--text-head);
}
body.lh-shell #approvalsScreen .appr-sec-head > span:first-child{ font:inherit; }
body.lh-shell #approvalsScreen .appr-col-count{
  font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.06em;
  border-radius:999px; padding:3px 9px;
}
body.lh-shell #approvalsScreen .appr-col-count.pending{ color:var(--gold-dark); background:var(--gold-faint); }
body.lh-shell #approvalsScreen .appr-col-count.denied{ color:var(--red); background:var(--red-bg); }
body.lh-shell #approvalsScreen .appr-col-count.approved{ color:var(--green); background:var(--green-bg); }
body.lh-shell #approvalsScreen .appr-col-count.finalized{ color:var(--text-faint); background:var(--surface-2); }

/* ---- LIST CONTAINER → flat rule-bordered list (no card) ---- */
body.lh-shell #approvalsScreen .appr-sec-body{
  background:transparent; border:none; border-bottom:1px solid var(--rule);
  border-radius:0; overflow:visible;
}

/* ---- ROWS → editorial divider rows w/ gold (or green) hover accent ---- */
body.lh-shell #approvalsScreen .appr-row{
  display:flex; align-items:center; gap:13px; padding:13px 12px;
  /* Reset legacy dashboard.css card chrome (white bg, 1px border, 8px radius +
     gap) so this stays a flat, theme-aware list in both light & dark. */
  background:transparent; border:none; border-radius:0; margin-bottom:0;
  border-left:2px solid transparent; border-top:1px solid var(--rule);
  transition:background .14s, border-color .14s;
}
/* legacy stale-row gold fill → drop it; staleness is shown by the red dot + 48h badge */
body.lh-shell #approvalsScreen .appr-row.stale{ background:transparent; }
body.lh-shell #approvalsScreen .appr-row:hover{ background:var(--hover); border-left-color:var(--gold); }
/* leading status dot via ::before (no markup change) */
body.lh-shell #approvalsScreen .appr-row::before{
  content:""; width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--text-faint);
  align-self:center;
}
body.lh-shell #approvalsScreen .appr-row.pending::before{ background:var(--gold); }
body.lh-shell #approvalsScreen .appr-row.pending.stale::before{ background:var(--red); }
body.lh-shell #approvalsScreen .appr-row.denied::before{ background:var(--red); }
body.lh-shell #approvalsScreen .appr-row.approved::before{ background:var(--green); }
body.lh-shell #approvalsScreen .appr-row.finalized::before{ background:var(--text-faint); opacity:.55; }
body.lh-shell #approvalsScreen .appr-row.approved:hover{ background:var(--hover); border-left-color:var(--green); }

/* body column between the dot and the actions */
body.lh-shell #approvalsScreen .appr-row-main{ flex:1; min-width:0; }
body.lh-shell #approvalsScreen .appr-row-title{
  font-size:13.5px; font-weight:600; color:var(--text-strong);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
body.lh-shell #approvalsScreen .appr-row-site{ font-size:11.5px; color:var(--text-faint); font-weight:500; }
body.lh-shell #approvalsScreen .appr-bundle-tag{
  font-size:8.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold-dark); background:transparent;
  border:1px solid var(--gold-pill-border); border-radius:999px; padding:1px 6px; vertical-align:1px;
}
body.lh-shell #approvalsScreen .appr-row-sub{ font-size:11.5px; color:var(--text-muted); margin-top:3px; }
body.lh-shell #approvalsScreen .appr-row-main .appr-warn{
  font-size:8.5px; font-weight:700; letter-spacing:.04em; color:var(--red);
  background:var(--red-bg); border-radius:999px; padding:2px 7px; display:inline-flex; align-items:center;
}

/* actions cluster on the right */
body.lh-shell #approvalsScreen .appr-row-actions{
  flex-shrink:0; display:flex; align-items:center; gap:8px;
}

/* ---- ACTION BUTTONS → ghost outline pills, gold-on-hover ---- */
body.lh-shell #approvalsScreen .appr-btn{
  background:transparent; border:1px solid var(--border-btn); color:var(--text-head);
  font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:.02em;
  padding:7px 13px; border-radius:8px; white-space:nowrap; box-shadow:none; transition:all .15s; cursor:pointer;
}
body.lh-shell #approvalsScreen .appr-btn:hover{ opacity:1; border-color:var(--gold); color:var(--gold-dark); }
body.lh-shell #approvalsScreen .appr-btn.primary{
  background:transparent; border-color:var(--gold); color:var(--gold-dark);
}
body.lh-shell #approvalsScreen .appr-btn.primary:hover{ background:var(--gold-faint); }
body.lh-shell #approvalsScreen .appr-row.approved .appr-btn,
body.lh-shell #approvalsScreen .appr-row.approved .appr-btn.primary{ border-color:var(--green); color:var(--green); }
body.lh-shell #approvalsScreen .appr-row.approved .appr-btn:hover{ background:var(--green-bg); }
body.lh-shell #approvalsScreen .appr-icon-btn{
  width:26px; height:26px; border-radius:6px; background:none; border:1px solid transparent;
  color:var(--text-faint); font-size:13px; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
}
body.lh-shell #approvalsScreen .appr-icon-btn:hover{ color:var(--red); border-color:var(--red-bg); background:var(--hover-red); }

/* ---- DENY FLAGS / NOTE → tokenized ---- */
body.lh-shell #approvalsScreen .appr-deny-flags{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:6px;
}
body.lh-shell #approvalsScreen .appr-deny-chip{
  font-size:11px; font-weight:600; color:var(--red);
  background:var(--red-bg); border:1px solid var(--red-bg); border-radius:999px; padding:2px 8px;
}
body.lh-shell #approvalsScreen .appr-note{
  font-size:12.5px; color:var(--text-body); background:var(--red-bg);
  border:1px solid var(--red-bg); border-radius:6px; padding:7px 9px; margin-top:6px;
}

/* ---- "SEND N FOLLOW-UPS" header button (added in JS) ---- */
body.lh-shell #approvalsScreen .appr-sendall{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--gold); border:1px solid var(--gold); color:#1f2533;
  font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.04em;
  padding:11px 18px; border-radius:8px; cursor:pointer; transition:all .15s;
}
body.lh-shell #approvalsScreen .appr-sendall:hover{ background:var(--gold-soft); border-color:var(--gold-soft); }
body.lh-shell #approvalsScreen .appr-sendall svg{ width:15px; height:15px; }
body.lh-shell #approvalsScreen .appr-sendall[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---- RIGHT RAIL: STATUS BREAKDOWN ---- */
body.lh-shell #approvalsScreen .appr-rail-eyebrow{
  font-size:11px; letter-spacing:.16em; color:var(--text-faint); font-weight:600; text-transform:uppercase;
}
body.lh-shell #approvalsScreen .appr-rail-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
body.lh-shell #approvalsScreen .appr-rail-total{ font-size:12px; color:var(--text-muted); }
body.lh-shell #approvalsScreen .appr-rail-total .n{ color:var(--text-head); font-weight:600; }
body.lh-shell #approvalsScreen .appr-breakdown-bar{
  display:flex; height:10px; border-radius:5px; overflow:hidden; gap:2px; margin-top:13px;
}
body.lh-shell #approvalsScreen .appr-breakdown-bar > span{ min-width:2px; }
body.lh-shell #approvalsScreen .appr-breakdown-legend{
  display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:13px;
}
body.lh-shell #approvalsScreen .appr-leg{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-body); }
body.lh-shell #approvalsScreen .appr-leg .sq{ width:8px; height:8px; border-radius:2px; }
body.lh-shell #approvalsScreen .appr-leg .n{ color:var(--text-strong); font-weight:600; }

/* ---- RIGHT RAIL: PENDING BY AGE ---- */
body.lh-shell #approvalsScreen .appr-rail-block{ border-top:1px solid var(--rule); padding-top:24px; }
body.lh-shell #approvalsScreen .appr-age-list{ display:flex; flex-direction:column; gap:11px; margin-top:15px; }
body.lh-shell #approvalsScreen .appr-age-row{ display:flex; align-items:center; gap:12px; }
body.lh-shell #approvalsScreen .appr-age-label{ width:64px; font-size:11.5px; color:var(--text-muted); flex-shrink:0; }
body.lh-shell #approvalsScreen .appr-age-track{ flex:1; height:8px; border-radius:4px; background:var(--surface-2); overflow:hidden; }
body.lh-shell #approvalsScreen .appr-age-fill{ height:100%; border-radius:4px; }
body.lh-shell #approvalsScreen .appr-age-n{ width:16px; text-align:right; font-size:12px; font-weight:600; color:var(--text-strong); flex-shrink:0; }
body.lh-shell #approvalsScreen .appr-age-foot{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--amber); margin-top:14px; }
body.lh-shell #approvalsScreen .appr-age-foot::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--amber); flex-shrink:0; }

/* ---- RIGHT RAIL: RECENTLY FINALIZED ---- */
body.lh-shell #approvalsScreen .appr-fin-list{ margin-top:8px; }
body.lh-shell #approvalsScreen .appr-fin-row{
  display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--rule);
}
body.lh-shell #approvalsScreen .appr-fin-row::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--text-faint); opacity:.55; flex-shrink:0;
}
body.lh-shell #approvalsScreen .appr-fin-body{ flex:1; min-width:0; }
body.lh-shell #approvalsScreen .appr-fin-addr{ font-size:12.5px; font-weight:600; color:var(--text-body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.lh-shell #approvalsScreen .appr-fin-sub{ font-size:11px; color:var(--text-faint); margin-top:1px; }
body.lh-shell #approvalsScreen .appr-fin-tag{
  display:inline-flex; align-items:center; gap:4px; font-size:9px; font-weight:700; letter-spacing:.06em;
  color:var(--green); flex-shrink:0;
}
body.lh-shell #approvalsScreen .appr-fin-tag svg{ width:12px; height:12px; }
body.lh-shell #approvalsScreen .appr-fin-viewall{
  display:inline-block; margin-top:12px; font-size:11px; letter-spacing:.04em; font-weight:600;
  color:var(--gold-dark); text-decoration:none; cursor:pointer;
}
body.lh-shell #approvalsScreen .appr-fin-viewall:hover{ opacity:.7; }

/* ---- RESPONSIVE ---- */
@media (max-width:900px){
  body.lh-shell #approvalsScreen .appr-grid{ grid-template-columns:1fr; gap:30px; }
  body.lh-shell #approvalsScreen .appr-chips{ flex-wrap:wrap; }
  body.lh-shell #approvalsScreen .appr-chip{ flex:1 1 45%; border-left:none; padding:16px 0; }
}
@media (max-width:600px){
  body.lh-shell #approvalsScreen .appr-row{ flex-wrap:wrap; }
  body.lh-shell #approvalsScreen .appr-row-actions{ width:100%; justify-content:flex-end; }
}