/* Look and feel follows the DET Finance Test Hub: Salesforce blue/navy, pale-blue canvas, white 12px cards,
   icon chips, status pills, floating Agentforce launcher. */
:root { --ink:#032d60; --accent:#0176d3; --bg:#eef4fa; --line:#d8e1ed; --muted:#52647a; --ok:#2e844a; --err:#ba0517; --header-h:80px; }
* { box-sizing: border-box; }
[hidden] { display:none !important; }
body { margin:0; font:15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--ink); padding-top:var(--header-h); }

/* fixed to the viewport so it stays put while the page scrolls underneath it. */
header.brand { background:#fff; border-bottom:3px solid var(--accent); padding:0 32px; height:var(--header-h); display:flex; align-items:center; gap:20px;
               position:fixed; top:0; left:0; right:0; z-index:20; }
.brand-logo { height:52px; width:auto; display:block; flex:none; }
.brand-title { border-left:1px solid var(--line); padding-left:20px; min-width:0; }
.brand-title h1 { margin:0; font-size:22px; line-height:1.2; letter-spacing:-.3px; color:var(--ink); }
.sub { margin:2px 0 0; font-size:13px; color:var(--muted); }
.brand-path { margin-left:auto; display:flex; align-items:center; gap:10px; color:var(--muted); }
.logo-chip { display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--line); border-radius:10px; padding:5px 10px; height:40px; }
.logo-chip img { height:100%; width:auto; max-width:90px; object-fit:contain; display:block; }
.brand-path .logo-chip { height:36px; }

/* layout: sidebar fixed to the viewport + scrolling content */
.shell { display:flex; min-height:calc(100vh - var(--header-h)); }
.sidebar { width:280px; flex:none; background:#fff; border-right:1px solid var(--line); display:flex; flex-direction:column;
           position:fixed; top:var(--header-h); left:0; height:calc(100vh - var(--header-h)); z-index:5; }
.menu { list-style:none; margin:0; padding:16px 12px; }
.nav { width:100%; display:flex; align-items:center; gap:12px; background:none; border:0; border-left:3px solid transparent; color:var(--ink); font:inherit; font-weight:600;
       text-align:left; padding:11px 14px; border-radius:6px; cursor:pointer; }
.nav:hover { background:#f2f7fc; }
.nav.active { background:#eaf4ff; border-left-color:var(--accent); color:#014486; }
.sidebar svg { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

main { flex:1; min-width:0; padding:28px 32px 24px; margin-left:280px; display:flex; flex-direction:column; min-height:calc(100vh - var(--header-h)); }
.view { flex:1; }
footer.copyright { text-align:center; font-size:11px; color:#768699; padding:28px 0 4px; }

.hero { background:linear-gradient(110deg, #032d60, #0176d3); color:#fff; border-radius:12px; padding:28px 32px; margin-bottom:24px; box-shadow:0 3px 12px #032d6014; }
.hero h2 { margin:0 0 8px; font-size:26px; letter-spacing:-.5px; }
.hero p { margin:0; max-width:820px; color:#e3f0ff; }
.hero .go.primary { background:#fff; color:var(--accent); margin-top:18px; font-weight:650; }
.page-head h2 { margin:0 0 4px; font-size:24px; letter-spacing:-.5px; } .page-head p { margin:0 0 20px; color:var(--muted); }
.section-title { font-size:14px; text-transform:uppercase; letter-spacing:1.2px; color:#46637e; margin:0 0 12px; }

.panel { background:#fff; border:1px solid var(--line); border-radius:12px; padding:22px 28px; box-shadow:0 3px 12px #032d6008; margin-top:24px; }
.panel h3 { font-size:16px; margin:18px 0 4px; } .panel h3:first-child { margin-top:0; }
.panel li { color:#33465d; }
.note { color:var(--muted); background:#f4f8fc; padding:10px 14px; border-radius:6px; } .small { font-size:13px; }
code { background:#eef1f6; padding:0 4px; border-radius:3px; }

/* icon chips + pills */
.cap-icon { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px; background:#eaf4ff; color:var(--accent); flex:none; }
.cap-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cap-icon img { width:30px; height:30px; display:block; }
.cap-icon.reduction { background:#fdecea; color:var(--err); } .cap-icon.invoices { background:#e9f6ed; color:var(--ok); } .cap-icon.workday_json { background:#fff3e0; color:#b45f06; } .cap-icon.stg_sales { background:#eef1f5; color:#46637e; } .cap-icon.stg_reduction { background:#fdecea; color:var(--err); } .cap-icon.stg_invoices { background:#e9f6ed; color:var(--ok); }
.status { font-size:11px; font-weight:650; padding:4px 10px; border-radius:12px; white-space:nowrap; }
.status.ok { color:#276742; background:#e9f6ed; } .status.planned { color:var(--muted); background:#eef1f5; } .status.fmt { color:#014486; background:#eaf4ff; }

/* capability cards (home) */
.capabilities { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:16px; }
.capability { display:flex; flex-direction:column; align-items:flex-start; gap:8px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:18px 20px; }
.capability.active { border-top:3px solid var(--accent); }
.capability h4 { margin:6px 0 0; font-size:17px; } .capability p { margin:0; font-size:13px; color:var(--muted); flex:1; }
.cap-top { display:flex; align-items:center; justify-content:space-between; width:100%; }
.capability .logo-chip { height:44px; min-width:44px; }
.cap-logos { display:flex; gap:6px; }

/* generator: tiles on the left (full width, rectangular), jobs pinned on the right so no space goes to waste */
.workspace-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; align-items:start; }
.tiles-col { min-width:0; }
.tiles { display:flex; flex-direction:column; gap:16px; }
.tile { background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px 24px; box-shadow:0 3px 12px #032d6008;
        display:flex; align-items:flex-start; gap:24px; transition:box-shadow .15s; }
.tile:hover { box-shadow:0 8px 24px #032d6018; }
.tile-main { flex:1; min-width:0; }
.tile-action { flex:none; display:flex; flex-direction:column; align-items:stretch; gap:8px; width:160px; padding-top:5px; }
.tile-top { display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; margin-bottom:10px; }
.tile h3 { margin:0; font-size:19px; }
.tile-flow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; } .tile-flow .arrow { color:var(--muted); }
.obj { margin:8px 0; color:var(--muted); font-size:13px; } .tile p { margin:0 0 8px; color:#33465d; }
.badge { display:inline-flex; align-items:center; gap:7px; background:#eef4ff; color:#014486; font-size:12px; padding:3px 12px 3px 4px; border-radius:20px; min-height:24px; }
.badge:not(:has(img)) { padding-left:12px; }
.badge img { height:18px; width:auto; max-width:44px; object-fit:contain; background:#fff; border-radius:10px; padding:1px 4px; }
dl { display:grid; grid-template-columns:auto 1fr; gap:2px 12px; font-size:13px; margin:8px 0 0; padding:10px 12px; background:#f4f8fc; border-radius:6px; }
dt { color:var(--muted); } dd { margin:0; }
.vol { font-size:13px; display:block; }
.vol input { width:76px; padding:6px 8px; border:1px solid #c6d2df; border-radius:6px; font:inherit; }
button.go { background:var(--accent); color:#fff; border:0; border-radius:6px; padding:11px 16px; font:inherit; font-weight:650; cursor:pointer; }
button.go:hover { filter:brightness(1.08); }
button.go:focus-visible, .nav:focus-visible, .agent-launcher:focus-visible { outline:3px solid #91c6ff; outline-offset:2px; }
button.go.primary { margin-top:14px; } button.go.danger { background:var(--err); }
.capability button.go { margin-top:6px; font-size:13px; padding:8px 14px; }

/* jobs column */
.jobs-col { background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 20px; min-height:160px; }
.jobs-col h2 { font-size:16px; margin:0 0 12px; }
.jobs-empty { color:var(--muted); font-size:13px; background:#f4f8fc; padding:12px 14px; border-radius:8px; margin:0; }
.job { background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:12px; border-left:5px solid var(--accent); }
.job.ok { border-left-color:var(--ok); } .job.err { border-left-color:var(--err); }
.job-head { display:flex; gap:14px; align-items:baseline; flex-wrap:wrap; }
.job-id { font:600 13px ui-monospace, Menlo, monospace; background:#eef1f6; padding:2px 8px; border-radius:4px; }
.job-title { font-weight:650; } .job-state { margin-left:auto; font-size:12px; font-weight:650; padding:3px 10px; border-radius:12px; background:#eaf4ff; color:#014486; }
.job.ok .job-state { color:#276742; background:#e9f6ed; } .job.err .job-state { color:var(--err); background:#fdecea; }
.bar { height:10px; background:#e3e9f2; border-radius:6px; overflow:hidden; margin:10px 0 6px; }
.fill { height:100%; width:0; background:var(--accent); border-radius:6px; transition:width .5s ease; }
.job.ok .fill { background:var(--ok); } .job.err .fill { background:var(--err); }
.job.running .fill { background-image:linear-gradient(90deg, #ffffff00, #ffffff55, #ffffff00); background-size:200% 100%; animation:shine 1.4s linear infinite; }
@keyframes shine { to { background-position:-200% 0; } }
.stage { font-size:14px; color:#33465d; } .job.err .stage { color:var(--err); white-space:pre-wrap; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; } .actions:empty { display:none; }
a.btn { background:#eaf4ff; color:var(--accent); text-decoration:none; padding:7px 13px; border-radius:6px; font-size:14px; font-weight:650; line-height:21px; }
a.btn:hover { background:var(--accent); color:#fff; }

/* reload warning */
.modal-backdrop { position:fixed; inset:0; background:#032d6099; display:flex; align-items:center; justify-content:center; z-index:40; }
.modal { background:#fff; border-radius:12px; padding:24px 28px; max-width:480px; box-shadow:0 10px 40px #0006; }
.modal h3 { margin:0 0 8px; color:var(--err); } .modal ul { padding-left:20px; }
.modal-actions { display:flex; gap:12px; justify-content:flex-end; margin-top:16px; }
.modal-actions .go { margin:0; }
.modal.dialog { width:min(520px, calc(100vw - 32px)); max-height:calc(100vh - 48px); overflow:auto; }
.modal.dialog h3 { color:var(--ink); } .modal.dialog.error h3 { color:var(--err); }
.modal.dialog ul { margin:6px 0; } .modal.dialog li { overflow-wrap:anywhere; } .dialog-note { color:var(--muted); font-size:13px; }
.modal.dialog p:empty, .modal.dialog ul:empty { display:none; }

/* Agentforce placeholder (upcoming feature, no backend) */
.agent-launcher { position:fixed; right:28px; bottom:24px; z-index:30; display:flex; align-items:center; gap:12px; padding:12px 22px 12px 14px; border:0; border-radius:16px; cursor:pointer;
                  background:linear-gradient(110deg, #032dca, #0176d3); color:#fff; font:inherit; font-size:16px; font-weight:650; box-shadow:0 5px 20px #032d6030; }
.agent-launcher img { width:36px; height:36px; display:block; } .agent-launcher:hover { filter:brightness(.95); }
.agent-panel { position:fixed; right:20px; bottom:20px; z-index:35; width:420px; max-width:calc(100vw - 16px); height:560px; max-height:calc(100dvh - 40px);
               background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 48px #032d6033; display:flex; flex-direction:column; overflow:hidden; }
.agent-panel.expanded { width:min(760px, calc(100vw - 40px)); height:calc(100dvh - 40px); }
.agent-head { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; border-bottom:1px solid #e5e5e5; }
.agent-head h2 { margin:0; font-size:20px; font-weight:400; }
.agent-actions button { background:none; border:0; color:var(--ink); font-size:22px; padding:4px 10px; border-radius:6px; cursor:pointer; } .agent-actions button:hover { background:var(--bg); }
.agent-body { flex:1; padding:28px 24px; overflow:auto; } .agent-body h3 { margin:14px 0 6px; font-size:18px; font-weight:500; color:#4a4a4a; } .agent-body p { margin:0; color:#4a4a4a; }
.agent-avatar { width:44px; height:44px; display:block; margin-bottom:12px; }
.agent-composer { display:flex; align-items:center; gap:8px; margin:10px 16px 16px; padding:6px 8px 6px 20px; border:1px solid #c9c9c9; border-radius:30px; background:#fafafa; }
.agent-composer input { flex:1; border:0; background:transparent; font:inherit; padding:8px 0; } .agent-composer input:focus { outline:none; }
.agent-composer button { border:0; border-radius:50%; width:38px; height:38px; display:grid; place-items:center; background:#f3f3f3; color:#9a9a9a; }

@media (max-width:1100px) { .workspace-grid { grid-template-columns:1fr; } }
@media (max-width:1500px) { .tile { flex-direction:column; align-items:stretch; gap:14px; } .tile-action { width:auto; flex-direction:row; align-items:center; justify-content:flex-end; flex-wrap:wrap; }
                            .tile-action .vol { margin-right:auto; } .tile-action button.go { min-width:160px; } }
@media (max-width:900px) { .brand-path { display:none; } }
@media (max-width:760px) { :root { --header-h:72px; } .brand-title .sub { display:none; } .shell { flex-direction:column; } .sidebar { width:auto; height:auto; position:static; border-right:0; border-bottom:1px solid var(--line); }
                           main { margin-left:0; padding:20px 16px; } .menu { display:flex; padding:8px; } .agent-launcher { right:14px; bottom:14px; }
                           .tile { flex-direction:column; align-items:stretch; } .tile-action { width:auto; } }

/* parent tiles: choose which data to mimic */
.groups { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.group { display:flex; gap:12px; align-items:flex-start; text-align:left; background:#fff; border:1px solid var(--line); border-top:3px solid var(--line); border-radius:12px; padding:14px 16px; cursor:pointer; font:inherit; color:#33465d; box-shadow:0 3px 12px #032d6008; }
.group:hover { box-shadow:0 8px 24px #032d6018; }
.group.active { border-top-color:var(--accent); background:#f4f9ff; }
.group-logos { display:flex; flex-direction:column; gap:4px; flex:none; } .group-logos img { height:22px; width:auto; max-width:60px; object-fit:contain; }
.group-text { display:flex; flex-direction:column; gap:4px; min-width:0; } .group-text b { color:var(--ink); font-size:16px; }
.group-creates { font-size:13px; } .group-outputs { font-size:12px; color:var(--muted); }
@media (max-width:760px) { .groups { grid-template-columns:1fr; } }
button.btn { background:#eaf4ff; color:var(--accent); border:0; cursor:pointer; padding:7px 13px; border-radius:6px; font-size:14px; font-weight:650; font-family:inherit; line-height:21px; }
button.btn:hover:not(:disabled) { background:var(--accent); color:#fff; }
button.btn:disabled { opacity:.5; cursor:default; }
.load-note { margin-top:8px; font-size:13px; color:var(--muted); } .load-note.err { color:var(--err); }
.load-stats { margin-top:8px; font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.load-stats:empty { display:none; }
.load-stats .ls-file { margin-top:6px; font-weight:600; color:var(--text, inherit); }
.load-stats .ls-sql { margin-top:2px; padding:6px 8px; font-family:ui-monospace,monospace; background:rgba(0,0,0,.05); border-radius:4px; user-select:all; }

/* shared icons on the Snowflake buttons */
.ico { width:16px; height:16px; margin-right:6px; vertical-align:-3px; flex:none; }
svg.ico { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
button.btn:disabled .ico { filter:grayscale(1); }

/* left panel: Snowflake environment */
.side-env { border-top:1px solid var(--line); padding:12px 12px 14px; }
.side-env h3 { margin:0 0 8px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.env-now { display:flex; align-items:center; gap:8px; font-weight:650; } .env-now img { width:20px; height:20px; object-fit:contain; }
.env-now .chip { margin-left:auto; }
.env-change { margin-top:8px; background:none; border:0; padding:0; font:inherit; font-size:13px; font-weight:600; color:var(--accent); cursor:pointer; text-decoration:underline; }
.env-change:focus-visible { outline:3px solid #91c6ff; outline-offset:2px; }
.env-form { max-width:520px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:18px 20px; }
.env-opt { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; margin-bottom:8px; cursor:pointer; }
.env-opt:has(input:checked) { border-color:var(--accent); background:#eaf4ff; }
.env-opt.disabled { background:#f4f5f7; color:#9aa3ad; cursor:not-allowed; } .env-opt.disabled .chip { margin-left:auto; }
.env-opt .chip.loaded { margin-left:auto; } .env-name { font-weight:650; }
.env-msg { min-height:20px; font-size:13px; color:var(--muted); margin:8px 0; } .env-msg.err { color:var(--err); }
.env-actions { display:flex; gap:12px; } .env-actions .go { margin:0; } button.go.secondary { background:#fff; color:var(--accent); border:1px solid var(--accent); }
button.go:disabled { opacity:.55; cursor:not-allowed; }

/* left panel: jobs in this session */
.sidebar { overflow:hidden; }
.side-jobs { flex:1; min-height:0; overflow-y:auto; border-top:1px solid var(--line); padding:12px 12px 16px; }
.side-jobs h3 { margin:0 0 8px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.side-empty { font-size:13px; color:var(--muted); margin:0; } .side-empty[hidden] { display:none; }
.jrow { border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin-bottom:8px; background:#fff; }
.jrow-head { display:flex; gap:8px; align-items:center; justify-content:space-between; }
.jrow-title { font-weight:650; font-size:13px; color:var(--ink); }
.jrow-meta { font:12px ui-monospace, Menlo, monospace; color:var(--muted); margin-top:2px; }
.jrow.side { display:flex; flex-direction:column; gap:2px; }               /* heading, job id, status — nothing else */
.jrow-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; } .jrow-actions:empty { display:none; }
.jrow button.btn { font-size:12px; padding:5px 10px; }
.jrow-note { margin-top:6px; font-size:12px; color:var(--muted); overflow-wrap:anywhere; } .jrow-note.err { color:var(--err); }
.chip { font-size:11px; font-weight:650; padding:2px 8px; border-radius:10px; white-space:nowrap; background:#eef1f5; color:var(--muted); }
.chip.loaded { background:#e9f6ed; color:#276742; } .chip.ready { background:#fff4e0; color:#8a5300; }
.chip.loading, .chip.running { background:#eaf4ff; color:#014486; } .chip.failed, .chip.load_failed { background:#fdecea; color:var(--err); }

/* Load screen */
#load-jobs .jrow { max-width:820px; padding:12px 14px; } #load-jobs .jrow-title { font-size:15px; }
#load-jobs .jrow-plan { font:12px ui-monospace, Menlo, monospace; color:var(--muted); margin-top:6px; overflow-wrap:anywhere; }
.empty-state { max-width:520px; background:#fff; border:1px dashed var(--line); border-radius:10px; padding:22px 24px; }
.empty-state[hidden] { display:none; } .empty-state p { margin:0 0 8px; }
@media (max-width:760px) { .sidebar { overflow:visible; } .side-jobs { display:none; } }