/* toolbox.css — The Pickle Lodge shared design system.
 *
 * Every tool in the toolbox links this file instead of inlining its own
 * copy of colors/type/layout/components. This is the REAL, proven
 * structure — extracted directly from OPA Workbench's working production
 * code (the tool this pattern actually originated from), not a
 * reconstruction from a written style guide.
 *
 * Layout standard: LEFT SIDEBAR (OPA Workbench's pattern), not a top bar.
 * Member Pulse and Lodge Locker currently use a top-bar layout and are
 * being migrated onto this sidebar pattern — see TOOLBOX_FOUNDATION.md.
 *
 * Update the toolbox's look by editing this ONE file — every tool that
 * links it picks up the change automatically.
 */

:root{
  --navy:#2b3252; --navy-2:#3a4161; --navy-3:#474e6e;
  --green:#77d52a; --green-d:#61bf14;
  --ink:#1b2735; --muted:#6b7a8d; --line:#e3e9f0; --bg:#f4f7fb; --card:#ffffff;
  --amber:#f0a500; --teal:#1f9e8f; --red:#e0524a;
  --radius:12px; --shadow:0 1px 2px rgba(16,36,59,.06),0 6px 18px rgba(16,36,59,.06);

  /* Location colors — any UI representing a single location gets a subtle
     ~5% wash of that location's color plus a matching left border, not a
     full-saturation fill. */
  --factory52:#79cd46;
  --lunken:#ff7040;
  --northshore:#73c0d2;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

/* ── page shell — sidebar + main, the toolbox-wide layout standard ──── */
.app{ display:flex; min-height:100vh; }

.sidebar{
  width:236px; background:var(--navy); color:#cdd9e6; flex-shrink:0;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.brand{ padding:20px 20px 16px; display:flex; align-items:center; gap:11px; border-bottom:1px solid rgba(255,255,255,.07); }
.brand .mark{ width:34px; height:34px; border-radius:9px; background:var(--green); display:grid; place-items:center; flex-shrink:0; }
.brand .mark svg{ width:20px; height:20px; }
.brand h1{ font-size:15px; color:#fff; margin:0; font-weight:700; letter-spacing:.2px; }
.brand p{ font-size:11px; margin:1px 0 0; color:#7e93aa; font-weight:500; }

nav{ padding:12px 12px; flex:1; overflow-y:auto; }
.nav-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.9px; color:#62758c; padding:14px 10px 6px; font-weight:700; }
.nav-item{
  display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:9px;
  cursor:pointer; color:#bccadb; font-weight:500; font-size:13.5px; margin-bottom:2px; user-select:none;
  transition:background .12s, color .12s;
}
.nav-item svg{ width:17px; height:17px; flex-shrink:0; opacity:.85; }
.nav-item:hover{ background:var(--navy-2); color:#fff; }
.nav-item.active{ background:var(--navy-3); color:#fff; }
.nav-item.active svg{ opacity:1; }
.sidebar-foot{ padding:14px 16px; border-top:1px solid rgba(255,255,255,.07); font-size:11.5px; color:#7e93aa; }
.src-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--amber); margin-right:7px; vertical-align:middle; }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  background:var(--card); border-bottom:1px solid var(--line);
  padding:14px 28px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; position:sticky; top:0; z-index:20;
}
.topbar h2{ margin:0; font-size:18px; font-weight:700; flex:1; min-width:160px; }
.topbar .sub{ font-size:12.5px; color:var(--muted); font-weight:500; margin-top:1px; }
.content{ padding:24px 28px 60px; flex:1; }

/* ── filters / location tabs ─────────────────────────────────────────── */
.filters{ display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.loc-tabs{ display:flex; gap:4px; }
.loc-tab{ padding:5px 12px; border-radius:20px; border:1.5px solid var(--line); font-size:11.5px; font-weight:500; cursor:pointer; background:transparent; color:var(--muted); transition:all .12s; }
.loc-tab:hover{ border-color:var(--navy); color:var(--navy); }
.loc-tab[data-loc="all"].active{ background:var(--navy); color:#fff; border-color:var(--navy); }
.loc-tab[data-loc="Factory 52"].active,
.loc-tab[data-loc="f52"].active{ background:var(--factory52); color:#1a2200; border-color:var(--factory52); }
.loc-tab[data-loc="Lunken Landing"].active,
.loc-tab[data-loc="lunken"].active{ background:var(--lunken); color:#fff; border-color:var(--lunken); }
.loc-tab[data-loc="North Shore"].active,
.loc-tab[data-loc="northshore"].active{ background:var(--northshore); color:#0d3a45; border-color:var(--northshore); }

select, input[type=date]{
  font:inherit; font-size:13px; padding:7px 11px; border:1px solid var(--line); border-radius:8px;
  background:#fff; color:var(--ink); cursor:pointer;
}
select:focus, input:focus, button:focus-visible{ outline:2px solid var(--green); outline-offset:1px; }
input[type=number], input[type=text].num-in{ font:inherit; font-size:13px; padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); width:92px; }

.money{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.pos{ color:#3f8f1e; font-weight:700; } .neg{ color:var(--red); font-weight:700; }
.pfx{ color:var(--muted); margin-right:2px; }

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn{
  background:var(--green); color:#0c2a05; border:none; font-weight:700;
  font-size:13px; padding:9px 16px; border-radius:9px; cursor:pointer;
  transition:background .12s;
}
.btn:hover{ background:var(--green-d); color:#fff; }

/* ── KPI cards ───────────────────────────────────────────────────────── */
.kpi-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:16px; margin-bottom:22px; }
.kpi{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); }
.kpi .label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); font-weight:700; display:flex; align-items:center; gap:7px; }
.kpi .val{ font-size:28px; font-weight:750; margin-top:7px; letter-spacing:-.5px; }
.kpi .delta{ font-size:12px; font-weight:600; margin-top:3px; }
.delta.up{ color:var(--green-d); } .delta.down{ color:var(--red); } .delta.flat{ color:var(--muted); }
.kpi .pip{ width:9px; height:9px; border-radius:3px; }

/* ── panels (general-purpose cards, replaces plain .card for page content) ── */
.grid{ display:grid; gap:18px; }
.panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.panel-head{ padding:15px 18px 0; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.panel-head h3{ margin:0; font-size:15px; font-weight:700; }
.panel-head p{ margin:2px 0 0; font-size:12px; color:var(--muted); }
.panel-body{ padding:16px 18px 18px; }
.chart-wrap{ position:relative; height:260px; }
.chart-wrap.sm{ height:220px; }

/* Simple standalone card — for anything that doesn't need the full
   panel-head/panel-body structure (e.g. a single stat, a small form). */
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:18px;
}

/* ── tables ──────────────────────────────────────────────────────────── */
table{ width:100%; border-collapse:collapse; }
th{ font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:700; text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap; cursor:pointer; user-select:none; }
th.no-sort{ cursor:default; }
td{ padding:11px 14px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:#f8fbfe; }
.right{ text-align:right; } .center{ text-align:center; }

/* ── status chips ────────────────────────────────────────────────────── */
.chip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:3px 9px; border-radius:20px; background:#eef3f8; color:#4a5b6e; }
.chip.green{ background:#eaf7df; color:#3f7a13; }
.chip.navy{ background:#e6edf5; color:#274764; }
.chip.amber{ background:#fdf1d8; color:#9a6a00; }
.chip.teal{ background:#def2ef; color:#15756a; }
.chip.red{ background:#fbe6e4; color:#b13a32; }

/* ── location wash — standing rule for any single-location UI ──────── */
.loc-wash{
  border-radius:10px; padding:9px 14px; font-size:12.5px; font-weight:600;
  border-left:3px solid transparent; display:flex; align-items:center; gap:8px;
}