/**
 * Court Planner – Grid-View CSS v1.9.0
 * Scoped unter .tcb-grid-wrap – keine Auswirkung auf andere Seitenelemente.
 */

/* ── Variablen (Fallbacks falls PHP-Inline-Style fehlt) ───────── */
.tcb-grid-wrap {
    --tcb-header-color:   #016b6b;
    --tcb-color-free:     #d4f7dc;
    --tcb-color-occ:      #f87171;
    --tcb-color-mine:     #60a5fa;
    --tcb-color-blocked:  #94a3b8;
    --tcb-row-h:          30px;    /* Höhe 1 Slot (30 Min) */
    --tcb-time-w:         52px;    /* Breite Zeitachse */
    --tcb-court-min-w:    80px;    /* Min-Breite einer Platzspalte */
}

/* ── Basis-Wrapper ────────────────────────────────────────────── */
.tcb-grid-wrap {
    font-family: inherit;
    font-size: .9rem;
    color: #1e293b;
    margin: 0 auto;
    max-width: 100%;
    position: relative;
}

/* ── Lade-Overlay ─────────────────────────────────────────────── */
.tcb-grid-loading {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    font-weight: 600;
    color: var(--tcb-header-color);
    border-radius: 8px;
}

/* ── Äußerer Scroll-Container ─────────────────────────────────── */
.tcb-grid-outer {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-top: .5rem;
    position: relative;
}

/* ── Scroll-Innenbereich: Zeitachse + Tage ────────────────────── */
.tcb-grid-scroll {
    display: flex;
    min-width: min-content;
}

/* ── Zeitachsen-Spalte (links + rechts) ───────────────────────── */
.tcb-grid-time-col {
    flex-shrink: 0;
    width: var(--tcb-time-w);
    position: sticky;
    z-index: 10;
    background: #fff;
}
.tcb-grid-time-left  { left: 0;  border-right: 2px solid #e2e8f0; }
.tcb-grid-time-right { right: 0; border-left:  2px solid #e2e8f0; }

.tcb-grid-time-hd {
    height: 42px; /* Platzhalter für Datums-/Platzkopf */
    background: var(--tcb-header-color);
    border-bottom: 1px solid rgba(255,255,255,.2);
}

.tcb-grid-time-cell {
    height: var(--tcb-row-h);
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
    font-size: .72rem;
    font-weight: 600;
    color: #64748b;
    box-sizing: border-box;
}
.tcb-grid-time-left  .tcb-grid-time-cell { justify-content: flex-end; padding-right: 5px; }
.tcb-grid-time-right .tcb-grid-time-cell { justify-content: flex-start; padding-left: 4px; }
.tcb-time-hour  { border-top: 1px solid #cbd5e1; }
.tcb-time-half  { border-top: 1px dashed #e2e8f0; }

/* ── Tages-Gruppen ────────────────────────────────────────────── */
.tcb-grid-days-wrap {
    display: flex;
    flex: 1 1 auto;
}

.tcb-grid-day {
    flex: 1 1 auto;
    min-width: calc(var(--tcb-court-min-w) * 2); /* mind. 2 Plätze sichtbar */
    border-right: 2px solid #cbd5e1;
}
.tcb-grid-day:last-child { border-right: none; }

/* ── Tag-Kopf: Datum + Platznamen ─────────────────────────────── */
.tcb-grid-day-hd {
    height: 42px;
    background: var(--tcb-header-color);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 8;
}

.tcb-grid-day-label {
    font-size: .75rem;
    font-weight: 700;
    text-align: center;
    padding: 2px 4px 0;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.tcb-grid-court-heads {
    display: flex;
    flex: 1;
}
.tcb-grid-court-head {
    flex: 1 1 0;
    min-width: var(--tcb-court-min-w);
    font-size: .72rem;
    font-weight: 600;
    text-align: center;
    padding: 2px 2px 0;
    border-left: 1px solid rgba(255,255,255,.15);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255,255,255,.95);
}
.tcb-grid-court-head:first-child { border-left: none; }

/* ── Grid-Body: das eigentliche Buchungsraster ────────────────── */
.tcb-grid-body {
    display: grid;
    /* grid-template-columns wird per JS gesetzt: repeat(N, 1fr) */
    /* grid-template-rows  wird per JS gesetzt: repeat(28, 30px) */
    position: relative;
}

/* Raster-Hintergrundlinien */
.tcb-grid-body::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent calc(var(--tcb-row-h) - 1px),
            #e2e8f0 calc(var(--tcb-row-h) - 1px),
            #e2e8f0 var(--tcb-row-h),
            transparent var(--tcb-row-h),
            transparent calc(var(--tcb-row-h) * 2 - 1px),
            #f1f5f9 calc(var(--tcb-row-h) * 2 - 1px),
            #f1f5f9 calc(var(--tcb-row-h) * 2)
        );
    pointer-events: none;
    z-index: 0;
}

/* ── Zelle: freier Slot ───────────────────────────────────────── */
.tcb-grid-cell {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    cursor: pointer;
    transition: filter .1s;
}
.tcb-grid-cell:hover { filter: brightness(.92); }

.tcb-grid-cell--free {
    background: var(--tcb-color-free);
    border: 1px solid rgba(0,0,0,.06);
}
.tcb-grid-cell--free:active { filter: brightness(.85); }

/* ── Zelle: belegt (andere) ───────────────────────────────────── */
.tcb-grid-cell--occupied {
    background: var(--tcb-color-occ);
    border: 1px solid rgba(0,0,0,.08);
    cursor: default;
}
.tcb-grid-cell--occupied:hover { filter: none; }

/* ── Zelle: eigene Buchung ────────────────────────────────────── */
.tcb-grid-cell--mine {
    background: var(--tcb-color-mine);
    border: 1px solid rgba(0,0,0,.1);
    cursor: pointer;
}

/* ── Zelle: Sperrzeit ─────────────────────────────────────────── */
.tcb-grid-cell--blocked {
    background: var(--tcb-color-blocked);
    border: 1px solid rgba(0,0,0,.08);
    cursor: not-allowed;
}
.tcb-grid-cell--blocked:hover { filter: none; }

/* ── Zelle: vergangen / außerhalb Horizont ────────────────────── */
.tcb-grid-cell--past,
.tcb-grid-cell--disabled {
    background: #f8fafc;
    opacity: .45;
    cursor: not-allowed;
}
.tcb-grid-cell--past:hover,
.tcb-grid-cell--disabled:hover { filter: none; }

/* ── Zellinhalt ───────────────────────────────────────────────── */
.tcb-grid-cell-inner {
    position: absolute;
    inset: 1px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 1px 3px;
}

.tcb-grid-cell-name {
    font-size: .68rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.tcb-grid-cell-dur {
    font-size: .62rem;
    color: rgba(255,255,255,.85);
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
}

/* ── Preiszonen-Hintergrundstreifen ───────────────────────────── */
.tcb-grid-zone {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 0;
    /* background + top + height werden per JS gesetzt */
}

/* ── Preis in Zeitachse ───────────────────────────────────────── */
.tcb-grid-time-price {
    font-size: .6rem;
    color: var(--tcb-header-color);
    font-weight: 700;
    opacity: .8;
    display: block;
    line-height: 1;
    padding-right: 3px;
    text-align: right;
}

/* ── Heutige Zeitleiste (roter Strich) ────────────────────────── */
.tcb-grid-now-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #ef4444;
    z-index: 5;
    pointer-events: none;
}
.tcb-grid-now-line::before {
    content: '';
    position: absolute;
    left: -4px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
}

/* ── Placeholder (Lade-Text) ──────────────────────────────────── */
.tcb-grid-placeholder {
    grid-column: 1 / -1;
    padding: 2rem;
    text-align: center;
    color: #94a3b8;
    font-size: .85rem;
}

/* ── Responsiv: Mobil-Fallback ────────────────────────────────── */
@media (max-width: 768px) {
    /* Grid-View auf Mobil: Scroll horizontal erlaubt, aber
       Zeitachse bleibt sticky. Tages-Gruppen schrumpfen minimal. */
    .tcb-grid-day {
        min-width: calc(var(--tcb-court-min-w) * 1.2);
    }
    .tcb-grid-time-col {
        width: 42px;
    }
    .tcb-grid-time-cell {
        font-size: .65rem;
    }
    .tcb-grid-cell-name {
        font-size: .6rem;
    }
    /* "Heute"-Button auf Mobil ausblenden um Platz zu sparen */
    .tcb-grid-today {
        display: none !important;
    }
}