/**
 * Seven Lights customer portal — visual tokens from mixx-wakala (C:\SUPER AGENT\mixx-wakala)
 * SF Pro Display stack, #0A3D91 / #F7C600, cool gray shell #eceff2
 */

@font-face {
  font-family: "SF Pro Display";
  src: local("SF Pro Display"), local(".SF NS Display"), local("SFNSDisplay-Regular");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --app-font: "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --app-font-amount: var(--app-font);
  --app-font-size: 16px;
  --app-font-size-mobile: 0.9375rem;
  --app-line-height: 1.47;
  --app-letter-spacing: -0.022em;
  --app-bg: #eceff2;
  --app-surface: #ffffff;
  --app-surface-muted: #f8fafc;
  --app-border: rgba(10, 61, 145, 0.08);
  --app-border-strong: #e2e8f0;
  --app-text: #0f172a;
  --app-text-muted: #64748b;
  --app-brand: #0a3d91;
  --app-brand-dark: #08316f;
  --app-brand-light: #1a5bb8;
  --app-accent: #f7c600;
  --app-accent-dark: #e0a800;
  --app-brand-deep: #0a3d91;
  --app-danger: #b91c1c;
  --app-shadow-sm: 0 1px 3px rgba(10, 61, 145, 0.06);
  --app-shadow-md: 0 4px 16px rgba(10, 61, 145, 0.08);
  --app-shadow-lg: 0 8px 28px rgba(10, 61, 145, 0.12);
  --app-radius-md: 0.75rem;
  --app-radius-lg: 1rem;
  --app-radius-xl: 1rem;
  --bank-navy: #0a3d91;
  --bank-navy-mid: #114a9e;
  --bank-surface: #ffffff;
  --bank-muted: #64748b;
  --bank-amount: #ffffff;
  --mixx-app-background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(10, 61, 145, 0.12), transparent 55%),
    linear-gradient(165deg, #e8eef8 0%, #f4f7fb 42%, #eef2f7 100%);
}

html {
  font-family: var(--app-font);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.mixx-app,
.mixx-app {
  font-family: var(--app-font);
  font-size: var(--app-font-size);
  line-height: var(--app-line-height);
  letter-spacing: var(--app-letter-spacing);
  font-weight: 400;
  color: var(--app-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Global inheritance — all customer/staff pages */
.mixx-app :where(
  button, input, select, textarea, optgroup,
  .btn, .search-input, .typable-select-input, .typable-select-list, .typable-select-item
) {
  font-family: var(--app-font);
  letter-spacing: var(--app-letter-spacing);
}

.mixx-app :where(h1) {
  font-family: var(--app-font);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--app-text);
}

.mixx-app :where(h2) {
  font-family: var(--app-font);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.022em;
  color: var(--app-text);
}

.mixx-app :where(h3, h4) {
  font-family: var(--app-font);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--app-text);
}

.mixx-app :where(p, li, dd, dt, label, td, th, span, div, a, small) {
  font-family: inherit;
}

.mixx-app :where(.card-head, .bank-section-title, .home-section-title) {
  font-family: var(--app-font);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.mixx-app :where(.card-body, .list-row, .empty-state, .messages li) {
  font-size: inherit;
  line-height: var(--app-line-height);
}

.mixx-app :where(.list-row-title) {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.mixx-app :where(.list-row-meta) {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--app-text-muted);
}

.mixx-app :where(.btn, .btn-primary, .btn-cta, .btn-block) {
  font-family: var(--app-font);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.mixx-app :where(
  input[type="text"], input[type="number"], input[type="email"],
  input[type="date"], input[type="search"], input[type="password"],
  input[type="tel"], select, textarea,
  .search-input, .typable-select-input
) {
  font-size: 16px;
  line-height: 1.47;
}

body {
  font-family: var(--app-font);
  background: var(--mixx-app-background);
  color: var(--app-text);
  font-size: 16px;
  line-height: 1.47;
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.amount, .bank-hero-amount, .bank-metric-value, .bank-account-value, .summary-card .value {
  font-family: var(--app-font-amount);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.022em;
}

a { color: var(--app-brand); }
a:hover { color: var(--app-brand-light); }

/* Mixx blue sticky header */
.customer-topbar {
  background: linear-gradient(135deg, #0a3d91 0%, #114a9e 55%, #1a5bb8 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 12px rgba(10, 61, 145, 0.22);
  backdrop-filter: none;
}
.customer-topbar-brand,
.customer-topbar-title {
  color: #fff !important;
  font-weight: 600;
}
.customer-topbar-brand:hover {
  color: #f7c600 !important;
  text-decoration: none !important;
}
.customer-topbar-brand img {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.customer-topbar-action {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff !important;
  box-shadow: none;
}
.customer-topbar-action:hover {
  background: rgba(255, 255, 255, 0.24);
}

/* Staff mobile topbar — same blue header */
.mixx-app .topbar {
  background: linear-gradient(135deg, #0a3d91 0%, #114a9e 55%, #1a5bb8 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 12px rgba(10, 61, 145, 0.22);
  backdrop-filter: none;
}
.mixx-app .topbar-brand,
.mixx-app .topbar-title {
  color: #fff !important;
}
.mixx-app .topbar-brand:hover {
  color: #f7c600 !important;
}
.mixx-app .topbar-action,
.mixx-app .menu-btn {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff !important;
  box-shadow: none;
}
.mixx-app .topbar-action:hover,
.mixx-app .menu-btn:hover {
  background: rgba(255, 255, 255, 0.24);
}

.customer-main {
  padding-bottom: 6rem;
}

/* Mixx flat bottom nav */
.bank-bottom-nav-inner {
  max-width: 100%;
  min-height: 72px;
  padding: 0.25rem 0 calc(max(env(safe-area-inset-bottom), 0.25rem));
  background: rgba(255, 255, 255, 0.98);
  border: none;
  border-top: 1px solid #e2e8f0;
  border-radius: 0;
  backdrop-filter: none;
  box-shadow: none;
}
.bank-bottom-nav a {
  gap: 0.125rem;
  padding: 0.35rem 0.15rem;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0;
  color: #64748b !important;
}
@media (min-width: 640px) {
  .bank-bottom-nav a { font-size: 0.625rem; }
}
.bank-bottom-nav a.active {
  color: #0a3d91 !important;
}
.bank-bottom-nav-icon {
  font-size: 1rem;
  line-height: 1;
}

/* Mixx home hero */
.bank-hero-card {
  border-radius: 0 0 1.5rem 1.5rem;
  background: linear-gradient(to bottom right, #0a3d91, #114a9e, #1a5bb8);
  box-shadow: 0 10px 30px -12px rgba(10, 61, 145, 0.65);
  border: none;
}
.bank-greeting-label { color: rgba(255, 255, 255, 0.72); }
.bank-greeting-name { color: #fff; }
.bank-member-id {
  background: linear-gradient(145deg, #f7c600, #e0a800);
  border-color: rgba(255, 255, 255, 0.35);
  color: #0a3d91;
  font-weight: 700;
}
.bank-quick-action-icon {
  border-color: rgba(10, 61, 145, 0.1);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
.bank-quick-action-label { color: #475569; }
.home-section-title,
.bank-section-title {
  color: #0a3d91;
  font-weight: 700;
}
.home-section-link {
  color: #0a3d91 !important;
}
.home-section-link:hover {
  color: #1a5bb8 !important;
}

/* Cards — flat Mixx mobile surfaces */
.card {
  border: 1px solid rgba(10, 61, 145, 0.08);
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(10, 61, 145, 0.06);
}
.card-head {
  background: #f8fafc;
  color: #0a3d91;
  font-weight: 700;
  font-size: 0.8125rem;
}

/* Primary buttons — Mixx blue gradient */
.btn-primary {
  background: linear-gradient(135deg, #0a3d91 0%, #1a5bb8 100%);
  box-shadow: 0 4px 16px rgba(10, 61, 145, 0.22);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #08316f 0%, #0a3d91 100%);
}
.btn-cta {
  background: linear-gradient(135deg, #0a3d91 0%, #1a5bb8 100%);
}

input:focus, select:focus, textarea:focus,
.search-input:focus, .typable-select-input:focus {
  border-color: rgba(10, 61, 145, 0.45);
  box-shadow: 0 0 0 3px rgba(10, 61, 145, 0.12);
}
.typable-select-item:hover, .typable-select-item.highlight {
  background: #eff6ff;
  color: #0a3d91;
}

.bank-status-banner--good {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-color: rgba(10, 61, 145, 0.15);
}

@media (max-width: 767px) {
  body.mixx-app,
  .mixx-app {
    font-size: var(--app-font-size-mobile);
    line-height: var(--app-line-height);
    letter-spacing: var(--app-letter-spacing);
  }

  .mixx-app :where(h1) { font-size: 1.125rem; }
  .mixx-app :where(h2) { font-size: 1rem; }
  .mixx-app :where(h3, h4) { font-size: 0.875rem; }
  .mixx-app :where(.list-row-title) { font-size: 0.875rem; }
  .mixx-app :where(.list-row-meta) { font-size: 0.75rem; }
  .mixx-app :where(.btn, .btn-primary, .btn-cta) { font-size: 0.8125rem; }

  body {
    font-size: 0.9375rem;
    line-height: 1.47;
    letter-spacing: -0.022em;
  }
  .customer-topbar-inner {
    min-height: 56px;
    max-width: 100%;
  }
  .customer-main {
    padding: 0.75rem 0.75rem 6rem;
  }
  .bank-hero-card {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    border-radius: 0 0 1.25rem 1.25rem;
  }
  .card {
    border-radius: 1rem;
  }
}

/* Shared legacy teal → Mixx blue */
.mixx-app main [style*="#0f766e"],
.mixx-app main [style*="#0d9488"],
.customer-main [style*="#0f766e"],
.customer-main [style*="#0d9488"] {
  color: #0a3d91 !important;
}
.mixx-app main [style*="background:#f0fdfa"],
.mixx-app main [style*="background: #f0fdfa"],
.customer-main [style*="background:#f0fdfa"],
.customer-main [style*="background: #f0fdfa"] {
  background: #eff6ff !important;
  border-color: rgba(10, 61, 145, 0.15) !important;
}