/* ═══════════════════════════════════════════════════════════════
   Regio Monitor – Frontend Styles
   Mobile-First, Accessible, Dark-mode aware
   ═══════════════════════════════════════════════════════════════ */

:root {
  --rm-bg:          #0f1117;
  --rm-surface:     #1a1d27;
  --rm-border:      rgba(255,255,255,.09);
  --rm-text:        #e2e4ef;
  --rm-muted:       #7a7f96;
  --rm-accent:      #3b82f6;

  /* Art-Farben */
  --rm-blitzer:     #f59e0b;
  --rm-unfall:      #ef4444;
  --rm-stau:        #f97316;
  --rm-verkehr:     #22c55e;

  --rm-radius:      .75rem;
  --rm-gap:         .75rem;
  --rm-font:        system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Light-Mode Override */
@media (prefers-color-scheme: light) {
  :root {
    --rm-bg:      #f4f5f8;
    --rm-surface: #ffffff;
    --rm-border:  rgba(0,0,0,.08);
    --rm-text:    #1a1d27;
    --rm-muted:   #6b7280;
  }
}

/* ── Wrapper ─────────────────────────────────────────────────── */
.rm-monitor {
  font-family: var(--rm-font);
  background:  var(--rm-bg);
  color:       var(--rm-text);
  border-radius: var(--rm-radius);
  padding:     1rem;
  max-width:   680px;
  margin:      0 auto;
  box-sizing:  border-box;
}

/* ── Header ──────────────────────────────────────────────────── */
.rm-header {
  display:        flex;
  align-items:    center;
  gap:            .5rem;
  margin-bottom:  1rem;
  padding-bottom: .75rem;
  border-bottom:  1px solid var(--rm-border);
}

.rm-header__icon svg { color: var(--rm-accent); }

.rm-header__title {
  font-size:   1.05rem;
  font-weight: 700;
  margin:      0;
  flex:        1;
  color:       var(--rm-text);
}

.rm-header__meta {
  font-size:  .7rem;
  color:      var(--rm-muted);
  background: var(--rm-border);
  padding:    .2rem .5rem;
  border-radius: 2rem;
  white-space: nowrap;
}

/* ── Liste ───────────────────────────────────────────────────── */
.rm-list {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        var(--rm-gap);
}

/* ── Karte ───────────────────────────────────────────────────── */
.rm-card {
  display:       flex;
  align-items:   flex-start;
  gap:           .75rem;
  background:    var(--rm-surface);
  border:        1px solid var(--rm-border);
  border-left:   3px solid var(--rm-verkehr);
  border-radius: var(--rm-radius);
  padding:       .85rem 1rem;
  transition:    border-color .2s;
}

.rm-card--blitzer  { border-left-color: var(--rm-blitzer); }
.rm-card--unfall   { border-left-color: var(--rm-unfall);  }
.rm-card--stau     { border-left-color: var(--rm-stau);    }
.rm-card--verkehr  { border-left-color: var(--rm-verkehr); }

/* Icon-Farben je Art */
.rm-card--blitzer .rm-card__icon svg { color: var(--rm-blitzer); }
.rm-card--unfall  .rm-card__icon svg { color: var(--rm-unfall);  }
.rm-card--stau    .rm-card__icon svg { color: var(--rm-stau);    }
.rm-card--verkehr .rm-card__icon svg { color: var(--rm-verkehr); }

.rm-card__icon {
  flex-shrink: 0;
  margin-top:  .1rem;
}

/* ── Karten-Inhalt ───────────────────────────────────────────── */
.rm-card__body {
  display:   flex;
  flex-direction: column;
  gap:       .2rem;
  min-width: 0;
}

.rm-card__badge {
  font-size:      .65rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--rm-muted);
}

.rm-card--blitzer .rm-card__badge { color: var(--rm-blitzer); }
.rm-card--unfall  .rm-card__badge { color: var(--rm-unfall);  }
.rm-card--stau    .rm-card__badge { color: var(--rm-stau);    }

.rm-card__ort {
  font-size:   .9rem;
  font-weight: 600;
  color:       var(--rm-text);
  white-space: normal;
  word-break:  break-word;
}

.rm-card__text {
  font-size:   .82rem;
  color:       var(--rm-muted);
  margin:      0;
  line-height: 1.45;
  word-break:  break-word;
}

.rm-card__time {
  font-size: .7rem;
  color:     var(--rm-muted);
  margin-top: .15rem;
}

/* ── Leer-Zustand ────────────────────────────────────────────── */
.rm-empty {
  text-align:  center;
  color:       var(--rm-muted);
  font-size:   .85rem;
  padding:     2rem 0;
  margin:      0;
}

/* ── Footer ──────────────────────────────────────────────────── */
.rm-footer {
  margin-top:  .75rem;
  padding-top: .6rem;
  border-top:  1px solid var(--rm-border);
  font-size:   .7rem;
  color:       var(--rm-muted);
  text-align:  right;
}

/* ── Reduzierte Bewegung ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rm-card { transition: none; }
}

/* ── Baustellen ──────────────────────────────────────────────────────────── */
:root {
  --rm-baustelle: #eab308;
}

.rm-monitor--baustellen .rm-header__icon svg { color: var(--rm-baustelle); }

.rm-card--baustelle {
  border-left-color: var(--rm-baustelle);
}

.rm-card--baustelle .rm-card__icon svg { color: var(--rm-baustelle); }
.rm-card--baustelle .rm-card__badge    { color: var(--rm-baustelle); }

.rm-card__vonbis {
  font-size:   .78rem;
  color:       var(--rm-muted);
  font-style:  italic;
}

.rm-card__zeitraum {
  display:     flex;
  align-items: center;
  gap:         .3rem;
  font-size:   .72rem;
  color:       var(--rm-muted);
  margin-top:  .2rem;
}

.rm-card__zeitraum svg {
  flex-shrink: 0;
  opacity: .7;
}

/* ── Baustellen ──────────────────────────────────────────────── */
:root { --rm-baustelle: #eab308; }

.rm-monitor--baustellen .rm-header__icon svg { color: var(--rm-baustelle); }
.rm-card--baustelle                          { border-left-color: var(--rm-baustelle); }
.rm-card--baustelle .rm-card__icon svg       { color: var(--rm-baustelle); }
.rm-card--baustelle .rm-card__badge          { color: var(--rm-baustelle); }

.rm-card__link {
  display:      inline-block;
  margin-top:   .4rem;
  font-size:    .8rem;
  font-weight:  600;
  color:        var(--rm-baustelle);
  text-decoration: none;
}
.rm-card__link:hover { text-decoration: underline; }

/* ── Nutzer-Badge ────────────────────────────────────────────── */
.rm-card__user-badge {
  font-size:      .6rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          #fff;
  background:     #3b82f6;
  padding:        .15rem .45rem;
  border-radius:  2rem;
  display:        inline-block;
  margin-bottom:  .2rem;
}

/* ── Melde-Formular ──────────────────────────────────────────── */
.rm-report {
  font-family:   var(--rm-font);
  background:    var(--rm-bg);
  color:         var(--rm-text);
  border-radius: var(--rm-radius);
  padding:       1rem;
  max-width:     680px;
  margin:        0 auto;
  box-sizing:    border-box;
}

.rm-report__hint {
  font-size:    .8rem;
  color:        var(--rm-muted);
  margin:       0 0 1rem;
}

/* Typ-Tabs */
.rm-report__type-tabs {
  display:       flex;
  gap:           .5rem;
  margin-bottom: .75rem;
}

.rm-report__tab {
  flex:          1;
  padding:       .5rem .75rem;
  font-size:     .8rem;
  font-weight:   600;
  background:    var(--rm-surface);
  color:         var(--rm-muted);
  border:        1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  cursor:        pointer;
  transition:    background .15s, color .15s, border-color .15s;
}

.rm-report__tab--active {
  background:    var(--rm-blitzer);
  color:         #000;
  border-color:  var(--rm-blitzer);
}

/* Formular-Felder */
.rm-report__field {
  display:        flex;
  flex-direction: column;
  gap:            .3rem;
  margin-bottom:  .65rem;
}

.rm-report__field label {
  font-size:   .75rem;
  font-weight: 600;
  color:       var(--rm-text);
}

.rm-report__opt {
  font-weight: 400;
  color:       var(--rm-muted);
}

.rm-report__field input,
.rm-report__field select {
  background:    var(--rm-surface);
  color:         var(--rm-text);
  border:        1px solid var(--rm-border);
  border-radius: .5rem;
  padding:       .55rem .75rem;
  font-size:     .85rem;
  font-family:   var(--rm-font);
  width:         100%;
  box-sizing:    border-box;
  outline:       none;
  transition:    border-color .15s;
}

.rm-report__field input:focus,
.rm-report__field select:focus {
  border-color: var(--rm-blitzer);
}

/* Honeypot verstecken */
.rm-report__honey {
  position:   absolute;
  left:       -9999px;
  visibility: hidden;
}

/* Submit-Button */
.rm-report__submit {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             .5rem;
  width:           100%;
  padding:         .7rem 1rem;
  margin-top:      .5rem;
  background:      var(--rm-blitzer);
  color:           #000;
  font-size:       .9rem;
  font-weight:     700;
  border:          none;
  border-radius:   var(--rm-radius);
  cursor:          pointer;
  transition:      opacity .15s;
}

.rm-report__submit:hover   { opacity: .85; }
.rm-report__submit:disabled { opacity: .5; cursor: not-allowed; }

/* Feedback-Meldung */
.rm-report__feedback {
  text-align:  center;
  font-size:   .82rem;
  margin-top:  .6rem;
  min-height:  1.2rem;
  color:       var(--rm-muted);
}

.rm-report__feedback--ok  { color: #22c55e; }
.rm-report__feedback--err { color: #ef4444; }