/* ═══════════════════════════════════════════════════════════════
   VidaPay — MD3 component classes (decision 0013). Shared by the
   app and the portal; everything through md3-tokens.css roles.
   New screens use these from birth; existing screens adopt them
   one commit per screen. State layers via a ::before overlay so
   content keeps its own colour. All geometry logical (RTL-safe).
   ═══════════════════════════════════════════════════════════════ */

/* ── State-layer host ────────────────────────────────────────── */
.m3-stateful { position: relative; overflow: hidden; }
.m3-stateful::before {
  content: ''; position: absolute; inset: 0;
  background: currentColor; opacity: 0; pointer-events: none;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.m3-stateful:hover::before        { opacity: var(--md-sys-state-hover-opacity); }
.m3-stateful:focus-visible::before{ opacity: var(--md-sys-state-focus-opacity); }
.m3-stateful:active::before       { opacity: var(--md-sys-state-pressed-opacity); }

/* ── Buttons ─────────────────────────────────────────────────── */
.m3-btn {
  font: inherit;
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-weight-medium);
  min-height: var(--target-min);
  padding-inline: 1.5rem;
  border: none; border-radius: var(--md-sys-shape-corner-full);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  cursor: pointer;
  transition: box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.m3-btn:disabled { cursor: default; opacity: .38; }

.m3-btn-filled {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.m3-btn-filled:not(:disabled):hover { box-shadow: var(--md-sys-elevation-1); }

.m3-btn-tonal {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.m3-btn-outlined {
  background: transparent;
  color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline);
}

.m3-btn-text {
  background: transparent;
  color: var(--md-sys-color-primary);
  padding-inline: var(--space-3);
}

.m3-btn-error {
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
}

/* ── FAB ─────────────────────────────────────────────────────── */
.m3-fab {
  font: inherit; border: none; cursor: pointer;
  inline-size: 3.5rem; block-size: 3.5rem;
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  box-shadow: var(--md-sys-elevation-3);
  display: grid; place-items: center;
  font-size: var(--icon-lg);
}

/* ── Cards ───────────────────────────────────────────────────── */
.m3-card {
  border-radius: var(--md-sys-shape-corner-medium);
  padding: var(--space-4);
}
.m3-card-elevated {
  background: var(--md-sys-color-surface-container-low);
  box-shadow: var(--md-sys-elevation-1);
}
.m3-card-filled {
  background: var(--md-sys-color-surface-container-highest);
}
.m3-card-outlined {
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
}

/* ── Outlined text field ─────────────────────────────────────── */
.m3-field { display: flex; flex-direction: column; gap: var(--space-1); }
.m3-field-label {
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--md-sys-color-on-surface-variant);
}
.m3-field-input {
  font: inherit;
  font-size: var(--md-sys-typescale-body-large-size);
  color: var(--md-sys-color-on-surface);
  background: transparent;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  min-height: 3.5rem;
  padding-inline: var(--space-4);
}
.m3-field-input:focus-visible {
  outline: none;
  border: 2px solid var(--md-sys-color-primary);
}
.m3-field-input[aria-invalid="true"] { border-color: var(--md-sys-color-error); }
.m3-field-support {
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--md-sys-color-on-surface-variant);
}
.m3-field-support.is-error { color: var(--md-sys-color-error); }

/* ── Chips ───────────────────────────────────────────────────── */
.m3-chip {
  font: inherit;
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-weight-medium);
  color: var(--md-sys-color-on-surface-variant);
  background: transparent;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small);
  min-height: 2rem; padding-inline: var(--space-4);
  display: inline-flex; align-items: center; gap: var(--space-2);
  cursor: pointer;
}
.m3-chip[aria-pressed="true"], .m3-chip.is-selected {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent;
}

/* ── List items ──────────────────────────────────────────────── */
.m3-list { list-style: none; margin: 0; padding: 0; }
.m3-list-item {
  display: flex; align-items: center; gap: var(--space-4);
  min-height: 3.5rem; padding: var(--space-2) var(--space-4);
  color: var(--md-sys-color-on-surface);
}
.m3-list-item + .m3-list-item { border-block-start: 1px solid var(--md-sys-color-outline-variant); }
.m3-list-headline { font-size: var(--md-sys-typescale-body-large-size); }
.m3-list-supporting {
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface-variant);
}

/* ── Switch ──────────────────────────────────────────────────── */
.m3-switch {
  position: relative; display: inline-flex; align-items: center;
  inline-size: 3.25rem; block-size: 2rem; cursor: pointer;
  padding-block: calc((var(--target-min) - 2rem) / 2); box-sizing: content-box;
}
.m3-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.m3-switch-track {
  pointer-events: none; inline-size: 100%; block-size: 2rem;
  background: var(--md-sys-color-surface-container-highest);
  border: 2px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  position: relative;
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.m3-switch-track::after {
  content: ''; position: absolute; inset-block-start: 50%; translate: 0 -50%;
  inset-inline-start: .25rem;
  inline-size: 1rem; block-size: 1rem;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-outline);
  transition: inset-inline-start var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
              inline-size var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
              block-size var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
              background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.m3-switch input:checked + .m3-switch-track {
  background: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}
.m3-switch input:checked + .m3-switch-track::after {
  inset-inline-start: calc(100% - 1.5rem - .25rem);
  inline-size: 1.5rem; block-size: 1.5rem;
  background: var(--md-sys-color-on-primary);
}
.m3-switch input:focus-visible + .m3-switch-track {
  outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px;
}

/* ── Navigation bar (bottom) ─────────────────────────────────── */
.m3-navbar {
  display: flex; justify-content: space-around;
  background: var(--md-sys-color-surface-container);
  padding-block: var(--space-2);
}
.m3-nav-item {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  font-size: var(--md-sys-typescale-label-medium-size);
  font-weight: var(--md-sys-typescale-weight-medium);
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none; border: none; background: none; cursor: pointer;
  min-width: var(--target-min); min-height: var(--target-min);
}
.m3-nav-item .m3-nav-glyph {
  display: grid; place-items: center;
  inline-size: 4rem; block-size: 2rem;
  border-radius: var(--md-sys-shape-corner-full);
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.m3-nav-item.is-active { color: var(--md-sys-color-on-surface); }
.m3-nav-item.is-active .m3-nav-glyph {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

/* ── Dialog / bottom sheet ───────────────────────────────────── */
.m3-dialog {
  border: none;
  border-radius: var(--md-sys-shape-corner-extra-large);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--md-sys-elevation-3);
  padding: var(--space-6);
  max-inline-size: min(100% - 2rem, 35rem);
}
.m3-dialog::backdrop { background: color-mix(in srgb, var(--md-sys-color-scrim) 40%, transparent); }
.m3-sheet {
  border: none;
  border-radius: var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;
  background: var(--md-sys-color-surface-container-low);
  box-shadow: var(--md-sys-elevation-1);
}

/* ── Snackbar ────────────────────────────────────────────────── */
.m3-snackbar {
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  border-radius: var(--md-sys-shape-corner-extra-small);
  box-shadow: var(--md-sys-elevation-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--md-sys-typescale-body-medium-size);
}

/* ── Badges / status dots (availability etc.) ────────────────── */
.m3-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-weight-medium);
  border-radius: var(--md-sys-shape-corner-small);
  padding: var(--space-1) var(--space-3);
}
.m3-badge-success { background: var(--md-ext-success-container); color: var(--md-ext-success-text); }
.m3-badge-warn    { background: var(--md-ext-warn-container);    color: var(--md-ext-warn-text); }
.m3-badge-error   { background: var(--md-sys-color-error-container); color: var(--md-sys-color-error); }
.m3-badge-info    { background: var(--md-ext-info-container);    color: var(--md-ext-info-text); }