/* ============================================================
   FurnitureView — dashboard styles (merchant + admin)
   Design system: warm gallery neutrals, one Evergreen accent,
   hairline-first, calm density. Consumes /tokens.css.
   Keyed to the app's existing class names.
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: var(--text-body);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
::selection { background: var(--accent-soft); color: var(--ink); }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- Shell + sidebar ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
@media (max-width: 860px) { .shell { grid-template-columns: 1fr; } }

.side {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--hairline);
  padding: var(--sp-4) var(--sp-3); gap: 2px;
}
@media (max-width: 860px) { .side { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--sp-2); } }

.side .brand {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-2) var(--sp-4);
  font: var(--fw-bold) 16px/1 var(--font-ui); letter-spacing: var(--ls-heading); color: var(--ink);
}
.side .brand::before {
  content: ""; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='m6 16 4-4 3 3 5-5'/%3E%3Ccircle cx='9' cy='9' r='1.4' fill='%23fff' stroke='none'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.side .brand small { display: block; font: var(--fw-regular) var(--fs-micro)/1.3 var(--font-ui); color: var(--muted); letter-spacing: 0; }
@media (max-width: 860px) { .side .brand { padding: 0; } }

.side nav { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 860px) { .side nav { flex-direction: row; flex-wrap: wrap; } }
.side nav a {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 9px var(--sp-3); border-radius: var(--r-control);
  color: var(--muted); font: var(--fw-medium) var(--fs-body)/1 var(--font-ui);
  cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.side nav a:hover { background: var(--surface-2); color: var(--ink); }
.side nav a.active { background: var(--accent-soft); color: var(--accent); }

.side .spacer { flex: 1; }
@media (max-width: 860px) { .side .spacer { display: none; } }
.side .who {
  border-top: 1px solid var(--hairline); padding-top: var(--sp-3);
  font: var(--fw-regular) var(--fs-micro)/1.4 var(--font-ui); color: var(--muted);
}
.side .who b { display: block; color: var(--ink); font: var(--fw-label) var(--fs-small)/1.3 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side .who button {
  margin-top: var(--sp-2); width: 100%; cursor: pointer;
  background: var(--surface); color: var(--ink-2); border: 1px solid var(--hairline-2);
  border-radius: var(--r-control); padding: 7px 10px; font: var(--fw-medium) var(--fs-small)/1 var(--font-ui);
  transition: background var(--dur-fast) var(--ease);
}
.side .who button:hover { background: var(--surface-2); }

/* ---------- Main / header ---------- */
.main { padding: var(--sp-8); max-width: var(--content-max); width: 100%; margin: 0 auto; min-width: 0; }
@media (max-width: 640px) { .main { padding: var(--sp-5) var(--sp-4); } }
.head { margin-bottom: var(--sp-6); }
.head h1 { font: var(--text-h1); letter-spacing: var(--ls-heading); }
.head p { color: var(--muted); margin-top: var(--sp-2); max-width: 66ch; font-size: var(--fs-body); }

/* ---------- KPI cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.card {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: var(--sp-5);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.card:hover { border-color: var(--hairline-2); box-shadow: var(--shadow-sm); }
.card.stat b { display: block; font: var(--fw-bold) 28px/1 var(--font-ui); letter-spacing: var(--ls-display); font-variant-numeric: tabular-nums; }
.card.stat span { display: block; margin-top: var(--sp-2); color: var(--muted); font: var(--fw-medium) var(--fs-small)/1.3 var(--font-ui); }

/* ---------- Panels ---------- */
.panel { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: var(--sp-5); margin-bottom: var(--sp-5); }
.panel h3 { font: var(--text-h2); letter-spacing: var(--ls-heading); margin-bottom: var(--sp-3); }
.panel .sub { color: var(--muted); font-size: var(--fs-small); margin: -6px 0 var(--sp-4); }

/* ---------- Buttons ---------- */
button.btn, a.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 38px; padding: 0 var(--sp-4); border-radius: var(--r-control);
  font: var(--fw-label) var(--fs-body)/1 var(--font-ui); cursor: pointer;
  border: 1px solid transparent; background: var(--accent); color: var(--accent-ink);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  white-space: nowrap; text-decoration: none;
}
button.btn:hover, a.btn:hover { background: var(--accent-hover); color: var(--accent-ink); }
button.btn:active { transform: translateY(0.5px); background: var(--accent-press); }
button.btn:disabled { opacity: 0.5; cursor: not-allowed; }
button.ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 38px; padding: 0 var(--sp-4); border-radius: var(--r-control);
  font: var(--fw-label) var(--fs-body)/1 var(--font-ui); cursor: pointer;
  background: var(--surface); color: var(--ink); border: 1px solid var(--hairline-2);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
button.ghost:hover { background: var(--surface-2); border-color: var(--faint); }

/* ---------- Rows / layout helpers ---------- */
.row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.right { margin-left: auto; }
.tabhide { display: none; }

/* ---------- Forms ---------- */
.field { margin-bottom: var(--sp-3); }
label.lbl, .field label { display: block; font: var(--fw-label) var(--fs-small)/1 var(--font-ui); color: var(--ink-2); margin-bottom: var(--sp-2); }
input.f, select.f {
  width: 100%; height: 38px; padding: 0 var(--sp-3);
  border: 1px solid var(--hairline-2); border-radius: var(--r-control);
  background: var(--surface); color: var(--ink); font: var(--text-body);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
input.f::placeholder { color: var(--faint); }
input.f:focus, select.f:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
th {
  text-align: left; font: var(--fw-label) var(--fs-small)/1 var(--font-ui);
  color: var(--muted); padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--hairline);
  white-space: nowrap; text-transform: none; letter-spacing: 0;
}
td { padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--hairline); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--dur-fast) var(--ease); }
tbody tr:hover { background: var(--surface-2); }
.thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--ink-a08); }

/* ---------- Pills / badges ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font: var(--fw-label) var(--fs-micro)/1.3 var(--font-ui);
  background: var(--surface-2); color: var(--muted);
}
.pill.ok { background: var(--success-soft); color: var(--success-ink); }
.pill.warn { background: var(--warning-soft); color: var(--warning-ink); }
.pill.err { background: var(--danger-soft); color: var(--danger-ink); }
.pill.mut { background: var(--surface-2); color: var(--muted); }
.pill.brand { background: var(--accent-soft); color: var(--accent); }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--r-chip);
  font: var(--fw-medium) var(--fs-micro)/1.4 var(--font-ui);
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--hairline);
  margin: 1px 3px 1px 0;
}
.chip.cat { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.chip.col { background: var(--success-soft); color: var(--success-ink); border-color: transparent; }
.chip.mat { background: var(--warning-soft); color: var(--warning-ink); border-color: transparent; }

/* ---------- Switch ---------- */
.switch { position: relative; display: inline-block; width: 38px; height: 22px; }
.switch input { display: none; }
.slider { position: absolute; inset: 0; background: var(--surface-3); border: 1px solid var(--hairline-2); border-radius: var(--r-pill); cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.slider::before { content: ""; position: absolute; height: 16px; width: 16px; left: 2px; top: 2px; background: #fff; border-radius: 50%; box-shadow: var(--shadow-sm); transition: transform var(--dur-fast) var(--ease); }
.switch input:checked + .slider { background: var(--success); border-color: var(--success); }
.switch input:checked + .slider::before { transform: translateX(16px); }

/* ---------- Inline messages ---------- */
.msg { font-size: var(--fs-small); padding: var(--sp-3) var(--sp-3); border-radius: var(--r-control); margin: var(--sp-3) 0; border: 1px solid transparent; }
.msg.ok { background: var(--success-soft); color: var(--success-ink); border-color: color-mix(in srgb, var(--success) 22%, transparent); }
.msg.err { background: var(--danger-soft); color: var(--danger-ink); border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.msg.warn { background: var(--warning-soft); color: var(--warning-ink); border-color: color-mix(in srgb, var(--warning) 22%, transparent); }

/* ---------- Billing plan cards ---------- */
.planGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-4); }
.planCard { border: 1px solid var(--hairline); border-radius: var(--r-card); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); background: var(--surface); }
.planCard.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.planCard .pcName { font: var(--fw-bold) var(--fs-base)/1.2 var(--font-ui); }
.planCard .pcPrice { font: var(--fw-bold) 30px/1 var(--font-ui); letter-spacing: var(--ls-display); font-variant-numeric: tabular-nums; }
.planCard .pcPrice span { font: var(--fw-medium) 13px/1 var(--font-ui); color: var(--muted); }
.planCard .pcCredits { color: var(--muted); font-size: var(--fs-small); }
.planCard .pcAction { margin-top: auto; padding-top: var(--sp-3); }
.planCard .pcAction .btn, .planCard .pcAction .ghost { width: 100%; }

/* ---------- Code block ---------- */
.code {
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--hairline); border-radius: var(--r-card);
  padding: var(--sp-4); font: var(--fw-regular) var(--fs-small)/1.65 var(--font-mono);
  overflow-x: auto; white-space: pre-wrap; word-break: break-word;
}

/* ---------- Gallery (visualizations) ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-4); }
.gcard {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.gcard:hover { border-color: var(--hairline-2); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.gcard .imgs { display: flex; }
.gcard .imgs img { width: 50%; aspect-ratio: 1; object-fit: cover; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--ink-a08); }
.gcard .m { padding: var(--sp-3); font: var(--fw-regular) var(--fs-micro)/1.5 var(--font-ui); color: var(--muted); }
.gcard .m b { color: var(--ink); font: var(--fw-label) var(--fs-small)/1.3 var(--font-ui); display: block; }

/* ---------- Impersonation banner ---------- */
.imp-banner {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px var(--sp-4); margin-bottom: var(--sp-5);
  background: var(--warning-soft); color: var(--warning-ink);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); border-radius: var(--r-control);
  font: var(--fw-medium) var(--fs-small)/1.4 var(--font-ui);
}
.imp-banner b { font-weight: 600; }
.imp-banner button {
  margin-left: auto; cursor: pointer; color: var(--warning-ink); font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  border-radius: var(--r-control); padding: 6px 12px; font-size: var(--fs-small);
}
.imp-banner button:hover { background: var(--surface); }

/* ---------- Modal ---------- */
.mask { position: fixed; inset: 0; z-index: 100; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: var(--sp-5); }
.modal { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-modal); box-shadow: var(--shadow-lg); width: 100%; max-width: 480px; max-height: 92vh; overflow: auto; padding: var(--sp-5) var(--sp-6); }
.modal h3 { font: var(--text-h2); letter-spacing: var(--ls-heading); margin: 0 0 4px; }
.modal .sub { color: var(--muted); font-size: var(--fs-small); margin: 0 0 var(--sp-4); }
.modal .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.modal .actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }
.modal .actions .btn, .modal .actions .ghost { flex: 1; }
@media (max-width: 520px) { .modal .grid2 { grid-template-columns: 1fr; } }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-5); background: var(--canvas); }
.login-box { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-modal); padding: var(--sp-8); width: 100%; max-width: 380px; box-shadow: var(--shadow-lg); }
.login-box .brand { font: var(--fw-bold) 20px/1 var(--font-ui); letter-spacing: var(--ls-heading); margin-bottom: var(--sp-1); }
.login-box p.sub { color: var(--muted); font-size: var(--fs-small); margin: 0 0 var(--sp-5); }
.login-box .hint { font-size: var(--fs-micro); color: var(--muted); margin-top: var(--sp-4); line-height: 1.6; font-family: var(--font-mono); }