/* ─────────────────────────────────────────────
   SCHWIMMKURS MANAGER – FRONTEND v1.4
   ───────────────────────────────────────────── */

/* Nativer Select unsichtbar aber im DOM */
.skm-hidden-select {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
}

/* ── SWATCHES CONTAINER ──────────────────────── */
.skm-swatches-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 6px;
}

/* ── SWATCH – RECHTECKIG, KEIN PUNKT ────────── */
.skm-swatch {
    --skm-farbe: #00407c;
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 10px 14px;
    border: 2px solid #d0dce6;
    border-radius: 0;                 /* keine runden Ecken */
    background: #f5f8fa;
    cursor: pointer;
    user-select: none;
    min-width: 130px;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.skm-swatch:hover {
    border-color: var(--skm-farbe);
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,64,124,.1);
}

/* Ausgewählt: farbiger linker Balken + Rahmen */
.skm-swatch--selected {
    border-color: var(--skm-farbe) !important;
    background: #fff !important;
    border-left-width: 4px;
    box-shadow: 0 3px 14px rgba(0,64,124,.12) !important;
}
.skm-swatch--selected .skm-swatch-label {
    color: var(--skm-farbe);
    font-weight: 700;
}

/* Ausgebucht */
.skm-swatch--ausgebucht {
    opacity: .4;
    cursor: not-allowed !important;
    pointer-events: none;
    background: #f0f0f0;
}
.skm-swatch--ausgebucht .skm-swatch-label {
    text-decoration: line-through;
    color: #999;
}

/* Text-Elemente */
.skm-swatch-label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: #1a3a4a;
    line-height: 1.3;
    white-space: nowrap;
}

.skm-swatch-preis {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #1a7a3c;
    line-height: 1.2;
}

/* Badges */
.skm-badge {
    display: inline-block;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 2px 6px;
    border-radius: 2px;
}
.skm-badge--ausgebucht { background: #fde8e8; color: #b00; }
.skm-badge--rot        { background: #fde8e8; color: #b00; }
.skm-badge--wenig      { background: #fff3cd; color: #7a5500; }

/* ── DETAIL-PANEL ────────────────────────────── */
.skm-detail-panel {
    margin-top: 18px;
    box-shadow: 0 4px 24px rgba(0,64,124,.12);
}

.skm-detail-inner {
    position: relative;
    background: #fff;
    border: 1px solid #c8dff0;
    border-top: 3px solid #00407c;
    padding: 20px 20px 16px;
}

.skm-detail-close {
    position: absolute;
    top: 10px; right: 12px;
    background: none; border: none;
    font-size: 18px; cursor: pointer;
    color: #999; line-height: 1;
    padding: 3px 7px;
    transition: color .15s;
}
.skm-detail-close:hover { color: #333; }

/* ── DETAIL CONTENT ──────────────────────────── */
.skm-detail-grid { display: grid; gap: 10px; }

.skm-detail-title-row {
    display: flex; align-items: center;
    gap: 10px; margin-bottom: 4px; flex-wrap: wrap;
    padding-bottom: 10px;
    border-bottom: 1px solid #e8f2f9;
}
.skm-detail-dot {
    width: 14px; height: 14px;
    flex-shrink: 0;
}
.skm-detail-title-row h3 {
    margin: 0; font-size: 16px;
    font-weight: 700; color: #0d2a3a; flex: 1;
}
.skm-detail-preis {
    font-size: 16px; font-weight: 800;
    color: #1a7a3c;
    background: #e6f7ee;
    padding: 3px 10px;
    border-radius: 2px;
}

.skm-detail-item {
    display: flex; align-items: flex-start;
    gap: 10px; padding: 8px 10px;
    background: #f4f9fd;
    border-left: 3px solid #d8eaf5;
}
.skm-detail-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.skm-detail-item > div { display: flex; flex-direction: column; gap: 1px; }
.skm-detail-item strong {
    font-size: 10px; text-transform: uppercase;
    letter-spacing: .5px; color: #8a9fae; font-weight: 700;
}
.skm-detail-item span { font-size: 13.5px; font-weight: 500; color: #1a3a4a; }

.skm-plaetze-frei       { color: #1a7a3c !important; font-weight: 700 !important; }
.skm-plaetze-ausgebucht { color: #c0392b !important; font-weight: 700 !important; }
.skm-plaetze-wenig      { color: #e07b00 !important; font-weight: 700 !important; }

.skm-detail-beschreibung {
    font-size: 13px; color: #445;
    line-height: 1.65; padding: 11px 14px;
    background: #fafcff;
    border-left: 3px solid #00407c;
}

@media (min-width: 640px) {
    .skm-detail-grid { grid-template-columns: 1fr 1fr; }
    .skm-detail-title-row, .skm-detail-beschreibung { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
    .skm-swatch { min-width: 100%; }
}