/* The partner cabinet. Shares the panel vocabulary with the console; this file only holds
   what the cabinet has and the console does not: the app shell, quick actions, the QR card. */
.cabinet { padding-bottom: calc(var(--nav-height, 72px) + 96px + var(--safe-bottom, 0px)); }
.cabinet-shell { width: min(760px, 100% - 32px); margin: 0 auto; padding-top: 18px; }

.cabinet-head { margin-bottom: 18px; }
.cabinet-head h1 { margin: 2px 0 0; font-size: clamp(1.8rem, 6vw, 2.4rem); line-height: 1.02; }
.cabinet-head .eyebrow { margin: 0; }

/* The owner's way back into the console, from their own cabinet. */
.cabinet-console { border: 1.5px solid var(--c-line); border-radius: 16px; background: var(--c-paper); margin-bottom: var(--c-gap); }
.cabinet-console svg { width: 22px; }

.cabinet-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: var(--c-gap); }
.cabinet-action {
  display: flex; align-items: center; gap: 11px; padding: 13px 14px; text-align: left;
  border: 1.5px solid var(--c-line); border-radius: 14px; background: var(--c-paper);
  font: inherit; color: inherit; text-decoration: none; cursor: pointer;
}
.cabinet-action svg { width: 22px; flex: none; }
.cabinet-action span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cabinet-action strong { font-size: .88rem; }
.cabinet-action small { font-size: .74rem; color: var(--c-muted); }

/* The first-sale checklist a newcomer sees instead of the dashboard. */
.cabinet-step { align-items: flex-start; }
.cabinet-step .c-row-main { gap: 3px; }
.c-step {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--c-accent); color: #fff; font-weight: 800; font-size: .85rem; line-height: 1;
}
.cabinet-step.done .c-step { background: var(--c-ok); }
.c-step svg { width: 16px; }
.cabinet-step-actions, .cabinet-verify { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.cabinet-verify input {
  flex: 1 1 120px; min-width: 0; padding: 9px 11px; border: 1.5px solid var(--c-line); border-radius: 11px;
  background: var(--c-paper); font: inherit; font-variant-numeric: tabular-nums;
}
.cabinet-verify .error { flex-basis: 100%; }

/* Picking which customer orders this stock purchase covers. */
.cabinet-pick { cursor: pointer; }
.cabinet-pick input { flex: none; width: 20px; height: 20px; accent-color: var(--c-accent); }

.c-stepper { display: inline-flex; align-items: center; gap: 4px; }
.c-stepper button {
  width: 32px; height: 32px; border-radius: 9px; border: 1.5px solid var(--c-line);
  background: var(--c-paper); font: inherit; font-size: 1.05rem; font-weight: 800; cursor: pointer; line-height: 1;
}
.c-stepper b { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; }

.c-prefix { display: flex; align-items: center; gap: 4px; border: 1.5px solid var(--c-line); border-radius: 11px; background: var(--cream, #f5efff); padding-left: 12px; }
.c-prefix span { font-size: .82rem; color: var(--c-muted); white-space: nowrap; }
.c-prefix input { border: 0; background: none; padding-left: 0; }

.c-trust { display: flex; align-items: center; gap: 9px; margin: 0 0 var(--c-gap); padding: 0 4px; font-size: .8rem; color: var(--c-muted); }
.c-trust svg { width: 18px; flex: none; }
.c-good-text { color: var(--c-ok); }

.cabinet-qr { display: grid; place-items: center; padding: 16px 18px 0; }
.cabinet-qr .qr-card { max-width: 320px; }

@media (max-width: 720px) {
  .cabinet-shell { width: calc(100% - 24px); }
  .cabinet-quick { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cabinet-action { padding: 11px 12px; gap: 9px; }
  .cabinet-action small { display: none; }
}