/* ============================================================================
   M1 DESIGN SYSTEM — COMPONENTS (first set)
   Every rule below uses SEMANTIC tokens and LOGICAL properties only.
   No hex literals, no left/right, no hard-coded px except hairlines.
   Sizing comes from the density layer, so the same markup is a back-office
   control at 36px and a POS control at 56px with no component changes.
   ========================================================================= */

/* ---------------------------------------------------------------- BUTTON */
.m1-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--control-height);
  min-inline-size: var(--tap-target);
  padding-inline: var(--control-padding-x);
  font-family: var(--font-body);
  font-size: var(--control-font);
  font-weight: var(--weight-medium);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard),
              transform var(--motion-fast) var(--ease-standard);
}
.m1-btn:active:not(:disabled) { transform: translateY(1px); }
.m1-btn:disabled,
.m1-btn[aria-disabled='true'] {
  background: var(--surface-disabled);
  color: var(--text-disabled);
  border-color: transparent;
  cursor: not-allowed;
  transform: none;
}

.m1-btn--primary   { background: var(--intent-brand); color: var(--text-on-brand); }
.m1-btn--primary:hover:not(:disabled)   { background: var(--intent-brand-hover); }

.m1-btn--secondary { background: var(--surface-raised); color: var(--text-primary); border-color: var(--border-strong); }
.m1-btn--secondary:hover:not(:disabled) { background: var(--surface-hover); }

.m1-btn--ghost     { background: transparent; color: var(--text-secondary); }
.m1-btn--ghost:hover:not(:disabled)     { background: var(--surface-hover); color: var(--text-primary); }

.m1-btn--danger    { background: var(--intent-danger); color: #fff; }
.m1-btn--danger:hover:not(:disabled)    { filter: brightness(0.93); }

.m1-btn--block { inline-size: 100%; }

/* loading: the label stays for width stability, a spinner replaces it visually */
.m1-btn[data-loading='true'] { color: transparent; position: relative; pointer-events: none; }
.m1-btn[data-loading='true']::after {
  content: ''; position: absolute;
  inline-size: 1em; block-size: 1em;
  border: 2px solid currentColor; border-block-start-color: transparent;
  border-radius: var(--radius-full);
  color: var(--text-on-brand);
  animation: m1-spin var(--motion-slow) linear infinite;
}
@keyframes m1-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- FIELD */
.m1-field { display: flex; flex-direction: column; gap: var(--space-1); }
.m1-label {
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--text-secondary);
}
.m1-label[data-required]::after { content: ' *'; color: var(--intent-danger); }

.m1-input, .m1-select, .m1-textarea {
  min-block-size: var(--control-height);
  padding-inline: var(--control-padding-x);
  padding-block: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--control-font);
  color: var(--text-primary);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--control-radius);
  inline-size: 100%;
  transition: border-color var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard);
}
.m1-textarea { min-block-size: calc(var(--control-height) * 2.5); resize: vertical; }
.m1-input::placeholder, .m1-textarea::placeholder { color: var(--text-muted); }
.m1-input:hover:not(:disabled), .m1-select:hover:not(:disabled) { border-color: var(--text-muted); }
.m1-input:focus-visible, .m1-select:focus-visible, .m1-textarea:focus-visible {
  border-color: var(--border-focus); outline-offset: 0;
}
.m1-input:disabled, .m1-select:disabled, .m1-textarea:disabled {
  background: var(--surface-disabled); color: var(--text-disabled); cursor: not-allowed;
}
.m1-input[aria-invalid='true'], .m1-select[aria-invalid='true'] { border-color: var(--intent-danger); }

.m1-help  { font-size: var(--text-xs); color: var(--text-muted); }
.m1-error { font-size: var(--text-xs); color: var(--intent-danger); }

/* chevron sits on the inline-end, so it moves to the left in RTL automatically */
.m1-select {
  appearance: none;
  padding-inline-end: var(--space-8);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right var(--space-4) center, right calc(var(--space-4) - 4px) center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
[dir='rtl'] .m1-select {
  background-position: left calc(var(--space-4) - 4px) center, left var(--space-4) center;
}

/* ---------------------------------------------------------------- CHECK / SWITCH */
.m1-check { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.m1-check input { inline-size: 1.125rem; block-size: 1.125rem; accent-color: var(--intent-brand); cursor: pointer; }

.m1-switch { position: relative; display: inline-block; inline-size: 2.75rem; block-size: 1.5rem; flex: none; }
.m1-switch input { opacity: 0; inline-size: 0; block-size: 0; }
.m1-switch__track {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--border-strong); border-radius: var(--radius-full);
  transition: background-color var(--motion-base) var(--ease-standard);
}
.m1-switch__track::before {
  content: ''; position: absolute;
  block-size: 1.125rem; inline-size: 1.125rem;
  inset-block-start: 0.1875rem; inset-inline-start: 0.1875rem;
  background: var(--surface-raised); border-radius: var(--radius-full);
  transition: inset-inline-start var(--motion-base) var(--ease-standard);
}
.m1-switch input:checked + .m1-switch__track { background: var(--intent-brand); }
.m1-switch input:checked + .m1-switch__track::before { inset-inline-start: 1.4375rem; }
.m1-switch input:focus-visible + .m1-switch__track {
  outline: var(--focus-ring-width) solid var(--border-focus); outline-offset: var(--focus-ring-offset);
}

/* ---------------------------------------------------------------- CARD */
.m1-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-1);
}
.m1-card__header {
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--border-subtle);
  display: flex; align-items: center; gap: var(--space-3);
}
.m1-card__title { font-family: var(--font-head); font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 0; }
.m1-card__body { padding: var(--space-5); }
.m1-card__footer {
  padding: var(--space-3) var(--space-5);
  border-block-start: 1px solid var(--border-subtle);
  display: flex; gap: var(--space-2); justify-content: flex-end;
}

/* ---------------------------------------------------------------- BADGE */
.m1-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding-inline: var(--space-2); padding-block: 0.125rem;
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  border-radius: var(--radius-full);
  background: var(--surface-sunken); color: var(--text-secondary);
  white-space: nowrap;
}
.m1-badge--success { background: var(--intent-success-surface); color: var(--intent-success-text); }
.m1-badge--warning { background: var(--intent-warning-surface); color: var(--intent-warning-text); }
.m1-badge--danger  { background: var(--intent-danger-surface);  color: var(--intent-danger); }
.m1-badge--info    { background: var(--intent-info-surface);    color: var(--intent-info); }
.m1-badge--brand   { background: var(--intent-brand-surface);   color: var(--intent-brand); }

/* ---------------------------------------------------------------- BANNER */
.m1-banner {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border-inline-start: 3px solid var(--intent-info);
  background: var(--intent-info-surface);
  color: var(--text-primary);
  font-size: var(--text-md);
}
.m1-banner--success { border-inline-start-color: var(--intent-success); background: var(--intent-success-surface); }
.m1-banner--warning { border-inline-start-color: var(--intent-warning); background: var(--intent-warning-surface); }
.m1-banner--danger  { border-inline-start-color: var(--intent-danger);  background: var(--intent-danger-surface); }

/* ---------------------------------------------------------------- TABLE */
.m1-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); }
.m1-table { inline-size: 100%; border-collapse: collapse; background: var(--surface-raised); font-size: var(--text-md); }
.m1-table th {
  text-align: start;              /* start, not left — flips for RTL */
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted);
  background: var(--surface-sunken);
  border-block-end: 1px solid var(--border-subtle);
  position: sticky; inset-block-start: 0; z-index: 1;
}
.m1-table td { padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--border-subtle); color: var(--text-secondary); }
.m1-table tbody tr:last-child td { border-block-end: 0; }
.m1-table tbody tr:hover td { background: var(--surface-hover); }
.m1-table .m1-td--numeric { text-align: end; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- KPI TILE */
.m1-kpi {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-1);
  box-shadow: var(--elevation-1);
}
.m1-kpi__label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.m1-kpi__value { font-family: var(--font-head); font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.1; }
.m1-kpi__delta { font-size: var(--text-xs); font-weight: var(--weight-medium); }
.m1-kpi__delta--up   { color: var(--intent-success); }
.m1-kpi__delta--down { color: var(--intent-danger); }

/* ---------------------------------------------------------------- TABS */
.m1-tabs { display: flex; gap: var(--space-1); border-block-end: 1px solid var(--border-subtle); }
.m1-tab {
  appearance: none; background: none; border: 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--control-font); font-family: var(--font-body);
  color: var(--text-muted); cursor: pointer;
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
  transition: color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}
.m1-tab:hover { color: var(--text-primary); }
.m1-tab[aria-selected='true'] { color: var(--intent-brand); border-block-end-color: var(--intent-brand); font-weight: var(--weight-medium); }

/* ---------------------------------------------------------------- MODAL */
.m1-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(6, 13, 24, .55);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  animation: m1-fade var(--motion-base) var(--ease-standard);
}
.m1-modal {
  background: var(--surface-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-4);
  inline-size: 100%; max-inline-size: 32rem;
  /* capped and internally scrollable — a tall dialog must never push its own
     buttons off a viewport that cannot scroll */
  max-block-size: calc(100vh - var(--space-8));
  display: flex; flex-direction: column;
  animation: m1-rise var(--motion-base) var(--ease-decelerate);
}
.m1-modal__header { padding: var(--space-4) var(--space-5); border-block-end: 1px solid var(--border-subtle); flex: none; }
.m1-modal__body   { padding: var(--space-5); overflow-y: auto; }
.m1-modal__footer { padding: var(--space-3) var(--space-5); border-block-start: 1px solid var(--border-subtle); display: flex; gap: var(--space-2); justify-content: flex-end; flex: none; }
@keyframes m1-fade { from { opacity: 0; } }
@keyframes m1-rise { from { opacity: 0; transform: translateY(8px); } }

/* ---------------------------------------------------------------- TOAST */
.m1-toast {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-overlay);
  border: 1px solid var(--border-subtle);
  border-inline-start: 3px solid var(--intent-brand);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-3);
  font-size: var(--text-md);
  animation: m1-rise var(--motion-base) var(--ease-decelerate);
}
.m1-toast--success { border-inline-start-color: var(--intent-success); }
.m1-toast--danger  { border-inline-start-color: var(--intent-danger); }

/* ---------------------------------------------------------------- EMPTY / SKELETON */
.m1-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
  text-align: center; color: var(--text-muted);
}
.m1-empty__title { font-family: var(--font-head); font-size: var(--text-lg); color: var(--text-primary); margin: 0; }

.m1-skeleton {
  background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--surface-hover) 37%, var(--surface-sunken) 63%);
  background-size: 400% 100%;
  border-radius: var(--radius-sm);
  animation: m1-shimmer 1.4s ease infinite;
  block-size: 1em;
}
@keyframes m1-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* ---------------------------------------------------------------- NUMBER PAD
   §8.3. POS-critical: sized from --tap-target so it is genuinely usable with a
   gloved hand at pos density, and still compact in back-office. */
.m1-numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); max-inline-size: 18rem; }
.m1-numpad .m1-btn {
  min-block-size: max(var(--tap-target), 3rem);
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
}