`public/panels/accounts.html`

106 lines
<div class="muted-banner" id="acc-banner">Loading accounts…</div>

<!-- Amazon-style layout: faceted filter rail LEFT, account detail RIGHT -->
<div class="acc-wrap">

  <!-- ── LEFT: the filter panel (facets + the full account list) ─────────── -->
  <aside class="acc-rail">
    <div class="acc-railcard">
      <input type="search" id="acc-search" placeholder="Filter accounts…" autocomplete="off">
    </div>

    <div class="acc-railcard">
      <div class="acc-railhead">Status</div>
      <div id="acc-facets" class="acc-facets"><div class="muted" style="font-size:12px">Loading…</div></div>
    </div>

    <div class="acc-railcard">
      <div class="acc-railhead">Accounts <span id="acc-listcount" class="acc-count"></span></div>
      <div id="acc-list" class="acc-list"><div class="muted" style="font-size:12px">Loading…</div></div>
    </div>
  </aside>

  <!-- ── RIGHT: detail for the selected account (or an all-accounts grid) ─── -->
  <section class="acc-main" id="acc-main">
    <div class="muted">Select an account on the left.</div>
  </section>
</div>

<template id="acc-row-tpl">
  <button class="acc-row" type="button">
    <span class="acc-ic"></span>
    <span class="acc-name"></span>
    <span class="acc-dot"></span>
  </button>
</template>

<style>
.acc-wrap{display:grid;grid-template-columns:264px minmax(0,1fr);gap:18px;align-items:start}
@media(max-width:900px){.acc-wrap{grid-template-columns:1fr}}

/* left rail */
.acc-rail{display:flex;flex-direction:column;gap:12px;position:sticky;top:8px}
.acc-railcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px}
.acc-railcard #acc-search{width:100%;box-sizing:border-box}
.acc-railhead{font:700 11px/1 Inter;letter-spacing:.5px;text-transform:uppercase;color:var(--mut);margin-bottom:10px}
.acc-count{color:var(--mut);font-weight:400}
.acc-facets{display:flex;flex-direction:column;gap:2px}
.acc-facet{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:transparent;border:0;
 border-radius:8px;padding:7px 8px;cursor:pointer;font:500 13px/1.2 Inter;color:var(--ink)}
.acc-facet:hover{background:var(--cream)}
.acc-facet.on{background:var(--cream);font-weight:700}
.acc-facet .fdot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.acc-facet .fct{margin-left:auto;font-size:11px;color:var(--mut);background:#fff;border:1px solid var(--line);
 border-radius:999px;padding:1px 8px;font-weight:600}
.acc-facet.on .fct{background:var(--accent);color:#fff;border-color:var(--accent)}

.acc-list{display:flex;flex-direction:column;gap:1px;max-height:60vh;overflow:auto}
.acc-row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;border:0;
 border-radius:8px;padding:8px 8px;cursor:pointer;font:500 13.5px/1.2 Inter;color:var(--ink)}
.acc-row:hover{background:var(--cream)}
.acc-row.on{background:var(--cream);box-shadow:inset 3px 0 0 var(--accent)}
.acc-ic{font-size:16px;flex:0 0 auto;width:20px;text-align:center}
.acc-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.dot-ok{background:#3a8a4a}
.dot-warn{background:#c79a3a}
.dot-off{background:#c04a4a}

/* right detail */
.acc-main{min-height:200px}
.acc-head{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.acc-head .h-ic{font-size:30px}
.acc-head h2{margin:0;font:600 22px/1.1 "Cormorant Garamond",Georgia,serif}
.acc-badge{font:700 10.5px/1 Inter;letter-spacing:.4px;text-transform:uppercase;border-radius:999px;padding:4px 10px}
.badge-ok{background:#e3efe0;color:#2f6b34}
.badge-warn{background:#fdf3dc;color:#8a6a1e}
.badge-off{background:#f7e2e2;color:#a53a3a}
.acc-handles{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.acc-note{font-size:13px;line-height:1.5;color:#4a443c;margin:6px 0}
.acc-caveat{background:#fff8ec;border:1px solid #f0e0c0;border-radius:10px;padding:10px 12px;color:#7a5a2a;
 font-size:12.5px;line-height:1.5;margin:10px 0}
.fix{border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:14px;background:#fff}
.fix h3{margin:0 0 4px;font:700 13px/1.2 Inter;text-transform:uppercase;letter-spacing:.4px;color:var(--accent)}
.fix .step{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.fix .step:last-child{border-bottom:0}
.fix .n{flex:0 0 22px;height:22px;border-radius:50%;background:var(--cream);color:var(--accent);
 font:700 12px/22px Inter;text-align:center}
.fix .sbody{flex:1;min-width:0}
.fix .sbody b{font-size:13px}
.fix .copyrow{display:flex;gap:6px;align-items:center;margin:6px 0}
.fix .copyrow code{flex:1;background:#f3efe7;border:1px solid var(--line);border-radius:7px;padding:6px 9px;
 font-size:11.5px;overflow:auto;white-space:nowrap}
.fix .fld{margin:8px 0}
.fix .fld label{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;margin-bottom:4px}
.fix .fld input{width:100%;box-sizing:border-box}
.fix .set-pill{background:#e3efe0;color:#3a6b3a;font:700 9.5px/1 Inter;border-radius:999px;padding:2px 7px}
.fix .miss-pill{background:#f7e2e2;color:#a53a3a;font:700 9.5px/1 Inter;border-radius:999px;padding:2px 7px}
.fix .perm{font-size:12px;color:#5a544b;background:var(--cream);border-radius:8px;padding:7px 10px}
.acc-summary{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.acc-scard{border:1px solid var(--line);border-radius:11px;padding:12px;background:#fff;cursor:pointer}
.acc-scard:hover{border-color:var(--accent)}
.acc-scard .st{display:flex;align-items:center;gap:8px;font-weight:600}
.acc-scard .ss{font-size:11.5px;color:var(--mut);margin-top:6px}
.btn.xs{padding:5px 10px;font-size:12px}
</style>