/**
 * CHAT 4 CSS — AI Sidebar + Kennisbank + Zoeken + Sporter Profielen
 * V31 — Trovada
 * 
 * Ondersteunt: dark mode (default) + light mode
 * Responsive: mobile-first, sidebar onder content op <768px
 */

/* ============================================================
   1. AI SIDEBAR — Enhanced blocks
   ============================================================ */

.wk-sidebar--ai {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Live badge block */
.wk-sb-card--live {
    position: relative;
    border-top: 3px solid #22c55e;
    overflow: hidden;
}
.wk-sb-card--live::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #22c55e, #4ade80);
    animation: wk-live-shimmer 2s infinite;
}
@keyframes wk-live-shimmer {
    0%, 100% { opacity: 1; }
    50% { opacity: .6; }
}
.wk-sb-live-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    animation: wk-pulse-green 1.5s infinite;
    vertical-align: middle;
}
.wk-sb-live-event {
    font-family: var(--font-h);
    font-size: 18px;
    letter-spacing: 1px;
    margin: 4px 0;
}
body.wk-light .wk-sb-live-event { color: #111; }
body.wk-dark  .wk-sb-live-event { color: #fff; }
.wk-sb-live-day {
    font-size: 12px;
    font-weight: 600;
    color: #22c55e;
    margin-bottom: 8px;
}

/* Quick links enhanced */
.wk-sb-nav__link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    transition: all .15s;
    text-decoration: none;
}
body.wk-light .wk-sb-nav__link { color: #333; }
body.wk-dark  .wk-sb-nav__link { color: #ccc; }
.wk-sb-nav__link:hover { background: var(--bg2, #1c1c1c); color: var(--or); }
.wk-sb-nav__link.active { background: rgba(255,107,0,.08); color: var(--or); font-weight: 600; }
.wk-sb-nav__link i { font-size: 16px; flex-shrink: 0; }
body.wk-light .wk-sb-nav__link i { color: #888; }
body.wk-dark  .wk-sb-nav__link i { color: #666; }
.wk-sb-nav__link.active i, .wk-sb-nav__link:hover i { color: var(--or); }

/* Trending block */
.wk-sb-card--trending .wk-sb-card__title i {
    color: #f59e0b;
    margin-right: 4px;
}
.wk-sb-trending { display: flex; flex-direction: column; gap: 2px; }
.wk-sb-trending__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 6px;
    text-decoration: none;
    transition: background .15s;
}
.wk-sb-trending__item:hover { background: var(--bg2, #1c1c1c); }
.wk-sb-trending__rank {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
body.wk-light .wk-sb-trending__rank { background: #f3f4f6; color: #374151; }
body.wk-dark  .wk-sb-trending__rank { background: #2a2a2a; color: #aaa; }
.wk-sb-trending__info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wk-sb-trending__title {
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.wk-light .wk-sb-trending__title { color: #111; }
body.wk-dark  .wk-sb-trending__title { color: #ddd; }
.wk-sb-trending__type {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
body.wk-light .wk-sb-trending__type { color: #888; }
body.wk-dark  .wk-sb-trending__type { color: #666; }

/* Personal recommendations block */
.wk-sb-card--personal .wk-sb-card__title i {
    color: #a855f7;
    margin-right: 4px;
}
.wk-sb-personal { display: flex; flex-direction: column; gap: 2px; }
.wk-sb-personal__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 6px;
    text-decoration: none;
    transition: background .15s;
}
.wk-sb-personal__item:hover { background: var(--bg2, #1c1c1c); }
.wk-sb-personal__name {
    font-size: 13px;
    font-weight: 500;
}
body.wk-light .wk-sb-personal__name { color: #333; }
body.wk-dark  .wk-sb-personal__name { color: #ccc; }
.wk-sb-personal__arrow {
    color: var(--or);
    font-weight: 600;
    transition: transform .15s;
}
.wk-sb-personal__item:hover .wk-sb-personal__arrow { transform: translateX(3px); }

/* Affiliate disclaimer */
.wk-sb-disclaimer {
    font-size: 11px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border, #1e1e1e);
}
body.wk-light .wk-sb-disclaimer { color: #888; border-top-color: #e5e7eb; }
body.wk-dark  .wk-sb-disclaimer { color: #666; }
.wk-sb-disclaimer a { color: inherit; text-decoration: underline; }


/* ============================================================
   2. KENNISBANK FRONTEND — Entity cards & contextpanels
   ============================================================ */

/* Kennisbank sidebar card */
.wk-sb-card--kb {
    border-top: 3px solid #3b82f6;
}
.wk-sb-card--kb .wk-sb-card__title i {
    color: #3b82f6;
    margin-right: 4px;
}

/* Entity list in sidebar */
.wk-kb-entities {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.wk-kb-entity {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px;
    border-radius: 6px;
    transition: background .15s;
    cursor: default;
}
.wk-kb-entity:hover { background: var(--bg2, #1c1c1c); }
.wk-kb-entity__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}
body.wk-light .wk-kb-entity__icon { background: #f3f4f6; }
body.wk-dark  .wk-kb-entity__icon { background: #222; }
.wk-kb-entity__info { flex: 1; min-width: 0; }
.wk-kb-entity__name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}
body.wk-light .wk-kb-entity__name { color: #111; }
body.wk-dark  .wk-kb-entity__name { color: #eee; }
.wk-kb-entity__snippet {
    font-size: 11px;
    line-height: 1.4;
    margin-top: 2px;
}
body.wk-light .wk-kb-entity__snippet { color: #666; }
body.wk-dark  .wk-kb-entity__snippet { color: #888; }
.wk-kb-entity__badge {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
    margin-top: 2px;
}
.wk-kb-entity__badge--verified { background: rgba(34,197,94,.15); color: #22c55e; }
.wk-kb-entity__badge--ai { background: rgba(99,102,241,.15); color: #6366f1; }

/* "Wist je dat?" fact */
.wk-kb-fact {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border-left: 3px solid #f59e0b;
}
body.wk-light .wk-kb-fact { background: #fffbeb; }
body.wk-dark  .wk-kb-fact { background: rgba(245,158,11,.06); }
.wk-kb-fact__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
}
body.wk-light .wk-kb-fact__label { color: #b45309; }
body.wk-dark  .wk-kb-fact__label { color: #f59e0b; }
.wk-kb-fact__text {
    font-size: 12px;
    line-height: 1.5;
}
body.wk-light .wk-kb-fact__text { color: #78350f; }
body.wk-dark  .wk-kb-fact__text { color: #d4a574; }

/* Entity card (medium/full) */
.wk-kb-card {
    border-radius: 10px;
    padding: 14px;
    transition: box-shadow .15s;
}
body.wk-light .wk-kb-card { background: #fff; border: 1px solid #e5e7eb; }
body.wk-dark  .wk-kb-card { background: #161616; border: 1px solid #2a2a2a; }
.wk-kb-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.wk-kb-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.wk-kb-card__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.wk-kb-card__meta { flex: 1; min-width: 0; }
.wk-kb-card__name { font-size: 14px; font-weight: 600; }
body.wk-light .wk-kb-card__name { color: #111; }
body.wk-dark  .wk-kb-card__name { color: #eee; }
.wk-kb-card__type { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
body.wk-light .wk-kb-card__type { color: #888; }
body.wk-dark  .wk-kb-card__type { color: #666; }
.wk-kb-card__verified { color: #22c55e; font-size: 16px; }
.wk-kb-card__body { margin-top: 10px; font-size: 13px; line-height: 1.6; }
body.wk-light .wk-kb-card__body { color: #444; }
body.wk-dark  .wk-kb-card__body { color: #aaa; }
.wk-kb-card__footer {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border, #1e1e1e);
    font-size: 11px;
}
body.wk-light .wk-kb-card__footer { color: #888; border-top-color: #e5e7eb; }
body.wk-dark  .wk-kb-card__footer { color: #666; }

/* Entity data list */
.wk-kb-data-list { margin: 10px 0 0; }
.wk-kb-data-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid var(--border, #1e1e1e);
    font-size: 12px;
}
body.wk-light .wk-kb-data-row { border-bottom-color: #f3f4f6; }
.wk-kb-data-row:last-child { border-bottom: none; }
.wk-kb-data-row dt { font-weight: 500; }
body.wk-light .wk-kb-data-row dt { color: #666; }
body.wk-dark  .wk-kb-data-row dt { color: #888; }
.wk-kb-data-row dd { text-align: right; font-weight: 600; margin: 0; }
body.wk-light .wk-kb-data-row dd { color: #111; }
body.wk-dark  .wk-kb-data-row dd { color: #eee; }


/* ============================================================
   3. SEMANTISCH ZOEKEN — Enhanced search
   ============================================================ */

/* Search autocomplete dropdown */
.wk-search-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    display: none;
}
body.wk-light .wk-search-autocomplete { background: #fff; border: 1px solid #e5e7eb; border-top: none; }
body.wk-dark  .wk-search-autocomplete { background: #1a1a1a; border: 1px solid #2a2a2a; border-top: none; }
.wk-search-autocomplete.active { display: block; }

.wk-search-suggestion {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background .1s;
    text-decoration: none;
}
.wk-search-suggestion:hover,
.wk-search-suggestion.highlighted {
    background: rgba(255,107,0,.06);
}
.wk-search-suggestion__icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
}
body.wk-light .wk-search-suggestion__icon { background: #f3f4f6; color: #666; }
body.wk-dark  .wk-search-suggestion__icon { background: #222; color: #888; }
.wk-search-suggestion__text {
    font-size: 13px;
    font-weight: 500;
}
body.wk-light .wk-search-suggestion__text { color: #111; }
body.wk-dark  .wk-search-suggestion__text { color: #ddd; }
.wk-search-suggestion__type {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-left: auto;
    flex-shrink: 0;
}
body.wk-light .wk-search-suggestion__type { color: #999; }
body.wk-dark  .wk-search-suggestion__type { color: #555; }

/* Search form wrapper (for autocomplete positioning) */
.wk-search-wrap { position: relative; }

/* Instant answer */
.wk-instant-answer {
    margin: 16px 0;
    padding: 16px 20px;
    border-radius: 10px;
    border-left: 4px solid var(--or);
}
body.wk-light .wk-instant-answer { background: #fff7ed; }
body.wk-dark  .wk-instant-answer { background: rgba(255,107,0,.04); }
.wk-instant-answer__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--or);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.wk-instant-answer__text {
    font-size: 15px;
    line-height: 1.6;
}
body.wk-light .wk-instant-answer__text { color: #333; }
body.wk-dark  .wk-instant-answer__text { color: #ddd; }
.wk-instant-answer__source {
    font-size: 11px;
    margin-top: 8px;
}
body.wk-light .wk-instant-answer__source { color: #888; }
body.wk-dark  .wk-instant-answer__source { color: #666; }
.wk-instant-answer__link {
    display: inline-block;
    margin-top: 8px;
    color: var(--or);
    font-weight: 600;
    font-size: 13px;
}

/* Kennisbank entities in search results */
.wk-search-entities {
    margin: 16px 0;
}
.wk-search-entities__title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 10px;
    font-weight: 600;
}
body.wk-light .wk-search-entities__title { color: #888; }
body.wk-dark  .wk-search-entities__title { color: #666; }
.wk-search-entities__grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

/* "Bedoelde je?" suggestion */
.wk-search-did-you-mean {
    font-size: 13px;
    margin: 10px 0 16px;
}
body.wk-light .wk-search-did-you-mean { color: #666; }
body.wk-dark  .wk-search-did-you-mean { color: #888; }
.wk-search-did-you-mean a {
    color: var(--or);
    font-weight: 600;
}

/* Enhanced search result */
.wk-search-result {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--border, #1e1e1e);
    text-decoration: none;
    transition: opacity .15s;
}
body.wk-light .wk-search-result { border-bottom-color: #f3f4f6; }
.wk-search-result:hover { opacity: .8; }
.wk-search-result__type {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    color: var(--or);
    margin-bottom: 2px;
}
.wk-search-result__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}
body.wk-light .wk-search-result__title { color: #111; }
body.wk-dark  .wk-search-result__title { color: #eee; }
.wk-search-result__excerpt {
    font-size: 13px;
    line-height: 1.5;
    margin-top: 4px;
}
body.wk-light .wk-search-result__excerpt { color: #666; }
body.wk-dark  .wk-search-result__excerpt { color: #888; }


/* ============================================================
   4. SPORTER PROFIELEN — Timeline, stats, related
   ============================================================ */

/* Timeline */
.wk-timeline { margin: 24px 0; }
.wk-timeline__title {
    font-family: var(--font-h);
    font-size: 22px;
    letter-spacing: 1px;
    margin-bottom: 16px;
}
.wk-timeline__item {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    border-left: 2px solid var(--border2, #2a2a2a);
    margin-left: 10px;
    padding-left: 20px;
    position: relative;
}
body.wk-light .wk-timeline__item { border-left-color: #e5e7eb; }
.wk-timeline__item::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 16px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid var(--border2, #2a2a2a);
}
body.wk-light .wk-timeline__item::before { border-color: #d1d5db; background: #fff; }
body.wk-dark  .wk-timeline__item::before { background: #111; }
.wk-timeline__item--gold::before { border-color: #fbbf24 !important; background: #fef3c7 !important; }
.wk-timeline__item--silver::before { border-color: #9ca3af !important; background: #f3f4f6 !important; }
.wk-timeline__item--bronze::before { border-color: #d97706 !important; background: #fef3c7 !important; }
.wk-timeline__year {
    font-family: var(--font-h);
    font-size: 18px;
    color: var(--or);
    flex-shrink: 0;
    min-width: 40px;
}
.wk-timeline__content { flex: 1; }
.wk-timeline__event {
    font-size: 14px;
    font-weight: 600;
}
body.wk-light .wk-timeline__event { color: #111; }
body.wk-dark  .wk-timeline__event { color: #eee; }
.wk-timeline__medal { margin-right: 4px; }
.wk-timeline__detail {
    font-size: 12px;
    margin-top: 2px;
}
body.wk-light .wk-timeline__detail { color: #666; }
body.wk-dark  .wk-timeline__detail { color: #888; }
.wk-timeline__result {
    font-size: 13px;
    font-weight: 600;
    color: var(--or);
    margin-top: 3px;
}

/* Sporter stats */
.wk-sporter-stats { margin: 24px 0; }
.wk-sporter-stats__title {
    font-family: var(--font-h);
    font-size: 22px;
    letter-spacing: 1px;
    margin-bottom: 16px;
}
.wk-sporter-stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 10px;
}
.wk-sporter-stat {
    text-align: center;
    padding: 14px 8px;
    border-radius: 10px;
}
body.wk-light .wk-sporter-stat { background: #f9fafb; border: 1px solid #e5e7eb; }
body.wk-dark  .wk-sporter-stat { background: #161616; border: 1px solid #2a2a2a; }
.wk-sporter-stat__icon { font-size: 20px; display: block; margin-bottom: 4px; }
.wk-sporter-stat__num {
    font-family: var(--font-h);
    font-size: 24px;
    color: var(--or);
    display: block;
}
.wk-sporter-stat__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    display: block;
    margin-top: 2px;
}
body.wk-light .wk-sporter-stat__label { color: #888; }
body.wk-dark  .wk-sporter-stat__label { color: #666; }

/* Related sporters */
.wk-related-sporters { margin: 24px 0; }
.wk-related-sporters__title {
    font-family: var(--font-h);
    font-size: 22px;
    letter-spacing: 1px;
    margin-bottom: 16px;
}
.wk-related-sporters__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
}
.wk-related-sporter {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 8px;
    border-radius: 10px;
    text-decoration: none;
    transition: all .15s;
}
body.wk-light .wk-related-sporter { background: #fff; border: 1px solid #e5e7eb; }
body.wk-dark  .wk-related-sporter { background: #161616; border: 1px solid #2a2a2a; }
.wk-related-sporter:hover {
    border-color: var(--or);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255,107,0,.1);
}
.wk-related-sporter__img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 8px;
}
.wk-related-sporter__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wk-related-sporter__img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
body.wk-light .wk-related-sporter__img--placeholder { background: #f3f4f6; color: #9ca3af; }
body.wk-dark  .wk-related-sporter__img--placeholder { background: #222; color: #555; }
.wk-related-sporter__name {
    font-size: 13px;
    font-weight: 600;
}
body.wk-light .wk-related-sporter__name { color: #111; }
body.wk-dark  .wk-related-sporter__name { color: #eee; }
.wk-related-sporter__club {
    font-size: 11px;
    margin-top: 2px;
}
body.wk-light .wk-related-sporter__club { color: #888; }
body.wk-dark  .wk-related-sporter__club { color: #666; }


/* ============================================================
   5. RESPONSIVE
   ============================================================ */

@media (max-width: 767px) {
    .wk-search-entities__grid {
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .wk-search-entities__grid .wk-kb-card {
        min-width: 220px;
        flex-shrink: 0;
    }
    .wk-sporter-stats__grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .wk-related-sporters__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .wk-timeline__item { margin-left: 0; padding-left: 16px; }
}

/* ============================================================
   6. PRINT
   ============================================================ */

@media print {
    .wk-sidebar--ai,
    .wk-search-autocomplete,
    .wk-sb-card--trending,
    .wk-sb-card--personal { display: none !important; }
}