/* ==========================================================================
   THEME.CSS — Global Design Tokens & Theme Configuration (Light & Dark Mode)
   
   THE SINGLE PLACE FOR ALL CUSTOMIZATION:
     1. Corner Radii:  --radius-base (all cards, buttons, modals, badges)
     2. Typography:    --font-base   (application-wide font stack)
     3. Base Neutrals: --ink-50 .. --ink-950 (warm stone, slate, zinc, etc.)
     4. Brand Color:   --brand-primary
     5. Sport Colors:  --sport-running, --sport-workout, etc.
   ========================================================================== */

[x-cloak] {
  display: none !important;
}

.htmx-indicator {
  display: none !important;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: flex !important;
}

/* Tabler Icons: enforce centered flexbox metrics and neutral line-height */
.ti {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
  text-align: center;
  flex-shrink: 0;
}

:root {
  /* --------------------------------------------------------------------------
     1. CORNER RADII & GEOMETRY (Change here to adjust roundness everywhere)
     -------------------------------------------------------------------------- */
  --radius-base: 0.5rem;  /* 8px - slightly rounded (default). Try: 0.25rem, 0.75rem, 1rem */

  /* --------------------------------------------------------------------------
     2. TYPOGRAPHY & FONTS (Change here for application-wide font)
     -------------------------------------------------------------------------- */
  --font-base: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* --------------------------------------------------------------------------
     3. APPLICATION BRAND COLORS
     -------------------------------------------------------------------------- */
  --brand-primary:        #10b981;  /* Main accent */
  --brand-primary-hover:  #46e3ae;  /* Button hover / active states */
  --brand-primary-subtle: color-mix(in srgb, var(--brand-primary) 14%, transparent);  /* Auto-derived soft tint */
  --brand-primary-border: color-mix(in srgb, var(--brand-primary) 28%, transparent);  /* Auto-derived border highlight */

  /* --------------------------------------------------------------------------
     4. BASE NEUTRAL PALETTE: "ink"
     Change the neutral tone of the ENTIRE APP here.
     Preset palettes provided below (Stone, Slate, Zinc, Neutral).
     -------------------------------------------------------------------------- */
  /* Preset palettes for search & replace */
  --stone-50:  #fafaf9; --stone-100: #f5f5f4; --stone-200: #e7e5e4; --stone-300: #d6d3d1;
  --stone-400: #a8a29e; --stone-500: #78716c; --stone-600: #57534e; --stone-700: #44403c;
  --stone-800: #292524; --stone-900: #1c1917; --stone-950: #0c0a09;

  --slate-50:  #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1;
  --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155;
  --slate-800: #1e293b; --slate-900: #0f172a; --slate-950: #020617;

  --zinc-50:   #fafafa; --zinc-100:  #f4f4f5; --zinc-200:  #e4e4e7; --zinc-300:  #d4d4d8;
  --zinc-400:  #a1a1aa; --zinc-500:  #71717a; --zinc-600:  #52525b; --zinc-700:  #3f3f46;
  --zinc-800:  #27272a; --zinc-900:  #18181b; --zinc-950:  #09090b;

  --neutral-50: #fafafa; --neutral-100: #f5f5f5; --neutral-200: #e5e5e5; --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3; --neutral-500: #737373; --neutral-600: #525252; --neutral-700: #404040;
  --neutral-800: #262626; --neutral-900: #171717; --neutral-950: #0a0a0a;

  /* --- ACTIVE NEUTRAL PALETTE: "ink" ---
     To change tone, search and replace "stone" below with "slate", "zinc", or "neutral" */
  --ink-50:  var(--stone-50);
  --ink-100: var(--stone-100);
  --ink-200: var(--stone-200);
  --ink-300: var(--stone-300);
  --ink-400: var(--stone-400);
  --ink-500: var(--stone-500);
  --ink-600: var(--stone-600);
  --ink-700: var(--stone-700);
  --ink-800: var(--stone-800);
  --ink-900: var(--stone-900);
  --ink-950: var(--stone-950);

  /* --------------------------------------------------------------------------
     5. SPORT SIGNATURE COLORS
     -------------------------------------------------------------------------- */
  --sport-walking:   #10b981;  /* Emerald */
  --sport-hiking:    #d97706;  /* Amber */
  --sport-running:   #f97316;  /* Orange */
  --sport-cycling:   #0284c7;  /* Sky Blue */
  --sport-swimming:  #06b6d4;  /* Cyan */
  --sport-workout:   #ef4444;  /* Red */
  --sport-skiing:    #6366f1;  /* Indigo */

  /* --------------------------------------------------------------------------
     5b. DEVICE & API UPLOAD STATUS COLORS
     -------------------------------------------------------------------------- */
  --status-success: #10b981;          /* Stored + parsed */
  --status-pending: #f59e0b;          /* Queued / awaiting user validation */
  --status-error:   #ef4444;          /* Parse failure, rejection, expiry */
  --status-info:    #0284c7;          /* Duplicate / informational */
  --status-neutral: var(--ink-400);   /* Revoked / inactive */

  /* --------------------------------------------------------------------------
     6. MAP & GPS ROUTE VISUALIZER COLORS
     -------------------------------------------------------------------------- */
  --map-route-default:   var(--brand-primary);
  --map-marker-start:    #10b981;  /* Green start pin */
  --map-marker-finish:   #ef4444;  /* Red finish pin */
  --map-marker-pause:    #f59e0b;  /* Amber pause pin */
  --map-marker-lap:      #0284c7;  /* Sky Blue lap split pin */
  --map-cursor-hover:    #f59e0b;  /* Crosshair elevation scrub cursor */
  --chart-elevation-fill: rgba(249, 115, 22, 0.15);

  /* --------------------------------------------------------------------------
     7. APP THEME SHORTCUTS (Derived from ink)
     -------------------------------------------------------------------------- */
  --bg-app:          var(--ink-50);
  --bg-card:         #ffffff;
  --bg-subtle:       var(--ink-100);
  --border-card:     var(--ink-200);
  --text-main:       var(--ink-900);
  --text-muted:      var(--ink-500);
}

/* ----------------------------------------------------------------------------
   8. DARK MODE OVERRIDES (Activated by <html class="dark">)
   ---------------------------------------------------------------------------- */
html.dark {
  --brand-primary-subtle: color-mix(in srgb, var(--brand-primary) 18%, transparent);
  --brand-primary-border: color-mix(in srgb, var(--brand-primary) 36%, transparent);

  --bg-app:          var(--ink-950);
  --bg-card:         var(--ink-900);
  --bg-subtle:       var(--ink-800);
  --border-card:     var(--ink-800);
  --text-main:       var(--ink-50);
  --text-muted:      var(--ink-400);
}

/* ==========================================================================
   BRAND THEME UTILITIES (Driven directly by --brand-primary in theme.css)
   ========================================================================== */
.btn-primary {
  background-color: var(--brand-primary) !important;
  color: #ffffff !important;
}
.btn-primary:hover {
  background-color: var(--brand-primary-hover) !important;
}
.text-brand-primary {
  color: var(--brand-primary) !important;
}
html.dark .text-brand-primary {
  color: var(--brand-primary-hover, var(--brand-primary)) !important;
}
.brand-subtle-badge {
  color: var(--brand-primary) !important;
  background-color: var(--brand-primary-subtle) !important;
  border-color: var(--brand-primary-border) !important;
}
.brand-subtle-box {
  background-color: var(--brand-primary-subtle) !important;
  border-color: var(--brand-primary-border) !important;
  color: var(--brand-primary) !important;
}
.brand-active-nav {
  background-color: var(--brand-primary-subtle) !important;
  border-color: var(--brand-primary-border) !important;
  color: var(--brand-primary) !important;
}
html.dark .brand-active-nav {
  color: var(--brand-primary-hover, var(--brand-primary)) !important;
}
.brand-focus:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 2px var(--brand-primary) !important;
}

/* ==========================================================================
   SPORT BADGE UTILITIES (Auto-computed from above variables)
   ========================================================================== */
.sport-badge-walking  { color: var(--sport-walking);  background-color: color-mix(in srgb, var(--sport-walking) 14%, transparent);  border-color: color-mix(in srgb, var(--sport-walking) 28%, transparent); }
.sport-badge-hiking   { color: var(--sport-hiking);   background-color: color-mix(in srgb, var(--sport-hiking) 14%, transparent);   border-color: color-mix(in srgb, var(--sport-hiking) 28%, transparent); }
.sport-badge-running  { color: var(--sport-running);  background-color: color-mix(in srgb, var(--sport-running) 14%, transparent);  border-color: color-mix(in srgb, var(--sport-running) 28%, transparent); }
.sport-badge-cycling  { color: var(--sport-cycling);  background-color: color-mix(in srgb, var(--sport-cycling) 14%, transparent);  border-color: color-mix(in srgb, var(--sport-cycling) 28%, transparent); }
.sport-badge-swimming { color: var(--sport-swimming); background-color: color-mix(in srgb, var(--sport-swimming) 14%, transparent); border-color: color-mix(in srgb, var(--sport-swimming) 28%, transparent); }
.sport-badge-workout  { color: var(--sport-workout);  background-color: color-mix(in srgb, var(--sport-workout) 14%, transparent);  border-color: color-mix(in srgb, var(--sport-workout) 28%, transparent); }
.sport-badge-skiing   { color: var(--sport-skiing);   background-color: color-mix(in srgb, var(--sport-skiing) 14%, transparent);   border-color: color-mix(in srgb, var(--sport-skiing) 28%, transparent); }

/* ==========================================================================
   DEVICE & API UPLOAD STATUS BADGES (Auto-computed from above variables)
   Single source of truth for the devices page + API upload log.
   ========================================================================== */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-base);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.status-badge-success { color: var(--status-success); background-color: color-mix(in srgb, var(--status-success) 14%, transparent); border-color: color-mix(in srgb, var(--status-success) 28%, transparent); }
.status-badge-pending { color: var(--status-pending); background-color: color-mix(in srgb, var(--status-pending) 14%, transparent); border-color: color-mix(in srgb, var(--status-pending) 28%, transparent); }
.status-badge-error   { color: var(--status-error);   background-color: color-mix(in srgb, var(--status-error) 14%, transparent);   border-color: color-mix(in srgb, var(--status-error) 28%, transparent); }
.status-badge-info    { color: var(--status-info);    background-color: color-mix(in srgb, var(--status-info) 14%, transparent);    border-color: color-mix(in srgb, var(--status-info) 28%, transparent); }
.status-badge-neutral { color: var(--status-neutral); background-color: color-mix(in srgb, var(--status-neutral) 16%, transparent); border-color: color-mix(in srgb, var(--status-neutral) 30%, transparent); }

/* Status FILTER TABS (API upload log): same tokens, tab geometry instead of a pill. */
.status-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.status-tab-count {
  background-color: color-mix(in srgb, currentColor 16%, transparent);
  color: inherit;
}
.status-tab-neutral { color: var(--text-muted); }
.status-tab-neutral:hover { color: var(--text-main); }
.status-tab-neutral.is-active {
  color: var(--text-main);
  background-color: var(--bg-card);
  border-color: var(--border-card);
  font-weight: 700;
}
.status-tab-success { color: var(--text-muted); }
.status-tab-success:hover { color: var(--status-success); }
.status-tab-pending { color: var(--text-muted); }
.status-tab-pending:hover { color: var(--status-pending); }
.status-tab-error { color: var(--text-muted); }
.status-tab-error:hover { color: var(--status-error); }
.status-tab-info { color: var(--text-muted); }
.status-tab-info:hover { color: var(--status-info); }
.status-tab-success.is-active {
  color: var(--status-success);
  background-color: color-mix(in srgb, var(--status-success) 14%, transparent);
  border-color: color-mix(in srgb, var(--status-success) 28%, transparent);
  font-weight: 700;
}
.status-tab-pending.is-active {
  color: var(--status-pending);
  background-color: color-mix(in srgb, var(--status-pending) 14%, transparent);
  border-color: color-mix(in srgb, var(--status-pending) 28%, transparent);
  font-weight: 700;
}
.status-tab-error.is-active {
  color: var(--status-error);
  background-color: color-mix(in srgb, var(--status-error) 14%, transparent);
  border-color: color-mix(in srgb, var(--status-error) 28%, transparent);
  font-weight: 700;
}
.status-tab-info.is-active {
  color: var(--status-info);
  background-color: color-mix(in srgb, var(--status-info) 14%, transparent);
  border-color: color-mix(in srgb, var(--status-info) 28%, transparent);
  font-weight: 700;
}

/* Status tab icons keep their own status colour in every state, so the tab strip
   stays scannable while inactive labels stay muted. */
.status-tab-icon { color: var(--text-muted); }
.status-tab-success .status-tab-icon { color: var(--status-success); }
.status-tab-pending .status-tab-icon { color: var(--status-pending); }
.status-tab-error .status-tab-icon { color: var(--status-error); }
.status-tab-info .status-tab-icon { color: var(--status-info); }

/* Lap & Pause Marker & Button Theme Utilities */
.map-marker-lap-pin {
  background-color: var(--map-marker-lap);
}
.lap-badge {
  color: var(--map-marker-lap);
  background-color: color-mix(in srgb, var(--map-marker-lap) 15%, transparent);
}
.lap-btn {
  color: var(--map-marker-lap);
  background-color: color-mix(in srgb, var(--map-marker-lap) 10%, transparent);
  border-color: color-mix(in srgb, var(--map-marker-lap) 28%, transparent);
}
.lap-btn:hover {
  background-color: color-mix(in srgb, var(--map-marker-lap) 22%, transparent);
}

.map-marker-pause-pin {
  background-color: var(--map-marker-pause);
}
.pause-badge {
  color: var(--map-marker-pause);
  background-color: color-mix(in srgb, var(--map-marker-pause) 15%, transparent);
}
.pause-btn {
  color: var(--map-marker-pause);
  background-color: color-mix(in srgb, var(--map-marker-pause) 10%, transparent);
  border-color: color-mix(in srgb, var(--map-marker-pause) 28%, transparent);
}
.pause-btn:hover {
  background-color: color-mix(in srgb, var(--map-marker-pause) 22%, transparent);
}

/* ==========================================================================
   CIRCLE THEMING & SWATCH UTILITIES
   ========================================================================== */
.circle-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
  border-radius: var(--radius-base);
  transition: all 0.15s ease-in-out;
}
.circle-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-base);
  flex-shrink: 0;
}
.circle-swatches-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
}
.circle-swatch {
  height: 2.5rem;
  width: 100%;
  border-radius: var(--radius-base, 0.5rem);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.circle-swatch:hover {
  transform: scale(1.05);
}

/* ==========================================================================
   MAPLIBRE POPUP THEME INTEGRATION (Light & Dark Mode)
   ========================================================================== */
.maplibregl-popup,
.theme-popup {
  z-index: 30;
}

html .maplibregl-popup-content,
.theme-popup .maplibregl-popup-content {
  background: var(--bg-card) !important;
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-base) !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
  padding: 0.5rem 0.75rem !important;
  font-family: var(--font-base) !important;
}

html.dark .maplibregl-popup-content,
html.dark .theme-popup .maplibregl-popup-content {
  background: var(--ink-900) !important;
  background-color: var(--ink-900) !important;
  color: var(--ink-50) !important;
  border-color: var(--ink-800) !important;
}

.maplibregl-popup-close-button,
.theme-popup .maplibregl-popup-close-button {
  color: var(--text-muted) !important;
  padding: 2px 6px !important;
  border-radius: var(--radius-base) !important;
  font-size: 0.9rem !important;
}

.maplibregl-popup-close-button:hover,
.theme-popup .maplibregl-popup-close-button:hover {
  background: var(--bg-subtle) !important;
  color: var(--text-main) !important;
}

/* Light mode tips */
html .maplibregl-popup-anchor-top .maplibregl-popup-tip,
html .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
html .maplibregl-popup-anchor-top-right .maplibregl-popup-tip,
.theme-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.theme-popup.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.theme-popup.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
  border-bottom-color: var(--bg-card) !important;
}

html .maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
html .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
html .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip,
.theme-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.theme-popup.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.theme-popup.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
  border-top-color: var(--bg-card) !important;
}

html .maplibregl-popup-anchor-left .maplibregl-popup-tip,
.theme-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip {
  border-right-color: var(--bg-card) !important;
}

html .maplibregl-popup-anchor-right .maplibregl-popup-tip,
.theme-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip {
  border-left-color: var(--bg-card) !important;
}

/* Dark mode tips */
html.dark .maplibregl-popup-anchor-top .maplibregl-popup-tip,
html.dark .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
html.dark .maplibregl-popup-anchor-top-right .maplibregl-popup-tip,
html.dark .theme-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip,
html.dark .theme-popup.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
html.dark .theme-popup.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
  border-bottom-color: var(--ink-900) !important;
}

html.dark .maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
html.dark .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
html.dark .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip,
html.dark .theme-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
html.dark .theme-popup.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
html.dark .theme-popup.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
  border-top-color: var(--ink-900) !important;
}

html.dark .maplibregl-popup-anchor-left .maplibregl-popup-tip,
html.dark .theme-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip {
  border-right-color: var(--ink-900) !important;
}

html.dark .maplibregl-popup-anchor-right .maplibregl-popup-tip,
html.dark .theme-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip {
  border-left-color: var(--ink-900) !important;
}

/* ==========================================================================
   MAP CONTROLS & MAPLIBRE NAVIGATION THEME INTEGRATION
   ========================================================================== */
.map-ctrl-pill,
.maplibregl-ctrl-group {
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid var(--border-card, #e7e5e4) !important;
  border-radius: var(--radius-base) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
  overflow: hidden !important;
}

.dark .map-ctrl-pill,
html.dark .map-ctrl-pill,
.dark .maplibregl-ctrl-group,
html.dark .maplibregl-ctrl-group {
  background-color: rgba(28, 25, 23, 0.95) !important;
  border-color: var(--ink-800, #292524) !important;
}

.map-ctrl-btn {
  color: var(--ink-700, #44403c);
  background-color: transparent;
}
.map-ctrl-btn:hover {
  color: var(--ink-900, #1c1917);
  background-color: var(--ink-100, #f5f5f4);
}
.dark .map-ctrl-btn,
html.dark .map-ctrl-btn {
  color: var(--ink-300, #d6d3d1);
}
.dark .map-ctrl-btn:hover,
html.dark .map-ctrl-btn:hover {
  color: #ffffff;
  background-color: var(--ink-800, #292524);
}


.maplibregl-ctrl-group button {
  width: 30px !important;
  height: 30px !important;
  background-color: transparent !important;
  border: 0 !important;
  outline: none !important;
  transition: background-color 0.15s ease, opacity 0.15s ease !important;
  cursor: pointer !important;
}

.maplibregl-ctrl-group button + button {
  border-top: 1px solid var(--border-card) !important;
}

.dark .maplibregl-ctrl-group button + button,
html.dark .maplibregl-ctrl-group button + button {
  border-top: 1px solid var(--ink-800) !important;
}

.maplibregl-ctrl-group button:hover {
  background-color: var(--ink-100) !important;
}

.dark .maplibregl-ctrl-group button:hover,
html.dark .maplibregl-ctrl-group button:hover {
  background-color: var(--ink-800) !important;
}

.maplibregl-ctrl-group button .maplibregl-ctrl-icon {
  opacity: 0.75 !important;
}

.maplibregl-ctrl-group button:hover .maplibregl-ctrl-icon {
  opacity: 1 !important;
}

.dark .maplibregl-ctrl-group button .maplibregl-ctrl-icon,
html.dark .maplibregl-ctrl-group button .maplibregl-ctrl-icon {
  filter: invert(1) brightness(1.8) !important;
  opacity: 0.85 !important;
}