/* ═══════════════════════════════════════════════════════════════════════════
   EBD Team Widget – Frontend Styles
   Stijl gebaseerd op archive-wedtip.php (light card UI)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper ──────────────────────────────────────────────────────────────── */
.ebd-tw-wrap {
    --tw-accent: #FFA200;
    --tw-bg: #ffffff;
    --tw-bg2: #f8fafc;
    --tw-border: #e2e8f0;
    --tw-text: #0f172a;
    --tw-text2: #334155;
    --tw-muted: #64748b;
    --tw-win: #166534;
    --tw-win-bg: #dcfce7;
    --tw-draw: #92400e;
    --tw-draw-bg: #fef3c7;
    --tw-loss: #991b1b;
    --tw-loss-bg: #fee2e2;
    --tw-radius: 8px;
    --tw-shadow: 0 2px 8px rgba(0,0,0,0.06);

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--tw-bg);
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-radius);
    overflow: hidden;
    display: block;
    width: 100%;
    max-width: 520px;
    min-width: 0;
    inline-size: 100%;
    box-shadow: var(--tw-shadow);
    color: var(--tw-text);
    line-height: 1.5;
    font-size: 14px;
}

.ebd-tw-wrap,
.ebd-tw-wrap * {
    box-sizing: border-box;
}

.ebd-tw-wrap--single-tab {
    width: 100%;
    max-width: 100%;
}

/* ── Dark theme ───────────────────────────────────────────────────────────── */
.ebd-tw-wrap.ebd-tw--dark {
    --tw-bg: #111827;
    --tw-bg2: #1e293b;
    --tw-border: rgba(255,255,255,0.08);
    --tw-text: #e2e8f0;
    --tw-text2: #cbd5e1;
    --tw-muted: #94a3b8;
    --tw-win-bg: rgba(34,197,94,0.15);
    --tw-draw-bg: rgba(234,179,8,0.15);
    --tw-loss-bg: rgba(239,68,68,0.15);
    --tw-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Error ────────────────────────────────────────────────────────────────── */
.ebd-tw-error {
    padding: 16px;
    color: #991b1b;
    font-size: 13px;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.ebd-tw-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 0;
    padding: 18px 20px;
    min-height: 84px;
    box-sizing: border-box;
    background: #0f172a;
    color: #ffffff;
}

.ebd-tw-header-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    max-width: 100%;
}

.ebd-tw--dark .ebd-tw-header {
    background: #0a0e1a;
}

.ebd-tw-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.ebd-tw-header-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ebd-tw-team-name {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    padding: 0;
    color: #ffffff !important;
    line-height: 1.2;
    text-transform: none;
}

.ebd-tw-header-topscorer {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 0 1 48%;
}

.ebd-tw-header-topscorer-photo {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: rgba(255,255,255,0.10);
    flex-shrink: 0;
}

.ebd-tw-header-topscorer-photo-wrap {
    width: 48px;
    height: 48px;
    min-width: 48px;
    position: relative;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255,255,255,0.10);
}

.ebd-tw-header-topscorer-photo-wrap::before {
    content: attr(data-tw-initial);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    opacity: 0;
}

.ebd-tw-header-topscorer-photo-wrap--fallback::before {
    opacity: 1;
}

.ebd-tw-header-topscorer-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    gap: 1px;
}

.ebd-tw-header-topscorer-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    line-height: 1.1;
}

.ebd-tw-header-topscorer-name {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ebd-tw-header-topscorer-goals {
    font-size: 11px;
    color: rgba(255,255,255,0.82);
    line-height: 1.1;
}

.ebd-tw-country {
    display: none !important;
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.ebd-tw-tabs {
    display: flex;
    border-bottom: 2px solid var(--tw-border);
    background: var(--tw-bg);
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overscroll-behavior: none;
    background-image: none !important;
}

.ebd-tw-tabs::-webkit-scrollbar,
.ebd-tw-tabs::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.ebd-tw-tab {
    appearance: none;
    -webkit-appearance: none;
    flex: 1;
    padding: 10px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tw-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    box-shadow: none;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: -2px;
    min-width: 0;
}


.ebd-tw-tab::before,
.ebd-tw-tab::after {
    content: none !important;
    display: none !important;
}

.ebd-tw-tabs::before,
.ebd-tw-tabs::after,
.ebd-tw-tab,
.ebd-tw-tab:hover,
.ebd-tw-tab:focus,
.ebd-tw-tab:active {
    background-image: none !important;
    box-shadow: none !important;
}

.ebd-tw-tab:hover {
    color: var(--tw-text);
}

.ebd-tw-tab.ebd-tw-tab--active {
    color: var(--tw-accent);
    border-bottom-color: var(--tw-accent);
}

/* ── Panels ───────────────────────────────────────────────────────────────── */
.ebd-tw-panel {
    display: none;
    padding: 16px 20px;
}

.ebd-tw-panel.ebd-tw-panel--active {
    display: block;
}

.ebd-tw-panel,
.ebd-tw-stats-grid,
.ebd-tw-stats-list,
.ebd-tw-squad-grid,
.ebd-tw-form-section,
.ebd-tw-form-filters,
.ebd-tw-results-list,
.ebd-tw-schedule-list,
.ebd-tw-result-teams,
.ebd-tw-schedule-matchup {
    min-width: 0;
    max-width: 100%;
}

.ebd-tw-empty {
    color: var(--tw-muted);
    text-align: center;
    padding: 24px 0;
    font-size: 13px;
}

/* ═══════════════════════════════════════════
   TAB 1: Statistieken
   ═══════════════════════════════════════════ */
.ebd-tw-stats-grid {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* Donut */
.ebd-tw-donut-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ebd-tw-donut {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: conic-gradient(
        #22c55e 0deg var(--tw-win-deg),
        #eab308 var(--tw-win-deg) calc(var(--tw-win-deg) + var(--tw-draw-deg)),
        #ef4444 calc(var(--tw-win-deg) + var(--tw-draw-deg)) 360deg
    );
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ebd-tw-donut::after {
    content: '';
    position: absolute;
    inset: 20px;
    border-radius: 50%;
    background: var(--tw-bg);
}

.ebd-tw-donut-center {
    position: relative;
    z-index: 1;
    text-align: center;
}

.ebd-tw-donut-total {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    color: var(--tw-text);
}

.ebd-tw-donut-sub {
    margin-top: 4px;
    font-size: 10px;
    color: var(--tw-muted);
    text-transform: lowercase;
}

.ebd-tw-donut-canvas {
    display: none !important;
}

.ebd-tw-donut-legend {
    display: flex;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
}

.ebd-tw-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 3px;
    vertical-align: middle;
}

.ebd-tw-dot--win { background: #22c55e; }
.ebd-tw-dot--draw { background: #eab308; }
.ebd-tw-dot--loss { background: #ef4444; }

.ebd-tw-legend-item {
    display: flex;
    align-items: center;
    gap: 3px;
    color: var(--tw-text2);
}

.ebd-tw-played-label {
    font-size: 11px;
    color: var(--tw-muted);
    text-align: center;
}

/* Stats list */
.ebd-tw-stats-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.ebd-tw-stat-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.ebd-tw-stat-row--form {
    padding-top: 4px;
}

.ebd-tw-stat-row--form .ebd-tw-form-badges {
    justify-content: flex-start;
}

.ebd-tw-stat-label {
    font-size: 12px;
    color: var(--tw-muted);
    font-weight: 500;
    min-width: 110px;
}

.ebd-tw-stat-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--tw-text);
    min-width: 50px;
}

.ebd-tw-stat-bar {
    flex: 1;
    height: 6px;
    background: var(--tw-bg2);
    border-radius: 3px;
    overflow: hidden;
    min-width: 60px;
    border: 1px solid var(--tw-border);
}

.ebd-tw-stat-bar-fill {
    height: 100%;
    background: var(--tw-accent);
    border-radius: 3px;
    transition: width 0.6s ease;
}

.ebd-tw-stats-source {
    font-size: 11px;
    color: var(--tw-muted);
    text-align: center;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--tw-border);
}

/* ═══════════════════════════════════════════
   TAB 2: Selectie
   ═══════════════════════════════════════════ */
.ebd-tw-squad-group {
    margin-bottom: 16px;
}

.ebd-tw-squad-group:last-child {
    margin-bottom: 0;
}

.ebd-tw-squad-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--tw-accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 10px 0;
    padding: 0 0 6px 0;
    border-bottom: 1px solid var(--tw-border);
}

.ebd-tw-squad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
}

.ebd-tw-wrap--single-tab .ebd-tw-squad-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.ebd-tw-player-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--tw-bg2);
    border-radius: 6px;
    border: 1px solid var(--tw-border);
    transition: all 0.15s;
    min-width: 0;
}

.ebd-tw-player-card:hover {
    border-color: #94a3b8;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.ebd-tw-player-photo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    background: var(--tw-bg2);
}

.ebd-tw-player-photo-wrap {
    width: 32px;
    height: 32px;
    min-width: 32px;
    position: relative;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: #e2e8f0;
}

.ebd-tw-player-photo-wrap::before {
    content: attr(data-tw-initial);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 700;
    opacity: 0;
}

.ebd-tw-player-photo-wrap--fallback::before {
    opacity: 1;
}

.ebd-tw--dark .ebd-tw-player-photo-wrap {
    background: #334155;
}

.ebd-tw--dark .ebd-tw-player-photo-wrap::before {
    color: #64748b;
}

.ebd-tw-player-info {
    display: grid;
    grid-template-rows: repeat(3, auto);
    row-gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}

.ebd-tw-player-number,
.ebd-tw-player-team {
    display: block;
    font-size: 10px;
    color: var(--tw-muted);
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ebd-tw-player-name {
    display: block !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--tw-text);
    line-height: 1.2;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

.ebd-tw-player-age {
    display: block;
    font-size: 10px;
    color: var(--tw-muted);
    line-height: 1.1;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════
   TAB 3: Wedstrijden (Form + results)
   ═══════════════════════════════════════════ */
.ebd-tw-form-section {
    margin-bottom: 16px;
}

.ebd-tw-form-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.ebd-tw-form-filter {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 8px;
    background: var(--tw-bg2);
    border: 1px solid var(--tw-border);
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 0;
}

.ebd-tw-form-filter:hover {
    border-color: #94a3b8;
}

.ebd-tw-form-filter--active {
    border-color: var(--tw-accent);
    box-shadow: inset 0 0 0 1px var(--tw-accent);
}

.ebd-tw-form-filter-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--tw-text2);
    flex-shrink: 0;
}

.ebd-tw-form-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Form badges */
.ebd-tw-fb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
}

.ebd-tw-fb--win { background: #22c55e; }
.ebd-tw-fb--draw { background: #eab308; color: #000; }
.ebd-tw-fb--loss { background: #ef4444; }

.ebd-tw-muted {
    color: var(--tw-muted);
}

/* Results list */
.ebd-tw-results-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ebd-tw-result-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--tw-bg2);
    border-radius: 6px;
    border: 1px solid var(--tw-border);
    transition: all 0.15s;
}

.ebd-tw-result-row[hidden] {
    display: none !important;
}

.ebd-tw-result-row:hover {
    border-color: #94a3b8;
}

.ebd-tw-result-badge {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}

.ebd-tw-res-win { background: var(--tw-win-bg); color: var(--tw-win); }
.ebd-tw-res-draw { background: var(--tw-draw-bg); color: var(--tw-draw); }
.ebd-tw-res-loss { background: var(--tw-loss-bg); color: var(--tw-loss); }

.ebd-tw-result-teams {
    flex: 1;
    min-width: 0;
}

.ebd-tw-result-matchup {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--tw-text);
    min-width: 0;
}

.ebd-tw-result-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

.ebd-tw-result-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ebd-tw-schedule-teams .ebd-tw-result-name {
    flex: 1 1 0;
    min-width: 0;
}

.ebd-tw-result-name--bold {
    font-weight: 700;
}

.ebd-tw-result-score {
    font-weight: 800;
    color: var(--tw-text);
    flex-shrink: 0;
    padding: 0 4px;
}

.ebd-tw-result-meta {
    display: flex;
    gap: 8px;
    font-size: 11px;
    color: var(--tw-muted);
    margin-top: 2px;
}

.ebd-tw-result-league {
    font-weight: 500;
}


/* ═══════════════════════════════════════════
   TAB 4: Speelschema
   ═══════════════════════════════════════════ */
.ebd-tw-schedule-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ebd-tw-schedule-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    background: var(--tw-bg2);
    border-radius: 6px;
    border: 1px solid var(--tw-border);
    transition: all 0.15s;
}

.ebd-tw-schedule-row:hover {
    border-color: #94a3b8;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.ebd-tw-schedule-matchup {
    flex: 1;
    min-width: 0;
}

.ebd-tw-schedule-teams {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--tw-text);
    min-width: 0;
    flex-wrap: nowrap;
}

.ebd-tw-schedule-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

.ebd-tw-schedule-vs {
    font-size: 11px;
    color: var(--tw-muted);
    font-weight: 700;
    padding: 0 2px;
    flex-shrink: 0;
}

.ebd-tw-schedule-meta {
    margin-top: 2px;
    flex-wrap: wrap;
}

.ebd-tw-schedule-league {
    font-weight: 500;
}




@media (max-width: 767px) {
    .ebd-tw-wrap {
        width: 100% !important;
        max-width: calc(100vw - 16px) !important;
        inline-size: min(100%, calc(100vw - 16px));
        margin-inline: auto;
    }

    .ebd-tw-header,
    .ebd-tw-header-main,
    .ebd-tw-header-topscorer,
    .ebd-tw-tabs,
    .ebd-tw-panel {
        min-width: 0;
        max-width: 100%;
    }

    .ebd-tw-panel,
    .ebd-tw-panel.ebd-tw-panel--active {
        padding-left: 10px;
        padding-right: 10px;
    }

    .ebd-tw-player-card {
        padding-left: 4px;
        padding-right: 4px;
    }

    .ebd-tw-schedule-row {
        padding-left: 6px;
        padding-right: 6px;
    }

    .ebd-tw-tabs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ebd-tw-tab {
        min-width: 0;
        padding: 8px 3px;
        font-size: 10px;
        letter-spacing: 0;
    }

    .ebd-tw-squad-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ebd-tw-player-name {
        font-size: 11px;
    }
}

@media (max-width: 500px) {
    .ebd-tw-stats-grid {
        flex-direction: row !important;
        align-items: flex-start;
        gap: 14px;
    }

    .ebd-tw-donut-wrap {
        flex: 0 0 132px;
    }

    .ebd-tw-donut {
        width: 120px;
        height: 120px;
    }

    .ebd-tw-stats-list {
        flex: 1 1 auto;
        min-width: 0;
    }

    .ebd-tw-form-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        align-items: stretch;
    }

    .ebd-tw-form-filter {
        padding: 7px 3px;
        gap: 5px;
        min-width: 0;
    }

    .ebd-tw-form-filter-label {
        font-size: 10px;
        line-height: 1.1;
    }

    .ebd-tw-form-filter .ebd-tw-form-badges {
        gap: 2px;
        flex-wrap: nowrap;
    }

    .ebd-tw-form-filter .ebd-tw-fb {
        width: 18px;
        height: 18px;
        font-size: 9px;
    }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 400px) {
    .ebd-tw-wrap {
        font-size: 13px;
    }

    .ebd-tw-header {
        padding: 14px 16px;
        column-gap: 10px;
        min-height: 72px;
    }

    .ebd-tw-header-main {
        gap: 10px;
    }

    .ebd-tw-logo,
    .ebd-tw-header-topscorer-photo {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .ebd-tw-team-name {
        font-size: 16px;
    }

    .ebd-tw-header-topscorer-label {
        font-size: 9px;
    }

    .ebd-tw-header-topscorer-name {
        font-size: 11px;
    }

    .ebd-tw-header-topscorer-goals {
        font-size: 10px;
    }

    .ebd-tw-panel {
        padding: 12px 14px;
    }

    .ebd-tw-squad-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ebd-tw-player-name {
        font-size: 11px;
    }

    .ebd-tw-result-matchup {
        font-size: 12px;
    }

    .ebd-tw-tab {
        font-size: 11px;
        padding: 8px 4px;
    }
}


@media (min-width: 501px) {
    .ebd-tw-wrap--single-tab {
        width: 100%;
        max-width: 100%;
    }

    .ebd-tw-wrap--single-tab .ebd-tw-panel {
        width: 100%;
    }
}