/* ============================================
   BÄRSPÅR — Stilren override
   Lägg som SISTA stylesheet i index.html:
   <link rel="stylesheet" href="styles/stilren.css">
   + byt Inter mot Instrument Sans i Google Fonts-länken:
   family=Instrument+Sans:wght@400;500;600;700
   ============================================ */

:root {
  /* Typsnitt: Inter → Instrument Sans (mindre "AI-default") */
  --font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Stramare radier — en skala, inga bento-hörn */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 14px;

  /* Skuggor nästan bort — hairlines gör jobbet */
  --shadow-sm: none;
  --shadow-md: 0 2px 8px rgba(15,42,32,.06);
  --shadow-lg: 0 8px 30px rgba(15,42,32,.10);
  --shadow-nav: 0 10px 30px rgba(15,42,32,.25);

  /* Ytor: något varmare panel, lugnare bg */
  --panel: #FCFBF7;
  --surface: #F7F5EF;
  --bg: #EFEBE0;
}

/* --- Primärknappar: mörkgrön med crème-text i stället för lime-glöd --- */
.btn-primary,
#auth-page .auth-btn {
  background: var(--primary);
  color: #F4EBD7;
  border-color: var(--primary);
  box-shadow: none;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.btn-primary:hover, #auth-page .auth-btn:hover { background: var(--primary-600); filter: none; }
.btn-primary:active, #auth-page .auth-btn:active { background: var(--forest-800); border-color: var(--forest-800); }

/* --- Auth: platt bakgrund, hairline-kort, flik-understrykning --- */
#auth-page { background: var(--bg); }
#auth-page .auth-card {
  border-radius: 14px;
  box-shadow: none;
  border-color: #DDD7C8;
  background: var(--panel);
}
#auth-page .auth-tabs { background: transparent; border-radius: 0; padding: 0; border-bottom: 1px solid #E2DCCD; gap: 20px; }
#auth-page .auth-tab { border-radius: 0; padding: 10px 2px; flex: 0 0 auto; color: var(--ink-3); }
#auth-page .auth-tab.active {
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  border-bottom: 2px solid var(--primary);
  margin-bottom: -1px;
}
#auth-page .install-btn { border-width: 1px; border-color: #CFC9B8; background: transparent; }

/* --- Header: kantiga små element i stället för pillformer --- */
.brand-mark { background: transparent; padding: 0; border-radius: 0; }
.header-user button { border-radius: 6px; }
#picker-code-badge {
  background: transparent !important;
  color: var(--primary) !important;
  border: 1px solid var(--primary);
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 0.8rem !important;
  letter-spacing: 1px !important;
}
#picker-code-badge::before { color: var(--primary); opacity: 0.6; }

/* --- Bottom nav: lugnare — ingen lime-blob, ingen studs --- */
nav { border-radius: 12px; background: var(--forest-800); padding: 6px; border: none; }
nav button { border-radius: 8px; color: #8FAA9C; }
nav button.active { background: transparent; color: #fff; }
nav button.active::after {
  content: "";
  position: absolute;
  bottom: 2px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
}
nav button.active .nav-icon { animation: none; }

/* --- Bottom sheet: ljus grip, mindre radie --- */
.bottom-sheet { border-radius: 14px 14px 0 0; box-shadow: 0 -8px 30px rgba(15,42,32,0.08); }
.sheet-grip { background: var(--panel); height: 24px; }
.bottom-sheet-handle { background: #CFC9B8; width: 40px; height: 4px; }

/* --- Karta: bort med glassmorfism --- */
.gps-status, .map-hint {
  background: var(--panel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 6px;
  box-shadow: none;
  border-color: #DDD7C8;
}
.gps-dot.active { box-shadow: none; }
.map-gps-btn { border-radius: 8px; box-shadow: none; border-color: #DDD7C8; background: var(--panel); }

/* --- Bärväljare: outline-vald i stället för mörk fylld med lime --- */
.berry-option { border-radius: 8px; border-width: 1px; }
.berry-option.selected {
  background: #EDF3EA;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  box-shadow: none;
}
.berry-option.selected::after { display: none; }

/* --- Statistik: enhetlig radie, inga bento-hörn, ingen lime-prick --- */
.stats-grid { gap: 8px; }
.stat-card { border-radius: 12px; box-shadow: none; }
.stats-grid .stat-card:first-child {
  background: var(--forest-800);
  border-radius: 12px;
  box-shadow: none;
  min-height: 188px;
}
.stats-grid .stat-card:first-child .stat-value { font-size: 3.8rem; font-weight: 600; letter-spacing: -0.04em; }
.stats-grid .stat-card:first-child .stat-value::after { display: none; }
.stats-grid .stat-card:first-child .stat-label {
  color: #A9C2B5;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
}
.stats-grid .stat-card:nth-child(2),
.stats-grid .stat-card:nth-child(3) {
  background: var(--panel);
  border: 1px solid #DDD7C8;
  border-radius: 12px;
}
.stats-grid .stat-card:nth-child(2) .stat-value,
.stats-grid .stat-card:nth-child(3) .stat-value { font-size: 1.8rem; font-weight: 600; letter-spacing: -0.02em; }
.stat-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.66rem;
  line-height: 1.4;
  color: var(--ink-3);
  order: -1;
  margin-top: 0;
  margin-bottom: 6px;
}

/* --- Historik: hairlines, diskreta statusar --- */
.log-entry { border-radius: 10px; box-shadow: none; background: var(--panel); }
.log-entry.submitted { background: #F1F6EF; border-color: #BFD4C4; }
.sync-badge { background: transparent !important; padding: 0; text-transform: none; letter-spacing: 0; font-size: 0.74rem; }
.log-submitted-badge { background: transparent; padding: 0; }
.log-toggle-buttons { background: transparent; border: none; border-bottom: 1px solid #E2DCCD; border-radius: 0; padding: 0; gap: 20px; }
.log-toggle-btn { flex: 0 0 auto; border-radius: 0; padding: 9px 2px; color: var(--ink-3); }
.log-toggle-btn.active {
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  border-bottom: 2px solid var(--primary);
  margin-bottom: -1px;
}

/* --- Formulär: mindre radie, tunnare fokus-ring --- */
input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select,
#auth-page .auth-input, #auth-page .auth-select { border-radius: 8px; }
input:focus, textarea:focus, select:focus,
#auth-page .auth-input:focus { box-shadow: 0 0 0 2px rgba(45,106,79,0.14); }

/* --- Sidanimation: tona bara, ingen glidning --- */
.page.active { animation: none; }