/**
 * KickTipp Pro – Basis-Stylesheet v1.0.2
 * FIX: 100% Breite für alle Widgets, weiße Labels, größere Statistiken
 */

/* ─── Design-Tokens ─────────────────────────────────────────────────────── */
:root {
  --ktp-accent:        #81c100;
  --ktp-accent-dark:   #5a8800;
  --ktp-accent-light:  #a0e020;
  --ktp-bg:            #0a1f0a;
  --ktp-card-bg:       #0d2b0d;
  --ktp-header-bg:     #1a3a1a;
  --ktp-surface:       #162b16;
  --ktp-border:        #2a4a2a;
  --ktp-text:          #ffffff;          /* FIX #3: Weiß statt grau */
  --ktp-text-muted:    #cccccc;          /* FIX #3: Helleres Grau */
  --ktp-label-color:   #ffffff;          /* FIX #3: Tabellen-Labels weiß */
  --ktp-danger:        #e74c3c;
  --ktp-success:       #2ecc71;
  --ktp-warning:       #f39c12;
  --ktp-rank1:         #FFD700;
  --ktp-rank2:         #C0C0C0;
  --ktp-rank3:         #CD7F32;
  --ktp-radius:        12px;
  --ktp-radius-sm:     6px;
  --ktp-shadow:        0 4px 20px rgba(0,0,0,.45);
  --ktp-shadow-sm:     0 2px 8px rgba(0,0,0,.3);
  --ktp-font:          inherit;
  --ktp-transition:    .2s ease;
  --ktp-ticker-height: 44px;
  --ktp-avatar-size:   100px;
}

/* ─── FIX #1: Alle Widgets 100% Breite – Divi gibt die Breite vor ──────── */
.ktp-tipp-form,
.ktp-leaderboard,
.ktp-profile,
.ktp-ticker-wrap,
.ktp-stats-box,
.ktp-my-tips {
  width: 100%;
  max-width: 100%;          /* Überschreibt alle max-width-Limits */
  box-sizing: border-box;
  color: var(--ktp-text);
  font-family: var(--ktp-font);
  line-height: 1.5;
}

.ktp-tipp-form *,
.ktp-leaderboard *,
.ktp-profile *,
.ktp-ticker-wrap *,
.ktp-stats-box *,
.ktp-my-tips * {
  box-sizing: inherit;
}

/* ─── Utilities ──────────────────────────────────────────────────────────── */
.ktp-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}
.ktp-hide-mobile { display: table-cell; }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.ktp-btn {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .55em 1.2em;
  border: 2px solid transparent;
  border-radius: var(--ktp-radius-sm);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--ktp-transition), transform .1s;
  white-space: nowrap;
}
.ktp-btn:active { transform: scale(.97); }
.ktp-btn--primary  { background: var(--ktp-accent); color: #000; border-color: var(--ktp-accent); }
.ktp-btn--primary:hover { background: var(--ktp-accent-light); border-color: var(--ktp-accent-light); }
.ktp-btn--ghost    { background: transparent; color: var(--ktp-accent); border-color: var(--ktp-accent); }
.ktp-btn--ghost:hover { background: var(--ktp-accent); color: #000; }
.ktp-btn--danger   { background: var(--ktp-danger); color: #fff; border-color: var(--ktp-danger); }
.ktp-btn--danger:hover { filter: brightness(1.15); }
.ktp-btn--sm       { padding: .35em .8em; font-size: .8rem; }
.ktp-btn:disabled  { opacity: .4; cursor: not-allowed; transform: none; }

/* ─── Badges ─────────────────────────────────────────────────────────────── */
.ktp-badge {
  display: inline-block;
  padding: .1em .5em;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 700;
  vertical-align: middle;
}
.ktp-badge--me { background: var(--ktp-accent); color: #000; }

/* ─── Avatare ────────────────────────────────────────────────────────────── */
.ktp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
  flex-shrink: 0;
}
.ktp-avatar--sm  { width: 32px;  height: 32px;  font-size: .8rem; }
.ktp-avatar--md  { width: 56px;  height: 56px;  font-size: 1.2rem; }
.ktp-avatar--lg  { width: var(--ktp-avatar-size); height: var(--ktp-avatar-size); font-size: 2rem; }
.ktp-avatar--fallback { background: var(--ktp-accent); color: #000; font-weight: 700; }

/* ─── Skeleton-Loader ────────────────────────────────────────────────────── */
@keyframes ktp-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.ktp-skeleton {
  background: linear-gradient(90deg, var(--ktp-surface) 25%, var(--ktp-border) 50%, var(--ktp-surface) 75%);
  background-size: 800px 100%;
  animation: ktp-shimmer 1.4s infinite;
  border-radius: var(--ktp-radius-sm);
}
.ktp-skeleton--line  { height: 1em; margin-bottom: .5em; }
.ktp-skeleton--short { width: 40%; }
.ktp-skeleton--team  { height: 1.2em; width: 100px; }
.ktp-skeleton--input { height: 40px; width: 52px; border-radius: var(--ktp-radius-sm); }
.ktp-skeleton--tab   { height: 32px; width: 80px; border-radius: 20px; display: inline-block; margin-right: .5em; }

/* ─── Status-Bar ─────────────────────────────────────────────────────────── */
.ktp-status-bar {
  padding: .7em 1em;
  border-radius: var(--ktp-radius-sm);
  margin-top: 1em;
  font-size: .88rem;
  font-weight: 500;
}
.ktp-status-bar[hidden] { display: none; }
.ktp-status-bar.ktp-status--success { background: rgba(46,204,113,.15); color: var(--ktp-success); border: 1px solid rgba(46,204,113,.3); }
.ktp-status-bar.ktp-status--error   { background: rgba(231,76,60,.15);  color: var(--ktp-danger);  border: 1px solid rgba(231,76,60,.3); }
.ktp-status-bar.ktp-status--info    { background: rgba(129,193,0,.1);   color: var(--ktp-accent);  border: 1px solid rgba(129,193,0,.2); }

/* ─── Login-Prompt ───────────────────────────────────────────────────────── */
.ktp-login-prompt {
  text-align: center;
  padding: 2.5em 1em;
  background: var(--ktp-card-bg);
  border-radius: var(--ktp-radius);
  border: 1px solid var(--ktp-border);
}
.ktp-login-prompt p { margin-bottom: 1em; color: var(--ktp-text-muted); }

/* ─── FIX #3: Tabellen-Labels / th / Beschriftungen immer weiß ──────────── */
.ktp-leaderboard th,
.ktp-my-tips-table thead th,
.ktp-tipp-form .ktp-match-meta,
.ktp-tipp-form .ktp-tab-btn,
.ktp-stats-box .ktp-stats-key,
.ktp-form-group label {
  color: var(--ktp-label-color) !important;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ktp-hide-mobile { display: none !important; }
  .ktp-btn { font-size: .8rem; padding: .45em .9em; }
}