/* ============================================================
   Foxco Draft Board — fdb-frontend-extra.css
   Elementor widget overrides + mobile assessment styles
   ============================================================ */

/* ── Scoping & resets for Elementor themes ──────────────────────────────── */
#fdb-board-wrap,
.fdb-frontend-wrap {
    box-sizing: border-box;
}
#fdb-board-wrap *,
.fdb-frontend-wrap * {
    box-sizing: border-box;
}

/* Override Elementor link colors inside board */
#fdb-board-wrap a,
.fdb-frontend-wrap a {
    text-decoration: none;
}

/* ── Full-width board on frontend ───────────────────────────────────────── */
#fdb-board-wrap {
    width: 100%;
    background: var(--fdb-bg);
    padding: 16px;
}

/* Teams strip full width on frontend — equal columns, no scroll */
#fdb-board-wrap .fdb-teams-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: visible;
}
#fdb-board-wrap .fdb-team-card {
    flex: 1 1 0;
    min-width: 0;
}

/* ── Assessment frontend — mobile first ─────────────────────────────────── */
#fdb-assess-frontend {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px 16px;
    background: var(--fdb-bg);
    min-height: 100vh;
    color: var(--fdb-text);
}

.fdb-frontend-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--fdb-text);
    margin-bottom: 24px;
    text-align: center;
}

/* Assessment form steps */
.fdb-assess-step { margin-bottom: 20px; }

.fdb-assess-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--fdb-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 10px;
}

/* Large touch targets — min 44px */
.fdb-assess-select,
.fdb-assess-input {
    display: block;
    width: 100%;
    padding: 14px 16px;
    font-size: 16px; /* ≥16px prevents iOS zoom */
    background: var(--fdb-card);
    color: var(--fdb-text);
    border: 2px solid var(--fdb-border);
    border-radius: var(--fdb-radius);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s;
}
.fdb-assess-select:focus,
.fdb-assess-input:focus {
    border-color: var(--fdb-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59,130,246,.25);
}

/* Number input — extra large */
.fdb-assess-number-input {
    font-size: 36px;
    font-weight: 900;
    text-align: center;
    padding: 16px;
    letter-spacing: 4px;
}

/* Handedness toggles — big touch targets */
.fdb-assess-toggle-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}
.fdb-assess-toggle {
    padding: 18px 0;
    font-size: 24px;
    font-weight: 900;
    border-radius: var(--fdb-radius);
    border: 3px solid var(--fdb-border);
    background: var(--fdb-card);
    color: var(--fdb-muted);
    cursor: pointer;
    transition: all .15s;
    min-height: 60px;
}
.fdb-assess-toggle.active {
    border-color: var(--fdb-primary);
    background: var(--fdb-primary);
    color: #fff;
}

/* Position grid — large tappable buttons */
.fdb-assess-pos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}
.fdb-assess-pos-btn {
    padding: 14px 8px;
    font-size: 16px;
    font-weight: 700;
    border-radius: var(--fdb-radius);
    border: 2px solid var(--fdb-border);
    background: var(--fdb-card);
    color: var(--fdb-muted);
    cursor: pointer;
    transition: all .15s;
    min-height: 48px;
}
.fdb-assess-pos-btn.active {
    border-color: var(--fdb-primary);
    background: var(--fdb-primary);
    color: #fff;
}

/* Submit button — full width, prominent */
.fdb-assess-submit-btn {
    display: block;
    width: 100%;
    padding: 20px;
    font-size: 18px;
    font-weight: 900;
    background: var(--fdb-success);
    color: #fff;
    border: none;
    border-radius: var(--fdb-radius);
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    margin-top: 20px;
    min-height: 60px;
}
.fdb-assess-submit-btn:hover  { opacity: .9; }
.fdb-assess-submit-btn:active { transform: scale(.98); }

.fdb-assess-override-btn {
    display: block;
    width: 100%;
    padding: 16px;
    font-size: 15px;
    font-weight: 700;
    background: var(--fdb-warning);
    color: #000;
    border: none;
    border-radius: var(--fdb-radius);
    cursor: pointer;
    margin-top: 10px;
}

/* Player confirm card */
.fdb-player-confirm-card {
    background: var(--fdb-card);
    border: 2px solid var(--fdb-primary);
    border-radius: var(--fdb-radius);
    padding: 16px 20px;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--fdb-text);
}
.fdb-age-pill {
    background: var(--fdb-primary);
    color: #fff;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 14px;
}

/* Typeahead results */
.fdb-assess-results { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.fdb-assess-result-btn {
    width: 100%;
    padding: 14px 16px;
    background: var(--fdb-card);
    border: 1px solid var(--fdb-border);
    border-radius: var(--fdb-radius);
    color: var(--fdb-text);
    font-size: 16px;
    text-align: left;
    cursor: pointer;
    transition: all .15s;
}
.fdb-assess-result-btn:hover {
    background: var(--fdb-card2);
    border-color: var(--fdb-primary);
}
.fdb-assess-no-results { color: var(--fdb-muted); font-size: 14px; padding: 10px 0; }

/* Success flash */
.fdb-assess-success {
    background: rgba(34,197,94,.15);
    border: 2px solid var(--fdb-success);
    border-radius: var(--fdb-radius);
    color: var(--fdb-success);
    font-size: 16px;
    font-weight: 700;
    padding: 16px 20px;
    text-align: center;
    margin-top: 16px;
}

/* Counter */
.fdb-assess-counter {
    background: var(--fdb-card);
    border: 1px solid var(--fdb-border);
    border-radius: var(--fdb-radius);
    padding: 10px 16px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--fdb-text);
    margin-top: 12px;
}

/* Warning in assessment */
.fdb-assess-warn {
    background: #451a03;
    border: 1px solid #78350f;
    color: #fde68a;
    padding: 12px 16px;
    border-radius: var(--fdb-radius);
    font-size: 14px;
    margin-top: 10px;
}

/* ── Rosters frontend ────────────────────────────────────────────────────── */
.fdb-rosters-frontend {
    padding: 16px 0;
}
.fdb-roster-division-section { margin-bottom: 40px; }
.fdb-roster-div-title {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 16px;
    color: var(--fdb-text);
    border-bottom: 2px solid var(--fdb-border);
    padding-bottom: 10px;
}

/* ── Responsive overrides for board on mobile ────────────────────────────── */
@media (max-width: 768px) {
    #fdb-board-wrap { padding: 8px; }
    .fdb-toolbar { flex-direction: column; align-items: flex-start; }
    .fdb-player-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); max-height: 320px; }
    .fdb-teams-strip { flex-direction: column; }
    .fdb-team-card { min-width: unset; max-width: unset; width: 100%; }
    .fdb-assess-pos-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
    .fdb-assess-pos-grid { grid-template-columns: repeat(3, 1fr); }
    .fdb-assess-number-input { font-size: 28px; }
}

/* ── PIN gate ────────────────────────────────────────────────────────────── */
.fdb-pin-gate {
    max-width: 360px;
    margin: 80px auto;
    background: var(--fdb-card);
    border: 1px solid var(--fdb-border);
    border-radius: var(--fdb-radius);
    padding: 40px 32px;
    text-align: center;
}
.fdb-pin-gate h2 { font-size: 28px; font-weight: 900; color: var(--fdb-text); margin: 0 0 12px; }
.fdb-pin-gate p  { color: var(--fdb-muted); font-size: 15px; margin: 0 0 24px; }
.fdb-pin-inputs  { display: flex; flex-direction: column; gap: 12px; }
#fdb-pin-input   { font-size: 28px; font-weight: 900; text-align: center; letter-spacing: 8px; }

/* ── Roster division tabs ────────────────────────────────────────────────── */
.fdb-roster-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--fdb-border);
    padding-bottom: 0;
}
.fdb-roster-tab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--fdb-muted);
    cursor: pointer;
    transition: color .15s, border-color .15s;
    border-radius: 4px 4px 0 0;
}
.fdb-roster-tab:hover { color: var(--fdb-text); }
.fdb-roster-tab.active {
    color: var(--fdb-text);
    border-bottom-color: var(--fdb-primary);
}