/* TEG 3D Print Shop — collapsing sidebar + base styles.
 * Sidebar ported from GBGS ProdOps (single source of truth: nav.js builds the
 * links; this file styles the shell + collapse/peek/mobile behavior). */

/* ─── Design tokens ──────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --navy:     #0d1137;   /* sidebar + headings */
  --navy-2:   #1a2060;
  --accent:   #3b82f6;   /* active nav indicator */

  /* Surface */
  --bg:       #fafafa;
  --panel:    #ffffff;
  --panel-2:  #f4f5f9;

  /* Border & text */
  --border:   #e5e5ee;
  --text:     #1a1a2e;
  --text-dim: #6b6b80;

  /* Sidebar */
  --sb-w:          240px;
  --sb-cw:         64px;
  --sb-transition: 0.22s ease;
}

/* ─── Base reset ─────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
}

body {
  padding-left: var(--sb-w);
  transition: padding-left var(--sb-transition);
}
body.sb-collapsed          { padding-left: var(--sb-cw); }
body.sb-collapsed.sb-peek  { padding-left: var(--sb-cw); } /* overlay — no shift */

/* ─── Sidebar (repurposed .topbar) ──────────────────────────────────────── */
.topbar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--sb-w);
  background: var(--navy);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 200;
  transition: width var(--sb-transition);
}
body.sb-collapsed .topbar          { width: var(--sb-cw); }
body.sb-collapsed.sb-peek .topbar  {
  width: var(--sb-w);
  box-shadow: 4px 0 24px rgba(0,0,0,0.18);
}

/* ── Logo / brand ── */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  min-height: 64px;
}
.sb-logo-icon { flex-shrink: 0; display: flex; align-items: center; color: #fff; }
.sb-logo-icon svg { display: block; }
.sb-logo-text { display: flex; flex-direction: column; overflow: hidden; transition: opacity 0.12s; }
.sb-logo-name { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.2; white-space: nowrap; }
.sb-logo-sub  { font-size: 10px; color: rgba(255,255,255,0.45); white-space: nowrap;
                text-transform: uppercase; letter-spacing: 0.5px; }

/* ── Nav links ── */
.nav { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; flex: 1; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 10px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
.nav-link:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.9); }
.nav-link.active { color: #fff; background: rgba(59,130,246,0.20); }
.nav-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 5px; bottom: 5px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}

/* ── Collapsible nav group (Production / Inventory / Admin) ── */
.sb-group {
  display: flex; flex-direction: column;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.sb-group-header {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: transparent; border: none; cursor: pointer;
  color: rgba(255,255,255,0.4);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.6px;
  padding: 6px 12px;
}
.sb-group-header:hover { color: rgba(255,255,255,0.75); background: transparent; }
.sb-group-chev { display: flex; transition: transform 0.15s; opacity: 0.7; }
.sb-group-collapsed .sb-group-chev { transform: rotate(-90deg); }
.sb-group-items { display: flex; flex-direction: column; gap: 2px; }
.sb-group-collapsed .sb-group-items { display: none; }
/* Icon-collapsed sidebar: hide group label, keep icons reachable */
body.sb-collapsed:not(.sb-peek) .sb-group-label { opacity: 0; }
body.sb-collapsed:not(.sb-peek) .sb-group-chev  { display: none; }
body.sb-collapsed:not(.sb-peek) .sb-group-collapsed .sb-group-items { display: flex; }

/* ── Sidebar icon + label ── */
.sb-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; }
.sb-label { transition: opacity 0.12s; white-space: nowrap; }

/* Collapsed state — drop labels from layout so icons center cleanly */
body.sb-collapsed:not(.sb-peek) .sb-label        { display: none; }
body.sb-collapsed:not(.sb-peek) .sb-logo-text    { display: none; }
body.sb-collapsed:not(.sb-peek) .nav-link        { justify-content: center; gap: 0; }
body.sb-collapsed:not(.sb-peek) .sb-signout      { justify-content: center; gap: 0; }
body.sb-collapsed:not(.sb-peek) .user-tag        { display: none; }
body.sb-collapsed:not(.sb-peek) .sb-group-header { display: none; }

/* ── Sidebar footer (status area) ── */
.status {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 8px;
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.user-tag {
  font-size: 11px; color: rgba(255,255,255,0.45);
  padding: 2px 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: opacity 0.12s;
}
.sb-signout, .status .ghost {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: none;
  color: rgba(255,255,255,0.5);
  font-size: 12px; font-weight: 500;
  padding: 8px 10px; border-radius: 6px;
  cursor: pointer; width: 100%; text-align: left;
  transition: background 0.15s, color 0.15s;
  overflow: hidden; white-space: nowrap;
}
.sb-signout:hover, .status .ghost:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.9); }

/* ── Collapse toggle ── */
.sb-toggle-btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  align-self: flex-end; margin: 0 8px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.4);
  cursor: pointer; padding: 0;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.sb-toggle-btn:hover { background: rgba(59,130,246,0.25); color: #fff; border-color: rgba(59,130,246,0.4); }
.sb-chev-left  { display: flex; }
.sb-chev-right { display: none; }
body.sb-collapsed .sb-chev-left          { display: none; }
body.sb-collapsed .sb-chev-right         { display: flex; }
body.sb-collapsed.sb-peek .sb-chev-left  { display: flex; }
body.sb-collapsed.sb-peek .sb-chev-right { display: none; }

/* ── Mobile hamburger + backdrop ── */
.sb-hamburger {
  display: none;
  position: fixed; top: 12px; left: 12px; z-index: 300;
  width: 40px; height: 40px; border-radius: 8px;
  background: var(--navy); border: none; color: #fff;
  align-items: center; justify-content: center; cursor: pointer; padding: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.sb-hamburger:hover { background: var(--navy-2); }
.sb-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45); z-index: 199;
  backdrop-filter: blur(2px);
}

@media (max-width: 767px) {
  body, body.sb-collapsed, body.sb-collapsed.sb-peek { padding-left: 0; }

  .topbar {
    transform: translateX(-100%);
    transition: transform var(--sb-transition), width var(--sb-transition);
    width: var(--sb-w) !important;
    box-shadow: none;
  }
  body.sb-mobile-open .topbar { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,0.25); }
  body.sb-mobile-open .sb-backdrop { display: block; }
  .sb-hamburger { display: flex; }
  .sb-toggle-btn { display: none; }

  /* Reset collapsed-state hiding on mobile — always show full sidebar */
  body.sb-collapsed:not(.sb-peek) .sb-label        { display: inline; opacity: 1; }
  body.sb-collapsed:not(.sb-peek) .sb-logo-text    { display: flex; opacity: 1; }
  body.sb-collapsed:not(.sb-peek) .nav-link        { justify-content: flex-start; gap: 10px; }
  body.sb-collapsed:not(.sb-peek) .sb-signout      { justify-content: flex-start; gap: 10px; }
  body.sb-collapsed:not(.sb-peek) .user-tag        { display: block; opacity: 1; }
  body.sb-collapsed:not(.sb-peek) .sb-group-header { display: flex; }

  main { padding: 60px 16px 16px !important; margin: 0 auto !important; }
}

/* ─── Page content (base styles the page templates extend) ───────────────── */
main {
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

h1 { margin: 0 0 0.5rem 0; }

.muted { color: var(--text-dim); }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
}

.btn {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  padding: 0.6rem 1.1rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
}
.btn:hover { background: var(--navy-2); }

.avatar { width: 28px; height: 28px; border-radius: 50%; vertical-align: middle; margin-right: 8px; }

code { background: #eee; padding: 2px 6px; border-radius: 3px; }

/* Page-level placeholder used by stub pages */
.page-stub {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0.5rem; padding: 2.5rem 1rem; color: var(--text-dim);
}
.page-stub svg { color: var(--accent); margin-bottom: 0.25rem; }
.page-stub h2 { margin: 0; color: var(--text); }

/* ─── Shop components: toolbars, tables, forms ───────────────────────────── */
.page-head { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
.page-head h1 { margin: 0; }

/* Sticky search + headers that stay put while the list scrolls */
.toolbar {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg);
  display: flex; gap: 0.75rem; align-items: center;
  padding: 0.75rem 0; margin-bottom: 0.25rem;
}
.search-input, .form-control {
  width: 100%; padding: 0.55rem 0.8rem;
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 0.9rem; background: #fff; color: var(--text);
}
.search-input { max-width: 360px; }
.form-control:focus, .search-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.toolbar .spacer { flex: 1; }

.table-wrap {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  overflow: auto; max-height: calc(100vh - 220px);
}
table.data { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
table.data thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel-2); text-align: left;
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-dim); font-weight: 700;
  padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.data td { padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--panel-2); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover td { background: var(--panel-2); }

.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15); vertical-align: middle; margin-right: 6px; }
.tag { display: inline-block; background: var(--panel-2); color: var(--text-dim);
  border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.75rem; font-weight: 600; }
.cost { font-variant-numeric: tabular-nums; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--text-dim); font-size: 0.9rem; }
.count { color: var(--text-dim); font-weight: 500; font-size: 0.85rem; }

/* Forms */
.form-row { margin-bottom: 1.1rem; }
.form-row label { display: block; font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); margin-bottom: 0.35rem; }
.form-row .hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-dim); }
select.form-control { appearance: auto; }
textarea.form-control { min-height: 70px; resize: vertical; }
.form-actions { display: flex; gap: 0.6rem; align-items: center; margin-top: 1.25rem; }
.btn-ghost { display: inline-block; background: transparent; border: 1px solid var(--border);
  color: var(--text-dim); padding: 0.55rem 1rem; border-radius: 6px; cursor: pointer;
  text-decoration: none; font-weight: 500; font-size: 0.9rem; }
.btn-ghost:hover { background: var(--panel-2); color: var(--text); }
.btn-sm { padding: 0.4rem 0.75rem; font-size: 0.82rem; }
.inline-row { display: flex; gap: 0.6rem; align-items: flex-end; flex-wrap: wrap; }
.inline-row .form-row { flex: 1; min-width: 140px; margin-bottom: 0; }
.back-link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-dim);
  text-decoration: none; font-size: 0.85rem; margin-bottom: 1rem; }
.back-link:hover { color: var(--text); }

/* Autocomplete dropdown (Fulcrum search) */
.ac-wrap { position: relative; }
.ac-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
  background: #fff; border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 6px 6px; max-height: 260px; overflow-y: auto;
  box-shadow: 0 8px 20px rgba(0,0,0,.08); display: none; }
.ac-list.open { display: block; }
.ac-item { padding: 0.5rem 0.8rem; cursor: pointer; font-size: 0.85rem; border-bottom: 1px solid var(--panel-2); }
.ac-item:hover, .ac-item.active { background: var(--panel-2); }
.ac-item .sku { color: var(--text-dim); font-size: 0.78rem; }
.ac-empty { padding: 0.6rem 0.8rem; color: var(--text-dim); font-size: 0.82rem; }

/* Repeatable line rows (recipe filaments / order line items) */
.line-item { display: flex; gap: 0.6rem; align-items: flex-end; flex-wrap: wrap;
  padding: 0.75rem; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 0.6rem; background: #fff; }
.line-item .form-row { margin-bottom: 0; }
.line-remove { background: transparent; border: none; color: var(--text-dim); cursor: pointer;
  font-size: 1.1rem; padding: 0.4rem 0.5rem; line-height: 1; }
.line-remove:hover { color: #ef4444; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--navy); color: #fff; padding: 0.7rem 1.2rem; border-radius: 8px;
  font-size: 0.88rem; box-shadow: 0 6px 20px rgba(0,0,0,.25); display: none; z-index: 400; }