/* Tennisplatz-Buchung – Front-End-Styles.
 * ALLES ist unter .tvb-app gekapselt, damit nichts ins Theme ausblutet.
 * Keine externen Schriften (DSGVO): System-Fonts statt Google Fonts. */

.tvb-app{
  --clay:#C75B12;--clay-light:#E8A373;--clay-bg:#F5E6D3;
  --court:#1B5E20;--court-light:#2E7D32;
  --bg:#FDF8F0;--surface:#FFFFFF;--line:#E0D5C5;
  --text:#2C1810;--muted:#8B7355;
  --free:#E8F0E5;--free-b:#7CAF72;
  --taken:#FDEBD0;--taken-b:#C75B12;
  --group:#E0E8F0;--group-b:#3A6FA0;
  --serif:Georgia,'Times New Roman',serif;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--text);
  background:var(--bg);
  border-radius:14px;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 2px 14px rgba(0,0,0,.06);
}
.tvb-app *{box-sizing:border-box;margin:0;padding:0;}
.tvb-app h1,.tvb-app h2,.tvb-app p{margin:0;}

/* Header */
.tvb-app .tvb-header{
  background:linear-gradient(135deg,#1B5E20 0%,#2E7D32 50%,#1B5E20 100%);
  color:#fff;padding:0;position:relative;overflow:hidden;
  box-shadow:0 4px 12px rgba(27,94,32,0.3);
}
.tvb-app .tvb-header::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent,transparent 49.5%,rgba(255,255,255,0.08) 49.5%,rgba(255,255,255,0.08) 50.5%,transparent 50.5%,transparent 100%);
  pointer-events:none;
}
.tvb-app .tvb-header::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--clay),var(--clay-light),var(--clay));
}
.tvb-app .tvb-header-inner{display:flex;align-items:center;gap:16px;padding:14px 24px;position:relative;z-index:1;}
.tvb-app .tvb-logo-img{width:48px;height:48px;border-radius:50%;border:2px solid rgba(255,255,255,0.6);background:#fff;object-fit:cover;}
.tvb-app .tvb-header-text h1{font-size:1.5rem;font-weight:700;letter-spacing:0.3px;}
.tvb-app .tvb-header-text p{font-size:0.85rem;opacity:.8;margin-top:2px;letter-spacing:1px;text-transform:uppercase;font-weight:500;}

.tvb-app .tvb-main{padding:24px 16px;}
.tvb-app .tvb-clay-bar{height:6px;background:linear-gradient(90deg,var(--clay),var(--clay-light),var(--clay));border-radius:3px;margin-bottom:20px;}

.tvb-app .tvb-date-nav{
  display:flex;align-items:center;gap:12px;margin-bottom:24px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px;
  box-shadow:0 1px 4px rgba(0,0,0,0.04);
}
.tvb-app .tvb-date-nav button{
  background:none;border:1px solid var(--line);border-radius:8px;cursor:pointer;
  width:36px;height:36px;font-size:1.1rem;color:var(--text);transition:all .15s;
}
.tvb-app .tvb-date-nav button:hover{background:var(--clay);color:#fff;border-color:var(--clay);}
.tvb-app .tvb-today-btn{background:var(--clay)!important;color:#fff!important;border:none!important;border-radius:8px;padding:8px 24px!important;font-size:.85rem;font-weight:700;cursor:pointer;letter-spacing:.5px;white-space:nowrap;min-width:80px;width:auto!important;height:auto!important;}
.tvb-app #tvb_dateDisplay{font-size:1.3rem;font-weight:700;flex:1;color:var(--court);}
.tvb-app #tvb_dateInput{border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:.9rem;background:var(--bg);color:var(--text);}

.tvb-app .tvb-legend{display:flex;gap:16px;margin-bottom:16px;font-size:.9rem;color:var(--muted);align-items:center;flex-wrap:wrap;}
.tvb-app .tvb-legend-dot{width:12px;height:12px;border-radius:3px;display:inline-block;margin-right:4px;}
.tvb-app .tvb-dot-free{background:var(--free);border:1px solid var(--free-b);}
.tvb-app .tvb-dot-taken{background:var(--taken);border:1px solid var(--taken-b);}
.tvb-app .tvb-dot-group{background:var(--group);border:1px solid var(--group-b);}
.tvb-app .tvb-dot-locked{background:#F0E0E0;border:1px solid #C44;}
.tvb-app .tvb-status-bar{font-size:.85rem;color:var(--muted);margin-bottom:12px;min-height:18px;}
.tvb-app .tvb-status-bar.err{color:#c0392b;}
.tvb-app .tvb-admin-btn{background:none;border:1px solid var(--line);border-radius:8px;padding:6px 14px;cursor:pointer;font-size:.82rem;color:var(--muted);margin-left:auto;display:inline-flex;align-items:center;gap:4px;transition:all .15s;}
.tvb-app .tvb-admin-btn:hover{background:var(--clay);color:#fff;border-color:var(--clay);}

.tvb-app .tvb-grid-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative;}
.tvb-app table{
  width:100%;border-collapse:collapse;background:var(--surface);
  border-radius:12px;overflow:hidden;border:1px solid var(--line);font-size:1rem;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.tvb-app thead th{
  background:linear-gradient(180deg,var(--court),var(--court-light));
  color:#fff;padding:12px;text-align:center;font-weight:600;
  text-transform:uppercase;font-size:.85rem;letter-spacing:1px;
}
.tvb-app thead th:first-child{text-align:left;text-transform:none;font-size:.95rem;letter-spacing:0;}
.tvb-app tbody tr:nth-child(even) td{background:#FDFAF5;}
.tvb-app td{padding:7px 10px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);vertical-align:middle;}
.tvb-app td:last-child{border-right:none;}
.tvb-app .tvb-time-cell{font-size:.95rem;color:var(--muted);white-space:nowrap;font-weight:600;min-width:70px;}

.tvb-app .tvb-slot{min-width:180px;border-radius:8px;padding:8px 10px;cursor:pointer;transition:all .15s;font-size:.95rem;}
.tvb-app .tvb-slot:hover{transform:scale(1.01);}
.tvb-app .tvb-slot.free{background:var(--free);border:1px solid var(--free-b);color:var(--court);}
.tvb-app .tvb-slot.free:hover{background:#D4E8CF;box-shadow:0 2px 6px rgba(124,175,114,0.3);}
.tvb-app .tvb-slot.free::after{content:'+ Buchen';font-size:.8rem;opacity:.6;display:block;margin-top:2px;}
.tvb-app .tvb-slot.taken{background:var(--taken);border:1px solid var(--taken-b);color:var(--clay);cursor:default;}
.tvb-app .tvb-slot.taken:hover{transform:none;box-shadow:none;}
.tvb-app .tvb-slot.group{background:var(--group);border:1px solid var(--group-b);color:var(--group-b);cursor:pointer;}
.tvb-app .tvb-slot.group:hover{opacity:.85;}
.tvb-app .tvb-slot.locked{background:#F0E0E0;border:1px solid #C44;color:#922;cursor:default;}
.tvb-app .tvb-slot.locked:hover{transform:none;box-shadow:none;}
.tvb-app .tvb-booker{font-weight:600;}
.tvb-app .tvb-del-btn{float:right;background:none;border:none;color:var(--clay);cursor:pointer;font-size:1rem;line-height:1;padding:0 2px;}
.tvb-app .tvb-del-btn.admin{color:var(--group-b);}
.tvb-app .tvb-group-icon{font-size:.7rem;opacity:.7;}

/* Modals */
.tvb-app .tvb-overlay{display:none;position:fixed;inset:0;background:rgba(44,24,16,0.5);z-index:99999;align-items:center;justify-content:center;padding:16px;}
.tvb-app .tvb-overlay.open{display:flex;}
.tvb-app .tvb-modal,.tvb-app .tvb-admin-modal{background:var(--surface);border-radius:16px;padding:28px 24px;width:100%;max-width:440px;box-shadow:0 16px 48px rgba(0,0,0,0.2);border-top:4px solid var(--clay);max-height:90vh;overflow-y:auto;}
.tvb-app .tvb-admin-modal{border-top-color:#922;}
.tvb-app .tvb-modal h2,.tvb-app .tvb-admin-modal h2{font-family:var(--serif);font-size:1.15rem;margin-bottom:18px;color:var(--court);}
.tvb-app .tvb-admin-modal h2{color:#922;}
.tvb-app .tvb-info{font-size:.85rem;color:var(--muted);margin-bottom:16px;}
.tvb-app .tvb-field{margin-bottom:14px;position:relative;}
.tvb-app .tvb-field label{display:block;font-size:.78rem;font-weight:600;margin-bottom:5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;}
.tvb-app .tvb-field input,.tvb-app .tvb-select{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:8px;font-size:.92rem;background:var(--bg);color:var(--text);}
.tvb-app .tvb-field input:focus,.tvb-app .tvb-select:focus{outline:2px solid var(--clay);border-color:transparent;}
.tvb-app .tvb-time-row{display:flex;gap:10px;}
.tvb-app .tvb-time-row>div{flex:1;}

/* Autovervollständigung */
.tvb-app .tvb-autocomplete{position:relative;}
.tvb-app .tvb-suggest{display:none;position:absolute;left:0;right:0;top:100%;z-index:5;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.12);max-height:180px;overflow-y:auto;margin-top:2px;}
.tvb-app .tvb-suggest.open{display:block;}
.tvb-app .tvb-suggest div{padding:8px 12px;cursor:pointer;font-size:.9rem;}
.tvb-app .tvb-suggest div:hover,.tvb-app .tvb-suggest div.active{background:var(--clay-bg);}

.tvb-app .tvb-dur-btns{display:flex;gap:6px;}
.tvb-app .tvb-dur-btn{flex:1;padding:9px;border:2px solid var(--line);border-radius:8px;background:var(--bg);cursor:pointer;font-size:.85rem;font-weight:700;text-align:center;color:var(--text);transition:all .15s;}
.tvb-app .tvb-dur-btn.active{background:var(--court);color:#fff;border-color:var(--court);}
.tvb-app .tvb-dur-btn:hover:not(.disabled){border-color:var(--court);}
.tvb-app .tvb-dur-btn.disabled{opacity:.3;cursor:not-allowed;pointer-events:none;}

.tvb-app .tvb-modal-actions,.tvb-app .tvb-admin-actions{display:flex;gap:10px;margin-top:22px;}
.tvb-app .tvb-btn{flex:1;padding:11px;border:none;border-radius:8px;font-size:.92rem;font-weight:700;cursor:pointer;transition:all .15s;letter-spacing:.3px;}
.tvb-app .tvb-btn:hover{opacity:.85;transform:translateY(-1px);}
.tvb-app .tvb-btn-primary{background:linear-gradient(135deg,var(--clay),#D4761F);color:#fff;box-shadow:0 2px 8px rgba(199,91,18,0.3);}
.tvb-app .tvb-btn-secondary{background:var(--bg);border:1px solid var(--line);color:var(--text);}
.tvb-app .tvb-btn-danger{background:#922;}
.tvb-app .tvb-court-checks{display:flex;gap:12px;}
.tvb-app .tvb-court-check{display:flex;align-items:center;gap:6px;font-size:.92rem;cursor:pointer;text-transform:none;}
.tvb-app .tvb-court-check input{width:18px;height:18px;accent-color:var(--clay);}
.tvb-app .tvb-error-msg{color:#c0392b;font-size:.82rem;margin-top:8px;display:none;}
.tvb-app .tvb-error-msg.show{display:block;}

.tvb-app .tvb-footer-bar{margin-top:32px;text-align:center;padding:16px;font-size:.72rem;color:var(--muted);}
.tvb-app .tvb-footer-bar::before{content:'';display:block;height:3px;margin:0 auto 12px;width:120px;background:linear-gradient(90deg,transparent,var(--clay),transparent);border-radius:2px;}

@media(max-width:600px){
  .tvb-app .tvb-header-text h1{font-size:1.05rem;}
  .tvb-app .tvb-header-text p{font-size:.68rem;}
  .tvb-app .tvb-logo-img{width:40px;height:40px;}
  .tvb-app .tvb-header-inner{padding:12px 16px;gap:12px;}
  .tvb-app .tvb-main{padding:16px 10px;}
  .tvb-app .tvb-date-nav{padding:10px 12px;gap:8px;flex-wrap:wrap;}
  .tvb-app .tvb-date-nav button{width:40px;height:40px;font-size:1.2rem;}
  .tvb-app #tvb_dateDisplay{font-size:1rem;min-width:100%;text-align:center;order:-1;}
  .tvb-app #tvb_dateInput{flex:1;}
  .tvb-app .tvb-slot{min-width:120px;padding:8px 6px;font-size:.78rem;}
  .tvb-app .tvb-booker{font-size:.8rem;}
  .tvb-app .tvb-del-btn{font-size:1.2rem;padding:4px 6px;}
  .tvb-app thead th{padding:8px 6px;font-size:.68rem;letter-spacing:.5px;}
  .tvb-app .tvb-time-cell{font-size:.75rem;min-width:58px;}
  .tvb-app td{padding:5px 4px;}
  .tvb-app .tvb-modal,.tvb-app .tvb-admin-modal{padding:22px 18px;border-radius:12px;}
  .tvb-app .tvb-legend{gap:12px;font-size:.72rem;}
}