@import url('/ui-tokens/index.css');
@import url('/ui-system/styles.css');

body.customer-application-active {
  --bg: var(--ui-bg-page);
  --panel: var(--ui-surface);
  --panel-2: var(--ui-surface-elevated);
  --line: var(--ui-border);
  --text: var(--ui-text-primary);
  --muted: var(--ui-text-muted);
  --brand: var(--ui-brand);
  --danger: var(--ui-error);
  min-inline-size: 320px;
  overflow-x: clip;
  color: var(--ui-text-primary);
  background: var(--ui-bg-page);
  font: 400 0.9375rem/1.6 var(--ui-font-sans);
  letter-spacing: 0;
}

body.customer-application-active::before,
body.customer-application-active main::before,
body.customer-application-active .dashboard::before,
body.customer-application-active .dashboard::after {
  display: none;
}

body.customer-application-active :where(button, input, select, textarea, table) {
  font-family: var(--ui-font-sans);
  letter-spacing: 0;
}

body.customer-application-active :where(.ui-financial-number, [data-financial-field], .metric-card strong, .wallet-balance, td[data-type='number']) {
  color: var(--ui-text-primary);
  font-family: var(--ui-font-mono);
  font-variant-numeric: tabular-nums lining-nums;
}

body.customer-application-active > #app > .topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ui-space-lg);
  min-block-size: 68px;
  padding: 10px clamp(16px, 3vw, 48px);
  border-block-end: 1px solid var(--ui-border);
  background: color-mix(in srgb, var(--ui-surface-elevated) 94%, transparent);
  box-shadow: none;
  backdrop-filter: blur(16px);
}

body.customer-application-active .topbar .brand {
  display: inline-flex;
  align-items: center;
  min-inline-size: 0;
  padding: 0;
}

body.customer-application-active .customer-brand-logo .ui-brand-logo__asset {
  inline-size: 176px;
  block-size: 40px;
}

body.customer-application-active .ia-brand-logo.ui-brand-logo {
  max-inline-size: 184px;
}

body.customer-application-active .ia-brand-logo .ui-brand-logo__asset {
  max-inline-size: 100%;
}

body.customer-application-active .footer-logo.ui-brand-logo {
  inline-size: 180px;
}

body.customer-application-active .nav-strip {
  display: flex;
  justify-content: center;
  gap: 2px;
  min-inline-size: 0;
}

body.customer-application-active .nav-link {
  min-block-size: 40px;
  padding: 10px 13px;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-control);
  color: var(--ui-text-secondary);
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.2;
}

body.customer-application-active .nav-link:is(.active, :hover) {
  border-color: var(--ui-border);
  color: var(--ui-text-primary);
  background: var(--ui-surface);
}

body.customer-application-active .top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ui-space-sm);
  min-inline-size: 0;
}

body.customer-application-active :where(.primary, .action, button.primary) {
  border-radius: var(--ui-radius-control);
  background: var(--ui-brand);
  color: var(--ui-text-on-brand);
  box-shadow: none;
}

body.customer-application-active :where(.ghost, .secondary, button.ghost) {
  border-color: var(--ui-border-strong);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface);
  color: var(--ui-text-primary);
  box-shadow: none;
}

body.customer-application-active main {
  inline-size: 100%;
  min-inline-size: 0;
}

body.customer-application-active :where(.dashboard, .section, .customer-operation-page, .ftm-page, .wallet-page, .identity-page) {
  inline-size: min(100% - 32px, 1280px);
  max-inline-size: 1280px;
  margin-inline: auto;
}

body.customer-application-active :where(.dashboard, .customer-operation-page, .ftm-page, .wallet-page) {
  padding-block: clamp(28px, 5vw, 64px);
}

body.customer-application-active :where(h1, h2, h3, p, label, th, td) {
  letter-spacing: 0;
}

body.customer-application-active :where(.dashboard > h1, .customer-page-header h1, .ftm-page-header h1, .wallet-page h1) {
  margin-block: 6px 10px;
  color: var(--ui-text-primary);
  font: 700 2.25rem/1.2 var(--ui-font-sans);
}

body.customer-application-active :where(.metric-card, .surface, .favorite-card, .quick-link, .ftm-panel, .ftm-balance, .wallet-card, .customer-empty-state) {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-panel);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
}

body.customer-application-active :where(.metric-card, .surface, .ftm-panel, .wallet-card)::before,
body.customer-application-active :where(.metric-card, .surface, .ftm-panel, .wallet-card)::after {
  display: none;
}

.customer-operation-page {
  display: grid;
  gap: var(--ui-space-xl);
}

.customer-page-header {
  max-inline-size: 760px;
}

.customer-page-header p {
  margin: 0;
  color: var(--ui-text-secondary);
}

.customer-page-header .eyebrow {
  color: var(--ui-brand);
  font-weight: 700;
}

.customer-section-nav,
.ftm-route-nav {
  display: flex;
  gap: 4px;
  max-inline-size: 100%;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-panel);
  background: var(--ui-surface-elevated);
  scrollbar-width: thin;
}

.customer-section-nav a,
.ftm-route-nav a {
  flex: 0 0 auto;
  min-block-size: 40px;
  padding: 10px 16px;
  border-radius: var(--ui-radius-control);
  color: var(--ui-text-secondary);
  font-weight: 650;
  line-height: 1.2;
}

.customer-section-nav a[aria-current='page'],
.ftm-route-nav a.is-active {
  color: var(--ui-text-on-brand);
  background: var(--ui-brand);
}

.customer-empty-state {
  display: grid;
  justify-items: start;
  gap: var(--ui-space-sm);
  min-block-size: 260px;
  padding: clamp(24px, 5vw, 56px);
}

.customer-empty-state__icon {
  display: grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  border: 1px solid var(--ui-border-strong);
  border-radius: 50%;
  color: var(--ui-text-muted);
  font-family: var(--ui-font-mono);
}

.customer-empty-state h2,
.customer-empty-state p {
  margin: 0;
}

.customer-empty-state p {
  max-inline-size: 640px;
  color: var(--ui-text-secondary);
}

body.customer-application-active :where(.table-wrap, .table-shell, .ftm-table-wrap) {
  max-inline-size: 100%;
  overflow-x: auto;
}

body.customer-application-active table {
  inline-size: 100%;
  border-collapse: collapse;
  background: var(--ui-surface);
}

body.customer-application-active th {
  position: sticky;
  inset-block-start: 0;
  color: var(--ui-text-secondary);
  background: var(--ui-surface-elevated);
}

body.customer-application-active :where(th, td) {
  padding: 12px;
  border-block-end: 1px solid var(--ui-border);
  text-align: start;
}

@media (max-width: 860px) {
  body.customer-application-active > #app > .topbar {
    grid-template-columns: minmax(128px, 1fr) auto;
    gap: 8px;
    padding-inline: 16px;
  }

  body.customer-application-active .nav-strip {
    grid-column: 1 / -1;
    justify-content: flex-start;
    order: 3;
    max-inline-size: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body.customer-application-active .customer-brand-logo .ui-brand-logo__asset {
    inline-size: 142px;
    block-size: 34px;
  }
}

@media (max-width: 430px) {
  body.customer-application-active > #app > .topbar {
    position: relative;
    min-block-size: auto;
    padding-block: 10px 8px;
  }

  body.customer-application-active .language-picker > span,
  body.customer-application-active .data-chip {
    display: none;
  }

  body.customer-application-active .top-actions :where(button, a, select) {
    min-block-size: 36px;
  }

  body.customer-application-active .nav-link {
    min-block-size: 36px;
    padding: 9px 11px;
    font-size: 0.8125rem;
  }

  body.customer-application-active :where(.dashboard, .section, .customer-operation-page, .ftm-page, .wallet-page, .identity-page) {
    inline-size: min(100% - 24px, 1280px);
  }

  body.customer-application-active :where(.dashboard > h1, .customer-page-header h1, .ftm-page-header h1, .wallet-page h1) {
    font-size: 1.75rem;
  }

  .customer-section-nav a,
  .ftm-route-nav a {
    padding-inline: 12px;
  }

  .customer-empty-state {
    min-block-size: 220px;
    padding: 24px;
  }
}