/* ── Layout Shell ───────────────────────────────────────────── */
.shell{display:flex;flex-direction:column;height:100vh;overflow:hidden}
/* ── Body row — sidenav + main side by side ─────────────────── */
.body-row{flex:1;display:flex;overflow:hidden}

/* ── Sidebar nav ───────────────────────────────────────────── */
.sidenav{width:52px;background:var(--bg1);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:4px;flex-shrink:0;z-index:10}
.sidenav-logo{width:32px;height:32px;background:var(--accent);border-radius:3px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.sidenav-logo svg{width:18px;height:18px}
.nav-btn{width:38px;height:38px;border:none;background:transparent;border-radius:var(--radius2);color:var(--text3);display:flex;align-items:center;justify-content:center;transition:all .15s;position:relative}
.nav-btn:hover{background:var(--bg3);color:var(--text)}
.nav-btn.active{background:var(--accent-dim);color:var(--accent)}
.nav-btn svg{width:18px;height:18px}
/* Gated nav buttons (Simulator / Advanced) — locked while static data is dirty
   or incomplete. The wellStaticDataReady() predicate in wellIO.js drives this
   class; setTab also swallows clicks on these tabs while locked. */
.nav-btn.is-locked{opacity:.4;cursor:not-allowed;color:var(--text3)}
.nav-btn.is-locked:hover{background:transparent;color:var(--text3)}
.nav-btn.is-locked svg{opacity:.7}
.nav-tooltip{position:fixed;left:60px;background:var(--bg4);border:1px solid var(--line2);color:var(--text);padding:4px 8px;border-radius:var(--radius);font-size:11px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:500;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.nav-btn:hover .nav-tooltip{opacity:1}
/* Per-tab "this tab has invalid/incomplete data" indicator. Hidden by default;
   shown by JS when the corresponding wellHasIncomplete* predicate returns true.
   Subtle red dot at the top-right of the nav button — matches the visual
   weight of inline "needs-config" indicators on data tables. */
.nav-dot{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px var(--bg1);display:none;pointer-events:none}
.nav-dot.show{display:block}
.nav-spacer{flex:1}

/* ── Main content area ──────────────────────────────────────── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}

/* ── Banner ──────────────────────────────────────────────────── */
.banner{height:46px;background:var(--bg1);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 14px 0 0;gap:0;flex-shrink:0;z-index:20}
.banner-logo-slot{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:0 14px 0 12px}
.banner-logo-slot svg path{fill:var(--accent)}
.banner-wordmark{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--text);letter-spacing:.1em;white-space:nowrap}
.wm-accent{color:var(--accent)}
.banner-sep{width:1px;height:18px;background:var(--line2);flex-shrink:0;margin:0 4px}
.banner-crumb{flex:1;display:flex;align-items:center;gap:0;padding:0 4px;overflow:hidden;min-width:0}
.crumb-sep{color:var(--text3);font-size:12px;margin:0 4px;flex-shrink:0;opacity:.5}
.crumb-link{color:var(--text3);cursor:pointer;border:none;background:transparent;padding:3px 6px;font-size:11px;font-family:var(--sans);transition:color .15s;border-radius:var(--radius);white-space:nowrap;flex-shrink:0}
.crumb-link:hover{color:var(--text);background:var(--bg3)}
.crumb-current{font-size:11px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:3px 6px;font-family:var(--mono)}
/* Save status — "· Last saved by X, N min ago" or "· Unsaved changes [Save]" */
.banner-status-sep{color:var(--text3);font-size:11px;margin:0 4px;flex-shrink:0;opacity:.5;display:none}
.banner-status-sep.show{display:inline}
.banner-status-text{font-size:11px;color:var(--text3);font-family:var(--sans);white-space:nowrap;flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;padding:3px 4px}
.banner-status-text.dirty{color:var(--warn)}
.banner-save-btn{background:var(--accent);color:var(--bg1);border:0;border-radius:var(--radius);padding:4px 12px;font-size:11px;font-weight:500;cursor:pointer;font-family:inherit;margin-left:6px;flex-shrink:0;transition:background .15s}
.banner-save-btn:hover:not(:disabled){background:var(--accent2,var(--accent));filter:brightness(1.1)}
.banner-save-btn:disabled{opacity:.6;cursor:default}
.banner-right{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto;padding-left:12px}
/* User profile button */
.user-btn{display:flex;align-items:center;gap:7px;padding:4px 8px 4px 4px;border-radius:var(--radius2);border:1px solid var(--line2);background:transparent;cursor:pointer;transition:all .15s}
.user-btn:hover{background:var(--bg2);border-color:var(--line2)}
.user-avatar{width:26px;height:26px;border-radius:50%;background:var(--accent-dim);border:1.5px solid var(--accent2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.user-avatar svg{width:14px;height:14px;color:var(--accent)}
.user-info{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.user-name{font-size:11px;color:var(--text);font-weight:500;line-height:1.2;white-space:nowrap}
.user-role{font-size:9px;color:var(--text3);line-height:1.2;font-family:var(--mono);letter-spacing:.04em}
.user-caret{color:var(--text3);margin-left:2px;display:flex;align-items:center}
.user-caret svg{width:10px;height:10px}
/* User dropdown */
.user-dropdown{position:fixed;top:50px;right:14px;background:var(--bg2);border:1px solid var(--line2);border-radius:var(--radius2);min-width:186px;box-shadow:0 8px 32px var(--shadow-color);z-index:200;overflow:hidden;display:none}
.user-dropdown.open{display:block}
.dd-header{padding:10px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.dd-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-dim);border:1.5px solid var(--accent2);display:flex;align-items:center;justify-content:center}
.dd-avatar svg{width:16px;height:16px;color:var(--accent)}
.dd-info{display:flex;flex-direction:column;gap:1px}
.dd-name{font-size:12px;font-weight:500;color:var(--text)}
.dd-email{font-size:10px;color:var(--text3);font-family:var(--mono)}
.dd-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;background:transparent;color:var(--text2);font-size:11px;font-family:var(--sans);cursor:pointer;transition:all .15s;text-align:left}
.dd-item:hover{background:var(--bg3);color:var(--text)}
.dd-item svg{width:13px;height:13px;flex-shrink:0;opacity:.7}
.dd-item.danger{color:var(--danger)}
.dd-item.danger:hover{background:var(--danger-dim)}
.dd-divider{height:1px;background:var(--line);margin:3px 0}
/* Depth badge kept for any usage */
.depth-badge{background:var(--bg3);border:1px solid var(--line2);border-radius:var(--radius);padding:3px 10px;font-family:var(--mono);font-size:11px;color:var(--warn)}
.depth-label{font-size:10px;color:var(--text3);margin-right:4px}
/* ── Sidebar footer ──────────────────────────────────────────── */
.sidebar-footer{border-top:1px solid var(--line);padding:6px 0;display:flex;flex-direction:column;gap:2px;flex-shrink:0;width:100%}
.footer-btn{display:flex;align-items:center;height:36px;cursor:pointer;border:none;background:transparent;color:var(--text3);font-size:12px;font-family:var(--sans);width:100%;text-align:left;transition:all .12s;overflow:hidden;white-space:nowrap;border-left:2px solid transparent;position:relative}
.footer-btn:hover{background:var(--bg2);color:var(--text2)}
.footer-btn .fb-slot{width:52px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.footer-btn .fb-slot svg{width:14px;height:14px}
.footer-btn .fb-label{display:none}
.footer-btn .fb-tip{position:fixed;left:60px;background:var(--bg4);border:1px solid var(--line2);color:var(--text);padding:4px 9px;border-radius:var(--radius);font-size:11px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:500;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.footer-btn:hover .fb-tip{opacity:1}

/* ── Tab panels ─────────────────────────────────────────────── */
.content{flex:1;overflow:hidden;display:flex;position:relative}
.tab-panel{position:absolute;inset:0;display:flex;overflow:hidden;visibility:hidden;pointer-events:none;opacity:0}
.tab-panel.active{position:relative;visibility:visible;pointer-events:auto;flex:1;opacity:1}

/* ── Two-column panel layout ────────────────────────────────── */
.panel-left{width:340px;flex-shrink:0;background:var(--bg1);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.panel-left-table{width:863px;flex-shrink:0;background:var(--bg1);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.panel-right{flex:1;overflow-y:auto;padding:16px}
.panel-full{flex:1;overflow-y:auto;padding:16px}

.panel-header{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.panel-header h3{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text2)}
.panel-list{flex:1;overflow-y:auto;padding:8px}
.panel-list::-webkit-scrollbar{width:4px}
.panel-list::-webkit-scrollbar-track{background:transparent}
.panel-list::-webkit-scrollbar-thumb{background:var(--line2);border-radius:2px}

/* ── Scrollbars global ──────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}