/*
 * Datei: spa-matrix.css
 * Beschreibung: Styles für die Startplatz Ampel (Karten-Layout)
 * Version: 2.2.0 (Final Desktop Grid)
 */
.spa-wrap{--g:#16a34a;--r:#ef4444;--q:#94a3b8;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.spa-wrap{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.spa-wrap,.spa-wrap *{pointer-events:auto}

/* === KOPFBEREICH / FILTER === */
.spa-ctrl{display:flex;flex-direction:column;gap:.5rem;margin:.5rem 0}
.spa-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.spa-row-auth{justify-content:flex-end}
.spa-row-info{justify-content:flex-start}
.spa-row-levels{justify-content:flex-start}
.spa-row-filter{justify-content:flex-start}
.spa-ctrl .spa-row-info{display:none}

.spa-authlink a{font-weight:700;text-decoration:none;border-bottom:1px dashed transparent}
.spa-authlink a:hover{border-bottom-color:#cbd5e1}
.spa-badge{font-size:.72rem;border:1px solid #e5e7eb;border-radius:.4rem;padding:.15rem .35rem;color:#475569;background:#f8fafc}
.spa-manage-link{margin-left:.5rem;text-decoration:underline;}

/* Dropdowns (Modern Pill Style - Fix Text/Arrow) */
.spa-level-dropdown select,
.spa-row-table-filter .spa-dd select,
.spa-dd select {
  box-sizing: border-box !important;
  display: inline-block !important;
  
  /* Reset Height: Lass Padding die Höhe bestimmen */
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  
  /* Text & Spacing */
  padding: 4px 40px 4px 16px !important; /* Ausgeglichenes Padding */
  line-height: normal !important; /* Browser berechnet Platz für g/j korrekt */
  font-size: 0.95rem !important;
  margin: 0 !important;
  
  /* Style */
  border: 1px solid #cbd5e1 !important;
  border-radius: 99px !important;
  background-color: #fff !important;
  color: #334155 !important;
  
  /* Arrow Icon */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px !important;
  
  -webkit-appearance: none !important;
  appearance: none !important;
  min-width: 160px;
}

.spa-level-dropdown select:hover,
.spa-row-table-filter .spa-dd select:hover {
  border-color: #94a3b8;
  background-color: #f8fafc;
}

.spa-level-dropdown select:focus,
.spa-row-table-filter .spa-dd select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.spa-dd{display:flex;align-items:flex-start;gap:.45rem}
.spa-row-levels .spa-dd{margin-right:.6rem}
.spa-levels { display: none; }


/* === NEU: TABS (TAGESAUSWAHL) - STICKY === */
.spa-tabs {
  display: flex;
  width: 100%;
  gap: 2px;
  /* Sync-Werte: */
  min-height: 56px; 
  margin-bottom: 0.5rem !important;
  align-items: center; /* Buttons vertikal zentrieren */
  
  /* Bestehende Sticky-Styles beibehalten */
  position: -webkit-sticky;
  position: sticky;
  top: 0; 
  z-index: 100;
  background: #f1f5f9;
  padding-top: 5px;
  padding-bottom: 5px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	
/* NEU: 10px Abstand links/rechts für Symmetrie */
  padding: 5px 10px;

}
.spa-tab-btn {
  flex: 1;
  padding: 0.6rem 0.2rem;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  background-color: #f1f5f9;
  color: #64748b;
  border-radius: 4px;
  transition: all 0.2s ease;
  user-select: none;
}

.spa-tab-btn:hover { background-color: #e2e8f0; }
.spa-tab-btn.active {
  background-color: #334155;
  color: #ffffff;
  border-color: #334155;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}


/* === CARD LAYOUT === */
#spa-list-container {
  display: flex;
  flex-direction: column;
}

.spa-card {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box !important;
}

.spa-card-header {
  padding: 0.6rem 0.8rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  background: #fff;
}

.spa-card-title-wrap { display: flex; flex-direction: column; gap: 0.25rem; }

.spa-card-title { display: block; line-height: 1.3; }
   .spa-card-title .spa-place-name { display: inline-block; margin-bottom: 0.2rem; }

.spa-card-title .spa-arrow-mini { display: flex; align-items: center; height: auto; margin: 0; padding: 0; }
.spa-card-name { font-size: 1.1rem; font-weight: 700; color: #0f172a; line-height: 1.3; }
.spa-card-meta { display: flex; align-items: center; gap: 0.5rem; }

.spa-card-toolbar {
  display: flex; align-items: center; justify-content: flex-end; gap: 0; padding: 0; margin-top: -2px;
}
.spa-card-toolbar button {
  background: transparent; border: none; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; width: 32px; height: 32px;
  padding: 0; margin: 0; position: relative; 
}
.spa-card-toolbar button:hover { opacity: 0.7; transform: scale(1.1); }

/* Icons */
.spa-star svg { width: 20px; height: 20px; display: block; margin: auto; }
.spa-link-toggle { font-size: 19px; line-height: 1; transform: translateY(1px); font-family: "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.spa-map-pan-toggle svg { width: 18px; height: 18px; display: block; margin: auto; }
.spa-detail-toggle { font-size: 19px; line-height: 1; transform: translateY(1px); font-family: "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }

/* Footer Bar */
.spa-card-bar {
  padding: 0.4rem 0.8rem; display: flex; justify-content: space-between;
  align-items: center; border-top: 1px solid rgba(0,0,0,0.05);
  font-weight: 600; font-size: 0.95rem; min-height: 2rem;
}
.spa-bg-green { background-color: #86efac; color: #064e3b; }
.spa-bg-red   { background-color: #fca5a5; color: #7f1d1d; }
.spa-bg-gray  { background-color: #e2e8f0; color: #475569; }
.spa-bg-blue  { background-color: #bae6fd; color: #0c4a6e; }

/* Basiselemente */
.spa-chip{display:inline-block;min-width:3.6rem;padding:.18rem .45rem;border-radius:.5rem;text-align:center;font-weight:700;color:#0f172a;border:1px solid rgba(0,0,0,.06);cursor:pointer;user-select:none}
.spa-green{background:rgba(22,163,74,.18);border-color:rgba(22,163,74,.45)}
.spa-red{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.45)}
.spa-gray{background:rgba(148,163,184,.18);border-color:rgba(148,163,184,.45)}

.spa-arrow-mini{display:inline-block;line-height:0;transform:rotate(var(--spa-rot,0deg));transform-origin:50% 50%}
.spa-arrow-mini svg{display:block}
.spa-arrow-mini path{fill:#16a34a}
.spa-day-wrapper { display: inline-flex; position: relative; margin-right: 2px; vertical-align: middle; opacity: 0.5; transition: opacity 0.2s ease;}
.spa-day-wrapper.is-active-day::before {
  content: ""; 
  position: absolute; 
  top: -6px; /* Leicht angepasst, damit der Punkt etwas "Luft" zum Icon hat */
  left: 50%; 
  transform: translateX(-50%);
  
  /* NEU: Punkt statt Dreieck */
  width: 5px; 
  height: 5px; 
  background-color: #334155; /* Die Farbe des alten Pfeils */
  border-radius: 50%;        /* Macht das Quadrat rund */
  z-index: 10;
  
  /* WICHTIG: Die alten Border-Eigenschaften entfernen/überschreiben */
  border: none; 
}
.spa-day-wrapper.is-active-day {
     opacity: 1 !important;
   }

/*.spa-day-wrapper:hover { opacity: 1; } */

.spa-arrow-mini.status-green .spa-sector-bg { fill: var(--g, #16a34a); }
.spa-arrow-mini.status-red   .spa-sector-bg { fill: var(--r, #ef4444); }
.spa-arrow-mini.status-gray  .spa-sector-bg { fill: var(--q, #94a3b8); }
.spa-sector-icon .spa-sector-bg { fill: var(--g, #16a34a); }
.spa-arrow-sec{ display:inline-block; } 
.spa-card.spa-status-red .spa-sector-icon .spa-sector-bg,
.spa-arrow-sec.spa-icon-status-red .spa-sector-icon .spa-sector-bg { fill: var(--r, #ef4444); }
.spa-card.spa-status-gray .spa-sector-icon .spa-sector-bg,
.spa-arrow-sec.spa-icon-status-gray .spa-sector-icon .spa-sector-bg { fill: var(--q, #94a3b8); }

.spa-star{appearance:none;border:none;background:none;padding:0;margin:0;width:20px;height:20px;cursor:pointer;line-height:0}
.spa-star path{fill:none;stroke:#f59e0b;stroke-width:1.8}
.spa-star.fav path{fill:#f59e0b;stroke:#f59e0b}

.spa-link-menu { display: none; position: fixed; z-index: 1050; margin: 0; padding: 0.5rem 0; background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); min-width: 160px; list-style: none; }
.spa-link-menu.open { display: block; }
.spa-link-menu button { display: block; padding: 0.4rem 1rem; margin: 0; font-size: 0.9em; color: #334155; background: none; border: none; width: 100%; text-align: left; cursor: pointer; }
.spa-link-menu button:hover { background-color: #f1f5f9; color: #0f172a; }

.spa-link-menu button:disabled { opacity: 0.45; cursor: not-allowed; }
.spa-link-menu button:disabled:hover { background-color: transparent; color: #334155; }

.spa-row-table-filter { display: flex; align-items: center; gap: 0rem; margin-top: 0rem; }
.spa-btn-refresh { appearance: none; border: 1px solid #d0d7de; background: #fff; border-radius: 8px; padding: 0.35rem; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #334155; line-height: 0; }
.spa-btn-refresh:hover { background: #f8fafc; border-color: #0ea5e9; color: #0ea5e9; }
.spa-btn-refresh svg { width: 20px; height: 20px; }

@keyframes spa-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.spa-spinner { width: 18px; height: 18px; border: 3px solid rgba(14, 165, 233, 0.2); border-top-color: #0ea5e9; border-radius: 50%; animation: spa-spin 0.8s linear infinite; margin-left: 0.25rem; }
.spa-map-icon.spa-arrow-sec { display: inline-block !important; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.spa-weather-wrap { display: flex; align-items: center; gap: 0.3rem; }
.spa-bar-temp { font-weight: 400; opacity: 0.9; }
.spa-card-title .spa-place-name { font-weight: 700; }
.spa-bar-time { font-weight: 400; }

@media (min-width: 500px) {
    .spa-row-levels label.spa-dd + label.spa-dd { margin-left: 0; }
}

@media (max-width:680px){
  .spa-row-auth{justify-content:flex-end}
  .spa-row-levels{flex-wrap:wrap}
  .spa-tabs { top: 5px; }
  #spa-list-container { padding: 0; }
  .spa-card-title { display: block; }
  .spa-card-title .spa-place-name { display: inline-block; margin-bottom: 0.2rem; }
}

button.leaflet-control-mylocation {
    background-color: #fff; border: none; width: 30px; height: 30px; line-height: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; color: #464646; transition: background-color 0.2s, color 0.2s;
}
button.leaflet-control-mylocation:hover { background-color: #f4f4f4; color: #000; }

/* === DESKTOP GRID LAYOUT (ab 900px) === */
@media (min-width: 900px) {
  .spa-grid-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(0, 0.8fr);
    gap: 0; 
    align-items: start;
  }

  .spa-col-left {
    position: -webkit-sticky;
    position: sticky;
    top: 0 !important; /* FIX: Geändert von 1rem auf 0 für Sync mit Tabs */
    z-index: 90;
  }

  /* Karte */
  .spa-col-left #spa-map-instance {
    height: 75vh !important;
    min-height: 500px;
    width: 100%;
    margin-top: 0 !important; 
  }

  /* Filter-Container (Links) */
  .spa-col-left .spa-ctrl {
    min-height: 56px; 
    margin: 0 0 0.5rem 0 !important; 
    background-color: #f1f5f9; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); 
    display: flex;
    flex-direction: row;
    align-items: center; 
    padding: 0 10px;
    gap: 1rem;
    border-radius: 4px 0 0 4px;
  }
}

/* === STATUS COLORS (HW WIN) === */
.hw-win-missing { color: #ef4444; } /*rot*/
/* .hw-win-active { color: #16a34a; }  /*grün*/
.hw-win-active { color: #000000; } /*schwarz*/


/* === WIND INFO (CENTER) === */


.spa-bar-center {
/* ================================= */
/*display: none;   /* unsichtbar */
 display: flex; /* sichtbar */
/* ================================= */
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.spa-wind-arrow {
  display: block;
  width: 14px;
  height: 14px;
  transform-origin: 50% 50%;
  transform: rotate(calc(var(--rot, 0deg) + 180deg));
}

.spa-wind-arrow svg {
	display: block;
  	display: block;
  	width: 100%;
  	height: 100%;
}

/* Roter Pfeil (wie im Screenshot) */
.spa-wind-arrow path {
  fill: #334155; 
}

/* Alert Styles */
   .spa-text-red {
     color: #dc2626 !important;
   }
   
   .spa-wind-arrow.spa-alert path {
     fill: #dc2626 !important;
   }

spa-wind-text {
 font-weight: 700;
  color: #334155;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* Success Styles */
   .spa-text-green {
     color: #16a34a !important;
   }
   
   .spa-wind-arrow.spa-success path {
     fill: #16a34a !important;
   }
/* === SORTIER-MODAL (Overlay + Dialog) === */
.spa-sort-modal{
  position:fixed;
  top:0;right:0;bottom:0;left:0;
  width:100%;
  height:100%;
  display:none;

  align-items:center;
  justify-content:center;
  padding:1rem;
  box-sizing:border-box;
  z-index:1100; /* > 1050 (.spa-link-menu) */
}

.spa-sort-modal:not([hidden]){
  display:flex;
}


.spa-sort-modal-backdrop{
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  width:100%;
  height:100%;
  background:rgba(15,23,42,0.45);
  cursor:pointer;
  z-index:1100;
}

.spa-sort-modal-dialog{
  position:relative;
  z-index:1110;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:6px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  width:92vw;
  max-width:520px;
  max-height:calc(100vh - 2rem);
  overflow:auto;
  padding:1rem;
  box-sizing:border-box;
}

.spa-sort-modal-dialog label{
  display:flex;
  align-items:center;
  gap:0.5rem;
  padding:0.4rem 0.25rem;
  margin:0.25rem 0;
  cursor:pointer;
  user-select:none;
}

.spa-sort-modal-dialog input[type="radio"]{
  margin:0;
}

#spa-sort-modal-cancel,
#spa-sort-modal-ok{
  appearance:none;
  border:1px solid #cbd5e1;
  background:#fff;
  color:#334155;
  padding:0.5rem 0.85rem;
  border-radius:6px;
  cursor:pointer;
  font-weight:600;
  line-height:1.1;
}

#spa-sort-modal-cancel,
#spa-sort-modal-ok{
  margin-top:0.35rem; /* kleiner Abstand zum Rahmen darüber */
}

#spa-sort-modal-cancel{
  margin-left:auto;
}

#spa-sort-modal-ok{
  margin-left:0.5rem;
}


#spa-sort-modal-cancel:hover{
  background:#f8fafc;
}

#spa-sort-modal-ok{
  background:#334155;
  border-color:#334155;
  color:#ffffff;
}

#spa-sort-modal-ok:hover{
  opacity:0.95;
}