/**
 * File: detail.css
 * Version: 2025-09-28 12:15
 * Purpose: Styles für Detailansicht (Dialog, Typografie, Layout)
 * Dependencies: (none)
 * Notes: BEM-ähnliche Klassen; keine !important.
 */


/* --- Basics -------------------------------------------------------------- */
.spa-grid-wrap{overflow-x:auto;margin-top:.5rem}
.spa-grid{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.spa-grid th,.spa-grid td{padding:.5rem .6rem;border:1px solid #e5e7eb}
.spa-grid thead th{position:sticky;top:0;background:#f8fafc;z-index:1}
.spa-grid .rowlabel{white-space:nowrap;background:#f8fafc;font-weight:600;width:220px}
.spa-grid td{text-align:center}

/* Ampelfarben */
.spa-grid td.spa-cell-ok{background:#e7f7ec;border-color:#86efac;color:#065f46}
.spa-grid td.spa-cell-bad{background:#fee2e2;border-color:#f87171;color:#7f1d1d}
.spa-grid td.spa-cell-warn{background:#fde68a;border-color:#f59e0b;color:#7c2d12}
.spa-grid td.spa-cell-na{background:#f1f5f9;border-color:#cbd5e1;color:#475569}

/* Badges */
.spa-tags{display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0}
.spa-tag{display:inline-block;font-size:.80rem;padding:.15rem .5rem;border:1px solid #e5e7eb;border-radius:.4rem;background:#fff;color:#334155}
.spa-tag-window{background:#eefdf4;border-color:#86efac;color:#065f46}
.spa-tag-gradient{background:#fff7ed;border-color:#fdba74;color:#7c2d12}
.spa-tag.spa-tag-window.spa-tag-window-none{background:#fee2e2;border-color:#f87171;color:#7f1d1d}

/* Level-Switch */
.spa-level-switch{display:flex;gap:.5rem;align-items:center;margin:.25rem 0 .5rem}
.spa-level-switch button{border:1px solid #cbd5e1;background:#fff;padding:.25rem .6rem;border-radius:.4rem;cursor:pointer}
.spa-level-switch button.active{background:#111827;color:#fff;border-color:#111827}

/* Pfeile (Detailmatrix) */
.spa-arrow{display:inline-block;width:20px;height:20px;line-height:0;transform:rotate(var(--spa-rot,0deg));transform-origin:50% 50%}
.spa-arrow svg{display:block}
.spa-arrow.ok path{fill:#16a34a}
.spa-arrow.bad path{fill:#ef4444}
.spa-arrow.na  path{fill:#94a3b8}

/* Windrichtungszeile */
.spa-grid tr[data-row="dir"] td{background:#ffffff !important;color:#111827}
.spa-grid tr[data-row="dir"] td.spa-cell-ok,
.spa-grid tr[data-row="dir"] td.spa-cell-bad,
.spa-grid tr[data-row="dir"] td.spa-cell-na{border-color:#e5e7eb}

/* Soll-Pfeil neben dem Titel */
.spa-aspect-icon{display:inline-flex;vertical-align:middle;margin-left:.35rem}
.spa-aspect-icon .spa-arrow{width:18px;height:18px}

/* Warnfarbe für Wind-Gradient */
.spa-grid td.spa-cell-warn{background:#fde68a;border-color:#f59e0b;color:#7c2d12}

/* Cloudbase-Zeile kompakter */
.spa-grid tr[data-row="cb"] td{
  white-space:nowrap;font-size:0.90rem;line-height:1.2;
  padding-top:.35rem;padding-bottom:.35rem;font-variant-numeric:tabular-nums;
}
@media (max-width:640px){ .spa-grid tr[data-row="cb"] td{font-size:0.85rem} }

/* ===== Mobile-Scroll ===== */
.spa-grid-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-beavior-x:contain}
.spa-grid{width:max-content;table-layout:auto;border-collapse:separate;border-spacing:0}
.spa-grid th,.spa-grid td{
  white-space:nowrap;word-break:keep-all;overflow-wrap:normal;
  font-variant-numeric:tabular-nums;padding:.45rem .55rem;
}
.spa-grid th:not(.rowlabel), .spa-grid td{min-width:58px;text-align:center}
.spa-grid .rowlabel{white-space:nowrap;width:220px}
.spa-grid td.spa-dir-cell{min-width:52px;padding:.35rem .4rem}
.spa-grid tr[data-row="cb"] td{white-space:nowrap;font-size:.90rem;line-height:1.2;padding-top:.35rem;padding-bottom:.35rem}
@media (max-width:480px){
  .spa-grid th:not(.rowlabel), .spa-grid td{min-width:54px;font-size:.95rem;padding:.35rem .45rem}
  .spa-grid .rowlabel{width:200px;font-size:.95rem}
}

/* Regenanzeige (Detailmatrix) */
.spa-detail td .spa-precip{color:#1d4ed8;font-weight:700}

/* Wetter/°C-Zeile */
.spa-grid tr[data-row="wx"] td{white-space:nowrap;font-size:.95rem;line-height:1.1;padding-top:.35rem;padding-bottom:.35rem;background:#f8fafc}
.spa-wx{display:inline-flex;align-items:center;justify-content:center;gap:.25rem}
.spa-wx .ico{font-size:1.15rem;line-height:1}

/* ===== Modal ===== */
.spa-modal{overflow-y:auto;align-items:flex-start;padding:1rem 0}
.spa-card{max-height:none;overflow:visible}
@media (max-width:640px){ .spa-modal{padding:.5rem 0} .spa-card{width:calc(100% - 1rem)} }
body.spa-modal-open{overflow:hidden}
.spa-card .spa-title{display:none}
.spa-card{padding-top:.4rem}
.spa-card .spa-detail h5{margin:.1rem 0 .6rem}
.spa-actions{position:sticky;top:.25rem;margin:0 0 .5rem;padding:0;z-index:2}

/* Detail-Basis */
.rowlabel .ok,.row-label .ok{color:#0b8f3a;font-weight:600}
.rowlabel .sub,.row-label .sub{color:#6b7280;font-size:.9em;opacity:.85}
.spa-grid .rowlabel{white-space:nowrap}
#spaModal .spa-card{max-width:960px}
#spaAuthModal .spa-card{max-width:560px}

/* Matrix-Scroller */
.spa-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.spa-table{min-width:560px;border-collapse:collapse}
.spa-table-wrap::-webkit-scrollbar{height:8px}
.spa-row-auth{display:flex !important;justify-content:flex-end !important;width:100%}
.spa-row-auth .spa-authlink{margin-left:auto;text-align:right !important}

/* ===================================================================== */
/* ============ Summary als 4-Spalten-Tabelle (mobil tauglich) ========= */
/* ===================================================================== */
.spa-summary{--spa-grid:#e5e7eb;--spa-accent:#111827;overflow-x:auto}
.spa-summary .spa-grid{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:.95rem}
.spa-summary .spa-grid th,.spa-summary .spa-grid td{
  padding:.45rem .55rem;text-align:center;border-width:3px;border-style:solid;border-color:transparent;
  box-shadow:inset 0 0 0 1px var(--spa-grid);background:#fff;vertical-align:middle;position:relative;
}
.spa-summary .spa-grid thead th{position:sticky;top:0;z-index:2;font-weight:700}

/* Header-Tints */
.spa-summary .spa-grid thead th.is-green{background:#e7f7ec;border-color:#86efac;color:#065f46}
.spa-summary .spa-grid thead th.is-red{background:#fee2e2;border-color:#f87171;color:#7f1d1d}
.spa-summary .spa-grid thead th.is-gray{background:#f1f5f9;border-color:#cbd5e1;color:#475569}

/* Rowlabel */
.spa-summary .spa-grid .rowlabel{text-align:left;white-space:nowrap;background:#f8fafc;font-weight:600;width:200px}

/* Kompakte Icon-Leiste */
.spa-summary .spa-wxstrip{display:inline-flex;gap:.1rem;align-items:center}
.spa-summary .spa-wxstrip .ico{font-size:1.05rem;line-height:1}

/* Aktive Spalte: 3px Rahmen */
.spa-summary .spa-grid th.is-active-col,
.spa-summary .spa-grid td.is-active-col{
  border-left-color:var(--spa-accent);
  border-right-color:var(--spa-accent);
  box-shadow:inset 0 1px 0 0 var(--spa-grid), inset 0 -1px 0 0 var(--spa-grid);
}
.spa-summary .spa-grid thead th.is-active-col{border-top-color:var(--spa-accent)}
.spa-summary .spa-grid tbody tr:last-child td.is-active-col{border-bottom-color:var(--spa-accent)}
.spa-summary .spa-grid [tabindex="0"]:focus{outline:2px solid #3b82f6;outline-offset:-2px}

@media (max-width:640px){
  .spa-summary .spa-grid{font-size:.9rem}
  .spa-summary .spa-grid th,.spa-summary .spa-grid td{padding:.35rem .45rem}
  .spa-summary .spa-grid .rowlabel{width:160px}
}

/* ===================================================================== */
/* ===== Detail – Header-Fenster-Markierung & rote Köpfe (scoped) ======= */
/* ===================================================================== */
.spa-detail-card .spa-grid thead th.in-window{
  background:#e7f7ec !important;border-color:#86efac !important;color:#065f46 !important;
}
.spa-detail-card .spa-grid thead th:not(.in-window):not(.rowlabel):not(.row-label){
  background:#fee2e2;border-color:#f87171;color:#7f1d1d;
}

/* Detail: 1. Spalte sticky */
.spa-detail-card .spa-grid th.rowlabel,
.spa-detail-card .spa-grid .row-label{
  position:sticky;left:0;z-index:3;background:#fff;box-shadow:2px 0 0 rgba(0,0,0,.06);
  min-width:9rem;max-width:15rem;
}
.spa-detail-card .spa-grid thead th.rowlabel,
.spa-detail-card .spa-grid thead .row-label{z-index:4}

/* ===================================================================== */
/* ========================= Rechtsdock für Icons ======================= */
/* ===================================================================== */
.spa-summary td .spa-ico-dock{
  position:absolute; right:.40rem; top:.32rem;
  width:38px; height:100%; display:flex; align-items:flex-start; justify-content:flex-end;
  pointer-events:none;
}
/* Pfeile (Wind/Böen) */
.spa-ico-dock svg.spa-arrow2{width:28px;height:18px;display:block}
.spa-ico-green line, .spa-ico-green path{stroke:#16a34a}
.spa-ico-red   line, .spa-ico-red   path{stroke:#dc2626}
.spa-ico-dock .is-gust line.shaft{stroke-dasharray:4 3}

/* Regen-Kuchen */
.spa-ico-dock .spa-pie{
  width:18px;height:18px;border-radius:50%;
  background:conic-gradient(rgba(37,99,235,.45) calc(var(--p,0)*1%), rgba(0,0,0,0) 0);
  outline:1px solid rgba(0,0,0,.15);
}

/* Thermik / Cloudbase */
.spa-ico-dock svg.spa-therm{width:16px;height:20px}
.spa-ico-green.spa-therm *{stroke:#16a34a}
.spa-ico-red.spa-therm   *{stroke:#dc2626}
.spa-ico-dock svg.spa-cb{width:22px;height:100%;opacity:.6}

.spa-ico-dock svg.spa-cb{
  width:22px;
  height:calc(100% - 2px);
  opacity:.6;
  transform:translateX(6px); /* schiebt die Wolke exakt unter die anderen Icons */
}

/* Regen: Text rot bei Überschreitung */
.spa-summary td.is-rain-warn{ color:#dc2626; }
/* Wind: Text rot bei Überschreitung */
.spa-summary tr[data-row="wind"] td.is-wind-warn { color:#dc2626; }
/* Böen: Text rot bei Überschreitung */
.spa-summary tr[data-row="gust"] td.is-gust-warn { color:#dc2626; }
/* Thermik: Text rot bei Überschreitung */
.spa-summary tr[data-row="therm"] td.is-therm-warn { color: #dc2626; }
/* Cloud base: Text rot bei Überschreitung */
.spa-summary tr[data-row="cb"] td.is-cb-warn { color:#dc2626; }



/* === FIX: Summary → Wetter/°C nur mobil extra Abstand, Desktop bleibt kompakt === */

/* Mobil (bis 640px): Platz für die Kopf-Icons schaffen */
@media (max-width:640px){
  .spa-summary .spa-grid tbody tr[data-row="wx"] td{
    padding-top: 1.6rem; /* bei Bedarf 1.4–1.8rem feinjustieren */
  }
  .spa-summary .spa-grid tbody tr[data-row="wx"] td .t{
    position: relative;
    z-index: 2; /* Temperatur liegt sicher über eventuellen Overlays */
  }
}