/**
 * File: detail.css
 * Version: 2025-10-13 (Phase 2 Redesign)
 * Purpose: Styles für vertikale Detail-Liste (Mobile First, No-Table)
 */

/* --- Container & Reset --- */
.spa-detail-list {
    width: 100%;
    margin-top: 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    font-size: 0.9rem;
    color: #1f2937;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- Grid Definition --- */
/* Spalten: Zeit | Wetter | Wind (breiter) | Regen | Basis | Thermik */
.spa-row, .spa-row-head {
    display: grid;
    /* Optimiert für Mobile: Zeit knapp, Wind braucht Platz, Rest kompakt */
    //grid-template-columns: 45px 60px 1fr 50px 50px 50px;
	grid-template-columns: 42px 52px minmax(0, 1fr) 48px 48px 48px;
    align-items: center;
}

.spa-row-head svg {
    width: 18px;
    height: 18px;
    fill: currentColor; /* Nimmt die Textfarbe #64748b an */
    display: inline-block;
    vertical-align: middle;
}

/* --- Header (Sticky) --- */
.spa-row-head {
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #64748b;
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 0.6rem 0;
    text-align: center;
}

/* --- Daten-Zeilen --- */
.spa-row {
    border-bottom: 1px solid #f1f5f9;
    padding: 0.5rem 0;
    text-align: center;
    transition: background-color 0.15s ease;
}

.spa-row:last-child {
    border-bottom: none;
}

/* --- Status Farben (Row Background) --- */
.spa-row.is-flyable {
    background-color: #ecfdf5; /* Sanftes Grün */
}
.spa-row.is-neutral {
    background-color: #ffffff;
}

/* --- Zellen-Inhalte --- */
.spa-col {
    padding: 0 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

/* Zeit */
.spa-col-time {
    font-weight: 700;
    color: #374151;
}

/* Wetter (Icon + Temp) */
.spa-wx-wrap {
    display: flex;
    flex-direction: row;    /* Sorgt für das Nebeneinander */
    align-items: center;
    justify-content: center; /* Zentriert das Ganze in der Spalte */
    gap: 2px;                /* Etwas mehr Abstand zwischen Icon und Zahl */
}

.spa-wx-ico { font-size: 1.2rem; line-height: 1; }
.spa-wx-tmp { font-weight: 500; font-size: 0.9em; }

/* Wind (Pfeil + Text) */
.spa-wind-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1px;
}
.spa-wind-text {
    font-weight: 500;
    white-space: nowrap;
}

/* Regen & Basis */
.spa-val-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 0.85em;
    color: #4b5563;
}
.spa-val-ico { font-size: 0.9rem; opacity: 0.7; }

/* --- Alerts & Typografie --- */
.text-red {
    color: #dc2626 !important;
    font-weight: 700;
}
.text-red path {
    fill: #dc2626 !important;
}
.text-gray {
    color: #9ca3af !important;
}

/* --- SVG Pfeil --- */
.spa-arrow-svg {
    display: block;
    width: 20px;
    height: 20px;
    transform-origin: center center;
    /* Rotation wird inline gesetzt */
}
.spa-arrow-svg path {
    fill: #1f2937;
    transition: fill 0.2s;
}

/* --- Header Controls (Level Switch & Close) --- */
.spa-detail-header-top {
    margin-bottom: 0.5rem;
}
.spa-level-switch {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.25rem;
    justify-content: flex-end;
}
.spa-level-switch button {
    border: 1px solid #cbd5e1;
    background: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
}
.spa-level-switch button.active {
    background: #1e293b;
    color: #fff;
    border-color: #1e293b;
}

.spa-detail-close-btn {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
}

/* --- Date Tabs (Neu) --- */
.spa-date-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    overflow-x: auto;
    padding-bottom: 2px;
}
.spa-date-tab {
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
}
.spa-date-tab.active {
    background: #10b981; /* Grün */
    color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.text-green {
    color: #059669 !important; /* Emerald 700 für guten Kontrast */
}
.text-green path {
    fill: #059669 !important;
}

/* Optische Korrektur: Regen-Wahrscheinlichkeit mittig unter den Tropfen schieben */

.spa-row-head > div:nth-child(4) svg {
    display: inline-block !important;
    transform: translateX(-5px) !important; /* Schiebt das Icon hart nach links */
}

.spa-row .spa-col:nth-child(4) .spa-val-wrap {
    transform: translateX(12px) !important;
}

/* --- View Toggle (1h/2h) --- */
/* Logik: Versteckt jede zweite Zeile im 2h-Modus */
.mode-2h .spa-row:nth-of-type(odd) {
    display: none;
}

/* Wrapper für den Toggle-Button */
.spa-view-toggle-wrap {
    display: flex;
    justify-content: center;
    padding: 1rem 0 0.5rem 0;
}

/* Button Styling (Clean UI, Dark) 1 Stundenansicht u 2 Stundenansicht*/
.spa-btn-toggle-view {
    background-color: #ff7400;
    color: #ffffff !important;
    border: none;
    border-radius: 20px;
    padding: 0.4rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-family: inherit;

/* WICHTIG FÜR MOBILE: Entfernt den grauen Schleier beim Tippen */
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}
}

.spa-btn-toggle-view:hover {
    background-color: #ff7400 !important; /* orange Grau beim Hover */
}

/* ALLE interaktiven Zustände abdecken (Hover, Fokus nach Klick, Aktiv) */
.spa-btn-toggle-view:focus, 
.spa-btn-toggle-view:active {
    background-color: #ff7400 !important; /* Helleres Blau */
    outline: none;             /* Entfernt ggf. Standard-Rahmen */
    box-shadow: none;          /* Entfernt ggf. Schatten */
}