/*
 * Framework7 theming.
 *
 * F7 ships its own colour system; rather than fight it, our validated tokens
 * are mapped onto its CSS variables so its chrome (navbars, toolbars, lists,
 * sheets) and our own charts stay one design. The series colours themselves
 * are untouched — they were validated against these exact surfaces.
 */

:root {
  --f7-font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Roboto, sans-serif;

  --f7-theme-color: var(--accent);
  --f7-theme-color-rgb: 42, 120, 214;
  --f7-theme-color-shade: var(--accent-solid);
  --f7-theme-color-tint: var(--accent);

  --f7-page-bg-color: var(--surface-0);
  --f7-bars-bg-color: color-mix(in srgb, var(--surface-0) 84%, transparent);
  --f7-bars-border-color: var(--border);
  --f7-bars-text-color: var(--text-primary);
  --f7-bars-link-color: var(--accent);

  --f7-text-color: var(--text-primary);
  --f7-block-title-text-color: var(--text-muted);
  --f7-block-strong-bg-color: var(--surface-1);

  --f7-list-bg-color: var(--surface-1);
  --f7-list-border-color: var(--border);
  --f7-list-item-border-color: var(--border);
  --f7-list-item-title-text-color: var(--text-primary);
  --f7-list-item-after-text-color: var(--text-secondary);
  --f7-list-item-footer-text-color: var(--text-muted);
  --f7-list-chevron-icon-color: var(--text-muted);

  --f7-sheet-bg-color: var(--surface-1);
  --f7-sheet-border-color: var(--border);
  --f7-popup-bg-color: var(--surface-0);

  --f7-toolbar-bg-color: color-mix(in srgb, var(--surface-2) 86%, transparent);
  --f7-toolbar-border-color: var(--border);
  --f7-tabbar-link-inactive-color: var(--text-muted);
  --f7-tabbar-link-active-color: var(--accent);

  --f7-navbar-title-font-weight: 660;
  --f7-navbar-height: 48px;
  --f7-safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

/* F7 switches its own dark styles on a .dark class; ours keys off
   data-theme / prefers-color-scheme, so the class is applied in tandem. */
.dark {
  --f7-theme-color-rgb: 57, 135, 229;
}

/* Chrome ------------------------------------------------------------------- */
.navbar,
.toolbar {
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
}

.navbar-bg::after,
.toolbar::before,
.toolbar::after {
  background-color: var(--border);
}

.page-content {
  background: var(--surface-0);
}

/* Our content sits in a centred column on wide screens so a desktop browser
   does not stretch phone-shaped cards across 2000px. */
.page-content > .page-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1rem calc(2rem + var(--f7-safe-area-bottom));
  width: 100%;
}

@media (min-width: 861px) {
  .page-content > .page-inner {
    padding: 1.5rem 1.75rem 3rem;
  }
}

/* Large title, the way iOS does it. */
.title-large-text {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

/* Sheets/dialogs pick up the app's radius rather than F7's default. */
.sheet-modal,
.dialog {
  border-radius: 18px 18px 0 0;
}

.dialog {
  border-radius: 16px;
  background: var(--surface-1);
}