/* navigation.css — Nav bar, breadcrumbs, search, keyboard focus,
   league prev/next arrows */

/* ============================================
   LEAGUE NAV ARROWS — pair of prev/next buttons rendered under the page
   <h1> on the D and E table pages. Shared style so both surfaces match.
   The parent .page-header is text-align:center, so inline-flex keeps the
   pair centered.
   ============================================ */
.league-nav {
    display: inline-flex;
    gap: var(--space-xs);
    vertical-align: middle;
    margin-top: var(--space-md);
}

.league-nav .nav-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--fs-120);
    font-weight: 700;
    transition: background 0.15s;
}

.league-nav .nav-arrow:hover:not(.disabled) {
    background: var(--color-hover);
}

.league-nav .nav-arrow.disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* ============================================
   SKIP LINK (a11y)
   ============================================ */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--color-accent, #2563eb);
    color: var(--color-on-accent);
    padding: 8px 16px;
    z-index: 9999;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 4px 0;
    transition: top 150ms ease-out;
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 0;
    outline: 2px solid #fff;
    outline-offset: -4px;
}

/* ============================================
   SITE NAV BAR
   ============================================ */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--header-bg);
    color: var(--header-text);
    box-shadow: var(--shadow-md);
}

.site-nav-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    /* Brand size scales linearly (18px @ 360vw → 24px @ 1440vw). Vertical padding
       is driven by the same variable so the bar grows in step. Scoping the
       font-size to .nav-home (not the inner) keeps neighbouring wrappers at
       default line-height — otherwise their inline contents (button, input)
       would bottom-align inside an inflated line box and look mis-centered. */
    --brand-size: var(--fs-160);
    min-height: var(--nav-height);
    padding: calc(var(--brand-size) * 0.6) var(--space-md);
    gap: var(--space-md);
}

/* Home link */
.nav-home {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    color: var(--header-text);
    text-decoration: none;
    font-weight: 700;
    font-size: var(--brand-size);
    line-height: 1.1;
    white-space: nowrap;
    transition: opacity 0.15s;
}
.nav-home:hover {
    opacity: 0.8;
}

/* Round brand icon left of the "Shabi Israel" text — shares the home link so a
   click anywhere on it routes to index.html. */
.nav-home-logo {
    height: 1.4em;
    width: 1.4em;
    object-fit: contain;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Leagues dropdown */
.nav-leagues {
    position: relative;
}

.nav-leagues-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--header-text);
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-085);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
.nav-leagues-btn:hover {
    background: var(--header-bg-hover);
}

.nav-leagues-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 260px;
    max-height: 400px;
    overflow-y: auto;
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    list-style: none;
    padding: var(--space-xs) 0;
    z-index: 110;
}

.nav-leagues-dropdown li {
    padding: 0;
}

.nav-leagues-dropdown .dropdown-section {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--fs-075);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-muted);
    letter-spacing: 0.5px;
}

.nav-leagues-dropdown a {
    display: block;
    padding: 6px var(--space-md);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--fs-090);
    transition: background 0.1s;
}
.nav-leagues-dropdown a:hover {
    background: var(--color-hover);
}

.nav-leagues-dropdown .status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}
.nav-leagues-dropdown .status-dot.running {
    background: var(--color-running);
}
.nav-leagues-dropdown .status-dot.completed {
    background: var(--color-completed);
}

/* ============================================
   PLAYER SEARCH
   ============================================ */
.nav-search {
    position: relative;
    margin-left: auto;
}

.nav-admin-user {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px 4px 6px;
    border-radius: 22px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    white-space: nowrap;
    font-size: var(--fs-085);
    flex-shrink: 0;
}

.nav-admin-logo {
    height: clamp(18px, calc(0.71vw + 15.4px), 24px);
    width: clamp(18px, calc(0.71vw + 15.4px), 24px);
    object-fit: contain;
    border-radius: 50%;
    flex-shrink: 0;
}

.nav-admin-avatar {
    width: clamp(18px, calc(0.71vw + 15.4px), 24px);
    height: clamp(18px, calc(0.71vw + 15.4px), 24px);
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-068);
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    text-transform: uppercase;
}

.nav-admin-label {
    color: rgba(255,255,255,0.55);
}

.nav-admin-name {
    color: #fff;
    font-weight: 600;
}

.nav-search input {
    width: 180px;
    padding: 5px 10px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.1);
    color: var(--header-text);
    font-size: var(--fs-093);
    outline: none;
    transition: width 0.2s, border-color 0.15s;
}
.nav-search input::placeholder {
    color: rgba(255,255,255,0.5);
}
.nav-search input:focus {
    width: 240px;
    border-color: var(--color-accent);
    background: rgba(255,255,255,0.15);
}

.nav-search-results {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 280px;
    max-height: 360px;
    overflow-y: auto;
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    list-style: none;
    padding: var(--space-xs) 0;
    z-index: 110;
}

.nav-search-results li {
    padding: 0;
}

.nav-search-results a {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 8px var(--space-md);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--fs-090);
    transition: background 0.1s;
}
.nav-search-results a:hover {
    background: var(--color-hover);
}

.nav-search-results .search-player-info {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.nav-search-results .search-player-name {
    font-weight: 600;
    white-space: nowrap;
}
.nav-search-results .search-player-realname {
    font-size: var(--fs-080);
    color: var(--color-text-muted);
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-search-results .search-league-hint {
    font-size: var(--fs-078);
    color: var(--color-text-muted);
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-search-results .search-empty {
    padding: 12px var(--space-md);
    color: var(--color-text-muted);
    font-size: var(--fs-085);
    text-align: center;
}

/* ── Command-palette style grouped results ── */
.nav-search-results .search-group-header {
    padding: 8px var(--space-md) 4px;
    font-size: var(--fs-068);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.nav-search-results .search-group-header:not(:first-child) {
    margin-top: 2px;
    border-top: 1px solid var(--color-border);
    padding-top: 8px;
}

/* Leading type icon: circle = player, rounded-square = league. */
:is(.nav-search-results, .search-sheet-results) .search-icon {
    position: relative;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-080);
    font-weight: 800;
    line-height: 1;
}
/* Player avatar — mirrors the player-card header: rounded square holding
   either the photo or a 2-letter monogram, with a status dot overlay. */
:is(.nav-search-results, .search-sheet-results) .search-icon--player {
    border-radius: 7px;
    background: linear-gradient(135deg, var(--color-text-muted), var(--color-text-secondary));
    color: var(--color-surface);
    text-transform: uppercase;
    font-size: var(--fs-070);
    letter-spacing: 0.02em;
}
:is(.nav-search-results, .search-sheet-results) .search-icon--player.has-photo {
    background: none;
    border: 1px solid var(--color-border);
}
:is(.nav-search-results, .search-sheet-results) .search-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 7px;
    object-fit: cover;
}
:is(.nav-search-results, .search-sheet-results) .search-status-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid var(--color-surface);
}
:is(.nav-search-results, .search-sheet-results) .search-status-dot.green  { background: #2ecc40; }
:is(.nav-search-results, .search-sheet-results) .search-status-dot.orange { background: #f59e0b; }
:is(.nav-search-results, .search-sheet-results) .search-status-dot.gray   { background: #9ca3af; }
:is(.nav-search-results, .search-sheet-results) .search-icon--league {
    border-radius: 7px;
    background: var(--color-hover);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}
:is(.nav-search-results, .search-sheet-results) .search-league-glyph {
    display: block;
}
:is(.nav-search-results, .search-sheet-results) .search-icon--league .status-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 9px;
    height: 9px;
    margin: 0;
    border: 2px solid var(--color-surface);
}
:is(.nav-search-results, .search-sheet-results) .search-icon--league .status-dot.running {
    background: var(--color-running);
}
:is(.nav-search-results, .search-sheet-results) .search-icon--league .status-dot.completed {
    background: var(--color-completed);
}

/* League-type badge (DOUBLING / REGULAR / UBC) — MOVED to search-overlay.css.
   It was scoped to `.nav-search-results` here, which made the sidebar search
   the only place able to use it: admin never loads this file, so the admin's
   league picker rendered the same badge unstyled. Its new home is loaded by
   both the public site and admin, and one selector list there now serves this
   search, the desktop combobox row and the mobile sheet row from a single
   definition. Do not re-add it here. */

/* Right-side league status pill (league rows only).
   Font (size + weight + line-height) is kept identical to
   .search-type-badge above; casing is intentionally NOT unified —
   the status pill stays title-case ("Running"), the type badge stays
   uppercase ("DOUBLING"). */
.nav-search-results .search-type-pill {
    margin-left: auto;
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--fs-068);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.nav-search-results .search-type-pill.running {
    background: color-mix(in srgb, var(--color-running) 18%, transparent);
    color: var(--color-running);
}
.nav-search-results .search-type-pill.completed {
    background: var(--color-hover);
    color: var(--color-text-muted);
}

/* ============================================
   BREADCRUMBS
   ============================================ */
/* "V1" segmented pill trail (Player Page Lab).
   Each <li> becomes a chevron-shaped segment that overlaps the next.
   The renderer still emits separator <li class="sep"> nodes between
   items; we hide them since the chevron shape itself does the job. */
.breadcrumbs {
    padding: var(--space-sm) 0;
    margin-bottom: var(--space-sm);
}

.breadcrumbs ol {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    gap: 0;
    margin: 0;
    padding: 0;
    isolation: isolate;
    font-size: var(--fs-085);
    font-weight: 600;
}

.breadcrumbs .sep {
    display: none;
}

.breadcrumbs li {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.55em 1.4em 0.55em 1.1em;
    margin-left: -0.625em;
    background: var(--header-bg, var(--color-surface));
    color: var(--header-text, var(--color-text));
    opacity: 0.7;
    clip-path: polygon(
        0 0,
        calc(100% - 0.75em) 0,
        100% 50%,
        calc(100% - 0.75em) 100%,
        0 100%,
        0.75em 50%
    );
    z-index: 1;
}
.breadcrumbs li:first-child {
    margin-left: 0;
    padding-left: 1.1em;
    clip-path: polygon(
        0 0,
        calc(100% - 0.75em) 0,
        100% 50%,
        calc(100% - 0.75em) 100%,
        0 100%
    );
}

.breadcrumbs li:nth-child(3) { z-index: 2; opacity: 0.85; }

.breadcrumbs a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.15s;
}

.breadcrumbs li:hover { opacity: 1; }

.breadcrumbs .current {
    opacity: 1;
    background: var(--color-accent);
    color: var(--color-on-accent);
    box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.18);
    z-index: 3;
    font-weight: 700;
}

/* ============================================
   ALSO PLAYS IN
   ============================================ */
.also-plays-in {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.also-plays-in h3 {
    font-size: var(--fs-095);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
    font-weight: 600;
}

.also-plays-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.also-plays-links a {
    display: inline-block;
    padding: 4px 12px;
    background: var(--color-accent-light);
    color: var(--color-accent);
    border-radius: var(--radius-full);
    text-decoration: none;
    font-size: var(--fs-085);
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}
.also-plays-links a:hover {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

/* ============================================
   KEYBOARD FOCUS
   ============================================ */
tr.kb-focused {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .site-nav-inner {
        flex-wrap: wrap;
        height: auto;
        padding: var(--space-sm) var(--space-sm);
        gap: var(--space-sm);
    }

    .nav-search {
        width: 100%;
        margin-left: 0;
    }
    .nav-search input {
        width: 100%;
    }
    .nav-search input:focus {
        width: 100%;
    }

    .nav-search-results {
        right: 0;
        left: 0;
        min-width: auto;
    }

    /* Search goes to row 2; admin badge stays on row 1 with the title */
    .nav-search {
        order: 1;
    }

    .nav-admin-user {
        order: 0;
        margin-left: auto;
        gap: 5px;
        padding: 3px 8px 3px 4px;
    }

    .nav-admin-label {
        display: none;
    }

    .nav-admin-name {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .breadcrumbs {
        font-size: var(--fs-080);
    }
}