/* page-sched.css — Phase 3 mockup pass (scoped to #installSchedulesScreen)
   ============================================================
   Scheduling page → mockup (isSched). Restyles the EXISTING classes
   emitted by renderScheduleDashboard() (js/schedule-ev.js) + LhCalendar
   (js/calendar.js) onto design tokens, plus two additive wrappers
   (.sched-grid / .sched-queue) injected in JS. Light + dark inherit from
   the token set (no hard-coded colors). This file is linked AFTER
   design-system.css, so these rules win over the Phase-2 reskin.
   ============================================================ */
body.lh-shell #installSchedulesScreen .appr-page{ max-width:1180px; }

/* keep the primary action editorial (already gold via Phase-2) */
body.lh-shell #installSchedulesScreen .sched-add-btn{
  font-size:12px; font-weight:700; letter-spacing:.04em; padding:11px 18px;
  border-radius:8px; box-shadow:none;
}
/* The button is gold under the shell, so the legacy gold "+" icon
   (dashboard.css: .sched-add-btn svg{color:var(--lh-gold)}) was gold-on-gold and
   nearly invisible. Make the "+" navy to match the button's dark label. */
body.lh-shell #installSchedulesScreen .sched-add-btn svg{ color:#1f2533; }

/* ---- KPI strip: turn .sched-kpis grid into the editorial band ---- */
body.lh-shell #installSchedulesScreen .sched-kpis{
  display:flex; gap:0; grid-template-columns:none; margin:30px 0 0;
  border-top:1px solid var(--rule-strong); border-bottom:1px solid var(--rule-strong);
}
body.lh-shell #installSchedulesScreen .sched-kpi{
  flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:0;
  padding:20px 26px; border:none; border-left:1px solid var(--hairline);
  border-radius:0; background:transparent; box-shadow:none; transition:opacity .14s;
  text-align:left; cursor:pointer;
}
body.lh-shell #installSchedulesScreen .sched-kpi:first-child{ padding-left:0; border-left:none; }
body.lh-shell #installSchedulesScreen .sched-kpi:last-child{ padding-right:0; }
body.lh-shell #installSchedulesScreen .sched-kpi:hover{ transform:none; box-shadow:none; opacity:.78; }
body.lh-shell #installSchedulesScreen .sched-kpi.dim{ opacity:.45; }
body.lh-shell #installSchedulesScreen .sched-kpi.active{
  box-shadow:none; opacity:1; border-left-color:var(--hairline);
}
body.lh-shell #installSchedulesScreen .sched-kpi.active:first-child{ border-left:none; }
/* order: label / num / note — but DOM is num then label; re-order via flex */
body.lh-shell #installSchedulesScreen .sched-kpi-label{
  order:1; font-size:11px; letter-spacing:.14em; color:var(--text-faint); font-weight:600;
  text-transform:uppercase;
}
body.lh-shell #installSchedulesScreen .sched-kpi-count{
  order:2; font-family:var(--font-serif); font-weight:700; font-size:36px; line-height:1;
  margin:13px 0 8px; color:var(--text-head);
}
/* accent the count by bucket color */
body.lh-shell #installSchedulesScreen .sched-kpi.red .sched-kpi-count{ color:var(--red); }
/* active underline cue without a box */
body.lh-shell #installSchedulesScreen .sched-kpi.active .sched-kpi-label{ color:var(--gold-dark); }

/* ---- filter note (kept) ---- */
body.lh-shell #installSchedulesScreen .sched-filter-note{
  font-size:12px; color:var(--text-muted); margin:14px 0 0;
}
body.lh-shell #installSchedulesScreen .sched-filter-clear{
  color:var(--gold-dark); background:none; border:none; cursor:pointer;
  font-size:12px; font-weight:600; padding:0; text-decoration:underline;
}

/* ---- two-column grid (additive wrapper .sched-grid injected in JS) ---- */
body.lh-shell #installSchedulesScreen .sched-grid{
  display:grid; grid-template-columns:1.62fr 1fr; gap:36px; margin-top:32px; align-items:start;
}
body.lh-shell #installSchedulesScreen .sched-grid > *{ min-width:0; }

/* ---- RIGHT column header ---- */
body.lh-shell #installSchedulesScreen .sched-queue-head{
  display:flex; align-items:center; gap:11px; margin-bottom:4px;
}
body.lh-shell #installSchedulesScreen .sched-queue-head h2{
  font-family:var(--font-serif); font-weight:600; font-size:18px; margin:0; color:var(--text-head);
}
body.lh-shell #installSchedulesScreen .sched-queue-head .sched-group-count{
  background:var(--surface-2); border:1px solid var(--hairline); color:var(--text-muted);
  border-radius:999px; padding:1px 8px; font-size:10.5px; font-weight:700;
}

/* ---- empty state inside the queue ---- */
body.lh-shell #installSchedulesScreen .sched-queue .installer-muted{
  font-size:13px; color:var(--text-muted); padding:16px 0;
}

/* ---- queue groups: drop card chrome, become a flat divided list ---- */
body.lh-shell #installSchedulesScreen .sched-group{
  margin:0; background:transparent; border:none; box-shadow:none; padding:0;
}
body.lh-shell #installSchedulesScreen .sched-grid .sched-queue .sched-group:first-child .sched-group-list{
  border-top:1px solid var(--rule);
}
body.lh-shell #installSchedulesScreen .sched-grid .sched-queue{
  border-bottom:1px solid var(--rule);
}
body.lh-shell #installSchedulesScreen .sched-group-head{
  display:flex; align-items:center; gap:8px;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  color:var(--text-faint); margin:18px 0 0; padding:0;
}
body.lh-shell #installSchedulesScreen .sched-group-head.red{ color:var(--red); }
body.lh-shell #installSchedulesScreen .sched-group-head.amber{ color:var(--amber); }
body.lh-shell #installSchedulesScreen .sched-group-head.review{ color:var(--gold-dark); }
body.lh-shell #installSchedulesScreen .sched-group-head.blue{ color:var(--gold-dark); }
body.lh-shell #installSchedulesScreen .sched-group-head.green{ color:var(--green); }
body.lh-shell #installSchedulesScreen .sched-group-head.gray{ color:var(--text-faint); }
body.lh-shell #installSchedulesScreen .sched-group-head .sched-group-count{
  background:var(--surface-2); border:1px solid var(--hairline); color:var(--text-muted);
  border-radius:999px; padding:1px 7px; font-size:10px; font-weight:700; letter-spacing:0;
}
body.lh-shell #installSchedulesScreen .sched-group-list{ display:block; gap:0; }

/* ---- queue rows: flat editorial rows (no card), gold hover accent ---- */
body.lh-shell #installSchedulesScreen .sched-grid .sched-row{
  display:block; width:100%; background:transparent; border:none;
  border-top:1px solid var(--rule); border-left:2px solid transparent;
  border-radius:0; padding:14px 12px; box-shadow:none; position:relative; text-align:left;
  cursor:pointer; transition:background .14s, border-color .14s, padding .14s;
}
body.lh-shell #installSchedulesScreen .sched-grid .sched-row:hover{
  background:var(--hover); border-left-color:var(--gold); box-shadow:none; padding-left:14px;
}
body.lh-shell #installSchedulesScreen .sched-grid .sched-pill{
  font-size:9.5px; font-weight:700; letter-spacing:.05em; padding:3px 9px; border-radius:999px;
  display:inline-block;
}
body.lh-shell #installSchedulesScreen .sched-grid .sched-pill.red{ background:var(--red-bg); color:var(--red); }
body.lh-shell #installSchedulesScreen .sched-grid .sched-pill.amber{ background:var(--amber-bg); color:var(--amber); }
body.lh-shell #installSchedulesScreen .sched-grid .sched-pill.blue{ background:var(--gold-faint); color:var(--gold-dark); }
body.lh-shell #installSchedulesScreen .sched-grid .sched-pill.green{ background:var(--green-bg); color:var(--green); }
body.lh-shell #installSchedulesScreen .sched-grid .sched-pill.review{ background:var(--gold-faint); color:var(--gold-dark); }
body.lh-shell #installSchedulesScreen .sched-grid .sched-pill.gray{ background:var(--surface-2); color:var(--text-muted); }
body.lh-shell #installSchedulesScreen .sched-grid .sched-row-main{ display:block; margin-top:9px; }
body.lh-shell #installSchedulesScreen .sched-grid .sched-row-prop{
  font-size:13.5px; font-weight:600; color:var(--text-strong); white-space:normal; display:block;
}
body.lh-shell #installSchedulesScreen .sched-grid .sched-row-sub{
  font-size:12px; color:var(--text-muted); margin-top:3px; display:flex; align-items:center; gap:6px;
}
body.lh-shell #installSchedulesScreen .sched-grid .sched-row-sub .cal-dot{
  width:9px; height:9px; border-radius:3px; flex-shrink:0; display:inline-block;
}
body.lh-shell #installSchedulesScreen .sched-grid .sched-row-who{ color:var(--gold-dark); font-weight:600; }
body.lh-shell #installSchedulesScreen .sched-grid .sched-row-dates{
  position:absolute; top:14px; right:12px; max-width:46%; font-size:11px;
  color:var(--text-faint); text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.lh-shell #installSchedulesScreen .sched-grid .sched-row-dates.muted{ color:var(--text-faint); font-style:italic; }
body.lh-shell #installSchedulesScreen .sched-grid .sched-row-meta{
  display:flex; flex-direction:row; align-items:center; gap:8px; margin-top:8px;
}
body.lh-shell #installSchedulesScreen .sched-grid .sched-row-ago{ font-size:11px; color:var(--text-faint); }
body.lh-shell #installSchedulesScreen .sched-grid .sched-badge{
  font-size:9.5px; font-weight:700; letter-spacing:.04em; padding:2px 7px; border-radius:999px;
}
body.lh-shell #installSchedulesScreen .sched-grid .sched-badge.red{ background:var(--red-bg); color:var(--red); }
body.lh-shell #installSchedulesScreen .sched-grid .sched-badge.gray{ background:var(--surface-2); color:var(--text-muted); }

/* ---- LEFT column: calendar restyle ---- */
body.lh-shell #installSchedulesScreen .sched-cal-head{ display:none; } /* legend/toolbar carry the title */
body.lh-shell #installSchedulesScreen .cal-legend{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin:0 0 16px;
  font-size:12px; color:var(--text-body);
}
body.lh-shell #installSchedulesScreen .cal-legend-item{ display:inline-flex; align-items:center; gap:7px; }
body.lh-shell #installSchedulesScreen .cal-legend-item .cal-dot{ width:9px; height:9px; border-radius:3px; display:inline-block; flex-shrink:0; }
body.lh-shell #installSchedulesScreen .cal-legend-phases{ color:var(--text-faint); }
body.lh-shell #installSchedulesScreen .cal-legend-phases:first-of-type{ margin-left:auto; }
body.lh-shell #installSchedulesScreen .cal{
  background:transparent; border:none; padding:0;
}
body.lh-shell #installSchedulesScreen .cal-head{
  display:flex; align-items:center; justify-content:flex-start; gap:14px; margin-bottom:16px; flex-wrap:wrap;
}
body.lh-shell #installSchedulesScreen .cal-title{
  font-family:var(--font-serif); font-size:19px; font-weight:600; color:var(--text-head);
  min-width:auto; text-align:left;
}
body.lh-shell #installSchedulesScreen .cal-nav{
  width:30px; height:30px; border-radius:7px; border:1px solid var(--border-btn);
  background:transparent; color:var(--text-muted);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
body.lh-shell #installSchedulesScreen .cal-nav:hover{ border-color:var(--gold); color:var(--gold-dark); background:transparent; }
body.lh-shell #installSchedulesScreen .cal-today-btn{
  font-size:11px; font-weight:600; letter-spacing:.03em; color:var(--text-muted);
  border:1px solid var(--border-btn); background:transparent; border-radius:7px; padding:6px 12px; cursor:pointer;
}
body.lh-shell #installSchedulesScreen .cal-today-btn:hover{ border-color:var(--gold); color:var(--gold-dark); background:transparent; }
body.lh-shell #installSchedulesScreen .cal-views{
  display:flex; margin-left:auto; border:1px solid var(--border-btn); border-radius:8px; padding:2px; gap:2px;
}
body.lh-shell #installSchedulesScreen .cal-view-btn{
  font-size:11px; font-weight:600; color:var(--text-muted); border:none; background:transparent;
  border-radius:6px; padding:5px 12px; cursor:pointer;
}
body.lh-shell #installSchedulesScreen .cal-view-btn + .cal-view-btn{ border-left:none; }
body.lh-shell #installSchedulesScreen .cal-view-btn.active{ background:var(--surface); color:var(--text-head); }
body.lh-shell #installSchedulesScreen .cal-view-btn:not(.active):hover{ background:transparent; color:var(--gold-dark); }
/* the month grid surface: bordered rounded box */
body.lh-shell #installSchedulesScreen .cal-grid.cal-dow{
  display:grid; grid-template-columns:repeat(7,1fr);
  margin:0; gap:0; border:1px solid var(--rule); border-bottom:none;
  border-radius:12px 12px 0 0; overflow:hidden; background:var(--surface-2);
}
body.lh-shell #installSchedulesScreen .cal-dow-cell{
  font-size:9.5px; letter-spacing:.08em; color:var(--text-faint); font-weight:600;
  text-align:right; padding:8px; border-right:1px solid var(--rule); text-transform:uppercase;
}
body.lh-shell #installSchedulesScreen .cal-grid.cal-days{
  display:grid; grid-template-columns:repeat(7,1fr);
  gap:0; border:1px solid var(--rule); border-radius:0 0 12px 12px; overflow:hidden;
}
body.lh-shell #installSchedulesScreen .cal-cell{
  min-height:104px; border:none; border-top:1px solid var(--rule); border-right:1px solid var(--rule);
  border-radius:0; padding:6px 7px; background:var(--surface);
}
body.lh-shell #installSchedulesScreen .cal-cell.empty{ background:var(--surface-2); border-color:var(--rule); }
body.lh-shell #installSchedulesScreen .cal-cell.today{
  border-top-color:var(--rule); box-shadow:inset 0 0 0 1px var(--gold);
}
body.lh-shell #installSchedulesScreen .cal-date{
  font-size:11px; font-weight:600; color:var(--text-faint); text-align:right; margin-bottom:3px;
}
/* event chips: tint bg + installer-color left bar.
   calEventHtml emits style="--ev:<installerColor>" so the left bar reads the
   installer color while the bg stays a token tint (see schedule-ev.js). */
body.lh-shell #installSchedulesScreen .cal-ev{
  display:block; width:100%; text-align:left;
  background:var(--surface-2); color:var(--text-strong);
  border:none; border-left:2px solid var(--ev, var(--text-faint)); border-radius:3px; padding:2px 6px;
  font-size:9px; font-weight:600; margin-bottom:3px; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.lh-shell #installSchedulesScreen .cal-ev.unconfirmed{ opacity:.55; }
body.lh-shell #installSchedulesScreen .cal-ev.flagged{
  background:var(--red-bg); color:var(--red); border-left-color:var(--red);
  box-shadow:inset 0 0 0 1px var(--red); opacity:1;
}
body.lh-shell #installSchedulesScreen .cal-ev:hover{ opacity:.85; }

/* week / day timeline views keep the LhCalendar layout; just tint surfaces */
body.lh-shell #installSchedulesScreen .cal-grid.cal-week,
body.lh-shell #installSchedulesScreen .cal-day{
  border:1px solid var(--rule); border-radius:12px; overflow:hidden;
}

/* ---- installer filter chip row (sits below the KPI strip, full width) ---- */
body.lh-shell #installSchedulesScreen .sched-installer-filter{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin:18px 0 0; padding:0;
}
body.lh-shell #installSchedulesScreen .sched-if-label{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--text-faint); margin-right:4px;
}
body.lh-shell #installSchedulesScreen .sched-if-chip{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--surface); border:1px solid var(--border-btn); border-radius:999px;
  padding:6px 13px; font-size:12px; font-weight:500; color:var(--text-body);
  cursor:pointer; transition:border-color .14s, color .14s, background .14s;
}
body.lh-shell #installSchedulesScreen .sched-if-chip:hover{ border-color:var(--gold); color:var(--gold-dark); }
body.lh-shell #installSchedulesScreen .sched-if-chip.active{
  border-color:var(--gold); background:var(--gold-faint); color:var(--gold-dark); font-weight:600;
}
body.lh-shell #installSchedulesScreen .sched-if-chip .cal-dot{
  width:9px; height:9px; border-radius:50%; flex-shrink:0;
}

/* responsive: collapse to single column on narrow */
@media (max-width:980px){
  body.lh-shell #installSchedulesScreen .sched-grid{ grid-template-columns:1fr; gap:28px; }
  body.lh-shell #installSchedulesScreen .sched-kpis{ flex-wrap:wrap; }
  body.lh-shell #installSchedulesScreen .sched-kpi{ flex:1 1 45%; border-left:none; padding-left:0; }
}