/* ═══════════════════════════════════════════
   Herbtech – Signal Mono Design System
   Monochrome + single accent (#FF5C35)
   ═══════════════════════════════════════════ */

:root {
  --bg:         #0A0A0A;
  --surface:    #111111;
  --surface2:   #1A1A1A;
  --surface3:   #222222;
  --border:     #2A2A2A;
  --border-l:   #333333;
  --accent:     #FF5C35;
  --accent-h:   #E04E2B;
  --success:    #34D399;
  --danger:     #EF4444;
  --warning:    #FBBF24;
  --text:       #E5E5E5;
  --text-s:     #A0A0A0;
  --text-m:     #666666;
  --radius:     8px;
  --radius-sm:  4px;
  --radius-lg:  8px;
  --shadow:     0 4px 24px rgba(0,0,0,.4);

  /* Legacy aliases (used by timer/ernaehrung/training CSS) */
  --color-bg:        var(--bg);
  --color-surface:   var(--surface);
  --color-surface2:  var(--surface2);
  --color-surface3:  var(--surface3);
  --color-border:    var(--border);
  --color-border-l:  var(--border-l);
  --color-text:      var(--text);
  --color-muted:     var(--text-m);
  --color-muted-l:   var(--text-s);
  --color-primary:   var(--accent);
  --color-accent:    var(--accent);
  --gradient-primary: var(--accent);
}

[data-theme="light"] {
  --bg:         #F5F5F5;
  --surface:    #FFFFFF;
  --surface2:   #F0F0F0;
  --surface3:   #E8E8E8;
  --border:     #E0E0E0;
  --border-l:   #D0D0D0;
  --text:       #0A0A0A;
  --text-s:     #555555;
  --text-m:     #999999;
  --shadow:     0 4px 24px rgba(0,0,0,.08);
}

/* ── Reset ──────────────────────────────── */
*,*::before,*::after { box-sizing:border-box;margin:0;padding:0; }
html { font-size:16px;scroll-behavior:smooth; }
body {
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--accent);text-decoration:none;transition:opacity .15s; }
a:hover { opacity:.8; }

/* ── Animations (minimal) ───────────────── */
@keyframes fadeUp {
  from { opacity:0;transform:translateY(12px); }
  to   { opacity:1;transform:translateY(0); }
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.animate-fade-up { animation:fadeUp .4s ease both; }
.anim-d1 { animation-delay:.04s; }
.anim-d2 { animation-delay:.08s; }
.anim-d3 { animation-delay:.12s; }
.anim-d4 { animation-delay:.16s; }

/* ── Layout ─────────────────────────────── */
.wrapper { max-width:960px;margin:0 auto;padding:0 1rem; }
.page-content { padding:1.5rem 0 4rem; }

/* ── Navbar ─────────────────────────────── */
.navbar {
  background:var(--bg);
  border-bottom:1px solid var(--border);
  padding:0 1rem;
  position:sticky;top:0;z-index:200;
}
.navbar-inner {
  max-width:960px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  height:56px;gap:.75rem;
}
.navbar-brand {
  display:flex;align-items:center;gap:.5rem;
  font-size:1.1rem;font-weight:800;color:var(--text);
  letter-spacing:-.5px;text-decoration:none;flex-shrink:0;
}
.navbar-brand:hover { opacity:.85;color:var(--text); }
.navbar-logo { width:28px;height:28px;flex-shrink:0; }
.brand-tech { color:var(--accent); }
.brand-herb { color:var(--text); }

/* Desktop nav */
.navbar-nav { display:none;align-items:center;gap:0;list-style:none; }
.navbar-nav a {
  color:var(--text-m);padding:.45rem .85rem;border-radius:var(--radius-sm);
  font-size:.82rem;font-weight:500;transition:color .15s;
}
.navbar-nav a:hover { color:var(--text);opacity:1; }
.navbar-nav a.active { color:var(--accent);font-weight:700; }

/* User area */
.navbar-user { display:flex;align-items:center;gap:.5rem;flex-shrink:0; }
.user-avatar {
  width:30px;height:30px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:700;color:#fff;flex-shrink:0;
}
.navbar-username { font-size:.82rem;color:var(--text-s);font-weight:500;display:none; }

/* Theme toggle */
.theme-toggle {
  background:none;border:none;cursor:pointer;padding:6px;
  color:var(--text-m);transition:color .15s;display:flex;align-items:center;
}
.theme-toggle:hover { color:var(--text); }
[data-theme="dark"] .theme-icon-sun  { display:none; }
[data-theme="light"] .theme-icon-moon { display:none; }

/* Hamburger */
.nav-toggle {
  display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:6px;
  background:none;border:none;z-index:210;
}
.nav-toggle span {
  width:20px;height:2px;background:var(--text-s);border-radius:2px;
  transition:all .25s ease;
}
.nav-toggle.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* Mobile drawer */
.mobile-nav {
  display:none;position:fixed;inset:0;top:56px;
  background:var(--bg);
  z-index:190;padding:1rem;
  flex-direction:column;gap:.25rem;
}
.mobile-nav.open { display:flex;animation:fadeIn .15s ease both; }
.mobile-nav a {
  display:flex;align-items:center;gap:.75rem;
  padding:.75rem .85rem;border-radius:var(--radius);
  color:var(--text-s);font-size:.95rem;font-weight:500;transition:background .15s,color .15s;
}
.mobile-nav a:hover,.mobile-nav a.active { background:var(--surface2);color:var(--text);opacity:1; }
.mobile-nav .mobile-nav-divider { height:1px;background:var(--border);margin:.5rem 0; }

/* ── Buttons ────────────────────────────── */
.btn {
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem 1rem;border-radius:var(--radius);
  font-size:.82rem;font-weight:600;border:none;cursor:pointer;
  transition:opacity .15s;text-decoration:none;white-space:nowrap;font-family:inherit;
  color:var(--text);background:var(--surface2);
}
.btn:hover { opacity:.85;color:var(--text); }

.btn-primary {
  background:var(--accent);color:#fff;
}
.btn-primary:hover { opacity:.9;color:#fff; }

.btn-success { background:var(--success);color:#000; }
.btn-danger { background:var(--danger);color:#fff; }

.btn-ghost {
  background:transparent;border:1px solid var(--border);color:var(--text-s);
}
.btn-ghost:hover { border-color:var(--border-l);color:var(--text); }

.btn-sm { padding:.35rem .7rem;font-size:.75rem; }

.btn-loading { opacity:.6;pointer-events:none; }

/* ── Cards ──────────────────────────────── */
.card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.25rem;
}

/* ── Page Headers ───────────────────────── */
.page-header {
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  margin-bottom:1.5rem;flex-wrap:wrap;
}
.page-title {
  font-size:1.3rem;font-weight:800;letter-spacing:-.5px;
}
.page-title small {
  display:block;font-size:.78rem;font-weight:400;color:var(--text-m);
  letter-spacing:0;margin-top:.15rem;
}

/* ── Actions row ────────────────────────── */
.actions-row { display:flex;gap:.5rem;align-items:center;flex-wrap:wrap; }

/* ── Breadcrumb ─────────────────────────── */
.breadcrumb {
  font-size:.75rem;color:var(--text-m);margin-bottom:.75rem;
  display:flex;align-items:center;gap:.35rem;
}
.breadcrumb a { color:var(--text-s); }
.bc-sep { color:var(--text-m); }

/* ── Badges ─────────────────────────────── */
.badge {
  display:inline-flex;align-items:center;
  padding:.15rem .5rem;border-radius:99px;
  font-size:.65rem;font-weight:600;letter-spacing:.02em;
  background:var(--surface2);color:var(--text-s);
  border:1px solid var(--border);
}
.badge-accent {
  background:rgba(255,92,53,.12);color:var(--accent);border-color:rgba(255,92,53,.2);
}
.badge-green {
  background:rgba(52,211,153,.1);color:var(--success);border-color:rgba(52,211,153,.2);
}
.badge-red {
  background:rgba(239,68,68,.1);color:var(--danger);border-color:rgba(239,68,68,.2);
}
.badge-amber {
  background:rgba(251,191,36,.1);color:var(--warning);border-color:rgba(251,191,36,.2);
}
/* Legacy aliases */
.badge-blue,.badge-cyan { background:rgba(255,92,53,.1);color:var(--accent);border-color:rgba(255,92,53,.18); }

/* ── Forms ──────────────────────────────── */
.form-group {
  margin-bottom:1rem;
}
.form-group label {
  display:block;font-size:.75rem;font-weight:600;color:var(--text-s);
  margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.04em;
}
.form-group label.required::after {
  content:' *';color:var(--accent);
}
.field-optional { font-weight:400;color:var(--text-m);text-transform:none;letter-spacing:0;font-size:.7rem; }

input[type="text"],input[type="number"],input[type="date"],input[type="password"],
input[type="email"],input[type="url"],input[type="tel"],
select,textarea {
  width:100%;padding:.55rem .75rem;
  background:var(--surface2);color:var(--text);
  border:1px solid var(--border);border-radius:var(--radius);
  font-size:.85rem;font-family:inherit;transition:border-color .15s;
}
input:focus,select:focus,textarea:focus {
  outline:none;border-color:var(--accent);
}
textarea { min-height:90px;resize:vertical; }
select { cursor:pointer; }

.form-hint { font-size:.68rem;color:var(--text-m);margin-top:.25rem; }
.form-error { font-size:.7rem;color:var(--danger);margin-top:.25rem;display:none; }
.form-error.show { display:block; }

.password-wrap { position:relative; }
.pw-toggle {
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--text-m);cursor:pointer;padding:4px;
}

/* ── Alerts ─────────────────────────────── */
.alert {
  padding:.65rem 1rem;border-radius:var(--radius);font-size:.82rem;font-weight:500;
  margin-bottom:1rem;
}
.alert-danger { background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.2); }
.alert-success { background:rgba(52,211,153,.1);color:var(--success);border:1px solid rgba(52,211,153,.2); }

/* ── Toast ──────────────────────────────── */
.toast-container {
  position:fixed;top:72px;right:1rem;z-index:300;
}
.toast {
  padding:.65rem 1rem;border-radius:var(--radius);font-size:.82rem;font-weight:500;
  animation:fadeUp .3s ease both;
  transition:opacity .3s;
}
.toast-success { background:var(--surface);border:1px solid var(--success);color:var(--success); }
.toast-error   { background:var(--surface);border:1px solid var(--danger);color:var(--danger); }
.toast-info    { background:var(--surface);border:1px solid var(--border-l);color:var(--text-s); }
.toast.hiding  { opacity:0; }

/* ── Modal ──────────────────────────────── */
.modal-overlay {
  position:fixed;inset:0;z-index:400;
  background:rgba(0,0,0,.7);
  display:none;align-items:center;justify-content:center;padding:1rem;
}
.modal-overlay.active { display:flex; }
.modal-box {
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.5rem;
  max-width:380px;width:100%;text-align:center;
}
.modal-icon { font-size:2rem;margin-bottom:.75rem; }
.modal-title { font-size:1rem;font-weight:700;margin-bottom:.35rem; }
.modal-text { font-size:.82rem;color:var(--text-s);margin-bottom:1.25rem; }
.modal-actions { display:flex;gap:.5rem; }
.modal-actions .btn { flex:1;justify-content:center; }

/* ── Scroll to top ──────────────────────── */
.scroll-top {
  position:fixed;bottom:1.5rem;right:1.5rem;
  width:36px;height:36px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border);
  color:var(--text-s);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:100;
}
.scroll-top.visible { opacity:1;pointer-events:auto; }
.scroll-top:hover { border-color:var(--accent);color:var(--accent); }

/* ── Pace Preview ───────────────────────── */
.pace-preview {
  display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius);padding:.75rem;margin-top:.75rem;
  opacity:.4;transition:opacity .2s;
}
.pace-preview.has-value { opacity:1; }
.pace-item { text-align:center; }
.pi-label { font-size:.55rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-m); }
.pi-value { font-size:.9rem;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums; }
.pi-value.accent { color:var(--accent); }

/* ── GPX Import ─────────────────────────── */
.gpx-import-box { margin-bottom:1.25rem; }
.gpx-drop-zone {
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  padding:1.25rem;border:1px dashed var(--border);border-radius:var(--radius);
  cursor:pointer;transition:border-color .15s;color:var(--text-m);font-size:.82rem;
  text-align:center;
}
.gpx-drop-zone:hover,.gpx-drop-zone.dragover { border-color:var(--accent);color:var(--text-s); }
.gpx-hint { font-size:.7rem;color:var(--text-m); }

/* ── Map ────────────────────────────────── */
.map-container {
  height:200px;border-radius:var(--radius);margin-top:.5rem;
  border:1px solid var(--border);overflow:hidden;
}
.map-hint { font-size:.68rem;color:var(--text-m);margin-top:.35rem; }

/* ── Location row ───────────────────────── */
.location-row { margin-top:1.25rem; }
.location-row label {
  display:block;font-size:.75rem;font-weight:600;color:var(--text-s);
  margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.04em;
}
.location-row input[type="text"] { margin-bottom:0; }

/* ── Detail page ────────────────────────── */
.detail-hero {
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.5rem;
}
.detail-stat-grid {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem;
  margin-top:1.25rem;
}
.detail-stat { text-align:center; }
.detail-stat-label { font-size:.55rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-m); }
.detail-stat-val { font-size:1.5rem;font-weight:900;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.5px; }
.detail-stat-sub { font-size:.7rem;color:var(--text-m); }
.detail-notes {
  margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--border);
  font-size:.85rem;color:var(--text-s);line-height:1.7;
}
.detail-notes-title { font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-m);margin-bottom:.35rem; }
.detail-map { height:240px;border-radius:var(--radius);margin-top:1.25rem;overflow:hidden;border:1px solid var(--border); }
.detail-location {
  display:flex;align-items:center;gap:.35rem;font-size:.78rem;color:var(--text-s);margin-top:.5rem;
}
.detail-actions {
  display:flex;gap:.5rem;margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--border);
}

/* ── Tables ─────────────────────────────── */
.table-wrap { overflow-x:auto;-webkit-overflow-scrolling:touch; }
table {
  width:100%;border-collapse:collapse;font-size:.82rem;
}
thead th {
  text-align:left;padding:.6rem .75rem;font-size:.65rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--text-m);
  border-bottom:1px solid var(--border);
}
tbody td { padding:.6rem .75rem;border-bottom:1px solid var(--border); }
tbody tr:hover { background:var(--surface2); }

/* ── Stat Cards (generic) ───────────────── */
.stat-card {
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:1rem;
}
.stat-label {
  font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-m);margin-bottom:.25rem;
}
.stat-value {
  font-size:1.8rem;font-weight:900;color:var(--text);
  font-variant-numeric:tabular-nums;letter-spacing:-1px;line-height:1;
}
.stat-sub { font-size:.7rem;color:var(--text-m);margin-top:.2rem; }

/* ── Dashboard ──────────────────────────── */
.dash-greeting {
  margin-bottom:2rem;
}
.dash-greeting h1 {
  font-size:1.4rem;font-weight:800;letter-spacing:-.5px;
}
.dash-greeting p {
  font-size:.82rem;color:var(--text-m);margin-top:.15rem;
}

.module-grid {
  display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;
}
.module-card {
  display:flex;align-items:center;gap:1rem;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.1rem 1.25rem;
  text-decoration:none;color:inherit;
  transition:border-color .15s;
  position:relative;overflow:hidden;
}
.module-card:hover { border-color:var(--border-l);color:inherit;opacity:1; }
.module-card__icon {
  width:42px;height:42px;border-radius:var(--radius);
  background:var(--surface2);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.module-card__info { flex:1;min-width:0; }
.module-card__info h3 {
  font-size:.7rem;font-weight:700;color:var(--text-s);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:.25rem;
}
.module-card__stat { display:flex;align-items:baseline;gap:.15rem; }
.module-card__val {
  font-size:1.7rem;font-weight:900;color:var(--text);
  font-variant-numeric:tabular-nums;letter-spacing:-1px;line-height:1;
}
.module-card__unit {
  font-size:.7rem;font-weight:500;color:var(--text-m);letter-spacing:0;
}
.module-card__sub {
  font-size:.6rem;color:var(--text-m);margin-top:.2rem;
}
.module-card__arrow {
  color:var(--text-m);flex-shrink:0;transition:color .15s;
}
.module-card:hover .module-card__arrow { color:var(--accent); }

/* ── Goal bars (shared) ─────────────────── */
.goal-bar { height:4px;background:var(--surface3);border-radius:2px;overflow:hidden; }
.goal-bar-fill { height:100%;background:var(--accent);border-radius:2px;transition:width .8s ease; }
.goal-bar-fill.complete { background:var(--success); }

/* ── Settings / Admin ───────────────────── */
.settings-grid { display:grid;gap:1.5rem;max-width:580px; }
.settings-card { }
.settings-card h3 { font-size:.88rem;font-weight:700;margin-bottom:1rem; }
.admin-table { width:100%; }

/* ── Pagination ─────────────────────────── */
.pagination {
  display:flex;align-items:center;justify-content:center;gap:.25rem;
  margin-top:1.5rem;
}
.pagination a,.pagination span,.pagination button {
  padding:.35rem .6rem;border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;
  color:var(--text-m);text-decoration:none;transition:all .15s;
  background:none;border:none;cursor:pointer;font-family:inherit;
}
.pagination a:hover,.pagination button:hover:not(:disabled) { background:var(--surface2);color:var(--text);opacity:1; }
.pagination button:disabled { opacity:.3;cursor:default; }
.pagination .active {
  background:var(--accent) !important;color:#fff !important;
}
.page-info { font-size:.65rem;color:var(--text-m);cursor:default !important; }

/* ── Login Page ─────────────────────────── */
.login-page {
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--bg);padding:1rem;
}
.login-card {
  width:100%;max-width:380px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:2.5rem 2rem;
  position:relative;overflow:hidden;
}
.login-card::before {
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--accent);
}
.login-logo {
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
  margin-bottom:2rem;
}
.login-logo-mark { width:56px;height:56px; }
.login-brand {
  font-size:1.3rem;font-weight:800;letter-spacing:-.5px;
}
.login-heading {
  font-size:.85rem;font-weight:600;color:var(--text-m);
  text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:1.25rem;
}
.login-btn { width:100%;justify-content:center;margin-top:.5rem; }

/* Legacy login compat (hide old structure) */
.login-hero { display:none; }
.login-form-panel { display:contents; }
.login-form-inner { display:contents; }
.login-mobile-logo { display:none; }

/* ── Responsive ─────────────────────────── */
@media (min-width:640px) {
  .module-grid { grid-template-columns:repeat(2,1fr); }
}

@media (min-width:768px) {
  .navbar-nav { display:flex; }
  .nav-toggle { display:none; }
  .navbar-username { display:inline; }
}

@media (max-width:767px) {
  .page-title { font-size:1.1rem; }
  .module-grid { grid-template-columns:1fr; }
  .detail-stat-grid { grid-template-columns:repeat(2,1fr); }
}