/* =========================================================
   VM Terminabstimmung – Frontend Styles
   Brand: TV Bookholzberg
   Font: Source Sans Pro
   ========================================================= */

:root{
  --tv-green: #1E7F64;
  --tv-green-600: #16604C;
  --tv-green-50:  #E8F4F0;

  --text: #111;
  --muted: #6b7280;
  --border: #E6E8EC;
  --bg: #ffffff;
  --bg-soft: #fafafa;
  --card: #ffffff;
  --shadow: 0 8px 24px rgba(0,0,0,.06);
  --radius: 16px;

  --badge-offen-bg: #fafafa;
  --badge-offen-br: #e5e7eb;
  --badge-abst-bg: #fff6e5;
  --badge-abst-br: #ffd38a;
  --badge-best-bg: #e8ffea;
  --badge-best-br: #9ad3a1;
  --badge-uebg-bg: #ffe9e9;
  --badge-uebg-br: #ff9b9b;

  --focus: 0 0 0 3px rgba(30,127,100,.2);
}

html, body{
  font-family: "Source Sans Pro", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
}

h1,h2,h3,h4,h5,h6{
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--text);
}

a{ color: var(--tv-green); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* ---------- Generic containers from plugin ---------- */

.vmp-wrap{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin: 18px 0;
}

.vmp-row{
  background: var(--bg-soft);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 12px;
  margin: 12px 0;
}

.vmp-muted{ color: var(--muted); }

.vmp-ok{
  border: 1px solid var(--tv-green);
  background: var(--tv-green-50);
}

/* ---------- Grid Cards (vm_my_games) ---------- */

.vmp-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.vmp-card{
  position: relative;
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 16px 18px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow: hidden;
}

.vmp-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  border-color: #dcdfe4;
  text-decoration: none;
}

.vmp-card h4{
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
}

.vmp-card .vmp-muted{
  display: block;
  margin-bottom: 6px;
}

/* Optionales Logo-Badge in der Kachel */
.vmp-card::after{
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 48px;
  height: 48px;
  background-image: url("https://tennisverein-bookholzberg.de/wp-content/uploads/img-tv-bookholzberg-logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .14;
  pointer-events: none;
}

/* ---------- Tables (vm_all_games / logs) ---------- */

table.vmp-table{
  width: 100%;
  border-collapse: collapse;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

table.vmp-table thead th{
  background: var(--bg-soft);
  color: var(--text);
  font-weight: 700;
  text-align: left;
  font-size: .95rem;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

table.vmp-table td{
  padding: 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

table.vmp-table tr:hover td{
  background: #fcfcfc;
}

/* ---------- Badges (Status) ---------- */

.vmp-badge{
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .82rem;
  line-height: 1;
  border: 1px solid transparent;
  white-space: nowrap;
}

.vmp-badge.offen{
  background: var(--badge-offen-bg);
  border-color: var(--badge-offen-br);
}

.vmp-badge.abstimmung{
  background: var(--badge-abst-bg);
  border-color: var(--badge-abst-br);
}

.vmp-badge.bestaetigt{
  background: var(--badge-best-bg);
  border-color: var(--badge-best-br);
}

.vmp-badge.ueberfaellig{
  background: var(--badge-uebg-bg);
  border-color: var(--badge-uebg-br);
}

/* ---------- Buttons ---------- */

.vmp-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--tv-green);
  color: #fff !important;
  border: 1px solid var(--tv-green-600);
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.05);
  transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
}

.vmp-btn:hover{
  background: var(--tv-green-600);
  box-shadow: 0 4px 10px rgba(30,127,100,.18);
}

.vmp-btn:active{
  transform: translateY(1px);
}

.vmp-btn--ghost{
  background: transparent;
  color: var(--tv-green) !important;
  border-color: var(--tv-green);
}

.vmp-btn--ghost:hover{
  background: var(--tv-green-50);
}

/* ---------- Forms / Inputs ---------- */

input[type="text"],
input[type="email"],
input[type="number"],
input[type="datetime-local"],
select, textarea{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 1rem;
  color: var(--text);
  transition: box-shadow .15s ease, border-color .15s ease;
}

input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--tv-green);
  box-shadow: var(--focus);
}

label{
  color: var(--text);
  font-weight: 600;
}

.description, .vmp-muted small{
  color: var(--muted);
}

/* ---------- Filterleiste (vm_all_games) ---------- */

form.vmp-row select,
form.vmp-row input,
form.vmp-row button{
  margin-right: 8px;
}

form.vmp-row .vmp-btn{
  margin-top: 2px;
}

/* ---------- Detailseite: Headerinfos ---------- */

.vmp-wrap h3{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  margin-bottom: 8px;
}

.vmp-wrap h3::before{
  content: "";
  width: 26px;
  height: 26px;
  background-image: url("https://tennisverein-bookholzberg.de/wp-content/uploads/img-tv-bookholzberg-logo.png");
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .9;
  border-radius: 6px;
}

/* Subtle accent for meta (Competition / Phase) */
.vmp-wrap p.vmp-muted{
  margin-top: 0;
}
.vmp-wrap p.vmp-muted strong,
.vmp-wrap p.vmp-muted a{
  color: var(--tv-green);
}

/* ---------- Ergebnis-Widget ---------- */

.vmp-wrap h4{
  margin: 14px 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
}

#vmp_s3_full, #vmp_s3_mtb{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
}

#vmp_s3_mtb label{
  margin-right: 14px;
}

/* ---------- Log (Protokoll) ---------- */

.vmp-wrap .vmp-wrap .vmp-muted{
  display: block;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
}

.vmp-wrap .vmp-wrap .vmp-muted:last-child{
  border-bottom: none;
}

/* ---------- Blockzeiten-Manager ---------- */

.vmp-wrap .vmp-table input[type="datetime-local"]{
  width: 220px;
}

.vmp-wrap .vmp-table input[type="text"]{
  width: 240px;
}

/* ---------- “Confirmed list” (vm_public_confirmed) ---------- */

.vmp-wrap .confirmed-item{
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.vmp-wrap .confirmed-item:last-child{
  border-bottom: none;
}

/* ---------- Micro accents ---------- */

.vmp-accent{
  color: var(--tv-green);
  font-weight: 700;
}

/* ---------- Responsive ---------- */

@media (max-width: 640px){
  .vmp-grid{
    grid-template-columns: 1fr;
  }
  .vmp-card{
    padding: 14px;
    border-radius: 14px;
  }
  table.vmp-table td, table.vmp-table th{
    padding: 10px;
  }
}

/* ---------- Optional: dezent farbige Links in Meta ---------- */

.vmp-muted a{
  color: var(--tv-green);
  text-decoration: underline;
}

/* ---------- Kleine farbliche Marker (Phase, Konkurrenz) ---------- */

.vmp-chip{
  display:inline-block;
  background: var(--tv-green-50);
  color: var(--tv-green);
  border: 1px solid rgba(30,127,100,.25);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .78rem;
  font-weight: 700;
}

/* ---------- Utility: Divider ---------- */

.vmp-divider{
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}

/* ---------- Table “Link öffnen” Button neutraler ---------- */

table.vmp-table .vmp-btn{
  padding: 6px 10px;
  border-radius: 8px;
  font-size: .92rem;
}

/* ---------- Form spacing ---------- */

.vmp-row form{
  margin: 6px 0;
}

/* ---------- Headlines black, small accents green ---------- */

h1 .vmp-accent, h2 .vmp-accent, h3 .vmp-accent{ color: var(--tv-green); }

/* ---------- Basic print tweaks ---------- */
@media print {
  .vmp-btn, .vmp-card::after { display: none !important; }
  a{ color: #000; text-decoration: none; }
}
	
	/* =========================================================
   BUTTON STYLES OVERRIDE – alle Buttons im Frontend angleichen
   ========================================================= */

button,
input[type="button"],
input[type="submit"],
.vmp-btn,
.vmp-wrap button,
.vmp-wrap input[type="button"],
.vmp-wrap input[type="submit"] {
  background: var(--tv-green) !important;
  color: #fff !important;
  border: 1px solid var(--tv-green) !important;
  border-radius: 8px !important;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Hover-Zustand: schwarzer Hintergrund, weiße Schrift */
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.vmp-btn:hover,
.vmp-wrap button:hover,
.vmp-wrap input[type="button"]:hover,
.vmp-wrap input[type="submit"]:hover {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Disabled-Zustände etwas ausgegraut */
button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
.vmp-btn:disabled {
  background: #ccc !important;
  color: #777 !important;
  border-color: #ccc !important;
  cursor: not-allowed;
  box-shadow: none;
}

/* Fokusrahmen */
button:focus,
input[type="button"]:focus,
input[type="submit"]:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(30,127,100,0.3);
}

/* ===== Kompakte öffentliche Liste: bestätigte Spiele ===== */
.vmp-confirmed-list{
  margin: 8px 0 16px;
}

.vmp-confirmed-line{
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.vmp-confirmed-line:last-child{
  border-bottom: none;
}

.vmp-confirmed-primary{
  font-weight: 700;
  color: var(--text);
}

.vmp-confirmed-primary a{
  color: var(--text);
  text-decoration: none;
}
.vmp-confirmed-primary a:hover{
  text-decoration: underline;
}

.vmp-confirmed-meta{
  font-size: .9rem;
  color: var(--tv-green);
}

.vmp-confirmed-line.vmp-empty{
  color: var(--muted);
  font-style: italic;
  border: none;
}

/* Filterleiste (kompakt) */
.vmp-compact-filters{
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 8px 0 10px;
}
.vmp-compact-filters select{
  min-width: 180px;
}
.vmp-compact-filters .vmp-btn{
  padding: 6px 10px;
  border-radius: 8px;
}

/* Mobile */
@media (max-width: 640px){
  .vmp-confirmed-primary{ font-size: 1rem; }
  .vmp-confirmed-meta{ font-size: .86rem; }
  .vmp-compact-filters{ flex-wrap: wrap; }
  .vmp-compact-filters select{ min-width: 140px; }
}

	.vmp-confirmed-meta .vmp-ics-link{
  text-decoration: underline;
  font-weight: 700;
}
.vmp-confirmed-meta .vmp-ics-link:hover{
  text-decoration: none;
}

	.vmp-confirmed-meta .vmp-ics-link {
  color: var(--tv-green);
  font-weight: 700;
  text-decoration: none;
}

.vmp-confirmed-meta .vmp-ics-link:hover {
  text-decoration: underline;
  color: #000;
}