/*
 * Dashboard money drawer shell.
 * Shared visual contract for Send, Add funds and Exchange; feature files retain
 * their state and data rules while this layer owns surface, spacing and controls.
 */

:root {
  --money-drawer-inline-size: 32rem;
  --money-drawer-inset: var(--spacing-lg);
  --money-drawer-radius: var(--radius-2xl);
  --money-drawer-control-height: var(--button-height-lg);
  --money-drawer-control-surface: color-mix(in srgb, var(--dash-text) 7%, var(--dash-card));
  --money-drawer-control-surface-hover: color-mix(in srgb, var(--dash-text) 11%, var(--dash-card));
}

body.dash-page :is(.cdep-drawer, .csend-drawer) {
  width: min(
    var(--money-drawer-inline-size),
    calc(100vw - (var(--money-drawer-inset) * 2))
  );
  height: calc(100dvh - (var(--money-drawer-inset) * 2));
  max-height: calc(100dvh - (var(--money-drawer-inset) * 2));
  margin: var(--money-drawer-inset) var(--money-drawer-inset) var(--money-drawer-inset) auto;
  border: 0;
  border-radius: var(--money-drawer-radius);
  background: transparent;
  overflow: visible;
}

body.dash-page :is(.cdep-drawer, .csend-drawer)::backdrop {
  background: color-mix(in srgb, var(--color-black, #000) 68%, transparent);
  backdrop-filter: blur(var(--spacing-sm));
  -webkit-backdrop-filter: blur(var(--spacing-sm));
}

body.dash-page :is(.cdep-drawer__sheet, .csend-drawer__sheet) {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--money-drawer-radius);
  background: var(--dash-card);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  overscroll-behavior: contain;
}

body.dash-page :is(.cdep-drawer__header, .csend-drawer__header) {
  gap: var(--spacing-xl);
  padding: var(--spacing-2xl) var(--spacing-2xl) var(--spacing-lg);
  border: 0;
}

body.dash-page :is(.cdep-drawer__subtitle, .csend-drawer__subtitle) {
  max-width: 39ch;
  line-height: 1.5;
}

body.dash-page :is(.cdep-drawer__close, .csend-drawer__close) {
  width: var(--money-drawer-control-height);
  height: var(--money-drawer-control-height);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--dash-secondary);
  transition:
    background-color var(--motion-duration-fast, 150ms) ease,
    color var(--motion-duration-fast, 150ms) ease,
    transform var(--motion-duration-fast, 150ms) ease;
}

body.dash-page :is(.cdep-drawer__close, .csend-drawer__close):hover {
  border: 0;
  background: var(--color-surface-muted-hover);
  color: var(--dash-text);
}

body.dash-page :is(.cdep-drawer__close, .csend-drawer__close):active {
  transform: scale(var(--button-press-scale));
}

body.dash-page :is(.cdep-drawer__body, .csend-drawer__body) {
  padding: var(--spacing-lg) var(--spacing-2xl) var(--spacing-2xl);
  scroll-padding-block: var(--spacing-2xl);
}

body.dash-page :is(.cdep-drawer__form, .csend-drawer__form, .csend-drawer__review) {
  min-height: 100%;
  gap: var(--spacing-2xl);
}

body.dash-page :is(.cdep-drawer__field, .csend-drawer__field) {
  gap: var(--spacing-sm);
}

body.dash-page :is(.cdep-drawer__field, .csend-drawer__field) label {
  color: var(--dash-text);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

body.dash-page :is(.cdep-drawer__field, .csend-drawer__field) :is(input, select) {
  width: 100%;
  height: var(--money-drawer-control-height);
  min-height: var(--money-drawer-control-height);
  padding-inline: var(--control-padding-x);
  border: 0;
  border-radius: var(--control-radius-input);
  background-color: var(--money-drawer-control-surface);
  color: var(--color-input-text, var(--dash-text));
  box-shadow: none;
  font-size: max(1rem, var(--font-size-md));
  transition:
    background-color var(--motion-duration-fast, 150ms) ease,
    box-shadow var(--motion-duration-fast, 150ms) ease;
}

body.dash-page :is(.cdep-drawer__field, .csend-drawer__field) :is(input, select):hover {
  border: 0;
  background-color: var(--money-drawer-control-surface-hover);
}

body.dash-page :is(.cdep-drawer__field, .csend-drawer__field) :is(input, select):focus-visible {
  border: 0;
  outline: 0;
  background-color: var(--money-drawer-control-surface-hover);
  box-shadow: var(--shadow-sm);
}

body.dash-page :is(.cdep-drawer__field, .csend-drawer__field) select {
  appearance: none;
  padding-inline-end: var(--spacing-5xl);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23a2a2a2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: calc(100% - var(--control-padding-x)) center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
}

@supports (appearance: base-select) {
  body.dash-page :is(.cdep-drawer__field, .csend-drawer__field) select {
    appearance: none;
  }

  body.dash-page :is(.cdep-drawer__field, .csend-drawer__field) select::picker(select) {
    border: 0;
    background: var(--dash-popover-bg);
    box-shadow: var(--dash-popover-shadow);
  }
}

body.dash-page :is(.cdep-drawer__amount, .csend-drawer__amount) input {
  padding-inline-end: var(--spacing-8xl);
  font-size: var(--font-size-xl);
  font-variant-numeric: tabular-nums;
}

body.dash-page :is(.cdep-drawer__hint, .csend-drawer__hint) {
  color: var(--dash-muted);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}

body.dash-page :is(.cdep-drawer__status, .csend-drawer__status):empty {
  display: none;
}

body.dash-page :is(.cdep-drawer__loading, .csend-drawer__loading) {
  min-height: 100%;
  align-content: center;
  justify-items: center;
  gap: var(--spacing-lg);
  width: 100%;
  color: var(--dash-secondary);
  text-align: center;
}

body.dash-page :is(.cdep-drawer__loading, .csend-drawer__loading)::before {
  content: "";
  width: var(--button-spinner-size);
  height: var(--button-spinner-size);
  border: var(--button-spinner-stroke) solid color-mix(in srgb, currentColor 24%, transparent);
  border-block-start-color: currentColor;
  border-radius: var(--radius-circle);
  animation: money-drawer-spin 700ms linear infinite;
}

body.dash-page :is(
  .cdep-drawer__unavailable,
  .cdep-drawer__success,
  .csend-drawer__unavailable,
  .csend-drawer__success
) {
  min-height: 16rem;
  align-content: center;
  justify-items: start;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--color-surface-muted);
}

body.dash-page .csend-drawer__review-list {
  gap: var(--spacing-sm);
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

body.dash-page .csend-drawer__review-list > div {
  padding: var(--spacing-md) var(--spacing-lg);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

body.dash-page .csend-drawer__warning {
  border: 0;
  background: color-mix(in srgb, var(--color-warning) 10%, var(--color-surface-muted));
}

body.dash-page :is(.cdep-drawer__footer, .csend-drawer__footer) {
  gap: var(--spacing-md);
  margin-block-start: auto;
  padding-block-start: var(--spacing-lg);
  border: 0;
}

body.dash-page :is(.cdep-drawer__button, .csend-drawer__button) {
  height: var(--money-drawer-control-height);
  min-height: var(--money-drawer-control-height);
  border: 0;
  border-radius: var(--button-radius);
  transition:
    background-color var(--motion-duration-fast, 150ms) ease,
    color var(--motion-duration-fast, 150ms) ease,
    transform var(--motion-duration-fast, 150ms) ease;
}

body.dash-page :is(.cdep-drawer__button--secondary, .csend-drawer__button--secondary) {
  border: 0;
  background: var(--money-drawer-control-surface);
  color: var(--dash-text);
}

body.dash-page :is(.cdep-drawer__button--secondary, .csend-drawer__button--secondary):hover:not(:disabled) {
  border: 0;
  background: var(--money-drawer-control-surface-hover);
}

body.dash-page :is(
  .cdep-drawer__close,
  .csend-drawer__close,
  .cdep-drawer__button,
  .csend-drawer__button
):focus-visible {
  border: 0;
  outline: 0;
  box-shadow: var(--shadow-sm);
  filter: brightness(1.12);
}

@keyframes money-drawer-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 800px) {
  :root {
    --money-drawer-inset: var(--spacing-md);
  }

  body.dash-page :is(.cdep-drawer, .csend-drawer) {
    width: calc(100vw - (var(--money-drawer-inset) * 2));
    height: calc(100svh - (var(--money-drawer-inset) * 2));
    max-height: calc(100svh - (var(--money-drawer-inset) * 2));
    margin: var(--money-drawer-inset);
  }

  body.dash-page :is(.cdep-drawer__sheet, .csend-drawer__sheet) {
    border: 0;
    border-radius: var(--money-drawer-radius);
    padding-block-end: env(safe-area-inset-bottom);
  }

  body.dash-page :is(.cdep-drawer__header, .csend-drawer__header) {
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-md);
  }

  body.dash-page :is(.cdep-drawer__body, .csend-drawer__body) {
    padding: var(--spacing-md) var(--spacing-xl) var(--spacing-xl);
  }

  body.dash-page :is(.cdep-drawer__footer, .csend-drawer__footer) {
    position: sticky;
    inset-block-end: 0;
    grid-template-columns: 1fr;
    padding-block-end: max(var(--spacing-xs), env(safe-area-inset-bottom));
    background: var(--dash-card);
  }

  body.dash-page :is(.cdep-drawer__button--primary, .csend-drawer__button--primary) {
    order: -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.dash-page :is(.cdep-drawer__close, .csend-drawer__close),
  body.dash-page :is(.cdep-drawer__button, .csend-drawer__button),
  body.dash-page :is(.cdep-drawer__field, .csend-drawer__field) :is(input, select) {
    transition: none;
  }

  body.dash-page :is(.cdep-drawer__loading, .csend-drawer__loading)::before {
    animation-duration: 1400ms;
  }
}

@media (forced-colors: active) {
  body.dash-page :is(
    .cdep-drawer__close,
    .csend-drawer__close,
    .cdep-drawer__button,
    .csend-drawer__button,
    .cdep-drawer__field input,
    .cdep-drawer__field select,
    .csend-drawer__field input,
    .csend-drawer__field select
  ) {
    border: 1px solid ButtonText;
  }
}