/* components.css — cards, buttons, chips, badges, alerts, avatars, menus, dialogs.
 *
 * Ported from Sneat's ANATOMY (metrics, states, radius), never from its source:
 * Sneat is Vue + Vuetify and none of our surfaces is. Class names are lifted
 * verbatim where Sneat has one, so its SCSS stays a readable reference forever.
 *
 * These metrics are ADMIN metrics (38px buttons, 15px text). They must never
 * reach the PoS, which has a 48px/16px floor — see docs/DESIGN-LANGUAGE.md §4.
 */

/* ---- card ---------------------------------------------------------------- */
/* Sneat's whole look is cards FLOATING ON A TINTED PAGE. That depends on
 * background != surface; collapse them and the design is gone. */
.card {
  background: var(--sn-surface);
  border-radius: var(--sn-shape-corner-medium);
  padding: var(--sn-admin-card-padding);
  box-shadow: var(--sn-elevation-2);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.card-title { margin: 0; font-size: var(--sn-type-h5-size); font-weight: 500; }
.card-subtitle { color: var(--sn-on-surface-variant); margin: 0; }

/* ---- button -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--sn-admin-button-height);
  padding: 0 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--sn-shape-corner-medium);
  font-family: inherit;
  font-size: var(--sn-type-button-size);
  font-weight: var(--sn-type-button-weight);
  text-transform: var(--sn-type-button-transform);
  cursor: pointer;
  text-decoration: none; /* an <a class="btn"> must not carry a link underline */
  transition: background-color var(--sn-motion-duration-short) ease,
              box-shadow var(--sn-motion-duration-short) ease;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: var(--sn-state-disabled); cursor: not-allowed; }

.btn-primary { background: var(--sn-primary); color: var(--sn-on-primary); box-shadow: var(--sn-elevation-2); }
.btn-primary:hover:not(:disabled) { box-shadow: var(--sn-elevation-4); }

/* All six roles get a filled variant. Omit one and it does not fall back to a
 * sensible colour — it falls back to the BROWSER DEFAULT button, which is grey
 * on white and white on dark. Silent, and invisible until someone looks. */
.btn-secondary { background: var(--sn-secondary); color: var(--sn-on-secondary); }
.btn-success { background: var(--sn-success); color: var(--sn-on-success); }
.btn-info { background: var(--sn-info); color: var(--sn-on-info); }
.btn-warning { background: var(--sn-warning); color: var(--sn-on-warning); }
.btn-error { background: var(--sn-error); color: var(--sn-on-error); }

.btn-outlined {
  background: transparent;
  color: var(--sn-primary-text);
  border-color: var(--sn-primary);
}
.btn-outlined:hover:not(:disabled) {
  background: color-mix(in srgb, var(--sn-primary) calc(var(--sn-state-hover) * 100%), transparent);
}

.btn-text {
  background: transparent;
  color: var(--sn-primary-text);
  padding: 0 0.75rem;
}
.btn-text:hover:not(:disabled) {
  background: color-mix(in srgb, var(--sn-primary) calc(var(--sn-state-hover) * 100%), transparent);
}

.btn-icon {
  min-height: var(--sn-admin-button-height);
  width: var(--sn-admin-button-height);
  padding: 0;
  border-radius: var(--sn-shape-corner-full);
  background: transparent;
  color: var(--sn-on-surface-variant);
}
.btn-icon:hover:not(:disabled) {
  background: color-mix(in srgb, var(--sn-on-surface) calc(var(--sn-state-hover) * 100%), transparent);
  color: var(--sn-on-surface);
}
.btn-block { width: 100%; }

/* ---- chip / badge -------------------------------------------------------- */
/* Filled chips carry the DARK ink, not white. White on Sneat's #71DD37 is
 * 1.74:1 — literally unreadable — and this chip says whether an order is paid. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.625rem;
  border-radius: var(--sn-shape-corner-full);
  font-size: var(--sn-type-caption-size);
  line-height: 1.5;
  font-weight: 500;
  white-space: nowrap;
}
.chip-success { background: var(--sn-success); color: var(--sn-on-success); }
.chip-info    { background: var(--sn-info);    color: var(--sn-on-info); }
.chip-warning { background: var(--sn-warning); color: var(--sn-on-warning); }
.chip-error   { background: var(--sn-error);   color: var(--sn-on-error); }
.chip-neutral { background: var(--sn-secondary-container); color: var(--sn-on-secondary-container); }

/* ---- alert / banner ------------------------------------------------------ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: var(--sn-shape-corner-medium);
  margin-bottom: 1rem;
}
.alert-success { background: var(--sn-success-container); color: var(--sn-on-success-container); }
.alert-info    { background: var(--sn-info-container);    color: var(--sn-on-info-container); }
.alert-warn    { background: var(--sn-warning-container); color: var(--sn-on-warning-container); }
.alert-error   { background: var(--sn-error-container);   color: var(--sn-on-error-container); }

/* ---- avatar -------------------------------------------------------------- */
/* Initials, not an upload: there is no avatar storage and there is no plan for one. */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: var(--sn-shape-corner-full);
  background: var(--sn-primary-container);
  color: var(--sn-on-primary-container);
  font-weight: 500;
  user-select: none;
}

/* ---- menu (profile dropdown) --------------------------------------------- */
.menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  min-width: 12rem;
  padding: 0.375rem;
  background: var(--sn-surface-container-high);
  border-radius: var(--sn-shape-corner-medium);
  box-shadow: var(--sn-elevation-8);
  z-index: 20;
}
.menu[hidden] { display: none; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: var(--sn-shape-corner-small);
  background: transparent;
  color: var(--sn-on-surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.menu-item:hover {
  background: color-mix(in srgb, var(--sn-on-surface) calc(var(--sn-state-hover) * 100%), transparent);
  text-decoration: none;
}
.menu-divider { height: 1px; margin: 0.375rem 0; background: var(--sn-outline-variant); }

/* ---- dialog -------------------------------------------------------------- */
/* Native <dialog>: focus trap, Escape, and ::backdrop come free, it needs no
 * library, and it is CSP-clean. Destructive confirms use it. */
dialog {
  padding: var(--sn-admin-card-padding);
  border: 0;
  border-radius: var(--sn-shape-corner-medium);
  background: var(--sn-surface);
  color: var(--sn-on-surface);
  box-shadow: var(--sn-elevation-24);
  max-width: 28rem;
}
dialog::backdrop {
  background: var(--sn-scrim);
  opacity: var(--sn-state-scrim-opacity);
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.5rem;
}