/* ============================================================
   EE WORKSPACE — Energy Efficiency projects (#eeScreen / #eeProjectScreen)
   Tokens only (design-system.css vars) so light + dark both work.
   Layout follows the editorial page pattern (ds-header-row, ds-table,
   surface panels) used by Project Closeout / Leo Console.
   ============================================================ */

/* ---- locked notice (no Advanced Leo access) ---- */
.ee-locked{
  max-width:460px; margin:70px auto; text-align:center; color:var(--text-muted);
}
.ee-locked svg{ color:var(--gold-dark); }
.ee-locked h2{ font-family:var(--font-serif); font-size:22px; color:var(--text-head); margin:16px 0 8px; }
.ee-locked p{ font-size:13.5px; line-height:1.55; margin:0; }

/* ---- shared inputs / status lines ---- */
.ee-input{
  padding:9px 11px; border:1px solid var(--rule-strong); border-radius:8px;
  background:var(--surface); color:var(--text-strong); font-size:13px; font-family:inherit;
  box-sizing:border-box; min-width:0;
}
.ee-input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-faint); }
.ee-label{ font-size:11px; letter-spacing:.08em; font-weight:600; color:var(--text-muted); }
.ee-status{ font-size:12.5px; color:var(--text-muted); min-height:18px; margin-top:10px; }
.ee-status[data-state="error"]{ color:var(--red); }
.ee-status[data-state="success"]{ color:var(--green); }
.ee-hint{ font-size:12px; color:var(--text-faint); }

/* ---- new-project inline form ---- */
.ee-new-form{
  margin-top:26px; padding:20px 22px; background:var(--surface);
  border:1px solid var(--hairline); border-radius:12px;
}
.ee-new-grid{ display:grid; grid-template-columns:1.2fr 0.8fr 1.2fr; gap:14px; }
.ee-new-grid .ee-field-col{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.ee-new-actions{ display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:16px; }
.ee-new-actions .ee-status{ margin:0 auto 0 0; }

/* ---- project list table ---- */
#eeListBody{ margin-top:30px; }
.ee-list-head, .ee-list-row{ grid-template-columns:1.9fr 0.8fr 0.6fr 0.9fr; }
.ee-list-addr{ font-size:12px; color:var(--text-muted); margin-top:3px; }
.ee-list-row .r-cell{ text-align:right; }

/* ---- detail: back link + header meta ---- */
.ee-back{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:22px;
  background:transparent; border:none; cursor:pointer; padding:0;
  font-size:11px; font-weight:600; letter-spacing:.08em; color:var(--gold-dark); font-family:inherit;
}
.ee-back:hover{ opacity:.7; }
.ee-head-meta{ display:flex; gap:8px; align-items:center; flex-shrink:0; padding-bottom:6px; }

/* ---- panels ---- */
.ee-panels{ display:flex; flex-direction:column; gap:22px; margin-top:30px; }
.ee-panel{
  background:var(--surface); border:1px solid var(--hairline); border-radius:12px;
  padding:22px 24px;
}
.ee-panel-head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:14px; }
.ee-panel-count{ font-size:11.5px; color:var(--text-faint); font-weight:600; letter-spacing:.05em; }

/* ---- uploads ---- */
.ee-upload-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.ee-file-input{ flex:1 1 260px; font-size:12.5px; color:var(--text-body); min-width:0; }
.ee-upload-row .ee-input{ max-width:190px; }
.ee-doc-list{ margin-top:8px; }
.ee-doc-row{
  display:flex; align-items:center; gap:10px; padding:11px 0;
  border-top:1px solid var(--rule);
}
.ee-doc-row:first-child{ border-top:none; }
.ee-doc-info{ flex:1; min-width:0; }
.ee-doc-name{ display:block; font-size:13.5px; font-weight:500; color:var(--text-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ee-doc-meta{ display:block; font-size:11.5px; color:var(--text-muted); margin-top:2px; }

/* ---- job stage board ---- */
.ee-job-run{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.ee-stage-board{ margin-top:16px; border-top:1px solid var(--rule-strong); }
.ee-stage{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:11px 0; border-bottom:1px solid var(--rule);
}
.ee-stage-dot{ width:9px; height:9px; border-radius:50%; background:var(--rule-strong); flex-shrink:0; }
.ee-stage[data-status="running"] .ee-stage-dot{ background:var(--gold); animation:lh-pulse 2.4s infinite; }
.ee-stage[data-status="done"] .ee-stage-dot{ background:var(--green); }
.ee-stage[data-status="failed"] .ee-stage-dot{ background:var(--red); }
.ee-stage[data-status="skipped"] .ee-stage-dot{ background:var(--text-faint); }
.ee-stage-name{ font-size:13px; font-weight:500; color:var(--text-strong); }
.ee-stage[data-status="pending"] .ee-stage-name{ color:var(--text-muted); font-weight:400; }
.ee-stage-progress{ font-size:11.5px; color:var(--text-muted); }
.ee-stage-attempt{ font-size:10.5px; color:var(--amber); font-weight:600; }
.ee-stage-state{ margin-left:auto; font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); }
.ee-stage[data-status="running"] .ee-stage-state{ color:var(--gold-dark); }
.ee-stage[data-status="done"] .ee-stage-state{ color:var(--green); }
.ee-stage[data-status="failed"] .ee-stage-state{ color:var(--red); }
.ee-stage-error{ flex-basis:100%; font-size:12px; color:var(--red); line-height:1.45; }
.ee-job-actions{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.ee-job-meta{ font-size:11.5px; color:var(--text-faint); margin-top:12px; }

/* ---- review form (field-map driven) ---- */
.ee-form-sec{ margin-top:22px; }
.ee-form-sec:first-child{ margin-top:0; }
.ee-form-sec-title{
  font-family:var(--font-serif); font-size:17px; font-weight:600; color:var(--text-head);
  margin:0 0 4px; padding-bottom:8px; border-bottom:1px solid var(--rule-strong);
}
.ee-form-group{ margin:12px 0 4px; padding:10px 14px; background:var(--surface-2); border:1px solid var(--rule); border-radius:9px; }
.ee-form-group-label{ font-size:11px; letter-spacing:.1em; font-weight:700; text-transform:uppercase; color:var(--gold-dark); margin-bottom:4px; }
.ee-field{
  display:flex; align-items:center; gap:14px; padding:7px 6px;
  border-radius:7px; border-left:2px solid transparent;
}
.ee-field-label{ display:flex; align-items:center; gap:7px; flex:1; min-width:0; font-size:13px; color:var(--text-body); }
.ee-field-text .ee-input, .ee-field-radio .ee-input{ flex:0 1 320px; }
.ee-check-label{ cursor:pointer; }
.ee-form-check{ width:15px; height:15px; accent-color:var(--gold); flex-shrink:0; cursor:pointer; }
/* extraction rows that still need a human eye (low confidence / unreviewed) */
.ee-field.ee-attn{ background:var(--amber-bg); border-left-color:var(--amber); }
.ee-prov{ font-size:12px; color:var(--info); cursor:help; flex-shrink:0; }
/* autosave affordance: dirty → amber, saving → gold, saved → green tick */
.ee-save-dot{ font-size:11px; line-height:1; min-width:12px; flex-shrink:0; }
.ee-field[data-save-state="dirty"] .ee-save-dot::before{ content:"•"; color:var(--amber); }
.ee-field[data-save-state="saving"] .ee-save-dot::before{ content:"…"; color:var(--gold-dark); }
.ee-field[data-save-state="saved"] .ee-save-dot::before{ content:"✓"; color:var(--green); }
.ee-field[data-save-state="error"] .ee-save-dot::before{ content:"!"; color:var(--red); font-weight:700; }

/* ---- outputs ---- */
.ee-banner{
  padding:12px 15px; border-radius:9px; font-size:12.5px; line-height:1.5; margin-bottom:14px;
}
.ee-banner-warn{ background:var(--amber-bg); color:var(--amber); border:1px solid color-mix(in srgb, var(--amber) 35%, transparent); }
.ee-banner-error{ background:var(--red-bg); color:var(--red); border:1px solid color-mix(in srgb, var(--red) 35%, transparent); }
.ee-output-card{
  display:flex; align-items:center; gap:14px; padding:14px 0;
  border-top:1px solid var(--rule);
}
.ee-output-card:first-of-type{ border-top:none; }
.ee-output-info{ flex:1; min-width:0; }
.ee-output-title{ font-size:13.5px; font-weight:600; color:var(--text-strong); }
.ee-output-meta{ font-size:11.5px; color:var(--text-muted); margin-top:3px; }
.ee-output-actions{ display:flex; gap:8px; flex-shrink:0; flex-wrap:wrap; }
/* MFAppFill read-back diff — verbatim, monospace, scrolls inside the panel */
.ee-output-error{
  margin:12px 0 0; padding:12px 14px; border-radius:9px; background:var(--red-bg);
  color:var(--red); font-size:11.5px; line-height:1.5; white-space:pre-wrap;
  word-break:break-word; max-height:260px; overflow:auto;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- lighting workspace (ci_eo): Project Data form + fixture grid ---- */
.ee-lg-block{ margin-top:24px; }
.ee-lg-block:first-child{ margin-top:0; }
.ee-lg-sub{
  font-family:var(--font-serif); font-size:16px; font-weight:600; color:var(--text-head);
  margin:0 0 4px; padding-bottom:7px; border-bottom:1px solid var(--rule-strong);
}
.ee-lg-head-row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.ee-lg-head-row .ee-lg-sub{ flex:1; }

/* Project Data mini-form (cellmap-driven) */
.ee-pd-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:10px 18px; margin-top:12px;
}
.ee-pd-group{
  grid-column:1 / -1; margin-top:8px;
  font-size:11px; letter-spacing:.1em; font-weight:700; text-transform:uppercase; color:var(--gold-dark);
}
.ee-pd-field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.ee-pd-label{
  display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-muted);
  overflow:hidden; white-space:nowrap;
}
.ee-pd-label span:first-child{ overflow:hidden; text-overflow:ellipsis; }
.ee-pd-field .ee-input{ padding:7px 9px; font-size:12.5px; }
.ee-pd-field[data-save-state="dirty"] .ee-save-dot::before{ content:"•"; color:var(--amber); }
.ee-pd-field[data-save-state="saving"] .ee-save-dot::before{ content:"…"; color:var(--gold-dark); }
.ee-pd-field[data-save-state="saved"] .ee-save-dot::before{ content:"✓"; color:var(--green); }
.ee-pd-field[data-save-state="error"] .ee-save-dot::before{ content:"!"; color:var(--red); font-weight:700; }

/* Fixture grid: wide table scrolls BOTH ways inside its own box so the
   sticky header row works and the page never scrolls horizontally. */
.ee-lgrid-scroll{
  margin-top:12px; max-height:64vh; overflow:auto;
  border:1px solid var(--rule-strong); border-radius:10px; background:var(--surface);
}
.ee-lgrid{ border-collapse:separate; border-spacing:0; width:max-content; min-width:100%; }
.ee-lgrid thead th{
  position:sticky; top:0; z-index:3; background:var(--surface-2);
  padding:9px 8px; text-align:left; white-space:nowrap;
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-muted); border-bottom:1px solid var(--rule-strong);
}
.ee-lgrid td{ padding:4px 5px; border-bottom:1px solid var(--rule); position:relative; vertical-align:middle; }
.ee-lgrid tbody tr:last-child td{ border-bottom:none; }
.ee-lgrid .ee-input{ padding:5px 7px; font-size:12.5px; border-radius:6px; }
.ee-lg-num{ width:82px; }
.ee-lg-text{ width:140px; }
.ee-lg-desc{ width:220px; }
.ee-lg-pick{ width:180px; }
.ee-lg-yn{ width:58px; }
.ee-lg-idx{ min-width:44px; white-space:nowrap; }
.ee-lg-n{ font-size:11px; color:var(--text-faint); font-variant-numeric:tabular-nums; margin-right:4px; }
.ee-lg-empty{ padding:18px 14px; font-size:12.5px; color:var(--text-muted); }
.ee-lg-row[data-save-state="dirty"] .ee-save-dot::before{ content:"•"; color:var(--amber); }
.ee-lg-row[data-save-state="saving"] .ee-save-dot::before{ content:"…"; color:var(--gold-dark); }
.ee-lg-row[data-save-state="saved"] .ee-save-dot::before{ content:"✓"; color:var(--green); }
.ee-lg-row[data-save-state="error"] .ee-save-dot::before{ content:"!"; color:var(--red); font-weight:700; }

/* row action buttons */
.ee-lg-rowbtns{ white-space:nowrap; }
.ee-lg-iconbtn{
  width:24px; height:24px; margin:0 1px; padding:0; cursor:pointer;
  border:1px solid var(--rule-strong); border-radius:6px;
  background:var(--surface); color:var(--text-muted);
  font-size:12px; line-height:1; font-family:inherit;
}
.ee-lg-iconbtn:hover{ color:var(--text-strong); border-color:var(--gold); }
.ee-lg-iconbtn-danger:hover{ color:var(--red); border-color:var(--red); }

/* totals footer */
.ee-lgrid tfoot td.ee-lg-totals{
  position:sticky; bottom:0; z-index:2; background:var(--surface-2);
  padding:9px 12px; font-size:12px; font-weight:600; color:var(--text-strong);
  border-top:1px solid var(--rule-strong); font-variant-numeric:tabular-nums;
}

/* wattage-match picker (anchored to the Watts-before cell) */
.ee-lg-watts-pick{
  position:absolute; top:100%; left:0; z-index:20; min-width:280px; max-height:230px; overflow:auto;
  background:var(--surface); border:1px solid var(--rule-strong); border-radius:9px;
  box-shadow:var(--ds-shadow-card); padding:4px;
}
.ee-lg-watts-title{ padding:6px 9px 4px; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); }
.ee-lg-watts-opt{
  display:flex; justify-content:space-between; align-items:center; gap:14px; width:100%;
  padding:6px 9px; border:none; border-radius:6px; background:transparent; cursor:pointer;
  font-size:12.5px; color:var(--text-body); text-align:left; font-family:inherit; white-space:nowrap;
}
.ee-lg-watts-opt:hover{ background:var(--surface-2); color:var(--text-strong); }
.ee-lg-watts-val{ font-weight:700; color:var(--gold-dark); font-variant-numeric:tabular-nums; }
.ee-lg-watts-more{ padding:6px 9px; font-size:11.5px; color:var(--text-faint); }

.ee-lg-toolbar{ display:flex; align-items:center; gap:14px; margin-top:12px; flex-wrap:wrap; }

/* ---- preview modal ---- */
.ee-modal-overlay{
  position:fixed; inset:0; z-index:1200; background:rgba(15,18,26,.62);
  display:flex; align-items:center; justify-content:center; padding:28px;
}
.ee-modal{
  background:var(--surface); border:1px solid var(--hairline); border-radius:14px;
  width:min(940px, 100%); max-height:100%; display:flex; flex-direction:column;
  box-shadow:var(--ds-shadow-card);
}
.ee-modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 18px; border-bottom:1px solid var(--rule-strong);
  font-size:13px; color:var(--text-head);
}
.ee-modal-pages{ overflow:auto; padding:18px; display:flex; flex-direction:column; gap:14px; align-items:center; }
.ee-modal-canvas{ max-width:100%; height:auto; border:1px solid var(--rule); border-radius:6px; background:#fff; }

/* ---- responsive stacking (desktop-first; simple collapse) ---- */
@media (max-width: 860px){
  .ee-new-grid{ grid-template-columns:1fr; }
  .ee-list-head{ display:none; }
  .ee-list-row{ grid-template-columns:1fr; gap:6px; padding-left:12px; }
  .ee-list-row .r-cell{ text-align:left; }
  .ee-field{ flex-direction:column; align-items:flex-start; gap:7px; }
  .ee-field-text .ee-input, .ee-field-radio .ee-input{ flex:1 1 auto; width:100%; }
  .ee-check-label{ flex-direction:row; }
  .ee-output-card{ flex-direction:column; align-items:flex-start; }
}
