/* =================================================================
   Court Planner – Frontend CSS v1.5.1
   Theme-resistent: alle Regeln unter .tcb-wrap mit !important-Reset
   ================================================================= */

/* Harter Reset aller Theme-Einflüsse auf den Wrapper */
.tcb-wrap,
.tcb-wrap * {
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.tcb-wrap {
    max-width: 900px;
    margin: 1.5rem auto;
    background: transparent;
    --tcb-header-color: #016b6b;
}

/* ── Navigationsleiste ── */
.tcb-nav-bar {
    display: flex !important;
    align-items: center !important;
    gap: .75rem !important;
    background: var(--tcb-header-color, #016b6b) !important;
    border-radius: 10px 10px 0 0 !important;
    padding: .85rem 1.1rem !important;
    flex-wrap: nowrap !important;
}

.tcb-nav-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(255,255,255,.18) !important;
    border: 1px solid rgba(255,255,255,.3) !important;
    border-radius: 7px !important;
    color: #fff !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    line-height: 1 !important;
    transition: background .15s !important;
    text-decoration: none !important;
}
.tcb-nav-btn:hover:not(:disabled) { background: rgba(255,255,255,.32) !important; }
.tcb-nav-btn:disabled { opacity: .35 !important; cursor: not-allowed !important; }

.tcb-date-center {
    display: flex !important;
    align-items: center !important;
    gap: .5rem !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.tcb-date-label {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
}

.tcb-cal-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(255,255,255,.18) !important;
    border: 1px solid rgba(255,255,255,.3) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    transition: background .15s !important;
}
.tcb-cal-btn:hover { background: rgba(255,255,255,.32) !important; }

.tcb-date-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}
.tcb-date-hidden.tcb-date-open {
    position: static !important;
    width: 150px !important;
    height: 32px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding: .25rem .5rem !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255,255,255,.4) !important;
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
    font-size: .85rem !important;
}

/* ── Legende ── */
.tcb-legend-bar {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
    padding: .6rem 1.1rem !important;
    background: #f1f5f9 !important;
    border-left: 1px solid #e2e8f0 !important;
    border-right: 1px solid #e2e8f0 !important;
}
.tcb-leg-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: .35rem !important;
    font-size: .82rem !important;
    color: #334155 !important;
}
.tcb-leg-dot {
    display: inline-block !important;
    width: 11px !important;
    height: 11px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}
.tcb-leg-min {
    margin-left: auto !important;
    font-size: .78rem !important;
    color: #94a3b8 !important;
    font-style: italic !important;
}

/* ── Court-Block ── */
.tcb-court {
    border: 1px solid #e2e8f0 !important;
    border-top: none !important;
    background: #fff !important;
}
.tcb-court:last-child { border-radius: 0 0 10px 10px !important; }

.tcb-court-head {
    display: flex !important;
    align-items: center !important;
    gap: .5rem !important;
    padding: .75rem 1.1rem !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
.tcb-court-ico {
    color: var(--tcb-header-color, #016b6b) !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
}

/* ── Zahlmethode ── */
.tcb-payment-block {
    display: flex !important;
    align-items: center !important;
    gap: .75rem !important;
    flex-wrap: wrap !important;
    padding: .65rem 1.1rem !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-top: none !important;
    font-size: .85rem !important;
    color: #475569 !important;
}
.tcb-payment-label {
    font-weight: 600 !important;
    color: #334155 !important;
}
.tcb-payment-option {
    display: inline-flex !important;
    align-items: center !important;
    gap: .3rem !important;
    cursor: default !important;
}
.tcb-payment-hint {
    font-size: .78rem !important;
    color: #94a3b8 !important;
    font-style: italic !important;
    margin-left: auto !important;
}
.tcb-court-interval {
    font-size: .78rem !important;
    color: #6b7280 !important;
    font-weight: 400 !important;
    margin-left: .75rem !important;
    white-space: nowrap !important;
}

.tcb-court-nm {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tcb-no-slots {
    padding: 1.5rem 1.1rem !important;
    color: #94a3b8 !important;
    font-size: .9rem !important;
    font-style: italic !important;
}

/* ── Tabelle ── */
.tcb-tbl {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
}
.tcb-tbl thead { display: table-header-group !important; }
.tcb-tbl tbody { display: table-row-group !important; }
.tcb-tbl tr    { display: table-row !important; }
.tcb-tbl td,
.tcb-tbl th    { display: table-cell !important; }

.tcb-th {
    padding: .55rem .8rem !important;
    background: #f1f5f9 !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    border-bottom: 2px solid #e2e8f0 !important;
    text-align: left !important;
    white-space: nowrap !important;
}
.tcb-th-time   { width: 22% !important; }
.tcb-th-status { width: 33% !important; }
.tcb-th-price  { width: 20% !important; }
.tcb-th-action { width: 25% !important; }
.tcb-td-action { overflow: visible !important; }

.tcb-tr { border-bottom: 1px solid #f1f5f9 !important; }
.tcb-tr:last-child { border-bottom: none !important; }
.tcb-tr-free:hover     { background: #f0fdf4 !important; }
.tcb-tr-occupied       { background: #fff5f5 !important; }
.tcb-tr-mine           { background: #eff6ff !important; }
.tcb-tr-past           { opacity: .5 !important; }
.tcb-tr-partial        { background: #fffbeb !important; }

.tcb-td {
    padding: .6rem .8rem !important;
    vertical-align: middle !important;
    font-size: .88rem !important;
    color: #1e293b !important;
}

.tcb-time-val {
    font-weight: 700 !important;
    font-size: .92rem !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    color: #0f172a !important;
}
.tcb-tr-past .tcb-time-val { color: #94a3b8 !important; }

.tcb-price-val {
    font-size: .82rem !important;
    color: #475569 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

/* ── Badges ── */
.tcb-badge {
    display: inline-block !important;
    padding: .22rem .6rem !important;
    border-radius: 20px !important;
    font-size: .76rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    color: #fff !important;
}
.tcb-b-free    { /* color via style attribute */ }
.tcb-b-occ     { /* color via style attribute */ }
.tcb-b-mine    { background: #2563eb !important; }
.tcb-b-past    { background: #cbd5e1 !important; color: #475569 !important; }
.tcb-b-partial { background: #f59e0b !important; }

/* ── Buttons ── */
.tcb-btn {
    display: inline-block !important;
    padding: .38rem .85rem !important;
    border-radius: 7px !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: none !important;
    outline: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    line-height: 1.5 !important;
    transition: background .15s, opacity .15s !important;
    vertical-align: middle !important;
    /* iOS Safari: verhindert nativen Button-Stil der Text verstecken kann */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    /* iOS: box-sizing sicherstellen */
    box-sizing: border-box !important;
    /* iOS: verhindert Text-Größen-Anpassung */
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}
.tcb-btn:disabled { opacity: .5 !important; cursor: not-allowed !important; }

.tcb-btn-book  { background: var(--tcb-header-color, #016b6b) !important; color: #fff !important; }
.tcb-btn-book:hover:not(:disabled) { opacity: .85 !important; }
.tcb-btn-confirm { background: var(--tcb-header-color, #016b6b) !important; color: #fff !important; }
.tcb-btn-confirm:hover:not(:disabled) { opacity: .85 !important; }
.tcb-btn-cancel { background: #fee2e2 !important; color: #dc2626 !important; border: 1px solid #fecaca !important; }
.tcb-btn-cancel:hover:not(:disabled) { background: #fecaca !important; }
.tcb-btn-login {
    background: #e0f2fe !important;
    color: #0369a1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 4rem !important;
    min-height: 2rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    width: auto !important;
}
.tcb-btn-login span {
    display: inline !important;
    white-space: nowrap !important;
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    overflow: visible !important;
    max-width: none !important;
    width: auto !important;
}
/* Fallback: aria-label als CSS-Content wenn span leer ist */
.tcb-btn-login span:empty::before {
    content: attr(aria-label) !important;
}
.tcb-btn-login:hover { background: #bae6fd !important; }
a.tcb-btn-login,
a.tcb-btn-login:visited,
a.tcb-btn-login:link { color: #0369a1 !important; }
.tcb-btn-ghost  { background: #f1f5f9 !important; color: #475569 !important; border: 1px solid #e2e8f0 !important; }
.tcb-btn-ghost:hover { background: #e2e8f0 !important; }
.tcb-btn-lg     { padding: .6rem 1.3rem !important; font-size: .92rem !important; border-radius: 9px !important; }

.tcb-frist {
    font-size: .76rem !important;
    color: #94a3b8 !important;
    font-style: italic !important;
}

/* ── Modal ── */
/* Versteckt via opacity+pointer-events, NICHT display:none (Theme-Reset-sicher) */
.tcb-modal--hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

.tcb-modal {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
    transition: opacity .18s !important;
}

.tcb-modal-bg {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: rgba(0,0,0,.5) !important;
}

.tcb-modal-box {
    position: relative !important;
    background: #fff !important;
    border-radius: 14px !important;
    padding: 1.8rem !important;
    max-width: 400px !important;
    width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.2) !important;
    text-align: center !important;
    z-index: 1 !important;
}

.tcb-modal-x {
    position: absolute !important;
    top: .9rem !important;
    right: .9rem !important;
    background: #f1f5f9 !important;
    border: none !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 7px !important;
    cursor: pointer !important;
    font-size: .9rem !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}
.tcb-modal-x:hover { background: #e2e8f0 !important; }

.tcb-modal-hd {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: .6rem !important;
}
.tcb-modal-dt {
    font-size: .92rem !important;
    color: #334155 !important;
    margin-bottom: .3rem !important;
}
.tcb-modal-pr {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    color: var(--tcb-header-color, #016b6b) !important;
    margin-bottom: .4rem !important;
}
.tcb-modal-cash {
    font-size: .85rem !important;
    color: #475569 !important;
    background: #fff7ed !important;
    border: 1px solid #fed7aa !important;
    border-radius: 6px !important;
    padding: .4rem .7rem !important;
    margin-bottom: 1rem !important;
}
.tcb-modal-ft {
    display: flex !important;
    gap: .65rem !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

/* ── Feedback ── */
.tcb-feedback--hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.tcb-feedback {
    margin-top: .9rem !important;
    padding: .75rem 1rem !important;
    border-radius: 8px !important;
    font-size: .88rem !important;
    font-weight: 500 !important;
    transition: opacity .2s !important;
}
.tcb-feedback.tcb-ok  { background: #f0fdf4 !important; color: #15803d !important; border: 1px solid #bbf7d0 !important; }
.tcb-feedback.tcb-err { background: #fef2f2 !important; color: #dc2626 !important; border: 1px solid #fecaca !important; }

/* ── Loading ── */
.tcb-wrap.tcb-loading { opacity: .5 !important; pointer-events: none !important; }

/* ── Tabs ── */
.tcb-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: .4rem !important;
    border-bottom: 3px solid var(--tcb-header-color, #016b6b) !important;
    margin-bottom: 1.2rem !important;
    padding: .5rem .5rem 0 .5rem !important;
    background: #f8fafc !important;
    border-radius: 10px 10px 0 0 !important;
    scrollbar-width: none !important;
}
.tcb-tabs::-webkit-scrollbar { display: none !important; }

.tcb-tab {
    flex-shrink: 0 !important;
    padding: .55rem 1.25rem !important;
    border: 2px solid #cbd5e1 !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;
    background: #fff !important;
    color: #475569 !important;
    font-size: .92rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background .15s, color .15s, border-color .15s !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    margin-bottom: -3px !important;
    letter-spacing: .01em !important;
}
.tcb-tab:hover {
    background: #f0fdf4 !important;
    color: var(--tcb-header-color, #016b6b) !important;
    border-color: var(--tcb-header-color, #016b6b) !important;
}
.tcb-tab--active {
    background: #fff !important;
    color: var(--tcb-header-color, #016b6b) !important;
    font-weight: 700 !important;
    border-color: var(--tcb-header-color, #016b6b) !important;
    border-bottom: 3px solid #fff !important;
    box-shadow: 0 -2px 6px rgba(0,0,0,.06) !important;
}

/* Panel: hidden via HTML-Attribut, sichtbar wenn aktiv */
.tcb-court--panel[hidden] { display: none !important; }
.tcb-court--panel { display: block !important; }

/* Buchungstakt-Zeile unter Tab-Inhalt */
.tcb-court-interval-bar {
    font-size: .8rem !important;
    color: #6b7280 !important;
    margin-bottom: .6rem !important;
    padding: .25rem 0 !important;
}

/* ── Platz: Nicht buchbar ── */
.tcb-court-offline {
    display: flex !important;
    align-items: flex-start !important;
    gap: .6rem !important;
    background: #fffbeb !important;
    border: 1px solid #fcd34d !important;
    border-radius: 8px !important;
    padding: .85rem 1rem !important;
    margin: .5rem 0 1rem !important;
    font-size: .92rem !important;
    color: #92400e !important;
    line-height: 1.45 !important;
}
.tcb-offline-icon {
    font-size: 1.2rem !important;
    flex-shrink: 0 !important;
    margin-top: .05rem !important;
}
.tcb-offline-text {
    flex: 1 !important;
}

/* ── 30-Min-Slot optisch schmäler ── */
.tcb-tr-half td { padding-top: .25rem !important; padding-bottom: .25rem !important; }
.tcb-tr-half .tcb-time-val { font-size: .85rem !important; color: #555 !important; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .tcb-th-price { display: none !important; }
    .tcb-td-price { display: none !important; }
    .tcb-th-time  { width: 30% !important; }
    .tcb-th-status { width: 40% !important; }
    .tcb-th-action { width: 30% !important; }
    .tcb-date-label { font-size: .85rem !important; }

    /* Modal auf kleinen Screens: volle Breite, scrollbar */
    .tcb-modal { padding: .5rem !important; align-items: flex-end !important; }
    .tcb-modal-box {
        border-radius: 14px 14px 0 0 !important;
        max-height: 85vh !important;
        padding: 1.4rem 1.1rem !important;
    }

    /* Buttons im Modal nebeneinander bleiben möglich */
    .tcb-modal-ft { flex-direction: column !important; gap: .5rem !important; }
    .tcb-btn-lg { width: 100% !important; }
}