/* ==========================================================================
   Gitfolio inner pages (pages.css) — gallery, battles, leaderboard, badges,
   recruiter, talent pool, admin and portfolio views. Loaded after app.css via
   {% block styles %}. Uses app.css tokens only, so both themes work.

   HEAD        .gf-page-head--compact  .gf-page-actions
   STATS       .gf-stats > .gf-stat (.gf-stat-label, .gf-stat-value, .gf-stat-note)
   TOOLBAR     .gf-toolbar (filter bar)  .gf-seg (segmented links/radios)
   PANELS      .gf-panel (card with header/body)  .gf-panel-head  .gf-panel-body
               .gf-card-head (title row inside a .gf-card)
   TABLES      .gf-table-wrap > .table.gf-table
   STATUS      .gf-pill--success / --danger / --muted / --warning
   PEOPLE      .gf-avatar-md (40px)  .gf-avatar-lg (72px)  .gf-person (avatar + text)
   DATA        .gf-dl (definition grid)  .gf-code (snippet box)  .gf-kbd-row
   MEDIA       .gf-thumb (fixed-ratio image frame)
   SCORE       .gf-score (+ --high, --mid, --low)
   PER PAGE    (end of file) .gf-gallery-* .gf-battle-* .gf-lb-* .gf-rec-*
               .gf-badge-* .gf-pv-* .gf-admin-*
   ========================================================================== */

/* ---------- Head ---------------------------------------------------------- */
.gf-page-head--compact { padding: 2.5rem 0 1.5rem; }
.gf-page-head .gf-lead { max-width: 680px; }
.gf-page-head .text-center .gf-lead,
.gf-page-head.text-center .gf-lead { margin-left: auto; margin-right: auto; }
.gf-page-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.gf-back-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 1rem; color: var(--gf-muted); font-size: 0.9rem; text-decoration: none; }
.gf-back-link:hover { color: var(--gf-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Stats --------------------------------------------------------- */
.gf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.gf-stat {
    padding: 1.1rem 1.25rem;
    background: var(--gf-surface);
    border: 1px solid var(--gf-border);
    border-radius: var(--gf-radius);
    box-shadow: var(--gf-shadow-sm);
}
.gf-stat-label { display: block; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gf-muted); }
.gf-stat-value { display: block; margin-top: 0.3rem; font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: var(--gf-ink); font-variant-numeric: tabular-nums; }
.gf-stat-note { display: block; margin-top: 0.2rem; font-size: 0.85rem; color: var(--gf-muted); }

/* ---------- Toolbar & segmented control ----------------------------------- */
.gf-toolbar {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem;
    padding: 1rem 1.25rem;
    background: var(--gf-surface-2);
    border: 1px solid var(--gf-border);
    border-radius: var(--gf-radius);
}
.gf-toolbar .form-label { margin-bottom: 0.3rem; font-size: 0.8rem; font-weight: 600; color: var(--gf-muted); }
.gf-toolbar > div { min-width: 0; }

.gf-seg {
    display: inline-flex; flex-wrap: wrap; gap: 0.25rem;
    padding: 0.25rem;
    background: var(--gf-surface-3);
    border: 1px solid var(--gf-border);
    border-radius: var(--gf-radius-sm);
}
.gf-seg > a, .gf-seg > button, .gf-seg > label {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border: 0; border-radius: 6px;
    background: transparent;
    color: var(--gf-muted);
    font-size: 0.9rem; font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}
.gf-seg > a:hover, .gf-seg > button:hover, .gf-seg > label:hover { color: var(--gf-ink); }
.gf-seg > .active, .gf-seg > [aria-current="page"], .gf-seg > [aria-pressed="true"],
.gf-seg > input:checked + label {
    background: var(--gf-surface);
    color: var(--gf-ink);
    box-shadow: var(--gf-shadow-sm);
}
.gf-seg > input { position: absolute; opacity: 0; pointer-events: none; }
.gf-seg > input:focus-visible + label { outline: 3px solid var(--gf-primary-text); outline-offset: 2px; }

/* ---------- Panels -------------------------------------------------------- */
.gf-panel {
    background: var(--gf-surface);
    border: 1px solid var(--gf-border);
    border-radius: var(--gf-radius);
    box-shadow: var(--gf-shadow-sm);
}
.gf-panel + .gf-panel { margin-top: 1.5rem; }
.gf-panel-head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gf-border);
}
.gf-panel-head h2, .gf-panel-head h3 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.gf-panel-body { padding: 1.25rem; }
.gf-panel-body > :last-child { margin-bottom: 0; }

.gf-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.gf-card-head h2, .gf-card-head h3 { margin: 0; font-size: 1.1rem; font-weight: 600; }
.gf-card--compact { padding: 1.25rem; }

/* ---------- Tables -------------------------------------------------------- */
.gf-table-wrap {
    background: var(--gf-surface);
    border: 1px solid var(--gf-border);
    border-radius: var(--gf-radius);
    overflow-x: auto;
}
.gf-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--gf-text);
    --bs-table-border-color: var(--gf-border);
    --bs-table-hover-bg: var(--gf-surface-2);
    --bs-table-hover-color: var(--gf-ink);
    --bs-table-striped-bg: var(--gf-surface-2);
    --bs-table-active-bg: var(--gf-primary-subtle);
    margin-bottom: 0;
}
.gf-table > :not(caption) > * > * { padding: 0.75rem 1rem; vertical-align: middle; }
.gf-table thead th {
    background: var(--gf-surface-2);
    color: var(--gf-muted);
    font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
    white-space: nowrap;
}
.gf-table tbody tr:last-child > * { border-bottom-width: 0; }
.gf-table .is-current > * { background: var(--gf-primary-subtle); }

/* ---------- Status pills -------------------------------------------------- */
.gf-pill--success { background: rgba(21, 128, 61, 0.1); border-color: transparent; color: var(--gf-success); }
.gf-pill--danger { background: rgba(185, 28, 28, 0.08); border-color: transparent; color: var(--gf-danger); }
.gf-pill--warning { background: var(--gf-accent-subtle); border-color: transparent; color: var(--gf-accent-text); }
.gf-pill--muted { background: var(--gf-surface-3); border-color: transparent; color: var(--gf-muted); }
[data-bs-theme="dark"] .gf-pill--success { background: rgba(74, 222, 128, 0.12); }
[data-bs-theme="dark"] .gf-pill--danger { background: rgba(248, 113, 113, 0.12); }
.gf-pill--sm { padding: 0.15rem 0.55rem; font-size: 0.78rem; }

/* ---------- People -------------------------------------------------------- */
.gf-avatar-md, .gf-avatar-lg {
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background: var(--gf-surface-3);
    border: 1px solid var(--gf-border);
}
.gf-avatar-md { width: 40px; height: 40px; }
.gf-avatar-lg { width: 72px; height: 72px; }
.gf-person { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.gf-person-name { display: block; font-weight: 600; color: var(--gf-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-person-meta { display: block; font-size: 0.85rem; color: var(--gf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-initials {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--gf-primary-subtle); color: var(--gf-primary-text);
    font-weight: 600;
}

/* ---------- Data ---------------------------------------------------------- */
.gf-dl { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: 0.6rem 1.25rem; margin: 0; }
.gf-dl dt { color: var(--gf-muted); font-weight: 500; }
.gf-dl dd { margin: 0; color: var(--gf-ink); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
    .gf-dl { grid-template-columns: 1fr; gap: 0.15rem; }
    .gf-dl dd { margin-bottom: 0.6rem; }
}

.gf-code {
    display: block;
    margin: 0;
    padding: 0.85rem 1rem;
    background: var(--gf-surface-3);
    border: 1px solid var(--gf-border);
    border-radius: var(--gf-radius-sm);
    color: var(--gf-ink);
    font-family: var(--gf-mono); font-size: 0.8rem; line-height: 1.55;
    white-space: pre-wrap; word-break: break-all;
    max-height: 14rem; overflow: auto;
}
.gf-code-row { display: flex; align-items: flex-start; gap: 0.5rem; }
.gf-code-row .gf-code { flex: 1 1 auto; min-width: 0; }

/* ---------- Media --------------------------------------------------------- */
.gf-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--gf-radius-sm);
    background: var(--gf-surface-3);
}
.gf-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Score --------------------------------------------------------- */
.gf-score {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    width: 72px; height: 72px; flex-shrink: 0;
    border-radius: 50%;
    border: 4px solid var(--gf-border-strong);
    color: var(--gf-ink);
    font-size: 1.4rem; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums;
}
.gf-score small { font-size: 0.65rem; font-weight: 500; color: var(--gf-muted); margin-top: 0.15rem; }
.gf-score--high { border-color: var(--gf-success); }
.gf-score--mid { border-color: var(--gf-accent); }
.gf-score--low { border-color: var(--gf-danger); }
.gf-score--sm { width: 44px; height: 44px; border-width: 3px; font-size: 0.95rem; }

/* ---------- Misc ---------------------------------------------------------- */
.gf-toast-stack { position: fixed; right: 1rem; bottom: 1rem; z-index: 1090; display: grid; gap: 0.5rem; max-width: min(420px, calc(100vw - 2rem)); }
.gf-section-sm { padding-top: 2rem; padding-bottom: 3.5rem; }
.gf-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gf-tabular { font-variant-numeric: tabular-nums; }

/* ---------- Gallery, battles, leaderboard ------------------------------- */

/* ---------- Gallery, battles, leaderboard (fork A) ------------------------ */
/* Avatar with an initial underneath; the GitHub image covers it and removes itself on error */
.gf-battle-avatar {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid var(--gf-border);
    background: var(--gf-primary-subtle);
    color: var(--gf-primary-text);
    font-weight: 600;
}
.gf-battle-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gf-battle-avatar--lg { width: 72px; height: 72px; font-size: 1.5rem; }
.gf-battle-avatar--sm { width: 32px; height: 32px; font-size: 0.85rem; }

.gf-gallery-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: 0 0 1.25rem; }
.gf-gallery-stats dt { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gf-muted); }
.gf-gallery-stats dd { margin: 0.15rem 0 0; font-size: 1.15rem; font-weight: 700; color: var(--gf-ink); font-variant-numeric: tabular-nums; }

/* Battle card: A | vs | B */
.gf-battle-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: stretch; }
.gf-battle-side {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    padding: 1.25rem 1rem;
    border: 1px solid var(--gf-border);
    border-radius: var(--gf-radius-sm);
    background: var(--gf-surface-2);
    text-align: center;
    min-width: 0;
}
.gf-battle-side.is-voted { border-color: var(--gf-primary); background: var(--gf-primary-subtle); }
.gf-battle-side.is-winner { border-color: var(--gf-success); }
.gf-battle-name { margin: 0; font-size: 1.05rem; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-battle-votes { font-size: 1.75rem; font-weight: 700; line-height: 1; color: var(--gf-ink); font-variant-numeric: tabular-nums; }
.gf-battle-side .btn { margin-top: auto; }
.gf-battle-vs {
    align-self: center;
    font-family: var(--gf-mono); font-weight: 500; font-size: 0.9rem;
    color: var(--gf-subtle); text-transform: uppercase; letter-spacing: 0.08em;
}
.gf-battle-bar { display: flex; height: 8px; overflow: hidden; border-radius: var(--gf-radius-pill); background: var(--gf-surface-3); }
.gf-battle-bar > span { display: block; height: 100%; }
.gf-battle-bar .is-a { background: var(--gf-primary); }
.gf-battle-bar .is-b { background: var(--gf-accent); }
@media (max-width: 575.98px) {
    .gf-battle-grid { grid-template-columns: 1fr; }
    .gf-battle-vs { justify-self: center; }
}

/* Selectable portfolio cards (enter battle) */
.gf-battle-option { position: relative; height: 100%; }
.gf-battle-option input { position: absolute; opacity: 0; pointer-events: none; }
.gf-battle-option label {
    display: flex; flex-direction: column; gap: 0.35rem; height: 100%;
    padding: 1rem 1.1rem 1rem 3rem;
    border: 1px solid var(--gf-border-strong);
    border-radius: var(--gf-radius-sm);
    background: var(--gf-surface);
    cursor: pointer;
    position: relative;
}
.gf-battle-option label::before {
    content: "";
    position: absolute; left: 1.1rem; top: 1.15rem;
    width: 1.1rem; height: 1.1rem;
    border: 2px solid var(--gf-border-strong);
    border-radius: 50%;
    background: var(--gf-surface);
}
.gf-battle-option label:hover { border-color: var(--gf-primary-border); }
.gf-battle-option input:checked + label { border-color: var(--gf-primary); background: var(--gf-primary-subtle); box-shadow: inset 0 0 0 1px var(--gf-primary); }
.gf-battle-option input:checked + label::before { border-color: var(--gf-primary); background: var(--gf-primary); box-shadow: inset 0 0 0 3px var(--gf-surface); }
.gf-battle-option input:focus-visible + label { outline: 3px solid var(--gf-primary-text); outline-offset: 2px; }

/* Leaderboard top three */
.gf-lb-top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem; }
.gf-lb-rank {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2rem; height: 2rem; padding: 0 0.4rem;
    border-radius: var(--gf-radius-pill);
    background: var(--gf-surface-3); color: var(--gf-ink);
    font-family: var(--gf-mono); font-size: 0.85rem; font-weight: 500;
}
.gf-lb-rank--1 { background: var(--gf-accent-subtle); color: var(--gf-accent-text); }
.gf-lb-value { font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: var(--gf-ink); font-variant-numeric: tabular-nums; }

/* ---------- Recruiter dashboard, talent pool, candidate report ---------- */

/* ---------- Recruiter: dashboard, talent pool, candidate report ------------ */
.gf-rec-card { gap: 1rem; padding: 1.25rem; }
.gf-rec-card-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem;
    margin-top: auto; padding-top: 1rem;
    border-top: 1px solid var(--gf-border);
}
.gf-rec-filter { flex: 1 1 14rem; max-width: 22rem; }
.gf-rec-grow { min-width: 0; }
.gf-rec-initials-lg { width: 72px; height: 72px; font-size: 1.6rem; }

.gf-rec-rating { display: inline-flex; gap: 0.1rem; }
.gf-rec-rating button {
    padding: 0.2rem 0.25rem;
    border: 0; border-radius: 4px;
    background: transparent;
    color: var(--gf-subtle);
    font-size: 1.05rem; line-height: 1;
}
.gf-rec-rating button.is-on { color: var(--gf-accent-text); }
.gf-rec-rating button:hover { color: var(--gf-accent-text); }

.gf-rec-controls {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem 2rem;
    margin-top: 1.25rem; padding-top: 1.25rem;
    border-top: 1px solid var(--gf-border);
}
.gf-rec-controls .form-select { min-width: 12rem; }

.gf-rec-summary { font-size: 1.02rem; line-height: 1.7; color: var(--gf-text); }

.gf-rec-bar-row + .gf-rec-bar-row { margin-top: 1rem; }
.gf-rec-bar { height: 0.5rem; background: var(--gf-surface-3); }
.gf-rec-bar .progress-bar.is-high { background: var(--gf-success); }
.gf-rec-bar .progress-bar.is-mid { background: var(--gf-accent); }
.gf-rec-bar .progress-bar.is-low { background: var(--gf-danger); }

.gf-rec-chip-main { background: var(--gf-primary-subtle); color: var(--gf-primary-text); }
.gf-rec-icon-good { color: var(--gf-success); }
.gf-rec-icon-warn { color: var(--gf-accent-text); }

.gf-rec-point {
    padding: 0.85rem 1rem;
    border: 1px solid var(--gf-border);
    border-left: 4px solid var(--gf-success);
    border-radius: var(--gf-radius-sm);
    background: var(--gf-surface-2);
}
.gf-rec-point--concern { border-left-color: var(--gf-accent); }
.gf-rec-point + .gf-rec-point { margin-top: 0.75rem; }
.gf-rec-point-title { margin: 0 0 0.2rem; font-weight: 600; color: var(--gf-ink); }
.gf-rec-point-text { margin: 0; font-size: 0.93rem; color: var(--gf-muted); }

.gf-rec-questions { list-style: none; counter-reset: gf-q; margin: 0; padding: 0; }
.gf-rec-questions li { position: relative; counter-increment: gf-q; padding: 0.75rem 0 0.75rem 2.75rem; border-bottom: 1px solid var(--gf-border); }
.gf-rec-questions li:first-child { padding-top: 0; }
.gf-rec-questions li:first-child::before { top: 0; }
.gf-rec-questions li:last-child { border-bottom: 0; padding-bottom: 0; }
.gf-rec-questions li::before {
    content: counter(gf-q);
    position: absolute; left: 0; top: 0.75rem;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.9rem; height: 1.9rem;
    border-radius: 50%;
    background: var(--gf-primary-subtle); color: var(--gf-primary-text);
    font-family: var(--gf-mono); font-size: 0.85rem; font-weight: 500;
}

@media print {
    .gf-rec-point, .gf-panel { break-inside: avoid; }
    .gf-rec-bar .progress-bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Badges and portfolio views ---------------------------------- */

/* ---------- Badges page --------------------------------------------------- */
.gf-badge-themes { position: relative; }
.gf-badge-preview {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: 12rem;
    padding: 1.25rem;
    background: var(--gf-surface-2);
    border: 1px solid var(--gf-border);
    border-radius: var(--gf-radius-sm);
}
.gf-badge-preview img { max-width: 100%; height: auto; }
.gf-badge-options { position: sticky; top: 5.5rem; }
@media (max-width: 991.98px) { .gf-badge-options { position: static; } }

/* ---------- Portfolio owner view ------------------------------------------ */
.gf-pv-tabs { border-bottom: 0; }
.gf-pv-tabs .nav-link { color: var(--gf-muted); font-weight: 500; }
.gf-pv-tabs .nav-link:hover { color: var(--gf-ink); }
.gf-pv-tabs .nav-link.active { color: var(--gf-ink); background: var(--gf-surface); border-color: var(--gf-border) var(--gf-border) var(--gf-surface); }
.gf-pv-tabs + .tab-content .gf-card { border-top-left-radius: 0; }
.gf-pv-preview { min-height: 24rem; height: auto; }
.gf-pv-plain { white-space: pre-wrap; font-family: var(--gf-mono); font-size: 0.875rem; }
.gf-pv-editor-card { height: auto; }
.gf-pv-editor { min-height: 60vh; font-family: var(--gf-mono); font-size: 0.875rem; line-height: 1.6; resize: vertical; }

/* ---------- Admin ------------------------------------------------------- */
/* ---------- Admin (fork D) ------------------------------------------------ */
.gf-admin-narrow { max-width: 24rem; }
.gf-admin-credits { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.75rem; }
.gf-admin-credits .form-select, .gf-admin-credits .form-control { width: auto; min-width: 7rem; }
.gf-admin-error-row > td { padding-top: 0 !important; color: var(--gf-danger); font-size: 0.85rem; }