/**
 * myTrackx — Framework7 app theme (Phase 0)
 *
 * Framework7 generates all colour shades from the `colors.primary` value in
 * app.js, so this file only holds brand-level overrides that aren't covered by
 * that: the font family and a couple of cosmetic touches. Most theming is done
 * via Framework7 CSS custom properties (--f7-*), which makes re-skinning cheap.
 */

:root {
  /* Brand font — TrackX uses Proxima Nova (Adobe Typekit). Mulish is the
     closest free fallback when the Typekit kit isn't served to this domain. */
  --f7-font-family: 'proxima-nova', 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* TrackX brand blue (#0274be) — set the exact hex. Framework7 v9's colour
     engine desaturates custom `colors.primary`, so we override its theme-colour
     variables directly (!important beats F7's runtime-injected palette).
     shade = pressed/active, tint = hover. */
  --f7-theme-color: #0274be !important;
  --f7-theme-color-rgb: 2, 116, 190 !important;
  --f7-theme-color-shade: #015f9b !important;
  --f7-theme-color-tint: #2b8fd0 !important;

  /* Slightly rounder, app-like corners on cards/blocks. */
  --f7-block-strong-border-radius: 14px;

  /* Bottom tab bar: comfortable touch target. */
  --f7-tabbar-labels-height: 60px;
}

/* Keep the bottom tab bar clear of the iOS home indicator. */
.toolbar-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Brand accent on the active tab label/icon (uses the theme colour). */
.tabbar .tab-link-active {
  color: var(--f7-theme-color);
}

/* Phase-0 placeholder badge so it's obvious these screens are scaffolds. */
.phase0-note {
  font-size: 13px;
  opacity: 0.7;
}

/* Brand wordmark (login/forgot): dark logo on light, white logo in dark mode. */
.brand-logo { height: 40px; width: auto; }
.brand-logo-white { display: none; }
@media (prefers-color-scheme: dark) {
  .brand-logo-color { display: none; }
  .brand-logo-white { display: inline-block; }
}
:root.dark .brand-logo-color, .dark .brand-logo-color { display: none; }
:root.dark .brand-logo-white, .dark .brand-logo-white { display: inline-block; }

/* Login/forgot screen titles: keep long Dutch titles from clipping on narrow phones. */
.login-screen-title {
  padding-left: 16px;
  padding-right: 16px;
  font-size: 24px;
  line-height: 1.25;
  overflow-wrap: break-word;
}

/* Dashboard content from the API (HTML blocks) — comfortable reading rhythm. */
#dash-content p:last-child { margin-bottom: 0; }
#dash-content .block-strong :where(h1, h2, h3, h4, h5) { margin-top: 0; }

/* Simple skeleton shimmer for loading states (add .skeleton to a block). */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--f7-list-item-border-color, #e5e7eb);
  border-radius: 10px;
  min-height: 56px;
}
.skeleton::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation: skeleton-shimmer 1.2s infinite;
}
@keyframes skeleton-shimmer { 100% { transform: translateX(100%); } }

/* Form validation error state ($FORM.validate adds .form-field-invalid on the <li>). */
.list .form-field-invalid .item-input-wrap::after,
.list .form-field-invalid .item-inner::after { background: var(--f7-theme-color, #eb5757); }
.list .form-field-invalid .item-title.item-label { color: #eb5757; }
.list .form-field-invalid input,
.list .form-field-invalid textarea,
.list .form-field-invalid select { color: #eb5757; }
.list .form-field-invalid .item-input-wrap input::placeholder { color: #eb5757; opacity: .6; }