/* Shared foundations and controls. Load after design-tokens.css, before layout. */
@font-face {
  font-family: Outfit;
  src: url('assets/fonts/Outfit-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}
:root {
  font-family: var(--np-font-body);
  color: var(--np-color-text);
  background: var(--np-color-page);
  line-height: var(--np-leading-body);
  font-size: var(--np-font-root);
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,input,select,textarea {
  font: inherit;
}
button,a,input,select,textarea {
  -webkit-tap-highlight-color: var(--np-color-transparent);
}
button {
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
p,h1,h2,h3,h4 {
  margin-top: 0;
}
h1,h2,h3 {
  letter-spacing: var(--np-tracking-heading);
  line-height: var(--np-leading-heading);
}
h1 {
  margin-bottom: var(--np-space-2-5);
}
h2 {
  font-weight: var(--np-weight-semibold);
  margin-bottom: var(--np-space-2-5);
}
h3 {
  font-weight: var(--np-weight-semibold);
}
p {
  margin-bottom: var(--np-space-3-5);
}
img {
  max-width: 100%;
  height: auto;
}
button:disabled {
  cursor: not-allowed;
  background: var(--np-color-surface-disabled)!important;
  color: var(--np-color-text-disabled)!important;
  border-color: var(--np-color-border-disabled)!important;
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline: var(--np-focus-ring);
  outline-offset: var(--np-focus-offset);
}
button {
  color: inherit;
}
input,select,textarea {
  background: var(--np-color-surface);
  color: var(--np-color-ink);
  border: var(--np-border-hairline) solid var(--np-color-border-input);
  border-radius: var(--np-radius-control);
  min-height: var(--np-control-height);
  padding: var(--np-space-2-5) calc(var(--np-space-3) + var(--np-border-hairline));
  max-width: 100%;
  min-width: 0;
}
textarea {
  resize: vertical;
  min-height: var(--np-control-textarea-height);
}
input::placeholder,textarea::placeholder {
  color: var(--np-color-text-muted);
}
input[type=checkbox],input[type=radio] {
  min-height: auto;
  width: var(--np-control-check);
  height: var(--np-control-check);
  accent-color: var(--np-color-focus);
}
label {
  font-size: var(--np-text-body-lg);
  font-weight: var(--np-weight-book);
}
small {
  font-size: var(--np-text-body);
}
strong {
  font-weight: var(--np-weight-semibold);
}
button,a,td,dd,h1,h2,h3,p {
  overflow-wrap: anywhere;
}
[hidden] {
  display: none!important;
}
.period-switch,.tabs {
  display: flex;
  gap: calc(var(--np-space-0-5) + var(--np-border-hairline));
  padding: var(--np-space-1);
  border: var(--np-border-hairline) solid var(--np-color-border);
  border-radius: var(--np-radius-lg);
  background: var(--np-color-surface);
  width: fit-content;
  flex-wrap: wrap;
}
.period-switch button,.tabs button,.tabs a {
  border: 0;
  background: var(--np-color-transparent);
  padding: var(--np-space-2) var(--np-space-3-5);
  border-radius: var(--np-radius-tab);
  font-size: var(--np-text-body);
  color: var(--np-color-text-muted);
}
.period-switch .active,.tabs .active,.tabs [aria-selected=true] {
  background: var(--np-color-ink);
  color: var(--np-color-text-inverse);
}
.select-label {
  font-size: var(--np-text-sm);
  color: var(--np-color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--np-space-2-5);
}
.select-label select {
  font-size: var(--np-text-sm);
  min-height: var(--np-control-height-small);
  padding: var(--np-space-1-5) var(--np-space-7) var(--np-space-1-5) var(--np-space-2-5);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--np-space-2);
  border: var(--np-border-hairline) solid var(--np-color-border-input);
  border-radius: var(--np-radius-control);
  background: var(--np-color-surface);
  color: var(--np-color-ink);
  padding: var(--np-space-2-5) var(--np-space-4);
  min-height: var(--np-control-height);
  font-weight: var(--np-weight-book);
  font-size: var(--np-text-body);
  line-height: var(--np-leading-compact);
  text-align: center;
}
.btn:hover:enabled,a.btn:hover {
  background: var(--np-color-surface-hover);
  border-color: var(--np-color-success-border);
}
.btn.primary {
  background: var(--np-color-brand);
  border-color: var(--np-color-brand);
  font-weight: var(--np-weight-semibold);
}
.btn.primary:hover:enabled {
  background: var(--np-color-brand-hover);
}
.btn.ghost {
  background: var(--np-color-transparent);
  border-color: var(--np-color-transparent);
  padding-inline: var(--np-space-2-5);
}
.btn.danger {
  color: var(--np-color-danger);
  border-color: var(--np-color-danger-border);
  background: var(--np-color-danger-soft);
}
.btn.small {
  min-height: var(--np-control-height-small);
  padding: calc(var(--np-space-1-5) + var(--np-border-hairline)) var(--np-space-3);
  font-size: var(--np-text-sm);
}
.text-link,.text-button {
  font-size: var(--np-text-body);
  font-weight: var(--np-weight-medium);
  text-underline-offset: var(--np-space-1);
}
.text-link:hover,.text-button:hover {
  text-decoration: underline;
}
.text-button {
  border: 0;
  background: none;
  padding: 0;
  color: var(--np-color-ink);
  text-align: left;
}
.muted {
  color: var(--np-color-text-muted);
  font-size: var(--np-text-body-lg);
  line-height: var(--np-leading-relaxed);
}
.mini-label {
  font-size: var(--np-text-caption-small);
  letter-spacing: var(--np-tracking-mini);
  font-weight: var(--np-weight-semibold);
  color: var(--np-color-text-muted);
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--np-space-1) + var(--np-border-hairline));
  font-size: var(--np-text-xs);
  line-height: var(--np-leading-badge);
  padding: calc(var(--np-space-1) + var(--np-border-hairline)) calc(var(--np-space-2) + var(--np-border-hairline));
  border-radius: var(--np-radius-sm);
  font-weight: var(--np-weight-book);
  background: var(--np-color-surface-muted);
  color: var(--np-color-text-muted);
  white-space: normal;
}
.badge.success {
  background: var(--np-color-success-soft);
  color: var(--np-color-success);
}
.badge.warning {
  background: var(--np-color-warning-soft);
  color: var(--np-color-warning);
}
.badge.danger {
  background: var(--np-color-danger-soft);
  color: var(--np-color-danger);
}
.badge.neutral {
  background: var(--np-color-surface-muted);
  color: var(--np-color-text-muted);
}
.panel {
  background: var(--np-color-surface);
  border: var(--np-border-hairline) solid var(--np-color-border);
  border-radius: var(--np-radius-panel);
  padding: calc(var(--np-space-6) + var(--np-border-hairline));
  margin-bottom: var(--np-space-5-5);
  min-width: 0;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--np-space-4);
  margin-bottom: var(--np-space-5-5);
}
.panel-head h2,.panel-head h3,.panel-head p:last-child {
  margin-bottom: 0;
}
.stack {
  display: grid;
  gap: var(--np-space-4-5);
}
.stack>.panel {
  margin-bottom: 0;
}
.divider {
  height: var(--np-border-hairline);
  background: var(--np-color-border);
  margin: var(--np-space-6) 0;
}
.np-callout,.callout {
  padding: calc(var(--np-space-3-5) + var(--np-border-hairline)) var(--np-space-4-5);
  border: var(--np-border-hairline) solid var(--np-color-border);
  border-radius: var(--np-radius-lg);
  background: var(--np-color-surface-subtle);
  color: var(--np-color-text-muted);
  font-size: var(--np-text-body);
  line-height: var(--np-leading-callout);
  margin: var(--np-space-4-5) 0;
}
.np-callout--warning,.callout.warning {
  background: var(--np-color-warning-soft);
  border-color: var(--np-color-warning-border);
  color: var(--np-color-warning);
}
.np-callout--success,.callout.success {
  background: var(--np-color-success-soft);
  border-color: var(--np-color-success-border);
  color: var(--np-color-success);
}
.np-callout p:last-child,.callout p:last-child {
  margin-bottom: 0;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--np-text-body);
  text-align: left;
}
th {
  color: var(--np-color-text-muted);
  font-weight: var(--np-weight-medium);
  padding: var(--np-space-3) var(--np-space-3);
  border-bottom: var(--np-border-hairline) solid var(--np-color-border);
  background: var(--np-color-surface-table);
  white-space: nowrap;
}
td {
  padding: var(--np-space-4) var(--np-space-3);
  border-bottom: var(--np-border-hairline) solid var(--np-color-border-subtle);
  vertical-align: middle;
}
tbody tr:last-child td {
  border-bottom: 0;
}
tbody tr:hover {
  background: var(--np-color-surface-table);
}
td small {
  display: block;
  color: var(--np-color-text-muted);
  margin-top: var(--np-space-1);
}
td .badge {
  font-size: var(--np-text-caption-small);
}
.field {
  display: grid;
  gap: calc(var(--np-space-1-5) + var(--np-border-hairline));
  min-width: 0;
}
.field>span,.field>label {
  font-size: var(--np-text-body);
  font-weight: var(--np-weight-medium);
}
.field>small {
  color: var(--np-color-text-muted);
  font-size: var(--np-text-sm);
}
.field input,.field select,.field textarea {
  width: 100%;
}
.row-actions {
  display: flex;
  gap: var(--np-space-2);
  flex-wrap: wrap;
  align-items: center;
}
.icon-button {
  border: var(--np-border-hairline) solid var(--np-color-border);
  background: var(--np-color-surface);
  width: var(--np-control-icon);
  height: var(--np-control-icon);
  border-radius: var(--np-radius-md);
  font-size: var(--np-text-close-icon);
  line-height: var(--np-leading-solid);
  flex-shrink: 0;
}

/* Shared date/time component. Its own spans avoid global small/dd typography.
   Labeled stack: date and exact time each have a persistent, aligned label.
   Compact stack: narrow table cells. Inline: event history. Clock: toolbars. */
.money { white-space: nowrap; font-variant-numeric: tabular-nums; }
.money-decimals { font-size: var(--np-money-fraction); font-weight: inherit; }
.np-datetime {
  display: inline-flex;
  align-items: baseline;
  gap: var(--np-space-2);
  font: inherit;
  line-height: var(--np-leading-body);
  letter-spacing: normal;
  text-align: left;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.np-datetime .np-datetime-part { display: inline-flex; align-items: baseline; gap: var(--np-space-2); }
.np-datetime .np-datetime-label { color: var(--np-color-text-muted); font-size: var(--np-text-xs); font-weight: var(--np-weight-regular); }
.np-datetime .np-datetime-date { color: inherit; font-size: inherit; font-weight: inherit; }
.np-datetime .np-datetime-clock { color: inherit; font-size: inherit; font-weight: var(--np-weight-medium); }
.np-datetime--stack { display: inline-grid; gap: calc(var(--np-space-0-5) + var(--np-border-hairline)); }
.np-datetime--stack.np-datetime--labeled { grid-template-columns: auto auto; column-gap: var(--np-space-4); }
.np-datetime--stack.np-datetime--labeled .np-datetime-part { display: contents; }
.np-datetime--stack.np-datetime--labeled .np-datetime-date,
.np-datetime--stack.np-datetime--labeled .np-datetime-clock { text-align: right; }
.np-datetime--stack.np-datetime--compact { gap: var(--np-space-1); }
.np-datetime--compact .np-datetime-clock { color: var(--np-color-text-muted); font-size: var(--np-text-sm); font-weight: var(--np-weight-regular); }
.np-datetime--inline { flex-wrap: wrap; gap: var(--np-space-2); }
.np-datetime--clock .np-datetime-clock { font-size: inherit; color: inherit; }
.np-datetime-empty { color: var(--np-color-text-muted); white-space: nowrap; }
.card-operation-list { list-style: none; display: grid; gap: var(--np-space-2); margin: 0; padding: 0; }
.card-operation-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--np-space-1) var(--np-space-3); }
.refund-created { display: grid; gap: var(--np-space-1); }
.np-callout--info { border-color: var(--np-color-border); background: var(--np-color-surface-subtle); color: var(--np-color-text-muted); }
.np-callout--danger { border-color: var(--np-color-danger-border); background: var(--np-color-danger-soft); color: var(--np-color-danger); }
/* The delivery confirmation shares the inset information surface. */
.np-info-surface,.transaction-delivery {
  border: var(--np-border-hairline) solid var(--np-color-border);
  background: var(--np-color-surface-subtle);
  border-radius: var(--np-radius-xl);
  padding: var(--np-space-5);
  margin: var(--np-space-5) 0;
}