/* ============================================================
   Tennis Court Reservation Pro – Frontend Styles  v2.0.1
   Theme: Sportlich & farbig (grün/blau Tennis-Feeling)
   CI-Farben werden als CSS-Custom-Properties vom PHP-Backend
   auf #tnp-app gesetzt und hier aufgegriffen.
   ============================================================ */

/* ── Global CSS variables (available everywhere, incl. popup at body level) ── */
:root {
    --tnp-ci-topbar-bg    : #1b5e20;
    --tnp-ci-topbar-bg2   : #0d47a1;
    --tnp-ci-topbar-text  : #ffffff;
    --tnp-ci-primary      : #2e7d32;
    --tnp-ci-datebar-bg   : #388e3c;
    --tnp-ci-datebar-bg2  : #1565c0;
    --tnp-ci-datebar-text : #ffffff;
    --tnp-ci-font         : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --tnp-green-dark  : #1b5e20;
    --tnp-green       : var(--tnp-ci-primary);
    --tnp-green-light : #a5d6a7;
    --tnp-green-pale  : #e8f5e9;
    --tnp-blue-dark   : #0d47a1;
    --tnp-blue        : #1565c0;
    --tnp-blue-light  : #90caf9;
    --tnp-blue-pale   : #e3f2fd;
    --tnp-accent      : #00897b;
    --tnp-danger      : #c62828;
    --tnp-white       : #ffffff;
    --tnp-gray-100    : #f5f5f5;
    --tnp-gray-200    : #eeeeee;
    --tnp-gray-400    : #bdbdbd;
    --tnp-gray-700    : #616161;
    --tnp-gray-900    : #212121;
    --tnp-radius      : 10px;
    --tnp-radius-sm   : 6px;
    --tnp-shadow      : 0 2px 12px rgba(0,0,0,.12);
    --tnp-shadow-lg   : 0 8px 40px rgba(0,0,0,.22);
    --tnp-font        : var(--tnp-ci-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

/* ── Base variables ────────────────────────────────────────── */
.tnp-wrap {
    /* Fallback-Werte – werden durch PHP-Inline-Style auf #tnp-app überschrieben */
    --tnp-ci-topbar-bg    : #1b5e20;
    --tnp-ci-topbar-bg2   : #0d47a1;
    --tnp-ci-topbar-text  : #ffffff;
    --tnp-ci-primary      : #2e7d32;
    --tnp-ci-datebar-bg   : #388e3c;
    --tnp-ci-datebar-bg2  : #1565c0;
    --tnp-ci-datebar-text : #ffffff;
    --tnp-ci-font         : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Abgeleitete semantische Variablen */
    --tnp-green-dark  : #1b5e20;
    --tnp-green       : var(--tnp-ci-primary);
    --tnp-green-mid   : color-mix(in srgb, var(--tnp-ci-primary) 80%, white);
    --tnp-green-light : #a5d6a7;
    --tnp-green-pale  : #e8f5e9;
    --tnp-blue-dark   : #0d47a1;
    --tnp-blue        : #1565c0;
    --tnp-blue-light  : #90caf9;
    --tnp-blue-pale   : #e3f2fd;
    --tnp-accent      : #00897b;
    --tnp-danger      : #c62828;
    --tnp-white       : #ffffff;
    --tnp-gray-100    : #f5f5f5;
    --tnp-gray-200    : #eeeeee;
    --tnp-gray-400    : #bdbdbd;
    --tnp-gray-700    : #616161;
    --tnp-gray-900    : #212121;
    --tnp-radius      : 10px;
    --tnp-radius-sm   : 6px;
    --tnp-shadow      : 0 2px 12px rgba(0,0,0,.12);
    --tnp-shadow-lg   : 0 8px 40px rgba(0,0,0,.22);
    --tnp-font        : var(--tnp-ci-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);

    font-family : var(--tnp-font);
    color       : var(--tnp-gray-900);
    line-height : 1.5;
}

/* ── Top bar ───────────────────────────────────────────────── */
.tnp-topbar {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    flex-wrap       : wrap;
    gap             : 8px;
    background      : linear-gradient(135deg, var(--tnp-ci-topbar-bg) 0%, var(--tnp-ci-topbar-bg2) 100%);
    color           : var(--tnp-ci-topbar-text);
    padding         : 12px 20px;
    border-radius   : var(--tnp-radius) var(--tnp-radius) 0 0;
    box-shadow      : var(--tnp-shadow);
}

.tnp-logo {
    font-size   : 1.15rem;
    font-weight : 700;
    letter-spacing: .3px;
}

.tnp-topbar__right {
    display    : flex;
    align-items: center;
    gap        : 8px;
    flex-wrap  : wrap;
}

.tnp-user {
    font-size  : .88rem;
    opacity    : .85;
}

/* Button-Label – auf Mobile ausgeblendet */
.tnp-btn-label { display: inline; }

/* ── Buttons ───────────────────────────────────────────────── */
.tnp-btn {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    gap             : 5px;
    padding         : 7px 16px;
    border-radius   : var(--tnp-radius-sm);
    font-family     : var(--tnp-font);
    font-size       : .88rem;
    font-weight     : 600;
    cursor          : pointer;
    text-decoration : none;
    border          : 2px solid transparent;
    transition      : background .15s, color .15s, border-color .15s, opacity .15s, transform .1s;
    white-space     : nowrap;
}
.tnp-btn:disabled { opacity: .5; cursor: not-allowed; }

.tnp-btn--primary {
    background : var(--tnp-ci-primary);
    color      : var(--tnp-white);
}
.tnp-btn--primary:hover {
    background : color-mix(in srgb, var(--tnp-ci-primary) 80%, black);
    color      : var(--tnp-white);
}

.tnp-btn--outline {
    background    : transparent;
    border-color  : rgba(255,255,255,.55);
    color         : var(--tnp-white);
}
.tnp-btn--outline:hover { border-color: var(--tnp-white); }

.tnp-btn--accent {
    background : var(--tnp-accent);
    color      : var(--tnp-white);
}
.tnp-btn--accent:hover { filter: brightness(1.1); }

.tnp-btn--danger {
    background : var(--tnp-danger);
    color      : var(--tnp-white);
}
.tnp-btn--danger:hover { filter: brightness(1.1); }

.tnp-btn--sm  { padding: 5px 12px; font-size: .82rem; }
.tnp-btn--nav {
    background    : rgba(255,255,255,.18);
    border-color  : rgba(255,255,255,.3);
    color         : var(--tnp-white);
    font-size     : 1.2rem;
    padding       : 4px 12px;
    border-radius : var(--tnp-radius-sm);
    text-decoration: none;
}
.tnp-btn--nav:hover { background: rgba(255,255,255,.3); }

.tnp-btn--block { width: 100%; margin-top: 8px; }

/* Loading state */
.tnp-btn--loading {
    opacity : .7;
    pointer-events: none;
    position: relative;
}

/* ── Date bar ──────────────────────────────────────────────── */
.tnp-datebar {
    display     : flex;
    align-items : center;
    gap         : 6px;
    flex-wrap   : nowrap;
    overflow-x  : auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background  : linear-gradient(135deg, var(--tnp-ci-datebar-bg) 0%, var(--tnp-ci-datebar-bg2) 100%);
    padding     : 8px 16px;
    color       : var(--tnp-ci-datebar-text);
}
.tnp-datebar::-webkit-scrollbar { display: none; }

/* Buttons & nav arrows inside the datebar inherit the datebar text colour */
.tnp-datebar .tnp-btn--outline {
    border-color : rgba(255,255,255,.5);
    color        : var(--tnp-ci-datebar-text);
}
.tnp-datebar .tnp-btn--nav {
    color : var(--tnp-ci-datebar-text);
}
.tnp-datebar .tnp-datepicker {
    color : var(--tnp-ci-datebar-text);
}
.tnp-datebar .tnp-datebar__label {
    color : var(--tnp-ci-datebar-text);
}
.tnp-datebar .tnp-datebar__sep {
    color : rgba(255,255,255,.4);
}

.tnp-datepicker-form { display: flex; }

.tnp-datepicker {
    background  : rgba(255,255,255,.18);
    border      : 1px solid rgba(255,255,255,.4);
    border-radius: var(--tnp-radius-sm);
    color       : var(--tnp-white);
    padding     : 5px 10px;
    font-size   : .92rem;
    cursor      : pointer;
}
.tnp-datepicker::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }

.tnp-datebar__label {
    font-weight : 600;
    font-size   : .95rem;
    margin-left : 4px;
    flex        : 1;
    white-space : nowrap;
}

.tnp-datebar__sep {
    color   : rgba(255,255,255,.35);
    padding : 0 2px;
    align-self: center;
}
/* ── Platzauswahl-Leiste (eigene Zeile unter Datebar) ────────────── */
.tnp-court-sel {
    display    : flex;
    gap        : 6px;
    flex-wrap  : nowrap;
    overflow-x : auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding    : 6px 20px;
    background : linear-gradient(135deg, var(--tnp-ci-datebar-bg) 0%, var(--tnp-ci-datebar-bg2) 100%);
    border-top : 1px solid rgba(255,255,255,.15);
}
.tnp-court-sel::-webkit-scrollbar { display: none; }
.tnp-court-sel .tnp-btn--outline {
    border-color : rgba(255,255,255,.5);
    color        : var(--tnp-ci-datebar-text);
    white-space  : nowrap;
}
.tnp-court-sel .tnp-btn--primary { white-space: nowrap; }



/* ── Legend (collapsible) ──────────────────────────────────── */
.tnp-legend-wrap {
    background  : var(--tnp-gray-100);
    border-top  : 1px solid var(--tnp-gray-200);
    border-bottom: 1px solid var(--tnp-gray-200);
}

/* Toggle-header (the <summary> element) */
.tnp-legend-toggle {
    display         : flex;
    align-items     : center;
    gap             : 6px;
    padding         : 7px 20px;
    cursor          : pointer;
    font-size       : .82rem;
    font-weight     : 600;
    color           : var(--tnp-gray-700);
    list-style      : none;  /* remove default triangle in Firefox */
    user-select     : none;
}
.tnp-legend-toggle::-webkit-details-marker { display: none; } /* Chrome/Safari */

.tnp-legend-toggle__arrow {
    display    : inline-block;
    width      : 0;
    height     : 0;
    border-left  : 5px solid transparent;
    border-right : 5px solid transparent;
    border-top   : 6px solid var(--tnp-gray-700);
    transition   : transform .2s;
    margin-left  : 2px;
}
.tnp-legend-wrap:not([open]) .tnp-legend-toggle__arrow {
    transform: rotate(-90deg);
}

.tnp-legend {
    display     : flex;
    align-items : center;
    gap         : 8px;
    flex-wrap   : wrap;
    padding     : 8px 20px 12px;
}

.tnp-legend__item {
    padding       : 3px 10px;
    border-radius : 20px;
    font-size     : .8rem;
    font-weight   : 600;
}

.tnp-legend--free {
    background : var(--tnp-gray-200);
    color      : var(--tnp-gray-700);
}

.tnp-legend--blocked {
    background : #e8e8e8;
    color      : #555;
}

/* ── Grid ──────────────────────────────────────────────────── */
.tnp-grid-wrap {
    overflow-x : auto;
    background : var(--tnp-white);
    border-radius: 0 0 var(--tnp-radius) var(--tnp-radius);
    box-shadow : var(--tnp-shadow);
    -webkit-overflow-scrolling: touch;
}

.tnp-grid {
    /* width: auto erlaubt der Tabelle, breiter als der Container zu werden →
     * .tnp-grid-wrap scrollt horizontal wenn viele Plätze vorhanden sind.
     * min-width: 100% füllt trotzdem den Container wenn wenige Plätze da sind. */
    width           : auto;
    min-width       : 100%;
    border-collapse : collapse;
    table-layout    : auto;
}

.tnp-grid__time-head,
.tnp-grid__court-head {
    background    : var(--tnp-green-dark);
    color         : var(--tnp-white);
    padding       : 7px 8px;
    font-size     : .82rem;
    font-weight   : 700;
    text-align    : center;
    letter-spacing: .3px;
    position      : sticky;
    top            : 0;
    z-index        : 3;
    white-space   : nowrap;
}

/* Mindestbreite pro Platz-/Tagesspalte: stellt sicher, dass 4+ Plätze
 * den Viewport überschreiten und horizontales Scrollen auslösen.
 * Der Mobile-Breakpoint überschreibt auf 90px. */
.tnp-grid__court-head {
    min-width: 100px;
}

.tnp-grid__time-head {
    background  : var(--tnp-blue-dark);
    width       : 72px;
    min-width   : 72px;
    white-space : nowrap;
    /* Sticky: fixiert links UND oben (corner cell) */
    left        : 0;
    z-index     : 4;
}

.tnp-grid__court-head { z-index: 3; }

/* Heute-Spalte in Wochenansicht */
.tnp-grid__court-head.tnp-today {
    outline        : 3px solid rgba(255,255,255,.6);
    outline-offset : -3px;
    font-style     : italic;
}

.tnp-grid__time {
    padding     : 6px 10px;
    font-size   : .82rem;
    font-weight : 600;
    color       : var(--tnp-white);
    text-align  : center;
    white-space : nowrap;
    background  : var(--tnp-blue);
    border-right: 2px solid var(--tnp-blue-dark);
    /* Sticky: Zeitspalte bleibt beim horizontalen Scrollen sichtbar */
    position    : sticky;
    left        : 0;
    z-index     : 1;
}

.tnp-grid__row:nth-child(even) .tnp-grid__time {
    background: var(--tnp-blue-dark);
}

/* Heute-Spalte Zellen */
.tnp-today-col {
    outline        : 1px solid rgba(255,215,0,.35);
    outline-offset : -1px;
    background-image: linear-gradient(rgba(255,235,59,.04), rgba(255,235,59,.04));
}

/* Slots – Tagesansicht: etwas mehr Platz */
.tnp-slot {
    padding       : 3px 5px;
    text-align    : center;
    vertical-align: middle;
    font-size     : .82rem;
    border        : 1px solid var(--tnp-gray-200);
    min-height    : 36px;
    transition    : filter .12s, transform .12s, background .12s;
    position      : relative;
    overflow      : hidden;
}

/* Wochenansicht: minimales Padding, mehr Platz für Text */
.tnp-grid--week .tnp-slot {
    padding    : 1px 2px !important;
    font-size  : .75rem;
}
.tnp-grid--week .tnp-slot__label   { font-size: .72rem; }
.tnp-grid--week .tnp-slot__cat,
.tnp-grid--week .tnp-slot__trainer { font-size: .65rem; }
.tnp-grid--week .tnp-slot__time    { font-size: .65rem; }

.tnp-slot--free {
    background : var(--tnp-gray-100);
    color      : var(--tnp-gray-400);
}

.tnp-slot--bookable {
    cursor: pointer;
}
.tnp-slot--bookable:hover {
    background : var(--tnp-green-pale) !important;
    color      : var(--tnp-green-dark) !important;
    filter     : none;
    transform  : scale(1.015);
    z-index    : 2;
}
.tnp-slot--bookable:hover .tnp-slot__free {
    color      : var(--tnp-green);
    font-size  : 1.5rem;
    font-weight: 700;
}

.tnp-slot--booked {
    cursor: default;
}

.tnp-slot--editable {
    cursor: pointer;
}
.tnp-slot--editable:hover {
    filter   : brightness(.92);
    transform: scale(1.01);
    z-index  : 2;
}

.tnp-slot__time {
    display       : block;
    font-size     : .7rem;
    opacity       : .75;
    margin-bottom : 1px;
    letter-spacing: .01em;
    white-space   : nowrap;   /* Zeitangabe niemals umbrechen (verhindert "18:3↵0") */
    overflow      : hidden;
    text-overflow : ellipsis;
}

.tnp-slot__label {
    display    : block;
    font-weight: 700;
    font-size  : .78rem;
    line-height: 1.2;
}

.tnp-slot__cat {
    display    : block;
    font-size  : .68rem;
    opacity    : .8;
    margin-top : 1px;
    line-height: 1.2;
}

.tnp-slot__trainer {
    display    : block;
    font-size  : .68rem;
    opacity    : .85;
    margin-top : 1px;
    font-style : italic;
    line-height: 1.2;
}

.tnp-slot__free {
    font-size  : 1.2rem;
    transition : font-size .12s;
}

/* ── Empty state ───────────────────────────────────────────── */
.tnp-empty {
    padding     : 40px;
    text-align  : center;
    color       : var(--tnp-gray-700);
    background  : var(--tnp-white);
    border-radius: 0 0 var(--tnp-radius) var(--tnp-radius);
    font-size   : 1rem;
}

/* ── Popup ─────────────────────────────────────────────────── */
.tnp-popup {
    position : fixed;
    inset    : 0;
    z-index  : 2147483647; /* Max CSS integer – immer über allem */
    display  : flex;
    align-items: center;
    justify-content: center;
}

.tnp-popup[hidden] { display: none; }

.tnp-popup__backdrop {
    position   : absolute;
    inset      : 0;
    background : rgba(0,0,0,.45);
    backdrop-filter: blur(3px);
}

.tnp-popup__box {
    position      : relative;
    z-index       : 1;
    background    : var(--tnp-white);
    border-radius : var(--tnp-radius);
    box-shadow    : var(--tnp-shadow-lg);
    padding       : 32px 28px 24px;
    width         : 100%;
    max-width     : 400px;
    margin        : 16px;
    animation     : tnpPopIn .18s ease;
    max-height    : 92vh;
    overflow-y    : auto;
}

@keyframes tnpPopIn {
    from { opacity: 0; transform: scale(.93) translateY(12px); }
    to   { opacity: 1; transform: none; }
}

@keyframes tnpSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.tnp-popup__close {
    position    : absolute;
    top         : 12px;
    right       : 14px;
    background  : none;
    border      : none;
    font-size   : 1.1rem;
    cursor      : pointer;
    color       : var(--tnp-gray-700);
    line-height : 1;
    padding     : 4px 6px;
    border-radius: 4px;
    z-index     : 2;
}
.tnp-popup__close:hover { background: var(--tnp-gray-200); }

.tnp-popup__icon {
    font-size  : 2.4rem;
    text-align : center;
    margin-bottom: 8px;
}

.tnp-popup__box h3 {
    margin      : 0 0 8px;
    font-size   : 1.15rem;
    font-weight : 700;
    text-align  : center;
    color       : var(--tnp-gray-900);
}

.tnp-popup__box p {
    color     : var(--tnp-gray-700);
    font-size : .9rem;
    text-align: center;
    margin    : 0 0 16px;
}

.tnp-popup__meta {
    color       : var(--tnp-green-dark) !important;
    font-weight : 700 !important;
    font-size   : .95rem !important;
    margin-bottom: 18px !important;
}

/* Fields */
.tnp-field {
    display       : flex;
    flex-direction: column;
    gap           : 5px;
    margin-bottom : 14px;
}

.tnp-field span {
    font-size  : .82rem;
    font-weight: 600;
    color      : var(--tnp-gray-700);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.tnp-field select,
.tnp-field input[type="text"],
.tnp-field input[type="date"] {
    padding      : 9px 12px;
    border       : 2px solid var(--tnp-gray-200);
    border-radius: var(--tnp-radius-sm);
    font-family  : var(--tnp-font);
    font-size    : .92rem;
    color        : var(--tnp-gray-900);
    background   : var(--tnp-white);
    transition   : border-color .15s;
    width        : 100%;
    box-sizing   : border-box;
}
.tnp-field select:focus,
.tnp-field input[type="text"]:focus,
.tnp-field input[type="date"]:focus {
    outline      : none;
    border-color : var(--tnp-green);
}

/* Actions */
.tnp-popup__actions {
    display       : flex;
    flex-direction: column;
    gap           : 8px;
    margin-top    : 18px;
}
.tnp-popup__actions .tnp-btn {
    width         : 100%;
    padding       : 11px;
    font-size     : .92rem;
}

/* Override outline buttons inside popup */
.tnp-popup__box .tnp-btn--outline {
    border-color : var(--tnp-gray-400);
    color        : var(--tnp-gray-700);
    background   : transparent;
}
.tnp-popup__box .tnp-btn--outline:hover {
    border-color : var(--tnp-gray-700);
    color        : var(--tnp-gray-900);
}

/* Error / Message */
.tnp-error {
    color       : var(--tnp-danger);
    font-size   : .85rem;
    text-align  : center;
    margin-top  : 10px;
    font-weight : 600;
}
.tnp-error[hidden] { display: none; }

.tnp-msg[hidden] { display: none; }

/* ── My Bookings ───────────────────────────────────────────── */
.tnp-my-bookings__header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    margin-bottom   : 14px;
    flex-wrap       : wrap;
    gap             : 8px;
}
.tnp-my-bookings__header h3 {
    margin  : 0;
    font-size: 1.1rem;
    font-weight: 700;
    color   : var(--tnp-gray-900);
}

.tnp-booking-card {
    display       : flex;
    align-items   : center;
    flex-wrap     : wrap;
    gap           : 6px;
    padding       : 12px 16px;
    margin-bottom : 8px;
    background    : var(--tnp-gray-100);
    border-radius : 0 var(--tnp-radius-sm) var(--tnp-radius-sm) 0;
    font-size     : .9rem;
    border-left   : 4px solid var(--tnp-green);
    line-height   : 1.4;
}

.tnp-booking-card__date {
    font-weight : 700;
    color       : var(--tnp-gray-900);
}

.tnp-booking-card__sep {
    color   : var(--tnp-gray-400);
    padding : 0 2px;
}

.tnp-booking-card__badge {
    display       : inline-flex;
    align-items   : center;
    padding       : 2px 8px;
    border-radius : 20px;
    font-size     : .75rem;
    font-weight   : 700;
}

.tnp-booking-card__series {
    font-size : .75rem;
    color     : var(--tnp-gray-400);
}

.tnp-waitlist-card {
    display       : flex;
    align-items   : center;
    flex-wrap     : wrap;
    gap           : 6px;
    padding       : 12px 16px;
    margin-bottom : 8px;
    background    : #fffde7;
    border-radius : 0 var(--tnp-radius-sm) var(--tnp-radius-sm) 0;
    font-size     : .9rem;
    border-left   : 4px solid #f9a825;
}

.tnp-waitlist-badge {
    display       : inline-flex;
    align-items   : center;
    background    : #f9a825;
    color         : #fff;
    padding       : 2px 8px;
    border-radius : 20px;
    font-size     : .75rem;
    font-weight   : 700;
}

.tnp-my-bookings__hint {
    font-size  : .8rem;
    color      : var(--tnp-gray-400);
    margin-top : 4px;
}

.tnp-section-title {
    margin    : 20px 0 10px;
    font-size : 1rem;
    font-weight: 700;
    color     : var(--tnp-gray-700);
}

/* ── Accordion (Meine Buchungen) ───────────────────────────────────────── */
.tnp-acc {
    border        : 1px solid var(--tnp-gray-200);
    border-radius : var(--tnp-radius-sm);
    margin-bottom : 6px;
    overflow      : hidden;
    background    : var(--tnp-white);
}

.tnp-acc--main {
    border-color  : var(--tnp-green-light);
    box-shadow    : var(--tnp-shadow);
    margin-bottom : 0;
}

.tnp-acc__summary {
    display         : flex;
    align-items     : center;
    gap             : 8px;
    padding         : 12px 16px;
    cursor          : pointer;
    list-style      : none;
    user-select     : none;
    background      : var(--tnp-gray-100);
    transition      : background .15s;
}
.tnp-acc__summary::-webkit-details-marker { display: none; }
.tnp-acc__summary:hover { background: var(--tnp-green-pale); }

.tnp-acc--main > .tnp-acc__summary {
    background    : linear-gradient(135deg, var(--tnp-green-dark) 0%, var(--tnp-blue-dark) 100%);
    color         : var(--tnp-white);
    padding       : 14px 18px;
    font-size     : 1rem;
    font-weight   : 700;
}
.tnp-acc--main > .tnp-acc__summary:hover {
    background    : linear-gradient(135deg, var(--tnp-green-mid) 0%, var(--tnp-blue) 100%);
}

.tnp-acc__title {
    flex    : 1;
    font-weight: 600;
}

.tnp-acc__badge {
    display       : inline-flex;
    align-items   : center;
    justify-content: center;
    background    : var(--tnp-green);
    color         : var(--tnp-white);
    border-radius : 20px;
    font-size     : .75rem;
    font-weight   : 700;
    padding       : 2px 8px;
    min-width     : 22px;
}
.tnp-acc--main > .tnp-acc__summary .tnp-acc__badge {
    background: rgba(255,255,255,.25);
}
.tnp-acc__badge--sm    { padding: 1px 6px; font-size: .7rem; }
.tnp-acc__badge--warn  { background: #f9a825; }

/* Chevron arrow – rotates when open */
.tnp-acc__chevron {
    display       : inline-block;
    width         : 10px;
    height        : 10px;
    border-right  : 2px solid currentColor;
    border-bottom : 2px solid currentColor;
    transform     : rotate(-45deg);
    transition    : transform .2s;
    opacity       : .7;
    flex-shrink   : 0;
}
details[open] > .tnp-acc__summary .tnp-acc__chevron {
    transform: rotate(45deg);
}

/* Body */
.tnp-acc__body {
    padding: 12px 14px 6px;
}
.tnp-acc--main > .tnp-acc__body {
    padding: 14px;
}

/* Toolbar (iCal button row) */
.tnp-my-bookings__toolbar {
    display        : flex;
    align-items    : center;
    gap            : 8px;
    margin-bottom  : 12px;
    flex-wrap      : wrap;
}

.tnp-my-bookings__empty {
    color     : var(--tnp-gray-700);
    font-size : .9rem;
    margin    : 4px 0 12px;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 600px) {

    /* Topbar: Benutzername verstecken, Labels in Buttons ausblenden */
    .tnp-topbar  { padding: 10px 14px; gap: 6px; }
    .tnp-user    { display: none; }
    .tnp-btn-label { display: none; }
    .tnp-logo    { font-size: 1rem; }

    /* Datebar: scrollt horizontal, kein Umbruch mehr */
    .tnp-datebar {
        padding  : 6px 10px;
        gap      : 4px;
    }
    .tnp-datebar .tnp-btn--sm  { font-size: .78rem; padding: 5px 9px; }
    .tnp-datebar .tnp-btn--nav { font-size: 1rem;   padding: 3px 9px; }
    .tnp-datepicker { padding: 4px 6px; font-size: .8rem; }
    .tnp-datebar__label { font-size: .78rem; white-space: nowrap; }
    .tnp-datebar__sep { display: none; }
    /* Platzauswahl-Zeile */
    .tnp-court-sel { padding: 4px 10px; gap: 4px; }
    .tnp-court-sel .tnp-btn--sm { font-size: .76rem; padding: 4px 8px; }

    /* Fix: border-collapse:separate verhindert iOS/Safari-Sticky-Overlap-Bug */
    /* Fix: width:auto erlaubt horizontales Überlaufen → Scrollen möglich */
    .tnp-grid {
        border-collapse : separate !important;
        border-spacing  : 0 !important;
        width           : auto !important;   /* nicht mehr 100% – Tabelle darf breiter sein */
        min-width       : 100%;              /* trotzdem mind. Container-Breite füllen */
    }

    /* Mindestbreite pro Platz-/Tagesspalte: stellt sicher, dass 4+ Plätze
     * den Viewport überschreiten und horizontales Scrollen auslösen */
    .tnp-grid__court-head {
        min-width : 90px !important;
        width     : 90px !important;
    }

    /* Horizontal-Scroll auf allen Grid-Varianten freischalten.
     * Das Modern-Style setzt overflow:hidden (für Border-Radius-Clipping),
     * was horizontales Scrollen komplett blockiert – hier überschreiben. */
    .tnp-grid-wrap {
        overflow-x : auto !important;
    }

    /* Spaltenköpfe: deutlich weniger Padding, kein Zeilenumbruch */
    .tnp-grid__time-head,
    .tnp-grid__court-head {
        padding    : 4px 3px !important;
        font-size  : .70rem !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
    }
    .tnp-grid__time-head {
        width     : 46px !important;
        min-width : 46px !important;
        z-index   : 5 !important;
    }
    /* Zeitspalte: kompakter */
    .tnp-grid__time {
        padding      : 3px 2px !important;
        font-size    : .70rem !important;
        font-weight  : 600;
        text-align   : center !important;
        overflow     : hidden !important;
        z-index      : 3 !important;
        box-shadow   : 2px 0 3px rgba(0,0,0,.18);
    }

    /* Freie Slots: kompakter */
    .tnp-slot--free {
        padding        : 0 !important;
        min-height     : 30px !important;
        vertical-align : middle !important;
    }
    .tnp-slot__free { font-size: .9rem; }

    /* Gebuchte / gesperrte Slots: minimaler Rand */
    .tnp-slot--booked,
    .tnp-slot--blocked {
        padding        : 2px 2px !important;
        vertical-align : top !important;
    }
    /* Slot-Inhalt: kleinere Schrift */
    .tnp-slot__time    { font-size: .66rem; }
    .tnp-slot__cat     { font-size: .62rem; }
    .tnp-slot__label   { font-size: .64rem; }
    .tnp-slot__trainer { font-size: .60rem; }
    .tnp-slot__recur   { font-size: .65rem; }

    /* Popup → Bottom Sheet */
    .tnp-popup {
        align-items : flex-end;
    }
    .tnp-popup__box {
        margin        : 0;
        max-width     : 100%;
        width         : 100%;
        border-radius : 18px 18px 0 0;
        padding       : 28px 20px 32px;
        max-height    : 92vh;
        animation     : tnpSlideUp .22s cubic-bezier(.32,.72,0,1);
    }
    /* Zieh-Indikator für Bottom Sheet */
    .tnp-popup__box::before {
        content       : '';
        display       : block;
        width         : 40px;
        height        : 4px;
        border-radius : 2px;
        background    : var(--tnp-gray-200);
        margin        : -12px auto 16px;
    }

    /* Legend */
    .tnp-legend-toggle { padding: 6px 12px; }
    .tnp-legend { padding: 6px 12px 10px; }

    /* My Bookings Cards */
    .tnp-booking-card,
    .tnp-waitlist-card { font-size: .85rem; padding: 10px 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   REGISTRIERUNG & PROFIL FORMULARE
   Funktionieren unabhängig von #tnp-app (eigene Seiten via Shortcode)
══════════════════════════════════════════════════════════════════════════ */

.tnp-form-wrap {
    max-width: 600px;
    margin: 2rem auto;
    font-family: inherit;
}

.tnp-form__title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 1.2rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid #2e7d32;
    color: #1b5e20;
}

.tnp-form-notice {
    padding: .75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: .95rem;
    line-height: 1.4;
}
.tnp-form-notice--success { background: #e8f5e9; border: 1px solid #a5d6a7; color: #1b5e20; }
.tnp-form-notice--error   { background: #ffebee; border: 1px solid #ef9a9a; color: #b71c1c; }
.tnp-form-notice--info    { background: #e3f2fd; border: 1px solid #90caf9; color: #0d47a1; }

.tnp-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tnp-form__row { display: flex; gap: 1rem; }
.tnp-form__row--half > .tnp-form__field { flex: 1 1 0; min-width: 0; }

.tnp-form__field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.tnp-form__field label {
    font-size: .875rem;
    font-weight: 600;
    color: #333;
}

.tnp-form__field input[type="text"],
.tnp-form__field input[type="email"],
.tnp-form__field input[type="tel"],
.tnp-form__field input[type="password"] {
    padding: .55rem .75rem;
    border: 1px solid #bbb;
    border-radius: 6px;
    font-size: .95rem;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
    box-sizing: border-box;
}
.tnp-form__field input:focus {
    outline: none;
    border-color: #2e7d32;
    box-shadow: 0 0 0 3px rgba(46,125,50,.15);
}

.tnp-form__fieldset {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem 1.25rem 1.25rem;
    margin: 0;
}
.tnp-form__fieldset legend {
    font-size: .9rem;
    font-weight: 700;
    color: #444;
    padding: 0 .5rem;
}

.tnp-form__submit {
    align-self: flex-start;
    padding: .65rem 1.5rem;
    background: #2e7d32;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .1s;
}
.tnp-form__submit:hover  { background: #1b5e20; }
.tnp-form__submit:active { transform: scale(.97); }

.tnp-form__hint {
    font-size: .8rem;
    color: #777;
    margin: 0;
}

.tnp-req { color: #c62828; }

/* Honeypot – vollständig verstecken */
.tnp-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Privacy checkbox row */
.tnp-form__field--check {
    margin-top: 4px;
}

.tnp-form__check-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}

.tnp-form__check-label input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 3px;
    width: 16px;
    height: 16px;
    accent-color: var(--tnp-primary, #2e7d32);
}

.tnp-form__check-label a {
    color: var(--tnp-primary, #2e7d32);
    text-decoration: underline;
}

@media (max-width: 500px) {
    .tnp-form__row--half { flex-direction: column; }
}

/* ── Booking confirmation toast ────────────────────────────────────── */
.tnp-toast {
    position    : fixed;
    bottom      : 24px;
    left        : 50%;
    transform   : translateX(-50%);
    z-index     : 2147483647;
    padding     : 12px 24px;
    border-radius: var(--tnp-radius-sm);
    font-weight : 700;
    font-size   : .95rem;
    box-shadow  : var(--tnp-shadow-lg);
    animation   : tnpSlideUp .25s ease;
    white-space : nowrap;
}
.tnp-toast--success { background: #2e7d32; color: #fff; }
.tnp-toast--error   { background: #c62828; color: #fff; }
.tnp-toast[hidden]  { display: none; }

/* ── Quota bar ──────────────────────────────────────────────────────── */
.tnp-quota-bar {
    display     : flex;
    align-items : center;
    gap         : 12px;
    padding     : 8px 20px;
    background  : #f0f7f0;
    border-bottom: 1px solid #c8e6c9;
}
.tnp-quota-bar__text {
    font-size  : .82rem;
    color      : #2e7d32;
    font-weight: 600;
    white-space: nowrap;
}
.tnp-quota-bar__text--full { color: #c62828; }
.tnp-quota-bar__track {
    flex       : 1;
    height     : 6px;
    background : #c8e6c9;
    border-radius: 3px;
    overflow   : hidden;
    max-width  : 200px;
}
.tnp-quota-bar__fill {
    height     : 100%;
    background : var(--tnp-ci-primary, #2e7d32);
    border-radius: 3px;
    transition : width .4s ease;
}

/* ── Monthly view ───────────────────────────────────────────────────── */
.tnp-month-wrap {
    background    : var(--tnp-white);
    border-radius : 0 0 var(--tnp-radius) var(--tnp-radius);
    box-shadow    : var(--tnp-shadow);
    padding       : 20px;
}
.tnp-month-nav {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 16px;
    margin-bottom   : 16px;
}
.tnp-month-title {
    font-size  : 1.1rem;
    font-weight: 700;
    min-width  : 160px;
    text-align : center;
    color      : var(--tnp-gray-900);
}
.tnp-month-grid {
    display              : grid;
    grid-template-columns: repeat(7, 1fr);
    gap                  : 4px;
}
.tnp-month-cell {
    aspect-ratio  : 1;
    display       : flex;
    flex-direction: column;
    align-items   : center;
    justify-content: center;
    border-radius : var(--tnp-radius-sm);
    font-size     : .85rem;
    text-decoration: none;
    color         : var(--tnp-gray-900);
    background    : var(--tnp-gray-100);
    transition    : background .12s;
    position      : relative;
}
.tnp-month-cell--head {
    background  : transparent;
    font-weight : 700;
    font-size   : .75rem;
    color       : var(--tnp-gray-700);
    aspect-ratio: auto;
    padding     : 4px 0;
}
.tnp-month-cell--empty { background: transparent; }
.tnp-month-cell--day:hover  { background: var(--tnp-green-pale); color: var(--tnp-ci-primary); }
.tnp-month-cell--today      { background: var(--tnp-ci-primary); color: #fff; font-weight: 700; }
.tnp-month-cell--today:hover{ filter: brightness(1.1); }
.tnp-month-cell--past       { opacity: .45; pointer-events: none; }
.tnp-month-day-nr           { font-weight: 600; line-height: 1; }
.tnp-month-dot {
    width        : 6px;
    height       : 6px;
    border-radius: 50%;
    margin-top   : 3px;
}
.tnp-month-dot--free { background: #4caf50; }
.tnp-month-dot--half { background: #ff9800; }
.tnp-month-dot--full { background: #f44336; }

/* ── Desktop: größere Schrift in den Slots (≥ 1024px) ──────────────── */
@media (min-width: 1024px) {

    /* Tagesansicht – etwas mehr Luft, +2pt, Fettschrift */
    .tnp-grid--day .tnp-slot {
        font-size : .94rem;
        padding   : 5px 8px;
        min-height: 42px;
    }
    .tnp-grid--day .tnp-slot__time    { font-size: .82rem; font-weight: 700; }
    .tnp-grid--day .tnp-slot__label   { font-size: .90rem; font-weight: 700; }
    .tnp-grid--day .tnp-slot__cat,
    .tnp-grid--day .tnp-slot__trainer { font-size: .80rem; font-weight: 600; }

    /* Wochenansicht – auch +2pt + Fettschrift */
    .tnp-grid--week .tnp-slot       { font-size: .85rem !important; padding: 2px 4px !important; }
    .tnp-grid--week .tnp-slot__time { font-size: .76rem; font-weight: 700; }
    .tnp-grid--week .tnp-slot__label{ font-size: .82rem; font-weight: 700; }
    .tnp-grid--week .tnp-slot__cat,
    .tnp-grid--week .tnp-slot__trainer { font-size: .74rem; font-weight: 600; }
}

/* ── Equipment-Anzeige in Slot-Zellen ──────────────────────────────── */
.tnp-slot__equip {
    display    : block;
    font-size  : .65rem;
    opacity    : .85;
    margin-top : 2px;
}

/* ── Meine Buchungen: Aktions-Buttons ──────────────────────────────── */
.tnp-booking-card__actions {
    display    : flex;
    gap        : 6px;
    margin-top : 6px;
    flex-wrap  : wrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   MODERN-STIL  (nur aktiv wenn Backend → Design → Kalender-Stil = "Modern")
   Alles unter .tnp-style-modern gekapselt – Klassik bleibt unberührt.
══════════════════════════════════════════════════════════════════════════ */

/* Grid-Rahmen: Karten-Optik mit Schatten */
.tnp-style-modern .tnp-grid-wrap {
    border-radius : var(--tnp-radius);
    box-shadow    : 0 6px 24px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06);
    /* overflow: hidden entfernt — blockiert sonst horizontal scrolling ab
     * 601px (Landscape-Mobil, Desktop). Die Basis-Regel overflow-x:auto reicht. */
    overflow-x    : auto;
    border        : 1px solid rgba(0,0,0,.06);
}

/* Kopfzeilen: weicher Verlauf */
.tnp-style-modern .tnp-grid__court-head {
    text-transform : uppercase;
    letter-spacing : .5px;
    font-size      : .78rem;
    box-shadow     : inset 0 -2px 0 rgba(0,0,0,.12);
}

/* Slots: abgerundet mit Abstand, dezenter Innenabstand */
.tnp-style-modern .tnp-slot {
    border         : 2px solid transparent;
    border-radius  : var(--tnp-radius-sm);
    transition     : transform .14s cubic-bezier(.2,.7,.3,1),
                     box-shadow .14s ease,
                     filter .14s ease,
                     background .14s ease;
    background-clip: padding-box;
}

/* Freie, buchbare Slots: einladender Hover mit Lift + Schatten */
.tnp-style-modern .tnp-slot--bookable {
    background : var(--tnp-gray-100);
}
.tnp-style-modern .tnp-slot--bookable:hover {
    background  : var(--tnp-green-pale) !important;
    border-color: var(--tnp-green-light);
    transform   : translateY(-2px) scale(1.02);
    box-shadow  : 0 6px 16px rgba(46,125,50,.22);
    z-index     : 5;
}
/* Vorhandenes „+"-Zeichen beim Hover sanft hervorheben (kein doppeltes „+") */
.tnp-style-modern .tnp-slot__free {
    transition: transform .14s ease, color .14s ease;
}
.tnp-style-modern .tnp-slot--bookable:hover .tnp-slot__free {
    transform: scale(1.25);
    color    : var(--tnp-green);
}

/* Gebuchte Slots: Karten-Optik mit leichtem Schatten */
.tnp-style-modern .tnp-slot--booked {
    border-radius: var(--tnp-radius-sm);
    box-shadow   : inset 0 0 0 1px rgba(255,255,255,.15),
                   0 2px 6px rgba(0,0,0,.12);
}
.tnp-style-modern .tnp-slot--editable:hover {
    transform : translateY(-2px) scale(1.02);
    box-shadow: 0 6px 16px rgba(0,0,0,.20);
    filter    : brightness(.95);
    z-index   : 5;
}

/* Drag-to-select: hervorgehobene Auswahl beim Ziehen */
.tnp-style-modern .tnp-slot--selecting {
    background  : var(--tnp-green-pale) !important;
    border-color: var(--tnp-green) !important;
    box-shadow  : inset 0 0 0 2px var(--tnp-green);
    transform   : scale(1.01);
    z-index     : 6;
}
.tnp-style-modern .tnp-slot--selecting::after { opacity: 0 !important; }
/* Während des Ziehens Textauswahl unterdrücken */
.tnp-style-modern.tnp-dragging,
.tnp-style-modern.tnp-dragging * {
    user-select: none;
    cursor     : ns-resize !important;
}

/* Buchungs-Bestätigung: kurzes Aufleuchten der Zelle */
@keyframes tnp-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(46,125,50,.55); }
    70%  { box-shadow: 0 0 0 10px rgba(46,125,50,0); }
    100% { box-shadow: 0 0 0 0 rgba(46,125,50,0); }
}
.tnp-style-modern .tnp-slot--justbooked {
    animation: tnp-pulse .7s ease-out 1;
}

/* Heute-Spalte (Woche): kräftigerer Akzent im Modern-Stil */
.tnp-style-modern .tnp-today-col {
    outline: 2px solid rgba(255,193,7,.45);
}

/* Mobile: Wisch-Hinweis dezent einblenden */
@media (max-width: 600px) {
    .tnp-style-modern .tnp-grid-wrap {
        box-shadow: 0 3px 12px rgba(0,0,0,.10);
    }
}