/* ====================================================
   SHARED DOT STEPPER
   Re-styles .pf-step-dot / .pf-step-line to match the
   club stepper for player, parent and admin wizards.
   Loaded in both hosts after the per-role theme files.
   ==================================================== */

/* Dot track */
.pf-steps {
    display: flex;
    align-items: center;
    gap: 0;
}

.pf-step-container {
    display: flex;
    align-items: center;
    flex: 1;
}

/* Dots */
.pf-step-dot,
.pf-step-dot.pf-step-dot-player,
.pf-step-dot.pf-step-dot-parent,
.pf-step-dot.pf-step-dot-admin {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 2px solid #d1d5db;
    color: #ffffff;
    font-size: 0;
    transition: all .25s ease;
}

/* Hide any inner content (numbers / Bootstrap icons) and use pseudo content */
.pf-step-dot > * { display: none !important; }

.pf-step-dot::after {
    display: block;
    font-size: .75rem;
    font-weight: 700;
}

.pf-step-dot.done,
.pf-step-dot.pf-step-dot-player.done,
.pf-step-dot.pf-step-dot-parent.done,
.pf-step-dot.pf-step-dot-admin.done {
    background: #16a34a;
    border-color: #16a34a;
}

.pf-step-dot.done::after,
.pf-step-dot.pf-step-dot-player.done::after,
.pf-step-dot.pf-step-dot-parent.done::after,
.pf-step-dot.pf-step-dot-admin.done::after {
    content: '✓';
}

/* Active dot default (green) - overridden per role below */
.pf-step-dot.active,
.pf-step-dot.pf-step-dot-player.active,
.pf-step-dot.pf-step-dot-parent.active,
.pf-step-dot.pf-step-dot-admin.active {
    background: #16a34a;
    border-color: #16a34a;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, .18);
}

.pf-step-dot.active::after,
.pf-step-dot.pf-step-dot-player.active::after,
.pf-step-dot.pf-step-dot-parent.active::after,
.pf-step-dot.pf-step-dot-admin.active::after {
    content: none;
}

/* Future / todo dot */
.pf-step-dot:not(.done):not(.active),
.pf-step-dot.pf-step-dot-player:not(.done):not(.active),
.pf-step-dot.pf-step-dot-parent:not(.done):not(.active),
.pf-step-dot.pf-step-dot-admin:not(.done):not(.active) {
    background: #ffffff;
    border-color: #d1d5db;
}

.pf-step-dot:not(.done):not(.active)::after,
.pf-step-dot.pf-step-dot-player:not(.done):not(.active)::after,
.pf-step-dot.pf-step-dot-parent:not(.done):not(.active)::after,
.pf-step-dot.pf-step-dot-admin:not(.done):not(.active)::after {
    content: none;
}

/* Connector lines */
.pf-step-line,
.pf-step-line.done {
    flex: 1;
    height: 2px;
    max-width: 3rem;
    min-width: 0.5rem;
    background: #d1d5db;
    border: none;
    margin: 0;
    padding: 0;
}

.pf-step-line.done,
.pf-step-line.done:not(.done) { /* keep higher specificity than playerfirst */
    background: #16a34a;
}

/* --- Role-specific active dot colors --- */
.player-registration-card .pf-step-dot.active,
.pf-step-dot.pf-step-dot-player.active,
.role-player .pf-step-dot.active {
    background: var(--pf-player-red);
    border-color: var(--pf-player-red);
    box-shadow: 0 0 0 4px rgba(196, 30, 58, .18);
}

.parent-registration-card .pf-step-dot.active,
.pf-step-dot.pf-step-dot-parent.active,
.role-parent .pf-step-dot.active {
    background: var(--pf-parent-green);
    border-color: var(--pf-parent-green);
    box-shadow: 0 0 0 4px rgba(0, 166, 81, .18);
}

.admin-registration-card .pf-step-dot.active,
.pf-step-dot.pf-step-dot-admin.active,
.role-admin .pf-step-dot.active {
    background: var(--pf-admin-purple);
    border-color: var(--pf-admin-purple);
    box-shadow: 0 0 0 4px rgba(75, 0, 130, .18);
}

/* Step header text */
.pf-steps-label {
    color: #6B7280;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    margin: 0 0 .5rem;
    text-transform: uppercase;
}

.pf-step-title {
    color: #111827;
    font-size: 1.25rem;
    font-weight: 800;
    margin: .5rem 0 .25rem;
}

.pf-step-subtitle {
    color: #6B7280;
    font-size: .9rem;
    margin: 0 0 1rem;
}