/* ═══════════════════════════════════════════════════════════
   MaHe Weather Widget – v1.5.0  (kompakt)
   ═══════════════════════════════════════════════════════════ */

/* ── Dark Theme ──────────────────────────────────────────── */
.mahe-weather-widget {
  --mw-bg:        #2c2c2c;
  --mw-bg2:       #363636;
  --mw-bg3:       #404040;
  --mw-border:    #484848;
  --mw-red:       #4a7c2f;
  --mw-text:      #f5f5f5;
  --mw-muted:     #a0a0a0;
  --mw-tab-text:  #a0a0a0;
  --mw-pin-hole:  #2c2c2c;
  --mw-src-hover: #f5f5f5;
  --mw-day-hover: #5a5a5a;
  --mw-radius:    3px;
  --mw-font:      'Georgia', 'Times New Roman', serif;
  --mw-font-ui:   system-ui, -apple-system, sans-serif;

  font-family: var(--mw-font-ui);
  background:  var(--mw-bg);
  color:       var(--mw-text);
  border:      1px solid var(--mw-border);
  border-top:  3px solid var(--mw-red);
  border-radius: var(--mw-radius);
  overflow:    hidden;
  max-width:   480px;
  width:       100%;
  box-sizing:  border-box;
  transition:  background 0.25s, color 0.25s, border-color 0.25s;
}

/* ── Light Theme ─────────────────────────────────────────── */
.mahe-weather-widget[data-theme="light"] {
  --mw-bg:        #ffffff;
  --mw-bg2:       #f4f4f4;
  --mw-bg3:       #ebebeb;
  --mw-border:    #d8d8d8;
  --mw-text:      #1a1a1a;
  --mw-muted:     #666666;
  --mw-tab-text:  #555555;
  --mw-pin-hole:  #ffffff;
  --mw-src-hover: #1a1a1a;
  --mw-day-hover: #c0c0c0;
}

/* ── Header ─────────────────────────────────────────────── */
.mw-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         7px 11px 6px;
  background:      var(--mw-bg2);
  border-bottom:   1px solid var(--mw-border);
  gap:             6px;
  flex-wrap:       wrap;
  transition:      background 0.25s, border-color 0.25s;
}

.mw-city {
  font-family:    var(--mw-font);
  font-size:      0.78rem;
  font-weight:    bold;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color:          var(--mw-text);
  display:        flex;
  align-items:    center;
  gap:            5px;
  transition:     color 0.25s;
}

.mw-city svg { color: var(--mw-red); flex-shrink: 0; }

/* ── Controls ────────────────────────────────────────────── */
.mw-controls {
  display:     flex;
  align-items: center;
  gap:         4px;
  flex-wrap:   wrap;
}

.mw-tabs { display: flex; gap: 3px; }

.mw-tab {
  background:     transparent;
  border:         1px solid var(--mw-border);
  color:          var(--mw-tab-text);
  font-size:      0.7rem;
  font-family:    var(--mw-font-ui);
  font-weight:    600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding:        4px 10px;
  border-radius:  2px;
  cursor:         pointer;
  transition:     all 0.15s ease;
  line-height:    1.2;
}

.mw-tab:hover  { border-color: var(--mw-red); color: var(--mw-text); }
.mw-tab.active { background: var(--mw-red); border-color: var(--mw-red); color: #fff; }

/* ── Theme-Toggle ────────────────────────────────────────── */
.mw-theme-toggle {
  background:      transparent;
  border:          1px solid var(--mw-border);
  color:           var(--mw-tab-text);
  font-size:       0.8rem;
  padding:         3px 7px;
  border-radius:   2px;
  cursor:          pointer;
  transition:      all 0.15s ease;
  line-height:     1.2;
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-width:       28px;
  user-select:     none;
}

.mw-theme-toggle:hover { border-color: var(--mw-red); color: var(--mw-text); }

/* ── Refresh-Select ──────────────────────────────────────── */
.mw-refresh-wrap {
  display:     flex;
  align-items: center;
  gap:         3px;
}

.mw-refresh-label {
  font-size:   0.65rem;
  color:       var(--mw-muted);
  transition:  color 0.25s;
}

.mw-refresh-select {
  background:          var(--mw-bg3);
  border:              1px solid var(--mw-border);
  color:               var(--mw-muted);
  font-size:           0.68rem;
  font-family:         var(--mw-font-ui);
  padding:             3px 18px 3px 6px;
  border-radius:       2px;
  cursor:              pointer;
  transition:          all 0.15s ease;
  outline:             none;
  -webkit-appearance:  none;
  appearance:          none;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath d='M0 0l3.5 4L7 0z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 5px center;
}

.mw-refresh-select:hover,
.mw-refresh-select:focus { border-color: var(--mw-red); color: var(--mw-text); }

/* ── Body ────────────────────────────────────────────────── */
.mw-body { padding: 10px 11px; }

/* ── Ladezustand / Fehler ────────────────────────────────── */
.mw-loading,
.mw-error {
  text-align: center;
  padding:    18px 11px;
  color:      var(--mw-muted);
  font-size:  0.85rem;
}

.mw-error { color: var(--mw-red); }

.mw-spinner {
  display:          inline-block;
  width:            20px;
  height:           20px;
  border:           2px solid var(--mw-border);
  border-top-color: var(--mw-red);
  border-radius:    50%;
  animation:        mw-spin 0.7s linear infinite;
  margin-bottom:    7px;
}

@keyframes mw-spin { to { transform: rotate(360deg); } }

/* ── Heute-Ansicht ───────────────────────────────────────── */
.mw-today-main {
  display:       flex;
  align-items:   center;
  gap:           10px;
  margin-bottom: 9px;
}

.mw-icon-main { font-size: 2.6rem; line-height: 1; flex-shrink: 0; }

.mw-temp-main {
  font-size:      2.2rem;
  font-weight:    700;
  line-height:    1;
  letter-spacing: -0.02em;
  color:          var(--mw-text);
  transition:     color 0.25s;
}

.mw-temp-main sup {
  font-size:      0.9rem;
  font-weight:    400;
  opacity:        0.65;
  vertical-align: super;
}

.mw-desc-main {
  font-size:      0.82rem;
  color:          var(--mw-muted);
  margin-top:     2px;
  text-transform: capitalize;
  transition:     color 0.25s;
}

.mw-today-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   5px;
}

.mw-stat {
  background:     var(--mw-bg3);
  border:         1px solid var(--mw-border);
  border-radius:  var(--mw-radius);
  padding:        6px 9px;
  display:        flex;
  flex-direction: column;
  gap:            1px;
  transition:     background 0.25s, border-color 0.25s;
}

.mw-stat-label {
  font-size:      0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--mw-muted);
  transition:     color 0.25s;
}

.mw-stat-value {
  font-size:   0.9rem;
  font-weight: 600;
  color:       var(--mw-text);
  transition:  color 0.25s;
}

/* ── 3-Tage-Ansicht ──────────────────────────────────────── */
.mw-3day { display: flex; flex-direction: column; gap: 5px; }

.mw-day-row {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  align-items:           center;
  gap:                   8px;
  background:            var(--mw-bg3);
  border:                1px solid var(--mw-border);
  border-radius:         var(--mw-radius);
  padding:               7px 10px;
  transition:            border-color 0.15s, background 0.25s;
}

.mw-day-row:hover { border-color: var(--mw-day-hover); }
.mw-day-row.today { border-left: 3px solid var(--mw-red); }

.mw-day-name {
  font-size:   0.85rem;
  font-weight: 600;
  color:       var(--mw-text);
  transition:  color 0.25s;
}

.mw-day-icon { font-size: 1.4rem; text-align: center; }

.mw-day-temps { display: flex; flex-direction: column; align-items: flex-end; gap: 0; }

.mw-day-max { font-size: 0.9rem;  font-weight: 700; color: var(--mw-text);  transition: color 0.25s; }
.mw-day-min { font-size: 0.78rem; color: var(--mw-muted); transition: color 0.25s; line-height: 1.3; }

.mw-day-rain {
  font-size:   0.75rem;
  color:       var(--mw-muted);
  text-align:  right;
  white-space: nowrap;
  transition:  color 0.25s;
}

/* ── Footer ──────────────────────────────────────────────── */
.mw-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         5px 11px 6px;
  border-top:      1px solid var(--mw-border);
  background:      var(--mw-bg2);
  gap:             5px;
  flex-wrap:       wrap;
  transition:      background 0.25s, border-color 0.25s;
}

.mw-updated { font-size: 0.65rem; color: var(--mw-muted); transition: color 0.25s; }

.mw-source {
  font-size:       0.65rem;
  color:           var(--mw-muted);
  text-decoration: none;
  transition:      color 0.25s;
}
.mw-source:hover { color: var(--mw-src-hover); text-decoration: underline; }

.mw-refresh-btn {
  background:    transparent;
  border:        none;
  cursor:        pointer;
  color:         var(--mw-muted);
  padding:       2px 4px;
  border-radius: 2px;
  font-size:     0.9rem;
  transition:    color 0.15s;
  line-height:   1;
}
.mw-refresh-btn:hover    { color: var(--mw-text); }
.mw-refresh-btn.spinning { animation: mw-spin 0.6s linear infinite; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 360px) {
  .mw-temp-main           { font-size: 1.9rem; }
  .mw-today-grid          { grid-template-columns: 1fr; }
  .mw-day-row             { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 5px; }
  .mw-tab                 { padding: 3px 8px; }
  .mw-refresh-label       { display: none; }
}

/* ── Sidebar-Widget ──────────────────────────────────────── */
.widget .mahe-weather-widget { max-width: 100%; }

/* ── Widget-Titel ────────────────────────────────────────── */
.mw-title {
  background:     #4a7c2f;
  color:          #fff;
  font-family:    var(--mw-font);
  font-size:      0.72rem;
  font-weight:    bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding:        4px 11px;
  border-bottom:  1px solid rgba(0,0,0,0.2);
}

/* ── Info-Zeile (Sonne + Hinweise kombiniert) ────────────── */
.mw-info-row {
  display:       flex;
  flex-wrap:     wrap;
  gap:           4px;
  margin-bottom: 8px;
}

.mw-info-item {
  background:    var(--mw-bg3);
  border:        1px solid var(--mw-border);
  border-radius: var(--mw-radius);
  color:         var(--mw-muted);
  font-size:     0.7rem;
  padding:       3px 7px;
  white-space:   nowrap;
  transition:    background 0.25s, border-color 0.25s, color 0.25s;
}

.mahe-weather-widget[data-theme="light"] .mw-info-item {
  color: #444;
}

/* ── DWD Wetterwarnungen ─────────────────────────────────── */
.mw-warnings {
  display:        flex;
  flex-direction: column;
  gap:            3px;
  padding:        6px 11px;
  border-bottom:  1px solid var(--mw-border);
}

.mw-warning {
  border-radius: var(--mw-radius);
  padding:       5px 8px;
  border-left:   3px solid transparent;
}

.mw-warn-minor    { background: rgba(255,200,0,0.12);  border-left-color: #e6b800; }
.mw-warn-moderate { background: rgba(255,130,0,0.13);  border-left-color: #e67300; }
.mw-warn-severe   { background: rgba(220,0,0,0.13);    border-left-color: #cc0000; }
.mw-warn-extreme  { background: rgba(150,0,200,0.13);  border-left-color: #8800cc; }

.mahe-weather-widget[data-theme="light"] .mw-warn-minor    { background: #fffbe6; }
.mahe-weather-widget[data-theme="light"] .mw-warn-moderate { background: #fff3e0; }
.mahe-weather-widget[data-theme="light"] .mw-warn-severe   { background: #ffeaea; }
.mahe-weather-widget[data-theme="light"] .mw-warn-extreme  { background: #f5e6ff; }

.mw-warn-head {
  font-size:   0.7rem;
  font-weight: 700;
  color:       var(--mw-text);
  margin-bottom: 1px;
}

.mw-warn-text {
  font-size: 0.68rem;
  color:     var(--mw-muted);
  line-height: 1.3;
}

/* .mw-sun-row/.mw-sun-item → ersetzt durch .mw-info-row/.mw-info-item */

/* Sonnenzeiten in 3-Tage-Ansicht */
.mw-3day-sun {
  display:     block;
  font-size:   0.65rem;
  color:       var(--mw-muted);
  font-weight: normal;
  margin-top:  1px;
}