← back to Astek Landing
public/nav-agent/nav-agent.css
134 lines
/* ============================================================================
* Nav Agent — universal grid-controls drop-in (v1.0)
* Left field-toggle panel + sort-every-field + grouping + movable/removable/
* expandable data panels. Zero dependencies. Additive & defensive.
* Honors the house internal-line-viewer spec (left panel, density type-scale,
* tight cards, localStorage-persisted).
* ==========================================================================*/
:root{
--na-acc:var(--acc,#1f9e8f);
--na-line:var(--line,#2a2f3a);
--na-bg:var(--panel,#12151c);
--na-bg2:var(--bg,#0c0e13);
--na-fg:var(--fg,#e7e9ee);
--na-mut:var(--mut,#8b93a3);
}
/* ---- launcher (bottom-left cog) --------------------------------------- */
.na-launch{position:fixed;left:14px;bottom:14px;z-index:2147483000;
width:42px;height:42px;border-radius:50%;border:1px solid var(--na-line);
background:var(--na-bg);color:var(--na-fg);font-size:19px;cursor:pointer;
display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 18px rgba(0,0,0,.45);transition:transform .15s}
.na-launch:hover{transform:scale(1.08);border-color:var(--na-acc)}
/* ---- left field/sort/group panel -------------------------------------- */
.na-panel{position:fixed;left:0;top:0;bottom:0;width:290px;z-index:2147483001;
background:var(--na-bg);border-right:1px solid var(--na-line);color:var(--na-fg);
display:flex;flex-direction:column;font:13px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
transform:translateX(-100%);transition:transform .2s ease;box-shadow:2px 0 24px rgba(0,0,0,.4)}
.na-panel.open{transform:translateX(0)}
.na-panel header{display:flex;align-items:center;gap:8px;padding:12px 14px;
border-bottom:1px solid var(--na-line);font-weight:600;letter-spacing:.3px}
.na-panel header .na-title{flex:1}
.na-panel header button{background:none;border:0;color:var(--na-mut);cursor:pointer;font-size:16px;padding:2px 6px;border-radius:4px}
.na-panel header button:hover{color:var(--na-fg);background:rgba(255,255,255,.06)}
.na-body{flex:1;overflow:auto;padding:8px 12px 40px}
.na-sec{border-top:1px solid var(--na-line);padding:10px 0}
.na-sec:first-child{border-top:0}
.na-sec>.na-h{display:flex;align-items:center;gap:6px;cursor:pointer;
font-weight:600;color:var(--na-mut);text-transform:uppercase;font-size:11px;letter-spacing:.6px;user-select:none}
.na-sec>.na-h::before{content:'▸';font-size:9px;transition:transform .15s}
.na-sec.open>.na-h::before{transform:rotate(90deg)}
.na-sec .na-c{display:none;padding:8px 2px 2px}
.na-sec.open .na-c{display:block}
.na-search{width:100%;box-sizing:border-box;background:var(--na-bg2);border:1px solid var(--na-line);
color:var(--na-fg);border-radius:6px;padding:8px 10px;margin:4px 0 10px;font-size:13px}
.na-fieldrow{display:flex;align-items:center;gap:8px;padding:4px 2px;cursor:pointer;border-radius:4px}
.na-fieldrow:hover{background:rgba(255,255,255,.04)}
.na-fieldrow input{accent-color:var(--na-acc);cursor:pointer}
.na-fieldrow .na-cnt{margin-left:auto;color:var(--na-mut);font-size:11px}
.na-row{display:flex;gap:6px;align-items:center;margin:6px 0}
.na-row label{color:var(--na-mut);min-width:52px}
.na-row select,.na-row input[type=range]{flex:1;background:var(--na-bg2);border:1px solid var(--na-line);
color:var(--na-fg);border-radius:6px;padding:6px 8px;font-size:13px}
.na-mini{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.na-mini button{background:var(--na-bg2);border:1px solid var(--na-line);color:var(--na-fg);
border-radius:6px;padding:5px 9px;font-size:12px;cursor:pointer}
.na-mini button:hover,.na-mini button.on{border-color:var(--na-acc);color:var(--na-acc)}
.na-reset{width:100%;margin-top:14px;background:var(--na-bg2);border:1px solid var(--na-line);
color:var(--na-fg);border-radius:6px;padding:9px;cursor:pointer;font-size:13px}
.na-reset:hover{border-color:#c0563f;color:#e08a76}
.na-note{color:var(--na-mut);font-size:11px;padding:2px;line-height:1.5}
/* ---- grouping headers injected into the grid -------------------------- */
.na-group-h{grid-column:1/-1;display:flex;align-items:center;gap:8px;
padding:8px 4px;margin:6px 0 2px;border-bottom:1px solid var(--na-line);
color:var(--na-acc);font-weight:600;font-size:13px;cursor:pointer;user-select:none}
.na-group-h .na-gcount{color:var(--na-mut);font-weight:400}
.na-group-h.collapsed + .na-group-body{display:none}
table .na-group-h{display:table-row}
table .na-group-h td{padding:8px 6px;color:var(--na-acc);font-weight:600;border-bottom:1px solid var(--na-line)}
/* ---- movable / resizable / removable data-panel chrome ---------------- */
.na-wrap{position:relative}
.na-bar{display:flex;align-items:center;gap:6px;padding:4px 8px;cursor:move;
background:var(--na-bg);border:1px solid var(--na-line);border-bottom:0;
border-radius:6px 6px 0 0;color:var(--na-mut);font-size:12px;user-select:none}
.na-bar .na-bt{flex:1;font-weight:600;color:var(--na-fg)}
.na-bar button{background:none;border:0;color:var(--na-mut);cursor:pointer;font-size:14px;padding:1px 5px;border-radius:4px}
.na-bar button:hover{color:var(--na-fg);background:rgba(255,255,255,.08)}
.na-wrap.na-float{position:fixed;z-index:2000;box-shadow:0 10px 40px rgba(0,0,0,.55);
background:var(--na-bg2);border-radius:6px;resize:both;overflow:auto;min-width:280px;min-height:160px}
.na-wrap.na-collapsed .na-inner{display:none}
.na-wrap.na-removed{display:none}
.na-wrap.na-max{position:fixed;inset:12px;z-index:2001;background:var(--na-bg2);
box-shadow:0 10px 60px rgba(0,0,0,.6);overflow:auto;resize:none}
.na-restorebar{position:fixed;left:14px;bottom:66px;z-index:2147483000;display:flex;flex-direction:column;gap:6px}
.na-restorebar button{background:var(--na-bg);border:1px solid var(--na-line);color:var(--na-fg);
border-radius:6px;padding:6px 10px;font-size:12px;cursor:pointer}
.na-restorebar button:hover{border-color:var(--na-acc)}
/* ---- merged mode: folded INTO an existing house panel ----------------- */
.na-merge{border-top:1px dashed var(--na-line);margin-top:12px;padding-top:10px}
.na-merge .na-mh{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--na-acc);
text-transform:uppercase;font-size:11px;letter-spacing:.6px;margin-bottom:8px}
.na-merge .na-row label{color:var(--na-mut);min-width:48px}
.na-merge select{background:var(--na-bg2);border:1px solid var(--na-line);color:var(--na-fg);border-radius:6px;padding:6px 8px;font-size:13px;flex:1}
/* ---- Grid / List view toggle ----------------------------------------- */
.na-viewseg{display:inline-flex;margin:4px 0 10px;border:1px solid var(--na-line);border-radius:6px;overflow:hidden}
.na-viewseg button{background:var(--na-bg2);color:var(--na-mut);border:0;border-right:1px solid var(--na-line);
padding:6px 12px;font-size:12px;cursor:pointer}
.na-viewseg button:last-child{border-right:0}
.na-viewseg button.on{background:var(--na-acc);color:#fff}
/* ---- compact LIST view (the kv-list "third view") --------------------- */
.na-list{width:100%}
.na-lrows{display:flex;flex-direction:column}
.na-lrow{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:10px 14px;
border-bottom:1px solid var(--na-line)}
.na-lrow:hover{background:rgba(255,255,255,.04)}
.na-lmain{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:210px;flex:0 0 auto}
.na-la{font-weight:600;color:var(--na-fg)}
/* data spans the FULL row width in tight columns (left edge → right edge),
not left-packed chips — matches the CRCP "expanded to left and right" layout */
.na-lmeta{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px 16px;flex:1 1 320px;min-width:0;align-content:start}
.na-lm{font-size:12.5px;color:var(--na-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.na-lmk{color:var(--na-mut);font-size:10px;text-transform:uppercase;letter-spacing:.5px;margin-right:5px}
.na-lempty{padding:40px;text-align:center;color:var(--na-mut)}
/* host left-sidebar collapse (v1.3) — always collapsed on load, ☰ reveals */
.na-side{transition:transform .18s ease}
.na-side.na-side-collapsed{transform:translateX(-100%)!important;pointer-events:none}
.na-side-main{transition:margin-left .18s ease}
.na-side-main.na-side-shift{margin-left:0!important}
.na-side-toggle{position:fixed;left:10px;top:10px;z-index:2147483002;width:38px;height:34px;
display:flex;align-items:center;justify-content:center;border-radius:8px;
border:1px solid var(--na-line);background:var(--na-bg2);color:var(--na-fg);
font-size:16px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.28)}
.na-side-toggle:hover,.na-side-toggle.on{border-color:var(--na-acc);color:var(--na-acc)}
@media (max-width:640px){.na-panel{width:86vw}.na-lmain{min-width:100%}}