/* KH Challenges — kh-challenges.css v1.5.1
   All rules scoped to .khc-wrap or #khc-log-modal to prevent bleed into other plugins */

/* ── Loading ─────────────────────────────────────────────────────────────────── */
.khc-wrap .khc-loading,
.khc-loading-inline { padding:24px; text-align:center; color:#9ca3af; font-size:14px; }

/* ── Cards ───────────────────────────────────────────────────────────────────── */
.khc-wrap .khc-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:16px 20px; margin-bottom:12px; }
.khc-wrap .khc-card-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:10px; }
.khc-wrap .khc-card-title { font-weight:600; font-size:15px; }
.khc-wrap .khc-card-date { font-size:12px; color:#9ca3af; white-space:nowrap; margin-left:8px; }

/* ── Tags ────────────────────────────────────────────────────────────────────── */
.khc-wrap .khc-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.khc-wrap .khc-tag { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:20px; border:1px solid #e5e7eb; background:#f9fafb; color:#6b7280; font-size:12px; }
.khc-wrap .khc-tag-volunteer-hours  { background:#eff6ff; color:#1e40af; border-color:#bfdbfe; }
.khc-wrap .khc-tag-acts-of-kyndness { background:#f0fdf4; color:#166534; border-color:#bbf7d0; }

/* ── Progress bar ────────────────────────────────────────────────────────────── */
.khc-wrap .khc-progress { margin-bottom:10px; }
.khc-wrap .khc-progress-labels { display:flex; justify-content:space-between; font-size:12px; color:#6b7280; margin-bottom:5px; }
.khc-wrap .khc-progress-val { font-weight:600; color:#111827; }
.khc-wrap .khc-progress-bar { height:7px; background:#f3f4f6; border-radius:4px; overflow:hidden; }
.khc-wrap .khc-progress-fill { height:100%; background:#439bc0; border-radius:4px; transition:width .4s ease; }

/* ── Leaderboard standing (card) ─────────────────────────────────────────────── */
.khc-wrap .khc-lb-standing { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:#f9fafb; border:1px solid #e5e7eb; border-radius:8px; margin-bottom:10px; }
.khc-wrap .khc-lb-standing-val { font-size:13px; font-weight:600; color:#111827; }
.khc-wrap .khc-lb-standing-note { font-size:11px; color:#9ca3af; }

/* ── Leaderboard status (detail) ─────────────────────────────────────────────── */
.khc-wrap .khc-lb-status { background:#f0f9ff; border:1px solid #bfdbfe; border-radius:10px; padding:12px 16px; margin-bottom:16px; }
.khc-wrap .khc-lb-status-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.khc-wrap .khc-lb-status-timer { display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:600; color:#1e40af; }
.khc-wrap .khc-lb-status-rule { font-size:11px; color:#9ca3af; }
.khc-wrap .khc-lb-status-you { font-size:13px; color:#374151; }
.khc-wrap .khc-lb-status-rank { color:#439bc0; font-weight:500; }

/* ── GvG scoreboard ──────────────────────────────────────────────────────────── */
.khc-wrap .khc-gvg { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.khc-wrap .khc-gvg-group { flex:1; background:#f9fafb; border:1px solid #e5e7eb; border-radius:10px; padding:10px 14px; }
.khc-wrap .khc-gvg-group.current { border-color:#439bc0; background:#f0f9ff; }
.khc-wrap .khc-gvg-name { font-size:12px; font-weight:600; color:#374151; margin-bottom:4px; }
.khc-wrap .khc-gvg-total { font-size:22px; font-weight:700; color:#439bc0; line-height:1; }
.khc-wrap .khc-gvg-group:not(.current) .khc-gvg-total { color:#9ca3af; }
.khc-wrap .khc-gvg-sep { font-size:13px; color:#d1d5db; font-weight:600; }
.khc-wrap .khc-gvg-end-note { font-size:12px; color:#6b7280; margin:6px 0 10px; display:flex; align-items:center; gap:5px; }

/* ── Inline post box ─────────────────────────────────────────────────────────── */
.khc-wrap .khc-post-box { margin:20px 0 16px; }
/* Group link row — link left, share button right */
.khc-wrap .khc-detail-group-row {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:10px;
}
.khc-wrap .khc-group-link-subtle {
    display:inline-flex; align-items:center; gap:4px;
    font-size:12px; color:#9ca3af; text-decoration:none;
    transition:color .15s;
}
.khc-wrap .khc-group-link-subtle i { font-size:12px; }
.khc-wrap .khc-group-link-subtle:hover { color:#439bc0; }
/* Post trigger — auto-width, left-aligned, sits above the leaderboard */
.khc-wrap .khc-post-trigger { width:auto; }
/* Post form — revealed when trigger is clicked */
.khc-wrap .khc-post-form { border:1px solid #e5e7eb; border-radius:10px; padding:14px; background:#fafafa; }
.khc-wrap .khc-post-textarea { width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:8px; font-size:14px; color:#111827; background:#fff; resize:vertical; min-height:80px; transition:border-color .15s; box-sizing:border-box; }
.khc-wrap .khc-post-textarea:focus { outline:none; border-color:#439bc0; box-shadow:0 0 0 3px rgba(67,155,192,.12); }
.khc-wrap .khc-post-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }
.khc-wrap .khc-post-msg { margin-top:10px; }

/* ── Card footer / status ────────────────────────────────────────────────────── */
.khc-wrap .khc-card-footer { display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:12px; border-top:1px solid #f3f4f6; }
.khc-wrap .khc-status { display:flex; align-items:center; gap:6px; font-size:12px; color:#6b7280; }
.khc-wrap .khc-dot { width:7px; height:7px; border-radius:50%; background:#22c55e; display:inline-block; }

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.khc-wrap .khc-btn,
#khc-vol-confirm-modal .khc-btn {
    display:inline-flex; align-items:center; gap:5px; padding:7px 14px;
    border-radius:8px; border:1px solid #d1d5db; background:#fff; color:#374151;
    font-size:13px; font-weight:500; cursor:pointer; text-decoration:none;
    transition:all .15s; line-height:1;
}
.khc-wrap .khc-btn:hover,
#khc-vol-confirm-modal .khc-btn:hover { border-color:#9ca3af; background:#f9fafb; }
.khc-wrap .khc-btn:active,
#khc-vol-confirm-modal .khc-btn:active { transform:scale(.98); }
.khc-wrap .khc-btn-primary,
#khc-vol-confirm-modal .khc-btn-primary { background:#439bc0; color:#fff; border-color:#439bc0; }
.khc-wrap .khc-btn-primary:hover,
#khc-vol-confirm-modal .khc-btn-primary:hover { background:#3688aa; border-color:#3688aa; color:#fff; }

/* ── Forms ───────────────────────────────────────────────────────────────────── */
.khc-wrap .khc-form { max-width:600px; }
.khc-wrap .khc-field { margin-bottom:18px; }
.khc-wrap .khc-field > label { display:block; font-size:13px; font-weight:500; color:#374151; margin-bottom:6px; }
.khc-wrap .khc-field input[type="text"],
.khc-wrap .khc-field input[type="number"],
.khc-wrap .khc-field input[type="date"],
.khc-wrap .khc-field select,
.khc-wrap .khc-field textarea {
    width:100%; padding:8px 12px; border:1px solid #d1d5db; border-radius:8px;
    font-size:14px; color:#111827; background:#fff; transition:border-color .15s;
}
.khc-wrap .khc-field input:focus,
.khc-wrap .khc-field select:focus,
.khc-wrap .khc-field textarea:focus { outline:none; border-color:#439bc0; box-shadow:0 0 0 3px rgba(67,155,192,.12); }
.khc-wrap .khc-field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.khc-wrap .khc-required-note { font-size:11px; color:#d97706; font-weight:400; }

/* Challenge type — 2 columns */
.khc-wrap .khc-type-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.khc-wrap .khc-type-opt { cursor:pointer; }
.khc-wrap .khc-type-opt input { position:absolute; opacity:0; pointer-events:none; }
.khc-wrap .khc-type-inner { display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 8px; border:1px solid #e5e7eb; border-radius:10px; font-size:12px; color:#374151; text-align:center; transition:all .15s; }
.khc-wrap .khc-type-inner i { font-size:20px; }
.khc-wrap .khc-type-opt input:checked + .khc-type-inner { border-color:#439bc0; background:#f0f9ff; color:#439bc0; }

/* Format — 3 columns */
.khc-wrap .khc-fmt-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.khc-wrap .khc-fmt-opt { cursor:pointer; }
.khc-wrap .khc-fmt-opt input { position:absolute; opacity:0; pointer-events:none; }
.khc-wrap .khc-fmt-inner { display:flex; flex-direction:column; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; transition:all .15s; }
.khc-wrap .khc-fmt-inner strong { font-size:13px; margin-bottom:2px; }
.khc-wrap .khc-fmt-inner span { font-size:11px; color:#9ca3af; }
.khc-wrap .khc-fmt-opt input:checked + .khc-fmt-inner { border-color:#439bc0; background:#f0f9ff; }

/* Win condition — 2 columns */
.khc-wrap .khc-wc-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.khc-wrap .khc-wc-opt { cursor:pointer; }
.khc-wrap .khc-wc-opt input { position:absolute; opacity:0; pointer-events:none; }
.khc-wrap .khc-wc-inner { display:flex; flex-direction:column; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; transition:all .15s; }
.khc-wrap .khc-wc-inner strong { font-size:13px; margin-bottom:2px; }
.khc-wrap .khc-wc-inner span { font-size:11px; color:#9ca3af; }
.khc-wrap .khc-wc-opt input:checked + .khc-wc-inner { border-color:#439bc0; background:#f0f9ff; }

/* Group search */
.khc-wrap .khc-gvg-field { border:1px solid #bfdbfe; border-radius:10px; padding:14px; background:#f0f9ff; margin-bottom:18px; }
.khc-wrap .khc-group-search { position:relative; }
.khc-wrap .khc-group-search i { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:#9ca3af; font-size:15px; pointer-events:none; }
.khc-wrap .khc-group-search input { padding-left:32px !important; }
#khc-group-results { border:1px solid #e5e7eb; border-radius:8px; margin-top:6px; overflow:hidden; background:#fff; }
.khc-group-result { display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid #f3f4f6; cursor:pointer; transition:background .12s; }
.khc-group-result:last-child { border-bottom:none; }
.khc-group-result:hover { background:#f9fafb; }
.khc-group-result-avatar { width:30px; height:30px; border-radius:6px; background:#dbeafe; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:#1d4ed8; flex-shrink:0; }
.khc-group-result-info { flex:1; }
.khc-group-result-name { font-size:13px; font-weight:500; }
.khc-group-result-meta { font-size:11px; color:#9ca3af; }
.khc-group-result-select { font-size:12px; color:#439bc0; font-weight:500; }
#khc-selected-group { display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid #439bc0; border-radius:8px; background:#fff; margin-top:6px; }
.khc-selected-group-name { flex:1; font-size:13px; font-weight:500; }
.khc-selected-group-remove { font-size:12px; color:#9ca3af; cursor:pointer; }
.khc-selected-group-remove:hover { color:#ef4444; }

/* Form actions & messages */
.khc-wrap .khc-form-actions,
#khc-vol-confirm-modal .khc-form-actions { display:flex; gap:8px; justify-content:flex-end; padding-top:4px; }
.khc-wrap .khc-msg,
#khc-vol-confirm-modal .khc-msg { margin-top:12px; padding:10px 14px; border-radius:8px; font-size:13px; }
.khc-wrap .khc-msg.success,
#khc-vol-confirm-modal .khc-msg.success { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
.khc-wrap .khc-msg.error,
#khc-vol-confirm-modal .khc-msg.error { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

/* ── Detail view ─────────────────────────────────────────────────────────────── */
.khc-wrap .khc-back { display:inline-flex; align-items:center; gap:5px; font-size:13px; color:#6b7280; background:none; border:none; cursor:pointer; padding:0; margin-bottom:16px; }
.khc-wrap .khc-back:hover { color:#439bc0; }
.khc-wrap .khc-detail-header { margin-bottom:16px; }
.khc-wrap .khc-detail-title { font-size:20px; font-weight:700; margin-bottom:10px; }
.khc-wrap .khc-detail-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }

/* Leaderboard rows */
.khc-wrap .khc-leaderboard { margin-top:24px; }
.khc-wrap .khc-section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:14px; }
.khc-wrap .khc-muted { color:#9ca3af; font-size:13px; }
.khc-wrap .khc-lb-row { display:flex; align-items:center; gap:10px; padding:9px 10px; border-bottom:1px solid #f3f4f6; border-radius:8px; font-size:13px; }
.khc-wrap .khc-lb-row.is-me { background:#f0f9ff; }
.khc-wrap .khc-lb-row:last-child { border-bottom:none; }
.khc-wrap .khc-lb-rank { width:22px; text-align:center; font-size:12px; color:#9ca3af; font-weight:500; flex-shrink:0; }
.khc-wrap .khc-lb-rank.gold { color:#d97706; }
.khc-wrap .khc-lb-avatar { width:30px; height:30px; border-radius:50%; background:#f3f4f6; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:#6b7280; flex-shrink:0; }
.khc-wrap .khc-lb-name { flex:1; }
.khc-wrap .khc-lb-val { font-weight:600; color:#439bc0; }
.khc-wrap .khc-you { font-size:11px; color:#9ca3af; font-weight:400; }
.khc-wrap .khc-lb-gap { text-align:center; color:#d1d5db; font-size:13px; padding:4px 0; }

/* ── Vol confirm modal ────────────────────────────────────────────────────────── 
   Fix: use 100vw/100vh + position:fixed on both container and backdrop to prevent
   BuddyBoss CSS transforms on panel containers from clipping fixed positioning. */
#khc-vol-confirm-modal {
    position:fixed;
    top:0; left:0;
    width:100vw; height:100vh;
    z-index:999999;
    display:flex; align-items:center; justify-content:center;
}
#khc-vol-confirm-modal .khc-modal-bg {
    position:fixed;
    top:0; left:0;
    width:100vw; height:100vh;
    background:rgba(0,0,0,.55);
    cursor:pointer;
}
#khc-vol-confirm-modal .khc-modal-box {
    position:relative;
    background:#fff; border-radius:14px; padding:24px;
    width:90%; max-width:420px;
    z-index:1;
    box-shadow:0 20px 40px rgba(0,0,0,.18);
}
#khc-vol-confirm-modal .khc-modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
#khc-vol-confirm-modal .khc-modal-title { font-size:16px; font-weight:600; }
#khc-vol-confirm-modal .khc-modal-close { background:none; border:none; cursor:pointer; color:#9ca3af; font-size:18px; padding:2px; line-height:1; }
#khc-vol-confirm-modal .khc-modal-close:hover { color:#111827; }
#khc-vol-confirm-modal .khc-vol-intro { font-size:13px; color:#6b7280; margin-bottom:16px; }
#khc-vol-confirm-modal .khc-vol-challenge-name { font-size:13px; color:#374151; margin-bottom:16px; }
#khc-vol-confirm-modal .khc-field { margin-bottom:16px; }
#khc-vol-confirm-modal .khc-field > label { display:block; font-size:13px; font-weight:500; color:#374151; margin-bottom:6px; }
#khc-vol-confirm-modal .khc-field input[type="number"],
#khc-vol-confirm-modal .khc-field input[type="date"],
#khc-vol-confirm-modal .khc-field select { width:100%; padding:8px 12px; border:1px solid #d1d5db; border-radius:8px; font-size:14px; color:#111827; background:#fff; transition:border-color .15s; }
#khc-vol-confirm-modal .khc-field input:focus,
#khc-vol-confirm-modal .khc-field select:focus { outline:none; border-color:#439bc0; box-shadow:0 0 0 3px rgba(67,155,192,.12); }
#khc-vol-confirm-modal .khc-field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* ── Invites ─────────────────────────────────────────────────────────────────── */
.khc-wrap .khc-invite-card { border-color:#bfdbfe; background:#f0f9ff; }
.khc-wrap .khc-invite-from { font-size:12px; color:#2563eb; margin-bottom:6px; }
.khc-wrap .khc-invite-actions { display:flex; gap:8px; margin-top:12px; }

/* ── Manage ──────────────────────────────────────────────────────────────────── */
.khc-wrap .khc-manage-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:14px; }
.khc-wrap .khc-manage-row { display:flex; align-items:center; gap:12px; padding:10px 14px; border:1px solid #e5e7eb; border-radius:10px; margin-bottom:8px; background:#fff; }
.khc-wrap .khc-manage-completed { opacity:.65; }
.khc-wrap .khc-manage-info { flex:1; min-width:0; }
.khc-wrap .khc-manage-name { font-size:14px; font-weight:500; }
.khc-wrap .khc-manage-tags { margin-top:4px; }
.khc-wrap .khc-manage-actions { display:flex; gap:6px; flex-shrink:0; }
.khc-wrap .khc-pill { padding:3px 10px; border-radius:20px; font-size:11px; font-weight:500; }
.khc-wrap .khc-pill-pending { background:#fffbeb; color:#92400e; border:1px solid #fde68a; }

/* ── Empty / notice ──────────────────────────────────────────────────────────── */
.khc-wrap .khc-empty { text-align:center; padding:40px 20px; color:#9ca3af; font-size:14px; }
.khc-wrap .khc-empty p { margin-bottom:8px; }
.khc-wrap .khc-notice { color:#6b7280; font-size:14px; padding:12px 0; }

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width:520px) {
    .khc-wrap .khc-type-grid,
    .khc-wrap .khc-wc-grid  { grid-template-columns:1fr 1fr; }
    .khc-wrap .khc-fmt-grid { grid-template-columns:1fr 1fr; }
    .khc-wrap .khc-field-row,
    #khc-vol-confirm-modal .khc-field-row { grid-template-columns:1fr; }
    .khc-wrap .khc-gvg { flex-direction:column; }
}

/* ── Vol confirm — challenge checkbox list ───────────────────────────────────── */
#khc-vol-confirm-modal .khc-vol-checks {
    display:flex; flex-direction:column; gap:8px;
    margin-top:4px;
}
#khc-vol-confirm-modal .khc-vol-check-label {
    display:flex; align-items:center; gap:10px;
    padding:8px 12px; border:1px solid #e5e7eb; border-radius:8px;
    background:#fff; cursor:pointer; font-size:13px; color:#374151;
    transition:border-color .15s, background .15s;
}
#khc-vol-confirm-modal .khc-vol-check-label:has(input:checked) {
    border-color:#439bc0; background:#f0f9ff;
}
#khc-vol-confirm-modal .khc-vol-check-label input[type="checkbox"] {
    width:16px; height:16px; accent-color:#439bc0; cursor:pointer; flex-shrink:0;
}

/* ── Challenges Hub ──────────────────────────────────────────────────────────── */
.khc-hub-wrap .khc-hub-card { border-top:3px solid #439bc0; }

.khc-hub-group-label {
    display:inline-flex; align-items:center; gap:5px;
    font-size:11px; font-weight:600; color:#439bc0;
    text-transform:uppercase; letter-spacing:.04em;
    margin-bottom:8px;
}
.khc-hub-group-label i { font-size:13px; }

/* ── Public challenges discovery ─────────────────────────────────────────────── */
.khc-public-wrap .khc-public-card { border-top:3px solid #22c55e; }

/* Join banner — shown in detail view for non-members viewing public challenges */
.khc-wrap .khc-join-banner {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:12px 16px; background:#f0fdf4; border:1px solid #bbf7d0;
    border-radius:10px; margin-bottom:16px; font-size:13px; color:#166534;
    flex-wrap:wrap;
}
.khc-wrap .khc-join-banner i { margin-right:4px; }
.khc-wrap .khc-btn-sm { padding:5px 12px; font-size:12px; }

/* Participant teaser on non-member public cards */
.khc-wrap .khc-public-teaser {
    display:flex; align-items:center; gap:8px;
    padding:8px 12px; background:#f9fafb; border:1px solid #e5e7eb;
    border-radius:8px; margin-bottom:10px; font-size:13px; color:#6b7280;
}
.khc-wrap .khc-public-teaser i { color:#439bc0; }

/* ── Share challenge modal ───────────────────────────────────────────────────── */
#khc-share-modal {
    position:fixed; top:0; left:0; width:100vw; height:100vh;
    z-index:999999; display:flex; align-items:center; justify-content:center;
}
#khc-share-modal .khc-modal-bg {
    position:fixed; top:0; left:0; width:100vw; height:100vh;
    background:rgba(0,0,0,.55); cursor:pointer;
}
#khc-share-modal .khc-modal-box {
    position:relative; background:#fff; border-radius:14px; padding:24px;
    width:90%; max-width:460px; z-index:1; box-shadow:0 20px 40px rgba(0,0,0,.18);
}
#khc-share-modal .khc-modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
#khc-share-modal .khc-modal-title { font-size:16px; font-weight:600; }
#khc-share-modal .khc-modal-close { background:none; border:none; cursor:pointer; color:#9ca3af; font-size:18px; line-height:1; }
#khc-share-modal .khc-modal-close:hover { color:#111827; }
#khc-share-modal .khc-vol-intro { font-size:13px; color:#6b7280; margin-bottom:12px; }
#khc-share-modal .khc-post-textarea { width:100%; box-sizing:border-box; }
#khc-share-modal .khc-btn { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; border-radius:8px; border:1px solid #d1d5db; background:#fff; color:#374151; font-size:13px; font-weight:500; cursor:pointer; transition:all .15s; }
#khc-share-modal .khc-btn-primary { background:#439bc0; color:#fff; border-color:#439bc0; }
#khc-share-modal .khc-btn-primary:hover { background:#3688aa; border-color:#3688aa; }